/* =====================================================================
   盯盘台 V2 设计令牌 —— 薄荷蓝绿 × 纯黑
   基准主题：深色（纯黑打底）；浅色为完整平行设计，非反色滤镜。
   切换逻辑：默认跟随系统 prefers-color-scheme；手动选择写入
   localStorage(fbt_theme) 并由 <head> 内联脚本预置 data-theme。
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ---- 表面与文本（深色：纯黑打底） ---- */
  --bg: #000000;            /* 纯黑：OLED 省电，内容自发光 */
  --surface-1: #0C0C0E;     /* 卡片 */
  --surface-2: #16161A;     /* 输入框 / 浮层 / 抬升 */
  --surface-3: #1F1F24;     /* 按压 / 选中 */
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --txt: #F5F5F7;
  --txt-2: #A1A1A6;
  --txt-3: #6E6E73;
  --tab-off: #9C9CA1;   /* 底栏未选中：比 txt-3 亮一档，保证 4.5:1 */

  /* ---- 品牌强调：薄荷蓝绿 ---- */
  --accent: #00E5BF;
  --accent-press: #00C4A3;
  --accent-soft: rgba(0,229,191,.14);
  --accent-on: #00201B;     /* 薄荷底上的文字：深墨色（对比 ≈10:1） */
  --accent-glow: rgba(0,229,191,.22);  /* 仅主 CTA 一处光晕 */

  /* ---- 语义色（用户约定：绿=胜利/盈利/命中，红=失败/亏损/未中） ---- */
  --win: #30D158;
  --win-dim: rgba(48,209,88,.13);
  --lose: #FF453A;
  --lose-dim: rgba(255,69,58,.14);
  --warn: #FF9F0A;          /* 伤停 / 推迟 / 部分中 */
  --warn-dim: rgba(255,159,10,.14);
  --blue: #0A84FF;          /* 链接 / 信息 / 数据来源角标 */
  --live: #00E5BF;          /* 进行中 = 品牌薄荷（呼吸点） */

  /* ---- 赔率涨跌（独立于胜负/盈亏语义；中国股市习惯：红涨绿跌） ---- */
  --up: #30D158;            /* 赔率上涨 = 绿（绿赚：涨了潜在回报更高） */
  --up-dim: rgba(255,69,58,.14);
  --dn: #FF453A;            /* 赔率下跌 = 红（红赔：跌了回报变少） */
  --dn-dim: rgba(48,209,88,.13);

  /* ---- 向后兼容别名（旧规则引用，逐步退役） ---- */
  --card: var(--surface-1);
  --card2: var(--surface-2);
  --sub: var(--txt-2);
  --line2: var(--line-strong);
  --green: var(--win);   --green-dim: var(--win-dim);    /* 命中=绿 */
  --red: var(--lose);    --red-dim: var(--lose-dim);     /* 未中=红 */
  --amber: var(--warn);  --amber-dim: var(--warn-dim);

  /* ---- 字体 ---- */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "MiSans", "Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
  --font-num: "DIN Alternate", "SF Pro Display", "SF Mono", ui-monospace,
              -apple-system, "PingFang SC", sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px;
  --fs-17: 17px; --fs-22: 22px; --fs-28: 28px;

  /* ---- 间距（4pt 网格） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- 圆角 ---- */
  --r-sm: 8px;   /* chip */
  --r-md: 12px;  /* 按钮 / 输入框 */
  --r-lg: 16px;  /* 卡片 */
  --r-xl: 20px;  /* 大卡 / 弹层 */
  --radius: var(--r-lg);

  /* ---- 阴影（深色少用，靠边界分层） ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 28px rgba(0,0,0,.55);
  --shadow-pop: 0 16px 48px rgba(0,0,0,.6);

  /* ---- 玻璃材质（仅顶栏 / 底导 / 浮层） ---- */
  --glass-bg: rgba(0,0,0,.72);
  --glass-line: rgba(255,255,255,.08);
  --glass-blur: saturate(180%) blur(20px);

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;
}

/* ================= 浅色主题（完整平行设计） ================= */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F5F5F7;
    --surface-1: #FFFFFF;
    --surface-2: #EFEFF3;
    --surface-3: #E4E4E9;
    --line: rgba(0,0,0,.08);
    --line-strong: rgba(0,0,0,.14);
    --txt: #1D1D1F;
    --txt-2: #6E6E73;
    --txt-3: #A1A1A6;
    --tab-off: #5E5E63;   /* 底栏未选中：比 txt-3 深一档，白底 ≈6:1 */
    --accent: #00806B;          /* 白底加深薄荷，保证按钮白字对比 */
    --accent-press: #006A58;
    --accent-soft: rgba(0,128,107,.10);
    --accent-on: #FFFFFF;
    --accent-glow: rgba(0,128,107,.18);
    --win: #248A3D;
    --win-dim: rgba(36,138,61,.12);
    --lose: #D70015;
    --lose-dim: rgba(215,0,21,.10);
    --warn: #B25000;
    --warn-dim: rgba(178,80,0,.10);
    --blue: #007AFF;
    --live: #00806B;
    --up: #248A3D;
    --up-dim: rgba(215,0,21,.10);
    --dn: #D70015;
    --dn-dim: rgba(36,138,61,.12);
    --shadow-1: 0 1px 2px rgba(0,0,0,.06);
    --shadow-2: 0 4px 16px rgba(0,0,0,.08);
    --shadow-pop: 0 16px 48px rgba(0,0,0,.14);
    --glass-bg: rgba(255,255,255,.72);
    --glass-line: rgba(0,0,0,.06);
  }
}
/* 手动选择优先于系统 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F5F7;
  --surface-1: #FFFFFF;
  --surface-2: #EFEFF3;
  --surface-3: #E4E4E9;
  --line: rgba(0,0,0,.08);
  --line-strong: rgba(0,0,0,.14);
  --txt: #1D1D1F;
  --txt-2: #6E6E73;
  --txt-3: #A1A1A6;
  --tab-off: #5E5E63;
  --accent: #00806B;
  --accent-press: #006A58;
  --accent-soft: rgba(0,128,107,.10);
  --accent-on: #FFFFFF;
  --accent-glow: rgba(0,128,107,.18);
  --win: #248A3D;
  --win-dim: rgba(36,138,61,.12);
  --lose: #D70015;
  --lose-dim: rgba(215,0,21,.10);
  --warn: #B25000;
  --warn-dim: rgba(178,80,0,.10);
  --blue: #007AFF;
  --live: #00806B;
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 16px rgba(0,0,0,.08);
  --shadow-pop: 0 16px 48px rgba(0,0,0,.14);
  --glass-bg: rgba(255,255,255,.72);
  --glass-line: rgba(0,0,0,.06);
}

/* ================= 基础 ================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: var(--fs-15)/1.5 var(--font);
  padding-bottom: 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.hidden { display: none !important; }
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; }

/* 主题切换过渡（仅手动切换时启用，避免首屏闪变） */
html.theme-anim, html.theme-anim body, html.theme-anim .card,
html.theme-anim .surface {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* 尊重系统减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}