/* MT5 AI ARENA Dashboard — 穩定、簡潔、快、耐看（ARENA_SPEC §19）
   深色 —— 這是要開 90 天的螢幕。無外部字型，系統字體即可。 */

:root {
  --bg: #101418;
  --panel: #171d24;
  --panel2: #1e2630;
  --line: #33404f;
  --text: #d7dde5;
  /* --dim 用在 11px 標籤與註解。舊值 #7d8a99 對 --panel2 只有 4.34:1，
     小字未達 WCAG AA 4.5:1 —— 而這面板要連看 90 天。 */
  --dim: #95a1b0;        /* 5.82:1 */
  --codex: #4da3ff;      /* Codex 藍 */
  /* Claude 橙從 #ffab5e 改深。舊值與 --warn 的亮度對比只有 1.05:1，
     「Claude 的數字」與「警告狀態」在畫面上幾乎分不出來。色相能拉開的
     極限也只有 20° —— 所以顏色只是輔助，真正的辨識靠下方的符號編碼。 */
  --claude: #ff8f3f;     /* 對 --warn 亮度差 1.43，色相差 20° */
  --deepseek: #c084fc;   /* DeepSeek / Hermes 紫 */
  --up: #3fbf7f;         /* 綠漲 —— 國際外匯 / MT5 慣例 */
  --down: #ef6b78;       /* 紅跌。舊值 #e35d6a 只有 4.39:1，虧損數字看不清 */
  --warn: #f2c94c;       /* 純黃，遠離 Claude 橙 */
  --versus: #b39cff;     /* 正面對決線；原本硬編碼在 app.js 裡 */
  --intel-decision: #5aa9ff;
  --intel-thesis: #b79cff;
  --intel-execution: #49c994;
  --intel-monitoring: #f0c75e;
  --intel-history: #8c9aaa;
  --intel-risk: #ef6b78;
  --intel-target: #67d7c0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.5 "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif;
}
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
h1 { font-size: 17px; letter-spacing: .5px; }
#day-badge { color: var(--dim); font-size: 13px; font-weight: normal; }
#refreshed { margin-left: auto; color: var(--dim); font-size: 12px; }
.dashboard-period { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11px; white-space: nowrap; }
.dashboard-period select { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px; }
.period-note { margin: 0 0 12px; color: var(--dim); font-size: 11px; }

nav button, .trader-picker button {
  background: none; border: 1px solid transparent; color: var(--dim);
  padding: 6px 12px; cursor: pointer; border-radius: 6px; font-size: 13px;
}
nav button:hover, .trader-picker button:hover { color: var(--text); }
nav button.active, .trader-picker button.active {
  color: var(--text); background: var(--panel2); border-color: var(--line);
}
/* 鍵盤操作要看得見焦點 —— 原本完全沒有 focus 樣式 */
nav button:focus-visible, .trader-picker button:focus-visible,
.clickable:focus-visible, select:focus-visible, input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--codex); outline-offset: 2px;
}

main { padding: 16px 18px 60px; max-width: 1400px; margin: 0 auto; }
.tab { display: none; }
.tab.active { display: block; }

/* 卡片與網格 */
.grid { display: grid; gap: 12px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
  min-width: 0;                       /* 不讓寬表格把 grid 軌道撐爆 */
}
.card h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--dim); margin-bottom: 10px;
}

/* 數值磚 */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { background: var(--panel2); border-radius: 8px; padding: 10px 12px; }
.tile .k { font-size: 11px; color: var(--dim); }
.tile .v { font-size: 18px; font-weight: 600; margin-top: 2px; }
.tile .v small { font-size: 12px; color: var(--dim); font-weight: normal; }

/* 三層視覺權重 —— 90 天監看時，淨值與風險不該和 Token 用量一樣醒目 */
.tile.t1 { background: #24303d; }
.tile.t1 .v { font-size: 22px; }
.tile.t3 .v { font-size: 15px; font-weight: 500; }

.pos { color: var(--up); }
.neg { color: var(--down); }
.dim { color: var(--dim); }
.codex { color: var(--codex); }
.claude { color: var(--claude); }
.deepseek { color: var(--deepseek); }

/* 符號編碼：盈虧不只靠顏色。紅綠色覺辨識困難者、以及黑白列印都讀得出來。
   用 ::before 而非改 JS —— 前端渲染測試會精確比對 HTML 字串。 */
.tile .v.pos::before, td.num.pos::before { content: "▲ "; font-size: .85em; }
.tile .v.neg::before, td.num.neg::before { content: "▼ "; font-size: .85em; }

/* 表格 */
.table-wrap { overflow-x: auto; }      /* 窄螢幕時表格自己捲，頁面不橫向溢位 */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: normal; font-size: 12px; }
tr:hover td { background: var(--panel2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.quota-cell { white-space: nowrap; }
.quota-usage { display: block; font-weight: 600; }
.quota-meta { display: block; margin-top: 2px; color: var(--dim); font-size: 10px; white-space: normal; }

/* 圖表 */
.chart { width: 100%; height: 220px; display: block; }
.chart-title { font-size: 12px; color: var(--dim); margin: 4px 0 2px; }
.legend { font-size: 12px; color: var(--dim); }
.legend b { font-weight: 600; }

/* 狀態徽章。符號前綴讓狀態不必靠顏色判讀 —— Claude 橙與警告黃的
   色相只差 20°，顏色本身不是可靠的區分依據。 */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; background: var(--panel2); border: 1px solid var(--line);
}
.badge.ok { color: var(--up); border-color: var(--up); }
.badge.bad { color: var(--down); border-color: var(--down); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.ok::before { content: "✓ "; }
.badge.bad::before { content: "✕ "; }
.badge.warn::before { content: "⚠ "; }

.note { color: var(--dim); font-size: 12px; margin-top: 8px; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.excerpt {
  background: var(--panel2); border-radius: 6px; padding: 8px 10px;
  font-size: 12px; white-space: pre-wrap; max-height: 140px; overflow-y: auto;
  color: var(--dim); margin-top: 6px;
}
.clickable { cursor: pointer; }
#replay-detail { margin-top: 14px; }
.six { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.error-msg { color: var(--down); padding: 20px; }

/* ── 交易重播／稽核面板 ─────────────────────────────────────
   這裡顯示的是人要回答的問題，不把資料庫英文代碼當成介面文案。
   顏色只標示區塊用途，中文標題與狀態才是主要辨識方式。 */
.replay-guide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-left: 4px solid var(--intel-decision);
}
.replay-guide h2 { font-size: 18px; margin-bottom: 3px; }
.replay-guide p { color: var(--dim); font-size: 12px; }
.replay-legend { display: flex; gap: 8px; flex-wrap: wrap; color: var(--dim); font-size: 11px; }
.replay-legend span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; }
.replay-summary { margin-top: 12px; }
.replay-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.replay-detail-head h2 { font-size: 18px; margin-bottom: 2px; }
.replay-detail-head p { color: var(--dim); font-size: 12px; }
.replay-detail-tag {
  color: var(--intel-execution); border: 1px solid var(--intel-execution);
  border-radius: 999px; padding: 3px 9px; font-size: 11px;
}
.replay-section-label {
  color: var(--text); border-left: 3px solid var(--intel-decision);
  padding-left: 8px; margin: 4px 0 7px; font-size: 12px; font-weight: 600;
}
.replay-step {
  min-width: 0; background: var(--panel2); border: 1px solid var(--line);
  border-top: 3px solid var(--intel-history); border-radius: 8px; padding: 10px 11px;
}
.replay-step.replay-saw { border-top-color: var(--intel-thesis); }
.replay-step.replay-tools { border-top-color: var(--intel-monitoring); }
.replay-step.replay-decision { border-top-color: var(--intel-decision); }
.replay-step.replay-execution { border-top-color: var(--intel-execution); }
.replay-step.replay-result { border-top-color: var(--intel-target); }
.replay-step.replay-cost { border-top-color: var(--intel-history); }
.replay-step.replay-compare { border-top-color: var(--versus); }
.replay-step-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
}
.replay-step-title h3 {
  color: var(--text); font-size: 13px; text-transform: none;
  letter-spacing: .2px; margin: 0;
}
.replay-step-hint { color: var(--dim); font-size: 11px; }
.replay-step-icon { color: var(--intel-decision); font-size: 15px; line-height: 1; }
.replay-step.replay-saw .replay-step-icon { color: var(--intel-thesis); }
.replay-step.replay-tools .replay-step-icon { color: var(--intel-monitoring); }
.replay-step.replay-execution .replay-step-icon { color: var(--intel-execution); }
.replay-step.replay-result .replay-step-icon { color: var(--intel-target); }
.replay-action {
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
  font-size: 12px; font-weight: 600;
}
.replay-action.hold { color: var(--warn); border-color: var(--warn); }
.replay-action.active { color: var(--intel-execution); border-color: var(--intel-execution); }
.replay-action.modify { color: var(--intel-decision); border-color: var(--intel-decision); }
.replay-action.close { color: var(--down); border-color: var(--down); }
.replay-action.neutral { color: var(--dim); }
.replay-empty { color: var(--dim); font-size: 12px; padding: 7px 0; line-height: 1.6; }
.replay-step-hint + table, .replay-step-title + table { margin-top: 2px; }
.replay-value { overflow-wrap: anywhere; vertical-align: top; }
.replay-value .badge { white-space: nowrap; }
.replay-subsection { margin-top: 8px; }
.replay-subsection h4 {
  color: var(--dim); font-size: 11px; font-weight: normal; margin-bottom: 3px;
}
.replay-wake-detail .six { margin-top: 4px; }
.replay-wake-detail .replay-step { min-height: 100%; }

/* ── 策略情報看板 ───────────────────────────────────────────
   這一頁不是把模型原文全部攤平，而是固定成「現在做什麼 → 為什麼
   → 執行現況 → 接下來看什麼」四層。顏色是區塊索引，文字與符號仍
   是主要辨識方式，避免只靠色覺判讀。 */
.intel-guide {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  border-left: 4px solid var(--intel-decision);
}
.intel-guide h2 { font-size: 17px; margin-bottom: 2px; }
.intel-guide p { color: var(--dim); font-size: 12px; }
.intel-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.legend-item { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; }
.legend-item.decision { color: var(--intel-decision); }
.legend-item.thesis { color: var(--intel-thesis); }
.legend-item.execution { color: var(--intel-execution); }
.legend-item.monitoring { color: var(--intel-monitoring); }
.intel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px; align-items: start;
}
.intel-card {
  min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-top: 3px solid var(--line); border-radius: 10px; padding: 0 12px 12px;
}
.intel-card.codex { border-top-color: var(--codex); }
.intel-card.claude { border-top-color: var(--claude); }
.intel-card.deepseek { border-top-color: var(--deepseek); }
.intel-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 56px; padding: 8px 2px;
}
.intel-card-head > div:first-child { display: flex; align-items: center; gap: 8px; }
.intel-card-head h2 { font-size: 17px; letter-spacing: .2px; }
.intel-trader-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.intel-card.codex .intel-trader-dot { background: var(--codex); }
.intel-card.claude .intel-trader-dot { background: var(--claude); }
.intel-card.deepseek .intel-trader-dot { background: var(--deepseek); }
.intel-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--dim); font-size: 11px; text-align: right; }
.intel-coverage { color: var(--text); opacity: .78; }
.intel-missing { color: var(--warn); font-size: 12px; }
.intel-section {
  background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--intel-history);
  border-radius: 8px; padding: 11px 12px; margin-top: 10px; min-width: 0;
}
.intel-section.intel-decision { border-left-color: var(--intel-decision); }
.intel-section.intel-thesis { border-left-color: var(--intel-thesis); }
.intel-section.intel-execution { border-left-color: var(--intel-execution); }
.intel-section.intel-monitoring { border-left-color: var(--intel-monitoring); }
.intel-section-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.intel-section-title h3 { font-size: 13px; letter-spacing: .3px; color: var(--text); }
.intel-section-icon { font-size: 15px; line-height: 1; color: var(--intel-history); }
.intel-decision .intel-section-icon { color: var(--intel-decision); }
.intel-thesis .intel-section-icon { color: var(--intel-thesis); }
.intel-execution .intel-section-icon { color: var(--intel-execution); }
.intel-monitoring .intel-section-icon { color: var(--intel-monitoring); }
.intel-section-hint { color: var(--dim); font-size: 11px; margin-left: auto; }
.intel-action {
  margin-left: auto; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
}
.intel-action.hold { color: var(--warn); border-color: var(--warn); background: rgba(242, 201, 76, .09); }
.intel-action.active { color: var(--intel-execution); border-color: var(--intel-execution); background: rgba(73, 201, 148, .09); }
.intel-action.modify { color: var(--intel-decision); border-color: var(--intel-decision); background: rgba(90, 169, 255, .09); }
.intel-action.close { color: var(--down); border-color: var(--down); background: rgba(239, 107, 120, .09); }
.intel-action.neutral { color: var(--dim); }
.intel-action-help { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.intel-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 7px; }
.intel-metric {
  min-width: 0; padding: 7px 8px; border-radius: 6px;
  background: rgba(16, 20, 24, .42); border: 1px solid rgba(51, 64, 79, .75);
}
.intel-metric span { display: block; color: var(--dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intel-metric b { display: block; margin-top: 2px; color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.intel-metric b.risk { color: var(--intel-risk); }
.intel-metric b.target { color: var(--intel-target); }
.intel-decision-meta { color: var(--dim); font-size: 11px; margin-top: 8px; }
.intel-excerpt, .intel-fulltext {
  color: var(--text); font-size: 12px; line-height: 1.7; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.intel-excerpt { max-height: 165px; overflow: hidden; }
.intel-expand { margin-top: 7px; }
.intel-expand summary, .intel-history summary { cursor: pointer; color: var(--dim); font-size: 11px; }
.intel-expand summary:hover, .intel-history summary:hover { color: var(--text); }
.intel-fulltext { max-height: 360px; overflow-y: auto; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }
.intel-empty { color: var(--dim); font-size: 12px; padding: 3px 0; }
.intel-empty-state { color: var(--warn); }
.intel-execution-group { margin-top: 10px; }
.intel-group-label { color: var(--dim); font-size: 11px; margin: 8px 0 5px; }
.intel-list-row {
  display: grid; grid-template-columns: minmax(105px, .8fr) minmax(120px, 1.2fr) auto;
  gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px;
}
.intel-list-row strong { color: var(--text); font-weight: 600; }
.intel-sub { display: block; color: var(--dim); font-size: 10px; margin-top: 2px; }
.intel-row-values { min-width: 0; }
.intel-row-values b, .intel-row-values span { display: block; overflow-wrap: anywhere; }
.intel-row-values b { color: var(--text); font-weight: 600; }
.intel-row-values span { color: var(--dim); font-size: 10px; margin-top: 2px; }
.intel-order-state { color: var(--intel-execution); font-size: 10px; text-align: right; white-space: nowrap; }
.intel-history { border-left-color: var(--intel-history); }
.intel-history summary { list-style: none; display: flex; align-items: center; gap: 7px; }
.intel-history summary::-webkit-details-marker { display: none; }
.intel-history summary strong { color: var(--text); font-size: 12px; }
.intel-history-content { margin-top: 10px; }
.intel-history-item { padding: 7px 0; border-top: 1px solid var(--line); }
.intel-history-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 10px; margin-bottom: 4px; }
.intel-version { color: var(--intel-history); font-family: Consolas, monospace; }

/* ── 戰況摘要列 ──────────────────────────────────────────────
   一眼判斷：誰領先、差多少、雙方是否還活著、資料是不是新的。 */
.summary {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;
}
.summary.lead-codex { border-left-color: var(--codex); }
.summary.lead-claude { border-left-color: var(--claude); }
.summary.lead-deepseek { border-left-color: var(--deepseek); }
.summary .lead { font-size: 18px; font-weight: 600; }
.summary .gap { font-size: 15px; font-variant-numeric: tabular-nums; }
.summary .s-item { font-size: 12px; color: var(--dim); }
.summary .s-item b { font-weight: 600; }

/* 告警條 —— 資料不新鮮、額度吃緊、回撤過大時才出現 */
.alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.alert {
  font-size: 12px; padding: 6px 10px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--warn); color: var(--warn);
}
.alert.critical { border-color: var(--down); color: var(--down); }
.alert::before { content: "⚠ "; }
.alert.critical::before { content: "✕ "; }

/* ── 篩選列 ─────────────────────────────────────────────── */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 10px;
}
.filters label { font-size: 12px; color: var(--dim); }
.filters select, .filters input {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; font-family: inherit;
}
.filters .btn {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.filters .btn:hover { border-color: var(--codex); color: var(--codex); }

/* ── 熱圖 ───────────────────────────────────────────────── */
.heatmap { width: 100%; height: 155px; display: block; }
.arena-calendar-grid .card { min-width: 0; }
.arena-calendar-card.codex { border-top: 3px solid var(--codex); }
.arena-calendar-card.claude { border-top: 3px solid var(--claude); }
.arena-calendar-card.deepseek { border-top: 3px solid var(--deepseek); }
.arena-calendar-card .chart-title { color: var(--text); font-size: 13px; margin-bottom: 4px; }
.heat-cell { cursor: pointer; }
.heat-scale { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); }
.heat-swatch { width: 14px; height: 12px; border-radius: 2px; display: inline-block; }

/* ── 圖表 tooltip（原生 DOM，無函式庫）─────────────────────── */
.chart-wrap { position: relative; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: #0b0f13; border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 9px; font-size: 12px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.tooltip .t-date { color: var(--dim); font-size: 11px; }

/* ── 即時戰況中控台 ────────────────────────────────────────── */
.live-page { display: flex; flex-direction: column; gap: 12px; }
.live-toolbar {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 16px; border-left: 4px solid var(--up);
}
.live-toolbar h2 { font-size: 20px; letter-spacing: .2px; }
.live-toolbar p, .live-section-head p { color: var(--dim); font-size: 12px; }
.live-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.live-toolbar-actions label { color: var(--dim); font-size: 11px; }
.live-toolbar-actions select, .live-toolbar-actions .btn {
  display: block; margin-top: 3px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px;
  font: inherit; font-size: 12px;
}
.live-toolbar-actions .btn { cursor: pointer; margin-top: 16px; }
.live-toolbar-actions .btn:hover { border-color: var(--codex); color: var(--codex); }
.live-freshness { color: var(--dim); font-size: 11px; text-align: right; line-height: 1.8; }
.live-pulse { display: inline-block; width: 8px; height: 8px; margin-right: 5px;
  border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(63,191,127,.13); }
.live-trader-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.live-trader-card { min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-top: 3px solid var(--line); border-radius: 10px; padding: 12px; }
.live-trader-card.codex { border-top-color: var(--codex); }
.live-trader-card.claude { border-top-color: var(--claude); }
.live-trader-card.deepseek { border-top-color: var(--deepseek); }
.live-trader-head, .live-section-head { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; }
.live-trader-head > div { display: flex; align-items: center; gap: 8px; }
.live-trader-head h2 { font-size: 17px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.live-trader-card.codex .live-dot { background: var(--codex); }
.live-trader-card.claude .live-dot { background: var(--claude); }
.live-trader-card.deepseek .live-dot { background: var(--deepseek); }
.live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.live-metrics .tile .v { font-size: 16px; }
.live-subtitle { color: var(--dim); font-size: 11px; margin: 12px 0 4px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.live-position-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.45fr); gap: 7px;
  padding: 6px 0; border-bottom: 1px solid rgba(51,64,79,.6); font-size: 11px; }
.live-position-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-position-row .buy { color: var(--up); }
.live-position-row .sell { color: var(--down); }
.live-position-row.pending { color: var(--warn); }
.live-empty { color: var(--dim); font-size: 12px; padding: 8px 0; }
.live-main-grid { align-items: start; }
.live-events-card h3, .live-symbol-card h3 { font-size: 14px; color: var(--text); }
.live-event-list { margin-top: 10px; max-height: 560px; overflow-y: auto; padding-right: 3px; }
.live-event-row { display: grid; grid-template-columns: 128px 12px minmax(0, 1fr); gap: 9px;
  min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.live-event-time { color: var(--dim); font: 11px Consolas, monospace; padding-top: 2px; }
.live-event-marker { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%;
  background: var(--line); box-shadow: 0 0 0 3px var(--panel2); }
.live-event-marker.codex { background: var(--codex); }
.live-event-marker.claude { background: var(--claude); }
.live-event-marker.deepseek { background: var(--deepseek); }
.live-event-row.close .live-event-marker { border-radius: 2px; background: var(--down); }
.live-event-row.pending .live-event-marker { background: var(--warn); }
.live-event-row.bad .live-event-marker { background: var(--down); }
.live-event-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.live-event-label { color: var(--text); font-size: 12px; }
.live-event-symbol { color: var(--dim); font: 11px Consolas, monospace; }
.live-event-detail { color: var(--dim); font-size: 11px; margin-top: 3px; }
.live-event-detail .pos, .live-event-detail .neg { margin-left: 6px; }
.live-symbol-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.live-symbol-chip { background: var(--panel2); color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 10px; cursor: pointer; font: 12px Consolas, monospace; }
.live-symbol-chip:hover, .live-symbol-chip.active { color: var(--text); border-color: var(--codex); }
.live-chart-note strong { font-size: 12px; }
.live-chart-note p { color: var(--dim); font-size: 12px; margin-top: 5px; }
#quick-menu { display: none; }

/* ── 窄螢幕 ─────────────────────────────────────────────────
   auto-fit + minmax(420px) 在容器小於 420px 時軌道不會縮 —— 直接橫向溢位。 */
@media (max-width: 860px) {
  .cols-2, .cols-3, .six, .intel-grid { grid-template-columns: minmax(0, 1fr); }
  main { padding: 12px 10px 40px; }
  header { padding: 8px 10px; gap: 10px; }
  #refreshed { margin-left: 0; width: 100%; }
  .summary { gap: 10px; }
  .intel-card-head { align-items: flex-start; flex-direction: column; }
  .intel-card-meta { align-items: flex-start; text-align: left; }
  .intel-action { margin-left: 0; }
  .intel-list-row { grid-template-columns: 1fr; }
  .intel-order-state { text-align: left; }
  .live-toolbar { grid-template-columns: 1fr; gap: 10px; }
  .live-toolbar-actions { align-items: end; justify-content: space-between; }
  .live-freshness { text-align: left; }
  .live-trader-grid { grid-template-columns: minmax(0, 1fr); }
  .live-event-row { grid-template-columns: 94px 10px minmax(0, 1fr); gap: 7px; }
  .live-position-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-event-time { font-size: 10px; }
  #quick-menu { display: grid; position: fixed; left: 10px; right: 10px; bottom: 10px;
    z-index: 20; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px;
    background: rgba(23,29,36,.96); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 5px 24px rgba(0,0,0,.45); }
  #quick-menu button, #quick-menu a { display: block; text-align: center; text-decoration: none;
    background: var(--panel2); color: var(--dim); border: 1px solid transparent;
    border-radius: 7px; padding: 8px 4px; font: inherit; font-size: 12px; }
  #quick-menu button:hover, #quick-menu button.active, #quick-menu a:hover { color: var(--text); border-color: var(--codex); }
  main { padding-bottom: 84px; }
}

/* ── 中控台資訊層級強化 ─────────────────────────────────────
   重要數值先看得到，持倉與事件改成多行資訊卡，避免在三欄寬度中被截斷。 */
body { letter-spacing: .01em; }
header { padding: 11px 20px; gap: 14px; }
#tabs { display: flex; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
#tabs button { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
main { max-width: 1540px; }
.card h3 { text-transform: none; letter-spacing: .35px; }
.live-toolbar { padding: 16px 18px; }
.live-overview { padding: 14px 16px; }
.live-overview-tiles { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin-top: 10px; }
.live-overview-time { color: var(--dim); font-size: 11px; white-space: nowrap; }
.live-trader-grid { grid-template-columns: repeat(3, minmax(330px, 1fr)); }
.live-trader-card { padding: 15px; }
.live-trader-head h2 { font-size: 18px; }
.live-primary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.live-primary-metrics .tile .v { font-size: 19px; }
.live-status-reason { margin-top: 9px; padding: 7px 9px; color: var(--warn); background: rgba(242,201,76,.08); border: 1px solid rgba(242,201,76,.25); border-radius: 6px; font-size: 11px; }
.live-account-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; padding: 10px; background: rgba(30,38,48,.66); border: 1px solid rgba(51,64,79,.75); border-radius: 8px; }
.live-account-details span { min-width: 0; }
.live-account-details small { display: block; color: var(--dim); font-size: 10px; }
.live-account-details b { display: block; margin-top: 2px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-subtitle { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; }
.live-subtitle b { color: var(--dim); font-size: 11px; font-weight: 500; }
.live-position-list { display: grid; gap: 7px; }
.live-position-row { display: block; min-width: 0; padding: 10px 11px; background: var(--panel2); border: 1px solid rgba(51,64,79,.72); border-left: 3px solid var(--up); border-radius: 7px; font-size: 11px; }
.live-position-row.pending { border-left-color: var(--warn); color: var(--text); }
.live-position-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-position-head > div { display: flex; align-items: center; gap: 7px; min-width: 0; }
.live-position-head strong { font-size: 12px; white-space: nowrap; }
.live-position-head strong.buy { color: var(--up); }
.live-position-head strong.sell { color: var(--down); }
.live-position-symbol { color: var(--dim); font: 11px Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-position-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 10px; margin-top: 9px; }
.live-position-grid span { min-width: 0; }
.live-position-grid small { display: block; color: var(--dim); font-size: 10px; }
.live-position-grid b { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-position-note, .live-more { margin-top: 7px; color: var(--dim); font-size: 10px; overflow-wrap: anywhere; }
.live-more { padding-top: 1px; text-align: right; }
.live-card-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--dim); font-size: 10px; }
.live-card-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-events-card, .live-symbol-card { min-height: 100%; }
.live-event-list { max-height: 630px; }
.live-event-row { grid-template-columns: 132px 12px minmax(0, 1fr); min-height: 70px; padding: 10px 0; }
.live-event-main-detail { color: var(--text); font-size: 12px; font-weight: 600; }
.live-event-risk-detail { color: var(--dim); }
.live-event-meta { margin-top: 4px; color: var(--dim); font: 10px Consolas, monospace; overflow-wrap: anywhere; }
.live-event-detail .pos, .live-event-detail .neg { margin-left: 8px; }

@media (max-width: 1120px) {
  .live-trader-grid { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
  .live-overview-tiles { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 860px) {
  #tabs { order: 4; width: 100%; }
  .live-trader-grid { grid-template-columns: minmax(0, 1fr); }
  .live-overview-tiles, .live-primary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-account-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-event-row { grid-template-columns: 94px 10px minmax(0, 1fr); gap: 7px; }
  .live-card-foot { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (max-width: 480px) {
  .live-overview-tiles, .live-primary-metrics { grid-template-columns: minmax(0, 1fr); }
  .live-account-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-position-grid { gap: 6px; }
}

/* 列印 / 存證用：深色底不印，圖表與表格保持可讀 */
@media print {
  body { background: #fff; color: #000; }
  nav, .filters { display: none; }
  .card { border-color: #999; break-inside: avoid; }
  .tab { display: block !important; }
}