/* ==========================================================================
   琪靈記帳 — LIFF 共用樣式表
   ==========================================================================

   這份檔案是 `webapp/` 底下所有頁面的唯一樣式來源。色碼、字級、間距一律引用
   colors.css 與下面的 CSS 變數，不得在任何頁面的 inline `<style>` 裡再寫死一次。

   完整規範見 `docs/design-tokens.md`：
     第一～二節 色彩、第四節 按鈕階層、第六節 圖示政策、
     第八節 字級、第九節 間距。

   ── 這份檔案的維護規則 ────────────────────────────────────────────────
   1. **不要發明新的 class 名稱。** 下面的名稱全部來自既有頁面（`.toast` 出現在
      15 頁、`.page-title-box` 13 頁、`.modal-btn-save` 9 頁），只是各頁各抄一份。
      這裡做的是收斂，不是重新命名。要新增 class 之前先確認 18 頁裡沒有同義的。
   2. **不要在頁面裡覆寫這裡的定義。** 頁面專屬的樣式只處理那頁獨有的版面
      （例如 analytics 的圖表容器），不得重新定義按鈕、卡片、Modal、Toast。
   3. **不使用任何圖示與 emoji**，包含 ✓ ✕ ► 這類符號字元。狀態一律用顏色 + 文字。
      唯一例外是吉祥物（`.mascot`），且只出現在空狀態。
   4. 先引用 /colors.css，再引用：`<link rel="stylesheet" href="/app.css">`。
      `express.static` 已經掛在 `webapp/`，不需要註冊路由。
   ========================================================================== */

/* ==========================================================================
   1. Token
   ========================================================================== */

:root {
  /* 色彩由先載入的 colors.css 提供。 */
  /* 字級（第八節）。語意名稱，不要直接寫 px */
  --text-display: 33px;      /* 頁面主角金額，一頁至多一個 */
  --text-amount: 29px;
  --text-total: 27px;
  --text-title: 16px;
  --text-body: 14px;
  --text-caption: 13px;
  --text-label: 11px;        /* 下限，任何文字都不得再小 */

  /* 間距（第九節） */
  --space-tight: 4px;
  --space-snug: 8px;
  --space-default: 12px;
  --space-section: 16px;

  /* 圓角只有兩種：一般元件 10px、膠囊 999px。不要出現第三種 */
  --radius: 10px;
  --radius-pill: 999px;

  /* 陰影只有一階。卡片之間不靠深淺分層，靠間距與分隔線 */
  --shadow: 0 2px 6px rgba(var(--shadow-color), 0.06);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--space-section);
  background: var(--base);
  color: var(--ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 文字輸入框、下拉、多行輸入的底色與字色一律走 token。
   不設的話瀏覽器會用原生預設（深色下是純白字、灰底），不吃我們的色票；個別元件有自己的 background／color 會蓋過這條。 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select,
textarea {
  color: var(--ink);
  background-color: var(--surface);
}

/* ==========================================================================
   3. 版面骨架
   ========================================================================== */

.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-section);
  position: relative;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
}

.page-title-box {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  padding: 6px var(--space-tight);
}

.section-title {
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-section) 0 var(--space-snug);
}

/* ==========================================================================
   4. 按鈕（design-tokens.md 第四節）

   一個畫面區塊至多一顆主要按鈕。破壞性按鈕永不填滿紅底，永遠放在最右。
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-tight);
  min-height: 44px;                    /* 觸控目標下限 */
  padding: 10px var(--space-section);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;      /* 有幾顆按鈕是 <a>（「管理卡片」「升級解鎖」…），不重置會帶底線 */
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.btn:disabled,
.btn.is-disabled {
  background: var(--disabled-soft);
  color: var(--disabled-ink);
  cursor: not-allowed;
}

.btn-primary            { background: var(--action);      color: var(--surface); }
.btn-primary:active     { background: var(--action-strong); }

.btn-secondary          { background: var(--brand-soft);  color: var(--action-strong); border: 1px solid var(--action-strong); }
.btn-secondary:active   { background: var(--brand); }

/* 破壞性：淡底紅字。永遠不要改成填滿紅底 */
.btn-danger             { background: var(--brand-soft);  color: var(--expense); border: 1px solid var(--expense); }
.btn-danger:active      { background: var(--expense-soft); }

/* 小尺寸按鈕：區塊標題旁的次要操作（「新增」「新增轉帳」）。
   只管尺寸，不碰顏色——階層仍然由 .btn-primary / .btn-secondary / .btn-danger 決定。
   44px 是主要按鈕的觸控目標下限，標題旁的小操作用它會比隔壁的標題還搶眼。 */
.btn-sm {
  min-height: 36px;
  padding: 0 var(--space-default);
  font-size: var(--text-caption);
}

/* 一列等寬按鈕 */
.btn-row {
  display: flex;
  gap: var(--space-snug);
  margin-top: var(--space-section);
}
.btn-row > .btn { flex: 1; }

/* 頂端導覽鍵。每一頁的右上角都是同一組三顆：明細／分析／設定，目前所在的那一頁
   用 .is-current 標示。這一條規則就是全部，不要再額外掛 .btn / .btn-secondary——
   那會蓋掉底色、框線與高度，同一組按鈕在不同頁就會長得不一樣。
   曾經還有 .action-icon-btn（與本規則完全相同、只是換個名字）與 .back-btn
   （「返回」鍵，連到的就是設定頁，跟旁邊的「設定」鍵完全重複），都已移除。 */
.action-nav-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--action-strong);
  text-decoration: none;      /* <a> 版本預設帶底線，全站沒有其他地方重置過 */
  cursor: pointer;
}

.action-nav-btn:active {
  transform: scale(0.92);
  background: var(--line);
}

/* 目前所在頁的指示。尺寸與 .action-nav-btn 完全相同，只換底色並拿掉互動，
   三顆並排時才會一樣大——原本用 .pill 標示，字級與內距都比隔壁按鈕小一圈。 */
.action-nav-btn.is-current {
  background: var(--brand-soft);
  border-color: transparent;
  pointer-events: none;
}

/* 圓形圖示鈕（目前只有明細清單的搜尋）。形狀刻意跟方形的頁面導覽鍵區隔，
   放在區塊標題旁邊時才不會被讀成第四個分頁。 */
.icon-round-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--action-strong);
  cursor: pointer;
}

.icon-round-btn:active { transform: scale(0.92); background: var(--line); }

/* 搜尋列展開時，按鈕自己也要看得出來是開著的 */
.icon-round-btn.is-active {
  background: var(--brand-soft);
  border-color: transparent;
}

/* ==========================================================================
   5. 卡片與清單
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-section);
  margin-bottom: var(--space-default);
}

.card-title {
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-snug);
}

/* 卡片內的次級色塊（分攤區、提醒區）。內距固定 12px，不要為了塞內容而縮 */
.block {
  background: var(--brand-soft);
  border-radius: var(--radius);
  padding: var(--space-default);
}
.block-warn { background: var(--warn-soft); color: var(--ink); }
.block-info { background: var(--info-soft); }

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-snug);
  padding: var(--space-snug) 0;
}
.row + .row { border-top: 1px solid var(--line); }

.row-label { font-size: var(--text-body); color: var(--ink-3); }
.row-value { font-size: var(--text-body); font-weight: 700; color: var(--ink); text-align: right; }

/* 金額。粗體是用來標示「這是數值」，不是用來強調 */
.amount            { font-weight: 700; color: var(--ink); }
.amount-expense    { color: var(--expense); }
.amount-income     { color: var(--ink); }
.amount-display    { font-size: var(--text-display); font-weight: 700; }
.amount-total      { font-size: var(--text-total);   font-weight: 700; }

/* ==========================================================================
   6. 狀態標示（不使用圖示，一律顏色 + 文字）
   ========================================================================== */

.pill {
  display: inline-block;
  padding: var(--space-tight) 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: 700;
  background: var(--brand-soft);
  color: var(--action-strong);
}

/* 示範資料標示：膠囊＋一句說明，放在示範內容的上方。 */
.demo-note {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  margin: var(--space-default) 0 var(--space-snug);
}

/* 功能適用範圍標註：搭配 common.js 的 scopeBadgeHtml() / scopeNoticeHtml() / unavailableNoticeHtml()。
   個人專屬（跟帳本無關）用淡藍底，帳本型態限定的說明用 disabled 色。 */
.scope-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-snug);
  margin: var(--space-default) 0;
  padding: var(--space-snug) var(--space-default);
  border-radius: var(--radius);
  background: var(--info-soft);
  color: var(--ink-2);
  font-size: var(--text-caption);
  line-height: 1.6;
}
.scope-notice.is-unavailable { background: var(--disabled-soft); }
.scope-notice .pill { flex-shrink: 0; }

/* 示範區塊一眼要看得出是假的：虛線框、淡藍底。搭配 demoNoteHtml() 放在框的最上面。 */
.demo-frame {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-snug);
  padding: 0 var(--space-default) var(--space-default);
  border: 2px dashed var(--info);
  border-radius: var(--radius);
  background: var(--info-soft);
}

/* 「這一列點得進去」的指示。用 CSS 的兩條邊畫出來，不是「›」那個符號字元——
   形狀不是文字，就不會有 iOS／Android 造型不同的問題，顏色也跟得上 token。
   只放在會開啟另一個畫面的列上；開關與純顯示的列不放。 */
.chevron {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
}
.pill-warn     { background: var(--warn-soft);     color: var(--ink); }
.pill-expense  { background: var(--expense-soft);  color: var(--expense); }
.pill-info     { background: var(--info-soft);     color: var(--info); }
.pill-disabled { background: var(--disabled-soft); color: var(--disabled-ink); }
.pill-pro      { background: var(--ink); color: var(--warn-soft); }
html.is-pro-member .pill-pro { display: none; }

/* ==========================================================================
   7. 表單
   ========================================================================== */

.form-label {
  display: block;
  /* 11px 只是絕對下限，不該當成表單欄位標題的預設值。付款人／屬性／標籤這些
     欄位名在手機上要能一眼讀到，與 .row-label 同為 14px。 */
  font-size: var(--text-body);
  color: var(--ink-3);
  margin-bottom: var(--space-tight);
  /* 在 .form-row（flex）裡它是 flex item，右邊的選單一長就會被壓縮，中文會被折成
     每行一兩個字、整個標籤變成直的。標籤永遠不讓步，要縮的是右邊的值。 */
  flex-shrink: 0;
  white-space: nowrap;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--ink);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 2px solid var(--action);
  outline-offset: -1px;
}

/* iOS（含 LINE 內建瀏覽器）點進字級小於 16px 的輸入框會自動放大整個畫面，放大後不會縮回來，
   版面看起來像跑掉。只在 iOS 把輸入框提高到 16px；其他平台維持 --text-body。
   -webkit-touch-callout 只有 iOS WebKit 支援，拿來當 iOS 判斷。
   元素選擇器的權重最低：頁面自己把輸入框設得更大（例如金額欄）的不受影響。 */
@supports (-webkit-touch-callout: none) {
  .form-input,
  .form-select,
  .form-textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

.form-hint  { font-size: var(--text-label); color: var(--ink-3); margin-top: var(--space-tight); }
.form-error { font-size: var(--text-label); color: var(--expense); margin-top: var(--space-tight); }

/* 開關 */
.switch { position: relative; display: inline-block; width: 48px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute;
  inset: 0;
  background: var(--disabled-soft);
  border: 2px solid var(--switch-ring);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base), border-color var(--dur-base);
  cursor: pointer;
}
.switch-track::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 1px;
  top: 1px;
  background: var(--switch-knob);
  border-radius: 50%;
  transition: transform var(--dur-base);
}
.switch input:checked + .switch-track { background: var(--action); border-color: var(--action-strong); }
.switch input:checked + .switch-track::before { background: var(--surface); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }

/* ==========================================================================
   8. Modal
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-section);
  z-index: 100;
}

.modal-box {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-section);
}

.modal-title   { font-size: var(--text-title); font-weight: 700; color: var(--ink); margin-bottom: var(--space-snug); }
.modal-actions { display: flex; gap: var(--space-snug); margin-top: var(--space-section); }
.modal-actions > .btn { flex: 1; }

/* ==========================================================================
   9. Toast

   狀態一律用底色與文字表達。舊版 `common.js` 的 TOAST_STATUS_ICONS
   已依圖示政策移除，不要再加回去。
   ========================================================================== */

.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  max-width: calc(100% - 32px);
  padding: var(--space-default) 22px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 700;
  opacity: 0;
  transition: transform var(--dur-base), opacity var(--dur-base);
  z-index: 200;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.toast[data-status="success"] { background: var(--income); }
.toast[data-status="warning"] { background: var(--warn); color: var(--surface); }
.toast[data-status="error"]   { background: var(--expense); }

/* ==========================================================================
   10. 空狀態與吉祥物

   吉祥物只出現在空狀態（design-tokens.md 第七節）。清單有資料時一律不放。
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: 48px var(--space-section);
  color: var(--ink-3);
  font-size: var(--text-body);
  line-height: 1.8;
}

.empty-state .mascot { margin-bottom: var(--space-default); }

.empty-state-title {
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-tight);
}

/* `mascot.png` 是 600px 寬的去背 PNG，`mascot@1x.png` 是 300px 版本 */
.mascot {
  filter: drop-shadow(0 0 3px var(--mascot-halo));
  width: 120px;
  height: auto;
  display: inline-block;
}
.mascot-sm { width: 80px; }

/* ==========================================================================
   11. 工具 class

   只放這幾個，不要長成一套 utility framework——那會變成另一種形式的 inline style。
   ========================================================================== */

.text-muted   { color: var(--ink-3); }
.text-caption { font-size: var(--text-caption); }
.text-label   { font-size: var(--text-label); }
.hidden       { display: none !important; }


/* couple-settle.html */
.page-title {
      font-size: var(--text-title);
      font-weight: 800;
      margin-bottom: var(--space-tight);
    }

.page-sub {
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin-bottom: calc(var(--space-tight) * 4.5);
    }

.settle-parties {
      font-size: var(--text-body);
      color: var(--ink-2);
      margin-bottom: calc(var(--space-tight) * 1.5);
    }

.settle-amount {
      font-size: var(--text-amount);
      font-weight: 800;
      color: var(--warn);
    }

.field-hint {
      font-size: var(--text-label);
      color: var(--ink-3);
      margin-top: var(--space-snug);
      line-height: 1.6;
    }

.settle-btn {
      width: 100%;
    }


/* book-history.html */
.archived-banner {
      background: var(--disabled-soft);
      color: var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-default) var(--space-section);
      font-size: var(--text-caption);
      font-weight: 600;
      margin-bottom: var(--space-section);
    }

.summary-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 4.5);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      margin-bottom: var(--space-section);
      display: flex;
      justify-content: space-around;
      text-align: center;
    }

.summary-item .label {
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin-bottom: var(--space-tight);
    }

.summary-item .value {
      font-size: var(--text-title);
      font-weight: 800;
    }

.value.expense { color: var(--expense); }

.value.income { color: var(--income); }

.day-group {
      margin-bottom: calc(var(--space-tight) * 3.5);
    }

.day-header {
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--ink-3);
      margin-bottom: calc(var(--space-tight) * 1.5);
      padding-left: var(--space-tight);
    }

.tx-item {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-default) calc(var(--space-tight) * 3.5);
      margin-bottom: calc(var(--space-tight) * 1.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
    }

.tx-main {
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--ink);
    }

.tx-sub {
      font-size: var(--text-label);
      color: var(--ink-3);
      margin-top: calc(var(--space-tight) * 0.5);
    }

.tx-amount {
      font-size: var(--text-body);
      font-weight: 800;
    }

.tx-amount.expense { color: var(--expense); }

.tx-amount.income { color: var(--income); }


.settings-group {
      background: var(--surface);
      border-radius: var(--radius);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      overflow: hidden;
      margin-bottom: var(--space-section);
    }

.setting-item {
      display: flex;
      align-items: center;
      padding: calc(var(--space-tight) * 5);
      gap: var(--space-default);
    }

.item-body {
      flex: 1;
      min-width: 0;
    }

.item-title {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      margin-bottom: var(--space-tight);
    }

.item-desc {
      font-size: var(--text-caption);
      color: var(--ink-3);
      line-height: 1.6;
    }

.switch input:disabled + .switch-track {
      opacity: 0.5;
      cursor: not-allowed;
    }

.info-box {
      display: flex;
      gap: calc(var(--space-tight) * 2.5);
      background: var(--income-soft);
      border: calc(var(--space-tight) * 0.25) solid var(--income-soft);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 3.5) var(--space-section);
      font-size: var(--text-caption);
      color: var(--action-strong);
      line-height: 1.7;
    }


/* time-settings.html */
.tz-select {
      width: 100%;
      border: calc(var(--space-tight) * 0.375) solid var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-default) calc(var(--space-tight) * 3.5);
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      background: var(--base);
      appearance: none;
      -webkit-appearance: none;
    }

.tz-select:disabled {
      opacity: 0.6;
    }

.type-tab-container {
      display: flex;
      background: var(--line);
      border-radius: var(--radius);
      padding: var(--space-tight);
      gap: var(--space-tight);
    }

.type-tab {
      flex: 1;
      border: none;
      background: transparent;
      padding: calc(var(--space-tight) * 2.5) 0;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink-3);
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
    }

.type-tab.active {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.08);
    }

.type-tab:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }


/* budget-settings.html */
.money-input-row {
      display: flex;
      align-items: center;
      gap: var(--space-snug);
      border: calc(var(--space-tight) * 0.375) solid var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-tight) calc(var(--space-tight) * 3.5);
      background: var(--base);
    }

.money-input-row span {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink-3);
    }

.money-input {
      flex: 1;
      border: none;
      background: transparent;
      padding: calc(var(--space-tight) * 2.5) 0;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      font-family: inherit;
      min-width: 0;
    }

.money-input:focus {
      outline: none;
    }

.money-input:disabled {
      opacity: 0.6;
    }

.effective-hint {
      font-size: var(--text-caption);
      color: var(--action);
      margin-top: var(--space-snug);
    }

.toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-default);
    }


/* members.html */
.hint-banner {
      background: var(--info-soft);
      color: var(--info);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 3.5) var(--space-section);
      font-size: var(--text-caption);
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: calc(var(--space-tight) * 5);
    }

.members-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-default);
    }

.member-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-section) calc(var(--space-tight) * 4.5);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
    }

.member-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: calc(var(--space-tight) * 2.5);
    }

.member-name-group {
      display: flex;
      align-items: center;
      gap: var(--space-snug);
      min-width: 0;
    }

.member-name {
      font-size: var(--text-title);
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.me-tag {
      flex-shrink: 0;
      font-size: var(--text-label);
      font-weight: 700;
      color: var(--ink-3);
      background: var(--disabled-soft);
      padding: calc(var(--space-tight) * 0.5) var(--space-snug);
      border-radius: var(--radius);
    }

.role-badge {
      flex-shrink: 0;
      font-size: var(--text-label);
      font-weight: 700;
      padding: calc(var(--space-tight) * 0.75) calc(var(--space-tight) * 2.5);
      border-radius: var(--radius);
    }

.role-badge.owner {
      background: var(--warn-soft);
      color: var(--warn);
    }

.role-badge.admin {
      background: var(--info-soft);
      color: var(--info);
    }

.role-badge.member {
      background: var(--disabled-soft);
      color: var(--ink-3);
    }

.member-joined {
      font-size: var(--text-caption);
      color: var(--ink-3);
    }

.member-actions {
      display: flex;
      gap: var(--space-snug);
      border-top: calc(var(--space-tight) * 0.25) solid var(--base);
      padding-top: calc(var(--space-tight) * 2.5);
    }

.member-action-btn {
      flex: 1;
      padding: var(--space-snug) 0;
      border-radius: var(--radius);
      background: var(--base);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      color: var(--ink-2);
      font-size: var(--text-caption);
      font-weight: 700;
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
    }

.member-action-btn:active {
      transform: scale(0.96);
    }

.member-action-btn.danger {
      color: var(--expense);
      background: var(--expense-soft);
      border-color: var(--expense-soft);
    }

.modal-overlay.show {
      display: flex;
      animation: modalFadeIn var(--dur-base) var(--ease-out);
    }

@keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

.modal-btn {
      flex: 1;
      padding: var(--space-default) 0;
      border-radius: var(--radius);
      font-size: var(--text-body);
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
    }

.modal-btn-cancel {
      background: var(--disabled-soft);
      color: var(--ink-3);
    }

.modal-btn-save {
      background: var(--action);
      color: var(--surface);
      box-shadow: 0 var(--space-tight) var(--space-default) rgba(var(--shadow-color), 0.08);
    }


/* my-books.html */
.books-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-default);
    }

.book-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-section) calc(var(--space-tight) * 4.5);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
    }

.book-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: calc(var(--space-tight) * 2.5);
    }

.book-name-group {
      display: flex;
      align-items: center;
      gap: var(--space-snug);
      min-width: 0;
    }

.book-name {
      font-size: var(--text-title);
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.status-badge.archived {
      flex-shrink: 0;
      font-size: var(--text-label);
      font-weight: 700;
      padding: calc(var(--space-tight) * 0.75) calc(var(--space-tight) * 2.5);
      border-radius: var(--radius);
      background: var(--disabled-soft);
      color: var(--ink-3);
      margin-right: calc(var(--space-tight) * 1.5);
    }

.book-meta {
      font-size: var(--text-caption);
      color: var(--ink-3);
    }

.book-actions {
      display: flex;
      gap: var(--space-snug);
      border-top: calc(var(--space-tight) * 0.25) solid var(--base);
      padding-top: calc(var(--space-tight) * 2.5);
    }

.book-action-btn {
      flex: 1;
      padding: var(--space-snug) 0;
      border-radius: var(--radius);
      background: var(--base);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      color: var(--ink-2);
      font-size: var(--text-caption);
      font-weight: 700;
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
      text-decoration: none;
      text-align: center;
      display: inline-block;
    }

.book-action-btn:active {
      transform: scale(0.96);
    }

.book-action-btn.danger {
      color: var(--expense);
      background: var(--expense-soft);
      border-color: var(--expense-soft);
    }


/* export.html */
.section-title-action { display: flex; justify-content: space-between; align-items: center; gap: var(--space-snug); }

.section-title:first-of-type {
      margin-top: 0;
    }

.card-desc {
      font-size: var(--text-caption);
      color: var(--ink-3);
      line-height: 1.7;
      margin-bottom: var(--space-section);
    }

.date-range-row {
      display: flex;
      align-items: center;
      gap: var(--space-snug);
      margin-bottom: var(--space-section);
    }

.date-input-wrap {
      flex: 1;
      min-width: 0;
    }

.date-input-label {
      font-size: var(--text-label);
      color: var(--ink-3);
      margin-bottom: calc(var(--space-tight) * 1.5);
      font-weight: 600;
    }

.date-input {
      width: 100%;
      border: calc(var(--space-tight) * 0.375) solid var(--ink-3);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 2.5) var(--space-default);
      font-size: var(--text-body);
      font-weight: 600;
      color: var(--ink);
      outline: none;
      font-family: inherit;
    }

.date-input:focus {
      border-color: var(--action);
    }

.date-range-sep {
      color: var(--line);
      font-size: var(--text-caption);
      margin-top: calc(var(--space-tight) * 4.5);
    }

.file-picker-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-snug);
      background: var(--base);
      border: calc(var(--space-tight) * 0.375) dashed var(--line);
      color: var(--ink-2);
      padding: var(--space-section);
      border-radius: var(--radius);
      font-size: var(--text-body);
      font-weight: 700;
      cursor: pointer;
      margin-bottom: var(--space-default);
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
    }

.file-picker-btn:active {
      background: var(--disabled-soft);
    }

.file-picker-btn.has-file {
      border-style: solid;
      border-color: var(--action);
      background: var(--income-soft);
      color: var(--action-strong);
    }

input[type="file"] {
      display: none;
    }

.format-box {
      background: var(--base);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      border-radius: var(--radius);
      padding: var(--space-default) calc(var(--space-tight) * 3.5);
      font-size: var(--text-label);
      color: var(--ink-3);
      line-height: 1.8;
      margin-bottom: var(--space-section);
    }

.format-box code {
      background: var(--line);
      padding: calc(var(--space-tight) * 0.25) calc(var(--space-tight) * 1.25);
      border-radius: var(--radius);
      font-size: var(--text-label);
      color: var(--ink-2);
    }

.source-select {
      width: 100%; border: calc(var(--space-tight) * 0.375) solid var(--ink-3); border-radius: var(--radius);
      padding: var(--space-default); margin-bottom: var(--space-default); background: var(--surface);
      color: var(--ink); font-size: var(--text-body); font-weight: 700;
    }

/* 匯入前預覽：選好檔案後先顯示這次要匯入的範圍、筆數與重複提示，確認後才解鎖匯入鈕 */
.import-preview {
      display: none;
      margin-bottom: var(--space-default);
      padding: calc(var(--space-tight) * 3.5) var(--space-section);
      background: var(--info-soft);
      border: calc(var(--space-tight) * 0.25) solid var(--info-soft);
      border-radius: var(--radius);
    }

.import-preview.show {
      display: block;
    }

.import-preview.has-error {
      background: var(--warn-soft);
      border-color: var(--warn-soft);
    }

.import-preview-title {
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--info);
    }

.import-preview.has-error .import-preview-title {
      color: var(--warn);
    }

.import-preview-range {
      margin-top: var(--space-snug);
      font-size: var(--text-label);
      color: var(--ink-2);
    }

.import-preview-warn {
      margin-top: calc(var(--space-tight) * 2.5);
      padding-top: calc(var(--space-tight) * 2.5);
      border-top: calc(var(--space-tight) * 0.25) solid color-mix(in srgb, var(--ink) 10%, transparent);
      font-size: var(--text-label);
      font-weight: 700;
      color: var(--warn);
      line-height: 1.7;
    }

.import-preview-sample {
      margin-top: var(--space-snug);
      font-weight: 500;
      color: var(--ink-2);
    }

.import-skip-row {
      margin-top: calc(var(--space-tight) * 2.5);
      font-size: var(--text-label);
      font-weight: 700;
      color: var(--ink);
    }

.import-preview .error-list {
      margin-top: calc(var(--space-tight) * 2.5);
    }

.result-panel {
      margin-top: var(--space-section);
      border-radius: var(--radius);
      overflow: hidden;
      display: none;
    }

.result-panel.show {
      display: block;
    }

.result-summary {
      display: flex;
      gap: calc(var(--space-tight) * 2.5);
      padding: calc(var(--space-tight) * 3.5) var(--space-section);
      background: var(--income-soft);
      border: calc(var(--space-tight) * 0.25) solid var(--income-soft);
      border-radius: var(--radius);
      font-size: var(--text-caption);
      color: var(--action-strong);
      font-weight: 700;
      margin-bottom: var(--space-snug);
    }

.result-summary.has-error {
      background: var(--warn-soft);
      border-color: var(--warn-soft);
      color: var(--warn);
    }

.error-list {
      max-height: calc(var(--space-section) * 10);
      overflow-y: auto;
      background: var(--expense-soft);
      border: calc(var(--space-tight) * 0.25) solid var(--info);
      border-radius: var(--radius);
      padding: var(--space-default) calc(var(--space-tight) * 3.5);
      font-size: var(--text-label);
      color: var(--expense);
      line-height: 1.9;
    }

.error-list div {
      border-bottom: calc(var(--space-tight) * 0.25) solid color-mix(in srgb, var(--ink) 8%, transparent);
      padding: calc(var(--space-tight) * 0.75) 0;
    }

.error-list div:last-child {
      border-bottom: none;
    }


/* split.html */
.tx-note {
      font-size: var(--text-title);
      font-weight: 700;
      color: var(--ink);
    }

.tx-meta {
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin-top: var(--space-tight);
    }

.segmented {
      display: flex;
      background: var(--disabled-soft);
      border-radius: var(--radius);
      padding: var(--space-tight);
      margin-bottom: var(--space-section);
    }

.segmented button {
      flex: 1;
      border: none;
      background: transparent;
      padding: calc(var(--space-tight) * 2.5) 0;
      border-radius: var(--radius);
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--ink-3);
      cursor: pointer;
    }

.segmented .btn.btn-secondary.active {
      background: var(--action);
      color: var(--surface);
      border-color: var(--action);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.12);
    }

.member-row {
      display: flex;
      align-items: center;
      gap: var(--space-default);
      padding: var(--space-default) 0;
      border-bottom: calc(var(--space-tight) * 0.25) solid var(--base);
    }

.member-row:last-child {
      border-bottom: none;
    }

.member-check {
      width: calc(var(--space-tight) * 5.5);
      height: calc(var(--space-tight) * 5.5);
      flex-shrink: 0;
      accent-color: var(--action);
    }

.member-row-name {
      flex: 1;
      font-size: var(--text-body);
      font-weight: 600;
      color: var(--ink);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.member-row-name.dim {
      color: var(--line);
    }

.member-amount {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      width: calc(var(--space-default) * 6);
      text-align: right;
    }

.member-amount-input {
      width: calc(var(--space-default) * 7);
      text-align: right;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      border: calc(var(--space-tight) * 0.25) solid var(--ink-3);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 1.5) var(--space-snug);
    }

.split-sum-line {
      display: flex;
      justify-content: space-between;
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin-top: var(--space-default);
      padding-top: var(--space-default);
      border-top: calc(var(--space-tight) * 0.25) dashed var(--line);
    }

.split-sum-line.mismatch {
      color: var(--expense);
      font-weight: 700;
    }

.split-item {
      padding: var(--space-default) 0;
      border-bottom: calc(var(--space-tight) * 0.25) solid var(--base);
    }

.split-item:last-child {
      border-bottom: none;
    }

.split-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-default);
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
    }

.split-item-add {
      width: 100%;
    }

.split-item-edit {
      display: flex;
      align-items: center;
      gap: var(--space-default);
    }

.split-item-edit-name {
      flex: 1;
      min-width: 0;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      border: calc(var(--space-tight) * 0.25) solid var(--ink-3);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 1.5) var(--space-snug);
    }

.split-item-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.split-item-chips {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--space-tight) * 2);
      margin-top: var(--space-default);
    }

.member-chip {
      border: calc(var(--space-tight) * 0.25) solid var(--line);
      background: var(--surface);
      color: var(--ink-3);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 1.5) var(--space-default);
      font-size: var(--text-caption);
      font-weight: 700;
      cursor: pointer;
    }

.member-chip.on {
      background: var(--brand-soft);
      border-color: var(--action-strong);
      color: var(--action-strong);
    }

.action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--surface);
      padding: var(--space-default) var(--space-section) calc(var(--space-default) + env(safe-area-inset-bottom));
      box-shadow: 0 calc(var(--space-tight) * -1) var(--space-section) rgba(var(--shadow-color), 0.08);
      display: flex;
      gap: calc(var(--space-tight) * 2.5);
      max-width: calc(var(--space-section) * 30);
      margin: 0 auto;
    }

.action-bar > .btn {
      flex: 1;
    }

.balance-list {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
    }

.balance-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--surface);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 3.5) var(--space-section);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
    }

.balance-name {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: var(--space-snug);
    }

.balance-amount {
      font-size: var(--text-body);
      font-weight: 800;
    }

.balance-amount.positive { color: var(--action); }

.balance-amount.negative { color: var(--expense); }

.balance-amount.zero { color: var(--ink-3); }

.transfer-row {
      display: flex;
      align-items: center;
      gap: var(--space-snug);
      font-size: var(--text-caption);
      font-weight: 600;
      color: var(--ink-2);
      padding: calc(var(--space-tight) * 2.5) 0;
      border-bottom: calc(var(--space-tight) * 0.25) solid var(--base);
    }

.transfer-row:last-child { border-bottom: none; }

.transfer-amount {
      margin-left: auto;
      font-weight: 800;
      color: var(--warn);
    }

.section-label {
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--ink-3);
      margin: calc(var(--space-tight) * 5) 0 calc(var(--space-tight) * 2.5);
    }


/* recurring.html */
.page-subtitle {
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin: calc(calc(var(--space-tight) * 2.5) * -1) 0 var(--space-section) var(--space-tight);
      line-height: 1.5;
    }

.section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: var(--space-section) 0 var(--space-default) var(--space-tight);
    }

.btn-add-item {
      background: var(--income-soft);
      color: var(--income);
      border: none;
      font-size: var(--text-caption);
      font-weight: 700;
      padding: calc(var(--space-tight) * 1.5) calc(var(--space-tight) * 3.5);
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
      display: flex;
      align-items: center;
      gap: var(--space-tight);
    }

.btn-add-item:active {
      transform: scale(0.94);
      background: var(--brand);
    }

.items-container {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
    }

.item-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-section) calc(var(--space-tight) * 4.5);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
      transition: transform var(--dur-fast) var(--ease-standard);
    }

.item-card.paused {
      opacity: 0.55;
    }

.item-card:active {
      transform: scale(0.99);
    }

.item-main-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

.item-left {
      display: flex;
      align-items: center;
      gap: calc(var(--space-tight) * 2.5);
    }

.color-dot {
      width: calc(var(--space-tight) * 3.5);
      height: calc(var(--space-tight) * 3.5);
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: calc(var(--space-tight) * 0.75);
    }

.item-titles {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 0.5);
    }

.item-category {
      font-size: var(--text-title);
      font-weight: 700;
      color: var(--ink);
    }

.item-note {
      font-size: var(--text-caption);
      color: var(--ink-3);
    }

.item-amount {
      font-size: var(--text-title);
      font-weight: 800;
      white-space: nowrap;
    }

.item-amount.income { color: var(--income); }

.item-amount.expense { color: var(--expense); }

.item-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--space-tight) * 1.5);
      padding-top: var(--space-snug);
      border-top: calc(var(--space-tight) * 0.25) solid var(--base);
    }

.item-meta-row + .item-meta-row {
      border-top: none;
      padding-top: 0;
      justify-content: flex-end;
    }

.meta-tag {
      font-size: var(--text-label);
      font-weight: 700;
      padding: calc(var(--space-tight) * 0.75) calc(var(--space-tight) * 2.25);
      border-radius: var(--radius);
      background: var(--disabled-soft);
      color: var(--ink-2);
    }

.meta-tag.tag-next {
      background: var(--info-soft);
      color: var(--info);
    }

.meta-tag.tag-paused {
      background: var(--expense-soft);
      color: var(--expense);
    }

.item-actions {
      display: flex;
      gap: calc(var(--space-tight) * 1.5);
    }

.card-action-btn {
      padding: var(--space-tight) var(--space-snug);
      border-radius: var(--radius);
      background: var(--base);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      color: var(--ink-3);
      font-size: var(--text-caption);
      font-weight: 600;
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
    }

.card-action-btn:hover {
      background: var(--disabled-soft);
      color: var(--ink);
    }

.card-action-btn.btn-delete {
      color: var(--expense);
      background: var(--expense-soft);
      border-color: var(--expense-soft);
    }

.segmented-control {
      display: flex;
      /* 放在 .form-row（space-between）裡時沒有寬度會縮成字寬，兩顆按鈕窄到難按。
         吃掉標籤右邊的剩餘空間，但不要寬到讓整列失衡。 */
      flex: 1;
      max-width: 240px;
      background: var(--disabled-soft);
      border-radius: var(--radius);
      padding: var(--space-tight);
      gap: var(--space-tight);
    }

.segmented-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: var(--space-snug) 0;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink-3);
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
    }

.segmented-btn.active {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.08);
    }

/* edit.html / recurring.html 的分段控制項同時掛著 .btn.btn-secondary（為了拿到 44px
   觸控高度），而 .btn.btn-secondary 的顏色定義在這份檔案更後面、specificity 又相同，
   會把上面的選中樣式整個蓋掉——結果兩顆按鈕長得一模一樣，看不出選了哪一個。
   這裡用更高的 specificity 重新宣告，並把選中態改成實心動作色，對比一眼可辨。 */
.segmented-control .btn.segmented-btn {
      min-width: 0;
      padding: var(--space-snug) var(--space-tight);
      background: transparent;
      color: var(--ink-3);
      border: 1px solid transparent;
    }

.segmented-control .btn.segmented-btn.active {
      background: var(--action);
      color: var(--surface);
      border-color: var(--action);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.12);
    }

.segmented-control .btn.segmented-btn:active {
      background: var(--brand-soft);
    }

.segmented-control .btn.segmented-btn.active:active {
      background: var(--action-strong);
    }

.form-group {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 1.5);
    }

.form-row-2col {
      display: flex;
      gap: calc(var(--space-tight) * 2.5);
    }

.form-row-2col .form-group {
      flex: 1;
    }


/* couple.html */

.card-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-default);
    }

.item-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: calc(var(--space-tight) * 2.5);
    }

.item-name {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: calc(var(--space-tight) * 1.5);
    }

.progress-bar-bg {
      height: var(--space-snug);
      background: var(--disabled-soft);
      border-radius: var(--radius);
      overflow: hidden;
    }

.progress-bar-fill {
      height: 100%;
      background: var(--info);
      border-radius: var(--radius);
      transition: width var(--dur-slow) var(--ease-standard);
    }

.progress-label {
      font-size: var(--text-caption);
      color: var(--ink-3);
      display: flex;
      justify-content: space-between;
    }

.item-sub {
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin: calc(var(--space-tight) * 0.5) 0 calc(var(--space-tight) * 2.5);
    }

.alias-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-snug);
    }

.alias-chip {
      display: flex;
      align-items: center;
      gap: calc(var(--space-tight) * 1.5);
      background: var(--info-soft);
      color: var(--info);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 1.5) var(--space-snug) calc(var(--space-tight) * 1.5) var(--space-default);
      font-size: var(--text-caption);
      font-weight: 700;
    }

.alias-chip-remove {
      width: var(--space-section);
      height: var(--space-section);
      border-radius: 50%;
      background: color-mix(in srgb, var(--ink) 8%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: var(--text-label);
      line-height: 1;
    }

.item-action-btn {
      flex: 1;
      padding: var(--space-snug) 0;
      border-radius: var(--radius);
      background: var(--base);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      color: var(--ink-2);
      font-size: var(--text-caption);
      font-weight: 700;
      cursor: pointer;
    }

.item-action-btn.primary {
      background: var(--info-soft);
      color: var(--info);
      border-color: var(--info);
    }

.item-action-btn.danger {
      color: var(--expense);
      background: var(--expense-soft);
      border-color: var(--expense-soft);
    }

.settlement-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 4.5);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      margin-bottom: var(--space-snug);
    }

.settlement-headline {
      font-size: var(--text-caption);
      color: var(--ink-3);
      margin-bottom: var(--space-tight);
    }

.settlement-amount {
      font-size: var(--text-total);
      font-weight: 800;
      color: var(--warn);
      margin-bottom: var(--space-default);
    }

.settlement-amount.zero {
      color: var(--action);
    }

.chart-canvas-wrap {
      position: relative;
      height: calc(var(--space-snug) * 25);
      margin: var(--space-snug) 0 calc(var(--space-tight) * 3.5);
    }

.contribution-legend {
      display: flex;
      flex-direction: column;
      gap: var(--space-snug);
    }

.metric-switch {
      display: flex;
      gap: calc(var(--space-tight) * 1.5);
      background: var(--disabled-soft);
      border-radius: var(--radius);
      padding: var(--space-tight);
      margin-bottom: calc(var(--space-tight) * 2.5);
    }

.metric-switch button {
      flex: 1;
      border: none;
      background: transparent;
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 1.75) var(--space-tight);
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--ink-3);
      cursor: pointer;
    }

.metric-switch button.active {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 calc(var(--space-tight) * 0.25) calc(var(--space-tight) * 0.75) rgba(var(--shadow-color), 0.08);
    }

/* couple.html 的 .metric-switch 按鈕同時掛著 .btn.btn-secondary（為了 44px 觸控高度），
   而 .btn.btn-secondary 定義在這份檔案更後面、specificity (0,2,0) 又高於
   .metric-switch button 的 (0,1,1)，會把未選中態整個蓋掉——結果未選中的那顆是綠底綠框、
   選中的那顆反而是白底，顏色完全相反。這是本檔第三次出現同一個病（另見 :1624、:2025）。 */
.metric-switch .btn.btn-secondary {
      min-width: 0;
      min-height: 44px;
      background: transparent;
      color: var(--ink-3);
      border: 1px solid transparent;
    }

.metric-switch .btn.btn-secondary.active {
      background: var(--action);
      color: var(--surface);
      border-color: var(--action);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.12);
    }

.metric-switch .btn.btn-secondary:active {
      background: var(--brand-soft);
    }

.metric-switch .btn.btn-secondary.active:active {
      background: var(--action-strong);
    }

.metric-hint {
      font-size: var(--text-label);
      color: var(--ink-3);
      margin-top: calc(var(--space-tight) * 2.5);
      line-height: 1.5;
    }

.legend-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-caption);
    }

.legend-dot {
      width: calc(var(--space-tight) * 2.5);
      height: calc(var(--space-tight) * 2.5);
      border-radius: 50%;
      display: inline-block;
      margin-right: calc(var(--space-tight) * 1.5);
    }

.nav-personal-link {
      display: block;
      text-align: center;
      font-size: var(--text-caption);
      font-weight: 700;
      color: var(--info);
      background: var(--info-soft);
      border-radius: var(--radius);
      padding: calc(var(--space-tight) * 2.5) 0;
      text-decoration: none;
      margin-top: calc(var(--space-tight) * 1.5);
    }


/* edit.html */
#loadingMask { position: fixed; inset: 0; z-index: 1200; background: color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: blur(var(--space-snug)); display:flex; align-items:center; justify-content:center; color:var(--ink-2); font-weight:700; }

.card-block {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-section) calc(var(--space-tight) * 5);
      box-shadow: 0 calc(var(--space-tight) * 0.5) var(--space-snug) rgba(var(--shadow-color), 0.08);
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 3.5);
    }

.form-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-default);
      min-height: calc(var(--space-snug) * 5);
    }

/* 選單原本是透明底、無框、無箭頭，跟旁邊的純文字長得一模一樣，完全看不出可以點。
   給它一個底色 + 外框 + 箭頭，做成看得出是控制項的樣子。箭頭用 CSS border 畫，
   不是符號字元，沒有違反「不使用圖示」那條規則。 */
.select-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;                       /* 允許被壓縮，長選項用省略號收尾而不是把標籤擠掉 */
      gap: var(--space-snug);
      padding: 6px var(--space-default);
      background: var(--base);
      border: 1px solid var(--ink-3);
      border-radius: var(--radius);
      cursor: pointer;
    }

.select-wrapper:focus-within {
      border-color: var(--action);
    }

.select-wrapper::after {
      content: "";
      flex-shrink: 0;
      width: 7px;
      height: 7px;
      margin-top: -3px;
      border-right: 2px solid var(--ink-3);
      border-bottom: 2px solid var(--ink-3);
      transform: rotate(45deg);
      pointer-events: none;
    }

.select-wrapper select {
      border: none;
      background: transparent;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      appearance: none;
      padding: 0;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      text-align: right;
      outline: none;
    }

.amount-input {
      border: calc(var(--space-tight) * 0.25) solid var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-tight) var(--space-snug);
      font-size: var(--text-title);
      font-weight: 700;
      width: calc(var(--space-tight) * 25);
      text-align: right;
      outline: none;
    }

.edit-icon {
      color: var(--ink-3);
      font-size: var(--text-title);
      cursor: pointer;
    }

.date-picker-wrapper {
      position: relative;
    }

.date-picker-wrapper input[type="date"] {
      border: none;
      background: transparent;
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--ink);
      outline: none;
      cursor: pointer;
    }

.note-input {
      width: 100%;
      border: calc(var(--space-tight) * 0.375) solid var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-default) var(--space-section);
      font-size: var(--text-body);
      color: var(--ink);
      outline: none;
      transition: border-color var(--dur-base) var(--ease-standard);
      background: var(--surface);
      margin-top: calc(var(--space-tight) * 1.5);
    }

.note-input:focus {
      border-color: var(--action);
    }

.divider {
      height: calc(var(--space-tight) * 0.25);
      background: var(--disabled-soft);
      margin: calc(var(--space-tight) * 0.5) 0;
    }

.quick-picks {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-snug);
      margin: calc(var(--space-tight) * -1) 0 calc(var(--space-tight) * 0.5);
    }

.quick-chip {
      border: calc(var(--space-tight) * 0.375) solid var(--line);
      background: var(--base);
      color: var(--ink-2);
      font-size: var(--text-caption);
      font-weight: 600;
      padding: calc(var(--space-tight) * 1.5) var(--space-default);
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
      white-space: nowrap;
    }

.quick-chip.active {
      background: var(--action);
      border-color: var(--action);
      color: var(--surface);
    }

/* 常用分類／支付方式的 chip 也掛著 .btn.btn-secondary，跟分段按鈕是同一個病：
   上面那條選中樣式會被檔案後面同 specificity 的 .btn.btn-secondary 蓋掉，
   選了哪一個完全看不出來。用更高的 specificity 蓋回去。 */
.quick-picks .btn.quick-chip {
      min-height: 0;
      padding: calc(var(--space-tight) * 1.5) var(--space-default);
      background: var(--base);
      border: 1px solid var(--line);
      color: var(--ink-2);
      font-size: var(--text-caption);
      font-weight: 600;
    }

.quick-picks .btn.quick-chip.active {
      background: var(--action);
      border-color: var(--action);
      color: var(--surface);
    }

.actions-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-default);
      margin-top: calc(var(--space-tight) * 2.5);
    }

.btn-back {
      background: var(--line);
      color: var(--ink-2);
    }

.btn-back:active {
      background: var(--line);
    }

.btn-delete {
      background: var(--expense);
      color: var(--surface);
      box-shadow: 0 var(--space-tight) var(--space-default) rgba(var(--shadow-color), 0.08);
    }

.btn-delete:active {
      background: var(--expense);
    }

.btn-copy {
      background: var(--info-soft);
      color: var(--info);
      border: calc(var(--space-tight) * 0.375) solid var(--info);
    }

.btn-copy:active {
      background: var(--info-soft);
    }

.sheet-overlay {
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--ink) 8%, transparent);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 999;
      padding: 0;
    }

.sheet-panel {
      background: var(--surface);
      width: 100%;
      max-width: calc(var(--space-section) * 30);
      border-radius: var(--radius) calc(var(--space-tight) * 5) 0 0;
      padding: calc(var(--space-tight) * 5) calc(var(--space-tight) * 5) calc(calc(var(--space-tight) * 5) + env(safe-area-inset-bottom, 0));
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
      max-height: 70vh;
    }

.sheet-title {
      font-size: var(--text-title);
      font-weight: 700;
      color: var(--ink);
      margin-bottom: var(--space-tight);
    }

.sheet-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-snug);
      overflow-y: auto;
    }

.sheet-item {
      width: 100%;
      text-align: left;
      padding: calc(var(--space-tight) * 3.5) var(--space-section);
      border-radius: var(--radius);
      border: calc(var(--space-tight) * 0.375) solid var(--line);
      background: var(--base);
      font-size: var(--text-body);
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
    }

.sheet-item:active {
      background: var(--info-soft);
      border-color: var(--info);
    }

.sheet-empty {
      font-size: var(--text-body);
      color: var(--ink-3);
      padding: var(--space-snug) 0;
    }

/* 2026-09-14 編輯紀錄重製：全部限縮在 edit 頁，不能影響其他 LIFF 頁。 */
.edit-record-page {
      /* 共用暖白底色，凸顯白色卡片的立體塊狀感 */
      padding: var(--space-default) var(--space-section);
      min-height: 100dvh;
      background-color: var(--base);
    }

.edit-record-page #editRecordPage {
      max-width: calc(var(--space-section) * 31);
      min-height: auto;
      margin: 0 auto;
      padding: calc(var(--space-tight) * 2) 0 calc(var(--space-tight) * 6);
      display: flex;
      flex-direction: column;
    }

.edit-record-page .edit-transfer-kicker {
      align-items: center;
      justify-content: center;
      min-height: calc(var(--space-tight) * 6);
      padding: 0 var(--space-section);
      margin: 0 auto var(--space-snug);
      border-radius: calc(var(--space-tight) * 4);
      background: var(--action-soft);
      color: var(--action);
      font-size: var(--text-caption);
      font-weight: 700;
    }

.edit-record-page .card-block {
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: 0 2px 8px rgba(var(--shadow-color), 0.04);
      border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
      padding: calc(var(--space-tight) * 3.5) calc(var(--space-tight) * 4);
      gap: calc(var(--space-tight) * 1.5);
      margin: 0 0 calc(var(--space-tight) * 2.5);
    }

.edit-record-page .card-block .form-row {
      min-height: calc(var(--space-tight) * 5);
    }

.edit-record-page .card-block .divider {
      margin: calc(var(--space-tight) * 0.5) 0;
    }

.edit-record-page .edit-payment-context {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 1.5);
    }

.edit-record-page .amount-row {
      align-items: center;
    }

.edit-record-page .amount-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      gap: var(--space-snug);
      flex: 1 1 auto;
      min-width: 0;
    }

.edit-record-page .currency-select-wrapper {
      width: auto;
      min-width: 0;
      padding: var(--space-snug);
    }

.edit-record-page .currency-select-wrapper select {
      width: 100%;
      font-size: var(--text-caption);
    }

/* 原生 select 以前只佔文字本身的寬度；手機點在同一個外框的其他位置完全不會觸發。
   讓真實控制項覆蓋整個可見框，保留既有 onchange 與原生選單。 */
.edit-record-page .select-wrapper {
      min-height: calc(var(--space-tight) * 5);
    }

.edit-record-page .select-wrapper > select {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      padding: 0 calc(var(--space-section) * 2) 0 var(--space-default);
      box-sizing: border-box;
    }

.edit-record-page .select-wrapper::after {
      position: absolute;
      right: var(--space-default);
      z-index: 1;
    }

.edit-record-page .amount-display {
      display: flex;
      align-items: center;
      width: auto;
      min-width: 0;
      min-height: calc(var(--space-tight) * 5);
      gap: calc(var(--space-tight) * 0.5);
      padding: 0 var(--space-default);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      white-space: nowrap;
    }

.edit-record-page #currencyCode.visually-hidden {
      display: none;
    }

.edit-record-page #amountSign.visually-hidden {
      display: none;
    }

.edit-record-page .amount-input {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      max-width: none;
      padding: 0;
      border: 0;
      border-radius: 0;
      font-size: calc(var(--text-title) * 1.1);
      font-weight: 800;
      line-height: 1;
    }

.edit-record-page .note-field {
      display: flex;
      flex-direction: row;
      gap: var(--space-snug);
    }

.edit-record-page .note-input {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      margin-top: 0;
      box-sizing: border-box;
    }

.edit-record-page #typeRow {
      justify-content: stretch;
    }

.edit-record-page #typeRow .segmented-control {
      flex: 1 1 auto;
      width: 100%;
      max-width: none;
    }

.edit-record-page #categoryRow .select-wrapper,
.edit-record-page #accountLabel + .select-wrapper,
.edit-record-page #bookSelectRow .select-wrapper,
.edit-record-page #payerRow .select-wrapper {
      width: calc(var(--space-section) * 8);
      min-width: 0;
      max-width: 100%;
    }

.edit-record-page #categorySelect,
.edit-record-page #accountSelect,
.edit-record-page #bookSelect,
.edit-record-page #memberSelect {
      text-align: center;
      text-align-last: center;
    }

.edit-record-page .quick-picks {
      gap: calc(var(--space-tight) * 1);
      margin: 0;
    }

.edit-record-page .quick-picks .btn.quick-chip {
      min-height: 38px;
      padding: var(--space-snug) var(--space-default);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

.edit-record-page #tagRow .segmented-control {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      padding: calc(var(--space-tight) * 0.5);
      gap: calc(var(--space-tight) * 0.75);
    }

.edit-record-page #tagRow .segmented-btn {
      flex: 0 0 auto;
      min-width: calc(var(--space-section) * 3.5);
      min-height: calc(var(--space-tight) * 4);
      padding: calc(var(--space-tight) * 0.75) var(--space-default);
      font-size: var(--text-caption);
    }

.edit-record-page .split-summary-row {
      align-items: flex-start;
    }

.edit-record-page #splitSummary {
      margin-top: var(--space-tight);
      line-height: 1.5;
    }

.edit-record-page .btn-split-adjust {
      flex: 0 0 auto;
      min-height: 0;
      padding: var(--space-snug) var(--space-default);
    }

.edit-record-page .actions-container {
      gap: var(--space-snug);
      margin-top: calc(var(--space-tight) * 4);
      padding-top: 0;
    }

.edit-record-page .footer-timestamp {
      text-align: center;
      margin-top: var(--space-snug);
      margin-bottom: var(--space-section);
      color: var(--ink-3);
      font-size: var(--text-caption);
    }

@media (min-height: 700px) {
  .edit-record-page .card-block {
        padding-top: calc(var(--space-tight) * 3.5);
        padding-bottom: calc(var(--space-tight) * 3.5);
      }

  .edit-record-page .card-block .form-row,
  .edit-record-page .select-wrapper,
  .edit-record-page input.installment-control,
  .edit-record-page .amount-display {
        min-height: calc(var(--space-tight) * 7.5);
      }

  .edit-record-page #typeRow .segmented-btn,
  .edit-record-page #tagRow .segmented-btn,
  .edit-record-page .note-input {
        min-height: 44px;
      }

  .edit-record-page .edit-amount-card .amount-row {
        min-height: calc(var(--space-tight) * 8);
      }

  .edit-record-page .quick-picks .btn.quick-chip {
        min-height: 38px;
        padding-top: var(--space-snug);
        padding-bottom: var(--space-snug);
      }
}

.edit-record-page .action-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-snug);
    }

.edit-record-page .action-row .btn {
      min-width: 0;
      padding-left: var(--space-snug);
      padding-right: var(--space-snug);
    }

.edit-record-page .btn-save {
      margin-bottom: 0;
    }

.edit-record-page .btn-more {
      background: var(--base);
      border: 1px solid var(--line);
      color: var(--ink-2);
    }

.edit-record-page .more-sheet-panel {
      max-width: calc(var(--space-section) * 31);
    }

.edit-record-page .more-sheet-panel .sheet-title {
      text-align: center;
    }

.edit-record-page .more-sheet-panel .sheet-item {
      text-align: center;
    }

.edit-record-page .sheet-delete {
      background: var(--expense-soft);
      border-color: var(--expense-soft);
      color: var(--expense);
    }

@media (max-width: 375px) {
  .edit-record-page #editRecordPage {
        padding-left: var(--space-default);
        padding-right: var(--space-default);
      }

  .edit-record-page .amount-controls {
        gap: calc(var(--space-tight) * 1);
      }

  .edit-record-page .currency-select-wrapper {
        width: auto;
        min-width: 0;
      }

  .edit-record-page .amount-display {
        padding: 0 var(--space-snug);
      }

  .edit-record-page .amount-input {
        font-size: calc(var(--text-title) * 1.1);
      }
}

.btn-save {
      background: var(--action);
      color: var(--surface);
      box-shadow: 0 var(--space-tight) var(--space-default) rgba(var(--shadow-color), 0.08);
      margin-bottom: var(--space-tight);
    }

.btn-save:active {
      background: var(--action-strong);
    }


/* categories.html */
.btn-add-category {
      background: var(--income-soft);
      color: var(--income);
      border: none;
      font-size: var(--text-caption);
      font-weight: 700;
      padding: calc(var(--space-tight) * 1.5) calc(var(--space-tight) * 3.5);
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
      display: flex;
      align-items: center;
      gap: var(--space-tight);
    }

.btn-add-category:active {
      transform: scale(0.94);
      background: var(--brand);
    }

.categories-container {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
    }

.category-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--space-section) calc(var(--space-tight) * 4.5);
      border: calc(var(--space-tight) * 0.25) solid var(--disabled-soft);
      box-shadow: 0 var(--space-tight) var(--space-section) rgba(var(--shadow-color), 0.08);
      display: flex;
      flex-direction: column;
      gap: var(--space-snug);
      transition: transform var(--dur-fast) var(--ease-standard);
    }

.category-card:active {
      transform: scale(0.99);
    }

.category-main-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.category-left {
      display: flex;
      align-items: center;
      gap: calc(var(--space-tight) * 2.5);
    }

.category-name {
      font-size: var(--text-title);
      font-weight: 700;
      color: var(--ink);
    }

.category-actions {
      display: flex;
      gap: calc(var(--space-tight) * 1.5);
    }

.category-budget-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-caption);
      padding-top: calc(var(--space-tight) * 1.5);
      border-top: calc(var(--space-tight) * 0.25) solid var(--base);
      color: var(--ink-3);
    }

.budget-tag {
      font-size: var(--text-label);
      font-weight: 700;
      padding: calc(var(--space-tight) * 0.5) var(--space-snug);
      border-radius: var(--radius);
      background: var(--info-soft);
      color: var(--info);
    }

/* ---- 收合抽屜（原生 <details>），手法跟餘額來源分解（.card-breakdown）一樣。
   用在帳戶設定頁（貸款帳戶編輯 Modal 裡的分期付款設定／還款提醒（選填的進階欄位，多數編輯
   只是改名稱或本金，不該每次都把整串欄位攤開擋在「儲存」按鈕前面），以及貸款與負債
   列表每一筆卡片的明細）與分類設定頁的代表顏色選擇。
   Modal 裡那兩個由 handleTypeChange() 額外用 style.display 控制「這個帳戶類型要不要
   整塊出現」，預設 display:block 是給列表裡的用法（一開頁就要看得到）。 ---- */
.detail-drawer {
  display: block;
  margin-bottom: var(--space-default);
  padding: var(--space-default);
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.detail-drawer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-snug);
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.detail-drawer-title::-webkit-details-marker { display: none; }

.detail-drawer-title::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.detail-drawer[open] > .detail-drawer-title::after { transform: rotate(-135deg); }

.detail-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-snug);
  margin-top: var(--space-default);
}

.color-swatches {
      display: flex;
      gap: var(--space-snug);
      flex-wrap: wrap;
      margin-top: var(--space-tight);
    }

.color-swatch {
      width: calc(var(--space-tight) * 7);
      height: calc(var(--space-tight) * 7);
      border-radius: 50%;
      cursor: pointer;
      transition: transform var(--dur-fast) var(--ease-standard);
      border: calc(var(--space-tight) * 0.5) solid transparent;
    }

.color-swatch.active {
      transform: scale(1.18);
      border-color: var(--ink);
      box-shadow: 0 calc(var(--space-tight) * 0.5) var(--space-snug) rgba(var(--shadow-color), 0.08);
    }

.custom-color-panel {
      background: var(--base);
      border: calc(var(--space-tight) * 0.25) solid var(--line);
      border-radius: var(--radius);
      padding: var(--space-default) calc(var(--space-tight) * 3.5);
      margin-top: calc(var(--space-tight) * 2.5);
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 2.5);
      animation: colorPanelFadeIn var(--dur-base) var(--ease-out);
    }

@keyframes colorPanelFadeIn {
      from { opacity: 0; transform: translateY(calc(var(--space-tight) * -1)); }
      to { opacity: 1; transform: translateY(0); }
    }

.custom-color-preview-row {
      display: flex;
      align-items: center;
      gap: calc(var(--space-tight) * 2.5);
    }

.custom-color-preview-dot {
      width: calc(var(--space-section) * 2);
      height: calc(var(--space-section) * 2);
      border-radius: var(--radius);
      background: var(--expense);
      box-shadow: 0 calc(var(--space-tight) * 0.5) var(--space-snug) rgba(var(--shadow-color), 0.08);
      border: calc(var(--space-tight) * 0.5) solid var(--surface);
      flex-shrink: 0;
      transition: background var(--dur-fast) var(--ease-standard);
    }

.custom-color-hex-box {
      display: flex;
      align-items: center;
      background: var(--surface);
      border: calc(var(--space-tight) * 0.25) solid var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-tight) var(--space-snug);
      font-size: var(--text-caption);
      font-family: monospace;
      font-weight: 700;
      width: calc(var(--space-tight) * 23.75);
    }

.custom-color-hex-box .hex-hash {
      color: var(--ink-3);
      margin-right: calc(var(--space-tight) * 0.5);
    }

.custom-hex-input {
      border: none;
      background: transparent;
      outline: none;
      font-family: monospace;
      font-weight: 700;
      font-size: var(--text-caption);
      color: var(--ink);
      width: 100%;
      text-transform: uppercase;
    }

.custom-color-label {
      font-size: var(--text-label);
      font-weight: 600;
      color: var(--ink-3);
      margin-left: auto;
    }

/* 高度跟同一區的選單一致（note-input 預設的上下內距比選單高，數字會被撐得很空） */
.edit-record-page input.installment-control {
      padding: 0 var(--space-default);
      min-height: calc(var(--space-tight) * 5);
    }

.slider-group {
      display: flex;
      flex-direction: column;
      gap: calc(var(--space-tight) * 0.75);
    }

.slider-label-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-label);
      font-weight: 600;
      color: var(--ink-3);
    }

.color-range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: calc(var(--space-tight) * 2.5);
      border-radius: var(--radius);
      outline: none;
      margin: calc(var(--space-tight) * 0.75) 0;
      cursor: pointer;
    }

.color-range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: calc(var(--space-tight) * 4.5);
      height: calc(var(--space-tight) * 4.5);
      border-radius: 50%;
      background: var(--surface);
      border: calc(var(--space-tight) * 0.5) solid var(--ink);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.08);
      cursor: pointer;
      transition: transform var(--dur-fast) var(--ease-standard);
    }

.color-range-slider::-webkit-slider-thumb:active {
      transform: scale(1.2);
    }

.color-range-slider::-moz-range-thumb {
      width: calc(var(--space-tight) * 4.5);
      height: calc(var(--space-tight) * 4.5);
      border-radius: 50%;
      background: var(--surface);
      border: calc(var(--space-tight) * 0.5) solid var(--ink);
      box-shadow: 0 calc(var(--space-tight) * 0.5) calc(var(--space-tight) * 1.5) rgba(var(--shadow-color), 0.08);
      cursor: pointer;
    }

.hue-slider {
      background: linear-gradient(to right, var(--expense) 0%, var(--warn-soft) 17%, var(--brand) 33%, var(--chart-2) 50%, var(--info) 67%, var(--chart-4) 83%, var(--expense) 100%);
    }

/* 階層 class 必須壓過所有位置 class 的舊視覺屬性。 */
.btn.btn-primary          { background: var(--action); color: var(--surface); }
.btn.btn-primary:active   { background: var(--action-strong); }
.btn.btn-secondary        { background: var(--brand-soft); color: var(--action-strong); border: 1px solid var(--action-strong); }
.btn.btn-secondary:active { background: var(--brand); }
.btn.btn-danger           { background: var(--brand-soft); color: var(--expense); border: 1px solid var(--expense); }
.btn.btn-danger:active    { background: var(--expense-soft); }
.btn:disabled,
.btn.is-disabled          { background: var(--disabled-soft); color: var(--disabled-ink); }

/* ---- 預算進度列：帳戶設定頁（帳戶預算）與分類設定頁（分類預算）共用 ---- */
.card-budget-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  padding: var(--space-snug) var(--space-default);
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.budget-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-snug);
  font-size: var(--text-caption);
  color: var(--ink-3);
}

.budget-label { font-size: var(--text-label); }

/* 三階，跟記帳卡的預算進度條與預算提醒卡同一套門檻：未滿 80% 不變色。
   原本是四階（50%／80%／100% 各一個色），50% 就開始變色等於一半的時間都在示警。 */
.budget-status {
  font-size: var(--text-label);
  font-weight: 700;
  padding: 2px var(--space-snug);
  border-radius: var(--radius);
  background: var(--disabled-soft);
  color: var(--ink-2);
}

.budget-status.warn { background: var(--warn-soft); color: var(--ink); }
.budget-status.over { background: var(--expense-soft); color: var(--expense); }

.budget-progress-bg {
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.budget-progress-bar {
  height: 100%;
  border-radius: var(--radius);
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-standard);
}

.budget-progress-bar.warn { background: var(--warn); }
.budget-progress-bar.over { background: var(--expense); }

/* ---- 來源分解：帳戶餘額、分類預算橫跨個人與雙人／多人帳本時，列出各帳本各貢獻多少 ----
   改成收合式抽屜（原生 <details>，不需要 JS，LINE 內建瀏覽器也支援）：帳戶多、
   又每張卡都攤開三四本帳本時，整頁會長到必須一直滑，而多數時候使用者只想看餘額。 */
.card-breakdown {
  padding: var(--space-snug) var(--space-default);
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-breakdown-static {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}

.breakdown-title {
  font-size: var(--text-label);
  font-weight: 700;
  color: var(--ink-3);
}

/* summary 的預設三角形在各家瀏覽器長得不一樣，關掉改用自己的箭頭。 */
summary.breakdown-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-snug);
  cursor: pointer;
  list-style: none;
}
summary.breakdown-title::-webkit-details-marker { display: none; }

.breakdown-toggle-hint {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  font-weight: 500;
  color: var(--ink-3);
}

.breakdown-toggle-hint::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}

details[open] > summary .breakdown-toggle-hint::after { transform: rotate(-135deg); }

.breakdown-note {
  font-size: var(--text-label);
  color: var(--ink-3);
  line-height: 1.6;
}
.breakdown-note a {
  margin-left: var(--space-tight);
  color: var(--action-strong);
  font-weight: 700;
  text-decoration: underline;
}

.breakdown-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  margin-top: var(--space-snug);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-snug);
  font-size: var(--text-caption);
}

.breakdown-book-name { color: var(--ink-2); }
.breakdown-amount { color: var(--ink); font-weight: 700; }

/* ===== 分步精靈（新增帳戶、存錢計畫、固定收支、借貸共用） ===== */
.acc-ic { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--brand-soft); color: var(--action-strong); }
.acc-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acc-ic.t-bank { background: var(--info-soft); color: var(--info); }
.acc-ic.t-epay { background: var(--disabled-soft); color: var(--ink-2); }
.acc-ic.t-credit { background: var(--warn-soft); color: var(--warn); }
.wiz-steps { display: flex; gap: var(--space-tight); margin-bottom: var(--space-default); }
.wiz-steps i { flex: 1; height: 5px; border-radius: 99px; background: var(--line); }
.wiz-steps i.d { background: var(--c, var(--action)); }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-snug); margin: var(--space-snug) 0; }
.type-tile { display: flex; flex-direction: row; align-items: center; gap: var(--space-default); text-align: left; padding: var(--space-default); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.type-tile:active { background: var(--base); }
.type-tile .acc-ic { margin: 0; width: 40px; height: 40px; flex-shrink: 0; }
.type-tile b { font-size: var(--text-title); }
.type-tile small { display: block; font-size: var(--text-caption); color: var(--ink-3); line-height: 1.4; }
.type-tile.sel { border-color: var(--action); background: var(--brand-soft); }
.acc-ic.t-expense { background: var(--expense-soft); color: var(--expense); }
.type-tile.wide { grid-column: 1 / -1; }
.wiz-label { font-size: var(--text-caption); color: var(--ink-3); margin-bottom: var(--space-snug); }
.wiz-summary { margin-top: var(--space-default); padding: var(--space-snug) var(--space-default); background: var(--brand-soft); color: var(--action-strong); border-radius: var(--radius); font-size: var(--text-body); font-weight: 700; }
.wz-modal[data-step="1"] :is(.wz2, .wz3) { display: none !important; }
.wz-modal[data-step="2"] :is(.wz1, .wz3) { display: none !important; }
.wz-modal[data-step="3"] :is(.wz1, .wz2) { display: none !important; }
.wz-modal[data-step=""] :is(.wz1, .wz-only) { display: none !important; }
.wz-modal .form-label, #goalModal .form-label, #categoryModal .form-label { color: var(--ink); font-weight: 700; margin-bottom: 0; }
.wz-modal .form-group, #goalModal .form-group, #categoryModal .form-group { margin-bottom: var(--space-section); gap: var(--space-snug); }

/* 信用卡分期（#425）：三個控制項（期數、手續費、第一期）同寬、靠右對齊，跟上方的選單欄位一致 */
.edit-record-page .installment-control {
      flex: 0 0 56%;
      width: 56%;
      max-width: 56%;
      min-width: 0;
      margin-top: 0;
      box-sizing: border-box;
    }

.edit-record-page input.installment-control {
      text-align: right;
    }

/* 期數、手續費直接用金額輸入框的外框與字級（.amount-display + .amount-input），數字靠右 */
.edit-record-page .amount-display.installment-control .amount-input {
      text-align: right;
    }

.edit-record-page .date-picker-wrapper input[type="date"] {
      border: 1px solid var(--ink-3);
      border-radius: var(--radius);
      padding: var(--space-snug) var(--space-default);
      background: var(--base);
    }

.edit-record-page .date-picker-wrapper input[type="date"]:focus {
      border-color: var(--action);
    }