*{margin:0;padding:0;box-sizing:border-box}body,#app{font-family:-apple-system,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e0e0e0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.topbar{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);background:#0003;flex-shrink:0}.topbar h1{font-size:18px;background:linear-gradient(90deg,#00d2ff,#3a7bd5);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.status{font-size:12px;display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;border-radius:50%}.dot-ok{background:#2ed573}.dot-loading{background:#00d2ff;animation:blink 1s infinite}.dot-err{background:#ff6b6b}@keyframes blink{50%{opacity:.3}}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.register-footer{margin-top:20px;text-align:center;font-size:12px;color:#555;display:flex;flex-direction:column;gap:4px}.register-footer a{color:#555;text-decoration:none}.register-footer a:hover{color:#00d2ff}.register-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.register-card{width:100%;max-width:420px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;text-align:center}.register-panel h2{font-size:14px;color:#888;margin-bottom:12px}.reg-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}.reg-tab{flex:1;padding:8px 0;background:none;border:none;color:#888;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.reg-tab.active{color:#00d2ff;border-bottom-color:#00d2ff}.reg-tab:hover{color:#bbb}.reg-tab-content{display:block}.reg-tab-content[style*=none]{display:none}.form-row{display:flex;gap:10px;margin-bottom:10px;align-items:center;justify-content:center}.form-row label{width:80px;font-size:12px;color:#aaa;flex-shrink:0;text-align:right}.form-row input{flex:1;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 12px;color:#e0e0e0;font-size:13px;outline:none}.form-row input:focus{border-color:#00d2ff}.form-row input:disabled{opacity:.5}.btn{padding:8px 20px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#0984e3;color:#fff}.btn-primary:hover:not(:disabled){background:#0770c2}.btn-danger{background:#d63031;color:#fff}.btn-danger:hover:not(:disabled){background:#b71c1c}.btn-success{background:#00b894;color:#fff}.btn-success:hover:not(:disabled){background:#00a381}.btn-secondary{background:#ffffff1a;color:#ccc}.btn-secondary:hover:not(:disabled){background:#ffffff26}.btn-sm{padding:6px 14px;font-size:12px}.phone-main{flex:1;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}.phone-main.active{display:flex}.tab-bar{display:none;background:#0006;border-top:1px solid rgba(255,255,255,.08);padding:6px 16px env(safe-area-inset-bottom,8px);flex-shrink:0;position:fixed;bottom:0;left:0;right:0;z-index:100}.tab-bar.show{display:flex}.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:#ccc;font-size:10px;cursor:pointer;padding:4px 0;transition:color .2s}.tab-item .tab-icon{font-size:22px;line-height:1;filter:brightness(1.3);text-shadow:0 0 6px rgba(255,255,255,.3)}.tab-icon-svg{width:26px;height:26px;fill:currentColor}.tab-item.active{color:#00d2ff}.tab-item:hover{color:#fff}.tab-volume-wrap{position:relative;flex:1;display:flex;justify-content:center}.volume-popup{position:absolute;bottom:100%;right:0;background:#1e1e3cf2;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:14px 10px;margin-bottom:8px;z-index:200;box-shadow:0 -4px 20px #00000080}.volume-slider-v{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;writing-mode:bt-lr;width:36px;height:120px;background:transparent;outline:none}.volume-slider-v::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#00d2ff;cursor:pointer;box-shadow:0 0 8px #00d2ff99}.volume-slider-v::-webkit-slider-runnable-track{width:6px;background:#ffffff4d;border-radius:3px}.volume-slider-v::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#00d2ff;cursor:pointer;border:none;box-shadow:0 0 8px #00d2ff99}.volume-slider-v::-moz-range-track{width:6px;background:#ffffff4d;border-radius:3px}.dial-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 20px;gap:12px;flex:1}.dial-display{width:100%;max-width:300px;text-align:center;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:0 40px;background:#ffffff08;border-radius:14px;border:1px solid rgba(255,255,255,.06);box-sizing:border-box}.dial-number{font-size:30px;font-weight:200;color:#fff;letter-spacing:8px;min-height:40px;line-height:40px;word-break:break-all;text-shadow:0 0 20px rgba(0,210,255,.3)}.dial-status{font-size:12px;color:#555;height:16px;line-height:16px;margin-top:2px}.dial-backspace{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;color:#555;font-size:22px;cursor:pointer;padding:8px;display:none;transition:color .2s}.dial-backspace.show{display:block}.dial-backspace:hover{color:#fff}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:300px}.key{background:#ffffff0d;border:1px solid rgba(255,255,255,.06);border-radius:16px;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;user-select:none;-webkit-user-select:none}.key-char{font-size:28px;font-weight:300;color:#e0e0e0}.key-sub{font-size:9px;color:#444;letter-spacing:2px;margin-top:2px}.key:hover{background:#ffffff14;border-color:#ffffff1f}.key:active{background:#00d2ff1f;border-color:#00d2ff4d;transform:scale(.95)}.key:active .key-char{color:#00d2ff}.dial-actions{display:flex;align-items:center;justify-content:center;gap:48px;padding:24px 0 8px;width:100%;max-width:300px}.dial-action-btn{width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s;gap:3px}.dial-action-btn:disabled{opacity:.25;cursor:not-allowed}.dial-action-btn:hover:not(:disabled){transform:scale(1.1)}.dial-action-icon{font-size:30px;line-height:1}.dial-action-label{font-size:11px;color:inherit;margin-top:2px}.dial-audio-btn{background:linear-gradient(135deg,#00b894,#00a381);color:#fff;box-shadow:0 4px 15px #00b8944d}.dial-audio-btn:hover:not(:disabled){box-shadow:0 6px 20px #00b89480}.dial-video-btn{background:linear-gradient(135deg,#0984e3,#0770c2);color:#fff;box-shadow:0 4px 15px #0984e34d}.dial-video-btn:hover:not(:disabled){box-shadow:0 6px 20px #0984e380}.contacts-tab{flex:1;overflow-y:auto;padding:0}.contacts-header{padding:12px 20px 8px;font-size:13px;color:#666;position:sticky;top:0;background:#0f0c29f2;z-index:5}.contacts-list{list-style:none}.contact-item{display:flex;align-items:center;padding:12px 20px;gap:14px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.03)}.contact-item:hover{background:#ffffff0a}.contact-item:active{background:#00d2ff14}.contact-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:#00d2ff1f}.contact-info{flex:1;min-width:0}.contact-name{font-size:15px;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-number{font-size:12px;color:#666;margin-top:2px}.contact-call{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;background:#00b89426;color:#00b894;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}.contact-call:hover{background:#00b8944d;transform:scale(1.1)}.in-call-panel{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);z-index:900;display:none;flex-direction:column;overflow:hidden}.in-call-panel.show{display:flex;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1}}.in-call-panel:not(.video-mode){align-items:center;justify-content:center;padding:40px 20px 60px}.in-call-panel:not(.video-mode) .in-call-number{font-size:28px;font-weight:300;color:#fff;letter-spacing:2px}.in-call-panel:not(.video-mode) .in-call-status{font-size:13px;color:#00b894;margin-top:4px}.in-call-panel:not(.video-mode) .in-call-timer{font-size:48px;color:#00d2ff;font-variant-numeric:tabular-nums;margin:24px 0;font-weight:200}.in-call-panel:not(.video-mode) .in-call-audio-box{margin:12px 0;padding:12px;background:#0003;border-radius:10px;width:100%;max-width:320px}.in-call-panel:not(.video-mode) .in-call-controls{display:flex;gap:20px;margin-top:30px}.in-call-panel.video-mode .in-call-number{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:18px;font-weight:300;color:#fff;letter-spacing:1px;z-index:20;text-shadow:0 1px 4px rgba(0,0,0,.7)}.in-call-panel.video-mode .in-call-status{position:absolute;top:42px;left:0;right:0;text-align:center;font-size:12px;color:#00b894;z-index:20;text-shadow:0 1px 4px rgba(0,0,0,.7)}.in-call-panel.video-mode .in-call-timer{position:absolute;top:60px;left:0;right:0;text-align:center;font-size:32px;color:#00d2ff;font-variant-numeric:tabular-nums;font-weight:200;z-index:20;text-shadow:0 1px 4px rgba(0,0,0,.7)}.in-call-panel.video-mode .in-call-audio-box{display:none}.in-call-panel.video-mode .in-call-controls{position:absolute;bottom:0;left:0;right:0;display:flex;gap:20px;justify-content:center;padding:20px 0 env(safe-area-inset-bottom,20px);background:linear-gradient(transparent,#0009);z-index:20}.in-call-audio-label{font-size:11px;color:#888;margin-bottom:6px}.in-call-audio-box audio{display:block;width:100%;height:40px;border-radius:8px}.in-call-btn{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;transition:all .2s;gap:2px}.in-call-btn:disabled{opacity:.3;cursor:not-allowed}.in-call-btn-label{font-size:9px;color:inherit}.in-call-btn-mute{background:#ffffff1a;color:#ccc}.in-call-btn-mute:hover:not(:disabled){background:#ffffff26}.in-call-btn-mute.active{background:#e17055;color:#fff}.in-call-btn-hold{background:#ffffff1a;color:#ccc}.in-call-btn-hold:hover:not(:disabled){background:#ffffff26}.in-call-btn-hold.active{background:#6c5ce7;color:#fff}.in-call-btn-hangup{background:#d63031;color:#fff}.in-call-btn-hangup:hover:not(:disabled){background:#b71c1c;transform:scale(1.05)}.video-container{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;overflow:hidden;z-index:10}.video-remote{width:100%;height:100%;object-fit:cover;display:block}.video-local{position:absolute;bottom:100px;right:16px;width:120px;height:160px;border-radius:10px;border:2px solid rgba(0,210,255,.5);object-fit:cover;z-index:15;background:#111;touch-action:none;cursor:move}.log-tab{flex:1;display:flex;flex-direction:column;overflow:hidden}.log-header-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;font-size:14px;color:#888;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.log-body{flex:1;overflow-y:auto;padding:8px 12px;font-size:11px;color:#666;font-family:monospace;-webkit-overflow-scrolling:touch}.log-empty{text-align:center;color:#444;padding:40px 0;font-size:13px}.log-line{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03)}.log-ok{color:#2ed573}.log-err{color:#ff6b6b}.log-info{color:#00d2ff}audio.in-call-audio-el{width:100%;height:36px;border-radius:8px;margin-top:6px;background:#ffffff0d}.in-call-panel:not(.show) audio.in-call-audio-el{display:none}.call-modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:#000000b3;z-index:1000;align-items:center;justify-content:center}.call-modal-overlay.show{display:flex;animation:fadeIn .2s}.call-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:30px;text-align:center;width:300px;box-shadow:0 20px 60px #00000080}.call-modal-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(135deg,#00d2ff,#3a7bd5);display:flex;align-items:center;justify-content:center;font-size:36px;animation:ringPulse 1.5s infinite}@keyframes ringPulse{0%{box-shadow:0 0 #00d2ff80}70%{box-shadow:0 0 0 20px #00d2ff00}to{box-shadow:0 0 #00d2ff00}}.call-modal-number{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px}.call-modal-status{font-size:13px;color:#00d2ff;margin-bottom:24px}.call-modal-buttons{display:flex;gap:30px;justify-content:center}.call-modal-btn{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:26px;transition:all .2s;flex-direction:column}.call-modal-btn:hover{transform:scale(1.1)}.call-modal-btn.accept{background:#00b894;color:#fff}.call-modal-btn.reject{background:#d63031;color:#fff}.call-modal-btn-label{font-size:11px;margin-top:2px}@media(min-width:768px){.dial-number{font-size:38px;letter-spacing:10px}.keypad{max-width:360px;gap:16px}.key-char{font-size:34px}.dial-display,.dial-actions{max-width:360px}.dial-action-btn{width:84px;height:84px}.dial-action-icon{font-size:36px}.contact-item{padding:14px 30px}.topbar h1{font-size:20px}}@media(max-width:420px){.dial-number{font-size:24px;letter-spacing:5px}.keypad{max-width:250px;gap:8px}.key-char{font-size:22px}.key-sub{font-size:7px}.dial-display{max-width:250px;height:60px}.dial-actions{max-width:250px;gap:36px;padding:16px 0 6px}.dial-action-btn{width:62px;height:62px}.dial-action-icon{font-size:26px}.contact-item{padding:10px 14px;gap:10px}.contact-avatar{width:38px;height:38px;font-size:18px}.contact-name{font-size:14px}.topbar{padding:10px 14px}.topbar h1{font-size:15px}.form-row label{width:60px;font-size:11px}.form-row input{font-size:12px;padding:6px 10px}}