/* ============================================================
   Alpha Trade — 前端設計系統 v4 (Material 3 Expressive, M3E)
   深色基調 Obsidian Metallic 保留 · M3 Surface Elevation 層次
   數字全部 tabular-nums 等寬 · 零框架 · DOM 掛載點零破壞
   ============================================================ */

/* ---------- 0. M3 Expressive Design Tokens (注入) ---------- */
:root {
  /* 品牌與語意色彩 (基於現況調和) */
  --md-sys-color-primary: #00E599;         /* 買進綠 / 達成動能 */
  --md-sys-color-on-primary: #003822;
  --md-sys-color-primary-container: rgba(0, 229, 153, 0.12);
  --md-sys-color-on-primary-container: #5CFFB9;

  --md-sys-color-warning: #FBBF24;         /* 觀望琥珀黃 */
  --md-sys-color-on-warning: #422006;
  --md-sys-color-warning-container: rgba(251, 191, 36, 0.12);
  --md-sys-color-on-warning-container: #FDE68A;

  --md-sys-color-error: #F87171;           /* 風險/停損紅 */
  --md-sys-color-on-error: #450A0A;
  --md-sys-color-error-container: rgba(248, 113, 113, 0.12);
  --md-sys-color-on-error-container: #FECACA;

  --md-sys-color-brand: #3B82F6;           /* 品牌藍 / CTA */

  /* M3 表層階層 (Obsidian Metallic 深色層次) */
  --md-sys-color-surface: #0E1217;
  --md-sys-color-surface-dim: #090C10;
  --md-sys-color-surface-container-low: #131820;
  --md-sys-color-surface-container: #19202A;
  --md-sys-color-surface-container-high: #212B38;
  --md-sys-color-surface-container-highest: #2C3849;

  --md-sys-color-on-surface: #F0F4F8;
  --md-sys-color-on-surface-variant: #94A3B8;
  --md-sys-color-outline: #334155;
  --md-sys-color-outline-variant: #1E293B;

  /* M3 Expressive 造型半徑 (大圓角、膠囊造型) */
  --md-shape-corner-xs: 4px;
  --md-shape-corner-s: 8px;
  --md-shape-corner-m: 14px;
  --md-shape-corner-l: 20px;
  --md-shape-corner-xl: 28px;
  --md-shape-corner-full: 9999px;

  /* M3 Expressive 動效曲線 (Spring 彈性曲線) */
  --md-motion-spring: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-motion-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --md-duration-short: 150ms;
  --md-duration-medium: 300ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* 按壓回饋 / 進場 */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* 抽屜類 (預留) */

  /* ---- v4 alias: 既有 token 對齊 M3E (讓全 file 下游規則不動即升級) ---- */
  --bg-app: var(--md-sys-color-surface-dim);
  --bg-surface: var(--md-sys-color-surface-container-low);
  --bg-surface-elevated: var(--md-sys-color-surface-container);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);

  --buy-green: var(--md-sys-color-primary);
  --buy-green-surface: var(--md-sys-color-primary-container);
  --buy-green-border: rgba(0, 229, 153, 0.28);
  --buy-green-border-strong: rgba(0, 229, 153, 0.4);
  --wait-amber: var(--md-sys-color-warning);
  --wait-amber-surface: var(--md-sys-color-warning-container);
  --wait-amber-border: rgba(251, 191, 36, 0.28);
  --wait-amber-border-strong: rgba(251, 191, 36, 0.4);
  --muted-surface: rgba(148, 163, 184, 0.12);
  --muted-border: rgba(148, 163, 184, 0.3);
  --risk-red: var(--md-sys-color-error);
  --risk-red-surface: var(--md-sys-color-error-container);
  --risk-red-border: rgba(248, 113, 113, 0.22);
  --momentum: #8b5cf6;

  /* 對比修正(第二輪): #3B82F6 當文字色在 #1D2C42 上只有 3.8:1, 未達 WCAG AA 4.5:1。
     --brand-primary 供「文字/邊框/強調」使用, 調亮為 #60A5FA (在 #1D2C42 上約 5.5:1、#212B38 上約 5.6:1);
     --brand-cta 供「實心按鈕底」使用, 原 #3B82F6 底+#F0F4F8 字只有 3.3:1, 改 #1D4ED8 後約 6.1:1 */
  --brand-primary: #60A5FA;
  --brand-cta: #1D4ED8;
  --brand-primary-hover: #1E40AF;
  --brand-surface: rgba(59, 130, 246, 0.12);
  --brand-glow: rgba(59, 130, 246, 0.35);

  /* 對比修正(第二輪): 原 --text-secondary #94A3B8、--text-muted #64748B(深底僅 3.0~4.1:1)、--text-disabled #475569(#090C10 上僅 2.6:1)。
     新值於 #090C10 / #0A0E14 / #19202A / #212B38 皆 ≥4.5:1:
     secondary #B0BCCD (#212B38 上約 7.4:1) · muted #94A3B8 (#212B38 上約 5.6:1, #090C10 上約 7.6:1)
     · disabled #7C8B9F (僅用於 #090C10 底的頁尾, 約 5.6:1)。主要文字 #F0F4F8 不動 */
  --text-primary: var(--md-sys-color-on-surface);
  --text-secondary: #B0BCCD;
  --text-muted: #94A3B8;
  --text-disabled: #7C8B9F;
  /* 價格方向色 (2026-10-15): 使用者決定維持綠漲紅跌(不做台股紅漲綠跌)。
     若日後要改台股慣例, 只需翻這兩個值; 注意 --px-down 不要用 --buy-green, 否則「跌」與「可買」同色。
     font-weight 800: index.html 只載 400/500/700, 800 會被瀏覽器映射到 700, 不會壞(刻意不逐處改)。 */
  --px-up: var(--buy-green);
  --px-down: #F87171;

  --radius-xs: var(--md-shape-corner-xs);
  --radius-sm: var(--md-shape-corner-s);
  --radius-md: var(--md-shape-corner-m);
  --radius-lg: var(--md-shape-corner-l);
  --radius-xl: var(--md-shape-corner-xl);
  --radius-pill: var(--md-shape-corner-full);

  --shadow-card: 0 6px 24px -3px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sheet: 0 -10px 34px rgba(0, 0, 0, 0.8);
  /* 去光暈(第二輪): 原零偏移綠色光暈 0 0 18px 被判定為 AI 風霓虹; 改為帶 y 偏移的中性黑色層次陰影, 強調改由 .is-buy 的 1px 綠邊框負責 */
  --glow-buy: 0 4px 14px rgba(0, 0, 0, 0.35);

  /* 字級階梯 (2026-10-15): 新規則請用這組; 舊規則逐步遷移 */
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 22px; --fs-5: 28px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  --safe-top: env(safe-area-inset-top);
  --topbar-h: 60px;
  --navbar-h: 64px;
}
/* 台股慣例(紅漲綠跌): 由設定開關切換, 只覆寫價格方向, 決策綠與風險紅不受影響 */
:root[data-px="tw"] { --px-up: #F87171; --px-down: #34D399; }

/* ---------- 1. 基礎 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* 字體升級 (2026-10-15): 改用 Noto Sans TC (index.html 載 400/500/700), 台灣繁體字形較一致; 數字用 .tnum 的 tabular-nums 對齊, 不另外載等寬字型 */
html, body { background: var(--bg-app); color: var(--text-secondary); font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif; }
html { overscroll-behavior-y: contain; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; /* 先 vh 當舊機退路, 再 dvh */ max-width: 480px; margin: 0 auto;
  padding: calc(var(--topbar-h) + var(--safe-top) + 8px) env(safe-area-inset-right) calc(var(--navbar-h) + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
.hidden { display: none !important; }
button { font-family: inherit; }
/* 觸控基礎層 (2026-10-15 稽核 2-6): :where() 特異性為 0, 不會蓋掉既有規則; 個別規則的 transition 已移除避免蓋掉這裡的 transform 過渡 */
:where(button, summary, .op-item, .news-item, .nav-item, .seg, .chip-action) {
  touch-action: manipulation; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  transition: transform 140ms var(--ease-out), background-color 150ms var(--ease-out),
              border-color 150ms var(--ease-out), color 150ms var(--ease-out), opacity 150ms var(--ease-out);
}
:where(button:not(:disabled), summary):active { transform: scale(.97); }
:where(.op-item, .news-item):active { transform: scale(.985); }   /* 大塊面積用較小縮放 */
.ni-full, .stats-note, .sheet-desc { -webkit-user-select: text; user-select: text; }   /* 長文要能複製 */
/* 金融等寬數字: 價格/股數/金額 用 tabular figures (全部數值欄強制) */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- 2. 頂部 App Bar ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  height: calc(var(--topbar-h) + var(--safe-top)); display: flex; align-items: center; justify-content: space-between;
  padding: var(--safe-top) calc(var(--space-md) + env(safe-area-inset-right)) 0 calc(var(--space-md) + env(safe-area-inset-left)); background: var(--md-sys-color-surface-dim);
  border-bottom: 1px solid var(--border-subtle); z-index: 50; }
.brand { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px;
  /* 原本漸層文字(background-clip:text)屬裝飾性 AI 痕跡, 改為單色主品牌色 */
  color: var(--brand-primary); }
.brand .dot { font-weight: 500; color: var(--text-primary); }
.topbar-actions { display: flex; gap: var(--space-sm); align-items: center; }
.icon-btn { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  width: 40px; height: 40px; border-radius: 50%; font-size: 16px; cursor: pointer; position: relative; }
.icon-btn::after { content: ""; position: absolute; inset: -2px; }   /* 40+4=44px 觸控區, 8px 間距內不重疊 */
.icon-btn .ico { display: block; width: 20px; height: 20px; margin: auto; }   /* inline SVG 頂欄圖示 */
.icon-btn.is-in::before { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--buy-green); }   /* 已登入小綠點; 不動 ::after 觸控區 */
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--md-sys-color-surface-container-high); } }
/* 按鈕底改 --brand-cta(#1D4ED8)+ #F0F4F8 字 = 約 6.1:1 (原 #3B82F6 底僅 3.3:1) */
.upgrade-btn { background: var(--brand-cta); color: var(--md-sys-color-on-surface); border: none; border-radius: var(--md-shape-corner-full);
  font-size: 12px; font-weight: 700; height: 34px; padding: 0 14px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .upgrade-btn:hover { background: var(--brand-primary-hover); } } /* #1E40AF + #F0F4F8 約 8.2:1 */

/* ---------- 3. 底部導覽 ---------- */
.navbar { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  height: calc(var(--navbar-h) + env(safe-area-inset-bottom)); display: flex;
  background: var(--md-sys-color-surface); border-top: 1px solid var(--border-subtle);
  z-index: 50; padding-bottom: env(safe-area-inset-bottom); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: none; border: none; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.nav-item .ni-ico { display: block; width: 20px; height: 20px; }   /* inline SVG, stroke=currentColor → 選中態顏色會作用在圖示上 */
.nav-item.active { color: var(--brand-primary); font-weight: 700; }

/* ---------- 4. 畫面容器 ---------- */
main { padding: var(--space-md); }
.view { display: none; }
.view.active { display: block; }
#view-decision.active { padding-bottom: calc(64px + 56px); }
.page-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-sm); }
.page-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-md); line-height: 1.5; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin: var(--space-lg) 0 var(--space-sm); }
.section-head h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* ---------- 5. 搜尋 + 熱門 ---------- */
.searchbar { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }
.searchbar input { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-primary); font-size: 16px; padding: 14px 16px; outline: none;
  transition: border-color var(--md-duration-short) var(--md-motion-standard), box-shadow var(--md-duration-short) var(--md-motion-standard); }
.searchbar input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-glow); }
.searchbar button { width: 52px; border: none; border-radius: var(--radius-md); background: var(--brand-cta); /* 同 upgrade-btn: 對比 3.3→約 6.1:1 */
  color: var(--md-sys-color-on-surface); font-size: 18px; cursor: pointer; }
.searchbar button .ico { display: block; width: 20px; height: 20px; margin: auto; }
.hot { display: flex; gap: var(--space-sm); overflow-x: auto; padding-bottom: 4px; padding-right: 28px; margin-bottom: var(--space-md);
  /* 右緣漸隱 = 「可左右滑動」提示; padding-right 讓最後一顆能滑到漸隱區之外 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.hot::-webkit-scrollbar { display: none; }
.hot button { flex-shrink: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .hot button:hover { background: var(--md-sys-color-surface-container); } }
.hot button small { color: var(--text-muted); }

/* ---------- 6. 市場氛圍狀態條 ---------- */
.status-capsule { display: flex; align-items: center; gap: 8px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 10px 14px;
  margin-bottom: var(--space-md); font-size: 13px; color: var(--text-secondary); }
.gate-src { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }   /* 技術名詞放這裡, 不放主句 */

/* 探索頁頂部: 單行摘要(最差燈號), 點開才展開兩條完整閘門 */
.gate-stack { margin-bottom: var(--space-md); }
.gate-stack .status-capsule { margin-bottom: 0; }
.gate-fold > summary { list-style: none; cursor: pointer; justify-content: space-between; }
.gate-fold > summary::-webkit-details-marker { display: none; }
.gate-fold .gate-more { color: var(--brand-primary); font-size: 12px; font-weight: 600; flex: none; }
.gate-fold .gate-more::after { content: " ▸"; }
.gate-fold[open] .gate-more::after { content: " ▾"; }
.gate-body { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
#explore-list .seg-wrap { margin-top: 12px; }

/* ---------- 7. 探索列表 (潛力股主體) ---------- */
.seg-wrap { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); }
.seg { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  padding: 10px 0; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; font-weight: 600; }
.seg.sel { background: var(--brand-surface); border-color: var(--brand-primary); color: var(--brand-primary); }
.explore-list .screen-layer { font-weight: 700; margin: 14px 0 6px; color: var(--text-primary); font-size: 15px; }
.howto { background: var(--bg-surface); border-radius: var(--radius-md); padding: 9px 12px; margin: 4px 0 6px; color: var(--text-secondary); font-size: var(--fs-2); line-height: 1.6;
  /* 原本 3px 側邊色條是 AI 痕跡, 改為整圈 2px 細框(品牌色 30%)+ 前置圓點, 保留「提示」語意 */
  border: 1px solid rgba(59,130,246,.30); }
.howto::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); margin-right: 7px; vertical-align: middle; }
.op-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  margin-bottom: 8px; cursor: pointer; }
.op-item:active { border-color: var(--brand-primary); }
.row-bell { background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 13px; padding: 3px 7px; margin-left: 6px; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
.row-bell, .unfollow { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.cred-badge, .frame-toggle, .ni-toggle, .ni-refresh, #restore-pro-btn { min-height: 32px; }   /* 緊鄰同排元件, 用真實尺寸而非偽元素 */
.row-bell:disabled { opacity: .7; }
.news-item.loadable { border: 1px dashed var(--border-subtle); }
.news-item.loadable:active { border-color: var(--brand-primary); }
.ni-refresh { background: transparent; border: 1px solid var(--border-subtle); color: var(--brand-primary); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; margin-right: 8px; }
/* 過期卡: 原 3px 琥珀側邊條是 AI 痕跡, 改整圈 2px 琥珀細框(30%)+ 標題前 7px 琥珀圓點, 保留「非即時」語意 */
.news-item.stale { border: 2px solid var(--wait-amber-border); }
.news-item.stale .ni-head b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wait-amber); margin-right: 6px; vertical-align: middle; }
/* 出場守則: 原 3px 琥珀側邊條改整圈 2px 細框(30%)+ 前置琥珀圓點, 保留「觀望/參考」語意 */
.exit-only-rule::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wait-amber); margin-right: 7px; vertical-align: middle; }
.exit-only-rule { background: var(--wait-amber-surface); border: 1px solid var(--wait-amber-border); border-radius: 8px; padding: 9px 11px; margin: 8px 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.exit-only-rule b { color: var(--text-primary); }
.op-left { min-width: 0; flex: 1; }
.op-name b { color: var(--text-primary); font-size: 15px; }
.op-name small { color: var(--text-muted); display: block; font-size: 12px; margin-top: 2px; }
.op-watch { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.op-watch .hit { color: var(--wait-amber); font-weight: 600; }
.op-item.lit { border-color: var(--wait-amber-border); }
.op-warn { font-size: 12px; line-height: 1.45; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
.op-warn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--wait-amber); margin-right: 6px; vertical-align: middle; }
.op-warn.op-warn-stop { color: var(--risk-red); font-weight: 600; }
.op-warn.op-warn-stop::before { background: var(--risk-red); }

/* 突破傾向徽章 (opRow) */
.cred-badge { display: inline-flex; align-items: center; padding: 6px 4px; border-radius: 999px;
  font-size: 12px; font-weight: 700; margin-right: 2px; cursor: pointer; background: none; border: 0; }
.cred-badge.cred-high { color: var(--buy-green); }
.cred-badge.cred-mid  { color: var(--wait-amber); }
.cred-badge.cred-low  { color: var(--text-muted); }
.cred-badge.bub:active { transform: scale(.92); }   /* 保留: .cred-badge 是 span, 不在統一的 :where 清單內 */
.cred-head { text-align: center; padding: 10px 0 14px; }
.cred-big { font-size: 20px; font-weight: 800; }
.cred-big.cred-high { color: var(--buy-green); }
.cred-big.cred-mid  { color: var(--wait-amber); }
.cred-big.cred-low  { color: var(--text-muted); }
.cred-score { font-size: var(--fs-2); color: var(--text-muted); margin-top: 4px; }
.cred-note { font-size: var(--fs-2); line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
.cred-axes { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
.cred-ax { display: grid; grid-template-columns: 58px 44px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.cred-ax .cr-bar { display: block; height: 6px; background: var(--md-sys-color-outline-variant); border-radius: 6px; overflow: hidden; }
.cred-ax .cr-bar j { display: block; height: 100%; background: linear-gradient(90deg, var(--buy-green), var(--md-sys-color-on-primary-container)); border-radius: 6px; }
.cred-fund { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--md-sys-color-outline-variant); font-size: 13px; }
.cred-frow { display: flex; justify-content: space-between; }
.cred-frow b { font-variant-numeric: tabular-nums; }
.cred-warn { font-size: var(--fs-2); color: var(--wait-amber); padding: 10px 12px; background: var(--wait-amber-surface); border-radius: 12px; line-height: 1.5; }
.btn-close { margin-top: 12px; width: 100%;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }

/* 狀態膠囊 */
.sig { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 12px; white-space: nowrap; }
.sig::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sig-buy { background: var(--buy-green-surface); color: var(--buy-green); border: 1px solid var(--buy-green-border); }
.sig-wait { background: var(--wait-amber-surface); color: var(--wait-amber); border: 1px solid var(--wait-amber-border); }
.sig-risk { background: var(--risk-red-surface); color: var(--risk-red); border: 1px solid var(--risk-red-border); }
.sig-idle { background: var(--muted-surface); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.sig-mom { background: rgba(139,92,246,0.1); color: var(--momentum); border: 1px solid rgba(139,92,246,0.3); }

/* ---------- 抄底雷達 (決策卡手風琴, 2026-09-22) ---------- */
.detail-accordion summary .rl-bb { display: inline-block; margin-left: 6px; background: var(--brand-surface);
  border: 1px solid var(--brand-primary); border-radius: var(--radius-pill); padding: 1px 8px;
  font-size: 12px; color: var(--brand-primary); font-weight: 700; }
.detail-accordion summary .rl-bb.muted { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-surface); }
.acc-content .rb-lead { font-size: 13.5px; color: var(--text-primary); line-height: 1.5; margin-bottom: 10px; }
.acc-content .rb-grid { display: flex; flex-direction: column; gap: 6px; }
.acc-content .rb-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); font-size: 12.5px; }
.acc-content .rb-item.ok { background: var(--buy-green-surface); border-color: var(--buy-green-border); }
.acc-content .rb-ico { flex-shrink: 0; width: 20px; text-align: center; font-weight: 800; }
.acc-content .rb-item.ok .rb-ico { color: var(--buy-green); }
.acc-content .rb-k { flex-shrink: 0; width: 44px; color: var(--text-secondary); font-weight: 600; }
.acc-content .rb-d { flex: 1; color: var(--text-muted); line-height: 1.4; }
.acc-content .rb-stop { font-size: 12px; color: var(--risk-red); margin-top: 10px; line-height: 1.5; }

/* 蓄勢中(早期量能)層級 */
.explore-list .screen-layer .layer-note { font-size: 12px; line-height: 1.45; color: var(--text-muted); font-weight: 400; margin-left: 6px; }


/* ---------- 8. 決策卡 ---------- */
.decision-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-lg);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); margin-bottom: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-md); }
/* 卡片統一以 gap 排版, 直接子層的上下 margin 歸零(區塊內部間距不動) */
.decision-card > .dc-head, .decision-card > .dc-summary, .decision-card > .dc-price, .decision-card > .dc-trend,
.decision-card > .frame-toggle, .decision-card > .risk-banner, .decision-card > .warn-banner,
.decision-card > .buy-zone, .decision-card > .sig-box, .decision-card > .detail-accordion,
.decision-card > .sig.dc-verdict { margin-top: 0; margin-bottom: 0; }
.decision-card > .frame-toggle, .decision-card > .buy-zone { align-self: flex-start; }
.decision-card.is-buy { border-color: var(--buy-green-border); box-shadow: var(--glow-buy); }
.dc-head { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: var(--space-sm); }
/* .sig.dc-verdict (0,2,0) 勝過 .sig 的 nowrap (0,1,0), 判詞才能換行 */
.sig.dc-verdict { display: flex; width: 100%; padding: 14px 16px; border-radius: var(--radius-md);
  font-size: var(--fs-4); font-weight: 700; white-space: normal; margin-bottom: var(--space-sm); }
.sig.dc-verdict.sig-idle { color: var(--text-primary); }
.dc-prevbo { font-size: var(--fs-2); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--space-sm); }
.sig .sig-d { margin-left: 5px; font-size: .85em; opacity: .75; font-weight: 500; font-style: normal; }
.dc-sym { color: var(--text-muted); font-weight: 600; font-size: 13px; }
.dc-name { font-size: 18px; color: var(--text-primary); font-weight: 700; }

/* 公司名 + 代號 (代號灰色小字) */
.dc-code, .ni-code { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.frame-toggle { margin: 0 0 var(--space-md); background: none; border: 1px solid var(--brand-primary); color: var(--brand-primary);
  border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }

/* 最近看過名稱載入中 */
.recent-loading { color: var(--text-muted); font-size: 12px; }

.ni-head .ni-code { font-size: 12px; }

.mkt { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.mkt.live { color: var(--buy-green); }
.dc-price { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums; }
.dc-trend { font-size: 13px; margin: 6px 0 var(--space-md); }
.op-mid small.up, .dc-trend .up, .idx-chg.up { color: var(--px-up); }
.op-mid small.down, .dc-trend .down, .idx-chg.down { color: var(--px-down); }
.dc-summary { font-size: var(--fs-2); font-weight: 500; color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-md); }

/* 消息面風險警告條 */

.buy-zone { display:inline-flex; align-items:center; gap:6px; margin:8px 0 0; padding:7px 14px;
  border-radius:999px; font-size:12.5px; font-weight:700; }
.vol-line { display:inline-flex; align-items:center; gap:6px; margin:6px 0 0; padding:5px 12px;
  border-radius:999px; font-size:12px; font-weight:600; }
.vol-boom { color:var(--buy-green); background:var(--buy-green-surface); border:1px solid var(--buy-green-border-strong); }
.vol-up { color:var(--md-sys-color-on-primary-container); background:var(--buy-green-surface); }
.vol-flat { color:var(--text-muted); background:var(--muted-surface); }
.buy-zone.bz-ok { color:var(--buy-green); background:var(--buy-green-surface); border:1px solid var(--buy-green-border-strong); }
.buy-zone.bz-over { color:var(--wait-amber); background:var(--wait-amber-surface); border:1px solid var(--wait-amber-border-strong); }
.buy-zone.bz-wait { color:var(--text-muted); background:var(--muted-surface); border:1px dashed var(--muted-border); }

.warn-banner { background: var(--wait-amber-surface); border: 1px solid var(--wait-amber-border);
  color: var(--wait-amber); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px;
  font-weight: 600; line-height: 1.5; margin-bottom: var(--space-md); }
.risk-banner { background: var(--risk-red-surface); border: 1px solid var(--risk-red-border);
  color: var(--risk-red); border-radius: var(--radius-md); padding: 10px 12px;
  font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: var(--space-md); }


/* 風控承諾盒 */
.risk-box { background: var(--md-sys-color-surface-container-high); /* 原 3px 紅色側邊條是 AI 痕跡, 改整圈 2px 紅色細框(30%)+ 標題前紅點, 保留「風險」語意 */
  border: 1px solid var(--risk-red-border);
  border-radius: var(--radius-md); padding: 14px 16px; margin: var(--space-md) 0; }
.risk-box-header span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--risk-red); margin-right: 6px; vertical-align: middle; }
.risk-box-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px;
  color: var(--text-secondary); font-weight: 600; margin-bottom: 12px; }
.text-risk { color: var(--risk-red) !important; }

.row { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.row:last-child { border-bottom: none; }
.row .k { color: var(--text-muted); flex-shrink: 0; width: 76px; font-weight: 600; }
.row.ob-warn .k { color: var(--risk-red); }
.row.ob-warn .v { color: var(--risk-red); }
.row .v { flex: 1; color: var(--text-secondary); }

.detail-accordion { margin-top: var(--space-md); border-top: 1px solid rgba(255,255,255,0.04); padding-top: var(--space-sm); }
.detail-accordion summary { color: var(--brand-primary); font-size: 14px; cursor: pointer; padding: 8px 0; font-weight: 600; list-style: none; }
.detail-accordion summary::-webkit-details-marker { display: none; }
.detail-accordion summary::before { content: "▸ "; }
.detail-accordion[open] summary::before { content: "▾ "; }
.acc-content { padding: var(--space-sm) 0; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.acc-content ul { padding-left: 18px; }
.acc-content li { margin-bottom: 6px; }

/* ---------- 固定底部操作列 ---------- */
.cta-bar { position: fixed; bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom)); left: 0; right: 0;
  max-width: 480px; margin: 0 auto; display: flex; gap: var(--space-sm); padding: 10px var(--space-md);
  background: var(--md-sys-color-surface); border-top: 1px solid var(--border-subtle); z-index: 40; }
/* 主要按鈕基底(.btn-primary / .btn-close 共用) */
.btn-primary, .btn-close, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 16px; border: none; border-radius: var(--radius-xl);
  font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer;
  transition: background var(--md-duration-short) var(--md-motion-standard), transform var(--md-duration-short) var(--md-motion-spring); }
.btn-primary:active, .btn-close:active, .btn-ghost:active { transform: scale(0.97); }
/* 按鈕底改 --brand-cta: #1D4ED8 + #F0F4F8 約 6.1:1 (原 3.3:1) */
.btn-primary { flex: 2; background: var(--brand-cta); color: var(--md-sys-color-on-surface); }
.btn-primary:active { background: var(--brand-primary-hover); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-ghost { flex: 1; background: var(--md-sys-color-surface-container); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
/* 底部操作列兩顆等寬, 判詞切換主/次時不跳寬 */
.cta-bar > .btn-primary, .cta-bar > .btn-ghost { flex: 1; }

/* ---------- 9. Bottom Sheet ---------- */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity var(--md-duration-medium) var(--md-motion-standard); touch-action: none; }
.sheet-overlay.show { opacity: 1; pointer-events: auto; }
/* 離場(預設狀態的過渡) 220ms, 進場(.show) 300ms. visibility 在離場結束後才切成 hidden, 所以收起的 sheet 不可點、不可聚焦 */
.sheet { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
  background: var(--md-sys-color-surface-container); border-radius: var(--md-shape-corner-xl) var(--md-shape-corner-xl) 0 0; padding: var(--space-lg);
  box-shadow: var(--shadow-sheet); z-index: 70; transform: translateY(100%); visibility: hidden;
  transition: transform 220ms var(--ease-drawer), visibility 0s linear 220ms;
  max-height: 88vh; max-height: 88dvh; /* dvh 不支援的舊機退回 vh */
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); }
.sheet.show { transform: translateY(0); visibility: visible; transition: transform 300ms var(--ease-drawer), visibility 0s; }
/* sticky: 捲動時固定在頂端; 上下各 24px 底色用來蓋住下方捲過的內容(版面高度與原本 24+4+24 相同) */
.sheet-grab { position: sticky; top: 0; z-index: 1; height: 52px; margin: calc(-1 * var(--space-lg)) 0 0; touch-action: none; cursor: grab;   /* 唯一吃 pointer 事件的拖曳區(app.js 拖曳關閉) */
  background-color: var(--md-sys-color-surface-container);
  background-image: linear-gradient(var(--md-sys-color-surface-container-high), var(--md-sys-color-surface-container-high));
  background-repeat: no-repeat; background-size: 40px 4px; background-position: center var(--space-lg); }
.sheet h3 { font-size: 17px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.sheet .sheet-desc { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-md); line-height: 1.5; }
.sheet .upgrade-list { margin: 0 0 var(--space-md) 0; padding: 0; list-style: none; }
.sheet .upgrade-list li { font-size: 13px; color: var(--text-secondary); padding: 6px 0 6px 22px; position: relative; }
.sheet .upgrade-list li::before { content: "✓"; position: absolute; left: 0; color: var(--buy-green); font-weight: 800; }
.sheet .upgrade-price-big { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.sheet .upgrade-price-big b { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.sheet .upgrade-price-big span { font-size: 13px; color: var(--text-secondary); }
.sheet .upgrade-legal { font-size: 12px; /* 11px 內文過小 → 12px(僅改此處與 upgrade-tnc 兩段法務說明) */ color: var(--text-muted); margin-bottom: var(--space-sm); line-height: 1.5; }
.sheet .upgrade-tnc { font-size: 12px; /* 同上: 11px → 12px */ color: var(--text-muted); border: 1px solid var(--border-subtle);
  background: var(--md-sys-color-surface-container-high); border-radius: var(--md-shape-corner-m); padding: 8px 10px; margin-bottom: var(--space-sm); line-height: 1.6; }
.sheet .upgrade-tnc strong { color: var(--risk-red); }
.sheet .upgrade-email-wrap input { width: 100%; background: var(--bg-app); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-primary); padding: 12px 14px; font-size: 16px; outline: none; }
.sheet .upgrade-email-wrap input:focus { border-color: var(--brand-primary); }
.sheet .upgrade-recover { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin-top: 8px; }
.sheet .upgrade-recover span { font-size: 12px; color: var(--text-muted); }
.sheet .upgrade-recover #restore-pro-btn { background: none; border: 1px solid var(--brand-primary); color: var(--brand-primary);
  border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; cursor: pointer; font-weight: 600; }
.sheet .upgrade-codebox { display: none; align-items: center; gap: 8px; padding: 10px 14px; margin-top: 6px;
  background: var(--bg-app); border: 1px dashed var(--buy-green-border); border-radius: var(--radius-md); }
.sheet .upgrade-codebox .uc-label { font-size: 12px; color: var(--text-muted); }
.sheet .upgrade-codebox .uc-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; font-size: 18px;
  color: var(--buy-green); letter-spacing: 2px; }
.sheet .field { margin-bottom: var(--space-md); }
.sheet .field label { display: block; font-size: 13px; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; }
.sheet input, .sheet select { width: 100%; background: var(--bg-app); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-primary); padding: 13px 14px; font-size: 16px; outline: none;
  transition: border-color var(--md-duration-short) var(--md-motion-standard); }
.sheet input:focus { border-color: var(--brand-primary); }
.sheet .btn-primary { width: 100%; margin-top: var(--space-sm); }
.pick-price { display: flex; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.pick-price button { flex: 1; background: var(--bg-app); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  border-radius: var(--radius-xl); padding: 12px 8px; font-size: 12px; cursor: pointer; }

/* ---------- 雷達 ---------- */
.unfollow { background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 0 6px; flex-shrink: 0; }
.unfollow[data-armed="1"] { color: var(--risk-red); }   /* 兩段式: 第一次點後變「移除？」並轉紅 */
@media (hover: hover) and (pointer: fine) { .unfollow:hover { color: var(--risk-red); } }
.unfollow[data-armed="1"] { font-size: 13px; font-weight: 700; white-space: nowrap; }
.radar-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-md); }
/* 按鈕底改 --brand-cta (原 3.3:1 → 約 6.1:1) */
.follow-add { border: none; border-radius: var(--radius-xl); background: var(--brand-cta); color: var(--md-sys-color-on-surface); font-size: 20px; cursor: pointer; width: 52px; }

/* ---------- 動態 / 新聞 ---------- */
#news .news-item { background: var(--bg-surface); border-radius: var(--radius-xl); padding: 14px 16px; margin-bottom: 8px; cursor: pointer; }
#news .news-item .ni-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#news .news-item .ni-head b { color: var(--text-primary); font-size: 15px; }

/* 新聞來源徽章 */
.ni-tag { font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 2px 8px; margin-right: 6px; background: var(--bg-app); }
.ni-time { font-size: 12px; color: var(--text-muted); margin: 0 6px; }

#news .news-item .ni-brief { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin-top: 6px; }
#news .news-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12px; }

/* 訊號制防守「怎麼守・怎麼賺」 (2026-10-04, 移除金額試算後) */
.sig-box { background: none; border: 0; padding: 0; border-radius: var(--radius-md); margin-top: 12px; }
.sig-box-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sig-box-head h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; }
.sig-note { font-size: 12px; color: var(--text-muted); }
.sd-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sd-item { border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sd-k { font-size: 12px; color: var(--text-muted); }
.sd-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sd-s { font-size: var(--fs-2); color: var(--text-secondary); }
.sd-stop, .sd-guard { background: var(--risk-red-surface); border: 1px solid var(--risk-red-border); }
.sd-stop .sd-v, .sd-guard .sd-v { color: var(--risk-red); }
.sd-tgt, .sd-turn { background: var(--buy-green-surface); border: 1px solid var(--buy-green-border); }
.sd-tgt .sd-v, .sd-turn .sd-v { color: var(--buy-green); }
.sd-halt { background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.22); }
.sd-halt .sd-v { color: var(--momentum); }
/* 多源驗證標籤 (Phase B) */
.db-b { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.4; font-weight: 600; margin-left: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }
.badge-ok { color: var(--buy-green); background: var(--buy-green-surface); border: 1px solid var(--buy-green-border); }
.badge-mismatch { color: var(--risk-red); background: var(--risk-red-surface); border: 1px solid var(--risk-red-border); }
.badge-warn { color: var(--wait-amber); background: var(--wait-amber-surface); border: 1px solid var(--wait-amber-border); }

/* 大盤三態白話行 + 時間守則 (2026-10-04) */
.mk-state { margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; border: 1px solid; }
/* 原 3px 側邊條是 AI 痕跡, 改整圈 2px 細框(語意色 30%)+ 標題前 7px 同色圓點, 三態(綠/琥珀/紅)語意保留 */
.mk-state b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.mk-state b { font-weight: 700; }
.mk-up { background: var(--buy-green-surface); border-color: var(--buy-green-border); color: var(--text-secondary); }
.mk-up b { color: var(--buy-green); }
.mk-chop { background: var(--wait-amber-surface); border-color: var(--wait-amber-border); color: var(--text-secondary); }
.mk-chop b { color: var(--wait-amber); }
.mk-down { background: var(--risk-red-surface); border-color: var(--risk-red-border); color: var(--text-secondary); }
.mk-down b { color: var(--risk-red); }
.time-rule { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-subtle); color: var(--text-muted); font-size: 12px; line-height: 1.55; }

/* 籌碼面 (2026-10-04) */
.chips-box { background: var(--bg-surface); border-radius: var(--radius-md); padding: 13px 15px; margin-top: 12px; border: 1px solid var(--border-subtle); }
.chips-head { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.chips-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.chips-row { font-size: 13px; color: var(--text-secondary); line-height: 1.55; padding: 4px 0; border-top: 1px solid var(--border-subtle); }
.chips-row:first-of-type { border-top: none; }
.chips-face { font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: var(--muted-surface); border: 1px solid var(--muted-border); border-radius: var(--radius-md); padding: 8px 12px; margin-top: 8px; }
.chips-face-sell { color: var(--risk-red); border-color: var(--risk-red); background: var(--risk-red-surface); }
.chips-face-buy { color: var(--buy-green); border-color: var(--buy-green-border); }

/* 策略歷史成績 (2026-10-04) */
.stats-box { background: var(--bg-surface); border-radius: var(--radius-md); padding: 13px 15px; margin-top: 12px; border: 1px solid var(--border-subtle); }
.stats-head { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.stats-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-item { display: flex; flex-direction: column; align-items: center; background: var(--bg-app); border-radius: var(--radius-md); padding: 8px 4px; }
.stat-item b { font-size: 17px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-item span { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stats-note { margin-top: 10px; font-size: var(--fs-2); color: var(--text-secondary); line-height: 1.6; }
.stats-note b { color: var(--buy-green); }
.stats-note .sn-p { display: block; margin-top: 6px; }

/* 今日消息面 · 置頂 (2026-10-04 依新手回饋) */
.sec-link { color: var(--brand-primary); font-size: 12px; cursor: pointer; font-weight: 600; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }

/* 新聞全文展開 */
.ni-actions { margin-top: 8px; }
.ni-toggle { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); color: var(--brand-primary); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
.ni-full { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.screen-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }

/* ---------- 圖表 / 其它 ---------- */
#kchart, #dc-kchart { width: 100%; display: block; background: var(--bg-app); border-radius: var(--radius-xl); }
.chart-cap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
             padding: 10px 12px 2px; font-size: 12px;
             color: var(--md-sys-color-on-surface-variant); }
.chart-cap .cc { display: inline-flex; align-items: center; gap: 6px; }
.chart-cap .cc::before { content: ""; display: inline-block; width: 12px; height: 0; }
.chart-cap .cc-entry { color: var(--md-sys-color-primary); }
.chart-cap .cc-entry::before { border-top: 2px solid var(--md-sys-color-primary); }
.chart-cap .cc-stop { color: var(--md-sys-color-error); }
.chart-cap .cc-stop::before { border-top: 2px dashed var(--md-sys-color-error); }
.chart-legend { font-size: 11.5px; color: var(--md-sys-color-on-surface); margin: 4px 0 6px; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.chart-legend .lg-ma { color: #EAB308; }
.chart-legend .lg-vol { color: #94A3B8; }
.chart-legend .lg-macd.up { color: var(--buy-green); }
.chart-legend .lg-macd.down { color: var(--risk-red); }
.chart-legend .lg-rsi { color: #C4B5FD; }
.chart-legend .lg-rsi.hi { color: var(--risk-red); }
.chart-legend .lg-rsi.lo { color: var(--buy-green); }
.chart-cap .cc-note { color: var(--wait-amber); font-size: 12px; }
.chart-cap .cc b { font-weight: 600; font-variant-numeric: tabular-nums; }
.err { background: var(--risk-red-surface); border: 1px solid var(--risk-red-border); color: #fca5a5;
  border-radius: var(--radius-xl); padding: 14px 16px; font-size: 14px; margin-top: 12px; }
.loading { text-align: center; color: var(--text-muted); padding: 24px; font-size: 14px; }
.footer { position: static; padding: 24px var(--space-md) 8px; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--text-disabled); }

/* ---------- 探索 list 壓縮 (單行 64px) ---------- */
/* 右側「體質/可買膠囊/🔔」不可被擠出容器: 允許整列換行, 右側元件不縮、不被切 (原 op-left 縮到 0 後總寬仍超過列寬, 最右的 .sig 圓點被裁) */
#explore-list .op-item { padding: 10px 14px; flex-wrap: wrap; row-gap: 6px; column-gap: 8px; max-width: 100%; }
#explore-list .op-left { flex: 1 1 96px; }
#explore-list .op-item > .cred-badge, #explore-list .op-item > .sig, #explore-list .op-item > .row-bell { flex-shrink: 0; white-space: nowrap; }
#explore-list .op-mid { flex-shrink: 1; min-width: 0; }
.op-mid { font-variant-numeric: tabular-nums; text-align: right; flex-shrink: 0; margin-left: 8px; display: flex; flex-direction: column; align-items: flex-end; }
.op-mid small { color: var(--text-muted); font-size: 12px; }
.more-btn { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--brand-primary); border-radius: var(--radius-xl); padding: 12px; font-size: 13px; cursor: pointer; font-weight: 600; margin-top: 4px; }
.empty-state { background: var(--bg-surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl);
  padding: 20px; text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.empty-state small { color: var(--text-muted); font-size: 12px; }

/* ---------- 風控盒 hero ---------- */
.risk-hero { grid-column: 1 / -1; background: rgba(9,12,16,0.42); border-radius: var(--md-shape-corner-m); padding: 12px; }
.risk-hero .risk-hero-num { font-size: 26px; font-weight: 800; color: var(--risk-red); display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.risk-hero .risk-hero-num small { font-size: 13px; color: var(--text-muted); }

/* ---------- 大盤天氣 (2026-09-22) ---------- */
.idx-series { display: flex; flex-direction: column; gap: 10px; }
.idx-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  margin-bottom: 8px; }
/* 漲跌方向只由 .idx-chg.up/.down 表達(跟隨 --px-up/--px-down 設定); 卡片邊框與圓點已移除, 避免無視使用者的漲跌顏色設定 */
.idx-name { min-width: 0; flex: 1; color: var(--text-primary); font-size: 15px; font-weight: 700; }
.idx-name small.idx-sym { color: var(--text-muted); display: block; font-size: 12px; }
.idx-val { font-size: 17px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.idx-chg { font-size: 13px; font-weight: 700; margin-left: 8px; }
.idx-tabs { display: flex; gap: var(--space-sm); margin-bottom: 8px; flex-wrap: wrap; }
.idx-tabs .seg { flex: 1 1 auto; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); padding: 8px 10px; border-radius: var(--radius-md); font-size: 12px;
  cursor: pointer; font-weight: 600; }
.idx-tabs .seg.sel { background: var(--brand-surface); border-color: var(--brand-primary); color: var(--brand-primary); }
#idx-cht { display: block; width: 100%; max-width: 100%; background: var(--bg-app); border-radius: var(--radius-xl); }
.idx-brief { display: flex; align-items: center; gap: 8px; background: var(--brand-surface);
  border: 1px solid var(--brand-primary); border-radius: var(--radius-xl); padding: 10px 14px;
  margin-bottom: var(--space-md); font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- 雷達空狀態 ---------- */
.radar-empty { text-align: center; padding: 28px 16px; color: var(--text-secondary); }
.radar-empty .empty-icon { font-size: 36px; margin-bottom: 10px; }
.radar-empty h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.radar-empty p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.quick-add-group span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; text-align: left; }
.quick-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chip-action { background: var(--bg-app); border: 1.5px solid var(--brand-primary); color: var(--brand-primary);
  border-radius: var(--radius-pill); padding: 10px 16px; font-size: 13px; cursor: pointer; font-weight: 600; }
.chip-action:active { background: var(--brand-surface); }

/* ---------- 新手橫幅 ---------- */
.guide-banner { display: flex; align-items: center; gap: 6px; background: var(--brand-surface);
  border: 1px solid var(--brand-primary); border-radius: var(--radius-xl); padding: 4px 4px 4px 14px; margin-bottom: var(--space-md);   /* 關閉鈕 44px 觸控區撐高度, 上下只留 4px */
  font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.guide-banner b { color: var(--brand-primary); }
/* 文字包進單一 flex 子項, 否則 🎯 / <b> / 後段文字各成匿名 flex 項而被腰斬換行 */
.guide-banner .gb-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.guide-banner #guide-close { align-self: flex-start; padding: 2px 4px; }
.guide-banner #guide-close { background: none; border: none; color: var(--text-muted);
  font-size: 15px; cursor: pointer; flex-shrink: 0; }
#guide-close { min-width: 44px; min-height: 44px; }


/* ================= M3 Expressive 動態呈現 (2026-09-21 v4) ================= */
/* 避免過度炫彩: 全部暗調微光, 0.3-0.45s 快速, 尊重 reduced-motion */
/* 使用 M3 Spring 曲線 (--md-motion-spring) 取代固定 ease, 提供 Expressive 彈性感 */

/* 卡片進場: 交錯 fade + slide up (M3 standard) */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 列表進場 (2-14): 預設不動, 只有容器掛 .is-entering (列表首次載入) 才依 --i 做 stagger, 篩選/展開/重繪不重播 */
.op-item { animation: none; }
.is-entering .op-item { animation: riseIn 220ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* 守線距離進度條 */
.opprog { height: 4px; border-radius: 2px; background: rgba(100,116,139,0.18); overflow: hidden; margin-top: 6px; }
.opprog > i { display: block; height: 100%; width: 0%; background: var(--brand-primary);
  border-radius: 2px; }

/* skeleton shimmer 骨架 */
@keyframes shimmer { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }
.skeleton { height: 52px; border-radius: var(--radius-md); margin: 8px 0;
  background: linear-gradient(90deg, rgba(100,116,139,0.12) 0, rgba(148,163,184,0.20) 30%, rgba(100,116,139,0.12) 60%);
  background-size: 40px 100%; background-repeat: repeat-x; animation: shimmer 1.2s linear infinite; }

/* 決策卡守線手風琴內容緩進場 */
.acc-content { animation: riseIn var(--md-duration-medium) var(--md-motion-standard); }

/* 尊重減少動感偏好: 全關 */
@media (prefers-reduced-motion: reduce) {
  .op-item, .acc-content { animation: none !important; }
  :where(button, summary, .op-item, .news-item):active { transform: none; }
  .cred-badge.bub:active { transform: none; }
  .btn-primary:active, .btn-close:active { transform: none; }
  /* 純淡入淡出. 關閉狀態靠 visibility:hidden(延遲到淡出結束才生效)保證不可點、不可聚焦, 不依賴 transform */
  .sheet { transform: none; opacity: 0; transition: opacity 150ms linear, visibility 0s linear 150ms; }
  .sheet.show { transform: none; opacity: 1; transition: opacity 150ms linear, visibility 0s; }
}

/* toast: 取代 alert(); 底部單一元素 */
.toast { position: fixed; left: 50%; bottom: calc(var(--navbar-h) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px);
  max-width: min(92vw, 420px); padding: 10px 16px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5;
  box-shadow: var(--shadow-card); border: 1px solid var(--border-strong); z-index: 100; opacity: 0; pointer-events: none;
  transition: opacity var(--md-duration-short) var(--md-motion-standard), transform var(--md-duration-short) var(--md-motion-standard); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-success { background: var(--bg-surface-elevated); color: var(--buy-green); border-color: var(--buy-green-border); }
.toast-error { background: var(--bg-surface-elevated); color: var(--risk-red); border-color: var(--risk-red-border); }
body.has-cta .toast { bottom: calc(var(--navbar-h) + 72px + env(safe-area-inset-bottom)); }   /* 決策頁: 抬高避開 #cta-bar */

/* 進場論點卡 + 催化劑事件 (2026-10-16) —— 三態用整圈細框 + 標題色點, 與 .risk-box 同風格 */
.decision-card > .thesis-box, .decision-card > .cat-box, .decision-card > .chips-face, .decision-card > .thesis-cta { margin-top: 0; margin-bottom: 0; }
.thesis-box { background: var(--bg-surface-elevated); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; }
.thesis-box.th-intact { border-color: var(--buy-green-border); }
.thesis-box.th-weakening { border-color: var(--wait-amber-border-strong); }
.thesis-box.th-broken { border-color: var(--risk-red); }
.thesis-box.th-stale { border-color: var(--wait-amber-border-strong); }
.th-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.th-head b { color: var(--text-primary); }
.th-sub { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.th-headline { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 8px 0 6px; color: var(--text-primary); }
.th-intact .th-headline { color: var(--buy-green); }
.th-weakening .th-headline { color: var(--wait-amber); }
.th-broken .th-headline { color: var(--risk-red); }
.th-pillars { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.th-pill { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); }
.th-pill.ok { color: var(--text-secondary); }
.th-pk { white-space: nowrap; }
.th-pd { text-align: right; }
.th-exit { font-size: 12px; line-height: 1.5; color: var(--wait-amber); margin-top: 6px; }
.thesis-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.thesis-cta button { align-self: flex-start; }
.th-cta-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.op-th { font-size: 12px; margin-top: 2px; }
.op-th.th-intact { color: var(--buy-green); }
.op-th.th-weakening { color: var(--wait-amber); }
.op-th.th-broken { color: var(--risk-red); }
.cat-box { border-radius: 10px; padding: 8px 12px; background: var(--muted-surface); border: 1px solid var(--muted-border); display: flex; flex-direction: column; gap: 6px; }
.cat-box.cat-high { background: var(--risk-red-surface); border-color: var(--risk-red); }
.cat-box.cat-mid { background: var(--wait-amber-surface); border-color: var(--wait-amber-border-strong); }
.cat-box.cat-feed { background: transparent; border: 0; padding: 0; margin-bottom: 12px; }
.cat-row { display: grid; grid-template-columns: 44px 1fr; gap: 2px 8px; font-size: 13px; line-height: 1.45; }
.cat-feed .cat-row { background: var(--bg-surface-elevated); border-radius: 8px; padding: 8px 10px; }
.cat-d { font-weight: 700; color: var(--text-primary); }
.cat-t { color: var(--text-primary); }
.cat-x { grid-column: 2; font-size: 12px; color: var(--text-muted); }
.cat-row.cat-high .cat-d { color: var(--risk-red); }
.cat-row.cat-mid .cat-d { color: var(--wait-amber); }
.cat-row.cat-low .cat-d { color: var(--text-muted); }


/* ===== K線回放 / 事件徽章 / 持倉儀表板 (2026-10-17) ===== */
.replay-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.rp-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--buy-green-border); background: transparent; color: var(--buy-green); font-size: 13px; font-weight: 500; cursor: pointer; }
.rp-speed { display: inline-flex; border: 1px solid rgba(100,116,139,0.35); border-radius: 999px; overflow: hidden; }
.rp-speed button { min-height: 36px; padding: 0 12px; background: transparent; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.rp-speed button.on { background: var(--buy-green-surface); color: var(--buy-green); font-weight: 600; }
.rp-progress { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.cap-ev { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; animation: capBreath 2.8s ease-in-out infinite; }
.cap-ev-up { color: var(--buy-green); background: rgba(0, 229, 153, 0.08); border: 1px solid var(--buy-green-border); }
.cap-ev-down { color: var(--risk-red); background: rgba(248, 113, 113, 0.08); border: 1px solid var(--risk-red-border); }
@keyframes capBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .cap-ev { animation: none !important; } }

#holdings-board { margin: 0 0 var(--space-md); }
#holdings-board[hidden] { display: none; }
.hb-sum { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.hb-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--radius-xl); border: 1px solid rgba(100,116,139,0.25); cursor: pointer; }
.hb-row:hover { border-color: rgba(100,116,139,0.5); }
.hb-row.hb-intact { border-left: 3px solid var(--buy-green); }
.hb-row.hb-weakening { border-left: 3px solid var(--wait-amber); }
.hb-row.hb-broken { border-left: 3px solid var(--risk-red); }
.hb-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-l small { color: var(--text-muted); margin-left: 4px; }
.hb-m { font-size: 16px; font-weight: 600; text-align: right; }
.hb-r { grid-column: 1 / -1; white-space: normal; font-size: 12px; text-align: left; color: var(--text-muted); }
.hb-r .hb-sub { display: inline; margin-left: 8px; }
.hb-sub { font-size: 12px; color: var(--text-muted); }
.hb-hl { grid-column: 1 / -1; }
.hb-mk { min-height: 32px; padding: 0 10px; margin-left: 6px; font-size: 12px; }
.hb-empty { padding: 14px; font-size: 13px; color: var(--text-muted); border: 1px dashed rgba(100,116,139,0.35); border-radius: var(--radius-xl); }
.hb-warn { color: var(--wait-amber); }