/* 喀嚓後台 Console —— 設計 token 與元件
 *
 * token 直接抄自互動基準 `docs/kacha_handoff/03_design/wireframes/後台Console.html`
 * 與 `客服工作台.html`,**不重新配色**。兩支 wireframe 的 token 值相同,
 * 差別只在 hairline 的不透明度(.08 / .09)——這裡取後台Console 的 .08。
 *
 * 為什麼後台是淺色而 App 是暗房(D11):App 要沉浸、後台要清醒。
 * 同一個人在同一天會用到兩者,長得像同一個東西反而危險 ——
 * 「我現在按的是給玩家看的,還是會扣人家錢的?」不該需要想。
 */
:root{
  --bg:#F5F5F7; --side:#FAFAFC; --sur:#FFFFFF;
  /* ── 三階文字色,三階都要讀得清楚 ──────────────────────────
   *
   * 2026-08-25 由 .56 / .36 調成 .74 / .66。舊值兩階都不合格:
   *
   *   最壞底色是深色偏好下的 --bg(#E8E8EC)—— 底色壓暗一階,
   *   而文字是深色,所以對比反而更差。用它當基準:
   *     ink2 .56 → 3.71:1    ink3 .36 → 2.16:1
   *   WCAG AA 對一般大小的文字要求 4.5:1,兩個都沒過,
   *   而 ink3 連大字的 3:1 都沒過。
   *
   * 這不是理論問題。**用 ink2 的正是欄位標題**(.kv dt)與卡片標題
   * (.card h3)—— 也就是「這個數字是什麼」的那一半。標題看不清楚
   * 的時候,一個畫面上的數字全部失去意義。
   *
   * 為什麼不是剛好壓在 4.5:1(alpha .66):那是及格線,不是舒適線,
   * 而且它假設螢幕校準良好、環境光正常。往上一階留餘裕:
   *     ink  1.00 → 15.6:1   主要文字
   *     ink2  .74 →  6.3:1   次要文字、欄位標題
   *     ink3  .66 →  5.0:1   輔助文字(10~11px 的小字居多)
   *
   * 三階的層次改由**數值差距 + 字重 + 字級**一起撐,不再只靠淡化 ——
   * 只靠淡化的話,要有層次就得有一階不合格。
   */
  --ink:#1D1D1F; --ink2:rgba(29,29,31,.74); --ink3:rgba(29,29,31,.66);
  --acc:#8C5300; --accbg:rgba(140,83,0,.09);
  --safe:#B92219; --safebg:rgba(185,34,25,.08);
  --ok:#206B4B; --okbg:rgba(32,107,75,.09);
  --holo:#6F3ED3; --holobg:rgba(111,62,211,.09);
  --gold:#765607;
  --hair:rgba(0,0,0,.08); --hair2:rgba(0,0,0,.05);
  --sh1:0 1px 3px rgba(0,0,0,.05);
  --sh2:0 8px 28px rgba(0,0,0,.08);
  --sh3:0 18px 50px rgba(0,0,0,.16);
  --r:10px;
}
/* 深色偏好下只把底色壓暗一階,不切換成 App 的午夜暗房 ——
   那會讓兩個不同用途的介面看起來像同一個東西(照客服工作台原型)。 */
@media (prefers-color-scheme: dark){
  :root{ --bg:#E8E8EC; --side:#F0F0F4; }
}
:root[data-theme="dark"]{ --bg:#E8E8EC; --side:#F0F0F4; }
:root[data-theme="light"]{ --bg:#F5F5F7; --side:#FAFAFC; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"SF Pro Text","PingFang TC","Noto Sans TC",sans-serif;
  font-size:13px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
p{margin:0}
a{color:var(--acc)}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
/* 鍵盤可操作的最低門檻:焦點一定看得見。
   後台的操作有不可逆的,看不到焦點就等於閉著眼睛按 Enter。 */
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px}

/* ── 骨架 ───────────────────────────────────────────── */
.app{display:flex; min-height:100dvh}
.sidebar{
  width:228px; flex:none; background:var(--side); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh;
  /* 側欄長高了(角色狀態 + break-glass)之後,原本的版面會把最下面那顆
     按鈕頂出視窗外 —— 而那顆是 break-glass:事故當下唯一的一條路,
     捲不到就等於沒有。導航自己捲,頁腳固定;側欄整體再留一層保險。 */
  overflow-y:auto;
}
#navHost{flex:1 1 auto; min-height:0; overflow-y:auto}
.brand{display:flex; align-items:center; gap:9px; padding:16px 18px 12px}
.brand b{font-size:14px; display:block}
.brand small{font-size:10px; font-weight:700; color:var(--ink3); letter-spacing:1.5px}
.navgrp{padding:8px 10px 2px}
.navgrp>small{display:block; font-size:10px; font-weight:700; color:var(--ink3);
  letter-spacing:1.2px; padding:0 10px 6px}
.nav{display:flex; flex-direction:column; gap:1px}
.nav a{
  display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500;
  color:var(--ink2); padding:8px 10px; border-radius:9px; text-decoration:none;
}
.nav a:hover{background:rgba(0,0,0,.04)}
.nav a[aria-current="page"]{background:var(--accbg); color:var(--acc); font-weight:600}
.sidefoot{margin-top:auto; flex:none; padding:12px 14px; border-top:1px solid var(--hair2)}
.sidefoot .row{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.sidefoot input{
  width:100%; font-size:11px; padding:5px 8px; border:1px solid var(--hair);
  border-radius:7px; background:var(--sur); color:var(--ink); font-family:inherit;
}
.sidefoot .tiny{font-size:10.5px; color:var(--ink3); line-height:1.6}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:52px; flex:none; background:rgba(255,255,255,.75);
  backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--hair);
  display:flex; align-items:center; gap:14px; padding:0 20px;
  position:sticky; top:0; z-index:20;
}
.crumb{font-size:13px; font-weight:600}
.crumb small{color:var(--ink3); font-weight:500}
.audlight{margin-left:auto; display:flex; align-items:center; gap:5px;
  font-size:10.5px; color:var(--ink3); font-weight:600}
.audlight i{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.audlight i.off{background:var(--safe)}
.content{flex:1; padding:20px 22px 40px; min-width:0}
h1.pt{font-size:21px; font-weight:700; letter-spacing:-.3px; margin-bottom:3px}
p.ps{font-size:12.5px; color:var(--ink2); margin-bottom:16px}

/* ── 元件 ───────────────────────────────────────────── */
.card{
  background:var(--sur); border:1px solid var(--hair); border-radius:14px;
  box-shadow:var(--sh1);
}
.card.pad{padding:14px 16px}
.card + .card{margin-top:14px}
.card h3{font-size:12px; color:var(--ink2); font-weight:600; letter-spacing:.3px;
  margin-bottom:9px}

.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
  border-radius:999px; font-size:11px; font-weight:600; line-height:1.7; white-space:nowrap}
.pill.acc{background:var(--accbg); color:var(--acc)}
.pill.safe{background:var(--safebg); color:var(--safe)}
.pill.ok{background:var(--okbg); color:var(--ok)}
.pill.holo{background:var(--holobg); color:var(--holo)}
.pill.mute{background:var(--hair2); color:var(--ink2)}

.btn{
  padding:8px 15px; border-radius:8px; font-size:13px; font-weight:600;
  border:1px solid var(--hair); background:var(--sur); box-shadow:var(--sh1);
}
.btn:hover:not(:disabled){background:rgba(0,0,0,.02)}
.btn.p{background:var(--acc); color:#fff; border-color:transparent}
.btn.p:hover:not(:disabled){filter:brightness(1.06)}
.btn.ink{background:var(--ink); color:#fff; border-color:transparent}
.btn.d{color:var(--safe); border-color:rgba(185,34,25,.35); background:var(--safebg)}
.btn.sm{padding:4px 10px; font-size:11.5px; border-radius:7px}
.btn.ghost{border-color:transparent; background:none; box-shadow:none; color:var(--acc)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.actions{display:flex; gap:9px; flex-wrap:wrap; align-items:center}

.chip{
  padding:4px 10px; border-radius:999px; font-size:11.5px; color:var(--ink2);
  border:1px solid var(--hair); background:var(--sur);
}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}

label{display:block; font-size:12px; color:var(--ink2); margin:0 0 5px}
input[type=text],input[type=number],input[type=search],select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--hair); border-radius:8px;
  background:var(--sur); font:inherit; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc); outline-offset:0;
  border-color:transparent}
textarea{resize:vertical; min-height:66px}
.field{margin-bottom:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hint{color:var(--ink3); font-size:11.5px; line-height:1.7; margin-top:8px}

/* ── 說明提示(tip)──────────────────────────────────────────
 *
 * 一顆 ⓘ,點了才展開。取代原本攤在區塊底下的整段 `.hint` 散文。
 *
 * **尺寸刻意小但不小於可點區域。** 16px 的圓在 13px 的內文旁邊不搶眼,
 * 而 `padding` 把實際命中範圍撐到 24px —— 觸控與手抖都吃得下。
 *
 * 顏色用 --ink3(已經是 5.0:1,合格),不是更淡的灰:它是**可以按的東西**,
 * 而看起來像裝飾的東西沒有人會去按。
 */
.tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin:0 0 0 5px; padding:0;
  border:1px solid currentColor; border-radius:50%;
  font-size:10px; font-weight:700; font-style:italic; line-height:1;
  color:var(--ink3); vertical-align:middle; flex:none;
  /* 命中範圍撐大,但不影響版面 */
  box-shadow:0 0 0 4px transparent;
}
.tip:hover{ color:var(--ink) }
.tip[aria-expanded="true"]{ color:var(--acc); border-color:var(--acc) }

/* 浮層用 fixed:表格那幾格是 overflow-x:auto,
   長在裡面的絕對定位元素會被切掉。 */
.tippop{
  position:fixed; z-index:60;
  background:var(--sur); color:var(--ink2);
  border:1px solid var(--hair); border-radius:10px;
  box-shadow:var(--sh2);
  padding:10px 12px; font-size:12px; line-height:1.65;
  white-space:pre-wrap;
}
.note{font-size:11.5px; color:var(--ink3); line-height:1.7; margin-top:8px}

table{border-collapse:collapse; width:100%; font-size:12.5px}
.tblwrap{overflow-x:auto}
th{text-align:left; font-size:10.5px; font-weight:700; color:var(--ink3);
  letter-spacing:.4px; padding:10px 12px; border-bottom:1px solid var(--hair);
  white-space:nowrap; background:var(--sur)}
td{padding:9px 12px; border-bottom:1px solid var(--hair2); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:rgba(0,0,0,.02)}

.rowline{display:flex; gap:9px; align-items:baseline; padding:7px 0;
  border-bottom:1px solid var(--hair2); font-size:12.5px}
.rowline:last-child{border-bottom:0}
.rowline .l{color:var(--ink2); flex:1; min-width:0}
.rowline .v{font-weight:600}
.kv{display:flex; padding:7px 0; border-bottom:1px solid var(--hair2); gap:12px}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--ink2); width:104px; flex:none; font-size:12px}
.kv dd{margin:0; flex:1; min-width:0; word-break:break-all}
dl{margin:0}
.big{font-size:26px; font-weight:700; letter-spacing:-.6px}
.tiny{font-size:11px; color:var(--ink3)}
.scroll{max-height:340px; overflow:auto}
.quote{background:var(--bg); border-radius:8px; padding:11px 13px; font-size:13px;
  border-left:3px solid var(--hair); white-space:pre-wrap}

.warnbox{background:var(--safebg); border:1px solid rgba(185,34,25,.22); color:#8f2b25;
  border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.65}
.okbox{background:var(--okbg); border:1px solid rgba(32,107,75,.22); color:#1c6b4a;
  border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.65}
.infobox{background:var(--accbg); border:1px solid rgba(140,83,0,.2); color:#7a4900;
  border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.65}
.warnbox code,.infobox code,.okbox code{font-family:ui-monospace,Menlo,monospace}

/* 狀態三態:載入中 / 空 / 讀不到。
   **讀不到就顯示讀不到** —— 一個看起來正常但其實是假的後台,比沒有後台更危險。 */
.state{padding:26px 18px; text-align:center; color:var(--ink2); font-size:12.5px}
.state b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:5px}
.state .why{margin-top:8px; font-size:11.5px; color:var(--ink3); line-height:1.7;
  max-width:560px; margin-left:auto; margin-right:auto; word-break:break-word}
.state .btn{margin-top:12px}

/* master-detail(D02 / 檢舉 / 出金共用) */
.split{display:grid; grid-template-columns:392px minmax(0,1fr); gap:14px; align-items:start}
@media (max-width:1100px){ .split{grid-template-columns:1fr} }
.qhead{display:flex; gap:8px; padding:11px 12px; border-bottom:1px solid var(--hair);
  align-items:center; flex-wrap:wrap}
.qrow{display:block; width:100%; text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--hair2); border-left:3px solid transparent}
.qrow:hover{background:rgba(0,0,0,.025)}
.qrow[aria-current="true"]{background:var(--accbg); border-left-color:var(--acc)}
.qrow .r1{display:flex; align-items:center; gap:6px}
.qrow .t{font-size:12.5px; font-weight:600; margin:2px 0 1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qrow .r2{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink3)}
.qlist{max-height:calc(100dvh - 190px); overflow:auto}

/* 客服工作台三欄(照 客服工作台.html 的版面,不重新設計) */
.cswrap{display:grid; grid-template-columns:272px minmax(0,1fr) 336px;
  gap:0; border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  background:var(--sur); box-shadow:var(--sh1); min-height:calc(100dvh - 190px)}
@media (max-width:1240px){ .cswrap{grid-template-columns:240px minmax(0,1fr)}
  .cswrap .evid{display:none} }
@media (max-width:900px){ .cswrap{grid-template-columns:1fr} .cswrap .queue{display:none} }
.cswrap .queue{background:var(--side); border-right:1px solid var(--hair);
  padding:12px 0 20px; overflow:auto}
.cswrap .csmain{padding:18px 22px 30px; min-width:0}
.cswrap .evid{background:var(--side); border-left:1px solid var(--hair);
  padding:14px 0 30px; min-width:0; overflow:auto}
.evid .pad{padding:0 14px}
.tabs{display:flex; gap:2px; padding:0 12px 10px; overflow-x:auto}
.tab{padding:4px 9px; border-radius:7px; font-size:12px; color:var(--ink2); white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink); color:#fff}

/* 流程步驟條 */
.steps{display:flex; margin:2px 0 16px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:7px; padding:5px 13px 5px 11px;
  background:var(--sur); border:1px solid var(--hair); font-size:12px; color:var(--ink3)}
.step:first-child{border-radius:999px 0 0 999px; padding-left:14px}
.step:last-child{border-radius:0 999px 999px 0}
.step + .step{border-left:0}
.step b{font-weight:600}
.step.done{color:var(--ok)}
.step.now{color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1.5px var(--acc);
  border-color:transparent; z-index:1}
.step .dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5}
.step.now .dot{background:var(--acc); opacity:1}

/* ── 視窗與提示 ─────────────────────────────────────── */
.veil{position:fixed; inset:0; background:rgba(0,0,0,.32); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:22px; z-index:50}
.veil[hidden]{display:none}
.modal{background:var(--sur); border-radius:14px; box-shadow:var(--sh3);
  width:min(560px,100%); max-height:88vh; overflow:auto}
.modal.wide{width:min(780px,100%)}
.mtop{padding:18px 20px 0}
.mtop h2{font-size:17px; letter-spacing:-.2px}
.mtop h2.danger{color:var(--safe)}
.mtop p{margin:6px 0 0; color:var(--ink2); font-size:12.5px; line-height:1.7}
.mbody{padding:14px 20px}
.mfoot{padding:13px 20px 18px; display:flex; gap:9px; justify-content:flex-end;
  border-top:1px solid var(--hair2); position:sticky; bottom:0; background:var(--sur)}
.preview{background:var(--bg); border-radius:8px; padding:12px 14px; margin:2px 0 12px}
.audit{font-size:10.5px; color:var(--ink3); background:rgba(0,0,0,.03);
  border-radius:8px; padding:7px 10px; margin-top:10px; line-height:1.7}
.confirminput{border:1.5px solid var(--safe) !important}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
  font-size:13px; box-shadow:var(--sh2); z-index:80; max-width:min(560px,90vw)}
.toast[hidden]{display:none}
.toast.bad{background:var(--safe)}

/* ── 權限在畫面上的樣子 ─────────────────────────────── */
/* 沒有能力的功能**看得見但按不動,而且寫明原因**。
   整組藏起來 → 操作者不知道它存在;灰掉又不說原因 → 他以為系統壞了。 */
.capnote{display:block; font-size:10.5px; line-height:1.6; color:var(--ink3);
  margin-top:4px; max-width:44ch}
.capnote b{color:var(--ink2)}
.actions .capnote{flex-basis:100%}
.nav a.locked{color:var(--ink3); cursor:default; flex-wrap:wrap}
.nav a.locked:hover{background:rgba(0,0,0,.02)}
.needrole{margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.3px;
  color:var(--ink3); background:var(--hair2); padding:1px 6px; border-radius:99px}

#banner:empty{display:none}
.bnr{padding:9px 20px; font-size:12px; line-height:1.65; border-bottom:1px solid var(--hair)}
.bnr b{font-weight:700}
.bnr code{font-family:ui-monospace,Menlo,monospace; font-size:11px}
.bnr.warn{background:var(--accbg); color:#7a4900}
.bnr.bad{background:var(--safebg); color:#8f2b25}

.devroles{margin-top:10px; padding-top:10px; border-top:1px dashed var(--hair)}
.btn.bg{width:100%; margin-top:10px; justify-content:center; text-align:center}

/* 「還沒上線」跟「壞了」是兩件事:前者不需要重試按鈕,也不該長得像故障。 */
.notlive{border:1px dashed var(--hair); border-radius:10px; padding:16px 18px;
  background:var(--bg); text-align:center; color:var(--ink2); font-size:12.5px}
.notlive b{display:block; font-size:13px; color:var(--ink); margin-bottom:6px}
.notlive .mono{display:inline-block; background:var(--sur); border:1px solid var(--hair);
  border-radius:6px; padding:3px 8px; margin:2px 0 6px; color:var(--ink2)}
.notlive .why{font-size:11.5px; color:var(--ink3); line-height:1.75;
  max-width:60ch; margin:0 auto}
.warn{color:var(--safe)}

/* ── 待核清單 ───────────────────────────────────────── */
/* 卡片而不是表格:第二個人要判斷的是「要做什麼、對誰做」,
   那是一整段 JSON,塞不進一格表格,而塞不進去的結果就是沒有人看。 */
.apcard{border-bottom:1px solid var(--hair); padding:14px 16px}
.apcard:last-child{border-bottom:0}
.apcard.mine{background:var(--bg)}
.aphead{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.aphead b{font-size:13.5px}
.aprow{display:flex; gap:10px; align-items:baseline; padding:4px 0; font-size:12px}
.aprow .l{color:var(--ink2); width:88px; flex:none}
.aprow .v{font-weight:600; min-width:0; word-break:break-all}
.apbody{margin:6px 0 8px; background:var(--bg); border:1px solid var(--hair);
  border-radius:8px; padding:10px 12px; font-family:ui-monospace,Menlo,monospace;
  font-size:11px; line-height:1.6; overflow-x:auto; max-height:220px; white-space:pre}
.apfoot{margin-top:10px; padding-top:10px; border-top:1px solid var(--hair2)}
.apfoot .capnote{margin-top:6px}

/* ── A/B 圖檢視器(D02)────────────────────────────── */
.vwr{border:1px solid var(--hair); border-radius:12px; overflow:hidden; background:var(--bg)}
.vwrbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; background:var(--sur); border-bottom:1px solid var(--hair)}
.zoomctl{margin-left:auto; display:flex; align-items:center; gap:6px}
.zoomctl .num{min-width:44px; text-align:center; font-size:11.5px; color:var(--ink2)}
.tgl2{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--ink2); margin:0; cursor:pointer}
.tgl2 input{width:auto; margin:0}

.vport{display:grid; gap:2px; background:var(--hair); height:clamp(280px,52vh,620px)}
.vport[data-mode="side"]{grid-template-columns:1fr 1fr}
.vport[data-mode="side"] .pane[data-w="diff"]{display:none}
.vport[data-mode="diff"] .pane[data-w="a"],
.vport[data-mode="diff"] .pane[data-w="b"]{display:none}
.vport[data-mode="a"] .pane[data-w="b"],
.vport[data-mode="a"] .pane[data-w="diff"]{display:none}
.vport[data-mode="b"] .pane[data-w="a"],
.vport[data-mode="b"] .pane[data-w="diff"]{display:none}
@media (max-width:820px){ .vport[data-mode="side"]{grid-template-columns:1fr} }

.pane{position:relative; overflow:hidden; background:#0F0F12; cursor:grab;
  touch-action:none; min-width:0}
.pane.grabbing{cursor:grabbing}
.pane .stage{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform}
.pane .stage img{width:100%; height:100%; display:block; user-select:none;
  -webkit-user-drag:none}
.panelab{position:absolute; top:8px; left:8px; z-index:3; pointer-events:none;
  background:rgba(15,12,25,.55); backdrop-filter:blur(8px); color:#fff;
  font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:99px}
.marks{position:absolute; top:0; left:0; z-index:2; pointer-events:none}
.mk circle{fill:none; stroke-width:2; filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.mk text{font-size:12px; font-weight:700; fill:#fff; paint-order:stroke;
  stroke:rgba(0,0,0,.75); stroke-width:3px}
.mk-high circle{stroke:#3ED9A0}
.mk-mid circle{stroke:#FFB44D}
.mk-low circle{stroke:#FF6A60}
.mk-none circle{stroke:#C9C9D0; stroke-dasharray:5 4}
.mk.hi circle{stroke-width:4}
/* 佔位圖(1×1)被放大到整格 —— 看起來像一張純色照片。
   加斜線讓它一眼就不像照片,不然它會被當成「一張很乾淨的圖」。 */
.pane.placeholder .stage{
  background-image:repeating-linear-gradient(45deg,
    rgba(185,34,25,.28) 0 12px, transparent 12px 24px);
}
.pane.placeholder .stage img{opacity:.25}
.pane.blend .blendwrap{position:absolute; inset:0; isolation:isolate}
.pane.blend .diffb{mix-blend-mode:difference}
.pane.blend.boost .blendwrap{filter:brightness(3.2) saturate(1.4)}
.paneerr{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:20px;
  color:rgba(255,255,255,.72); font-size:12px; text-align:center}
.paneerr b{color:#fff; font-size:13px}
.paneerr .why{font-size:11px; line-height:1.7; max-width:46ch; color:rgba(255,255,255,.55)}
.paneerr .mono{color:rgba(255,255,255,.45)}
.vwrfoot{padding:7px 10px; font-size:10.5px; color:var(--ink3); background:var(--sur);
  border-top:1px solid var(--hair); line-height:1.7}
kbd{font-family:ui-monospace,Menlo,monospace; font-size:10px; border:1px solid var(--hair);
  border-bottom-width:2px; border-radius:4px; padding:0 4px; background:var(--sur);
  color:var(--ink2); margin:0 1px}

/* ── 差異清單(照 P20 的 .dl/.drow/.sal,換成後台的淺色工作系)── */
.dl{border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:var(--sur)}
.drow{display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-bottom:1px solid var(--hair2)}
.drow:last-child{border-bottom:0}
.drow:hover{background:rgba(0,0,0,.02)}
.drow .inf{flex:1; min-width:0}
.drow .inf b{font-size:12.5px; font-weight:600; display:block}
.dnum{width:22px; height:22px; border-radius:7px; flex:none; display:grid;
  place-items:center; font-size:11px; font-weight:700; color:#fff; background:var(--ink3)}
.dnum.mk-high{background:var(--ok)} .dnum.mk-mid{background:var(--acc)}
.dnum.mk-low{background:var(--safe)} .dnum.mk-none{background:var(--ink3)}
.salrow{display:flex; align-items:center; gap:7px; margin-top:3px}
.salrow small{font-size:10.5px; color:var(--ink3)}
.sal{width:74px; flex:none; height:4px; border-radius:99px; background:var(--hair2);
  overflow:hidden}
.sal i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--ok),var(--acc))}

/* ── 審核佇列的風險排序 ─────────────────────────────── */
.qhead2{padding:8px 12px; gap:8px; font-size:11.5px}
.qmeta{padding:9px 12px; font-size:11px; color:var(--ink3); line-height:1.7;
  border-bottom:1px solid var(--hair2); background:var(--bg)}
.qmeta b{color:var(--ink)}
.qrow.risk{border-left-color:var(--safe); background:rgba(185,34,25,.035)}
.qrow.warnrow{border-left-color:var(--acc)}
.qrow[aria-current="true"]{background:var(--accbg); border-left-color:var(--acc)}

.detwrap{padding:16px}
.dethead{display:flex; align-items:flex-start; gap:12px; margin-bottom:10px}
.dethead h3{font-size:16px; color:var(--ink); margin:0}
.flagbox{background:var(--safebg); border:1px solid rgba(185,34,25,.22); color:#8f2b25;
  border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.7; margin-bottom:12px}
.flagbox ul{margin:5px 0 0; padding-left:18px}
.flagbox li b{margin-right:6px}
.detwrap .okbox{margin-bottom:12px}
.actbar{margin-top:16px; padding-top:14px; border-top:1px solid var(--hair)}
.btn.big{padding:10px 20px; font-size:14px}

/* 動效克制,而且尊重系統偏好 —— 後台沒有任何動畫是內容的一部分。 */
@media (prefers-reduced-motion:no-preference){
  .toast{animation:rise .18s ease-out}
  .modal{animation:mup .2s cubic-bezier(.2,.8,.3,1)}
  @keyframes rise{from{opacity:0; transform:translate(-50%,8px)}}
  @keyframes mup{from{opacity:0; transform:translateY(12px)}}
}