/* ============================================================
   AfterHours · shared UI shell (ONE design system, every route)
   Tokens, Navbar, MobileMenu, ChainSwitcher, PageContainer, cards.
   Do NOT change brand colors (dark #0b0b12 bg, indigo/violet accent).
   ============================================================ */
:root{
  --bg:#0b0b12; --panel:#12121d; --panel2:#181824; --panel3:#10101a;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#f5f5fb; --muted:#9c9cb6; --faint:#6f6f8a;
  --accent:#5546ff; --accent2:#7a68ff; --accent-soft:rgba(85,70,255,.13);
  --good:#4ade80; --bad:#f87171; --warn:#fbbf24;
  --r-card:16px; --r-btn:12px; --r-pill:999px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --nav-h:60px;
  --ease:cubic-bezier(.4,0,.2,1); --fast:160ms;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}

/* ---------- focus + press + motion ---------- */
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
button:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- Navbar (shared on every route) ---------- */
.ah-nav{position:sticky;top:0;z-index:120;height:var(--nav-h);display:flex;align-items:center;gap:12px;padding:0 16px;padding-top:env(safe-area-inset-top);
  background:rgba(11,11,18,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ah-nav .ah-brand{display:flex;align-items:center;gap:10px;min-width:0}
.ah-nav .ah-brand img{width:32px;height:32px;border-radius:9px;flex:none}
.ah-nav .ah-brand span{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.ah-nav .ah-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.ah-nav .ah-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 16px;border-radius:var(--r-btn);font-weight:600;font-size:14px;white-space:nowrap;transition:transform var(--fast) var(--ease),background var(--fast)}
.ah-nav .ah-action.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff}
.ah-nav .ah-action.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text)}
.ah-nav .ah-burger{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-btn);background:transparent;border:1px solid var(--line);color:var(--text);font-size:20px;cursor:pointer}
/* Responsive CTA label: full "Explore opportunities" on wide screens, short "Explore" on phones so the brand never clips. */
.ah-nav .ah-action .lbl-short{display:none}
@media (max-width:560px){
  .ah-nav{gap:8px;padding:0 12px}
  .ah-nav .ah-action .lbl-full{display:none}
  .ah-nav .ah-action .lbl-short{display:inline}
  .ah-nav .ah-action{padding:0 14px}
}

/* ---------- Mobile menu (slide-over) ---------- */
.ah-menu-backdrop{position:fixed;inset:0;z-index:180;background:rgba(5,5,10,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease)}
.ah-menu{position:fixed;top:0;left:0;bottom:0;z-index:200;width:min(84vw,320px);height:100dvh;background:var(--panel);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform 200ms var(--ease);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}
.ah-menu-head{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;border-bottom:1px solid var(--line)}
.ah-menu-head .hm-brand{display:flex;align-items:center;gap:10px}.ah-menu-head .hm-brand img{width:30px;height:30px;border-radius:8px}
.ah-menu-head .hm-close{width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid var(--line);color:var(--text);font-size:18px;cursor:pointer}
.ah-menu nav{flex:1;display:flex;flex-direction:column;padding:10px}
.ah-menu a.mi{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 12px;border-radius:12px;color:var(--muted);font-weight:600;font-size:15px}
.ah-menu a.mi .swatch{width:10px;height:10px;border-radius:50%;flex:none}
.ah-menu a.mi.active{color:var(--text);background:var(--accent-soft)}
.ah-menu .mi-label{flex:1}
.ah-menu .mi-sec{margin:6px 0 2px;padding:0 12px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.ah-menu a.mi.chain-sol .swatch{background:#9945ff;box-shadow:0 0 8px #9945ff}
.ah-menu a.mi.chain-bnb .swatch{background:#f0b90b;box-shadow:0 0 8px #f0b90b}
.ah-menu a.mi.chain-bitget .swatch{background:#00f2ea;box-shadow:0 0 8px #00f2ea}
.ah-menu .hm-connect{margin:8px 12px 0;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-weight:700;font-size:15px;border:0;cursor:pointer}
.ah-menu-foot{padding:12px 16px;border-top:1px solid var(--line);color:var(--faint);font-size:11px}
body.ah-lock{overflow:hidden}
.open-ah .ah-menu{transform:translateX(0)}
.open-ah .ah-menu-backdrop{opacity:1;pointer-events:auto}

/* ---------- ChainSwitcher (shared segmented control) ---------- */
.ah-chainwrap{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top));z-index:110;background:rgba(11,11,18,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.ah-chain{display:flex;gap:6px;padding:10px 16px;overflow-x:auto;scrollbar-width:none}
.ah-chain::-webkit-scrollbar{display:none}
.ah-chain .ch{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;flex:none;background:transparent;transition:background var(--fast),color var(--fast)}
.ah-chain .ch .sw{width:8px;height:8px;border-radius:50%;background:currentColor}
.ah-chain .ch.sol{color:#c9a7ff}.ah-chain .ch.sol.on{background:rgba(153,69,255,.22);border-color:#9945ff;color:#e8d8ff}
.ah-chain .ch.bnb{color:#ffd66b}.ah-chain .ch.bnb.on{background:rgba(240,185,11,.2);border-color:#f0b90b;color:#ffeab0}
.ah-chain .ch.bga{color:#7ffaf6}.ah-chain .ch.bga.on{background:rgba(0,242,234,.18);border-color:#00f2ea;color:#c7fffc}

/* ---------- PageContainer + safe area ---------- */
.ah-page{max-width:1080px;margin:0 auto;padding:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}
.ah-gutter{max-width:1080px;margin:0 auto}
/* every page's generic container gets bottom safe-area so the mobile browser
   toolbar never cuts off the last row, and top offset for the sticky navbar */
.wrap{max-width:1080px;margin:0 auto;padding:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 88px);overflow-x:clip}
.watchstrip,section{margin-left:auto;margin-right:auto;max-width:1080px}

/* ---------- Cards / hierarchy (8px scale) ---------- */
.ah-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-2)}
.ah-card-2{background:var(--panel3);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-2)}
.ah-eyebrow{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 12px;border-radius:14px;background:var(--accent-soft);border:1px solid rgba(85,70,255,.32);color:var(--accent2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;overflow-wrap:anywhere}
.ah-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ah-hero h1{font-family:var(--display);font-size:clamp(1.85rem,7vw,2.6rem);line-height:1.08;letter-spacing:-.015em;overflow-wrap:anywhere;color:var(--text)}
.ah-lead{color:var(--text);opacity:.82;font-size:15px;line-height:1.55;max-height:5.2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.ah-lead.long{display:block;max-height:none;overflow:visible;-webkit-line-clamp:auto;-webkit-box-orient:vertical}
.ah-grey{color:var(--muted)}.ah-faint{color:var(--faint)}.ah-up{color:var(--good)}.ah-down{color:var(--bad)}

/* signal card */
.ah-signal{position:relative;overflow:hidden}
.ah-signal .sym{font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1.05}
.ah-signal .pair{font-family:var(--mono);font-size:12px;color:var(--muted)}
.ah-signal .gap{font-family:var(--mono);font-size:1.7rem;font-weight:600;font-variant-numeric:tabular-nums}
.ah-signal .cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ah-signal .kv .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.ah-signal .kv .v{font-family:var(--mono);font-size:15px;font-weight:600}
.ah-signal .ah-btn{width:100%;margin-top:14px}

/* buttons */
.ah-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-btn);font-weight:700;font-size:15px;border:0;cursor:pointer;transition:transform var(--fast) var(--ease);color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent))}
.ah-btn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text)}

/* rail status chips */
.ah-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ah-chips::-webkit-scrollbar{display:none}
.ah-chip{display:inline-flex;align-items:center;gap:7px;flex:none;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel3);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.ah-chip .st{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 6px currentColor;color:var(--good)}
.ah-chip.down .st{background:var(--bad);color:var(--bad)}

/* skeleton + empty/error */
.ah-skel{position:relative;overflow:hidden;background:var(--panel2);border-radius:10px;min-height:16px}
.ah-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.ah-state{text-align:center;padding:18px 12px;color:var(--muted);font-size:14px}
.ah-state button{margin-top:10px}

/* collapsible */
.ah-details{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.ah-details summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--sp-2);cursor:pointer;font-weight:600;font-size:14px;color:var(--text);list-style:none}
.ah-details summary::-webkit-details-marker{display:none}
.ah-details summary::after{content:"+";font-size:18px;color:var(--muted)}
.ah-details[open] summary::after{content:"−"}
.ah-details .bd{padding:0 var(--sp-2) var(--sp-2);font-size:13.5px;color:var(--muted)}

/* misc */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono)}
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}

/* Page-level action buttons (Paper-act / Refresh CTAs). Fallbacks so it renders
   correctly on pages that define their own token names (e.g. bnb.html). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn,12px);border:1px solid transparent;background:linear-gradient(135deg,var(--accent2,#7a68ff),var(--accent,#5546ff));color:#fff;font-weight:600;font-size:14px;font-family:var(--font,var(--sans,'Inter',system-ui,sans-serif));cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background .15s}
.btn:hover{filter:brightness(1.1);box-shadow:0 8px 24px rgba(85,70,255,.35);transform:translateY(-1px)}
.btn:active{transform:translateY(0);filter:brightness(.94)}
.btn.ghost{background:transparent;border:1px solid var(--line-strong,var(--line,rgba(255,255,255,.16)));color:var(--text,var(--txt,#fff))}
.btn.ghost:hover{background:rgba(255,255,255,.06);border-color:var(--accent2,#7a68ff);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
@media (hover:none){.btn:hover{transform:none;box-shadow:none;filter:none}}

/* Shared status + venue components (Phase 55), one vocabulary across pages.
   Falls back to literals so pages defining their own tokens still render. */
.ah-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.ah-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.ah-badge.live{color:#69f0ae;background:rgba(105,240,174,.12);border:1px solid rgba(105,240,174,.3)}
.ah-badge.paper{color:#f0b23c;background:rgba(240,178,60,.12);border:1px solid rgba(240,178,60,.3)}
.ah-badge.gate{color:#9c9cb6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.ah-badge.err{color:#ff6b6b;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.3)}
.ah-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.03em}
.ah-tag.buy{color:#69f0ae;background:rgba(105,240,174,.12);border:1px solid rgba(105,240,174,.3)}
.ah-tag.wait{color:#f0b23c;background:rgba(240,178,60,.12);border:1px solid rgba(240,178,60,.32)}
.ah-tag.blk{color:#9c9cb6;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}