/* BIS · base system, Binance-style dark UI (2026-10-01; the file keeps its old name so every page still loads it).
   Shared by every page (home, AI 查币, token page, breeder and hunt pages). Type + palette variables (--font-*, --bn-*)
   and the type table: top of css/app.css. Fonts: fonts/fonts.css (IBM Plex Sans as 'BSI Sans', Noto Sans SC as 'Noto SC',
   IBM Plex Mono as 'BSI Mono', the 得意黑 SFX subset as 'BSI Oblique'). No display faces: headings are clean bold sans.
   The comic identity lives in the AI-drawn characters, the thin cut-corner panel frames (comic.js) and the speech bubbles.

   CRISP-TEXT RULES — keep them when adding styles:
   1. Never rotate / skew / scale / filter an element whose text is under 32px (SFX accents are 32px+).
   2. Reveal animations move with translate + opacity only and end at transform: none (comic.js then drops the classes).
   3. Small text: at least 12px for 中文, 11px for Latin. Numbers are Plex (tabular figures by default).
   4. AI / API text always uses --font-sans (Noto SC slices cover what the core subset lacks). */

:root {
  /* legacy tokens, re-pointed at the Binance palette (older markup and inline styles still name them) */
  --ink: #0B0E11; --ink-0: #07090B; --panel: #181A20; --panel-2: #1E2329; --panel-3: #2B3139;
  --paper: #EAECEF; --y: #F0B90B; --m: #FCD535; --c: #B7BDC6; --nv: #76B900; --v: #B7BDC6; --up: #0ECB81; --down: #F6465D; --warn: #F78D1E;
  --text: #EAECEF; --muted: #848E9C; --dim: #5E6673;
  --f-display: var(--font-sans); --f-letter: var(--font-sans); --f-bang: var(--font-sans); --f-ui: var(--font-sans); --f-body: var(--font-sans);
  --ex2: none; --ex3: none; --ex4: none; --ex4m: none;
  --pop: cubic-bezier(.2, .7, .2, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sy: 0;
  --y-tint: rgba(240, 185, 11, .1);
  --y-edge: rgba(240, 185, 11, .36);
  --grid: rgba(240, 185, 11, .06);
}
* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) on html AND body: nothing can widen the layout viewport on phones, and neither box
   becomes a scroll container (the sticky top bar keeps working) */
html { background: var(--bn-bg); color-scheme: dark; -webkit-text-size-adjust: 100%; font-synthesis: none; text-rendering: optimizeLegibility; overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--bn-bg); color: var(--bn-text); font: 400 15px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-kerning: normal; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; }
p { margin: 0; }
b, strong { font-weight: 600; }
/* no lone character or word on a paragraph's last line */
p, figcaption, .bub { text-wrap: pretty; }
.nb { white-space: nowrap; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.nv { color: var(--nv); }
.up { color: var(--bn-up); }
.down, .dn { color: var(--bn-down); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(240, 185, 11, .35); color: #fff; }

/* ---------- page backdrop: Binance black, one soft gold light at the top, a faint diamond grid that fades out ---------- */
.bn-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 42% at 72% -6%, rgba(240, 185, 11, .09), transparent 70%), radial-gradient(ellipse 50% 40% at 0% 30%, rgba(240, 185, 11, .035), transparent 70%); }
.bn-backdrop::before { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(240, 185, 11, .035) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, rgba(240, 185, 11, .035) 0 1px, transparent 1px 34px);
  -webkit-mask: radial-gradient(ellipse 70% 55% at 70% 0%, #000, transparent 75%); mask: radial-gradient(ellipse 70% 55% at 70% 0%, #000, transparent 75%); }
.site { position: relative; z-index: 1; }

/* ---------- top bar (Binance header: #181A20, hairline under it) ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 24px;
  background: var(--bn-panel); border-bottom: 1px solid var(--bn-line); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand .logo-mark { width: 36px; height: 36px; flex: none; border-radius: 50%; }
.brand .bt { display: flex; flex-direction: column; }
.brand .bt b { display: block; font: 700 18px/1.15 var(--font-sans); letter-spacing: -.01em; color: var(--bn-text); white-space: nowrap; }
.coin-chip { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; font: 600 12px/1 var(--font-num); color: var(--bn-yellow); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .3); border-radius: 4px; white-space: nowrap; }
.unoff { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; font: 500 12px/1 var(--font-sans); color: var(--bn-text-2); background: rgba(132, 142, 156, .12); border: 1px solid rgba(132, 142, 156, .28); border-radius: 4px; white-space: nowrap; }
.nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; margin-left: 10px; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: 500 14px/1 var(--font-sans); color: var(--bn-text); white-space: nowrap; transition: color .15s; }
.nav a:hover { color: var(--bn-yellow); }
.nav a[aria-current] { color: var(--bn-yellow); }
.nav a[aria-current]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--bn-yellow); }
.nav a .soon { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; font: 500 11px/1 var(--font-sans); color: var(--bn-muted); background: rgba(132, 142, 156, .14); border-radius: 3px; }
html[data-lang="zh"] .nav a .soon { font-size: 12px; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.social-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--bn-text); background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-radius: 6px; transition: color .15s, border-color .15s; }
.social-x svg { width: 16px; height: 16px; }
.social-x:hover { color: var(--bn-yellow); border-color: var(--bn-yellow); }
.lang { display: inline-flex; padding: 2px; background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-radius: 6px; }
/* the language switch is set in the system font (no CJK download on English pages for "中") */
.lang button { appearance: none; border: 0; cursor: pointer; min-width: 34px; height: 28px; padding: 0 8px; font: 600 13px/1 system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; color: var(--bn-muted); background: transparent; border-radius: 4px; transition: color .15s, background-color .15s; }
.lang button[aria-pressed="true"] { color: var(--bn-on-yellow); background: var(--bn-yellow); }
.lang button:hover:not([aria-pressed="true"]) { color: var(--bn-text); }
.wallet .wi { display: none; width: 18px; height: 18px; }

/* ---------- buttons (Binance: solid yellow primary, grey secondary, yellow outline); hover changes colour only ---------- */
.btn { --bg: var(--bn-yellow); --fg: var(--bn-on-yellow); --bd: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 20px; font: 600 15px/1.2 var(--font-sans); color: var(--fg); background: var(--bg); border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--bd);
  white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.btn:hover { --bg: var(--bn-yellow-hi); }
.btn:active { --bg: #DCA70A; }
.btn[disabled], .btn[disabled]:hover { cursor: not-allowed; --bg: var(--bn-line); --fg: var(--bn-dim); --bd: transparent; }
.btn.lg { min-height: 52px; padding: 0 28px; font-size: 17px; border-radius: 8px; }
.btn.ghost { --bg: var(--bn-line); --fg: var(--bn-text); }
.btn.ghost:hover { --bg: #363D47; }
.btn.ghost:active { --bg: #2F353E; }
.btn.mag, .btn.cy { --bg: transparent; --fg: var(--bn-yellow); --bd: rgba(240, 185, 11, .7); }
.btn.mag:hover, .btn.cy:hover { --bg: var(--y-tint); --bd: var(--bn-yellow); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn.xs { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 4px; }
.btn .arr { font: 600 1em/1 var(--font-sans); }
.btn:focus-visible, .nav a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--bn-yellow-hi); outline-offset: 2px; }

/* ---------- panels: clip-path cut + a thin frame (drawn by comic.js) ---------- */
.pnl { position: relative; background: linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); isolation: isolate; }
.pnl > .frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; overflow: visible; }
.pnl.yellow, .pnl.mag, .pnl.paper { background: linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); color: var(--bn-text); }
/* decoration layers: the Binance diamond grid (dots-*) and a soft gold light (speed); each placement fades them out */
.pnl .dots-m, .pnl .dots-c, .pnl .dots-y, .pnl .dots-k, .dots-m, .dots-c, .dots-y, .dots-k { position: absolute; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(45deg, var(--grid) 0 1px, transparent 1px 24px), repeating-linear-gradient(-45deg, var(--grid) 0 1px, transparent 1px 24px); }
.speed { position: absolute; inset: -40%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy2, 50%), rgba(240, 185, 11, .14), rgba(240, 185, 11, .04) 26%, transparent 46%); }

/* ---------- headings: clean bold sans, white with a yellow part (no outlines, echoes or skew) ---------- */
.mast { position: relative; display: inline-flex; align-items: baseline; gap: .22em; margin: 0; font: 700 112px/1 var(--font-sans); color: var(--bn-text); letter-spacing: -.02em; white-space: nowrap; }
.mast > i { position: relative; display: inline-block; font-style: normal; }
.mast > i.lat { color: var(--bn-yellow); }
.mast > i::before, .mast > i::after { content: none; }
html[data-lang="zh"] .mast { letter-spacing: .01em; }
.h-sec { position: relative; display: inline-block; margin: 0; font: 700 36px/1.2 var(--font-sans); color: var(--bn-text); letter-spacing: -.01em; }
html[data-lang="zh"] .h-sec { letter-spacing: .01em; }
.h-sec em { font-style: normal; color: var(--bn-yellow); }
/* small labels: upright chips with hairline edges */
.kicker { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; font: 500 13px/1.3 var(--font-sans); color: var(--bn-yellow); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .28); border-radius: 4px; white-space: nowrap; }
.kicker.m, .kicker.p, .kicker.c { color: var(--bn-text-2); background: rgba(132, 142, 156, .1); border-color: rgba(132, 142, 156, .3); }
.kicker.k { color: var(--bn-yellow); background: rgba(11, 14, 17, .6); border-color: rgba(240, 185, 11, .4); }
/* onomatopoeia: a small accent in the SFX face only (32px+, so a tilt is allowed) */
.sfx { position: absolute; z-index: 30; pointer-events: none; font: 400 44px/1 var(--font-sfx); color: var(--bn-yellow); letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 2px 0 #0B0E11, 0 0 22px rgba(240, 185, 11, .45); }
.sfx.w, .sfx.c { color: #fff; text-shadow: 0 2px 0 #0B0E11, 0 0 20px rgba(255, 255, 255, .3); }
.sfx.m { color: var(--bn-yellow-hi); }
.sfx.sm { font-size: 34px; }
/* captions: upright chips (yellow, dark with a gold edge, grey) */
.cap { position: relative; z-index: 25; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; font: 600 13px/1.35 var(--font-sans); color: var(--bn-on-yellow); background: var(--bn-yellow); border-radius: 4px; }
.cap.k { color: var(--bn-yellow); background: rgba(11, 14, 17, .82); box-shadow: inset 0 0 0 1px rgba(240, 185, 11, .45); }
.cap.p, .cap.c { color: var(--bn-text); background: var(--bn-line); }
.cap.m { color: var(--bn-on-yellow); background: var(--bn-yellow-hi); }
.cap.nvb { color: #0B0E11; background: var(--nv); }
.cap.big { font: 700 20px/1.25 var(--font-sans); padding: 8px 14px; }

/* ---------- speech + thought bubbles: the comic voice, in clean type (white, soft shadow, a small tail) ---------- */
.bub { position: relative; z-index: 26; background: var(--bubbg, #fff); color: #1E2329; font: 500 15px/1.6 var(--font-sans); padding: 12px 16px; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.bub::before { content: none; }
.bub::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; }
.bub.tail-bl::after { left: var(--tx, 36px); bottom: -13px; border-width: 14px 5px 0 12px; border-color: var(--bubbg, #fff) transparent transparent transparent; transform: skewX(-20deg); }
.bub.tail-br::after { right: var(--tx, 36px); bottom: -13px; border-width: 14px 12px 0 5px; border-color: var(--bubbg, #fff) transparent transparent transparent; transform: skewX(20deg); }
.bub.tail-l::after { left: -11px; top: var(--ty, 22px); border-width: 6px 12px 8px 0; border-color: transparent var(--bubbg, #fff) transparent transparent; }
.bub.tail-r::after { right: -11px; top: var(--ty, 22px); border-width: 6px 0 8px 12px; border-color: transparent transparent transparent var(--bubbg, #fff); }
.bub.tail-t::after { left: var(--tx, 40px); top: -13px; border-width: 0 5px 14px 12px; border-color: transparent transparent var(--bubbg, #fff) transparent; transform: skewX(20deg); }
.bub b { font-weight: 700; color: #0B0E11; background: linear-gradient(transparent 60%, rgba(240, 185, 11, .55) 60%); }
.bub .caret, .caret { display: inline-block; width: .45em; height: 1em; background: var(--bn-yellow); vertical-align: -2px; margin-left: 2px; animation: blink .7s steps(1) infinite; }
.think { position: relative; z-index: 26; background: #fff; color: #1E2329; font: 500 15px/1.5 var(--font-sans); padding: 14px 22px; border-radius: 50%; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); text-align: center; }
.think i { position: absolute; background: #fff; border-radius: 50%; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- chips / badges ---------- */
.gen { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 2px 8px; font: 600 12px/1.2 var(--font-sans); color: var(--bn-yellow); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .3); border-radius: 4px; white-space: nowrap; }
.gen.g0 { color: var(--bn-on-yellow); background: var(--bn-yellow); border-color: transparent; }
.gen.g2, .gen.g3 { color: var(--bn-text-2); background: rgba(132, 142, 156, .12); border-color: rgba(132, 142, 156, .3); }
.sym { font: 600 15px/1 var(--font-num); color: var(--bn-yellow); }
.chg { font-weight: 600; }
.chg.up::before { content: '▲ '; font-size: .8em; } .chg.down::before { content: '▼ '; font-size: .8em; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--font-sans); color: var(--bn-muted); padding: 4px 9px; border: 1px solid var(--bn-line); border-radius: 99px; }

/* ---------- AI 好感度 meter: ten thin segments, the value in tabular figures ---------- */
.love { display: flex; align-items: center; gap: 8px; }
.love .bar { flex: 1; height: 8px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.love .bar i { background: var(--bn-line); border-radius: 1px; }
.love .bar i.on { background: var(--lc, var(--bn-yellow)); }
.love .v { font: 700 16px/1 var(--font-num); color: var(--lc, var(--bn-yellow)); min-width: 28px; text-align: right; }
.love .lbl { font: 500 12px/1 var(--font-sans); color: var(--bn-muted); white-space: nowrap; }

/* ---------- gene cards ---------- */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.gcard { --rc: var(--bn-yellow); position: relative; display: flex; flex-direction: column; padding: 12px 12px 14px; background: linear-gradient(180deg, var(--bn-panel-2), var(--bn-panel)); border: 1px solid var(--bn-line); border-radius: 12px;
  transition: transform .2s var(--ease), border-color .2s; overflow: hidden; }
.gcard:hover { transform: translateY(-4px); border-color: rgba(240, 185, 11, .5); }
.gcard.r-c, .gcard.r-m, .gcard.r-k { --rc: var(--bn-text-2); }
.gc-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.gc-no { font: 500 12px/1 var(--font-num); letter-spacing: .04em; color: var(--bn-muted); }
.gc-rank { display: grid; place-items: center; width: 26px; height: 26px; font: 700 13px/1 var(--font-num); color: var(--bn-on-yellow); background: var(--rc); border-radius: 50%; }
.gc-art { position: relative; height: 150px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(240, 185, 11, .22), rgba(240, 185, 11, .05) 48%, transparent 72%), linear-gradient(180deg, #252A33, #15191E); }
.gc-art .speed { display: none; }
.gc-art > [data-art] { position: absolute; left: 50%; top: 50%; width: 156px; height: 156px; margin: -74px 0 0 -78px; z-index: 2; }
.gc-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 12px; padding: 0 2px; }
.gc-name b { font: 700 18px/1.2 var(--font-sans); color: var(--bn-text); }
.gc-story { margin: 6px 2px 0; min-height: 44px; font: 400 13.5px/1.55 var(--font-sans); color: var(--bn-text-2); }
.gcard .love { margin: auto 2px 0; padding-top: 10px; }
.gcard.top { border-color: rgba(240, 185, 11, .55); box-shadow: 0 0 0 1px rgba(240, 185, 11, .2), 0 12px 32px rgba(240, 185, 11, .08); }
.gc-badge { position: absolute; left: 10px; top: 118px; z-index: 6; display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; font: 600 12px/1.2 var(--font-sans); color: var(--bn-on-yellow); background: var(--bn-yellow); border-radius: 4px; }

/* ---------- reveal: fade up as it scrolls in (translate + opacity only); comic.js drops the classes when done ---------- */
.rv { opacity: 0; }
.rv.in { animation: bnIn .55s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes bnIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pop-in { animation: bnPop .4s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes bnPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.art { width: 100%; height: 100%; overflow: visible; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cable { to { stroke-dashoffset: -60; } }

/* ---------- AI-drawn character art (BISUI.pic / app.js pic()) ----------
   <span class="pic [round] [pl-y|pl-c|pl-m]"><span class="pic-in"><span class="pic-img"><img></span></span></span>
   The v20 art is a transparent cutout: it sits on a dark plate with a soft gold glow, a 1 px gold edge and a thin gold
   outline offset behind the frame. Never stretched (1:1 box), never filtered. Size the .pic with width. */
.pic { --pr: 16px; --pdx: 6px; --pdy: 6px; --glow: .24; position: relative; display: block; aspect-ratio: 1 / 1; isolation: isolate; flex: none; }
.pic.round { --pr: 50%; }
.pic.pl-m { --glow: .3; } .pic.pl-c { --glow: .18; }
.pic::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--pr); border: 1px solid var(--y-edge); background: none;
  transform: translate(var(--pdx), var(--pdy)); }
.pic-in { position: absolute; inset: 0; overflow: hidden; border-radius: var(--pr); border: 1px solid rgba(240, 185, 11, .3); box-shadow: none;
  background: radial-gradient(circle at 50% 46%, rgba(240, 185, 11, var(--glow)), rgba(240, 185, 11, .06) 48%, transparent 72%), linear-gradient(180deg, #252A33, #15191E); }
.pic-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pic-img > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pic-in::after { content: none; }
.pic.sm { --pdx: 0px; --pdy: 0px; }
.pic.sm::before { display: none; }
.pic.flat::before { display: none; }
.pic.flat .pic-in { border-width: 0; background: none; }
/* the doctor "thinking" (app.js domeBrain): a soft gold light pulses behind him; the art itself never filters */
.pic.is-thinking::after { content: ''; position: absolute; inset: 4%; z-index: -2; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(240, 185, 11, .32), rgba(240, 185, 11, .08) 45%, transparent 70%); animation: thinkGlow 1.8s ease-in-out infinite; }
@keyframes thinkGlow { 50% { opacity: .45; } }
/* a thin gold ring around a portrait (no text inside) */
.doc-ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(240, 185, 11, .45); pointer-events: none; animation: spin 40s linear infinite; }

/* ---------- sections ---------- */
.sec { position: relative; z-index: 1; max-width: 1392px; margin: 0 auto; padding: 0 24px; }
.sec-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 76px 0 24px; }
.sec-head p { margin: 0; color: var(--bn-muted); max-width: 680px; flex: 1 1 100%; font-size: 15px; line-height: 1.65; }
.sec-head .right { margin-left: auto; }
.nn-div { position: relative; height: 54px; margin: 40px auto 0; max-width: 1392px; }
.nn-div canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 1; margin-top: 96px; border-top: 1px solid var(--bn-line); background: var(--bn-panel); }
.foot .in { max-width: 1392px; margin: 0 auto; padding: 32px 24px 42px; display: flex; gap: 24px 40px; align-items: flex-start; flex-wrap: wrap; color: var(--bn-muted); font-size: 13px; line-height: 1.7; }
.foot .note { flex: 1 1 560px; }
.foot .note p { margin: 0 0 8px; }
.foot .note b { color: var(--bn-text); font-weight: 600; }
.foot .foot-socials { margin-top: 16px; }
.foot-social { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; color: var(--bn-text); font: 500 14px/1.4 var(--font-sans); }
.foot-social svg { width: 16px; height: 16px; flex: none; }
.foot-social:hover { color: var(--bn-yellow); }
/* the community-project line: always visible, never a tilted sticker */
.foot .warn { flex: 0 1 340px; font: 500 13.5px/1.6 var(--font-sans); color: var(--bn-text); padding: 12px 14px; background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-left: 3px solid var(--bn-yellow); border-radius: 6px; }
.foot .models { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--bn-text); font: 500 14px/1.5 var(--font-sans); }
.foot .models i { font: 600 12px/1 var(--font-mono); font-style: normal; color: var(--bn-yellow); background: var(--y-tint); border: 1px solid rgba(240, 185, 11, .3); padding: 4px 7px; border-radius: 4px; }
.foot .models i.ds { color: var(--bn-text-2); background: rgba(132, 142, 156, .12); border-color: rgba(132, 142, 156, .3); }
.foot .models .mg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 0; right: 0; top: 80px; z-index: 120; width: max-content; max-width: calc(100vw - 32px); margin: 0 auto; font: 500 14px/1.45 var(--font-sans); color: var(--bn-text);
  background: var(--bn-panel-2); border: 1px solid var(--bn-line); border-left: 3px solid var(--bn-yellow); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); padding: 10px 16px; animation: toastIn .25s ease-out both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- mobile tab bar (Binance app style: full width, hairline on top, yellow when active) ---------- */
.tabbar { display: none; }

@media (max-width: 1240px) {
  .nav a { font-size: 14px; padding: 0 9px; }
  .nav a .soon { display: none; }
  .nav a[aria-current]::after { left: 9px; right: 9px; }
}
@media (max-width: 1060px) {
  .nav { display: none; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--bn-panel); border-top: 1px solid var(--bn-line); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0 2px; font: 500 12px/1.1 var(--font-sans); color: var(--bn-muted); white-space: nowrap; }
  .tabbar a svg { width: 20px; height: 20px; stroke-width: 2; }
  .tabbar a[aria-current] { color: var(--bn-yellow); }
  .foot { margin-bottom: 64px; }
}
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .topbar { height: 56px; padding: 0 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand .bt b { font-size: 15px; white-space: normal; max-width: 9.5em; line-height: 1.15; }
  .brand .logo-mark { width: 30px; height: 30px; }
  .unoff, .coin-chip { height: 20px; padding: 0 5px; }
  .tb-right { gap: 8px; }
  .lang button { min-width: 30px; height: 26px; font-size: 12px; padding: 0 6px; }
  .btn { font-size: 15px; padding: 0 16px; }
  .btn.lg { min-height: 48px; font-size: 16px; padding: 0 20px; }
  .btn.sm { font-size: 13.5px; padding: 0 12px; }
  .sec { padding: 0 16px; }
  .sec-head { margin: 52px 0 18px; gap: 10px; }
  .sec-head p { font-size: 14px; }
  .h-sec { font-size: 28px; }
  .mast { font-size: 64px; }
  .sfx { font-size: 36px; }
  .bub { font-size: 14.5px; padding: 10px 14px; border-radius: 14px; }
  .foot .in { padding: 24px 16px 30px; }
  .toast { top: 66px; }
}
@media (max-width: 480px) {
  .brand .bt b { max-width: 7.4em; }
  .social-x { width: 32px; height: 32px; }
  .coin-chip { display: none; }
  /* phones: the language switch is one button that names the OTHER language */
  .lang button[aria-pressed="true"] { display: none; }
  .wallet .wl { display: none; }
  .wallet .wi { display: block; }
  .wallet.btn.sm { min-height: 32px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .rv { opacity: 1; }
}