/* ══════════════════════════════════════════════════
   手機版 UI  ─  三竹資訊風格
   設計原則：大字清晰、舒適行高、固定頂底、內容捲動
   ══════════════════════════════════════════════════ */

/* ── 全域字型，基礎排版 ── */
:root {
  --safe-top    : env(safe-area-inset-top,    0px);
  --safe-bottom : env(safe-area-inset-bottom, 0px);
  --header-h    : var(--safe-top);   /* navbar 已移除，只留安全區 */
  --bottom-h    : calc(56px + var(--safe-bottom));
  /* 字型 */
  --fs-xs   : 12px;
  --fs-sm   : 14px;
  --fs-md   : 16px;
  --fs-lg   : 18px;
  --fs-xl   : 23px;
  --fs-xxl  : 29px;
  --row-h   : 46px;
  --radius-m: 10px;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-size: 15px !important;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-x pan-y;
}
* { touch-action: manipulation; }

/* ── 安全區佔位 ── */
#safeAreaTop {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--safe-top);
  background: var(--bg2);
  z-index: 200;
}

/* navbar / nav-tabs 移除 */
.navbar, .nav-tabs, .nav-brand, .search-wrap { display: none !important; }

/* ══════════════════════════════════════
   #app-main：主內容容器
   ══════════════════════════════════════ */
#app-main {
  position: fixed !important;
  top: var(--header-h) !important;
  bottom: var(--bottom-h) !important;
  left: 0; right: 0;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 10;
}

/* ══════════════════════════════════════
   股票標題列（緊湊，最大化圖表空間）
   ══════════════════════════════════════ */
#stockHeader {
  position: relative !important;
  flex-shrink: 0 !important;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 6px 12px 0 !important;
}
#stockHeader.hidden { display: none !important; }

/* 第一列：名稱 + 市場狀態 + 股價並排 */
.sh-row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
}

/* 市場狀態（整合在 header 裡） */
.sh-market { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.market-dot { width: 7px !important; height: 7px !important; border-radius: 50%; }
.market-dot.open   { background: #3fb950; }
.market-dot.closed { background: #8b949e; }
.market-text { font-size: var(--fs-xs) !important; color: var(--text2); }

/* 個股子頁籤列 */
.stock-sub-tabs {
  display: flex !important;
  width: 100% !important;
  border-bottom: 1px solid var(--border);
  margin: 0 !important;
  gap: 0 !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.stock-sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab-btn {
  flex: 1 !important;
  padding: 6px 4px !important;
  font-size: var(--fs-md) !important;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sub-tab-btn.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* 股票名稱 + 代號 */
.stock-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sname  { font-size: 20px; font-weight: 700; }
.sid    { font-size: var(--fs-sm) !important; color: var(--text2); }
.stock-sector-badge { font-size: var(--fs-xs) !important; padding: 1px 6px !important; }

/* 股價區 — 三竹風格：大數字 + 漲跌幅 */
.stock-price-block  { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.price-row          { display: flex; align-items: baseline; gap: 6px; }
.price-sub-row      { display: flex; align-items: center; gap: 6px; }
.price  { font-size: var(--fs-xxl) !important; font-weight: 800; padding: 0 4px !important; border-radius: 4px !important; }
.change { font-size: var(--fs-sm) !important; font-weight: 600; }
.header-date { font-size: var(--fs-xs) !important; color: var(--text2); }
/* 成交量：跟日期同一列，緊接在後 */
.hdr-vol-wrap { display: inline-flex; align-items: baseline; gap: 3px; margin-left: 6px; }
.hdr-vol-lbl  { font-size: var(--fs-xs) !important; color: var(--text2); }
.hdr-vol-val  { font-size: var(--fs-sm) !important; font-weight: 700; color: var(--text1); }

/* 時開高低收量列（三竹風格） */
.sh-ohlcv {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 2px 0 !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  width: 100% !important;
}
.ohlcv-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 2px 0 !important;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.ohlcv-item:last-child { border-right: none !important; }
.ohlcv-lbl {
  font-size: 13px !important;
  color: var(--text2) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.ohlcv-val {
  font-size: var(--fs-md) !important;   /* 16px — 比之前的 14px 大 */
  font-weight: 700 !important;
  color: var(--text1) !important;
  letter-spacing: -0.3px;
}
.ohlcv-date { font-size: var(--fs-sm) !important; color: #e6b800 !important; } /* 日期黃色 */
.ohlcv-up   { color: #f75757 !important; }
.ohlcv-dn   { color: #26c281 !important; }

/* K線控制列 — 行動版已移入 chartWrap，此列保持隱藏 */
#chartControls { display: none !important; }
.chart-controls {
  margin: 3px 0 0 !important;
  padding: 3px 0 !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.period-btns {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.period-btns::-webkit-scrollbar { display: none; }
.period-btn {
  padding: 3px 10px !important;
  font-size: var(--fs-xs) !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
  height: 24px !important;
  line-height: 18px !important;
}
.ma-toggle-bar { gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ma-toggle-bar::-webkit-scrollbar { display: none; }
.ma-btn { padding: 2px 8px !important; font-size: var(--fs-xs) !important; height: 22px !important; flex-shrink: 0; }
.refresh-status { display: none !important; }  /* 隱藏倒計時，省空間 */

/* ══════════════════════════════════════
   Tab 頁面：在 app-main 裡自動填滿剩餘空間
   ══════════════════════════════════════ */
.tab-page {
  position: relative !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding: 0 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}
.tab-page.hidden,
#tab-chart.hidden,
#tab-intraday.hidden,
#tab-chip.hidden,
#tab-broker.hidden,
#tab-mainforce.hidden,
#tab-scanner.hidden,
#tab-breakout.hidden,
#tab-backtest.hidden { display: none !important; }

/* 全局查股列 — #app-main 的 flex 子項，不在任何捲動區內
   貼到安全區正下方，零 top padding，整個 App 內容順勢往上推 */
.placeholder-bar-wrap {
  flex-shrink: 0 !important;
  padding: 0 8px 3px !important;
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border);
  z-index: 15;
}
.placeholder-bar-wrap .ph-search-wrap {
  margin: 0 !important;
  max-width: none !important;
  padding: 3px 10px !important;
}
.placeholder-bar-wrap .ph-search-btn {
  padding: 5px 14px !important;
}

/* ══════════════════════════════════════
   K線圖表頁 — 填滿 tab-page 剩餘空間
   ══════════════════════════════════════ */

/* K線 tab 可往下捲動查看更多資訊 */
#tab-chart {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-overflow-scrolling: touch !important;
}
.chart-wrap {
  flex-shrink: 0 !important;
  flex-direction: column !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  margin-bottom: 0 !important;
}
#chartWrap:not(.hidden) {
  display: flex !important;
}

/* 時間框架列 — 超緊湊，讓圖表更大 */
.kline-tf-row {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  gap: 0 !important;
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
}
.kline-tf-row::-webkit-scrollbar { display: none; }

.kf-btn {
  flex-shrink: 0 !important;
  padding: 2px 11px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text2, #8b949e) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.kf-btn.active {
  color: #58a6ff !important;
  font-weight: 700 !important;
}
.kf-period-sep {
  flex: 1 !important;
  min-width: 8px !important;
}
.kf-period-btns {
  display: flex !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}
.kf-period-btns .period-btn {
  padding: 2px 7px !important;
  font-size: 13px !important;
  color: var(--text2, #8b949e) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}
.kf-period-btns .period-btn.active {
  color: #58a6ff !important;
  border-color: rgba(88,166,255,0.5) !important;
  font-weight: 600 !important;
}

/* MA toggle — 單行超薄 */
.ma-toggle-bar {
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  scrollbar-width: none !important;
  padding: 3px 8px !important;
  background: var(--bg) !important;
  height: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 10 !important;
}
.ma-toggle-bar::-webkit-scrollbar { display: none; }
.ma-btn {
  padding: 1px 7px !important;
  font-size: 10px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* 指標切換欄 — 已合併至均線列，隱藏此列 */
#indicatorToggleBar { display: none !important; }

#candleChart {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 620px !important;      /* 比手機可用高度稍高，讓頁面可捲動看底部指標面板 */
  min-height: 480px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════
   江波圖頁 — 可往下捲動（走勢圖 + 五檔 + 內外盤）
   ══════════════════════════════════════ */
#tab-intraday {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-overflow-scrolling: touch !important;
}
#intradayPlaceholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
#intradayPlaceholder.hidden { display: none !important; }
#intradayWrap {
  flex-shrink: 0 !important;
  flex-direction: column !important;
}
#intradayWrap:not(.hidden) {
  display: flex !important;
}

/* 走勢圖 */
.intraday-date-label {
  font-size: var(--fs-xs) !important;
  padding: 3px 10px !important;
  color: var(--text2);
  min-height: 18px;
  flex-shrink: 0;
}
#intradayChart {
  width: 100% !important;
  height: 280px !important;    /* 固定高度，讓下方區塊可見 */
  min-height: 200px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* 走勢圖下方區塊（五檔 / 內外盤）*/
.intraday-below-section {
  flex-shrink: 0 !important;
  border-top: 4px solid var(--bg3) !important;
  background: var(--bg2) !important;
}
.ibs-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px 6px !important;
  border-bottom: 1px solid var(--border) !important;
}
.ibs-title   { font-size: var(--fs-md) !important; font-weight: 700; color: var(--text1); }
.ibs-time    { font-size: var(--fs-xs) !important; color: var(--text2); }
.ibs-summary { font-size: var(--fs-xs) !important; color: var(--text2); }
.ibs-vol-row {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-top: 1px solid var(--border) !important;
}

/* 子頁：五檔買賣超 */
.quote5-header {
  padding: 10px 14px !important;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.quote5-title  { font-size: var(--fs-md) !important; font-weight: 700; }
.quote5-time   { font-size: var(--fs-sm) !important; margin-left: 8px; }
.quote5-wrap   { flex: 1; overflow-y: auto; }
.quote5-table  { font-size: var(--fs-md) !important; width: 100%; }
.quote5-table th {
  padding: 10px 8px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600;
}
.quote5-table td { padding: 11px 8px !important; }
.q5-bprice, .q5-aprice { font-size: var(--fs-lg) !important; font-weight: 700; }
.q5-bvol,   .q5-avol   { font-size: var(--fs-sm) !important; }
.q5-cur-left  { font-size: var(--fs-xl) !important; font-weight: 800; padding: 10px 10px !important; }
.q5-cur-right { font-size: var(--fs-md) !important; font-weight: 600; padding: 10px 10px !important; }
.q5-total-bid, .q5-total-ask { font-size: var(--fs-md) !important; padding: 9px 10px !important; }

/* 子頁：內外盤 */
.bidask-header {
  padding: 10px 14px !important;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.bidask-title   { font-size: var(--fs-md) !important; font-weight: 700; }
.bidask-summary { font-size: var(--fs-sm) !important; margin-left: 8px; }
.bidask-scroll  { flex: 1; overflow-y: auto; }
.bidask-table   { font-size: var(--fs-sm) !important; width: 100%; }
.bidask-table th { padding: 10px 8px !important; font-size: var(--fs-sm) !important; font-weight: 600; }
.bidask-table td { padding: 11px 8px !important; font-size: var(--fs-sm) !important; }
.bidask-realtime-vol { padding: 10px 14px !important; flex-shrink: 0; border-top: 1px solid var(--border); }
.brt-label { font-size: var(--fs-sm) !important; color: var(--text2); }
.brt-value { font-size: var(--fs-xl) !important; font-weight: 700; margin-left: 8px; }

/* ══════════════════════════════════════
   三大法人頁
   ══════════════════════════════════════ */
.chip-toolbar {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border);
}
.chip-days-label { font-size: var(--fs-sm) !important; }
.chip-days-select { font-size: var(--fs-sm) !important; padding: 4px 8px !important; }
.chip-section-inner { padding: 10px 12px !important; }
#chipCanvas { max-height: 160px !important; }
.chip-summary { gap: 8px !important; margin-top: 10px !important; }
.chip-card { padding: 10px 12px !important; border-radius: var(--radius-m) !important; }
.chip-card .cc-label { font-size: var(--fs-xs) !important; }
.chip-card .cc-value { font-size: var(--fs-lg) !important; }

/* 每日明細表 */
.chip-table-wrap { padding: 0 12px 12px !important; }
.chip-table-wrap .section-title { font-size: var(--fs-md) !important; margin: 12px 0 8px !important; }
.chip-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-m); }
.chip-detail-table th { padding: 9px 10px !important; font-size: var(--fs-xs) !important; }
.chip-detail-table td { padding: 8px 10px !important; font-size: var(--fs-sm) !important; }

/* ══════════════════════════════════════
   分點券商頁
   ══════════════════════════════════════ */
.broker-days-bar {
  padding: 10px 14px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border);
}
.broker-days-label { font-size: var(--fs-sm) !important; }
.broker-day-btn {
  padding: 6px 14px !important;
  font-size: var(--fs-sm) !important;
  border-radius: 16px !important;
  min-height: 32px !important;
}
.broker-stats-row {
  flex-direction: row !important;   /* 橫排：左邊主力動向 + 右邊指標 */
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px 12px !important;
}
/* 左側主力動向：固定窄欄 */
.broker-direction-box {
  flex: 0 0 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  padding: 8px 8px !important;
  border-radius: var(--radius-m) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
}
.bd-sub {
  font-size: 10px !important;
  color: var(--text2) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
/* 近N日 大買 — 同一行，純 inline，不用 flex */
.bd-dir-line {
  white-space: nowrap !important;
  font-size: 12px !important;
  color: var(--text2) !important;
  text-align: center !important;
  display: block !important;
}
.bd-direction {
  font-size: 22px !important;
  font-weight: 900 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
/* 右側指標格：填滿剩餘空間 */
.broker-metrics {
  flex: 1 1 0 !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}
.bm-item { padding: 6px 8px !important; border-radius: var(--radius-m) !important; }
.bm-label { font-size: 9px !important; }
.bm-value { font-size: 12px !important; font-weight: 700; margin-top: 2px !important; }

.broker-side-tabs { padding: 0 12px !important; }
.broker-side-btn {
  padding: 10px 0 !important;
  font-size: var(--fs-md) !important;
  font-weight: 600;
}
.broker-table { width: 100% !important; }
.broker-table th {
  padding: 9px 12px !important;
  font-size: var(--fs-xs) !important;
  white-space: nowrap;
}
.broker-table td {
  padding: 11px 12px !important;
  font-size: var(--fs-sm) !important;
}

/* ══════════════════════════════════════
   主力動向頁
   ══════════════════════════════════════ */
.mf-header-bar { padding: 10px 14px !important; }
.mf-title { font-size: var(--fs-lg) !important; font-weight: 700; }
.mf-today-date { font-size: var(--fs-sm) !important; }
.mf-sub-tabs {
  padding: 6px 12px 8px !important;
  gap: 8px !important;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}
.mf-sub-tabs::-webkit-scrollbar { display: none; }
.mf-sub-btn {
  padding: 7px 16px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600;
  border-radius: 18px !important;
  flex-shrink: 0;
  min-height: 34px !important;
}
.mf-days-bar {
  padding: 4px 12px 8px !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.mf-days-bar::-webkit-scrollbar { display: none; }
.mf-day-btn {
  padding: 5px 13px !important;
  font-size: var(--fs-sm) !important;
  border-radius: 14px !important;
  flex-shrink: 0;
  min-height: 30px !important;
}
.mf-days-label { font-size: var(--fs-sm) !important; white-space: nowrap; }
.mf-chart { height: 220px !important; margin: 0 !important; }
.mf-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px !important;
}
.mf-table th { padding: 9px 10px !important; font-size: var(--fs-xs) !important; white-space: nowrap; }
.mf-table td { padding: 9px 10px !important; font-size: var(--fs-sm) !important; white-space: nowrap; }

/* ══════════════════════════════════════
   低檔爆大量 / 突破選股頁
   ══════════════════════════════════════ */
.scanner-header { padding: 10px 12px 4px !important; }
.scanner-header .section-title { font-size: var(--fs-lg) !important; }
.count-badge { font-size: var(--fs-xs) !important; }

.scanner-pattern-btns {
  gap: 8px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}
.scanner-pattern-btn, .bk-mode-btn {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 0 !important;
  padding: 9px 8px !important;
  border-radius: var(--radius-m) !important;
}
.spb-label { font-size: var(--fs-sm) !important; font-weight: 700; }
.spb-desc  { font-size: var(--fs-xs) !important; }

.scanner-pattern-desc {
  font-size: var(--fs-xs) !important;
  line-height: 1.7 !important;
  margin-bottom: 6px !important;
}
.spd-item { padding: 8px 12px !important; }

.scanner-sector-btns { gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; }
.scanner-sector-btn {
  padding: 6px 14px !important;
  font-size: var(--fs-sm) !important;
  border-radius: 18px !important;
  min-height: 32px !important;
}

.scanner-params { gap: 10px !important; flex-wrap: wrap !important; padding-bottom: 8px !important; }
.scanner-params label { font-size: var(--fs-sm) !important; gap: 8px !important; }
.scanner-params input[type=range] { width: 100px !important; }

.backtest-toggle-btn {
  font-size: var(--fs-sm) !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-m) !important;
}
#scanBtn, #bkScanBtn {
  width: 100% !important;
  padding: 13px !important;
  font-size: var(--fs-lg) !important;
  border-radius: var(--radius-m) !important;
  margin-top: 4px !important;
}

.scan-status { font-size: var(--fs-sm) !important; padding: 10px 14px !important; }

/* 選股結果卡片 */
.scan-results {
  display: grid !important;
  grid-template-columns: 1fr !important;   /* 單欄：防止右側截斷 */
  gap: 10px !important;
  padding: 10px 10px 16px !important;
}
.result-card {
  padding: 12px !important;
  border-radius: var(--radius-m) !important;
  border-left-width: 4px !important;
}
.rc-top  { margin-bottom: 6px !important; align-items: center !important; }
.rc-top > div:first-child { min-width: 0; flex: 1; overflow: hidden; }
.rc-id   { font-size: var(--fs-md) !important; font-weight: 700; }
.rc-name { font-size: var(--fs-xs) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; display: inline-block; vertical-align: middle; }
.rc-price { font-size: var(--fs-lg) !important; padding: 2px 6px !important; flex-shrink: 0 !important; margin-left: 8px !important; }
.rc-badges { gap: 5px !important; flex-wrap: wrap !important; margin-top: 6px !important; }
.badge { font-size: var(--fs-xs) !important; padding: 3px 8px !important; }

/* 突破選股專用 */
.bk-period-btns { gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; }
.bk-period-btn, .bk-consol-btn {
  padding: 7px 14px !important;
  font-size: var(--fs-sm) !important;
  border-radius: var(--radius-m) !important;
  min-height: 34px !important;
}
.bk-hint { font-size: var(--fs-xs) !important; margin-top: 5px !important; }

/* ══════════════════════════════════════
   底部導覽列
   ══════════════════════════════════════ */
.bottom-nav {
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-h) !important;
  padding-bottom: var(--safe-bottom) !important;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  display: flex !important;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.bottom-nav-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding-top: 9px;
  height: 58px;
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bottom-nav-btn.active { color: var(--accent); }
.bottom-nav-btn svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .15s;
}
.bottom-nav-ingot {
  font-size: 22px;
  line-height: 22px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.bottom-nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3px;
}

/* 突破區間 label 字數較多，略縮 */
.bottom-nav-btn[data-tab="breakout"] .bottom-nav-label { font-size: 9px; }

/* ── 突破區間 金黃立體箭頭 ── */
.breakout-icon {
  width: 22px; height: 22px;
  fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
/* 陰影層：深棕金，偏下偏右 */
.bi-shadow {
  stroke: #7a4800;
  stroke-width: 3.2;
  transform: translate(0.4px, 0.6px);
}
/* 主體：金黃漸層感（用兩層疊出） */
.bi-main {
  stroke: #d4860a;
  stroke-width: 2.4;
}
/* 高光層：亮金，偏細，偏上 */
.bi-shine {
  stroke: #ffe066;
  stroke-width: 1.1;
  transform: translate(-0.3px, -0.4px);
}
/* active 狀態加亮 */
.bottom-nav-btn.active .bi-main  { stroke: #f5c518; }
.bottom-nav-btn.active .bi-shine { stroke: #fff5a0; }
.bottom-nav-btn.active .bi-shadow{ stroke: #8b5500; }

/* ══════════════════════════════════════
   快速查股欄（選股 / 突破選股頁）
   ══════════════════════════════════════ */
.quick-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 6px 10px;
  margin-bottom: 4px;
}
.quick-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px !important;
  padding: 4px 0;
  min-width: 0;
}
.quick-search-bar input::placeholder { color: var(--text2); font-size: var(--fs-sm); }
.quick-search-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════
   Placeholder 查股框
   ══════════════════════════════════════ */
/* hidden 優先度修正：mobile.css 的 display:flex !important 會蓋掉 style.css 的 .hidden，
   用 double-class 選擇器（specificity 20）強制 none */
.placeholder-msg.hidden { display: none !important; }

.placeholder-msg {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 40px 24px !important;
  text-align: center;
  color: var(--text2);
  font-size: var(--fs-md) !important;
}
.placeholder-msg p {
  font-size: var(--fs-lg) !important;
  color: var(--text2);
  margin: 0;
}
.ph-search-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 320px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 8px 12px;
}
.ph-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px !important;
  padding: 2px 0;
  min-width: 0;
}
.ph-search-input::placeholder { color: var(--text2); font-size: var(--fs-sm); }
.ph-search-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: var(--fs-sm) !important;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
/* 在 placeholder-bar-wrap 內的查詢按鈕更緊湊 */
.placeholder-bar-wrap .ph-search-btn {
  padding: 6px 14px !important;
  font-size: var(--fs-sm) !important;
}

/* ── 搜尋 autocomplete ── */
.search-ac-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.search-ac-wrap .ph-search-input {
  width: 100%;
  box-sizing: border-box;
}
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #1c2128;
  border: 1px solid #30363d;
  border-top: none;
  border-radius: 0 0 10px 10px;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.search-dropdown.hidden { display: none !important; }
.sd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #21262d;
}
.sd-item:last-child { border-bottom: none; }
.sd-item:active, .sd-item:hover { background: #2d333b; }
.sd-id   { font-size: var(--fs-md) !important; font-weight: 700; color: var(--accent); min-width: 44px; }
.sd-name { font-size: var(--fs-md) !important; color: var(--text1); }

/* ══════════════════════════════════════
   籌碼訊號欄（底部共用薄條）
   ══════════════════════════════════════ */
.signal-bar {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  background: #161b22 !important;
  border-top: 1px solid #30363d !important;
  padding: 0 8px !important;
  overflow: hidden !important;
}
.signal-bar.hidden { display: none !important; }

.signal-bar-items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  width: 100% !important;
}
.signal-bar-items::-webkit-scrollbar { display: none !important; }

.sb-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.sb-tag.bull { background: rgba(34,197,94,0.15) !important; border: 1px solid rgba(34,197,94,0.4) !important; }
.sb-tag.bear { background: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.4) !important; }
.sb-tag.warn { background: rgba(234,179,8,0.15) !important; border: 1px solid rgba(234,179,8,0.4) !important; }

.sb-label {
  color: #8b949e !important;
  font-size: 10px !important;
}
.sb-val {
  font-weight: 600 !important;
  font-size: 11px !important;
}
.sb-tag.bull .sb-val { color: #4ade80 !important; }
.sb-tag.bear .sb-val { color: #f87171 !important; }
.sb-tag.warn .sb-val { color: #facc15 !important; }

/* ══════════════════════════════════════
   共用細節
   ══════════════════════════════════════ */
.loading-mask { z-index: 500 !important; }
#loadingText  { font-size: var(--fs-md) !important; }
.tbl-loading, .tbl-empty { font-size: var(--fs-sm) !important; padding: 16px !important; }

/* ══════════════════════════════════════
   字體放大（行動版）
   ══════════════════════════════════════ */
.chip-toggle-btn { font-size: 14px !important; padding: 3px 12px !important; }
.ind-separator { font-size: 14px !important; }

/* ══════════════════════════════════════
   MA 下拉選單
   ══════════════════════════════════════ */
.ma-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background: var(--bg3, #21262d) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent;
}
.ma-dropdown-btn:active { opacity: 0.75; }
.ma-dd-arrow { font-size: 11px !important; color: var(--text2); }

.ma-dropdown-panel {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--bg2, #0d1117);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 6px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  min-width: 150px;
}
.ma-dropdown-panel.show { display: flex; }

.ma-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  -webkit-tap-highlight-color: transparent;
}
.ma-dd-item:active { background: rgba(255,255,255,0.07); }
.ma-dd-cb {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--accent, #58a6ff);
  cursor: pointer;
  flex-shrink: 0;
}
.ma-dd-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ma-dd-text {
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════
   指標下拉選單
   ══════════════════════════════════════ */
.ind-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: rgba(88,166,255,0.15) !important;
  border: 1px solid rgba(88,166,255,0.35) !important;
  border-radius: 6px !important;
  color: #58a6ff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent;
  margin-left: auto !important;
}
.ind-dropdown-btn:active { opacity: 0.75; }
.ind-dd-arrow { font-size: 11px !important; }

.ind-dropdown-panel {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--bg2, #0d1117);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  min-width: 90px;
}
.ind-dropdown-panel.show { display: block; }
.ind-dd-item {
  display: block !important;
  width: 100% !important;
  padding: 12px 18px !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text2) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}
.ind-dd-item:last-child { border-bottom: none !important; }
.ind-dd-item.active {
  color: #58a6ff !important;
  font-weight: 700 !important;
  background: rgba(88,166,255,0.12) !important;
}
.ind-dd-item:active { background: rgba(255,255,255,0.07) !important; }

/* 均線列右側的 KD/RSI/MACD 指標切換按鈕 */
.ind-tab-btn {
  flex-shrink: 0 !important;
  padding: 3px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  margin-left: 4px !important;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ind-tab-btn.active {
  color: #58a6ff !important;
  border-color: #58a6ff !important;
  background: rgba(88,166,255,0.12) !important;
  font-weight: 700 !important;
}
.ind-tab-btn:active { opacity: 0.7; }

/* K線圖指標浮動按鈕 — 放在指標面板區域（底部），完全不擋K棒 */
.ind-chart-floating {
  position: absolute !important;
  bottom: 5% !important;    /* 位於指標面板（bottom 11%~4%）中央，不擋K棒/量/籌碼 */
  right: 60px !important;   /* 留出右側 Y 軸空間 */
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: rgba(88,166,255,0.18) !important;
  border: 1px solid rgba(88,166,255,0.4) !important;
  border-radius: 5px !important;
  color: #58a6ff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4 !important;
}
.ind-chart-floating:active { opacity: 0.75; }

/* ══════════════════════════════════════
   股票標題欄 - 新佈局
   ══════════════════════════════════════ */
.stock-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}
.sname {
  font-size: 20px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.st-sub-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.st-sub-row .sid {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.st-sub-row .sh-market {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin-left: 0 !important;
}
.st-sector-row {
  display: flex !important;
  align-items: center !important;
  min-height: 20px !important;
}
.stock-sector-badge {
  font-size: 12px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  background: rgba(88,166,255,0.12) !important;
  color: var(--text2) !important;
  border: 1px solid rgba(88,166,255,0.2) !important;
}
.hdr-vol-lbl { font-size: var(--fs-sm) !important; color: var(--text2); }
.hdr-vol-val { font-size: var(--fs-md) !important; font-weight: 700 !important; color: var(--text1) !important; }