:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: 0px;
  --safe-area-bottom: 0px;
  --safe-area-left: 0px;
  --app-viewport: 100vh;
  --sidebar-width: 280px;
  --sidebar-bg: #12131a;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-fg: #e8eef5;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --backdrop-bg: rgba(0, 0, 0, 0.45);
  --hamburger-bg: rgba(255, 255, 255, 0.06);
  --hamburger-border: rgba(255, 255, 255, 0.08);
  --hamburger-bar: #e8eef5;
  --layer-topbar: 1400;
  --layer-backdrop: 1700;
  --layer-sidebar: 2000;
  --layer-modal: 3200;
  --layer-toast: 3300;

  /* === 設計系統 - 間距 === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* === 設計系統 - 字體 === */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* === 設計系統 - 圓角 === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* === 設計系統 - 字型 === */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  /* === 設計系統 - 按鈕 === */
  --btn-height-sm: 36px;
  --btn-height-md: 44px;
  --btn-height-lg: 52px;

  /* === 設計系統 - 輸入框 === */
  --input-height: 44px;
  --input-padding: 12px 14px;
  --input-radius: var(--radius-lg);
  --input-bg: rgba(0, 0, 0, 0.2);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus-border: rgba(0, 255, 198, 0.6);
  --input-focus-shadow: 0 0 0 3px rgba(0, 255, 198, 0.15);

  /* Theme tokens */
  --bg: #0f1115;
  --bg-elev: #151821;
  --bg-glass: rgba(21, 24, 33, 0.76);
  --bg-card: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --fg: #e8eef5;
  --fg-muted: #a6b0bf;
  --fg-soft: rgba(232, 238, 245, 0.72);
  --fg-secondary: rgba(232, 238, 245, 0.82);
  --fg-disabled: rgba(232, 238, 245, 0.45);
  --accent: #00ffc6;
  /* --accent 的 r,g,b 三元組。存在的理由：rgba() 沒辦法吃 #hex 變數，
     而本檔有幾條規則要用「主色 + 自訂透明度」。有了它，那些規則才能跟著
     --accent 一起被覆蓋——TC 端就是靠覆蓋這兩個變數讓整個畫面換主色的
     （見 tc/style.css 的「頂欄接上主色引擎」註解）。改 --accent 時必須一起改。 */
  --accent-rgb: 0, 255, 198;
  --accent-2: #ff00e6;
  --accent-soft: rgba(0, 255, 198, 0.12);
  --accent-hover: #00e6b3;
  --success: #22d3a6;
  --warning: #ffd166;
  --danger: #ff6b81;
  --info: #00b3ff;
  --shadow-soft: 0 18px 55px rgba(5, 6, 10, 0.55);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-card-lg: 0 24px 68px rgba(0, 0, 0, 0.35);
  --glass-blur: blur(14px);

  /* Layout tokens */
  --topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --topbar-border-color: rgba(255, 255, 255, 0.07);
  --topbar-fg: inherit;
  --topbar-shadow: none;
  --topbar-backdrop-filter: blur(6px);
  --brand-color: currentColor;
  --brand-font-size: 18px;
  --brand-font-weight: 800;
  --brand-letter-spacing: 0.5px;
  --topbar-right-gap: 8px;
  --topbar-right-opacity: 0.85;
  --content-height: calc(100% - 1px);
  --content-bg: transparent;
  --content-border: none;
  --content-radius: 0;
  --content-shadow: none;
}
@supports (top: constant(safe-area-inset-top)) {
  :root {
    --safe-area-top: constant(safe-area-inset-top);
    --safe-area-right: 0px;
    --safe-area-bottom: 0px;
    --safe-area-left: 0px;
  }
}
@supports (height: 100svh) {
  :root { --app-viewport: 100svh; }
}
@supports (height: 100lvh) {
  :root { --app-viewport: 100lvh; }
}
@supports (height: 100dvh) {
  :root { --app-viewport: 100dvh; }
}

html[data-theme="light"],
html[data-theme="light"] body {
  color-scheme: light;
}

[data-theme="light"],
html[data-theme="auto"] [data-theme="light"] {
  --bg: #f7f8fb;
  --bg-elev: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.86);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --fg: #10121a;
  --fg-muted: #525b6b;
  --fg-soft: rgba(16, 18, 26, 0.65);
  --fg-secondary: rgba(16, 18, 26, 0.75); /* 淺色補翻（原只定義深色 → 司機端 .sm-* 等白底白字） */
  --fg-disabled: rgba(16, 18, 26, 0.4);   /* 淺色補翻 */
  --accent: #1dd3b0;
  --accent-rgb: 29, 211, 176;   /* 與 --accent 同值，理由見 :root 該處註解 */
  --accent-2: #b5179e;
  --accent-soft: rgba(29, 211, 176, 0.12);
  --success: #0f9d58;
  --warning: #f59e0b;
  --danger: #d64562;
  --shadow-soft: 0 16px 44px rgba(15, 18, 28, 0.16);
  --shadow-card: 0 12px 30px rgba(15, 18, 28, 0.12);
  --shadow-card-lg: 0 24px 68px rgba(15, 18, 28, 0.18);
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-fg: #10121a;
  --sidebar-hover-bg: rgba(0, 0, 0, 0.06);
  --backdrop-bg: rgba(0, 0, 0, 0.22);
  --hamburger-bg: rgba(255, 255, 255, 0.92);
  --hamburger-border: rgba(0, 0, 0, 0.08);
  --hamburger-bar: #10121a;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"],
  html[data-theme="auto"] body {
    --bg: #f7f8fb;
    --bg-elev: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.86);
    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.16);
    --fg: #10121a;
    --fg-muted: #525b6b;
    --fg-soft: rgba(16, 18, 26, 0.65);
    --fg-secondary: rgba(16, 18, 26, 0.75); /* 淺色補翻（prefers-color-scheme 分支） */
    --fg-disabled: rgba(16, 18, 26, 0.4);   /* 淺色補翻 */
    --accent: #1dd3b0;
    --accent-rgb: 29, 211, 176;   /* 與 --accent 同值，理由見 :root 該處註解 */
    --accent-2: #b5179e;
    --accent-soft: rgba(29, 211, 176, 0.12);
    --success: #0f9d58;
    --warning: #f59e0b;
    --danger: #d64562;
    --shadow-soft: 0 16px 44px rgba(15, 18, 28, 0.16);
    --shadow-card: 0 12px 30px rgba(15, 18, 28, 0.12);
    --shadow-card-lg: 0 24px 68px rgba(15, 18, 28, 0.18);
    --sidebar-bg: #ffffff;
    --sidebar-border: rgba(0, 0, 0, 0.08);
    --sidebar-fg: #10121a;
    --sidebar-hover-bg: rgba(0, 0, 0, 0.06);
    --backdrop-bg: rgba(0, 0, 0, 0.22);
    --hamburger-bg: rgba(255, 255, 255, 0.92);
    --hamburger-border: rgba(0, 0, 0, 0.08);
    --hamburger-bar: #10121a;
  }
}
/* ========= Reset / Base ========= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
html { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  /* 背景：深色低調漸層 + 細格紋 */
  background:
    radial-gradient(1200px 800px at 20% -10%, color-mix(in oklab, var(--accent-soft) 40%, transparent) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(1000px 700px at 120% 20%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, rgba(0,0,0,0) 60%),
    var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  min-height: 100vh;
  min-height: var(--app-viewport);
  padding-bottom: var(--safe-area-bottom);
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, color-mix(in oklab, var(--fg-soft) 12%, transparent) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to bottom, color-mix(in oklab, var(--fg-soft) 8%, transparent) 0 1px, transparent 1px 20px);
  opacity: .22; z-index: 0;
}
.app-root { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, button, textarea { color: inherit; background: transparent; border: none; outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.noscript { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background:#111; z-index: 1300; }

/* 隱藏 number 的上下箭頭（避免遮擋） */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ========= Layout ========= */
.app-root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: var(--app-viewport);
}

.topbar {
  position: relative;
  display:flex; align-items:center; gap: 12px;
  padding:
    calc(12px + var(--safe-area-top))
    calc(14px + var(--safe-area-right))
    12px
    calc(14px + var(--safe-area-left));
  color: var(--topbar-fg);
  border-bottom: 1px solid var(--topbar-border-color);
  background: var(--topbar-bg);
  backdrop-filter: var(--topbar-backdrop-filter);
  box-shadow: var(--topbar-shadow);
  flex-shrink: 0;
  z-index: var(--layer-topbar);
}
.brand {
  margin: 0;
  font-size: var(--brand-font-size);
  font-weight: var(--brand-font-weight);
  letter-spacing: var(--brand-letter-spacing);
  color: var(--brand-color);
}
.topbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--topbar-right-gap);
  opacity: var(--topbar-right-opacity);
}
.welcome { font-weight: 600; }

.content {
  height: var(--content-height);
  overflow-y: auto;
  overflow-x: hidden;
  padding:
    16px
    calc(16px + var(--safe-area-right))
    calc(16px + var(--safe-area-bottom))
    calc(16px + var(--safe-area-left));
  scroll-padding-top: calc(16px + var(--safe-area-top));
  background: var(--content-bg);
  border: var(--content-border);
  border-radius: var(--content-radius);
  box-shadow: var(--content-shadow);
}

.section { display: none; }
.section.active { display: block; }
h2 { margin: 6px 0 12px; font-size: 18px; }

/* ========= Layout Modifiers ========= */
.topbar--home {
  --topbar-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-elev) 96%, transparent),
    color-mix(in oklab, var(--bg-elev) 88%, transparent)
  );
  --topbar-border-color: var(--border);
  --topbar-right-opacity: 0.95;
}

.topbar--driver {
  --topbar-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg-glass) 88%, transparent),
    color-mix(in oklab, var(--bg) 92%, transparent)
  );
  --topbar-border-color: color-mix(in oklab, var(--border) 75%, transparent);
}

.topbar--tc {
  --topbar-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 22%, transparent),
    color-mix(in oklab, var(--bg-glass) 88%, transparent)
  );
  --topbar-border-color: color-mix(in oklab, var(--accent) 18%, var(--border));
  --brand-color: color-mix(in oklab, var(--fg) 92%, var(--accent));
}

.content--full { --content-height: 100%; }

.content--panel {
  --content-bg: color-mix(in oklab, var(--bg-elev) 94%, transparent);
  --content-border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  --content-radius: 18px;
  --content-shadow: var(--shadow-soft);
}
.lead { opacity: .85; }

/* ========= Sidebar (覆蓋抽屜) ========= */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: var(--app-viewport);
  transform: translateX(-100%);
  transition: transform .2s ease;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  z-index: var(--layer-sidebar);
  display: flex;
  flex-direction: column;
  padding:
    calc(12px + var(--safe-area-top))
    calc(12px + var(--safe-area-right))
    calc(12px + var(--safe-area-bottom))
    calc(12px + var(--safe-area-left));
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  padding: 14px 16px;
  font-weight: 800;
  border-bottom: 1px solid var(--sidebar-border);
  color: var(--sidebar-fg);
}

/* 讓 nav 撐滿側欄高度 */
.nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.nav-link {
  text-align: left;
  padding: 12px 16px;
  background: transparent;
  color: var(--sidebar-fg);
  border-bottom: 1px dashed var(--sidebar-border);
}

.nav-link:hover,
.nav-link.active {
  background: var(--sidebar-hover-bg);
}

.nav-link.danger {
  color: var(--danger);
}

/* 登出貼底 */
#navLogout {
  margin-top: auto;
  position: fixed;
  bottom: calc(20px + var(--safe-area-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border: 2px solid #dc3545;
  border-radius: 12px;
  background: transparent;
  color: #dc3545;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all .3s ease;
  z-index: 2600;
}

#navLogout:hover {
  background: #dc3545;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* spacer is legacy markup, hide it so it doesn't consume space */
.nav-spacer { display: none; }

.backdrop {
  position: fixed; inset: 0; background: var(--backdrop-bg);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease;
  z-index: var(--layer-backdrop);
}
.backdrop.show { opacity: 1; visibility: visible; }

/* ========= Hamburger（穩定三條線、不擋選單） ========= */
.hamburger {
  position: relative; width: 40px; height: 40px; border-radius: 8px; display: inline-block;
  background: var(--hamburger-bg); border: 1px solid var(--hamburger-border);
  overflow: hidden; z-index: var(--layer-topbar);
}
.hamburger .bar {
  position: absolute; left: 50%; width: 22px; height: 2px; background: var(--hamburger-bar); border-radius: 2px;
  transform: translateX(-50%); transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}
.hamburger .bar:nth-child(1) { top: 12px; }
.hamburger .bar:nth-child(2) { top: 19px; }
.hamburger .bar:nth-child(3) { top: 26px; }
/* 側欄開啟：讓漢堡退場，不會「擋到選單」 */
.menu-open .hamburger { opacity: 0; pointer-events: none; }

/* ========= Cards / Forms ========= */
.card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  color: var(--fg);
  backdrop-filter: none;
}
.card--glass,
.card.glass {
  background: var(--bg-glass);
  border: 1px solid var(--border-strong);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft);
}

html[data-theme="light"] .card {
  background: color-mix(in oklab, #ffffff 96%, transparent);
  border-color: color-mix(in oklab, var(--border) 85%, transparent);
  box-shadow: 0 20px 48px rgba(15, 18, 28, 0.16);
}

html[data-theme="light"] .card--glass,
html[data-theme="light"] .card.glass {
  background: color-mix(in oklab, #ffffff 94%, transparent);
  border-color: color-mix(in oklab, var(--border) 78%, transparent);
  box-shadow: 0 24px 60px rgba(15, 18, 28, 0.18);
}
.card.highlight {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-card-lg);
}
.grid-3 {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){ .grid-3 { grid-template-columns: 1fr; } }

.kv { display:flex; align-items:center; justify-content:space-between; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.kv:last-child { border-bottom: none; }
.kv span { color: var(--fg-muted); }
.kv .kv-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-elev) 88%, transparent);
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.kv .kv-copy:hover:not(:disabled) {
  background: color-mix(in oklab, var(--bg-elev) 94%, transparent);
  transform: translateY(-1px);
}
.kv .kv-copy:active:not(:disabled) {
  background: color-mix(in oklab, var(--bg-elev) 98%, transparent);
  transform: translateY(0);
}
.kv .kv-copy:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: color-mix(in oklab, var(--bg-elev) 75%, transparent);
  border-color: color-mix(in oklab, var(--border) 65%, transparent);
}

.info-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
.info-card { background: var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: var(--shadow-card); }
.info-title { font-weight:700; margin-bottom:6px; color: var(--fg); }
.hint { font-size: 12px; color: var(--fg-soft); }

.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.slim label { display:flex; flex-direction:column; gap:6px; }
@media (max-width: 680px){ .form-grid { grid-template-columns: 1fr; } }

.form-row { display:flex; align-items:flex-end; gap: 12px; flex-wrap: wrap; }
.form-row.compact label { display:flex; flex-direction:column; gap:6px; }

input[type="text"], input[type="password"], input[type="number"], textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-elev) 82%, transparent);
  border: 1px solid var(--border);
  color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: color-mix(in oklab, #ffffff 95%, transparent);
  border-color: color-mix(in oklab, var(--border) 86%, transparent);
  box-shadow: 0 8px 22px rgba(15, 18, 28, 0.1);
  color: var(--fg);
}
input::placeholder,
textarea::placeholder {
  color: var(--fg-soft);
}
input:focus,
textarea:focus,
select:focus {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
  outline: none;
}
input:disabled,
textarea:disabled,
select:disabled {
  opacity:.55;
  cursor: not-allowed;
}
.input-short { width: 140px; }

.btn-row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; margin-top: 10px; }
.btn-row.end { justify-content: flex-end; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-elev) 86%, transparent);
  color: var(--fg);
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}
.btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--bg-elev) 95%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.btn.primary {
  border: none;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #0b1017;
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), .25);
}
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.05);
}
.btn.ghost {
  background: color-mix(in oklab, var(--bg-elev) 75%, transparent);
  border-color: color-mix(in oklab, var(--border) 60%, transparent);
}
.btn.outline {
  background: transparent;
  border-color: color-mix(in oklab, var(--border) 80%, transparent);
}
.btn.danger {
  background: color-mix(in oklab, var(--danger) 12%, var(--bg-elev) 88%);
  border-color: color-mix(in oklab, var(--danger) 45%, transparent);
  color: var(--danger);
  box-shadow: 0 14px 30px rgba(214, 69, 98, .25);
}
.btn:disabled,
.btn[disabled] {
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
}

html[data-theme="light"] .btn {
  background: color-mix(in oklab, #ffffff 94%, transparent);
  border-color: color-mix(in oklab, var(--border) 88%, transparent);
  box-shadow: 0 10px 26px rgba(15, 18, 28, 0.12);
  color: color-mix(in oklab, var(--fg) 94%, var(--fg-muted) 6%);
}

html[data-theme="light"] .btn:hover:not(:disabled) {
  box-shadow: 0 14px 32px rgba(15, 18, 28, 0.16);
}

/* 🔒 淺色主題的「主要按鈕」——這一條當初漏了，補回來 `[@shenyin 2026-08-28 拍板修全域]`
   ═══════════════════════════════════════════════════════════════════════
   踩坑：上面那條 `html[data-theme="light"] .btn`（權重 0,2,1）會壓過
   `.btn.primary`（0,2,0）⇒ **選了淺色主題之後，全站的主要按鈕都被塗回白色**，
   跟旁邊的「取消」長得一模一樣，使用者得讀字才知道哪顆是重點。
   影響 47 顆：admin 20、調度端 TC 23、home 4——含「建立車隊」「全部平台發佈」
   「執行」這種按下去有後果的。

   為什麼是「漏了」而不是「設計如此」：它下面緊接著就有 `.ghost`／`.outline`／
   `.danger` 三個變體的淺色覆寫，**唯獨少了 primary**。三個都寫了不會是故意跳過一個。

   ⚠️ `data-theme="auto"`（各頁預設值）**不受影響**：auto 分支只換 CSS 變數、
   沒有自己的 `.btn` 規則，所以 `.btn.primary` 的漸層照樣生效。
   只有使用者在偏好設定裡明確選「淺色」才會中（admin/script.js 的
   `setAttribute("data-theme", val)`）。這也是為什麼它藏了這麼久。

   ⚠️ 改動這裡等於一次改變三個前端全部 47 顆主要按鈕的外觀——動它之前先確認
   是要「全部一起變」，不是只想修某一頁。 */
html[data-theme="light"] .btn.primary {
  border: none;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #0b1017;
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), .25);
}
html[data-theme="light"] .btn.primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), .25);
}

html[data-theme="light"] .btn.ghost {
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
}

html[data-theme="light"] .btn.outline {
  border-color: color-mix(in oklab, var(--border) 72%, transparent);
}

html[data-theme="light"] .btn.danger {
  background: color-mix(in oklab, var(--danger) 12%, #ffffff 88%);
  box-shadow: 0 14px 30px rgba(214, 69, 98, 0.18);
}

/* Switch */
.switch { position: relative; display:inline-block; width: 44px; height: 24px; margin: 0 6px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position:absolute; inset:0;
  background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
  border-radius:999px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  transition: all .18s ease;
}
.slider::before {
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:16px;
  height:16px;
  background: #ffffff;
  border-radius:50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.switch input:checked + .slider {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
}
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch-group { display:flex; align-items:center; gap:8px; }
.switch-text { opacity:.85; }

/* 邏輯模組 */
.logic-block .block-head { display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; }
.logic-block .title { font-weight:800; display:flex; flex-direction:column; }
.logic-block .muted { font-size:12px; opacity:.7; }

/* 自製下拉 */
.select { position: relative; width: 120px; }
.select-btn {
  width: 100%; padding: 10px 12px; border-radius: 10px; background:#0f1218; border: 1px solid rgba(255,255,255,.08);
}
.select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none; background: #0f1218; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; display: none; z-index: 900;
}
.select.open .select-list { display: block; }
.select-list li { padding: 8px 10px; border-radius: 8px; }
.select-list li:hover { background: rgba(255,255,255,.06); }

/* ========= Game ========= */
.status { display:flex; align-items:center; gap:8px; }
.status-label { opacity:.8; }
.status-text { font-weight: 800; }

.led { display:inline-block; width:12px; height:12px; border-radius:50%; margin-left:6px; }
.led-red { background:#ff4d6d; }
.led-green { background:#00d08a; }
.led-yellow { background:#ffd166; }

.game-log-card { padding: 0; }
.log-head { padding: 10px 12px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); }
.game-log { max-height: 42vh; overflow: auto; padding: 6px 8px; }
.game-log-entry {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  margin: 6px 2px;
  line-height: 1.35;
  word-break: break-word;
}
.game-log-entry .idx { font-variant-numeric: tabular-nums; opacity: .85; }
.game-log-entry .time { font-variant-numeric: tabular-nums; opacity: .8; }
.game-log-entry .wl { font-weight: 700; letter-spacing: .5px; }
.game-log-entry .profit { font-variant-numeric: tabular-nums; font-weight: 700; }

.game-log-entry.win {
  background: rgba(0, 185, 110, .12);
  box-shadow: inset 4px 0 0 0 rgba(0, 185, 110, .9);
}
.game-log-entry.lose {
  background: rgba(220, 20, 60, .12);
  box-shadow: inset 4px 0 0 0 rgba(220, 20, 60, .9);
}
.game-log-entry.even {
  background: rgba(180, 190, 200, .12);
  box-shadow: inset 4px 0 0 0 rgba(180, 190, 200, .9);
}
.game-log-entry.win .wl, .game-log-entry.win .profit { color: #00d08a; }
.game-log-entry.lose .wl, .game-log-entry.lose .profit { color: #ff4d6d; }
.game-log-entry.even .wl, .game-log-entry.even .profit { color: #b8c2cc; }

@media (max-width: 480px) {
  .game-log-entry { grid-template-columns: auto 1fr auto; }
  .game-log-entry .time { grid-column: 2 / span 2; }
}

/* ========= Modal（單一版，含開/關動畫） ========= */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(2px);
  z-index: 1200;                 /* 高於側欄(1100)與背板(1050) */
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.modal.open { opacity: 1; visibility: visible; }
.modal.closing { opacity: 0; visibility: hidden; }
.modal-box {
  width: min(92vw, 520px);
  background: #12121a;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  padding: 16px 16px 12px 16px;
  transform: scale(.98);
  opacity: 0;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.modal.open .modal-box { transform: scale(1); opacity: 1; }
.modal.closing .modal-box { transform: scale(.98); opacity: 0; }
.modal-title { margin: 6px 4px 10px; font-size: 18px; font-weight: 700; }
.modal-body { padding: 0 4px 8px; color: #cdd2d9; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 6px 4px 4px; }

/* ========= Toast ========= */
.toast-host {
  position: fixed;
  right: calc(16px + var(--safe-area-right));
  bottom: calc(16px + var(--safe-area-bottom));
  z-index: 1150;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; border-radius: 12px;
  background: #151821; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transform: translateY(6px); opacity: 1;
}
.toast .dot { width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.toast-success .dot { background: #00d08a; }
.toast-error .dot { background: #ff4d6d; }
.toast-warn .dot { background: #ffd166; }
/* 近期登入 IP 清單 */
.iplog { max-height: 300px; overflow: auto; border: 1px dashed rgba(255,255,255,.06); border-radius: 10px; }
.iplog-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border-bottom:1px dashed rgba(255,255,255,.06); font-variant-numeric: tabular-nums; }
.iplog-row:last-child { border-bottom: none; }
.iplog-row .ip { font-weight:700; color: var(--fg); }
.iplog-row .time { color: var(--fg-secondary); }

/* ============================================================
   全局 GPU 效能優化
   ============================================================ */

/* 頁面不可見時（用戶切換分頁）暫停所有動畫 */
html.page-hidden *,
html[data-visibility="hidden"] * {
  animation-play-state: paused !important;
}

/* 全局隱藏元素優化
 * @shenyin 2026-05-18 根治: 強制 display:none — 防 .btn / .ix-* 等作者 CSS
 *   覆蓋 HTML hidden attribute 的瀏覽器預設 display:none。
 *   過去多次踩坑（commit 5ac1cd14 .ix-invite[hidden] / commit 3604e65d setEl helper），
 *   全部源自此漏洞。此規則放最後一道防線，JS 只要 element.hidden = true 就一定看不到。
 */
[hidden] {
  display: none !important;
  animation-play-state: paused !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}