:root{
 --bg:#0b1220; --panel:#0e172a; --muted:#475569; --card:#0c1628;
 --accent:#22d3ee; --accent-2:#38bdf8; --text:#e5e7eb;
 --ok:#34d399; --warn:#f59e0b; --err:#ef4444; --border:#1f2937;
}
*{box-sizing:border-box;}
body{
 margin:0; font-family:"Inter",system-ui,sans-serif;
 background:radial-gradient(120% 120% at 10% -10%,#0a1022,#0b1220 60%);
 color:var(--text);
}
header{
 padding:20px 24px; border-bottom:1px solid var(--border);
 display:flex; align-items:center; justify-content:space-between;
 background:rgba(7,12,24,.7); backdrop-filter:blur(6px);
}
.h-left h1{font-size:22px;color:var(--accent-2);margin:0}
.h-left p{margin:2px 0;font-size:13px;color:#cbd5e1}
.badge{font-size:12px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;}
main{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;padding:18px;}
@media(max-width:1080px){main{grid-template-columns:1fr;}}
.card{
 background:linear-gradient(180deg,var(--card),#0a1222 60%);
 border:1px solid var(--border);border-radius:18px;
 box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden;
}
.card h2{margin:0;padding:16px 18px;border-bottom:1px solid var(--border);font-size:18px;}
.section{padding:16px 18px}
.stage{position:relative;height:560px;display:grid;place-items:center}
canvas{width:100%;height:100%;background:radial-gradient(60% 90% at 50% 100%,rgba(56,189,248,.08),transparent 45%)}
.timer{position:absolute;top:12px;right:18px;background:rgba(0,0,0,.45);padding:6px 12px;border-radius:10px;font-size:14px;color:#bfeafe}
.equilibrium{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.equilibrium .msg{background:rgba(17,24,39,.85);border:1px solid var(--border);padding:10px 14px;border-radius:12px;color:#d1fae5}
.equilibrium.hidden{display:none}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ctl{padding:12px;border:1px solid var(--border);border-radius:12px;background:#0a1220}
label{font-size:12px;color:#a3a3a3;display:block;margin-bottom:6px}
input{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:#0a1220;color:var(--text)}
button{border:1px solid var(--border);background:#0c1628;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
button.primary{background:linear-gradient(180deg,#0b2a30,#07222a)}
table{width:100%;border-collapse:collapse;font-size:13px;text-align:center}
th,td{border-bottom:1px solid var(--border);padding:8px}
th{color:#9ca3af}
.pill{border:1px solid var(--border);background:#0a1220;border-radius:10px;padding:10px;text-align:center}
.pill b{display:block;font-size:13px}
.ok{color:var(--ok)}.warn{color:var(--warn)}.err{color:var(--err)}
.tiny{font-size:12px;color:#94a3b8;margin-top:6px}