*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#eaeaea}.app-container{height:100%;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}h1{font-size:2.4rem;margin-bottom:1.5rem;color:#fff}.device-code-card{background:#16213e;border-radius:12px;padding:2rem;margin:1rem 0;max-width:400px;width:100%}.user-code{font-size:3rem;font-weight:700;letter-spacing:.3rem;color:#00d2ff;margin:1rem 0}.hint{font-size:.9rem;color:#888;margin-top:1rem}button{font-size:1.4rem;padding:.8rem 2rem;border:none;border-radius:8px;background:#0f3460;color:#fff;cursor:pointer;min-width:200px;margin:.5rem 0}button:disabled{opacity:.5;cursor:not-allowed}button:active{transform:scale(.97)}input[type=text]{font-size:1.2rem;padding:.8rem 1rem;border-radius:8px;border:2px solid #0f3460;background:#16213e;color:#fff;width:100%;max-width:500px;margin-bottom:1rem}input[type=text]:focus{outline:none;border-color:#00d2ff}.error{color:#ff6b6b;margin-top:1rem;font-size:1rem}.error-banner{background:#ff4757;color:#fff;padding:.8rem 1.5rem;font-size:1rem;text-align:center}.btn-signout{background:transparent;border:none;color:#666;font-size:.85rem;min-width:unset;padding:.4rem .8rem;margin-top:2rem;text-decoration:underline;cursor:pointer}.btn-signout:hover{color:#aaa}.call-container{position:relative;width:100%;height:100%;background:#1c1c1e;display:flex;flex-direction:column;overflow:hidden}.call-status-bar{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;background:#0000008c;backdrop-filter:blur(6px);border-radius:20px;padding:4px 14px;font-size:.85rem;color:#ccc;z-index:20;white-space:nowrap}.call-status-dot{width:8px;height:8px;border-radius:50%;background:#34c759;flex-shrink:0}.video-grid{flex:1;display:grid;gap:4px;padding:4px;overflow:hidden;min-height:0}.video-grid.participants-1{grid-template-columns:1fr}.video-grid.participants-2{grid-template-columns:1fr 1fr}.video-grid.participants-3,.video-grid.participants-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.video-tile{position:relative;background:#2d2d30;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0}.video-stream-container{position:absolute;inset:0;overflow:hidden}.video-stream-container>*{width:100%!important;height:100%!important;display:block}.video-stream-container video{width:100%!important;height:100%!important;object-fit:cover;display:block}.video-placeholder{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.75rem}.participant-avatar{width:72px;height:72px;border-radius:50%;background:#46464a;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:600;color:#fff}.participant-name-badge{font-size:.9rem;color:#aaa}.waiting-tile .waiting-icon{display:flex}.waiting-tile .waiting-text{font-size:1rem;color:#888}.participant-label-overlay{position:absolute;bottom:10px;left:10px;z-index:2;background:#0009;color:#fff;padding:3px 10px;border-radius:6px;font-size:.82rem;pointer-events:none}.local-stream-area{flex:1;position:relative;overflow:hidden;min-height:0;background:#111}.local-video-fill{position:absolute;inset:0}.local-video-fill>*{width:100%!important;height:100%!important;display:block}.local-video-fill video{width:100%!important;height:100%!important;object-fit:cover;display:block}.camera-off-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:#888}.camera-off-placeholder p{font-size:1rem;color:#666}.camera-off-placeholder .hint{font-size:.85rem;color:#444}.annotation-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;transform:scaleX(-1);transform-origin:center}.frozen-frame{position:absolute;inset:0;z-index:10;background:#000}.frozen-frame-img{width:100%;height:100%;object-fit:contain;display:block}.frozen-frame-close{position:absolute;top:.75rem;right:.75rem;width:64px;height:64px;min-width:0;padding:0;margin:0;border:none;border-radius:50%;background:#d93025eb;color:#fff;line-height:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px #0000008c}.frozen-frame-close:hover{background:#d93025}.frozen-frame-badge{position:absolute;bottom:.75rem;left:.75rem;padding:.35rem .7rem;border-radius:4px;background:#000000a6;color:#ffd166;font-size:.8rem;letter-spacing:.02em}.net-indicator{position:absolute;top:12px;left:12px;z-index:20;background:#0000008c;backdrop-filter:blur(6px);border-radius:14px;padding:5px 8px;cursor:pointer;user-select:none;border:1px solid rgba(255,255,255,.08);max-width:220px}.net-badge{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;line-height:1}.net-label{white-space:nowrap}.net-good{color:#34c759}.net-poor{color:#ffd166}.net-bad{color:#ff453a}.net-unknown{color:#9aa0a6}.net-details{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:1fr auto;gap:3px 12px;font-size:.78rem;color:#ddd}.net-details>div{display:contents}.net-details span{color:#999}.net-details b{color:#fff;font-weight:600;text-align:right}.call-controls{display:flex;align-items:center;justify-content:center;gap:1.25rem;padding:0 1.5rem;height:88px;flex-shrink:0;background:#1c1c1ef2;backdrop-filter:blur(8px);border-top:1px solid #2a2a2a}.control-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:72px;height:62px;border-radius:14px;background:#3a3a3c;border:none;color:#fff;cursor:pointer;min-width:unset;margin:0;padding:0;transition:background .15s,transform .1s}.control-btn:hover{background:#4a4a4e}.control-btn:active{transform:scale(.93)}@keyframes mic-pulse{0%{box-shadow:0 0 #34c75973}70%{box-shadow:0 0 0 8px #34c75900}to{box-shadow:0 0 #34c75900}}.control-btn--mic-on{background:#1c4a2a;color:#34c759;animation:mic-pulse 2s ease-out infinite}.control-btn--mic-on:hover{background:#235930}.control-btn--muted{background:#3a3a3c;color:#ff453a}.control-btn--muted:hover{background:#4a3030}.control-btn--cam-on{background:#1a3550;color:#0a84ff}.control-btn--cam-on:hover{background:#1e3f60}.control-btn--leave{background:#c0392b;color:#fff;width:84px}.control-btn--leave:hover{background:#e74c3c}.control-label{font-size:.68rem;color:#999;line-height:1}.control-btn--mic-on .control-label{color:#34c759}.control-btn--muted .control-label{color:#ff453a}.control-btn--cam-on .control-label{color:#0a84ff}.control-btn--leave .control-label{color:#fff}