/*
 * InvestWatch — 深色系儀表板樣式
 * 手機優先（先寫手機版，再用 min-width 往上加桌面版）
 */

:root {
  --bg:          #0e1420;
  --bg-soft:     #151d2c;
  --card:        #182132;
  --card-hover:  #1e2a3e;
  --line:        #263349;
  --text:        #e6edf7;
  --text-dim:    #8fa2bd;
  --text-faint:  #64748b;

  --up:          #ff6b6b;   /* 台股習慣：漲用紅 */
  --down:        #4ade80;   /* 跌用綠 */
  --flat:        #8fa2bd;

  --gold:        #e5b567;
  --accent:      #5b9cf8;
  --warn:        #f7b955;
  --error:       #ff5f56;

  --low:         #4ade80;   /* 相對低檔區 */
  --mid:         #8fa2bd;   /* 中性 */
  --high:        #ff9f43;   /* 相對高檔區 */

  --radius: 14px;
  --gap: 12px;
}

* { box-sizing: border-box; }

/* HTML 的 hidden 屬性必須贏過任何 display 設定。
   沒有這一行的話，像 .modal { display:flex } 會讓 <div hidden> 照樣顯示出來
   —— 2026-09-01 就踩到：對話框在頁面一載入就空白地開著。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
               "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 14px 60px;
}

/* ---------------------------------------------------------- 頁首 */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 20, 32, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap { padding-top: 10px; padding-bottom: 0; }

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.brand h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0.5px;
}
.brand .brand-dot { color: var(--gold); }
.brand .tagline { color: var(--text-faint); font-size: 12px; }

/* 更新狀態列 */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 9px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.chip.ok    { color: var(--down); border-color: rgba(74, 222, 128, .35); }
.chip.bad   { color: var(--error); border-color: rgba(255, 95, 86, .45);
              background: rgba(255, 95, 86, .09); }
.chip.slot  { color: var(--accent); border-color: rgba(91, 156, 248, .35); }
.chip.time  { color: var(--text); }

/* 主選單 */
.nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  padding: 8px 13px;
  font-size: 14px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------- 區塊標題 */

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-faint);
  text-transform: uppercase;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------------------------------------------------------- 卡片 */

.cards {
  display: grid;
  grid-template-columns: 1fr;      /* 手機一排一張 */
  gap: var(--gap);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.card.is-open { border-color: rgba(91, 156, 248, .5); }
.card.is-error { border-color: rgba(255, 95, 86, .45); }

.card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
}
.card-head:hover { background: var(--card-hover); }

.card-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  font-size: 15px;
  font-weight: 600;
}
.card-sub {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
}
.card-sub .caret { white-space: nowrap; display: inline-block; }

.card-price-box { text-align: right; }

.card-price {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.card-price .cur { font-size: 12px; color: var(--text-faint); margin-left: 3px; }

.card-change {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* 迷你走勢線 */
.spark {
  grid-column: 1 / -1;
  height: 34px;
  margin-top: 2px;
}
.spark svg { width: 100%; height: 100%; display: block; }

/* 買賣價（黃金／匯率） */
.pair {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.pair .kv {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-dim);
}
.pair .kv b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 位置燈號 */
.signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;   /* 名稱再長也不要把燈號擠成兩行 */
  flex-shrink: 0;
}
.signal .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.signal.low     { color: var(--low);  border-color: rgba(74, 222, 128, .4);
                  background: rgba(74, 222, 128, .10); }
.signal.mid     { color: var(--mid);  border-color: var(--line);
                  background: var(--bg-soft); }
.signal.high    { color: var(--high); border-color: rgba(255, 159, 67, .4);
                  background: rgba(255, 159, 67, .10); }
.signal.unknown { color: var(--text-faint); border-color: var(--line); }

.caret {
  color: var(--text-faint);
  font-size: 11px;
  transition: transform .18s;
}
.card.is-open .caret { transform: rotate(180deg); }

/* ---------------------------------------------------------- 展開區 */

.card-body {
  display: none;
  border-top: 1px solid var(--line);
  padding: 14px;
  background: var(--bg-soft);
}
.card.is-open .card-body { display: block; }

.chart-box {
  position: relative;
  height: 230px;
  margin-bottom: 6px;
}
@media (min-width: 700px) { .chart-box { height: 280px; } }

.chart-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.chart-legend i {
  display: inline-block;
  width: 14px;
  height: 2px;
  vertical-align: middle;
  margin-right: 5px;
}

/* 指標格 */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 560px) { .metrics { grid-template-columns: repeat(3, 1fr); } }

.metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
.metric .k { font-size: 11px; color: var(--text-faint); }
.metric .v {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.metric .n { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }

/* 52 週位置條 */
.range-bar {
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.range-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  margin: 9px 0 6px;
  background: linear-gradient(90deg,
    rgba(74,222,128,.55) 0%, rgba(74,222,128,.55) 25%,
    rgba(143,162,189,.35) 25%, rgba(143,162,189,.35) 75%,
    rgba(255,159,67,.55) 75%, rgba(255,159,67,.55) 100%);
}
.range-track .pin {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--text);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--card);
}
.range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.range-note { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }

/* 條塊價目表（實體黃金） */
.bar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 2px;
}
.bar-table th, .bar-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-table th {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: .5px;
}
.bar-table td:first-child, .bar-table th:first-child { text-align: left; }
.bar-table tr:last-child td { border-bottom: 0; }

/* 錯誤／備註 */
.err-box {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 95, 86, .10);
  border: 1px solid rgba(255, 95, 86, .35);
  color: #ffb4ae;
  font-size: 12px;
}
.err-box b { color: var(--error); }
.note-box {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--warn);
}

/* ---------------------------------------------------------- 資料新舊的標示（js/freshness.js） */

.fresh-carried { grid-column: 1 / -1; }
.fresh-badge {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1.5;
}
/* 黃：排定的更新沒有跑到，這是舊資料 */
.fresh-badge.stale   { color: var(--warn);  border-color: rgba(247, 185, 85, .45); background: rgba(247, 185, 85, .08); }
/* 紅：無法判斷新舊，價格不顯示 */
.fresh-badge.error   { color: var(--error); border-color: rgba(255, 95, 86, .45);  background: rgba(255, 95, 86, .08); }
/* 灰：週末本來就不掛牌／不開盤，週五的數字就是現在的牌價，不是舊資料 */
.fresh-badge.weekend { color: var(--text-dim); background: rgba(143, 162, 189, .06); }

/* ---------------------------------------------------------- 免責與頁尾 */

.disclaimer {
  margin-top: 26px;
  padding: 13px 15px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.7;
}
.disclaimer b { color: var(--warn); }

.site-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

/* ---------------------------------------------------------- 空殼頁 */

.placeholder {
  margin-top: 30px;
  padding: 34px 20px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.placeholder .big { font-size: 32px; margin-bottom: 8px; }
.placeholder h2 { margin: 0 0 6px; font-size: 17px; }
.placeholder p { margin: 0 auto; max-width: 460px; color: var(--text-dim); font-size: 13.5px; }
.placeholder .soon {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--warn);
  font-size: 12px;
}

.loading, .fatal {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}
.fatal { color: #ffb4ae; }

/* ---------------------------------------------------------- 桌面版 */

@media (min-width: 720px) {
  body { font-size: 15.5px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .brand h1 { font-size: 21px; }
}

@media (min-width: 1060px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* 展開中的卡片佔滿整列，圖表才看得清楚 */
  .card.is-open { grid-column: 1 / -1; }
}

/* 很窄的手機：頁首再省一點高度，把畫面留給行情 */
@media (max-width: 479px) {
  .brand .tagline { display: none; }
  .brand h1 { font-size: 18px; }
  .card-price { font-size: 20px; }
}

/* 表格太寬時自己橫向捲動，不要把卡片撐爆 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .bar-table { min-width: 340px; }

/* ============================================================ 歷史頁 */

.hist-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 4px;
}

/* ---------------------------------------------------------- 月曆選日期 */

.cal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 11px 11px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.cal-title {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cal-nav {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { color: var(--text); background: var(--card-hover); }
.cal-nav:disabled { opacity: .3; cursor: default; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-wd {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-faint);
  padding-bottom: 3px;
}
.cal-pad { aspect-ratio: 1; }

.cal-day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.cal-day.is-empty { opacity: .35; }

.cal-day.has-data {
  color: var(--text);
  background: var(--bg-soft);
  border-color: var(--line);
  cursor: pointer;
  font-weight: 600;
}
.cal-day.has-data:hover { background: var(--card-hover); border-color: var(--accent); }
.cal-day.has-data.is-holiday { color: var(--text-dim); background: rgba(100, 116, 139, .16); }
.cal-day.has-data.is-active {
  border-color: var(--gold);
  background: rgba(229, 181, 103, .14);
  color: var(--text);
}

.cal-dots { display: flex; gap: 2px; height: 4px; align-items: center; }
.cal-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-dot.bad { background: var(--error); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--text-faint);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 4px; }

.cal-jump {
  width: 100%;
  margin-top: 9px;
  padding: 7px 10px;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.cal-jump:hover { background: var(--card-hover); }

/* 時段分頁 */
.slot-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.slot-tabs::-webkit-scrollbar { display: none; }

.slot-tab {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.slot-tab:hover { color: var(--text); background: var(--card-hover); }
.slot-tab.active {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

/* ============================================================ 報告本體 */

.rp-head {
  padding: 14px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.rp-title { margin: 0 0 3px; font-size: 18px; }
.rp-meta { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; font-size: 12px; }
.rp-note-line { margin-top: 8px; font-size: 12.5px; color: var(--warn); }

.rp-section { margin-bottom: 22px; }
.rp-section-title {
  margin: 0 0 3px;
  font-size: 14.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.rp-subtitle { font-size: 11.5px; color: var(--text-faint); margin-bottom: 9px; }

/* 報價列 */
.rp-quotes { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .rp-quotes { grid-template-columns: repeat(2, 1fr); } }

.rp-quote {
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.rp-quote.is-error { border-color: rgba(255, 95, 86, .45); }

.rp-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rp-quote-name { font-weight: 600; font-size: 14px; }
.rp-quote-price {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rp-quote-price .cur { font-size: 11px; color: var(--text-faint); margin-left: 3px; }
.rp-chg { font-size: 12.5px; margin-left: 8px; font-weight: 600; }
.rp-chg.up { color: var(--up); }
.rp-chg.down { color: var(--down); }
.rp-chg.flat { color: var(--flat); }
.rp-fail { color: var(--error); font-size: 13px; font-weight: 600; }

.rp-err {
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 95, 86, .10);
  border: 1px solid rgba(255, 95, 86, .3);
  color: #ffb4ae;
  font-size: 11.5px;
}
.rp-dim { color: var(--text-faint); }

.rp-kv { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rp-compare { margin-top: 7px; font-size: 12px; }
.rp-compare.up { color: var(--up); }
.rp-compare.down { color: var(--down); }
.rp-compare.flat { color: var(--text-dim); }

/* 觀察句 */
.rp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rp-note {
  display: flex;
  gap: 9px;
  padding: 9px 11px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.6;
}
.rp-note-icon { flex: 0 0 auto; font-size: 11px; padding-top: 3px; }
.rp-note.up { border-left-color: var(--up); }
.rp-note.up .rp-note-icon { color: var(--up); }
.rp-note.down { border-left-color: var(--down); }
.rp-note.down .rp-note-icon { color: var(--down); }
.rp-note.warn { border-left-color: var(--error); background: rgba(255, 95, 86, .07); }
.rp-note.warn .rp-note-icon { color: var(--error); }
.rp-note.info { border-left-color: var(--accent); }
.rp-note.info .rp-note-icon { color: var(--accent); }

/* 報告表格 */
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 380px; }
.rp-table th, .rp-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.rp-table th {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: .4px;
  white-space: nowrap;
}
.rp-table tr:last-child td { border-bottom: 0; }
.rp-table .al-left { text-align: left; }
.rp-table .al-right { text-align: right; }
.rp-table .al-center { text-align: center; }
.rp-table .up { color: var(--up); }
.rp-table .down { color: var(--down); }
.rp-table .err { color: var(--error); }
.rp-table .sig-low { color: var(--low); }
.rp-table .sig-mid { color: var(--mid); }
.rp-table .sig-high { color: var(--high); }
.rp-table .sig-unknown { color: var(--text-faint); }

.rp-text p { margin: 0 0 8px; font-size: 13.5px; color: var(--text-dim); }

/* 當日快照（可收合） */
.snap-box {
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.snap-box summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  user-select: none;
}
.snap-box summary:hover { background: var(--card-hover); }
.snap-box > div { padding: 0 14px 14px; }

/* 桌面：月曆固定在左側 */
@media (min-width: 900px) {
  .hist-layout { grid-template-columns: 260px 1fr; align-items: start; }
  .hist-side { position: sticky; top: 150px; }
}

/* 儀表板頂部的「最新報告」入口 */
.rp-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 14px 0 2px;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.rp-banner:hover { background: var(--card-hover); text-decoration: none; }
.rp-banner-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(229, 181, 103, .13);
  border: 1px solid rgba(229, 181, 103, .4);
  color: var(--gold);
  white-space: nowrap;
}
.rp-banner-title { font-size: 14px; font-weight: 600; }
.rp-banner-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rp-banner-go { margin-left: auto; font-size: 12.5px; color: var(--accent); white-space: nowrap; }

/* 時段分頁上的實際產生時間 */
.slot-time {
  margin-left: 6px;
  font-size: 11px;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

/* Grid 子項預設 min-width:auto，裡面有寬表格時會把整欄撐爆、
   造成整頁橫向捲動。設成 0 才會乖乖讓表格自己在框內捲。 */
.hist-main, .hist-side, .card, .rp-quote { min-width: 0; }
.rp-table .stale { color: var(--warn); }

/* 歷史頁：缺少報告的時段（灰色、不可點） */
.slot-tab.is-missing {
  color: var(--text-faint);
  border-style: dashed;
  cursor: default;
  opacity: .65;
}
.slot-tab.is-missing:hover { background: var(--card); color: var(--text-faint); }

/* ---------------------------------------------------------- 手動刷新 */

.contents { display: contents; }

.refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.refresh-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
  background: var(--card-hover);
}
.refresh-btn:disabled { opacity: .6; cursor: default; }

.refresh-icon { display: inline-block; font-size: 13px; line-height: 1; }
.refresh-btn.is-busy .refresh-icon { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.refresh-msg { font-size: 11.5px; }
.refresh-msg.dim { color: var(--text-faint); }
.refresh-msg.ok  { color: var(--down); }
.refresh-msg.bad { color: var(--error); }

@media (prefers-reduced-motion: reduce) {
  .refresh-btn.is-busy .refresh-icon { animation: none; opacity: .5; }
}

/* ============================================================ 我的紀錄 / 設定 */

.privacy-note {
  margin: 14px 0 4px;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(74, 222, 128, .07);
  border: 1px solid rgba(74, 222, 128, .3);
  border-left: 3px solid var(--down);
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.65;
}
.privacy-note b { color: var(--text); }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
}
.panel + .panel { margin-top: 12px; }
.panel-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--text-dim); line-height: 1.7; }
.panel-lead b { color: var(--text); }

/* ---- 總覽 ---- */

.overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px) { .overview { grid-template-columns: 1fr 300px; } }

.ov-nums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start;
}
.ov-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
}
.ov-label { font-size: 11.5px; color: var(--text-faint); }
.ov-value {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  margin-top: 2px;
}
.ov-value.up { color: var(--up); }
.ov-value.down { color: var(--down); }
.ov-unit { font-size: 11px; color: var(--text-faint); margin-left: 4px; font-weight: 400; }
.ov-note { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.ov-pie {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px;
}
.pie-box { position: relative; height: 180px; }
.pie-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 11px;
  font-size: 12px;
  color: var(--text-dim);
}
.pie-key { display: inline-flex; align-items: center; gap: 5px; }
.pie-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pie-key b { color: var(--text); font-variant-numeric: tabular-nums; }
.pie-note { font-size: 11px; color: var(--text-faint); width: 100%; }

/* ---- 持倉表 ---- */

.holdings { min-width: 720px; }
.cell-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; font-weight: 400; }
.cell-sub.up { color: var(--up); }
.cell-sub.down { color: var(--down); }
.nowrap { white-space: nowrap; }

.act {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.act-buy  { color: var(--up);   border-color: rgba(255, 107, 107, .35); }
.act-sell { color: var(--down); border-color: rgba(74, 222, 128, .35); }
.act-dca  { color: var(--accent); border-color: rgba(91, 156, 248, .35); }

/* ---- 按鈕 ---- */

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.btn {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.btn:hover { color: var(--text); background: var(--card-hover); border-color: var(--accent); }
.btn.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1408;
  font-weight: 600;
}
.btn.btn-primary:hover { filter: brightness(1.08); background: var(--gold); }
.btn.danger { color: var(--error); border-color: rgba(255, 95, 86, .4); }
.btn.danger:hover { background: rgba(255, 95, 86, .12); border-color: var(--error); color: var(--error); }
.btn.full { width: 100%; margin-top: 8px; }

.mini {
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.mini:hover { color: var(--text); border-color: var(--accent); }
.mini.danger { color: var(--error); }
.mini.danger:hover { border-color: var(--error); background: rgba(255, 95, 86, .1); }

/* ---- 表單 ---- */

.f { display: block; margin-bottom: 13px; }
.f-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.f-hint { display: block; font-size: 11px; color: var(--text-faint); margin-top: 4px; line-height: 1.6; }
.f-hint b { color: var(--text-dim); }
.f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.f input, .f select, .panel input, .panel select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 15px;             /* 16px 以下手機會自動放大，15px 加上 -webkit 設定剛好 */
}
.f input:focus, .f select:focus, .panel input:focus {
  outline: none;
  border-color: var(--accent);
}
.f select { appearance: none; -webkit-appearance: none; }

.pat-row { display: flex; gap: 8px; }
.pat-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pat-row .btn { flex: 0 0 auto; padding: 10px 14px; }

.result {
  margin-top: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-dim);
}
.result.ok  { border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .08); }
.result.bad { border-color: rgba(255, 95, 86, .4); background: rgba(255, 95, 86, .08);
              color: #ffb4ae; }
.result b { color: var(--text); }

.howto { font-size: 13px; color: var(--text-dim); line-height: 1.8; }
.howto ol { margin: 0; padding-left: 20px; }
.howto li { margin-bottom: 6px; }
.howto code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 12px;
}
.warn-line { color: var(--warn); font-size: 12.5px; margin-top: 10px; }

/* ---- 對話框 ---- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 10, 18, .72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 620px) { .modal { align-items: center; padding: 20px; } }

.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
}
@media (min-width: 620px) { .modal-card { border-radius: 16px; } }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-x {
  background: none;
  border: 0;
  color: var(--text-faint);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.modal-x:hover { color: var(--text); }

.form { padding: 15px 16px 4px; overflow-y: auto; }

.modal-foot {
  display: flex;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.modal-foot .btn { flex: 1; padding: 12px 16px; }


/* ---------------------------------------------------------- 解鎖畫面 */

.lock-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lock-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.lock-icon { font-size: 40px; margin-bottom: 6px; }
.lock-card h2 { margin: 0 0 6px; font-size: 19px; }
.lock-card p { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.7; }
.lock-card input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  text-align: center;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.lock-card input:focus { outline: none; border-color: var(--gold); }
.lock-err { color: var(--error); font-size: 12.5px; min-height: 18px; margin-top: 8px; }
.lock-hint {
  font-size: 11.5px !important;
  color: var(--text-faint) !important;
  margin-top: 14px !important;
  text-align: left;
}

/* ============================================================ 分析（A1-5）：卡片裡的「分析」摺疊區 */

.ana {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.ana > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 600;
  font-size: 13.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ana > summary::-webkit-details-marker { display: none; }
.ana > summary::before { content: '▸'; color: var(--text-faint); font-size: 11px; }
.ana[open] > summary::before { content: '▾'; }
.ana-hint { font-weight: 400; font-size: 11.5px; color: var(--text-faint); }
.ana-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); }
.ana-group { margin-top: 10px; }
.ana-title { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; letter-spacing: .3px; }
.ana-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.ana-row:last-child { border-bottom: 0; }
.ana-k { color: var(--text-dim); min-width: 118px; }
.ana-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ana-tag, .ana-note, .ana-dates, .ana-foot { font-size: 11px; color: var(--text-faint); }
.ana-note { flex-basis: 100%; }
.ana-dates { margin-top: 6px; }
.ana-foot { margin-top: 10px; }
.ana-empty { font-size: 12.5px; color: var(--text-dim); padding: 6px 0; }
/* 距高點橫條：位置不是評分——刻度從 0 到該標的歷史最大回檔，顏色用中性的強調色 */
.ana-bar {
  height: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.ana-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.ana-bar-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
@media (max-width: 479px) {
  .ana-k { min-width: 100%; }
}

/* ============================================================ 一眼看懂（A1-6 起）：圖示＋狀態詞＋規則＋白話
   圖示只是狀態的圖像，狀態詞一定並列；顏色跟著狀態走但不是唯一的線索。幾格並排、各看各的，不加總。 */

.ana-linkrow { padding: 6px 0 2px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ana-link { font-weight: 600; }

.glance-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0 6px;
}
@media (min-width: 760px) {
  .glance-row { grid-template-columns: repeat(3, 1fr); }
}
.glance {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 10px 12px 11px;
}
.glance-title { font-size: 12px; color: var(--text-dim); letter-spacing: .3px; }
.glance-main { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px; }
.glance-icon { display: inline-flex; color: var(--text-dim); }
.glance-word { font-size: 19px; font-weight: 700; line-height: 1.3; }
.glance-because { font-size: 12.5px; color: var(--text); }
.glance-rule { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.glance[data-state="low"]  .glance-icon, .glance[data-state="low"]  .glance-word { color: var(--low); }
.glance[data-state="mid"]  .glance-icon, .glance[data-state="mid"]  .glance-word { color: var(--mid); }
.glance[data-state="high"] .glance-icon, .glance[data-state="high"] .glance-word { color: var(--high); }
.glance[data-state="na"]   .glance-icon, .glance[data-state="na"]   .glance-word { color: var(--text-faint); }
.glance[data-aspect="quota"] .glance-word { font-size: 16px; }

/* 每個數字下面那一行白話 */
.plain-line { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }

/* 名詞：點一下在旁邊展開一句解釋（不靠滑鼠懸停，手機也能用） */
button.term[data-term] {   /* 屬性選擇器是為了贏過分析分頁自己的 .ana-page button */
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--text-dim);
  border-radius: 0;
  padding: 0;
  cursor: help;
}
button.term[data-term]:hover { background: none; color: var(--accent); }
.term-def {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  margin: 4px 0 2px;
  white-space: normal;
  max-width: 320px;
}

/* ============================================================ 面向的圖示列（A1-7）
   每張卡在標題列與展開區之間多一條：位置、風險、成本各一個圖示＋狀態詞；點圖示展開那個面向的數字、規則、白話。
   位置用色點（跟燈號同一組顏色）、風險與成本用天氣；狀態詞永遠並列，顏色與圖示都不是唯一的線索。 */

.card-glance {
  border-top: 1px solid var(--line);
  padding: 8px 14px 9px;
}
.asp-wait, .asp-missing {
  display: flex;
  align-items: center;
  min-height: 28px;
  font-size: 11.5px;
  color: var(--text-faint);
}
.asp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.asp-row + .asp-missing { min-height: 0; margin-top: 6px; }
button.asp {
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 10px 3px 7px;
  cursor: pointer;
}
button.asp:hover { background: var(--card-hover); }
button.asp[aria-expanded="true"] { border-color: rgba(91, 156, 248, .6); background: var(--card-hover); }
.asp-icon { display: inline-flex; color: var(--text-dim); }
.asp-icon svg { width: 16px; height: 16px; display: block; }
.asp-name { color: var(--text-faint); }
.asp-word { font-weight: 600; }
.asp-note { font-size: 11px; color: var(--text-faint); }
[data-state="low"]  > .asp-icon, [data-state="low"]  > .asp-word { color: var(--low); }
[data-state="mid"]  > .asp-icon, [data-state="mid"]  > .asp-word { color: var(--mid); }
[data-state="high"] > .asp-icon, [data-state="high"] > .asp-word { color: var(--high); }
[data-state="na"]   > .asp-icon, [data-state="na"]   > .asp-word,
[data-state="error"] > .asp-icon, [data-state="error"] > .asp-word,
[data-state="none"] > .asp-word { color: var(--text-faint); }
[data-state="none"] > .asp-word { font-weight: 400; }

/* 點開之後的細節：狀態、這次是哪個數字、規則，再來是每個數字與它的一行白話 */
.asp-detail {
  margin-top: 8px;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13px;
}
.asp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.asp-title { font-size: 14px; }
.asp-because { font-size: 12.5px; margin-top: 4px; }
.asp-rule { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }
.asp-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
}
.asp-k { color: var(--text-dim); min-width: 118px; }
.asp-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.asp-fnote { flex-basis: 100%; font-size: 11px; color: var(--text-faint); }
.asp-fact .plain-line, .ana-row .plain-line { flex-basis: 100%; margin-top: 0; }
.asp-facts-title { font-size: 12px; color: var(--text-dim); margin-top: 9px; }
.asp-extra { font-size: 12.5px; margin-top: 8px; }
.asp-dates { font-size: 11px; color: var(--text-faint); margin-top: 8px; }
@media (max-width: 479px) {
  .asp-k { min-width: 100%; }
}

/* 總覽表的一格：圖示＋狀態詞；不適用是灰字、沒有圖示 */
.asp-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; }
.glance-note { font-size: 12px; color: var(--text-faint); }