:root{color-scheme:dark;--bg:#101214;--band:#171a1d;--panel:#202428;--line:#343b42;--text:#eef3f6;--muted:#9aa8b2;--accent:#41c7b9;--amber:#f2b84b;--red:#e06060;--green:#82d173;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:0}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px}
body.crt:before{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);mix-blend-mode:overlay;opacity:.35}
body.crt .card,body.crt aside{box-shadow:0 0 18px rgba(65,199,185,.08),inset 0 0 16px rgba(65,199,185,.025)}
button,input,select,textarea{font:inherit}
button{border:1px solid var(--line);background:#263139;color:var(--text);border-radius:6px;padding:9px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary,#runBtn{background:var(--accent);color:#071210;border-color:transparent;font-weight:700}
.ghost{background:transparent}
input,select,textarea{width:100%;background:#0d0f11;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:8px}
label{display:grid;gap:5px;color:var(--muted);font-size:12px}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,#111518,#0b0d0f)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px}
.login-panel{width:min(420px,92vw);padding:24px;display:grid;gap:14px}
.login-panel h1{margin:0;font-size:32px}
.login-panel p{margin:0;color:var(--muted)}
output{color:var(--red)}
main{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
aside{background:#0c0e10;border-right:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:16px}
.brand{font-size:20px;font-weight:800}
nav{display:grid;gap:4px}
nav button{text-align:left;background:transparent;border-color:transparent;color:var(--muted)}
nav button.active{background:#1d262b;color:var(--text);border-color:#28353c}
.focus-mode nav button[data-basic=no]{display:none}
.workspace{min-width:0}
header{position:sticky;top:0;z-index:2;background:rgba(16,18,20,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
h1{margin:0;font-size:24px}
h2{font-size:16px;margin:0 0 8px}
h3{font-size:13px;margin:0 0 8px;color:var(--muted);text-transform:uppercase}
#notice{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.45;max-width:780px}
.status{display:flex;align-items:center;gap:12px;white-space:nowrap}
#content{padding:18px 22px;display:grid;gap:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;min-width:0}
.hint{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.45}
.guide{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.step{display:grid;grid-template-columns:36px 1fr;gap:10px;text-align:left;background:#171b1e;padding:12px;min-height:92px}
.step b{display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:#071210;border-radius:50%}
.step span{display:grid;gap:4px;color:var(--muted);line-height:1.35}
.step strong{color:var(--text)}
.callout{display:grid;gap:4px;margin:0 0 12px;padding:12px;border:1px solid #36545a;background:#142126;border-radius:8px}
.callout span{color:var(--muted);line-height:1.4}
.confidence{display:grid;gap:8px;margin:0 0 16px}
.confidence b{font-size:18px}
.confidence span{color:var(--muted);font-size:13px;line-height:1.4}
.meter{height:12px;background:#111518;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--amber),var(--green))}
.converter{display:grid;gap:10px}
.conv{display:grid;grid-template-columns:180px minmax(90px,1fr) 100px 24px minmax(90px,1fr) 100px;gap:8px;align-items:center;padding:10px;background:#171b1e;border:1px solid var(--line);border-radius:8px}
.conv b{font-size:13px}
.conv output{color:var(--text);font-size:18px;font-weight:800;text-align:right;overflow-wrap:anywhere}
.conv span{color:var(--muted);text-align:center}
.stackGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.modifierGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.stackCard,.modifier{display:grid;grid-template-columns:24px 1fr;align-items:start;gap:10px;min-height:74px;padding:12px;background:#171b1e;border:1px solid var(--line);border-radius:8px;color:var(--text)}
.stackCard:has(input:checked),.modifier:has(input:checked){border-color:var(--accent);background:#142126}
.stackCard input,.modifier input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.stackCard span,.modifier span{display:grid;gap:5px}
.stackCard b,.modifier b{font-size:14px;line-height:1.25}
.stackCard small,.modifier small{color:var(--muted);line-height:1.35}
.stackControls{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;margin-top:12px}
.stackControls output{color:var(--text);font-size:13px}
.readout{display:grid;gap:10px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{border-left:3px solid var(--accent);background:#171b1e;padding:10px;border-radius:6px}
.kpi b{display:block;font-size:22px;overflow-wrap:anywhere}
.kpi span{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600}
.timeline{display:grid;gap:7px}
.barrow{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:8px}
.track{height:24px;background:#111518;border:1px solid var(--line);position:relative;border-radius:5px;overflow:hidden}
.bar{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.8}
.phase{background:#3b82f6}
.exp{background:var(--amber)}
.chart{width:100%;height:320px;background:#111518;border:1px solid var(--line);border-radius:6px}
.liveShell{display:grid;gap:14px}
.labTop{position:sticky;top:86px;z-index:1;display:grid;gap:10px;background:#111518;border:1px solid var(--line);border-radius:8px;padding:12px}
.liveButtons{display:flex;gap:8px;flex-wrap:wrap}
.panelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.panelHead h2{margin-bottom:4px}
.rwPanel{display:grid;gap:8px;margin-top:12px}
.rwRow{display:grid;grid-template-columns:minmax(180px,1.6fr) 1.1fr .55fr .55fr .55fr 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px;background:#111518}
.rwRow.active{border-color:var(--accent);background:#101b1a}
.rwRow b{display:block;line-height:1.25;overflow-wrap:anywhere}
.rwRow span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.statusBadge{display:inline-block;width:max-content;margin-bottom:4px;padding:3px 7px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:#171b1e;text-transform:capitalize}
.statusBadge.running{border-color:var(--amber);color:var(--amber)}
.statusBadge.not_started{color:var(--muted)}
.statusBadge.seeded_only{border-color:#8b5cf6;color:#c4b5fd}
.statusBadge.needs_deeper{border-color:#3b82f6;color:#93c5fd}
.statusBadge.researched{border-color:var(--green);color:var(--green)}
.miniActions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.miniActions button{min-width:86px}
.timeScrub{grid-template-columns:120px 1fr 92px;align-items:center}
.pixelPanel{background:#121815}
.pixelBox{font-family:"Courier New",monospace;display:grid;gap:10px;border:2px solid var(--accent);padding:12px;background:#08110f;color:#c9fff6;text-shadow:0 0 8px rgba(65,199,185,.35)}
.pixelHead{text-align:center;line-height:1.35;color:var(--accent);font-weight:800}
.avatar{height:150px;display:grid;place-items:center;background:linear-gradient(180deg,#07100e,#111b17);border:1px solid #1d5e56}
.avatar i{width:64px;height:116px;background:linear-gradient(180deg,#41c7b9 0 16%,transparent 16% 22%,#41c7b9 22% 56%,transparent 56% 62%,#41c7b9 62%);clip-path:polygon(38% 0,62% 0,70% 16%,88% 24%,76% 38%,68% 32%,68% 58%,84% 100%,61% 100%,50% 72%,39% 100%,16% 100%,32% 58%,32% 32%,24% 38%,12% 24%,30% 16%)}
.statbar{display:grid;grid-template-columns:78px 56px 1fr;gap:8px;align-items:center;font-size:12px}
.statbar div,.radar div div{grid-column:1/-1;height:10px;background:#021816;border:1px solid #1d5e56}
.statbar i,.radar i{display:block;height:100%;background:var(--accent)}
.statbar em,.telemetry em{font-style:normal;color:var(--muted)}
.telemetry{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.telemetry>div{background:#171b1e;border:1px solid var(--line);border-radius:8px;padding:10px}
.telemetry p{display:grid;grid-template-columns:1fr 72px 112px 62px;gap:8px;margin:0;padding:7px 0;border-bottom:1px solid var(--line);align-items:center}
.telemetry p:last-child{border-bottom:0}
.telemetry span{color:var(--muted)}
.telemetry small{color:var(--accent);font-size:10px}
.radar{display:grid;gap:10px}
.radar>div{display:grid;grid-template-columns:1fr 44px;gap:6px}
.radar small{grid-column:1/-1;color:var(--muted)}
.feed{display:grid;gap:7px;max-height:320px;overflow:auto}
.feed p{margin:0;padding:7px 8px;background:#111518;border-left:3px solid var(--accent);font-family:"Courier New",monospace;font-size:12px;line-height:1.35}
.branch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.branch .hint,.branch button{grid-column:1/-1}
.terminal pre{min-height:360px;white-space:pre-wrap;background:#07100e;border:1px solid #1d5e56;color:#c9fff6;padding:12px;border-radius:6px;line-height:1.45;font-family:"Courier New",monospace}
#realWorldReport{min-height:220px;white-space:pre-wrap;background:#07100e;border:1px solid #1d5e56;color:#c9fff6;padding:12px;border-radius:6px;line-height:1.45;font-family:"Courier New",monospace;overflow:auto}
a.pill{display:inline-flex;align-items:center;text-decoration:none}
.summary{display:grid;gap:8px}
.summary p{margin:0;color:var(--muted);line-height:1.4}
.summary p:has(b){display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.forms{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.span2{grid-column:span 2}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pill{padding:5px 8px;border-radius:99px;background:#111518;border:1px solid var(--line);color:var(--muted);font-size:12px}
.badge{color:#071210;background:var(--accent);border-radius:4px;padding:2px 5px;font-weight:700}
.warn{color:var(--amber)}
.danger{color:var(--red)}
.ok{color:var(--green)}
@media(max-width:900px){
  main{grid-template-columns:1fr}
  aside{position:static}
  nav{grid-template-columns:repeat(2,1fr)}
  header{align-items:flex-start;flex-direction:column}
  .labTop{position:static}
  .status{width:100%;display:grid;grid-template-columns:1fr 1fr;white-space:normal}
  .status span{grid-column:span 2}
  .grid,.forms,.kpis,.guide,.steps,.telemetry,.branch{grid-template-columns:1fr}
  .timeScrub{grid-template-columns:1fr}
  .stackGrid,.stackControls,.modifierGrid{grid-template-columns:1fr}
  .panelHead{display:grid}
  .rwRow{grid-template-columns:1fr 1fr}
  .rwRow>div:first-child,.rwRow>div:nth-child(2),.miniActions{grid-column:1/-1}
  .miniActions{justify-content:flex-start}
  .telemetry p{grid-template-columns:1fr 70px}
  .telemetry em,.telemetry small{grid-column:1/-1}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-12,.span2{grid-column:span 1}
  .barrow{grid-template-columns:86px 1fr}
  .conv{grid-template-columns:1fr 1fr;gap:8px}
  .conv b,.conv output{grid-column:span 2;text-align:left}
  .conv span{display:none}
  .step{min-height:0}
}
