:root{
  --bg:#0f0a1f;
  --card:#140b2e;
  --border:#24124a;
  --text:#f3e8ff;
  --muted:#d6bcfa;
  --primary:#a78bfa;
  --danger:#f472b6;
  --ok:#c084fc;
  --panel-left:0px;
  --panel-right:0px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Outfit', system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:980px;margin:0 auto;padding:16px}
header h1{margin:8px 0 4px;font-size:24px}
.muted{color:var(--muted)}
.small{font-size:12px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}

.hero{padding:24px}
.hero-line{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-primary{font-size:28px;font-weight:700;margin:8px 0 12px}
.hero-metrics{display:flex;gap:16px;flex-wrap:wrap}
.metric{flex:1 1 200px;background:#140a2b;border:1px solid var(--border);border-radius:12px;padding:12px}
.metric-value{font-size:24px;font-weight:700}
.metric-label{font-size:12px;color:var(--muted)}
.hero-rec{margin-top:12px;color:#cbd5e1}

.metric.conc .meter{margin-top:8px;height:8px;background:#0f0a1f;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.metric.conc .meter-bar{height:100%;background:linear-gradient(90deg,#8b5cf6,#a78bfa,#c084fc,#e879f9,#f0abfc)}
.stage-onset .hero{border-color:#8b5cf6}
.stage-c1 .hero{border-color:#a78bfa}
.stage-c2 .hero{border-color:#c084fc}
.stage-c3 .hero{border-color:#e879f9}
.stage-decay .hero{border-color:#f0abfc}

.controls .row{display:flex;gap:12px;align-items:center;margin:8px 0;flex-wrap:wrap}
.controls .row.two{gap:8px}
.controls .row > *{min-width:0}
.controls input[type="text"], .messages-form input[type="text"], .controls input[type="datetime-local"], .controls input[type="number"]{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#1a0f36;
  color:var(--text);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.06);
}

label.checkbox{display:flex;gap:8px;align-items:center}

button{
  appearance:none;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  background:#1b1233;
  color:var(--text);
  cursor:pointer;
  border:1px solid var(--border);
  transition:transform .05s ease, box-shadow .15s ease, opacity .2s ease, background .2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
button.primary{background:linear-gradient(180deg,#a78bfa,#7c3aed);border:none}
button.danger{background:linear-gradient(180deg,#f472b6,#db2777);border:none}
button:disabled{opacity:.6;cursor:not-allowed}
button:hover{box-shadow:0 4px 16px rgba(0,0,0,.25)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid #38bdf8; outline-offset:2px}

/* Distribute the first button row evenly */
.controls .row.two button{flex:1}

/* Keep the date input flexible while its action button keeps natural width */
#startAtBtn{flex:0 0 auto;white-space:nowrap}
.controls input[type="datetime-local"]{min-width:180px}

.messages-form{display:grid;grid-template-columns:1fr 2fr;gap:8px;align-items:center}
.messages-form .event-label{color:var(--muted);font-size:12px}
.row.end{justify-content:flex-end}

/* Compact labels and spacing in controls for better readability */
.controls label{color:var(--text)}
.controls .checkbox{font-size:14px}
.controls .row + .row{margin-top:10px}

.table-wrapper{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:#0f172a;padding:10px;text-align:left;border-bottom:1px solid var(--border)}
tbody td{padding:10px;border-bottom:1px solid var(--border)}
tbody tr:hover{background:#0d1627}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#0f172a;border:1px solid var(--border)}
.badge.ok{background:#052e1a;border-color:#064e3b}
.badge.warn{background:#2b1a05;border-color:#92400e}

.viz3d{width:100%;height:calc(100vh - 24px);border-radius:12px;border:1px solid var(--border);background:radial-gradient(1200px 400px at 50% 0%, #1a0e36 10%, #0f0a1f 60%);position:relative}
.with-left-panel .viz3d, .with-right-panel .viz3d{border-radius:0;border-left:none;border-right:none}
#vizSection{position:fixed;top:0;bottom:0;left:var(--panel-left);right:0;padding:0;margin:0;border:none;background:none;z-index:1}
#vizSection .viz3d{width:100%;height:100%;margin:0;border-radius:0;border-left:1px solid var(--border)}
body.with-left-panel{--panel-left:360px}
body.with-right-panel{--panel-right:360px}
@media (max-width:1200px){
  body.with-left-panel{--panel-left:280px}
  body.with-right-panel{--panel-right:280px}
}
.three-mount{position:absolute;inset:0;z-index:1;pointer-events:auto}
.hud-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(100% 70% at 50% 0%, rgba(167,139,250,0.12), rgba(0,0,0,0));mix-blend-mode:screen;border-radius:12px}
.hud-hints{position:absolute;left:12px;bottom:12px;color:#d6bcfa;font-size:12px;pointer-events:none;background:rgba(10,4,22,.55);border:1px solid var(--border);padding:6px 8px;border-radius:8px}

.overlay-btn{position:absolute;top:12px;padding:8px 10px;border-radius:8px;background:#1a0f36;border:1px solid var(--border);color:var(--text);cursor:pointer;z-index:30}
.overlay-btn.left{left:12px}
.overlay-btn.right{display:none}

.sidepanel{position:fixed;top:0;bottom:0;width:360px;background:#170d33;border-left:1px solid var(--border);border-right:1px solid var(--border);transform:translateX(0);transition:transform .25s ease, opacity .2s ease;opacity:.98;z-index:2}
.sidepanel.left{left:0;transform:translateX(-100%)}
.sidepanel.right{display:none}
.sidepanel.show.left{transform:translateX(0)}
.panel-content{padding:16px;height:100%;overflow:auto}

#vizSection{padding:8px}
/* legend removed in favor of 3D labels */

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#1a0f36;border:1px solid var(--border);padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;max-width:90vw
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

footer{padding-bottom:48px}