: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}.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{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-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}@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;width:28px;height:28px;line-height:1}.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{aspect-ratio:16/9;max-height:100%}.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;min-width:32px;height:32px}.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{gap:var(--space-sm);display:flex}.playlist-add-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-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{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-xs);width:100%;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}.chat-form{gap:var(--space-sm);margin-top:var(--space-md);display:flex}.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}