*{box-sizing:border-box}html,body{margin:0;height:100%;font:13px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1d232b;background:#f3f4f6}
header{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#1d232b;color:#e8eaed;height:48px}
header .brand{font-weight:700;letter-spacing:.3px}header select,header button{font:inherit;padding:4px 8px;border-radius:6px;border:1px solid #444c56;background:#2b323b;color:#e8eaed}
header .tg{display:flex;gap:4px;align-items:center;white-space:nowrap}.grow{flex:1}
.btn{padding:6px 12px;border-radius:6px;text-decoration:none;font-weight:600}.btn.primary{background:#e8833a;color:#fff}.btn.disabled{opacity:.45;pointer-events:none}
#status{opacity:.8;font-size:12px}
main{display:flex;height:calc(100% - 48px)}
aside{width:360px;overflow:auto;padding:10px 14px;background:#fff;border-right:1px solid #dde1e6}
#viewport{flex:1;position:relative;overflow:hidden}
.prm{padding:8px 8px 9px;border-radius:8px;margin:2px -8px;border:1px solid transparent}
.prm.active{background:#fff4ea;border-color:#f3c7a1}
.prm .row{display:flex;align-items:center;gap:8px}.prm .name{font-weight:600;flex:1}.prm .unit{color:#7a8491;font-size:11px;min-width:30px}
.prm input[type=range]{flex:1;accent-color:#e8833a}.prm input[type=number]{width:72px;font:inherit;padding:2px 4px;border:1px solid #cfd5dc;border-radius:5px}
.prm select{font:inherit}
.prm .desc{color:#5b6573;font-size:12px;margin-top:3px}
.prm .dflt{color:#a0a8b3;font-size:11px}
h3{margin:14px 0 6px;font-size:13px}
#checks{width:100%;border-collapse:collapse;font-size:12px}#checks td{padding:3px 4px;border-bottom:1px solid #eef0f3}#checks td.v{text-align:right;font-variant-numeric:tabular-nums}
#checks tr.bad td{color:#b42318;font-weight:600}
.note{color:#7a8491;font-size:11px}
#spinner{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;background:#fffd;padding:6px 10px;border-radius:8px;z-index:5;box-shadow:0 1px 4px #0002}
.ring{width:16px;height:16px;border:3px solid #e8833a55;border-top-color:#e8833a;border-radius:50%;animation:sp 0.8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none!important}
#err{position:absolute;left:12px;right:12px;bottom:12px;background:#fdecea;color:#8a1c12;border:1px solid #f5c2bd;padding:8px 10px;border-radius:8px;z-index:5;white-space:pre-wrap}
#hover-desc{position:absolute;left:12px;top:12px;max-width:420px;background:#1d232bdd;color:#fff;padding:8px 10px;border-radius:8px;z-index:5}
.glabel{font:600 12px system-ui,sans-serif;color:#fff;background:#e8833a;padding:2px 6px;border-radius:4px;white-space:nowrap;pointer-events:none;transform:translateY(-14px)}
.glabel.faint{background:#5b6573aa;font-weight:500}