:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color-scheme:light;--canvas:#f5f7fb;--surface:#fff;--surface-soft:#f8fafc;--line:#e3e8ef;--line-strong:#cfd7e3;--text:#1b2638;--text-strong:#101828;--muted:#667085;--faint:#98a2b3;--accent:#2167d5;--accent-soft:#edf4ff;--accent-line:#c9ddff;--navy:#0b1739;--success:#16865c;--success-soft:#eaf8f1;--danger:#c83b3b;--danger-soft:#fff0f0;--warning:#a46a13;--shadow:0 14px 36px rgba(16,24,40,.1)}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;background:var(--canvas);color:var(--text)}body{min-height:100vh}button,input,select,textarea{font:inherit}.hidden{display:none!important}.brand-wordmark{display:block;width:126px;height:auto}.brand-row{display:flex;align-items:center;gap:13px}.product-name{font-size:13px;font-weight:700;color:var(--navy);border-left:1px solid var(--line-strong);padding-left:13px}.section-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--accent);text-transform:uppercase;margin-bottom:6px}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px #98a2b324}.status-dot.online{background:var(--success);box-shadow:0 0 0 3px #16865c24}button{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);min-height:38px;border-radius:7px;padding:8px 13px;font-weight:650;cursor:pointer;transition:.16s ease}button:hover:not(:disabled){border-color:#b7c2d2;background:var(--surface-soft)}button:disabled{opacity:.48;cursor:not-allowed}.primary-button{background:var(--navy);color:#fff;border-color:var(--navy)}.primary-button:hover:not(:disabled){background:#15234c;border-color:#15234c}.secondary-button{background:var(--surface)}.danger-button{background:var(--danger);border-color:var(--danger);color:#fff}.answer-button{background:var(--success);border-color:var(--success);color:#fff}.compact{min-height:34px;padding:6px 10px;font-size:12px}.icon-button{width:38px;padding:0;font-size:18px;display:grid;place-items:center}.text-button{border:0;background:transparent;padding:0;min-height:auto;color:var(--accent);font-size:12px}.text-button:hover:not(:disabled){background:transparent;text-decoration:underline}input,select,textarea{width:100%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:7px;min-height:40px;padding:9px 11px;outline:0}textarea{resize:vertical;line-height:1.45}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2167d51f}label{display:grid;gap:6px;font-size:12px;font-weight:650;color:var(--muted)}.setup-shell{min-height:100vh;display:grid;place-items:center;padding:28px}.setup-card{width:min(580px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:30px;box-shadow:var(--shadow)}.setup-copy{margin:34px 0 24px}.setup-copy h1{font-size:29px;letter-spacing:-.03em;line-height:1.12;margin:0 0 11px;color:var(--text-strong)}.setup-copy p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.setup-form{display:grid;gap:16px}.form-status{min-height:20px;margin:0;color:var(--muted);font-size:12px}.form-status.error{color:var(--danger)}.form-status.success{color:var(--success)}.setup-footnote{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;color:var(--muted);font-size:11px;line-height:1.55}.phone-shell{min-height:100vh}.topbar{height:68px;background:var(--surface);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;position:sticky;top:0;z-index:20}.compact-brand{justify-self:start}.connection-summary{display:flex;align-items:center;gap:10px;justify-self:center}.connection-summary>div{display:grid;gap:1px}.connection-summary strong{font-size:12px;color:var(--text-strong)}.connection-summary span:not(.status-dot){font-size:10px;color:var(--muted)}.topbar-actions{justify-self:end;display:flex;gap:8px;align-items:center}.phone-grid{display:grid;grid-template-columns:minmax(230px,300px) minmax(430px,620px) minmax(230px,300px);gap:16px;max-width:1280px;margin:0 auto;padding:18px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:9px;min-width:0}.panel-head{min-height:68px;padding:15px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2{margin:0;font-size:16px;color:var(--text-strong)}.history-panel,.status-panel{align-self:start;position:sticky;top:86px}.history-list{max-height:calc(100vh - 172px);overflow:auto}.history-empty{padding:24px 16px;color:var(--muted);font-size:12px;line-height:1.55}.history-item{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}.history-item:last-child{border-bottom:0}.history-item:hover{background:var(--surface-soft)}.history-direction{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-soft);font-size:13px}.history-item.missed .history-direction{color:var(--danger);background:var(--danger-soft)}.history-copy{min-width:0}.history-copy strong{display:block;font-size:12px;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-copy span{display:block;margin-top:2px;font-size:10px;color:var(--muted)}.history-time{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}.dialer-panel{padding-bottom:18px}.call-identity{text-align:center;padding:28px 18px 16px}.call-identity h1{font-size:26px;letter-spacing:-.025em;color:var(--text-strong);margin:0}.call-identity p{font-size:12px;color:var(--muted);margin:7px 0 0}.call-duration{display:block;margin-top:10px;font-size:22px;font-variant-numeric:tabular-nums;color:var(--text-strong);letter-spacing:.02em}.dial-field-wrap{max-width:360px;margin:12px auto 14px;padding:0 18px}.dial-field-wrap input{text-align:center;font-size:21px;font-weight:650;letter-spacing:.04em;color:var(--text-strong);height:52px}.keypad{width:min(320px,calc(100% - 36px));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.keypad button{height:58px;border-color:var(--line);font-size:20px;font-weight:680;background:var(--surface)}.keypad button span{display:block;font-size:8px;letter-spacing:.12em;color:var(--faint);margin-top:2px}.call-primary-actions{display:flex;justify-content:center;margin-top:17px}.call-button,.hangup-button{width:126px;height:44px;border-radius:22px;color:#fff;border:0}.call-button{background:var(--success)}.call-button:hover:not(:disabled){background:#11734e}.hangup-button{background:var(--danger)}.hangup-button:hover:not(:disabled){background:#ab3030}.in-call-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:18px 18px 0}.in-call-controls button{display:grid;justify-items:center;gap:5px;min-height:58px;background:var(--surface-soft);border-color:var(--line)}.in-call-controls button.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}.in-call-controls button span{font-size:16px}.in-call-controls button b{font-size:10px}.incoming-banner{margin:0 18px 16px;border:1px solid #b9e4ce;background:var(--success-soft);padding:12px 14px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-banner strong{display:block;color:#0f5e42;font-size:15px}.incoming-actions{display:flex;gap:6px}.incoming-actions button{min-height:34px;font-size:11px;padding:6px 10px}.inline-box{margin:16px 18px 0;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:8px;padding:13px}.inline-actions{display:flex;gap:8px;margin-top:9px}.status-list{margin:0;padding:2px 16px}.status-list>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.status-list dt{font-size:11px;color:var(--muted)}.status-list dd{margin:0;font-size:11px;font-weight:700;color:var(--text-strong);text-align:right}.quality-note{margin:14px 16px;color:var(--muted);font-size:10px;line-height:1.5}.device-note{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:3px}.device-note strong{font-size:12px;color:var(--text-strong)}.device-note span{font-size:10px;color:var(--muted)}.drawer-backdrop{position:fixed;inset:0;background:#0f172a47;z-index:49}.settings-drawer{position:fixed;z-index:50;right:0;top:0;height:100vh;width:min(430px,92vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 42px #10182824;transform:translate(102%);visibility:hidden;transition:.18s ease;overflow:auto}.settings-drawer.open{transform:translate(0);visibility:visible}.drawer-head{height:68px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 16px}.drawer-head h2{font-size:17px;margin:0;color:var(--text-strong)}.drawer-body{padding:0 17px 30px}.settings-section{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:12px}.settings-section h3{margin:0;font-size:13px;color:var(--text-strong)}.settings-help{font-size:11px;line-height:1.55;color:var(--muted);margin:0}.diagnostic-section pre{height:170px;margin:0;background:#0f172a;color:#dbe7ff;border-radius:7px;padding:10px;font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto;white-space:pre-wrap}.toast-stack{position:fixed;right:18px;top:82px;z-index:80;display:grid;gap:8px;width:min(360px,calc(100vw - 36px));pointer-events:none}.toast{pointer-events:auto;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:7px;padding:11px 12px;box-shadow:var(--shadow);font-size:12px;line-height:1.45}.toast.error{border-left-color:var(--danger)}.toast.success{border-left-color:var(--success)}@media (max-width:1050px){.phone-grid{grid-template-columns:minmax(220px,270px) minmax(420px,1fr)}.status-panel{position:static;grid-column:1/-1}.status-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px}.status-list>div{border-bottom:0}.quality-note,.device-note{grid-column:auto}.history-panel{top:86px}}@media (max-width:760px){.topbar{height:auto;min-height:66px;grid-template-columns:1fr auto;padding:9px 12px;gap:8px}.connection-summary{grid-row:2;grid-column:1/-1;justify-self:start;border-top:1px solid var(--line);width:100%;padding-top:8px}.topbar-actions .secondary-button{display:none}.phone-grid{grid-template-columns:1fr;padding:10px}.history-panel{position:static;order:2}.dialer-panel{order:1}.status-panel{order:3;grid-column:auto}.history-list{max-height:280px}.keypad{width:min(340px,calc(100% - 28px))}.call-identity{padding-top:22px}.status-list{grid-template-columns:1fr 1fr}.in-call-controls{grid-template-columns:repeat(4,1fr)}.panel{border-radius:7px}.compact-brand .brand-wordmark{width:108px}.product-name{font-size:11px}}@media (max-width:430px){.setup-shell{padding:0}.setup-card{min-height:100vh;border:0;border-radius:0;padding:26px 20px}.setup-copy h1{font-size:25px}.in-call-controls{gap:5px;padding-left:12px;padding-right:12px}.in-call-controls button{padding:6px 3px}.status-list{grid-template-columns:1fr}.topbar-actions .icon-button{width:34px}.dial-field-wrap{padding:0 12px}.incoming-banner{align-items:flex-start;flex-direction:column}.incoming-actions{width:100%}.incoming-actions button{flex:1}}