:root {
  color-scheme: dark;
  --bg: #0a1428;
  --surface: #12213b;
  --surface-2: #1a2d4d;
  --line: #24395c;
  --text: #eef3fb;
  --text-2: #a9b8cf;
  --muted: #7487a3;
  --accent: #36d6b0;
  --accent-2: #2f8cff;
  --grad: linear-gradient(135deg, #5ef08f 0%, #2fd3c8 45%, #2f8cff 100%);
  /* 狀態顏色（一定搭配文字標示） */
  --st-booked: #3987e5;
  --st-attended: #0ca30c;
  --st-leave: #fab219;
  --st-absent: #d03b3b;
  --bar: #2fd3c8;
  --on-grad: #062033;
  --topbar-bg: rgba(10, 20, 40, .88);
  --topbar-line: rgba(36, 57, 92, .6);
  --tabbar-bg: rgba(14, 26, 48, .94);
  --danger-bg: rgba(208, 59, 59, .16);
  --danger-text: #ff8a8a;
  --chip-on-bg: rgba(47, 211, 200, .16);
  --day-other: #3f5373;
  --warn-bg: rgba(250, 178, 25, .12);
  --warn-line: rgba(250, 178, 25, .4);
  --warn-text: #ffd98a;
  --backdrop: rgba(0, 0, 0, .5);
  --track: rgba(36, 57, 92, .5);
  --grid: rgba(116, 135, 163, .18);
  --tip-bg: #eef3fb;
  --tip-text: #0a1428;
  --shadow: rgba(0, 0, 0, .4);
  --q-attended: #6fe26f;
  --q-leave: #ffd27a;
  --q-absent: #ff8a8a;
  --radius: 16px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 頂部 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + 10px) 16px 10px;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--topbar-line);
}
.topbar h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.view { padding: 12px 16px calc(var(--tabbar-h) + var(--safe-b) + 24px); max-width: 640px; margin: 0 auto; }

/* ---------- 底部分頁 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--tabbar-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.tab { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; }
.tab svg { width: 24px; height: 24px; }
.tab.active { color: var(--accent); }
.tab-add .plus {
  width: 52px; height: 52px; border-radius: 18px; margin-top: -18px;
  display: grid; place-items: center; background: var(--grad); color: var(--on-grad);
  box-shadow: 0 6px 18px rgba(47, 211, 200, .35);
}
.tab-add .plus svg { width: 26px; height: 26px; stroke-width: 2.6; }

/* ---------- 共用元件 ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.section-title { font-size: 13px; color: var(--text-2); margin: 20px 4px 8px; font-weight: 600; letter-spacing: .5px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.btn {
  border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 600;
  background: var(--surface-2); color: var(--text);
}
.btn.primary { background: var(--grad); color: var(--on-grad); }
.btn.danger { background: var(--danger-bg); color: var(--danger-text); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 12px; font-size: 14px; border-radius: 10px; }
.icon-btn { background: var(--surface-2); border: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.booked { background: var(--st-booked); }
.dot.attended { background: var(--st-attended); }
.dot.leave { background: var(--st-leave); }
.dot.absent { background: var(--st-absent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 6px 13px; font-size: 14px;
}
.chip.on { background: var(--chip-on-bg); border-color: var(--accent); color: var(--text); }
.chip .x { margin-left: 6px; color: var(--muted); }

.seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 9px; color: var(--text-2); font-size: 14px; }
.seg button.on { background: var(--surface-2); color: var(--text); font-weight: 600; }

.empty { text-align: center; padding: 36px 16px; color: var(--muted); }

/* ---------- 日曆 ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head .month { font-size: 20px; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-day {
  aspect-ratio: 1 / 1.08; border: 0; border-radius: 12px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7px; gap: 4px;
  color: var(--text); font-size: 15px;
}
.cal-day.other { color: var(--day-other); }
.cal-day.has { background: var(--surface); }
.cal-day.today .num { color: var(--accent); font-weight: 700; }
.cal-day.sel { background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-dots { display: flex; gap: 3px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.banner { display: flex; align-items: center; gap: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.banner button { margin-left: auto; }

/* ---------- 課程卡片 ---------- */
.sess { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.sess .time { min-width: 50px; text-align: center; }
.sess .time b { display: block; font-size: 17px; }
.sess .time small { color: var(--muted); font-size: 12px; }
.sess .bar { width: 4px; border-radius: 4px; align-self: stretch; }
.sess .body { flex: 1; min-width: 0; }
.sess .title { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sess .title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess .sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.sess .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sess .tags span { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.sess .note { font-size: 13px; color: var(--warn-text); margin-top: 6px; }
.sess .quick { display: flex; gap: 6px; margin-top: 10px; }
.sess .quick .btn { flex: 1; }
.month-label { font-size: 13px; color: var(--text-2); margin: 18px 4px 8px; font-weight: 600; }

/* ---------- 表單 / 彈出頁 ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--backdrop); animation: fade .2s; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-height: 94dvh; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 22px 22px 0 0; border-top: 1px solid var(--line);
  animation: up .25s ease-out; max-width: 640px; margin: 0 auto;
}
.sheet.small { max-height: 70dvh; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 17px; flex: 1; text-align: center; }
.sheet-head .btn { min-width: 64px; }
.sheet-body { overflow-y: auto; padding: 8px 16px calc(var(--safe-b) + 24px); -webkit-overflow-scrolling: touch; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } }

.field { margin-top: 14px; }
.field > label, .field > .lbl { display: block; font-size: 13px; color: var(--text-2); margin: 0 2px 6px; font-weight: 600; }
.field .req { color: var(--danger-text); }
.input, select.input, textarea.input {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; font-size: 16px; color: var(--text); outline: none; min-height: 46px;
}
.input:focus { border-color: var(--accent); }
textarea.input { min-height: 80px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggest { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.suggest::-webkit-scrollbar { display: none; }
.suggest .chip { flex: none; font-size: 13px; padding: 5px 11px; }

.ex { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 8px; }
.ex .row1 { display: flex; gap: 8px; }
.ex .row1 .input { flex: 1; }
.ex .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ex .nums label { font-size: 11px; color: var(--muted); display: block; margin: 0 2px 3px; }
.ex .nums .input { padding: 9px 10px; min-height: 42px; text-align: center; }

.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.status-grid button { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 2px; font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.status-grid button.on { border-color: currentColor; background: var(--surface-2); color: var(--text); font-weight: 700; }
.status-grid i { width: 9px; height: 9px; border-radius: 50%; }

.warn { font-size: 13px; color: var(--warn-text); margin-top: 6px; }

/* ---------- 統計 ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi .k { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 28px; font-weight: 800; margin-top: 2px; }
.kpi .v small { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-top: 10px; }
.chart-card h3 { margin: 0 0 4px; font-size: 15px; }
.chart-card .desc { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.hbar { display: grid; grid-template-columns: 112px 1fr 34px; align-items: center; gap: 8px; padding: 5px 0; }
.hbar .name { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 12px; background: var(--track); border-radius: 0 4px 4px 0; }
.hbar .fill { height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; min-width: 3px; }
.hbar .val { font-size: 13px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.chart svg text { fill: var(--muted); stroke: none; font-size: 11px; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.tip {
  position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -100%);
  background: var(--tip-bg); color: var(--tip-text); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 9px;
  box-shadow: 0 6px 16px var(--shadow); white-space: nowrap;
}

/* ---------- 設定 ---------- */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-align: left; color: var(--text); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item svg { width: 18px; height: 18px; color: var(--muted); }
.progress { height: 8px; border-radius: 4px; background: var(--track); margin-top: 8px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.card-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-top: 6px; }
.about { display: flex; align-items: center; gap: 14px; }
.about img { width: 58px; height: 58px; border-radius: 14px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px); transform: translateX(-50%); z-index: 50;
  background: var(--tip-bg); color: var(--tip-text); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 22px var(--shadow); max-width: 88vw; text-align: center;
}

/* ===== v1.1.0 ===== */
/* 不讓畫面左右移動 */
html, body { overflow-x: clip; max-width: 100%; } /* clip 不會讓上方標題列失去固定效果 */
.sheet { overflow: hidden; width: 100%; }
.sheet-body { overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; }
.field, .two > div, .range-pick > div { min-width: 0; }

/* iPhone 日期／時間欄位不要撐出框框 */
input[type="date"].input, input[type="time"].input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; max-width: 100%;
  text-align: left; line-height: 22px;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* 地點篩選 */
.loc-filter {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 10px; height: 42px; margin-bottom: 12px; color: var(--text-2);
}
.loc-filter.on { border-color: var(--accent); color: var(--text); background: var(--chip-on-bg); }
.loc-filter svg { width: 18px; height: 18px; flex: none; }
.loc-filter .caret { width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.loc-filter select {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit;
  font-size: 15px; -webkit-appearance: none; appearance: none; outline: none;
}
.loc-clear { border: 0; background: var(--surface-2); color: var(--text); width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; flex: none; }

/* 統計：自訂區間 */
.seg button { white-space: nowrap; }
.range-pick { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-top: 10px; }
.range-pick .lbl { display: block; font-size: 12px; color: var(--text-2); margin: 0 2px 4px; }
.range-pick .to { padding-bottom: 12px; color: var(--muted); }

/* 常用清單編輯 */
.add-row { display: flex; gap: 8px; margin-top: 12px; }
.add-row .input { flex: 1; min-width: 0; }
.edit-item { gap: 8px; }
.edit-item .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 橫向時請轉回直向（iPhone 無法鎖定方向） */
.rotate-tip { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .rotate-tip {
    display: flex; position: fixed; inset: 0; z-index: 100; background: var(--bg);
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: var(--text); font-size: 17px; font-weight: 600; text-align: center; padding: 20px;
  }
  .rotate-tip svg { width: 56px; height: 56px; color: var(--accent); }
}

/* ===== v1.2.0 備份提醒 ===== */
.backup-remind { text-align: center; padding-top: 22px; }
.backup-remind .br-icon { font-size: 42px; }
.backup-remind h2 { margin: 8px 0 6px; font-size: 19px; }
.backup-remind p { font-size: 14px; margin: 0 0 18px; line-height: 1.6; }
.mini-select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; font-size: 15px; -webkit-appearance: none; appearance: none;
}

/* ===== v1.2.1 測試版標籤 ===== */
.is-dev .topbar h1::after {
  content: '測試版'; margin-left: 8px; vertical-align: 3px;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
  background: #ff8a1e; color: #fff; padding: 2px 8px; border-radius: 999px;
}

/* ===== v1.3.0 淺色主題 ===== */
/* 選「淺色」 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #eaeef4;
  --line: #dbe2ec;
  --text: #13213a;
  --text-2: #4b5b74;
  --muted: #7d8aa0;
  --accent: #0e9f82;
  --bar: #1fb5ab;
  --topbar-bg: rgba(242, 244, 248, .9);
  --topbar-line: rgba(219, 226, 236, .9);
  --tabbar-bg: rgba(255, 255, 255, .94);
  --danger-bg: rgba(208, 59, 59, .1);
  --danger-text: #c62f2f;
  --chip-on-bg: rgba(14, 159, 130, .12);
  --day-other: #b4bfce;
  --warn-bg: rgba(250, 178, 25, .14);
  --warn-line: rgba(214, 145, 0, .45);
  --warn-text: #8a5a00;
  --backdrop: rgba(10, 20, 40, .35);
  --track: #e5eaf1;
  --grid: rgba(75, 91, 116, .15);
  --tip-bg: #13213a;
  --tip-text: #ffffff;
  --shadow: rgba(19, 33, 58, .18);
  --q-attended: #0a8a0a;
  --q-leave: #a86e00;
  --q-absent: #c62f2f;
}
/* 選「跟隨系統」且 iPhone 是淺色模式 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #eaeef4;
  --line: #dbe2ec;
  --text: #13213a;
  --text-2: #4b5b74;
  --muted: #7d8aa0;
  --accent: #0e9f82;
  --bar: #1fb5ab;
  --topbar-bg: rgba(242, 244, 248, .9);
  --topbar-line: rgba(219, 226, 236, .9);
  --tabbar-bg: rgba(255, 255, 255, .94);
  --danger-bg: rgba(208, 59, 59, .1);
  --danger-text: #c62f2f;
  --chip-on-bg: rgba(14, 159, 130, .12);
  --day-other: #b4bfce;
  --warn-bg: rgba(250, 178, 25, .14);
  --warn-line: rgba(214, 145, 0, .45);
  --warn-text: #8a5a00;
  --backdrop: rgba(10, 20, 40, .35);
  --track: #e5eaf1;
  --grid: rgba(75, 91, 116, .15);
  --tip-bg: #13213a;
  --tip-text: #ffffff;
  --shadow: rgba(19, 33, 58, .18);
  --q-attended: #0a8a0a;
  --q-leave: #a86e00;
  --q-absent: #c62f2f;
  }
}
.q-attended { color: var(--q-attended); }
.q-leave { color: var(--q-leave); }
.q-absent { color: var(--q-absent); }
.theme-seg { margin-bottom: 4px; }

/* ===== v1.3.1 新版本提示 ===== */
.update-bar {
  position: fixed; left: 12px; right: 12px; z-index: 30;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px);
  max-width: 616px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--tip-bg); color: var(--tip-text);
  padding: 10px 10px 10px 16px; border-radius: 14px; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 22px var(--shadow); animation: fade .25s;
}
.update-bar span { flex: 1; }
.has-update .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 76px); }

/* ===== v1.4.0 篩選 ===== */
.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text-2); font-size: 15px; font-weight: 600;
}
.filter-btn svg { width: 17px; height: 17px; }
.filter-btn.on { border-color: var(--accent); color: var(--text); background: var(--chip-on-bg); }
.filter-btn .badge { background: var(--accent); color: var(--on-grad); border-radius: 999px; font-size: 12px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px; }
.filter-chips { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.fchip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--accent); background: var(--chip-on-bg); color: var(--text); font-size: 13px; white-space: nowrap;
}
.fchip .x { color: var(--muted); margin-left: 2px; font-size: 15px; }
.filter-foot { padding: 10px 16px calc(var(--safe-b) + 12px); border-top: 1px solid var(--line); }

/* ===== v1.5.0 付款明細 ===== */
.pay { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 8px; }
.pay-top { display: flex; gap: 8px; }
.pay-top select { flex: 1; min-width: 0; }
.pay-acc { margin-top: 8px; }
.pay-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pay-nums label { font-size: 11px; color: var(--muted); display: block; margin: 0 2px 3px; }
.pay-nums > div { min-width: 0; }
.pay-actual { margin: 6px 2px 0; min-height: 1em; }
.pay-sum { background: var(--surface-2); border-radius: 14px; padding: 10px 14px; margin-top: 10px; }
.ps-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 15px; }
.ps-row b { font-variant-numeric: tabular-nums; }

/* ===== v1.6.0 紀錄分頁、付款總表 ===== */
.list-seg { margin-bottom: 12px; }
.mini-seg { padding: 2px; }
.mini-seg button { padding: 5px 12px; font-size: 13px; }
.sum-card { padding: 12px 14px; }
.acc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.acc-table th { text-align: right; font-weight: 600; color: var(--muted); font-size: 12px; padding: 4px 0 6px; }
.acc-table th:first-child, .acc-table td:first-child { text-align: left; }
.acc-table td { text-align: right; padding: 7px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.acc-table td:first-child { padding-right: 8px; word-break: break-all; }
.acc-table tfoot td { font-weight: 800; border-top: 2px solid var(--line); }
.pay-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.pay-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 14px; }
.pay-table th, .pay-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; min-width: 84px; max-width: 130px; word-break: break-all; font-variant-numeric: tabular-nums; }
.pay-table tr:last-child th, .pay-table tr:last-child td { border-bottom: 0; }
.pay-table tbody th, .pay-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; min-width: 64px; border-right: 1px solid var(--line); }
.pay-table thead th { font-size: 12px; color: var(--text-2); font-weight: 700; }
.pay-table .tot { background: var(--surface-2); font-weight: 800; }
.pay-table .tap { cursor: pointer; }
.pay-table thead .tap { color: var(--accent); }
.pay-empty { padding: 12px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.detail-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-top: 8px; }
.pay-table th, .pay-table td { padding: 8px 8px; min-width: 76px; word-break: normal; overflow-wrap: break-word; }
.pay-table tbody th, .pay-table thead th:first-child { white-space: nowrap; min-width: 0; padding-right: 10px; }
.pay-table td .nowrap { white-space: nowrap; }

/* ===== v1.7.0 ===== */
.venue-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.venue-chips::-webkit-scrollbar { display: none; }
.venue-chips .chip { flex: none; }
.warn-text { color: var(--warn-text); }

/* ===== v1.8.0 ===== */
.ym-pick { margin-top: 10px; }
.mini-seg button { padding: 5px 10px; }

/* ===== v1.8.1 狀態列改回 black-translucent（白色文字），淺色主題時在狀態列位置墊深色底 ===== */
:root { --statusbar-bg: transparent; }
:root[data-theme="light"] { --statusbar-bg: #0a1428; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --statusbar-bg: #0a1428; } }
.topbar { box-shadow: inset 0 calc(env(safe-area-inset-top, 0px)) 0 0 var(--statusbar-bg); }


/* ===== v1.8.4 版面改回整頁捲動（iOS 18 整頁不能捲時會少給狀態列高度） ===== */
html { background: var(--bg); }
.sheet-backdrop { touch-action: none; }
.sheet { overscroll-behavior: contain; }

/* ===== v2.0.0 ===== */
/* 五種狀態：曠課紫粉色、被放鳥正紅色（v2.1.5 調整，兩個顏色分得開） */
:root { --st-absent: #c45fe0; --st-noshow: #ff0000; --q-absent: #d99bf0; --q-noshow: #ff6b6b; --noext-bg: #15335e; --noext-line: #2c5a9c; }
:root[data-theme="light"] { --st-absent: #c45fe0; --st-noshow: #e00000; --q-absent: #8e35ad; --q-noshow: #d00000; --noext-bg: #e3efff; --noext-line: #b6d1f3; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --st-absent: #c45fe0; --st-noshow: #e00000; --q-absent: #8e35ad; --q-noshow: #d00000; --noext-bg: #e3efff; --noext-line: #b6d1f3; } }
.dot.noshow { background: var(--st-noshow); }
.q-noshow { color: var(--q-noshow); }
.sess .quick { gap: 5px; }
.sess .quick .btn { padding-left: 2px; padding-right: 2px; font-size: 13px; }
.status-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.status-grid button { font-size: 13px; padding: 10px 0; }

/* 日曆：有預約的日子畫圈 */
.cal-day { padding-top: 5px; gap: 3px; }
.cal-day .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.cal-day.booked .num { box-shadow: 0 0 0 2px var(--st-booked); }

/* 篩選：可收合的區塊＋勾選 */
.fsec { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 8px; overflow: hidden; }
.fsec-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 13px 14px; border: 0; background: none; color: var(--text); text-align: left; font-size: 15px; font-weight: 600; }
.fsec-t { flex: 1; }
.fsec-n { font-size: 13px; font-weight: 500; color: var(--muted); }
.fsec-n.on { color: var(--accent); font-weight: 700; }
.fsec-head svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.fsec.open .fsec-head svg { transform: rotate(180deg); }
.fsec-body { border-top: 1px solid var(--line); padding: 4px 6px 6px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 9px 8px; font-size: 15px; border-radius: 10px; }
.fopt input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.fopt span { min-width: 0; overflow-wrap: anywhere; }

/* 課卡 */
.cardx { margin-bottom: 10px; }
.big-num { font-size: 26px; font-weight: 800; }
.card.noext, .detail-head.noext { background: var(--noext-bg); border-color: var(--noext-line); }
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.check-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.check-row small { display: block; font-size: 12px; margin-top: 2px; }
.sug-tip { align-self: center; margin-right: 2px; }
.plus-menu { padding-top: 18px; }
.plus-menu .btn + .btn { margin-top: 10px; }

/* 年月欄位不要超出畫面 */
.range-pick { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
input[type="month"].input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; max-width: 100%;
  text-align: left; line-height: 22px;
}
input[type="month"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* 訓練動作表格 */
.ex-table-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ex-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.ex-table th { font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 6px; text-align: center; background: var(--surface-2); }
.ex-table td { padding: 10px 6px; text-align: center; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; cursor: pointer; }
.ex-table th:first-child, .ex-table td:first-child { text-align: left; padding-left: 12px; width: 40%; overflow-wrap: anywhere; }
.ex-table tbody tr:active { background: var(--surface-2); }
.ex-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-nums .lbl { display: block; font-size: 12px; color: var(--text-2); margin: 0 2px 4px; }
.ex-nums .input { text-align: center; }
.kpi .k { gap: 4px; flex-wrap: wrap; }
[hidden] { display: none !important; }

/* ===== v2.1.0 設定頁 ===== */
.set-row { gap: 12px; }
.set-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--chip-on-bg); color: var(--accent); display: grid; place-items: center; }
.list-item .set-ic svg { width: 19px; height: 19px; color: var(--accent); }
.set-val { flex: none; color: var(--text-2); font-size: 15px; max-width: 40%; text-align: right; }
.choice { padding-top: 8px; }
.choice .grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 10px; }
.choice h3 { text-align: center; margin: 0 0 8px; font-size: 17px; }
.choice-list { display: flex; flex-direction: column; }
.choice-item { display: flex; align-items: center; justify-content: space-between; padding: 15px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font-size: 17px; text-align: left; }
.choice-item.on { color: var(--accent); font-weight: 700; }
.choice-item svg { width: 20px; height: 20px; }
.choice-cancel { margin-top: 14px; }

/* ===== v2.2.0 課卡使用紀錄 ===== */
.use-row { align-items: center; }
.use-d { font-size: 15px; }
.use-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.use-amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-tabs { margin: 14px 0 12px; }

/* ===== v2.3.0 連續預約 ===== */
.multi-box { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.mc-head { margin-bottom: 6px; }
.mc-head .month { font-size: 16px; }
.mc-head .icon-btn { width: 34px; height: 34px; }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mc-day { position: relative; aspect-ratio: 1 / 0.9; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mc-day.other { color: var(--day-other); }
.mc-day.past { color: var(--day-other); opacity: .5; }
.mc-day.today { color: var(--accent); font-weight: 700; }
.mc-day.on { background: var(--st-booked); color: #fff; font-weight: 700; }
.mc-day i { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.mc-day.on i { background: #fff; }
.mc-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mc-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--chip-on-bg); border: 1px solid var(--accent); font-size: 13px; }
.mc-chip.bad { border-color: var(--warn-line); background: var(--warn-bg); }
.mc-chip button { border: 0; background: none; color: var(--muted); font-size: 16px; padding: 0 6px; line-height: 1; }

/* ===== v2.4.0 複選下拉 ===== */
.mpick { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; min-height: 46px; }
.mpick-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpick svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.venue-pick { margin-bottom: 12px; }
.mp-list { display: flex; flex-direction: column; }

/* ===== Beauty log 配色：深色＝墨綠＋玫瑰金、淺色＝米白＋玫瑰金 ===== */
:root {
  --bg: #0f2a22; --surface: #163a30; --surface-2: #1d4a3d; --line: #2a5a4b;
  --text: #f6efe6; --text-2: #cdbfae; --muted: #94a89f;
  --accent: #e2b48a; --accent-2: #c99872;
  --grad: linear-gradient(135deg, #f3d9bf 0%, #dcaa82 50%, #b98058 100%); --on-grad: #2b1a10;
  --bar: #e2b48a;
  --topbar-bg: rgba(15, 42, 34, .9); --topbar-line: rgba(42, 90, 75, .6); --tabbar-bg: rgba(18, 48, 39, .95);
  --chip-on-bg: rgba(226, 180, 138, .16); --day-other: #46695d;
  --track: rgba(42, 90, 75, .55); --grid: rgba(205, 191, 174, .15);
  --tip-bg: #f6efe6; --tip-text: #0f2a22; --backdrop: rgba(0, 0, 0, .5);
  --st-booked: #5b9be8; --st-attended: #3fb27f; --st-leave: #9aa3a0; --st-noshow: #ff4d4d;
  --q-attended: #74e0aa; --q-leave: #d0d6d3; --q-noshow: #ff8a80;
  --noext-bg: #1f4a3e; --noext-line: #3a7262;
  --statusbar-bg: transparent;
}
:root[data-theme="light"] {
  --bg: #faf6f1; --surface: #ffffff; --surface-2: #f3ebe2; --line: #eadfd2;
  --text: #3a2a20; --text-2: #6e5a4b; --muted: #a08c7c;
  --accent: #b07a4f; --bar: #c99872;
  --topbar-bg: rgba(250, 246, 241, .92); --topbar-line: rgba(234, 223, 210, .9); --tabbar-bg: rgba(255, 255, 255, .95);
  --chip-on-bg: rgba(176, 122, 79, .12); --day-other: #cdbfb1;
  --track: #f0e7dd; --grid: rgba(110, 90, 75, .14);
  --tip-bg: #3a2a20; --tip-text: #ffffff; --shadow: rgba(58, 42, 32, .15); --backdrop: rgba(40, 28, 20, .35);
  --st-booked: #3b7fd9; --st-attended: #2e9e6a; --st-leave: #8f9692; --st-noshow: #e00000;
  --q-attended: #1f7f52; --q-leave: #6f7672; --q-noshow: #c62828;
  --noext-bg: #fbf1e6; --noext-line: #ecd6bf;
  --statusbar-bg: #3a2a20;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf6f1; --surface: #ffffff; --surface-2: #f3ebe2; --line: #eadfd2;
    --text: #3a2a20; --text-2: #6e5a4b; --muted: #a08c7c;
    --accent: #b07a4f; --bar: #c99872;
    --topbar-bg: rgba(250, 246, 241, .92); --topbar-line: rgba(234, 223, 210, .9); --tabbar-bg: rgba(255, 255, 255, .95);
    --chip-on-bg: rgba(176, 122, 79, .12); --day-other: #cdbfb1;
    --track: #f0e7dd; --grid: rgba(110, 90, 75, .14);
    --tip-bg: #3a2a20; --tip-text: #ffffff; --shadow: rgba(58, 42, 32, .15); --backdrop: rgba(40, 28, 20, .35);
    --st-booked: #3b7fd9; --st-attended: #2e9e6a; --st-leave: #8f9692; --st-noshow: #e00000;
    --q-attended: #1f7f52; --q-leave: #6f7672; --q-noshow: #c62828;
    --noext-bg: #fbf1e6; --noext-line: #ecd6bf;
    --statusbar-bg: #3a2a20;
  }
}
.status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.big-num.xl { font-size: 30px; }
.kpi .v.money-v { font-size: 22px; }
.last-d { color: var(--text-2); white-space: nowrap; }
.last-d b { font-size: 20px; color: var(--accent); }
.add-table th:first-child, .add-table td:first-child { width: 65%; }
/* 「關於」圖示跟著深淺色換 */
.ic-dark { display: none; }
:root[data-theme="dark"] .ic-light { display: none; }
:root[data-theme="dark"] .ic-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic-light { display: none; }
  :root:not([data-theme="light"]) .ic-dark { display: block; }
}
.tab-add .plus { box-shadow: 0 6px 18px rgba(185, 128, 88, .35); }
.dot.warn { background: #e8a33d; }