:root{--bg:#080a0d;--panel:rgba(15,18,23,.86);--line:#232b35;--fg:#e9edf2;--dim:#7f8a99;--acc:#ff3b2f;--ok:#5ee39b}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--fg);overflow:hidden;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#view{position:fixed;inset:0;display:block;touch-action:none;cursor:grab}
#view:active{cursor:grabbing}
header,footer,.panel{position:fixed;z-index:2;backdrop-filter:blur(14px);background:var(--panel);border:1px solid var(--line)}
#top{top:12px;left:12px;right:12px;display:flex;align-items:center;gap:18px;padding:10px 14px;border-radius:10px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.14em;display:flex;align-items:center;gap:9px}
.brand small{color:var(--dim);font-weight:400;letter-spacing:.04em}
.dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);animation:p 2s infinite}
@keyframes p{50%{opacity:.3}}
.hud{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.stat{text-align:right;min-width:52px}
.stat b{display:block;font-size:15px;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.panel{top:76px;bottom:58px;width:292px;padding:14px;border-radius:10px;overflow-y:auto;scrollbar-width:thin}
#left{left:12px}
#right{right:12px}
.panel h2{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.panel h2:first-child{margin-top:0}
.row{margin-bottom:11px}
.row label{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:4px}
.row label b{color:var(--fg);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--acc);height:16px}
.btns{display:flex;flex-wrap:wrap;gap:6px}
button{flex:1 1 44%;background:#161c24;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:7px 6px;font:inherit;font-size:11px;cursor:pointer;transition:.15s}
button:hover{border-color:var(--acc);color:#fff}
button.danger:hover{background:var(--acc)}
.time button{flex:1 1 0}
.time button.on{background:var(--acc);border-color:var(--acc);color:#fff}
canvas.spark{width:100%;display:block;border:1px solid var(--line);border-radius:6px;background:#0b0f14}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px;font-size:10px;color:var(--dim)}
.legend i{display:inline-block;width:9px;height:2px;margin-right:4px;vertical-align:middle}
.meta{font-size:10px;color:var(--dim);margin-bottom:9px;letter-spacing:.05em}
.bar{margin-bottom:7px}
.bar u{display:flex;justify-content:space-between;text-decoration:none;font-size:11px;color:var(--dim)}
.bar u b{color:var(--fg);font-variant-numeric:tabular-nums}
.bar div{height:4px;background:#161c24;border-radius:2px;overflow:hidden;margin-top:3px}
.bar div i{display:block;height:100%}
.hint{color:var(--dim);font-size:11px}
#bottom{left:12px;right:12px;bottom:12px;padding:8px 14px;border-radius:10px;display:flex;gap:12px;align-items:center;font-size:11px;color:var(--dim)}
#status{color:var(--ok)}
.sep{flex:1}
@media(max-width:900px){.panel{width:auto;left:12px;right:12px}
#left{top:auto;bottom:58px;max-height:36vh}
#right{top:76px;bottom:auto;max-height:26vh}
.muted{display:none}}