:root{
  --paper:#F4F2EC; --card:#FDFCFA; --card2:#EEEBE2; --line:#DCD8CC; --line2:#C9C4B4;
  --ink:#20262A; --ink2:#5A6266; --ink3:#8B928F;
  --teal:#0E7C6E; --teal-ink:#0A5F55; --teal-bg:#E3EFEB;
  --red:#B4382E; --red-bg:#F5E4E1; --amber:#9A6E12; --amber-bg:#F3EAD3;
  --green:#2E7D4F; --green-bg:#E2EFE5;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:Charter,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sh:0 1px 2px rgba(40,36,20,.06),0 6px 18px rgba(40,36,20,.05);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#12171A; --card:#1A2125; --card2:#20282D; --line:#2B343A; --line2:#3A454C;
  --ink:#E6EAE8; --ink2:#A2ACA8; --ink3:#6E7876;
  --teal:#2FBFA9; --teal-ink:#5AD6C3; --teal-bg:#153631;
  --red:#E06A5E; --red-bg:#3A211E; --amber:#D9A94A; --amber-bg:#332A14;
  --green:#5CBF84; --green-bg:#1B3324;
  --sh:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.3);}}
:root[data-theme="dark"]{
  --paper:#12171A; --card:#1A2125; --card2:#20282D; --line:#2B343A; --line2:#3A454C;
  --ink:#E6EAE8; --ink2:#A2ACA8; --ink3:#6E7876;
  --teal:#2FBFA9; --teal-ink:#5AD6C3; --teal-bg:#153631;
  --red:#E06A5E; --red-bg:#3A211E; --amber:#D9A94A; --amber-bg:#332A14;
  --green:#5CBF84; --green-bg:#1B3324;
  --sh:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.3);}
:root[data-theme="light"]{
  --paper:#F4F2EC; --card:#FDFCFA; --card2:#EEEBE2; --line:#DCD8CC; --line2:#C9C4B4;
  --ink:#20262A; --ink2:#5A6266; --ink3:#8B928F;
  --teal:#0E7C6E; --teal-ink:#0A5F55; --teal-bg:#E3EFEB;
  --red:#B4382E; --red-bg:#F5E4E1; --amber:#9A6E12; --amber-bg:#F3EAD3;
  --green:#2E7D4F; --green-bg:#E2EFE5;
  --sh:0 1px 2px rgba(40,36,20,.06),0 6px 18px rgba(40,36,20,.05);}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:var(--sans)}
.app{display:grid;grid-template-columns:196px 1fr;min-height:100vh}
/* ── рейка навигации ── */
.rail{background:var(--card);border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.brand{padding:4px 10px 14px;border-bottom:1px dashed var(--line2);margin-bottom:12px}
.brand .t{font:700 17px/1.1 var(--serif);letter-spacing:.01em}
.brand .s{font-size:10.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.14em;margin-top:3px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;
  color:var(--ink2);padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.nav button:hover{background:var(--card2);color:var(--ink)}
.nav button[aria-current="true"]{background:var(--teal-bg);color:var(--teal-ink)}
.nav .num{font:700 10px var(--mono);color:var(--ink3);min-width:18px}
.nav button[aria-current="true"] .num{color:var(--teal)}
.railfoot{margin-top:auto;padding:10px;font-size:10.5px;color:var(--ink3);line-height:1.5;border-top:1px dashed var(--line2)}
.themebtn{border:1px solid var(--line2);background:var(--card);color:var(--ink2);border-radius:7px;padding:6px 10px;font-size:12px;cursor:pointer;width:100%;margin-bottom:8px}
/* ── основное поле ── */
.main{padding:22px 26px 60px;min-width:0}
.pagehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.eyebrow{font:700 10.5px var(--mono);letter-spacing:.16em;color:var(--teal);text-transform:uppercase}
h1{font:700 24px/1.1 var(--serif);margin:2px 0 0;letter-spacing:.005em}
.pagehead .desc{font-size:12.5px;color:var(--ink2);flex-basis:100%;max-width:70ch}
.pagehead .spacer{flex:1}
/* штампы */
.stamp{display:inline-flex;align-items:center;gap:5px;font:700 10.5px var(--mono);text-transform:uppercase;
  letter-spacing:.08em;padding:3px 8px;border-radius:4px;border:1px dashed currentColor;white-space:nowrap}
.stamp.A{color:var(--green);background:var(--green-bg)} .stamp.B{color:var(--teal);background:var(--teal-bg)}
.stamp.C{color:var(--amber);background:var(--amber-bg)} .stamp.D{color:var(--ink3);background:var(--card2)}
.stamp.ok{color:var(--green);background:var(--green-bg)} .stamp.off{color:var(--ink3);background:var(--card2)}
.stamp.wait{color:var(--amber);background:var(--amber-bg)} .stamp.err{color:var(--red);background:var(--red-bg)}
/* карточки/панели */
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px;box-shadow:var(--sh)}
.tile .k{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.tile .v{font:800 24px/1.15 var(--serif);margin-top:4px;font-variant-numeric:tabular-nums}
.tile .u{font-size:11px;color:var(--ink3)}
.tile.hl .v{color:var(--teal-ink)}
/* контролы */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.inp,select.inp{border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 11px;font-size:13px;font-family:var(--sans)}
.inp::placeholder{color:var(--ink3)}
.btn{border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:650;cursor:pointer}
.btn:hover{border-color:var(--teal)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
:root[data-theme="dark"] .btn.primary{color:#08211D}
.btn.primary:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* таблица лидов */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;position:sticky;top:0;background:var(--card);z-index:2}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--card2)}
.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .nm{font-weight:650;max-width:320px}
.tbl .sub{font-size:11px;color:var(--ink3);font-weight:400}
.chanicons{font-size:11px;color:var(--ink2);font-family:var(--mono);white-space:nowrap}
.tblwrap{overflow:auto;max-height:calc(100vh - 300px);border-radius:12px 12px 0 0}
.tfoot{padding:9px 14px;font-size:12px;color:var(--ink3);border-top:1px solid var(--line)}
/* дровер досье */
.drawer{position:fixed;top:0;right:-560px;width:min(560px,94vw);height:100vh;background:var(--card);
  border-left:1px solid var(--line2);box-shadow:-12px 0 40px rgba(0,0,0,.18);transition:right .22s ease;z-index:50;
  display:flex;flex-direction:column}
.drawer.open{right:0}
.dhead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start}
.dhead h2{font:700 18px/1.2 var(--serif);margin:0;flex:1}
.dclose{border:0;background:none;font-size:20px;color:var(--ink3);cursor:pointer;line-height:1}
.dbody{padding:16px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.drow{display:grid;grid-template-columns:110px 1fr;gap:8px;font-size:13px}
.drow .l{font:700 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
.pill{display:inline-block;font:12px var(--mono);background:var(--card2);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px;margin:0 4px 4px 0;user-select:all}
.dfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px}
.overlay{position:fixed;inset:0;background:rgba(20,20,10,.25);opacity:0;pointer-events:none;transition:.2s;z-index:40}
.overlay.show{opacity:1;pointer-events:auto}
/* рассылки */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.blk{padding:16px 18px}
.blk h3{font:700 14px var(--serif);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.blk h3 .fno{font:700 9.5px var(--mono);color:var(--ink3);letter-spacing:.12em}
.chan{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.chan:last-child{border-bottom:0}
.chan .cn{font-weight:650;min-width:90px}
.chan .cd{font-size:11.5px;color:var(--ink3);flex:1}
.route{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.rbar{display:flex;align-items:center;gap:8px;font-size:12px}
.rbar .rl{min-width:120px;color:var(--ink2)}
.rbar .track{flex:1;height:8px;border-radius:4px;background:var(--card2);overflow:hidden}
.rbar .fill{height:100%;border-radius:4px;background:var(--teal)}
.rbar .rv{font-family:var(--mono);min-width:36px;text-align:right}
.qtable{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.qtable td,.qtable th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.qtable th{font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
/* кп */
.kpprev{font:12.5px/1.6 var(--mono);white-space:pre-wrap;background:var(--card2);border:1px solid var(--line);
  border-radius:10px;padding:16px;max-height:420px;overflow:auto}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formgrid label{display:block;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
.formgrid .inp{width:100%}
/* настройки */
.srv{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.srv:last-child{border-bottom:0}
.srv .sn{font-weight:650}
.srv .sd{font:11.5px var(--mono);color:var(--ink3)}
.note{font-size:12px;color:var(--ink2);background:var(--amber-bg);border:1px solid var(--amber);border-radius:9px;padding:9px 13px;margin-bottom:14px}
.note b{color:var(--amber)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:9px;font-size:13px;transition:.25s;z-index:99;opacity:0;box-shadow:var(--sh)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.sect{display:none}.sect.on{display:block}
@media(max-width:880px){
  .app{grid-template-columns:1fr}
  /* навигация переносится по строкам, а не уезжает в горизонтальную прокрутку */
  .rail{position:static;height:auto;flex-direction:column;gap:8px;padding:12px 14px}
  .brand{border:0;margin:0;padding:0 0 6px}
  .nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .nav button{width:auto;padding:7px 11px;font-size:12.5px}
  .nav .num{display:none}
  .railfoot{margin-top:6px;padding:8px 0 0}
  .themebtn{width:auto;padding:5px 10px;margin:0 0 6px}
  .main{padding:16px 14px 50px}
  .cols2{grid-template-columns:1fr}
  .cstep{grid-template-columns:22px 1fr 74px auto auto;gap:6px}
  .formgrid{grid-template-columns:1fr}
}

/* ── боевая версия: доп. компоненты ── */
.cascade{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cstep{display:grid;grid-template-columns:26px 1fr 96px auto auto;gap:8px;align-items:center;
  background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.cstep .ord{font:800 13px var(--mono);color:var(--teal);text-align:center}
.cstep select,.cstep input{border:1px solid var(--line2);background:var(--card);color:var(--ink);
  border-radius:6px;padding:5px 8px;font-size:12.5px;width:100%;font-family:var(--sans)}
.cstep .mini{border:1px solid var(--line2);background:var(--card);color:var(--ink2);border-radius:6px;
  width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1;padding:0}
.cstep .mini:hover{border-color:var(--teal);color:var(--teal)}
.opcard{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.opcard .oh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.opcard .on{font-weight:700;flex:1}
.optext{font:12px/1.55 var(--mono);white-space:pre-wrap;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:10px;max-height:180px;overflow:auto;margin-bottom:8px}
.opbtns{display:flex;gap:6px;flex-wrap:wrap}
.rep{width:100%;border-collapse:collapse;font-size:13px}
.rep th{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line2)}
.rep td{padding:7px 10px;border-bottom:1px solid var(--line)}
.rep .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.bar{height:6px;background:var(--card2);border-radius:3px;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--teal);border-radius:3px}
.warn{font-size:12px;color:var(--ink2);background:var(--red-bg);border:1px solid var(--red);border-radius:9px;padding:9px 13px;margin-bottom:12px}
.warn b{color:var(--red)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;background:rgba(20,20,10,.4)}
.modal.show{display:flex}
.modalbox{background:var(--card);border:1px solid var(--line2);border-radius:13px;padding:20px 22px;max-width:520px;width:92vw;box-shadow:var(--sh)}
.modalbox h3{font:700 17px var(--serif);margin:0 0 10px}
.modalbox .mb{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:14px}
.mbtns{display:flex;gap:8px;justify-content:flex-end}