/* 選股漏斗頁樣式（三層選股漏斗 M1，任務新增）。共用 app.css 的變數 / nav /
   footer / notice-banner / toast 等既有類別，這裡只補本頁特有的三張卡片
   （大盤環境溫度計／強勢產業排行／個股訊號清單）。比照 industry.css 的
   .ind-* 命名風格，這裡改用 .fn-* 前綴（funnel）。台股慣例紅多綠空：
   `.up`（紅，--up）/ `.down`（綠，--down）/ `.flat`（中性）三個共用類別
   直接沿用 app.css 既有定義，本檔不重複宣告顏色數值。 */

/* 區塊卡/標題/空狀態改用 app.css 設計系統共用元件層 .sv-section /
   .sv-section-head / .sv-section-title / .sv-empty（#30 樣板遷移，
   2026-07-10）——本頁為 .sv-* 樣板示範頁，本檔只剩漏斗特有元件。 */

/* ========== 一頁式 Dashboard 骨架（FT-52 M3-11，2026-08-07）==========
   站長 2026-08-07 拍板：/funnel 整頁重構成「頂部 sticky 步驟導覽 ＋ 三段
   Dashboard ＋ 層間漏斗連接線」。架構學 Gemini 指南 §2，**指南那組奶茶色
   HEX 一個都沒有落地**——本區塊所有顏色都是 var(--主題代幣) 或其
   color-mix() 衍生，四主題（dark/light-a/b/c）自動適配。 */

/* ---------- 頂部 sticky 步驟導覽（毛玻璃膠囊條）---------- */

/* --fn-stepnav-top / --fn-sec-scroll-margin 由 funnel.js initStepNav() 量測
   全站 nav 實際高度後寫進 :root（nav 會隨斷點換行，高度不是常數）；JS 還沒
   跑到之前用保守預設值，不會出現「導覽被 nav 蓋住」的中間態。 */
.fn-stepnav {
  position: sticky;
  top: var(--fn-stepnav-top, 64px);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px;
  padding: 7px 12px 7px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 999px;
  /* 毛玻璃：半透卡底 ＋ backdrop-filter（底下的內容捲過去時會透出來）。
     不支援 backdrop-filter 的瀏覽器會退化成 82% 不透明卡底，仍然可讀。 */
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 22px rgba(var(--shadow-rgb), 0.18);
}

.fn-stepnav-brand {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.fn-stepnav-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.fn-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease),
    border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.fn-step-btn:hover,
.fn-step-btn:focus-visible {
  color: var(--accent-text);
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  outline: none;
}

.fn-step-btn.active {
  color: var(--on-accent);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 86%, white),
    color-mix(in srgb, var(--accent) 88%, black)
  );
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 34%, transparent);
}

.fn-step-num {
  font-size: 14px;
  line-height: 1;
}

.fn-step-arrow {
  color: color-mix(in srgb, var(--text-muted) 60%, transparent);
  font-size: 12px;
  flex: 0 0 auto;
}

/* 錨點捲動的落點：扣掉全站 nav ＋ 本頁 sticky 導覽的高度，段落標題才不會
   被兩層固定條蓋住（實際數值由 initStepNav() 量測後寫進 :root）。 */
.fn-sec {
  scroll-margin-top: var(--fn-sec-scroll-margin, 116px);
}

/* ---------- 層間漏斗連接線（Funnel Flow Indicator）---------- */

.fn-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: -4px 0 14px;
  user-select: none;
}

.fn-flow-line {
  display: block;
  width: 2px;
  height: 22px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent) 55%, transparent)
  );
}

.fn-flow-caret {
  font-size: 13px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 62%, transparent);
}

/* ---------- ① 大盤環境層 ---------- */

/* 桌機左右分欄：左＝擬真儀表（M3-10 原封沿用），右＝五分量卡矩陣。
   ≤900px 自動疊成單欄（見本檔底部響應式區塊）。 */
.fn-s1-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1.1fr;
  gap: 18px 26px;
  align-items: center;
}

.fn-s1-gauge-col {
  min-width: 0;
  /* 分欄時左右之間一條細分隔線（單欄時由響應式區塊關掉）。 */
  border-right: 1px solid var(--border);
  padding-right: 22px;
}

.fn-s1-factor-col {
  min-width: 0;
}

.fn-s1-factor-cap {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.fn-env-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* 任務#68 M3：全站教學連結佈線——環境層卡頭總覽連結＋各分量列的
   「深入學習 →」連結（由 web/static/learn_links.js makeLearnLink()
   產生，class="sv-learn-link"，本檔補 .fn-comp-learn-link 微調）。 */
.sv-learn-link {
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
}

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

.fn-comp-learn-link {
  margin-left: auto;
}

.fn-comp-note .fn-comp-learn-link {
  display: block;
  margin-left: 0;
  margin-top: 4px;
}

.fn-env-score-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}

.fn-env-score {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.fn-env-score.up { color: var(--up); }
.fn-env-score.down { color: var(--down); }
.fn-env-score.flat { color: var(--text-muted); }

.fn-env-score-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-faint);
}

.fn-env-light-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 燈號膠囊 badge（FT-52 M3-10，2026-08-06 22:32 拍板「首頁卡與智選頁的狀態
   呈現統一」）：原本是實色 tint 底的純文字徽章，改成與首頁環境卡
   `.env-score-light-chip`（app.css）**同一套配方**——低 alpha 漸層底 ＋ 細邊框
   ＋語意色文字＋燈點。兩頁不共用 CSS（漏斗頁不載入 app.css 的那一段語意，
   首頁也不載入本檔），所以各留一份，改一邊要同步另一邊。
   深/淺兩套強度旋鈕分開：深底吃得住光暈，白底要極輕否則髒。 */
.fn-env-light-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 7px;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  --envchip-a1: 26%;
  --envchip-a2: 12%;
  --envchip-border: 40%;
  --envchip-glow: 26%;
  --envchip-gloss: 26%;
}

:root[data-theme="light-a"] .fn-env-light-badge,
:root[data-theme="light-b"] .fn-env-light-badge,
:root[data-theme="light-c"] .fn-env-light-badge,
:root[data-theme="champagne"] .fn-env-light-badge {
  --envchip-a1: 18%;
  --envchip-a2: 8%;
  --envchip-border: 34%;
  --envchip-glow: 12%;
  --envchip-gloss: 60%;
}

/* 三種燈色共用同一支配方，只換語意代幣（up/down/中性）。 */
.fn-env-light-badge.up {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--up) var(--envchip-a1), transparent),
    color-mix(in srgb, var(--up) var(--envchip-a2), transparent)
  );
  border-color: color-mix(in srgb, var(--up) var(--envchip-border), transparent);
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--up) var(--envchip-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--up) var(--envchip-gloss), white);
  color: var(--up);
}

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

.fn-env-light-badge.flat {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--text-muted) var(--envchip-a1), transparent),
    color-mix(in srgb, var(--text-muted) var(--envchip-a2), transparent)
  );
  border-color: color-mix(in srgb, var(--text-muted) var(--envchip-border), transparent);
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--text-muted) var(--envchip-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--text-muted) var(--envchip-gloss), white);
  color: var(--text-muted);
}

/* 膠囊內的燈點（尺寸/光暈比照首頁 .env-score-dot 的既有規則）。 */
.fn-env-light-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fn-env-light-dot.up { background: var(--up); box-shadow: 0 0 10px rgba(var(--up-rgb), 0.55); }
.fn-env-light-dot.down { background: var(--down); box-shadow: 0 0 10px rgba(var(--down-rgb), 0.55); }
.fn-env-light-dot.flat { background: var(--text-muted); box-shadow: 0 0 10px rgba(var(--text-muted-rgb), 0.5); }

.fn-env-light-text { color: inherit; }

.fn-env-position {
  font-size: 13px;
  color: var(--text-muted);
}

.fn-env-position strong {
  color: var(--text);
}

/* ---------- ①-a 環境卡「儀表／數字」雙檢視（FT-52 M1，2026-08-06） ----------
   設計正本 docs/ft52_mockups/env_gauge_sample.html。樣品裡的寫死色票（四份
   per-theme class）在這裡一律換成 app.css 現行主題代幣，四主題自動適配，
   本檔不重複宣告任何色值。 */

.fn-env-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.fn-env-view-hint {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* 切換鈕外觀比照 market.css 既有 .chart-mode-tabs/.chart-mode-btn（漏斗頁
   未載入 market.css，故本檔另立 .fn-env-view-* 名稱，不重複定義全域 class）。 */
.fn-env-view-tabs {
  display: flex;
  gap: 6px;
}

.fn-env-view-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.fn-env-view-btn:hover {
  color: var(--text);
}

.fn-env-view-btn.active {
  color: var(--accent-text);
  border-color: var(--accent);
  background: var(--accent-bg);
}

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

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

/* ---------- 質感層（FT-52 M3 質感波 2026-08-06）----------
   與市場寬度環形（market.css）、法人拔河條（institutional.css）同一套語言：
   漸層 → 外緣高光 → 柔光暈 → 掃入動畫。顏色一律由主題代幣 color-mix() 現算，
   本檔零寫死色；漸層本體的引用寫在 funnel.js 的 SVG 屬性（外部樣式表的
   url(#id) 以樣式表 URL 為基底解析，片段參照會失效）。
   兩個強度旋鈕（深底吃光可強、白底極輕否則髒）集中在這裡。 */
.fn-env-gauge {
  --eg-lit: 55%;    /* 亮端保留多少原色（其餘混白） */
  --eg-shade: 74%;  /* 暗端保留多少原色（其餘混黑） */
  --eg-gloss-mix: 26%;
  --eg-gloss-a: 0.6;
  --eg-glow: 34%;
  --eg-ndl-lit: 34%;    /* 指針受光側保留多少原色（其餘混白） */
  --eg-ndl-shade: 56%;  /* 指針背光側保留多少原色（其餘混黑） */
  --eg-ndl-glow: 40%;   /* 指針落影（比進度弧的 --eg-glow 再重一階＝懸浮感） */
  --eg-hub-ring: 62%;   /* 軸帽外圈細環的金屬感強度 */
  /* 擬真錶盤（M3-10）：錶圈金屬走中性代幣（--text-muted），不吃 accent
     ——指針/旋鈕已經是 accent 金屬，整圈外環再上一次會變單色一坨。 */
  --eg-bez-lit: 30%;    /* 錶圈受光端：--text-muted 保留多少（其餘混白） */
  --eg-bez-mid: 46%;    /* 錶圈主色：--text-muted 疊在 --card-bg 上的比例 */
  --eg-bez-shade: 66%;  /* 錶圈背光端：保留多少（其餘混黑） */
  --eg-bez-gloss: 40%;  /* 錶圈內緣 catch light 的白度 */
  --eg-face-a: 9%;      /* 錶面亮端：--text 疊在 --card-bg 上的比例 */
  --eg-face-b: 3%;      /* 錶面暗端 */
}

:root[data-theme="light-a"] .fn-env-gauge,
:root[data-theme="light-b"] .fn-env-gauge,
:root[data-theme="light-c"] .fn-env-gauge,
:root[data-theme="champagne"] .fn-env-gauge {
  --eg-lit: 70%;
  --eg-shade: 86%;
  --eg-gloss-mix: 36%;
  --eg-gloss-a: 0.36;
  --eg-glow: 15%;
  --eg-ndl-lit: 50%;
  --eg-ndl-shade: 72%;
  --eg-ndl-glow: 20%;
  --eg-hub-ring: 74%;
  /* 白底：錶圈要更淡才不會像一圈黑框；錶面改成「比卡面深一點點」的淺灰，
     不能往亮處走（白上加白＝看不見錶盤）。 */
  --eg-bez-lit: 18%;
  --eg-bez-mid: 30%;
  --eg-bez-shade: 46%;
  --eg-bez-gloss: 72%;
  --eg-face-a: 7%;
  --eg-face-b: 2%;
}

/* 漸層端色（<stop> 繼承上面 .fn-env-gauge 的自訂屬性）。 */
.eg-stop-low-0 { stop-color: color-mix(in srgb, var(--score-low) var(--eg-lit), white); }
.eg-stop-low-1 { stop-color: var(--score-low); }
.eg-stop-low-2 { stop-color: color-mix(in srgb, var(--score-low) var(--eg-shade), black); }
.eg-stop-mid-0 { stop-color: color-mix(in srgb, var(--score-mid) var(--eg-lit), white); }
.eg-stop-mid-1 { stop-color: var(--score-mid); }
.eg-stop-mid-2 { stop-color: color-mix(in srgb, var(--score-mid) var(--eg-shade), black); }
.eg-stop-high-0 { stop-color: color-mix(in srgb, var(--score-high) var(--eg-lit), white); }
.eg-stop-high-1 { stop-color: var(--score-high); }
.eg-stop-high-2 { stop-color: color-mix(in srgb, var(--score-high) var(--eg-shade), black); }
.eg-stop-prog-0 { stop-color: color-mix(in srgb, var(--accent) var(--eg-lit), white); }
.eg-stop-prog-1 { stop-color: var(--accent); }
.eg-stop-prog-2 { stop-color: color-mix(in srgb, var(--accent) var(--eg-shade), black); }
/* 指針金屬稜線：受光側亮、背光側暗，分界是一條沿指針長軸的稜線
   （漸層方向垂直於軸向且跟著指針一起轉，見 funnel.js eg-grad-needle 座標）。 */
.eg-stop-needle-0 { stop-color: color-mix(in srgb, var(--accent) var(--eg-ndl-lit), white); }
.eg-stop-needle-1 { stop-color: var(--accent); }
.eg-stop-needle-2 { stop-color: color-mix(in srgb, var(--accent) var(--eg-ndl-shade), black); }
/* 中心旋鈕＝金屬帽：放射漸層（左上受光）用 accent 現算，與指針同一種金屬
   （與首頁迷你版同步，見 app.css .egm-stop-hub-*）。 */
.eg-stop-hub-0 { stop-color: color-mix(in srgb, var(--accent) 34%, white); }
.eg-stop-hub-1 { stop-color: color-mix(in srgb, var(--accent) 72%, black); }
/* 錶圈金屬三端（左上受光 → 主色 → 右下背光），來源是中性代幣 --text-muted
   疊在 --card-bg 上，四主題各自現算。 */
.eg-stop-bezel-0 { stop-color: color-mix(in srgb, var(--text-muted) var(--eg-bez-lit), white); }
.eg-stop-bezel-1 { stop-color: color-mix(in srgb, var(--text-muted) var(--eg-bez-mid), var(--card-bg)); }
.eg-stop-bezel-2 { stop-color: color-mix(in srgb, var(--text-muted) var(--eg-bez-shade), black); }
/* 錶面：刻度與數字印在上面的錶盤底，只跟卡面差一階，所以刻度標籤沿用
   --text-faint 的既有對比結論不必重算。 */
.eg-stop-face-0 { stop-color: color-mix(in srgb, var(--text) var(--eg-face-a), var(--card-bg)); }
.eg-stop-face-1 { stop-color: color-mix(in srgb, var(--text) var(--eg-face-b), var(--card-bg)); }

/* 錶圈本體：填色由 SVG 屬性供應（外部樣式表的 url(#id) 會失效，見上方
   說明），這裡只加一層極輕落影把錶圈從卡面抬起來。 */
.fn-gauge-bezel {
  filter: drop-shadow(0 2px 4px rgba(var(--shadow-rgb), 0.3));
}

/* 錶圈內緣的 catch light：一條沿著錶圈內側的細亮線＝金屬的高光稜。 */
.fn-gauge-bezel-gloss {
  stroke: color-mix(in srgb, white var(--eg-bez-gloss), transparent);
}

/* 錶面：只有填色，沒有描邊也沒有陰影（陰影會讓錶盤浮起來壓過指針）。 */
.fn-gauge-face { stroke-linejoin: round; }

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

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

/* 掃入：弧長由 funnel.js 寫成 --arc-len（各半徑各算）；9999 是「其餘全是
   空隙」的哨兵長度，不是顏色。prefers-reduced-motion 由 app.css 全站規則
   壓成 0.01ms＝直接定格。 */
@keyframes fn-gauge-arc-sweep {
  from { stroke-dasharray: 0 9999; }
  to { stroke-dasharray: var(--arc-len) 9999; }
}

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

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

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

/* 刻度數字（M3-10 起印在錶面環帶上，不再浮在錶盤中央空白處）：字級 11→12
   ＋半粗，錶面底已經與卡面差一階，讀起來是「刻在錶盤上」。 */
.fn-gauge-tick-label {
  fill: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 指針填色由 SVG 屬性 fill="url(#eg-grad-needle)" 供應（見上方 url(#id)
   說明），這裡只加落影讓它浮在錶面上。 */
.fn-gauge-needle {
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--accent) var(--eg-ndl-glow), transparent));
}

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

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

/* 軸帽外圈細環（金屬鏡框）：只有描邊、不填色。 */
.fn-gauge-hub-ring {
  stroke: color-mix(in srgb, var(--accent) var(--eg-hub-ring), transparent);
  stroke-width: 1.4;
}

/* 旋鈕本體：外圈細環已負責金屬鏡框，這裡的描邊收細成內緣線（原本 3px 粗邊
   在小尺寸下會糊成一顆白點）。 */
.fn-gauge-hub {
  stroke: color-mix(in srgb, var(--accent) 80%, transparent);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 3px rgba(var(--shadow-rgb), 0.35));
}

.fn-gauge-value {
  font-size: 44px;
  font-weight: 800;
  fill: var(--text);
  letter-spacing: -0.01em;
  /* 極輕落影：把數字從錶面抬起來一點，量級是精緻不是浮誇。 */
  text-shadow: 0 1px 3px color-mix(in srgb, var(--text) 20%, transparent);
}

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

/* 值域說明＋「較昨日」chip 的獨立一行（站長 2026-08-06 11:29 排版指示：
   原 caption 畫在 SVG 內貼底邊、chip 負 margin 疊上去，手機上與 -9/+9
   刻度擠成一團——移出 SVG 後這一行自己佔版面，不與錶面爭空間）。 */
.fn-env-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
}

.fn-env-gauge-range {
  font-size: 12px;
  color: var(--text-muted);
}

.fn-env-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}

.fn-env-delta-chip.up { color: var(--up); background: var(--up-bg); }
.fn-env-delta-chip.down { color: var(--down); background: var(--down-bg); }
.fn-env-delta-chip.flat { color: var(--text-muted); background: rgba(var(--text-muted-rgb), 0.12); }

.fn-env-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}

/* 儀表模式的燈號徽章比卡頭版本小一號（卡頭是主角，這裡是輔助資訊）。 */
.fn-env-status-row .fn-env-light-badge {
  padding: 4px 14px;
  font-size: 13px;
}

.fn-env-status-row .fn-comp-learn-link {
  margin-left: 0;
}

/* 五分量卡矩陣（M3-11）：原本是儀表下方的 5 欄迷你磚，改成右欄的 3+2 卡片
   矩陣（6 欄格線每卡跨 2 欄 → 每列 3 張，第 4 張從第 2 欄起跑 → 第二列兩張
   置中）。這組格線原本只在 ≤640px 生效，M3-11 起變成所有寬度的預設。
   卡內順序＝分量名（小）→ 貢獻分（大）→ 強度色條，對映指南的 factor-item
   版式；分量本身、色條分母（ENV_SUB_MAX_ABS）與語意色一律沿用，零變動。 */
.fn-env-subs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 0;
}

.fn-env-sub {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 8px 12px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--accent) 8%, var(--card-bg)),
    var(--card-bg)
  );
  transition: transform 140ms var(--ease), border-color 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.fn-env-sub:nth-child(4) {
  grid-column: 2 / span 2;
}

.fn-env-sub-link {
  text-decoration: none;
  color: inherit;
}

.fn-env-sub-link:hover,
.fn-env-sub-link:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 5px 16px rgba(var(--shadow-rgb), 0.2);
  outline: none;
}

.fn-env-sub-score {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.fn-env-sub-score.up { color: var(--up); }
.fn-env-sub-score.down { color: var(--down); }
.fn-env-sub-score.flat { color: var(--text-muted); }

.fn-env-sub-name {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 色條＝固定寬度的軌道＋依 |貢獻分| 長短的填充；貢獻分 0（含「資料不足」
   降級）時只剩空軌道，不假裝有強度。 */
.fn-env-sub-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  /* 上限寬度：色條若跟著卡一起拉滿會粗得像分隔線、蓋過旁邊的分數本身——
     比照設計樣品的比例壓在 120px 內置中。 */
  max-width: 120px;
  margin: 3px auto 0;
  background: rgba(var(--text-muted-rgb), 0.18);
  overflow: hidden;
}

.fn-env-sub-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--text-muted);
}

.fn-env-sub-fill.up { background: var(--up); }
.fn-env-sub-fill.down { background: var(--down); }

/* ---------- ①-c「今日判讀」banner（FT-52 M3-11，2026-08-07）----------
   架構取自指南的 ai-banner：左側 accent 粗邊條 ＋ 卡片。內容**逐字**是
   payload 的 `layer1.today_line`（後端 api/funnel.py::_environment_today_line()
   規則式組裝、已過守門），本頁不自己生成也不改寫任何一個字；欄位缺席時整塊
   不顯示（見 funnel.js renderAiBanner()）。原本這段是環境卡儀表模式內的
   `.fn-env-action`，M3-11 移出成獨立 banner，兩種檢視模式都看得到。 */
.fn-ai-banner {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 14px;
  padding: 14px 18px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 9%, var(--card-bg)),
    var(--card-bg) 62%
  );
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.12);
}

.fn-ai-banner-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  margin-bottom: 5px;
}

.fn-ai-banner-text {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
}

/* 行動指引句（G1，2026-08-08）：today_line 下方的白話觀察句。刻意做小一級
   ＋淡一階＋一條細分隔線——上面那行是「今天的分數與主因」（事實），這一行是
   「這種分數水準通常代表什麼」（觀察），兩者語意層級不同，視覺上要分得開，
   讀者才不會把它讀成同一句的續行。內容來源見 funnel.js renderAiBanner()。 */
.fn-ai-banner-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

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

table.fn-comp-table th,
table.fn-comp-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.fn-comp-table th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table.fn-comp-table tbody tr:last-child td {
  border-bottom: none;
}

table.fn-comp-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fn-comp-label {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.fn-comp-note {
  color: var(--text-muted);
  font-size: 12.5px;
  min-width: 220px;
}

.fn-comp-date {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

.fn-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
}

.fn-score-badge.up { background: var(--up-bg); color: var(--up); }
.fn-score-badge.down { background: var(--down-bg); color: var(--down); }
.fn-score-badge.flat { background: rgba(var(--text-muted-rgb), 0.14); color: var(--text-muted); }

/* ---------- ①-b 總經指標子區（選股漏斗第一層升級，任務#106新增） ---------- */

.fn-macro-ext-card {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fn-macro-ext-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
}

.fn-macro-ext-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.fn-macro-ext-total {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fn-macro-ext-total-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fn-macro-ext-total-note {
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(var(--text-muted-rgb), 0.14);
  padding: 2px 8px;
  border-radius: 999px;
}

/* 30日環境總分 sparkline */

.fn-sparkline-wrap {
  margin-bottom: 20px;
}

.fn-sparkline-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.fn-sparkline-bar {
  flex: 1 1 auto;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--text-faint);
}

.fn-sparkline-bar.up { background: var(--up); }
.fn-sparkline-bar.down { background: var(--down); }
.fn-sparkline-bar.flat { background: var(--text-muted); }

.fn-sparkline-delta {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

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

/* 指標卡片網格 */

.fn-macro-ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.fn-macro-card {
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* 卡片標題列＝指標名稱 ＋（三日內剛更新時）星號徽章。徽章靠右對齊，
   五張卡的標題基線不會因為有沒有徽章而錯開。 */
.fn-macro-card-head {
  display: flex;
  /* flex-start 而非 center：指標名稱在窄卡（網格最小 180px）會折成兩行，
     置中會讓徽章掉到兩行中間、與標題第一行對不齊。 */
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.fn-macro-card-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  min-width: 0;
}

.fn-macro-card-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.fn-macro-card-value .up,
.fn-macro-card-value .down,
.fn-macro-card-value .flat {
  font-size: 14px;
}

.fn-macro-card-streak {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* 卡片底部資訊列：第一行資料日、第二行更新時間，兩行都貼齊卡片底部。
   刻意分兩行（不是同一行用「・」串）——最窄 180px 的卡片擠不下，會斷成
   「資料日 2026-」/「07・更新 08-13 07:52」（2026-08-13 實際渲染抓到）。 */
.fn-macro-card-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.fn-macro-card-date {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: auto;
  white-space: nowrap;
}

.fn-macro-card-meta .fn-macro-card-date {
  margin-top: 0;
}

/* 「更新 MM-DD HH:MM」（站長 2026-08-13 指令二）。與「資料日」同級字，
   但字色與字重各提一階——資料日講的是「這個數字是哪一期」，更新時間講的是
   「我們最後一次去確認是什麼時候」，後者才是站長要用來判斷「站上數字有沒有
   落後」的那一個，不能比資料日還不起眼。 */
.fn-macro-card-updated {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 「來源 官方公布值／指數自算」（2026-08-13 審查 H4）。站長指令一是「要跟
   官方一樣不要自己算」——主源掛掉降級成自算時，卡片上 3.36 和 3.4 長得一模
   一樣，不標來源就只能去查 DB 才知道自己在看哪一種。字級同資料日、字色最淡：
   它是佐證資訊，不跟數字本身搶視線。窄卡放得下才不換行，太長就正常折行
   （不 nowrap，避免 180px 卡片被撐破）。 */
.fn-macro-card-source {
  font-size: 11px;
  color: var(--text-faint);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 三日內剛更新徽章（站長 2026-08-13 指令三「星星或其他顯眼標籤」）。

   配色刻意用 --status-new（四主題皆已定義，語意就是「新」）：
   - **絕不能用紅綠**：總經區全域規則是素色，紅綠會被誤讀成漲跌訊號
     （見 funnel.js ①-b 區塊頂部註解）。
   - 也刻意不沿用同一張 CPI 卡上倒數 chip 的 --brand-cyan：兩個 pill 同色
     會糊成一片，看不出哪個才是「剛更新」。
   - 不用 --brand-blue：暖陽/秋楓兩個亮色主題的 --brand-blue 是暖橘/磚紅
     （#b9622c / #c05442），落在紅色語意帶上，正好踩到上面那條紅線。
   --status-new 沒有配套的 -rgb 代幣，用 color-mix() 現算半透明底與描邊
   （app.css .egm-stop-* 已有同款 color-mix 先例），零寫死色。 */
.fn-fresh-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--status-new);
  /* fallback 先寫（舊 Safari <16.2 / 舊 Chrome <111 不認 color-mix()，整條
     declaration 會被丟掉）：沒有 color-mix 的瀏覽器至少拿到實心描邊膠囊，
     不會退化成「一行藍字」而失去「顯眼標籤」的效果（審查 L3）。 */
  background: transparent;
  border: 1px solid var(--status-new);
  background: color-mix(in srgb, var(--status-new) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-new) 45%, transparent);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}

.fn-macro-card .empty-state {
  font-size: 13px;
  color: var(--text-faint);
}

.fn-macro-countdown-chip {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-cyan-text);
  background: rgba(var(--brand-cyan-rgb), 0.12);
  padding: 3px 10px;
  border-radius: 999px;
}

/* 景氣對策信號燈號（國發會官方五色分類，非台股漲跌語意——刻意不沿用
   .up/.down 紅綠色系，避免使用者誤讀為漲跌方向）。 */

.fn-light-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

/* 前景（燈號文字）三色已有代幣（--light-red/--light-amber/--light-green）；
   底色用的是「國發會官方燈號原色」（#e74c3c/#f0a030/#2ecc71/#d4b106/#3498db，
   見下方 .fn-light-swatch 色帶），與前景代幣不同值，全站無對應代幣，故底色
   五行與藍／黃藍兩色前景一律豁免，見各行標註。 */
.fn-light-red { background: rgba(231, 76, 60, 0.16) /* theme-exempt: 缺 token --light-red-solid-rgb */; color: var(--light-red); }
.fn-light-yellow-red { background: rgba(240, 160, 48, 0.18) /* theme-exempt: 缺 token --light-amber-solid-rgb */; color: var(--light-amber); }
.fn-light-green { background: rgba(46, 204, 113, 0.16) /* theme-exempt: 缺 token --light-green-solid-rgb */; color: var(--light-green); }
/* theme-exempt（整行）: 缺 token --light-yellow-blue / --light-yellow-blue-solid-rgb */
.fn-light-yellow-blue { background: rgba(212, 177, 6, 0.18); color: #e0c23f; }
/* theme-exempt（整行）: 缺 token --light-blue / --light-blue-solid-rgb */
.fn-light-blue { background: rgba(52, 152, 219, 0.16); color: #62b3ea; }
.fn-light-unknown { background: rgba(var(--text-muted-rgb), 0.14); color: var(--text-muted); }

.fn-light-band {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

.fn-light-swatch {
  flex: 1 1 auto;
  height: 14px;
  border-radius: 3px;
  cursor: default;
}

/* theme-exempt（下列五行）: 缺 token --light-{red,amber,green,yellow-blue,blue}-solid
   ——這五色是國發會官方燈號原色（法定色票），不是品牌色，主題切換時是否
   要跟著調整需指揮官裁決；現階段全主題維持原色。 */
.fn-light-swatch.fn-light-red { background: #e74c3c; }
.fn-light-swatch.fn-light-yellow-red { background: #f0a030; }
.fn-light-swatch.fn-light-green { background: #2ecc71; }
.fn-light-swatch.fn-light-yellow-blue { background: #d4b106; }
.fn-light-swatch.fn-light-blue { background: #3498db; }
.fn-light-swatch.fn-light-unknown { background: rgba(var(--text-muted-rgb), 0.3); }

.fn-macro-card-band-hint {
  font-size: 10.5px;
  color: var(--text-faint);
}

/* 規則式總經環境解讀段落 */

.fn-macro-ext-interpretation {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(var(--brand-cyan-rgb), 0.05);
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.16);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- ② 強勢產業層 ---------- */

.fn-card-date {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.fn-industry-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 產業排行列（FT-52 M3-11 重排）：排名圓徽章 ＋（產業名／熱度 ＋ accent 漸層
   進度條）＋ 右側「領漲代表」微卡，三欄格線。熱度值、排序、popover 內容與
   領漲股欄位全部沿用，只換版式。 */
.fn-industry-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px 18px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 5%, var(--card-bg)),
    var(--card-bg) 68%
  );
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 18px;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.fn-industry-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.2);
}

/* 排名圓徽章：#1 最深、#2 中、#3 最淺——三階都是 var(--accent) 的
   color-mix() 現算（指南那組奶茶棕 HEX 沒有落地）。#3 最淺，白字撐不住，
   改用頁面主文字色。 */
.fn-industry-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--on-accent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 84%, white),
    color-mix(in srgb, var(--accent) 88%, black)
  );
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 34%, transparent);
}

.fn-industry-rank[data-rank="2"] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 62%, white),
    color-mix(in srgb, var(--accent) 74%, black)
  );
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 24%, transparent);
}

.fn-industry-rank[data-rank="3"] {
  color: var(--text);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 34%, var(--card-bg)),
    color-mix(in srgb, var(--accent) 46%, var(--card-bg))
  );
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 16%, transparent);
}

.fn-industry-main {
  min-width: 0;
}

.fn-industry-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fn-industry-name {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
  min-width: 0;
}

/* 熱度數值（右對齊，popover 觸發圖示跟在後面——`.sv-metric-pop` 預設
   `right: 0`，靠右擺才不會往視窗外長，見 app.css 該元件）。 */
.fn-industry-heat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
}

.fn-industry-heat-label {
  font-size: 11px;
  color: var(--text-faint);
}

.fn-industry-heat-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* accent 漸層熱度條：長度＝heat_score（0-100 的相對分數，口徑見 funnel.js
   buildHeatInfoPop() 的四權重說明），由 funnel.js 寫成 inline width。
   掃入動畫用 scaleX 而不是動 width——width 是資料值，不能被動畫覆寫；
   prefers-reduced-motion 由 app.css 全站規則壓成定格。 */
.fn-heat-track {
  display: block;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(var(--text-muted-rgb), 0.16);
  overflow: hidden;
}

.fn-heat-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 52%, white),
    var(--accent)
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: fn-heat-grow 0.8s var(--ease) both;
}

@keyframes fn-heat-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 「領漲代表」微卡（指南 lead-stock-box 架構）：欄位與語意色沿用既有
   `.fn-industry-leader-*`（全站紅漲綠跌代幣，**不採指南的焦紅／鼠尾草綠**
   ——全站語意色一致性優先）。 */
.fn-lead-card {
  flex: 0 0 auto;
  min-width: 172px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 13px;
  background: var(--card-bg);
  text-align: right;
}

.fn-lead-card-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.fn-lead-card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* 「熱度」說明 info 圖示（任務#157 案3新增）：外觀比照 stock.css
   .pattern-info-icon（同一個視覺語言，但那顆是頁面私有樣式，本頁獨立
   進入口不載入 stock.css，這裡複製一份小圖示樣式，互動邏輯共用全站
   popover_util.js，見 funnel.js buildHeatInfoPop()）。 */
.fn-heat-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--surface-tint-rgb), 0.1);
  color: var(--text-faint);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.fn-heat-info-icon:hover {
  background: rgba(var(--brand-cyan-rgb), 0.18);
  color: var(--brand-cyan-text);
}

.fn-heat-info-icon:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
}

/* 熱度說明 popover 右對齊觸發圖示（沿用 .sv-metric-pop 預設 right:0，
   跟 fn-industry-heat 本身靠右排版一致，不需要覆寫）。四權重列表＋白話
   備註，取代單純文字段落。 */
.fn-heat-weight-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-weight: 700;
  color: var(--text);
}

.fn-heat-weight-row:first-of-type {
  margin-top: 2px;
}

.fn-heat-weight-name {
  font-size: 11.5px;
}

.fn-heat-weight-score {
  font-variant-numeric: tabular-nums;
  color: var(--brand-cyan-text);
  font-size: 11.5px;
}

.fn-heat-weight-note {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 1px;
}

.fn-heat-relative-note {
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.5;
}

.fn-industry-leader-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.fn-industry-leader-link:hover {
  text-decoration: underline;
}

.fn-industry-leader-empty {
  color: var(--text-faint);
}

/* ---------- ③ 個股訊號層 ---------- */

/* 頂部數據標籤（FT-52 M3-11）：「選股宇宙 N 檔 → 今日共 M 檔訊號」。
   兩個數字直接取自 payload（`layer3.universe.total`／`layer3.count`），
   下面那行完整拆帳（上市/上市ETF/上櫃/上櫃ETF）原封保留成小字註解，
   資訊沒有因為改版被吃掉。 */
.fn-s3-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.fn-s3-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 6%, var(--card-bg));
}

.fn-s3-stat-label,
.fn-s3-stat-unit {
  font-size: 11.5px;
  color: var(--text-muted);
}

.fn-s3-stat-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.fn-s3-stat-accent {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 16%, var(--card-bg)),
    color-mix(in srgb, var(--accent) 6%, var(--card-bg))
  );
}

.fn-s3-stat-accent .fn-s3-stat-value {
  color: var(--accent-text);
}

.fn-s3-stat-arrow {
  font-weight: 700;
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

/* 選股宇宙全市場拆帳（任務#129，2026-07-12新增）：見 funnel.js
   renderUniverseLine() docstring 註解。 */
.fn-universe-line {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.fn-universe-note {
  margin-left: 4px;
}

.fn-signal-head {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.fn-signal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* FT-52 M3-9（2026-08-06）：hover 抬升（translateY -2px ＋ 落影）＋進場淡入
   stagger（序號 --fn-row-i 由 funnel.js 寫進 inline style）。
   prefers-reduced-motion 由 app.css 全站規則把 animation/transition 壓成
   0.01ms＝直接定格，這裡不另外判斷。 */
.fn-signal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  /* M3-11：底色/圓角改成與②層產業列同一套語言（漸層卡＋16px 圓角），
     三段看起來是同一個 Dashboard 而不是三張風格各異的表。 */
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 4%, var(--card-bg)),
    var(--card-bg) 70%
  );
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  transition: background-color 120ms ease, transform 140ms var(--ease), box-shadow 140ms var(--ease),
    border-color 140ms var(--ease);
  /* fill-mode 必須是 backwards、不能是 both：`both` 會讓最後一格關鍵影格
     （transform: none）在動畫結束後繼續生效，而動畫層優先權高於 :hover，
     hover 抬升會整個失效（harness 實測 translateY=0 抓到）。終值與基礎樣式
     相同，所以 backwards 的視覺結果一模一樣。 */
  animation: fn-signal-row-in 0.45s var(--ease) backwards;
  animation-delay: calc(var(--fn-row-i, 0) * 60ms);
}

.fn-signal-row:hover,
.fn-signal-row:focus-visible {
  background: rgba(var(--surface-tint-rgb), 0.05);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.22);
  outline: none;
}

@keyframes fn-signal-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.fn-signal-stock-id {
  font-weight: 800;
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}

.fn-signal-stock-name {
  color: var(--text);
  font-weight: 700;
  font-size: 13.5px;
}

/* FT-27「全站個股顯示三要素」：股名＋收盤價／漲跌點數／漲跌幅% 包成一組，
   小螢幕自動換行（見下方 <640px 規則），.up/.down/.flat 沿用全站共用紅漲
   綠跌色系（見本檔頂部說明）。 */
.fn-signal-name-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.fn-signal-change {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

/* FT-52 M3-9：訊號列的價格改藥丸 chip（與同列「選後 ±x.xx%」徽章同款
   幾何，底色淡一階避免兩顆 chip 搶戲）。文字色仍由上面 .up/.down/.flat
   提供——盤中 applyLiveQuoteForStock() 會整個覆寫 className，兩個 class
   都寫在 `data-fn-live-base-class` 裡（見 funnel.js 同段註解）。 */
.fn-signal-change-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
}

.fn-signal-change-chip.up {
  background: rgba(var(--up-rgb), 0.10);
  border-color: rgba(var(--up-rgb), 0.28);
}
.fn-signal-change-chip.down {
  background: rgba(var(--down-rgb), 0.10);
  border-color: rgba(var(--down-rgb), 0.28);
}
.fn-signal-change-chip.flat {
  background: rgba(var(--text-muted-rgb), 0.10);
  border-color: rgba(var(--text-muted-rgb), 0.24);
}

/* FT-32「選股類清單改最新收盤＋選後報酬」：訊號屬性（資料日）與價格
   （最新收盤）語意分工的低調小字說明，見 funnel.js renderSignals()。 */
.fn-signal-price-note {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: -8px 0 12px;
}

/* 「選後 ±x.xx%」小徽章（FT-32 新增）：(最新收盤－選出日收盤)/選出日
   收盤×100，比照 .fn-score-badge 的圓角小藥丸樣式，紅漲綠跌沿用全站
   changeClass() 慣例，見 funnel.js renderSignals() 註解。 */
.fn-signal-since-selection {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fn-signal-since-selection.up { background: var(--up-bg); color: var(--up); }
.fn-signal-since-selection.down { background: var(--down-bg); color: var(--down); }
.fn-signal-since-selection.flat { background: rgba(var(--text-muted-rgb), 0.14); color: var(--text-muted); }

.fn-signal-score {
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* ---------- 訊號分數環（FT-52 M3-9，2026-08-06）----------
   站長 2026-08-06 19:58 七張截圖點名：右下角裸分數與同頁已升級的視覺
   放在一起顯舊。改成小分數環（進度弧＝分數/100、中央是原本那顆數字，
   幾何與資料同源說明見 funnel.js signalScoreRing()）。
   色階沿用全站 AI 分數三階代幣（--score-high/mid/low），三階切點與
   app.js entryFitBadgeClass() 相同；刻意不用紅綠——分數是評估不是漲跌。
   質感語言與同頁環境儀表一致：漸層弧＋柔光暈＋掃入動畫；深/淺強度旋鈕
   分開，本區塊零寫死色。 */
.fn-signal-ring {
  position: relative;
  display: block;
  /* M3-11：列式 row 收緊後分數環同步縮一階（44→40），幾何與色階完全沿用。 */
  width: 40px;
  flex: 0 0 auto;
  --sr-lit: 55%;
  --sr-shade: 74%;
  --sr-glow: 30%;
  --sr-track-a: 0.16;
}

:root[data-theme="light-a"] .fn-signal-ring,
:root[data-theme="light-b"] .fn-signal-ring,
:root[data-theme="light-c"] .fn-signal-ring,
:root[data-theme="champagne"] .fn-signal-ring {
  --sr-lit: 70%;
  --sr-shade: 86%;
  --sr-glow: 14%;
  --sr-track-a: 0.22;
}

/* 三階分數色（--sr-c 供漸層端色與光暈共用一顆來源）。 */
.fn-ring-high { --sr-c: var(--score-high); }
.fn-ring-mid { --sr-c: var(--score-mid); }
.fn-ring-low { --sr-c: var(--score-low); }

.fn-signal-ring-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* 漸層端色（<stop> 繼承 .fn-signal-ring 上的自訂屬性）。 */
.sr-stop-0 { stop-color: color-mix(in srgb, var(--sr-c) var(--sr-lit), white); }
.sr-stop-1 { stop-color: var(--sr-c); }
.sr-stop-2 { stop-color: color-mix(in srgb, var(--sr-c) var(--sr-shade), black); }

.fn-signal-ring-track {
  stroke: color-mix(in srgb, var(--text-muted) calc(var(--sr-track-a) * 100%), transparent);
}

/* 掃入：--sr-dash（弧長）與 --sr-circ（整圈長）由 funnel.js 算好寫進
   inline style；prefers-reduced-motion 由 app.css 全站規則壓成定格。 */
.fn-signal-ring-prog {
  stroke-dasharray: var(--sr-dash) var(--sr-circ);
  filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--sr-c) var(--sr-glow), transparent));
  animation: fn-signal-ring-sweep 0.7s ease-out both;
}

@keyframes fn-signal-ring-sweep {
  from { stroke-dasharray: 0 var(--sr-circ); }
  to { stroke-dasharray: var(--sr-dash) var(--sr-circ); }
}

.fn-signal-ring-value {
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  fill: var(--text);
}

/* 沒有分數時的「—」：維持原本 .fn-signal-score 的位置與字級，不畫空環。 */
.fn-signal-score-empty {
  color: var(--text-faint);
}

/* ---------- 共用：段落終點 CTA 按鈕（FT-52 M3-11）---------- */

.fn-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.fn-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 28px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--on-accent);
  text-decoration: none;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 84%, white),
    color-mix(in srgb, var(--accent) 88%, black)
  );
  box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}

.fn-cta-btn:hover,
.fn-cta-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);
  outline: none;
}

/* ---------- 共用：卡片內「看更多」連結 ---------- */

.fn-card-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
}

.fn-card-more-link:hover {
  text-decoration: underline;
}

/* ---------- 響應式 ----------
   ≤900px：①層左右分欄疊成單欄（儀表在上、五分量卡矩陣在下）。
   ≤640px：分量表/產業列改直排、步驟導覽緊湊化。 */

@media (max-width: 900px) {
  .fn-s1-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .fn-s1-gauge-col {
    border-right: none;
    padding-right: 0;
    /* 單欄時分隔線改成橫的（原本是直的），視覺層級不變。 */
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .fn-env-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  table.fn-comp-table {
    display: block;
    overflow-x: auto;
  }

  /* 步驟導覽緊湊版：品牌字與箭頭讓位，只留三顆頁籤；真的還是塞不下時
     （超窄機或系統放大字級）由 .fn-stepnav-steps 自己橫向捲，不讓整份
     文件出現橫向捲軸。 */
  .fn-stepnav {
    padding: 6px 8px;
    justify-content: center;
    gap: 0;
  }

  .fn-stepnav-brand,
  .fn-step-arrow {
    display: none;
  }

  .fn-stepnav-steps {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fn-stepnav-steps::-webkit-scrollbar {
    display: none;
  }

  .fn-step-btn {
    padding: 6px 10px;
    font-size: 11.5px;
    gap: 3px;
  }

  .fn-step-num {
    font-size: 12.5px;
  }

  .fn-env-sub {
    padding: 9px 5px 10px;
  }

  .fn-env-sub-score {
    font-size: 20px;
  }

  .fn-env-status-row {
    gap: 8px 10px;
  }

  /* 產業列改直排：排名徽章＋產業名/熱度條在上，領漲微卡整行落到下面
     （微卡改滿版左對齊，右對齊在窄螢幕會與左側的熱度條對不齊）。 */
  .fn-industry-row {
    grid-template-columns: auto 1fr;
    padding: 13px 14px;
  }

  .fn-lead-card {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: left;
  }

  .fn-lead-card-body {
    justify-content: flex-start;
  }

  .fn-industry-name {
    font-size: 14px;
  }

  .fn-industry-heat-value {
    font-size: 15px;
  }

  .fn-signal-row {
    grid-template-columns: auto 1fr;
  }

  .fn-signal-score,
  .fn-signal-ring {
    grid-column: 2;
    justify-self: end;
  }

  /* 窄螢幕分數環縮一階（換行後與名稱同欄靠右，見上一條）。 */
  .fn-signal-ring {
    width: 36px;
  }

  .fn-signal-row {
    padding: 11px 13px;
  }

  .fn-s3-stat {
    padding: 7px 13px;
  }

  .fn-s3-stat-value {
    font-size: 17px;
  }

  .fn-macro-ext-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .fn-macro-ext-grid {
    grid-template-columns: 1fr;
  }

  .fn-sparkline-bars {
    height: 36px;
  }
}

/* ---------- 平台示範訊號標示（MAJOR-1 Phase 0，2026-07-18） ----------
   個股訊號層的揭露：chip 樣式與 signals.css .sv-demo-chip 同款（funnel 頁
   未載入 signals.css，本檔獨立一份）；說明句用低調次要字色。 */

.sv-demo-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.6;
  background-color: rgba(var(--brand-blue-rgb), 0.1);
  color: var(--brand-blue);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
  vertical-align: middle;
}

.sv-section-note {
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--fg-muted);
}