/* 開課快手 商戶後台 — 2026-09-24 改版主題（Tesla 認可的「靛紫藍 × 國際 SaaS」風格，
 * 設計稿：約動 UI 風格提案 Artifact 第 5 版的「後台首頁」深色／淺色兩張）。
 *
 * 為什麼是另一支檔案、而不是直接改 style.css：style.css 是後台與學員端共用的。學員端頁首／按鈕
 * 吃的是**各商戶自己選的品牌色**（appearance.html、LINE 選單同色），不能被後台改版連帶換成紫藍。
 * 這支只由 public/admin/*.html 在 style.css 之後引入，學員端（public/s/）完全不載入，所以：
 *   - 這裡可以放心覆寫全域元素（button、table、input）——作用範圍天然只有後台；
 *   - 學員端外觀逐位元不變（branding-regression 那組快照不受影響）。
 *
 * 取代 2026-08-24 的「後台苔綠、不要漸層」決定（Tesla 2026-09-24 看過設計稿後改採本風格）。
 * token 名 --teal／--blue 沿用（各頁 <style> 大量引用），值換成靛紫系：
 *   --teal＝主色（強調、選中態）、--blue＝連結與文字上的強調色（要跟底色有足夠對比）。
 *
 * 深色／淺色（2026-09-24 Tesla：「淺色很醜」→ 深色為預設）：
 *   - 每頁 <head> 有一行內嵌 script，在第一次繪製前把 <html data-theme> 設成 localStorage
 *     的選擇（acpay.admin.theme），沒選過就是 dark——放 head 才不會先閃一下淺色。
 *   - 側欄底部的切換鈕（admin.js renderNav）改寫同一個 key。
 *   - 本檔**所有顏色都走下面的 token**：元件規則裡不寫色碼，深色只需要換一組 token 值。
 *     style.css 與各頁 <style> 裡寫死的淺色值，集中在檔尾「深色補丁」逐條蓋掉。
 */

:root {
  --teal: #5B4DF5;
  --blue: #4A3DE0;
  --brand-grad: linear-gradient(135deg, #6C5CFF 0%, #3F8CFF 100%);
  --brand-grad-hover: linear-gradient(135deg, #5E4DF7 0%, #2F7DF5 100%);
  --brand-tint: #EEECFF;
  --brand-tint-text: #4A3DE0;
  --brand-tint-border: #DEDAFF;

  --bg: #F7F7FB;
  --bg-glow: none;
  --card-bg: #FFFFFF;
  --panel: #FFFFFF;
  --surface-2: #F4F5FA;
  --input-bg: #FFFFFF;
  --row-hover: #FAFAFE;
  --sidebar-bg: rgba(255, 255, 255, 0.78);
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --drawer-bg: #FFFFFF;

  --text: #0B0D1E;
  --text-muted: #62667F;
  --text-dim: #9498B0;
  --border: #E6E7F1;
  --border-strong: #D5D7E6;
  --border-hover: #BFC2D6;

  --danger: #D8454F;
  --warn: #B86E06;
  --ok: #12925F;
  --ok-bg: #E4F7EE;
  --warn-bg: #FCF1DC;
  --bad-bg: #FCE8EA;
  --neutral-bg: #EFF0F6;
  --neutral-fg: #5A5F78;
  --violet-bg: #EFEAFF;
  --violet-fg: #6A42D6;
  --danger-border: #F3C5C9;
  --danger-hover-bg: #FDF0F1;

  --msg-err-bg: #FDF0F1;  --msg-err-fg: #B8323C;  --msg-err-bd: #F6D3D6;
  --msg-ok-bg: #EEFAF4;   --msg-ok-fg: #0D7A4F;   --msg-ok-bd: #CBEEDC;
  --msg-info-bg: #F1F0FF; --msg-info-fg: #4A3DE0; --msg-info-bd: #DEDAFF;
  --msg-warn-bg: #FDF6E7; --msg-warn-fg: #93570A; --msg-warn-bd: #F4E1B8;

  --radius: 14px;
  --shadow-card: 0 1px 2px rgba(20, 22, 50, 0.04), 0 6px 20px rgba(20, 22, 50, 0.05);
  --shadow-drawer: 0 18px 40px rgba(20, 22, 50, 0.12);
  --shadow-btn: 0 4px 14px rgba(84, 92, 255, 0.28);
  --shadow-btn-hover: 0 6px 18px rgba(84, 92, 255, 0.36);
  --focus-ring: 0 0 0 3px rgba(91, 77, 245, 0.2);
  --sidebar-w: 248px;
  --nav-h: 56px;
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* 深色 token：近黑底＋頂端靛紫光暈、卡片略浮起、文字不用純白（長時間看比較不刺眼）。
 * 語意色提亮一階：深底上原本的深綠／深橘對比不夠。 */
:root[data-theme="dark"] {
  --teal: #7C6CFF;
  --blue: #ABA3FF;
  --brand-grad: linear-gradient(135deg, #7A6BFF 0%, #4F9BFF 100%);
  --brand-grad-hover: linear-gradient(135deg, #8A7CFF 0%, #62A8FF 100%);
  --brand-tint: rgba(124, 108, 255, 0.16);
  --brand-tint-text: #CBC5FF;
  --brand-tint-border: rgba(124, 108, 255, 0.35);

  --bg: #07080F;
  --bg-glow:
    radial-gradient(55% 420px at 12% 0%, rgba(122, 107, 255, 0.20) 0%, rgba(122, 107, 255, 0) 100%),
    radial-gradient(45% 380px at 92% 0%, rgba(79, 155, 255, 0.14) 0%, rgba(79, 155, 255, 0) 100%);
  --card-bg: #0F1122;
  --panel: #0F1122;
  --surface-2: #171A30;
  --input-bg: #0B0D1A;
  --row-hover: #14172B;
  --sidebar-bg: rgba(10, 11, 22, 0.86);
  --topbar-bg: rgba(10, 11, 22, 0.88);
  --drawer-bg: #0D0F1E;

  --text: #EEF0FA;
  --text-muted: #9298B4;
  --text-dim: #646B89;
  --border: #1F2339;
  --border-strong: #2B3050;
  --border-hover: #3B4166;

  --danger: #FF6B7A;
  --warn: #FFB547;
  --ok: #3DDC97;
  --ok-bg: rgba(61, 220, 151, 0.12);
  --warn-bg: rgba(255, 181, 71, 0.12);
  --bad-bg: rgba(255, 107, 122, 0.13);
  --neutral-bg: rgba(255, 255, 255, 0.07);
  --neutral-fg: #A9AFC8;
  --violet-bg: rgba(160, 130, 255, 0.15);
  --violet-fg: #C4B2FF;
  --danger-border: rgba(255, 107, 122, 0.35);
  --danger-hover-bg: rgba(255, 107, 122, 0.10);

  --msg-err-bg: rgba(255, 107, 122, 0.10);  --msg-err-fg: #FF9AA4;  --msg-err-bd: rgba(255, 107, 122, 0.28);
  --msg-ok-bg: rgba(61, 220, 151, 0.09);    --msg-ok-fg: #7BE8B6;   --msg-ok-bd: rgba(61, 220, 151, 0.25);
  --msg-info-bg: rgba(124, 108, 255, 0.11); --msg-info-fg: #C4BDFF; --msg-info-bd: rgba(124, 108, 255, 0.30);
  --msg-warn-bg: rgba(255, 181, 71, 0.09);  --msg-warn-fg: #FFCB7A; --msg-warn-bd: rgba(255, 181, 71, 0.26);

  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-drawer: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-btn: 0 0 20px rgba(122, 107, 255, 0.45);
  --shadow-btn-hover: 0 0 26px rgba(122, 107, 255, 0.6);
  --focus-ring: 0 0 0 3px rgba(124, 108, 255, 0.35);
  color-scheme: dark;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg-glow), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
a { color: var(--blue); }
code { color: inherit; }

/* ---------------------------------------------------------------------------
 * 側欄導覽（admin.js renderNav 注入到 #app-topbar）
 * 手機／平板（<1024px）：頂端細列＋漢堡，展開成下拉抽屜。
 * 桌機（≥1024px）：固定在左側，內容區讓出 --sidebar-w。
 * ------------------------------------------------------------------------- */

#app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: block;
  min-height: var(--nav-h);
  padding: 0;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 14px;
}
#app-topbar .topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.topbar-brand .brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--brand-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-btn);
}
.topbar-brand .brand-text small {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 1;
  letter-spacing: 0.02em;
}

#nav-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}

.sb-panel { display: none; }
#app-topbar.nav-open .sb-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  padding: 12px 12px 18px;
  background: var(--drawer-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-drawer);
}

.sb-merchant {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  min-width: 0;
}
.sb-merchant-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--brand-tint);
  color: var(--brand-tint-text);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sb-merchant .merchant-name {
  font-size: 0.86rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
}

#app-topbar .topbar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#app-topbar .topbar-nav li { margin: 0; }
.nav-icon { flex: 0 0 auto; color: var(--text-dim); }

#app-topbar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}
#app-topbar .nav-link:hover { background: var(--surface-2); text-decoration: none; }
#app-topbar .nav-link.active { background: var(--brand-tint); color: var(--brand-tint-text); font-weight: 600; }
#app-topbar .nav-link.active .nav-icon { color: var(--brand-tint-text); }

.nav-group { margin-top: 10px; }
.nav-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.nav-group.active .nav-group-label { color: var(--brand-tint-text); }
.nav-group.active .nav-group-label .nav-icon { color: var(--brand-tint-text); }
.nav-sublist { list-style: none; margin: 0; padding: 0 0 0 17px; }
#app-topbar .nav-sublink {
  display: block;
  padding: 6px 10px 6px 20px;
  border-radius: 0; /* style.css 的 .topbar-nav a 是 999px 膠囊，不重設會把左框線畫成弧形 */
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.86rem;
  white-space: nowrap;
}
#app-topbar .nav-sublink:hover { color: var(--text); text-decoration: none; background: var(--surface-2); border-radius: 0 8px 8px 0; }
#app-topbar .nav-sublink.active {
  color: var(--brand-tint-text);
  font-weight: 600;
  border-left: 2px solid var(--teal);
  padding-left: 19px;
  background: var(--brand-tint);
  border-radius: 0 8px 8px 0;
}

#app-topbar .topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
#app-topbar .topbar-user .topbar-account {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 10px;
}
#app-topbar .topbar-user .topbar-account:hover { background: var(--brand-tint); }
#app-topbar .topbar-user .topbar-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-topbar .topbar-user .topbar-account-label { flex: 0 0 auto; white-space: nowrap; }
#app-topbar .topbar-user .topbar-account-label {
  color: var(--text-muted);
  opacity: 1;
  border-left: 1px solid var(--border-strong);
}
#app-topbar .topbar-user #btn-logout,
#app-topbar .topbar-user #btn-theme {
  background: var(--panel);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 12px;
  font-weight: 500;
}
#app-topbar .topbar-user #btn-logout:hover { color: var(--danger); border-color: var(--danger-border); background: var(--panel); }
#app-topbar .topbar-user #btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 7px 0;
}
#app-topbar .topbar-user #btn-theme:hover { color: var(--text); background: var(--surface-2); }
/* 顯示「按下去會切到哪個模式」的圖示：深色時顯示太陽、淺色時顯示月亮。 */
#btn-theme .theme-icon-moon { display: block; }
#btn-theme .theme-icon-sun { display: none; }
:root[data-theme="dark"] #btn-theme .theme-icon-moon { display: none; }
:root[data-theme="dark"] #btn-theme .theme-icon-sun { display: block; }

@media (min-width: 1024px) {
  body:has(> #app-topbar) { padding-left: var(--sidebar-w); }
  #app-topbar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; /* style.css 頂列是 wrap——直向時會把內容折成第二欄 */
    /* style.css 頂列是 align-items: center——直向時變成「水平置中」，內容比側欄寬就左右各
     * 溢出一截、左邊被切掉（2026-09-24 正式站實際踩到：商戶名較長時圖示與字首被裁）。 */
    align-items: stretch;
    gap: 0;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    background: var(--sidebar-bg);
  }
  .sb-head { height: 64px; padding: 0 16px; flex: 0 0 auto; }
  #nav-hamburger { display: none; }
  .sb-panel,
  #app-topbar.nav-open .sb-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #app-topbar .topbar-nav { flex: 1 1 auto; }
  #app-topbar .topbar-user { margin-top: auto; }
}

/* 狹窄手機：帳號鈕只留「帳號設定」字樣（同 style.css 既有 560px 規則的意圖）。 */
@media (max-width: 560px) {
  #app-topbar .topbar-user .topbar-account-name { display: none; }
  #app-topbar .topbar-user .topbar-account-label { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------------
 * 版面
 * ------------------------------------------------------------------------- */

.page {
  max-width: 1120px;
  padding: 20px 16px 56px;
}
@media (min-width: 1024px) {
  .page { padding: 32px 40px 64px; }
}
.page h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}
.page h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  margin: 28px 0 12px;
}
.page-lead { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 22px; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * 表單
 * ------------------------------------------------------------------------- */

label { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.field-hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 4px; }

input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], input[type="url"], input[type="time"],
input[type="date"], input[type="datetime-local"], input[type="month"], select, textarea {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--focus-ring);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); }

/* ---------------------------------------------------------------------------
 * 按鈕：主要＝靛紫藍漸層＋柔光；其餘一律面板底細框，靠層級而不是彩度區分。
 * ------------------------------------------------------------------------- */

button, .btn {
  border-radius: 10px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-strong);
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.05s;
}
button:hover, .btn:hover { background: var(--surface-2); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary, .btn-teal {
  background: var(--brand-grad);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover, .btn-teal:hover {
  background: var(--brand-grad-hover);
  box-shadow: var(--shadow-btn-hover);
}
.btn-ghost { background: var(--panel); border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--panel); color: var(--danger); border: 1px solid var(--danger-border); }
.btn-danger:hover { background: var(--danger-hover-bg); }
.btn-sm { padding: 5px 11px; font-size: 0.8rem; border-radius: 8px; }
button:disabled, .btn:disabled { box-shadow: none; transform: none; }

.chip { border-color: var(--border-strong); color: var(--text-muted); background: var(--panel); }
.chip-active { background: var(--brand-tint); border-color: var(--brand-tint-border); color: var(--brand-tint-text); }

/* ---------------------------------------------------------------------------
 * 表格：無底色表頭、細分隔線、滑過整列淡顯。
 * ------------------------------------------------------------------------- */

.table-scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}
table { font-size: 0.87rem; }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
th {
  background: transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--row-hover); }
td.num, th.num { text-align: right; font-family: var(--font-num); font-size: 0.84rem; }

/* ---------------------------------------------------------------------------
 * 狀態標籤：膠囊＋前置圓點（顏色語意不變：綠＝完成、橘＝待處理、紅＝失敗、灰＝無效、紫＝特殊）。
 * ------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 9px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge-published, .badge-paid, .badge-scheduled, .badge-active, .badge-attended { background: var(--ok-bg); color: var(--ok); }
.badge-pending, .badge-partial_refunded, .badge-suspended, .badge-linked-cancelled, .badge-unpaid { background: var(--warn-bg); color: var(--warn); }
.badge-failed, .badge-cancelled, .badge-danger { background: var(--bad-bg); color: var(--danger); }
.badge-draft, .badge-refunded, .badge-archived, .badge-ended, .badge-voided { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-closed, .badge-cancel_scheduled, .badge-addon { background: var(--violet-bg); color: var(--violet-fg); }

/* ---------------------------------------------------------------------------
 * 訊息條
 * ------------------------------------------------------------------------- */

.msg { border-radius: 10px; padding: 11px 14px; border: 1px solid transparent; }
.msg-error { background: var(--msg-err-bg); color: var(--msg-err-fg); border-color: var(--msg-err-bd); }
.msg-ok { background: var(--msg-ok-bg); color: var(--msg-ok-fg); border-color: var(--msg-ok-bd); }
.msg-info { background: var(--msg-info-bg); color: var(--msg-info-fg); border-color: var(--msg-info-bd); }
.msg-warn { background: var(--msg-warn-bg); color: var(--msg-warn-fg); border-color: var(--msg-warn-bd); }

.empty-hint { color: var(--text-dim); }

/* ---------------------------------------------------------------------------
 * 儀表板數字卡：數字用等寬字，跟設計稿 KPI 卡同一套語彙。
 * ------------------------------------------------------------------------- */

/* auto-fit：儀表板四張、其他頁三張都能一列排滿，不會剩一張孤零零掉到第二列。 */
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
.stat-grid { gap: 16px; }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.stat-card .stat-value {
  font-family: var(--font-num);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.stat-card .stat-label { font-size: 0.84rem; font-weight: 600; color: var(--text-muted); margin-top: 4px; }

.share-box code, .onboarding-url { background: var(--surface-2); border: 1px solid var(--border); }
.product-card { border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-card); }

/* 新手上路卡：原本寫死的青色 rgba(19,176,182,…) 換成主色系。 */
.onboarding-card { border-left: 3px solid var(--teal); }
.onboarding-done { background: var(--brand-tint); border-color: var(--brand-tint-border); }
.onboarding-check.done { background: var(--teal); border-color: var(--teal); }

/* ---------------------------------------------------------------------------
 * style.css 裡後台會用到、但顏色寫死的元件——改接 token，淺色值跟原本一致或同一色系，
 * 深色自然跟著換。
 * ------------------------------------------------------------------------- */

.product-hint { background: var(--surface-2); color: var(--text-muted); }
.product-hint-warn { background: var(--msg-warn-bg); border-color: var(--msg-warn-bd); color: var(--msg-warn-fg); }
.onboarding-lead, .onboarding-step-hint { color: var(--text-muted); }
.onboarding-step { border-top-color: var(--border); }
.onboarding-check { border-color: var(--border-strong); }
.month-head { color: var(--text-muted); }
.month-cell { background: var(--panel); border-color: var(--border); color: var(--text); }
.month-cell-selected { background: var(--teal); color: #fff; }
.slot-time-btn { background: var(--panel); color: var(--text); }
.slot-time-btn.selected { background: var(--teal); color: #fff; }
/* QR 圖一定要白底才掃得到——深色模式也不改。 */
.qr-box img { background: #fff; border-color: var(--border); }

/* 行事曆格內文字（語意：灰＝空檔、藍＝一對一、綠＝可約、紅＝額滿）。 */
.cal-cell.cal-gap { color: var(--text-dim); }
.cal-cell.cal-booked-1on1 { color: var(--blue); }
.cal-cell.cal-open { color: var(--ok); }
.cal-cell.cal-full { color: var(--danger); }

/* 儀表板收入趨勢長條圖 */
.trend-bar { background: var(--brand-grad); }
.trend-bar.is-zero { background: var(--border-strong); }
.trend-col-label, .trend-empty { color: var(--text-muted); }
.trend-col-value { color: var(--text); }

.ask-alf-btn {
  background: var(--brand-grad);
  box-shadow: var(--shadow-btn);
}
.guide-help-toggle { background: var(--panel); }
.ask-alf-badge { box-shadow: 0 0 0 2px var(--panel); }

/* ---------------------------------------------------------------------------
 * 各頁 <style> 寫死的淺色值（只列深色下會看不清楚的那些）。放這裡集中管，
 * 不逐頁改——各頁的淺色外觀因此逐位元不變。
 * ------------------------------------------------------------------------- */

:root[data-theme="dark"] .heat-table th { color: var(--text-muted); }
:root[data-theme="dark"] .heat-table td { border-color: var(--border); }
:root[data-theme="dark"] .heat-table td.heat-off {
  color: var(--text-dim);
  background: repeating-linear-gradient(45deg, #0F1122, #0F1122 3px, #151830 3px, #151830 6px);
}
:root[data-theme="dark"] tr.risk-row td { background: rgba(255, 181, 71, 0.08); }
:root[data-theme="dark"] tr.risk-row.risk-expired td { background: rgba(255, 107, 122, 0.09); }
:root[data-theme="dark"] .headline .box { border-color: var(--border); background: var(--panel); }
:root[data-theme="dark"] .headline .cap { color: var(--text-muted); }
:root[data-theme="dark"] .scan-panel { background: var(--surface-2); }
:root[data-theme="dark"] .scan-panel.ok { background: rgba(61, 220, 151, 0.14); }
:root[data-theme="dark"] .scan-panel.warn { background: rgba(255, 181, 71, 0.14); }
:root[data-theme="dark"] .scan-panel.err { background: rgba(255, 107, 122, 0.15); }
:root[data-theme="dark"] .scan-note { color: var(--text-muted); }
:root[data-theme="dark"] .camp-block-row td { background: var(--surface-2); }
:root[data-theme="dark"] .rmc-icon-selected,
:root[data-theme="dark"] .rmt-item.rmt-selected { background: var(--brand-tint); }

/* ---------------------------------------------------------------------------
 * 登入／忘記密碼／重設密碼頁：深色底＋靛紫光暈，卡片置中。
 * 淺色模式卡片白底；深色模式卡片改成半透明深色玻璃。
 * ------------------------------------------------------------------------- */

.login-wrap {
  background:
    radial-gradient(60% 55% at 15% 0%, rgba(122, 107, 255, 0.35) 0%, rgba(122, 107, 255, 0) 70%),
    radial-gradient(50% 50% at 90% 10%, rgba(79, 155, 255, 0.28) 0%, rgba(79, 155, 255, 0) 70%),
    #06070D;
}
.login-card {
  background: var(--panel);
  color: var(--text);
  border-radius: 18px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .login-card {
  background: rgba(15, 17, 34, 0.82);
  border-color: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.login-brand .wordmark {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.02em;
}
.login-card button[type="submit"] { padding: 11px 16px; }

/* ---------------------------------------------------------------------------
 * 儀表板「今日課程」卡（index.html，資料整理見 assets/dashboard-today.js）。
 * 一列＝時間｜課名＋教練場地｜名額進度條｜狀態；整列可點（團體班次進名單、一對一進行事曆）。
 * 手機只留時間、課名、狀態，進度條收起——窄螢幕上它擠不下，數字在名單頁一樣看得到。
 * ------------------------------------------------------------------------- */

/* 今日課程＋待處理並排：桌機 2:1，窄螢幕上下疊。兩張卡各自的 margin 交給 grid gap。 */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.dash-grid > .card { margin-bottom: 0; }
.today-card { padding: 18px 20px 8px; }
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.page h2.today-title { margin: 0; font-size: 1rem; }
.today-date { margin-left: 8px; font-family: var(--font-num); font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.today-link { font-size: 0.84rem; font-weight: 500; white-space: nowrap; }
.today-list { display: flex; flex-direction: column; }
.today-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  margin: 0 -6px;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.today-row:last-child { border-bottom: 0; }
.today-row:hover { background: var(--row-hover); text-decoration: none; }
.today-time { font-family: var(--font-num); font-size: 0.86rem; font-weight: 700; }
.today-main { display: flex; flex-direction: column; min-width: 0; }
.today-name { font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-cap { display: none; }
.today-status { text-align: right; }
@media (min-width: 640px) {
  .today-row { grid-template-columns: 56px minmax(0, 1fr) 130px 92px; }
  .today-cap { display: flex; flex-direction: column; gap: 6px; }
}
.today-cap-num { font-family: var(--font-num); font-size: 0.78rem; color: var(--text-muted); }
.today-bar { display: block; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.today-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-grad); }
.today-bar-fill.is-hot { background: linear-gradient(90deg, var(--warn), var(--danger)); }

/* 待處理卡：圓點＋標題＋說明＋右箭頭，整列可點。 */
.todo-card { padding: 18px 20px 8px; }
.todo-list { display: flex; flex-direction: column; }
.todo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 6px; margin: 0 -6px;
  border-bottom: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.todo-row:last-child { border-bottom: 0; }
.todo-row:hover { background: var(--row-hover); text-decoration: none; }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.todo-dot.todo-bad { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.todo-dot.todo-warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.todo-dot.todo-info { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.todo-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.todo-title { font-size: 0.9rem; font-weight: 600; }
.todo-detail { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.todo-chev { flex: 0 0 auto; color: var(--text-dim); }
.todo-empty { padding: 18px 0 14px; font-size: 0.86rem; color: var(--text-muted); }

/* 數字卡的趨勢小圖＋較上期標籤（index.html loadSeries，座標見 dashboard-today.js sparkPoints）。
 * 小圖在數字與標題之間，線是品牌漸層色、下方淡淡填色。 */
/* 標籤跟卡片標題同一列（不疊在大數字上：金額位數一長就會撞到）。 */
.stat-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.stat-label-row .stat-label { margin-top: 0; }
.stat-delta { flex: 0 0 auto; }
.stat-spark { height: 44px; margin: 8px 0 6px; }
.stat-spark:empty { display: none; }
.stat-spark svg { display: block; overflow: visible; }
.spark-line { stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:root[data-theme="dark"] .spark-line { filter: drop-shadow(0 0 5px rgba(124, 108, 255, 0.7)); }
.spark-stop-top { stop-color: var(--teal); stop-opacity: 0.28; }
.spark-stop-bottom { stop-color: var(--teal); stop-opacity: 0; }

/* 權限分級（2026-09-25，spec docs/superpowers/specs/2026-09-25-staff-roles-design.md §3）：標了 data-cap 的
   元素，admin.js 確認登入者有該能力才會加上 data-cap-ok；在那之前（含 /me 還沒回來）一律不顯示。
   !important：頁面程式把 hidden 改成 false 也蓋不過。只是體驗，後端每條路由照擋。 */
[data-cap]:not([data-cap-ok]) { display: none !important; }