* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, "Microsoft JhengHei", sans-serif;
  /* 呼應登入頁角色主視覺：藍天 → 暖陽 → 寺廟金，淺色為主 */
  background:
    radial-gradient(circle at 80% 4%, rgba(255, 214, 130, .45) 0%, transparent 38%),
    radial-gradient(circle at 8% 92%, rgba(201, 160, 80, .14) 0%, transparent 45%),
    linear-gradient(180deg, #bfe3f5 0%, #dcedf5 28%, #f2efe2 62%, #f6ecd2 100%);
  background-attachment: fixed;
  color: #2d3142;
  margin: 0;
  padding: 24px;
}

@media (max-width: 600px) {
  body {
    padding: 14px;
  }
}

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0;
  background: radial-gradient(circle at 50% 20%, #2a2412 0%, #14151c 45%, #0a0b0f 100%);
}

.login-box {
  position: relative;
  background: linear-gradient(180deg, #1d1f2b 0%, #161821 100%);
  padding: 80px 32px 36px;
  border-radius: 16px;
  width: min(340px, 90vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 175, 90, .15);
  text-align: center;
}

.avatar-ring {
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c873, #a9762f);
  padding: 4px;
  box-shadow: 0 4px 20px rgba(212, 175, 90, .45), 0 0 0 6px #14151c;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

h1 {
  font-size: 22px;
  margin: 0 0 4px;
  text-align: center;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #f0d589, #c9a050);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 看板標題：淺色背景需要較深的金色才有對比 */
.dash-title {
  font-size: 22px;
  margin: 0 0 4px;
  text-align: center;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #b8860b, #8a6410);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 積極/保守雙方塊切換頁籤 */
.variant-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
}

.variant-tab {
  padding: 6px 18px;
  border-radius: 16px;
  background: #ece6d4;
  color: #6b6f5f;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.variant-tab.active {
  background: #b8860b;
  color: #fff;
}

.subtitle {
  color: #8a8d99;
  font-size: 13px;
  margin: 0 0 24px;
  letter-spacing: 2px;
}

.login-box input {
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid #33363f;
  background: #0f1117;
  color: #fff;
  box-sizing: border-box;
  font-size: 14px;
}

.login-box input:focus {
  outline: none;
  border-color: #c9a050;
}

.login-box button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #e8c873, #b8862f);
  color: #1a1208;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.login-box button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(212, 175, 90, .35);
}

.error {
  color: #ff6b6b;
  text-align: center;
  margin-bottom: 14px;
  font-size: 14px;
}

.meta {
  color: #5b6472;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.stale-banner {
  background: linear-gradient(90deg, rgba(184, 134, 11, .14), rgba(184, 134, 11, .05));
  border: 1px solid rgba(184, 134, 11, .35);
  color: #8a6410;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fffdf8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(120, 100, 60, .08);
}

th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #ece5d4;
  white-space: nowrap;
}

th {
  background: #f3efe2;
  color: #6b6f5f;
  font-size: 13px;
}

tr:hover {
  background: #faf6ea;
}

tr.flash-highlight {
  background: #ffe9a8 !important;
  transition: background 1.5s;
}

.type-b { color: #0d9488; font-weight: bold; }
.type-a { color: #c2730f; }
.pump   { color: #dc2626; font-weight: bold; }
.rank-seq { color: #a8a298; text-align: center; width: 1%; }

/* 股號超連結（2026-06-22新增）：連到CMoney個股討論區看K線/籌碼/討論，
   方便點一下就能進一步評估，不用另外搜尋 */
.stock-link {
  color: #2d3142;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dashed rgba(45, 49, 66, .4);
}
.stock-link:hover {
  color: #0d9488;
  border-bottom-color: #0d9488;
}
.empty  { text-align: center; color: #8b8f7e; padding: 24px; }

/* 即將除權息標籤（2026-06-21新增）：跟⚠炒分開，除息是機制性價格缺口
   不是投機炒作，用不同顏色避免混為一談 */
.exdiv-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 6px;
  background: #b45309;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}

/* 連續入選天數小標籤——只在第2天以上才顯示（第1天/首次入選不額外標示），
   只放數字不放文字，手機版才不會太長 */
.day-badge {
  display: inline-block;
  min-width: 16px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 8px;
  background: #6b7280;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

/* 積極方塊Type C/D（2026-06-28新增）：價量PIN選股+籌碼面PIN確認穩定度，
   C=雙訊號確認、D=僅價量訊號未經籌碼面確認（風險較高），見docs/backtest_log.md */
.confirm-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: bold;
}

.logout {
  float: right;
  color: #6b6f5f;
  text-decoration: none;
  font-size: 14px;
}

.panel {
  margin-bottom: 28px;
}

/* 兩個小面板並排（2026-07-09 版面重整：市場投機熱度＋模型IC趨勢） */
.panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .panel-row { grid-template-columns: 1fr; gap: 0; }
}
/* 2026-07-15 兩指標面板（市場投機熱度／模型IC趨勢）等寬等高對齊：
   內容卡改填滿面板寬（原 heat-gauge 是 fit-content 導致左框窄）、格子 stretch 等高。 */
.panel-row-metrics { align-items: stretch; }
.panel-row-metrics > .panel { display: flex; flex-direction: column; }
.panel-row-metrics .heat-gauge {
  flex: 1; width: 100%; max-width: none; margin: 0;
  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
}
.panel-row-metrics .ic-chart-wrap {
  flex: 1; width: 100%; max-width: none; margin: 0;
  display: flex; flex-direction: column; box-sizing: border-box;
}
.panel-row-metrics .ic-chart-svg { height: auto; flex: 1 1 auto; min-height: 150px; }
/* 排名表並排（B+A / C+D）：表格較寬，斷點提早收合；表內既有 .table-wrap 橫向捲動 */
@media (max-width: 1300px) {
  .panel-row-tables { grid-template-columns: 1fr; gap: 0; }
}

.panel h2 {
  font-size: 15px;
  color: #6b6f5f;
  margin: 0 0 12px;
  letter-spacing: 1px;
}

/* PIN排名表格的「上次推薦日」動態篩選選單 */
.filter-bar {
  margin-bottom: 10px;
  font-size: 13px;
  color: #6b6f5f;
}

.filter-bar select {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #c9c2a8;
  background: #fff;
  font-size: 13px;
}

/* 全市場熱力圖：分頁導覽（總覽 + 各產業，RWD可換行）*/
.treemap-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.treemap-tab {
  background: #2a2d35;
  color: #cfd2da;
  border: 1px solid #3a3e48;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

.treemap-tab:hover {
  background: #3a3e48;
}

.treemap-tab.active {
  background: #ffd166;
  color: #2d3142;
  border-color: #ffd166;
  font-weight: bold;
}

/* 全市場熱力圖（單一巢狀treemap：產業→股票兩層；台股慣例：紅漲綠跌） */
.treemap-root {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #14161b;
}

.treemap-tile {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #14161b;
  overflow: hidden;
  cursor: default;
  transition: outline .15s;
}

.treemap-tile.is-candidate {
  outline: 2px solid #ffd166;
  outline-offset: -2px;
  cursor: pointer;
  z-index: 1;
}

/* 大格子：斗大字置中（呼應參考站的呈現方式） */
.treemap-tile.tt-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 中等格子：字級放大但維持靠左上，避免擠在小空間時跑出格子 */
.treemap-tile.tt-compact {
  display: block;
}

/* 文字寬度永遠跟著格子走，超出就自動換行，不溢出蓋到隔壁格子（字夠大時
   單行常常裝不下，寧可換行也不要溢出或被ellipsis截斷看不到完整資訊） */
.tt-id, .tt-pct {
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
  line-height: 1.15;
}

.tt-id {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding: 3px 4px 0;
}

.tt-pct {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  padding: 0 4px;
}

/* 整體勝率（單一大儀表） */
.gauge-single {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, #fffdf8, #fbf6e9);
  border: 1px solid rgba(184, 134, 11, .18);
  border-radius: 12px;
  padding: 16px;
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(120, 100, 60, .10);
}

.winrate-label {
  font-size: 14px;
  color: #6b6f5f;
  margin-top: 6px;
}

.winrate-simple .gauge-sub {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* 市場投機熱度儀表（2026-07-05 取代整體勝率） */
.heat-gauge {
  padding: 20px 40px 24px;
  max-width: 92vw;
  box-sizing: border-box;
  text-align: center;
}

.heat-svg {
  width: 220px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.heat-needle {
  stroke: #3d3d3d;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.heat-pivot {
  fill: #3d3d3d;
}

.heat-axis {
  font-size: 11px;
  fill: #8a8d7f;
}

.heat-number {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin-top: 4px;
}

.heat-zone {
  font-size: 22px;
  font-weight: 700;
}

.heat-gauge .gauge-sub {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.gauge-sub {
  font-size: 12px;
  color: #8b8f7e;
  margin-top: 2px;
}

/* 即時溫度計（Top 9 網格，SVG 與文字左右並排） */
/* auto-fit讓中小螢幕自然決定欄數（4/5/6欄都合理），但用max-width限制最寬
   不超過7欄能容納的寬度——寬螢幕下auto-fit會自然停在7欄，Top14剛好變成
   7+7兩排整齊，不會在超寬螢幕排成8欄讓14張變8+6不對稱。比固定欄數更
   穩，中小螢幕仍保留responsive彈性，不用額外加中間斷點。 */
.live-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  max-width: 1262px;  /* 7 * 170px + 6 * 12px gap */
  margin: 0 auto;  /* 寬螢幕下置中，不要貼左留一大塊右側空白 */
}

.gauge-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: linear-gradient(160deg, #fffdf8, #fbf6e9);
  border: 1px solid rgba(120, 100, 60, .12);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(120, 100, 60, .08);
  position: relative;
}

/* Type A(短線)/Type B(波段)底色區分，沿用既有排名表格.type-a/.type-b的
   顏色（橙=A，青=B），讓即時溫度計一眼看出哪些是短線、哪些是波段picks
   （2026-06-21，呼應PIN排名表格改成分Type A/B段顯示的同一個設計決定） */
.gauge-card.gauge-type-a {
  background: linear-gradient(160deg, #fffaf0, #fdf0d8);
  border-color: rgba(194, 115, 15, .25);
}
.gauge-card.gauge-type-b {
  background: linear-gradient(160deg, #f3fbf9, #e3f4f0);
  border-color: rgba(13, 148, 136, .25);
}
.gauge-type-tag {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gauge-type-a .gauge-type-tag { background: #c2730f; }
.gauge-type-b .gauge-type-tag { background: #0d9488; }

.chip-light-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.chip-light-svg {
  width: 36px;
  height: 80px;
}

.chip-light-svg .light {
  fill: #d8d3c2;
  opacity: .3;
}

.chip-light-svg.tier-green .light-green,
.chip-light-svg.tier-yellow .light-yellow,
.chip-light-svg.tier-red .light-red {
  opacity: 1;
}

.chip-light-svg.tier-green .light-green { fill: #16a34a; filter: drop-shadow(0 0 4px rgba(22, 163, 74, .65)); }
.chip-light-svg.tier-yellow .light-yellow { fill: #d97706; filter: drop-shadow(0 0 4px rgba(217, 119, 6, .65)); }
.chip-light-svg.tier-red .light-red { fill: #dc2626; filter: drop-shadow(0 0 4px rgba(220, 38, 38, .65)); }

.chip-light-label {
  font-size: 11px;
  font-weight: bold;
  color: #6b6f5f;
  margin-top: 2px;
  white-space: nowrap;
}

.gauge-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gauge-label {
  font-size: 14px;
  font-weight: bold;
  color: #3a382e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.gauge-price {
  font-size: 14px;
  color: #44403c;
  margin-top: 2px;
}

.day-change {
  font-weight: bold;
  margin-left: 4px;
}

.day-change.pos { color: #b91c1c; }
.day-change.neg { color: #047857; }

.gauge-value {
  font-size: 19px;
  font-weight: bold;
  margin-top: -4px;
}

.gauge-value.pos { color: #b91c1c; }
.gauge-value.neg { color: #047857; }

.gauge-card .gauge-sub {
  font-size: 14px;
}

/* IC 趨勢折線圖 */
.ic-chart-wrap {
  background: linear-gradient(160deg, #fffdf8, #fbf6e9);
  border: 1px solid rgba(184, 134, 11, .18);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(120, 100, 60, .10);
}

.ic-chart-svg {
  width: 100%;
  height: 140px;
  display: block;
}

.ic-chart-meta {
  font-size: 12px;
  color: #8b8f7e;
  margin-top: 8px;
}

.ic-chart-meta .pos { color: #b91c1c; font-weight: bold; }
.ic-chart-meta .neg { color: #047857; font-weight: bold; }

/* AI 籌碼解析卡片 */
.ai-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.ai-card {
  background: linear-gradient(160deg, #fffdf8, #fbf6e9);
  border: 1px solid rgba(184, 134, 11, .18);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(120, 100, 60, .08);
}

.ai-card-label {
  font-size: 12px;
  color: #a8730c;
  font-weight: bold;
  margin-bottom: 6px;
}

.ai-card-text {
  font-size: 13px;
  color: #4a4a3f;
  line-height: 1.5;
}

/* ── 小螢幕響應式（手機/平板） ───────────────────────────────────────── */
@media (max-width: 600px) {
  h1 {
    font-size: 18px;
  }

  .meta {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .panel {
    margin-bottom: 20px;
  }

  .panel h2 {
    font-size: 13px;
  }

  .tt-id, .tt-pct {
    font-size: 10px;
  }

  .ai-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ai-card {
    padding: 12px 14px;
  }

  .live-gauges {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .chip-light-svg {
    width: 30px;
    height: 66px;
  }

  th, td {
    padding: 8px 10px;
    font-size: 13px;
  }

  .login-box {
    padding: 72px 24px 28px;
  }

  .avatar-ring {
    width: 104px;
    height: 104px;
    top: -52px;
  }
}

/* B1+B3 觀察名單面板 */
.watchlist-meta {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}
/* 過熱告誡行（2026-07-10）：描述性提醒非訊號，橘字提高辨識但不用紅（避免當成警報） */
.overheat-note {
  color: #b45309;
}
.bonus-score.score-0 { color: #666; }
.bonus-score.score-1 { color: #c8a800; }
.bonus-score.score-2 { color: #f0c040; }
.bonus-score.score-3 { color: #50e060; }

/* 股癌看空警示（Step 2b，純顯示不動分數） */
.kol-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1d6f42;
  background: #e3f4ea;
  border: 1px solid #9fd6b4;
  border-radius: 4px;
  cursor: help;
}

/* 投機流注意/處置徽章（2026-07-11）：資訊揭露非篩選。回放參考：投機流∩處置
   期間 P15 lift 2.47x、當日注意 1.98x——注意/處置族群恰是大波動集中區，
   徽章提示的是流動性限制與監管風險，不是「別碰」 */
.alert-notice {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
  cursor: help;
}
.alert-punish {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #dc2626;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
  cursor: help;
}

/* AI 雙卡群組標題（2026-07-12 布局卡/進攻卡並存） */
.ai-card-group-title {
  margin: 14px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #7a5c1e;
}
.ai-card-group-title:first-of-type { margin-top: 4px; }
.ai-card-subject {
  margin-left: 8px;
  font-size: 14px;
  color: #333;
}
.ai-card-groupdesc {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
}

/* 投機流暴走格徽章（2026-07-14）：range60>0.8+ATR擴張>1.5+量比>2＝5.1x 妖股慣性 */
.surge-badge {
  margin-left: 3px;
  font-size: 13px;
  cursor: help;
}

/* 籌碼燈號 v2（2026-07-17）：成員資格降級小字 */
.chip-mem {
  font-size: 10px;
  color: #9a9d8f;
  margin-top: 1px;
  text-align: center;
}

/* 2026-07-18 積極榜歸因標籤（backtest_log「積極榜歸因標籤＋分數語義修正」）：
   高分來源型別小標，tooltip 帶前二特徵貢獻；pv-raw 是 PR 旁的模型原始分 */
.attr-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 4px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
  cursor: help;
}
.pv-raw {
  margin-left: 5px;
  color: #9ca3af;
  font-size: 11px;
  cursor: help;
}
.weak-board-note {
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fffbeb;
  border: 1px solid #f2d38b;
  color: #8a6d1a;
  font-size: 13px;
}

/* 2026-07-21 量縮型警示（attr_type_bt 初驗：fwd10 -4.1%/勝率30%，8月複驗） */
.attr-tag.attr-warn {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}