/* ===== MB 盤前檢查 UI =====
   視覺來源改為 **Omni 3.3 design system**（2026-08-21）——
   所有顏色／字級／圓角／間距／陰影都在 static/omni-tokens.css，那是唯一的換皮入口。
   本檔只寫版面與元件結構，**不要寫死色碼、字級或圓角**，寫死就換不了皮。
   token 與元件規格見技能：~/.claude/skills/omni-web/SKILL.md */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1.6;
  min-height: 100vh;
}

/* ---- Topbar ---- */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 {
  margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: .04em;
  line-height: 1.2;
}
.subtitle {
  margin: 2px 0 0; font-size: var(--fs-xs); color: var(--text-muted);
  letter-spacing: .3em; text-transform: uppercase;
}
.subtitle:empty { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date-pill {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rad-button);   /* Omni Web 的按鈕是膠囊，不是圓角矩形 */
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ---- Top nav（頁面切換）：T36 式盒狀 active tab ---- */
.topnav { background: var(--bg); }
.topnav-inner {
  max-width: 1200px; margin: 0 auto; padding: 6px 24px 12px;
  display: flex; gap: 8px;
}
.topnav-link {
  display: inline-block; padding: 7px 16px;
  font-size: var(--fs-md); font-weight: 600; text-decoration: none;
  color: var(--text-muted);
  border: 1px solid transparent; border-radius: var(--rad-sm);
}
.topnav-link:hover { color: var(--text); }
/* 導覽 tabs 不折字：加了 CS 之後 9 個連結，窄一點的螢幕會把「盤前檢查」擠成一字一行 → 改成整列橫向捲動 */
@media (max-width: 1100px) {
  .topnav-inner { overflow-x: auto; }
  .topnav-link { white-space: nowrap; flex-shrink: 0; }
}
.topnav-link.active {
  color: var(--text); background: var(--bg-card); border-color: var(--border);
}

/* ---- Buttons ---- */
.btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 7px 16px;
  border-radius: var(--rad-button);   /* T36：3px 圓角矩形（Omni 時代是膠囊；token 決定） */
  font-size: var(--fs-md);            /* T36：按鈕字 13px */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-sm);
  font-family: inherit;
  min-height: var(--control-h-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--motion-ease),
              border-color var(--dur-fast) var(--motion-ease),
              transform .05s;
}
.btn:hover { background: var(--bg-card-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; padding: 6px 12px; font-size: var(--fs-md); }
/* preset 切換的啟用態（1 分鐘線 6h/36h 等） */
.btn-active { background: var(--bg-card); border-color: var(--primary); color: var(--text); }

/* ---- Summary bar → T36 式統計帶 ---- */
.container { max-width: 860px; margin: 0 auto; padding: 24px; }
/* MCPT 頁（desktop）：中間區域放大到全寬（T36 式），圖表跟著撐滿 */
.container-wide { max-width: none; padding: 24px 32px; }
/* 等寬儲存格、hairline 直線分隔：大 mono 值在上、小 muted 標籤在下 */
.summary-bar {
  display: flex; align-items: stretch; margin-bottom: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--rad-md);
  overflow: hidden;
}
.stat-cell {
  flex: 1 1 0; padding: 12px 18px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0;
}
.stat-cell:first-child { border-left: none; }
.stat-v { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.stat-v .pill { font-size: var(--fs-md); font-weight: 700; padding: 2px 10px; }
.stat-k { font-size: var(--fs-xs); color: var(--text-muted); }
.stat-why { font-size: var(--fs-xs); color: var(--status-alert); max-width: 18em; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stat-why[hidden] { display: none; }
.stat-next { color: var(--text-muted); }
@media (max-width: 560px) {
  .summary-bar { flex-wrap: wrap; }
  .stat-cell { flex: 1 1 50%; border-top: 1px solid var(--border); }
  .stat-cell:nth-child(-n+2) { border-top: none; }
  .stat-cell:nth-child(odd) { border-left: none; }
}
/* 全域商品開關（ES/NQ/兩者）—— 放在統計帶最後一格，後端持久化 */
.symbol-switch { display: inline-flex; align-items: center; gap: 6px; }
.symbol-switch-label { font-size: var(--fs-md); color: var(--text-muted); white-space: nowrap; }
.symbol-switch-select {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-sm);
  padding: 6px 10px; color: var(--text); font-size: var(--fs-md); font-weight: 700;
  font-family: var(--font-mono); cursor: pointer;
}
.symbol-switch-select:focus { outline: none; border-color: var(--primary); }
.symbol-switch-select:disabled { opacity: .5; cursor: wait; }

/* K 線型態門檻設定（price_action 卡片內，預設收起，仿 .mc-rule-config）*/
.kline-config { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.kline-config summary {
  cursor: pointer; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted);
  list-style: none; user-select: none;
}
.kline-config summary:hover { color: var(--text); }
.kline-config[open] summary { color: var(--text); margin-bottom: 10px; }
.kline-config summary::-webkit-details-marker { display: none; }
.kline-config-box { display: flex; flex-direction: column; gap: 10px; }
.kl-param { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: var(--fs-xs); color: var(--text-muted); }
.kl-label { flex: 1 1 200px; }
.kl-input { display: inline-flex; align-items: center; gap: 5px; }
.kl-input input {
  width: 80px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 6px 8px; color: var(--text); font-size: var(--fs-md);
}
.kl-input input:focus { outline: none; border-color: var(--primary); }
.kl-input i { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); }
.kline-config-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.kline-config-actions .btn { font-size: var(--fs-md); padding: 6px 14px; }
.kline-config-status { margin-top: 8px; font-size: var(--fs-xs); text-align: right; }
.pill {
  /* inline-block ＋ 不換行：pill 預設是 inline，長標籤（例「高殖利率 ETF・REITS」）
     在窄欄位裡會從中間斷行，**連邊框一起裂成上下兩截**（2026-08-30 觀察池實測）。
     一顆膠囊要嘛整顆放得下、要嘛整顆換到下一行，不能自己裂開。 */
  display: inline-block;
  white-space: nowrap;
  border-radius: var(--rad-sm);
  padding: 6px 12px;
  font-size: var(--fs-xs);              /* chip 屬註腳層；13px 是脫階值 */
  font-weight: var(--fw-semibold);      /* Omni 沒有 500，字重只有 400/600/800 */
  border: 1px solid var(--border);
}
.pill-blue { background: var(--info-soft); border-color: var(--primary); color: var(--primary-text); }
.pill-red { background: var(--danger-soft); border-color: var(--status-alert); color: var(--danger-text); }
.pill-gray { background: var(--bg-card); color: var(--text-muted); }
.pill:empty { display: none; }  /* Telegram 已設定時提示為空 → 隱藏空 pill */

/* ---- Card grid ---- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: opacity .2s, border-color .2s;
  /* grid item 的 min-width 預設是 auto（＝內容的 min-content），窄螢幕時卡片內
     nowrap 的表格會把卡片撐到比 grid 軌道還寬、讓整頁橫向捲動。設 0 讓卡片
     一律等於軌道寬度，超寬的內容交給各自的捲動容器（.ec-table-wrap / .sr-bar-table）處理。 */
  min-width: 0;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.card-title-wrap { display: flex; align-items: center; gap: 10px; }
.status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--status-error);
  flex-shrink: 0;
  border: 2px solid transparent;
}
.card[data-status="ok"]    .status-dot { background: var(--status-ok); }
.card[data-status="info"]  .status-dot { background: var(--status-info); }
.card[data-status="warn"]  .status-dot { background: var(--status-warn); }
.card[data-status="alert"] .status-dot { background: var(--status-alert); box-shadow: 0 0 8px var(--status-alert); }
.card[data-status="error"] .status-dot { background: var(--status-error); }

.card-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.card-desc { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--text-muted); }
.card-controls { display: flex; align-items: center; gap: 6px; }

.card-summary {
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  min-height: 36px;
}
/* summary 為空時不佔空間（避免經濟數據等無 summary 卡片留大空白）*/
.card-summary:empty { padding: 0; min-height: 0; border-top: none; }
.card-details {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.card-details li {
  padding: 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.card-details li:empty { height: 8px; }

/* ---- 重點高亮 ---- */
.hl-num {
  color: var(--text);
  font-weight: 700;
}
/* 漲跌走 --rise/--fall（不是 success/danger —— 下跌不是錯誤）。
   FTSE 版綠漲紅跌（英美習慣）：base.html 的 <html data-updir="green">；價格方向一律用 --rise/--fall，好壞才用 success/danger。 */
.hl-bull { color: var(--rise); font-weight: 700; }
.hl-bear { color: var(--fall); font-weight: 700; }
.hl-key  { color: var(--status-warn); font-weight: 700; }

.card-details li.d-head {
  color: var(--text-muted);
  font-weight: 600;
  opacity: .8;
}
/* ── 日線觀察卡：教練配色（教練手繪圖的習慣：白＝盤勢、粉紅＝風險／跌破、綠＝偏多、黃＝操作提醒）── */
.cc-title  { color: var(--text); font-weight: 700; }
.cc-white  { color: var(--text); }
.cc-pink   { color: var(--fall); }     /* 風險／跌破＝紅（英美習慣，data-updir=green） */
.cc-green  { color: var(--rise); }     /* 偏多＝綠 */
.cc-yellow { color: var(--status-warn); }
.cc-cyan   { color: var(--primary); }   /* * 實戰操作筆記（教練圖上的青字） */
.cc-purple { color: #b48cff; }          /* * 心態提醒（教練圖上的紫字） */
.cc-gap    { height: 10px; }
.card-details li.d-coach { list-style: none; margin-bottom: 8px; }
.coach-panel {
  background: var(--canvas, rgba(0, 0, 0, .25));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
  line-height: 1.7;
  font-size: var(--fs-md);
}
.coach-panel .cc-title { font-size: 1.1em; letter-spacing: .02em; }
.coach-label {
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
/* 思路模擬的靜態教練圖（仿 ToS 截圖，固定深色）＋ 下載連結 */
.coach-chart { margin: 4px 0 12px; }
.coach-chart canvas { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); }
.coach-dl { display: inline-block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.card-details li.d-outlook { list-style: none; margin: 4px 0 8px; }
.ol-box { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.ol-box > summary { cursor: pointer; line-height: 1.6; }
.ol-box > summary .ol-sum { display: block; margin-left: 1.2em; }
.ol-hint { color: var(--text-muted); font-size: var(--fs-xs); margin-left: 6px; }
.ol-box[open] .ol-hint, .ol-box[open] .ol-sum { display: none; }
.ol-body { padding-top: 6px; line-height: 1.7; white-space: pre-wrap; }

/* 市場氛圍「氛圍定調」行：放大醒目，與下方條列要點區隔 */
.card-details li.d-tone {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--primary);
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.card-details li.d-note {
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-top: 2px;
  padding-left: 22px;
}
.card-details li.d-alert {
  color: var(--status-warn);
  font-weight: 600;
  background: var(--warning-soft);
  border-left: 3px solid var(--status-warn);
  padding-left: 8px;
  border-radius: var(--rad-sm);
}
.card-summary .hl-num,
.card-summary .hl-bull,
.card-summary .hl-bear,
.card-summary .hl-key { font-weight: 700; }

/* ---- 圖表（C/D） ---- */
.card-chart {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.card-chart canvas {
  max-height: 180px;
  width: 100% !important;
}
.card-chart .chart-source {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.card-chart[hidden] { display: none; }
/* 多圖模式：每個 .chart-slot 是一張圖（canvas + nav + source）的獨立區塊。
   垂直堆疊、不跨欄斷行；同 align 群組的兩張圖因 canvas 同寬故 x 軸像素位置一致。 */
.card-chart .chart-slot {
  break-inside: avoid;
  margin-bottom: 14px;
}
.card-chart .chart-slot:last-child { margin-bottom: 0; }
/* candle-nav 原本直接在 .card-chart 下；多圖時改放在 slot 內，間距由 slot 控制 */
.card-chart .chart-slot .candle-nav { margin-bottom: 6px; }
/* ---- 經濟數據表格（需求 B）---- */
/* 表格外層捲動容器：th/td 是 nowrap，窄螢幕下表格的 min-content 會超過卡片寬度。
   卡片是 .card-grid 唯一一欄（1fr）的 grid item，min-width 預設 auto，
   會被內容撐開 → 所有卡片一起變寬並讓整頁橫向捲動。
   包一層 overflow-x: auto 讓表格自己捲，min-content 貢獻歸零，卡片就不再被撐開。
   （同 .sr-bar-table 的做法） */
:is(.card-details, .sr-dash-table) .ec-table-wrap {
  overflow-x: auto;
}
:is(.card-details, .sr-dash-table) .ec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  margin-top: 4px;
}
:is(.card-details, .sr-dash-table) .ec-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
:is(.card-details, .sr-dash-table) .ec-table td {
  padding: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
:is(.card-details, .sr-dash-table) .ec-table th:nth-child(n+5),
:is(.card-details, .sr-dash-table) .ec-table td:nth-child(n+5) { text-align: right; white-space: nowrap; }
:is(.card-details, .sr-dash-table) .ec-table .ec-imp { color: var(--status-warn); letter-spacing: 1px; white-space: nowrap; }
:is(.card-details, .sr-dash-table) .ec-table .ec-event { font-weight: 600; }
:is(.card-details, .sr-dash-table) .ec-table .ec-day {
  text-align: center; font-weight: 700; color: var(--text);
  background: var(--bg-card-hover); padding: 7px 6px; white-space: nowrap;
}
/* 星期幾（淡化）*/
:is(.card-details, .sr-dash-table) .ec-table .ec-wd { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }
/* 現價欄（右對齊數字）*/
:is(.card-details, .sr-dash-table) .ec-table .ec-price { text-align: right; white-space: nowrap; color: var(--text); }
/* 台股法說會：摘要欄一行截斷（完整內容在 title）、市值前 10 大權值股整列加粗 */
:is(.card-details, .sr-dash-table) .ec-table td.ec-summary {
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22em;
  color: var(--text-muted);
}
:is(.card-details, .sr-dash-table) .ec-table tr.ec-heavy .ec-event { color: var(--status-warn); }
/* 不同日期不同顏色（行左側色條 + 淡底）*/
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c0 > td { border-left: 3px solid var(--chart-1); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c1 > td { border-left: 3px solid var(--primary-text); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c2 > td { border-left: 3px solid var(--chart-5); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c3 > td { border-left: 3px solid var(--warning); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c4 > td { border-left: 3px solid var(--idle); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c0 > td:first-child { background: var(--info-soft); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c1 > td:first-child { background: var(--info-soft); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c2 > td:first-child { background: var(--primary-soft); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c3 > td:first-child { background: var(--warning-soft); }
:is(.card-details, .sr-dash-table) .ec-table tr.ec-day-c4 > td:first-child { background: var(--idle-soft); }
:is(.card-details, .sr-dash-table) .ec-date { text-align: center; font-weight: 600; color: var(--text); padding: 6px 0; }
:is(.card-details, .sr-dash-table) .ec-demo { color: var(--status-warn); font-size: var(--fs-xs); margin-bottom: 4px; }
:is(.card-details, .sr-dash-table) .ec-remind {
  margin-top: 8px;
  color: var(--status-warn);
  background: var(--warning-soft);
  border-left: 3px solid var(--status-warn);
  padding: 6px 8px;
  border-radius: var(--rad-sm);
  font-size: var(--fs-xs);
}

/* 類股輪動 v2 — L1 結論 + L2 RRG 散點 + L3 明細表 + debug */
/* 設計原則：UI 不顯示統計中間值（σ/tilt/band/mean/median 等不上畫面） */

/* === L0 市場儀表板（6 格 tile） ===
   前 3 格＝VIX / 月份季節性 / 星期特性（原本的獨立卡片收進來）
   後 3 格＝/NQ 期貨 / 美 10Y 殖利率 / 美元指數（盤前必看的宏觀方向）
   色調只用 good / warn / bad / flat 四種，與散點圖同一組語彙 */
.sr-dash {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.sr-dash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 台指期版 11 格：美股、歐股、台股法人（使用者 10-28） */
  gap: 8px;
}
.sr-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 11px;
  border-radius: var(--rad-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  /* grid item：讓長字串截斷而不是把格子撐開 */
  min-width: 0;
}
.sr-tile:disabled { cursor: default; opacity: .75; }
.sr-tile:not(:disabled):hover { background: var(--bg-card-hover); }
.sr-tile.sr-tile-open { border-color: var(--primary); background: var(--bg-card-hover); }
.sr-tile-k {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-tile-v {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sr-tile-s {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.35;
  /* 事件名稱可能很長（經濟數據格）→ 最多 2 行，其餘截斷；完整內容在展開面板 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 色調：只染數值與左側細邊，維持卡片整體安靜 */
.sr-tile[data-tone="good"] { border-left: 3px solid var(--success); }
.sr-tile[data-tone="warn"] { border-left: 3px solid var(--idle); }
.sr-tile[data-tone="bad"]  { border-left: 3px solid var(--status-alert); }
.sr-tile[data-tone="flat"] { border-left: 3px solid var(--text-muted); }
.sr-tile[data-tone="good"] .sr-tile-v { color: var(--success); }
.sr-tile[data-tone="warn"] .sr-tile-v { color: var(--idle); }
.sr-tile[data-tone="bad"]  .sr-tile-v { color: var(--danger-text); }
/* 點 tile 展開的明細面板 */
.sr-dash-detail {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--rad-lg);
  background: var(--bg);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.sr-dash-detail[hidden] { display: none; }
.sr-dash-detail-h {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sr-dash-line { color: var(--text); }
.sr-dash-gap { height: 8px; }
/* 展開面板裡的經濟日曆表格：沿用卡片版的 .ec-table 樣式（CSS 用 :is() 一併涵蓋） */
.sr-dash-table { margin-top: 6px; font-size: var(--fs-md); }
/* 展開面板裡的圖表（月份季節性 / 星期特性）：展開時才載入 */
.sr-dash-chart {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.sr-dash-chart[hidden] { display: none; }

/* === L1 結論 === */
.sr-conclusion {
  margin-bottom: 18px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sr-conclusion-text {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
  word-break: break-word;
}
/* 資金流入 / 流出（結論第 2、3 行）：標籤 + 內容兩欄，標籤帶方向色 */
.sr-flow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--fs-md);
  line-height: 1.5;
}
.sr-flow-k {
  flex-shrink: 0;
  font-weight: 600;
  font-size: var(--fs-xs);
  padding: 1px 7px;
  border-radius: var(--rad-sm);
}
.sr-flow-in .sr-flow-k  { color: var(--rise); background: var(--rise-soft); }
.sr-flow-out .sr-flow-k { color: var(--fall); background: var(--fall-soft); }
.sr-flow-v {
  color: var(--text);
  word-break: break-word;
}
.sr-breadth {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* === L2 RRG 散點圖（SVG） === */
/* 全寬版面下若讓 SVG 撐滿（viewBox 600 → ~1900px），內部文字會被等比放大 3 倍
   而與頁面其他文字尺度不一致。限制最大寬度並置中，字級就與內文相稱；
   max-width 用 px，瀏覽器 ⌘+／⌘- 縮放時仍會一起放大。 */
.sr-scatter {
  margin: 0 auto 14px;
  max-width: 760px;
}
.sr-rrg {
  width: 100%;
  height: auto;
  display: block;
  font-family: -apple-system, system-ui, sans-serif;
}
/* 散點圖收合容器（預設收起，點開才畫；與明細表同款 summary） */
.sr-chart-wrap { margin-bottom: 10px; }
.sr-chart-wrap > summary {
  cursor: pointer; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted);
  list-style: none; user-select: none; padding: 4px 0;
}
.sr-chart-wrap > summary::-webkit-details-marker { display: none; }
.sr-chart-wrap > summary:hover { color: var(--text); }
.sr-chart-wrap[open] > summary { color: var(--text); margin-bottom: 6px; }
/* 軸線（x=0、y=0 兩條；貫穿 plot area；走「muted」非「dim」才有可見度） */
.sr-axis {
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.6;
}
/* 兩行式象限標籤：主標題（14px, weight 500, secondary 白話色）+ 白話說明（12px, muted, opacity 0.7）*/
.sr-quadrant-main {
  fill: var(--text-secondary);
  font-size: var(--fs-md);
  font-weight: 500;
}
.sr-quadrant-desc {
  fill: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  opacity: 0.7;
}
/* 順時針輪動弧線（最底層，opacity 0.15 不搶焦點） */
.sr-rotation {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.15;
  stroke-dasharray: 4 6;
}
/* 輪動箭頭：左右兩端各一，順時針（左↑右↓），與虛線同色同 opacity */
.sr-rotation-arrow {
  fill: var(--text-muted);
  opacity: 0.15;
}
/* 軸標題（純文字語意） */
.sr-axis-title {
  fill: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
/* RWD：短版軸名預設隱藏（由 media query 切換） */
.sr-axis-title-short { display: none; }
/* 軸端標籤（轉強 ↑ / 轉弱 ↓ / ← 落後 / 領先 →） */
.sr-axis-end {
  fill: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  opacity: 0.8;
}
/* 8 候選全失敗時的引線（0.5px 細線拉到外圍） */
.sr-leader {
  stroke: var(--text-dim);
  stroke-width: 0.5;
  opacity: 0.7;
  fill: none;
}
/* 被 p90 裁切的 sector：三角形 marker（向下三角，外框色同象限色） */
.sr-clipped {
  /* 三角形外框由象限色決定（透過 .sr-dot-* 繼承 stroke） */
  /* 填色保留象限色但稍微淡化以提示「不在原位」 */
  fill-opacity: 0.4;
}

/* RWD < 768px：隱藏象限白話說明、縮短軸名 */
@media (max-width: 768px) {
  .sr-quadrant-desc { display: none; }
  .sr-axis-title-full { display: none; }
  .sr-axis-title-short { display: inline; }
}
/* 軌跡（每段各自帶 opacity；不再用全域 opacity 蓋掉） */
.sr-trail { fill: none; stroke-width: 1.5; }
/* 當下 dots（4 象限用 2 色相 + 灰 + 實心/空心區分） */
.sr-dot {
  stroke-width: 1.5;
  cursor: pointer;
  /* P1-22：focus 不靠尺寸，只用 ring 標記。移除 :hover scale（避免蓋住標籤） */
  transition: opacity 0.2s ease;
  /* SVG transform-box 仍保留以防未來需要 transform 動畫 */
  transform-box: fill-box;
  transform-origin: center;
}
.sr-dot-leading   { fill: var(--success); stroke: var(--success); }
.sr-dot-improving {
  fill: transparent;
  stroke: var(--success);
  stroke-width: 2.2;
}
.sr-dot-weakening { fill: var(--idle); stroke: var(--idle); }
.sr-dot-lagging   { fill: var(--fg-subtle); stroke: var(--fg-subtle); }
.sr-dot-neutral   { fill: var(--fg-subtle); stroke: var(--fg-subtle); opacity: 0.7; }
/* 選中其他 sector 時，本 sector 之外的 dot 降透明度
   P1-21：只動 opacity，不動 fill（避免低透明度的橘色在深色背景上看起來像褐色切換狀態） */
.sr-dot-dimmed { opacity: 0.2; }

/* === Focus mode（hover / click 鎖定其他 sector）===
   - 其他 10 個 sector 的 ticker 標籤完全隱藏（不是淡化）
   - 其他 10 個圓點降到 0.2，保留作為空間參考
   - 4 個象限標籤 + 白話說明降到 0.35
   - 順時針旋轉虛線圓完全隱藏
   - 200ms 淡入淡出 */
.sr-rrg, .sr-ticker, .sr-quadrants, .sr-quadrant-main, .sr-quadrant-desc,
.sr-rotation-layer, .sr-axis-end, .sr-axis-title, .sr-leader, .sr-dot,
.sr-trail, .sr-trail-label, .sr-rings, .sr-labels {
  transition: opacity 0.2s ease;
}
/* 200ms 過渡的群組層 transition（給 <g> 用） */
.sr-quadrants, .sr-rotation-layer, .sr-trails, .sr-dots, .sr-labels, .sr-leaders, .sr-rings {
  transition: opacity 0.2s ease;
}
/* 進入 focus mode：給 .sr-rrg 加 .sr-focus class（由 JS 在 render 時加） */
.sr-rrg.sr-focus .sr-dot-other { opacity: 0.2; }
.sr-rrg.sr-focus .sr-ticker-other { opacity: 0; pointer-events: none; }
.sr-rrg.sr-focus .sr-quadrants { opacity: 0.35; }
.sr-rrg.sr-focus .sr-rotation-layer { opacity: 0; }
/* 標籤（ticker；碰撞避讓後位置） */
.sr-ticker {
  fill: var(--text);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  cursor: help;
  pointer-events: none;
}
/* 圖例（散點圖下方一行） */
.sr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sr-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sr-leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sr-leg-dot.sr-dot-leading   { background: var(--success); }
.sr-leg-dot.sr-dot-improving { background: transparent; border: 2px solid var(--success); }
.sr-leg-dot.sr-dot-weakening { background: var(--idle); }
.sr-leg-dot.sr-dot-lagging   { background: var(--fg-subtle); }
/* P1-27：三角形圖例項（超出繪圖區被釘在邊界的 sector）
   - 與前 4 項用 24px margin-left 區隔（前 4 項是象限，本項是狀態）
   - 改用 inline SVG：與主圖 marker 共用 triPoints() 的幾何與 .sr-clipped 樣式，
     形狀 / 描線 / fill-opacity 一律一致（舊的 CSS border 三角形方向是反的） */
.sr-leg-item-clipped { margin-left: 24px; color: var(--text-muted); }
.sr-leg-tri-svg {
  width: 16px;
  height: 16px;
  overflow: visible;
  vertical-align: middle;
  flex-shrink: 0;
}
.sr-leg-tri-svg polygon { stroke-width: 1.5; }
/* 選取提示（點擊 sector 後顯示的取消選取提示） */
.sr-legend-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.7;
  font-style: italic;
}

/* === L3 明細表（摺疊） === */
.sr-details {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.sr-details > summary {
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--text-muted);
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.sr-details > summary:hover { color: var(--text); }
.sr-details[open] > summary { color: var(--text); margin-bottom: 8px; }
.sr-bar-table {
  font-size: var(--fs-md);
  /* 5 欄 nowrap 在窄螢幕的 min-content 會超過卡片寬度，把整張卡（grid item）撐開、
     連帶整頁橫向捲動。改成表格自己捲，min-content 貢獻歸零，卡片就不會被撐寬。 */
  overflow-x: auto;
}
.sr-bar-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sr-bar-tbl th,
.sr-bar-tbl td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  white-space: nowrap;
}
.sr-bar-tbl th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: right;
  background: var(--bg);
}
.sr-bar-tbl th:first-child {
  text-align: left;
}
/* metric cell：上排數字（精確值）、下排中線發散長條（幅度 + 方向）
   三欄共用同一尺度，長條長度可直接跨欄比較 */
.sr-metric-tbl td { padding: 5px 8px; }
.sr-metric-tbl td.sr-bar-name { width: auto; }
.sr-metric-tbl td.sr-mcell { width: 17%; vertical-align: middle; }
.sr-metric-tbl th.sr-msorted { color: var(--text); }
.sr-mval {
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.sr-mtrack {
  position: relative;
  height: 6px;
  margin-top: 3px;
  border-radius: 1px;
  background: var(--bg);
}
/* 中線（0 = 與大盤同步）*/
.sr-mtrack::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--text-muted);
  opacity: 0.45;
}
.sr-mbar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 1px;
  /* 極小值（如 +0.02%）長條會短到看不見，留 2px 讓「幾乎與大盤同步」也看得出方向 */
  min-width: 2px;
}
/* 顏色沿用散點圖：綠 = 贏大盤、橘 = 輸大盤（顏色為輔助，方向已由左右表達） */
.sr-mval.sr-pos { color: var(--rise); }
.sr-mval.sr-neg { color: var(--idle); }
.sr-mbar.sr-pos { background: var(--rise); }
.sr-mbar.sr-neg { background: var(--idle); }
/* 象限 chip：與散點圖的四象限同一組語彙與顏色 */
.sr-metric-tbl td.sr-mquad,
.sr-metric-tbl th.sr-mquad { width: 1%; text-align: left; }
.sr-quad-chip {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  padding: 0 7px;
  border-radius: var(--rad-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.sr-quad-leading   { color: var(--success); background: var(--success-soft); }
.sr-quad-improving { color: var(--success); border-color: var(--success-line); }
.sr-quad-weakening { color: var(--idle); background: var(--idle-soft); }
.sr-quad-lagging,
.sr-quad-neutral,
.sr-quad-unknown   { color: var(--fg-subtle); background: var(--neutral-soft); }
/* 列 hover：與上方散點圖連動（JS 會把該 sector 設為 hovered） */
.sr-metric-tbl tbody tr { cursor: default; }
.sr-metric-tbl tbody tr:hover { background: var(--bg-card-hover, var(--surface-hover)); }
.sr-bar-name {
  text-align: left;
  font-weight: 500;
  color: var(--text);
}
.sr-bar-sym {
  margin-left: 6px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
}
.sr-bar-note {
  font-size: var(--fs-xs);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* === Tooltip（hover / click 觸發） === */
.sr-tooltip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 6px 10px;
  border-radius: var(--rad-sm);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.12s ease;
  max-width: 480px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.sr-tooltip.show { opacity: 1; }
/* 2 行 trail tooltip：第 1 行 sector 名+符號（粗體），第 2 行路徑（弱色、略小） */
.sr-tip-name {
  font-weight: 500;
  margin-bottom: 3px;
}
.sr-tip-path {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
/* Trail 標籤（只標起點「4 週前」，其餘 3 個歷史點不標籤；當前點也無標籤 — 由 main ticker 標明） */
.sr-trail-label {
  fill: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  pointer-events: none;
}
/* 鎖定 ring（在 .sr-rings 群組內，hover 預覽 / click 鎖定時都畫 2px 外環） */
.sr-rings circle { pointer-events: none; }

/* === Debug 面板（?debug=1 啟用；預設完全不渲染） === */
.sr-debug-panel {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 360px;
  max-height: 60vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  font-size: var(--fs-xs);
  z-index: 999;
  overflow: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.sr-debug-panel > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
  border-bottom: 1px solid var(--border-soft, var(--border));
  font-size: var(--fs-xs);
}
.sr-debug-panel > summary:hover { color: var(--text); }
.sr-debug-panel > pre {
  margin: 0;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre;
  overflow-x: auto;
}

/* 儀表板 RWD：7 → 4 → 3 → 2 欄。
   7 格在 3／2 欄時最後會落單一格 —— 讓那一格（FedWatch）橫跨整列，
   不留兩個空洞；它的副標（較上週／較上月）本來就比其他格長。 */
@media (max-width: 1100px) {
  .sr-dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sr-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .sr-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-dash-grid > .sr-tile:last-child:nth-child(3n + 1) { grid-column: auto; }
  .sr-dash-grid > .sr-tile:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
  .sr-tile-v { font-size: var(--fs-xl); }
}

/* === RWD：< 768px === */
@media (max-width: 768px) {
  .sr-conclusion-text { font-size: var(--fs-lg); }
  .sr-breadth { font-size: var(--fs-xs); }
  .sr-rrg { max-height: 320px; }
  /* 散點圖標籤在小螢幕隱藏中文（這裡本來就只 ticker，無中文名） */
  /* 明細表：數字與類股名縮小字級；象限 chip 在窄螢幕收起（列已經夠擠） */
  .sr-mval { font-size: var(--fs-xs); }
  .sr-bar-name { font-size: var(--fs-xs); }
  .sr-metric-tbl td.sr-mquad,
  .sr-metric-tbl th.sr-mquad { display: none; }
  .sr-debug-panel {
    width: calc(100vw - 24px);
    right: 12px;
    left: 12px;
  }
}

/* ---- Telegram 設定 modal（需求 B）---- */
.modal {
  position: fixed;
  inset: 0;
  /* Omni Dialog：遮罩帶 Web_Blur（規格 --blur-dialog 100px，實作取 1/8） */
  background: var(--overlay);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--surface);            /* Omni Dialog：Surface/normal */
  border: 1px solid var(--line-subtle);
  border-radius: var(--rad-dialog);      /* Radius/L = 7px */
  padding: var(--space-3);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
}
.modal-box h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xl); line-height: var(--lh-xl);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-xl);
}
.tab-panel[hidden] { display: none; }
.modal-field { display: block; margin-bottom: 14px; }
.modal-field span {
  display: block;
  font-size: var(--fs-md);
  color: var(--text-muted);
  margin-bottom: 5px;
}
.modal-field input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  padding: 9px 12px;
  color: var(--text);
  font-size: var(--fs-md);
}
.modal-field input:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.modal-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin: 4px 0 10px; }
/* 內建預設提示（LLM 沒設時顯示「正在用內建 Minimax」）
   與 modal-hint 同色但加綠色邊條強調「可用」狀態 */
.modal-builtin-note {
  font-size: var(--fs-xs);
  line-height: 1.6;
  padding: 8px 10px;
  margin: 0 0 10px;
  border-left: 3px solid var(--success);
  background: var(--success-soft);
  border-radius: 0 4px 4px 0;
  color: var(--text);
}
.modal-builtin-note code {
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: var(--rad-sm);
  font-size: var(--fs-xs);
}
.modal-status { font-size: var(--fs-md); color: var(--text-muted); min-height: 18px; margin-bottom: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-1); padding-top: var(--space-1); }
/* 設定 modal 分頁（Email / LLM）*/
.modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.modal-tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); padding: 8px 14px; font-size: var(--fs-md); cursor: pointer;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
.llm-prompt {
  width: 100%; min-height: 140px; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-md);
  padding: 10px; color: var(--text); font-size: var(--fs-md); font-family: inherit; line-height: 1.5;
}
.llm-prompt:focus { outline: none; border-color: var(--primary); }
.modal-adv { margin-bottom: 12px; }
.modal-adv summary { font-size: var(--fs-xs); color: var(--text-muted); cursor: pointer; }
.modal-adv .adv-row { display: flex; gap: 10px; margin-top: 8px; }
.modal-adv .adv-row label { flex: 1; font-size: var(--fs-xs); color: var(--text-muted); }
.modal-adv .adv-row input {
  width: 100%; box-sizing: border-box; margin-top: 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 6px 8px; color: var(--text); font-size: var(--fs-md);
}
.em-recip { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.em-recip-head { font-size: var(--fs-md); font-weight: 600; margin-bottom: 8px; }
.em-list { list-style: none; padding: 0; margin: 0 0 8px; }
.em-item { display: flex; gap: 8px; margin-bottom: 6px; }
.em-item .em-edit {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 7px 10px; color: var(--text); font-size: var(--fs-md);
}
.em-item .em-del {
  background: transparent; border: 1px solid var(--border); border-radius: var(--rad-sm);
  cursor: pointer; padding: 0 10px; font-size: var(--fs-md);
}
.em-add { display: flex; gap: 8px; }
.em-add input {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 7px 10px; color: var(--text); font-size: var(--fs-md);
}
.sched-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* ---- States ---- */
.skeleton {
  display: inline-block;
  color: var(--text-muted);
  font-weight: 400;
}
.card.loading .card-summary,
.card.loading .card-details { opacity: .5; }
/* 市場氛圍簡報：AI 處理中的 hourglass + 計時 */
.card-details .mb-loading {
  display: flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 600; font-size: var(--fs-md);
}
.card-details .mb-loading::before {
  content: "⏳"; animation: mb-spin 1.4s linear infinite; display: inline-block;
}
.card-details .mb-elapsed { font-variant-numeric: tabular-nums; color: var(--text); }
@keyframes mb-spin {
  0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }
}
/* 市場氛圍：Top-5 影響因子排版 */
/* 主題行（▸ 開頭）：亮白 bold，上方留白與影響說明區隔 */
.card-details .mb-topic {
  color: var(--fg);
  font-weight: 700;
  font-size: var(--fs-md);
  margin-top: 10px;
}
.card-details .mb-topic:first-child { margin-top: 2px; }
/* 影響說明行：縮排、柔和色、易讀行高 */
.card-details .mb-impact {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  padding-left: 14px;
  margin-bottom: 2px;
}

/* ---- 警示項目 highlight（B） ---- */
/* warn 黃警：摘要加粗放大、邊框帶黃光 */
.card[data-status="warn"] {
  border-color: var(--status-warn);
  box-shadow: 0 0 0 1px var(--status-warn), 0 4px 16px var(--warning-soft);
}
.card[data-status="warn"] .card-summary {
  color: var(--warning-text);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.card[data-status="warn"] .card-details {
  color: var(--fg);
  font-weight: 500;
}
/* alert 紅警：最強 highlight、邊框紅光閃爍 */
.card[data-status="alert"] {
  border-color: var(--status-alert);
  box-shadow: 0 0 0 1px var(--status-alert), 0 4px 18px var(--danger-soft);
}
.card[data-status="alert"] .card-summary {
  color: var(--danger-text);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: .3px;
}
.card[data-status="alert"] .card-details {
  color: var(--danger-text);
  font-weight: 600;
}
.card[data-status="alert"] .card-title {
  color: var(--danger-text);
}
/* 警示內容中含 ⚠️ / 🔴 的行特別標示 */
.card[data-status="warn"] .card-details li,
.card[data-status="alert"] .card-details li {
  line-height: 1.7;
}

/* ---- Footer ---- */
.footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  gap: 8px 22px; flex-wrap: wrap;
}
.muted { color: var(--text-muted); font-size: var(--fs-xs); }
/* 瀏覽統計（對齊 T36 頁尾：● 在線 N　累計 M 人　瀏覽 V 次） */
.visit-stats {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted); font-size: var(--fs-xs); white-space: nowrap;
}
.vs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--status-alert); display: inline-block; margin-right: 4px;
  flex-shrink: 0;
}
.visit-stats b { color: var(--text); font-weight: 700; margin: 0 2px; }

/* 1 分鐘線的「聚焦小時 K」提示列（由小時線點擊觸發） */
.m1-focus {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0; padding: 6px 10px; font-size: var(--fs-md);
  background: var(--primary-soft); border: 1px solid var(--primary-soft);
  border-radius: var(--rad-sm);
}
/* 明確的 display 會蓋掉 hidden 屬性的預設 display:none（UA 樣式優先級較低），
   所以取消聚焦後提示列不會消失 —— 必須自己把 [hidden] 補回來。 */
.m1-focus[hidden] { display: none; }
.m1-fib-tools { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m1-fib-tools[hidden], #m1FibClear[hidden], #m1FibTip[hidden] { display: none; }
#m1FibTip { font-size: var(--fs-xs); }
.m1-focus .btn { font-size: var(--fs-xs); padding: 3px 8px; }

/* ---- Paper 引擎面板（MCPT 頁） ---- */
.mc-card-head-r { display: inline-flex; align-items: center; gap: 10px; }
.pp-pos {
  margin: 6px 0; padding: 8px 12px; font-size: var(--fs-md);
  background: var(--bg); border: 1px solid var(--primary); border-radius: var(--rad-sm);
  box-shadow: 0 0 0 1px var(--primary-soft);
}
.pp-pos-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 0; }
.pp-pos-tag {
  display: inline-flex; align-items: center; font-weight: 700; font-size: var(--fs-xs);
  padding: 2px 8px; border-radius: var(--rad-sm);
}
.pp-long { color: var(--canvas); background: var(--rise); }
.pp-short { color: var(--canvas); background: var(--fall); }
.pp-stats { margin: 6px 0 10px; font-size: var(--fs-xs); }
.pp-tbl-wrap { overflow-x: auto; }
/* 交易紀錄：預設只露出最新 10 筆，更早的在框內往下捲（max-height 由 static/mcpt.js
   的 _fitTradesScroll 量「表頭＋前 10 列」—— 列高會隨換行變，寫死高度會切在半列）。
   表頭黏在框頂，捲到舊紀錄時還看得到欄名。 */
.pp-trades-scroll { overflow-y: auto; overscroll-behavior: contain; }
.pp-trades-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.pp-trades-count { margin: 6px 0 0; font-size: var(--fs-xs); }

/* 交易紀錄：滑鼠移上去看逐關卡還原（services/mcpt_dossier.py）。
   卡片是 fixed 定位、掛在 body 上 —— 表格外層有 overflow-x，放在裡面會被裁掉。 */
.pp-dossier-hint { margin: 2px 0 8px; font-size: var(--fs-sm); }
.pp-trig { font-size: var(--fs-sm); margin-top: 2px; }
.pp-trow { cursor: pointer; }
.pp-trow:hover, .pp-trow.is-open { background: var(--surface-hover); }
.pp-trow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pp-dossier {
  position: fixed; z-index: 80; overflow: auto;
  background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--rad-dialog);
  box-shadow: var(--shadow-lg);
  padding: 0 var(--space-3) var(--space-2);
  font-size: var(--fs-md); line-height: var(--lh-md);
}
.pp-dossier[hidden] { display: none; }
.pp-dz-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; gap: var(--space-1); align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
  padding-top: var(--space-2); background: var(--surface-raised);
}
.pp-dz-title { font-weight: var(--fw-bold); flex: 1 1 280px; }
.pp-dz-actions { display: flex; gap: 2px; flex-wrap: wrap; }
.pp-dz-btn { padding: 4px 8px; font-size: var(--fs-sm); }
.pp-dz-btn[aria-pressed="true"] { color: var(--primary-text); background: var(--primary-soft); }
.pp-dz-hint { margin: 2px 0 6px; font-size: var(--fs-sm); }
.pp-dz-table { width: 100%; border-collapse: collapse; }
.pp-dz-table th, .pp-dz-table td {
  text-align: left; vertical-align: top;
  padding: 6px 8px; border-bottom: 1px solid var(--line-subtle);
}
.pp-dz-table thead th { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pp-dz-table tbody th {
  width: 8em; white-space: nowrap;
  color: var(--text-muted); font-weight: var(--fw-semibold);
}
.pp-dz-table td b { color: var(--text); }
.pp-dz-table tr.is-warn th { color: var(--warning-text); }
.pp-dz-flag { margin-right: 4px; color: var(--warning); }
.pp-dz-note { margin: 6px 0 0; font-size: var(--fs-sm); }
.pp-dz-params { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: var(--fs-xs); }
.pp-dz-params-k { color: var(--text-muted); margin-right: 2px; line-height: 20px; }
.pp-dz-chip {
  padding: 1px 6px; line-height: 18px; border-radius: var(--rad-sm);
  border: 1px solid var(--line-subtle); background: var(--surface-sunken); color: var(--text-secondary);
}
.pp-dz-chip b { color: var(--primary-text); font-weight: var(--fw-semibold); }
@media (max-width: 560px) {          /* 手機：關卡名與說明改上下排，說明才有整行寬度 */
  .pp-dz-table thead { display: none; }
  .pp-dz-table tbody tr, .pp-dz-table tbody th, .pp-dz-table tbody td { display: block; }
  .pp-dz-table tbody th { width: auto; padding-bottom: 0; border-bottom: 0; }
}
.pp-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0; font-size: var(--fs-md); color: var(--text-muted);
}
.pp-filter label { display: inline-flex; align-items: center; gap: 6px; }
.pp-chk { cursor: pointer; }
.pp-name-input {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-sm);
  padding: 6px 10px; color: var(--text); font-size: var(--fs-md); font-family: var(--font-mono);
  min-width: 160px;
}
.pp-name-input:focus { outline: none; border-color: var(--primary); }
#ppProfiles { width: 100%; }
#ppProfiles td, #ppProfiles th { white-space: nowrap; }
.pp-params-box { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.pp-group { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 10px 12px; }
.pp-group-h { font-size: var(--fs-md); font-weight: 700; margin-bottom: 8px; }
.pp-item { padding: 6px 0; border-top: 1px dashed var(--border); }
.pp-item:first-of-type { border-top: none; }
/* 同一個編號的續行：不畫分隔線、往內縮，讓它看起來屬於上一項 */
.pp-item.pp-cont { border-top: none; padding-top: 0; padding-left: 18px; }
.pp-item.pp-cont .pp-desc { padding-left: 0; }
.pp-cont-mark { color: var(--muted); font-style: normal; margin-right: 6px; }
.pp-item-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-label { font-size: var(--fs-md); }
.pp-input { display: inline-flex; align-items: center; gap: 5px; }
.pp-input input[type="number"] {
  width: 90px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 5px 8px; color: var(--text); font-size: var(--fs-md);
  font-family: var(--font-mono);
}
.pp-input input:focus { outline: none; border-color: var(--primary); }
.pp-input i { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); }
.pp-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; line-height: 1.6; }

/* ---- Schwab 即時報價設定（MCPT 頁） ---- */
.mc-schwab-status { margin-bottom: 4px; font-size: var(--fs-md); }
.mc-schwab-latency { margin-bottom: 8px; font-size: var(--fs-xs); }
.schwab-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.schwab-row input {
  flex: 1; min-width: 260px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-sm);
  padding: 7px 10px; color: var(--text); font-size: var(--fs-md); font-family: var(--font-mono);
}
.schwab-row input:focus { outline: none; border-color: var(--primary); }
/* 授權失敗的訊息 —— 不能和「✅ 已授權」的灰字狀態列長一樣 */
#schwabAuthMsg.mc-err { color: var(--status-alert); font-weight: 600; }
/* 常駐效期行：平常淡淡的，剩不到 2 天轉警示色（7 天硬過期是全系統最大的營運風險） */
.mc-schwab-expiry { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); font-family: var(--font-mono); }
.mc-schwab-expiry.warn { color: var(--status-alert); font-weight: 600; }
/* 小時線降級橫幅：要刺眼。灰字的「來源」那一行盯盤時根本不會被看到 */
.mc-degraded {
  margin: 8px 0; padding: 10px 14px;
  border: 1px solid var(--status-alert); border-left-width: 4px;
  border-radius: var(--rad-sm);
  background: color-mix(in srgb, var(--status-alert) 10%, transparent);
  color: var(--text); font-size: var(--fs-md); line-height: 1.6;
}

/* ---- Toast ---- */
#toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--rad-md);
  font-size: var(--fs-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.success { border-color: var(--status-ok); }
#toast.error { border-color: var(--status-alert); }

/* ============================================================
   MCPT 進場策略頁
   ============================================================ */
.mc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.mc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.mc-card-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; }

/* 核心公式 */
.mc-formula {
  background: linear-gradient(135deg, var(--info-soft), var(--success-soft));
  border: 1px solid var(--border);
  border-radius: var(--rad-md); padding: 18px 20px; margin-bottom: 18px;
}
.mc-formula-eq {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.mc-tag {
  padding: 8px 16px; border-radius: var(--rad-lg); font-size: var(--fs-md); font-weight: 700;
  border: 1px solid var(--border);
}
.mc-tag small { font-size: var(--fs-xs); opacity: .8; font-weight: 600; }
.mc-tag-must { background: var(--warning-soft); border-color: var(--status-warn); color: var(--warning-text); }
.mc-tag-mom  { background: var(--info-soft); border-color: var(--primary); color: var(--primary-text); }
.mc-tag-go   { background: var(--success-soft); border-color: var(--status-ok); color: var(--success-text); }
.mc-plus { font-size: 20px; color: var(--text-muted); font-weight: 700; }
.mc-formula-note { margin: 0; font-size: var(--fs-md); color: var(--text-muted); text-align: center; }

/* 動能 verdict banner */
.mc-verdict {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--rad-xl); padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--border);
}
.mc-verdict-icon { font-size: 26px; line-height: 1; }
.mc-verdict-label { font-size: var(--fs-lg); font-weight: 800; }
.mc-verdict-detail { font-size: var(--fs-md); margin-top: 2px; }
.mc-verdict-up      { background: var(--rise-soft); border-color: var(--rise); }
.mc-verdict-up .mc-verdict-label { color: var(--rise); }
.mc-verdict-down    { background: var(--fall-soft); border-color: var(--fall); }
.mc-verdict-down .mc-verdict-label { color: var(--fall); }
.mc-verdict-neutral { background: var(--warning-soft); border-color: var(--status-warn); }
.mc-verdict-neutral .mc-verdict-label { color: var(--warning-text); }
.mc-verdict-unknown { background: var(--bg); }
.mc-verdict-unknown .mc-verdict-label { color: var(--text-muted); }

/* 現價 / HMA 指標 */
.mc-metrics { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mc-metric {
  flex: 1; min-width: 120px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-lg); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.mc-metric-k { font-size: var(--fs-xs); color: var(--text-muted); }
.mc-metric-v { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 圖表 */
.mc-chart { margin-bottom: 12px; }
.mc-chart canvas { width: 100% !important; display: block; }
.mc-chart-legend { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 8px; }
.mc-chart-legend .lg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.mc-chart-legend .lg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.mc-chart-legend .lg-up { background: var(--fg); height: 10px; width: 6px; border-radius: 1px; }
.mc-chart-legend .lg-dn { background: var(--fall); height: 10px; width: 6px; border-radius: 1px; }
.mc-chart-legend .lg-hma { background: linear-gradient(90deg, var(--rise) 50%, var(--fall) 50%); height: 4px; width: 18px; }
.mc-chart-legend .lg-price { background: var(--fg); height: 3px; width: 18px; }
.mc-chart-legend .lg-res { background: linear-gradient(90deg, var(--danger) 50%, var(--success) 50%); height: 3px; width: 18px; }
.mc-chart-legend .lg-mcpt { background: var(--fg); height: 3px; width: 18px; }
.mc-chart-legend .lg-note { color: var(--text-muted); font-weight: 400; font-size: var(--fs-xs); margin-left: 2px; }

/* 圖例預設收起（見 templates/mcpt.html）：小小一顆「圖例」，需要才展開 */
.mc-chart-legend-box > summary { list-style: none; cursor: pointer; width: max-content;
  margin-top: 8px; padding: 2px 8px; font-size: var(--fs-xs); color: var(--text-muted);
  border: 1px solid var(--line-subtle); border-radius: 999px; user-select: none; }
.mc-chart-legend-box > summary::-webkit-details-marker { display: none; }
.mc-chart-legend-box > summary::before { content: "▸ "; }
.mc-chart-legend-box[open] > summary::before { content: "▾ "; }
.mc-chart-legend-box > summary:hover { color: var(--fg); border-color: var(--line); }
.mc-chart-legend-box[open] > summary { margin-bottom: 2px; }
.mc-chart-legend .lg-bg-pre { background: var(--neutral-line); height: 12px; width: 14px; border: 1px solid var(--border); }
.mc-chart-legend .lg-bg-open { background: var(--overlay); height: 12px; width: 14px; border: 1px solid var(--border); }
.mc-chart-note { margin: 6px 0 0; font-size: var(--fs-xs); }
.mc-chart-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.mc-chart-nav .btn { font-size: var(--fs-md); padding: 5px 12px; border-color: var(--border); }
.mc-chart-nav #chartRange { font-size: var(--fs-xs); }
#hmaChart { touch-action: none; }

/* 決策鏈：結論之下的 ①動能 ②賽事 ③濾網 三段輸入
   刻意做得比結論安靜（小標＋左側細軌），避免三者看起來像三個對等結論 */
.mc-chain {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.mc-chain-item {
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr);
  gap: 0 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mc-chain-item:last-child { border-bottom: none; }
.mc-chain-n { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.6; }
.mc-chain-k {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.6;
  white-space: nowrap;
}
.mc-chain-v { min-width: 0; }
/* 鏈內的既有元件收掉外距，讓每一段對齊 */
.mc-chain-v > .mc-verdict,
.mc-chain-v > .mc-session-badge { margin-bottom: 0; }
.mc-chain-v > .mc-nogo-summary:last-child { margin-bottom: 0; }
.mc-chain-ref { margin-top: 14px; }
/* 手機：三欄擠不下（動能標題會斷成三行）→ 標籤改疊在內容上方 */
@media (max-width: 640px) {
  .mc-chain-item { grid-template-columns: 22px minmax(0, 1fr); }
  .mc-chain-k { grid-column: 2; }
  .mc-chain-v { grid-column: 2; margin-top: 5px; }
}

/* 現在賽事時段 badge */
.mc-session-badge {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-lg);
}
.mc-sess-pill {
  font-size: var(--fs-md); font-weight: 800; padding: 4px 12px; border-radius: var(--rad-md);
  border: 1px solid var(--border); white-space: nowrap;
}
.mc-sess-pill.sess-open { background: var(--success-soft); border-color: var(--status-ok); color: var(--success-text); }
.mc-sess-pill.sess-pre { background: var(--neutral-soft); border-color: var(--text-muted); color: var(--fg-muted); }
.mc-sess-pill.sess-break { background: var(--neutral-soft); border-color: var(--neutral-line); color: var(--neutral-text); }
.mc-sess-meta { font-size: var(--fs-xs); line-height: 1.5; }

.mc-hint { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.7; margin: 4px 0 0; }
.mc-hint b { color: var(--text); }

/* 4 Steps */
.mc-steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.mc-steps li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mc-steps li:last-child { border-bottom: none; }
.mc-steps li > div { font-size: var(--fs-md); line-height: 1.6; }
.mc-steps li b { color: var(--text); }
.mc-step-n {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: var(--fs-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.mc-subnotes {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.mc-subnotes p { margin: 6px 0; font-size: var(--fs-md); color: var(--text-muted); line-height: 1.6; }
.mc-subnotes b { color: var(--text); }

/* 互動分類 */
.mc-quiz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mc-q { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); color: var(--text-muted); }
.mc-q select {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-md);
  padding: 9px 10px; color: var(--text); font-size: var(--fs-md);
}
.mc-q select:focus { outline: none; border-color: var(--primary); }
.mc-q-check {
  grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 8px;
  cursor: pointer; padding-top: 4px;
}
.mc-q-check input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.mc-quiz-result {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--rad-lg);
  background: var(--bg); border: 1px solid var(--border);
  font-size: var(--fs-md); color: var(--text-muted);
}
.mc-quiz-result.show { color: var(--text); }
.mc-res-title { font-size: var(--fs-lg); font-weight: 800; margin-bottom: 4px; }
.mc-res-desc { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.6; }
.mc-res-nogo  { border-color: var(--status-alert); background: var(--danger-soft); }
.mc-res-nogo  .mc-res-title { color: var(--danger-text); }
/* pending＝有趨勢但尚未突破/跌破關鍵位（型態未成立）→ 中性灰，非紅色警示 */
.mc-res-pending { border-color: var(--text-muted); background: var(--neutral-soft); }
.mc-res-pending .mc-res-title { color: var(--fg-muted); }
.mc-res-mcpt1 { border-color: var(--status-warn); background: var(--warning-soft); }
.mc-res-mcpt1 .mc-res-title { color: var(--warning-text); }
.mc-res-mcpt2 { border-color: var(--primary); background: var(--info-soft); }
.mc-res-mcpt2 .mc-res-title { color: var(--primary-text); }
.mc-res-mcpt3 { border-color: var(--status-ok); background: var(--success-soft); }
.mc-res-mcpt3 .mc-res-title { color: var(--success-text); }

/* 分類對照表 */
.mc-table-wrap { overflow-x: auto; }
.mc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.mc-table th {
  text-align: left; color: var(--text-muted); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mc-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.mc-table td b { color: var(--text); }
.mc-table tr.row-active { background: var(--info-soft); }
.mc-cls { font-weight: 800; white-space: nowrap; }
.mc-cls-1 { color: var(--warning-text); }
.mc-cls-2 { color: var(--primary-text); }
.mc-cls-3 { color: var(--success-text); }
.mc-fib {
  display: inline-block; background: var(--primary-soft);
  border: 1px solid var(--chart-5); color: var(--chart-5);
  border-radius: var(--rad-sm); padding: 2px 8px; font-weight: 700; font-size: var(--fs-xs);
}

/* 不進場清單 */
.mc-nogo { list-style: none; padding: 0; margin: 0; }
.mc-nogo li { padding: 4px 0; }
.mc-nogo label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-md); }
.mc-nogo input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.mc-nogo span b { color: var(--text); }
.mc-nogo-warn {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--rad-md);
  background: var(--danger-soft); border: 1px solid var(--status-alert);
  color: var(--danger-text); font-size: var(--fs-md); font-weight: 600; line-height: 1.6;
}
.mc-nogo-warn[hidden] { display: none; }

/* 動能判斷公式（逐行排版） */
.mc-formula-text { margin: 6px 0 0; font-size: var(--fs-md); color: var(--text-muted); }
.mc-formula-text p { margin: 3px 0; line-height: 1.6; }
.mc-formula-text .mc-fh { margin-top: 10px; color: var(--text); }
.mc-formula-text .mc-fh:first-child { margin-top: 0; }
.mc-formula-text b { color: var(--text); }

/* 收合式參考卡（details）*/
.mc-collapse { padding: 0; overflow: hidden; }
.mc-collapse > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 15px 18px; font-size: var(--fs-lg); font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mc-collapse > summary::-webkit-details-marker { display: none; }
/* Schwab／IBKR 設定卡未登入時上鎖：點 summary 會跳登入視窗而不是展開
   （見 mcpt.js gateAdminCards）。▾ 箭頭拿掉，免得看起來像壞掉打不開。 */
.mc-locked > summary { opacity: .8; }
/* 權重要高過下一行的 `.mc-collapse > summary::after { content: "▾" }` ——
   同權重時後寫的贏，而這條寫在它前面 */
.mc-collapse.mc-locked > summary::after { content: ""; }
.mc-lock-hint { margin-left: 8px; font-size: var(--fs-sm); font-weight: 400; }
.mc-collapse > summary::after { content: "▾"; color: var(--text-muted); transition: transform .2s; }
.mc-collapse[open] > summary::after { transform: rotate(180deg); }
.mc-collapse > summary:hover { background: var(--bg-card-hover); }
.mc-collapse-body { padding: 0 18px 18px; }
.mc-collapse-body .mc-steps li:first-child { padding-top: 0; }

/* 動能公式：滑鼠移上（或聚焦）才顯示細節 */
.mc-reveal-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mc-reveal {
  border: 1px solid var(--border); border-radius: var(--rad-md); padding: 8px 12px;
  background: var(--bg); outline: none;
}
.mc-reveal:hover, .mc-reveal:focus-within { border-color: var(--primary); }
.mc-reveal-h {
  font-size: var(--fs-md); font-weight: 700; color: var(--text); cursor: help;
  display: inline-flex; align-items: center; gap: 6px;
}
.mc-reveal-caret { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); transition: transform .2s; }
.mc-reveal:hover .mc-reveal-caret, .mc-reveal:focus-within .mc-reveal-caret { transform: rotate(180deg); }
.mc-reveal-body { display: none; margin-top: 8px; font-size: var(--fs-md); color: var(--text-muted); line-height: 1.6; }
.mc-reveal-body p { margin: 3px 0; }
.mc-reveal-body b { color: var(--text); }
.mc-reveal:hover .mc-reveal-body, .mc-reveal:focus-within .mc-reveal-body { display: block; }

/* MCPT 自動建議（已獨立成 Section 3） */
.mc-mcpt-final {
  margin: 0;
  padding: 18px 20px;
  font-size: var(--fs-md);
}
.mc-mcpt-final .mc-res-title { font-size: var(--fs-xl); }
.mc-mcpt-final .mc-res-desc { font-size: var(--fs-md); }
.mc-mcpt-alt {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  padding: 10px 14px; border-radius: var(--rad-md);
  background: var(--warning-soft);
  border: 1px solid var(--warning-soft);
  color: var(--warning-text);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.mc-mcpt-alt .mc-alt-icon { font-size: 16px; line-height: 1; }
.mc-auto-note { margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.6; }

/* clear 規則摺疊區（Section 2 內） */
.mc-nogo-clear { margin-top: 6px; }
.mc-nogo-clear > details { border-top: 1px dashed var(--border); padding-top: 8px; }
.mc-nogo-clear > details > summary {
  cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted);
  list-style: none; user-select: none; padding: 4px 0;
}
.mc-nogo-clear > details > summary:hover { color: var(--text); }
.mc-nogo-clear > details[open] > summary { color: var(--text); margin-bottom: 4px; }
.mc-nogo-clear .nogo-list { margin-top: 4px; }

/* 移除的圖表型態偵測（趨勢線）控制項 — 規則定義已刪除，相關 CSS class 保留以防誤刪 */


.mc-sub-h { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 700; }
.mc-nogo-summary {
  font-size: var(--fs-md); font-weight: 700; padding: 9px 12px; border-radius: var(--rad-md);
  border: 1px solid var(--border); margin-bottom: 10px; line-height: 1.5;
}
.mc-nogo-summary.level-block { background: var(--danger-soft); border-color: var(--status-alert); color: var(--danger-text); }
.mc-nogo-summary.level-caution { background: var(--warning-soft); border-color: var(--status-warn); color: var(--warning-text); }
.mc-nogo-summary.level-ok { background: var(--success-soft); border-color: var(--status-ok); color: var(--success-text); }
.nogo-list { list-style: none; padding: 0; margin: 0; }
.nogo-item {
  display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: 4px 12px;
  align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.nogo-item:last-child { border-bottom: none; }
.nogo-item .nogo-name { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.nogo-item .nogo-detail { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.nogo-item.nogo-trigger .nogo-name { color: var(--danger-text); }
.nogo-item.nogo-warn .nogo-name { color: var(--warning-text); }
.nogo-item.nogo-clear .nogo-name { color: var(--text-muted); font-weight: 500; }
.nogo-item.nogo-manual label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nogo-item.nogo-manual input { width: 15px; height: 15px; }
.mc-nogo-hint { margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.6; }

/* 規則門檻設定 */
.mc-rule-config { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.mc-rule-config summary {
  cursor: pointer; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted);
  list-style: none; user-select: none;
}
.mc-rule-config summary:hover { color: var(--text); }
.mc-rule-config[open] summary { color: var(--text); margin-bottom: 10px; }
.rule-config-box { display: flex; flex-direction: column; gap: 12px; }
.rc-rule { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-md); padding: 10px 12px; }
.rc-rule-name { font-size: var(--fs-md); font-weight: 600; margin-bottom: 8px; }
.rc-params { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.rc-param { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.rc-param .rc-input { display: inline-flex; align-items: center; gap: 5px; }
.rc-param input {
  width: 78px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 6px 8px; color: var(--text); font-size: var(--fs-md);
}
.rc-param input:focus { outline: none; border-color: var(--primary); }
.rc-param .rc-input i { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); }
.rc-param-text { flex: 1 1 100%; }
.rc-param-text .rc-input { width: 100%; }
.rc-param-text input { width: 100%; max-width: 520px; }
.rule-config-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.rule-config-actions .btn { font-size: var(--fs-md); padding: 6px 14px; }
#ruleConfigStatus { margin-top: 8px; font-size: var(--fs-xs); text-align: right; }
.mc-auto-note { margin: 0 0 12px; font-size: var(--fs-xs); line-height: 1.6; }
.mc-auto-note b { color: var(--text); }

/* ---- 互動式日 K 線（price_action card）---- */
.candle-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.candle-nav .candle-range { font-size: var(--fs-xs); }
.candle-nav .candle-zoom-group {
  display: inline-flex; align-items: center; gap: 6px;
}
.candle-nav .candle-count { font-size: var(--fs-xs); min-width: 3.5em; text-align: center; }
.candle-nav .candle-zoom-in,
.candle-nav .candle-zoom-out {
  padding: 4px 10px; font-size: var(--fs-md); line-height: 1; min-width: 30px;
}
/* 互動模式 canvas 拉高（覆寫 .card-chart canvas 的 180px 上限）；由 JS 設 300px */
.card-chart:has(.candle-nav) canvas { max-height: 320px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
  .topbar-actions .btn { font-size: var(--fs-md); padding: 7px 12px; }
  .mc-quiz { grid-template-columns: 1fr; }
  .topnav-inner { overflow-x: auto; }
  .nogo-item { grid-template-columns: 1fr; gap: 2px; }
  .nogo-item .nogo-name { white-space: normal; }
}

/* ============================================================
   使用說明 modal（兩頁共用；內容在各自 template 的 help_content）
   ============================================================ */
.btn-help { font-size: 16px; }

.help-modal .help-box {
  max-width: 720px;
  max-height: 86vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* 標題與關閉鈕固定在頂部，內容區自己捲 */
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-head h3 {
  margin: 0;
  font-size: var(--fs-3xl); line-height: var(--lh-3xl);   /* 書名層級（T36 階整體小一號，平移保實際大小） */
  font-weight: var(--fw-extrabold); letter-spacing: var(--ls-3xl);
}
/* 只針對標題列的 ✕；底部那顆也是 .help-close，但要保留 .btn-primary 的藍底 */
.help-head .help-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  border-radius: var(--rad-full);        /* Omni：關閉鈕是圓形 icon button */
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
  transition: background var(--dur-fast) var(--motion-ease),
              color var(--dur-fast) var(--motion-ease);
}
.help-head .help-close:hover { color: var(--fg); background: var(--surface-hover); }

.help-body {
  padding: var(--space-half) var(--space-3) var(--space-2);
  overflow-y: auto;
  font-size: var(--fs-lg);   /* T36：正文＝lg(14)，md 是 13 */
  /* 長文閱讀用 1.85（CJK 密度高，Omni 的 --lh-md=1.57 是 UI 行高，讀長段會擠）*/
  line-height: 1.85;
  letter-spacing: var(--ls-md);
  /* 亮度三層的基準：內文用第二亮。--text 等於 --fg（全白），整頁全白時
     粗體與標題就沒有更亮的層可去 —— 這正是「看起來都一樣重」的原因之一。 */
  color: var(--text-secondary);
}
.help-body p { margin: 10px 0; }
.help-list li { margin: 5px 0; line-height: 1.8; }
/* 亮度第一層＋重量收斂：內文的 <b> 全站有六百多個（每 30~60 字一個），
   全部 700/800 的話等於沒有強調。降到 600、亮度升到 --fg —— 靠「變亮」強調，
   不靠「變粗」轟炸。標題仍是 800，層級才拉得開。 */
.help-body b, .help-body strong { font-weight: var(--fw-semibold); color: var(--fg); }
/* ---- 功能架構圖（templates/_archmap.html；六頁共用，預設收起）---- */
.help-arch { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--rad-md);
  background: var(--bg); }
.help-arch > summary { cursor: pointer; padding: 11px 14px; font-size: var(--fs-md);
  font-weight: var(--fw-bold); color: var(--text); list-style: none; user-select: none; }
.help-arch > summary::-webkit-details-marker { display: none; }
.help-arch > summary::before { content: "▸ "; color: var(--text-muted); }
.help-arch[open] > summary::before { content: "▾ "; }
.help-arch > summary:hover { color: var(--primary-text); }
.arch-body { padding: 0 14px 14px; }
.arch-one { margin: 0 0 12px !important; font-size: var(--fs-lg); line-height: 1.8;
  color: var(--text); border-left: 3px solid var(--primary); padding-left: 10px; }
.arch-map-title { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
  margin: 14px 0 6px; }
/* 六頁關係：一排藥丸，目前這頁高亮 */
.arch-sys { display: flex; flex-wrap: wrap; gap: 6px; }
.arch-sys-item { display: inline-flex; flex-direction: column; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: var(--rad-sm); background: var(--surface);
  font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
.arch-sys-item b { color: var(--text); font-size: var(--fs-md); }
.arch-sys-item small { font-size: var(--fs-xs); }  /* small 預設縮 83%，不明寫會變 10px */
.arch-sys-item.on { border-color: var(--primary); background: var(--info-soft); }
.arch-sys-item.on b { color: var(--primary-text); }
.arch-sys-note { font-size: var(--fs-sm) !important; color: var(--text-muted);
  margin: 8px 0 0 !important; line-height: 1.8; }
/* 輸入 → 處理 → 輸出。窄螢幕自動疊成一欄（箭頭轉向下） */
.arch-flow { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.arch-col { flex: 1 1 200px; min-width: 0; border: 1px solid var(--border);
  border-radius: var(--rad-sm); background: var(--surface); padding: 10px 12px; }
.arch-col-mid { flex: 1.5 1 260px; border-color: var(--primary); }
.arch-col-h { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted);
  margin-bottom: 6px; }
.arch-col ul { margin: 0; padding-left: 16px; }
.arch-col li { font-size: var(--fs-lg); line-height: 1.75; margin: 2px 0; color: var(--text); }
.arch-arrow { align-self: center; color: var(--primary); font-size: var(--fs-md); flex: 0 0 auto; }
/* 狀態機：一行一條轉換 */
.arch-sm { display: flex; flex-direction: column; gap: 5px; }
.arch-sm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-lg); }
.arch-st { display: inline-block; padding: 2px 9px; border-radius: var(--rad-full);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-weight: var(--fw-bold); white-space: nowrap; }
.arch-st-to { border-color: var(--primary); color: var(--primary-text); }
.arch-ev { color: var(--text-muted); font-size: var(--fs-xs); }
.arch-ev::before { content: "── "; }
.arch-ev::after { content: " ─▶"; }
.arch-note { font-size: var(--fs-sm) !important; color: var(--text-muted);
  margin: 10px 0 0 !important; line-height: 1.8; }
@media (max-width: 700px) {
  .arch-flow { flex-direction: column; }
  .arch-arrow { align-self: flex-start; transform: rotate(90deg); margin-left: 14px; }
}

.help-lead {
  margin: 14px 0 6px;
  padding: 12px 14px;
  background: var(--info-soft);
  border-left: 3px solid var(--primary);
  border-radius: var(--rad-sm);
  font-size: var(--fs-xl); line-height: 1.9;   /* 開場白大一階：先講這一頁是幹嘛的 */
  color: var(--fg);
}
/* 章節標題：原本 13px／14.5px 兩條規則打架，而且比內文（14px）還小 —— 讀起來就是
   「忽大忽小」。章名要**明顯大於內文**：18px＋主色錨條，掃頁時當書籤用。 */
.help-body h4 {
  margin: 30px 0 10px;
  font-size: var(--fs-2xl); line-height: var(--lh-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg);
  padding: 0 0 7px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--primary);
}
/* 節標（章之下）：手冊面板的 h4、hx 面板的 h5、節奏表尾欄 —— 16px、semibold。
   跟章名差兩級（大小＋重量），中間才有層。 */
.help-body h5, .hx-panel h5, .dos-hb-panel h4, .help-rhythm-foot h4 {
  font-size: var(--fs-xl); line-height: var(--lh-xl);
  font-weight: var(--fw-semibold); color: var(--fg);
  border-left: none;
}
.help-body p { margin: 6px 0; }
.help-list { margin: 6px 0; padding-left: 20px; }
/* li 的間距在上面（.help-body 區）統一成 5px —— 這裡不要再寫一條蓋掉它 */
.help-note {
  margin: 8px 0 !important;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}
.help-note b { color: var(--fg); }
.help-note { line-height: 1.8; }
/* 警示註記：內容說「這裡反直覺／會踩雷」時用 —— 顏色本身就是訊息 */
.help-note--warn {
  background: var(--warning-soft, rgba(210,153,34,.1));
  border: 1px solid transparent;
  border-left: 3px solid var(--warning, #d29922);
}
.help-formula {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  padding: 12px;
  margin: 8px 0 !important;
  background: linear-gradient(135deg, var(--info-soft), var(--success-soft));
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
}
/* 說明用表格：與資料表格區隔，較緊湊 */
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-lg);   /* 表格是內容不是註腳：回到內文字級（T36 平移後 lg=14） */
  margin: 10px 0;
}
.help-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.help-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}
.help-table td:first-child { white-space: nowrap; }
.help-table tr:last-child td { border-bottom: none; }
/* 色調示意 chip */
.help-chip {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--rad-sm);
  margin-right: 4px;
}
.help-chip-good { color: var(--success); background: var(--success-soft); }
.help-chip-warn { color: var(--idle); background: var(--idle-soft); }
.help-chip-flat { color: var(--fg-subtle); background: var(--neutral-soft); }

.help-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.help-foot .muted { font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .help-modal .help-box { max-height: 92vh; }
  .help-head, .help-body, .help-foot { padding-left: 15px; padding-right: 15px; }
  /* 手機不另設 13px —— 脫離四階字階的值就是「忽大忽小」的來源。
     內文維持 --fs-md；表格降一階到 --fs-xs（那是合法的註腳層，不是新尺寸）。 */
  .help-table { font-size: var(--fs-xs); }
  .help-table td:first-child { white-space: normal; }
  .help-foot .muted { display: none; }   /* 手機空間有限，只留按鈕 */
}

/* 說明章節：預設收合，只露出標題，讓 modal 一開始保持精簡 */
.help-sec {
  border-bottom: 1px solid var(--border);
}
.help-sec:last-of-type { border-bottom: none; }
.help-sec > summary {
  font-weight: var(--fw-semibold);
  color: var(--fg);
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 11px 2px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.help-sec > summary::-webkit-details-marker { display: none; }
.help-sec > summary::after {
  content: "▾";
  color: var(--text-muted);
  font-size: var(--fs-xs);
  transition: transform .2s;
  flex-shrink: 0;
}
.help-sec[open] > summary::after { transform: rotate(180deg); }
.help-sec > summary:hover { color: var(--primary); }
.help-sec-body { padding: 0 2px 12px; }
/* 展開後第一個元素不要再帶上方外距，避免與標題間距過大 */
.help-sec-body > :first-child { margin-top: 0; }

/* ---- 說明用示意圖：一律等比縮放，窄螢幕不需要橫捲 ---- */
.hx-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0 12px;
}
.hx-svg text { font-family: var(--font-mono); }

/* ---- 互動教學（儀表板逐欄拆解 / 參數七組導覽）---- */
/* 「可以點」的提示：用主色下底線，避免整段文字都變藍而失焦 */
.hx-cta {
  color: var(--primary);
  border-bottom: 1px dashed var(--primary);
}
.hx-demo { margin: 10px 0 4px; }

/* 模擬儀表板：刻意做得跟真的決策卡一樣，看說明時就在認畫面 */
.hx-mock {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
}
.hx-mock-chain {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
}
.hx-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 4px 2px 0;
}
/* 每一列本身就是按鈕（鍵盤可 Tab、可 Enter；不必另外加 role） */
.hx-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hx-row:hover { background: var(--bg-card-hover); border-color: var(--text-muted); }
.hx-row.is-on { border-color: var(--primary); background: var(--primary-soft); }
.hx-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 點過之後給一個「已展開」的記號，長列表裡才找得回來 */
.hx-row.is-on::after {
  content: "▾";
  margin-left: auto;
  color: var(--primary);
  flex-shrink: 0;
}
.hx-row-final { border-left: 3px solid var(--primary); }
.hx-row-mode { border-left: 3px solid var(--status-ok); }
.hx-row-ind { margin-left: 10px; }
.hx-n { color: var(--text-muted); flex-shrink: 0; }
.hx-k {
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 58px;
}
.hx-badge {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: var(--rad-sm);
  padding: 1px 6px;
}
.hx-row-mode .hx-badge { color: var(--success-text); background: var(--success-soft); }

/* 分組頁籤（參數七組） */
.hx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.hx-tab {
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.hx-tab i {
  font-style: normal;
  font-size: var(--fs-xs);
  opacity: .7;
  margin-left: 5px;
}
.hx-tab:hover { color: var(--text); border-color: var(--text-muted); }
.hx-tab.is-on {
  color: var(--text);
  border-color: var(--primary);
  background: var(--primary-soft);
}
.hx-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* 解說面板：預設收著，被選中才展開 */
.hx-panel { display: none; }
.hx-panel.is-on {
  display: block;
  margin: 8px 0 4px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--rad-sm);
}
.hx-panel h5 {
  margin: 0 0 8px;
  font-size: var(--fs-lg);
  color: var(--text);
}
.hx-panel > :last-child { margin-bottom: 0; }
.hx-panel .help-table { margin-top: 6px; }
.hx-panel i { font-style: normal; color: var(--primary); }

/* 參數說明「三段式」示意 */
.hx-descdemo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  font-size: var(--fs-xs);
}
.hx-desc-line { display: flex; gap: 9px; align-items: baseline; }
.hx-desc-tag {
  flex-shrink: 0;
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 640px) {
  .hx-row { font-size: var(--fs-xs); }
  .hx-row-ind { margin-left: 0; }
  .hx-k { min-width: 0; }
}

/* 圖上時段標籤所屬交易日 ≠ 今天時的提示（週末／剛開盤尚無當日 K） */
.mc-chart-daynote {
  margin: 0 0 8px;
  padding: 7px 11px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--warning-text);
  background: var(--warning-soft);
  border: 1px solid var(--status-warn);
  border-radius: var(--rad-sm);
}
.mc-chart-daynote[hidden] { display: none; }

/* 判斷鏈：預設收合。平常只看結論就夠，要追「為什麼」才展開。 */
.mc-chain-wrap {
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.mc-chain-toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
}
.mc-chain-toggle::-webkit-details-marker { display: none; }
.mc-chain-toggle:hover { color: var(--text); }
.mc-chain-toggle::after {
  content: "▾";
  margin-left: auto;
  font-size: var(--fs-xs);
  transition: transform .2s;
}
.mc-chain-wrap[open] > .mc-chain-toggle { color: var(--text); }
.mc-chain-wrap[open] > .mc-chain-toggle::after { transform: rotate(180deg); }
.mc-chain-toggle-hint {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-dim, var(--text-muted));
  opacity: .8;
}
/* 收合在 details 內時，chain 自己就不需要再畫一條上邊線 */
.mc-chain-wrap .mc-chain { border-top: none; margin-top: 0; }

/* 透明觸控熱區：視覺上完全看不見，只負責收 hover / tap 事件。
   視覺點維持 r=9，換算到手機約 8.7px，遠低於 44px 觸控建議；
   熱區把可點範圍放大到約 20px 半徑，視覺尺寸不變。 */
.sr-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}
/* 明細表列可點（手機主要進入點）：給明確的可按提示 */
.sr-metric-tbl tbody tr { cursor: pointer; }
.sr-metric-tbl tbody tr:active { background: var(--bg-card-hover); }

/* 手機：明細表列是觸控最可靠的進入點，把列高補到 44px 觸控建議 */
@media (max-width: 640px) {
  .sr-metric-tbl tbody td { padding-top: 10px; padding-bottom: 10px; }
}

/* MCPT 決策卡「下一步」清單（2026-10-23；10-27 併進「判斷依據」最上面、跟著它預設收起）。
   一條一列：圖示｜參數代碼｜名稱｜現在的數字（規則小字在下）；手機把內容折到第二行。 */
.mc-next { margin: 4px 0 12px; padding: 2px 14px 10px; border: 1px solid var(--border); border-radius: var(--rad-sm); }
.mc-next[hidden] { display: none; }
.mc-next-head {
  list-style: none;
  display: flex; gap: 10px; align-items: baseline; padding: 9px 0 4px;
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
}
.mc-next-grp { margin-top: 10px; font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.mc-next-sec { margin-top: 8px; }
.mc-next-sec-t {
  display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
}
.mc-next-pass { padding: 0 6px; border-radius: var(--rad-sm); font-size: var(--fs-xs); font-weight: 600; }
.mc-next-pass.ok { color: var(--success-text); background: var(--success-soft); }
.mc-next-pass.no { color: var(--text-muted); background: var(--neutral-soft); }
.mc-next-row {
  display: grid; grid-template-columns: 1.3em 4.2em minmax(7em, 12em) minmax(0, 1fr);
  gap: 2px 10px; align-items: baseline; padding: 4px 0;
  border-top: 1px dashed var(--border); font-size: var(--fs-sm); line-height: 1.5;
}
.mc-next-ic { text-align: center; font-weight: 700; }
.mc-next-row.ok .mc-next-ic { color: var(--success-text); }
.mc-next-row.no .mc-next-ic { color: var(--danger-text); }
.mc-next-row.wait .mc-next-ic { color: var(--warning-text); }
.mc-next-row.na { opacity: .72; }
.mc-next-code { font-weight: 700; white-space: nowrap; color: var(--text); }
.mc-next-name { font-weight: 600; color: var(--text); }
.mc-next-who { color: var(--warning-text); margin-right: 2px; }
.mc-next-body { display: flex; flex-direction: column; min-width: 0; }
.mc-next-now { color: var(--text); }
.mc-next-rule { color: var(--text-muted); font-size: var(--fs-xs); }
.mc-next-note { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 640px) {
  .mc-next-row { grid-template-columns: 1.3em 3.8em minmax(0, 1fr); }
  .mc-next-body { grid-column: 2 / -1; }
}

/* MCPT 決策卡：引擎狀態儀表板（級別推導鏈 + 風控列） */
.mc-dash { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); }
.mc-dash-row { display: flex; gap: 10px; align-items: baseline; line-height: 1.5; }
.mc-dash-k {
  flex: 0 0 72px;
  color: var(--text-dim, var(--text-muted));
  font-size: var(--fs-xs);
  text-align: right;
}

/* Paper 持倉橫幅的「手動平倉」：紅字描邊，跟自動出場防線視覺區隔 */
.pp-flatten {
  font: inherit;
  font-size: var(--fs-xs);
  padding: 2px 10px;
  background: transparent;
  color: var(--bear, var(--danger));
  border: 1px solid var(--bear, var(--danger));
  border-radius: var(--rad-sm);
  cursor: pointer;
}
.pp-flatten:hover:not(:disabled) { background: var(--danger-soft); }
.pp-flatten:disabled { opacity: .6; cursor: default; }


/* ===================== DOS 策略頁 ===================== */
.dos-table td.num { text-align: right; white-space: nowrap; }
.dos-table th.num { text-align: right; }
.dos-row { cursor: pointer; }
.dos-row:hover { background: var(--bg-card-hover); }
.dos-sym { font-size: var(--fs-md); }
.dos-name { font-size: var(--fs-xs); }
.dos-chips { white-space: nowrap; }
.dos-chips .pill { margin: 1px 2px 1px 0; }
.dos-summary { font-size: var(--fs-xs); color: var(--text-secondary); max-width: 420px; line-height: 1.5; }
.dos-ops { white-space: nowrap; text-align: right; }
.dos-op { font-size: var(--fs-md); padding: 2px 6px; }
.dos-status { min-height: 16px; margin-top: 8px; }
.dos-status[data-kind="ok"] { color: var(--status-ok); }
.dos-status[data-kind="bad"] { color: var(--status-alert); }
.dos-stale {
  margin: 0 0 10px; padding: 8px 12px; font-size: var(--fs-md);
  background: var(--warning-soft); border: 1px solid var(--status-warn); border-radius: var(--rad-sm);
  color: var(--warning-text);
}
.dos-chip {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; margin: 1px 2px 1px 0;
  border: 1px solid; border-radius: var(--rad-sm); white-space: nowrap;
}
.dos-chip-ok   { color: var(--success-text); border-color: var(--status-ok);   background: var(--success-soft); }
.dos-chip-warn { color: var(--warning-text); border-color: var(--status-warn); background: var(--warning-soft); }
.dos-chip-bad  { color: var(--text-muted); border-color: var(--border); }
/* 「適合」但過不了進場檢查表：保留等級顏色，但淡化＋虛線框，一眼分得出「看起來可以」和「真的會進」 */
.dos-chip.dos-chip-blocked { opacity: .6; border-style: dashed; }

/* 詳情卡 */
.dos-detail { margin-top: 14px; }
.dos-detail .mc-card-head h2 .pill { font-size: var(--fs-xs); vertical-align: middle; }
.dos-summary-line { margin: 0 0 12px; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; }
.dos-detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; }
.dos-chart-wrap { min-width: 0; }
.dos-chart { display: block; width: 100%; }
.dos-legend { font-size: var(--fs-xs); margin-top: 4px; }
.dos-legend i { font-style: normal; }
.dos-facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; font-size: var(--fs-md); }
.dos-facts > div { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.dos-facts dt { flex: 0 0 120px; color: var(--text-muted); font-size: var(--fs-xs); }
.dos-facts dd { margin: 0; flex: 1; }
.dos-facts dd small { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }
.dos-h3 { font-size: var(--fs-md); margin: 18px 0 8px; color: var(--text-secondary); }
.dos-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.dos-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-md); padding: 12px 14px;
  font-size: var(--fs-md); line-height: 1.5;
}
.dos-card-ok   { border-color: var(--success-soft); }
.dos-card-warn { border-color: var(--warning-soft); }
.dos-card-bad  { opacity: .78; }
.dos-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dos-card header b { font-size: var(--fs-md); }
.dos-card header .muted { font-size: var(--fs-xs); }
.dos-card header .dos-hb-open { margin-left: auto; font-size: var(--fs-md); padding: 0 6px; }
.dos-level { font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--rad-sm); border: 1px solid; }
.dos-level-ok   { color: var(--success-text); border-color: var(--status-ok); background: var(--success-soft); }
.dos-level-warn { color: var(--warning-text); border-color: var(--status-warn); background: var(--warning-soft); }
.dos-level-bad  { color: var(--text-muted); border-color: var(--border); }
.dos-reasons { list-style: none; margin: 0 0 8px; padding: 0; }
.dos-reasons li { display: flex; gap: 6px; padding: 2px 0; }
.dos-reasons li em { font-style: normal; color: var(--text-muted); font-size: var(--fs-xs); margin-left: 4px; }
.dos-reasons li.r-warn { color: var(--warning-text); }
.dos-reasons li.r-bad { color: var(--danger-text); }
.dos-reasons li.r-info { color: var(--text-muted); }
.dos-plan { border-top: 1px dashed var(--border); padding-top: 6px; }
.dos-plan summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); }
.dos-plan dl { margin: 6px 0 0; display: grid; grid-template-columns: 56px 1fr; gap: 3px 8px; font-size: var(--fs-xs); }
.dos-plan dt { color: var(--text-muted); }
.dos-plan dd { margin: 0; }

/* 手冊 modal */
.dos-hb-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 12px; }
.dos-hb-tab {
  font: inherit; font-size: var(--fs-xs); padding: 4px 10px; cursor: pointer;
  background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--rad-sm);
}
.dos-hb-tab.active { color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
.dos-hb-panel h4 { margin: 4px 0 6px; font-size: var(--fs-lg); }
.dos-hb-tag { margin: 0 0 6px; }
.dos-hb-lead { font-size: var(--fs-lg); color: var(--text-secondary); margin: 0 0 10px; }
/* 策略頁的欄位表：標題與內容原本同色同字級，整頁看起來是一長串沒有層次的文字
   （使用者回報「title 和內容沒差別，不容易讀懂」）。改成左欄標籤：
   標題縮排成固定寬度的欄、小字、次要色、右對齊；內容靠左並有左邊界線分隔。
   窄螢幕退回上下堆疊，標題加左側色條當視覺錨點。 */
.dos-hb-dl { margin: 0; font-size: var(--fs-lg);
             display: grid; grid-template-columns: 6.5em 1fr; gap: 0 var(--space-1-half); }
.dos-hb-dl dt { grid-column: 1; color: var(--fg-subtle); font-size: var(--fs-xs);
                font-weight: 700; letter-spacing: .02em; text-align: right;
                padding-top: .35em; margin: 0; }
.dos-hb-dl dd { grid-column: 2; margin: 0; padding: .2em 0 .55em var(--space-1);
                line-height: 1.65; border-left: 2px solid var(--line);
                border-bottom: 1px solid var(--line-soft, var(--line)); }
.dos-hb-dl dd:last-of-type { border-bottom: 0; }
.dos-hb-dl ul { margin: 2px 0; padding-left: 18px; }
.dos-hb-dl ul li { margin: 3px 0; }
@media (max-width: 640px) {
  .dos-hb-dl { display: block; }
  .dos-hb-dl dt { text-align: left; margin-top: 12px; padding-left: 6px;
                  border-left: 3px solid var(--primary-line); }
  .dos-hb-dl dd { padding-left: 9px; border-left: 0; }
}
.dos-help-tbl { font-size: var(--fs-xs); }
.dos-help-tbl td { padding: 6px 8px; }
.dos-conflicts li { margin: 8px 0; line-height: 1.55; }
.dos-adopted { color: var(--status-ok); font-weight: 700; }

/* 編輯 modal */
.dos-select { width: 100%; padding: 8px 10px; font-size: var(--fs-md); }
.dos-checks { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; font-size: var(--fs-md); }
.dos-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

@media (max-width: 900px) {
  .dos-detail-grid { grid-template-columns: 1fr; }
  .dos-cards { grid-template-columns: 1fr; }
  .dos-summary { display: none; }
}


/* ---- DOS：策略比較 / 損益圖 / paper 引擎 / postmortem ---- */
.dos-cmp-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.dos-cmp { font-size: var(--fs-xs); }
.dos-cmp td, .dos-cmp th { padding: 6px 8px; }
.dos-cmp-legs { font-size: var(--fs-xs); color: var(--text-secondary); max-width: 260px; }
.dos-cmp-note { font-size: var(--fs-xs); margin-top: 4px; }
.dos-chart-box { position: relative; width: 100%; min-height: 150px; }
.dos-chart-box canvas { width: 100% !important; }
.dos-payoff-wrap { height: 150px; margin: 4px 0 6px; }
.dos-payoff-wrap canvas { width: 100% !important; height: 150px !important; }
.dos-econ { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 8px; }
.dos-econ b { color: var(--text); }
.dos-open-paper { margin-top: 8px; font-size: var(--fs-xs); border: 1px solid var(--border); border-radius: var(--rad-sm); }
.dos-pp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; }
.dos-pp-table { font-size: var(--fs-xs); }
.dos-pp-table td { padding: 8px; }
.dos-pp-table td.num, .dos-pp-table th.num { text-align: right; white-space: nowrap; }
.dos-pp-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-md); margin-bottom: 8px; }
.dos-pp-stats b { color: var(--text); font-size: var(--fs-md); }
.dos-spark canvas { display: block; margin-left: auto; }
.dos-watch { font-size: var(--fs-xs); color: var(--text-muted); }
.dos-watch span { display: block; white-space: nowrap; }
/* DOW 已失敗部位的出場點一句話很長（L2 FIB80／S2 FIB100…）：要能換行，不能跟上一行一起 nowrap 推出表格 */
.dos-watch .dow-fail-plan { white-space: normal; max-width: 30em; margin-bottom: 4px; }
.dos-events { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-xs); max-height: 260px; overflow: auto; }
.dos-events li { padding: 3px 0; border-bottom: 1px solid var(--border); }
.dos-pm { margin-top: 12px; border: 1px solid var(--primary); border-radius: var(--rad-md); padding: 12px 14px; background: var(--bg); }
.dos-pm-head { display: flex; align-items: center; gap: 10px; }
.dos-pm-head .dos-pm-close { margin-left: auto; }
.dos-pm-verdict { font-size: var(--fs-md); margin: 8px 0 10px; }
.dos-pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ⚠️ 這兩張圖的容器**必須有固定高度**。Chart.js 在 maintainAspectRatio:false 下
   會把畫布撐到填滿父層，而父層若只有 min-height、高度由內容決定，就形成
   「畫布撐大父層 → 父層讓畫布更大」的迴圈 —— 實測畫布長到 3,485px（該是 220）。
   淨值圖沒事是因為 .dos-nav-box .dos-chart-box 有寫死高度；這裡漏了。 */
.dos-pm-grid .dos-chart-box { height: 220px; }
.dos-pm-grid .dos-chart-box canvas { height: 220px !important; }
.dos-pm-grid .muted { font-size: var(--fs-xs); margin-top: 2px; }
.dos-pm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; font-size: var(--fs-md); }
.dos-pm-cols h4 { margin: 0 0 4px; font-size: var(--fs-md); color: var(--text-secondary); }
.dos-pm-findings { list-style: none; margin: 4px 0; padding: 0; }
.dos-pm-findings li { padding: 2px 0; }
.dos-pm-findings li.f-bad { color: var(--danger-text); }
.dos-pm-findings li.f-good { color: var(--success-text); }
.dos-pm-findings li.f-note { color: var(--text-muted); }
.dos-pm-llm { margin-top: 12px; padding: 10px 12px; background: var(--primary-soft); border-radius: var(--rad-sm); font-size: var(--fs-md); line-height: 1.6; }
.dos-pm-llm p { margin: 4px 0 0; white-space: pre-wrap; }
.dos-params { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 6px 0 12px; font-size: var(--fs-md); }
.dos-param { display: flex; align-items: center; gap: 8px; }
.dos-param span { flex: 1; color: var(--text-muted); font-size: var(--fs-xs); }
.dos-param input[type=number] { width: 90px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 4px 6px; font: inherit; }
.dos-param-wide { grid-column: 1 / -1; }
.dos-param select { flex: 2; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 4px 6px; font: inherit; }
@media (max-width: 900px) {
  .dos-cmp-grid, .dos-pp-grid, .dos-pm-grid, .dos-pm-cols, .dos-params { grid-template-columns: 1fr; }
}


/* ---- DOS：可讀的腳位／市況標籤／持倉理由 ---- */
.dos-legs { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); line-height: 1.35; }
.dos-legs > div { white-space: nowrap; }
.dos-legs i { font-style: normal; display: inline-block; min-width: 2.2em; font-weight: 700; padding: 0 5px; border-radius: var(--rad-sm); text-align: center; margin-right: 4px; }
.dos-legs .leg-buy i  { color: var(--success-text); background: var(--success-soft); }
.dos-legs .leg-sell i { color: var(--danger-text); background: var(--danger-soft); }
.dos-legs b { color: var(--text); font-size: var(--fs-md); }
.dos-legs small { color: var(--text-muted); font-size: var(--fs-xs); white-space: normal; }
.dos-cmp-legs { min-width: 150px; }
.dos-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dos-tag { display: inline-flex; flex-direction: column; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--rad-sm); font-size: var(--fs-xs); line-height: 1.3; white-space: nowrap; background: var(--bg); }
.dos-tag small { font-size: var(--fs-xs); color: var(--text-muted); }
.dos-tag-bull { border-color: var(--success-soft); color: var(--success-text); }
.dos-tag-bear { border-color: var(--danger-soft); color: var(--danger-text); }
.dos-tag-key  { border-color: var(--warning-soft); color: var(--warning-text); }
.dos-tag-muted { color: var(--text-secondary); }
.dos-summary { max-width: 520px; }
.dos-summary-line { margin: 0 0 12px; }
.pp-detail-btn { font-size: var(--fs-xs); padding: 1px 6px; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--rad-sm); }
.pp-detail-row td { background: var(--bg); padding: 12px 14px 14px; }
.pp-detail-cols { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 16px; font-size: var(--fs-md); }
.pp-detail h4 { margin: 0 0 6px; font-size: var(--fs-md); color: var(--text-secondary); }
.pp-detail h4:not(:first-child) { margin-top: 12px; }
.pp-detail p { margin: 4px 0; line-height: 1.5; }
.pp-snap { margin: 0; }
.pp-snap > div { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.pp-snap dt { flex: 0 0 110px; color: var(--text-muted); font-size: var(--fs-xs); }
.pp-snap dd { margin: 0; }
@media (max-width: 900px) { .pp-detail-cols { grid-template-columns: 1fr; } }


/* ---- DOS：總覽 / 收合區塊 / 策略卡 summary ---- */
.dos-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.dos-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.dos-kpi small { font-size: var(--fs-xs); color: var(--text-muted); }
.dos-kpi b { font-size: var(--fs-xl); line-height: 1.2; }
.dos-kpi span { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.4; }
.dos-kpi-ok { border-color: var(--success-soft); }
.dos-kpi-ok b { color: var(--success-text); }
.dos-kpi-warn { border-color: var(--warning-soft); }
.dos-kpi-warn b { color: var(--warning-text); }
.dos-kpi-bad { border-color: var(--danger-soft); }
.dos-kpi-bad b { color: var(--danger-text); }
.dos-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; }
.dos-feature { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--rad-md); text-decoration: none; color: var(--text); background: transparent; }
.dos-feature:hover { border-color: var(--primary); background: var(--primary-soft); }
.dos-feature b { font-size: var(--fs-md); }
.dos-feature span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.dos-chain-status { margin: 0 0 8px; }
.dos-section > summary { font-size: var(--fs-lg); }
.dos-sec-title { font-weight: 600; }
.dos-sec-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.dos-sec-actions .muted { flex: 1; min-width: 200px; }
.dos-pick { min-width: 220px; }
.dos-pick-why { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.dos-sub { border: 1px solid var(--border); border-radius: var(--rad-md); padding: 0 12px; margin: 10px 0; background: var(--bg); }
.dos-sub > summary { cursor: pointer; padding: 10px 0; font-size: var(--fs-md); font-weight: 600; list-style: none; }
.dos-sub > summary::-webkit-details-marker { display: none; }
.dos-sub > summary::before { content: "▸ "; color: var(--text-muted); }
.dos-sub[open] > summary::before { content: "▾ "; }
.dos-sub[open] > summary { border-bottom: 1px dashed var(--border); margin-bottom: 10px; }
.dos-sub .dos-detail-grid { padding-bottom: 12px; }
/* 策略卡：<details>，summary 一行 = 等級／名稱／分數／權利金 ML MP POP */
.dos-card { padding: 0; }
.dos-card > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.dos-card > summary::-webkit-details-marker { display: none; }
.dos-card > summary::before { content: "▸"; color: var(--text-muted); font-size: var(--fs-xs); }
.dos-card[open] > summary::before { content: "▾"; }
.dos-card > summary b { font-size: var(--fs-md); }
.dos-card > summary .muted { font-size: var(--fs-xs); }
.dos-card-econ { font-size: var(--fs-xs); color: var(--text-secondary); margin-left: auto; white-space: nowrap; }
.dos-card > summary .dos-hb-open { font-size: var(--fs-md); padding: 0 6px; }
.dos-card-body { padding: 0 14px 12px; border-top: 1px dashed var(--border); }
.dos-card-body .dos-payoff-wrap { margin-top: 10px; }

/* 收合後每張卡只有一行 → 單欄列表最順眼；打開的卡撐開即可 */
.dos-cards { grid-template-columns: 1fr; gap: 6px; }
.dos-card[open] { margin-bottom: 8px; }

.dos-case { border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 0 10px; margin: 6px 0; background: var(--bg); }
.dos-case > summary { cursor: pointer; padding: 8px 0; font-size: var(--fs-md); }
.dos-case[open] > summary { border-bottom: 1px dashed var(--border); margin-bottom: 6px; }
.dos-case .dos-hb-dl { padding-bottom: 8px; }
.dos-hb-tab-cases { border-color: var(--status-warn); color: var(--warning-text); }

/* ---- DOS：今日要處理 ---- */
.dos-actions { margin: 10px 0 4px; }
.dos-act-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dos-act-head b { font-size: var(--fs-md); }
.dos-act-none { font-size: var(--fs-md); color: var(--text-secondary); background: var(--success-soft);
  border: 1px solid var(--success-soft); border-radius: var(--rad-sm); padding: 8px 12px; }
.dos-act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dos-act-list li { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--rad-sm);
  padding: 8px 12px; background: var(--bg); font-size: var(--fs-md); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.dos-act-list li.act-red { border-left-color: var(--status-alert); background: var(--danger-soft); }
.dos-act-list li.act-orange { border-left-color: var(--status-warn); background: var(--warning-soft); }
.dos-act-list li.act-yellow { border-left-color: var(--warning-line); }
.act-prem { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--text); margin-top: 2px; }
.act-items { flex: 1 1 100%; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-size: var(--fs-xs); }
.act-items .act-red { color: var(--danger-text); }
.act-items .act-orange { color: var(--warning-text); }
.act-items .act-yellow { color: var(--text-muted); }
/* DOW 待辦（2026-10-24）：同一檔併成一張卡，卡頭寫部位現況、下面逐條列要處理的事 */
.dow-act-pos { font-size: var(--fs-sm); color: var(--text-muted); }
.dow-act-items { flex: 1 1 100%; margin: 2px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 3px; }
div.dow-act-items { padding-left: 0; }
/* DOW 持倉表：有待辦的列整列標色、出場監看欄列出待辦內容 */
.dow-pos-flag-red > td:first-child { box-shadow: inset 3px 0 0 var(--status-alert); }
.dow-pos-flag-orange > td:first-child { box-shadow: inset 3px 0 0 var(--status-warn); }
.dow-pos-flag { background: var(--warning-soft); }
.dow-todo-chip { display: inline-block; font-size: var(--fs-xs); padding: 0 6px; border-radius: var(--rad-sm);
  background: var(--warning-soft); color: var(--warning-text); border: 1px solid var(--warning-line); }
.dow-pos-todo { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: var(--fs-xs);
  white-space: normal; max-width: 34em; }
.dow-pos-todo .act-red { color: var(--danger-text); }
.dow-pos-todo .act-orange { color: var(--warning-text); }
/* DOW 前 10 名「能進場嗎」 */
.dow-entry { min-width: 11em; max-width: 18em; white-space: normal; }
.dow-entry-why { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.dow-entry-manual { color: var(--info-text, var(--text)); }

.dos-select-sm { width: auto; padding: 4px 8px; font-size: var(--fs-xs); }
.cand-fail { opacity: .6; }
.cand-add { border: 1px solid var(--border); border-radius: var(--rad-sm); font-size: var(--fs-xs); padding: 3px 8px; }

/* ---- DOS 說明：統一格式 + 互動教學 ---- */
.help-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: var(--fs-sm);
  color: var(--text-muted); background: var(--bg); border: 1px dashed var(--border); border-radius: var(--rad-sm);
  padding: 8px 12px; margin: 8px 0 14px; }
.help-toc b { color: var(--text); font-size: var(--fs-md); margin-right: 4px; }
.help-steps { margin: 6px 0; padding-left: 22px; }
.help-steps li { margin: 8px 0; line-height: 1.65; }
.help-tour li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tour-btn { font-size: var(--fs-xs); padding: 2px 10px; border: 1px solid var(--primary); border-radius: var(--rad-sm); color: var(--primary-text); }
.tour-btn:hover { background: var(--primary-soft); }
.tour-flash { animation: tourFlash 2.2s ease-out; }
@keyframes tourFlash {
  0%, 100% { box-shadow: none; }
  10%, 60% { box-shadow: 0 0 0 3px var(--warning-soft); }
}
.help-tbl { font-size: var(--fs-sm); margin: 6px 0 4px; }
.help-tbl th { font-size: var(--fs-sm); }
.help-tbl td { padding: 6px 8px; line-height: 1.55; vertical-align: top; }
.help-tbl td:first-child { white-space: nowrap; }
/* DOW 說明 ⑥ 的裁決表：題目欄是一整句（最長 46 字），nowrap 會把第一欄撐到 474px、整張表要橫捲才看得到「怎麼跑」。
   只放開帶 help-tbl-wrap 的表 —— 其他頁（DOS／PIS／MCPT）的第一欄是短標籤，維持不換行 */
.help-tbl.help-tbl-wrap td:first-child { white-space: normal; min-width: 8em; }
/* DOW 卡片／清單：MMVPS2 負期望值加註、錯邊卡不給下單的說明、rr 閘降級標籤（只用在 dow.js） */
.dow-ev-warn { color: var(--warning-text); background: var(--warning-soft); border-left: 3px solid var(--status-warn);
  border-radius: var(--rad-sm); padding: 4px 8px; margin: 6px 0; font-size: var(--fs-xs); line-height: 1.5; }
.dow-no-order { color: var(--danger-text, var(--text)); background: var(--danger-soft); border-radius: var(--rad-sm);
  padding: 6px 10px; margin: 8px 0 0; font-size: var(--fs-sm); }
.dow-demoted { margin-top: 3px; font-size: var(--fs-xs); white-space: nowrap; }
/* （原本這裡有第三條 .help-body h4，margin/color 跟主規則打架 —— 章名的白色
    就是被它蓋成灰的。字階規則只留 1749 那一條。） */
.help-pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 8px 12px;
  font-size: var(--fs-xs); overflow-x: auto; margin: 6px 0; }
.help-body code { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 1px 5px; font-size: var(--fs-xs); }
.dos-conflicts li.resolved { color: var(--text-secondary); }
.dos-conflicts li.pending { color: var(--text); }

/* ---- DOS：自動進場檢查表 ---- */
.dos-gates { border: 1px dashed var(--border); border-radius: var(--rad-sm); padding: 0 10px; margin: 8px 0; }
.dos-gates > summary { cursor: pointer; padding: 7px 0; font-size: var(--fs-xs); }
.dos-gates.gates-pass { border-color: var(--success-soft); }
.dos-gates.gates-fail { border-color: var(--danger-soft); }
.gate-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: var(--fs-xs); }
.gate-list li { display: grid; grid-template-columns: 20px 1fr; gap: 2px 6px; padding: 3px 0; }
.gate-list li small { grid-column: 2; color: var(--text-muted); font-size: var(--fs-xs); }
.gate-list li.gate-no b { color: var(--danger-text); }
.gate-list li.gate-ok b { color: var(--text-secondary); }
.dos-skipped { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.dos-skipped ul { margin: 4px 0 0; padding-left: 18px; }
.dos-skipped li { padding: 1px 0; }

.dos-auto { font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--rad-sm); border: 1px solid var(--border); }
.dos-auto.auto-on { color: var(--success-text); border-color: var(--success-soft); background: var(--success-soft); }
.dos-auto.auto-off { color: var(--warning-text); border-color: var(--warning-soft); background: var(--warning-soft); }
.dos-auto.auto-wait { color: var(--primary-text); border-color: var(--primary-soft); background: var(--primary-soft); }
.dos-auto code { font-size: var(--fs-xs); }

/* ---- DOS：候選掃描範圍說明 ---- */
.dos-scope { padding-bottom: 12px; }
.scope-group { margin: 8px 0 10px; }
.scope-group b { font-size: var(--fs-md); }
.scope-group .muted { font-size: var(--fs-xs); margin: 2px 0 4px; line-height: 1.5; }
.scope-syms { display: flex; flex-wrap: wrap; gap: 4px; }
.scope-syms span { font-size: var(--fs-xs); padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--bg-card); color: var(--text-secondary); cursor: help; }

/* ---- DOS：門檻設定表單 ---- */
.gate-form { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.gate-row { display: grid; grid-template-columns: 120px 90px 18px 1fr; align-items: center; gap: 8px; }
.gate-k { font-size: var(--fs-xs); color: var(--text-primary); }
.gate-in { width: 90px; padding: 3px 6px; font-family: inherit; font-size: var(--fs-xs);
  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--rad-sm); }
.gate-u { font-size: var(--fs-xs); color: var(--text-secondary); }
.gate-why { font-size: var(--fs-xs); line-height: 1.5; }
.gate-ops { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rot-h { margin: 12px 0 4px; font-size: var(--fs-xs); }
@media (max-width: 720px) {
  .gate-row { grid-template-columns: 1fr auto 14px; }
  .gate-why { grid-column: 1 / -1; }
}

/* ---- DOS：淨值曲線（總覽區）---- */
.dos-nav-box { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--rad-sm); background: var(--bg-card); }
.dos-nav-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dos-nav-now { margin-left: auto; display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-md); }
.dos-nav-box .dos-chart-box { height: 170px; }

/* ---- DOS：候選表的策略欄（一腳一行）---- */
.cand-plan { min-width: 210px; }
.cand-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; font-size: var(--fs-xs); }
.cand-legs { display: flex; flex-direction: column; gap: 2px; }
.cand-leg { display: flex; align-items: baseline; gap: 5px; font-size: var(--fs-xs); line-height: 1.7;
  padding: 1px 6px; border-left: 2px solid transparent; background: var(--surface-hover); }
.cand-leg i { font-style: normal; font-weight: 700; font-size: var(--fs-xs); }
.cand-leg em { font-style: normal; font-size: var(--fs-xs); opacity: .85; }
.cand-leg-t { font-size: var(--fs-xs); letter-spacing: .04em; color: var(--text-secondary); }
.cand-leg b { font-variant-numeric: tabular-nums; }
.cand-leg small { font-size: var(--fs-xs); color: var(--text-secondary); }
.cand-leg.leg-buy { border-left-color: var(--success-soft); }
.cand-leg.leg-buy i { color: var(--success-text); }
.cand-leg.leg-sell { border-left-color: var(--danger-soft); }
.cand-leg.leg-sell i { color: var(--danger-text); }
.cand-width, .cand-alt { font-size: var(--fs-xs); margin-top: 3px; }

/* ---- DOS：參數開關的補充說明 ---- */
.dos-param-note { font-size: var(--fs-xs); line-height: 1.6; margin-top: 4px; padding-left: 2px; }

/* ---- DOS help：節奏表（第一次看的人先看這個）---- */
/* 到期日與策略名目天期差很多時的警告徽章 —— 使用者拿名目天期去券商會找不到單 */
.dos-dte-warn {
  color: var(--warning-text); font-weight: 700; font-size: var(--fs-xs);
  cursor: help; white-space: nowrap;
}

/* ---- 說明：挑選邏輯的邊界 ／ 出場條件全表 ----
   跟 .help-rhythm 同一種「重點區塊」外觀，但用 warning 色的左邊條 ——
   這兩節講的是「引擎沒做到什麼」與「哪些還沒有證據」，語氣上該跟一般說明區隔。 */
.help-limits, .help-exits {
  margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--border);
  border-left: 3px solid var(--warning); border-radius: var(--rad-sm); background: var(--surface);
}
.help-limits h3, .help-exits h3 { margin: 0 0 8px; font-size: var(--fs-2xl); }
.help-exits h3 + h3, .help-limits h3 ~ h3 { margin-top: 20px; }
.help-limits h4, .help-exits h4 {
  margin: 16px 0 6px; font-size: var(--fs-lg); color: var(--warning-text);
}
.help-limits h4:first-of-type { margin-top: 12px; }
/* 條列跟節奏表的 .rh-list 同一個字階 —— 這兩節是正文不是註腳 */
.help-ul { margin: 6px 0 0; padding-left: 20px; }
.help-ul li { font-size: var(--fs-md); line-height: 1.75; margin-bottom: 6px; }
.help-ul li.help-caveat { color: var(--fg-subtle); }
.help-limits p, .help-exits p { font-size: var(--fs-md); line-height: 1.8; }
.help-exits .help-tbl td:first-child { text-align: center; color: var(--fg-subtle); }
.help-exits .help-tbl td .muted { display: block; font-size: var(--fs-xs); margin-top: 2px; }

.help-rhythm { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--rad-sm); background: var(--primary-soft); }
.help-rhythm h3 { margin: 0 0 8px; font-size: var(--fs-2xl); }
.help-rhythm .rh-bot { color: var(--primary-text); }
.help-rhythm .rh-you { color: var(--warning-text); }
.help-rhythm-tbl { margin-top: 10px; }
.help-rhythm-tbl td { vertical-align: top; }
.help-rhythm-tbl thead th { font-size: var(--fs-xs); }
.rh-list { margin: 0; padding-left: 18px; }
/* 節奏表是說明裡最重要的內容 —— 原本 11.5px 小到像註腳（class 不含 help 字樣，
   收斂字階時漏網）。回到內文層。 */
.rh-list li { font-size: var(--fs-md); line-height: 1.75; margin-bottom: 4px; }
.help-rhythm-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.help-rhythm-foot h4 { margin: 0 0 6px; font-size: var(--fs-lg); }
.help-rhythm-foot p { font-size: var(--fs-xs); margin: 0 0 4px; }
.help-rhythm-foot .dos-auto { display: inline-block; margin-right: 4px; }
@media (max-width: 860px) {
  .help-rhythm-foot { grid-template-columns: 1fr; }
  .help-rhythm-tbl thead { display: none; }
  .help-rhythm-tbl td { display: block; width: auto !important; }
}

/* ---- DOS：比較表的整體評估欄 ---- */
.dos-assess { min-width: 150px; }
.dos-assess b { font-size: var(--fs-xs); }
.dos-assess .muted { font-size: var(--fs-xs); line-height: 1.5; margin-top: 2px; }
.dos-grade { display: inline-block; min-width: 18px; margin-right: 5px; padding: 0 5px; border-radius: var(--rad-sm);
  font-weight: 700; font-size: var(--fs-xs); text-align: center; cursor: help; }
.dos-grade-ok { background: var(--success-soft); color: var(--success-text); border: 1px solid var(--success-soft); }
.dos-grade-warn { background: var(--warning-soft); color: var(--warning-text); border: 1px solid var(--warning-soft); }
.dos-grade-bad { background: var(--danger-soft); color: var(--danger-text); border: 1px solid var(--danger-soft); }

/* ---- 全站系統狀態列（topnav 右側）---- */
.sys-strip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); letter-spacing: var(--ls-xs); white-space: nowrap; }
.sys-seg { display: inline-flex; align-items: center; gap: 3px; text-decoration: none;
  padding: 2px 8px; border-radius: var(--rad-full); border: 1px solid transparent; cursor: pointer; }
.sys-ok   { color: var(--fg-subtle); }
.sys-ok:hover { background: var(--surface-hover); color: var(--fg); }
.sys-dim  { color: var(--fg-disabled); }
.sys-warn { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-line); }
.sys-bad  { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-line); }
.sys-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
@media (max-width: 860px) { .sys-strip { display: none; } }   /* 窄螢幕讓位給導覽 tabs */

/* ---- DOS 管線導覽（sticky 漏斗）---- */
.dos-pipeline { position: sticky; top: 0; z-index: 9;         /* topbar z-10：捲動時貼上緣 */
  display: flex; align-items: center; justify-content: center; gap: var(--space-half);
  margin: 0 0 var(--space-1-half); padding: var(--space-1) var(--space-1-half);
  background: color-mix(in oklab, var(--canvas) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-subtle); border-radius: var(--rad-md); }
.dos-pipe-seg { display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none;
  color: var(--fg-muted); padding: 3px 10px; border-radius: var(--rad-full);
  transition: background var(--dur-fast) var(--motion-ease); }
.dos-pipe-seg:hover { background: var(--surface-hover); color: var(--fg); }
.dos-pipe-seg small { font-size: var(--fs-xs); color: var(--fg-subtle); }
.dos-pipe-seg b { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--fg);
  font-variant-numeric: tabular-nums; }
.dos-pipe-seg span { font-size: var(--fs-xs); color: var(--fg-subtle); }
.dos-pipe-arrow { color: var(--fg-disabled); font-style: normal; font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .dos-pipeline { flex-wrap: wrap; position: static; }        /* 手機不 sticky：太佔高度 */
  .dos-pipe-seg span { display: none; }
}

/* ---- 點擊 popover（取代 hover tooltip：觸控可用、且有「可點」暗示）---- */
.has-pop { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.dos-pop { position: absolute; z-index: 130; width: max-content; max-width: 340px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--rad-md);
  box-shadow: var(--shadow-md); padding: var(--space-1) var(--space-1-half);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-muted); }
.dos-pop div + div { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-subtle); }

/* ---- 持倉 ticker 的 Finviz 日線預覽（hover 浮出，見 static/tickerpeek.js） ---- */
.tk-peek { cursor: zoom-in; border-bottom: 1px dashed var(--line-strong, var(--line)); }
.tk-peek:hover { color: var(--primary-text); border-bottom-color: currentColor; }
.tk-peek-card { position: absolute; z-index: 140;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--rad-md);
  box-shadow: var(--shadow-lg); padding: var(--space-1) var(--space-1); }
.tk-peek-head { display: flex; align-items: baseline; gap: var(--space-1);
  font-size: var(--fs-sm); margin-bottom: 6px; }
.tk-peek-head .muted { font-size: var(--fs-xs); }
.tk-peek-body { min-height: 219px; display: flex; align-items: center; justify-content: center; }
.tk-peek-body img { display: block; width: 100%; height: auto; border-radius: var(--rad-sm);
  cursor: pointer; }
.tk-peek-msg { font-size: var(--fs-xs); }
.tk-peek-foot { font-size: var(--fs-xs); margin-top: 6px; }

/* ---- 觀察池列的展開 chevron：「這列可以點」要看得出來 ---- */
.row-caret { display: inline-block; margin-right: 6px; color: var(--fg-subtle);
  transition: transform var(--dur-fast) var(--motion-ease); }
.row-caret.caret-open { transform: rotate(90deg); color: var(--primary-text); }

/* ---- 設定抽屜（右側滑入）：引擎參數＋掃描門檻集中一處 ---- */
.dos-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 95;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: drawer-in var(--dur-base) var(--motion-ease); }
/* 關鍵：作者樣式的 display 會蓋掉 hidden 屬性（UA 的 display:none 優先級最低）——
   不寫這條，抽屜一載入就開著而且關不掉（實際發生過）。 */
.dos-drawer[hidden] { display: none; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.dos-drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3) var(--space-1-half); border-bottom: 1px solid var(--line-subtle); }
.dos-drawer-head h3 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-xl); }
.dos-drawer-body { overflow-y: auto; padding: var(--space-1-half) var(--space-3) var(--space-3); }
.dos-drawer-body section + section { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line-subtle); }
.dos-drawer-body h4 { margin: 0 0 var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.dos-drawer-body h4 .muted { font-weight: var(--fw-normal); font-size: var(--fs-xs); }

/* ---- 分工 chip：🤖 引擎自動／👤 要你動手（全站統一語彙）---- */
.chip-bot, .chip-you { display: inline-flex; align-items: center; gap: 3px;
  padding: 0 8px; border-radius: var(--rad-full); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-xs); white-space: nowrap; }
.chip-bot { color: var(--info-text); background: var(--info-soft); border: 1px solid var(--primary-line); }
.chip-you { color: var(--warning-text); background: var(--warning-soft); border: 1px solid var(--warning-line); }

/* ---- 行動收件匣：整列可點 ---- */
.dos-act-legend { margin: 4px 0 6px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.dos-act-list li.act-clickable { cursor: pointer; transition: background var(--dur-fast) var(--motion-ease); }
.dos-act-list li.act-clickable:hover { background: var(--surface-hover); }
.dos-act-list li .act-go { margin-left: auto; font-size: var(--fs-xs); }
.dos-act-list li.act-clickable:hover .act-go { color: var(--primary-text); }

/* ---- 收錢策略標記（比較表）：教練建議新手先專注這類，排序也照這個走 ---- */
.chip-cash { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px;
  border-radius: var(--rad-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--success-text); background: var(--success-soft); border: 1px solid var(--success-line);
  white-space: nowrap; }

/* ---- 手冊：CS/DS 與高優先級 pill ---- */
.pill-green { border: 1px solid var(--success-line); background: var(--success-soft); color: var(--success-text); }
.pill-amber { border: 1px solid var(--warning-line); background: var(--warning-soft); color: var(--warning-text); }
.pill-star  { border: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--primary-text);
  font-weight: var(--fw-bold); }

/* ---- 手冊：到期損益結構示意圖 ---- */
.dos-payoff { margin: var(--space-1-half) 0 var(--space-2); padding: var(--space-1-half);
  border: 1px solid var(--line-subtle); border-radius: var(--rad-md); background: var(--surface-sunken); }
.dos-payoff figcaption { font-size: var(--fs-xs); color: var(--fg-subtle); margin-bottom: var(--space-1); }
.dos-payoff-svg { display: block; width: 100%; height: auto; max-height: 200px; overflow: visible; }
/* 圖上的標註：履約價、現價、兩平、MP／ML 都標在它們實際發生的位置。
   原本圖裡只有幾條線、數字全列在圖下 —— 要對照「哪條線是哪個履約價」
   得把視線在圖與文字之間來回跑。SVG 的 viewBox 上下各留了白給這些標籤。 */
.pf-t        { font-size: 7.5px; font-family: var(--ff-mono); fill: var(--fg-subtle); }
.pf-t-k      { fill: var(--fg-muted); }
.pf-t-kv     { fill: var(--fg); font-weight: 600; }
/* 用 --primary-text（6.75:1）不是 --primary-line —— 後者是「線條」色，
   當文字對比不足，實測在圖上幾乎看不見。 */
.pf-t-spot   { fill: var(--primary-text); }
.pf-t-be     { fill: var(--warning-text); }
.pf-t-zero   { fill: var(--fg-subtle); }
.pf-t-mp     { fill: var(--success-text); font-weight: 700; font-size: 8.5px; }
.pf-t-ml     { fill: var(--danger-text); font-weight: 700; font-size: 8.5px; }
.pf-be-dot   { fill: var(--warning-text); }
.pf-win  { fill: var(--rise-soft); }
.pf-lose { fill: var(--fall-soft); }
.pf-line { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.pf-zero { stroke: var(--fg-subtle); stroke-width: 1; }
/* 履約價與現價的參考線：原本用 --line（分隔線色）＋ 細虛線，在深色底上幾乎看不見。
   改用文字級的對比色並加粗虛線間隔 —— 這些線是要「指出位置」的，不是裝飾。 */
.pf-spot { stroke: var(--primary-text); stroke-width: 1.1; stroke-dasharray: 4 3; opacity: .75; }
.pf-k    { stroke: var(--fg-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.dos-payoff-legend { margin-top: 6px; font-size: var(--fs-xs); color: var(--fg-subtle);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-lg { display: inline-flex; align-items: center; gap: 4px; }
.pf-lg::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
.pf-lg-win::before  { background: var(--rise-soft); border: 1px solid var(--rise); }
.pf-lg-lose::before { background: var(--fall-soft); border: 1px solid var(--fall); }
.dos-payoff-nums { margin-top: 6px; display: flex; flex-wrap: wrap; gap: var(--space-1-half);
  font-size: var(--fs-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pf-open { font-style: normal; color: var(--warning-text); cursor: help; }

/* ---- 手冊：CS 總則分頁 ---- */
.dos-hb-tab-cs { border-color: var(--primary-line); color: var(--primary-text); font-weight: var(--fw-semibold); }
.dos-cs-h { margin: var(--space-2-half) 0 var(--space-1); font-size: var(--fs-md);
  font-weight: var(--fw-bold); color: var(--fg); }
.dos-cs-list { margin: 0; padding-left: 1.4em; }
.dos-cs-list > li { margin-bottom: var(--space-1); }
.dos-cs-list > li > div { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 2px; }
.dos-cs-list ul { margin: 4px 0 0; padding-left: 1.2em; color: var(--fg-muted); font-size: var(--fs-sm); }
.dos-cs-bad > li > b { color: var(--danger-text); }
.dos-cs-sop { list-style: none; margin: 0; padding: 0; }
.dos-cs-sop > li { padding: var(--space-1) 0 var(--space-1) 0; border-top: 1px solid var(--line-subtle); }
.dos-cs-sop > li:first-child { border-top: 0; }
.dos-cs-sop ul { margin: 4px 0 0; padding-left: 1.2em; color: var(--fg-muted); font-size: var(--fs-sm); }
.dos-cs-step { display: inline-block; min-width: 58px; padding: 1px 8px; margin-right: 8px;
  border-radius: var(--rad-full); background: var(--primary-soft); color: var(--primary-text);
  border: 1px solid var(--primary-line); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* ===================== PIS 策略頁（沿用 DOS 的版型；只加 Finviz preset 卡與 chip） ===================== */
.pis-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1-half); margin: var(--space-1) 0; }
.pis-preset { border: 1px solid var(--line-subtle); border-left-width: 3px; border-radius: var(--rad-md);
  padding: var(--space-1-half); background: var(--surface-sunken); min-width: 0; }
.pis-preset-bull { border-left-color: var(--success-line); }
.pis-preset-bear { border-left-color: var(--danger-line); }
.pis-preset-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pis-preset-head b { font-size: var(--fs-md); }
.pis-preset-head b[data-n]::after { content: " " attr(data-n) " 檔"; font-weight: var(--fw-normal); color: var(--fg-subtle); font-size: var(--fs-xs); }
.pis-preset-link { margin-left: auto; font-size: var(--fs-xs); text-decoration: none; }
.pis-preset-link:hover { color: var(--primary-text); }
.pis-preset-desc { font-size: var(--fs-xs); line-height: 1.5; margin: 4px 0 8px; }
.pis-preset-syms { display: flex; flex-wrap: wrap; gap: 4px; }
.pis-sym { display: inline-flex; align-items: baseline; gap: 3px; font-size: var(--fs-xs); padding: 1px 7px;
  border: 1px solid var(--line); border-radius: var(--rad-sm); background: var(--surface); color: var(--fg-muted); cursor: pointer; }
.pis-sym:hover { border-color: var(--primary-line); color: var(--fg); }
.pis-sym.sym-ok { border-color: var(--success-line); color: var(--success-text); }
.pis-sym.sym-warn { border-color: var(--warning-line); color: var(--warning-text); }
.pis-sym.sym-bad { opacity: .55; }
/* ⭐ 進前 10：最顯眼（實心底＋粗框），一眼就能從一百多顆 chip 裡找到 */
.pis-sym.sym-top { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-text);
  font-weight: var(--fw-semibold); box-shadow: 0 0 0 1px var(--primary-line) inset; }
.pis-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.pis-legend .pis-sym { cursor: default; }
.pis-preset-hit { font-size: var(--fs-xs); color: var(--primary-text); }
.pis-preset-means { margin-top: 4px; }
.pis-rules { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.pis-rule { font-size: var(--fs-xs); padding: 0 6px; border-radius: var(--rad-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--fg-muted); white-space: nowrap; }
.pis-check span { display: flex; flex-direction: column; gap: 1px; }
.pis-check span .muted { font-size: var(--fs-xs); }
.pis-sym i { font-style: normal; font-size: var(--fs-xs); color: var(--primary-text); font-weight: var(--fw-bold); }
.pis-pchip { display: inline-block; font-size: var(--fs-xs); padding: 0 6px; margin: 1px 2px 1px 0; border-radius: var(--rad-sm);
  border: 1px solid var(--line); color: var(--fg-muted); white-space: nowrap; }
.pis-pchip-bull { border-color: var(--success-line); color: var(--success-text); background: var(--success-soft); }
.pis-pchip-bear { border-color: var(--danger-line); color: var(--danger-text); background: var(--danger-soft); }
.pis-pchip-conflict { border-color: var(--warning-line); color: var(--warning-text); background: var(--warning-soft); }
.pis-pchip-core { border-color: var(--primary-line); color: var(--primary-text); background: var(--primary-soft); }
.pis-sym i.bear { color: var(--danger-text); }
.pis-preset-core { border-left-color: var(--primary-line); }
.pis-preset-off { opacity: .45; }
.pis-preset-off .pis-preset-desc { display: none; }
.pis-checks { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.pis-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.pis-check b { min-width: 3.2em; color: var(--fg-subtle); font-weight: var(--fw-semibold); }
.pis-check-note { font-size: var(--fs-xs); line-height: 1.5; margin: -4px 0 12px; }
.pis-side-h { margin-top: 14px; padding-left: 8px; border-left: 3px solid var(--success-line); }
.pis-side-bear { border-left-color: var(--danger-line); }
.pis-rank { font-variant-numeric: tabular-nums; }
.pis-bt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pis-bt .muted { font-size: var(--fs-xs); }
/* 每週部位健檢 */
.pis-hold-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.pis-hold-form input { padding: 4px 8px; font: inherit; font-size: var(--fs-sm); background: var(--bg-input, var(--bg)); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--rad-sm); width: 120px; }
.pis-hold-form input[type=text]:last-of-type { width: 200px; }
.pis-hold-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pis-hold { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--rad-sm);
  font-size: var(--fs-sm); background: var(--surface); }
.pis-hold button { font-size: var(--fs-xs); padding: 0 4px; }
.pis-chk { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--rad-md); padding: 10px 12px; margin: 8px 0; background: var(--bg); }
.pis-chk-red { border-left-color: var(--status-alert); } .pis-chk-orange { border-left-color: var(--status-warn); }
.pis-chk-yellow { border-left-color: var(--warning-line); } .pis-chk-green { border-left-color: var(--success-line); }
.pis-chk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.pis-chk-head b { font-size: var(--fs-md); }
.pis-chk-items { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--fs-sm); }
.pis-chk-items li { padding: 2px 0; line-height: 1.5; }
.pis-chk-items li.lv-red { color: var(--danger-text); } .pis-chk-items li.lv-orange { color: var(--warning-text); }
.pis-chk-items li.lv-yellow { color: var(--text-secondary); } .pis-chk-items li.lv-green { color: var(--text-muted); }
.pis-chk-pos { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pis-chk-sug { margin-top: 4px; font-size: var(--fs-xs); }
@media (max-width: 900px) { .pis-presets { grid-template-columns: 1fr; } }

/* 圖表來源分頁：引擎圖（疊履約價／支撐壓力／FIB）｜Finviz 日線／週線（瀏覽器直接向 Finviz 取圖） */
.dos-chart-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.dos-chart-tab { font: inherit; font-size: var(--fs-xs); padding: 2px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--rad-sm); background: var(--surface); color: var(--fg-muted); }
.dos-chart-tab:hover { border-color: var(--primary-line); color: var(--fg); }
.dos-chart-tab.on { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-text); font-weight: var(--fw-semibold); }
.dos-chart-tab-note { font-size: var(--fs-xs); margin-left: auto; }
.dos-chart-stys { display: flex; gap: 4px; margin-left: auto; }
.dos-chart-sty { font: inherit; font-size: var(--fs-xs); padding: 1px 8px; cursor: pointer; border-radius: var(--rad-sm);
  border: 1px dashed var(--line); background: transparent; color: var(--fg-subtle); }
.dos-chart-sty:hover { color: var(--fg); border-color: var(--primary-line); }
.dos-chart-sty.on { border-style: solid; border-color: var(--primary-line); color: var(--primary-text); }
.dos-chart-finviz img { width: 100%; height: auto; border-radius: var(--rad-sm); border: 1px solid var(--line); }
/* 有指標那張只有 466×219，放大會糊 —— 維持原尺寸置左，旁邊留白比糊掉好 */
.dos-chart-ta img { max-width: 466px; }
.dos-chart-big img { max-width: 900px; }
.dos-chart-err { margin-top: 6px; }
@media (max-width: 720px) { .dos-chart-tab-note { margin-left: 0; flex-basis: 100%; } }

/* ── 核心名單觀察池（/watchpool）───────────────────────────────────── */
.wp-lead { font-size: var(--fs-sm); line-height: 1.6; margin: 10px 0 0; }
.wp-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wp-add input { flex: 1; min-width: 260px; background: var(--bg); color: var(--fg); font: inherit;
  border: 1px solid var(--line); border-radius: var(--rad-sm); padding: 6px 10px; }
.wp-add input:focus { outline: none; border-color: var(--primary-line); }
.wp-results { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.wp-hit { font: inherit; font-size: var(--fs-xs); padding: 3px 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: var(--rad-sm); background: var(--surface); color: var(--fg-muted); }
.wp-hit:hover:not(:disabled) { border-color: var(--primary-line); color: var(--fg); }
.wp-hit.on { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-text); }
.wp-hit:disabled { opacity: .45; cursor: default; }
.wp-edit { cursor: pointer; border-bottom: 1px dotted var(--line); }
.wp-edit:hover { color: var(--primary-text); border-bottom-color: var(--primary-line); }
.wp-off td { opacity: .45; }
.wp-off .pill { opacity: .7; }
.wp-src { font-size: var(--fs-xs); }

/* 摩天輪兩隻腳的「實際會發生什麼」：NP 接到股票的成本價／過期無效的年化（SCC 是鏡像） */
.pis-wheel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pis-wheel > div { display: flex; flex-direction: column; gap: 1px; padding: 3px 8px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: var(--rad-sm); background: var(--surface); }
.pis-wheel > div:hover { border-style: solid; border-color: var(--primary-line); }
.pis-wheel small { font-size: var(--fs-xs); color: var(--fg-subtle); white-space: nowrap; }
.pis-wheel b { font-size: var(--fs-xs); color: var(--primary-text); font-variant-numeric: tabular-nums; }
.pis-wheel-sm { gap: 4px; }
.pis-wheel-sm > div { padding: 2px 6px; }

/* 「排名怎麼算」：三個步驟卡＋兩張公式表（取代原本塞在 tooltip 裡的一大坨字） */
.pis-how { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: var(--rad-sm); background: var(--surface); }
.pis-how > summary { cursor: pointer; padding: 7px 12px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pis-how > summary .muted { font-weight: var(--fw-normal); margin-left: 8px; font-size: var(--fs-xs); }
.pis-how-body { padding: 4px 12px 12px; }
.pis-how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.pis-how-step { display: flex; gap: 8px; font-size: var(--fs-xs); line-height: 1.55; }
.pis-how-n { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-text); font-weight: var(--fw-bold); }
.pis-how-step p { margin: 3px 0; color: var(--fg-muted); }
.pis-how-step ul { margin: 0; padding-left: 16px; color: var(--fg-subtle); }
.pis-how-tbls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pis-how-tbl { font-size: var(--fs-xs); }
.pis-how-tbl td, .pis-how-tbl th { padding: 3px 8px; }
@media (max-width: 900px) { .pis-how-steps, .pis-how-tbls { grid-template-columns: 1fr; } }

/* 觀察池頁的「標的來源」：preset 用卡片呈現（與 PIS 頁同一套樣式），整張卡可點 */
.wp-h4 { margin: 14px 0 6px; font-size: var(--fs-sm); }
.wp-presets { margin-top: 4px; }
.wp-preset { cursor: pointer; }
.wp-preset .pis-preset-head input { margin-right: 2px; }
.wp-presets-off { opacity: .4; pointer-events: none; }

/* ---- 導覽列：暫時停用的頁面（灰掉、點不動）---- */
.topnav-link.is-disabled { color: var(--fg-disabled); cursor: not-allowed; opacity: .55;
  text-decoration: line-through; text-decoration-thickness: 1px; }
.topnav-link.is-disabled:hover { background: none; color: var(--fg-disabled); }

/* ==========================================================================
   DOW 策略頁 —— 現股短線（MMVPL2／L1／S2／S1）
   跟 DOS／PIS 共用大部分的版面 class；這裡只放 DOW 特有的東西：
   FIB 尺、下單腳本、進場計畫數字帶、以及帶說明文字的參數表單。
   ========================================================================== */

/* 參數表單：DOS 的 .dos-param 是「一列 flex」，塞進說明文字會把字擠成直的（實測踩到）。
   DOW 的每個參數都需要一句「為什麼是這個值」，所以改成上下兩層。 */
.dow-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 16px; margin: 6px 0 12px; }
.dow-param { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.dow-param > span { color: var(--text); font-size: var(--fs-xs); }
.dow-param > small { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.dow-param input[type=number] { width: 96px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 4px 6px; font: inherit; text-align: right; }
.dow-param-check input[type=checkbox] { width: 16px; height: 16px; }

/* 進場計畫的數字帶：進場／停損／停利／股數／風險 一眼看完 */
.dow-plan-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.dow-plan-nums > div { flex: 1 1 120px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  padding: 6px 10px; background: var(--bg); display: flex; flex-direction: column; gap: 1px; }
.dow-plan-nums small { color: var(--text-muted); font-size: var(--fs-xs); }
.dow-plan-nums b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.dow-plan-nums i { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); }
.dow-plan-nums .np-stop  { border-left: 3px solid var(--status-alert); }
.dow-plan-nums .np-stop b { color: var(--danger-text); }
.dow-plan-nums .np-target { border-left: 3px solid var(--status-ok); }
.dow-plan-nums .np-target b { color: var(--success-text); }

/* FIB 尺：DOW 的 0%＝停損端、100%＝表態端，跟畫線軟體相反，所以要看得出來哪一格是哪一個 */
.dow-card-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.dow-fib { border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 8px 10px; background: var(--bg); }
.dow-fib-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: var(--fs-xs); }
.dow-fib-head .muted { font-size: var(--fs-xs); }
.dow-fib-tbl { font-size: var(--fs-xs); }
.dow-fib-tbl td { padding: 2px 6px; }
.dow-fib-tbl td:nth-child(2) { font-variant-numeric: tabular-nums; }
.dow-fib-tbl .muted { font-size: var(--fs-xs); }
.dow-fib-tbl tr.dow-fib-stop   { background: var(--danger-soft); }
.dow-fib-tbl tr.dow-fib-stop td:first-child { color: var(--danger-text); font-weight: 600; }
.dow-fib-tbl tr.dow-fib-target { background: var(--success-soft); }
.dow-fib-tbl tr.dow-fib-target td:first-child { color: var(--success-text); font-weight: 600; }
.dow-fib-tbl tr.dow-fib-fail   { background: var(--warning-soft); }

/* 下單腳本：真倉照抄用，所以用等寬字並且看得出是三腳 OCO */
.dow-order { border: 1px dashed var(--border); border-radius: var(--rad-sm); padding: 8px 10px; margin: 10px 0 0; }
.dow-order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-xs); }
.dow-order-head .muted { font-size: var(--fs-xs); }
.dow-order-list { margin: 6px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.dow-order-list code { font-size: var(--fs-xs); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-sm); padding: 2px 6px; display: inline-block; }
.dow-order-note { font-size: var(--fs-xs); margin-top: 6px; line-height: 1.6; }
.dow-sum-plan { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* 「今日要處理」多了兩種狀態：沒事（綠）與純資訊（排程時間） */
.dos-act-list li.act-ok { border-left-color: var(--success-line); }
.dos-act-list li.act-info { border-left-color: var(--border); color: var(--text-muted); font-size: var(--fs-xs); }
.dos-h4 { font-size: var(--fs-xs); margin: 10px 0 4px; color: var(--text-muted); font-weight: 600; }
.dos-pm-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.dos-pm-nums > div { border: 1px solid var(--border); border-radius: var(--rad-sm); padding: 4px 10px;
  background: var(--bg); display: flex; flex-direction: column; }
.dos-pm-nums small { color: var(--text-muted); font-size: var(--fs-xs); }

@media (max-width: 900px) {
  .dow-card-grid { grid-template-columns: 1fr; }
}

/* ---- 掃描進度條（DOW／PIS／DOS 共用）----
   掃 231 檔要跑 4~5 分鐘，原本的進度只寫在收合起來的「名單來源」區裡，等於沒有。 */
.scan-prog-card { padding: 12px 16px; margin-bottom: 12px; }
.scan-prog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.scan-prog-head b { font-size: var(--fs-md); }
.scan-prog-head .muted { font-size: var(--fs-xs); }
.scan-prog-ops { margin-left: auto; display: flex; gap: 6px; }
.scan-prog-ops .btn { font-size: var(--fs-xs); padding: 3px 10px; }
.scan-prog-bar { height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.scan-prog-bar > i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-text)); transition: width .3s ease; }
.scan-prog-card[data-state="done"] .scan-prog-bar > i { background: var(--status-ok); }
.scan-prog-card[data-state="stopped"] .scan-prog-bar > i { background: var(--status-warn); }
.scan-prog-foot { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.6; }

/* ---- DOW：自動交易狀態 ---- */
.dow-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 4px;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--rad-sm);
  padding: 9px 12px; background: var(--bg); font-size: var(--fs-md); }
.dow-auto[data-armed="on"]  { border-left-color: var(--status-ok); }
.dow-auto[data-armed="off"] { border-left-color: var(--status-warn); }
.dow-auto .dow-auto-t { font-weight: 700; }
.dow-auto .dow-auto-why { flex: 1 1 100%; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7; }
.dow-auto .dow-auto-why b { color: var(--text); }
.dow-auto .btn { font-size: var(--fs-xs); padding: 3px 10px; margin-left: auto; }

/* ---- DOW 手冊：高勝率型態示意圖 ----
   筆記那一節全是圖，只有文字等於沒說。座標系 viewBox 0 0 200 112（y 越小＝價格越高）。 */
.dow-pat-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 14px;
  font-size: var(--fs-xs); color: var(--text-muted); }
.dow-pat-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dow-pat-legend i { width: 18px; height: 0; border-top: 2px solid currentColor; display: inline-block; }
.dow-pat-legend .lg-line { color: var(--primary-text); }
.dow-pat-legend .lg-res  { color: var(--danger); border-top-style: dashed; }
.dow-pat-legend .lg-sup  { color: var(--success); border-top-style: dashed; }
.dow-pat-legend .lg-neck { color: var(--warning); border-top-style: dashed; }
.dow-pat-legend .lg-mark { width: 9px; height: 9px; border: 2px solid var(--primary); border-radius: 50%; border-top-width: 2px; }

.dow-pat-group { margin: 16px 0 6px; }
.dow-pat-gh { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); text-transform: none; }
.dow-pat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.dow-pat { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  background: var(--bg); border-left-width: 3px; }
.dow-pat-bull { border-left-color: var(--success); }
.dow-pat-bear { border-left-color: var(--danger); }
.dow-pat-both { border-left-color: var(--primary); }
.dow-pat-bad  { border-left-color: var(--warning); }
.dow-pat figcaption { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.65; }
.dow-pat figcaption b { font-size: var(--fs-md); }
.dow-pat .pat-side { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.pat-side-bull { background: rgba(73,239,110,.15); color: var(--success); }
.pat-side-bear { background: rgba(245,50,50,.15); color: var(--danger); }
.pat-side-both { background: rgba(0,179,227,.15); color: var(--primary-text); }
.pat-side-bad  { background: rgba(248,230,74,.15); color: var(--warning); }
.dow-pat .pat-means { margin-top: 4px; color: var(--text); }
.dow-pat .pat-watch { margin-top: 4px; color: var(--text-muted); font-size: var(--fs-xs); }

.dow-pat-svg { width: 100%; height: auto; display: block; background: var(--surface); border-radius: 4px; }
.dow-pat-svg .pat-line { fill: none; stroke: var(--primary-text); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }
.dow-pat-svg .pat-line-bad { stroke: var(--warning); }
.dow-pat-svg .pat-g { stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .85; }
.dow-pat-svg .pat-g-res  { stroke: var(--danger); }
.dow-pat-svg .pat-g-sup  { stroke: var(--success); }
.dow-pat-svg .pat-g-neck { stroke: var(--warning); }
.dow-pat-svg .pat-mark { fill: none; stroke: var(--primary); stroke-width: 2.4; }
.dow-pat-svg .pat-arrow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dow-pat-svg .pat-arrow-up   { stroke: var(--success); }
.dow-pat-svg .pat-arrow-down { stroke: var(--danger); }
.dow-pat-svg .pat-target { fill: rgba(0,179,227,.12); stroke: var(--primary); stroke-width: 1;
  stroke-dasharray: 3 3; }
.dow-pat-svg .pat-tt { fill: var(--primary-text); font-size: 11px; font-weight: 700; text-anchor: middle; }
.dow-pat-svg .pat-lb { fill: var(--text-muted); font-size: 10px; text-anchor: middle; }

/* ---- DOW：進場計畫說明卡（點「股數」跳出來）----
   原本是一大坨純文字，讀不下去。改成：一排數字 → FIB 尺表格 → 下單腳本。 */
.dos-pop-rich { max-width: 420px; padding: 0; max-height: min(76vh, 620px); overflow-y: auto; }
.dos-pop-rich .pk { padding: 12px 14px; }
.dos-pop-rich .pk-head { font-size: var(--fs-md); margin-bottom: 8px; }
.dos-pop-rich .pk-tag { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.dos-pop-rich .pk-bull { background: rgba(73,239,110,.15); color: var(--success); }
.dos-pop-rich .pk-bear { background: rgba(245,50,50,.15); color: var(--danger); }
.dos-pop-rich .pk-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px; margin-bottom: 10px; }
.dos-pop-rich .pk-nums > div { background: var(--bg); border-radius: var(--rad-sm); padding: 6px 8px;
  border-left: 2px solid var(--border); }
.dos-pop-rich .pk-n-stop { border-left-color: var(--danger) !important; }
.dos-pop-rich .pk-n-target { border-left-color: var(--success) !important; }
.dos-pop-rich .pk-nums small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.dos-pop-rich .pk-nums b { display: block; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.dos-pop-rich .pk-nums i { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-style: normal; }
.dos-pop-rich .pk-sec { margin-top: 10px; }
.dos-pop-rich .pk-sec h5 { margin: 0 0 4px; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--text-muted); }
.dos-pop-rich .pk-sec p { margin: 0; font-size: var(--fs-xs); line-height: 1.7; }
.dos-pop-rich .pk-dim { color: var(--text-muted); margin-top: 4px !important; }
.dos-pop-rich .pk-fib { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.dos-pop-rich .pk-fib td { padding: 2px 6px; border-bottom: 1px solid var(--border); }
.dos-pop-rich .pk-fib td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dos-pop-rich .pk-fib td:last-child { color: var(--text-muted); font-size: var(--fs-xs); }
.dos-pop-rich .pk-fib .pk-stop   td { color: var(--danger); font-weight: 700; }
.dos-pop-rich .pk-fib .pk-target td { color: var(--success); font-weight: 700; }
.dos-pop-rich .pk-fib .pk-fail   td { color: var(--warning); }
.dos-pop-rich .pk-orders { margin: 0; padding-left: 18px; font-size: var(--fs-xs); line-height: 1.9; }
.dos-pop-rich .pk-orders code { font-size: var(--fs-xs); }

/* indeterminate：後端是「單一個長請求」時（DOS 本週檢查）不假裝有進度，改跑動畫 */
.scan-prog-card.scan-prog-indet .scan-prog-bar { position: relative; overflow: hidden; }
.scan-prog-card.scan-prog-indet .scan-prog-bar > i {
  width: 38% !important; position: absolute; left: 0; animation: scanProgSlide 1.15s ease-in-out infinite; }
@keyframes scanProgSlide { 0% { left: -38%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .scan-prog-card.scan-prog-indet .scan-prog-bar > i { animation: none; left: 0; width: 100% !important; opacity: .5; }
}

/* ---- 手冊：筆記原圖（從使用者的 PDF 抽出來的附圖）----
   線型 PDF 是白底手繪線稿 → 墊一張白卡才看得清楚；策略 PDF 的截圖本來就是深色，直接放。 */
.note-gh { margin: 14px 0 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.note-glead { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.7; }
.note-figs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 8px 0 4px; }
.note-figs-wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.note-fig { margin: 0; border: 1px solid var(--border); border-radius: var(--rad-sm); overflow: hidden; background: var(--bg); }
.note-fig img { display: block; width: 100%; height: auto; }
.note-fig-light img { background: #fff; padding: 6px; }
.note-fig figcaption { padding: 7px 10px; font-size: var(--fs-xs); line-height: 1.65; color: var(--text-muted);
  border-top: 1px solid var(--border); }
.note-fig figcaption b { color: var(--text); }
@media (max-width: 720px) { .note-figs, .note-figs-wide { grid-template-columns: 1fr; } }

/* ── PIS 手冊的筆記示意圖（services/pis_figures.py 產生的內嵌 SVG）──────────
   顏色全走 CSS 變數，深／淺色模式都對；與到期損益圖（.pf-*）同一套視覺語言。 */
.pis-fig { margin: var(--space-1-half) 0 var(--space-2); padding: var(--space-1-half);
  border: 1px solid var(--line); border-radius: var(--rad-sm); background: var(--surface); }
.pis-fig figcaption { font-size: var(--fs-xs); color: var(--fg-subtle); margin-bottom: var(--space-1); }
.pis-fig figcaption b { color: var(--fg); }
.pis-fig-src { float: right; font-size: var(--fs-xs); color: var(--fg-subtle); }
.pis-fig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pis-fig-note { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-muted); }

.pis-fig-svg text { font-family: inherit; text-anchor: middle; dominant-baseline: middle; }
.pis-fig-svg .fg-title { font-size: 15px; font-weight: 600; fill: var(--fg); text-anchor: start; }
.pis-fig-svg .fg-s2 { font-size: 11.5px; fill: var(--fg-subtle); text-anchor: start; }
.pis-fig-svg .fg-t { font-size: 12.5px; font-weight: 600; fill: var(--fg); }
.pis-fig-svg .fg-s { font-size: 10.5px; fill: var(--fg-muted); }
.pis-fig-svg .fg-lab { font-size: 11px; fill: var(--fg-subtle); font-style: italic; }
.pis-fig-svg .fg-note { font-size: 11px; fill: var(--fg-subtle); text-anchor: start; }
.pis-fig-svg .fg-li { font-size: 12px; fill: var(--fg-muted); text-anchor: start; }
.pis-fig-svg .fg-li-key { font-size: 12.5px; font-weight: 600; fill: var(--primary-text); text-anchor: start; }
.pis-fig-svg .fg-em { fill: var(--fg); font-weight: 600; }
.pis-fig-svg .fg-h-bull { font-size: 13.5px; font-weight: 600; fill: var(--success-text); }
.pis-fig-svg .fg-h-bear { font-size: 13.5px; font-weight: 600; fill: var(--danger-text); }
.pis-fig-svg .fg-h-key { font-size: 13.5px; font-weight: 600; fill: var(--primary-text); }

.pis-fig-svg .fg-box { fill: var(--bg); stroke: var(--line); }
.pis-fig-svg .fg-box-bull { fill: var(--success-soft); stroke: var(--success-line); }
.pis-fig-svg .fg-box-key { fill: var(--primary-soft); stroke: var(--primary-line); }
.pis-fig-svg .fg-panel { fill: transparent; stroke: var(--line); stroke-dasharray: 4 3; }
.pis-fig-svg .fg-panel-bull { fill: transparent; stroke: var(--success-line); }
.pis-fig-svg .fg-panel-bear { fill: transparent; stroke: var(--danger-line); }

.pis-fig-svg .fg-ring { fill: none; stroke: var(--line); stroke-width: 14; }
.pis-fig-svg .fg-ring-in { fill: var(--bg); stroke: var(--primary-line); stroke-width: 1; }
.pis-fig-svg .fg-center { font-size: 15px; font-weight: 700; fill: var(--primary-text); }
.pis-fig-svg .fg-center-en { font-size: 10px; fill: var(--fg-subtle); letter-spacing: .5px; }
.pis-fig-svg .fg-arrow { stroke: var(--primary-line); stroke-width: 2; }
.pis-fig-svg .fg-arrowhead { fill: var(--primary-line); }

.pis-fig-svg .fg-coin { fill: var(--bg); stroke: var(--primary-line); }
.pis-fig-svg .fg-coin-t { font-size: 13px; font-weight: 700; fill: var(--fg); }
.pis-fig-svg .fg-coin-s { font-size: 10.5px; fill: var(--fg-subtle); }
.pis-fig-svg .fg-axis { stroke: var(--line); stroke-width: 1; }
.pis-fig-svg .fg-axis-t { font-size: 10.5px; fill: var(--fg-subtle); }
.pis-fig-svg .fg-chip-np { fill: var(--success-soft); stroke: var(--success-line); }
.pis-fig-svg .fg-chip-sc { fill: var(--primary-soft); stroke: var(--primary-line); }
.pis-fig-svg .fg-chip-t { font-size: 11.5px; font-weight: 600; fill: var(--fg); }

.pis-fig-svg .fg-bar-a { fill: var(--primary-soft); stroke: var(--primary-line); }
.pis-fig-svg .fg-bar-b { fill: var(--success-soft); stroke: var(--success-line); }
.pis-fig-svg .fg-bar-t { font-size: 12.5px; font-weight: 600; fill: var(--fg); }

.pis-fig-svg .fg-k { stroke: var(--warning-text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pis-fig-svg .fg-k-t { font-size: 11px; fill: var(--warning-text); }
.pis-fig-svg .fg-zone-win { fill: var(--success-soft); stroke: var(--success-line); }
.pis-fig-svg .fg-zone-key { fill: var(--primary-soft); stroke: var(--primary-line); }
.pis-fig-svg .fg-zone-t { font-size: 11.5px; fill: var(--fg); }
@media (max-width: 720px) { .pis-fig-svg .fg-s, .pis-fig-svg .fg-li { font-size: var(--fs-xs); } }

/* ---- 手冊：CS 示意圖 ----
   內層 .pat-* 的視覺規則跟 DOW 手冊同一套，但那邊 scope 在 .dow-pat-svg 底下，
   這裡重新宣告一次給 .dos-fig-svg（沒有共用是為了不去動 DOW 那個區塊）。 */
.dos-fig-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 14px;
  font-size: var(--fs-xs); color: var(--fg-subtle); }
.dos-fig-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dos-fig-legend i { width: 18px; height: 0; border-top: 2px solid currentColor; display: inline-block; }
.dos-fig-legend .lg-line   { color: var(--primary-text); }
/* 三條均線靠「粗細＋線型」分辨：20 細實、50 虛線、200 粗淡 —— 圖上也是這樣畫 */
.dos-fig-legend .lg-ema20  { color: var(--fg-subtle); }
.dos-fig-legend .lg-ema50  { color: var(--fg-subtle); border-top-style: dashed; }
.dos-fig-legend .lg-ema200 { color: var(--fg-subtle); border-top-width: 4px; opacity: .6; }
.dos-fig-legend .lg-res    { color: var(--danger); border-top-style: dashed; }
.dos-fig-legend .lg-sup    { color: var(--success); border-top-style: dashed; }
.dos-fig-legend .lg-sell   { color: var(--warning); }
.dos-fig-legend .lg-buy    { color: var(--primary); border-top-style: dotted; }
.dos-fig-legend .lg-tri    { height: 9px; border-top: 0; border: 1px dashed var(--primary-line);
  background: rgba(77,163,224,.23); }
.dos-fig-legend .lg-dim    { width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--warning);
  color: var(--warning); margin: 0 8px; }
.dos-fig-legend .lg-step   { width: 10px; height: 10px; border-top: 0; border-radius: 50%;
  background: var(--fg-subtle); }
.dos-fig-legend .lg-band   { height: 9px; border-top: 0; border: 1px solid var(--warning);
  background: rgba(248,230,74,.16); }
.dos-fig-legend .lg-mark { width: 9px; height: 9px; border: 2px solid var(--primary);
  border-radius: 50%; border-top-width: 2px; }
.dos-fig-hint { margin: -6px 0 14px; font-size: var(--fs-xs); line-height: 1.7;
  color: var(--fg-subtle); }

.dos-fig-group { margin: 16px 0 6px; }
.dos-fig-gh { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  color: var(--fg-subtle); }
/* 350 而不是原本的 290：圖右邊多了一條標籤欄（佔約 1/4 寬），
   卡片不放大的話畫圖區會比改版前更小 */
.dos-fig-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.dos-fig { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--rad-sm);
  border-left-width: 3px; background: var(--bg); }
.dos-fig-bull { border-left-color: var(--success); }
.dos-fig-bear { border-left-color: var(--danger); }
.dos-fig-both { border-left-color: var(--primary); }
.dos-fig-bad  { border-left-color: var(--warning); }
.dos-fig figcaption { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.65; }
.dos-fig figcaption b { font-size: var(--fs-md); }
.dos-fig .pat-side { margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; }
.dos-fig .pat-means { margin-top: 4px; color: var(--text); }
.dos-fig .pat-watch { margin-top: 4px; color: var(--text-muted); font-size: var(--fs-xs); }

/* 底色改畫在 .fig-plot 上（不是整張 SVG）—— 有底色的是畫圖區，右邊標籤欄留白，
   兩者一眼分得開。畫圖區內的文字一律加同色描邊當底，壓到線上也還讀得到。 */
.dos-fig-svg { width: 100%; height: auto; display: block; }
.dos-fig-svg .fig-plot { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.dos-fig-svg text { paint-order: stroke fill; stroke: none; }
.dos-fig-svg .pat-lb, .dos-fig-svg .fig-emat, .dos-fig-svg .fig-dimt,
.dos-fig-svg .fig-dimt2, .dos-fig-svg .fig-stept {
  stroke: var(--surface); stroke-width: 2.6px; stroke-linejoin: round;
}
.dos-fig-svg .pat-line { fill: none; stroke: var(--primary-text); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }
.dos-fig-svg .pat-g { stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .85; }
.dos-fig-svg .pat-g-res  { stroke: var(--danger); }
.dos-fig-svg .pat-g-sup  { stroke: var(--success); }
.dos-fig-svg .pat-g-neck { stroke: var(--warning); }
.dos-fig-svg .pat-mark { fill: none; stroke: var(--primary); stroke-width: 2.4; }
.dos-fig-svg .pat-arrow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dos-fig-svg .pat-arrow-up   { stroke: var(--success); }
.dos-fig-svg .pat-arrow-down { stroke: var(--danger); }
.dos-fig-svg .pat-lb { fill: var(--fg); font-size: 9px; font-weight: 600; text-anchor: middle; }
/* DOS 專屬：均線、履約價線、價差帶、摩天輪輪替標記、拆單前後的損益線 */
.dos-fig-svg .fig-ema { fill: none; stroke: var(--fg-subtle); }
.dos-fig-svg .fig-ema-20  { stroke-width: 1.2; opacity: .9; }
.dos-fig-svg .fig-ema-50  { stroke-width: 1.2; opacity: .8; stroke-dasharray: 7 3; }
.dos-fig-svg .fig-ema-200 { stroke-width: 2.8; opacity: .45; }
.dos-fig-svg .fig-emat { font-size: 7.5px; font-weight: 700; fill: var(--fg-subtle); text-anchor: middle; }
/* 三角收斂：壓力與支撐夾出來的那塊，填色才看得出「收斂」。
   用固定的半透明藍（跟 .fig-band 的半透明黃同一個做法）而不是 --primary-soft：
   那個 token 在深色皮是 #212a33，跟 --surface 幾乎同色，實測整塊看不見。 */
.dos-fig-svg .fig-wedge { fill: rgba(77,163,224,.23); stroke: none; }
.dos-fig-svg .fig-k { stroke-width: 1.3; }
.dos-fig-svg .fig-k-sell { stroke: var(--warning); }
.dos-fig-svg .fig-k-buy  { stroke: var(--primary); stroke-dasharray: 2 3; }
/* 標籤欄（x>200）：不在畫圖區上，所以不描邊 */
.dos-fig-svg .fig-kt { font-size: 9px; font-weight: 700; }
.dos-fig-svg .fig-kt-sell { fill: var(--warning-text); }
.dos-fig-svg .fig-kt-buy  { fill: var(--primary-text); }
.dos-fig-svg .fig-kt2 { font-size: 8px; fill: var(--fg-subtle); }
.dos-fig-svg .fig-band { fill: rgba(248,230,74,.10); stroke: none; }

/* 尺寸線（fig-dim）：價差／ML／0.6 EM 這種「這段距離就是那個東西」的標註。
   2026-09-10 換掉舊的做法 —— 原本只有一條滿版半透明色帶加一端的字，讀者看到的是
   一條橫紋，不是一段可以量的高度。端帽 ＋ 兩端箭頭才講得清楚量的是哪一段。 */
.dos-fig-svg .fig-dim line { stroke: var(--warning); stroke-width: 1.1; opacity: .95; }
.dos-fig-svg .fig-dim-cap { stroke: var(--warning); stroke-width: 1.3; fill: none; opacity: .95; }
.dos-fig-svg .fig-dim-arr { stroke: var(--warning); stroke-width: 1.3; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.dos-fig-svg .fig-dimt  { font-size: 9px; font-weight: 700; fill: var(--warning-text); }
.dos-fig-svg .fig-dimt2 { font-size: 7.5px; font-weight: 600; fill: var(--fg-subtle); }

/* 引線（fig-lead）：說明文字放到空白處，牽一條細線回它在講的那個點。
   取代原本的硬座標自由標籤 —— 那些常常正好壓在股價線或表態圈上。 */
.dos-fig-svg .fig-lead { fill: none; stroke-width: .9; stroke-dasharray: 3 2.5; opacity: .8; }
.dos-fig-svg .fig-lead-dot { stroke: none; }
.dos-fig-svg .fig-lead-bull { stroke: var(--success); fill: var(--success); }
.dos-fig-svg .fig-lead-bear { stroke: var(--danger);  fill: var(--danger); }
.dos-fig-svg .fig-lead-muted{ stroke: var(--fg-subtle); fill: var(--fg-subtle); }
.dos-fig-svg .fig-leadt { font-size: 8.5px; }

/* 編號徽章（fig-step）：只在「順序本身是資訊」時用 —— 摩天輪的輪替、出場的三個觸發點。
   四個並排的字看不出先後，這是使用者說「看不懂」的其中一張。 */
.dos-fig-svg .fig-step { stroke: var(--surface); stroke-width: 1.4; }
.dos-fig-svg .fig-step-bull { fill: var(--success); }
.dos-fig-svg .fig-step-bear { fill: var(--danger); }
.dos-fig-svg .fig-step-sell { fill: var(--warning); }
.dos-fig-svg .fig-step-warn { fill: var(--warning); }
.dos-fig-svg .fig-step-muted{ fill: var(--fg-subtle); }
.dos-fig-svg .fig-stepn { font-size: 8px; font-weight: 700; fill: var(--on-primary, #fff);
  text-anchor: middle; stroke: none; }
.dos-fig-svg .fig-stept { font-size: 9.5px; font-weight: 700; text-anchor: middle; }
.dos-fig-svg .fig-stept-bull { fill: var(--success); }
.dos-fig-svg .fig-stept-bear { fill: var(--danger); }
.dos-fig-svg .fig-stept-sell, .dos-fig-svg .fig-stept-warn { fill: var(--warning-text); }
.dos-fig-svg .fig-stept-muted { fill: var(--fg-subtle); }

/* 註腳：軸的意義、順序說明 —— 放在畫圖區**外面**，在裡面一定會壓到線 */
.dos-fig-svg .fig-foot { font-size: 8px; fill: var(--fg-subtle); stroke: none; }
.dos-fig-svg .fig-po { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.dos-fig-svg .fig-po-keep { stroke: var(--success); }
.dos-fig-svg .fig-po-drop { stroke: var(--danger); stroke-dasharray: 4 3; }

/* ---------------------------------------------------------------- MCPT 策略檢討
   顏色一律走 Omni token（換皮才跟得上）。 */
.mrv-caveat {
  padding: .6rem .8rem; margin: 0 0 1rem;
  background: var(--primary-soft); border-left: 3px solid var(--primary);
  border-radius: 4px; color: var(--fg);
}
#mrvBody h4 { margin: 1.2rem 0 .4rem; color: var(--primary-text); font-size: var(--fs-md); }
.mrv-advice {
  padding: .7rem .9rem; margin: .6rem 0;
  border-left: 3px solid var(--line); border-radius: 4px; background: var(--surface);
}
.mrv-advice.mrv-bad  { border-left-color: var(--danger); }
.mrv-advice.mrv-warn { border-left-color: var(--warning); }
.mrv-advice.mrv-ok   { border-left-color: var(--success); }
.mrv-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .35rem; }
.mrv-tag {
  padding: .1rem .45rem; border-radius: 999px; font-size: var(--fs-xs);
  background: var(--line); color: var(--fg);
}
.mrv-bad  .mrv-tag { background: var(--danger-soft); color: var(--danger-text); }
.mrv-warn .mrv-tag { background: var(--warning-soft, var(--line)); color: var(--warning-text); }
.mrv-ok   .mrv-tag { background: var(--success-soft, var(--line)); color: var(--success-text, var(--success)); }
.mrv-advice p { margin: .3rem 0; }
#mrvBody tr.hl { background: var(--primary-soft); }
#mrvBody table { width: 100%; }

/* ── 區塊：每一段先講「這一塊在講什麼」，再給數字 ── */
.mrv-block { margin: 0 0 1.6rem; }
.mrv-sec-h {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.mrv-sec-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-xs);
}
.mrv-sec-h b { color: var(--fg); font-size: var(--fs-md); }
.mrv-sec-w { color: var(--fg-subtle); font-size: var(--fs-xs); }
/* 「怎麼讀」——圖表旁邊一定要有一句話說明怎麼看，不然只是好看的裝飾 */
.mrv-note {
  margin: .5rem 0 0; padding: .45rem .7rem; font-size: var(--fs-xs); line-height: 1.7;
  background: var(--surface); border-radius: 4px; color: var(--fg-subtle);
}
.mrv-note b { color: var(--fg); }
.mrv-cap { margin: .5rem 0 .3rem; font-size: var(--fs-xs); color: var(--fg-subtle); }
.mrv-foot { margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--fg-subtle); line-height: 1.7; }

/* ── KPI 列：四個數字的分母不同，所以用四張卡不用漏斗 ── */
.mrv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 640px) { .mrv-kpis { grid-template-columns: repeat(2, 1fr); } }
.mrv-kpi {
  padding: .5rem .6rem; background: var(--surface); border-radius: 6px;
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: .1rem;
}
.mrv-kpi-hi { border-color: var(--primary); }
.mrv-kv { font-size: var(--fs-xl); line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--fg); }
.mrv-kl { font-size: var(--fs-xs); color: var(--fg); }
.mrv-kn { font-size: var(--fs-xs); color: var(--fg-subtle); line-height: 1.4; }

/* ── 圖表 ──
   用 HTML/CSS 畫不用 SVG：SVG 拉滿寬度時 viewBox 裡的字會跟著放大，
   320 寬的圖放到 800 就變兩倍大的字。CSS 長條的文字永遠是真正的字級。
   --mrv-mute1/2 是「不是重點的那些段」——刻意用兩階灰，讓主色那一段自己跳出來。 */
#mrvBody { --mrv-mute1: #5a6880; --mrv-mute2: #38424f; }
.mrv-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .45rem; font-size: var(--fs-xs); color: var(--fg-subtle); }
.mrv-lg { display: inline-flex; align-items: center; gap: .3rem; }
.mrv-lg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mrv-lg b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* 堆疊條：段與段之間留 2px 底色縫，不然兩階灰會黏成一條 */
.mrv-stack { display: flex; height: 15px; border-radius: 3px; overflow: hidden; background: var(--bg); }
.mrv-seg { display: block; height: 100%; border-right: 2px solid var(--bg); }
.mrv-seg:last-child { border-right: 0; }

/* 雙向長條：中線＝0，左邊負、右邊正 */
.mrv-div { margin: .2rem 0 0; }
.mrv-drow {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  column-gap: 0; padding: .18rem 0; position: relative;
}
.mrv-drow::before {                       /* 0 的中線 */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px solid var(--line);
}
.mrv-dlab {
  grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--fg-subtle);
  display: flex; gap: .4rem; align-items: baseline;
}
.mrv-dlab em { font-style: normal; font-size: var(--fs-xs); opacity: .8; }
.mrv-dleft { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; flex-direction: row-reverse; }
.mrv-dright { display: flex; justify-content: flex-start; align-items: center; gap: .35rem; }
.mrv-dbar { height: 13px; border-radius: 2px; display: block; min-width: 2px; }
.mrv-dbar.neg { background: var(--fall); opacity: .85; }
.mrv-dbar.pos { background: var(--rise); opacity: .85; }
.mrv-dval { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrv-dval.neg { color: var(--fall); }
.mrv-dval.pos { color: var(--rise); }
.mrv-dfoot { display: flex; justify-content: space-between; margin-top: .3rem; }

.mrv-lg b { color: var(--fg); font-variant-numeric: tabular-nums; }
.mrv-tbl { margin: .5rem 0 0; }
.mrv-tbl > summary { cursor: pointer; color: var(--fg-subtle); font-size: var(--fs-xs); }

/* ── 建議卡：拆成固定幾格，不要一段連在一起的文字 ── */
.mrv-advice { padding: .8rem .9rem; }
.mrv-head { align-items: flex-start; gap: .6rem; margin-bottom: .6rem; }
/* ── MCPT 策略檢討：掃描表、組別切換、背景狀態（2026-10-26 每日檢討＋週報合併）── */
.mrv-head b { color: var(--fg); line-height: 1.5; }
.mrv-sum { margin: 4px 0 10px 1.2em; line-height: 1.7; }
.mrv-up { color: var(--rise); }
.mrv-dn { color: var(--fall); }
.mrv-none { padding: .5rem .8rem; border-left: 3px solid var(--line); color: var(--fg); }
.mrv-run { padding: .45rem .8rem; margin: 0 0 .8rem; border-left: 3px solid var(--warning); color: var(--fg); }
.mrv-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.mrv-tabs .btn.active { border-color: var(--primary); color: var(--primary-text); }
.mrv-scroll { overflow-x: auto; }
.mrv-scan, .mrv-live { font-size: var(--fs-xs); }
.mrv-scan td, .mrv-scan th, .mrv-live td, .mrv-live th { vertical-align: top; }
.mrv-scan td.num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.mrv-warn-cell { color: var(--warning-text); }
.mrv-trades { margin: .2rem 0 0 1.2em; font-size: var(--fs-xs); line-height: 1.7; }

/* MCPT 複習會重點的條列（編號要看得出層次，說明壓低一階） */
.mc-rv-list { margin: .4rem 0 1rem 1.2rem; padding: 0; }
.mc-rv-list li { margin: .45rem 0; line-height: 1.6; }

/* ── MCPT 策略手冊（📖）────────────────────────────────────────────
   分頁／面板／圖廊沿用 DOS 的 dos-hb-* 與 note-* ，這裡只補 MCPT 專有的排版。 */
.mc-hb-formula {
  padding: .6rem .8rem; border-left: 3px solid var(--primary-line);
  background: var(--surface-2, rgba(255, 255, 255, .04)); border-radius: 0 6px 6px 0;
}
.mc-hb-two { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin: .5rem 0 1rem; }
@media (max-width: 640px) { .mc-hb-two { grid-template-columns: 1fr; } }
.mc-hb-box {
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px;
  line-height: 1.6; font-size: var(--fs-lg);
}
.mc-hb-up { border-color: var(--rise); }
.mc-hb-dn { border-color: var(--fall); }
/* 筆記裡教練特別畫線的那幾句 —— 手冊裡要看得出來是「金句」而不是一般說明 */
.mc-hb-golden { border-left: 3px solid var(--status-warn); }
/* 「引擎有沒有在管」那一欄：刻意壓低對比，讀者的主線是左邊的筆記原文 */
.mc-hb-eng { color: var(--fg-subtle); font-size: var(--fs-lg); }
/* 4 欄的表在手機一定塞不下 —— 讓表自己橫捲，不要把整頁撐寬或被面板切掉 */
.mc-hb-tw { overflow-x: auto; margin: .4rem 0 1rem; }
.mc-hb-tw > table { margin-bottom: 0; }
/* help-tbl 的第一欄預設 nowrap（那是給「參數名」那種短標籤用的）。
   手冊第一欄放的是整段筆記原文，不解掉會把表撐到 887px、把「引擎」欄擠出畫面。 */
.mc-hb-tw .help-tbl td:first-child { white-space: normal; }
.mc-hb-date { color: var(--primary-text); font-size: var(--fs-lg); white-space: nowrap; }
.mc-hb-fib { white-space: nowrap; }
.mc-hb-ul { margin: 0 0 0 1.1rem; padding: 0; }
.mc-hb-ul li { margin: .2rem 0; }

/* ── 手冊燈箱：一張一張放大看 ─────────────────────────────────────
   手冊 modal 的 z-index 之上再一層。stage 預設「整張塞進視窗」，
   點圖切成 1:1（overflow auto，可以捲去看 FIB 標價）。 */
.mc-lb {
  position: fixed; inset: 0; z-index: 3000;
  /* 全黑不透半透 —— 試過 .92／.97，手冊的文字都還是透得出來跟線圖搶眼睛。
     這是「專心看一張圖」的模式，不需要看到背後有什麼。 */
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.mc-lb[hidden] { display: none; }
.mc-lb-stage {
  max-width: 96vw; max-height: 86vh; overflow: auto;
  display: flex; align-items: center; justify-content: center;
}
.mc-lb-stage img { max-width: 96vw; max-height: 86vh; cursor: zoom-in; display: block; }
.mc-lb-stage.zoom { align-items: flex-start; justify-content: flex-start; }
.mc-lb-stage.zoom img { max-width: none; max-height: none; cursor: zoom-out; }
.mc-lb-x, .mc-lb-nav {
  position: absolute; background: rgba(0, 0, 0, .55); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px;
  cursor: pointer; line-height: 1;
}
.mc-lb-x { top: 14px; right: 16px; width: 38px; height: 38px; font-size: 17px; }
.mc-lb-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 30px; }
.mc-lb-prev { left: 12px; }
.mc-lb-next { right: 12px; }
.mc-lb-x:hover, .mc-lb-nav:hover { background: rgba(255, 255, 255, .18); }
.mc-lb-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 60px; text-align: center; color: #e8eef7;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  font-size: 12.5px; line-height: 1.6;
}
.mc-lb-n { display: inline-block; margin-right: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  /* 窄螢幕上「符合視窗」的線圖本來就窄，左右鍵再壓在圖上就沒得看了 ——
     移到底部說明列的兩側。 */
  .mc-lb-nav {
    top: auto; bottom: 8px; transform: none;
    width: 40px; height: 40px; font-size: var(--fs-2xl);
  }
  .mc-lb-prev { left: 8px; }
  .mc-lb-next { right: 8px; }
  .mc-lb-bar { padding: 8px 56px; font-size: 12px; }
  .mc-lb-stage, .mc-lb-stage img { max-height: 72vh; }
}
/* 「點圖放大」提示：手機上「符合視窗」的線圖太小，一定要知道可以點 */
.mc-lb-hint { display: block; opacity: .6; font-size: 11.5px; margin-top: 2px; }

/* 手冊裡的線圖現在是「一張一張」，游標要看得出可以點開放大 */
#mcptHandbookModal .note-fig a { cursor: zoom-in; }

/* 課程筆記原文（可摺疊）—— 整理過的版本在上面，這裡是未經整理的原文 */
.mc-hb-src { margin: .6rem 0 1rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.mc-hb-src > summary { cursor: pointer; color: var(--fg-subtle); font-size: var(--fs-lg); }
.mc-hb-srcp {
  margin: .5rem 0; padding: .5rem .7rem; border-left: 2px solid var(--line);
  color: var(--fg-subtle); font-size: var(--fs-lg); line-height: 1.75; white-space: normal;
}

/* ── 策略手冊全螢幕閱讀（📖 四頁共用）────────────────────────────
   ⛶ 切換後 modal 撐滿整個視窗、底部出現「上一章／下一章」翻頁列，
   ← → 直接翻章 —— 像翻書。偏好記在 localStorage（mb_hb_fs），四本手冊共用。 */
.hb-fs-btn {
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  font-size: 15px; cursor: pointer; border-radius: var(--rad-full);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0; margin-left: auto;   /* help-head 是 space-between：推到右邊跟 ✕ 併排 */
  transition: background var(--dur-fast) var(--motion-ease), color var(--dur-fast) var(--motion-ease);
}
.hb-fs-btn:hover { color: var(--fg); background: var(--surface-hover); }
.hb-fs .hb-fs-btn { color: var(--primary-text); border-color: var(--primary); }

.help-modal.hb-fs { padding: 0; }
.help-modal.hb-fs .help-box {
  width: 100vw; max-width: none;
  height: 100vh; height: 100dvh; max-height: none;
  border-radius: 0;
}
/* 讀起來像書：超寬螢幕時內文限一個舒服的欄寬置中。
   不能用子元素 margin auto —— help-note 之類的 margin 帶 !important 會蓋掉；
   改在容器上用 padding 置中，對所有子元素一體生效。 */
.help-modal.hb-fs .help-head,
.help-modal.hb-fs .help-body {
  padding-left: max(22px, calc((100vw - 960px) / 2));
  padding-right: max(22px, calc((100vw - 960px) / 2));
}
.help-modal.hb-fs .help-body { flex: 1 1 auto; }

/* 翻頁列：只在全螢幕出現（一般 modal 已有分頁列，再放一排是雜訊） */
.hb-pager { display: none; }
.help-modal.hb-fs .hb-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(22px, calc((100vw - 960px) / 2));
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.hb-pg {
  background: transparent; border: 1px solid var(--border); border-radius: var(--rad-md);
  color: var(--text); padding: 8px 14px; cursor: pointer; font-size: var(--fs-md);
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb-pg:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); }
.hb-pg:disabled { opacity: .3; cursor: default; }   /* 第一章／最後一章：書不繞圈 */
.hb-pg-n { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

@keyframes hbFlipNext { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes hbFlipPrev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.dos-hb-panel.hb-flip-next { animation: hbFlipNext .22s var(--motion-ease, ease-out); }
.dos-hb-panel.hb-flip-prev { animation: hbFlipPrev .22s var(--motion-ease, ease-out); }

@media (max-width: 640px) { .hb-pg { max-width: 34%; padding: 8px 10px; } }


/* ---- 參數對照組（DOW／PIS／DOS 共用）---- */

/* ---- 帳本切換（A 主帳／B、C 對照組），見 static/bookswitch.js ---- */
.bk-switch { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.bk-label { font-size: var(--fs-xs); }
.bk-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: var(--rad-md);
  overflow: hidden; }
.bk-tab { background: transparent; border: 0; border-right: 1px solid var(--line);
  color: var(--fg-muted); font-weight: var(--fw-bold); font-size: var(--fs-sm);
  padding: 3px 12px; cursor: pointer; }
.bk-tab:last-child { border-right: 0; }
.bk-tab:hover { background: var(--surface-raised); color: var(--fg); }
.bk-tab.on { background: var(--primary); color: var(--primary-on, #04121a); }
.bk-tab.bk-paused { opacity: .6; }
.bk-warn { font-size: var(--fs-xs); color: var(--warning, #F8E64A); }
/* 非主帳時整張卡要一眼看得出來 —— 不然「歸零」會按在錯的帳本上。 */
.bk-on-shadow { outline: 1px dashed var(--warning, #F8E64A); outline-offset: -1px; }
.bk-on-shadow > summary .dos-sec-title::after { content: " 🧪 對照組"; color: var(--warning, #F8E64A);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.prof-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.prof-head .prof-add { margin-left: auto; }
.prof-table td { vertical-align: top; }
.prof-off { opacity: .5; }
.prof-diff { max-width: 380px; }
.prof-chip { display: inline-block; margin: 1px 2px; padding: 1px 7px; border-radius: var(--rad-full);
  font-size: var(--fs-xs); background: var(--primary-soft); color: var(--primary-text);
  border: 1px solid var(--primary-line); }
.prof-tog { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs);
  color: var(--fg-subtle); cursor: pointer; }
.prof-chart { height: 190px; margin-top: 10px; }
.prof-note { margin-top: 8px; font-size: var(--fs-xs); }
.prof-editor { margin-top: 12px; padding: 12px; border: 1px solid var(--line-subtle);
  border-radius: var(--rad-md); background: var(--surface-sunken); }

.prof-key { font-size: var(--fs-xs); letter-spacing: .02em; }

/* 對照組編輯器的參數列：標籤｜輸入｜說明 三欄（不借 .gate-row —— 它是四欄
   120/90/18px/1fr，借來用時說明會落進 18px 的單位欄被壓成直排，實際發生過） */
.prof-form { display: flex; flex-direction: column; gap: 6px; }
.prof-row { display: grid; grid-template-columns: 190px 100px 1fr; align-items: center;
  gap: 10px; font-size: var(--fs-xs); }
.prof-k { color: var(--text-primary); line-height: 1.3; }
.prof-why { line-height: 1.45; }
@media (max-width: 760px) {
  .prof-row { grid-template-columns: 1fr auto; }
  .prof-why { grid-column: 1 / -1; }
}

  color: var(--text-secondary); white-space: nowrap; }

/* DOW：部位詳情裡「進場當下的日線」 */
.dow-entry-chart { margin: 6px 0 10px; padding: 6px; border: 1px solid var(--line-subtle);
  border-radius: var(--rad-sm); background: var(--surface); }
.dow-entry-cv { display: block; width: 100%; }
.dow-entry-ref { font-size: var(--fs-xs); margin: -4px 0 10px; line-height: 1.6; }
.dow-entry-ref a { color: var(--primary-text); }

/* ---- 管理員登入（static/auth.js；看免登入、改要登入）---- */
.auth-fab { position: fixed; right: 16px; bottom: 16px; z-index: 200;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--rad-full);
  padding: 8px 14px; font-size: var(--fs-md); cursor: pointer;
  box-shadow: var(--shadow-md); }
.auth-fab:hover { color: var(--fg); border-color: var(--line-strong); }
.auth-fab.on { color: var(--success-text); border-color: var(--success-soft); }
.auth-box { max-width: 360px; }
.auth-box h3 { margin: 0 0 6px; font-size: var(--fs-xl); }
.auth-note { margin: 0 0 12px; font-size: var(--fs-xs); }
.auth-row { display: flex; align-items: center; gap: 10px; margin: 10px 0;
  font-size: var(--fs-md); color: var(--text-secondary); }
.auth-row input { flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-sm); color: var(--fg); padding: 8px 10px;
  font-size: var(--fs-md); }
.auth-row input:focus { outline: none; border-color: var(--primary); }
.auth-msg { min-height: 20px; color: var(--danger-text); font-size: var(--fs-xs); }
.auth-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.auth-toast { position: fixed; right: 16px; bottom: 64px; z-index: 200;
  background: var(--surface-raised); border: 1px solid var(--success-soft);
  color: var(--fg); border-radius: var(--rad-md); padding: 10px 14px;
  font-size: var(--fs-md); box-shadow: var(--shadow-md); }

/* ═══ 券商影子帳（spaper.js，三個策略頁共用） ═══ */
.sp-warn { background: var(--warning-soft); border-left: 3px solid var(--warning);
  border-radius: var(--rad-sm); padding: 8px 12px; margin: 8px 0;
  font-size: var(--fs-md); color: var(--fg); }
.sp-config { flex-wrap: wrap; row-gap: 6px; }
.sp-config label { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-md); color: var(--text-secondary); }
.sp-num { width: 64px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rad-sm); color: var(--fg); padding: 4px 6px;
  font-size: var(--fs-md); font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums; }
.sp-recon { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px;
  font-size: var(--fs-md); }

/* ═══ 教學檔案列（docsbar.js；說明與手冊 modal 的開頭） ═══ */
.docsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface); font-size: var(--fs-md); }
.docsbar .db-ver { font-family: var(--ff-mono); color: var(--text-muted);
  font-size: var(--fs-sm); }
.docsbar .db-link { color: var(--fg); text-decoration: none; font-weight: 600; }
.docsbar .db-link:hover { text-decoration: underline; }
.docsbar .db-sep { color: var(--text-muted); }
.docsbar .db-run { padding: 1px 10px; font-size: var(--fs-sm); }
.docsbar .db-job { font-size: var(--fs-sm); }
.docsbar .db-player { flex-basis: 100%; padding-top: 6px; }
.sp-gated { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px;
  font-size: var(--fs-md); line-height: 1.7; }
.sp-btn-sm { padding: 1px 8px; font-size: var(--fs-sm); }
.sp-set { margin: 10px 0; border: 1px solid var(--border); border-radius: var(--rad-sm);
  padding: 8px 12px; }
.sp-set > summary { cursor: pointer; font-size: var(--fs-md); font-weight: 600;
  color: var(--fg); }
.sp-set-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px;
  padding: 10px 0 4px; align-items: start; }
.sp-set-k { font-size: var(--fs-md); color: var(--fg); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; }
.sp-set-v { font-size: var(--fs-md); line-height: 1.65; }
@media (max-width: 640px) { .sp-set-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .sp-set-v { padding-bottom: 8px; } }
.sp-wd { font-size: var(--fs-sm); padding: 2px 0 6px; }
.docsbar .db-age { font-size: var(--fs-sm); }
.docsbar .db-hint { flex-basis: 100%; margin-top: 4px; padding: 6px 10px;
  background: var(--warning-soft); border-left: 3px solid var(--warning);
  border-radius: var(--rad-sm); font-size: var(--fs-sm); line-height: 1.7; }
.docsbar .db-hint code { font-family: var(--ff-mono); background: var(--bg);
  padding: 1px 5px; border-radius: 3px; }
.docsbar .db-stale { font-size: var(--fs-sm); }
.docsbar .db-play-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 0 4px; font-size: var(--fs-md); }
.docsbar .db-stop { padding: 1px 10px; font-size: var(--fs-sm); }

/* 觀察池「分組」欄：標籤不換行之後，欄位要夠寬才不會把整張表撐出橫捲 */
#wpTable td:nth-child(4), #wpTable th:nth-child(4) { white-space: nowrap; }
.docsbar .db-job-old { opacity: .55; }   /* 一小時前的 job 結果：淡化，別跟現況搶眼 */

/* 週線 200MA 檢查：接近的那幾檔要一眼看到（顏色走 Omni token） */
.dow-w200-ok  { background: var(--success-soft, var(--primary-soft)); }
.dow-w200-warn { background: var(--warning-soft, var(--line)); }
#w200Table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 週線 200MA 的計畫書卡（觸發時才出現） */
.dow-w200-plan {
  padding: .7rem .9rem; margin: .6rem 0; border-radius: 4px;
  background: var(--surface); border-left: 3px solid var(--success, var(--primary));
}
.dow-w200-plan-h { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .4rem; }
.dow-w200-plan-g { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .4rem; }
.dow-w200-orders { margin: .3rem 0 .4rem 1.2rem; padding: 0; }
.dow-w200-orders li { margin: .2rem 0; font-variant-numeric: tabular-nums; }


/* 候選掃描：未過門檻的那幾檔（預設收起，點標題的按鈕展開）。
   不列進主表是使用者 2026-09-09 的要求（「只顯示過門檻的項目」），
   但要看得到有幾檔、卡在什麼 —— 無聲丟掉比列出來更糟。 */
.dos-cand-missed{display:grid;gap:10px;padding:12px 14px;margin:10px 0;
  border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:13px}
.dos-cand-missed > div{display:grid;gap:2px}


/* 候選列的「這組怎麼挑出來的」—— plan.why。字小、可換行，不要跟腳位擠在一起。 */
.cand-why{margin-top:6px;font-size:11.5px;line-height:1.5;max-width:46ch}

/* ── 清帳本（static/bookclear.js 注入的 modal）───────────────────────── */
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(1.08); }
.bc-box { max-width: 640px; }
.bc-scope { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md);
  color: var(--text-secondary); margin-bottom: 6px; }
.bc-h { font-size: var(--fs-md); font-weight: 700; margin: 14px 0 6px; color: var(--text); }
.bc-h label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bc-table td, .bc-table th { padding: 4px 8px; }
.bc-keep { background: var(--warning-soft); border-left: 3px solid var(--warning);
  border-radius: var(--rad-sm); padding: 8px 12px; margin: 8px 0; font-size: var(--fs-md); }
.bc-keep-list { margin: 6px 0 0; padding-left: 18px; }
.bc-keep-list li { margin: 2px 0; }
.bc-warn { background: var(--danger-soft); border-left: 3px solid var(--danger-line);
  border-radius: var(--rad-sm); padding: 8px 12px; margin: 10px 0 4px;
  font-size: var(--fs-md); color: var(--text); line-height: 1.6; }

/* 長得像連結的按鈕（行內可點，但不是導頁 —— 例如摘要列裡「評估 MMVPL2／MMVPS2 ⚙️」打開設定抽屜） */
.linklike {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--primary-text, var(--primary)); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover, .linklike:focus-visible { color: var(--primary); }

/* 設定抽屜：沒在「關注的 SETUP」裡的，自動交易那一格不能勾（DOW） */
.pis-check.is-disabled { opacity: .45; cursor: not-allowed; }

/* 受開關管、而開關關著的參數（規格的 requires，見 mcpt.js renderProfileForm）：
   變灰並寫明原因。使用者 2026-09-24 想用「分鐘數設 0」關濾網，正是因為勾掉
   開關後這些數字看起來還能改、還像有作用。 */
.pp-item.pp-gated { opacity: .45; }
.pp-item.pp-gated .pp-label::after {
  content: "（上方開關已關，這一項不起作用）";
  margin-left: 6px; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400;
}

/* 策略參數有未儲存的變更時，固定在畫面底部的儲存列（mcpt.js refreshDirty）。
   置中並留出右側空間 —— 右下角是登入按鈕（.auth-fab，right:16px），蓋住它
   就沒辦法在「按儲存 → 被要求登入」時登入。 */
.pp-dirty-bar {
  /* 置中用 left/right:0 + margin:auto，**不用** left:50% + translateX(-50%)：
     後者的可用寬度只剩「50% 到右邊緣」那一半，max-content 被夾住，一行字也
     會折成兩行（1024 寬的視窗實測被夾在 477px）。 */
  position: fixed; left: 0; right: 0; bottom: 16px; margin: 0 auto;
  z-index: 190;                                   /* 登入按鈕是 200，要壓在它下面 */
  width: max-content; max-width: min(960px, calc(100vw - 200px));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-raised); color: var(--fg);
  border: 1px solid var(--status-warn); border-radius: var(--rad-md, 10px);
  box-shadow: var(--shadow-md);
}
.pp-dirty-bar[hidden] { display: none; }
.pp-dirty-txt { font-weight: 700; color: var(--warning-text); white-space: nowrap; }
/* flex-basis 用 auto 不用固定值：容器是 width:max-content，basis 寫 200px 的話
   max-content 會照 200px 算，短短一行「A 組：C-8、G-5」也被折成三行（實測高 91px） */
.pp-dirty-keys { color: var(--text-secondary); font-size: var(--fs-sm); flex: 0 1 auto; }
.pp-dirty-btns { display: flex; gap: 8px; margin-left: auto; white-space: nowrap; }
.pp-dirty-bar kbd {
  font: inherit; font-size: var(--fs-xs); opacity: .75;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px;
}
/* 窄螢幕：整條拉滿（扣掉左右 12px），並墊高到登入按鈕上方 */
@media (max-width: 640px) {
  .pp-dirty-bar { left: 12px; right: 12px; max-width: none; width: auto; bottom: 72px; }
  .pp-dirty-bar kbd { display: none; }            /* 手機沒有 ⌘S */
}

/* FedWatch 點開後的面板（app.js buildFedwatchPanel / fedPathSvg） */
.fw-head { font-size: var(--fs-sm); color: var(--text-secondary); margin: 2px 0 10px; }
.fw-path-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 4px; }
.fw-legend { display: inline-flex; gap: 12px; }
.fw-lg { display: inline-flex; align-items: center; gap: 5px; }
.fw-lg i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
/* 等比縮放（不用 preserveAspectRatio="none"：那會把座標軸文字橫向拉長變形） */
.fw-path { display: block; width: 100%; max-width: 760px; height: auto; margin-bottom: 12px; overflow: visible; }
.fw-path polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fw-path .fw-grid { stroke: var(--line-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fw-path .fw-effr { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke; }
.fw-path .fw-ax { fill: var(--text-muted); font-size: 11px; }
/* 現在＝主色實線；1 週前＝虛線；1 個月前＝點線 —— 不只靠顏色分（色弱也看得出） */
.fw-now, .fw-lg i.fw-now { stroke: var(--primary); border-color: var(--primary); }
.fw-1w, .fw-lg i.fw-1w { stroke: var(--text-secondary); border-color: var(--text-secondary);
  stroke-dasharray: 6 4; border-top-style: dashed; }
.fw-1m, .fw-lg i.fw-1m { stroke: var(--text-muted); border-color: var(--text-muted);
  stroke-dasharray: 2 3; border-top-style: dotted; }
.fw-path .fw-now-dot { fill: var(--primary); }
.fw-table td:nth-child(n + 4), .fw-table th:nth-child(n + 4) { text-align: right; white-space: nowrap; }
/* 精簡後欄位很短，撐滿寬螢幕會變一排空白 —— 跟路徑圖一樣寬，上下對齊 */
.fw-table, .fw-path-h { max-width: 760px; }
/* 趨勢欄的紅綠：`:is(.card-details, .sr-dash-table) .ec-table td { color: var(--text) }`
   比 .hl-bad 具體，會把顏色蓋回一般文字色（實測 ▲ 全是白的）—— 這裡要同樣具體才贏。 */
:is(.card-details, .sr-dash-table) .fw-table td.hl-bad { color: var(--status-alert); font-weight: 700; }
:is(.card-details, .sr-dash-table) .fw-table td.hl-good { color: var(--status-ok); font-weight: 700; }
:is(.card-details, .sr-dash-table) .fw-table td.muted { color: var(--text-muted); }
.fw-note { font-size: var(--fs-xs); line-height: 1.6; margin-top: 8px; }

/* ---- 損益總覽（/overview）---- */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ov-card { border: 1px solid var(--border);
  border-radius: var(--rad-md); padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.ov-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ov-card-head h3 { margin: 0; font-size: var(--fs-lg); }
.ov-card-head h3 a { color: inherit; text-decoration: none; }
.ov-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.ov-badge-ok { color: var(--success-text); border-color: var(--status-ok); background: var(--success-soft); }
.ov-since { font-size: var(--fs-sm); }
.ov-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.ov-nums > div { display: flex; flex-direction: column; min-width: 0; }
.ov-nums small { font-size: var(--fs-xs); color: var(--text-muted); }
.ov-nums b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ov-nums span { font-size: var(--fs-xs); }
.ov-checks { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.ov-checks .ov-ok { color: var(--success-text); }
.ov-checks .ov-no { color: var(--text); }
.ov-checks .muted { font-family: var(--font-mono); font-size: var(--fs-xs); margin-left: 4px; }
/* 累積損益：一個策略一張小圖（小倍數） */
/* 固定 2×2：auto-fit 在寬螢幕會排成 3＋1，DOS 一個人掉到下一列 */
.ov-curves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .ov-curves { grid-template-columns: 1fr; } }
.ov-curve { margin: 0; border: 1px solid var(--border); border-radius: var(--rad-md); padding: 10px 12px 6px; background: var(--bg); min-width: 0; }
.ov-curve figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--fs-sm); margin-bottom: 6px; }
.ov-curve figcaption a { color: inherit; text-decoration: none; font-size: var(--fs-lg); }
.ov-curve-nums { margin-left: auto; white-space: nowrap; }
.ov-curve-nums b { font-family: var(--font-mono); }
.ov-curve-plot { position: relative; height: 200px; }
.ov-curve-table { margin-top: 10px; font-size: var(--fs-sm); }
.ov-curve-table h4 { margin: 10px 0 4px; }
.ov-curve-table .ov-table { max-width: 420px; }
.ov-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ov-table th, .ov-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.ov-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ov-curve-nums { margin-left: 0; }
  .ov-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-table { font-size: var(--fs-xs); }
}

/* ---- 摩天輪策略（templates/wheel.html）---- */
.wh-rules ul, .wh-rules ol { margin: 4px 0 12px; padding-left: 22px; line-height: 1.7; font-size: var(--fs-sm); }
.wh-rules > p { font-size: var(--fs-sm); line-height: 1.6; }
#whCmpTable td:first-child { min-width: 230px; }
#whSigTable td:nth-child(3) { min-width: 220px; }
#whHoldTable td, #whOptTable td, #whSigTable td { vertical-align: top; }

/* 日線觀察卡的「⚙️ K 線型態門檻」先隱藏（使用者 10-24；程式碼保留）—— .btn／details 的 display 會蓋掉 hidden 屬性 */
.kline-config[hidden], .btn-kline-config[hidden] { display: none !important; }

/* 類股輪動：資金流入／流出每個類股一行＋5 檔個股代號（使用者 10-24） */
/* 個股代號做成按鈕樣式，固定欄寬 → 上下對齊（使用者 10-25） */
.sr-flow-list { display: flex; flex-direction: column; gap: 4px; }
.sr-mover { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sr-mover-sec { font-weight: 600; min-width: 9em; }
/* 台股版（10-28）：chip 是「代號 名稱 ±x.x%」，欄寬 11.5em；窄螢幕改 2 欄 */
.sr-mover-tk { display: grid; grid-template-columns: repeat(5, 11.5em); gap: 6px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--fs-sm); }
.sr-mover-tk .sr-tk { display: block; text-align: center; padding: 2px 0; border-radius: 6px; border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent); line-height: 1.5; }
.sr-mover-tk .sr-tk:hover { text-decoration: none; background: color-mix(in srgb, currentColor 26%, transparent); }
.sr-flow-in .sr-mover-tk { color: var(--rise); }
.sr-flow-out .sr-mover-tk { color: var(--fall); }
.sr-mover-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

/* PIS／DOW：Finviz 名單讀不到的紅色橫幅（使用者 10-24） */
.finviz-alert { background: color-mix(in srgb, var(--status-alert) 12%, transparent); border: 1px solid var(--status-alert);
  border-radius: 8px; padding: 10px 14px; margin: 10px 0 14px; color: var(--text); font-size: var(--fs-md); }
.finviz-alert-list { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }

/* 類股輪動個股 chip（台股版 10-28：點了開 Yahoo 股市個股頁，不再浮出 Finviz 圖） */
.sr-tk { color: inherit; text-decoration: none; cursor: pointer; }
.sr-tk:hover { text-decoration: underline; }
.sr-tk-name { margin-left: .35em; font-family: var(--font-sans, inherit); }
.sr-tk-pct { margin-left: .35em; opacity: .8; }
.sr-mover-tk .sr-tk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 6px; }
@media (max-width: 960px) { .sr-mover-tk { grid-template-columns: repeat(2, minmax(0, 11.5em)); } }
.sr-tw-tbl td.num, .sr-tw-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-tw-tbl .sr-pos { color: var(--rise); }
.sr-tw-tbl .sr-neg { color: var(--fall); }
.sr-tw-tbl tr.sr-tw-movers td { padding-top: 0; border-top: none; }
.sr-tw-movers .sr-mover { margin: 2px 0; }
.sr-tw-mk { font-size: var(--fs-xs); color: var(--text-muted); min-width: 2.5em; }
@media (max-width: 480px) { .sr-tw-tbl th, .sr-tw-tbl td { padding-left: 4px; padding-right: 4px; } }
.tk-chart-pop { position: fixed; z-index: 9999; background: var(--canvas, #111); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); pointer-events: none; }
.tk-chart-pop img { display: block; width: 466px; max-width: 80vw; height: auto; background: #fff; border-radius: 4px; }
.tk-chart-h { font-size: var(--fs-sm); font-weight: 600; margin: 0 2px 4px; }

/* PIS 前 10 名「🤖 會不會進」（2026-10-24） */
.pis-eng { min-width: 150px; max-width: 220px; }
.pis-eng-why { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; margin-top: 2px; }
.pis-entry-plan { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }


/* Email 通知寄不寄（static/email_prefs.js，2026-10-27） */
.email-prefs { display: flex; flex-direction: column; gap: .45rem; }
.ep-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line); }
.ep-label { color: var(--fg); font-size: var(--fs-sm); }
.ep-modes { display: inline-flex; flex-wrap: wrap; gap: .2rem .7rem; }
.ep-mode { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--fs-sm); color: var(--fg-subtle); cursor: pointer; }
.ep-msg { font-size: var(--fs-xs); min-height: 1em; }

/* 摩天輪 ⚙️ 設定抽屜（2026-10-27）：四組並排要比一般抽屜寬 */
.wh-drawer { width: min(760px, 96vw); }
.wh-params td, .wh-params th { white-space: normal; vertical-align: middle; }
.wh-params .wh-in { width: 100%; min-width: 72px; }
.wh-params .wh-changed { border-color: var(--status-warn); background: var(--warning-soft); }
.wh-hist { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); }

/* 交易紀錄：回測補記的單（source=backtest） */
.pp-bt {
  font-size: var(--fs-xs); font-weight: 600; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}

/* ── 台指期開盤判讀卡（app.js buildTxOpenView；使用者 10-29：分段、顏色、字級）──
   漲跌色走 --rise/--fall（跟全站 data-updir 一起切換） */
.card-details li.txo { white-space: normal; padding: 0; color: var(--text); font-size: var(--fs-lg); }
.txo-up { color: var(--rise); }
.txo-dn { color: var(--fall); }
.txo-flat { color: var(--text-muted); }
.txo-gap { color: var(--warning-text); }
.txo-hero { padding: 6px 0 4px; }
.txo-hero-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.txo-verdict { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: .02em; }
.txo-lead { margin: 6px 0 0; font-size: var(--fs-xl); line-height: 1.6; color: var(--text); }
.txo-chip { font-size: var(--fs-sm); padding: 3px 10px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-muted); }
.txo-chip-info { background: var(--info-soft); color: var(--info-text); }
.txo-chip-warn { background: var(--warning-soft); color: var(--warning-text); }
.txo-sec { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.txo-h { margin: 0 0 10px; font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.txo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.txo-m { background: var(--surface-sunken); border-radius: 8px; padding: 10px 12px; }
.txo-lbl { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 4px; }
.txo-num { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.25; }
.txo-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 3px; font-weight: 400; }
.txo-tbl th .txo-sub { display: block; margin: 0; }
.txo-gapline { margin-top: 12px; }
.txo-bar { position: relative; height: 10px; border-radius: 5px; background: var(--surface-sunken); margin: 2px 0 10px; }
.txo-fill { height: 100%; border-radius: 5px; }
.txo-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.txo-bg-up { background: var(--rise); }
.txo-bg-dn { background: var(--fall); }
.txo-bg-warn { background: var(--warning); }
.txo-bg-muted { background: var(--text-muted); opacity: .55; }
.txo-p { margin: 6px 0 0; line-height: 1.7; }
.txo-move { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-size: var(--fs-2xl); margin-bottom: 10px; }
.txo-arrow { color: var(--text-muted); }
.txo-big { font-size: 26px; font-weight: 700; }
.txo-warn { margin-top: 10px; padding: 6px 0 6px 12px; border-left: 3px solid var(--warning);
  color: var(--warning-text); line-height: 1.6; }
.txo-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.txo-tbl th, .txo-tbl td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--border); }
.txo-tbl th:first-child { text-align: left; font-weight: 600; }
.txo-tbl thead th { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }
.txo-ladder { font-variant-numeric: tabular-nums; }
.txo-lv { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-bottom: 1px solid var(--border); }
.txo-lv > span:last-child { text-align: right; }
.txo-lv-px { font-weight: 700; font-size: var(--fs-xl); }
.txo-lv-self { background: var(--info-soft); color: var(--info-text); border-radius: 6px; border-bottom: none; font-weight: 700; }
.txo-note { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
/* 好／壞（狀態：封鎖、休市、成交、壓力／支撐…）——跟漲跌方向分開，不隨紅漲綠跌對調（使用者 10-29） */
.hl-good { color: var(--status-ok); font-weight: 700; }
.hl-bad  { color: var(--status-alert); font-weight: 700; }