/* ──────────────────────────────────────────────────────────────
   fundk — 力道K 分析系統 · 行動優先響應式 (light / 亮色)
   ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 亮色主題：白卡 + 淺灰底 + 深字。台股慣例 紅漲綠跌 不變。 */
  --bg: #f3f5f8;          /* 頁底 — 柔和淺灰 */
  --bg-elev: #e8ecf1;     /* 內凹區 (分類列/資訊框/診斷) — 比頁底略深 */
  --panel: #ffffff;       /* 卡片/頂列/選單 — 白,浮在灰底上 */
  --panel-2: #eef1f5;     /* 次級面 (pill/下拉/chip/表頭/hover) */
  --panel-3: #e2e7ee;     /* 三級面 (hover 加深) */
  --line: #d5dbe2;        /* 框線 */
  --line-2: #e6eaef;      /* 淡框線 (列分隔) */
  --text: #1c2128;        /* 主文字 — 近黑 */
  --muted: #5b6470;       /* 次要文字 */
  --muted-strong: #353c45;/* 強調次要文字 */
  --accent: #1366d6;      /* 主色 — 清亮藍 (白底可讀) */
  --accent-soft: rgba(19,102,214,0.10);
  --green: #1a8a44;       /* 可當文字讀的綠 */
  --green-strong: #16a34a;/* 鮮綠 (填色/強調) */
  --red: #d62f28;         /* 可當文字讀的紅 */
  --red-strong: #e23b30;  /* 鮮紅 (填色/強調) */
  /* 漲跌色 — 台股慣例：紅漲綠跌 (與歐美相反)。漲/買/獲利/多頭=紅, 跌/賣/虧損/空頭=綠 */
  --up: var(--red);
  --up-strong: var(--red-strong);
  --down: var(--green);
  --down-strong: var(--green-strong);
  --yellow: #b8860b;
  --gold: #b7791f;
  --radius: 10px;
  --radius-sm: 6px;
  --tap: 44px;          /* iOS HIG min tap target */
  --tap-sm: 36px;
  --safe-l: env(safe-area-inset-left, 0);
  --safe-r: env(safe-area-inset-right, 0);
  --safe-b: env(safe-area-inset-bottom, 0);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* 整頁一律不可水平捲動/側滑 (含 iOS Safari)。clip 不會建立捲動容器→不破壞 sticky 頂列;
     hidden 為極舊瀏覽器後備。各 chip 列自己的 overflow-x:auto 不受此影響,仍可列內捲動。 */
  overflow-x: hidden;
  overflow-x: clip;
}

button, input, select { font: inherit; color: inherit; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px max(16px, var(--safe-l)) 10px max(16px, var(--safe-l));
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.brand { font-size: 17px; display: flex; align-items: center; gap: 6px; }
.brand-icon { font-size: 20px; }
.brand strong { color: var(--accent); }
.brand-sub { font-size: 14px; }
/* topbar 導覽連結 (市場雷達/波段篩選/動能輪動)。手機上隱藏 .tl-label 只留 emoji 圖示 */
.topbar-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar-link:hover { text-decoration: underline; }
.muted { color: var(--muted); }

.pill {
  background: var(--panel-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
/* 健康時不顯示狀態燈 — 只在 checking… / 異常(bad) 時才出現,避免 header 多一顆冗餘綠燈 (全站一致) */
.pill.ok { display: none; }
.pill.bad { color: var(--red); border-color: var(--red); }

/* ── 精簡模式切換鈕 (topbar 右側) ─────────────────────────── */
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.mode-toggle {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 30px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mode-toggle:hover { color: var(--text); border-color: var(--accent); }
.mode-toggle.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* 精簡模式：只留 報價 / 期間 / 策略 / 圖表 / 近期訊號，隱藏進階區塊 */
body.simple-mode .adv-only { display: none !important; }

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px max(12px, var(--safe-l)) calc(24px + var(--safe-b)) max(12px, var(--safe-r));
}

/* ── 商品選擇 + 即時報價 ──────────────────────────────────── */
.picker {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.picker-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.picker-row + .picker-row { margin-top: 10px; }

/* ── 題材標籤 + 產業分類 兩個 select 同列 ─────────────── */
.picker-select-row { display: flex; gap: 8px; align-items: stretch; }
.sector-select {
  flex: 1 1 0;
  min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 30px 10px 12px;
  font-size: 16px;
  min-height: var(--tap);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238b949e' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  text-overflow: ellipsis;
}
.sector-select:hover, .sector-select:focus { border-color: var(--accent); outline: none; }
.sector-select option { background: var(--panel-2); color: var(--text); }

/* ── Combobox (商品選擇器 — 可搜尋 + 分類) ─────────────── */
.combobox { position: relative; flex: 1; min-width: 0; }

.combobox-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 17px;
  min-height: var(--tap);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.combobox-trigger:hover { border-color: var(--accent); }
.combobox-trigger:focus-within {
  border-color: var(--accent);
  background: var(--panel-3);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
/* 主欄位即輸入框 — 可直接打字篩選 */
.combobox-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 17px;
  padding: 2px 0;
  text-overflow: ellipsis;
}
.combobox-input::placeholder { color: var(--muted); }
.combobox-caret {
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.combobox-trigger:focus-within .combobox-caret { transform: rotate(180deg); }

/* 下拉面板 */
.combobox-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15,23,42,0.16);
  z-index: 200;
  max-height: min(540px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.combobox-panel[hidden] { display: none !important; }

/* 搜尋列 */
.combobox-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.combobox-search-icon {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
#instSearch {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: 16px;
  min-width: 0;
  padding: 4px 0;
  min-height: 32px;
  appearance: none;
  -webkit-appearance: none;
}
#instSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.combobox-search-clear {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  visibility: hidden;
}
.combobox-search-clear.visible { visibility: visible; }
.combobox-search-clear:hover { background: var(--panel-2); color: var(--text); }

/* 分類 tabs */
.combobox-categories {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg-elev);
}
.combobox-categories::-webkit-scrollbar { display: none; }
.cat-chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
  min-height: 28px;
}
.cat-chip:hover { background: var(--panel-3); color: var(--text); }
.cat-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.cat-chip .cat-count {
  margin-left: 4px;
  opacity: 0.75;
  font-size: 13px;
}

/* 商品列表 */
.combobox-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  min-height: 60px;
}
.combobox-group {
  padding: 6px 14px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 1;
}
.combobox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  min-height: var(--tap);
  border-bottom: 1px solid var(--line-2);
  transition: background 0.1s;
}
.combobox-item:hover,
.combobox-item.highlighted {
  background: var(--panel-2);
}
.combobox-item.selected {
  background: var(--accent-soft);
}
.combobox-item.selected .item-sym { color: var(--accent); }
.combobox-item .item-check {
  width: 14px;
  flex-shrink: 0;
  color: var(--accent);
  text-align: center;
  font-size: 15px;
}
.combobox-item .item-body { flex: 1; min-width: 0; }
.combobox-item .item-sym {
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
}
.combobox-item .item-name {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combobox-item .item-star {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 13px;
  line-height: 1;
}

/* ── 市場標籤 (上櫃/興櫃)：把興櫃和上市清楚隔開 ── */
.item-market, .quote-market {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted-strong);
  white-space: nowrap;
  line-height: 1.5;
}
/* 興櫃：醒目琥珀色 (流動性低，提醒別當一般上市看待) */
.item-market.mk-TWEM, .quote-market.mk-TWEM {
  color: #fff;
  background: var(--gold);
  border-color: var(--gold);
}
.quote-market { margin-left: 6px; vertical-align: middle; display: inline-block; }
.combobox-item mark {
  background: rgba(251,191,36,0.25);
  color: inherit;
  font-weight: 700;
  padding: 0;
  border-radius: 2px;
}

.combobox-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* 背景遮罩 (手機點外面關閉) */
.combobox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.combobox-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 手機: 面板做成 sticky-top 全寬 dropdown，遮罩降下 */
@media (max-width: 719px) {
  .combobox-panel {
    max-height: min(70vh, calc(100vh - 120px));
  }
}

.picker-quote { gap: 12px; }
.quote-name {
  font-size: 17px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-name .quote-sym {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  margin-left: 6px;
}
.quote-price { text-align: right; line-height: 1.2; }
.quote-price .qp-main { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-price .qp-chg { font-size: 14px; display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.qp-up { color: var(--up); }
.qp-down { color: var(--down); }

/* ── 自選清單 收藏星 ── */
.watch-star {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  padding: 0;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.watch-star:hover { background: var(--panel-2); color: var(--gold); }
.watch-star:active { transform: scale(0.86); }
.watch-star.active { color: var(--gold); }
.watch-star:disabled { opacity: 0.35; cursor: default; }

.picker-meta { font-size: 13px; flex-wrap: wrap; gap: 6px; }
.picker-meta > * { white-space: nowrap; }

/* ── Toolbar (date range / strategy) ─────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.toolbar-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* 期間 — pill 群 */
.seg-group {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  flex: 1;
  min-width: 0;     /* flex 子元素 (期間列) 用:預設 min-width:auto 不會縮,缺它則內容撐寬整頁 */
  max-width: 100%;  /* 非 flex 容器內的 seg-group (如篩選器 #screenChips) 用:限寬至容器、改列內捲動 */
}
.seg-group::-webkit-scrollbar { display: none; }
.seg-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 14px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  min-height: var(--tap-sm);
  transition: background 0.15s, color 0.15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.seg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 策略 — chip 群 (水平滑動) */
.strat-group {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;     /* 關鍵:否則 11 顆 chip 撐寬整頁 → 整頁可往右側滑 (而非列內捲動) */
  max-width: 100%;  /* 安全網:任何容器內都限寬至容器,確保只在列內捲動、不撐破整頁 */
  padding: 2px;
  scroll-snap-type: x proximity;
}
.strat-group::-webkit-scrollbar { display: none; }

.strat-chk {
  position: relative;   /* 關鍵:含住內部 position:absolute 的隱藏 radio input;
                           否則該 input 包含塊變成 html、逃出 strat-group 裁切,
                           把 html.scrollWidth 撐寬→整頁可水平側滑 (即使版面看似無溢出) */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  scroll-snap-align: start;
  min-height: var(--tap-sm);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.strat-chk:hover { background: var(--panel-3); }
.strat-chk input { position: absolute; opacity: 0; pointer-events: none; }
.strat-chk:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* fallback for browsers without :has */
.strat-chk input:checked ~ span { color: var(--accent); }

/* ── Recommendation banner ──────────────────────────────── */
.reco-banner {
  background: linear-gradient(135deg, rgba(56,139,253,0.08), rgba(163,113,247,0.08));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

/* 推薦追蹤 (forward / 真實 out-of-sample) */
.reco-history {
  background: rgba(34,197,94,0.04);
  border: 1px solid var(--line-2);
  border-left: 3px solid #6b7280;
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 10px 14px;
}
.reco-hist-head { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.reco-hist-head .muted { font-weight: 400; font-size: 12px; }
.reco-hist-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.reco-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: var(--tap);
}
.reco-icon { font-size: 20px; flex-shrink: 0; }
.reco-best { flex: 1; font-size: 15px; }
.reco-best strong { color: var(--accent); }
.reco-toggle { color: var(--muted); transition: transform 0.2s; flex-shrink: 0; }
.reco-summary[aria-expanded="true"] .reco-toggle { transform: rotate(180deg); }
.reco-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(88,166,255,0.18);
  padding-top: 12px;
}
.reco-banner.expanded .reco-body { display: block; }

/* 現在型態 (regime / 趨勢狀態判讀) */
.regime-box {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 10px 14px;
}
.regime-head { padding-left: 10px; }
.regime-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.regime-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.regime-family { font-size: 14px; color: var(--muted-strong); }
.regime-stats { font-size: 12px; margin-top: 6px; }
.regime-stats strong { color: var(--muted-strong); }
.regime-note { font-size: 12px; color: var(--muted-strong); margin: 9px 0 7px; line-height: 1.5; }
.regime-dist { margin: 7px 0; }
.rg-bar {
  display: flex;
  height: 9px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--line);
}
.rg-seg { display: block; height: 100%; }
.rg-bar-cap { font-size: 10px; margin-top: 4px; }
.regime-discl { font-size: 11px; margin-top: 7px; opacity: 0.85; line-height: 1.4; }

/* 前瞻型態展望 (forward outlook;經驗統計,非價格預測) */
.outlook-box {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 10px 14px;
}
.ol-head { padding-left: 10px; }
.ol-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px;
}
/* 信心徽章用中性色 (非紅綠) — 避免與多空語意混淆 */
.ol-conf {
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted-strong);
}
.ol-conf.conf-high { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ol-conf.conf-mid  { color: var(--muted-strong); }
.ol-conf.conf-low  { color: #b45309; }
.ol-conf.conf-none { color: var(--muted); }
.ol-summary { font-size: 12.5px; color: var(--muted-strong); margin: 8px 0 4px; line-height: 1.6; }
.ol-rows-cap { font-size: 11px; margin: 6px 0 2px; line-height: 1.5; }
.ol-rows-cap b { color: var(--muted-strong); font-weight: 600; }
.ol-rows { margin-top: 4px; }
.ol-row { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.ol-row:first-child { border-top: none; }
.ol-h { flex: 0 0 62px; font-weight: 600; font-size: 13px; }
.ol-n { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ol-body { flex: 1; min-width: 0; }

/* 每列三段:① 趨勢走向條 ② 最可能型態圖例 ③ 期間中位報酬 */
.ol-blk { margin-bottom: 9px; }
.ol-blk-legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ol-blk-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; margin-bottom: 5px; }
.ol-tag {                                  /* 左側小標,讓兩段一眼是不同東西、不是疊在一起的雙色帶 */
  flex: 0 0 auto; color: var(--muted);
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.3px;
}
.ol-lab { font-weight: 600; }
.ol-lab.up { color: var(--up-strong); }
.ol-lab.flat { color: var(--muted-strong); }
.ol-lab.down { color: var(--down-strong); }
.ol-ud {                                   /* 走向條:加高到 14px,單獨一條、清楚可讀 */
  display: flex; height: 14px; width: 100%;
  border-radius: 5px; overflow: hidden; background: var(--line);
}
.ud-up { background: var(--up-strong); }
.ud-flat { background: #9ca3af; }
.ud-down { background: var(--down-strong); }
.ol-legend { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 11.5px; }
.ol-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-strong); white-space: nowrap; }
.ol-chip i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.ol-chip-rest { color: var(--muted); }
.ol-ret { font-size: 12px; margin-top: 8px; }
.ol-ret-up { color: var(--up-strong); }
.ol-ret-down { color: var(--down-strong); }
.ol-discl { font-size: 11px; margin-top: 9px; opacity: 0.85; line-height: 1.4; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  min-height: var(--tap-sm);
}
.btn-primary:hover { filter: brightness(1.1); }

.reco-table {
  margin-top: 6px;
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
}
.reco-table thead th {
  font-weight: 500;
  color: var(--muted);
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  white-space: nowrap;
}
.reco-table thead th.num { text-align: right; }
.reco-table tbody td {
  padding: 6px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
}
.reco-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.reco-table tbody tr.row-best {
  background: rgba(239, 68, 68, 0.12);
  font-weight: 600;
}
.reco-table tbody tr.row-best td:first-child { color: var(--gold); font-size: 16px; }

/* ── 卡片 / 區塊 ─────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.card-chart { padding: 8px; }
.card-summary {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.card-summary::-webkit-details-marker { display: none; }
.card-summary::before {
  content: "▸";
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  width: 12px;
}
details[open] > .card-summary::before { transform: rotate(90deg); }

.card-summary + * { margin-top: 8px; }

/* ── Chart ─────────────────────────────────────────────── */
.chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 8px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}
.chart-toggle {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  min-height: 28px;
}
.chart-toggle.active { color: var(--accent); border-color: var(--accent); }

.chart-area {
  width: 100%;
  height: 510px;   /* 手機基準 (桌機 >=720px / >=1024px 另有覆寫);多 30px 補圖例換行預留 */
  position: relative;
}
.chart-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 16px;
}

/* ── 診斷面板 ───────────────────────────────────────────── */
.diag-panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
  font-family: "Consolas", "Menlo", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.diag-ok { color: var(--green); }
.diag-bad { color: var(--red); }

/* ── 訊號表 ─────────────────────────────────────────────── */
.table-scroll {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;   /* 寬表 (如篩選器 8 欄) 在框內橫捲，不撐破整頁 */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
th.num, td.num { text-align: right; }
thead th {
  background: var(--panel-2);
  position: sticky;
  top: 0;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  z-index: 1;
}
tbody tr:hover { background: var(--panel-2); }
.buy { color: var(--up); font-weight: 600; }
.sell { color: var(--down); font-weight: 600; }

footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  text-align: center;
}

/* ── 訊號摘要 / 建議行動面板 ────────────────────────────── */
.signal-summary {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.signal-summary-title {
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.signal-summary-title .stat {
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
}

.trigger-pos {
  font-size: 14px;
  color: var(--muted-strong);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 4px 0 10px;
  line-height: 1.5;
}
.trigger-action {
  background: var(--panel-2);
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-left-width: 4px;
}
.trigger-action-head {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.trigger-action-desc {
  font-size: 15px;
  color: var(--muted-strong);
  line-height: 1.5;
}

/* 停利 / 追蹤停利 表 */
.trigger-stops {
  margin-top: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.trigger-stops-title {
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.4;
}
.trigger-stops-title .stat {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
  margin-top: 2px;
}
.trigger-stops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.trigger-stops-table th, .trigger-stops-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.trigger-stops-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
}
.trigger-stops-table .num { text-align: right; }
.trigger-stops-table tr:last-child td { border-bottom: none; }

.trigger-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--muted-strong);
  line-height: 1.6;
}

/* ──────────────────────────────────────────────────────────
   響應式中斷點
   ────────────────────────────────────────────────────────── */
/* Tablet (≥ 720px): 圖表變高，picker quote 站一排 */
@media (min-width: 720px) {
  main { padding: 16px 20px calc(24px + var(--safe-b)); }
  .chart-area { height: 640px; }
  .picker { padding: 14px; }
  .picker-row { gap: 12px; }
  .quote-name { font-size: 18px; }
  .quote-price .qp-main { font-size: 26px; }

  .toolbar { padding: 10px 16px; }
  .toolbar-label { width: 40px; }
  .seg-btn { padding: 6px 14px; }

  .reco-body { display: block; padding: 12px 14px 14px; border-top: 1px solid rgba(88,166,255,0.18); }
  .reco-summary { pointer-events: none; }
  .reco-toggle { display: none; }
}

/* Desktop (≥ 1024px): 主圖表還要更高 + 更多指標 pane */
@media (min-width: 1024px) {
  .topbar { padding: 12px 24px; }
  main { padding: 18px 24px calc(28px + var(--safe-b)); }
  .chart-area { height: 800px; }

  /* picker 變兩欄: 左 dropdown, 右 quote */
  .picker {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "sel  quote"
      "meta meta";
    gap: 8px 16px;
    padding: 14px 16px;
  }
  .picker-row { display: contents; }
  .picker-row:nth-child(1) > select { grid-area: sel; }
  /* quote 列維持實體 flex 容器 (display:contents 會吃掉 justify-content)，
     讓 收藏星 + 名稱 + 報價 同列右對齊 */
  .picker-quote { display: flex; align-items: center; gap: 8px; grid-area: quote; justify-content: flex-end; }
  .picker-meta { grid-area: meta; justify-content: flex-start; }

  select#instrumentSelect { min-width: 320px; }

  .table-scroll { max-height: 320px; }
}

/* ──────────────────────────────────────────────────────────
   手機特化 (< 720px): 改以「好讀」為主 —
   字大一點、表格不橫向捲、區塊之間留白足 (不要太密)
   ────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .topbar { padding: 8px 12px; }
  .brand-sub { display: none; }
  main { padding-top: 10px; }

  /* header 一列塞不下 (約 436px > 螢幕)：導覽連結改「圖示化」,只留 emoji 騰出空間 */
  .tl-label { display: none; }
  .topbar-link { font-size: 19px; gap: 0; }
  .topbar-actions { gap: 12px; }

  /* 控制列：按鈕字級略放大，好按也好讀 */
  .seg-btn { padding: 9px 14px; font-size: 15px; }
  .strat-chk { padding: 8px 13px; font-size: 15px; }
  .toolbar-label { display: none; }
  .toolbar { padding: 8px 10px; gap: 6px; }

  /* 區塊之間留白足，段落分明 */
  .card { padding: 12px; margin-bottom: 14px; }
  .signal-summary, .regime-box, .reco-banner { margin-bottom: 14px; }

  /* 報價：主數字再放大，一眼可見 */
  .quote-name { font-size: 18px; }
  .quote-price .qp-main { font-size: 24px; }
  .quote-price .qp-chg { font-size: 15px; }

  /* 基本面 strip 放大 */
  .fund-strip { font-size: 15px; }
  .fund-strip .fs-k { font-size: 14px; }

  /* 現在型態 (regime)：判讀重點，字放大、行距拉開 */
  .regime-family { font-size: 15px; }
  .regime-stats { font-size: 13px; }
  .regime-note { font-size: 14px; line-height: 1.65; }
  .regime-discl { font-size: 12px; }
  .rg-bar { height: 11px; }
  .rg-bar-cap { font-size: 12px; }

  /* 前瞻展望：字放大、條變粗,手機好讀 */
  .ol-summary { font-size: 14px; line-height: 1.7; }
  .ol-h { flex-basis: 56px; font-size: 14px; }
  .ol-blk-head { font-size: 12.5px; }
  .ol-tag { font-size: 12px; }
  .ol-ud { height: 16px; }
  .ol-legend { font-size: 12.5px; }
  .ol-chip i { width: 11px; height: 11px; }
  .ol-ret { font-size: 13px; }
  .ol-discl { font-size: 12px; }

  /* 建議行動 / 提示 文字放大 */
  .trigger-action-desc { font-size: 15px; }
  .trigger-note { font-size: 14px; }

  /* 停利 / 追蹤停利 表：整桌塞進螢幕，不再左右捲 */
  .trigger-stops { overflow-x: visible; padding: 10px 8px; }
  .trigger-stops-table { min-width: 0; width: 100%; font-size: 14px; }
  .trigger-stops-table th,
  .trigger-stops-table td { padding: 7px 5px; }
  .trigger-stops-table th:first-child,
  .trigger-stops-table td:first-child { padding-left: 2px; }
  .trigger-stops-table th:last-child,
  .trigger-stops-table td:last-child { padding-right: 2px; }

  /* 推薦表欄位多 (8 欄)：保留全部數據，改用單獨橫捲、字級維持可讀 */
  .reco-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .reco-table { min-width: 440px; font-size: 14px; }

  footer { font-size: 13px; }

  /* 訊號摘要 grid 改 1 欄 */
  .signal-summary-list { grid-template-columns: 1fr !important; }
}

/* 極小螢幕 (< 380px, eg. iPhone SE) — 收一點但維持可讀 */
@media (max-width: 379px) {
  .brand strong { font-size: 15px; }
  .quote-price .qp-main { font-size: 22px; }
  .strat-chk { padding: 7px 11px; }
  .seg-btn { padding: 8px 11px; }

  /* 表格再窄一點以塞滿 ~320px，仍不橫向捲 */
  .trigger-stops-table { font-size: 13px; }
  .trigger-stops-table th,
  .trigger-stops-table td { padding: 6px 3px; }
  .reco-table { font-size: 13px; }
}

/* ── 基本面快照 strip (報價區下方) ── */
.fund-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  font-size: 14px;
  padding-top: 2px;
}
.fund-strip .fs-k { color: var(--muted); font-size: 13px; margin-right: 2px; }
.fund-strip .fs-sep { color: var(--muted); margin: 0 6px; opacity: 0.5; }

/* ── 基本面篩選器 ── */
.screener-controls { margin-bottom: 10px; }
#screenerTable tbody tr.screener-row { cursor: pointer; }
#screenerTable tbody tr.screener-row:hover { background: rgba(15, 23, 42, 0.05); }

@media (min-width: 1024px) {
  .fund-strip { grid-column: 1 / -1; }
}

/* ── 消息面 (籌碼買賣超 + 公告/新聞) ── */
.chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 8px 2px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.chip-date { font-size: 12px; }
.chip-item { display: inline-flex; align-items: baseline; gap: 4px; color: var(--muted-strong); font-variant-numeric: tabular-nums; }
.chip-item .chip-k { color: var(--muted); font-size: 12px; }
.chip-buy { color: var(--up-strong); }
.chip-sell { color: var(--down-strong); }

.news-list { display: flex; flex-direction: column; }
.news-row { padding: 9px 2px; border-bottom: 1px solid var(--line-2); }
.news-row:last-child { border-bottom: none; }
.news-head { display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; }
.news-badge {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: var(--radius-sm);
}
.news-badge.ann { color: var(--gold); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); }
.news-badge.new { color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(88, 166, 255, 0.3); }
.news-title { color: var(--text); font-size: 14px; text-decoration: none; }
a.news-title:hover { color: var(--accent); text-decoration: underline; }
.news-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; padding-left: 2px; font-size: 12px; color: var(--muted); }
.news-src { color: var(--muted-strong); }
.news-empty { padding: 16px 2px; font-size: 13px; text-align: center; }

/* ──────────────────────────────────────────────────────────────
   市場雷達 (radar.html) — .radar-* 專屬樣式
   溫度計 (SVG 儀表 + 廣度分布條) / 今日訊號 / 型態轉變 / 評等榜
   色彩慣例:紅=漲/買/多、綠=跌/賣/空 (台股);評等與型態 pill 的
   背景色一律來自 API (rating_levels / /api/regimes),不在此寫死
   ────────────────────────────────────────────────────────────── */
.radar-nav { color: var(--accent); text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.radar-nav:hover { text-decoration: underline; }

/* 標題列 (資料日期 / 掃描數 / 重新整理) */
.radar-meta { flex-wrap: wrap; row-gap: 6px; }
.radar-title { font-size: 15px; font-weight: 700; flex-shrink: 0; }
.radar-meta-info { font-size: 12.5px; flex: 1; min-width: 160px; }
.radar-meta-info b { color: var(--text); font-variant-numeric: tabular-nums; }

/* 載入中 / 錯誤狀態 */
.radar-status { display: flex; align-items: center; gap: 12px; padding: 18px 16px; font-size: 14px; }
/* hidden 屬性需勝過上面的 display:flex,否則 renderAll() 的 statusBox.hidden=true 不會收掉 spinner
   (作者樣式蓋過 UA 的 [hidden]{display:none});比照 .combobox-panel[hidden] 的做法 */
.radar-status[hidden] { display: none !important; }
.radar-status .btn-primary { margin-top: 10px; }
.radar-spinner {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%;
  animation: radar-spin 0.9s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

/* 區塊標題 */
.radar-h2 { font-size: 15px; font-weight: 600; color: var(--muted-strong); margin: 2px 2px 10px; display: flex; align-items: baseline; gap: 8px; }
.radar-h2 .muted { font-size: 12px; font-weight: 400; }

/* ① 市場溫度計:儀表 + 兩條廣度分布 */
.radar-thermo { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.radar-gauge-wrap { flex: 0 1 250px; min-width: 210px; text-align: center; }
.radar-gauge-wrap svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }
.radar-gauge-cap { font-size: 13px; margin-top: 4px; }
.radar-gauge-cap b { font-size: 16px; }
.radar-breadth-wrap { flex: 1 1 320px; min-width: 240px; }
.radar-breadth-title { font-size: 12px; margin-bottom: 5px; }
.radar-bb {
  display: flex; height: 14px; width: 100%;
  border-radius: 4px; overflow: hidden;
  background: var(--panel-3);
}
.radar-bb-seg { display: block; height: 100%; }
.radar-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.radar-legend .lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.radar-legend b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }

/* pill / badge */
.radar-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.radar-sig {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid;
}
.radar-sig.buy { color: var(--up-strong); border-color: var(--up); background: rgba(214, 47, 40, 0.10); }
.radar-sig.sell { color: var(--down-strong); border-color: var(--down); background: rgba(26, 138, 68, 0.10); }

/* 表格 (沿用全站 table 基礎樣式,僅縮小字級/間距) */
.radar-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.radar-table thead th { font-size: 11px; padding: 8px 8px; white-space: nowrap; }
.radar-table tbody td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; white-space: nowrap; }
.radar-table .sym { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: var(--accent); }
.radar-sec { color: var(--muted); font-size: 11.5px; }
.radar-row { cursor: pointer; }
.radar-empty td { text-align: center; color: var(--muted); padding: 22px; white-space: normal; }
.radar-pos { color: var(--up); }
.radar-neg { color: var(--down); }
.radar-rt-num { font-size: 11px; font-variant-numeric: tabular-nums; }
.radar-chg { white-space: nowrap; }
.radar-arrow { color: var(--muted); margin: 0 5px; }

/* 評等榜:可排序表頭 */
.radar-table th.sortable { cursor: pointer; user-select: none; }
.radar-table th.sortable:hover { color: var(--text); }
.radar-table th.sort-asc::after { content: " ▲"; font-size: 9px; color: var(--accent); }
.radar-table th.sort-desc::after { content: " ▼"; font-size: 9px; color: var(--accent); }

/* 52週位置迷你橫條 (左=52週低點(綠) → 右=52週高點(紅),台股慣例) */
.radar-52w { display: inline-flex; align-items: center; gap: 6px; }
.radar-52w-track {
  position: relative; width: 56px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(26, 138, 68, 0.40), var(--panel-3) 50%, rgba(214, 47, 40, 0.40));
}
.radar-52w-mark {
  position: absolute; top: -2px; margin-left: -2px;
  width: 4px; height: 10px; border-radius: 2px;
  background: var(--text); box-shadow: 0 0 0 1px #fff;
}
.radar-52w-txt { font-size: 11px; color: var(--muted); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* 顯示全部 (~2,300 列) 按鈕 */
.radar-showall {
  display: block; width: 100%; margin-top: 8px; padding: 9px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--accent); font-size: 13px; cursor: pointer; min-height: var(--tap-sm);
}
.radar-showall:hover { background: var(--panel-3); }
/* 同 .radar-status:hidden 需勝過上面的 display:block,否則「顯示全部」鈕 btn.hidden=true 收不掉 */
.radar-showall[hidden] { display: none !important; }