:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070a0e;
  color: #ecf3f8;
  --canvas: #070a0e;
  --panel: #0d131a;
  --panel-raised: #111a23;
  --line: #25313d;
  --line-soft: #18222d;
  --muted: #8495a7;
  --green: #3ed69c;
  --green-soft: #153d32;
  --cyan: #45c7e8;
  --amber: #f3b94f;
  --red: #ff667d;
  --violet: #9e8cff;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(35, 49, 63, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 49, 63, .1) 1px, transparent 1px),
    radial-gradient(circle at 45% -20%, #183142 0, var(--canvas) 38%);
  background-size: 40px 40px, 40px 40px, auto;
}
main { width: min(1760px, calc(100% - 28px)); margin: 0 auto; padding: 14px 0 40px; }
button, input { font: inherit; }
button { cursor: pointer; }
.brand-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #3c9376;
  border-radius: 13px;
  background: linear-gradient(145deg, #183b31, #0b1716);
  color: var(--green);
  font: 800 24px ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: inset 0 0 20px #42d7a01a, 0 10px 30px #0006;
}
.brand-mark.small { width: 38px; height: 38px; border-radius: 9px; font-size: 18px; }
.login-card {
  width: min(460px, 100%);
  margin: 12vh auto;
  padding: 34px;
  background: rgba(13, 19, 26, .97);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 100px #000b;
}
.login-card .brand-mark { margin-bottom: 24px; }
.eyebrow, .panel-kicker, .top-label {
  margin: 0;
  color: var(--green);
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 800;
}
h1 { margin: 7px 0 10px; font-size: 32px; letter-spacing: -.03em; }
h2 { margin: 3px 0 0; font-size: 16px; letter-spacing: -.01em; }
.muted, label { color: var(--muted); line-height: 1.55; }
form { display: grid; gap: 10px; margin-top: 26px; }
input {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #070c11;
  color: #fff;
}
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px #3ed69c18; }
form button, button.secondary {
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 750;
}
form button { background: var(--green); color: #03130d; }
button.secondary { background: #1b2733; color: #dbe5ed; }
#login-error { min-height: 20px; color: var(--red); }
.auth-actions { margin-top: 14px; text-align: center; }
.text-button { padding: 6px; border: 0; background: transparent; color: var(--cyan); cursor: pointer; }
.setup-proof { display: grid; gap: 7px; margin-top: 22px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #071017; }
.setup-proof span { color: var(--green); font-size: 11px; font-weight: 750; }
.setup-proof input { padding: 9px; color: var(--cyan); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
#setup-error, #register-error { min-height: 20px; color: var(--red); }
.client-status { display: flex; justify-content: space-between; margin: 24px 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.client-status strong { color: var(--amber); }
.client-card > button { width: 100%; }

.topbar {
  position: sticky;
  top: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9, 14, 20, .94);
  box-shadow: 0 10px 32px #0008;
  backdrop-filter: blur(16px);
}
.identity { display: flex; align-items: center; gap: 11px; min-width: 225px; }
.identity strong { font-size: 13px; }
.top-label { display: block; margin-bottom: 3px; color: var(--muted); }
.badge {
  display: inline-block;
  min-width: 66px;
  margin-right: 8px;
  padding: 4px 7px;
  border: 1px solid #2b6956;
  border-radius: 5px;
  background: #14362d;
  color: #79e9bd;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}
.badge.env-LIVE { border-color: #87404d; background: #3b1b23; color: var(--red); }
.badge.env-TESTNET { border-color: #79602d; background: #372c17; color: var(--amber); }
.badge.env-PAPER, .badge.env-SHADOW { border-color: #315c79; background: #142d3c; color: var(--cyan); }
.state-group { display: flex; flex: 1; align-items: center; justify-content: center; gap: 28px; }
.state-group div { display: grid; gap: 2px; }
.state-group span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.state-group strong { font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.top-actions { display: flex; gap: 7px; }
.viewer-mode { padding: 6px 8px; border: 1px solid var(--amber); border-radius: 5px; color: var(--amber); font: 900 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.viewer-mode[hidden] { display: none; }
.share-panel { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(420px, 1.4fr) minmax(300px, 1fr) auto; align-items: end; gap: 10px; margin: 8px 0; padding: 12px; border: 1px solid #315c79; border-radius: 9px; background: #0c1821; }
.share-panel[hidden] { display: none; }
.share-panel div { display: grid; gap: 4px; }
.share-panel small { color: var(--muted); font-size: 9px; }
.share-panel input, .share-panel select { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #080e13; color: var(--cyan); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-policy-copy { align-self: center; }
.share-policy-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.share-policy-fields label { display: grid; gap: 4px; color: var(--muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.share-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 6px 8px 8px; border: 1px solid var(--line); border-radius: 6px; }
.share-scopes legend { padding: 0 4px; color: var(--muted); font-size: 8px; }
.share-scopes label { display: flex; align-items: center; gap: 3px; color: #cbd8e1; font-size: 9px; }
.share-scopes input { min-width: auto; padding: 0; accent-color: var(--green); }
.share-result input { width: 100%; }
.share-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; }
.transport-ok, .state-RUNNING { color: var(--green); }
.transport-down, .state-DATA_STALE, .state-HALTED, .state-HALTING { color: var(--red); }
.state-ENTRY_PAUSED, .state-EXIT_ONLY, .state-DATA_DEGRADED { color: var(--amber); }

.status-rail { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 11px 0; }
.freshness { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.freshness-badge {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: #0b1117;
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.freshness-badge.FRESH { border-color: #245c4a; color: var(--green); }
.freshness-badge.STALE { border-color: #6b5428; color: var(--amber); }
.freshness-badge.GAP { border-color: #71303d; color: var(--red); }
.status-meta { display: flex; flex-shrink: 0; gap: 12px; color: var(--muted); font-size: 10px; }

.metrics { display: grid; gap: 8px; }
.metrics-primary { grid-template-columns: repeat(8, minmax(125px, 1fr)); }
.metrics article, .panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(17, 26, 35, .96), rgba(11, 17, 23, .96));
}
.metrics article { min-height: 94px; padding: 13px; }
.metrics article > span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.metrics strong { display: block; margin-top: 8px; font: 700 19px ui-monospace, SFMono-Regular, Menlo, monospace; }
.metrics small { display: block; margin-top: 5px; color: #617184; font-size: 9px; }

.paper-summary {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #315c79;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(13, 33, 45, .96), rgba(9, 18, 25, .96));
  box-shadow: inset 0 0 32px #45c7e80a;
}
.paper-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.paper-heading .panel-kicker { color: var(--cyan); }
.paper-state { display: flex; align-items: center; gap: 9px; }
.paper-state strong { font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cyan); }
.paper-state strong.HALTED { color: var(--red); }
.paper-state strong.WARMUP { color: var(--amber); }
.paper-state strong.HEALTHY { color: var(--green); }
.paper-warning { margin: 7px 0 10px; color: #7894a7; font-size: 9px; }
.metrics-paper { grid-template-columns: repeat(8, minmax(125px, 1fr)); }
.metrics-paper-portfolio { grid-template-columns: repeat(6, minmax(140px, 1fr)); margin-bottom: 10px; }
.canonical-summary { border-color: #286a58; background: linear-gradient(145deg, rgba(9, 35, 31, .96), rgba(9, 18, 25, .96)); }
.metrics-canonical { grid-template-columns: repeat(6, minmax(130px, 1fr)); }
.canonical-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 11px; }
.canonical-pair-table .table-row { min-width: 730px; grid-template-columns: repeat(9, minmax(78px, 1fr)); }
.canonical-order-table .table-row { min-width: 650px; grid-template-columns: repeat(8, minmax(78px, 1fr)); }
.metrics-episode { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin-top: 10px; }
.metrics-episode article { min-height: 78px; border-color: #27465b; background: #0a171f; }
.metrics-episode strong { font-size: 15px; }
.demo-episode-table .table-row { min-width: 1120px; grid-template-columns: 80px 100px 72px 78px 80px 72px 72px repeat(6, minmax(88px, 1fr)); }
.demo-episode-table .outcome-WIN span:nth-child(4), .demo-episode-table .outcome-WIN span:last-child { color: var(--green); }
.demo-episode-table .outcome-LOSS span:nth-child(4), .demo-episode-table .outcome-LOSS span:last-child { color: var(--red); }
.demo-episode-table .outcome-BREAKEVEN span:nth-child(4), .demo-episode-table .outcome-OPEN span:nth-child(4) { color: var(--amber); }
.demo-episode-table .outcome-INVALID span { color: var(--red); }
.metrics-paper-robustness { grid-template-columns: repeat(5, minmax(140px, 1fr)); margin-top: 10px; }
.metrics-paper-portfolio article { min-height: 82px; border-color: #27465b; background: #101c25; }
.metrics-paper-robustness article { min-height: 82px; border-color: #4a3d22; background: #17160f; }
.metrics-paper article { min-height: 80px; background: #0a141c; }
.metrics-paper strong { font-size: 16px; }
.paper-equity-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #27465b;
  border-radius: 9px;
  background: #09141c;
}
.paper-equity-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.paper-equity-heading div { display: grid; gap: 4px; }
.paper-equity-heading span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.paper-equity-heading strong { color: var(--cyan); font: 800 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.paper-equity-heading small { color: #718596; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.period-controls { display: flex !important; flex-wrap: wrap; grid-auto-flow: column; gap: 5px !important; justify-content: flex-end; }
.period-controls button { min-width: 38px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: #101922; color: var(--muted); font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.period-controls button.active { border-color: var(--cyan); background: #103042; color: var(--cyan); }
.period-controls input, .period-controls select { width: 112px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; background: #071017; color: #dce5ec; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: dark; }
.period-controls select { width: 124px; }
.period-controls input:invalid { border-color: var(--red); }
.paper-equity-curve { position: relative; min-height: 150px; margin-top: 10px; border-radius: 6px; background: linear-gradient(#45c7e80a 1px, transparent 1px); background-size: 100% 25%; }
.paper-equity-curve svg { display: block; width: 100%; height: 150px; overflow: visible; }
.paper-equity-baseline { stroke: #385064; stroke-width: .6; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.paper-equity-line { fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; }
.paper-equity-line.negative { stroke: var(--red); }
.paper-equity-dot { fill: var(--cyan); stroke: #071017; stroke-width: 1; vector-effect: non-scaling-stroke; }
.paper-equity-dot.negative { fill: var(--red); }
.canonical-pnl-bar { fill: color-mix(in srgb, var(--green) 58%, transparent); }
.canonical-pnl-bar.negative { fill: color-mix(in srgb, var(--red) 65%, transparent); }
.paper-equity-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 3px; color: #718596; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.paper-equity-empty { display: grid; min-height: 150px; place-items: center; color: var(--muted); font-size: 10px; }
.paper-cycle-panel { margin-top: 12px; padding: 12px; border: 1px solid #27465b; border-radius: 9px; background: #09141c; }
.paper-cycle-heading { display: flex; justify-content: space-between; gap: 12px; }
.paper-cycle-heading span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.paper-cycle-heading small { color: #718596; font-size: 9px; }
.paper-cycle-history { margin-top: 8px; max-height: 240px; overflow-y: auto; }
.paper-cycle-history .table-row { min-width: 520px; grid-template-columns: 70px 1.4fr 90px 1fr 1.5fr; }
.paper-cycle-history .outcome-WIN span { color: var(--green); }
.paper-cycle-history .outcome-LOSS span { color: var(--red); }
.paper-cycle-history .outcome-BREAKEVEN span { color: var(--amber); }
.paper-grid-comparison { margin-top: 12px; }
.paper-grid-comparison .table-row { grid-template-columns: 1.4fr repeat(9, minmax(82px, 1fr)); }

.pair-tabs { display: flex; gap: 7px; margin: 10px 0; overflow-x: auto; scrollbar-width: thin; }
.pair-tab {
  display: grid;
  min-width: 142px;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1117;
  color: #e9f1f7;
  text-align: left;
}
.pair-tab.active { border-color: #3b9678; background: #10281f; box-shadow: inset 0 -2px var(--green); }
.pair-tab strong { font-size: 11px; }
.pair-tab span { color: #d8e4ec; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.pair-tab small { grid-column: span 2; font-size: 8px; letter-spacing: .08em; }
.regime-text.RANGE, .regime.RANGE { color: var(--green); }
.regime-text.TREND_UP, .regime.TREND_UP { color: var(--cyan); }
.regime-text.TREND_DOWN, .regime.TREND_DOWN { color: var(--violet); }
.regime-text.SHOCK, .regime.SHOCK, .regime-text.DATA_DEGRADED, .regime.DATA_DEGRADED { color: var(--red); }
.regime-text.TRANSITION, .regime.TRANSITION { color: var(--amber); }

.workspace { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(300px, .8fr); gap: 8px; }
.panel { min-width: 0; padding: 14px; overflow: hidden; }
.panel-heading { display: flex; min-height: 35px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-kicker { color: #657688; font-size: 8px; }
.chart-panel { min-height: 430px; }
.chart-heading-tools { display: grid; justify-items: end; gap: 8px; }
.chart-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.chart-timeframes { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.chart-timeframes button { min-width: 36px; padding: 5px 7px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: #09131b; color: var(--muted); font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.chart-timeframes button:last-child { border-right: 0; }
.chart-timeframes button.active { background: #123426; color: var(--green); box-shadow: inset 0 -2px var(--green); }
.chart-controls > button { padding: 5px 8px; font-size: 9px; }
.chart-controls > button[hidden] { display: none; }
.chart-coverage { min-width: 118px; color: var(--muted); font: 700 8px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.chart-coverage.frozen { color: var(--amber); }
.grid-source { display: inline-flex; margin-top: 5px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 4px; color: var(--muted); font: 800 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.grid-source.demo { color: var(--cyan); }
.grid-source.canonical { color: var(--green); }
.legend { display: flex; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend-dot { display: inline-block; width: 12px; height: 2px; background: var(--line); }
.legend-dot.buy { background: var(--green); }
.legend-dot.sell { background: var(--red); }
.legend-dot.desired { border-top: 2px dashed var(--violet); background: transparent; }
.legend-dot.uncertain { border-top: 2px dashed var(--amber); background: transparent; }
.legend-dot.market { background: var(--cyan); }
.price-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 5px; }
.price-chip { display: flex; gap: 7px; padding: 5px 7px; border: 1px solid var(--line-soft); border-radius: 5px; background: #090f15; }
.price-chip span { color: var(--muted); font-size: 9px; }
.price-chip strong { font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ladder {
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:
    linear-gradient(rgba(40, 55, 69, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 55, 69, .13) 1px, transparent 1px), #080e14;
  background-size: 100% 20%, 10% 100%;
}
.ladder svg { width: 100%; height: 100%; overflow: visible; }
.ladder-line line { vector-effect: non-scaling-stroke; stroke-width: 1.2; opacity: .85; }
.ladder-line text { fill: #aebdca; font: 2.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ladder-line.market line { stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 2 2; }
.ladder-line.mark line { stroke: var(--amber); }
.ladder-line.bid line { stroke: #2a745c; }
.ladder-line.ask line { stroke: #7b3542; }
.ladder-line.order.buy line { stroke: var(--green); }
.ladder-line.order.sell line { stroke: var(--red); }
.ladder-line.order.desired line { stroke: var(--violet); stroke-dasharray: 4 3; opacity: .7; }
.ladder-line.order.uncertain line { stroke: var(--amber); stroke-dasharray: 8 3 2 3; }
.ladder-line.order.partial line { stroke: var(--amber); stroke-width: 2; }
.grid-corridor { fill: rgba(75, 211, 161, .07); stroke: rgba(75, 211, 161, .34); stroke-width: .45; vector-effect: non-scaling-stroke; }
.corridor-history { fill: rgba(108, 197, 255, .06); stroke: rgba(108, 197, 255, .22); stroke-width: .3; vector-effect: non-scaling-stroke; }
.corridor-history.rebuilt { fill: rgba(183, 131, 255, .11); stroke: rgba(183, 131, 255, .55); }
.corridor-center-history { fill: none; stroke: rgba(108, 197, 255, .72); stroke-width: .8; stroke-dasharray: 2 1; vector-effect: non-scaling-stroke; }
.ladder-line.grid line { stroke: rgba(104, 224, 181, .72); stroke-dasharray: 5 2; }
.ladder-line.grid.center_price line { stroke: rgba(108, 197, 255, .72); stroke-dasharray: 2 2; }
.ladder-line.position-reference.average-entry line { stroke: rgba(108, 197, 255, .88); stroke-dasharray: 6 2; }
.ladder-line.position-reference.break-even line { stroke: rgba(255, 201, 106, .9); stroke-dasharray: 3 2; }
.ladder-line.position-reference.liquidation line { stroke: var(--red); stroke-width: 1.8; stroke-dasharray: 8 2; }
.candle line { vector-effect: non-scaling-stroke; stroke-width: .65; }
.candle rect { vector-effect: non-scaling-stroke; stroke-width: .45; }
.candle.up line, .candle.up rect { stroke: rgba(93, 224, 170, .7); fill: rgba(93, 224, 170, .28); }
.candle.down line, .candle.down rect { stroke: rgba(255, 100, 124, .68); fill: rgba(255, 100, 124, .25); }
.live-price-line { fill: none; stroke: var(--cyan); stroke-width: 1.35; opacity: .92; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px rgba(80, 205, 255, .45)); }
.legend-dot.corridor { background: rgba(75, 211, 161, .25); border: 1px solid rgba(75, 211, 161, .7); }
.legend-dot.corridor-trail { background: rgba(108, 197, 255, .15); border-top: 2px dashed rgba(108, 197, 255, .8); }
.empty-state { margin: 110px auto 0; color: var(--muted); text-align: center; }
.ladder + .empty-state { position: relative; margin-top: -190px; }

.inspector { min-height: 430px; }
.regime { padding: 5px 7px; border: 1px solid currentColor; border-radius: 5px; font: 800 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.definition-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.definition-grid div { padding: 9px; border: 1px solid var(--line-soft); border-radius: 6px; background: #090f15; }
.definition-grid dt { color: var(--muted); font-size: 9px; }
.definition-grid dd { margin: 6px 0 0; font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.readiness { display: flex; justify-content: space-between; padding: 10px 0; border-block: 1px solid var(--line-soft); color: var(--muted); font-size: 10px; }
.readiness .ready { color: var(--green); }
.readiness .not-ready { color: var(--red); }
.demo-soak-panel { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 18, 27, .72); }
.demo-soak-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.demo-soak-heading div { display: flex; align-items: baseline; gap: 10px; }
.demo-soak-heading span, .demo-soak-heading small, .demo-soak-metrics span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.demo-soak-heading strong { color: var(--amber); }
.demo-soak-heading strong.HEALTHY { color: var(--green); }
.demo-soak-heading strong.HALTED { color: var(--red); }
.demo-soak-track { height: 7px; margin: 11px 0 13px; overflow: hidden; border-radius: 20px; background: var(--line-soft); }
.demo-soak-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .4s ease; }
.demo-soak-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.demo-soak-metrics div { display: flex; flex-direction: column; gap: 3px; }
.demo-soak-metrics strong { font-size: 13px; }
.demo-soak-violations { margin-top: 12px; color: var(--muted); font-size: 11px; }
.demo-soak-violations.blocked { color: var(--red); }
@media (max-width: 1000px) { .demo-soak-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.demo-control-panel { margin: 12px 0; padding: 14px 16px; border: 1px solid rgba(80, 205, 255, .32); border-radius: 12px; background: rgba(7, 22, 31, .92); }
.demo-control-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.demo-control-heading div { display: flex; align-items: baseline; gap: 10px; }
.demo-control-heading span, .demo-control-heading small, .demo-control-body label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.demo-control-heading strong { color: var(--cyan); font-size: 11px; }
.demo-control-body { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; align-items: center; gap: 10px; margin-top: 12px; }
.demo-control-body input { min-width: 0; }
.demo-control-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.demo-control-actions button { min-height: 36px; padding: 8px 11px; font-size: 10px; }
.demo-control-actions button.danger { border-color: rgba(255, 100, 124, .55); background: rgba(255, 100, 124, .12); color: #ff8ba0; }
.demo-control-actions button:disabled { cursor: not-allowed; opacity: .38; }
.demo-control-feedback { min-height: 16px; margin: 10px 0 0; color: var(--muted); font-size: 10px; }
.demo-control-feedback.success { color: var(--green); }
.demo-control-feedback.error { color: var(--red); }
.demo-control-note { margin: 5px 0 0; color: #718293; font-size: 9px; line-height: 1.45; }
@media (max-width: 1100px) { .demo-control-body { grid-template-columns: 1fr; } }
.demo-pnl-panel { margin: 12px 0; padding: 14px 16px; border: 1px solid rgba(62, 214, 156, .3); border-radius: 12px; background: rgba(7, 20, 25, .88); }
.demo-pnl-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.demo-pnl-heading div { display: flex; align-items: baseline; gap: 10px; }
.demo-pnl-heading span, .demo-pnl-heading small, .demo-pnl-equation span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.demo-pnl-heading strong { color: var(--green); font: 800 16px ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-pnl-equation { display: grid; grid-template-columns: repeat(11, auto); align-items: stretch; gap: 7px; margin-top: 12px; }
.demo-pnl-equation div { min-width: 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #091218; }
.demo-pnl-equation div.net { border-color: rgba(62, 214, 156, .4); background: rgba(21, 61, 50, .45); }
.demo-pnl-equation strong { display: block; margin-top: 5px; font: 750 13px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.demo-pnl-equation b { align-self: center; color: #607387; font: 700 15px ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-pnl-waterfall { display: grid; gap: 6px; margin-top: 12px; }
.demo-pnl-row { display: grid; grid-template-columns: 125px minmax(120px, 1fr) 110px; align-items: center; gap: 10px; }
.demo-pnl-label { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.demo-pnl-track { position: relative; height: 7px; border-radius: 8px; background: #101b23; }
.demo-pnl-center { position: absolute; left: 50%; top: -2px; width: 1px; height: 11px; background: #41515e; }
.demo-pnl-bar { position: absolute; top: 0; height: 7px; border-radius: 8px; }
.demo-pnl-bar.positive { background: linear-gradient(90deg, var(--cyan), var(--green)); }
.demo-pnl-bar.negative { background: linear-gradient(90deg, var(--red), var(--amber)); }
.demo-pnl-value { text-align: right; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.demo-pnl-evidence { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line-soft); color: #718596; font-size: 9px; }
.demo-pnl-empty { padding: 15px; color: var(--muted); text-align: center; font-size: 10px; }
@media (max-width: 1200px) { .demo-pnl-equation { grid-template-columns: repeat(3, 1fr); } .demo-pnl-equation b { display: none; } }
@media (max-width: 700px) { .demo-pnl-equation { grid-template-columns: 1fr 1fr; } .demo-pnl-row { grid-template-columns: 100px minmax(80px, 1fr) 80px; } }
.subheading { margin: 14px 0 8px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.reason-list { display: flex; flex-wrap: wrap; gap: 6px; }
.reason { padding: 6px 8px; border: 1px solid #4d4026; border-radius: 5px; background: #201b11; color: #d6b975; font-size: 9px; }
.indicator-list { display: grid; gap: 4px; max-height: 150px; overflow-y: auto; }
.indicator-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 7px; border-bottom: 1px solid var(--line-soft); }
.indicator-row div { display: grid; gap: 2px; min-width: 0; }
.indicator-row strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.indicator-row span { color: var(--muted); font-size: 8px; }
.indicator-row b, .indicator-row em { font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.indicator-row em { color: var(--muted); font-style: normal; }
.indicator-row.ready b { color: var(--green); }
.indicator-row.not-ready b { color: var(--red); }

.intelligence-panel { margin-top: 8px; }
.intelligence-heading { align-items: center; }
.intelligence-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.intelligence-note { max-width: 980px; margin: 5px 0 12px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.timeframe-grid, .flow-grid { display: grid; gap: 7px; }
.timeframe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 7px; }
.timeframe-grid article, .flow-grid article {
  display: grid;
  min-height: 82px;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: linear-gradient(145deg, #0b1219, #090f15);
}
.timeframe-grid article > span, .flow-grid article > span { color: #718495; font-size: 8px; letter-spacing: .09em; }
.timeframe-grid strong, .flow-grid strong { color: #e7f0f6; font: 800 15px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.timeframe-grid small, .flow-grid small { color: var(--muted); font-size: 8px; line-height: 1.35; }
.signal { width: fit-content; padding: 3px 6px; border: 1px solid currentColor; border-radius: 999px; font: 800 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.signal.up { color: var(--green); }
.signal.down { color: var(--red); }
.signal.flat { color: var(--amber); }
.signal.waiting { color: var(--muted); }
.flow-grid strong.pressure-long { color: var(--red); }
.flow-grid strong.pressure-short { color: var(--green); }
.flow-grid strong.pressure-balanced { color: var(--amber); }

.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.span-two { grid-column: span 2; }
.counter { min-width: 25px; padding: 3px 6px; border-radius: 10px; background: #1b2935; color: #a9bbc9; text-align: center; font-size: 9px; }
.counter.danger:not(:empty) { color: var(--red); }
.pager { display: flex; align-items: center; gap: 5px; }
.pager button { width: 25px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #101922; color: #dce5ec; }
.pager button:disabled { cursor: default; opacity: .3; }
.data-table { margin-top: 11px; overflow-x: auto; }
.table-row {
  display: grid;
  min-width: 620px;
  grid-template-columns: repeat(9, minmax(76px, 1fr));
  border-bottom: 1px solid var(--line-soft);
}
.table-row span { padding: 8px 7px; overflow: hidden; color: #c9d5de; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.table-header { position: sticky; top: 0; z-index: 1; background: #101820; }
.table-header span { color: #66798b; font: 800 8px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.orders-table { max-height: 330px; }
.orders-table .status-ACK_UNKNOWN span,
.orders-table .status-CANCEL_PENDING span,
.orders-table .status-RECONCILE_REQUIRED span,
.orders-table .status-SEND_JOURNALED span { color: var(--amber); }
.orders-table .status-REJECTED span { color: var(--red); }
.orders-table .status-FILLED span { color: #76c9ab; }
.fills-table { max-height: 330px; }
.fills-table .table-row { min-width: 470px; grid-template-columns: repeat(5, minmax(82px, 1fr)); }
.fills-table .maker span:last-child { color: var(--green); }
.fills-table .taker span:last-child { color: var(--amber); }
.pair-table .table-row { min-width: 470px; grid-template-columns: repeat(5, minmax(82px, 1fr)); }
.table-empty { padding: 18px 7px; color: var(--muted); font-size: 10px; }
.key-values, .health-list, .event-list { display: grid; gap: 6px; margin-top: 11px; }
.key-value, .health-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-bottom: 1px solid var(--line-soft); }
.key-value span, .health-row span { color: var(--muted); font-size: 9px; text-transform: capitalize; }
.key-value strong, .health-row b { font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.health-row div { display: grid; gap: 2px; min-width: 0; }
.health-row strong { font-size: 10px; overflow-wrap: anywhere; }
.health-row.FRESH b { color: var(--green); }

@media (max-width: 1100px) {
  .canonical-tables { grid-template-columns: 1fr; }
  .metrics-canonical { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}
.health-row.STALE b { color: var(--amber); }
.health-row.GAP b { color: var(--red); }
.event-list { max-height: 330px; overflow-y: auto; }
.event-item { display: flex; padding: 9px; border-left: 2px solid #375064; background: #090f15; }
.event-item.WARNING { border-color: var(--amber); }
.event-item.CRITICAL { border-color: var(--red); }
.event-copy { display: grid; gap: 3px; }
.event-copy strong { font-size: 10px; }
.event-copy span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.timeline-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.empty-inline { margin: 8px 0; color: var(--muted); font-size: 10px; }
.healthy-copy { color: var(--green); }

footer { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px; color: #617184; font-size: 9px; }
#dashboard.disconnected .metrics, #dashboard.disconnected .workspace, #dashboard.disconnected .detail-grid, #dashboard.disconnected .pair-tabs { opacity: .38; filter: saturate(.4); }

@media (max-width: 1300px) {
  .share-panel { grid-template-columns: 1fr 2fr; }
  .metrics-primary { grid-template-columns: repeat(4, 1fr); }
  .metrics-paper { grid-template-columns: repeat(4, 1fr); }
  .metrics-paper-portfolio { grid-template-columns: repeat(3, 1fr); }
  .metrics-paper-robustness { grid-template-columns: repeat(3, 1fr); }
  .state-group { gap: 14px; }
  .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  main { width: min(100% - 18px, 1760px); }
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .state-group { order: 3; width: 100%; justify-content: space-between; }
  .workspace { grid-template-columns: 1fr; }
  .timeframe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .span-two { grid-column: span 2; }
}
@media (max-width: 660px) {
  main { width: min(100% - 12px, 1760px); padding-top: 6px; }
  .topbar { top: 3px; }
  .share-panel { grid-template-columns: 1fr; }
  .share-policy-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-actions { justify-content: flex-start; }
  .identity { min-width: 0; }
  .state-group { display: grid; grid-template-columns: 1fr 1fr; }
  .metrics-primary { grid-template-columns: repeat(2, 1fr); }
  .metrics-paper { grid-template-columns: repeat(2, 1fr); }
  .metrics-paper-portfolio { grid-template-columns: repeat(2, 1fr); }
  .metrics-paper-robustness { grid-template-columns: repeat(2, 1fr); }
  .metrics article { min-height: 86px; }
  .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-rail { align-items: flex-start; flex-direction: column; }
  .status-meta { width: 100%; justify-content: space-between; }
  .detail-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .timeline-list { grid-template-columns: 1fr; }
  .chart-panel, .inspector { min-height: auto; }
  .panel-heading, .chart-heading-tools { align-items: stretch; justify-items: stretch; }
  .chart-controls { justify-content: flex-start; }
  .chart-coverage { width: 100%; text-align: left; }
  .ladder { height: 300px; }
  footer { flex-direction: column; }
}