:root{--color-primary:#eeae4e;--color-primary-bright:#f1ba69;--color-primary-deep:#be8b3e;--color-on-primary:#2b3e50;--color-ink:#1e2b38;--color-body:#253544;--color-charcoal:#606e7c;--color-mute:#808b96;--color-ash:#919ba4;--color-stone:#aeb6bc;--color-faint:#d5d8dc;--color-on-dark:#ebebeb;--color-on-dark-mute:#ebebebb8;--color-canvas-light:#fff;--color-canvas-dark:#2b3e50;--color-surface-soft:#f2f3f4;--color-surface-card:#fff;--color-surface-deep:#1c2834;--color-surface-elevated:#445565;--color-hairline-light:#eaecee;--color-hairline-dark:#ebebeb1f;--color-hairline-strong:#131c24;--color-danger:#e23b4a;--color-warning:#ec7e00;--color-success:#428619;--color-link:#376cd5;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--space-xxs:4px;--space-xs:6px;--space-sm:8px;--space-md:14px;--space-lg:16px;--space-xl:24px;--space-xxl:32px;--space-xxxl:48px;--font-display:"Inter Display", "General Sans", Inter, system-ui, sans-serif;--font-body:Inter, system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{font:400 16px/1.5 var(--font-body);color:var(--color-on-dark);background:var(--color-canvas-dark);-webkit-font-smoothing:antialiased}#root{min-height:100%}h1,h2,h3{font-family:var(--font-display);margin:0;font-weight:500}button,input,select{font-family:inherit;font-size:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--color-primary-bright)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);height:44px;padding:0 var(--space-xl);border-radius:var(--radius-full);white-space:nowrap;border:none;font-size:15px;font-weight:600;transition:opacity .15s;display:inline-flex}.btn:hover:not(:disabled){opacity:.88}.btn-primary{background:var(--color-canvas-light);color:var(--color-canvas-dark)}.btn-gold{background:var(--color-primary);color:var(--color-on-primary)}.btn-outline{color:var(--color-on-dark);border:1px solid var(--color-hairline-dark);background:0 0}.btn-danger{background:var(--color-danger);color:var(--color-on-dark)}.btn-sm{height:34px;padding:0 var(--space-lg);font-size:13px}.input{width:100%;height:48px;padding:0 var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--color-hairline-dark);background:var(--color-surface-deep);color:var(--color-on-dark)}.input:focus{outline:2px solid var(--color-primary);outline-offset:-1px}.card{background:var(--color-surface-elevated);border-radius:var(--radius-lg);padding:var(--space-xl)}.badge{border-radius:var(--radius-full);background:var(--color-surface-soft);color:var(--color-ink);align-items:center;padding:2px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge-gold{background:var(--color-primary);color:var(--color-on-primary)}.form-error{color:#ff8a93;font-size:14px}.form-hint{color:var(--color-on-dark-mute);font-size:12px}.form-field{gap:var(--space-xs);flex-direction:column;display:flex}.form-field label{color:var(--color-on-dark-mute);font-size:13px}.page-loading,.room-page-message{justify-content:center;align-items:center;gap:var(--space-lg);text-align:center;flex-direction:column;height:100vh;display:flex}.auth-page{min-height:100vh;padding:var(--space-xl);justify-content:center;align-items:center;display:flex}.auth-card{gap:var(--space-lg);flex-direction:column;width:100%;max-width:400px;display:flex}.auth-card h1{font-size:28px}.lobby-page{max-width:640px;padding:var(--space-xxl) var(--space-xl);margin:0 auto}.lobby-header{margin-bottom:var(--space-xxl);justify-content:space-between;align-items:center;display:flex}.brand{align-items:baseline;gap:var(--space-sm);display:flex}.brand-name{margin:0}.brand-attribution{align-items:center;gap:var(--space-xs);color:var(--color-on-dark-mute);font-size:12px;display:inline-flex}.brand-logo{width:auto;height:14px}.brand-compact .brand-name{font-size:18px}.brand-compact .brand-attribution{font-size:11px}.brand-compact .brand-logo{height:12px}.lobby-user{align-items:center;gap:var(--space-md);display:flex}.lobby-hero{gap:var(--space-lg);flex-direction:column;display:flex}.lobby-hero h2{font-size:26px}.lobby-create-btn{width:100%}.lobby-join-row{align-items:center;gap:var(--space-sm);display:flex}.lobby-join-row .input{flex:1}.lobby-features{margin:var(--space-xl) 0 0;gap:var(--space-lg);grid-template-columns:repeat(3,1fr);padding:0;list-style:none;display:grid}.lobby-feature{gap:var(--space-xs);color:var(--color-on-dark-mute);flex-direction:column;font-size:14px;display:flex}.lobby-feature strong{color:var(--color-on-dark)}@media (width<=720px){.lobby-features{grid-template-columns:1fr}}.room-page{width:100%;padding:var(--space-xl) clamp(var(--space-xl), 3vw, 48px);margin:0 auto}@media (width>=901px){.room-page{flex-direction:column;height:100vh;display:flex}}.room-topbar{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap;flex-shrink:0;display:flex}.room-topbar-left{align-items:center;gap:var(--space-lg);flex-wrap:wrap;min-width:0;display:flex}.room-topbar-link{align-items:center;gap:var(--space-md);min-width:0;display:flex}.room-topbar-status{align-items:center;gap:var(--space-sm);display:flex}.chip{align-items:center;gap:var(--space-sm);height:32px;padding:0 var(--space-md);border-radius:var(--radius-full);border:1px solid var(--color-hairline-dark);background:var(--color-surface-deep);color:var(--color-on-dark-mute);max-width:320px;font-size:13px;display:inline-flex}.chip code{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-dot{background:var(--color-mute);border-radius:50%;width:8px;height:8px}.status-connected{background:var(--color-success)}.input-inline{width:160px;height:34px;padding:0 var(--space-md)}.room-layout{gap:var(--space-xl);flex:1;grid-template-columns:minmax(0,1fr) minmax(320px,400px);align-items:stretch;min-height:0;display:grid}.room-main{gap:var(--space-xl);flex-direction:column;min-height:0;display:flex}.room-sidebar{gap:var(--space-lg);flex-direction:column;min-height:320px;display:flex}.room-side-column{gap:var(--space-lg);flex-direction:column;min-height:0;display:flex}.room-side-column .room-sidebar{flex:1;min-height:0}.room-people{flex-shrink:0;max-height:240px;overflow-y:auto}.room-people-heading{margin:0 0 var(--space-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--color-on-dark-mute);font-size:13px}@media (width<=900px){.room-layout{grid-template-columns:1fr}}.tabs{gap:var(--space-xs);border-bottom:1px solid var(--color-hairline-dark);padding-bottom:var(--space-sm);display:flex}.tab-button{color:var(--color-on-dark-mute);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background:0 0;border:none;font-size:14px;font-weight:600}.tab-button-active{color:var(--color-on-dark);background:var(--color-surface-deep)}.icon-btn{border:1px solid var(--color-hairline-dark);border-radius:var(--radius-sm);color:var(--color-on-dark-mute);background:0 0;justify-content:center;align-items:center;width:28px;height:28px;line-height:1;display:inline-flex}.icon-btn-danger{color:var(--color-danger);border-color:var(--color-danger)}.select{border-radius:var(--radius-sm);border:1px solid var(--color-hairline-dark);background:var(--color-surface-deep);height:32px;color:var(--color-on-dark);padding:0 var(--space-sm)}.media-player{border-radius:var(--radius-lg);background:var(--color-surface-deep);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.media-player-empty{padding:var(--space-xxxl);text-align:center;background:var(--color-surface-elevated);border-radius:var(--radius-lg);justify-content:center;align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.media-player-stage{background:#000;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.media-player-frame{border:none;max-width:100%;display:block}.media-player-frame-embed{width:100%;height:100%}.media-player-frame-embed iframe{border:none;width:100%;height:100%;display:block}.media-player-frame-video{object-fit:contain;background:#000;max-height:100%}.player-caption{color:var(--color-on-dark-mute);margin-top:var(--space-sm);font-size:13px}.player-controls-bar{gap:var(--space-sm);padding:var(--space-md);flex-direction:column;display:flex}.player-scrub{align-items:center;gap:var(--space-sm);color:var(--color-on-dark-mute);font-size:12px;display:flex}.player-scrub .slider{flex:1}.player-transport{justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.player-transport-group{align-items:center;gap:var(--space-xs);display:flex}.player-transport-group button{border:1px solid var(--color-hairline-dark);border-radius:var(--radius-sm);color:var(--color-on-dark);background:0 0;justify-content:center;align-items:center;min-width:32px;height:32px;display:inline-flex}.player-transport-minimal{padding:var(--space-sm) var(--space-md)}.player-transport-minimal button{padding:0 var(--space-sm);width:auto}.slider{accent-color:var(--color-primary)}.slider-volume{width:80px}.playlist-panel{gap:var(--space-sm);flex-direction:column;flex:1;min-height:0;display:flex}.playlist-add-form,.chat-form{align-items:center;gap:var(--space-sm);display:flex}.playlist-add-form input,.chat-form input{flex:1}.playlist-list{gap:var(--space-xs);flex-direction:column;flex:1;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.playlist-row{align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);display:flex}.playlist-row-active{background:var(--color-surface-deep)}.playlist-row-drag-over{outline:2px dashed var(--color-primary);outline-offset:-2px}.playlist-row-drag-handle{cursor:grab;color:var(--color-on-dark-mute);flex-shrink:0;align-items:center;line-height:1;display:inline-flex}.playlist-row-main{align-items:center;gap:var(--space-sm);min-width:0;color:inherit;text-align:left;background:0 0;border:none;flex:1;padding:0;display:flex}.playlist-row-thumb{border-radius:var(--radius-sm);object-fit:cover;background:var(--color-surface-deep);flex-shrink:0;width:64px;height:36px}.playlist-row-thumb-placeholder{color:var(--color-on-dark-mute);justify-content:center;align-items:center;font-size:16px;display:flex}.playlist-row-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.playlist-row-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.playlist-row-meta{color:var(--color-on-dark-mute);white-space:nowrap;font-size:12px}.playlist-row-actions{gap:var(--space-xxs);display:flex}.playlist-empty{color:var(--color-on-dark-mute);padding:var(--space-md) 0}.people-list{gap:var(--space-sm);flex-direction:column;flex:1;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.people-row{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.avatar{background:var(--color-surface-elevated);border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:600;display:inline-flex}.member-name{flex:1}.member-actions{gap:var(--space-xxs);flex-shrink:0;display:flex}.chat-panel{flex-direction:column;flex:1;min-height:0;display:flex}.chat-empty{color:var(--color-on-dark-mute)}.chat-messages{gap:var(--space-xs);flex-direction:column;flex:1;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.chat-message{align-items:baseline;gap:var(--space-xs);display:flex}.chat-sender{color:var(--color-primary-bright);font-size:13px;font-weight:600}.chat-text{word-break:break-word;flex:1}.chat-delete{color:var(--color-on-dark-mute);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.chat-form{margin-top:var(--space-md)}.consent-overlay{padding:var(--space-xl);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.consent-dialog{gap:var(--space-md);flex-direction:column;max-width:420px;display:flex}.consent-actions{justify-content:flex-end;gap:var(--space-sm);display:flex}.status-reconnecting{background:var(--color-warning)}.status-disconnected{background:var(--color-danger)}.people-row-offline{opacity:.55}.member-offline{color:var(--color-on-dark-mute);font-size:12px}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.toast-stack{top:var(--space-lg);align-items:center;gap:var(--space-xs);z-index:200;pointer-events:none;flex-direction:column;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--color-surface-deep);border:1px solid var(--color-hairline-dark);color:var(--color-on-dark);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-size:13px;animation:.2s ease-out toast-in;box-shadow:0 4px 16px #00000059}@keyframes reaction-burst{0%{opacity:0;transform:translateY(0)scale(.6)}15%{opacity:1;transform:translateY(-16px)scale(1)}to{opacity:0;transform:translateY(-120px)scale(1.15)}}.reaction-burst-track{pointer-events:none;position:absolute;inset:0;overflow:hidden}.reaction-burst{font-size:32px;animation:2s ease-out forwards reaction-burst;position:absolute;bottom:12px}.reaction-picker{gap:2px;display:flex}.reaction-picker-btn.reaction-picker-btn{padding:var(--space-xs);cursor:pointer;background:0 0;border:none;border-radius:50%;font-size:16px;line-height:1}.reaction-picker-btn:hover{background:#ffffff26}.shortcuts-overlay{padding:var(--space-xl);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.shortcuts-dialog{gap:var(--space-md);flex-direction:column;width:100%;max-width:380px;display:flex}.shortcuts-list{gap:var(--space-sm);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.shortcuts-list li{align-items:center;gap:var(--space-md);display:flex}.shortcuts-list kbd{text-align:center;min-width:56px;padding:var(--space-xxs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-hairline-dark);background:var(--color-surface-deep);font-size:12px}