:root{
 --bg:#030810;
 --panel:#081423;
 --panel2:#0d1e32;
 --line:#203b59;
 --text:#edf6ff;
 --muted:#89a0b9;
 --gold:#e0b64a;
 --cyan:#64c9e8;
 --green:#5bd18b;
 --red:#e36868;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}
button,input,textarea{font:inherit}
button{cursor:pointer}

.top{
 position:sticky;top:0;z-index:20;
 display:flex;gap:12px;align-items:center;
 padding:12px 16px;
 background:rgba(3,8,16,.9);
 backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line)
}
.logo{
 width:42px;height:42px;border-radius:12px;
 background:radial-gradient(circle at 35% 30%,#fff2a3,#d19a24 45%,#6c4310);
 box-shadow:0 0 32px rgba(224,182,74,.15)
}
.brand strong{display:block;color:var(--gold);letter-spacing:.05em}
.brand small{color:var(--muted)}
.spacer{flex:1}

.btn{
 border:1px solid var(--line);
 background:var(--panel2);
 color:var(--text);
 border-radius:10px;
 padding:9px 12px
}
.btn.active{background:var(--gold);color:#15110a;border-color:var(--gold)}

.layout{
 display:grid;
 grid-template-columns:250px minmax(0,1fr);
 min-height:calc(100vh - 67px)
}
aside{
 border-right:1px solid var(--line);
 padding:12px
}
.nav{display:grid;gap:6px}
.nav button{
 text-align:left;
 border:1px solid transparent;
 background:transparent;
 color:var(--muted);
 padding:11px;
 border-radius:10px
}
.nav button.active,.nav button:hover{
 background:var(--panel2);
 color:var(--text);
 border-color:var(--line)
}

main{padding:13px;min-width:0}
.view{display:none}
.view.active{display:block}

.card{
 border:1px solid var(--line);
 background:linear-gradient(145deg,var(--panel),#06101d);
 border-radius:14px;
 overflow:hidden
}
.card h2{margin:0;color:var(--gold)}
.head{padding:13px 15px;border-bottom:1px solid var(--line)}
.body{padding:14px}

.scene-grid{
 display:grid;
 grid-template-columns:minmax(0,1fr) 315px;
 gap:12px
}
.viewport-wrap{position:relative}
#viewport{
 width:100%;height:700px;display:block;
 background:radial-gradient(circle,#102841,#030810 70%);
 touch-action:none
}
.overlay{
 position:absolute;top:12px;left:12px;
 display:flex;gap:6px;flex-wrap:wrap
}
.chip{
 background:rgba(3,8,16,.78);
 border:1px solid rgba(255,255,255,.12);
 border-radius:999px;padding:6px 9px;
 font-size:11px
}

.inspector{display:grid;gap:12px}
.big{font-size:25px;font-weight:800;color:var(--gold)}
.muted{color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
.stat small{color:var(--muted);display:block}
.stat strong{font-size:23px;color:var(--gold)}

.arms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.arm{
 border:1px solid var(--line);
 background:var(--panel2);
 border-radius:13px;padding:15px
}
.arm.selected{border-color:var(--gold);box-shadow:0 0 0 1px rgba(224,182,74,.25)}
.arm h3{margin:0;color:var(--gold)}
.arm .formula{font-size:22px;font-weight:800;margin:13px 0}

.vials{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.vial{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px;text-align:center}
.bottle{width:34px;height:62px;border:2px solid #6d8ca8;border-radius:4px 4px 12px 12px;margin:3px auto 8px}

table{width:100%;border-collapse:collapse}
th,td{padding:9px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--gold);background:var(--panel2)}

label{font-size:12px;color:var(--muted)}
input,textarea{
 width:100%;margin-top:5px;padding:10px;
 border:1px solid var(--line);border-radius:9px;
 background:#030a13;color:var(--text)
}
textarea{min-height:110px}

.progress{height:8px;border-radius:99px;background:#102239;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,#9c731d,#f0cf70)}

.alert{padding:11px;border:1px solid #703c3c;background:#241318;color:#ffb6b6;border-radius:10px}

@media(max-width:950px){
 .layout{display:block}
 aside{border-right:0;border-bottom:1px solid var(--line)}
 .nav{display:flex;overflow:auto}
 .nav button{white-space:nowrap}
 .scene-grid{grid-template-columns:1fr}
 .arms{grid-template-columns:1fr}
 #viewport{height:540px}
}
@media(max-width:600px){
 .grid3,.grid2{grid-template-columns:1fr}
 .vials{grid-template-columns:repeat(3,1fr)}
 #viewport{height:440px}
}