*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0a0a0f;color:#e0e0e0;min-height:100vh;display:flex;justify-content:center;align-items:center}
#app{width:100%;max-width:340px;padding:1rem}
.screen{display:none}.screen.active{display:block}
h1{text-align:center;font-size:1.4rem;margin-bottom:1.2rem;font-weight:400;letter-spacing:.02em;color:#fff}
label{display:block;margin-bottom:.8rem;font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:.04em}
input[type=text],input[type=password],input[type=tel]{width:100%;padding:.7rem;border:1px solid #2a2a35;border-radius:6px;background:#12121a;color:#fff;font-size:1rem;margin-top:.3rem;outline:none;transition:border-color .15s}
input:focus{border-color:#4a9eff}
button{cursor:pointer;border:none;border-radius:6px;font-size:.9rem;transition:background .15s,opacity .15s}
button:active{opacity:.7}
#login-form button{width:100%;padding:.75rem;background:#4a9eff;color:#fff;font-weight:600;margin-top:.5rem}
#login-form button:hover{background:#3585e0}
#status-bar{display:flex;align-items:center;gap:.4rem;margin-bottom:.8rem;padding:.5rem .7rem;background:#12121a;border-radius:6px;font-size:.8rem}
#status-dot{width:8px;height:8px;border-radius:50%;background:#555;flex-shrink:0}
#status-dot.reg{background:#22c55e}.status-dot.err{background:#ef4444}
#dial{width:100%;text-align:center;font-size:1.6rem;padding:.6rem;margin-bottom:.6rem;background:#12121a;border:1px solid #2a2a35;border-radius:6px;color:#fff;letter-spacing:.04em}
#numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:.8rem}
#numpad button{padding:.6rem;background:#18181f;color:#ccc;font-size:.85rem;border:1px solid #222;border-radius:6px}
#numpad button:hover{background:#222}
#call-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.big{padding:.7rem 1.4rem;font-weight:600;font-size:.95rem;border-radius:8px;min-width:120px}
.small{padding:.5rem 1rem;font-size:.8rem;border-radius:6px;background:#1e1e28;color:#ccc;border:1px solid #333}
.small:hover{background:#2a2a35}
.green{background:#16a34a;color:#fff}.green:hover{background:#15803d}
.red{background:#dc2626;color:#fff}.red:hover{background:#b91c1c}
.hidden{display:none!important}
#call-info{text-align:center;margin-top:.8rem;font-size:.85rem;color:#aaa}
#call-peer{display:block;margin-bottom:.2rem}
#call-timer{font-variant-numeric:tabular-nums;color:#fff;font-size:1rem}
#rec-indicator{color:#ef4444;font-weight:600;margin-left:.5rem;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}