/* Тема и компоненты по макету sipdroid-panel.html */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#f6f6f8;--pn:#fff;--ln:#dcdce3;--tx:#16161c;--mu:#6b6b7a;--ac:#17a35f;--rd:#d6453d;--hv:#eeeef2;--wn:#b7791f;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#09090c;--pn:#121217;--ln:#25252d;--tx:#ececf1;--mu:#8b8b99;--ac:#1fb86a;--rd:#ef5b52;--hv:#1b1b22;--wn:#e0a53a;color-scheme:dark}}
:root[data-theme=dark]{--bg:#09090c;--pn:#121217;--ln:#25252d;--tx:#ececf1;--mu:#8b8b99;--ac:#1fb86a;--rd:#ef5b52;--hv:#1b1b22;--wn:#e0a53a;color-scheme:dark}
*,*:before,*:after{box-sizing:inherit}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 "Manrope","Segoe UI",system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}
button{background:var(--pn);border:1px solid var(--ln);border-radius:8px;padding:7px 12px;cursor:pointer}
button:hover{background:var(--hv)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
button.pr{background:var(--ac);border-color:var(--ac);color:#fff}button.dg{color:var(--rd)}button:disabled{opacity:.5;cursor:default}
input,select{background:var(--bg);border:1px solid var(--ln);border-radius:8px;padding:8px 10px;width:100%}
header{display:flex;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--ln);flex-wrap:wrap}
.logo{font-weight:800;font-size:18px;background:linear-gradient(90deg,#1fc8a0,#2f5bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp{flex:1}
nav{display:flex;gap:4px;padding:10px 20px 0;flex-wrap:wrap}nav button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--mu)}nav .on{color:var(--tx);border-color:var(--ac)}
main{padding:20px;max-width:1100px;margin:0 auto}h2{margin:0 0 4px;font-size:20px}h3{margin:22px 0 0;font-size:16px}.mu{color:var(--mu)}.sm{font-size:13px}
.card{background:var(--pn);border:1px solid var(--ln);border-radius:12px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:640px}th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--ln)}th{color:var(--mu);font-weight:600;font-size:13px}tr:last-child td{border:0}
tr.cl{cursor:pointer}tr.cl:hover{background:var(--hv)}
.bd{display:inline-block;padding:2px 9px;border-radius:99px;background:var(--hv);font-size:12px;white-space:nowrap}.on-b{color:var(--ac)}.bs-b{color:var(--wn)}.er-b{color:var(--rd)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.nw{white-space:nowrap}
.mono{font-family:ui-monospace,Menlo,monospace}
.bar{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}.bar>*{flex:1;min-width:150px}.bar button{flex:none}
.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:9}.modal .card{width:100%;max-width:440px;padding:20px;max-height:90vh;overflow:auto}
.cred{font-family:ui-monospace,Menlo,monospace;background:var(--bg);border:1px dashed var(--ln);border-radius:8px;padding:10px;margin:10px 0;word-break:break-all}
.wf{display:flex;align-items:center;gap:2px;height:44px;margin:10px 0;cursor:pointer}.wf i{flex:1;background:var(--ln);border-radius:2px;min-height:3px}.wf i.p{background:var(--ac)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.pad button{padding:14px;font-size:18px}
.login{max-width:360px;margin:8vh auto;padding:24px}label.f{display:block;margin:12px 0 4px;font-size:13px;color:var(--mu)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:9px 16px;border-radius:8px;z-index:20}
.inc{border-color:var(--ac);padding:14px;margin-bottom:14px;animation:pulse 1.2s infinite}.note{font-size:13px;color:var(--mu);margin-top:16px}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 25%,transparent)}}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ln);margin-right:6px}.dot.on{background:var(--ac)}.dot.er{background:var(--rd)}
.err{color:var(--rd);margin-top:10px;font-size:13px}
a{color:inherit;text-decoration:none}
.btn{display:inline-block;background:var(--pn);border:1px solid var(--ln);border-radius:8px;padding:7px 12px;cursor:pointer;text-align:center}.btn.pr{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.big{display:block;padding:16px;font-size:17px;font-weight:700;margin:16px 0 8px}.btn:hover{filter:brightness(1.08)}
.steps{margin:0 0 12px;padding-left:20px}.steps li{margin:4px 0}details{margin-top:8px}summary{cursor:pointer}
main.wide{max-width:1320px}table.wide{min-width:1080px}table.wide th,table.wide td{padding:10px}
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px}
.padc{padding:14px;text-align:center}.padc.live{border-color:var(--ac)}.padc input{margin:10px 0 0;text-align:center;font-size:18px}.padc .pad{margin:10px 0}.padc .pad button{padding:10px;font-size:17px}.padc .row{flex-wrap:nowrap}.padc .row button{padding:7px 9px}
textarea{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--ln);border-radius:8px;padding:8px 10px;width:100%;resize:vertical}textarea:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
/* ---------- CRM ---------- */
:root{--by:#17a35f;--ps:#2f6bff;--nr:#d98a12;--paper:#fff3a8;--paper-ln:#e9d77a;--paper-tx:#3d3415}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--by:#1fb86a;--ps:#5b8cff;--nr:#e0a53a;--paper:#f3e48a;--paper-ln:#d8c565}}
:root[data-theme=dark]{--by:#1fb86a;--ps:#5b8cff;--nr:#e0a53a;--paper:#f3e48a;--paper-ln:#d8c565}
.by-t{color:var(--by)}.ps-t{color:var(--ps)}.nr-t{color:var(--nr)}
.bd.by-b{color:var(--by)}.bd.ps-b{color:var(--ps)}.bd.nr-b{color:var(--nr)}.bd.lead{background:color-mix(in srgb,var(--by) 18%,transparent);color:var(--by);font-weight:700}
.pills{display:inline-flex;gap:4px;padding:4px;background:var(--pn);border:1px solid var(--ln);border-radius:12px;margin:0 0 18px;flex-wrap:wrap}
.pills button{border:0;background:none;color:var(--mu);border-radius:9px;padding:7px 14px}.pills button.on{background:var(--ac);color:#fff}
.pills.sm0{margin:0}
.empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:36px 20px;margin-top:14px;text-align:center}
.lnk{border:0;background:none;padding:6px 0;color:var(--mu)}.lnk:hover{background:none;color:var(--tx)}
.stk{display:flex;width:100%;background:var(--hv);border-radius:99px;overflow:hidden;margin:8px 0}.stk i{display:block;height:100%}
.stk .by,.lgd .by{background:var(--by)}.stk .ps,.lgd .ps{background:var(--ps)}.stk .nr,.lgd .nr{background:var(--nr)}
.lgd{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}.lgd i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
.lists{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:14px;margin-top:14px}
.lst{padding:16px}.lst.off{opacity:.7}.lst-n{font-size:17px}
.lst-k{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 4px;font-size:12px;color:var(--mu)}.lst-k span{display:block;font-size:19px;font-weight:700;color:var(--tx)}
table.files{min-width:520px;font-size:13px}table.files th,table.files td{padding:7px 10px}
.sw{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;flex:none}.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;background:var(--ln);border-radius:99px;transition:.2s}.sw i:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked+i{background:var(--ac)}.sw input:checked+i:before{transform:translateX(18px)}.sw input:focus-visible+i{outline:2px solid var(--ac);outline-offset:2px}
label.file{display:block;border:2px dashed var(--ln);border-radius:10px;padding:18px;text-align:center;cursor:pointer;color:var(--mu)}label.file:hover{border-color:var(--ac);color:var(--tx)}label.file input{display:none}
.grp{padding:10px 14px;margin:14px 0 10px;gap:10px}
table.acc input[type=checkbox],.lh input{width:18px;height:18px;accent-color:var(--ac)}table.acc .lh{text-align:center}table.acc th.lh{min-width:110px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.kpi{padding:14px;font-size:12px;color:var(--mu)}.kpi span{display:block;font-size:26px;font-weight:800;color:var(--tx);line-height:1.2}.kpi span.by-t{color:var(--by)}.kpi span.ps-t{color:var(--ps)}.kpi span.nr-t{color:var(--nr)}
/* рабочее место агента */
.crm-top{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.crm-sel{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mu);flex:1;min-width:200px;max-width:340px}
.crm-q{display:flex;flex-direction:column;gap:2px;padding:0 6px}.crm-q b{font-size:18px}
.crm-today{display:flex;gap:12px;align-items:baseline;margin-left:auto;background:var(--pn);border:1px solid var(--ln);border-radius:10px;padding:8px 14px}.crm-today b{font-size:18px}.crm-today span{font-weight:700}
.crm-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.crm-card{padding:28px 28px 18px;text-align:center;transition:border-color .2s}.crm-card.live{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 18%,transparent)}
.crm-meta{display:flex;justify-content:center;gap:10px;align-items:center;min-height:20px}
.crm-num{font-size:clamp(26px,5vw,38px);font-weight:700;letter-spacing:.02em;margin:16px 0 4px;cursor:copy;word-break:break-all}
.crm-name{font-size:20px;font-weight:700}
.crm-data{margin:14px auto 0;max-width:560px;background:var(--bg);border:1px solid var(--ln);border-radius:10px;padding:12px 14px;text-align:left;white-space:pre-wrap;word-break:break-word;color:var(--tx)}
.crm-call{display:flex;flex-direction:column;align-items:center;gap:8px;margin:24px 0 20px}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:min(100%,320px);padding:18px 26px;border-radius:999px;font-size:19px;font-weight:800;border:0;color:#fff;box-shadow:0 6px 18px -6px currentColor}
.cbtn span{font-size:22px}.cbtn.go{background:var(--ac)}.cbtn.go:hover{background:var(--ac);filter:brightness(1.08)}.cbtn.end{background:var(--rd)}.cbtn.end:hover{background:var(--rd);filter:brightness(1.08)}
.cbtn:disabled{box-shadow:none}.crm-st{font-size:14px;min-height:20px}
.crm-res{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 10px}
.rbtn{position:relative;padding:16px 8px;border-radius:12px;font-size:16px;border:2px solid;background:var(--pn)}
.rbtn span{position:absolute;top:6px;right:9px;font-size:11px;opacity:.55}
.rbtn.nr{border-color:var(--nr);color:var(--nr)}.rbtn.by{border-color:var(--by);color:var(--by)}.rbtn.ps{border-color:var(--ps);color:var(--ps)}
.rbtn.nr:hover{background:var(--nr);color:#fff}.rbtn.by:hover{background:var(--by);color:#fff}.rbtn.ps:hover{background:var(--ps);color:#fff}
/* заметка — листочек бумаги */
.note{position:sticky;top:calc(12px + env(safe-area-inset-top,0px))}
.note-tab{display:flex;align-items:center;gap:8px;width:100%;background:var(--paper);color:var(--paper-tx);border:0;border-radius:3px 3px 3px 14px;padding:14px 16px;text-align:left;
  box-shadow:0 8px 16px -10px #0008;transform:rotate(-1.5deg);font-weight:600;transition:transform .15s}
.note-tab:hover{background:var(--paper);transform:rotate(0) translateY(-2px)}.note-tab span{font-size:18px}
.paper{background:var(--paper);color:var(--paper-tx);border-radius:3px;padding:12px 14px 14px;box-shadow:0 12px 24px -12px #0009;transform:rotate(.6deg)}
.paper .lnk{color:var(--paper-tx);font-weight:800;padding:0 4px}
.paper textarea{background:repeating-linear-gradient(transparent 0 23px,var(--paper-ln) 23px 24px);border:0;color:var(--paper-tx);line-height:24px;padding:0 2px;margin-top:6px;font-size:14px;outline:none;resize:vertical}
.paper textarea::placeholder{color:#7a6c3a}.paper textarea:focus-visible{outline:none}
@media (max-width:820px){.crm-wrap{grid-template-columns:1fr}.note{position:static;order:-1}.crm-card{padding:20px 14px 14px}.crm-today{margin-left:0}.rbtn{font-size:14px;padding:14px 4px}}