/* ═══════════════════════════════════════════════════════════════════
   terminal.css — 交易終端 + 頂部分頁列 版面(規格 003-CC1 Step 2~6)
   共用元件(watch-row / pos-card / ticket / depth …)沿用 app.css。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ Step 2 外殼: 頂部分頁列 ═══ */
.term-app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{display:flex;align-items:center;gap:18px;padding:0 18px;height:52px;flex-shrink:0;
  background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.tb-brand{font-size:18px;font-weight:800;color:var(--accent);letter-spacing:.3px;white-space:nowrap}
.tb-tabs{display:flex;gap:2px;height:100%}
.tb-tabs button{position:relative;background:none;border:none;color:var(--text-muted);font-size:14px;
  padding:0 15px;height:100%;font-weight:500;border-bottom:2px solid transparent;transition:.12s}
.tb-tabs button:hover{color:var(--text)}
.tb-tabs button.active{color:var(--text);font-weight:700;border-bottom-color:var(--accent)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb-clock{font-family:"JetBrains Mono",Consolas,monospace;font-size:13px;color:var(--text-muted);
  font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
#theme-btn{width:auto;height:30px;padding:0 11px;gap:6px;font-size:12px;color:var(--text-muted)}
#theme-btn .ic{margin:0}
.term-views{flex:1;min-height:0;display:flex;position:relative}
.topbar .global-search{width:220px}

/* ═══ Step 3 交易終端整體 ═══ */
.term-view{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* 3a 指數列 */
.idx-strip{display:flex;align-items:center;gap:0;height:34px;flex-shrink:0;overflow-x:auto;
  background:var(--bg-deep);border-bottom:1px solid var(--border);padding:0 4px;white-space:nowrap}
.idx-cell{display:inline-flex;align-items:baseline;gap:7px;padding:0 14px;height:100%;cursor:pointer;
  border-right:1px solid var(--border);font-size:12.5px}
.idx-cell:hover{background:var(--panel-2)}
.idx-cell .ix-name{color:var(--text-muted)}
.idx-cell .ix-price{font-weight:700;font-variant-numeric:tabular-nums}
.idx-cell .ix-chg{font-size:11.5px;font-variant-numeric:tabular-nums}
.idx-closed{margin-left:auto;padding:0 12px;color:var(--text-faint);font-size:11px;letter-spacing:1px}

/* 主體三欄 */
.term-body{flex:1;display:grid;grid-template-columns:240px minmax(0,1fr) 320px;min-height:0;overflow:hidden}
#view-terminal.panel-off .term-body{grid-template-columns:240px minmax(0,1fr) 0}

/* 3b 左欄報價 */
.term-watch-col{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--panel)}
.tw-search{position:relative;padding:8px}
.tw-search input{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;
  padding:7px 11px;font-size:12.5px}
.tw-dd{position:absolute;top:100%;left:8px;right:8px;background:var(--panel);border:1px solid var(--border-strong);
  border-radius:8px;box-shadow:var(--shadow-lg);z-index:30;max-height:280px;overflow-y:auto}
.tw-dd-row{padding:8px 11px;font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--border)}
.tw-dd-row:last-child{border-bottom:none}
.tw-dd-row:hover{background:var(--bg-surface)}
.tw-dd-row .tw-dd-mk{color:var(--text-faint);font-size:11px;margin-left:6px}
.tw-head{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:11.5px;
  color:var(--text-muted);letter-spacing:.5px;border-bottom:1px solid var(--border)}
.tw-note{font-size:9.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:3px;padding:1px 5px}
.term-watch{flex:1;overflow-y:auto;padding:6px}

/* 3c 選中商品列 */
.term-main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--panel)}
.term-symbar{display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ts-left{display:flex;align-items:baseline;gap:12px;min-width:0}
.ts-name{font-size:16px;font-weight:700;white-space:nowrap}
.ts-name .ts-code{font-size:12px;color:var(--text-faint);font-weight:500}
.ts-price{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.ts-chg{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ts-left .ohlc-readout{margin-left:4px}
.ts-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.ind-bar{display:flex;gap:3px}
.ind-toggle{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted);
  border-radius:5px;padding:4px 9px;font-size:12px;transition:.12s}
.ind-toggle:hover{color:var(--text)}
.ind-toggle.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);font-weight:600}
.wip-dot{color:var(--amber);font-weight:800}
.panel-toggle{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-muted);
  border-radius:5px;width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.panel-toggle:hover{color:var(--accent);border-color:var(--accent)}

/* 3d 主圖 */
.term-chart{flex:1;min-height:140px}
.sub-shell{height:96px;flex-shrink:0;border-top:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;color:var(--text-faint);font-size:12px;background:var(--bg-deep)}

/* 3e 下方七 tab */
.term-lower{height:250px;flex-shrink:0;display:flex;flex-direction:column;border-top:1px solid var(--border);background:var(--bg-deep)}
.lower-tabs{display:flex;gap:1px;flex-shrink:0;overflow-x:auto;border-bottom:1px solid var(--border);background:var(--panel)}
.lower-tabs button{background:none;border:none;color:var(--text-muted);font-size:12.5px;padding:8px 14px;
  border-bottom:2px solid transparent;white-space:nowrap}
.lower-tabs button:hover{color:var(--text)}
.lower-tabs button.active{color:var(--text);font-weight:700;border-bottom-color:var(--accent);background:var(--bg-deep)}
.lower-body{flex:1;overflow:auto;min-height:0}
.lower-empty,.lower-shell{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:12.5px}

/* 五檔委託簿 + 分時明細 */
.depth-pane{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 14px;min-height:0}
.ob-col,.tk-col{min-width:0}
.ob-head{display:grid;grid-template-columns:52px 62px 1fr;gap:6px;font-size:10.5px;color:var(--text-faint);padding:2px 0}
.ob-head.bot{margin-top:2px}
.ob-row{display:grid;grid-template-columns:52px 62px 1fr;gap:6px;align-items:center;height:21px;font-size:12px;font-variant-numeric:tabular-nums}
.ob-qty{color:var(--text-muted);text-align:right}
.ob-price{font-weight:600}
.ob-bar{height:12px;background:var(--bg-surface);border-radius:2px;overflow:hidden}
.ob-fill{height:100%;border-radius:2px}
.ob-fill.ask{background:var(--down-bg)}
.ob-fill.bid{background:var(--up-bg)}
.ob-mid{text-align:center;font-size:12px;color:var(--text-muted);padding:5px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);margin:3px 0}
.ob-mid b{color:var(--text);font-size:14px}
.tk-head{font-size:11.5px;color:var(--text-muted);margin-bottom:4px}
.tk-time-label,.tk-row{display:grid;grid-template-columns:1fr 1fr 44px;gap:6px;font-size:12px;font-variant-numeric:tabular-nums}
.tk-time-label{font-size:10.5px;color:var(--text-faint);padding-bottom:3px;border-bottom:1px solid var(--border)}
.tk-row{height:20px;align-items:center}
.tk-time{color:var(--text-faint)}
.tk-vol{text-align:right;color:var(--text-muted)}

/* 詳細報價 */
.term-quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);padding:1px}
.qg-cell{display:flex;justify-content:space-between;align-items:center;background:var(--panel);padding:8px 14px;font-size:12.5px}
.qg-k{color:var(--text-muted)}
.qg-v{font-weight:600;font-variant-numeric:tabular-nums}

/* 商品資訊 */
.info-pane{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;padding:12px 14px}
.spec-card{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px}
.spec-title{font-size:13px;font-weight:700;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.spec-row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.spec-k{color:var(--text-muted)}
.spec-v{font-weight:600;font-variant-numeric:tabular-nums}
.spec-note{grid-column:1/-1;font-size:11.5px;color:var(--text-faint);background:var(--bg-deep);border-radius:6px;padding:8px 12px}

/* 3f 右側下單面板 */
.term-order{border-left:1px solid var(--border);background:var(--bg);overflow-y:auto;display:flex;flex-direction:column;
  padding:12px;gap:10px;min-height:0}
#view-terminal.panel-off .term-order{display:none}
.term-order .panel-tabs{margin-top:2px}

/* 3g 底部狀態列 */
.term-statusbar{display:flex;align-items:center;gap:20px;height:30px;flex-shrink:0;padding:0 16px;
  background:var(--panel);border-top:1px solid var(--border);font-size:12px;overflow-x:auto;white-space:nowrap}
.sb-item{color:var(--text-muted)}
.sb-item b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.sb-sep{color:var(--text-faint)}
.sb-spacer{flex:1}

/* ═══ 設定(空殼) ═══ */
.settings-wrap{max-width:640px;margin:0 auto;padding:32px 24px}
.settings-wrap h2{font-size:20px;margin-bottom:4px}
.settings-wrap .sub{color:var(--text-muted);font-size:13px;margin-bottom:22px}
.set-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.set-card .set-k{font-size:14px;font-weight:600}
.set-card .set-d{font-size:12px;color:var(--text-muted);margin-top:2px}
.set-theme-btn{background:var(--bg-surface);border:1px solid var(--border-strong);color:var(--text);
  border-radius:6px;padding:8px 16px;display:inline-flex;align-items:center;gap:7px;font-size:13px}
.set-theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.set-wip{color:var(--text-faint);font-size:12px}

/* 響應式: 窄螢幕收掉左欄 */
@media (max-width:1080px){
  .term-body{grid-template-columns:0 minmax(0,1fr) 300px}
  .term-watch-col{display:none}
}

/* ═══ 共用 Autocomplete(003-CC2 Step 1) ═══ */
.ac-dd{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--panel);
  border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);z-index:20;
  max-height:300px;overflow-y:auto}
.ac-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 11px;
  font-size:12.5px;cursor:pointer;border-bottom:1px solid var(--border)}
.ac-row:last-child{border-bottom:none}
.ac-row:hover{background:var(--panel-2)}
.ac-code{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.ac-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-ex{color:var(--text-faint);font-size:11px}
.ac-empty{padding:10px 12px;color:var(--text-faint);font-size:12.5px}

/* ═══ 設定頁(003-CC2 Step 2) ═══ */
.cfg-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.cfg-title{font-size:14px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0}
.cfg-row.wrap{flex-wrap:wrap;justify-content:flex-start}
.cfg-lbl{font-size:12.5px;color:var(--text-muted)}
.cfg-hint{font-size:11.5px;color:var(--text-faint);margin-top:8px}
.cfg-hint.inline{margin:0 0 0 8px}
.cfg-seg{display:inline-flex;gap:2px;background:var(--bg-surface);border-radius:8px;padding:3px}
.cfg-seg button{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid transparent;
  color:var(--text-muted);border-radius:6px;padding:6px 14px;font-size:13px}
.cfg-seg button.active{background:var(--panel);border-color:var(--accent);color:var(--accent);font-weight:600}
.cfg-select,.cfg-input{background:var(--bg-surface);border:1px solid var(--border);color:var(--text);
  border-radius:6px;padding:7px 11px;font-size:13px}
.cfg-select{min-width:150px}
.cfg-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cfg-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-muted)}
.cfg-field input{background:var(--bg-surface);border:1px solid var(--border);color:var(--text);border-radius:6px;
  padding:8px 11px;font-size:14px;font-variant-numeric:tabular-nums}
.cfg-search{position:relative;margin-bottom:10px}
.cfg-search input{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;
  padding:8px 12px;font-size:13px}
.cfg-wl-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cfg-wl-row{display:grid;grid-template-columns:70px 1fr auto auto;gap:10px;align-items:center;padding:8px 12px;
  background:var(--bg-surface);font-size:13px}
.cfg-wl-code{font-weight:700;font-variant-numeric:tabular-nums}
.cfg-wl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-wl-mk{font-size:11px;color:var(--text-faint)}
.cfg-wl-acts{display:inline-flex;gap:4px}
.cfg-wl-acts button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--border);border-radius:5px;color:var(--text-muted);font-size:13px}
.cfg-wl-acts button:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.cfg-wl-acts button:disabled{opacity:.35;cursor:default}
.cfg-wl-acts button.del:hover{color:var(--up);border-color:var(--up)}
.cfg-btn{background:var(--bg-surface);border:1px solid var(--border-strong);color:var(--text);border-radius:6px;
  padding:8px 16px;font-size:13px}
.cfg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cfg-btn:disabled{opacity:.4;cursor:default}
.cfg-btn.danger:hover{border-color:var(--up);color:var(--up)}
.cfg-input{flex:1;min-width:130px}
.cfg-subcard{margin-top:12px;padding:12px 14px;background:var(--bg-deep);border-radius:8px}
.cfg-subtitle{font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:8px}
.cfg-ind{display:flex;align-items:flex-start;gap:16px;padding:9px 0;border-bottom:1px solid var(--border)}
.cfg-ind:last-child{border-bottom:none}
.cfg-ind-name{width:140px;flex-shrink:0;font-size:13px;font-weight:600;padding-top:5px}
.cfg-ind-name .wip{font-size:10px;color:var(--amber);border:1px solid var(--amber);border-radius:3px;
  padding:0 4px;margin-left:4px;font-weight:500}
.cfg-ind-fields{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1}
.cfg-ma,.cfg-ind-fields input{width:64px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text);
  border-radius:5px;padding:6px 8px;font-size:13px;font-variant-numeric:tabular-nums}
.cfg-inline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted)}