:root{--bg-base:#08090c;--bg-surface:#0e1015;--bg-raised:#14161d;--bg-card:#181b24;--bg-card-hover:#1d2029;--bg-inset:#0b0c10;--bg-overlay:#0e1015d9;--accent:#5b9bd5;--accent-dim:#5b9bd51f;--accent-subtle:#5b9bd50f;--accent-bright:#78b4e8;--ok:#4caf7c;--ok-dim:#4caf7c1a;--warn:#d4a04a;--warn-dim:#d4a04a1a;--danger:#c65d57;--danger-dim:#c65d571a;--info:#5b9bd5;--info-dim:#5b9bd514;--kp-quiet:#4caf7c;--kp-active:#b8a640;--kp-minor:#d4a04a;--kp-moderate:#c87a4a;--kp-strong:#c65d57;--kp-severe:#a8413b;--kp-extreme:#8b2f2a;--q-fresh:#4caf7c;--q-delayed:#d4a04a;--q-sparse:#c87a4a;--q-interpolated:#8a6cbf;--q-fallback:#c65d57;--text-primary:#d4d7de;--text-secondary:#868b96;--text-tertiary:#545862;--text-bright:#ebedf2;--border:#ffffff0d;--border-hover:#ffffff1a;--border-active:#5b9bd540;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--r-sm:4px;--r-md:8px;--r-lg:12px;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 2px 8px #00000059;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Fira Code", monospace;--text-xs:.6875rem;--text-sm:.75rem;--text-base:.8125rem;--text-md:.875rem;--text-lg:1rem;--text-xl:1.125rem;--ease:cubic-bezier(.4, 0, .2, 1);--dur-fast:.12s;--dur-normal:.2s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-base);color:var(--text-primary);min-height:100vh;line-height:1.55;overflow-x:hidden}button{font-family:inherit}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app-container{flex-direction:column;min-height:100vh;display:flex}.dashboard-grid{gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);flex:1;grid-template-columns:repeat(3,1fr);width:100%;max-width:1600px;margin:0 auto;display:grid}@media (width<=1100px){.dashboard-grid{padding:var(--sp-3);grid-template-columns:repeat(2,1fr)}}@media (width<=720px){.dashboard-grid{gap:var(--sp-2);padding:var(--sp-2);grid-template-columns:1fr}}.app-header{padding:var(--sp-3) var(--sp-5);background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-header__title{align-items:baseline;gap:var(--sp-3);display:flex}.app-header__title h1{font-size:var(--text-md);color:var(--text-bright);letter-spacing:-.01em;font-weight:600}.app-header__title .subtitle{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;font-weight:500}.app-header__status{align-items:center;gap:var(--sp-3);display:flex}.header-btn{background:var(--bg-raised);border:1px solid var(--border);color:var(--text-secondary);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;font-size:var(--text-xs);transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);font-weight:500}.header-btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-hover)}.header-btn:disabled{opacity:.35;cursor:not-allowed}.header-btn--active{color:var(--accent);border-color:var(--border-active)}.status-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.status-dot--fresh{background:var(--q-fresh)}.status-dot--delayed{background:var(--q-delayed)}.status-dot--sparse{background:var(--q-sparse)}.status-dot--interpolated{background:var(--q-interpolated)}.status-dot--fallback{background:var(--q-fallback);animation:2s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow-sm);transition:border-color var(--dur-normal) var(--ease);flex-direction:column;display:flex;position:relative;overflow:hidden}.panel:hover{border-color:var(--border-hover)}.panel--degraded{border-color:#d4a04a33}.panel--degraded:after{content:"DEGRADED";top:var(--sp-2);right:var(--sp-2);letter-spacing:.1em;color:var(--warn);background:var(--warn-dim);border-radius:3px;padding:1px 6px;font-size:9px;font-weight:600;position:absolute}.panel--span-2{grid-column:span 2}@media (width<=720px){.panel--span-2{grid-column:span 1}}.panel__header{margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.panel__title{font-size:var(--text-sm);color:var(--text-primary);letter-spacing:.01em;font-weight:600}.panel__meta{align-items:center;gap:var(--sp-2);display:flex}.panel__body{gap:var(--sp-2);flex-direction:column;flex:1;display:flex}.badge{letter-spacing:.03em;border-radius:3px;align-items:center;gap:3px;padding:1px 6px;font-size:10px;font-weight:500;line-height:1.6;display:inline-flex}.badge--simulation{background:var(--accent-dim);color:var(--accent)}.badge--official{background:var(--ok-dim);color:var(--ok)}.badge--quality{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-size:9px}.kp-gauge{align-items:center;gap:var(--sp-2);flex-direction:column;display:flex}.kp-gauge__value{font-family:var(--font-mono);font-size:var(--text-xl);transition:color var(--dur-normal) var(--ease);font-weight:700}.kp-gauge__bar{background:var(--bg-inset);border-radius:3px;width:100%;height:6px;overflow:hidden}.kp-gauge__fill{height:100%;transition:width var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);border-radius:3px}.kp-gauge__label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;font-weight:500}.impact-grid{gap:var(--sp-2);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=720px){.impact-grid{grid-template-columns:1fr}}.impact-card{background:var(--bg-raised);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);border-left:2px solid var(--text-tertiary)}.impact-card--none{border-left-color:var(--kp-quiet)}.impact-card--low{border-left-color:var(--kp-active)}.impact-card--moderate{border-left-color:var(--kp-moderate)}.impact-card--high{border-left-color:var(--kp-strong)}.impact-card--severe{border-left-color:var(--kp-severe)}.impact-card__title{font-size:var(--text-xs);color:var(--text-tertiary);margin-bottom:1px}.impact-card__level{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;font-weight:600}.impact-card__explanation{font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.45}.metric-row{padding:var(--sp-1) 0;border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;display:flex}.metric-row:last-child{border-bottom:none}.metric-label{font-size:var(--text-xs);color:var(--text-secondary)}.metric-value{font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-bright);font-weight:600}.metric-unit{font-size:var(--text-xs);color:var(--text-tertiary);margin-left:3px}.alert-list{gap:var(--sp-2);flex-direction:column;display:flex}.alert-item{align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);font-size:var(--text-xs);border-left:2px solid #0000;line-height:1.5;display:flex}.alert-item--info{background:var(--info-dim);color:var(--info);border-left-color:var(--info)}.alert-item--warning{background:var(--warn-dim);color:var(--warn);border-left-color:var(--warn)}.alert-item--danger{background:var(--danger-dim);color:var(--danger);border-left-color:var(--danger)}.alert-item--success{background:var(--ok-dim);color:var(--ok);border-left-color:var(--ok)}.playback-bar{align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);background:var(--bg-surface);border-bottom:1px solid var(--border);flex-wrap:wrap;display:flex}.playback-bar__modes{background:var(--bg-inset);border-radius:var(--r-sm);gap:1px;padding:2px;display:flex}.playback-mode-btn{color:var(--text-tertiary);font-family:var(--font-mono);font-size:var(--text-xs);cursor:pointer;transition:all var(--dur-fast) var(--ease);letter-spacing:.03em;background:0 0;border:none;border-radius:3px;padding:3px 10px;font-weight:600}.playback-mode-btn:hover{color:var(--text-secondary)}.playback-mode-btn--active{background:var(--bg-raised);color:var(--text-primary)}.playback-mode-btn--live.playback-mode-btn--active{color:var(--ok)}.playback-bar__scrubber{align-items:center;gap:var(--sp-2);flex:1;min-width:180px;display:flex}.playback-bar__time{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-tertiary);white-space:nowrap}.playback-bar__current-time{color:var(--accent);white-space:nowrap;font-weight:500;font-family:var(--font-mono);font-size:var(--text-xs)}.playback-slider{appearance:none;background:var(--bg-inset);cursor:pointer;border-radius:2px;outline:none;flex:1;height:3px}.playback-slider:disabled{opacity:.2;cursor:not-allowed}.playback-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--bg-surface);cursor:pointer;border-radius:50%;width:10px;height:10px}.playback-bar__controls{align-items:center;gap:var(--sp-2);display:flex}.playback-btn{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-raised);width:28px;height:28px;color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:border-color var(--dur-fast) var(--ease);justify-content:center;align-items:center;display:flex}.playback-btn:hover:not(:disabled){border-color:var(--border-hover);color:var(--text-primary)}.playback-btn:disabled{opacity:.2;cursor:not-allowed}.playback-speed-group{gap:1px;display:flex}.playback-speed-btn{border:1px solid var(--border);color:var(--text-tertiary);font-family:var(--font-mono);cursor:pointer;transition:all var(--dur-fast) var(--ease);background:0 0;border-radius:3px;padding:3px 6px;font-size:10px}.playback-speed-btn:hover:not(:disabled){color:var(--text-secondary);border-color:var(--border-hover)}.playback-speed-btn--active{background:var(--bg-raised);color:var(--accent);border-color:var(--border-active)}.playback-speed-btn:disabled{opacity:.2;cursor:not-allowed}@media (width<=720px){.playback-bar{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)}.playback-bar__current-time{display:none}.playback-bar__scrubber{flex-basis:100%;order:3}}.preset-selector{padding:var(--sp-1) var(--sp-5);background:var(--bg-base);border-bottom:1px solid var(--border);gap:2px;display:flex;overflow-x:auto}.preset-btn{border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-tertiary);font-family:var(--font-sans);font-size:var(--text-xs);cursor:pointer;white-space:nowrap;transition:all var(--dur-fast) var(--ease);background:0 0;padding:3px 10px}.preset-btn:hover{color:var(--text-secondary);border-color:var(--border-hover)}.preset-btn--active{background:var(--bg-raised);color:var(--accent);border-color:var(--border-active)}.chart-container{width:100%;position:relative}.chart-svg{width:100%;display:block}.chart-grid{stroke:var(--border);stroke-width:.5px}.chart-cursor{stroke:var(--danger);stroke-width:1px;stroke-dasharray:3 3;opacity:.7}.chart-tick-label{font-family:var(--font-mono);fill:var(--text-tertiary);font-size:9px}.chart-axis-label{font-family:var(--font-sans);fill:var(--text-tertiary);font-size:9px;font-weight:500}.chart-marker-label{font-family:var(--font-mono);font-size:8px;font-weight:600}.chart-legend{gap:var(--sp-3);padding:2px var(--sp-2);font-size:var(--text-xs);color:var(--text-tertiary);display:flex}.chart-legend-item{align-items:center;gap:3px;display:flex}.chart-legend-color{border-radius:50%;width:8px;height:8px;display:inline-block}.disclaimer{text-align:center;font-size:var(--text-xs);color:var(--text-tertiary);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);background:var(--bg-surface);line-height:1.7}.loading-skeleton{background:linear-gradient(90deg, var(--bg-raised) 0%, var(--bg-card-hover) 50%, var(--bg-raised) 100%);border-radius:var(--r-sm);background-size:200% 100%;height:16px;animation:1.8s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-state{padding:var(--sp-8);color:var(--text-tertiary);font-size:var(--text-xs);text-align:center;justify-content:center;align-items:center;gap:var(--sp-2);flex-direction:column;display:flex}.text-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm)}.text-xs{font-size:var(--text-xs)}.text-muted{color:var(--text-tertiary)}.text-secondary{color:var(--text-secondary)}.text-center{text-align:center}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}