:root{--bg:#05060a;--ink:#0b0d14;--line:rgba(255,255,255,.1);--text:#eef2ff;--muted:#8b95a8;--blue:#4f8cff;--violet:#8b5cf6;--cyan:#22d3ee;--r:16px;--font:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(900px 500px at 10% -10%,rgba(79,140,255,.22),transparent 55%),radial-gradient(700px 500px at 100% 0,rgba(139,92,246,.18),transparent 50%),linear-gradient(180deg,#05060a,#090b12);color:var(--text);font:14px/1.45 var(--font)}
#top{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);backdrop-filter:blur(14px);position:sticky;top:0;z-index:5;background:rgba(5,6,10,.72)}
.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.2px}.brand i{font-style:normal;color:var(--cyan);margin-left:4px}
.tabs{display:flex;gap:6px;flex:1;overflow:auto}.tabs a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px;white-space:nowrap}.tabs a.on,.tabs a:hover{background:rgba(255,255,255,.08);color:#fff}
.right{display:flex;gap:8px;align-items:center}.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted)}.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font:600 12px var(--font)}
.shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px;padding:14px;min-height:calc(100dvh - 58px)}
.glass{background:rgba(12,16,28,.55);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pick{padding:16px;display:flex;flex-direction:column;min-height:0}.pick h1{margin:0 0 6px;font-size:20px;letter-spacing:-.3px}.lead{margin:0 0 12px;color:var(--muted);font-size:12.5px}.lead b{color:var(--cyan)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}.slot{aspect-ratio:1;border-radius:12px;border:1px dashed rgba(255,255,255,.18);display:grid;place-items:center;font-size:11px;color:var(--muted);background:rgba(0,0,0,.25)}.slot.filled{border-style:solid;border-color:rgba(79,140,255,.5);background:linear-gradient(145deg,rgba(79,140,255,.18),rgba(139,92,246,.12));color:#fff;font-weight:700;padding:6px;text-align:center}
.section{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.list{overflow:auto;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.ch{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid transparent;background:rgba(255,255,255,.03);color:#fff;border-radius:12px;padding:8px 10px;cursor:pointer}
.ch:hover{background:rgba(255,255,255,.06)}.ch.on{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 1px rgba(34,211,238,.2) inset}
.ch img{width:36px;height:36px;border-radius:8px;object-fit:contain;background:#111}.ch .meta{min-width:0}.ch h3{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch p{margin:2px 0 0;font-size:11px;color:var(--muted)}
.foot{font-size:11px;color:var(--muted);margin:10px 0 0}
.stage{padding:12px;display:flex;flex-direction:column;min-height:0}
.mosaic{flex:1;display:grid;gap:10px;min-height:360px}
.mosaic[data-count="0"]{place-items:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}
.mosaic[data-count="0"]:before{content:"Select up to 4 streamers from the left"}
.mosaic[data-count="1"]{grid-template-columns:1fr}
.mosaic[data-count="2"]{grid-template-columns:1fr 1fr}
.mosaic[data-count="3"],.mosaic[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.tile{position:relative;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line);min-height:180px}
.tile video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tile .bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:12px}
.tile .bar b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile button{border:0;border-radius:8px;padding:6px 8px;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;font:700 11px var(--font)}
.tile button.solo.on{background:var(--cyan);color:#041018}
.tile.focus{outline:2px solid var(--cyan);outline-offset:-2px}
.hint{margin:8px 0 0;color:var(--muted);font-size:11px}
@media(max-width:900px){.shell{grid-template-columns:1fr}.pick{max-height:42vh}.mosaic[data-count="2"],.mosaic[data-count="3"],.mosaic[data-count="4"]{grid-template-columns:1fr;grid-auto-rows:minmax(180px,auto)}}