:root{--bg: #14161a;--surface: #1d2026;--surface-2: #262a32;--border: #30353f;--text: #f1f3f6;--muted: #9aa3b2;--accent: #ff7a1a;--accent-2: #ff9447;--green: #22c55e;--red: #ef4444;--blue: #3b82f6;--radius: 14px;--nav-h: 64px;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:var(--accent-2)}.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}.error{color:#ff8a8a;margin:8px 0}.empty{color:var(--muted);text-align:center;padding:40px 0}.notice{background:#4a2a10;color:#ffd2ad;padding:10px 14px;border-radius:10px;margin-bottom:12px;font-size:.9rem}.shell{min-height:100dvh;display:flex;flex-direction:column}.shell.with-nav{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}.content{flex:1;width:100%;max-width:560px;margin:0 auto;padding:0 16px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;max-width:560px;width:100%;margin:0 auto}.brand{font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px}.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}.topbar-right{display:flex;align-items:center;gap:6px}.who{color:var(--muted);font-size:.9rem}.badge{margin-left:6px;background:var(--accent);color:#1a0e04;font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:6px;text-transform:uppercase}.icon-btn{background:none;border:0;padding:8px;border-radius:10px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}.icon-btn:active{background:var(--surface-2)}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:4px;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#14161af0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border)}.tab{flex:1;max-width:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);text-decoration:none;font-size:.75rem}.tab.active{color:var(--accent)}.callbar{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);max-width:528px;margin:0 auto 8px;background:#143d24;color:#c8f7d8;border:0;border-radius:12px;padding:10px 12px;text-align:left}.callbar-text{flex:1;font-weight:600}.callbar-end{background:var(--red);color:#fff;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center}.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite;flex:none}@keyframes pulse{50%{opacity:.3}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 14px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600;font-size:.92rem}.btn:active{filter:brightness(1.2)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a0e04}.btn-call{background:var(--green);border-color:var(--green);color:#04210f}.btn-danger{color:#ff9a9a}.btn-block{width:100%;min-height:50px;font-size:1rem}.row{display:flex;gap:8px;flex-wrap:wrap}.row .btn{flex:1}.input{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);outline:none;font-size:16px}.input:focus{border-color:var(--accent)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.auth-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0;gap:18px}.auth-card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;text-align:center}.auth-card h1{margin:4px 0 0}.auth-card p{margin:0 0 8px}.auth-logo img{width:72px;height:72px}.passcode-input{text-align:center;font-size:28px;letter-spacing:8px;min-height:60px}.admin-link{color:var(--muted);font-size:.85rem;text-decoration:none}.dialer{display:flex;flex-direction:column;min-height:calc(100dvh - var(--nav-h) - 70px);justify-content:flex-end;padding-bottom:12px}.number-display{text-align:center;padding:12px 0 8px}.number-input{width:100%;background:none;border:0;outline:none;text-align:center;font-size:clamp(26px,8vw,36px);font-weight:500;letter-spacing:1px}.number-input::placeholder{color:#4b5361}.number-preview{color:var(--muted);font-size:.9rem;min-height:1.4em}.number-preview .ok{color:#8ee6ad}.number-preview .bad{color:#ff9a9a}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px;padding:10px 14px;max-width:340px;margin:0 auto;width:100%}.key{aspect-ratio:1;max-height:78px;border-radius:50%;border:0;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;width:100%;max-width:78px;-webkit-user-select:none;user-select:none;touch-action:manipulation}.key:active{background:#3a404b}.key-main{font-size:30px;line-height:1}.key-sub{font-size:10px;letter-spacing:1.5px;color:var(--muted);min-height:12px;margin-top:2px}.keypad.compact .key{max-width:64px;max-height:64px}.keypad.compact .key-main{font-size:24px}.call-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 0}.call-row>:only-child{grid-column:2}.call-side{justify-self:center}.call-btn{width:74px;height:74px;border-radius:50%;border:0;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px #22c55e59}.call-btn.hangup{background:var(--red);box-shadow:0 6px 24px #ef444459}.call-btn:disabled{opacity:.35;box-shadow:none}.incall{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:30px 0;text-align:center}.incall-number{font-size:clamp(26px,8vw,34px);font-weight:600}.incall-status{color:var(--muted);font-size:1.1rem;font-variant-numeric:tabular-nums}.rec-pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#ffb3b3;background:#3a1717;padding:4px 10px;border-radius:99px}.dtmf{font-size:22px;letter-spacing:3px;min-height:30px}.incall-actions{display:flex;justify-content:center;gap:36px;padding:10px 0 18px}.round-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--text);font-size:.8rem}.round-btn svg{width:64px;height:64px;padding:18px;border-radius:50%;background:var(--surface-2)}.round-btn.on svg{background:var(--text);color:var(--bg)}.page{padding-bottom:20px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.page-title{margin:8px 0 14px;font-size:1.5rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}.form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.form label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.search{flex:1 1 200px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:0 12px;color:var(--muted)}.search input{flex:1;background:none;border:0;outline:none;min-height:46px;font-size:16px;color:var(--text)}.filters .select{flex:0 1 160px;min-height:48px}.call-list,.user-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.call-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.call-item.open{border-color:#434a57}.call-summary{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;background:none;border:0;text-align:left}.call-main{flex:1;min-width:0}.call-number{font-weight:600;font-size:1.02rem}.call-meta{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-user{color:var(--accent-2)}.call-side-info{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.status{font-size:.85rem;font-variant-numeric:tabular-nums}.status.ok{color:#8ee6ad}.status.bad{color:#ff9a9a}.status.live{color:#93c5fd}.tag{font-size:.7rem;padding:1px 7px;border-radius:99px;background:#23324a;color:#a9c7ff}.tag.working{background:#3d3214;color:#ffd98a}.call-detail{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}.detail-actions{display:flex;gap:8px;flex-wrap:wrap}.player{width:100%;height:44px}.transcript{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding:4px 2px}.bubble{max-width:88%;padding:8px 12px;border-radius:14px;font-size:.95rem;background:var(--surface-2)}.bubble.me{align-self:flex-end;background:#3b2412;border-bottom-right-radius:4px}.bubble.them{align-self:flex-start;border-bottom-left-radius:4px}.bubble.mixed{align-self:stretch;max-width:none}.bubble-head{display:flex;gap:8px;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-bottom:2px}.bubble.me .bubble-head{color:#f7b27a}.user{display:flex;flex-direction:column;gap:10px}.user.disabled{opacity:.55}.user-top{display:flex;align-items:center;justify-content:space-between}.user-name{background:none;border:0;padding:0;font-weight:700;font-size:1.05rem;text-align:left}.user-meta{color:var(--muted);font-size:.83rem}.switch{position:relative;width:50px;height:30px;flex:none}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;top:0;right:0;bottom:0;left:0;background:#444b57;border-radius:99px;transition:.2s}.switch span:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:before{transform:translate(20px)}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:16px}.modal{position:relative;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 18px calc(18px + env(safe-area-inset-bottom));text-align:center}.modal h3{margin:0 0 10px}.modal-close{position:absolute;right:8px;top:8px}.big-code{font-size:40px;font-weight:700;letter-spacing:6px;color:var(--accent);margin:8px 0;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all}@media (min-width: 600px){.modal-bg{align-items:center}}.settings .group{margin-bottom:14px;scroll-margin-top:12px}.settings h3{margin:0 0 2px}.settings .group>p{margin:0 0 12px}.jump{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px}.jump a{flex:none;padding:6px 12px;border-radius:99px;background:var(--surface-2);color:var(--text);text-decoration:none;font-size:.85rem}.field{margin-bottom:14px}.field-label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}.bool-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.bool-row .field-label{margin:0}.field-foot{display:flex;gap:8px;align-items:baseline;justify-content:space-between;margin-top:4px}.src{flex:none;font-size:.72rem;color:var(--muted);background:var(--surface-2);padding:1px 7px;border-radius:99px}.src.link{color:var(--accent-2);text-decoration:none}textarea.input{resize:vertical;min-height:64px}.group-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.ok-text{color:#8ee6ad;display:flex;align-items:center;gap:4px}.webhooks{background:var(--surface-2);border-radius:12px;padding:10px 12px;margin-bottom:14px;display:flex;flex-direction:column;gap:4px}.url-row{display:flex;align-items:center;gap:8px;font-size:.8rem}.url-label{flex:none;width:96px;color:var(--muted)}.url-row code{flex:1;min-width:0;overflow-wrap:anywhere}.checks{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.88rem}.checks li{display:flex;gap:8px;padding:8px 10px;border-radius:10px;background:var(--surface-2)}.checks .check-icon{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}.checks .pass .check-icon{background:#14532d;color:#8ee6ad}.checks .warn .check-icon{background:#4a3a10;color:#ffd98a}.checks .fail .check-icon{background:#4c1717;color:#ff9a9a}.form-tight{display:flex;flex-direction:column;gap:8px}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em}
