/* =====================================================================
   鸿运彩票 — 设计系统 app.css
   移动优先：默认样式面向手机，min-width 断点逐级增强
   令牌集中管理；改主题只改 :root
   ===================================================================== */

/* ---------- 1. Design Tokens（主题可切换） ---------- */
/* 中性色 = 亮色底；[data-mode="dark"] 覆盖为暗色底 */
:root {
  /* 波色（与开奖源核对一致，不随主题变） */
  --ball-red: #e03b45;
  --ball-blue: #1d78d4;
  --ball-green: #0f9f4f;

  /* 语义 */
  --win: #0f8a46;
  --win-soft: #e9f6ee;
  --lose: #c8383d;
  --lose-soft: #fbecec;
  --warn: #b4700f;
  --warn-soft: #fdf3e2;

  /* 中性 */
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-3: #f1f1ef;
  --line: #e8e8e4;
  --line-2: #dcdcd6;
  --text: #121212;
  --text-2: #4f4f4a;
  --text-3: #74746e;
  --text-inv: #ffffff;

  /* 主题色（由 data-theme 覆盖） */
  --brand: #1b1b1f;
  --brand-600: #000000;
  --brand-700: #000000;
  --brand-50: #f3f3f1;
  --brand-100: #e8e8e4;
  --on-brand: #ffffff;
  --gold: #9a7b3c;
  --gold-soft: #f8f3e8;
  --hero-bg: #17171a;
  --hero-fg: #ffffff;
  --hero-fg-soft: rgba(255, 255, 255, .7);
  --hero-tile: rgba(255, 255, 255, .09);
  --hero-tile-line: rgba(255, 255, 255, .14);

  /* 尺寸（直角设计：卡片/输入/按钮全部直角，仅圆形元素保留 r-full） */
  --r-xs: 0px;
  --r-sm: 0px;
  --r: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-full: 0px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 阴影（克制：扁平优先，只用 1px 层） */
  --sh-1: 0 1px 2px rgba(17, 17, 17, .05);
  --sh-2: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 24px -18px rgba(17, 17, 17, .25);
  --sh-3: 0 20px 40px -24px rgba(17, 17, 17, .3);
  --sh-brand: 0 6px 16px -12px rgba(17, 17, 17, .5);

  /* 字号 */
  --fs-xxs: 12px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;

  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --dur: .18s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* 暗色底 */
:root[data-mode="dark"] {
  --bg: #0c0c0d;
  --surface: #151516;
  --surface-2: #191a1b;
  --surface-3: #212224;
  --line: #26262a;
  --line-2: #34343a;
  --text: #efefec;
  --text-2: #b8b8b2;
  --text-3: #92928b;
  --win: #45bd7c;
  --win-soft: #12251a;
  --lose: #e77478;
  --lose-soft: #2a1415;
  --warn: #dda43b;
  --warn-soft: #2a2213;
  --gold: #c9a45e;
  --gold-soft: #211c12;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 2px 10px -6px rgba(0, 0, 0, .7);
  --sh-3: 0 24px 48px -28px rgba(0, 0, 0, .85);
  --sh-brand: none;
}

/* 主题 · 墨黑（默认） */
:root,
:root[data-theme="ink"] {
  --brand: #1b1b1f;
  --brand-600: #000000;
  --brand-700: #000000;
  --brand-50: #f3f3f1;
  --brand-100: #e8e8e4;
  --on-brand: #ffffff;
  --gold: #9a7b3c;
  --gold-soft: #f8f3e8;
  --hero-bg: #17171a;
}

/* 主题 · 红金 */
:root[data-theme="red-gold"] {
  --brand: #a5251d;
  --brand-600: #8c1c16;
  --brand-700: #6f1510;
  --brand-50: #fbf0ee;
  --brand-100: #f7e0dd;
  --on-brand: #ffffff;
  --gold: #b28b3a;
  --gold-soft: #faf3e3;
  --hero-bg: #43100e;
}

/* 主题 · 靛蓝（保留可选） */
:root[data-theme="indigo"] {
  --brand: #4f46e5;
  --brand-600: #4338ca;
  --brand-700: #3730a3;
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --on-brand: #ffffff;
  --gold: #c8963e;
  --gold-soft: #fdf6e7;
  --hero-bg: #2f2a94;
}

/* 主题 · 小清新（浅薄荷绿 + 白卡，hero 也走浅色） */
:root[data-theme="fresh"] {
  --brand: #2f9e79;
  --brand-600: #278465;
  --brand-700: #1f6b52;
  --brand-50: #eaf7f1;
  --brand-100: #d7f0e5;
  --on-brand: #ffffff;
  --gold: #c99a45;
  --gold-soft: #fbf4e6;
  --bg: #f6faf8;
  --surface: #ffffff;
  --surface-2: #f3f9f6;
  --surface-3: #e9f3ee;
  --line: #dfece6;
  --line-2: #cfe2d9;
  --text: #16241f;
  --text-2: #52645d;
  --text-3: #86958f;
  --win: #14874f;
  --lose: #c94a4a;
  --hero-bg: #e8f6ef;
  --hero-fg: #123a2c;
  --hero-fg-soft: rgba(18, 58, 44, .62);
  --hero-tile: rgba(255, 255, 255, .72);
  --hero-tile-line: rgba(18, 58, 44, .1);
}

/* 暗色底下的主题微调 */
:root[data-mode="dark"][data-theme="fresh"] {
  --brand: #4fc08d;
  --brand-600: #6fd3a4;
  --brand-700: #8ee0ba;
  --brand-50: #14261f;
  --brand-100: #1b3329;
  --on-brand: #0c1a15;
  --gold: #d8b06a;
  --gold-soft: #211c12;
  --bg: #0a1210;
  --surface: #101a17;
  --surface-2: #14211d;
  --surface-3: #1a2a24;
  --line: #23362f;
  --line-2: #2d443b;
  --text: #e6f0ea;
  --text-2: #a2b6ad;
  --text-3: #74887f;
  --hero-bg: #12241e;
  --hero-fg: #e6f0ea;
  --hero-fg-soft: rgba(230, 240, 234, .66);
  --hero-tile: rgba(255, 255, 255, .06);
  --hero-tile-line: rgba(255, 255, 255, .1);
}

/* 暗色底下的主题微调 */
:root[data-mode="dark"][data-theme="red-gold"] {
  --brand: #c43a30;
  --brand-600: #a52a22;
  --brand-700: #8c1c16;
  --brand-50: #2a1614;
  --brand-100: #3a1c19;
  --gold: #d8b06a;
  --gold-soft: #241d12;
  --hero-bg: #350d0b;
}

:root[data-mode="dark"][data-theme="indigo"] {
  --brand: #818cf8;
  --brand-600: #a5b4fc;
  --brand-700: #c7d2fe;
  --brand-50: #1c2033;
  --brand-100: #232a45;
  --hero-bg: #1e1b4b;
}

:root[data-mode="dark"][data-theme="ink"] {
  --brand: #f2f2ee;
  --brand-600: #ffffff;
  --brand-700: #ffffff;
  --brand-50: #1e1e20;
  --brand-100: #2a2a2d;
  --on-brand: #111112;
  --gold: #c9a45e;
  --gold-soft: #211c12;
  --hero-bg: #1c1c1f;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  /* 注意：不要加 letter-spacing / -webkit-font-smoothing: antialiased /
     text-rendering: optimizeSpeed —— 这三项都会在 Windows 上让中文发虚 */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-100); }

/* 隐藏滚动条但可滚动（号码条等） */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- 3. 布局骨架 ---------- */
.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px);
}

.container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.main { flex: 1; padding-top: var(--sp-4); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-3); }

/* ---------- 4. 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--safe-t);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  max-width: 720px;
  margin: 0 auto;
  height: 54px;
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -.01em;
  color: var(--text);
  min-width: 0;
}

.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-sm);
  font-weight: 800;
  flex: 0 0 auto;
}

.brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__spacer { flex: 1; }

.topbar__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: 0;
  cursor: pointer;
}

/* 未读角标 */
.topbar__action--badge { position: relative; padding: 0; width: 32px; justify-content: center; }

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--lose);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--surface);
}

.badge[hidden] { display: none; }

.topbar__balance {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* 窄屏顶栏收缩：默认只留 LOGO、余额、站内信、主题，其余入口交给底部导航 */
@media (max-width: 480px) {
  .brand__name { display: none; }
  .topbar__balance { padding: 4px 9px; }
  .topbar__balance b { font-size: var(--fs-xs); }
  .topbar__action:not(.topbar__action--badge) { display: none; }
  .topbar__inner { gap: var(--sp-2); }
}
[data-theme="dark"] .topbar__balance { color: var(--brand-600); }

.topbar__balance b {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---------- 5. 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-4);
}

.card--flush { padding: 0; overflow: hidden; }
.card--soft { background: var(--surface-2); box-shadow: none; }

/* 卡片头部（配 card--flush 使用） */
.card__head {
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.card__head .section-head { margin-bottom: 0; }

.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.section-head h2 {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
}

.section-head__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: 500;
}

.section-head__more {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ---------- 6. 余额主卡 ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  color: var(--hero-fg);
  background: var(--hero-bg);
  box-shadow: var(--sh-1);
}

.hero__label {
  font-size: var(--fs-xs);
  color: var(--hero-fg-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.hero__amount {
  margin-top: 6px;
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hero__amount small {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--hero-fg-soft);
}

.hero__meta {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-5);
  position: relative;
  z-index: 1;
}

.hero__meta div span {
  display: block;
  font-size: var(--fs-xxs);
  color: var(--hero-fg-soft);
  margin-bottom: 2px;
}

.hero__meta div b {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero__actions {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}

.hero__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: var(--r-sm);
  background: var(--hero-tile);
  border: 1px solid var(--hero-tile-line);
  color: var(--hero-fg);
  font-size: var(--fs-xxs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.hero__action:active { transform: scale(.98); filter: brightness(.96); }
.hero__action svg { width: 20px; height: 20px; }

/* ---------- 7. 统计卡 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-3);
  box-shadow: var(--sh-1);
}

.stat__label {
  font-size: var(--fs-xxs);
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}

.stat__value {
  margin-top: 4px;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat__value--win { color: var(--win); }
.stat__value--lose { color: var(--lose); }

/* ---------- 8. 开奖号码 ---------- */
.draw {
  display: flex;
  flex-direction: column;
  gap:  2px;
}

.draw + .draw {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }

.draw__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.draw__title {
  font-size: var(--fs-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.draw__period {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.draw__time {
  margin-left: auto;
  font-size: var(--fs-xxs);
  color: var(--text-3);
}

/* 号码条：H5 单行横向滚动，永不换行。
   注意 padding-top 必须 ≥ 特码角标的溢出量（-6px）+ 金环 4px，
   否则 overflow 会把「特」徽标和金环裁掉。 */
.balls {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px 0 7px;
  justify-content: safe center;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.balls__gap {
  flex: 0 0 auto;
  height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--text-3);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 0 2px;
}

.ball {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  scroll-snap-align: center;
  position: relative;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -3px 8px rgba(0, 0, 0, .26),
    0 1px 2px rgba(0, 0, 0, .10);
}

.ball--red { background: linear-gradient(180deg, #f4685f 0%, #e0443c 52%, #b82e27 100%); }
.ball--blue { background: linear-gradient(180deg, #4a95ee 0%, #2f74d0 52%, #235a9f 100%); }
.ball--green { background: linear-gradient(180deg, #34c274 0%, #179b52 52%, #0f733c 100%); }

/* 特码：金色环 + 角标 */
.ball--special {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -3px 8px rgba(0, 0, 0, .26),
    0 0 0 2px var(--surface),
    0 0 0 3px var(--gold);
}

.ball--special::after {
  content: "特";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
  border: 1.5px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

/* 号码下方注释（生肖/五行）：小字必须够大够深，否则看着发虚 */
.ball-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ball-wrap__meta {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.15;
  letter-spacing: 0;
}

.ball-wrap__meta b { color: var(--text); font-weight: 700; }

/* 小号号码（宫格/列表复用） */
.ball-sm {
  width: 34px;
  height: 34px;
  font-size: var(--fs-sm);
  border-radius: 50%;
}

/* ---------- 9. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  user-select: none;
  white-space: nowrap;
}

.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.btn--primary:active { background: var(--brand-600); border-color: var(--brand-600); }

.btn--soft {
  background: var(--brand-50);
  border-color: transparent;
  color: var(--brand-700);
}
[data-theme="dark"] .btn--soft { color: var(--brand-600); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }

.btn--danger { background: var(--lose-soft); border-color: transparent; color: var(--lose); }

.btn--block { width: 100%; }
.btn--sm { height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--xs { height: 28px; padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn--icon { width: 44px; padding: 0; }

/* ---------- 10. 徽标 / 状态 ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-xxs);
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-2);
  white-space: nowrap;
}

.pill--win { background: var(--win-soft); color: var(--win); }
.pill--lose { background: var(--lose-soft); color: var(--lose); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--brand { background: var(--brand-50); color: var(--brand-700); }
[data-theme="dark"] .pill--brand { color: var(--brand-600); }
.pill--gold { background: var(--gold-soft); color: #9a6f1f; }
[data-theme="dark"] .pill--gold { background: #2b2415; color: var(--gold); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.dot--live {
  background: var(--win);
  box-shadow: 0 0 0 0 rgba(15, 159, 79, .5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(15, 159, 79, .45); }
  70% { box-shadow: 0 0 0 7px rgba(15, 159, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 159, 79, 0); }
}

/* ---------- 11. 列表 / 明细 ---------- */
.list { display: flex; flex-direction: column; }

.list__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.list__item:first-child { border-top: 0; }
.list__item--link { cursor: pointer; }
.list__item--link:active { background: var(--surface-2); }

.list__main { flex: 1; min-width: 0; }

.list__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list__sub {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.list__tail {
  text-align: right;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.list__amount { font-size: var(--fs-sm); font-weight: 700; }
.list__amount--win { color: var(--win); }
.list__amount--lose { color: var(--lose); }

/* 键值列表：两列网格，dt/dd 成对自动成行 */
.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-4);
  margin: 0;
}

.kv dt {
  color: var(--text-3);
  font-size: var(--fs-sm);
  padding: 9px 0;
  border-top: 1px dashed var(--line);
}

.kv dd {
  margin: 0;
  padding: 9px 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border-top: 1px dashed var(--line);
  overflow-wrap: anywhere;
}

.kv dt:first-of-type,
.kv dd:first-of-type { border-top: 0; }

/* ---------- 12. 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.input, .select, .textarea {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md); /* 16px：避免 iOS 聚焦缩放 */
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}

.textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--text-3); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.input--lg { height: 48px; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

.hint { font-size: var(--fs-xs); color: var(--text-3); }
.hint--warn { color: var(--warn); }
.error-text { font-size: var(--fs-xs); color: var(--lose); }

/* 分段控件 */
.segmented {
  display: flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-3);
  border-radius: var(--r-full);
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

.segmented__item {
  flex: 1 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.segmented__item[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-1);
}

/* 多项筛选（≥4 项）用换行标签云，避免单行被裁切且没有溢出提示 */
.segmented--wrap {
  flex-wrap: wrap;
  overflow: visible;
  background: transparent;
  padding: 0;
  gap: 6px;
  border-radius: 0;
}

.segmented--wrap .segmented__item {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  box-shadow: none;
}

.segmented--wrap .segmented__item[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  box-shadow: none;
}

/* ---------- 13. 宫格（选号） ---------- */
.grid {
  display: grid;
  gap: 6px;
}

.grid--zodiac { grid-template-columns: repeat(6, 1fr); }
.grid--number { grid-template-columns: repeat(7, 1fr); }

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px;
  min-height: 52px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  user-select: none;
}

.cell__no {
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.cell__sub { font-size: 10px; color: var(--text-3); line-height: 1.1; letter-spacing: 0; }

.cell[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.cell[aria-pressed="true"] .cell__no { color: var(--brand-700); }
[data-theme="dark"] .cell[aria-pressed="true"] .cell__no { color: var(--brand-600); }

.cell--red .cell__no { color: var(--ball-red); }
.cell--blue .cell__no { color: var(--ball-blue); }
.cell--green .cell__no { color: var(--ball-green); }

.cell[disabled] { opacity: .4; pointer-events: none; }

.cell--sm { min-height: 40px; padding: 4px 0; }
.cell--sm .cell__no { font-size: var(--fs-xs); }

/* ---------- 14. 底部导航（H5） ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item[aria-current="page"] { color: var(--brand); }

.tabbar__item--cta { position: relative; }

.tabbar__item--cta .tabbar__cta {
  width: 46px;
  height: 46px;
  margin-top: -18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  border: 3px solid var(--surface);
}

/* ---------- 15. 弹层 / Toast ---------- */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(13, 17, 23, .45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.sheet-mask[data-open="true"] { opacity: 1; pointer-events: auto; }

.sheet {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + var(--safe-b));
  transform: translateY(16px);
  transition: transform .24s var(--ease);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--sh-3);
}

.sheet-mask[data-open="true"] .sheet { transform: translateY(0); }

.sheet__handle {
  width: 38px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--line-2);
  margin: 0 auto var(--sp-3);
}

.sheet__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--sp-3);
}

.sheet__actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
}

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: rgba(13, 17, 23, .92);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: var(--sh-3);
  animation: toast-in .22s var(--ease);
}

.toast--ok { background: rgba(14, 122, 62, .95); }
.toast--err { background: rgba(191, 40, 46, .95); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- 16. 空态 / 骨架屏 ---------- */
.empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-3);
}

.empty__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-xs);
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text-3);
}

.empty__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.empty__desc { font-size: var(--fs-xs); margin-top: 4px; }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--line) 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ---------- 17. 表格（桌面）/ 数据卡（H5） ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { min-width: 620px; font-size: var(--fs-sm); }

.table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.table tr:last-child td { border-bottom: 0; }
.table tbody tr:active { background: var(--surface-2); }

/* H5：表格转卡片 */
@media (max-width: 767px) {
  .table-wrap--cards .table { min-width: 0; }
  .table-wrap--cards .table thead { display: none; }
  .table-wrap--cards .table,
  .table-wrap--cards .table tbody,
  .table-wrap--cards .table tr,
  .table-wrap--cards .table td { display: block; width: 100%; }

  .table-wrap--cards .table tr {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 6px 4px;
    margin-bottom: 10px;
    background: var(--surface);
    box-shadow: var(--sh-1);
  }

  .table-wrap--cards .table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    border: 0;
    padding: 6px 10px;
    white-space: normal;
    text-align: right;
  }

  .table-wrap--cards .table td::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 500;
    flex: 0 0 auto;
  }
}

/* ---------- 18. 分页 ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-4) 0;
}

.pager__btn, .pager__num {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pager__num[aria-current="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pager__btn[disabled] { opacity: .45; pointer-events: none; }
.pager__dots { color: var(--text-3); padding: 0 2px; }
.pager__jump { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }

.pager__jump input {
  width: 54px;
  height: 36px;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
}

/* H5：只留上一页/当前页/下一页 */
@media (max-width: 767px) {
  /* 手机上也让页码可点：只隐藏省略号和跳页输入，页码缩小排成一行 */
  .pager {
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px 0;
  }
  .pager::-webkit-scrollbar { display: none; }

  .pager__dots,
  .pager__jump { display: none; }

  .pager__btn,
  .pager__num {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: var(--fs-sm);
    flex: 0 0 auto;
  }

  .pager__btn { padding: 0 10px; }
}

/* ---------- 19. 工具类 ---------- */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.col { flex-direction: column; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.right { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-md { font-size: var(--fs-md); }
.t-lg { font-size: var(--fs-lg); }
.t-2xl { font-size: var(--fs-2xl); }
.bold { font-weight: 700; }
.semibold { font-weight: 600; }
.c-2 { color: var(--text-2); }
.c-3 { color: var(--text-3); }
.c-win { color: var(--win); }
.c-lose { color: var(--lose); }
.c-brand { color: var(--brand); }
.c-gold { color: var(--gold); }
.nowrap { white-space: nowrap; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.hide { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.divider { height: 1px; background: var(--line); margin: var(--sp-3) 0; }

/* 小屏：压缩号码尺寸，让 7 个号码 + 加号尽量一屏放下（仍保留横向滚动兜底） */
@media (max-width: 430px) {
  .balls { gap: 5px; }
  .ball { width: 36px; height: 36px; font-size: 15px; }
  .balls__gap { font-size: 12px; padding: 0; }
  .card { padding: var(--sp-3) var(--sp-4); }
  .card__head { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
  .stat { padding: 10px; }
  .stat__value { font-size: var(--fs-md); }
}

@media (max-width: 360px) {
  .balls { gap: 4px; }
  .ball { width: 34px; height: 34px; font-size: 14px; }
  .ball-wrap__meta { font-size: 10px; }
  .cell { min-height: 46px; }
}

/* ---------- 20. 桌面增强 ---------- */
@media (min-width: 768px) {
  .container { max-width: 860px; padding: 0 var(--sp-6); }
  .topbar__inner { max-width: 860px; padding: 0 var(--sp-6); height: 60px; }
  .main { padding-top: var(--sp-6); }
  .card { padding: var(--sp-5); }
  .card__head { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
  .ball { width: 46px; height: 46px; font-size: var(--fs-lg); }
  .hero { padding: var(--sp-6); }
  .hero__amount { font-size: 40px; }
  .hero__actions { max-width: 560px; }
  .stat__value { font-size: var(--fs-xl); }
  .grid { gap: 8px; }
  .cell { min-height: 58px; }
  .app { padding-bottom: var(--sp-8); }
  .tabbar { display: none; }
  .sheet-mask { align-items: center; }
  .sheet {
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    max-width: 480px;
    transform: scale(.96);
  }
  .sheet-mask[data-open="true"] .sheet { transform: scale(1); }
  .sheet__handle { display: none; }
  .toast-wrap { bottom: 24px; }
}

@media (min-width: 1024px) {
  .container { max-width: 1080px; }
  .topbar__inner { max-width: 1080px; }
  .layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-5);
    align-items: start;
  }
}

/* ---------- 21. 登录 / 认证页 ---------- */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + var(--safe-b));
  background:
    radial-gradient(120% 70% at 50% -10%, var(--brand-50) 0%, transparent 60%),
    var(--bg);
}

.auth__card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--sh-2);
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  text-align: center;
}

.auth__mark {
  width: 54px;
  height: 54px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-xl);
  font-weight: 800;
}

.auth__title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.auth__sub { font-size: var(--fs-sm); color: var(--text-3); }

.auth__demo {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.7;
}

.auth__demo b { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- 22. 公告条 ---------- */
.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r);
  background: var(--gold-soft);
  color: #8a6418;
  font-size: var(--fs-xs);
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
[data-theme="dark"] .notice { background: #2b2415; color: var(--gold); border-color: #40341c; }

.notice svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ---------- 23. 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 24. 桌面侧边导航（≥1024） ---------- */
.shell { display: block; }
.sidenav { display: none; }

@media (min-width: 1024px) {
  .topbar__inner, .shell { max-width: 1180px; }

  .shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-6);
    margin: 0 auto;
    padding: 0 var(--sp-6);
    align-items: start;
  }

  .main { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
  .main > .container { max-width: none; padding: 0; }

  .sidenav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 84px;
    padding: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
  }

  .sidenav__title {
    padding: var(--sp-2) var(--sp-3) 6px;
    font-size: var(--fs-xxs);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--text-3);
    text-transform: uppercase;
  }

  .sidenav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .sidenav__item svg { width: 18px; height: 18px; opacity: .75; }

  .sidenav__item:hover { background: var(--surface-2); color: var(--text); }

  .sidenav__item[aria-current="page"] {
    background: var(--brand-50);
    color: var(--brand-700);
  }

  [data-mode="dark"] .sidenav__item[aria-current="page"] { color: var(--text); }

  .sidenav__sep { height: 1px; background: var(--line); margin: var(--sp-2) 6px; }
}

/* ---------- 25. 主题选择器 ---------- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}

@media (min-width: 480px) {
  .theme-grid { grid-template-columns: repeat(4, 1fr); }
}

.theme-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}

.theme-opt[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  color: var(--text);
}

.theme-opt__swatch {
  width: 100%;
  height: 32px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(0, 0, 0, .07);
}

.theme-opt__swatch i { flex: 1; }

/* 顶栏图标按钮 */
.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}

.icon-btn:active { background: var(--surface-2); }

/* ---------- 26. 投注页 ---------- */
.amount-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.amount-row .input { flex: 1; min-width: 0; }

.step-btn {
  width: 46px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.step-btn:active { background: var(--surface-3); }

.center-text { text-align: center; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.chip:active { background: var(--surface-3); }

.chip--hint {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  color: #8a6418;
  background: var(--gold-soft);
}
[data-mode="dark"] .chip--hint { color: var(--gold); }

/* 底部下单条 */
.betbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  z-index: 45;
  padding: 10px var(--sp-4);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.betbar__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

body.has-betbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 74px); }

.bet-head { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

@media (min-width: 768px) {
  .betbar {
    position: static;
    max-width: none;
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.has-betbar { padding-bottom: 0; }
}

/* ---------- 27. 实时更新高亮 ---------- */
[data-live-balls] {
  position: relative;
  border-radius: var(--r-sm);
}

.live-flash {
  animation: live-flash 1.4s var(--ease);
}

@keyframes live-flash {
  0% { background: color-mix(in srgb, var(--win) 16%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--win) 10%, transparent); }
  100% { background: transparent; box-shadow: none; }
}

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xxs);
  color: var(--text-3);
  font-weight: 500;
}

.live-tag .dot { background: var(--win); }

/* =========================================================
   文本垂直居中：定高控件统一 flex 居中
   （<a> 与 <button> 表现一致，修掉 segmented 里 <a> 贴顶的问题）
   ========================================================= */
.segmented__item,
.segmented a,
.chip,
.tag,
.badge,
.theme-chip,
.btn--xs,
.topbar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.segmented__item,
.segmented a {
  text-decoration: none;
  height: 34px;          /* 覆盖 flex 拉伸导致的错位 */
  min-height: 34px;
  box-sizing: border-box;
}

.segmented--wrap .segmented__item,
.segmented--wrap a {
  height: 32px;
  min-height: 32px;
}

.pill {
  justify-content: center;
  line-height: 1;
}

/* 表格内的小按钮不因行高变化而错位 */
.admin-table .btn--xs {
  height: 26px;
  line-height: 1;
}
/* 工作台快捷入口：列数随数量自适应，5 个也能一行放下 */
.hero__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--sp-2);
}

.hero__action { min-width: 0; }

.hero__action span {
  font-size: var(--fs-xs);
  white-space: nowrap;
}
/* 认证页底部提示居中 */
.auth-foot { text-align: center; }
.auth-foot a { color: var(--brand-700); font-weight: 600; text-decoration: none; }

/* 自定义确认框（替代会被浏览器拦截的 window.confirm） */
.app-confirm { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.app-confirm__mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.app-confirm__box {
  position: relative;
  width: min(320px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
  box-shadow: var(--sh-2);
}
.app-confirm__box p { margin: 0 0 16px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text); }
.app-confirm__btns { display: flex; gap: 8px; justify-content: flex-end; }
/* 列表项也可用 <button>：清掉浏览器默认按钮样式，保持成整行可点 */
button.list__item,
a.list__item {
  width: 100%;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  appearance: none;
  cursor: pointer;
}
button.list__item:first-child,
a.list__item:first-child { border-top: 0; }
button.list__item:focus-visible,
a.list__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* 笔记列表：每笔之间留一点间隔，做成独立卡片 */
.notes-list { display: flex; flex-direction: column; gap: 8px; }

.notes-list .list__item {
  border: 1px solid var(--line);
  background: var(--surface);
}

.notes-list .list__item:first-child { border-top: 1px solid var(--line); }
/* 分段控件里放 radio：隐藏原生圆点，选中项高亮 */
.segmented__item { position: relative; cursor: pointer; }
.segmented__item input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segmented__item:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
}
.segmented__item:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
/* 笔记卡片里的开奖号码 + 生肖，命中用户选号的标红 */
.draw-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
  align-items: flex-start;
}

.draw-mini__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.2;
  min-width: 0;
}

.draw-mini__item b {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.draw-mini__item i {
  font-style: normal;
  font-size: 10px;
  color: var(--text-3);
}

.draw-mini__item em {
  position: absolute;
  top: -6px;
  right: -8px;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.4;
}

.draw-mini__item.is-hit b,
.draw-mini__item.is-hit i {
  color: var(--lose);
  font-weight: 800;
}
/* 选号里命中特码的号码标红 */
.bet-lines__nums .is-hit { color: var(--lose); font-weight: 800; }

/* 记一笔：默认折叠，点标题展开 */
.note-form { padding: 0; }

.note-form__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.note-form__head::-webkit-details-marker { display: none; }

.note-form__title {
  font-size: var(--fs-base);
  font-weight: 800;
}

.note-form__sub {
  font-size: var(--fs-xs);
  color: var(--text-3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-form__chev {
  display: inline-flex;
  color: var(--text-3);
  transition: transform .18s ease;
}

.note-form[open] .note-form__chev { transform: rotate(90deg); }

.note-form__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* 折叠时把「添加笔记」按钮留在标题栏右侧 */
.note-form:not([open]) .note-form__head { border-bottom: 0; }
/* 生肖/连肖的开奖行：单字生肖左对齐，与上方选号行起点一致 */
.draw-mini--zodiac { gap: 12px; }
.draw-mini--picks { padding-top: 0; }
.draw-mini--zodiac .draw-mini__item { min-width: 0; align-items: center; }
/* 输入框与按钮并排：强制等高，避免按钮比输入框矮一截 */
.field-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.field-row > .input,
.field-row > .select,
.field-row > .btn {
  height: 40px;
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

.field-row > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .field-row > .input,
  .field-row > .select,
  .field-row > .btn { height: 38px; min-height: 38px; }
}
/* 手动复制弹窗里的文本框 */
.app-confirm__box textarea {
  width: 100%;
  min-height: 96px;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  resize: vertical;
}
/* 笔记列表：与投注卡片同一套外观，外层不再套卡片 */
.notes-section { display: flex; flex-direction: column; gap: 10px; }

/* 列表标题允许换行：站内信/长文案不再被截断 */
.list__title--wrap {
  flex-wrap: wrap;
  align-items: flex-start;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  row-gap: 4px;
  line-height: 1.45;
}
.list__title--wrap > .pill { flex: 0 0 auto; }
.list__title--wrap .list__title__text {
  flex: 1 1 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.list__title--wrap .list__title__text--inline { flex: 1 1 auto; }

/* 卡片头部的说明文字：与标题、操作按钮保持呼吸 */
.admin-card__head > .head-hint,
.admin-card__head > .t-xs.c-3 {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
  margin-right: var(--sp-2);
  max-width: 46ch;
}
.admin-card__head > .btn,
.admin-card__head > form { flex: 0 0 auto; }

/* =====================================================================
   会员端控件收紧（2026-10）：桌面 14px / 40px，手机保持 16px 防缩放
   ===================================================================== */
.input, .select, .textarea {
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
}
.textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.55; }
.select { padding-right: 30px; background-position: right 10px center; }

.field { gap: 5px; }
.field__label { font-size: 12.5px; }
.hint { font-size: 11.5px; line-height: 1.55; }

.btn { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn--xs { height: 30px; padding: 0 10px; font-size: 12px; }
.btn--block { height: 44px; font-size: 15px; }

/* 金额输入框（充值/投注）单独保留大字号，但高度略收 */
.input--lg { height: 46px; font-size: 18px; }

/* 手机端：保持 16px 字号，避免 iOS 聚焦自动放大 */
@media (max-width: 640px) {
  .input, .select, .textarea { height: 44px; font-size: 16px; }
  .field__label { font-size: 13px; }
  .hint { font-size: 12px; }
  .btn { height: 42px; font-size: 14px; }
  .btn--sm { height: 34px; font-size: 13px; }
}

/* 区块标题不被说明文字挤断行 */
.section-head h2 { flex: 0 0 auto; white-space: nowrap; }
.section-head { align-items: baseline; }
.section-head__sub { flex: 1 1 auto; min-width: 0; }

/* 卡片头部：说明文字与操作按钮之间留白 */
.card__head .section-head { gap: var(--sp-2); }
.card__head .section-head__sub { font-size: 11.5px; color: var(--text-3); }

/* =====================================================================
   会员端精细度再收一档（2026-10）
   ===================================================================== */
.segmented__item { height: 32px; padding: 0 12px; font-size: 13px; }
.segmented--wrap .segmented__item { height: 30px; padding: 0 11px; }

.note-form__head { padding: 12px 14px; }
.note-form__body { padding: 12px 14px 14px; }
.note-form__title { font-size: var(--fs-sm); }

.field + .field.mt-3,
.field.mt-3 + .field.mt-3 { margin-top: 12px; }

@media (max-width: 640px) {
  .input, .select, .textarea { height: 40px; padding: 0 10px; font-size: 16px; }
  .textarea { padding: 8px 10px; }
  .card { padding: 14px; }
  .note-form__body { padding: 12px 14px 14px; }
  .segmented__item { height: 30px; padding: 0 10px; font-size: 13px; }
  .field__label { font-size: 12.5px; }
  .hint { font-size: 11px; }
  .btn { height: 40px; }
}

/* 桌面：区块间距紧凑一点 */
@media (min-width: 641px) {
  .stack > .card + .card { margin-top: 10px; }
}

/* =====================================================================
   按钮与步进器精致化（2026-10）
   ===================================================================== */

/* 主/次按钮：更薄的描边、更紧凑的内边距、明确的交互反馈 */
.btn {
  font-weight: 600;
  letter-spacing: .2px;
  padding: 0 14px;
  border-color: var(--line-2);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn:active { background: var(--surface-3); }
.btn--primary { border-color: transparent; }
.btn--primary:hover { filter: brightness(1.15); border-color: transparent; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.2); }

/* 小按钮：推荐方案、批量操作等列表内的按钮 */
.btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn--xs { height: 26px; padding: 0 9px; font-size: 12px; }

/* 金额步进器：方框与输入框等高，符号更细 */
.amount-row { gap: 6px; }
.step-btn {
  width: 38px;
  height: 40px;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-2);
  border-color: var(--line-2);
}
.step-btn:hover { background: var(--surface-2); color: var(--text); }
.step-btn:active { background: var(--surface-3); }
.amount-row .input--lg { height: 40px; font-size: 17px; }

/* 快捷金额 */
.chip {
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
  border-color: var(--line-2);
}
.chip:hover { border-color: var(--text-3); }
.chip--hint { font-size: 12px; }

/* 推荐方案卡片里的按钮成对出现，宽度一致 */
.rec-card .btn, .rec-actions .btn { min-width: 68px; }

@media (max-width: 640px) {
  .btn { padding: 0 13px; }
  .btn--sm { height: 32px; padding: 0 11px; }
  .btn--xs { height: 28px; }
  .step-btn { width: 42px; height: 40px; }
  .chip { height: 30px; }
}

/* 底部投注栏：按钮不再占满，收成常规尺寸 */
.betbar { padding: 8px var(--sp-4); }
.betbar__inner { gap: 8px; }
.betbar .btn {
  height: 38px;
  padding: 0 14px;
  font-size: 13.5px;
  flex: 0 0 auto;
}
.betbar .btn--primary { padding: 0 16px; }
.betbar .t-lg { font-size: 16px; }
.betbar .t-xs { font-size: 11px; }
body.has-betbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 64px); }

@media (max-width: 640px) {
  .betbar { padding: 7px 12px; }
  .betbar .btn { height: 36px; padding: 0 12px; font-size: 13px; }
  .betbar .btn--primary { padding: 0 14px; }
  .betbar .t-lg { font-size: 15px; }
  body.has-betbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 62px); }
}

/* =====================================================================
   按钮悬浮态修正（2026-10）：带底色的变体不再被 .btn:hover 刷白
   ===================================================================== */
.btn:hover { background: var(--surface-2); border-color: var(--text-3); }

/* 实心主按钮：只提亮，不改背景，保证白字可见 */
.btn--primary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand, #fff);
  filter: brightness(1.12);
}
.btn--primary:active { filter: brightness(.95); }

/* 危险按钮（浅底红字 / 实心红底两种主题都安全） */
.btn--danger:hover {
  background: var(--lose-soft);
  border-color: transparent;
  color: var(--lose);
  filter: brightness(.98);
}
.btn--danger:active { filter: brightness(.94); }

/* 浅色按钮与幽灵按钮 */
.btn--soft:hover { background: var(--surface-3); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }

/* 禁用态优先于悬浮态 */
.btn[disabled]:hover,
.btn.is-disabled:hover {
  background: var(--surface);
  border-color: var(--line-2);
  color: inherit;
  filter: none;
}

/* =====================================================================
   表单行（标签 + 输入 + 按钮 同一行）
   ===================================================================== */
.form-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 300px) auto;
  justify-content: start;
  align-items: center;
  gap: 10px;
}
.form-row + .form-row { margin-top: 10px; }

.form-row__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.2;
  white-space: nowrap;
}

.form-row > .input,
.form-row > .select {
  height: 38px;
  font-size: 14px;
  padding: 0 11px;
  max-width: 320px;
}

.form-row > .btn {
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}

.form-row__hint {
  margin: 6px 0 0 86px;
  font-size: 11px;
  color: var(--text-3);
}

/* 手机：标签在上、控件仍占满，按钮靠右 */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label label"
      "input button";
    gap: 6px 8px;
  }
  .form-row__label { grid-area: label; font-size: 13px; }
  .form-row > .input,
  .form-row > .select { grid-area: input; height: 40px; max-width: none; font-size: 16px; }
  .form-row > .btn { grid-area: button; height: 40px; }
  .form-row__hint { margin-left: 0; }
  .form-row + .form-row { margin-top: 12px; }
}

/* 列表行：子元素垂直居中兜底（多行文本也不跑偏） */
.list__item { align-items: center; }
.list__tail { align-self: center; }
.list__item[style*="flex-start"] { align-items: center !important; }

/* =====================================================================
   统计文字排版（2026-10）：数字与单位分层，不再"一个巨大数字 + 小单位"
   ===================================================================== */
.stat-label {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
  margin-bottom: 2px;
}

.stat-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-value b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.stat-value i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
}
.stat-value .stat-sep {
  color: var(--line-2);
  font-size: 12px;
  margin: 0 4px;
  transform: translateY(-1px);
}

.stat-amount {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .stat-value b { font-size: 20px; }
  .stat-amount { font-size: 16px; }
}

/* =====================================================================
   桌面侧边栏与内容对齐（2026-10）
   ===================================================================== */
@media (min-width: 1024px) {
  /* 与 .main 的 padding-top 对齐，不再贴着头栏 */
  .sidenav {
    margin-top: var(--sp-6);
    top: 92px;
  }
}

/* 桌面：侧栏与内容从同一水平线开始，滚动时贴住头栏下方 */
@media (min-width: 1024px) {
  .shell { padding-top: var(--sp-6); }
  .main { padding-top: 0; }
  .sidenav { margin-top: 0; top: 84px; }
}

/* =====================================================================
   App 壳（PWA standalone）适配
   ===================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* 全屏时给状态栏留安全区 */
  .topbar { padding-top: env(safe-area-inset-top, 0px); }
  .tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .betbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  /* 去掉「安装到桌面」入口 */
  [data-install-app] { display: none !important; }
}

/* 防止整页橡皮筋回弹（App 内更像原生） */
html, body { overscroll-behavior-y: contain; }

/* 长按不弹系统菜单（首页/图标类元素） */
.brand, .tabbar, .segmented { -webkit-touch-callout: none; }