/* AD-Sender — «Сигнал». Готовая замена service/web/src/styles/theme.css.
   Значения посчитаны и проверены: см. карточку «Аудит контраста». */

/* ============================================================================
   AD-Sender — дизайн-система «Сигнал».
   Принцип: интерфейс ахроматичен, цвет несёт смысл. Хром (кнопки, навигация,
   границы) — строго нейтральный; насыщенный цвет появляется только там, где
   кодирует состояние, канал или ряд данных.
   Все значения ниже посчитаны и проверены, а не подобраны на глаз.
   ========================================================================= */

/* Светлая тема — полноправная, не оверрайд. Тема по умолчанию в приложении
   остаётся тёмной (класс ставит инлайн-скрипт в index.html), поэтому обе
   описаны явно и симметрично. */
:root, .theme-light {
  --bg-app:#faf9f7; --bg-canvas:#f2f0ec;
  --surface-1:#ffffff; --surface-2:#f4f2ef; --surface-3:#eae7e2; --surface-4:#ddd9d2;
  --ink-strong:#1a1814; --ink:#2e2a24; --ink-muted:#5c564c; --ink-faint:#8a8275;
  --action:#23201b; --action-fg:#faf9f7; --focus:#0f7b8a; --link:#0d6b78;
  --border:rgba(26,24,20,0.12); --border-subtle:rgba(26,24,20,0.07); --border-strong:rgba(26,24,20,0.22); --overlay:rgba(26,24,20,0.42);
  --ok:#0f7038; --ok-bg:#e8f2ea; --warn:#8a5a08; --warn-bg:#f7efdf;
  --err:#b3231f; --err-bg:#fbeae9; --info:#1a5fb4; --info-bg:#e8f0fa;
  --d1:#328d53; --d2:#8564ba; --d3:#af6300; --d4:#009ea0;
  --d5:#ba564d; --d6:#367bc3; --d7:#8e7800; --d8:#ae5589;
  --n-base:#328d53; --n-sms:#367bc3; --n-telegram:#00999b; --n-call:#af6300; --n-filter:#8e7800;
  --n-cond:#8564ba; --n-action:#ae5589; --n-stop:#ba564d; --n-wait:#716d69; --n-soon:#8d8984;
  --stage-1:#3fbfcc; --stage-2:#00aab8; --stage-3:#00939f; --stage-4:#007d87; --stage-5:#006770; --stage-6:#005259;
  --track:rgba(26,24,20,0.09);
  color-scheme:light;
}
.theme-dark {
  --bg-app:#131210; --bg-canvas:#0e0d0c;
  --surface-1:#1c1b18; --surface-2:#232120; --surface-3:#2c2a27; --surface-4:#383430;
  --ink-strong:#f7f5f1; --ink:#e8e4dd; --ink-muted:#b3aca1; --ink-faint:#837b6e;
  --action:#f2efe9; --action-fg:#1c1b18; --focus:#4bb8c9; --link:#6ecad9;
  --border:rgba(247,245,241,0.13); --border-subtle:rgba(247,245,241,0.07); --border-strong:rgba(247,245,241,0.24); --overlay:rgba(8,7,6,0.68);
  --ok:#5cc47f; --ok-bg:#16261b; --warn:#e0a63c; --warn-bg:#2a2116;
  --err:#f0736f; --err-bg:#2b1917; --info:#6aa9f0; --info-bg:#151f2c;
  --d1:#3d9e5f; --d2:#9473cb; --d3:#c47000; --d4:#00a0a2;
  --d5:#cb655b; --d6:#468bd4; --d7:#9f8600; --d8:#bf6498;
  --n-base:#3d9e5f; --n-sms:#468bd4; --n-telegram:#00a0a2; --n-call:#c47000; --n-filter:#9f8600;
  --n-cond:#9473cb; --n-action:#bf6498; --n-stop:#cb655b; --n-wait:#7e7a75; --n-soon:#625f5b;
  --stage-1:#005c64; --stage-2:#00747e; --stage-3:#008d99; --stage-4:#00a7b5; --stage-5:#00c2d1; --stage-6:#00ddef;
  --track:rgba(247,245,241,0.10);
  color-scheme:dark;
}

/* Тема ставится на КОНТЕЙНЕР, а не только на :root, поэтому цвет текста надо переобъявить
   на самом переключателе. Иначе body уже вычислил color из светлых токенов, а потомки
   наследуют готовое значение — и в тёмной карточке весь текст без своего класса
   (ячейки таблиц, простые span) оставался тёмно-серым на тёмном фоне.
   Поймано рендером карточки в headless-браузере: заголовки и бейджи были яркими,
   потому что красят себя сами, а «Администратор» в таблице — нет. */
.theme-light,.theme-dark{color:var(--ink);background:var(--bg-app)}

/* Шрифты раздаются со своего origin — ссылок на fonts.googleapis.com больше нет
   ни здесь, ни в продукте. Оба вариативные и подрезаны до латиницы с кириллицей:
   Inter 176 КБ вместо 859, JetBrains Mono 58 КБ вместо 296. В продукте те же
   файлы лежат в service/web/public/fonts, пересборка — web/tools/build-fonts.py. */
@font-face{font-family:'Inter var';src:url('../fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono var';src:url('../fonts/jetbrains-mono-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}

:root {
  --font: 'Inter var', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono var', 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Шкала с более крупным шагом наверху: в старой системе 24→30 давало слабую
     иерархию, заголовок экрана почти не отличался от числа в KPI. */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px;
  --fs-20:20px; --fs-26:26px; --fs-34:34px;
  --lh-tight:1.18; --lh:1.5;
  --fw:400; --fw-med:500; --fw-semi:600; --fw-bold:700;
  --caps:0.07em;

  /* Сетка 8px */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  /* Радиусов четыре вместо семи: 4 (мелочь) / 6 (контролы) / 10 (контейнеры) / кольцо. */
  --r-xs:4px; --r:6px; --r-lg:10px; --r-full:999px;

  /* Три уровня высоты. Статичные карточки — ПЛОСКИЕ, только граница.
     Тень означает «висит над страницей» и больше ничего. */
  --e-pop:0 6px 16px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.10);
  --e-modal:0 24px 56px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);

  /* Плотность: comfortable по умолчанию, compact для таблиц и списков. */
  --row-h:40px; --row-h-compact:32px; --control-h:34px; --control-h-sm:28px;

  --topbar-h:52px; --rail-w:56px; --rail-w-open:224px; --inspector-w:336px;
  --t-fast:120ms cubic-bezier(0.2,0,0.15,1); --t:180ms cubic-bezier(0.2,0,0.15,1);
  --ring:0 0 0 2px var(--surface-1), 0 0 0 4px var(--focus);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{
  font-family:var(--font); font-size:var(--fs-13); line-height:var(--lh);
  color:var(--ink); background:var(--bg-app);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
svg{display:block;flex-shrink:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink-strong);line-height:var(--lh-tight);font-weight:var(--fw-semi)}
h1{font-size:var(--fs-26);letter-spacing:-0.02em}
h2{font-size:var(--fs-20);letter-spacing:-0.01em}
h3{font-size:var(--fs-16)}
h4{font-size:var(--fs-14)}
code,kbd,pre{font-family:var(--mono);font-size:0.92em}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}

.row{display:flex;align-items:center;gap:var(--sp-3)}
.col{display:flex;flex-direction:column;gap:var(--sp-3)}
.grow{flex:1 1 auto;min-width:0}
.muted{color:var(--ink-muted)}
.faint{color:var(--ink-faint)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.caps{text-transform:uppercase;letter-spacing:var(--caps);font-size:var(--fs-11);font-weight:var(--fw-semi);color:var(--ink-muted)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------------- КНОПКИ ---------------------------------- */
/* Первичное действие — АХРОМАТИЧНОЕ. Раньше оно было индиго и конкурировало
   за внимание со статусами; теперь самый контрастный элемент на экране — это
   действие, а цвет остаётся смыслу. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--control-h);padding:0 var(--sp-4);
  font-size:var(--fs-13);font-weight:var(--fw-med);line-height:1;
  color:var(--ink);background:var(--surface-1);
  border:1px solid var(--border-strong);border-radius:var(--r);
  white-space:nowrap;transition:background var(--t-fast),border-color var(--t-fast);
}
.btn svg{width:15px;height:15px}
.btn:hover{background:var(--surface-2)}
.btn:active{background:var(--surface-3)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-primary{color:var(--action-fg);background:var(--action);border-color:var(--action)}
.btn-primary:hover{background:var(--action);opacity:.88}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{color:var(--err);background:transparent;border-color:var(--err)}
.btn-danger:hover{background:var(--err-bg)}
.btn-sm{height:var(--control-h-sm);padding:0 var(--sp-3);font-size:var(--fs-12)}
.btn-icon{width:var(--control-h);padding:0}
.btn-icon.btn-sm{width:var(--control-h-sm)}

/* ------------------------------ КОНТЕЙНЕРЫ -------------------------------- */
/* Плоско: граница вместо тени. Тень — только у всплывающего и модального. */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg)}
.card-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border-subtle)}
.card-title{font-size:var(--fs-14);font-weight:var(--fw-semi);color:var(--ink-strong)}
.card-sub{font-size:var(--fs-12);color:var(--ink-muted);margin-top:2px}
.card-body{padding:var(--sp-5)}
.card-actions{display:flex;gap:var(--sp-2);margin-left:auto}

/* -------------------------------- СТАТУС ---------------------------------- */
/* Статус НИКОГДА не только цвет: точка + подпись обязательны. */
.badge{
  display:inline-flex;align-items:center;gap:6px;height:21px;padding:0 var(--sp-2);
  font-size:var(--fs-11);font-weight:var(--fw-semi);line-height:1;
  border-radius:var(--r-xs);white-space:nowrap;
  color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--border-subtle);
}
.badge::before{content:"";width:5px;height:5px;border-radius:var(--r-full);background:currentColor;flex-shrink:0}
.badge-ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.badge-warn{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.badge-err{color:var(--err);background:var(--err-bg);border-color:transparent}
.badge-info{color:var(--info);background:var(--info-bg);border-color:transparent}
.badge-live::before{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* --------------------------------- ЧИПЫ ----------------------------------- */
/* Снимаемый фильтр — отдельный компонент, не бейдж. На бейдже он выглядел почти
   так же, но приносил с собой точку-индикатор, которая в этой системе означает
   состояние объекта; у фильтра состояния нет. Крестик — настоящая кнопка с
   доступным именем и своей зоной нажатия, а не покрашенный в faint символ. */
.chip{
  display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 2px 0 var(--sp-2);
  font-size:var(--fs-12);line-height:1;white-space:nowrap;
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);
}
.chip b{font-weight:var(--fw-semi)}
.chip-x{
  display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;
  border-radius:var(--r-xs);color:var(--ink-muted);font-size:13px;line-height:1;
  transition:background var(--t-fast),color var(--t-fast);
}
.chip-x:hover{background:var(--surface-3);color:var(--ink-strong)}

/* -------------------------------- ТАБЛИЦЫ --------------------------------- */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.table thead th{
  padding:var(--sp-2) var(--sp-4);text-align:left;
  font-size:var(--fs-11);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:var(--caps);
  color:var(--ink-muted);background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;
}
.table tbody td{height:var(--row-h);padding:0 var(--sp-4);border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.table tbody tr:hover td{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table td.num,.table th.num{text-align:right}
.table .strong{color:var(--ink-strong);font-weight:var(--fw-med)}
/* Зебра убрана: при hover-подсветке строки она давала три оттенка фона подряд
   и мешала читать. Разделяет строки граница, а не заливка. */
.table-compact tbody td{height:var(--row-h-compact)}

/* ---------------------------------- KPI ----------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:var(--sp-4)}
.kpi{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg)}
.kpi-label{font-size:var(--fs-11);font-weight:var(--fw-semi);text-transform:uppercase;letter-spacing:var(--caps);color:var(--ink-muted)}
.kpi-value{font-size:var(--fs-34);font-weight:var(--fw-semi);line-height:1;letter-spacing:-0.025em;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.kpi-value small{font-size:var(--fs-14);font-weight:var(--fw-med);color:var(--ink-muted);margin-left:3px}
.kpi-foot{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--ink-muted)}
.kpi-delta{font-weight:var(--fw-med)}
.kpi-delta.up{color:var(--ok)} .kpi-delta.down{color:var(--err)}

/* --------------------------------- ПОЛЯ ----------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:var(--fs-12);font-weight:var(--fw-med);color:var(--ink)}
/* Хинт — на --ink-muted, а не --ink-faint. Faint сознательно выведен за AA (3.4:1)
   и годится только для необязательного текста, а под полями им подписывают роль
   в проекте, остаток резервных кодов и дату смены пароля — это содержание.
   За faint остаются плейсхолдеры и disabled: WCAG 1.4.3 их не покрывает. */
.hint{font-size:var(--fs-11);color:var(--ink-muted)}
.input,input[type=text],input[type=password],input[type=search],select,textarea{
  width:100%;height:var(--control-h);padding:0 var(--sp-3);font-size:var(--fs-13);
  color:var(--ink);background:var(--surface-1);
  border:1px solid var(--border-strong);border-radius:var(--r);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
textarea{height:auto;min-height:76px;padding:var(--sp-2) var(--sp-3);line-height:var(--lh);resize:vertical}
.input::placeholder,textarea::placeholder{color:var(--ink-faint)}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.input:disabled,input:disabled{background:var(--surface-2);color:var(--ink-faint);cursor:not-allowed}
.input-err{border-color:var(--err)}
.err-text{font-size:var(--fs-11);color:var(--err);display:flex;align-items:center;gap:4px}

.seg{display:inline-flex;padding:2px;gap:2px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--r)}
.seg button{height:26px;padding:0 var(--sp-3);border-radius:var(--r-xs);font-size:var(--fs-12);font-weight:var(--fw-med);color:var(--ink-muted)}
.seg button.on{background:var(--surface-1);color:var(--ink-strong);border:1px solid var(--border)}

.switch{position:relative;display:inline-flex;width:34px;height:20px;flex-shrink:0}
.switch i{width:100%;height:100%;border-radius:var(--r-full);background:var(--surface-4);display:block;transition:background var(--t-fast)}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:var(--r-full);background:var(--surface-1);transition:transform var(--t-fast)}
.switch.on i{background:var(--action)}
.switch.on i::after{transform:translateX(14px);background:var(--action-fg)}

/* ------------------------------- НАВИГАЦИЯ -------------------------------- */
/* Топбар непрозрачный: стеклянное размытие убрано — под ним ездили таблицы,
   и текст шапки читался поверх цифр. */
.topbar{display:flex;align-items:center;gap:var(--sp-4);height:var(--topbar-h);padding:0 var(--sp-4);
  background:var(--surface-1);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);font-weight:var(--fw-semi);color:var(--ink-strong);letter-spacing:-0.01em}
.brand-mark{width:22px;height:22px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--action);color:var(--action-fg);font-size:11px;font-weight:var(--fw-bold)}
.rail{width:var(--rail-w-open);flex-shrink:0;background:var(--surface-1);border-right:1px solid var(--border);padding:var(--sp-3) var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-4)}
.rail-group{display:flex;flex-direction:column;gap:1px}
.rail-group>.caps{padding:0 var(--sp-2) var(--sp-1)}
.nav{display:flex;align-items:center;gap:var(--sp-3);height:34px;padding:0 var(--sp-2);border-radius:var(--r);color:var(--ink-muted);font-size:var(--fs-13);font-weight:var(--fw-med)}
.nav .ic{width:18px;height:18px;display:grid;place-items:center;opacity:.85}
.nav:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
/* Активный пункт — нейтральная заливка + левая метка, а не цветная плашка.
   Цветной активный пункт спорил бы со статусами в таблице рядом. */
.nav.on{background:var(--surface-3);color:var(--ink-strong);position:relative}
.nav.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:var(--r-full);background:var(--action)}
.nav.on{padding-left:calc(var(--sp-2) + 4px)}

/* --------------------------------- УЗЛЫ ----------------------------------- */
/* Тип узла несёт ИКОНКУ и ПОДПИСЬ всегда; цвет — вторичный канал.
   11 типов невозможно развести цветом при произвольном соседстве (проверено:
   all-pairs ΔE падает до 0.5), поэтому цвет здесь никогда не единственный. */
.node{width:216px;background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden}
.node-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border-bottom:1px solid var(--border-subtle)}
.node-ic{width:24px;height:24px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-xs);color:#fff;background:var(--nc);font-size:11px;font-weight:var(--fw-bold)}
/* Название и тип узла — колонка, а не два инлайновых span подряд. Без этого они
   склеивались в «ПриветствиеSMS»: на скриншоте конструктора видно сразу, в коде — нет. */
.node-head>span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.node-title{display:block;font-size:var(--fs-13);font-weight:var(--fw-semi);color:var(--ink-strong);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node-type{display:block;font-size:var(--fs-11);line-height:1.2;color:var(--ink-muted)}
.node-body{padding:var(--sp-3);font-size:var(--fs-12);color:var(--ink-muted)}
.node-rule{height:2px;background:var(--nc)}
.node.sel{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}
.canvas{background:
  radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/20px 20px, var(--bg-canvas)}

/* ------------------------------ СПИСОК-ДЕТАЛЬ ------------------------------ */
/* Элемент библиотеки шаблонов. Открытый отмечается так же, как активный пункт
   навигации, — нейтральной заливкой с меткой слева, а не цветной плашкой:
   правило одно на всю систему, и «что сейчас открыто» должно читаться одинаково. */
.tpl{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r);
  border:1px solid transparent;transition:background var(--t-fast);
}
.tpl:hover{background:var(--surface-2)}
.tpl.on{background:var(--surface-3);position:relative;padding-left:calc(var(--sp-3) + 4px)}
.tpl.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:var(--r-full);background:var(--action)}
.tpl-name{font-size:var(--fs-13);font-weight:var(--fw-med);color:var(--ink-strong)}
.tpl-body{font-size:var(--fs-11);color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ------------------------- ИСХОД ДЕЙСТВИЯ И ЯЧЕЙКИ ------------------------- */
/* Строка журнала — не бейдж. Бейдж означает состояние объекта («Может входить»),
   а здесь показан результат того, что человек только что нажал. Три исхода
   различаются иконкой И подложкой: на одном цвете «снимать было нечего» читалось
   бы как выполненная разблокировка. */
.log-row{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r);font-size:var(--fs-12);line-height:var(--lh);color:var(--ink)}
.log-mark{display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;margin-top:1px;
  border-radius:var(--r-full);font-size:10px;font-weight:var(--fw-bold);color:#fff}
.log-row.ok{background:var(--ok-bg)}   .log-row.ok .log-mark{background:var(--ok)}
.log-row.bad{background:var(--err-bg)} .log-row.bad .log-mark{background:var(--err)}
.log-row.info{background:var(--surface-2)} .log-row.info .log-mark{background:var(--ink-muted)}

/* Ячейка «главное + уточнение» в две строки. break-word, а не anywhere: anywhere рвал
   почту посреди домена, хотя место для целого адреса было. */
.stack{display:flex;flex-direction:column;gap:2px;min-width:0}
.stack-main{color:var(--ink-strong);font-weight:var(--fw-med);overflow-wrap:break-word}

/* Широкая таблица не обрезается краем карточки, а прокручивается внутри своего контейнера. */
.table-wrap{width:100%;overflow-x:auto}

/* Аккаунт: две колонки только там, где таблица команды помещается целиком. Пять колонок
   с кнопкой «Закрыть доступ» не сжимаются ниже ~700px — ниже 1400 уходим в одну колонку. */
.acct-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1400px){.acct-grid{grid-template-columns:1fr}}

/* ------------------------------- ПРОЧЕЕ ----------------------------------- */
.meter{height:5px;border-radius:var(--r-full);background:var(--track);overflow:hidden}
.meter>span{display:block;height:100%;background:var(--action)}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-9) var(--sp-5);text-align:center}
.empty-t{font-size:var(--fs-16);font-weight:var(--fw-semi);color:var(--ink-strong)}
.empty p{font-size:var(--fs-13);color:var(--ink-muted);max-width:38ch}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sh 1.4s ease infinite;border-radius:var(--r-xs)}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
.kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;font-family:var(--mono);font-size:var(--fs-11);color:var(--ink-muted);background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--r-xs)}
.modal{width:min(520px,100%);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-modal)}
.pop{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-pop);padding:var(--sp-2);min-width:200px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}