:root { color-scheme: dark; --bg:#08111f; --panel:#111d30; --line:#25334b; --text:#edf4ff; --muted:#97a8c3; --brand:#4de4ba; --brand2:#55a9ff; --warning:#ffcf67; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 85% 0%,#15375a 0,transparent 32%),var(--bg); color:var(--text); font:15px/1.45 Inter, ui-sans-serif,system-ui,sans-serif; } main { max-width:1160px; margin:auto; padding:38px 24px 64px; } .topbar,.section-title,.hero,.total,dl div,.checks li { display:flex; align-items:center; justify-content:space-between; gap:16px; } h1,h2,p { margin:0; } h1 { font-size:24px; } h2 { font-size:24px; line-height:1.15; } .eyebrow { font-size:11px; color:var(--brand); font-weight:800; letter-spacing:.14em; margin-bottom:7px; } .status { color:var(--muted); font-size:13px; } .status i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand); margin-right:5px; } .hero { margin:34px 0 22px; padding:34px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,#10283d,#101a2b); align-items:stretch; } .hero > div:first-child { max-width:520px; } .hero h2 { font-size:38px; margin-bottom:11px; } .hero p:not(.eyebrow) { color:var(--muted); } .metric { width:145px; border-left:1px solid #315071; padding-left:20px; display:flex; flex-direction:column; justify-content:center; } .metric strong { color:var(--brand); font-size:38px; } .metric span { color:var(--muted); font-size:12px; } .grid { display:grid; grid-template-columns:1.3fr .7fr; gap:22px; } .card { padding:26px; border:1px solid var(--line); border-radius:16px; background:rgba(17,29,48,.86); } .section-title span { background:#163755; color:#b8dcff; border-radius:99px; padding:5px 9px; font-size:11px; } form { margin-top:24px; display:grid; gap:15px; } .two,.three { display:grid; gap:12px; } .two { grid-template-columns:1fr 1fr; } .three { grid-template-columns:.7fr 1fr 1fr; } label { color:#c5d2e8; font-size:12px; font-weight:700; display:grid; gap:6px; } input,select { width:100%; background:#0b1627; color:var(--text); border:1px solid #31415a; border-radius:8px; padding:11px; font:inherit; } input:focus,select:focus { outline:2px solid var(--brand2); border-color:transparent; } button { border:0; border-radius:8px; cursor:pointer; padding:13px 16px; background:var(--brand); color:#04201a; font:700 14px inherit; } button:disabled { opacity:.55; cursor:wait; } .total { margin:25px 0 14px; padding:14px 0; border-block:1px solid var(--line); } .total strong { font-size:28px; color:var(--brand); } dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:9px; } dt,dd { margin:0; } dt { color:var(--muted); font-size:12px; } dd { font-weight:700; } .decision { margin:20px 0 12px; border-left:3px solid var(--warning); padding:9px 11px; background:#2c261a; color:#ffdb8b; font-size:13px; } .decision.ok { border-color:var(--brand); background:#102b27; color:#adf8e7; } .checks { list-style:none; padding:0; margin:0; display:grid; gap:10px; } .checks li { flex-wrap:wrap; align-items:baseline; padding-bottom:9px; border-bottom:1px solid var(--line); } .checks span { font-size:10px; font-weight:800; color:var(--warning); } .checks small { width:100%; color:var(--muted); } .fine { margin-top:18px; color:var(--muted); font-size:11px; } .roadmap { margin-top:22px; } .roadmap > div { display:flex; gap:12px; flex-wrap:wrap; } .roadmap span { color:var(--muted); padding:7px 10px; border-radius:99px; border:1px solid var(--line); font-size:12px; } .roadmap .active { color:#06291f; background:var(--brand); border-color:var(--brand); font-weight:800; } @media (max-width:800px) { .hero,.grid { display:grid; grid-template-columns:1fr; } .metric { width:auto; border-left:0; border-top:1px solid #315071; padding:14px 0 0; } .hero h2 { font-size:31px; } } @media (max-width:520px) { main { padding-inline:14px; } .topbar,.section-title { align-items:flex-start; flex-direction:column; } .two,.three { grid-template-columns:1fr; } .hero,.card { padding:20px; } }