:root{
  --paper:#F4EFE5; --paper-2:#ECE5D7; --sheet:#FFFDF8; --sheet-2:#F9F5EC; --sheet-3:#F3EDE1;
  --line:#E4DBCA; --line-2:#D2C6AF; --line-3:#EFE8DB;
  --ink:#1D2230; --ink-2:#474B57; --ink-3:#6B665D;
  --brand:#E2014D; --brand-deep:#B8003F;
  --indigo:#283A6B; --indigo-2:#34497F; --indigo-bg:#EBEEF6;
  --block:#A3360F; --block-bg:#FBEADF; --block-line:#EEC6AF;
  --confirm:#855300; --confirm-bg:#FAF0D4; --confirm-line:#E7D097;
  --info:#1F5AA0; --info-bg:#E8EFF8; --info-line:#C3D3EA;
  --done:#2C6A3D; --done-bg:#E4F0E3; --done-line:#BAD7BC;
  --neutral:#5F5B53; --neutral-bg:#ECE6DA; --neutral-line:#D9D0BF;
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(70,50,20,.05),0 14px 30px -22px rgba(70,50,20,.32);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .40 0 0 0 0 .30 0 0 0 0 .18 0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:14px; line-height:1.5; color:var(--ink);
  background:var(--paper) var(--grain); -webkit-font-smoothing:antialiased;
  overflow:hidden; min-width:1280px;
}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.serif{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}
.mono{font-family:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums}
svg.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.ic.s{width:14px;height:14px}
svg.ic.l{width:18px;height:18px}

/* ---------- App frame ---------- */
.app{display:grid;grid-template-columns:228px 1fr;height:100vh}
.side{background:var(--paper-2) var(--grain);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px 16px;position:relative}
.brand img{height:30px;width:auto;display:block;color:var(--brand);font:800 22px/30px "Noto Sans TC",sans-serif;letter-spacing:.06em}
.brand .name{margin-top:14px;font-size:16px;font-weight:700;letter-spacing:.03em}
.brand .sub{font-size:12px;color:var(--ink-3);margin-top:1px;letter-spacing:.18em}
.rule2{height:4px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);margin:18px 0 14px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:11px;min-height:42px;padding:8px 12px;border-radius:9px;color:var(--ink-2);font-size:15px;position:relative;transition:background .15s}
.nav a:hover{background:rgba(255,253,248,.65)}
.nav a.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(70,50,20,.06)}
.nav a.on::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav .lbl{display:flex;flex-direction:column;line-height:1.3}
.nav .nav-hint{font-size:12px;font-weight:400;color:var(--ink-3);margin-top:2px}
.nav .cnt{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:#E1D7C5;color:var(--ink);font:600 12px/20px "IBM Plex Mono",monospace;text-align:center}
.side-help{margin-top:16px;padding:12px;border:1px dashed var(--line-2);border-radius:10px;font-size:12px;color:var(--ink-3);line-height:1.6}
.side-help b{color:var(--ink-2);font-weight:600}
.user{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--indigo);color:#F4EFE5;display:grid;place-items:center;font-size:16px;font-weight:700;box-shadow:0 0 0 3px var(--sheet),0 0 0 4px var(--line-2)}
.user .who{font-size:14px;font-weight:600;line-height:1.3}
.user .role{font-size:12px;color:var(--ink-3)}
.user .more{margin-left:auto;width:30px;height:30px;border-radius:8px;border:0;background:transparent;display:grid;place-items:center;color:var(--ink-3)}
.user .more:hover{background:var(--sheet)}

.main{display:grid;grid-template-rows:52px 1fr;min-width:0;min-height:0}
.top{display:flex;align-items:center;gap:12px;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(249,245,236,.75)}
.batch-btn{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;margin-left:-8px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:16px;font-weight:700}
.batch-btn:hover{border-color:var(--line-2);background:var(--sheet)}
.batch-id{font-size:13px;color:var(--ink-2);padding:2px 8px;border:1px solid var(--line);border-radius:6px;background:var(--sheet)}
.rule-tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:var(--indigo-bg);color:var(--indigo);font-size:12px;font-weight:600}
.spacer{flex:1}
.demo-switch{display:flex;align-items:center;gap:4px;padding:3px;border:1px dashed var(--line-2);border-radius:999px;background:var(--sheet-2)}
.demo-switch .lab{font-size:12px;color:var(--ink-3);padding:0 6px 0 8px}
.demo-switch a{font-size:12px;padding:3px 10px;border-radius:999px;color:var(--ink-2)}
.demo-switch a:hover{background:var(--sheet)}
.demo-switch a[aria-current="true"]{background:var(--ink);color:var(--sheet)}
.masked{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;color:var(--ink-2);background:var(--sheet)}

/* ---------- Screens ---------- */
.screen{display:none;grid-template-rows:64px 1fr 68px;min-height:0;overflow:hidden}
body[data-screen="a"] #screen-a,
body[data-screen="b"] #screen-b,
body[data-screen="c"] #screen-c{display:grid}

/* Stepper — the red thread */
.steps{display:grid;grid-template-columns:repeat(5,1fr);padding:0 28px;border-bottom:1px solid var(--line);background:linear-gradient(var(--sheet-2),rgba(249,245,236,.6))}
.step{display:flex;align-items:center;gap:10px;position:relative;padding-right:14px;min-width:0}
.step .dot{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700}
.step .txt{min-width:0}
.step .t1{font-size:14px;font-weight:600;white-space:nowrap}
.step .t2{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step .line{flex:1;min-width:16px;height:0;border-top:1px dashed var(--line-2);margin-left:4px}
.step:last-child .line{display:none}
.step.done .dot{background:var(--ink);color:var(--sheet)}
.step.done .dot svg{width:14px;height:14px;stroke-width:2.4}
.step.done .line{border-top:1.5px solid var(--ink-2)}
.step.cur .dot{background:var(--sheet);color:var(--brand-deep);border:1.5px solid var(--brand);box-shadow:0 0 0 4px rgba(226,1,77,.10)}
.step.cur .t1{color:var(--ink)}
.step.cur .t2 b{color:var(--brand-deep);font-weight:700}
.step.cur::after{content:"";position:absolute;left:0;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--brand)}
.step.todo .dot{border:1px dashed var(--line-2);color:var(--ink-3);background:transparent}
.step.todo .t1{color:var(--ink-2);font-weight:500}

.content{min-height:0;overflow:auto;padding:18px 28px 14px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px}
h1{font-size:26px;line-height:1.25;font-weight:700;letter-spacing:.02em}
.lede{margin-top:6px;color:var(--ink-2);font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lede .ic{color:var(--ink-3)}
.link{color:var(--indigo);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(40,58,107,.35);background:none;border:0;padding:0;font-size:inherit}
.link:hover{text-decoration-color:var(--indigo)}
.kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:5px;background:var(--sheet);border:1px solid var(--line-2);box-shadow:0 1.5px 0 var(--line-2);font:500 12px "IBM Plex Mono",monospace;color:var(--ink);vertical-align:1px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);background:var(--sheet);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(70,50,20,.07);transition:border-color .15s,background .15s}
.btn:hover{border-color:#BFB197;background:#fff}
.btn.sm{height:30px;padding:0 11px;font-size:13px}
.btn.xs{height:26px;padding:0 9px;font-size:12px;border-radius:6px;gap:5px}
.btn-indigo{display:inline-flex;align-items:center;gap:12px;height:40px;padding:0 8px 0 16px;border-radius:9px;border:0;background:linear-gradient(180deg,#32467C,#263764);color:#fff;font-size:15px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 14px -8px rgba(40,58,107,.7)}
.btn-primary{display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 9px 0 20px;border-radius:10px;border:0;background:linear-gradient(180deg,#D3014A,#BC003F);color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 18px -8px rgba(184,0,63,.6);transition:transform .1s,filter .15s}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:active{transform:translateY(1px)}
.keycap{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;border-radius:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);box-shadow:0 1.5px 0 rgba(0,0,0,.18);font:500 12px "IBM Plex Mono",monospace}
.keycap svg{width:13px;height:13px}
.btn-primary[disabled]{background:#E5DDCF;color:#857E72;box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.btn-primary[disabled] .keycap{background:transparent;border-color:#CFC4AF;box-shadow:none}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:700;border:1px solid;white-space:nowrap;letter-spacing:.02em}
.chip .ic{width:14px;height:14px;stroke-width:2}
.chip.sm{height:22px;padding:0 8px}
.chip.block{color:var(--block);background:var(--block-bg);border-color:var(--block-line)}
.chip.confirm{color:var(--confirm);background:var(--confirm-bg);border-color:var(--confirm-line)}
.chip.info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.chip.done{color:var(--done);background:var(--done-bg);border-color:var(--done-line)}
.chip.neutral{color:var(--neutral);background:var(--neutral-bg);border-color:var(--neutral-line);font-weight:600}
.chip.unknown{color:var(--confirm);background:var(--sheet);border:1.5px dashed var(--confirm)}

.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.sec-label{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;color:var(--ink-3);font-weight:600;margin:16px 0 10px}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-label .aside{order:2;letter-spacing:0;font-weight:400}

/* Action bar */
.actionbar{display:flex;align-items:center;gap:16px;padding:0 28px;border-top:1px solid var(--line);background:var(--sheet);box-shadow:0 -12px 26px -20px rgba(70,50,20,.35);position:relative;z-index:2}
.ab-msg{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.ab-msg .sub{font-size:13px;color:var(--ink-3)}
.ab-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.ab-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.ab-ico.done{background:var(--done-bg);color:var(--done)}
.ab-ico.block{background:var(--block-bg);color:var(--block)}
.ab-ico.ink{background:var(--indigo-bg);color:var(--indigo)}

/* Checkbox & switch */
.cb{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--line-2);background:var(--sheet);display:grid;place-items:center;transition:all .15s}
.cb svg{width:13px;height:13px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cb.on,.on>.cb{background:var(--indigo);border-color:var(--indigo)}
.cb.on svg,.on>.cb svg{opacity:1}
.cb.sm{width:17px;height:17px;border-radius:5px}
.cb.sm svg{width:11px;height:11px}
.sw{position:relative;display:inline-block;width:30px;height:18px;border-radius:9px;background:#D3C9B5;transition:background .15s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.sw.on{background:var(--indigo)}
.sw.on::after{left:14px}

/* ---------- (a) 選來源 ---------- */
.suggest-card{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:12px;background:var(--sheet);border:1px solid var(--line);box-shadow:var(--shadow);min-width:400px}
.suggest-card .sc-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.suggest-card .sc-txt b{display:block;font-size:15px}
.suggest-card .sc-txt small{display:block;font-size:12px;color:var(--ink-3)}
.suggest-card .btn{margin-left:auto}
.suggest-card .fresh{display:none}
.suggest-card.is-fresh .applied{display:none}
.suggest-card.is-fresh .fresh{display:contents}
.suggest-card .applied{display:contents}
.src-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.src{display:grid;grid-template-columns:20px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-radius:11px;background:rgba(255,253,248,.55);border:1px solid var(--line);cursor:pointer;transition:all .15s;position:relative;user-select:none}
.src:hover{border-color:var(--line-2)}
.src.on{background:var(--sheet);border-color:#D8CDB8;box-shadow:0 1px 2px rgba(70,50,20,.05)}
.src-name{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;line-height:1.35}
.src-name .idx{font-size:12px;font-weight:500;color:var(--ink-3)}
.how{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:14px;color:var(--ink-2)}
.how .ic{color:var(--ink-3)}
.src.warn{border-color:var(--confirm-line);background:linear-gradient(90deg,var(--confirm-bg),var(--sheet) 46%)}
.src.warn .how{color:var(--confirm);font-weight:500}
.src.warn .how .ic{color:var(--confirm)}
.src.warn::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--confirm)}
.tgs{display:flex;gap:14px}
.tg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:500;padding:4px 0}
.src:not(.on) .tgs{visibility:hidden}
.a-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
details.fold{border:1px dashed var(--line-2);border-radius:11px;background:rgba(249,245,236,.7)}
details.fold>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:11px 16px;cursor:pointer;font-size:14px;color:var(--ink-2)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .chev{transition:transform .15s;color:var(--ink-3)}
details.fold[open]>summary .chev{transform:rotate(90deg)}
details.fold .fold-body{padding:0 12px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.remind{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:11px;background:var(--info-bg);border:1px solid var(--info-line);font-size:14px}
.remind .ic{color:var(--info)}
.remind .link{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
.legend-line{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.legend-line .ic{color:var(--ink-3)}

/* ---------- (b) 處理異常 ---------- */
.content.b{display:flex;flex-direction:column;overflow:hidden}
.progress{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.progress .p-txt{font-size:14px;color:var(--ink-2)}
.progress .p-txt b{font:600 16px "IBM Plex Mono",monospace;color:var(--ink)}
.ticks{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;width:240px}
.ticks i{height:6px;border-radius:2px;background:#E2D8C4}
.ticks i.f{background:var(--indigo)}
.b-panes{flex:1;min-height:0;display:grid;grid-template-columns:424px 1fr;gap:16px}
.pane{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.list-head{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px;background:var(--sheet)}
.tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:9px;background:var(--sheet-3);border:1px solid var(--line)}
.tabs button{border:0;background:transparent;height:30px;border-radius:7px;font-size:14px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:6px}
.tabs button .n{font:600 13px "IBM Plex Mono",monospace}
.tabs button.on{background:var(--sheet);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(70,50,20,.12),0 0 0 1px var(--line)}
.bulk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);padding:0 4px}
.bulk .btn{margin-left:auto}
.list-body{overflow:auto;flex:1;min-height:0}
.grp-h{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--sheet-2);border-bottom:1px solid var(--line);font-size:13px;font-weight:700}
.grp-h .ic{width:15px;height:15px;stroke-width:2}
.grp-h .n{font:600 12px "IBM Plex Mono",monospace;padding:1px 7px;border-radius:999px;border:1px solid}
.grp-h.block{color:var(--block)} .grp-h.block .n{background:var(--block-bg);border-color:var(--block-line)}
.grp-h.confirm{color:var(--confirm)} .grp-h.confirm .n{background:var(--confirm-bg);border-color:var(--confirm-line)}
.grp-h.info{color:var(--info)} .grp-h.info .n{background:var(--info-bg);border-color:var(--info-line)}
.grp-h .link{margin-left:auto;font-size:13px}
.item{display:grid;grid-template-columns:17px 1fr;gap:12px;padding:10px 14px 10px 14px;border-bottom:1px solid var(--line-3);cursor:pointer;position:relative}
.item:hover{background:rgba(243,237,225,.5)}
.item .cb{margin-top:2px}
.item .t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14.5px;font-weight:600}
.item .code{font-size:12px;color:var(--ink-3);font-weight:500;flex:none}
.item .d{font-size:14px;color:var(--ink-2);line-height:1.45;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item.sel{background:var(--indigo-bg)}
.item.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--indigo)}
.item.sel .t{color:var(--indigo)}

.d-body{flex:1;min-height:0;overflow:auto;padding:16px 24px 14px}
.d-head{display:flex;align-items:center;gap:10px}
.d-head .code{font-size:13px;color:var(--ink-3);font-weight:500}
.d-head h2{font-size:22px;font-weight:700;letter-spacing:.02em}
.pager{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.pager .pos{font:500 13px "IBM Plex Mono",monospace;color:var(--ink-2);margin-right:4px}
.icon-btn{height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--line-2);background:var(--sheet);display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.icon-btn .kbd{height:18px;min-width:18px;font-size:12px;padding:0 4px;box-shadow:none}
.d-desc{margin-top:8px;font-size:15px;color:var(--ink);line-height:1.6}
.dl{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:12px 22px}
.dl dt{font-size:12px;color:var(--ink-3);margin-bottom:2px;letter-spacing:.06em}
.dl dd{font-size:14px;line-height:1.5}
.dl dd.mono{font-size:13.5px}
.dl dd .btn{margin-top:5px}
.dl dd.problem{color:var(--block);font-weight:600}
.dl dd.problem .diff{display:inline-block;margin-top:2px;padding:0 6px;border-radius:4px;background:var(--block-bg);font-family:"IBM Plex Mono",monospace}
.pair{display:grid;grid-template-columns:1fr 1.12fr;gap:14px;margin-top:16px}
.suggest{background:var(--sheet-2);border:1px solid var(--line);border-radius:11px;padding:13px 15px;display:flex;flex-direction:column;gap:7px}
.suggest .s-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.suggest .s-h .mk{width:22px;height:22px;border-radius:6px;background:#E8E0D0;color:var(--ink);display:grid;place-items:center}
.suggest p{font-size:14.5px;line-height:1.6}
.suggest p .mono{font-size:13.5px}
.suggest small{font-size:12px;color:var(--ink-3);line-height:1.5}
.suggest .btn{align-self:flex-start;margin-top:2px}
.cmp{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--sheet)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th{font-size:12px;color:var(--ink-3);font-weight:600;text-align:left;padding:8px 12px;background:var(--sheet-2);border-bottom:1px solid var(--line);letter-spacing:.06em}
.cmp td{font-size:14px;padding:7px 12px;border-bottom:1px solid var(--line-3)}
.cmp .r{text-align:right}
.cmp td.r{font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.cmp tr.miss td{background:rgba(251,234,223,.6)}
.cmp tr.miss td:first-child{box-shadow:inset 3px 0 0 var(--block)}
.cmp tr.miss .note{display:block;font-size:12px;color:var(--block);font-weight:600}
.cmp tr.total td{border-top:3px double var(--line-2);border-bottom:0;font-weight:700;background:var(--sheet-2)}
.cmp .bad{color:var(--block)}
.cmp .muted{color:var(--ink-3)}
.d-act{border-top:1px solid var(--line);background:var(--sheet-2);padding:12px 24px 14px}
.d-act .lab{font-size:12px;color:var(--ink-3);letter-spacing:.12em;font-weight:600;margin-bottom:7px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.opt{display:flex;align-items:center;gap:9px;min-height:46px;padding:7px 11px;border-radius:9px;border:1px solid var(--line-2);background:var(--sheet);text-align:left;font-size:14px;font-weight:500;transition:all .12s}
.opt:hover{border-color:#BBAE95}
.opt .kbd{flex:none}
.opt .o-t{display:flex;flex-direction:column;line-height:1.3}
.opt .o-t small{font-size:12px;color:var(--ink-3);font-weight:400}
.opt.on{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo) inset;background:#F0F2F8;color:var(--indigo);font-weight:700}
.opt.on .kbd{background:var(--indigo);color:#fff;border-color:var(--indigo);box-shadow:none}
.opt.off{cursor:not-allowed;color:var(--ink-3);background:repeating-linear-gradient(135deg,rgba(120,100,70,.05) 0 6px,transparent 6px 12px),var(--sheet-3);border-style:dashed}
.opt.off .kbd{color:var(--ink-3);box-shadow:none}
.d-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.d-row .rl{font-size:14px;color:var(--ink-2)}
.select{display:flex;align-items:center;justify-content:space-between;gap:10px;height:38px;min-width:268px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--sheet);font-size:14px;box-shadow:0 1px 0 #fff inset}
.select .ic{color:var(--ink-3)}
.d-row .after{margin-left:auto;font-size:12px;color:var(--ink-3);text-align:right;line-height:1.4}
.blocked-msg{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blocked-msg .s{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.blocked-msg .s .ic{width:15px;height:15px;stroke-width:2}
.s.block{color:var(--block)} .s.confirm{color:var(--confirm)} .s.info{color:var(--info)}

/* ---------- (c) 核可 ---------- */
.c-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fcard{padding:14px 18px;display:flex;flex-direction:column;gap:10px;position:relative}
.fcard.locked{background:repeating-linear-gradient(135deg,rgba(120,100,70,.04) 0 8px,transparent 8px 16px),var(--sheet)}
.fc-head{display:flex;align-items:center;gap:10px}
.fc-head .fi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--indigo-bg);color:var(--indigo)}
.fcard.locked .fc-head .fi{background:var(--neutral-bg);color:var(--neutral)}
.fc-head h3{font-size:17px;font-weight:700;letter-spacing:.02em}
.fc-head .chip{margin-left:auto}
.file{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--sheet-2)}
.file .doc{width:30px;height:34px;border-radius:5px;background:#E5EFE4;color:var(--done);display:grid;place-items:center;border:1px solid var(--done-line);flex:none}
.file .fn{font-size:13px;font-weight:500;line-height:1.35}
.file .fm{font-size:13px;color:var(--ink-2);line-height:1.35}
.file .link{margin-left:auto;font-size:14px}
.row-split{display:flex;align-items:center;gap:12px}
details.mini>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px}
details.mini>summary::-webkit-details-marker{display:none}
details.mini>summary .chev{color:var(--ink-3);transition:transform .15s}
details.mini[open]>summary .chev{transform:rotate(90deg)}
details.mini .mini-body{margin-top:6px;font-size:13px;color:var(--ink-2);line-height:1.7;padding:8px 10px;border-radius:8px;background:var(--sheet-2);border:1px solid var(--line)}
.ok{color:var(--done);font-weight:600}
.warn-t{color:var(--confirm);font-weight:600}
.tech{margin-left:auto}
.tech>summary{color:var(--ink-3);font-size:13px}
.note{display:flex;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;line-height:1.6;border:1px solid}
.note .ic{margin-top:3px}
.note.info{background:var(--info-bg);border-color:var(--info-line)}
.note.info .ic{color:var(--info)}
.note.lock{background:var(--sheet-3);border-color:var(--neutral-line)}
.note.lock .ic{color:var(--neutral)}
.note b.wait{color:var(--confirm)}
.fc-actions{display:flex;align-items:center;gap:14px}
.indep{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.indep::before,.indep::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2))}
.indep::after{background:linear-gradient(90deg,var(--line-2),transparent)}
.indep span{display:inline-flex;align-items:center;gap:7px;padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:var(--sheet)}
.tbl-head{display:flex;align-items:center;gap:12px;margin:12px 0 8px}
.tbl-head h3{font-size:16px;font-weight:700}
.tbl-head .meta{font-size:13px;color:var(--ink-3)}
.tbl-head .legend{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.ctable{width:100%;border-collapse:separate;border-spacing:0;background:var(--sheet);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.ctable th{font-size:12px;color:var(--ink-3);font-weight:600;text-align:left;padding:7px 16px;background:var(--sheet-2);border-bottom:1px solid var(--line-2);letter-spacing:.06em}
.ctable td{font-size:14px;padding:0 16px;height:28px;border-bottom:1px solid var(--line-3)}
.ctable .r{text-align:right}
.ctable td.r{font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.ctable .dash{color:#A39C90}
.ctable .inc{display:inline-flex;align-items:center;gap:6px}
.ctable .inc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--done)}
.ctable .lk{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.ctable tr:hover td{background:rgba(243,237,225,.45)}
.ctable tfoot td{border-top:3px double var(--line-2);border-bottom:0;height:32px;font-weight:700;background:var(--sheet-2)}
.ctable tfoot small{font-weight:400;color:var(--ink-3);font-size:12px;margin-left:6px}
.stamp{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border:1.5px solid var(--indigo);border-radius:5px;color:var(--indigo);font-size:13px;font-weight:700;letter-spacing:.1em;background:rgba(40,58,107,.05);box-shadow:inset 0 0 0 2px var(--sheet),inset 0 0 0 3px rgba(40,58,107,.5);transform:rotate(-2deg)}
.stamp .ic{width:14px;height:14px;stroke-width:2}

/* ===== (d) 取得訂單 ===== */
body[data-screen="d"] #screen-d{display:grid}
/* 頂列示意切換改為 4 項：固定不換行、不被擠壓 */
.demo-switch{flex:none}
.demo-switch a{white-space:nowrap}

#screen-d .page-head{margin-bottom:12px}
.fx-prog{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.fx-prog .p-txt{font-size:14px;color:var(--ink-2);line-height:1.5}
.fx-prog .p-txt b{font:600 16px "IBM Plex Mono",monospace;color:var(--ink)}
.fx-ticks{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:240px}
.fx-ticks i{height:6px;border-radius:2px;background:#E2D8C4}
.fx-ticks i.f{background:var(--indigo)}
.fx-ticks i.run{background:repeating-linear-gradient(135deg,var(--indigo) 0 3px,#A9B3CF 3px 6px)}
.fx-ticks i.fail{background:var(--block)}
.fx-prog .p-note{font-size:12px;color:var(--ink-3);line-height:1.5}

/* 來源清單 */
.fx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.fx-sheet{display:flex;flex-direction:column;overflow:hidden}
.fx-head{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--sheet-2);border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink)}
.fx-head .ic{color:var(--ink-2);stroke-width:2}
.fx-head .n{font:600 12px "IBM Plex Mono",monospace;padding:0 7px;border-radius:999px;border:1px solid var(--line-2);background:var(--sheet);color:var(--ink-2)}
.fx-head .aside{margin-left:auto;font-size:12px;font-weight:400;color:var(--ink-3)}
.fx-row{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--line-3);position:relative}
.fx-row:last-child{border-bottom:0}
.fx-row.is-fail{background:linear-gradient(90deg,var(--block-bg),var(--sheet) 55%)}
.fx-row.is-fail::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--block)}
.fx-row.is-run{background:linear-gradient(90deg,var(--indigo-bg),var(--sheet) 55%)}
.fx-row.is-run::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--indigo)}
.fx-mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.fx-mk .ic{width:14px;height:14px;stroke-width:2.2}
.fx-mk.done{background:var(--done-bg);color:var(--done)}
.fx-mk.fail{background:var(--block-bg);color:var(--block)}
.fx-mk.run{background:var(--sheet);color:var(--indigo);box-shadow:0 0 0 1px #C9D0E3}
.fx-mk.run .ic{animation:fxspin 1.6s linear infinite}
.fx-mk.none{background:var(--neutral-bg);color:var(--neutral)}
.fx-mk.wait{border:1.5px dashed var(--line-2);color:var(--ink-3);background:var(--sheet)}
.fx-mid{min-width:0}
.fx-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1.35;white-space:nowrap}
.fx-name .via{font:500 12px "IBM Plex Mono",monospace;color:var(--ink-3);padding:0 5px;border:1px solid var(--line);border-radius:4px;background:var(--sheet-2)}
.fx-sub{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:1px;white-space:nowrap}
.fx-sub .ic{color:var(--ink-3)}
.fx-sub .mono{font-size:12.5px}
.fx-sub .link{font-size:13px;margin-left:4px}
.fx-sub.bad{color:var(--block);font-weight:600}
.fx-sub.bad .ic{color:var(--block)}
.fx-sub.warn{color:var(--confirm);font-weight:500}
.fx-sub.warn .ic{color:var(--confirm)}
.fx-sub.good{color:var(--done);font-weight:500}
.fx-sub.good .ic{color:var(--done);stroke-width:2.2}
.fx-sub .dim{color:var(--ink-3);font-weight:400;margin-left:4px}
.fx-tag{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:600;border:1px solid;white-space:nowrap}
.fx-tag .ic{width:13px;height:13px;stroke-width:2}
.fx-tag.warn{color:var(--confirm);background:var(--confirm-bg);border-color:var(--confirm-line)}
.fx-tag.wait{color:var(--ink-2);background:var(--sheet);border:1px dashed var(--ink-3)}
#screen-d .chip.run{color:var(--indigo);background:var(--indigo-bg);border-color:#C9D0E3}
.fx-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.fx-r small{font-size:12px;color:var(--ink-3);white-space:nowrap}
.fx-r .link{font-size:13px}
.fx-got{font-size:14px;color:var(--ink-2);white-space:nowrap;line-height:1.4}
.fx-got b{font:600 16px "IBM Plex Mono",monospace;color:var(--ink);margin:0 3px}
.fx-bar{width:132px;height:4px;border-radius:2px;background:#E2D8C4;overflow:hidden;position:relative}
.fx-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:2px;background:var(--indigo);animation:fxslide 1.8s ease-in-out infinite}
@keyframes fxspin{to{transform:rotate(360deg)}}
@keyframes fxslide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

/* 拖放區 */
.fx-row.drop-row{grid-template-columns:26px 1fr;align-items:start;flex:1}
.fx-drop{margin-top:6px;display:flex;align-items:center;gap:12px;padding:8px 14px;border:1.5px dashed var(--line-2);border-radius:10px;background:var(--sheet-2);cursor:pointer;transition:border-color .15s,background .15s}
.fx-drop:hover{border-color:var(--indigo);background:#F0F2F8}
.fx-drop .dz-ico{width:34px;height:34px;border-radius:9px;background:var(--sheet);border:1px solid var(--line);display:grid;place-items:center;color:var(--indigo);flex:none}
.fx-drop .dz-t{font-size:14px;color:var(--ink);line-height:1.45}
.fx-drop .dz-t .mono{font-size:13px}
.fx-drop .dz-t .link{font-size:14px}
.fx-drop .dz-s{font-size:12px;color:var(--ink-3);line-height:1.5}
.fx-drop .dz-s .link{font-size:12px;margin-left:4px}

/* 下段：帳本合計＋預覽 */
.fx-bottom{display:grid;grid-template-columns:1fr 660px;gap:16px;margin-top:12px;align-items:start}
.fx-ledger{padding:11px 16px 12px}
.fx-lh{display:flex;align-items:baseline;gap:10px}
.fx-lh h3{font-size:16px;font-weight:700;letter-spacing:.02em}
.fx-lh .meta{margin-left:auto;font-size:12px;color:var(--ink-3)}
.fx-stats{display:flex;align-items:center;gap:16px;margin-top:6px;font-size:14px;color:var(--ink-2)}
.fx-stats span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fx-stats b{font:600 14px "IBM Plex Mono",monospace;color:var(--ink)}
.fx-stats i{width:9px;height:9px;border-radius:2px;flex:none}
.fx-stats i.run{background:repeating-linear-gradient(135deg,var(--indigo) 0 2px,#A9B3CF 2px 4px)}
.fx-stats i.fail{background:var(--block)}
.fx-stats i.wait{border:1.5px dashed var(--ink-3)}
.fx-stats i.none{background:var(--neutral-line)}
.fx-total{display:flex;align-items:baseline;gap:12px;margin-top:8px;padding:6px 2px 5px;border-top:3px double var(--line-2);border-bottom:1px solid var(--line)}
.fx-total .t-lab{font-size:15px;font-weight:700}
.fx-total .t-sum{font-size:12px;color:var(--ink-3)}
.fx-total .t-big{margin-left:auto;font-size:14px;color:var(--ink-2);line-height:1.2}
.fx-total .t-big b{font:600 24px "IBM Plex Mono",monospace;color:var(--ink);margin-right:4px}
.fx-check{margin-top:10px;padding:7px 12px 8px;border:1px solid var(--line);border-radius:9px;background:var(--sheet-2)}
.fx-check .dc-h{display:flex;align-items:center;gap:10px}
.fx-check .dc-lab{font-size:12px;letter-spacing:.14em;color:var(--ink-3);font-weight:600}
.fx-check .dc-note{margin-left:auto;font-size:12px;color:var(--ink-3)}
.fx-check .dc-row{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:14px;white-space:nowrap}
.fx-check .dc-row b.mono{font-size:15px}

.fx-pv-head{display:flex;align-items:center;gap:10px;height:30px;margin-bottom:8px}
.fx-pv-head h3{font-size:16px;font-weight:700;letter-spacing:.02em}
.fx-pv-head .meta{font-size:13px;color:var(--ink-3)}
.fx-pv-head .pv-note{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.fx-pv-head .pv-note .ic{color:var(--ink-3)}
#screen-d .ctable th,#screen-d .ctable td{padding-left:12px;padding-right:12px}
#screen-d .ctable td.mono{font-size:13.5px}
.fx-pv-foot{margin-top:6px;font-size:12px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  #screen-d .fx-mk.run .ic,#screen-d .fx-bar::after{animation:none}
}
/* 手動修正（Grok Bot）：#d 內容區在 1440×900 下高出 2px 會出現捲軸，底部留白 14→10px */
#screen-d .content{padding-bottom:10px}