/*
 * 设计令牌：珍珠玻璃 · 赛场仪表（见 doc/界面设计规范.md）。
 * 视觉语言与部分数值借鉴 scaffold-master《珍珠玻璃设计规范》
 * https://github.com/wbr664393425-lgtm/scaffold-master （MIT License），已按本项目改写。
 */
:root {
  color-scheme: light;
  --shade: 16, 20, 24;

  --page: #eef1f0;
  --ink: #101418;
  --ink-muted: #596368;
  --ink-soft: #7e888c;
  --ink-faint: #99a2a5;

  --blue: #236de9;
  --blue-hover: #1d61d5;
  --blue-soft: rgba(35, 109, 233, .1);
  --lime: #82dd2d;
  --leaf-text: #4f9419;
  --lime-soft: rgba(130, 221, 45, .16);
  --red: #ff5a50;
  --red-text: #d93a31;
  --red-soft: rgba(255, 90, 80, .11);
  --amber-text: #a26a00;
  --amber-soft: rgba(245, 170, 30, .14);

  --line: rgba(var(--shade), .085);
  --line-strong: rgba(var(--shade), .13);
  --glass-line: rgba(255, 255, 255, .88);
  --glass-line-soft: rgba(255, 255, 255, .6);

  --e1: 0 1px 2px rgba(var(--shade), .05), 0 5px 14px rgba(var(--shade), .04);
  --e2: 0 1px 3px rgba(var(--shade), .06), 0 12px 30px rgba(var(--shade), .055);
  --e3: 0 2px 6px rgba(var(--shade), .07), 0 22px 50px rgba(var(--shade), .09);

  --rail-bg: rgba(250, 251, 250, .78);
  --surface: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(249, 252, 251, .93));
  --surface-solid: #fbfcfc;
  --surface-sunk: rgba(var(--shade), .035);
  --pill-bg: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(244, 247, 246, .88));
  --float-bg: rgba(255, 255, 255, .86);
  --hero: linear-gradient(125deg, rgba(196, 240, 150, .72) 0%, rgba(232, 247, 214, .78) 34%, rgba(251, 252, 251, .96) 72%);

  --plate-bg: rgba(21, 24, 26, .92);
  --plate-line: rgba(255, 255, 255, .1);
  --plate-ink: #f2f5f4;
  --plate-soft: rgba(255, 255, 255, .56);

  --hatch-ink: rgba(var(--shade), .16);
  --hatch: repeating-linear-gradient(135deg, var(--hatch-ink) 0 1.5px, transparent 1.5px 6px);
  --tick: rgba(var(--shade), .12);
  --tick-strong: rgba(var(--shade), .3);

  --ambient-a: rgba(130, 221, 45, .1);
  --glass-tile: rgba(255, 255, 255, .55);
  --hero-glow: rgba(255, 255, 255, .65);
  --ambient-b: rgba(35, 109, 233, .07);

  /* 分类色：只区分类别（联赛、玩法、选项），不表示状态 */
  --cat-1: #e7c58a; --cat-1-bg: rgba(231, 197, 138, .22); --cat-1-ink: #7a5414;
  --cat-2: #7fb6f0; --cat-2-bg: rgba(127, 182, 240, .2);  --cat-2-ink: #1f5a96;
  --cat-3: #b9a2ec; --cat-3-bg: rgba(185, 162, 236, .22); --cat-3-ink: #57409a;
  --cat-4: #ef9fb0; --cat-4-bg: rgba(239, 159, 176, .22); --cat-4-ink: #9a3049;
  --cat-5: #82d4b4; --cat-5-bg: rgba(130, 212, 180, .22); --cat-5-ink: #1f7556;
  /* 胜/平/负三项固定配色 */
  --home: #236de9; --draw: #9aa5a9; --away: #f08a3c;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --track-eyebrow: .14em;

  --fs-display-xl: 56px; --fs-display-l: 40px; --fs-display-m: 28px;
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
  --rail-w: 232px; --topbar-h: 64px;
  --control-h: 36px; --control-h-sm: 30px;
  --row-h: 48px; --cell-px: 16px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms; --dur: 280ms; --dur-slow: 620ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111416;
  --ink: #eef2f1;
  --ink-muted: #b0babd;
  --ink-soft: #8d979a;
  --ink-faint: #6c7679;
  --blue: #4c8dff;
  --blue-hover: #3d7ff2;
  --blue-soft: rgba(76, 141, 255, .16);
  --leaf-text: #9be35a;
  --lime-soft: rgba(130, 221, 45, .16);
  --red-text: #ff7a71;
  --red-soft: rgba(255, 90, 80, .16);
  --amber-text: #f2c063;
  --amber-soft: rgba(245, 170, 30, .16);
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .11);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-line-soft: rgba(255, 255, 255, .06);
  --e1: 0 1px 2px rgba(0, 0, 0, .3), 0 5px 14px rgba(0, 0, 0, .2);
  --e2: 0 1px 3px rgba(0, 0, 0, .32), 0 12px 30px rgba(0, 0, 0, .28);
  --e3: 0 2px 6px rgba(0, 0, 0, .36), 0 22px 50px rgba(0, 0, 0, .42);
  --rail-bg: rgba(22, 26, 28, .8);
  --surface: linear-gradient(145deg, rgba(29, 33, 36, .98), rgba(25, 29, 31, .96));
  --surface-solid: #1b1f21;
  --surface-sunk: rgba(255, 255, 255, .035);
  --pill-bg: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
  --float-bg: rgba(30, 34, 37, .9);
  --hero: linear-gradient(125deg, rgba(88, 140, 36, .42) 0%, rgba(44, 62, 34, .5) 38%, rgba(27, 31, 33, .96) 76%);
  --plate-bg: rgba(8, 10, 11, .78);
  --hatch-ink: rgba(255, 255, 255, .12);
  --tick: rgba(255, 255, 255, .1);
  --tick-strong: rgba(255, 255, 255, .3);
  --ambient-a: rgba(130, 221, 45, .06);
  --ambient-b: rgba(76, 141, 255, .06);
  --glass-tile: rgba(255, 255, 255, .045);
  --hero-glow: rgba(130, 221, 45, .12);
  --cat-1-bg: rgba(231, 197, 138, .14); --cat-1-ink: #ecd09f;
  --cat-2-bg: rgba(127, 182, 240, .14); --cat-2-ink: #a9cdf5;
  --cat-3-bg: rgba(185, 162, 236, .14); --cat-3-ink: #cdbcf3;
  --cat-4-bg: rgba(239, 159, 176, .14); --cat-4-ink: #f4bccb;
  --cat-5-bg: rgba(130, 212, 180, .14); --cat-5-ink: #a8e2cb;
  --home: #4c8dff; --draw: #7c878b; --away: #ff9d55;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --page: #111416;
    --ink: #eef2f1;
    --ink-muted: #b0babd;
    --ink-soft: #8d979a;
    --ink-faint: #6c7679;
    --blue: #4c8dff;
    --blue-hover: #3d7ff2;
    --blue-soft: rgba(76, 141, 255, .16);
    --leaf-text: #9be35a;
    --lime-soft: rgba(130, 221, 45, .16);
    --red-text: #ff7a71;
    --red-soft: rgba(255, 90, 80, .16);
    --amber-text: #f2c063;
    --amber-soft: rgba(245, 170, 30, .16);
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .11);
    --glass-line: rgba(255, 255, 255, .1);
    --glass-line-soft: rgba(255, 255, 255, .06);
    --e1: 0 1px 2px rgba(0, 0, 0, .3), 0 5px 14px rgba(0, 0, 0, .2);
    --e2: 0 1px 3px rgba(0, 0, 0, .32), 0 12px 30px rgba(0, 0, 0, .28);
    --e3: 0 2px 6px rgba(0, 0, 0, .36), 0 22px 50px rgba(0, 0, 0, .42);
    --rail-bg: rgba(22, 26, 28, .8);
    --surface: linear-gradient(145deg, rgba(29, 33, 36, .98), rgba(25, 29, 31, .96));
    --surface-solid: #1b1f21;
    --surface-sunk: rgba(255, 255, 255, .035);
    --pill-bg: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
    --float-bg: rgba(30, 34, 37, .9);
    --hero: linear-gradient(125deg, rgba(88, 140, 36, .42) 0%, rgba(44, 62, 34, .5) 38%, rgba(27, 31, 33, .96) 76%);
    --plate-bg: rgba(8, 10, 11, .78);
    --hatch-ink: rgba(255, 255, 255, .12);
    --tick: rgba(255, 255, 255, .1);
    --tick-strong: rgba(255, 255, 255, .3);
    --ambient-a: rgba(130, 221, 45, .06);
    --ambient-b: rgba(76, 141, 255, .06);
  --glass-tile: rgba(255, 255, 255, .045);
  --hero-glow: rgba(130, 221, 45, .12);
    --cat-1-bg: rgba(231, 197, 138, .14); --cat-1-ink: #ecd09f;
    --cat-2-bg: rgba(127, 182, 240, .14); --cat-2-ink: #a9cdf5;
    --cat-3-bg: rgba(185, 162, 236, .14); --cat-3-ink: #cdbcf3;
    --cat-4-bg: rgba(239, 159, 176, .14); --cat-4-ink: #f4bccb;
    --cat-5-bg: rgba(130, 212, 180, .14); --cat-5-ink: #a8e2cb;
    --home: #4c8dff; --draw: #7c878b; --away: #ff9d55;
  }
}