/* 期貨籌碼快訊專頁樣式。共用 app.css 的變數 / nav / footer / notice-banner /
   toast 等既有類別，這裡只補本頁特有的元件（籌碼快訊分區塊表、散戶多空比
   歷史圖、AI 點評卡）。比照 dividend.css / institutional.css 的既有結構
   與命名慣例。 */

/* ==========================================================================
   盤後重點解讀（規則式、零 AI 成本，任務 #58 M1）
   卡殼本身用 app.css 的 .sv-section/.sv-section-head/.sv-section-title/
   .sv-data-date/.sv-empty 共用元件層（見 docs/design_system.md）。

   ⚠ 條列本身（.insight-item / -head / .insight-fact / .insight-note /
   .insight-learn-link ＋ 類別徽章）的樣式**已於 #216（2026-08-17 質感升級）
   全部收進 app.css 檔尾「共用皮膚 ④：盤後重點解讀洞察卡家族」**——本檔、
   institutional.css、industry.css、etf.css 原本各存一份逐字相同的副本，改一
   次要改四遍。要調這組卡請改 app.css 那一段，不要在這裡長回第二份。
   ========================================================================== */

/* 任務#68 M3：全站教學連結佈線——「深入學習 →」連結基底樣式（由
   web/static/learn_links.js makeLearnLink() 產生，class="sv-learn-link"）。
   洞察卡裡的那顆另由 app.css `.insights-list .insight-learn-link` 升級成
   膠囊，這裡是其他使用處的基底。 */
.sv-learn-link {
  display: inline-block;
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
}

.sv-learn-link:hover {
  color: var(--brand-cyan-text);
  text-decoration: underline;
}

.fut-section {
  margin-bottom: 28px;
}

.fut-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.fut-section-head h2 {
  margin: 0;
  font-size: clamp(15px, 0.6vw + 13px, 16px);
  font-weight: 800;
  color: var(--text);
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fut-as-of {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.fut-history-days-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* .fut-badge-pro 已移除（2026-07-15 徽章統一）：PRO 功能標示一律用全站
   共用 .tier-badge.tier-pro（app.css），不再各頁自造橘黃版。 */

/* ---------- 快訊分區塊 ---------- */

/* 版面（2026-08-07 排版重整，站長抓包「這個頁面排版太爛」）：
   原本是 auto-fit minmax(300px,1fr) 自動決定欄數（1280 排 3 欄、1720 排
   4 欄）＋部分卡片 span 2。問題是這一區只有 4 張卡、高矮差距懸殊（「選擇權」
   只有兩列數字），auto 放置因此排出「整欄空格」與「兩列數字被拉成 786px 高
   的空卡」兩種難看結果。
   改成**明確兩欄**：短卡（選擇權）與寬卡（散戶籌碼與市場情緒）一律
   .fut-block-full 佔滿整列，剩下的現貨／期貨兩張拔河條卡剛好一人一欄——四張
   卡的任何檢視模式組合都排不出空欄。1180px 以下維持單欄（拔河條反而拿到
   最大寬度，比原本雙欄各 300px 好讀）。

   align-items: start 是同一件事的第二道保險：卡片高度跟著內容走、不被拉到
   同列最高者。四組「圖表／數字」切換鈕會產生 16 種內容高度組合，其中
   「現貨走圖表、期貨走數字」那種（期貨數字模式只有一列）在 stretch 下會變成
   一張 445px 高、內容只有 92px 的空殼卡——正是站長抓包的那個病灶。 */
#fut-chips-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

@media (min-width: 1180px) {
  #fut-chips-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 佔滿整列（單欄時就是那一欄，兩欄時橫跨兩欄）。 */
.fut-block-full {
  grid-column: 1 / -1;
}

.fut-block {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}

/* 卡頭（標題 + 右上角「圖表／數字」切換鈕，FT-52 M3-3）。原本 h3 自帶的
   10px 下緣間距搬到 .fut-block-head，沒有切換鈕的區塊版面因此逐像素不變。 */
.fut-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.fut-block h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* 區塊內的群組小標（散戶多空比／P/C 比各一組，用來掛各自的切換鈕）。 */
.fut-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.fut-group-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.fut-block-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fut-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.fut-metric-row:last-child {
  border-bottom: none;
}

.fut-metric-label {
  font-size: 12.5px;
  color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 0;
}

.fut-info {
  cursor: help;
  color: var(--text-faint);
  font-size: 12px;
}

.fut-metric-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.fut-metric-change {
  font-size: 11.5px;
  text-align: right;
  min-width: 64px;
  white-space: nowrap;
}

.fut-prev-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  margin-left: 4px;
}

.fut-metric-value .up,
.fut-metric-change .up {
  color: var(--up);
}

.fut-metric-value .down,
.fut-metric-change .down {
  color: var(--down);
}

.fut-metric-value .flat,
.fut-metric-change .flat {
  color: var(--text-muted);
}

/* ---------- 歷史圖 ---------- */

.fut-chart-wrap {
  position: relative;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px;
}

.fut-history-canvas {
  width: 100%;
  height: 320px;
  display: block;
}

.fut-chart-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 13px;
}

.fut-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.fut-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fut-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* 圖例色塊必須與 futures.js 畫的柱／線同色：兩邊接同一顆代幣（色塊本來就
   比柱體濃一階，alpha 各自沿用原值 .65/.55，不是不同顏色）。柱／線色見
   futures.js readThemePalette() 的 BAR_MTX_* / BAR_TMF_* / LINE_TAIEX，
   波次 3b-2 配對回收。 */
.fut-legend-mtx {
  background: rgba(var(--up-rgb), 0.65);
}

.fut-legend-tmf {
  /* theme-exempt: 缺 token --chart-series-orange-rgb（255,166,90 全站無等值
     代幣）；配對的 futures.js BAR_TMF_POS 同步豁免，兩邊維持同色 */
  background: rgba(255, 166, 90, 0.65);
}

.fut-legend-taiex {
  background: var(--chart-line-blue);
  border-radius: 50%;
}

/* ---------- 數字/圖表切換（比照 industry.css .ind-view-toggle，改 fut- 前綴） ---------- */

.fut-section-head-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 檢視切換膠囊（#193 質感波，2026-08-17）：底／內緣高光／選中態漸層描邊
   全部走 app.css 質感層代幣（`--sv-pill-*`），與 /market `.chart-mode-btn`、
   /institutional `.inst-tab`、/industry `.ind-view-btn` 同一套語彙。行為零
   改動，只換外觀。 */
.fut-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sv-pill-bg), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--sv-pill-inset);
}

.fut-view-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease),
    border-color 140ms var(--ease), transform 140ms var(--ease);
  white-space: nowrap;
}

.fut-view-btn:hover {
  color: var(--text);
  background: var(--sv-pill-hover-bg);
}

.fut-view-btn:active {
  transform: translateY(1px);
}

.fut-view-btn.active {
  background: var(--sv-pill-active-bg);
  border-color: rgba(var(--brand-cyan-rgb), 0.55);
  color: var(--text-strong);
  box-shadow: var(--sv-pill-active-ring);
}

/* 縮小版（FT-52 M3-3）：掛在卡頭／群組小標上的切換鈕，外觀同上、尺寸收一級，
   才塞得進 300px 級的區塊卡。 */
.fut-view-toggle-sm {
  padding: 3px;
}

.fut-view-toggle-sm .fut-view-btn {
  font-size: 11.5px;
  padding: 3px 10px;
}

/* 資料缺席時「圖表」鈕停用的視覺（只作用在本頁切換鈕）。 */
.fut-view-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fut-view-btn:disabled:hover {
  color: var(--text-muted);
}

/* ==========================================================================
   FT-52 M3-3：期貨籌碼視覺化（法人期貨淨部位拔河條＋散戶多空比／PC 比儀表）
   2026-08-06

   與法人頁拔河條（institutional.css）、漏斗頁環境儀表（funnel.css）、大盤頁
   市場寬度環形（market.css）同一套語言：漸層 → 外緣高光 → 柔光暈 → 掃入
   動畫，顏色一律由主題代幣 color-mix() 現算，本段零寫死色（white/black 只是
   混色的亮暗兩極，不是品牌色）。class 另立 .fut-* 前綴：本頁沒有載入
   institutional.css／funnel.css，同名 class 在這裡重定義會變成第二份定義
   （見 funnel.css 同段註解的既有理由）。
   ========================================================================== */

/* 舊的 .fut-block-span2（圖表模式下佔兩欄）已於 2026-08-07 排版重整移除：
   欄數改成明確兩欄之後，「佔兩欄」等同「佔滿整列」，統一由 .fut-block-full
   表達（規則見本檔 #fut-chips-content 段）。 */

/* ---------- 共用：視覺卡的說明腳註 ---------- */

.fut-viz-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.fut-viz-foot-line {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- (a) 法人期貨淨部位拔河條 ---------- */

.fut-tug-date-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* 三欄 grid：名稱 / 軌道 / 口數。表頭列與資料列共用同一組欄寬，數字因此
   對得齊；中間欄 minmax(0,1fr) 是窄螢幕不溢出的關鍵（1fr 預設 min-width
   auto 會被內容撐開）。 */
.fut-tug-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.fut-tug-head-row {
  padding-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.fut-tug-head-row .fut-tug-name,
.fut-tug-value-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.fut-tug-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
}

.fut-tug-legend-side.up { color: var(--up); }
.fut-tug-legend-side.down { color: var(--down); }

.fut-tug-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fut-tug-track {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 20px;
}

/* 貫穿全寬的細軌（拔河繩），讓空的那一側也看得出「條可以長到哪」；上緣壓深
   一階＝凹槽的受影面，條才會像「嵌在軌裡」。 */
.fut-tug-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-1.5px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--border) 78%, black) 0%,
    var(--border) 100%
  );
  border-radius: 999px;
}

.fut-tug-side {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.fut-tug-side-short { justify-content: flex-end; }
.fut-tug-side-long { justify-content: flex-start; }

/* 兩個強度旋鈕（深底吃光可強、白底極輕否則髒）集中在這裡。 */
.fut-tug-rows {
  --tug-lit: 58%;    /* 亮端保留多少段色（其餘混白） */
  --tug-shade: 74%;  /* 暗端保留多少段色（其餘混黑） */
  --tug-gloss-mix: 34%;
  --tug-glow: 34%;
}

:root[data-theme="light-a"] .fut-tug-rows,
:root[data-theme="light-b"] .fut-tug-rows,
:root[data-theme="light-c"] .fut-tug-rows,
:root[data-theme="champagne"] .fut-tug-rows {
  --tug-lit: 72%;
  --tug-shade: 86%;
  --tug-gloss-mix: 46%;
  --tug-glow: 15%;
}

.fut-tug-bar {
  height: 14px;
  min-width: 2px;
  width: var(--tug-w, 0%);
  animation: fut-tug-bar-grow 0.65s ease-out both;
}

/* 從中軸展開（條的起點永遠貼著中軸，寬度 0 → 目標）。--tug-w 由 futures.js
   setFutTugBarWidth() 寫入；prefers-reduced-motion 由 app.css 全站規則把時長
   壓成 0.01ms＝直接定格。 */
@keyframes fut-tug-bar-grow {
  from { width: 0; }
  to { width: var(--tug-w, 0%); }
}

/* 淨空條往左長：亮端在外側尖端、暗端貼中軸；淨多條相反。inset 的 1px 亮線
   ＝條上緣的細高光，外側 box-shadow＝段色柔光暈。 */
.fut-tug-bar-short {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--down) var(--tug-lit), white) 0%,
    var(--down) 45%,
    color-mix(in srgb, var(--down) var(--tug-shade), black) 100%
  );
  border-radius: 999px 0 0 999px;
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--down) var(--tug-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--down) var(--tug-gloss-mix), white);
}

.fut-tug-bar-long {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--up) var(--tug-shade), black) 0%,
    var(--up) 55%,
    color-mix(in srgb, var(--up) var(--tug-lit), white) 100%
  );
  border-radius: 0 999px 999px 0;
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--up) var(--tug-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--up) var(--tug-gloss-mix), white);
}

.fut-tug-axis {
  position: absolute;
  left: 50%;
  top: 1px;
  bottom: 1px;
  width: 1px;
  z-index: 0;
  background: var(--border-strong);
  transform: translateX(-0.5px);
}

.fut-tug-zero-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translate(-50%, -50%);
}

.fut-tug-value {
  text-align: right;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fut-tug-value.up { color: var(--up); }
.fut-tug-value.down { color: var(--down); }
.fut-tug-value.flat { color: var(--text-muted); }

/* 「合計」列與上面三列之間拉一條線＋名稱加粗（現貨買賣超那組才有合計列），
   比照法人排行頁拔河條的 .tug-row-total。 */
.fut-tug-row-total {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 10px;
}

.fut-tug-row-total .fut-tug-name { font-weight: 800; }

/* ---------- 選擇權全寬窄卡（2026-08-07 排版重整） ----------
   買權｜對比條｜賣權 三欄橫排，把原本縱向兩列數字的矮卡攤成一條窄帶。
   顏色語意見 futures.js buildFutOptBar() 註解（數字紅綠照舊、對比條中性雙色）。 */

.fut-opt-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "call bar put";
  align-items: center;
  gap: 10px 18px;
}

/* 對比條畫不出來時（任一側缺值）只剩左右兩組數字，欄數跟著收成兩欄，
   不留一個空欄。 */
.fut-opt-strip-nobar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "call put";
}

.fut-opt-side-call { grid-area: call; }
.fut-opt-side-put { grid-area: put; }
.fut-opt-bar-wrap { grid-area: bar; }

/* ≤720px：欄名長（「外資台指買權(TXO Call)淨未平倉」），三欄硬擠會把中間
   的條壓到只剩幾十像素。改成「買權｜賣權」上下兩格並排、對比條橫跨在下方
   ——買權對賣權還是並排比較（本卡的重點），也比三段直排矮一截。 */
@media (max-width: 720px) {
  .fut-opt-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "call put"
      "bar  bar";
    align-items: start;
    gap: 12px;
  }
  .fut-opt-strip-nobar {
    grid-template-areas: "call put";
  }
  .fut-opt-value {
    font-size: 18px;
  }
}

.fut-opt-name {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.fut-opt-value {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.fut-opt-value.up { color: var(--up); }
.fut-opt-value.down { color: var(--down); }
.fut-opt-value.flat { color: var(--text-muted); }

.fut-opt-delta {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fut-opt-delta.up { color: var(--up); }
.fut-opt-delta.down { color: var(--down); }
.fut-opt-delta.flat { color: var(--text-muted); }

.fut-opt-side-put {
  text-align: right;
}

.fut-opt-keys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
}

.fut-opt-key-call { color: var(--tag-blue); }
.fut-opt-key-put { color: var(--tag-violet); }

/* 質感旋鈕沿用拔河條那套（深底吃光可強、白底極輕）。 */
.fut-opt-bar {
  --opt-lit: 58%;
  --opt-shade: 74%;
  --opt-gloss-mix: 34%;
  display: flex;
  align-items: stretch;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--border) 78%, black) 0%,
    var(--border) 100%
  );
}

:root[data-theme="light-a"] .fut-opt-bar,
:root[data-theme="light-b"] .fut-opt-bar,
:root[data-theme="light-c"] .fut-opt-bar,
:root[data-theme="champagne"] .fut-opt-bar {
  --opt-lit: 72%;
  --opt-shade: 86%;
  --opt-gloss-mix: 46%;
}

/* 寬度是 inline style（futures.js 算的百分比）；動畫只動 transform，
   不影響版面。prefers-reduced-motion 由 app.css 全站規則壓成定格。 */
.fut-opt-seg {
  flex: 0 0 auto;
  min-width: 2px;
  animation: fut-opt-seg-grow 0.65s ease-out both;
}

@keyframes fut-opt-seg-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 亮端在各自的外側尖端、暗端貼兩段的交界（同拔河條「亮在外、暗在軸」的
   打光方向）。這個方向也讓交界處一亮一暗變成一條清楚的分界，兩段不會糊成
   一條連續漸層。 */
.fut-opt-seg-call {
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tag-blue) var(--opt-lit), white) 0%,
    var(--tag-blue) 45%,
    color-mix(in srgb, var(--tag-blue) var(--opt-shade), black) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tag-blue) var(--opt-gloss-mix), white);
}

.fut-opt-seg-put {
  transform-origin: right center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tag-violet) var(--opt-shade), black) 0%,
    var(--tag-violet) 55%,
    color-mix(in srgb, var(--tag-violet) var(--opt-lit), white) 100%
  );
  /* 第二道 inset 是交界處那條 2px 的卡片底色縫：深色主題兩段的暗端相鄰時
     只靠色相分不夠清楚，切一條縫才看得出「這裡是分界不是漸層」。 */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tag-violet) var(--opt-gloss-mix), white),
    inset 2px 0 0 var(--card-bg);
}

/* ---------- (b)(c) 儀表：散戶多空比／全市場 P/C 比 ---------- */

/* 兩組切換鈕（散戶多空比／P/C 比）收在同一條控制列，三支儀表才排得成一列
   （2026-08-07 排版重整）。 */
.fut-sent-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.fut-sent-controls .fut-group-head {
  flex: 0 0 auto;
  gap: 8px;
  padding-top: 0;
}

/* 三支儀表（小台／微台／P/C）同一列。auto-fit 會把空軌道收掉，所以 1～3 支
   都是等寬平均分配、不會像固定欄數那樣留一個空欄；min() 讓手機自動掉成
   單欄直排（原本的 ≤640px flex-basis 覆寫因此可以移除）。 */
.fut-gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px 16px;
  justify-items: center;
}

.fut-gauge-item {
  width: 100%;
  max-width: 300px;
  min-width: 0;
}

.fut-gauge-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.fut-gauge-wrap {
  display: flex;
  justify-content: center;
}

/* viewBox 天生等比：容器給上限寬度，窄螢幕自動縮，不會橫向溢出。 */
.fut-gauge {
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* 質感強度旋鈕（同拔河條：深底可強、白底極輕）。 */
.fut-gauge {
  --fg-lit: 55%;    /* 亮端保留多少原色（其餘混白） */
  --fg-shade: 74%;  /* 暗端保留多少原色（其餘混黑） */
  --fg-gloss-mix: 26%;
  --fg-gloss-a: 0.6;
  --fg-glow: 34%;
}

:root[data-theme="light-a"] .fut-gauge,
:root[data-theme="light-b"] .fut-gauge,
:root[data-theme="light-c"] .fut-gauge,
:root[data-theme="champagne"] .fut-gauge {
  --fg-lit: 70%;
  --fg-shade: 86%;
  --fg-gloss-mix: 36%;
  --fg-gloss-a: 0.36;
  --fg-glow: 15%;
}

/* 漸層端色（<stop> 繼承上面 .fut-gauge 的自訂屬性）。散戶多空比用 --up/--down
   兩段（切點 0）；P/C 比用中性的邊框代幣單段（本站不對 P/C 比標紅綠）。 */
.fg-stop-pos-0 { stop-color: color-mix(in srgb, var(--up) var(--fg-lit), white); }
.fg-stop-pos-1 { stop-color: var(--up); }
.fg-stop-pos-2 { stop-color: color-mix(in srgb, var(--up) var(--fg-shade), black); }
.fg-stop-neg-0 { stop-color: color-mix(in srgb, var(--down) var(--fg-lit), white); }
.fg-stop-neg-1 { stop-color: var(--down); }
.fg-stop-neg-2 { stop-color: color-mix(in srgb, var(--down) var(--fg-shade), black); }
.fg-stop-neutral-0 { stop-color: color-mix(in srgb, var(--border-strong) 70%, white); }
.fg-stop-neutral-1 { stop-color: var(--border-strong); }
.fg-stop-neutral-2 { stop-color: color-mix(in srgb, var(--border-strong) 80%, black); }
.fg-stop-prog-0 { stop-color: color-mix(in srgb, var(--accent) var(--fg-lit), white); }
.fg-stop-prog-1 { stop-color: var(--accent); }
.fg-stop-prog-2 { stop-color: color-mix(in srgb, var(--accent) var(--fg-shade), black); }
/* 指針：尖端亮、根部暗（漸層跟著指針一起轉，見 futures.js gradDef 座標）。 */
.fg-stop-needle-0 { stop-color: color-mix(in srgb, var(--accent) 46%, white); }
.fg-stop-needle-1 { stop-color: var(--accent); }
.fg-stop-needle-2 { stop-color: color-mix(in srgb, var(--accent) 66%, black); }
/* 中心旋鈕：卡片底色的放射漸層（左上受光），不另外引入新顏色。 */
.fg-stop-hub-0 { stop-color: color-mix(in srgb, var(--card-bg) 62%, white); }
.fg-stop-hub-1 { stop-color: color-mix(in srgb, var(--card-bg) 84%, black); }

.fut-gauge-progress {
  filter: drop-shadow(0 1.5px 5px color-mix(in srgb, var(--accent) var(--fg-glow), transparent));
}

/* 進度弧外緣的細高光（半徑見 futures.js GLOSS_R）。 */
.fut-gauge-progress-gloss {
  stroke: color-mix(in srgb, var(--accent) var(--fg-gloss-mix), white);
  opacity: var(--fg-gloss-a);
}

/* 掃入：弧長由 futures.js 寫成 --arc-len（各半徑各算）；9999 是「其餘全是
   空隙」的哨兵長度，不是顏色。 */
@keyframes fut-gauge-arc-sweep {
  from { stroke-dasharray: 0 9999; }
  to { stroke-dasharray: var(--arc-len) 9999; }
}

.fut-gauge-progress,
.fut-gauge-progress-gloss {
  stroke-dasharray: var(--arc-len) 9999;
  animation: fut-gauge-arc-sweep 0.75s ease-out both;
}

.fut-gauge-tick {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  opacity: 0.45;
}

.fut-gauge-tick-major {
  stroke-width: 2.5;
  opacity: 0.7;
}

.fut-gauge-tick-label {
  fill: var(--text-faint);
  font-size: 11px;
}

/* 基準標記線（P/C 比的中性 100）：比刻度粗、跨弧內外緣，讓「基準在哪」
   一眼看得到；文字說明放在 SVG 外的說明行。 */
.fut-gauge-marker {
  stroke: var(--text);
  stroke-width: 2.2;
  opacity: 0.75;
}

/* 指針填色由 SVG 屬性 fill="url(#…-grad-needle)" 供應，這裡只加落影讓它浮在
   錶面上。 */
.fut-gauge-needle {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--accent) var(--fg-glow), transparent));
}

/* 指針掃入：從錶面最左端轉到實際值。transform-origin 必須跟著 futures.js 的
   cx/cy（150,150）——改幾何時兩邊要一起改。 */
.fut-gauge-needle-g {
  transform-box: view-box;
  transform-origin: 150px 150px;
  transform: rotate(var(--ndl-to, 0deg));
  animation: fut-gauge-needle-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fut-gauge-needle-in {
  from { transform: rotate(var(--ndl-from, 0deg)); }
  to { transform: rotate(var(--ndl-to, 0deg)); }
}

.fut-gauge-hub {
  stroke: var(--accent);
  stroke-width: 3;
}

/* 34px：本頁中央數字是 "+19.20%" 這種 7 字元字串（漏斗頁是 "+3"），字級上限
   由「不可壓到刻度標籤」決定。端點標籤已改成不畫（見 futures.js ticks 迴圈
   註解），剩下最靠近的 ±20/90 級標籤落在 y≈137，與這行字（y≈175~205）不相撞；
   harness 有一條 bbox 不重疊的守門檢查，改字級要同步跑。 */
.fut-gauge-value {
  font-size: 34px;
  font-weight: 800;
  fill: var(--text);
  letter-spacing: -0.01em;
  /* 極輕落影：把數字從錶面抬起來一點，量級是精緻不是浮誇。 */
  text-shadow: 0 1px 3px color-mix(in srgb, var(--text) 20%, transparent);
}

.fut-gauge-value.up { fill: var(--up); }
.fut-gauge-value.down { fill: var(--down); }
.fut-gauge-value.flat { fill: var(--text-muted); }

/* 值域說明＋「較昨」chip 的獨立一行（不畫進 SVG：貼著錶面底邊會與刻度標籤
   在手機上擠成一團，見 funnel.js 2026-08-06 排版教訓）。 */
.fut-gauge-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 2px;
}

.fut-gauge-range {
  font-size: 11px;
  color: var(--text-muted);
}

.fut-delta-chip {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.fut-delta-chip.up { color: var(--up); }
.fut-delta-chip.down { color: var(--down); }
.fut-delta-chip.flat { color: var(--text-muted); }

/* ≤640px：拔河條欄寬收窄、字級降一級，390px 手機仍不橫向溢出（中間欄
   minmax(0,1fr) 已保證軌道只吃剩下的寬度）；儀表本來就等比縮放。 */
@media (max-width: 640px) {
  .fut-tug-row {
    grid-template-columns: 64px minmax(0, 1fr) 66px;
    gap: 8px;
    padding: 6px 0;
  }
  .fut-tug-name { font-size: 11.5px; }
  .fut-tug-value { font-size: 11.5px; }
  .fut-tug-head-row .fut-tug-name,
  .fut-tug-value-head,
  .fut-tug-legend { font-size: 10px; }
  /* .fut-gauge-item 的單欄覆寫已移除（2026-08-07）：.fut-gauge-grid 改用
     grid + minmax(min(100%,230px),1fr) 之後，窄螢幕本來就自動掉成單欄。 */
}

/* ---------- 散戶多空比數字表（沿用 app.css .sv-table 共用元件） ---------- */

.fut-history-table-wrap {
  background: var(--sv-card-sheen), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sv-card-shadow), var(--sv-card-inset);
  padding: 4px 12px;
}

/* ---------- 免費散戶多空比 AI 觀察卡 ---------- */

.fut-retail-ai-card {
  margin-top: 14px;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}

.fut-retail-ai-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.fut-retail-ai-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.fut-retail-ai-asof {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.fut-retail-ai-fallback {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}

.fut-retail-ai-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
}

.fut-retail-ai-disclaimer {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- AI 點評卡 ---------- */

.fut-ai-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

.btn-fut-ai-review {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--brand-gradient);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 150ms ease;
}

.btn-fut-ai-review:hover {
  opacity: 0.9;
}

.btn-fut-ai-review:disabled {
  cursor: default;
  opacity: 0.7;
}

.btn-fut-ai-review.is-loading {
  opacity: 0.75;
}

/* AI 生成事前預期備註（指揮官加案，2026-07-12）：插在「產生 AI 點評」鈕
   下，讀 ai_progress_modal.js ETA_RANGES 動態產生文字，見 futures.js
   buildAiEtaNoteEl()。 */
.ai-eta-note {
  font-size: 11px;
  color: var(--text-faint);
  margin: 6px 0 0 0;
}

.fut-ai-result {
  margin-top: 16px;
}

.fut-ai-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.fut-ai-body p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
}

.fut-ai-body p:last-child {
  margin-bottom: 0;
}

/* ---------- AI 點評「多空對照」檢視（站長 2026-08-09 拍板，見 futures.js
   splitCompareBullets() 上方歸類規則註解） ----------

   幾何（B15/B27 擠壓紀律）：兩欄 grid 一律 `minmax(0, 1fr)`——1fr 的預設
   min-width:auto 會被長字串（bullet 內的 **粗體** 數字串）撐開，兩欄加起來
   超出容器就整頁橫向溢出。欄內 `min-width: 0` 同理。最小寬計算：欄內距
   12+12、bullet 左側色條 3＋padding 14，共 41px 非文字寬；欄間距 12px。
   720px 以下（本檔既有斷點）改單欄堆疊——在那之前最窄情境是 721px 視窗：
   頁面內距與卡片內距扣掉約 60px 後每欄 ≈ 310px，文字區 ≈ 269px，13.5px
   中文約 19 字／行，不擠壓。

   配色四主題相容：只用 --up/--down/--card-bg/--border/--text-* 代幣與
   --up-rgb/--down-rgb 現算透明底，本區塊零寫死色；bullet 本體沿用 app.css
   既有 .ai-bullet-{tone} 色條，不另造一套 tone 色票。 */

.fut-ai-view-toggle {
  margin: 0 0 12px;
}

.fut-ai-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.fut-ai-compare-col {
  min-width: 0;
  padding: 10px 12px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.fut-ai-compare-col-bull {
  border-top: 2px solid var(--up);
}

.fut-ai-compare-col-bear {
  border-top: 2px solid var(--down);
}

.fut-ai-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.fut-ai-compare-title {
  font-size: 12.5px;
  font-weight: 700;
  min-width: 0;
}

.fut-ai-compare-col-bull .fut-ai-compare-title {
  color: var(--up);
}

.fut-ai-compare-col-bear .fut-ai-compare-title {
  color: var(--down);
}

.fut-ai-compare-count {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.fut-ai-compare-col-bull .fut-ai-compare-count {
  color: var(--up);
  background: rgba(var(--up-rgb), 0.12);
}

.fut-ai-compare-col-bear .fut-ai-compare-count {
  color: var(--down);
  background: rgba(var(--down-rgb), 0.12);
}

.fut-ai-compare-list .ai-bullet {
  font-size: 13px;
}

/* 論據出處（原 section 小標）：讀者要知道這條是從哪一段搬過來的。 */
.fut-ai-compare-src {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--text-faint);
}

.fut-ai-compare-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* 未列入對照的條數揭露（level/neutral），見 futures.js renderCompareView()。 */
.fut-ai-compare-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
}

@media (max-width: 720px) {
  .fut-ai-compare-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fut-ai-denied {
  font-size: 13.5px;
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

/* ---------- RESPONSIVE ----------
   #fut-chips-content 本身已是 auto-fit grid，窄寬時自動變單欄；
   fut-chart-wrap 用固定高度 canvas + 100% 寬度，窄寬時等比縮放，不需要
   額外斷點。 */