/* ============================================================================
   TOKEN SAVER — общий компонентный слой.

   Раньше каждая страница держала свой набор .card / .btn / .wrap, и они
   разъехались: у демо была тень и отступ 20px, у админки — без тени и 16px,
   заголовок карточки использовал MTS Wide только в админке. Здесь одно
   определение на компонент для обеих страниц.

   Все цвета, отступы, радиусы и типографика берутся ТОЛЬКО из токенов
   (--sys-* / --const-*), чтобы tokens.css оставался регенерируемым и обе темы
   работали без ручной правки.
   ========================================================================= */

/* ─────────────────────────── база ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  /* Нативные контролы (список <select>, календарь у input[type=date],
     скроллбары) рисует браузер, а не наш CSS. Без color-scheme он берёт
     светлую схему, и в тёмной теме список моделей выходил серым по серому. */
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

body {
  min-height: 100vh;
  font-family: var(--const-typography-family-compact);
  font-size: var(--sys-typography-size-paragraph-p4);
  line-height: var(--sys-typography-lineHeight-paragraph-p4);
  color: var(--sys-text-primary);
  background: var(--sys-background-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Смена темы: плавно, но без «переливания» всей страницы при первой отрисовке.
   Класс вешает ui.js уже после загрузки, поэтому старт всегда мгновенный. */
body.theme-anim,
body.theme-anim .card,
body.theme-anim .kpi,
body.theme-anim header.top { transition: background-color .25s, color .25s, border-color .25s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.mono, .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: var(--sys-text-primaryLink); text-decoration: none; }
a:hover { text-decoration: underline; }

svg { display: block; }
img { max-width: 100%; }

/* Единое кольцо фокуса на всё приложение. :focus-visible — чтобы мышь его
   не показывала, а клавиатура показывала всегда. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--sys-accent-active);
  outline-offset: 2px;
  border-radius: var(--const-radius-01);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--const-spacing-06); top: -100px; z-index: 100;
  background: var(--sys-background-modal); color: var(--sys-text-primary);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-05) var(--const-spacing-07);
  font-weight: 500; box-shadow: var(--const-shadow-03);
  transition: top .15s;
}
.skip-link:focus { top: var(--const-spacing-06); text-decoration: none; }

/* ─────────────────────────── типографика ─────────────────────────── */

h1, .h1 {
  font-family: var(--const-typography-family-wide); font-weight: 500;
  font-size: var(--sys-typography-size-header-h1);
  line-height: var(--sys-typography-lineHeight-header-h1);
  letter-spacing: -.01em;
}
h2, .h2 {
  font-family: var(--const-typography-family-wide); font-weight: 500;
  font-size: var(--sys-typography-size-header-h3);
  line-height: var(--sys-typography-lineHeight-header-h3);
}
h3, .h3 {
  font-family: var(--const-typography-family-wide); font-weight: 500;
  font-size: var(--sys-typography-size-header-h4);
  line-height: var(--sys-typography-lineHeight-header-h4);
}

.sub {
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-paragraph-p4);
  line-height: var(--sys-typography-lineHeight-paragraph-p4);
}
.muted     { color: var(--sys-text-secondary); }
.tertiary  { color: var(--sys-text-tertiary); }
.positive  { color: var(--sys-text-positive); }
.negative  { color: var(--sys-text-negative); }
.eyebrow {
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
}

/* ─────────────────────────── layout ─────────────────────────── */

/* Колонка с общим gap, а не маргины у детей. Раньше вертикальные интервалы
   задавало правило `.card + .card`, и внутри грид-контейнеров (сравнение двух
   ответов, пара графиков) второй карточке доставался лишний margin-top: она
   съезжала вниз и оказывалась ниже соседа. */
.wrap {
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: var(--const-spacing-09) var(--const-spacing-08) var(--const-spacing-13);
  display: flex; flex-direction: column;
  gap: var(--const-spacing-07);
}
.wrap-narrow { max-width: 1080px; }

.stack   { display: flex; flex-direction: column; gap: var(--const-spacing-07); }
.stack-s { display: flex; flex-direction: column; gap: var(--const-spacing-05); }
.row     { display: flex; gap: var(--const-spacing-06); align-items: flex-end; flex-wrap: wrap; }
.row-c   { display: flex; gap: var(--const-spacing-06); align-items: center; flex-wrap: wrap; }
.right   { margin-left: auto; }
.clickable { cursor: pointer; }

/* ─────────────────────────── шапка ─────────────────────────── */

header.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--const-spacing-06);
  min-height: 64px;
  padding: var(--const-spacing-04) var(--const-spacing-08);
  background: var(--sys-background-bar);
  border-bottom: 1px solid var(--sys-background-stroke);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
}
.brand { display: flex; align-items: center; gap: var(--const-spacing-05); min-width: 0; }
.brand-logo { height: 30px; width: auto; flex-shrink: 0; }
.brand-name {
  font-family: var(--const-typography-family-wide); font-weight: 700;
  font-size: var(--sys-typography-size-header-h4); letter-spacing: .01em;
  white-space: nowrap;
}
.brand-name .red { color: var(--sys-brand-MTSRed); }
.brand-sub {
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  padding-left: var(--const-spacing-05);
  border-left: 1px solid var(--sys-background-stroke);
  white-space: nowrap;
}
.top-actions { display: flex; align-items: center; gap: var(--const-spacing-04); margin-left: auto; }

/* ─────────────────────────── кнопки ─────────────────────────── */

.btn, .btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--const-spacing-04);
  height: 40px; padding: 0 var(--const-spacing-07);
  border: 1px solid transparent; border-radius: var(--const-radius-02);
  font-family: inherit;
  font-size: var(--sys-typography-size-paragraph-p4);
  font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, filter .15s, transform .08s;
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px); }

.btn-primary { background: var(--sys-controls-primaryActive); color: var(--const-palette-greyscale-000); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }

.btn { background: var(--comp-buttons-background-secondary); color: var(--sys-text-primary); }
.btn:hover:not(:disabled) { background: var(--comp-buttons-hover-secondary); }

.btn-ghost {
  background: transparent; color: var(--sys-text-primary);
  border-color: var(--sys-background-stroke);
}
.btn-ghost:hover:not(:disabled) { background: var(--sys-background-hover); }

.btn-danger { background: var(--comp-buttons-background-negative); color: var(--sys-text-negative); }
.btn-danger:hover:not(:disabled) { background: var(--comp-buttons-hover-negative); }

.btn-sm {
  height: 30px; padding: 0 var(--const-spacing-05);
  font-size: var(--sys-typography-size-caption-c1);
  border-radius: var(--const-radius-01);
}
.btn-lg {
  height: 52px; padding: 0 var(--const-spacing-12);
  font-size: var(--sys-typography-size-paragraph-p3); font-weight: 700;
}
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

button:disabled, .btn:disabled, .btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary:disabled { background: var(--sys-controls-inactive); }

/* ─────────────────────────── поля ввода ─────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--const-spacing-04); min-width: 160px; flex: 1; }

label.field-label, .field-label {
  display: block; color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}

input[type=text], input[type=password], input[type=number], input[type=date],
input:not([type]), select, textarea {
  width: 100%; height: 40px;
  padding: 0 var(--const-spacing-06);
  background: var(--sys-background-secondary);
  color: var(--sys-text-primary);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-02);
  font-family: inherit; font-size: var(--sys-typography-size-paragraph-p4);
  transition: border-color .15s, background-color .15s;
}
textarea {
  height: auto; min-height: 132px; resize: vertical;
  padding: var(--const-spacing-05) var(--const-spacing-06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.6;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--sys-controls-stroke);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sys-accent-active); outline-offset: -1px;
  border-color: transparent;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--sys-background-disabled);
  border-color: var(--sys-background-strokeDisabled);
  color: var(--sys-text-tertiary); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--sys-text-tertiary); }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--sys-accent-negative); }

.field-error {
  color: var(--sys-text-negative);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  min-height: 16px;
}
/* --sys-background-secondary в тёмной теме полупрозрачный (alpha .25) —
   для всплывающего списка нужен непрозрачный фон, иначе опции размывает.
   В дизайн-системе за выпадающие меню отвечает именно --sys-background-modal. */
option {
  background-color: var(--sys-background-modal);
  color: var(--sys-text-primary);
}
option:disabled { color: var(--sys-text-tertiary); }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--const-spacing-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ─────────────────────────── карточки ─────────────────────────── */

.card {
  background: var(--sys-background-primaryElevated);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-03);
  padding: var(--const-spacing-08);
  box-shadow: var(--const-shadow-01);
}
.card-head {
  display: flex; align-items: flex-start; gap: var(--const-spacing-06);
  flex-wrap: wrap; margin-bottom: var(--const-spacing-07);
}
.card-head > .sub { flex-basis: 100%; margin-top: calc(-1 * var(--const-spacing-05)); }
.card h2, .card h3 { margin-bottom: var(--const-spacing-03); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: var(--const-spacing-08) var(--const-spacing-08) 0; }

/* ─────────────────────────── KPI ─────────────────────────── */

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--const-spacing-06);
}
.kpi {
  background: var(--sys-background-primaryElevated);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-03);
  padding: var(--const-spacing-07);
  box-shadow: var(--const-shadow-01);
  display: flex; flex-direction: column; gap: var(--const-spacing-03);
  position: relative; overflow: hidden;
}
/* Тонкая акцентная полоса сверху — единственное украшение, цвет из токенов. */
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sys-controls-primaryActive); opacity: .8;
}
.kpi[data-accent=positive]::before  { background: var(--sys-accent-positive); }
.kpi[data-accent=active]::before    { background: var(--sys-accent-active); }
.kpi[data-accent=highlight]::before { background: var(--sys-accent-highlight); }

.kpi .label {
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}
.kpi .value {
  font-family: var(--const-typography-family-wide); font-weight: 500;
  font-size: var(--sys-typography-size-header-h2);
  line-height: var(--sys-typography-lineHeight-header-h2);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kpi .hint {
  color: var(--sys-text-tertiary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
}

/* ─────────────────────────── пилюли и теги ─────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--const-spacing-05);
  /* Прозрачная рамка в базе: у pill-neutral она видимая, и без этого
     цветные пилюли были на 2px ниже — соседние шапки не совпадали по высоте. */
  border: 1px solid transparent;
  border-radius: var(--const-radius-01);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-caption-c1);
  font-weight: 500; white-space: nowrap;
}
.pill-ok      { background: var(--sys-background-positiveSoft);  color: var(--sys-text-positiveStrong); }
.pill-off     { background: var(--sys-background-negativeSoft);  color: var(--sys-text-negativeStrong); }
.pill-info    { background: var(--sys-background-activeSoft);    color: var(--sys-text-activeStrong); }
.pill-warn    { background: var(--sys-background-warningSoft);   color: var(--sys-text-warningStrong); }
.pill-accent  { background: var(--sys-background-highlightSoft); color: var(--sys-text-highlightStrong); }
.pill-neutral {
  background: var(--sys-background-secondary); color: var(--sys-text-secondary);
  border-color: var(--sys-background-stroke);
}

.mw-tag {
  display: inline-block; margin: 1px 2px; padding: 1px 7px;
  border-radius: var(--const-radius-01);
  background: var(--sys-background-secondary); color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c2);
  line-height: var(--sys-typography-lineHeight-caption-c1);
}

/* ─────────────────────────── табы ─────────────────────────── */

nav.tabs {
  display: flex; gap: var(--const-spacing-02);
  padding: 0 var(--const-spacing-08);
  background: var(--sys-background-primary);
  border-bottom: 1px solid var(--sys-background-stroke);
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 64px; z-index: 15;
}
nav.tabs::-webkit-scrollbar { display: none; }
nav.tabs button {
  position: relative; flex-shrink: 0;
  height: 46px; padding: 0 var(--const-spacing-07);
  background: transparent; border: 0;
  color: var(--sys-text-secondary);
  font-family: inherit; font-size: var(--sys-typography-size-paragraph-p4);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
nav.tabs button::after {
  content: ""; position: absolute; left: var(--const-spacing-05); right: var(--const-spacing-05);
  bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--sys-controls-primaryActive);
  transform: scaleX(0); transition: transform .18s;
}
nav.tabs button:hover { color: var(--sys-text-primary); background: var(--sys-background-hover); }
nav.tabs button[aria-selected=true] { color: var(--sys-text-primary); }
nav.tabs button[aria-selected=true]::after { transform: scaleX(1); }
nav.tabs button:focus-visible { outline-offset: -3px; }

/* ─────────────────────────── сегмент-контрол ─────────────────────────── */

.segmented {
  display: flex; gap: var(--const-spacing-02); padding: var(--const-spacing-02);
  background: var(--comp-segmentedControl-background-onPrimaryBg);
  border-radius: var(--const-radius-02);
}
.segmented button {
  flex: 1; height: 34px; border: 0; background: transparent;
  color: var(--sys-text-secondary);
  border-radius: var(--const-radius-01);
  font-family: inherit; font-size: var(--sys-typography-size-paragraph-p4);
  font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.segmented button[aria-pressed=true] {
  background: var(--comp-segmentedControl-indicator-onPrimaryBg);
  color: var(--sys-text-primary);
  box-shadow: var(--const-shadow-01);
}

/* ─────────────────────────── тумблер ─────────────────────────── */

.switch {
  width: 40px; height: 22px; flex-shrink: 0;
  border-radius: 11px; background: var(--sys-controls-inactive);
  position: relative; transition: background-color .18s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--const-palette-greyscale-000);
  box-shadow: var(--const-shadow-01);
  transition: left .18s;
}
[aria-checked=true] .switch { background: var(--sys-controls-primaryActive); }
[aria-checked=true] .switch::after { left: 20px; }

/* Строка «подпись + тумблер»: кнопка с role="switch", Tab и Space работают
   сами. Демо ставит такую рядом с «Отправить», админка — в модалках ключа. */
.toggle-inline {
  display: flex; align-items: center; gap: var(--const-spacing-05);
  background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
}
.toggle-inline .toggle-text { display: flex; flex-direction: column; gap: 1px; }
.toggle-inline .toggle-name {
  font-size: var(--sys-typography-size-paragraph-p4); font-weight: 500;
}
.toggle-inline .toggle-hint {
  color: var(--sys-text-tertiary); font-size: var(--sys-typography-size-caption-c1);
}
.toggle-inline:hover .toggle-name { color: var(--sys-text-secondary); }

/* ─────────────────────────── таблицы ─────────────────────────── */

.table-scroll { width: 100%; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: var(--const-spacing-05) var(--const-spacing-06);
  border-bottom: 1px solid var(--sys-background-stroke);
  font-size: var(--sys-typography-size-paragraph-p4);
  line-height: var(--sys-typography-lineHeight-paragraph-p4-tight);
  vertical-align: middle;
}
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sys-background-primaryElevated);
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
tbody tr { transition: background-color .12s; }
tbody tr:hover td { background: var(--sys-background-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.empty {
  color: var(--sys-text-tertiary); text-align: center;
  padding: var(--const-spacing-12) var(--const-spacing-07);
}

.pager {
  display: flex; align-items: center; gap: var(--const-spacing-05);
  justify-content: flex-end;
  padding: var(--const-spacing-06) var(--const-spacing-06) 0;
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
}

/* ─────────────────────────── скелетоны и загрузка ─────────────────────────── */

.skeleton {
  display: block; border-radius: var(--const-radius-01);
  background: linear-gradient(90deg,
    var(--sys-background-secondary) 25%,
    var(--sys-background-hover) 50%,
    var(--sys-background-secondary) 75%);
  background-size: 200% 100%;
  animation: sk 1.4s ease-in-out infinite;
  color: transparent; user-select: none;
}
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-line  { height: 12px; margin: 6px 0; }
.skeleton-value { height: 28px; width: 70%; }

.spin {
  display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid var(--sys-background-stroke);
  border-top-color: var(--sys-accent-active);
  border-radius: 50%; animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.loading-state {
  display: flex; align-items: center; justify-content: center;
  gap: var(--const-spacing-05); color: var(--sys-text-secondary);
  padding: var(--const-spacing-11);
}

/* ─────────────────────────── модалка ─────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: var(--const-spacing-07);
  background: var(--sys-background-overlayAlternative);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.overlay.open { display: flex; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(560px, 100%); max-height: calc(100vh - 2 * var(--const-spacing-09));
  overflow-y: auto;
  background: var(--sys-background-modal);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-04);
  padding: var(--const-spacing-09);
  box-shadow: var(--const-shadow-05);
  animation: pop .18s cubic-bezier(.2, .9, .3, 1);
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal h3 { margin-bottom: var(--const-spacing-07); }
.modal .stack { gap: var(--const-spacing-06); }
.modal .actions {
  display: flex; gap: var(--const-spacing-04); justify-content: flex-end;
  margin-top: var(--const-spacing-09); flex-wrap: wrap;
}

.key-reveal {
  background: var(--sys-background-secondary);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; word-break: break-all; line-height: 1.6;
}

/* ─────────────────────────── тосты ─────────────────────────── */

#toasts {
  position: fixed; bottom: var(--const-spacing-08); right: var(--const-spacing-08); z-index: 99;
  display: flex; flex-direction: column; gap: var(--const-spacing-04);
  max-width: min(380px, calc(100vw - 2 * var(--const-spacing-08)));
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--const-spacing-05);
  background: var(--sys-background-inverted); color: var(--sys-text-inverted);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-05) var(--const-spacing-07);
  box-shadow: var(--const-shadow-03);
  font-size: var(--sys-typography-size-paragraph-p4);
  animation: slide .2s cubic-bezier(.2, .9, .3, 1);
  pointer-events: auto;
}
.toast.err { color: var(--sys-text-negative); }
.toast::before { content: "✓"; font-weight: 700; opacity: .8; }
.toast.err::before { content: "!"; }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────── адаптив ─────────────────────────── */

@media (max-width: 900px) {
  .wrap { padding: var(--const-spacing-07) var(--const-spacing-06) var(--const-spacing-12); }
  .card { padding: var(--const-spacing-07); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .value { font-size: var(--sys-typography-size-header-h3); }
  header.top { padding: var(--const-spacing-04) var(--const-spacing-06); }
  nav.tabs { padding: 0 var(--const-spacing-06); }
}

@media (max-width: 640px) {
  .brand-sub { display: none; }
  .brand-logo { height: 24px; }

  /* На 375px название и обе кнопки в один ряд не помещаются и наезжают друг
     на друга. Разносим на две строки: так не ломается и на 320px. */
  header.top {
    flex-wrap: wrap;
    row-gap: var(--const-spacing-04);
    padding-bottom: var(--const-spacing-05);
  }
  .brand { flex: 1 1 100%; }
  .top-actions { width: 100%; margin-left: 0; }
  .top-actions > * { flex: 1; }

  /* Шапка стала выше, а её высота теперь зависит от длины названия — вместо
     подгонки магического top просто отпускаем табы из sticky. */
  nav.tabs { position: static; }
  .kpi-grid { grid-template-columns: 1fr; }
  .modal { padding: var(--const-spacing-07); border-radius: var(--const-radius-03); }
  .modal .actions > * { flex: 1; }
  #toasts { left: var(--const-spacing-06); right: var(--const-spacing-06); max-width: none; }
  .field { min-width: 100%; }
  .pager { justify-content: space-between; }

  /* Таблицы перестраиваются в список карточек: у логов десяток колонок, и
     любой горизонтальный скролл на 375px делает их нечитаемыми. Подписи
     проставляет stampTableLabels() в ui.js, копируя их из <th>. */
  table.responsive thead { display: none; }
  table.responsive,
  table.responsive tbody,
  table.responsive tr,
  table.responsive td { display: block; width: 100%; }
  table.responsive tr {
    border: 1px solid var(--sys-background-stroke);
    border-radius: var(--const-radius-02);
    padding: var(--const-spacing-05);
    margin-bottom: var(--const-spacing-05);
    background: var(--sys-background-secondary);
  }
  table.responsive td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--const-spacing-06);
    border: 0; padding: var(--const-spacing-03) 0; text-align: left;
  }
  table.responsive td::before {
    content: attr(data-label);
    flex-shrink: 0; color: var(--sys-text-secondary);
    font-size: var(--sys-typography-size-caption-c1);
    font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  }
  table.responsive td.num { text-align: right; }
  table.responsive td[colspan] { display: block; }
  table.responsive td[colspan]::before { content: none; }
}