:root{--page:#e9f1ef;--surface:#f8fbf7;--surface-strong:#fff;--ink:#101d1a;--muted:#60706b;--line:#cbd9d3;--teal:#006b63;--green:#14b85f;--amber:#c78014;--red:#bd3e2f;--steel:#24475c;--blue:#1967d2;--cyan:#16a4b8;--deep:#102f2a;--shadow:#192c271c 0 18px 44px;--radius:8px;color:var(--ink);background:radial-gradient(circle at 18% 10%, #14b85f21, transparent 28%), radial-gradient(circle at 88% 4%, #1967d214, transparent 32%), repeating-linear-gradient(90deg, #101d1a0a 0 1px, transparent 1px 36px), var(--page);font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Aptos,Bahnschrift,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}h1,h2,p{margin:0}.login-shell{grid-template-columns:minmax(320px,.92fr) minmax(340px,460px);align-items:stretch;gap:18px;min-height:100svh;padding:32px;display:grid}.login-visual{color:#f7fff9;background:linear-gradient(145deg,#0c2e26eb,#12463ecc),repeating-linear-gradient(0deg,#ffffff12 0 1px,#0000 1px 38px),#173c34;border:1px solid #ffffff1f;border-radius:8px;align-content:space-between;min-height:calc(100svh - 64px);padding:34px;display:grid;position:relative;overflow:hidden}.login-visual:after{content:"";pointer-events:none;background:linear-gradient(#0000,#b879133d);height:34%;position:absolute;inset:auto 0 0}.login-brand,.login-card-heading{align-items:center;gap:14px;display:flex}.login-brand{z-index:1;position:relative}.login-brand strong{font-family:Bahnschrift,Aptos,sans-serif;font-size:24px;display:block}.login-brand span{color:#f7fff9b8;font-size:13px;font-weight:700}.login-badge{color:#fff;background:#ffffff21;border:1px solid #ffffff29;border-radius:8px;place-items:center;width:48px;height:48px;display:grid}.login-badge.small{width:42px;height:42px;color:var(--teal);background:#e8f5ee;border-color:#c8dfd3}.signal-board{z-index:1;gap:10px;max-width:520px;display:grid;position:relative}.signal-row{background:#ffffff1a;border:1px solid #ffffff24;border-radius:8px;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:12px 14px;display:grid}.signal-row.active{border-color:#59d69cad;box-shadow:inset 4px 0 #55d28e}.signal-row span{color:#f7fff9c7}.signal-row strong{color:#fff;text-transform:uppercase;font-size:13px}.login-card{border:1px solid var(--line);min-height:calc(100svh - 64px);box-shadow:var(--shadow);background:#ffffffeb;border-radius:8px;align-content:center;gap:18px;padding:36px;display:grid}.compact-login{text-align:center;align-content:center;justify-items:center;min-height:240px}.login-card h1{font-size:30px}.input-with-icon{background:#fff;border:1px solid #cbd7d0;border-radius:6px;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;padding:0 12px;display:grid}.input-with-icon:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #007c7421}.input-with-icon svg{color:var(--teal)}.input-with-icon input{min-height:46px;box-shadow:none;border:0;padding:0}.input-with-icon input:focus{box-shadow:none}.login-error{color:#7c1e17;background:#ffe8e5;border:1px solid #efb4ad;border-radius:6px;align-items:center;gap:9px;min-height:42px;padding:10px 12px;font-size:13px;font-weight:700;display:flex}.login-button{min-height:48px}.app-shell{grid-template-columns:256px minmax(0,1fr);min-height:100svh;padding-bottom:112px;display:grid}.sidebar{color:#f5fff9;background:linear-gradient(#18382f,#1d2b29);flex-direction:column;gap:28px;padding:24px 18px;display:flex}.brand-mark{align-items:center;gap:12px;padding:12px 10px;display:flex}.brand-mark strong{letter-spacing:0;font-family:Bahnschrift,Aptos,sans-serif;font-size:18px;font-weight:700;line-height:1.15;display:block}.brand-mark span{color:#f5fff9b8;margin-top:3px;font-size:12px;display:block}.nav-list{gap:8px;display:grid}.nav-item{color:#f5fff9cc;border-radius:var(--radius);background:0 0;border:1px solid #0000;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 10px;display:flex}.nav-item:hover,.nav-item.active{color:#fff;background:#ffffff1a;border-color:#ffffff24}.workspace{width:min(1280px,100%);padding:28px}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px;display:flex}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.user-chip{color:#20443a;border:1px solid var(--line);background:#ffffffbd;border-radius:8px;align-items:center;gap:7px;min-height:38px;padding:8px 10px;font-size:13px;font-weight:800;display:inline-flex}.eyebrow{color:var(--teal);letter-spacing:0;text-transform:uppercase;margin-bottom:6px;font-size:13px;font-weight:700;display:block}h1{color:var(--ink);letter-spacing:0;font-family:Bahnschrift,Aptos,sans-serif;font-size:34px;font-weight:700;line-height:1.1}h2{color:var(--ink);letter-spacing:0;font-size:18px;font-weight:700}.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px;display:grid}.metric-card{background:var(--surface-strong);border:1px solid var(--line);border-left:5px solid var(--steel);border-radius:var(--radius);min-height:98px;box-shadow:var(--shadow);padding:18px}.metric-card.green{border-left-color:var(--green)}.metric-card.teal{border-left-color:var(--teal)}.metric-card.amber{border-left-color:var(--amber)}.metric-card span{color:var(--muted);text-transform:uppercase;font-size:13px;font-weight:700;display:block}.metric-card strong{margin-top:8px;font-size:34px;line-height:1;display:block}.notice{color:#6f3400;border-radius:var(--radius);background:#fff5dd;border:1px solid #e7c36d;align-items:center;gap:10px;min-height:44px;margin-bottom:16px;padding:10px 12px;display:flex}.panel-grid{gap:16px;display:grid}.sessions-grid{grid-template-columns:minmax(300px,390px) minmax(0,1fr)}.two-columns{grid-template-columns:minmax(280px,390px) minmax(0,1fr)}.span-full{grid-column:1/-1}.tool-panel,.list-panel,.template-panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#fffffff5,#f7fbf8ed);padding:18px}.panel-heading{align-items:center;gap:10px;margin-bottom:16px;display:flex}.panel-heading p{color:var(--muted);margin-top:3px;font-size:12px;font-weight:700;line-height:1.35}.panel-icon{color:#fff;background:radial-gradient(circle at 30% 22%, #ffffff6b, transparent 28%), linear-gradient(145deg, var(--green), var(--teal));border-radius:12px;flex:0 0 38px;place-items:center;width:38px;height:38px;display:inline-grid;box-shadow:0 12px 24px #006b6338}.panel-icon.qr{background:radial-gradient(circle at 30% 22%, #ffffff6b, transparent 28%), linear-gradient(145deg, var(--blue), var(--teal))}.panel-icon.list{background:radial-gradient(circle at 30% 22%, #ffffff6b, transparent 28%), linear-gradient(145deg, #f2a61f, var(--amber))}.panel-heading .compact{margin-left:auto}label{color:var(--muted);gap:6px;font-size:13px;font-weight:700;display:grid}input,select{width:100%;min-height:42px;color:var(--ink);background:#fff;border:1px solid #cbd7d0;border-radius:6px;outline:none;padding:9px 10px}input:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px #007c7421}.tool-panel{align-content:start;gap:13px;display:grid}.inline-fields{grid-template-columns:1fr 1fr;gap:10px;display:grid}.primary-button,.icon-button,.row-actions button{min-height:40px;color:var(--ink);background:#fff;border:1px solid #cbd7d0;border-radius:6px;justify-content:center;align-items:center;gap:8px;display:inline-flex}.primary-button{color:#fff;background:var(--teal);border-color:var(--teal);width:100%;margin-top:4px;font-weight:700}.primary-button:disabled{opacity:.62;cursor:wait}.icon-button{flex:0 0 42px;width:42px}.icon-button.compact{flex-basis:36px;width:36px;min-height:36px}.connection-create-panel{min-height:240px;position:relative;overflow:hidden}.connection-create-panel:after{content:"";pointer-events:none;background:radial-gradient(circle,#14b85f29,#0000 68%);width:190px;height:190px;position:absolute;bottom:-78px;right:-72px}.qr-panel{min-height:390px}.qr-heading{align-items:flex-start}.qr-heading .status-pill{margin-left:auto}.qr-box{background:radial-gradient(circle at 50% 18%,#14b85f1a,#0000 33%),linear-gradient(#fff,#f8fbf9);border:1px solid #cfe0d8;border-radius:14px;justify-items:center;gap:9px;min-height:304px;padding:24px 16px 18px;display:grid;position:relative;box-shadow:inset 0 14px 30px #102f2a14}.qr-box svg{background:#fff;border:1px solid #e6ece9;border-radius:12px;width:min(100%,226px);height:auto;padding:8px;box-shadow:0 12px 28px #0c1f1b1f}.qr-box span,.record-row span{color:var(--muted);font-size:13px}.qr-owner-badge{text-transform:uppercase;background:#dffbea;border:1px solid #b9efcf;border-radius:999px;align-items:center;min-height:26px;padding:5px 10px;font-weight:900;display:inline-flex;color:#07533a!important;font-size:11px!important}.qr-empty{text-align:center;gap:6px;min-height:300px}.qr-action-button{justify-self:center;width:auto;margin-top:10px;padding:0 18px}.qr-empty strong,.qr-empty span{display:block}.qr-empty strong{color:var(--ink)}.list-panel{align-content:start;gap:10px;display:grid}.connections-panel{background:linear-gradient(#fffffffa,#f1f8f5f0)}.connections-heading{margin-bottom:6px}.record-row{border-radius:var(--radius);background:#fff;border:1px solid #d8e1dc;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;min-height:72px;padding:12px;display:grid}.session-card{transition:border-color .16s,box-shadow .16s,transform .16s;position:relative;overflow:hidden}.session-card:before{content:"";background:#cad8d1;width:4px;position:absolute;inset:0 auto 0 0}.session-card.selected{border-color:#14b85f85;transform:translateY(-1px);box-shadow:0 18px 34px #14b85f29,inset 0 0 0 1px #14b85f24}.session-card.selected:before{background:linear-gradient(180deg, var(--green), var(--cyan))}.record-main{width:100%;min-height:48px;color:inherit;text-align:left;background:0 0;border:0;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:11px;padding:0;display:grid}.record-main small{color:#07533a;text-transform:uppercase;white-space:nowrap;background:#e2f9eb;border:1px solid #c1edcf;border-radius:999px;align-self:center;padding:5px 8px;font-size:11px;font-weight:900}.connection-orb{background:#9aa7a1;border-radius:999px;width:12px;height:12px;box-shadow:0 0 0 5px #9aa7a157}.connection-orb.ready,.connection-orb.authenticated{background:var(--green);box-shadow:0 0 0 5px #14b85f38}.connection-orb.qr,.connection-orb.starting{background:#f0a51a;box-shadow:0 0 0 5px #f0a51a3d}.connection-orb.error{background:var(--red);box-shadow:0 0 0 5px #bd3e2f33}.record-row strong,.record-row span,.record-row em{display:block}.record-row strong{margin-bottom:4px}.record-row em{color:var(--red);margin-top:4px;font-size:12px;font-style:normal}.row-actions{align-items:center;gap:6px;display:flex}.row-actions button{width:36px;min-height:36px}.status-pill{color:#33413c;white-space:nowrap;background:#eef2ef;border-radius:999px;align-items:center;min-height:28px;padding:5px 9px;font-size:12px;font-weight:800;display:inline-flex}.status-pill.ready,.status-pill.authenticated,.status-pill.registered{color:#064927;background:#dffbea}.status-pill.qr,.status-pill.starting{color:#694000;background:#fff0c8}.status-pill.error{color:#7c1e17;background:#ffe0dc}.empty-state{min-height:120px;color:var(--muted);border-radius:var(--radius);background:#ffffff8c;border:1px dashed #bfcbc5;place-items:center;display:grid}.sip-endpoint-note{color:#143c33;background:linear-gradient(135deg,#e2f9ebe6,#e8f6ffd1);border:1px solid #c6e4d4;border-radius:12px;gap:5px;padding:12px;font-size:13px;display:grid}.sip-endpoint-note strong{color:var(--ink)}.sip-trunk-row{align-items:start}.sip-trunk-details{gap:3px;display:grid}.sip-trunk-details span{overflow-wrap:anywhere}.template-panel pre{color:#f2fff8;background:#1b2623;border-radius:6px;max-height:420px;margin:0;padding:16px;font-family:Cascadia Mono,Consolas,monospace;font-size:13px;line-height:1.55;overflow:auto}.capability-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.capability-card{border:1px solid var(--line);border-radius:var(--radius);min-height:118px;box-shadow:var(--shadow);background:#fff;border-top:5px solid #97a6a0;padding:16px}.capability-card.ready{border-top-color:var(--green)}.capability-card.experimental{border-top-color:var(--amber)}.capability-card.planned{border-top-color:var(--steel)}.capability-card strong,.capability-card span{display:block}.capability-card span{color:var(--muted);margin-top:10px;font-size:13px;font-weight:700}.dialer-fab{z-index:30;color:#fff;background:radial-gradient(circle at 30% 25%,#ffffff8c,#0000 25%),linear-gradient(145deg,#12e072,#05b954 58%,#008f63);border:1px solid #ffffff94;border-radius:50%;place-items:center;width:72px;height:72px;transition:transform .2s,box-shadow .2s;display:grid;position:fixed;bottom:28px;right:28px;overflow:visible;box-shadow:0 18px 40px #00c96975,0 8px 16px #072c2147}.dialer-fab:hover,.dialer-fab.open{transform:translateY(-3px)scale(1.03);box-shadow:0 22px 52px #00c96994,0 10px 18px #072c2157}.dialer-fab svg{z-index:2;filter:drop-shadow(0 3px 5px #00452547);grid-area:1/1;position:relative}.dialer-fab svg:last-of-type{width:20px;height:20px;transform:translate(12px,12px)}.dialer-fab-glow{z-index:0;border-radius:inherit;background:#00c9692e;animation:1.9s ease-in-out infinite dialer-pulse;position:absolute;inset:-13px}.dialer-fab-badge{z-index:3;color:#063b27;background:#d7ffe7;border:2px solid #fff;border-radius:999px;place-items:center;min-width:24px;height:24px;padding:0 7px;font-size:12px;font-weight:900;display:grid;position:absolute;top:-4px;right:-2px}.phone-dialer{z-index:29;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);scrollbar-width:thin;background:radial-gradient(circle at 16% 12%,#00dd802e,#0000 31%),radial-gradient(circle at 86% 20%,#0080ff1f,#0000 28%),linear-gradient(#fffffffa,#f7fafaf5);border:1px solid #dee6e2eb;border-radius:24px;gap:8px;width:min(100vw - 56px,306px);max-height:calc(100svh - 136px);padding:10px 16px 12px;animation:.22s ease-out both dialer-rise;display:grid;position:fixed;bottom:112px;right:28px;overflow:hidden auto;box-shadow:0 24px 60px #09231c38,inset 0 1px #fffc}.phone-dialer:before{content:"";z-index:-1;background-color:#0000;background-image:linear-gradient(90deg,#00b47814 1px,#0000 1px),linear-gradient(0deg,#00b4780f 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#00000070,#0000 72%);mask-image:linear-gradient(#00000070,#0000 72%)}.dialer-window-actions{justify-content:flex-end;gap:8px;min-height:22px;display:flex}.dialer-window-actions button{color:#263631;background:#ffffff94;border:1px solid #0000;border-radius:50%;place-items:center;width:24px;height:24px;display:grid}.dialer-window-actions button:hover{color:#007d55;background:#effff7;border-color:#00c9692e}.dialer-title{min-height:34px;color:var(--ink);text-align:left;justify-content:center;align-items:center;gap:10px;display:flex}.dialer-whatsapp-mark{color:#fff;background:linear-gradient(145deg,#1ee47d,#00af63);border-radius:14px;place-items:center;width:34px;height:34px;display:grid;box-shadow:0 10px 22px #00af6347}.dialer-title strong,.dialer-title span{display:block}.dialer-title strong{font-family:Bahnschrift,Aptos,sans-serif;font-size:16px}.dialer-title span{color:var(--muted);margin-top:1px;font-size:12px;font-weight:700}.dialer-route{color:#54645f;letter-spacing:.02em;text-transform:uppercase;gap:7px;font-size:11px;font-weight:900}.dialer-route select{color:#18362e;background:linear-gradient(#fff,#f4faf7);border-color:#d4e6dd;border-radius:14px;min-height:36px;font-weight:800}.dialer-display{place-items:center;min-height:46px;display:grid}.dialer-display input{color:#17201d;width:100%;min-height:40px;box-shadow:none;text-align:center;letter-spacing:.01em;background:0 0;border:0;padding:0 8px;font-family:Bahnschrift,Aptos,sans-serif;font-size:25px;font-weight:700}.dialer-display input:focus{box-shadow:none}.dialer-display input::placeholder{color:#74757f;font-size:23px;font-weight:500}.dialer-keypad{grid-template-columns:repeat(3,1fr);justify-items:center;gap:8px 12px;display:grid}.dialer-key,.dialer-backspace,.dialer-call-button{border:0;place-items:center;transition:transform .16s,box-shadow .16s,background .16s;display:inline-grid}.dialer-key{color:#141a18;background:radial-gradient(circle at 36% 26%,#fff,#0000 35%),linear-gradient(#f7f7fa,#ececf1);border-radius:50%;width:54px;height:54px;box-shadow:0 8px 18px #0515100f,inset 0 1px #fffffff2}.dialer-key:hover,.dialer-backspace:hover{background:radial-gradient(circle at 36% 26%,#fff,#0000 35%),linear-gradient(#eafff2,#ddf8ea);transform:translateY(-2px);box-shadow:0 10px 22px #00af632e}.dialer-key strong,.dialer-key span{line-height:1;display:block}.dialer-key strong{font-family:Bahnschrift,Aptos,sans-serif;font-size:22px}.dialer-key span{color:#545862;letter-spacing:.13em;min-height:10px;margin-top:4px;font-size:9px;font-weight:800}.dialer-actions{grid-template-columns:1fr 70px 1fr;justify-items:center;gap:8px;margin-top:2px;display:grid}.dialer-version{color:#88918d;justify-self:start;font-size:11px;font-weight:800}.dialer-backspace{color:#fff;background:#111816;border-radius:12px;justify-self:center;width:34px;height:34px}.dialer-call-button{color:#fff;background:radial-gradient(circle at 34% 22%,#ffffff8c,#0000 28%),linear-gradient(145deg,#19e476,#02bd5b 62%,#009b68);border-radius:50%;width:64px;height:64px;box-shadow:0 14px 30px #00c9696b,inset 0 1px #ffffff70}.dialer-call-button:hover{transform:translateY(-2px)scale(1.02)}.dialer-call-button:disabled{opacity:.58;cursor:not-allowed;filter:grayscale(.25)}.dialer-clear{color:#64716c;text-transform:uppercase;background:0 0;border:0;border-radius:999px;justify-self:center;width:fit-content;min-height:24px;padding:0 12px;font-size:11px;font-weight:800}.dialer-clear:hover{color:#006f4b;background:#eafff3}@keyframes dialer-pulse{0%,to{opacity:.55;transform:scale(.9)}50%{opacity:.18;transform:scale(1.08)}}@keyframes dialer-rise{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=980px){.login-shell{grid-template-columns:1fr;padding:18px}.login-visual{min-height:300px}.login-card{min-height:auto}.app-shell{grid-template-columns:1fr}.sidebar{z-index:5;padding:12px;position:sticky;top:0}.brand-mark{padding:4px}.nav-list{grid-template-columns:repeat(4,minmax(0,1fr))}.nav-item{justify-content:center}.nav-item span{display:none}.workspace{padding:18px}.metrics-grid,.sessions-grid,.two-columns,.capability-grid,.record-row{grid-template-columns:1fr}.record-main{grid-template-columns:18px minmax(0,1fr)}.record-main small{grid-column:2;justify-self:start}.row-actions{flex-wrap:wrap}.dialer-fab{bottom:18px;right:18px}.phone-dialer{bottom:104px;right:18px}}@media (width<=560px){.login-shell{gap:0;padding:0}.login-visual,.login-card{border-left:0;border-right:0;border-radius:0}.login-visual{min-height:240px;padding:22px}.login-card{padding:24px 20px}h1{font-size:26px}.topbar{flex-direction:column;align-items:flex-start}.metrics-grid{gap:8px}.inline-fields{grid-template-columns:1fr}.app-shell{padding-bottom:112px}.dialer-fab{width:66px;height:66px;bottom:16px;right:16px}.phone-dialer{width:auto;bottom:92px;left:10px;right:10px}.dialer-key{width:52px;height:52px}}
