:root {
  --graphite-950:#0c1116;
  --graphite-900:#111820;
  --graphite-800:#19232d;
  --graphite-700:#263440;
  --warm:#f3efe5;
  --muted:#aab4bc;
  --blue:#5fb3ff;
  --amber:#f4b942;
  --red:#ff5c66;
  --green:#69d29b;
  --line:#334553;
  --focus:#b9dcff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--warm);
  background:var(--graphite-950);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 55% 10%,#172430 0,var(--graphite-950) 48%);min-height:100vh}
button,select,input{font:inherit}
button{color:var(--warm);background:var(--graphite-700);border:1px solid #405463;border-radius:8px;padding:.55rem .75rem;cursor:pointer}
button:hover{border-color:var(--blue)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
button.danger{background:#5d2027;border-color:var(--red)}
button.ghost{background:transparent}
.skip-link{position:fixed;top:-4rem;left:1rem;z-index:50;background:var(--warm);color:#111;padding:.6rem}
.skip-link:focus{top:1rem}
.topbar{min-height:92px;display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:rgba(12,17,22,.94);position:sticky;top:0;z-index:20}
.topbar h1,.panel h2{margin:0}
.eyebrow{margin:0 0 .2rem;color:var(--blue);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.kpis{display:flex;gap:.65rem;margin-left:auto}
.kpi{min-width:120px;border-left:2px solid var(--line);padding-left:.65rem}
.kpi span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase}
.kpi strong{font-variant-numeric:tabular-nums}
.shell{display:grid;grid-template-columns:minmax(220px,17%) minmax(540px,1fr) minmax(280px,23%);grid-template-areas:"assets site inspector" "tutorial site inspector" "alerts market planning" "debrief debrief planning";gap:12px;padding:12px 12px 92px;max-width:1920px;margin:auto}
.panel{background:rgba(17,24,32,.95);border:1px solid var(--line);border-radius:12px;min-width:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.8rem 1rem;border-bottom:1px solid #263640}
.panel-head h2{font-size:1rem}
.assets{grid-area:assets}.tutorial{grid-area:tutorial}.site{grid-area:site}.inspector{grid-area:inspector}.alerts{grid-area:alerts}.market{grid-area:market}.planning{grid-area:planning}.debrief{grid-area:debrief}
.hint,.legend{color:var(--muted);font-size:.75rem}
.asset-card,.incident,.task,.commitment,.debrief-row{padding:.75rem 1rem;border-bottom:1px solid #24323d}
.asset-card{display:block;width:100%;text-align:left;background:transparent;border-width:0 0 1px;border-radius:0}
.asset-card[aria-current="true"]{background:#18334b;box-shadow:inset 3px 0 var(--blue)}
.asset-meta,.metric-row{display:flex;justify-content:space-between;gap:.75rem;color:var(--muted);font-size:.8rem}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.12rem .45rem;font-size:.72rem}
.badge.good{color:var(--green);border-color:#327757}.badge.warn{color:var(--amber);border-color:#7d6129}.badge.critical{color:var(--red);border-color:#7d3037}
.site-canvas{min-height:390px;padding:12px;background:linear-gradient(#142431 0 44%,#18252a 44% 100%)}
.site-canvas.night{background:linear-gradient(#09131d 0 44%,#131d22 44% 100%)}
.site-svg{width:100%;height:100%;min-height:360px}
.unit-shape{fill:#273743;stroke:#536a79;stroke-width:2}.unit-shape.selected{stroke:var(--blue);stroke-width:4}.unit-shape.attention{stroke:var(--amber)}
.flow{stroke:#5fb3ff;stroke-width:4;stroke-dasharray:10 10;opacity:.18}.flow.active{opacity:.9;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.site-label{fill:var(--warm);font-size:18px;font-weight:700}.site-sub{fill:#afbbc4;font-size:13px}
.swatch{display:inline-block;width:.65rem;height:.65rem;border-radius:2px;margin:0 .25rem 0 .5rem}.selection{background:var(--blue)}.attention{background:var(--amber)}
.inspector-body{padding:1rem}.inspector-body h3{margin:.2rem 0 .8rem}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.75rem 0}.group-list{list-style:none;padding:0;margin:.75rem 0}.group-list li{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed #33404a}
.incident strong,.task strong,.commitment strong{display:block;margin-bottom:.25rem}
.incident-actions,.task-actions,.commitment-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.empty,.error{padding:1rem;color:var(--muted)}.error{color:var(--red)}
.forecast{padding:1rem}.forecast svg{width:100%;height:150px}.forecast-band{fill:rgba(95,179,255,.14);stroke:#5fb3ff}.forecast-dot{fill:var(--blue)}.observed-dot{fill:var(--warm)}.chart-label{fill:var(--muted);font-size:11px}
.timebar{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;background:#0b1117f2;border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.timebar>div:first-child{min-width:250px}.paused{display:block;color:var(--muted);font-size:.72rem}.time-actions{display:flex;gap:.4rem}.feedback{margin-left:auto;max-width:48%;font-size:.8rem}.feedback.ok{color:var(--green)}.feedback.bad{color:var(--red)}.feedback.pending{color:var(--amber)}
dialog{color:var(--warm);background:var(--graphite-900);border:1px solid var(--line);border-radius:12px;max-width:480px}dialog::backdrop{background:#000a}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:1450px){.shell{grid-template-columns:220px minmax(520px,1fr) 280px}.site-canvas{min-height:330px}.kpi{min-width:100px}}
@media (max-width:1100px){.shell{grid-template-columns:1fr 1fr;grid-template-areas:"site site" "tutorial tutorial" "assets inspector" "alerts market" "planning planning" "debrief debrief"}.topbar{flex-wrap:wrap}.kpis{order:3;width:100%;margin:0}.feedback{max-width:none}.timebar{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.flow.active{animation:none;stroke-dasharray:none}}

.persist-actions{display:flex;gap:.35rem}
.footer-feedback{margin-left:auto;max-width:48%;text-align:right}
.footer-feedback .feedback{max-width:none;margin-left:0}
.persistence-feedback{color:var(--muted);font-size:.72rem;margin-top:.2rem}
.persistence-feedback.ok{color:var(--green)}
.persistence-feedback.bad{color:var(--red)}
@media (max-width:1100px){.persist-actions{order:2}.footer-feedback{max-width:none;width:100%;text-align:left;margin-left:0}}

.tutorial-content{padding:.8rem 1rem}
.tutorial-content ol{margin:.2rem 0 .8rem;padding-left:1.25rem;color:var(--muted);font-size:.82rem}
.tutorial-content li{margin:.35rem 0}
.tutorial-content strong{color:var(--warm)}
.tutorial-complete{color:var(--green)!important}


/* Real-time simulation clock */
.timebar{min-height:76px;padding:.65rem 1.1rem;gap:1.25rem}
.time-readout{min-width:250px;display:flex;flex-direction:column;gap:.2rem}
.time-clock-row{display:flex;align-items:center;gap:.7rem}
.time-clock-row strong{font-size:1.1rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.time-clock-icon{width:25px;height:25px;border:2px solid #9fb4c3;border-radius:50%;position:relative;opacity:.9}
.time-clock-icon::before{content:"";position:absolute;width:2px;height:7px;background:#9fb4c3;left:10px;top:4px;border-radius:2px}
.time-clock-icon::after{content:"";position:absolute;width:6px;height:2px;background:#9fb4c3;left:10px;top:11px;transform:rotate(25deg);transform-origin:left center;border-radius:2px}
.time-status{display:flex;align-items:center;gap:.45rem;margin-left:2.05rem;color:#b8c5ce;font-size:.76rem}
.time-live-dot,.time-pause-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.time-live-dot{background:#43dd88;box-shadow:0 0 10px rgba(67,221,136,.65)}
.time-pause-dot{background:#7f909d}
.time-status.is-paused{color:#8998a4}
.time-controls{display:flex;align-items:center;gap:.7rem;padding-left:1rem;border-left:1px solid #2d4250}
.time-toggle{width:46px;height:42px;padding:0;display:grid;place-items:center;border-color:#4e7592;background:linear-gradient(180deg,#213647,#172531);box-shadow:inset 0 0 0 1px rgba(95,179,255,.08)}
.time-toggle:hover{border-color:#6fc0ff;background:#223c50}
.pause-glyph{width:14px;height:17px;position:relative}
.pause-glyph::before,.pause-glyph::after{content:"";position:absolute;top:0;width:4px;height:17px;border-radius:2px;background:#d8efff;box-shadow:0 0 7px rgba(95,179,255,.45)}
.pause-glyph::before{left:1px}.pause-glyph::after{right:1px}
.time-toggle.is-paused .pause-glyph::before{left:2px;top:0;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #d8efff;background:transparent;border-radius:0;box-shadow:none}
.time-toggle.is-paused .pause-glyph::after{display:none}
.speed-selector{display:grid;grid-template-columns:repeat(5,minmax(54px,72px));border:1px solid #344e60;border-radius:10px;overflow:hidden;background:#14212b}
.speed-selector button{border:0;border-right:1px solid #344e60;border-radius:0;background:linear-gradient(180deg,#20313f,#17242e);color:#9fb0bc;padding:.65rem .7rem;font-weight:700;font-variant-numeric:tabular-nums}
.speed-selector button:last-child{border-right:0}
.speed-selector button:hover{background:#223747;color:#dbeefa}
.speed-selector button.active,.speed-selector button[aria-pressed="true"]{color:#f2f8ff;background:linear-gradient(180deg,#28659a,#174976);box-shadow:inset 0 0 0 1px #64baff,0 0 14px rgba(66,166,255,.16)}
@media (max-width:1100px){
  .timebar{align-items:center}
  .time-readout{min-width:190px}
  .time-controls{padding-left:.65rem}
  .speed-selector{grid-template-columns:repeat(5,minmax(46px,1fr))}
}