:root{--bg:#070e16;--panel:#0d1a28;--line:#2a4560;--text:#e8f4ff;--muted:#8aa4b8;--cyan:#5ddcff;--gold:#ffd166;--green:#64f0a4}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:13px/1.4 Arial,sans-serif}
#app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:300px 1fr;height:100vh;grid-template-areas:"top top" "side view"}
#topbar{grid-area:top;display:flex;align-items:center;padding:10px 16px;background:linear-gradient(90deg,#0a1624,#122438);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}.logo{width:44px;height:40px;border-radius:10px;background:linear-gradient(145deg,var(--cyan),#2a8faf);color:#04202a;font-weight:900;display:grid;place-items:center}
h1{margin:0;font-size:17px}.sub{margin:0;color:var(--muted);font-size:11px}
#sidebar{grid-area:side;background:var(--panel);border-right:1px solid var(--line);padding:10px 14px;overflow:auto}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);margin:14px 0 6px}
label{display:block;margin:6px 0;color:var(--muted)}label span{color:var(--text);float:right}input[type=range]{width:100%}
.chk{color:var(--text)}.btn-row{display:flex;flex-wrap:wrap;gap:6px}
.btn{padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:#122433;color:var(--text);cursor:pointer}.btn.primary{background:var(--cyan);color:#04202a;font-weight:700}
select{background:#122433;color:var(--text);border:1px solid var(--line);border-radius:6px}
.hint{color:var(--muted);font-size:11px}.warn{color:var(--gold)}
#viewport{grid-area:view;position:relative;min-width:0;min-height:0}#c{width:100%;height:100%;display:block}
#hud{position:absolute;top:10px;right:10px;background:#0d1a28dd;border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:210px}
#hud .r{display:flex;justify-content:space-between;gap:12px}#hud span{color:var(--muted)}#hud b{color:var(--green)}
#toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#122438;border:1px solid var(--gold);color:var(--gold);padding:8px 14px;border-radius:8px;display:none}