:root{--bg:#0e1014;--bg-soft:#161a21;--bg-raised:#1d222b;--border:#2a3140;--text:#e8ecf3;--text-dim:#97a1b2;--text-faint:#6b7585;--accent:#6b8afd;--accent-soft:#1a2033;--accent-hover:#8aa3ff;--danger:#f0616d;--warn:#f5b544;--ok:#4fd18b;--radius-sm:6px}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--text);font:15px/1.5 Segoe UI,system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}.btn{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;white-space:nowrap}.btn:hover:not(:disabled){background:#252b36;border-color:#3a4354}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#0b0f18;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-sm{padding:5px 10px;font-size:13px}.field{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;outline:none}.field:focus{border-color:var(--accent)}.field::placeholder{color:var(--text-faint)}.lbl{display:block;color:var(--text-dim);margin-bottom:6px}.err,.lbl{font-size:13px}.err{color:var(--danger);min-height:18px}.landing{min-height:100vh;display:grid;place-items:center;padding:24px}.landing-card{width:100%;max-width:420px;background:var(--bg-soft);border:1px solid var(--border);border-radius:14px;padding:28px}.landing h1{margin:0 0 6px;font-size:24px}.landing .sub{color:var(--text-dim);margin:0 0 24px;font-size:14px}.stack{display:grid;grid-gap:14px;gap:14px}.divider{display:flex;align-items:center;gap:12px;color:var(--text-faint);font-size:12px;margin:22px 0}.divider:after,.divider:before{content:"";flex:1 1;height:1px;background:var(--border)}.code-input{text-transform:uppercase;letter-spacing:5px;font-size:20px;text-align:center;font-family:ui-monospace,Cascadia Mono,Consolas,monospace}.room{display:grid;grid-template-columns:1fr 330px;grid-template-rows:52px 1fr;height:100vh}.topbar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--bg-soft);border-bottom:1px solid var(--border)}.brand{font-weight:600}.spacer{flex:1 1}.lobby-code{font-family:ui-monospace,Consolas,monospace;letter-spacing:2px;border:1px solid var(--border);padding:4px 10px;border-radius:var(--radius-sm);font-size:14px}.lobby-code,.pill{background:var(--bg-raised)}.pill{font-size:12px;padding:3px 9px;border-radius:20px;color:var(--text-dim);border:1px solid var(--border)}.pill.live{color:var(--ok);border-color:#2d5a45}.pill.off{color:var(--danger);border-color:#5a2d33}.stage{display:flex;flex-direction:column;min-width:0;background:#000}.stage,.video-wrap{position:relative;min-height:0}.video-wrap{cursor:pointer;flex:1 1;display:grid;place-items:center;overflow:hidden}.player-frame,.player-video{width:100%;height:100%;border:0;background:#000;display:block}.player-video{object-fit:contain}.placeholder{position:absolute;inset:0;display:grid;place-content:center;grid-gap:8px;gap:8px;text-align:center;padding:32px;color:var(--text-dim);background:#0a0c10}.placeholder strong{color:var(--text);font-size:17px}.placeholder span{font-size:13px;max-width:420px}.overlay-note{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(14,16,20,.92);border:1px solid var(--border);border-radius:20px;padding:7px 16px;font-size:13px;pointer-events:none;transition:opacity .25s}.overlay-note.warn{color:var(--warn);border-color:#5c4a1f}.overlay-note.hidden{opacity:0}.controls{position:absolute;left:0;right:0;bottom:0;z-index:10;padding:26px 8px 4px;display:grid;grid-gap:1px;gap:1px;background:linear-gradient(0deg,rgba(8,10,13,.93) 0,rgba(8,10,13,.7) 48%,rgba(8,10,13,0));transition:opacity .18s ease,transform .18s ease}.stage.chrome-hidden .controls{opacity:0;transform:translateY(12px);pointer-events:none}.stage.chrome-hidden,.stage.chrome-hidden .video-wrap{cursor:none}.seek-wrap{position:relative;display:flex;align-items:center;height:16px;margin:0 6px}.seek{width:100%;height:16px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;outline:none;cursor:pointer;margin:0}.seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;-webkit-transition:height .12s ease;transition:height .12s ease;background:linear-gradient(to right,var(--accent) 0 var(--played),transparent var(--played) 100%),linear-gradient(to right,rgba(255,255,255,.44) 0 var(--buffered),transparent var(--buffered) 100%),rgba(255,255,255,.22)}.seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin-top:-4.5px;border:0;border-radius:50%;background:var(--accent);transform:scale(0);-webkit-transition:transform .12s ease;transition:transform .12s ease}.seek-wrap:hover .seek::-webkit-slider-runnable-track{height:6px}.seek-wrap:hover .seek::-webkit-slider-thumb,.seek:focus-visible::-webkit-slider-thumb{transform:scale(1)}.seek::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,rgba(255,255,255,.44) 0 var(--buffered),transparent var(--buffered) 100%),rgba(255,255,255,.22)}.seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}.seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--accent);opacity:0;-moz-transition:opacity .12s ease;transition:opacity .12s ease}.seek-wrap:hover .seek::-moz-range-thumb,.seek:focus-visible::-moz-range-thumb{opacity:1}.seek:disabled{cursor:default;opacity:.55}.seek-tip{position:absolute;bottom:19px;transform:translateX(-50%);padding:2px 7px;border-radius:4px;background:rgba(8,10,13,.94);border:1px solid var(--border);font-size:12px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}.btn-row{display:flex;align-items:center;gap:2px;padding:0 2px 2px;min-width:0}.pbtn{flex:none;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:#fff;font:inherit;cursor:pointer;transition:background .12s ease,opacity .12s ease}.pbtn:hover:not(:disabled){background:rgba(255,255,255,.15)}.pbtn:disabled{opacity:.4;cursor:default}.pbtn svg{display:block;width:21px;height:21px;fill:currentColor}.pbtn.wide{width:auto;height:30px;padding:0 11px;border-radius:15px;font-size:12.5px;background:rgba(255,255,255,.13)}.pbtn.wide:hover:not(:disabled){background:rgba(255,255,255,.24)}.vol{display:flex;align-items:center;flex:none}.vslider{width:0;opacity:0;height:14px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;outline:none;cursor:pointer;margin:0;transition:width .16s ease,opacity .16s ease}.vol:focus-within .vslider,.vol:hover .vslider{width:74px;opacity:1;margin-right:6px}.vslider::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#fff 0 var(--played),transparent var(--played) 100%),rgba(255,255,255,.3)}.vslider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#fff}.vslider::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.3)}.vslider::-moz-range-progress{height:3px;border-radius:2px;background:#fff}.vslider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}.time-row{flex:none;padding:0 10px 0 6px;font-size:12.5px;color:rgba(255,255,255,.92);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}.time-sep{color:rgba(255,255,255,.5)}.sync-info{flex:none;padding-right:6px;font-size:12px;color:rgba(255,255,255,.62);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;white-space:nowrap}.rate{flex:none;height:30px;margin:0 2px;padding:0 6px;border-radius:15px;border:0;background:rgba(255,255,255,.13);color:#fff;font-size:12.5px;cursor:pointer}.rate:disabled{opacity:.4;cursor:default}.rate option{background:#14171c;color:#fff}.flash{position:absolute;top:50%;left:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:rgba(8,10,13,.62);display:grid;place-items:center;pointer-events:none;animation:flash .5s ease-out forwards}.flash svg{width:34px;height:34px;fill:#fff}@keyframes flash{0%{opacity:.95;transform:scale(.8)}to{opacity:0;transform:scale(1.3)}}.sidebar{display:flex;flex-direction:column;min-height:0;background:var(--bg-soft);border-left:1px solid var(--border)}.tabs{display:flex;border-bottom:1px solid var(--border)}.tab{flex:1 1;background:none;border:0;border-bottom:2px solid transparent;padding:12px 6px;color:var(--text-dim);cursor:pointer;font-size:13px}.tab.active{border-bottom-color:var(--accent)}.tab.active,.tab:hover:not(.active){color:var(--text)}.panel{display:flex;flex:1 1;min-height:0;flex-direction:column}.panel-scroll{flex:1 1;overflow-y:auto;padding:14px}.user-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm)}.user-row:hover{background:var(--bg-raised)}.avatar{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#0b0f18}.user-name{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.badge{font-size:10px;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.4px}.badge.host{background:#3a3120;color:var(--warn)}.badge.buf{background:#37262a;color:var(--danger)}.badge.you{background:var(--bg-raised);color:var(--text-faint)}.chat-list{flex:1 1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}.msg{font-size:14px;word-break:break-word}.msg .who{font-weight:600;margin-right:6px}.msg.system{color:var(--text-faint);font-size:12.5px;font-style:italic}.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}.section{margin-bottom:22px}.section h3{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim)}.hint{font-size:12.5px;color:var(--text-faint);margin:0 0 10px;line-height:1.45}.source-kinds{display:grid;grid-gap:6px;gap:6px;margin-bottom:12px}.kind{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:var(--bg)}.kind:hover{border-color:#3a4354}.kind.sel{border-color:var(--accent);background:var(--accent-soft)}.kind input{margin:3px 0 0;accent-color:var(--accent)}.kind .k-title{font-size:14px}.kind .k-desc{font-size:12px;color:var(--text-faint);line-height:1.4}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}.switch-row:last-child{border-bottom:0}.sw-label{font-size:14px}.sw-desc{font-size:12px;color:var(--text-faint)}.switch-row input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}.progress-track{height:6px;border-radius:3px;background:var(--bg-raised);border:1px solid var(--border);overflow:hidden}.progress-fill{height:100%;width:0;background:var(--accent);transition:width .2s}.progress-fill.done{background:var(--ok)}.callout{border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;font-size:12.5px;line-height:1.45;margin-bottom:12px}.callout.warn{border-color:#5c4a1f;background:#221c0f;color:var(--warn)}.callout.bad{border-color:#5a2d33;background:#221316;color:var(--danger)}.toast-host{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);display:grid;grid-gap:8px;gap:8px;z-index:50}.toast{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 16px;font-size:13.5px;animation:rise .2s ease-out}.toast.err{border-color:#5a2d33;color:var(--danger)}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}@media (max-width:900px){.room{grid-template-columns:1fr;grid-template-rows:52px minmax(200px,42vh) 1fr}.sidebar{border-left:0;border-top:1px solid var(--border)}.rate,.sync-info{display:none}.time-row{padding:0 6px;font-size:12px}.toast-host{bottom:18px}}.stage.full .controls{padding:34px 18px 8px}.stage.full .seek-wrap{margin:0 10px}.stage.full .overlay-note{top:22px}.stage.full .toast-host{bottom:96px}