/* pages.css — fragment 內頁專用樣式
 * 收容原本在 standalone HTML <style> 內的規則
 * 由 shell.html 載入，所有 fragment 共用
 */

/* ═══════════════════════════════════
   ENTRIES TIMELINE
   ═══════════════════════════════════ */
.tl-list {
  flex: 1;
  overflow-y: auto;
}
.tl-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted, #6b7785);
  font-size: 14px;
}
.tl-load-more {
  display: block;
  text-align: center;
  padding: 14px;
  font-size: 13px;
  color: var(--brand-secondary, #2f6f9c);
  cursor: pointer;
  border-top: 1px solid var(--line, #e5e7eb);
}
.tl-date-sep {
  padding: 6px 14px;
  background: #f5f7fa;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #6b7785);
  letter-spacing: 1px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.skeleton-card {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  display: flex;
  gap: 10px;
}
.skeleton-block {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: hv-shimmer 1.2s infinite;
  border-radius: 4px;
}
@keyframes hv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════
   SEARCH
   ═══════════════════════════════════ */
.sq-filter-area {
  background: #f0f4f8;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.sq-result-header {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted, #6b7785);
  background: #f5f7fa;
  border-bottom: 1px solid var(--line, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sq-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted, #6b7785);
  font-size: 14px;
}
.sq-loading {
  padding: 20px;
  text-align: center;
  color: var(--muted, #6b7785);
  font-size: 13px;
}
.sq-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 12px 14px;
  border-top: 1px solid var(--line, #e5e7eb);
}

@media (min-width: 1024px) {
  .sq-filter-area { padding: 14px 20px; }
  .sq-result-header { padding: 8px 20px; }
}

/* ═══════════════════════════════════
   REMINDERS
   ═══════════════════════════════════ */
.done-btn {
  background: var(--brand-primary, #1f7f9f);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rl-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted, #6b7785);
  font-size: 14px;
}
.rl-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted, #6b7785);
  font-size: 13px;
}
/* ═══════════════════════════════════
   SETTINGS
   ═══════════════════════════════════ */
.settings-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--font-body);
  font-family: var(--font-primary);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--dur-fast);
  box-sizing: border-box;
}
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--surface-elevated); }

/* ═══════════════════════════════════
   AUDIT
   ═══════════════════════════════════ */
@media (min-width: 700px) {
  .audit-card-list { display: none; }
}
.audit-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-sm);
  position: relative;
  overflow: hidden;
}
.audit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-gradient-bar);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
.pagination button {
  font-family: var(--font-primary);
  font-size: var(--font-body);
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  cursor: pointer;
  color: var(--text-primary);
}
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .pg-info { font-size: var(--font-caption); color: var(--text-secondary); }

/* ═══════════════════════════════════
   ACCOUNTS（list）
   ═══════════════════════════════════ */
.accounts-wrap { max-width: 600px; margin: 0 auto; }
.accounts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.accounts-title {
  font-size: var(--font-h2);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* ═══════════════════════════════════
   v2 LOCKED — 1:1 對齊 preview-v2-LOCKED.html
   抽自 mockup 內 <style>，class 名嚴格不變
   覆蓋順序：本區段在後，必要時可重設既有 class
   ═══════════════════════════════════ */
  /* === 頁面 mockup（取代原 .phone-screen，去掉手機外殼） === */
  .page-mockup {
    background: white;
    margin: 0 12px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    min-height: 620px;
  }
  .page-header {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .page-header .right {
    font-size: 12px;
    opacity: 0.92;
    font-weight: 400;
  }
  .page-body {
    flex: 1;
    overflow-y: auto;
  }
  .page-filter {
    background: #f0f4f8;
    padding: 10px 14px;
    display: flex;
    gap: 6px;
    font-size: 13px;
    flex-wrap: wrap;
    align-items: center;
  }
  /* 提醒頁篩選列：三顆等寬置中一排（全住民 / 全類別 / 排序）*/
  #rl-filterbar .dd { flex: 1; min-width: 0; }
  #rl-filterbar .dd > summary {
    padding: 8px 10px;
    min-height: 0;
    font-size: 12px;
    justify-content: center;
    gap: 4px;
  }
  /* .chip 基底已移到 components.css（2026-07 批次二合併重複定義，數值不變） */
  .chip.add {
    background: var(--brand-1);
    color: white;
    border: none;
    font-weight: 700;
    margin-left: auto;
  }
  .chip.brand2 {
    background: var(--brand-2);
    color: white;
    border: none;
    font-weight: 700;
  }
  .chip.warn { background: #fff3e0; color: var(--bad); border-color: var(--bad); }
  .chip.good { background: var(--good); color: white; border: none; }
  .chip.gold { background: var(--brand-gold); color: white; border: none; }
  /* 查詢頁篩選膠囊「選取態」：原本 .chip.active 無樣式 → 選了看不出來（item2）。
     用 brand-2 對齊狀態 chip（_paintActive 也設 inline brand-2），全頁選取色統一。
     涵蓋時間區間（今日/本週/本月/自訂）；狀態 chip 另有 inline 同色。
     過渡註記（2026-07 批次二）：時間 chips 已改用 .chip-filter（components.css）示範共用類，
     此規則仍保留供頁內其餘 .chip.active（狀態／急迫度／類別 chip）使用，待主包批次遷移 .chip-status 後可清理。*/
  .page-search .chip.active {
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2);
    font-weight: 700;
  }

  /* 點交事件簿：快速定位/deep-link 命中列高亮（藍綠左框＋淡底）；列底色未經 inline 設，class 生效 */
  .hv-ledger-row.located { background: rgba(43,127,184,0.07); box-shadow: inset 3px 0 0 var(--brand-2); }
  /* 「顯示全部 N 筆」一行（預設只列 5 筆時出現於事件簿底部）*/
  .hv-ledger-more {
    text-align: center; padding: 11px 14px; font-size: 12.5px; font-weight: 600;
    color: var(--brand-2); cursor: pointer; border-top: 1px solid #f0f3f6;
  }
  .hv-ledger-more:active { opacity: 0.7; }

  /* === 空狀態（P19；timeline / 租借 等共用）=== */
  .empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--muted);
  }
  .empty-state .es-ico {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 50%;
    background: #eef2f7;
    display: flex; align-items: center; justify-content: center;
  }
  .empty-state .es-ico svg { width: 28px; height: 28px; stroke: #aeb8c4; fill: none; }
  .empty-state .es-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
  .empty-state .es-sub { font-size: 13px; line-height: 1.6; margin-bottom: 16px; }

  /* === P17 動作軌跡 · 篩選列（第三輪：標題＋匯出同列右上 / 篩選 2×2 等寬網格）=== */
  .audit-filter { background: #f0f4f8; padding: 10px 14px 4px; }

  /* 標題 + 匯出：同一列、左右對齊 */
  .audit-filter-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
  }
  .audit-filter-title { font-size: 14px; font-weight: 700; color: var(--text); }

  /* 匯出 CSV：與 chip 同高同圓角（融入），唯一品牌綠字＋綠框＋下載圖示（分別） */
  .btn-export {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; color: var(--brand-1);
    border: 1px solid var(--brand-1); border-radius: 16px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; line-height: 1.2;
    cursor: pointer; flex: none;
  }
  .btn-export svg { display: block; }
  .btn-export:disabled { opacity: 0.55; cursor: default; }

  /* 篩選：2×2 等寬整齊網格 */
  .audit-filter-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px;
  }
  /* chip 化的表單控制項：白底、圓角、細框，填滿網格格 */
  .filter-chip {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.2;
    min-height: auto;
    width: 100%;
    box-sizing: border-box;
  }
  select.filter-chip { padding-right: 22px; }
  input.filter-chip[type="date"] { width: auto; }

  /* 自訂期間：起迄兩格（選「自訂期間」才出現）*/
  .audit-filter-custom { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
  .audit-filter-custom[hidden] { display: none; }
  .filter-sep { color: var(--muted); font-size: 12px; }

  /* === P17 動作軌跡：成功+失敗統一時間軸列（字級/風格一致，底色分級抓重點）===
     比照 specs/001-handover-system/preview-v2.html #p17 已 approve mockup */
  .alog { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
  .alog > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
  .alog > summary::-webkit-details-marker { display: none; }
  .alog .alog-time { font-size: 12px; color: var(--muted); flex: none; min-width: 84px; font-variant-numeric: tabular-nums; }
  .alog .alog-main { font-size: 13px; color: var(--text); flex: 1; line-height: 1.4; }
  .alog .alog-main b { font-weight: 700; }              /* 操作者粗體 */
  .alog .alog-pill { font-size: 10px; padding: 1px 7px; border-radius: 8px; flex: none; color: #fff; font-weight: 600; }
  .alog .alog-chev { color: var(--muted); flex: none; font-size: 13px; transition: transform 0.15s; }
  .alog[open] .alog-chev { transform: rotate(90deg); }
  .alog .alog-detail { padding: 0 14px 12px 14px; font-size: 12px; line-height: 1.6; }
  .alog .alog-detail .reason { font-weight: 600; margin-bottom: 4px; }
  .alog .alog-detail .meta2 { color: var(--muted); }
  .alog .alog-more { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--brand-2); text-decoration: none; font-weight: 700; cursor: pointer; }
  .alog .alog-danger-note { color: var(--bad); font-weight: 700; }
  /* 成功列展開：改了哪些欄位 from→to（列內精簡版）*/
  .alog .alog-diff { margin: 2px 0 0; }
  .alog .alog-diff .dline { display: flex; gap: 6px; padding: 2px 0; font-size: 12px; line-height: 1.5; }
  .alog .alog-diff .dlabel { color: var(--muted); flex: none; min-width: 72px; }
  .alog .alog-diff .dval { color: var(--text); flex: 1; word-break: break-word; }
  .alog .alog-diff .dval .dfrom { color: var(--muted); text-decoration: line-through; }
  .alog .alog-diff .dval .darrow { color: var(--muted); margin: 0 4px; }
  .alog .alog-diff .dval .dto { color: var(--text); font-weight: 700; }
  /* 〔更新〕小標籤（更新類動作才標；中性藍綠、不搶眼）*/
  .alog-tag-update {
    font-size: 11px; font-weight: 600; color: var(--brand-2);
    background: #eaf3f8; border-radius: 10px; padding: 1px 8px; flex: none;
  }
  /* 建立列摘要排版：主內容粗體 + 次要灰字 */
  .alog-create-main { font-size: 14px; font-weight: 700; color: var(--text); margin: 2px 0; line-height: 1.4; }
  .alog-create-meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
  /* 狀態變體：成功=純白（無 class）；失敗/錯誤/代改上色，動作字加重 */
  .alog.fail   { background: #fdf3f1; border-left-color: var(--bad); }
  .alog.fail   .act, .alog.fail   .alog-detail .reason { color: var(--bad); font-weight: 700; }
  .alog.fail   .alog-pill { background: var(--bad); }
  .alog.danger { background: #fdecea; border-left-color: var(--bad); }   /* 竄改等最嚴重 */
  .alog.danger .act, .alog.danger .alog-detail .reason { color: var(--bad); font-weight: 700; }
  .alog.danger .alog-pill { background: var(--bad); }
  .alog.err    { background: #fff6ed; border-left-color: #d98324; }
  .alog.err    .act, .alog.err    .alog-detail .reason { color: #a8621a; font-weight: 700; }
  .alog.err    .alog-pill { background: #d98324; }

  /* === P17b 動作軌跡 · 單筆完整細節頁 === */
  .alog-detail-page .ad-banner { padding: 16px 14px; border-bottom: 1px solid var(--line); }
  .alog-detail-page .ad-banner.bad  { background: #fdecea; border-bottom-color: #f0c8c0; }
  .alog-detail-page .ad-banner.err  { background: #fff6ed; border-bottom-color: #f0d8be; }
  .alog-detail-page .ad-banner.ok   { background: #eef7f1; border-bottom-color: #cfe6d8; }
  .alog-detail-page .ad-pill { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 600; color: #fff; }
  .alog-detail-page .ad-title { font-size: 17px; font-weight: 700; margin-top: 10px; }
  .alog-detail-page .ad-lead { font-size: 13px; margin-top: 5px; line-height: 1.5; }
  .alog-detail-page .ad-field { display: flex; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .alog-detail-page .ad-field .ad-k { width: 84px; flex: none; color: var(--muted); }
  .alog-detail-page .ad-field .ad-v { flex: 1; line-height: 1.5; word-break: break-word; }
  /* 成功列細節頁：改了哪些欄位 from→to（完整版）*/
  .alog-detail-page .ad-diff-head { padding: 12px 14px 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
  .alog-detail-page .ad-diff { display: flex; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .alog-detail-page .ad-diff .ad-k { width: 84px; flex: none; color: var(--muted); }
  .alog-detail-page .ad-diff .ad-v { flex: 1; line-height: 1.5; word-break: break-word; }
  .alog-detail-page .ad-diff .ad-from { color: var(--muted); text-decoration: line-through; }
  .alog-detail-page .ad-diff .ad-arrow { color: var(--muted); margin: 0 6px; }
  .alog-detail-page .ad-diff .ad-to { color: var(--text); font-weight: 600; }

  /* === 時間軸 entry === */
  .entry {
    display: flex;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 56px;
  }
  .entry-time {
    width: 60px;
    flex-shrink: 0;
  }
  .entry-time .t {
    font-weight: 700;
    font-size: 14px;
  }
  .entry-time .cat {
    margin-top: 4px;
    border-radius: 6px;
    font-size: 11px;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.4;
  }
  .entry-time .cat.med  { background: #e3f2fd; color: var(--cat-med); }
  .entry-time .cat.abn  { background: #ffeae6; color: var(--cat-abn); }
  .entry-time .cat.fam  { background: #f3e5f5; color: var(--cat-fam); }
  .entry-time .cat.oth  { background: #eceff1; color: var(--cat-oth); }
  .entry-time .cat.reh  { background: #e8f5ef; color: var(--cat-reh); }
  .entry-time .cat.rent   { background: #faf6ec; color: #9a7d3a; }
  .entry-time .cat.repair { background: #e3f2f2; color: #1a6e6e; }
  .entry-body { flex: 1; min-width: 0; }

  /* 新增/編輯事項 — 附圖上傳預覽縮圖 */
  #img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0;
  }
  .img-thumb-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
  }
  .img-thumb-wrap img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    background: #f0f4f8;
  }
  .img-thumb-wrap .img-compressing {
    position: absolute; inset: 0;
    background: rgba(15,20,22,0.55);
    color: white; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
  }
  .img-thumb-wrap .img-remove-btn {
    position: absolute;
    top: -8px; right: -8px;
    width: 22px; height: 22px;
    border: 0; padding: 0;
    background: var(--bad); color: white;
    border-radius: 50%;
    font-size: 13px; line-height: 22px; text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  #img-add-btn {
    width: 72px;
    height: 72px;
    background: #f0f4f8;
    border: 2px dashed var(--brand-1);
    color: var(--brand-1);
    font-size: 28px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
  }
  /* ════════════════════════════════════════════════════════════════
     === HvCard 全站共用卡片（版型 B · 2026-06-07 Hau 定案）===
     視覺真相：preview-v2.html .bcard 系列。元件：core/card.js → window.HvCard。
     全站卡片地基；後續 feature wave 不動本段，所需 class 一次備齊。
     不動上方既有 .entry 規則（遷移期並存利回滾）。
     ════════════════════════════════════════════════════════════════ */

  /* ── outline 標籤 chip：11px 彩字＋同色細框＋透明底，永不換行 ── */
  .tag-o {
    display: inline-block; white-space: nowrap;
    font-size: 11px; line-height: 1.5; font-weight: 700;
    padding: 0 7px; border-radius: 8px;
    border: 1px solid currentColor; background: transparent;
  }
  .tag-o.cat-abn  { color: var(--cat-abn); }
  .tag-o.cat-med  { color: var(--cat-med); }
  .tag-o.cat-fam  { color: var(--cat-fam); }
  .tag-o.cat-oth  { color: var(--cat-oth); }
  .tag-o.cat-reh  { color: var(--cat-reh); }
  .tag-o.bad      { color: var(--bad); }
  .tag-o.good     { color: var(--good); }
  .tag-o.repair   { color: #1a6e6e; }
  .tag-o.rent     { color: #9a7d3a; }
  .tag-o.muted    { color: var(--muted); border-color: #cfd6db; }
  .tag-o.brand2   { color: var(--brand-2); }

  /* === 卡片版型 B（全站統一）===
     左右兩欄：左欄固定 60px 放 1 主標籤（outline、nowrap、置頂對齊名字）；右欄三層 L1/L2/L3。 */
  .bcard {
    display: flex; gap: 10px;
    padding: 14px;
    background: var(--bg-card);   /* 白底，與頁面灰底區分（特殊狀態 .alert/.tint-*/.revoked 仍覆蓋）*/
    border-bottom: 1px solid var(--line);
    min-height: 56px;
  }
  /* 左 4px accent 細條＝主狀態色（一般綠；以下類別覆蓋）*/
  .bcard { border-left: 4px solid var(--brand-1); }
  .bcard.acc-bad   { border-left-color: var(--bad); }
  .bcard.acc-good  { border-left-color: var(--good); }
  .bcard.acc-gold  { border-left-color: var(--brand-gold); }
  .bcard.acc-repair{ border-left-color: #1a6e6e; }
  .bcard.acc-entry { border-left-color: #2b7fb8; }
  .bcard.acc-muted { border-left-color: var(--muted); }
  .bcard.acc-teal  { border-left-color: #1f9f9f; }
  /* 嚴重逾期：整卡轉紅（比淡紅更明顯）表達，不另設標籤 */
  .bcard.alert { background: #fdeae6; }
  /* 一般逾期/負向底（淡紅）*/
  .bcard.tint-bad { background: #fef5f3; }
  /* 達標底（淡綠）*/
  .bcard.tint-good { background: #fafdfb; }
  /* 已撤銷：整卡淡化 */
  .bcard.revoked { background: #f7f9fb; opacity: 0.85; }
  .bcard.revoked .strike { text-decoration: line-through; color: var(--muted); }
  /* 已交班（前班交付）：淡化 */
  .bcard.handed { opacity: 0.5; }
  /* 左欄：固定寬、置頂、永遠 1 顆主標籤 */
  .bcard-left { flex: 0 0 60px; width: 60px; }
  .bcard-left .tag-o { white-space: nowrap; }
  /* 右欄：L1 主標題 / L2 內容 / L3 灰字 */
  .bcard-main { flex: 1; min-width: 0; }
  /* L1 主標題行：標題 15px 粗；急迫度等次要標籤放標題行右側 */
  .bcard-main .bcard-title {
    font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  /* 標題右標籤群靠右（B 案）：名稱完整不截、太擠時整段掉下一行仍靠右、標籤不被壓縮 */
  .bcard-main .bcard-title-tags {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  }
  .bcard-main .bcard-title.strike { text-decoration: line-through; color: var(--muted); }
  /* L2 內容：14px 完整換行 */
  .bcard-main .bcard-text { font-size: 14px; color: var(--text); margin-top: 6px; line-height: 1.5; }
  .bcard-main .bcard-text.strike { text-decoration: line-through; color: var(--muted); }
  /* L3 次要灰字：12px 灰，可換行（負向用 --bad）*/
  .bcard-main .bcard-gray { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
  /* L3 多欄位＝一欄位一行：相鄰灰字行間距收斂為 4px（不擠不鬆）*/
  .bcard-main .bcard-gray + .bcard-gray { margin-top: 4px; }
  .bcard-main .bcard-gray.bad { color: var(--bad); }
  .bcard-main .bcard-gray.strong { font-weight: 600; }

  /* === 主頁緊急報修「釘選區」暖橙覆蓋（scoped；不污染報修管理頁）===
     釘選區容器掛 .hc-pin-urgent，內部用現成 HvRepairCard 輸出的 .bcard。
     只在此 scope 把 accent 左條 / 卡底 / 緊急標 改暖橙（非紅，避免視覺疲勞）。
     視覺真相：preview-v2.html #p7c。色值＝ Hau 定案（左條 #d9622e / 底 #fdf1ec /
     標題＆緊急字 #b34a1d / 緊急標邊框 #e0a78a / 筆數膠囊底 #fbe6dc）。*/
  .hc-pin-urgent { display: block; }
  /* 標題列：暖橙字「緊急待處理」+ 灰小字「釘選至結單」+ 右側暖橙筆數膠囊 */
  .hc-pin-urgent .hc-pin-head {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px 6px; font-size: 13px;
  }
  .hc-pin-urgent .hc-pin-title { color: #b34a1d; font-weight: 700; }
  .hc-pin-urgent .hc-pin-hint  { font-size: 11px; color: var(--muted); }
  .hc-pin-urgent .hc-pin-count {
    margin-left: auto; font-size: 11px; font-weight: 700;
    color: #b34a1d; background: #fbe6dc; border-radius: 10px; padding: 1px 9px;
  }
  /* 釘選區內每張報修卡：accent 左條暖橙、卡底淡橙（覆蓋 .acc-repair 的 teal）*/
  .hc-pin-urgent .bcard {
    border-left-color: #d9622e !important;
    background: #fdf1ec;
  }
  /* 標題（主旨）暖橙；「緊急」outline 標暖橙字 + 暖橙邊框（覆蓋 .tag-o.bad 的紅）*/
  .hc-pin-urgent .bcard-title { color: #b34a1d; }
  .hc-pin-urgent .bcard-title .tag-o.bad {
    color: #b34a1d; border-color: #e0a78a;
  }
  /* 下方分界線「以下依時間排序」（兩側細線 + 灰小字）*/
  .hc-pin-urgent .hc-pin-divider {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px;
  }
  .hc-pin-urgent .hc-pin-divider .hc-pin-line {
    flex: 1; height: 1px; background: var(--line);
  }
  .hc-pin-urgent .hc-pin-divider .hc-pin-divider-text {
    font-size: 11px; color: var(--muted);
  }

  /* === 卡片變體：頭像左欄 + 右側動作鈕直排（住民卡 P12）=== */
  /* 整卡可點＝拉伸式連結（.bcard-stretch 覆蓋整卡）；頭像/姓名/動作鈕為兄弟層，
     動作鈕 z-index 疊在連結上方故為獨立點擊目標，不觸發整卡導航。 */
  /* 整卡可點（任何 href 卡）：position:relative 供 .bcard-stretch 絕對覆蓋。不含置中。 */
  .bcard.clickable { position: relative; }
  /* 住民卡（頭像左欄）才垂直置中頭像對齊姓名；多行內容卡（報修/租借）不套此、左欄維持置頂 */
  .bcard.resident { align-items: center; }
  /* 拉伸連結疊在頭像/姓名（靜態層）之上 → 點該區即整卡導航 */
  .bcard-stretch {
    position: absolute; inset: 0; z-index: 1;
    text-indent: -9999px; overflow: hidden;
  }
  /* 動作鈕欄再疊上一層 → 蓋過拉伸連結，成為獨立點擊目標（任何 clickable 卡）*/
  .bcard.clickable > .bcard-actions { position: relative; z-index: 2; }
  /* 防禦：整卡可點卡內若有縮圖，縮圖需疊在拉伸連結之上才點得開 lightbox（非整卡導航）*/
  .bcard.clickable .imgs { position: relative; z-index: 2; }
  /* 顯示用縮圖（card.js _buildThumbs emit .imgs 容器 + .img-thumb 圖，圖無 inline 寬高）
   * 缺此規則時圖以原圖尺寸渲染 → 超大張；尺寸對齊詳細頁/上傳預覽 72px */
  .imgs { display: flex; flex-wrap: wrap; gap: 6px; }
  .img-thumb {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
  }
  /* 左欄放頭像取代主標籤；頭像垂直置中對齊姓名簡歷 */
  .bcard-left.avatar-slot { display: flex; justify-content: center; align-items: center; }
  .bcard-left .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
  }
  /* 退住/撤銷（淡化卡）頭像轉灰；inactive 為 card.js avatar faded 對應 class */
  .bcard.revoked .bcard-left .avatar,
  .bcard-left .avatar.inactive { background: var(--muted); }
  /* 右側動作鈕直排：垂直並排小鈕，獨立點擊（非整卡的一部分）*/
  .bcard-actions {
    flex-shrink: 0; align-self: center;
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
  }
  .bcard-actions .chip {
    justify-content: center; padding: 5px 10px; font-size: 12px;
    white-space: nowrap; cursor: pointer;
  }
  /* 停用/撤銷＝紅 outline（非填滿）*/
  .bcard-actions .chip.warn { background: white; color: var(--bad); border-color: var(--bad); }
  /* 復原＝金 outline */
  .bcard-actions .chip.gold { background: white; color: var(--brand-gold); border: 1px solid var(--brand-gold); }
  .bcard-actions details.modal { line-height: 1; }
  .bcard-actions details.modal > summary { list-style: none; }
  .bcard-actions details.modal > summary::-webkit-details-marker { display: none; }

  /* ════════════════════════════════════════════════════════════════
     === 查詢頁（features/search · segmented + 住民 sheet + 更多篩選 fold）===
     視覺真相：preview-v2.html。本段一次備齊查詢頁所需 class，後續 wave 不動。
     ════════════════════════════════════════════════════════════════ */

  /* === 頂部分頁標籤（segmented tabs · 事項/租借/報修/點交）===
     .seg-tabs/.seg-tab 已移到 components.css（2026-07 批次二共用元件，數值不變）。 */

  /* === 住民篩選收合列（點開 sheet）=== */
  .resident-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    margin-bottom: 14px;
    font-size: 14px;
    cursor: pointer;
  }
  .resident-row .r-label { color: var(--muted); font-size: 12px; }
  .resident-row .r-value { flex: 1; margin-left: 12px; color: var(--text); }
  .resident-row .r-arrow { color: var(--muted); font-size: 12px; margin-left: 8px; }
  .resident-row .r-arrow::before { content: "▾"; }

  /* === 住民選擇 sheet（全螢幕由下往上；CSS checkbox toggle 控制顯隱）=== */
  .sheet-toggle { display: none; }
  .resident-sheet {
    position: fixed; inset: 0;
    display: none;
    z-index: 1000;
  }
  .sheet-toggle:checked ~ .resident-sheet { display: block; }
  .resident-sheet .sheet-scrim {
    position: absolute; inset: 0;
    background: rgba(15,20,22,0.38);
  }
  .resident-sheet .sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 86%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
  }
  .resident-sheet .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .resident-sheet .sheet-head .sh-title { font-size: 16px; font-weight: 700; }
  .resident-sheet .sheet-head .sh-close {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 18px; cursor: pointer;
  }
  .resident-sheet .sheet-search { padding: 12px 16px 8px; flex-shrink: 0; }
  .resident-sheet .sheet-search .input { background: #f7f9fb; }
  .resident-sheet .sheet-list { flex: 1; overflow-y: auto; padding: 4px 0; }
  .res-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    font-size: 15px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }
  .res-item .res-box {
    width: 20px; height: 20px; border-radius: 5px;
    border: 1.5px solid #c2cad2; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; line-height: 1;
  }
  .res-item.sel .res-box { background: var(--brand-1); border-color: var(--brand-1); }
  .res-item.sel .res-box::before { content: "✓"; }
  .resident-sheet .sheet-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
  }
  /* 清除／全選：補成按鈕外觀（原本是純文字，只有「確定」像按鈕，item4）*/
  .resident-sheet .sheet-foot .sf-clear,
  .resident-sheet .sheet-foot .sf-all {
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    text-align: center; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .resident-sheet .sheet-foot .sf-clear { color: var(--muted); }
  .resident-sheet .sheet-foot .sf-all { color: var(--brand-2); border-color: var(--brand-2); }
  .resident-sheet .sheet-foot .sf-ok {
    flex: 1; text-align: center;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff; font-weight: 700; font-size: 15px;
    padding: 12px; border-radius: 10px; cursor: pointer;
  }

  /* === 更多篩選可摺疊列（次要篩選收合）=== */
  .more-filter { border-top: 1px solid var(--line); margin-top: 2px; }
  .more-filter > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 2px; font-size: 13px; color: var(--brand-2); font-weight: 600;
  }
  .more-filter > summary::-webkit-details-marker { display: none; }
  .more-filter > summary .mf-arrow { color: var(--muted); font-size: 11px; margin-left: 8px; }
  .more-filter > summary .mf-arrow::before { content: "▾"; }
  .more-filter[open] > summary .mf-arrow::before { content: "▴"; }
  .more-filter .mf-body { padding: 4px 0 2px; border-top: 1px solid var(--line); }
  /* 顯示已停用類別 toggle：開關 + 連動的停用類別 chips */
  .mf-toggle { display: none; }
  .mf-switch {
    position: relative; width: 34px; height: 18px; border-radius: 10px;
    background: #cfd6dd; flex-shrink: 0; transition: background .15s;
  }
  .mf-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform .15s;
  }
  .mf-toggle:checked ~ label .mf-switch { background: var(--brand-1); }
  .mf-toggle:checked ~ label .mf-switch::after { transform: translateX(16px); }
  /* 停用類別 chips：預設隱藏（toggle off），打開 toggle 才出現 */
  .mf-disabled-cats { display: none; }
  .mf-toggle:checked ~ .mf-disabled-cats { display: block; }

  /* === 表單 === */
  .form-row {
    padding: 12px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
  }
  .form-row .label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 6px;
  }
  .form-row .hint {
    color: var(--warn);
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.4;
  }
  .form-row .hint.good { color: var(--good); }
  .form-row .hint.muted { color: var(--muted); }
  .input {
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: var(--font-input);   /* 16px：防 iOS 聚焦放大，見 tokens.css */
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .textarea {
    background: #f7f9fb;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: var(--font-input);
    min-height: 72px;
    line-height: 1.5;
  }
  /* 主要動作鈕（查詢／送出）：全站降一階高度（item7：原 padding14/min48 太高一顆）*/
  .submit-btn {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: white;
    text-align: center;
    padding: 11px 14px;
    border-radius: 10px;
    margin: 16px 14px;
    font-weight: 700;
    font-size: 15px;
    min-height: 42px;
    line-height: 20px;
    cursor: pointer;
  }
  .submit-btn.ghost {
    background: white;
    color: var(--brand-2);
    border: 1px solid var(--brand-2);
  }
  .submit-btn.danger { background: var(--bad); }

  /* === 密碼強度條 === */
  .strength-bars {
    display: flex;
    gap: 4px;
    margin-top: 8px;
  }
  .strength-bars .bar {
    flex: 1;
    height: 5px;
    background: var(--line);
    border-radius: 2px;
  }
  .strength-bars .bar.on1 { background: var(--bad); }
  .strength-bars .bar.on2 { background: var(--brand-gold); }
  .strength-bars .bar.on3 { background: var(--good); }

  /* === Modal (CSS-only details/summary) === */
  .modal { position: relative; }
  .modal summary { list-style: none; cursor: pointer; }
  .modal summary::-webkit-details-marker { display: none; }
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 50;
  }
  .modal-card {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 360px;
    background: white;
    border-radius: 14px;
    padding: 20px;
    z-index: 51;
    border-top: 4px solid var(--bad);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  }
  .modal[open] .modal-overlay { display: block; }
  .modal[open] .modal-card { display: block; }
  .modal-card.warn { border-top-color: var(--warn); }
  .modal-card.brand { border-top-color: var(--brand-1); }
  .modal-card .modal-title {
    font-weight: 700;
    color: var(--bad);
    margin-bottom: 10px;
    font-size: 16px;
  }
  .modal-card.warn .modal-title { color: var(--warn); }
  .modal-card.brand .modal-title { color: var(--brand-1); }
  .modal-card .modal-btns {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }
  .modal-card .modal-btns .btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-card .btn.cancel { background: #eef1f5; color: var(--text); }
  .modal-card .btn.confirm { background: var(--bad); color: white; }
  .modal-card .btn.confirm.warn { background: var(--warn); }
  .modal-card .btn.confirm.brand { background: var(--brand-1); }

  /* === Dropdown (details/summary) === */
  details.dd { border-bottom: 1px solid var(--line); }
  details.dd > summary {
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    min-height: 44px;
  }
  details.dd > summary::-webkit-details-marker { display: none; }
  details.dd > summary::after {
    content: "▼";
    font-size: 10px;
    color: var(--muted);
  }
  details.dd[open] > summary::after { content: "▲"; }
  details.dd .dd-list {
    background: #fafbfc;
    border-top: 1px solid var(--line);
  }
  details.dd .dd-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  details.dd .dd-item:last-child { border-bottom: 0; }
  details.dd .dd-item.active {
    background: #e3f2fd;
    color: var(--brand-2);
    font-weight: 600;
  }

  /* === 編輯歷史摺疊 === */
  details.history { border-top: 1px solid var(--line); background: #fff8e1; }
  details.history > summary {
    padding: 10px 14px;
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #b87333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  details.history > summary::-webkit-details-marker { display: none; }
  details.history > summary::after { content: "▼"; font-size: 10px; }
  details.history[open] > summary::after { content: "▲"; }
  /* === Audit log === */
  .audit-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    line-height: 1.5;
  }
  .audit-row .ts { color: var(--brand-2); font-weight: 700; }
  .audit-row .action { color: var(--warn); font-weight: 600; }
  .audit-row .meta { color: var(--muted); font-size: 11px; margin-top: 4px; }

  /* === Tag === */
  .tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  .tag.yes { background: #d4edda; color: var(--good); }
  .tag.no  { background: #f4d7d0; color: var(--bad); }
  .tag.role-super { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: white; }
  .tag.role-leader { background: #2b7fb8; color: white; }
  .tag.role-staff { background: #4ca870; color: white; }
  .tag.role-system { background: var(--muted); color: white; }

  /* === Note === */
  .note {
    background: #fff8e1;
    border-left: 4px solid var(--brand-gold);
    padding: 12px 14px;
    margin: 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
  }

  /* === 設定頁分群 === */
  .settings-group { margin-top: 8px; }
  .settings-group .group-title {
    padding: 14px 14px 6px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .settings-item {
    display: flex;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    min-height: 56px;
    align-items: center;
    color: var(--text);
    text-decoration: none;
    background: white;
  }
  .settings-item:active { background: #f7f9fb; }
  .settings-item .ic {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 14px;
  }
  .settings-item .ic.gold { background: var(--brand-gold); }
  .settings-item .ic.bad { background: var(--bad); }
  .settings-item .ic.muted { background: var(--muted); }
  .settings-item .name { flex: 1; }
  .settings-item .arrow { color: var(--muted); font-size: 14px; }

  /* === 底部 tab bar === */
  .tab-bar {
    background: white;
    border-top: 1px solid var(--line);
    display: flex;
    padding: 6px 0 10px;
    flex-shrink: 0;
  }
  .tab-item {
    flex: 1;
    text-align: center;
    color: var(--muted);
    padding: 6px 2px;
    position: relative;
    text-decoration: none;
    display: block;
  }
  .tab-item .ic {
    font-size: 20px;
    line-height: 1;
    display: block;
    margin-bottom: 4px;
    font-weight: 300;
  }
  .tab-item .label { font-size: 11px; }
  .tab-item.active { color: var(--brand-1); }
  .tab-item.active .ic { font-weight: 700; }
  .tab-item.active .label { font-weight: 700; }
  .tab-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    border-radius: 0 0 2px 2px;
  }
  .tab-item .tab-badge {
    position: absolute;
    top: 0;
    right: 22%;
    background: var(--bad);
    color: white;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
  }

  /* === 帳號項目 === */
  .account-item {
    padding: 14px;
    border-bottom: 1px solid var(--line);
  }
  .account-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .account-item .ai {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    flex-shrink: 0;
  }
  .account-item .ai.super { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
  .account-item .ai.leader { background: var(--brand-2); }
  .account-item .ai.staff { background: var(--good); }
  .account-item .ai.system { background: var(--muted); }
  .account-item .name { flex: 1; }
  .account-item .name strong { font-size: 15px; display: block; margin-bottom: 4px; }
  .account-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 6px;
    padding-left: 52px;
  }

  /* === 類別管理 === */
  .cat-row {
    display: flex;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    min-height: 56px;
  }
  .cat-row .grip { color: var(--muted); cursor: grab; font-size: 14px; }
  .cat-row .swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .cat-row .info { flex: 1; }
  .cat-row .info strong { font-size: 15px; }
  .cat-row .info .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .cat-row.inactive { opacity: 0.5; }

  /* === footer === */
  footer {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 30px 20px 40px;
  }

  /* === 小工具：分隔線 === */
  .divider-line {
    height: 1px;
    background: var(--line);
    margin: 0 14px;
  }

  a { color: var(--brand-2); }
  a:visited { color: var(--brand-2); }
/* === v2 brand tokens 補丁 === */
:root {
  --brand-1: #1f7f9f;
  --brand-2: #2f6f9c;
  --cat-oth: #6b7785;
  --cat-reh: #2f9b75;
  --cat-rent: #9a7d3a;
  --cat-repair: #1a6e6e;
  --good: #2f9b75;
}

/* === 提醒處理紀錄（done-history）=== */
.done-history {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f7fbf9;
  border: 1px solid #d4ead9;
  border-radius: 8px;
}
.done-history-title {
  font-size: 12px;
  color: var(--good);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.done-history-title a {
  color: var(--brand-2);
  font-size: 11px;
  text-decoration: none;
}
.done-item {
  border-left: 2px solid var(--good);
  padding: 6px 0 6px 10px;
  margin-bottom: 8px;
  position: relative;
}
.done-item:last-child { margin-bottom: 0; }
.done-item .meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
}
.done-item .meta .who {
  color: var(--brand-2);
  font-weight: 600;
}
.done-item .note {
  background: transparent;
  border-left: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* entry-card 卡片可點 cursor + 防按鈕 hover stopPropagation 視覺 */
.entry.clickable { cursor: pointer; }
.entry.clickable:hover { background: #fafbfc; }

/* === 事項詳細頁 detail-page === */
.detail-page {
  background: white;
  border-radius: 0;
  overflow: hidden;
  margin: 0;
}
.detail-page .topbar {
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color: white;
  padding: 12px 14px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.detail-page .topbar .back {
  font-size: 18px;
  line-height: 1;
}
.detail-page .body { padding: 14px; }
.detail-page .meta-row {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  word-break: break-word;
}
.detail-page .meta-row .label {
  color: var(--muted);
  display: inline-block;
  width: 64px;
  flex-shrink: 0;
}
.detail-page .meta-row .value {
  flex: 1;
}
.detail-page .section-title {
  font-size: 12px;
  color: var(--brand-2);
  font-weight: 600;
  margin: 14px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.detail-page .edit-history {
  background: #fffaf0;
  border: 1px solid #ead9d0;
  border-radius: 8px;
  padding: 10px 12px;
}
.detail-page .edit-history .done-item {
  border-left-color: var(--warn);
}
.detail-page .edit-history .done-item.original {
  border-left-color: var(--muted);
}
.detail-page .edit-history .done-item .meta .who {
  color: #b87333;
}
.detail-page .edit-history .done-item.original .meta .who {
  color: var(--muted);
}
.detail-page .access-hint {
  margin-top: 14px;
  padding: 10px;
  background: #eef5f3;
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.detail-page .action-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.detail-page .action-row button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.detail-page .action-row .btn-edit {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: white;
}
.detail-page .action-row .btn-revoke {
  background: var(--bad);
  color: white;
}

/* === Shell context override：實際 app 內 .page-mockup 取消手機 frame 樣式 ===
   .page-mockup 是 LOCKED preview gallery 用來模擬手機 frame，
   實作頁面 #page-content 內必須移除 margin / 圓角 / overflow:hidden，避免內容被截斷 */
#page-content .page-mockup {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: auto;
}
#page-content .page-mockup .page-header { display: none; }
#page-content .page-mockup .page-body { overflow-y: visible; }
#page-content .page-mockup .tab-bar { display: none; }

/* === Lightbox：點圖看大圖 + 關閉按鈕 === */
#hv-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#hv-lightbox.open { display: flex; }
#hv-lightbox img {
  max-width: 96vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
#hv-lightbox .lb-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: white;
  font-size: 24px;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
#hv-lightbox .lb-close:active { background: rgba(255,255,255,0.3); }

/* ===================================================================== */
/* 本班待辦 · 直式時間軸（vtl-）— 交班首頁 P7 門面，定稿照搬 preview-v2     */
/* 一行一筆=一個時段 occurrence / 現在線=虛線+右端小時間 / 最右小[+]        */
/* 半屏捲動 + 現在線初始置中 / 有逾期整塊紅 / 住民與時間同字級             */
/* ===================================================================== */
.vtl-card { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(20,40,60,0.05); }
/* 有 >4h 嚴重逾期 → 整塊紅警示（紅框 + 淡紅底）；一般逾期不觸發（見 timeline.js anySevere） */
.vtl-card.has-over { border-color:rgba(200,88,74,0.55); box-shadow:0 1px 6px rgba(200,88,74,0.14); }

.vtl-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:linear-gradient(135deg, rgba(31,127,159,0.16), rgba(47,111,156,0.15)); border-bottom:1px solid rgba(31,127,159,0.18); }
.vtl-head .vtl-title { font-size:14px; font-weight:800; color:var(--brand-2); letter-spacing:0.3px; }
.vtl-head .vtl-stat { font-size:11.5px; color:var(--muted); white-space:nowrap; }
.vtl-head .vtl-stat b.over { color:var(--bad); }
.vtl-head .vtl-stat b.cur { color:var(--brand-1); }
/* 整塊紅：標題列紅底紅字、統計紅 */
.vtl-card.has-over .vtl-head { background:linear-gradient(135deg, rgba(200,88,74,0.10), rgba(200,88,74,0.05)); border-bottom-color:rgba(200,88,74,0.30); }
.vtl-card.has-over .vtl-head .vtl-title { color:var(--bad); }
.vtl-card.has-over .vtl-head .vtl-stat { color:#b15448; }

/* 捲動容器：限半屏、內部捲動 */
.vtl-scroll { max-height:50vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* 整塊紅：淡紅底鋪滿捲動區 */
.vtl-card.has-over .vtl-scroll { background:rgba(200,88,74,0.035); }

/* 軸容器：左側預留主幹欄寬 */
.vtl-track { position:relative; padding:6px 14px 10px 0; }
/* 直軸主幹：壓在節點圓心線上（節點中心 = row padding 14 + node 半徑 7 = 21px；線寬 2 → left 20px 使線中心落在 21px） */
.vtl-track::before { content:""; position:absolute; left:20px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg, rgba(31,127,159,0.45), rgba(47,111,156,0.30)); border-radius:2px; }
.vtl-card.has-over .vtl-track::before { background:linear-gradient(180deg, rgba(200,88,74,0.40), rgba(47,111,156,0.25)); }

/* 單筆列：兩行（主行＋小灰副行）緊湊；[+] 垂直置中跨兩行 → align-items:center */
.vtl-row { position:relative; display:flex; align-items:center; gap:9px; padding:5px 14px 5px 14px; min-width:0; }
/* 節點欄（小）：與整筆中線對齊（align-items:center 已置中） */
.vtl-node { position:relative; z-index:2; flex:none; width:14px; height:14px; display:flex; align-items:center; justify-content:center; }
.vtl-dot { width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:800; line-height:1; box-shadow:0 0 0 3px var(--card); }
.vtl-dot.over { background:var(--bad); color:#fff; }              /* 漏 ✕ */
.vtl-dot.todo { background:var(--card); color:#9aa5ac; border:2px solid #cdd5da; }  /* 待 ○（空心） */
.vtl-dot.done { background:#2c8a4b; color:#fff; }                 /* 做 ✓ */
.vtl-card.has-over .vtl-dot.todo { box-shadow:0 0 0 3px rgba(255,250,249,1); }

/* 內容兩行容器：主行 + 副行（直排、收斂行距） */
.vtl-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }

/* 主行：時間（粗）· 住民（不斷行）。乾淨。 */
.vtl-main { display:flex; align-items:baseline; gap:7px; white-space:nowrap; min-width:0; }
.vtl-time { font-size:12.5px; font-weight:800; color:var(--text); white-space:nowrap; flex:none; font-variant-numeric:tabular-nums; }
.vtl-time.over { color:var(--bad); }
/* 住民名：與時間同字級（12.5px）、不斷行；空間不足才縮並省略 */
.vtl-name { font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.vtl-done-tag { font-size:10.5px; color:#2c8a4b; font-weight:700; white-space:nowrap; flex:none; margin-left:auto; }

/* 副行（小灰字）：類別小色點 · 主旨；項目要看得清楚，太長才省略 */
.vtl-sub { display:flex; align-items:center; gap:5px; min-width:0; font-size:12px; line-height:1.3; color:var(--muted); }
/* 類別：小色點 + 色字（保留類別識別色；color 由 JS inline 設為該類別色，色點吃 currentColor） */
.vtl-cat { display:inline-flex; align-items:center; gap:4px; flex:none; font-weight:700; white-space:nowrap; color:var(--cat-oth); }
.vtl-cat::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.vtl-cat.med { color:var(--cat-med); } .vtl-cat.abn { color:var(--cat-abn); }
.vtl-cat.fam { color:var(--cat-fam); } .vtl-cat.reh { color:var(--cat-reh); } .vtl-cat.oth { color:var(--cat-oth); }
/* 副行分隔點 */
.vtl-sep { flex:none; color:#c3ccd2; }
/* 主旨/內容：撐滿剩餘空間，看得清楚，真的太長才省略 */
.vtl-topic { flex:1 1 auto; min-width:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 最右小 [+] 補登鈕：圓角框、品牌綠細框、框內一個 +；垂直置中跨兩行 */
.vtl-rec { flex:none; align-self:center; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; line-height:1; color:var(--brand-1); background:var(--card);
  border:1px solid var(--brand-1); border-radius:6px; text-decoration:none; cursor:pointer; padding:0; }
.vtl-rec:active { background:#f0f8f5; }

/* 已做：淡化（兩行一樣淡）＋ 刪除線 */
.vtl-row.is-done { opacity:0.5; }
.vtl-row.is-done .vtl-time, .vtl-row.is-done .vtl-name { font-weight:600; color:var(--muted); text-decoration:line-through; text-decoration-color:#c3ccd2; }
.vtl-row.is-done .vtl-cat { color:var(--muted) !important; }

/* 「現在」線：橫向虛線從直軸（21px）出發，右端寫小小的時間（低調） */
.vtl-now { position:relative; display:flex; align-items:center; margin:5px 0; padding:0 14px 0 21px; }
.vtl-now::before { content:""; flex:1; height:0; border-top:1.5px dashed rgba(47,111,156,0.40); margin-left:0; }
.vtl-now-time { flex:none; margin-left:8px; font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* 群組標頭（逾期 / 本班待做）：小字 */
.vtl-grp { padding:5px 14px 1px 37px; font-size:10.5px; font-weight:800; letter-spacing:0.5px; }
.vtl-grp.over { color:var(--bad); }
.vtl-grp.todo { color:var(--brand-1); }

/* 空狀態 / 載入中 / 錯誤（本班待辦無資料時） */
.vtl-msg { padding:14px; font-size:12px; color:var(--muted); text-align:center; }

/* ═══════════════════════════════════
   今日行程（D-3，hv_day_events）：列樣式抄 prototype.html .cal-card/.cal-row/.cal-t/.cal-x。
   home 頁沿用既有 .vtl-card/.vtl-head 外殼與其他主頁卡片統一（通知/本班待辦/今日動態皆同款），
   故本頁不再另包一層 .cal-card 外框（避免雙層邊框）；.cal-card 本身仍保留供未來需要獨立卡殼
   （非 vtl-card 情境）時複用。
   ═══════════════════════════════════ */
.cal-card { border:1px solid var(--border-subtle); border-radius:10px; background:#fff; overflow:hidden; }
.cal-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border-subtle); }
.cal-row:last-child { border-bottom:none; }
.cal-row.clickable { cursor:pointer; }
.cal-t { flex:none; font-size:13px; font-weight:700; color:var(--brand-2); font-variant-numeric:tabular-nums; min-width:42px; }
.cal-x { flex:1; min-width:0; font-size:13.5px; color:var(--text-primary); }
.cal-add-btn { flex:none; width:22px; height:22px; border-radius:50%; border:none; background:var(--brand-1); color:#fff; font-size:15px; line-height:1; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.cal-add-btn:active { opacity:0.85; }

/* ═══════════════════════════════════
   住民管理：手機／電腦分支（W4b，住民編號重設計）
   手機＝既有堆疊列表（#residents-mobile-view）；電腦＝一房一橫排（#residents-desktop-view .rooms-wrap）。
   CSS-only 分支，沿用全站慣例（同 shell.css sidebar/tab-bar 手法），不靠 JS 判斷平台。
   ═══════════════════════════════════ */
#residents-desktop-view { display: none; }
@media (min-width: 1024px) {
  #residents-mobile-view { display: none; }
  #residents-desktop-view { display: block; }
}

/* ===== 一房一橫排（畫面 3c 移植）===== */
.rooms-wrap { max-width: 1180px; width: 100%; margin: 0; padding: 18px 16px; box-sizing: border-box; }
.rooms-wrap .floor-head { font-size: 13px; font-weight: 800; color: var(--brand-2); letter-spacing: 0.5px; margin: 18px 0 8px; }
.rooms-wrap .floor-head:first-of-type { margin-top: 0; }
.residents-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* 右側動作組整組靠右（spacer 掛容器，移除內部建房鈕不影響定位）*/
.residents-toolbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.residents-toolbar .chip { cursor: pointer; border: 1px solid var(--line, #e5e7eb); background: #fff; }
.residents-toolbar .chip.active { background: var(--brand-2); color: #fff; border-color: var(--brand-2); font-weight: 700; }
.residents-toolbar .chip.brand1 { background: var(--brand-1); color: #fff; border: none; font-weight: 700; }
.room-row { display: flex; align-items: stretch; gap: 12px; background: #fff; border: 1px solid #e3e8ee; border-radius: 10px; box-shadow: 0 1px 4px rgba(20,40,60,0.05); padding: 12px 14px; margin-bottom: 10px; }
.room-label { flex: none; width: 78px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #eef2f5; padding-right: 12px; cursor: pointer; }
.room-no { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.room-meta { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.room-beds { flex: 1; display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
/* 床位固定等寬（不用 flex-grow，少床的房不會被撐寬 → 所有編號寬度一致）*/
.bed-cell { flex: 0 0 172px; width: 172px; box-sizing: border-box; display: flex; align-items: center; gap: 9px; border: 1px solid #e8edf2; border-radius: 8px; padding: 8px 10px; background: #fbfcfd; }
.bed-cell.empty { border-style: dashed; background: transparent; color: var(--muted); justify-content: center; font-size: 12px; }
.bed-code { flex: none; font-size: 11px; font-weight: 800; color: var(--brand-2); background: rgba(43,127,184,0.10); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.bed-cell.empty .bed-code { color: var(--muted); background: #eef2f5; }
.bed-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.bed-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; cursor: pointer; }
.bed-cell .bed-edit { margin-left: auto; flex: none; font-size: 15px; line-height: 1; color: #b6c0c8; cursor: pointer; }
/* 房間操作（改床位數／刪房，leader+ 專用；掛在 room-label 內，滑鼠移入房號觸發；
   room-label 固定 78px，兩鈕改上下堆疊＋整寬鋪滿，避免並排文字換行擠壓）*/
.room-actions { display: none; flex-direction: column; gap: 3px; margin-top: 6px; width: 100%; }
.room-row.editable .room-label:hover .room-actions,
.room-row.editable .room-actions.open { display: flex; }
.room-act-btn { width: 100%; box-sizing: border-box; font-size: 10px; padding: 2px 0; border-radius: 4px; border: 1px solid #cfd6db; background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap; }
.room-act-btn.danger { color: var(--bad); border-color: var(--bad); }
/* 建立房間：工具列鈕 + 底部虛線新房列 */
.add-room-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed #c3ccd2; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fafbfc; }
.add-room-row .arr-title { flex: none; font-size: 13px; font-weight: 700; color: var(--brand-1); }
.add-room-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.add-room-field .arf-label { color: var(--muted); }
.add-room-input { border: 1px solid #cfd6db; border-radius: 6px; padding: 5px 9px; font-size: 13px; background: #fff; font-family: inherit; }
/* 建立房間欄內的 HvDropdown（樓層選擇）：縮小到符合行內表單，不撐滿整列 */
.add-room-field details.dd { width: 108px; min-width: 108px; }
.add-room-field details.dd > summary { padding: 5px 9px; min-height: 0; font-size: 13px; }
.bed-count-chips { display: flex; gap: 5px; }
.bed-count-chips .bcc { font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid #cfd6db; background: #fff; color: var(--text); cursor: pointer; }
.bed-count-chips .bcc.on { background: var(--brand-1); color: #fff; border-color: var(--brand-1); }
/* 改房位（點房展開的行內小表單，取代 prompt）*/
.room-edit-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; flex-wrap: wrap; }
.room-edit-row .add-room-input { width: 60px; }

/* ════════════════════════════════════════════════════════════
   帳務（W3，features/finance/*）
   沿既有 tokens（藍綠品牌色）＋既有 .card/.chip/.bcard/.form-row/.submit-btn，
   本區只補帳務專屬版面（KPI 卡格、入口卡格、區塊標題）。
   ════════════════════════════════════════════════════════════ */

/* KPI 卡格：手機 2 欄、桌機 4 欄自適應 */
.fin-kpi-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 14px 4px;
}
.fin-kpi-wrap--single {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
@media (min-width: 768px) {
  .fin-kpi-wrap { grid-template-columns: repeat(4, 1fr); }
}
.fin-kpi-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.fin-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-gradient-bar);
}
.fin-kpi-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.fin-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 帳務主頁：四張入口卡格 */
.fin-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 6px 14px 14px;
}
@media (min-width: 768px) {
  .fin-entry-grid { grid-template-columns: repeat(4, 1fr); }
}
.fin-entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary);
  transition: box-shadow var(--dur-fast);
}
.fin-entry-card:active { box-shadow: var(--shadow-sm); }
.fin-entry-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-primary);
}
.fin-entry-sub {
  font-size: 12px;
  color: var(--muted);
}

/* 區塊標題（settings.js 各卡片內小標） */
.fin-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 記帳表單展開面板 */
.fin-form-panel {
  margin: 0 14px 14px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

/* 錯誤訊息區（清單載入失敗等） */
.fin-err {
  padding: 12px 14px;
  color: var(--bad);
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   現金點交（X 案，交班確認頁嵌入分區卡，CONTRACT-cash-handover.md §3.1）
   沿 .hc-board 外卡樣式；只增不改既有規則。
   ════════════════════════════════════════════════════════════ */
.hc-cash-card {
  margin: 0 14px 14px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, var(--border-subtle));
  border-radius: 10px;
  padding: 14px;
}
.hc-cash-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
.hc-cash-rows {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
.hc-cash-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.hc-cash-row.total {
  border-top: 1px solid var(--line, var(--border-subtle));
  margin-top: 4px;
  padding-top: 8px;
  font-weight: 700;
}
.hc-cash-pending {
  font-size: 12.5px;
  color: var(--muted);
  padding: 8px 0;
  border-top: 1px solid var(--line, var(--border-subtle));
  cursor: pointer;
}
.hc-cash-pending-list {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--line, var(--border-subtle));
}
.hc-cash-pending-item {
  font-size: 12px;
  color: var(--text);
  padding: 3px 0;
  display: flex;
  gap: 8px;
}
.hc-cash-pending-item span.t { color: var(--muted); flex: none; white-space: nowrap; }
.hc-cash-pending-item span.p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-cash-pending-item span.a { flex: none; font-weight: 600; }
.hc-cash-field-row {
  margin-top: 10px;
  border-top: 1px solid var(--line, var(--border-subtle));
  padding-top: 10px;
}
.hc-cash-field-row .label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.hc-cash-diff {
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}
.hc-cash-diff.zero { color: var(--good); }
.hc-cash-diff.nonzero { color: var(--bad); }
.hc-cash-reason-row {
  margin-top: 8px;
}
.hc-cash-input-err {
  border-color: var(--bad) !important;
  background: #fdf3f1 !important;
}
.hc-cash-err-msg {
  font-size: 12px;
  color: var(--bad);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── 動作軌跡頁：系統／帳務資料源切換 tab（C6 續輪，R28）
   .seg-tab.on 泛用規則只設白字，未搭 .t-* 變體不會有底色（見 components.css），此頁 scoped 補上 ── */
#audit-src-tabs .seg-tab.on { background: var(--brand-2); }

/* ── 通知中心：分類 tab 底色（同上，seg-tab.on 泛用規則無 .t-* 變體不帶底色）── */
#ntf-cat-tabs .seg-tab.on { background: var(--brand-2); }

/* ═══════════════════════════════════════════════════════════════════════
   專案追蹤 TRACKS（TRACK-PROJECTS-SPEC v3 ／ TRACK-IMPL-PLAN §5）
   class 命名沿用 mockup（prototype.html trk- 前綴）方便對照 §6.4 mockup 頁 51/52。
   單一 RWD：.trk-pc-only／.trk-m-only 依 1024px 斷點切換（對齊 shell.css 既有寫法）；
   水平留白一律吃外層 .page-content padding，本區段內部 class 不重複加水平 padding。
   美編：無左色條／卡中卡／emoji／說明文字；紅僅逾期與 badge；已結案整列降灰。
   ═══════════════════════════════════════════════════════════════════════ */
.trk-pc-only { display: none; }
.trk-m-only { display: block; }
@media (min-width: 1024px) {
  .trk-pc-only { display: block; }
  .trk-m-only { display: none; }
  /* P2-3 修復（G3）：本區段無獨立手機/PC 覆蓋，基礎值即手機端實際渲染值，
     故基礎值已改 ≥44px（觸控目標）；此處只在 PC 斷點把滑鼠操作的次要控件
     壓回原始緊湊值，PC 視覺不變。 */
  .trk-newbtn { min-height: 32px; }
  .trk-only { min-height: 32px; }
  .trk-ph { min-height: 30px; }
  .trk-iacts button { min-height: 34px; }
}

/* ── 共用卡／標頭／新增鈕／篩選 chips ── */
.trk-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 15px 16px; }
.trk-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.trk-hdr .t { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.trk-newbtn { min-height: 44px; padding: 0 14px; border-radius: 8px; border: none; background: linear-gradient(135deg, var(--brand-1, #1f7f9f), var(--brand-2, #2f6f9c)); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-mtop { padding: 4px 0; text-align: right; }
.trk-chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.trk-only { min-height: 44px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--brand-2, #2f6f9c); background: #fff; color: var(--brand-2, #2f6f9c); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-only.on { background: var(--brand-2, #2f6f9c); color: #fff; }

/* ── PC 全寬甘特：月刻度／深色今日線／群組列（收合展開子事件）／列尾狀態字 ── */
.trk-gantt { position: relative; }
.trk-scale { position: relative; height: 20px; margin-left: 148px; margin-right: 96px; border-bottom: 1px solid var(--line); }
.trk-mo { position: absolute; top: 2px; font-size: 11px; color: var(--text-tertiary); transform: translateX(-1px); border-left: 1px solid var(--line); padding-left: 4px; height: 16px; }
/* 今日線＝深灰（非紅，色彩例外表既定）；top:0 貫穿月刻度＋所有列，對齊 mockup 原版 */
.trk-todayline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text-primary); opacity: .6; z-index: 3; pointer-events: none; }
.trk-todayline .lbl { position: absolute; top: -1px; left: 4px; font-size: 10px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.trk-grow { display: flex; align-items: center; min-height: 42px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.trk-grow:hover { background: var(--bg-sidebar); }
.trk-grow.sel { background: rgba(43,127,184,.08); }
/* A11：已結案列不再整列降灰（文字保留對比），改靠 .trk-bar.grp.closed（見下）灰化甘特列本身 */
.trk-nm { width: 148px; flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-primary); padding-right: 8px; }
.trk-nm .cv { width: 14px; flex: none; color: var(--text-tertiary); font-size: 11px; transition: transform .15s; }
.trk-nm .cv.op { transform: rotate(90deg); }
.trk-nm .cv.no { visibility: hidden; }
.trk-lane { position: relative; flex: 1; height: 26px; min-width: 0; }
.trk-bar { position: absolute; top: 7px; height: 12px; border-radius: 6px; background: var(--brand-2, #2f6f9c); }
.trk-bar.grp { background: linear-gradient(135deg, var(--brand-1, #1f7f9f), var(--brand-2, #2f6f9c)); }
.trk-bar.grp.closed { background: var(--border-default); }
.trk-bar.item { top: 11px; height: 10px; background: var(--brand-1, #1f7f9f); }
.trk-bar.item.done { background: var(--border-default); }
.trk-bar.ov { top: 11px; height: 10px; background: var(--bad); border-radius: 0 6px 6px 0; }
.trk-tail { flex: none; width: 96px; padding-left: 8px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; line-height: 1.35; }
.trk-tail .rg { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.trk-tail .od { font-size: 12px; font-weight: 700; color: var(--bad); white-space: nowrap; }
.trk-tail .warn { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.trk-tail .pend { font-size: 11.5px; font-weight: 700; color: #5b7290; white-space: nowrap; }
.trk-tail .cl { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.trk-irow { display: flex; align-items: center; min-height: 34px; border-bottom: 1px dashed var(--border-subtle); cursor: pointer; }
.trk-irow:hover { background: var(--bg-sidebar); }
.trk-inm { width: 148px; flex: none; padding-left: 24px; font-size: 12.5px; color: var(--text-secondary); }

/* ── 下鑽詳細（PC 甘特下方／手機詳細頁共用）── */
.trk-detail { margin-top: 16px; }
.trk-top { padding-bottom: 2px; }
/* A11：已結案頂卡不再整卡降灰（文字保留對比），已由 .trk-st.closed chip 標示狀態 */
.trk-top-h { display: flex; align-items: center; gap: 8px; }
.trk-top-h .nm { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.trk-purpose { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 10px; }
.trk-note { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; margin: 0 0 10px; }
.trk-st { flex: none; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.trk-st.open { color: var(--brand-2, #2f6f9c); background: rgba(43,127,184,.12); }
.trk-st.closed { color: var(--text-tertiary); background: var(--bg-sidebar); }
.trk-st.pending { color: #5b7290; background: rgba(91,114,144,.12); }
.trk-mems { display: flex; flex-wrap: wrap; gap: 6px; }
.trk-mem { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-sidebar); border-radius: 12px; padding: 3px 10px; }

.trk-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.trk-acts > button { min-height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-default); background: #fff; color: var(--text-primary); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-acts > button:hover { border-color: var(--brand-2, #2f6f9c); color: var(--brand-2, #2f6f9c); }
.trk-cbtn { min-height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-default); background: #fff; color: var(--text-primary); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-cbtn:hover { border-color: var(--brand-2, #2f6f9c); color: var(--brand-2, #2f6f9c); }
.trk-cbtn.disabled { color: var(--text-tertiary); background: var(--bg-sidebar); border-color: var(--border-subtle); cursor: not-allowed; }
.trk-macts2 { display: flex; gap: 10px; margin: 12px 0 6px; }
.trk-macts2 button { flex: 1; min-height: 46px; border-radius: 10px; border: none; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-macts2 .primary { background: var(--brand-2, #2f6f9c); color: #fff; }
.trk-macts2 .ghost { border: 1px solid var(--border-default); background: #fff; color: var(--text-primary); }

.trk-common { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.trk-common .lbl { flex: none; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.trk-common .latest { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-common .cv { flex: none; color: var(--text-tertiary); font-size: 12px; transition: transform .15s; }
.trk-common .cv.op { transform: rotate(90deg); }
.trk-common-body { padding: 2px 0 8px; border-bottom: 1px solid var(--line); }

.trk-evshd { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 2px; }
.trk-evshd .t { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--text-tertiary); }
.trk-collapse { border: none; background: none; color: var(--brand-2, #2f6f9c); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-evs { display: flex; flex-direction: column; }

.trk-ev { border-bottom: 1px solid var(--border-subtle); }
/* A11：已結案事件卡不再整卡降灰（文字保留對比），已由 .trk-st.closed chip 標示狀態 */
.trk-ev-m .as { font-size: 12px; color: var(--text-tertiary); }
.trk-goal { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin: 0 0 10px; }
.trk-ev.rev { opacity: .55; display: flex; align-items: center; gap: 8px; padding: 11px 2px; }
.trk-ev.rev .nm { font-size: 14px; font-weight: 600; color: var(--text-tertiary); text-decoration: line-through; }
.trk-ev-h { padding: 11px 2px; cursor: pointer; }
.trk-ev-h:hover { background: var(--bg-sidebar); }
.trk-ev-t { display: flex; align-items: center; gap: 8px; }
.trk-ev-t .nm { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.trk-ev-t .cv { margin-left: auto; color: var(--text-tertiary); font-size: 12px; transition: transform .15s; }
.trk-ev.open .trk-ev-t .cv { transform: rotate(90deg); }
.trk-ev-m { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.trk-ev-m .rg { font-size: 12px; color: var(--text-tertiary); }
.trk-ev-m .od { font-size: 12px; font-weight: 700; color: var(--bad); }
.trk-ev-r { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-ev-r .none { color: var(--text-tertiary); }
.trk-ev-body { padding: 2px 2px 14px; }

/* ── 進度串（事件內／共同事項共用）：回報卡／系統留痕列／撤銷縮一行灰字 ── */
.trk-stream { display: flex; flex-direction: column; }
.trk-rep { padding: 9px 0; border-bottom: 1px dashed var(--border-subtle); }
.trk-rep-h { display: flex; align-items: center; gap: 8px; }
.trk-rep-h .au { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.trk-rep-h .tm { font-size: 11.5px; color: var(--text-tertiary); }
.trk-postrev { margin-left: auto; flex: none; border: none; background: none; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; font-family: inherit; }
.trk-postrev:hover { color: var(--brand-2, #2f6f9c); }
.trk-rep-b { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; margin-top: 3px; word-break: break-word; }
.trk-log { text-align: center; font-size: 12px; color: var(--text-tertiary); padding: 6px 0; }
.trk-log span { background: var(--bg-sidebar); border-radius: 12px; padding: 3px 12px; }
.trk-rev1 { font-size: 12px; color: var(--text-tertiary); padding: 6px 0; }

/* ── 附件：圖片縮圖／檔案 chip（無 emoji，副檔名文字 badge）── */
.trk-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.trk-att-img { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle); background: linear-gradient(135deg, #e6eef4, #d3e1eb); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.trk-att-img-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.trk-att-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; background: #fff; }
.trk-att-file .ext { font-size: 10px; font-weight: 800; color: #fff; background: var(--brand-2, #2f6f9c); border-radius: 4px; padding: 1px 5px; letter-spacing: .5px; }

/* ── 就地回報輸入：快速片語 chips／待送附件／輸入列 ── */
.trk-in { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.trk-phrases { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.trk-ph { min-height: 44px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border-default); background: #fff; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.trk-ph:hover { border-color: var(--brand-2, #2f6f9c); color: var(--brand-2, #2f6f9c); }
.trk-pend { display: flex; flex-wrap: wrap; gap: 6px; }
.trk-pend:not(:empty) { margin-bottom: 8px; }
.trk-pchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--text-secondary); }
.trk-pchip .ext { font-size: 10px; font-weight: 800; color: #fff; background: var(--brand-2, #2f6f9c); border-radius: 4px; padding: 1px 5px; }
.trk-pchip .x { color: var(--text-tertiary); cursor: pointer; font-weight: 700; padding: 0 2px; }
/* A9：手機輸入列兩行——textarea 用 flex-basis:100% 強制占滿第一行，逼附件/送出鈕擠到第二行；
 * PC（≥1024px）用更高特異性選擇器（.trk-inrow .trk-ta2 兩層 class）還原單行三欄，見下方 @media。*/
.trk-inrow { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.trk-inrow .trk-ta2 { flex: 1 1 100%; }
.trk-inrow .trk-attbtn, .trk-inrow .trk-send { flex: 1; }
@media (min-width: 1024px) {
  .trk-inrow { flex-wrap: nowrap; }
  .trk-inrow .trk-ta2 { flex: 1; }
}
.trk-ta2 { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--border-default); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; resize: none; box-sizing: border-box; }
.trk-ta2:focus { border-color: var(--brand-2, #2f6f9c); outline: none; }
.trk-attbtn { flex: none; min-height: 44px; padding: 0 13px; border: 1px solid var(--border-default); border-radius: 10px; background: #fff; color: var(--text-secondary); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-attbtn:hover { border-color: var(--brand-2, #2f6f9c); color: var(--brand-2, #2f6f9c); }
.trk-send { flex: none; min-height: 44px; padding: 0 16px; border: none; border-radius: 10px; background: var(--brand-2, #2f6f9c); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-send:disabled { opacity: .6; cursor: not-allowed; }

.trk-iacts { display: flex; gap: 8px; margin-top: 10px; }
.trk-iacts button { min-height: 44px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--border-default); background: #fff; color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-iacts button:hover { border-color: var(--brand-2, #2f6f9c); color: var(--brand-2, #2f6f9c); }

/* ── 手機列表卡 ── */
.trk-mlist { padding: 4px 0 14px; }
.trk-mcard { position: relative; background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 13px 30px 13px 14px; margin-bottom: 10px; cursor: pointer; min-height: 44px; }
/* A11：手機列表卡沒有獨立 chip 標示已結案，改降卡片底色（沿用 .trk-st.closed 同一套
 * --bg-sidebar 灰色語彙），不動文字對比 */
.trk-mcard.closed { background: var(--bg-sidebar); }
.trk-mcard .nm { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.trk-mcard .pp { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-mcard .stat { font-size: 12.5px; color: var(--text-tertiary); margin-top: 7px; }
.trk-mcard .stat .od { color: var(--bad); font-weight: 700; }
.trk-mcard .last { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.trk-mcard .last .none { color: var(--text-tertiary); }
.trk-mgo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--brand-2, #2f6f9c); font-size: 20px; font-weight: 700; line-height: 1; }

/* ── 手機詳細頁（外層 .detail-page／.topbar／.body 沿用全站既有共用類別，見 pages.css 事項詳細頁段）── */
.trk-mdetail { padding: 0; }
.trk-menubtn { min-width: 44px; min-height: 44px; border: none; background: none; color: var(--text-secondary); font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; font-family: inherit; }
.trk-menu-host { position: relative; }
.trk-menu { position: absolute; right: 10px; top: 4px; z-index: 46; background: #fff; border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 6px 20px rgba(20,40,60,.18); overflow: hidden; min-width: 160px; }
.trk-menu button, .trk-menu span { display: block; width: 100%; text-align: left; min-height: 48px; line-height: 48px; padding: 0 16px; border: none; background: #fff; font-size: 14px; font-family: inherit; color: var(--text-primary); cursor: pointer; }
.trk-menu button:hover { background: var(--bg-sidebar); }
.trk-menu .disabled { color: var(--text-tertiary); cursor: not-allowed; }
.trk-menu-sc { position: fixed; inset: 0; z-index: 45; }

/* ── 開新追蹤／新增事件／成員管理表單（HvModal bodyHtml 內容；輸入控件沿用全站 .input／.textarea）── */
.trk-msec { font-size: 12px; font-weight: 700; color: var(--text-tertiary); margin: 12px 0 6px; }
.trk-msub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.trk-f { margin-bottom: 10px; }
.trk-f label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.trk-f2 { display: flex; gap: 10px; }
.trk-f2 .trk-f { flex: 1; min-width: 0; }
.trk-mrow { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.trk-mrow > span:first-child { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-primary); }
/* A5：成員管理加入/移除鈕手機觸控目標 32→44px（本區塊無獨立手機/PC 覆蓋，基礎值＝實際渲染值） */
.trk-x, .trk-add { flex: none; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.trk-x { border: 1px solid var(--border-default); background: #fff; color: var(--text-secondary); }
.trk-x[disabled] { opacity: .4; cursor: not-allowed; }
.trk-add { border: 1px solid var(--brand-2, #2f6f9c); background: #fff; color: var(--brand-2, #2f6f9c); }
.trk-mchk { display: flex; flex-wrap: wrap; gap: 8px; }
.trk-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 8px; padding: 8px 11px; cursor: pointer; }

/* ── 手機主頁左緣書籤入口（掛在 features/home；僅 <1024px 顯示，可上下拖曳）── */
.trk-bkmk { position: fixed; left: 0; top: 40%; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 5px 9px; background: linear-gradient(135deg, var(--brand-1, #1f7f9f), var(--brand-2, #2f6f9c)); color: #fff; border-radius: 0 12px 12px 0; box-shadow: 2px 2px 9px rgba(20,40,60,0.28); cursor: grab; touch-action: none; user-select: none; }
.trk-bkmk:active { cursor: grabbing; }
.trk-bkmk .tx { writing-mode: vertical-rl; font-size: 13px; font-weight: 700; letter-spacing: 3px; }
.trk-bkmk .bd { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) {
  .trk-bkmk { display: none; }
}