:root { color-scheme: dark; --bg:#07070d; --panel:#14141f; --line:#2a2a3d; --text:#f4f7fb; --muted:#b7c0d4; --mag:#ff2bd6; --cyan:#3df0ff; --coin:#ffd15c; --ok:#8dffc1; --bad:#ff8aa0; }
* { box-sizing: border-box; }
body { margin:0; font-family: Outfit, "Segoe UI", sans-serif; background: radial-gradient(1000px 420px at 80% -10%, rgba(255,43,214,.22), transparent 50%), radial-gradient(900px 480px at -10% 20%, rgba(61,240,255,.14), transparent 46%), var(--bg); color: var(--text); }
a { color: var(--cyan); }
img { max-width: 100%; height: auto; }
.wrap { width: min(1080px, calc(100% - 32px)); margin: 0 auto; }
header { position: sticky; top: 0; z-index: 2; background: rgba(7,7,13,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.bar { display:flex; gap:18px; align-items:center; justify-content:space-between; padding:12px 0; }
.brand { display:flex; gap:10px; align-items:center; color:white; text-decoration:none; font-family: Syne, sans-serif; font-weight:700; }
.brand img { width:36px; height:36px; }
nav { display:flex; flex-wrap:wrap; gap:8px 12px; }
nav a { color: var(--text); text-decoration:none; font-size:.95rem; }
nav a[aria-current="page"] { color: var(--mag); }
main { padding: 28px 0 64px; }
h1, h2, h3 { font-family: Syne, sans-serif; line-height:1.15; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 0 0 12px; }
.lede { font-size: 1.12rem; max-width: 68ch; color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 18px 0; }
.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: stretch; }
label { display:block; font-weight:650; margin-bottom:8px; }
input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#0c0c14; color:white; font: inherit; }
button, .button { display:inline-block; margin-top:10px; background: var(--cyan); color:#071016; border:0; border-radius:999px; padding:10px 16px; font: inherit; font-weight:700; text-decoration:none; }
.verdict { min-height: 3.2em; font-weight:650; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .muted { color: var(--muted); }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.stat { font-family: Syne, sans-serif; font-size: 1.6rem; margin:0; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--coin); font-weight:650; }
figure { margin:0; }
figcaption { color: var(--muted); font-size:.9rem; margin-top:6px; }
footer { border-top:1px solid var(--line); padding: 22px 0 40px; color: var(--muted); }
.steps { padding-left: 1.2rem; }
.steps li { margin: 8px 0; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .bar { align-items:flex-start; flex-direction:column; } }