*, *::before, *::after { box-sizing: border-box; }

  /* hidden 屬性必須真的能藏住東西。
     瀏覽器內建的 [hidden]{display:none} 只要遇到任何一條設了 display 的作者
     樣式就會輸掉——不論選擇器多不精確，作者樣式一律優先。這曾經讓「從雲端載入
     最新資料」在不該出現的裝置上一直看得見（.cloud-pull-btn 設了 display:block），
     而 JS 那邊明明已經正確地設了 hidden。
     用 !important 是因為這條規則的意思是「不管誰設了什麼」。 */
  [hidden] { display: none !important; }

  :root {
    --bg: #f0f9ff;
    --surface: #ffffff;
    --surface-2: #e0f2fe;
    --ink: #0c2a3d;
    --ink-soft: #1e4a6e;
    /* 次要文字（個案卡片的聯絡人、地址、日期、各種說明）。它多半是 12–13px，
       所以對比度必須撐得住小字：這個值對白底 5.6:1、對 --surface-2 4.9:1，
       都過 WCAG AA。上一版的 #7cb9d8 只有 2.2:1，在案家的日光下讀不出來。
       要再調淡之前請先量對比度——「淡一點比較清爽」在這裡是可讀性問題。 */
    --muted: #356e8c;
    --line: #bae6fd;
    --brand: #0369a1;
    --brand-dark: #075985;
    --brand-soft: #0284c7;
    --accent: #0ea5e9;
    --accent-soft: #e0f2fe;
    --stair: #0284c7;
    --stair-soft: #e0f2fe;
    --platform: #d97706;
    --platform-soft: #fef3c7;
    --danger: #e11d48;
    --ok: #059669;
    --radius: 14px;
    --shadow-sm: none;
    --shadow-md: none;
    --wc: #0369a1;
    --wc-soft: #e0f2fe;
  }

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
      "Microsoft JhengHei", "Noto Sans TC", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  button { font: inherit; color: inherit; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }

  .app {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 96px;
  }

  /* ---------- Header ---------- */
  header.top {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
  }
  header.top .bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }
  header.top h1 {
    margin: 0;
    font-size: 17px;
    letter-spacing: 0.5px;
    color: var(--brand);
    flex: 1;
    text-align: center;
  }
  header.top .header-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    padding: 0 62px;
  }
  header.top .header-title-wrap h1 {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  header.top .case-name-edit-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 18px;
    line-height: 1;
  }
  header.top .case-name-edit-btn:active { background: rgba(0,0,0,0.18); }
  header.top .back-btn {
    position: absolute;
    left: 0;
  }
  header.top .settings-btn { position: absolute; right: 0; font-size: 20px; line-height: 1; }
  header.top .back-btn,
  header.top .action-btn {
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 14px;
  }
  header.top .back-btn:active,
  header.top .action-btn:active { background: var(--surface-2); }
  .subtitle {
    text-align: center;
    font-size: 14px;
    color: var(--muted);
    margin-top: 2px;
  }

  /* ---------- Case List ---------- */
  .list-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 4px 12px;
  }
  /* margin-right:auto 而不是 justify-content:space-between：這排右邊有筆數和
     雲端備份時間兩個東西，要的是「標題靠左、其餘一起靠右」，space-between 會
     把三者平均攤開。雲端徽章隱藏時，版面自動退回原本的左右各一。 */
  .list-header h2 {
    margin: 0 auto 0 0;
    font-size: 15px;
    color: var(--ink-soft);
    font-weight: 600;
  }
  .count-badge {
    font-size: 12px;
    color: var(--muted);
  }
  /* 從標題列搬下來的。原本絕對定位在 header 右側，只放得下「剛剛」那種兩三個
     字的短標；改顯示完整時刻後就會壓到置中的「輔具評估系統」，而那個 h1 是所
     有畫面共用的。放在這排則是靠正常排版佔位，長標籤（例如「授權已過期，備份
     已停止」）只會把自己往左推，不會蓋到任何東西。 */
  .list-header .cloud-status-badge {
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
  }
  .list-header .cloud-status-badge[data-tone="ok"] { color: #047857; border-color: #a7f3d0; }
  .list-header .cloud-status-badge[data-tone="failed"] { color: #b91c1c; border-color: #fecaca; }
  .list-header .cloud-status-badge[data-tone="conflict"] { color: #b45309; border-color: #fde68a; }
  /* Neither reassuring nor alarming: a view-only device is working exactly as
     asked, and the badge only states which role it is playing. */
  .list-header .cloud-status-badge[data-tone="readonly"] { color: #1d4ed8; border-color: #bfdbfe; }

  /* 三個分頁必須在一支手機的寬度裡排得下，因此標籤與筆數並排、字級壓小，
     並允許各自依內容伸縮——「已收案未評估」比「待聯絡」長一倍。 */
  .stage-tabs {
    display: flex;
    gap: 6px;
    margin: 0 4px 12px;
    padding: 4px;
    background: var(--surface-2);
    border-radius: 10px;
  }
  .stage-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 44px;
    padding: 6px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }
  /* --shadow-sm 是 none，所以選取狀態不能只靠陰影。用 inset 邊框而不是 border，
     才不會讓被選到的那一頁比另外兩頁多 1px 而整排跳動。 */
  .stage-tab.active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .stage-tab-count {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .stage-tab.active .stage-tab-count {
    background: var(--brand);
    color: #fff;
  }
  .empty-hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
    opacity: 0.85;
  }

  .case-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    display: block;
    transition: transform 0.1s ease;
    cursor: pointer;
  }
  .case-item:active { transform: scale(0.99); }
  .case-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .case-meta-row .info {
    flex: 1;
    min-width: 0;
  }
  .case-item .name {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .case-item .meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  .case-item .open-btn {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
  }
  .case-item .del-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--danger);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
  }

  .empty {
    text-align: center;
    padding: 56px 16px;
    color: var(--muted);
    font-size: 14px;
  }
  .empty svg { opacity: 0.4; margin-bottom: 10px; }

  /* ---------- New Case ---------- */
  .new-case-btn {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-bottom: 14px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--brand);
    font-size: 15px;
    font-weight: 600;
  }
  .new-case-btn:active { background: var(--surface-2); }

  /* 九個欄位的對話框在手機上一定捲動，所以標題與按鈕區固定、中間捲。
     鍵盤彈出時被壓縮的是欄位區，送出按鈕不會被推到看不見的地方。 */
  .intake-dialog .intake-panel {
    display: flex;
    flex-direction: column;
    max-height: min(84vh, 720px);
  }
  .intake-fields {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }
  /* 收案表單在窄螢幕上的寬度處理。
   *
   * 兩個成因疊在一起：日期與時間輸入框有瀏覽器自訂的最小寬度（zh-Hant 的
   * 「上午／下午」還更寬），而 grid 項目預設 min-width:auto，不准它縮到內容
   * 最小寬度以下。結果就是兩欄互相擠壓而重疊、或整個欄位溢出格線。
   *
   * 只作用在收案表單，不動八個評估模組——那些表單的欄位窄得多，改成自動換行
   * 反而會讓成排的尺寸輸入框散開。 */
  .intake-form .wc-two-col > * { min-width: 0; }
  .intake-form .wc-input,
  .intake-form .wc-num-input { min-width: 0; max-width: 100%; }
  /* 數字欄位在這張表單裡撐滿欄寬，而不是固定 110px——固定寬度在窄欄裡會頂出去 */
  .intake-form .wc-num-wrap { display: block; }
  .intake-form .wc-num-input { width: 100%; }

  /* iOS Safari 的日期／時間欄位是原生控制項，帶著自己的固有寬度，`width` 與
     `max-width` 都壓不住它——它會直接畫出容器外。關掉原生外觀才拿得回控制權，
     所以邊框與內距要自己補上，並保留 44px 的觸控高度。 */
  .intake-form input[type="date"],
  .intake-form input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  /* 未填時 iOS 會顯示灰色的日期樣板文字，把游標位置對齊其他欄位 */
  .intake-form input[type="date"]::-webkit-date-and-time-value,
  .intake-form input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
  }

  /* 手機上一律單欄。兩個日期欄位並排在 390px 的螢幕上，每欄只剩約 140px，
     而日期控制項本身就要 150px 以上——那不是調斷點能解決的，是根本放不下。 */
  @media (max-width: 520px) {
    .intake-form .wc-two-col { grid-template-columns: 1fr; }
  }

  .intake-subsection {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .intake-subsection-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .intake-stage-hint { margin-top: -4px; margin-bottom: 10px; }
  .intake-warn { color: #b45309; font-weight: 600; }

  /* 收合的收案資料。展開時 summary 要長得像原本的 h3，收合時則多顯示一行
     摘要——收起來不該等於看不到。 */
  .intake-section > summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wc-soft);
    cursor: pointer;
    list-style: none;
  }
  .intake-section > summary::-webkit-details-marker { display: none; }
  .intake-section > summary::before {
    content: '▸';
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.15s ease;
  }
  .intake-section[open] > summary::before { content: '▾'; }
  .intake-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wc);
  }
  .intake-section-brief {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .intake-section-chip {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
  }
  /* 展開時不顯示摘要：底下就是那些欄位本身，重複一次只會在編輯到一半時
     變成過期的資訊——沒有東西會過期，就不需要想辦法讓它同步。 */
  .intake-section[open] > summary .intake-section-brief,
  .intake-section[open] > summary .intake-section-chip { display: none; }
  .intake-section[open] > summary { margin-bottom: 14px; }
  .intake-section:not([open]) > summary { padding-bottom: 0; border-bottom: none; }

  .intake-paste {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    padding: 8px 10px;
  }
  .intake-paste summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    min-height: 28px;
    display: flex;
    align-items: center;
  }
  .intake-paste textarea { margin-top: 8px; }
  .intake-paste-status { margin-top: 6px; font-size: 12px; color: var(--muted); }
  .intake-paste-status.ok { color: #047857; }
  .intake-paste-status.warn { color: #b45309; }

  /* ---------- New Case Form ---------- */
  .new-case {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
  }
  .new-case label {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .new-case .row {
    display: flex;
    gap: 8px;
  }
  .new-case .date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .new-case .date-row label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    white-space: nowrap;
    margin-bottom: 0;
  }
  .new-case .date-row input[type="date"] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    outline: none;
    font-size: 14px;
    color: var(--ink);
  }
  .new-case .date-row input[type="date"]:focus {
    border-color: var(--brand);
    background: #fff;
  }
  .new-case input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    outline: none;
    font-size: 15px;
  }
  .new-case input:focus {
    border-color: var(--brand);
    background: #fff;
  }
  .new-case button.primary {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* ---------- Backup ---------- */
  .backup-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; margin: 0 0 14px; }
  .backup-panel.due { border-color: #f59e0b; background: #fffbeb; }
  .backup-panel-title { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
  .backup-panel-status { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .backup-panel.due .backup-panel-status { color: #b45309; }
  /* Cloud backup state. Only the linked state reads as reassuring — the rest
     must not look like the data is already protected. */
  .cloud-state { font-size: 15px; font-weight: 700; margin-top: 7px; color: var(--muted); }
  .cloud-state[data-state="linked"] { color: #047857; }
  /* 唯讀檢視刻意不用「已連結」的綠色：這台裝置確實連上了雲端，但它並沒有在
     備份任何東西，不該讀起來像是資料已經受到保護。 */
  .cloud-state[data-state="read-only"] { color: #1d4ed8; }
  .cloud-state[data-state="linked-offline"] { color: #b45309; }
  .cloud-state[data-state="needs-relink"] { color: #b91c1c; }
  .cloud-account { font-size: 12px; color: var(--ink-soft); margin-top: 5px; word-break: break-all; }
  #cloudUploadStatus[data-tone="failed"] { color: #b91c1c; }
  #cloudUploadStatus[data-tone="conflict"] { color: #b45309; }
  .cloud-upload-status-actionable { cursor: pointer; text-decoration: underline; }
  .conflict-snapshot { margin-top: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
  .conflict-snapshot-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
  .conflict-snapshot .backup-panel-status { margin-top: 2px; }
  /* The manual-backup panel's one-line cloud summary, so a therapist sees
     both backup paths without opening a second dialog. Same honesty rule as
     the cloud dialog's own state colors: only "ok" reads as reassuring. */
  .cloud-summary-line {
    display: block; width: 100%; text-align: left; margin-top: 9px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    font-size: 12px; color: var(--ink-soft); cursor: pointer;
  }
  .cloud-summary-line[data-tone="ok"] { color: #047857; border-color: #a7f3d0; }
  .cloud-summary-line[data-tone="failed"] { color: #b91c1c; border-color: #fecaca; }
  .cloud-summary-line[data-tone="conflict"] { color: #b45309; border-color: #fde68a; }
  .cloud-summary-line[data-tone="readonly"] { color: #1d4ed8; border-color: #bfdbfe; }
  /* 唯讀檢視開關。放在連結／解除連結之上，因為它決定的是這台裝置扮演什麼
     角色，比「要不要連結」之後的細節更根本。 */
  .cloud-readonly {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 11px;
    padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; cursor: pointer;
  }
  .cloud-readonly input { margin: 2px 0 0; width: 17px; height: 17px; flex: none; }
  .cloud-readonly-text { display: block; }
  .cloud-readonly-text strong { display: block; font-size: 13px; color: var(--ink); }
  .cloud-readonly-text small {
    display: block; margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.5;
  }
  .cloud-pull-btn {
    display: block; width: 100%; margin-top: 9px; padding: 9px 10px;
    border-radius: 8px; border: 1px solid #bfdbfe; background: #eff6ff;
    color: #1d4ed8; font-size: 13px; font-weight: 600;
  }
  .cloud-pull-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  /* ---------- 回收筒 ---------- */
  .trash-dialog #trashList { margin-top: 10px; max-height: 52vh; overflow-y: auto; }
  .trash-empty { padding: 22px 0; text-align: center; font-size: 13px; color: var(--muted); }
  .trash-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin-bottom: 8px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
  }
  .trash-info { flex: 1; min-width: 0; }
  .trash-name {
    font-size: 14px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .trash-meta { margin-top: 3px; font-size: 12px; color: var(--muted); }
  .trash-item-actions { display: flex; gap: 6px; flex: none; }
  .trash-item-actions button {
    padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line);
    background: #fff; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  }
  .trash-restore { border-color: var(--brand) !important; color: var(--brand) !important; }
  /* 永久刪除是全 App 唯一真的會銷毀個案資料的動作，顏色要說出這件事。 */
  .trash-purge { border-color: #fecaca !important; color: #b91c1c !important; }
  .backup-actions { display: flex; gap: 8px; margin-top: 11px; }
  .backup-actions button { flex: 1; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
  .backup-actions .backup-export { background: var(--brand); border-color: var(--brand); color: #fff; }
  .backup-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
  .backup-dialog { width: min(420px, calc(100% - 32px)); border: none; border-radius: var(--radius); padding: 0; background: var(--bg); color: var(--ink); }
  .backup-dialog::backdrop { background: rgba(17,24,39,0.5); }
  .backup-dialog .backup-panel { margin: 0; }
  .backup-dialog-close { width: 100%; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-soft); font-size: 13px; }
  /* A deliberately quiet way into the manual JSON backup — cloud backup is
     the primary path now, but the manual export must stay reachable and
     visible, per the project's rule that cloud backup is an added layer of
     insurance, never a replacement. */
  .advanced-link { display: block; width: 100%; margin-top: 11px; padding: 4px; border: none; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
  .settings-panel,
  .version-panel { padding: 16px; }
  .settings-menu { display: grid; gap: 8px; margin-top: 12px; }
  .settings-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    text-align: left;
  }
  .settings-menu-item:active { background: var(--surface-2); }
  .settings-menu-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--brand);
    font-size: 19px;
    font-weight: 700;
  }
  .settings-menu-text { display: grid; gap: 1px; flex: 1; }
  .settings-menu-text strong { color: var(--ink); font-size: 14px; }
  .settings-menu-text small { color: var(--muted); font-size: 12px; }
  .settings-menu-arrow { color: var(--muted); font-size: 24px; line-height: 1; }
  .version-current {
    margin-top: 12px;
    padding: 14px;
    border-radius: 10px;
    background: var(--surface-2);
    text-align: center;
  }
  .version-number { color: var(--brand); font-size: 23px; font-weight: 800; letter-spacing: 0.4px; }
  .version-date { margin-top: 2px; color: var(--ink-soft); font-size: 12px; }
  .version-release { padding: 14px 2px 4px; }
  .version-release + .version-release { border-top: 1px solid var(--line); margin-top: 10px; }
  .version-release-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .version-release-title strong { color: var(--ink-soft); font-size: 14px; }
  .version-release-title time { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .version-updates { margin: 8px 0 0; padding-left: 22px; color: var(--ink-soft); font-size: 13px; }
  .version-updates li + li { margin-top: 5px; }
  /* Release history keeps growing every version; without a capped, scrollable
     region here the whole dialog scrolls and the close button below it can
     end up several screens down, unreachable without scrolling past all of
     history first. */
  #versionContent { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- Editor Blocks ---------- */
  .case-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
  }
  .case-title-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    outline: none;
    padding: 4px 0;
    border-bottom: 1px dashed transparent;
  }
  .case-title-wrap input:focus { border-bottom-color: var(--line); }
  .save-indicator {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
  }
  .save-indicator.saved { color: var(--ok); }

  .block {
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .block.stair { border-left: 4px solid var(--stair); }
  .block.platform { border-left: 4px solid var(--platform); }

  .block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
  }
  .block.stair .block-header { background: var(--stair-soft); }
  .block.platform .block-header { background: var(--platform-soft); }

  .block-header .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .block.stair .block-header .title { color: var(--stair); }
  .block.platform .block-header .title { color: var(--platform); }
  .tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(0,0,0,0.05);
    color: var(--ink-soft);
    font-weight: 500;
  }
  .block-header .remove-block {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--danger);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
  }

  .block-body { padding: 14px 16px; }

  .step-row {
    display: grid;
    grid-template-columns: 44px 1fr 1fr 36px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .step-row .idx {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    text-align: center;
  }
  .step-row .field {
    position: relative;
  }
  .step-row input,
  .field-group input,
  .width-field input {
    width: 100%;
    padding: 10px 34px 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    outline: none;
    font-size: 15px;
    text-align: right;
  }
  .step-row input:focus,
  .field-group input:focus,
  .width-field input:focus {
    border-color: var(--stair);
    background: #fff;
  }
  .block.platform .field-group input:focus,
  .block.platform .width-field input:focus {
    border-color: var(--platform);
  }
  .input-warn {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
  }
  .warn-hint {
    display: none;
    color: #b45309;
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.3;
  }
  .warn-hint.visible {
    display: block;
  }
  .unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--muted);
    pointer-events: none;
  }
  .field-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    display: block;
  }
  .step-row .del-step {
    background: transparent;
    border: none;
    color: var(--danger);
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
  }
  .step-row .del-step:active { background: rgba(178,58,58,0.08); }

  .step-row.first-step {
    background: rgba(240, 220, 140, 0.28);
    border-radius: 8px;
    padding: 6px 4px;
    margin-bottom: 10px;
  }
  .step-row.first-step .idx {
    color: var(--stair);
    font-weight: 700;
  }
  .no-input {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }

  .header-row {
    display: grid;
    grid-template-columns: 44px 1fr 1fr 36px;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0 2px;
  }
  .header-row span {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
    text-align: center;
  }
  .header-row span:nth-child(1) { text-align: center; }
  .header-row span:nth-child(2),
  .header-row span:nth-child(3) { text-align: right; padding-right: 10px; }

  .add-step-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--stair);
    color: var(--stair);
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 6px;
  }
  .add-step-btn:active { background: var(--stair-soft); }

  .width-field {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    position: relative;
  }
  .width-field .field-label { font-weight: 600; color: var(--ink-soft); }
  .width-field .field {
    position: relative;
    max-width: 220px;
  }

  .field-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .field-group .field { position: relative; }
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* ---------- Flow Buttons ---------- */
  .flow-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0 8px;
  }
  .flow-actions.single { grid-template-columns: 1fr; }
  .flow-btn {
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--ink-soft);
    padding: 14px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .flow-btn.stair { color: var(--stair); border-color: var(--stair-soft); background: var(--stair-soft); }
  .flow-btn.platform { color: var(--platform); border-color: var(--platform-soft); background: var(--platform-soft); }
  .flow-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .flow-btn:active:not(:disabled) { transform: scale(0.98); }

  .calc-btn {
    margin-top: 20px;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    letter-spacing: 1px;
  }
  .calc-btn:active { background: #a75e3a; }
  .calc-btn:disabled { opacity: 0.5; background: var(--muted); box-shadow: none; }

  /* ---------- Results ---------- */
  .results-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,0.5);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 50;
    overflow-y: auto;
  }
  .results-overlay.active { display: flex; }
  .results-modal {
    background: var(--bg);
    width: 100%;
    max-width: 720px;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px 32px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  }
  .results-modal .handle {
    width: 40px;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .results-modal h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: var(--brand);
    text-align: center;
  }
  .results-modal .sub {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
  }
  table.results {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 14px;
  }
  table.results thead th {
    background: var(--brand);
    color: #fff;
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
  }
  table.results td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  table.results td.label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    width: 40%;
    background: var(--surface-2);
  }
  table.results td.value {
    font-size: 14px;
    color: var(--ink);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  table.results td.value .unit-sm { font-size: 11px; color: var(--muted); margin-left: 2px; font-weight: normal; }
  table.results td.none { color: var(--muted); font-weight: normal; }
  table.results tr:last-child td { border-bottom: none; }

  .results-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .results-actions button {
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
  }
  .results-actions button.close { grid-column: 1 / -1; background: var(--brand); color: #fff; border-color: var(--brand); }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--brand);
    color: #fff;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 13px;
    opacity: 0;
    transition: all 0.25s ease;
    z-index: 100;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    /* 手機上的 toast 早就有訊息太長被切掉的問題（例如雲端備份逾期提醒），
       改為在畫面內換行而不是溢出到看不見的地方。 */
    max-width: calc(100vw - 32px);
    text-align: center;
    line-height: 1.5;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  /* 整個 toast 是 pointer-events: none，唯獨這顆按鈕要收得到點擊——
     它是誤刪之後唯一那條「馬上救回來」的路。 */
  .toast-action {
    pointer-events: auto;
    margin-left: 14px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
  }

  /* ---------- Main Menu ---------- */
  #mainMenuView .menu-intro {
    text-align: center;
    padding: 28px 16px 10px;
  }
  #mainMenuView .menu-intro p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted);
  }
  .menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 12px 0 20px;
  }
  .menu-card {
    border: none;
    border-radius: var(--radius);
    padding: 28px 12px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    transition: transform 0.12s ease;
    cursor: pointer;
  }
  .menu-card:active { transform: scale(0.96); }
  .stair-card    { background: var(--stair-soft); color: var(--stair); }
  .wc-card       { background: var(--wc-soft); color: var(--wc); }
  .transfer-card { background: #ece6f5; color: #7b5ea7; }
  .cushion-card  { background: #f5e4cc; color: #b06a20; }
  .airbed-card   { background: #dce8f5; color: #2e5fa0; }
  .walker-card   { background: #d8edd8; color: #3d7a3d; }
  .shower-card   { background: #ceeaea; color: #287878; }
  .menu-icon { font-size: 34px; line-height: 1; }
  .menu-label { font-size: 15px; font-weight: 700; }
  .menu-desc { font-size: 12px; opacity: 0.65; }

  /* ---------- 補助額度／金額試算 ---------- */
  .sub-block {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 16px 14px 18px;
    margin: 4px 0 22px;
  }
  .sub-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .sub-head h3 { margin: 0; font-size: 16px; color: #1f2937; }
  .sub-hint { font-size: 12px; color: var(--muted); }
  .sub-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 14px; }
  .sub-ctrl-group { display: flex; align-items: center; gap: 8px; }
  .sub-ctrl-label { font-size: 13px; font-weight: 700; color: #374151; }
  .sub-elig { display: flex; gap: 12px; }
  .sub-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
  .sub-seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
  .sub-seg-btn { border: none; background: #fff; padding: 6px 12px; font-size: 13px; cursor: pointer; color: #374151; border-left: 1px solid #e5e7eb; }
  .sub-seg-btn:first-child { border-left: none; }
  .sub-seg-btn.active { background: #2563eb; color: #fff; font-weight: 700; }
  /* ---- 表格式（金額對齊比較，控制項另起一行）---- */
  .sub-table-wrap { overflow-x: auto; margin-bottom: 8px; }
  .sub-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .sub-table-compact th { padding: 8px; font-size: 12px; color: #6b7280; font-weight: 700; background: #f9fafb; text-align: right; border-bottom: 1px solid #e5e7eb; }
  .sub-table-compact th.sub-th-item { text-align: left; }
  .sub-th-sub { font-size: 10px; font-weight: 600; color: #94a3b8; margin-top: 1px; }
  /* 品項名（金額列）與金額欄 */
  .sub-r-main td { padding: 9px 8px 3px; border-bottom: none; text-align: right; vertical-align: bottom; }
  .sub-r-main td.sub-item2 { text-align: left; font-weight: 600; color: #1f2937; font-size: 13.5px; vertical-align: bottom; }
  /* 身障=藍、長照(含佔額度)=綠，與下方彙總卡片一致 */
  .sub-table-compact th.sub-c-dis, .sub-r-main td.sub-c-dis { background: #f4f9ff; }
  .sub-table-compact th.sub-c-ltc, .sub-r-main td.sub-c-ltc { background: #f4fdf6; }
  .sub-table-compact th.sub-c-dis { color: #1d4ed8; }
  .sub-table-compact th.sub-c-ltc { color: #15803d; }
  .sub-amt2 { font-size: 15px; color: #374151; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sub-amt2-main { font-weight: 600; }
  .sub-amt2-quota { font-size: 11px; color: #4d9d6a; font-weight: 500; margin-top: 1px; }
  .sub-amt2-quota.sub-noquota { color: #9ca3af; font-style: italic; }
  .sub-var-sel { font-size: 12px; padding: 2px 4px; margin-top: 2px; border: 1px solid #cbeed3; border-radius: 6px; background: #fff; color: #15803d; }
  .sub-amt2.sub-c-dis.picked .sub-amt2-main, .sub-amt2.sub-c-dis.picked { color: #1e40af; font-weight: 800; }
  .sub-amt2.sub-c-ltc.picked .sub-amt2-main { color: #15803d; font-weight: 800; }
  .sub-ck { display: inline-block; margin-left: 3px; font-size: 10px; font-weight: 700; color: #16a34a; }
  /* 控制列（採用管道＋納入），置於該品項下方、獨立一行 */
  .sub-r-ctrl td { padding: 3px 8px 9px; border-bottom: 1px solid #eef0f3; }
  .sub-ctrl-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: #6b7280; }
  .sub-inc-lbl { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .sub-ctrl-sep { color: #9ca3af; }
  .sub-chgroup { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; }
  .sub-chbtn { border: none; background: #fff; padding: 4px 12px; font-size: 12px; cursor: pointer; color: #374151; border-left: 1px solid #e5e7eb; }
  .sub-chbtn:first-child { border-left: none; }
  .sub-chbtn[data-ch="dis"].active { background: #2563eb; color: #fff; font-weight: 700; }
  .sub-chbtn[data-ch="ltc"].active { background: #16a34a; color: #fff; font-weight: 700; }
  .sub-chbtn:disabled { opacity: 0.5; cursor: default; }
  .sub-nofund { color: #9ca3af; }
  .sub-note-inline { color: #b45309; }
  .sub-caption { font-size: 11px; color: var(--muted); margin: 0 0 14px; }
  .sub-na { color: #9ca3af; font-size: 14px; font-weight: 500; }
  .sub-ch-sel { font-size: 15px; font-weight: 600; padding: 2px 4px; border: 1px solid #cfe0f5; border-radius: 6px; background: #fff; }
  .sub-row-off { opacity: 0.45; }
  .sub-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .sub-card { border-radius: 10px; padding: 12px; }
  .sub-card-dis { background: #f0f7ff; border: 1px solid #cfe3fb; }
  .sub-card-ltc { background: #f0fdf4; border: 1px solid #cbeed3; }
  .sub-card-h { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: #1f2937; }
  .sub-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
  .sub-card-row span { color: #4b5563; }
  .sub-used-input { width: 96px; text-align: right; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
  .sub-warn { margin-top: 6px; font-size: 12px; color: #c2410c; background: #fff7ed; border-radius: 6px; padding: 4px 8px; }
  .sub-warn-text { color: #c2410c; }
  .sub-mini { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .sub-overall { margin-top: 12px; font-size: 13px; font-weight: 600; color: #1f2937; background: #f3f4f6; border-radius: 8px; padding: 10px 12px; }
  .sub-empty { font-size: 13px; color: var(--muted); background: #f9fafb; border-radius: 8px; padding: 14px; text-align: center; }
  .sub-dup-warning { margin-bottom: 12px; font-size: 13px; color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 10px 12px; }
  .sub-dup-warning ul { margin: 4px 0 0; padding-left: 18px; }
  .sub-dup-warning li { margin-top: 2px; }
  @media (max-width: 520px) { .sub-summary { grid-template-columns: 1fr; } }

  /* ---------- Case card contents ---------- */
  .case-age {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
  }
  .case-lines { margin-top: 3px; }
  .case-line {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
  }
  /* 地址常常一整行放不下，而它正是出發前要看清楚的東西——寧可折行也不截斷。 */
  .case-address { word-break: break-all; }
  .case-when { color: var(--ink-soft); font-weight: 600; }
  .case-when.overdue { color: #b45309; }
  .case-overdue-tag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: 11px;
    font-weight: 600;
  }
  .case-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .case-chip {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    color: var(--ink-soft);
    background: var(--surface-2);
  }

  /* 動作列與卡片主體之間畫一條線：點卡片開啟個案，點這一排不會。 */
  .case-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .case-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
  .case-action:active { background: var(--surface-2); }
  .case-action.primary {
    margin-left: auto;
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
  }
  .case-action.primary:active { background: var(--brand-dark); }

  /* ---------- Assessment Badges ---------- */
  .assess-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .assess-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    font-weight: 500;
  }
  .badge-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: #e53e3e;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .badge-remove-btn:active { background: #c53030; }
  .modify-btn {
    background: transparent;
    border: 1px solid #5B8DB8;
    color: #5B8DB8;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 6px;
  }
  .modify-btn:active { background: rgba(91,141,184,0.12); }
  .clear-module-section {
    padding: 20px 16px 8px;
    text-align: center;
  }
  .clear-module-btn {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #dc2626;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    max-width: 320px;
  }
  .clear-module-btn:active { background: #fee2e2; }
  .stair-badge   { background: var(--stair-soft); color: var(--stair); }
  .wc-badge      { background: var(--wc-soft); color: var(--wc); }
  .shower-badge    { background: #ceeaea; color: #287878; }
  .walker-badge    { background: #d8edd8; color: #3d7a3d; }
  .transfer-badge  { background: #ece6f5; color: #7b5ea7; }
  .cushion-badge   { background: #f5e4cc; color: #b06a20; }
  .airbed-badge    { background: #dce8f5; color: #2e5fa0; }
  /* 免評估項目：實心（它是已完成的成果，不是待辦），但用中性的灰綠與勾號
     和八個評估模組區隔——那些是評出來的，這些是依規定免評的。 */
  .exempt-badge { background: #dcefe4; color: #2f6b4a; }
  /* 預定要評的項目：外框而非實心，和「已經填了資料」明顯不同。並排時一眼
     看得出還剩哪幾項沒評——這是這張卡片每天最常被用到的資訊。 */
  .planned-badge {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--muted);
  }
  /* ---------- Long-press Context Menu ---------- */
  .lp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lp-menu {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    width: 240px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
  .lp-menu-title {
    padding: 14px 16px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
  }
  .lp-menu-item {
    display: block;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    border: none;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    color: var(--ink);
  }
  .lp-menu-item:active { background: var(--surface-2); }
  .lp-menu-item.danger { color: #dc2626; }
  .lp-menu-cancel {
    display: block;
    width: 100%;
    padding: 14px 16px;
    text-align: center;
    border: none;
    border-top: 1px solid var(--line);
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    color: var(--ink-soft);
  }
  .lp-menu-cancel:active { background: var(--surface-2); }
  .two-col-options { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .two-col-options .col { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
  .two-col-options .col:first-child { border-right: 1px solid var(--line); }
  .assess-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
  .assess-table th { background: var(--surface-2); padding: 8px 6px; text-align: center; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); font-size: 12px; }
  .assess-table td { padding: 10px 6px; text-align: center; border: 1px solid var(--line); }
  .assess-table td:first-child { text-align: left; font-size: 13px; padding-left: 10px; }
  .assess-table tr:nth-child(even) td { background: var(--surface-2); }

  /* ---------- Wheelchair View ---------- */
  .wc-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
  }
  .wc-section h3 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wc);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wc-soft);
  }
  .wc-field { margin-bottom: 14px; }
  .wc-field:last-child { margin-bottom: 0; }
  .wc-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
  .wc-label {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 6px;
  }
  .wc-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    outline: none;
    font-size: 15px;
    color: var(--ink);
  }
  .wc-input:focus { border-color: var(--wc); background: #fff; }
  .wc-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    outline: none;
    font-size: 14px;
    color: var(--ink);
    min-height: 72px;
    resize: vertical;
  }
  .wc-textarea:focus { border-color: var(--wc); background: #fff; }
  .wc-num-wrap { position: relative; display: inline-block; }
  .wc-num-input {
    width: 110px;
    padding: 10px 30px 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    outline: none;
    font-size: 15px;
    text-align: right;
    color: var(--ink);
  }
  .wc-num-input:focus { border-color: var(--wc); background: #fff; }
  .wc-num-wrap .unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--muted);
    pointer-events: none;
  }
  .wc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .wc-two-col:last-child { margin-bottom: 0; }
  .wc-two-col .wc-field { margin-bottom: 0; }
  .wc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .wc-row .wc-label { margin-bottom: 0; white-space: nowrap; }
  /* Radio & Checkbox groups */
  .wc-options { display: flex; flex-direction: column; gap: 10px; }
  .wc-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
  }
  .wc-option input[type="radio"],
  .wc-option input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--wc);
    cursor: pointer;
  }
  .wc-option-text { font-size: 14px; color: var(--ink); line-height: 1.4; }
  .wc-inline-options { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .wc-joint-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
  .wc-joint-side { font-size: 13px; color: var(--muted); min-width: 16px; }
  .wc-nolimit-label { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; color: var(--ink); }
  .wc-inline-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .wc-inline-option input[type="radio"],
  .wc-inline-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--wc);
    cursor: pointer;
  }
  .wc-inline-option-text { font-size: 14px; color: var(--ink); }
  /* Conditional sub-fields */
  .wc-sub-fields {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    border-left: 3px solid var(--wc-soft);
  }
  .wc-sub-fields.visible { display: block; }
  .wc-sub-fields .wc-field { margin-bottom: 10px; }
  .wc-sub-fields .wc-field:last-child { margin-bottom: 0; }
  .wc-field-disabled { opacity: 0.45; }
  .wc-field-disabled .wc-label { color: var(--muted); }
  /* Shoe toggle */
  .shoe-toggle-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  .shoe-toggle {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .shoe-toggle input[type="radio"] { display: none; }
  .shoe-toggle label {
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink-soft);
    background: var(--surface-2);
    transition: background 0.15s;
  }
  .shoe-toggle input[type="radio"]:checked + label { background: var(--wc); color: #fff; }
  /* Wheelchair dimensions */
  .wc-dimensions {
    background: var(--wc-soft);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 4px;
  }
  .wc-dimensions h4 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--wc); }
  .wc-dim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(46,125,110,0.15);
  }
  .wc-dim-row:last-child { border-bottom: none; }
  .wc-dim-label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
  .wc-dim-value { font-size: 17px; font-weight: 700; color: var(--wc); }
  .wc-dim-value.empty { color: var(--muted); font-size: 13px; font-weight: normal; }
  .wc-dim-unit { font-size: 12px; color: var(--muted); font-weight: normal; margin-left: 2px; }

  /* ---------- Home Accessibility ---------- */
  :root { --ha: #8b6f47; --ha-soft: #ede0cf; }
  .ha-card    { background: var(--ha-soft); color: var(--ha); }
  .ha-badge   { background: var(--ha-soft); color: var(--ha); }
  .ha-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ha-matrix { min-width: 100%; }
  .ha-matrix th, .ha-matrix td { padding: 6px 4px; font-size: 12px; white-space: nowrap; }
  .ha-matrix td:first-child { text-align: left; padding-left: 8px; font-weight: 500; font-size: 13px; white-space: normal; }
  .ha-matrix th:first-child { text-align: left; padding-left: 8px; }
  .ha-matrix input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ha); cursor: pointer; margin: 0; }

  .ha-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .ha-row {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: var(--surface-2);
  }
  .ha-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .ha-row-num { font-size: 12px; color: var(--ha); font-weight: 700; }
  .ha-row-del {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--danger);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
  }
  .ha-row-del:active { background: rgba(178,58,58,0.08); }
  .ha-row-field { margin-bottom: 10px; }
  .ha-row-field:last-child { margin-bottom: 0; }
  .ha-row-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  .ha-row-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }
  .ha-empty {
    text-align: center;
    color: var(--muted);
    padding: 18px;
    font-size: 13px;
    font-style: italic;
  }
  .ha-range-wrap { display: flex; align-items: center; gap: 4px; width: 100%; }
  .ha-range-wrap .wc-num-input { flex: 1; min-width: 0; }
  .ha-range-sep { color: var(--sub); font-size: 14px; flex-shrink: 0; }
  .ha-range-wrap .unit { flex-shrink: 0; }
  .ha-row-measurements { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .ha-ramp-suggestion {
    display: flex; align-items: center; gap: 8px;
    background: var(--ha-soft); border-left: 3px solid var(--ha);
    border-radius: 6px; padding: 8px 12px; margin-top: 6px; margin-bottom: 4px;
  }
  .ha-ramp-suggestion .ha-ramp-sugg-label { font-size: 13px; color: var(--sub); }
  .ha-ramp-suggestion .ha-ramp-sugg-value { font-size: 15px; font-weight: 700; color: var(--ha); }
  .ha-add-btn { border-color: var(--ha); color: var(--ha); }
  .ha-add-btn:active { background: var(--ha-soft); }
  .ha-summary-section { background: #faf7f0; border-left: 4px solid var(--ha); }
  .ha-summary-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 8px; overflow: hidden; }
  .ha-summary-table th { background: var(--ha); color: #fff; padding: 9px 8px; font-size: 13px; font-weight: 500; }
  .ha-summary-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: center; }
  .ha-summary-table td:nth-child(2) { text-align: left; }
  .ha-summary-table td:last-child { font-weight: 600; color: var(--ha); }
  .ha-summary-table tr:last-child td { border-bottom: none; }
  .ha-summary-warn { color: var(--danger); font-size: 11px; font-weight: normal; display: block; margin-top: 2px; }

  /* ---------- ㄇ字型計算機 ---------- */
  .ha-grab-calc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px solid var(--ha); border-radius: 8px; background: #fff; color: var(--ha); font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 4px; }
  .ha-grab-calc-btn:active { background: var(--ha-soft); }
  .ha-grab-results { margin-top: 10px; }
  .ha-grab-table { width: 100%; border-collapse: collapse; font-size: 13px; border-radius: 8px; overflow: hidden; }
  .ha-grab-table th { background: var(--ha); color: #fff; padding: 7px 6px; font-weight: 500; text-align: center; }
  .ha-grab-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; }
  .ha-grab-table tr:last-child td { border-bottom: none; }
  .ha-grab-table tr.balanced td:nth-child(3) { font-weight: 700; color: var(--ha); }
  .ha-grab-table tr.applied { background: #f0faf3; }
  .ha-grab-apply-btn { padding: 4px 10px; border: 1.5px solid var(--ha); border-radius: 6px; background: #fff; color: var(--ha); font-size: 12px; cursor: pointer; }
  .ha-grab-apply-btn:active, .ha-grab-apply-btn.applied { background: var(--ha); color: #fff; }
  .ha-grab-no-result { color: var(--muted); font-size: 13px; text-align: center; padding: 10px 0; }
  .ha-grab-applied-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ha); font-weight: 600; margin-top: 6px; }
  .ha-grab-unapply-btn { padding: 3px 8px; border: 1.5px solid var(--danger); border-radius: 6px; background: #fff; color: var(--danger); font-size: 12px; font-weight: 400; cursor: pointer; }

  /* ---------- Print ---------- */

  /* ---------- Small tweaks ---------- */
  @media (max-width: 380px) {
    .step-row { grid-template-columns: 36px 1fr 1fr 30px; gap: 6px; }
    .header-row { grid-template-columns: 36px 1fr 1fr 30px; gap: 6px; }
    .step-row input, .field-group input, .width-field input { padding: 10px 28px 10px 10px; font-size: 14px; }
    .ha-row-grid2, .ha-row-grid3 { grid-template-columns: 1fr; }
  }

  /* =============================================
     SKY BLUE FLAT DESIGN — 平面式樣式
     ============================================= */

  /* ── Header ── */
  header.top {
    background: #0369a1;
    padding: 14px 20px;
    box-shadow: none;
    border-bottom: 3px solid #075985;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  header.top .bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
  }
  header.top h1 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 0;
    flex: 1;
    text-align: center;
  }
  header.top .back-btn {
    position: absolute;
    left: 0;
  }
  header.top .back-btn,
  header.top .action-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    color: rgba(255,255,255,0.92);
    border-radius: 6px;
    transition: background 0.12s;
    cursor: pointer;
    font-size: 14px;
    box-shadow: none;
  }
  header.top .back-btn:active,
  header.top .action-btn:active { background: rgba(0,0,0,0.15); }
.subtitle { color: #7ec8e3; font-size: 14px; padding: 4px 0 0; letter-spacing: 0.2px; }

  /* ── Menu 卡片 ── */
  .menu-grid { gap: 10px; }
  .menu-card {
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 20px 16px 18px;
    box-shadow: none;
    transition: background 0.12s, border-color 0.12s;
  }
  .menu-card:active {
    background: var(--surface-2);
    border-color: var(--brand);
  }
  .menu-icon  { font-size: 30px; line-height: 1; margin-bottom: 2px; }
  .menu-label { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: 0.1px; }
  .menu-desc  { font-size: 11px; color: var(--muted); margin-top: 2px; }

  .menu-card.stair-card    { border-left: 4px solid #0284c7; }
  .menu-card.ha-card       { border-left: 4px solid #0369a1; }
  .menu-card.transfer-card { border-left: 4px solid #d97706; }
  .menu-card.cushion-card  { border-left: 4px solid #db2777; }
  .menu-card.airbed-card   { border-left: 4px solid #7c3aed; }
  .menu-card.wc-card       { border-left: 4px solid #0369a1; }
  .menu-card.walker-card   { border-left: 4px solid #059669; }
  .menu-card.shower-card   { border-left: 4px solid #0ea5e9; }

  /* ── 個案列表 ── */
  .new-case {
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
  }
  .new-case label { font-weight: 600; color: var(--ink); font-size: 14px; }
  .new-case button.primary {
    background: #0369a1;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: none;
    transition: background 0.12s;
  }
  .new-case button.primary:active { background: #075985; }
  .new-case input:focus,
  .new-case .date-row input:focus {
    border-color: #0369a1;
    background: #fff;
    box-shadow: none;
    outline: none;
  }
  .list-header h2 { font-size: 15px; font-weight: 700; color: var(--ink); }
  .count-badge {
    font-size: 12px;
    background: var(--surface-2);
    color: var(--brand);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
  }
  /* 跟著同一排的筆數徽章走：平面式樣沒有圓角藥丸，兩個並排的東西形狀不一樣會
     很雜。顏色仍照狀態分，那是這個徽章存在的理由。 */
  .list-header .cloud-status-badge {
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    background: var(--surface-2);
    border-color: transparent;
    color: var(--brand);
  }
  .list-header .cloud-status-badge[data-tone="ok"] { background: #ecfdf5; color: #047857; border-color: transparent; }
  .list-header .cloud-status-badge[data-tone="failed"] { background: #fef2f2; color: #b91c1c; border-color: transparent; }
  .list-header .cloud-status-badge[data-tone="conflict"] { background: #fffbeb; color: #b45309; border-color: transparent; }
  .list-header .cloud-status-badge[data-tone="readonly"] { background: #eff6ff; color: #1d4ed8; border-color: transparent; }

  .case-item {
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
    transition: background 0.12s, border-color 0.12s;
  }
  .case-item:active {
    background: var(--surface-2);
    border-color: var(--brand);
  }
  .case-item .name { font-weight: 700; font-size: 15px; }
  .case-item .open-btn {
    background: #0369a1;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
    transition: background 0.12s;
  }
  .case-item .open-btn:active { background: #075985; }
  .case-item .del-btn {
    border: 2px solid #fca5a5;
    color: var(--danger);
    border-radius: 8px;
    background: #fff1f2;
  }

  /* ── 編輯器 ── */
  .case-title-wrap {
    background: #ffffff;
    border: 2px solid var(--line);
    border-radius: 10px;
    box-shadow: none;
  }
  .save-indicator.saved { color: var(--ok); font-weight: 700; }

  .block { border-radius: 10px; box-shadow: none; }
  .step-row input:focus,
  .field-group input:focus,
  .width-field input:focus {
    border-color: var(--stair);
    box-shadow: none;
    background: #fff;
    outline: none;
  }
  .block.platform .field-group input:focus,
  .block.platform .width-field input:focus {
    border-color: var(--platform);
    box-shadow: none;
  }
  .flow-btn.stair    { border: 2px dashed #7dd3fc; color: var(--brand); background: #f0f9ff; border-radius: 8px; }
  .flow-btn.platform { border: 2px dashed #fcd34d; color: var(--platform); background: #fffbeb; border-radius: 8px; }
  .flow-btn:active   { background: var(--surface-2); opacity: 1; }

  .calc-btn {
    background: #0369a1;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: none;
    transition: background 0.12s;
  }
  .calc-btn:active  { background: #075985; }
  .calc-btn:disabled { background: var(--muted); opacity: 0.6; }

  /* ── 結果 Modal ── */
  .results-overlay { background: rgba(4,28,45,0.5); }
  .results-modal {
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    border-top: 3px solid var(--brand);
  }
  .results-modal h2 { color: var(--brand); font-size: 19px; font-weight: 700; }
  table.results thead th { background: #0369a1; letter-spacing: 0.4px; }
  table.results td.label { background: var(--surface-2); color: var(--ink-soft); font-weight: 600; }
  .results-actions button { border-radius: 8px; font-weight: 600; }
  .results-actions button.close {
    background: #0369a1;
    border-color: transparent;
    box-shadow: none;
    transition: background 0.12s;
  }
  .results-actions button.close:active { background: #075985; }

  /* ── Inline 計算結果 ── */
  .inline-results {
    margin-top: 16px;
    background: var(--card);
    border-radius: 12px;
    border: 1px solid var(--line);
    padding: 16px;
  }
  .inline-results-title {
    color: var(--brand);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .inline-results-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
  }
  .inline-results-actions button {
    flex: 1;
    min-width: 100px;
    padding: 10px 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: 1.5px solid var(--brand);
    background: transparent;
    color: var(--brand);
    cursor: pointer;
  }
  .inline-results-actions button:active {
    background: var(--brand);
    color: #fff;
  }

  select:focus, textarea:focus {
    border-color: #0369a1 !important;
    box-shadow: none;
    outline: none;
  }

  .toast {
    background: #0c2a3d;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: none;
    border: 1px solid #1e4a6e;
  }

  /* ── FAB 返回按鈕 ── */
  #fabBack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0369a1;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    border: none;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, transform 0.1s;
    box-shadow: none;
  }
  #fabBack:active {
    background: #075985;
    transform: scale(0.93);
  }

  /* ── Platform type toggle ── */
  .platform-type-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  /* ── Eligibility Section ── */
  .elig-section {
    margin: 16px 0 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
  }
  .elig-section-title {
    padding: 10px 14px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
  }
  .elig-type-card {
    border-bottom: 1px solid var(--line);
  }
  .elig-type-card:last-child { border-bottom: none; }
  .elig-type-title {
    padding: 8px 14px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #888);
  }
  .elig-mode-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 14px 5px;
    flex-wrap: wrap;
  }
  .elig-mode-label {
    font-size: 13px;
    color: var(--ink-soft);
    min-width: 36px;
    padding-top: 2px;
    flex-shrink: 0;
  }
  .elig-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .elig-incomplete { background: #e5e7eb; color: #374151; }
  .elig-allow    { background: #d1fae5; color: #065f46; }
  .elig-warning  { background: #fef3c7; color: #92400e; }
  .elig-project  { background: #dbeafe; color: #1e3a8a; }
  .elig-forbidden{ background: #fee2e2; color: #991b1b; }
  .elig-detail { flex: 1; min-width: 0; }
  .elig-notes {
    margin: 2px 0 0;
    padding-left: 14px;
    list-style: disc;
  }
  .elig-notes li {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .elig-docs {
    font-size: 11px;
    color: var(--muted, #888);
    margin-top: 2px;
    line-height: 1.4;
  }
  @media (prefers-color-scheme: dark) {
  .elig-allow    { background: #064e3b; color: #6ee7b7; }
  .elig-incomplete { background: #374151; color: #e5e7eb; }
    .elig-warning  { background: #78350f; color: #fde68a; }
    .elig-project  { background: #1e3a8a; color: #bfdbfe; }
    .elig-forbidden{ background: #7f1d1d; color: #fca5a5; }
  }