:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1e1e1e;--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent-primary: #6366f1;--accent-hover: #818cf8;--danger: #ef4444;--danger-hover: #f87171;--success: #22c55e;--border-color: rgba(255, 255, 255, .1);--titlebar-height: 48px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.titlebar{height:var(--titlebar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;gap:12px;-webkit-app-region:drag;user-select:none}.titlebar h1{font-size:14px;font-weight:600}.version{font-size:11px;color:var(--text-secondary);background:var(--bg-tertiary);padding:2px 8px;border-radius:4px}.metal-badge{font-size:10px;color:#22c55e;background:#22c55e26;padding:2px 8px;border-radius:4px;font-weight:500}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.secure-context-warning{background:#eab30833;color:#fbbf24;padding:12px 20px;font-size:13px;line-height:1.5;border-bottom:1px solid rgba(234,179,8,.3);text-align:center}.lobby{flex:1;display:flex;align-items:center;justify-content:center}.lobby-content{text-align:center}.lobby-content h2{font-size:28px;font-weight:600;margin-bottom:8px}.lobby-content p{color:var(--text-secondary);margin-bottom:24px}.call-view{flex:1;display:flex;flex-direction:column;padding:16px;gap:16px}.call-controls{display:flex;justify-content:center;gap:12px;padding:12px;background:var(--bg-secondary);border-radius:12px}.control-btn{width:48px;height:48px;border:none;border-radius:50%;background:var(--bg-tertiary);font-size:20px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;-webkit-app-region:no-drag}.control-btn:hover{background:#ffffff1a;transform:scale(1.05)}.control-btn.end-call{background:var(--danger);transform:rotate(135deg)}.control-btn.end-call:hover{background:var(--danger-hover)}.btn{padding:14px 36px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-app-region:no-drag}.btn-primary{background:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff1a}.lobby-buttons{display:flex;gap:12px;justify-content:center}.room-input-group{margin-bottom:20px}.room-input{width:100%;max-width:350px;padding:14px 18px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:15px;text-align:center;-webkit-app-region:no-drag}.room-input:focus{outline:none;border-color:var(--primary)}.room-input::placeholder{color:var(--text-muted)}.preview-view{flex:1;display:flex;flex-direction:column;padding:20px;gap:20px}.preview-header{display:flex;align-items:center;gap:16px}.preview-header h2{font-size:18px;font-weight:600}.btn-back{background:transparent;border:none;color:var(--text-secondary);font-size:14px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s;-webkit-app-region:no-drag}.btn-back:hover{background:var(--bg-tertiary);color:var(--text-primary)}.preview-actions{display:flex;justify-content:center;padding-top:12px}.media-preview{display:flex;gap:24px;padding:20px;background:#141414;border-radius:12px}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:#666}.preview-section{flex:1;display:flex;flex-direction:column;gap:12px}.error-message{background:#ef444426;color:#ef4444;padding:12px;border-radius:8px;font-size:14px;text-align:center}.preview-header{display:flex;justify-content:space-between;align-items:center}.preview-title{font-weight:600;font-size:14px;color:#fff}.preview-header select{background:#1e1e1e;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 10px;font-size:12px;color:#ccc;cursor:pointer;max-width:180px}.preview-header select:disabled{opacity:.5;cursor:not-allowed}.video-preview{aspect-ratio:4/3;background:#0a0a0a;border-radius:8px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.video-preview.active{border:2px solid #22c55e}.video-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.video-preview canvas{width:100%;height:100%;object-fit:cover}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#555}.preview-placeholder .icon{font-size:32px;opacity:.5}.preview-active-indicator{position:absolute;top:8px;right:8px;width:10px;height:10px;background:#22c55e;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.mic-preview{display:flex;align-items:center;gap:12px;padding:20px;background:#0a0a0a;border-radius:8px}.mic-level-container{flex:1;height:24px;background:#1e1e1e;border-radius:12px;overflow:hidden}.mic-level-bar{height:100%;border-radius:12px;transition:width .05s ease-out}.mic-level-bar.low{background:linear-gradient(90deg,#22c55e,#4ade80)}.mic-level-bar.medium{background:linear-gradient(90deg,#22c55e,#eab308)}.mic-level-bar.high{background:linear-gradient(90deg,#22c55e,#eab308,#ef4444)}.mic-level-text{font-size:13px;font-weight:600;color:#888;min-width:40px;text-align:right}.control-button{padding:12px 20px;border:none;border-radius:8px;background:#1e1e1e;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.control-button:hover{background:#2a2a2a}.control-button.active{background:#ef444426;color:#ef4444}.control-button.active:hover{background:#ef444440}@media(max-width:600px){.media-preview{flex-direction:column}}.call-view{display:flex;flex-direction:column;height:100%;background:#0a0a0a}.call-status{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#141414f2;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}.room-id{color:#888}.connection-status{color:#22c55e}.peer-count{color:#fff;font-weight:600}.video-container{position:relative;background:#141414;overflow:hidden;width:100%;height:100%}.video-container video{width:100%;height:100%;display:block}.main-view{flex:1;position:relative;overflow:hidden;background:#000}.main-view .video-container video{object-fit:contain!important}.pip-container{position:absolute;top:80px;right:20px;display:flex;flex-direction:column;gap:12px;z-index:100;pointer-events:none}.video-container.pip{pointer-events:auto;width:240px;height:160px;border-radius:12px;border:2px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #00000080;cursor:pointer;transition:transform .2s,border-color .2s}.video-container.pip:hover{transform:scale(1.05);border-color:#22c55e80}.video-container.pip video{object-fit:cover}.call-controls-container{display:flex;justify-content:center;padding:20px 0 30px;background:linear-gradient(transparent,#000c);position:absolute;bottom:0;left:0;right:0;pointer-events:none;z-index:200}.controls-group{display:flex;align-items:center;gap:12px;background:#1e1f22f2;padding:10px 16px;border-radius:32px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #00000080;pointer-events:auto}.control-block{position:relative;display:flex;align-items:center;background:#ffffff0d;border-radius:8px;transition:background .2s}.control-block:hover{background:#ffffff1a}.control-btn-icon{background:transparent;border:none;color:#dbdee1;padding:10px 8px 10px 12px;cursor:pointer;display:flex;align-items:center;border-top-left-radius:8px;border-bottom-left-radius:8px}.control-btn-icon.active{color:#f23f42}.control-btn-arrow{background:transparent;border:none;color:#dbdee1;padding:10px 6px;cursor:pointer;display:flex;align-items:center;border-left:1px solid rgba(255,255,255,.1);border-top-right-radius:8px;border-bottom-right-radius:8px}.control-btn-arrow:hover{color:#fff}.control-btn-round{width:44px;height:44px;border-radius:50%;background:#ffffff0d;border:none;color:#dbdee1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.control-btn-round:hover{background:#ffffff26;color:#fff;transform:translateY(-2px)}.control-btn-round.active{background:#23a55933;color:#23a559}.control-btn-round.invite{color:#5865f2}.control-btn-round.end-call{background:#f23f43!important;color:#fff}.control-btn-round.end-call:hover{background:#da373c!important}.rotate-135{transform:rotate(135deg)}.device-menu{position:absolute;bottom:calc(100% + 15px);left:0;min-width:200px;background:#1e1f22;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;box-shadow:0 5px 20px #0006;z-index:300}.device-item{padding:8px 12px;color:#dbdee1;font-size:14px;border-radius:4px;cursor:pointer;transition:background .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-item:hover{background:#35373c;color:#fff}.modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}.modal-content{background:#313338;padding:24px;border-radius:16px;width:90%;max-width:400px;box-shadow:0 20px 50px #00000080;border:1px solid rgba(255,255,255,.1)}.modal-content h3{margin-top:0;color:#fff}.modal-content p{color:#b5bac1;font-size:14px}.invite-link-box{background:#1e1e1e;padding:12px;border-radius:8px;margin:16px 0;border:1px solid #000}.invite-link-box code{color:#5865f2;word-break:break-all;font-size:13px}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.video-container.local video{transform:scaleX(-1);transform-origin:center}.video-label{position:absolute;bottom:8px;left:8px;padding:4px 8px;background:#000000b3;border-radius:4px;font-size:11px;color:#fff;pointer-events:none}@media(max-width:768px){.call-view{overflow-y:hidden}.main-view{flex:1;height:50vh!important}.main-view video{object-fit:cover!important}.pip-container{position:relative;top:0;right:0;width:100%;height:50vh!important;padding:0;background:#000;display:flex;flex-direction:column;justify-content:center;order:2;pointer-events:auto}.video-container.pip{width:100%;height:100%!important;border-radius:0;border:none;box-shadow:none}.call-controls-container{bottom:24px}.controls-group{padding:8px 12px;gap:8px}.control-btn-round{width:40px;height:40px}.call-status .connection-status,.call-status .peer-count{display:none}.call-status{position:fixed;top:0;left:0;right:0;z-index:300;background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent);border:none;padding:16px;justify-content:center}}