:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-xs: 6px;--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-full: 9999px;--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Consolas, monospace;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.0625rem;--text-xl: 1.25rem;--text-2xl: 1.75rem;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.65;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--bg-primary: #0a0a0a;--bg-secondary: #161616;--bg-tertiary: #1e1e1e;--bg-hover: #282828;--bg-elevated: #181818;--text-main: #e8e8e8;--text-sub: #a0a0a0;--text-faint: #6e6e6e;--accent: #ababab;--accent-hover: #c0c0c0;--accent-active: #949494;--accent-contrast: #ffffff;--accent-subtle: rgba(171, 171, 171, .12);--danger: #c47a7a;--danger-hover: #d48e8e;--danger-subtle: rgba(196, 122, 122, .12);--success: #7aaa7a;--success-subtle: rgba(122, 170, 122, .12);--warning: #b8a060;--warning-subtle: rgba(184, 160, 96, .12);--border: #2a2a2a;--border-strong: #3a3a3a;--border-focus: #ababab;--focus-ring: rgba(171, 171, 171, .3);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .18);--shadow: 0 4px 8px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .16);--shadow-md: 0 10px 28px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .2);--shadow-lg: 0 28px 64px rgba(0, 0, 0, .42), 0 10px 24px rgba(0, 0, 0, .28);--transition: .15s ease;--transition-slow: .2s ease;--header-height: 56px;--sidebar-min: 320px;--sidebar-max: 400px}[data-theme=light]{--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--bg-tertiary: #ebebeb;--bg-hover: #e0e0e0;--bg-elevated: #ffffff;--text-main: #1a1a1a;--text-sub: #5a5a5a;--text-faint: #8a8a8a;--accent: #6a6a6a;--accent-hover: #5a5a5a;--accent-active: #4a4a4a;--accent-contrast: #ffffff;--accent-subtle: rgba(106, 106, 106, .1);--danger: #b06060;--danger-hover: #9a4a4a;--danger-subtle: rgba(176, 96, 96, .1);--success: #5a8a5a;--success-subtle: rgba(90, 138, 90, .1);--warning: #8a7a40;--warning-subtle: rgba(138, 122, 64, .1);--border: #d4d4d4;--border-strong: #bebebe;--border-focus: #6a6a6a;--focus-ring: rgba(106, 106, 106, .2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05);--shadow: 0 4px 8px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .04);--shadow-md: 0 10px 28px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);--shadow-lg: 0 28px 64px rgba(0, 0, 0, .14), 0 10px 24px rgba(0, 0, 0, .07)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);font-size:16px;background:var(--bg-primary);color:var(--text-main);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;transition:background var(--transition-slow),color var(--transition-slow)}button,input,select,textarea{font-family:inherit;font-size:inherit}h1,h2,h3,h4{line-height:var(--leading-tight);font-weight:var(--weight-semibold)}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}.hidden{display:none!important}.screen{display:none;height:100vh;width:100vw;overflow:hidden}.screen.active{display:flex;flex-direction:column}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--space-10);padding:var(--space-2) var(--space-5);border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:var(--weight-medium);line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--accent-contrast);font-weight:var(--weight-semibold)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:active:not(:disabled){background:var(--accent-active)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-main);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}.btn-ghost{background:transparent;color:var(--text-sub)}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-main)}.btn-danger{background:var(--danger);color:#fff;font-weight:var(--weight-semibold)}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.btn-danger-ghost{background:transparent;color:var(--danger)}.btn-danger-ghost:hover:not(:disabled){background:var(--danger-subtle)}.btn-sm{min-height:var(--space-10);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-sm)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1)}.btn-icon .material-symbols-rounded{font-size:1.25rem;line-height:1}.btn-icon-only{width:var(--space-10);min-width:var(--space-10);height:var(--space-10);padding:0}.btn-icon-only.active{background:var(--danger-subtle);color:var(--danger)}.btn-icon-only.active:hover{background:var(--danger);color:#fff}.form-group{margin-bottom:var(--space-5)}.form-group label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-sub);margin-bottom:var(--space-2)}input[type=text],input[type=number],input[type=url],input[type=search],textarea,select{font-family:var(--font-sans)}.form-group input{width:100%;min-height:var(--space-10);padding:var(--space-3) var(--space-4);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:var(--text-base);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}.form-group input::placeholder{color:var(--text-faint)}.form-group input:hover{border-color:var(--border-strong)}.form-group input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.error-msg{display:flex;align-items:center;gap:var(--space-2);min-height:var(--space-5);margin-top:var(--space-3);padding:0;color:var(--danger);font-size:var(--text-sm);font-weight:var(--weight-medium)}.error-msg:not(:empty){padding:var(--space-2) var(--space-3);background:var(--danger-subtle);border-radius:var(--radius-xs)}.error-msg .material-symbols-rounded{font-size:1.05rem;flex-shrink:0}#landing-screen{align-items:center;justify-content:center;padding:var(--space-4);background:var(--bg-primary)}.landing-container{width:100%;max-width:440px;padding:var(--space-8);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.landing-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--space-8)}.landing-brand h1{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-main);letter-spacing:-.02em}.landing-brand p{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--text-sub)}.landing-divider{width:48px;height:1px;background:var(--border);margin:0 auto var(--space-6)}.landing-btn{width:100%}.tabs{display:flex;gap:var(--space-1);padding:var(--space-1);margin-bottom:var(--space-6);background:var(--bg-tertiary);border-radius:var(--radius)}.tab-btn{flex:1;min-height:var(--space-10);padding:var(--space-2) var(--space-4);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-sub);cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-medium);transition:background var(--transition),color var(--transition)}.tab-btn:hover:not(.active){color:var(--text-main)}.tab-btn.active{background:var(--bg-secondary);color:var(--text-main);font-weight:var(--weight-semibold);box-shadow:var(--shadow-sm)}.tab-panel{display:none}.tab-panel.active{display:block}.room-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:var(--header-height);padding:0 var(--space-4);background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}.header-left{display:flex;align-items:center;gap:var(--space-3);min-width:0}.header-left h2{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-main);white-space:nowrap}.room-id-badge{padding:var(--space-1) var(--space-3);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:var(--font-mono);font-weight:var(--weight-medium);color:var(--accent);letter-spacing:.04em}.header-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.video-controls-box{display:flex;align-items:center;gap:var(--space-1);margin-left:var(--space-3);padding:3px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius)}.video-controls-box input{width:240px;min-height:0;padding:6px 10px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-main);font-size:var(--text-sm);line-height:1.2;transition:var(--transition)}.video-controls-box .btn-sm{min-height:30px;padding:0 var(--space-3)}.video-controls-box input::placeholder{color:var(--text-faint)}.video-controls-box input:focus{outline:none;border-color:var(--border-focus);background:var(--bg-secondary);box-shadow:0 0 0 2px var(--focus-ring)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.02em;white-space:nowrap}.badge:before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}.host-badge{background:var(--warning-subtle);color:var(--warning)}.host-badge:before{background:var(--warning)}.connected{background:var(--success-subtle);color:var(--success)}.connected:before{background:var(--success)}.disconnected{background:var(--danger-subtle);color:var(--danger)}.disconnected:before{background:var(--danger)}.room-main{display:flex;flex:1;overflow:hidden}.video-section{flex:2;display:flex;flex-direction:column;min-width:0;background:#000;position:relative}#player-container{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}#player{width:100%;height:100%}#player iframe{width:100%;height:100%;border:none}#player-container>iframe{width:100%!important;height:100%!important;border:none}#player-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-faint);z-index:1}.placeholder-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);color:var(--text-faint);padding:var(--space-6)}.placeholder-content p{max-width:380px;line-height:var(--leading-relaxed);font-size:var(--text-sm)}.placeholder-icon{font-size:3.5rem;color:var(--accent);opacity:.4}.video-info{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);background:var(--bg-secondary);border-top:1px solid var(--border);font-size:var(--text-sm);color:var(--text-sub);flex-shrink:0}.video-info-left{display:flex;align-items:center;gap:var(--space-2)}.video-info-left .material-symbols-rounded{font-size:1.1rem;color:var(--accent)}.video-info-right{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint)}.compact-mode .room-header,.compact-mode .video-info{display:none}.compact-mode .room-main{flex-direction:row}.compact-mode .video-section{flex:1}.compact-mode .sidebar{max-width:340px;min-width:280px;flex:0 0 auto}.compact-mode .chat-panel{flex:1;min-height:0}.chat-hidden .sidebar{display:none}.chat-hidden .video-section{flex:1}.sidebar{flex:1;min-width:var(--sidebar-min);max-width:var(--sidebar-max);display:flex;flex-direction:column;background:var(--bg-secondary);border-left:1px solid var(--border);overflow:hidden}.panel{display:flex;flex-direction:column;overflow:hidden}.panel h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:var(--weight-semibold);color:var(--text-faint);padding:var(--space-3) var(--space-4)}.chat-users-bar{flex-shrink:0;border-bottom:1px solid var(--border)}.chat-users-bar.collapsed .users-bar-list{display:none}.chat-users-bar.collapsed .panel-toggle{transform:rotate(180deg)}.users-bar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4)}.users-bar-header h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:0}.panel-toggle{transition:transform var(--transition)}.users-bar-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0 var(--space-4) var(--space-3);overflow-y:auto;max-height:88px}.users-bar-list li{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);background:var(--bg-tertiary);border:1px solid var(--border);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);color:var(--text-sub)}.user-host{font-size:.625rem;background:var(--warning-subtle);color:var(--warning);padding:1px var(--space-1);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em;font-weight:var(--weight-bold)}.chat-panel{flex:1;min-height:0}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.chat-message{display:flex;flex-direction:column;gap:var(--space-1);position:relative;max-width:85%}.chat-message.own{align-items:flex-end;margin-left:auto}.msg-header{display:flex;align-items:baseline;gap:var(--space-2)}.msg-username{font-size:var(--text-sm);font-weight:var(--weight-semibold)}.msg-time{font-size:var(--text-xs);color:var(--text-faint)}.msg-text{background:var(--bg-tertiary);border:1px solid var(--border);padding:var(--space-2) var(--space-3);border-radius:var(--radius);border-top-left-radius:var(--radius-xs);font-size:var(--text-sm);color:var(--text-main);width:fit-content;word-break:break-word;line-height:var(--leading-relaxed);box-shadow:var(--shadow-sm)}.chat-message.own .msg-text{background:var(--accent-subtle);border-color:transparent;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius-xs);color:var(--text-main)}.msg-text a{color:var(--accent);text-decoration:underline;word-break:break-all}.msg-text a:hover{color:var(--accent-hover)}.msg-reactions{display:flex;gap:var(--space-1);margin-top:var(--space-1);flex-wrap:wrap}.msg-reaction-badge{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-2);cursor:pointer;font-size:var(--text-xs);min-height:24px;transition:var(--transition)}.msg-reaction-badge:hover{background:var(--bg-hover);border-color:var(--border-strong)}.reaction-count{color:var(--text-faint);font-size:.6875rem;font-weight:var(--weight-medium)}.msg-add-reaction{position:absolute;top:0;right:-32px;opacity:0;background:none;border:none;cursor:pointer;color:var(--text-faint);transition:opacity var(--transition),color var(--transition);padding:2px}.chat-message:hover .msg-add-reaction{opacity:.6}.msg-add-reaction:hover{opacity:1!important;color:var(--accent)}.msg-add-reaction .material-symbols-rounded{font-size:1rem}.chat-message.own .msg-add-reaction{right:auto;left:-32px}.msg-reaction-picker{position:absolute;top:100%;right:0;z-index:10;display:flex;gap:var(--space-1);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-full);padding:var(--space-1);box-shadow:var(--shadow-md)}.chat-message.own .msg-reaction-picker{right:0;left:auto}.msg-reaction-picker button{background:none;border:none;cursor:pointer;font-size:1.1rem;padding:var(--space-1);border-radius:var(--radius-full);transition:var(--transition);min-height:28px;min-width:28px}.msg-reaction-picker button:hover{background:var(--bg-hover)}.user-color-0{color:#d4d4d4}.user-color-1{color:#b8b8b8}.user-color-2{color:#9e9e9e}.user-color-3{color:#888}.user-color-4{color:#ccc}.user-color-5{color:#aaa}.user-color-6{color:#949494}.user-color-7{color:#7a7a7a}.user-color-8{color:#c4c4c4}.user-color-9{color:#a6a6a6}.typing-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--text-faint)}.typing-dots{display:flex;gap:3px}.typing-dots span{width:5px;height:5px;background:var(--text-faint);border-radius:50%;animation:typingPulse 1.2s infinite ease-in-out}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingPulse{0%,60%,to{opacity:.35}30%{opacity:1}}.chat-input-row{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border)}.chat-input-row input{flex:1;min-height:var(--space-10);padding:var(--space-2) var(--space-4);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-main);font-size:var(--text-sm);transition:var(--transition)}.chat-input-row input::placeholder{color:var(--text-faint)}.chat-input-row input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.emoji-picker{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2) var(--space-4);border-top:1px solid var(--border);animation:fadeIn .15s ease}.emoji-pick{background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:1.15rem;cursor:pointer;min-height:32px;transition:background var(--transition),border-color var(--transition)}.emoji-pick:hover{background:var(--bg-hover);border-color:var(--border-strong)}.chat-messages.compact .chat-message{gap:1px}.chat-messages.compact .msg-text{padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}.chat-messages.compact .msg-header{gap:var(--space-1)}.chat-messages.compact .msg-username{font-size:var(--text-xs)}.chat-messages.compact .msg-time{font-size:.625rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:overlayIn .2s ease}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;animation:fadeIn .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border)}.modal-header h3{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-main)}.modal-header h3 .material-symbols-rounded{font-size:1.3rem;color:var(--accent)}.modal-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}.playlist-modal-content{max-width:540px}.playlist-body{gap:var(--space-4)}.playlist-input-row{display:flex;gap:var(--space-2)}.playlist-input-row input{flex:1;min-height:var(--space-10);padding:var(--space-2) var(--space-4);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:var(--text-sm);transition:var(--transition)}.playlist-input-row input::placeholder{color:var(--text-faint)}.playlist-input-row input:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.playlist-list{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);max-height:340px;overflow-y:auto;padding:0}.playlist-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-sub);transition:var(--transition)}.playlist-list li:hover{border-color:var(--border-strong);background:var(--bg-hover)}.playlist-item-info{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex:1}.playlist-item-info .material-symbols-rounded{font-size:1.15rem;color:var(--accent);flex-shrink:0}.playlist-item-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-main)}.playlist-item-meta{font-size:var(--text-xs);color:var(--text-faint);flex-shrink:0}.playlist-actions{display:flex;gap:var(--space-1);flex-shrink:0}.playlist-empty{text-align:center;color:var(--text-faint);font-size:var(--text-sm);padding:var(--space-8) var(--space-4)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--space-10)}.setting-row>label:first-child{font-size:var(--text-sm);color:var(--text-main);font-weight:var(--weight-medium)}.setting-select{min-height:var(--space-10);padding:var(--space-2) var(--space-4);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:var(--text-sm);cursor:pointer;min-width:150px;transition:var(--transition)}.setting-select:hover{border-color:var(--border-strong)}.setting-select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.setting-number{width:100px;min-height:var(--space-10);padding:var(--space-2) var(--space-3);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:var(--text-sm);transition:var(--transition)}.setting-number:hover{border-color:var(--border-strong)}.setting-number:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px var(--focus-ring)}.toggle-switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-hover);border:1px solid var(--border-strong);border-radius:var(--radius-full);transition:var(--transition)}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:var(--text-sub);border-radius:50%;transition:var(--transition)}.toggle-switch input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(18px);background:#fff}.toggle-switch input:focus-visible+.toggle-slider{box-shadow:0 0 0 3px var(--focus-ring)}#toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:3000;display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none}.toast{display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-10);padding:var(--space-3) var(--space-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-main);font-size:var(--text-sm);font-weight:var(--weight-medium);box-shadow:var(--shadow-md);animation:fadeIn .2s ease,fadeOut .2s ease 3.8s forwards;pointer-events:auto;max-width:340px}.toast .material-symbols-rounded{font-size:1.25rem;flex-shrink:0}.toast.error{background:var(--danger-subtle);border-color:var(--danger);color:var(--danger)}.toast.success{background:var(--success-subtle);border-color:var(--success);color:var(--success)}.toast.warning{background:var(--warning-subtle);border-color:var(--warning);color:var(--warning)}.toast.info .material-symbols-rounded{color:var(--accent)}.toast.error .material-symbols-rounded{color:var(--danger)}.toast.success .material-symbols-rounded{color:var(--success)}.toast.warning .material-symbols-rounded{color:var(--warning)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.screen-share-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:transparent;z-index:5}.screen-share-video.hidden{display:none!important}.screen-share-overlay{position:absolute;top:var(--space-3);left:var(--space-3);z-index:6;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#a05a5ae0;color:#fff;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);pointer-events:none;animation:pulseOverlay 2s infinite;box-shadow:var(--shadow-md)}.screen-share-overlay:before{content:"";width:8px;height:8px;background:#fff;border-radius:50%}@keyframes pulseOverlay{0%,to{opacity:1}50%{opacity:.7}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}@media(max-width:768px){.room-main{flex-direction:column}.video-section{flex:none;height:42vh;min-height:240px}.sidebar{flex:1;min-width:unset;max-width:unset;border-left:none;border-top:1px solid var(--border)}.landing-container{padding:var(--space-6)}.tab-panel .btn-primary{width:100%}.room-header{padding:0 var(--space-3)}.header-left h2{font-size:var(--text-sm)}.video-controls-box{display:none}.room-id-badge{font-size:.625rem;padding:2px var(--space-2)}}@media(max-width:480px){.video-section{height:36vh}.header-right .badge{display:none}}@media(min-width:1440px){.sidebar{max-width:420px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}