:root{--bg-primary:#f5fafc;--bg-secondary:#eaf8fd;--bg-card:#fff;--bg-input:#f5fafc;--accent:#00a6c8;--accent-alt:#00a8d6;--accent-hover:#009fca;--danger:#e53e3e;--success:#22c55e;--warning:#d97706;--text-primary:#062b3f;--text-secondary:#3a4a57;--text-muted:#5b6b78;--border:#cfeaf4;--border-light:#d9f2fa;--warm:#f3e7e1;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px}*{box-sizing:border-box}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}#root{width:100%;height:100dvh;overflow:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.auth-page{background:radial-gradient(80% 60% at 50% -20%,#00a6c81a 0%,#0000 60%),linear-gradient(160deg,#f5fafc 0%,#eaf8fd 60%,#d9f2fa 100%);justify-content:center;align-items:center;min-height:100dvh;padding:16px;display:flex}.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:420px;padding:40px 36px;box-shadow:0 8px 32px #062b3f1a,0 0 0 1px #00a6c80f}.auth-logo{background:linear-gradient(135deg, var(--accent), var(--accent-alt));border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:20px;display:flex;box-shadow:0 8px 24px #00a6c84d}.auth-title{color:var(--text-primary);letter-spacing:-.5px;margin:0 0 6px;font-size:26px;font-weight:700}.auth-sub{color:var(--text-secondary);margin:0 0 28px;font-size:14px;line-height:1.5}.form-group{flex-direction:column;gap:10px;display:flex}.form-label{color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase;margin-bottom:-4px;font-size:12px;font-weight:600}.form-input{background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);outline:none;padding:11px 14px;font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00a6c81f}.form-input::placeholder{color:var(--text-muted)}.input-row{gap:8px;display:flex}.btn-random{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap;flex-shrink:0;padding:0 14px;font-family:inherit;font-size:13px;font-weight:500;transition:all .2s}.btn-random:hover{border-color:var(--accent);color:var(--accent)}.btn-primary{background:var(--accent);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;border:none;margin-top:6px;padding:13px;font-family:inherit;font-size:15px;font-weight:700;transition:background .2s,transform .1s,box-shadow .2s}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 4px 16px #00a6c859}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn-ghost{color:var(--text-muted);cursor:pointer;text-align:center;background:0 0;border:none;width:100%;padding:8px;font-family:inherit;font-size:13px;transition:color .2s}.btn-ghost:hover{color:var(--text-secondary)}.preview-wrap{border-radius:var(--radius-md);aspect-ratio:16/9;background:var(--bg-secondary);border:1px solid var(--border);overflow:hidden}.preview-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.no-camera{width:100%;height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}.perm-list{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:6px;padding:10px 14px;display:flex}.perm-row{align-items:center;gap:10px;font-size:13px;display:flex}.perm-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.perm-label{color:var(--text-secondary);flex:1}.perm-status{margin-left:auto;font-size:12px;font-weight:500}.info-chip{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:13px;display:inline-flex}.info-chips{flex-wrap:wrap;gap:8px;display:flex}.warn-msg{color:var(--warning);text-align:center;border-radius:var(--radius-sm);background:#d9770614;border:1px solid #d9770633;padding:8px 12px;font-size:12px}.error-msg{color:var(--danger);border-radius:var(--radius-sm);background:#e53e3e12;border:1px solid #e53e3e33;padding:8px 12px;font-size:12px}.room-page{background:var(--bg-primary);height:100dvh;display:flex;position:relative;overflow:hidden}.room-main{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.top-bar{background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;min-height:52px;padding:0 16px;display:flex}.top-bar-left{flex:1;align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.top-bar-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.room-logo{border-radius:var(--radius-sm);background:#00a6c81a;border:1px solid #00a6c833;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.room-badge{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;align-items:center;gap:5px;min-width:0;padding:4px 10px;font-size:12px;display:flex;overflow:hidden}.room-badge b{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.participant-badge{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap;border-radius:20px;flex-shrink:0;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:600;display:flex}.you-badge{color:var(--accent-hover);white-space:nowrap;text-overflow:ellipsis;background:#00a6c814;border:1px solid #00a6c838;border-radius:20px;align-items:center;gap:6px;max-width:140px;padding:4px 10px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.online-dot{background:var(--success);border-radius:50%;flex-shrink:0;width:7px;height:7px}.video-grid{background:var(--bg-primary);flex:1;gap:6px;min-height:0;padding:6px;display:grid;position:relative;overflow:hidden}.grid-empty{color:var(--text-muted);flex-direction:column;grid-area:1/1/-1/-1;justify-content:center;align-items:center;gap:12px;font-size:14px;display:flex}.grid-empty p{margin:0}.video-tile{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border);min-width:0;min-height:0;transition:box-shadow .2s;position:relative;overflow:hidden}.video-tile:hover{box-shadow:0 4px 20px #062b3f1f}.video-tile video{object-fit:cover;width:100%;height:100%;display:block}.video-tile-gradient{pointer-events:none;background:linear-gradient(#0000,#062b3fb8);height:56px;position:absolute;bottom:0;left:0;right:0}.video-label{color:#fff;text-shadow:0 1px 4px #00000080;align-items:center;gap:5px;font-size:12px;font-weight:600;display:flex;position:absolute;bottom:8px;left:10px}.video-fullscreen-btn{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;cursor:pointer;opacity:0;background:#062b3f73;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;transition:opacity .2s;display:flex;position:absolute;top:8px;right:8px}.video-tile:hover .video-fullscreen-btn{opacity:1}:-webkit-any(.video-tile:fullscreen video,.video-tile:-webkit-full-screen video){object-fit:contain;background:#000}:is(.video-tile:fullscreen video,.video-tile:fullscreen video){object-fit:contain;background:#000}:-webkit-any(.video-tile:fullscreen .video-fullscreen-btn,.video-tile:-webkit-full-screen .video-fullscreen-btn){opacity:1}:is(.video-tile:fullscreen .video-fullscreen-btn,.video-tile:fullscreen .video-fullscreen-btn){opacity:1}.audio-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;justify-content:center;align-items:center;gap:12px;min-width:0;min-height:0;display:flex;container-type:size}.avatar-circle{background:linear-gradient(135deg, var(--accent), var(--accent-alt));width:clamp(64px,12cqmin,100px);height:clamp(64px,12cqmin,100px);color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;font-size:clamp(24px,5cqmin,40px);font-weight:700;display:flex;box-shadow:0 6px 20px #00a6c847}.audio-name{color:var(--text-secondary);text-align:center;padding:0 12px;font-size:clamp(11px,1.5cqmin,14px);font-weight:600}@media (width<=768px){.video-grid{align-content:flex-start;gap:6px;overflow-x:hidden;grid-template-rows:unset!important;grid-template-columns:repeat(2,1fr)!important;overflow-y:auto!important}.video-grid.mobile-scroll{grid-template-columns:repeat(2,calc(50vw - 9px))!important}.video-tile,.audio-tile{aspect-ratio:16/9;min-height:0}.avatar-circle{width:64px;height:64px;font-size:26px}.audio-name{font-size:12px}}@media (width<=480px){.video-grid{grid-template-columns:1fr!important}.video-grid.mobile-scroll{grid-template-columns:calc(100vw - 12px)!important}}.controls-bar{background:var(--bg-card);border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:10px 16px;display:flex}.ctrl-btn{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;letter-spacing:.2px;flex-direction:column;align-items:center;gap:4px;min-width:58px;padding:10px 14px;font-family:inherit;font-size:11px;font-weight:600;line-height:1;transition:all .15s;display:flex}.ctrl-btn:hover{background:var(--border-light);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.ctrl-btn:active{transform:translateY(0)}.ctrl-btn.off{color:var(--danger);background:#e53e3e12;border-color:#e53e3e40}.ctrl-btn.off:hover{background:#e53e3e21}.ctrl-btn.active{color:var(--accent);background:#00a6c81a;border-color:#00a6c84d}.ctrl-btn.danger{background:var(--danger);color:#fff;border-color:#0000}.ctrl-btn.danger:hover{background:#c53030;transform:translateY(-1px)}@media (width<=480px){.ctrl-btn{min-width:50px;padding:9px 10px;font-size:10px}.controls-bar{gap:6px;padding:8px}}.chat-panel{background:var(--bg-card);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:300px;display:flex}.chat-header{border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0;justify-content:space-between;align-items:center;min-height:52px;padding:14px 16px;display:flex}.chat-title{color:var(--text-primary);align-items:center;gap:2px;font-size:14px;font-weight:700;display:flex}.chat-count{background:var(--accent);color:var(--text-primary);border-radius:10px;justify-content:center;align-items:center;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:700;line-height:1.4;display:inline-flex}.chat-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px;line-height:1;transition:color .2s,background .2s;display:none}.chat-close-btn:hover{color:var(--text-primary);background:var(--border-light)}.chat-messages{background:var(--bg-primary);flex-direction:column;flex:1;gap:2px;padding:14px 12px;display:flex;overflow-y:auto}.chat-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:40px 20px;display:flex}.chat-empty span{color:var(--text-muted);font-size:13px}.chat-empty-hint{color:var(--border)!important;font-size:12px!important}.chat-msg{flex-direction:column;max-width:84%;margin-top:8px;display:flex}.chat-msg.grouped{margin-top:2px}.chat-msg.own{align-self:flex-end}.chat-msg.other{align-self:flex-start}.chat-from{color:var(--accent-hover);margin-bottom:3px;padding-left:4px;font-size:11px;font-weight:600}.chat-bubble{word-break:break-word;border-radius:14px;padding:8px 12px;font-size:13px;line-height:1.45}.chat-bubble.own{background:var(--accent);color:var(--text-primary);border-bottom-right-radius:4px}.chat-bubble.other{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-bottom-left-radius:4px}.chat-time{color:var(--text-muted);align-self:flex-start;margin-top:2px;padding-left:4px;font-size:10px}.chat-time.own{align-self:flex-end;padding-left:0;padding-right:4px}.chat-form{border-top:1px solid var(--border);background:var(--bg-card);flex-direction:column;flex-shrink:0;gap:8px;padding:10px;display:flex}.chat-input-row{align-items:center;gap:6px;display:flex}.chat-input{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;flex:1;min-width:0;padding:9px 12px;font-family:inherit;font-size:13px;transition:border-color .2s,box-shadow .2s}.chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #00a6c81a}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{background:var(--accent);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .2s,opacity .2s;display:flex}.chat-send-btn:hover:not(:disabled){background:var(--accent-hover)}.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}.chat-hint{color:var(--text-muted);text-align:right;padding:0 2px;font-size:10px}.chat-toggle-btn{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;padding:6px 10px;font-family:inherit;font-size:12px;font-weight:600;transition:all .2s;display:none}.chat-toggle-btn:hover{border-color:var(--accent);color:var(--accent)}.chat-overlay{z-index:99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#062b3f59;display:none;position:fixed;inset:0}@media (width<=768px){.chat-panel{z-index:100;width:min(320px,92vw);transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #062b3f26}.chat-panel.open{transform:translate(0)}.chat-close-btn,.chat-toggle-btn{display:flex}.chat-overlay.show{display:block}.participant-badge{display:none}}@media (width<=480px){.auth-card{border-radius:var(--radius-lg);padding:24px 18px}.auth-title{font-size:22px}.room-badge,.room-logo{display:none}.you-badge{max-width:110px;padding:3px 8px;font-size:11px}.top-bar{padding:0 10px}}@media (width<=360px){.auth-card{padding:20px 14px}.controls-bar{gap:4px;padding:8px 6px}.ctrl-btn{min-width:44px;padding:8px}}