:root{
  --bg:#14171c; --panel:#1b1f26; --panel2:#222732; --line:#2e3540;
  --tx:#e6e9ee; --tx2:#98a2b3; --acc:#ffd21e; --acc2:#5aa9e6;
  --warn:#e8a33d; --ok:#7cc57c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);
  font:13px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;overflow:hidden}

#app{display:grid;grid-template-columns:340px 1fr;height:100%}

/* ── sidebar ─────────────────────────────────────────── */
#sidebar{background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
#sidebar header{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
#sidebar h1{margin:0;font-size:15px;letter-spacing:.3px}
#sidebar .sub{margin:2px 0 10px;color:var(--tx2);font-size:11.5px}
#search{width:100%;padding:7px 9px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel2);color:var(--tx);outline:none;font-size:12.5px}
#search:focus{border-color:var(--acc2)}

#list{flex:1;overflow:auto;padding:6px 0 10px}
.grp{padding:11px 14px 5px;color:var(--tx2);font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase}
.item{padding:7px 14px;cursor:pointer;border-left:3px solid transparent;display:flex;gap:9px}
.item:hover{background:var(--panel2)}
.item.sel{background:#2b3240;border-left-color:var(--acc)}
.item.off{opacity:.42}
.sw{width:9px;height:9px;border-radius:2px;margin-top:5px;flex:none}
.item .nm{font-size:12.3px;line-height:1.3}
.item .meta{color:var(--tx2);font-size:11px;margin-top:2px}
.item .dim{color:var(--acc2);font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:0 5px;border-radius:3px;font-size:9.5px;
  margin-left:5px;vertical-align:1px}
.tag.est{background:#4a3a1c;color:var(--warn)}
.tag.own{background:#1c3a2a;color:var(--ok)}
.tag.sub{background:#3a2a1c;color:var(--warn)}

#sidebar footer{border-top:1px solid var(--line);padding:9px 14px;
  color:var(--tx2);font-size:11px}

/* ── stage ───────────────────────────────────────────── */
#stage{position:relative;min-width:0}
#c{display:block;width:100%;height:100%}

#toolbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;gap:6px;
  align-items:center;padding:9px 12px;
  background:linear-gradient(#14171cdd,#14171c00);pointer-events:none}
#toolbar>*{pointer-events:auto}
#toolbar button{background:var(--panel2);color:var(--tx);border:1px solid var(--line);
  padding:5px 11px;border-radius:6px;cursor:pointer;font-size:12px}
#toolbar button:hover{border-color:#4a5563}
#toolbar button.on{background:#3a3520;border-color:#6b5f28;color:var(--acc)}
#toolbar .spacer{flex:1}
#toolbar .slider{display:flex;align-items:center;gap:7px;color:var(--tx2);font-size:11.5px}
#toolbar input[type=range]{width:120px;accent-color:var(--acc)}

#hud{position:absolute;left:12px;bottom:12px;z-index:5;max-width:560px;
  background:#1b1f26e8;border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;font-size:12px;display:none}
#hud b{color:var(--acc)}
#hud .d{color:var(--acc2);font-variant-numeric:tabular-nums}
#hud .n{color:var(--tx2);margin-top:4px;font-size:11.5px;max-width:520px}

#loading{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--bg);color:var(--tx2);z-index:9;font-size:13px}

.lbl{color:#cfd6e0;font-size:11px;background:#151920cc;border:1px solid #2e3540;
  padding:1px 6px;border-radius:5px;white-space:nowrap;pointer-events:none;
  text-shadow:0 1px 2px #000}
.lbl.est{color:var(--warn);border-color:#5a4720}

.tag.cnt{background:#1d3348;color:var(--acc2)}
#sidebar footer b{color:var(--tx);font-weight:600}

#perf{position:absolute;right:12px;top:46px;z-index:5;background:#1b1f26e8;
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:11.5px;
  font-variant-numeric:tabular-nums;color:var(--tx2);min-width:190px}
#perf b{color:var(--tx)}
#perf .v{color:var(--acc2)}
#perf .warn{color:var(--warn)}
#perf hr{border:0;border-top:1px solid var(--line);margin:6px 0}