/* 產業資金流向頁樣式。共用 app.css 的變數 / nav / footer / notice-banner /
   toast，以及 institutional.css 定義的 .inst-tab / .inst-as-of / .btn-secondary
   （本頁模板同時引入 app.css，institutional.css 未被載入，故沿用相同 class
   名稱但在此檔重新定義所需樣式，避免額外多引一份 institutional.css）。 */

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

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

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

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

.inst-limit-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
  min-width: 0;
}

/* `display:flex` 的權重蓋得過 UA 的 `[hidden]{display:none}`，不補這條的話
   日期下拉在動畫檢視下掛了 hidden 也還是看得見（industry.js
   applyPaneVisibility() 用的就是 hidden 屬性）。 */
.inst-limit-label[hidden] {
  display: none;
}

#ind-filter-date {
  min-width: 118px;
}

/* ---------- 檢視切換（動畫／熱力圖／表格／方塊，#165 整併後四籤） ---------- */

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

/* 檢視 pane（#165）：動畫 pane 與單日 pane 由 industry.js 用 hidden 屬性切換。
   pane 本身**不設 display**——設了就會蓋掉 UA 的 `[hidden]{display:none}`，
   這條只是把「別人日後在這裡加 display」的地雷先拆掉。 */
.ind-pane[hidden] {
  display: none;
}

/* 檢視切換膠囊（#193 質感波，2026-08-17）：底／內緣高光／選中態漸層描邊全
   部走 app.css 質感層代幣（`--sv-pill-*`），與 /market `.chart-mode-btn`、
   /institutional `.inst-tab`、/futures `.fut-view-btn` 同一套語彙。行為零改
   動，只換外觀。 */
.ind-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);
}

.ind-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;
}

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

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

.ind-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);
}

/* ---------- 白話摘要句 ---------- */

.ind-summary {
  font-size: 13.5px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.ind-summary:empty {
  display: none;
}

/* ==========================================================================
   盤後重點解讀（規則式、零 AI 成本，任務 #58 M2）
   卡殼本身用 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、futures.css、etf.css 原本各存一份逐字相同的副本，改一
   次要改四遍。要調這組卡請改 app.css 那一段，不要在這裡長回第二份。
   下面只留本頁專屬的容器外距（其他三頁沒有這條）。
   ========================================================================== */

.insights-list {
  margin-bottom: 14px;
}

/* 任務#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;
}

/* ---------- 產業熱度排行表 ---------- */

/* 熱度排行表（#193 質感波）：卡面／表頭／斑馬／列高亮／橫捲暗示全部與
   /institutional 排行表同一組代幣，兩頁的排行表因此讀起來是同一個元件。 */
.ind-ranking-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  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;
}

table.ind-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.ind-ranking-table th,
table.ind-ranking-table td {
  padding: 11px 14px;
  text-align: right;
  border-bottom: 1px solid var(--sv-row-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table.ind-ranking-table th:first-child,
table.ind-ranking-table td:first-child,
table.ind-ranking-table th:nth-child(2),
table.ind-ranking-table td.ind-name {
  text-align: left;
}

table.ind-ranking-table th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--sv-thead-bg);
  border-bottom: 1px solid var(--sv-thead-rule);
}

/* ---------- 可點擊排序表頭（任務新增） ---------- */

table.ind-ranking-table th.ind-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 120ms var(--ease);
}

table.ind-ranking-table th.ind-th-sortable:hover {
  color: var(--text);
}

table.ind-ranking-table th.ind-th-sortable::after {
  content: "\21C5"; /* ⇅ 中性上下箭頭，表示可排序但目前未排序 */
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.45;
}

table.ind-ranking-table th.ind-th-sorted-desc::after {
  content: "\2193"; /* ↓ */
  opacity: 1;
  color: var(--accent-text);
}

table.ind-ranking-table th.ind-th-sorted-asc::after {
  content: "\2191"; /* ↑ */
  opacity: 1;
  color: var(--accent-text);
}

/* ---------- 預估量「預估」小標（任務新增） ---------- */

.ind-estimate-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  color: #1a1206; /* theme-exempt: 金色徽章上的深墨字，缺 token --on-gold */
  background: linear-gradient(135deg, #ffd27a, var(--watch-fg)); /* theme-exempt: 起點金 #ffd27a 缺 token --gold-hi（終點 #f5a623 已接 --watch-fg） */
  vertical-align: middle;
}

table.ind-ranking-table tbody tr:last-child td {
  border-bottom: none;
}

table.ind-ranking-table tbody tr {
  cursor: pointer;
  transition: background 120ms var(--ease);
}

/* 斑馬：極淡。熱度前 5 名的 .ind-hot 紅底規則在下方、選擇器更長，仍然壓得
   過這條，前段高亮不受影響。 */
table.ind-ranking-table tbody tr:nth-child(even) {
  background-color: var(--sv-row-zebra);
}

table.ind-ranking-table tbody tr:hover,
table.ind-ranking-table tbody tr:active {
  background-color: var(--sv-row-hover);
}

/* 排名欄弱化：索引不是資訊，壓成等寬小字讓視線落到產業名與金額 */
.ind-rank {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 1%;
}

.ind-name {
  font-weight: 700;
  color: var(--text);
}

/* 熱度前段（前 5 名）紅底高亮，呼應「資金流向」由上而下選股的視覺重點。 */
table.ind-ranking-table tbody tr.ind-hot td {
  background-color: var(--hot-row-bg);
}

table.ind-ranking-table tbody tr.ind-hot:hover td {
  background-color: var(--hot-row-bg);
  filter: brightness(1.15);
}

.ind-heat-score {
  font-weight: 800;
}

table.ind-ranking-table td.up { color: var(--up); }
table.ind-ranking-table td.down { color: var(--down); }
table.ind-ranking-table td.flat { color: var(--text-muted); }

.ind-streak-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--up-bg);
  color: var(--up);
}

.ind-streak-badge.ind-streak-sell {
  background: var(--down-bg);
  color: var(--down);
}

/* ---------- tabs（複用 institutional.css 的 .inst-tab 視覺） ---------- */

.ind-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.inst-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: calc(var(--radius-sm) - 3px);
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
  white-space: nowrap;
}

.inst-tab:hover {
  color: var(--text);
}

.inst-tab.active {
  background: var(--accent-bg);
  color: var(--text);
}

.btn-secondary {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}

.btn-secondary:hover {
  background: var(--card-bg-hover);
  border-color: var(--border-strong);
}

/* ---------- 單產業歷史趨勢彈窗（M3） ---------- */

.ind-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ind-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.72); /* theme-exempt: 彈窗背幕 5,8,16 缺 token（--overlay rgba(11,15,26,.86) 非同值） */
}

.ind-modal-panel {
  position: relative;
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

.ind-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.ind-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.ind-modal-sentence {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.ind-modal-chart-wrap {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

#ind-history-canvas {
  width: 100%;
  height: 240px;
  display: block;
}

/* ---------- AI 總體點評列（M4，任務新增） ----------
   結構化渲染的彈窗殼共用 app.css 既有 .aireview-* / .ai-verdict-badge-* /
   .ai-bullet-list class（futures.js／aireview.js 已在用），這裡只補本頁
   特有的「總體點評按鈕列」「表格內每列 AI 點評小按鈕」「精選觀察名單卡」。 */

.ind-ai-overview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.ind-ai-overview-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

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

.ind-ai-overview-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-ind-ai-review {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--brand-gradient);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 150ms ease;
  white-space: nowrap;
}

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

/* AI 生成事前預期備註（指揮官加案，2026-07-12）：插在「AI 總體點評＋精選
   觀察」鈕旁，讀 ai_progress_modal.js ETA_RANGES 動態產生文字，見
   industry.js buildAiEtaNoteEl()。flex-basis 100% 強制獨立一行，不擠壓
   下拉選單/按鈕原本的橫排。 */
.ind-ai-overview-controls .ai-eta-note {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--text-faint);
  margin: 0;
}

/* ---------- AI 總體點評內嵌結果區（2026-07-20 由彈窗改內嵌） ----------
   容器本身沿用 .sv-section（背景/邊框/圓角/陰影跟「盤後重點解讀」卡一致，
   見 industry.html #ind-insights-section），這裡只補內容在「非 modal」
   情境下需要的幾條清理：.aireview-header 原本 padding-right:26px 是給
   彈窗右上角 × 關閉鈕留位，內嵌沒有關閉鈕，留白會讓標題不必要地偏左。 */
.ind-overview-ai-result .aireview-header {
  padding-right: 0;
}

/* ---------- 表格內每列「AI 點評」小按鈕 ---------- */

.ind-ai-cell {
  text-align: center !important;
}

.ind-row-ai-btn {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}

.ind-row-ai-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--accent);
}

/* ---------- 精選觀察名單卡 ---------- */

.ind-ai-picks-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.ind-ai-picks-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.ind-ai-picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ind-ai-pick {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.ind-ai-pick-bull { border-left-color: var(--up); }
.ind-ai-pick-bear { border-left-color: var(--down); }
.ind-ai-pick-warn { border-left-color: var(--watch-fg); }
.ind-ai-pick-level { border-left-color: var(--accent); }
.ind-ai-pick-neutral { border-left-color: var(--text-faint); }

.ind-ai-pick-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.ind-ai-pick-id {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--accent-text);
  text-decoration: none;
}

.ind-ai-pick-id:hover {
  text-decoration: underline;
}

.ind-ai-pick-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ind-ai-pick-industry {
  font-size: 11px;
  color: var(--text-faint);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
}

.ind-ai-pick-reason {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---------- 方塊視圖：卡片網格（任務新增） ---------- */

.ind-card-sort-tabs {
  margin-bottom: 12px;
}

.ind-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.ind-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}

.ind-card:hover {
  background-color: rgba(var(--surface-tint-rgb), 0.03);
  border-color: var(--border-strong);
}

.ind-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ind-card-name {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--text);
}

.ind-card-heat {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
}

.ind-card-change {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
}

.ind-card-change.up { color: var(--up); }
.ind-card-change.down { color: var(--down); }
.ind-card-change.flat { color: var(--text-muted); }

.ind-card-leader {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.ind-card-leader-link {
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
}

.ind-card-leader-link:hover {
  text-decoration: underline;
}

.ind-card-leader-link .up { color: var(--up); }
.ind-card-leader-link .down { color: var(--down); }
.ind-card-leader-link .flat { color: var(--text-muted); }

.ind-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.ind-card-footer {
  display: flex;
  justify-content: flex-end;
}

/* ---------- 熱力圖視圖：產業資金流 treemap（FT-52 M3-4，2026-08-06） ----------
   方塊面積＝當日成交金額佔比（squarified treemap，演算法在 industry.js
   squarify()），方塊顏色＝當日產業漲跌幅色階。**台股紅漲綠跌**，與
   TradingView 美股熱圖配色相反。

   **本段在 web/static/market.css 有一份複本**（大盤總覽頁「產業漲跌」區，
   FT-52 M3-5，同檔搜 `.mkt-hm-wrap`）：結構 class 前綴改成 `mkt-hm-`，七檔
   色階 class 名（hm-up-1..3 等）刻意逐字相同以利對照 diff。**改色階旋鈕或
   結構時兩份要一起改**（兩頁不會同時載入對方的 css，不會互相汙染）。

   色階全部由 --up/--down/--flat 三個主題代幣用 color-mix() 現算，本檔零
   寫死色值；四主題只換下面那組百分比旋鈕，不換顏色來源（同 market.css
   FT-52 M3-1 環形圖的既有作法）。

   對比驗算（2026-08-06 以 WCAG 相對亮度實算，四主題逐檔）：
     深色主題 24/42/58% 疊 --bg-2 → 內文 --text 對比 10.6 / 7.2 / 5.5（紅）、
       9.4 / 6.2 / 4.6（綠），最低 4.6 > 4.5 過 AA。
     淺色主題 20/50/100% 疊 --card-bg → L1/L2 用 --text 對比 8.9 / 5.4（紅）、
       9.2 / 5.8（綠）；L3 是滿檔純色，改用白字 5.25（紅）／4.90（綠）。
   改百分比或改 --up/--down 代幣時要重跑這組驗算，別憑感覺調。 */

.ind-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 取代原本的白色 sheen 疊層）：亮端保留多少
     基色（其餘混白）／暗端保留多少（其餘混黑）。中間 stop 就是基色本身，
     文字落在那一帶，所以檔頭的對比驗算不受影響。 */
  --hm-lit: 88%;
  --hm-shade: 90%;
  --hm-hover-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}

:root[data-theme="light-a"] .ind-hm-wrap,
:root[data-theme="light-b"] .ind-hm-wrap,
:root[data-theme="light-c"] .ind-hm-wrap,
:root[data-theme="champagne"] .ind-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;
  /* 白底上的立體感要更收斂：亮端只混 7% 白（原本的 sheen 是 30%），暗端 8%
     黑，否則滿檔的 L3 純色磚配白字會掉對比。 */
  --hm-lit: 93%;
  --hm-shade: 92%;
  --hm-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

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

/* ---- 立體磚（FT-52 M3-10，站長 2026-08-06 22:32 拍板）----
   三件事，全部在**框內**完成，squarify 的幾何一格都沒動：
     ① 磚間距：`border: var(--hm-gap) solid transparent` ＋
        `background-clip: padding-box`——色塊只畫在 padding box，版面仍佔滿
        整格，所以「方塊面積比例 === 成交金額比例」的對帳口徑不變。相鄰兩磚
        各自內縮 --hm-gap（JS 給 ≤2.5px），視覺縫寬＝兩倍＝ 4-5px。
     ② 圓角：半徑由 JS 依磚短邊連續縮放寫成 --hm-r（8-12px，小磚往下收）。
     ③ 對角漸層：135° 亮側 → **基色** → 暗側。基色 --hm-tile-c 就是七檔色階
        原本的 background-color 值（見下方色階 class），中間 stop 落在 50%，
        文字**正好落在基色帶上**——所以 industry.css 檔頭那組 WCAG 對比驗算
        原封不動仍然成立，不需要重算。亮暗兩端只偏移 --hm-lit/--hm-shade
        （深色 12%/10%、淺色 7%/8%），比原本的白色 sheen（淺色主題 30%）更輕。 */
.ind-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: ind-hm-tile-in 0.42s var(--ease) both;
  transition: filter 120ms var(--ease), box-shadow 120ms var(--ease);
}

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

.ind-hm-clickable { cursor: pointer; }

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

/* 七檔色階：三紅／灰中性／三綠（門檻常數在 industry.js HEAT_LEVEL_*）。
   M3-10 起色階 class 只設 --hm-tile-c（磚的**基色**），漸層由上面
   .ind-hm-tile 統一組出來——色階的計算式與 --up/--down/--flat 三個代幣的
   關係逐字不變，只是從「直接當背景色」變成「當漸層的中間 stop」。 */
.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)); }

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

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

.ind-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;
}

.ind-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 站長誤讀事件，同 market.css 同段）。 */
.ind-hm-semantics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

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

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

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

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

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

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

/* 熱力圖資料缺席時「熱力圖」鈕停用（industry.js syncHeatTabAvailability()）。
   刻意只作用在本頁切換鈕上，不動全域樣式（比照 market.css 同款寫法）。 */
#ind-view-toggle .ind-view-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

/* ---------- RESPONSIVE ---------- */

@media (max-width: 640px) {
  table.ind-ranking-table th,
  table.ind-ranking-table td {
    padding: 9px 10px;
    font-size: 12px;
  }

  /* 檢視籤（#165 整併後四籤）：390px 直式一行放不下四籤（含 emoji 單籤約
     95~120px，四籤加間距超過 400px，可用寬只有 ~358px）。橫向捲動會把後兩籤
     藏在畫面外——使用者根本不知道還有表格/方塊可切，所以改 2×2 網格：四籤
     全都看得見、零橫向溢出。 */
  .ind-section-head-controls {
    width: 100%;
  }

  .ind-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .ind-view-btn {
    padding: 7px 8px;
    font-size: 12px;
  }

  .ind-ai-overview-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .ind-ai-overview-controls {
    justify-content: space-between;
  }

  .ind-card-grid {
    grid-template-columns: 1fr;
  }

  /* 熱力圖窄螢幕（FT-52 M3-4）：treemap 本來就是 width:100% 的絕對定位畫布，
     不會橫向溢出；這裡只把圖例/註腳的字縮一級，避免三段刻度在 360px 擠成
     兩行。畫布高度改由 JS heatCanvasHeight() 走 1.15 倍直式比例。 */
  .ind-hm-legend-ticks { font-size: 10px; }

  .ind-hm-foot { font-size: 11px; }
}

/* ---------- 產業輪動動畫（任務 #160，見 web/static/industry_bubble.js） ----------
   版面跳動防治：.ind-bubble-stage 用 aspect-ratio 先把高度佔住，canvas 與
   骨架都絕對定位鋪滿它——資料還沒回來、或整塊初始化失敗（JS 會把
   #ind-bubble 整個 display:none）都不會讓下方排行表上下彈跳。
   顏色一律走代幣，四主題自動跟著換；canvas 內的顏色由 JS 讀 SvTheme。 */

.ind-bubble {
  /* #165 整併後它是區塊內的第一個 pane，區塊自己有 margin-bottom（.ind-section），
     這裡再留 28px 會讓動畫檢視底部空一大塊。 */
  margin: 0;
  padding: 14px 14px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

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

/* #165 整併後區塊標題由外層 .ind-section-head h2（「產業資金流向」）統一，
   pane 內只留一行次級標籤——同一個區塊裡出現兩個同級標題會讓層級失焦。 */
.ind-bubble-subtitle {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.ind-bubble-ranges {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ind-bubble-range {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.ind-bubble-range:hover {
  color: var(--text);
}

.ind-bubble-range.active {
  background: var(--accent-bg);
  color: var(--accent);
}

.ind-bubble-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ind-bubble-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

.ind-bubble-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* 明細小卡：hover（桌機）／點擊、觸控（手機）叫出，位置由 JS 依泡泡座標
   計算後寫 left/top（相對 .ind-bubble-stage）。pointer-events:none 讓游標
   不會被卡片擋住導致 hover 抖動；釘選狀態的關閉靠點空白（見 JS）。 */
.ind-bubble-card {
  position: absolute;
  z-index: 2;
  min-width: 148px;
  max-width: 210px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}

.ind-bubble-card[hidden] {
  display: none;
}

.ind-bubble-card-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}

.ind-bubble-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ind-bubble-card-k {
  color: var(--text-muted);
}

.ind-bubble-card-v {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ind-bubble-up {
  color: var(--up);
}

.ind-bubble-down {
  color: var(--down);
}

.ind-bubble-card-warn {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  color: var(--danger);
  font-weight: 700;
}

.ind-bubble-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.ind-bubble-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.ind-bubble-play:hover:not(:disabled) {
  background: var(--card-bg-hover);
}

.ind-bubble-play:disabled {
  opacity: 0.45;
  cursor: default;
}

.ind-bubble-seek {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.ind-bubble-seek:disabled {
  opacity: 0.45;
  cursor: default;
}

.ind-bubble-daylabel {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ind-bubble-legend {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* 色帶：跟 industry_bubble.js heatRGB() 同一條藍→紫→橘三段，改版要兩邊一起改。 */
.ind-bubble-ramp {
  display: inline-block;
  width: 54px;
  height: 9px;
  vertical-align: -1px;
  margin: 0 4px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgb(60, 130, 235), rgb(150, 78, 165), rgb(255, 170, 60));
}

.ind-bubble-ring {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: -1px;
  margin: 0 3px;
  border: 2px solid var(--danger);
  border-radius: 50%;
}

.ind-bubble-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-faint);
}

@media (max-width: 768px) {
  .ind-bubble {
    padding: 12px 10px 8px;
  }

  /* 手機直式：橫幅 16:9 在窄螢幕只剩兩百多像素高，泡泡會擠成一條。
     改 3:4 直式，縱軸（法人買賣超）才有足夠行程看出上下輪動。 */
  .ind-bubble-stage {
    aspect-ratio: 3 / 4;
    max-height: 68vh;
  }

  /* 手機：日期標籤（例「2026-08-14（第 10 / 10 天）」）nowrap 之後會吃掉
     一半行寬，拖桿被壓到剩兩百多 px、幾乎沒法 scrub。改讓標籤自己占一行
     （order:-1 排在播放鍵之上），拖桿拿回整行。 */
  .ind-bubble-controls {
    flex-wrap: wrap;
  }

  .ind-bubble-daylabel {
    order: -1;
    flex-basis: 100%;
    text-align: right;
    font-size: 11px;
  }

  .ind-bubble-card {
    min-width: 130px;
    max-width: 168px;
    font-size: 11.5px;
  }
}

/* ===========================================================================
   #237 ⑤ 更新時刻註記（2026-08-18）→ #239 已升格（2026-08-19）
   ===========================================================================
   本檔原有一份與 institutional.css 同名同義的 `.sv-update-note`，附註「兩份
   規則若日後出現第三個使用者，一次升格進 app.css 並清掉這兩份」。#239 把
   註記鋪到 /etf、/futures、/market、/dividend、/big-holders、/conference，
   條件成立：宣告已移進 app.css 的「設計系統共用元件層」（`.sv-data-date`
   之後），本檔與 institutional.css 的兩份本地宣告同時刪除。

   本頁模板照用 `class="sv-update-note"`，樣式來源改成 app.css，此處不再
   宣告——留著會變成「改 app.css 以為全站生效、這一頁卻被本地覆寫」的靜默
   假動作。 */