/* MVP 投資平台 · 共用樣式(批 PWA-0,2026-10-04)
 * 色票 / 字級 / 間距依 scratchpad KIT.md;CSP 為 style-src 'self' → ❌inline style,一律走這份檔的 class。
 * 主題:<html data-theme="dark|light|paper|system">;漲跌色:<html data-ud="us|tw|cvd">。
 * 漲跌語義色只經 --rise / --fall 取得;品牌 accent 永遠是青色(紙質為墨青),❌拿 accent 表示漲跌。
 * 紙質(paper,批 P2-34,契約 §40)= 固定淺色的第三組色票;「跟隨系統」只在深色 / 淺色之間切,❌切到紙質。
 * ⚠ 任何「淺色專屬」覆寫(選擇器含 [data-theme="light"])都要同時列 [data-theme="paper"](主色票那組除外,紙質另有自己一組);
 *   機械測試 pwa/tests/theme_check.py 會擋漏改(漏了 → 紙質拿到深色版的值)。
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;          /* Google 子集為可變字型:六個字重同一檔 */
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/archivo.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 色票:深色(預設)──────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1318; --s1: #171c22; --s2: #1f252c; --s3: #283039; --nav: #13181e;
  --line: #2c343d; --line-strong: #78838f;
  --text: #e6e9ed; --text-2: #a7b0ba; --text-3: #949da7;
  --accent: #4cc3d4; --accent-hover: #7fd6e2; --on-accent: #0b0f14;
  --accent-t: rgba(76, 195, 212, .14); --accent-t2: rgba(76, 195, 212, .10);
  --signal: #f0c674; --signal-t: rgba(240, 198, 116, .14); --signal-t2: rgba(240, 198, 116, .10); --signal-b: rgba(240, 198, 116, .35);
  --violet: #b392f0; --blue: #6ea8ff; --gold: #f0c674; --gray: #8b98a5;
  --gray-t: rgba(139, 152, 165, .16); --neutral-t: rgba(148, 157, 167, .14);
  --green: #2fbf71; --green-t: rgba(47, 191, 113, .14);
  --red: #ff6b6b; --red-t: rgba(255, 107, 107, .14);
  --cvd-up: #5aa9ff; --cvd-up-t: rgba(90, 169, 255, .14);
  --cvd-down: #ff9f43; --cvd-down-t: rgba(255, 159, 67, .14);
  --skel: #1f252c; --skel-hi: #283039;
  /* 恐懼貪婪五級配色照 CNN(批 P2-10,VIC 10-06 明確要求,取代 P2-5a「避開漲跌色」的主線裁量):
     極度恐懼 紅 → 恐懼 橘 → 中性 灰 → 貪婪 淺綠 → 極度貪婪 綠(與日報附件 CNN F&G 網頁 sentiment.FG_BANDS 同一組);
     ⚠ 會與漲跌色撞色(美式綠漲紅跌 / 台式紅漲綠跌)—— 恐懼貪婪處一律附區段名(極度恐懼 / 貪婪…),❌只靠顏色。 */
  --fg1: #e74c3c; --fg2: #e67e22; --fg3: #95a5a6; --fg4: #58d68d; --fg5: #27ae60;
  --fg1-t: rgba(231, 76, 60, .2); --fg2-t: rgba(230, 126, 34, .18); --fg3-t: rgba(149, 165, 166, .16);
  --fg4-t: rgba(88, 214, 141, .16); --fg5-t: rgba(39, 174, 96, .2);
  /* 批 P2-11(VIC 10-06):非現值那幾段的不透明度 —— 同色相、較淡;深色底上太透明會變暗成棕 / 灰,故深色 .78、淺色 .42
     (儀表弧 / 分級橫條用)。市場頁走勢底色帶批 P2-12a 改另一組(--fgb-*,見下方「恐懼貪婪走勢底色帶」區塊)。 */
  --fg-dim: .78;
  /* 批 P2-34(契約 §40):報頭色(頁首標題、紙質的頁首底線;日後專欄閱讀頁小標)與卡片陰影。
     深色 / 淺色 / 跟隨系統 = 現況(報頭 = 內文字色、卡片無陰影 → 外觀零變化);只有紙質另給值。
     --head 寫在這裡(:root 一律命中)→ 各主題的 --text 換了它就跟著換 */
  --head: var(--text); --card-shadow: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f4f7; --s1: #ffffff; --s2: #f7fafc; --s3: #e2e9ee; --nav: #ffffff;
  --line: #d5dde4; --line-strong: #7d8a97;
  --text: #17202a; --text-2: #3c4750; --text-3: #57646f;
  --accent: #0b6a84; --accent-hover: #0e5466; --on-accent: #ffffff;
  --accent-t: rgba(11, 106, 132, .12); --accent-t2: rgba(11, 106, 132, .08);
  --signal: #8a5a00; --signal-t: rgba(138, 90, 0, .12); --signal-t2: rgba(138, 90, 0, .08); --signal-b: rgba(138, 90, 0, .35);
  --violet: #6d3fc0; --blue: #2f6fd0; --gold: #8a5a00; --gray: #6f7c89;
  --gray-t: rgba(111, 124, 137, .16); --neutral-t: rgba(87, 100, 111, .12);
  --green: #25722b; --green-t: rgba(37, 114, 43, .12);
  --red: #c2280d; --red-t: rgba(194, 40, 13, .10);
  --cvd-up: #1d5fd1; --cvd-up-t: rgba(29, 95, 209, .12);
  --cvd-down: #a13f06; --cvd-down-t: rgba(161, 63, 6, .12);
  --skel: #e2e9ee; --skel-hi: #eef2f5;
  --fg1: #c0392b; --fg2: #d35400; --fg3: #7f8c8d; --fg4: #2e9e5b; --fg5: #1e7a45;
  --fg1-t: rgba(192, 57, 43, .14); --fg2-t: rgba(211, 84, 0, .14); --fg3-t: rgba(127, 140, 141, .14);
  --fg4-t: rgba(46, 158, 91, .14); --fg5-t: rgba(30, 122, 69, .16);
  --fg-dim: .42;
}

/* ── 色票:紙質(批 P2-34,VIC 10-14 裁定;契約 §40)──────────────────────────────────
   底色取自財報讀本紙質版:暖灰底 #f5f1e8、米白版心 #fcfaf5、墨色字、膠囊底 #e8e3d8。固定淺色(「跟隨系統」❌切到這組)。
   強調色(選中分頁、按鈕、連結、ⓘ)= 墨青 #1d5e6b —— ❌松綠:美式綠 = 漲、台式綠 = 跌,選中會被讀成漲跌。
   松綠 #1b6b4a 只當報頭(--head:頁首標題 + 頁首 2px 底線),❌數字、膠囊、按鈕、區段標題。
   --green / --red 只是紙質調性的綠 / 磚紅,誰是漲照樣由每人的漲跌色(data-ud)決定;❌新增任何「好壞」語義色。
   恐懼貪婪五級與 --fg-dim 沿用淺色那組:區段名文字(--fgl1..5)在米白卡片上 5.13–6.71;五級填色(儀表弧 / 小圓點,非文字)3.27–5.21;
   色弱版 2 號填色 2.80 低於 3,淺色白底原本就只有 2.93(既有狀況)。其他淺色專屬覆寫在各區塊,選擇器同列 paper。
   對比度(WCAG,一般文字 ≥ 4.5、線條等非文字 ≥ 3)由 pwa/tests/theme_check.py 逐組驗。 */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f5f1e8; --s1: #fcfaf5; --s2: #f3eee3; --s3: #e8e3d8; --nav: #fcfaf5;
  --line: #e0d9cb; --line-strong: #857d6e;
  --text: #2b2620; --text-2: #4f493e; --text-3: #665f51;
  --accent: #1d5e6b; --accent-hover: #164a55; --on-accent: #ffffff;
  --accent-t: rgba(29, 94, 107, .12); --accent-t2: rgba(29, 94, 107, .08);
  --signal: #835400; --signal-t: rgba(131, 84, 0, .12); --signal-t2: rgba(131, 84, 0, .08); --signal-b: rgba(131, 84, 0, .35);
  --violet: #643aa8; --blue: #2a5fae; --gold: #835400; --gray: #776f61;
  --gray-t: rgba(119, 111, 97, .16); --neutral-t: rgba(92, 86, 72, .12);
  --green: #2c6a3b; --green-t: rgba(44, 106, 59, .12);
  --red: #a13d3d; --red-t: rgba(161, 61, 61, .11);
  --cvd-up: #1f5bbf; --cvd-up-t: rgba(31, 91, 191, .12);
  --cvd-down: #9a3d08; --cvd-down-t: rgba(154, 61, 8, .12);
  --skel: #e8e3d8; --skel-hi: #f3eee3;
  --fg1: #c0392b; --fg2: #d35400; --fg3: #7f8c8d; --fg4: #2e9e5b; --fg5: #1e7a45;
  --fg1-t: rgba(192, 57, 43, .14); --fg2-t: rgba(211, 84, 0, .14); --fg3-t: rgba(127, 140, 141, .14);
  --fg4-t: rgba(46, 158, 91, .14); --fg5-t: rgba(30, 122, 69, .16);
  --fg-dim: .42;
  --head: #1b6b4a; --card-shadow: 0 1px 3px rgba(70, 60, 44, .12);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f1f4f7; --s1: #ffffff; --s2: #f7fafc; --s3: #e2e9ee; --nav: #ffffff;
    --line: #d5dde4; --line-strong: #7d8a97;
    --text: #17202a; --text-2: #3c4750; --text-3: #57646f;
    --accent: #0b6a84; --accent-hover: #0e5466; --on-accent: #ffffff;
    --accent-t: rgba(11, 106, 132, .12); --accent-t2: rgba(11, 106, 132, .08);
    --signal: #8a5a00; --signal-t: rgba(138, 90, 0, .12); --signal-t2: rgba(138, 90, 0, .08); --signal-b: rgba(138, 90, 0, .35);
    --violet: #6d3fc0; --blue: #2f6fd0; --gold: #8a5a00; --gray: #6f7c89;
    --gray-t: rgba(111, 124, 137, .16); --neutral-t: rgba(87, 100, 111, .12);
    --green: #25722b; --green-t: rgba(37, 114, 43, .12);
    --red: #c2280d; --red-t: rgba(194, 40, 13, .10);
    --cvd-up: #1d5fd1; --cvd-up-t: rgba(29, 95, 209, .12);
    --cvd-down: #a13f06; --cvd-down-t: rgba(161, 63, 6, .12);
    --skel: #e2e9ee; --skel-hi: #eef2f5;
    --fg1: #c0392b; --fg2: #d35400; --fg3: #7f8c8d; --fg4: #2e9e5b; --fg5: #1e7a45;
    --fg1-t: rgba(192, 57, 43, .14); --fg2-t: rgba(211, 84, 0, .14); --fg3-t: rgba(127, 140, 141, .14);
    --fg4-t: rgba(46, 158, 91, .14); --fg5-t: rgba(30, 122, 69, .16);
    --fg-dim: .42;
  }
}

/* ── 漲跌色(每人設定)──────────────────────────────────────────── */
:root,
:root[data-ud="us"] { --rise: var(--green); --rise-t: var(--green-t); --fall: var(--red); --fall-t: var(--red-t); }
:root[data-ud="tw"] { --rise: var(--red); --rise-t: var(--red-t); --fall: var(--green); --fall-t: var(--green-t); }
:root[data-ud="cvd"] { --rise: var(--cvd-up); --rise-t: var(--cvd-up-t); --fall: var(--cvd-down); --fall-t: var(--cvd-down-t); }
/* 色弱模式的恐懼貪婪五級(紅隊 P3-1:CNN 紅綠在紅綠色弱下分不出極度恐懼 / 極度貪婪)→ 橘(恐懼)→ 灰 → 藍(貪婪),
   與色弱模式漲跌色同向(橘 = 跌、藍 = 漲);區段名照樣一律寫出。深色 / 淺色各一組(屬性選擇器多一個 → 蓋過主題色票) */
:root[data-ud="cvd"] {
  --fg1: #ff9f43; --fg2: #ffc58f; --fg3: #95a5a6; --fg4: #9fc8ff; --fg5: #5aa9ff;
  --fg1-t: rgba(255, 159, 67, .2); --fg2-t: rgba(255, 197, 143, .16); --fg3-t: rgba(149, 165, 166, .16);
  --fg4-t: rgba(159, 200, 255, .16); --fg5-t: rgba(90, 169, 255, .2);
}
:root[data-ud="cvd"][data-theme="light"], :root[data-ud="cvd"][data-theme="paper"] {
  --fg1: #a13f06; --fg2: #d9822b; --fg3: #7f8c8d; --fg4: #5b8fd9; --fg5: #1d5fd1;
  --fg1-t: rgba(161, 63, 6, .14); --fg2-t: rgba(217, 130, 43, .14); --fg3-t: rgba(127, 140, 141, .14);
  --fg4-t: rgba(91, 143, 217, .14); --fg5-t: rgba(29, 95, 209, .14);
}
@media (prefers-color-scheme: light) {
  :root[data-ud="cvd"][data-theme="system"] {
    --fg1: #a13f06; --fg2: #d9822b; --fg3: #7f8c8d; --fg4: #5b8fd9; --fg5: #1d5fd1;
    --fg1-t: rgba(161, 63, 6, .14); --fg2-t: rgba(217, 130, 43, .14); --fg3-t: rgba(127, 140, 141, .14);
    --fg4-t: rgba(91, 143, 217, .14); --fg5-t: rgba(29, 95, 209, .14);
  }
}

/* ── 恐懼貪婪走勢底色帶(批 P2-12a A1,VIC 10-06 晚;契約 §21.4)──────────────────────────
   照日報附件 CNN F&G 網頁(sentiment.FG_BANDS、plotly opacity .13):五段同一組 CNN 淡色、同一透明度,❌現值段加濃。
   淺色主題照搬(.13,細分隔線灰色)。
   深色主題 = C 案(主線 10-07 補充:先前 .14 / .17 / .20 三案在深底上肉眼都讀成「恐懼 = 咖啡色、貪婪 = 暗綠」—— 深底上任何
   看得見的暖色填滿都會讀成棕):填滿降到 .06(幾乎看不出,只剩極淡的灰階差),段別改靠「彩色細分隔線 25 / 50 / 75(.ref-line--fgdiv,
   該段亮色字色、半透明)+ 右側彩色區段名(--fgl*)+ 左緣彩色細條」辨識;走勢線仍是畫面最醒目的元素。
   離線算過(卡片底 #171c22,L* 10.0):.06 各段疊色 L* 只比卡片底高 2.4–4.7、彩度 0.8–5.7(判準:L* 差 ≤ 6 或彩度 ≤ 6 → 看不出顏色就不會讀成棕);
   走勢線對各段對比 ≥ 12.6、區段名 ≥ 7.1、彩色分隔線(.55)只有 3.1–3.6(❌搶過走勢線)。
   D 案(深色主題下繪圖區改淡色紙底小面板)只在 e2e 以 DOM 操作出截圖給 VIC 比較,❌上線、本檔沒有它的樣式。 */
:root,
:root[data-theme="dark"] {
  --fgb1: #e74c3c; --fgb2: #e67e22; --fgb3: #95a5a6; --fgb4: #58d68d; --fgb5: #27ae60; --fgb-a: .06;
  --fgl1: #ff8a80; --fgl2: #f5a35c; --fgl3: #b7c3c4; --fgl4: #7ee2a8; --fgl5: #52cf8a;
}
:root[data-theme="light"], :root[data-theme="paper"] {
  --fgb-a: .13;
  --fgl1: #b03a2e; --fgl2: #a84300; --fgl3: #5b6768; --fgl4: #1f7a45; --fgl5: #17663a;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --fgb-a: .13;
    --fgl1: #b03a2e; --fgl2: #a84300; --fgl3: #5b6768; --fgl4: #1f7a45; --fgl5: #17663a;
  }
}
/* 色弱模式:底色帶與區段名改用色弱五級色(橘 → 淺橘 → 灰 → 淺藍 → 藍,§19.6) */
:root[data-ud="cvd"] {
  --fgb1: #ff9f43; --fgb2: #ffc58f; --fgb3: #95a5a6; --fgb4: #9fc8ff; --fgb5: #5aa9ff;
  --fgl1: #ffb26b; --fgl2: #ffd1a6; --fgl3: #b7c3c4; --fgl4: #b5d5ff; --fgl5: #86c0ff;
}
:root[data-ud="cvd"][data-theme="light"], :root[data-ud="cvd"][data-theme="paper"] {
  --fgb1: #a13f06; --fgb2: #d9822b; --fgb3: #7f8c8d; --fgb4: #5b8fd9; --fgb5: #1d5fd1;
  --fgl1: #8f3705; --fgl2: #8a4f12; --fgl3: #5b6768; --fgl4: #2f63ad; --fgl5: #1a55bb;
}
@media (prefers-color-scheme: light) {
  :root[data-ud="cvd"][data-theme="system"] {
    --fgb1: #a13f06; --fgb2: #d9822b; --fgb3: #7f8c8d; --fgb4: #5b8fd9; --fgb5: #1d5fd1;
    --fgl1: #8f3705; --fgl2: #8a4f12; --fgl3: #5b6768; --fgl4: #2f63ad; --fgl5: #1a55bb;
  }
}

/* ── 基礎 ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  font-size: 15px;
  line-height: 23px;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-family: "Archivo", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; font-variant-numeric: tabular-nums; }   /* 中文字落回與內文同一套(批 P2-5b:全形括號在微軟正黑體會撐開成「( 字 )」) */
.en { font-family: "Archivo", system-ui, sans-serif; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--fill { fill: currentColor; stroke: none; }

/* ── App 外殼 ────────────────────────────────────────────────── */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.apphead {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.apphead__in {
  height: 56px; max-width: 720px; margin: 0 auto; padding: 0 8px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.apphead__left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* 批 P2-34:報頭 —— 頁首標題用 --head(深色 / 淺色 = 內文字色,外觀不變);紙質另加 2px 松綠底線(❌其他主題) */
:root[data-theme="paper"] .apphead { border-bottom: 2px solid var(--head); }
.apphead__title { font-size: 22px; line-height: 28px; font-weight: 700; white-space: nowrap; color: var(--head); }
.apphead__sub { font-size: 12px; line-height: 17px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apphead__right { display: flex; align-items: center; gap: 4px; flex: none; }
.apphead--back .apphead__in { padding-left: 4px; }
.apphead--back .apphead__left { align-items: center; gap: 4px; }
.apphead--back .apphead__title { font-size: 18px; line-height: 24px; }
.iconbtn {
  width: 44px; height: 44px; padding: 0; border: none; background: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--text-2); text-decoration: none; flex: none;
}
.iconbtn:hover { color: var(--text); background: var(--s2); }
.iconbtn--text { color: var(--text); }
.avatar {
  width: 30px; height: 30px; border-radius: 999px; background: var(--s3); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; font-weight: 700;
}
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }

.banners { max-width: 720px; width: 100%; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.banners:not(:empty) { padding-top: 12px; }
.banner {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; line-height: 19px;
}
.banner .ico { margin-top: 1px; }
.banner__text { flex: 1; min-width: 0; }
.banner--stale { background: var(--signal-t); color: var(--signal); border: 1px solid var(--signal-b); }
.banner--stale .banner__text { color: var(--text); }
.banner--offline { background: var(--s2); color: var(--text-2); border: 1px solid var(--line); }
.banner--update { background: var(--accent-t); color: var(--text); border: 1px solid var(--accent); align-items: center; }
.banner__btn {
  flex: none; min-height: 36px; padding: 0 12px; border: none; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700;
}

.statusline {
  max-width: 720px; width: 100%; margin: 0 auto; min-height: 32px; padding: 6px 16px 0;
  display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 17px; color: var(--text-2);
}
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; }
.dot--warn { background: var(--signal); }
.dot--off { background: var(--text-3); }

.page {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto;
  padding: 12px 16px calc(88px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 24px;
}
.page--tight { gap: 12px; padding-top: 16px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--nav); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
/* 7 格(批 P2-11 加「白兔」):360 寬每格約 51px、390 寬約 56px(點擊區 ≥ 44px);標籤一律兩個字、不換行 */
.tabbar__in { max-width: 720px; margin: 0 auto; height: 64px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  text-decoration: none; color: var(--text-3); font-size: 11px; line-height: 14px; font-weight: 500; white-space: nowrap;
}
.tabbar__item:hover { color: var(--text-2); }
.tabbar__item[aria-current="page"], .tabbar__item.is-on { color: var(--accent); }

/* ── 區段與卡片 ───────────────────────────────────────────────── */
.sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sec__head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sec__title { font-size: 18px; line-height: 24px; font-weight: 700; }
.more {
  min-height: 44px; display: inline-flex; align-items: center; gap: 2px; flex: none;
  font-size: 13px; line-height: 19px; text-decoration: none; color: var(--accent);
}
.card {
  background: var(--s1); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  box-shadow: var(--card-shadow);   /* 批 P2-34:只有紙質有極淡暖陰影(深色 / 淺色 = none);.card--pinned 在後面自己蓋掉 */
}
.card--tight { gap: 10px; }
.card--link { text-decoration: none; color: var(--text); }
.card--link:hover { color: var(--text); background: var(--s2); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.card__head--base { align-items: baseline; }
.card__title { font-size: 16px; line-height: 22px; font-weight: 600; }
.card__title--icon { display: flex; align-items: center; gap: 8px; }
.card__note { font-size: 12px; line-height: 17px; color: var(--text-3); text-align: right; }
.caption { font-size: 12px; line-height: 17px; color: var(--text-3); }
.explain { font-size: 13px; line-height: 19px; color: var(--text-2); }
.body2 { font-size: 15px; line-height: 23px; color: var(--text-2); }
/* 給人讀的長段落一律兩端對齊(10-05 紅隊 P3;大盤結語另見 .prose__p)。放在前面,後面個別元件要靠右 / 置中時照常覆寫;
   行距沿用各自設定 —— 全站行距調到 1.75 會牽動每張卡的高度,留待 VIC 目視後另批 */
.explain, .body2, .news-why, .note-conc, .warnbox__text, .points > li { text-align: justify; text-justify: inter-character; }
.divider { height: 1px; background: var(--line); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--8 { gap: 8px; }
.stack--4 { gap: 4px; }
.stack--2 { gap: 2px; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--base { align-items: baseline; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── chip ─────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  background: var(--s3); color: var(--text-2); border-radius: 8px; padding: 3px 8px;
  font-size: 12px; line-height: 17px; white-space: nowrap;
}
.chip--wrap { white-space: normal; }
.chip--tk { font-family: "Archivo", system-ui, sans-serif; font-weight: 600; }
.chip--major { background: var(--signal-t); color: var(--signal); font-weight: 500; }
.chip--high { background: var(--accent-t); color: var(--accent); font-weight: 500; }
.chip--signal { background: var(--signal-t); color: var(--signal); }
.chip--accent { background: var(--accent-t); color: var(--accent); }
.chip--violet { background: var(--s3); color: var(--violet); }
/* 批 P2-38(契約 §45.3):觀點「重要」+ 變化標籤(▲ / ▼ 走漲跌色;首評 / 升降評以外的主標籤 = 粗體中性) */
.chip--imp { background: var(--signal-t); color: var(--signal); border: 1px solid var(--signal-b); padding: 2px 7px; font-weight: 700; }
.chip--up { background: var(--rise-t); color: var(--rise); font-weight: 600; }
.chip--down { background: var(--fall-t); color: var(--fall); font-weight: 600; }
.chip--lab { color: var(--text); font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; border-radius: 8px; padding: 3px 8px; white-space: nowrap;
  font-family: "Archivo", "PingFang TC", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  font-size: 12px; line-height: 17px; font-weight: 600;
}
.pill--up { background: var(--rise-t); color: var(--rise); }
.pill--down { background: var(--fall-t); color: var(--fall); }
.pill--flat, .pill--na { background: var(--neutral-t); color: var(--text-2); }
.pill--lg { font-size: 13px; line-height: 18px; padding: 1px 6px; border-radius: 6px; }

/* ── 載入 / 錯誤 / 空狀態 ─────────────────────────────────────── */
.skel { background: var(--skel); border-radius: 12px; position: relative; overflow: hidden; }
.skel--h120 { height: 120px; }
.skel--h200 { height: 200px; }
.skel--h60 { height: 60px; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-hi), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.state { align-items: flex-start; }
.state__icon { color: var(--signal); }
.state__icon--muted { color: var(--text-3); }
.state__title { font-size: 16px; line-height: 22px; font-weight: 600; }
.btn {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.btn:hover { background: var(--s2); color: var(--text); }
.btn--primary { border: none; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--block { width: 100%; min-height: 48px; }
.btn--big { height: 52px; border-radius: 12px; font-size: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--s3); color: var(--text-3); border-color: transparent; cursor: not-allowed; }
.btn--danger { color: var(--signal); border-color: var(--signal-b); }
.gaps { background: var(--s2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.gaps__title { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 19px; color: var(--signal); font-weight: 600; }
.gaps__item { font-size: 13px; line-height: 19px; color: var(--text-2); }

/* ── 今日 ────────────────────────────────────────────────────── */
.idx-card { background: var(--s1); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  box-shadow: var(--card-shadow); }
.idx-card__name { font-size: 13px; line-height: 19px; color: var(--text-2); }
.idx-card__close { font-size: 22px; line-height: 28px; font-weight: 700; }
.idx-card__foot { height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spark-mini { width: 64px; height: 24px; flex: none; }
.spark-mini path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-mini circle { fill: var(--blue); }
.metric-big { font-size: 28px; line-height: 34px; font-weight: 700; }
.metric-mid { font-size: 22px; line-height: 28px; font-weight: 700; }
.lbl { font-size: 13px; line-height: 19px; color: var(--text-2); }
.fg-svg { width: 100%; height: 48px; overflow: visible; }
.fg-zone { fill: var(--s3); }
.fg-zone--on { fill: var(--accent); fill-opacity: .42; }
.fg-label { fill: var(--text-3); font-size: 12px; }
.fg-label--on { fill: var(--text); font-weight: 600; }
.fg-prev { fill: var(--text-3); }
.fg-month { fill: var(--blue); }
.fg-dot { fill: var(--text); stroke: var(--s1); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 17px; color: var(--text-2); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
.legend__band { width: 12px; height: 10px; border-radius: 2px; border: 1.5px solid var(--accent); background: var(--accent-t2); }
.legend__band--next { border: none; border-top: 1.5px dashed var(--line-strong); background: var(--gray-t); }
.lev-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.lev-row:first-child { border-top: none; }
.lev-row__text { flex: 1; min-width: 0; font-size: 14px; line-height: 21px; }
.conc { font-size: 17px; line-height: 26px; font-weight: 700; }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.textbtn {
  align-self: flex-start; min-height: 44px; padding: 0; border: none; background: none;
  display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 13px; line-height: 19px;
}
.rot90 { transform: rotate(90deg); }
.rotm90 { transform: rotate(-90deg); }
.mover {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--text);
}
.mover:hover { color: var(--text); background: var(--s2); }
.mover__tk { font-size: 15px; line-height: 20px; font-weight: 600; }
.mover__px { font-size: 12px; line-height: 16px; color: var(--text-3); }
.zonelink {
  min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--s2); text-decoration: none; color: var(--text);
}
.zonelink:hover { color: var(--text); background: var(--s3); }
.ev-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.cal-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cal-row:first-child { border-top: none; }
.cal-md { font-size: 15px; line-height: 20px; font-weight: 600; }
.cal-items { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.cal-item {
  min-height: 25px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 8px;
  background: var(--s2); font-size: 13px; line-height: 19px;
}
.cal-kind { font-size: 12px; color: var(--text-2); }
.cal-item { flex-wrap: wrap; max-width: 100%; }
.cal-item__text { color: var(--text-2); overflow-wrap: anywhere; }
.cal-kind--macro { color: var(--signal); }
/* 批 P2-10:日曆分類色(比照催化劑頻道 🟦 宏觀數據 / 🟥 FOMC / 🟩 財報 / 🟨 產業);色點 + 類別名,❌只靠顏色 */
.cal-kind[class*="cal-cat--"] { display: inline-flex; align-items: center; gap: 5px; }
.cal-kind[class*="cal-cat--"]::before, .calf-dot { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--calc); }
.cal-cat--fred { --calc: var(--blue); }
.cal-cat--fomc { --calc: var(--red); }
.cal-cat--earnings { --calc: var(--green); }
.cal-cat--industry { --calc: var(--cal-ind, #f0c674); }
.cal-cat--other { --calc: var(--gray); }
:root[data-theme="light"], :root[data-theme="paper"] { --cal-ind: #c99700; }
@media (prefers-color-scheme: light) { :root[data-theme="system"] { --cal-ind: #c99700; } }
/* .fchips.calf(兩個 class)才蓋得過後面的 .fchips 橫向捲動版(紅隊 P3-9:單 class 被 .fchips 蓋回) */
.fchips.calf { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
.calf .fchip { display: inline-flex; align-items: center; gap: 6px; }
.calf .fchip[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.calf .fchip[aria-pressed="true"] { background: var(--s2); border-color: var(--line-strong); color: var(--text); font-weight: 600; }

/* ── 自選 ────────────────────────────────────────────────────── */
.wl-top { display: flex; flex-direction: column; gap: 6px; }
/* 修正輪 FIX1 P3-4:頁首時段字與漲跌家數放不下時整段換行(盤中多了「N 檔無盤中價」),每一段❌從字中間斷開 */
.wl-top > .row { flex-wrap: wrap; row-gap: 2px; }
.wl-top [data-wl="breadth"] { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.wl-top [data-wl="breadth"] > span { white-space: nowrap; }
.breadth { height: 4px; border-radius: 999px; overflow: hidden; display: flex; gap: 2px; background: var(--s3); }
.breadth__up { background: var(--rise); }
.breadth__down { background: var(--fall); }
.seg {
  min-height: 46px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.seg__btn {
  min-height: 44px; padding: 0 2px; border: none; border-radius: 9px; background: transparent; color: var(--text-2);
  font-size: 13px; line-height: 17px; font-weight: 500; white-space: nowrap;
}
.seg__btn[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-desc { font-size: 13px; line-height: 19px; color: var(--text-2); min-height: 38px; }
.wl-list { margin: 0 -16px; }
.wl-head, .wl-row {
  padding: 0 16px; display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) minmax(108px, 136px);
  gap: 12px; align-items: center;
}
.wl-head { min-height: 46px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 17px; color: var(--text-3); }
.wl-sort {
  min-height: 44px; padding: 0; background: none; border: none; color: var(--text-2); font-size: 12px; line-height: 17px;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap;
}
/* 批 P2-33(VIC 10-14 第 3 點):表頭左邊「代號 · 均線排列」= 依代號排序的按鈕(靠左;樣式同右邊的排序鈕) */
.wl-sort.wl-sort--tk { justify-content: flex-start; }
/* 批 P2-35(VIC 10-15):沒在作用的那一顆排序符號淡色(看得出可點);作用中的那顆照舊強調色。
   淡色 = 次要字色 × 透明度;三主題對頁面底 ≥ 3:1(非文字的可點提示,符號的意思另寫在按鈕的 aria-label)—— pwa/tests/theme_check.py 第 7 段守 */
.wl-sym { white-space: pre; }
.wl-sym--dim { color: var(--text-2); opacity: .65; }
.wl-row { min-height: 60px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.wl-row:hover { color: var(--text); background: var(--s1); }
.wl-row > span { min-width: 0; }
.wl-tk { font-size: 16px; line-height: 20px; font-weight: 700; }
.wl-sub { font-size: 12px; line-height: 17px; color: var(--text-3); }
.wl-spark { height: 32px; min-width: 0; display: flex; align-items: center; justify-content: center; }
.wl-spark svg { width: 100%; height: 32px; }
.wl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.wl-close { font-size: 15px; line-height: 20px; font-weight: 600; }
.wl-vals { display: flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; }
.wl-pre { font-size: 12px; line-height: 17px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.wl-pre--violet { color: var(--violet); }
.wl-val { font-size: 13px; line-height: 18px; font-weight: 600; }
.wl-tag { padding: 0 6px; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; }
.wl-tag--gold { background: var(--signal-t); color: var(--signal); }
.wl-tag--cyan { background: var(--accent-t); color: var(--accent); }
.spark-base { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spark-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-line--up { stroke: var(--rise); }
.spark-line--down { stroke: var(--fall); }
.spark-line--flat { stroke: var(--text-3); }
.footnotes { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 17px; color: var(--text-3); }

/* 搜尋浮層 */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: flex-start; }
.sheet {
  width: 100%; max-width: 720px; background: var(--s1); border-radius: 0 0 20px 20px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 16px; display: flex; flex-direction: column; gap: 12px;
  max-height: 80vh; max-height: 80dvh;
}
.sheet__list { overflow-y: auto; display: flex; flex-direction: column; }
.sheet__item {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--text);
}
.input {
  height: 48px; width: 100%; padding: 0 14px; background: var(--s2); border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--text); font-size: 16px; line-height: 23px;
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }

/* ── 個股 ────────────────────────────────────────────────────── */
.stockhead { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-top: env(safe-area-inset-top); }
.stockhead__bar { max-width: 720px; margin: 0 auto; padding: 4px 8px 4px 4px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.stockhead__name { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.stockhead__tk { font-size: 17px; line-height: 22px; font-weight: 700; }
.stockhead__co { font-size: 12px; line-height: 16px; color: var(--text-3); }
.stockhead__spacer { width: 44px; }
.quote { max-width: 720px; width: 100%; margin: 0 auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.quote__px { font-size: 34px; line-height: 40px; font-weight: 700; }
.quote__chg { font-size: 16px; line-height: 22px; font-weight: 600; }
.tabs-wrap { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 15; }
.tabs {
  max-width: 720px; margin: 0 auto; display: flex; gap: 4px; padding: 0 12px; overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; height: 44px; padding: 0 10px; display: flex; align-items: center; text-decoration: none;
  font-size: 15px; color: var(--text-3); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text-2); }
.tab[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.warnbox { display: flex; align-items: flex-start; gap: 8px; background: var(--signal-t2); border-radius: 8px; padding: 10px 12px; color: var(--signal); }
.warnbox__text { font-size: 14px; line-height: 21px; font-weight: 500; }
.note-conc { font-size: 16px; line-height: 25px; font-weight: 700; }
.points { display: flex; flex-direction: column; gap: 10px; }
.point { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 10px; align-items: start; }
.point__dot { height: 21px; display: flex; align-items: center; }
.point__dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.point__text { font-size: 14px; line-height: 21px; color: var(--text-2); }
.point__lead { color: var(--text); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 4px; min-height: 44px; background: var(--s2); border-radius: 8px; padding: 12px; min-width: 0; }
.tile__k { font-size: 12px; line-height: 17px; color: var(--text-3); }
.tile__v { font-size: 20px; line-height: 26px; font-weight: 700; overflow-wrap: anywhere; }
.tile__l { font-size: 13px; line-height: 19px; color: var(--text-2); overflow-wrap: anywhere; }
.chart { width: 100%; min-height: 120px; }
.chart--gauge { min-height: 48px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.k-body--up { fill: var(--rise); }
.k-body--down { fill: var(--fall); }
.k-wick--up { fill: none; stroke: var(--rise); stroke-width: 1; }
.k-wick--down { fill: none; stroke: var(--fall); stroke-width: 1; }
.k-vol--up { fill: var(--rise); fill-opacity: .45; }
.k-vol--down { fill: var(--fall); fill-opacity: .45; }
.band-cur { fill: var(--accent-t2); stroke: var(--accent); stroke-width: 1.2; }
.band-next { fill: var(--gray-t); }
.band-next-edge { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.px-line { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.px-tag { fill: var(--accent); }
.px-tag-text { fill: var(--on-accent); font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.axis-text { fill: var(--text-3); font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; }
.band-label { font-size: 12px; font-weight: 600; fill: var(--accent); paint-order: stroke; stroke: var(--s1); stroke-width: 3px; }
.band-label--next { font-weight: 400; fill: var(--text-2); }
.news-item { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.news-title { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.news-why { font-size: 13px; line-height: 19px; color: var(--text-2); }
/* 批 P2-38(契約 §45.1):內部人交易卡 —— 方向膠囊走漲跌色(依各人漲跌色設定)、金額粗體大字、其餘小字;只用既有色票 */
.news-item--f4 { gap: 8px; }
.f4-head { gap: 8px; align-items: center; }
.f4-dir { display: inline-flex; align-items: center; border-radius: 8px; padding: 2px 9px; font-size: 13px; line-height: 19px; font-weight: 700; white-space: nowrap; }
.f4-dir--up { background: var(--rise-t); color: var(--rise); border: 1px solid var(--rise); }
.f4-dir--down { background: var(--fall-t); color: var(--fall); border: 1px solid var(--fall); }
.f4-tk { font-family: "Archivo", system-ui, sans-serif; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--text); }
.f4-verb { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.f4-who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; }
.f4-role { gap: 6px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.f4-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.f4-amt { gap: 4px 10px; align-items: baseline; }
.f4-big { font-family: "Archivo", system-ui, sans-serif; font-size: 24px; line-height: 30px; font-weight: 700; color: var(--text); }
.f4-sub { font-size: 13px; line-height: 19px; color: var(--text-2); }
.f4-sec { overflow-wrap: anywhere; }
.f4-foot { margin: 0; }
/* 批 P2-38(契約 §45.6):Put/Call 偏高 / 偏低 / 相當膠囊(❌漲跌色 —— 不是方向訊號)與「 | 」分隔的一行結論 */
.pc-chip { align-self: flex-start; display: inline-flex; border-radius: 8px; padding: 2px 8px; font-size: 12px; line-height: 17px; font-weight: 600; white-space: normal; }
.pc-chip--hl { background: var(--signal-t); color: var(--signal); border: 1px solid var(--signal-b); }
.pc-chip--mid { background: var(--s3); color: var(--text); }
.pc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pc-line__sep { color: var(--line-strong); font-weight: 400; }
.pc-line__tail { color: var(--text-2); font-weight: 500; }
/* 批 P2-38(契約 §45.7):本益比河流圖現況四格(手機兩欄、寬螢幕四欄);位階條 = P25 以下青、P75 以上金、白色標記在百分位 */
.pe-tiles { margin-bottom: 4px; }
@media (min-width: 720px) { .pe-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pe-tile--wide { grid-column: 1 / -1; }
.pe-rank { position: relative; height: 8px; margin: 6px 0 2px; border-radius: 4px; background: var(--s3); }
.pe-rank__lo { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: 4px 0 0 4px; background: var(--accent-t); }
.pe-rank__hi { position: absolute; left: 75%; top: 0; bottom: 0; width: 25%; border-radius: 0 4px 4px 0; background: var(--signal-t); }
.pe-rank__mk { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.pe-rank__ticks { position: relative; height: 14px; font-size: 10px; line-height: 14px; color: var(--text-3); }
.pe-rank__t { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pe-tag { align-self: flex-start; border-radius: 8px; padding: 2px 8px; font-size: 12px; line-height: 17px; font-weight: 600; background: var(--s3); color: var(--text); }
.pe-tag--rich { background: var(--signal-t); color: var(--signal); }
.pe-tag--cheap { background: var(--accent-t); color: var(--accent); }
.pe-dir { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--text); }
.pe-how { display: flex; flex-direction: column; gap: 4px; }
.pe-how + .pe-how { margin-top: 8px; }
.pe-how__h { margin: 0; font-size: 13px; line-height: 19px; font-weight: 700; color: var(--accent); }
.pe-how__ul { margin: 0; padding-left: 18px; }
/* 修正輪:「P90 說明」兩欄(分位標記一欄、說明一欄;說明太長換行時對齊在說明那一欄,❌第一行只剩標記被兩端對齊拉開) */
.pe-how__li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.pe-how__nb { white-space: nowrap; }     /* 批 P2-39:說明結尾的「（…）」整段不斷行(❌第二行只剩孤字「區）」) */
.wk { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.wk__box { background: var(--s2); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk__px { font-size: 20px; line-height: 26px; font-weight: 700; }
.wk__mos { font-size: 13px; line-height: 19px; color: var(--violet); }
.soon { align-items: flex-start; }

/* ── 我的 ────────────────────────────────────────────────────── */
.acct { display: flex; align-items: center; gap: 12px; }
.optgroup { display: flex; flex-direction: column; gap: 8px; }
.opt-label { font-size: 15px; line-height: 23px; font-weight: 600; }
.opt-hint { font-size: 12px; line-height: 17px; color: var(--text-3); }
.ud-preview { display: flex; gap: 8px; }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; gap: 12px; }
.step__no {
  flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-t); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-family: "Archivo", system-ui, sans-serif; font-size: 13px; font-weight: 700;
}
.step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.step__title { font-size: 15px; line-height: 23px; font-weight: 600; }
.step__desc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; line-height: 19px; color: var(--text-2); }
.callout {
  display: flex; gap: 6px; align-items: flex-start; padding: 10px; border-radius: 8px;
  background: var(--signal-t2); border: 1px solid var(--signal-b); font-size: 13px; line-height: 19px; color: var(--text);
}
.callout .ico { color: var(--signal); margin-top: 2px; }
.callout__em { color: var(--signal); font-weight: 600; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 21px; }
.kv:first-child { border-top: none; }
.kv__k { color: var(--text-2); }
/* 批 P3-b(契約 §39):「我的」推播設定。整區包在 fieldset:未開啟推播時 fieldset 停用 = 灰階預覽(控制項一次全停) */
.seg--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pset--off { opacity: .55; filter: grayscale(1); }
.pset--off .seg__btn, .pset--off input, .pset--off select, .pset--off .pset-chk { cursor: not-allowed; }
.pset-list { display: flex; flex-direction: column; }
.pset-chk { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 0; cursor: pointer; }
.pset-chk input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.pset-chk__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pset-chk__label { font-size: 15px; line-height: 22px; color: var(--text); }
.pset-time { display: flex; align-items: center; gap: 8px; }
.pset-hm { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }   /* 修正輪 RT-5:時 / 分兩個下拉(24 小時制) */
.input--hm { flex: 1 1 0; min-width: 0; padding: 0 8px; font-variant-numeric: tabular-nums; }
.input--sel { height: 44px; }
.input[disabled] { opacity: .6; cursor: not-allowed; }
.pset-status { min-height: 17px; }
.pset-status--err { color: var(--signal); }
.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  max-width: calc(100% - 32px); background: var(--s3); color: var(--text); border-radius: 10px; padding: 10px 14px;
  font-size: 13px; line-height: 19px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

/* ── 登入頁 ──────────────────────────────────────────────────── */
.login { max-width: 480px; margin: 0 auto; padding: calc(40px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 24px; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.brand__logo { width: 88px; height: 88px; border-radius: 22px; overflow: hidden; }
.brand__logo img { width: 88px; height: 88px; display: block; }
.brand__name { font-family: "Archivo", system-ui, sans-serif; font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: 3px; }
.brand__tag { font-size: 15px; line-height: 23px; color: var(--text-2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; line-height: 19px; color: var(--text-2); }
.input--code { text-transform: uppercase; letter-spacing: 1px; font-family: "Archivo", "PingFang TC", system-ui, sans-serif; }
.input--otp {
  height: 56px; text-align: center; font-family: "Archivo", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; letter-spacing: 12px; padding-left: 26px;
}
.msg { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 19px; color: var(--text-2); }
.msg .ico { margin-top: 1px; color: var(--accent); }
.msg--err { color: var(--signal); }
.msg--err .ico { color: var(--signal); }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; line-height: 19px; color: var(--text-2); }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.fine { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.why { align-self: stretch; text-align: left; background: var(--s1); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.why li { font-size: 13px; line-height: 19px; color: var(--text-2); }
.why b { color: var(--text); font-weight: 600; }
.linkbtn {
  min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; background: none; border: none;
  font-size: 13px; line-height: 19px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.offline { max-width: 480px; margin: 0 auto; padding: calc(64px + env(safe-area-inset-top)) 16px 40px; display: flex; flex-direction: column; gap: 16px; }

/* ── 圖表共用(charts.js)───────────────────────────────────────── */
.gapband { fill: var(--gray-t); }
.zero-line { stroke: var(--line); stroke-width: 1; }
.ref-line { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.vline { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.ln { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ln--blue { stroke: var(--blue); }
.ln--gold { stroke: var(--gold); }
.ln--violet { stroke: var(--violet); stroke-width: 2; }
.ln--gray { stroke: var(--gray); }
.ln--text { stroke: var(--text); }
.ln--accent { stroke: var(--accent); }
.ln--dash { stroke-dasharray: 5 4; stroke-width: 1.4; }
.ln-halo { fill: none; stroke: var(--s1); stroke-width: 4.6; stroke-linejoin: round; stroke-linecap: round; }
.ref-line--strong { stroke: var(--text); opacity: .7; }
.area-gray { fill: var(--gray-t); stroke: none; }
.band-soft { fill: var(--neutral-t); }
.band-gold { fill: var(--signal-t2); }
.band-cyan { fill: var(--accent-t2); }
.mark { fill: var(--text-2); stroke: var(--s1); stroke-width: 1.5; }
.mark--violet { fill: var(--violet); }
.mark--hollow { fill: var(--s1); stroke: var(--violet); stroke-width: 1.6; }
.end-label { fill: var(--text-2); font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.end-dot { fill: var(--text-2); }
.end-label.c-blue, .end-dot.c-blue { fill: var(--blue); }
.end-label.c-gold, .end-dot.c-gold { fill: var(--gold); }
.end-label.c-violet, .end-dot.c-violet { fill: var(--violet); }
.end-label.c-text, .end-dot.c-text { fill: var(--text); }
/* 批 P2-21:走勢圖右端的「盤中」空心點 + 接到線尾的虛線短線(線只畫每天收盤後的值;與 SM / DM 小圖「虛線 + 空心點 = 暫定」同一套語彙) */
.live-pt { fill: none; stroke: var(--text-2); stroke-width: 1.8; }   /* 紅隊 P3-1:❌填色 —— 盤中值貼近收盤值時,線尾收盤點要透得出來 */
.live-pt.c-text, .live-link.c-text { stroke: var(--text); }
.live-pt.c-violet, .live-link.c-violet { stroke: var(--violet); }
.live-link { fill: none; stroke: var(--text-2); stroke-width: 1.2; stroke-dasharray: 2 2; }
.end-label.live-label { font-weight: 500; }
/* 批 P2-31(契約 §35):個股 K 線圖右端的盤中空心點(K 線是漲跌色 → 描邊改主字色、加粗,深淺色都看得清楚;❌填色,底下的 K 線透得出來)、
   頁頭盤中小字、自選清單每列盤中漲跌小字、K 線圖下說明列的空心點圖例 */
.live-pt.live-pt--k { stroke: var(--text); stroke-width: 2; }
.live-link.live-link--k { stroke: var(--text); opacity: .75; }
.quote__live { font-size: 13px; line-height: 18px; color: var(--text-2); margin: -4px 0 0; }
/* 批 P2-35(契約 §41):大字旁「盤中」小標、大字下那一行的時段標(盤前 / 盤後 / 盤後收) */
.quote__tag { align-self: center; font-size: 12px; line-height: 18px; font-weight: 600; padding: 0 7px; border-radius: 6px;
  background: var(--accent-t); color: var(--accent); }
.quote__live:not(.hidden) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.quote__live b { font-weight: 600; color: var(--text); }
/* 修正輪 FIX1:「盤中報價暫停更新」自成一列(有盤後那行時❌擠在同一列被誤讀成盤後暫停);八因子 / 估值大字旁的「收盤 MM-DD」口徑小標 */
.quote__stale { flex-basis: 100%; }
.ftile__big .xlab { display: inline-block; white-space: nowrap; margin-left: 6px; vertical-align: middle; font-size: 11px; line-height: 16px; padding: 0 5px; }
.xlab { font-size: 12px; line-height: 18px; font-weight: 600; padding: 0 6px; border-radius: 5px; background: var(--s3); color: var(--text-2); }
.wl-live { font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; }
.wl-livehead { margin: 0; }
.live-cap { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; }
.live-cap > span:last-child { min-width: 0; }
.live-dot { width: 9px; height: 9px; border-radius: 999px; border: 2px solid var(--text); flex: none; margin-top: 4px; }
.axis-text--soft { opacity: .85; }
.bar--up { fill: var(--rise); }
.bar--down { fill: var(--fall); }
.bar--flat { fill: var(--text-3); }
.bar--blue { fill: var(--blue); fill-opacity: .85; }
.zband { fill: var(--accent); stroke: none; }
.zband--1 { fill-opacity: .06; }
.zband--2 { fill-opacity: .10; }
.zband--3 { fill-opacity: .14; }
.zband--4 { fill-opacity: .18; }
.zband--cur { stroke: var(--accent); stroke-width: 1.2; }
.k-wick-thin--up { fill: none; stroke: var(--rise); stroke-width: 1.2; }
.k-wick-thin--down { fill: none; stroke: var(--fall); stroke-width: 1.2; }
.va-dot { fill: var(--gold); stroke: var(--s1); stroke-width: 1.5; }
.rsi-bg { fill: var(--neutral-t); }

/* 圖例色票 */
.lg { display: inline-block; flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--text-3); }
.lg-blue { background: var(--blue); }
.lg-gold { background: var(--gold); }
.lg-violet { background: var(--violet); }
.lg-gray { background: var(--gray); }
.lg-text { background: var(--text); }
.lg-accent { width: 10px; height: 10px; background: var(--accent); }
.lg-signal { width: 10px; height: 10px; background: var(--signal); }
.lg-dash { height: 0; background: none; border-top: 2px dashed var(--line-strong); }
.lg-up { width: 10px; height: 10px; background: var(--rise); }
.lg-down { width: 10px; height: 10px; background: var(--fall); }
.lg-band { width: 12px; height: 10px; border: 1.5px solid var(--accent); background: var(--accent-t2); }
.lg-area { width: 12px; height: 10px; background: var(--gray-t); border-radius: 2px; }
.lg-dotgold { width: 9px; height: 9px; border-radius: 999px; background: var(--gold); }

/* ── 篩選 / 切換 / 連結 ─────────────────────────────────────────── */
/* 批 P2-38(VIC 10-23):篩選鈕放不下就換行(手機、電腦一樣;❌橫向捲動 —— 最後一顆被切掉、電腦上看不出能捲),與 .fchips.calf 一致 */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; margin: 0; padding: 0; }
/* 批 P2-38 修正輪(紅隊 P3-6):同一張卡有兩組篩選鈕(警示頁 時段 / 類型)→ 組名小標 + 第二組上方一條分隔線,換行後也分得清 */
.fgroup { display: flex; flex-direction: column; gap: 6px; }
.fgroup + .fgroup { border-top: 1px solid var(--line); padding-top: 10px; }
.fgroup__label { font-size: 12px; line-height: 17px; color: var(--text-3); font-weight: 600; }
.fchip {
  flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-2); font-size: 13px; line-height: 19px; white-space: nowrap;
}
.fchip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg--sm { min-height: 38px; flex: none; }
.seg--sm .seg__btn { min-height: 36px; padding: 0 10px; font-size: 12px; }
.card__head .seg--sm { display: inline-grid; }
.extlink, .minilink {
  display: inline-flex; align-items: center; gap: 3px; min-height: 32px; font-size: 13px; line-height: 19px;
  color: var(--accent); text-decoration: none;
}
.minilink { padding: 0 8px; border-radius: 8px; background: var(--accent-t2); font-weight: 600; }
.dayhead { font-size: 13px; line-height: 19px; color: var(--text-3); font-weight: 600; padding: 12px 0 0; }
.newslist { display: flex; flex-direction: column; }
.newslist .news-item { padding: 12px 0; }
.news-meta { gap: 6px; }
.news-impact { font-size: 13px; line-height: 19px; color: var(--text-2); background: var(--s2); border-radius: 8px; padding: 8px 10px; }
.news-impact b { color: var(--text); font-weight: 600; margin-right: 2px; }
.fold { display: flex; flex-direction: column; }
.fold__body { border-left: 2px solid var(--line); padding-left: 10px; }
.clamp6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 個股細節分頁 ─────────────────────────────────────────────── */
.tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile__v--sm { font-size: 17px; line-height: 23px; }
.kvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.kvgrid__c { display: flex; flex-direction: column; gap: 2px; background: var(--s2); border-radius: 8px; padding: 8px 10px; min-width: 0; font-size: 14px; line-height: 20px; }
.lvrow { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.lvrow .chart { min-height: 48px; }
.gauge { position: relative; height: 20px; }
.gauge__track {
  position: absolute; left: 0; right: 0; top: 7px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-t), var(--s3) 50%, var(--signal-t));
}
.gauge__mark { position: absolute; top: 1px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.subhead { font-size: 15px; line-height: 22px; font-weight: 600; }
.ladder-row { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--s2); }
.ladder-row--cur { outline: 1.5px solid var(--accent); background: var(--accent-t2); }
.kv2 { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font-size: 13px; line-height: 19px; }
.kv2__k { color: var(--text-3); }
.rec-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.rec-row__main { font-size: 15px; line-height: 21px; font-weight: 600; }
.kv--stack { flex-direction: column; gap: 2px; }
.statusbox { display: flex; gap: 6px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--s2); font-size: 13px; line-height: 19px; color: var(--text); }
.statusbox .ico { color: var(--violet); margin-top: 2px; }
.lad { display: flex; flex-direction: column; }
.lad-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(84px, auto); gap: 10px; align-items: center;
  min-height: 40px; padding: 0 10px; border-left: 3px solid var(--line); font-size: 14px; line-height: 20px;
}
.lad-row + .lad-row { border-top: 1px solid var(--line); }
.lad-row__k { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.lad-row > :last-child { text-align: right; }
.lad--prem { border-left-color: var(--violet); }
.lad--disc { border-left-color: var(--accent); }
.lad-row--px { border-left-color: var(--text); background: var(--s2); font-weight: 700; }
.ratebar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--s3); gap: 2px; }
.ratebar__buy { background: var(--blue); }   /* 批 P2-5b:買進用藍(accent 青色只當品牌 / 可點擊色,❌語義色) */
.ratebar__hold { background: var(--gray); }
.ratebar__sell { background: var(--signal); }
.subbox { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--s2); }
.firms { display: flex; flex-direction: column; }
.firm-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line); }
.firm-row__rank { width: 20px; flex: none; color: var(--text-3); font-size: 12px; text-align: right; }
.firm-row__name { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.firm-row__right { align-items: flex-end; flex: none; }
.firm-row__pt { font-size: 15px; line-height: 20px; font-weight: 700; }
.rowlink {
  min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--text);
}
.rowlink:hover { color: var(--text); background: var(--s2); }
.rowlink--off { color: var(--text-3); }
.rowlink__t { font-size: 15px; line-height: 21px; font-weight: 500; }
.doclist { display: flex; flex-direction: column; }

/* ── 市場 ────────────────────────────────────────────────────── */
.cal-items--col { flex-direction: column; flex-wrap: nowrap; }
.cal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 19px; }
.cal-text { color: var(--text-2); }
.tg { display: flex; flex-direction: column; }
.tg-row {
  display: grid; grid-template-columns: minmax(64px, auto) auto minmax(0, 1fr); gap: 4px 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.tg-row__tk { font-weight: 700; justify-self: start; }
.tg-row__dir { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tg-row__meta { text-align: right; }
.tg-row__path { grid-column: 1 / -1; }
/* 批 P2-10(9):傳導鏈圖(charts.js transGraph;契約 v2.7 §19.3)—— 線色 = 方向(跟使用者漲跌色)、線粗 = 幅度 */
.tx-box-wrap { display: flex; flex-direction: column; gap: 6px; }
.chart.tx-chart { min-height: 60px; }
.tx-svg { width: 100%; overflow: visible; }
.tx-edge { fill: none; stroke-linecap: round; stroke-opacity: .85; }
.tx-edge--up { stroke: var(--rise); }
.tx-edge--down { stroke: var(--fall); }
.tx-edge--flat { stroke: var(--gray); }
.tx-mag--s { stroke-width: 3.2; }
.tx-mag--m { stroke-width: 2.2; }
.tx-mag--w { stroke-width: 1.4; }
.tx-mag--xw { stroke-width: 1; stroke-dasharray: 3 3; }
.tx-edge--via { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.tx-head { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tx-box { fill: var(--s2); stroke: var(--line-strong); stroke-width: 1; }
.tx-node--trigger .tx-box { stroke: var(--accent); stroke-width: 1.5; fill: var(--accent-t2); }
.tx-node--via .tx-box { fill: none; stroke-dasharray: 3 3; }
.tx-node--watch .tx-box { stroke: var(--accent); }
.tx-node--focus .tx-box { stroke-width: 2.2; }
.tx-tk { font-size: 12px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.tx-meta { font-size: 10.5px; fill: var(--text-2); }
.tx-meta--up { fill: var(--rise); }
.tx-meta--down { fill: var(--fall); }

/* ── 報告文件 ─────────────────────────────────────────────────── */
.page--doc { max-width: none; padding: 0 0 calc(64px + env(safe-area-inset-bottom)); gap: 0; }
.docwrap { display: flex; flex-direction: column; }
.docmiss { max-width: 720px; width: 100%; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.docbar { max-width: 720px; width: 100%; margin: 0 auto; min-height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 8px; }
.docframe {
  display: block; width: 100%; border: 0; background: #ffffff;
  height: calc(100vh - 56px - 44px - 64px);
  height: calc(100dvh - 56px - 44px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

@media (min-width: 600px) {
  .grid2--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── P2-2 事件分群(同一事件的多則報導折成一張卡;契約 v2.1 §12)───────────── */
.evgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.evgroup__head { gap: 8px; }
.evgroup__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent-t2); color: var(--accent);
  font-size: 13px; line-height: 19px; font-weight: 600; cursor: pointer;
}
.evgroup__btn:hover { background: var(--accent-t); }
.evgroup__chev { transition: transform .15s ease; }
.evgroup__btn[aria-expanded="true"] .evgroup__chev { transform: rotate(90deg); }
.evgroup__list {
  list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--accent-t);
  display: flex; flex-direction: column;
}
.evgroup__item { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.evgroup__item:first-child { border-top: none; padding-top: 2px; }
.evgroup__meta { gap: 6px; }
.evgroup__title { font-size: 14px; line-height: 20px; color: var(--text); overflow-wrap: anywhere; }
.news-item--group { gap: 8px; }
.evgroup-card .evgroup__btn { align-self: flex-start; }

/* ── P2-4 資訊架構 + 個人化(底部 6 格、總覽分段、警示、產業、追蹤清單;契約 v2.2)──────────── */
.apphead__left--seg { align-items: center; }
.ovseg { display: inline-flex; flex: none; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.ovseg__btn {
  min-height: 38px; padding: 0 12px; display: flex; align-items: center; text-decoration: none; white-space: nowrap;
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-2);
}
.ovseg__btn:hover { color: var(--text); background: var(--s2); }
.ovseg__btn[aria-current="page"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.follownote {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  background: var(--s2); color: var(--text-2); font-size: 13px; line-height: 19px;
}
.follownote .ico { color: var(--accent); }
.follownote__link { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; flex: none; font-weight: 600; text-decoration: none; }
.chip--link { text-decoration: none; font-weight: 600; min-height: 28px; }
.chip--link:hover { color: var(--accent-hover); }
/* 批 P2-39(契約 §46.5):快訊卡「看傳導鏈 ›」按鈕(代號列下方自成一行;手機好點)+ 旁邊「影響 AMD、TSM」小字(放不下就換到下一行) */
.trans-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.btn.btn--trans { min-height: 40px; gap: 4px; color: var(--accent); border-color: var(--accent-t); background: var(--accent-t2); }
.btn.btn--trans:hover { color: var(--accent-hover); background: var(--accent-t); }
.trans-hits { color: var(--text-2); }
.chip--reason { font-weight: 600; }
.news-why--lines { white-space: pre-line; overflow-wrap: anywhere; }
.btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.filterbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 10px;
  background: var(--accent-t2); border: 1px solid var(--accent-t); font-size: 13px; line-height: 19px; color: var(--text);
}
.tg-row--focus { background: var(--accent-t2); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.card--pinned { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent-t); }   /* 從快訊「傳導鏈」點來:這則新聞觸發的卡 */
.pinnote { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
/* 批 P2-16(VIC 10-07 C 案,契約 §25):產業地圖改全螢幕覆蓋層(原本內嵌在產業頁、版心 720 → 地圖只露出畫面 19–37%)——
   蓋住頁首與底部分頁列(z 45 > 頁首 20 / 分頁列 30);逐人浮水印(guard.css,2147483000)仍在最上層。
   頂端條 = 標題 + 日期 + 「關閉」(iPhone 主畫面 App 沒有系統返回鍵 → 「關閉」有字、有底色、44px 高)。
   地圖網頁本身另在打包時注入嵌入版 v5(底部說明面板、點環節放大、尺寸改變重框;pwa_publish._MAP_EMBED_CSS / _MAP_EMBED_JS) */
.mapfull {
  position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.mapfull:focus { outline: none; }
.mapfull__bar { flex: none; min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--line); }
.mapfull__title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapfull__close { flex: none; padding: 0 14px 0 10px; background: var(--s2); }
.mapfull__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mapfull__frame { flex: 1 1 auto; display: block; width: 100%; height: auto; min-height: 0; border: 0; background: #1a1d21; }
.mapfull__miss { width: 100%; max-width: 720px; margin: 0 auto; padding: 16px; }
html:has(.mapfull) { overflow: hidden; }
/* 關閉地圖後 600ms 的透明點擊屏障(industry.js tapShield):連點兩下「關閉」的第二下❌落到正下方剛畫出來的頁首右側按鈕;
   在 App 所有層(覆蓋層 45 / 選單 50 / 提示 60)之上、浮水印(2147483000)之下 */
.tapshield { position: fixed; inset: 0; z-index: 2147482000; background: transparent; touch-action: none; -webkit-tap-highlight-color: transparent; }
.mapopen { margin-top: 4px; }
.maphist { display: flex; flex-wrap: wrap; gap: 6px; }
.maphist .fchip[disabled] { opacity: .5; cursor: not-allowed; }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0 8px; }
.fl-item { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; line-height: 20px; color: var(--text); cursor: pointer; }
.fl-item input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.wl-tkrow { gap: 6px; }
#follow { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }   /* 「調整」連過來時標題不被固定頁首蓋住 */
.wl-tkrow .chip { padding: 0 6px; }

/* ── P2-5a 視覺優化(恐懼貪婪儀表 / 槓桿快指標 / SM・DM 小圖 / 大盤結語排版;契約 v2.3)──────────── */
.fgz--1 { --fgc: var(--fg1); --fgt: var(--fg1-t); --fgbc: var(--fgb1); --fglc: var(--fgl1); }
.fgz--2 { --fgc: var(--fg2); --fgt: var(--fg2-t); --fgbc: var(--fgb2); --fglc: var(--fgl2); }
.fgz--3 { --fgc: var(--fg3); --fgt: var(--fg3-t); --fgbc: var(--fgb3); --fglc: var(--fgl3); }
.fgz--4 { --fgc: var(--fg4); --fgt: var(--fg4-t); --fgbc: var(--fgb4); --fglc: var(--fgl4); }
.fgz--5 { --fgc: var(--fg5); --fgt: var(--fg5-t); --fgbc: var(--fgb5); --fglc: var(--fgl5); }
/* 批 P2-11(VIC 10-06):今日頁恐懼貪婪改大儀表 —— 儀表佔滿它那欄(上限 300px),今日數字放在圓心大圓內,
   區段名與今日 / 前收 / 月前排在儀表下方一列;視覺份量與右側 CNN Put/Call 五日均值相當 */
.fg-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.fg-gauge { width: 100%; min-width: 0; }
/* 批 P2-10(5):折線圖十字線(charts.js attachCross)—— 上下滑照常捲頁(pan-y),左右滑 / 滑鼠移過顯示日期與數值 */
/* 紅隊修正 P2-2:pan-y pinch-zoom = 上下捲頁、雙指縮放照常(❌只寫 pan-y → 手指在圖上無法放大);外層容器 .xh-host 同設 */
/* 複審 P3:先寫 pan-y 再寫 pan-y pinch-zoom —— 不認 pinch-zoom 的瀏覽器丟掉第二行時仍保有 pan-y(❌整行作廢退回 auto) */
.xh-on, .xh-host { touch-action: pan-y; touch-action: pan-y pinch-zoom; }
.xh-on { cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.xh-line { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; }
.xh-dot { fill: var(--s1); stroke-width: 2; stroke-dasharray: none; }
.xh-bg { fill: var(--s2); stroke: var(--line-strong); stroke-width: 1; }
.xh-text { font-size: 11px; fill: var(--text); font-variant-numeric: tabular-nums; }
.xh-text .xh-v { stroke: none; font-weight: 700; fill: var(--text); }
.xh-text .xh-v.ln--blue { fill: var(--blue); }
.xh-text .xh-v.ln--gold { fill: var(--gold); }
.xh-text .xh-v.ln--violet { fill: var(--violet); }
.xh-text .xh-v.ln--gray { fill: var(--text-2); }
.xh-text .xh-v.ln--accent { fill: var(--accent); }
/* 批 P2-10:恐懼貪婪儀表旁接 CNN Put/Call 五日均值 —— 寬螢幕並排、窄螢幕(放不下 300 + 200)換到下一列 */
/* 批 P2-16(E1,B 案):兩欄等高(stretch)→ Put/Call 欄最底的註解段(.pc5-diff,margin-top: auto)貼齊右欄底 */
.fg-pc { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 24px; min-width: 0; }
/* 批 P2-11:儀表那欄固定 300px(❌撐寬到 366 再把儀表縮在中間 → 空白);多出來的寬度給 Put/Call 小圖。
   窄螢幕(兩塊上下排)時儀表那欄佔滿整列,儀表置中(❌偏左) */
.fg-pc > .fg-row { flex: 0 1 300px; }
@media (max-width: 559px) { .fg-pc > .fg-row { flex: 1 1 100%; } }
.pc5 { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* 批 P2-12a(A2,VIC 10-06 晚圖 1):兩欄的標題列都在欄頂、同字級(.lbl)→ 並排時基線對齊;
   Put/Call 的數字 / 小圖 / 說明包成一塊、在欄內水平置中(左右留白相等;寬螢幕最寬 420px,窄螢幕佔滿) */
.fg-head { gap: 4px 10px; }
/* 批 P2-13(D4,VIC 10-07 附圖):數字 / 小圖 / 「近 22 個交易日 · 虛線…」改靠欄左(與標題左緣對齊,❌置中;寬螢幕最寬 420px)。
   批 P2-16(E1,VIC 10-07 摺疊機實測改 B 案;取代 P2-13 的 A 案「兩欄下方、橫跨整張卡片」):「與 Cboe 單日值算法不同」那段
   是 .pc5 的最後一個子元素 —— 並排時 margin-top: auto 推到右欄最底(兩欄等高 → 與左欄「今日 / 前收 / 月前」列同一條下緣;
   右欄較高時就接在「近 N 個交易日」之後,padding-top 留間距);上下排時接在 Put/Call 區塊下方 */
.pc5__body { align-self: flex-start; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.pc5__body > .pc5__chart { align-self: stretch; }
.pc5 > .pc5-diff { margin-top: auto; padding-top: 6px; max-width: 420px; text-align: left; }
.pc5-nw { white-space: nowrap; }
/* 批 P2-33(VIC 10-14 第 4 點):小圖下的兩段說明固定各佔一行(右欄高度不隨欄寬折行而變 → 兩欄下緣在 600–720 寬都對得齊) */
.pc5-cap > .pc5-nw { display: block; }
.fg-arc { display: block; margin: 0 auto; overflow: visible; }
/* 非現值段:同色相、較淡(--fg-dim)且較細;現值段:不透明且較粗(批 P2-11;❌像先前 .3 那樣在深色底上變暗成棕色) */
.fg-seg { fill: none; stroke: var(--fgc); stroke-opacity: var(--fg-dim); }
.fg-seg--on { stroke-opacity: 1; }
.fg-tick { stroke-width: 2.5; stroke-linecap: round; }
.fg-tick--prev { stroke: var(--text-3); }
.fg-tick--month { stroke: var(--violet); }
.fg-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.fg-hub { fill: var(--s2); stroke: var(--fgc, var(--line-strong)); stroke-width: 2.5; }
.fg-num { fill: var(--text); font-family: "Archivo", system-ui, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-name { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
.fg-name::before, .fg-pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--fgc); }
.fg-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; font-size: 12px; line-height: 17px; color: var(--text-2); }
.fg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.metric-xl { font-size: 44px; line-height: 50px; font-weight: 700; }
.fg-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px;
  background: var(--fgt); color: var(--text); font-size: 15px; line-height: 21px; font-weight: 700;
}
.fg-refs { display: flex; flex-direction: column; gap: 2px; }
.fg-ref { display: grid; grid-template-columns: auto 28px 48px; gap: 8px; align-items: baseline; font-size: 14px; line-height: 20px; }
.fg-ref__v { font-weight: 700; text-align: right; }
.fg-bar { width: 100%; height: 42px; overflow: visible; }
.fg-cell { fill: var(--fgc); fill-opacity: var(--fg-dim); }
.fg-cell--on { fill-opacity: 1; }
.fg-tickmark { fill: var(--text); stroke: var(--s1); stroke-width: 1.5; }
/* 批 P2-12a(A1):走勢底色帶五段同一透明度(❌現值段加濃);左緣細色條 = 該段 CNN 色、不透明(色相靠它與區段名認) */
.fgband { fill: var(--fgbc); fill-opacity: var(--fgb-a); }
.fgrail { fill: var(--fgbc); }
.rail-base { fill: var(--s1); }
.band-text.fgz-lab { fill: var(--fglc); }
.band-text.fgz-lab--on { font-weight: 800; }
/* 25 / 50 / 75 細分隔線:深色主題(C 案,主線 10-07 補充)= 彩色細線 —— 25(極度恐懼上緣)紅、50 中性灰、75(極度貪婪下緣)綠,
   用該段區段名的亮色字色(--fglc,由 fgz--N 帶入)、.55 半透明(對底色帶對比約 3.1–3.6,❌搶過走勢線);
   淺色主題照 CNN F&G 網頁 = 灰色實線、淡(與 P2-12a 初版相同) */
.ref-line.ref-line--fgdiv { stroke: var(--fglc, var(--line-strong)); stroke-dasharray: none; opacity: .55; }
:root[data-theme="light"] .ref-line.ref-line--fgdiv, :root[data-theme="paper"] .ref-line.ref-line--fgdiv { stroke: var(--line-strong); opacity: .5; }
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .ref-line.ref-line--fgdiv { stroke: var(--line-strong); opacity: .5; }
}
.mark--text { fill: var(--text); }
.note-text {
  fill: var(--text); font-family: "Archivo", system-ui, sans-serif; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--s1); stroke-width: 3px;
}
.chart--mini { min-height: 56px; }
/* 批 P2-33(VIC 10-14 第 4 點):今日頁 CNN Put/Call 小走勢圖加高(charts.js PC5_MINI_H);先佔位防版面跳動。❌改共用的 .chart--mini(SM/DM 小圖也用) */
.chart.pc5__chart { min-height: 88px; }
.zm { width: 100%; overflow: visible; }
.zm-ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.zm-ln--sm { stroke: var(--blue); }
.zm-ln--dm { stroke: var(--gold); }
.zm-ln--dash { stroke-dasharray: 3 3; }
.zm-dot--sm { fill: var(--blue); }
.zm-dot--dm { fill: var(--gold); }
.zm-dot--hollow { stroke-width: 1.6; }
.zm-dot--hollow.zm-dot--sm { stroke: var(--blue); }
.zm-dot--hollow.zm-dot--dm { stroke: var(--gold); }
.zm-dot--hollow.zm-dot--s1 { fill: var(--s1); }
.zm-dot--hollow.zm-dot--s2 { fill: var(--s2); }
.zm-tag { fill: var(--text-2); font-size: 11px; font-weight: 600; }
.lev-list { display: flex; flex-direction: column; }
.lev-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.lev-item:first-child { border-top: none; padding-top: 2px; }
.lev-item__l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lev-item__name { font-size: 15px; line-height: 21px; font-weight: 600; }
.lev-item__sub { font-size: 12px; line-height: 17px; color: var(--text-3); overflow-wrap: anywhere; }
.lev-item__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.lev-item__v { font-size: 17px; line-height: 22px; font-weight: 700; white-space: nowrap; }
.lev-sum { font-size: 16px; line-height: 26px; font-weight: 700; }
/* 批 P2-33 修正輪:槓桿方塊副標每段各自不斷行(段與段之間的「 · 」才可換行;❌「10-」「06」被拆成兩行) */
.lev-tile__seg { white-space: nowrap; }
.lev-p { flex: none; font-size: 17px; line-height: 22px; font-weight: 700; }
.lev-p--soft { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--text-2); }
.pbar { width: 100%; height: 44px; overflow: visible; }
.pbar-track { fill: var(--s3); }
.pbar-fill { fill: var(--blue); }
.pbar-fill--x { fill: var(--signal); }
.pbar-cell { fill: var(--s3); }
.pbar-cell--on { fill: var(--blue); }
.pbar-cell--x { fill: var(--signal); }
.pbar-tick { fill: var(--text); stroke: var(--s1); stroke-width: 1.5; }
.pbar-lab { fill: var(--text-3); font-size: 12px; }
.pbar-lab--on { fill: var(--text); font-weight: 700; }
.smdm-nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 20px; }   /* 三欄(SM / DM / 判讀),390 寬也不折行 */
.smdm-nums__c { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.smdm-nums .legend__item { font-size: 13px; white-space: nowrap; }
.chart--bar { min-height: 44px; }      /* 分級 / 百分位橫條:❌沿用 .chart 的 120px 最小高度(會在橫條下留一大塊空白) */
.chart--short { min-height: 72px; }
.chip--lg { padding: 4px 12px; color: var(--text); font-size: 15px; line-height: 22px; font-weight: 700; }
/* SM / DM 定版狀態(契約 v2.5,批 P2-8):暫定 = 虛線框(與小圖的虛線段同一語言)、定版 = 實線框;❌漲跌色 */
.chip--prov { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-2); padding: 2px 7px; }
.chip--final { background: var(--s3); border: 1px solid var(--line-strong); color: var(--text); padding: 2px 7px; }
.smdm-status { gap: 8px; align-items: center; }
.smdm-seen { white-space: nowrap; }    /* 「台北 10-06 12:00 確認」整段不折行(390 寬曾折成「10-」/「06」) */
.subbox--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.prose { display: flex; flex-direction: column; gap: 12px; }
.prose__p {
  font-size: 16px; line-height: 28px; color: var(--text-2); max-width: 34em;
  text-align: justify; text-justify: inter-character; overflow-wrap: break-word;
}

/* ── P2-5b 個股分頁(八因子 / 觀察錨刻度圖 / 共識區間 / 四級資金 / 季度柱 / 技術表;契約 v2.3 §16.9)──────────── */
/* 八因子:八格等高(grid-auto-rows: 1fr)、整格可點;大字值一個、白話 1–2 行;原文退回時一般字重(❌整串粗體) */
.ftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.ftile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 112px; padding: 12px;
  border-radius: 10px; background: var(--s2); color: var(--text); text-decoration: none;
}
.ftile--link:hover { background: var(--s3); color: var(--text); }
.ftile__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.ftile__k {   /* 「類別 · 子題」最多兩行(窄螢幕「選擇權 · 隱含波動率」單行會被截) */
  font-size: 13px; line-height: 18px; color: var(--text-3); min-width: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ftile__chev { color: var(--text-3); }
.ftile__big { font-size: 22px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
.ftile__val {
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ftile__hint {
  font-size: 13px; line-height: 19px; color: var(--text-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ftile--raw .ftile__hint { -webkit-line-clamp: 3; }

/* 觀察錨刻度圖 */
.lad-sub { margin-top: -6px; }
.lad-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lad-status__txt { font-size: 14px; line-height: 21px; color: var(--text); }
.lad-svg { width: 100%; overflow: visible; }
.lad-zone--prem { fill: var(--gray); fill-opacity: .14; }
.lad-zone--disc { fill: var(--violet); fill-opacity: .14; }
.lad-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.lad-break { stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; }
.lad-tick { stroke-width: 2; stroke-linecap: round; }
.lad-tick--prem, .lad-tick--near { stroke: var(--text-3); }
.lad-tick--disc { stroke: var(--violet); }
.lad-tick--fve { stroke: var(--violet); stroke-width: 3.5; }
.lad-gapline { stroke: var(--signal); stroke-width: 1.8; stroke-dasharray: 3 3; }
.lad-dot { fill: var(--text); stroke: var(--s1); stroke-width: 2; }
.lad-lead { stroke: var(--text-2); stroke-width: 1.2; stroke-linecap: round; }
.lad-lab, .lad-val, .lad-zlab, .lad-gap { font-variant-numeric: tabular-nums; }
.lad-lab { fill: var(--text-2); font-size: 13px; }
.lad-val { fill: var(--text); font-size: 13px; font-weight: 600; }
.lad-lab--fve, .lad-val--fve { fill: var(--violet); font-weight: 700; }
.lad-lab--px, .lad-val--px { fill: var(--text); font-size: 15px; font-weight: 700; }
.lad-zlab { fill: var(--text-2); font-size: 12px; }
.lad-zlab--disc { fill: var(--violet); }
.lad-zlab--near { fill: var(--text-3); }
.lad-gap { fill: var(--signal); font-size: 13px; font-weight: 700; }
/* 現價貼著某一階時,差距字改放在「現價」標籤下方一行(10-05 紅隊 P3);被推離刻度的階標籤以細線接回刻度 */
.lad-gap--sub { font-size: 12px; }
.lad-lead--rung { stroke: var(--text-3); stroke-width: 1; }

/* 市場共識區間小圖 + 買賣比例文字列 */
.chart--rb { min-height: 74px; }
.rb-svg { width: 100%; overflow: visible; }
.rb-axis { stroke: var(--line); stroke-width: 1; }
.rb-bar { fill: var(--gray); fill-opacity: .5; }
.rb-avg { fill: var(--text); }
.rb-fve { fill: var(--violet); }
.rb-dot { fill: var(--text); stroke: var(--s1); stroke-width: 2; }
.rb-lab { fill: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.rb-lab--px { fill: var(--text); font-weight: 700; }
.rb-lab--fve { fill: var(--violet); }
.rb-lab--soft { fill: var(--text-3); }
.rate-txt { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; line-height: 20px; }

/* 四級資金對稱橫條 */
.chart--dv { min-height: 140px; }
.dv-svg { width: 100%; overflow: visible; }
.dv-name { fill: var(--text-2); font-size: 13px; }
.dv-val { fill: var(--text-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-val--up { fill: var(--rise); }
.dv-val--down { fill: var(--fall); }
.dv-mid { stroke: var(--line-strong); stroke-width: 1; }

/* 柱狀圖:最新一季高亮、其餘變淡;柱下小字;格線;區帶名;每日一點 */
.bar--hi { fill-opacity: 1; }
.bar--dim { fill-opacity: .35; }
.axis-text--hi { fill: var(--text); font-weight: 700; }
.bar-tag { fill: var(--text-3); font-size: 11px; }
.bar-tag--hi { fill: var(--blue); font-weight: 700; }
.grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.band-text { fill: var(--text-2); font-size: 11px; font-weight: 600; }
/* 批 P2-10:區段名壓在折線上時仍可讀(字外加一圈卡片底色描邊;❌改位置) */
.band-text { paint-order: stroke; stroke: var(--s1); stroke-width: 3px; stroke-linejoin: round; }
.mark--blue { fill: var(--blue); }
.mark--gold { fill: var(--gold); }       /* 批 P2-39:Put/Call 一年圖倉比超出圖頂的 ▲ */

/* 籌碼 / 期權 / 技術 / 財報 */
.kvgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.kvgrid--5 .kvgrid__c { padding: 6px; font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.conc--sm { font-size: 15px; line-height: 23px; }
.zone-range { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--text); }
.ztable { display: flex; flex-direction: column; }
.ztable__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px;
}
.ztable__row:first-child { border-top: none; }
.ztable__k { color: var(--text-2); white-space: nowrap; }
.ztable__v { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.ztable__p { text-align: right; white-space: nowrap; }
.kv2__v { color: var(--text); font-weight: 600; }
.zrow-tag { color: var(--text); }
/* 批 P2-37:動能卡最上方「現況:<標籤>」+ 一句理由(只用既有色票;標籤❌漲跌色 —— 只描述狀態,不暗示買賣);
   日 K 十字線讀數沿用估值圖的 .vread 外觀(❌新樣式) */
.tnow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tnow__head { font-size: 15px; line-height: 22px; }
.tnow__k { color: var(--text-2); }
.tnow__lab { color: var(--text); font-weight: 700; }
.tnow__d { color: var(--text-2); font-size: 13px; }       /* 修正輪 P2-3:「(MM-DD 收盤)」 */
.card--fold { padding-top: 6px; padding-bottom: 6px; }
.fold-raw__sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.fold-raw__sum::-webkit-details-marker { display: none; }
.fold-raw__chev { color: var(--text-3); transition: transform .15s ease; }
.fold-raw[open] .fold-raw__chev { transform: rotate(90deg); }
.fold-raw__body { padding: 4px 0 10px; }
.wk__fve { color: var(--text); }
.chip--off { color: var(--text-3); }
.pace-chips { gap: 6px; }
.pace-note { margin-top: -2px; }
.tile--guide .tile__v { overflow-wrap: anywhere; }

@media (min-width: 600px) {
  .ftiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 估值線圖 / 本益比河流圖 / LLM 論點分量 / 讀本 PEACE · Thesis(批 P2-12c,契約 v2 §22)────────────────
   三情境色 = 估值線網頁的 --rpt 青綠(深色主題提亮一階,對卡片底對比 ≥ 3);❌拿漲跌色或品牌 accent 表示三情境。 */
:root, :root[data-theme="dark"] { --rpt: #3fc1a9; --rpt-t: rgba(63, 193, 169, .14); }
:root[data-theme="light"], :root[data-theme="paper"] { --rpt: #0a7d70; --rpt-t: rgba(10, 125, 112, .12); }
@media (prefers-color-scheme: light) { :root[data-theme="system"] { --rpt: #0a7d70; --rpt-t: rgba(10, 125, 112, .12); } }
.ln--thin { stroke-width: 1; }
/* 批 P2-36(同步估值線批 L:以 Morningstar 公允值為主要參照):三情境退為對驗參考 → 三條線變細(基準 2.2 → 1.8、熊 / 牛 1.5 → 1.3,
   筆畫照舊分得開);Morningstar 公允值線改最粗(2.8,.ln.ln--msmain 兩個 class 才蓋得過 .ln--violet)並畫在最上層(series 最後一條)。顏色不改 */
.ln--rpt { stroke: var(--rpt); stroke-width: 1.3; }
.ln--rpt-base { stroke: var(--rpt); stroke-width: 1.8; }
.ln.ln--msmain { stroke-width: 2.8; }
.area-rpt { fill: var(--rpt); fill-opacity: .12; stroke: none; }
.mark--gray { fill: var(--gray); }
.mark--rpt { fill: var(--rpt); }
.mark.mark--rpt-t { fill: var(--s1); stroke: var(--rpt); stroke-width: 1.5; }
.end-label.c-rpt { fill: var(--rpt); }
.vlg { margin-bottom: 8px; }
.vlg .fchip { white-space: normal; text-align: left; height: auto; min-height: 32px; padding: 4px 10px; font-size: 12px; line-height: 17px; }
.vlg .fchip--fixed { cursor: default; }
.vlg .fchip:disabled:not(.fchip--fixed) { opacity: .5; text-decoration: none; cursor: not-allowed; }
.vlg-sw { flex: none; display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--text); }
.vlg-sw--ms { border-top-color: var(--violet); border-top-width: 3px; }   /* 批 P2-36:色塊 = 圖上那條線的縮圖 → 跟著最粗 */
.vlg-sw--avg { border-top: 2px dashed var(--gray); }
.vlg-sw--hilo { border-top: 1px solid var(--gray); }
.vlg-sw--tri { height: 8px; border-top: 2px solid var(--rpt); background: var(--rpt-t); }
.vchart { margin-top: 8px; }
.vread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; margin-top: 6px; padding: 8px 10px;
  border-radius: 10px; background: var(--s2); font-size: 12px; line-height: 18px; }
.vread__head { grid-column: 1 / -1; color: var(--text-2); font-weight: 600; }
.vread__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
/* 批 P2-33(VIC 10-14 第 10b 點):標籤以文字基線對齊(原 center → 標籤沒有子項參與基線對齊,整列基線取到色條下緣,數字被抬高約 3–4px);
   色條自己置中(❌讓它參與基線 —— 空的色條基線在下緣,會把字往下拉) */
.vread__k { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-2); min-width: 0; }
.vread__k > .vlg-sw { align-self: center; }
/* 批 P2-33 第三輪(VIC 10-14 11:0x):MOS 卡右上兩個標籤(不確定性 / MOS 分級)—— 標題不縮;標籤放不下就自己換行、靠右(❌疊在一起) */
.mos-head > .card__title { flex: none; }
.mos-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.vread__v { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (min-width: 600px) { .vread { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vtri-note { color: var(--text-2); }
/* 批 P2-14:估值線圖參照層超出圖面(y 軸夾在價格值域附近)—— 邊緣小箭頭沿用該線的記號色(mark--violet / --gray / --rpt);
   箭頭描一道卡片底色的邊,壓在線上也分得出來;說明句同 .vtri-note 的次要字色 */
.clip-mark { stroke: var(--s1); stroke-width: 1; }
.clip-text { font-size: 10px; }
.vclip-note { color: var(--text-2); }
/* 批 P2-19:Morningstar 星等價位區間 —— 兩條淡色點虛線,沿用 Morningstar 公允值的紫色、較淡(筆畫 = 估值線常數 MSB_DASH,
   由 stroke-dasharray 屬性帶;❌鋪色塊);整段超出圖面時的圖邊標註同色。.ln.ln--msb(兩個 class)才蓋得過 .ln 的線寬 */
/* 批 P2-23(VIC 10-08 a):1.3px / .6 透明在手機深色、與價格 / 共識線交疊處幾乎看不見 → 加粗、不透明,深淺主題各自一色(--msb):
   深色比公允值的紫亮一階(壓在價格線上也看得到)、淺色同公允值紫;與「Morningstar 公允值」(實線)、「機構共識・平均」(灰色長虛線)
   靠線型分(點虛線 = 常數 MSB_DASH)。估值線網頁同一層是 1.2px / .55 —— PWA 刻意較粗(手機縮放後細線消失),顏色族與點線型對齊 */
:root, :root[data-theme="dark"] { --msb: #cdb6ff; }
:root[data-theme="light"], :root[data-theme="paper"] { --msb: #6d3fc0; }
@media (prefers-color-scheme: light) { :root[data-theme="system"] { --msb: #6d3fc0; } }
.ln.ln--msb { stroke: var(--msb); stroke-width: 2.2; opacity: 1; stroke-linecap: butt; }   /* 紅隊 P3-1:圓頭線帽把 2.2px 點線吃成近實線 */
.vlg-sw--msb { border-top: 3px dotted var(--msb); }
.note-text.msb-ovf { fill: var(--msb); }
.vmsb-note, .vmsb-na { color: var(--text-2); }
/* 星等價位讀數的值很長(評級 + 日期 + 兩個門檻價):名稱固定一行(❌被擠成「星等 / 價位」兩行),值自己換行 */
.vread__row[data-k="msb"] .vread__k { flex: none; white-space: nowrap; }
/* 批 P2-23(VIC 10-08 c):讀數區精簡 —— 標題列併價格、三情境一列、機構近半年最高 / 最低一列;星等價位原為跨兩欄小字,
   VIC 10-20 改成與其他列同一種列(值靠右對齊、同字級;門檻價各自不斷開,只在「•」處換行 = .dt-nb) */
.vread__row--head { grid-column: 1 / -1; }
.vread__row--head .vread__head { flex: none; }
.vread__vs { min-width: 0; text-align: right; overflow-wrap: anywhere; color: var(--text-2); }
/* 紅隊 P1-1:只有短值(三情境、近半年最高 / 最低)整項不換行;公允值等可能帶長註記(「年度公允值逆推(近似值)」)的值可換行,❌溢出讀數框 */
.vread__row--tri .vread__it, .vread__row--hilo .vread__it { white-space: nowrap; }
.vread__row[data-k="ms"] .vread__k, .vread__row[data-k="avg"] .vread__k { flex: none; white-space: nowrap; }
.vread__ik { color: var(--text-2); font-weight: 400; }
.pe-b1 { fill: var(--blue); fill-opacity: .07; }
.pe-b2 { fill: var(--blue); fill-opacity: .16; }
.ref-line.ref-line--pe50 { stroke: var(--blue); stroke-dasharray: none; opacity: .75; }
.ref-line.ref-line--fwd { stroke: var(--gold); stroke-dasharray: 1 3; stroke-width: 1.5; opacity: 1; }
.ratebar__na { background: var(--line-strong); opacity: .5; }
.pz-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--s3); margin: 6px 0 4px; }
.pz-seg { display: block; height: 100%; min-width: 4px; }
.pz-seg--up { background: var(--rise); }
.pz-seg--down { background: var(--fall); }
.pz-seg--hold { background: var(--gray); opacity: .6; }
.th-seg--verify { background: var(--accent); }
.th-seg--breaker { background: var(--signal); }
.th-seg--watch { background: var(--gray); opacity: .7; }
.pz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; line-height: 19px; }
.pz-dir--up { color: var(--rise); }
.pz-dir--down { color: var(--fall); }
.pz-dir--hold { color: var(--text-2); }
.pz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pz-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--s2); }
.pz-tiles--moved .pz-tile { border-color: var(--line-strong); }
.pz-tile__name { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.pz-tile__meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; line-height: 17px; }
.pz-lv { color: var(--text-2); }
.pz-lv--pass { color: var(--accent); }
.pz-lv--watch, .pz-lv--fail { color: var(--signal); }
.pz-lv--none { color: var(--text-3); }
.pz-na { margin-top: 6px; }
.th-key { display: inline-flex; align-items: center; gap: 6px; }
.th-key::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--thd); }
.th-key--verify, .th-badge--verify { --thc: var(--accent); --thd: var(--accent); }
.th-key--breaker, .th-badge--breaker { --thc: var(--signal); --thd: var(--signal); }
.th-key--watch, .th-badge--watch { --thc: var(--text-2); --thd: var(--gray); }
.th-grp { margin-top: 12px; }
.th-grp__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.th-badge { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700;
  color: var(--thc); border: 1px solid var(--thd); white-space: nowrap; }
.th-badge--sm { font-size: 11px; padding: 0 7px; line-height: 16px; }
.th-intro { margin: 4px 0 0; }
.th-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.th-item { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 21px; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) { .pz-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 論點分量表「哪個論點最有分量」(批 P2-15,契約 v2 §32;估值線契約 weigh_public §8 方案一,樣稿 output/weigh_mockups_2026-10-07/方案一_對照圖)──
   方向以位置 + 符號表達(◀ 疑慮 / 支持 ▶ / ◆ 爭點;❌▲▼ —— MVP 用它表示漲跌),顏色只是輔助:中性冷暖兩色、等亮度
   (❌紅綠 / 藍橘 / 金 / 青,那些在 MVP 另有語義)。橫條三級:輕 1/3、中 2/3、重滿格;--g = 分量字的欄寬。 */
:root,
:root[data-theme="dark"] {
  --wp-con: #6b8fbc; --wp-pro: #a98553; --wp-con-t: rgba(107, 143, 188, .16); --wp-pro-t: rgba(169, 133, 83, .18);
}
:root[data-theme="light"], :root[data-theme="paper"] {
  --wp-con: #4e719d; --wp-pro: #8a6836; --wp-con-t: rgba(78, 113, 157, .12); --wp-pro-t: rgba(138, 104, 54, .13);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --wp-con: #4e719d; --wp-pro: #8a6836; --wp-con-t: rgba(78, 113, 157, .12); --wp-pro-t: rgba(138, 104, 54, .13);
  }
}
.wp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 0; font-size: 12.5px; line-height: 18px; color: var(--text-2); }
.wp-tag { border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 7px; font-weight: 700; color: var(--text); }
.wp-msg { margin: 0; }
.wp-howto, .wp-who { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-2); background: var(--s2); border-radius: 10px; padding: 10px 12px; }
.wp-who { font-size: 12.5px; line-height: 19px; padding: 8px 12px; }
.wp-howto b, .wp-who b { color: var(--text); }
.wp-howto__t { display: block; font-size: 12.5px; letter-spacing: .04em; margin-bottom: 2px; }
.wp-cov { margin: 0; font-size: 12.5px; line-height: 19px; color: var(--text-2); }
.wp-no {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 50%;
  background: var(--s3); color: var(--text); font-size: 11px; font-weight: 800; margin-right: 5px; vertical-align: 1px;
}
.wp-dmk { display: inline-block; flex: none; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1px;
  background: linear-gradient(45deg, var(--wp-con) 50%, var(--wp-pro) 50%); }
/* 對照圖 */
.wpv { margin: 0; --g: 26px; }
.wpv-head { display: grid; grid-template-columns: 1fr 1fr; font-size: 14px; line-height: 20px; }
.wpv-head b { display: block; font-weight: 800; }
.wpv-head small { display: block; font-weight: 600; font-size: 11.5px; line-height: 16px; color: var(--text-3); }
.wpv-head__l { text-align: right; padding-right: 12px; }
.wpv-head__r { text-align: left; padding-left: 12px; }
.wpv-mk { font-size: 12px; margin: 0 5px; vertical-align: 1px; }
.wpv-mk--con { color: var(--wp-con); }
.wpv-mk--pro { color: var(--wp-pro); }
.wpv-ticks { position: relative; height: 20px; margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--text-3); border-bottom: 1px solid var(--line); }
.wpv-tk { position: absolute; top: 0; transform: translateX(-50%); }
.wpv-xl1 { left: calc(50% - (50% - var(--g)) * .3333); }
.wpv-xl2 { left: calc(50% - (50% - var(--g)) * .6667); }
.wpv-xl3 { left: var(--g); }
.wpv-xr1 { left: calc(50% + (50% - var(--g)) * .3333); }
.wpv-xr2 { left: calc(50% + (50% - var(--g)) * .6667); }
.wpv-xr3 { left: calc(100% - var(--g)); }
.wpv-axis { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--line-strong); }
.wpv-ticks .wpv-axis { top: auto; height: 6px; }
.wpv-rows { list-style: none; margin: 0; padding: 0; }
.wpv-btn {
  display: block; width: 100%; padding: 9px 0 8px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 4px;
  background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer;
}
.wpv-btn:hover, .wpv-btn:focus-visible { background: var(--neutral-t); outline: none; }
.wpv-btn:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.wpv-labrow { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 5px; }
.wpv-lab { display: block; min-width: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; text-wrap: balance; }
.wpv-lab--con { text-align: right; padding: 0 12px 0 2px; }
.wpv-lab--pro { text-align: left; padding: 0 2px 0 12px; }
.wpv-lab--mix { grid-column: 1 / -1; text-align: center; padding: 0 8px; }
.wpv-mixtag { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 0 7px 0 6px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-size: 11px; line-height: 1.5; font-weight: 700; color: var(--text-2); vertical-align: 1px; }
.wpv-strip { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 22px; align-items: center; }
.wpv-sg { position: absolute; inset: 0; pointer-events: none; }
.wpv-g { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line); }
.wpv-half { display: block; min-width: 0; }
.wpv-track { display: flex; align-items: center; width: 100%; }
.wpv-half--l .wpv-track { justify-content: flex-end; }
.wpv-bar { display: block; height: 14px; position: relative; }
.wpv-bar--con { --sc: var(--wp-con); background: var(--wp-con); border-radius: 4px 0 0 4px; margin-right: 1px; }
.wpv-bar--pro { --sc: var(--wp-pro); background: var(--wp-pro); border-radius: 0 4px 4px 0; margin-left: 1px; }
.wpv-w1 { width: calc((100% - var(--g)) * .3333); }
.wpv-w2 { width: calc((100% - var(--g)) * .6667); }
.wpv-w3 { width: calc(100% - var(--g)); }
/* 方向只來自我方深度分析的那一側:斜線(契約 weigh_public §5 / §8) */
.wpv-bar--own { background: repeating-linear-gradient(135deg, var(--sc) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1.5px var(--sc); }
.wpv-wt { flex: none; width: var(--g); text-align: center; font-size: 12px; font-weight: 800; color: var(--text); }
.wpv-dia { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg);
  background: var(--text); border: 2px solid var(--s1); border-radius: 2px; }
.wpv-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.7; color: var(--text-3); }
.wpv-note b { color: var(--text-2); }
.wpv-ownline { display: block; }
.wpv-ownkey { display: inline-block; width: 22px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--text-3) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1.5px var(--text-3); }
/* 完整論點表:≥ 720px 六欄表格;以下一列一卡 */
.wpt { width: 100%; border-collapse: collapse; }
.wpt th { padding: 6px 6px; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 12px; line-height: 17px; font-weight: 700; color: var(--text-3); }
/* overflow-wrap: anywhere(紅隊 P3-1):break-word 不算進表格欄的最小寬,長而不斷字的字串(機構英文名、AI/HPC/… 這類詞)會把欄撐開、表格撐破卡片 */
.wpt td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 0; overflow-wrap: anywhere; }
.wpt-row { scroll-margin-top: 120px; }
.wpt-row--hit td, .wpt-row--hit { background: var(--neutral-t); }
.wpt-claim { font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.wpt-verdict { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.wpt-own { display: block; margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.wpt-wt b { font-size: 14px; margin-right: 6px; }
.wpt-wtx { color: var(--text-3); font-size: 12px; }
.wp-meter { display: inline-flex; gap: 3px; vertical-align: 1px; }
.wp-meter i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-2); }
.wp-meter i.on { background: var(--text-2); }
.wp-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 1px 8px 1px 7px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-size: 12.5px; line-height: 1.5; font-weight: 700; color: var(--text); }
.wp-chip .wp-mk { font-size: 10.5px; }
.wp-chip--con { background: var(--wp-con-t); }
.wp-chip--con .wp-mk { color: var(--wp-con); }
.wp-chip--pro { background: var(--wp-pro-t); }
.wp-chip--pro .wp-mk { color: var(--wp-pro); }
.wp-chip--mix { background: linear-gradient(90deg, var(--wp-con-t), var(--wp-pro-t)); }
.wp-srcs { list-style: none; margin: 0; padding: 0; }
.wp-src { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin: 0 0 7px; padding-left: 9px; border-left: 2px solid var(--line-strong);
  font-size: 12.5px; line-height: 1.45; }
.wp-src--ours { border-left: 2px dashed var(--line); color: var(--text-2); }
.wp-src__nm { font-weight: 700; }
.wp-src__nm, .wp-src__en { min-width: 0; overflow-wrap: anywhere; }   /* 出處名稱欄:長機構名斷在字中(紅隊 P3-1) */
.wp-src--ours .wp-src__nm { font-weight: 600; }
.wp-src__en { color: var(--text-3); font-size: 11.5px; }
.wp-src__note { padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: var(--text-2); }
.wp-src__dt { color: var(--text-2); }
.wp-ev { margin: 2px 0 0; font-size: 11.5px; line-height: 17px; color: var(--text-3); }
.wp-foot { margin: 0 2px; font-size: 11.5px; line-height: 17px; color: var(--text-3); }
@media (max-width: 719px) {
  .wpt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wpt, .wpt tbody { display: block; }
  .wpt-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 8px; padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
  .wpt td { display: block; padding: 0; border: 0; }
  .wpt-row--hit td { background: none; }
  .wpt-no { grid-column: 1; grid-row: 1; }
  .wpt-side { grid-column: 2; grid-row: 1; }
  .wpt-wt { grid-column: 3; grid-row: 1; justify-self: end; }
  .wpt-claim { grid-column: 1 / -1; grid-row: 2; font-size: 15px; margin-top: 2px; }
  .wpt-verdict { grid-column: 1 / -1; grid-row: 3; }
  .wpt-src { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
  .wpt-verdict::before, .wpt-src::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 11px; line-height: 16px;
    font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
}
@media (min-width: 720px) {
  .wpv { --g: 30px; }
  .wpv-lab { font-size: 14px; }
  /* 頁面最寬 720px(卡片內約 656px):序號 / 方向 / 分量 固定窄欄,論點 20%、評語 30%,其餘給引用來源(約 116px,放得下「Morningstar」不斷字) */
  .wpt .wpt-no { width: 24px; }
  .wpt .wpt-side { width: 72px; }
  .wpt .wpt-wt { width: 44px; }
  .wpt .wpt-claim { width: 20%; }
  .wpt .wpt-verdict { width: 30%; }
  .wpt-wtx { display: none; }
  .wpt-wt b { display: block; margin: 0 0 2px; }
}

/* ── 批 P2-29(VIC 10-13):「怎麼讀 ⓘ」說明元件(ui.js infoTip)──────────────────────
   卡底那一行:按鈕在最前,後面接「· 資料截至 … · 來源 …」(行內排版,長句自然換行)。按鈕視覺小、觸控熱區 ≥ 44px(上下負邊距抵掉多出的高度)。
   浮窗浮在卡片內、蓋住下方內容:只有含 (i) 的卡在開啟時加 tip-host(❌改全站 .card)當定位參照;浮窗本身留在卡底那一行、緊接按鈕之後(❌搬家);
   z-index 低於頁首 / 底部分頁列 / 浮水印。
   只用既有色票(深 / 淺色三套自動跟);字級沿用 .explain。 */
.tip-host { position: relative; }
.tipline { display: block; }
.tipbtn {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  min-height: 44px; min-width: 44px; margin: -13px 0; padding: 0 2px;
  border: 0; background: none; color: var(--accent); font-size: inherit; line-height: inherit; font-weight: 500;
}
.tipbtn .ico { width: 14px; height: 14px; }
.tipbtn[aria-expanded="true"] { color: var(--accent-hover); }
.tip-pop {
  position: absolute; left: 16px; right: 16px; z-index: 10;
  max-height: min(60vh, 360px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  background: var(--s2); color: var(--text-2); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  /* 開啟時捲進畫面要避開的頁首:以個股頁為準(頁首 52 + 分頁列 45 + 間距 8)+ iPhone 瀏海;底部 = 分頁列 64 + 邊線 + 間距 + 底部安全區。
     往上 / 往下開的判斷另由 ui.js 開啟當下實量頁首與分頁列(批 P2-29 修正輪,紅隊 P3-4) */
  scroll-margin-top: calc(105px + env(safe-area-inset-top)); scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom));
}
.tip-pop[hidden] { display: none; }
.tip-pop > * { flex: none; }
.tip-pop b { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .tip-pop:not([hidden]) { animation: tip-in .12s ease-out; }
}
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 券商口徑本益比卡(批 P2-36,契約 v2 §42;VIC 10-14 樣稿 v3)── 只用既有色票(深 / 淺 / 紙質 / 跟隨系統自動跟)。
   位置量表沿用 .gauge,但軌道❌用 IVR 的青→金漸層(那是「便宜 / 貴」語義;這裡是自身歷史分位,不著色);空心點 = 只算獲利日的分位 */
.bkp-head { justify-content: flex-end; gap: 6px; min-width: 0; }
.bkp-verdict { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-2); }
.bkp-vh { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 13px; }
.gauge__track.bkp-trk { background: var(--s3); }
.gauge__mark.gauge__mark--o { width: 10px; height: 10px; top: 5px; margin-left: -5px; border-radius: 999px; background: var(--s1);
  border: 2px solid var(--text); }
.bkp-g { margin-top: 2px; }
.bkp-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
.bkp-k { font-size: 13px; line-height: 19px; color: var(--text-2); }
.bkp-t { display: block; height: 10px; border-radius: 5px; background: var(--s3); overflow: hidden; }
.bkp-t > i { display: block; height: 10px; border-radius: 5px; }
.bkp-p { background: var(--accent); }
.bkp-m { background: var(--text-3); }
.bkp-x { text-align: right; font-weight: 700; font-size: 13px; }
.bkp-kv > .kv__k { flex: none; }                    /* 鍵名❌被值擠成兩行(「全美股排 / 名」),值自己換行 */
.bkp-kv > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dt-nb { white-space: nowrap; }                     /* MOS 卡公允值 / 報告日期整段不斷開 */
.subbox.bkp-warn { background: var(--signal-t2); }
.bkp-warn .explain { color: var(--text); }
.bkp-warn .ico { display: inline-block; vertical-align: -2px; }

/* ── 色彩工具(批 P2-5b:移到檔案最後)──────────────────────────────────
   工具類必須勝過同權重的元件色(如 .caption / .explain 的灰字):放在最後,同權重時後者勝。
   修前 bug:逐機構目標價「num caption c-up」的升降色被 .caption 蓋成灰色;「caption c-2」顯示成更淡的 text-3。 */
.c-up { color: var(--rise); }
.c-down { color: var(--fall); }
.c-flat { color: var(--text-2); }
.c-na { color: var(--text-3); }
.c-text { color: var(--text); }
.c-2 { color: var(--text-2); }
.c-3 { color: var(--text-3); }
.c-accent { color: var(--accent); }
.c-violet { color: var(--violet); }
.c-blue { color: var(--blue); }
.c-gold { color: var(--gold); }
.c-signal { color: var(--signal); }
.bg-up { background: var(--rise-t); }
.bg-down { background: var(--fall-t); }
.bg-flat, .bg-na { background: var(--neutral-t); }