/* Bay.M 主題：白底、黑字、淺灰卡片、黑色膠囊按鈕、螢光筆重點。只覆寫 app.css 的變數與少數元件。 */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --tray: #ffffff;
  --opt: #f4f4f5;
  --opt-hover: #ececec;
  --btn-grey: #ececec;
  --line: #ececed;
  --line-2: #e4e4e5;
  --dash: #d9d9dc;
  --ink: #111111;
  --ink-2: #2a2a2d;
  --muted: #56565b;
  --faint: #6e6e73;
  --gold: #111111;
  --gold-hi: #6e6e73;
  --on-gold: #ffffff;
  --teal: #17705c;
  --copper: #c2410c;
  --accent: var(--gold);
  --on-accent: #ffffff;
  --sans: "Inter", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --num: "Inter", "Noto Sans TC", sans-serif;
  --serif: "Inter", "Noto Sans TC", sans-serif;
  --marker: #ffe27a;

  --fg: 17 17 17;
  --shadow: 0.16;
  --scrim: rgba(17, 17, 17, 0.28);
  --cer-bg: rgba(255, 255, 255, 0.99);
  --toolbar-bg: #f4f4f5;
  --now-bg: #ffffff;
  --ctrl-bg: #ffffff;
  --dot: #d4d4d8;
  --faint-2: #a1a1a6;
  --scroll: #d4d4d8;
  --num-grad: none;
  --pill-bg: #111111;
  --pill-fg: #ffffff;
  --pill-shadow: none;
}

body { background: #ffffff; }
html[lang="en"] body, body { letter-spacing: 0; }

/* 品牌字 */
.brand-badge { width: 42px; height: 42px; border-radius: 999px; background: #f4f4f5; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-badge svg { width: 34px; height: 34px; }
.brand-zh { font-family: "Inter", sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand-en { font-size: 10px; letter-spacing: 0.2em; }

/* 標題：Inter 粗體、字距收緊；重點字用螢光筆 */
.display, .h2, .group-title, .route-head b, .card-title, .stage h1 { letter-spacing: -0.025em; }
.hero h1 { font-weight: 800; }
.grad {
  color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box;
  background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  padding: 0 .06em;
}
.kicker { color: var(--muted); }
.kicker::before { background: var(--ink); width: 18px; }
.kicker b { color: var(--ink); font-weight: 500; }

/* 按鈕：黑底白字，不發光 */
.btn-primary { box-shadow: none; }
.btn-primary:hover { filter: none; background: #2a2a2d; }
.btn-ghost { background: #ffffff; border-color: #e4e4e5; }
.btn-ghost .ic { background: #f4f4f5; color: var(--ink); }

/* 主視覺預覽卡：平放，不傾斜 */
.now { transform: none; box-shadow: 0 30px 80px rgba(17, 17, 17, 0.12); border-color: #e4e4e5; }
.now:hover { transform: translateY(-4px); }
.now-top { color: var(--muted); }
.now-top .live { background: #e5484d; box-shadow: none; }

/* 大數字：實心黑 */
.stat b { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font-weight: 800; letter-spacing: -0.04em; }
.giant { font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.05em; }

/* 卡片：更圓、更輕的陰影 */
.card, .route-card, .points, .pn a, .progress, .next-card { border-radius: 24px; }
.card:hover, .route-card:hover { box-shadow: 0 20px 50px rgba(17, 17, 17, 0.1); }
.route-head .route-num { font-weight: 800; letter-spacing: -0.04em; }
.group-title .num { font-weight: 800; }
.status.new { color: var(--ink); }
.status.new::before { background: #e5484d; box-shadow: none; }

/* 工具列：淺灰底、白色搜尋框 */
.toolbar { border-color: transparent; }
.search { background: #ffffff; }
.search:focus-within { border-color: #111111; }

/* 底部行動區 */
.band-cta { background: #f4f4f5; border-color: transparent; }
.band-cta .ring { color: var(--ink); border-color: var(--ink); }

/* 疊在影片上的播放鍵：影片是深色，固定白色 */
.big-play { color: #ffffff; border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.08); }
.player { border-color: #e4e4e5; box-shadow: 0 30px 80px rgba(17, 17, 17, 0.12); }
.controls { border-top-color: #ececed; }

/* 托盤：白底、淡灰遮罩 */
.tray { border-color: #ececed; box-shadow: 0 30px 90px rgba(17, 17, 17, 0.18); }
.scrim { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* 完成儀式：白底，黑色與路線色的彩點 */
.cer-card { box-shadow: 0 30px 60px rgba(17, 17, 17, 0.18); }

.lesson-page { background: #ffffff; }
.lesson-head { background: #ffffff; }