/* ══════════════════════════════════════════════════
   鍛煉趣 — 樣式

   配色以四個薰衣草色票為基礎：
     #f4e9fb  #f6d9f5  #e7bbee  #f0abba
   這四個都是淺色，承載不了白字，所以深色（accent / accent2 / 文字）
   是從同一個色相延伸推導出來的，且全部通過 WCAG AA 對比度檢查。

   語意：紫色 = 訓練相關，玫瑰色 = 身體組成相關（統計圖表沿用同一組語意）。
   RPE 的綠／琥珀色刻意不納入這套配色 —— 那是狀態訊號，需要跳脫品牌色才醒目。
   ══════════════════════════════════════════════════ */
:root {
  --bg: #f4e9fb;
  --surface: #ffffff;
  --surface2: #f6d9f5;
  --surface3: #ece0f9;
  --border: #e7bbee;
  --border-soft: #f0dcf7;
  --accent: #7b4ea3;
  --accent-soft: #ece0f9;
  --accent-line: #c98fd6;
  --accent2: #a34462;
  --accent2-soft: #fce3ea;
  --accent2-line: #f0abba;
  --warn: #86640c;
  --warn-soft: #fbf1d6;
  --warn-line: #e6d391;
  --danger: #b03a52;
  --danger-soft: #fbe2e8;
  --text: #2b1b3d;
  --text2: #574370;
  --text3: #77608e;
  --shadow: 0 2px 8px rgba(123, 78, 163, 0.14);
  --shadow-lg: 0 10px 34px rgba(123, 78, 163, 0.22);
  --radius: 14px;
  --radius-sm: 9px;
  --nav-h: 60px;

  /* RPE 狀態色（獨立於品牌配色，不隨主題改動）*/
  --rpe-easy-bg: #eef1f4;
  --rpe-easy-line: #d3dbe2;
  --rpe-easy-text: #4b5b68;
  --rpe-work-bg: #dceee9;
  --rpe-work-line: #a9d3c9;
  --rpe-work-text: #1f5a4f;
  --rpe-hard-bg: #fbf3d8;
  --rpe-hard-line: #e6d391;
  --rpe-hard-text: #7d6210;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Flaticon UIcons 是圖示字型，預設會把行高撐高、和文字基線對不齊，統一校正 */
i[class^="fi-"], i[class*=" fi-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.13em;
}

/* Google 品牌 logo：UIcons 沒有品牌圖示，改用內嵌 SVG（不額外連外） */
.g-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.28-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }

/* ── 版面 ───────────────────────────────────────── */
/* 左邊 App 識別，右邊目前分頁 */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: calc(9px + env(safe-area-inset-top)) 16px 9px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.brand-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* 目前分頁：靠右，相對於 App 名稱是次級標題 */
.app-header h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.header-btn {
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 18px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.header-btn:active { background: var(--surface2); }

.page { display: none; padding: 14px 14px 24px; }
.page.active { display: block; }

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
/* 整格（圖示 + 文字）都是可點區域與反白範圍 */
.bottom-nav button {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text3);
  height: calc(var(--nav-h) - 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  border-radius: 12px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.bottom-nav button i { font-size: 18px; }
.bottom-nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.bottom-nav button.active span { font-weight: 700; }
/* 按下去的即時回饋 */
.bottom-nav button:active { background: var(--surface2); }
.bottom-nav button.active:active { background: var(--accent-soft); }
/* 桌機才有真正的 hover（手機加了會殘留反白） */
@media (hover: hover) {
  .bottom-nav button:not(.active):hover { background: var(--surface2); color: var(--text2); }
}

/* ── 通用元件 ───────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text3);
  margin: 20px 2px 8px;
  letter-spacing: 0.03em;
}
.section-title:first-child { margin-top: 4px; }

.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-body { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text3); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 14px 18px; font-size: 16px; }
.btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 7px; }

.row { display: flex; gap: 8px; align-items: center; }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text3); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.mono { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.hidden { display: none !important; }

.empty {
  text-align: center;
  color: var(--text3);
  padding: 34px 16px;
  font-size: 14px;
}
.empty i { font-size: 34px; display: block; margin-bottom: 12px; opacity: 0.4; }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 5px;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.field textarea { min-height: 64px; resize: vertical; }
.field-row { display: flex; gap: 10px; }
.field-row > .field { flex: 1; }
.field-hint { font-size: 11px; color: var(--text3); margin-top: 5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
}
.chip-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip-body { background: var(--accent2-soft); border-color: var(--accent2-line); color: var(--accent2); }
.chip-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

.toggle-group { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.toggle-group button {
  flex: 1;
  border: none;
  background: var(--surface);
  color: var(--text3);
  padding: 9px 6px;
  font-size: 13px;
  font-weight: 600;
}
.toggle-group button.active { background: var(--accent); color: #fff; }

/* ── 場館選擇（記錄頁空狀態）───────────────────── */
.venue-prompt { text-align: center; padding: 8px 0 18px; }
.venue-prompt h2 { font-size: 21px; margin: 0 0 4px; }

/* 直立磁磚，一排兩張，高度為寬度的 1.5 倍。
   minmax 下限壓在 130px，320px 的小螢幕仍維持兩欄，桌機則自動變多欄。 */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.venue-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  aspect-ratio: 1 / 1.5;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.venue-tile:active { transform: scale(0.98); }
.venue-tile .vt-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 12px;
}
.venue-tile .vt-name {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  /* 高度加倍後名稱可以放到五行，一般場館名稱都不會被截斷 */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.venue-tile .vt-meta {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text3);
}
.venue-tile-add {
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-style: dashed;
  border-color: var(--text3);
  background: transparent;
  box-shadow: none;
  color: var(--text3);
  font-weight: 600;
}
.venue-tile-add i { font-size: 21px; }

/* ── 教練提示卡 ─────────────────────────────────── */
.coach {
  border-radius: var(--radius);
  padding: 12px 13px;
  margin-bottom: 12px;
  border: 1px solid;
  font-size: 13.5px;
}
.coach-up   { background: var(--accent-soft);  border-color: var(--accent-line);  color: var(--accent); }
.coach-hold { background: var(--surface3);     border-color: var(--border-soft);  color: var(--text2); }
.coach-down { background: var(--warn-soft);    border-color: var(--warn-line);    color: var(--warn); }
.coach-back { background: var(--accent2-soft); border-color: var(--accent2-line); color: var(--accent2); }
.coach-head { font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.coach-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.coach-actions .btn { background: rgba(255, 255, 255, 0.75); }
/* 提示卡內的主要按鈕要保留實心配色，否則會變成白底白字 */
.coach-actions .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── RPE 量表說明 ───────────────────────────────── */
.rpe-desc {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
}
.rpe-desc-head { margin-bottom: 2px; }
.rpe-desc-head b {
  display: inline-block;
  min-width: 22px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.rpe-desc-empty { color: var(--text3); }
/* RPE 用獨立的狀態色，不隨品牌配色改動 */
.rpe-easy { background: var(--rpe-easy-bg); border-color: var(--rpe-easy-line); color: var(--rpe-easy-text); }
.rpe-work { background: var(--rpe-work-bg); border-color: var(--rpe-work-line); color: var(--rpe-work-text); }
.rpe-hard { background: var(--rpe-hard-bg); border-color: var(--rpe-hard-line); color: var(--rpe-hard-text); }

/* ── 訓練中：動作卡與組別 ───────────────────────── */
.entry-card { border-left: 3px solid var(--accent); }
.entry-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
/* 名稱、目標次數、單位同一行；空間不夠時只在這一組內換行，右側圖示永遠貼齊右邊 */
.entry-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
}
.entry-name { font-weight: 700; font-size: 16px; }
.entry-meta { font-size: 13px; color: var(--text3); }

/* 動作卡右上的操作圖示 */
.icon-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 19px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:active { background: var(--surface2); }
.icon-btn.on { color: var(--accent); }

.weight-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 7px;
  flex: 1;
  min-width: 0;
}
.weight-stepper button {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: none;
  border-radius: 11px;
  background: var(--surface);
  color: var(--accent);
  font-size: 20px;
  box-shadow: var(--shadow);
}
.weight-stepper button:active { background: var(--accent); color: #fff; }
.weight-stepper .ws-mid { flex: 1; text-align: center; }
.weight-stepper .ws-val {
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.weight-stepper .ws-val small { font-size: 14px; font-weight: 600; color: var(--text3); }
.weight-stepper .ws-level { font-size: 11px; color: var(--text3); }
.weight-stepper input {
  width: 100%;
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px;
  background: var(--surface);
}

/* 次數輸入，跟重量步進器並排在同一行 */
.reps-box { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.reps-box input {
  width: 64px;
  height: 60px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
}
.reps-box span { font-size: 13px; color: var(--text3); }

.set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.set-row:last-child { border-bottom: none; }
.set-no {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-row .sr-w { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-row .sr-x { color: var(--text3); font-size: 13px; }
.set-row input {
  width: 58px;
  text-align: center;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.set-row.off-target .sr-r { color: var(--danger); }

/* 每一組自己的 RPE。
   修飾詞一律用 set-rpe- 前綴：泛用名稱（例如 .empty）在別處另有樣式，
   直接拿來當修飾詞會被那邊的 padding／font-size 撐爆版面。 */
.set-rpe {
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
}
.set-rpe i { font-size: 15px; }
.set-rpe-none { color: var(--text3); border-style: dashed; }
.set-rpe.easy { background: var(--rpe-easy-bg); border-color: var(--rpe-easy-line); color: var(--rpe-easy-text); }
.set-rpe.work { background: var(--rpe-work-bg); border-color: var(--rpe-work-line); color: var(--rpe-work-text); }
.set-rpe.hard { background: var(--rpe-hard-bg); border-color: var(--rpe-hard-line); color: var(--rpe-hard-text); }

/* ── 列表 ───────────────────────────────────────── */
.list-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
/* 不限定在 .list-item 底下：任何 .row 裡的 .li-main 都要撐開，
   右側的圖示或箭頭才會被推到最右邊 */
.li-main { flex: 1; min-width: 0; }
/* 標題與其行內附註同一行，空間不夠時只在這一組內換行 */
.title-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; }
.list-item .li-title { font-weight: 600; }
.list-item .li-sub { font-size: 12px; color: var(--text3); }

.session-card { display: block; width: 100%; text-align: left; }
.session-date { font-size: 15px; font-weight: 700; }

/* 訓練中的場地卡：場地名 ─ 日期 ─ 離開 */
.session-head .row { gap: 8px; }
.session-venue { font-size: 20px; font-weight: 700; line-height: 1.25; min-width: 0; }
.session-when { font-size: 12px; color: var(--text3); flex-shrink: 0; white-space: nowrap; }

/* 四個數字平均分配整行寬度，不靠左擠成一團 */
.session-stats {
  display: flex;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.session-stats > div {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
}
.session-stats > div + div { border-left: 1px solid var(--border); }
.session-stats b {
  display: block;
  font-size: 19px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.session-stats span { display: block; font-size: 11px; }

/* 統計時間範圍切換 */
.range-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 12px;
}
.range-tabs button { flex-shrink: 0; padding: 6px 13px; font-size: 13px; }

/* 單月模式的上一月／下一月 */
.month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.month-nav-label {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.month-nav .icon-btn { color: var(--accent); }
.month-nav .icon-btn:disabled { color: var(--border); background: transparent; }

/* 重訓 / 有氧 類別切換 */
.cat-tabs { margin-bottom: 12px; }
.cat-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 6px;
  font-size: 14px;
}
.cat-tabs button i { font-size: 15px; }
.cat-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text3);
  font-size: 11px;
  line-height: 19px;
  font-weight: 700;
}
.cat-tabs button.active .cat-count { background: rgba(255, 255, 255, 0.35); color: #fff; }

.delta-up { color: var(--danger); }
.delta-down { color: var(--accent2); }
.delta-flat { color: var(--text3); }

/* ── 統計 ───────────────────────────────────────── */
.chart-wrap { overflow-x: auto; }
/* 這裡不能放 max-width:100%：固定像素寬的圖（熱力圖、每月長條）會被強制縮小，
   格子縮到看不清楚，而不是照設計橫向捲動。
   自適應的圖各自在 inline style 帶了自己的 max-width。 */
.chart-wrap svg { display: block; height: auto; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text3); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; font-style: normal; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 9px; }
/* 剛好四格時強制 2×2：auto-fit 在手機寬度下會排成 3+1，最後一格落單很難看 */
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stat-tile { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.stat-tile b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: 11px; color: var(--text3); }

.heat-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; }
.heat-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--surface3); }

/* ── Modal ──────────────────────────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(43, 27, 61, 0.42);
  align-items: flex-end;
  justify-content: center;
}
.overlay.open { display: flex; }
.modal {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
}
@media (min-width: 560px) {
  .overlay { align-items: center; }
  .modal { border-radius: 20px; }
}
.modal-title { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.modal-actions { display: flex; gap: 9px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.pick-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 2px;
  color: var(--text);
}
.pick-item:active { background: var(--surface2); }
.pick-item .pi-main { flex: 1; min-width: 0; }
.pick-item .pi-title { font-weight: 600; }
.pick-item .pi-sub { font-size: 12px; color: var(--text3); }

/* ── 登入畫面 ───────────────────────────────────── */
#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.auth-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--surface3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#auth-overlay .auth-logo { font-size: 46px; color: var(--accent); margin-bottom: 10px; }
#auth-overlay h1 { font-size: 25px; margin: 0 0 6px; }

/* ── Toast ──────────────────────────────────────── */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(14px);
  z-index: 2000;
  background: rgba(43, 27, 61, 0.94);
  color: #fff;
  padding: 10px 17px;
  border-radius: 999px;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: 88vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 同步指示器 ─────────────────────────────────── */
#sync-dot { font-size: 9px; }
#sync-dot.ok { color: var(--accent2); }
#sync-dot.pending { color: var(--warn); }
#sync-dot.offline { color: var(--text3); }
#sync-dot.error { color: var(--danger); }