/* AutoGram · «Телеграм-ночь»: токены, база и общие компоненты кабинета.
   Каталог компонентов: AI_FRONTIER/autogram-ui/stil/tg-night-components.md
   Порядок в base.j2: fonts.css → встроенный <style> каркаса → ЭТОТ ФАЙЛ → {% block styles %} страницы →
   shell-ui.css → theme.css → i18n.css. Страница грузится после: её правило той же специфичности побеждает компонент.
   Тёмная тема — :root, светлая — [data-theme="light"] на <html>.
   Правила для элементов (body, a, input, table…) и старые обёртки (.field-row, .actions) обёрнуты в :where() —
   у них нулевая специфичность. Классы компонентов (.btn, .card…) — обычной специфичности. */

/* ============================== 1. Токены ============================== */
:root{
  /* поверхности: ночная синева, не чёрный */
  --bg:#0E151E;
  --surface:#151F2A;
  --surface-2:#1C2836;
  --surface-3:#223142;
  --line:#283747;
  --line-2:#34475A;
  --field-line:#5B6F85;
  --chip-on:#223142;
  --seg-on:#223142;
  --toast-bg:#223142;
  --text:#E6EDF4;
  --text-2:#97A8BA;
  --text-dis:#5E6F81;
  /* единственный акцент — телеграм-голубой */
  --accent:#2773BB;
  --accent-hover:#2369AB;
  --on-accent:#FFFFFF;
  --accent-text:#6DB7F4;
  --accent-soft:#213446;
  --focus:#6DB7F4;
  --focus-ring:rgba(109,183,244,.26);
  /* пузыри и выбор */
  --bubble-in:#1A2633;
  --bubble-in-line:#1A2633;
  --bubble-out:#22446A;
  --bubble-out-line:#22446A;
  --on-out-2:#A9C4DF;
  --bubble-shadow:none;
  --sel:#22446A;
  --on-sel-2:#B0C7DD;
  --badge-sel-bg:#E6EDF4;
  --badge-sel-fg:#22446A;
  /* шкала этапов: холодно → тепло → сделка; отказ нейтрален */
  --st-fresh:#8A9DB2;   --st-fresh-soft:#27323E;
  --st-dialog:#9CC0E2;  --st-dialog-soft:#293746;
  --st-warm:#F2A774;    --st-warm-soft:#3A2C26;
  --st-deal:#6CC583;    --st-deal-soft:#1F3A2A;
  --st-refuse:#8E99A5;  --st-refuse-soft:#1C2836;
  --st-empty:#4A5F75;
  /* смысловые */
  --success:#6CC583; --success-soft:#1F3A2A;
  --warning:#E3B661; --warning-soft:#3A3324;
  --error:#E3918A;   --error-soft:#3A2A2E; --error-line:#5C3B3F;
  --info:#52C2B0;    --info-soft:#1F3A37;
  /* аватары */
  --av-1:#2F4E6C; --av-2:#2C5558; --av-3:#5A4536; --av-4:#45503A; --av-5:#3F4855;
  --av-hi:rgba(255,255,255,.08);
  --clear:rgba(0,0,0,0);
  /* тени по ролям: только всплывающее */
  --shadow-pop:0 18px 44px rgba(2,6,12,.55),0 2px 8px rgba(2,6,12,.35);
  --shadow-frame:0 30px 70px rgba(2,6,12,.42);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.035);
  /* шрифты и формы */
  --font-ui:"Golos Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-bubble:14px; --r-tail:4px; --r-card:12px; --r-btn:10px; --r-tag:7px; --r-frame:16px; --r-pill:999px;
  /* раскладка */
  --tab-h:58px;
  /* нижний отступ прокручиваемой main.container (shell-ui.css, base.j2): на него липкая .action-bar сдвигается вниз */
  --main-pad-bottom:18px;
  /* подложка QR-кода: всегда светлая, иначе телефон не прочитает код в тёмной теме */
  --qr-paper:#FFFFFF;

  /* псевдонимы старых токенов: недоделанные места не разваливаются */
  --txt:var(--text);
  --muted:var(--text-2);
  --card:var(--surface);
  --panel:var(--surface);
  --bg-2:var(--surface);
  --glass:var(--surface-2);
  --border:var(--line);
  --grad1:var(--accent);
  --grad2:var(--accent);
  --shadow:none;
  --radius:var(--r-card);

  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#E8EDF2;
  --surface:#FFFFFF;
  --surface-2:#F1F4F8;
  --surface-3:#E6ECF2;
  --line:#D6DEE7;
  --line-2:#C3CFDB;
  --field-line:#8494A4;
  --chip-on:#DCE5EE;
  --seg-on:#FFFFFF;
  --toast-bg:#FFFFFF;
  --text:#101922;
  --text-2:#51606F;
  --text-dis:#9AA6B2;
  --accent:#1F76C2;
  --accent-hover:#1B69AD;
  --on-accent:#FFFFFF;
  --accent-text:#1A6AAE;
  --accent-soft:#E3EEF9;
  --focus:#1F76C2;
  --focus-ring:rgba(31,118,194,.22);
  --bubble-in:#FFFFFF;
  --bubble-in-line:#DCE3EA;
  --bubble-out:#D6E8FA;
  --bubble-out-line:#C4DCF3;
  --on-out-2:#46607A;
  --bubble-shadow:0 1px 1px rgba(16,25,34,.06);
  --sel:#D6E8FA;
  --on-sel-2:#46607A;
  --badge-sel-bg:#1F76C2;
  --badge-sel-fg:#FFFFFF;
  --st-fresh:#56697C;   --st-fresh-soft:#EBEEF1;
  --st-dialog:#346A99;  --st-dialog-soft:#E5EDF5;
  --st-warm:#A34C17;    --st-warm-soft:#FBE3D2;
  --st-deal:#22733C;    --st-deal-soft:#DBEDDF;
  --st-refuse:#5F6A75;  --st-refuse-soft:#F1F4F8;
  --st-empty:#A3B1BF;
  --success:#22733C; --success-soft:#DBEDDF;
  --warning:#8C5C08; --warning-soft:#F6EAD3;
  --error:#AE463E;   --error-soft:#F7E6E4; --error-line:#E6BDB8;
  --info:#13756A;    --info-soft:#DBEFEC;
  --av-1:#D3E3F2; --av-2:#CFE6E3; --av-3:#F1DFD0; --av-4:#DFE7CF; --av-5:#E0E5EA;
  --av-hi:rgba(255,255,255,.45);
  --shadow-pop:0 14px 36px rgba(16,25,34,.14),0 2px 6px rgba(16,25,34,.08);
  --shadow-frame:0 24px 60px rgba(16,25,34,.10),0 2px 6px rgba(16,25,34,.04);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.6);
  color-scheme:light;
}

/* ============================== 2. База ============================== */
:where(html){-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:where(*){scrollbar-width:thin;scrollbar-color:var(--line-2) var(--clear)}
:where(h1,h2,h3,h4,h5,h6){font-weight:600;line-height:1.25;letter-spacing:-.01em}
:where(button,input,select,textarea,optgroup){font-family:inherit;letter-spacing:inherit}
:where(button,input,select,textarea){font-size:inherit}
:where(code,kbd,samp,pre){font-family:var(--font-mono);font-size:.93em}
:where(hr){border:0;border-top:1px solid var(--line);margin:16px 0}
:where(img,video){max-width:100%}
:where(a){color:var(--accent-text);text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
:where(a:hover){text-decoration-color:currentColor}
:where(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--sel);color:var(--text)}
/* атрибут hidden прячет всегда: компоненты задают display и иначе перебили бы браузерное [hidden]{display:none}.
   Кроме hidden="until-found": такой блок браузер прячет сам (content-visibility) и открывает, когда поиск по странице
   находит в нём текст (пункты «Разделов», sections.js). Без полей и рамки, чтобы не оставалась пустая карточка. */
[hidden]:not([hidden="until-found"]){display:none!important}
[hidden="until-found"]{padding:0!important;border:0!important;margin:0!important;box-shadow:none!important;min-height:0!important}

/* поля ввода: оформление для всех текстовых полей, select и textarea */
:where(input:not([type]),input[type="text"],input[type="password"],input[type="number"],input[type="url"],input[type="email"],input[type="tel"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select){
  min-height:40px;
  padding:9px 12px;
  border:1px solid var(--field-line);
  border-radius:var(--r-btn);
  background-color:var(--surface-2);
  color:var(--text);
  font-size:15px;
  line-height:21px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
:where(input:not([type]),input[type="text"],input[type="password"],input[type="number"],input[type="url"],input[type="email"],input[type="tel"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):hover{border-color:var(--text-2)}
:where(input:not([type]),input[type="text"],input[type="password"],input[type="number"],input[type="url"],input[type="email"],input[type="tel"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,select):focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring)}
:where(input,textarea)::placeholder{color:var(--text-2);opacity:1}
:where(input,textarea,select):disabled{background-color:var(--surface);border-color:var(--line);color:var(--text-dis);cursor:not-allowed}
:where(input,textarea,select)[aria-invalid="true"]{border-color:var(--error)}
:where(textarea){display:block;min-height:92px;line-height:23px}
:where(select){cursor:pointer}
:where(select option){background:var(--surface);color:var(--text)}
:where(input[type="checkbox"],input[type="radio"],input[type="range"],progress){accent-color:var(--accent)}
:where(label){cursor:default}
:where(fieldset){margin:0;padding:0;border:0;min-width:0}
:where(legend){padding:0;font-weight:500}

/* таблицы */
:where(table){border-collapse:collapse;width:100%;min-width:720px}
:where(th,td){padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
:where(thead th){position:sticky;top:0;z-index:1;background:var(--surface-2);color:var(--text-2);font-size:14px;font-weight:500}
:where(tbody tr){transition:background-color .15s}
:where(tbody tr:hover){background:var(--surface-2)}

/* модальное окно <dialog> */
:where(dialog){color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-pop)}
:where(dialog)::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent)}

/* ============================== 3. Утилиты ============================== */
.ic{width:16px;height:16px;flex:none;stroke-width:1.75;vertical-align:-.2em}
.ic--sm{width:14px;height:14px}
.ic--lg{width:20px;height:20px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.eyebrow{font-family:var(--font-mono);font-size:13px;line-height:17px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
:where(.field-row,.actions){display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* знак «силы сигнала» (эталон B): <svg class="logo-mark" viewBox="0 0 32 32"><path class="lm-tile" …/><rect class="lm-bar" …/>×4</svg> */
.logo-mark{display:block;flex:none;width:28px;height:28px}
.logo-mark .lm-tile{fill:var(--accent)}
.logo-mark .lm-bar{fill:var(--on-accent)}

/* ============================== 4. Кнопки ============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:8px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:15px;font-weight:500;line-height:1.25;
  text-align:center;text-decoration:none;
  cursor:pointer;box-shadow:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--surface-3);border-color:var(--text-2);color:var(--text)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px var(--focus-ring)}
.btn .ic{width:16px;height:16px}
/* .secondary и .outline — то же контурное оформление, что у .btn без модификатора */
.btn.secondary,.btn.outline{background:var(--surface-2);border-color:var(--line-2);color:var(--text)}
.btn.secondary:hover,.btn.outline:hover{background:var(--surface-3);border-color:var(--text-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--inset-hi)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn.ghost{background:var(--clear);border-color:var(--clear);color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--clear);color:var(--text)}
.btn.danger{background:var(--error-soft);border-color:var(--error-line);color:var(--error)}
.btn.danger:hover{background:var(--error-soft);border-color:var(--error);color:var(--error)}
.btn.ghost.danger{background:var(--clear);border-color:var(--clear);color:var(--error)}
.btn.ghost.danger:hover{background:var(--error-soft)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:15px}
.btn.icon{width:40px;min-width:40px;padding:0}
.btn.icon.sm{width:36px;min-width:36px}
.btn.icon .ic{width:18px;height:18px}
.btn.block{display:flex;width:100%}
.btn:disabled,.btn[aria-disabled="true"],.btn.disabled,
.btn.primary:disabled,.btn.primary[aria-disabled="true"],.btn.danger:disabled{
  background:var(--surface-2);border-color:var(--line);color:var(--text-dis);box-shadow:none;cursor:not-allowed;
}
a.btn[aria-disabled="true"]{pointer-events:none}

/* кнопка-ссылка внутри текста */
.link-btn{padding:0;border:0;background:var(--clear);color:var(--accent-text);font:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;cursor:pointer}
.link-btn:hover{text-decoration-color:var(--accent-text)}

/* ============================== 5. Чипы, этапы, статусы, счётчики ============================== */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  min-height:28px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--clear);color:var(--text-2);
  font-family:inherit;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px var(--focus-ring)}
.chip.is-active,.chip[aria-current]:not([aria-current="false"]),.chip[aria-pressed="true"]{
  background:var(--chip-on);border-color:var(--line-2);color:var(--text);font-weight:500;box-shadow:var(--inset-hi);
}
.chip .n{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--sc,var(--text-2));flex:none}
.chip .ic{width:14px;height:14px}

/* этап лида: столбики «силы сигнала» = температура */
.stage{
  --sc:var(--st-fresh);--sbg:var(--st-fresh-soft);
  display:inline-flex;align-items:center;gap:7px;
  height:24px;padding:0 9px 0 8px;border-radius:var(--r-tag);
  background:var(--sbg);color:var(--sc);
  font-size:14px;font-weight:500;line-height:1;white-space:nowrap;
}
.meter{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.meter i{display:block;width:3px;border-radius:1px;background:var(--st-empty)}
.meter i:nth-child(1){height:4px}
.meter i:nth-child(2){height:6px}
.meter i:nth-child(3){height:8.5px}
.meter i:nth-child(4){height:11px}
.stage--fresh{--sc:var(--st-fresh);--sbg:var(--st-fresh-soft)}
.stage--dialog{--sc:var(--st-dialog);--sbg:var(--st-dialog-soft)}
.stage--warm{--sc:var(--st-warm);--sbg:var(--st-warm-soft)}
.stage--deal{--sc:var(--st-deal);--sbg:var(--st-deal-soft)}
.stage--refuse{--sc:var(--st-refuse);--sbg:var(--st-refuse-soft)}
.stage--fresh .meter i:nth-child(-n+1),
.stage--dialog .meter i:nth-child(-n+2),
.stage--warm .meter i:nth-child(-n+3),
.stage--deal .meter i:nth-child(-n+4){background:var(--sc)}

/* статус: точка + текст (аккаунты, подключения, задачи) */
.status{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:21px;color:var(--text-2)}
.status--ok,.status--warn,.status--err,.status--info,.status--off{color:var(--text)}
.status--ok::before,.status--warn::before,.status--err::before,.status--info::before,.status--off::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--dot);
}
.status--ok{--dot:var(--success)}
.status--warn{--dot:var(--warning)}
.status--err{--dot:var(--error)}
.status--info{--dot:var(--info)}
.status--off{--dot:var(--clear)}
.status--off::before{border:1.5px solid var(--text-2)}

/* метка-«пилюля»: смысловая подложка (старый класс .pill, оформлен по эталону) */
.pill{
  --pc:var(--text-2);--pb:var(--clear);--pl:var(--line-2);
  display:inline-flex;align-items:center;gap:6px;
  min-height:26px;padding:3px 10px;border-radius:var(--r-tag);
  border:1px solid var(--pl);background:var(--pb);color:var(--pc);
  font-size:14px;font-weight:500;line-height:1.3;
}
.pill .ic{width:14px;height:14px}
.pill.ok,.pill.success{--pc:var(--success);--pb:var(--success-soft);--pl:var(--success-soft)}
.pill.warn,.pill.warning{--pc:var(--warning);--pb:var(--warning-soft);--pl:var(--warning-soft)}
.pill.err,.pill.error{--pc:var(--error);--pb:var(--error-soft);--pl:var(--error-soft)}
.pill.info{--pc:var(--info);--pb:var(--info-soft);--pl:var(--info-soft)}
.pill.accent{--pc:var(--accent-text);--pb:var(--accent-soft);--pl:var(--accent-soft)}
.pill.off{border-style:dashed}

/* счётчик */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  font-family:var(--font-mono);font-size:13px;font-weight:500;line-height:21px;font-variant-numeric:tabular-nums;
}
.badge:empty{display:none}
.badge--quiet{background:var(--surface-3);color:var(--text-2)}
.badge--warn{background:var(--warning-soft);color:var(--warning)}
/* счётчик на выбранной строке (фон --sel): .badge--sel или автоматически внутри выбранной строки */
.badge--sel,:is(.is-selected,[aria-selected="true"]) .badge:not(.badge--quiet):not(.badge--warn){background:var(--badge-sel-bg);color:var(--badge-sel-fg)}

/* аватар: инициалы на цветном круге. <span class="av av--2" aria-hidden="true">АК</span>; цвет 1–5 выбирайте от id */
.av{
  --avc:var(--av-1);
  display:inline-grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:var(--avc);color:var(--text);box-shadow:inset 0 1px 0 var(--av-hi);
  font-size:15px;font-weight:600;line-height:1;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;user-select:none;
}
.av img{width:100%;height:100%;object-fit:cover}
.av--1{--avc:var(--av-1)}
.av--2{--avc:var(--av-2)}
.av--3{--avc:var(--av-3)}
.av--4{--avc:var(--av-4)}
.av--5{--avc:var(--av-5)}
.av--md{width:40px;height:40px}
.av--sm{width:32px;height:32px;font-size:13px}

/* ============================== 6. Карточки и панели ============================== */
.card{
  min-width:0;
  padding:20px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);color:var(--text);
}
a.card{display:block;text-decoration:none;transition:background-color .15s,border-color .15s}
a.card:hover,.card.is-link:hover{background:var(--surface-2);border-color:var(--line-2)}
.card.is-selected{border-color:var(--accent);background:var(--accent-soft)}

.panel{
  min-width:0;
  padding:20px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);
}
.panel + .panel{margin-top:16px}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.panel-head > div{min-width:0}
.panel-title{margin:0;font-size:17px;line-height:25px;font-weight:600}
.panel-sub{margin:2px 0 0;font-size:15px;line-height:21px;color:var(--text-2)}
.panel-head .btn-row{margin-left:auto}

/* раскрывающийся блок для второстепенного */
details.advanced-ui{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
details.advanced-ui > summary{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:10px 14px;
  list-style:none;cursor:pointer;user-select:none;
  color:var(--text-2);font-weight:500;
  border-radius:var(--r-card);
}
details.advanced-ui > summary:hover{color:var(--text)}
details.advanced-ui > summary::before{
  content:"";flex:none;width:7px;height:7px;margin:0 3px 0 1px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s;
}
details.advanced-ui[open] > summary::before{transform:rotate(45deg)}
details.advanced-ui[open] > summary{color:var(--text)}
details.advanced-ui > .advanced-ui__body{padding:0 14px 14px}

/* блок опасных действий */
.danger-zone{margin-top:24px;padding:16px 20px;border:1px solid var(--error-line);border-radius:var(--r-card);background:var(--surface)}
.danger-zone > .panel-title{color:var(--error)}
.danger-zone .btn-row{margin-top:12px}

/* ============================== 7. Формы ============================== */
.field{display:grid;align-content:start;gap:6px;min-width:0}
.field + .field,.field-grid + .field,.field + .field-grid,.field-grid + .field-grid{margin-top:16px}
.field > label,.field-label{font-size:15px;font-weight:500;line-height:21px;color:var(--text)}
.field :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%;max-width:none}
.hint{margin:0;font-size:14px;line-height:19px;color:var(--text-2)}
.field .error,.field-error{margin:0;font-size:14px;line-height:19px;color:var(--error)}
.field.is-invalid :where(input,select,textarea){border-color:var(--error)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field-grid > .field + .field{margin-top:0}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px}

/* select с собственной стрелкой (по желанию; голый select оставляет системную) */
.select-wrap{position:relative;display:block}
.select-wrap select{appearance:none;-webkit-appearance:none;width:100%;padding-right:40px}
.select-wrap > .ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-2);pointer-events:none}

/* поле поиска с иконкой: <label class="search-field"><svg class="ic">…search…</svg><input type="search" aria-label="Поиск" placeholder="Поиск"></label> */
.search-field{
  display:flex;align-items:center;gap:8px;min-width:0;
  min-height:40px;padding:0 12px;
  border:1px solid var(--field-line);border-radius:var(--r-btn);background:var(--surface-2);
  cursor:text;transition:border-color .15s,box-shadow .15s;
}
.search-field:hover{border-color:var(--text-2)}
.search-field:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring)}
.search-field > .ic{color:var(--text-2)}
.search-field input{flex:1;width:auto;min-width:0;max-width:none;min-height:38px;padding:0;border:0;border-radius:0;background:var(--clear);box-shadow:none;outline:none}
.search-field input:focus{box-shadow:none}
.search-field input::-webkit-search-cancel-button{cursor:pointer}

/* поле ввода сообщения с круглой кнопкой отправки (эталон: .cmp/.send):
   <div class="compose-field"><input type="text" aria-label="Сообщение"><button type="submit" class="send" aria-label="Отправить" title="Отправить"><svg class="ic">…send…</svg></button></div> */
.compose-field{
  display:flex;align-items:center;gap:6px;min-width:0;
  min-height:44px;padding:3px 3px 3px 12px;
  border:1px solid var(--field-line);border-radius:var(--r-btn);background:var(--surface-2);
  transition:border-color .15s,box-shadow .15s;
}
.compose-field:hover{border-color:var(--text-2)}
.compose-field:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring)}
.compose-field :where(input,textarea){flex:1;width:auto;min-width:0;max-width:none;min-height:36px;padding:8px 0;border:0;border-radius:0;background:var(--clear);box-shadow:none;outline:none}
.compose-field :where(input,textarea):focus{box-shadow:none}
.compose-field textarea{min-height:36px;max-height:40vh;resize:none}
.send{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;padding:0;
  border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);
  cursor:pointer;transition:background-color .15s;
}
.send:hover{background:var(--accent-hover)}
.send:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px var(--focus-ring)}
.send .ic{width:17px;height:17px;transform:translate(-1px,1px)}
.send:disabled{background:var(--surface-3);color:var(--text-dis);cursor:not-allowed}

/* переключатель: <label class="switch"><input type="checkbox" role="switch"> Подпись</label> */
.switch{display:inline-flex;align-items:center;gap:12px;min-height:40px;cursor:pointer;font-size:15px;font-weight:500;color:var(--text)}
.switch input{
  appearance:none;-webkit-appearance:none;
  position:relative;flex:none;
  width:40px;height:24px;margin:0;padding:0;
  border:0;border-radius:var(--r-pill);
  background:var(--line-2);
  /* рамка цвета полей (3:1): выключенная дорожка видна и на белой поверхности светлой темы */
  box-shadow:inset 0 0 0 1px var(--field-line);
  cursor:pointer;transition:background-color .15s,box-shadow .15s;
}
.switch input::after{
  content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--text-2);
  transition:transform .18s,background-color .15s;
}
.switch input:checked{background:var(--accent);box-shadow:none}
.switch input:checked::after{transform:translateX(16px);background:var(--on-accent)}
.switch input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.switch input:disabled{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.switch input:disabled::after{background:var(--text-dis)}
/* переключатели списком, как в настройках Telegram: подпись слева, переключатель справа, между строками линия.
   <div class="toggle-list"><label class="switch toggle-row"><input type="checkbox" role="switch"><span>Подпись</span></label>…</div> */
.toggle-list{display:grid}
.switch.toggle-row{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:8px 0;font-weight:400}
.toggle-list > .toggle-row + .toggle-row{border-top:1px solid var(--line)}
.toggle-row > span{flex:1;min-width:0}
.toggle-text{display:grid;gap:2px}
.toggle-text > strong{font-weight:500}
.toggle-row:has(input:disabled){color:var(--text-2);cursor:not-allowed}

/* сегменты: <div class="segmented" role="group"><button aria-pressed="true">…</button>…</div>
   или радиокнопки: <label><input type="radio" name="x" checked><span>…</span></label> */
.segmented{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface-2)}
.segmented > button,.segmented > a,.segmented > label > span{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:32px;padding:0 12px;border:1px solid var(--clear);border-radius:7px;
  background:var(--clear);color:var(--text-2);
  font-family:inherit;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;
  cursor:pointer;transition:background-color .15s,color .15s;
}
.segmented > label{display:inline-flex;position:relative}
.segmented > label > input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.segmented > button:hover,.segmented > a:hover,.segmented > label:hover > span{color:var(--text)}
.segmented > [aria-pressed="true"],.segmented > [aria-current]:not([aria-current="false"]),.segmented > .is-active,
.segmented > label > input:checked + span{
  background:var(--seg-on);border-color:var(--line-2);color:var(--text);box-shadow:var(--inset-hi);
}
.segmented > label > input:focus-visible + span{outline:2px solid var(--focus);outline-offset:1px}

/* ============================== 8. Таблица ============================== */
.table-wrap{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.table-wrap tbody tr:last-child > :where(td,th){border-bottom:0}
.table-wrap :where(tr.is-selected,tr[aria-selected="true"]){background:var(--sel)}
.table-actions{display:flex;justify-content:flex-end;gap:4px;white-space:nowrap}

/* ============================== 9. Показатели ============================== */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.kpi{display:grid;align-content:start;gap:8px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.kpi-label{margin:0;font-size:15px;line-height:21px;color:var(--text-2)}
.kpi-value{margin:0;font-family:var(--font-mono);font-size:32px;line-height:36px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.kpi-value small{margin-left:4px;font-size:19px;font-weight:400;letter-spacing:0;color:var(--text-2)}
.kpi-delta{margin:0;font-size:14px;line-height:19px;color:var(--text-2)}
.kpi-delta.up{color:var(--success)}
.kpi-delta.down{color:var(--error)}
.kpi-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.kpi-bar > i{display:block;height:100%;border-radius:2px;background:var(--text-2)}

/* ============================== 10. Уведомление ============================== */
.toast-region{position:fixed;left:50%;bottom:24px;z-index:1000;display:grid;gap:8px;width:min(580px,calc(100vw - 32px));transform:translateX(-50%);pointer-events:none}
.toast{
  display:flex;align-items:center;gap:12px;
  max-width:580px;padding:10px 8px 10px 14px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--toast-bg);color:var(--text);box-shadow:var(--shadow-pop);
  pointer-events:auto;
}
.toast > .ic{width:18px;height:18px;color:var(--success)}
.toast--error > .ic{color:var(--error)}
.toast--warn > .ic{color:var(--warning)}
.toast--info > .ic{color:var(--accent-text)}
.toast p,.toast .toast-text{flex:1;min-width:0;margin:0;font-size:15px;line-height:21px}
.toast .btn.icon{width:36px;min-width:36px;min-height:36px;border-color:var(--clear);background:var(--clear);color:var(--text-2)}
.toast .btn.icon:hover{background:var(--surface-2);color:var(--text)}
/* Toast.show(text, {tone, action, timeout}) — shell-ui.js; действие тоста — тихая кнопка акцентным текстом */
.toast .toast-action{flex:none;min-height:36px;padding:0 10px;color:var(--accent-text)}
.toast .toast-action:hover{color:var(--accent-text)}

/* ============================== 11. Пустое состояние ============================== */
.empty{display:grid;justify-items:center;gap:8px;padding:40px 20px;text-align:center;color:var(--text-2)}
.empty > .ic{width:28px;height:28px;margin-bottom:4px;color:var(--text-2)}
.empty-title{margin:0;font-size:17px;line-height:25px;font-weight:600;color:var(--text)}
.empty-text{margin:0;max-width:440px;font-size:15px;line-height:21px}
.empty .btn-row{justify-content:center;margin-top:8px}

/* ============================== 12. Шапка страницы ============================== */
.page-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px 0 16px}
.page-heading{min-width:0;flex:1 1 280px}
.page-title{margin:0;font-size:26px;line-height:34px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.page-sub{margin:2px 0 0;max-width:720px;font-size:15px;line-height:21px;color:var(--text-2)}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* ссылка «назад» над заголовком (внутри .page-heading, перед h1):
   <a class="back-link" href="…"><svg class="ic" aria-hidden="true"><use href="/static/icons.svg#i-chevron-left"></use></svg>Настройки</a> */
.back-link{display:inline-flex;align-items:center;gap:4px;min-height:32px;margin:0 0 4px;color:var(--text-2);font-size:15px;line-height:21px;text-decoration:none}
.back-link:hover{color:var(--text)}

/* ============================== 13. Липкая панель действий формы ============================== */
.action-bar{
  position:sticky;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;
  margin-top:20px;padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);
}
.action-bar__note{flex:1 1 200px;min-width:0;margin:0 auto 0 0;font-size:14px;line-height:19px;color:var(--text-2)}
.action-bar[data-dirty="true"] .action-bar__note{color:var(--text)}
/* в кабинете панель липнет внутри прокручиваемой main.container: без сдвига на её нижний отступ под панелью
   оставалась полоска, сквозь которую виден прокручиваемый текст */
.app-shell main.container .action-bar{bottom:calc(-1 * var(--main-pad-bottom))}

/* ============================== 14. Переписка ============================== */
.feed{display:flex;flex-direction:column;gap:8px;min-width:0}
.bubble.in,.bubble.out{position:relative;max-width:min(78%,520px);padding:8px 12px;font-size:16px;line-height:23px;overflow-wrap:anywhere;box-shadow:var(--bubble-shadow)}
.bubble.in{align-self:flex-start;background:var(--bubble-in);border:1px solid var(--bubble-in-line);border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) var(--r-tail);color:var(--text)}
.bubble.out{align-self:flex-end;background:var(--bubble-out);border:1px solid var(--bubble-out-line);border-radius:var(--r-bubble) var(--r-bubble) var(--r-tail) var(--r-bubble);color:var(--text)}
.bubble.in::after,.bubble.out::after{content:"";display:table;clear:both}
.bubble:is(.in,.out) .bubble-meta{float:right;display:inline-flex;align-items:center;gap:5px;margin:7px 0 -5px 14px;font-family:var(--font-mono);font-size:12.5px;line-height:17px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.bubble.out .bubble-meta{color:var(--on-out-2)}
.bubble:is(.in,.out) .bubble-author{display:block;font-size:14px;font-weight:500;color:var(--accent-text)}

/* полоса сигнала — как закреплённая цитата */
.signal{display:flex;align-items:flex-start;gap:12px;padding:10px 14px 10px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:inset 2px 0 0 var(--accent-text)}
.signal > .ic{margin-top:2px;color:var(--accent-text)}
.signal-text{min-width:0;margin:0;font-size:14px;line-height:21px;color:var(--text-2)}
.signal-label{color:var(--accent-text);font-weight:500}
.signal-quote{display:block;margin-top:2px;font-size:15px;line-height:22px;color:var(--text)}

/* старая разметка переписки (chat.j2: .chat-wrap > .chat-header + ul.msgs > li.msg.user|bot > .bubble, form.composer) */
.chat-wrap{display:grid;grid-template-rows:auto 1fr auto;gap:12px;height:calc(100vh - 160px)}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.chat-meta{color:var(--text-2);font-size:14px}
.msgs{list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:8px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg)}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:78%}
.msg.user{justify-content:flex-start;margin-right:auto}
.msg.bot{justify-content:flex-end;margin-left:auto}
.avatar{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--av-1);color:var(--text);font-size:13px;font-weight:600}
.bubble{position:relative;padding:8px 12px;border-radius:var(--r-bubble);border:1px solid var(--bubble-in-line);background:var(--bubble-in);color:var(--text);font-size:16px;line-height:23px;box-shadow:var(--bubble-shadow);overflow-wrap:anywhere}
.msg.user .bubble{background:var(--bubble-in);border-color:var(--bubble-in-line);border-bottom-left-radius:var(--r-tail);color:var(--text)}
.msg.bot .bubble{background:var(--bubble-out);border-color:var(--bubble-out-line);border-bottom-right-radius:var(--r-tail);color:var(--text)}
.meta{margin-top:6px;font-size:13px;color:var(--text-2)}
.msg.bot .meta,.msg.bot .time{text-align:right}
.bubble img{display:block;width:auto;height:auto;max-width:260px;max-height:260px;margin-top:6px;object-fit:contain;border-radius:var(--r-btn)}
.typing{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2)}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-2);animation:tg-blink 1.2s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes tg-blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.composer{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.composer input[type="text"]{flex:1;max-width:none}

/* ============================== 15. Выпадающее меню «…» ============================== */
/* <details class="dropdown"><summary class="btn icon ghost" aria-label="Ещё" title="Ещё">…</summary><div class="dropdown-menu">…</div></details>
   Закрывается кликом мимо и Escape (shell-ui.js). */
.dropdown{position:relative;display:inline-block}
.dropdown > summary{list-style:none}
.dropdown > summary::-webkit-details-marker{display:none}
.dropdown-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  display:grid;gap:2px;min-width:220px;max-width:min(320px,calc(100vw - 24px));padding:6px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);box-shadow:var(--shadow-pop);
}
.dropdown.align-left .dropdown-menu{left:0;right:auto}
.dropdown-item{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:38px;padding:8px 10px;border:0;border-radius:8px;
  background:var(--clear);color:var(--text);
  font-family:inherit;font-size:15px;line-height:21px;text-align:left;text-decoration:none;
  cursor:pointer;
}
.dropdown-item:hover{background:var(--surface-2)}
.dropdown-item .ic{color:var(--text-2)}
.dropdown-item.danger,.dropdown-item.danger .ic{color:var(--error)}
.dropdown-sep{height:1px;margin:4px 6px;background:var(--line)}
/* панель-выпадашка для форм (фильтры, выбор вида), UX-SPEC §3.5: компьютер — всплывающая панель 340px,
   телефон — лист снизу во всю ширину с заголовком и «×» (кнопка [data-dropdown-close] закрывает, shell-ui.js).
   <div class="dropdown-menu dropdown-menu--panel"><div class="dropdown-panel__head"><p class="dropdown-panel__title">Фильтры</p>
   <button type="button" class="btn icon ghost sm dropdown-panel__close" data-dropdown-close aria-label="Закрыть" title="Закрыть">…x…</button></div>…поля…</div> */
.dropdown-menu.dropdown-menu--panel{
  display:grid;gap:14px;width:340px;min-width:0;max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 16px;
}
.dropdown-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.dropdown-panel__title{margin:0;font-size:17px;line-height:23px;font-weight:600;color:var(--text)}
.dropdown-panel__close{display:none}
.dropdown-menu--panel .form-actions{margin-top:4px}

/* ============================== 15a. Плашка-уведомление в потоке ============================== */
/* Сообщение на месте действия (сохранено, ошибка, предупреждение); всплывающее — .toast.
   <p class="callout callout--ok"><svg class="ic" aria-hidden="true">…</svg><span class="callout-body"><b>Заголовок</b><span class="callout-text">Текст</span></span></p>
   Варианты: без модификатора — нейтральная, --info (акцентная подложка), --ok, --warn, --err. */
.callout{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--text);font-size:15px;line-height:21px;overflow-wrap:anywhere}
.callout > .ic{flex:none;margin-top:2px;color:var(--accent-text)}
.callout > p,.callout-body > p{margin:0;min-width:0}
.callout-body{display:grid;gap:4px;min-width:0}
.callout-body > :is(b,strong){font-weight:600}
.callout-text{margin:0;font-size:15px;line-height:21px;color:var(--text-2)}
.callout .btn-row{margin-top:8px}
.callout-link{display:inline-flex;align-items:center;gap:4px;justify-self:start;min-height:32px;font-weight:500}
.callout--info{border-color:var(--accent-soft);background:var(--accent-soft)}
.callout--ok{border-color:var(--success-soft);background:var(--success-soft)}
.callout--ok > .ic{color:var(--success)}
.callout--warn{border-color:var(--warning-soft);background:var(--warning-soft)}
.callout--warn > .ic{color:var(--warning)}
.callout--err{border-color:var(--error-line);background:var(--error-soft)}
.callout--err > .ic{color:var(--error)}

/* ============================== 15b. Строка аккаунта ============================== */
/* аватар · имя и моно-идентификатор · статус · действия в конце (подключения, каналы, шапка аккаунта):
   <ul class="acc-list"><li class="acc-row"><span class="av">…</span><div class="acc-main"><div class="acc-name">…</div>
   <div class="acc-meta"><span class="mono">@user</span></div></div><div class="acc-state"><span class="status status--ok">…</span></div>
   <div class="acc-actions">…</div></li></ul> */
.acc-list{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.acc-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,auto) auto;grid-template-areas:"av main state actions";align-items:center;gap:6px 14px;min-height:68px;padding:12px 16px}
.acc-row + .acc-row{border-top:1px solid var(--line)}
.acc-row > .av{grid-area:av}
.acc-main{grid-area:main;display:grid;gap:2px;min-width:0}
.acc-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;font-size:16px;line-height:23px;font-weight:600;color:var(--text)}
.acc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-width:0;font-size:14px;line-height:21px;color:var(--text-2);overflow-wrap:anywhere}
.acc-meta .mono{font-size:13.5px}
.acc-state{grid-area:state;display:grid;justify-items:end;gap:2px;min-width:0;text-align:right}
.acc-state .hint{font-size:13.5px}
.acc-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.acc-actions:empty{display:none}

/* ============================== 15c. Строки и группы, как в настройках Telegram ============================== */
/* UX-SPEC §3.1. Группа — сплошная карточка со строками 44px; подпись группы над ней, пояснение под ней.
   <p class="tg-group-caption" id="g-x">Продавец</p>
   <ul class="tg-group" aria-labelledby="g-x"><li><a class="tg-row" href="#launch" data-section="launch">
     <span class="tg-row__ico" aria-hidden="true"><svg class="ic">…</svg></span>
     <span class="tg-row__text"><span class="tg-row__label">Запуск продавца</span></span>
     <span class="tg-row__value" data-state="warn"><svg class="ic ic--sm">…triangle-alert…</svg>Нужен аккаунт</span>
     <span class="tg-row__dot" hidden title="Есть несохранённые изменения"></span>
     <svg class="ic tg-row__chev" aria-hidden="true">…chevron-right…</svg></a></li></ul>
   <p class="tg-group-note">Пояснение к группе.</p>
   Вид строки — data-row: нет (пункт), link (переход), action (кнопка/форма), info (только показывает), danger.
   Шаблон-помощник — templates/_sections.j2 (row, caption, group, panel_head). */
.tg-group-caption{margin:22px 16px 8px;font-size:13px;line-height:17px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.tg-group-caption:first-child{margin-top:2px}
.tg-group-caption__link{display:inline-flex;align-items:center;gap:4px;min-height:24px;color:inherit;text-decoration:none}
.tg-group-caption__link:hover{color:var(--text)}
.tg-group-caption__link::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.tg-group{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.tg-group > li{position:relative;margin:0;padding:0}
/* разделитель — от начала текста, как в Telegram */
.tg-group > li + li::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line);pointer-events:none;z-index:1}
.tg-group > li:has(.tg-row__ico) + li:has(.tg-row__ico)::before{left:56px}
.tg-group > li > form{margin:0}
.tg-group-note{margin:8px 16px 0;font-size:14px;line-height:19px;color:var(--text-2)}
.tg-group + .tg-group{margin-top:12px}
.tg-row{
  position:relative;
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:44px;padding:8px 12px 8px 12px;
  border:0;border-radius:0;background:var(--clear);color:var(--text);
  font-family:inherit;font-size:15px;line-height:21px;text-align:left;text-decoration:none;
  cursor:pointer;transition:background-color .15s;
}
.tg-row:hover{background:var(--surface-2);color:var(--text)}
.tg-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--focus-ring)}
.tg-row[aria-current]:not([aria-current="false"]){background:var(--surface-3);box-shadow:var(--inset-hi)}
.tg-row__ico{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text)}
.tg-row__ico .ic{width:16px;height:16px}
.tg-row[aria-current]:not([aria-current="false"]) .tg-row__ico{background:var(--accent);color:var(--on-accent)}
.tg-row__text{display:grid;gap:1px;flex:1 1 auto;min-width:0}
.tg-row__label{min-width:0;overflow-wrap:anywhere}
.tg-row__sub{font-size:14px;line-height:19px;color:var(--text-2)}
.tg-row__value{
  flex:0 0 auto;max-width:55%;min-width:0;
  font-size:14px;line-height:19px;color:var(--text-2);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tg-row__value:empty{display:none}
.tg-row__value .ic{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.tg-row__value[data-state="ok"]{color:var(--success)}
.tg-row__value[data-state="warn"]{color:var(--warning)}
.tg-row__value[data-state="off"]{color:var(--text-dis)}
.tg-row__value[data-state="accent"]{color:var(--accent-text)}
.tg-row__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tg-row__chev{flex:none;width:16px;height:16px;color:var(--text-2)}
.tg-row__ext{flex:none;width:15px;height:15px;color:var(--text-2)}
/* строка-кнопка или строка с формой: акцентный текст без шеврона; неактивная — причина в значении */
.tg-row[data-row="action"]{color:var(--accent-text)}
.tg-row[data-row="action"] .tg-row__ico{background:var(--clear);color:var(--accent-text)}
.tg-row:is([data-row="action"],[data-row="danger"],[data-row="info"]) .tg-row__chev{display:none}
.tg-row[data-row="danger"]{color:var(--error)}
.tg-row[data-row="danger"] .tg-row__ico{background:var(--error-soft);color:var(--error)}
.tg-row[data-row="danger"]:hover{background:var(--error-soft)}
.tg-row[data-row="info"]{cursor:default}
.tg-row[data-row="info"]:hover{background:var(--clear)}
.tg-row:disabled,.tg-row[aria-disabled="true"]{color:var(--text-dis);cursor:not-allowed}
.tg-row:disabled:hover,.tg-row[aria-disabled="true"]:hover{background:var(--clear)}
.tg-row:disabled .tg-row__ico,.tg-row[aria-disabled="true"] .tg-row__ico{color:var(--text-dis)}
a.tg-row[aria-disabled="true"]{pointer-events:none}

/* ============================== 15d. «Разделы»: список пунктов и панели ============================== */
/* UX-SPEC §3.2. Поведение — static/sections.js (класс sections-on на <html>), разметка-помощник — _sections.j2.
   <div class="sections" data-sections data-mode="panels|toc" data-default="id" data-back="Настройки"
        data-saved-map='{"notify":"telegram-notifications"}' data-aliases='{"old":"new"}' [data-start="item"] [data-back-href="/x"]>
     <nav class="sections__nav" aria-label="Разделы страницы «…»">[.sections__lead] подписи, .tg-group, .tg-row [.sections__foot]</nav>
     <div class="sections__panels"><section class="section-panel" id="launch" aria-labelledby="launch-h" tabindex="-1">
       <header class="section-panel__head"><h2 class="section-panel__title" id="launch-h">…</h2><p class="section-panel__sub">…</p>
         <div class="section-panel__actions">…</div></header> … [.action-bar] </section></div></div>
   Раскладка — по ширине самого блока (container query): от 880px две колонки (список 320px, от 1180px — 340px),
   уже — один столбец. Без скрипта список — оглавление ссылками, все панели подряд. */
.sections{container-type:inline-size;container-name:sections;display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;min-width:0}
.sections__nav,.sections__panels{flex:1 1 100%;min-width:0}
.sections__lead{margin:0 0 16px}
.sections__foot{margin:12px 16px 0;font-size:14px;line-height:19px;color:var(--text-2)}
/* без gap: скрытые hidden="until-found" панели остаются в потоке нулевой высоты и не должны давать зазоров */
.sections__panels{display:block}
.section-panel:not([hidden]) ~ .section-panel:not([hidden]){margin-top:16px}
.section-panel{
  container-type:inline-size;container-name:panel;
  min-width:0;padding:20px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--text);
  scroll-margin-top:12px;
}
.section-panel:focus{outline:none}
.section-panel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.section-panel__head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start;margin:0 0 16px}
.section-panel__head > *{grid-column:1}
.section-panel__head > .section-panel__actions{grid-column:2;grid-row:1 / span 2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.section-panel__title{margin:0;font-size:19px;line-height:26px;font-weight:600;color:var(--text)}
.section-panel__title:focus{outline:none}
.section-panel__title:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.section-panel__sub{margin:4px 0 0;max-width:720px;font-size:15px;line-height:21px;color:var(--text-2)}
/* строка «В этом разделе: А · Б · В» у длинного пункта (§2.1 п. 5) */
.section-panel__toc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:-6px 0 16px;font-size:14px;line-height:19px;color:var(--text-2)}
.section-panel__toc a{display:inline-flex;align-items:center;min-height:32px}
@container panel (max-width:560px){
  .section-panel__head{grid-template-columns:minmax(0,1fr)}
  .section-panel__head > .section-panel__actions{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:12px}
}
/* «‹ Назад» вставляет sections.js в экран пункта на узкой ширине */
.section-panel__back{
  display:none;align-items:center;gap:4px;
  min-height:40px;margin:-8px 0 8px -8px;padding:0 10px 0 6px;
  border:0;border-radius:var(--r-btn);background:var(--clear);color:var(--accent-text);
  font-family:inherit;font-size:15px;line-height:21px;cursor:pointer;
}
.section-panel__back:hover{background:var(--surface-2)}
.section-panel__back:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.section-panel__back .ic{width:18px;height:18px}
.sections[data-layout="narrow"][data-view="item"] .section-panel__back{display:inline-flex}
@container sections (min-width:880px){
  /* --consent-space: место под карточкой cookie на компьютере, пока посетитель не выбрал (privacy-consent.js) */
  .sections__nav{flex:0 0 320px;position:sticky;top:12px;max-height:calc(100dvh - 140px - var(--consent-space,0px) - var(--task-dock-h,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .sections__panels{flex:1 1 0}
  .sections[data-mode="toc"] > .sections__panels .section-panel{scroll-margin-top:16px}
}
@container sections (min-width:1180px){
  .sections__nav{flex-basis:340px}
}
/* в двух колонках выбранный пункт подсвечен, шеврон пункта не нужен (как в Telegram Desktop); у переходов остаётся */
@container sections (min-width:880px){
  .sections__nav .tg-row:not([data-row]) .tg-row__chev{display:none}
}
/* со скриптом: широкая — одна панель; узкая — экран списка или экран пункта */
.sections-on .sections[data-mode="panels"][data-layout="narrow"][data-view="list"] > .sections__panels{display:none}
.sections-on .sections[data-mode="panels"][data-layout="narrow"][data-view="item"] > .sections__nav{display:none}
html[data-sx-view="item"] main .page-header:not(.sections .page-header){display:none}
/* до разметки скриптом панели не мигают; если скрипт не сработал — через 2 с видны все */
.sections-on .sections[data-mode="panels"]:not([data-sx-ready]) > .sections__panels{visibility:hidden;animation:sx-failsafe 0s linear 2s forwards}
@keyframes sx-failsafe{to{visibility:visible}}
/* «Сохранить» у формы, которая со скриптом сохраняется сразу (input[data-autosubmit]) */
html.sections-on .js-hide{display:none!important}

/* ============================== 15e. Главная кнопка телефона ============================== */
/* UX-SPEC §3.4. Один элемент в DOM — там, где ему место на компьютере. На телефоне родитель .page-flow
   ставит его в конец, кнопка липнет к низу над вкладками. data-hide-when-visible="#id" — прятать, пока #id
   на экране (shell-ui.js). На экранах пунктов «Разделов» не нужна: там .action-bar. */
.mobile-cta[data-cta-hidden]{display:none}

/* ============================== 15f. Подложка текста на рисунке ============================== */
/* UX-SPEC §3.6: даты и служебные строки в ленте, «Выберите диалог слева», строки пробного чата */
.feed-pill{
  display:inline-block;align-self:center;max-width:100%;margin-inline:auto;
  padding:2px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text-2);
  font-size:13px;line-height:19px;text-align:center;overflow-wrap:anywhere;
}

/* ============================== 16. Телефон ============================== */
@media (max-width:720px){
  :root{--main-pad-bottom:var(--mobile-content-end-gap,16px)}
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .btn.icon{width:44px;min-width:44px}
  .btn.icon.sm{width:40px;min-width:40px}
  .chip{min-height:36px;padding:0 12px}
  .chip::after{content:"";position:absolute;inset:-4px 0}
  .card,.panel{padding:16px}
  .field-grid{grid-template-columns:minmax(0,1fr)}
  .page-header{align-items:stretch;padding:12px 0}
  .page-title{font-size:22px;line-height:30px}
  .page-actions{width:100%}
  .page-actions > .btn.primary{flex:1 1 auto}
  .kpi-value{font-size:26px;line-height:32px}
  .form-actions > .btn{flex:1 1 auto}
  /* липкая панель над нижними вкладками: прокручивается main.container, вкладки ниже него */
  .action-bar{padding:10px}
  .action-bar > .btn.primary,.action-bar .btn-row > .btn.primary{flex:1 1 100%}
  .action-bar .btn-row{flex:1 1 100%}
  /* меню «…» на телефоне — лист снизу, чтобы не уходить за край экрана */
  .dropdown-menu,.dropdown.align-left .dropdown-menu{position:fixed;left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));z-index:200;max-width:none;min-width:0}
  .dropdown-item{min-height:44px}
  /* панель-выпадашка — лист снизу во всю ширину, с заголовком и «×»; под ней затемнение */
  .dropdown-menu.dropdown-menu--panel,.dropdown.align-left .dropdown-menu.dropdown-menu--panel{
    left:0;right:0;bottom:0;width:auto;max-width:none;max-height:85dvh;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius:var(--r-card) var(--r-card) 0 0;border-bottom:0;
    box-shadow:var(--shadow-pop);
  }
  /* затемнение — настоящий слой, а не тень: перехватывает нажатие, чтобы оно не сработало на ссылке под листом;
     нажатие приходит на сам <details>, shell-ui.js закрывает лист */
  details.dropdown[open]:has(> .dropdown-menu--panel)::before{
    content:"";position:fixed;inset:0;z-index:199;cursor:default;
    background:color-mix(in srgb,var(--bg) 62%,transparent);
  }
  .dropdown-panel__close{display:inline-flex}
  /* ряды чипов и кнопок переносятся, а не прокручиваются вбок (UX-SPEC §3.8) */
  .chips,.btn-row{flex-wrap:wrap;overflow-x:visible}
  .section-panel{padding:16px}
  .section-panel__head{margin-bottom:12px}
  .sections{gap:16px}
  .tg-group-caption{margin-inline:12px}
  .tg-group-note{margin-inline:12px}
  /* главная кнопка телефона: в конце .page-flow, липнет к низу main.container над вкладками */
  .page-flow{display:flex;flex-direction:column}
  .page-flow > .mobile-cta{order:99}
  .mobile-cta{
    position:sticky;bottom:calc(-1 * var(--mobile-content-end-gap,16px));z-index:6;
    display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:10px;
    border-top:1px solid var(--line);background:var(--surface);
  }
  .mobile-cta > *{flex:1 1 100%}
  .mobile-cta .btn{width:100%}
  .bubble.in,.bubble.out{max-width:88%}
  .msg{max-width:92%}
  .back-link,.callout-link{min-height:40px}
  .acc-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av main actions" ". state state";padding:12px}
  .acc-state{justify-items:start;text-align:left}
  /* в кабинете снизу вкладки и строка задач (их высота меняется) — тост под шапкой, сверху */
  body.app-shell .toast-region{top:calc(60px + env(safe-area-inset-top));bottom:auto}
  body:not(.app-shell) .toast-region{bottom:16px}
  .send{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .btn,.chip,.switch input,.switch input::after,details.advanced-ui > summary::before,.typing span{transition:none;animation:none}
}

/* ============================================================================================
   Фон с рисунками, как в чатах Telegram (07.10.2026; перестроен по UX-SPEC §2.7 и §3.3)
   static/doodles.svg — бесшовная плитка 560×560: линейные иконки Lucide (ISC) и свои мотивы,
   генератор — AI_FRONTIER/autogram-ui/stil/make_doodles.py. Плитка служит маской: цвет линии и фона
   задаются токенами и переключаются вместе с темой. Литералы — только в токенах ниже.
   Где рисунок есть (заметность — непрозрачность цвета линии):
     обои страницы (поля вокруг main.container)  --doodle-page   тёмная 12%, светлая 10%
     лента переписки и другие .doodle-layer       --doodle-chat   тёмная 9%,  светлая 11%
     вокруг карточки входа, /phone, мастера        --doodle-guest  тёмная 9%,  светлая 8%
   Где рисунка нет: подложка main.container (--sheet), меню, шапка, карточки, панели, строки «Разделов»,
   поля, таблицы, меню, модальные окна, липкие полосы. Текст на рисунке ленты — на .feed-pill.
   Выключатель: меню аккаунта → «Рисунки на фоне» (localStorage np_doodles, атрибут data-doodles на <html>
   ставит theme.js до отрисовки). Сам выключен при prefers-contrast: more, forced-colors и печати.
   Без движения: слой на неподвижном элементе, страница едет поверх (без background-attachment:fixed).
   ============================================================================================ */
:root{
  --wall-1:#0E151E;
  --wall-2:#122437;
  --doodle-ink:var(--accent-text);
  --doodle-page:12%;
  --doodle-chat:9%;
  --doodle-guest:9%;
  --doodle-tile:url(/static/doodles.svg?v=20261007-3) 0 0/560px 560px repeat;
  --sheet:color-mix(in srgb,var(--bg) 94%,transparent);
  --chat-bg:var(--bg);
  /* старое имя: цвет рисунка обоев страницы */
  --doodle:color-mix(in srgb,var(--doodle-ink) var(--doodle-page),transparent);
}
[data-theme="light"]{
  --wall-1:#D6E2EC;
  --wall-2:#CFE2DE;
  --doodle-ink:var(--accent);
  --doodle-page:10%;
  --doodle-chat:11%;
  --doodle-guest:8%;
}
/* обои страницы: переход двух близких тонов (::before) и рисунок (::after) на неподвижных слоях за всем */
body{--doodle-strength:var(--doodle-page)}
body[data-doodles-strength="guest"]{--doodle-strength:var(--doodle-guest)}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-2;background:linear-gradient(160deg,var(--wall-1),var(--wall-2))}
body::after{
  z-index:-1;
  background:color-mix(in srgb,var(--doodle-ink) var(--doodle-strength),transparent);
  -webkit-mask:var(--doodle-tile);mask:var(--doodle-tile);
}
/* Содержимое страницы лежит на спокойной подложке: текст не попадает на рисунки,
   рисунки видны по краям (как в Telegram: фон — в чате, списки — на сплошном). */
body.app-shell:not(.chat-focus):not(.layout-full) .content > main.container{
  background:var(--sheet);
  border-radius:var(--r-frame);
  padding-inline:20px;
  padding-top:4px;          /* низ не трогаем: там --main-pad-bottom для липкой .action-bar */
  margin-top:12px;
  margin-bottom:12px;
}
/* гостевые страницы без своей карточки (документы для гостя и т. п.): тот же лист-подложка; подвал — на подложке */
body:not(.app-shell):not([data-doodles-strength="guest"]) > main.container{
  background:var(--sheet);border-radius:var(--r-frame);padding:4px 20px 20px;margin-top:16px;margin-bottom:16px;
}
body:not(.app-shell) > .legal-footer{background:var(--sheet);border-radius:var(--r-card);margin-bottom:16px;padding-inline:16px}
@media (max-width:720px){
  body:not(.app-shell):not([data-doodles-strength="guest"]) > main.container{border-radius:0;padding-inline:12px;margin-top:0}
}
/* гостевые и пошаговые страницы ({% set doodles_strength = 'guest' %}): карточка стоит прямо на «обоях» */
body.app-shell[data-doodles-strength="guest"]:not(.chat-focus) .content > main.container{background:var(--clear)}
@media (max-width:720px){
  body.app-shell:not(.chat-focus):not(.layout-full) .content > main.container{border-radius:0;padding-inline:0;padding-top:0;margin-top:0;margin-bottom:0}
}
/* слой ленты: неподвижная обёртка, прокручивается её дочерний элемент. Группа страницы ставит класс сама:
   <div class="doodle-layer"><ul class="msgs">…</ul></div>. Сдвиг плитки — чтобы не совпадать с обоями. */
.doodle-layer{position:relative;isolation:isolate;background:var(--chat-bg)}
.doodle-layer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--doodle-ink) var(--doodle-chat),transparent);
  -webkit-mask:var(--doodle-tile);mask:var(--doodle-tile);
  -webkit-mask-position:280px 180px;mask-position:280px 180px;
}
/* переписка до перевода на .doodle-layer (группа 2): та же лента на области сообщений */
body .tg-chat-main:not(:has(.doodle-layer)){isolation:isolate;background:var(--chat-bg)}
body .tg-chat-main:not(:has(.doodle-layer))::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--doodle-ink) var(--doodle-chat),transparent);
  -webkit-mask:var(--doodle-tile);mask:var(--doodle-tile);
  -webkit-mask-position:280px 180px;mask-position:280px 180px;
}
body .tg-chat-main .chat-wrap,body .tg-chat-main .msgs,.doodle-layer .msgs{background:var(--clear)}
/* выключатель и режимы доступности: рисунков нет, переходы тонов остаются */
html[data-doodles="off"] body::after,
html[data-doodles="off"] .doodle-layer::before,
html[data-doodles="off"] body .tg-chat-main::before{display:none}
@media (prefers-contrast:more),(forced-colors:active){
  body::after,.doodle-layer::before,body .tg-chat-main::before{display:none}
}
@media print{
  body::before,body::after,.doodle-layer::before,body .tg-chat-main::before{display:none}
}