/* IB Admin 交易終端 —— 版面與樣式。
 *
 * 設計稿：https://claude.ai/artifact/DteuwuZezt7rJJ6L5VAbu8
 *
 * 徽章的顏色是刻意的：
 *   延遲（warn/橘）比即時（ok/綠）更顯眼 —— 因為「延遲」才是要提醒的那個狀態。
 *   READ-ONLY 鎖用藍，不是紅 —— 它是正常狀態，不是錯誤。
 */

/* 🔴 絕不在 #ibPanel 上寫 display。
 *
 * .panel 基底由 styles.css 提供：
 *     .panel        { display: none; position: absolute; inset: 0; }
 *     .panel.active { display: flex; }
 *
 * id 選擇器權重是 100，.panel 只有 10 —— 在 #ibPanel 上寫 display: flex
 * 會壓過那個基底，變成**永遠顯示**，切到別的分頁時 IB 畫面還蓋在上面。
 * (2026-10-24 踩到：切「終端機」後 IB 面板仍疊在終端機上。)
 *
 * 其他面板（如 #earningsCallPanel）也是只寫 padding，不碰 display。 */
#ibPanel { padding: 0 !important; }

/* 內層才負責撐滿。父層是 flex column，所以用 flex: 1 不是 height: 100%。 */
#ibRoot { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
  overflow: hidden; font-size: var(--ib-fs-l); color: var(--ib-ink-0); }

/* ── 頂欄 ───────────────────────────────────────────── */
.ib-topbar { display: flex; align-items: center; gap: var(--ib-sp-5); flex-wrap: wrap;
  padding: var(--ib-sp-3) var(--ib-sp-5); border-bottom: 1px solid var(--ib-line-1);
  background: var(--ib-fill-1); }
.ib-topbar-left, .ib-topbar-right { display: flex; align-items: center; gap: var(--ib-sp-3); }
.ib-topbar-right { margin-left: auto; }
.ib-logo { font-weight: 700; letter-spacing: .5px; padding: var(--ib-sp-hair) var(--ib-sp-3); border-radius: var(--ib-r-1);
  background: rgba(90,140,255,.18); color: #9ab8ff; font-size: var(--ib-fs-m); }
.ib-sym-input { width: 110px; padding: var(--ib-sp-1) var(--ib-sp-3); border-radius: var(--ib-r-1);
  border: 1px solid var(--ib-line-2); background: rgba(0,0,0,.25);
  color: inherit; font-family: var(--ib-mono); text-transform: uppercase; }

.ib-badges { display: flex; align-items: center; gap: var(--ib-sp-2); flex-wrap: wrap; }
/* 🔴 四種徽章（延遲 / READ-ONLY / 資料警告 / 快取）本來各寫各的
 *    底色透明度（.14 / .16 / .18）與字色，排在一起高度與重量都不一致。
 *    2026-10-26 收斂成同一個底：高度、字級、圓角、底色透明度全部一樣，
 *    **只有顏色不同**，顏色本身就是語意（藍=正常狀態、橘=要注意、
 *    綠=好、灰=次要資訊）。 */
.ib-badge { font-size: var(--ib-fs-s); line-height: 16px; padding: 1px var(--ib-sp-3);
  border-radius: var(--ib-r-pill); white-space: nowrap; display: inline-flex;
  align-items: center; gap: var(--ib-sp-1); font-weight: 500;
  background: var(--ib-fill-2); color: var(--ib-ink-2);
  border: 1px solid transparent; }
.ib-badge-warn { background: rgba(255, 170, 40, .14); color: #FFCB6B;
  border-color: rgba(255, 170, 40, .28); }
.ib-badge-ok { background: rgba(43, 196, 143, .14); color: var(--ib-up-soft);
  border-color: rgba(43, 196, 143, .28); }
.ib-badge-unknown { background: rgba(160, 160, 170, .14); color: #B9B9C4;
  border-color: rgba(160, 160, 170, .28); }
.ib-badge-lock { background: var(--ib-info-dim); color: var(--ib-info-ink);
  border-color: rgba(110, 122, 143, .3); }
.ib-badge-dim { background: var(--ib-fill-1); color: var(--ib-ink-3); }

/* ── 視圖分頁 ─────────────────────────────────────────── */
.ib-viewtabs { display: flex; gap: var(--ib-sp-hair); padding: 0 var(--ib-sp-5);
  border-bottom: 1px solid var(--ib-line-1); }
.ib-viewtab { padding: var(--ib-sp-3) var(--ib-sp-5); font-size: var(--ib-fs-m); background: none; border: none;
  color: var(--ib-ink-2); cursor: pointer; border-bottom: 2px solid transparent; }
.ib-viewtab:hover { color: var(--ib-ink-0); }
.ib-viewtab.is-active { color: #9ab8ff; border-bottom-color: #5a8cff; }

.ib-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ib-view.hidden { display: none; }

/* ── 主終端三欄（分割器版）────────────────────────────
 *
 * 從 grid 改成 flex：收合時分割器要**整條消失**，grid 得同步改
 * grid-template-columns 的字串，兩邊很容易對不上；flex 直接把那個
 * 元素 display:none 就好。
 *
 * 尺寸走 CSS 變數（JS 拖曳時只改這三個字串，不碰 DOM 結構）。
 */
/* 🔴 數字一律等寬 —— 推播每秒在跳，不等寬的話整欄每跳一次就左右位移一次。
 *    `+` 與 `-` 在等寬字裡同寬，所以負號維持 ASCII（使用者會複製價格，
 *    換成 U+2212 貼到試算表會變成文字）。 */
#ibRoot { --ib-left-w: 190px; --ib-right-w: 230px; --ib-bottom-h: 220px;
  font-variant-numeric: tabular-nums; }

.ib-main-grid { flex: 1; min-height: 0; display: flex; align-items: stretch;
  background: #0f1116; }
.ib-main-grid > aside, .ib-main-grid > .ib-chart-wrap { background: #0f1116; }
.ib-watch { flex: 0 0 var(--ib-left-w); width: var(--ib-left-w);
  display: flex; flex-direction: column; overflow: auto;
  border-right: 1px solid var(--ib-line-1); }
.ib-order { flex: 0 0 var(--ib-right-w); width: var(--ib-right-w);
  display: flex; flex-direction: column; overflow: auto;
  border-left: 1px solid var(--ib-line-1); }
.ib-bottom { flex: 0 0 var(--ib-bottom-h); height: var(--ib-bottom-h); }

/* 收合動畫 150ms。拖曳時 JS 加 .ib-no-anim 關掉它,否則會一路追著跑很黏 */
.ib-watch, .ib-order, .ib-bottom, .ib-strip {
  transition: flex-basis .15s ease, width .15s ease, height .15s ease; }
#ibRoot.ib-no-anim .ib-watch, #ibRoot.ib-no-anim .ib-order,
#ibRoot.ib-no-anim .ib-bottom { transition: none; }

/* ── 分割器（真的 button,Tab 走得到）────────────────── */
.ib-split { flex: 0 0 6px; border: none; padding: 0; margin: 0;
  background: var(--ib-fill-1); display: flex; align-items: center;
  justify-content: center; touch-action: none; position: relative; }
/* 🔴 **感應範圍要比看得到的那條粗。** 6px 的條子偏 4px 就完全抓不到
 * （2026-10-26 使用者：「下方區塊的拖曳功能無效」；實測偏 4px → 一動也不動）。
 * 更坑的是:使用者眼睛看到的那條線其實是 `.ib-bottom` 的 border-top,
 * 在握把**下面** 3~4px —— 照著那條線抓正好抓空。
 * 🔴 用看不見的 ::after 撐大感應範圍,**不是**把 .ib-split 變厚 ——
 *    變厚會多佔版面高度,又把走勢圖擠矮一次。
 * 吃多少有上限:橫的往下只吃 4px(下面是分頁列的按鈕)、
 * 直的左右各 4px(自選清單那一列最右邊有 × 刪除鈕)。 */
.ib-split::after { content: ''; position: absolute; z-index: 5; }
.ib-split-h::after { left: 0; right: 0; top: -8px; bottom: -4px; }
.ib-split-v::after { top: 0; bottom: 0; left: -4px; right: -4px; }
.ib-split-v { cursor: col-resize; }
.ib-split-h { cursor: row-resize; flex: 0 0 6px; }
.ib-split:hover { background: rgba(90,140,255,.18); }
.ib-split:focus-visible { outline: 2px solid #9ab8ff; outline-offset: -2px; }
.ib-split-grip { background: var(--ib-fill-3); border-radius: var(--ib-r-1);
  transition: background .12s; }
.ib-split-v .ib-split-grip { width: 2px; height: 34px; }
.ib-split-h .ib-split-grip { height: 2px; width: 46px; }
.ib-split:hover .ib-split-grip { background: #5a8cff; }
/* 拖曳中:整頁游標跟著變,並擋掉文字選取 */
body.ib-dragging { cursor: col-resize; user-select: none; }

/* ── 收起鈕 ───────────────────────────────────────────── */
.ib-collapse { background: none; border: none; cursor: pointer;
  color: var(--ib-ink-3); font-size: var(--ib-fs-l); line-height: 1;
  padding: var(--ib-sp-hair) var(--ib-sp-1); border-radius: var(--ib-r-1); }
.ib-collapse:hover { color: var(--ib-ink-0); background: var(--ib-bg-3); }
.ib-collapse:focus-visible { outline: 2px solid #9ab8ff; outline-offset: -2px; }
.ib-bt-spacer { flex: 1; }

/* ── 收起後的細條（26px,帶資訊不是純圖示）────────────── */
.ib-strip { display: none; border: none; cursor: pointer; padding: 0;
  background: var(--ib-fill-1); color: var(--ib-ink-2);
  font-size: var(--ib-fs-s); align-items: center; justify-content: center; gap: var(--ib-sp-3);
  font-family: inherit; }
.ib-strip:hover { background: rgba(90,140,255,.14); color: var(--ib-ink-0); }
.ib-strip:focus-visible { outline: 2px solid #9ab8ff; outline-offset: -2px; }
.ib-strip-l, .ib-strip-r { flex: 0 0 26px; flex-direction: column; padding: var(--ib-sp-3) 0; }
.ib-strip-l { border-right: 1px solid var(--ib-line-1); }
.ib-strip-r { border-left: 1px solid var(--ib-line-1); }
.ib-strip-l .ib-strip-txt, .ib-strip-r .ib-strip-txt {
  writing-mode: vertical-rl; letter-spacing: 2px; }
.ib-strip-b { flex: 0 0 26px; flex-direction: row; gap: var(--ib-sp-5); padding: 0 var(--ib-sp-4);
  justify-content: flex-start; border-top: 1px solid var(--ib-line-1); }
.ib-strip-ico { opacity: .8; }
.ib-dim { color: var(--ib-ink-3); }

/* ── 收合狀態:誰顯示誰不顯示 ─────────────────────────── */
#ibRoot.ib-hid-left .ib-watch,
#ibRoot.ib-hid-left #ibSplitL { display: none; }
#ibRoot.ib-hid-left .ib-strip-l { display: flex; }

#ibRoot.ib-hid-right .ib-order,
#ibRoot.ib-hid-right #ibSplitR { display: none; }
#ibRoot.ib-hid-right .ib-strip-r { display: flex; }

#ibRoot.ib-hid-bottom .ib-bottom,
#ibRoot.ib-hid-bottom #ibSplitB { display: none; }
#ibRoot.ib-hid-bottom .ib-strip-b { display: flex; }

.ib-watch-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ib-sp-2); padding: var(--ib-sp-2) var(--ib-sp-3); font-size: var(--ib-fs-s); color: var(--ib-ink-2);
  border-bottom: 1px solid var(--ib-line-1); position: sticky; top: 0;
  background: #0f1116; }
.ib-watch-body { list-style: none; margin: 0; padding: 0; }
.ib-watch-row { display: grid; grid-template-columns: 1fr auto 18px; align-items: center;
  gap: var(--ib-sp-2); padding: var(--ib-sp-1) var(--ib-sp-3); cursor: pointer; border-left: 2px solid transparent; }
.ib-watch-row:hover { background: var(--ib-bg-3); }
.ib-watch-row.is-active { background: rgba(90,140,255,.1); border-left-color: #5a8cff; }
.ib-watch-sym { font-family: var(--ib-mono); font-size: var(--ib-fs-m); }
.ib-watch-px { font-family: var(--ib-mono); font-size: var(--ib-fs-m);
  color: var(--ib-ink-1); }
/* 🔴 拿不到報價就顯示 n/a，不顯示假價格 */
.ib-watch-px.is-na { color: rgba(255,170,40,.75); font-size: var(--ib-fs-s); }
.ib-watch-del { background: none; border: none; color: var(--ib-ink-3);
  cursor: pointer; font-size: var(--ib-fs-xl); line-height: 1; padding: 0; }
.ib-watch-del:hover { color: #ef4e5e; }

/* 🔴 **`flex: 1 1 0` 不可以拿掉。** 沒有 flex-grow 的話這一欄的寬度等於
 * 「內容自然有多寬」，只會縮不會長 —— 收起右邊「下單」之後省下來的空間
 * 不會被吃掉，變成一塊黑的空白（2026-10-26 使用者截圖；實測 1710×777
 * 收起後空白 267px）。
 * 以前看起來正常只是運氣好：說明行很長，內容本來就比可用空間寬，
 * 被 flex-shrink 縮到剛好；2026-10-26 說明行瘦身之後內容變窄，洞就露出來。
 * 🔴 `min-width: 0` 要一起寫 —— flex 項目預設 `min-width: auto`（＝內容的
 *    最小寬度），不寫的話窄視窗會縮不下去把旁邊擠出去。 */
.ib-chart-wrap { flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* 說明行瘦身後跟控制項排得進同一行（原本被擠成兩行 = 76px，現在約 34px）。
 * flex-wrap 留著 —— 視窗很窄時還是要換行，不可以被切掉。 */
.ib-chart-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ib-sp-3); flex-wrap: wrap; padding: var(--ib-sp-1) var(--ib-sp-4);
  border-bottom: 1px solid var(--ib-line-1); }
.ib-ch-i { font-style: normal; color: var(--ib-ink-3); cursor: help;
  margin-left: 4px; }
.ib-chart-head { display: flex; align-items: baseline; gap: var(--ib-sp-3);
  /* 一個字都沒有時也要佔住這一行（實測自然高度 18.1px）*/
  min-height: 18px; }
/* 載入中：舊內容**壓暗留在原地**，高度完全不變。
   跟走勢圖的 showLoading()「有圖就壓暗、沒圖才畫骨架」是同一個語彙。
   2026-10-27：原本報價列是畫 108px 的骨架屏，而真的只有 35.4px，
   下面的說明行與整張圖被推下 72.6px 再彈回 —— 那就是「抖動」。 */
.ib-qb.is-stale, .ib-chart-head.is-stale { opacity: .42; pointer-events: none; }
.ib-qb, .ib-chart-head { transition: opacity .12s linear; }
/* 位數變動不要把後面的欄位推來推去（780 根 → 1253 根）*/
.ib-chart-head, .ib-qb-last, .ib-qb-chg, .ib-qb-v {
  font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ib-qb, .ib-chart-head { transition: none; }
}
.ib-chart-head strong { font-size: var(--ib-fs-2xl); font-family: var(--ib-mono); }
.ib-ch-meta, .ib-ch-last { font-size: var(--ib-fs-s); color: var(--ib-ink-2); }
.ib-ch-last { color: var(--ib-ink-1); }
.ib-chart-ctrls { display: flex; align-items: center; gap: var(--ib-sp-3); }
/* 🔴 **min-height 一定是 0，不可以再放回 280px。**
 * 這一欄是 `overflow: hidden` 的 flex 直欄：報價區 88 ＋ 工具列 41 ＋
 * 指標籤 27 ＋ 走勢圖 ＋ 讀值 20。走勢圖只要有「縮不下去」的下限，
 * 空間不夠時整欄就會撐破，多出來的被剪掉 —— 使用者 2026-10-26 看到的
 * 「底部面板把走勢圖下半截吃掉」就是這個（X 軸日期被切一半、讀值整行不見）。
 * 實測視窗內高 777px：那一欄可用 418、需要 456 → 溢出 38px 被剪掉；
 * 909px 剛好塞得下，所以高螢幕看不到。
 * 🔴 flex 直欄的項目預設是 `min-height: auto`（＝內容的最小高度），
 *    所以要**明寫 0**，不是把這行刪掉。
 * 空間夠的時候 `flex: 1` 照樣吃滿，行為跟以前完全一樣。 */
.ib-chart { flex: 1; min-height: 0; background: #0C0F14; }

.ib-order-head { padding: var(--ib-sp-2) var(--ib-sp-4); font-size: var(--ib-fs-s); color: var(--ib-ink-2);
  border-bottom: 1px solid var(--ib-line-1); }
/* 🔴 鎖定說明是面板的一部分，不是 tooltip —— 要看得到 */
.ib-order-locked { margin: 10px; padding: var(--ib-sp-4); border-radius: var(--ib-r-1);
  background: rgba(90,140,255,.08); border: 1px solid rgba(90,140,255,.25);
  font-size: var(--ib-fs-s); line-height: 1.55; color: var(--ib-ink-1); }
.ib-order-locked-title { font-weight: 700; color: #9ab8ff; margin-bottom: 6px;
  font-size: var(--ib-fs-m); }
.ib-order-locked p { margin: 4px 0 0; }
.ib-order-locked code { font-family: var(--ib-mono);
  background: rgba(0,0,0,.3); padding: 1px var(--ib-sp-1); border-radius: var(--ib-r-1); }
.ib-order-form { display: flex; flex-direction: column; gap: var(--ib-sp-3); margin: 0 10px 10px;
  padding: 0; border: none; opacity: .4; }
.ib-order-form label { display: flex; flex-direction: column; gap: var(--ib-sp-1);
  font-size: var(--ib-fs-s); color: var(--ib-ink-2); }
.ib-order-form select, .ib-order-form input { padding: var(--ib-sp-1) var(--ib-sp-2); border-radius: var(--ib-r-1);
  border: 1px solid var(--ib-line-2); background: rgba(0,0,0,.3); color: inherit; }
.ib-order-submit { margin-top: 4px; padding: var(--ib-sp-3); border-radius: var(--ib-r-1); border: none;
  background: var(--ib-fill-2); color: var(--ib-ink-2); cursor: not-allowed; }

/* ── 底部分頁 ─────────────────────────────────────────── */
.ib-bottom { height: 220px; display: flex; flex-direction: column;
  border-top: 1px solid var(--ib-line-1); }
.ib-bottom-tabs { display: flex; gap: var(--ib-sp-hair); padding: 0 var(--ib-sp-4);
  border-bottom: 1px solid var(--ib-line-1); }
.ib-bottom-tab { padding: var(--ib-sp-2) var(--ib-sp-5); font-size: var(--ib-fs-s); background: none; border: none;
  color: var(--ib-ink-2); cursor: pointer; border-bottom: 2px solid transparent; }
.ib-bottom-tab.is-active { color: #9ab8ff; border-bottom-color: #5a8cff; }
.ib-bottom-body { flex: 1; overflow: auto; padding: var(--ib-sp-3) var(--ib-sp-4); }

.ib-table { width: 100%; border-collapse: collapse; font-size: var(--ib-fs-s);
  font-family: var(--ib-mono); }
.ib-table th { text-align: right; padding: var(--ib-sp-1) var(--ib-sp-3); color: var(--ib-ink-2);
  font-weight: 500; border-bottom: 1px solid var(--ib-line-1); position: sticky;
  top: 0; background: #0f1116; }
.ib-table th:first-child, .ib-table td:first-child { text-align: left; }
.ib-table td { text-align: right; padding: var(--ib-sp-1) var(--ib-sp-3);
  border-bottom: 1px solid var(--ib-line-1); }

.ib-kv-grid { display: flex; gap: var(--ib-sp-4); flex-wrap: wrap; }
.ib-kv { padding: var(--ib-sp-3) var(--ib-sp-5); border-radius: var(--ib-r-1); background: var(--ib-fill-1);
  display: flex; flex-direction: column; gap: var(--ib-sp-1); min-width: 130px; }
.ib-kv span { font-size: var(--ib-fs-s); color: var(--ib-ink-2); }
.ib-kv strong { font-size: var(--ib-fs-2xl); font-family: var(--ib-mono); }
.ib-note { margin-top: 8px; font-size: var(--ib-fs-s); color: var(--ib-ink-2); }
.ib-pre { margin: 0; font-size: var(--ib-fs-s); font-family: var(--ib-mono);
  color: var(--ib-ink-1); white-space: pre-wrap; }

/* ── 階梯 ───────────────────────────────────────────── */
.ib-ladder { flex: 1; overflow: auto; padding: var(--ib-sp-4); max-width: 460px; }
.ib-ladder-note { font-size: var(--ib-fs-s); line-height: 1.55; color: rgba(255,170,40,.8);
  background: rgba(255,170,40,.07); border: 1px solid rgba(255,170,40,.22);
  border-radius: var(--ib-r-1); padding: var(--ib-sp-3) var(--ib-sp-4); margin-bottom: 10px; }
.ib-ladder-head, .ib-ladder-row { display: grid;
  grid-template-columns: 1fr 72px 1fr; align-items: center; }
.ib-ladder-head { font-size: var(--ib-fs-xs); color: var(--ib-ink-2); padding: 0 0 var(--ib-sp-1);
  text-align: center; border-bottom: 1px solid var(--ib-line-1); }
.ib-ladder-row { height: 20px; font-size: var(--ib-fs-s);
  font-family: var(--ib-mono);
  border-bottom: 1px solid var(--ib-line-1); }
.ib-ladder-row.is-poc { background: var(--ib-fill-1); }
.ib-lad-price { text-align: center; color: var(--ib-ink-0); }
.ib-lad-sell, .ib-lad-buy { position: relative; padding: 0 var(--ib-sp-2);
  color: var(--ib-ink-1); }
.ib-lad-sell { text-align: right; }
.ib-lad-sell i, .ib-lad-buy i { position: absolute; top: 2px; bottom: 2px;
  display: block; border-radius: var(--ib-r-1); }
.ib-lad-sell i { right: 0; background: rgba(239,78,94,.3); }
.ib-lad-buy i { left: 0; background: rgba(31,184,122,.3); }

/* ── 多圖 ───────────────────────────────────────────── */
/* 🔴 這層一定要是撐滿的 flex 欄 —— 它夾在 .ib-view 與 .ib-mc-grid 中間,
 *    沒樣式的話 grid 的 flex: 1 沒作用,四張圖卡在 140px、下面空一大塊。 */
#ibMultiRoot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 終端風格（設計稿 A，2026-10-25）：等寬字、#0C0F14 底、橘色重點。
 * 色碼跟 ib-chart.js 的 THEME 同一組。 */
.ib-mc-toolbar, .ib-mc-head, .ib-readout {
  font-family: 'JetBrains Mono', var(--ib-mono);
  font-variant-numeric: tabular-nums; }
.ib-mc-toolbar { display: flex; align-items: center; gap: var(--ib-sp-6); flex-wrap: wrap;
  min-height: 40px; box-sizing: border-box; padding: var(--ib-sp-1) var(--ib-sp-5);
  border-bottom: 1px solid #1A1F27; background: #0A0C0F; font-size: var(--ib-fs-s); color: #8A93A0; }
.ib-mc-group { display: flex; align-items: center; gap: var(--ib-sp-hair); }
.ib-mc-glabel { margin-right: 6px; }
.ib-mc-seg { height: 28px; padding: 0 var(--ib-sp-3); border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #8A93A0; font: inherit; cursor: pointer; }
.ib-mc-seg:hover { color: #E6EDF3; }
/* 🔴 2026-10-27 從橘改成 accent 藍 —— 橘在 IB 裡是「要注意」(延遲、警告)的顏色,
 *    拿來當「選中」會跟那個語意打架。而且主圖的週期列(.ib-seg)也是這個藍,
 *    兩邊才是同一套。 */
.ib-mc-seg[aria-pressed="true"] { color: #F2F4F7; font-weight: 700;
  border-bottom-color: var(--ib-accent); }
.ib-mc-tg { height: 24px; padding: 0 var(--ib-sp-3); margin-left: 4px; border: 1px solid #252C37;
  border-radius: var(--ib-r-1); background: transparent; color: #8A93A0; font: inherit; cursor: pointer; }
.ib-mc-tg[aria-pressed="true"] { background: #141922; color: #E6EDF3; }
.ib-mc-tg:disabled, .ib-mc-ico:disabled, .ib-mc-replay input:disabled {
  opacity: .35; cursor: not-allowed; }
.ib-mc-replay { margin-left: auto; display: flex; align-items: center; gap: var(--ib-sp-2); }
/* 指標鈕：四張圖共用的設定，橘色是因為它是這列唯一會開面板的 */
.ib-mc-ind { height: 26px; padding: 0 var(--ib-sp-4); display: inline-flex; align-items: center; gap: var(--ib-sp-2);
  border: 1px solid #FF8A1F; border-radius: var(--ib-r-1); background: rgba(255,138,31,.12);
  color: #FFB066; font: inherit; font-weight: 700; cursor: pointer; }
.ib-mc-ind:hover { background: rgba(255,138,31,.2); }
.ib-mc-ind path { fill: none; stroke: #FFB066; stroke-width: 1.6px; }
.ib-mc-warn { color: #FFB066; }
/* 版面按鈕（9 種）：圖示就是那個版面的縮圖 */
.ib-mc-lay { width: 32px; height: 26px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid #252C37; border-radius: var(--ib-r-1);
  background: transparent; cursor: pointer; }
.ib-mc-lay + .ib-mc-lay { margin-left: 2px; }
.ib-mc-lay path { fill: #141922; stroke: #8A93A0; stroke-width: 1px; }
.ib-mc-lay:hover path { stroke: #E6EDF3; }
.ib-mc-lay[aria-pressed="true"] { border-color: #FF8A1F; background: rgba(255,138,31,.12); }
.ib-mc-lay[aria-pressed="true"] path { fill: rgba(255,138,31,.35); stroke: #FFB066; }
.ib-mc-replay-btn { height: 24px; padding: 0 var(--ib-sp-4); border: 1px solid #FF8A1F; border-radius: var(--ib-r-1);
  background: transparent; color: #FF8A1F; font: inherit; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; }
.ib-mc-replay-btn[aria-pressed="true"] { background: #FF8A1F; color: #0A0C0F; }
.ib-mc-ico { width: 26px; height: 24px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid #252C37; border-radius: var(--ib-r-1);
  background: #141922; cursor: pointer; }
.ib-mc-ico path { fill: #C9D1D9; }
.ib-mc-replay input[type=range] { width: 120px; accent-color: #FF8A1F; }
.ib-mc-replay-info { color: #8A93A0; min-width: 150px; }
/* 🔴 回放進度要明確 —— 不可讓人誤以為是最新價 */
.ib-replay-live { color: #FF8A1F; font-weight: 700; }
.ib-mc-grid { flex: 1; min-height: 0; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;
  background: #1A1F27; }
.ib-mc-cell { background: #0C0F14; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; }
.ib-mc-head { display: flex; align-items: center; gap: var(--ib-sp-4); height: 32px; box-sizing: border-box;
  padding: 0 var(--ib-sp-4); border-bottom: 1px solid #161B22; font-size: var(--ib-fs-s); color: #8A93A0;
  white-space: nowrap; overflow: hidden; }
.ib-mc-sym { width: 64px; padding: var(--ib-sp-hair) var(--ib-sp-1); font: inherit; font-size: var(--ib-fs-l); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; border-radius: var(--ib-r-1);
  border: 1px solid transparent; background: transparent; color: #F2F4F7; }
.ib-mc-sym:hover, .ib-mc-sym:focus { border-color: #252C37; outline: none; }
.ib-mc-label { display: flex; align-items: center; gap: var(--ib-sp-5); flex: 1; min-width: 0; }
.ib-mc-meta, .ib-mc-count { color: #8A93A0; }
.ib-mc-v { font-weight: 400; color: #C9D1D9; }
.ib-mc-label .is-up { color: #2BC48F; }
.ib-mc-label .is-dn { color: #F04B5F; }
.ib-mc-vol { margin-left: auto; }
.ib-mc-vol b { font-weight: 400; color: #C9D1D9; }
.ib-mc-chart { flex: 1; min-height: 140px; }

/* ── ⌘K 命令面板 ─────────────────────────────────────── */
.ib-cmd-overlay { position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55); display: flex; align-items: flex-start;
  justify-content: center; padding-top: 14vh; }
.ib-cmd-box { width: min(560px, 92vw); border-radius: var(--ib-r-1); overflow: hidden;
  background: #15171e; border: 1px solid var(--ib-line-2);
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.ib-cmd-input { width: 100%; padding: var(--ib-sp-5) var(--ib-sp-6); font-size: var(--ib-fs-xl); border: none;
  background: transparent; color: var(--ib-ink-0); outline: none;
  border-bottom: 1px solid var(--ib-line-1); }
.ib-cmd-list { list-style: none; margin: 0; padding: var(--ib-sp-2); max-height: 320px;
  overflow: auto; }
.ib-cmd-list li { display: flex; align-items: center; gap: var(--ib-sp-4); padding: var(--ib-sp-3) var(--ib-sp-4);
  border-radius: var(--ib-r-1); cursor: pointer; font-size: var(--ib-fs-m); }
.ib-cmd-list li.is-sel { background: rgba(90,140,255,.16); }
.ib-cmd-list code { font-family: var(--ib-mono); font-size: var(--ib-fs-s);
  min-width: 42px; padding: var(--ib-sp-hair) var(--ib-sp-2); border-radius: var(--ib-r-1);
  background: var(--ib-fill-2); color: #9ab8ff; text-align: center; }
.ib-cmd-none { color: var(--ib-ink-2); cursor: default; }
.ib-cmd-foot { padding: var(--ib-sp-3) var(--ib-sp-5); font-size: var(--ib-fs-xs); color: var(--ib-ink-3);
  border-top: 1px solid var(--ib-line-1); }

/* ── 共用 ───────────────────────────────────────────── */
/* ── 週期／範圍：一排按鈕（2026-10-27）──────────────────────────
 * 原本是兩個 <select>:要「點開 → 找 → 點中」三個動作,而且展開的清單
 * 會蓋住圖。這兩個是使用者最常動的,所以攤開並排到工具列最前面。
 * 高度必須走 --ib-ctl-h,不然跟旁邊的按鈕/下拉/勾選框對不齊。 */
.ib-seg { display: inline-flex; align-items: stretch; height: var(--ib-ctl-h);
  border: 1px solid var(--ib-line-2); border-radius: var(--ib-r-1);
  background: var(--ib-bg-2); overflow: hidden; flex: 0 0 auto; }
.ib-seg-b { height: var(--ib-ctl-h); padding: 0 var(--ib-sp-3); border: 0;
  background: transparent; color: var(--ib-ink-2); font: inherit;
  font-size: var(--ib-fs-s); line-height: 1; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: background var(--ib-dur-1), color var(--ib-dur-1); }
.ib-seg-b + .ib-seg-b { border-left: 1px solid var(--ib-line-1); }
/* 「1分 30分」和「日 週 月」是兩群,中間那條要看得出來 */
.ib-seg-b.is-gap { border-left-color: var(--ib-line-2); }
.ib-seg-b:hover { background: var(--ib-bg-3); color: var(--ib-ink-1); }
.ib-seg-b[aria-pressed="true"] { color: var(--ib-ink-0); font-weight: 600;
  background: rgba(90, 140, 255, .2); box-shadow: inset 0 -2px 0 var(--ib-accent); }
.ib-seg-b:focus-visible { outline: 2px solid var(--ib-accent-ink); outline-offset: -2px; }
.ib-seg-more { color: var(--ib-ink-3); padding: 0 var(--ib-sp-2); }

#ibDurSeg .ib-seg-b { font-family: var(--ib-mono); }

.ib-btn-sm { height: var(--ib-ctl-h); padding: 0 var(--ib-sp-4); font-size: var(--ib-fs-s);
  border-radius: var(--ib-r-1);
  border: 1px solid var(--ib-line-2); background: var(--ib-fill-2);
  color: inherit; cursor: pointer; display: inline-flex; align-items: center;
  transition: background var(--ib-dur-1), border-color var(--ib-dur-1); }
.ib-btn-sm:hover:not(:disabled) { background: var(--ib-bg-3); }
.ib-btn-sm:disabled { opacity: .35; cursor: not-allowed; }
.ib-chk { display: inline-flex; align-items: center; gap: var(--ib-sp-1); font-size: var(--ib-fs-s);
  color: var(--ib-ink-2); cursor: pointer; }
.ib-empty, .ib-error { padding: var(--ib-sp-7); text-align: center; font-size: var(--ib-fs-m); }
.ib-empty { color: var(--ib-ink-3); }
.ib-error { color: #ff8e9a; }
#ibRoot select { padding: var(--ib-sp-1) var(--ib-sp-2); font-size: var(--ib-fs-s); border-radius: var(--ib-r-1);
  border: 1px solid var(--ib-line-2); background: rgba(0,0,0,.3); color: inherit; }

/* ── 手機版 ─────────────────────────────────────────── */
@media (max-width: 860px) {
  /* 三欄疊成一欄 —— 分割器拖了沒意義,直接收掉(JS 也會擋) */
  .ib-main-grid { flex-direction: column; }
  .ib-split { display: none !important; }
  .ib-watch, .ib-order { flex: 0 0 auto; width: auto;
    border-right: none; border-left: none;
    border-bottom: 1px solid var(--ib-line-1); }
  .ib-watch { max-height: 190px; }
  /* 同上：窄螢幕三欄疊成一欄，更擠，更不能有縮不下去的下限 */
  .ib-chart { min-height: 0; }
  /* 手機：不管選哪個版面都一欄往下排，而且要能往下捲 ——
   * 9 格疊起來不能捲就等於看不到（原本 4 格時第 4 張就被切掉一截）。
   * 版面的欄列與 grid-area 是 inline style，這裡要 !important 才蓋得掉。 */
  #ibMultiRoot { overflow-y: auto; }
  .ib-mc-grid { flex: none; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important; grid-auto-rows: 260px; }
  .ib-mc-cell { grid-area: auto !important; }
  /* 手機寬度放不下一整排 O H L C —— 換行，不要被切掉 */
  .ib-mc-head { height: auto; flex-wrap: wrap; padding: var(--ib-sp-1) var(--ib-sp-4); }
  .ib-mc-label { flex-wrap: wrap; gap: var(--ib-sp-hair) var(--ib-sp-4); }
  .ib-mc-vol { margin-left: 0; }
  .ib-bottom { height: 190px; }
  .ib-viewtabs { overflow-x: auto; }
  .ib-topbar { gap: var(--ib-sp-3); }
  .ib-mc-replay { margin-left: 0; }
  .ib-ladder { max-width: 100%; }
}

/* ── 連線狀態橫幅與「重新連線」按鈕 ──────────────────────
 *
 * 🔴 兩種狀態的視覺要分得很開：
 *    is-info（degraded / reconnecting）= 灰藍，「會自己好，不用動」
 *    is-warn（needs_manual）           = 橘，「要你決定」
 *  混在一起會讓人在不需要的時候跑去按重新連線 ——
 *  而按下去會把其他裝置上正在用的 session 踢掉。
 */
.ib-conn-banner:empty { display: none; }
.ib-conn-banner { padding: var(--ib-sp-3) var(--ib-sp-5); font-size: var(--ib-fs-m); line-height: 1.5;
  border-bottom: 1px solid transparent; }
.ib-conn-banner.is-info { background: rgba(120,150,200,.1);
  border-bottom-color: rgba(120,150,200,.25); color: rgba(200,215,240,.9); }
.ib-conn-banner.is-warn { background: rgba(255,170,40,.12);
  border-bottom-color: rgba(255,170,40,.3); color: #ffcb6b; }
.ib-conn-banner strong { font-weight: 700; }

/* 按鈕長得像徽章，就擺在 READ-ONLY 右邊 */
.ib-badge-action { background: rgba(255, 170, 40, .14); color: #FFCB6B;
  border-color: rgba(255, 170, 40, .28);
  border: 1px solid rgba(255,170,40,.45); cursor: pointer; font-weight: 600;
  font-family: inherit; }
.ib-badge-action:hover:not(:disabled) { background: rgba(255, 170, 40, .26); }
.ib-badge-action:disabled { opacity: .55; cursor: wait; }

/* ══════════════════════════════════════════════════════════
   專業化（2026-10-24）
   ══════════════════════════════════════════════════════════ */

/* ── 報價列（15+ 欄位）────────────────────────────────── */
/* 🔴 走勢圖上方整塊 2026-10-26 瘦身：192px → 約 54px（收起時）。
 * 實測 1710×772 原本報價列 89 ＋ 說明行與工具列 76（被擠成兩行）＋ 指標籤 27，
 * 而走勢圖本身只有 204px。padding 與字級都收緊，明細預設收起。 */
.ib-qb { padding: var(--ib-sp-1) var(--ib-sp-4); border-bottom: 1px solid var(--ib-line-1);
  background: var(--ib-fill-1); }
.ib-qb-empty { font-size: var(--ib-fs-s); color: var(--ib-ink-3); }
.ib-qb-main { display: flex; align-items: baseline; gap: var(--ib-sp-3); margin-bottom: 0;
  flex-wrap: wrap; }
.ib-qb.is-open .ib-qb-main { margin-bottom: 2px; }
.ib-qb-sym { font-size: var(--ib-fs-l); font-weight: 700;
  font-family: var(--ib-mono); }
.ib-qb-last { font-size: var(--ib-fs-2xl); font-weight: 700;
  font-family: var(--ib-mono); }
.ib-qb-chg { font-size: var(--ib-fs-m); font-family: var(--ib-mono); }
.ib-qb-grid { display: flex; flex-wrap: wrap; gap: 0 var(--ib-sp-4); }
/* 收起時主列仍看得到今日高低（展開後明細裡有「高」「低」，就不重複） */
.ib-qb-peek { display: inline-flex; align-items: baseline; gap: var(--ib-sp-1); font-size: var(--ib-fs-s); }
.ib-qb.is-open .ib-qb-peek { display: none; }
/* 盤前/盤後括號裡的量 —— 比價格淡一階，一眼分得出主從 */
.ib-qb-sub { font-style: normal; color: var(--ib-ink-2); font-size: var(--ib-fs-xs); }
/* 永遠拿不到的盤口：一顆小徽章，不佔明細的格子（hover 說明原因） */
.ib-qb-nobook { font-size: var(--ib-fs-xs); color: rgba(255,170,40,.7); cursor: help;
  border: 1px solid rgba(255,170,40,.3); border-radius: var(--ib-r-1); padding: 0 var(--ib-sp-1); }
.ib-qb-more { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ib-ink-2); font-size: var(--ib-fs-m); line-height: 1; padding: 1px var(--ib-sp-2);
  border-radius: var(--ib-r-1); font-family: inherit; }
.ib-qb-more:hover { color: var(--ib-ink-0); background: var(--ib-bg-3); }
.ib-qb-more:focus-visible { outline: 2px solid #9ab8ff; outline-offset: -2px; }
.ib-qb-item { display: inline-flex; align-items: baseline; gap: var(--ib-sp-1); font-size: var(--ib-fs-s); }
.ib-qb-l { color: var(--ib-ink-2); }
.ib-qb-v { font-family: var(--ib-mono); color: var(--ib-ink-1); }
.ib-qb-item.is-up .ib-qb-v { color: #5fdba7; }
.ib-qb-item.is-down .ib-qb-v { color: #ff8e9a; }
/* 🔴 拿不到的欄位要看得出來是「無權限」不是「沒資料」 */
.ib-qb-item.is-na .ib-qb-v, .ib-na { color: rgba(255,170,40,.65);
  font-style: normal; font-size: var(--ib-fs-xs); }
.is-up { color: #5fdba7; } .is-down { color: #ff8e9a; }

/* ── 十字線讀值列 ─────────────────────────────────────── */
.ib-readout { min-height: 20px; padding: var(--ib-sp-hair) var(--ib-sp-4); display: flex; align-items: center; gap: var(--ib-sp-5);
  font-size: var(--ib-fs-xs); color: #8A93A0; background: #0C0F14; border-top: 1px solid #1A1F27; }
.ib-readout b { color: #E6EDF3; font-weight: 500; }
.ib-ro-t { color: #C9D1D9; }
.ib-readout .ib-ro-chg.is-up { color: #2BC48F; }
.ib-readout .ib-ro-chg.is-down { color: #F04B5F; }
.ib-ro-last { padding: 0 var(--ib-sp-1); border: 1px solid rgba(255,138,31,.55); border-radius: var(--ib-r-1);
  font-size: var(--ib-fs-xs); color: #FF8A1F; }

/* ── 指標 chips ───────────────────────────────────────── */
/* 指標籤那一列 2026-10-26 拿掉（圖內圖例已經有，而且多給現值）——
   樣式一併移除，免得留著讓人以為還在用。 */

/* ── 畫線工具列 ───────────────────────────────────────── */
.ib-drawbar { display: flex; align-items: center; gap: var(--ib-sp-2); flex-wrap: wrap;
  padding: var(--ib-sp-1) var(--ib-sp-4); border-bottom: 1px solid var(--ib-line-1);
  background: var(--ib-fill-1); }
.ib-drawbar.hidden { display: none; }
.ib-draw-note { font-size: var(--ib-fs-xs); color: rgba(255,170,40,.75); }
.ib-btn-sm.is-on { background: rgba(90,140,255,.25); color: #9ab8ff;
  border-color: rgba(90,140,255,.5); }
.ib-btn-primary { background: rgba(90,140,255,.25); color: #9ab8ff;
  border-color: rgba(90,140,255,.5); font-weight: 600; }

/* ── 指標管理面板（終端風格，設計稿 D，2026-10-25）────────── */
.ib-im-overlay { position: fixed; inset: 0; z-index: 9100;
  background: rgba(5,6,8,.66); display: flex; align-items: center;
  justify-content: center; }
.ib-im-box { width: min(1000px, 94vw); max-height: 84vh; display: flex;
  flex-direction: column; border-radius: var(--ib-r-1); overflow: hidden;
  background: #0E1218; border: 1px solid #252C37; color: #C9D1D9;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  font-family: 'JetBrains Mono', var(--ib-mono);
  font-variant-numeric: tabular-nums; }
.ib-im-head { display: flex; align-items: center; gap: var(--ib-sp-5); padding: var(--ib-sp-4) var(--ib-sp-6);
  border-bottom: 1px solid #1A1F27; font-size: var(--ib-fs-xl); }
.ib-im-head strong { color: #F2F4F7; }
.ib-im-sym { padding: var(--ib-sp-1) var(--ib-sp-3); border: 1px solid #3A2A1A; border-radius: var(--ib-r-1);
  background: rgba(255,138,31,.1); color: #FFB066; font-size: var(--ib-fs-s); }
.ib-im-subtitle { font-size: var(--ib-fs-s); color: #8A93A0; }
.ib-im-count { margin-left: auto; font-size: var(--ib-fs-s); color: #8A93A0; }
.ib-im-count.is-warn { color: #FFB066; }
.ib-im-close { width: 30px; height: 30px; background: none; border: 1px solid #252C37;
  border-radius: var(--ib-r-1); color: #C9D1D9; font-size: var(--ib-fs-2xl); line-height: 1; cursor: pointer; }
.ib-im-body { flex: 1; min-height: 0; display: grid;
  grid-template-columns: 1fr 1fr 1.1fr; gap: 1px; background: #1A1F27; }
.ib-im-col { background: #0E1218; overflow: auto; padding: var(--ib-sp-4) var(--ib-sp-5); }
.ib-im-cat { font-size: var(--ib-fs-s); color: #8A93A0; margin: 8px 0 6px; letter-spacing: .06em; }
.ib-im-subcat { font-size: var(--ib-fs-xs); color: #8A93A0; margin: 10px 0 2px; }
.ib-im-row { display: flex; align-items: center; gap: var(--ib-sp-3); padding: var(--ib-sp-1) var(--ib-sp-2);
  border-radius: var(--ib-r-1); font-size: var(--ib-fs-m); color: #E6EDF3; cursor: pointer; }
.ib-im-row input { accent-color: #FF8A1F; margin: 0; }
.ib-im-row:hover { background: #141922; }
.ib-im-row.is-sel { background: #18202B; }
.ib-im-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ib-im-label { flex: 1; }
.ib-im-tabs { display: flex; gap: var(--ib-sp-hair); margin: 0 0 4px; }
.ib-im-tab { height: 26px; padding: 0 var(--ib-sp-4); border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #8A93A0; font: inherit; font-size: var(--ib-fs-s); font-weight: 700;
  cursor: pointer; }
.ib-im-tab[aria-pressed="true"] { color: #F2F4F7; border-bottom-color: #FF8A1F; }
.ib-im-note { font-size: var(--ib-fs-s); line-height: 1.6; color: #8A93A0; margin: 4px 6px 6px; }
.ib-im-detail { font-size: var(--ib-fs-m); }
.ib-im-dtitle { font-weight: 700; font-size: var(--ib-fs-xl); margin-bottom: 10px; color: #F2F4F7; }
.ib-im-field { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ib-sp-3); margin-bottom: 8px; font-size: var(--ib-fs-m); color: #C9D1D9; }
.ib-im-field input[type=number] { width: 90px; height: 30px; box-sizing: border-box;
  padding: 0 var(--ib-sp-3); border-radius: var(--ib-r-1); border: 1px solid #252C37; background: #0A0C0F;
  color: #E6EDF3; font: inherit; }
.ib-im-field input[type=color] { width: 42px; height: 26px; padding: 0; border: none;
  background: none; cursor: pointer; }
/* 線條樣式：一條線一列（名稱 + 色塊 + 線寬 + 線型）*/
.ib-im-sechead { font-size: var(--ib-fs-s); font-weight: 700; color: #8A93A0;
  margin: 14px 0 6px; letter-spacing: .04em; }
.ib-im-srow { display: flex; align-items: center; gap: var(--ib-sp-3); margin-bottom: 6px; }
.ib-im-sname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--ib-fs-m); color: #C9D1D9; }
.ib-im-srow input[type=color] { width: 32px; height: 24px; padding: 0; border: none;
  background: none; cursor: pointer; flex: none; }
.ib-im-sw, .ib-im-sd { height: 26px; box-sizing: border-box; flex: none;
  padding: 0 var(--ib-sp-2); border-radius: var(--ib-r-1); border: 1px solid #252C37;
  background: #0A0C0F; color: #E6EDF3; font: inherit; font-size: var(--ib-fs-s); }
.ib-im-sw { width: 56px; }
.ib-im-sd { width: 88px; cursor: pointer; }
.ib-im-scol { font-size: var(--ib-fs-s); color: #8A93A0; flex: none; }
.ib-im-hint { font-size: var(--ib-fs-s); color: #8A93A0; }
.ib-im-foot { display: flex; align-items: center; gap: var(--ib-sp-4); padding: var(--ib-sp-4) var(--ib-sp-6);
  border-top: 1px solid #1A1F27; }
.ib-im-foot .ib-btn-primary { background: #FF8A1F; border-color: #FF8A1F; color: #0A0C0F;
  font-weight: 700; }
.ib-im-spacer { flex: 1; }

/* ── 自選股（專業版）──────────────────────────────────── */
.ib-wl-groups { display: flex; gap: var(--ib-sp-hair); padding: var(--ib-sp-1) var(--ib-sp-2) 0; flex-wrap: wrap; }
.ib-wl-gtab { display: inline-flex; align-items: center; gap: var(--ib-sp-1); padding: var(--ib-sp-1) var(--ib-sp-3);
  font-size: var(--ib-fs-s); border: none; border-radius: var(--ib-r-1) var(--ib-r-1) 0 0; cursor: pointer;
  background: var(--ib-fill-1); color: var(--ib-ink-2); }
.ib-wl-gtab.is-active { background: rgba(90,140,255,.16); color: #9ab8ff; }
.ib-wl-gn { font-size: var(--ib-fs-xs); opacity: .6; }
.ib-wl-gadd { background: none; border: none; color: var(--ib-ink-3);
  cursor: pointer; font-size: var(--ib-fs-l); padding: 0 var(--ib-sp-1); }
.ib-wl-tools { position: relative; display: flex; align-items: center; gap: var(--ib-sp-1);
  padding: var(--ib-sp-1) var(--ib-sp-2); border-bottom: 1px solid var(--ib-line-1); }
.ib-wl-search { flex: 1; min-width: 0; padding: var(--ib-sp-1) var(--ib-sp-2); font-size: var(--ib-fs-s);
  border-radius: var(--ib-r-1); border: 1px solid var(--ib-line-2);
  background: rgba(0,0,0,.3); color: inherit; text-transform: uppercase; }
.ib-wl-ico { background: none; border: none; color: var(--ib-ink-2);
  cursor: pointer; font-size: var(--ib-fs-m); padding: 1px var(--ib-sp-1); }
.ib-wl-ico:hover { color: var(--ib-ink-0); }
.ib-wl-suggest { position: absolute; top: 100%; left: 6px; right: 6px; z-index: 30;
  background: #1b1e26; border: 1px solid var(--ib-line-2); border-radius: var(--ib-r-1);
  max-height: 180px; overflow: auto; }
.ib-wl-suggest.hidden { display: none; }
.ib-wl-suggest div { padding: var(--ib-sp-1) var(--ib-sp-3); font-size: var(--ib-fs-s); cursor: pointer;
  font-family: var(--ib-mono); }
.ib-wl-suggest div:hover { background: rgba(90,140,255,.2); }
.ib-wl-suggest { max-height: 260px; }
.ib-wl-suggest div { display: flex; align-items: center; gap: var(--ib-sp-2); }
.ib-sg-sym { min-width: 52px; font-weight: 600; }
.ib-sg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ib-ink-2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ib-sg-tag { font-size: var(--ib-fs-xs); padding: 0 var(--ib-sp-1); border-radius: var(--ib-r-1);
  background: var(--ib-fill-2); color: var(--ib-ink-2); }
.ib-sg-tag.ib-sg-stock { background: rgba(90,140,255,.18); color: #a9c2ff; }
.ib-sg-tag.ib-sg-future { background: rgba(255,170,60,.16); color: #ffc98a; }
.ib-sg-in { color: #6fd39b; font-size: var(--ib-fs-xs); }
.ib-sg-note { margin: 0; padding: var(--ib-sp-1) var(--ib-sp-3); font-size: var(--ib-fs-xs); cursor: default;
  color: var(--ib-ink-2); border-top: 1px solid var(--ib-line-1); }
/* 表頭不可以換行 —— 「現價」被擠成兩行時整列高度變兩倍（2026-10-26 截圖） */
.ib-wl-head { white-space: nowrap; display: flex; align-items: center; gap: var(--ib-sp-1); padding: var(--ib-sp-1) var(--ib-sp-3);
  font-size: var(--ib-fs-xs); color: var(--ib-ink-3);
  border-bottom: 1px solid var(--ib-line-1); position: sticky; top: 0;
  background: #0f1116; z-index: 2; }
.ib-wl-th { cursor: pointer; user-select: none; white-space: nowrap;
  overflow: hidden; text-overflow: clip; min-width: 0; }
.ib-wl-th:hover { color: var(--ib-ink-1); }

/* ── 欄寬自適應（2026-10-27）────────────────────────────────
 *
 * 原本：表頭 `.ib-wl-th:nth-child(2) { width: 56px }` 寫在這裡，列的寬度
 * 寫在 `ib-watchlist.js` 的內聯 style —— **兩邊各寫一次**，改一邊就錯位。
 * 而且伸縮的欄位挑錯了：代碼 `flex:1` 一直長，現價鎖死 56px，
 * `539.80` 加上「盤前」徽章就塞不下 → 徽章換行 → 整列變兩行。
 *
 * 現在：表頭與列**共用同一條** `--ib-wl-cols`（由 `ib-wl-layout.js` 從
 * 資料字串長度算出來，存成 CSS 變數）。
 *
 * 🔴 `.is-link`（策略清單）是另一種版面（名次 + 指標欄，`.ib-wl-lc-*`
 *    自己有一套寬度），維持 flex，不要套進來。
 */
.ib-wl-head:not(.is-link), .ib-wl-row:not(.is-link) {
  display: grid;
  grid-template-columns: var(--ib-wl-cols, 10px minmax(4.5ch, 1fr) 7ch 18px);
  align-items: center;
}
/* 徽章永遠不換行 —— 這是「整列變兩行」的直接原因 */
.ib-wl-row:not(.is-link) .ib-wl-px { white-space: nowrap; }
.ib-wl-row:not(.is-link) .ib-wl-sym,
.ib-wl-row:not(.is-link) .ib-wl-cell {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 第三階：空間真的不夠 → 代碼與現價釘住，其餘橫向捲動。
   🔴 **一欄都不丟** —— 那些欄位是使用者自己打開的。 */
.ib-wl-list { min-width: 0; }
.ib-wl-list.is-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ib-wl-list.is-scroll .ib-wl-head:not(.is-link),
.ib-wl-list.is-scroll .ib-wl-row:not(.is-link) { min-width: max-content; }
.ib-wl-list.is-scroll .ib-wl-th-grip,
.ib-wl-list.is-scroll .ib-wl-row:not(.is-link) .ib-wl-grip {
  position: sticky; left: 0; z-index: 3; background: inherit; }
.ib-wl-list.is-scroll .ib-wl-head .ib-wl-th:nth-child(2),
.ib-wl-list.is-scroll .ib-wl-row:not(.is-link) .ib-wl-sym {
  position: sticky; left: var(--ib-wl-grip-w, 14px); z-index: 2; background: inherit; }
.ib-wl-list.is-scroll .ib-wl-head .ib-wl-th:nth-child(3),
.ib-wl-list.is-scroll .ib-wl-row:not(.is-link) .ib-wl-px {
  position: sticky; left: var(--ib-wl-sticky); z-index: 2; background: inherit;
  box-shadow: 7px 0 7px -7px rgba(0, 0, 0, .85); }
/* sticky 的格子要有自己的底色，不然捲過去會透出下面的字 */
.ib-wl-list.is-scroll .ib-wl-head { background: #0f1116; }
.ib-wl-list.is-scroll .ib-wl-row:not(.is-link) { background: var(--ib-bg-1, #0f1116); }
.ib-wl-list.is-scroll .ib-wl-row:not(.is-link):hover { background: var(--ib-bg-3); }
.ib-wl-list.is-scroll .ib-wl-row.is-active { background: #16213a; }
.ib-wl-body { list-style: none; margin: 0; padding: 0; }
.ib-wl-row { display: flex; align-items: center; gap: var(--ib-sp-1); padding: var(--ib-sp-1) var(--ib-sp-3);
  cursor: pointer; border-left: 2px solid transparent; font-size: var(--ib-fs-s); }
.ib-wl-row:hover { background: var(--ib-bg-3); }
.ib-wl-row.is-active { background: rgba(90,140,255,.1); border-left-color: #5a8cff; }
.ib-wl-row.is-cursor { outline: 1px solid var(--ib-line-2); outline-offset: -2px; }
.ib-wl-row.is-drag { opacity: .4; }
.ib-wl-row.is-over { border-top: 2px solid #5a8cff; }
.ib-wl-row.is-up .ib-wl-px, .ib-wl-row.is-up .ib-wl-cell { color: #5fdba7; }
.ib-wl-row.is-down .ib-wl-px, .ib-wl-row.is-down .ib-wl-cell { color: #ff8e9a; }
.ib-wl-sym { flex: 1; font-family: var(--ib-mono); }
/* 🔴 寬度拿掉了 —— 在 grid 裡 `width` 會蓋過軌道寬度，等於把自適應關掉。
 *    （`.is-link` 的 `.ib-wl-lc-px` 本來就用 `width: auto !important` 自己管。）*/
.ib-wl-px { font-family: var(--ib-mono); color: var(--ib-ink-1); }
.ib-wl-cell { font-family: var(--ib-mono); font-size: var(--ib-fs-xs);
  color: var(--ib-ink-2); }
.ib-r { text-align: right; } .ib-c { text-align: center; }
.ib-wl-spark { width: 100%; height: 18px; display: block; }
/* 🔴 × 刪除鈕預設**看不見**（2026-10-26）。原本每一列右邊都掛一個 ×，
 *    一眼望過去全是雜訊，而且最常誤觸的就是它。
 *    滑過那一列、或鍵盤 focus 進去才浮出來 —— 鍵盤走得到才不算倒退。 */
.ib-wl-row .ib-wl-del { opacity: 0; transition: opacity var(--ib-dur-1), color var(--ib-dur-1); }
.ib-wl-row:hover .ib-wl-del,
.ib-wl-row:focus-within .ib-wl-del,
.ib-wl-row.is-active .ib-wl-del,
.ib-wl-del:focus-visible { opacity: 1; }
.ib-wl-del { background: none; border: none; color: var(--ib-ink-3);
  cursor: pointer; font-size: var(--ib-fs-l); line-height: 1; padding: 0; width: 16px; }
.ib-wl-del:hover { color: #ef4e5e; }
.ib-wl-empty { padding: var(--ib-sp-6) var(--ib-sp-4); font-size: var(--ib-fs-s); color: var(--ib-ink-3);
  text-align: center; }
.ib-wl-colpop { position: fixed; z-index: 9200; background: #1b1e26;
  border: 1px solid var(--ib-line-2); border-radius: var(--ib-r-1); padding: var(--ib-sp-2) var(--ib-sp-4);
  display: flex; flex-direction: column; gap: var(--ib-sp-1); font-size: var(--ib-fs-s); }
.ib-wl-colpop label { display: flex; align-items: center; gap: var(--ib-sp-1); cursor: pointer;
  color: var(--ib-ink-1); }

@media (max-width: 860px) {
  .ib-qb-grid { gap: var(--ib-sp-hair) var(--ib-sp-4); }
  .ib-im-body { grid-template-columns: 1fr; }
  .ib-im-box { max-height: 90vh; }
}

/* ══════════════════════════════════════════════════════════
   UI 優化 18 項（2026-10-24）
   ══════════════════════════════════════════════════════════ */

/* ── 骨架（#6 #11）──────────────────────────────────────
 * 取代純文字「載入中…」。切換時不會整塊變空白再跳出來。
 * 只在 >200ms 才顯示（快取命中時 50ms 就回來了，閃一下反而更吵）。 */
@keyframes ibsk-pulse { 0%,100% { opacity: .35 } 50% { opacity: .75 } }
.ibsk { padding: var(--ib-sp-4); animation: ibsk-pulse 1.4s ease-in-out infinite; }
.ibsk-line { display: block; height: 9px; border-radius: var(--ib-r-1);
  background: var(--ib-fill-2); margin: 6px 0; }
.ibsk-row { display: flex; align-items: center; gap: var(--ib-sp-4); margin-bottom: 8px; }
.ibsk-row .ibsk-line { flex: 1; margin: 0; }
.ibsk-chart { display: flex; align-items: flex-end; gap: var(--ib-sp-1); height: 180px;
  margin-bottom: 10px; }
.ibsk-bar { flex: 1 1 0; border-radius: var(--ib-r-1) var(--ib-r-1) 0 0; background: var(--ib-fill-2); }
.ibsk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ib-sp-3) var(--ib-sp-5); }

/* ── 錯誤 + 重試（#5）──────────────────────────────────
 * 🔴 錯誤一定要能自己復原。沒有重試按鈕 = 使用者只能切走再切回來。 */
.ib-errbox { padding: var(--ib-sp-7); text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: var(--ib-sp-3); }
.ib-err-msg { font-size: var(--ib-fs-m); color: #ff8e9a; max-width: 460px; line-height: 1.5; }
.ib-err-hint { font-size: var(--ib-fs-s); color: var(--ib-ink-2); max-width: 460px; }
.ib-emptybox { padding: var(--ib-sp-7); text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: var(--ib-sp-3); }
.ib-empty-msg { font-size: var(--ib-fs-m); color: var(--ib-ink-2); }
.ib-wl-empty-hint { display: block; margin-top: 4px; font-size: var(--ib-fs-xs);
  color: var(--ib-ink-3); }

/* ── 漲跌閃動（#8）────────────────────────────────────── */
@keyframes ib-flash-up { from { background: rgba(31,184,122,.38) } to { background: transparent } }
@keyframes ib-flash-down { from { background: rgba(239,78,94,.38) } to { background: transparent } }
.ib-wl-row.is-flash-up { animation: ib-flash-up .65s ease-out; }
.ib-wl-row.is-flash-down { animation: ib-flash-down .65s ease-out; }
.ib-wl-row:focus-visible { outline: 2px solid #9ab8ff; outline-offset: -2px; }

/* ── Toast ────────────────────────────────────────────── */
.ib-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9500;
  display: flex; flex-direction: column; gap: var(--ib-sp-3); pointer-events: none; }
.ib-toast { pointer-events: auto; max-width: 360px; padding: var(--ib-sp-3) var(--ib-sp-5);
  border-radius: var(--ib-r-1); font-size: var(--ib-fs-m); line-height: 1.5;
  background: rgba(24,27,34,.97); color: var(--ib-ink-0);
  border: 1px solid var(--ib-line-2);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  animation: ib-toast-in .18s ease-out; }
.ib-toast.is-warn { border-color: rgba(255,170,40,.5); color: #ffcb6b; }
.ib-toast.is-ok { border-color: rgba(31,184,122,.5); color: #5fdba7; }
.ib-toast.is-out { opacity: 0; transform: translateY(6px); transition: .25s; }
@keyframes ib-toast-in { from { opacity: 0; transform: translateY(8px) } }

/* ── 右鍵選單（#13）───────────────────────────────────── */
.ib-ctx { position: fixed; z-index: 9400; min-width: 200px; padding: var(--ib-sp-1);
  border-radius: var(--ib-r-1); background: #1b1e26;
  border: 1px solid var(--ib-line-2);
  box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.ib-ctx-item { display: flex; align-items: center; justify-content: space-between;
  gap: var(--ib-sp-5); width: 100%; padding: var(--ib-sp-2) var(--ib-sp-4); border: none; border-radius: var(--ib-r-1);
  background: none; color: var(--ib-ink-0); font-size: var(--ib-fs-m);
  font-family: inherit; cursor: pointer; text-align: left; }
.ib-ctx-item:hover:not(:disabled) { background: rgba(90,140,255,.2); }
.ib-ctx-item:disabled { opacity: .35; cursor: default; }
.ib-ctx-item:focus-visible { outline: 2px solid #9ab8ff; outline-offset: -2px; }
.ib-ctx-item kbd { font-family: var(--ib-mono); font-size: var(--ib-fs-xs);
  padding: 1px var(--ib-sp-1); border-radius: var(--ib-r-1); background: var(--ib-fill-2);
  color: var(--ib-ink-2); }
.ib-ctx-sep { height: 1px; margin: 4px 6px; background: var(--ib-fill-2); }

/* ── 價格警示（#15）───────────────────────────────────── */
.ib-al-note { margin: 10px 14px 0; padding: var(--ib-sp-3) var(--ib-sp-4); border-radius: var(--ib-r-1);
  font-size: var(--ib-fs-s); line-height: 1.55;
  background: rgba(255,170,40,.1); border: 1px solid rgba(255,170,40,.28);
  color: #ffcb6b; }
.ib-al-form { display: flex; gap: var(--ib-sp-2); padding: var(--ib-sp-4) var(--ib-sp-5); flex-wrap: wrap; }
.ib-al-form input, .ib-al-form select { padding: var(--ib-sp-1) var(--ib-sp-3); font-size: var(--ib-fs-m);
  border-radius: var(--ib-r-1); border: 1px solid var(--ib-line-2);
  background: rgba(0,0,0,.3); color: inherit; }
.ib-al-form #ibAlSym { width: 90px; text-transform: uppercase; }
.ib-al-form #ibAlPx { width: 110px; }
.ib-al-list { padding: 0 var(--ib-sp-5) var(--ib-sp-4); }
.ib-al-row { display: flex; align-items: center; gap: var(--ib-sp-4); padding: var(--ib-sp-2) 0;
  font-size: var(--ib-fs-m); border-bottom: 1px solid var(--ib-line-1);
  font-family: var(--ib-mono); }
.ib-al-row.is-fired { opacity: .55; }
.ib-al-sym { width: 70px; font-weight: 600; }
.ib-al-st { flex: 1; font-size: var(--ib-fs-s); color: var(--ib-ink-2); }

/* ── 指標面板搜尋（#18）───────────────────────────────── */
.ib-im-search { width: 160px; height: 28px; box-sizing: border-box; padding: 0 var(--ib-sp-3);
  font: inherit; font-size: var(--ib-fs-s); border-radius: var(--ib-r-1);
  border: 1px solid #252C37; background: #0A0C0F; color: #E6EDF3; }

/* ── 自動更新時間（#7）────────────────────────────────── */
.ib-lastup { font-size: var(--ib-fs-xs); color: var(--ib-ink-3);
  font-family: var(--ib-mono); }

/* chip 改成 button 之後要重設瀏覽器預設樣式 */

/* ── 週/月線不支援還原價的說明（2026-10-24）────────────
 * 🔴 不可默默把資料換成原始價 —— 要讓人看得到發生了什麼、為什麼。 */
.ib-chk.is-disabled { opacity: .4; cursor: not-allowed; }
.ib-chk.is-disabled input { cursor: not-allowed; }
.ib-adj-note { font-size: var(--ib-fs-xs); color: rgba(255,170,40,.8); max-width: 260px;
  line-height: 1.4; }
.ib-adj-note.hidden { display: none; }

/* ── 載入中：保留上一張圖 ─────────────────────────────────
   🔴 不可以用 innerHTML 蓋掉圖表容器 —— 那會把 Highcharts 的 canvas
      炸掉，使用者看到的是整片空白。這裡只壓暗 + 疊一顆膠囊。        */
.ib-chart-host { position: relative; }
.ib-chart-host.is-loading > .highcharts-container {
  opacity: .32;
  filter: saturate(.35);
  transition: opacity .15s ease;
}
.ib-loadpill {
  position: absolute; top: 8px; right: 12px; z-index: 20;
  display: flex; align-items: center; gap: var(--ib-sp-2);
  padding: var(--ib-sp-1) var(--ib-sp-4); border-radius: var(--ib-r-pill);
  background: rgba(20, 24, 33, .92);
  border: 1px solid var(--ib-line-2);
  font-size: var(--ib-fs-m); color: #c9d4e5; pointer-events: none;
  white-space: nowrap;
}
.ib-loadpill::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--ib-line-2);
  border-top-color: #4FA3FF;
  animation: ib-spin .7s linear infinite;
}
@keyframes ib-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ib-loadpill::before { animation: none; }
}

/* ── 下單區（階段 A）────────────────────────────────────── */
.ib-order-result { padding: var(--ib-sp-3) var(--ib-sp-4); }
.ib-order-preview {
  border: 1px solid var(--ib-line, #2a3344);
  border-radius: var(--ib-r-1);
  padding: var(--ib-sp-3);
  background: var(--ib-fill-1);
}
.ib-order-preview.is-bad { border-color: #8a4b4b; }
.ib-order-preview-title { font-weight: 600; margin-bottom: 6px; }
.ib-order-table th {
  text-align: left; font-weight: 400; opacity: .7;
  padding-right: var(--ib-sp-4); white-space: nowrap;
}
.ib-order-table td { text-align: right; }
.ib-order-err  { color: #ff8a80; margin-top: 6px; font-size: var(--ib-fs-m); }
.ib-order-warn { color: #ffcc80; margin-top: 6px; font-size: var(--ib-fs-m); }
.ib-order-ok   { color: #a5d6a7; margin-top: 6px; font-size: var(--ib-fs-m); }
.ib-order-form input[readonly] { opacity: .75; }

/* 委託分頁 */
.ib-order-tab-title {
  font-weight: 600; margin: 10px 0 4px; opacity: .85;
}
.ib-mini {
  font-size: var(--ib-fs-s); padding: 1px var(--ib-sp-2); border-radius: var(--ib-r-1);
  border: 1px solid var(--ib-line, #2a3344); background: transparent;
  color: inherit; cursor: pointer;
}
.ib-mini:hover { background: var(--ib-bg-3); }
.ib-mini:disabled { opacity: .4; cursor: default; }

/* 讀值列的時區小標 —— 🔴 時間是台北時間(+8),不寫明沒人分得出來
   (使用者 2026-10-25 就問了「走勢圖的時間是台灣時區嗎」) */
.ib-ro-tz {
  margin-left: 4px;
  padding: 0 var(--ib-sp-1);
  font-size: var(--ib-fs-xs);
  font-style: normal;
  color: var(--ib-ink-2);
  border: 1px solid var(--ib-line-2);
  border-radius: var(--ib-r-1);
  vertical-align: 1px;
}

/* 🔴 查不到交易時段、用美股時間推算的格子 —— 要看得出來不太可靠
   （2026-10-25：MTWN 就是被美股時間硬套出垃圾數字的） */
.ib-qb-item.is-assumed .ib-qb-v { color: rgba(255, 203, 107, .85); }
.ib-qb-item.is-assumed .ib-qb-l::after { content: ' ⚠'; font-size: var(--ib-fs-xs); }

/* ── 往回看：拖曳時浮出的總覽條、回到最新、往前補提示（2026-10-26）──────
 * 示範頁：https://claude.ai/artifact/PeDUQeEJjiqqQypoABhMqU（使用者選的）
 * 總覽條疊在圖上（不推擠版面）；平常透明且不吃滑鼠，出現時才能拖橘框。
 * 色碼跟 ib-chart.js 的終端風格同一組。 */
.ib-pan-host { position: relative; }
.ib-ov {
  position: absolute; z-index: 4; height: 30px; box-sizing: border-box; overflow: hidden;
  background: rgba(12, 15, 20, .94); border: 1px solid #2A3340; border-radius: var(--ib-r-1);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  touch-action: none; cursor: pointer;
}
.ib-ov.is-show { opacity: 1; pointer-events: auto; transition-duration: .12s; }
.ib-ov-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.ib-ov-win {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box; min-width: 6px;
  border: 1px solid #FF8A1F; background: rgba(255, 138, 31, .18); border-radius: var(--ib-r-1);
  cursor: grab;
}
.ib-ov.is-dragging .ib-ov-win { cursor: grabbing; }
.ib-ov-l, .ib-ov-r {
  position: absolute; top: 1px; padding: 0 var(--ib-sp-1); pointer-events: none;
  font: 10px 'JetBrains Mono', var(--ib-mono);
  color: #8A93A0; background: rgba(12, 15, 20, .85);
}
.ib-ov-l { left: 2px; }
.ib-ov-r { right: 2px; }
/* 放手後的 3 秒倒數 —— 底部橘線縮到 0 就收起 */
.ib-ov-timer {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: #FF8A1F; opacity: 0;
}
.ib-ov-timer.is-run { opacity: .8; width: 0; transition: width 3s linear; }
.ib-pan-latest {
  position: absolute; z-index: 4; padding: var(--ib-sp-1) var(--ib-sp-3); border: 0; border-radius: var(--ib-r-1);
  font: 700 var(--ib-fs-s) 'JetBrains Mono', var(--ib-mono);
  color: #0A0C0F; background: #FF8A1F; cursor: pointer;
}
.ib-pan-latest:hover { filter: brightness(1.08); }
.ib-pan-latest:focus-visible { outline: 2px solid #E6EDF3; outline-offset: -2px; }
.ib-pan-edge {
  position: absolute; z-index: 4; max-width: calc(100% - 90px); padding: var(--ib-sp-1) var(--ib-sp-3);
  border: 1px solid #2A3340; border-radius: var(--ib-r-1); background: rgba(12, 15, 20, .94);
  font: 11px 'JetBrains Mono', var(--ib-mono);
  color: #8A93A0; pointer-events: none;
}
.ib-pan-edge.is-loading { color: #FF8A1F; border-color: #FF8A1F; }
.ib-pan-edge.is-error { color: #F04B5F; border-color: #F04B5F; }
@media (prefers-reduced-motion: reduce) {
  .ib-ov, .ib-ov.is-show, .ib-ov-timer.is-run { transition: none; }
}

/* ── 即時推播狀態（2026-10-26）：右上角「● 即時推播」── */
.ib-stream-state {
  font: 10px 'JetBrains Mono', var(--ib-mono);
  color: var(--ib-ink-2); white-space: nowrap;
}
.ib-stream-state.is-live { color: #2BC48F; }
.ib-stream-state.is-delayed { color: #FF8A1F; }
.ib-stream-state.is-warn { color: #F04B5F; }

/* ── 部位（2026-10-26）────────────────────────────────────────
   終端配色：漲 #2BC48F / 跌 #F04B5F / 強調 #FF8A1F（跟 ib-chart.js 的 THEME 同一組） */
.ib-bt-badge { display: inline-block; min-width: 14px; margin-left: 5px; padding: 0 var(--ib-sp-1);
  border-radius: var(--ib-r-1); background: rgba(255,138,31,.18); color: #FF8A1F;
  font-size: var(--ib-fs-xs); line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.ib-bt-badge[hidden] { display: none; }
.ib-ch-pos { margin-left: 10px; color: #FF8A1F; font-size: var(--ib-fs-s); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ib-ch-pos[hidden] { display: none; }
.ib-pos { display: flex; flex-direction: column; gap: var(--ib-sp-2); }
.ib-pos-top { display: flex; align-items: flex-end; gap: var(--ib-sp-5); flex-wrap: wrap; }
.ib-pos-kpis { display: flex; flex-wrap: wrap; gap: var(--ib-sp-1) var(--ib-sp-7); align-items: flex-end; }
.ib-pos-kpi { display: flex; flex-direction: column; gap: 1px; }
.ib-pos-kpi[title] { cursor: help; }
.ib-pos-kpi span { font-size: var(--ib-fs-xs); color: var(--ib-ink-2); }
.ib-pos-kpi b { font: 600 var(--ib-fs-l) var(--ib-mono);
  color: #E6EDF3; font-variant-numeric: tabular-nums; }
.ib-pos-kpi.is-big b { font-size: var(--ib-fs-2xl); }
.ib-pos-kpi b.is-up { color: #2BC48F; }
.ib-pos-kpi b.is-down { color: #F04B5F; }
.ib-pos-fresh { margin-left: auto; font-size: var(--ib-fs-xs); color: var(--ib-ink-2); cursor: help;
  white-space: nowrap; }
.ib-pos-dot { font-style: normal; margin-right: 4px; color: #2BC48F; }
.ib-pos-fresh.is-off .ib-pos-dot { color: var(--ib-ink-3); }
.ib-pos-table td, .ib-pos-acct-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ib-pos-table td.is-up, .ib-pos-acct-table td.is-up { color: #2BC48F; }
.ib-pos-table td.is-down, .ib-pos-acct-table td.is-down { color: #F04B5F; }
.ib-pos-table tr[data-ib-pos-sym] { cursor: pointer; }
.ib-pos-table tr[data-ib-pos-sym]:hover td { background: var(--ib-bg-3); }
.ib-pos-table tr.is-snap td { opacity: .82; }
.ib-pos-sym b { color: #E6EDF3; }
.ib-pos-sub { display: block; font-size: var(--ib-fs-xs); color: var(--ib-ink-2); }
.ib-pos-note { color: #FF8A1F; cursor: help; }
.ib-pos-ccy { font-style: normal; font-size: var(--ib-fs-xs); color: var(--ib-ink-2); }
.ib-pos-table small { font-size: var(--ib-fs-xs); opacity: .85; }
.ib-pos-wcell { min-width: 92px; }
.ib-pos-w { display: inline-block; width: 40px; height: 4px; margin-right: 6px;
  vertical-align: middle; background: var(--ib-fill-2); border-radius: var(--ib-r-1); overflow: hidden; }
.ib-pos-w i { display: block; height: 100%; background: #FF8A1F; }
.ib-pos-sec { margin-top: 4px; font-size: var(--ib-fs-s); color: var(--ib-ink-2); }
.ib-pos-acct { color: var(--ib-ink-1); }
.ib-pos-acct-table tr[title] { cursor: help; }
.ib-pos-warn { font-size: var(--ib-fs-s); color: #ffcb6b; }
.ib-pos-err { padding: var(--ib-sp-6); text-align: center; font-size: var(--ib-fs-m); color: #ff8e9a;
  display: flex; flex-direction: column; gap: var(--ib-sp-3); align-items: center; }
.ib-pos-err .ib-note { margin-top: 0; color: var(--ib-ink-2); }

/* 推播來的數字變了亮一下（2026-10-26）—— 讓人看得出「它是活的」 */
/* 🔴 原本是「整格橘底 0.8 秒淡出」。部位的現價每一次推播都在變，
 *    0.8 秒還沒退完下一筆又來 —— 畫面上看起來是**永遠亮著一塊咖啡色**
 *    （2026-10-26 使用者截圖）。改成細邊框閃一下，時間砍到 0.18 秒：
 *    看得到「這格剛跳過」，但不會糊成一片。 */
@keyframes ibPosFlash {
  from { box-shadow: inset 0 0 0 1px var(--ib-warn); }
  to { box-shadow: inset 0 0 0 1px transparent; }
}
.ib-pos-flash { animation: ibPosFlash .18s ease-out; }

/* 使用者設了「減少動態效果」就不要閃 —— 連同自選清單的漲跌閃爍 */
@media (prefers-reduced-motion: reduce) {
  .ib-pos-flash, .ib-wl-row.is-flash-up, .ib-wl-row.is-flash-down { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .ib-pos-flash { animation: none; } }

/* ── 自選清單管理（2026-10-26）：改名、拖曳排序、管理清單、刪除可復原 ────────── */
.ib-watch-body { position: relative; }
.ib-wl-groups { position: relative; align-items: center; gap: var(--ib-sp-1); padding: var(--ib-sp-1) var(--ib-sp-2) var(--ib-sp-1); }
.ib-wl-gtab { position: relative; height: 22px; padding: 0 var(--ib-sp-3); border-radius: var(--ib-r-1);
  outline: none; touch-action: none; border: 1px solid transparent; user-select: none; }
.ib-wl-gtab:hover { background: var(--ib-bg-3); }
.ib-wl-gtab:focus-visible { border-color: #5a8cff; }
.ib-wl-gtab.is-dragging { opacity: .35; }
.ib-wl-gname { white-space: nowrap; }
.ib-wl-gmore { width: 15px; height: 15px; margin-right: -4px; padding: 0; border: none;
  border-radius: var(--ib-r-1); background: none; color: inherit; cursor: pointer; font-size: var(--ib-fs-s);
  line-height: 15px; }
.ib-wl-gmore:hover { background: var(--ib-bg-3); }
.ib-wl-rename { width: 7.5em; height: 17px; padding: 0 var(--ib-sp-1); font: inherit; font-size: var(--ib-fs-s);
  border: 1px solid #5a8cff; border-radius: var(--ib-r-1); background: #0a0d12; color: #e6edf3;
  outline: none; }
.ib-wl-gadd { height: 22px; border-radius: var(--ib-r-1); }
.ib-wl-gadd:hover { background: var(--ib-bg-3); color: var(--ib-ink-0); }
/* ＋ ≡ 放在「自選」標題列右邊、收起鈕前面；大小跟收起鈕一樣，標題列不會變高 */
.ib-watch-head-acts { display: flex; align-items: center; gap: 1px; margin-left: auto; }
.ib-watch-head-acts .ib-wl-gadd { height: auto; padding: var(--ib-sp-hair) var(--ib-sp-1); line-height: 1; }
.ib-wl-gmanage[aria-pressed="true"] { background: rgba(90,140,255,.16); color: #9ab8ff; }
.ib-wl-drop-v { position: absolute; width: 2px; background: #5a8cff; border-radius: var(--ib-r-1);
  pointer-events: none; z-index: 5; }
.ib-wl-drop-h { position: absolute; left: 4px; right: 4px; height: 2px; background: #5a8cff;
  border-radius: var(--ib-r-1); pointer-events: none; z-index: 5; }
.ib-wl-body { position: relative; }
.ib-wl-th-grip { width: 10px; flex: 0 0 10px !important; }
.ib-wl-grip { flex: 0 0 10px; width: 10px; color: var(--ib-ink-3); font-size: var(--ib-fs-xs);
  letter-spacing: -2px; cursor: grab; opacity: 0; touch-action: none; text-align: center;
  user-select: none; }
.ib-wl-row:hover .ib-wl-grip, .ib-wl-row:focus-visible .ib-wl-grip { opacity: 1; }
.ib-wl-row.is-dragging { opacity: .35; }
.ib-wl-row:hover .ib-wl-del, .ib-wl-row.is-cursor .ib-wl-del { color: var(--ib-ink-2); }
@media (hover: none) { .ib-wl-grip { opacity: .6; } .ib-wl-del { color: var(--ib-ink-2); } }
.ib-wl-syncwarn { margin: 0 6px 4px; padding: var(--ib-sp-1) var(--ib-sp-3); border-radius: var(--ib-r-1); font-size: var(--ib-fs-xs);
  line-height: 1.45; color: #ffcb6b; background: rgba(255,170,40,.08);
  border: 1px solid rgba(255,170,40,.25); }
.ib-wl-manage { position: absolute; z-index: 40; left: 6px; right: 6px; top: 34px;
  display: flex; flex-direction: column; gap: var(--ib-sp-3); padding: var(--ib-sp-4); border-radius: var(--ib-r-1);
  background: #1b1e26; border: 1px solid var(--ib-line-2);
  box-shadow: 0 14px 34px rgba(0,0,0,.55); }
/* 自選欄窄的時候說明掉到第二行 —— 不要把「管理清單」擠成「管理清 / 單」 */
.ib-wl-mhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--ib-sp-hair) var(--ib-sp-3); white-space: nowrap;
  font-size: var(--ib-fs-m); font-weight: 600; color: var(--ib-ink-0); }
.ib-wl-mhead span { font-size: var(--ib-fs-xs); font-weight: 400; color: var(--ib-ink-2); white-space: normal; }
.ib-wl-mlist { position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ib-sp-hair); }
.ib-wl-mrow { display: flex; align-items: center; gap: var(--ib-sp-2); height: 28px; padding: 0 var(--ib-sp-1);
  border-radius: var(--ib-r-1); }
.ib-wl-mrow:hover { background: var(--ib-bg-3); }
.ib-wl-mrow.is-dragging { opacity: .35; }
.ib-wl-mrow .ib-wl-grip { opacity: .8; }
.ib-wl-mrow input { flex: 1; min-width: 0; height: 22px; padding: 0 var(--ib-sp-2); font: inherit;
  font-size: var(--ib-fs-s); border: 1px solid transparent; border-radius: var(--ib-r-1); background: transparent;
  color: var(--ib-ink-0); }
.ib-wl-mrow input:hover { border-color: var(--ib-line-2); }
.ib-wl-mrow input:focus { outline: none; border-color: #5a8cff; background: #0a0d12; }
.ib-wl-mcnt { width: 24px; text-align: right; font-size: var(--ib-fs-xs); color: var(--ib-ink-2);
  font-family: var(--ib-mono); }
.ib-wl-mdel { width: 18px; height: 18px; padding: 0; border: none; border-radius: var(--ib-r-1);
  background: none; color: var(--ib-ink-2); cursor: pointer; font-size: var(--ib-fs-l); line-height: 18px; }
.ib-wl-mdel:hover:not(:disabled) { color: #ef4e5e; background: rgba(239,78,94,.12); }
.ib-wl-mdel:disabled { opacity: .3; cursor: default; }
.ib-wl-mfoot { display: flex; justify-content: space-between; gap: var(--ib-sp-2); }
.ib-wl-mfoot .ib-mini { padding: var(--ib-sp-1) var(--ib-sp-4); }
.ib-mini.is-primary { background: #5a8cff; border-color: #5a8cff; color: #fff; }
.ib-mini.is-primary:hover { background: #6e9aff; }
.ib-ctx-head { padding: var(--ib-sp-1) var(--ib-sp-4) var(--ib-sp-1); font-size: var(--ib-fs-s); color: var(--ib-ink-2);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-ctx-why { padding: 0 var(--ib-sp-4) var(--ib-sp-1); font-size: var(--ib-fs-xs); color: var(--ib-ink-2); }
.ib-ctx-item.is-danger { color: #ff8e9a; }
.ib-ctx-item.is-danger:hover:not(:disabled) { background: rgba(239,78,94,.16); }
.ib-toast.has-act { display: flex; align-items: center; gap: var(--ib-sp-5); }
.ib-toast-act { flex: 0 0 auto; padding: var(--ib-sp-1) var(--ib-sp-4); border: none; border-radius: var(--ib-r-1);
  background: rgba(255,138,31,.16); color: #ff8a1f; font: inherit; font-weight: 600;
  cursor: pointer; }
.ib-toast-act:hover { background: rgba(255,138,31,.26); }

/* ── 策略清單 ⚡（2026-10-26）：琥珀色 = 名單由策略決定、盤中會自己換；藍色 = 自己的清單 ──
   展示頁 https://claude.ai/artifact/PgVa7Sq8kKzoe85ZaKHyEf */
.ib-wl-tsep { flex: 0 0 auto; width: 1px; height: 16px; margin: 0 3px; background: var(--ib-fill-3); }
.ib-wl-ltab { position: relative; display: inline-flex; align-items: center; gap: var(--ib-sp-1); height: 22px;
  padding: 0 var(--ib-sp-3); border-radius: var(--ib-r-1); cursor: pointer; font-size: var(--ib-fs-s); white-space: nowrap;
  color: rgba(255,214,150,.75); background: rgba(245,165,36,.06); border: 1px solid rgba(245,165,36,.2);
  outline: none; touch-action: none; user-select: none; }
.ib-wl-ltab:hover { background: rgba(245,165,36,.12); }
.ib-wl-ltab:focus-visible { border-color: #5a8cff; }
.ib-wl-ltab.is-active { background: rgba(245,165,36,.16); color: #ffc56b; border-color: rgba(245,165,36,.55); }
.ib-wl-ltab.is-dragging { opacity: .35; }
.ib-wl-bolt { color: #f5a524; font-size: var(--ib-fs-xs); }
.ib-wl-ldot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: #f5a524; box-shadow: 0 0 0 2px #0f1116; }

/* 搜尋列的位置換成策略標題列（名單由策略決定，不能自己加代碼） */
.ib-wl-shead { padding: var(--ib-sp-1) var(--ib-sp-2) var(--ib-sp-2) var(--ib-sp-3); display: flex; flex-direction: column; gap: var(--ib-sp-1);
  border-top: 1px solid rgba(245,165,36,.45); border-bottom: 1px solid var(--ib-line-1);
  background: linear-gradient(180deg, rgba(245,165,36,.07), rgba(245,165,36,0)); }
.ib-wl-shead-top { display: flex; align-items: center; gap: var(--ib-sp-1); min-width: 0; }
.ib-wl-shead-opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ib-sp-1); }
.ib-wl-sname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--ib-fs-s); color: var(--ib-ink-0); }
.ib-wl-spill { flex: 0 0 auto; height: 18px; padding: 0 var(--ib-sp-2); border: 1px solid rgba(245,165,36,.5);
  border-radius: var(--ib-r-1); background: none; color: #ffc56b; font: inherit; font-size: var(--ib-fs-xs);
  cursor: pointer; white-space: nowrap; }
.ib-wl-spill:hover { background: rgba(245,165,36,.14); }
.ib-wl-spill:focus-visible, .ib-wl-ladd:focus-visible, .ib-wl-seg button:focus-visible,
.ib-wl-pclose:focus-visible { outline: 1px solid #5a8cff; outline-offset: -2px; }
.ib-wl-sp { flex: 1; }
.ib-wl-sstate { display: flex; align-items: flex-start; gap: var(--ib-sp-1); font-size: var(--ib-fs-xs); line-height: 1.45;
  color: var(--ib-ink-2); }
.ib-wl-led { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%;
  background: var(--ib-fill-3); }
.ib-wl-sstate.is-live .ib-wl-led { background: #1fb87a; box-shadow: 0 0 0 3px rgba(31,184,122,.15); }
.ib-wl-sstate.is-wait .ib-wl-led { background: #ffcb6b; }
.ib-wl-sstate.is-err { color: #ff8e9a; }
.ib-wl-sstate.is-err .ib-wl-led { background: #ef4e5e; }

/* 名次列（自選欄預設約 190px，2026-10-26 截圖量過）：
   名次放進代碼那一格、欄寬固定、＋ 只在滑過那一列時蓋在右邊 —— 多一欄就會把代碼擠到看不見。 */
.ib-wl-head.is-link { gap: var(--ib-sp-hair); }
.ib-wl-head.is-link .ib-wl-th { white-space: nowrap; overflow: hidden; }
.ib-wl-head.is-link .ib-wl-lth-sym { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--ib-sp-1); }
.ib-wl-row.is-link { position: relative; gap: var(--ib-sp-hair); }
.ib-wl-row.is-link .ib-wl-sym { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--ib-sp-hair);
  white-space: nowrap; overflow: hidden; }
.ib-wl-rank { flex: 0 0 auto; min-width: 6px; font-family: var(--ib-mono); font-size: var(--ib-fs-xs);
  color: #ffc56b; opacity: .85; }
.ib-wl-symt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ib-wl-new { flex: 0 0 auto; display: inline-block; padding: 0 1px; border-radius: var(--ib-r-1); background: #f5a524;
  color: #1a1204; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-style: normal;
  font-size: var(--ib-fs-micro); font-weight: 700; line-height: 11px; }
/* 現價依內容（四位數美股 7 個字也不會壓到旁邊），它右邊的欄寬固定 → 每一列的數字照樣對齊 */
.ib-wl-lc-px { flex: 0 0 auto !important; width: auto !important; min-width: 42px; }
.ib-wl-lc { flex: 0 0 40px; width: 40px; }
.ib-wl-lc-m { flex: 0 0 32px; width: 32px; }
.ib-wl-metric.is-long { font-size: var(--ib-fs-micro); }     /* +1300% 之類六個字：縮字，不截斷（截斷會變成錯的數字） */
.ib-wl-metric { color: var(--ib-ink-1); }
.ib-wl-row.is-up .ib-wl-metric, .ib-wl-row.is-down .ib-wl-metric { color: var(--ib-ink-1); }
.ib-wl-ladd { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
  padding: 0; border-radius: var(--ib-r-1); border: 1px solid rgba(245,165,36,.5); background: #1b1e26; color: #ffc56b;
  cursor: pointer; font-size: var(--ib-fs-m); line-height: 16px; opacity: 0; pointer-events: none; }
.ib-wl-row.is-link:hover .ib-wl-ladd, .ib-wl-row.is-link:focus-within .ib-wl-ladd { opacity: 1; pointer-events: auto; }
.ib-wl-ladd:hover { background: rgba(245,165,36,.2); }
.ib-wl-row.is-stale { opacity: .45; }
/* 盤前/盤後小標 —— 貼在現價右邊，不另外佔一欄（清單已經很擠）。
   用琥珀色而不是紅綠：紅綠保留給漲跌。 */
.ib-wl-sess { font-style: normal; font-size: 9px; line-height: 1;
  margin-left: 3px; padding: 1px 2px; border-radius: var(--ib-r-1);
  color: #FFC46B; background: rgba(255,170,40,.14); cursor: help;
  vertical-align: 2px; }
.ib-wl-empty.is-err { color: #ff8e9a; }
.ib-wl-empty.is-err .ib-mini { margin-top: 6px; }
.ib-wl-sfoot { padding: var(--ib-sp-1) var(--ib-sp-3) var(--ib-sp-3); display: flex; flex-direction: column; gap: var(--ib-sp-1);
  font-size: var(--ib-fs-xs); line-height: 1.45; }
.ib-wl-gone { color: var(--ib-ink-2); }
.ib-wl-gone b { font-family: var(--ib-mono); font-weight: 600; color: var(--ib-ink-1);
  text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.ib-wl-snote { color: var(--ib-ink-3); }

/* 連結策略面板（跟管理清單同一種浮出面板） */
.ib-wl-picker { position: absolute; z-index: 40; left: 6px; right: 6px; top: 34px; max-height: 70vh;
  overflow: auto; display: flex; flex-direction: column; gap: var(--ib-sp-3); padding: var(--ib-sp-4); border-radius: var(--ib-r-1);
  background: #1b1e26; border: 1px solid var(--ib-line-2); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.ib-wl-picker .ib-wl-mhead { align-items: center; }
.ib-wl-pclose { width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--ib-r-1); background: none;
  color: var(--ib-ink-2); cursor: pointer; font-size: var(--ib-fs-xl); line-height: 20px; }
.ib-wl-pclose:hover { background: var(--ib-bg-3); color: #fff; }
.ib-wl-psub, .ib-wl-pfoot { font-size: var(--ib-fs-xs); line-height: 1.5; color: var(--ib-ink-2); }
.ib-wl-pfoot { color: var(--ib-ink-3); }
.ib-wl-pfoot.is-warn { color: #ffcb6b; }
.ib-wl-pcard { display: flex; flex-direction: column; gap: var(--ib-sp-1); padding: var(--ib-sp-3); border-radius: var(--ib-r-1);
  border: 1px solid rgba(245,165,36,.4); background: rgba(245,165,36,.05); }
.ib-wl-pcard-h { display: flex; align-items: center; gap: var(--ib-sp-1); font-size: var(--ib-fs-s); color: var(--ib-ink-0); }
.ib-wl-psid { font-family: var(--ib-mono); font-size: var(--ib-fs-xs); color: var(--ib-ink-2); }
.ib-wl-pcard-m, .ib-wl-pcard-now { font-size: var(--ib-fs-xs); line-height: 1.45; color: var(--ib-ink-2); }
.ib-wl-mono { font-family: var(--ib-mono); color: var(--ib-ink-1); overflow-wrap: anywhere; }
.ib-wl-pcard-r, .ib-wl-pcard-a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ib-sp-2); font-size: var(--ib-fs-xs);
  color: var(--ib-ink-2); white-space: nowrap; }
.ib-wl-pcard-a .ib-mini { margin-left: auto; }
/* 自選欄窄：按鈕組不可以被壓縮（「20」原本被切掉看不到），放不下就讓「連結」換到下一行 */
.ib-wl-seg { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--ib-line-2); border-radius: var(--ib-r-1); overflow: hidden; }
.ib-wl-seg button { min-width: 26px; height: 20px; padding: 0 var(--ib-sp-1); border: none; background: none;
  color: var(--ib-ink-2); font-family: var(--ib-mono); font-size: var(--ib-fs-xs); cursor: pointer; }
.ib-wl-seg button + button { border-left: 1px solid var(--ib-line-2); }
.ib-wl-seg button[aria-checked="true"] { background: rgba(245,165,36,.16); color: #ffc56b; }
.ib-mini.is-amber { background: #f5a524; border-color: #f5a524; color: #1a1204; font-weight: 600; }
.ib-mini.is-amber:hover:not(:disabled) { background: #ffb845; }
.ib-wl-msec { padding-top: var(--ib-sp-hair); font-size: var(--ib-fs-xs); letter-spacing: .04em; color: rgba(255,214,150,.7); }
.ib-wl-mempty { font-size: var(--ib-fs-xs); color: var(--ib-ink-2); padding: var(--ib-sp-hair) var(--ib-sp-1); }


/* ── 控件：下拉與勾選框一律自繪 ────────────────────────────
 * 🔴 2026-10-26 之前這兩種**完全沒有樣式**，長的是作業系統原生外觀
 *    （淺色箭頭、藍色勾、跟旁邊按鈕高度不一樣）—— 一眼就看得出不是
 *    專業終端。高度一律走 `--ib-ctl-h`，按鈕、下拉、勾選框才對得齊。
 * 🔴 `<option>` 要另外給色 —— 下拉展開的清單是作業系統畫的，
 *    不設的話深色底配深色字，在部分平台會看不見。 */
.ib-chart-ctrls select {
  appearance: none; -webkit-appearance: none;
  height: var(--ib-ctl-h); padding: 0 var(--ib-sp-7) 0 var(--ib-sp-3); margin: 0;
  background-color: var(--ib-bg-2); color: var(--ib-ink-1);
  border: 1px solid var(--ib-line-2); border-radius: var(--ib-r-1);
  font-family: inherit; font-size: var(--ib-fs-s); line-height: 1; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238A93A0' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
  transition: background-color var(--ib-dur-1), border-color var(--ib-dur-1); }
.ib-chart-ctrls select:hover { background-color: var(--ib-bg-3); }
.ib-chart-ctrls select:focus-visible { outline: 2px solid var(--ib-accent-ink);
  outline-offset: -2px; }
.ib-chart-ctrls select option { background: var(--ib-bg-2); color: var(--ib-ink-1); }

.ib-chk { display: inline-flex; align-items: center; gap: var(--ib-sp-1); height: var(--ib-ctl-h);
  font-size: var(--ib-fs-s); color: var(--ib-ink-2); cursor: pointer;
  user-select: none; transition: color var(--ib-dur-1); }
.ib-chk:hover { color: var(--ib-ink-1); }
.ib-chk input { appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto;
  width: 13px; height: 13px; border: 1px solid var(--ib-line-2);
  border-radius: var(--ib-r-1); background: var(--ib-bg-2); cursor: pointer;
  display: grid; place-content: center;
  transition: background var(--ib-dur-1), border-color var(--ib-dur-1); }
.ib-chk input::after { content: ''; width: 7px; height: 3px;
  border: 1.5px solid var(--ib-bg-0); border-top: 0; border-right: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--ib-dur-1); }
.ib-chk input:checked { background: var(--ib-accent); border-color: var(--ib-accent); }
.ib-chk input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ib-chk input:focus-visible { outline: 2px solid var(--ib-accent-ink); outline-offset: 2px; }


/* ── 右欄的商品資訊（U3）──────────────────────────────────
 * 右欄 230px 原本整區是停用的下單表單 —— 畫面最貴的位置放著一個
 * 永遠按不下去的東西。改成先給「這檔現在的狀況」。 */
.ib-info { padding: var(--ib-sp-3) var(--ib-sp-4); display: flex; flex-direction: column; gap: var(--ib-sp-1);
  border-bottom: 1px solid var(--ib-line-1); }
.ib-info-sym { font-family: var(--ib-mono); font-size: var(--ib-fs-l);
  font-weight: 700; color: var(--ib-ink-0); margin-bottom: 3px; }
.ib-info-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--ib-sp-3); font-size: var(--ib-fs-s); }
.ib-info-row span { color: var(--ib-ink-2); }
.ib-info-row b { font-family: var(--ib-mono); font-weight: 500; color: var(--ib-ink-1); }
.ib-info-row b.is-up { color: var(--ib-up-soft); }
.ib-info-row b.is-down { color: var(--ib-down-soft); }
.ib-order-fold { margin: 6px 10px 0; }
.ib-order-fold > summary { cursor: pointer; font-size: var(--ib-fs-s);
  color: var(--ib-ink-2); padding: var(--ib-sp-1) 0; list-style: none;
  display: flex; align-items: center; gap: var(--ib-sp-1); }
.ib-order-fold > summary::before { content: '⌄'; transition: transform var(--ib-dur-1);
  display: inline-block; }
.ib-order-fold[open] > summary::before { transform: rotate(180deg); }
.ib-order-fold > summary:hover { color: var(--ib-ink-1); }
.ib-order-fold > summary::-webkit-details-marker { display: none; }

/* ══════════════════════════════════════════════════════════
   指標面板：分類樹版（2026-10-27）
   指標從 24 支變成 101 支，平鋪清單捲不完 → 左分類樹 + 中清單 + 右詳情。
   ══════════════════════════════════════════════════════════ */
/* 左欄窄（只放分類名 + 數量）、中欄放清單、右欄放參數與公式 */
.ib-im-tree .ib-im-body { grid-template-columns: 150px 1.1fr 1.25fr; }
.ib-im-tree .ib-im-box  { width: min(1120px, 96vw); }

.ib-im-cats { padding: var(--ib-sp-3) var(--ib-sp-2); }
.ib-im-catlist { display: flex; flex-direction: column; gap: 1px; }
.ib-im-catrow {
  display: flex; align-items: center; gap: var(--ib-sp-2);
  width: 100%; height: 30px; padding: 0 var(--ib-sp-3);
  background: none; border: 0; border-radius: var(--ib-r-1);
  color: #B6BDC8; font-size: var(--ib-fs-m); text-align: left; cursor: pointer;
}
.ib-im-catrow:hover { background: #141922; }
/* 選中用左側橘條 + 提亮 —— 不用背景大色塊，避免跟右邊清單的 is-sel 打架 */
.ib-im-catrow.is-sel { background: #18202B; color: #F2F4F7; box-shadow: inset 2px 0 0 #FF8A1F; }
.ib-im-catname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-im-catn { font-size: var(--ib-fs-xs); color: #6B7280; font-variant-numeric: tabular-nums; }
.ib-im-catrow.is-sel .ib-im-catn { color: #8A93A0; }
.ib-im-catsep { height: 1px; background: #1A1F27; margin: var(--ib-sp-3) var(--ib-sp-3); }

/* ▦ 主圖 / ▤ 附圖 —— 不用顏色傳這個語意（顏色已經被指標自己用掉了） */
.ib-im-pane { width: 12px; flex: none; color: #5A6372; font-size: var(--ib-fs-xs); }
/* ⚠ 公式與教科書不同 */
.ib-im-warn { flex: none; color: #FFB066; font-size: var(--ib-fs-s); cursor: help; }

.ib-im-items { display: flex; flex-direction: column; }
.ib-im-items .ib-im-list { flex: 1; min-height: 0; overflow: auto; }

.ib-im-dpane {
  margin-left: var(--ib-sp-3); padding: 1px var(--ib-sp-2);
  border: 1px solid #252C37; border-radius: var(--ib-r-1);
  font-size: var(--ib-fs-xs); font-weight: 400; color: #8A93A0; vertical-align: middle;
}
/* 與教科書不同的說明 —— 用琥珀色左條，跟錯誤訊息（紅）分開 */
.ib-im-caveat {
  margin: 0 0 var(--ib-sp-4); padding: var(--ib-sp-3) var(--ib-sp-4);
  border-left: 2px solid #C9A227; border-radius: 0 var(--ib-r-1) var(--ib-r-1) 0;
  background: #17150F; color: #C8CED8; font-size: var(--ib-fs-s); line-height: 1.65;
}
.ib-im-caveat b { display: block; margin-bottom: 2px; color: #FFB066; font-weight: 700; }

.ib-im-formula { margin-top: var(--ib-sp-5); font-size: var(--ib-fs-s); color: #8A93A0; }
.ib-im-formula b { display: block; margin-bottom: var(--ib-sp-2); color: #B6BDC8; letter-spacing: .06em; }
.ib-im-formula pre {
  margin: 0; padding: var(--ib-sp-3) var(--ib-sp-4);
  background: #0A0D12; border: 1px solid #1A1F27; border-radius: var(--ib-r-1);
  color: #C8CED8; font-family: var(--ib-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: var(--ib-fs-xs); line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.ib-im-src { margin-top: var(--ib-sp-3); font-size: var(--ib-fs-xs); color: #6B7280; }
.ib-im-src code { color: #8A93A0; word-break: break-all; }

@media (max-width: 860px) {
  /* 手機：分類樹改成橫向一排，清單與詳情各自整寬 */
  .ib-im-tree .ib-im-body { grid-template-columns: 1fr; }
  .ib-im-cats { padding: var(--ib-sp-3); }
  .ib-im-catlist { flex-direction: row; flex-wrap: wrap; gap: var(--ib-sp-2); }
  .ib-im-catrow { width: auto; height: 28px; border: 1px solid #252C37; }
  .ib-im-catrow.is-sel { box-shadow: none; border-color: #FF8A1F; }
}

/* 指標面板：「附圖擠到看不清楚」的提示 + 一鍵收起下方面板（2026-10-27）。
   實測 1680×1000：10 格每格只有 34px，收起下方面板（+200px）變 48px ——
   那是這個版面裡唯一真的能變出空間的槓桿，所以直接做成按鈕。 */
.ib-im-crowd { display: inline-flex; align-items: center; gap: var(--ib-sp-3); }
.ib-im-crowdnote { font-size: var(--ib-fs-s); color: #FFB066; }
.ib-im-crowd .ib-btn-sm { border-color: #3A2A1A; color: #FFB066; }
.ib-im-crowd .ib-btn-sm:hover { border-color: #FF8A1F; color: #FFC489; }

/* ── 附圖排序（2026-10-27）────────────────────────────────
   只有「★已開啟」頁的附圖那幾列才有 ▲▼。主圖疊在 K 棒上、
   參考線也沒有順序可言，所以它們不顯示。 */
.ib-im-ord { margin-left: auto; display: inline-flex; gap: 2px; flex: none; }
.ib-im-ord button {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  background: #141922; border: 1px solid #252C37; border-radius: var(--ib-r-1);
  color: #B6BDC8; font-size: 10px; cursor: pointer;
}
.ib-im-ord button:hover:not(:disabled) { background: #1E2836; border-color: #FF8A1F; color: #F2F4F7; }
/* 🔴 到頂／到底要**看得出來**不能按，不是按了沒反應 */
.ib-im-ord button:disabled { opacity: .28; cursor: default; }

.ib-im-row.is-sortable { cursor: grab; }
.ib-im-row.is-dragging { opacity: .45; }
/* 拖到哪一列，那一列上緣亮一條 */
.ib-im-row.is-drop { box-shadow: inset 0 2px 0 0 #FF8A1F; }