/* =============================================================== ATM 後台
   設計語言：賽車 Telemetry Dashboard × Observability / DevOps 控制台
   ------------------------------------------------------------------------
   1. 深色為預設（控制台就是黑底），淺色為備用，兩套共用同一組變數。
   2. 所有數字用等寬字（tabular-nums），上下列對得齊，掃一眼就比得出大細。
   3. 面板 = 儀器盤：直角、細框、標題列做成儀器標籤（左邊一條訊號色條）。
   4. 狀態一律用 LED 小圓點 + 顏色，綠＝正常、黃＝注意、紅＝異常。
   5. 間距 8px 步長；表格與卡片的內距全站一套，不給使用者調。
   ========================================================================= */

/* ------------------------------------------------------------ 顏色與變數 */
:root {
  color-scheme: dark;
  /* 深色：儀表板預設 */
  --bg: #080b10;
  --surface: #0f141b;
  --surface-2: #151c25;
  --surface-3: #1d2733;
  --border: #1e2836;
  --border-strong: #2c3a4b;
  --text: #e6eef7;
  --text-dim: #8496aa;
  --text-faint: #5b6b7f;

  --accent: #ff6b35;        /* 訊號橙：賽車儀錶的主色 */
  --accent-ink: #0b0f14;
  --green: #35d07f;
  --yellow: #f2c744;
  --orange: #ff8f3f;
  --red: #ff4d5e;
  --blue: #4da3ff;

  /* 影子賽跑：跑道是實物的顏色，深淺色主題都一樣 */
  --track: #b5452f;          /* 塑膠跑道紅 */
  --track-line: rgba(255, 255, 255, .85);
  --fig-you: #9acd32;        /* 你：黃綠色人形 */
  --fig-bolt: #e9edf2;       /* Bolt：淺灰人形 */

  /* 左側導航：比工作區再深一級，像機櫃側板 */
  --nav-bg: #06090d;
  --nav-bg-2: #131b25;
  --nav-text: #b8c6d6;
  --nav-text-dim: #5f7086;
  --nav-border: #17202b;

  /* 底紋格線（儀器盤的方格背景） */
  --grid-line: rgba(120, 160, 200, .045);

  --shadow-1: 0 1px 0 rgba(255, 255, 255, .02);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
  --radius: 4px;
  --radius-sm: 3px;

  --mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", "DIN Alternate",
          Consolas, "Roboto Mono", ui-monospace, monospace;

  --sb-w: 228px;      /* 側欄展開寬度 */
  --sb-w-min: 60px;   /* 側欄收合寬度（只留圖示） */
  --top-h: 52px;

  /* 表格與卡片內距 */
  --cell-y: 9px;
  --cell-x: 13px;
  --card-pad: 16px;
}

:root[data-theme="light"] {
  color-scheme: light;
  /* 淺色：白天在場邊看得清 */
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f3f6fa;
  --surface-3: #e6ecf4;
  --border: #dde4ee;
  --border-strong: #bcc7d6;
  --text: #131a24;
  --text-dim: #5b6b80;
  --text-faint: #8a99ac;

  --accent: #e8551b;
  --accent-ink: #ffffff;
  --green: #12a05f;
  --yellow: #b8860b;
  --orange: #d9600f;
  --red: #d92d43;
  --blue: #1f6feb;

  --nav-bg: #0a0f16;
  --nav-bg-2: #17212e;
  --nav-text: #c2cedd;
  --nav-text-dim: #6b7c92;
  --nav-border: #1b2532;

  --grid-line: rgba(30, 60, 100, .04);

  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-2: 0 10px 28px rgba(15, 23, 42, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  /* 儀器盤的方格底紋：淡到只有「有質感」的程度，不搶內容 */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "PingFang SC",
               "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, canvas, svg { max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 全站的數字：等寬對齊 */
.num, .mono, td .num, .stat .value, .badge, .crumb, code { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 版面骨架 */
.applayout { display: flex; align-items: flex-start; min-height: 100vh; }

/* ------------------------------------------------------------ 左側主導航 */
.sidebar {
  position: sticky; top: 0;
  width: var(--sb-w); flex: none; height: 100vh;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  display: flex; flex-direction: column;
  z-index: 60;
  transition: width .16s ease;
}
:root.sb-collapsed .sidebar { width: var(--sb-w-min); }

.sb-brand {
  height: var(--top-h); flex: none;
  display: flex; align-items: center; padding: 0 14px;
  border-bottom: 1px solid var(--nav-border);
  overflow: hidden;
  /* 頂部一條訊號色條，像儀器開機燈 */
  box-shadow: inset 0 2px 0 var(--accent);
}
.sb-brand .brand {
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1.5px;
  white-space: nowrap; font-family: var(--mono);
  display: flex; align-items: center; gap: 9px;
}
/* 顏色全部擺喺個場度：紅跑道、白線、綠草地。字保持白色，唔同標誌搶。 */
.brandmark { flex: none; width: 32px; height: 22px; display: block; }
.sb-brand .brand:hover .brandmark { filter: brightness(1.12); }
.sb-brand .brand:hover { text-decoration: none; }
.brand span { color: var(--accent); margin: 0 1px; }
/* .brandtext 本身都係個 span，唔擋返轉頭成個字就會變埋橙色；
   橙色淨係留畀中間粒點。 */
.sb-brand .brandtext { color: #fff; margin: 0; }
.brand b { font-weight: 600; letter-spacing: 0; font-family: inherit; }
:root.sb-collapsed .sb-brand { padding: 0; justify-content: center; }
/* 收埋側欄得 60px 闊，擺唔落標誌加字——留個場，佢自己認得出。 */
:root.sb-collapsed .sb-brand .brandtext { display: none; }
:root.sb-collapsed .sb-brand .brand b,
:root.sb-collapsed .sb-brand .brand span { display: none; }

.nav { flex: 1; overflow-y: auto; padding: 10px 8px; }
.nav-group + .nav-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nav-border); }
.nav-title {
  color: var(--nav-text-dim); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; padding: 4px 10px 6px;
  font-family: var(--mono); text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: var(--nav-text); font-size: 13.5px; font-weight: 500;
  white-space: nowrap; position: relative;
  border-left: 2px solid transparent;
}
.nav-item:hover { background: var(--nav-bg-2); color: #fff; text-decoration: none; }
.nav-item.active {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 22%, transparent), transparent 78%);
  border-left-color: var(--accent);
  color: #fff; font-weight: 600;
}
.nav-item.active .ic { stroke-width: 2; color: var(--accent); }

:root.sb-collapsed .nav-title { padding: 6px 0; font-size: 0; text-align: center; }
:root.sb-collapsed .nav-title::before { content: "···"; font-size: 12px; letter-spacing: 2px; }
:root.sb-collapsed .nav-item { justify-content: center; padding: 10px 0; border-left-width: 0; }
:root.sb-collapsed .nav-item.active { box-shadow: inset 2px 0 0 var(--accent); }
:root.sb-collapsed .nav-item > span,
:root.sb-collapsed .sb-collapse > span { display: none; }
/* 收合後把名稱做成滑過時浮出的標籤 */
:root.sb-collapsed .nav-item:hover::after,
:root.sb-collapsed .sb-collapse:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: var(--nav-bg-2); color: #fff; border: 1px solid var(--border-strong);
  padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px;
  white-space: nowrap; box-shadow: var(--shadow-2); z-index: 70;
}

.sb-foot { flex: none; padding: 8px; border-top: 1px solid var(--nav-border); }
/* 側欄最底：模式、訓練系統、語言、登入身份。側欄永遠是深色，選單也跟著用深色 */
.sb-meta { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 8px; color-scheme: dark; }
.sb-meta .modechip { align-self: flex-start; }
.sb-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-label {
  color: var(--nav-text-dim); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  font-family: var(--mono); white-space: nowrap;
}
.sb-pick .langpick {
  flex: 1 1 auto; min-width: 0; max-width: 150px; height: 28px;
  background: var(--nav-bg-2); border-color: var(--nav-border);
}
.sb-pick .langpick select {
  width: 100%; min-width: 0; max-width: none; height: 26px; color: var(--nav-text); background: transparent;
}
.sb-pick .langpick select option { background: var(--nav-bg-2); color: var(--nav-text); }
.sb-foot .userbox {
  padding: 8px 2px; margin-bottom: 4px;
  border-top: 1px solid var(--nav-border); border-left: 0;
}
.sb-foot .userbox .uinfo { flex: 1 1 auto; min-width: 0; }
.sb-foot .userbox .uinfo b {
  color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-foot .userbox .uinfo em { color: var(--nav-text-dim); }
.sb-foot .userbox .btn { color: var(--nav-text); border-color: var(--nav-border); }
.sb-foot .userbox .btn:hover { color: #fff; border-color: var(--nav-text-dim); }
/* 收合成 60px：只剩頭像（滑過有名字），模式、系統、語言、登出要展開側欄才看得到 */
:root.sb-collapsed .sb-meta,
:root.sb-collapsed .sb-foot .userbox .uinfo,
:root.sb-collapsed .sb-foot .userbox form { display: none; }
:root.sb-collapsed .sb-foot .userbox { justify-content: center; padding: 8px 0; }
.sb-collapse {
  width: 100%; position: relative;
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--nav-text-dim); font: inherit; font-size: 12px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  letter-spacing: .5px;
}
.sb-collapse:hover { background: var(--nav-bg-2); color: #fff; }
:root.sb-collapsed .sb-collapse { justify-content: center; }
:root.sb-collapsed .sb-collapse .ic { transform: rotate(180deg); }

.sb-scrim { display: none; }

/* ------------------------------------------------------ 頂部狀態列 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--top-h); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  font-family: var(--mono); letter-spacing: .3px;
  /* 頂欄是固定高度：麵包屑一換行就把整條頂欄撐爆、右邊那排會壓上來。
     這裡一律不換行，寬度不夠就自己縮、末段用「…」收尾。 */
  min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden;
}
.crumb > * { flex: none; }
.crumb a { color: var(--text-dim); display: flex; }
.crumb a:hover { color: var(--accent); text-decoration: none; }
.crumb i { color: var(--text-faint); font-style: normal; }
.crumb b, .crumb .crumb-who {
  color: var(--text); font-weight: 600;
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
}

.topsearch {
  flex: 1; max-width: 320px; margin-left: auto; margin-right: 4px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 10px; height: 32px;
  color: var(--text-faint);
}
.topsearch:focus-within { border-color: var(--accent); background: var(--surface-2); }
.topsearch input {
  border: 0; background: transparent; padding: 0; height: 30px;
  font-size: 13px; color: var(--text); width: 100%;
}
.topsearch input:hover { border: 0; }
.topsearch input:focus { outline: none; border: 0; box-shadow: none; }

.topacts { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); color: var(--accent); border-color: var(--border); }
:root[data-theme="dark"] .light-only { display: none; }
:root:not([data-theme="dark"]) .dark-only { display: none; }

/* 語言切換（側欄最底；登入頁置中） */
.langpick {
  display: flex; align-items: center; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 6px; height: 32px; background: var(--bg);
}
.langpick select {
  border: 0; background: transparent; width: auto; padding: 0 2px;
  font-size: 11px; color: var(--text); height: 30px; font-family: var(--mono);
}
.langpick select:hover { border: 0; }
.langpick select:focus { outline: none; box-shadow: none; }
/* 只給讀螢幕的軟件看的字 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) { .langpick { padding: 0 2px; } }

/* 頂欄的運動員切換器：整個系統只有這一個，換頁時人跟著走 */
.athletepick {
  display: flex; align-items: center; gap: 6px; margin: 0;
  height: 32px; padding: 0 6px 0 9px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--accent);
  font-size: 12px; max-width: 240px;
}
.athletepick .ic { width: 14px; height: 14px; flex: none; }
.athletepick select {
  border: 0; background: transparent; width: auto; max-width: 190px; padding: 0 2px;
  height: 30px; font-size: 12px; color: var(--text);
}
.athletepick select:hover { border: 0; }
.athletepick select:focus { outline: none; box-shadow: none; }
.athletepick.solo { color: var(--text); gap: 7px; padding-right: 10px; }

/* 麵包屑最後一段：這一頁看的是誰 */
/* display:block（不是上面 .crumb a 的 flex），名字太長才截得成「…」 */
.crumb .crumb-who { color: var(--accent); font-weight: 600; display: block; }

/* 同一位運動員的跨頁快捷（頁面抬頭右邊那一排） */
.athletejump { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.athletejump .btn.warn { border-color: var(--yellow); color: var(--yellow); }

/* 課表頁的上一課／下一課 */
.sessionnav { display: flex; align-items: center; gap: 6px; }
.btn.disabled, .btn.ghost.disabled {
  opacity: .38; pointer-events: none; cursor: default;
}

/* 課後檢討：填過就收起來，不再佔一整塊版面 */
.recap > summary {
  cursor: pointer; list-style: none; margin-bottom: 10px;
  font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 6px;
}
.recap > summary::-webkit-details-marker { display: none; }
.recap > summary::before { content: "▸"; color: var(--accent); }
.recap[open] > summary::before { content: "▾"; }
.recap > summary:hover { color: var(--accent); }

.userbox {
  display: flex; align-items: center; gap: 8px;
  padding-left: 10px; border-left: 1px solid var(--border);
}
.userbox .avatar {
  width: 28px; height: 28px; border-radius: var(--radius-sm); flex: none;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; font-family: var(--mono);
}
.userbox .avatar { overflow: hidden; }
.userbox .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.userbox .uinfo { display: flex; flex-direction: column; line-height: 1.25; }

/* 狀態總覽頭部：左邊圓形頭像（按下去揀相即上傳），右邊名字與基本資料 */
.whohead { display: flex; align-items: center; gap: 14px; }
.whohead h1 { margin: 0; }
.whohead > div { min-width: 0; }
.avatarform { margin: 0; flex: none; }
.avatar-xl {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--border-strong);
  font: 700 28px/1 var(--mono);
}
.avatar-xl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-xl.is-edit { cursor: pointer; }
.avatar-xl .avatar-cam {
  position: absolute; inset: auto 0 0 0; padding: 3px 0 5px;
  background: rgba(4, 7, 11, .62); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1; text-align: center; letter-spacing: .5px;
  opacity: 0; transition: opacity .15s;
}
.avatar-xl.is-edit:hover .avatar-cam,
.avatar-xl.is-edit:focus-within .avatar-cam { opacity: 1; }
.avatar-xl.is-edit:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 手機沒有 hover：「更改」一直顯示，才知道可以按 */
@media (hover: none) { .avatar-xl.is-edit .avatar-cam { opacity: 1; } }
@media (max-width: 420px) { .avatar-xl { width: 60px; height: 60px; font-size: 24px; } }

/* 個人最佳卡：每項只有 PB 與 SB；比賽成績清單在對話框裡，窄螢幕橫向捲動 */
.pbsb td { vertical-align: top; }
.results-wrap { overflow-x: auto; margin: 0 -4px; }
.results td { vertical-align: top; }
.results td:first-child .num, .pbsb .small .num { white-space: nowrap; }
.pbsb-season { display: block; font-weight: 400; }
.results .badge { margin-left: 4px; }
.userbox .uinfo b { font-size: 12.5px; font-weight: 600; }
.userbox .uinfo em {
  font-style: normal; font-size: 10px; color: var(--text-dim);
  letter-spacing: 1px; font-family: var(--mono);
}

/* ------------------------------------------------------------- 主工作區 */
.wrap { width: 100%; max-width: 1520px; margin: 0 auto; padding: 20px 24px 40px; }

h1 {
  font-size: 20px; font-weight: 600; margin-bottom: 4px; letter-spacing: .2px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
h1::before {
  content: ""; width: 3px; height: 18px; flex: none;
  background: var(--accent); border-radius: 1px;
}
h2 {
  font-size: 14px; margin-bottom: 12px; font-weight: 600; letter-spacing: .4px;
}
h3 {
  font-size: 11.5px; margin-bottom: 8px; color: var(--text-dim); font-weight: 700;
  letter-spacing: 1px; font-family: var(--mono); text-transform: uppercase;
}
.subtitle { color: var(--text-dim); margin-bottom: 20px; font-size: 12.5px; }

/* ---------------------------------------------------------------- 面板 */
.grid { display: grid; gap: 12px; }
/* minmax 的最小值要夾 100%：容器比它窄時（例如卡片裡再放一層格線），
   欄寬會硬撐成 340px 直接捅穿版面，手機上就是整頁可以左右拉。 */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(186px, 100%), 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-1);
}
.card:hover { border-color: var(--border-strong); }
.card.pad0 { padding: 0; overflow: hidden; }
.card-head {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-weight: 600; font-size: 12.5px; letter-spacing: .5px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  box-shadow: inset 2px 0 0 var(--border-strong);
}
.card-head .small { letter-spacing: 0; font-weight: 500; }

/* -------------------------------------------------------- 指標看板 KPI */
.stat { position: relative; }
.stat .label {
  color: var(--text-dim); font-size: 11.5px; letter-spacing: 1px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); text-transform: uppercase;
}
.stat .value {
  font-size: 32px; font-weight: 600; line-height: 1.1; margin-top: 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.stat .value.sm { font-size: 22px; }
.stat .hint { color: var(--text-dim); font-size: 11.5px; margin-top: 5px; }
.stat .label .linkbtn { font-size: 10.5px; color: var(--accent); opacity: .9; letter-spacing: .5px; }
.stat .label .linkbtn:hover { opacity: 1; color: var(--accent); text-decoration: underline; }

.c-green  { color: var(--green); }
.c-yellow { color: var(--yellow); }
.c-orange { color: var(--orange); }
.c-red    { color: var(--red); }
.c-blue   { color: var(--blue); }
.c-dim    { color: var(--text-dim); }
.c-accent { color: var(--accent); }

/* -------------------------------------------------------------- 狀態標籤 */
/* LED 式：一粒訊號燈 + 標籤字，跟監控台一樣一眼看到紅黃綠 */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px 1px 7px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 600; border: 1px solid transparent; line-height: 1.7;
  letter-spacing: .3px; white-space: nowrap;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.b-green  { background: color-mix(in srgb, var(--green) 14%, transparent);  color: var(--green);
            border-color: color-mix(in srgb, var(--green) 36%, transparent); }
.b-yellow { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow);
            border-color: color-mix(in srgb, var(--yellow) 38%, transparent); }
.b-orange { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange);
            border-color: color-mix(in srgb, var(--orange) 36%, transparent); }
.b-red    { background: color-mix(in srgb, var(--red) 13%, transparent);    color: var(--red);
            border-color: color-mix(in srgb, var(--red) 36%, transparent); }
.b-blue   { background: color-mix(in srgb, var(--blue) 13%, transparent);   color: var(--blue);
            border-color: color-mix(in srgb, var(--blue) 34%, transparent); }
.b-dim    { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }
.b-dim::before { box-shadow: none; opacity: .7; }

/* ---------------------------------------------------------------- 表格 */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: var(--cell-y) var(--cell-x);
  font-size: 11.5px; font-weight: 700; letter-spacing: .9px;
  color: var(--text-dim); background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
  font-family: var(--mono); text-transform: uppercase;
}
td {
  padding: var(--cell-y) var(--cell-x); border-bottom: 1px solid var(--border);
  font-size: 13px;
}
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--accent); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
td.num, th.num { text-align: right; }

/* ---------------------------------------------------------------- 圖表 */
.chart-box {
  position: relative; height: 250px; padding: 14px;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 25%,
    transparent;
}
.chart-box.tall { height: 320px; }
/* three.js 版（analytics-3d.js）：立體圖鋪滿整個框，Chart.js 那張收起但保留位置 */
.chart-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-box.is-3d > canvas:not(.chart-3d-canvas) { visibility: hidden; }
.c3d-tip {
  position: absolute; z-index: 2; pointer-events: none; min-width: 140px; padding: 6px 8px;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); border-radius: 3px;
  font: 11px/1.5 var(--mono);
}
.btn.ghost[data-c1-3d][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* -------------------------------------------------------------- 日曆 */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); }
.cal .dow {
  background: var(--surface-2); padding: 7px; text-align: center;
  font-size: 11px; color: var(--text-dim); font-weight: 700;
  letter-spacing: .9px; font-family: var(--mono);
}
.cal .day { background: var(--surface); min-height: 92px; padding: 5px; }
.cal .day.other { background: var(--bg); opacity: .55; }
.cal .day.today { box-shadow: inset 0 0 0 1px var(--accent), inset 0 2px 0 var(--accent); }
.cal .daynum { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; font-family: var(--mono); }
.cal .ev {
  display: block; font-size: 11.5px; padding: 2px 6px; border-radius: 2px;
  margin-bottom: 2px; background: var(--surface-2); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal .ev:hover { text-decoration: none; background: var(--surface-3); }
.cal .ev.done { border-left: 3px solid var(--green); }
.cal .ev.planned { border-left: 3px solid var(--blue); }
.cal .ev.partial { border-left: 3px solid var(--yellow); }
.cal .ev.skipped { border-left: 3px solid var(--red); }
/* 比賽：重要比賽用強調色，熱身賽淡一級——一眼分得出哪一天是正賽 */
.cal .ev.meet {
  border-left: 3px solid var(--accent); font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}
.cal .ev.meet.warmup {
  border-left: 3px solid var(--yellow); font-weight: 600;
  background: color-mix(in srgb, var(--yellow) 14%, var(--surface));
}

/* ---------------------------------------------------------------- 表單 */
label {
  display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px;
  font-weight: 600; letter-spacing: .8px;
}
input, select, textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border-strong);
  color: var(--text); padding: 7px 10px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13.5px;
}
input[type="number"], input[type="date"], input[type="time"] { font-family: var(--mono); }
/* 剔格同圓格唔跟上面嗰條「輸入框」規則。上面寫死 width:100%，剔格會撐到成行咁闊，
   同一行嘅人名（分享面板嗰啲）被擠到零闊度，望落就似得個剔格、冇咗個名。 */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; border: 0; background: none;
  accent-color: var(--accent);
}
input:hover, select:hover, textarea:hover { border-color: var(--accent); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.field { margin-bottom: 14px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; }
/* 收起的欄位是 .row / .flex 的話，display 會蓋過 hidden——這裡把它壓回去 */
[hidden] { display: none !important; }

/* 預設收起、按按鈕才展開的名單（派課、複製課表用） */
.pickbox {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--bg);
}

.btn {
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  padding: 7px 15px; border-radius: var(--radius-sm);
  font-weight: 600; cursor: pointer; font-size: 13.5px; font-family: inherit;
  white-space: nowrap; letter-spacing: .4px;
}
.btn:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-dim); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none;
                   background: color-mix(in srgb, var(--accent) 8%, transparent); }
.btn.sm { padding: 4px 11px; font-size: 12.5px; }
/* 刪掉東西的按鈕：紅底，按下去之前先看得出這一顆不一樣 */
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------------------------------------------------------------- 其他 */
.progress {
  height: 5px; background: var(--surface-3); border-radius: 1px;
  overflow: hidden; margin-top: 8px;
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--yellow)));
}

/* 提示條：左邊一條訊號色，像 log 的嚴重程度 */
.alert {
  padding: 9px 14px; border-radius: var(--radius); margin-bottom: 14px;
  border: 1px solid; border-left-width: 3px; font-size: 12.5px;
}
.alert.red    { background: color-mix(in srgb, var(--red) 10%, var(--surface));
                border-color: color-mix(in srgb, var(--red) 38%, transparent);
                border-left-color: var(--red); color: var(--red); }
.alert.yellow { background: color-mix(in srgb, var(--yellow) 11%, var(--surface));
                border-color: color-mix(in srgb, var(--yellow) 38%, transparent);
                border-left-color: var(--yellow); color: var(--yellow); }
.alert.green  { background: color-mix(in srgb, var(--green) 10%, var(--surface));
                border-color: color-mix(in srgb, var(--green) 38%, transparent);
                border-left-color: var(--green); color: var(--green); }
.alert.blue   { background: color-mix(in srgb, var(--blue) 10%, var(--surface));
                border-color: color-mix(in srgb, var(--blue) 38%, transparent);
                border-left-color: var(--blue); color: var(--blue); }

.empty {
  text-align: center; color: var(--text-faint); padding: 36px 16px;
  font-size: 12.5px; letter-spacing: .5px;
}
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }
.flex { display: flex; gap: 8px; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.small { font-size: 11.5px; }
.mono { font-variant-numeric: tabular-nums; font-family: var(--mono); }
code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 2px;
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------------- 登入 */
.login-wrap {
  min-height: calc(100vh - 48px); display: flex; align-items: center; justify-content: center;
}
.login-card { width: 100%; max-width: 380px; }
.login-card .brand {
  font-size: 24px; text-align: center; display: block; margin-bottom: 10px;
  color: var(--text); font-weight: 700; font-family: var(--mono); letter-spacing: 2px;
}
.login-card .card { box-shadow: var(--shadow-2); border-top: 2px solid var(--accent); }
.login-hint {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-dim); line-height: 1.9;
}
.login-hint code { color: var(--text); }

/* ------------------------------------------- 日曆：按日期新增 program */
.cal .daynum { display: flex; align-items: center; justify-content: space-between; }
.cal .addday {
  width: 18px; height: 18px; line-height: 1; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  color: var(--text-dim); font-size: 13px; cursor: pointer; opacity: 0;
  transition: opacity .12s;
}
.cal .day:hover .addday { opacity: 1; }
/* 手機／平板沒有 hover，＋ 要一直看得見——不然建課表這件事在手機上沒有入口 */
@media (hover: none) {
  .cal .addday { opacity: .6; border-color: var(--border); }
}
.cal .addday:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cal .day.today .addday { opacity: .7; }

/* ------------------------------------------------ 手機版日曆：一週一列
   7 欄擠在 375px 裡＝每格 50px，課表名稱全被切掉，還要捲 550px 的高度。
   窄螢幕改成一週一列（週一…週日直向排），一格吃滿整個寬度，
   日期與當天的課一眼看得完，＋ 也點得到。 */
@media (max-width: 700px) {
  .cal { grid-template-columns: 1fr; gap: 0; background: transparent; }
  .cal .dow { display: none; }
  .cal .day {
    min-height: 0; padding: 8px 10px; border-bottom: 1px solid var(--border);
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  }
  /* 空白日子縮成一條細線，不用為了沒課的日子捲一整頁 */
  .cal .day:not(:has(.ev)) { padding: 4px 10px; opacity: .5; }
  .cal .day.other { display: none; }          /* 上／下個月補格在清單裡沒有意義 */
  .cal .daynum {
    margin: 0; flex: 0 0 68px; font-size: 12.5px; justify-content: flex-start; gap: 8px;
  }
  .cal .daynum::after {
    content: attr(data-dow); color: var(--text-faint); font-size: 11px;
  }
  .cal .day.today .daynum { color: var(--accent); font-weight: 700; }
  .cal .ev {
    flex: 1 1 100%; margin-left: 68px; white-space: normal; font-size: 13px;
    padding: 7px 9px;
  }
  /* 課表外面包了一層（放 ⧉ 用），一週一列時要由它去吃整個寬度 */
  .cal .evrow { flex: 1 1 100%; margin-left: 68px; }
  .cal .evrow .ev { margin-left: 0; padding-right: 26px; }
  .cal .evrow.acts2 .ev { padding-right: 44px; }
  .cal .addday { opacity: .6; margin-left: auto; }
}

/* 課別色條（左邊界顏色代表狀態，底色代表類別） */
.cal .ev.t-track    { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.cal .ev.t-strength { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); }
.cal .ev.t-recovery { background: color-mix(in srgb, var(--green) 14%, var(--surface)); }
.cal .ev.t-rehab    { background: color-mix(in srgb, var(--yellow) 16%, var(--surface)); }
.cal .ev.t-competition { background: color-mix(in srgb, var(--red) 14%, var(--surface)); }
.cal .ev.t-other    { background: var(--surface-2); }

/* -------------------------------------------------------------- 對話框 */
.dlg {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius); padding: 22px; width: min(620px, 92vw);
  box-shadow: var(--shadow-2);
}
.dlg::backdrop { background: rgba(4, 7, 11, .72); }
.dlg h2 { margin: 0; }

/* 總訓練負荷(估算)：數字本身是一顆掣，撳下去看 ACWR 怎樣算 */
.loadbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent); font-weight: 700; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.loaddlg { width: min(760px, 94vw); }
.loaddlg .loadh { font-size: 14px; margin: 18px 0 6px; }
.loaddlg .loadh:first-child { margin-top: 0; }
.loadtbl { width: 100%; font-size: 13px; }
.loadsteps { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.8; }
/* Gabbett 四區：跟燈號同一套顏色 */
.acwrz-UNDER    { color: var(--blue); }
.acwrz-OPTIMAL  { color: var(--green); }
.acwrz-ELEVATED { color: var(--yellow); }
.acwrz-HIGH     { color: var(--red); }

/* 計算說明分頁：radio ＋ label 做的導覽列，不用 JS，彈窗內容整段換掉都照用 */
.ltabs-bar {
  display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border);
  margin-bottom: 10px; scrollbar-width: none;
}
.ltabs-bar input { position: absolute; opacity: 0; pointer-events: none; }
.ltabs-bar label {
  flex: none; padding: 8px 12px; font-size: 13px; color: var(--text-dim); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.ltabs-bar label:hover { color: var(--text); }
.ltabs-bar input:checked + label { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ltabs-bar input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.ltab-panel { display: none; }
.ltabs:has(#ltab-warmup:checked) .ltab-panel[data-tab="warmup"],
.ltabs:has(#ltab-sprint:checked) .ltab-panel[data-tab="sprint"],
.ltabs:has(#ltab-endurance:checked) .ltab-panel[data-tab="endurance"],
.ltabs:has(#ltab-strength:checked) .ltab-panel[data-tab="strength"],
.ltabs:has(#ltab-compare:checked) .ltab-panel[data-tab="compare"] { display: block; }
.lguide td { vertical-align: top; }
.lguide .lsrc { font-size: 11px; line-height: 1.3; text-align: right; max-width: 190px; margin-left: auto; }
.lbars { display: grid; gap: 10px; margin: 8px 0 6px; }
.lbar-row {
  display: grid; grid-template-columns: 110px 1fr 70px; gap: 4px 10px; align-items: center;
}
.lbar-label { font-size: 13px; }
.lbar { display: flex; height: 14px; border-radius: 4px; background: var(--border); overflow: hidden; }
.lbar-num { font-size: 13px; font-weight: 600; text-align: right; }
.lbar-detail { grid-column: 2 / 4; }
.lbar-warm { background: var(--yellow); }
.lbar-main { background: var(--accent); }
.lbar-cool { background: var(--blue); }
.lkey { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
@media (max-width: 560px) {
  /* 手機放不下五個分頁：換行，不要藏在橫向捲動後面 */
  .ltabs-bar { flex-wrap: wrap; gap: 0 2px; }
  .ltabs-bar label { padding: 7px 9px; }
  .lbar-row { grid-template-columns: 1fr 70px; }
  .lbar { grid-column: 1 / 3; grid-row: 2; }
  .lbar-detail { grid-column: 1 / 3; }
}
.acwrz-INSUFFICIENT { color: var(--text-dim); }
.acttable .estcell { white-space: nowrap; }
.acttable .estcell .estsub { font-size: 11px; }
/* 數據分析每張卡底下的「怎樣收集、怎樣用」 */
.howto { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.howto summary { cursor: pointer; color: var(--blue); }
.howto p, .howto ul { margin: 6px 0 0; line-height: 1.7; }
.howto ul { padding-left: 18px; }
.card-head + .howto, .card > .howto { padding: 0 16px 12px; }

/* 「登紀錄」第一步：挑範疇。三張卡並排，按哪一張就登哪一個範疇 */
.domainpick {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.domainopt {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--surface-2); color: var(--text); text-decoration: none;
  border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 14px;
  font: inherit; text-align: left; cursor: pointer;
}
.domainopt:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* 類別選擇：把 radio 做成一排可點的按鍵 */
.typepick { display: flex; flex-wrap: wrap; gap: 6px; }
.typeopt input { display: none; }
.typeopt span {
  display: inline-block; padding: 5px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg);
  font-size: 12.5px; cursor: pointer; color: var(--text-dim); letter-spacing: .3px;
}
.typeopt span:hover { border-color: var(--tc, var(--accent)); color: var(--text); }
.typeopt input:checked + span {
  background: color-mix(in srgb, var(--tc, var(--accent)) 16%, transparent);
  border-color: var(--tc, var(--accent)); color: var(--tc, var(--accent)); font-weight: 600;
}
/* 五個課別各有一個顏色：類別鍵、常規訓練名稱、日曆格子用同一套 */
.t-track       { --tc: var(--accent); }
.t-strength    { --tc: var(--blue); }
.t-rehab       { --tc: var(--yellow); }
.t-recovery    { --tc: var(--green); }
.t-competition { --tc: var(--red); }
.typeopt[class*="t-"] span { border-left: 3px solid var(--tc); }

/* 新增 program：常規訓練名稱一按帶入；✕ 刪掉 */
.routinepick { display: flex; flex-wrap: wrap; gap: 6px; }
.routine {
  display: inline-flex; align-items: stretch; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--tc, var(--border-strong)) 55%, transparent);
  background: color-mix(in srgb, var(--tc, var(--accent)) 10%, var(--bg));
}
.routine button {
  background: none; border: 0; color: var(--text); font: inherit; font-size: 13px;
  padding: 7px 10px; min-height: 36px; cursor: pointer;
}
.routine .routine-del { color: var(--text-dim); padding: 7px 9px; border-left: 1px solid var(--border); }
.routine .routine-del:hover { color: var(--red); }
.titlerow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.titlerow input[type="text"] { flex: 1 1 220px; }
.tick { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
/* 比賽那一段：揀了「比賽」才出現；剔了設為目標賽事才要週期欄位 */
.progcomp {
  display: none; margin: 4px 0 14px; padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}
.progdlg form:has(input[name="session_type"][value="COMPETITION"]:checked) .progcomp { display: block; }
.progcomp .progprep { display: none; }
.progcomp:has(input[name="comp_is_warmup"][value="1"]:checked) .progprep { display: block; }
.progcomp .progtarget { display: none; margin-top: 10px; }
.progcomp:has(input[name="comp_set_target"]:checked) .progtarget { display: grid; }

/* ------------------------------------------------------------ 分頁標籤 */
.tabs {
  display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.tabs a {
  padding: 9px 2px; color: var(--text-dim); font-weight: 500; font-size: 13px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: .3px;
}
.tabs a:hover { color: var(--accent); text-decoration: none; }
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* 頁籤旁的紀錄筆數：紀錄落在哪個範疇一眼看得到 */
.tabs .tabcount {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  border-radius: 99px; background: var(--surface-3); color: var(--text-dim);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.tabs a.active .tabcount { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }

/* 數據項目清單（左邊的訊號通道列表） */
.itemlist { max-height: 520px; overflow-y: auto; }
.itemlist a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--text);
  border-left: 2px solid transparent; font-size: 13px;
}
.itemlist a:hover { background: var(--surface-2); text-decoration: none; }
.itemlist a.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border-left-color: var(--accent);
}
.itemlist a .meta {
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
  font-family: var(--mono);
}
.itemlist a.active .meta { color: var(--accent); }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ------------------------------------------- 點格子即改（inline edit） */
.cell {
  cursor: text;
  border-bottom: 1px dashed var(--border-strong);
  padding: 1px 3px;
  border-radius: 2px;
  display: inline-block;
  min-width: 22px;
}
.cell:hover { background: var(--surface-2); border-bottom-color: var(--accent); }
.cell.big { font-size: 20px; font-weight: 700; font-family: var(--mono); }
.cell.strong { font-weight: 600; }
.cell.block { display: block; white-space: pre-wrap; min-height: 24px; padding: 6px 8px;
              background: var(--bg); border: 1px solid var(--border); }
.cell.inlineblock { white-space: pre-wrap; max-width: 46%; vertical-align: top; }
.cell[data-can="0"] { cursor: not-allowed; border-bottom-style: dotted; opacity: .8; }
.cell[data-can="0"]:hover { background: transparent; border-bottom-color: var(--red); }
.cell.editing { border-bottom-color: transparent; background: transparent; padding: 0; width: 100%; }
.cell.saving { opacity: .5; }
.cell.justsaved { background: color-mix(in srgb, var(--green) 22%, transparent);
                  border-bottom-color: var(--green); }
.cell-input {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 2px;
  padding: 3px 6px;
  font: inherit;
  width: 100%;
  min-width: 90px;
}

.metagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 8px 22px; }
.meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.meta .lbl {
  color: var(--text-dim); font-size: 11.5px; min-width: 58px;
  letter-spacing: .6px; font-family: var(--mono); text-transform: uppercase;
}

/* 只顯示不給改的數字（例：課後 RPE，入口只有下面那張表）。
   刻意不做成 .cell 的樣子，才不會有人一直點它等它變輸入框。 */
.ro { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 舊格式明細：預設收起，點開才看得到 */
.legacy > summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; cursor: pointer; list-style: none;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 12.5px;
}
.legacy > summary::-webkit-details-marker { display: none; }
.legacy > summary::before { content: "▸"; transition: transform .15s ease; }
.legacy[open] > summary::before { transform: rotate(90deg); }
.legacy[open] > summary { margin-bottom: 12px; }

/* 區塊 program：一區排好的內容存起來，下一課整組套用 */
/* 每一區的「加入本課訓練到數據分析」：課表排完之後，數據往那邊送的入口 */
.pushbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.pushbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.pushbar select { max-width: 220px; }
.pushbar .badge { margin-left: 4px; }

.progbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.progbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.progbar select { max-width: 320px; }
.progbar input[type="text"] { min-width: 160px; }
.progbar .progsave { margin-left: auto; }
.progbar .progsave > summary {
  cursor: pointer; color: var(--text-dim); list-style: none; font-family: var(--mono);
}
.progbar .progsave > summary::-webkit-details-marker { display: none; }
.progbar .progsave > summary::before { content: "＋ "; }
.progbar .progsave[open] { flex: 1 1 100%; margin-left: 0; }
@media (max-width: 700px) {
  .progbar { gap: 8px; }
  .progbar select, .progbar input[type="text"] { flex: 1 1 100%; max-width: none; }
  .progbar .progsave { margin-left: 0; flex: 1 1 100%; }
}

/* 課表那一區的「＋ 加入 範本 Template」：收起來只係一顆掣，
   撳開先見到揀範本嘅下拉同「套用到這一課」。 */
.progbar .tplpick-one > summary { list-style: none; cursor: pointer; }
.progbar .tplpick-one > summary::-webkit-details-marker { display: none; }
.progbar .tplpick-one[open] { flex: 1 1 100%; }

/* 計劃頁「設計團隊訓練計劃」：三步走，每一步一個標題帶個號碼 */
.wizstep + .wizstep { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.wizhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wizno {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600;
}

/* ② 課表內容：四區，每一區一疊活動，一行一項 */
.actblock {
  border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px;
  background: var(--surface-2); margin-bottom: 10px;
}
.actrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
}
.actrow input[type="text"] { min-width: 88px; flex: 1 1 88px; }
.actrow input[type="text"]:first-child { flex: 1 1 160px; min-width: 160px; }
@media (max-width: 700px) {
  .actrow input[type="text"] { flex: 1 1 100%; }
}

/* 團隊計劃頁的運動員日曆導覽：一個名字一顆，撳中那一顆亮起來 */
.athnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.athtab {
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px;
  font-size: 12.5px; color: var(--text-dim); background: var(--surface);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.athtab:hover { color: var(--text); border-color: var(--accent); }
.athtab.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
/* 換人／換月的一瞬間：格子先淡一下，唔會以為撳唔到 */
#calwrap.loading { opacity: .55; }

/* 本週課表：七日一列，每一格擺當日全隊的課 */
.weekgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--border); border-top: 1px solid var(--border);
}
.weekday {
  background: var(--surface); padding: 8px; min-height: 84px;
  display: flex; flex-direction: column; gap: 4px;
}
.weekday.today { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.weekday .ev { display: block; font-size: 11.5px; }
@media (max-width: 860px) {
  .weekgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekday { min-height: 0; }
}

/* 課表主表：欄多（活動＋六個欄位＋滿意度＋寫入者），窄螢幕橫向捲，
   格子不會被壓成直排。捲的是表格自己，整頁不會跟著左右晃。 */
.acttablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.acttable td, .acttable th { vertical-align: top; }
.acttable tr.sub td { border-top: 0; padding-top: 0; color: var(--text-dim); font-size: 12px; }
.acttable tr.sub .tag {
  display: inline-block; color: var(--text-dim); font-size: 10.5px;
  border: 1px solid var(--border); border-radius: 2px; padding: 0 5px; margin-right: 5px;
  font-family: var(--mono);
}
.pad { padding: 13px 14px; }

/* 活動那一格底下的小字：排課寫了幾組幾次幾米，實際做了多少看「登記錄」 */
.acttable .planline {
  color: var(--text-dim); font-size: 11.5px; margin-top: 2px;
  font-family: var(--mono);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
}
/* 排課那一行的欄名（組／次／重量…）：標示用，比數值再淡一點 */
.acttable .planline .lbl {
  font-family: var(--font); opacity: .7;
}
.acttable .planline .cell { color: var(--text); }
/* 「距離」那一欄：正課跑 30m 還是 150m 是兩回事，所以加底色與粗體重點顯示。
   課表的活動表、訓練紀錄的表單與明細、數據分析的明細都共用這一份。 */
th.dist, td.dist {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
th.dist { color: var(--accent); }
td.dist, td.dist .cell, td.dist input {
  color: var(--accent); font-weight: 600; font-family: var(--mono);
}
td.dist input { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* 「登記錄」那一欄：按鈕一行、已登幾組一行，窄一點不要跟活動名爭位 */
.acttable .logcell { white-space: nowrap; }
.acttable .logcell .btn { margin-bottom: 3px; }
.acttable .logcell .small { display: block; }
/* 正在登的那一行，按鈕亮起來 */
.btn.ghost.on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}


/* 表格 / 徽章裡的純文字按鈕（例如取消分配的 ×） */
.linkbtn {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: 13px; font-family: inherit; padding: 0 0 0 4px;
}
.linkbtn:hover { color: var(--red); }

.notes { display: flex; flex-direction: column; gap: 8px; }
.note {
  background: var(--bg); border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 12px;
}
/* 計劃留言板：自己寫的那幾則用主色標起來，一眼分得出誰在講 */
.note.mine { border-left-color: var(--accent); }

/* 日曆：每一堂課右上角的 ⧉ ＝ 複製到其他日子（拖是搬，⧉ 是抄一份） */
.cal .evrow { position: relative; display: block; }
.cal .evrow .ev { padding-right: 22px; }
/* 刪得掉的課多一顆 🗑，字要再讓出一格 */
.cal .evrow.acts2 .ev { padding-right: 40px; }
.cal .evacts { position: absolute; top: 1px; right: 1px; display: flex; gap: 1px; }
.cal .copyev, .cal .delev {
  width: 18px; height: 18px;
  line-height: 1; padding: 0; background: transparent; border: 1px solid transparent;
  border-radius: 2px; color: var(--text-dim); font-size: 12px; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.cal .day:hover .copyev, .cal .day:hover .delev { opacity: 1; }
@media (hover: none) {
  .cal .copyev, .cal .delev { opacity: .6; border-color: var(--border); }
}
.cal .copyev:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cal .delev:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* 日曆：把課表拖到別的日期 */
.cal .ev.movable { cursor: grab; }
.cal .ev.dragging { opacity: .4; }
.cal .day.dropping {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* 存檔提示（像監控台右下角彈出的事件） */
#atm-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--green); color: var(--text);
  border-radius: var(--radius); padding: 9px 13px; font-size: 12.5px;
  max-width: min(380px, calc(100vw - 40px));
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#atm-toast.show { opacity: 1; transform: translateY(0); }
#atm-toast.err { border-left-color: var(--red); }

/* -------------------------------------------- 數據分析：逐組輸入 + 明細 */
.setgrid { margin-bottom: 14px; }
.setgrid th { padding: 6px 8px; }
.setgrid td { padding: 4px 8px; border-bottom: 1px solid var(--border); }
.setgrid tbody tr:hover { background: transparent; }
.setgrid tbody tr:hover td:first-child { box-shadow: none; }
.setgrid input, .setgrid select { padding: 5px 7px; font-size: 13px; }
/* 目標／完成是秒數時，「分」「秒」兩格併在同一格裡 */
.setgrid .timecell { display: flex; gap: 4px; align-items: center; }
.setgrid .timecell input { min-width: 0; }
.setgrid .timecell .mincell { max-width: 58px; }
.setgrid .setno {
  color: var(--text-dim); font-size: 11px; text-align: center; font-family: var(--mono);
}

/* ---------------------------------------------- 數據分析：儀表板式排版
   參考賽車數據面板：名字一律一行內截斷（全名放 title），日期縮成 m/d，
   數字統一等寬對齊，眼睛掃得快、欄寬也不會被一個長名字撐開。 */

/* 一行內截斷，全文放 title */
.ellip { display: block; min-width: 0; overflow: hidden;
         text-overflow: ellipsis; white-space: nowrap; }
.ellip.inline { display: inline-block; max-width: 160px; vertical-align: bottom; }

/* 項目清單：左邊名字可截斷，右邊數字固定不被擠掉 */
.itemlist a .name { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.itemlist a .meta { font-variant-numeric: tabular-nums; }

/* 紀錄明細：可直接改的格子 */
.editnum { width: 74px; padding: 3px 6px; font-size: 12.5px;
           font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.editnum.sm { width: 56px; }
.editnum.wide { width: 100%; min-width: 90px; text-align: left; font-family: inherit; }
/* 紀錄明細：課表改過份量、已經換成課表新數字的格——按「儲存全部更改」才寫回去 */
.editnum.planchg, .editsel.planchg { background: color-mix(in srgb, #f5c542 28%, var(--surface)); border-color: #d9a400; }
.editsel { padding: 2px 4px; font-size: 13px; width: auto; }

/* 狀態註記：這段紀錄各是在什麼狀態下練出來的 */
.statusbar { display: flex; flex-wrap: wrap; gap: 8px; }
.statuschip { display: inline-flex; align-items: baseline; gap: 8px;
              padding: 5px 10px; border-radius: 999px; font-size: 12px;
              border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
              background: color-mix(in srgb, var(--blue) 10%, transparent); }
.statuschip strong { font-size: 12.5px; }
.statuschip span { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.statuschip.none { border-color: var(--border); background: var(--surface-2); }

/* 「先確認這幾件事，再看總結」——判讀的前提，不是結論 */
.factors { border: 1px solid var(--border); border-radius: 10px;
           background: var(--surface-2); overflow: hidden; }
.factors .factorhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
                       padding: 9px 14px; font-weight: 600; font-size: 13px;
                       border-bottom: 1px solid var(--border); }
.factors ol { margin: 0; padding: 8px 14px 10px 30px; }
.factors li { margin: 5px 0; font-size: 12.5px; line-height: 1.6; }
.factors li::marker { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.factors .flabel { font-weight: 600; margin-right: 6px; }
.factors li.lv-warn .flabel { color: var(--yellow); }
.factors li.lv-ok .flabel { color: var(--green); }
.factors li.lv-info .flabel { color: var(--blue); }
.factors .ftext { color: var(--text-dim); }

/* 表格數字對齊（比較表、紀錄明細） */
.cmptable, .dayrow table, .setgrid { font-variant-numeric: tabular-nums; }

/* 登記數據的表格：欄位多，窄螢幕讓它自己橫向捲，不要互相擠在一起 */
.setgridwrap { overflow-x: auto; }
.setgridwrap .setgrid { min-width: 640px; }

/* 表格下方的單位切換（例：休息時間 秒／分鐘） */
.unitpick { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
            color: var(--text-dim); white-space: nowrap; }
.unitpick select { padding: 3px 6px; font-size: 11.5px; width: auto; }

/* 紀錄明細在上、紀錄分析圖在下——圖佔滿整個寬度，秒數的差別看得比較清楚 */
.detailsplit { display: block; }
.detailsplit > .detailchart { border-top: 1px solid var(--border); }
.detailtable { overflow-x: auto; }
.detailtable table { min-width: 860px; }
.detailchart .chart-box { height: 300px; }

/* 課表上的紀錄明細：一堂課只有一天，不用分日，逐組平鋪就好 */
.setdetail { overflow-x: auto; }
.setdetail table { min-width: 760px; font-variant-numeric: tabular-nums; }
tr.failedrow > td { background: color-mix(in srgb, var(--red) 10%, transparent); }
tr.failedrow > td:first-child { box-shadow: inset 2px 0 0 var(--red); }
/* ------------------------- 田徑練習訓練紀錄：清單 → 挑幾筆 → 分析 */
.logbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.logbar .unitpick.grow { flex: 1 1 240px; }
.logbar .unitpick.grow input { width: 100%; padding: 4px 8px; font-size: 12px; }
/* 逐欄挑值：關鍵字下面嗰格，收埋嘅時候淨係一行字 */
.logfacets {
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.logfacets > summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  color: var(--text-dim);
}
.logfacets > summary:hover { color: var(--accent); }
.logfacets[open] > summary { margin-bottom: 8px; }
.facetgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.facet { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.facethead { font-size: 11.5px; color: var(--text-dim); }
.facet select {
  width: 100%; font-size: 12px; padding: 2px 4px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
}
.facet select option { padding: 1px 3px; }
.facethint { margin-top: 8px; }

.logwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.logtable { min-width: 900px; font-variant-numeric: tabular-nums; }
.logtable th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.logtable td { white-space: nowrap; }
.logtable td.ellip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.logtable .logdate { font-family: var(--mono); font-weight: 600; letter-spacing: .3px; }
.logtable .pickcell { width: 34px; text-align: center; }
/* 課表頁兩張紀錄表左邊嗰格勾（多選刪除）——同上面嗰條同一個樣 */
.setdetail .pickcell, .acttable .pickcell { width: 34px; text-align: center; }
.setdetail .pickcell input, .acttable .pickcell input { width: auto; margin: 0; }
.logtable tbody tr:hover > td { background: var(--surface-2); }
/* 表頭點一下換排序欄位，再點一下換方向；▲▼ 留一格寬度免得標題跳動 */
.logtable th.sortcol { cursor: pointer; user-select: none; }
.logtable th.sortcol:hover { color: var(--accent); }
.logtable th.sortcol.on { color: var(--accent); }
.logtable th .sarr { display: inline-block; min-width: 12px; font-size: 10px; }
/* 分頁 */
.logpages {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--border);
}
.logpages .linkbtn { font-family: var(--mono); padding: 2px 6px; }
.logpages .pagenow {
  font-family: var(--mono); font-weight: 700; color: var(--accent);
  padding: 2px 8px; border-radius: 6px; background: var(--surface-2);
}
.logfoot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.logfoot #pickCount { color: var(--accent); font-family: var(--mono); font-size: 14px; }
/* 三張小表（照距離／照強度／照狀態）並排，窄螢幕自己疊起來 */
.logsplit {
  display: grid; gap: 1px; background: var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  border-top: 1px solid var(--border);
}
.logsplit > div { background: var(--surface); min-width: 0; }
.logsplit .logtable { min-width: 320px; }
.card-head.sub { background: var(--surface-2); font-size: 11px; }
/* 分析底下用白話寫的幾句結論 */
.logsay {
  padding: 10px 16px 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.7; color: var(--text-dim);
}
.logsay > div + div { margin-top: 2px; }

/* ------------------------------------------------------------ 響應式 */
.only-mobile { display: none; }
/* 只在有／沒有滑鼠的裝置上出現（拖動改日期在觸控螢幕上不成立） */
.only-touch { display: none; }
@media (hover: none) {
  .no-touch { display: none; }
  .only-touch { display: inline; }
}

@media (max-width: 1180px) {
  .topsearch { display: none; }
}
@media (max-width: 960px) {
  .only-mobile { display: inline-flex; }
  /* 麵包屑的模組名（例：數據與健康）在窄螢幕沒有位置，只留目前頁名 */
  .crumb span, .crumb span + i { display: none; }
  .athletepick { max-width: 190px; }
  .athletepick select { max-width: 140px; }
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    width: var(--sb-w); transform: translateX(-100%); transition: transform .18s ease;
  }
  :root.sb-collapsed .sidebar { width: var(--sb-w); }
  :root.nav-open .sidebar { transform: none; box-shadow: var(--shadow-2); }
  :root.nav-open .sb-scrim {
    display: block; position: fixed; inset: 0; background: rgba(4, 7, 11, .6); z-index: 55;
  }
  :root.sb-collapsed .nav-item { justify-content: flex-start; padding: 8px 10px; border-left-width: 2px; }
  :root.sb-collapsed .nav-item > span,
  :root.sb-collapsed .sb-collapse > span { display: inline; }
  :root.sb-collapsed .sb-brand .brandtext { display: inline; }
  :root.sb-collapsed .sb-brand .brand b,
  :root.sb-collapsed .sb-brand .brand span { display: inline; }
  :root.sb-collapsed .nav-title { font-size: 10px; text-align: left; padding: 4px 10px 6px; }
  :root.sb-collapsed .nav-title::before { content: none; }
  /* 手機側欄是抽屜：不用收合鍵，但最底的模式／系統／語言／身份照樣要看得到 */
  .sb-collapse { display: none; }
  :root.sb-collapsed .sb-meta { display: flex; }
  :root.sb-collapsed .sb-foot .userbox { justify-content: flex-start; padding: 8px 2px; }
  :root.sb-collapsed .sb-foot .userbox .uinfo { display: flex; }
  :root.sb-collapsed .sb-foot .userbox form { display: block; }
  .topbar { padding: 0 14px; gap: 10px; }
  .wrap { padding: 14px; }
  .between { flex-wrap: wrap; }
}

@media (max-width: 620px) {

  /* 手機頂欄：選單＋麵包屑一行，切換器／外觀／帳號另起一行。
     全部塞在同一行時，52px 的固定高度裝不下，元件會互相壓上去。 */
  .topbar {
    height: auto; min-height: var(--top-h);
    flex-wrap: wrap; align-items: center;
    padding: 7px 12px; gap: 8px 10px;
  }
  .topacts { flex-basis: 100%; margin-left: 0; justify-content: flex-end; }
  .athletepick { flex: 1 1 auto; max-width: none; min-width: 0; }
  .athletepick select { max-width: none; width: 100%; }
}

/* ------------------------------------------------ 體組成：數值方格 */
.bodygrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.bodycell { background: var(--surface); padding: 9px 12px; }
.bodycell > span {
  display: block; color: var(--text-dim); font-size: 11.5px; margin-bottom: 2px;
  letter-spacing: .7px; font-family: var(--mono); text-transform: uppercase;
}
.bodycell > b {
  font-size: 20px; font-weight: 600; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.bodycell > b em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-dim); }

/* --------------------------------------- 紀錄明細：一天一列，點開看那天每一組 */
.daylist { padding: 6px 0 4px; overflow-x: auto; }
.dayrow { border-bottom: 1px solid var(--border); }
.dayrow > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 9px 14px; cursor: pointer; list-style: none;
}
.dayrow > summary::-webkit-details-marker { display: none; }
.dayrow > summary::before {
  content: "▸"; color: var(--text-dim); font-size: 11px;
  transition: transform .15s ease;
}
.dayrow[open] > summary::before { transform: rotate(90deg); color: var(--accent); }
.dayrow > summary:hover { background: var(--surface-2); }
.dayrow .daydate { font-weight: 600; font-family: var(--mono); letter-spacing: .5px; }
.dayrow .daysets { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); }
.dayrow .dayhl { display: flex; gap: 12px; font-size: 12.5px; }
.dayrow .dayhl .hi { color: var(--accent); }
.dayrow .dayhl .lo { color: var(--text-dim); }
.dayrow .dayhl strong { font-size: 15px; font-family: var(--mono); }
.dayrow .daymeta { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }
.dayrow table { min-width: 640px; }
.dayrow[open] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.dayrow[open] table { background: var(--surface); }

/* ------------------------------ 最常做的動作 / 整體·年份·時期 比較 */
.itemlist .rank {
  display: inline-block; min-width: 18px; margin-right: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  font-variant-numeric: tabular-nums; font-family: var(--mono);
}
.itemlist a.active .rank { color: var(--accent); }

/* 清單上的刪項目鍵：整列還是一條連結，× 貼在右邊自己一格 */
.itemlist .itemrow { display: flex; align-items: stretch; }
.itemlist .itemrow > a { flex: 1; min-width: 0; }
.itemlist .itemdel {
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text-faint); cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0 10px; font-family: inherit;
}
/* 清單上的 ✎：按一下改這一項的名稱（紀錄照樣留在同一個項目底下） */
.itemlist .itemedit {
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text-faint); cursor: pointer; font-size: 12px; line-height: 1;
  padding: 0 6px; font-family: inherit;
}
.itemlist .itemrow:hover .itemedit { color: var(--text-dim); }
.itemlist .itemedit:hover { color: var(--accent); background: var(--surface-2); }

/* 「數據分析已經有相關紀錄，要不要加在一起分析」那一句提問 */
/* 改項目名稱：可以一次挑幾個項目，清單長了自己捲 */
.renamepick { padding: 12px 18px 8px; }
.renamelist { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  max-height: 160px; overflow-y: auto; }
.renamelist label { display: flex; align-items: center; gap: 5px; }
/* 數據分析的日期點得進去 */
.logdate a { color: inherit; text-decoration: underline dotted; }
/* 從數據分析跳過來的那一天 */
.cal .day.focus { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

.mergeask {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.mergeask .badge { margin: 2px 4px 0 0; }

/* 清單上的 📌：按一下把這一項釘進「主要必看的訓練項目」 */
.itemlist .itempin {
  background: none; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0 6px;
  font-family: inherit; opacity: .25; filter: grayscale(1);
}
.itemlist .itemrow:hover .itempin { opacity: .6; }
.itemlist .itempin.on, .itemlist .itempin:hover { opacity: 1; filter: none; }

.itemlist .itemrow:hover .itemdel { color: var(--text-dim); }
.itemlist .itemdel:hover { color: var(--red); background: var(--surface-2); }

/* 紀錄明細：組號那一格 + 最頂的「全部套用」列 */
.dayrow .setcell { width: 62px; }
.dayrow .setcell .setno { width: 46px; text-align: center; }
.dayrow .fillrow > td {
  background: var(--surface-2); border-bottom: 1px solid var(--border-strong);
  padding: 4px 8px; vertical-align: middle;
}
.dayrow .fillrow > td:first-child {
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--text-dim);
}
.dayrow .fillrow input::placeholder { opacity: .55; }

.tabs.sub { margin: 0; gap: 14px; border-bottom: none; }
.tabs.sub a { padding: 2px 2px; font-size: 12.5px; }

/* 比較：圖在上、表在下，兩邊留白一致，寬螢幕也不會一邊空一大塊 */
.cmpwrap > .chart-box { height: 240px; padding: 14px 16px; }
.cmpnote { padding: 0 16px 12px; }
.cmptablewrap { overflow-x: auto; border-top: 1px solid var(--border); }
.cmptable { min-width: 640px; }
.cmptable th, .cmptable td { vertical-align: top; }
.cmptable tr.bestrow > td {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.cmptable tr.bestrow > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* =================================================== 顯示欄收合／展開
   一頁裡的欄位很多，全部攤開來看很累。每一條標題列右邊加一顆 ▾：
   按一下把整欄收起來（只剩標題），再按一下展開；狀態記在瀏覽器，
   下次回到同一頁維持上次的樣子。 */
.foldbtn {
  flex: none; margin-left: auto; width: 26px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 11px; line-height: 1; cursor: pointer; font-family: var(--mono);
}
.foldbtn:hover { color: var(--accent); border-color: var(--accent); }
.foldbtn::before { content: "▾"; transition: transform .15s ease; }
[data-folded="1"] > .foldbtn::before { transform: rotate(-90deg); }
[data-folded="1"] { border-bottom-color: transparent; }
.card-head[data-folded="1"] { border-bottom: none; }
h2 .foldbtn { margin-left: 8px; }
h2:has(.foldbtn) { display: flex; align-items: center; }
.foldhidden { display: none !important; }

/* 「全部收起／全部展開」：一鍵把整頁摺起來，只看標題找位置 */
.foldbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ======================================================= 段落導航列（長頁面）
   貼在頂欄下面的一條書籤列：一顆對一段，按一下就揭到那一段（見 .anabook）。
   沒有資料的段落由 secnav.js 自己拿掉，導航上不留空殼。 */
.secnav {
  position: sticky; top: var(--top-h); z-index: 40;
  display: flex; align-items: center; gap: 4px;
  margin: 0 0 16px; padding: 6px 4px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto; scrollbar-width: none;
}
.secnav::-webkit-scrollbar { display: none; }

.secnav a {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap; border: 1px solid transparent;
}
.secnav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.secnav a.on {
  color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
/* 前面那顆小圓點：目前這一段亮橘色，其餘留一個淡淡的位置 */
.secnav a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong); flex: none;
}
.secnav a.on::before { background: var(--accent); }

/* 右邊的「全部收起／全部展開」，與段落鍵之間留一條分隔線 */
.secnav .secnav-acts {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  padding-left: 8px; border-left: 1px solid var(--border); flex: none;
}

@media (max-width: 760px) {
  .secnav { gap: 2px; padding: 5px 4px; }
  .secnav a { padding: 5px 8px; font-size: 12px; }
  .secnav a::before { display: none; }
  .secnav .secnav-acts { border-left: none; padding-left: 4px; }
}

/* ================================ 重量 K 線的動作切換列（.klwrap > .klnav）
   勾咗幾個動作就有幾顆掣，一次揭一個動作嘅圖。唔疊埋一張圖係因為
   深蹲同彎舉嘅重量差成幾倍，疊咗之後細嗰條線貼住底軸乜都睇唔到。 */
.klnav {
  display: flex; align-items: stretch; gap: 4px; flex-wrap: nowrap;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.klnav::-webkit-scrollbar { display: none; }
/* display:flex 會蓋過 [hidden] 的預設，所以要自己講一次 */
.klnav[hidden] { display: none; }

.klnav-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  white-space: nowrap;
}
.klnav-btn:hover { color: var(--text); background: var(--surface-2); }
.klnav-btn.on {
  color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.klnav-n { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.klnav-btn.on .klnav-n { color: inherit; }

@media (max-width: 760px) {
  .klnav { padding: 6px 8px; }
  .klnav-btn { padding: 5px 8px; font-size: 12px; }
}

/* ---------------------------------------------- 週期設定：一整年的星期格
   一格＝一個星期，顏色＝那一週的狀態。以星期做單位是因為教練排週期
   本來就是用「幾個星期」在想的；一週中間轉了狀態的用斜紋標出來。 */
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

.spyear { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.spmonth { flex: 1 1 130px; min-width: 120px; }
.spmonth-h {
  font-size: 11px; letter-spacing: .6px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 5px;
}
.spweeks { display: flex; flex-direction: column; gap: 3px; }
.spweek {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg); color: var(--text); cursor: pointer;
  font-size: 11px; font-family: var(--mono); text-align: left; width: 100%;
}
.spweek:hover { border-color: var(--accent); }
.spweek[disabled] { cursor: default; }
.spweek-n { opacity: .65; }
.spweek-d { font-weight: 600; }

/* 揀緊嘅一段：週曆上標返出嚟，睇得到由邊格數到邊格 */
.spweek.spsel { box-shadow: inset 0 0 0 1px var(--accent); }
.spweek.spedge { border-color: var(--accent); font-weight: 700; }
.sppick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 16px 10px;
}
.sppick-b.on {
  border-color: var(--accent); color: var(--accent); font-weight: 600;
}

/* 狀態顏色：格子用淡底＋左邊一條粗邊，一眼掃到哪幾星期同一個狀態 */
.sp-green  { background: color-mix(in srgb, var(--green) 16%, transparent);  border-left: 4px solid var(--green); }
.sp-blue   { background: color-mix(in srgb, var(--blue) 16%, transparent);   border-left: 4px solid var(--blue); }
.sp-orange { background: color-mix(in srgb, var(--orange) 18%, transparent); border-left: 4px solid var(--orange); }
.sp-red    { background: color-mix(in srgb, var(--red) 18%, transparent);    border-left: 4px solid var(--red); }
.sp-yellow { background: color-mix(in srgb, var(--yellow) 18%, transparent); border-left: 4px solid var(--yellow); }
.sp-dim    { background: var(--bg); border-left: 4px solid var(--border); }

/* 一週中間轉咗狀態：加斜紋，唔好淨係睇主色就以為成個星期都係 */
.spmix {
  background-image: repeating-linear-gradient(
    45deg, transparent 0 5px, color-mix(in srgb, var(--text) 12%, transparent) 5px 7px);
}

.spdot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px; background: var(--border);
}
.spdot.sp-green  { background: var(--green); }
.spdot.sp-blue   { background: var(--blue); }
.spdot.sp-orange { background: var(--orange); }
.spdot.sp-red    { background: var(--red); }
.spdot.sp-yellow { background: var(--yellow); }
.spmix-dot {
  background-image: repeating-linear-gradient(
    45deg, var(--border) 0 3px, var(--text-dim) 3px 5px);
}

.spkey { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 14px; }
.spkey-i { display: inline-flex; align-items: center; }

/* ---------------------------------------- 週期訓練活動分析
   顏色跟週期設定那一頁同一套（.sp-*），看的人才認得出是同一條時間線。 */
.cycyears { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 全年分佈：一條軸，每一段的闊度就是它佔全年多少日 */
.cycbar { display: flex; gap: 2px; padding: 12px 16px 16px; }
.cycbar-i {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 10px 8px; border-radius: 4px;
  font-size: .78rem; line-height: 1.3; overflow: hidden;
}
.cycbar-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cycbar-n { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* 主表：一欄一個狀態，橫向讀得出「同一個指標在各週期差幾多」 */
.tblscroll { overflow-x: auto; }
.cyctable th, .cyctable td { white-space: nowrap; }
.cyctable tbody th { text-align: left; font-weight: 500; color: var(--text-dim); }
.cyctable td.num { font-variant-numeric: tabular-nums; }
.cyctable .cyc-key td, .cyctable .cyc-key th { font-size: 1.05rem; }
.cyctable .cyc-gap th, .cyctable .cyc-gap td { border-top: 1px solid var(--border); }
.cyctable .cyc-note td { white-space: normal; min-width: 150px; color: var(--text-dim); }
/* 今年沒有排過的狀態：整欄調淡，但唔好收起——「完全沒有安排過」本身就是答案 */
.cyctable .cyc-off { opacity: .45; }

@media (max-width: 760px) {
  .spmonth { flex: 1 1 100%; }
  .spyear { padding: 12px; }
}

/* ==================================================== 揭書式版面（.anabook）
   一次只顯示一段（.anapanel.on），其餘藏起來；上面的段落導航列就是書籤。
   沒有 JS 的時候不加 .book，六段照樣整頁攤開讀得到。 */
.anabook.book > .anapanel { display: none; }
.anabook.book > .anapanel.on { display: block; }

/* 揭頁：新的一頁從右邊翻進來，往回翻就從左邊 */
.anapanel.turning { animation: anaturn .22s ease-out both; }
.anapanel.turning.back { animation-name: anaturn-back; }
@keyframes anaturn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes anaturn-back {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anapanel.turning { animation: none; }
}

/* 書底下的揭頁列：上一部份 ／ 這是第幾部份 ／ 下一部份 */
.anaturn[hidden] { display: none; }   /* display:flex 會蓋掉 [hidden]，要寫回來 */
.anaturn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border);
}
.anaturn .anaturn-now {
  font-size: 12.5px; color: var(--text-dim); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anaturn button[disabled] { opacity: .35; pointer-events: none; }

/* ============================================== 動作庫：目錄 ＋ 動作 */
.libgrid { grid-template-columns: minmax(220px, 1fr) 2.4fr; align-items: start; }
@media (max-width: 900px) { .libgrid { grid-template-columns: 1fr; } }

/* ============================================ 數據分析：左清單 ＋ 右分析
   桌面兩欄（左邊清單固定窄、右邊分析吃剩下的寬），窄螢幕自動變一欄，
   清單在上、分析在下。 */
.anagrid { grid-template-columns: minmax(280px, 360px) 1fr; align-items: start; }
@media (max-width: 900px) {
  .anagrid { grid-template-columns: 1fr; }
  .itemlist { max-height: 340px; }
}

/* ------------------------------------------------------ 電話螢幕微調
   欄位擠在一起就看不清楚：字級、間距收窄一點，KPI 兩個一行，
   欄位多的表格自己橫向捲（右邊留一條漸層提示還有內容）。 */
@media (max-width: 760px) {
  .wrap { padding: 12px 10px 30px; }
  h1 { font-size: 18px; }
  .subtitle { margin-bottom: 14px; }

  .card-head { flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; }
  .card-head > .small { flex-basis: 100%; }
  .card-head .foldbtn { margin-left: auto; }

  .chart-box { height: 210px; padding: 10px 4px; }
  .chart-box.tall { height: 260px; }
  .cmpwrap > .chart-box { height: 210px; padding: 10px 4px; }
  .detailchart .chart-box { height: 230px; }

  /* KPI：一行兩個，比一行一個省一半捲動 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat .value { font-size: 22px; }
  .stat .value.sm { font-size: 18px; }
  .stat .label { font-size: 10.5px; letter-spacing: .6px; }
  .stat .hint { font-size: 10.5px; }

  /* 清單列：名字一行、右邊數字換到下一行，不會互相擠扁 */
  .itemlist a { flex-wrap: wrap; gap: 2px 8px; padding: 9px 12px; }
  .itemlist a .name { flex: 1 1 100%; }
  .itemlist a .meta { font-size: 10.5px; }

  /* 一天一列：日期／組數／最高最低一行，備註換行放下面 */
  .dayrow > summary { gap: 4px 8px; padding: 9px 12px; }
  .dayrow .daymeta { margin-left: 0; flex-basis: 100%; }
  .dayrow .dayhl { gap: 8px; flex-wrap: wrap; }
  .dayrow .dayhl strong { font-size: 14px; }

  /* 欄位多的表格：橫向捲，格子收窄一點，一次看得到多幾欄 */
  .detailtable table, .dayrow table { min-width: 560px; }
  .setgridwrap .setgrid { min-width: 560px; }
  .cmptable { min-width: 560px; }
  .logtable { min-width: 720px; }
  .editnum { width: 58px; }
  .editnum.sm { width: 46px; }
  .editnum.wide { min-width: 76px; }
  th { font-size: 10.5px; letter-spacing: .4px; }
  td { font-size: 12px; }

  /* 欄位多的表格在手機上是橫向捲的，捲動要順手 */
  .detailtable, .daylist, .setgridwrap, .cmptablewrap {
    -webkit-overflow-scrolling: touch;
  }

  /* 表頭一律不換行，六七欄的表在 375px 一定超寬。沒有另外包捲動層的表
     （總覽、傷患、營養、名單…）就讓卡片自己橫向捲，不要整頁跟著左右晃。 */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card.pad0 { overflow: hidden; overflow-x: auto; }

  /* 手機打字時 iOS 會自動放大：表單輸入框給足 16px 就不會跳 */
  .field input, .field select, .field textarea,
  .row input, .row select { font-size: 16px; }

  .factors ol { padding-left: 24px; }
  .factors li { font-size: 12px; }
  .statuschip { font-size: 11.5px; padding: 4px 9px; }
  .alert { font-size: 12px; padding: 8px 11px; }
  .tabs { gap: 14px; }
  .tabs a { font-size: 12.5px; }
  .flex, .sessionnav { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .topbar { gap: 8px; }
  /* 加了模式標籤之後，教練的切換器跟其他掣擠在同一行只剩一個箭咀、看不到名字：
     自己佔一整行（運動員模式沒有切換器，不受影響） */
  .topacts { flex-wrap: wrap; row-gap: 8px; }
  .topacts .athletepick { flex: 1 1 100%; order: -1; }
}

/* ------------------------------------------------ 手機版對話框與表單
   「加入活動」那個框在 375px 下只有 345px 寬，.row 還硬排兩欄，
   一個挑動作的 select 剩 160px，動作名稱看不完。窄螢幕一律單欄。 */
@media (max-width: 700px) {
  .dlg { width: 96vw; padding: 16px 14px; max-height: 88vh; overflow: auto; }
  .dlg .row, .dlg .field { display: block; }
  .dlg .row > .field { margin-bottom: 12px; }
  .dlg select[size] { width: 100%; }
  .dlg .flex { flex-wrap: wrap; }
  .dlg .btn { flex: 1 1 auto; }

  /* 課表主表在手機上橫捲；欄位收窄一點，一次多看得到一兩欄 */
  .acttable { min-width: 700px; }
}


/* ================================================================ 影片庫
   版面照著看片的習慣排：上面一條搜尋列，下面一面卡片牆，一行三格。
   縮圖固定 16:9、片長蓋在右下角——一整頁掃過去，高矮一致才看得快。 */

/* ---- 搜尋列：打字找、按範疇找，或按熱搜詞 ---- */
.vidsearch { display: flex; flex-direction: column; gap: 9px; }
.vidsearch-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 6px 5px 14px;
}
.vidsearch-bar:focus-within { border-color: var(--accent); }
.vidsearch-bar .ic { width: 15px; height: 15px; color: var(--text-dim); flex: none; }
.vidsearch-bar input[type="search"] {
  flex: 1 1 auto; min-width: 0; border: none; background: none; padding: 4px 0;
  color: var(--text); font-size: 13px;
}
.vidsearch-bar input[type="search"]:focus { outline: none; box-shadow: none; }
.vidsearch-bar .btn { flex: none; border-radius: 999px; }

/* 範疇與熱搜詞共用同一顆藥丸；熱搜的是資料長出來的字，用 mono 跟範疇分得開 */
.vidchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-dim); font-size: 12px; line-height: 1.6; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink);
}
.chip.hot { font-family: var(--mono); }

/* 上傳表單預設收起來，只留標題列當一顆按鈕 */
.vidup > summary { cursor: pointer; list-style: none; }
.vidup > summary::-webkit-details-marker { display: none; }
.vidup > summary:hover { color: var(--accent); }
.vidup:not([open]) > summary { border-bottom: none; }

/* ---- 卡片牆 ---- */
.vidwall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
.vidcard {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  color: inherit;
}
.vidcard:hover .vidtitle { color: var(--accent); }
.vidtitle {
  font-size: 13px; line-height: 1.4; margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vidmeta {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vidthumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--surface-3); border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border);
}
.vidthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vidcard:hover .vidthumb, .vidthumb:hover { border-color: var(--accent); }
.vidthumb-blank {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--text-dim); opacity: .45;
}
.vidthumb-blank .ic { width: 30px; height: 30px; }
.vidlen {
  position: absolute; right: 5px; bottom: 5px; font-style: normal;
  padding: 1px 5px; border-radius: 2px; font-size: 11px;
  background: rgba(0, 0, 0, .68); color: #fff;
}
.vidflag {
  position: absolute; left: 5px; top: 5px; font-style: normal;
  padding: 1px 6px; border-radius: 2px; font-size: 11px;
  background: color-mix(in srgb, var(--yellow) 88%, #000); color: #1a1a1a;
}

/* 分享入嚟嘅片用藍色角標，同「範本」嗰個黃色角標分得開 */
.vidflag.share { background: var(--blue); color: #fff; }

/* ---- 選片分享：片牆撳一下入選片模式，剔幾條一次過派 ---- */
.vidcell { position: relative; min-width: 0; }
.vidpickbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.vidpickbar .vidpick-live { display: flex; align-items: center; gap: 8px; }
.vidpickbar .vidpick-live[hidden] { display: none; }
/* 平時個剔收埋——片牆要見到嘅係畫面，唔係一排方格 */
.vidpick { display: none; }
.vidwall.picking .vidpick {
  display: block; position: absolute; inset: 0; cursor: pointer;
  border-radius: var(--radius-sm);
}
.vidwall.picking .vidpick input { position: absolute; left: 9px; top: 9px; margin: 0; }
/* 剔中嗰格要一眼掃得出：整格外框轉色，縮圖反白 */
.vidwall.picking .vidcell.on .vidthumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.vidwall.picking .vidcell.on .vidtitle { color: var(--accent); }
.vidwall.picking .vidcard { pointer-events: none; }

/* ---- 改片名：撳開先出輸入格 ---- */
.vidrename { margin-top: 4px; }
.vidrename > summary {
  cursor: pointer; list-style: none; width: max-content;
}
.vidrename > summary::-webkit-details-marker { display: none; }
.vidrename > summary:hover { color: var(--accent); }
.vidrename[open] > summary { margin-bottom: 6px; }
.vidrename .flex { display: flex; align-items: center; gap: 6px; }
.vidrename input[type=text] { flex: 1; min-width: 0; }
/* 選片模式下整格被那塊 label 蓋住，改名掣撳唔到——乾脆收埋 */
.vidwall.picking .vidrename { display: none; }

/* ---- 一次過傳幾條：共用設定 + 逐條一行 ---- */
.vidbulk {
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.viditems { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.viditem {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
}
.viditem-thumb {
  position: relative; flex: none; width: 150px; aspect-ratio: 16 / 9;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.viditem-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viditem-body { flex: 1 1 auto; min-width: 0; }
.viditem-body .row { margin-top: 6px; }
.viditem-body .field { margin-top: 6px; }

@media (max-width: 620px) {
  .viditem { flex-direction: column; }
  .viditem-thumb { width: 100%; }
}

/* ---- 分享面板：一個計劃一組名 ---- */
.vidshare > summary { cursor: pointer; list-style: none; }
.vidshare > summary::-webkit-details-marker { display: none; }
.vidshare > summary:hover { color: var(--accent); }
.vidshare:not([open]) > summary { border-bottom: none; }
.vidshare-grp { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.vidshare-grp:last-of-type { border-bottom: none; }
.vidshare-names {
  /* min() 係防呆：面板一旦被塞入窄欄，210px 嘅格會撐爆容器，
     名字剩返一個「…」——人名係呢塊面板唯一嘅內容，寧願一行一個。 */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 4px 10px; margin-top: 8px;
}
/* 成行都撳得落——手機上淨係撳到個細細嘅方格會好慘。
   名字擺大擺第一行，項目同學校收細跌落第二行：掃過去見到嘅係人名，唔係代號。 */
.vidshare-name {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
  /* 呢個 <label> 唔係表單欄位嘅標題，係一行人名：唔要上面 label 嗰套
     細字、灰色、加闊字距同埋 5px 下邊距 */
  color: var(--text); font-size: 13.5px; letter-spacing: normal; margin-bottom: 0;
}
.vidshare-name:hover { background: var(--surface-2); }
.vidshare-name input { flex: none; margin: 0; }
.vidshare-name .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vidshare-name strong {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vidshare-name em {
  font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vidshare-name em:empty { display: none; }

/* 窄一點先收成兩行，手機上一行一格——縮圖太小就看不出動作 */
@media (max-width: 1000px) { .vidwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vidwall { grid-template-columns: 1fr; } }

/* 額度條：貼在影片庫標題右邊，窄螢幕退到下一行佔滿寬度 */
.vidquota { min-width: 200px; max-width: 260px; flex: 0 1 auto; }
.vidquota .num { font-size: 13px; margin-top: 2px; }
.vidquota .progress { margin-top: 6px; }
@media (max-width: 620px) { .vidquota { max-width: none; width: 100%; margin-top: 10px; } }

/* 申請升級：預設收起來。額度快滿的人才看得到，而且多數人會先去刪片 */
.vidupgrade { margin: 0 18px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.vidupgrade > summary {
  cursor: pointer; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.vidupgrade > summary:hover { color: var(--accent); }
.vidupgrade[open] > summary { border-bottom: 1px solid var(--border); }
.vidupgrade-body { padding: 12px; }

/* 上傳前的預覽：左邊一小格畫面，右邊是讀出來的長度尺寸與警告 */
.vidprev { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.vidprev video {
  width: 220px; max-width: 40vw; aspect-ratio: 16 / 9; object-fit: cover;
  background: #000; border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.vidprev-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.vidprog { display: flex; align-items: center; gap: 10px; }
.vidprog .progress { flex: 1 1 auto; margin-top: 0; }

/* 詳情頁：播放器在上，分析重點紀錄在下面整行——紀錄常常是一段字，
   擠在右邊一條窄欄裡很難讀 */
.vidstack { min-width: 0; }

.vidstage { display: grid; grid-template-columns: 1fr; background: #000; }
.vidstage.vidstage-two { grid-template-columns: 1fr 1fr; gap: 1px; }
/* 放大時畫面會超出這一格，要切掉；vidzoom 才是真正被縮放的那一層 */
.vidpane { position: relative; min-width: 0; overflow: hidden; }
.vidzoom {
  position: relative; transform-origin: 0 0; will-change: transform;
  touch-action: none;
}
.vidzoom.pannable { cursor: grab; }
.vidzoom.panning { cursor: grabbing; }
.vidplayer { width: 100%; max-height: 62vh; display: block; background: #000; }
.vidlabel {
  position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 2px;
  background: rgba(0, 0, 0, .6); color: #ddd;
}

/* 對比牆：2–4 格同場。三格用 3 欄、四格用 2×2——四格排成一行的話，
   每格闊過頭又矮，落地那一腳反而更難看。 */
.vidstage.vidstage-many { gap: 1px; }
.vidstage-many.wall-2 { grid-template-columns: 1fr 1fr; }
.vidstage-many.wall-3 { grid-template-columns: repeat(3, 1fr); }
.vidstage-many.wall-4 { grid-template-columns: 1fr 1fr; }
.vidstage-many .vidplayer { max-height: 46vh; }
.vidstage-many.wall-4 .vidplayer { max-height: 38vh; }
/* 每格自己那粒「設起點」：擺喺格仔左下角，同左上角嗰個標籤唔會撞 */
.wallpane-bar {
  position: absolute; left: 6px; bottom: 42px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px; opacity: .45; transition: opacity .12s;
}
.vidpane:hover .wallpane-bar, .wallpane-bar:focus-within { opacity: 1; }

/* 逐條過：最上面那條隊，剔到第幾條一眼看得到 */
.reviewqueue { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 900px) {
  .vidstage-many.wall-3, .vidstage-many.wall-4 { grid-template-columns: 1fr; }
  .vidstage-many .vidplayer, .vidstage-many.wall-4 .vidplayer { max-height: 40vh; }
}

/* 對齊起點：教練第一次見到多數唔知做乜，所以三步寫明喺度，唔係靠 title */
.vidalign { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vidalign .flex { flex-wrap: wrap; gap: 6px 10px; }
.alignsteps {
  display: grid; gap: 2px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.alignsteps strong { font-weight: 600; }

/* 逐格與變速那一列——跟 .progbar 一樣貼在卡片底，只是在下緣 */
.vidbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 8px 14px; border-top: 1px solid var(--border); background: var(--bg);
}
.vidbar .flex { gap: 6px; }
.vidbar #v-clock { margin-left: auto; }
.vidbar .editsel { padding: 3px 6px; font-size: 12.5px; }

@media (max-width: 900px) {
  .vidstage.vidstage-two { grid-template-columns: 1fr; gap: 2px; }
  .vidplayer { max-height: 50vh; }
  .vidprev { flex-direction: column; }
  .vidprev video { width: 100%; max-width: none; }
}

/* 分析工具：計時、數步、劃線 -------------------------------------------- */

/* 劃線那一層疊在影片正上方。沒選形狀時完全穿透，播放控制照樣按得到；
   選了形狀才吃滑鼠事件，游標也換成十字。 */
.vidcanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; touch-action: none;
}
.vidcanvas.armed { pointer-events: auto; cursor: crosshair; }

/* 工具分三組（一般／田徑專項／力量訓練）：頁籤揀組，下面嗰行只出該組嘅工具。
   選中嘅組同選中嘅工具都係 .btn.ghost.on，著色跟版面其他頁籤同一條規則。
   `hidden` 喺 .btn 上面要寫返一次——.btn 自己有 display，唔寫就照樣見到。 */
.toolrow {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 18px 0;
}
.toolrow .btn[hidden] { display: none; }

/* 拍攝指南：一版一版嘅參考文字，唔係數字盤。用細一級嘅字同左邊一條
   訊號線做記號，同上面嗰堆量度輸出分得開。 */
.guidelist { display: grid; gap: 4px; }
.guidelist ul {
  margin: 0 0 8px; padding: 0; list-style: none;
  display: grid; gap: 4px;
}
.guidelist li {
  font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
}
.guidelist li b { color: var(--text); font-weight: 500; margin-right: 6px; }
.guidelist ul.warn li { border-left-color: var(--yellow); }

.guideterms summary { cursor: pointer; }
.guideterms dl {
  margin: 8px 0 0; display: grid; gap: 2px 14px;
  grid-template-columns: minmax(150px, max-content) 1fr;
}
.guideterms dt { color: var(--accent); }
.guideterms dd { margin: 0; color: var(--text-dim); }
@media (max-width: 640px) {
  .guideterms dl { grid-template-columns: 1fr; }
  .guideterms dd { margin-bottom: 6px; }
}

/* 分析工具那幾張選單（量邊個角、量咩、拍攝指南）。
   以前它們借用 .editnum——那是「改一格數字」的樣式：等寬字、靠右、56px 闊。
   這裡挑的是項目名字，一行三十幾個字，靠右讀起來每一行的頭都對不齊，
   等寬字也把中文排得鬆散。所以自己一套：靠左、跟正文同一套字。 */
.toolsel {
  width: auto; max-width: 100%; min-width: 240px;
  text-align: left; font-family: inherit; font-size: 13px;
  padding: 5px 8px; line-height: 1.5;
}
.toolsel optgroup {
  font-style: normal; font-weight: 600; font-size: 12px;
  color: var(--text-dim); background: var(--surface);
}
.toolsel option { font-weight: 400; color: var(--text); background: var(--surface); }
@media (max-width: 640px) { .toolsel { min-width: 0; width: 100%; } }

/* 角度說明那幅示意圖：線用 currentColor，兩種佈景都看得見 */
.angdiag {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; color: var(--accent); background: var(--surface-2);
}
.angdiag svg { display: block; width: 100%; height: auto; }

.toolpane { padding: 14px 18px; }
.toolout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
}
.toolout > div { display: flex; align-items: center; gap: 6px; }
.toolout .big { font-size: 20px; }

/* 每一步的時間；記滿一趟 400 米也不會把版面撐開 */
.steplist { max-height: 76px; overflow-y: auto; line-height: 1.7; word-break: break-all; }

/* ==================================== 手機：登錄時的輸入，與窄螢幕的看法
   手機是運動員在場邊真正會用的裝置：一隻手拿著、一隻手打。這一段只解決
   幾件會讓人乾脆不用手機登錄的事——打一格畫面跳一次、格子按不中、
   橫向捲到第五欄已經忘了自己在改第幾組、揭頁鍵永遠在頁尾要捲到底。 */

@media (max-width: 760px) {
  /* iOS 只要輸入框小於 16px 就自動放大整頁。表格裡那些窄格
     （.editnum／.editsel／新增那一列）以前沒蓋到，等於每打一格跳一次。 */
  .editnum, .editsel,
  .setgrid input, .setgrid select,
  .setdetail input, .setdetail select,
  .logtable input, .logtable select { font-size: 16px; }

  /* 按得中：格子高度給到手指的大小，寬度容得下放大後的數字 */
  .editnum { min-height: 36px; width: 88px; padding: 5px 8px; }
  .editnum.sm { min-height: 36px; width: 66px; }
  .editnum.wide { min-height: 36px; }
  .editsel { min-height: 36px; padding: 4px 6px; }
  .setgrid td { padding: 5px 6px; }
  .setgrid input, .setgrid select { padding: 6px 8px; }
  .setgrid .timecell .mincell { max-width: 66px; }

  /* 格子變大，表格就變寬；本來就是橫向捲的，把最小寬度一起補上 */
  .setdetail table { min-width: 880px; }
  .setgridwrap .setgrid { min-width: 700px; }

  /* 橫向捲的時候「第幾組」「哪一天」要一直看得到，
     不然改到右邊第五欄，已經不知道自己在改哪一列。 */
  .setdetail table tbody td:first-child,
  .setdetail table thead th:first-child,
  .setgrid tbody td:first-child,
  .setgrid thead th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface); border-right: 1px solid var(--border);
  }
  .setdetail table thead th:first-child,
  .setgrid thead th:first-child { z-index: 3; background: var(--surface-2); }
  /* 沒做完的那一列本來是紅底，固定欄要自己把底色補成不透明的同一個紅 */
  .setdetail tr.failedrow > td:first-child {
    background: color-mix(in srgb, var(--red) 10%, var(--surface));
  }

  /* 表頭跟著捲進來：欄名一直在，數字才知道是什麼 */
  .setdetail table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }

  /* 揭頁鍵黏在畫面底：讀到哪裡都按得到，不用捲到頁尾才換下一部份 */
  .anaturn {
    position: sticky; bottom: 0; z-index: 30;
    margin-top: 14px; padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(6px);
  }
  .anaturn .btn { min-height: 40px; }
  .anaturn .anaturn-now { font-size: 12px; }
}

/* 觸控裝置（手機、平板）：會按的東西一律留到 40px，手指才按得中。
   用 hover: none 而不是寬度——外接螢幕的平板一樣是用手指點。 */
@media (hover: none) {
  .btn, .secnav a, .tabs a {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  }
  .btn.sm { padding: 6px 12px; }
  .foldbtn { min-width: 34px; min-height: 34px; }
  .itemlist a { min-height: 44px; }
  /* 段落書籤：一顆一顆停得住，不會捲到一半卡在兩顆中間 */
  .secnav { scroll-snap-type: x proximity; }
  .secnav a { scroll-snap-align: start; }
}

/* ------------------------------------------------------------ 唯讀模式 */
/* 管理員把帳號設成唯讀時：改得到東西的地方看得見、按不動，
   免得人按了半天才發現後端不收（真正擋下來的是 core/access.py）。 */
.readonly .ro-cell { cursor: default; opacity: .9; }
.readonly form:not([data-readonly-ok]) :disabled { cursor: not-allowed; opacity: .55; }

/* --------------------------------------------------------------- 定格截圖
 *
 * 播放器下面一條「定格截圖」列，加一行縮圖；定格版就是一格一格的圖，
 * 每張圖上面疊一塊 canvas 劃線。圖用 object-fit: contain 置中，
 * 因為線存的是 0–1 比例座標，要對著「畫面」而不是「格子」落位。
 */
.stillbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.stillstrip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 0 14px 12px;
}
.stillthumb {
  flex: 0 0 auto; width: 104px; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg);
}
.stillthumb img { display: block; width: 100%; height: 60px; object-fit: cover; }
.stillthumb span {
  display: block; padding: 2px 4px; font-size: 11px; color: var(--text-dim);
  text-align: center;
}
.stillthumb:hover { border-color: var(--accent); }

.stillgrid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* 比較版剔得越多每張越細，但兩張嗰陣要夠大先睇得到落地嗰一腳 */
.stillgrid.wall-2 { grid-template-columns: repeat(2, 1fr); }
.stillgrid.wall-3 { grid-template-columns: repeat(3, 1fr); }

.stillcard { display: flex; flex-direction: column; }
.stillshot {
  position: relative; background: #000;
  aspect-ratio: 16 / 9;
}
.stillshot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.stillcanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; touch-action: none;
}
.stillcanvas.armed { pointer-events: auto; cursor: crosshair; }
.stilltools {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px;
}
.stillcard textarea { width: 100%; }

@media (max-width: 820px) {
  .stillgrid, .stillgrid.wall-2, .stillgrid.wall-3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- 比賽那一頁的影片剔選 */
/* 一行一條片，剔中的整行亮起來——教練要判斷的只是「係咪呢場」，
   所以縮圖細細一個就夠，日期同長度比畫面靚更有用。 */
.meetvids { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.meetvid {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
.meetvid:hover { border-color: var(--accent); }
.meetvid.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.meetvid input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.meetvid-thumb {
  flex: none; width: 64px; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.meetvid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meetvid-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.meetvid-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 篩選鈕借用 .chip 的樣子，但它本來是給 <span> 用的 */
button.chip { cursor: pointer; font-family: inherit; }

/* ======================================================= 範本與超級組 ====
   課表頁四區、團隊計劃頁「課表內容」四區，每一區同一排三顆掣。三顆做三件事，
   所以三隻色，唔好撳錯：綠＝拿現成範本入，橙＝開／改一個範本，藍＝把眼前
   排好嗰幾項存返做新範本。三顆都係空心（透明底），唔好同區入面嗰顆實色
   「＋ 加入活動」爭。 */
.btn.tpl-use  { background: transparent; border-color: var(--green);  color: var(--green); }
.btn.tpl-new  { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn.tpl-save { background: transparent; border-color: var(--blue);   color: var(--blue); }
.btn.tpl-use:hover  { filter: none; background: color-mix(in srgb, var(--green) 12%, transparent); }
.btn.tpl-new:hover  { filter: none; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn.tpl-save:hover { filter: none; background: color-mix(in srgb, var(--blue) 12%, transparent); }
/* 收起／展開嗰兩顆本身係 <summary>，要自己收埋三角同對齊返 */
summary.btn { list-style: none; display: inline-block; }
summary.btn::-webkit-details-marker { display: none; }

/* 團隊計劃頁第二步：三顆掣自己一行，唔好逼住上面「＋ 加入活動」 */
.tplbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.tplbar select { max-width: 260px; flex: 1 1 160px; }

/* ------------------------------------------------------------ 超級組 */
/* 課表上超級組係「附屬喺上一項」嘅一條細線，唔係另一項活動 */
.superline {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11.5px; color: var(--text-dim); margin-top: 3px;
}
.tag, .tag-super {
  display: inline-block; font-size: 10.5px; font-family: var(--mono);
  border: 1px solid var(--border); border-radius: 2px; padding: 0 5px;
  color: var(--text-dim); white-space: nowrap;
}
.tag-super {
  color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.superline .cell { color: var(--text); font-family: var(--mono); }
/* 搭檔自己嗰行份量：靠左一條藍線，睇得出係屬於上面個超級組 */
.acttable .planline.superplan {
  border-left: 2px solid color-mix(in srgb, var(--blue) 45%, transparent);
  padding-left: 6px; margin-left: 2px;
}
/* 「加入活動」細節入面搭檔嗰一段 */
.superdetails {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.superdetails .tplsec [data-ss-del] { margin-left: auto; }
/* 第二至第五個搭檔的 ✕，與「再接一個超級組」那一小格：同搭檔那條線一樣細 */
.superline form.inline { display: inline; margin: 0; }
.superset-add {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0 4px;
}
.superset-add input[type="text"] {
  width: 14em; max-width: 100%; font-size: 12px; padding: 2px 6px;
}
.superset-add .linkbtn { font-size: 12px; }

/* 逐組份量：課表那一行下面的小表，每一組一行 */
.setplan {
  width: auto; margin: 4px 0 2px; border-collapse: collapse;
  font-family: var(--mono); font-size: 12px;
}
.setplan th {
  font-family: inherit; font-weight: 500; color: var(--text-dim);
  text-align: left; padding: 1px 10px 1px 0; border: 0;
}
.setplan td { padding: 1px 10px 1px 0; border: 0; white-space: nowrap; }
.setplan td form { display: inline; margin: 0; }
.setplan-add { display: inline-block; margin: 0 0 4px; }
.setplan-add .linkbtn { font-size: 12px; }

/* 「加入活動」的負荷計算方法 + 逐組輸入表 */
.kindpick {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; margin-bottom: 8px;
}
.kindpick .tf { margin: 0; }
.setrowswrap { overflow-x: auto; }
/* 加入活動對話框的估算負荷：大字一行是 AU，下面一行是 TRIMP；長算式在手機上照樣換行 */
.actestimate {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); overflow-wrap: anywhere;
}
.actestimate-main { font-weight: 600; }
.setrows { width: 100%; border-collapse: collapse; }
.setrows th {
  font-size: 12px; font-weight: 500; color: var(--text-dim);
  text-align: left; padding: 2px 4px; border: 0;
}
.setrows td { padding: 2px 4px; border: 0; }
.setrows td.num { width: 22px; text-align: right; }
.setrows input { width: 100%; min-width: 64px; box-sizing: border-box; }
.setrows [hidden] { display: none; }
#setRowNote { flex: 1 1 220px; }

/* 教練替運動員排嘅活動，名稱旁邊嗰個小記號（改得動，記號只係認得出邊項） */
.tag-coach {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: 2px;
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.tag-coach svg {
  width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* 訓練刺激：名稱下面一顆綠色標籤，撳開先見「為甚麼」 */
.tag-stim {
  color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}
details.stim { margin-top: 3px; font-size: 12px; }
details.stim summary { cursor: pointer; list-style: none; display: inline; }
details.stim summary::-webkit-details-marker { display: none; }
details.stim[open] summary .tag-stim::after { content: " ▴"; }
details.stim p { margin: 4px 0 0; max-width: 46em; line-height: 1.5; white-space: normal; }
/* 「照做咗」：一排 RPE 掣，撳一個就完成登記；手機一行放唔晒就自動摺行 */
.donequick {
  display: grid; gap: 6px; margin: 10px 0 12px; padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--green) 45%, transparent); border-radius: 4px;
}
.rpebtns { display: flex; flex-wrap: wrap; gap: 6px; }
.rpebtns .btn { min-width: 40px; min-height: 40px; font-family: var(--mono); }
/* 對照尺：個人最佳下面一行，撳開見世界紀錄／香港紀錄各一條長條 */
details.ruler summary { cursor: pointer; font-size: 12px; color: var(--text-dim); }
.ruler-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto;
  align-items: center; gap: 8px; margin: 4px 0; font-size: 12px;
}
.ruler-lbl { overflow-wrap: anywhere; }
.ruler-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ruler-bar span { display: block; height: 100%; background: var(--accent); }
/* 能力鏈入門三格：力量／爆發／速度；沒資料的格子變灰寫怎樣解鎖 */
.chain3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--border);
}
.chaincell { background: var(--surface); padding: var(--card-pad); }
.chaincell .lbl { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.chaincell .value { font-size: 24px; margin: 4px 0; }
.chaincell .value small { font-size: 12px; color: var(--text-dim); }
.chaincell p { margin: 4px 0 0; font-size: 13px; }
.chaincell.locked { color: var(--text-dim); }
@media (max-width: 620px) { .chain3 { grid-template-columns: 1fr; } }
/* 影子賽跑：兩條紅色跑道（白色分道線、終點線），人形不寫名字，用顏色分你和 Bolt；
   人形的「胸口」對準位置——left 是距離的百分比，translateX(-60%) 讓衝線時剛好壓線 */
.shadow { padding: var(--card-pad); border-top: 1px solid var(--border); }
.shadow:first-of-type { border-top: 0; }
.shadow p { margin: 0 0 8px; }
.track {
  position: relative; background: var(--track); border-radius: 3px;
  border-top: 2px solid var(--track-line); border-bottom: 2px solid var(--track-line);
  padding: 0 22px 0 16px;
}
/* 終點線：黑白方格 */
.track::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 22px; width: 6px;
  background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 6px 6px;
}
.tlane { position: relative; height: 40px; }
.tlane + .tlane { border-top: 2px solid var(--track-line); }
.tnum {
  position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--track-line);
}
.runner { position: absolute; bottom: 3px; transform: translateX(-60%); z-index: 1; line-height: 0; width: 24px; }
.runner .fig { display: block; width: 24px; height: 32px; max-width: none; }   /* 放在 100% 時可用寬度是 0，不鎖死寬度人形會縮不見 */
.runner.you { color: var(--fig-you); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55)); }
.runner.bolt { color: var(--fig-bolt); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55)); }
/* 每十米一條分隔線：橫跨兩條跑道，比分道線淡，免得搶過人形；底下刻度對準同一位置 */
.tmarks { position: absolute; top: 0; bottom: 0; left: 16px; right: 22px; pointer-events: none; }
.tmark { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .4); }
.track-scale { position: relative; height: 14px; margin: 2px 22px 6px 16px; font-family: var(--mono); font-size: 10px; }
.track-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.track-scale span:first-child { transform: none; }
.figkey { display: inline-block; vertical-align: middle; line-height: 0; margin-left: 6px; }
.figkey:first-child { margin-left: 0; }
.figkey .fig { width: 12px; height: 16px; }
.figkey.you { color: var(--fig-you); }
.figkey.bolt { color: var(--text-dim); }
/* 個人挑戰：汗水餘額＋每週任務，一項一行，做完左邊一條綠線 */
.sweat-head { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: var(--card-pad); border-bottom: 1px solid var(--border); }
.sweat-head .lbl { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.sweat-total { font-size: 30px; font-weight: 700; color: var(--fig-you); }
.sweat-total small { font-size: 16px; }
.tasks { list-style: none; margin: 0; padding: 0; }
.task {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px var(--card-pad); border-top: 1px solid var(--border);
}
.task:first-child { border-top: 0; }
.task-main { display: grid; gap: 4px; }
.task.done { box-shadow: inset 3px 0 0 var(--green); }
.task.done .ringbar span { background: var(--green); }
.task-gain { font-size: 15px; color: var(--fig-you); }
.task-gain::after { content: " 💧"; font-size: 12px; }
.task-gain.cost { color: var(--text-dim); }   /* 活動要花的汗水：灰字，跟賺到的黃綠分開 */
.task form { margin-top: 4px; }
/* 測驗日 */
.tdgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.tdgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tdgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) { .tdgrid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tdgrid input, .tdset input { width: 100%; min-height: 40px; }
.tdset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 14px; padding: 8px 12px 0; }
.tdset legend { font-weight: 600; padding: 0 4px; }
.tdlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.tdline { display: grid; gap: 2px; }
.tdline .lbl { font-size: 12px; color: var(--text-dim); }
.tdline b { font-size: 20px; }
.fvprof { border-top: 1px solid var(--border); padding-top: 10px; }
/* 每週挑戰：能力鏈卡最底一條；做完左邊一條綠線 */
.weekly { padding: var(--card-pad); border-top: 1px solid var(--border); display: grid; gap: 4px; }
.card.weekly { border-top: 1px solid var(--border); }
.weekly.done { box-shadow: inset 3px 0 0 var(--green); }
/* 拆解卡：一欄一張，桌面兩欄；鎖住的卡變淡但照樣看得到標題——知道有甚麼可以解鎖 */
.bcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.bcard { margin: 0; }
.bcard-title { font-size: 18px; margin: 4px 0 8px; }
.bcard .ring { font-family: var(--mono); font-size: 13px; color: var(--text-dim); font-weight: 400; }
.bcard.locked { color: var(--text-dim); border-style: dashed; }
.bcard .guess label { display: block; margin-bottom: 6px; }
.bcard .guess input { width: 7em; min-height: 40px; }
.guess-verdict { font-weight: 600; margin: 0 0 4px; }
/* 能力剖面：七環一行一條；鎖住的環變淡但照樣列出——知道還差甚麼測驗 */
.ringrow { padding: 8px 0; border-top: 1px solid var(--border); display: grid; gap: 4px; }
.ringrow:first-of-type { border-top: 0; }
.ringrow.locked { color: var(--text-dim); }
.ringrow .between { flex-wrap: wrap; gap: 2px 8px; }
.ringbar { height: 8px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.ringbar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
/* 瓶頸句子與實驗報告：每句底下可以直接開實驗 */
.diag { padding: 8px 0; border-top: 1px solid var(--border); }
.diag:first-of-type { border-top: 0; }
.diag p { margin: 0 0 6px; }
.diag form input[type=date] { min-height: 40px; }
.card.experiment { box-shadow: inset 3px 0 0 var(--accent); }
/* 狀態總覽能力鏈卡上的一條：瓶頸第一句＋進行中的實驗 */
.ringmini { padding: var(--card-pad); border-top: 1px solid var(--border); display: grid; gap: 4px; }
/* 曲線對照：兩條線各自除以自己的極速，只比形狀 */
.curve { width: 100%; height: 160px; display: block; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--border) calc(10% - 1px) 10%); }
.curve polyline { fill: none; stroke-width: 2.5; }
.curve .you { stroke: var(--accent); }
.curve .bolt { stroke: var(--text-dim); stroke-dasharray: 4 3; }
.key { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin: 0 4px 0 8px; }
.key.you { background: var(--accent); }
.key.bolt { background: var(--text-dim); }
/* 每一環的小走勢圖；直線是介入紀錄——看介入之後線有沒有轉向 */
.spark { width: 100%; height: 28px; display: block; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark .mark { stroke: var(--text-dim); stroke-dasharray: 2 2; stroke-width: 1; }
/* 例外清單、按瓶頸分組、介入紀錄：一行一個人／一件事，右邊一顆按鈕 */
.watchrow { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.watchrow:first-of-type { border-top: 0; }
.watchrow > div:first-child { flex: 1 1 220px; min-width: 0; }
.watchrow .badge { margin-right: 6px; }
.nowrap { white-space: nowrap; }
/* 隊內進步挑戰的排名：比進步幅度，自己那行加粗 */
.board { margin: 4px 0; padding-left: 1.4em; }
.board .me { font-weight: 600; }
/* 一頁報告：螢幕上是一張卡，列印時收起系統外框，白底黑字一頁 */
.report header { margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.report h1 { margin: 0; }
.report h2 { font-size: 15px; margin: 16px 0 6px; }
.report section .between { padding: 4px 0; flex-wrap: wrap; gap: 2px 8px; }
@media print {
  .sidebar, .topbar, .noprint, .fguide, .alert { display: none !important; }
  .applayout, .main { display: block !important; margin: 0 !important; padding: 0 !important; }
  body, .card.report { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 0 !important; }
  .report .c-dim { color: #555 !important; }
  .report .c-green { color: #1a7f37 !important; }
  .report .c-red { color: #b42318 !important; }
  @page { margin: 14mm; }
}
.stimsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.stimsum .lbl { font-size: 12px; color: var(--text-dim); }
/* 「加入活動」的今天的訓練計劃：一項一張，名稱 ✕ 一行、訓練類型一行 */
.actlist { display: grid; gap: 6px; }
.actline {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); padding: 8px 10px; display: grid; gap: 6px;
}
.actline-head { display: flex; align-items: center; gap: 8px; }
.actline-name { flex: 1; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.actline-type {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-dim);
}
.actline-type input { flex: 1 1 140px; min-width: 120px; }
/* 課表那一行活動名稱旁的訓練類型：數據分析照它併項目 */
.tag-type {
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
}

/* ------------------------------------------------- 動作庫挑選那一塊 */
/* 以前係左右兩欄，動作名長少少就睇唔晒。而家由上至下：兩個下拉＋搜尋一行，
   清單佔成行闊。 */
.libpickbox {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; background: var(--bg); margin-bottom: 10px;
}
.libpickbox .pickhead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.libpickbox .pickhead select { flex: 1 1 130px; min-width: 110px; max-width: 220px; }
.libpickbox .pickhead input[type="search"] { flex: 2 1 200px; min-width: 150px; }
.libpickbox .picklist {
  width: 100%; margin-top: 6px; height: auto; padding: 2px;
  font-family: var(--mono); font-size: 12.5px;
}
@media (max-width: 700px) {
  .libpickbox .pickhead select,
  .libpickbox .pickhead input[type="search"] { flex: 1 1 100%; max-width: none; }
}

/* 「加入活動」第三段：組數／次數／…預設收起，照活動庫嘅預設值就夠用 */
.actdetails > summary {
  cursor: pointer; color: var(--text-dim); font-size: 12.5px; margin: 8px 0 4px;
}
.actdetails[open] > summary { color: var(--text); }

/* 一格一格嘅欄位：窄螢幕自己散開，唔使逐個改 */
.tplfields {
  display: grid; gap: 8px 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.tplfields .tf {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--text-dim);
}
.tplfields .tf input, .tplfields .tf textarea { width: 100%; }

/* --------------------------------------------- 「設計範本」對話框 */
/* 入面有一張十欄嘅表，620px 唔夠擺 */
.tpldlg { width: min(1040px, 96vw); max-height: 88vh; overflow-y: auto; }
.tplpanel + .tplpanel { margin-top: 0; }
.tplmeta, .tplnew, .tpladd {
  display: block; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px;
}
.tplmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tplmeta input[type="text"] { flex: 1 1 160px; min-width: 120px; }
.tplsec {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px;
}
/* 十欄嘅表：窄螢幕橫向捲，捲嘅係張表自己 */
.tplitemwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tplitems { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tplitems th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text-dim);
  padding: 4px 3px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tplitems td { padding: 3px; border-bottom: 1px solid var(--border); }
.tplitems input[type="text"] { width: 100%; min-width: 64px; }
.tplitems td.empty, .tplitems .empty { color: var(--text-dim); padding: 10px 3px; }
.tplitemact { white-space: nowrap; }
.tplitemact .linkbtn { margin-left: 4px; }
@media (max-width: 700px) {
  .tpldlg { padding: 14px; }
}

/* ---------------------------------------------------------------- 故事
   左邊清單、右邊寫新的；手機疊成一欄，清單在上面——先看到自己寫過甚麼。 */
.storygrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.storypad { padding: 16px 18px; }
.storylist { list-style: none; margin: 0; padding: 0; }
.storylist li + li { border-top: 1px solid var(--border); }
.storylist a { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; color: inherit; text-decoration: none; }
.storylist a:hover { background: var(--surface-2); }
.storylist-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.storylist-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storylist-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.storyform textarea { resize: vertical; }
.storyform label.check { display: flex; align-items: center; gap: 8px; font-size: 13px;
  letter-spacing: 0; color: var(--text); margin: 4px 0 16px; }
/* 由影片揀封面：hidden 要蓋得過 display:grid，所以只在沒 hidden 時才排版 */
.coverpick:not([hidden]) { display: grid; gap: 6px; margin-bottom: 12px; }
.coverpick video { width: 100%; max-height: 260px; background: #000; border-radius: var(--radius-sm); }
.coverpick input[type=range] { width: 100%; }
.storyform-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 900px) {
  .storygrid { grid-template-columns: minmax(0, 1fr); }
}
.nav-item .nav-count { margin-left: auto; padding: 1px 7px; font-size: 10.5px; }
.nav-item .nav-count::before { display: none; }
.sb-collapsed .nav-item .nav-count { display: none; }

/* ------------------------------------------------- 模式標籤（側欄最底） */
/* 教練模式＝訊號橙、運動員模式＝綠、管理員模式＝藍；一眼分得出自己是哪一邊 */
.modechip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px 3px 8px; border-radius: 99px; border: 1px solid;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; line-height: 1.5;
  text-decoration: none; white-space: nowrap;
}
.modechip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.modechip:hover { text-decoration: none; filter: brightness(1.15); }
.modechip.m-coach   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
                      background: color-mix(in srgb, var(--accent) 14%, transparent); }
.modechip.m-athlete { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent);
                      background: color-mix(in srgb, var(--green) 13%, transparent); }
.modechip.m-admin   { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent);
                      background: color-mix(in srgb, var(--blue) 13%, transparent); }

/* ------------------------------------------------- 💡 每一頁頂端的功能導引 */
.fguide {
  margin: 0 0 16px; border: 1px solid var(--border); border-left: 3px solid var(--yellow);
  border-radius: var(--radius); background: color-mix(in srgb, var(--yellow) 5%, var(--surface));
}
.fguide > summary {
  list-style: none; cursor: pointer; padding: 9px 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px;
}
.fguide > summary::-webkit-details-marker { display: none; }
.fguide > summary::after { content: "▾"; margin-left: auto; color: var(--text-dim); }
.fguide:not([open]) > summary::after { content: "▸"; }
.fg-bulb { font-size: 16px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--yellow) 70%, transparent)); }
.fguide > summary b { color: var(--yellow); }
.fg-names { color: var(--text-dim); font-size: 12px; }
.fg-body { padding: 0 14px 12px; display: grid; gap: 14px; }
.fg-item + .fg-item { border-top: 1px dashed var(--border); padding-top: 12px; }
/* 「怎樣用這一頁」：操作說明只放在這裡，所以排在功能介紹前面 */
.fg-help h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--yellow); }
.fg-help ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.75; }
.fg-help + .fg-item { border-top: 1px dashed var(--border); padding-top: 12px; }
.fg-tip { margin: 0 0 8px; font-size: 13px; line-height: 1.7; }
.fg-tip b { margin-right: 8px; }
.fg-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fg-mode {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); opacity: .78;
}
.fg-mode.on { opacity: 1; border-color: color-mix(in srgb, var(--yellow) 50%, var(--border)); }
.fg-mode h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.fg-mode h4 em { font-style: normal; font-size: 10.5px; color: var(--yellow); letter-spacing: .5px; }
.fg-mode ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.fg-mode.on ul { color: var(--text); }
.fg-links { margin: 8px 0 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.fg-foot { margin: 0; font-size: 12px; color: var(--text-dim); display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .fg-modes { grid-template-columns: 1fr; }
  .fguide > summary { padding: 8px 12px; }
  .fg-body { padding: 0 12px 12px; }
}

/* 全隊總覽「團隊」：按報名計劃篩選的藥丸；手機上一隻手要按得中，所以比影片庫的大一點 */
.teamchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.teamchips .chip { padding: 5px 12px; }
.team-cell { min-width: 120px; line-height: 1.5; }

/* 模式對比彈出視窗（#modeDlg）：外框不留 padding，點到 dialog 本身就只可能是背景那一層 */
/* 全站 * { margin: 0 } 會吃掉 dialog 預設的 margin: auto，要自己補回才會置中 */
.modedlg { width: min(980px, 94vw); max-height: 88vh; overflow: auto; padding: 0; margin: auto; }
.md-body { padding: 0 22px 20px; }
.modedlg .md-head { position: sticky; top: 0; z-index: 1; margin: 0; padding: 18px 22px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border); align-items: flex-start; gap: 12px; }
.modedlg .md-you { margin: 4px 0 0; }
.md-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; margin-bottom: 10px; }
.md-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.md-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid var(--border); }
.md-row:first-child { border-top: 0; }
.md-row > div { padding: 12px 14px; font-size: 13px; }
.md-th { background: var(--surface-2); }
.md-th > div { font-size: 11.5px; color: var(--text-dim); font-weight: 600; letter-spacing: .04em; }
.md-th > div.you { color: var(--accent); }
.md-feat b { display: block; margin-bottom: 3px; }
.md-feat span { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; }
.md-cell { border-left: 1px solid var(--border); }
.md-cell.you { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.md-cell ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
.md-note { margin: 12px 0 0; }
@media (max-width: 720px) {
  .md-body { padding: 0 14px 16px; }
  .modedlg .md-head { padding: 14px; }
  .md-th { display: none; }
  .md-row { grid-template-columns: 1fr 1fr; }
  .md-feat { grid-column: 1 / -1; padding-bottom: 4px !important; }
  .md-cell { border-left: 0; }
  .md-cell + .md-cell { border-left: 1px solid var(--border); }
  .md-cell::before { content: attr(data-label); display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
}
@media (max-width: 460px) {
  .md-row { grid-template-columns: 1fr; }
  .md-cell + .md-cell { border-left: 0; border-top: 1px dashed var(--border); }
}

/* ---------------------------------------------------------------- 我的帳號 */
/* 級別卡：試用級用訊號黃、基本級綠、專業級主色——一眼看得出自己在哪一級 */
.tiercard { border-top: 3px solid var(--yellow); }
.tiercard.t-basic { border-top-color: var(--green); }
.tiercard.t-pro { border-top-color: var(--accent); }
.tc-label { color: var(--text-dim); font-size: 11.5px; letter-spacing: 1px; font-weight: 700; }
.tc-tier { font-size: 26px; font-weight: 700; margin: 4px 0 2px; }
.tc-left b { font-size: 34px; color: var(--yellow); }
.tc-note { font-size: 12.5px; color: var(--text-dim); margin: 6px 0; }
.tc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; margin: 14px 0 0; }
.tc-facts dt { font-size: 11px; color: var(--text-faint); letter-spacing: .6px; }
.tc-facts dd { margin: 2px 0 0; font-size: 13px; }
.verilist, .modlist { list-style: none; margin: 10px 0; padding: 0; }
.verilist li, .modlist li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap;
}
.modlist li { padding: 8px 14px; }
.modlist li:not(.on) { color: var(--text-dim); }
.verilist b { font-weight: 600; word-break: break-all; }
.formalsteps { list-style: none; margin: 0; padding: 0; }
.fstep { padding: 14px; border-bottom: 1px solid var(--border); }
.fstep:last-child { border-bottom: 0; }
.fstep h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.fstep-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); font-family: var(--mono); font-size: 12px;
}
.fstep.done .fstep-n { background: var(--green); color: #fff; }
.checkline { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; letter-spacing: 0; font-size: 12.5px; color: var(--text); }
.codeform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.codeform input[name="code"] { width: 9em; font-family: var(--mono); letter-spacing: 3px; }
/* 改電話電郵：收在驗證卡底，平時只露一行連結 */
.contactedit { margin: 0 0 12px; }
.contactedit summary { cursor: pointer; font-size: 12.5px; color: var(--accent); font-weight: 600; }
.contactform { display: grid; gap: 10px; margin-top: 10px; }
.contactform input { width: 100%; }
.setupcard { max-width: 720px; }
/* 試用提醒橫額：字與按鈕同一行，窄螢幕自動折行 */
.trialbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 使用者條款
   標題自動編號：條文號跟着顯示的段落走，試用期版本少了專業級那幾節也不會跳號 */
.terms{counter-reset:tsec;line-height:1.75;font-size:14.5px}
.terms .terms-meta{font-size:12.5px;opacity:.75;margin:0 0 14px}
.terms section{counter-increment:tsec;margin:0 0 18px;padding:0;border:0}
.terms section::before{content:none}
.terms h2{font-size:16px;margin:0 0 6px}
.terms h2::before{content:counter(tsec) ". ";}
.terms h3{font-size:14px;margin:10px 0 4px}
.terms ol,.terms ul{padding-left:1.4em;margin:4px 0}
.terms li{margin:2px 0}
.terms p{margin:4px 0}
/* 註冊與同意頁的條款框：限高捲動，手機上同意勾與按鈕仍在一屏之內 */
.termsbox{max-height:50vh;overflow:auto;padding:14px 16px;grid-column:1/-1;
  border:1px solid var(--border);-webkit-overflow-scrolling:touch}
.termsbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.termsbox .terms{font-size:13.5px}

/* 專業資格藍剔：藍色只留給平台核實了的資格，審核中／未能認證用 badge */
.vcred{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;
  color:var(--blue);white-space:nowrap;vertical-align:middle}
.vtick{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:10px;line-height:1;font-weight:700}
/* 認證專業資格頁：兩步、四張可點的卡；手機上一欄 */
.credsteps{list-style:none;display:flex;gap:18px;margin:0 0 16px;padding:0;font-size:13px;color:var(--text-dim)}
.credsteps li.on{color:var(--text);font-weight:700}
.credsteps li.done{color:var(--accent)}
.credkinds{border:0;margin:0;padding:0;display:grid;gap:10px}
.credkinds legend{margin-bottom:8px}
.credkind{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;min-height:44px}
.credkind:has(input:checked){border-color:var(--blue);
  background:color-mix(in srgb, var(--blue) 7%, transparent)}
.credkind input{margin-top:3px}
.credkind > span{display:grid;gap:2px}
.credrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;
  padding:8px 0;border-top:1px solid var(--border)}
.credrow:first-child{border-top:0}
.credrow form{display:inline}

/* 訓練系統切換：跟語言切換同一個外框，用左邊一條色帶分辨三個系統 */
.syspick { border-left: 3px solid var(--accent); }
.syspick[data-system="distance"] { border-left-color: #1f8fd6; }
.syspick[data-system="fitness"] { border-left-color: #e0a40b; }
.syspick select { font-family: var(--sans, inherit); font-size: 12px; font-weight: 600; }
@media (max-width: 640px) { .syspick select { max-width: 84px; } }
/* 側欄品牌寫的是目前系統；「室內體能健身賽事」最長，字縮細一點才放得進側欄 */
.sb-brand .brandtext b[data-system="fitness"] { font-size: 12px; letter-spacing: 0; }

/* 登入頁：三張系統卡（短跑／長跑／室內體能健身賽事），整張卡都按得到，手機上直排 */
.syscards { border: 0; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.syscards legend { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; padding: 0; }
.syscard {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  border-left: 4px solid var(--accent); background: var(--bg);
}
.syscard[data-system="distance"] { border-left-color: #1f8fd6; }
.syscard[data-system="fitness"] { border-left-color: #e0a40b; }
.syscard input { margin-top: 3px; flex: none; width: auto; }
.syscard-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.syscard-body b { font-size: 14px; }
.syscard-body small { font-size: 12px; color: var(--text-dim); }
.syscard:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.syscard input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ AI 姿態分析
 * 骨架畫喺劃線層下面，永遠唔食滑鼠——撳片嘅動作照舊係劃線同播放。
 * 「AI 分析」掣用主色描邊：跑項入面最常用嗰件，要一眼搵到。
 * 報告每一行用左邊一條色帶講判斷（綠／黃／紅），色盲都睇得到行尾嘅參考值。
 */
.posecanvas { pointer-events: none; }
.posebtn { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.posebtn.on { background: var(--accent); color: var(--accent-ink); }
.posebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 8px 14px; border-top: 1px solid var(--border);
}
.posebar label { display: inline-flex; align-items: center; gap: 4px; }
#pose-prog { width: 140px; height: 8px; }
.poseprofiles dt { font-weight: 600; margin-top: 6px; }
.poseprofiles dd { margin: 2px 0 0; }
.posereport { padding: 12px 18px; border-top: 1px solid var(--border); }
.posereport:first-of-type { border-top: 0; }
.posereport > summary { cursor: pointer; list-style: none; }
.posemetrics { list-style: none; padding: 0; margin: 4px 0 0; }
.posemetrics li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 5px 0 5px 10px; border-left: 3px solid var(--border); margin: 4px 0;
}
.posemetrics li > span:first-child { flex: 1 1 10em; }
.posemetrics li > .small { flex-basis: 100%; }
.posemetrics .v-good  { border-left-color: var(--green); }
.posemetrics .v-watch { border-left-color: var(--yellow); }
.posemetrics .v-fix   { border-left-color: var(--red); }
.posemetrics .v-fix b { color: var(--red); }
/* 數據分析「影片姿態 AI 分析」：正在綜合分析的那一份標出來 */
/* 數據分析的報告選單列：欄頭是排序連結，揀中那一行上底色 */
.posemenu th a { color: inherit; text-decoration: none; white-space: nowrap; }
.posemenu td a { color: inherit; }
.posemenu tr.is-chosen td { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 600; }
.tablewrap { overflow-x: auto; max-width: 100%; }
.poseSteps .table td, .poseSteps .table th { padding: 4px 6px; white-space: nowrap; }