:root{--color-bg-1:#0b1020;--color-bg-2:#12192f;--color-bg-3:#1a223d;--color-text:#ecf2ff;--color-text-soft:#cad5ef;--color-text-muted:#98a8ca;--color-line-soft:#ffffff14;--color-line-mid:#ffffff1f;--color-line-strong:#ffffff2e;--color-surface-1:#11182be6;--color-surface-2:#0d1325db;--color-surface-3:#122142f2;--color-surface-4:#10172ceb;--color-soft-fill:#ffffff0f;--color-soft-fill-2:#ffffff14;--color-primary-1:#3b82f6;--color-primary-2:#2563eb;--color-purple-1:#8b5cf6;--color-purple-2:#7c3aed;--color-cyan-1:#7dd3fc;--color-gold-1:#fbbf24;--color-live-bg:#16a34a2e;--color-live-text:#a7f3d0;--color-error-bg:#7f1d1d4d;--color-error-border:#f8717166;--color-error-text:#fecaca;--color-warning-bg:#92400e47;--color-warning-border:#fb923c66;--color-warning-text:#fed7aa;--color-success-soft:#16a34a2e;--color-success-soft-text:#dcfce7;--color-blue-soft:#3b82f62e;--color-blue-soft-text:#dbeafe;--color-purple-soft:#8b5cf62e;--color-purple-soft-text:#ede9fe;--color-gold-soft:#f59e0b2e;--color-gold-soft-text:#fde68a;--radius-sm:12px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-2xl:28px;--radius-3xl:30px;--radius-pill:999px;--space-1:4px;--space-2:6px;--space-3:8px;--space-4:10px;--space-5:12px;--space-6:14px;--space-7:16px;--space-8:18px;--space-9:20px;--space-10:24px;--space-11:30px;--space-12:34px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-base:15px;--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--weight-bold:800;--weight-xbold:900;--weight-black:950;--page-max:1840px;--page-pad:18px;--workspace-gap:14px;--rail-left-width:280px;--rail-right-width:340px;--chat-side-width:320px;--stage-min-height:clamp(430px, 60vh, 740px);--rooms-scroll-max:min(70vh, 900px);--shadow-lg:0 26px 70px #00000047;--shadow-stage:0 30px 90px #00000057;--blur-surface:blur(12px);--transition-fast:.18s ease;--transition-mid:.24s ease;--focus-ring:0 0 0 2px #7dd3fccc;--gradient-app-bg:radial-gradient(circle at top left, #3b82f62e, transparent 26%), radial-gradient(circle at 85% 15%, #a855f724, transparent 22%), radial-gradient(circle at bottom right, #0ea5e91f, transparent 22%), linear-gradient(180deg, var(--color-bg-1) 0%, var(--color-bg-2) 45%, var(--color-bg-3) 100%);--gradient-surface:linear-gradient(180deg, var(--color-surface-1), var(--color-surface-2));--gradient-invite:linear-gradient(180deg, var(--color-surface-3), var(--color-surface-4));--gradient-button-primary:linear-gradient(180deg, var(--color-primary-1), var(--color-primary-2));--gradient-button-dark:linear-gradient(180deg, #111827, #030712);--gradient-button-purple:linear-gradient(180deg, var(--color-purple-1), var(--color-purple-2))}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--color-text);background:var(--gradient-app-bg);font-family:Inter,Segoe UI,Arial,sans-serif}button,input,select,textarea{font:inherit;outline:none}img,video,canvas,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh}.app-page{max-width:var(--page-max);padding:var(--page-pad);gap:var(--workspace-gap);margin:0 auto;display:grid}.panel,.auth-card,.subpanel{background:var(--gradient-surface);border:1px solid var(--color-line-soft);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:var(--blur-surface);backdrop-filter:var(--blur-surface)}.muted-text,.info-text,.rail-subtitle,.top-subtitle,.auth-subtitle,.stage-room-meta,.room-card-meta,.field-label{color:var(--color-text-muted)}.eyebrow,.field-label{font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.4px}.eyebrow{color:var(--color-cyan-1)}.brand-title{font-size:var(--text-3xl);font-weight:var(--weight-black);letter-spacing:-.8px;margin:0}.top-subtitle,.auth-subtitle,.rail-subtitle,.stage-room-meta{font-size:var(--text-md);margin-top:4px;line-height:1.6}.status-pill{border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--weight-bold);background:var(--color-soft-fill-2);color:var(--color-text-soft);border:1px solid #0000;align-items:center;gap:6px;padding:7px 11px;display:inline-flex}.status-pill.live{background:var(--color-live-bg);color:var(--color-live-text)}.form-stack,.button-stack,.field-stack{display:grid}.form-stack,.button-stack{gap:12px}.field-stack{gap:6px}.notice{border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid #0000;padding:12px;line-height:1.6}.notice.error{background:var(--color-error-bg);border-color:var(--color-error-border);color:var(--color-error-text)}.notice.warning{background:var(--color-warning-bg);border-color:var(--color-warning-border);color:var(--color-warning-text)}.ui-button{border-radius:var(--radius-md);min-height:42px;font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:11px 14px;line-height:1.1;display:inline-flex}.ui-button:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)}.ui-button:active:not(:disabled){transform:translateY(1px)}.ui-button:focus-visible{box-shadow:var(--focus-ring)}.ui-button:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}.ui-button.primary{background:var(--gradient-button-primary);color:#fff}.ui-button.dark{background:var(--gradient-button-dark);color:#fff}.ui-button.purple{background:var(--gradient-button-purple);color:#fff}.ui-button.muted{background:var(--color-soft-fill-2);color:#edf2ff}.ui-button.blue-soft{background:var(--color-blue-soft);color:var(--color-blue-soft-text)}.ui-button.green-soft{background:var(--color-success-soft);color:var(--color-success-soft-text)}.ui-button.purple-soft{background:var(--color-purple-soft);color:var(--color-purple-soft-text)}.ui-button.gold-soft{background:var(--color-gold-soft);color:var(--color-gold-soft-text)}.ui-button.sm{min-height:34px;padding:8px 12px;font-size:12px}.ui-button.md{min-height:42px}.ui-button.lg{min-height:48px;padding:13px 18px;font-size:14px}.ui-input,.ui-select,.ui-textarea{border-radius:var(--radius-md);border:1px solid var(--color-line-mid);background:var(--color-soft-fill);color:#f8fbff;box-sizing:border-box;width:100%;font-size:var(--text-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);padding:13px 15px}.ui-input::placeholder,.ui-textarea::placeholder{color:#ecf2ff73}.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{border-color:#7dd3fc99;box-shadow:0 0 0 2px #7dd3fc29}.auth-shell{place-items:center;padding:34px;display:grid}.auth-card{gap:20px;width:min(760px,100%);padding:34px;display:grid}.auth-mode-row,.invite-name-row,.chat-compose-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.invite-banner{background:var(--gradient-invite);gap:10px;padding:16px;display:grid}.invite-top{flex-wrap:wrap;justify-content:space-between;gap:12px;display:flex}.invite-room-title{font-size:var(--text-xl);font-weight:var(--weight-xbold);margin-top:4px}.top-shell{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:18px;display:flex}.top-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.workspace-grid{grid-template-columns:var(--rail-left-width) minmax(0, 1fr) var(--rail-right-width);gap:var(--workspace-gap);align-items:start;display:grid}.workspace-grid.compact{grid-template-columns:1fr}.left-rail,.right-rail,.center-stage-panel{padding:14px}.left-rail,.right-rail{align-content:start;gap:12px;display:grid}.center-stage-panel{align-content:start;gap:14px;display:grid}.subpanel{gap:12px;padding:14px;display:grid}.panel-section{gap:12px;display:grid}.inline-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.rooms-scroll-area{max-height:var(--rooms-scroll-max);gap:10px;padding-right:6px;display:grid;overflow-y:auto}.room-card{text-align:left;border-radius:var(--radius-lg);border:1px solid var(--color-line-soft);color:#eff6ff;cursor:pointer;transition:transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);background:linear-gradient(#ffffff0f,#ffffff0a);padding:14px}.room-card:hover{border-color:#94a3b838;transform:translateY(-1px)}.room-card:focus-visible{box-shadow:var(--focus-ring)}.room-card.active{background:linear-gradient(#1e40af47,#1e293b33);border-color:#60a5fa73;box-shadow:inset 0 0 0 1px #60a5fa1f,0 12px 28px #0000002e}.room-card-top{justify-content:space-between;align-items:start;gap:12px;display:flex}.room-card-name{font-size:var(--text-base);font-weight:var(--weight-xbold);margin:0}.room-card-meta{font-size:var(--text-sm);margin-top:6px;line-height:1.6}.room-card-tags{flex-wrap:wrap;gap:8px;display:flex}.room-tag{border-radius:var(--radius-pill);background:var(--color-soft-fill-2);min-height:28px;color:var(--color-text-soft);font-size:var(--text-xs);font-weight:var(--weight-bold);align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.stage-topbar{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:14px;display:flex}.stage-topbar-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stage-title{font-size:var(--text-2xl);font-weight:var(--weight-black);letter-spacing:-.5px;margin:0}.stage-status-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stage-stack{gap:14px;display:grid}.control-dock{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.info-box{border-radius:var(--radius-lg);border:1px solid var(--color-line-soft);background:linear-gradient(#ffffff0f,#ffffff0a);gap:6px;padding:14px;display:grid}.info-title{font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin:0}.info-value{font-size:var(--text-lg);font-weight:var(--weight-xbold);color:#f8fbff;margin:0}.theater-stage{min-height:var(--stage-min-height);border-radius:var(--radius-3xl);box-shadow:var(--shadow-stage);background:radial-gradient(circle at top,#fbbf241a,#0000 24%),linear-gradient(#1a0c08f0,#0a070ef5);border:1px solid #ffffff14;position:relative;overflow:hidden}.theater-arch{pointer-events:none;z-index:1;position:absolute;inset:0}.theater-curtain-left,.theater-curtain-right{opacity:.9;background:linear-gradient(90deg,#601111eb,#7f1d1de6 35%,#4c0519f2 68%,#2f0610f2);width:clamp(80px,10%,140px);position:absolute;top:0;bottom:0;box-shadow:inset -12px 0 30px #00000038}.theater-curtain-left{border-top-left-radius:26px;border-bottom-left-radius:26px;left:0}.theater-curtain-right{border-top-right-radius:26px;border-bottom-right-radius:26px;right:0;transform:scaleX(-1)}.theater-stage-glow{pointer-events:none;z-index:1;background:radial-gradient(#fbbf2421,#0000 68%);height:42%;position:absolute;bottom:10%;left:12%;right:12%}.theater-footer-lights{border-radius:var(--radius-pill);opacity:.8;z-index:2;background:radial-gradient(circle at 2%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 12%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 22%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 32%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 42%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 52%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 62%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 72%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 82%,#facc15cc 0 4px,#0000 5px),radial-gradient(circle at 92%,#facc15cc 0 4px,#0000 5px);height:10px;position:absolute;bottom:14px;left:16%;right:16%}.theater-camera-center{z-index:3;place-items:center;padding:30px;display:grid;position:absolute;inset:0}.theater-camera-window{aspect-ratio:16/9;border-radius:var(--radius-3xl);width:min(76%,960px);box-shadow:var(--shadow-stage);background:linear-gradient(#fbbf2429,#5c2b0024);padding:12px}.theater-screen-bezel{border-radius:var(--radius-xl);background:#040814d9;border:1px solid #ffffff14;width:100%;height:100%;overflow:hidden}.theater-screen-content,.theater-screen-placeholder,.theater-host-box,.theater-floating-share-box{width:100%;height:100%}.theater-screen-placeholder{text-align:center;color:var(--color-text-soft);place-items:center;padding:24px;display:grid}.stage-empty-title{font-size:var(--text-xl);font-weight:var(--weight-xbold);color:#fff;margin:0}.stage-empty-copy{font-size:var(--text-md);color:var(--color-text-muted);margin:8px 0 0;line-height:1.7}.chat-participants-layout{grid-template-columns:minmax(0, 1fr) var(--chat-side-width);gap:14px;display:grid}.chat-panel,.participants-panel{gap:12px;display:grid}.chat-scroll{gap:10px;max-height:420px;padding-right:6px;display:grid;overflow-y:auto}.chat-message{border-radius:var(--radius-lg);border:1px solid var(--color-line-soft);background:linear-gradient(#ffffff0f,#ffffff0a);gap:6px;padding:12px;display:grid}.chat-message-author{font-size:var(--text-sm);font-weight:var(--weight-xbold);color:#fff}.chat-message-meta{font-size:var(--text-xs);color:var(--color-text-muted)}.chat-message-body{font-size:var(--text-md);color:#eef4ff;line-height:1.7}.participants-list{gap:10px;display:grid}.participant-card{border-radius:var(--radius-lg);border:1px solid var(--color-line-soft);background:linear-gradient(#ffffff0f,#ffffff0a);justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.participant-name{font-size:var(--text-md);font-weight:var(--weight-xbold);color:#fff}.participant-role{font-size:var(--text-xs);color:var(--color-text-muted)}@media (width<=1600px){:root{--rail-left-width:260px;--rail-right-width:320px}.theater-camera-window{width:min(80%,920px)}}@media (width<=1280px){:root{--rail-left-width:240px;--rail-right-width:300px}.info-grid{grid-template-columns:1fr 1fr}}@media (width<=1024px){.workspace-grid,.chat-participants-layout{grid-template-columns:1fr}.theater-camera-window{width:min(88%,900px)}.info-grid{grid-template-columns:1fr}}@media (width<=768px){.app-page,.top-shell,.left-rail,.right-rail,.center-stage-panel,.subpanel,.auth-card{padding:14px}.auth-mode-row,.invite-name-row,.chat-compose-row{grid-template-columns:1fr}.top-actions,.stage-topbar-actions,.control-dock{width:100%}.theater-camera-window{width:min(94%,860px)}.brand-title{font-size:24px}.stage-title{font-size:20px}}@media (width<=560px){.app-page{padding:10px}.top-shell,.left-rail,.right-rail,.center-stage-panel,.subpanel,.auth-card{padding:12px}.ui-button{width:auto;max-width:100%}.room-card-top,.invite-top,.stage-topbar{flex-direction:column;align-items:stretch}.theater-camera-center{padding:18px}.theater-camera-window{border-radius:22px;width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}