:root {
  --bg: #101418;
  --panel: #171d24;
  --panel2: #1e2630;
  --line: #33404f;
  --text: #d7dde5;
  --dim: #95a1b0;
  --codex: #4da3ff;
  --claude: #ff8f3f;
  --deepseek: #c084fc;
  --up: #3fbf7f;
  --down: #ef6b78;
  --warn: #f2c94c;
}

* { 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;
}
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--codex); outline-offset: 2px;
}
.recording-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding: 12px 20px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.recording-brand { display: flex; align-items: center; gap: 14px; }
.back-link { color: var(--dim); text-decoration: none; white-space: nowrap; }
.back-link:hover { color: var(--text); }
h1 { font-size: 20px; letter-spacing: .2px; }
.recording-brand p { color: var(--dim); font-size: 12px; margin-top: 2px; }
.recording-loaders { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.recording-loaders label, .speed-control { color: var(--dim); font-size: 11px; }
.recording-loaders select, .speed-control select {
  display: block; margin-top: 3px; min-width: 76px; padding: 6px 8px;
  color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
}
.recording-button {
  border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  background: var(--panel2); padding: 7px 11px; cursor: pointer;
}
.recording-button:hover { border-color: var(--codex); }
.recording-button.primary { color: #07111b; background: var(--codex); border-color: var(--codex); font-weight: 600; }
.recording-button.primary:hover { filter: brightness(1.1); }
.recording-main { width: min(1500px, calc(100% - 28px)); margin: 14px auto 48px; }
.recording-error { padding: 12px 14px; margin-bottom: 12px; color: var(--down); background: rgba(239,107,120,.1); border: 1px solid var(--down); border-radius: 7px; }
.recording-stage { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 10px; }
.stage-head, .events-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage-head strong { font-size: 16px; }
.stage-head span { margin-left: 10px; color: var(--dim); font-size: 11px; }
.data-status { color: var(--up); font-size: 11px; }
.chart-shell { position: relative; margin-top: 10px; min-height: 560px; background: #0d1218; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
#price-canvas { display: block; width: 100%; height: 560px; touch-action: none; }
.chart-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 20px; color: var(--dim); background: rgba(13,18,24,.9); }
.chart-empty[hidden] { display: none; }
.chart-empty strong { color: var(--text); font-size: 16px; }
.chart-empty p { margin-top: 6px; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 2px 0; color: var(--dim); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; }
.legend-candle.up { background: var(--up); }
.legend-candle.down { background: var(--down); }
.legend-exit { background: #ffd166; transform: rotate(45deg); border-radius: 2px; }
.trader-codex i, .trader-claude i, .trader-deepseek i { border-radius: 50%; }
.trader-codex i { background: var(--codex); }
.trader-claude i { background: var(--claude); }
.trader-deepseek i { background: var(--deepseek); }
.legend-line { height: 2px !important; width: 16px !important; }
.legend-line.sl { background: var(--down); }
.legend-line.tp { background: var(--up); }
.playback-bar { display: grid; grid-template-columns: auto minmax(220px,1fr) auto; gap: 14px; align-items: center; margin-top: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.playback-buttons { display: flex; align-items: end; gap: 6px; }
.speed-control { margin-left: 5px; }
.timeline-control { display: grid; grid-template-columns: auto minmax(80px,1fr) auto; gap: 8px; align-items: center; color: var(--dim); font: 11px Consolas, monospace; }
#timeline-range { width: 100%; accent-color: var(--codex); cursor: pointer; }
.playback-time { text-align: right; white-space: nowrap; }
.playback-time strong { display: block; font: 13px Consolas, monospace; }
.playback-time span { color: var(--dim); font-size: 11px; }
.trader-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.period-returns { margin-top: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.period-returns-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); font-size: 11px; }
.period-returns-head strong { color: var(--text); font-size: 14px; }
.period-return-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.period-return-card { min-width: 0; padding: 9px 11px; background: var(--panel2); border-left: 3px solid var(--line); border-radius: 6px; }
.period-return-card.codex { border-left-color: var(--codex); }
.period-return-card.claude { border-left-color: var(--claude); }
.period-return-card.deepseek { border-left-color: var(--deepseek); }
.period-return-card > strong { display: block; font-size: 12px; }
.period-return-card > b { display: block; margin-top: 2px; font-size: 19px; }
.period-return-card > span { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trader-metric { min-width: 0; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 8px; }
.trader-metric.codex { border-top-color: var(--codex); }
.trader-metric.claude { border-top-color: var(--claude); }
.trader-metric.deepseek { border-top-color: var(--deepseek); }
.trader-metric-head { display: flex; justify-content: space-between; gap: 8px; }
.trader-metric-head strong.codex { color: var(--codex); }
.trader-metric-head strong.claude { color: var(--claude); }
.trader-metric-head strong.deepseek { color: var(--deepseek); }
.trader-metric-head span { color: var(--dim); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.metric-grid div { min-width: 0; }
.metric-grid small { display: block; color: var(--dim); font-size: 10px; }
.metric-grid b { display: block; margin-top: 1px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.positive { color: var(--up); }
.negative { color: var(--down); }
.recording-events { margin-top: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.events-head h2 { font-size: 15px; }
.events-head p { color: var(--dim); font-size: 11px; }
.events-head > span { color: var(--dim); font-size: 11px; }
.event-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 10px; align-items: start; }
.event-group { min-width: 0; padding: 9px; background: var(--panel2); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 7px; }
.event-group.codex { border-top-color: var(--codex); }
.event-group.claude { border-top-color: var(--claude); }
.event-group.deepseek { border-top-color: var(--deepseek); }
.event-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 8px; }
.event-group-head strong.codex, .event-group.codex .event-group-head strong { color: var(--codex); }
.event-group-head strong.claude, .event-group.claude .event-group-head strong { color: var(--claude); }
.event-group-head strong.deepseek, .event-group.deepseek .event-group-head strong { color: var(--deepseek); }
.event-group-head span { color: var(--dim); font-size: 11px; }
.event-group-list { display: grid; gap: 7px; }
.event-group-empty { padding: 16px 8px; color: var(--dim); font-size: 11px; text-align: center; }
.event-row { display: grid; grid-template-columns: 112px 10px minmax(0,1fr); gap: 7px; align-items: start; padding: 8px 9px; background: var(--panel2); border-left: 3px solid var(--line); border-radius: 5px; font-size: 11px; }
.event-row.codex { border-left-color: var(--codex); }
.event-row.claude { border-left-color: var(--claude); }
.event-row.deepseek { border-left-color: var(--deepseek); }
.event-time { color: var(--dim); font: 10px Consolas, monospace; white-space: nowrap; }
.event-time b { display: block; color: var(--text); font-size: 11px; }
.event-time span { display: block; margin-top: 2px; }
.event-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--line); }
.event-dot.codex { background: var(--codex); }
.event-dot.claude { background: var(--claude); }
.event-dot.deepseek { background: var(--deepseek); }
.event-title { display: flex; flex-wrap: wrap; gap: 5px; }
.event-title strong { color: var(--text); }
.event-row.codex .event-title strong { color: var(--codex); }
.event-row.claude .event-title strong { color: var(--claude); }
.event-row.deepseek .event-title strong { color: var(--deepseek); }
.event-title span { color: var(--dim); }
.event-title .event-type { padding: 1px 5px; color: var(--text); background: rgba(255,255,255,.06); border-radius: 3px; }
.event-detail { color: var(--dim); margin-top: 2px; }
.event-detail b { color: var(--text); }
.event-main-detail { margin-top: 5px; }

/* ── 錄影室資訊層級強化 ───────────────────────────────────── */
.recording-header { padding: 14px 22px; }
.recording-loaders { gap: 9px; }
.recording-loaders label { min-width: 96px; }
.recording-loaders select { min-width: 96px; }
.stage-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stage-hint { color: var(--dim); font-size: 10px; }
.chart-shell { min-height: 590px; }
#price-canvas { height: 590px; }
.chart-legend { gap: 14px; padding-top: 10px; font-size: 12px; }
.playback-insights { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.insight-card { min-width: 0; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.insight-card small { display: block; color: var(--dim); font-size: 10px; }
.insight-card strong { display: block; margin-top: 3px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-card span { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-card.insight-wide { grid-column: span 2; }
.playback-bar { margin-top: 10px; padding: 12px 14px; }
.playback-buttons { gap: 7px; }
.playback-buttons .recording-button { min-height: 36px; }
.timeline-control { min-width: 0; }
.trader-metrics { gap: 12px; }
.trader-metric { padding: 13px 14px; }
.metric-grid { gap: 9px; }
.metric-grid small { font-size: 11px; }
.metric-grid b { font-size: 15px; }
.event-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.event-row { min-height: 86px; padding: 10px 11px; font-size: 12px; }
.event-time { font-size: 11px; }
.event-title { gap: 7px; }
.event-title .event-type { padding: 2px 6px; }
.event-detail { line-height: 1.55; }

@media (max-width: 800px) {
  .recording-header { padding: 10px; }
  .recording-brand { align-items: flex-start; }
  .recording-brand p { display: none; }
  .recording-loaders { width: 100%; align-items: end; }
  .recording-loaders label { flex: 1; }
  .recording-loaders select { width: 100%; }
  .recording-loaders .recording-button { flex: 1; }
  .recording-main { width: calc(100% - 12px); margin-top: 7px; }
  .recording-stage { padding: 9px 8px 8px; }
  .stage-status { align-items: flex-start; }
  .stage-hint { display: none; }
  .chart-shell { min-height: 460px; }
  #price-canvas { height: 460px; }
  .playback-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-card.insight-wide { grid-column: span 2; }
  .playback-bar { grid-template-columns: 1fr; gap: 8px; }
  .playback-buttons { justify-content: space-between; }
  .timeline-control { grid-template-columns: 70px minmax(80px,1fr) 70px; }
  .playback-time { text-align: left; }
  .period-return-grid { grid-template-columns: 1fr; }
  .trader-metrics { grid-template-columns: 1fr; }
  .event-list { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  h1 { font-size: 17px; }
  .back-link { font-size: 12px; }
  .chart-shell, #price-canvas { min-height: 380px; height: 380px; }
  .chart-legend { gap: 7px; }
  .playback-insights { grid-template-columns: 1fr; }
  .insight-card.insight-wide { grid-column: auto; }
}