:root{
    --ink:#1E2A33;
    --ink-soft:#4A5A62;
    --paper:#EEF0E6;
    --card:#FBFBF6;
    --card-line:#D9DCC9;
    --brass:#8A6A28;         /* 深化以提高文字對比度，且此後只代表「跟 Bot 雲端同步」 */
    --brass-bg:#9C7A34;
    --brass-soft:#C9A85C;
    --credit:#2F6E52;
    --credit-bg:#E4EFE7;
    --debt:#A63D3D;
    --debt-bg:#F5E6E2;
    --header-bg:#1B2731;
    --shadow: 0 1px 0 rgba(30,42,51,0.06), 0 8px 24px rgba(30,42,51,0.06);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --bottomnav-h: 62px;
    --focus-ring: 0 0 0 3px rgba(154,116,52,0.35);
    /* 🆕 [下拉選單深色模式] 讓瀏覽器原生繪製的表單控制項（select 選單展開
       後的選項清單、date/time picker、捲軸等）套用正確的亮/暗配色。少了
       這個屬性，瀏覽器只會依系統偏好（prefers-color-scheme）決定這些原生
       彈出視窗要畫成亮還是暗，跟這個網站自己用 data-theme 手動切換的主題
       無關，兩者不同步時就會出現「選單本體（closed 狀態）已經是深色，但
       點開後的選項清單本體卻還是預設亮色」的不一致——「建議轉帳／彼此累計
       欠款總額」標題那顆 <select>（.t1-select）跟換算幣別選單最明顯，但
       實際上影響全站所有 select。 */
    color-scheme: light;

    /* 🆕 暗色模式支援：以下這組變數原本散落在各處寫死成 #fff／固定淺色 hex，
       現在統一收斂成語意化變數，讓 :root[data-theme="dark"] 只要覆寫這裡
       就能讓整個頁面（表單欄位、卡片、徽章、彈窗遮罩...）跟著換膚，不用
       在每個元件各自判斷目前是什麼主題。 */
    --surface:#fff;               /* 輸入框／卡片內的「白色」表面（chip、modal-list-item、member-tag...） */
    --surface-hover:#F7F6F0;      /* 可互動列表項目的 hover 背景（member-detail-head） */
    --chip-bg:#EDEAD9;            /* 徽章/標籤類背景（receipt-type-badge、code.inline、幣別標籤...） */
    --chip-bg-hover:#E0DCC5;
    --fee-bg:#FBF7EE;             /* 帳單辨識「雜費」項目列背景 */
    --fee-badge-bg:#F0D9A0;
    --fee-badge-bg-hover:#E8CC85;
    --fee-badge-text:#5C4415;
    --zero-bg:#EEE;               /* 淨額為 0（已結清）時的中性徽章背景 */
    --brass-tint:#FBF4E4;         /* 勾選中／hover 時的暖色高亮底（chip、claim-chip、modal-list-item） */
    --scrim:rgba(20,26,30,0.55);  /* Modal 遮罩層 */
    --paper-stripe:rgba(156,122,52,0.035); /* 背景那道很淡的直紋線 */

    /* 這兩個是「固定深色」用途：不管淺色/暗色模式，都要維持深底＋淺字的按鈕
       （主要按鈕、作用中分頁、toast），所以刻意不放進 dark 覆寫區塊，兩個
       主題共用同一組值，避免 --ink 為了適應暗色模式整個翻轉成淺色後，
       這些「本來就設計成深色底」的元件反而失去對比度。 */
    --emphasis:#1E2A33;
    --debt-solid:#B94A3C;         /* 目前唯一用途：確認刪除 Modal 的紅色按鈕背景（白字疊在上面） */
  }

  /* 🆕 暗色模式調色盤。切換方式見頁尾主程式的 setTheme()／toggleTheme() 函式，
     並在頁面最前面有一段行內小型腳本，提早依 localStorage／系統偏好設定
     好 data-theme，避免第一次畫面出現「先亮後暗」的閃爍。 */
  :root[data-theme="dark"]{
    --ink:#ECEDE8;
    --ink-soft:#9BA6A1;
    --paper:#12181C;
    --card:#1B2226;
    --card-line:#323C41;
    --brass:#D9B36C;
    --brass-bg:#B0863C;
    --brass-soft:#E8C77E;
    --credit:#6FCB94;
    --credit-bg:#173428;
    --debt:#E38B8B;
    --debt-bg:#3A2020;
    --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 10px 26px rgba(0,0,0,0.5);
    --focus-ring: 0 0 0 3px rgba(217,179,108,0.4);
    color-scheme: dark; /* 🆕 讓深色模式下的原生 select 選項清單等控制項跟著換成深色 */

    --surface:#20282D;
    --surface-hover:#273136;
    --chip-bg:#2A332F;
    --chip-bg-hover:#333E39;
    --fee-bg:#2B2417;
    --fee-badge-bg:#4A3A1B;
    --fee-badge-bg-hover:#5C4823;
    --fee-badge-text:#E8C77E;
    --zero-bg:#2A2F33;
    --brass-tint:#3A2E15;
    --scrim:rgba(0,0,0,0.65);
    --paper-stripe:rgba(217,179,108,0.05);
    /* --header-bg／--emphasis／--debt-solid 刻意不在這裡覆寫：
       頁首跟主要按鈕本來就設計成固定深色，暗色模式下維持原樣反而更一致，
       不需要額外規則。 */
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:
      repeating-linear-gradient(0deg, var(--paper-stripe) 0px, var(--paper-stripe) 1px, transparent 1px, transparent 34px),
      var(--paper);
    color:var(--ink);
    font-family:'Noto Sans TC', system-ui, sans-serif;
    min-height:100vh;
    padding-bottom: calc(var(--bottomnav-h) + var(--safe-b) + 18px);
  }
  .wrap{max-width:880px; margin:0 auto; padding:0 14px;}
  a{color:inherit;}

  /* ---------- Focus visibility (a11y) ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--brass); outline-offset:2px; border-radius:4px;
  }

  /* ---------- Sticky app header ---------- */
  .app-header{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(155deg,#22303A,#1B2731 60%,#182229);
    color:#F3EEDD;
    padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.18);
  }
  .app-header-inner{max-width:880px; margin:0 auto;}
  .header-row1{display:flex; align-items:center; gap:10px;}
  .header-row1 .brand{
    font-family:'Noto Serif TC',serif; font-weight:900; font-size:16px;
    color:var(--brass-soft); white-space:nowrap; letter-spacing:.02em;
  }
  #tripName{
    flex:1; min-width:0;
    background:transparent; border:none; color:#F3EEDD;
    font-family:'Noto Serif TC',serif; font-weight:700; font-size:16px;
    padding:6px 8px; border-radius:6px;
  }
  #tripName:focus-visible{outline:2px solid var(--brass-soft); background:rgba(255,255,255,0.08);}
  #tripName::placeholder{color:#8B978E;}
  .header-currency{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22);
    color:#F3EEDD; padding:6px 8px; border-radius:8px; font-size:12.5px;
    font-family:'IBM Plex Mono',monospace; flex-shrink:0;
    white-space:nowrap; display:inline-flex; align-items:center;
  }
  /* 🆕 這行原本只設定文字色，假設展開清單背景永遠是瀏覽器預設的淺色；
     現在全站 select option 統一補上背景色（見下方 select option 規則），
     背景會跟著 --card 變數走，深色模式下會變成深色——這裡的下拉選單卻是
     頁首那顆「固定深色底、不隨主題切換」的特例（見上面 .header-currency
     本身的設計說明），所以背景也要一併鎖死成淺色，避免深色模式下背景跟
     文字都變深色、選單本身反而看不清楚。 */
  .header-currency option{background-color:#FBFBF6; color:#1E2A33;}
  /* 🆕 深色/淺色模式切換鈕：跟旁邊的幣別選單用一樣的視覺語言（半透明白底、淡邊框），
     因為頁首本身固定深色，不隨主題切換，這裡沿用同一套 header 專用配色即可，
     不需要另外引用 --surface 之類會隨主題翻轉的變數。 */
  .theme-toggle-btn{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22);
    color:#F3EEDD; width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; line-height:1; cursor:pointer; flex-shrink:0; padding:0;
  }
  .theme-toggle-btn:hover{background:rgba(255,255,255,0.16);}
  /* 🆕 [狀態 pill 精簡] 容器本身預設也先隱藏（避免 JS 尚未執行完成前，
     margin-top 那段留白先閃現出來）；真正的顯示/隱藏交給
     js/localFile.js 的 syncStatusPillsVisibility() 統一控制——它會在
     兩顆 pill 都被判定為「不需要顯示」時，連容器一起收掉，不會只是
     藏起裡面的文字、卻留著一段空白版位。 */
  .status-pills{display:none; gap:6px; flex-wrap:wrap; margin-top:8px;}
  .status-pills .pill {display: none;}

  /* 🆕 [分享連結] 分享連結模式下的畫面收斂：
     - data-owner-only：只有擁有者（用真正的 SPLITBILL_API_KEY 連線）才看得到的東西，
       例如「連線 Bot／檔案」等技術性設定、帳單掃描（伺服器端本來就只准擁有者用）。
       分享連結的朋友完全看不到、也點不到這些，畫面單純很多，不會誤觸也不會困惑。
     - data-write-only：分享連結為「唯讀」時，這些會被隱藏——新增/編輯/刪除/儲存
       等寫入類按鈕與表單，唯讀訪客只能看不能改。
     這裡只負責畫面收斂（UX），真正的存取控制永遠由伺服器端把關（見 webui/server.js
     的 authorizeTripAccess()），就算有人繞過前端硬送 API 請求，伺服器一樣會擋下來。 */
  body.share-mode [data-owner-only]{display:none !important;}
  body.share-readonly [data-write-only]{display:none !important;}




  /* 分享連結失效時的全頁錯誤畫面：刻意跟一般「尚未連線」畫面分開設計，
     用字更口語、不提任何技術名詞（金鑰／伺服器／行程 ID...），
     因為看到這個畫面的通常是不熟悉技術的朋友。 */
  .share-error-screen{
    max-width:420px; margin:18vh auto 0; text-align:center; padding:0 20px;
  }
  .share-error-screen .ic{font-size:44px; margin-bottom:14px;}
  .share-error-screen h1{font-family:'Noto Serif TC',serif; font-size:19px; margin:0 0 10px;}
  .share-error-screen p{color:var(--ink-soft); font-size:14px; line-height:1.7; margin:0;}

  /* 無權限阻擋頁 */
  #noAccessScreen{
    display:none; position:fixed; inset:0; z-index:9999;
    background:var(--bg); align-items:center; justify-content:center;
  }
  #noAccessScreen.visible{ display:flex; }
  .no-access-card{
    text-align:center; padding:48px 36px 44px; max-width:360px; width:90%;
    background:var(--card); border:1px solid var(--card-line);
    border-radius:4px;
  }
  .no-access-lock{
    width:48px; height:48px; margin:0 auto 24px;
    color:var(--brass);
  }
  .no-access-card h1{
    font-family:'Noto Serif TC',serif; font-size:20px; font-weight:700;
    color:var(--ink); margin:0 0 12px; letter-spacing:.01em;
  }
  .no-access-card p{
    color:var(--ink-soft); font-size:14px; line-height:1.75; margin:0;
  }
  .no-access-divider{
    width:32px; height:2px; background:var(--brass-soft);
    margin:20px auto;
  }
  .pill{
    font-size:11px; padding:4px 10px; border-radius:20px;
    display:inline-flex; align-items:center; gap:5px;
    font-family:'IBM Plex Mono',monospace; cursor:pointer; border:none;
    background:rgba(255,255,255,0.08); color:#C7CDC2;
  }
  .pill .dot{width:6px; height:6px; border-radius:50%; background:#7C8A80; flex-shrink:0;}
  .pill.on{background:rgba(47,110,82,0.28); color:#B9EAC9;}
  .pill.on .dot{background:#4FCB7E;}
  .pill.warn{background:rgba(201,138,45,0.28); color:#F0D19B;}
  .pill.warn .dot{background:#E2A23F;}

  /* ---------- Top tabs (desktop) ---------- */
  .top-nav{display:none; gap:2px; margin-top:22px; border-bottom:2px solid var(--card-line);}
  .top-nav .nav-btn{
    font-family:'Noto Serif TC',serif; font-weight:700; font-size:14.5px;
    background:none; border:none; cursor:pointer;
    padding:10px 18px 12px; color:var(--ink-soft);
    border-bottom:3px solid transparent; margin-bottom:-2px;
    transition:color .15s; display:flex; align-items:center; gap:7px;
  }
  .top-nav .nav-btn.active{color:var(--ink); border-bottom-color:var(--brass-bg);}
  .top-nav .nav-btn:hover{color:var(--ink);}

  /* ---------- Bottom nav (mobile) ---------- */
  .bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; background:var(--card);
    border-top:1px solid var(--card-line);
    padding-bottom:var(--safe-b);
    box-shadow:0 -4px 16px rgba(30,42,51,0.08);
  }
  .bottom-nav .nav-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; background:none; border:none; cursor:pointer;
    padding:9px 2px 7px; color:var(--ink-soft); font-size:10.5px;
    font-family:'Noto Sans TC',sans-serif; font-weight:500;
    min-height:var(--bottomnav-h);
  }
  .bottom-nav .nav-btn .ic{font-size:19px; line-height:1;}
  .bottom-nav .nav-btn.active{color:var(--brass);}
  .bottom-nav .nav-btn.has-dot{position:relative;}
  .bottom-nav .nav-btn.has-dot .ic::after{
    content:""; position:absolute; top:6px; right:calc(50% - 16px);
    width:8px; height:8px; border-radius:50%; background:var(--debt); border:2px solid var(--card);
  }

  main{padding-top:16px;}
  .panel{display:none; animation:fade .18s ease;}
  .panel.active{display:block;}
  .subpanel{display:none; animation:fade .18s ease;}
  .subpanel.active{display:block;}
  @keyframes fade{from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;}}

  .settings-subnav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
  .subtab-btn{
    font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:12.5px;
    background:var(--card); border:1px solid var(--card-line); border-radius:20px;
    padding:8px 14px; cursor:pointer; color:var(--ink-soft);
  }
  .subtab-btn.active{background:var(--emphasis); color:#F3EEDD; border-color:var(--emphasis);}

  h2.section-title{
    font-family:'Noto Serif TC',serif; font-weight:700; font-size:17px;
    margin:0 0 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  h2.section-title .n{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:13px;}

  .card{
    background:var(--card); border:1px solid var(--card-line); border-radius:12px;
    padding:16px 16px; box-shadow:var(--shadow); margin-bottom:14px;
  }

  /* ---------- Forms ---------- */
  .field{margin-bottom:12px;}
  .field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px; font-weight:500;}
  /* 🆕 [成員膠囊重新設計] 欄位標題列：左邊問題文字、右邊「已選 N 人」計數
     與全選／清除快捷連結，兩端對齊。只用在有 chip-select 的欄位（誰代墊／
     誰分攤），沒有這個結構的一般欄位不受影響。 */
  .field-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px;
  }
  .field-head label{margin-bottom:0;}
  .field-head .field-tools{display:flex; align-items:baseline; gap:10px; flex-shrink:0;}
  .field-head .field-meta{font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; white-space:nowrap;}
  .field-head .link-btn{
    background:none; border:none; padding:0; cursor:pointer;
    font-size:11.5px; color:var(--brass); font-weight:700; font-family:inherit;
  }
  .field-head .link-btn:hover{ text-decoration:underline; }
  .row{display:flex; gap:12px; flex-wrap:wrap;}
  .row > .field{flex:1; min-width:130px;}
  input[type=text], input[type=number], input[type=password], select, textarea{
    width:100%; border:1px solid var(--card-line); background:var(--surface);
    padding:11px 12px; border-radius:8px; font-size:15px;
    font-family:'Noto Sans TC',sans-serif; color:var(--ink);
  }
  /* 🆕 [下拉選單深色模式] color-scheme 屬性（見 :root 區塊）在部分瀏覽器
     對 <select> 展開清單的支援不完整（尤其某些系統上的 Firefox），這裡
     直接對 <option> 指定背景/文字色當作更可靠的雙重保險：主流瀏覽器
     （Chrome／Edge／Firefox）都會確實套用 <option> 自己的 background-color
     與 color，不像展開清單的其他視覺樣式那樣受限於原生元件的繪製方式。
     .header-currency option 那行是更早之前針對「頁首固定深色底」的特例
     （不隨主題切換，永遠要用深色文字），優先度較高，不受這裡影響。 */
  select option{ background-color:var(--card); color:var(--ink); }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--brass-soft); outline-offset:1px;}
  textarea{font-family:'IBM Plex Mono',monospace; font-size:12.5px; resize:vertical;}
  .num{font-family:'IBM Plex Mono',monospace;}
  .input-with-toggle{position:relative;}
  .input-with-toggle input{padding-right:56px;}
  .input-toggle-btn{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--ink-soft); font-size:11.5px;
    padding:8px 8px; cursor:pointer; font-family:'IBM Plex Mono',monospace;
  }

  /* ---------- Buttons: 語意化色彩 ----------
     ink    = 這個畫面「唯一」的主要動作
     brass  = 只用在跟 Bot 雲端同步有關的動作（讀取/載入/存回 Bot）
     ghost  = 次要、可逆、輔助性操作
     danger = 破壞性操作（刪除）
  */
  .btn{
    font-family:'Noto Sans TC',sans-serif; font-weight:700; font-size:14px;
    border:none; border-radius:9px; padding:11px 18px; cursor:pointer;
    transition:transform .1s, background .15s, opacity .15s; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
  }
  .btn:active{transform:scale(.97);}
  .btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
  .btn-primary{background:var(--emphasis); color:#F3EEDD;}
  .btn-primary:hover{background:#0F171C;}
  .btn-brass{background:var(--brass-bg); color:#fff;}
  .btn-brass:hover{background:var(--brass);}
  .btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--card-line);}
  .btn-ghost:hover{border-color:var(--ink-soft); color:var(--ink);}
  .btn-danger{background:transparent; color:var(--debt); border:1px solid var(--debt-bg);}
  .btn-danger:hover{background:var(--debt-bg);}
  .btn-sm{padding:7px 12px; font-size:12.5px; min-height:34px; border-radius:7px;}
  .btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
  .btn-block{width:100%;}

  .spinner{
    width:14px; height:14px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
    animation:spin .7s linear infinite; flex-shrink:0;
  }
  .btn-ghost .spinner, .btn-danger .spinner{border-color:var(--card-line); border-top-color:var(--ink);}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ════════════════════════════════════════════════════════════════
     🆕 [成員膠囊重新設計] 誰代墊／誰分攤：完整重新設計，取代舊版一路
     小補的 chip 實作。設計重點：
     1. .chip-select 用 grid + minmax(min(100%,230px), 1fr)：手機螢幕
        寬度不足 230px 時自動退化成單欄撐滿整行，平板/桌機隨寬度自動
        增加欄數，且同一個 grid 裡每一欄永遠等寬。
     2. .chip 本身也是一個 2 欄 grid：左邊（可點擊的勾選+名字）彈性寬、
        右邊金額欄位固定 96px。因為外層欄寬已經統一、內層金額欄位又是
        固定寬度放在最右側，金額輸入框在「所有」chip 上的水平位置必然
        對齊，跟成員名字長短完全無關，不需要任何 JS 或額外計算。
     3. 金額欄位不再用 display/visibility 切換顯示——未勾選時用
        disabled + 虛線＋淡化樣式呈現「幽靈槽位」，勾選後才變成一般
        實線輸入框；因為欄位本身的存在與寬度全程不變，不會有版面跳動。
     4. 原生 checkbox 保留在 DOM 裡（供鍵盤 Tab／螢幕報讀器使用），只是
        視覺上隱藏，改用旁邊的 .chip-box 自訂方塊呈現勾選狀態，儲值/
        勾選行為仍是原生 checkbox 語意，無障礙支援比純 CSS 模擬更完整。
     ════════════════════════════════════════════════════════════════ */
  .chip-select{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap:8px;
  }
  .chip{
    position:relative;
    display:grid; grid-template-columns:minmax(0,1fr) 96px; align-items:center;
    min-height:46px; padding-right:7px;
    border:1.5px solid var(--card-line); border-radius:10px; background:var(--surface);
    transition:border-color .15s, background .15s;
  }
  .chip:hover{border-color:var(--brass-soft);}
  .chip.checked{border-color:var(--brass-bg); background:var(--brass-tint);}
  /* 🆕 [手動標記視覺化] 使用者手動輸入過金額的 chip：邊框加一圈內陰影強調＋
     右上角小徽章（鉛筆符號），跟「系統自動平分」的 chip 區分開來，一眼就
     能看出哪筆金額不會被自動覆寫。取消勾選、按「重新平均」等操作會清空
     手動集合，這個標記也會跟著消失（見 expenseForm.js 的 syncManualMarks()）。 */
  .chip.manual{
    border-color:var(--brass-bg);
    box-shadow:inset 0 0 0 1px var(--brass-bg);
  }
  .chip.manual .amt{
    border-color:var(--brass-bg);
    background:var(--brass-tint);
  }
  .chip.manual::after{
    content:"✎";
    position:absolute; top:-6px; right:-6px;
    width:16px; height:16px; border-radius:50%;
    background:var(--brass-bg); color:#fff;
    font-size:9px; line-height:16px; text-align:center;
    box-shadow:0 1px 3px rgba(30,42,51,0.3);
    pointer-events:none;
  }
  /* 可點擊區：整個左半部（勾選方塊＋名字）都是 label，觸控目標 ≥ 44px 高 */
  .chip .chip-main{
    display:flex; align-items:center; gap:10px; min-width:0;
    align-self:stretch; padding:0 6px 0 12px; cursor:pointer; user-select:none;
  }
  /* 原生 checkbox 視覺隱藏但保留互動（鍵盤/讀屏），改由 .chip-box 呈現勾選狀態 */
  .chip-checkbox{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;}
  .chip-box{
    width:18px; height:18px; flex-shrink:0; position:relative; border-radius:5px;
    border:1.5px solid var(--ink-soft); background:var(--surface);
    transition:background .15s, border-color .15s, box-shadow .15s;
  }
  .chip-box::after{
    content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
    border:solid #fff; border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0); transition:transform .12s ease-out;
  }
  .chip-checkbox:checked ~ .chip-box{background:var(--brass-bg); border-color:var(--brass-bg);}
  .chip-checkbox:checked ~ .chip-box::after{transform:rotate(45deg) scale(1);}
  .chip-checkbox:focus-visible ~ .chip-box{box-shadow:var(--focus-ring);}
  .chip-label{
    flex:1; min-width:0; font-size:13.5px; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* 金額欄位：跟全站 input 一致的實線框＋圓角；未勾選時變成「幽靈槽位」
     （虛線、淡化、disabled），寬度全程不變，不會跳動、左右永遠對齊。 */
  .chip .amt{
    width:100%; height:32px; margin:0;
    border:1px solid var(--card-line); border-radius:7px; background:var(--card);
    font-family:'IBM Plex Mono',monospace; font-size:16px; /* ≥16px 避免 iOS 聚焦時自動縮放頁面 */
    text-align:right; padding:0 8px; color:var(--ink);
    transition:opacity .15s, border-color .15s, background .15s;
  }
  .chip .amt::placeholder{color:var(--ink-soft); opacity:.75;}
  .chip .amt:focus{outline:2px solid var(--brass-soft); outline-offset:1px;}
  .chip.checked .amt{border-color:var(--brass-soft);}
  .chip .amt:disabled{opacity:.38; border-style:dashed; background:transparent; pointer-events:none;}
  .chip .amt.invalid{border-color:var(--debt); background:var(--debt-bg);}
  .chip .amt::-webkit-outer-spin-button, .chip .amt::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  .chip .amt[type=number]{-moz-appearance:textfield; appearance:textfield;}
  @media (min-width:860px){
    .chip{min-height:44px;}
    .chip .amt{font-size:13.5px; height:30px;}
  }

  /* ---------- 帳單照片辨識 ---------- */
  /* 🆕 [帳單辨識區塊重新設計] 整條可點擊橫幅（icon + 標題 + 說明 + 箭頭），
     取代太小不明顯的純圖示按鈕，也取代原本佔版面很大的置中方框；
     .receipt-upload 是更早之前的大框樣式，不再由 HTML 使用，保留著以防
     其他地方仍引用，不影響行為。 */
  .receipt-upload{
    display: block; /* 加入這行修正破圖問題 */
    border:2px dashed var(--card-line); border-radius:12px; padding:22px 16px;
    text-align:center; cursor:pointer; background:var(--surface);
  }
  .receipt-upload:hover{border-color:var(--brass-soft);}
  .receipt-upload .ic{font-size:28px; margin-bottom:6px;}
  .receipt-upload input[type=file]{display:none;}
  .receipt-scan-trigger{
    display:block; width:100%; cursor:pointer; text-align:left;
    border:1.5px dashed var(--brass-soft); border-radius:12px;
    background:var(--surface); padding:14px 16px;
    transition:border-color .15s, background .15s, transform .1s;
  }
  .receipt-scan-trigger:hover{border-color:var(--brass-bg); background:var(--brass-tint);}
  .receipt-scan-trigger:active{transform:scale(.99);}
  .receipt-scan-trigger:focus-within{outline:2px solid var(--brass); outline-offset:2px;}
  .receipt-scan-trigger input[type=file]{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
  .receipt-scan-trigger-body{
    display:flex; align-items:center; gap:14px;
  }
  .receipt-scan-ic{
    width:46px; height:46px; flex-shrink:0; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; background:var(--brass-tint);
  }
  .receipt-scan-txt{flex:1; min-width:0;}
  .receipt-scan-txt .title{
    display:block; font-weight:700; font-size:15px; color:var(--ink);
  }
  .receipt-scan-txt .sub{
    display:block; font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.55;
  }
  .receipt-scan-arrow{
    font-size:19px; color:var(--brass); flex-shrink:0;
    font-family:'IBM Plex Mono',monospace;
  }
  /* 🆕 拖曳帳單照片到「支出記帳」分頁時，短暫蓋在整個畫面上的提示遮罩。
     pointer-events:none：遮罩本身不吃滑鼠事件，drop 等事件交給底下真正
     掛了監聽器的 #panel-expenses 接收（見 js/receiptScan.js）。 */
  .receipt-drop-overlay{
    position:fixed; inset:0; z-index:250;
    background:var(--scrim);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .receipt-drop-overlay-inner{
    font-family:'Noto Serif TC',serif; font-weight:700; font-size:20px;
    color:#fff; background:rgba(139,106,40,0.92);
    padding:20px 32px; border-radius:16px; border:2px dashed rgba(255,255,255,0.6);
    text-align:center;
  }
  .receipt-preview-row{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px;}
  .receipt-thumb{
    width:88px; height:88px; object-fit:cover; border-radius:10px;
    border:1px solid var(--card-line); flex-shrink:0;
  }

  /* 🆕 [多人協作] 「有人正在辨識帳單中」提示列 */
  .receipt-session-banner{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    font-size:13.5px;
  }

  .receipt-item-row{
    border:1.5px solid var(--card-line); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--surface);
  }
  .receipt-item-row.fee{background:var(--fee-bg); border-color:var(--brass-soft);}
  .receipt-item-row.unclaimed{border-color:var(--debt);}
  .receipt-item-head{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
  .receipt-item-head input[type=text]{flex:1; min-width:100px; font-weight:700; font-size:14px; border:none; background:transparent; padding:2px;}
  .receipt-item-head input[type=text]:focus-visible{outline:2px solid var(--brass-soft); border-radius:4px;}
  .receipt-item-head .amt-input{width:90px; flex-shrink:0;}
  .receipt-type-badge{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:3px 7px; border-radius:5px;
    background:var(--chip-bg); color:var(--ink-soft); flex-shrink:0;
    border:none; cursor:pointer;
  }
  .receipt-type-badge:hover{background:var(--chip-bg-hover);}
  .receipt-type-badge.fee{background:var(--fee-badge-bg); color:var(--fee-badge-text);}
  .receipt-type-badge.fee:hover{background:var(--fee-badge-bg-hover);}
  .receipt-claim-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .claim-chip{
    font-size:12.5px; padding:6px 11px; border-radius:10px; cursor:pointer;
    border:1.5px solid var(--card-line); background:var(--surface); color:var(--ink-soft);
    transition:border-color .15s, background .15s, color .15s;
  }
  /* 🔧 Bug fix：版面跳動——原本 .on 狀態會把 font-weight 從一般切到 700，
     但粗體字元比一般字元寬，勾選瞬間 chip 文字寬度跟著變寬，跟 .chip 金額
     欄位是同一種問題（會讓整排 claim-chip 重新換行、跳動）。這裡拿掉
     font-weight 的切換，改用不影響文字排版寬度的 text-shadow 疊出「加粗」
     的視覺效果，讓選取狀態一樣看起來更醒目，但文字本身的量測寬度全程
     不變，不會再有跳動問題。 */
  .claim-chip.on{
    border-color:var(--brass-bg); background:var(--brass-tint); color:var(--ink);
    text-shadow:0.3px 0 currentColor, -0.3px 0 currentColor;
  }
  .claim-chip.shared{border-color:var(--credit); }
  .claim-chip.shared.on{background:var(--credit-bg); border-color:var(--credit); color:var(--credit);}
  .receipt-summary{
    background:var(--card); border:1px dashed var(--card-line); border-radius:10px;
    padding:12px 14px; margin:14px 0; font-size:13px;
  }
  .receipt-summary-row{display:flex; justify-content:space-between; padding:4px 0; font-family:'IBM Plex Mono',monospace;}
  .receipt-summary-row.total{border-top:1px dashed var(--card-line); margin-top:4px; padding-top:8px; font-weight:700; font-size:14px;}

  /* ---------- Toast system (統一取代原本分散的 msg 區塊) ---------- */
  #toastStack{
    position:fixed; left:14px; right:14px; z-index:200;
    bottom:calc(var(--bottomnav-h) + var(--safe-b) + 12px);
    display:flex; flex-direction:column; gap:8px; align-items:center;
    pointer-events:none;
  }
  .toast{
    pointer-events:auto;
    max-width:480px; width:100%;
    background:var(--emphasis); color:#F3EEDD;
    border-radius:10px; padding:12px 14px;
    display:flex; align-items:center; gap:10px;
    font-size:13.5px; line-height:1.5;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
    animation:toast-in .18s ease;
  }
  .toast .ic{font-size:16px; flex-shrink:0;}
  .toast .msg-text{flex:1;}
  .toast.success{background:#1F3A2C;}
  .toast.error{background:#3E2222;}
  .toast .undo-btn{
    background:rgba(255,255,255,0.12); border:none; color:#F3EEDD;
    font-weight:700; font-size:12.5px; padding:6px 11px; border-radius:7px;
    cursor:pointer; flex-shrink:0;
  }
  .toast .undo-btn:hover{background:rgba(255,255,255,0.22);}
  .toast.closing{animation:toast-out .18s ease forwards;}
  @keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  @keyframes toast-out{to{opacity:0; transform:translateY(8px);}}
  @media (min-width:860px){
    #toastStack{left:auto; right:20px; bottom:20px; align-items:flex-end;}
  }

  /* ---------- Modal system ---------- */
  .modal-overlay{
    position:fixed; inset:0; z-index:300; background:var(--scrim);
    display:flex; align-items:flex-end; justify-content:center;
    padding:0; animation:overlay-in .15s ease;
  }
  @keyframes overlay-in{from{opacity:0;} to{opacity:1;}}
  .modal-box{
    background:var(--card); width:100%; max-width:460px;
    border-radius:16px 16px 0 0; padding:22px 20px calc(20px + var(--safe-b));
    box-shadow:0 -8px 30px rgba(0,0,0,0.3);
    animation:modal-in .2s ease;
    max-height:82vh; overflow-y:auto;
  }
  @keyframes modal-in{from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;}}
  .modal-title{font-family:'Noto Serif TC',serif; font-weight:700; font-size:17px; margin:0 0 10px;}
  .modal-body{font-size:14px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px;}
  .modal-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
  .modal-list{display:flex; flex-direction:column; gap:8px; margin-bottom:6px;}
  .modal-list-item{
    text-align:left; width:100%; background:var(--surface); border:1.5px solid var(--card-line);
    border-radius:10px; padding:12px 14px; cursor:pointer; font-family:inherit; font-size:14px; color:var(--ink);
  }
  .modal-list-item:hover{border-color:var(--brass-bg); background:#FBF4E4;}
  .modal-list-item .mli-title{font-weight:700;}
  .modal-list-item .mli-sub{font-size:12px; color:var(--ink-soft); margin-top:3px; font-family:'IBM Plex Mono',monospace;}
  @media (min-width:640px){
    .modal-overlay{align-items:center;}
    .modal-box{border-radius:16px;}
  }

  .msg{font-size:13px; padding:10px 12px; border-radius:8px; margin:10px 0; display:none; line-height:1.5;}
  .msg.show{display:block;}
  .msg.err{background:var(--debt-bg); color:var(--debt);}
  .msg.ok{background:var(--credit-bg); color:var(--credit);}

  /* ---------- Lists / ledger rows ---------- */
  .ledger-row{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:13px 0; border-bottom:1px dashed var(--card-line); gap:12px;
  }
  .ledger-row:last-child{border-bottom:none;}
  .ledger-main{flex:1; min-width:0;}
  .ledger-title{font-weight:700; font-size:14.5px;}
  .ledger-sub{font-size:12.5px; color:var(--ink-soft); margin-top:3px; line-height:1.65;}
  .ledger-amt{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:15px; white-space:nowrap;}
  /* 🆕 [時間資訊] 支出／轉帳明細列的時間戳記：比一般說明文字更淡一階，
     用等寬字體呼應介面其他數字/代碼類文字（金額、幣別代碼）的視覺語言，
     讓它讀起來像「後設資訊」而不是內容本身。 */
  .ledger-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--ink-soft);
    opacity:.85;
  }
  .ledger-actions{display:flex; gap:6px; margin-top:9px;}

  /* ════════════════════════════════════════════════════════════════
     🆕 [支出／轉帳明細重新設計] 完整重新設計版面：搜尋工具列 + 依日期
     分組的「日期徽章」標頭 + 收合式條目列，取代先前逐次小補的版本。
     設計重點：
     1. 工具列（.ledger-toolbar）用跟全站 input-with-toggle 一致的
        「圖示內嵌輸入框」語彙，搜尋框內嵌放大鏡與清除按鈕；成員 chip
        改成可橫向捲動的單行列，避免成員一多把工具列撐得過高。
     2. 日期標頭改成醒目的 brass 底色圓角膠囊，取代先前「文字加粗＋
        底線」的做法——那個做法在文字量小時視覺權重太低，容易被底下
        條目蓋過去；膠囊徽章讓眼睛能快速掃到「這是一個新日期分組」。
     3. 條目列改成「時間徽章 + 標題/預覽摘要 + 金額 + 展開箭頭」的
        橫向排列，收合狀態下也能看到「幾人代墊/分攤」或備註預覽，
        不用展開就能大致判斷這是哪一筆；展開箭頭有旋轉動畫。
     ════════════════════════════════════════════════════════════════ */

  /* --- 搜尋／篩選工具列 --- */
  .ledger-toolbar{
    background:var(--chip-bg); border-radius:10px;
    padding:10px 12px; margin-bottom:12px;
  }
  .ledger-search-wrap{ position:relative; }
  .ledger-search-wrap::before{
    content:"";
    position:absolute; left:10px; top:50%; transform:translateY(-50%);
    width:14px; height:14px;
    background-color:var(--ink-soft);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    opacity:.6; pointer-events:none;
  }
  input.ledger-search{
    width:100%; padding:9px 34px 9px 30px; font-size:13.5px;
    background:var(--surface);
  }
  .ledger-search-clear{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:26px; height:26px; border-radius:50%; border:none; padding:0;
    background:transparent; color:var(--ink-soft); font-size:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .ledger-search-clear:hover{ background:var(--chip-bg-hover); color:var(--ink); }
  .ledger-toolbar-chips{
    display:flex; gap:6px; overflow-x:auto; margin-top:8px;
    padding-bottom:2px; -webkit-overflow-scrolling:touch;
  }
  .ledger-toolbar-chips .claim-chip{ flex-shrink:0; }
  .ledger-toolbar-summary{
    margin-top:8px; padding-top:8px; border-top:1px dashed var(--card-line);
    font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;
  }

  /* --- 日期分組標頭：brass 底色圓角徽章，取代先前純文字樣式 --- */
  .ledger-day{ margin-bottom:2px; }
  .ledger-day-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin:18px 0 8px;
  }
  .ledger-day:first-child .ledger-day-head{ margin-top:2px; }
  .ledger-day-badge{
    display:inline-flex; align-items:center;
    font-family:'Noto Serif TC',serif; font-weight:700; font-size:12.5px;
    color:#fff; background:var(--brass-bg);
    padding:4px 13px; border-radius:20px; letter-spacing:.02em;
  }
  .ledger-day-subtotal{
    font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11.5px;
    color:var(--ink-soft); background:var(--chip-bg);
    padding:4px 10px; border-radius:20px; white-space:nowrap;
  }

  /* --- 條目列：時間徽章 + 主要內容 + 金額 + 展開箭頭 --- */
  .ledger-entry{ border-bottom:1px dashed var(--card-line); }
  .ledger-entry:last-child{ border-bottom:none; }
  .ledger-entry-row{
    display:flex; align-items:center; gap:10px;
    padding:11px 2px; cursor:pointer; user-select:none;
    background:none; border:none; width:100%; text-align:left; font:inherit; color:inherit;
  }
  .ledger-entry-time{
    flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    color:var(--ink-soft); background:var(--chip-bg);
    padding:3px 7px; border-radius:6px; white-space:nowrap;
  }
  .ledger-entry-main{ flex:1; min-width:0; }
  .ledger-entry-title{
    display:block; font-weight:700; font-size:14px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ledger-entry-row:hover .ledger-entry-title{ color:var(--brass); }
  .ledger-entry-teaser{
    display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ledger-entry-amt{
    flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14.5px;
    text-align:right; white-space:nowrap;
  }
  .ledger-entry-amt .cur{ font-size:10.5px; color:var(--ink-soft); font-weight:500; }
  .ledger-entry-chevron{
    flex-shrink:0; width:14px; text-align:center; color:var(--ink-soft); font-size:11px;
    transition:transform .15s ease;
  }
  .ledger-entry.open .ledger-entry-chevron{ transform:rotate(180deg); }
  .ledger-entry-detail{ padding:0 2px 14px 54px; }

  @media (max-width:420px){
    .ledger-entry-amt{ font-size:13.5px; }
  }

  /* 🆕 分享連結列表：沿用跟支出/轉帳明細一致的 .ledger-row 版面（而不是獨立卡片），
     權限改用跟「換算幣別」小選單一致的 .convert-select 樣式（寬度固定縮小、inline
     顯示在到期日期旁邊），維持整體介面語彙一致、也不會把一整排撐得過長。 */
  .share-link-perm-select{ margin-right:6px; }  .share-link-footer{display:flex; gap:8px;}
  .share-link-footer .btn{flex:1;}

  .empty-state{
    text-align:center; padding:30px 16px; color:var(--ink-soft);
  }
  .empty-state .ic{font-size:30px; margin-bottom:8px; opacity:.7;}
  .empty-state p{font-size:13.5px; margin:0 0 12px;}

  /* ---------- Member tags ---------- */
  .member-list{display:flex; flex-wrap:wrap; gap:10px;}
  .member-tag{
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--card-line); border-radius:10px;
    padding:8px 10px 8px 12px;
  }
  .member-tag .dot{width:9px; height:9px; border-radius:50%; background:var(--brass-soft); flex-shrink:0;}
  .member-tag input{border:none; background:transparent; font-size:14px; width:100px; padding:2px;}
  .member-tag input:focus-visible{outline:none; border-bottom:1px solid var(--brass);}

  /* ---------- Overview / receipt ---------- */
  .receipt{
    background:var(--card); border:1px solid var(--card-line); border-radius:12px;
    box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .receipt-head{
    padding:16px 18px 13px; border-bottom:1px dashed var(--card-line);
    display:flex; justify-content:space-between; align-items:center; gap:10px;
  }
  .receipt-head .t1{font-family:'Noto Serif TC',serif; font-weight:700; font-size:16px;}
  .receipt-head .t2{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);}
  /* 🆕 [總覽簡化] 「建議轉帳／彼此累計欠款總額」合併卡片：標題本身就是一個
     <select>，樣式盡量貼近 .t1（同樣粗體/字級/無邊框），維持「看起來像標題」
     的觀感，但保留瀏覽器原生下拉箭頭，讓使用者能一眼看出這裡可以點開切換
     （跟頁首 .header-currency 幣別選單是同一套「看起來低調但可互動」的做法）。
     這裡靠 class 選擇器的優先度覆蓋掉全站 select 的預設外框樣式，不需要
     額外的 !important 或調整規則順序。 */
  .t1-select{
    font-family:'Noto Serif TC',serif; font-weight:700; font-size:16px;
    color:var(--ink); background:transparent; border:none;
    padding:0 4px 0 0; margin:0; width:auto; max-width:100%;
    cursor:pointer;
  }
  .t1-select:hover{color:var(--brass);}
  .t1-select:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px;}
  .balance-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:13px 18px; border-bottom:1px dashed var(--card-line); gap:10px;
  }
  .balance-row:last-of-type{border-bottom:none;}
  .balance-name{font-weight:700; font-size:14.5px;}
  .balance-tagline{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
  .balance-amt{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15.5px; padding:4px 10px; border-radius:6px; white-space:nowrap;}
  .balance-amt.pos{background:var(--credit-bg); color:var(--credit);}
  .balance-amt.neg{background:var(--debt-bg); color:var(--debt);}
  .balance-amt.zero{background:var(--zero-bg); color:var(--ink-soft);}

  .stamp{
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
    color:var(--brass); border:2px solid var(--brass); border-radius:6px;
    padding:4px 8px; letter-spacing:.06em; opacity:.9; white-space:nowrap; flex-shrink:0;
  }
  .stamp.settled{color:var(--credit); border-color:var(--credit);}

  .settle-list{padding:4px 18px 16px;}
  .settle-item{
    display:flex; align-items:center; gap:8px; font-size:13.5px; flex-wrap:wrap;
    padding:10px 0; border-bottom:1px dashed var(--card-line);
  }
  .settle-item:last-child{border-bottom:none;}
  .settle-arrow{color:var(--brass); font-family:'IBM Plex Mono',monospace;}
  .settle-amt{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-weight:700;}
  .settle-amt-cur{font-size:11px; font-weight:500; color:var(--ink-soft); margin-left:3px;}

  /* 🆕「建議轉帳」「彼此累計欠款總額」的幣別換算列：小型下拉選單＋匯率提示文字
     並排在同一行，取代原本另外佔一整個欄位的大型 select。 */
  .convert-bar{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:10px 18px 0;
  }
  .convert-label{ font-size:12px; color:var(--ink-soft); white-space:nowrap; flex-shrink:0; }
  .convert-select{
    width:auto; max-width:120px; padding:5px 8px; font-size:12.5px;
    border-radius:6px; flex-shrink:0;
  }
  .convert-note{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }

  .kv-summary{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px;}
  .kv-card{background:var(--card); border:1px solid var(--card-line); border-radius:10px; padding:12px 14px;}
  .kv-card .k{font-size:10.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
  .kv-card .v{font-family:'Noto Serif TC',serif; font-weight:700; font-size:19px; margin-top:4px; word-break:break-all;}

  .rate-table{width:100%; border-collapse:collapse;}
  .rate-table th{
    text-align:left; font-size:11.5px; color:var(--ink-soft); font-weight:600;
    padding:6px 8px; border-bottom:1px solid var(--card-line); font-family:'IBM Plex Mono',monospace;
  }
  .rate-table td{padding:9px 8px; border-bottom:1px dashed var(--card-line); font-size:14px;}
  .rate-table input{width:100px;}

  .hint{font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.6;}
  code.inline{background:var(--chip-bg); border-radius:4px; padding:1px 5px; font-family:'IBM Plex Mono',monospace; font-size:12px; word-break:break-all;}

  details.adv{border:1px dashed var(--card-line); border-radius:10px; padding:2px 14px; margin-top:4px;}
  details.adv > summary{
    cursor:pointer; padding:10px 0; font-weight:700; font-size:13.5px; color:var(--ink-soft);
    list-style:none; display:flex; align-items:center; gap:6px;
  }
  details.adv > summary::-webkit-details-marker{display:none;}
  details.adv > summary::before{content:"▸"; font-size:11px; transition:transform .15s;}
  details.adv[open] > summary::before{transform:rotate(90deg);}
  details.adv > summary:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:4px;}
  details.adv .adv-inner{padding-bottom:14px;}

  footer{text-align:center; font-size:11px; color:var(--ink-soft); margin-top:26px; font-family:'IBM Plex Mono',monospace; padding:0 4px;}

  /* ---------- Overview: Balance Bar Chart ---------- */
  .bar-chart-wrap{
    padding:16px 18px 18px;
  }
  .bar-chart-legend{
    display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px;
    font-size:11px; font-family:'IBM Plex Mono',monospace; color:var(--ink-soft);
  }
  .bar-chart-legend span{
    display:inline-flex; align-items:center; gap:5px;
  }
  .bar-chart-legend .swatch{
    width:10px; height:10px; border-radius:2px; flex-shrink:0;
  }
  .bar-row{
    display:flex; align-items:center; gap:0; margin-bottom:10px;
  }
  .bar-row:last-child{ margin-bottom:0; }
  .bar-name{
    width:72px; flex-shrink:0; font-size:12.5px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-align:right; padding-right:10px; color:var(--ink);
  }
  .bar-track{
    flex:1; display:flex; align-items:center; position:relative; height:28px;
  }
  .bar-axis{
    position:absolute; left:50%; top:0; bottom:0;
    width:1px; background:var(--card-line);
  }
  .bar-fill-pos{
    position:absolute; left:50%; height:18px; top:5px;
    background:var(--credit); border-radius:0 4px 4px 0;
    transition:width .45s cubic-bezier(.4,0,.2,1);
    min-width:0;
  }
  .bar-fill-neg{
    position:absolute; right:50%; height:18px; top:5px;
    background:var(--debt); border-radius:4px 0 0 4px;
    transition:width .45s cubic-bezier(.4,0,.2,1);
    min-width:0;
  }
  .bar-fill-zero{
    position:absolute; left:50%; height:18px; top:5px;
    width:2px; margin-left:-1px;
    background:var(--card-line); border-radius:2px;
  }
  .bar-val{
    width:90px; flex-shrink:0; font-family:'IBM Plex Mono',monospace;
    font-size:11.5px; font-weight:600; padding-left:8px; white-space:nowrap;
  }
  .bar-val.pos{ color:var(--credit); }
  .bar-val.neg{ color:var(--debt); }
  .bar-val.zero{ color:var(--ink-soft); }

  /* ---------- Overview: Member Detail Cards ---------- */
  .member-detail-list{
    display:flex; flex-direction:column; gap:12px;
    padding:14px 16px 16px;
  }
  .member-detail-card{
    background:var(--surface); border:1px solid var(--card-line); border-radius:10px;
    overflow:hidden;
  }
  .member-detail-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 14px; cursor:pointer; gap:10px;
    border-bottom:1px solid transparent;
    transition:background .12s;
  }
  .member-detail-card.open .member-detail-head{
    border-bottom-color:var(--card-line);
    background:var(--surface-hover);
  }
  .member-detail-head:hover{ background:var(--surface-hover); }
  .member-detail-name{
    font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;
  }
  .member-detail-name .status-dot{
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
  }
  .member-detail-net{
    font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13.5px;
    padding:4px 9px; border-radius:6px; white-space:nowrap; flex-shrink:0;
  }
  .member-detail-net.pos{ background:var(--credit-bg); color:var(--credit); }
  .member-detail-net.neg{ background:var(--debt-bg); color:var(--debt); }
  .member-detail-net.zero{ background:var(--chip-bg); color:var(--ink-soft); }
  .member-detail-chevron{
    font-size:11px; color:var(--ink-soft); transition:transform .2s; flex-shrink:0;
  }
  .member-detail-card.open .member-detail-chevron{ transform:rotate(180deg); }
  .member-detail-body{
    display:none; padding:0 14px 12px;
  }
  .member-detail-card.open .member-detail-body{ display:block; }
  .detail-section-title{
    font-size:10.5px; font-family:'IBM Plex Mono',monospace; color:var(--ink-soft);
    letter-spacing:.06em; text-transform:uppercase;
    margin:12px 0 6px; padding-bottom:4px;
    border-bottom:1px dashed var(--card-line);
  }
  .detail-row{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:7px 0; border-bottom:1px dashed var(--card-line); gap:10px;
    font-size:13px;
  }
  .detail-row:last-child{ border-bottom:none; }
  .detail-row-left{ flex:1; min-width:0; }
  .detail-row-desc{ font-weight:600; font-size:13px; }
  .detail-row-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; line-height:1.5; }
  .detail-row-amt{ flex-shrink:0; text-align:right; }
  .detail-row-amt .orig{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; }
  .detail-row-amt .base{ font-size:10.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; margin-top:2px; }
  .detail-tag{
    display:inline-block; font-size:10px; font-family:'IBM Plex Mono',monospace;
    padding:1px 6px; border-radius:4px; margin-right:4px; vertical-align:middle;
  }
  .detail-tag.paid{ background:var(--credit-bg); color:var(--credit); }
  .detail-tag.share{ background:var(--debt-bg); color:var(--debt); }
  .detail-tag.transfer-in{ background:var(--debt-bg); color:var(--debt); }
  .detail-tag.transfer-out{ background:var(--credit-bg); color:var(--credit); }
  .detail-summary-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 0 4px; font-size:12.5px;
  }
  .detail-summary-row .label{ color:var(--ink-soft); }
  .detail-summary-row .val{ font-family:'IBM Plex Mono',monospace; font-weight:700; }
  .detail-summary-row .val.pos{ color:var(--credit); }
  .detail-summary-row .val.neg{ color:var(--debt); }
  .detail-summary-row .val.zero{ color:var(--ink-soft); }
  .detail-currency-group{ margin-top:8px; }
  .detail-currency-badge{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px;
    background:var(--chip-bg); color:var(--ink-soft); padding:2px 7px; border-radius:4px;
    margin-bottom:6px;
  }

  /* ---------- Small phones ---------- */
  @media (max-width:420px){
    .kv-summary{grid-template-columns:repeat(2,1fr);}
    .balance-row{flex-wrap:wrap;}
    .ledger-row{flex-direction:column;}
    .ledger-amt{align-self:flex-end;}
    .rate-table thead{display:none;}
    .rate-table, .rate-table tbody, .rate-table tr, .rate-table td{display:block; width:100%;}
    .rate-table tr{border-bottom:1px dashed var(--card-line); padding:8px 0;}
    .rate-table td{border:none; padding:3px 0; display:flex; justify-content:space-between; align-items:center;}
    .rate-table td::before{content:attr(data-label); font-size:11px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
  }

  /* ---------- Desktop layout ---------- */
  @media (min-width:860px){
    body{padding-bottom:60px;}
    .wrap{padding:0 20px;}
    .app-header{padding:16px 20px;}
    .header-row1 .brand{font-size:18px;}
    #tripName{font-size:19px;}
    .top-nav{display:flex;}
    .bottom-nav{display:none;}
    main{padding-top:20px;}
    .kv-summary{grid-template-columns:repeat(4,1fr);}
    .card{padding:22px 24px;}
  }