.video-player[data-v-6b85bf4a]{position:relative;background:#111;border-radius:12px;overflow:hidden;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}video[data-v-6b85bf4a]{width:100%;height:100%;object-fit:cover}.label[data-v-6b85bf4a]{position:absolute;bottom:8px;left:12px;color:#fff;font-size:13px;background:#00000080;padding:2px 8px;border-radius:6px;pointer-events:none}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#0f1117;color:#e8e8e8;min-height:100vh}.app{display:flex;flex-direction:column;height:100vh}header{display:flex;align-items:center;gap:12px;padding:16px 24px;background:#1a1d27;border-bottom:1px solid #2a2d3a}header h1{font-size:20px;font-weight:600}.badge{font-size:12px;padding:2px 10px;border-radius:99px;font-weight:500}.badge.connected{background:#1a3a2a;color:#4ade80}.badge.joining{background:#2a2a1a;color:#facc15}.lobby{flex:1;display:flex;align-items:center;justify-content:center}.card{background:#1a1d27;border:1px solid #2a2d3a;border-radius:16px;padding:40px;display:flex;flex-direction:column;gap:16px;min-width:320px;align-items:center;text-align:center}.card h2{font-size:22px;font-weight:600}input[type=text]{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #2a2d3a;background:#0f1117;color:#e8e8e8;font-size:15px;outline:none;transition:border-color .2s}input[type=text]:focus{border-color:#6366f1}.btn{padding:10px 24px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .15s,transform .1s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:active:not(:disabled){transform:scale(.97)}.btn.primary{background:#6366f1;color:#fff;width:100%}.btn.primary:hover:not(:disabled){background:#5254cc}.btn.danger{background:#ef4444;color:#fff;padding:10px 28px}.btn.danger:hover{background:#dc2626}.btn.icon{background:#2a2d3a;color:#e8e8e8;font-size:20px;padding:10px 16px}.btn.icon.off{background:#3a1a1a}.call{flex:1;display:flex;flex-direction:column;gap:16px;padding:20px;overflow:hidden}.videos{position:relative;flex:1;display:grid;grid-template-columns:1fr;gap:12px;overflow:hidden}.remote-video{width:100%;height:100%}.local-video{position:absolute;bottom:16px;right:16px;width:200px;border:2px solid #6366f1;border-radius:10px;z-index:10;box-shadow:0 4px 20px #00000080}.waiting{display:flex;align-items:center;justify-content:center;flex:1;color:#6b7280;font-size:16px;background:#1a1d27;border-radius:12px;height:100%}.controls{display:flex;gap:12px;justify-content:center;align-items:center;padding:4px 0 8px}.error-msg{color:#f87171;font-size:13px;text-align:center}.spinner{width:36px;height:36px;border:3px solid #2a2d3a;border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}