/* ═══════════════════════════════════════════════════════════════
   Дизайн-система «Горн»: уголь и раскалённый металл.
   Утверждена 25.08.2026. Макет: Сервис-дизайн-макеты/Вариант-7-Премиум.html
   Правила: один акцент на экран; «хорошо» мятное, тревога малиновая;
   цифры — IBM Plex Mono с tabular-nums; световая кромка на каждой панели.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* старые имена сохранены — на них завязаны inline-стили в шаблонах */
  --bg:#090604; --ink:#F7EDE3; --muted:#AC9887;
  --accent:#FF4D14; --accent-ink:#1A0700;
  --card:#150F09; --line:#30231A;
  --shadow:inset 0 1px 0 rgba(255,215,170,.07),0 18px 44px rgba(0,0,0,.34);
  --radius:20px;
  /* новые */
  --a2:#FFA51F; --grad:linear-gradient(100deg,#FF4D14,#FFA51F);
  --pane2:#1E1710; --pane3:#2A2016;
  --line2:#5A3D24; --hi:rgba(255,215,170,.07); --dim2:#927D6C;
  --ok:#6FD08C; --warn:#FFD166; --bad:#F43F5E;
  --ok-bg:rgba(111,208,140,.11); --warn-bg:rgba(255,209,102,.11); --bad-bg:rgba(244,63,94,.11);
  --acc-bg:rgba(255,77,20,.12);
  --a2-ink:#FFD9A8; --bad-ink:#FFC2CC; --ok-ink:#0E2A18;
  --a2-deep:var(--a2);   /* акцент на самой тёмной панели (--pane3): инициалы аватара */
  --muted-deep:var(--muted);  /* приглушённый текст на --pane3 */
  --overlay:rgba(0,0,0,.74); --hi-soft:rgba(255,215,170,.03);
  --grain:.05;              /* зерно поверх фона: на угле заметно, на светлом почти нет */
  --glow1:rgba(255,77,20,.20); --glow2:rgba(255,77,20,.10);   /* жар снизу и сверху-слева */
  --acc-glow:rgba(255,77,20,.42);   /* ореол вокруг знака и рамка активного пункта */
  --acc-soft:rgba(255,77,20,.26);   /* подложка активного пункта меню */
  --acc-edge:rgba(255,235,200,.3);  /* блик по краю знака */
  --btn-glow:rgba(255,77,20,.28);   /* тень под главной кнопкой */
  /* обводки статусных плашек: на угле хватает полупрозрачных */
  --ok-line:rgba(111,208,140,.32); --warn-line:rgba(255,209,102,.32);
  --bad-line:rgba(244,63,94,.32);  --a2-line:rgba(255,165,31,.32);
  --shadow-deep:0 50px 110px rgba(0,0,0,.7);   /* модальное окно */
  --fb:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  --fn:"IBM Plex Mono",ui-monospace,monospace;
}

/* ═══════════════════════════════════════════════════════════════
   ГОРН СВЕТЛЫЙ. Тот же раскалённый металл, но остывший добела:
   тёплый песок вместо угля. Холодного серого нет нигде - иначе
   оранжевый акцент начинает выглядеть случайным пятном.

   Что поменяно по сравнению с тёмной, кроме яркости:
   - огонь СГУЩЁН (#FF4D14 → #D93A08): на светлом фоне открытый
     оранжевый слепит и теряет читаемость на кнопках;
   - «хорошо» и «тревога» тоже гуще - мятный #6FD08C на белом
     почти не виден, жёлтый #FFD166 исчезает совсем;
   - световая кромка на панелях меняется на мягкую тень: на белом
     подсвечивать нечего, объём даёт тень;
   - зерно почти убрано.
   Имена токенов те же, поэтому pult.css и inline-стили в шаблонах
   подхватывают тему сами, править их не нужно.
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --bg:#FAF4EE; --ink:#241812; --muted:#7B6455;
  --accent:#C7350A; --accent-ink:#FFFFFF;
  --card:#FFFFFF; --line:#EADCCE;
  --shadow:0 1px 2px rgba(90,55,30,.05),0 14px 34px rgba(90,55,30,.09);
  --radius:20px;
  --a2:#A15502; --grad:linear-gradient(100deg,#C7350A,#B45C04);
  --pane2:#F6EDE4; --pane3:#EFE2D5;
  --line2:#D9BFA6; --hi:rgba(255,255,255,.85); --dim2:#766559;
  --ok:#197A42; --warn:#8E6115; --bad:#CC2340;
  --ok-bg:rgba(31,143,77,.10); --warn-bg:rgba(169,116,26,.12); --bad-bg:rgba(204,35,64,.09);
  --acc-bg:rgba(199,53,10,.10);
  --a2-ink:#5C3202; --bad-ink:#8E1428; --ok-ink:#FFFFFF;
  --a2-deep:#8C4A02; --muted-deep:#766051;
  --overlay:rgba(58,32,16,.42); --hi-soft:rgba(120,80,50,.07);
  --grain:.012;
  /* жар на светлой еле тлеет: на песке даже слабый оранжевый читается как пятно грязи */
  --glow1:rgba(226,68,9,.07); --glow2:rgba(226,68,9,.04);
  --acc-glow:rgba(199,53,10,.30); --acc-soft:rgba(199,53,10,.13);
  --acc-edge:rgba(255,255,255,.55); --btn-glow:rgba(199,53,10,.20);
  /* на белом полупрозрачная рамка исчезает - берём плотный оттенок самого цвета */
  --ok-line:rgba(29,134,72,.40); --warn-line:rgba(148,102,22,.44);
  --bad-line:rgba(204,35,64,.34); --a2-line:rgba(176,93,4,.42);
  --shadow-deep:0 40px 90px rgba(90,55,30,.22);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:14.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;min-height:100vh}
/* жар снизу + зерно поверх */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1100px 420px at 50% 104%,var(--glow1),transparent 66%),
             radial-gradient(700px 380px at 3% -6%,var(--glow2),transparent 62%)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E")}
h1{font-family:var(--fb);font-weight:500;font-size:32px;letter-spacing:-.03em;line-height:1.08;margin:0 0 6px}
h2{font-size:17px;font-weight:500;letter-spacing:-.01em;margin:0 0 16px}
a{color:var(--a2)}
.num,.mono{font-family:var(--fn);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── КАРКАС ─────────────────────────────────────────── */
.layout{display:flex;min-height:100vh;position:relative;z-index:1}
.sidebar{width:256px;flex:0 0 auto;background:var(--card);border-right:1px solid var(--line);
  padding:26px 16px 20px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;
  box-shadow:inset -1px 0 0 var(--hi-soft)}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;margin-bottom:16px;
  border-bottom:1px solid var(--line);font-family:var(--fb);font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink)}
.brand::before{content:"";width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:var(--grad);
  box-shadow:0 0 26px var(--acc-glow),inset 0 0 0 1px var(--acc-edge)}
.nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;color:var(--muted);
  text-decoration:none;font-size:14px;border:1px solid transparent;transition:.28s cubic-bezier(.2,.7,.3,1)}
.nav-item:hover{background:var(--pane2);color:var(--ink)}
.nav-item.active{color:var(--ink);border-color:var(--acc-glow);
  background:radial-gradient(120% 130% at 50% 120%,var(--acc-soft),var(--pane2) 62%);
  box-shadow:inset 0 -16px 26px -20px var(--a2)}
.nav-item.disabled{color:var(--dim2);pointer-events:none;opacity:.55}
.logout{color:var(--dim2);text-decoration:none;padding:12px;font-size:13px;margin-top:auto;
  border-top:1px solid var(--line);text-align:center}
.logout:hover{color:var(--a2)}

.content{flex:1;min-width:0;padding:38px 42px 80px;max-width:1180px}
.page-head{margin-bottom:26px}
.page-head .hint{margin-top:8px}

/* ── ПАНЕЛИ И ФОРМЫ ─────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 26px;margin-bottom:16px}
.add-form{display:flex;flex-direction:column;gap:14px;max-width:480px}
.add-form label{display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2);font-weight:600}
.add-form input,.add-form select{padding:13px 16px;border:1px solid var(--line);border-radius:14px;
  font-size:13.5px;background:var(--pane2);color:var(--ink);font-family:var(--fb)}
.add-form input:focus,.add-form select:focus{outline:none;border-color:var(--line2)}
.add-form small{font-size:12px;color:var(--dim2);text-transform:none;letter-spacing:0;font-weight:400;line-height:1.5}
button{background:var(--grad);color:var(--accent-ink);border:none;border-radius:13px;
  padding:12px 20px;font-size:13.5px;font-family:var(--fb);font-weight:600;cursor:pointer;transition:.3s}
button:hover{filter:brightness(1.07)}

/* ── АККАУНТЫ: список слева, досье справа ───────────── */
/* Вариант «Е» из макета Аккаунты-варианты.html. Список не растёт вниз
   бесконечно, а деталей в панели помещается больше, чем в карточке. */
.md{display:grid;grid-template-columns:268px 1fr;gap:14px;align-items:start}
.mlist{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;position:sticky;top:22px}
.mi{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;width:100%;
  border:none;border-bottom:1px solid var(--line);background:none;text-align:left;
  text-decoration:none;color:inherit;font-family:var(--fb);box-shadow:none;transition:.15s}
.mi:last-child{border-bottom:none}
.mi:hover{background:var(--pane2);filter:none}
.mi.on{background:var(--acc-bg);box-shadow:inset 3px 0 0 var(--accent)}
.mi .av{width:32px;height:32px;flex:0 0 auto;border-radius:10px;background:var(--pane3);
  border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--fn);
  font-size:11.5px;font-weight:500;color:var(--a2-deep)}
.mi .av.plus{font-size:16px;font-weight:400;background:var(--pane2);border-style:dashed}
.mi-tx{min-width:0;flex:1;display:block}
.mi .t{display:block;font-size:13px;font-weight:600;line-height:1.25}
.mi .s{display:block;color:var(--dim2);font-size:10.5px;font-family:var(--fn)}
.mi .st{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--dim2)}
.mi .st.ok{background:var(--ok)}
.mi .st.warn{background:var(--warn)}
.mi .st.bad{background:var(--bad);box-shadow:0 0 10px var(--bad-line)}
.mi-add .t{color:var(--muted);font-weight:500}

.mpanes{min-width:0}
.mpane{padding:20px 22px;margin:0}
.mp-top{display:flex;align-items:center;gap:14px;padding-bottom:15px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.mp-top .t{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.mp-top .s{color:var(--dim2);font-size:12px;font-family:var(--fn);margin-top:3px}
/* тревоги идут ПЕРЕД цифрами: сначала что чинить, потом как дела */
.mp-alerts{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.al1{font-size:12.5px;padding:9px 13px;border-radius:11px;
  background:var(--pane2);border:1px solid var(--line)}
.al1.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.al1.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.mp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px;margin-bottom:16px}
.mp-c{background:var(--pane2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.mp-c .l{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim2);font-weight:600}
.mp-c .v{font-family:var(--fn);font-variant-numeric:tabular-nums;font-size:21px;margin-top:5px;
  line-height:1;letter-spacing:-.025em}
.mp-c .f{font-size:10.5px;color:var(--dim2);margin-top:4px}
.mp-c.acc .v{color:var(--a2)}
.mp-c.good .v{color:var(--ok)}
.mp-subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin-bottom:16px}
.mp-s{display:flex;align-items:center;gap:11px;background:var(--pane2);border:1px solid var(--line);
  border-radius:14px;padding:11px 13px}
.mp-s .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--card);border:1px solid var(--line);color:var(--dim2)}
.mp-s.on .ic{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.mp-s.alert .ic{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.mp-s .a{font-size:12.5px;font-weight:600;line-height:1.2}
.mp-s .b{font-size:11px;color:var(--dim2);margin-top:1px}
.mp-s.off .a{color:var(--muted);font-weight:500}
.mp-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:15px;border-top:1px solid var(--line)}

.badge{font-size:11px;font-weight:600;padding:4px 12px;border-radius:22px;border:1px solid;white-space:nowrap}
.badge.on{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge.off{background:var(--pane2);color:var(--dim2);border-color:var(--line)}
.link-danger{background:none;color:var(--dim2);padding:7px 10px;box-shadow:none;font-weight:400}
.link-danger:hover{color:var(--bad);filter:none}
.empty{color:var(--dim2);padding:24px;text-align:center;background:var(--card);border:1px dashed var(--line);
  border-radius:var(--radius)}
.account-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tg-form{display:flex;align-items:center;gap:9px;margin:0}
.tg-form .fl{color:var(--dim2);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;white-space:nowrap}
.tg-form input{padding:9px 13px;border:1px solid var(--line);border-radius:11px;font-size:12.5px;width:180px;
  background:var(--pane2);color:var(--ink);font-family:var(--fn)}
.tg-form input:focus{outline:none;border-color:var(--line2)}
.btn-small{padding:8px 14px;font-size:12px;border-radius:11px;box-shadow:none}
.link-muted{background:none;color:var(--dim2);padding:7px 10px;font-size:12.5px;box-shadow:none;font-weight:400}
.link-muted:hover{color:var(--a2);filter:none}
@media(max-width:900px){.md{grid-template-columns:1fr}.mlist{position:static}}

/* ── АВТООТВЕТ ──────────────────────────────────────── */
.rule{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:14px 0;background:var(--pane2)}
.rule.off{opacity:.5}
.rule-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rule-title{font-weight:600}
.rule-actions{display:flex;gap:8px}
.steps{margin:12px 0;padding-left:20px;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13.5px}
.steps .delay{color:var(--a2);font-size:12.5px;font-family:var(--fn)}
.steps .muted{color:var(--dim2);list-style:none}
.step-add,.rule-add{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.step-add input,.rule-add input,.rule-add select{padding:10px 13px;border:1px solid var(--line);border-radius:11px;
  font-size:13px;background:var(--pane3);color:var(--ink);font-family:var(--fb)}
.step-add input:focus,.rule-add input:focus{outline:none;border-color:var(--line2)}
.step-add input[name=text]{flex:1;min-width:220px}
.step-add input[type=number]{width:120px}
.rule-add input[name=first_text]{flex:1;min-width:220px}
.rule-add{border-top:1px dashed var(--line);padding-top:16px;margin-top:16px}
form.inline{display:inline}
.muted{color:var(--dim2)}
.hint{color:var(--muted);font-size:13.5px;margin-bottom:16px;max-width:760px;line-height:1.6}
.hint code{background:var(--pane3);color:var(--a2);padding:2px 7px;border-radius:6px;font-family:var(--fn);font-size:12.5px}
.rule-head input{flex:1;padding:10px 13px;border:1px solid var(--line);border-radius:11px;font-size:13.5px;
  font-weight:600;background:var(--pane3);color:var(--ink)}
.days{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:12px 0}
.day{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.time{color:var(--dim2);font-size:12.5px;display:flex;align-items:center;gap:7px}
.time input{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--pane3);
  color:var(--ink);font-family:var(--fn)}
.triggers{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:7px}
.triggers input{flex:1;min-width:200px;padding:9px 13px;border:1px solid var(--line);border-radius:11px;
  font-size:13px;background:var(--pane3);color:var(--ink)}
.rep{font-size:12.5px;color:var(--dim2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.rule-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ── ТАБЛИЦА ВАРИАЦИЙ ───────────────────────────────── */
.acc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.var-table{width:100%;border-collapse:collapse;font-size:13.5px}
.var-table th{text-align:left;color:var(--dim2);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 12px;border-bottom:1px solid var(--line)}
.var-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.var-table tr:last-child td{border-bottom:none}
.var-table tbody tr:hover{background:var(--pane2)}
.var-table tr.off{opacity:.45}
.var-table .preview{color:var(--muted);max-width:340px;line-height:1.55}
.var-table .sched .d{display:inline-block;width:25px;text-align:center;color:var(--dim2);font-size:10.5px;
  border-radius:6px;padding:3px 0;font-family:var(--fn)}
.var-table .sched .d.a{background:var(--acc-bg);color:var(--a2)}
.var-table .sched .t{color:var(--dim2);font-size:11.5px;margin-top:5px;font-family:var(--fn)}
.stats-table td{font-family:var(--fn);font-variant-numeric:tabular-nums}
.stats-table td:first-child{font-family:var(--fb)}
.dot{width:44px;height:24px;border-radius:15px;background:var(--pane3);border:1px solid var(--line);
  cursor:pointer;position:relative;padding:0;box-shadow:none;transition:.3s}
.dot::after{content:"";position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;border-radius:50%;
  background:var(--dim2);transition:.3s cubic-bezier(.2,.7,.3,1)}
.dot.on{background:var(--grad);border-color:transparent}
.dot.on::after{left:22px;background:var(--accent-ink)}
.acts{white-space:nowrap;display:flex;gap:7px;align-items:center}
.acts form{display:inline-block;margin:0}
.acts .icon{background:none;border:none;cursor:pointer;font-size:16px;padding:5px;line-height:1;
  color:var(--muted);box-shadow:none}
.acts .icon:hover{color:var(--a2);filter:none}

/* ── МОДАЛКИ ────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:22px}
.modal{background:var(--bg);border:1px solid var(--line2);border-radius:24px;width:600px;max-width:96vw;
  max-height:90vh;overflow:auto;box-shadow:var(--shadow-deep)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 24px;
  border-bottom:1px solid var(--line);font-size:17px;font-weight:500;letter-spacing:-.01em}
.modal-head .x{cursor:pointer;color:var(--dim2);font-size:18px}
.modal-head .x:hover{color:var(--ink)}
.steps-nav{display:flex;gap:7px;padding:16px 24px 0;flex-wrap:wrap}
.steps-nav .sn{font-size:11.5px;color:var(--dim2);padding:6px 12px;border-radius:22px;background:var(--pane2);
  border:1px solid var(--line)}
.steps-nav .sn.a{background:var(--grad);color:var(--accent-ink);border-color:transparent;font-weight:600}
.modal-body{padding:20px 24px}
.modal-body .step{display:flex;flex-direction:column;gap:14px}
.modal-body label{display:flex;flex-direction:column;gap:7px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2);font-weight:600}
.modal-body label.chk,.modal-body label.time{flex-direction:row;align-items:center;gap:9px;color:var(--muted);
  font-size:13.5px;flex-wrap:wrap;letter-spacing:0;text-transform:none;font-weight:400}
.modal-body input[type=text],.modal-body input:not([type]),.modal-body input[name],
.modal-body select,.modal-body textarea{padding:12px 15px;border:1px solid var(--line);border-radius:13px;
  font-size:13.5px;font-family:var(--fb);background:var(--pane2);color:var(--ink)}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{outline:none;border-color:var(--line2)}
.chain-row{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;
  padding:12px;background:var(--pane2)}
.chain-row .cr-text{flex:1;resize:vertical}
.cr-side{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--dim2)}
.cr-side input{width:82px}
.btn-ghost{background:var(--pane2);color:var(--ink);border:1px solid var(--line2);border-radius:13px;
  padding:11px 17px;cursor:pointer;font-size:13.5px;box-shadow:none;font-weight:400}
.btn-ghost:hover{background:var(--pane3);filter:none}
.small{font-size:12px}
.modal-foot{display:flex;justify-content:flex-end;gap:11px;padding:18px 24px;border-top:1px solid var(--line)}
.range{display:flex;align-items:center;gap:9px}
.range input{width:100px}

/* ── ИИ-ПРОДАВЕЦ ────────────────────────────────────── */
.ai-form{display:flex;flex-direction:column;gap:16px}
.ai-form label{display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim2);font-weight:600}
.ai-form label.chk,.ai-form label.time{flex-direction:row;align-items:center;gap:9px;color:var(--muted);
  font-size:13.5px;flex-wrap:wrap;letter-spacing:0;text-transform:none;font-weight:400}
.ai-form input,.ai-form select,.ai-form textarea{padding:13px 16px;border:1px solid var(--line);
  border-radius:14px;font-size:13.5px;font-family:var(--fb);background:var(--pane2);color:var(--ink);line-height:1.6}
.ai-form input:focus,.ai-form select:focus,.ai-form textarea:focus{outline:none;border-color:var(--line2)}
.ai-form textarea{resize:vertical;min-height:92px}
.ai-row{display:flex;gap:16px;flex-wrap:wrap}
.ai-row label{flex:1;min-width:180px}
.preset{font-size:11.5px;color:var(--dim2);padding:7px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--pane2)}
.test-log{display:flex;flex-direction:column;gap:11px;min-height:240px;max-height:52vh;overflow:auto;padding:4px}
.tmsg{padding:12px 16px;border-radius:17px;font-size:13.5px;max-width:85%;white-space:pre-wrap;line-height:1.6}
.tmsg.tu{align-self:flex-end;background:var(--grad);color:var(--accent-ink);border-bottom-right-radius:6px}
.tmsg.ta{align-self:flex-start;background:var(--pane2);color:var(--ink);border:1px solid var(--line);
  border-bottom-left-radius:6px}
.test-foot{gap:10px;display:flex}
.test-foot input{flex:1;padding:13px 16px;border:1px solid var(--line);border-radius:14px;font-size:13.5px;
  background:var(--pane2);color:var(--ink);font-family:var(--fb)}
.test-foot input:focus{outline:none;border-color:var(--line2)}
.acc-picker{margin-bottom:18px}
.acc-picker label{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--muted)}
.acc-picker select{padding:11px 15px;border:1px solid var(--line);border-radius:13px;font-size:13.5px;
  min-width:260px;background:var(--pane2);color:var(--ink);font-family:var(--fb)}

/* ── АККОРДЕОН ──────────────────────────────────────── */
.acc-acc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.acc-acc>summary{list-style:none;cursor:pointer;padding:19px 24px;display:flex;justify-content:space-between;
  align-items:center;transition:.3s}
.acc-acc>summary:hover{background:var(--pane2)}
.acc-acc>summary::-webkit-details-marker{display:none}
.acc-acc>summary::after{content:"⌄";color:var(--dim2);font-size:17px}
.acc-acc[open]>summary::after{content:"⌃"}
.acc-acc[open]>summary{border-bottom:1px solid var(--line)}
.sum-left{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.acc-name{font-weight:600;font-size:16px;letter-spacing:-.01em}
.acc-meta{color:var(--dim2);font-size:12.5px}
.acc-body{padding:6px 24px 22px}
.page-actions{margin-bottom:16px}
.ai-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ds-balance{color:var(--dim2);font-size:12.5px}
.ds-balance b{color:var(--a2);font-family:var(--fn)}
.items-actions{display:flex;gap:11px;align-items:center;margin:10px 0;flex-wrap:wrap}
.qual-head{font-size:15px;color:var(--ink);font-weight:600;margin-top:8px;letter-spacing:-.01em}
.qual-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);font-weight:600;margin-top:14px}
.qlist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.qrow{display:flex;gap:8px;align-items:center}
.qrow input{flex:1}
.qrow .x{cursor:pointer;color:var(--dim2);padding:0 8px;font-size:17px;line-height:1;user-select:none}
.qrow .x:hover{color:var(--bad)}
.branch{border:1px solid var(--line);border-radius:14px;padding:12px;margin:10px 0;background:var(--pane2)}
.branch .bhead{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.branch .bname{flex:1;font-weight:600}
.items-list{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--pane2)}
.item-head,.item-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:12.5px;margin:0}
.item-head{position:sticky;top:0;background:var(--pane3);color:var(--dim2);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;z-index:1}
.item-head>span:first-child{flex:none;width:16px}
.item-head .i-title{color:var(--dim2)}
.item-row:last-child{border-bottom:none}
.item-row:hover{background:var(--pane3)}
.item-row input[type=checkbox]{flex:none;width:16px;margin:0;accent-color:var(--accent)}
.i-id{flex:none;width:112px;color:var(--dim2);font-family:var(--fn);font-variant-numeric:tabular-nums}
.i-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--a2);text-decoration:none}
a.i-title:hover{text-decoration:underline}
.i-st{flex:none;width:80px;text-align:center;font-size:11px}
.pause-wrap{display:flex;gap:7px;align-items:center}
.pause-wrap .cr-delay{width:66px}
.pause-wrap .cr-unit{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--pane2);color:var(--ink)}
.dayrows{display:flex;flex-direction:column;gap:9px}
.dayrow{display:flex;align-items:center;gap:16px;min-height:34px}
.dayrow .dlabel{flex-direction:row;align-items:center;gap:7px;min-width:66px;color:var(--muted);font-size:13.5px;
  letter-spacing:0;text-transform:none;font-weight:400}
.day-times{display:flex;align-items:center;gap:7px;color:var(--dim2);font-size:12.5px}
.day-times input{padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--pane2);
  color:var(--ink);font-family:var(--fn)}
input[type=checkbox]{accent-color:var(--accent)}

/* ── СООБЩЕНИЯ ──────────────────────────────────────── */
.flash{padding:14px 18px;border-radius:14px;margin-bottom:16px;font-size:13.5px;border:1px solid}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.flash.error{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}

/* ── ВХОД ───────────────────────────────────────────── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;z-index:1}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);
  padding:38px;display:flex;flex-direction:column;gap:16px;width:340px}
.login-card input{padding:13px 16px;border:1px solid var(--line);border-radius:14px;font-size:14px;
  background:var(--pane2);color:var(--ink);font-family:var(--fb)}
.login-card input:focus{outline:none;border-color:var(--line2)}
.login-card .error{background:var(--bad-bg);color:var(--bad);padding:12px;border-radius:12px;font-size:13px;
  border:1px solid var(--bad-line)}

/* ── ПЕРЕПИСКИ ──────────────────────────────────────── */
#ai-hist-dialogs{max-height:540px;overflow-y:auto;margin-top:8px}
.dlg-card{background:var(--pane2);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:12px 0}
.dlg-card.junk{border-left:3px solid var(--warn);background:var(--warn-bg)}
.dlg-meta{font-size:11.5px;color:var(--dim2);margin-bottom:8px}
.dlg-meta a{color:var(--a2);text-decoration:none}
.dlg-tag{display:inline-block;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);
  border-radius:7px;padding:2px 9px;font-size:10.5px;margin-left:7px}
.dlg-who{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);margin:6px 2px -1px}
.dlg-time{opacity:.8}
.dlg-who.manager{text-align:right}
.dlg-msg{max-width:80%;padding:10px 14px;border-radius:15px;margin:4px 0;font-size:13.5px;line-height:1.6;
  white-space:pre-wrap;word-wrap:break-word}
.dlg-msg.client{background:var(--pane3);border:1px solid var(--line);border-bottom-left-radius:5px;margin-right:auto}
.dlg-msg.manager{background:var(--acc-bg);border:1px solid var(--a2-line);color:var(--a2-ink);
  border-bottom-right-radius:5px;margin-left:auto}

/* ── КОНТРОЛЬ ───────────────────────────────────────── */
.ph-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* действия страницы - справа от заголовка, как в макете */
.ph-acts{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--dim2)}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 12px var(--ok);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.watch{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-bottom:20px}
.watch .wl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);font-weight:600}
.wacc{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink)}
.wacc.off{color:var(--dim2)}
.stat-strip{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
/* Показатель как в макете: сначала подпись мелким, под ней крупная цифра.
   Порядок переворачивает CSS - в разметке значение идёт первым, так его
   читает скринридер и так удобнее в шаблонах. */
.stat{flex:1;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 22px 20px;display:flex;flex-direction:column-reverse}
.stat .n{font-family:var(--fn);font-variant-numeric:tabular-nums;font-size:32px;font-weight:400;line-height:1;
  letter-spacing:-.025em;display:flex;align-items:center;gap:10px}
.stat .l{color:var(--dim2);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;margin:0 0 11px}
.sig{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;background:var(--pane3)}
.sig.red{background:var(--bad);box-shadow:0 0 14px var(--bad-line)}
.sig.yellow{background:var(--warn)}
.sig.amber{background:var(--a2)}
.sig.green{background:var(--ok)}
.filters{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.filt{font-size:12.5px;padding:9px 16px;border-radius:22px;background:var(--card);border:1px solid var(--line);
  color:var(--muted);cursor:pointer;transition:.3s;box-shadow:none;font-weight:400;text-decoration:none}
.filt:hover{color:var(--ink);border-color:var(--line2);filter:none}
.filt.active{background:var(--grad);color:var(--accent-ink);border-color:transparent;font-weight:600}
.ctrl-list{display:flex;flex-direction:column;gap:11px}
.crow{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);padding:18px 22px;cursor:pointer;transition:.3s;
  position:relative;overflow:hidden}
.crow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line2)}
.crow:hover{transform:translateY(-2px);border-color:var(--line2)}
.crow[data-sev=red]::before{background:var(--bad);box-shadow:0 0 20px var(--bad)}
.crow[data-sev=yellow]::before{background:var(--warn)}
.crow[data-sev=amber]::before{background:var(--a2)}
.cmain{flex:1;min-width:0}
.cname{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cprev{color:var(--muted);font-size:12.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}
.kchip{display:inline-block;font-size:11px;padding:3px 11px;border-radius:22px;white-space:nowrap;
  font-weight:600;border:1px solid}
.kchip.red{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.kchip.yellow{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.kchip.amber{background:var(--acc-bg);color:var(--a2);border-color:var(--a2-line)}
.cside{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.cacc{color:var(--dim2);font-size:11.5px}
.cwhen{color:var(--dim2);font-size:11px;opacity:.85;white-space:nowrap;font-family:var(--fn)}
.mwhen{color:var(--dim2);font-weight:400;font-size:13px}
.ctx{background:var(--pane2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  font-size:13.5px;margin-bottom:16px;color:var(--muted)}
.ctx b{color:var(--ink)}
.dlg-msg.flagbot{background:var(--bad-bg);border:1px solid var(--bad-line);border-bottom-right-radius:5px;
  margin-left:auto;color:var(--bad-ink)}
.act-row{display:flex;gap:9px;flex-wrap:wrap}
.act{font-size:12.5px;padding:10px 15px;border-radius:12px;cursor:pointer;border:1px solid var(--line2);
  background:var(--pane2);color:var(--ink);box-shadow:none;font-weight:400}
.act:hover{background:var(--pane3);filter:none}
.act.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.act.primary{background:var(--grad);border-color:transparent;color:var(--accent-ink);font-weight:600}
.ctrl-empty{color:var(--dim2);padding:30px;text-align:center;background:var(--card);border:1px dashed var(--line);
  border-radius:var(--radius)}
.ctrl-off{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);padding:14px 18px;
  border-radius:14px;margin-bottom:18px;font-size:13.5px}

/* ── ВОРОНКА ────────────────────────────────────────── */
.fsec{margin-bottom:28px}
.fsec-head{display:flex;align-items:center;gap:11px;margin:0 0 12px}
.fsec-head .ic{width:22px;text-align:center}
.fsec-head .tt{font-size:16px;font-weight:600;letter-spacing:-.01em}
.fsec-head .cnt{font-family:var(--fn);font-size:11.5px;color:var(--dim2);background:var(--pane2);
  border:1px solid var(--line);border-radius:22px;padding:3px 11px}
.fsec-head .sub{color:var(--dim2);font-size:11.5px;margin-left:auto}
.crow[data-cat=lead]::before{background:var(--ok);box-shadow:0 0 18px var(--ok-line)}
.crow[data-cat=going]::before{background:var(--a2)}
.crow[data-cat=silent]::before{background:var(--warn)}
.crow[data-cat=junk]::before{background:var(--dim2)}
.kchip.lead{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.kchip.going{background:var(--acc-bg);color:var(--a2);border-color:var(--a2-line)}
.kchip.silent{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.kchip.junk{background:var(--pane2);color:var(--dim2);border-color:var(--line)}
.kchip.dir{background:var(--pane3);color:var(--muted-deep);border-color:var(--line)}
/* точка-статус вместо эмодзи: цвета те же, что у полоски карточки */
.fdot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  vertical-align:middle;position:relative;top:-1px;margin-right:8px;background:var(--dim2)}
.fdot.lead{background:var(--ok);box-shadow:0 0 0 3px var(--ok-line)}
.fdot.going{background:var(--a2);box-shadow:0 0 0 3px var(--a2-line)}
.fdot.silent{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
.fdot.junk{background:var(--dim2);box-shadow:0 0 0 3px var(--pane3)}
.stat .n .fdot{width:9px;height:9px;margin-right:11px;top:-4px}
.fsec-head .ic .fdot{margin-right:0}
.filt.active .fdot{box-shadow:none}
.clink{display:inline-block;font-size:11.5px;padding:6px 12px;border-radius:11px;border:1px solid var(--line2);
  background:var(--pane2);color:var(--a2);text-decoration:none;cursor:pointer;transition:.3s}
.clink:hover{background:var(--pane3)}
.clink.off{border-color:var(--line);background:transparent;color:var(--dim2);cursor:default}
.fnote{background:var(--pane2);border:1px solid var(--line);border-left:3px solid var(--a2);color:var(--muted);
  padding:14px 18px;border-radius:0 14px 14px 0;font-size:13.5px;margin-bottom:20px}
.fnote b{color:var(--ink);font-family:var(--fn)}

/* ── АДАПТИВ ────────────────────────────────────────── */
@media(max-width:900px){
  .layout{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);padding:14px 16px}
  .brand{border:none;margin:0;padding:0 14px 0 0}
  .nav{flex-direction:row;flex-wrap:wrap;flex:1}
  .logout{border:none;margin:0}
  .content{padding:26px 18px 60px}
}

/* ── ГРУППЫ В МЕНЮ ──────────────────────────────────── */
.nav-group{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);
  padding:16px 13px 7px;font-weight:600}
.nav-item .ic{width:16px;flex:0 0 auto;opacity:.7;display:grid;place-items:center}
.nav-item.active .ic{opacity:1;color:var(--a2)}
.nav-item .cnt{margin-left:auto;font-family:var(--fn);font-size:11px;color:var(--dim2)}
.nav-item.active .cnt{color:var(--a2)}
.brand-box{display:flex;align-items:center;gap:12px;padding:0 8px 22px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.brand-box .mark{width:50px;height:50px;flex:0 0 auto;display:grid;place-items:center;position:relative}
.brand-box .mark img{width:100%;height:100%;object-fit:contain;display:block;grid-area:1/1}
.brand-box .mark .lt{display:none}
:root[data-theme="light"] .brand-box .mark .dk{display:none}
:root[data-theme="light"] .brand-box .mark .lt{display:block}
.brand-box .mark b{position:relative;color:var(--accent-ink);font-size:19px;font-weight:600}
.brand-box .nm{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.brand-box .sub{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2);margin-top:5px}
.side-acc{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.side-acc .row{display:flex;align-items:center;gap:11px;padding:11px;border-radius:14px;background:var(--pane2);
  border:1px solid var(--line)}
.side-acc .av{width:30px;height:30px;border-radius:10px;background:var(--pane3);border:1px solid var(--line2);
  display:grid;place-items:center;font-size:11px;color:var(--a2-deep);flex:0 0 auto;font-family:var(--fn)}
.side-acc .t{font-size:12.5px;font-weight:500;line-height:1.25}
.side-acc .s{font-size:10px;color:var(--dim2)}
.side-acc .out{display:block;text-align:center;color:var(--dim2);font-size:12px;text-decoration:none;padding:11px 0 2px}
.side-acc .out:hover{color:var(--a2)}

/* знак аккаунта в списке */
.acc-av{width:44px;height:44px;flex:0 0 auto;border-radius:14px;background:var(--pane3);
  border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--fn);
  font-size:14px;font-weight:500;color:var(--a2-deep);letter-spacing:.02em}
.account-card:hover .acc-av{background:var(--grad);color:var(--accent-ink);border-color:transparent}
.account-card{transition:.3s}
.account-card:hover{border-color:var(--line2)}

/* Аккаунты: список — главное, форма подключения — сбоку */
.acc-grid{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start}
.acc-grid .add-form{order:2;max-width:none;position:sticky;top:38px;margin:0}
.acc-grid .accounts-list{order:1}
.add-form button{align-self:flex-start;padding:12px 26px}
@media(max-width:1100px){
  .acc-grid{grid-template-columns:1fr}
  .acc-grid .add-form{order:1;position:static}
}

/* второстепенные кнопки не должны спорить с главным действием */
.btn-small{background:var(--pane3);color:var(--ink);border:1px solid var(--line2);
  box-shadow:none;font-weight:500}
.btn-small:hover{background:var(--line2);filter:none}
.account-card{align-items:flex-start}
.account-side{padding-top:2px}

/* пустые состояния: не строчка в пустоте, а карточка */
.empty{padding:44px 30px;font-size:14px;line-height:1.6;max-width:620px;margin-top:6px}

/* ── ЗАЩИТА ОТ БЕЛЫХ ПОЛЕЙ ──────────────────────────────
   в светлой теме фон полей не задавали — браузер рисовал их белыми.
   Общее правило: любое поле по умолчанию тёмное. */
input,select,textarea{background:var(--pane2);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;font-family:var(--fb)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--line2)}
input::placeholder,textarea::placeholder{color:var(--dim2)}
input[type=checkbox],input[type=radio]{border:none}
select option{background:var(--pane2);color:var(--ink)}

/* тумблеры — это состояние «включено», а не действие: мятный, не огненный */
.dot.on{background:var(--ok);border-color:transparent}
.dot.on::after{background:var(--ok-ink)}

/* ── ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ─────────────────────────────── */
.theme-sw{display:flex;gap:4px;padding:4px;margin-bottom:10px;background:var(--pane2);
  border:1px solid var(--line);border-radius:13px}
.theme-sw .th{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 6px;border-radius:10px;border:1px solid transparent;background:none;
  color:var(--dim2);font-family:var(--fb);font-size:12px;font-weight:500;
  cursor:pointer;box-shadow:none;transition:.25s}
.theme-sw .th:hover{color:var(--ink);filter:none}
/* выбранная тема - состояние, а не действие: подсвечиваем панелью, а не огнём */
.theme-sw .th.on{background:var(--card);border-color:var(--line2);color:var(--ink);
  box-shadow:0 1px 0 var(--hi)}
.theme-sw .th svg{flex:0 0 auto;opacity:.8}
.theme-sw .th.on svg{opacity:1;color:var(--a2)}

/* ═══ РАЗДЕЛ «АВТООТВЕТ» ═══════════════════════════════════════
   Утверждён 26.08.2026. Главное на экране - САМ ТЕКСТ автоответа:
   раньше строка говорила «2 сообщения», и человек не видел, что уйдёт
   клиенту. Цвета только из токенов - иначе светлая тема сломается молча. */
.stat.ok .n{color:var(--ok)}
.stat.warn .n{color:var(--warn)}
.stat.bad .n{color:var(--bad)}
.sig.ok{background:var(--ok);box-shadow:0 0 12px var(--ok-line)}

.ar-acc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;scroll-margin-top:20px}
.ar-acc.hl{border-color:var(--a2-line)}
/* Карточка складывается: на четырёх аккаунтах с полными текстами экран
   иначе превращается в простыню. <details> - чтобы работало и без JS. */
.ar-acc>summary{list-style:none;cursor:pointer}
.ar-acc>summary::-webkit-details-marker{display:none}
.ar-acc>summary::marker{content:""}
.ar-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ar-acc[open]>.ar-head{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ar-head>div{flex:1;min-width:0}
.ar-chevbox{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;
  border-radius:8px;color:var(--dim2);transition:.25s}
.ar-acc>summary:hover .ar-chevbox{background:var(--pane2);color:var(--ink)}
.ar-chev{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.ar-acc[open] .ar-chev{transform:rotate(180deg)}
.ar-title{display:flex;align-items:center;gap:10px}
.ar-title b{font-size:17px;font-weight:500}

.ar-al{display:flex;gap:9px;align-items:flex-start;border-radius:12px;padding:9px 13px;font-size:13px;
  margin-bottom:7px;border:1px solid}
.ar-al .i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-top:8px}
.ar-al.bad{background:var(--bad-bg);border-color:var(--bad-line)}
.ar-al.bad .i{background:var(--bad)}
.ar-al.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.ar-al.warn .i{background:var(--warn)}
.ar-al.ok{background:var(--ok-bg);border-color:var(--ok-line)}
.ar-al.ok .i{background:var(--ok)}

.ar-list{display:flex;flex-direction:column;margin-top:16px}
.ar-row{padding:15px 2px;border-top:1px solid var(--line)}
.ar-row:first-child{border-top:0}
.ar-row.off{opacity:.55}
.ar-top{display:flex;align-items:center;gap:18px}
.ar-top form{margin:0}
.ar-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.ar-nm b{font-size:14.5px;font-weight:500}
.ar-when{width:250px;flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.ar-w{display:flex;flex-direction:column;gap:3px}
.ar-days .d{display:inline-block;font-family:var(--fn);font-size:9.5px;font-weight:600;letter-spacing:.03em;
  padding:2px 5px;border-radius:5px;background:var(--pane3);color:var(--muted-deep);margin-right:2px}
.ar-days .d.a{background:var(--acc-bg);color:var(--a2-deep)}
.ar-time{font-family:var(--fn);font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}

/* сам текст автоответа - ради него раздел и переделан */
.ar-msgs{margin:11px 0 0 62px}
.ar-mh{font-family:var(--fn);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
  font-weight:600;margin-bottom:4px}
.ar-mx{background:var(--pane2);border:1px solid var(--line);border-radius:13px 13px 13px 5px;
  padding:11px 15px;font-size:13.4px;line-height:1.6;color:var(--ink);max-width:760px;margin-bottom:9px}
.ar-mempty{font-size:13px;color:var(--bad)}

/* Штриховые иконки вместо эмодзи: эмодзи цветные, у каждой системы свои и в тёмной
   теме светятся. Контур берёт цвет кнопки, поэтому обе темы работают сами. */
.icon .ic-s{display:block;pointer-events:none}
.acts .icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;border:1px solid transparent;transition:.2s}
.acts .icon:hover{background:var(--pane2);border-color:var(--line);color:var(--a2)}
.acts .icon.danger:hover{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg)}
.lnk{background:none;border:0;box-shadow:none;color:var(--a2);font-family:var(--fb);font-size:13px;
  cursor:pointer;padding:0;text-decoration:underline}
.lnk:hover{filter:none;color:var(--accent)}

@media(max-width:1000px){
  .ar-top{flex-wrap:wrap}
  .ar-when{width:100%;margin-left:62px}
  .ar-msgs{margin-left:0}
}

/* ═══ МАСТЕР ИИ-ПРОДАВЦА: 10 шагов, точки сверху ═══════════════
   Утверждён 26.08.2026. Было 3 шага и 30 полей вповалку: шаг «Поведение»
   держал тон, конструктор сценария, лимиты, часы, модель, тексты и
   реактивацию в одном скролле. Теперь одна тема на шаг, и каждый шаг
   объясняет своими словами, что это и зачем. */
.wz-wide{width:780px}
.steps-nav.wz-dots{align-items:center;gap:9px;padding:18px 26px 0}
.wz-dots .sn{width:9px;height:9px;padding:0;border-radius:50%;background:var(--pane3);
  box-shadow:inset 0 0 0 1px var(--line);border:0;cursor:pointer;transition:.25s}
.wz-dots .sn.done{background:var(--ok);box-shadow:none}
.wz-dots .sn.a{background:var(--accent);width:26px;border-radius:5px;box-shadow:none}
.wz-dots .sn-l{margin-left:auto;font-family:var(--fn);font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--muted-deep)}

.wz-num{font-family:var(--fn);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a2);
  font-weight:600;margin-bottom:6px}
.wz-h h3{font-size:21px;font-weight:500;margin:0 0 8px;letter-spacing:-.02em}
.wz-why{color:var(--muted);font-size:14px;line-height:1.6;max-width:640px}
.wz-tip{margin:15px 0 20px;background:var(--pane2);border:1px solid var(--line);border-left:3px solid var(--a2);
  border-radius:11px;padding:11px 14px;color:var(--muted);font-size:13px}

/* первый шаг: что вообще будет происходить */
.wz-start{display:flex;flex-direction:column;margin-bottom:6px}
.wz-row{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.wz-row:first-child{border-top:0}
.wz-row>div{display:flex;flex-direction:column;gap:3px}
.wz-row b{font-size:14.5px;font-weight:500}
.wz-i{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--pane3);color:var(--a2-deep);
  font-family:var(--fn);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* последний шаг: что получилось */
.wz-done{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.wz-dn{display:flex;flex-direction:column;gap:2px;border-radius:11px;padding:11px 14px;border:1px solid}
.wz-dn b{font-size:14px;font-weight:500}
.wz-dn.ok{background:var(--ok-bg);border-color:var(--ok-line)}
.wz-dn.warn{background:var(--warn-bg);border-color:var(--warn-line)}
label.chk.wz-big{font-size:15px;background:var(--pane2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin:18px 0 8px}
.wz-test{padding:6px 0}

/* Имя сервиса: хвост «AI» огнём - в нём вся игра слов «выручай + AI».
   Утверждено 26.08.2026 (прежнее имя VIRAI). */
.brand-box .nm .ai{color:var(--a2)}

/* ═══ ИСТОЧНИКИ ЗНАНИЙ (шаг 4 мастера) ═════════════════════════
   Утверждено 26.08.2026, вариант «списком». Раньше на шаге лежали
   вперемешку поле для текста, три кнопки разбора и карта глубин -
   бурильная фича, которую видели все подряд. Теперь это строки
   источников: видно, что подключено, а панель открывается по клику. */
.sec-h2{font-family:var(--fn);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim2);
  font-weight:600;margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.srlist{display:flex;flex-direction:column}
.srl{display:grid;grid-template-columns:16px 1.15fr 1.5fr 1fr 118px;gap:14px;align-items:center;
  padding:11px 2px;border-top:1px solid var(--line);font-size:13.2px}
.srl.hd{border-top:0;font-family:var(--fn);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim2);font-weight:600;padding-bottom:8px}
.srl.off{opacity:.5}
.srl b{font-weight:500}
.srl .sm{font-size:12.5px;color:var(--muted)}
.srl button{white-space:nowrap}
.chip3{display:inline-flex;font-family:var(--fn);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a2-deep);background:var(--acc-bg);border:1px solid var(--a2-line);border-radius:6px;
  padding:2px 7px;margin-left:7px}
.src-body{display:none;background:var(--pane2);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;margin:4px 0 8px}
.src-body.on{display:block}
.src-body>label:first-child{margin-top:0}

/* «перенять манеру» на шаге «Как бот разговаривает» */
.learn{background:var(--pane2);border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.lr-h{margin-bottom:12px}
.lr-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.lr-row label{flex:1;min-width:210px}

/* ═══ КОНТРОЛЬ: ВЫВОДЫ СЛОВАМИ ══════════════════════════════════════
   Принято 26.08.2026. Раньше раздел вываливал простынёй все открытые
   косяки — в куче из 586 не видно, что 96 из них одна и та же беда.
   Сверху сервис говорит словами, что не так, и даёт действие. */
.ch-label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin:22px 0 9px}
.verdicts{display:flex;flex-direction:column;gap:9px}
.verdict{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.verdict .sig{margin-top:7px;flex:0 0 auto}
.vtext{font-size:14.5px;line-height:1.55}
.vtext b{font-weight:600}
.vacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vbtn{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:11px;
  padding:6px 12px;font:12.5px inherit;cursor:pointer;box-shadow:none}
.vbtn:hover{border-color:var(--a2);color:var(--a2)}
.list-note{font-size:12.5px;color:var(--dim2);margin:0 0 10px}

/* ═══ ВОРОНКА: доля исхода в плашке ═════════════════════════════════
   Принято 26.08.2026. Формат раздела прежний, добавлена полоска доли:
   по голым числам не видно, что «замолчали» — самый жирный кусок воронки. */
.stat .fillbar{height:5px;border-radius:99px;background:var(--pane3);margin-bottom:7px;overflow:hidden}
.stat .fillbar span{display:block;height:100%;border-radius:99px;background:var(--grad)}
.stat .fillbar.silent span{background:var(--a2-deep,var(--a2));opacity:.75}
.stat .fillbar.junk span{background:var(--line2);opacity:.9}
.stat .fillbar.going span{background:var(--a2);opacity:.85}
.stat .fshare{font-size:11px;color:var(--dim2);letter-spacing:.02em}
.stat .n{margin-bottom:9px}

/* ═══ АККАУНТЫ: рубильник и кликабельные плашки ═════════════════════
   27.08. Выключенный аккаунт не работает нигде — рубильник должен быть
   виден рядом со статусом вебхука. Тревоги и подсистемы теперь ссылки:
   клик ведёт в раздел, где это чинят, а не «иди ищи сам». */
.sw-form{display:inline-flex;margin:0}
/* box-shadow снимаем осознанно: общий стиль button вешает оранжевый ореол,
   он тут лишний - это тихие второстепенные кнопки, а не главное действие */
.acc-sw{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;
  font:12px var(--fs,inherit);cursor:pointer;border:1px solid var(--line);background:var(--pane2);
  color:var(--muted);box-shadow:none}
.acc-sw .dot{width:7px;height:7px;border-radius:50%;background:var(--dim2);border:0;position:static;flex:0 0 auto}
/* у общего .dot (тумблеры) есть ::after-шарик на 17px — здесь он лишний и лез серым пятном */
.acc-sw .dot::after{content:none}
.acc-sw.on{color:var(--ok);border-color:var(--ok-line,var(--line))}
.acc-sw.on .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.acc-sw.off{color:var(--bad);border-color:var(--bad-line,var(--line))}
.acc-sw.off .dot{background:var(--bad)}
.acc-sw:hover{border-color:var(--a2);color:var(--a2)}
a.al1.go{display:block;text-decoration:none;cursor:pointer}
a.al1.go:hover{filter:brightness(1.12)}
a.al1.go::after{content:" →";opacity:.55}
a.mp-s{text-decoration:none;color:inherit}
a.mp-s:hover{border-color:var(--a2)}