/* ═══════════════════════════════════════════════════════════════════════
   軍火庫「業務管理」共用皮膚 · 私人銀行夜金 (/rex/hub/biz-skin.css)
   用法：<head> 內、頁內最後一個 <style> 之後：<link rel="stylesheet" href="/rex/hub/biz-skin.css">
         ＋ <meta name="rex-theme" content="native">（必須在開機碼 <script id="rex-theme-boot"> 之前）
         ＋ 襯線字 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700;900&display=swap" rel="stylesheet">
   深色＝html[data-rex-theme="dark"]（原生，非濾鏡）。頁面上不放明暗鈕，由右上角膠囊決定。
   三種頁型都吃得下：
     A 獨立 :root 變數型（--bg --card --ink --mut --acc…）：link 進來，變數被 html:root 重新指向 token，免改。
     B 連 hub.css 型（--navy --teal --orange --light…）：同上；並重新定義 .hub-top/.hero/.card/.btn/.tab/.tbl/.note…（hub.css 的
       prefers-color-scheme 深色區塊寫死色，這裡用 html body 前綴權重蓋掉，使「系統深色＋頁面淺色」不再錯亂）。
     C Tailwind CDN 型：Tailwind 的 <style> 在 <head> 最後才注入，所以第 8 節一律用 `body ` 前綴拉高權重。
   通用新元件（頁面自己貼 class）：
     .bz-hd（夜金頁首帶，含 .bz-hd-in／.bz-crumb／.bz-title／.bz-sub／.bz-hd-links）
     .bz-hero[data-art-slot="H0X"]（主視覺位；可塞 <img> 或 .bz-hero-t 文案，見第 5 節）
     .bz-card .bz-btn(.pri/.sec) .bz-input .bz-tabs>.bz-tab(.on) .bz-badge(.gold/.ok/.err/.sky) .bz-note(.ok/.warn/.err/.sky)
     .bz-modal-mask>.bz-modal .bz-table .bz-kicker .bz-serif .bz-sec-hd .bz-only-print／.bz-no-print
   頁內可覆寫：--bz-w（頁首與主視覺內容寬，預設 1060px）。
   鐵律：不碰 #rex-topbar（功能膠囊）、#rxi-chip、demo-mask 的 #dm-fab／#dm-panel、consent 彈窗的顯示邏輯。
   token 一律 --bz-* 前綴。
   權重約定（2026-10-19 收尾，W11）：接管「通用 class」（.btn .badge .note .hero .sec .card .step …）的規則一律寫成
     :where(html body) .xxx → 權重＝單一 class（0,1,0）。因本檔排在頁內 <style> 之後，同權重仍蓋得過原頁 .btn{…}；
     頁內只要多一層（.side .btn、html body .btn、button.btn）就能蓋過皮膚，不必再用 :not(#_) 硬拚。
   收尾併入的建議來源標在註解（W1～W11＝各批頁面代理的 skin_requests，見 _biz-qa/SKIN_REQUESTS.md）。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. token（淺色）：象牙紙＋深藍＋金 ── */
:root{
  --bz-navy:#0a2334; --bz-navy2:#0d2a3a; --bz-navy3:#12384f; --bz-deep:#061726;
  --bz-gold:#E8A020; --bz-gold-hi:#ffd75a; --bz-gold-soft:#ffe28a; --bz-gold-ink:#8a5a06; --bz-on-gold:#3a2c00;
  --bz-paper:#f6f1e6; --bz-card:#fffdf8; --bz-card2:#f8f3e7; --bz-card3:#efe8d8; --bz-field:#ffffff;
  --bz-line:#e6dcc6; --bz-line2:#efe7d4; --bz-inb:#d4ccba;
  --bz-text:#1b2733; --bz-muted:#566373; --bz-soft:#667380; --bz-hd:#0a2334;
  --bz-acc-ink:#0a2334; --bz-acc-bg:#f3e9cf; --bz-acc-line:#e2c172;
  --bz-ok:#1d7a5c; --bz-ok-bg:#e1f5ee; --bz-err:#b3261e; --bz-err-bg:#fde8e6; --bz-warn:#7a4a05; --bz-warn-bg:#fdf1d3;
  --bz-sky:#0b5d86; --bz-sky-bg:#e3f1f8; --bz-violet:#5b3fa0; --bz-violet-bg:#ece6f8;
  --bz-dis-bg:#ece5d4; --bz-dis-ink:#7d7666; --bz-dis-line:#d9cfb8;
  --bz-shadow:0 18px 40px -30px rgba(10,35,52,.55); --bz-shadow-sm:0 8px 22px -18px rgba(10,35,52,.6);
  --bz-serif:'Noto Serif TC','Source Han Serif TC','PMingLiU',serif;
  --bz-sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',ui-sans-serif,system-ui,sans-serif;
  --bz-w:1060px;
}

/* ── 2. token（深色）：近黑藍底＋金；覆寫同名 token 即整頁換色 ── */
html[data-rex-theme="dark"]{
  --bz-paper:#06121b; --bz-card:#0c2030; --bz-card2:#0a1b29; --bz-card3:#112b3f; --bz-field:#071826;
  --bz-line:rgba(232,160,32,.24); --bz-line2:rgba(255,255,255,.09); --bz-inb:rgba(255,255,255,.2);
  --bz-text:#e4eaf0; --bz-muted:#a9b7c5; --bz-soft:#91a3b4; --bz-hd:#f3e7c6;
  --bz-gold-ink:#f0b94a;
  --bz-acc-ink:#f0c36a; --bz-acc-bg:rgba(232,160,32,.14); --bz-acc-line:rgba(232,160,32,.45);
  --bz-ok:#5fd3a6; --bz-ok-bg:rgba(29,158,117,.18); --bz-err:#fca5a5; --bz-err-bg:rgba(239,68,68,.16); --bz-warn:#fcd34d; --bz-warn-bg:rgba(250,204,21,.12);
  --bz-sky:#7dd3fc; --bz-sky-bg:rgba(56,189,248,.14); --bz-violet:#c4b5fd; --bz-violet-bg:rgba(167,139,250,.16);
  --bz-dis-bg:rgba(255,255,255,.06); --bz-dis-ink:rgba(243,231,198,.5); --bz-dis-line:rgba(232,160,32,.32);
  --bz-shadow:0 18px 40px -26px rgba(0,0,0,.85); --bz-shadow-sm:0 8px 22px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ── 3. 把各頁常見原變數重新指向 token（html:root 權重 > 頁內 :root，不必改頁面 CSS） ──
      A 型（頁內獨立變數）：--bg --card --ink --mut --acc --accD --border-soft --line --ok --bad --warn --info … 以及 *B 淡底系列
      B 型（hub.css）：--navy* --light --white --teal* --orange* --gold* --ink-soft --ink-mute --shadow*
      --white 在 hub 各頁幾乎都當「卡片底」用；若某頁拿它當深底上的白字，該頁自己在頁內 style 處理。
      --acc 淺色＝深藍（可當白字按鈕底也可當字色）；深色＝金（當字色；當按鈕底時請改用 .btn.pri 這類已被皮膚接管的類別）。 */
html:root{
  --bg:var(--bz-paper); --card:var(--bz-card); --ink:var(--bz-text); --mut:var(--bz-muted);
  --acc:var(--bz-navy); --accD:var(--bz-deep);
  --border-soft:var(--bz-line); --line:var(--bz-line);
  --ok:var(--bz-ok); --okB:var(--bz-ok-bg); --bad:var(--bz-err); --badB:var(--bz-err-bg); --warn:var(--bz-warn); --warnB:var(--bz-warn-bg);
  --info:var(--bz-sky); --blue:var(--bz-sky); --blueB:var(--bz-sky-bg);
  --orange:var(--bz-gold); --orangeB:var(--bz-acc-bg); --purple:var(--bz-violet); --purpleB:var(--bz-violet-bg);
  --gold:var(--bz-gold); --goldB:var(--bz-acc-bg); --gold-light:var(--bz-acc-bg);
  /* hub.css */
  --navy:var(--bz-navy2); --navy-mid:var(--bz-navy); --navy-soft:var(--bz-navy3);
  --light:var(--bz-paper); --white:var(--bz-card);
  --teal:var(--bz-navy3); --teal-dark:var(--bz-navy); --teal-light:var(--bz-acc-bg);
  --orange-dark:var(--bz-gold-ink); --orange-light:var(--bz-acc-bg);
  --ink-soft:var(--bz-muted); --ink-mute:var(--bz-soft);
  --shadow:var(--bz-shadow-sm); --shadow-lg:var(--bz-shadow);
}
html[data-rex-theme="dark"]:root{
  --acc:var(--bz-gold); --accD:var(--bz-gold-hi);
  --teal:var(--bz-acc-ink); --teal-dark:var(--bz-hd);
  --orange-dark:var(--bz-acc-ink);
}
/* W6／W8：連 /assets/design-tokens.css 的頁另有 --ink-mut --border-sub --acc-deep（原本沒接到 → 深色仍是 slate 淺灰、低對比）。
   token 本身分明暗，所以一組就夠；用 :root:root 拉到 0,2,1，蓋過頁內 :root 與 design-tokens 的 :root{…}。 */
html:root:root{--ink-mut:var(--bz-muted); --border-sub:var(--bz-line2); --acc-deep:var(--bz-deep)}
html[data-rex-theme="dark"]:root:root{--acc-deep:var(--bz-gold-hi)}
/* W6：design-tokens 的深色區塊是 :root[data-theme="dark"]（0,2,0，會蓋過上面 html:root 的 --bg --card --ink…）。
   只有自己切 data-theme 的頁（travel）會觸發；這裡把它拉回 token（0,3,1），淺色頁＋data-theme=dark 也不會冒出 slate 底。
   不做全域 html[data-rex-theme="dark"]:root:root{--ink…}：cases／simulator 頁內刻意把 --ink 指到 --bz-hd，全域版會蓋掉它。 */
html[data-theme="dark"]:root:root{--bg:var(--bz-paper); --card:var(--bz-card); --ink:var(--bz-text); --ink-mut:var(--bz-muted);
  --border-soft:var(--bz-line); --border-sub:var(--bz-line2); --acc:var(--bz-navy); --acc-deep:var(--bz-deep)}
html[data-rex-theme="dark"][data-theme="dark"]:root:root{--acc:var(--bz-gold); --acc-deep:var(--bz-gold-hi)}

/* ── 4. 基礎：底色、字型、選取、捲軸、焦點 ── */
html body{background:var(--bz-paper)!important;color:var(--bz-text);font-family:var(--bz-sans);line-height:1.65;-webkit-font-smoothing:antialiased}
html,body{max-width:100%}
html body.text-gray-800,html body.text-gray-700,html body.text-gray-900{color:var(--bz-text)}
body ::selection{background:rgba(232,160,32,.35)}
html{scrollbar-color:rgba(232,160,32,.45) transparent}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--bz-gold);outline-offset:2px}
html body h1,html body h2,html body h3{color:var(--bz-hd)}
.bz-serif{font-family:var(--bz-serif);letter-spacing:.04em}
.bz-kicker{display:inline-flex;align-items:center;gap:12px;color:var(--bz-gold-ink);font-weight:800;font-size:12.5px;letter-spacing:.3em}
.bz-kicker::before,.bz-kicker::after{content:"";width:30px;height:1px;background:var(--bz-gold)}
.bz-sec-hd{display:flex;align-items:center;gap:14px;margin:0 0 8px}
.bz-sec-hd h2{font-family:var(--bz-serif);font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--bz-hd);letter-spacing:.06em}
.bz-sec-hd::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bz-gold),transparent)}
@media (prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── 5. 夜金頁首帶 .bz-hd ＋ 主視覺位 .bz-hero ──
      .bz-hd 請同時加 data-rex-header（膠囊定位用）。右側自動讓出 96px 給 #rex-topbar（72×38），算法見下方 W5／W9／W11 註解。
      <div data-rex-header class="bz-hd"><div class="bz-hd-in">
        <nav class="bz-crumb"><a href="/rex/hub/classic.html#cat=biz">軍火庫</a><i>›</i><a href="/rex/hub/classic.html#cat=biz">業務管理</a><i>›</i><span>子分類</span></nav>
        <h1 class="bz-title">頁名</h1><p class="bz-sub">一句話說明</p>
        <nav class="bz-hd-links"><a href="…">連結</a></nav>   （選用）
      </div></div>
      <div class="bz-hero" data-art-slot="H0X"><div class="bz-hero-t">（選用）文案／晶片</div></div>
      之後要換成 ChatGPT 圖：<div class="bz-hero has-art" …><img src="…" alt="" loading="lazy"></div> ── */
/* W5／W9／W11 頁首對齊：頁首文字左緣＝主內容左緣（--bz-w 置中欄的左緣）。
   做法：左 padding＝max(16px,(100% − --bz-w)/2)（padding 的 % 以 body 寬計，不含捲軸），內層靠左、最寬 --bz-w。
   右 padding 至少 96px 給功能膠囊；launcher.js 的「表頭讓位」也會在 [data-rex-header] 上實測補 padding-right（約 98px），
   所以內層不再置中（舊版置中在「左 16／右 98」的盒子裡，標題會比主內容往左偏約 40px）。
   頁內自己算 .bz-hd padding（cases、passbook、touch…）權重較高，照舊優先。 */
.bz-hd{position:relative;box-sizing:border-box;width:100%;padding:12px 96px 14px 16px;padding-left:max(16px,calc((100% - var(--bz-w)) / 2));padding-right:max(96px,calc((100% - var(--bz-w)) / 2));color:#cbd7e1;
  background:linear-gradient(180deg,#0c2b3e 0%,#0a2334 100%);border-bottom:1px solid rgba(232,160,32,.7)}
.bz-hd-in{max-width:var(--bz-w);margin:0}
/* hub.css 型頁的主內容包在 .wrap（max-width＝--bz-w、左右 padding 16px）裡 → 頁首文字再內縮 16px，對齊卡片左緣而不是 .wrap 外框。
   用 :where() 包住 → 權重仍是 0,1,0，頁內自己算的 .bz-hd padding 照舊優先。 */
:where(body:has(.wrap > :is(.bz-hero,.hero))) .bz-hd{padding-left:max(16px,calc((100% - var(--bz-w)) / 2 + 16px))}
.bz-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12.5px;line-height:1.5;color:#9fb1c1;min-height:28px}
.bz-crumb a{color:#b9c7d4;text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
/* W5：頁面全域 a{color:…}／a:link 類規則會染到頁首連結 → 頁首內連結權重再拉一層（顏色不變） */
.bz-hd .bz-crumb a{color:#b9c7d4}
.bz-crumb a:hover,.bz-hd .bz-crumb a:hover{color:var(--bz-gold-hi);opacity:1}
.bz-crumb i{font-style:normal;color:rgba(232,160,32,.7)}
.bz-crumb span{color:#e6edf3}
.bz-title{font-family:var(--bz-serif);font-size:clamp(21px,3vw,28px);font-weight:700;letter-spacing:.06em;line-height:1.3;color:#fff!important;margin:2px 0 0}
.bz-sub{font-size:13px;line-height:1.6;color:#b9c7d4;margin:4px 0 0;max-width:640px}
.bz-hd-links{display:flex;flex-wrap:wrap;gap:6px 6px;margin-top:8px}
.bz-hd-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(232,160,32,.4);color:#e6edf3;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.bz-hd-links a:hover{background:rgba(232,160,32,.16);color:var(--bz-gold-hi);opacity:1}
.bz-hd .bz-hd-links a{color:#e6edf3}
.bz-hd-links a:hover,.bz-hd .bz-hd-links a:hover{background:rgba(232,160,32,.16);color:var(--bz-gold-hi);opacity:1}
.bz-hd-links a.on,.bz-hd-links a[aria-current="page"],.bz-hd .bz-hd-links a.on,.bz-hd .bz-hd-links a[aria-current="page"]{background:linear-gradient(135deg,#ffd75a,var(--bz-gold));color:var(--bz-on-gold);border-color:var(--bz-gold);font-weight:800}

.bz-hero,:where(html body) .hero{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;color:#f3e7c6;border-radius:18px;
  border:1px solid rgba(232,160,32,.45);box-shadow:var(--bz-shadow);
  background:radial-gradient(520px 260px at 6% 0%,rgba(232,160,32,.2),transparent 65%),radial-gradient(460px 300px at 98% 100%,rgba(232,160,32,.13),transparent 62%),
    linear-gradient(160deg,#0a2334 0%,#061726 70%,#040f1c 100%)}
.bz-hero{min-height:112px;padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px;margin:16px auto;width:calc(100% - 32px);max-width:var(--bz-w)}
.bz-hero::before,:where(html body) .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:0;width:auto;height:auto;right:auto;top:auto;
  background:repeating-linear-gradient(0deg,rgba(232,160,32,.06) 0 1px,transparent 1px 44px),repeating-linear-gradient(90deg,rgba(232,160,32,.06) 0 1px,transparent 1px 44px)}
.bz-hero::after,:where(html body) .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 86% 40%,transparent 0 40px,rgba(255,215,0,.09) 41px 42px);-webkit-mask-image:radial-gradient(circle at 86% 40%,#000,transparent 66%);mask-image:radial-gradient(circle at 86% 40%,#000,transparent 66%)}
.bz-hero>img,.bz-hero>picture,.bz-hero>picture img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block}
.bz-hero.has-art::after{background:linear-gradient(90deg,rgba(6,23,38,.9),rgba(6,23,38,.35) 70%,transparent);-webkit-mask-image:none;mask-image:none}
.bz-hero-t{max-width:620px;font-size:13.5px;line-height:1.7;color:#d3dde6;padding-left:12px;border-left:1px solid rgba(232,160,32,.6)}
.bz-hero-t b{color:#fff}
html body .hero h1{font-family:var(--bz-serif);color:#fff!important;letter-spacing:.05em}
:where(html body) .hero p{color:#d3dde6;opacity:1}
:where(html body) .hero .chip{background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.5);color:#f3e7c6}
/* W3：hub.css 型頁的 .hero.xxx（0,2,0）自帶底色會蓋過上面 → 同時掛 .bz-hero 的 hero 一律夜金底 */
:where(html body) .hero.bz-hero{background:radial-gradient(520px 260px at 6% 0%,rgba(232,160,32,.2),transparent 65%),radial-gradient(460px 300px at 98% 100%,rgba(232,160,32,.13),transparent 62%),
    linear-gradient(160deg,#0a2334 0%,#061726 70%,#040f1c 100%)}
/* W10：滿版 hero 變體（貼齊頁寬、不圓角、只留底線） */
:where(html body) .hero.bz-full,.bz-hero.bz-full{border-radius:0;border-width:0 0 1px;width:100%;max-width:none;margin-left:0;margin-right:0}
/* W8：深底（hero／主視覺／結果卡）裡的 .btn.ghost：透明＋金邊，不要冒出一塊象牙白 */
:where(html body) :is(.hero,.bz-hero,.result) .btn.ghost{background:transparent;color:var(--bz-gold-soft);border-color:rgba(232,160,32,.6)}
:where(html body) :is(.hero,.bz-hero,.result) .btn.ghost:hover{background:rgba(232,160,32,.16);color:var(--bz-gold-hi)}
.bz-chips{display:flex;flex-wrap:wrap;gap:6px}
.bz-chips span{font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.5);color:#f3e7c6}
@media (max-width:640px){.bz-hero{min-height:84px;padding:14px 16px;margin:12px auto;border-radius:14px}
  .bz-hd{padding:10px 92px 12px 16px}
  /* W9：手機的「個資遮罩」小鈕（#dm-fab，膠囊正下方 top:56px）會壓到副標 → 副標右緣離視窗右緣至少 104px */
  .bz-hd .bz-sub{max-width:calc(100vw - 16px - 104px)}}

/* 舊版 hub.css 頂欄（未改成 .bz-hd 的頁）也換成夜金帶 */
html body .hub-top{background:linear-gradient(180deg,#0c2b3e,#0a2334);border-bottom:1px solid rgba(232,160,32,.7);box-shadow:none;padding-right:96px;color:#e6edf3}
html body .hub-top .back{background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.35)}
html body .hub-top .t{font-family:var(--bz-serif);letter-spacing:.06em}

/* ── 6. 卡片、按鈕、輸入、頁籤、表格、徽章、提示 ── */
/* 卡片：hub .card／.li-card／.step／.tool-card／A 型 .sec／.bz-card
   W11：全部 :where() 降權（0,1,0）；邊色只寫 border-color（不寫 border 簡寫、不動寬度與樣式），
        頁內 html body .card{border-top:…金線}、.card.hl{border-left-color…} 都能直接蓋過。
   W7：.sec 只接管區塊，不接管標題（h1～h6.sec 是小標，原本被塗成卡片） */
:where(html body) :is(.card,.li-card,.tool-card,.step,.tbl-wrap),:where(html body) .sec:where(:not(h1,h2,h3,h4,h5,h6)),.bz-card{background:var(--bz-card);color:var(--bz-text);border-color:var(--bz-line);box-shadow:var(--bz-shadow)}
:where(html body) .li-card{border-left-width:4px;border-left-color:var(--bz-gold);box-shadow:var(--bz-shadow-sm)}
:where(html body) .li-card.gold,:where(html body) .li-card.orange{border-left-color:var(--bz-gold)}
:where(html body) .li-card b,:where(html body) .card h2,:where(html body) .sec h2{color:var(--bz-hd)}
:where(html body) .card h3{color:var(--bz-gold-ink)}
/* W9：.card .sub 會染到卡片深處同名的 .sub（例如列表副標）→ 只管卡片直屬的 .sub */
:where(html body) .card>.sub,:where(html body) .muted,:where(html body) footer.hub-foot{color:var(--bz-muted)}
:where(html body) .card,:where(html body) .sec:where(:not(h1,h2,h3,h4,h5,h6)),.bz-card{border-radius:16px}
:where(html body) .step{border-width:1px;border-radius:12px}
:where(html body) .step.on{background:var(--bz-acc-bg);border-color:var(--bz-acc-line);color:var(--bz-hd)}
:where(html body) .step.on .n{color:var(--bz-gold-ink);opacity:1}
/* W9：底線式步驟條（選用）：<div class="steps bz-steps-line"> —— 不做成所有 .steps .step 的預設，
   因為 accident／onboarding 的 .steps .step 是 hub.css 方塊步驟，改成底線會走樣（preserve 頁內已自帶底線版） */
:where(html body) .bz-steps-line .step{background:transparent;border:0;border-bottom:2px solid var(--bz-line);border-radius:0;box-shadow:none;color:var(--bz-muted)}
:where(html body) .bz-steps-line .step.on,:where(html body) .bz-steps-line .step.active{background:transparent;color:var(--bz-gold-ink);border-bottom-color:var(--bz-gold)}
:where(html body) .bz-steps-line .step.done{background:transparent;color:var(--bz-ok);border-bottom-color:var(--bz-ok)}
:where(html body) .tool-card:hover{border-color:var(--bz-gold)}
html body .result{background:linear-gradient(160deg,#0a2334,#061726);color:#e4eaf0;border:1px solid rgba(232,160,32,.5)}
html body .result h3{color:var(--bz-gold-soft)}
html body .stat{background:rgba(232,160,32,.08);border-color:rgba(232,160,32,.3)}
html body .stat .v{color:var(--bz-gold-soft)}
html body .cat-h{color:var(--bz-hd);border-left-color:var(--bz-gold);font-family:var(--bz-serif)}
html body hr,html body .hr{background:var(--bz-line);border-color:var(--bz-line)}

/* 按鈕：次＝描邊；主（.pri／.primary／.gold／.bz-btn.pri）＝金底深藍字；hub 預設 .btn（原青綠實心）＝深藍底金字 */
/* W11：.btn 系列全部 :where() 降權；org 側欄、book、products 的 .btn 語意不同，頁內多一層就蓋得過 */
:where(html body) .btn,.bz-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:999px;font-family:inherit;font-weight:700;letter-spacing:.02em;cursor:pointer;text-decoration:none;
  background:var(--bz-navy3);color:var(--bz-gold-soft);border:1px solid rgba(232,160,32,.55);transition:transform .15s,box-shadow .15s,background .15s}
:where(html body) .btn:hover,.bz-btn:hover{filter:none;opacity:1;transform:translateY(-1px)}
:where(html body) .btn.sm{min-height:44px;padding-left:16px;padding-right:16px}
:where(html body) :is(.btn.pri,.btn.primary,.btn.gold,.btn[class*="gold"]),.bz-btn.pri{background:linear-gradient(135deg,#ffd75a,var(--bz-gold));color:var(--bz-on-gold);border:1px solid var(--bz-gold);font-weight:800;box-shadow:0 10px 24px -14px rgba(232,160,32,.85)}
:where(html body) :is(.btn.pri,.btn.primary,.btn.gold):hover,.bz-btn.pri:hover{background:linear-gradient(135deg,#ffe28a,#f0a82a);box-shadow:0 14px 28px -14px rgba(232,160,32,.95)}
:where(html body) :is(.btn.sec2,.btn.ghost,.btn.sec),.bz-btn.sec{background:var(--bz-card);color:var(--bz-acc-ink);border:1px solid var(--bz-acc-line);box-shadow:none}
:where(html body) :is(.btn.sec2,.btn.ghost,.btn.sec):hover,.bz-btn.sec:hover{background:var(--bz-acc-bg);border-color:var(--bz-gold)}
/* W9：成功／確認鈕（綠）；深色綠變亮，字改深綠 */
:where(html body) .btn.ok,.bz-btn.ok{background:var(--bz-ok);color:#fff;border:1px solid var(--bz-ok);box-shadow:none}
html[data-rex-theme="dark"] :where(body) .btn.ok,html[data-rex-theme="dark"] .bz-btn.ok{color:#062a1c}
/* W2：危險鈕（刪除／清除）：淡紅底＋紅字＋紅邊 */
:where(html body) :is(.btn.danger,.btn.dang),.bz-btn.danger{background:var(--bz-err-bg);color:var(--bz-err);border:1px solid var(--bz-err);box-shadow:none}
:where(html body) :is(.btn.danger,.btn.dang):hover,.bz-btn.danger:hover{background:var(--bz-err);color:#fff}
html[data-rex-theme="dark"] :where(body) :is(.btn.danger,.btn.dang):hover,html[data-rex-theme="dark"] .bz-btn.danger:hover{color:#3b0a08}
/* W10：小型連結鈕 .btn.sm.ghost —— 透明底、細金邊，不撐成 44px 深藍實心鈕（手機仍保 44px 觸控高） */
:where(html body) .btn.sm.ghost{min-height:36px;background:transparent;color:var(--bz-acc-ink);border:1px solid var(--bz-acc-line);box-shadow:none;padding-left:12px;padding-right:12px}
:where(html body) .btn.sm.ghost:hover{background:var(--bz-acc-bg);border-color:var(--bz-gold)}
@media (max-width:640px){:where(html body) .btn.sm.ghost{min-height:44px}}
/* W11：停用＝虛線框（放在變體之後，pri／ok／danger 停用時也一致）。
   停用是「狀態」不是外觀變體：刻意維持 html body 權重（0,2,2），頁內 html body .btn.navy 這類外觀規則不會把停用鈕畫成可按 */
html body :is(.btn:disabled,.btn[disabled]),.bz-btn:disabled,.bz-btn[disabled]{background:var(--bz-dis-bg);color:var(--bz-dis-ink);border:1px dashed var(--bz-dis-line);box-shadow:none;opacity:1;cursor:not-allowed;transform:none}
:where(html body) .btn.block{width:100%}

/* 輸入框／select／textarea（含 JS 動態長出來、行內 style 沒設背景的） */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),html body select,html body textarea,.bz-input{
  font-family:inherit;color:var(--bz-text);background-color:var(--bz-field);border-color:var(--bz-inb);border-radius:10px}
html body input::placeholder,html body textarea::placeholder{color:var(--bz-soft);opacity:1}
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus,html body select:focus,html body textarea:focus{outline:none;border-color:var(--bz-gold)!important;box-shadow:0 0 0 3px rgba(232,160,32,.22)!important}
html body .field label,html body label{color:var(--bz-muted)}
html body .field input,html body .field select,html body .field textarea{border-width:1px;min-height:44px}
html body input[type=checkbox],html body input[type=radio],html body .accent-indigo-600{accent-color:var(--bz-gold)}
html body input:disabled,html body select:disabled,html body textarea:disabled{background:var(--bz-dis-bg);color:var(--bz-dis-ink)}
/* W2：.form-field／.toolbar 內欄位：頁內 .form-field select{background:#fff}（0,1,1）會蓋過上面的 html body select（0,0,3） */
html body .form-field :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color])),html body .toolbar select{background-color:var(--bz-field);color:var(--bz-text);border-color:var(--bz-inb)}
/* W1：深色時 select／textarea 一律深底淺字（頁內寫死 #fff 的 .xxx select 規則）。不用 !important，頁內刻意的深色頁首下拉（book）照舊 */
html[data-rex-theme="dark"] body select:not(.bz-keep),html[data-rex-theme="dark"] body textarea:not(.bz-keep){background-color:var(--bz-field);color:var(--bz-text);border-color:var(--bz-inb)}
html[data-rex-theme="dark"] body select option{background-color:var(--bz-field);color:var(--bz-text)}
/* W8：錯誤態 .bad（驗證失敗）要壓過上面的欄位底色 */
html body input.bad:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),html body select.bad:not(.bz-keep),html body textarea.bad:not(.bz-keep){border-color:var(--bz-err);background-color:var(--bz-err-bg)}
/* W8：檔案選擇鈕（原生灰白鈕在深色很刺眼） */
html body input[type=file]{color:var(--bz-muted)}
html body input[type=file]::file-selector-button{background:var(--bz-card3);color:var(--bz-hd);border:1px solid var(--bz-acc-line);border-radius:8px;padding:6px 12px;margin-right:10px;font-family:inherit;font-weight:700;cursor:pointer}
html body input[type=file]::file-selector-button:hover{background:var(--bz-acc-bg);border-color:var(--bz-gold)}

/* 頁籤：hub .tab／A 型 .date-tab／.bz-tab；目前頁＝淺色深藍底金字、深色金底深字 */
html body .tabs,.bz-tabs{gap:6px}
html body .tab,html body .date-tab,.bz-tab{min-height:44px;display:inline-flex;align-items:center;font-weight:700;color:var(--bz-muted);background:var(--bz-card);border:1px solid var(--bz-line);transition:background .15s,color .15s,border-color .15s}
html body .tab,.bz-tab{border-radius:999px;padding:0 18px}
html body .tab:hover,html body .date-tab:hover,.bz-tab:hover{border-color:var(--bz-gold);color:var(--bz-hd)}
html body .tab.on,html body .date-tab.active,.bz-tab.on{background:linear-gradient(135deg,var(--bz-navy3),var(--bz-navy));color:var(--bz-gold-soft);border-color:var(--bz-gold)}
html[data-rex-theme="dark"] body .tab.on,html[data-rex-theme="dark"] body .date-tab.active,html[data-rex-theme="dark"] .bz-tab.on{background:linear-gradient(135deg,#ffd75a,var(--bz-gold));color:var(--bz-on-gold)}
html body .date-tabs{border-color:var(--bz-line);border-radius:999px}
html body .cat-chip{background:var(--bz-card);border-color:var(--bz-line);color:var(--bz-muted)}
html body .cat-chip.on{background:linear-gradient(135deg,var(--bz-navy3),var(--bz-navy));border-color:var(--bz-gold);color:var(--bz-gold-soft)}
html[data-rex-theme="dark"] body .cat-chip.on{background:linear-gradient(135deg,#ffd75a,var(--bz-gold));color:var(--bz-on-gold)}

/* 表格：表頭深藍＋金字、斑馬紋、hover 淡金 */
html body table.tbl,.bz-table{background:var(--bz-card);color:var(--bz-text);border-collapse:collapse}
html body .tbl th,.bz-table th{background:var(--bz-navy);color:var(--bz-gold-soft);border-bottom:1px solid rgba(232,160,32,.5)}
html body .tbl td,.bz-table td{color:var(--bz-text);border-bottom-color:var(--bz-line2)}
html body .tbl tr:nth-child(even) td,.bz-table tr:nth-child(even) td{background:var(--bz-card2)}
html body .tbl tr:hover td,.bz-table tr:hover td{background:var(--bz-acc-bg)}
html body .tbl .pos{color:var(--bz-ok)}html body .tbl .neg{color:var(--bz-err)}

/* 徽章 */
/* W11：.badge 降權（book、products 的 .badge 是別的元件） */
:where(html body) .badge,.bz-badge{display:inline-block;font-size:11.5px;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--bz-acc-bg);color:var(--bz-gold-ink);border:1px solid var(--bz-acc-line)}
:where(html body) :is(.badge.teal,.badge.gold),.bz-badge.gold{background:var(--bz-acc-bg);color:var(--bz-gold-ink);border-color:var(--bz-acc-line)}
:where(html body) .badge.orange{background:var(--bz-acc-bg);color:var(--bz-gold-ink)}
:where(html body) .badge.gray{background:var(--bz-card3);color:var(--bz-muted);border-color:var(--bz-line)}
.bz-badge.ok{background:var(--bz-ok-bg);color:var(--bz-ok);border-color:rgba(29,122,92,.35)}
.bz-badge.err{background:var(--bz-err-bg);color:var(--bz-err);border-color:rgba(179,38,30,.35)}
.bz-badge.sky{background:var(--bz-sky-bg);color:var(--bz-sky);border-color:rgba(11,93,134,.3)}

/* 提示框：hub .note／A 型 .notice／.bz-note */
/* W10／W11：.note 降權；邊框改寫成 width／style／color 分開（不用 border 簡寫），頁內 .note{border-left-color:…} 同權重以上即可蓋過 */
:where(html body) :is(.note,.notice),.bz-note{font-size:13px;line-height:1.7;color:var(--bz-text);background:var(--bz-acc-bg);
  border-style:solid;border-width:1px 1px 1px 4px;border-color:var(--bz-acc-line) var(--bz-acc-line) var(--bz-acc-line) var(--bz-gold);border-radius:0 12px 12px 0;padding:10px 14px}
:where(html body) .note.teal,.bz-note.sky{background:var(--bz-sky-bg);border-color:rgba(11,93,134,.35);border-left-color:var(--bz-sky)}
:where(html body) .note.warn,.bz-note.err{background:var(--bz-err-bg);border-color:rgba(179,38,30,.35);border-left-color:var(--bz-err)}
.bz-note.ok{background:var(--bz-ok-bg);border-color:rgba(29,122,92,.35);border-left-color:var(--bz-ok)}
.bz-note.warn{background:var(--bz-warn-bg);border-color:var(--bz-acc-line);border-left-color:var(--bz-gold)}
/* W10：輕量提示（不要整塊金底） */
:where(html body) .note.plain,.bz-note.plain{background:transparent;border-width:0 0 0 2px;border-radius:0;padding:4px 0 4px 12px}
html[data-rex-theme="dark"] :where(body) .note.teal,html[data-rex-theme="dark"] .bz-note.sky{border-color:rgba(125,211,252,.35)}
html[data-rex-theme="dark"] :where(body) .note.warn,html[data-rex-theme="dark"] .bz-note.err{border-color:rgba(252,165,165,.4)}

/* 模態框：.bz-modal-mask > .bz-modal（Tailwind 頁的 fixed 遮罩由第 8 節處理 bg-white 面板）
   W4／W10：不再接管所有 [role="dialog"] —— cockpit、employer-guide、renewal-notice 把 role=dialog 掛在全螢幕遮罩上，
   舊規則把遮罩塗成不透明卡片。現在只接管「class 有 modal 的對話框面板」，且排除 aria-modal 遮罩與 class 含 mask／overlay／backdrop 者；
   products .dw、travel 面板等自帶 var(--card) 底的面板維持頁內樣式。頁內既有的遮罩還原規則（cockpit 等）可留著，不衝突。 */
.bz-modal-mask{position:fixed;inset:0;z-index:80;background:rgba(4,15,28,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.bz-modal,html body .modal[role="dialog"]:not([class*="mask" i]):not([class*="overlay" i]):not([class*="backdrop" i]){background:var(--bz-card);color:var(--bz-text);border:1px solid var(--bz-acc-line);border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* 搜尋台（hub 首頁類）*/
html body .searchbar{background:var(--bz-field);border-color:var(--bz-inb)}
html body .searchbar input{background:transparent;color:var(--bz-text)}
html body .searchbar:focus-within{border-color:var(--bz-gold);box-shadow:0 0 0 3px rgba(232,160,32,.22)}

/* <header class="bz-hdwrap"> 只是 .bz-hd 的外殼：清掉頁面原 header 的白底／sticky／模糊 */
html body header.bz-hdwrap{background:transparent;border:0;box-shadow:none;position:static;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}

/* ── 7. 手機 ≤640：輸入框 16px（防 iOS 放大）、觸控 ≥44、不橫向捲動 ── */
@media (max-width:640px){
  html body input:not([type=checkbox]):not([type=radio]):not([type=file]),html body select,html body textarea{font-size:16px!important}
  html body .tab,html body .date-tab,html body .cat-chip{min-height:44px}
  html body .tbl-wrap{-webkit-overflow-scrolling:touch}
}
html,body{overflow-x:clip}

/* ── 8. Tailwind 重新上色（C 型）：先淺色 token 化，深色自動跟著換 ── */
body .bg-white{background-color:var(--bz-card)}
body .bg-gray-50,body .bg-gray-100,body .bg-slate-50,body .bg-slate-100{background-color:var(--bz-card2)}
body .bg-gray-200,body .bg-slate-200{background-color:var(--bz-card3)}
body .bg-gray-900,body .bg-slate-900,body .bg-slate-800{background-color:var(--bz-navy)}
body .hover\:bg-gray-50:hover,body .hover\:bg-gray-100:hover,body .hover\:bg-slate-50:hover,body .hover\:bg-slate-100:hover{background-color:var(--bz-card3)}
body .bg-indigo-50,body .bg-indigo-50\/40,body .bg-indigo-100,body .bg-blue-50{background-color:var(--bz-acc-bg)}
body .hover\:bg-indigo-50:hover,body .hover\:bg-indigo-100:hover,body .hover\:bg-blue-50:hover{background-color:var(--bz-acc-bg)}
body .bg-indigo-600,body .bg-blue-600{background-color:var(--bz-navy)}
body .hover\:bg-indigo-700:hover,body .hover\:bg-gray-700:hover{background-color:var(--bz-navy3)}
body .bg-amber-50,body .bg-amber-100,body .bg-yellow-50{background-color:var(--bz-warn-bg)}
body .bg-emerald-50,body .bg-emerald-100,body .bg-green-50{background-color:var(--bz-ok-bg)}
body .bg-sky-50,body .bg-sky-100{background-color:var(--bz-sky-bg)}
body .bg-red-50,body .bg-red-100{background-color:var(--bz-err-bg)}
body .text-gray-900,body .text-gray-800,body .text-slate-900,body .text-slate-800{color:var(--bz-hd)}
body .text-gray-700,body .text-gray-600,body .text-slate-700,body .text-slate-600{color:var(--bz-text)}
body .text-gray-500,body .text-slate-500{color:var(--bz-muted)}
body .text-gray-400,body .text-gray-300,body .text-slate-400{color:var(--bz-soft)}
body .hover\:text-gray-900:hover,body .hover\:text-gray-800:hover,body .hover\:text-gray-700:hover{color:var(--bz-hd)}
body .text-indigo-400,body .text-indigo-500,body .text-indigo-600,body .text-indigo-700,body .text-indigo-800,body .text-blue-500,body .text-blue-600,body .text-blue-700{color:var(--bz-acc-ink)}
body .text-emerald-500,body .text-emerald-600,body .text-emerald-700,body .text-emerald-800,body .text-green-600,body .text-green-700{color:var(--bz-ok)}
body .text-sky-500,body .text-sky-600,body .text-sky-700,body .text-sky-800{color:var(--bz-sky)}
body .text-amber-600,body .text-amber-700,body .text-amber-800,body .text-amber-900{color:var(--bz-warn)}
body .text-red-500,body .text-red-600,body .text-red-700{color:var(--bz-err)}
body .border,body .border-t,body .border-b,body .border-l,body .border-r,body .border-2,
body .border-gray-100,body .border-gray-200,body .border-gray-300,body .border-slate-100,body .border-slate-200,body .border-slate-300{border-color:var(--bz-line)}
body .border-indigo-100,body .border-indigo-200,body .border-indigo-300,body .border-blue-200{border-color:var(--bz-acc-line)}
body .border-amber-200,body .border-amber-300{border-color:#e0b24f}
body .border-red-200,body .border-red-300{border-color:rgba(179,38,30,.45)}
body .border-emerald-200,body .border-emerald-300{border-color:rgba(29,122,92,.5)}
body .border-sky-200,body .border-sky-300{border-color:rgba(11,93,134,.4)}
body .hover\:border-indigo-400:hover,body .focus\:border-indigo-400:focus{border-color:var(--bz-gold)}
body .divide-gray-100>*+*,body .divide-gray-200>*+*{border-color:var(--bz-line2)}
body .ring-indigo-200,body .ring-indigo-300,body .focus\:ring-indigo-500\/20:focus{--tw-ring-color:var(--bz-acc-line)}
body button.bg-gray-900,body .bg-gray-900.text-white,body button.bg-indigo-600,body a.bg-indigo-600{background-color:var(--bz-navy);color:#f3e7c6;border:1px solid rgba(232,160,32,.45)}
body .shadow-sm,body .shadow,body .shadow-md,body .shadow-lg{box-shadow:var(--bz-shadow-sm)}
body .rounded-xl.border,body .rounded-2xl.border{border-color:var(--bz-line)}
body button:disabled{cursor:not-allowed}
html[data-rex-theme="dark"] body .bg-gray-900,html[data-rex-theme="dark"] body .bg-slate-900{background-color:#06121b}
html[data-rex-theme="dark"] body .bg-indigo-600,html[data-rex-theme="dark"] body .bg-blue-600,html[data-rex-theme="dark"] body button.bg-indigo-600,html[data-rex-theme="dark"] body button.bg-gray-900{background-color:var(--bz-navy3);color:#f3e7c6;border-color:rgba(232,160,32,.55)}
html[data-rex-theme="dark"] body .border,html[data-rex-theme="dark"] body .border-t,html[data-rex-theme="dark"] body .border-b{border-color:var(--bz-line2)}
html[data-rex-theme="dark"] body .border-gray-100,html[data-rex-theme="dark"] body .border-gray-200,html[data-rex-theme="dark"] body .border-gray-300{border-color:rgba(255,255,255,.14)}
html[data-rex-theme="dark"] body .border-amber-200,html[data-rex-theme="dark"] body .border-amber-300{border-color:rgba(250,204,21,.5)}
html[data-rex-theme="dark"] body .border-red-200,html[data-rex-theme="dark"] body .border-red-300{border-color:rgba(252,165,165,.45)}
html[data-rex-theme="dark"] body .border-emerald-200,html[data-rex-theme="dark"] body .border-emerald-300{border-color:rgba(95,211,166,.45)}
html[data-rex-theme="dark"] body .border-sky-200,html[data-rex-theme="dark"] body .border-sky-300{border-color:rgba(125,211,252,.4)}
html[data-rex-theme="dark"] body .border-indigo-100,html[data-rex-theme="dark"] body .border-indigo-200,html[data-rex-theme="dark"] body .border-indigo-300{border-color:var(--bz-acc-line)}
html[data-rex-theme="dark"] ::-webkit-scrollbar-thumb{background:#1d3a52;border-color:#06121b}

/* ── 9. 行內寫死色修補（深色）：JS／舊頁用 style="" 寫死的淺底與深字；排除功能膠囊／彈層／demo-mask ── */
html[data-rex-theme="dark"] body :is([style*="background:#fff" i],[style*="background: #fff" i],[style*="background-color:#fff" i],[style*="background: rgb(255, 255, 255)"],
  [style*="background:#fffbeb" i],[style*="background:#fef3c7" i],[style*="background:#fefce8" i],[style*="background:#fff7ed" i])
  :not(#rex-topbar *):not(.rex-pop *):not(#dm-fab):not(#dm-panel *){background:var(--bz-card)!important;color:var(--bz-text)!important;border-color:var(--bz-acc-line)!important}
html[data-rex-theme="dark"] body :is([style*="background:#F1F5F9" i],[style*="background: #F1F5F9" i],[style*="background:#F8FAFC" i],[style*="background: rgb(248, 250, 252)"],[style*="background:#f9fafb" i],[style*="background:#f3f4f6" i],
  [style*="background:#eef2ff" i],[style*="background:#e0e7ff" i],[style*="background:#f5f3ff" i],[style*="background:#EFF6FF" i],[style*="background:#dbeafe" i],
  [style*="background:#f0fdf4" i],[style*="background:#ecfdf5" i],[style*="background:#fef2f2" i],[style*="background:#fee2e2" i],[style*="background:#e2e8f0" i])
  :not(#rex-topbar *):not(.rex-pop *):not(#dm-fab):not(#dm-panel *){background:var(--bz-card2)!important;color:var(--bz-text)!important}
/* W2：JS 用 el.style.cssText 寫的色會被瀏覽器正規化成 rgb(…)（含空白），補上 rgb 寫法 */
html[data-rex-theme="dark"] body :is([style*="color:#475569" i],[style*="color:#1e293b" i],[style*="color:#334155" i],[style*="color:#0f172a" i],[style*="color:#111827" i],[style*="color:#374151" i],[style*="color:#0a2334" i],
  [style*="color: rgb(51, 65, 85)"],[style*="color: rgb(71, 85, 105)"],[style*="color: rgb(30, 41, 59)"],[style*="color: rgb(15, 23, 42)"])
  :not(#rex-topbar *):not(.rex-pop *):not(#dm-panel *){color:var(--bz-text)!important}
html[data-rex-theme="dark"] body :is([style*="color:#64748b" i],[style*="color:#94a3b8" i],[style*="color:#6b7280" i],[style*="color:#9ca3af" i],
  [style*="color: rgb(100, 116, 139)"],[style*="color: rgb(148, 163, 184)"])
  :not(#rex-topbar *):not(.rex-pop *):not(#dm-panel *){color:var(--bz-muted)!important}
html[data-rex-theme="dark"] body :is([style*="color:#4f46e5" i],[style*="color:#4338ca" i],[style*="color:#2563eb" i],[style*="color:#1d4ed8" i],[style*="color:#7c6cf0" i])
  :not(#rex-topbar *):not(.rex-pop *):not(.bz-hd *){color:var(--bz-acc-ink)!important}
html[data-rex-theme="dark"] body :is([style*="border:1px solid #e2e8f0" i],[style*="border:1px solid #cbd5e1" i])
  :not(#rex-topbar *):not(.rex-pop *){border-color:var(--bz-line2)!important}
/* W1：SVG 圓環圖（進度環、雷達）寫死的淺灰底環 */
html body svg circle[stroke="#e2e8f0" i]{stroke:var(--bz-card3)}

/* ── 9b. W7：文件／信紙／公報／列印預覽在深色維持象牙紙（頁面在容器加 class="bz-paper-keep"） ──
      var() 在宣告處就算好值，所以這裡把 token 與常見原變數都在容器上重新宣告一次淺色版。 */
.bz-paper-keep,html[data-rex-theme="dark"] .bz-paper-keep{
  --bz-paper:#f6f1e6; --bz-card:#fffdf8; --bz-card2:#f8f3e7; --bz-card3:#efe8d8; --bz-field:#ffffff;
  --bz-line:#e6dcc6; --bz-line2:#efe7d4; --bz-inb:#d4ccba;
  --bz-text:#1b2733; --bz-muted:#566373; --bz-soft:#667380; --bz-hd:#0a2334; --bz-gold-ink:#8a5a06;
  --bz-acc-ink:#0a2334; --bz-acc-bg:#f3e9cf; --bz-acc-line:#e2c172;
  --bz-ok:#1d7a5c; --bz-ok-bg:#e1f5ee; --bz-err:#b3261e; --bz-err-bg:#fde8e6; --bz-warn:#7a4a05; --bz-warn-bg:#fdf1d3; --bz-sky:#0b5d86; --bz-sky-bg:#e3f1f8;
  --bg:#f6f1e6; --card:#fffdf8; --ink:#1b2733; --mut:#566373; --ink-mut:#566373; --ink-soft:#566373; --ink-mute:#667380;
  --line:#e6dcc6; --border-soft:#e6dcc6; --border-sub:#efe7d4; --acc:#0a2334; --white:#fffdf8; --light:#f6f1e6;
  color-scheme:light; background:#fffdf8; color:#1b2733}

/* ── 10. 列印：維持可印——隱藏頁首與裝飾，一律還原淺色、白底黑字（即使目前是深色模式） ── */
@media print{
  html[data-rex-theme="dark"]{
    --bz-paper:#fff; --bz-card:#fff; --bz-card2:#fff; --bz-card3:#f2f2f2; --bz-field:#fff; --bz-line:#bbb; --bz-line2:#ddd; --bz-inb:#bbb;
    --bz-text:#000; --bz-muted:#333; --bz-soft:#444; --bz-hd:#000; --bz-acc-ink:#000; --bz-acc-bg:#f2f2f2; --bz-acc-line:#bbb; --bz-gold-ink:#000;
    --bz-ok:#14532d; --bz-err:#991b1b; --bz-warn:#7a4a05; --bz-sky:#075985; color-scheme:light}
  html body{background:#fff!important;color:#000!important}
  .bz-hd,.bz-hero,html body .hub-top,html body .hero,#rex-topbar,.bz-no-print,.no-print{display:none!important}
  html body .card,html body .sec,.bz-card,html body .li-card,html body .tool-card,html body .tbl-wrap,html body .result{box-shadow:none!important;background:#fff!important;border-color:#bbb!important;color:#000!important}
  html body .result *,html body .stat .v{color:#000!important}
  body .bg-white,body .bg-gray-50,body .bg-gray-100{background-color:#fff!important}
  html body h1,html body h2,html body h3{color:#000!important}
}
.bz-only-print{display:none}
@media print{.bz-only-print{display:block}}

/* ── 12. ChatGPT 插圖（2026-10-19，搭配 /rex/hub/biz-art.js）──
   主視覺：淺／深兩組 picture，依 data-rex-theme 顯示其一（隱藏那組 lazy 不下載）；主體在右側，左側疊字 */
.bz-hero.has-art{min-height:150px}
.bz-hero>picture.bz-art-d{display:none}
html[data-rex-theme="dark"] .bz-hero>picture.bz-art-l{display:none}
html[data-rex-theme="dark"] .bz-hero>picture.bz-art-d{display:block}
.bz-hero>picture img{object-position:right center}
.bz-hero.has-art::before{opacity:.35}
html:not([data-rex-theme="dark"]) .bz-hero.has-art::after{background:linear-gradient(90deg,rgba(6,23,38,.86),rgba(6,23,38,.42) 58%,rgba(6,23,38,.05) 85%)}
@media (max-width:640px){.bz-hero.has-art{min-height:118px}.bz-hero.has-art::after{background:linear-gradient(90deg,rgba(6,23,38,.9),rgba(6,23,38,.55) 70%,rgba(6,23,38,.2))}}
/* 頁名圖示 */
.bz-title.bz-has-ticon{display:flex;align-items:center;gap:10px}
.bz-ticon{width:40px;height:40px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.bz-has-ticon .bz-temoji{display:none}
@media (max-width:640px){.bz-ticon{width:32px;height:32px}}
/* 空狀態插圖（E01 尚無資料）：只加在區塊型 .empty／.bz-empty 上方，純裝飾 */
:where(html body) :is(.bz-empty,div.empty,section.empty,.empty-state):not(:empty)::before{content:"";display:block;width:132px;height:99px;margin:4px auto 10px;background:url(/rex/hub/img/biz/e01.webp) center/contain no-repeat}
html[data-rex-theme="dark"] :is(.bz-empty,div.empty,section.empty,.empty-state):not(:empty)::before{background-image:url(/rex/hub/img/biz/e01-dark.webp)}
@media print{.bz-hero>picture,.bz-ticon{display:none!important}:is(.bz-empty,div.empty,section.empty,.empty-state)::before{display:none!important}}

/* 頁面自有 hero（.hero／.d2-hero）掛了 data-art-slot 的：圖鋪底＋深色遮罩，文字在上 */
.bz-art-host{position:relative;isolation:isolate;overflow:hidden}
.bz-art-host>picture{position:absolute;inset:0;z-index:-2;display:block;pointer-events:none}
.bz-art-host>picture img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.bz-art-host>picture.bz-art-d{display:none}
html[data-rex-theme="dark"] .bz-art-host>picture.bz-art-l{display:none}
html[data-rex-theme="dark"] .bz-art-host>picture.bz-art-d{display:block}
.bz-art-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(6,23,38,.92),rgba(6,23,38,.62) 55%,rgba(6,23,38,.28))}
@media (max-width:640px){.bz-art-veil{background:rgba(6,23,38,.74)}}
@media print{.bz-art-host>picture,.bz-art-veil{display:none!important}}

/* ── 13. AI 區塊（/rex/hub/biz-ai.js）── */
.bzai{margin:14px 0;padding:14px 16px;border:1px solid var(--bz-acc-line);border-radius:14px;background:var(--bz-acc-bg)}
.bzai-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bzai-q{font-size:13px;color:var(--bz-muted)}
.bzai-out{margin-top:12px}
.bzai-txt{white-space:pre-wrap;line-height:1.75;font-size:15px;color:var(--bz-text);background:var(--bz-card);border:1px solid var(--bz-line);border-radius:12px;padding:12px 14px}
.bzai-acts{display:flex;gap:8px;margin-top:8px}
.bzai-disc{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--bz-warn-ink,#7a4a05);background:var(--bz-warn-bg,#fdf1d3);border-radius:10px;padding:8px 12px}
html[data-rex-theme="dark"] .bzai-disc{color:#f0c36a;background:rgba(232,160,32,.12)}
@media print{.bzai-row,.bzai-acts{display:none!important}}