/* 大盤總覽頁（任務 29）——沿用 app.css 的 CSS 變數（深色金融風、紅漲綠跌）。 */

main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 60px;
  box-sizing: border-box;
}

.market-loading,
.market-error {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 15px;
}

.market-error {
  color: var(--warn-fg);
}

.market-section {
  margin-bottom: 32px;
}

.market-section h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}

.index-board-unavailable {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-fg);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
}

/* 改用 flex-wrap + flex-grow 而非純 grid auto-fit：grid auto-fit 換行後
   最後一排的欄寬仍是固定值，卡片數不能整除欄數時會留下孤兒卡獨占一行、
   右側一大片空白（市場寬度 7 張卡在特定寬度下的實際症狀）。flex-wrap
   讓每一排的卡片依剩餘空間平分寬度撐滿，換行後也不會有畸零留白。 */
.index-board-cards,
.breadth-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.index-board-cards .stat-card,
.breadth-cards .stat-card {
  flex: 1 1 140px;
  min-width: 140px;
}

/* 統計卡（#193 質感波，2026-08-17）：卡面配方全部走 app.css 質感層代幣
   （`--sv-card-*`，見該檔檔尾「統計卡＋資料表＋膠囊質感層」段），四主題
   自動切換深色白高光／淺色上白下微深，本段零寫死色。視覺語彙刻意對齊
   portfolio.css 的月總結小卡（`.pf-pnl-cal-sumcard`）：上緣漸層高光 →
   1px 內緣 catch light → 柔影 → 標籤小字距／主數字大字重的兩段字階。 */
.stat-card {
  position: relative;
  background: var(--sv-card-sheen), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--sv-card-shadow), var(--sv-card-inset);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease),
    border-color 160ms var(--ease);
}

/* hover 微上浮：位移量走 --sv-lift（prefers-reduced-motion 時全站歸零）。 */
.stat-card:hover {
  transform: translateY(var(--sv-lift));
  box-shadow: var(--sv-card-shadow-hover), var(--sv-card-inset);
  border-color: var(--sv-card-border-hover);
}

.stat-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.stat-value {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 紅綠語意數值：字色照舊吃 --up/--down，另加同色極輕光暈把數字從卡面抬起
   來（量級同 .index-hero-value 的 --hero-lift，不是發光特效）。 */
.stat-value.up,
.stat-value.down,
.breadth-up .stat-value,
.breadth-down .stat-value {
  text-shadow: 0 1px 6px rgba(var(--sv-statglow-rgb, 0, 0, 0), 0.28);
}

.stat-value.up,
.breadth-up .stat-value {
  --sv-statglow-rgb: var(--up-rgb);
}

.stat-value.down,
.breadth-down .stat-value {
  --sv-statglow-rgb: var(--down-rgb);
}

/* 淺色三主題：白底吃不了光暈，改用極淡同色底暈（收斂到 0.16），否則數字
   周圍會出現一圈髒影（同 .index-hero 淺色旋鈕的收斂邏輯）。 */
:root[data-theme="light-a"] .stat-value.up,
:root[data-theme="light-a"] .stat-value.down,
:root[data-theme="light-a"] .breadth-up .stat-value,
:root[data-theme="light-a"] .breadth-down .stat-value,
:root[data-theme="light-b"] .stat-value.up,
:root[data-theme="light-b"] .stat-value.down,
:root[data-theme="light-b"] .breadth-up .stat-value,
:root[data-theme="light-b"] .breadth-down .stat-value,
:root[data-theme="light-c"] .stat-value.up,
:root[data-theme="light-c"] .stat-value.down,
:root[data-theme="light-c"] .breadth-up .stat-value,
:root[data-theme="light-c"] .breadth-down .stat-value,
:root[data-theme="champagne"] .stat-value.up,
:root[data-theme="champagne"] .stat-value.down,
:root[data-theme="champagne"] .breadth-up .stat-value,
:root[data-theme="champagne"] .breadth-down .stat-value {
  text-shadow: 0 1px 5px rgba(var(--sv-statglow-rgb, 0, 0, 0), 0.16);
}

.stat-value.up { color: var(--up); }
.stat-value.down { color: var(--down); }
.stat-value.flat { color: var(--flat); }

.breadth-up .stat-value { color: var(--up); }
.breadth-down .stat-value { color: var(--down); }
.breadth-flat .stat-value { color: var(--flat); }

/* 語意卡的左緣色條：一眼分出紅／綠／中性三群，不必逐張讀字。 */
.stat-card.breadth-up,
.stat-card.breadth-down,
.stat-card.breadth-flat {
  overflow: hidden;
}

.stat-card.breadth-up::before,
.stat-card.breadth-down::before,
.stat-card.breadth-flat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
}

.stat-card.breadth-up::before {
  background: linear-gradient(180deg, rgba(var(--up-rgb), 0.95), rgba(var(--up-rgb), 0.30));
}

.stat-card.breadth-down::before {
  background: linear-gradient(180deg, rgba(var(--down-rgb), 0.95), rgba(var(--down-rgb), 0.30));
}

.stat-card.breadth-flat::before {
  background: linear-gradient(180deg, rgba(var(--text-muted-rgb), 0.7), rgba(var(--text-muted-rgb), 0.20));
}

/* ---------------- 指數 hero 主卡（FT-52 M3-6，2026-08-06）------------------
   站長 15:21 提案／15:24 核准的五合一改版：加權/櫃買各一張主卡，一張卡講完
   「今天大盤怎樣」——大數字＋漲跌 chip 同一行、當日分時淡漸層面積圖鋪在卡
   下半部、開高低改成當日區間軸、成交金額/筆數降為底部小字列。

   質感層沿用本波三件視覺的同一套語言（見下方「市場寬度紅綠環形圖」段）：
   漸層 → 外緣高光 → 柔光暈 → 進場動畫，顏色**一律**由 --up/--down/--flat
   等主題代幣以 color-mix() 現算，本段零寫死色值；深底吃光可強、白底要極輕，
   所以強度旋鈕集中在 .index-hero 一處，四主題只換數字不換顏色來源。
   結構（DOM 對照 web/templates/market.html）：
     .index-hero
       .index-hero-main    大數字（.index-hero-value）＋ chip ＋ 收盤狀態
       .index-hero-spark   分時面積圖 band（出血到卡邊；無資料時 JS 收起）
       .index-hero-range   當日區間軸（低—高 為軸，開盤/現價標記其上）
       .index-hero-sub     成交金額/筆數小字列（加權才有，見 html 註解）
*/

.index-hero {
  /* 外層 .index-board-cards 仍是 flex 容器（既有 CSS 不動），主卡自己撐滿。 */
  flex: 1 1 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  /* 左右內距與面積圖 band 的出血負邊距共用 --hero-pad-x，改一處兩邊同步。 */
  padding: 16px var(--hero-pad-x) 14px;

  /* ---- 強度旋鈕（深色主題基準）---- */
  --hero-pad-x: 18px;
  --hero-spark-h: 76px;
  --hs-area-a: 0.5;      /* 面積漸層上端不透明度（下端一律 0） */
  --hs-line-mix: 78%;    /* 折線色保留多少段色（其餘混透明） */
  --hero-chip-a1: 26%;   /* chip 底漸層亮端 */
  --hero-chip-a2: 12%;   /* chip 底漸層暗端 */
  --hero-chip-border: 40%;
  --hero-glow: 30%;      /* chip／現價點的柔光暈 */
  --hero-gloss: 26%;     /* chip 內緣細高光 */
  --hero-span-mix: 46%;  /* 區間軸「開盤→現價」連接段 */
  --hero-lift: 16%;      /* 大數字的極輕落影 */
}

:root[data-theme="light-a"] .index-hero,
:root[data-theme="light-b"] .index-hero,
:root[data-theme="light-c"] .index-hero,
:root[data-theme="champagne"] .index-hero {
  /* 淺色主題收斂：面積與光暈都要壓，否則白底上一片糊；線色反而要吃滿
     才看得見（同 .mkt-hm-wrap／.breadth-donut-svg 兩處既有旋鈕的邏輯）。 */
  --hs-area-a: 0.3;
  --hs-line-mix: 90%;
  --hero-chip-a1: 18%;
  --hero-chip-a2: 8%;
  --hero-chip-border: 34%;
  --hero-glow: 14%;
  --hero-gloss: 60%;
  --hero-span-mix: 40%;
  --hero-lift: 10%;
}

.index-hero-main {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.index-hero-idcol {
  min-width: 0;
}

/* 資料日標註（applyIndexDateLabels 寫進同一顆 .stat-label）字會長到
   「（今日盤中 13:33）」，允許換行不撐破卡片。 */
.index-hero-idcol .stat-label {
  margin-bottom: 4px;
}

.index-hero-value {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  /* 極輕落影：把大數字從卡面「抬起來」一點（量級同 .breadth-donut-pct）。 */
  text-shadow: 0 1px 3px color-mix(in srgb, var(--text-strong) var(--hero-lift), transparent);
}

/* 漲跌 chip：漲跌點＋漲跌幅同一顆 pill，紅漲綠跌。tone class（up/down/flat）
   由 market.js applyHeroChipTone() 同步——chip 內兩顆 .stat-value 的 class
   每次渲染都被既有程式覆寫成 "stat-value up|down|flat"，色只能由父層決定。 */
.index-hero-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 13px;
  margin-bottom: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg-2);
  white-space: nowrap;
}

.index-hero-chip .stat-value {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.index-hero-arrow {
  font-size: 11px;
  line-height: 1;
}

.index-hero-chip.up {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--up) var(--hero-chip-a1), transparent),
    color-mix(in srgb, var(--up) var(--hero-chip-a2), transparent)
  );
  border-color: color-mix(in srgb, var(--up) var(--hero-chip-border), transparent);
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--up) var(--hero-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--up) var(--hero-gloss), white);
}

.index-hero-chip.down {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--down) var(--hero-chip-a1), transparent),
    color-mix(in srgb, var(--down) var(--hero-chip-a2), transparent)
  );
  border-color: color-mix(in srgb, var(--down) var(--hero-chip-border), transparent);
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--down) var(--hero-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--down) var(--hero-gloss), white);
}

.index-hero-chip.flat {
  border-color: var(--border);
}

.index-hero-chip.up .index-hero-arrow { color: var(--up); }
.index-hero-chip.down .index-hero-arrow { color: var(--down); }
.index-hero-chip.flat .index-hero-arrow { color: var(--flat); }

/* 「已收盤（最後快照）」等狀態字樣（.detail-quote-status 的既有樣式沿用，
   這裡只管它在主卡裡的位置）。 */
.index-hero-status {
  margin-left: auto;
  margin-bottom: 8px;
  text-align: right;
}

/* ---------- 當日分時面積圖 band ---------- */

.index-hero-spark {
  position: relative;
  height: var(--hero-spark-h);
  /* 出血到卡片左右邊：走勢鋪滿整張卡才有「這是今天的大盤」的份量。 */
  margin: 8px calc(var(--hero-pad-x) * -1) 0;
}

.hero-spark-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 面積漸層：折線處最濃、往下淡到全透明——底下就是區間軸與小字列，
   淡出才不會壓到文字可讀性。 */
.hero-spark-svg.tone-up .hs-stop-0 { stop-color: var(--up); stop-opacity: var(--hs-area-a); }
.hero-spark-svg.tone-down .hs-stop-0 { stop-color: var(--down); stop-opacity: var(--hs-area-a); }
.hero-spark-svg.tone-flat .hs-stop-0 { stop-color: var(--flat); stop-opacity: var(--hs-area-a); }
.hero-spark-svg .hs-stop-1 { stop-color: var(--flat); stop-opacity: 0; }
.hero-spark-svg.tone-up .hs-stop-1 { stop-color: var(--up); stop-opacity: 0; }
.hero-spark-svg.tone-down .hs-stop-1 { stop-color: var(--down); stop-opacity: 0; }

.hero-spark-line {
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hero-spark-svg.tone-up .hero-spark-line { stroke: color-mix(in srgb, var(--up) var(--hs-line-mix), transparent); }
.hero-spark-svg.tone-down .hero-spark-line { stroke: color-mix(in srgb, var(--down) var(--hs-line-mix), transparent); }
.hero-spark-svg.tone-flat .hero-spark-line { stroke: color-mix(in srgb, var(--flat) var(--hs-line-mix), transparent); }

/* 昨收基準虛線（同下方分時大圖的語意，色接 --flat 代幣）。 */
.hero-spark-base {
  stroke: color-mix(in srgb, var(--flat) 55%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* ---------- 當日區間軸 ---------- */

.index-hero-range {
  position: relative;
  margin-top: 2px;
}

/* 分時序列缺席時面積圖 band 整條收起（market.js renderIndexHeroSpark() 掛
   .no-spark），少掉的那一塊高度要補回來，區間軸才不會貼著大數字。 */
.index-hero.no-spark .index-hero-range { margin-top: 14px; }

.hero-range-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--flat) 14%, transparent);
}

/* 開盤 ↔ 現價 的連接段（純視覺連線，色沿用當日漲跌 tone）。 */
.hero-range-span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.index-hero-range.up .hero-range-span { background: color-mix(in srgb, var(--up) var(--hero-span-mix), transparent); }
.index-hero-range.down .hero-range-span { background: color-mix(in srgb, var(--down) var(--hero-span-mix), transparent); }
.index-hero-range.flat .hero-range-span { background: color-mix(in srgb, var(--flat) var(--hero-span-mix), transparent); }

.hero-range-mark {
  position: absolute;
  top: 50%;
}

/* 開盤標記：**中性色**（--text-muted 系）——開盤價本身不帶漲跌語意，不能用
   --up/--down；外圈 2px 卡底色的暈把它從底下那條紅綠連接段裡「摳」出來，
   否則在暖陽等暖色主題上會被讀成一根紅槓（站長 2026-08-06 16:04 抓包）。 */
.hero-range-open {
  width: 2.5px;
  height: 16px;
  border-radius: 2px;
  background: var(--text-muted);
  box-shadow: 0 0 0 2px var(--card-bg);
  transform: translate(-50%, -50%);
}

/* 開盤標籤貼身掛在豎槓正下方，中間一根細莖連著，視覺上是同一個物件；
   靠近軸兩端時改成靠左/靠右對齊（--stem-x 跟著換到標籤的那一側邊緣，
   由 market.js renderHeroRange() 一起寫），任何寬度下標籤都不會離開標記，
   也不會被卡邊切掉。 */
.hero-range-open-cap {
  --stem-x: 50%;
  position: absolute;
  top: 100%;
  margin-top: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

.hero-range-open-cap::before {
  content: "";
  position: absolute;
  left: var(--stem-x);
  top: -6px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text-muted);
}

.hero-range-open-cap i {
  font-style: normal;
  margin-right: 4px;
  color: var(--text-faint);
}

.hero-range-open-cap b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero-range-now {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  background: var(--flat);
  transform: translate(-50%, -50%);
}

.index-hero-range.up .hero-range-now {
  background: var(--up);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 55%, transparent),
    0 2px 8px color-mix(in srgb, var(--up) var(--hero-glow), transparent);
}

.index-hero-range.down .hero-range-now {
  background: var(--down);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 55%, transparent),
    0 2px 8px color-mix(in srgb, var(--down) var(--hero-glow), transparent);
}

.hero-range-now-cap {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--text-muted);
}

/* 低/高 兩端標籤：軸下第二層（第一層是貼在開盤標記下的那個標籤，約占
   軸下 9~24px，所以這裡從 28px 起跳，兩層不會擠在一起）。 */
.hero-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 28px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.hero-range-label {
  white-space: nowrap;
}

.hero-range-label i {
  font-style: normal;
  margin-right: 4px;
}

.hero-range-label b {
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hero-range-label-end { text-align: right; }

/* ---------- 成交金額／筆數小字列 ---------- */

.index-hero-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.index-hero-sub-item {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.index-hero-sub .stat-label {
  margin-bottom: 0;
  font-size: 11.5px;
}

.index-hero-sub .stat-value {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- 進場動畫（.is-intro 由 market.js playHeroIntro() 掛上，
     約 1.1 秒後移除——盤中每 60 秒重畫面積圖時不會又掃一次）。
     大數字的 count-up 在 JS（含 prefers-reduced-motion 判斷）；這裡的
     CSS 動畫由 app.css 全站 prefers-reduced-motion 規則壓成 0.01ms＝定格。 */

@keyframes hero-chip-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-spark-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hero-range-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.index-hero.is-intro .index-hero-chip { animation: hero-chip-in 0.5s var(--ease) 0.08s both; }
.index-hero.is-intro .hero-spark-svg { animation: hero-spark-in 0.7s var(--ease) both; }
.index-hero.is-intro .index-hero-range { animation: hero-range-in 0.6s var(--ease) 0.12s both; }

/* ---------------- 市場寬度紅綠環形圖（FT-52 M3-1，2026-08-06）----------------
   圖表模式只藏「上漲/下跌/平盤」三張核心卡（環形圖已完整表達這三個數字），
   其餘四張極端統計卡照舊留著。切換鈕沿用上方既有 .chart-mode-tabs/
   .chart-mode-btn pill 樣式（本檔 242-286 行），這裡不重複定義。
   顏色全部走 --up/--down/--flat 代幣，四主題自動適配、零寫死色值。 */

.breadth-mode-chart .breadth-core-card { display: none; }

/* 資料未到時「圖表」鈕不可點（market.js syncBreadthTabs()）。刻意只作用在
   本區塊的按鈕上，不動全域 .chart-mode-btn——其他切換鈕沒有 disabled 狀態，
   不需要為此多一份全域樣式。 */
#breadth-view-tabs .chart-mode-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#breadth-view-tabs .chart-mode-btn:disabled:hover { color: var(--text-muted); }

.breadth-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 40px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.breadth-donut-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 1 210px;
}

.breadth-donut-chart {
  width: 200px;
  max-width: 100%;
}

.breadth-donut-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 底環：三段理論上會鋪滿整圈，底環只在段與段的縫隙處露出來當分隔線。 */
.breadth-donut-track { stroke: var(--border); }

/* ---------- 質感層（FT-52 M3 質感波 2026-08-06）----------
   三件新視覺（寬度環形／環境儀表／法人拔河條）共用同一套語言：漸層 →
   外緣高光 → 柔光暈 → 掃入動畫。顏色**一律**由主題代幣 color-mix() 現算，
   本檔零寫死色；主題切換由 CSS 自己重算，不需要 JS 重畫。
   兩個強度旋鈕（深底吃光可強、白底要極輕否則髒）集中在這裡，四主題只換
   數字不換顏色來源。 */
.breadth-donut-svg {
  --bd-lit: 58%;    /* 亮端保留多少段色（其餘混白） */
  --bd-shade: 72%;  /* 暗端保留多少段色（其餘混黑） */
  --bd-gloss-mix: 26%;
  --bd-gloss-a: 0.55;
  --bd-glow: 34%;
}

:root[data-theme="light-a"] .breadth-donut-svg,
:root[data-theme="light-b"] .breadth-donut-svg,
:root[data-theme="light-c"] .breadth-donut-svg,
:root[data-theme="champagne"] .breadth-donut-svg {
  --bd-lit: 72%;
  --bd-shade: 84%;
  --bd-gloss-mix: 34%;
  --bd-gloss-a: 0.34;
  --bd-glow: 15%;
}

/* 漸層端色（<stop> 會繼承上面 .breadth-donut-svg 的自訂屬性）。 */
.bd-stop-up-0 { stop-color: color-mix(in srgb, var(--up) var(--bd-lit), white); }
.bd-stop-up-1 { stop-color: var(--up); }
.bd-stop-up-2 { stop-color: color-mix(in srgb, var(--up) var(--bd-shade), black); }
.bd-stop-down-0 { stop-color: color-mix(in srgb, var(--down) var(--bd-lit), white); }
.bd-stop-down-1 { stop-color: var(--down); }
.bd-stop-down-2 { stop-color: color-mix(in srgb, var(--down) var(--bd-shade), black); }
.bd-stop-flat-0 { stop-color: color-mix(in srgb, var(--flat) var(--bd-lit), white); }
.bd-stop-flat-1 { stop-color: var(--flat); }
.bd-stop-flat-2 { stop-color: color-mix(in srgb, var(--flat) var(--bd-shade), black); }

/* 主弧：漸層由 SVG 屬性 stroke="url(#bd-grad-*)" 指定（外部樣式表的
   url(#id) 會以樣式表 URL 為基底解析而失效，故不寫在這裡）；本檔只負責
   段色的柔光暈。 */
.breadth-donut-seg { stroke-linecap: butt; }
.breadth-donut-up { filter: drop-shadow(0 1.5px 5px color-mix(in srgb, var(--up) var(--bd-glow), transparent)); }
.breadth-donut-down { filter: drop-shadow(0 1.5px 5px color-mix(in srgb, var(--down) var(--bd-glow), transparent)); }
.breadth-donut-flat { filter: drop-shadow(0 1.5px 5px color-mix(in srgb, var(--flat) var(--bd-glow), transparent)); }

/* 外緣細高光：與主弧同角度、畫在外緣往內 1 單位處（見 market.js arcAt）。 */
.breadth-donut-gloss { stroke-linecap: butt; opacity: var(--bd-gloss-a); }
.bd-gloss-up { stroke: color-mix(in srgb, var(--up) var(--bd-gloss-mix), white); }
.bd-gloss-down { stroke: color-mix(in srgb, var(--down) var(--bd-gloss-mix), white); }
.bd-gloss-flat { stroke: color-mix(in srgb, var(--flat) var(--bd-gloss-mix), white); }

/* 掃入：每段的 dash 長度由 JS 寫成 --seg-*（角度 × 該半徑圈長），高光弧與
   主弧共用同一組數字所以同步。prefers-reduced-motion 由 app.css 全站規則
   把時長壓成 0.01ms＝直接定格，這裡不需要另外寫。 */
@keyframes bd-seg-sweep {
  from { stroke-dasharray: 0 var(--seg-circ); }
  to { stroke-dasharray: var(--seg-dash) var(--seg-rest); }
}

.breadth-donut-seg,
.breadth-donut-gloss {
  stroke-dasharray: var(--seg-dash) var(--seg-rest);
  animation: bd-seg-sweep 0.7s ease-out var(--seg-delay, 0s) both;
}

.breadth-donut-pct {
  fill: var(--text-strong);
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* 極輕落影：把數字從環中央「抬起來」一點，量級是精緻不是浮誇。 */
  text-shadow: 0 1px 3px color-mix(in srgb, var(--text-strong) 18%, transparent);
}

.breadth-donut-caption {
  fill: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.breadth-donut-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  text-align: center;
}

.breadth-verdict-chip {
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--border);
}

.breadth-verdict-chip.up {
  color: var(--up);
  background: rgba(var(--up-rgb), 0.12);
  border-color: rgba(var(--up-rgb), 0.32);
}

.breadth-verdict-chip.down {
  color: var(--down);
  background: rgba(var(--down-rgb), 0.12);
  border-color: rgba(var(--down-rgb), 0.32);
}

.breadth-verdict-chip.flat { color: var(--text-muted); }

.breadth-verdict-basis {
  font-size: 12px;
  color: var(--text-muted);
}

.breadth-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 0 1 340px;
  /* 寬螢幕上不讓圖例整列拉到卡片最右緣——名稱與家數之間隔半個畫面就讀不
     成一列了（家數是 margin-left:auto 靠右對齊）。環與圖例改成一對置中
     （.breadth-donut-wrap justify-content:center），不各自靠邊。 */
  max-width: 400px;
  min-width: 0;
}

.breadth-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 圖例點：圓角方塊 → **圓點**（FT-52 M3-10，對齊概念圖的「圓點＋名稱＋家數
   ＋百分比」四欄圖例）。加一圈同色低 alpha 外暈，讓小圓點在卡面上不會糊掉。 */
.breadth-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.breadth-legend-dot.up { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 16%, transparent); }
.breadth-legend-dot.down { background: var(--down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 16%, transparent); }
.breadth-legend-dot.flat { background: var(--flat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flat) 16%, transparent); }

.breadth-legend-name {
  font-size: 13px;
  color: var(--text-muted);
}

.breadth-legend-value {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.breadth-legend-value.up { color: var(--up); }
.breadth-legend-value.down { color: var(--down); }
.breadth-legend-value.flat { color: var(--flat); }

.breadth-legend-pct {
  width: 3.8em;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.breadth-legend-total {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

.industry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.industry-table th,
.industry-table td {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}

.industry-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.industry-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.industry-table tbody tr:last-child {
  border-bottom: none;
}

.industry-table td.change-cell.up { color: var(--up); font-weight: 700; }
.industry-table td.change-cell.down { color: var(--down); font-weight: 700; }
.industry-table td.change-cell.flat { color: var(--flat); }

.industry-table .top-stock-name {
  color: var(--text);
}

.industry-table .top-stock-id {
  color: var(--text-faint);
  margin-left: 4px;
}

.industry-table .top-stock-change.up { color: var(--up); }
.industry-table .top-stock-change.down { color: var(--down); }

.industry-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

.market-footer {
  color: var(--text-faint);
  font-size: 12px;
  text-align: center;
  padding-top: 8px;
}

/* 區塊標題旁的「資料日」標註（任務 31）。2026-07-13 使用者回饋「時間的
   字體太淺」：分析時間是「這是不是即時分析」的關鍵訊息，faint 級升到
   muted 級＋加大半號。 */
.section-date-note {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
}

/* 任務#68 M3：全站教學連結佈線——市場寬度標題旁／K線圖例（分時｜日K
   切換列）旁的「深入學習 →」連結（由 web/static/learn_links.js
   makeLearnLink() 產生，class="sv-learn-link"）。中性色、hover 才變色
   加底線，不干擾數據閱讀。 */
.sv-learn-link {
  display: inline-block;
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
  margin-left: 8px;
}

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

.chart-legend-learn-slot {
  display: inline-flex;
  align-items: center;
}

/* 盤中即時更新標註延遲警示（市場寬度／產業漲跌盤中即時化，任務新增）：
   updated_at 超過兩個更新週期未刷新時加這個 class，取代預設的
   --text-faint 顏色。 */
.section-date-note.stale {
  color: var(--warn-fg);
  font-weight: 600;
}

/* ---------------- 詳細報價（任務 31） ---------------- */

.index-detail-quote {
  margin-top: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.detail-quote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-quote-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.detail-quote-status {
  font-size: 12px;
  color: var(--text-faint);
}

.detail-quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 14px;
}

.detail-item .stat-label {
  margin-bottom: 4px;
}

.detail-item .stat-value {
  font-size: 16px;
}

.detail-item .stat-value.up { color: var(--up); }
.detail-item .stat-value.down { color: var(--down); }
.detail-item .stat-value.flat { color: var(--flat); }

/* ---------------- 指數 tab／圖表模式 tab（指數區升級：三指數切換＋
   分時/日K，任務新增）---------------- */

.index-tabs,
.chart-mode-tabs,
.kline-days-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* 膠囊（#193 質感波）：底／內緣高光／選中態漸層描邊一律走 app.css 質感層
   代幣（`--sv-pill-*`），與全站其他 pill（/institutional `.inst-tab`、
   /industry `.ind-view-btn`、/futures `.fut-view-btn`）同一套語彙。
   **行為零改動**：class 名、active 掛法、事件全不動，只換外觀。 */
.index-tab-btn,
.chart-mode-btn,
.kline-days-btn {
  background: var(--sv-pill-bg), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--sv-pill-inset);
  transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease),
    box-shadow 150ms var(--ease), transform 150ms var(--ease);
}

.index-tab-btn:hover,
.chart-mode-btn:hover,
.kline-days-btn:hover {
  color: var(--text);
  background: var(--sv-pill-hover-bg), var(--card-bg);
  border-color: var(--sv-card-border-hover);
}

.index-tab-btn:active,
.chart-mode-btn:active,
.kline-days-btn:active {
  transform: translateY(1px);
}

.index-tab-btn.active,
.chart-mode-btn.active,
.kline-days-btn.active {
  color: var(--text-strong);
  border-color: rgba(var(--brand-cyan-rgb), 0.62);
  background: var(--sv-pill-active-bg), var(--card-bg);
  box-shadow: var(--sv-pill-active-ring);
}

.kline-days-btn {
  padding: 5px 12px;
  font-size: 12px;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.chart-header h2 {
  margin: 0;
}

/* ---------------- TAIEX 分時走勢大圖（任務 31） ---------------- */

/* 圖表容器（#193 質感波）：與統計卡同一套卡面配方（漸層＋內緣高光＋柔
   影），讓「卡片列 → 圖表面板」在同一個區塊裡讀起來是同一個材質。 */
.intraday-chart-wrap {
  position: relative;
  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: 12px;
}

.intraday-chart-canvas {
  display: block;
  width: 100%;
  height: 200px;
}

/* 指數日K 可縮放/拖曳平移（任務 51）：grab 游標提示可拖曳，拖曳中的
   grabbing 由 web/static/market.js 直接寫 canvas.style.cursor 覆蓋（比照
   stock.css #kline-canvas 的作法）。分時折線圖沒有這個互動，不套用。 */
#index-kline-canvas {
  cursor: grab;
  touch-action: pan-y; /* 垂直捲動還給瀏覽器，防手機捲動陷阱（QA a13） */
}

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

/* 指數日K 十字線資訊面板（任務#91：K線 hover 補 tooltip，#77 全站圖表體檢
   唯一列管遺留）。比照 web/static/stock.css `.kline-tooltip` 的視覺與定位
   慣例（該檔是禁區，不能共用/import，這裡照抄一份自己的版本）——
   position:absolute 掛在 `.intraday-chart-wrap`（已是 position:relative）
   內，JS 依游標位置動態算 left/top。字級固定 12.5px，滿足設計憲法「數字
   ≥12px」（stock.js 原版 11.5px 略低於門檻，這裡不照抄那個數字）。 */
/* 2026-08-01 對比修復：底/字改接「深色浮層承字面」代幣族（app.css :root
   區塊 (h)），原本的 --overlay-strong + --text/--text-muted 組合在淺色三
   主題方向相反，標籤只剩 1.09:1。 */
#index-kline-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--overlay-surface);
  border: 1px solid var(--overlay-surface-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--on-overlay);
  line-height: 1.6;
  white-space: nowrap;
  z-index: 5;
  box-shadow: var(--shadow-pop);
  display: none;
}

#index-kline-tooltip b {
  color: var(--on-overlay-muted);
  font-weight: 600;
  margin-right: 6px;
}

/* ---------------- 大盤 AI 專業點評（收盤後速評，任務#151，FREE 全級
   開放）---------------- */

.ai-review-loading {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* FT-56 定調帶（2026-08-15）：徽章列改當定調帶的第一行，理由句換行放下面
   （原本兩者同一行 flex-wrap，理由句被擠成一條窄縫）。 */
.ai-review-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.ai-review-reason {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.75;
  margin: 0;
}

/* ---------------- FT-56 儀表板化第一版（站長 2026-08-15 11:19 交辦）
   ---------------- */

/* ① 定調帶：整段淡色底＋左側 4px 方向粗邊，tone class 由 market.js
   renderAiReview() 掛（台股口徑 bull 紅／bear 綠／neutral 灰）。 */
.ai-review-verdict-band {
  border: 1px solid var(--border);
  border-left: 4px solid var(--flat);
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-tint-rgb), 0.05);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.ai-review-verdict-band-bull {
  border-left-color: var(--up);
  background: rgba(var(--up-rgb), 0.07);
  border-color: rgba(var(--up-rgb), 0.28);
}

.ai-review-verdict-band-bear {
  border-left-color: var(--down);
  background: rgba(var(--down-rgb), 0.07);
  border-color: rgba(var(--down-rgb), 0.28);
}

.ai-review-verdict-band-neutral {
  border-left-color: var(--border-strong);
}

/* 大 badge：只放大定調帶裡這一顆，全站 .ai-verdict-badge 本體（app.css）
   一字不動——其他頁面共用同一個 class。 */
.ai-verdict-badge.ai-verdict-badge-lg {
  font-size: 20px;
  font-weight: 800;
  padding: 7px 22px;
  letter-spacing: 0.06em;
}

/* ② 儀表列：左半圓儀表固定欄寬、右側兩條分段條＋delta 卡疊成一欄。 */
.ai-review-dash {
  display: grid;
  grid-template-columns: minmax(0, 288px) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  /* stretch（不是 start）：半圓儀表卡比右欄高，右欄要跟著長高把兩條分段條
     撐開，否則右下會空出一塊等高的白洞。 */
  align-items: stretch;
}

.ai-review-dash-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 兩條分段條吃掉右欄剩餘高度（delta 卡維持自然高度貼底），內容垂直置中。 */
.ai-review-dash-side .ai-review-gauges {
  flex: 1 1 auto;
}

.ai-review-gauges .ai-review-gauge-card {
  display: flex;
  flex-direction: column;
  /* space-evenly（不是 center）：卡被撐高後內容擠成中間一小坨、上下兩片空白
     會像沒畫完；平均散開才看得出是刻意的版面。 */
  justify-content: space-evenly;
}

.ai-review-env-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ai-review-env-card .stat-label {
  align-self: flex-start;
}

.ai-review-env-dial {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 6px auto 0;
  overflow: visible;
}

/* 三段弧＝環境分數的三個區間（門檻 ±4，見 datasource/market_environment.py
   `_light_and_position()`）；弧本身只是刻度背景，用低透明度畫，指針才是主角。 */
.ai-review-env-arc {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.ai-review-env-arc-bull { stroke: rgba(var(--up-rgb), 0.55); }
.ai-review-env-arc-bear { stroke: rgba(var(--down-rgb), 0.55); }
.ai-review-env-arc-neutral { stroke: rgba(var(--text-muted-rgb), 0.3); }

.ai-review-env-tick {
  fill: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ai-review-env-needle line {
  stroke: var(--text);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke 300ms var(--ease);
}

.ai-review-env-needle {
  transition: transform 450ms var(--ease);
}

.ai-review-env-needle-bull line { stroke: var(--up); }
.ai-review-env-needle-bear line { stroke: var(--down); }
.ai-review-env-needle-neutral line { stroke: var(--text-muted); }

.ai-review-env-hub {
  fill: var(--card-bg);
  stroke: var(--border-strong);
  stroke-width: 2;
}

.ai-review-env-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.ai-review-env-score {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ai-review-env-score-bull { color: var(--up); }
.ai-review-env-score-bear { color: var(--down); }
.ai-review-env-score-neutral { color: var(--text); }

.ai-review-env-light {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.ai-review-env-light-bull { color: var(--up); }
.ai-review-env-light-bear { color: var(--down); }

/* 圖例：只標分數區間的方向讀法，不含任何操作字樣（投顧法紅線）。 */
.ai-review-env-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.ai-review-env-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ai-review-env-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ai-review-env-dot-bull { background: rgba(var(--up-rgb), 0.75); }
.ai-review-env-dot-bear { background: rgba(var(--down-rgb), 0.75); }
.ai-review-env-dot-neutral { background: rgba(var(--text-muted-rgb), 0.5); }

/* ③ 關鍵觀點卡：四段首句，桌機兩欄、行動單欄。 */
.ai-review-keypoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.ai-review-keypoint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(var(--brand-cyan-rgb), 0.55);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-width: 0;
}

.ai-review-keypoint-icon {
  font-size: 18px;
  line-height: 1.4;
  flex: 0 0 auto;
}

.ai-review-keypoint-body {
  min-width: 0;
}

.ai-review-keypoint-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.ai-review-keypoint-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* ④ 完整點評收合：原生 <details>，預設收起（文案切換見 market.js
   initAiReviewFulltextToggle()）。

   #219（站長 2026-08-17 黃框點名「收折符號跟字體要更明顯」）：舊版是
   13.5px 一行小字＋「˅」字元，夾在儀表卡與關鍵觀點卡之間完全沒有存在感。
   改成全站 --sv-* 膠囊質感的控制列：字級 13.5→17px、粗細 700→800、右側
   34px 圓形箭頭徽章（品牌色描邊＋展開時旋轉 180°）、副標一行講「裡面有
   什麼」——收合狀態下也一眼看得出還有內容可展開。整條高度 ≥56px，遠超
   觸控目標 44px 的下限。 */
.ai-review-fulltext {
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius);
  background: var(--sv-pill-bg), var(--bg-2);
  box-shadow: var(--sv-pill-inset);
  margin-bottom: 16px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.ai-review-fulltext:hover {
  border-color: rgba(var(--brand-cyan-rgb), 0.45);
  box-shadow: var(--sv-pill-inset), 0 4px 16px rgba(var(--brand-cyan-rgb), 0.14);
}

.ai-review-fulltext-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 56px 可點高度＝14+14 padding + 內容行高，觸控目標鐵律 44px 的 1.27 倍 */
  min-height: 56px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
  list-style: none;
  user-select: none;
}

.ai-review-fulltext-summary::-webkit-details-marker { display: none; }
.ai-review-fulltext-summary::marker { content: ""; }

.ai-review-fulltext-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ai-review-fulltext-label {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.ai-review-fulltext-hint {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}

.ai-review-fulltext-summary:hover .ai-review-fulltext-label {
  color: var(--brand-cyan-text);
}

/* 圓形箭頭徽章：收合態就有品牌色描邊與底暈，本身就是「這裡可以點開」的
   視覺訊號（舊版那個「˅」字元只有 13px、灰色，等於沒有）。 */
.ai-review-fulltext-caret {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--brand-cyan-rgb), 0.42);
  background: rgba(var(--brand-cyan-rgb), 0.10);
  color: var(--brand-cyan-text);
  transition: transform 220ms var(--ease), background 160ms var(--ease),
    border-color 160ms var(--ease);
}

.ai-review-fulltext-caret svg {
  width: 19px;
  height: 19px;
  display: block;
}

.ai-review-fulltext-summary:hover .ai-review-fulltext-caret {
  background: rgba(var(--brand-cyan-rgb), 0.20);
  border-color: rgba(var(--brand-cyan-rgb), 0.62);
}

.ai-review-fulltext[open] .ai-review-fulltext-caret {
  transform: rotate(180deg);
}

/* 鍵盤操作可見焦點（summary 是原生可 focus 元素，改版後更該看得出來）。 */
.ai-review-fulltext-summary:focus-visible {
  outline: 2px solid rgba(var(--brand-cyan-rgb), 0.75);
  outline-offset: 2px;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .ai-review-fulltext,
  .ai-review-fulltext-caret {
    transition: none;
  }
}

@media (max-width: 480px) {
  .ai-review-fulltext-label { font-size: 16px; }
  .ai-review-fulltext-summary { padding: 13px 14px; }
}

.ai-review-fulltext > .ai-review-sections {
  padding: 0 16px 16px;
  margin-bottom: 0;
}

.ai-review-fallback-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  padding: 2px 10px;
}

/* 位階儀表／多空溫度計：兩張並排卡片，窄螢幕自動疊成單欄。
   FT-56 起這一列被包進 .ai-review-dash-side（右欄），外層 grid 自己出
   間距，這裡的 margin-bottom 歸零避免兩層疊加。 */
.ai-review-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

.ai-review-gauge-card {
  flex: 1 1 260px;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.ai-review-gauge-value {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* 位階儀表：水平軌道 0%(3年低點) ~ 100%(3年高點)，marker 依 percentile_3y
   定位；軌道本身用漸層一次畫出低-中-高三段參考色，不額外疊文字說明
   （比照合成圖「元素預算憲法」精神：視覺化元件也不堆說明文字）。 */
.ai-review-percentile-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(var(--down-rgb), 0.55) 0%,
    rgba(var(--text-muted-rgb), 0.35) 50%,
    rgba(var(--up-rgb), 0.55) 100%
  );
}

.ai-review-percentile-marker {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--card-bg);
  box-shadow: 0 0 0 1px var(--border-strong);
  transform: translate(-50%, -50%);
  transition: left 300ms var(--ease);
}

/* 多空溫度計：0-100 合成分數，水平填色條，<40 偏空(綠)/40-60 中性(灰)/
   >60 偏多(紅)，色帶用 JS 依分數動態切換 class（見 market.js
   renderThermoGauge()）。 */
.ai-review-thermo-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--surface-tint-rgb), 0.08);
  overflow: hidden;
}

.ai-review-thermo-fill {
  height: 100%;
  width: 50%;
  border-radius: 999px;
  background: var(--flat);
  transition: width 300ms var(--ease), background-color 300ms var(--ease);
}

.ai-review-thermo-fill.thermo-bull { background: var(--up); }
.ai-review-thermo-fill.thermo-bear { background: var(--down); }
.ai-review-thermo-fill.thermo-neutral { background: var(--flat); }

/* delta 醒目卡：外資買賣方向翻轉/連續同向天數，只在有偵測到事件時顯示。 */
.ai-review-delta-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--brand-cyan-rgb), 0.06);
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.22);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  /* FT-56：改由 .ai-review-dash-side 的 gap 出間距（同 .ai-review-gauges）。 */
  margin-bottom: 0;
  font-size: 13.5px;
  color: var(--text);
}

/* 四段正文：大盤定調／價量與位階／資金與籌碼／明日觀察，粗體轉色沿用
   全站既有 .hl-* 語意分色 class（app.css，見 market.js renderMarkedText()
   的正負號/關鍵字判色規則）。 */
.ai-review-sections {
  /* 段與段的間距改由 .ai-review-section + .ai-review-section 自己出（要連帶
     畫細分隔線，gap 畫不出線），這裡歸零避免兩層間距疊加。 */
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}

/* 段落節奏（FT-52 M3-7）：段標題上方留白加大＋一條細分隔線，讓四段各自
   成篇；第一段不畫線（上面就是溫度計卡，再一條線會變雙框）。 */
.ai-review-sections .ai-review-section + .ai-review-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.ai-review-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.ai-review-section p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0 0 1.2em;
}

.ai-review-section p:last-child {
  margin-bottom: 0;
}

/* 段首引言（FT-52 M3-7）：每段第一個 p 的首句自成一塊，左邊 3px 品牌色邊線
   ＋字級 +1px，當作這一段的視覺入口。切分規則是決定性的（第一個不在粗體
   標記內的「。」或「；」為界），切不出來就整段不套——見 market.js
   renderMarkedText() 的註解。 */
.ai-review-sections .ai-review-lede {
  display: block;
  border-left: 3px solid rgba(var(--brand-cyan-rgb), 0.55);
  padding: 1px 0 1px 12px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--text);
}

/* 降級的中性數字（FT-52 M3-7）：粗體＋等寬數字＋主文字色，但**不包底色**。
   底色 chip 只留給首句與帶漲跌語意色的關鍵值（.hl-bull／.hl-bear），把
   「每行 2-4 個灰框」的視覺碎裂拿掉。等寬數字讓上下行的位數對齊。 */
/* `#ai-review-reason`（判定理由句）2026-08-06 22:44 起也走 renderMarkedText()
   ——它不在 .ai-review-sections 底下，選擇器要一起帶上，否則降級後的中性數字
   會變成沒有樣式的裸 <strong>。 */
.ai-review-sections .ai-review-num,
#ai-review-reason .ai-review-num {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* 理由句是單行判斷句，裡面保留下來的語意色 chip 必須能斷行（同 app.css
   .ai-article .hl-* 的既有理由：nowrap 是給條列型短數字用的，長判斷句會把
   卡片撐破）。 */
#ai-review-reason .hl-bull,
#ai-review-reason .hl-bear,
#ai-review-reason .hl-warn,
#ai-review-reason .hl-level,
#ai-review-reason .hl-neutral {
  white-space: normal;
}

/* 手機：引言的左內距與段間距收一點，避免小螢幕上被邊線吃掉太多行寬。 */
@media (max-width: 480px) {
  .ai-review-sections .ai-review-lede {
    padding-left: 10px;
    margin-bottom: 10px;
  }

  .ai-review-sections .ai-review-section + .ai-review-section {
    margin-top: 18px;
    padding-top: 16px;
  }
}

/* 合成圖版面（2026-07-13 使用者回饋「圖太大」）：多面板高圖以內容欄
   全寬呈現會吃掉整個版面——改限寬縮圖置中，點圖開全屏浮層看細節：
   縮圖負責版面節制，浮層負責細節可讀，兩者分工。 */
.ai-review-chart-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-card);
  margin: 0 auto 12px;
  max-width: 720px;
}

.ai-review-chart-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.ai-review-chart-hint {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* 全屏放大浮層：深色底、可捲動（高圖逐段看）、點任意處或 Esc 關閉。 */
.chart-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 10, 20, 0.9); /* theme-exempt: 圖表燈箱遮罩 4,10,20 缺 token（--overlay-strong rgba(11,15,26,.95) 非同值） */
  overflow: auto;
  padding: 28px 16px;
  cursor: zoom-out;
}

.chart-lightbox img {
  display: block;
  margin: 0 auto;
  max-width: min(1280px, 96vw);
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.ai-review-data-basis {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ---------------- 收折＋資料基準日三狀態顯著標示（任務#144）---------------- */

/* 標題列：h2 + 收合鈕同一排，取代原本單純 h2（比照 app.css
   .sv-hawkeye-header-full 慣例，h2 自己的 margin-bottom 挪到這一層）。 */
.ai-review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.ai-review-section-head h2 {
  margin: 0;
}

.ai-review-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}

.ai-review-collapse-toggle:hover {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-text);
}

/* 收折後的一行摘要：判定徽章＋資料日，預設隱藏，只有
   #section-ai-review.ai-review-collapsed 時才顯示（見下方規則），展開時
   則反過來隱藏。 */
.ai-review-collapsed-line {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}

.ai-review-collapsed-line:hover {
  border-color: var(--brand-cyan);
}

.ai-review-collapsed-label {
  font-weight: 700;
  color: var(--text);
}

.ai-review-collapsed-date {
  flex: 1 1 auto;
  color: var(--text-muted);
}

/* 收折摘要行的陳舊態（盤中顯示前一交易日分析）：琥珀色醒目化，避免
   使用者把收折著的舊分析誤當即時（2026-07-13 使用者指示）。 */
.ai-review-collapsed-date.stale {
  color: var(--warn-fg);
  font-weight: 600;
}

.ai-review-collapse-caret {
  color: var(--text-faint);
  font-size: 11px;
}

/* 收合狀態：頂部橫幅／標題列／內容全部讓位給收折摘要行一行顯示。用
   !important 蓋掉 renderAiReviewFreshness() 對橫幅設的 inline
   style.display（比照 app.css .sv-hawkeye-bar.sv-hawkeye-collapsed 既有
   收合手法，但這裡橫幅有自己的資料驅動顯示邏輯，class 選擇器優先權不夠，
   需要 !important 才能保證收合時一定蓋過）。 */
#section-ai-review.ai-review-collapsed .ai-review-freshness-banner,
#section-ai-review.ai-review-collapsed #ai-review-stale-notice,
#section-ai-review.ai-review-collapsed .ai-review-section-head,
#section-ai-review.ai-review-collapsed #ai-review-body {
  display: none !important;
}

#section-ai-review.ai-review-collapsed .ai-review-collapsed-line {
  display: flex;
}

/* 狀態1（核心）：盤中＋資料仍是上一交易日，區塊頂部全寬琥珀色橫帶。
   顏色沿用既有 --warn-* 變數（app.css，全站警示色單一來源）。 */
.ai-review-freshness-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.ai-review-freshness-banner-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--warn-fg);
  line-height: 1.5;
}

.ai-review-freshness-banner-note {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn-fg);
  white-space: nowrap;
  opacity: 0.85;
}

/* 狀態2／狀態3 徽章：直接沿用 .ai-verdict-badge 既有 pill 樣式＋
   -level（品牌青）／-neutral（中性）色彩 modifier（見 app.css），這裡只
   補一個 margin，不重複定義顏色。 */
#ai-review-freshness-badge {
  margin-right: -2px;
}

/* ---------------- 大盤融資融券市場彙總（籌碼 Phase 2 M1 擴展，任務新增）
   ---------------- */
/* 圖表/數字切換與天數切換直接沿用上方既有 .chart-mode-tabs/.chart-mode-btn
   與 .kline-days-tabs/.kline-days-btn pill 樣式（見本檔 242-286 行），這裡
   不重複定義；卡片沿用 .stat-card/.stat-value，只補版面容器與圖例。 */

.margin-stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.margin-stat-cards .stat-card {
  flex: 1 1 160px;
  min-width: 160px;
}

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

/* 圖例改成小膠囊（#193）：與上方檢視／區間 pill 同一套語彙，跟畫布上的
   線色一起被讀成「同一組控制項」。 */
.margin-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--sv-pill-bg), var(--card-bg);
  box-shadow: var(--sv-pill-inset);
  font-weight: 600;
}

.margin-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

/* 圖例色塊必須與 market.js 畫的線同色：兩邊接同一顆代幣，改色只改 app.css
   一處（線色見 market.js readThemePalette() 的 MARGIN_BALANCE_COLOR /
   MARGIN_RATIO_COLOR，波次 3b-2 配對回收）。 */
/* 「數字」檢視的表格（#193 質感波）：本頁的 .sv-table-wrap 直接坐在頁面底
   色上、自己沒有背景，所以先給它與上方圖表面板同一張卡面，再套橫捲暗示
   ——那個技法的遮罩色必須等於容器自己的表面色，見 app.css 該段說明。 */
#margin-table-wrap {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sv-card-shadow), var(--sv-card-inset);
  background-image: linear-gradient(to right, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to left, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to right, var(--sv-scroll-shade), transparent),
    linear-gradient(to left, var(--sv-scroll-shade), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* 卡面圓角要吃得到：首/末列的圓角由表格自己收邊（wrap 上不能加
   overflow:hidden，那會把橫捲關掉）。 */
#margin-table-wrap .sv-table th:first-child {
  border-top-left-radius: var(--radius);
}

#margin-table-wrap .sv-table th:last-child {
  border-top-right-radius: var(--radius);
}

/* 色塊改成與畫布同款的漸層描邊（#193）：線在畫布上是 90° 漸層，圖例也用
   同一個方向的漸層，兩邊看起來才是同一條線的縮圖。 */
.margin-legend-balance {
  background: linear-gradient(90deg, rgba(var(--up-rgb), 0.55), var(--up));
}

.margin-legend-ratio {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--chart-line-amber) 55%, transparent),
    var(--chart-line-amber)
  );
}

/* ---------- 產業漲跌熱力圖（FT-52 M3-5，2026-08-06） ----------------------
   **這一整段與 industry.css「熱力圖視圖：產業資金流 treemap」（同檔搜
   `.ind-hm-wrap`）是同一套設計的兩份複本**——跨頁 JS/CSS 各頁自帶一份是本
   專案既有慣例（見 funnel.js 檔頭），改色階或改結構時**兩邊要一起改**。
   差異只有兩處：class 前綴 `mkt-hm-`（結構）以及方塊面積的權重來源（產業
   頁一律是同頁的成交金額；本頁見 market.js resolveIndustryTurnover() 的
   三段式：盤中即時金額 → 同日資金流金額 → 等面積）。七檔色階 class 名
   （hm-up-1..3／hm-down-1..3／hm-flat／hm-na）刻意與產業頁逐字相同，方便
   兩份對照 diff；兩頁不會同時載入對方的 css，不會互相汙染。

   方塊顏色＝該產業「平均漲跌幅」（**本頁表格同一欄、同一個 fmtPct()**，
   不是產業頁那個成交金額加權的 weighted_change_pct）。**台股紅漲綠跌**。

   色階全部由 --up/--down/--flat 三個主題代幣用 color-mix() 現算，本段零
   寫死色值；對比驗算沿用 industry.css 同一組百分比旋鈕（該檔已以 WCAG
   相對亮度逐檔實算過，最低 4.6 > 4.5 過 AA），改旋鈕要兩邊一起重算。 */

.mkt-hm-wrap {
  --hm-base: var(--bg-2);
  --hm-l1: 24%;
  --hm-l2: 42%;
  --hm-l3: 58%;
  --hm-flat-mix: 14%;
  --hm-fg: var(--text);
  --hm-fg-strong: var(--text); /* 深色主題滿檔仍是深底，維持亮字 */
  --hm-seam: var(--bg-1);
  --hm-hover-b: 1.16;
  /* 立體磚的對角漸層兩端（M3-10；與 industry.css 逐顆同值）：亮端保留多少
     基色（其餘混白）／暗端保留多少（其餘混黑）。中間 stop 就是基色本身。 */
  --hm-lit: 88%;
  --hm-shade: 90%;
  --hm-hover-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}

:root[data-theme="light-a"] .mkt-hm-wrap,
:root[data-theme="light-b"] .mkt-hm-wrap,
:root[data-theme="light-c"] .mkt-hm-wrap,
:root[data-theme="champagne"] .mkt-hm-wrap {
  /* 淺色主題收斂：亮端不能糊成一片白（L1 拉低到 20%），滿檔改用純代幣色
     配白字；高光極輕、hover 幾乎不提亮改用外框，否則白底上一片死白。 */
  --hm-base: var(--card-bg);
  --hm-l1: 20%;
  --hm-l2: 50%;
  --hm-l3: 100%;
  --hm-flat-mix: 16%;
  --hm-fg: var(--text);
  --hm-fg-strong: #ffffff;
  --hm-seam: var(--bg-1);
  --hm-hover-b: 1.04;
  /* 白底上的立體感要更收斂（同 industry.css 的理由：滿檔 L3 純色磚配白字
     不能再往亮處走）。 */
  --hm-lit: 93%;
  --hm-shade: 92%;
  --hm-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.mkt-hm-canvas {
  position: relative;
  width: 100%;
  /* 高度由 market.js heatCanvasHeight() 依容器寬度寫成 inline style。 */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

/* ---- 立體磚（FT-52 M3-10）：與 industry.css .ind-hm-tile 逐條相同 ----
   磚間距與圓角一律往**框內**縮（transparent border ＋ background-clip:
   padding-box），squarify 幾何零變動；對角漸層的中間 stop 就是七檔色階原本
   的色值，文字落在那一帶，所以既有的 WCAG 對比驗算不必重算。 */
.mkt-hm-tile {
  position: absolute;
  box-sizing: border-box; /* 縫線畫在框內＝版面面積 === squarify 給的面積 */
  border: var(--hm-gap, 2.5px) solid transparent;
  background-clip: padding-box;
  border-radius: var(--hm-r, 8px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-fg);
  background-color: var(--hm-tile-c);
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--hm-tile-c) var(--hm-lit), white) 0%,
    var(--hm-tile-c) 50%,
    color-mix(in srgb, var(--hm-tile-c) var(--hm-shade), black) 100%
  );
  /* 進場淡入（delay 由 JS 逐塊 stagger）。prefers-reduced-motion 由 app.css
     全站規則壓成 0.01ms＝直接定格，這裡不需要另外寫。 */
  animation: mkt-hm-tile-in 0.42s var(--ease) both;
  transition: filter 120ms var(--ease), box-shadow 120ms var(--ease);
}

@keyframes mkt-hm-tile-in {
  from { opacity: 0; transform: scale(0.965); }
  to { opacity: 1; transform: none; }
}

.mkt-hm-tile:hover {
  filter: brightness(var(--hm-hover-b));
  box-shadow: var(--hm-hover-shadow);
  z-index: 2;
}

/* 七檔色階：三紅／灰中性／三綠（門檻常數在 market.js HEAT_LEVEL_*）。
   M3-10 起只設 --hm-tile-c（磚的基色），漸層由 .mkt-hm-tile 統一組出來；
   色階計算式與三個代幣的關係逐字不變。 */
.hm-up-1 { --hm-tile-c: color-mix(in srgb, var(--up) var(--hm-l1), var(--hm-base)); }
.hm-up-2 { --hm-tile-c: color-mix(in srgb, var(--up) var(--hm-l2), var(--hm-base)); }
.hm-up-3 {
  --hm-tile-c: color-mix(in srgb, var(--up) var(--hm-l3), var(--hm-base));
  color: var(--hm-fg-strong);
}
.hm-down-1 { --hm-tile-c: color-mix(in srgb, var(--down) var(--hm-l1), var(--hm-base)); }
.hm-down-2 { --hm-tile-c: color-mix(in srgb, var(--down) var(--hm-l2), var(--hm-base)); }
.hm-down-3 {
  --hm-tile-c: color-mix(in srgb, var(--down) var(--hm-l3), var(--hm-base));
  color: var(--hm-fg-strong);
}
/* hm-na＝該產業沒有漲跌幅資料，與「持平」共用中性灰（文字會顯示「—」，
   語意不會混淆）。 */
.hm-flat,
.hm-na { --hm-tile-c: color-mix(in srgb, var(--flat) var(--hm-flat-mix), var(--hm-base)); }

.mkt-hm-label {
  width: 100%;
  padding: 3px 5px;
  text-align: center;
  overflow: hidden;
}

/* 文字三階（M3-10）：產業名 700，漲跌幅 800 大字（同權重＝沒有階層）。 */
.mkt-hm-name {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-hm-chg {
  margin-top: 2px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-hm-share {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 底部色階圖例 ---------- */

/* 語意標示列（2026-08-06 17:53 站長誤讀事件）：大小/顏色的意義拉到圖
   上方顯眼處，不再只靠 footer 小字。 */
.mkt-hm-semantics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.mkt-hm-sem-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.mkt-hm-legend {
  margin-top: 12px;
}

.mkt-hm-legend-bar {
  display: flex;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

/* 圖例色塊與方塊共用同一組七檔 class；M3-10 起色階 class 只設 --hm-tile-c，
   所以這裡要自己接成背景色（圖例是平的，不套磚的對角漸層）。 */
.mkt-hm-legend-seg {
  flex: 1 1 0;
  background-color: var(--hm-tile-c);
}

.mkt-hm-legend-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}

.mkt-hm-foot {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-faint);
}

/* 熱力圖資料缺席時「熱力圖」鈕停用（market.js syncIndustryHeatAvailability()）。
   刻意只作用在本區塊的切換鈕上，不動全域 .chart-mode-btn（同 #breadth-view-tabs
   既有寫法）。 */
#industry-view-tabs .chart-mode-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#industry-view-tabs .chart-mode-btn:disabled:hover { color: var(--text-muted); }

@media (max-width: 768px) {
  main { padding: 14px 14px 40px; }
  .industry-table th,
  .industry-table td { padding: 10px 12px; font-size: 13px; }
  .intraday-chart-canvas { height: 160px; }
  .ai-review-gauge-card { flex: 1 1 100%; }
  .ai-review-freshness-banner { flex-direction: column; align-items: flex-start; }

  /* FT-56 行動版：儀表列與關鍵觀點卡一律單欄堆疊（半圓儀表在 390px 寬
     仍完整，.ai-review-env-dial 是 width:100% 的等比 SVG）。 */
  .ai-review-dash { grid-template-columns: 1fr; }
  .ai-review-keypoints { grid-template-columns: 1fr; }
  .ai-review-verdict-band { padding: 14px; }
  .ai-verdict-badge.ai-verdict-badge-lg { font-size: 18px; padding: 6px 18px; }
  .ai-review-env-score { font-size: 30px; }
}

/* 市場寬度環形圖窄螢幕（FT-52 M3-1）：環與圖例各自佔滿一行、環縮小，
   390px 手機仍不溢出（.breadth-donut-chart 已有 max-width:100% 兜底）。 */
@media (max-width: 640px) {
  .breadth-donut-wrap { padding: 14px; gap: 14px; }
  .breadth-donut-col { flex: 1 1 100%; }
  .breadth-donut-chart { width: 176px; }
  .breadth-legend { flex: 1 1 100%; }

  /* 指數 hero 主卡（FT-52 M3-6）窄螢幕：整張卡直排——大數字一行、chip 一行，
     收盤狀態不再靠右擠在同一行；面積圖 band 壓矮，出血邊距跟著卡片內距走
     （--hero-pad-x 同時被 padding 與 .index-hero-spark 的負邊距讀取，改一處
     兩邊一定同步）。 */
  .index-hero {
    --hero-pad-x: 14px;
    --hero-spark-h: 60px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .index-hero-main {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .index-hero-chip {
    align-self: flex-start;
    margin-bottom: 0;
  }
  .index-hero-status {
    margin-left: 0;
    margin-bottom: 0;
    text-align: left;
  }
  .index-hero-sub { gap: 4px 14px; }
  .hero-range-labels { font-size: 11px; }
}

/* ===========================================================================
   官股銀行動向卡 `#section-gov-bank`（2026-08-22 假日衝刺案 1；站長 11:46
   核准、11:47 追加「往精緻儀表方向設計，不是普通表格」）

   整張卡由伺服器端直出（app.py `_gov_bank_market_card_html()`）：趨勢長條與
   比例條都是 inline `height/width:%`，逐日明細表也是直出的靜態 HTML。
   **JS 只做一件事**——切「圖表 ⇄ 數字」時換一個 class（market.js
   `initGovBankViewToggle()`），零 fetch、零渲染。本段所有顏色一律走既有 CSS
   變數（--card-bg / --text / --up / --down …），四套主題（藍黑經典＋
   light-a/b/c＋champagne）自動跟著切，不在這裡寫死任何一組色票。

   台股色彩慣例：買超＝紅（--up）、賣超＝綠（--down），與本頁其他漲跌元件
   同一組變數，不自創第二套。
   =========================================================================== */

.sv-gb-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px 18px;
  overflow: hidden;
}

/* 頂緣一道細光帶：讓這張卡在一排同色卡片裡有「儀表面板」的層次感，而不是
   單純多一個方框。用 ::before 而非額外 DOM（伺服器直出的 HTML 越精簡越好）。*/
.sv-gb-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand-gradient);
  opacity: 0.7;
}

.sv-gb-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.sv-gb-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.01em;
}

.sv-gb-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--accent-bg);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}

/* -- (2) 主數值（大字儀表） ------------------------------------------- */

.sv-gb-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
}

.sv-gb-hero-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sv-gb-hero-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.sv-gb-hero-value {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.sv-gb-hero--buy .sv-gb-hero-value { color: var(--up); }
.sv-gb-hero--sell .sv-gb-hero-value { color: var(--down); }
.sv-gb-hero--flat .sv-gb-hero-value { color: var(--text); }

.sv-gb-hero-unit {
  font-size: 15px;
  font-weight: 600;
  margin-left: 5px;
  opacity: 0.75;
}

.sv-gb-hero-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -- (3) 買賣天平 ------------------------------------------------------
   只給淨額會讓讀者以為官股當天只做了 28 億的交易；這條對比條把「買 727 億、
   賣 755 億」的量體攤開，淨額才讀得出是兩個大數相減的殘值。 */

.sv-gb-scale { margin-top: 16px; }

.sv-gb-scale-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

.sv-gb-scale-buy,
.sv-gb-scale-sell {
  display: block;
  height: 100%;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-gb-scale-buy { background: var(--up); }
.sv-gb-scale-sell { background: var(--down); }

.sv-gb-scale-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sv-gb-legend { display: inline-flex; align-items: center; gap: 5px; }

.sv-gb-legend::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.sv-gb-legend--buy::before { background: var(--up); }
.sv-gb-legend--sell::before { background: var(--down); }
.sv-gb-legend b { color: var(--text); font-weight: 700; }

/* -- 小標（趨勢／前三檔共用） ----------------------------------------- */

.sv-gb-subhead {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 9px;
}

/* -- (4) 近 10 日趨勢迷你圖 ------------------------------------------- */

.sv-gb-trend {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* 小標與「圖表｜數字」膠囊同一列（比照 .chart-header 的 h2 左／tabs 右）。 */
.sv-gb-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.sv-gb-trend-head .sv-gb-subhead { margin-bottom: 0; }

/* 膠囊本體完全沿用全域 .chart-mode-tabs/.chart-mode-btn（本檔 963-1014 行），
   這裡只收掉它的 margin 並把字級縮一號——卡內小標列不是區塊標題列，用
   原尺寸會比它要標示的小標還搶眼。 */
.sv-gb-tabs {
  margin-bottom: 0;
  gap: 6px;
}

.sv-gb-tabs .chart-mode-btn {
  padding: 5px 13px;
  font-size: 12px;
}

/* 兩份檢視都在 DOM 裡（伺服器直出），切換只換 class：**預設圖表**，
   所以「表格隱藏」是靜態規則、不依賴 JS 先跑過一輪。 */
.sv-gb-view--table { display: none; }
#gov-bank-trend.sv-gb-mode-table .sv-gb-view--chart { display: none; }
#gov-bank-trend.sv-gb-mode-table .sv-gb-view--table { display: block; }

/* 檢視底下的說明句（單位／方向）：兩份檢視各自一句，切換時跟著換。 */
.sv-gb-viewnote {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* 長條圖用 **flex + 百分比高度**，不用內嵌 SVG。
   血訓（2026-08-22 第一版實看）：`viewBox="0 0 100 44"` ＋ `width:100%;
   height:68px` 的 SVG，因為 preserveAspectRatio 預設 `xMidYMid meet` 會同時
   滿足寬高限制，實際只渲染出 154px 寬並置中，右邊 92% 全是空白。flex 長條
   的寬度由 flex 分配、高度由百分比決定，兩者互不干涉，任何容器寬度都撐滿。*/
/* 上下 `padding` 是**給柱上標值留的空間**（2026-08-22 站長 13:50「每根柱要
   標上金額」）：標值絕對定位在長條端點，會往圖框外突出約一個字高。padding
   在 border-box 下不影響零線幾何——`.sv-gb-zero` 的 `top:50%` 吃的是 padding
   box，上下 padding 對稱時它仍然落在內容區的正中央（即兩個半區的交界）。 */
.sv-gb-spark {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  height: 132px;
  padding: 18px 0;
}

/* 一天一欄；上下兩個等高半區夾住零線。 */
.sv-gb-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* `position: relative` 是給柱上標值當定位參考——標值的 `bottom`/`top` 百分比
   與長條的 `height` 百分比吃**同一個**參考框，數字才會精準黏在長條端點上。 */
.sv-gb-col-up,
.sv-gb-col-dn {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  min-height: 0;
}

/* 買超：貼著零線往上長。賣超：貼著零線往下長。 */
.sv-gb-col-up { align-items: flex-end; }
.sv-gb-col-dn { align-items: flex-start; }

/* 長條寬度是**欄寬的比例＋絕對上限**：只給 `width:100%` 的話，1280px 卡片
   除以 10 天＝每欄 190px，長條會連成一片色牆而不是十根柱子（2026-08-22
   第二版實看修正）；只給固定寬則窄螢幕會爆版。兩者併用，寬窄都成立。 */
.sv-gb-bar {
  display: block;
  width: 64%;
  max-width: 34px;
  border-radius: 3px;
  opacity: 0.66;
  transition: opacity 0.2s ease;
}

.sv-gb-bar--buy {
  background: var(--up);
  border-radius: 3px 3px 1px 1px;
}

.sv-gb-bar--sell {
  background: var(--down);
  border-radius: 1px 1px 3px 3px;
}

/* 當日那一根加深，「今天在哪」一眼看得到。 */
.sv-gb-bar.is-today { opacity: 1; }

/* 滑過整張圖時其餘壓暗、被指到的那一根拉滿（配合每欄的 title 逐日數字）。*/
.sv-gb-spark:hover .sv-gb-bar { opacity: 0.32; }
.sv-gb-col:hover .sv-gb-bar { opacity: 1; }

/* -- 柱上標值（站長 2026-08-22 13:50「每根柱要標上金額」）--------------
   刻意**不是**長條的子節點：長條有 opacity 與 hover 壓暗規則，數字若跟著
   一起變淡，「一眼看到多少億」就打折了。手機沒有 hover，所以逐日數字一律
   印出來，`title` 只是桌機的加值不是唯一出口。

   幾何（B27「擠壓 bug 先算最小寬幾何」）：320px 卡內可用寬約 272px，扣掉
   9 道 2px gap 後每欄約 25px。標值最長是 `+99.8`（≥100 億時 app.py 端會砍
   小數變成 `+127`，4 個字元），在窄機字級 8px ＋ 負字距下量到約 21px，留有
   餘裕。`nowrap` 保證它不會折成兩行把零線推歪。 */
.sv-gb-val {
  position: absolute;
  left: 50%;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* 買超標在柱頂上方、賣超標在柱底下方；translateY 是與柱端的呼吸間距。 */
.sv-gb-val--buy {
  color: var(--up);
  transform: translate(-50%, -4px);
}

.sv-gb-val--sell {
  color: var(--down);
  transform: translate(-50%, 4px);
}

/* 當日那一天的數字再重一級（與 .sv-gb-bar.is-today 同一組「今天在哪」語彙）。*/
.sv-gb-val.is-today {
  font-size: 12.5px;
  text-shadow: 0 1px 3px var(--card-bg);
}

/* 零軸基準線：貫穿全圖，讓「小幅賣超」不會被看成買超。 */
.sv-gb-zero {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 1px solid var(--border-strong);
  pointer-events: none;
}

.sv-gb-trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* `.sv-gb-subnote`（小標內的「（上為買超・下為賣超）」）已於 2026-08-22 移除：
   小標那一列讓給「圖表｜數字」膠囊，方向說明改放到圖表檢視底下的
   `.sv-gb-viewnote`（和單位寫在同一句，且切到數字檢視時會跟著換掉——
   「上為買超」對一張表格是句廢話）。規則跟著刪，不留死 CSS。 */

/* -- (4b) 逐日明細表（「數字」檢視）----------------------------------
   刻意**不吃**全域 `.sv-table`：那一套是給整頁寬的資料表用的（13px 字、
   12px padding），塞進卡片裡會比卡片本身的密度粗一級。這裡走卡內密度：分隔
   線取代方框、斑馬紋只做極淡的一層、數字欄一律 tabular-nums 對齊小數點。 */

.sv-gb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sv-gb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.sv-gb-table-cap {
  caption-side: top;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-faint);
  padding-bottom: 9px;
}

.sv-gb-table thead th {
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
}

/* 三個數字欄各吃固定比例、日期欄拿剩下的：不給寬度的話 1280px 下瀏覽器會把
   多出來的空間平均攤給四欄，數字被推得離欄名很遠、四欄各自飄在自己的空白裡
   （2026-08-22 實看修正）。數字靠右對齊才比得出位數。 */
.sv-gb-table .sv-gb-th-num,
.sv-gb-table .sv-gb-td-num {
  text-align: right;
  width: 21%;
}

/* `th` 的瀏覽器預設是置中——日期欄是列標題（`<th scope="row">`），沒有這條
   會變成「日期置中、數字靠右」的雙軸線，一整欄看起來像浮在中間。 */
.sv-gb-table tbody th { text-align: left; }

.sv-gb-table tbody th,
.sv-gb-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* 斑馬紋：只用一層極淡底色（不是兩種底色交替），在五套主題下都只是「隱約
   分得出列」而不會變成條紋壁紙。 */
.sv-gb-table tbody tr:nth-child(even) {
  background: rgba(127, 127, 127, 0.055);
}

.sv-gb-table tbody tr:last-child th,
.sv-gb-table tbody tr:last-child td { border-bottom: 0; }

.sv-gb-table tbody tr:hover { background: var(--card-bg-hover); }

.sv-gb-td-date {
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sv-gb-td-num {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 淨額欄是這張表的重點欄：字重再加一級、紅綠走全站台股慣例（買超紅、賣超
   綠），與長條圖的顏色語彙逐字一致。 */
.sv-gb-td-net { font-weight: 800; }
.sv-gb-td-net--buy { color: var(--up); }
.sv-gb-td-net--sell { color: var(--down); }
.sv-gb-td-net--flat { color: var(--text-muted); }

/* 最新一日整列加一條品牌色左緣，與長條圖的 .is-today 是同一件事的兩種說法。*/
.sv-gb-table tbody tr.is-today th:first-child {
  box-shadow: inset 2px 0 0 rgba(var(--brand-cyan-rgb), 0.75);
}

.sv-gb-table tbody tr.is-today th,
.sv-gb-table tbody tr.is-today td { color: var(--text-strong); }

.sv-gb-table tbody tr.is-today .sv-gb-td-net--buy { color: var(--up); }
.sv-gb-table tbody tr.is-today .sv-gb-td-net--sell { color: var(--down); }

/* -- (5) 買超前三檔質感列卡 ------------------------------------------- */

.sv-gb-tops {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sv-gb-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-gb-top-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.sv-gb-top-row:hover {
  border-color: var(--border-strong);
  transform: translateX(2px);
}

.sv-gb-rank {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--up);
  background: var(--up-bg);
  font-variant-numeric: tabular-nums;
}

.sv-gb-top-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-gb-top-name a {
  color: inherit;
  text-decoration: none;
}

.sv-gb-top-name a:hover { color: var(--accent); }

.sv-gb-top-id {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* 比例量表：三檔之間的相對量體，讓「第一名比第二名多多少」不必用心算。
   **固定寬度**（不是 flex-grow）：撐滿整列的話在 1280px 下會變成一條橫貫
   全卡的細線，讀起來像文字底線而不是量表（2026-08-22 第一版實看修正）。 */
.sv-gb-top-track {
  flex: 0 0 auto;
  width: 132px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.sv-gb-top-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--up);
  opacity: 0.85;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-gb-top-amt {
  flex: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--up);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sv-gb-top-unit {
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.75;
}

/* -- (6) fine print（白話說明＋來源標示＋非投資建議） ------------------ */

.sv-gb-foot {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px dashed var(--border);
}

.sv-gb-blurb {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.sv-gb-fine {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
}

/* 動效尊重系統設定（無障礙）。 */
@media (prefers-reduced-motion: reduce) {
  .sv-gb-scale-buy,
  .sv-gb-scale-sell,
  .sv-gb-top-fill,
  .sv-gb-top-row,
  .sv-gb-bar {
    transition: none;
  }
  .sv-gb-top-row:hover { transform: none; }
}

/* -- 窄螢幕（六寬驗收矩陣的 320/360/390/412 四檔） --------------------
   主數值降一級但仍是全卡最大的字；hero 直排讓「N 家行庫」不與大數字擠同一
   行；前三檔列卡的金額不換行、股名靠 ellipsis 收。 */
@media (max-width: 560px) {
  .sv-gb-card { padding: 16px 14px 15px; }
  .sv-gb-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 13px;
  }
  .sv-gb-hero-value { font-size: 28px; }
  .sv-gb-hero-meta { gap: 12px; font-size: 11.5px; }
  /* 圖高 74px（原值）＋ 上下各 15px 給柱上標值，border-box 合計 104px。
     padding 要大於「標值字高 ＋ 與柱端的 4px 呼吸間距」，否則滿格的那一根
     會把數字頂到圖框外、壓到下方的日期軸（2026-08-22 實看量到 1px 溢出）。*/
  .sv-gb-spark { height: 104px; padding: 15px 0; gap: 2px; }
  .sv-gb-val { font-size: 9px; letter-spacing: -0.02em; }
  .sv-gb-val.is-today { font-size: 9.5px; }
  /* 小標與膠囊維持「左標題右膠囊」（同桌機）：320px 實量小標約 120px ＋
     膠囊約 94px，在 272px 的卡內寬度裡放得下。系統字級放大時 flex-wrap 會
     讓膠囊自己掉到第二列，不需要另立斷點（內容驅動、不做機型客製）。 */
  .sv-gb-tabs .chart-mode-btn { padding: 5px 11px; font-size: 11.5px; }
  .sv-gb-table { font-size: 12px; }
  .sv-gb-table thead th { padding: 6px 6px; font-size: 11px; }
  .sv-gb-table tbody th,
  .sv-gb-table tbody td { padding: 7px 6px; }
  .sv-gb-top-row { gap: 9px; padding: 8px 10px; }
  .sv-gb-top-name { font-size: 13px; }
  .sv-gb-top-amt { font-size: 15px; }
  .sv-gb-top-track { width: 62px; }
  .sv-gb-scale-legend { font-size: 11.5px; }
}

/* 320px：最窄的那一檔——名次徽章縮一號、金額字級再降，確保「股名 + 微條 +
   金額」三欄在一行內不擠壓（B27：擠壓 bug 先算最小寬幾何）。 */
@media (max-width: 350px) {
  .sv-gb-card { padding: 14px 12px 13px; }
  .sv-gb-hero-value { font-size: 25px; }
  .sv-gb-rank { width: 20px; height: 20px; font-size: 11px; }
  .sv-gb-top-amt { font-size: 14px; }
  .sv-gb-top-id { margin-left: 4px; font-size: 11px; }
  .sv-gb-hero-meta { flex-wrap: wrap; gap: 4px 12px; white-space: normal; }
  /* 320px：量表整個收掉，把寬度全留給股名與金額（B27 最小寬幾何）。 */
  .sv-gb-top-track { display: none; }
  /* 圖高 66px（原值）＋ 上下各 14px 給柱上標值，border-box 合計 94px。 */
  .sv-gb-spark { height: 94px; padding: 14px 0; gap: 2px; }
  /* 每欄約 25px：8px 字 ＋ -0.04em 字距，最長的 `+99.8` 量到約 21px。 */
  .sv-gb-val { font-size: 8px; letter-spacing: -0.04em; }
  .sv-gb-val.is-today { font-size: 8.5px; }
  .sv-gb-table { font-size: 11px; }
  .sv-gb-table-cap { font-size: 10.5px; }
  .sv-gb-table thead th { padding: 6px 4px; font-size: 10.5px; }
  .sv-gb-table tbody th,
  .sv-gb-table tbody td { padding: 6px 4px; }
  .sv-gb-tabs .chart-mode-btn { padding: 4px 10px; font-size: 11px; }
}