/* 台指期戰情看板（開盤預估／籌碼／大額交易人／選擇權／週末盤面／融資／技術面）的樣式。
   原本內嵌在 static/futures.html；2026-07-31 戰情看板併進行情工作台後獨立成檔，
   由 chart.html 載入（只有台指期分頁會用到這些 class）。 */
.sec-head { display:flex; align-items:baseline; gap:11px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.sec-head .idx { font-family:ui-monospace,monospace; font-size:.72rem; color:var(--gold); font-weight:700; }
.sec-head h2 { font-size:1.02rem; font-weight:700; }
.sec-head .stamp { margin-left:auto; font-size:.7rem; color:var(--muted2); }
/* forecast */
.fc-top { display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px; }
.fc-gap .lab { font-size:.72rem; color:var(--muted); letter-spacing:.04em; }
.fc-gap .val { font-size:2.4rem; font-weight:800; line-height:1; }
.fc-note { font-size:.74rem; color:var(--muted); max-width:44ch; }
.paths { display:grid; gap:10px; }
.path-row { display:grid; grid-template-columns:96px 1fr 54px; gap:12px; align-items:center; font-size:.82rem; }
.path-row .k { color:var(--text2); }
.track { position:relative; height:9px; border-radius:6px; background:var(--panel2); overflow:hidden; }
.track > i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; }
.path-row .p { text-align:right; font-weight:700; }
/* 台指期日盤/夜盤近月報價（section ① 頂部強調） */
/* 命中率回測 */
.acc { margin-top:18px; border-top:1px solid var(--border); padding-top:14px; }
.acc-head { font-size:.82rem; font-weight:700; color:var(--textstrong); margin-bottom:10px; }
.acc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
@media (max-width:560px){ .acc-stats { grid-template-columns:1fr; } }
.acc-stat { background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:11px 13px; }
.acc-stat .n { font-size:1.4rem; font-weight:800; }
.acc-stat .t { font-size:.7rem; color:var(--muted); margin-top:2px; }
.acc-table { width:100%; border-collapse:collapse; font-size:.74rem; }
.acc-table th,.acc-table td { text-align:right; padding:5px 7px; border-bottom:1px solid var(--border); white-space:nowrap; }
.acc-table th { color:var(--muted); font-weight:600; }
.acc-table td:first-child,.acc-table th:first-child { text-align:left; }
.hit { color:var(--neg); } .miss { color:var(--pos); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
.tile { background:var(--panel2); border:1px solid var(--border); border-radius:11px; padding:12px 13px; }
.tile .nm { font-size:.78rem; color:var(--text2); display:flex; align-items:center; justify-content:space-between; gap:6px; }
.tile .pr { font-size:1.32rem; font-weight:750; margin:5px 0 1px; }
.tile .cg { font-size:.84rem; font-weight:700; }
.tile .st { font-size:.62rem; padding:1px 6px; border-radius:999px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.st.live { color:var(--neg); border-color:var(--neg); }
.st.closed { color:var(--muted2); }
.pill { font-size:.72rem; padding:3px 10px; border-radius:999px; font-weight:700; letter-spacing:.03em; }
.pill.up { background:rgba(239,68,68,.14); }
.pill.down { background:rgba(34,197,94,.14); }
.pill.neutral { background:var(--panel2); color:var(--text2); border:1px solid var(--border); }
.sentiment { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; font-size:.82rem; color:var(--text2); }
/* technical ladder */
.ladder { display:grid; gap:2px; }
.rung { display:grid; grid-template-columns:120px 1fr auto; gap:12px; align-items:center; font-size:.85rem; padding:9px 0; border-bottom:1px dashed var(--border); }
.rung:last-child { border-bottom:none; }
.rung .lv { font-weight:700; }
.rung .k { color:var(--text2); }
.rung .tag { font-size:.7rem; padding:2px 8px; border-radius:999px; border:1px solid var(--border); }
.tag.below { color:var(--neg); border-color:var(--neg); }
.tag.above { color:var(--pos); border-color:var(--pos); }
.tag.now { color:var(--gold); border-color:var(--gold); background:var(--goldbg); }
.foot { margin-top:26px; text-align:center; font-size:.7rem; color:var(--muted2); }
a.src { color:var(--link); text-decoration:none; }

/* 大額交易人／選擇權法人：左大數字＋走勢，右逐列明細 */
.chips-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; }
@media (max-width:640px){ .chips-grid { grid-template-columns:1fr; } }
.big-stat .lab { font-size:.74rem; color:var(--muted); }
.big-stat .n { font-size:2rem; font-weight:800; line-height:1.1; }
.big-stat .sub { font-size:.8rem; color:var(--text2); }
.mini-rows { display:grid; gap:9px; align-content:start; }
.mini-rows .r { display:flex; justify-content:space-between; gap:10px; font-size:.84rem; padding:7px 0; border-bottom:1px dashed var(--border); }
.mini-rows .r:last-child { border-bottom:none; }
.spark { width:100%; height:46px; display:block; margin-top:8px; }

/* 籌碼小倍數：外資／投信 × 多單／空單，各自縮放 */
.chip-facets { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
@media (max-width:720px){ .chip-facets { grid-template-columns:1fr; } }
.chip-facet { background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:8px 10px 4px; }
.chip-facet .ft { display:flex; align-items:baseline; gap:10px; font-size:.75rem; color:var(--text2); margin-bottom:4px; flex-wrap:wrap; }
.chip-facet .fn { font-weight:700; color:var(--text); }
.chip-facet .leg { display:inline-flex; align-items:baseline; gap:4px; }
.chip-facet .leg:nth-of-type(2) { margin-left:auto; }
.chip-facet .dot { width:7px; height:7px; border-radius:50%; display:inline-block; align-self:center; }
.chip-facet .fv { font-family:ui-monospace,monospace; font-weight:700; font-size:.9rem; color:var(--text); }
.chip-facet .fd { font-size:.68rem; }
.chip-facet .fnote { margin-left:auto; font-size:.68rem; color:var(--muted2); }

/* 籌碼×價格相關係數 */
.corr-box { margin:12px 0 4px; }
.corr-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:.8rem; margin-bottom:6px; }
.corr-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.corr-table th, .corr-table td { padding:5px 8px; border-bottom:1px dotted var(--border); text-align:right; }
.corr-table thead th { color:var(--muted); font-weight:400; font-size:.72rem; }
.corr-table tbody th { text-align:left; font-weight:400; color:var(--text2); }
.corr-table td.dim { color:var(--muted2); }
.corr-table .n { color:var(--muted2); font-size:.64rem; margin-left:5px; }
/* 增減的紅綠要蓋過上面那條灰：.corr-table .n 的特異性比單獨的 .up/.down 高，
   不寫成同層級的話小字會全部變灰，等於白標。 */
.corr-table .n.up { color:var(--pos); }
.corr-table .n.down { color:var(--neg); }
/* 未平倉表：20 個交易日直接攤開會把下面的區塊推到捲軸外，這一區也就變成
   「看第一列要捲很久」。固定高度自己捲，表頭釘住不然捲兩列就忘了哪欄是空單。 */
.oi-scroll { max-height:340px; overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.oi-scroll thead th { position:sticky; top:0; background:var(--panel); z-index:1; }

/* 選擇權關卡：雙向 OI 橫條（左 Put／右 Call）。
   Put/Call 不是漲跌，不能用紅綠；沿用畫線工具的 上=橙(la-up)/下=藍(la-dn) 語意色。 */
.lv-res { color:#f59e0b; }
.lv-sup { color:#38bdf8; }
.lv-head { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; font-size:.68rem; color:var(--muted); margin-bottom:6px; }
.lv-head span:first-child { text-align:right; }
.lv-head span:last-child { text-align:left; }
.lv-head span:nth-child(2) { width:64px; text-align:center; }
.lv-grid { display:grid; gap:2px; }
/* 寬視窗（±3,000 點）改捲動：固定高度，開頁由 JS 捲到現價附近 */
.lv-scroll { display:grid; gap:2px; max-height:430px; overflow-y:auto; position:relative;
  padding-right:6px; overscroll-behavior:contain; }
.lv-row { display:grid; grid-template-columns:70px 1fr 64px 1fr 70px; gap:8px; align-items:center; font-size:.72rem; }
.lv-row .lv-strike { text-align:center; color:var(--text2); font-weight:600; }
.lv-row .lv-oi { color:var(--muted2); }
.lv-row .lv-oi:first-child { text-align:right; }
.lv-bar { height:15px; border-radius:3px; overflow:hidden; position:relative; background:transparent; }
.lv-bar > i { position:absolute; top:0; height:10px; display:block; opacity:.75; border-radius:3px; }
.lv-put > i { right:0; background:#38bdf8; }
.lv-call > i { left:0; background:#f59e0b; }
/* 細條＝今日盤中成交量（即時，60 秒更新）；粗條＝前收 OI。同色系加深以示同陣營不同資料 */
.lv-bar > em { position:absolute; bottom:0; height:3px; display:block; border-radius:2px; }
.lv-put > em { right:0; background:#0369a1; }
.lv-call > em { left:0; background:#b45309; }
.lv-hot-res .lv-strike, .lv-hot-res .lv-oi:last-child { color:#f59e0b; font-weight:800; }
.lv-hot-sup .lv-strike, .lv-hot-sup .lv-oi:first-child { color:#38bdf8; font-weight:800; }
.lv-hot-res .lv-call > i, .lv-hot-sup .lv-put > i { opacity:1; }
.lv-price { display:flex; align-items:center; gap:8px; margin:3px 0; }
.lv-price::before, .lv-price::after { content:""; flex:1; border-top:1px dashed var(--muted); }
.lv-price span { font-size:.66rem; color:var(--text); font-weight:700; white-space:nowrap; }
@media (max-width:720px){ .lv-row { grid-template-columns:1fr 58px 1fr; } .lv-row .lv-oi { display:none; } }

/* 全球盤面：漲跌幅橫條（0 軸置中、所有標的共用同一尺度才能比較）。紅漲綠跌台股慣例。 */
.pb-sub { font-size:.72rem; color:var(--muted2); margin-bottom:6px; }
.pb-grid { display:grid; gap:3px; }
.pb-row { display:grid; grid-template-columns:190px 1fr 64px 84px; gap:10px; align-items:center; font-size:.76rem; }
.pb-name { color:var(--text2); display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-track { position:relative; height:12px; background:var(--panel2); border-radius:3px; overflow:hidden; }
.pb-track::before { content:""; position:absolute; left:50%; top:0; bottom:0; border-left:1px dashed var(--muted); opacity:.5; }
.pb-track i { position:absolute; top:1px; bottom:1px; border-radius:2px; }
.pb-track .pb-up { left:50%; background:var(--pos); opacity:.85; }
.pb-track .pb-dn { right:50%; background:var(--neg); opacity:.85; }
.pb-pct { text-align:right; font-weight:700; }
.pb-px { text-align:right; color:var(--muted2); }
@media (max-width:720px){ .pb-row { grid-template-columns:120px 1fr 58px; } .pb-px { display:none; } }

/* 看板子分頁：即時／每日。比頁面層級的 .mkt-tab 小一號，才不會跟它搶視覺份量 */
.bd-tabs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.bd-tab { background:transparent; border:1px solid var(--border); border-radius:999px;
  padding:5px 14px; cursor:pointer; color:var(--muted2); font-size:.8rem; font-weight:600; }
.bd-tab:hover { border-color:var(--link); color:var(--text2); }
.bd-tab.active { background:var(--goldbg); border-color:var(--gold); color:var(--text); }
.bd-hint { font-size:.72rem; color:var(--muted); }
/* 各分頁自己的時效：即時是「幾點抓的」，每日是「資料哪一天」——兩者問的不是同一件事 */
.bd-time { margin-left:6px; font-size:.68rem; font-weight:600; color:var(--muted2);
  font-family:ui-monospace,Consolas,monospace; }
.bd-tab.active .bd-time { color:var(--muted); }

/* 當日走勢疊圖：橫條只給終點，這裡看過程與先後 */
.ov-ol-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:20px 0 8px; }
.ov-ol-title { font-size:.82rem; font-weight:700; color:var(--text2); }
.ov-ol-note { font-size:.72rem; color:var(--muted); }
.ov-picker { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
/* 圖例即開關：色塊直接用該線的顏色，關掉的整顆變灰，不用另外看圖例對照 */
.ov-chip { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; padding:3px 9px;
  border-radius:999px; border:1px solid var(--border); background:var(--panel2);
  color:var(--text2); cursor:pointer; user-select:none; white-space:nowrap; }
.ov-chip:hover { border-color:var(--muted); }
.ov-chip.off { opacity:.42; }
.ov-chip .dot { width:9px; height:3px; border-radius:2px; flex:none; }
.ov-chip.off .dot { background:var(--muted) !important; }

/* 全球盤面：開收盤時間說明（? 按鈕＋彈窗） */
.ov-help { margin-left:8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:.72rem; font-weight:700; cursor:pointer; line-height:1; }
.ov-help:hover { border-color:var(--link); color:var(--text); }
.ov-modal-backdrop { position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.ov-modal { background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; max-width:640px; width:100%; max-height:80vh; overflow-y:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.4); }
.ov-modal-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.92rem; margin-bottom:10px; }
.hours-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.hours-table th, .hours-table td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--border); vertical-align:top; }
.hours-table th { color:var(--muted); font-weight:600; white-space:nowrap; }
.hours-table td:nth-child(2) { white-space:nowrap; font-variant-numeric:tabular-nums; }
.ov-modal-note { font-size:.7rem; color:var(--muted2); margin-top:10px; line-height:1.6; }

/* 期貨庫存卡片與表格（2026-08-05 自戰情室搬到庫存頁，樣式跟著搬）*/
/* 期貨庫存（原 /stock/futures-account）*/
.fut-note { font-size:.74rem; color:var(--muted); margin-bottom:12px; }
.fut-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.fut-card { background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:12px 16px; }
.fut-card .nm { font-size:.72rem; color:var(--muted); }
.fut-card .val { font-size:1.4rem; font-weight:800; margin-top:4px; }
#futAccount table { width:100%; border-collapse:collapse; font-size:.84rem; }
#futAccount th { text-align:right; font-weight:600; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
#futAccount td { text-align:right; padding:7px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
#futAccount th:first-child, #futAccount td:first-child { text-align:left; }
#futAccount .empty { color:var(--muted); font-size:.82rem; padding:10px 2px; }
.fut-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pb-head { font-size:.66rem; color:var(--muted2); padding-bottom:2px; }

/* 已加入主圖比較的膠囊：整顆亮起來，不只是換個邊框顏色——這排十一顆並排，
   只改邊框在一片圓角裡幾乎看不出來，得靠實心底色＋粗邊＋字重才一眼分得出
   「我選了哪幾條」（2026-08-08）。色塊本身就是圖上那條線的顏色，沒加入的留白，
   所以「有顏色＝圖上有這條線」是同一個訊號，不用另外對照圖例。 */
.ov-chip.on { border-color:var(--link); border-width:2px; padding:2px 8px;
  background:color-mix(in srgb, var(--link) 16%, var(--panel2));
  color:var(--text); font-weight:700; box-shadow:0 0 0 1px color-mix(in srgb, var(--link) 30%, transparent); }
.ov-chip.on .dot { width:11px; height:4px; }

/* 戰情列的結論：每天都要讀的那一句留在版面上，逐格的意思收進 ? 彈窗 */
.intel-read { display:flex; align-items:baseline; gap:2px; margin-top:10px;
  font-size:.76rem; line-height:1.7; color:var(--text2); }
.intel-read .ov-help { margin-left:0; margin-right:8px; flex:none; }
.intel-read b { color:var(--text); }
#intelHelpModal .ov-modal-note p { margin:0 0 10px; }
#intelHelpModal .ov-modal-note p:last-child { margin-bottom:0; }

/* 美股開盤提示：抬頭倒數 ＋ 判讀框 ＋ 驅動鏈四檔（共用 .pb-* 那套橫條） */
.uoc-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.uoc-head b { font-size:1.05rem; }
.uoc-head span { font-size:.74rem; color:var(--muted2); }
.uoc-cue { border:1px solid var(--border); border-left-width:3px; border-radius:8px;
  background:var(--panel2); padding:10px 13px; margin-bottom:12px; font-size:.78rem; line-height:1.65; }
.uoc-cue b { display:block; font-size:.86rem; margin-bottom:4px; }
.uoc-tag { font-size:.68rem; font-weight:600; color:var(--muted2); margin-left:8px; }
/* 台股慣例：紅漲綠跌（--pos/--neg 已是這個語意） */
.uoc-up { border-left-color:var(--pos); }
.uoc-down { border-left-color:var(--neg); }
/* 裁判獨強：方向照給（同色），但少了大盤背書，色條淡一級 */
.uoc-solo_up { border-left-color:var(--pos); opacity:.92; }
.uoc-solo_down { border-left-color:var(--neg); opacity:.92; }
.uoc-split, .uoc-split_grp { border-left-color:var(--gold); }
.uoc-flat, .uoc-na { border-left-color:var(--muted); }
.st.pre { color:var(--gold); border-color:var(--gold); }
.pb-track.pb-nobar { background:transparent; display:flex; align-items:center; justify-content:center; }
.pb-track.pb-nobar::before { display:none; }
.pb-track.pb-nobar em { font-style:normal; font-size:.66rem; color:var(--muted); }
/* 美股開盤提示的列：比隔夜那張多一欄「同窗變動」（所有列同起點，唯一可比的數字），
   台指期那列是被推的對象不是驅動鏈，用上緣分隔線隔開 */
#usOpenCue .pb-row { grid-template-columns:190px 1fr 62px 72px 78px; }
#usOpenCue .pb-head { font-size:.68rem; color:var(--muted); }
.pb-win { text-align:right; font-weight:700; }
.pb-subject { border-top:1px solid var(--border); padding-top:5px; margin-top:3px; }
@media (max-width:720px){ #usOpenCue .pb-row { grid-template-columns:104px 1fr 56px 60px; } }
/* 標題報價的第二個數字（自時段起點）：份量要比主數字小，它是補充不是主角 */
.q-seg { font-size:.8rem; color:var(--muted2); margin-left:4px; }
.uoc-prior { font-size:.74rem; line-height:1.6; color:var(--text2); background:var(--panel2);
  border:1px dashed var(--border); border-radius:8px; padding:8px 12px; margin-bottom:12px; }
.uoc-prior b { color:var(--text); }
.uoc-prior-cav { display:block; margin-top:3px; font-size:.7rem; color:var(--muted); }
/* 地緣旗標：它問的是跟上面不同的事（輸入成本／risk-off），混在同一串條件句裡會被略過 */
.uoc-alarm { margin:6px 0 2px; padding:6px 10px; border-radius:6px;
  background:color-mix(in srgb, var(--gold) 14%, transparent);
  border-left:2px solid var(--gold); color:var(--text); }
.uoc-fal { margin-top:6px; color:var(--muted2); font-size:.73rem; }
.uoc-ev { margin-top:12px; border-top:1px solid var(--border); padding-top:8px; }
.uoc-ev > summary { cursor:pointer; font-size:.76rem; color:var(--text2); font-weight:600; }
.uoc-ev .acc-table { margin-top:8px; }
.uoc-ev .acc-table td, .uoc-ev .acc-table th { white-space:nowrap; }
.uoc-ev-oil { margin-top:8px; font-size:.72rem; color:var(--text2); line-height:1.7; }
.uoc-ev-cav { margin:8px 0 0 16px; font-size:.72rem; color:var(--muted); line-height:1.7; }
.uoc-ev-imp { margin-top:6px; font-size:.73rem; color:var(--text2); }
.uoc-ev-src { margin-top:4px; font-size:.68rem; color:var(--muted); }
.uoc-note { margin-top:8px; font-size:.7rem; color:var(--muted); }

/* 綜合訊號卡：計票明細（哪個指標投了什麼、為什麼），沿用 .uoc-cue 當外框 */
.synth-votes { margin-top:8px; display:grid; gap:5px; }
.synth-vote { display:flex; gap:8px; align-items:baseline; border-left:2px solid var(--muted);
  padding-left:8px; font-size:.74rem; }
.synth-vote.synth-pos { border-left-color:var(--pos); }
.synth-vote.synth-neg { border-left-color:var(--neg); }
.synth-vote.synth-flat { border-left-color:var(--muted); }
.synth-vote.synth-na { border-left-color:var(--muted); opacity:.6; }
.sv-label { flex:0 0 auto; font-weight:600; color:var(--text); white-space:nowrap; }
.sv-reason { color:var(--text2); }
.synth-missing, .synth-context { margin-top:6px; font-size:.7rem; color:var(--muted2); }