/* ========================================================================
   1.65.0 質感升級層「refine」（老闆：「整體介面、ui 升級一下，好看，有質感，現在有點太僵硬死板了」）
   疊在 styles.css（墨青 v3）＋ polish.css 之上，只加不改（不動任何 class 的語意與 JS 用到的結構）：
   1. 少框：外層卡片改無邊框＋柔和雙層陰影（陰影裡帶 7% 髮絲環），巢狀區塊改淡底分層；
      裝飾性虛線改淡實線或淡底——拖放上傳區、表示狀態的虛線（略過、可帶過、缺件）保留
   2. 層級與節奏：卡片 18／面板 14／控制項 10 三階圓角、標題字重拉開、區塊間距加大
   3. 元件：晶片與膠囊無框淡底、分頁籤膠囊式 hover＋圓角滑動指示、表格去直格線＋列 hover、
      按鈕邊線退一步、輸入框 focus 柔光
   4. 動效：spring easing、可點的卡片 hover 抬升 2px（只在有滑鼠的裝置）、按下縮 .98；不加會隨重畫一再播放的進場動畫
   5. 色彩：墨青主色不變；黃銅只點在「現在這一步」（流程條目前階段、執行計畫的下一步）；數字沿用 styles.css 的 Inter（--font-num）
   深色模式同步；減少動態時不抬升不縮放（第 11 節），其餘動畫由 styles.css 的全域規則關掉。
   ======================================================================== */
:root {
  --hairline: rgba(14, 27, 30, 0.07);
  --hairline-2: rgba(14, 27, 30, 0.12);
  --border: #e6ebed;                     /* 線條退一步，內容往前（原 #e2e8ea） */
  --tint-1: color-mix(in srgb, var(--surface-2) 78%, var(--surface));
  --tint-2: var(--surface-2);
  --tint-jade: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
  --tint-brass: color-mix(in srgb, var(--brass-soft) 70%, var(--surface));
  --shadow-card: 0 0 0 1px var(--hairline), 0 1px 2px rgba(10, 27, 30, 0.04), 0 10px 26px -14px rgba(10, 27, 30, 0.14);
  --shadow-lift: 0 0 0 1px var(--hairline), 0 2px 6px rgba(10, 27, 30, 0.05), 0 20px 40px -18px rgba(10, 27, 30, 0.24);
  --r-card: 18px; --r-panel: 14px; --r-ctl: 10px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
[data-theme='dark'] {
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-2: rgba(255, 255, 255, 0.10);
  --border: #1f2e33;
  --tint-1: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
  --tint-jade: color-mix(in srgb, var(--primary) 10%, var(--surface));
  --tint-brass: color-mix(in srgb, var(--brass) 10%, var(--surface));
  --shadow-card: 0 0 0 1px var(--hairline), 0 12px 30px -18px rgba(0, 0, 0, 0.75);
  --shadow-lift: 0 0 0 1px var(--hairline-2), 0 22px 48px -22px rgba(0, 0, 0, 0.9);
}

/* ---------- 1. 版面節奏：頁面留白加大、頁標字重拉開 ---------- */
@media (min-width: 900px) { .page { padding-top: 28px; padding-left: 28px; padding-right: 28px; } }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.card-title { margin-bottom: 16px; }
.card-title h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.card-title h3 { font-weight: 800; }
.grid2, .grid3 { gap: 18px; }
.side-panel .card + .card { margin-top: 16px; }

/* ---------- 2. 卡片：無邊框＋柔和陰影（陰影自帶髮絲環），圓角 18 ---------- */
.card, .kpi, .summary-bar, .pg-card, .file-card, .doc-action, .progress, .wl-card, .pg-tcard, .pg-topic-card, .pg-ccard, .pg-tile, .app-pulse, .pg-hits .kb-hit, .pg-hits .kb-hit:first-child { border-color: transparent; }
.card, .kpi, .wl-card, .pg-tcard, .pg-topic-card, .pg-ccard, .app-pulse { border-radius: var(--r-card); }
.summary-bar { border-radius: var(--r-panel); }
/* 狀態仍要看得出來：略過／休眠的步驟保留虛線框 */
/* 「下一步」用黃銅頂線（現在這一步），跟翡翠的完成色分開 */
.card.flat { box-shadow: 0 0 0 1px var(--hairline); }
@media (hover: hover) {
  a.card:hover, .card.link:hover, .pg-topic-card:hover, .pg-tcard:hover, .file-card:hover, .doc-action:hover, .pg-hits .kb-hit:hover { transform: translateY(-2px); box-shadow: var(--card-hi), var(--shadow-lift); border-color: transparent; }
}
a.card, .card.link, .pg-topic-card, .pg-tcard, .file-card, .doc-action, .pg-hits .kb-hit { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background var(--dur); }

/* ---------- 3. KPI：拿掉頂端 3px 色條，改成色調淡淡地從上方暈開 ---------- */
.kpi.accent, .kpi.primary { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 70%, var(--surface)) 0%, var(--surface) 62%); }
.kpi.red { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--red-soft) 70%, var(--surface)) 0%, var(--surface) 62%); }
.kpi.green { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--green-soft) 70%, var(--surface)) 0%, var(--surface) 62%); }
.kpi.amber { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--amber-soft) 75%, var(--surface)) 0%, var(--surface) 62%); }
.kpi.blue { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 70%, var(--surface)) 0%, var(--surface) 62%); }
.kpi.teal { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--teal-soft) 70%, var(--surface)) 0%, var(--surface) 62%); }
.kpi.ink { box-shadow: var(--card-hi), var(--shadow-card); background: linear-gradient(180deg, color-mix(in srgb, var(--gray-soft) 80%, var(--surface)) 0%, var(--surface) 62%); }
[data-theme='dark'] .kpi.accent, [data-theme='dark'] .kpi.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, var(--surface)) 0%, var(--surface) 64%); }
[data-theme='dark'] .kpi.red { background: linear-gradient(180deg, color-mix(in srgb, var(--red) 11%, var(--surface)) 0%, var(--surface) 64%); }
[data-theme='dark'] .kpi.green { background: linear-gradient(180deg, color-mix(in srgb, var(--green) 11%, var(--surface)) 0%, var(--surface) 64%); }
[data-theme='dark'] .kpi.amber { background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 11%, var(--surface)) 0%, var(--surface) 64%); }
[data-theme='dark'] .kpi.blue { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 11%, var(--surface)) 0%, var(--surface) 64%); }
[data-theme='dark'] .kpi.teal { background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 11%, var(--surface)) 0%, var(--surface) 64%); }
[data-theme='dark'] .kpi.ink { background: linear-gradient(180deg, color-mix(in srgb, #fff 6%, var(--surface)) 0%, var(--surface) 64%); }
@media (hover: hover) {
  a.kpi:hover, a.kpi.accent:hover, a.kpi.primary:hover, a.kpi.red:hover, a.kpi.green:hover, a.kpi.amber:hover, a.kpi.blue:hover, a.kpi.teal:hover, a.kpi.ink:hover { transform: translateY(-2px); box-shadow: var(--card-hi), var(--shadow-lift); }
}
.kpi .ic { border-radius: 12px; }

/* ---------- 4. 巢狀區塊：不畫框，用淡底分層 ---------- */
.callout { border-color: transparent; border-radius: var(--r-panel); }
.memo { border-color: transparent; background: var(--tint-1); border-radius: var(--r-panel); box-shadow: none; }
[data-theme='dark'] .memo { background: var(--tint-1); }
.memo summary:hover { background: color-mix(in srgb, var(--primary-soft) 40%, var(--tint-1)); }
.case-meta-item { border-color: transparent; background: var(--tint-1); box-shadow: none; }
.case-flowbar { border-color: transparent; background: var(--tint-1); box-shadow: none; border-radius: var(--r-panel); }
.case-side-items, .case-side-chain-cell, .case-docpath, .case-share-status, .case-runs-wrap, .case-pref, .case-side-quote, .case-contact, .case-howto-check, .case-gen-quote, .case-file-meta-item { border-color: transparent; }
.case-side-items { background: var(--tint-1); }
.case-side-chain-cell { background: var(--tint-1); }
@media (hover: hover) { a.case-side-chain-cell:hover { background: color-mix(in srgb, var(--primary-soft) 55%, var(--tint-1)); } }
.case-side-wrap { border-color: transparent; box-shadow: var(--card-hi), var(--shadow-card); border-radius: var(--r-card); }
/* 「這案子怎麼辦」導引：虛線框 → 翡翠淡底 */
.case-howto { border-color: transparent; background: var(--tint-jade); border-radius: var(--r-panel); }
.case-integ, .case-contact-details, .case-sent-diff { border-color: transparent; background: var(--tint-1); border-radius: var(--r-panel); }
.case-fetch { border-color: transparent; background: var(--tint-jade); border-radius: var(--r-panel); }
.case-fetch[open] > .case-fetch-head { border-bottom-style: solid; border-bottom-color: var(--hairline); }
.case-ov-more { border-style: solid; border-color: transparent; background: var(--tint-1); }
/* 較早回合的折疊鈕：虛線膠囊 → 淡底膠囊 */
.case-fold-older > .fold-toggle.btn { border-style: solid; border-color: transparent; background: var(--tint-1); box-shadow: none; }
.case-fold-older > .fold-toggle.btn:hover { background: var(--primary-soft); }
.case-redbar-backup, .case-reply-backup { border-style: solid; border-color: var(--hairline); }

/* 執行分頁 */
/* 拖放上傳區保留虛線（那是「可以丟進來」的語意），線色退淡一點 */

/* 工作紀錄看懂版 */
.wl-tbl { border-color: var(--hairline); border-radius: var(--r-panel); }
.wl-chain-step, .wl-accept-box, .wl-ptile, .wl-route, .wl-vg, .wl-issue-so, .wl-ref, .wl-when, .wl-x, .wl-bubble-t, .wl-tl-fold, .wl-seg { border-color: transparent; }
.wl-accept-box, .wl-ptile, .wl-vg, .wl-tl-fold { background-color: var(--tint-1); }
/* 組與組之間的虛線 → 淡實線；「推論／推估」本身的虛線（is-guess、is-derived）是語意，保留 */
.wl-block + .wl-block, .wl-block + .wl-notes.is-block, .wl-notes.is-block + .wl-block, .wl-notes, .wl-notes.is-block, .wl-fg + .wl-fg, .wl-tl-fold + .wl-fg, .wl-mg + .wl-mg, .wl-phase + .wl-phase { border-top-style: solid; border-top-color: var(--hairline); }
.wl-say { border-style: solid; border-color: transparent; background: var(--tint-1); }

/* 知識庫、管理、工具頁 */
.pg-detail, .pg-quirk, .pg-tlist, .pg-src, .pg-topic-row, .pg-step, .pg-faq details, .pg-export-item, .pg-dq-cat, .pg-fix, .pg-light, .pg-agent, .pg-prop .pg-prop-body, .pg-readhead, .pg-counts .c, .pg-digest, .pg-term, .pg-ro, .pg-veto, .pg-ask, .pg-verdict-box, .pg-doc, .pg-issue, .pg-price-col, .pg-err-item, .pg-cs-bubble, .pg-cmdbox { border-color: transparent; }
.pg-detail, .pg-quirk, .pg-tlist, .pg-step, .pg-faq details, .pg-dq-cat, .pg-fix, .pg-light, .pg-agent, .pg-readhead, .pg-counts .c, .pg-digest, .pg-term, .pg-ro, .pg-veto, .pg-ask, .pg-verdict-box, .pg-doc, .pg-issue, .pg-price-col, .pg-err-item, .pg-export-item { background-color: var(--tint-1); border-radius: var(--r-panel); }
.pg-quirk-empty, .pg-terms-empty, .pg-install-main { border-style: solid; border-color: transparent; background: var(--tint-1); border-radius: var(--r-panel); }
/* 子分頁：框線膠囊 → 淡底膠囊（作用中照舊） */
.pg-subnav button { border-color: transparent; background: var(--tint-1); box-shadow: none; }
.pg-subnav button:hover { background: color-mix(in srgb, var(--primary-soft) 60%, var(--tint-1)); }
.pg-toc a, .pg-chapters li a { border-color: transparent; }
/* 卡片裡的統計格、匯出項、資料品質格：淡底、不加外環（左側色線是語意，保留） */
.pg-tile, .pg-tile.green, .pg-tile.amber, .pg-tile.orange, .pg-tile.red, .pg-tile.teal, .pg-tile.blue, .pg-tile.copper { background: var(--tint-1); box-shadow: inset 3px 0 0 var(--tile-c, var(--border-strong)); }
@media (hover: hover) { a.pg-tile:hover { background: color-mix(in srgb, var(--primary-soft) 40%, var(--tint-1)); box-shadow: inset 3px 0 0 var(--tile-c, var(--border-strong)), var(--shadow-lift); border-color: transparent; } }
.pg-counts .c { box-shadow: none; }
.pg-export-item, .pg-dq-cat, .pg-dq-cat.has, .pg-dq-cat.bad, .pg-light { box-shadow: none; }
/* 首頁：今日待辦從「卡片裡的帶框表格」改成兩塊淡底面板＋空隙；「沒有要處理的」虛線條 → 淡底條 */
.app-todo-grid { border-color: transparent; background: transparent; gap: 12px; overflow: visible; border-radius: 0; }
.app-todo-group { background: var(--tint-1); border-radius: var(--r-panel); }
.app-todo-group:nth-child(even) { border-left-color: transparent; }
.app-todo-group:nth-child(n + 3) { border-top-color: transparent; }
.app-todo-quiet { border-style: solid; border-color: transparent; background: var(--tint-1); }
.app-aging, .app-adv, .app-nf-col, .app-dev-list { border-color: transparent; }
.app-aging, .app-adv, .app-nf-col { background-color: var(--tint-1); }
/* 提問、AI 助手的空狀態與唯讀框：虛線 → 淡底 */
.ask-side-ro, .ask-list-empty, .ai-empty { border-style: solid; border-color: transparent; background: var(--tint-1); }
/* 提問：歡迎卡的三個說明格不再框中框；對話串清單改髮絲環，作用中照舊左側翡翠線 */
.ask-welcome-points li { border-color: transparent; background: var(--tint-1); border-radius: var(--r-panel); }
.ask-item { border-color: transparent; box-shadow: 0 0 0 1px var(--hairline), 0 1px 2px rgba(10, 27, 30, 0.04); }
.ask-item:hover { border-color: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, var(--hairline)), var(--shadow-xs); }
.ask-item.is-on { border-color: transparent; box-shadow: inset 3px 0 0 var(--primary), 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent); }
/* 輸入外框已經有 focus 光圈，裡面的文字框不再畫第二圈（原本兩圈疊在一起） */
.ask-composer .ask-text:focus, .composer .textarea:focus { box-shadow: none; }

/* ---------- 5. 裝飾性虛線分隔 → 淡實線 ---------- */
.round-head .line { border-top-style: solid; border-top-color: var(--hairline-2); }
.docpath, .composer .instruction, .app-nf-flags, .ask-actions, .ai-msg-foot, .pg-rep-meta, .pg-hits .pg-hit-actions, .pg-law-text .pg-law-ch, .pg-doclist li, .pg-tcard-foot, .pg-ccard .foot { border-top-style: solid; border-top-color: var(--hairline); }
.pg-bars::before, .pg-mbars::before { border-top-style: solid; border-top-color: var(--hairline); }
.btn.app-more-cases, .btn.pg-act-more { border-style: solid; border-color: transparent; background: var(--tint-1); }
.list > * + * { border-top-color: var(--hairline); }
.list > .fold > * + *:not(.fold-toggle), .list > .fold > .fold-rest > * + *, .list > .fold > .fold-rest > *:first-child { border-top-color: var(--hairline); }
.list > .fold > .fold-toggle { border-top-style: solid; border-top-color: var(--hairline); }
.case-row + .case-row::before { background: var(--hairline); }

/* ---------- 6. 晶片、分段、分頁籤 ---------- */
/* 晶片一律圓角膠囊：方角章印 → 圓潤，色調與實底／淡底語意不變 */
.chip, .chip.sm, .chip.lg { border-radius: 999px; }
.chip { padding: 0 9px; }
.chip.sm { padding: 0 7px; }
.chip.outline { border-color: var(--hairline-2); }
.stage-filters .chip { border-color: transparent; background: var(--tint-1); box-shadow: none; }
.stage-filters .chip:hover { background: color-mix(in srgb, var(--primary-soft) 55%, var(--tint-1)); color: var(--text); }
.stage-filters .chip.red { border-color: transparent; background: var(--red-soft); color: var(--red-deep); }
.segment { border-color: transparent; background: var(--tint-2); }
.segment button.on { box-shadow: 0 1px 2px rgba(10, 27, 30, 0.08), 0 0 0 1px var(--hairline); }
.tabs { border-bottom-color: var(--hairline); }
.tabs a, .tabs > button { border-radius: 10px 10px 0 0; transition: color var(--dur), background var(--dur); }
.tabs a.active, .tabs > button.active { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary-soft) 70%, transparent) 100%); }
.tabs-ind { height: 3px; border-radius: 3px 3px 0 0; background: var(--primary-grad); }
.tabs a .count, .tabs > button .count { border-radius: 999px; }

/* 「現在該做什麼」：5px 粗色條 → 3px 細線＋同色調從左側淡淡暈開 */

/* ---------- 7. 按鈕、輸入 ---------- */
.btn:not(.primary):not(.ghost):not(.soft):not(.ink):not(.danger) { border-color: var(--hairline-2); box-shadow: 0 1px 2px rgba(10, 27, 30, 0.05); }
.btn:not(.primary):not(.ghost):not(.soft):not(.ink):not(.danger):hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--hairline-2)); background: color-mix(in srgb, var(--primary-soft) 35%, var(--surface)); }
[data-theme='dark'] .btn:not(.primary):not(.ghost):not(.soft):not(.ink):not(.danger) { box-shadow: none; }
.btn { border-radius: var(--r-ctl); }
.btn.lg { border-radius: 12px; }
.btn.round, .btn.icon-btn.round { border-radius: 999px; }
.btn:active { transform: scale(.98); }
.input, .textarea, .select { border-radius: var(--r-ctl); }
.composer { border-color: var(--hairline-2); border-radius: 20px; }

/* ---------- 8. 對話：泡泡少框、回應卡抬頭改翡翠淡底（不再是整條黑帶） ---------- */
.bubble.them { border-color: transparent; box-shadow: 0 0 0 1px var(--hairline), 0 6px 16px -10px rgba(10, 27, 30, 0.16); }
.bubble.us { border-color: var(--hairline-2); box-shadow: 0 0 0 1px transparent, 0 12px 28px -18px rgba(10, 27, 30, 0.22); }
.bubble.us > .label { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 11%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 4%, var(--surface)) 100%); color: var(--primary-deep); border-bottom: 1px solid var(--hairline); }
.bubble.us > .label .icon { color: var(--primary); }
[data-theme='dark'] .bubble.them { box-shadow: 0 0 0 1px var(--hairline); }
[data-theme='dark'] .bubble.us { box-shadow: 0 0 0 1px var(--hairline); }
[data-theme='dark'] .bubble.us > .label { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, var(--surface)) 0%, color-mix(in srgb, var(--primary) 6%, var(--surface)) 100%); color: var(--primary-bright); }
.attach { border-color: transparent; background: var(--tint-1); }
/* 回合序號：墨色實底 → 柔和墨色，數字更精緻 */
.round-head > span:first-child { background: color-mix(in srgb, var(--ink-800) 88%, var(--primary)); box-shadow: 0 2px 6px -2px rgba(10, 27, 30, 0.3); }

/* ---------- 9. 表格（Markdown 與工作紀錄）：去直格線、表頭輕、斑馬紋拿掉、列 hover ---------- */
.case-disc-md th, .case-disc-md td { border-width: 0 0 1px; border-color: var(--hairline-2); }
.case-disc-md th { background: var(--tint-1); }
.md :not(.md-table) > table th, .md :not(.md-table) > table td { border-width: 0 0 1px; border-color: var(--hairline-2); }
.md :not(.md-table) > table th { background: var(--tint-1); }
.md-table { border-color: transparent; border-radius: var(--r-panel); box-shadow: 0 0 0 1px var(--hairline); }
.md-table th, .md-table td { border-right-color: transparent; border-bottom-color: var(--hairline); }
.md-table thead th { background: var(--tint-1); }
.md-table tbody tr:nth-child(even) td { background: var(--surface); }
.wl-tr { border-top-color: var(--hairline); }
.wl-tr.is-head { background: var(--tint-1); }
@media (hover: hover) {
  .case-disc-md tr:hover td, .md :not(.md-table) > table tr:hover td { background: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
  .wl-tr:not(.is-head):hover { background: color-mix(in srgb, var(--primary-soft) 26%, transparent); }
}

/* ---------- 10. 黃銅點綴：現在這一步 ---------- */
.case-flow-step.is-on .case-flow-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass-line) 38%, transparent); }

/* ---------- 11. 減少動態：不抬升、不縮放（跟各頁既有的 reduced-motion 規則一致） ---------- */
@media (prefers-reduced-motion: reduce) {
  a.card:hover, .card.link:hover, .pg-topic-card:hover, .pg-tcard:hover, .file-card:hover, .doc-action:hover, .pg-hits .kb-hit:hover, a.pg-tile:hover,
  a.kpi:hover, a.kpi.accent:hover, a.kpi.primary:hover, a.kpi.red:hover, a.kpi.green:hover, a.kpi.amber:hover, a.kpi.blue:hover, a.kpi.teal:hover, a.kpi.ink:hover,
  .btn:active { transform: none; }
}

/* ---------- 12. 1.66.0 共用「⋯」浮層選單（details.pop；行為在 ui.js：點外面／Esc／點了動作就收、同時只開一個） ---------- */
details.pop { position: relative; display: inline-flex; }
details.pop > summary { list-style: none; cursor: pointer; user-select: none; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop[open] > summary { background: var(--tint-1); color: var(--text); }
details.pop > .pop-body {
  position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; min-width: 210px; max-width: min(340px, 92vw);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow-lift);
  animation: pop-in 160ms var(--ease-out);
}
details.pop.left > .pop-body { right: auto; left: 0; }
details.pop.up > .pop-body { top: auto; bottom: calc(100% + 6px); }
.pop-body > .btn, .pop-body > a.btn, .pop-body > button.btn, .pop-body > label.btn {
  width: 100%; justify-content: flex-start; gap: 10px; min-height: 38px; padding: 0 12px; text-align: left;
  border-color: transparent !important; box-shadow: none !important; background: transparent; color: var(--text); font-weight: 600;
}
.pop-body > .btn:hover, .pop-body > .btn:focus-visible { background: var(--tint-1) !important; }
.pop-body > .btn .icon { color: var(--text-3); }
.pop-body > .btn.danger, .pop-body > .btn.is-danger { color: var(--red); }
.pop-body > .btn.danger .icon, .pop-body > .btn.is-danger .icon { color: var(--red); }
.pop-body > .btn .pop-sub { margin-left: auto; padding-left: 12px; font-size: var(--fs-min); font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pop-body .pop-label { padding: 8px 12px 4px; font-size: var(--fs-min); font-weight: 800; letter-spacing: .04em; color: var(--text-3); }
.pop-body .pop-sep { height: 1px; margin: 4px 6px; background: var(--hairline-2); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  /* 手機：貼底的動作面板（在底部導覽之上） */
  details.pop > .pop-body, details.pop.left > .pop-body, details.pop.up > .pop-body {
    position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom));
    max-width: none; max-height: 62vh; overflow-y: auto; padding: 8px; border-radius: 18px;
    box-shadow: 0 0 0 1px var(--hairline-2), 0 -18px 50px -16px rgba(10, 27, 30, 0.45);
    animation: pop-up 200ms var(--ease-out);
  }
  .pop-body > .btn, .pop-body > a.btn, .pop-body > button.btn { min-height: 46px; font-size: 15px; }
}
@keyframes pop-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { details.pop > .pop-body { animation: none; } }
/* 手機貼底面板開著時，AI 浮鈕與回頂端鈕先讓開 */
@media (max-width: 600px) { html.pop-open .ai-fab, html.pop-open .back-top { opacity: 0 !important; pointer-events: none !important; } }

/* ---------- 13. 1.66.0 第二輪降噪：共用層（介面稽核 G1、G3、G4） ----------
   G1 晶片預設淡底＋深色字（有色調不再是實底白字章印——每列兩三顆飽和色章印是全站最大的雜訊來源）；
      實底只留 .solid，限「不需申請（免辦）」「公文逾期」「紅燈」三種，各頁要實底就加 .solid。
   G3 輔助字 --fs-aux 13.5 → 14px（長句一律 ≥ 14px；13px 以下只給時間戳與短標籤）。
   G4 .card.quiet：次要區塊不浮起、不加框，直接放在頁面底色上（每頁只有焦點區塊是卡片）。 */
:root { --fs-aux: 14px; }
.chip.red:not(.solid):not(.soft) { background: var(--red-soft); color: var(--red-deep); }
.chip.orange:not(.solid):not(.soft) { background: var(--orange-soft); color: var(--orange-deep); }
.chip.amber:not(.solid):not(.soft) { background: var(--amber-soft); color: var(--amber-deep); }
.chip.green:not(.solid):not(.soft) { background: var(--green-soft); color: var(--green-deep); }
.chip.blue:not(.solid):not(.soft) { background: var(--blue-soft); color: var(--blue-deep); }
.chip.purple:not(.solid):not(.soft) { background: var(--purple-soft); color: var(--purple-deep); }
.chip.teal:not(.solid):not(.soft) { background: var(--teal-soft); color: var(--teal-deep); }
.chip.lime:not(.solid):not(.soft) { background: var(--lime-soft); color: var(--lime-deep); }
.chip.primary:not(.solid):not(.soft), .chip.copper:not(.solid):not(.soft), .chip.ink:not(.solid):not(.soft) { background: var(--primary-soft); color: var(--primary-deep); }
.chip.brass:not(.solid):not(.soft) { background: var(--brass-soft); color: var(--brass-deep); }
[data-theme='dark'] .chip.copper:not(.solid):not(.soft), [data-theme='dark'] .chip.ink:not(.solid):not(.soft), [data-theme='dark'] .chip.primary:not(.solid):not(.soft) { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-bright); }
.chip:is(.red, .orange, .amber, .green, .blue, .purple, .teal, .lime, .primary, .copper, .ink, .brass):not(.solid):not(.soft) { box-shadow: none; font-weight: 700; }
/* 沒有圖示的狀態晶片前面加 6px 小圓點（狀態一眼辨識，但不再是一塊色塊） */
.chip:is(.red, .orange, .amber, .green, .blue, .purple, .teal, .lime, .primary, .copper, .ink, .brass):not(.solid):not(.soft):not(:has(.icon))::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
/* 實底章印（只給免辦、公文逾期、紅燈）：維持原本 styles.css 的實底＋內光 */
.chip.solid.red { background: var(--red-solid); color: var(--on-tone); }
.chip.solid.amber { background: var(--amber-solid); color: var(--on-tone); }
.chip.solid.orange { background: var(--orange-solid); color: var(--on-tone); }
.chip.solid { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.14); }
/* G4：次要區塊不浮起 */
.card.quiet { background: transparent; box-shadow: none; border-color: transparent; padding-left: 4px; padding-right: 4px; }
.card.quiet:hover { transform: none; box-shadow: none; }
.card.quiet + .card, .card + .card.quiet { margin-top: 24px; }

/* ---------- 14. 1.66.0 共用細節（各隊回報） ----------
   - 收起的「⋯」浮層不參與版面量測（Chrome 收起的 details 仍會量到 fixed 的內容，手機溢出檢查會誤判）
   - 說明「?」字級 11 → 12.5px、平時退淡，滑過或聚焦才完整顯示（全站說明鈕不再搶眼） */
details.pop:not([open]) > .pop-body { display: none; }
.help-q { font-size: 12.5px; opacity: .6; transition: opacity var(--dur), color var(--dur), background var(--dur), border-color var(--dur); }
.help-q:hover, .help-q:focus-visible, .help-q.is-on { opacity: 1; }
@media (hover: none) { .help-q { opacity: .8; } }
