:root{--ink: #0a0a0a;--mid: #404040;--dim: #666;--faint: #999;--teal: #006b6f;--tealDark: #004d50;--tealLight: #e8f4f5;--logoDark: #035657;--tealOnDark: #88dce0;--success: #00896a;--warn: #c48800;--danger: #d94a30;--bg: #fff;--bgSolid: #f8fafa;--line: #e6e9e9;--hdr: "Geist", "Inter", system-ui, sans-serif;--body: "Inter", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--body);color:var(--ink);background:transparent}.sp{width:100%;max-width:375px;height:100vh;max-height:812px;margin:0 auto;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;font-family:var(--body);color:var(--ink)}.sp-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bgSolid),#fff)}.sp-ava{width:30px;height:30px;border-radius:50%;background:var(--logoDark);color:var(--tealOnDark);display:flex;align-items:center;justify-content:center;flex:none}.sp-head-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.sp-agent{font-family:var(--hdr);font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-presence{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:none;background:none;padding:0;cursor:pointer;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim)}.sp-logout{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sp-logout:hover{border-color:var(--danger);color:var(--danger)}.sp-dot{width:7px;height:7px;border-radius:50%;background:var(--success)}.sp-dot.available{background:var(--success)}.sp-dot.busy{background:var(--warn)}.sp-dot.offline{background:var(--faint)}.sp-offline{margin:8px 12px 0;font-size:11.5px;color:var(--warn);background:#fbf4e6;border:1px solid #eadcc0;border-radius:8px;padding:7px 10px;text-align:center}.lg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 26px;gap:10px}.lg-logo{width:52px;height:52px;border-radius:14px;background:var(--logoDark);color:var(--tealOnDark);display:flex;align-items:center;justify-content:center;margin-bottom:4px}.lg-title{font-family:var(--hdr);font-size:19px;font-weight:500}.lg-sub{font-size:12.5px;color:var(--dim);margin-bottom:12px}.lg-field{width:100%;display:flex;flex-direction:column;gap:5px}.lg-field span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim)}.lg-field input{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:var(--body);font-size:14px;background:var(--bgSolid)}.lg-field input:focus{outline:none;border-color:var(--teal);background:#fff}.lg-err{width:100%;font-size:12px;color:var(--danger);background:#fdf2ef;border:1px solid #f0c7bd;border-radius:8px;padding:7px 10px}.lg-btn{width:100%;margin-top:6px;padding:12px;border:none;border-radius:10px;background:var(--teal);color:#fff;font-family:var(--body);font-size:14px;cursor:pointer}.lg-btn:hover:not(:disabled){background:var(--tealDark)}.lg-btn:disabled{background:var(--bgSolid);color:var(--faint);border:1px solid var(--line);cursor:not-allowed}.lg-foot{font-size:10.5px;color:var(--faint);margin-top:10px}.ct{display:flex;flex-direction:column}.ct-search{margin:12px 14px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:var(--body);font-size:13px;background:var(--bgSolid)}.ct-search:focus{outline:none;border-color:var(--teal);background:#fff}.ct-avatar{width:32px;height:32px;border-radius:50%;flex:none;background:var(--logoDark);color:var(--tealOnDark);display:flex;align-items:center;justify-content:center;font-family:var(--hdr);font-size:13px}.ct-call{color:var(--teal)}.sp-body{flex:1;min-height:0;overflow-y:auto}.sp-tabs{display:flex;border-top:1px solid var(--line);background:var(--bgSolid)}.sp-tab{flex:1;border:none;background:transparent;cursor:pointer;padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--dim);font-family:var(--body);font-size:10px}.sp-tab.on{color:var(--teal)}.sp-tab .sp-tab-bar{display:none}.sp-err{margin:8px 12px 0;font-size:11.5px;color:var(--danger);background:#fdf2ef;border:1px solid #f0c7bd;border-radius:8px;padding:6px 9px}.cc{padding:20px 18px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}.cc-avatar{width:74px;height:74px;border-radius:50%;object-fit:cover;margin-bottom:12px;background:var(--logoDark);color:var(--tealOnDark);display:flex;align-items:center;justify-content:center;font-family:var(--hdr);font-size:26px;font-weight:500;overflow:hidden}.cc-avatar img{width:100%;height:100%;object-fit:cover}.cc-name{font-family:var(--hdr);font-size:20px;font-weight:500}.cc-num{font-size:14px;color:var(--faint);margin-top:2px;letter-spacing:.3px}.cc-company{font-size:12px;color:var(--dim);margin-top:3px}.cc-meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--dim)}.cc-timer{font-variant-numeric:tabular-nums}.cc-pop{font-size:11px;color:var(--teal);background:var(--tealLight);border:1px solid #bfe3e5;padding:2px 8px;border-radius:999px;margin-top:8px}.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin:22px 0 8px;width:100%}.cc-btn{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;cursor:pointer;color:var(--mid);font-family:var(--body);font-size:11.5px}.cc-btn .cc-ic{width:50px;height:50px;border-radius:50%;background:var(--bgSolid);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .12s,color .12s,border-color .12s}.cc-btn:hover .cc-ic{border-color:#cfe8ea}.cc-btn.on .cc-ic{background:var(--teal);color:#fff;border-color:var(--teal)}.cc-btn.rec.on .cc-ic{background:var(--danger);border-color:var(--danger)}.cc-btn:disabled{opacity:.4;cursor:not-allowed}.cc-hangup{width:62px;height:62px;border-radius:50%;border:none;background:var(--danger);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:12px auto 0}.cc-hangup:hover{background:#c23f27}.cc-answer{background:var(--success)}.cc-answer:hover{background:#06795e}.cc-actions-row{display:flex;gap:40px;justify-content:center;margin-top:14px}.cc-action-label{font-size:11px;color:var(--dim);margin-top:6px}.cc-pane{width:100%;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bgSolid);display:flex;flex-direction:column;gap:9px;text-align:left}.cc-pane-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim)}.cc-pane-input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:var(--body);font-size:13px;background:#fff}.cc-pane-input:focus{outline:none;border-color:var(--teal)}.cc-seg{display:flex;gap:6px}.cc-seg-btn{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 4px;cursor:pointer;font-size:11px;text-transform:capitalize;color:var(--mid)}.cc-seg-btn.on{border-color:var(--teal);background:var(--tealLight);color:var(--tealDark)}.cc-pane-actions{display:flex;gap:6px}.cc-pane-btn{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 6px;cursor:pointer;font-size:12.5px;color:var(--mid)}.cc-pane-btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}.cc-pane-btn.ghost{flex:0 0 auto;padding:8px 12px;color:var(--dim)}.cc-pane-btn:disabled{opacity:.5;cursor:not-allowed}.cc-notes{width:100%;margin-top:14px}.cc-notes textarea{width:100%;min-height:52px;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-family:var(--body);font-size:12.5px;background:var(--bgSolid)}.cc-notes textarea:focus{outline:none;border-color:var(--teal);background:#fff}.dp{padding:16px 18px 20px}.dp-display{display:flex;align-items:center;gap:8px;margin-bottom:14px}.dp-input{flex:1;border:none;border-bottom:1px solid var(--line);font-family:var(--hdr);font-size:24px;text-align:center;color:var(--ink);padding:6px 2px;letter-spacing:1px}.dp-input:focus{outline:none;border-color:var(--teal)}.dp-back{border:none;background:none;color:var(--dim);cursor:pointer;padding:4px}.dp-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dp-key{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:var(--hdr);font-size:22px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:background .1s}.dp-key:hover{background:var(--bgSolid);border-color:#cfe8ea}.dp-key small{font-family:var(--mono);font-size:8px;color:var(--faint);letter-spacing:1px;margin-top:3px}.dp-call{margin:16px auto 0;width:100%;display:flex;justify-content:center}.dp-call button{width:62px;height:62px;border-radius:50%;border:none;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.dp-call button:hover{background:var(--tealDark)}.dp-call button:disabled{background:var(--bgSolid);color:var(--faint);border:1px solid var(--line);cursor:not-allowed}.list{display:flex;flex-direction:column}.list-empty{text-align:center;color:var(--faint);font-size:12.5px;padding:40px 20px}.li{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}.li:hover{background:var(--tealLight)}.li-ic{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--bgSolid);border:1px solid var(--line);color:var(--dim)}.li-ic.inbound{color:var(--success)}.li-ic.missed{color:var(--danger)}.li-main{flex:1;min-width:0}.li-name{font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.li-sub{font-size:11px;color:var(--faint);font-family:var(--mono)}.li-time{font-size:10.5px;color:var(--faint);font-family:var(--mono);text-align:right}.set{padding:16px 18px;display:flex;flex-direction:column;gap:14px}.set-row{display:flex;flex-direction:column;gap:5px}.set-row label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim)}.set-row select,.set-row input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:var(--body);font-size:13px;background:var(--bgSolid)}.set-row select:focus,.set-row input:focus{outline:none;border-color:var(--teal);background:#fff}.set-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;cursor:pointer;font-family:var(--body);font-size:12.5px;color:var(--mid)}.set-btn:hover{border-color:var(--teal);color:var(--teal)}.set-kv{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);padding:5px 0;border-bottom:1px solid var(--line)}.set-kv b{color:var(--ink);font-weight:500;font-family:var(--mono);font-size:11px}.set-group{display:flex;flex-direction:column}.set-group-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);margin-bottom:4px}.set-toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;background:none;border:none;padding:11px 2px;border-bottom:1px solid var(--line)}.set-toggle-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.set-toggle-label{font-size:13px;color:var(--ink)}.set-toggle-hint{font-size:11px;color:var(--faint)}.set-switch{flex:none;width:40px;height:23px;border-radius:999px;background:var(--line);position:relative;transition:background .15s}.set-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .15s}.set-toggle.on .set-switch{background:var(--teal)}.set-toggle.on .set-knob{transform:translate(17px)}.ring{animation:ring 1s ease-in-out infinite}@keyframes ring{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}