:root{--bg: #0b0d10;--bg-raised: #14171c;--bg-input: #1b1f26;--border: #262b33;--text: #e6e9ee;--text-dim: #9aa4b2;--accent: #4c8dff;--danger: #ef4b57;--good: #35c88a;--fair: #e2b23c;--poor: #ef4b57;--radius: 10px;--font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}.hidden{display:none!important}.spacer{flex:1}.btn{background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:7px 14px;font:inherit;font-weight:500;cursor:pointer;transition:background .12s ease,border-color .12s ease;white-space:nowrap}.btn:hover:not(:disabled){background:#232833;border-color:#333a45}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){background:#5f9bff;border-color:#5f9bff}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.danger:hover:not(:disabled){background:#f2606b;border-color:#f2606b}.btn.big{width:100%;padding:11px 16px;font-size:15px}.icon-btn{background:#0000008c;color:var(--text);border:1px solid rgba(255,255,255,.14);border-radius:8px;width:32px;height:32px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover:not(:disabled){background:#000c}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.field{background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font:inherit;width:100%}.field:focus{outline:2px solid var(--accent);outline-offset:-1px}input[type=range].field{padding:0}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.room-code{font-family:var(--mono);background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:3px 9px;letter-spacing:.5px;user-select:all}.lobby{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px}.lobby-card{width:min(420px,100%);background:var(--bg-raised);border:1px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}.lobby-title{margin:0;font-size:26px;letter-spacing:-.4px}.lobby-sub{margin:0;color:var(--text-dim);line-height:1.5}.lobby-field{display:flex;flex-direction:column;gap:6px}.lobby-field>span{color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:.6px}.lobby-warn{margin:0;color:var(--fair);font-size:13px;line-height:1.5}.lobby-divider{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:12px;margin:4px 0}.lobby-divider:before,.lobby-divider:after{content:"";flex:1;height:1px;background:var(--border)}.lobby-facts{margin:0;padding:0;list-style:none;color:var(--text-dim);font-size:13px;display:flex;flex-direction:column;gap:6px;text-align:center}.lobby-facts li:before{content:"— "}.room{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-raised);border-bottom:1px solid var(--border);flex-wrap:wrap}.brand{font-weight:700;letter-spacing:.6px}.room-label{color:var(--text-dim)}.link-badge{font-size:12px;color:var(--text-dim)}.link-badge.link-open{color:var(--good)}.link-badge.link-reconnecting{color:var(--fair)}.link-badge.link-closed{color:var(--danger)}.stage{position:relative;background:#000;min-height:0;overflow:hidden}.stage.empty{background:var(--bg)}.stage-video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.stage-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}.stage-empty-title{font-size:17px;font-weight:600}.stage-empty-sub{color:var(--text-dim)}.stage-overlay{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:26px 16px 12px;background:linear-gradient(transparent,#000000bf);pointer-events:none}.stage-overlay>*{pointer-events:auto}.stage.empty .stage-overlay{display:none}.stage-labels{display:flex;flex-direction:column;gap:2px;min-width:0}.stage-name{font-size:16px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8)}.stage-meta{font-size:12px;color:#cfd6e0;text-shadow:0 1px 3px rgba(0,0,0,.8)}.stage-actions{display:flex;gap:6px}.strip{display:flex;gap:10px;padding:10px 14px;overflow-x:auto;background:var(--bg-raised);border-top:1px solid var(--border);scrollbar-width:thin}.strip:empty{display:none}.tile{position:relative;flex:0 0 auto;width:210px;padding:0;background:#000;border:2px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;color:inherit;font:inherit;text-align:left;transition:border-color .12s ease,transform .12s ease}.tile:hover{transform:translateY(-1px);border-color:#3b434f}.tile.active{border-color:var(--accent)}.tile-video{width:100%;aspect-ratio:16 / 9;object-fit:contain;display:block;background:#000}.tile-info{display:flex;flex-direction:column;gap:1px;padding:6px 8px;background:var(--bg-input)}.tile-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-meta{font-size:11px;color:var(--text-dim)}.tile-badges{position:absolute;top:6px;left:6px;display:flex;gap:4px;flex-wrap:wrap}.badge{font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:4px;background:#000000b3;color:#fff}.badge.live{background:var(--danger)}.badge.subtle{background:#0000008c;color:#cfd6e0;font-weight:500}.tile:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}.tile[data-grade=good]:after{background:var(--good)}.tile[data-grade=fair]:after{background:var(--fair)}.tile[data-grade=poor]:after{background:var(--poor)}.statusbar{display:flex;align-items:center;gap:14px;padding:7px 14px;background:var(--bg-raised);border-top:1px solid var(--border);color:var(--text-dim);font-size:12px}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100%);background:var(--bg-raised);border-left:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;transform:translate(101%);transition:transform .18s ease;z-index:20}.settings-panel.open{transform:translate(0)}.settings-head{display:flex;align-items:center;justify-content:space-between}.settings-row{display:flex;flex-direction:column;gap:6px}.settings-label{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim)}.settings-hint{font-size:12px;color:var(--text-dim);line-height:1.45}.settings-note{margin:0;font-size:12px;line-height:1.55;color:var(--text-dim);border-top:1px solid var(--border);padding-top:14px}.range-wrap{display:flex;align-items:center;gap:10px}.range-value{font-family:var(--mono);font-size:12px;color:var(--text-dim);min-width:82px;text-align:right}.toasts{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none}.toast{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:9px 14px;box-shadow:0 8px 24px #00000073;animation:toast-in .18s ease;max-width:90vw}.toast-error{border-color:var(--danger)}.toast.leaving{opacity:0;transition:opacity .28s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:640px){.tile{width:150px}.topbar{gap:8px}.room-label{display:none}}