/* =====================================================================
   base.css — 设计令牌 / reset / 背景 / 外壳布局 / 顶栏 / 底部 Tab
   基准视口 360px，320px 不溢出（SPEC §4.1）
   ===================================================================== */
:root {
  --bg0: #0B1020; --bg1: #141A33;
  --glass: rgba(255, 255, 255, .06); --glass-2: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --p1: #6C5CE7; --p2: #00D2FF;
  --grad: linear-gradient(135deg, #6C5CE7 0%, #00D2FF 100%);
  --grad-gold: linear-gradient(110deg, #C9952A 0%, #FFE38A 30%, #F5B942 55%, #FFF3B0 70%, #D9A72E 100%);
  --gold: #F5B942; --green: #22C55E; --red: #FF5C7A; --blue: #38BDF8;
  --text: #E8ECF8; --muted: #8E97B3; --dim: #5B6480;
  --r: 12px; --r-lg: 16px; --pad: 14px; --btn-h: 42px; --icon: 20px; --tab-h: 56px;
  --top-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --shadow: 0 10px 30px rgba(3, 6, 20, .45);
  --glow: 0 8px 24px rgba(108, 92, 231, .45);
  --spring: cubic-bezier(.2, .9, .3, 1.3);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "DIN Alternate", "Roboto Mono", "Segoe UI", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg0); min-height: 100%; overflow-x: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 60%, #0E1430 100%); }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
.hide { display: none !important; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 背景：细网格 + 光斑 ---------- */
.bg-grid { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .45;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 75%); }
.bg-orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: orb-float 14s ease-in-out infinite alternate; }
.bg-orbs i:nth-child(1) { width: 260px; height: 260px; left: -80px; top: -60px; background: #6C5CE7; }
.bg-orbs i:nth-child(2) { width: 220px; height: 220px; right: -70px; top: 30%; background: #00D2FF; opacity: .3; animation-delay: -5s; }
.bg-orbs i:nth-child(3) { width: 240px; height: 240px; left: 20%; bottom: -100px; background: #F5B942; opacity: .16; animation-delay: -9s; }

/* ---------- 外壳 ---------- */
.shell { position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh; }
.view { min-height: calc(100vh - var(--top-h)); padding: 12px 12px calc(var(--tab-h) + var(--safe-b) + 16px); }
.view.no-tab { padding-bottom: calc(var(--safe-b) + 24px); }
.page { animation: page-in .32s var(--ease) both; }
.page.from-left { animation-name: page-in-left; }
.page.pop { animation-name: page-pop; }

/* ---------- 顶栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 40; padding-top: var(--safe-t); background: rgba(11, 16, 32, .72); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.topbar-in { height: var(--top-h); display: flex; align-items: center; gap: 8px; padding: 0 12px; max-width: 480px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.brand-logo { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; flex: none; box-shadow: 0 4px 14px rgba(108, 92, 231, .45); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-text b { font-size: 17px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(90deg, #fff, #BFD4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-text small { font-size: 10px; color: var(--muted); letter-spacing: 1px; margin-top: 2px; }
.topbar.sub .brand { display: none; }
.topbar-title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 8px; min-width: 40px; justify-content: flex-end; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--text); transition: background .2s, transform .18s var(--spring); }
.icon-btn:active { background: var(--glass-2); transform: scale(.92); }
.icon-btn svg { width: var(--icon); height: var(--icon); }
.back-btn { margin-left: -8px; }
.topbar.sub .topbar-right { width: 40px; }

/* ---------- 底部 Tab ---------- */
.tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; width: 100%; max-width: 480px; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; background: rgba(13, 18, 38, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--line); transition: transform .3s var(--ease), opacity .3s; }
.tabbar.hide-tab { transform: translate(-50%, 110%); opacity: 0; pointer-events: none; }
.tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; overflow: hidden; transition: color .25s; }
.tab-ic { width: 24px; height: 24px; display: grid; place-items: center; transition: transform .3s var(--spring); }
.tab-ic svg { width: 22px; height: 22px; }
.tab.on { color: #fff; }
.tab.on .tab-ic { transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 0 8px rgba(0, 210, 255, .8)); }
.tab.on .tab-ic svg { stroke: #9FE8FF; }
.tab-glow { position: absolute; top: 0; left: 0; width: 33.333%; height: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(0, 210, 255, .9); transition: left .35s var(--spring); }
.tab-glow::after { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 28px; background: radial-gradient(ellipse at top, rgba(108, 92, 231, .35), transparent 70%); }

/* ---------- 通用工具类 ---------- */
.flex { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; }
.mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.text-c { text-align: center; } .text-r { text-align: right; }
.muted { color: var(--muted); } .dim { color: var(--dim); } .gold { color: var(--gold); } .green { color: var(--green); } .red { color: var(--red); } .blue { color: var(--blue); }
.small { font-size: 12px; } .xs { font-size: 11px; } .bold { font-weight: 700; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: .2px; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.break { word-break: break-all; }
.pos { color: var(--gold); } .neg { color: var(--red); } .zero { color: var(--muted); }
h1, h2, h3 { font-weight: 700; line-height: 1.3; }
h1 { font-size: 20px; } h2 { font-size: 18px; } h3 { font-size: 15px; }

/* ---------- 320px 紧凑 ---------- */
@media (max-width: 340px) {
  :root { --pad: 12px; }
  .view { padding-left: 10px; padding-right: 10px; }
  .brand-text small { display: none; }
}