*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0c0e14;--bg-soft: #12151f;--card: #171b28;--card-2: #1f2434;--line: #2a3044;--text: #eef0f6;--muted: #8b91a7;--accent: #5b7cfa;--accent-2: #7c5bfa;--accent-hover: #7290ff;--danger: #f45062;--green: #34d399;--amber: #f0b429;--radius: 14px;--shadow: 0 12px 40px rgba(0, 0, 0, .45)}html,body,#root{height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1000px 600px at 80% -10%,rgba(91,124,250,.1),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(124,91,250,.08),transparent 60%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;border:none;cursor:pointer;background:none}input,select{font:inherit;color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;width:100%;transition:border-color .15s}input:focus,select:focus{border-color:var(--accent)}select{cursor:pointer}.home{min-height:100dvh;display:grid;place-items:center;padding:24px}.home-card{width:100%;max-width:420px;background:linear-gradient(180deg,#ffffff08,#fff0),var(--card);border:1px solid var(--line);border-radius:20px;padding:36px 30px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}.logo{display:flex;align-items:center;justify-content:center;gap:12px}.logo-mark{font-size:2rem}.logo h1{font-size:2.1rem;letter-spacing:-.02em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--muted);text-align:center;font-size:.95rem;line-height:1.5}.field{display:flex;flex-direction:column;gap:6px}.field span{font-size:.8rem;color:var(--muted);padding-left:2px}.mic-unlock{background:var(--card-2);border:1px dashed var(--line);border-radius:10px;padding:12px;color:var(--muted);text-align:left}.mic-unlock:hover{color:var(--text);border-color:var(--accent)}.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:12px;padding:14px;font-weight:600;font-size:1.02rem;color:#fff;transition:filter .15s,transform .05s}.btn-primary:hover{filter:brightness(1.12)}.btn-primary:active{transform:scale(.99)}.btn-secondary{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:12px 20px;white-space:nowrap}.btn-secondary:hover{border-color:var(--accent)}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.join-row{display:flex;gap:8px}.hint{color:var(--muted);font-size:.85rem;text-align:center}.hint b{color:var(--text)}.room{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:16px 16px calc(120px + env(safe-area-inset-bottom))}.room-top{width:100%;max-width:1400px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 16px}.room-title{display:flex;align-items:center;gap:10px;color:var(--muted)}.room-title b{color:var(--text)}.room-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px #34d399b3}.btn-copy{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:.9rem}.btn-copy:hover{border-color:var(--accent)}.btn-copy svg{width:15px;height:15px}.stage{width:100%;max-width:1400px;flex:1;display:flex;flex-direction:column;align-items:center;gap:16px}.grid{width:100%;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:center}.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:148px;padding:14px 10px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .12s,box-shadow .12s}.tile.speaking{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 22px #34d39940}.avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}.tile.video{width:auto;max-width:94vw;padding:0;background:none;border:none}.tile.video video{display:block;height:min(38vh,430px);width:auto;max-width:min(92vw,820px);object-fit:cover;border-radius:var(--radius);background:#000;cursor:pointer;border:2px solid transparent;transition:border-color .12s,box-shadow .12s}.room[data-videos="1"] .tile.video video{height:min(calc(100dvh - 360px),760px);max-width:94vw}.tile.screen video{object-fit:contain;max-width:min(96vw,1280px);background:#06070b}.tile.screen.pinned video,.stage-pinned .tile.screen video{max-width:96vw}.screen-badge{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--accent);padding:2px 6px;border-radius:6px}.tile.video.speaking{border:none;box-shadow:none}.tile.video.speaking video{border-color:var(--green);box-shadow:0 0 22px #34d3994d}.name-chip{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);max-width:100%}.name-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile.me .name-chip .nm{color:var(--text);font-weight:600}.tile.video .name-chip{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:#0a0c129e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:5px 10px;border-radius:9px}.tile.video .name-chip .nm{color:#fff}.state-chip{position:absolute;top:8px;left:50%;transform:translate(-50%);font-size:.72rem;color:var(--muted);background:#0a0c12b3;padding:3px 10px;border-radius:8px;white-space:nowrap;z-index:2}.state-chip.bad{color:var(--danger)}.vol{position:absolute;left:10px;right:10px;bottom:44px;display:flex;align-items:center;gap:7px;background:#0a0c12c7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:8px 11px;z-index:3}.tile:not(.video) .vol{bottom:40px}@media (hover: hover){.vol{opacity:0;pointer-events:none;transition:opacity .15s}.tile:hover .vol,.vol:focus-within{opacity:1;pointer-events:auto}}@media (hover: none){.vol{opacity:0;pointer-events:none;transition:opacity .15s}.tile.show-vol .vol{opacity:1;pointer-events:auto}}.vol input{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;height:4px;border:none;background:var(--line);border-radius:2px;flex:1}.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent)}.vol input::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--accent)}.vol span{font-size:.72rem;color:var(--muted);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}.vol span.boost{color:var(--green);font-weight:600}.signal{display:flex;align-items:flex-end;gap:2px;height:12px}.signal i{width:3px;border-radius:1px;background:var(--line)}.signal i:nth-child(1){height:4px}.signal i:nth-child(2){height:8px}.signal i:nth-child(3){height:12px}.signal.q3 i{background:var(--green)}.signal.q2 i:nth-child(-n+2){background:var(--amber)}.signal.q1 i:nth-child(1){background:var(--danger)}.stage-pinned{width:100%;display:flex;justify-content:center}.stage-pinned .tile.pinned{width:auto;max-width:100%}.stage-pinned .tile.pinned video{height:min(calc(100dvh - 350px),900px);width:auto;max-width:92vw}.strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.strip .tile{width:116px;padding:10px 8px 8px}.strip .tile .avatar{width:52px;height:52px;font-size:1.1rem}.strip .tile.video{width:auto}.strip .tile.video video{height:96px;max-width:200px}.strip .name-chip{font-size:.68rem}.strip .tile.video .name-chip{padding:3px 7px;bottom:6px;left:6px}.strip .vol,.strip .state-chip{display:none}.dock{position:fixed;bottom:calc(46px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;gap:12px;padding:10px 14px;background:#171b28d9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);z-index:20}.ctl{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--card-2);transition:background .15s,transform .05s}.ctl:hover{background:#2a3044}.ctl:active{transform:scale(.95)}.ctl svg{width:23px;height:23px}.ctl.active{background:var(--accent);color:#fff}.ctl.danger,.ctl.leave{background:var(--danger);color:#fff}.ctl.leave:hover{background:#ff6a7a}.ctl.leave svg{transform:rotate(135deg)}.ctl.rec-pulse{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #f4506280}50%{box-shadow:0 0 0 10px #f4506200}}.phone-only{display:none}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:24}.dev-menu{position:fixed;bottom:calc(120px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(92vw,380px);max-height:55vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);z-index:25;animation:toast-in .15s ease-out}.dev-section{display:flex;flex-direction:column;gap:3px}.dev-title{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:4px 10px}.dev-item{text-align:left;padding:10px 12px;border-radius:9px;font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-item:hover{background:var(--card-2)}.dev-item.active{background:#5b7cfa26;color:var(--accent-hover)}.dev-item.active:before{content:"✓ "}.status{color:var(--muted);font-size:.9rem;text-align:center;padding:8px 16px}.rec-badge{position:fixed;top:14px;left:50%;transform:translate(-50%);background:#f4506226;border:1px solid rgba(244,80,98,.5);color:var(--danger);padding:5px 13px;border-radius:20px;font-size:.85rem;font-variant-numeric:tabular-nums;z-index:30}.toast{position:fixed;bottom:calc(130px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);background:var(--card-2);border:1px solid var(--line);padding:10px 20px;border-radius:12px;font-size:.9rem;box-shadow:var(--shadow);z-index:40;max-width:90vw;text-align:center;animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.rec-panel{position:fixed;bottom:calc(130px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(92vw,400px);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);z-index:35;animation:toast-in .2s ease-out}.rec-panel-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:.95rem}.rec-close{color:var(--muted);padding:2px 6px;border-radius:6px}.rec-close:hover{color:var(--text);background:var(--card-2)}.rec-panel audio{width:100%;height:40px}.rec-actions{display:flex;gap:8px}.rec-actions button{flex:1;padding:11px}.audio-unlock{position:fixed;top:16px;left:50%;transform:translate(-50%);background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:12px 22px;border-radius:12px;font-size:.92rem;font-weight:600;box-shadow:var(--shadow);cursor:pointer;z-index:50}@media (max-width: 640px){.phone-only{display:grid}.desktop-only{display:none}.room{padding:12px 12px calc(140px + env(safe-area-inset-bottom))}.room-top{padding-bottom:10px}.btn-copy span{display:none}.btn-copy{padding:9px 11px}.tile.video video{height:min(32vh,340px);max-width:92vw}.room[data-videos="1"] .tile.video video{height:min(calc(100dvh - 340px),62vh)}.dock{gap:8px;padding:8px 10px}.ctl{width:52px;height:52px}.room.pinned-mode{padding:0}.room.pinned-mode .stage{display:contents}.room.pinned-mode .stage-pinned{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.room.pinned-mode .stage-pinned .tile.pinned{position:absolute;top:0;right:0;bottom:0;left:0}.room.pinned-mode .stage-pinned .tile.pinned video{width:100vw;height:100vh;height:100dvh;aspect-ratio:auto!important;object-fit:cover;border-radius:0;outline:none}.room.pinned-mode .stage-pinned .name-chip{left:14px;bottom:calc(150px + env(safe-area-inset-bottom))}.room.pinned-mode .stage-pinned .vol{opacity:1;pointer-events:auto;left:14px;right:auto;width:54vw;bottom:calc(108px + env(safe-area-inset-bottom))}.room.pinned-mode .strip{position:fixed;top:calc(56px + env(safe-area-inset-top));right:10px;z-index:5;flex-direction:column;align-items:flex-end}.room.pinned-mode .strip .tile{width:96px;padding:7px 6px 6px;background:#171b28cc}.room.pinned-mode .strip .tile .avatar{width:44px;height:44px;font-size:1rem}.room.pinned-mode .strip .tile video{border-radius:7px}.room.pinned-mode .strip .signal{display:none}.room.pinned-mode .room-top{position:fixed;top:0;left:0;right:0;z-index:5;padding:calc(10px + env(safe-area-inset-top)) 12px 8px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}.room.pinned-mode .status{display:none}}