:root{--bg: #14171c;--panel: #1b1f24;--panel-2: #2b2f36;--tile: #2c3e50;--text: #e8eef4;--muted: #7a8794;--accent: #2980b9;--danger: #c0392b}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}.lobby{height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.lobby-card{width:100%;max-width:420px;background:var(--panel);border:1px solid #2a2f36;border-radius:16px;padding:32px;text-align:center}.lobby-card h1{margin:0 0 8px;font-size:24px}.subtitle{color:var(--muted);margin:0 0 24px;font-size:14px}.btn{width:100%;padding:12px 16px;border-radius:10px;border:1px solid #3a3f47;background:var(--panel-2);color:var(--text);font-size:15px;cursor:pointer;transition:background .15s}.btn:hover{background:#343a42}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:#2471a3}.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#2a2f36}.join-row{display:flex;gap:8px}.text-input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid #3a3f47;background:#12151a;color:var(--text);font-size:15px}.join-row .btn{width:auto;padding:12px 20px}.call-room{position:relative;height:100%;background:#000;overflow:hidden}.remote,.local-pip{position:absolute}.remote{top:0;right:0;bottom:0;left:0;background:var(--tile);display:flex;align-items:center;justify-content:center}.remote video{width:100%;height:100%;object-fit:contain;background:var(--tile)}.local-pip{right:16px;bottom:96px;width:220px;height:124px;border:2px solid #fff;border-radius:8px;overflow:hidden;background:#34495e;z-index:5}.local-pip video{width:100%;height:100%;object-fit:cover}.tile-label{position:absolute;left:8px;bottom:6px;font-size:12px;color:var(--text);background:#00000073;padding:2px 8px;border-radius:6px}.remote .tile-label{position:static;background:transparent;color:var(--muted);font-size:16px}.top-bar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;z-index:6}.indicator{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:500;padding:7px 12px;border-radius:16px}.indicator .dot{width:9px;height:9px;border-radius:50%;background:#fff}.copy-link{border:none;background:#00000080;color:var(--text);padding:7px 12px;border-radius:8px;font-size:13px;cursor:pointer}.metrics-overlay{position:absolute;top:56px;right:16px;background:#00000080;border-radius:8px;padding:8px 12px;font-size:12px;color:var(--text);z-index:6;line-height:1.5}.control-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:10px;background:#2b2f36eb;padding:10px 14px;border-radius:28px;z-index:7}.ctrl{border:1px solid #555;background:#3a3f47;color:var(--text);padding:10px 16px;border-radius:20px;font-size:14px;cursor:pointer}.ctrl:hover{background:#454b54}.ctrl.off{background:#5a3030;border-color:#7a4040}.ctrl.hangup{background:var(--danger);border-color:var(--danger)}.ctrl.hangup:hover{background:#a93226}.error-screen{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--muted)}