/* ============================================================
   UI — ЕДИНЫЙ ИСТОЧНИК ОФОРМЛЕНИЯ pulse (11.09.2026).

   Здесь и только здесь: цвета, шрифты, размеры, отступы, скругления, тени —
   и общие детали интерфейса, которыми обязан пользоваться каждый раздел:
   кнопка, поле, выпадающий список, таблица, карточка, KPI-плитка, вкладки,
   бейдж состояния, боковая панель, тост, и четыре состояния экрана —
   загрузка / пусто / ошибка / нет доступа.

   Правило: раздел не заводит свой цвет, свой шрифт и свою кнопку. Нужна
   разновидность — это модификатор общей детали (.pill.ok, .btn-primary),
   а не новый класс с новыми значениями. Изменил переменную здесь —
   поменялось везде.

   Тема: тёмная — база, светлая — переопределение токенов по
   :root[data-theme="light"]; атрибут ставит app.js из localStorage
   «adpulse.theme». Разделы-соседи (ИИ-агент, движок) читают тот же ключ.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --bg:#121212;
  --bg-2:#171717;
  --panel:#1a1a1a;
  --panel-2:#232323;
  --stroke:rgba(228,228,228,.10);
  --stroke-2:rgba(228,228,228,.18);
  --txt:#f2f2f2;
  --txt-2:#b3b3b3;
  --txt-3:#8c8c8c;   /* 14.09: было #767e89 (3,8–4,2 к панелям) → 4,9 */

  --c1:var(--brand);   /* акцент = жёлтый Kursor (и расход на графиках) */
  --c2:var(--ok);   /* выручка = семантика «хорошо» */
  --c3:var(--cat-2);   /* заявки — вторая ступень шкалы темы */
  --c4:var(--bad);   /* потери, порог */
  --c5:var(--txt-2);   /* вспомогательное (ROAS, показы) */

  --wa:#63cd78;   /* зелёный WhatsApp */

  --brand:#facc15;      /* фирменный жёлтый Kursor */
  --brand-ink:#0f0f0f;  /* чёрный Kursor */

  --ok:#5fc8a5;
  --warn:#e8b95d;
  --bad:#e97870;

  --r:14px;
  --shadow:0 18px 42px -30px rgba(0,0,0,.85);
  --font:"Inter","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* поверхности таблицы/оверлеев — вынесены в токены, чтобы светлая тема их
     переопределяла централизованно (см. :root[data-theme="light"] в конце файла) */
  --grid:#292929;              /* сетка ячеек Sheets-вида */
  --th-bg:#1f1f1f;             /* фон thead/tfoot и итоговых полос */
  --sticky-col:#1a1a1a;        /* липкий первый столбец */
  --sticky-col-even:#1d1d1d;   /* он же в чётной строке (зебра) */
  --sticky-col-hover:#2b2712;   /* выделенная строка — жёлтый подмес */  /* он же при наведении */
  --track:rgba(228,228,228,.055); /* «пустая» дорожка бар-чартов */
  --tip-bg:#1b1b1b;               /* фон тултипов и тоста */
  --card-1:#1a1a1a; /* верх градиента карточек/kpi */
  --card-2:#1a1a1a; /* низ градиента карточек/kpi */
  --heading:#f2f2f2;              /* градиентные заголовки (h1, kpi-val) */
  --heading-2:#f2f2f2;
  --overlay-soft:rgba(228,228,228,.12); /* скроллбар, тумблеры */
  --zebra:rgba(228,228,228,.018);       /* чётные строки таблицы */
  /* ---- токены состояний (14.09.2026): всё, что раньше было зашито цветом в styles.css ----
     ink/paper — основа прозрачных наложений; shadow-ink — цвет тени темы (у тем NETTO тонированный) */
  --ink:#000000; --paper:#ffffff; --shadow-ink:#000000;
  --on-accent:#171a12; --on-status:#ffffff;
  --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad);
  --badge-bg:var(--txt); --badge-fg:var(--bg);   /* счётчик уведомлений — инверсный, чтобы не путать с жёлтым акцентом */
  /* ---- ЦВЕТ НА ГРАФИКАХ (правило, 14.09.2026) ----
     1) категории (каналы, источники) — качественная шкала данных --cat-1..5, «прочее» серым; не больше пяти;
        одна категория — один цвет на всём экране. Шкала НЕ выводится из акцента: акцент интерфейса и палитра
        данных — разные системы. Основа — Okabe-Ito (синий, оранжевый, лиловый, голубой) + коричневый Tableau 10,
        проверено на дальтонизм; под режим подгоняется только светлота и насыщенность (тёмный — светлее и
        приглушённее, светлый — темнее и насыщеннее), оттенки те же. Попарное ΔE2000 ≥ 19 (тёмный) / ≥ 25 (светлый),
        до семантики ok/bad ≥ 16; скрипт scratchpad/palette_pick.py.
     2) величины (рейтинги, длина полос) — без цвета, один нейтральный тон --bar, значение несёт длина;
     3) смысл — семантика темы: расход = акцент (--c1), выручка = --ok, потери/порог = --bad, вспомогательное = --txt-2.
     Бренд-цвета каналов (Instagram, TikTok, WhatsApp) — только на значках/пилюлях канала, не в шкале.
     Монохром — исключение: категории по яркости и штриховке (themes.css, --cat-hatch). */
  --cat-1:#3b8ac5; --cat-2:#fcbb50; --cat-3:#e295bf; --cat-4:#7bcdfe; --cat-5:#b28e7a;
  --cat-other:var(--txt-3); --cat-hatch:0;
  --bar:color-mix(in srgb, var(--txt) 42%, var(--panel));
  --sidebar-bg:#0f0f0f; --nav-fg:#7b8275; --nav-hover:#171914; --nav-active-bg:var(--brand); --nav-active-fg:#171a12; --nav-active-icon:#171a12;
  --seg-on-bg:var(--brand); --seg-on-fg:#171a12; --primary-bg:var(--brand); --primary-fg:#171a12;
  --logo-bg:var(--brand); --logo-fg:var(--brand-ink); --switch-on:var(--brand); --avatar-bg:var(--brand); --avatar-fg:#171a12;
  --link:var(--brand); --focus:var(--brand); --selection-bg:var(--brand); --selection-fg:#171a12; --c6:var(--cat-3);
  --intro-bg:#0f0f0f; --intro-fg:#f7f7f5; --intro-muted:#8f8f8a;   /* левая панель страницы входа */
  color-scheme:dark;
}

/* ---- шкалы: единый шаг отступов и размеров текста ---- */
:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:14.5px; --fs-xl:20px; --fs-2xl:26px;
  --r-sm:7px; --r-md:10px; --r-lg:14px;          /* --r (16px) — карточки */
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono);
  --ease:cubic-bezier(.4,0,.2,1); --kt-h:0px;   /* верхняя полоса снята 11.09.2026 */
}

:root[data-theme="light"]{
  --bg:#f6f6f4;            /* тёплый серо-белый, как fafafa на kursor.school */
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f1f1ee;
  --stroke:#e7e6e2;
  --stroke-2:#d5d4cf;
  --txt:#0f0f0f;           /* чёрный Kursor */
  --txt-2:#4a4a4a;
  --txt-3:#666666;   /* 14.09: было #84888f (3,2–3,6 к подложкам) → ≥4,5 на любой */

  /* данные: спокойная профессиональная палитра, читаемая на белом (WCAG AA) */
  --c1:#7d5f05;  /* акцент в текстовых ролях — тёмный жёлтый, ≥4,9:1 на любой подложке */
  --c2:var(--ok);  /* выручка = семантика «хорошо» */
  --c3:var(--cat-2);  /* заявки — вторая ступень шкалы */
  --c4:var(--bad);  /* потери, порог */
  --c5:var(--txt-2);  /* вспомогательное */
  --wa:#158a44; --ok:#0e8f63; --warn:#b45309; --bad:#d13438;

  --shadow:0 1px 2px rgba(15,15,15,.05),0 10px 28px -20px rgba(15,15,15,.14);

  --grid:#e3e2dd;
  --th-bg:#efefeb;
  --sticky-col:#ffffff;
  --sticky-col-even:#f7f7f4;
  --sticky-col-hover:#fbf3d0;   /* выделенная строка — бледно-жёлтая */
  --track:#ecebe7;
  --tip-bg:rgba(255,255,255,.98);
  --card-1:#ffffff;
  --card-2:#ffffff;
  --heading:#0f0f0f;
  --heading-2:#5c5c5c;
  --overlay-soft:#dededa;
  --ink:#0f0f0f; --paper:#ffffff; --shadow-ink:#0f0f0f;
  --on-accent:#ffffff; --on-status:#ffffff;
  --ok-fg:#0b7a54; --warn-fg:#8a4b06; --bad-fg:#b42328;
  --sidebar-bg:#ffffff; --nav-fg:#646b5e; --nav-hover:#f3f3f0;
  --nav-active-bg:linear-gradient(90deg,color-mix(in srgb, var(--brand) 36%, transparent),color-mix(in srgb, var(--brand) 12%, transparent));
  --nav-active-fg:var(--brand-ink); --nav-active-icon:#8a6a06;
  --badge-bg:var(--txt); --badge-fg:var(--bg);
  --cat-1:#0060a7; --cat-2:#d88900; --cat-3:#bd6296; --cat-4:#2da2dc; --cat-5:#8d624a;   /* та же шкала, темнее и насыщеннее */
  --cat-other:var(--txt-3); --cat-hatch:0;
  --bar:color-mix(in srgb, var(--txt) 42%, var(--panel));
  --seg-on-bg:var(--brand); --seg-on-fg:#0f0f0f; --primary-bg:var(--brand); --primary-fg:#0f0f0f;
  --logo-bg:var(--brand); --logo-fg:#0f0f0f; --switch-on:var(--brand); --avatar-bg:var(--brand); --avatar-fg:#0f0f0f;
  --link:#7d5f05; --focus:#7d5f05; --selection-bg:#fde68a; --selection-fg:#0f0f0f; --c6:var(--cat-3);
  --intro-bg:#0f0f0f; --intro-fg:#f7f7f5; --intro-muted:#8f8f8a;
  --zebra:#f8f8f6;
  color-scheme:light;
}

/* ============ ОБЩИЕ ДЕТАЛИ ============ */

/* Поле ввода — та же геометрия, что у .select и .btn (styles.css) */
.input{
  background:var(--panel);border:1px solid var(--stroke);color:var(--txt);
  font:inherit;font-size:12.5px;border-radius:var(--r-md);padding:8px 12px;min-width:0;
}
.input::placeholder{color:var(--txt-3)}
.input:focus{outline:none;border-color:color-mix(in srgb, var(--c1) 55%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--c1) 13%, transparent)}
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* Бейдж состояния с точкой: одно место для «взведён / ведёт диалог / у менеджера /
   спит / ошибка» и любых других статусов. Цвет — модификатор, не новый класс. */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:999px;border:1px solid var(--stroke);color:var(--txt-2);white-space:nowrap;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 35%, transparent)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 35%, transparent)}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 35%, transparent)}
.pill.info{color:var(--c1);border-color:color-mix(in srgb, var(--c1) 35%, transparent)}
.pill.muted{color:var(--txt-3)}

/* Четыре состояния экрана. Один вид на всё приложение. */
.ui-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:34px 20px;color:var(--txt-3);font-size:12.5px;
  border:1px dashed var(--stroke-2);border-radius:var(--r-lg);background:var(--zebra);
}
.ui-state b{font-size:13.5px;font-weight:600;color:var(--txt-2)}
.ui-state.loading b::after{content:"…";animation:ui-dots 1.2s steps(4) infinite}
@keyframes ui-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ui-state.error b{color:var(--bad)}
.ui-state.forbidden b{color:var(--warn)}
.ui-state .btn{margin-top:8px}

/* Переписка: пузыри клиента / ИИ / менеджера / шаблона. Общая деталь для
   ИИ-агента и чатов движка — один вид переписки на всё приложение. */
.convo{display:flex;flex-direction:column;gap:8px}
.msg{max-width:82%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.45;word-wrap:break-word;
  background:var(--panel-2);border:1px solid var(--stroke);border-bottom-left-radius:4px;color:var(--txt)}
.msg .who{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
.msg .who .t{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.msg.ai{margin-left:auto;background:color-mix(in srgb, var(--c1) 14%, transparent);border-color:color-mix(in srgb, var(--c1) 35%, transparent);border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.msg.ai .who{color:var(--c1)}
.msg.manager{margin-left:auto;background:color-mix(in srgb, var(--warn) 12%, transparent);border-color:color-mix(in srgb, var(--warn) 35%, transparent);border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.msg.manager .who{color:var(--warn)}
.msg.template{margin-left:auto;background:var(--zebra);border-style:dashed;color:var(--txt-2);border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.convo-day{display:flex;align-items:center;gap:10px;margin:8px 0 2px;font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3)}
.convo-day::before,.convo-day::after{content:"";flex:1;height:1px;background:var(--stroke)}

/* Список «ключ — значение» внутри карточки: подписи слева, значения справа, табличные цифры */
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:12.5px}
.kv span{color:var(--txt-2)}
.kv b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* ============ ОБЩИЕ ДЕТАЛИ pulse (перенесены из styles.css без изменений, 12.09.2026) ============ */

/* ---- buttons ---- */
.select,.btn,.btn-ghost{
  background:var(--panel);border:1px solid var(--stroke);color:var(--txt);
  font:inherit;font-size:12.5px;border-radius:10px;padding:8px 12px;cursor:pointer;transition:.15s;
}
.select:hover,.btn:hover,.btn-ghost:hover{background:var(--panel-2);border-color:var(--stroke-2)}
.select{max-width:190px;flex:0 1 auto;min-width:0}
.select option{background:var(--bg-2)}
.btn-ghost{width:36px;height:34px;padding:8px;color:var(--txt-2)}
.btn-ghost svg{width:100%;height:100%}
.btn-ghost.spin svg{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-primary{background:var(--primary-bg);border-color:transparent;color:var(--primary-fg);font-weight:600}

/* ---- seg ---- */
.seg{display:flex;flex:none;background:var(--panel);border:1px solid var(--stroke);border-radius:10px;padding:3px}
.seg button{
  border:0;background:none;color:var(--txt-2);font:inherit;font-size:12px;font-weight:500;
  padding:6px 10px;border-radius:7px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--panel-2);color: var(--seg-on-fg);box-shadow:0 2px 8px color-mix(in srgb, var(--shadow-ink) 30%, transparent)}

/* ---- chip ---- */
.chips{display:flex;gap:6px}
.chip{
  background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2);
  font:inherit;font-size:12px;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.15s;
}
.chip:hover{color:var(--txt);border-color:var(--stroke-2)}
.chip.on{background:color-mix(in srgb, var(--c1) 18%, transparent);border-color:color-mix(in srgb, var(--c1) 45%, transparent);color:var(--on-accent)}

/* ---- switch ---- */
.switch{position:relative;width:40px;height:22px;flex:none;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch span{
  position:absolute;inset:0;border-radius:20px;transition:.2s;
  background:color-mix(in srgb, var(--paper) 10%, transparent);border:1px solid var(--stroke);
}
.switch span::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--txt-3);transition:.2s;
}
.switch input:checked + span{background:color-mix(in srgb, var(--c1) 35%, transparent);border-color:color-mix(in srgb, var(--c1) 60%, transparent)}
.switch input:checked + span::after{transform:translateX(18px);background:var(--switch-on);box-shadow:0 0 10px var(--switch-on)}

/* ---- card ---- */
/* ============ CARD ============ */
.card{
  background:linear-gradient(180deg,var(--card-1),var(--card-2));
  border:1px solid var(--stroke);border-radius:var(--r);padding:18px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);
}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.card-head h3{font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.card-head p{font-size:11.5px;color:var(--txt-3);margin-top:3px}

/* ---- kpi ---- */
/* ============ KPI ============ */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{
  position:relative;overflow:hidden;padding:16px;border-radius:14px;
  background:linear-gradient(180deg,var(--card-1),var(--card-2));
  border:1px solid var(--stroke);box-shadow:var(--shadow);
  transition:.22s;
}
.kpi:hover{transform:translateY(-3px);border-color:var(--stroke-2)}
.kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--kc,var(--c1));opacity:.85}
.kpi::before{
  content:"";position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;
  background:var(--kc,var(--c1));opacity:.10;filter:blur(26px);
}
.kpi-label{font-size:11.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.kpi-val{font-size:26px;font-weight:680;letter-spacing:-1px;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.kpi-foot{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--txt-3)}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:650;padding:2px 6px;border-radius:6px}
.delta.up{color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, transparent)}
.delta.down{color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, transparent)}

/* ---- kpi-off ---- */
/* KPI, для которого нет данных: гасим, чтобы «—» не читалось как ноль */
.kpi-off{opacity:.55}
.kpi-off .kpi-val{color:var(--txt-3)}

/* ---- kpi-click ---- */
/* KPI-карточка как переключатель графика */
.kpi-click{cursor:pointer}
.kpi-click:hover{border-color:var(--stroke-2);transform:translateY(-3px)}
.kpi-active{
  border-color:var(--kc,var(--c1));
  box-shadow:0 0 0 1px var(--kc,var(--c1)), 0 18px 50px -12px color-mix(in srgb, var(--shadow-ink) 65%, transparent);
}
.kpi-active::after{height:3px;opacity:1}
.kpi-active .kpi-label{color:var(--kc,var(--c1))}

/* ---- table ---- */
.table-card{padding:0;overflow:hidden}
.table-scroll{overflow-x:auto;max-height:calc(100vh - 250px)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{
  position:sticky;top:0;z-index:2;text-align:left;white-space:nowrap;
  padding:13px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  color:var(--txt-3);background:var(--th-bg);border-bottom:1px solid var(--stroke);
}
.tbl th.num,.tbl td.num{text-align:right}

/* ---- badge ---- */
.badge{font-size:9.5px;font-weight:650;padding:2px 6px;border-radius:5px;letter-spacing:.3px;text-transform:uppercase}
.badge.active{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)}
.badge.paused{background:color-mix(in srgb, var(--paper) 8%, transparent);color:var(--txt-3)}
.badge.review{background:color-mix(in srgb, var(--warn) 14%, transparent);color:var(--warn)}
.badge.issue{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad)}

/* ---- drawer ---- */
.drawer-backdrop{
  position:fixed;inset:0;background:color-mix(in srgb, var(--ink) 60%, transparent);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:.25s;z-index:40;
}
.drawer-backdrop.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);z-index:41;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border-left:1px solid var(--stroke);box-shadow:-30px 0 80px color-mix(in srgb, var(--shadow-ink) 60%, transparent);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:24px;
}
.drawer.on{transform:translateX(0)}
.drawer-close{
  position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:9px;
  background:var(--panel);border:1px solid var(--stroke);color:var(--txt-2);cursor:pointer;font-size:13px;
}
.drawer-close:hover{background:var(--panel-2);color:var(--txt)}

/* ---- toast ---- */
/* ============ TOAST ============ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);z-index:60;
  background:var(--tip-bg);border:1px solid var(--stroke-2);border-radius:11px;
  padding:11px 18px;font-size:13px;box-shadow:var(--shadow);
  opacity:0;transition:.28s;
  /* тост чисто информационный и всегда в DOM (скрыт только opacity). Без этого
     невидимый тост (z-60) на мобиле лежит поверх нижнего таб-бара и перехватывает
     тапы по навигации. pointer-events:none снимает перехват во всех режимах. */
  pointer-events:none;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- spk-load ---- */
.spk-load{text-align:center;padding:44px 20px;color:var(--txt-3)}

/* Форма: сетка полей, подпись, подсказка. Одна на всё приложение — настройки
   ИИ-агента, доступы, дальше всё, где человек что-то вводит. */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px 18px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>label{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3)}
.field .input,.field .select,.field textarea.input{width:100%;max-width:none}
.field textarea.input{min-height:72px;resize:vertical;line-height:1.5}
.field .hint{font-size:11.5px;color:var(--txt-3);line-height:1.4}
.field.wide{grid-column:1/-1}
.form-footer{position:sticky;bottom:0;padding:10px 0;background:var(--bg);border-top:1px solid var(--stroke)}
form.has-footer{padding-bottom:6px}
.field-row{display:flex;align-items:center;gap:10px;font-size:13px}
.field-row .switch{flex:none}
.chips.wrap{flex-wrap:wrap}
.check-list{display:grid;gap:6px;font-size:13px}
.check-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--stroke)}
.check-row:first-child{border-top:0}
.check-row .d{color:var(--txt-2)}
.check-row .d i{color:var(--txt-3);font-style:normal}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.mode-tile{text-align:left;cursor:pointer;padding:14px 16px;border-radius:8px;border:1px solid var(--stroke);background:var(--panel-2);color:var(--txt);font:inherit;display:flex;flex-direction:column;gap:5px}
.mode-tile:hover:not(:disabled){border-color:var(--stroke-2)}
.mode-tile.on{border-color:var(--c1);box-shadow:0 0 0 1px var(--c1)}
.mode-tile:disabled{opacity:.55;cursor:not-allowed}
.mode-tile b{font-size:14px}
.mode-tile .h{font-family:var(--mono);font-size:11px;color:var(--txt-3)}
.mode-tile .s{font-size:12px;color:var(--txt-2);line-height:1.45}
.mode-tile.danger:not(.on):not(:disabled){border-color:color-mix(in srgb, var(--bad) 35%, transparent)}
.mode-tile .now{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ok)}

/* Уведомления оболочки: колокольчик в шапке, список того, что требует внимания.
   Источники — сверки, CAPI, движок, ИИ-агент; каждая строка ведёт в свой раздел. */
.notif-wrap{position:relative}
.notif-btn{position:relative}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--bad);color: var(--on-status);font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.notif-badge.warn{background:var(--badge-bg);color:var(--badge-fg)}
.notif-pop{right:0;left:auto;width:380px}
.notif-item{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:9px 6px;border-top:1px solid var(--stroke);cursor:pointer;border-radius:8px}
.notif-item:first-child{border-top:0}
.notif-item:hover{background:var(--panel-2)}
.notif-item b{font-size:12.5px;font-weight:600;display:block}
.notif-item span{font-size:11.5px;color:var(--txt-3);display:block;margin-top:2px}
.notif-item .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--txt-3)}
.notif-item.bad .dot{background:var(--bad)}.notif-item.warn .dot{background:var(--warn)}.notif-item.ok .dot{background:var(--ok)}