:root{color-scheme:dark;
  --bg:#0e0f10;--panel:#17181acc;--panel-solid:#17181a;--border:#2c2e31;--text:#f0efec;--muted:#a9a8a1;--faint:#7c7b75;
  --accent:#76b900;--accent-ink:#0b0b0b;--s1:#3987e5;--s2:#d95926;--s3:#199e70;--good:#0ca30c;--warn:#fab219;--bad:#e66767;
  --radius:12px;--gap:12px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;overflow:hidden}
#scene{position:fixed;inset:0;display:block;width:100%;height:100%}
.panel{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px #0006}
.loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;background:var(--bg);z-index:50;transition:opacity .4s}
.ld{width:min(320px,80vw)}
.ld-title{color:var(--text);font-weight:650;font-size:15px;margin-bottom:12px}
.ld-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:8px;vertical-align:1px}
.ld-bar{height:4px;border-radius:2px;background:#ffffff14;overflow:hidden;position:relative}
.ld-bar i{position:absolute;inset:0 auto 0 0;width:30%;background:var(--accent);border-radius:2px;animation:ld-indet 1.1s ease-in-out infinite}
.ld-bar.det i{animation:none;transition:width .25s ease-out}
@keyframes ld-indet{0%{left:-30%}100%{left:100%}}
.ld-row{display:flex;justify-content:space-between;margin-top:8px;font-variant-numeric:tabular-nums}
.ld-row #ldPct{color:var(--text)}
.loading.err .ld-bar i{background:var(--bad);animation:none;width:100%}
.loading.done{opacity:0;pointer-events:none}
.brand{left:16px;top:16px;padding:10px 14px;max-width:calc(100% - 32px)}
.brand-title{font-weight:650;font-size:15px;letter-spacing:.01em}
.brand-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:8px;vertical-align:1px}
.brand-sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.nav{left:16px;top:84px;width:340px;max-height:calc(100% - 160px);display:flex;flex-direction:column;overflow:hidden}
.data{right:16px;top:16px;width:360px;max-height:calc(100% - 32px);display:flex;flex-direction:column;overflow:hidden}
.tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--border);flex:none}
.tab{flex:1;background:none;border:0;color:var(--muted);padding:8px 6px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--text);background:#ffffff0d}.tab.active{color:var(--text);background:#ffffff17}
.collapse{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:0 8px}
.tabpane{display:none;padding:14px;overflow:auto}.tabpane.active{display:block}
.hint{color:var(--faint);font-size:12.5px;margin:6px 0 10px}
.nw{white-space:nowrap}
.hint,.kpi .l,.notes,.seg button small,.reco,.warn{text-wrap:pretty;overflow-wrap:anywhere}
.sites{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.site{background:#ffffff08;border:1px solid var(--border);border-radius:10px;padding:8px 9px 6px;cursor:pointer;text-align:left;color:var(--text);font:inherit}
.site:hover{border-color:#ffffff40}.site.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.site .nm{font-size:13px;font-weight:600;line-height:1.25}
.site .kp{font-size:11.5px;color:var(--muted);margin-top:2px}
.site .kp b{color:var(--text);font-weight:600;margin-right:4px}
.site canvas{width:100%!important;height:46px!important;margin-top:4px}
.site .ex{font-size:11px;color:var(--faint);display:flex;justify-content:space-between}
.seg{display:flex;gap:6px;margin:6px 0 14px}.seg.col{flex-direction:column}
.seg button{flex:1;background:#ffffff08;border:1px solid var(--border);color:var(--text);border-radius:9px;padding:9px 10px;font:inherit;cursor:pointer;text-align:left}
.seg button small{display:block;color:var(--faint);font-size:11.5px;margin-top:1px}
.seg button.on{border-color:var(--accent);background:#76b9001a}
.field{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12.5px;margin:10px 0 4px}
.field output{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.field.small input{width:90px;background:#0006;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 6px;font:inherit}
input[type=range]{width:100%;accent-color:var(--accent)}
.ticks{display:flex;justify-content:space-between;color:var(--faint);font-size:11px;margin-top:-2px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:14px 0 0;font-size:13px}
.facts dt{color:var(--muted)}.facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;text-wrap:balance}
.warn{color:var(--warn);font-size:12px;margin-top:10px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi{background:#ffffff08;border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.kpi .v{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .l{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.35}
.kpi.bad .v{color:var(--bad)}.kpi.ok .v{color:var(--text)}
.kpi .badge{font-size:11px;padding:1px 6px;border-radius:6px;margin-left:6px;vertical-align:3px;white-space:nowrap}
.badge.good{background:#0ca30c33;color:#7fe07f}.badge.bad{background:#e6676733;color:#ffb0b0}
.notes{margin-top:12px;font-size:12.5px;color:var(--muted)}
.notes li{margin:3px 0}
.notes details{margin-top:8px}.notes summary{cursor:pointer;color:var(--faint);font-size:12px}.notes details ul{margin:4px 0 0;padding-left:18px}
.chart{position:relative;height:240px}.chart.short{height:170px;margin-bottom:8px}.chart.mid{height:200px}
table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
th,td{padding:7px 6px;border-bottom:1px solid var(--border);text-align:right;text-wrap:balance}th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:500}tr.sel td{background:#76b9001a}
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12.5px;margin-top:6px}
.facts-grid div span{color:var(--muted)}
.export{border-top:1px solid var(--border);padding:12px 14px;flex:none}
.primary{width:100%;background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;padding:11px;font:inherit;font-weight:650;cursor:pointer}
.primary:disabled{opacity:.45;cursor:not-allowed}
.toolbar{left:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:6px 10px;font-size:12.5px;color:var(--muted)}
.toolbar .fs{background:none;border:0;color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 4px;white-space:nowrap}.toolbar .fs:hover{color:var(--accent)}
.toolbar .sep{width:1px;height:18px;background:var(--border)}
.toolbar .seg{margin:0;flex:none}.seg.mini button{padding:4px 12px;font-size:12.5px;text-align:center;white-space:nowrap}
.toolbar .toast{margin:0;font-size:11.5px;color:var(--warn)}
/* 全螢幕瀏覽：兩側面板滑出畫面 */
.nav,.data{transition:transform .28s ease,opacity .28s ease}
/* 面板縮小（桌機 / 平板）：滑出畫面，留下小標籤 */
body:not(.mobile).nav-min .nav{transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none}
body:not(.mobile).data-min .data{transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none}
.tag{display:none;padding:8px 12px;font:inherit;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap}
.tag:hover{border-color:var(--accent)}
#navTag{left:16px;top:84px}
#dataTag{right:16px;top:16px}
#dataTag span{color:var(--muted);margin-left:8px;font-variant-numeric:tabular-nums}
body:not(.mobile).nav-min #navTag,body:not(.mobile).data-min #dataTag{display:block}
.lod{font-size:11px;padding:2px 7px;border-radius:6px;background:#ffffff14;color:var(--muted)}
.tip{padding:8px 10px;font-size:12.5px;pointer-events:none;max-width:260px}
}
#sumNotes b.warn{font-size:inherit;margin:0}
.kpi.wide{grid-column:1/-1}

/* 建議設定、畫質 */
.seg.preset button{border-style:dashed}.seg.preset button.on{border-style:solid}
.menu-btn,.sheet-head{display:none}

/* ---------------- 手機 / 窄螢幕：上方一行儀表板（點開往下看完整儀表板、細節、匯出）＋ 下方設定面板（氣候 / 單元 / 規模） ---------------- */
body.mobile{--navPeek:64px;--dashPeek:58px}
body.mobile .brand,body.mobile .menu-btn,body.mobile #navCollapse{display:none}
body.mobile .toolbar{display:none}                               /* 手機：收起兩側不需要；畫質 / 動態 / 語言在齒輪 */
/* 下：設定面板，三段高度：收合（只露分頁列）/ 一半（預設打開，3D 中心點移到上緣 25%）/ 全高（留上方一行儀表板）。
   用高度而不是位移：每一段內容都能捲到底。拖把手或分頁列跟手改高度，放開吸附到最近的一段（app.js） */
body.mobile .nav{left:0;right:0;top:auto;bottom:0;width:auto;max-height:none;border-radius:14px 14px 0 0;opacity:1;z-index:8;transform:none;
  height:calc(var(--navPeek) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);transition:height .28s ease}
body.mobile.menu-open .nav{height:50vh;height:50dvh}
body.mobile.menu-open.menu-full .nav{height:calc(100vh - var(--dashPeek) - 6px);height:calc(100dvh - var(--dashPeek) - 6px)}
body.mobile .nav.dragging{transition:none}
.nav-grab{display:none}
body.mobile .nav-grab{display:block;flex:none;height:14px;touch-action:none;cursor:grab;position:relative}
body.mobile .nav-grab::after{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#ffffff40}
body.mobile .nav .tabs{touch-action:none;border-bottom-color:transparent}
body.mobile.menu-open .nav .tabs{border-bottom-color:var(--border)}
body.mobile .nav .tabpane{flex:1}
/* 上：一行儀表板。點一下往下展開 */
body.mobile .data{left:0;right:0;top:0;bottom:auto;width:auto;max-height:var(--dashPeek);border-radius:0 0 14px 14px;z-index:7;transition:max-height .28s ease}
body.mobile.sheet-open .data{max-height:min(82vh,720px)}
body.mobile .sheet-head{display:flex;flex-direction:column;flex:none;cursor:pointer;padding:8px 10px 0;touch-action:none}
/* 把手在面板最下緣：收合時在一行儀表板下面，展開時跟著面板底部；中間內容收合時不顯示 */
.data-grab{display:none}
body.mobile .data-grab{display:block;flex:none;height:16px;cursor:pointer;touch-action:none;position:relative}
body.mobile .data-grab::after{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#ffffff40}
body.mobile:not(.sheet-open) .data > :not(.sheet-head):not(.data-grab){display:none}
body.mobile.sheet-open .kstrip{display:none}   /* 展開後儀表板本身就有總量 */
body.mobile .dash-head,body.mobile .more-btn{display:none}
/* 展開後一排分頁：總覽（儀表板 + 匯出）| 摘要 | 能耗 | 比較 | 氣候，一次只顯示一個（.more 攤平成 .data 的子項再排順序） */
body.mobile .dash{padding-top:12px}
body.mobile .tabs .tab{font-size:12.5px;padding:7px 4px}
body.mobile .kpi .v{font-size:19px}
body.mobile .tip{max-width:min(260px,80vw)}
/* 一行儀表板：欄寬依內容、字級隨螢幕縮放，不截斷（長數字在 app.js 用簡寫） */
.kstrip{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:4px}
.kstrip div{text-align:center}
.kstrip b{display:block;font-size:clamp(12.5px,3.7vw,15px);font-weight:650;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.kstrip span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap}

/* 產品切換（nav 分頁下方） */
.product-bar{display:flex;align-items:center;gap:8px;padding:8px 14px 0;font-size:12.5px;color:var(--muted);flex:none;flex-wrap:wrap}
.product-bar .seg{margin:0}
.product-bar .seg.mini button{text-align:center;white-space:nowrap;padding:5px 10px}
.sku{background:#0006;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:5px 8px;font:inherit;font-size:12.5px;max-width:100%}
.gadu-only{display:none}
body.gadu .gadu-only{display:block}

/* 環境動態疊層（fx.js）：只動 transform / opacity，交給合成器 */
.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;contain:strict}
.fx>div{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.fx>div>i{position:absolute;display:block}
/* 熱氣：粒子（不用 backdrop-filter）。每團 5 顆細長柔邊光點，錯開時間往上飄、輕微擺動、拉長後淡出；
   光點是一次畫好的漸層，動畫只改 transform / opacity，由合成器跑，不重算背後畫面 → 高畫質與輕量一樣、移動中也不用藏 */
.fx-heat>i{left:-9px;bottom:0;width:18px;height:46px;border-radius:50%;opacity:0;transform-origin:50% 100%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,255,255,.62),rgba(246,248,250,.28) 45%,rgba(240,244,248,0) 72%);
  animation:fx-rise 3.6s ease-out infinite;animation-delay:calc(var(--d) * 1s)}
.fx-heat>i:nth-child(1){--x:-38px;--s:1}
.fx-heat>i:nth-child(2){--x:-14px;--s:1.25;animation-delay:calc(var(--d) * 1s - .7s)}
.fx-heat>i:nth-child(3){--x:10px;--s:.9;animation-delay:calc(var(--d) * 1s - 1.5s)}
.fx-heat>i:nth-child(4){--x:32px;--s:1.15;animation-delay:calc(var(--d) * 1s - 2.2s)}
.fx-heat>i:nth-child(5){--x:-2px;--s:1.05;animation-delay:calc(var(--d) * 1s - 2.9s)}
@keyframes fx-rise{0%{opacity:0;transform:translate(var(--x),10%) scale(calc(var(--s) * .6),.5)}
  18%{opacity:.75}55%{opacity:.4;transform:translate(calc(var(--x) + 5px),-50%) scale(var(--s),1.1)}
  100%{opacity:0;transform:translate(calc(var(--x) - 3px),-115%) scale(calc(var(--s) * 1.3),1.5)}}
.fx-beacon>i,.fx-status>i,.fx-power>i{left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;mix-blend-mode:screen}
.fx-beacon>i{background:radial-gradient(closest-side,#fff 0 18%,#ff2a1a 30%,rgba(255,40,20,.35) 55%,rgba(255,40,20,0));animation:fx-flash 1.5s steps(1,end) infinite}
@keyframes fx-flash{0%{opacity:1}12%{opacity:.08}100%{opacity:.08}}
.fx-status>i{background:radial-gradient(closest-side,#eaffd0 0 18%,#5fe000 32%,rgba(110,230,0,.3) 58%,rgba(110,230,0,0));animation:fx-breathe 3s ease-in-out infinite;animation-delay:calc(var(--d) * 1s)}
.fx-power>i{background:radial-gradient(closest-side,#e0f2ff 0 18%,#1e90ff 32%,rgba(30,144,255,.3) 58%,rgba(30,144,255,0));animation:fx-breathe 2s ease-in-out infinite;animation-delay:calc(var(--d) * 1s)}
@keyframes fx-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fx>div>i{animation-duration:0s!important}}

/* ---------------- IA 改版：單元分頁的產品列與自動散熱；右側儀表板 + 細節收合 ---------------- */
.tabpane .product-bar{padding:0 0 4px}
.reco{background:#76b90012;border:1px solid #76b90040;border-radius:9px;padding:9px 11px;font-size:12.5px;color:var(--text);line-height:1.5;margin:4px 0 12px}
.reco b{font-weight:650}.reco small{display:block;color:var(--faint);font-size:11.5px;margin-top:4px}
.dash-head{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 0 14px;color:var(--muted);font-size:12px;flex:none}
.dash{padding:4px 14px 2px;flex:none}
.dash-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dash-top b{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.dash-top b small{font-size:14px;font-weight:600;color:var(--muted);margin-left:3px}
.dash-top span{color:var(--muted);font-size:12px}
.dash-t{margin-top:8px}
.dash-t th,.dash-t td{padding:5px 4px;white-space:nowrap}
.dash-t thead th{font-size:11px;color:var(--faint);font-weight:500;border-bottom:1px solid var(--border)}
.dash-t tbody th{text-align:left;color:var(--muted);font-weight:500}
.dash-t td{font-size:14px;font-weight:600;color:var(--text)}
.dash-t td.pe{color:var(--muted);font-weight:500;font-size:13px}
.dash-t tr:last-child th,.dash-t tr:last-child td{border-bottom:0}
.dash-t small{font-size:11px;color:var(--faint);font-weight:500;margin-left:2px}
.dl{display:inline-block;font-style:normal;font-size:10.5px;font-weight:600;margin-left:5px;padding:0 4px;border-radius:4px;background:#ffffff12;color:var(--muted);vertical-align:1px;transition:opacity .6s}
.dl.good{color:#7fe07f;background:#0ca30c26}.dl.bad{color:#ffc56b;background:#fab21922}
.dl.fade{opacity:0}
.dash-status{padding:2px 14px 8px;font-size:11.5px;color:var(--faint);flex:none}
.dash-status .warn{display:block;margin:4px 0 0;font-size:11.5px}
.more-btn{flex:none;margin:0 14px 10px;background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);font:inherit;font-size:12.5px;padding:6px;cursor:pointer}
.more-btn:hover{color:var(--text);border-color:#ffffff40}
.more-btn::after{content:" ▾"}body.more-open .more-btn::after{content:" ▴"}
.more{display:none;flex-direction:column;min-height:0;flex:1;border-top:1px solid var(--border)}

body.more-open .more{display:flex}
.more .tabpane.active{flex:1;min-height:0}

/* 造價拆解（摘要） */
h4.sub{margin:14px 0 4px;font-size:12.5px;font-weight:600;color:var(--muted)}
table.cx td{padding:5px 4px;white-space:nowrap}table.cx td:first-child{white-space:normal}table.cx td:nth-child(3){color:var(--muted);width:60px}
table.cx small{font-size:11px;color:var(--faint);margin-left:1px}
table.cx tr.tot td{font-weight:650;border-bottom:0}

/* 官方資料連結 */
a.ext{color:var(--accent);text-decoration:none;font-size:12.5px;white-space:nowrap}a.ext:hover{text-decoration:underline}
.product-bar a.ext{margin-left:auto}.product-bar a.ext::after{content:" ↗"}
.facts dd a.ext{display:inline-block;margin:1px 0}


/* 方案：第二 CTA、方案標籤、比較表 */
.cta-row{display:flex;gap:8px}.cta-row .primary{flex:1.4}
.secondary{flex:1;background:none;border:1px solid var(--accent);color:var(--accent);border-radius:9px;padding:10px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.secondary:disabled{opacity:.45;cursor:not-allowed;border-color:var(--border);color:var(--muted)}
.scn-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:4px;background:#ffffff0d;border:1px solid var(--border);border-radius:14px;padding:3px 4px 3px 9px;font-size:12px;color:var(--muted);cursor:pointer}
.chip b{color:var(--text);font-weight:600}.chip:hover{border-color:#ffffff40}
.chip .x{background:none;border:0;color:var(--faint);font-size:14px;line-height:1;padding:0 4px;cursor:pointer}.chip .x:hover{color:var(--bad)}
table.scn th,table.scn td{padding:5px 3px;font-size:12.5px}
table.scn thead th{vertical-align:bottom;text-align:right}
.scn-h{cursor:pointer}.scn-h b{display:block;color:var(--text);font-size:13px}.scn-h span{display:block;color:var(--muted);font-weight:400;font-size:11px;line-height:1.3}
.scn-h:hover b{color:var(--accent)}
table.scn tbody th{text-align:left;color:var(--muted);font-weight:500;white-space:nowrap}
table.scn td{font-weight:600}table.scn td small{font-size:10.5px;color:var(--faint);font-weight:500;margin-left:1px}
table.scn tr.sec th{color:var(--faint);font-size:11px;font-weight:500;padding-top:10px}
table.scn td.best{color:#7fe07f}
#data [data-pane="cmp"] .cta-row{margin-top:10px}

/* 齒輪設定（畫質 / 動態 / 語言） */
.gear{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:0 6px;line-height:1}
.gear:hover,.gear.on{color:var(--accent)}
.prefs{left:16px;top:132px;z-index:20;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted);min-width:220px}
.prefs[hidden]{display:none}
.prefs .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.prefs .seg{margin:0}
.prefs .copy{margin:4px 0 0;padding-top:8px;border-top:1px solid var(--border);font-size:11px;line-height:1.5;color:var(--faint);max-width:240px}   /* 版權（設定面板最下方） */
body.mobile .prefs{left:10px;right:10px;top:auto;bottom:calc(var(--navPeek) + 10px + env(safe-area-inset-bottom,0px))}
body.mobile.menu-open .prefs{bottom:calc(50vh + 10px)}body.mobile.menu-open.menu-full .prefs{bottom:auto;top:calc(var(--dashPeek) + 70px)}
.toast-float{left:50%;top:16px;transform:translateX(-50%);z-index:30;padding:8px 14px;font-size:12.5px;color:var(--warn);white-space:nowrap}
.toast-float[hidden]{display:none}
body.mobile .toast-float{top:calc(var(--dashPeek) + 8px)}

/* 桌機右側：展開細節時佔滿高度並加寬，細節分頁吃掉剩下的空間 */
body:not(.mobile).more-open .data{top:16px;bottom:16px;max-height:none;width:clamp(400px,34vw,500px)}
body:not(.mobile).more-open .chart.mid{height:240px}
body:not(.mobile).more-open .chart.short{height:200px}

/* ---------------- 右側：一行總覽 + 分頁（桌機手機同結構）、加寬模式、購物車與全畫面比較表 ---------------- */
.data{top:16px;bottom:16px;max-height:none}
.sheet-head{display:flex;align-items:center;gap:8px;flex:none;padding:10px 8px 6px 14px}
.sheet-head .kstrip{flex:1;min-width:0}
.head-btns{display:flex;align-items:center;flex:none}
.wide{background:none;border:1px solid var(--border);border-radius:7px;color:var(--muted);font:inherit;font-size:12px;cursor:pointer;padding:3px 9px;white-space:nowrap}.wide:hover{color:var(--accent);border-color:var(--accent)}
body.data-wide .wide{display:none}
body.dtab-dash:not(.mobile) .kstrip{display:none}                   /* 總覽分頁本身就有總量 */
#data .tabpane.active{flex:1;min-height:0;overflow:auto}
.dash{padding:14px 0 2px}.dash-status{padding:2px 0 8px}
body:not(.mobile).data-wide .data{left:max(16px,7vw);width:auto}
body:not(.mobile).data-wide .kpis{grid-template-columns:repeat(4,1fr)}
body:not(.mobile).data-wide .chart.mid{height:320px}body:not(.mobile).data-wide .chart.short{height:240px}
body:not(.mobile).data-wide .dash{max-width:720px}
body.mobile .head-btns{display:none}
.cart{display:flex;align-items:center;gap:8px;margin-top:8px}.cart .scn-chips{flex:1;margin:0}
.cmp-open{flex:none;background:var(--accent);color:var(--accent-ink);border:0;border-radius:16px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.cmp-open b{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:#0003;font-size:11.5px}
.modal{position:fixed;inset:0;z-index:40;background:#000b;display:grid;place-items:center}
.modal[hidden]{display:none}
.modal-box{width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 20px 60px #000a}
.modal-box header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.modal-box h3{margin:0;flex:1;font-size:15px}
.modal-box header .secondary{flex:none;padding:6px 12px}
.modal-box .close{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:0 4px}.modal-box .close:hover{color:var(--text)}
.modal-body{overflow:auto;padding:8px 16px 16px}
.modal table.scn th,.modal table.scn td{padding:7px 10px;font-size:13.5px}
.modal table.scn thead th{min-width:150px}
body.mobile .modal-box{width:100vw;height:100%;max-height:none;border-radius:0}
body.mobile .modal table.scn th,body.mobile .modal table.scn td{padding:6px 4px;font-size:12.5px}
body.mobile .modal table.scn thead th{min-width:0}

/* 右側收合 / 加寬按鈕放在面板左側（和左側面板的 ‹ 在右側對稱） */
.head-btns{order:-1}#dataCollapse{order:-1}
.sheet-head{padding-left:6px}
/* 方案標籤：單行，太長用 … */
.chip{max-width:100%;min-width:0;white-space:nowrap}.chip .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cart .scn-chips{min-width:0}

/* 收合按鈕：凸出面板邊緣的小把手（左面板在右緣、右面板在左緣，對稱）；桌機 */
body:not(.mobile) .nav,body:not(.mobile) .data{overflow:visible}
body:not(.mobile) #navCollapse,body:not(.mobile) #dataCollapse{position:absolute;top:14px;width:22px;height:42px;padding:0;z-index:3;display:grid;place-items:center;
  background:var(--panel-solid);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #0006;color:var(--muted);font-size:16px}
body:not(.mobile) #navCollapse{right:-12px}body:not(.mobile) #dataCollapse{left:-12px}
body:not(.mobile) #navCollapse:hover,body:not(.mobile) #dataCollapse:hover{color:var(--accent);border-color:var(--accent)}
.export .hint:empty{display:none}
.chip{max-width:46%}

/* 比較大表：往下捲時方案列（表頭）固定在頂端 */
.modal table.scn{border-collapse:separate;border-spacing:0}
.modal table.scn thead th{position:sticky;top:0;z-index:2;background:var(--panel-solid);box-shadow:0 1px 0 var(--border)}
.modal-body{padding-top:0}
.modal-body{flex:1;min-height:0}   /* 讓內容區可以捲動（彈性欄的子項目預設不會縮） */
body.mobile .modal-box{height:100vh;height:100dvh}   /* 明確高度：放在 grid 置中容器裡時 100% 會等於內容高度，內容區就不會捲動 */

/* 比較表 ⓘ：點了在該列下方展開計算方式 */
.info{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;padding:0;border:1px solid var(--faint);border-radius:50%;background:none;color:var(--muted);
  font:italic 600 10.5px/1 Georgia,serif;cursor:pointer;vertical-align:1px}
.info:hover,.info.on{border-color:var(--accent);color:var(--accent)}
table.scn tr.ex td{text-align:left;font-weight:400;color:var(--muted);font-size:12.5px;line-height:1.55;background:#76b9000d;padding:8px 10px;white-space:normal}
body:not(.mobile) .sheet-head{padding-left:20px}   /* 左緣收起把手凸出 12 px，不要壓到「全畫面檢視」 */
body:not(.mobile) .kstrip b{font-size:13.5px}body:not(.mobile) .kstrip{gap:10px}

/* 桌機：「全畫面檢視」自己一行，總覽數字在下一行 */
body:not(.mobile) .sheet-head{flex-wrap:wrap;row-gap:8px}
body:not(.mobile) .head-btns{flex-basis:100%}
body:not(.mobile) .sheet-head .kstrip{flex-basis:100%}

/* 重設視角：桌機在左下工具列；手機為 3D 右下的圓形浮動按鈕（設定面板上方） */
.home-fab{display:none}
body.mobile .home-fab{display:grid;place-items:center;right:12px;bottom:calc(var(--navPeek) + 12px + env(safe-area-inset-bottom,0px));width:44px;height:44px;padding:0;
  border-radius:50%;font-size:20px;color:var(--text);cursor:pointer;z-index:6;transition:bottom .28s ease}
body.mobile.menu-open .home-fab{bottom:calc(50vh + 12px)}body.mobile.menu-open.menu-full .home-fab{display:none}
body.mobile.sheet-open .home-fab{display:none}

/* 櫃門開關：浮在 3D 上（桌機下方置中；手機左下，和右下的 ⌂ 對稱） */
.door-fab{left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;font-size:12.5px;color:var(--muted);z-index:6}
.door-fab[hidden]{display:none}.door-fab .seg{margin:0}
body.mobile .door-fab{left:12px;transform:none;bottom:calc(var(--navPeek) + 12px + env(safe-area-inset-bottom,0px));transition:bottom .28s ease}
body.mobile.menu-open .door-fab{bottom:calc(50vh + 12px)}body.mobile.menu-open.menu-full .door-fab,body.mobile.sheet-open .door-fab{display:none}
body:not(.mobile).data-wide .data{background:rgba(23,24,26,.97)}   /* 全畫面：面板幾乎不透明，文字對比更好 */
/* 手機比較表：三個方案要同時看得到（390 px）。固定表格版面：列名欄 28% 可換行，方案欄平分剩下的寬度，長字換行不撐寬 */
body.mobile .modal table.scn{width:100%;table-layout:fixed}
body.mobile .modal table.scn thead th:first-child{width:28%}
body.mobile .modal table.scn tbody th{white-space:normal;font-size:12px;line-height:1.3}
body.mobile .modal table.scn td,body.mobile .modal table.scn thead th{overflow-wrap:anywhere}
body.mobile .modal table.scn thead th span{font-size:11px}
body.mobile .modal-body{padding-left:10px;padding-right:10px}