:root {
  color-scheme: dark;
  --bg: #0f1318;
  --surface: #151b22;
  --surface-raised: #1b232d;
  --surface-hover: #222d38;
  --line: #2c3642;
  --line-soft: #202934;
  --text: #e7edf4;
  --muted: #95a2b1;
  --subtle: #657384;
  --blue: #5c8dff;
  --red: #ef5350;
  --green: #26a69a;
  --amber: #ffb74d;
  --purple: #bb86fc;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.rail { position: fixed; inset: 0 auto 0 0; z-index: 4; width: 76px; display: flex; flex-direction: column; align-items: stretch; background: #11171d; border-right: 1px solid var(--line); }
.brand { height: 68px; display: grid; place-items: center; color: #fff; background: var(--blue); font: 800 20px/1 var(--mono); text-decoration: none; letter-spacing: 1px; }
.rail-nav { padding-top: 14px; display: grid; gap: 6px; }
.rail-item { min-height: 60px; display: grid; place-items: center; gap: 3px; padding: 8px 2px; color: var(--muted); background: transparent; border-left: 2px solid transparent; }
.rail-item span { font-size: 18px; line-height: 1; }.rail-item b { font-size: 11px; font-weight: 600; }.rail-item:hover { background: var(--surface-hover); color: var(--text); }.rail-item.active { color: #fff; border-left-color: var(--blue); background: #1b2940; }.rail-bottom { margin-top: auto; }
.terminal { margin-left: 76px; min-width: 0; width: calc(100% - 76px); }
.topbar { height: 68px; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(240px, 1fr); align-items: center; gap: 16px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.symbol-picker { position: relative; display: flex; align-items: center; gap: 10px; }.market-chip { padding: 4px 6px; border: 1px solid #4060a8; border-radius: 4px; color: #8cb0ff; font: 700 11px/1 var(--mono); }.symbol-button { display: flex; align-items: baseline; gap: 8px; padding: 5px 2px; background: transparent; }.symbol-button strong { font-size: 16px; }.symbol-button small { color: var(--muted); font: 12px var(--mono); }.symbol-button span { color: var(--subtle); }.symbol-menu { position: absolute; z-index: 5; top: 38px; left: 28px; width: 190px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 18px 40px #0008; }.symbol-menu button { display: flex; justify-content: space-between; width: 100%; padding: 9px; border-radius: 4px; background: transparent; text-align: left; }.symbol-menu button:hover { background: var(--surface-hover); }.symbol-menu button:disabled { color: var(--subtle); cursor: not-allowed; }.symbol-menu button:disabled:hover { background: transparent; }.symbol-menu small { color: var(--muted); font-family: var(--mono); }
.toolbar { display: flex; align-items: center; gap: 8px; }.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: #121820; }.segmented button { min-width: 42px; padding: 5px 8px; color: var(--muted); background: transparent; border-radius: 3px; font: 12px var(--mono); }.segmented button.selected { background: var(--blue); color: #fff; }.segmented button:disabled { color: #4e5b69; cursor: not-allowed; }.tool-button,.icon-button { height: 32px; padding: 0 10px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }.tool-button span { color: var(--blue); font-size: 16px; vertical-align: -1px; }.tool-button:hover,.icon-button:hover,.active-tool { color: var(--text); border-color: #4d668d; background: #1d2b3d; }.icon-button { width: 32px; padding: 0; font-size: 16px; }
.session-state { justify-self: end; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.session-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px #ffb74d20; }.session-state time { color: var(--subtle); font-family: var(--mono); }
.workspace-grid { min-height: calc(100vh - 68px); display: grid; grid-template-columns: minmax(0, 1fr) 322px; }.chart-zone { min-width: 0; display: flex; flex-direction: column; padding: 24px 22px 12px; }.chart-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 2px 18px; }.eyebrow { margin: 0 0 7px; color: var(--muted); font: 12px var(--mono); }.chart-header h1 { margin: 0; font-size: 22px; letter-spacing: 0; }.chart-header h1 span { margin-left: 6px; color: var(--muted); font: 13px var(--mono); }.quote-block { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); }.quote-block strong { font-size: 22px; }.quote-block span { font-size: 13px; }.up { color: var(--red); }.down { color: var(--green); }
.indicator-strip { display: flex; gap: 7px; padding: 9px 0 12px; border-top: 1px solid var(--line-soft); }.indicator { padding: 5px 7px; color: var(--subtle); background: transparent; border-radius: 3px; font: 11px var(--mono); }.indicator.active { color: #b7ccff; background: #28416a55; }.indicator:hover { color: var(--text); background: var(--surface-hover); }
.chart-canvas { position: relative; flex: 1; min-height: 560px; overflow: hidden; border: 1px solid var(--line-soft); background: #11171d; }.chart-canvas svg { display: block; width: 100%; height: 100%; }.chart-watermark { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; color: #e7edf408; font: 700 clamp(48px, 7vw, 94px)/1 var(--sans); letter-spacing: 2px; }.crosshair { position: absolute; z-index: 2; display: block; pointer-events: none; background: #8f9bac80; }.crosshair.vertical { top: 0; bottom: 0; width: 1px; }.crosshair.horizontal { left: 0; right: 0; height: 1px; }.chart-tooltip { position: absolute; z-index: 3; width: 178px; padding: 10px 11px; color: var(--text); background: #121820eF; border: 1px solid #3a4656; border-radius: 4px; box-shadow: 0 12px 30px #0007; font: 11px/1.65 var(--mono); pointer-events: none; }.chart-footer { display: flex; justify-content: space-between; gap: 20px; padding: 11px 2px 0; color: var(--subtle); font-size: 11px; }
.context-panel { background: var(--surface); border-left: 1px solid var(--line); }.panel-tabs { display: flex; height: 54px; border-bottom: 1px solid var(--line); }.tab { flex: 1; color: var(--muted); background: transparent; border-bottom: 2px solid transparent; }.tab.selected { color: var(--text); border-bottom-color: var(--blue); }.panel-content { padding: 18px; }.state-card { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #171f28; }.label { margin: 0 0 8px; color: var(--muted); font-size: 12px; }.state-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 15px; }.badge { padding: 4px 6px; border-radius: 3px; color: #90b4ff; background: #27477a66; font: 10px var(--mono); }.metric-list { display: grid; gap: 12px; margin: 20px 0; }.metric { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); }.metric span { color: var(--muted); font-size: 12px; }.metric strong { text-align: right; font: 12px var(--mono); }.metric strong.red { color: var(--red); }.metric strong.green { color: var(--green); }.section-title { margin: 24px 0 12px; color: var(--text); font-size: 13px; }.event { position: relative; padding: 0 0 16px 17px; color: var(--muted); font-size: 12px; line-height: 1.6; }.event::before { content: ""; position: absolute; top: 5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }.event::after { content: ""; position: absolute; top: 12px; bottom: -4px; left: 3px; width: 1px; background: var(--line); }.event:last-child::after { display: none; }.event strong { display: block; color: var(--text); font: 11px var(--mono); }.boundary { padding: 12px; border-left: 2px solid var(--amber); color: var(--muted); background: #ffb74d0d; font-size: 12px; line-height: 1.65; }.boundary b { color: var(--amber); }
body.light-mode { color-scheme: light; --bg: #f5f7fa; --surface: #fff; --surface-raised: #fff; --surface-hover: #edf2f7; --line: #dce3eb; --line-soft: #e9edf2; --text: #17212b; --muted: #5f6c7b; --subtle: #8491a0; }.light-mode .rail,.light-mode .chart-canvas { background: #f8fafc; }.light-mode .chart-canvas { border-color: var(--line); }.light-mode .brand { color: #fff; }.light-mode .state-card { background: #f8fafc; }.light-mode .chart-tooltip { background: #fffffff2; }.light-mode .chart-watermark { color: #17212b09; }
@media (max-width: 980px) { .topbar { grid-template-columns: 1fr auto; }.toolbar { justify-self: end; }.session-state { display: none; }.workspace-grid { grid-template-columns: 1fr; }.context-panel { border-top: 1px solid var(--line); border-left: 0; }.panel-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.panel-content .state-card { grid-row: span 2; }.panel-content .section-title { margin-top: 0; }.chart-canvas { min-height: 480px; } }
@media (max-width: 680px) { .rail { width: 56px; }.terminal { margin-left: 56px; width: calc(100% - 56px); }.brand { height: 58px; font-size: 16px; }.rail-item b { display: none; }.topbar { height: auto; min-height: 58px; grid-template-columns: 1fr; gap: 8px; padding: 9px 8px; }.symbol-picker { gap: 5px; }.symbol-button { gap: 4px; }.symbol-button strong { font-size: 13px; }.symbol-button small,.market-chip { display: none; }.toolbar { justify-self: start; }.tool-button { display: none; }.workspace-grid { min-height: calc(100vh - 96px); }.chart-zone { padding: 16px 12px 10px; }.chart-header { padding-bottom: 12px; }.chart-header h1 { font-size: 18px; }.quote-block { display: grid; justify-items: end; gap: 3px; }.quote-block strong { font-size: 17px; }.chart-canvas { min-height: 390px; }.chart-footer { display: block; line-height: 1.8; }.context-panel { display: none; }.segmented button { min-width: 31px; padding: 5px 6px; }.icon-button { width: 30px; } }