: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;gap:4px;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{justify-content:center;align-items:center;gap:var(--space-xl);min-height:100vh;padding:var(--space-xl);flex-direction:column;display:flex}.auth-card{gap:var(--space-lg);flex-direction:column;width:100%;max-width:400px;display:flex}.auth-card h1{font-size:28px}.auth-brand,.turnstile-container{justify-content:center;display:flex}.lobby-page{max-width:1100px;padding:var(--space-xxl) var(--space-xl);margin:0 auto}.lobby-header{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xxl);flex-wrap:wrap;display:flex}.lobby-card,.lobby-card form{gap:var(--space-lg);flex-direction:column;display:flex}.lobby-card p,.lobby-card ul{margin:0}.brand{align-items:center;gap:var(--space-sm);display:flex}.brand-icon{flex-shrink:0;width:64px;height:64px}.brand-text{flex-direction:column;gap:2px;display:flex}.brand-name{margin:0;font-size:40px}.brand-name-suffix{color:var(--color-on-dark-mute);font-weight:400}.brand-tagline{color:var(--color-on-dark-mute);margin:0;font-size:14px}.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-icon{width:22px;height:22px}.brand-compact .brand-name{font-size:18px}.brand-compact .brand-attribution{font-size:11px}.brand-compact .brand-logo{height:12px}.brand-link{color:inherit;border-radius:var(--radius-sm);text-decoration:none;display:inline-flex}.brand-link:hover,.brand-link:focus-visible{opacity:.8}@media (width<=480px){.brand-icon{width:40px;height:40px}.brand-name{font-size:26px}.brand-tagline{font-size: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-footer{justify-content:center;gap:var(--space-lg);margin-top:var(--space-xxl);font-size:13px;display:flex}.legal-page{max-width:760px;padding:var(--space-xxl) var(--space-xl);margin:0 auto}.legal-header{margin-bottom:var(--space-xxl)}.legal-card h1{font-size:26px}.legal-meta{color:var(--color-on-dark-mute);margin-top:var(--space-xs);font-size:13px}.legal-card section{margin-top:var(--space-xl)}.legal-card h2{margin-bottom:var(--space-sm);font-size:16px}.legal-card ul{padding-left:var(--space-lg);gap:var(--space-sm);flex-direction:column;margin:0;display:flex}.legal-back{margin-top:var(--space-xl);text-align:center}.cookie-consent{z-index:100;justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-lg) var(--space-xl);background:var(--color-surface-elevated);border-top:1px solid var(--color-hairline-dark);flex-wrap:wrap;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 24px #00000040}.cookie-consent p{color:var(--color-on-dark-mute);flex:480px;margin:0;font-size:13px}.cookie-consent-actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.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;flex:auto;min-width:0;display:flex}.room-topbar-link{align-items:center;gap:var(--space-md);flex:0 auto;min-width:0;display:flex}.room-topbar-status{align-items:center;gap:var(--space-sm);flex-wrap:wrap;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);flex:0 auto;min-width:0;max-width:100%;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:minmax(0,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,.media-player-frame-embed>div{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);display:flex}.people-row .badge{flex-shrink:0}.avatar{background:var(--color-surface-soft);width:28px;height:28px;color:var(--color-ink);border:2px solid var(--color-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:600;display:inline-flex;overflow:hidden}.avatar img{object-fit:cover;border-radius:50%;width:100%;height:100%}.member-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.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-timestamp{color:var(--color-on-dark-mute);flex-shrink:0;font-size:11px}.chat-sender{color:var(--color-primary-bright);font-size:13px;font-weight:600}.chat-text{word-break:break-word;flex:1}.chat-log-entry{align-items:baseline;gap:var(--space-xs);display:flex}.chat-log-text{color:var(--color-on-dark-mute);flex:1;font-size:12px;font-style:italic}.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}.consent-choices{gap:var(--space-sm);flex-direction:column;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}.member-out-of-sync{color:var(--color-warning);white-space:nowrap;flex-shrink:0;align-items:center;gap:4px;font-size:12px;display:inline-flex}@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}.recovery-codes-overlay{padding:var(--space-xl);z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.recovery-codes-dialog{gap:var(--space-md);flex-direction:column;width:100%;max-width:420px;display:flex}.recovery-codes-list{padding:var(--space-md);gap:var(--space-sm);background:var(--color-surface-deep);border-radius:var(--radius-sm);border:1px solid var(--color-hairline-dark);grid-template-columns:1fr 1fr;margin:0;list-style:none;display:grid}.recovery-codes-ack{align-items:center;gap:var(--space-sm);display:flex}