/* BNC Classic (BNCS · BNC经典) · site — Binance-yellow reskin (reskin-theme, 2026-10-03).
 * Tokens live in tokens.css. Dialogs, receipt, wallet picker and the dev panel are in flows.css.
 * Layout (grids, sticky rails, phone cards, breakpoints) is the QA'd one from site-finish; the look is new:
 * exchange-dark cards, brand yellow with glow, Archivo display figures, shimmer / sweep / pulse motion (all off under
 * prefers-reduced-motion). #hero3d is the slot of the WebGL hero (js/ui/hero3d.js); its CSS fallback lives here. */

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--t-body)/1.6 var(--f-sans); font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  padding-bottom: var(--tabbar-h); position: relative; isolation: isolate; overflow-x: clip;
}
/* living page background: two slow yellow auroras + a fine grid near the top (behind every panel) */
body::before {
  content: ""; position: fixed; z-index: -2; left: -20vw; right: -20vw; top: -30vh; height: 120vh; pointer-events: none;
  background:
    radial-gradient(38% 34% at 70% 22%, rgba(240, 185, 11, .085), transparent 70%),
    radial-gradient(30% 30% at 18% 60%, rgba(240, 185, 11, .045), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 85%);
  mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 85%);
}
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6vw, 4vh, 0) scale(1.08); } 100% { transform: translate3d(5vw, -3vh, 0) scale(.96); } }

svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
input { font: inherit; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: inherit; text-align: left; }
::selection { background: var(--y); color: var(--y-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mono, .num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.dim { color: var(--text-3); }
.gold { color: var(--y); }
.up { color: var(--up); }
.down { color: var(--down); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 300; background: var(--y-btn); color: var(--y-ink); padding: 8px 12px; border-radius: var(--r); font-weight: 600; }

/* placeholders for numbers that are not on chain yet */
.ph-text { font-family: var(--f-sans); font-size: var(--t-caption); color: var(--text-3); letter-spacing: 0; font-weight: 500; white-space: nowrap; text-shadow: none; }
.ph-err { color: var(--down); }
.loading-dots::after { content: "…"; }

/* ---------- buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--r); border: 1px solid transparent;
  font: 600 var(--t-body)/1 var(--f-sans); letter-spacing: .01em; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .25s ease, transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
/* primary: button yellow, black ink, a light sweep every few seconds, lift + glow on hover */
.btn-gold { background: var(--y-btn); color: var(--y-ink); box-shadow: 0 0 0 1px rgba(255, 226, 122, .25) inset, 0 6px 18px -8px rgba(240, 185, 11, .55); }
.btn-gold::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 46%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg); animation: shimmer 3.6s var(--ease) infinite;
}
.btn-gold:hover { background: var(--y-hi); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 240, 180, .45) inset, 0 10px 28px -8px rgba(240, 185, 11, .75), 0 0 24px rgba(240, 185, 11, .25); }
.btn-gold:active { background: var(--y); transform: translateY(0); }
@keyframes shimmer { 0%, 58% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
/* small buttons in tables do not sweep (a column of them in sync is noise); they still lift and glow on hover */
.btn-gold.btn-xs::after { display: none; }
/* table-row buttons stay put: no lift on hover, no press shift (dense rows, and pointer automation clicks them) */
.btn.btn-xs:hover, .btn.btn-xs:active { transform: none; }
.btn-ghost { background: var(--bg-3); color: var(--text); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-4); color: var(--y-btn); box-shadow: 0 0 0 1px var(--y-a24) inset; }
.btn-quiet { background: transparent; color: var(--text-2); border-color: var(--line-2); }
.btn-quiet:hover { color: var(--text); border-color: var(--line-3); background: var(--bg-2); }
.btn-sm { height: 32px; padding: 0 14px; font-size: var(--t-data); }
.btn-md { height: 40px; padding: 0 20px; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 15px; border-radius: 10px; }
.btn-xs { height: 28px; padding: 0 12px; font-size: var(--t-caption); border-radius: 6px; }
.btn-block { width: 100%; }
/* a button that cannot be pressed turns neutral grey (never a dimmed yellow) */
.btn[disabled], .btn.is-disabled { cursor: not-allowed; background: var(--bg-3); border-color: transparent; color: var(--text-4); box-shadow: none; transform: none; }
.btn[disabled]::after, .btn.is-disabled::after { display: none; }
.btn.is-busy { cursor: progress; }
.btn .spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--y); text-decoration: none; white-space: nowrap; font-size: var(--t-caption); font-weight: 500; transition: color .15s, text-shadow .2s; }
.link:hover { color: var(--y-hi); text-shadow: var(--glow-sm); }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r);
  border: 1px solid transparent; background: var(--bg-2); color: var(--text-2); cursor: pointer; transition: color .15s, background-color .15s, box-shadow .2s;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--y); background: var(--bg-3); box-shadow: 0 0 0 1px var(--y-a24) inset; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn[aria-expanded="true"] svg { transform: rotate(60deg); }
.icon-btn svg { transition: transform .4s var(--ease); }

/* ---------- chips / tags ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-s); white-space: nowrap;
  font: 500 var(--t-caption)/1 var(--f-sans); color: var(--text-2); background: var(--bg-3); border: 1px solid transparent;
}
.tag-gold { color: var(--y); background: var(--y-a10); border-color: var(--y-a24); }
.tag-quiet { background: transparent; color: var(--text-3); padding: 0; }
.tag-up { color: var(--up); background: transparent; padding: 0; }
.tag-open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.tag svg { width: 11px; height: 11px; color: var(--text-3); }
.cap-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 8px; border: 1px solid var(--y-a40);
  border-radius: var(--r-s); font: 600 var(--t-overline)/1 var(--f-sans); color: var(--y); background: var(--y-a06); white-space: nowrap; vertical-align: 1px; letter-spacing: .02em;
}
.addr-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-num); color: inherit; text-decoration: none; white-space: nowrap; }
.addr-chip:hover { color: var(--y); }
.addr-chip .you { font: 700 var(--t-overline)/1 var(--f-sans); color: var(--y-ink); background: var(--y); padding: 3px 5px; border-radius: 3px; }

/* ==========================================================================
   Ticker (live tape)
   ========================================================================== */
.ticker {
  --tk-bg: #0C1014;
  position: relative; height: var(--ticker-h); overflow: hidden; background: var(--tk-bg);
  border-bottom: 1px solid var(--line); font: 500 var(--t-caption)/var(--ticker-h) var(--f-num); color: var(--text-2);
}
/* edge fades + the brand hairline along the very top of the page */
.ticker::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--tk-bg) 0, transparent 72px, transparent calc(100% - 72px), var(--tk-bg) 100%);
  box-shadow: inset 0 1px 0 rgba(240, 185, 11, .6);
}
.ticker::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, var(--y-hi) 50%, transparent); opacity: .9; transform: translateX(-60%); animation: tkSweep 6s ease-in-out infinite; }
@keyframes tkSweep { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.ticker-track { display: flex; width: max-content; animation: ticker 80s linear infinite; will-change: transform; }
.ticker.static .ticker-track { animation: none; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, body.is-hidden .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; padding: 0; margin: 0; list-style: none; }
.ticker-list li { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap; }
.ticker-list li::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--y); box-shadow: 0 0 6px var(--y); opacity: .75; }
.ticker-list a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.ticker-list a:hover .tv { color: var(--y); }
.tk { color: var(--text-3); font-family: var(--f-sans); font-weight: 400; }
.tv { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   Header (64 px, sticky glass)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 14, 17, .78); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(43, 49, 57, .7);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--head-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
/* Selected transparent logo from output/branding/bncs-logo-original-clear-type.png, shown at about 40 px. */
.seal { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(240, 185, 11, .35)); transition: transform .6s var(--ease); }
.brand:hover .seal { transform: rotate(-12deg) scale(1.06); }
.brand-name { font: 800 21px/1 var(--f-display); font-stretch: var(--wd); letter-spacing: -.01em; }
.brand-cn {
  font: 900 12px/1 var(--f-display); color: var(--y); letter-spacing: .08em; padding: 5px 7px 5px 8px; border-radius: var(--r-s);
  background: var(--y-a10); box-shadow: 0 0 0 1px var(--y-a24) inset;
}
.nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; min-width: 0; }
.nav a {
  position: relative; display: flex; align-items: center; padding: 0 12px; color: var(--text-2); text-decoration: none;
  font-size: var(--t-body); font-weight: 500; white-space: nowrap; transition: color .15s ease;
}
.nav a:hover { color: var(--y); }
.nav a.active { color: var(--text); }
.nav a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px;
  background: var(--y); box-shadow: 0 0 12px var(--y), 0 0 2px var(--y);
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

.status-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); font: 600 var(--t-overline)/1 var(--f-sans); letter-spacing: .04em; white-space: nowrap;
}
.status-chip .s-short, .status-chip .s-tiny { display: none; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.status-chip[data-s="live"] i { background: var(--up); box-shadow: 0 0 0 0 rgba(14, 203, 129, .6); animation: livePing 1.8s ease-out infinite; }
.status-chip[data-s="error"] { color: var(--down); border-color: rgba(246, 70, 93, .45); }
.status-chip[data-s="error"] i { background: var(--down); }
/* test chain: hazard-striped yellow, never subtle */
.status-chip[data-s="dev"] {
  color: var(--y-btn); border: 1px dashed rgba(240, 185, 11, .75);
  background: repeating-linear-gradient(135deg, rgba(240, 185, 11, .16) 0 6px, rgba(11, 14, 17, .4) 6px 12px);
}
.status-chip[data-s="dev"] i { background: var(--y); border-radius: 1px; width: 6px; height: 6px; box-shadow: 0 0 8px var(--y); }
@keyframes livePing { 0% { box-shadow: 0 0 0 0 rgba(14, 203, 129, .55); } 80%, 100% { box-shadow: 0 0 0 6px rgba(14, 203, 129, 0); } }

.lang { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 2px; }
.lang button { border: 0; background: transparent; color: var(--text-3); cursor: pointer; font: 600 var(--t-caption)/1 var(--f-sans); padding: 7px 9px; border-radius: 6px; transition: color .15s, background-color .15s; }
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--bg-4); color: var(--y); }

.wallet-btn .wb-short { display: none; }
.wallet-btn.is-connected { background: var(--bg-2); color: var(--text); border-color: var(--line-2); font-family: var(--f-num); font-size: var(--t-caption); font-weight: 600; gap: 8px; box-shadow: none; }
.wallet-btn.is-connected::after { display: none; }
.wallet-btn.is-connected::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.wallet-btn.is-connected:hover { border-color: var(--y-a40); background: var(--bg-3); color: var(--y); transform: none; }
.wallet-btn.is-wrong { background: transparent; color: var(--down); border-color: rgba(246, 70, 93, .5); box-shadow: none; }
.wallet-btn.is-wrong::after { display: none; }

/* settings popover */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; width: 284px; padding: 6px 0;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-l); box-shadow: var(--shadow-pop);
  animation: popIn .18s var(--ease-out);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-sec { padding: 12px 16px; }
.menu-sec + .menu-sec { border-top: 1px solid var(--line-2); }
.menu-label { display: block; font: 600 var(--t-overline)/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.menu-hint { margin-top: 8px; font-size: var(--t-caption); color: var(--text-3); line-height: 1.5; }
.seg { display: flex; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); padding: 2px; gap: 2px; }
.seg button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--t-caption); font-weight: 500; white-space: nowrap; transition: color .15s, background-color .15s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--bg-3); color: var(--y); }
.ud-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ud-g { background: linear-gradient(90deg, #0ECB81 50%, #F6465D 50%); }
.ud-r { background: linear-gradient(90deg, #F6465D 50%, #0ECB81 50%); }
.menu-addr { font-family: var(--f-code); font-size: var(--t-caption); color: var(--text); word-break: break-all; }
.menu-links { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.menu-lang { display: none; }

/* ==========================================================================
   Hero · copy / 我的金库 + the FOMO board, over the WebGL slot (#hero3d)
   ========================================================================== */
.hero {
  --board-w: 560px; --hero-gap: 64px;
  position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(58% 72% at 80% 34%, rgba(240, 185, 11, .15), transparent 62%),
    radial-gradient(40% 55% at 4% 100%, rgba(240, 185, 11, .07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(11, 14, 17, .4) 0%, rgba(13, 16, 20, .9) 70%, var(--bg) 100%);
}
/* perspective floor: yellow grid running toward the viewer (masked on the wrapper so the loop never jumps) */
.hero-grid-bg {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 92%);
}
.hero-grid-bg::before {
  content: ""; position: absolute; left: -60%; right: -60%; bottom: -10%; height: 220%;
  background-image:
    linear-gradient(rgba(240, 185, 11, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 185, 11, .22) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center bottom;
  transform-origin: 50% 100%; transform: perspective(520px) rotateX(72deg) translateY(0);
  animation: floorRun 3.2s linear infinite;
}
.hero-grid-bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 185, 11, .55) 30%, var(--y-btn) 50%, rgba(240, 185, 11, .55) 70%, transparent);
  box-shadow: 0 0 24px rgba(240, 185, 11, .6); opacity: .55;
}
@keyframes floorRun { to { transform: perspective(520px) rotateX(72deg) translateY(72px); } }

/* WebGL slot (js/ui/hero3d.js mounts its <canvas> here). Covers the whole hero, behind the copy and the board.
   Fallback until / unless a canvas is mounted: our coin floating behind the board, a halo and rising sparks. */
.hero3d { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: hidden; }
.hero3d > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* (the static coin moved to .hero-stage: see "reskin-integrate" at the end of this file) */
.hero3d::before { content: none; }
.hero3d::after {
  content: ""; position: absolute; inset: -40% 0 0 0; opacity: .7;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 226, 122, .9), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 72%, rgba(255, 226, 122, .7), transparent 60%),
    radial-gradient(2px 2px at 58% 42%, rgba(252, 213, 53, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 86%, rgba(255, 226, 122, .6), transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 28%, rgba(252, 213, 53, .9), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 8%, rgba(255, 226, 122, .6), transparent 60%),
    radial-gradient(2px 2px at 92% 64%, rgba(255, 226, 122, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 48%, rgba(252, 213, 53, .55), transparent 60%);
  background-size: 520px 420px; background-repeat: repeat;
  animation: sparks 18s linear infinite;
}
/* once js/ui/hero3d.js is mounted (class h3d-host, WebGL canvas or its own CSS fallback) the scene owns the art:
   our fallback coin, sparks and floor step aside (its scene draws its own perspective floor) */
.hero3d.h3d-host::before, .hero3d.h3d-host::after, .hero3d:has(> canvas)::before, .hero3d:has(> canvas)::after,
.hero3d.is-live::before, .hero3d.is-live::after { opacity: 0; animation: none; transition: opacity .6s ease; }
.hero:has(#hero3d.h3d-host) .hero-grid-bg, .hero:has(#hero3d[data-floor="off"]) .hero-grid-bg { display: none; }
/* hook: data-sweep="off" on #hero3d turns the light sweep off */
.hero:has(#hero3d[data-sweep="off"])::after { display: none; }
@keyframes coinFloat {
  0%, 100% { transform: perspective(900px) rotateY(-28deg) rotateX(10deg) rotateZ(-8deg) translateY(0); }
  50% { transform: perspective(900px) rotateY(-16deg) rotateX(4deg) rotateZ(-4deg) translateY(18px); }
}
@keyframes sparks { to { transform: translateY(-420px); } }

/* light sweep across the whole hero every few seconds (over the content, screen-blended, no pointer events) */
.hero::after {
  content: ""; position: absolute; z-index: 4; top: -30%; bottom: -30%; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 226, 122, .045) 38%, rgba(255, 255, 255, .085) 50%, rgba(255, 226, 122, .045) 62%, transparent 100%);
  transform: translateX(-140%) skewX(-14deg); animation: heroSweep 10s ease-in-out 1.2s infinite;
}
@keyframes heroSweep { 0% { transform: translateX(-140%) skewX(-14deg); } 42%, 100% { transform: translateX(380%) skewX(-14deg); } }

.hero-inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) var(--board-w); gap: var(--hero-gap);
  align-items: center; padding-top: 48px; padding-bottom: 56px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 10px; max-width: 100%;
  border-radius: 999px; background: rgba(240, 185, 11, .07); box-shadow: 0 0 0 1px rgba(240, 185, 11, .28) inset;
  font: 600 var(--t-caption)/1.2 var(--f-sans); letter-spacing: .06em; color: var(--y-btn);
}
.eb-bar { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--y); flex: none; box-shadow: 0 0 10px var(--y); }
.eb-bar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--y); opacity: 0; animation: ping 2.2s ease-out infinite; }
h1 { font: 900 var(--t-display-1)/1.1 var(--f-display); letter-spacing: .01em; color: var(--text); }
:root[data-lang="en"] h1 { font-weight: 800; font-stretch: 106%; letter-spacing: -.025em; line-height: 1.02; font-size: calc(var(--t-display-1) * .8); }
/* the headline: first line white, the rest brand yellow, a glint running through it */
.hero-copy h1 {
  color: var(--text);
  background-image:
    linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .95) 50%, transparent 58% 100%),
    linear-gradient(180deg, #FFFFFF 0%, #E6E9EE 48%, #FFF1B8 52%, #FCD535 70%, #F0B90B 86%, #D9A200 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 30px rgba(240, 185, 11, .18));
  animation: glint 7s ease-in-out 1.6s infinite;
}
@supports (width: 1lh) {
  .hero-copy h1 { background-image:
    linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .95) 50%, transparent 58% 100%),
    linear-gradient(180deg, #FFFFFF 0, #E6E9EE calc(1lh - 4px), #FFF1B8 1lh, #FCD535 calc(1lh + .3lh), #F0B90B calc(1lh + .7lh), #D9A200 100%); }
}
@keyframes glint { 0%, 62% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.tagline { margin-top: 14px; font: 700 19px/1.25 var(--f-display); font-stretch: 106%; color: var(--text-3); letter-spacing: .005em; }
.lede { margin-top: 22px; max-width: 560px; font-size: 15px; line-height: 1.8; color: var(--text-2); }
.hero-highlights {
  margin: 16px 0 0; padding: 0; max-width: 560px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.hero-highlights li {
  min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 10px;
  background: linear-gradient(120deg, rgba(240, 185, 11, .1), rgba(240, 185, 11, .025)); border: 1px solid rgba(240, 185, 11, .2);
}
.highlight-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(240, 185, 11, .12); color: var(--y); }
.highlight-icon svg { width: 20px; height: 20px; }
.hero-highlights li > div { min-width: 0; }
.hero-highlights strong { display: block; font-size: 15px; line-height: 1.35; font-weight: 800; color: var(--y-btn); }
.hero-highlights li > div > span { display: block; margin-top: 4px; font-size: var(--t-caption); line-height: 1.55; color: var(--text-2); }
.cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.cta-row .btn-lg { height: 52px; padding: 0 30px; font-size: 16px; }
.cta-row svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.cta-row .btn:hover svg { transform: translateX(3px); }

/* my vault (connected) */
.hero-me { max-width: 660px; }
.hero-me .eyebrow { margin-bottom: 14px; }
.hero-me .eyebrow .mono { color: var(--text); letter-spacing: .02em; text-transform: none; font-weight: 600; }
.me-h1 { font-size: var(--t-display-2) !important; line-height: 1.15 !important; }
.me-top {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 20px 24px;
  border-radius: var(--r-l); flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(240, 185, 11, .14), rgba(240, 185, 11, .03) 55%, rgba(24, 26, 32, .7)), rgba(24, 26, 32, .9);
  box-shadow: 0 0 0 1px rgba(240, 185, 11, .28) inset, 0 20px 50px -30px rgba(240, 185, 11, .5);
}
.me-top .btn { min-width: 160px; }
.me-claim .cl { display: block; font-size: var(--t-caption); color: var(--text-2); margin-bottom: 6px; }
.me-claim b {
  display: flex; align-items: baseline; gap: 8px; font: 800 44px/1.05 var(--f-display); font-stretch: 104%; font-variant-numeric: tabular-nums;
  color: var(--y-btn); letter-spacing: -.01em; text-shadow: var(--tglow);
}
.me-claim b small { font: 600 var(--t-data)/1 var(--f-sans); color: var(--text-3); text-shadow: none; }
.me-claim .sub { margin-top: 8px; font: 500 var(--t-caption)/1.4 var(--f-num); color: var(--text-3); }
.me-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.me-grid > div {
  padding: 14px 16px; min-width: 0; border-radius: var(--r-l); background: rgba(24, 26, 32, .9); box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: box-shadow .25s ease, transform .25s var(--ease);
}
.me-grid > div:hover { box-shadow: 0 0 0 1px var(--y-a40) inset, 0 10px 30px -18px rgba(240, 185, 11, .5); transform: translateY(-2px); }
.me-grid dt { font-size: var(--t-caption); color: var(--text-3); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.me-grid dd { margin-top: 6px; font: 600 var(--t-title)/1.3 var(--f-num); color: var(--text); font-variant-numeric: tabular-nums; }
.me-grid dd small { display: block; margin-top: 4px; font: 400 var(--t-caption)/1.4 var(--f-num); color: var(--text-3); }
.me-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ---------- FOMO board: glass card, rotating vault dial, glowing countdown ---------- */
.fomo {
  --fw: 64px; --fh: 88px; --fs: var(--t-flip);
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(42% 160px at 50% 0, rgba(240, 185, 11, .15), transparent), linear-gradient(180deg, rgba(30, 35, 41, .8), rgba(20, 22, 27, .88));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(240, 185, 11, .22); border-radius: var(--r-xl); padding: 24px 28px 22px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 80px -28px rgba(240, 185, 11, .35), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.fomo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(240, 185, 11, .5) 18%, var(--y-hi) 50%, rgba(240, 185, 11, .5) 82%, transparent);
  box-shadow: 0 0 18px rgba(240, 185, 11, .7);
}
.fomo::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(252, 213, 53, .65), inset 0 0 80px rgba(240, 185, 11, .3);
}
.guilloche {
  position: absolute; z-index: -1; width: 640px; height: 640px; left: 50%; top: 150px; margin: -320px 0 0 -320px;
  color: var(--y); opacity: .11; pointer-events: none; animation: dial 140s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .5) 42%, transparent 66%);
  mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .5) 42%, transparent 66%);
}
@keyframes dial { to { transform: rotate(360deg); } }
.fomo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kicker { font: 700 var(--t-overline)/1 var(--f-sans); letter-spacing: .14em; color: var(--y); text-transform: uppercase; }
.kicker .k-en { color: var(--text-3); }
.fomo-title { margin-top: 10px; font: 900 24px/1.2 var(--f-display); letter-spacing: .02em; color: var(--text); }
:root[data-lang="en"] .fomo-title { font-weight: 800; font-stretch: var(--wd); letter-spacing: -.01em; font-size: 24px; }
.live {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; flex: none;
  background: rgba(11, 14, 17, .5); border: 1px solid var(--line-2); border-radius: 14px; font-size: var(--t-caption); font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.fomo[data-state="running"] .live { color: var(--y-btn); border-color: var(--y-a40); background: var(--y-a06); }
.fomo[data-state="running"] .live i { background: var(--y); box-shadow: 0 0 8px var(--y); }
.fomo[data-state="running"] .live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--y); opacity: 0; animation: ping 2s ease-out infinite; }
.fomo[data-state="ended"] .live, .fomo[data-state="waiting"] .live, .fomo[data-state="held"] .live { color: var(--text); border-color: var(--y-a40); }
.fomo[data-state="ended"] .live i, .fomo[data-state="waiting"] .live i, .fomo[data-state="held"] .live i { background: var(--y); }
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

.clock { position: relative; display: flex; align-items: flex-start; justify-content: center; margin-top: 22px; }
.clock::before { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: -18px; height: calc(var(--fh) + 36px); background: radial-gradient(closest-side, rgba(255, 200, 40, .4), transparent); opacity: 0; pointer-events: none; }
.clock-unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flip-pair { display: flex; gap: 6px; }
.clock-label { font: 600 var(--t-overline)/1 var(--f-sans); letter-spacing: .12em; color: var(--text-3); white-space: nowrap; }
.clock-colon {
  width: 30px; height: var(--fh); display: flex; align-items: center; justify-content: center;
  font: 800 calc(var(--fs) * .7)/1 var(--f-display); color: var(--y); padding-bottom: calc(var(--fs) * .1);
  text-shadow: var(--tglow); animation: colon 1s ease-in-out infinite;
}
@keyframes colon { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.fomo[data-state="prelaunch"] .clock-colon, .fomo[data-state="idle"] .clock-colon, .fomo[data-state="held"] .clock-colon, .fomo[data-state="waiting"] .clock-colon { color: var(--text-4); text-shadow: none; animation: none; }
.flip {
  position: relative; width: var(--fw); height: var(--fh); perspective: 340px; border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(240, 185, 11, .18), 0 0 0 1px rgba(0, 0, 0, .6) inset, 0 16px 28px -14px rgba(0, 0, 0, .95), 0 0 26px -8px rgba(240, 185, 11, .32);
}
.flip .h, .flip .f { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.flip .t, .flip .ft { top: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #2A3038, #1F242B); }
.flip .b, .flip .fb { bottom: 0; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #181C22, #121519); }
.flip b {
  position: absolute; left: 0; right: 0; height: var(--fh); text-align: center;
  font: 800 var(--fs)/var(--fh) var(--f-display); font-stretch: 104%; color: var(--y-btn);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
  text-shadow: 0 0 16px rgba(240, 185, 11, .6), 0 0 2px rgba(255, 226, 122, .8);
}
.fomo[data-state="prelaunch"] .flip b, .fomo[data-state="idle"] .flip b, .fomo[data-state="held"] .flip b, .fomo[data-state="waiting"] .flip b { color: var(--text-4); text-shadow: none; }
.fomo[data-state="prelaunch"] .flip, .fomo[data-state="idle"] .flip, .fomo[data-state="held"] .flip, .fomo[data-state="waiting"] .flip { box-shadow: 0 0 0 1px var(--line-2), 0 16px 28px -14px rgba(0, 0, 0, .95); }
.flip .t b, .flip .ft b { top: 0; }
.flip .b b, .flip .fb b { bottom: 0; }
.flip .f { visibility: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 2; }
.flip .ft { transform-origin: 50% 100%; }
.flip .fb { transform-origin: 50% 0; transform: rotateX(90deg); }
.flip.is-flipping .f { visibility: visible; }
.flip.is-flipping .ft { animation: flapT .2s ease-in forwards; }
.flip.is-flipping .fb { animation: flapB .2s .2s ease-out forwards; }
@keyframes flapT { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flapB { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3; background: rgba(5, 6, 8, .95); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.flip::before { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 8px; margin-top: -4px; z-index: 4; background: linear-gradient(#3A414B, #2B3139) left / 4px 8px no-repeat, linear-gradient(#3A414B, #2B3139) right / 4px 8px no-repeat; border-radius: 2px; }
/* last hour: hotter digits, a breathing glow on the board; last minute: faster */
.fomo.is-urgent { border-color: rgba(252, 213, 53, .55); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 100px -20px rgba(252, 213, 53, .6), 0 1px 0 rgba(255, 255, 255, .06) inset; }
.fomo.is-urgent::after { animation: urgent 1.6s ease-in-out infinite; }
.fomo.is-urgent .clock::before { animation: urgent 1.6s ease-in-out infinite; }
.fomo.is-urgent .flip b { color: #FFE27A; text-shadow: 0 0 24px rgba(255, 200, 40, .95), 0 0 4px rgba(255, 240, 180, .95); }
.fomo.is-urgent .flip { box-shadow: 0 0 0 1px rgba(252, 213, 53, .45), 0 0 0 1px rgba(0, 0, 0, .6) inset, 0 16px 28px -14px rgba(0, 0, 0, .95), 0 0 34px -6px rgba(240, 185, 11, .6); }
.fomo.is-urgent .clock-colon { animation-duration: .5s; }
.fomo.is-final::after, .fomo.is-final .clock::before { animation-duration: .7s; }
@keyframes urgent { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.fuse { margin-top: 22px; }
.fuse-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--t-caption); color: var(--text-3); margin-bottom: 8px; }
.fuse-row b { color: var(--y-btn); font-weight: 700; }
.fomo:not([data-state="running"]):not([data-state="ended"]) .fuse-row b { color: var(--text-3); }
.fuse-row em { font-style: normal; color: var(--text-3); }
.fuse-bar { position: relative; height: 8px; background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset; }
.fuse-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; overflow: hidden;
  background: var(--y-grad-x); box-shadow: 0 0 14px rgba(240, 185, 11, .7); transition: width 1s linear;
}
.fuse-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); transform: translateX(-80px); animation: barRun 2.4s ease-in-out infinite; }
/* one tick per hour of a long window, per 10 minutes of a short one (--fuse-seg is set by js/ui/hero.js from the round length);
   the fallback is the 1-hour round of spec v1.4: six 10-minute segments */
.fuse-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--fuse-seg, 16.6667%) - 2px), rgba(14, 16, 20, .9) calc(var(--fuse-seg, 16.6667%) - 2px), rgba(14, 16, 20, .9) var(--fuse-seg, 16.6667%)); }
@keyframes barRun { 0% { transform: translateX(-80px); } 70%, 100% { transform: translateX(560px); } }

.kv { border-top: 1px solid rgba(43, 49, 57, .8); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(43, 49, 57, .8); }
.kv dt { font-size: var(--t-data); color: var(--text-3); white-space: nowrap; }
.kv dd { font: 500 var(--t-data)/1.4 var(--f-num); color: var(--text); text-align: right; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.kv dd small { font-size: var(--t-caption); color: var(--text-3); font-weight: 400; }
.kv dd .unit { font-size: var(--t-caption); color: var(--text-3); font-weight: 500; }
.fomo-kv { margin-top: 18px; }
.fomo-pool { font: 800 26px/1 var(--f-display); font-stretch: 104%; color: var(--y-btn); font-variant-numeric: tabular-nums; text-shadow: var(--tglow); }
.fomo-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--y-a24); background: var(--y-a06); border-radius: 10px; font-size: var(--t-caption); color: var(--text); }
.fomo-action p { line-height: 1.5; }
.fomo-rule { margin-top: 14px; font-size: var(--t-caption); line-height: 1.7; color: var(--text-3); }
.fomo-rule b { color: var(--text-2); font-weight: 500; }

/* ==========================================================================
   Stats strip · seven cards
   ========================================================================== */
.stats { position: relative; padding: 22px 0 6px; }
.stats-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(6, minmax(0, 1fr)); gap: 12px; }
.stat {
  position: relative; overflow: hidden; padding: 14px 16px 14px; min-width: 0; border-radius: var(--r-l);
  background: linear-gradient(180deg, #1C2026, var(--bg-1)); box-shadow: 0 0 0 1px var(--line-2) inset, var(--shadow-card);
  transition: background-color .6s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(240, 185, 11, .45) inset, 0 16px 34px -18px rgba(240, 185, 11, .45); }
.stat::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 185, 11, .45), transparent); opacity: 0; transition: opacity .25s ease; }
.stat:hover::before { opacity: 1; }
.stat-feature { background: radial-gradient(120% 90% at 100% 0%, rgba(240, 185, 11, .16), transparent 60%), linear-gradient(180deg, #1F232A, var(--bg-1)); box-shadow: 0 0 0 1px rgba(240, 185, 11, .32) inset, var(--shadow-card); }
.stat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stat-label { font-size: var(--t-caption); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-code { font: 500 10px/1 var(--f-code); letter-spacing: .08em; color: var(--text-4); white-space: nowrap; }
.stat-val { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; white-space: nowrap; min-height: 26px; }
.stat-val b { font: 700 21px/1.15 var(--f-display); font-stretch: 98%; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -.01em; transition: color .4s ease, text-shadow .4s ease; }
.stat-feature .stat-val b { color: var(--y-btn); text-shadow: var(--tglow); font-size: 24px; }
.stat-val small { font: 600 var(--t-overline)/1 var(--f-sans); color: var(--text-3); }
.stat-val .ph-text { font-size: var(--t-data); }
.stat-sub { display: flex; gap: 8px; margin-top: 6px; font: 500 var(--t-caption)/1.2 var(--f-num); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark { position: absolute; right: 14px; bottom: 14px; width: 64px; height: 22px; overflow: visible; filter: drop-shadow(0 0 6px rgba(240, 185, 11, .6)); }
.tint-up { background-color: var(--up-a12) !important; transition: none !important; }
.tint-down { background-color: var(--down-a12) !important; transition: none !important; }
.stat.tint-up { box-shadow: inset 0 0 0 999px var(--up-a12), inset 0 0 0 1px rgba(14, 203, 129, .55) !important; }
.stat.tint-down { box-shadow: inset 0 0 0 999px var(--down-a12), inset 0 0 0 1px rgba(246, 70, 93, .55) !important; }
/* a figure rolling to a new value */
.roll-up, .roll-down { animation: rollGlow .9s var(--ease-out); }
@keyframes rollGlow { 0% { color: var(--y-hi); text-shadow: 0 0 22px rgba(240, 185, 11, .85); } 100% { } }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec { padding-top: var(--sec-gap); }
#rules { padding-bottom: var(--sec-gap); }
.sec-head { margin-bottom: 28px; }
.sec-index { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sec-index .no {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px;
  font: 800 13px/1 var(--f-display); font-stretch: var(--wd); color: var(--y-ink); background: var(--y-grad); letter-spacing: .02em;
  box-shadow: 0 0 18px rgba(240, 185, 11, .35);
}
.sec-index .rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(240, 185, 11, .55), var(--line-2) 30%, var(--line) 100%); }
.sec-index .en { font: 500 var(--t-overline)/1 var(--f-code); letter-spacing: .18em; color: var(--text-4); }
.sec-title-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60ch); gap: 48px; align-items: end; }
.sec-title-row h2 { font: 900 var(--t-display-2)/1.15 var(--f-display); letter-spacing: .02em; color: var(--text); }
:root[data-lang="en"] .sec-title-row h2 { font-weight: 800; font-stretch: var(--wd); letter-spacing: -.02em; }
.sec-desc { font-size: var(--t-body); line-height: 1.75; color: var(--text-3); max-width: 60ch; }

/* split: data 8/12 + action rail 4/12 (G1), as two cards */
.split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.split > .ticket, .split > .rail { align-self: start; position: sticky; top: calc(var(--head-h) + 16px); }
.panel {
  position: relative; min-width: 0; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
.split > .panel:first-child { align-self: stretch; }
.rail { display: grid; gap: var(--gap); min-width: 0; }
.ticket { overflow: hidden; }
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--y) 30%, var(--y-hi) 50%, var(--y) 70%, transparent); opacity: .85; box-shadow: 0 0 14px rgba(240, 185, 11, .6); }
.ph { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); min-height: 56px; }
.ph h3 { display: flex; align-items: center; gap: 10px; font: 600 var(--t-title)/1.3 var(--f-sans); color: var(--text); }
.ph h3::before { content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--y-grad); box-shadow: 0 0 10px rgba(240, 185, 11, .55); }
.meta { font: 500 var(--t-overline)/1.4 var(--f-code); color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.meta b { color: var(--text-2); font-weight: 500; }
.meta .src { color: var(--text-2); }
.pbody { padding: 22px; }

/* fields */
.field + .field { margin-top: 20px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.field-top label { font-size: var(--t-data); color: var(--text-2); font-weight: 500; }
.field-top .muted { font-size: var(--t-caption); }
.bal-btn { border: 0; background: none; padding: 0; color: var(--text-3); font-size: var(--t-caption); cursor: pointer; white-space: nowrap; }
.bal-btn:not(:empty):hover { color: var(--y); }
.bal-btn[disabled] { cursor: default; }
.bal-btn[disabled]:hover { color: var(--text-3); }
.amount {
  display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px;
  background: var(--bg); border: 1px solid var(--line-3); border-radius: 10px; transition: border-color .15s ease, box-shadow .2s ease;
}
.amount:hover { border-color: #5E6673; }
.amount:focus-within { border-color: var(--y); box-shadow: 0 0 0 3px var(--y-a16), 0 0 26px -4px rgba(240, 185, 11, .35); }
.amount.is-bad { border-color: rgba(246, 70, 93, .7); }
.amount input {
  flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--text); padding: 0;
  font: 700 var(--t-figure-xl)/1 var(--f-display); font-stretch: 102%; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  caret-color: var(--y);
}
.amount input::placeholder { color: var(--text-4); }
.amount .unit { font: 700 var(--t-data)/1 var(--f-sans); color: var(--text-2); letter-spacing: .04em; padding: 6px 8px; border-radius: 6px; background: var(--bg-3); }
.amount-sm { height: 52px; }
.amount-sm input { font-size: var(--t-figure-l); }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.chip {
  height: 32px; border: 1px solid transparent; background: var(--bg-3); color: var(--text-2); border-radius: 6px;
  font: 600 var(--t-caption)/1 var(--f-num); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s, box-shadow .2s;
}
.chip:hover { color: var(--text); background: var(--bg-4); }
.chip.on { color: var(--y-btn); border-color: var(--y-a40); background: var(--y-a10); box-shadow: 0 0 14px -4px rgba(240, 185, 11, .5); }
.chip[disabled] { color: var(--text-4); cursor: not-allowed; }
.hint { margin-top: 8px; font-size: var(--t-caption); line-height: 1.55; color: var(--text-3); }
.hint.warn { color: var(--warn); }
.hint.ok { color: var(--text-2); }
.hint .mono { color: inherit; }
.text-input {
  width: 100%; height: 44px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line-3); border-radius: 10px;
  color: var(--text); font-size: var(--t-data); outline: none; transition: border-color .15s ease, box-shadow .2s ease; caret-color: var(--y);
}
.text-input.mono { font-family: var(--f-code); }
.text-input:hover { border-color: #5E6673; }
.text-input::placeholder { color: var(--text-4); }
.text-input:focus { border-color: var(--y); box-shadow: 0 0 0 3px var(--y-a16), 0 0 26px -4px rgba(240, 185, 11, .35); }
.ref-bound { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 14px; border: 1px dashed var(--line-3); border-radius: 10px; font: 500 var(--t-data)/1 var(--f-code); color: var(--text); background: var(--bg); }
.ref-bound svg { color: var(--y); flex: none; }

.summary { margin-top: 20px; border-top: 1px solid var(--line); }
.summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary dt { font-size: var(--t-data); color: var(--text-3); white-space: nowrap; }
.summary dd { font-size: var(--t-data); color: var(--text); text-align: right; min-width: 0; font-weight: 500; }
.summary dd small { display: block; font: 400 var(--t-caption)/1.4 var(--f-num); color: var(--text-3); }
.summary.tight { margin-top: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 16px; font-size: var(--t-caption); line-height: 1.6; color: var(--text-2); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { flex: none; width: 18px; height: 18px; margin-top: 0; border: 1.5px solid var(--line-3); border-radius: 5px; position: relative; transition: border-color .15s, background-color .15s, box-shadow .2s; }
.check:hover .box { border-color: var(--y); }
.check input:checked + .box { background: var(--y); border-color: var(--y); box-shadow: 0 0 14px rgba(240, 185, 11, .55); }
.check input:checked + .box::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid var(--y-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible + .box { outline: 2px solid var(--y); outline-offset: 2px; }
.check.need .box { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(246, 70, 93, .15); }
.check.need { color: var(--text); }
.fine { margin-top: 12px; font-size: var(--t-caption); line-height: 1.5; color: var(--text-3); text-align: center; }
.fine.left { text-align: left; }
.fine a { color: var(--text-2); text-decoration: none; }
.fine a:hover { color: var(--y); }

/* ---------- Nº 01 deposit: split visual ---------- */
.flow { display: flex; flex-direction: column; overflow: hidden; }
.flow-body { flex: 1; display: grid; grid-template-columns: minmax(80px, 1fr) minmax(0, 460px); padding: 24px 24px 8px 28px; }
.flow-viz { position: relative; min-height: 120px; }
.flow-viz::before { content: ""; position: absolute; left: -20px; top: 50%; width: 220px; height: 220px; margin-top: -110px; background: radial-gradient(closest-side, rgba(240, 185, 11, .16), transparent); pointer-events: none; }
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(240, 185, 11, .18)); }
.flow-svg .flow-t { font: 600 var(--t-overline) var(--f-sans); fill: var(--text-3); letter-spacing: .1em; }
.flow-legend { list-style: none; padding: 0; display: grid; align-content: center; }
.flow-legend li {
  display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 0 14px 18px; border-bottom: 1px solid var(--line); position: relative; min-height: 76px; transition: background-color .2s ease;
}
.flow-legend li:hover { background: linear-gradient(90deg, rgba(240, 185, 11, .06), transparent 70%); }
.flow-legend li:last-child { border-bottom: 0; }
.flow-legend li::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 24px; margin-top: -12px; border-radius: 2px; background: var(--y); opacity: var(--a, .9); box-shadow: 0 0 10px rgba(240, 185, 11, .5); }
.flow-legend .pct {
  font: 800 var(--t-editorial)/1 var(--f-display); font-stretch: 104%; color: var(--y-btn); font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 0 18px rgba(240, 185, 11, .35);
}
.flow-legend .pct small { font-size: 18px; margin-right: 1px; color: var(--y-lo); text-shadow: none; }
.fl-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-txt b { font-weight: 600; font-size: var(--t-body); color: var(--text); }
.fl-txt small { font-size: var(--t-caption); color: var(--text-3); line-height: 1.45; }
.fl-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.fl-amt b { font: 600 15px/1.2 var(--f-num); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.fl-amt small { font: 500 var(--t-overline)/1.2 var(--f-sans); color: var(--text-3); letter-spacing: .04em; white-space: nowrap; }
.flow-note { padding: 0 24px 12px 28px; font-size: var(--t-caption); color: var(--text-3); }
.flow-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); background: rgba(11, 14, 17, .35); }
.flow-totals > div { padding: 14px 20px 16px; border-left: 1px solid var(--line); min-width: 0; }
.flow-totals > div:first-child { border-left: 0; padding-left: 24px; }
.flow-totals dt { font-size: var(--t-caption); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-totals dd { margin-top: 6px; font: 700 16px/1.2 var(--f-display); font-stretch: 102%; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-totals dd small { font: 600 var(--t-overline)/1 var(--f-sans); color: var(--text-3); margin-left: 4px; }
.flow-totals .sell-link { margin-top: 6px; font-size: var(--t-caption); color: var(--y); }
.flow-totals .sell-link:hover { color: var(--y-hi); }
.flow-foot { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); font: 500 var(--t-caption)/1.3 var(--f-sans); color: var(--text-3); }
.flow-foot i { flex: 1; min-width: 12px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--line-2), rgba(240, 185, 11, .45)); position: relative; }
.flow-foot i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 2px solid var(--y); border-right: 2px solid var(--y); transform: rotate(45deg); }
.flow-foot span { white-space: nowrap; }
.flow-foot span:last-child { color: var(--y); font-weight: 600; }

/* mobile receipt list (B graft) */
.receipt-list { display: none; padding: 16px; }
.rl-bar { display: flex; height: 10px; gap: 2px; margin-bottom: 14px; border-radius: 5px; overflow: hidden; }
.rl-bar i { display: block; height: 100%; background: var(--y-grad-x); }
.rl-bar i.h { background: repeating-linear-gradient(135deg, var(--y) 0 2px, rgba(240, 185, 11, .25) 2px 5px); }
.rl-lines { list-style: none; padding: 0; }
.rl-lines li { display: grid; grid-template-columns: 46px auto minmax(12px, 1fr) auto; align-items: baseline; gap: 8px; padding: 7px 0; font-size: var(--t-data); }
.rl-lines .p { font: 800 18px/1 var(--f-display); color: var(--y-btn); }
.rl-lines .d { color: var(--text); white-space: nowrap; }
.rl-lines .lead { border-bottom: 1px dotted var(--line-3); transform: translateY(-4px); }
.rl-lines .v { font: 600 var(--t-data)/1 var(--f-num); color: var(--text); white-space: nowrap; }
.rl-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 10px 0 2px; border-top: 1px solid var(--y-a40); font-size: var(--t-data); color: var(--text-2); }
.rl-total b { font: 700 var(--t-data)/1 var(--f-num); color: var(--y-btn); }

/* ---------- Nº 02 queue ---------- */
.q-main { display: flex; flex-direction: column; overflow: hidden; }
.q-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.q-summary .cell { padding: 18px 22px 18px; min-width: 0; border-left: 1px solid var(--line); }
.q-summary .cell:first-child { border-left: 0; background: radial-gradient(100% 120% at 0% 0%, rgba(240, 185, 11, .1), transparent 70%); }
.cl { display: block; font-size: var(--t-caption); color: var(--text-3); }
.q-summary b { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font: 700 var(--t-figure-l)/1.15 var(--f-display); font-stretch: 102%; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-summary b.gold { color: var(--y-btn); text-shadow: var(--tglow); }
.q-summary b em { font: 600 var(--t-overline)/1 var(--f-sans); color: var(--text-3); font-style: normal; }
/* sub-lines wrap instead of ending in "…" (the gap to the cap and the dividend source are figures, not decoration) */
.q-summary small { display: block; margin-top: 6px; font-size: var(--t-caption); line-height: 1.45; color: var(--text-3); }

.qstrip { padding: 20px 22px 18px; border-bottom: 1px solid var(--line); }
.qstrip-labels { display: flex; justify-content: space-between; font: 500 var(--t-overline)/1 var(--f-sans); letter-spacing: .06em; color: var(--text-3); margin-bottom: 10px; }
.qstrip-bar { display: flex; gap: 4px; height: 40px; }
.qseg { position: relative; flex: 1 1 0; min-width: 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.qseg:hover { border-color: var(--y-a40); transform: translateY(-1px); }
.qseg-fill {
  position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; background: rgba(240, 185, 11, .2);
  border-right: 2px solid var(--y); box-shadow: 4px 0 14px -4px rgba(240, 185, 11, .6);
}
.qseg-fill::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -34px; right: 0;
  background: repeating-linear-gradient(90deg, rgba(240, 185, 11, .42) 0 8.5px, rgba(240, 185, 11, .08) 8.5px 17px);
  transform: skewX(-35deg); animation: stripes 1.4s linear infinite;
}
@keyframes stripes { from { transform: skewX(-35deg) translateX(0); } to { transform: skewX(-35deg) translateX(34px); } }
.qseg.is-head { border-color: rgba(240, 185, 11, .6); box-shadow: 0 0 18px -6px rgba(240, 185, 11, .7); }
.qseg.is-mine { border-color: var(--y-btn); box-shadow: 0 0 0 1px var(--y-a40) inset, 0 0 20px -4px rgba(240, 185, 11, .6); }
.qseg-lb { position: absolute; left: 6px; bottom: 6px; font: 600 var(--t-overline)/1 var(--f-num); color: var(--text-2); white-space: nowrap; }
.qseg.is-head .qseg-lb { color: var(--y-ink); background: var(--y-btn); padding: 2px 5px; border-radius: 3px; left: 5px; bottom: 5px; font-weight: 700; }
.qseg.is-mine .qseg-lb { color: var(--y-btn); }
.qseg.is-rest { border-style: dashed; background: none; display: grid; place-items: center; }
.qseg.is-rest span { font: 500 var(--t-overline)/1 var(--f-sans); color: var(--text-3); white-space: nowrap; }
.qstrip-legend { display: flex; gap: 20px; margin-top: 12px; font-size: var(--t-caption); color: var(--text-3); flex-wrap: wrap; }
.qstrip-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.qstrip-legend i { width: 16px; height: 10px; border: 1px solid var(--line-2); border-radius: 3px; display: inline-block; }
.qstrip-legend .lg-fill { background: repeating-linear-gradient(135deg, rgba(240, 185, 11, .6) 0 3px, rgba(240, 185, 11, .25) 3px 6px); border-color: var(--y-a40); }
.qstrip-legend .lg-mine { border-color: var(--y-btn); box-shadow: 0 0 8px rgba(240, 185, 11, .5); }
.qstrip-m { display: none; }
.qstrip-empty { flex: 1; height: 40px; display: grid; place-items: center; border: 1px dashed var(--line-2); border-radius: 6px; font-size: var(--t-caption); color: var(--text-3); }

/* tables */
.tbl-wrap { min-width: 0; }
.tbl { width: 100%; table-layout: auto; }
.tbl thead th {
  height: 40px; padding: 0 12px; background: transparent; border-bottom: 1px solid var(--line);
  font: 500 var(--t-overline)/1.2 var(--f-sans); letter-spacing: .06em; color: var(--text-3); white-space: nowrap; text-transform: uppercase;
}
:root[data-lang="zh"] .tbl thead th { letter-spacing: .02em; text-transform: none; font-size: var(--t-caption); }
.tbl thead th:first-child { padding-left: 22px; }
.tbl thead th:last-child { padding-right: 22px; }
.tbl td { height: 54px; padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; font-size: var(--t-data); transition: background-color .15s ease; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl td:first-child { padding-left: 22px; }
.tbl td:last-child { padding-right: 22px; }
.tbl tbody tr:hover td { background: rgba(43, 49, 57, .45); }
.tbl tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--y-a40); }
.tbl .num { font: 500 var(--t-data)/1.3 var(--f-num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--text); }
.tbl .num .dim, .tbl .num small { color: var(--text-3); }
.tbl .id { font: 700 var(--t-data)/1 var(--f-num); color: var(--text); white-space: nowrap; }
.tbl .addr { font: 400 var(--t-caption)/1 var(--f-code); color: var(--text-3); white-space: nowrap; }
.tbl td[data-l]::before { display: none; }
.tbl tr.is-mine td { background: rgba(240, 185, 11, .07); }
.tbl tr.is-mine td:first-child { box-shadow: inset 3px 0 0 var(--y); }
.tbl tr.is-head .id, .tbl tr.is-head .c-rank { color: var(--y-btn); }
.tbl tr.is-gap td { height: 32px; padding-top: 0; padding-bottom: 0; text-align: center; font: 500 var(--t-caption)/1 var(--f-sans); color: var(--text-3); letter-spacing: .1em; }
.tbl tr.is-sel td { background: rgba(240, 185, 11, .07); }
.tbl tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--y); }
.tbl .c-rank { width: 56px; font: 700 var(--t-data)/1 var(--f-num); color: var(--text-3); }
.tbl-empty td { height: auto !important; padding: 40px 24px !important; text-align: center; }
.empty { display: grid; justify-items: center; gap: 14px; color: var(--text-2); font-size: var(--t-body); text-align: center; }
.empty p { max-width: 46ch; line-height: 1.6; }
.tbl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); font-size: var(--t-caption); color: var(--text-3); min-height: 44px; }
.tbl-foot .mono { font-size: var(--t-caption); }

/* progress bars (2× cap); yellow ones carry a running highlight */
.bar { position: relative; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: visible; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text-3); border-radius: 3px; overflow: hidden; }
.bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-3); }
.bar.gold i, .is-head .bar i, .is-mine .bar i { background: var(--y-grad-x); box-shadow: 0 0 10px rgba(240, 185, 11, .55); }
.bar.gold i::after, .is-head .bar i::after, .is-mine .bar i::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-50px); animation: barRunS 2.6s ease-in-out infinite;
}
@keyframes barRunS { 0% { transform: translateX(-50px); } 70%, 100% { transform: translateX(260px); } }
.q-prog { display: grid; grid-template-columns: minmax(52px, 1fr) 44px; align-items: center; gap: 8px; min-width: 100px; }
.q-tbl th, .q-tbl td { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1280px) { .p-tbl .c-fee { display: none; } }
@media (max-width: 1320px) { .q-tbl .c-rank { display: none; } }
@media (max-width: 1240px) {
  .q-tbl .c-mult, .o-tbl .c-age, .p-tbl .c-px { display: none; }
}
.q-prog .num { font-size: var(--t-caption); }

/* my dividends rail */
.my-div .fig { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font: 800 var(--t-figure-xl)/1.1 var(--f-display); font-stretch: 104%; color: var(--y-btn); font-variant-numeric: tabular-nums; text-shadow: var(--tglow); }
.my-div .fig small { font: 600 var(--t-caption)/1 var(--f-sans); color: var(--text-3); text-shadow: none; }
.capbar { margin-top: 16px; }
.capbar .bar { height: 8px; border-radius: 4px; }
.capbar .bar i { background: var(--y-grad-x); box-shadow: 0 0 12px rgba(240, 185, 11, .6); border-radius: 4px; }
.capbar .bar i::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-60px); animation: barRun 2.8s ease-in-out infinite;
}
.capbar-l { display: flex; justify-content: space-between; margin-top: 8px; font: 500 var(--t-overline)/1 var(--f-num); color: var(--text-3); }
.my-div .summary { margin-top: 16px; }
.my-div .btn { margin-top: 20px; }
.rail-empty { display: grid; gap: 14px; justify-items: start; color: var(--text-2); font-size: var(--t-data); line-height: 1.6; }
.invite { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.invite-row { display: flex; align-items: center; gap: 8px; }
.invite-row .cl { flex: none; }
.invite-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-caption)/32px var(--f-code); color: var(--text-2); background: var(--bg); border: 1px solid var(--line-2); padding: 0 10px; border-radius: 6px; }
.mini-rules { list-style: none; padding: 16px 22px 22px; margin: 0; display: grid; gap: 10px; }
.mini-rules li { display: grid; grid-template-columns: 30px minmax(0, 1fr); font-size: var(--t-caption); line-height: 1.65; color: var(--text-2); }
.mini-rules i { font: 800 12px/1.6 var(--f-display); font-style: normal; color: var(--y); font-stretch: var(--wd); }

/* ---------- Nº 03 order book ---------- */
.book { display: flex; flex-direction: column; overflow: hidden; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px 0 10px; min-height: 56px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .meta { text-transform: none; letter-spacing: .02em; font-family: var(--f-num); }
.tabs { display: flex; gap: 4px; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 56px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text-3); transition: color .15s ease; white-space: nowrap;
}
.tab .cnt { font-size: var(--t-overline); color: var(--text-3); background: var(--bg-3); padding: 2px 6px; border-radius: 10px; line-height: 1.3; font-weight: 600; }
.tab .cnt:empty { display: none; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"] .cnt { color: var(--y-ink); background: var(--y); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 20px; height: 3px; margin-left: -10px; border-radius: 3px;
  background: var(--y); box-shadow: 0 0 12px var(--y);
}
.o-tbl .o-amt { position: relative; width: 168px; }
.o-tbl .o-amt .depth { position: absolute; right: 0; top: 50%; height: 26px; margin-top: -13px; max-width: 40%; background: linear-gradient(270deg, rgba(240, 185, 11, .26), rgba(240, 185, 11, .04)); border-radius: 4px; border-right: 2px solid rgba(240, 185, 11, .7); }
.o-tbl .o-amt span { position: relative; font-weight: 600; }
.o-tbl .lp-need small { display: block; margin-top: 3px; font-size: var(--t-overline); color: var(--text-3); }
.book-recent { border-top: 1px solid var(--line); }
.br-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 22px 6px; font-size: var(--t-caption); color: var(--text-2); font-weight: 600; }
.br-tbl td { height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: var(--t-caption); border-top: 0; color: var(--text-2); }
.br-tbl .num { font-size: var(--t-caption); }
.br-tbl td:nth-child(1) { width: 104px; text-align: left; }
.br-tbl td:nth-child(2) { width: 72px; color: var(--text); }
.br-tbl td:nth-child(3) { width: 72px; }
.br-tbl .id { font-size: var(--t-caption); }
.br-tbl tbody tr:hover td { background: none; box-shadow: none !important; }
.close-pv .pbody > .summary:first-child { margin-top: 0; }
.lockt { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-caption)/1 var(--f-num); color: var(--text-2); white-space: nowrap; }
.lockt svg { width: 11px; height: 11px; color: var(--y); }

.create .examples { margin-top: 16px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.ex-head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-caption); color: var(--text-3); background: var(--bg-2); }
.ex-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ex-grid > div { padding: 12px 14px; min-width: 0; }
.ex-grid > div + div { border-left: 1px solid var(--line); }
.ex-grid .ex-k { font-size: var(--t-caption); font-weight: 600; }
.ex-grid .ex-k.up::before { content: "↑ "; }
.ex-grid .ex-k.down::before { content: "↓ "; }
.ex-grid dl { margin-top: 8px; display: grid; gap: 4px; }
.ex-grid dl div { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-caption); color: var(--text-3); }
.ex-grid dd { font-family: var(--f-num); color: var(--text); white-space: nowrap; font-weight: 500; }
.create .btn-block { margin-top: 20px; }
.payoff { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.payoff-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-caption); color: var(--text-2); margin-bottom: 10px; font-weight: 600; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--text-3); font-weight: 400; }
.legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--y); margin-left: 8px; box-shadow: 0 0 6px var(--y); }
.legend .lg-b { border-top: 2px dashed var(--text); box-shadow: none; }
.payoff-svg { width: 100%; height: auto; overflow: visible; }
.payoff-svg polyline[stroke="var(--gold)"] { filter: drop-shadow(0 0 4px rgba(240, 185, 11, .7)); }
/* --pf is set by book.js from the rendered width, so the labels never draw under 11 px */
.payoff-svg text { font: 500 var(--pf, 11px) var(--f-num); fill: var(--text-3); }
:root[data-lang="zh"] .payoff-svg text.cjk { font-family: var(--f-sans); }

/* ---------- Nº 04 positions ---------- */
.pos { display: flex; flex-direction: column; overflow: hidden; }
.pos-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.pos-sum > div { padding: 16px 22px; min-width: 0; border-left: 1px solid var(--line); }
.pos-sum > div:first-child { border-left: 0; }
.pos-sum .cl { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pos-sum b { display: block; margin-top: 8px; font: 700 18px/1.2 var(--f-display); font-stretch: 102%; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pos-sum small { display: block; margin-top: 4px; font: 400 var(--t-caption)/1.4 var(--f-num); color: var(--text-3); }
.p-tbl .role { font-size: var(--t-caption); color: var(--text-2); white-space: nowrap; }
.p-tbl .pnl { font: 700 var(--t-body)/1.2 var(--f-num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.p-tbl td.act { text-align: right; white-space: nowrap; }
.p-tbl .when { display: block; font: 400 var(--t-overline)/1.2 var(--f-num); color: var(--text-3); margin-top: 4px; text-align: right; }
.fee-meter { display: grid; grid-template-columns: auto 44px; align-items: center; gap: 8px; justify-content: end; }
.fee-meter .num { font-size: var(--t-caption); }
.scale { position: relative; height: 4px; background: linear-gradient(90deg, rgba(14, 203, 129, .35), rgba(240, 185, 11, .45), rgba(246, 70, 93, .45)); border-radius: 2px; }
.scale i { position: absolute; top: -4px; width: 3px; height: 12px; background: var(--y-btn); margin-left: -1.5px; border-radius: 2px; box-shadow: 0 0 8px var(--y); }
.fee-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 500 var(--t-overline)/1 var(--f-num); color: var(--text-3); }
.pos-empty { padding: 48px 24px; }
.tbl-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
.p-tbl .px2 small { display: block; margin-top: 3px; font-size: var(--t-caption); color: var(--text); }
.notes3 { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: rgba(11, 14, 17, .45); }
.notes3 > div { padding: 16px 22px 18px; min-width: 0; }
.notes3 > div + div { border-left: 1px solid var(--line); }
.notes3 b { display: block; font-size: var(--t-caption); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.notes3 b.up { color: var(--up); }
.notes3 b.down { color: var(--down); }
.notes3 p { font-size: var(--t-caption); line-height: 1.65; color: var(--text-3); }
.inline-pv { display: none; }

/* close preview: the rail on desktop and the inline row on phones (#posBody .inline-pv) share these */
.cp-net {
  position: relative; overflow: hidden; margin-top: 18px; padding: 16px; border-radius: 10px;
  background: linear-gradient(120deg, rgba(240, 185, 11, .12), rgba(240, 185, 11, .02) 60%), var(--bg-2); box-shadow: 0 0 0 1px rgba(240, 185, 11, .28) inset;
}
.cp-net .cl { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--t-caption); color: var(--text-2); }
.cp-net b { display: block; margin-top: 8px; font: 800 var(--t-figure-xl)/1.1 var(--f-display); font-stretch: 104%; color: var(--y-btn); font-variant-numeric: tabular-nums; text-shadow: var(--tglow); }
.cp-net b small { font: 600 var(--t-caption)/1 var(--f-sans); color: var(--text-3); margin-left: 6px; text-shadow: none; }
.cp-net p { margin-top: 6px; font: 400 var(--t-caption)/1.4 var(--f-num); color: var(--text-3); }
.close-pv .fee-scale, .inline-pv .fee-scale { margin-top: 14px; }
.inline-pv .summary { margin-top: 0; }
.cp-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 20px; }
.cp-actions .btn { height: 44px; }
.cp-note { margin-top: 14px; font-size: var(--t-caption); line-height: 1.6; color: var(--text-3); }

/* ---------- Nº 05 rules ---------- */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.rule-col {
  position: relative; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 22px 22px 26px; min-width: 0;
  box-shadow: var(--shadow-card); transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.rule-col:hover { border-color: var(--y-a40); box-shadow: 0 18px 40px -26px rgba(240, 185, 11, .55), var(--shadow-card); transform: translateY(-2px); }
.rule-col summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding-bottom: 16px; border-bottom: 1px solid var(--line); cursor: default; }
.rule-col summary::-webkit-details-marker { display: none; }
.rule-col h3 { display: flex; align-items: center; gap: 12px; font: 900 19px/1.3 var(--f-display); letter-spacing: .02em; }
:root[data-lang="en"] .rule-col h3 { font-weight: 800; font-stretch: var(--wd); letter-spacing: -.01em; font-size: 19px; }
.rule-col h3 b { font-weight: inherit; }
.rule-col h3 span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px;
  font: 800 12px/1 var(--f-display); font-stretch: var(--wd); color: var(--y-ink); background: var(--y-grad); box-shadow: 0 0 14px rgba(240, 185, 11, .35);
}
.chev { display: none; }
.rule-col ol { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 12px; }
.rule-col li { display: grid; grid-template-columns: 32px minmax(0, 1fr); font-size: var(--t-data); line-height: 1.75; color: var(--text-2); }
.rule-col li i { font: 600 var(--t-overline)/2.2 var(--f-num); font-style: normal; color: var(--y); opacity: .85; }
/* a worked example under the rules (the same numbers as the explainer, the posters and the messages) */
.rule-col li.rule-ex { margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--line-2); color: var(--text-3); font-size: var(--t-caption); }
.rule-col li.rule-ex i { font-family: var(--f-sans); font-weight: 700; line-height: 2; white-space: nowrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-0) 60%); border-top: 1px solid var(--line); padding: 0 0 28px; }
.double-rule { height: 2px; margin: -1px 0 0; background: linear-gradient(90deg, transparent, rgba(240, 185, 11, .6) 20%, var(--y-hi) 50%, rgba(240, 185, 11, .6) 80%, transparent); box-shadow: 0 0 18px rgba(240, 185, 11, .5); opacity: .8; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; padding: 44px 0 40px; }
.foot-brand { display: flex; gap: 24px; align-items: flex-start; }
.seal-lg { width: 104px; height: 104px; color: var(--y); flex: none; filter: drop-shadow(0 0 22px rgba(240, 185, 11, .35)); }
.seal-lg .ring { animation: dial 60s linear infinite; transform-origin: 60px 60px; }
.ring-text { font: 600 7.2px var(--f-code); fill: var(--y); letter-spacing: .12em; }
.seal-b-lg { font: 800 40px var(--f-display); fill: var(--y); }
.fb-name { font: 800 24px/1.2 var(--f-display); font-stretch: var(--wd); color: var(--text); letter-spacing: -.01em; }
.fb-name span { font: 900 13px/1 var(--f-display); color: var(--y); letter-spacing: .08em; margin-left: 10px; padding: 4px 7px; border-radius: 4px; background: var(--y-a10); vertical-align: 3px; }
.fb-desc { margin-top: 10px; font-size: var(--t-data); line-height: 1.75; color: var(--text-3); max-width: 400px; }
.foot-col h3 { font: 600 var(--t-overline)/1 var(--f-sans); letter-spacing: .14em; color: var(--text-3); margin-bottom: 16px; text-transform: uppercase; }
.addr > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-data); }
.addr > div:first-child { border-top: 1px solid var(--line); }
.addr dt { color: var(--text-2); white-space: nowrap; }
.addr dd { font-family: var(--f-code); font-size: var(--t-caption); color: var(--text-3); text-align: right; min-width: 0; }
.addr dd a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.addr dd a:hover { color: var(--y); }
.addr dd svg { width: 11px; height: 11px; }
.addr .copy { border: 0; background: none; padding: 0 0 0 6px; color: var(--text-3); cursor: pointer; vertical-align: -1px; }
.addr .copy:hover { color: var(--y); }
.addr .copy svg { width: 12px; height: 12px; display: inline-block; }
.foot-links { display: grid; gap: 0; }
.foot-links a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: var(--t-data); transition: color .15s, padding-left .2s var(--ease); }
.foot-links a:first-child { border-top: 1px solid var(--line); }
.foot-links a:hover { color: var(--y); padding-left: 4px; }
.foot-links a svg { width: 11px; height: 11px; color: var(--text-3); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-caption); color: var(--text-3); }
.foot-bottom .mono { font-size: var(--t-overline); letter-spacing: .06em; }

/* mobile tab bar (G6) */
.tabbar { display: none; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--tabbar-h)); z-index: 200; transform: translate(-50%, 6px) scale(.98); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); font-weight: 500;
  padding: 12px 16px 12px 14px; font-size: var(--t-data); border-radius: 10px; box-shadow: var(--shadow-pop), 0 0 30px -10px rgba(240, 185, 11, .35);
  transition: opacity .2s ease, transform .25s var(--ease-out); max-width: calc(100vw - 32px);
}
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--y); box-shadow: 0 0 10px var(--y); }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.err::before { background: var(--down); box-shadow: 0 0 10px var(--down); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1320px) {
  .brand-cn { display: none; }
  .header-inner { gap: 20px; }
  .nav a { padding: 0 10px; }
  .hero { --board-w: 520px; --hero-gap: 48px; }
  .stat-code { display: none; }
  .flow-totals > div { padding-left: 16px; padding-right: 12px; }
}

@media (max-width: 1180px) {
  .hero { --board-w: 480px; --hero-gap: 40px; }
  .fomo { --fw: 54px; --fh: 76px; --fs: 54px; padding: 20px 22px; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-feature { grid-column: span 2; }
  .split { grid-template-columns: minmax(0, 1fr) 340px; }
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-tbl .c-now, .p-tbl .c-px, .p-tbl .c-fee { display: none; }
  .q-tbl .c-mult, .q-tbl .c-addr, .q-tbl .c-rank { display: none; }
  .o-tbl .c-age { display: none; }
  .o-tbl .o-amt { width: 110px; }
  .pos-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-sum > div:nth-child(3) { border-left: 0; }
  .pos-sum > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fee-meter .scale { display: none; }
  .fee-meter { grid-template-columns: auto; }
  .flow-body { grid-template-columns: minmax(60px, 1fr) minmax(0, 420px); padding-left: 20px; padding-right: 20px; }
  .flow-legend li { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; padding-left: 14px; }
  .flow-legend .pct { font-size: 26px; }
  .flow-legend .pct small { font-size: 16px; }
  .flow-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-totals > div:nth-child(4) { border-left: 0; padding-left: 24px; }
  .flow-totals > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .notes3 > div { padding: 14px 16px 16px; }
}
@media (max-width: 1100px) {
  #queue .split, #book .split, #positions .split { grid-template-columns: minmax(0, 1fr); }
  #queue .split > .rail, #book .split > .ticket, #positions .split > .ticket { position: static; }
  #queue .split > .rail { order: -1; }
  #queue .rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #queue   .split > .ticket .pbody { max-width: 640px; }
}
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fomo { --fw: 64px; --fh: 88px; --fs: var(--t-flip); padding: 22px 28px; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .ticket, .split > .rail { position: static; }
  .split > .ticket .pbody, .split > .rail .pbody { max-width: 640px; }
}

@media (max-width: 1100px) {
  :root { --tabbar-h: 60px; }
  .nav { display: none; }
  .header-actions { margin-left: auto; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(14, 17, 21, .9); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .8);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--text-3); font-size: var(--t-overline); font-weight: 600; min-height: 44px; transition: color .15s; }
  /* the roman numeral stays in the DOM for assistive tech; an icon is drawn over it */
  .tabbar i { position: relative; width: 22px; height: 22px; font-size: 0; color: transparent; font-style: normal; }
  .tabbar i::before {
    content: ""; position: absolute; inset: 0; background: var(--text-3);
    -webkit-mask: var(--ic) center / 22px 22px no-repeat; mask: var(--ic) center / 22px 22px no-repeat; transition: background-color .15s, filter .2s;
  }
  .tabbar a[data-sec="fomo"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 2 4.6 13.4h6.2L9.8 22l8.6-11.6h-6.2Z' fill='%23000'/%3E%3C/svg%3E"); }
  .tabbar a[data-sec="deposit"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.6 3.2 5.8 6.1 5.8 11.4A5.8 5.8 0 0 1 6.2 14c0-2.6 1.3-4.4 2.6-5.6.2 1.9 1.1 3.1 2.3 3.6-.5-3.5.1-6.5.9-9.5Z' fill='%23000'/%3E%3C/svg%3E"); }
  .tabbar a[data-sec="queue"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='4' rx='1.6' fill='%23000'/%3E%3Crect x='3' y='10' width='13' height='4' rx='1.6' fill='%23000'/%3E%3Crect x='3' y='16' width='8' height='4' rx='1.6' fill='%23000'/%3E%3C/svg%3E"); }
  .tabbar a[data-sec="book"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h13M13 4l4 4-4 4M20 16H7M11 12l-4 4 4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .tabbar a[data-sec="positions"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='14' rx='3' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M3 10.5h18M15.5 15h2' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .tabbar a:hover { color: var(--text-2); }
  .tabbar a:hover i::before { background: var(--text-2); }
  .tabbar a.active { color: var(--y); }
  .tabbar a.active i::before { background: var(--y); filter: drop-shadow(0 0 6px rgba(240, 185, 11, .8)); }
  .tabbar a.active::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--y); box-shadow: 0 0 12px var(--y); }
}

@media (max-width: 980px) {
  :root { --gut: 24px; }
  .sec-title-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

/* ----- phones ----- */
@media (max-width: 760px) {
  body { font-size: var(--t-body); }
  .ticker-list li { padding: 0 16px; }
  .header-inner { gap: 10px; }
  .seal { width: 28px; height: 28px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 17px; font-stretch: 104%; }
  .header-actions { gap: 8px; }
  .lang-head { display: none; }
  .menu-lang { display: block; }
  .status-chip { height: 26px; padding: 0 8px; letter-spacing: .02em; gap: 6px; }
  .status-chip .s-long { display: none; }
  .status-chip .s-short { display: inline; }
  .wallet-btn { height: 34px; padding: 0 12px; }
  .wallet-btn .wb-long { display: none; }
  .wallet-btn .wb-short { display: inline; }
  .icon-btn { width: 34px; height: 34px; }
  .menu { position: fixed; left: 16px; right: 16px; top: calc(var(--head-h) + var(--ticker-h) + 4px); width: auto; }

  .hero-inner { padding-top: 28px; padding-bottom: 32px; gap: 28px; }
  .hero-grid-bg { height: 46%; }
  .hero-grid-bg::before { background-size: 48px 48px; }
  .eyebrow { letter-spacing: .03em; margin-bottom: 18px; gap: 8px; padding: 5px 12px 5px 9px; font-size: var(--t-overline); }
  .tagline { font-size: 16px; margin-top: 10px; }
  .lede { font-size: var(--t-body); margin-top: 16px; line-height: 1.75; }
  .hero-highlights { gap: 8px; }
  .hero-highlights li { gap: 8px; padding: 10px; }
  .highlight-icon { width: 26px; height: 26px; }
  .highlight-icon svg { width: 18px; height: 18px; }
  .hero-highlights strong { font-size: 14px; }
  .cta-row { margin-top: 22px; }
  .cta-row .btn { flex: 1; padding: 0 14px; }
  .cta-row .btn-lg { height: 50px; font-size: 15px; padding: 0 14px; }
  .me-top { flex-direction: column; align-items: stretch; gap: 16px; }
  .me-claim b { font-size: 34px; }
  .me-top .btn { width: 100%; }
  .me-grid { gap: 8px; }
  .me-grid > div { padding: 12px; }

  .fomo { --fw: 40px; --fh: 58px; padding: 18px 16px 18px; border-radius: 14px; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: radial-gradient(60% 140px at 50% 0, rgba(240, 185, 11, .15), transparent), linear-gradient(180deg, #1E2329, #15181D); }
  .guilloche { width: 460px; height: 460px; top: 120px; margin: -230px 0 0 -230px; }
  .fomo-title { font-size: 20px; margin-top: 8px; }
  .kicker .k-en { display: none; }
  .clock { margin-top: 18px; }
  .clock-colon { width: 16px; }
  .flip-pair { gap: 4px; }
  .flip { border-radius: 8px; }
  .flip .t, .flip .ft { border-radius: 8px 8px 0 0; }
  .flip .b, .flip .fb { border-radius: 0 0 8px 8px; }
  .clock-label { letter-spacing: .06em; }
  .fuse { margin-top: 18px; }
  .kv dd { flex-direction: column; align-items: flex-end; gap: 2px; }
  .fomo-pool { font-size: 22px; }
  .fomo-action { flex-direction: column; align-items: stretch; }

  .stats { padding-top: 18px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px 12px; }
  .stat:first-child { grid-column: 1 / -1; }
  .stat-val b { font-size: 18px; }
  .stat-feature .stat-val b { font-size: var(--t-figure-xl); }
  .stat-feature .stat-code { display: inline; }
  .spark { right: 12px; bottom: 16px; width: 104px; height: 28px; }

  .sec-head { margin-bottom: 20px; }
  .sec-index { margin-bottom: 12px; gap: 12px; }
  .sec-desc { font-size: var(--t-data); }
  .ph { padding: 14px 16px; min-height: 48px; }
  .pbody { padding: 18px 16px 20px; }
  .amount { height: 58px; padding: 0 14px; }
  .split { gap: 12px; }
  .rail { gap: 12px; }

  /* deposit: ticket first, receipt list instead of the sankey */
  #deposit .split > .ticket { order: -1; }
  .flow-body { display: none; }
  .receipt-list { display: block; }
  .flow-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-totals > div, .flow-totals > div:first-child, .flow-totals > div:nth-child(4) { padding: 12px 16px; border-left: 0; border-top: 1px solid var(--line); }
  .flow-totals > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .flow-totals > div:first-child { grid-column: 1 / -1; }
  .flow-totals > div:nth-child(2n) { border-left: 0; }
  .flow-totals > div:nth-child(2n+1):not(:first-child) { border-left: 1px solid var(--line); }
  .flow-foot { padding: 12px 16px; gap: 6px; font-size: var(--t-overline); }
  .flow-foot i { min-width: 6px; }

  /* queue */
  #queue .split > .rail { order: -1; }
  .q-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-summary .cell { padding: 14px 16px; }
  .q-summary .cell:nth-child(3) { border-left: 0; }
  .q-summary .cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .q-summary b { font-size: 18px; }
  .qstrip { display: none; }
  .qstrip-m { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--t-caption); color: var(--text-2); }
  .mini-rules { padding: 14px 16px 18px; }

  /* tables → cards */
  .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl thead { display: none; }
  .tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 12px 16px; border-top: 1px solid var(--line); }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl td { height: auto; padding: 0 !important; border: 0; text-align: left; min-width: 0; }
  .tbl td.num { text-align: left; }
  .tbl td[data-l]::before { display: inline; content: attr(data-l); font: 400 var(--t-caption)/1 var(--f-sans); color: var(--text-3); margin-right: 6px; }
  .tbl tr.is-mine, .tbl tr.is-sel { background: rgba(240, 185, 11, .07); box-shadow: inset 3px 0 0 var(--y); }
  .tbl tr.is-mine td, .tbl tr.is-sel td { background: none; box-shadow: none !important; }
  .tbl tr.is-gap { display: block; padding: 6px 16px; }
  .tbl tr.is-gap td { display: block; height: auto; }
  .tbl .c-rank, .tbl .m-hide { display: none; }
  .tbl .m-right { text-align: right; justify-self: end; }
  .tbl .m-full { grid-column: 1 / -1; }
  .tbl-empty td { padding: 32px 16px !important; }
  .tbl-foot { padding: 12px 16px; }
  .tbl tbody tr:hover td:first-child { box-shadow: none; }

  .q-tbl .c-mult, .q-tbl .c-addr { display: none; }

  .toolbar { padding: 0 6px; min-height: 48px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > .meta, .toolbar > .btn { display: none; }
  .tab { height: 48px; padding: 0 10px; font-size: var(--t-body); }

  .notes3 { grid-template-columns: minmax(0, 1fr); }
  .notes3 > div { padding: 12px 16px; }
  .notes3 > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .pos-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-sum > div { padding: 12px 16px; }
  .pos-sum > div:nth-child(3) { border-left: 0; }
  .pos-sum > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  #positions .split > .ticket { display: none; }
  .inline-pv { display: block; }
  .tbl tr.inline-pv { display: block; padding: 0; background: var(--bg-2); }
  .tbl tr.inline-pv td { display: block; padding: 16px !important; }

  .rules { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rule-col { padding: 0 16px; }
  .rule-col:hover { transform: none; }
  .rule-col summary { cursor: pointer; padding: 16px 0; border-bottom: 0; }
  .rule-col[open] summary { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .rule-col[open] { padding-bottom: 18px; border-color: var(--y-a24); }
  .rule-col h3 { font-size: 17px; }
  .chev { display: block; position: relative; width: 12px; height: 12px; flex: none; }
  .chev::before, .chev::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--y); }
  .chev::after { transform: rotate(90deg); transition: transform .2s ease; }
  .rule-col[open] .chev::after { transform: rotate(0deg); }

  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 0; }
  .foot-brand { gap: 16px; }
  .seal-lg { width: 76px; height: 76px; }
  .fb-name { font-size: 20px; }
  .foot-bottom { flex-direction: column; gap: 6px; }
}

/* narrow phones: the four 我的持仓 tabs fit without scrolling (14 px text and 48 px targets kept) */
@media (max-width: 400px) {
  .toolbar { padding: 0 2px; }
  .tab { padding: 0 6px; gap: 4px; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 16px; }
  .fomo { --fw: 36px; --fh: 54px; }
  .clock-colon { width: 12px; }
  .status-chip { display: none; }
  /* test chain: the TEST DATA label never leaves the header; it shrinks to "◆ 测试" / "◆ TEST" */
  .status-chip[data-dev] { display: inline-flex; padding: 0 6px; gap: 5px; }
  .status-chip[data-dev] .s-short { display: none; }
  .status-chip[data-dev] .s-tiny { display: inline; }
}
/* English phones up to 430 px: "PRE-LAUNCH" / "LIVE" did not fit beside the wallet button (10 px overflow at 390 px);
   the status leaves the header as it does below 380 px — the test-chain label stays (reskin-integrate) */
@media (min-width: 381px) and (max-width: 430px) {
  :root[data-lang="en"] .status-chip:not([data-dev]) { display: none; }
}

/* English: no duplicated overline, more room for the longer nav */
:root[data-lang="en"] .kicker .k-en { display: none; }
/* the header row never grows past --wrap, so a wide screen has no more room than 1440 px: the English nav keeps 10 px links
   and no 「BNC经典」 chip at every width (reskin-integrate: it ran 22 px into the status chip above 1520 px) */
:root[data-lang="en"] .brand-cn { display: none; }
:root[data-lang="en"] .nav a { padding: 0 10px; }
@media (max-width: 1360px) { :root[data-lang="en"] .nav a { padding: 0 8px; font-size: var(--t-data); } }
/* just above the tab-bar breakpoint the nav needs the room: short status chip, language moves into the settings menu */
@media (min-width: 1101px) and (max-width: 1240px) {
  .status-chip .s-long { display: none; }
  .status-chip .s-short { display: inline; }
  .lang-head { display: none; }
  .menu-lang { display: block; }
}
@media (max-width: 760px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 6px; }
}

/* Archivo figures: lining + tabular */
.sec-index .no, .rl-lines .p, .mini-rules i, .rule-col h3 span, .dlg-no, .rcpt-head .no, .tagline, .brand-name, .fb-name,
.flow-legend .pct, .clock-colon, :root[data-lang="en"] h1, :root[data-lang="en"] .sec-title-row h2, :root[data-lang="en"] .fomo-title {
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
.stat-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.is-ph > .unit, .stat.is-ph .stat-val small { display: none; }
.ticker.static .ticker-list[aria-hidden] { display: none; }
.ticker.static .ticker-track { padding-left: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gut) - 22px); }

/* ----- phones: table rows as cards with explicit areas ----- */
@media (max-width: 760px) {
  .tbl td.g-id { grid-area: id; }
  .tbl td.g-st { grid-area: st; justify-self: end; }
  .tbl td.g-dep { grid-area: dep; justify-self: end; }
  .tbl td.g-ear { grid-area: ear; }
  .tbl td.g-prog { grid-area: prog; }
  .tbl td.g-left { grid-area: left; justify-self: end; align-self: center; }
  .tbl td.g-amt { grid-area: amt; }
  .tbl td.g-act { grid-area: act; justify-self: end; align-self: center; }
  .tbl td.g-role { grid-area: role; }
  .tbl td.g-chg { grid-area: chg; }
  .tbl td.g-pnl { grid-area: pnl; justify-self: end; }
  .tbl td.g-term { grid-area: term; }
  .tbl td.g-fee { grid-area: fee; justify-self: end; }
  .tbl td.g-cl { grid-area: cl; justify-self: end; }

  .q-tbl tbody tr:not(.is-gap):not(.tbl-empty) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st" "ear dep" "prog left"; }
  .q-tbl .q-prog { min-width: 0; }
  .o-tbl tbody tr:not(.tbl-empty) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id amt" "st act"; align-items: center; }
  .o-tbl td.g-amt { justify-self: end; }
  .o-tbl td.g-st { justify-self: start; }
  .o-tbl .o-amt { width: auto; }
  .o-tbl .o-amt .depth { display: none; }
  .p-tbl tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id pnl" "role chg" "amt term" "fee act"; }
  .p-tbl td.g-chg, .p-tbl td.g-term { justify-self: end; }
  .p-tbl td.g-fee { justify-self: start; }
  .p-tbl td.g-role { color: var(--text-2); font-size: var(--t-caption); }
  .p-tbl .fee-meter { justify-content: start; }
  .p-tbl .when { text-align: right; }
  .p-tbl.p-divs tbody tr { grid-template-areas: "id st" "amt cl" "prog prog" "ear act"; }
  .tbl-scroll { overflow: visible; }
  .br-head { padding: 12px 16px 4px; }
  .br-tbl tbody tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t e i" "d d d"; padding: 8px 16px; border-top: 0; row-gap: 2px; }
  .br-tbl td:nth-child(1) { grid-area: t; }
  .br-tbl td:nth-child(2) { grid-area: e; }
  .br-tbl td:nth-child(3) { grid-area: i; }
  .br-tbl td:nth-child(5) { grid-area: d; }

  .tbl td { background: transparent !important; }
  #queue .rail { display: grid; grid-template-columns: minmax(0, 1fr); }
  .flow-foot { flex-wrap: wrap; row-gap: 6px; }
  .flow-foot i { flex: 1 1 12px; }
  .ph { flex-wrap: wrap; row-gap: 4px; }
  .ph .meta { text-align: left; }
  .wallet-btn.is-connected .wb-long { display: none; }
  .wallet-btn.is-connected .wb-short { display: inline; }
  .me-grid dd { font-size: var(--t-body); }
  .dev-h .dev-clock { display: none; }
  .dev.collapsed { width: auto; }
}

/* ==========================================================================
   Motion preferences: every loop and sweep stops; values still change, without the roll
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  .ticker { overflow-x: auto; scrollbar-width: none; }
  .ticker-track { animation: none; }
  .fomo .live i::after, .eb-bar::after { animation: none !important; }
  .flip.is-flipping .ft, .flip.is-flipping .fb { animation: none; }
  .fuse-bar i, .stat { transition: none; }
  .toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
  .btn, .chip, .tab, .nav a, .stat, .rule-col, .me-grid > div, .qseg { transition: none; transform: none !important; }
  .btn .spin { animation-duration: 2.4s; }
  .btn-gold::after, .hero::after, .hero-grid-bg::before, .hero3d::before, .hero3d::after, .guilloche, .hero-copy h1,
  .clock-colon, .fomo.is-urgent::after, .fomo.is-urgent .clock::before, .fuse-bar i::after, .bar i::after, .capbar .bar i::after, .qseg-fill::before,
  .status-chip[data-s="live"] i, .seal-lg .ring, .roll-up, .roll-down, .menu, .ticker::after { animation: none !important; }
  .hero-copy h1 { background-position: 160% 0, 0 0; }
}

/* ==========================================================================
   site-finish (2026-10-03): order caps, pause-aware FOMO, ids with roles, fee meter on phones,
   empty order book, recent orders list, compact 我的金库 on phones
   ========================================================================== */
.tbl td.id .id-main { display: block; }
.tbl td.id .id-role { display: block; margin-top: 5px; font: 400 var(--t-caption)/1 var(--f-sans); color: var(--text-3); }
.p-tbl .done-txt { text-align: left; white-space: normal; color: var(--text-2); }
/* 我的金库 figures break at spaces, not inside 上限 / BNCB */
.me-grid dd, .me-grid dd small { word-break: keep-all; overflow-wrap: anywhere; }
.fomo-action.is-paused { border-color: var(--line-3); background: rgba(255, 255, 255, .03); }
.fomo.is-paused .fuse-bar i { background: var(--text-3); box-shadow: none; }
.fomo.is-paused .fuse-bar i::after { display: none; }
.fomo.is-paused[data-state="running"] .live i { background: var(--text-2); box-shadow: none; }
.fomo.is-paused[data-state="running"] .live i::after { animation: none; }
.fomo.is-paused .clock-colon { animation: none; color: var(--y-lo); text-shadow: none; }
.fomo.is-paused .flip b { color: var(--y-lo); text-shadow: none; }
.fomo.is-paused .flip { box-shadow: 0 0 0 1px var(--line-2), 0 16px 28px -14px rgba(0, 0, 0, .95); }
/* an empty order book: the note sits in the middle of the panel, not under a 400 px hole */
.book.is-empty .tbl-scroll { flex: 1; display: flex; flex-direction: column; }
.book.is-empty .o-tbl { flex: 1; }
.book.is-empty .tbl-empty td { vertical-align: middle; }
#createForm .summary dd small { margin-top: 2px; font-family: var(--f-sans); }
/* the payoff sketch scales with its box: keep its 11 px labels near 11 px when the ticket goes full width (tablets) */
.payoff { max-width: 420px; }
/* split legend: the rows share the panel height (3 legs without a referrer, 5 with one), so no empty band above the ribbons */
.flow-legend { align-content: stretch; grid-auto-rows: minmax(76px, 1fr); }
.addr dd .addr-dev { color: var(--text); }

@media (max-width: 760px) {
  /* 我的金库: the eyebrow names it; the claim sits beside its button so the countdown stays in the first screen */
  .me-h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-me .eyebrow { margin-bottom: 12px; }
  .me-top { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; padding: 14px 16px; }
  .me-top .btn { width: auto; min-width: 104px; padding: 0 18px; height: 44px; }
  .me-grid > div { padding: 10px 12px; }
  .me-grid dd { font-size: var(--t-data); }
  /* positions as cards: id + role, P&L · amount, change · term, fee meter (G10) · action */
  .tbl td.id .id-main { display: inline; }
  .tbl td.id .id-role { display: inline; margin: 0 0 0 8px; }
  .p-tbl tbody tr { grid-template-areas: "id pnl" "amt chg" "term fee" "act act"; }
  .p-tbl tbody tr.r-open, .p-tbl tbody tr.r-done { grid-template-areas: "id act" "amt act"; align-items: center; }
  .p-tbl td.c-fee { display: block; }
  .p-tbl td.g-term { justify-self: start; }
  .p-tbl td.g-fee { justify-self: end; }
  .p-tbl .fee-meter { display: inline-grid; vertical-align: middle; grid-template-columns: 44px auto; justify-content: end; }
  .p-tbl .fee-meter .scale { display: block; }
  .p-tbl td.g-act { justify-self: end; text-align: right; }
  /* static ticker (pre-launch): the long note ends with an ellipsis instead of being cut mid-word */
  .ticker.static .ticker-list li:first-child { max-width: calc(100vw - 8px); }
  .ticker.static .ticker-list li:first-child .tk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* recent order activity: event · id · detail on one line, the time under it */
  .br-tbl tbody tr { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "e i d" "t t t"; column-gap: 10px; row-gap: 3px; padding: 9px 16px; border-top: 1px solid var(--line); }
  .br-tbl tbody tr:first-child { border-top: 0; }
  .br-tbl td:nth-child(1) { grid-area: t; width: auto; font-size: var(--t-overline); }
  .br-tbl td:nth-child(2) { grid-area: e; width: auto; }
  .br-tbl td:nth-child(3) { grid-area: i; width: auto; }
  .br-tbl td:nth-child(5) { grid-area: d; justify-self: end; text-align: right; white-space: normal; }
}

/* ==========================================================================
   reskin-integrate (2026-10-03) · the WebGL hero (js/ui/hero3d.js, aimed by js/ui/hero.js at .hero-stage)
     ≥ 1280 px   copy | coin | board, one row
     761–1279    copy | coin (with a countdown pill under it), the board under them (two columns inside it from 1021 px)
     ≤ 760       the coin (and its pill) in a band, then the copy, then the board
   Until the scene is ready (or with no WebGL / the data saver on) the stage shows our static coin and a halo.
   ========================================================================== */
.hero { --stage-w: 290px; --board-w: 470px; --hero-gap: 24px; }
.hero-inner {
  grid-template-columns: minmax(0, 1fr) var(--stage-w) var(--board-w); grid-template-areas: "left stage board";
  column-gap: var(--hero-gap); row-gap: 28px;
}
.hero-left { grid-area: left; min-width: 0; position: relative; z-index: 0; }
/* a soft shade behind the copy: the scene's rays, horizon and embers stay lively without crossing the text at full strength */
.hero-left::before {
  content: ""; position: absolute; z-index: -1; inset: -48px -64px -48px -96px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11, 14, 17, .66), rgba(11, 14, 17, .42) 55%, rgba(11, 14, 17, 0));
}
.hero-inner > .fomo { grid-area: board; }
.hero-stage {
  grid-area: stage; position: relative; align-self: center; justify-self: center; width: 100%; aspect-ratio: 1 / 1;
  --coin-k: 1; pointer-events: none;
}
.hero-stage::before {
  content: ""; position: absolute; inset: -42%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(252, 213, 53, .26), rgba(240, 185, 11, .08) 42%, transparent 72%);
  transition: opacity .7s ease;
}
.stage-coin {
  position: absolute; inset: 4%; display: block;
  background: url(../img/bncs-mark-512.png) center / contain no-repeat;
  filter: drop-shadow(0 0 34px rgba(240, 185, 11, .5)) drop-shadow(0 26px 34px rgba(0, 0, 0, .65));
  animation: stageFloat 6s ease-in-out infinite; transition: opacity .5s ease;
}
@keyframes stageFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.h3d-pending .stage-coin { opacity: 0; }
.hero.h3d-on .stage-coin, .hero.h3d-on .hero-stage::before { opacity: 0; animation: none; }
/* the scene draws its own floor (also where :has() is missing) */
.hero.h3d-on .hero-grid-bg { display: none; }
/* the scene meets the header and the stats strip softly (fixed-size fades, so a tall phone hero keeps its coin crisp) */
.hero .hero3d > .h3d-canvas, .hero .hero3d > .h3d-fb {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--h3d-top, 36px), #000 calc(100% - 150px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--h3d-top, 36px), #000 calc(100% - 150px), transparent 100%);
}

/* the coin's countdown pill: only where the board is not beside the coin (it repeats the board's clock, aria-hidden) */
.stage-clock { display: none; }
@media (max-width: 1279px) {
  .stage-clock:not([hidden]) {
    position: absolute; left: 50%; bottom: -7%; z-index: 1; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(180deg, rgba(30, 35, 41, .94), rgba(16, 19, 23, .94));
    box-shadow: 0 0 0 1px rgba(240, 185, 11, .5) inset, 0 12px 30px -12px rgba(0, 0, 0, .9), 0 0 28px -6px rgba(240, 185, 11, .55);
  }
  .stage-clock em { font: 600 var(--t-caption)/1 var(--f-sans); font-style: normal; color: var(--text-2); letter-spacing: .02em; }
  .stage-clock em::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
    background: var(--y); box-shadow: 0 0 8px var(--y);
  }
  .stage-clock b {
    font: 800 22px/1 var(--f-display); font-stretch: 104%; letter-spacing: .02em; color: var(--y-btn); text-shadow: var(--tglow);
    font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
  }
  .stage-clock.is-urgent { box-shadow: 0 0 0 1px rgba(252, 213, 53, .85) inset, 0 12px 30px -12px rgba(0, 0, 0, .9), 0 0 40px -4px rgba(252, 213, 53, .8); }
  .stage-clock.is-urgent b { color: #FFE27A; text-shadow: 0 0 20px rgba(255, 200, 40, .95), 0 0 3px rgba(255, 240, 180, .9); }
  .stage-clock.is-urgent em::before { animation: colon .6s ease-in-out infinite; }
  .stage-clock.is-paused b { color: var(--y-lo); text-shadow: none; }
  .stage-clock.is-paused em::before { background: var(--text-3); box-shadow: none; }
}

/* ---------- wide: one row ---------- */
@media (min-width: 1280px) {
  .hero-copy h1 { font-size: clamp(58px, calc((100vw - 888px) / 6.1), 76px); }
  :root[data-lang="en"] .hero-copy h1 { font-size: clamp(40px, calc((100vw - 888px) / 9.2), 52px); }
  .hero-copy .lede, .hero-copy .hero-highlights { max-width: none; }
  .me-grid dd { font-size: 15px; }
  .fomo { --fw: 58px; --fh: 82px; --fs: 58px; padding: 22px 24px 20px; }
  .clock-colon { width: 22px; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .hero { --stage-w: 250px; --board-w: 450px; }
  .hero-copy h1 { font-size: clamp(58px, calc((100vw - 828px) / 6.1), 76px); }
  :root[data-lang="en"] .hero-copy h1 { font-size: clamp(40px, calc((100vw - 828px) / 9.2), 52px); }
  .fomo { --fw: 55px; --fh: 78px; --fs: 55px; }
}

/* ---------- tablets and small laptops: copy | coin, then the board ---------- */
@media (max-width: 1279px) {
  .hero { --stage-w: clamp(220px, 28vw, 320px); }
  .hero-inner { grid-template-columns: minmax(0, 1fr) var(--stage-w); grid-template-areas: "left stage" "board board"; column-gap: 32px; row-gap: 40px; }
  .hero-stage { align-self: center; margin-bottom: 18px; }
  .fomo { --fw: 64px; --fh: 88px; --fs: var(--t-flip); padding: 22px 28px; }
}
@media (min-width: 1021px) and (max-width: 1279px) {
  .hero-inner > .fomo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; align-items: start;
    grid-template-areas: "head kv" "clock kv" "fuse kv" "action action" "rule rule";
    --fw: 60px; --fh: 84px; --fs: 60px;
  }
  .fomo > .fomo-head { grid-area: head; }
  .fomo > .clock { grid-area: clock; }
  .fomo > .fuse { grid-area: fuse; }
  .fomo > .fomo-kv { grid-area: kv; margin-top: 4px; }
  .fomo > .fomo-action { grid-area: action; }
  .fomo > .fomo-rule { grid-area: rule; }
  .fomo .clock-colon { width: 22px; }
}

/* ---------- phones: the coin in a band over the copy ---------- */
@media (max-width: 760px) {
  /* the coin, the headline, the countdown pill and the CTA share the first screen of a 390 × 844 phone */
  .hero { --stage-w: min(50vw, 204px); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "left" "board"; row-gap: 18px; padding-top: 18px; }
  .hero-stage { width: var(--stage-w); }
  .hero-stage.has-clock { margin-bottom: 28px; }
  /* the scene covers the coin and the copy only (the board below is opaque on phones): fewer pixels to fill, and the
     render loop pauses as soon as that part scrolls away */
  .hero .hero3d { --h3d-top: 14px; bottom: auto; height: min(100%, 820px); }
  .stage-clock:not([hidden]) { bottom: -16%; height: 36px; padding: 0 14px 0 12px; gap: 8px; }
  .stage-clock b { font-size: 19px; }
  .hero-copy .eyebrow { margin-bottom: 14px; }
  .hero-copy .lede { margin-top: 12px; }
  .hero-copy .hero-highlights { margin-top: 12px; }
  .hero-copy .cta-row { margin-top: 18px; }
  .fomo { --fw: 40px; --fh: 58px; --fs: var(--t-flip); padding: 18px 16px; }
}
@media (max-width: 380px) {
  .fomo { --fw: 36px; --fh: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-coin, .stage-clock.is-urgent em::before { animation: none; }
}

/* ==========================================================================
   reskin-review (2026-10-04) · art-direction pass
     · section heads: a giant ghost numeral (data-no on .sec-head) and a light running along the rule
     · empty lists: a "no records" mark, as on exchange tables
     · queue / book / positions: the list card hugs its rows (no dark hole between the last row and the notes)
     · pre-launch board: armed, not dead (breathing dashes, a scanner across the clock, a hazard fuse)
     · the burn-deposit ticket and the claim card: a light beam running round the border
   Every loop is off under prefers-reduced-motion (end of this section).
   ========================================================================== */

/* ---------- section heads ---------- */
.sec-head { position: relative; isolation: isolate; }
.sec-head[data-no]::before {
  content: attr(data-no); content: attr(data-no) / ""; position: absolute; z-index: -1; left: -10px; top: -30px; pointer-events: none; user-select: none;
  font: 900 184px/1 var(--f-display); font-stretch: 125%; letter-spacing: -.05em; font-variant-numeric: lining-nums tabular-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(240, 185, 11, .22);
  background: linear-gradient(180deg, rgba(252, 213, 53, .16) 0%, rgba(240, 185, 11, .05) 52%, transparent 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 45%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .75) 45%, transparent 88%);
}
/* a soft spotlight behind the title, so each section starts with light instead of a flat black band */
.sec-head::after {
  content: ""; position: absolute; z-index: -2; left: -120px; top: -90px; width: 560px; height: 300px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 185, 11, .085), transparent 75%);
}
.sec-index .no { position: relative; }
.sec-index .rule { position: relative; overflow: hidden; }
.sec-index .rule::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 140px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 122, .95) 50%, transparent);
  transform: translateX(-160px); animation: ruleRun 5.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ruleRun { 0%, 18% { transform: translateX(-160px); } 72%, 100% { transform: translateX(1400px); } }
.sec-title-row h2 { text-shadow: 0 2px 30px rgba(240, 185, 11, .12); }

/* ---------- empty lists: an exchange-style "no records" mark ---------- */
.empty::before {
  content: ""; display: block; width: 64px; height: 64px; margin-bottom: 2px; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='9' y='9' width='34' height='42' rx='6' fill='%231E2329' stroke='%23474D57' stroke-width='2'/%3E%3Cpath d='M17 21h18M17 29h18M17 37h10' stroke='%23474D57' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='44' cy='44' r='13' fill='%230B0E11' stroke='%23F0B90B' stroke-width='2.4'/%3E%3Cpath fill='%23F0B90B' fill-rule='evenodd' transform='translate(44 44) scale(.42) translate(-32.1 -32)' d='M22.6 19.2H34C38.2 19.2 40.4 21.4 40.4 25C40.4 27.5 39.1 29.3 37 30.2C39.9 31.2 41.6 33.4 41.6 36.6C41.6 41.6 38.4 44.8 33 44.8H22.6ZM28.7 24.2V29.4H33C34.6 29.4 35.4 28.5 35.4 26.8C35.4 25.1 34.6 24.2 33 24.2ZM28.7 34.1V39.8H33.3C35.2 39.8 36.2 38.7 36.2 37C36.2 35.2 35.2 34.1 33.3 34.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(240, 185, 11, .28));
}
.empty p { color: var(--text-2); }

/* ---------- the list card hugs its rows (the tall ticket beside it no longer stretches a hole into it) ---------- */
#queue .split > .q-main, #book .split > .book:not(.is-empty), #positions .split > .pos { align-self: start; }

/* ---------- pre-launch board: armed, waiting for launch ---------- */
.fomo[data-state="prelaunch"] .flip b { color: rgba(240, 185, 11, .62); text-shadow: 0 0 14px rgba(240, 185, 11, .45); animation: standby 2.6s ease-in-out infinite; }
.fomo[data-state="prelaunch"] .flip { box-shadow: 0 0 0 1px rgba(240, 185, 11, .14), 0 16px 28px -14px rgba(0, 0, 0, .95); }
.fomo[data-state="prelaunch"] .clock-colon { color: rgba(240, 185, 11, .5); }
.fomo[data-state="prelaunch"] .clock::after {
  content: ""; position: absolute; z-index: 5; top: -8px; left: 0; width: 18%; height: calc(var(--fh) + 16px); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 122, .2) 50%, transparent);
  transform: translateX(-110%); animation: scan 4.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes standby { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes scan { 0%, 12% { transform: translateX(-110%); opacity: 0; } 18%, 70% { opacity: 1; } 78%, 100% { transform: translateX(560%); opacity: 0; } }
.fomo[data-state="prelaunch"] .fuse-bar i {
  width: 100% !important; box-shadow: none; transition: none;
  background: repeating-linear-gradient(135deg, rgba(240, 185, 11, .3) 0 5px, rgba(240, 185, 11, .06) 5px 10px);
}
.fomo[data-state="prelaunch"] .fuse-bar i::after { animation-duration: 3.2s; opacity: .5; }

/* ---------- a light beam running round the main action cards (desktop: it repaints a ring each frame, so phones skip it) ---------- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (min-width: 761px) {
  #depositForm::after, .me-top::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--beam), transparent 0deg 200deg, rgba(240, 185, 11, .75) 280deg, #FFF3C4 326deg, #FCD535 340deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: beam 7s linear infinite;
  }
}
@keyframes beam { to { --beam: 360deg; } }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .sec-head[data-no]::before { font-size: 116px; top: -22px; left: -6px; }
  .sec-head::after { left: -80px; top: -70px; width: 360px; height: 220px; }
  .empty::before { width: 52px; height: 52px; }
  /* recent order activity: the event word and the order id share a baseline (the id sat 5 px higher) */
  .br-tbl tbody tr { align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-index .rule::after, .fomo[data-state="prelaunch"] .flip b, .fomo[data-state="prelaunch"] .clock::after,
  #depositForm::after, .me-top::after { animation: none !important; }
  .sec-index .rule::after, .fomo[data-state="prelaunch"] .clock::after { display: none; }
  .fomo[data-state="prelaunch"] .flip b { opacity: .8; }
}


/* ==========================================================================
   final-site (2026-10-04) · navigation for the explainer sections
     · header nav (≥ 1101 px): priority+ — js/ui/chrome.js keeps as many links as fit and lists the rest under 更多
     · tab bar (≤ 1100 px): the five app sections, 推广 (invite kit, 地推) and 更多, a sheet with every section
   ========================================================================== */
.nav-more { position: relative; display: flex; align-items: stretch; flex: none; }
.nav-more-btn {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  color: var(--text-2); font: 500 var(--t-body)/1 var(--f-sans); white-space: nowrap; transition: color .15s ease;
}
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { color: var(--y); }
.nav-more-btn.active { color: var(--text); }
.nav-more-btn.active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px;
  background: var(--y); box-shadow: 0 0 12px var(--y), 0 0 2px var(--y);
}
.nav-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.nav-more-btn[aria-expanded="true"] .nav-chev { transform: translateY(2px) rotate(225deg); }
.nav .nav-more .nav-more-menu { left: 0; right: auto; top: calc(100% + 1px); width: 232px; padding: 6px; }
.nav .nav-more .nav-more-menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none;
  font-size: var(--t-body); font-weight: 500; white-space: nowrap;
}
.nav .nav-more .nav-more-menu a .mono { width: 20px; flex: none; color: var(--text-4); font-size: var(--t-overline); letter-spacing: .06em; }
.nav .nav-more .nav-more-menu a:hover { background: var(--bg-3); color: var(--text); }
.nav .nav-more .nav-more-menu a.active { color: var(--y); background: var(--y-a10); }
.nav .nav-more .nav-more-menu a.active .mono { color: var(--y); }
.nav .nav-more .nav-more-menu a.active::after { display: none; }
@media (max-width: 1320px) { .nav-more-btn { padding: 0 10px; } }
:root[data-lang="en"] .nav-more-btn { padding: 0 10px; }
@media (max-width: 1360px) { :root[data-lang="en"] .nav-more-btn { padding: 0 8px; font-size: var(--t-data); } }

.tab-sheet { display: none; }
@media (max-width: 1100px) {
  .tabbar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .tabbar .tab-more-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px;
    padding: 0; border: 0; background: none; cursor: pointer; color: var(--text-3); font: 600 var(--t-overline)/1.2 var(--f-sans); transition: color .15s;
  }
  .tabbar a span, .tabbar .tab-more-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a[data-sec="invite"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M2.5 20.5c.7-4 3.3-6 6.5-6s5.8 2 6.5 6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M19 6.5v7M15.5 10h7' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .tabbar .tab-more-btn { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='2' fill='%23000'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='2' fill='%23000'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='2' fill='%23000'/%3E%3Crect x='14.5' y='14.5' width='5.5' height='5.5' rx='1.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
  .tabbar .tab-more-btn:hover { color: var(--text-2); }
  .tabbar .tab-more-btn:hover i::before { background: var(--text-2); }
  .tabbar .tab-more-btn.active, .tabbar .tab-more-btn[aria-expanded="true"] { color: var(--y); }
  .tabbar .tab-more-btn.active i::before, .tabbar .tab-more-btn[aria-expanded="true"] i::before { background: var(--y); filter: drop-shadow(0 0 6px rgba(240, 185, 11, .8)); }
  .tabbar .tab-more-btn.active::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--y); box-shadow: 0 0 12px var(--y); }

  .tab-sheet:not([hidden]) {
    display: block; position: fixed; left: 12px; right: 12px; z-index: 75; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
    max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px 10px;
    background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px;
    box-shadow: var(--shadow-pop), 0 0 40px -14px rgba(240, 185, 11, .45); animation: popIn .18s var(--ease-out);
  }
  .tab-sheet-t { padding: 0 8px 10px; font: 600 var(--t-overline)/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
  .tab-sheet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .tab-sheet-list a {
    display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border-radius: 10px; min-width: 0;
    color: var(--text-2); text-decoration: none; font-size: var(--t-data); font-weight: 600;
  }
  .tab-sheet-list a b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-sheet-list a .mono { flex: none; width: 22px; color: var(--text-4); font-size: var(--t-overline); letter-spacing: .06em; }
  .tab-sheet-list a:hover { background: var(--bg-3); color: var(--text); }
  .tab-sheet-list a.active { color: var(--y); background: var(--y-a10); box-shadow: 0 0 0 1px var(--y-a24) inset; }
  .tab-sheet-list a.active .mono { color: var(--y); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-sheet:not([hidden]), .nav-chev { animation: none; transition: none; }
}

/* spec v1.6b: orders from the project's order quota — a small neutral chip (visible, not alarming) */
.tag-proj { height: 20px; padding: 0 7px; margin-left: 8px; color: var(--text-2); background: rgba(132, 142, 156, .1); border-color: var(--line-3); font-size: var(--t-overline); font-weight: 600; letter-spacing: .02em; vertical-align: middle; }
.proj-m { display: none; }
.id-proj { display: block; margin-top: 4px; }
.id-proj .tag-proj { margin-left: 0; }
@media (max-width: 760px) {
  .proj-m { display: inline-flex; }
  .proj-m .tag-proj { margin-left: 6px; }
}

/* very narrow phones (≤ 340 px, e.g. 320): the coin mark alone carries the brand in the header, so the TEST DATA chip, the
   settings button and the wallet button still fit without widening the page */
@media (max-width: 340px) {
  .brand-name { display: none; }
}
/* test-data mode, English, 381–390 px: "TEST DATA" next to the wallet button left the header 8 px too wide; the chip says
   "TEST" there, as it already does at ≤ 380 px (the label never disappears) */
@media (min-width: 381px) and (max-width: 390px) {
  :root[data-lang="en"] .status-chip[data-dev] .s-short { display: none; }
  :root[data-lang="en"] .status-chip[data-dev] .s-tiny { display: inline; }
}

/* spec v1.6c: the deposit price band — the per-deposit maximum in the amount hint (with a fill link), the warm-up after the
   listing, and the offer to split a larger amount into deposits sent one after another (or to deposit the maximum) */
.hint .dep-max { margin-left: 6px; vertical-align: baseline; }
.hint.is-warm { color: var(--y); }
.dep-split { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--y-a24); border-radius: 10px; background: var(--y-a06); font-size: var(--t-caption); line-height: 1.6; color: var(--text-2); }
.dep-split[hidden] { display: none; }
.dep-split p { margin: 0; }
.dep-split-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dep-split-a .btn { height: 32px; }
/* spec v1.6 (H): a FOMO winner the pool cannot cover yet — it waits for the boost pool and blocks nobody */
.tag-boost { color: var(--y); background: transparent; border-color: var(--y-a24); }

/* BNCB token icon (the bStocks / CEA Industries token logo the user supplied; same image as CoinGecko's BNCB icon),
   exported by output/branding/src/export_web_avatar.py. Shown where BNCB is entered (deposit, create order) and priced. */
#depositForm .amount .unit, #createForm .amount .unit { display: inline-flex; align-items: center; gap: 6px; }
#depositForm .amount .unit::before, #createForm .amount .unit::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: url(../img/bncb-64.png) center / contain no-repeat;
}
.stat[data-stat="bncb"] .stat-val::before {
  content: ""; flex: none; align-self: center; width: 20px; height: 20px; border-radius: 50%;
  background: url(../img/bncb-64.png) center / contain no-repeat;
}