/* Verdict Data shared chrome — Hyperliquid DESIGN.md aligned (mint on near-black) */
:root{
  --vd-bg:#04060c;
  --vd-elev:#0a0d16;
  --vd-elev2:#121622;
  --vd-elev3:#1a1f2e;
  --vd-text:rgba(255,255,255,.92);
  --vd-body:rgba(255,255,255,.78);
  --vd-muted:rgba(255,255,255,.60);
  --vd-subtle:rgba(255,255,255,.45);
  --vd-brand:#97FCE4;
  --vd-brand-strong:#50d2c1;
  --vd-brand-deep:#2fa89a;
  --vd-brand-soft:rgba(151,252,228,.12);
  --vd-on-brand:#04060c;
  --vd-border:rgba(255,255,255,.16);
  --vd-border-soft:rgba(255,255,255,.08);
  --vd-up:#3fd68b;
  --vd-down:#ff5470;
  --vd-radius-btn:8px;
  --vd-radius-card:12px;
  --vd-font:Inter,system-ui,-apple-system,sans-serif;
  --vd-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
html,body{background:var(--vd-bg)!important;color:var(--vd-text);font-family:var(--vd-font)}
/* Unified frosted topbar */
nav.topbar,header.topbar,.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  min-height:56px;padding:10px 18px;
  background:rgba(4,6,12,.78)!important;
  backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--vd-border-soft)!important;
}
.topbar .logo,.topbar a.logo{font:600 14px/1 var(--vd-font);color:var(--vd-text);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.topbar .logo .sub{display:none!important}
.topbar .nav-links,.topbar .site-nav,.topbar nav.prod{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center
}
.topbar .nav-links a,.topbar .site-nav a,.topbar nav.prod a{
  color:var(--vd-subtle);font:500 13px/1 var(--vd-font);text-decoration:none
}
.topbar .nav-links a:hover,.topbar .site-nav a:hover,.topbar nav.prod a:hover,
.topbar .nav-links a.on,.topbar .site-nav a.on,.topbar nav.prod a.on{color:var(--vd-brand)}
.topbar .status.ok{background:transparent!important;border-color:rgba(151,252,228,.18)!important;color:rgba(151,252,228,.7)!important}
.btn.primary,.pe-btn.primary,.hc-btn,a.btn.primary{
  background:var(--vd-brand)!important;color:var(--vd-on-brand)!important;border-color:transparent!important;
  border-radius:var(--vd-radius-btn)!important;font-weight:600!important
}
.btn.primary:hover,.pe-btn.primary:hover,.hc-btn:hover{
  background:var(--vd-brand-strong)!important;
  box-shadow:0 0 0 1px rgba(151,252,228,.4),0 0 24px rgba(151,252,228,.18)
}
/* Cards / panels */
.card,.hc-pillar,.hc-card,section.card{
  background:var(--vd-elev)!important;border:1px solid var(--vd-border)!important;border-radius:var(--vd-radius-card)!important
}
/* Numbers */
.mono,table td,table th,.pe-proof-bar{font-variant-numeric:tabular-nums}
/* Hide engineering path walls if any leftover marketing blocks */
.caps,.cap-path-wall{display:none!important}

/* Extra nav aliases used by older pages */
.topbar .nav,.topbar nav#site-nav{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center
}
.topbar .nav a,.topbar nav#site-nav a{
  color:var(--vd-subtle);font:500 13px/1 var(--vd-font);text-decoration:none
}
.topbar .nav a:hover,.topbar .nav a.on,
.topbar nav#site-nav a:hover,.topbar nav#site-nav a.on{color:var(--vd-brand)}
/* Demote ops link if present */
.topbar a[href="/status"]{opacity:.55;font-size:12px}
.topbar .spacer{flex:1}
/* Shared page shell */
.vd-wrap{max-width:1120px;margin:0 auto;padding:32px 20px 80px}
.vd-kicker{margin:0 0 10px;font:600 11px/1 var(--vd-font);letter-spacing:.12em;text-transform:uppercase;color:var(--vd-brand)}
.vd-hero h1{margin:0 0 10px;font:650 clamp(26px,4vw,34px)/1.1 var(--vd-font);letter-spacing:-.03em;color:var(--vd-text)}
.vd-hero p{margin:0 0 20px;max-width:52ch;color:var(--vd-muted);font:15px/1.6 var(--vd-font)}
.vd-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.vd-btn{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:var(--vd-radius-btn);font:600 13px var(--vd-font);border:1px solid var(--vd-border);color:var(--vd-text);text-decoration:none;background:transparent}
.vd-btn.primary{background:var(--vd-brand);border-color:transparent;color:var(--vd-on-brand)}
.vd-btn.primary:hover{background:var(--vd-brand-strong);box-shadow:0 0 0 1px rgba(151,252,228,.4),0 0 24px rgba(151,252,228,.18)}
.vd-btn:hover{border-color:rgba(151,252,228,.35);color:var(--vd-brand)}
.vd-meta{font:12px/1.4 var(--vd-mono);color:var(--vd-subtle);margin-bottom:8px}
.vd-skel{color:var(--vd-subtle);font:13px var(--vd-font);padding:48px 0;text-align:center}
.vd-note{margin-top:20px;font:13px/1.55 var(--vd-font);color:var(--vd-muted)}
.vd-foot{margin-top:48px;padding-top:16px;border-top:1px solid var(--vd-border-soft);color:var(--vd-subtle);font:12px/1.5 var(--vd-font)}
.vd-foot a{color:var(--vd-brand);text-decoration:none}
.vd-foot a:hover{color:var(--vd-brand-strong);text-decoration:underline;text-underline-offset:3px}
.vd-foot .sep{margin:0 .35em;color:var(--vd-subtle);opacity:.7}
footer.vd-foot,footer.page-foot.vd-foot{color:var(--vd-subtle)}

/* hard-knife-7: mobile topbar — clean 2-row wrap under 720px (mint tokens kept) */
@media (max-width:720px){
  nav.topbar,header.topbar,.topbar{
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    padding:10px 14px;
    min-height:0;
    height:auto!important; /* override viz fixed --top */
  }
  .topbar .logo,.topbar a.logo{order:1;flex:0 0 auto}
  .topbar .spacer{display:none!important}
  /* primary CTA + auth chip stay on row 1, right-aligned */
  .topbar > a.btn.primary,
  .topbar > a.cta,
  .topbar > a.vd-btn.primary,
  .topbar > a[href="/#account"],
  .topbar > a[href="#account"],
  .topbar .pill-auth{
    order:2;margin-left:auto;flex:0 0 auto
  }
  .topbar .pill-auth + a.btn.primary,
  .topbar .pill-auth + a[href="/#account"],
  .topbar .pill-auth + a[href="#account"]{
    margin-left:0
  }
  .topbar .nav-links,
  .topbar .site-nav,
  .topbar nav.prod,
  .topbar .nav,
  .topbar nav#site-nav{
    order:3;
    flex:1 1 100%;
    width:100%;
    max-width:100%;
    gap:8px 12px;
    padding-top:8px;
    margin:0;
    border-top:1px solid var(--vd-border-soft);
  }
  .topbar .nav-links a,
  .topbar .site-nav a,
  .topbar nav.prod a,
  .topbar .nav a,
  .topbar nav#site-nav a{
    font-size:12.5px;line-height:1.2
  }
}

