:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--page: #f0f7ff;--page-surface: #ffffff;--card-bg: #ffffff;--card-subtle: #f8fbff;--ink: #0c203b;--ink-secondary: #3b526d;--muted: #647f9d;--border: #c8e3f9;--border-subtle: #e1effc;--sky-primary: #0284c7;--sky-hover: #0369a1;--sky-active: #075985;--sky-light: #e0f2fe;--sky-tint: #f0f9ff;--sky-glow: rgba(2, 132, 199, .2);--online: #10b981;--online-bg: #d1fae5;--danger: #ef4444;--danger-hover: #dc2626;--danger-bg: #fee2e2;--danger-ink: #b91c1c;--stage-bg: #070d18;--video-bg: #040810;--glass-bg: rgba(12, 32, 59, .75);--glass-border: rgba(255, 255, 255, .18);--dock-bg: rgba(15, 23, 42, .85);--dock-border: rgba(255, 255, 255, .15);--shadow-sm: 0 2px 8px rgba(2, 132, 199, .08);--shadow-md: 0 8px 24px rgba(2, 132, 199, .12);--shadow-lg: 0 16px 40px rgba(2, 132, 199, .16)}:root[data-theme=dark]{--page: #0a1324;--page-surface: #0f1c34;--card-bg: #11223e;--card-subtle: #0d1a30;--ink: #f0f6fc;--ink-secondary: #c0d3ea;--muted: #829cb8;--border: #1d3557;--border-subtle: #162a45;--sky-primary: #38bdf8;--sky-hover: #0ea5e9;--sky-active: #0284c7;--sky-light: rgba(56, 189, 248, .15);--sky-tint: rgba(56, 189, 248, .08);--sky-glow: rgba(56, 189, 248, .3);--online: #34d399;--online-bg: rgba(52, 211, 153, .2);--danger: #f87171;--danger-hover: #ef4444;--danger-bg: rgba(239, 68, 68, .22);--danger-ink: #fca5a5;--stage-bg: #03060c;--video-bg: #020408;--glass-bg: rgba(8, 15, 30, .85);--glass-border: rgba(56, 189, 248, .2);--dock-bg: rgba(10, 19, 36, .9);--dock-border: rgba(56, 189, 248, .25);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .6)}*{box-sizing:border-box}body{margin:0;background-color:var(--page);color:var(--ink);min-height:100vh;overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sky-primary);outline-offset:2px}svg{flex-shrink:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:600;min-height:42px;transition:all .18s ease}.button:active:not(:disabled){transform:scale(.98)}.button-primary{background:var(--sky-primary);color:#fff;box-shadow:0 4px 14px var(--sky-glow)}:root[data-theme=dark] .button-primary{color:#071526}.button-primary:hover:not(:disabled){background:var(--sky-hover)}.button-secondary{background:var(--card-bg);border:1px solid var(--border);color:var(--ink)}.button-secondary:hover:not(:disabled){background:var(--sky-tint);border-color:var(--sky-primary)}.button-ghost{background:transparent;color:var(--muted)}.button-ghost:hover:not(:disabled){background:var(--sky-tint);color:var(--ink)}.button-danger{background:var(--danger);color:#fff}.button-danger:hover:not(:disabled){background:var(--danger-hover)}.button-icon{padding:0;width:42px;height:42px;border-radius:12px}.button-small{padding:6px 14px;font-size:13px;min-height:34px;border-radius:10px}.app-shell{max-width:1200px;margin:0 auto;padding:0 24px 40px;display:flex;flex-direction:column;min-height:100vh}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);margin-bottom:24px}.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:750;letter-spacing:-.5px;color:var(--ink)}.brand-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--sky-primary),#38bdf8);color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px var(--sky-glow)}.brand-accent{color:var(--sky-primary)}.header-right{display:flex;align-items:center;gap:12px}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:var(--card-bg);border:1px solid var(--border);font-size:13px;font-weight:500;color:var(--ink-secondary)}.dot{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2px var(--online-bg)}.dot.offline{background:var(--danger);box-shadow:0 0 0 2px var(--danger-bg)}.notice{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:var(--sky-light);border:1px solid var(--border);color:var(--ink);font-size:13px;font-weight:500;margin-bottom:20px}.notice.error{background:var(--danger-bg);border-color:#fca5a5;color:var(--danger-ink)}.join-container{display:flex;align-items:center;justify-content:center;padding:40px 0}.join-card{width:100%;max-width:460px;background:var(--card-bg);border:1px solid var(--border);border-radius:24px;padding:36px 32px;box-shadow:var(--shadow-lg);text-align:center}.join-icon-wrap{width:64px;height:64px;border-radius:20px;background:var(--sky-light);color:var(--sky-primary);display:grid;place-items:center;margin:0 auto 20px}.join-card h1{font-size:26px;font-weight:700;letter-spacing:-.6px;margin:0 0 8px;color:var(--ink)}.join-card p{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 28px}.join-form{text-align:left}.join-form label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--ink)}.join-form input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card-subtle);color:var(--ink);font-size:15px;transition:border-color .15s ease}.join-form input:focus{border-color:var(--sky-primary);background:var(--card-bg)}.join-submit-btn{width:100%;margin-top:16px;padding:13px 20px;font-size:15px;border-radius:12px}.join-footer-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted)}.workspace-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}.lounge-main{display:flex;flex-direction:column;gap:20px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm)}.invite-banner{background:linear-gradient(135deg,var(--card-bg),var(--sky-tint));border:1px solid var(--border)}.invite-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.invite-header h3{margin:0;font-size:17px;font-weight:650;color:var(--ink)}.invite-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--sky-light);color:var(--sky-primary)}.invite-banner p{margin:0 0 16px;font-size:13px;color:var(--muted)}.invite-actions{display:flex;gap:10px}.invite-input{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card-subtle);color:var(--muted);font-size:13px;-webkit-user-select:all;user-select:all}.calling-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;min-height:380px;border:1px solid var(--border)}.calling-ring{position:relative;width:120px;height:120px;display:grid;place-items:center;margin-bottom:24px}.calling-ripple{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;border-radius:50%;border:2px solid var(--sky-primary);opacity:.7;animation:ripple 2s cubic-bezier(0,.2,.8,1) infinite}.calling-ripple.two{animation-delay:.6s}.calling-avatar{width:80px;height:80px;border-radius:28px;background:linear-gradient(135deg,var(--sky-primary),#38bdf8);color:#fff;font-size:32px;font-weight:700;display:grid;place-items:center;box-shadow:0 8px 24px var(--sky-glow);z-index:2}.calling-card h2{font-size:24px;font-weight:700;margin:0 0 8px;color:var(--ink)}.calling-card p{font-size:14px;color:var(--muted);margin:0 0 28px}.lounge-hero{padding:36px 30px;background:linear-gradient(180deg,var(--card-bg) 0%,var(--card-subtle) 100%)}.hero-content{display:flex;align-items:center;gap:20px}.hero-icon-box{width:56px;height:56px;border-radius:16px;background:var(--sky-light);color:var(--sky-primary);display:grid;place-items:center;flex-shrink:0}.hero-content h2{font-size:18px;font-weight:650;margin:0 0 6px;color:var(--ink)}.hero-content p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}.people-panel{display:flex;flex-direction:column;gap:16px}.self-row{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}.avatar{width:44px;height:44px;border-radius:14px;background:var(--sky-light);color:var(--sky-primary);font-size:18px;font-weight:700;display:grid;place-items:center;flex-shrink:0}.self-avatar{background:linear-gradient(135deg,var(--sky-primary),#38bdf8);color:#fff}.self-info{flex:1;min-width:0}.self-info strong,.person-info strong{display:block;font-size:14px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.you-tag{font-size:11px;font-weight:500;color:var(--sky-primary);background:var(--sky-light);padding:1px 6px;border-radius:4px;margin-left:4px}.person-status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:3px}.person-status.busy .dot{background:var(--muted);box-shadow:none}.self-badge{color:var(--online)}.people-list-card{padding:20px}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--ink)}.count-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--sky-light);color:var(--sky-primary)}.people-list{display:flex;flex-direction:column;gap:10px;max-height:440px;overflow-y:auto}.person-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card-subtle);border:1px solid var(--border-subtle);border-radius:14px;transition:all .15s ease}.person-row:hover{background:var(--sky-tint);border-color:var(--border)}.person-info{flex:1;min-width:0}.empty-people-box{padding:32px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;color:var(--muted)}.empty-icon-wrap{width:48px;height:48px;border-radius:14px;background:var(--sky-light);color:var(--sky-primary);display:grid;place-items:center;margin-bottom:12px}.empty-people-box strong{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px}.empty-people-box p{font-size:12px;line-height:1.5;margin:0 0 16px}.call-fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:var(--video-bg);display:flex;flex-direction:column;width:100vw;height:100vh;overflow:hidden}.call-top-bar{position:absolute;top:20px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:20;pointer-events:none}.call-top-pill{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:8px 18px;border-radius:30px;background:#0c1628bf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.15);color:#fff;box-shadow:0 8px 24px #0006}.call-peer-name{font-size:14px;font-weight:650;letter-spacing:-.2px}.call-divider{width:1px;height:14px;background:#fff3}.call-timer-badge{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:550;color:#e2e8f0}.call-timer-badge .dot{background:#10b981;box-shadow:0 0 8px #10b981}.call-top-right{pointer-events:auto;display:flex;align-items:center;gap:10px}.top-action-btn{background:#0c1628bf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.15);color:#fff}.top-action-btn:hover{background:#ffffff26}.remote-video-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:var(--video-bg);display:flex;align-items:center;justify-content:center}.remote-video-container video{width:100%;height:100%;object-fit:contain}.pip-video-container{position:absolute;top:80px;right:24px;width:180px;height:135px;border-radius:16px;overflow:hidden;background:#0f172a;border:2px solid rgba(255,255,255,.2);box-shadow:0 12px 36px #0009;z-index:25;transition:all .2s ease}.pip-video-container:hover{border-color:var(--sky-primary);transform:scale(1.02)}.pip-video-container video{width:100%;height:100%;object-fit:cover}.mirror{transform:scaleX(-1)}.camera-off-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f1c34;color:#94a3b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11px}.pip-label{position:absolute;bottom:8px;left:8px;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:500;padding:3px 8px;border-radius:6px}.call-dock-container{position:absolute;bottom:28px;left:0;right:0;display:flex;justify-content:center;z-index:30;pointer-events:none}.call-dock{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:40px;background:var(--dock-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--dock-border);box-shadow:0 16px 40px #00000080}.ctrl-btn{width:48px;height:48px;border-radius:50%;background:#ffffff1a;color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);transition:all .15s ease}.ctrl-btn:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.ctrl-btn.active-muted,.ctrl-btn.active-cam-off{background:#ef444440;border-color:#ef444480;color:#fca5a5}.ctrl-btn.active-muted:hover,.ctrl-btn.active-cam-off:hover{background:#ef444466}.end-call-btn{background:#ef4444!important;color:#fff!important;border-radius:30px!important;padding:0 20px!important;height:48px!important;font-size:14px!important;font-weight:650!important;box-shadow:0 6px 20px #ef444466;gap:8px}.end-call-btn:hover{background:#dc2626!important;transform:scale(1.03)}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;background:var(--sky-primary);color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 8px 24px #00000080}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040c1ab3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;animation:fadeIn .2s ease}.dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card-bg);color:var(--ink);width:min(420px,calc(100vw - 32px));border:1px solid var(--border);border-radius:24px;padding:32px 28px;z-index:10001;text-align:center;box-shadow:var(--shadow-lg);animation:modalPop .22s cubic-bezier(.16,1,.3,1)}.incoming-icon{width:76px;height:76px;border-radius:24px;background:var(--sky-light);color:var(--sky-primary);display:grid;place-items:center;margin:0 auto 20px;animation:breathe 1.8s infinite}.incoming-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--sky-primary);margin-bottom:6px}.dialog-content h2{font-size:22px;font-weight:700;letter-spacing:-.4px;margin:0 0 8px;color:var(--ink)}.dialog-content p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 24px}.incoming-actions{display:flex;gap:12px}.incoming-actions>*{flex:1}@keyframes ripple{0%{transform:scale(.9);opacity:.8}to{transform:scale(1.6);opacity:0}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalPop{0%{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(max-width:900px){.workspace-grid{grid-template-columns:1fr}.people-panel{order:2}.lounge-main{order:1}.pip-video-container{width:140px;height:105px;top:70px;right:16px}}@media(max-width:600px){.app-shell{padding:0 16px 30px}.topbar{height:64px;margin-bottom:16px}.brand{font-size:19px}.status-pill{padding:4px 10px;font-size:12px}.join-card{padding:24px 20px}.pip-video-container{width:110px;height:85px;top:65px;right:12px}.call-top-bar{top:12px;left:12px;right:12px}.call-dock{gap:8px;padding:8px 12px}.ctrl-btn{width:42px;height:42px}.end-call-btn{height:42px!important;padding:0 14px!important;font-size:13px!important}}
