:root{--bg: #0f1117;--bg2: #181c26;--bg3: #1f2433;--border: #2a2f3e;--text: #e8ecf5;--muted: #6b7491;--accent: #3d7eff;--accent2: #2560d4;--green: #22c97a;--red: #f04438;--amber: #f59e0b;--radius: 10px;--font: "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px}.phone{width:360px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;overflow:hidden}.header{background:var(--bg3);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);transition:background .3s}.status-dot.connected{background:var(--green);box-shadow:0 0 6px var(--green)}.status-dot.calling{background:var(--amber);box-shadow:0 0 6px var(--amber);animation:pulse 1s infinite}.status-dot.error{background:var(--red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}details{border-bottom:1px solid var(--border)}summary{padding:12px 20px;cursor:pointer;font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none;list-style:none}summary:before{content:"▶";font-size:9px;transition:transform .2s}details[open] summary:before{transform:rotate(90deg)}.config-body{padding:4px 20px 16px;display:grid;gap:10px}.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.field input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 10px;font-size:13px;font-family:Courier New,monospace;outline:none;transition:border-color .2s}.field input:focus{border-color:var(--accent)}.btn-connect{width:100%;background:var(--accent);color:#fff;border:none;border-radius:7px;padding:9px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;margin-top:2px}.btn-connect:hover{background:var(--accent2)}.btn-connect:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}.display{padding:20px 20px 10px;text-align:center}.dialer-number{font-size:28px;font-weight:300;letter-spacing:.05em;min-height:40px;color:var(--text);cursor:text}.dialer-number[contenteditable]:focus{outline:none}.status-label{font-size:12px;color:var(--muted);margin-top:6px;min-height:18px}.timer{font-size:12px;color:var(--green);font-variant-numeric:tabular-nums}.dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 20px}.key{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 0;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .1s,transform .1s}.key:active{background:var(--border);transform:scale(.95)}.key .digit{font-size:20px;font-weight:400;line-height:1;display:block}.key .letters{font-size:9px;color:var(--muted);letter-spacing:.1em;display:block;margin-top:2px;height:12px}.key.special .digit{font-size:16px;color:var(--muted)}.key.backspace .digit{font-size:14px;color:var(--muted)}.actions{padding:12px 20px 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:center}.btn-action{border:none;border-radius:12px;padding:13px 0;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s;display:flex;flex-direction:column;align-items:center;gap:4px}.btn-action:active{transform:scale(.95)}.btn-action:disabled{opacity:.3;cursor:not-allowed}.btn-action .icon{font-size:18px;line-height:1}.btn-call{background:var(--green);color:#fff}.btn-hangup{background:var(--red);color:#fff}.btn-mute{background:var(--bg3);color:var(--text);border:1px solid var(--border)}.btn-mute.active{background:var(--amber);color:#000;border-color:var(--amber)}.btn-hold{background:var(--bg3);color:var(--text);border:1px solid var(--border)}.btn-hold.active{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-dtmf{background:var(--bg3);color:var(--text);border:1px solid var(--border)}.log-section{border-top:1px solid var(--border);padding:12px 20px;max-height:140px;overflow-y:auto}.log-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.log-entry{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px}.log-entry:last-child{border-bottom:none}.log-number{color:var(--text)}.log-dir{color:var(--muted);font-size:10px}.log-status{font-size:10px}.log-status.answered{color:var(--green)}.log-status.missed{color:var(--red)}.log-status.outgoing{color:var(--accent)}audio{display:none}