:root{
  /* ===== shadcn 配對 token(單一事實來源;每個底色自帶 -foreground) ===== */
  --background:#ffffff;  --foreground:#1a1a1a;
  --card:#ffffff;        --card-foreground:#1a1a1a;
  --muted:#f4f2ef;       --muted-foreground:#6b6b6b;
  --primary:#c8102e;     --primary-foreground:#ffffff;
  --primary-dark:#9e0109; --primary-soft:#fdecef;
  --border:#e6e4e0;      --input:#d4d1cc;  --ring:#c8102e;  --faint:#6e6e6e;  /* v2.004+ WCAG AA:9a9a9a→6e6e6e 過 4.5:1(.version/.sgskip/各 caption) */
  --ok:#2e7d32; --warn:#9a5d00; --warn-soft:#fdf4e3;                            /* v2.004+ WCAG AA:warn b26a00→9a5d00 過 4.5:1(.lvl-warn/.badge.warn) */
  --radius:0;     /* shadcn 預設 ≈10px */
  /* UI 字級階(4 階;rem base 16px。層級用尺寸，主次用顏色/字重。報告字級見 02_typography) */
  /* v2.004+:每階配 LH+LS(15_ui_typography「字距/行高 per 字級」紀律);大字 LS 收緊、小字 LS 拉開 */
  --text-title:1.25rem;     --text-title-lh:1.35;   --text-title-ls:-0.3px;   /* 20px:LH 27、LS -0.3 收緊大字 */
  --text-head:1rem;         --text-head-lh:1.45;    --text-head-ls:0;          /* 16px:LH 23、LS 中性 */
  --text-base:.8125rem;     --text-base-lh:1.5;     --text-base-ls:0;          /* 13px:LH 20、LS 中性 */
  --text-caption:.6875rem;  --text-caption-lh:1.45; --text-caption-ls:0.1px;   /* 11px:LH 16、LS +0.1 拉開可讀 */
  --shadow:none;
  /* === 元件規範 token(design-system/21_components.md;2026-06-25)=== */
  /* container padding 4 階 */
  --c-pad-sm:10px 12px;    /* 小卡 / inline 訊息(.toast / .nchart-card) */
  --c-pad-md:14px 16px;    /* 一般卡片(workhorse) */
  --c-pad-lg:20px 24px;    /* 強調卡 / panel */
  --c-pad-xl:28px 26px;    /* modal 主體 / 過場 */
  /* corner radius 3 階 */
  --c-radius-sm:0;       /* 小 chip / 內嵌標籤 */
  --c-radius-md:0;       /* 一般卡片(workhorse) */
  --c-radius-lg:0;      /* modal / 重元素 */
  /* surface tier(語意 alias,實際讀配對 token) */
  --c-bg-flat:var(--card);    /* 預設白 */
  --c-bg-muted:var(--muted);  /* 淺底(原生圖表卡、segmented bg) */
  --c-bg-panel:var(--panel);  /* 同 --card 語意 alias */
  /* shadow 3 階 */
  --c-shadow-sm:none;                                       /* 淺浮起 */
  --c-shadow-md:none;           /* 一般卡片(=--shadow) */
  --c-shadow-lg:none;                                      /* modal */
  /* button padding 3 階(全部達 44h 觸控基線,per 20_touch_targets) */
  --btn-pad-sm:8px 14px;     /* h≈40,密集場景 / 列尾小操作 */
  --btn-pad-md:11px 18px;    /* h≈44 workhorse(對齊 .btn.sm) */
  --btn-pad-lg:14px 22px;    /* h≈52,主 CTA / step 主流程(對齊 .btn 預設) */
  /* button icon 方鈕(.mv / .pv-btn / .egg-x 應對齊此規格) */
  --btn-icon:40px;
  /* === Web grid token(design-system/22_web_grid.md;2026-06-25)=== */
  /* container max-width 3 檔 */
  --w-narrow:440px;        /* 單一卡片(step1 / 過場頁) */
  --w-workhorse:1180px;    /* workhorse(.wrap)*/
  --w-wide:1400px;         /* 寬版(預覽+編輯雙欄,未來) */
  /* gutter scale 3 階 */
  --gut-sm:8px;            /* 緊密(icon row) */
  --gut-md:16px;           /* workhorse(卡片 grid)*/
  --gut-lg:24px;           /* 區段間 */
  /* breakpoint(註記用、CSS @media 寫死值仍要對齊:sm 640 / md 960 / lg 1180)*/
  /* ── 舊名別名(過渡:新/改的碼用上面配對名，舊規則沿用，日後逐步淘汰) ── */
  --bg:var(--background); --panel:var(--card); --ink:var(--foreground);
  --ink-dim:var(--muted-foreground); --ink-faint:var(--faint);
  --line:var(--border); --line-strong:var(--input);
  --accent:var(--primary); --accent-soft:var(--primary-soft);
  /* === 觸控熱區規範(design-system/20_touch_targets.md;2026-06-24 v2.003)=== */
  --touch-target:44px;          /* iOS / Web mobile 基線 */
  --touch-gap:8px;              /* 一般相鄰 */
  --touch-gap-dense:12px;       /* 密集功能 */
  --touch-gap-destructive:16px; /* 破壞性操作翻倍 */
}
/* === 觸控熱區階段 1:透明熱區擴容(視覺零變、::before 撐 44)=== */
/* helper:父元素掛 .tap-pad、子元素自動有 ≥44 隱形熱區。新元件預設用這個。 */
.tap-pad{position:relative}
.tap-pad::before{content:"";position:absolute;inset:-12px;z-index:0}
.tap-pad > *{position:relative;z-index:1}
/* 4 條 高危違規逐項擴容(視覺零變): */
.toast .tx{position:relative}
.toast .tx::before{content:"";position:absolute;inset:-10px;z-index:0}     /* 20×24 → 40×44 */
.sgskip{position:relative}
.sgskip::before{content:"";position:absolute;inset:-12px;z-index:0}         /* 22×24 → 46×48 */
.pv-help{position:relative}
.pv-help::before{content:"";position:absolute;inset:-11px;z-index:0}        /* 22×22 → 44×44 */
@media(max-width:640px){
  .step.done .dot{position:relative}
  .step.done .dot::after{content:"";position:absolute;inset:-11px;z-index:0} /* 手機熱區擴 44(::before 被 swiss 編號 "0" 占用 → 改 ::after) */
}
/* ── AI 會員深色模式(紅白黑):.dark 只覆寫配對 token 的值，版型零改動 ── */
html.dark{
  --background:#141414;  --foreground:#f2f2f2;
  --card:#1c1c1c;        --card-foreground:#f2f2f2;
  --muted:#262626;       --muted-foreground:#b0b0b0;
  --primary:#7ccf00;     --primary-foreground:#0b0b0b;
  --primary-dark:#5ba300; --primary-soft:#1f2b08;
  --accent:#7ccf00; --accent-foreground:#0b0b0b; --accent-soft:#1f2b08; --accent-bright:#9ae600;
  --border:#2e2e2e;      --input:#3d3d3d;  --ring:#7ccf00;  --faint:#6b6b6b;
  --ok:#5dbb63; --warn:#e6a23c; --warn-soft:#33270f;
  --shadow:none;
}
/* v1.751 AI dark-lime:版本字/過場頁標題 上萊姆 */
html.dark .version{ color:var(--primary); }
html.dark .ltitle{ color:var(--primary); }
/* 校對頁資料格(.rin/.nin 原為瀏覽器預設白底，深色下刺眼)→ 變數化，雙主題皆對 */
.rin,.nin{ width:100%; padding:6px 9px; border:1px solid var(--line-strong); border-radius:0;
  font-size:var(--text-base); font-family:inherit; background:var(--panel); color:var(--ink); }
.rin:focus,.nin:focus{ outline:none; border-color:var(--accent); }
/* 上傳框淺粉底+圖片徽章淺藍底:深色覆寫 */
html.dark .drop{ background:var(--card); }
html.dark .badge.img{ background:#1d2733; color:#9fc0e8; }
#fxBurn{ position:fixed; inset:0; z-index:9000; pointer-events:none; display:none; }
body.fxshake{ animation:fxshake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes fxshake{
  0%,100%{ transform:translate(0,0); filter:none; }
  15%{ transform:translate(-3px,1px); } 30%{ transform:translate(4px,-2px); }
  45%{ transform:translate(-3px,2px); filter:contrast(1.12); }
  60%{ transform:translate(3px,1px); } 80%{ transform:translate(-2px,-1px); }
}
/* inline toast(取代 alert):不打斷、可多則並存、aria-live 無障礙;沿用配對 token→雙主題(深色自動萊姆) */
#toasts{position:fixed; top:14px; right:14px; z-index:9500; display:flex; flex-direction:column; gap:8px;
  max-width:min(360px,calc(100vw - 28px)); pointer-events:none}
.toast{
  pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:var(--card); color:var(--foreground); border:1px solid var(--border); border-left:3px solid var(--primary);
  border-radius:var(--radius); box-shadow:var(--shadow); font-size:var(--text-base); line-height:1.5;
  animation:toastin .22s cubic-bezier(.21,1.02,.73,1);
  &.warn{border-left-color:var(--warn)}
  &.ok{border-left-color:var(--ok)}
  &.out{animation:toastout .18s ease forwards}
  & .tmsg{flex:1; min-width:0; word-break:break-word}
  & .tx{
    flex:none; border:none; background:none; color:var(--ink-faint); cursor:pointer; padding:0 2px;
    font-size:var(--text-base); line-height:1.4; font-family:inherit;
    &:hover{color:var(--ink)}
  }
}
@keyframes toastin{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:translateX(0)}}
@keyframes toastout{to{opacity:0; transform:translateX(14px)}}
@media (max-width:640px){#toasts{left:14px; right:14px; max-width:none}}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  font-family:'Helvetica Neue',-apple-system,'PingFang TC','Noto Sans TC',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:var(--text-base); line-height:var(--text-base-lh); letter-spacing:var(--text-base-ls);  /* v2.004+ LH/LS baseline,各元件可覆寫 */
  -webkit-font-smoothing:antialiased;
}
/* ===== Top bar(stepper 併入中央;整排字級統一 text-base 俐落)===== */
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 28px; height:64px; background:var(--panel);
  border-bottom:1px solid var(--ink); position:sticky; top:0; z-index:50;   /* swiss:ink hairline */
}
/* 兩側 1fr 等寬 → 中央 auto 欄(stepper)永遠對齊網頁中線,不受 brand/version 寬度影響 */
.brand{
  display:flex; align-items:center; gap:10px; justify-self:start; min-width:0;
  & .mark{display:none}   /* swiss:純字標 MRS_,方塊 logo 退場 */
  & .name{font-weight:700; font-size:var(--text-base); letter-spacing:.06em; white-space:nowrap}
  & .name b{color:var(--accent)}   /* 簽名 _ 紅 */
}
.topbar .version{font-size:var(--text-base); color:var(--ink-faint); letter-spacing:.5px; font-family:inherit; font-variant-numeric:tabular-nums; justify-self:end}

/* ===== Stepper(topbar 中央 auto 欄;content 寬度、connector 固定長以維持等距)===== */
.stepper{
  display:flex; align-items:center; justify-content:center; gap:28px;
}
/* swiss stepper:字軌「01 上傳檔案」,當前步紅底線;圓點/連接線退場(markup 不動,api.js .active/.done 切換照舊) */
.step{
  display:flex; align-items:baseline; gap:6px; padding:4px 0; transition:color .2s; color:var(--ink-faint);
  &.active{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}
  &.done{
    color:var(--ink-dim); cursor:pointer;
    &:hover{color:var(--ink)}
  }
  & .dot{
    font-size:var(--text-base); font-weight:700; font-variant-numeric:tabular-nums; color:inherit;
    &::before{content:"0"}   /* 1→01 */
  }
  & .lbl{font-size:var(--text-base); font-weight:700; white-space:nowrap; letter-spacing:.04em}
}
.connector{display:none}   /* swiss:字軌自成節奏,連接線退場 */

/* ===== Layout ===== */
/* 22 號 Web grid Tier 2 helpers(新 class、不影響既有規則;可逐步取代 ad-hoc 寫法)*/
.grid12{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut-md)}
.row{display:flex; gap:var(--gut-md); align-items:center; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:var(--gut-md)}
.col-1{grid-column:span 1}  .col-2{grid-column:span 2}  .col-3{grid-column:span 3}
.col-4{grid-column:span 4}  .col-6{grid-column:span 6}  .col-12{grid-column:span 12}
@media(max-width:640px){ .grid12{grid-template-columns:1fr} }   /* 手機:整列堆疊 */

.wrap{max-width:var(--w-workhorse); margin:0 auto; padding:24px 28px 80px}
.panel{background:var(--panel); border:1px solid var(--ink); border-radius:var(--radius); box-shadow:var(--shadow)}   /* swiss:模組=1px ink 框、平面 */
.screen{display:none; animation:fade .35s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ===== Upload ===== */
/* step1 三卡統一寬度 440px + 置中(以機構全名塞得下為準);卡片化容器(借 File Upload / Field 比例) */
#sProc, #s5{max-width:var(--w-narrow); margin:0 auto}   /* 22 號 --w-narrow(440):過場/step5 窄欄置中(step1 改 swiss 12 欄海報版) */
.cardbox{background:var(--panel); border:1px solid var(--ink); border-radius:0; padding:32px}
.cardbox .legend{font-size:var(--text-caption); font-weight:400; color:var(--ink-dim); margin:0 0 20px; text-transform:uppercase; letter-spacing:.12em}   /* swiss:字軌 legend */

/* swiss 迷你編號列(step2–5):海報語言延伸、不吃工作區(step1 用完整 .shero) */
.sh{display:flex; align-items:baseline; gap:12px; padding:0 0 12px; margin-bottom:22px; border-bottom:1px solid var(--ink)}
.sh .shn2{font-size:30px; font-weight:700; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.sh .shl{font-size:var(--text-base); font-weight:700; letter-spacing:.04em}

/* ===== swiss step1:12 欄海報版(巨大編號 + 標題 + 左上傳/右設定)===== */
#s1{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut-md); align-items:start}
.shero{
  grid-column:1/13; display:flex; align-items:flex-end; gap:40px; flex-wrap:wrap;
  padding:40px 0 36px; margin-bottom:32px; border-bottom:1px solid var(--ink);
}
.shero .shn{
  font-size:120px; font-weight:700; line-height:.85; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  &::after{content:""; display:block; width:48px; height:7px; background:var(--accent); margin-top:18px}   /* 紅短線簽名 */
}
.shero .sht h1{font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.shero .sht p{margin-top:8px; color:var(--ink-dim); max-width:36em}
#s1 .drop{grid-column:1/8; align-self:stretch}
#s1 .cardbox{grid-column:8/13; border-left:none}   /* swiss:模組共邊 */
#s1 .actions{grid-column:8/13; margin-top:0}
#s1 .actions span{display:none}
#s1 .actions .btn{flex:1; justify-content:center; padding:18px}
@media(max-width:900px){
  #s1{grid-template-columns:1fr}
  .shero,#s1 .drop,#s1 .cardbox,#s1 .actions{grid-column:auto}
  #s1 .cardbox{border-left:1px solid var(--ink)}
  .shero .shn{font-size:80px}
}
/* v2.004+ 拖放區改 CodePen 內聯式:[📄 icon | 檔名/提示 + size] 一排 [選檔/重選按鈕] */
/* swiss:大幅留白的 ink 框海報式上傳區;icon 退場(結構即裝飾) */
.drop{
  display:flex; align-items:center; gap:24px;
  padding:40px 32px; margin:0;
  border:1px solid var(--ink);
  background:var(--panel); cursor:pointer;
  transition:border-color .18s, background .18s;
  &:hover,&.drag{background:#fafafa}
  &.drag{border-color:var(--accent)}
  &.has-file{border-color:var(--accent)}                          /* 選好檔=紅框「鎖住」感 */
  &.drop-bad{border-color:var(--primary); background:var(--primary-soft)}
  &.has-file .drop-fn{color:var(--ink)}
  &.drop-bad .drop-fn{color:var(--primary)}
  &.drop-bad .drop-meta{display:none}
  & .fn{color:var(--accent)}                                      /* loadFile innerHTML 包檔名的 .fn — 保留兼容 */
  & .pick{flex:none; padding:14px 28px; background:var(--ink); color:var(--background); font-size:var(--text-base); font-weight:700; transition:background .15s}
  &:hover .pick{background:var(--accent)}
  &.has-file .pick{background:var(--ink-dim)}                     /* 選好檔=按鈕變灰=「重選」 */
  &.has-file:hover .pick{background:var(--ink)}
}
.drop-ic{display:none}   /* swiss:無裝飾 icon */
.drop-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; overflow:hidden; text-align:left}
.drop-fn{margin:0; font-size:var(--text-title); font-weight:700; letter-spacing:var(--text-title-ls); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s}
.drop-meta{margin:0; font-size:var(--text-caption); color:var(--ink-faint); white-space:nowrap; text-transform:uppercase; letter-spacing:.08em}
/* placeholder 走 ::before(span 初始為空,選檔後 JS 寫入檔名 → :empty 失效、placeholder 自動退場) */
.drop-fn:empty::before{content:attr(data-placeholder)}
@media(hover:none){
  /* 觸控裝置 placeholder 改短(不承諾拖放) */
  .drop-fn:empty::before{content:attr(data-placeholder-touch)}
}
/* 環境設定:2 欄 grid — label auto 寬(自動對齊、不浪費)、控件 1fr 吃滿剩餘;.field display:contents 讓 label/控件直接進 grid。手機改堆疊 */
.config{display:grid; grid-template-columns:auto 1fr; gap:14px 12px; align-items:center; margin:0}
.field{display:contents}
.config > .field > label{font-size:var(--text-caption); font-weight:400; color:var(--ink-dim); margin:0; white-space:nowrap; text-transform:uppercase; letter-spacing:.08em}   /* swiss:字軌 label */
.field .monthpick,.field > input,.field .ai-cell{min-width:0}
.field select,.field input{
  width:100%; padding:10px 0; border:none; border-bottom:1px solid var(--ink); border-radius:0;   /* swiss:底線式輸入 */
  font-size:var(--text-base); font-family:inherit; background:none; color:var(--ink);
}
.field select:focus,.field input:focus{outline:none; border-bottom-color:var(--accent)}
.monthpick{display:flex; gap:8px}
.monthpick select{flex:1}
/* ===== AI 強化讀取(設定格・緊湊版)+ 彩蛋 ===== */
.ai-cell{display:flex; align-items:center; gap:10px; padding:8px 0; border:none; border-bottom:1px solid var(--ink); border-radius:0; background:none; height:41px; position:relative}   /* swiss:同輸入欄底線式 */
.ai-mini{width:24px; height:24px; border-radius:0; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; position:relative; z-index:2; pointer-events:auto}
.ai-mini svg{width:16px; height:16px; pointer-events:none}   /* Q1:點擊全落在 #aiIcon */
.ai-sub{flex:1; font-size:var(--text-base); color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tog{
  width:40px; height:22px; border-radius:0; background:var(--line-strong); position:relative; cursor:pointer; transition:background .25s; flex:none;
  &.on{background:var(--accent)}
  & .knob{position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .25s; display:flex; align-items:center; justify-content:center}
  &.on .knob{left:21px}
  & .sp{display:none; width:10px; height:10px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite}
  &.loading .sp{display:block}
}
@keyframes spin{to{transform:rotate(360deg)}}
.pv-flash{position:absolute; top:54%; left:50%; transform:translate(-50%,-50%); background:rgba(26,26,26,.82); color:#fff; font-family:inherit; font-size:var(--text-title); line-height:var(--text-title-lh); letter-spacing:var(--text-title-ls); font-weight:700; padding:11px 20px; border-radius:0; pointer-events:none; opacity:0; transition:opacity .35s; z-index:6}  /* v2.004+ LS .5→title-ls 紀律化 */
.pv-flash.show{opacity:1}
.egg-ov{
  position:fixed; inset:0; background:rgba(26,26,26,.45); display:none; align-items:center; justify-content:center; z-index:200;
  &.show{display:flex; animation:fade .2s ease}
}
@keyframes mpop{from{transform:scale(.92); opacity:0}to{transform:scale(1); opacity:1}}
/* 四彩蛋 modal 共用:字級統一 text-base(俐落);標題 700 / 內文 400 / 價・鈕 700(兩字重制) */
.egg-modal{
  background:var(--c-bg-panel); border:1px solid var(--ink); border-radius:var(--c-radius-lg); box-shadow:var(--c-shadow-lg); width:340px; max-width:90vw; padding:var(--c-pad-xl); text-align:center; animation:mpop .25s cubic-bezier(.2,.8,.3,1);   /* 21 號:xl modal */
  & h3{font-size:var(--text-base); font-weight:700; margin-bottom:8px}
  & p{font-size:var(--text-base); font-weight:400; color:var(--ink-dim); line-height:1.5}
  & .bt{display:flex; gap:10px; margin-top:18px}
  & .eb{
    flex:1; padding:11px; border-radius:0; font-size:var(--text-base); font-weight:700; cursor:pointer; border:none; font-family:inherit; display:flex; align-items:center; justify-content:center;
    &.red{background:var(--primary); color:var(--primary-foreground)}
    &.gray{background:transparent; color:var(--ink-dim); border:1px solid var(--line-strong)}
    &.neutral{background:var(--panel); color:var(--ink); border:1px solid var(--line-strong)}
    &.narrow{flex:0 0 auto; padding-left:18px; padding-right:18px}   /* 次要鈕窄(取消/否);主鈕 flex:1 撐寬 */
  }
}
.egg-title{
  display:flex; align-items:center; justify-content:center; gap:7px;
  &.age{color:var(--primary)}                                /* eggAge 標題改紅 */
}
.lock-inline{font-size:var(--text-base); line-height:1}        /* 🔒 inline 在標題左,不再獨立大圓 */
.egg-x{
  position:absolute; top:6px; right:6px; width:var(--btn-icon); height:var(--btn-icon); border-radius:0; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-dim); font-size:var(--text-head); line-height:1; cursor:pointer;   /* 21 號:btn-icon 40×40 + 50% 圓 */
  &:hover{border-color:var(--accent); color:var(--accent)}
}
.shark-box{position:relative; width:min(720px,92vw); aspect-ratio:16/9; background:#000; border-radius:var(--c-radius-lg); overflow:hidden; box-shadow:none}   /* 21 號:radius lg;shadow .5 alpha 比 c-shadow-lg(.3) 重,影片需更深暗、保留 */
.shark-box iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.shark-box .x{position:absolute; top:6px; right:6px; z-index:5; width:var(--btn-icon); height:var(--btn-icon); border-radius:0; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:var(--text-title); cursor:pointer}   /* 21 號:btn-icon 40×40 + 50% 圓(影片右上 X) */

/* ===== Plan (分頁內容) ===== */
/* 分析摘要卡:當第 13 張頁卡接在最後一頁之後(鏡像 pagecard 尺寸,不可點)。
   上(muted thumb)=「分析摘要」+ 計數;下(meta)=大紅數字「N 頁」(借頁碼的份量) */
.summary-card{
  border:1px solid var(--line); border-radius:var(--c-radius-md); overflow:hidden; background:var(--c-bg-panel); display:flex; flex-direction:column;   /* 21 號:md card */
  & .sum-thumb{
    height:150px; background:var(--muted); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:12px 14px; text-align:center;
  }
  & .sum-label{font-size:var(--text-base); font-weight:700; color:var(--ink)}
  & .scounts{font-size:var(--text-caption); color:var(--ink-dim); line-height:1.6}
  & .meta{
    padding:10px 12px; display:flex; align-items:baseline; gap:4px;
    & b{font-size:34px; font-weight:700; color:var(--primary); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-0.5px}  /* v2.004+ 34px 超大字、額外收緊 -.5 */
    & span{font-size:var(--text-base); color:var(--ink-dim)}
  }
}
.plan-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px}
.pagecard{
  border:1px solid var(--line); border-radius:var(--c-radius-md); overflow:hidden; background:var(--c-bg-panel);   /* 21 號:md card */
  transition:.2s; cursor:pointer;
  &:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
  &.selected{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
  & .thumb{height:150px; background:var(--bg); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
  & .meta{
    padding:10px 12px;
    & .sec{font-size:var(--text-base); font-weight:700}
    & .comp{font-size:var(--text-caption); color:var(--ink-faint); margin-top:2px; font-family:inherit}
  }
  & .pgnum{position:absolute; top:9px; left:12px; font-size:var(--text-title); line-height:1; letter-spacing:var(--text-title-ls); font-weight:700; font-family:inherit; font-variant-numeric:tabular-nums; color:var(--ink)}  /* v2.004+ title-ls 收緊大字 */
}
/* step2 空態:planGrid 沒有任何卡(解析異常/plan 空)→ 顯示指引而非白屏 */
#planGrid:empty::before{content:"沒有頁卡？請返回上一步重新解析。"; grid-column:1/-1; padding:28px 4px; font-size:var(--text-base); color:var(--ink-faint)}
.badge{display:inline-block; font-size:var(--text-caption); padding:2px 7px; border-radius:0; margin-top:6px;}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.img{background:#eef2f7; color:#3a5a80}

/* content-type hint icons (取代假預覽縮圖):頁碼在左上，內容類型 ICON 置中 */
.cthint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:0 10px}
.cticon{display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--ink-dim)}
.cticon svg{width:44px; height:44px; display:block}
.cticon span{font-size:var(--text-caption); color:var(--ink-faint)}

/* ===== 步驟3 版面(左預覽 / 右搬移面板)===== */
.split{display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
/* ===== 步驟4 雙欄(左預覽 sticky / 右校對資料;手機收單欄,沿用 .split) ===== */
#s4 .s4split{grid-template-columns:1fr 480px}   /* 預覽吃彈性寬(適寬才有意義)、數據欄固定 480px(夠塞 4 序列表) */
#s4 .s4preview,#s4 .s4data{min-width:0}   /* grid 子項防 blowout:內容最小寬(794 預覽台/長檔名)不得撐爆軌道,窄屏靠內部 ellipsis/scroll 吸收 */
#s4 .s4preview{position:sticky; top:20px}
#s4 .s4data{display:flex; flex-direction:column; gap:20px}
#s4 .s4data > .panel{padding:22px}
#s4 .pv-panel{height:calc(100vh - 130px); max-height:760px}
.pv-title{font-size:var(--text-base); font-weight:700; color:var(--ink-dim)}
/* .pv-btn.refresh 已 nesting 進 .pv-btn block(line ~457) */
@media(max-width:900px){
  #s4 .s4split{grid-template-columns:1fr}
  #s4 .s4preview{position:static}
  #s4 .pv-panel{height:520px}
}
/* ===== 步驟3 右欄三膠囊(選擇配色/選擇封面/搬移區塊) ===== */
.editcol{height:620px; display:flex; flex-direction:column; gap:10px}   /* v1.76b 緊湊:14→10 */
/* v1.76b 極致緊縮:四選擇器一列工具列+共用抽屜 */
.toolrow{display:flex; gap:6px}
.tool{
  flex:1; padding:12px 0; font-size:var(--text-base); font-weight:700; border:1px solid var(--line);  /* v2.003 階段 2:padding 9→12 達 ~40h */
  border-radius:0; background:var(--panel); color:var(--ink); cursor:pointer; font-family:inherit; transition:.12s;
  &:hover{border-color:var(--muted-foreground)}
  &.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
}
.tooldrawer{padding:12px 14px}
.dpanel{display:none}
.dpanel.on{display:block}
.pill{padding:10px 14px}                                                 /* v1.76b 緊湊:16/18→10/14 */
.pill .edit-head{margin-bottom:10px}
.pill.move{flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 14px}
/* 色票網格(刀1:色盤 select → grid;隱藏 select 仍為唯一事實來源) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.swgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.swchip{
  padding:0; border:1.5px solid var(--border); border-radius:0; overflow:hidden;
  background:var(--card); font:inherit; cursor:pointer; text-align:center; transition:border-color .12s, box-shadow .12s;
  &:hover{border-color:var(--muted-foreground)}
  & .sw{
    height:32px; background:var(--c); position:relative; border-bottom:1px solid var(--border);
    &::after{content:""; position:absolute; left:0; right:0; bottom:0; height:10px; background:var(--a)}
  }
  & .nm{display:block; font-size:var(--text-caption); color:var(--muted-foreground);
    padding:4px 2px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  &[aria-checked="true"]{
    border-color:var(--primary); box-shadow:0 0 0 2px var(--primary);
    & .nm{color:var(--foreground); font-weight:700}
  }
  /* 會員功能門禁:清新版鎖定態(暗色,同封面上傳)→ AI 開啟才解鎖 */
  &.locked{
    background:var(--muted); border-color:var(--border); cursor:not-allowed;   /* 鎖定態淺灰 token(深色模式自動正確;原寫死 rgba 會糊) */
    &:hover{border-color:var(--border)}
    & .sw{background:var(--input); border-bottom-color:transparent; opacity:.55}
    & .nm{
      color:var(--muted-foreground); font-weight:700;
      &::after{content:" 🔒"; opacity:.6; font-weight:400}
    }
  }
}
/* segmented 膠囊(刀2:封面 select → 分段控制;隱藏 select 仍為唯一事實來源) */
.seg{
  display:flex; flex-wrap:wrap; gap:var(--touch-gap-dense); background:var(--muted); border-radius:0; padding:4px;  /* v2.003 階段 3:gap 6→12 防誤觸(配色/版型 4 選 1) */
  & .opt{
    flex:1 1 28%; text-align:center; font-size:var(--text-caption); padding:7px 4px; border-radius:0;
    cursor:pointer; color:var(--muted-foreground); white-space:nowrap; border:0; background:none; font-family:inherit; transition:.12s;
    &:hover:not([aria-checked="true"]){color:var(--foreground)}
    &[aria-checked="true"]{background:var(--card); color:var(--foreground); box-shadow:inset 0 0 0 1px var(--ink); font-weight:700}
    &:disabled{opacity:.35; cursor:not-allowed}
  }
}
.cover-drop{
  margin-top:10px; border:1.5px dashed var(--input); border-radius:0; padding:20px 12px;
  font-size:var(--text-caption); color:var(--muted-foreground); text-align:center; background:var(--muted); cursor:not-allowed; user-select:none;
  &.on{
    background:var(--card); border-color:var(--primary); color:var(--foreground); cursor:pointer;
    & span{display:none}
  }
}
/* v1.752 step3 右欄膠囊 collapsible(預設全收合,點標題開合,各自獨立) */
#s3 .panel.pill > .edit-head{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
#s3 .panel.pill > .edit-head::after{ content:"⌄"; font-size:14px; line-height:1; color:var(--muted-foreground); transition:transform .2s; }
#s3 .panel.pill.open > .edit-head::after{ transform:rotate(180deg); }
#s3 .panel.pill:not(.open) > *:not(.edit-head){ display:none !important; }
#s3 .panel.pill.move:not(.open){ flex:0 0 auto; }   /* v1.76b:收合時不撐高(展開才伸展補滿、下緣切齊預覽) */
.file-flow{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:14px} /* #4 檔名左右流向;step5=src→下載按鈕 */
@media(max-width:640px){                                       /* 手機:brand 縮成 logo、stepper 只留圓點軌+當前步名 */
  .topbar{padding:0 14px}
  .brand .name{display:none}                                   /* 全名太寬 → 窄屏只留 logo mark */
  .step .lbl{display:none}                                     /* 標籤預設收起，免橫向溢出 */
  .step.active .lbl{display:block}                             /* 只顯示當前步名稱 */
  .connector{width:20px; margin:0 4px}
  .config{grid-template-columns:1fr}                           /* 手機:label 與控件各佔一列(堆疊),控件不被壓窄 */
}

/* ===== 搬移區塊面板(取代假聊天) ===== */
.editcol .edit-head{font-weight:700; font-size:var(--text-base); margin-bottom:4px; display:flex; align-items:center; gap:6px}  /* v1.76b 緊湊:16→13(合 15 號 4 階) */
#s3 .panel.pill:not(.open) > .edit-head{margin-bottom:0}                              /* 收合態不留底距 */
.editcol .edit-hint{font-size:var(--text-base); color:var(--ink-faint); line-height:1.5; margin-bottom:12px}
.balance-btn{width:100%; margin:0 0 12px; padding:9px 0; border:1px solid var(--line-strong); border-radius:0;
  background:var(--panel); color:var(--ink); font-size:var(--text-base); font-weight:700; cursor:pointer; font-family:inherit; transition:.15s}
.balance-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.balance-btn:disabled{opacity:.45; cursor:not-allowed}
.edit-list{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-right:4px}
.edit-pg{
  flex:0 0 auto; border:1px solid var(--line); border-radius:0; overflow:hidden;
  & > .ph{
    position:sticky; top:0; background:var(--bg); padding:8px 11px; font-size:var(--text-caption); text-transform:uppercase; color:var(--ink-dim); display:flex; justify-content:space-between; z-index:1;
    & > span:first-child{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
    & .capnum{text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums; font-weight:700; flex:none; margin-left:8px}
  }
}
.edit-row{
  display:flex; align-items:flex-start; gap:10px; padding:9px 11px; border-top:1px solid var(--line);
  &:first-of-type{border-top:none}
  & .lbl{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
  & .ty{align-self:flex-start; font-size:var(--text-caption); color:var(--ink-dim); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:1px 6px}
  & .tx{font-size:var(--text-base); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
}
.mvgroup{flex:0 0 auto; display:flex; gap:6px}
.mv{
  width:40px; height:40px; flex:none; border:1px solid var(--line-strong); border-radius:0; background:var(--panel); cursor:pointer; font-size:var(--text-head); line-height:1; color:var(--ink); transition:.12s;  /* v2.003 階段 2:30→40 達 44 基線(edit-row 高度連動會增) */
  &:hover:not(:disabled){border-color:var(--accent); color:var(--accent); background:var(--bg)}
  &:disabled{opacity:.25; cursor:not-allowed}
}
/* v1.78 拖拉重組(reorder_block op):容量條(後端回傳精確值)+ 可拖卡 + 落點槽 */
/* 容量:拿掉進度條(佔位),只留數字、用顏色標載量(綠/黃/紅);章節名吃空出的寬。
   .edit-pg > .ph > span:first-child / .edit-pg > .ph .capnum 已 nesting 進 .edit-pg block 上方 */
.capnum.lvl-ok{color:var(--ok)} .capnum.lvl-warn{color:var(--warn)} .capnum.lvl-bad{color:var(--primary-dark)}  /* v2.004+ WCAG:d83a3a 4.38:1 未過→改 primary-dark #9e0109 過 15:1+語意一致(破壞性=深紅) */
html.dark .capnum.lvl-bad{color:#ff7a7a}
.edit-pg.flash{animation:editflash .65s ease}
@keyframes editflash{from{box-shadow:0 0 0 2px var(--accent)} to{box-shadow:0 0 0 0 transparent}}
.edit-row[draggable="true"]{cursor:grab}
.edit-row.drag{opacity:.4}
.edit-row .grip{flex:none; align-self:center; color:var(--ink-faint); font-size:13px; line-height:1; letter-spacing:-1px; user-select:none}
.edit-row .shrtag{flex:none; align-self:center; font-size:var(--text-caption); color:var(--warn);
  border:1px solid var(--warn); border-radius:0; padding:1px 5px; font-variant-numeric:tabular-nums}
.edit-slot{height:7px; transition:height .12s, background .12s, margin .12s}
.edit-slot.over{height:22px; margin:3px 8px; background:var(--accent-soft); border:1px dashed var(--accent); border-radius:0}
/* 章節首頁強調(2026-06-16):頁卡 header 走 --accent(光譜:亮色紅 #c8102e / AI 深色 lime #7ccf00 自動切),續頁維持 --ink-dim */
.edit-pg.sec-first > .ph{color:var(--accent); font-weight:700}
/* ④⁺ AI 建議籤:確定性規則產 op 草稿,人點才套(走既有 /api/edit) */
.suggest{display:flex; align-items:center; gap:9px; margin:6px 11px 2px; padding:7px 10px; border-radius:0;
  background:var(--accent-soft); font-size:var(--text-caption); line-height:1.45}
.suggest .sgtx{flex:1; color:var(--ink)}
.suggest .sgtx b{color:var(--accent)}
.suggest .sgapply{flex:none; border:none; border-radius:0; background:var(--accent); color:var(--primary-foreground);
  font-size:var(--text-caption); font-weight:700; padding:3px 12px; cursor:pointer; font-family:inherit}
.suggest .sgapply:hover{background:var(--primary-dark)}
.suggest .sgskip{flex:none; color:var(--ink-faint); cursor:pointer; font-size:var(--text-caption); padding:3px 4px}
/* 麥肯錫圖表=會員功能:非會員看到鎖定態建議籤(點「會員專屬」→升級彩蛋) */
.suggest.locked{background:rgba(16,16,16,.05)}
.suggest.locked .sgtx{color:var(--ink-faint)}
.suggest.locked .sgapply{background:var(--ink-faint); cursor:pointer}
.suggest.locked .sgapply:hover{background:var(--ink-dim)}

/* ===== Live preview (真實預覽 = 輸出 PDF 同一份 HTML) ===== */
.pv-panel{padding:0; overflow:hidden; display:flex; flex-direction:column; height:620px; position:relative}
.pv-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border-bottom:1px solid var(--line); background:var(--panel)}
.pv-nav{display:flex; align-items:center; gap:7px}
.pv-btn{
  width:var(--btn-icon); height:var(--btn-icon); border:1px solid var(--line-strong); background:var(--panel);   /* 21 號:btn-icon 40×40 */
  border-radius:var(--c-radius-sm); cursor:pointer; font-size:var(--text-head); line-height:1; color:var(--ink-dim); flex:none;
  &:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
  &:disabled{opacity:.35; cursor:not-allowed}
  /* .refresh / .ztxt 變體 nested(原散落 line 308/507):.refresh 重繪鈕、.ztxt 文字尺寸切換 */
  &.refresh{
    width:auto; padding:0 12px; background:var(--primary); color:#fff; border-color:var(--primary); font-size:var(--text-base);
    &:hover:not(:disabled){background:var(--primary-dark); color:#fff; border-color:var(--primary-dark)}
  }
  &.ztxt{
    width:auto; padding:0 10px; font-size:var(--text-base);
    &.on{border-color:var(--accent); color:var(--accent)}
  }
}
.pv-ind{font-size:var(--text-base); color:var(--ink-dim); font-family:inherit; font-variant-numeric:tabular-nums; min-width:58px; text-align:center}
.pv-right{display:flex; align-items:center; gap:9px}
/* 操作說明:紅「?」在預覽框右上,click 啟動 5 步引導(see api.js startTour) */
.pv-help{position:relative; width:22px; height:22px; flex:none; padding:0; border-radius:0;
  border:1.5px solid var(--primary); background:var(--panel); color:var(--primary);
  font-size:var(--text-base); font-weight:700; font-family:inherit; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s}
.pv-help:hover{background:var(--primary); color:var(--primary-foreground)}
/* 5 步引導 overlay:整片背景高斯模糊+暗罩;當前 glow 元素提到 overlay 之上=不被 blur=自然「浮出」 */
.tour-ov{position:fixed; inset:0; z-index:9700; background:rgba(0,0,0,.18);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); cursor:pointer;
  animation:tourfade .2s ease}
@keyframes tourfade{from{opacity:0} to{opacity:1}}
/* glow:目前步驟的目標元素,提層+脈動紅框(深色主題 token 自動變萊姆) */
/* pointer-events:none → 點 glow 區域時 hit-testing 跳過此元素、直接落到底下 overlay 推進 tour,
   避免穿透誤觸按鈕(如「封面」工具列鈕)導致版面被切換 */
.tour-glow{position:relative !important; z-index:9750 !important; pointer-events:none !important;
  box-shadow:0 0 0 3px var(--primary), 0 0 24px color-mix(in srgb, var(--primary) 60%, transparent) !important;
  border-radius:0; animation:tourpulse 1.6s ease-in-out infinite}
@keyframes tourpulse{
  50%{box-shadow:0 0 0 5px var(--primary), 0 0 40px color-mix(in srgb, var(--primary) 70%, transparent)}}
/* 對話小卡:桌面停在左側(垂直置中、不擋中央預覽)、從更左滑入;手機從下滑入(bottom sheet) */
.tour-card{
  position:fixed; top:50%; left:32px; transform:translateY(-50%); z-index:9800;
  background:var(--card); color:var(--foreground); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 22px;
  width:300px; max-width:calc(50vw - 48px); pointer-events:auto;
  font-size:var(--text-head); line-height:1.5; animation:tourslidein .28s cubic-bezier(.21,1.02,.73,1);
  & .tcclose{
    position:absolute; top:6px; right:8px; border:none; background:none;
    color:var(--ink-faint); cursor:pointer; padding:2px 6px; font-size:var(--text-base);
    font-family:inherit; line-height:1;
    &:hover{color:var(--ink)}
  }
  & .tcstep{display:block; font-size:var(--text-caption); color:var(--ink-faint);
    margin-bottom:6px; font-variant-numeric:tabular-nums}
  & .tcmsg{display:block; padding-right:18px}
  & .tchint{display:block; margin-top:10px; font-size:var(--text-caption); color:var(--ink-faint)}
}
@keyframes tourslidein{from{opacity:0; transform:translate(-28px,-50%)} to{opacity:1; transform:translate(0,-50%)}}
@media (max-width:640px){
  .tour-card{top:auto; bottom:14px; left:14px; right:14px; transform:none; max-width:none;
    animation:tourslideup .28s cubic-bezier(.21,1.02,.73,1)}
  @keyframes tourslideup{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)}}
}
.pv-zoom{display:flex; gap:6px}
/* .pv-btn.ztxt / .pv-btn.ztxt.on 已 nesting 進 .pv-btn block 上方 */
.pv-scroll{position:relative; flex:1; min-height:0; overflow:auto; background:#33312e;
  display:flex; justify-content:center; align-items:flex-start; padding:16px 0}
.pv-stage{position:relative; flex:none}
.pv-frame{border:0; background:#fff; display:block; box-shadow:0 8px 30px rgba(0,0,0,.4)}
.pv-empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#d9d6d2; font-size:var(--text-base); pointer-events:none; text-align:center; padding:20px}

/* ===== Buttons ===== */
.btn{
  /* 21_components Tier 3 對位:預設 size = lg (主 CTA / step 流程)、intent = 看 .primary/.accent/.ghost 變體 */
  display:inline-flex; align-items:center; gap:8px;
  padding:var(--btn-pad-lg); border-radius:var(--c-radius-md);
  font-size:var(--text-base); font-weight:700; border:none; cursor:pointer; font-family:inherit; transition:.18s;
  &.primary{
    background:var(--foreground); color:var(--background);
    &:hover{background:var(--foreground); opacity:.88}
  }
  &.accent{
    background:var(--primary); color:var(--primary-foreground);
    &:hover{background:var(--primary-dark)}
    &:disabled{background:var(--line-strong); color:var(--ink-faint); opacity:1}  /* 灰→紅:未選檔=真灰(非 40% 淡紅)，選好才轉紅 */
  }
  &.ghost{
    background:transparent; color:var(--ink-dim); border:1px solid var(--line-strong);
    &:hover{border-color:var(--ink); color:var(--ink)}
  }
  &:disabled{opacity:.4; cursor:not-allowed}
  &.sm{padding:var(--btn-pad-md); font-size:var(--text-base); border-radius:var(--c-radius-md)}   /* 21 號 size = md(h≈44);.sm 名稱保留向下相容 */
}
.actions{display:flex; justify-content:space-between; align-items:center; margin-top:24px}

/* ===== Proofread ===== */
.check-group{
  margin-bottom:20px;
  & h3{font-size:var(--text-base); text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line)}
}
.check{
  display:flex; align-items:flex-start; gap:10px; padding:7px 0; font-size:var(--text-base);
  & .tick{
    width:18px; height:18px; border-radius:0; flex:none; display:flex; align-items:center; justify-content:center; font-size:var(--text-caption); color:#fff; margin-top:1px;
    &.ok{background:var(--ok)}
    &.warn{background:var(--warn)}
  }
  & .ctext{flex:1; min-width:0}
  & .cval{font-family:inherit; font-variant-numeric:tabular-nums; font-size:var(--text-base); color:var(--ink-dim)}
}
/* 待核對清單:直接列圖表名稱,「略過」點掉→計數降、可提早進下一步 */
.pend-list{margin:8px 0 2px; display:flex; flex-direction:column; gap:5px}
.pend-item{
  display:flex; align-items:center; gap:8px; font-size:var(--text-base); color:var(--ink);
  & .pn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
.pend-skip{
  flex:none; background:transparent; color:var(--primary); border:1.5px solid var(--primary);   /* 空心紅=破壞性低調,跟 .ndissolve 一致(21 號 pill/destructive 皆空心) */
  border-radius:0; font-size:var(--text-caption); padding:2px 11px; cursor:pointer; font-family:inherit; transition:.12s;
  &:hover{background:var(--primary-soft)}
}
/* 校對資料表(刀3:data table 視覺升級;結構與 collectReadings 取值零改動) */
.datatable{
  width:100%; border-collapse:collapse; font-size:var(--text-base); margin-top:6px;
  border:1px solid var(--border); border-radius:0; overflow:hidden;
  & th{font-size:var(--text-caption); text-transform:uppercase; font-weight:700;
    text-align:left; padding:7px 10px; color:var(--muted-foreground); background:var(--muted)}
  & td{padding:3px 6px; border-top:1px solid var(--border)}
  & tr:first-child td{border-top:0}
  & th:last-child, & td:last-child{text-align:right}
  /* 儲存格輸入框融入表格:無框透明，聚焦才現環(編輯型 data-table 手感) */
  & .rin{
    border:1px solid transparent; border-radius:0; background:transparent; padding:6px 8px;
    &:focus{border-color:var(--ring); background:var(--card);
      box-shadow:0 0 0 2px color-mix(in srgb, var(--ring) 16%, transparent)}
    &.num{text-align:right; font-variant-numeric:tabular-nums}
  }
}
/* 原生圖表屬性標籤(chart1 / bar):反白小膠囊,跟標題分明 */
/* 屬性標籤(chart1 / bar):淺色被動小膠囊(與紅色「解散」動作區別) */
.ntag{display:inline-block; vertical-align:middle; margin-left:6px; padding:1px 7px; border-radius:0;
  background:var(--muted); color:var(--muted-foreground); font-size:var(--text-caption); font-weight:400;
  letter-spacing:.3px; text-transform:none; font-variant-numeric:tabular-nums}
/* 原生圖表標題列:flex + 中間 .nflex spacer 把「解散」推到最右(無論標題長短/有無 .ntag 皆一致);summary 維持 list-item→保留收合三角 */
.nrow{display:flex; align-items:center}
.nrow .ntitle{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nrow .nflex{flex:1 1 auto; min-width:0}
/* 解散:21 號 destructive button — sm padding(44h)、16px 拉開、radius 4(方角);空心紅=破壞性比 primary CTA 低調(per 20/21) */
.ndissolve{display:inline-block; vertical-align:middle; margin-left:var(--touch-gap-destructive); flex:none; white-space:nowrap; padding:var(--btn-pad-sm); border-radius:0;
  background:transparent; color:var(--primary); font-size:var(--text-caption); font-family:inherit; border:1.5px solid var(--primary); cursor:pointer; transition:.12s}
.ndissolve:hover{background:var(--primary-soft)}
/* 原生圖表卡:每張圖一個淺底 card,跟底下視覺分離 */
.nchart-card{background:var(--c-bg-muted); border-radius:var(--c-radius-md); padding:var(--c-pad-sm); margin-bottom:10px}   /* 21 號:sm card */
.nchart-card[open]{padding-bottom:12px}
/* 貼上 Excel 補數據:逐圖收合;預設只一個小連結,點開才出貼上框 */
.pastebox{margin-top:10px}
.pastebox > summary{font-size:var(--text-caption); color:var(--accent); cursor:pointer; width:fit-content}
.pastebox[open] > summary{margin-bottom:6px}
.pb-hint{font-size:var(--text-caption); color:var(--ink-faint); margin-bottom:6px}
.pb-ta{width:100%; font-family:inherit; font-size:var(--text-caption); line-height:1.6; padding:6px 8px;
  border:1px solid var(--line-strong); border-radius:0; background:var(--panel); color:var(--ink)}
.pb-ta:focus{outline:none; border-color:var(--accent)}
.pb-hdrlab{display:flex; align-items:center; gap:6px; font-size:var(--text-caption); color:var(--ink-dim); margin-top:8px; cursor:pointer}
.pb-note{font-size:var(--text-caption); color:var(--ink-dim); margin:8px 0 4px}
.pb-apply{margin-top:8px; border:none; background:var(--accent); color:var(--primary-foreground); border-radius:0;
  font-size:var(--text-caption); font-weight:700; padding:5px 14px; cursor:pointer; font-family:inherit; transition:.12s}
.pb-apply:hover{background:var(--primary-dark)}

/* 過場頁:進度條 + 4 階段清單(完成劃掉);進度為模擬(計時推前 3 階,末階壓著等真回應)*/
.processing{padding:8px 0}
.loadcard{max-width:none; width:100%; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:0; padding:24px 22px; display:flex; flex-direction:column; align-items:stretch; text-align:center}
.loadcard .ltitle{font-size:var(--text-base); font-weight:700; color:var(--ink); margin:0 0 14px; word-break:break-all}
.loadcard .ltitle .procmeta{color:var(--ink-faint); font-weight:400; font-variant-numeric:tabular-nums}
.pbar{height:6px; border-radius:0; background:var(--muted); overflow:hidden; margin:0 0 16px}
.pbar-fill{height:100%; width:0; border-radius:0; background:var(--accent); transition:width .5s ease}
.pstages{list-style:none; display:flex; flex-direction:column; gap:9px; margin:0; padding:0}
.pstages li{font-size:var(--text-base); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; gap:9px; transition:.25s}
.pstages li::before{content:""; width:15px; height:15px; border-radius:0; border:1.5px solid var(--line-strong); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1; color:transparent; transition:.25s}
.pstages li.cur{color:var(--ink); font-weight:700}            /* 當前=深字(進度條已標進度,圓圈不再上紅) */
.pstages li.done{color:var(--ink-faint); text-decoration:line-through}
.pstages li.done::before{content:"✓"; background:var(--accent); border-color:var(--accent); color:var(--primary-foreground)}  /* 完成=劃掉 + 打勾 */
.perr{display:none; font-size:var(--text-base); color:var(--primary); margin:14px 0 0; line-height:1.5}
.perr.show{display:block}
#pRetry{align-self:center}

/* ===== 步驟5 輸出頁 ===== */
.done-card{text-align:center; padding:56px 44px 42px}
.done-tick{width:56px; height:56px; margin:6px auto 16px; display:flex; align-items:center; justify-content:center}
.done-tick svg{width:56px; height:56px; stroke:var(--ok); stroke-width:2.4; fill:none}
.done-tick svg path{stroke-dasharray:30; stroke-dashoffset:30}
.done-tick.play svg path{animation:tickdraw 1s .15s cubic-bezier(.25,.8,.3,1) forwards}
.done-tick.play{animation:tickfade .4s ease both}
@keyframes tickdraw{to{stroke-dashoffset:0}}
@keyframes tickfade{0%{opacity:0; transform:scale(.9)}100%{opacity:1; transform:scale(1)}}
.done-card h2{font-size:var(--text-title); line-height:var(--text-title-lh); letter-spacing:var(--text-title-ls); font-weight:700; margin-bottom:18px}   /* 完成頁焦點:20px 標題(原 13px 太平) */
.file-chip{display:inline-flex; align-items:center; gap:8px; max-width:100%; font-family:inherit;
  font-size:var(--text-base); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:0;
  padding:7px 14px; white-space:nowrap; overflow:hidden}
.file-chip .dot{width:5px; height:5px; border-radius:0; background:var(--accent); flex:none}
.file-chip .nm{overflow:hidden; text-overflow:ellipsis}
/* step5 輸出=可下載按鈕(檔名+已就緒+↓ 併一顆;src chip 用 → 接過來)*/
.dl-chip{padding:12px 24px; border-radius:0}   /* step5 下載鈕「PDF 已就緒」(不顯檔名) */
.out-meta{font-size:var(--text-caption); color:var(--ink-dim); margin:0 0 38px}   /* 共N頁·色盤:按鈕下小灰字確認(不入主行)*/
.out-sep{height:1px; background:var(--line); margin:26px auto; width:60%}
.cache-row{display:flex; gap:10px; justify-content:center; margin-top:14px}
/* 查詢暫存結果:stat + 內聯清空鈕同列(查過才顯) */
.cache-result{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:12px; font-size:var(--text-base); color:var(--ink); line-height:1.5}
.cache-result .cache-clear{padding:6px 14px}   /* 內聯清空比一般 sm 再扁一點 */
.cache-result .ok{color:var(--ok)}
.file-chip.src .dot{background:var(--ink-faint)}
.chip-arrow{font-size:var(--text-base); color:var(--ink-faint); margin:0}
.modal{position:fixed; inset:0; background:rgba(20,18,16,.45); display:none; align-items:center; justify-content:center; z-index:50}
.modal.show{display:flex; animation:mfade .2s ease}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--c-bg-panel); border:1px solid var(--ink); border-radius:var(--c-radius-lg); box-shadow:var(--c-shadow-md); padding:30px 32px 26px; max-width:320px; width:calc(100% - 48px); text-align:center; animation:mpop .22s cubic-bezier(.2,.8,.3,1.1)}   /* 21 號:radius lg;padding 30/32/26 outlier 留下次 snap 到 xl;mpop 定義在上方彩蛋段 */
.modal-card p{font-size:var(--text-base); color:var(--ink); line-height:1.5; margin-bottom:22px}
/* === 工程模式:點版本號三下 toggle 部署驗收清單 === */
#devChecklist{background:#1a1a1a; color:#d0d0d0; font:11.5px/1.55 Menlo,Consolas,"Courier New",monospace; border-bottom:2px solid var(--primary); max-height:85vh; overflow:auto}
#devChecklist[hidden]{display:none}
#devChecklist .dh{display:flex; justify-content:space-between; align-items:center; padding:9px 16px; background:#0e0e0e; border-bottom:1px solid #2a2a2a; color:var(--primary); font-weight:500; position:sticky; top:0}
#devChecklist .dh .ht{letter-spacing:.3px}
#devChecklist .dh .dhx{background:none; border:1px solid #444; color:#999; cursor:pointer; font-size:16px; line-height:1; padding:4px 10px; border-radius:0; font-family:inherit}
#devChecklist .dh .dhx:hover{color:#fff; border-color:#666}
/* step jumper:塞 mock plan 直跳該步,免上傳 docx 也能眼驗 step2~5 UI */
#devChecklist .dh .dj{display:inline-flex; align-items:center; gap:6px; margin-left:auto; margin-right:12px}
#devChecklist .dh .dj-lbl{color:#888; font-size:11px; letter-spacing:.3px}
#devChecklist .dh .dj button{background:#1a1a1a; border:1px solid #444; color:#d0d0d0; cursor:pointer; font:inherit; padding:3px 9px; border-radius:0; min-width:24px}
#devChecklist .dh .dj button:hover{color:#fff; border-color:var(--primary); background:#2a1414}
#devChecklist pre{margin:0; padding:14px 18px; white-space:pre-wrap; word-break:break-word; tab-size:2}

/* 尊重系統「減少動態」:關 CSS 動畫/轉場 + fxshake(MRSFX 燃燒是 canvas/JS,此處管不到,待 JS gate) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  body.fxshake{animation:none !important}
}