/* 個股透視鏡（/stock）頁專用樣式（任務#107 更名，原「個股查詢」）。共用
   app.css 的變數 / nav / footer / settings-form 等既有類別，這裡只補個股
   頁面特有的元件（起始頁 Hero／搜尋列、頭部、K線、指標卡）。 */

/* ============ 籌碼 K 線成本線代幣（2026-08-23，仿三竹「籌碼K線」）============
 *
 * 五條成本線（外資／投信／融資／主力／庫存）各一顆色代幣。**只在這裡定義
 * 一次**，畫布（stock.js drawCostLines() 用 tc("--chart-cost-*") 讀）與
 * 圖例色塊（.cost-swatch-*）吃的是同一顆代幣——圖例的職責就是「這條線是
 * 什麼」，色票必須逐字等於線色，不准各寫各的十六進位（見本檔 .kline-legend
 * 上方 stock.html 註解記載的舊事故）。
 *
 * 為什麼定義在 stock.css 而不是 app.css：這五顆只有個股頁 K 線卡用得到，
 * 放全站樣式表等於讓每一頁都載一份用不到的代幣；日後若有第二頁要用，再
 * 整組搬去 app.css 的 --chart-* 族。
 *
 * 五主題各給值（深色 :root ＋ light-a/b/c ＋ champagne）：淺色三主題與香檳
 * 金底都是亮底，深色版的高亮度線色（青/金/銀白）在上面會糊掉，故各自給
 * 加深版；香檳金底偏暖，再往暖調壓一階，免得冷色線在暖底上發灰。
 *
 * 選色避讓清單（同一張圖上可能同時存在的線）：MA5 琥珀 #e0a030、MA20 藍
 * #20a0ff、MA60 紫 #a060ff、支撐薄荷 #2ee6a8、壓力洋紅 #ff5ca8、事件琥珀
 * #f5a623。五顆成本線另外靠「線型（實線/長虛/點虛/點劃/密點）＋右緣具名
 * 標籤」二次區分，不單靠顏色扛全部辨識負擔。
 */
:root {
  --chart-cost-foreign: #39d0d8;   /* 外資成本＝青 */
  --chart-cost-trust: #f2c14e;     /* 投信成本＝金 */
  --chart-cost-margin: #8d7bf5;    /* 融資成本＝靛紫 */
  --chart-cost-major: #ff7a59;     /* 主力成本＝珊瑚 */
  --chart-cost-inventory: #cfd8ea; /* 庫存成本＝銀白（「我的」＝中性色，刻意不搶語意色） */
}

:root[data-theme="light-a"] {
  --chart-cost-foreign: #0e7c86;
  --chart-cost-trust: #9a6b08;
  --chart-cost-margin: #5a44c9;
  --chart-cost-major: #c04a2a;
  --chart-cost-inventory: #4a5568;
}

:root[data-theme="light-b"] {
  --chart-cost-foreign: #0e7c86;
  --chart-cost-trust: #9a6b08;
  --chart-cost-margin: #5a44c9;
  --chart-cost-major: #c04a2a;
  --chart-cost-inventory: #4a5568;
}

:root[data-theme="light-c"] {
  --chart-cost-foreign: #0e7c86;
  --chart-cost-trust: #9a6b08;
  --chart-cost-margin: #5a44c9;
  --chart-cost-major: #c04a2a;
  --chart-cost-inventory: #4a5568;
}

:root[data-theme="champagne"] {
  --chart-cost-foreign: #0d6f78;
  --chart-cost-trust: #8a5f05;
  --chart-cost-margin: #533dbb;
  --chart-cost-major: #b34324;
  --chart-cost-inventory: #4a4238;
}

.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  max-width: 420px;
}

.search-bar input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 15px;
  letter-spacing: 1px;
  background: rgba(var(--surface-tint-rgb), 0.03);
  color: var(--text);
}

.search-bar input::placeholder {
  color: var(--text-faint);
  letter-spacing: normal;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), 0.18);
}

.search-bar button {
  background: var(--brand-gradient);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 150ms var(--ease), transform 150ms var(--ease);
  box-shadow: 0 4px 16px rgba(var(--brand-blue-rgb), 0.25);
}

.search-bar button:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.search-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.search-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 通用按鈕內轉圈：站內 .spinner 是白圈疊白底 icon 尺寸，這裡另立一個
   給任何按鈕內 loading 用，尺寸與描邊都比照 .spinner 但獨立命名，
   避免耦合到 ai-loading 的行內樣式覆寫。 */
.btn-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* 查詢取消鈕（規格 M5）：只在查詢進行中顯示（display 由 stock.js
   setSearchBtnLoading 控制），中性色樣式跟主要「查詢」按鈕的品牌漸層
   區隔開，避免搶走主要動作的視覺重量。用 .search-bar .btn-search-cancel
   （雙 class）提高特異度覆蓋 .search-bar button 的漸層背景，不需要
   !important。 */
.search-bar .btn-search-cancel {
  background: rgba(var(--text-muted-rgb), 0.12);
  color: var(--text-muted);
  box-shadow: none;
  border: 1px solid var(--border-strong);
}

.search-bar .btn-search-cancel:hover:not(:disabled) {
  filter: brightness(1.15);
}

.search-error {
  color: var(--up);
  font-size: 13px;
  margin-bottom: 12px;
  background: var(--up-bg);
  border: 1px solid rgba(var(--up-rgb), 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* 任務#123 M4b：查無結果狀態換裝插畫（ill_17，見 stock.js
   showSearchNoResult()）——語氣從「錯誤」轉為「緩衝挫折感」，改用中性
   卡片配色（不用 .search-error 的紅色錯誤配色，查無結果不是系統錯誤）、
   圖文置中排版；一般系統錯誤（showSearchError()）維持原本紅色文字框，
   兩者共用容器但外觀分流靠這顆修飾類。 */
.search-error.search-error-noresult {
  color: var(--text);
  background: var(--card-bg);
  border-color: var(--border);
  padding: 20px 16px;
  text-align: center;
}

.search-error-illus {
  display: block;
  width: 180px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 12px;
  border-radius: var(--radius-sm);
}

.search-error-text {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------- 個股頭部 ---------- */

/* 結果頁淡入（任務 #107 M2 規格點 7：起始頁淡出、結果照舊呈現），沿用
   app.css 既有 fadeIn 動畫，display:none -> block 切換時自動重播。 */
#stock-result {
  animation: fadeIn 220ms var(--ease);
}

.stock-header {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-card);
}

.stock-header .name-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.stock-header .stock-name {
  font-size: clamp(18px, 1vw + 14px, 21px);
  font-weight: 800;
  color: var(--text);
}

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

.stock-header .price-line {
  text-align: right;
}

.stock-header .close-price {
  font-size: clamp(22px, 1.3vw + 16px, 28px);
  font-weight: 800;
}

.stock-header .change-pct {
  font-size: 14px;
  font-weight: 700;
  margin-left: 6px;
}

.btn-watch-toggle {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.btn-watch-toggle:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--text);
}

.btn-watch-toggle.active {
  background: var(--accent-bg);
  border-color: var(--brand-cyan);
  color: var(--brand-cyan-text);
}

.btn-watch-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.watch-hint {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

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

/* ---------- 卡片區塊 grid ---------- */

.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.stock-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}

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

.metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

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

.metric-row .label {
  color: var(--text-muted);
}

.metric-row .value {
  font-weight: 700;
  color: var(--text);
}

.metric-row .value.up { color: var(--up); }
.metric-row .value.down { color: var(--down); }
.metric-row .value.flat { color: var(--text-muted); }

/* ---------- 指標白話備註分級 chip（任務#64 M2） ----------
   .value-wrap 把原本單一 .value 換成「數字 + 分級 chip」兩個子項的 flex
   容器，取代 metric-row 原本 justify-content:space-between 只認兩個
   直接子項的排法。chip 分級顏色一律用中性色（不用紅綠，避免與行情
   漲跌色混淆、也避免被解讀為買賣暗示，見 stock.js zone*() 系列函式的
   規則表註解）：blue=區間偏低端、slate=區間中段、violet=區間偏高端、
   warn=額外提醒的離群值（本益比>35、殖利率>5%）。 */
.value-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* .sv-metric-chip-wrap／.sv-metric-chip／.sv-metric-pop（含 hover 死區
   橋接與顯示條件）任務#84 升格為全域元件，正本搬到 app.css「懸浮備註
   框全域元件」區塊，互動邏輯見 web/static/popover_util.js
   （SvPopover.bind()）。此檔沿用這組類名，不再重複定義。 */

/* ---------- 估值卡缺值原因（站長 2026-08-22 06:40 明令） ----------
   「—」不准單獨出現：每一個缺不到的數字都要有一句白話原因，否則使用者
   以為網站壞掉。文案一律由後端決定（api/stock.py `_valuation_reasons()`
   是單一真相源），這裡只管長相。

   兩個層級、互斥（後端保證，前端不自己合成）：
   · .sv-val-card-reason —— 三欄全缺且同因（興櫃／存託憑證／ETF／官方表
     整檔沒有）。排在三列**之前**，左側細線＋極淡底色，讀起來像卡片的
     前言而不是紅字錯誤；顏色一律中性（不用紅/橘），因為這不是故障。
   · .sv-val-reason —— 只有某一欄空白（近四季虧損／近 12 個月未配息）。
     接在該列數值**下方自成一行**：.sv-val-row 開 flex-wrap、原本的
     label 與 value-wrap 維持左右分置，reason 佔滿整行（flex-basis:100%）
     後被擠到第二行，右對齊貼齊數值那一側，視線不用左右跳。
   · 兩者都用 ⓘ 起頭（::before），與全站「說明」語彙一致。 */
.sv-val-card-reason {
  margin: 0 0 10px;
  padding: 8px 11px;
  border-left: 2px solid rgba(var(--text-muted-rgb), 0.45);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(var(--surface-tint-rgb), 0.05);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.sv-val-card-reason::before {
  content: "ⓘ";
  margin-right: 5px;
  color: var(--text-faint);
}

.sv-val-row {
  flex-wrap: wrap;
}

.sv-val-reason {
  flex: 0 0 100%;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.6;
  text-align: right;
  color: var(--text-faint);
}

.sv-val-reason::before {
  content: "ⓘ";
  margin-right: 4px;
}

/* 缺值的「—」本身也降一階：與旁邊有數字的列一眼分得出來，避免「—」看起來
   像一個很重要的值。 */
.metric-row .value.value-missing {
  font-weight: 600;
  color: var(--text-faint);
}

@media (max-width: 480px) {
  /* 窄幕（實測 320px）：原因通常比數值長，右對齊會排出很碎的階梯，改左對齊
     一整行讀。 */
  .sv-val-reason {
    text-align: left;
  }
}

.sv-metric-disclaimer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-faint);
}

/* 卡片內小提示行（任務#84 追加規格：月營收卡「最新公布月份」與估值卡
   計算基準說明），比 .sv-metric-disclaimer 輕——不畫頂部分隔線，通常
   接在 .sv-metric-disclaimer 之前當作同一組免責/說明文字的第一行。 */
.sv-card-note {
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ---------- K線型態雷達 ---------- */

.pattern-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

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

.pattern-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pattern-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: var(--accent-bg);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-width: 260px;
  cursor: default;
}

/* 型態文字資訊欄（任務 #59 M2：卡片改成左右佈局，右側留給 K 線快照），
   原本 column 排列的 name/badge/reliability/date/note 全部搬進這個
   wrapper，維持舊有堆疊順序不變。 */
.pattern-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* 型態卡「深入學習」連結（任務 #59 M3：連到技術分析教室，見
   stock.js renderPatterns()；kline_guide 目前無 per-型態 anchor，先連
   整頁）。 */
.pattern-learn-link {
  font-size: 11px;
  color: var(--brand-cyan-text);
  text-decoration: none;
  margin-top: 4px;
  width: fit-content;
}

.pattern-learn-link:hover {
  text-decoration: underline;
}

/* 型態卡右側 K 線快照（任務 #59 M2）：固定小尺寸，行動版窄螢幕時
   .pattern-tag 改直排、快照滿版寬（見下方 @media）。 */
.pattern-snapshot-wrap {
  flex-shrink: 0;
  width: 132px;
  text-align: center;
}

.pattern-snapshot {
  display: block;
  width: 132px;
  height: 56px;
}

.pattern-snapshot-caption {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
}

.pattern-snapshot-unavailable {
  font-size: 10px;
  color: var(--text-faint);
  padding: 18px 0;
}

@media (max-width: 480px) {
  .pattern-tag {
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }
  .pattern-snapshot-wrap {
    width: 100%;
    align-self: stretch;
  }
  .pattern-snapshot {
    width: 100%;
  }
}

.pattern-tag .pattern-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-cyan-text);
}

.pattern-tag .pattern-date {
  font-size: 11px;
  color: var(--text-muted);
}

.pattern-tag .pattern-note {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  margin-top: 2px;
}

/* 說明文字重排（任務#66 M4）：結論句（.pattern-note-lead）粗體、字級
   略升於既有 .pattern-note 的 11px，置頂；其餘說明句（沿用既有
   .pattern-note 樣式）維持小字接在下方，見 stock.js
   splitPatternInterpretation()。 */
.pattern-note-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.pattern-tag .pattern-note-lead {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

.pattern-tag .pattern-note-wrap .pattern-note {
  margin-top: 0;
}

/* K線48型態技能庫 v2：方向徽章＋可靠度小標（見 web/static/stock.js
   renderPatterns()，資料源 knowledge.candlestick_patterns.analyze_candles()） */
.pattern-tag .pattern-badge {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-top: 1px;
}

.pattern-tag .pattern-badge.pattern-dir-up {
  background: rgba(var(--up-rgb), 0.15);
  color: var(--up);
}

.pattern-tag .pattern-badge.pattern-dir-down {
  background: rgba(var(--down-rgb), 0.15);
  color: var(--down);
}

.pattern-tag .pattern-badge.pattern-dir-continuation {
  background: rgba(var(--brand-cyan-rgb), 0.15);
  color: var(--brand-cyan-text);
}

.pattern-tag .pattern-badge.pattern-dir-indecision {
  background: rgba(var(--text-muted-rgb), 0.15);
  color: var(--text-muted);
}

.pattern-tag .pattern-reliability {
  font-size: 10px;
  color: var(--text-faint);
}

/* 方向 badge／可靠度旁的 info 圖示彈窗（任務#66 M4；互動於任務#84
   重構）：wrap 沿用 .sv-metric-chip-wrap（正本見 app.css「懸浮備註框
   全域元件」，hover 200ms 寬限收合／點擊釘選由 popover_util.js
   SvPopover.bind() 統一處理），這裡只補圖示本身樣式與外層排版。 */
.pattern-badge-wrap,
.pattern-reliability-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pattern-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--surface-tint-rgb), 0.1);
  color: var(--text-faint);
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

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

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

/* .sv-metric-pop 預設 right:0 對齊卡片右緣是為了 metric-row 那種靠右
   排版；型態卡的 wrap 貼著文字左側，pop 改左對齊圖示，避免在窄卡片/
   行動版被裁掉。 */
.pattern-info-pop-wrap .sv-metric-pop {
  right: auto;
  left: 0;
}

/* ---------- K 線圖 ---------- */

.kline-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.kline-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

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

.range-switch {
  display: flex;
  gap: 4px;
}

.range-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.range-btn:hover:not(:disabled) {
  border-color: var(--brand-blue);
  color: var(--text);
}

.range-btn.active {
  background: var(--brand-gradient);
  border-color: transparent;
  color: var(--on-accent);
}

.range-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kline-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kline-legend .swatch {
  width: 10px;
  height: 3px;
  display: inline-block;
  border-radius: 2px;
}

#kline-canvas {
  width: 100%;
  height: 320px;
  display: block;
  cursor: crosshair;
  /* 水平拖曳平移/pinch 縮放由 JS 接管；垂直方向保留給瀏覽器捲頁
     （pan-y）——2026-07-18 QA a13：全寬 K 線用 none 會把手機使用者
     困在圖上無法往下捲（捲動陷阱）。 */
  touch-action: pan-y;
}

/* ---------- K線卡可自選副圖插槽（任務#147：對標籌碼K線 App 副圖功能）
   ----------
   兩個插槽（#kline-subplot-1／#kline-subplot-2）各自獨立選擇要顯示的資料
   （成交量/技術指標/法人資券/大戶散戶/營收），繪圖入口掛在
   stock.js redrawKline() 尾端（drawSubplotSlot(1)/drawSubplotSlot(2)），
   與主K線/標註疊圖共用同一個 rAF 觸發的重繪管線，縮放/平移/天數切換都
   自動同步，不另起計時器（時間軸同步是本任務的工程核心）。 */

.kline-subplot {
  margin-top: 10px;
  position: relative;
}

.kline-subplot-head {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.kline-subplot-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 150ms var(--ease);
}

.kline-subplot-picker-btn:hover {
  background: rgba(var(--surface-tint-rgb), 0.06);
}

.kline-subplot-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.kline-subplot-value {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.kline-subplot-caret {
  font-size: 10px;
  color: var(--text-muted);
}

.kline-subplot-note {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.kline-subplot-canvas-wrap {
  position: relative;
}

#subplot1-canvas,
#subplot2-canvas {
  width: 100%;
  height: 90px;
  display: block;
  cursor: crosshair;
  touch-action: pan-y; /* 同 #kline-canvas：垂直捲動還給瀏覽器（QA a13） */
}

.kline-subplot-empty {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px 8px;
  background: rgba(var(--surface-tint-rgb), 0.02);
  border-radius: var(--radius-sm);
}

/* 二級下拉選單（分類 -> 項目），點插槽表頭觸發，絕對定位浮在插槽上方
   內容之上（z-index 高於畫布本身）。375px 版改底部彈出，見下方 M2
   media query。 */
.kline-subplot-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 6px 0;
}

.kline-subplot-menu-cat {
  padding: 6px 12px 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.kline-subplot-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font-family: inherit;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}

.kline-subplot-menu-item:hover {
  background: rgba(var(--surface-tint-rgb), 0.06);
}

.kline-subplot-menu-item.active {
  color: var(--brand-blue);
  font-weight: 700;
}

/* 選單項目「已顯示」提示標籤（任務#149 去重規則）：對面插槽目前顯示的
   項目在選單裡標記，不阻擋選取——選了仍會被 dedupeSubplotSelection()
   自動跳到下一個未用項目，見 stock.js buildSubplotMenu()。 */
.kline-subplot-menu-item-tag {
  float: right;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  background: rgba(var(--surface-tint-rgb), 0.06);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
}

/* 一鍵副圖套組（任務#149）：常見雙插槽組合，視覺沿用 .subplot-quick-chip
   膠囊語言但獨立一份 class（語意不同：這是「一次設定兩槽」，不是單槽
   切換），見 stock.js applySubplotCombo()。 */
.kline-subplot-combobar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.subplot-combo-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-muted);
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.subplot-combo-chip:hover {
  border-color: var(--brand-blue);
  color: var(--text);
}

.subplot-combo-chip.active {
  background: var(--brand-gradient);
  border-color: transparent;
  color: var(--on-accent);
}

/* 成交量副圖專屬量均線圖例＋教學連結（任務#149），見 stock.js
   updateSubplotVolExtra()。複用主K線既有 .kline-legend 視覺但取消其
   margin-bottom（這裡是插槽表頭內的次要一行，不是獨立區塊）。 */
.kline-subplot-vol-extra {
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}

.kline-subplot-vol-extra .kline-legend {
  margin-bottom: 0;
  font-size: 10.5px;
  gap: 10px;
}

.kline-subplot-vol-links {
  display: inline-flex;
  gap: 10px;
}

.sv-learn-link {
  display: inline-block;
  font-size: 10.5px;
  color: var(--text-faint, var(--text-muted));
  text-decoration: none;
}

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

/* 底部快速切換列（成交量/技術/法人/大戶/營收 chips）：點擊直接換副圖2
   內容為該分類預設項目，複用 .ann-chip 的圓角膠囊視覺但獨立一份 class
   （語意不同：這是分類切換，不是圖層開關）。 */
.kline-subplot-quickbar {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.kline-subplot-quickbar::-webkit-scrollbar {
  display: none;
}

.subplot-quick-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.subplot-quick-chip:hover {
  border-color: var(--brand-blue);
  color: var(--text);
}

.subplot-quick-chip.active {
  background: var(--brand-gradient);
  border-color: transparent;
  color: var(--on-accent);
}

@media (max-width: 480px) {
  #subplot1-canvas,
  #subplot2-canvas {
    height: 70px;
  }

  /* 375px 空間有限，標籤＋現值放不進同一行——現值換到選單鈕下方獨立
     一行（M2規格「副圖表頭顯示當前值」在窄螢幕也要看得到，不是隱藏），
     picker 按鈕改允許換行＋現值強制佔滿寬度觸發換行。 */
  .kline-subplot-picker-btn {
    flex-wrap: wrap;
    width: 100%;
  }

  .kline-subplot-value {
    flex: 1 0 100%;
    text-align: left;
    order: 3;
  }

  .kline-subplot-note {
    font-size: 10px;
  }

  /* 任務#149：375px 窄螢幕量均線圖例＋教學連結改直排，避免與套組/快速
     切換列一樣橫向擠壓截斷。 */
  .kline-subplot-vol-extra {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .subplot-combo-chip {
    padding: 5px 10px;
    font-size: 11px;
  }

  /* M2：選單改底部彈出（bottom sheet），取代預設的浮動下拉，觸控熱區
     更大、不會被畫布邊界擠壓變形。 */
  .kline-subplot-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 60vh;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(var(--shadow-rgb), 0.4);
  }

  .kline-subplot-menu-item {
    padding: 10px 16px;
    font-size: 13.5px;
  }
}

/* ---------- K線視覺標註疊圖（任務#122 M1：K線標註前端；任務#144
   配色重製＋點選式動態圖層） ----------
   資料源 GET /stock/{id}/kline-annotations（analysis/kline_annotations.py
   任務#121 M1 規則式引擎），繪圖邏輯見 stock.js drawAnnotationOverlay()。
   顏色刻意與蠟燭紅漲綠跌（--up/--down）區隔，避免誤讀成漲跌訊號：
   支撐＝亮薄荷綠、壓力＝亮洋紅（任務#144：舊青綠/紫紅低飽和撞深色背景
   不明顯，且與 MA5/MA20/MA60 橙/藍/紫、台股綠跌語意混淆，改用更高飽和
   對比色，右緣標籤同步改實色底＋白字，見 stock.js drawLevelLines()）、
   事件＝琥珀（沿用既有「觀察」語意色 --warn-fg）、缺口＝淡靛藍/紫（中性、
   非方向性暗示）——事件／缺口配色使用者未反映問題，維持不變。 */

.kline-canvas-wrap {
  position: relative;
}

#kline-annotation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* 疊圖層完全不接手勢——所有滑鼠/觸控事件穿透到下層 #kline-canvas，
     縮放/平移/十字線邏輯完全不受影響；事件標記 hover/tap 是 #kline-canvas
     自己既有 handler 內做座標命中測試，不是這顆 canvas 自己接事件
     （見 stock.js bindKlineInteraction()）。 */
  pointer-events: none;
}

.kline-annotation-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  /* 任務#144 M2：四個圖層 chips 改成可橫向捲動的一列，「AI 標註」總開關
     固定在最左不參與捲動，取代原本 flex-wrap 讓控制列在窄螢幕擠成兩行。 */
  flex-wrap: nowrap;
}

#kline-annotation-toggle {
  flex: 0 0 auto;
}

.kline-annotation-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0; /* flex 子項預設 min-width:auto 會撐開父層，加這行才能在窄螢幕真的滾動而不是把整條 bar 撐寬 */
}

.kline-annotation-legend::-webkit-scrollbar {
  display: none;
}

/* 支撐/壓力/事件/缺口圖層開關 chip（任務#144 M2：從純展示用 <span> 圖例
   改成可點選 <button>，點選切換該層顯示）。未選＝空心（透明底+邊框），
   選中＝實底（該圖層代表色填滿），視覺區隔明確，見 .ann-chip.active
   下方逐色系規則。 */
.ann-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.ann-chip:hover {
  border-color: var(--brand-blue);
  color: var(--text);
}

.ann-chip[data-layer="support"].active {
  background: var(--diag-a);
  border-color: var(--diag-a);
  color: var(--on-diag-a);
}

.ann-chip[data-layer="resistance"].active {
  background: var(--diag-b);
  border-color: var(--diag-b);
  color: var(--on-diag-b);
}

.ann-chip[data-layer="event"].active {
  background: var(--watch-fg);
  border-color: var(--watch-fg);
  color: var(--on-watch);
}

.ann-chip[data-layer="gap"].active {
  background: var(--diag-gap);
  border-color: var(--diag-gap);
  color: var(--on-gap);
}

.ann-swatch {
  width: 12px;
  height: 8px;
  display: inline-block;
  border-radius: 2px;
  flex: 0 0 auto;
}

.ann-swatch-support {
  background: color-mix(in srgb, var(--diag-a) 50%, transparent);
  border: 1px dashed var(--diag-a);
}

.ann-swatch-resistance {
  background: color-mix(in srgb, var(--diag-b) 50%, transparent);
  border: 1px dashed var(--diag-b);
}

.ann-swatch-event {
  background: var(--watch-fg);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.ann-swatch-gap {
  background: rgba(var(--brand-blue-rgb), 0.35);
}

/* ---- 籌碼成本線 chip 群（2026-08-23）----
 * 幾何刻意與上方 .kline-annotation-bar／.ann-chip 對齊（同高、同圓角、同
 * 橫捲行為）：兩排控制列上下相鄰，任何一項不一致在 390px 手機上都會看成
 * 「沒對齊」。左側「成本線」標題固定不參與捲動，右側五顆 chip 在窄螢幕
 * 橫捲——與 AI 標註列同一套寫法（見上方 .kline-annotation-legend）。
 * 整條 bar 預設 display:none，chip-kline 端點有回資料才顯示（見 stock.js
 * applyChipKlineAvailability()）：正式站尚未部署時整組控制項不出現。
 */
.kline-cost-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.kline-cost-bar-title {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.kline-cost-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0; /* 同 .kline-annotation-legend：不加這行窄螢幕會撐寬整條 bar 而不是捲動 */
}

.kline-cost-legend::-webkit-scrollbar {
  display: none;
}

/* 未選＝空心、選中＝該線色實底（沿用 .ann-chip 的視覺語言，見上方註解）。
   .cost-chip-off＝後端回報 covered:false（該線這檔股票算不出來），灰掉且
   不可點，title 帶後端給的 reason／note——「為什麼沒有」比「假裝有」誠實。 */
.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.cost-chip:hover:not(.cost-chip-off) {
  border-color: var(--brand-blue);
  color: var(--text);
}

.cost-chip.active {
  color: var(--text);
  border-color: currentColor;
  background: rgba(var(--surface-tint-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--surface-tint-rgb), 0.04);
}

.cost-chip-off {
  opacity: 0.42;
  cursor: not-allowed;
}

/* 色塊＝線的縮影：線寬 1.5px、線型各異，色塊用同色＋同語意的虛實表現。 */
.cost-swatch {
  width: 14px;
  height: 0;
  display: inline-block;
  flex: 0 0 auto;
  border-top-width: 2px;
  border-top-style: solid;
}

.cost-swatch-foreign {
  border-top-color: var(--chart-cost-foreign);
  border-top-style: solid;
}

.cost-swatch-trust {
  border-top-color: var(--chart-cost-trust);
  border-top-style: dashed;
}

.cost-swatch-margin {
  border-top-color: var(--chart-cost-margin);
  border-top-style: dotted;
}

.cost-swatch-major {
  border-top-color: var(--chart-cost-major);
  border-top-style: dashed;
}

.cost-swatch-inventory {
  border-top-color: var(--chart-cost-inventory);
  border-top-style: dotted;
}

.cost-chip[data-cost="foreign"].active {
  color: var(--chart-cost-foreign);
}

.cost-chip[data-cost="trust"].active {
  color: var(--chart-cost-trust);
}

.cost-chip[data-cost="margin"].active {
  color: var(--chart-cost-margin);
}

.cost-chip[data-cost="major"].active {
  color: var(--chart-cost-major);
}

.cost-chip[data-cost="inventory"].active {
  color: var(--chart-cost-inventory);
}

/* K線 AI 點評卡（#kline-review-result）文字內出現的價位/日期自動轉成
   可點 chip（任務#122 M2），點擊聯動圖上對應標註閃爍高亮，見 stock.js
   injectAnnotationChips()。 */
.kline-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 120ms var(--ease);
}

.kline-chip:hover {
  filter: brightness(1.25);
}

.kline-chip-support {
  color: var(--diag-a);
  background: color-mix(in srgb, var(--diag-a) 14%, transparent);
  border-color: color-mix(in srgb, var(--diag-a) 40%, transparent);
}

.kline-chip-resistance {
  color: var(--diag-b);
  background: color-mix(in srgb, var(--diag-b) 14%, transparent);
  border-color: color-mix(in srgb, var(--diag-b) 40%, transparent);
}

.kline-chip-date {
  color: var(--watch-fg);
  background: rgba(var(--watch-rgb), 0.14);
  border-color: rgba(var(--watch-rgb), 0.4);
}

@media (max-width: 480px) {
  .kline-annotation-legend {
    font-size: 10px;
    gap: 6px;
  }

  .ann-chip {
    padding: 3px 8px 3px 6px;
  }

  /* 成本線列與 AI 標註列同步縮一階（兩排上下相鄰，只縮一排會看成沒對齊）。 */
  .kline-cost-legend {
    font-size: 10px;
    gap: 6px;
  }

  .kline-cost-bar {
    gap: 8px;
  }

  .kline-cost-bar-title {
    font-size: 10px;
  }

  .cost-chip {
    padding: 3px 8px 3px 6px;
    font-size: 10px;
  }
}

/* 2026-08-01 對比修復：底/字改接「深色浮層承字面」代幣族（app.css :root
   區塊 (h)）——原本底接 --overlay-strong（純遮罩語意）、字接 --text/
   --text-muted，淺色三主題方向相反導致標籤 1.09:1 隱形。 */
.kline-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--overlay-surface);
  border: 1px solid var(--overlay-surface-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--on-overlay);
  line-height: 1.6;
  /* 原本 nowrap（OHLC 內容都很短）；任務#122 M1 事件標記 tooltip 會帶
     較長的 note 說明文字甚至型態解讀句，改成有上限寬度的自動換行——
     OHLC 內容遠短於 240px，視覺不受影響。 */
  white-space: normal;
  max-width: 240px;
  z-index: 5;
  box-shadow: var(--shadow-pop);
  display: none;
}

.kline-tooltip b {
  color: var(--on-overlay-muted);
  font-weight: 600;
  margin-right: 6px;
}

/* 事件 tooltip 內的「學 →」連結：頁面版 .pattern-learn-link 吃
   --brand-cyan-text（淺色主題會翻成深橘/深綠），在暗底浮層上只有 2~3:1，
   故在浮層作用域內改吃 --on-overlay-link（8.4~10.7:1）。 */
.kline-tooltip .pattern-learn-link {
  color: var(--on-overlay-link);
}

/* 事件標記 tooltip 內含「學 →」型態連結時才需要接住滑鼠（見 stock.js
   updateEventTooltip()／klineTooltipHoverLock），預設 tooltip 維持
   pointer-events:none 不擋手勢/十字線判斷。 */
.kline-tooltip.kline-tooltip-interactive {
  pointer-events: auto;
}

/* ---------- 通用圖表 hover/tap tooltip（任務#64 M1） ----------
   除 K 線圖（上方 .kline-tooltip，卡片內 position:absolute 定位）外，
   籌碼動向／融資融券／大戶散戶／月營收動能／季度獲利五顆圖表共用這
   一個 fixed 定位 tooltip（JS 建立單一 DOM 節點掛在 body 下，見
   stock.js ensureGenericTooltip()），不需要各自卡片是 position:relative。
   視覺樣式與 .kline-tooltip 一致，只是定位策略不同。 */
.sv-chart-tooltip {
  position: fixed;
  pointer-events: none;
  /* 2026-08-01 對比修復：同 .kline-tooltip，改接深色浮層承字面代幣族。
     注意 chart_tooltip.js 另有一份 JS 注入版（同 class），兩處必須同步。 */
  background: var(--overlay-surface);
  border: 1px solid var(--overlay-surface-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--on-overlay);
  line-height: 1.6;
  white-space: nowrap;
  z-index: 50;
  box-shadow: var(--shadow-pop);
  display: none;
}

.sv-chart-tooltip b {
  color: var(--on-overlay-muted);
  font-weight: 600;
  margin-right: 6px;
}

/* ---------- AI 深度分析 ---------- */

.ai-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

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

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

.ai-section:first-of-type {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

.ai-section h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-cyan-text);
}

.ai-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

.ai-price-row {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.ai-price-box {
  flex: 1;
  min-width: 130px;
  background: var(--accent-bg);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
}

.ai-price-box .label {
  font-size: 11px;
  color: var(--text-muted);
}

.ai-price-box .value {
  font-size: 21px;
  font-weight: 800;
  color: var(--brand-cyan-text);
}

.ai-disclaimer {
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-faint);
}

.ai-error {
  color: var(--up);
  font-size: 13px;
  margin-top: 10px;
  background: var(--up-bg);
  border: 1px solid rgba(var(--up-rgb), 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* ---------- 五檔報價＋分時明細合併收合群組（M2，2026-07-13 使用者指示：
   移到頭部之後、「盤中若要看,是要一起看」故共用一顆收合鈕）。收合機制
   比照 .aireview-collapsible-toggle/-caret 既有慣例（transform 旋轉
   caret＋aria-expanded），獨立命名避免跟 AI 深讀摺疊區塊的 JS 選擇器
   衝突（各自綁各自的 id）。 ---------- */

.stock-realtime-wrap {
  margin-bottom: 16px;
}

.stock-realtime-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.stock-realtime-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.stock-realtime-caret {
  display: inline-block;
  transition: transform 150ms var(--ease);
  color: var(--brand-cyan-text);
  font-size: 12px;
}

.stock-realtime-toggle[aria-expanded="false"] .stock-realtime-caret {
  transform: rotate(-90deg);
}

.stock-realtime-collapsed-summary {
  font-size: 12px;
  color: var(--text-faint);
}

.stock-realtime-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.stock-realtime-cards.collapsed {
  display: none;
}

/* ---------- 五檔報價 ---------- */

.depth-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

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

.depth-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.depth-closed-hint {
  font-size: 11px;
  color: var(--text-faint);
}

/* 深度量的單位小標（2026-08-21 誠實性補洞，見 stock.js applyDepthCopy）：
   「量：張」／「量：股」。由 JS 插在卡頭標題右邊；margin-right:auto 讓它
   緊貼標題，把 .depth-card-head（space-between）的剩餘空間都推給右邊的
   收盤提示，三個元素才不會變成「左／中／右」平均散開。 */
.depth-unit-note {
  margin-right: auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(var(--surface-tint-rgb), 0.07);
  border: 1px solid var(--border);
  white-space: nowrap;
  cursor: help;
}

.depth-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.depth-col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.depth-levels {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.depth-level {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(var(--surface-tint-rgb), 0.03);
}

.depth-level .depth-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0.22;
}

.depth-col-bid .depth-bar {
  right: 0;
  background: var(--brand-cyan);
}

.depth-col-ask .depth-bar {
  left: 0;
  background: var(--brand-blue);
}

.depth-level .depth-price,
.depth-level .depth-volume {
  position: relative;
  z-index: 1;
  font-weight: 700;
}

.depth-level .depth-price.up { color: var(--up); }
.depth-level .depth-price.down { color: var(--down); }
.depth-level .depth-price.flat { color: var(--text); }

.depth-level .depth-volume {
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- 籌碼動向 / 分時明細 共用卡片 ---------- */

.chip-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

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

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

.chip-card-head h3 {
  margin: 0;
}

/* ---------- 月營收創新高徽章＋公司公告備註 ----------
   （封測者 KY99 許願、站長 2026-08-21 核准，2026-08-22 落地）

   徽章文字由後端 `record.label` 給（判定與措辭正本＝
   `datasource/revenue_narrative.py` 的 `classify_revenue_record()`），這裡
   只管樣式；三個色系各自的語意見 `web/static/stock.js` 的
   `REVENUE_RECORD_TONE`。

   **為什麼不直接套 app.css 既有的 .sv-badge-up／-warn／-blue**：那三顆是
   「漲跌數值」與「分類標籤」用的通用底色，這裡要的是「成就標記」——1px
   描邊＋內側微高光才有金屬感（UI 一律精緻質感，站長 2026-08-20 明令）。
   直接改那三顆會波及全站幾十處。色票**一律接既有代幣**（--up/--up-bg/
   --up-rgb/--amber-alt-rgb/--warn-fg/--brand-blue-rgb/--tag-blue），不新增
   寫死色——深色＋三套淺色主題自動跟著翻。

   法遵註記：app.css 徽章區塊的規則是「**分類標籤**不得用紅綠傳遞多空
   暗示」。這裡的紅不是分類標籤，是「本月營收改寫收錄期紀錄」這個已發生
   的客觀事實，與同一張卡上同樣用紅顯示的 YoY 數字同一族；三顆徽章也都
   只陳述營收事實，不含任何價格方向或買賣暗示。
*/
.chip-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.chip-head-title h3 {
  margin: 0;
}

/* 小卡（.stock-card）版：h3 原本自帶 0 0 12px，包一層之後改由容器出，
   否則標題與第一列 .metric-row 會黏在一起。 */
.stock-card-head {
  margin-bottom: 12px;
}

.rev-record-badge {
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}

/* ① 收錄期內單月新高 → 紅系（台股慣例；同一張卡的 YoY 數字也是這個紅） */
.rev-record-high {
  background: var(--up-bg);
  color: var(--up);
  border-color: rgba(var(--up-rgb), 0.38);
  box-shadow: inset 0 1px 0 rgba(var(--up-rgb), 0.22);
}

/* ② 連 N 月創新高 → 金系（最強、最罕見：全市場實測 128/2,337 檔）。
   字色用 --warn-fg 而不是 rgb(--amber-alt-rgb)：後者在三套淺色主題落在
   中亮度帶，12px 粗體在自己的淡琥珀底上摸不到 WCAG AA 4.5:1。 */
.rev-record-streak {
  background: rgba(var(--amber-alt-rgb), 0.18);
  color: var(--warn-fg);
  border-color: rgba(var(--amber-alt-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(var(--amber-alt-rgb), 0.35);
}

/* ③ N 月來新高 → 中性藍（不傳遞多空暗示） */
.rev-record-window {
  background: rgba(var(--brand-blue-rgb), 0.14);
  color: var(--tag-blue);
  border-color: rgba(var(--brand-blue-rgb), 0.32);
}

/* 公司公告備註：引用樣式小字（左側色條＋淡底），文字由 stock.js 以
   textContent 填入（MOPS 自由文字不走 innerHTML）。`overflow-wrap:
   anywhere` 是必要的：正式庫最長的備註有 90 個字且含英文品牌名與半形
   逗號串（例：4438 那則），320px 寬不斷詞就會把卡撐破。 */
.rev-note {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  border-left: 3px solid rgba(var(--brand-blue-rgb), 0.45);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(var(--surface-tint-rgb), 0.04);
}

.rev-note-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.rev-note-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.chip-summary {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.6;
}

/* 籌碼動向卡「摘要文字＋張/金額切換」同一列（任務新增：張/金額切換鈕，
   複用既有 .range-switch/.range-btn 樣式，這裡只補排版）。窄螢幕自動
   換行，切換鈕靠右對齊摘要文字自然往左長。 */
.chip-subhead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.chip-subhead-row .chip-summary {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.unit-switch {
  flex-shrink: 0;
}

/* 月營收動能／季度獲利卡「圖表/數字」切換＋單月/單季查詢下拉（任務新增）。
   .chip-controls 把下拉與 .unit-switch 放同一列靠右，複用既有 .chip-select
   /.chip-detail-box 元件；.sv-table 本身沿用 app.css 既有資料表設計系統，
   這裡不重複定義。 */
.chip-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.chip-select {
  background: rgba(var(--surface-tint-rgb), 0.03);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  max-width: 160px;
  /* 任務#66 M3：原生下拉「選項清單」由 OS/瀏覽器自行畫，不吃 select
     本身的深色背景，預設會變白底＋沿用 var(--text) 的淺色字，等於白底
     淺字看不見。color-scheme 提示瀏覽器整體用深色配色渲染原生控制項
     （Chromium 系支援），下面的 option 規則再明講一次背景/文字色做為
     保底（部分瀏覽器 option 仍可吃自訂色）。 */
  color-scheme: var(--color-scheme, dark);
}

.chip-select:focus {
  outline: none;
  border-color: var(--brand-blue);
}

.chip-select option {
  background: var(--card-bg);
  color: var(--text);
}

.chip-detail-box {
  background: var(--accent-bg);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
}

.sv-table tbody tr.row-highlight {
  background: var(--accent-bg);
}

.sv-table tbody tr.row-highlight td {
  color: var(--brand-cyan-text);
  font-weight: 700;
}

.chip-note {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

/* 子區塊規則式點評 summary 醒目化（任務 #59 M1 追加規格）：左緣 2px
   accent 豎線＋較大字級，跟 .chip-summary 疊加使用（不取代，保留原本
   flex/margin 排版）。套用於籌碼動向／融資融券趨勢／大戶散戶籌碼趨勢／
   月營收動能／季度獲利 EPS 五張卡的摘要句（見 stock.js insight*() 系列
   helper）。句中數字一律粗體等寬（.num-strong），帶正負/增減方向者依
   紅漲綠跌上色；判讀短語粗體無色（.judge）；警示短語琥珀粗體（.warn）
   ——紅綠嚴格保留給數字方向，不上在文字判讀上，避免與行情色混淆。
   分類標籤（.pattern-badge / .sv-badge 等）顏色一律不受影響（法遵）。 */
.sv-insight {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.sv-insight .num-strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: "SFMono-Regular", Consolas, "Roboto Mono", monospace;
}

.sv-insight .num-strong.up { color: var(--up); }
.sv-insight .num-strong.down { color: var(--down); }
.sv-insight .num-strong.flat { color: var(--text); }

.sv-insight .judge {
  font-weight: 700;
  color: var(--text);
}

.sv-insight .warn {
  font-weight: 700;
  color: var(--warn-fg);
}

#inst-canvas {
  width: 100%;
  height: 220px;
  display: block;
}

/* ---------- 融資融券趨勢 / 大戶散戶籌碼趨勢 / 月營收動能（新增三卡） ---------- */

#margin-canvas,
#holders-canvas,
#revenue-history-canvas,
#eps-canvas {
  width: 100%;
  height: 220px;
  display: block;
}

.chip-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12.5px;
}

.chip-table th {
  text-align: right;
  color: var(--text-muted);
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-strong);
}

.chip-table th:first-child,
.chip-table td:first-child {
  text-align: left;
}

.chip-table td {
  text-align: right;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

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

/* ---------- 分時明細收摺（固定高度約 10 列＋內部捲動，超過才顯示
   「展開全部/收合」；見 stock.js renderTimeline()） ---------- */

.timeline-scroll-wrap {
  max-height: 330px;
  overflow-y: auto;
}

.timeline-scroll-wrap.expanded {
  max-height: none;
  overflow-y: visible;
}

.timeline-toggle-wrap {
  text-align: center;
  margin-top: 8px;
}

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

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

/* ---------- 分時事件標記（規格 M2.3，任務#78「鷹眼」新增） ----------
   分時明細表格第一欄（時間）附加的小圓點標記，hover/tap 用
   SvChartTooltip（chart_tooltip.js）顯示當下 HH:MM 的盤中事件詳情，見
   stock.js applyIntradayMarkers()。 */

.sv-intraday-marker {
  display: inline-block;
  margin-left: 6px;
  color: var(--brand-cyan-text);
  font-size: 10px;
  cursor: pointer;
  vertical-align: middle;
}

/* ---------- 機構目標價（規格 M4） ---------- */

.target-price-consensus {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.tp-stat-box {
  flex: 1;
  min-width: 130px;
  background: var(--accent-bg);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
}

.tp-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.tp-stat-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--brand-cyan-text);
  margin: 2px 0;
}

.tp-stat-upside {
  font-size: 11.5px;
  font-weight: 700;
}

.target-price-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-tint-rgb), 0.02);
  border: 1px solid var(--border);
}

.tp-tier-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.tp-tier-l1 {
  background: color-mix(in srgb, var(--score-high) 14%, transparent);
  color: var(--score-high);
  border: 1px solid color-mix(in srgb, var(--score-high) 30%, transparent);
}

.tp-tier-l2 {
  background: rgba(var(--brand-blue-rgb), 0.14);
  color: var(--brand-blue);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
}

.tp-tier-l3 {
  background: rgba(var(--text-muted-rgb), 0.12);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.tp-institution {
  font-weight: 700;
  color: var(--text);
  min-width: 90px;
}

.tp-price {
  font-weight: 700;
  color: var(--brand-cyan-text);
  white-space: nowrap;
}

.tp-date {
  color: var(--text-faint);
  font-size: 11.5px;
  white-space: nowrap;
}

.tp-headline-link {
  color: var(--brand-blue);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tp-headline-link:hover {
  text-decoration: underline;
}

.tp-headline {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-price-disclaimer {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-faint);
}

/* ==========================================================================
   個股 AI 研究報告（任務#96，對標券商個股研究報告九大件）
   新樣式只落在這裡（本任務檔案邊界不准動 app.css）；文字語意分色/結論卡/
   bullet 清單/badge 沿用 app.css 既有 .hl-*／.ai-bullet-list／
   .ai-verdict-badge*／.aireview-badge* 共用樣式（aireview.js 同一套），
   這裡不重複定義，只補「這個功能獨有」的版面元件：總分分項條、資訊格、
   報告卡片版面、霧化鎖定teaser。
   ========================================================================== */

.report-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 0 0;
}

/* AI 生成事前預期備註（指揮官加案，2026-07-12）：插在各 AI 生成入口
   「產生」鈕旁/下，讀 ai_progress_modal.js ETA_RANGES 動態產生文字，見
   stock.js buildAiEtaNoteEl()。淡色小字，不搶按鈕視覺主體。 */
.ai-eta-note {
  color: var(--text-faint, var(--text-muted));
  font-size: 11px;
  margin: 4px 0 0 0;
}

.report-result {
  margin-top: 14px;
}

.report-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.report-header-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.report-badges {
  display: inline-flex;
  gap: 6px;
}

.report-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.report-meta-inline {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 4px 0 0 0;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.report-actions .btn-analyze {
  padding: 8px 16px;
  font-size: 13px;
}

.btn-report-regen {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

/* ---------- PDF 站內預覽（任務#111 M2）：頂部動作列＋網頁版/PDF 切換籤
   ＋ iframe 預覽容器。桌機專屬（≥768px），手機改用 .report-mobile-pdf-wrap
   單一按鈕，見 stock.js setupReportPreviewShell()。 ---------- */

.report-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.report-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 次要按鈕樣式（規格點 6）：沿用既有 .btn-report-regen 的外框/淡色語意，
   獨立成共用 class 供頂部動作列三顆鈕＋手機「開啟 PDF」鈕共用。 */
.report-preview-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.report-preview-btn:hover {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--accent);
}

.report-preview-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* 「⛶ 全螢幕閱讀」主要動作鈕（指揮官追加規格：動作列第一顆、視覺份量
   比其餘三顆次要鈕重，沿用品牌強調色而非幽靈框線）。 */
.report-preview-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.report-preview-btn-primary:hover {
  background: var(--brand-cyan);
  border-color: var(--brand-cyan);
  color: var(--on-brand-cyan);
}

.report-preview-tabs {
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}

.report-tab-btn {
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.report-tab-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}

.report-pdf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.report-preview-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* iframe 尺寸（任務#115 C1 指揮官追加規格）：貼近 A4 閱讀寬的
   min(100%,980px)＋近全螢幕高 85vh（原本困在三欄網格窄柱只有 70vh、寬度
   被 A4 比例公式往下壓到經常小於 400px，使用者反映看不清楚）；iframe
   src 另外附加 `#view=FitH`（見 stock.js loadReportPdfPreview()），開頁
   即自動符合寬度不必手動縮放。 */
.report-pdf-frame {
  width: min(100%, 980px);
  max-width: min(100%, 980px);
  height: 85vh;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff; /* theme-exempt-permanent: PDF 紙張白底，非主題色 */
}

.report-mobile-pdf-wrap {
  margin-bottom: 16px;
}

.report-serial-footnote {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
}

.report-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-cyan-text);
  margin: 20px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.report-subcard {
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.report-subcard h5 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.report-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

/* 「🔭 AI 全景研判」正文章節（FT-52 M3-8）：上面這個 grid 是給「四大面向
   論點」那種短條列卡用的（每卡 3-5 則一句話，並排看剛好）。長文正文每段
   378-624 字，在 1280 下被切成三欄、卡片高度參差不齊，連「本章正文基準日」
   那行提示都被擠成 grid 的一格——那讀起來不是文章。正文章節（.ai-article，
   只有這一區掛得到）改回單欄由上而下的閱讀流；行寬由既有的
   `.ai-fw-panel > #report-result .report-subcard p { max-width: 70ch }` 控制，
   寬螢幕不會拉成一行一百個字。卡與卡的間距沿用 .report-subcard 既有的
   margin-bottom，不另外加規則。 */
.report-sections.ai-article {
  display: block;
}

.report-chart-img {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin: 6px 0 12px 0;
  background: #fff; /* theme-exempt-permanent: 報表圖白底，非主題色 */
}

/* ---------- 內容活化：導讀 + 這代表什麼意義段（任務#100 M1） ---------- */

.report-reading-guide-box {
  background: rgba(var(--brand-cyan-rgb), 0.06);
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.report-reading-guide-box h5 {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: var(--brand-cyan-text);
  font-weight: 800;
}

.report-reading-guide-box p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
}

.report-insight-box {
  border-left: 3px solid var(--brand-cyan);
  background: rgba(var(--brand-cyan-rgb), 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 6px 0 14px 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- 技術名詞教學補充（任務#100 M2） ---------- */

.report-glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
}

.report-glossary-item {
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 11px;
}

.report-glossary-term {
  font-weight: 800;
  color: var(--text);
  font-size: 12px;
  margin-bottom: 3px;
}

.report-glossary-explain {
  color: var(--text-muted);
  margin-bottom: 3px;
}

.report-glossary-link a {
  color: var(--brand-cyan-text);
  font-size: 11px;
}

/* ---------- QR 碼（任務#100 M3） ---------- */

.report-qr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.report-qr-row img {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  background: #fff; /* theme-exempt-permanent: QR 碼白底，非主題色 */
  padding: 4px;
}

.report-qr-row .report-qr-caption {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- 總分卡＋分項條 ---------- */

.report-score-card {
  background: rgba(var(--brand-cyan-rgb), 0.05);
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.2);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.report-score-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.report-score-total {
  font-size: 36px;
  font-weight: 800;
  color: var(--brand-cyan-text);
  line-height: 1;
}

.report-score-max {
  font-size: 14px;
  color: var(--text-faint);
  font-weight: 600;
}

.report-score-verdict {
  flex: 1;
  min-width: 180px;
}

.report-dim-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 20px;
}

.report-dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.report-dim-label {
  width: 64px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.report-dim-track {
  flex: 1;
  height: 8px;
  background: rgba(var(--surface-tint-rgb), 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.report-dim-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
  border-radius: 4px;
}

.report-dim-value {
  width: 46px;
  text-align: right;
  color: var(--text);
  font-weight: 700;
}

/* ---------- 資訊格（公司基本資訊／估值位階） ---------- */

.report-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 12px;
}

.report-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.report-info-label {
  color: var(--text-muted);
}

.report-info-value {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.report-info-note {
  color: var(--text-faint);
  font-size: 10.5px;
}

/* ---------- 相關研究時間軸 ---------- */

.report-related-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-related-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.report-related-date {
  width: 90px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---------- FREE 教學版：霧化鎖定 teaser ---------- */

.report-fog-wrap {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 180px;
}

.report-fog-content {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  padding: 14px 16px;
}

.report-fog-placeholder {
  height: 16px;
  border-radius: 4px;
  background: rgba(var(--surface-tint-rgb), 0.08);
  margin-bottom: 10px;
  width: 92%;
}

.report-fog-placeholder:nth-child(2) {
  width: 78%;
}

.report-fog-placeholder:nth-child(3) {
  width: 60%;
}

.report-fog-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), 0.35) 0%, rgba(var(--scrim-rgb), 0.75) 100%);
}

.report-fog-lock {
  font-size: 28px;
}

/* 任務#123 M4a：AI 研究報告 teaser 鎖頭專屬插畫版（見 stock.js
   renderReportTeaser() 用法）；L2 體檢鎖／K線點評鎖仍用上面的
   .report-fog-lock emoji，不受影響。 */
.report-fog-lock-illus {
  width: 110px;
  max-width: 40%;
  height: auto;
  border-radius: var(--radius-sm);
}

.report-fog-cta-text {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
  max-width: 420px;
  line-height: 1.6;
}

/* ==========================================================================
   AI 分析中心（任務 #105：快評／體檢／研究報告三層階梯整合）
   置頂於個股頁報價頭之下、K線圖之上。結論卡／bullet 語意分色／六段收摺
   沿用 app.css 既有 .ai-verdict-badge-*／.ai-bullet-list／.aireview-section*
   共用樣式（aireview.js 同一套 schema），這裡只補「AI 分析中心獨有」的
   版面元件：卡片外殼、階梯提示列、三欄格線、情境劇本框。FREE/PRO 徽章
   直接沿用 app.css 既有 .tier-badge（nav 使用者選單同一套），不重複定義。
   ========================================================================== */

.ai-center-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

.ai-center-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}

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

.ai-center-ladder {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-muted);
}

.ai-ladder-step {
  white-space: nowrap;
}

.ai-ladder-arrow {
  color: var(--text-faint);
}

/* align-items: start（非預設的 stretch）——L3 研究報告展開後內容極長
   （九大件全文），若三欄等高會把 L1/L2 卡片硬拉伸出巨大空白，各卡改為
   依自身內容高度顯示，不互相牽動（2026-07-11 實測抓到，見任務 #105
   驗收紀錄）。 */
.ai-center-grid {
  align-items: start;
}

.ai-tier-card {
  background: rgba(var(--surface-tint-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-tier-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.ai-tier-loading-text,
.ai-tier-pending-text {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0 0 8px 0;
}

#ai-l1-body .ai-verdict-badge {
  margin-bottom: 6px;
}

#ai-l1-body #btn-quicktake-generate {
  margin-top: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
}

/* L2/L3 卡片內既有 .report-fog-wrap／.ai-error／.btn-analyze 皆沿用共用
   樣式，這裡不重複定義；.ai-tier-card 內距已比外層 .ai-card 收斂，鎖定卡
   與生成按鈕沿用即可，視覺仍一致（同一套設計系統變數）。 */

/* ---------- 多空情境劇本（L2 尾部，規則式雙劇本卡） ---------- */

.ai-scenario-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(var(--amber-alt-rgb), 0.06);
  border: 1px solid rgba(var(--amber-alt-rgb), 0.25);
  border-radius: var(--radius-sm);
}

.ai-scenario-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--watch-fg);
  margin-bottom: 8px;
}

.ai-scenario-item {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}

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

/* L1「⚡30秒讀完」小標（任務#115 C1 規格點1，放在快評卡最下方） */
.ai-l1-quicklabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  margin-top: 8px;
}

/* L2/L3「已生成」狀態列（任務#115 C1 規格點2）：三卡列只留入口與狀態，
   完整內容搬到下方全寬面板，這裡只留一句話＋錨點連結。 */
.ai-tier-status {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
  padding: 8px 10px;
  background: rgba(var(--down-rgb), 0.08);
  border: 1px solid rgba(var(--down-rgb), 0.25);
  border-radius: var(--radius-sm);
}

.ai-tier-status-link {
  color: var(--brand-cyan-text);
  text-decoration: none;
  font-weight: 700;
}

.ai-tier-status-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   AI 分析中心 全寬面板（任務#115 C1 規格點2）
   --------------------------------------------------------------------------
   L2 完整六段體檢／L3 完整研究報告從三欄網格移到這裡，跳出窄柱。刻意不給
   `.ai-fw-panel` 自己的卡片背景/邊框（維持「報告式陳列，非卡片式」，與
   L1/L2/L3 入口卡的 `.ai-tier-card` 卡片語言區隔），只用上緣分隔線＋標題
   小字定位；面板本身沒有內容時（子元素各自 display:none）不留空盒視覺，
   顯示與否完全交給 `#ai-center-fullwidth` 外層開關（見 stock.js
   showAiFullwidth()）。
   ========================================================================== */

.ai-center-fullwidth {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

.ai-fw-panel {
  margin-bottom: 28px;
}

.ai-fw-panel:last-child {
  margin-bottom: 0;
}

.ai-fw-panel-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-cyan-text);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* 結論卡置頂：報告式陳列，拿掉卡片式方框，改用左側粗色條＋較大留白，
   與 L1 入口卡裡同樣是 .ai-conclusion-card 的緊湊卡片版式做出區隔
   （app.css 預設 .ai-conclusion-card 是有背景/邊框的方框卡，這裡整個
   覆寫掉，只在全寬面板情境生效，不影響其餘頁面既有用法）。 */
.ai-fw-panel .ai-conclusion-card {
  background: transparent;
  border: none;
  border-left: 3px solid var(--brand-cyan);
  border-radius: 0;
  padding: 4px 0 4px 16px;
  margin-bottom: 22px;
}

.ai-fw-panel .ai-verdict-badge {
  font-size: 14px;
  padding: 5px 16px;
}

/* 六段桌機兩欄排列（任務#115 C1 規格點2）：每個 .aireview-section 當成
   一個網格項目（非逐行 CSS columns——bullet list 逐行分欄在視覺上會被
   攔腰截斷，整段當一格才不會斷章），窄螢幕/平板降回單欄。 */
@media (min-width: 900px) {
  .ai-fw-panel .aireview-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 40px;
  }
}

/* 行寬上限～70ch（規格點2）＋段間距呼吸：散文段落/條列文字加寬度上限，
   避免全寬面板把長句拉到一行塞滿 980px 螢幕不好讀；六段兩欄本身欄寬已
   遠小於 70ch，這裡主要約束結論區與 L3 報告內文。 */
.ai-fw-panel .aireview-paragraph,
.ai-fw-panel .ai-bullet-list,
.ai-fw-panel .ai-verdict-reason,
.ai-fw-panel .ai-data-notice,
.ai-fw-panel > #report-result p,
.ai-fw-panel > #report-result .report-subcard p {
  max-width: 70ch;
}

.ai-fw-panel .aireview-section {
  margin-bottom: 20px;
}

/* ---------- AI K線技術點評（任務#115 C2 新接前端；任務#133 起搬進
   AI 分析中心 L2 全寬面板尾端的「技術視窗深讀」摺疊區塊，不再是獨立卡，
   下面這幾個 #kline-review-* id 選擇器維持不變，只是外層容器換了） ---------- */

#kline-review-days-switch {
  flex-wrap: wrap;
}

#kline-review-intro .report-hint {
  margin-bottom: 0;
}

/* ---------- 技術視窗深讀摺疊區塊（任務#133）----------
   放在 .ai-fw-panel 內、#ai-l2-result 之後，維持全寬面板「報告式陳列」
   語言但用一圈淡邊框把它跟上方散文段落區隔出來（它內部是互動元件：
   天數切換＋按鈕＋結果，跟上面純文字段落不同語言）。標題列常駐、不隨
   摺疊狀態隱藏，caret 用旋轉表示收合/展開（比照 app.css 既有
   .aireview-section-caret 的 rotate 手法，唯這裡預設收合、展開時歸零，
   跟六段內文子區塊「預設展開、收合轉 -90deg」的方向相反，各自的預設態
   都是 rotate(0)＝目前可見的那個字形方向）。 */

.aireview-collapsible {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

.aireview-collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.aireview-collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.aireview-collapsible-caret {
  display: inline-block;
  transition: transform 150ms var(--ease);
  color: var(--brand-cyan-text);
  font-size: 12px;
  transform: rotate(-90deg);
}

.aireview-collapsible-toggle[aria-expanded="true"] .aireview-collapsible-caret {
  transform: rotate(0deg);
}

.aireview-collapsible-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.aireview-collapsible-body {
  margin-top: 14px;
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 深讀↔K線副圖聯動 chips（任務#150 M3）：點擊捲動回K線卡＋把副圖2切到
   對應內容。沿用 .chip 基底色調但改成可點擊按鈕語意（cursor/hover/active
   狀態），不是純展示用的靜態 .chip。 */
.kline-deepdive-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.kline-deepdive-link-chip {
  background-color: rgba(var(--brand-blue-rgb), 0.1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kline-deepdive-link-chip:hover {
  background-color: rgba(var(--brand-blue-rgb), 0.22);
  color: var(--text);
  border-color: rgba(var(--brand-blue-rgb), 0.4);
}

/* 目前副圖2就是這顆 chip 對應的內容時醒目標示（點擊後立即回饋，見
   stock.js syncKlineDeepDiveLinkChips()）。 */
.kline-deepdive-link-chip.active {
  background-color: rgba(var(--brand-blue-rgb), 0.32);
  color: var(--text);
  border-color: var(--brand-blue);
  font-weight: 600;
}

/* ---------- PDF 全螢幕閱讀沉浸模式（任務#115 C1 強化，指揮官追加規格）
   ---------- */

.report-pdf-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4, 7, 14, 0.92) /* theme-exempt-permanent: 沉浸閱讀固定深色底（PDF 閱讀器 chrome），四主題一致 */;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.report-pdf-fullscreen-close {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 2001;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3) /* theme-exempt-permanent: 固定深色底上的白色控制項 */;
  background: rgba(255, 255, 255, 0.08) /* theme-exempt-permanent: 同上 */;
  color: #fff; /* theme-exempt-permanent: 同上 */
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.report-pdf-fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.2) /* theme-exempt-permanent: 同上 */;
}

.report-pdf-frame-fullscreen {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border-radius: 10px;
}

@media (max-width: 480px) {
  .report-pdf-fullscreen-overlay {
    padding: 8px;
  }

  .report-pdf-fullscreen-close {
    top: 10px;
    right: 10px;
  }
}

/* ==========================================================================
   起始頁 Hero（任務 #107 M2：#stock-start，取代原本純文字 #empty-state）
   --------------------------------------------------------------------------
   查詢前顯示：置中頁名/tagline/放大搜尋框/熱門股 chips -> 四格漫畫卡 ->
   報告聚光燈橫幅 -> 查一檔還會得到 checklist。查詢成功後 stock.js
   searchStock() 把整塊切 display:none，交給 #stock-result；resetToHero()
   清空查詢時切回來。四格漫畫卡視覺語言比照策略實驗室 backtest.html 的
   .bt-persuade-card（火柴人 SVG，stroke=currentColor 繼承卡片文字色＋
   CSS 變數點綴道具色，暗色主題不需要另外配色），只參考風格、不動
   backtest 檔案。搭配 app.css 既有 fadeIn 動畫（見該檔 .tab-panel 用法），
   display:none -> block 切換時會自動重播淡入效果。
   ========================================================================== */

.stock-start {
  animation: fadeIn 220ms var(--ease);
}

.stock-start-hero {
  text-align: center;
  max-width: 720px;
  margin: 8px auto 32px;
  padding: 4px 8px 0;
}

.stock-start-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.4vw + 18px, 36px);
  font-weight: 800;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.stock-start-tagline {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* 放大置中搜尋框：沿用 .search-bar 既有邏輯與子元素（input/button/
   suggest 皆不變），這裡只加大尺寸並置中，不重寫查詢/建議 JS。 */
.stock-start-search {
  max-width: 520px;
  margin: 0 auto 14px;
}

.stock-start-search input {
  padding: 15px 18px;
  font-size: 17px;
  border-radius: 12px;
}

.stock-start-search button {
  padding: 15px 26px;
  font-size: 15px;
  border-radius: 12px;
}

.stock-start .search-error {
  max-width: 520px;
  margin: 0 auto 12px;
  text-align: left;
}

/* 任務#123 M4b：查無結果插畫變體在 Hero 內維持置中（蓋過上面
   .stock-start .search-error 的 text-align:left，兩者 specificity
   相同、用第三個 class 加權確保這條贏，不論來源順序）。 */
.stock-start .search-error.search-error-noresult {
  text-align: center;
}

.stock-hot-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.stock-hot-chips-label {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-right: 2px;
}

.hot-chip {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}

.hot-chip:hover {
  border-color: var(--brand-cyan);
  color: var(--text);
  transform: translateY(-1px);
}

.stock-hot-chips-note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- 四格漫畫卡：個股透視鏡能看穿什麼 ---------- */

.stock-comic-section {
  margin: 8px 0 28px;
}

.stock-comic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stock-comic-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

/* 圖改用品牌插畫（任務#115 C3，ill_01~04.webp，900×672）。指揮官追加
   排版鐵規：插畫是配角，不可撐爆版面——容器固定 aspect-ratio 16/10 且
   max-height 上限 280px（兩者併用：寬版面走比例、窄版面被上限收住），
   `.stock-comic-grid` 既有 4 欄格線（≥1100px 桌機 4 欄，480px 以下降 2
   欄，見下方媒體查詢）保證首屏「圖＋標題＋文案」同時可見，不會出現
   單欄全版寬圖片撐爆版面的狀況。載入用純 CSS fade-in（無 JS 開銷），
   版式手法比照 backtest.html #116 同批插畫的 .bt-persuade-svg-wrap/
   .bt-persuade-img（只參考風格、不動 backtest 檔案）。 */
.stock-comic-svg-wrap {
  margin: -16px -16px 10px;
  aspect-ratio: 16 / 10;
  max-height: 280px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-2);
}

.stock-comic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: stock-img-fadein 0.5s ease forwards;
}

@keyframes stock-img-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.stock-comic-title {
  margin: 2px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.stock-comic-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- 文圖連動橫幅（任務#130 落點3，ill_27 橫幅插畫） ----------
   四格卡下方的獨立曝光橫幅，K線標註是新王牌但藏在結果頁深處沒人知道。
   版型直接照抄下方報告聚光燈橫幅（.stock-spotlight-*）任務#129 改版後的
   「模糊延伸」新容器：容器背景＝同圖 blur+調暗 cover 鋪滿，前景＝
   object-fit:contain 完整顯示置中，避免寬螢幕下 aspect-ratio 被
   max-height 蓋過導致有效比例暴衝、裁掉機器人主體。ill_27 原生 1400×593
   ≈2.36:1，與容器 aspect-ratio:21/9（2.33:1）差距<2%，即使 max-height
   蓋過也在安全範圍內。inline style 的 background-image（見 stock.html
   用法）與前景 <img src> 同一張圖。 */
.stock-linklit {
  background: linear-gradient(135deg, rgba(var(--brand-violet-rgb), 0.1), rgba(var(--brand-cyan-rgb), 0.08)), var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0 0 26px;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.stock-linklit-text {
  min-width: 0;
  padding: 0 28px;
  text-align: center;
}

.stock-linklit-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--brand-cyan-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.stock-linklit-title {
  margin: 0 0 14px;
  font-size: clamp(17px, 1vw + 14px, 21px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.stock-linklit-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.stock-linklit-badge {
  background: var(--brand-gradient-soft);
  border: 1px solid rgba(var(--brand-cyan-rgb), 0.3);
  color: var(--on-brand-soft);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.stock-linklit-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 320px;
  overflow: hidden;
  background-color: var(--bg-2);
  background-size: cover;
  background-position: center;
}

.stock-linklit-visual::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.55);
  transform: scale(1.12);
  z-index: 0;
}

.stock-linklit-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  animation: stock-img-fadein 0.5s ease forwards;
}

/* ---------- 「鎮店之寶」報告組合區（.stock-report-combo，任務#157 案2
   起始頁重排新增） ----------
   取代舊版「報告聚光燈橫幅」（.stock-spotlight-*，上圖下文、全版寬置中）
   ＋獨立「查一檔你還會得到」checklist 兩塊；舊版問題：報告賣點做完卻
   要滑到頁尾才看得到（曝光位置差），checklist 又獨立佔一整節顯得像
   「順便補的孤兒區塊」。新版左右分欄：左＝報告賣點（標語＋四賣點 pill＋
   CTA＋一張真報告頁縮圖），右＝checklist 2×2（沿用既有 .stock-checklist-*
   內容與 2 欄 grid，只是搬進較窄的右欄，欄寬本來就適合）。桌機
   左 58/右 42 分欄；≤900px 收成單欄堆疊（報告在上、checklist 在下）；
   ≤480px 再收緊內距，比照其餘首頁區塊既有斷點慣例。

   `.stock-spotlight-kicker`/`.stock-spotlight-badges`/`.stock-spotlight-badge`
   三顆葉節點樣式（品牌 kicker 小字／賣點 pill）與版面無關，直接沿用不
   重複定義；舊版外殼 `.stock-spotlight`/`.stock-spotlight-text`/
   `.stock-spotlight-visual`/`.stock-spotlight-img`（上圖下文全版寬置中殼、
   模糊延伸大圖）已無 HTML 使用，一併移除，避免死 CSS。 */

.stock-report-combo {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin: 0 0 28px;
}

.stock-report-combo-report {
  flex: 1 1 58%;
  min-width: 0;
  background: linear-gradient(135deg, rgba(var(--brand-cyan-rgb), 0.08), rgba(var(--brand-violet-rgb), 0.1)), var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
}

.stock-report-combo-title {
  margin: 0 0 14px;
  font-size: clamp(17px, 1vw + 14px, 21px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.5;
}

.stock-report-combo-badges {
  justify-content: flex-start;
  margin-bottom: 16px;
}

/* .btn-analyze 原本只用在 <button>，這裡是全站第一個 <a class="btn-analyze">
   （CTA 導去 /stock?id=2330 而非呼叫 API），補上 anchor 預設底線的重設。 */
.stock-report-combo-cta {
  align-self: flex-start;
  margin-bottom: 18px;
  text-decoration: none;
}

/* 「縮圖」不是「大圖」：素材原生 900×620（≈1.45:1）若整寬塞滿左欄
   （桌機寬螢幕下左欄可達 700px+），高度會跟著撐到 480px+，反而讓報告
   縮圖比標題／賣點／CTA 加起來還高，喧賓奪主。這裡改成固定 max-height
   （縮圖語意的核心：矮、寬度隨內容置中，不吃滿欄寬），object-fit:contain
   避免裁切走版（縮圖本身已含深色底，contain 留白幾乎無感）。 */
.stock-report-combo-thumb {
  margin-top: auto;
  max-height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  justify-content: center;
}

.stock-report-combo-thumb-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 200px;
  max-height: 200px;
  object-fit: contain;
  opacity: 0;
  animation: stock-img-fadein 0.5s ease forwards;
}

.stock-report-combo-checklist {
  flex: 1 1 42%;
  min-width: 0;
}

/* descendant combinator（非單獨 class）故意拉高優先權：確保贏過稍後
   宣告的 `.stock-checklist-title{text-align:center}` 基礎樣式，不受
   兩份規則在檔案中前後順序影響（equal specificity 時後宣告的會贏，這裡
   用 0,2,0 > 0,1,0 直接排除順序依賴）。 */
.stock-report-combo-checklist .stock-checklist-title {
  text-align: left;
}

.stock-report-combo-checklist .stock-checklist-grid {
  height: calc(100% - 40px);
}

.stock-report-combo-checklist .stock-checklist-item {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .stock-report-combo {
    flex-direction: column;
  }

  .stock-report-combo-checklist .stock-checklist-grid {
    height: auto;
  }
}

/* ---------- 查一檔你還會得到 checklist（.stock-checklist-*，任務#157 案2
   起改為 .stock-report-combo-checklist 右欄專用，2 欄 grid 沿用） ---------- */

.stock-checklist-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}

.stock-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stock-checklist-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.stock-checklist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

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

.stock-checklist-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ==========================================================================
   個股頁頂部徽章列的排版幾何（2026-08-21 站長 08:31 截圖回報）
   ==========================================================================
   症狀（實測重現，harness 全矩陣 270 組中 240 組違規）：
     ·「← 重新查詢」帶著 margin-left:auto，在 .name-line 換行之後會被推到
       **它落到的那一列**的最右端；那一列前半段常常正好是被擠下來的產業
       徽章／法說膠囊，於是中間空出一大段（375px 實測空 100px），視覺上
       就是「法說膠囊被擠到第二行右側孤立、與重新查詢互撞」。
     · .stock-events-slot 是 inline-flex 且不換行 ⇒ 兩顆事件小標是一顆
       「不可分割的原子」，寬度一超過剩餘空間就整組跳行，跟前面的產業
       徽章斷開。
   修法（B15/B27：先算最小寬幾何，再修在正確層級）：
     ① 層級＝**stock.css**，不動 app.css。理由：`.stock-header`／
        `.name-line`／`.stock-mini-search`（2026-08-21 取代 `.stock-back-btn`
        的常駐迷你搜尋列，見下方）三個 class 全站只有 stock.html 用
        （grep web/ 確認，零其他命中）；.industry-badge 雖然是 app.css 的
        全域元件，但它本身的樣式一個位元組都不需要改——要改的是**容器的
        排列規則**。動 app.css 會逼全站 45 個模板 bump 版號，換不到任何
        東西。
     ② 徽章一律左對齊流式排列：容器 flex-wrap 已有，這裡補 row-gap 與
        min-width:0，並讓事件小標容器 `display:contents` ⇒ 兩顆膠囊變成
        .name-line 的**直接** flex item，跟在產業徽章後面同一個流裡逐顆
        換行，不再整組跳行、不再孤行。
     ③ **右端不再有任何搶位者**：那個帶 margin-left:auto 的元素（先是
        「← 重新查詢」按鈕、後來是常駐迷你搜尋列）已於 2026-08-21 22:48
        整個搬出 .stock-header，改掛在個股卡之外的 .stock-mini-search-row。
        中間曾用一個零視覺換行器 .name-line-break 逼它獨占一列，元素既然
        離開了，換行器也一併退場（留著＝最後多一條 row-gap 的空列）。
        現在 .name-line 只剩股名／代號／市場・產業徽章／事件小標，全部
        左對齊流式換行，那段大空隙在幾何上不可能再出現。
   驗收：harness 逐組量 flex 列／相鄰間距／重疊／溢出，270 組全綠。 */

.stock-header .name-line {
  /* 換行後的列距（原本只有單一 gap:8px，換行時上下太貼） */
  row-gap: 6px;
  /* 長公司名（8 字 + -KY）在 375px 不得把整列撐出卡片外 */
  min-width: 0;
}

.stock-header .name-line > * {
  min-width: 0;
}

.stock-header .stock-name {
  /* 極端長名（KY 股全名）寧可斷字，也不要橫向溢出 */
  overflow-wrap: anywhere;
}

/* 事件小標（#238，stock_events.css）在**個股頁頭部**改成同流排列。
   只在這個容器內覆寫，不動 stock_events.css 本體——那份樣式同時服務
   自選股磚與持股表，那兩處的容器排列規則不一樣（見 stock_events.css
   的既有註解），不該被個股頁的需求連坐。 */
.stock-header .name-line .stock-events-slot {
  display: contents;
}

.stock-header .name-line .sv-evt-badge {
  /* display:contents 之後改由父層 gap 決定間距，膠囊自己的 margin 要歸零，
     否則事件小標之間會是 gap+margin 的雙重間距，跟其他徽章對不齊。 */
  margin-left: 0;
}

/* ==========================================================================
   結果頁頂部：常駐迷你搜尋列（2026-08-21，封測 power user 建議、站長採納）
   ==========================================================================
   取代更早的「← 重新查詢」按鈕（.stock-back-btn 已整段移除）。舊流程是
   「按鈕 → 回起始頁 → 再打一次代號」三步，新的是「打字／選建議 → 換好了」
   一步。

   **2026-08-21 22:48 站長截圖二修：整個元件搬出個股卡。** 首發版把它放在
   .stock-header .name-line 內（靠一個零視覺換行器逼它獨占一列），實機看起來
   就是「台積電名字下面、價格上面插了一條搜尋框」——它被讀成這檔股票的一個
   欄位，而且把卡片最重要的兩件事（是誰、多少錢）硬生生切成上下兩段。原始
   提案（封測 power user）要的是**頁面層級**的換股工具列。所以現在的骨架是
   個股卡外面、#stock-result 的第一列：

       #stock-anchor-tabs（sticky）
       └ .stock-mini-search-row   ← 這一條
         .stock-header            ← 個股卡（股名／徽章／價格／動作鈕）

   幾何預算：桌機 min-height 34px ＋ row 的 margin-bottom 8px ＝ 42px；手機
   40px ＋ 8px ＝ 48px（元件本身仍在 44px 規格上限內）。卡片內原本被它佔掉的
   38px 同時還回去，整頁高度是持平的，不推擠卡片。

   桌機**靠右**：這是一條工具列，左緣要留給股名當視覺錨點（卡片標題與這條
   搜尋框搶同一個左緣會互相干擾）。固定寬 320px 而不是百分比——同一個元件在
   不同股票／不同頁寬下寬度亂跳，看起來就是壞的。手機在 ≤640px 那段改滿寬。

   建議下拉沿用 .search-suggest（樣式在 stock.html 的 style 區塊，與 Hero
   大搜尋框**同一份**），.stock-mini-search 只負責提供 position:relative 這個
   定位基準。 */
.stock-mini-search-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* 上方緊貼 sticky tabs、下方離個股卡 8px；自己不長多餘的上邊距。 */
  margin: 0 0 8px;
}

.stock-mini-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  width: 320px;
  max-width: 100%;
  min-height: 34px;
  padding: 0 6px 0 3px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(var(--scrim-rgb), 0.25);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease),
    background-color 160ms var(--ease);
}

.stock-mini-search:hover {
  border-color: rgba(var(--brand-blue-rgb), 0.45);
  background: var(--card-bg-hover);
}

.stock-mini-search:focus-within {
  border-color: var(--accent);
  background: var(--card-bg-hover);
  box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), 0.18);
}

/* 🔍 就是送出鈕（stock.html 帶 tabindex="-1"：輸入框按 Enter 即送出，
   鍵盤使用者不需要多一站 Tab）。 */
.stock-mini-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms var(--ease), opacity 160ms var(--ease);
}

.stock-mini-search-btn:hover {
  transform: scale(1.12);
}

/* 查詢中：🔍 自己轉一圈當進度感（結果頁還在畫面上，不需要另一顆 spinner
   或取消鈕，320px 內也塞不下）。狀態由 stock.js setSearchBtnLoading() 掛。
   **只加 class，不 disable 按鈕**——預設送出鈕一被 disabled，輸入框按 Enter
   就整個不送出（HTML 隱式送出規則），那是靜默失敗；理由詳見 stock.js
   setSearchBtnLoading() 的註解。 */
.stock-mini-search.is-loading .stock-mini-search-btn {
  animation: sv-mini-search-spin 900ms linear infinite;
}

@keyframes sv-mini-search-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-mini-search,
  .stock-mini-search-btn {
    transition: none;
  }

  .stock-mini-search.is-loading .stock-mini-search-btn {
    animation: none;
    opacity: 0.45;
  }
}

.stock-mini-search-input {
  flex: 1 1 auto;
  min-width: 0;
  /* min-height 而不是 height：Android 系統字級放大（或使用者自訂大字）時，
     文字要能把輸入框撐高，不能被固定高度切掉半個字。容器也是 min-height，
     兩層一起長。 */
  min-height: 30px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.stock-mini-search-input::placeholder {
  color: var(--text-faint);
}

@media (max-width: 480px) {
  .stock-comic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stock-comic-card {
    padding: 12px 12px 14px;
  }

  /* 指揮官追加排版鐵規第4點：手機（375px）容器裁切上限收到 220px
     （桌機是 280px/320px），插畫縮圖但同屏仍能看到圖＋標題＋文案。 */
  .stock-comic-svg-wrap {
    max-height: 220px;
  }

  .stock-report-combo-report {
    padding: 16px 18px 20px;
  }

  .stock-linklit-title {
    max-width: none;
  }

  .stock-linklit-text {
    padding: 0 18px;
  }

  .stock-linklit-visual {
    max-height: 220px;
  }

  .stock-checklist-grid {
    grid-template-columns: 1fr;
  }

  .stock-start-search {
    max-width: 100%;
  }

  .stock-start-search input,
  .stock-start-search button {
    font-size: 15px;
    padding: 13px 16px;
  }
}


/* 快評卡資料日標示（2026-07-13 使用者回饋：無從判斷快評新鮮度） */
.ai-l1-datenote {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

.ai-l1-datenote.stale {
  color: var(--warn-fg);
  font-weight: 600;
}

/* ==========================================================================
   法說會動態（W7-P1 M3，施工正本 docs/w7p1_front_spec_20260722.md）：
   個股頁新收折區塊。版面沿用 .chip-card／.empty-state 既有殼，這裡只補
   「這個功能獨有」的事件卡／摘要正文樣式，不動全域 app.css。
   ========================================================================== */

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

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

.conference-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.conference-date {
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.conference-loc {
  color: var(--text-muted);
  font-size: 12px;
}

.conference-links {
  margin: 4px 0 8px;
}

.conference-links a {
  color: var(--brand-blue);
  text-decoration: none;
  font-size: 12px;
}

.conference-links a:hover {
  text-decoration: underline;
}

/* 會前揭露小卡（2026-08-23）：法說會還沒開、簡報已上傳時的來歷說明。
   左側藍色細軸＋淡藍底，與下方「查看 AI 摘要」鈕同一個藍色家族，讀者
   一眼看得出這兩塊講的是同一份東西。 */
.conference-pre {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue);
  background: rgba(var(--brand-blue-rgb), 0.06);
}

.conference-pre-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.conference-pre-note {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.btn-conference-summary {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-blue);
  background: rgba(var(--brand-blue-rgb), 0.1);
  color: var(--brand-blue);
  cursor: pointer;
}

.btn-conference-summary:hover {
  background: rgba(var(--brand-blue-rgb), 0.18);
}

.btn-conference-summary:disabled {
  cursor: default;
  opacity: 0.7;
}

.conference-summary-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.conference-summary-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}

.conference-summary-box h5 {
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.conference-summary-box h5:first-child {
  margin-top: 0;
}

.conference-summary-box ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.conference-summary-box p {
  margin: 0;
  color: var(--text);
}

.conference-summary-pages {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-faint);
}

.conference-summary-disclaimer {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-faint);
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}

.conference-not-covered-note {
  font-size: 12px;
  color: var(--text-faint);
}

/* 舉一反三修復 20260728：淺色主題 i 圈說明鈕（10px 小字）疊在型態徽章
   tint 底上只有 3.4 級對比，faint/muted 都不夠深；light-* 升到 --text
   （實測 8+），深色不動。 */
html[data-theme^="light-"] .pattern-info-icon,
html[data-theme="champagne"] .pattern-info-icon {
  color: var(--text);
}


/* ================= 交易警示狀態 ＋ 除權息資訊（M2，2026-08-19）=================
 *
 * 兩張卡的殼沿用既有 .chip-card／.chip-card-head／.empty-state，這裡只補殼裡面
 * 的元件。**零寫死色票**：整段沒有任何 # 開頭的十六進位值，紅黃綠一律走
 * --danger / --warn-* / --down 三組主題代幣，五套主題（light-a/b/c、champagne、
 * dark）自動跟著翻。
 *
 * 手機（≤640px）規則同全站慣例：三格與四格一律塌成 repeat(2, minmax(0,1fr))，
 * minmax(0,1fr) 是關鍵——用 1fr 的話格子裡的長數字（例如「約每 20 分鐘一盤」）
 * 會把 grid 撐出容器寬，整張卡橫向溢出。
 */

/* [hidden] 生效保證：display 被作者規則寫死的元素（下面的三組 grid）會**蓋掉**
   瀏覽器預設給 [hidden] 的 display:none，隱藏就會失效（app.css:2220 記載過的
   同一個坑）。整張卡本身沒有作者 display 規則，這裡仍一併釘住——那兩張卡在
   端點未部署時靠 hidden 整卡不出現，是本棒最重要的誠實防線，不能靠預設值賭。 */
#stock-tab-alerts[hidden],
#stock-tab-dividend[hidden],
.sv-alert-grid[hidden],
.sv-alert-reason[hidden],
.sv-div-grid[hidden],
.sv-div-fill-grid[hidden] {
  display: none;
}

/* ---------- 交易警示狀態 ---------- */

.sv-alert-head-note {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
}

.sv-alert-status {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  line-height: 1.6;
}

/* 三態各自的底與框。實底膠囊的顏色在 .sv-alert-pill 那一組，這裡只管容器。 */
.sv-alert-status.is-disposal {
  background: var(--danger-bg);
  border-color: rgba(var(--danger-rgb), 0.35);
}

.sv-alert-status.is-attention {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

/* 無警示＝整卡收成一行：只有一顆綠框膠囊＋一句話，不畫任何格子。 */
.sv-alert-status.is-clear {
  background: var(--down-bg);
  border-color: var(--down);
  align-items: center;
}

.sv-alert-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.sv-alert-pill.is-disposal {
  color: var(--on-accent);
  background: var(--danger);
  border-color: var(--danger);
}

.sv-alert-pill.is-attention {
  color: var(--on-watch);
  background: var(--warn-fg);
  border-color: var(--warn-fg);
}

/* 綠色這一顆刻意是**框**不是實底：它代表「沒有事」，實底會讓沒事看起來像
   一件事（與紅黃兩顆搶同一級視覺重量）。 */
.sv-alert-pill.is-clear {
  color: var(--down);
  background: transparent;
  border-color: var(--down);
}

.sv-alert-text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.sv-alert-text.is-plain {
  font-weight: 400;
  color: var(--text-muted);
}

/* 處置為主狀態時，注意股降級成整列寬的一行副註（不搶主狀態的版位）。 */
.sv-alert-subnote {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

.sv-alert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.sv-alert-cell {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.sv-alert-cell .k {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.sv-alert-cell .v {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.sv-alert-reason {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.sv-alert-reason .k {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.sv-alert-reason-more {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-cyan);
  cursor: pointer;
}

.sv-alert-fine {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.6;
}

/* ---------- 除權息資訊 ---------- */

/* 右上角回羅盤的連結：借用 .range-btn 的外觀，補掉 <a> 與 <button> 的差別
   （底線、行高、預設 display）。 */
a.sv-div-compass-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1.4;
}

.sv-div-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 12px;
}

.sv-div-main-label {
  font-size: 12px;
  color: var(--text-muted);
}

.sv-div-main-date {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}

.sv-div-countdown {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--warn-fg);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
}

.sv-div-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sv-div-fill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sv-div-cell {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}

.sv-div-cell .k {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.sv-div-cell .v {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

/* 填息率是「歷史上填回去的比例」——用全站的跌色（綠）標它是好結果，與漲跌
   紅綠語意一致（本站紅漲綠跌）。缺值那一格走 .v 的預設字色，不上綠——把
   「—」染綠等於暗示一個不存在的好消息。 */
.sv-div-cell .v.is-fill {
  color: var(--down);
}

.sv-div-sep {
  height: 1px;
  background: var(--border);
  margin: 14px 0 12px;
}

.sv-div-subtitle {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

@media (max-width: 640px) {
  .sv-alert-grid,
  .sv-div-grid,
  .sv-div-fill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sv-div-main-date {
    font-size: 18px;
  }

  .sv-alert-text {
    font-size: 13px;
  }
}

/* 個股 header 手機版排版（站長 2026-08-19 23:08 實機截圖：價格懸在左中、三顆動作鈕
   在右側疊成一欄、寬度不一、大片留白）。≤640px：整張卡改直排——第一列股名／代號
   ／徽章（其後由換行器把迷你搜尋列推到下一列滿寬），第二列價格＋漲跌幅獨占一行，第三列動作鈕等寬並排。
   桌機版不動（仍是左名右價一列）。舉一反三：只有 stock.html 用這組 class，
   其他頁 header 沒有同型結構（grep 確認）。 */
@media (max-width: 640px) {
  .stock-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 12px;
  }
  .stock-header .name-line {
    gap: 6px 8px;
  }
  .stock-header .price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    text-align: left;
  }
  .stock-header .price-line .close-price {
    order: 1;
  }
  .stock-header .price-line .change-pct {
    order: 2;
    margin-left: 0;
  }
  /* flex 換行器：價格＋漲跌幅獨占一列，按鈕一律從下一列開始 */
  .stock-header .price-line::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 3;
  }
  .stock-header .price-line .btn-watch-toggle,
  .stock-header .price-line .btn-ai-review {
    order: 4;
    flex: 1 1 calc(50% - 4px);
    margin-left: 0;
    padding: 0 8px;
    min-height: 42px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
  }
  .stock-header .price-line .watch-hint {
    order: 5;
    flex: 1 1 100%;
    margin: 0;
  }
  /* 常駐迷你搜尋列（2026-08-21；22:48 起改掛在個股卡外的
     .stock-mini-search-row，選擇器跟著脫離 .stock-header）：手機滿寬。
     字級刻意給到 16px——iOS Safari 對 font-size < 16px 的輸入框會在聚焦時
     自動把整頁放大，那是換一檔股票時最惱人的跑版來源。高度 40px（含容器
     邊框仍在 44px 規格上限內）好按。 */
  .stock-mini-search-row .stock-mini-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-height: 40px;
  }

  .stock-mini-search-row .stock-mini-search-input {
    min-height: 34px;
    font-size: 16px;
  }

  .stock-mini-search-row .stock-mini-search-btn {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}

/* ==========================================================================
   興櫃（emerging）價格口徑與做市商報價（興櫃二期 S3，2026-08-21）
   ==========================================================================
   由 stock.js 動態插入的三組元素：
     .sv-emg-basis   價格旁的口徑小字（議價制・最近成交價／當日成交均價…）
     .sv-emg-meta    頭部最後一列：前日均價／當日均價／做市商報買賣＋註記
     .sv-emg-spread  做市商報價卡內的買賣價差列
   加上 .close-price.sv-emg-no-trade（零成交時價格位置的文字態）與
   .depth-card.is-emerging（一檔版的行距放大）。

   零寫死色票：全部走既有代幣，五套主題自動跟著走。 */

.sv-emg-basis {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--brand-cyan-text);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.sv-emg-meta {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  animation: fadeIn 220ms var(--ease);
}

.sv-emg-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  line-height: 1.4;
}

.sv-emg-item i {
  font-style: normal;
  color: var(--text-muted);
}

.sv-emg-item b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sv-emg-note {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-faint);
}

/* 零成交：價格位置放的是一句話不是數字，字級要降下來才不會像「壞掉的價格」。 */
.close-price.sv-emg-no-trade {
  font-size: clamp(15px, 0.5vw + 13px, 18px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* 一檔版：只有一列，行距/字級放大一階，不然一張卡裡孤零零兩條細線很像沒載完。 */
.depth-card.is-emerging .depth-table {
  gap: 12px;
}

.depth-card.is-emerging .depth-level {
  padding: 9px 11px;
  font-size: 13px;
  border-radius: 6px;
}

.sv-emg-spread {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-tint-rgb), 0.04);
  border: 1px solid var(--border);
}

.sv-emg-spread-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.sv-emg-spread-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sv-emg-spread-note {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
}

/* 手機版（≤640px）：.price-line 在這個斷點是 flex + order 排版（見上方
   既有區塊），沒有指定 order 的新元素會掉到 order:0＝跑到價格前面。口徑
   小字給 order:2，與 .change-pct 同階、DOM 順序在其後，就會緊跟在漲跌幅
   右邊；換行器 ::after 是 order:3，按鈕 order:4，版位不受影響。 */
@media (max-width: 640px) {
  .stock-header .price-line .sv-emg-basis {
    order: 2;
    margin-left: 0;
  }
  .sv-emg-meta {
    gap: 6px 14px;
    padding-top: 9px;
  }
  .sv-emg-note,
  .sv-emg-spread-note {
    flex: 1 1 100%;
  }
}


/* ---------------------------------------------------------------------------
 * 股價趨勢通道（五線譜）＋歷史估值分位溫度計（P4 亮點 #2／#1，2026-08-21）
 * ---------------------------------------------------------------------------
 * 兩張卡的殼沿用既有 .chip-card／.chip-card-head／.empty-state／
 * .sv-metric-disclaimer，這裡只補殼裡面沒有的東西：畫布高度、五條線的圖例
 * 色塊、五個價位列、以及溫度計那根橫條。
 *
 * **顏色刻意不用紅綠**（研究報告 §6.5 法遵）：紅綠在本站是漲跌語義，拿來塗
 * 估值高低會被讀成紅綠燈式的買賣暗示。整組只用單一色相（--chart-line-blue）
 * 的透明度階＋一個琥珀色的趨勢線，深淺主題都靠既有代幣自動跟隨。
 */

#price-band-canvas {
  width: 100%;
  height: 260px;
  display: block;
  /* 垂直捲頁還給瀏覽器（QA a13 血訓，比照 #kline-canvas）：這張圖只有 tap
     tooltip，沒有自己的手勢，不能吃掉使用者的滑動。 */
  touch-action: pan-y;
}

/* 卡頭右側的資料基準日小標（產品原則一：資料時效誠實標註，圖上就要看得到，
   不是只寫在下面的說明句裡）。 */
.sv-band-asof {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* 圖例色塊：沿用 .kline-legend .swatch 的幾何，只換填色與線型。±1σ／±2σ
   在圖上是虛線，色塊用漸層條紋表達「這是虛線」而不是實心塊。 */
.sv-band-sw-price {
  background: var(--chart-line-blue);
}

.sv-band-sw-trend {
  background: var(--chart-line-amber);
}

.sv-band-sw-s1 {
  background: repeating-linear-gradient(
    90deg,
    rgba(var(--chart-line-blue-rgb), 0.75) 0 3px,
    transparent 3px 6px
  );
}

.sv-band-sw-s2 {
  background: repeating-linear-gradient(
    90deg,
    var(--chart-axis-faint) 0 4px,
    transparent 4px 8px
  );
}

/* 五個價位列：桌機一排五格（等寬），手機自動換成兩欄。目前所在的那一帶
   用 accent 邊框＋淡底highlight，不用紅綠。 */
.sv-band-levels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.sv-band-level {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(var(--surface-tint-rgb), 0.03);
  transition: border-color 160ms ease, background 160ms ease;
}

.sv-band-level.is-current {
  border-color: rgba(var(--brand-cyan-rgb), 0.55);
  background: rgba(var(--brand-cyan-rgb), 0.09);
  box-shadow: 0 0 0 1px rgba(var(--brand-cyan-rgb), 0.14) inset;
}

.sv-band-level-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.sv-band-level-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sv-band-level.is-current .sv-band-level-value {
  color: var(--brand-cyan);
}

/* ---- 歷史估值分位溫度計 ---- */

/* 左右各留 18px：指標氣泡是 translateX(-50%) 定位的，分位到 0 或 100 時
   氣泡有一半會落在軌道外——留出半個氣泡的寬度，兩端才不會被卡片邊界切到。
   刻度列吃同一組內縮，兩者的 0 與 100 才會對齊。 */
.sv-gauge {
  margin: 14px 0 4px;
  padding: 0 18px;
}

.sv-gauge-metric {
  margin-left: -18px; /* 標題性數字對齊卡片左緣，不吃軌道的內縮 */
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

/* 橫條：0 -> 100 百分位。單一色相由淺到深（淺＝歷史相對低分位、深＝歷史
   相對高分位，研究報告 §6.5 的改寫對照表指定的表達方式），**不用紅綠**。 */
.sv-gauge-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(
    90deg,
    rgba(var(--chart-line-blue-rgb), 0.1) 0%,
    rgba(var(--chart-line-blue-rgb), 0.32) 35%,
    rgba(var(--chart-line-blue-rgb), 0.58) 70%,
    rgba(var(--chart-line-blue-rgb), 0.85) 100%
  );
  margin-top: 26px; /* 讓指標數字浮在條上方，不被卡頭壓到 */
}

.sv-gauge-marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: left 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sv-gauge-marker-label {
  position: absolute;
  bottom: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand-cyan);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.sv-gauge-marker-stem {
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 2px rgba(var(--brand-cyan-rgb), 0.22);
}

.sv-gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* 手機（≤480px）：畫布降到 200px（375px 寬下 260px 會讓這張卡佔掉整個
   首屏），五個價位列改兩欄，圖例縮字。 */
@media (max-width: 480px) {
  #price-band-canvas {
    height: 200px;
  }

  .sv-band-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .sv-band-level {
    padding: 7px 9px;
  }

  .sv-band-level-label {
    font-size: 10px;
  }

  .sv-band-level-value {
    font-size: 12.5px;
  }

  .sv-gauge-metric {
    font-size: 14px;
  }
}


/* ---------------------------------------------------------------------------
 * 本益比河流圖（P2／P3，2026-08-21）
 * ---------------------------------------------------------------------------
 * 「財務估值」tab 的第三張卡。殼沿用既有 .chip-card／.chip-card-head／
 * .kline-legend／.empty-state／.sv-metric-disclaimer，卡頭右側的資料基準日
 * 小標直接複用五線譜那張卡的 .sv-band-asof（同一個東西，不另開一支）。
 *
 * **顏色刻意不用紅綠**（研究報告 §6.5 法遵）：紅綠在本站是漲跌語義，拿來塗
 * 估值高低會被讀成紅綠燈式的買賣暗示。河道五帶只用中性灰（--text-muted-rgb）
 * 的透明度階——**深＝歷史相對高分位、淺＝歷史相對低分位**，正是研究報告改寫
 * 對照表指定的表達方式；價格線用既有的 --chart-line-blue（與上面那張五線譜
 * 的收盤價線同色，兩張圖的「主角」在視覺上是同一個東西）。
 */

#valuation-river-canvas {
  width: 100%;
  height: 260px;
  display: block;
  /* 垂直捲頁還給瀏覽器（QA a13 血訓，比照 #kline-canvas／#price-band-canvas）：
     這張圖只有 tap tooltip，沒有自己的手勢，不能吃掉使用者的滑動。 */
  touch-action: pan-y;
}

/* 圖例色塊：河道五帶（由低分位到高分位，透明度遞增）＋價格線。倍數數字由
   JS 逐股填進 .sv-river-legend-text，色塊本身走 CSS 代幣，換主題自動跟隨。 */
.sv-river-sw-b1 {
  background: rgba(var(--text-muted-rgb), 0.1);
}

.sv-river-sw-b2 {
  background: rgba(var(--text-muted-rgb), 0.16);
}

.sv-river-sw-b3 {
  background: rgba(var(--text-muted-rgb), 0.24);
}

.sv-river-sw-b4 {
  background: rgba(var(--text-muted-rgb), 0.32);
}

.sv-river-sw-b5 {
  background: rgba(var(--text-muted-rgb), 0.42);
}

.sv-river-sw-price {
  background: var(--chart-line-blue);
}

/* 五檔倍數列：桌機一排五格（等寬），手機兩欄。每格兩行——上排是倍數
   （14.0x），下排是「以目前每股盈餘換算的價位」。目前所在的那一帶用 accent
   邊框＋淡底 highlight，不用紅綠。 */
.sv-river-levels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.sv-river-level {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(var(--surface-tint-rgb), 0.03);
  transition: border-color 160ms ease, background 160ms ease;
}

.sv-river-level.is-current {
  border-color: rgba(var(--brand-cyan-rgb), 0.55);
  background: rgba(var(--brand-cyan-rgb), 0.09);
  box-shadow: 0 0 0 1px rgba(var(--brand-cyan-rgb), 0.14) inset;
}

.sv-river-level-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.sv-river-level-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sv-river-level.is-current .sv-river-level-value {
  color: var(--brand-cyan);
}

.sv-river-level-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 手機（≤480px）：畫布降到 200px（375px 寬下 260px 會讓這張卡佔掉整個
   首屏），五檔倍數改兩欄，圖例縮字。 */
@media (max-width: 480px) {
  #valuation-river-canvas {
    height: 200px;
  }

  .sv-river-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .sv-river-level {
    padding: 7px 9px;
  }

  .sv-river-level-label {
    font-size: 10px;
  }

  .sv-river-level-value {
    font-size: 12.5px;
  }

  .sv-river-level-price {
    font-size: 10.5px;
  }
}


/* ==========================================================================
   借券成本 ＋ 在地券商分點（籌碼雙甜點，2026-08-21）
   零寫死色票：全部吃設計代幣（--border / --bg-alt / --text / --text-muted /
   --text-faint / --radius-sm / --brand-cyan-rgb / --chart-line-amber-rgb），
   深淺色主題由代幣自己翻。兩張卡都是 `hidden` 開場，由 stock.js 拿到 200 且
   `available === true` 才打開——所以 [hidden] 的 display:none 必須贏過
   .chip-card 自己的 display（見下方那條 !important 的理由）。
   ========================================================================== */

#short-cost-card[hidden],
#local-brokers-card[hidden],
#short-cost-grid[hidden],
#short-cost-legend[hidden] {
  /* .chip-card 有自己的 display:block；`hidden` 屬性的預設樣式權重比 class
     低，不加這條的話整張卡在 hidden 狀態仍然看得到（2026-08-19 交易警示卡
     踩過同一個坑，那一段的處理方式一模一樣）。 */
  display: none !important;
}

/* ---------- 借券成本 ---------- */

.sv-short-cost-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.sv-short-cost-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sv-short-cost-unit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 趨勢徽章：**三顆都是同一種中性外框膠囊**，方向只靠箭頭字元。
   刻意不用紅綠——紅綠在本站等於漲跌（也就是「對讀者好／壞」），而借券費率
   上升對誰是好消息完全取決於他站哪一邊：放空的人成本變高、出借的人收益變高。
   把它染成紅或綠等於替讀者選邊。 */
.sv-short-cost-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* 「高於／低於」兩顆稍微加重一點（框線與字色往主文字靠），「相當」維持最輕
   ——有變化的那兩種值得多一眼，但仍在同一個色系裡，不跨到紅綠去。 */
.sv-short-cost-pill.is-up,
.sv-short-cost-pill.is-down {
  border-color: rgba(var(--text-muted-rgb), 0.45);
  color: var(--text);
}

#short-cost-canvas {
  display: block;
  width: 100%;
  /* CSS 層的保險絲（2026-08-21 急修，站長手機實拍破版）：canvas 是替換
     元素，只要 `width` 沒生效，它的版面寬度就會變成 `width` 屬性值（＝
     量到的 CSS 寬 × dpr），折線就橫貫整頁出視窗。`max-width` 讓「元素
     不得寬過容器」這件事不必依賴上面那一行有沒有被讀到。
     JS 端另有一道同樣的行內保險絲（stock.js setupCanvas()）——這一層
     擋不住整份 CSS 都沒生效的情況，兩層都要有。 */
  max-width: 100%;
  height: 92px;
  margin-top: 10px;
  /* 垂直捲頁還給瀏覽器（QA a13 血訓，比照 #kline-canvas／#price-band-canvas／
     #valuation-river-canvas）：這張 sparkline 沒有任何自己的手勢，絕不能吃掉
     使用者在手機上的滑動。 */
  touch-action: pan-y;
}

/* 三格資訊沿用交易警示卡的 .sv-alert-grid／.sv-alert-cell 版式（同一頁不發明
   第二種格子），只把欄數放寬成「自動塞滿」——這張卡的格數會隨資料在 1~3 之
   間變動，固定三欄在只有一格時會留下兩個空洞。 */
#short-cost-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* grid/flex 子項的 `min-width` 預設是 auto ＝ min-content，任何一個內容
   量錯寬度（超長不斷行的字串、尺寸失控的 canvas）都能把整個軌道連同卡片
   一起撐爆。這三個容器一律 min-width:0，讓「內容溢出」永遠是內容自己的
   問題，不會升級成整張卡出視窗（2026-08-21 借券卡急修一併補上）。 */
#short-cost-grid,
#short-cost-grid > .sv-alert-cell,
.sv-short-cost-main {
  min-width: 0;
}

/* 兩張卡的說明句：`.chip-note` 的預設只有 margin-bottom，接在膠囊列／資訊格
   後面時上緣會黏在一起（實測 390px 下只剩 4px）。這裡補足上緣間距，並把行高
   放寬——這兩段是口徑揭露，讀者真的要讀完它。 */
#short-cost-note,
#local-brokers-note {
  margin-top: 14px;
  line-height: 1.75;
}

/* ---------- 在地券商分點 ---------- */

/* 價值主張列（2026-08-21 重設計）：整段淡底＋左緣一條 accent 直線，讓它在
   視覺上明顯是「導讀」而不是資料本身。徽章浮在文字左上、用 float 讓文字自然
   繞排——徽章與文字分兩個 block 會在窄幕上吃掉一整行的高度。 */
.sv-local-broker-lede {
  margin-top: 4px;
  padding: 11px 13px;
  border-left: 3px solid rgba(var(--brand-cyan-rgb), 0.55);
  border-radius: 4px var(--radius) var(--radius) 4px;
  background: rgba(var(--brand-cyan-rgb), 0.06);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-muted);
}

.sv-local-broker-badge {
  float: left;
  margin: 2px 8px 0 0;
  padding: 2px 8px;
  /* 琥珀底吃 `--amber-alt-rgb`（app.css 裡明寫「供半透明琥珀底用」的那顆，
     五個主題都有值）；`--warn-fg` 本身沒有 -rgb 變體，直接對它呼叫
     rgba(var(--warn-fg-rgb)) 會整條規則失效＝徽章沒有框也沒有底
     （同借券卡註解記的那個坑）。 */
  border: 1px solid rgba(var(--amber-alt-rgb), 0.55);
  border-radius: 999px;
  background: rgba(var(--amber-alt-rgb), 0.12);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--warn-fg);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.sv-local-broker-summary {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-top: 12px;
}

.sv-local-broker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
  min-width: 0;
}

/* 券商膠囊（現在是 <button>，整顆可點）：分行數徽章在名稱右邊，最右邊一個
   會轉向的小箭頭表示「這顆點得開」——沒有這個記號，使用者不會知道要點。 */
.sv-local-broker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease,
    box-shadow 160ms ease;
}

.sv-local-broker-chip:hover {
  border-color: rgba(var(--brand-cyan-rgb), 0.6);
  background: rgba(var(--brand-cyan-rgb), 0.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.sv-local-broker-chip:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 2px;
}

/* 同一行政區的券商：用 accent 框線與淡底標出來（不用紅綠——這裡沒有多空
   語意，紅綠會被讀成「好／壞」）。 */
.sv-local-broker-chip.is-district {
  border-color: rgba(var(--brand-cyan-rgb), 0.55);
  background: rgba(var(--brand-cyan-rgb), 0.09);
  font-weight: 700;
}

.sv-local-broker-chip.is-open {
  border-color: var(--brand-cyan);
  background: rgba(var(--brand-cyan-rgb), 0.14);
}

.sv-local-broker-chip .name {
  min-width: 0;
}

.sv-local-broker-chip .count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sv-local-broker-chip.is-district .count,
.sv-local-broker-chip.is-open .count {
  color: var(--brand-cyan);
}

.sv-local-broker-chip .caret {
  font-size: 9px;
  color: var(--text-faint);
  transition: transform 160ms ease;
}

.sv-local-broker-chip.is-open .caret {
  transform: rotate(180deg);
  color: var(--brand-cyan);
}

/* 分行明細：整列共用這一塊，點哪一顆膠囊就換哪一家的內容（不是每顆膠囊
   自己往下推——那在窄幕上每點一次就整列跳版）。 */
.sv-local-broker-detail {
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  min-width: 0;
}

.sv-broker-detail-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.sv-broker-detail-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
  min-width: 0;
}

.sv-broker-detail-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.sv-broker-detail-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.sv-broker-detail-tag.is-district {
  color: var(--brand-cyan);
  border-color: rgba(var(--brand-cyan-rgb), 0.5);
}

/* 地址佔滿剩餘寬度並允許斷行——它是這一列裡唯一可能超長的字串，
   `min-width:0` ＋ `flex-basis:100%` 讓它自己換行，不去撐爆整張卡。 */
.sv-broker-detail-addr {
  flex: 1 1 100%;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* 手機（≤480px）：大數字降一級、sparkline 壓到 76px（375px 寬下 92px 會讓
   這張卡吃掉太多首屏），分點膠囊縮字並允許換行擠得下更多家。 */
@media (max-width: 480px) {
  .sv-short-cost-value {
    font-size: 25px;
  }

  .sv-short-cost-unit {
    font-size: 11.5px;
  }

  #short-cost-canvas {
    height: 76px;
  }

  #short-cost-grid {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    gap: 8px;
  }

  .sv-local-broker-summary {
    font-size: 12.5px;
  }

  .sv-local-broker-list {
    gap: 6px;
  }

  .sv-local-broker-chip {
    padding: 6px 10px;
    font-size: 11.5px;
    gap: 5px;
  }

  .sv-local-broker-chip .count {
    font-size: 10px;
  }

  .sv-local-broker-lede {
    padding: 10px 11px;
    font-size: 12px;
    line-height: 1.7;
  }

  .sv-local-broker-detail {
    padding: 10px 11px;
  }

  .sv-broker-detail-name {
    font-size: 12px;
  }

  .sv-broker-detail-addr {
    font-size: 11px;
  }
}

/* ==========================================================================
   分點籌碼（券商分公司買賣超，分點籌碼 P2，2026-08-22）
   零寫死色票：全部吃設計代幣（--border / --border-strong / --bg-alt / --text /
   --text-muted / --up / --down / --chart-line-blue / --radius-sm），深淺色主題
   由代幣自己翻。整卡 `hidden` 開場，由 stock.js 拿到 200 且 `covered === true`
   才打開——所以 [hidden] 的 display:none 必須贏過 .chip-card 自己的 display
   （同 #short-cost-card 那一段的 !important，理由一模一樣）。

   **不新增表格樣式**：雙欄裡的兩張表沿用既有 .chip-table（融資券／大戶散戶
   那幾張表同一套），本段只補「券商名截斷」「買賣色」「雙欄→單欄」三件事。
   ========================================================================== */

#branch-chips-card[hidden],
#branch-chips-legend[hidden] {
  display: none !important;
}

/* 主行：集中度大數字＋單位＋分點家數膠囊。整組沿用借券成本卡的排法
   （.sv-short-cost-main 那一組），同一頁不發明第二種「大數字行」。 */
.sv-branch-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  min-width: 0;
}

.sv-branch-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sv-branch-unit {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 分點家數膠囊：中性外框，**不用紅綠**——集中度高低對讀者是好是壞取決於他
   站哪一邊，染色等於替他選邊（同 .sv-short-cost-pill 的同一條裁定）。 */
.sv-branch-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#branch-chips-canvas {
  display: block;
  width: 100%;
  /* CSS 層的保險絲（同 #short-cost-canvas 2026-08-21 急修那一段）：canvas 是
     替換元素，`width` 沒生效時版面寬度會變成 `width` 屬性值（＝量到的 CSS 寬
     × dpr），折線就橫貫整頁出視窗。 */
  max-width: 100%;
  height: 92px;
  margin-top: 10px;
  /* 垂直捲頁還給瀏覽器（QA a13 血訓）：這張 sparkline 沒有自己的手勢。 */
  touch-action: pan-y;
}

/* 雙欄（買超／賣超）。`minmax(0, 1fr)` 而不是 `1fr`：grid 子項的 min-width
   預設是 min-content，表格裡一個不斷行的長券商名就能把整個軌道連同卡片一起
   撐爆（借券卡 2026-08-21 踩過同一個坑）。 */
.sv-branch-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 12px;
}

.sv-branch-col {
  min-width: 0;
  /* 六欄表（合併版加了均價與估算損益）在 320px 的保險絲：真的擠不下時
     欄內自己橫捲，絕不把整頁撐出水平捲軸（六寬 scrollWidth 驗收紅線）。 */
  overflow-x: auto;
}

.sv-branch-col-title {
  margin: 0;
  padding-bottom: 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* 標題用台股慣例紅買綠賣（與全站 --up/--down 同一套語意），但**只染標題**
   ——整欄染色會讓表格變成兩塊色塊，數字反而讀不出來。 */
.sv-branch-col-title.is-buy { color: var(--up); }
.sv-branch-col-title.is-sell { color: var(--down); }

.sv-branch-table {
  margin-top: 0;
}

/* 表頭與數字格一律鎖單行（390 實拍「1492.44億」被拆成兩行、320 實測
   「估算損益」表頭拆行）：盈餘寬度全由名稱欄吸收（max-width:0 那一套），
   真的擠不下時 .sv-branch-col 的 overflow-x 保險絲接手，數字絕不折行。 */
.sv-branch-table th,
.sv-branch-table td {
  white-space: nowrap;
}

/* 券商名：一律單行省略號。分點名稱長度從 2 字（「美林」）到 8 字（「凱基
   台北信義」）都有，不截斷的話 320px 下第一欄會把數字欄擠到剩兩位數。 */
.sv-branch-table td.sv-branch-name {
  max-width: 0;
  width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-branch-table td.sv-branch-buy { color: var(--up); }
.sv-branch-table td.sv-branch-sell { color: var(--down); }

/* 地緣徽章：與「在地券商分點」卡同一個口徑（登記地縣市比對，不是距離），
   所以視覺重量也要一致——中性小標，不搶紅綠。 */
.sv-branch-local {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

/* 說明句（口徑揭露，讀者真的要讀完）：`.chip-note` 預設只有 margin-bottom，
   接在表格後面上緣會黏在一起（同 #short-cost-note 那一段）。 */
#branch-chips-note {
  margin-top: 14px;
  line-height: 1.75;
}

@media (max-width: 900px) {
  /* 單欄斷點（2026-08-24 合併版由 640 提高到 900）：買超表升到六欄
     （張數/金額/占比/買均價/估算損益）後自然最小寬約 345px，768 平板的
     兩欄各只剩約 330px，硬排兩欄就得欄內橫捲。900 以下改單欄上下堆疊，
     兩張表各自吃滿寬度；900 以上兩欄各有 ≥390px，六欄擺得下。
     （640 舊值的量測背景：四欄時代兩欄各 150px 才會擠爆，已不適用。） */
  .sv-branch-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .sv-branch-value {
    font-size: 26px;
  }

  .sv-branch-unit {
    font-size: 12px;
  }

  #branch-chips-canvas {
    height: 76px;
  }

  .sv-branch-table {
    font-size: 12px;
  }

  /* 左右 3px（原 4px）：六欄 x 兩側共省 12px，正好是 360px 實測的溢出量
     ——360 由「欄內橫捲 12px」變成剛好放下；320 仍靠 overflow-x 保險絲。 */
  .sv-branch-table th,
  .sv-branch-table td {
    padding: 6px 3px;
  }

  /* 名稱欄 42% 在六欄窄幕會把數字欄擠到折行（390 實拍「億」被拆行的
     根因）：窄幕縮到 30%，分點名照樣靠 namewrap 省略號截斷。 */
  .sv-branch-table td.sv-branch-name {
    width: 30%;
  }
}

/* ==========================================================================
   分點動向標籤膠囊＋跳轉鈕（分點版位合併，2026-08-24）
   原「分點動向」<details> 折疊段（籌碼K線二期 §1-1）已併入上方
   #branch-chips-card 綜合卡，折疊殼（.sv-bm-details/summary/chevron/body/
   range/cols/empty 那一整組）隨 stock.js renderBranchMoves() 一起移除。
   保留的只有兩件事：
   ① 短沖／波段標籤膠囊（.sv-bm-pill 家族）與名稱格「文字截斷、徽章不截」
      的三層結構（.sv-bm-namewrap）——合併後由 #branch-chips-card 的
      branchChipsTable() 沿用（class 名不改：Playwright 舊斷言與截圖腳本
      認得這一組）。
   ② K 線分頁原位置的跳轉鈕（.sv-branch-jump）。
   零寫死色票（紅用 --up 系、藍用 --chart-line-blue 系代幣，五主題自動跟隨）。
   ========================================================================== */

/* 短沖／波段標籤膠囊：紅=短沖、藍=波段。層次做三件（字色＋半透明底＋
   同色系細框），全部走 -rgb 代幣的 rgba() 半透明，五套主題自動跟隨。 */
.sv-bm-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.sv-bm-pill-short {
  color: var(--up);
  background: rgba(var(--up-rgb), 0.12);
  border: 1px solid rgba(var(--up-rgb), 0.35);
}

.sv-bm-pill-swing {
  color: var(--chart-line-blue);
  background: rgba(var(--chart-line-blue-rgb), 0.12);
  border: 1px solid rgba(var(--chart-line-blue-rgb), 0.35);
}

/* 名稱格三層結構（見 stock.js branchChipsTable() 註解）：td 只負責表格
   幾何與 overflow，flex 包負責「文字截斷、徽章/膠囊不截」的分工——名字
   再長也只截名字，地緣徽章與章永遠看得見（320px 實測：文字＋章同層截斷
   會把章整顆吃掉）。 */
.sv-bm-namewrap {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  /* 2026-08-24 站長「有標籤的沒有顯示全部字」：窄幕允許換行，膠囊掉到
     名字下一行，名字永遠完整；寬幕一行放得下時 wrap 不會觸發，外觀不變。 */
  flex-wrap: wrap;
  row-gap: 2px;
}

.sv-bm-name-text {
  min-width: 0;
  /* 名字不再省略號截斷（同上 08-24 修正）：分點名最長六字，寬度不夠就
     讓膠囊換行，而不是吃掉名字。 */
  white-space: nowrap;
}

.sv-bm-namewrap .sv-bm-pill,
.sv-bm-namewrap .sv-branch-local {
  flex: none;
  margin-left: 0;
}

/* K 線分頁的「分點動向」跳轉鈕：一行小連結，不做成卡（原折疊段的替身，
   不該比本尊搶眼）。hidden 由 stock.js 跟著 #branch-chips-card 的覆蓋
   開關同步（卡不出現時鈕也不出現）。 */
.sv-branch-jump {
  margin-top: 14px;
  font-size: 12.5px;
}

.sv-branch-jump[hidden] {
  display: none !important;
}

.sv-branch-jump a {
  color: var(--chart-line-blue);
  font-weight: 700;
  text-decoration: none;
}

.sv-branch-jump a:hover,
.sv-branch-jump a:focus-visible {
  text-decoration: underline;
}