/* ==========================================================================
   terminal-shell.css — 2026-07-27
   全站統一版型（基準：成交結算頁 OrderHistoryPage）。
   訂單明細 / 績效分析 / 資金曲線 三頁原本是「置中留白 + 大標題 + 膠囊分頁」的舊版型，
   跟其餘 14 頁的終端機外框完全不同。這支把那三頁的外框、字體、色票、密度統一過來：
     nav 70 → breadcrumb 26 → modebar 40 →（summary / filterbar）→ main(1fr 捲動) → statusbar 26
   ⚠ 這是全站唯一版型基準。新頁面一律沿用這支，不要再做置中卡片式頁面。
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Chivo+Mono:wght@300;400;500;600;700&display=swap');

html[data-theme],:root{
  --bg:#08080a;--bg-panel:#0c0c0f;--bg-panel-2:#0f0f13;--bg-hover:#141419;
  --line:rgba(255,255,255,.065);--line-2:rgba(255,255,255,.10);
  --tx:#e7e7ea;--tx-dim:#7a7a83;--tx-faint:#4b4b53;
  --or:#ff7a1a;--gr:#3ad17a;--rd:#f2606d;
  --mono:'Chivo Mono',ui-monospace,monospace;--pix:'Space Mono',ui-monospace,monospace;
  /* 設計系統 token → 終端機視覺（三頁的 inline style 全走 token，換這裡就整頁改頭換面） */
  --bg-page:var(--bg);--bg-surface:var(--bg-panel);--bg-surface-raised:var(--bg-panel);
  --bg-surface-sunken:var(--bg-hover);--bg-inset:var(--bg-panel-2);--bg-overlay-scrim:rgba(0,0,0,.55);
  --border-subtle:var(--line);--border-default:var(--line-2);--border-strong:rgba(255,255,255,.16);
  --text-primary:var(--tx);--text-secondary:var(--tx-dim);--text-tertiary:var(--tx-faint);
  --accent:var(--or);--accent-300:#ffa25c;--accent-subtle:rgba(255,122,26,.12);
  --success:var(--gr);--danger:var(--rd);--success-text:var(--gr);--danger-text:var(--rd);
  --font-display:var(--pix);--font-ui:var(--mono);--font-mono:var(--pix);
  --text-caption:400 12px/1.45 var(--pix);
  --text-label-sm:400 12.4px/1.35 var(--pix);--text-label-md:500 13.8px/1.35 var(--mono);
  --text-body-sm:400 13.2px/1.6 var(--mono);--text-body-md:400 13.8px/1.65 var(--mono);
  --text-heading-sm:500 15px/1.35 var(--mono);--text-heading-md:500 16.5px/1.35 var(--mono);
  --text-data-sm:400 14.5px/1.35 var(--pix);--text-data-md:400 17.5px/1.25 var(--pix);--text-data-lg:400 23px/1.15 var(--pix);
  --radius-sm:2px;--radius-md:3px;--radius-lg:4px;--radius-full:3px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--mono);font-size:13.8px;overflow:hidden auto;-webkit-font-smoothing:antialiased}
/* 2026-07-29：桌面版本來完全鎖死 body 的捲動（兩軸都 hidden），設計是「只有 .main 這層捲」。
   但某些預覽/編輯環境會在 body>div:first-of-type 外面多包一層容器，讓 .main 的 flex 高度算不出來、
   永遠沒有自己的內部溢位可捲——這種情況下滑鼠滾輪完全卡死、無路可退。
   改成只鎖 X 軸、放行 Y 軸當保險：.main 撐得起來時它自己捲；撐不起來時交給 body 兜底，永遠有路可捲。 */
/* support.js 把 <x-dc> 換成一個普通 div —— 這一層就是 shell（覆蓋 app-chrome.css 的置中留白） */
body>div:first-of-type{max-width:none;margin:0;padding:0;--z:calc(.84 * var(--text-scale,1));height:calc(100vh / var(--z));zoom:var(--z);display:flex;flex-direction:column}
body>div:first-of-type>*{min-width:0;flex:0 0 auto}

.nav{height:70px;margin:0;padding:0 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-right{margin-left:auto;font-family:var(--pix);font-size:13.8px;color:var(--tx-dim)}

.breadcrumb{display:flex;align-items:center;gap:8px;height:26px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--bg-panel);font-family:var(--pix);font-size:12px;letter-spacing:1.5px;color:var(--tx-faint)}
.breadcrumb .rt{margin-left:auto;letter-spacing:1px;color:var(--tx-dim)}

.modebar{display:flex;align-items:center;gap:1px;height:40px;border-bottom:1px solid var(--line);background:var(--bg-panel-2);overflow-x:auto;scrollbar-width:none}
.modebar::-webkit-scrollbar{display:none;height:0}
.modebtn{display:flex;align-items:center;height:100%;padding:0 18px;font-family:var(--pix);font-size:14.5px;letter-spacing:1px;color:var(--tx-dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.modebtn:hover{color:var(--tx)}
.modebtn.on{color:var(--or);border-color:var(--or)}
.modehint{margin-left:16px;font-size:13px;color:var(--tx-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.summary{display:flex;border-bottom:1px solid var(--line-2)}
.sitem{flex:1;min-width:0;padding:13px 24px;border-right:1px solid var(--line)}
.sitem:last-child{border-right:none}
.sitem .l{display:block;font-family:var(--pix);font-size:12px;letter-spacing:.6px;color:var(--tx-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .v{display:block;margin-top:3px;font-family:var(--pix);font-size:19px;font-variant-numeric:tabular-nums}
.sitem .v.win{color:var(--gr)}
.sitem .v.loss{color:var(--rd)}
.sitem .v.dim{color:var(--tx-dim)}

.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--bg-panel)}
.filterbar .rt{margin-left:auto;font-family:var(--pix);font-size:12.4px;color:var(--tx-dim);white-space:nowrap}
.filterbar .clr{font-family:var(--pix);font-size:12.4px;color:var(--tx-dim);cursor:pointer}
.filterbar .clr:hover{color:var(--or)}

.main{flex:1 1 auto;min-height:0;overflow-y:auto}
/* 2026-07-29：拿掉 overscroll-behavior:contain —— 內容較長時 .main 有時沒有真的產生內部溢位（例如
   資產拆解表 96 列），滑鼠滾輪就會被 contain 卡住、既不捲 .main 也不往上層文件捲，畫面看起來被切掉。
   移除後：.main 真的能捲就捲自己；捲不動就自然把滾輪事件交給文件層，不會卡死。 */
.mpad{padding:20px 24px 40px}
.sec{padding:22px 0 26px;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:none}
.sech{font-family:var(--mono);font-size:16.5px;color:var(--tx);margin-bottom:16px}
.tgrid-head{position:sticky;top:0;z-index:3;background:var(--bg-panel)}

.statusbar{display:flex;align-items:center;gap:20px;height:26px;padding:0 16px;border-top:1px solid var(--line);font-family:var(--pix);font-size:12.4px;letter-spacing:1px;color:var(--tx-dim)}
.statusbar .r{margin-left:auto}
.statusbar .sep{width:1px;height:12px;background:var(--line-2)}
.pulse{width:5px;height:5px;border-radius:50%;background:var(--gr);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:0}

/* ≤980px：跟 responsive.css 對 .app 做的解鎖一致 —— 手機/平板放掉單螢幕 zoom 鎖，回到自然流 */
@media(max-width:980px){
  body{overflow:visible}
  body>div:first-of-type{--z:1;zoom:1;height:auto;min-height:100dvh}
  body>div:first-of-type>*{width:100%}
  .main{overflow-y:visible;flex:0 0 auto}
  /* responsive.css 用 !important 把 .filterbar 壓成直排（那是給舊 fgroup 版面用的），
     終端機版型的篩選列是橫排換行，所以在這裡覆蓋回來（同權重、載入在後） */
  .filterbar{flex-direction:row!important;align-items:center!important;flex-wrap:wrap!important;row-gap:8px}
  .filterbar .clr{margin-left:0!important}
  .sitem .l{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .filterbar .clr{margin-left:0!important;align-self:flex-start}
  .filterbar .rt{margin-left:0}
}
@media(max-width:900px){
  .nav{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px 14px}
  .navtabs{order:3;width:100%}
  .summary{display:grid;grid-template-columns:repeat(3,1fr)}
  .sitem{padding:11px 12px;border-bottom:1px solid var(--line)}
  .sitem .l{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .modebtn{padding:0 13px;font-size:13px}
  .modehint{display:none}
  .mpad{padding:14px 12px 32px}
}