*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--surface: #1a1a1a;--surface2: #242424;--border: #2e2e2e;--text: #f0f0f0;--text-dim: #888;--red: #e53935;--red-dk: #b71c1c;--font: "Inter", system-ui, sans-serif;--radius: 10px}html,body,#root{height:100%;width:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}.join-screen{display:flex;align-items:center;justify-content:center;height:100%;background:radial-gradient(ellipse at 50% 40%,#1a0000 0%,var(--bg) 70%)}.join-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px 44px;width:360px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 64px #0009}.join-logo{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:600}.join-form{display:flex;flex-direction:column;gap:10px}.join-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}.join-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;font-size:15px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .15s}.join-input:focus{border-color:var(--red)}.join-btn{margin-top:4px;background:var(--red);color:#fff;border:none;border-radius:var(--radius);padding:13px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s}.join-btn:hover:not(:disabled){background:#ef5350}.join-btn:disabled{opacity:.4;cursor:not-allowed}.join-error{font-size:13px;color:#ef9a9a;background:rgba(180,0,0,.2);border:1px solid rgba(229,57,53,.3);border-radius:8px;padding:10px 12px}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--text-dim);font-size:14px}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.room-page{display:grid;grid-template-rows:52px 1fr 72px;height:100%;overflow:hidden}.room-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border)}.room-logo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}.room-count{font-size:13px;color:var(--text-dim)}.header-right{display:flex;align-items:center;gap:16px}.layout-switcher{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:3px}.layout-btn{display:flex;align-items:center;justify-content:center;width:30px;height:26px;border:none;border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;transition:background .15s,color .15s}.layout-btn:hover{color:var(--text)}.layout-btn--active{background:var(--border);color:var(--text)}.pip-container{position:relative;overflow:hidden;height:100%}.pip-container .tile-grid{height:100%;padding:6px}.pip-waiting{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-dim);font-size:14px}.pip-float{position:absolute;z-index:20;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 24px #000c;-webkit-user-select:none;user-select:none}.pip-drag-handle{position:absolute;top:0;right:0;left:0;bottom:28px;cursor:grab;z-index:2}.pip-drag-handle:active{cursor:grabbing}.pip-resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:nwse-resize;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;padding:3px;color:#ffffff80}.pip-resize-handle:hover{color:#fff}.pip-float .participant-card{width:100%;height:100%;border-radius:0}.pip-float .card-video-wrap{overflow:hidden}.video-info-overlay{position:absolute;bottom:36px;left:0;right:0;display:flex;flex-direction:column;gap:2px;padding:6px 10px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;z-index:5;font-size:11px;font-family:var(--font);line-height:1.5}.vio-row{display:flex;justify-content:space-between;gap:12px}.vio-key{color:#ffffff80;white-space:nowrap}.vio-val{color:#fff;font-weight:500;text-align:right}.vio-val--label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.info-toggle-btn--active{color:var(--text);border-color:var(--red);background:rgba(229,57,53,.15)}.tile-aspect-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;gap:2px;background:rgba(0,0,0,.55);border-radius:6px;padding:3px;z-index:6;opacity:1;pointer-events:auto}.tile-aspect-btn{background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#ffffffb3;font-size:11px;font-family:var(--font);font-weight:500;padding:2px 7px;cursor:pointer;line-height:1.6;transition:background .1s,color .1s,border-color .1s;white-space:nowrap}.tile-aspect-btn:hover{background:rgba(255,255,255,.15);color:#fff}.tile-aspect-btn--active{background:var(--red);border-color:var(--red);color:#fff}.fit-btn{display:flex;align-items:center;gap:5px;padding:0 10px;width:auto;min-width:unset;border:1px solid var(--border);border-radius:8px;background:var(--surface2)}.fit-label{font-size:11px;white-space:nowrap}.reset-btn{display:flex;align-items:center;gap:5px;padding:0 10px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text-dim);font-size:11px;font-family:var(--font);cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}.reset-btn:hover{color:var(--text);border-color:#555}.tile-grid{display:grid;gap:6px;padding:6px;align-content:start}.room-page>.tile-grid{flex:1;overflow-y:auto}.pip-grid{height:100%;align-content:stretch;overflow:hidden;grid-auto-rows:1fr}.participant-card{position:relative;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.participant-card--local:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid #43a047;border-radius:var(--radius);pointer-events:none;z-index:5}.card-video-wrap{position:relative;overflow:hidden;background:#000;flex:1;min-height:0}.card-video-wrap video{display:block;max-width:100%;object-fit:contain;background:#000}.participant-card--local .card-video-wrap video{transform:scaleX(-1)}.card-video-wrap video.hidden{visibility:hidden}.cam-off-avatar{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--surface2);font-size:36px;font-weight:600;color:#fff}.cam-off-avatar:before{content:attr(data-letter)}.card-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:rgba(0,0,0,.55);position:absolute;bottom:0;left:0;right:0}.card-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.8)}.muted-icon{width:14px;height:14px;color:#ef9a9a;flex-shrink:0}.audio-meter-wrap{position:absolute;right:6px;top:6px;bottom:6px;pointer-events:none;z-index:4;background:rgba(0,0,0,.4);border-radius:4px;padding:3px;box-sizing:border-box}.audio-meter-canvas{display:block;width:100%;height:100%}.controls-bar{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--surface);border-top:1px solid var(--border);padding:0 20px}.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;padding:8px 18px;font-family:var(--font);font-size:11px;transition:background .15s;min-width:68px}.ctrl-btn svg{width:20px;height:20px}.ctrl-btn:hover{background:#2a2a2a}.ctrl-btn--off{background:rgba(180,0,0,.2);border-color:#e5393566;color:#ef9a9a}.ctrl-btn--off:hover{background:rgba(180,0,0,.35)}.ctrl-btn--leave{background:var(--red);border-color:var(--red-dk);color:#fff}.ctrl-btn--leave:hover{background:#ef5350}.ctrl-group{position:relative;display:flex;align-items:stretch}.ctrl-group .ctrl-btn{border-radius:var(--radius) 0 0 var(--radius);border-right:none}.ctrl-chevron{display:flex;align-items:center;padding:0 7px;background:var(--surface2);border:1px solid var(--border);border-left:1px solid rgba(255,255,255,.08);border-radius:0 var(--radius) var(--radius) 0;color:var(--text-dim);cursor:pointer;transition:background .15s,color .15s}.ctrl-chevron:hover,.ctrl-chevron--open{color:var(--text);background:#2a2a2a}.device-popover{position:absolute;bottom:calc(100% + 8px);left:0;min-width:260px;background:#1e1e1e;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #000000b3;z-index:100;overflow:hidden}.device-popover__title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);padding:10px 14px 6px}.device-popover__empty{padding:8px 14px 12px;font-size:13px;color:var(--text-dim)}.device-popover__item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;background:none;border:none;color:var(--text);font-size:13px;font-family:var(--font);text-align:left;cursor:pointer;transition:background .1s}.device-popover__item:hover{background:rgba(255,255,255,.07)}.device-popover__item--active{color:#69f0ae}.device-popover__item svg{flex-shrink:0}