:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101416; color: #e7eeee; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #101416; }
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 36px; }
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #2c3638; }
.eyebrow { display: block; color: #72b9aa; font-size: 11px; letter-spacing: 1px; }
h1 { margin: 6px 0 0; color: #edf4f3; font-size: clamp(23px, 3vw, 30px); font-weight: 650; letter-spacing: 0; line-height: 1.2; }
h2 { margin: 0; color: #e4eceb; font-size: 15px; font-weight: 650; }
p { margin: 4px 0 0; color: #839294; font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.status { min-width: 62px; border: 1px solid #3b5f57; color: #9ed9c8; padding: 7px 9px; text-align: center; font-size: 11px; font-weight: 650; letter-spacing: .4px; }
.status[data-tone="stale"] { border-color: #7b6235; color: #e8c47a; }
.status[data-tone="offline"] { border-color: #76404a; color: #f0a3ad; }
.status[data-tone="starting"] { border-color: #4c5960; color: #c0ced0; }
.reset-current { height: 32px; border: 1px solid #6d3842; border-radius: 6px; background: #241418; color: #eea0aa; padding: 0 10px; cursor: pointer; }
.reset-current:hover { border-color: #ab5361; }.reset-current:disabled { opacity: .55; cursor: not-allowed; }
.strategy-strip, .metrics { display: grid; gap: 1px; border: 1px solid #2e383a; background: #2e383a; }
.strategy-strip { grid-template-columns: 1fr 1fr 1fr 1.35fr; margin: 18px 0 12px; }
.strategy-strip div { min-width: 0; padding: 10px 14px; background: #151b1d; }
.strategy-strip span, .metrics span { display: block; color: #849396; font-size: 11px; }
.strategy-strip strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #cbd7d6; font-size: 12px; font-weight: 600; }
.metrics { grid-template-columns: repeat(5, 1fr); margin-bottom: 18px; }
.metrics div { min-width: 0; padding: 13px 14px; background: #171e20; }
.metrics strong { display: block; margin-top: 6px; overflow-wrap: anywhere; color: #f0f5f4; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
article, .positions-panel, .chart-panel { padding: 15px 0; border-top: 1px solid #344044; }
.positions-panel { margin-top: 6px; }
.panel-head, .chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.count { min-width: 42px; border: 1px solid #405055; color: #a9d8cf; padding: 4px 7px; text-align: center; font: 12px ui-monospace, monospace; }
.tier-list, .breaker-list, .positions { border-bottom: 1px solid #293336; }
.tier-row, .breaker-row, .position { display: grid; gap: 10px; padding: 8px 0; border-top: 1px solid #293336; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.25; }
.tier-row { grid-template-columns: minmax(120px, 1.15fr) 58px minmax(115px, 1fr) minmax(105px, .9fr); }
.breaker-row { grid-template-columns: 1fr auto; }.position { grid-template-columns: minmax(150px, 1fr) repeat(3, auto); align-items: center; }
.tier-name, .position-name { color: #e1ebea; }.tier-row small, .position small, .breaker-row small { display: block; margin-top: 3px; color: #79898c; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.state { justify-self: start; border: 1px solid #435157; color: #aebbbc; padding: 3px 5px; font-size: 10px; }.state.open { border-color: #2f7462; color: #6fd0ad; }.state.halted { border-color: #8a682d; color: #ebc675; }.state.flat { border-color: #455258; color: #aebabc; }
.metric { color: #cad6d5; text-align: right; font-variant-numeric: tabular-nums; }.metric.warn { color: #e8c477; }.metric.negative { color: #ef9aa5; }
.empty { padding: 14px 0; color: #829194; font-size: 12px; }
.chart-panel { margin-top: 6px; }.ranges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.ranges button { min-width: 46px; height: 30px; border: 1px solid #35454a; border-radius: 6px; background: #171e20; color: #9dafb2; cursor: pointer; }.ranges button:hover { border-color: #4f8b7f; color: #c8e5df; }.ranges button.active { border-color: #3e9a88; background: #17362f; color: #cef1e8; }
.chart-wrap { position: relative; width: 100%; }#chart { display: block; width: 100%; height: 412px; border: 1px solid #2e393d; background: #131a1d; }.chart-tooltip { position: absolute; z-index: 2; display: none; width: 178px; padding: 9px 10px; border: 1px solid #cfd7d8; border-radius: 5px; background: #f3f7f6; color: #263033; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); pointer-events: none; font-size: 12px; }.chart-tooltip.visible { display: grid; gap: 4px; }.chart-tooltip strong { font-size: 12px; }.chart-tooltip span { display: block; }
footer { padding-top: 12px; color: #748386; font-size: 11px; }
@media (max-width: 900px) { .strategy-strip, .metrics { grid-template-columns: repeat(2, 1fr); }.layout { grid-template-columns: 1fr; gap: 0; }.tier-row { grid-template-columns: 1fr 58px; }.tier-row .metric { text-align: left; }.position { grid-template-columns: 1fr 1fr; }.chart-head { flex-direction: column; }.ranges { justify-content: flex-start; } }
@media (max-width: 620px) { main { width: min(100% - 24px, 1120px); padding-top: 18px; } header { display: block; }.header-actions { margin-top: 14px; }.strategy-strip, .metrics { grid-template-columns: 1fr 1fr; }.strategy-strip div, .metrics div { padding: 10px; }.metrics strong { font-size: 19px; }.tier-row, .position { grid-template-columns: 1fr; gap: 5px; }.metric { text-align: left; }#chart { height: 345px; } }