/* 主動 ETF 專頁樣式。共用 app.css 的變數 / nav / footer / notice-banner /
   skeleton / toast 等既有類別，這裡只補 ETF 頁面特有的元件（共識雙欄卡片、
   總覽表、詳情持股權重條、進出明細徽章）。 */

/* ==========================================================================
   盤後重點解讀（規則式、零 AI 成本，任務 #58 M3）
   卡殼本身用 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、industry.css 原本各存一份逐字相同的副本，
   改一次要改四遍。要調這組卡請改 app.css 那一段，不要在這裡長回第二份。
   ========================================================================== */

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

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

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

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

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

.detail-etf-title {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.etf-filter-bar {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

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

.etf-filter-bar select {
  min-width: 0;
  flex-shrink: 1;
}

/* ---------- 今日焦點卡（淨流入/淨流出金額最大各一檔，置頂） ----------
   兩欄 grid，跟 consensus-grid/daily-report-grid 同一套 auto-fit 流體寫法：
   容器夠寬（單卡最小寬 300px）時左右並排，不夠寬（窄螢幕）自動疊直，不需
   手動斷點。 */

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}

/* ==========================================================================
   #193 質感波（2026-08-17）：本頁的卡面／表格／膠囊全部改吃 app.css 檔尾的
   「質感層代幣」（`--sv-card-*`／`--sv-thead-*`／`--sv-row-*`／`--sv-pill-*`／
   `--sv-scroll-shade`／`--sv-net-tint`），與 /market 統計卡、/institutional
   排行表、/industry 熱度表用的是同一組值 —— 四頁因此讀起來是同一套系統做出
   來的，日後要整體調整只動 app.css 那一段。
   泡泡區（industry／inst_tug／big_holders 模組）不在本波範圍，未動。
   ========================================================================== */

.focus-card {
  background: var(--sv-card-sheen), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  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);
}

/* 語意左緣色條：與 /market 統計卡（market.css `.stat-card.breadth-*::before`）
   同一個手法，紅＝淨流入、綠＝淨流出，一眼分邊不必先讀標題。
   用 :has() 對位是因為色調資訊掛在子節點 `.focus-card-head.inflow/.outflow`
   上，而 etf.js（產生這段 DOM 的地方）不在本波改動範圍——:has() 不支援的
   舊瀏覽器只是少一條色條，卡片其餘部分照常。 */
.focus-card {
  position: relative;
  overflow: hidden;
}

.focus-card:has(.focus-card-head.inflow)::before,
.focus-card:has(.focus-card-head.outflow)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
}

.focus-card:has(.focus-card-head.inflow)::before {
  background: linear-gradient(180deg, rgba(var(--up-rgb), 0.95), rgba(var(--up-rgb), 0.28));
}

.focus-card:has(.focus-card-head.outflow)::before {
  background: linear-gradient(180deg, rgba(var(--down-rgb), 0.95), rgba(var(--down-rgb), 0.28));
}

/* 今日焦點卡：hover 微上浮（位移量走 --sv-lift，prefers-reduced-motion
   全站歸零）。 */
.focus-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);
}

/* 焦點卡主數字：等寬數字＋負字距，與 /market 統計卡的 .stat-value 同字階。 */
.focus-card-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.focus-card-head {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.focus-card-head.inflow { color: var(--up); }
.focus-card-head.outflow { color: var(--down); }

.focus-card-stock {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

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

.focus-card-id {
  font-size: 12px;
  color: var(--text-muted);
}

.focus-card-industry {
  font-size: 11.5px;
  color: var(--text-faint);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--surface-tint-rgb), 0.05);
}

.focus-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.focus-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.focus-card-change {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.focus-card-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* .up/.down（app.css 共用工具類）跟這裡的 base 規則特異度相同（都是單一
   class selector），而 etf.css 在 <link> 順序上排在 app.css 之後，同特異度
   時後面的規則勝出——若不額外用複合選擇器覆寫，.up/.down 會被上面這條
   base 規則蓋掉，紅漲/綠跌永遠顯示不出來。這裡用 .focus-card-amount.up /
   .focus-card-amount.down（特異度較高）強制覆寫，確保金額真的變色。 */
.focus-card-amount.up { color: var(--up); }
.focus-card-amount.down { color: var(--down); }
.focus-card-change.up { color: var(--up); }
.focus-card-change.down { color: var(--down); }

.focus-ratio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--surface-tint-rgb), 0.05);
  border: 1px solid var(--border);
}

/* 共識動向榜每列的多空比徽章：沿用 .focus-ratio-badge 樣式，這裡只補位置。 */
.consensus-ratio-badge {
  margin: 8px 0 0 0;
}

/* ---------- 共識動向榜：買方/賣方雙欄 ---------- */

.consensus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px;
}

.consensus-col {
  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);
}

.consensus-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 12px;
}

.consensus-col-head.buy { color: var(--buy-fg); }
.consensus-col-head.sell { color: var(--down); }

.consensus-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(var(--surface-tint-rgb), 0.02);
}

.consensus-item:last-child {
  margin-bottom: 0;
}

.consensus-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.consensus-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.consensus-item-id {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
}

.consensus-item-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-cyan-text);
  white-space: nowrap;
}

.consensus-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- 共識強度★分級 + 狀態標籤 + 一鍵自選（規則式，零 AI） ----------
   標籤顏色刻意不用紅/綠（2026-07-10 財經法律審查結論：紅/綠在台股語境仍會
   傳遞多空暗示，即使文字本身已改中性），改用與多空無關的分類色：
   高共識=品牌藍、新納入=品牌紫、資金流出=灰藍(slate)、中性=灰。 */

.etf-bulk-add-btn {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-cyan);
  background: transparent;
  color: var(--brand-cyan-text);
  cursor: pointer;
  transition: all 120ms var(--ease);
  white-space: nowrap;
}

.etf-bulk-add-btn:hover {
  background: var(--accent-bg);
}

.etf-bulk-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.etf-tag-disclaimer {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
  margin: -8px 0 12px 2px;
}

.etf-strength-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
}

.etf-stars {
  font-size: 13px;
  letter-spacing: 1px;
  /* theme-exempt: 缺 token --star-gold（★分級金色，與品牌／漲跌語意無關） */
  color: #f5c518;
  white-space: nowrap;
}

.etf-stars .star-off {
  color: var(--border);
}

.etf-tag-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.etf-tag-strong {
  background-color: rgba(var(--brand-blue-rgb), 0.14);
  color: var(--brand-blue);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.35);
}

.etf-tag-new {
  background-color: rgba(var(--brand-violet-rgb), 0.14);
  color: var(--brand-violet);
  border: 1px solid rgba(var(--brand-violet-rgb), 0.35);
}

/* theme-exempt（本規則三行）: 缺 token --slate-rgb / --slate-fg
   （100,116,139 與 #94a3b8 是本檔獨有的資金流出灰藍，比 --tag-slate
   #a9bcdd 深一階，全站無對應代幣）。 */
.etf-tag-outflow {
  background-color: rgba(100, 116, 139, 0.16);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.4);
}

.etf-tag-neutral {
  background-color: rgba(var(--text-muted-rgb), 0.12);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.etf-strength-toggle-hint {
  font-size: 10.5px;
  color: var(--text-faint);
}

.etf-strength-parts {
  display: none;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  gap: 4px 14px;
  flex-wrap: wrap;
}

.etf-strength-parts.expanded {
  display: flex;
}

.etf-strength-parts span {
  white-space: nowrap;
}

/* ---------- 共識動向榜每列：＋自選按鈕 ---------- */

.consensus-item-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.etf-watch-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.etf-watch-btn:hover {
  color: var(--brand-cyan-text);
  border-color: var(--brand-cyan);
}

.etf-watch-btn.added {
  color: var(--down);
  border-color: var(--down);
  cursor: default;
}

.etf-watch-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- 策略追蹤紀錄（誠實累積閘） ---------- */

.track-record-card {
  background: var(--sv-card-sheen), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  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);
}

.track-record-progress-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.track-record-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--surface-tint-rgb), 0.06);
  overflow: hidden;
  margin-bottom: 12px;
}

.track-record-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-violet));
  transition: width 400ms var(--ease);
}

.track-record-methodology,
.track-record-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}

.track-record-disclaimer {
  color: var(--text-faint);
}

.track-record-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.track-record-stat {
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
}

.track-record-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.track-record-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

/* ---------- ETF 總覽表 ---------- */

.etf-overview-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);
  /* 手機橫捲左右緣漸層暗示（同 app.css `.sv-table-wrap`，零 JS）。 */
  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.etf-overview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.etf-overview-table th,
table.etf-overview-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--sv-row-line);
  white-space: nowrap;
}

table.etf-overview-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);
}

/* 唯一的數字欄「當日異動數」＝第 5 欄（欄序見 etf.js renderOverview()：
   代號／名稱／投信／最新資料日／當日異動數），右對齊＋等寬數字。
   **只點第 5 欄**：3、4 欄是投信名稱與日期，一起右對齊會把文字甩到右邊、
   讀起來像跑版（2026-08-17 首版用 nth-child(n+3) 就是這樣，實測後收斂）。
   展開明細列是單一 colspan 的 td，選不到第 5 欄，不受影響。 */
table.etf-overview-table th:nth-child(5),
table.etf-overview-table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 日期欄用等寬數字，日期才不會逐列寬度跳動。 */
table.etf-overview-table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text-muted);
}

/* 斑馬：極淡。下方 tr.selected 的選中底色選擇器更長，壓得過這條。 */
table.etf-overview-table tbody tr:nth-child(even) {
  background-color: var(--sv-row-zebra);
}

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

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

table.etf-overview-table tbody tr.selected {
  background-color: var(--accent-bg);
}

table.etf-overview-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- ETF 詳情：持股表 + 權重條 ---------- */

.etf-detail-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.etf-detail-date-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.etf-detail-date-select select {
  font-size: 12.5px;
}

/* flex 取代固定斷點 grid：兩張卡各自最小寬 420px，容器夠寬時並排（左卡略寬），
   不夠寬時各自 100% 換行堆疊，任何中間寬度都連續適應、無需整數斷點。 */
.etf-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.etf-detail-grid .etf-holdings-card {
  flex: 1 1 420px;
  min-width: 0;
}

.etf-detail-grid .etf-flows-card {
  flex: 1 1 380px;
  min-width: 0;
}

.etf-holdings-card,
.etf-flows-card {
  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);
}

.etf-holdings-card h3,
.etf-flows-card h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.holding-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

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

.holding-rank {
  width: 18px;
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 11.5px;
  text-align: right;
}

.holding-name-col {
  flex: 1 1 90px;
  min-width: 0;
}

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

.holding-id {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* FT-27 第二棒「全站個股顯示三要素」新增：持股列/認養榜列的收盤價
   （±點，±%）——跟在股名/代號後面，獨立成一小段換行也不擠版（.holding
   -name-col 本身 flex:1 1 90px，允許換行）。刻意不在這裡設 color——
   顏色交給同時掛上的 .up/.down/.flat（app.css 全域共用工具類，見
   web/static/etf.js changeClass()）決定；若在此設 color，會跟 .up/.down
   同特異度（皆單一 class 選擇器）打架，因 etf.css 晚於 app.css 載入而
   蓋掉紅漲綠跌（本檔上方 .focus-card-amount.up/.down 已有同款血訓註記，
   這裡直接繞開陷阱，不重蹈覆轍）。 */
.holding-price {
  display: block;
  font-size: 11px;
  margin-top: 1px;
}

.holding-bar-col {
  flex: 1;
  min-width: 60px;
}

.holding-bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--surface-tint-rgb), 0.06);
  overflow: hidden;
}

.holding-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-violet));
  transition: width 400ms var(--ease);
}

.holding-lots {
  flex: 0 0 auto;
  width: 76px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.holding-weight {
  flex: 0 0 auto;
  width: 54px;
  text-align: right;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 進出明細：日期分組 + action 徽章 ---------- */

.flow-date-group {
  margin-bottom: 14px;
}

.flow-date-group:last-child {
  margin-bottom: 0;
}

.flow-date-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.flow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

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

.flow-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.flow-stock-id {
  color: var(--text-muted);
  font-size: 12px;
}

.flow-change-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.flow-lots {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.flow-change {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 資金流向金額（flow_amount，以收盤價估算）：獨立一行，字級略大於權重變化，
   顏色沿用 app.css 既有 .up(紅/流入)、.down(綠/流出) 共用工具類。 */
.flow-amount {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- ETF 明細：異動排序切換（依權重 / 依金額） ---------- */

.etf-flows-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.flow-sort-toggle {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* 排序膠囊（#193）：與 /market `.chart-mode-btn`、/institutional `.inst-tab`
   同一套 pill 語彙，只是尺寸收一級塞進卡頭。 */
.flow-sort-btn {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--sv-pill-bg), var(--card-bg);
  box-shadow: var(--sv-pill-inset);
  color: var(--text-muted);
  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);
}

.flow-sort-btn:hover {
  color: var(--text);
  background: var(--sv-pill-hover-bg), var(--card-bg);
  border-color: var(--sv-card-border-hover);
}

.flow-sort-btn:active {
  transform: translateY(1px);
}

.flow-sort-btn.active {
  background: var(--sv-pill-active-bg), var(--card-bg);
  color: var(--brand-cyan-text);
  border-color: rgba(var(--brand-cyan-rgb), 0.62);
  box-shadow: var(--sv-pill-active-ring);
}

.action-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.action-badge.action-new { background-color: var(--down-bg); color: var(--down); }
.action-badge.action-add { background-color: rgba(var(--brand-cyan-rgb), 0.14); color: var(--brand-cyan-text); }
.action-badge.action-trim { background-color: var(--watch-bg); color: var(--watch-fg); }
.action-badge.action-exit { background-color: var(--skip-bg); color: var(--skip-fg); }

/* ---------- ETF 總覽表：點列 inline 展開明細 ---------- */

.etf-overview-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: -6px 0 10px 2px;
}

.etf-detail-row {
  cursor: default;
}

.etf-detail-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
  white-space: normal;
}

.etf-detail-row:hover {
  background-color: transparent !important;
}

.etf-detail-panel {
  padding: 16px 14px;
  background-color: rgba(var(--surface-tint-rgb), 0.015);
}

.flow-stock-name {
  font-weight: 500;
  color: var(--text);
}

/* 異常異動（新進/剔除，或權重變化達門檻）：粗體＋亮色，前綴 ★ 由 JS 加在
   stock-name 文字裡，這裡只負責顏色與粗細，維持與一般列同樣的排版結構。 */
.flow-row-abnormal .flow-stock-name {
  font-weight: 800;
  color: var(--danger);
}

.flow-row-abnormal .flow-change,
.flow-row-abnormal .flow-lots {
  font-weight: 800;
  color: var(--danger);
}

/* ---------- 今日經理人操作日報 ---------- */

.daily-report-summary {
  font-size: 13px;
  color: var(--text-muted);
  margin: -6px 0 12px 2px;
}

.daily-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 16px;
}

.daily-report-group {
  background: var(--sv-card-sheen), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  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);
}

.daily-report-group-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}

.daily-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.daily-report-row:last-child {
  border-bottom: none;
}

.daily-report-row-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.daily-report-stock-name {
  font-weight: 700;
  color: var(--text);
}

.daily-report-etf {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 任務#157 M3：ETF 代號緊接在名稱後面，比照 .holding-id 既有樣式語言
   （較淡的小字代號），讓對代號較敏感的使用者一眼對得上。 */
.daily-report-etf-id {
  margin-left: 4px;
  color: var(--text-muted);
}

.daily-report-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

/* ---------- 你的持股動向（個人化對照） ---------- */

.my-holdings-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.my-holdings-item:last-child {
  margin-bottom: 0;
}

.my-holdings-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.my-holdings-message {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------- 認養追蹤榜 ---------- */

.adoption-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.adoption-item:last-child {
  border-bottom: none;
}

.adoption-item-label {
  flex: 1 1 auto;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
}

/* 任務#157 M3：認養榜 label 句尾補上 ETF 代號徽章。 */
.adoption-item-etf-id {
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-faint);
}

/* ---------- AI 資金流點評（M1，進階會員專屬） ----------
   常駐嵌在頁面內的卡片（非彈窗），共用 app.css 既有 .aireview-* /
   .ai-conclusion-card / .ai-bullet-list / .hl-* 樣式（見該檔「個股 AI 深度
   體檢彈窗」與「AI 點評結論置頂＋條列＋語意分色共用樣式」兩個區塊），這裡
   只新增本頁專屬的分級卡片與產業輪動 chip 樣式。 */

.etf-ai-review-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.etf-ai-review-intro p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1 1 320px;
}

/* AI 生成事前預期備註（指揮官加案，2026-07-12）：插在「生成 AI 資金流
   點評」鈕旁，讀 ai_progress_modal.js ETA_RANGES 動態產生文字，見 etf.js
   buildAiEtaNoteEl()。獨立一行、比介紹文字更淡更小，不搶按鈕視覺主體。 */
.etf-ai-review-intro .ai-eta-note {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--text-faint);
  margin: 0;
}

.etf-ai-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.etf-ai-industry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.etf-ai-industry-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.etf-ai-industry-chip-in {
  background-color: rgba(var(--up-rgb), 0.12);
  color: var(--up);
  border: 1px solid rgba(var(--up-rgb), 0.3);
}

.etf-ai-industry-chip-out {
  background-color: rgba(var(--down-rgb), 0.12);
  color: var(--down);
  border: 1px solid rgba(var(--down-rgb), 0.3);
}

.etf-ai-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.etf-ai-tier {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.etf-ai-tier-bull {
  border-color: rgba(var(--up-rgb), 0.35);
}

.etf-ai-tier-bear {
  border-color: rgba(var(--down-rgb), 0.35);
}

.etf-ai-tier-level {
  border-color: rgba(var(--brand-cyan-rgb), 0.35);
}

.etf-ai-tier-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}

.etf-ai-tier-emoji {
  font-size: 13px;
  line-height: 1;
}

.etf-ai-tier-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.etf-ai-tier-item {
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.etf-ai-tier-item:first-child {
  padding-top: 0;
  border-top: none;
}

.etf-ai-tier-item-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.etf-ai-tier-item-id {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-cyan-text);
  text-decoration: none;
}

.etf-ai-tier-item-id:hover {
  text-decoration: underline;
}

.etf-ai-tier-item-name {
  font-size: 12px;
  color: var(--text-muted);
}

.etf-ai-tier-item-reason {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
}

.etf-ai-tier-item-empty {
  font-size: 12px;
  color: var(--text-faint);
  border-top: none;
  padding-top: 0;
}

/* ---------- RESPONSIVE ----------
   etf-section-head 本身已是 flex-wrap，窄寬時 h2 與 filter-bar 自然換行靠左，
   不需額外斷點；holding-name-col 已改流體 flex-basis，同樣不需斷點覆寫。
   .etf-ai-tier-grid 是唯一的例外：固定 3 欄在窄螢幕會過度擠壓，改單欄
   （斷點沿用 app.css 既有 767px 慣例）。 */

@media (max-width: 767px) {
  .etf-ai-tier-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   單日買超／賣超前十名（規則式排行，2026-07-20 新增）：兩欄卡片各一張表，
   auto-fit 窄螢幕自動收單欄；紅漲綠跌沿用 --up/--down，用 .tbs-num.up/.down
   複合選擇器提高特異度覆寫 base 色（理由同上方 focus-card 註解）。
   --------------------------------------------------------------------------- */
/* minmax 的 min 值要包 min(...,100%)：裸 320px 在 320 寬手機會讓格線軌道比容器
   還寬，整張 .tbs-card 溢出版面（320 寬實測 documentElement.scrollWidth 332，
   全頁跟著能左右晃）。同 .daily-report-grid 既有寫法。（2026-08-23 卡片式第三棒） */
.tbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 14px;
}
.tbs-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
}
.tbs-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-cyan-text);
  margin-bottom: 8px;
}
.tbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.tbs-table thead th {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 7px 8px;
  background: var(--sv-thead-bg);
  border-bottom: 1px solid var(--sv-thead-rule);
}
.tbs-table th.tbs-num,
.tbs-table td.tbs-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tbs-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--sv-row-line);
}

.tbs-table tbody tr {
  transition: background 120ms var(--ease);
}

.tbs-table tbody tr:nth-child(even) {
  background-color: var(--sv-row-zebra);
}

.tbs-table tbody tr:hover,
.tbs-table tbody tr:active {
  background-color: var(--sv-row-hover);
}
.tbs-table tbody tr:last-child td {
  border-bottom: none;
}
.tbs-code {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.tbs-name a {
  color: var(--fg);
  text-decoration: none;
}
.tbs-name a:hover {
  color: var(--brand-cyan-text);
  text-decoration: underline;
}
.tbs-num.up {
  color: var(--up);
  font-weight: 700;
}
.tbs-num.down {
  color: var(--down);
  font-weight: 700;
}
.tbs-etf-code {
  color: var(--brand-cyan-text);
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.tbs-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 18px 8px;
}
.tbs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}
.tbs-summary b {
  font-variant-numeric: tabular-nums;
}
.tbs-summary b.up {
  color: var(--up);
}
.tbs-summary b.down {
  color: var(--down);
}

/* ==========================================================================
   揭露完整性誠實橫幅（FT-33 主動 ETF 持股揭露完整性治理，2026-07-23）
   由 web/static/etf.js renderDisclosureBanner() 依 disclosure_status
   （api/etf.py daily-report／top-buysell 端點回傳）動態顯示/隱藏——揭露
   未齊時提醒使用者現在看到的是「已揭露部分」，齊了自動消失，不留殘影。
   顏色沿用 app.css 既有 --warn-* 變數（與 .notice-banner 同色系但語意不同：
   notice-banner 是固定的資料源說明，這個橫幅是即時進度，比照既有頁面對
   「暫時性、會自動改善」訊息的視覺慣例，加粗字重＋沙漏圖示做出差異）。
   ========================================================================== */
.disclosure-status-banner {
  background-color: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-fg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* 買賣超十大區的說明文字重排（站長 2026-08-21 20:36「中間的字排版優化」）：
   兩段文字牆改成「一行帶鐘點圖示的更新註記＋左緣線小字免責卡」。頁域覆寫
   （app.css 的 .sv-update-note 全站樣式不動），法遵文字一字未改只改容器。 */
#section-top-buysell .sv-update-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 6px 0 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
}
#section-top-buysell .sv-update-note::before {
  content: "🕐";
  font-size: 13px;
  line-height: 1.5;
  flex: 0 0 auto;
}
#section-top-buysell .etf-tag-disclaimer {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--card-bg) 55%, transparent);
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-faint);
  max-width: 72ch;
}
@media (max-width: 640px) {
  #section-top-buysell .etf-tag-disclaimer { font-size: 11.5px; padding: 7px 10px; }
}

/* ==========================================================================
   ETF 總覽：手機卡片版面（2026-08-23「表格改卡片式精緻設計」第三棒）
   --------------------------------------------------------------------------
   問題：`.etf-overview-table` 五欄（代號/名稱/投信/最新資料日/當日異動數）
   在 390 寬實測表寬 494px，右側兩欄被切掉、只能橫捲才看得到。
   改法：etf.js 用同一份 data 另渲染一份 `.etf-ov-cards` 卡片列表，兩份版面
   同時在 DOM 裡，由下面 767/768 兩側的 media query 決定誰顯示——寬度驅動、
   不看機型（站長 08-21「一種方式用到全部手機」）。展開明細兩版面共用
   etf.js loadEtfDetailInto()，卡片只是多提供一個 `.etf-detail-panel` 容器。
   視覺語言抄 app.css `.pf-card`（圓角/珍珠高光/雙色徑向底/陰影），顏色全走
   CSS 變數，五主題自動跟色。
   ========================================================================== */

.etf-ov-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 電腦：維持原本的表格與點列展開行為，卡片列表整批收起。 */
@media (min-width: 768px) {
  .etf-ov-cards {
    display: none;
  }
}

/* 手機：表格收起，改吃卡片列表。斷點與 etf.js OVERVIEW_CARD_MQ 同一條線，
   兩處必須同步改。 */
@media (max-width: 767px) {
  .etf-overview-table-wrap {
    display: none;
  }
}

.etf-ov-card {
  position: relative;
  overflow: hidden;
  --etf-ov-gloss-rgb: var(--surface-tint-rgb);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: radial-gradient(120% 90% at 8% -12%, rgba(var(--brand-blue-rgb), 0.06), transparent 58%),
    radial-gradient(110% 90% at 104% -8%, rgba(var(--brand-violet-rgb), 0.05), transparent 60%),
    linear-gradient(180deg, rgba(var(--etf-ov-gloss-rgb), 0.08), transparent 52%), var(--card-bg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(var(--etf-ov-gloss-rgb), 0.12);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

/* 珍珠高光在淺色四主題必須覆寫回白（--surface-tint-rgb 是壓暗用的深藍，
   拿來當高光會變髒污）——同 app.css .pf-card 的既有結論。 */
:root[data-theme="light-a"] .etf-ov-card,
:root[data-theme="light-b"] .etf-ov-card,
:root[data-theme="light-c"] .etf-ov-card,
:root[data-theme="champagne"] .etf-ov-card {
  --etf-ov-gloss-rgb: 255, 255, 255;
}

@media (hover: hover) {
  .etf-ov-card:hover {
    border-color: rgba(var(--brand-blue-rgb), 0.35);
  }
}

.etf-ov-card.is-open {
  border-color: rgba(var(--brand-blue-rgb), 0.45);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(var(--etf-ov-gloss-rgb), 0.12),
    0 10px 26px rgba(var(--shadow-rgb), 0.14);
}

/* 可點區只有卡頭：明細面板是卡片的子節點，整張卡可點會讓面板裡的下拉/按鈕
   冒泡上來把卡收合（見 etf.js 綁定處註解）。 */
.etf-ov-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.etf-ov-card-main:focus-visible {
  outline: 2px solid rgba(var(--brand-blue-rgb), 0.55);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.etf-ov-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.etf-ov-card-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
}

.etf-ov-card-id {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--brand-cyan-text);
}

/* 名稱寧可折行也不截字（320 寬長名如「主動第一金台股優」必須讀得完整）。 */
.etf-ov-card-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.etf-ov-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 7px;
}

.etf-ov-card-issuer {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(var(--surface-tint-rgb), 0.05);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: nowrap;
}

.etf-ov-card-date {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text-faint);
  white-space: nowrap;
}

.etf-ov-card-side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding-left: 2px;
}

.etf-ov-card-flows-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 當日進出是「有進出的成分股檔數」（非負計數，不是淨額），刻意不套 .up/.down
   紅綠——站內紅綠一律代表漲跌/流入流出方向，染計數會給假訊號（表格版同欄
   也從未上色）。0 或 null 由 etf.js 直接輸出「—」走 .is-none。 */
.etf-ov-card-flows {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--brand-cyan-text);
  white-space: nowrap;
}

.etf-ov-card-flows-unit {
  margin-left: 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.etf-ov-card-flows.is-none {
  font-size: 15px;
  color: var(--text-faint);
}

.etf-ov-card-caret {
  flex: none;
  display: inline-block;
  width: 12px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  color: var(--text-faint);
  transition: transform 200ms var(--ease), color 160ms var(--ease);
}

.etf-ov-card.is-open .etf-ov-card-caret {
  transform: rotate(180deg);
  color: var(--brand-cyan-text);
}

@media (prefers-reduced-motion: reduce) {
  .etf-ov-card-caret {
    transition: none;
  }
}

.etf-ov-card-detail {
  border-top: 1px solid var(--border);
}

.etf-ov-card-detail .etf-detail-panel {
  padding: 12px 12px 14px;
}

/* ==========================================================================
   買賣超十大表（`.tbs-table`）窄寬修正（同棒順手）
   --------------------------------------------------------------------------
   390 寬實測「收盤（漲跌）」欄右緣被切、且 .tbs-card 雖有 overflow-x:auto
   卻沒有任何「還有內容」的視覺提示。這裡只動 CSS：縮字級/內距、放行第 4 欄
   （收盤（漲跌））換行減少所需寬度，並補上與 app.css `.sv-table-wrap`
   同一套的左右緣漸隱橫捲提示（零 JS）。結構與欄位不動。
   ========================================================================== */

/* 左右緣漸隱橫捲提示（同 app.css `.sv-table-wrap`／`.etf-overview-table-wrap`，
   零 JS）：local 圖層跟著內容捲，捲到底時自己蓋掉該側的陰影，所以「捲得動才
   看得到」是自動的——不必限定斷點（768 兩欄版每張卡也只有 ~370px，同樣會捲）。 */
.tbs-card {
  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;
}

@media (max-width: 767px) {
  .tbs-card {
    padding: 12px 10px;
  }

  .tbs-table {
    font-size: 12px;
  }

  /* 內距壓到 4px：390/412 寬剛好讓五欄全進畫面（實測原本只差幾 px），
     320/360 仍會橫捲，交給上面那組漸隱提示。 */
  .tbs-table thead th {
    padding: 6px 4px;
  }

  .tbs-table tbody td {
    padding: 6px 4px;
  }

  /* 第 4 欄＝收盤（漲跌），值形如「5,600（-30.0，-0.53%）」，放行換行讓它
     吃兩行、把表寬讓出來（其餘欄仍 nowrap，代號/金額不會被拆）。 */
  .tbs-table th:nth-child(4),
  .tbs-table td:nth-child(4) {
    white-space: normal;
  }
}