/* Точка входа стилей (build-free CSS, без Tailwind). Дизайн-система — в ds/*,
   проектные добавки/мосты — ниже. Vite бандлит набор @import в один CSS. */

/* Все @import обязаны идти до прочих правил (требование CSS). */

/* ── Дизайн-система (DS): шрифты + токены + база. */

/* ============================================================
   ШРИФТЫ (self-host, оба семейства).
   Inter (вариативный, текущий проектный) + IBM Plex Sans
   (вариативный) / IBM Plex Mono (400/600) из дизайн-системы.
   Файлы лежат в front/assets/fonts/ и отдаются publicDir Vite
   по /fonts/…. Подключение шрифта переключается осью data-font
   (см. tokens/typography.css), оба грузятся параллельно, чтобы
   можно было сравнить (этап выбора — позже).
   Subset-ы (unicode-range) — как у fontsource: latin + latin-ext
   + cyrillic + cyrillic-ext (проект русскоязычный).
   ============================================================ */

/* ---------- Inter (вариативный, opsz+wght) ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter'), url('../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

/* ---------- IBM Plex Sans (вариативный, wght 100–700) ---------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../../fonts/IBMPlexSans/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../../fonts/IBMPlexSans/ibm-plex-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../../fonts/IBMPlexSans/ibm-plex-sans-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../../fonts/IBMPlexSans/ibm-plex-sans-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ---------- IBM Plex Mono (400 / 600) ---------- */

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-cyrillic-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../../fonts/IBMPlexMono/ibm-plex-mono-cyrillic-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* @font-face Inter + IBM Plex (ось data-font) */

/* ============================================================
   ТИПОГРАФИКА (адаптировано из DS).
   Ось шрифта: data-font на <html> переключает активное семейство
   между Inter (дефолт проекта) и IBM Plex (дизайн-система). Оба
   self-host (см. ../fonts.css). Финальный выбор — позже, пока
   переключаемо «на сравнить».
   Шкала/начертания/трекинг — из DS (база 13px под плотный UI).
   ============================================================ */

:root {
  /* Семейства-кандидаты */
  --font-inter-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-plex-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-plex-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --font-ui-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Активные токены — потребляются компонентами/базой.
     Дефолт (нет data-font / data-font="inter") = Inter. */
  --font-sans: var(--font-inter-sans);
  --font-mono: var(--font-ui-mono);

  /* Type scale — небольшая, под информационную плотность.
     База 13px (Plex/Inter читаемы за счёт крупного x-height). */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   19px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-caps: 0.06em;
  --tracking-wide: 0.02em;
}

/* Inter не имеет отдельного mono-семейства — для него mono остаётся системным. */

[data-font="inter"] {
  --font-sans: var(--font-inter-sans);
  --font-mono: var(--font-ui-mono);
}

/* IBM Plex — sans + mono из DS. */

[data-font="plex"] {
  --font-sans: var(--font-plex-sans);
  --font-mono: var(--font-plex-mono);
}

/* --font-sans/-mono (ось data-font) + шкала --text-* */

/* ============================================================
   NEUTRAL LAYER  →  решает LIGHT vs DARK (из DS, без изменений).
   Владеет: surfaces, borders, text. Независим от accent.
   Переключается data-theme на <html>. Голый :root = dark (как в
   DS); в проекте тема всегда выставляется явно skin-store'ом
   (дефолт проекта — light), см. спеку §6.2.
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #0e1116;
  --surface:         #161a21;
  --surface-raised:  #1e242d;
  --surface-sunken:  #0b0e12;

  --border:          #2a3039;
  --border-strong:   #3a424d;

  --text:            #e6e9ee;
  --text-muted:      #98a1ad;
  --text-faint:      #6b727d;

  --overlay:         color-mix(in srgb, #000 62%, transparent);
  --hover-overlay:   color-mix(in srgb, #fff 6%, transparent);
  --press-overlay:   color-mix(in srgb, #fff 10%, transparent);
  --ring-offset:     var(--surface);
}

[data-theme="light"] {
  color-scheme: light;

  --bg:              #f4f5f7;
  --surface:         #ffffff;
  --surface-raised:  #ffffff;
  --surface-sunken:  #eef0f3;

  --border:          #dde1e6;
  --border-strong:   #c4cad2;

  --text:            #1c2024;
  --text-muted:      #5c636d;
  --text-faint:      #8b929c;

  --overlay:         color-mix(in srgb, #0e1116 40%, transparent);
  --hover-overlay:   color-mix(in srgb, #1c2024 4%, transparent);
  --press-overlay:   color-mix(in srgb, #1c2024 8%, transparent);
  --ring-offset:     var(--surface);
}

/* --bg/--surface/--text/--border* (light/dark) */

/* ============================================================
   ACCENT LAYER  →  бренд (azure / neon / ember). Из DS, без
   изменений и без 4-го цвета (решение: используем только цвета DS).
   Независим от neutral. SKIN = data-theme × data-accent.
   Переключается data-accent на <html>. Голый :root = azure.

   Токены: --accent / -hover / -active / -fg / -subtle / -text,
   плюс --focus-ring (производный от accent).
   Status-токены — в status.css, от accent НЕ зависят.
   ============================================================ */

/* ---- AZURE (дефолт) ----
   Акцент = oklch(62% .19 256) → #2584f5; ramp по той же оси (hover светлее, active темнее). */

:root,
[data-theme="dark"][data-accent="azure"] {
  --accent:        #2584f5;
  --accent-hover:  #469bff;
  --accent-active: #006ddd;
  --accent-fg:     #052233;
  --accent-subtle: #12283a;
  --accent-text:   #5cbcf3;
  --focus-ring:    color-mix(in srgb, #2584f5 55%, transparent);
}

[data-theme="light"][data-accent="azure"] {
  --accent:        #2584f5;
  --accent-hover:  #469bff;
  --accent-active: #006ddd;
  --accent-fg:     #ffffff;
  --accent-subtle: #e6f3fc;
  --accent-text:   #0969ab;
  --focus-ring:    color-mix(in srgb, #2584f5 45%, transparent);
}

/* ---- NEON (lime/chartreuse) — палитра от Claude Design ---- */

[data-theme="dark"][data-accent="neon"] {
  --accent:        #558000;
  --accent-hover:  #609000;
  --accent-active: #4a6e00;
  --accent-fg:     #ffffff;
  --accent-subtle: #1b2606;
  --accent-text:   #aef016;
  --focus-ring:    color-mix(in srgb, #85c800 45%, transparent);
}

[data-theme="light"][data-accent="neon"] {
  --accent:        #517d00;
  --accent-hover:  #5c8c00;
  --accent-active: #456a00;
  --accent-fg:     #ffffff;
  --accent-subtle: #eef7d6;
  --accent-text:   #3d6300;
  --focus-ring:    color-mix(in srgb, #517d00 40%, transparent);
}

/* ---- EMBER ----
   База #de4c4a (oklch 62% .18 25); ramp по oklch-оси (dark: hover светлее, light: hover темнее). */

[data-theme="dark"][data-accent="ember"] {
  --accent:        #de4c4a;
  --accent-hover:  #ed625d;
  --accent-active: #c63436;
  --accent-fg:     #ffffff;
  --accent-subtle: #371210;
  --accent-text:   #ff7c75;
  --focus-ring:    color-mix(in srgb, #de4c4a 50%, transparent);
}

[data-theme="light"][data-accent="ember"] {
  --accent:        #de4c4a;
  --accent-hover:  #c63436;
  --accent-active: #b42027;
  --accent-fg:     #ffffff;
  --accent-subtle: #ffe7e4;
  --accent-text:   #b42027;
  --focus-ring:    color-mix(in srgb, #de4c4a 45%, transparent);
}

/* --accent* (azure/neon/ember) */

/* ============================================================
   STATUS LAYER  →  семантические цвета (из DS, без изменений).
   НЕзависимы от accent. Флипаются только с data-theme.
   Для каждого статуса: --{s} / --{s}-text / --{s}-subtle / --{s}-border.
   ============================================================ */

:root,
[data-theme="dark"] {
  --success:       #3ecf86;
  --warning:       #f0b73b;
  --error:         #ef6a6a;
  --info:          #5aa2f0;

  --success-text:  #5cd99c;
  --warning-text:  #f3c45f;
  --error-text:    #f28686;
  --info-text:     #7db4f4;

  --success-subtle: color-mix(in srgb, #3ecf86 16%, var(--surface));
  --warning-subtle: color-mix(in srgb, #f0b73b 16%, var(--surface));
  --error-subtle:   color-mix(in srgb, #ef6a6a 16%, var(--surface));
  --info-subtle:    color-mix(in srgb, #5aa2f0 16%, var(--surface));

  --success-border: color-mix(in srgb, #3ecf86 40%, var(--border));
  --warning-border: color-mix(in srgb, #f0b73b 40%, var(--border));
  --error-border:   color-mix(in srgb, #ef6a6a 40%, var(--border));
  --info-border:    color-mix(in srgb, #5aa2f0 40%, var(--border));
}

[data-theme="light"] {
  --success:       #2fae6a;
  --warning:       #d99211;
  --error:         #d64545;
  --info:          #3a82d6;

  --success-text:  #1f8f53;
  --warning-text:  #9a6708;
  --error-text:    #b53636;
  --info-text:     #2b67ad;

  --success-subtle: color-mix(in srgb, #2fae6a 12%, var(--surface));
  --warning-subtle: color-mix(in srgb, #d99211 14%, var(--surface));
  --error-subtle:   color-mix(in srgb, #d64545 12%, var(--surface));
  --info-subtle:    color-mix(in srgb, #3a82d6 12%, var(--surface));

  --success-border: color-mix(in srgb, #2fae6a 45%, var(--border));
  --warning-border: color-mix(in srgb, #d99211 45%, var(--border));
  --error-border:   color-mix(in srgb, #d64545 45%, var(--border));
  --info-border:    color-mix(in srgb, #3a82d6 45%, var(--border));
}

/* --success/--warning/--error/--info */

/* ============================================================
   SPACING · RADIUS · SHADOW · DENSITY · MOTION · МЕТРИКИ ШЕЛЛА
   (из DS, без изменений). Spacing — строгая 4px-сетка.
   Density — 3-я независимая ось: data-density="compact|comfortable"
   (дефолт compact). Ремапит ТОЛЬКО размеры контролов/строк/полей,
   не саму spacing-шкалу.
   ============================================================ */

:root {
  /* ---- 4px spacing ---- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Elevation (без свечения) ---- */
  --shadow-xs: 0 1px 2px color-mix(in srgb, #000 18%, transparent);
  --shadow-sm: 0 1px 3px color-mix(in srgb, #000 22%, transparent),
               0 1px 2px color-mix(in srgb, #000 16%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, #000 24%, transparent),
               0 2px 4px color-mix(in srgb, #000 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000 36%, transparent),
               0 4px 10px color-mix(in srgb, #000 18%, transparent);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(0.2, 0, 0.13, 1);
  --dur-fast:    90ms;
  --dur:         140ms;
  --dur-slow:    220ms;

  /* ---- Метрики app-shell ---- */
  --sidebar-w:           236px;
  --sidebar-w-collapsed: 52px;
  --header-h:            48px;
  --z-header:    50;
  --z-sidebar:   40;
  --z-dropdown:  100;
  --z-modal:     200;
  --z-toast:     300;
}

/* ---- DENSITY: compact (дефолт) ---- */

:root,
[data-density="compact"] {
  --control-h:    28px;
  --control-h-sm: 22px;
  --field-h:      30px;
  --row-h:        34px;
  --row-h-head:   34px;
  --pad-x:        8px;
  --pad-y:        4px;
  --cell-pad-x:   10px;
  --gap:          8px;
  --section-gap:  16px;
}

/* ---- DENSITY: comfortable ---- */

[data-density="comfortable"] {
  --control-h:    34px;
  --control-h-sm: 28px;
  --field-h:      38px;
  --row-h:        44px;
  --row-h-head:   40px;
  --pad-x:        12px;
  --pad-y:        8px;
  --cell-pad-x:   14px;
  --gap:          12px;
  --section-gap:  24px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}

/* --space/--radius/--control-h/--field-h/density */

/* ============================================================
   BASE / RESET (из DS, без изменений).
   Базовый тип body, box-model, видимость фокуса, tabular-nums.
   ВНИМАНИЕ: задаёт глобальный body — активируется только когда
   ds.css будет подключён в app.css (этап снятия Tailwind). На
   этапе 0 файл присутствует, но в живой бандл не входит.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

a { color: var(--accent-text); text-decoration: none; }

a:hover { text-decoration: underline; }

button { font-family: inherit; }

.tnum,
[data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.mono { font-family: var(--font-mono); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 3px solid var(--surface);
}

*::-webkit-scrollbar-track { background: transparent; }

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.focus-ring:focus-visible,
:where(button, a, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

/* reset/box-sizing/body/scrollbars/focus/a/headings */

/* ── Компоненты DS. */

/* ============================================================
   CONTROLS (из DS) — buttons, button groups, badges, chips,
   switches, checkboxes, radios, avatars, keyboard hints.
   ============================================================ */

/* ---------- BUTTON ---------- */

.btn {
  --_bg: transparent;
  --_fg: var(--text);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;  /* контент по левому краю — одинаковый отступ слева */
  gap: 6px;
  height: var(--control-h);
  min-width: 96px;        /* однословные кнопки одной ширины, короткие не сжимаются */
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--_fg);
  background: var(--_bg);
  border: var(--border-width) solid var(--_bd);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.btn .icon { width: 15px; height: 15px; flex: none; }

/* variants */

.btn-primary   { --_bg: var(--accent); --_fg: var(--accent-fg); --_bd: var(--accent); }

.btn-primary:hover  { --_bg: var(--accent-hover); --_bd: var(--accent-hover); }

.btn-primary:active { --_bg: var(--accent-active); --_bd: var(--accent-active); }

.btn-secondary { --_bg: var(--surface-raised); --_fg: var(--text); --_bd: var(--border-strong); }

.btn-secondary:hover  { background: color-mix(in srgb, var(--text) 6%, var(--surface-raised)); }

.btn-secondary:active { background: color-mix(in srgb, var(--text) 11%, var(--surface-raised)); }

.btn-ghost     { --_bg: transparent; --_fg: var(--text-muted); --_bd: transparent; }

.btn-ghost:hover  { background: var(--hover-overlay); --_fg: var(--text); }

.btn-ghost:active { background: var(--press-overlay); }

.btn-destructive { --_bg: var(--error); --_fg: #fff; --_bd: var(--error); }

.btn-destructive:hover  { --_bg: color-mix(in srgb, #000 8%, var(--error)); }

.btn-destructive:active { --_bg: color-mix(in srgb, #000 16%, var(--error)); }

.btn-soft-accent { --_bg: var(--accent-subtle); --_fg: var(--accent-text); --_bd: transparent; }

.btn-soft-accent:hover { background: color-mix(in srgb, var(--accent) 14%, var(--accent-subtle)); }

/* sizes */

.btn-sm  { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--text-sm); gap: 4px; }

.btn-lg  { height: calc(var(--control-h) + 8px); padding: 0 var(--space-4); font-size: var(--text-md); }

/* icon-only — квадратная, иконка по центру (сбрасываем базовые min-width и left-align) */

.btn-icon { width: var(--control-h); min-width: 0; padding: 0; justify-content: center; }

.btn-icon.btn-sm { width: var(--control-h-sm); }

/* button group / segmented */

.btn-group { display: inline-flex; }

.btn-group .btn { border-radius: 0; margin-left: -1px; }

.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }

.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}

.segmented button {
  height: calc(var(--control-h) - 6px);
  padding: 0 var(--space-3);
  border: 0; background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.segmented button:hover { color: var(--text); }

.segmented button[aria-selected="true"],
.segmented button.is-active {
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

/* ---------- BADGE ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 18px; padding: 0 7px;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  line-height: 1; white-space: nowrap;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
}

.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }

.badge-neutral { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border); }

.badge-success { background: var(--success-subtle); color: var(--success-text); border-color: var(--success-border); }

.badge-warning { background: var(--warning-subtle); color: var(--warning-text); border-color: var(--warning-border); }

.badge-error   { background: var(--error-subtle);   color: var(--error-text);   border-color: var(--error-border); }

.badge-info    { background: var(--info-subtle);    color: var(--info-text);    border-color: var(--info-border); }

.badge-accent  { background: var(--accent-subtle);  color: var(--accent-text);  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }

/* count pill */

.badge-count {
  min-width: 16px; height: 16px; padding: 0 4px;
  justify-content: center; border-radius: var(--radius-full);
  background: var(--accent); color: var(--accent-fg);
  font-variant-numeric: tabular-nums; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
}

/* ---------- CHIP (filter / token) ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h-sm); padding: 0 8px;
  font-size: var(--text-sm); color: var(--text);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  cursor: default;
}

.chip .chip-key { color: var(--text-muted); }

.chip-removable { padding-right: 4px; }

.chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: var(--radius-full);
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
}

.chip-x:hover { background: var(--hover-overlay); color: var(--text); }

.chip-add {
  border-style: dashed; color: var(--text-muted); cursor: pointer;
  background: transparent;
}

.chip-add:hover { color: var(--text); border-color: var(--accent); }

/* ---------- SWITCH ---------- */

.switch { position: relative; display: inline-block; width: 32px; height: 18px; flex: none; }

.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.switch .track {
  position: absolute; inset: 0; border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background var(--dur) var(--ease);
}

.switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: #fff; border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease);
}

.switch input:checked ~ .track { background: var(--accent); }

.switch input:checked ~ .thumb { transform: translateX(14px); }

.switch input:focus-visible ~ .track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- CHECKBOX & RADIO ---------- */

.checkbox, .radio {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none; margin: 0;
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface);
  cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.checkbox { border-radius: var(--radius-xs); }

.radio { border-radius: var(--radius-full); }

.checkbox:hover, .radio:hover { border-color: var(--accent); }

.checkbox:checked, .radio:checked { background: var(--accent); border-color: var(--accent); }

.checkbox:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--accent-fg);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.checkbox:indeterminate { background: var(--accent); border-color: var(--accent); }

.checkbox:indeterminate::after {
  content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 2px;
  background: var(--accent-fg); border: 0; transform: none;
}

.radio:checked::after {
  content: ""; position: absolute; inset: 3px; border-radius: var(--radius-full); background: var(--accent-fg);
}

.checkbox:focus-visible, .radio:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- AVATAR ---------- */

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-full);
  background: var(--accent-subtle); color: var(--accent-text);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  flex: none; overflow: hidden; user-select: none;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-sm { width: 20px; height: 20px; font-size: var(--text-2xs); }

.avatar-lg { width: 34px; height: 34px; font-size: var(--text-sm); }

/* ---------- KBD ---------- */

kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

/* .btn / .badge / .chip / .switch / .checkbox / .avatar */

/* ============================================================
   FORMS (из DS) — fields, labels, inputs, selects, textareas,
   helper/error text, input affordances, fieldset / section layout.
   Унифицированные токены поля: --field-h, --pad-x, label сверху.
   ============================================================ */

/* ---------- FIELD WRAPPER ---------- */

.field { display: flex; flex-direction: column; gap: 5px; }

.field-row { flex-direction: row; align-items: center; gap: var(--space-3); }

.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  line-height: var(--leading-snug);
}

.label .req { color: var(--error-text); margin-left: 2px; }

.label .opt { color: var(--text-faint); font-weight: var(--weight-regular); margin-left: 4px; }

.helper { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); }

.error-text { font-size: var(--text-xs); color: var(--error-text); line-height: var(--leading-snug); display: flex; align-items: center; gap: 4px; }

/* ---------- INPUT / SELECT / TEXTAREA ---------- */

.input, .select, .textarea {
  width: 100%;
  min-height: var(--field-h);
  height: var(--field-h);
  padding: 0 var(--pad-x);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}

.textarea { height: auto; min-height: calc(var(--field-h) * 2.2); padding: 6px var(--pad-x); line-height: var(--leading-normal); resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--text-faint); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input:disabled, .select:disabled, .textarea:disabled,
.field[data-disabled] .input {
  background: var(--surface-sunken);
  color: var(--text-faint);
  cursor: not-allowed;
  border-color: var(--border);
}

/* invalid state */

.field[data-invalid] .input,
.field[data-invalid] .select,
.field[data-invalid] .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.field[data-invalid] .input:focus,
.input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 30%, transparent);
}

/* read-only */

.input[readonly] { background: var(--surface-sunken); color: var(--text-muted); }

/* ---------- SELECT (native, custom caret) ---------- */

.select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2398a1ad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}

/* ---------- INPUT GROUP (icon / addon / inline button) ---------- */

.input-group { position: relative; display: flex; align-items: stretch; }

.input-group .input { flex: 1; }

.input-group .input-icon {
  position: absolute; left: var(--pad-x); top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-faint); pointer-events: none;
}

.input-group.has-icon .input { padding-left: 30px; }

.input-group .input-affix {
  display: inline-flex; align-items: center; padding: 0 var(--pad-x);
  background: var(--surface-sunken); color: var(--text-muted);
  border: var(--border-width) solid var(--border-strong);
  font-size: var(--text-sm); white-space: nowrap;
}

.input-group .input-affix:first-child { border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }

.input-group .input-affix:last-child  { border-left: 0;  border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.input-group .input-affix:first-child + .input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.input-group .input:has(+ .input-affix) { border-radius: var(--radius-md) 0 0 var(--radius-md); }

/* ---------- SEARCH FIELD ---------- */

.search {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h); padding: 0 var(--pad-x);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  min-width: 200px;
}

.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

.search .icon { width: 15px; height: 15px; flex: none; }

.search input {
  flex: 1; border: 0; background: transparent; outline: none;
  color: var(--text); font-family: var(--font-sans); font-size: var(--text-base);
}

.search input::placeholder { color: var(--text-faint); }

/* ---------- FORM SECTION LAYOUT ---------- */

.form-grid { display: grid; gap: var(--space-4); }

.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }

.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.col-span-2 { grid-column: span 2; }

.col-span-full { grid-column: 1 / -1; }

.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.fieldset-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text); text-transform: uppercase; letter-spacing: var(--tracking-caps);
}

.fieldset-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: -2px; }

/* form section card (full-page form) */

.form-section {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--space-8);
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--border);
}

.form-section:first-child { border-top: 0; }

.form-section .section-head h3 { font-size: var(--text-md); font-weight: var(--weight-semibold); }

.form-section .section-head p { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }

@media (max-width: 720px) {
  .form-section { grid-template-columns: 1fr; gap: var(--space-3); }
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
}

/* .field / .label / .input / .select / .textarea / .search */

/* ============================================================
   OVERLAYS & MISC (из DS) — modal/dialog, dropdown menu, tabs,
   toast, tooltip, inline alert/banner, divider, empty state.
   Примечание: проект использует нативный <dialog>; визуал .modal
   будет применён к нему на фазе 2 (см. спеку §5.4), .scrim не нужен.
   ============================================================ */

/* ---------- MODAL / DIALOG ---------- */

.scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh var(--space-4) var(--space-4);
  overflow-y: auto;
}

.modal {
  width: 100%; max-width: 520px;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  max-height: 84vh;
}

.modal-sm { max-width: 400px; }

.modal-lg { max-width: 720px; }

.modal-head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
}

.modal-head .modal-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

.modal-head .modal-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

.modal-head .icon-btn { margin: -4px -4px 0 auto; }

.modal-body { padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }

.modal-foot {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--border);
}

.modal-foot .spacer { flex: 1; }

/* enter animation (skipped under reduced-motion via dur tokens) */

.scrim[data-enter] { animation: scrim-in var(--dur) var(--ease); }

.modal[data-enter] { animation: modal-in var(--dur-slow) var(--ease); }

@keyframes scrim-in { from { opacity: 0; } }

@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- DROPDOWN MENU / POPOVER ---------- */

.menu {
  min-width: 180px; padding: var(--space-1);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}

.menu[data-enter] { animation: menu-in var(--dur-fast) var(--ease); }

@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

.menu-label {
  padding: 5px var(--space-2) 3px; font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint);
}

.menu-item {
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: var(--text-base); cursor: pointer; white-space: nowrap;
}

.menu-item .icon { width: 15px; height: 15px; color: var(--text-muted); flex: none; }

.menu-item:hover { background: var(--hover-overlay); }

.menu-item .menu-shortcut { margin-left: auto; color: var(--text-faint); }

.menu-item.is-danger { color: var(--error-text); }

.menu-item.is-danger .icon { color: var(--error-text); }

.menu-item.is-danger:hover { background: var(--error-subtle); }

.menu-item[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.menu-sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }

/* ---------- TABS ---------- */

.tabs { display: flex; gap: 2px; border-bottom: var(--border-width) solid var(--border); }

.tab {
  position: relative; padding: var(--space-2) var(--space-3);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--text-muted); background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}

.tab:hover { color: var(--text); }

.tab .tab-count {
  font-size: var(--text-2xs); padding: 1px 5px; border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--text-muted); font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"], .tab.is-active { color: var(--text); }

.tab[aria-selected="true"]::after, .tab.is-active::after {
  content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px;
  background: var(--accent); border-radius: var(--radius-full);
}

.tab[aria-selected="true"] .tab-count, .tab.is-active .tab-count { background: var(--accent-subtle); color: var(--accent-text); }

/* pill tabs */

.tabs-pill { border-bottom: 0; gap: 4px; }

.tabs-pill .tab { border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); }

.tabs-pill .tab::after { display: none; }

.tabs-pill .tab[aria-selected="true"], .tabs-pill .tab.is-active { background: var(--accent-subtle); color: var(--accent-text); }

/* ---------- TOAST ---------- */

.toast-stack {
  position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px;
}

.toast {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--dur-slow) var(--ease);
}

@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } }

.toast .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.toast .toast-body { flex: 1; min-width: 0; }

.toast .toast-title { font-size: var(--text-base); font-weight: var(--weight-medium); }

.toast .toast-msg { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

.toast.is-success { border-left-color: var(--success); }

.toast.is-success .icon { color: var(--success); }

.toast.is-warning { border-left-color: var(--warning); }

.toast.is-warning .icon { color: var(--warning); }

.toast.is-error { border-left-color: var(--error); }

.toast.is-error .icon { color: var(--error); }

.toast.is-info { border-left-color: var(--info); }

.toast.is-info .icon { color: var(--info); }

/* ---------- INLINE ALERT / BANNER ---------- */

.alert {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.alert .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.alert .alert-title { font-weight: var(--weight-semibold); }

.alert.is-success { background: var(--success-subtle); border-color: var(--success-border); color: var(--success-text); }

.alert.is-warning { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning-text); }

.alert.is-error   { background: var(--error-subtle);   border-color: var(--error-border);   color: var(--error-text); }

.alert.is-info    { background: var(--info-subtle);    border-color: var(--info-border);    color: var(--info-text); }

/* ---------- TOOLTIP ---------- */

.tooltip {
  position: absolute; z-index: var(--z-toast);
  padding: 4px 8px; font-size: var(--text-xs);
  background: var(--surface-raised); color: var(--text);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  white-space: nowrap; pointer-events: none;
}

/* ---------- DIVIDER ---------- */

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

.divider-v { width: 1px; align-self: stretch; background: var(--border); margin: 0 var(--space-1); }

/* .modal / .menu / .tabs / .alert / .toast / .tooltip */

/* ============================================================
   APP SHELL (из DS) — layout grid, sidebar (groups, active,
   collapse), header (breadcrumbs, search, switchers, profile),
   page body, panel/card, stat tiles.
   ============================================================ */

/* ---------- LAYOUT GRID ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  height: 100vh;
  transition: grid-template-columns var(--dur) var(--ease);
}

.app[data-collapsed="true"] { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* ---------- SIDEBAR ---------- */

.sidebar {
  grid-area: sidebar;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: var(--border-width) solid var(--border);
  overflow: hidden;
}

.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  height: var(--header-h); padding: 0 var(--space-3); flex: none;
  border-bottom: var(--border-width) solid var(--border);
  color: inherit; text-decoration: none; /* область-ссылка на главную — без оформления ссылки */
}

.sidebar-head:hover { text-decoration: none; }

/* без подчёркивания при наведении, остаётся только курсор-рука */

.brand-mark {
  width: 26px; height: 26px; flex: none; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold); font-size: var(--text-md);
}

.brand-name { font-weight: var(--weight-semibold); font-size: var(--text-md); white-space: nowrap; }

.app[data-collapsed="true"] .brand-name { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); }

.nav-group { margin-bottom: var(--space-4); }

.nav-group-label {
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-faint); white-space: nowrap;
}

.app[data-collapsed="true"] .nav-group-label { opacity: 0; height: 6px; padding: 0; }

.nav-item {
  display: flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 var(--space-2); margin-bottom: 1px;
  border-radius: var(--radius-md);
  color: var(--text-muted); cursor: pointer;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  white-space: nowrap; position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav-item .icon { width: 16px; height: 16px; flex: none; }

.nav-item:hover { background: var(--hover-overlay); color: var(--text); }

.nav-item .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.nav-item .nav-badge { font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--text-faint); }

.app[data-collapsed="true"] .nav-label,
.app[data-collapsed="true"] .nav-badge { display: none; }

.nav-item[aria-current="page"],
.nav-item.is-active {
  background: var(--accent-subtle);
  color: var(--accent-text);
}

.nav-item[aria-current="page"]::before,
.nav-item.is-active::before {
  content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 var(--radius-full) var(--radius-full) 0; background: var(--accent);
}

.app[data-collapsed="true"] .nav-item { justify-content: center; padding: 0; }

.app[data-collapsed="true"] .nav-item::before { left: 0; }

.sidebar-foot {
  flex: none; padding: var(--space-2);
  border-top: var(--border-width) solid var(--border);
}

/* ---------- HEADER ---------- */

.header {
  grid-area: header;
  display: flex; align-items: center; gap: var(--gap);
  padding: 0 var(--space-4);
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
}

.header .spacer { flex: 1; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h); flex: none;
  border: 0; background: transparent; color: var(--text-muted);
  border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-btn .icon { width: 17px; height: 17px; }

.icon-btn:hover { background: var(--hover-overlay); color: var(--text); }

/* ---------- BREADCRUMBS ---------- */

.breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); min-width: 0; }

.breadcrumbs a, .breadcrumbs span { color: var(--text-muted); white-space: nowrap; }

.breadcrumbs a:hover { color: var(--text); text-decoration: none; }

.breadcrumbs .sep { color: var(--text-faint); }

.breadcrumbs .current { color: var(--text); font-weight: var(--weight-medium); }

/* ---------- PAGE / MAIN ---------- */

.main { grid-area: main; overflow: auto; background: var(--bg); }

.page { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

.page-header { display: flex; align-items: flex-start; gap: var(--space-4); }

.page-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }

.page-subtitle { font-size: var(--text-base); color: var(--text-muted); margin-top: 4px; }

.page-actions { display: flex; align-items: center; gap: var(--gap); margin-left: auto; }

/* generic panel/card */

.panel {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}

.panel-pad { padding: var(--space-4); }

.panel-head {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.panel-title { font-size: var(--text-md); font-weight: var(--weight-semibold); }

/* stat tiles */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

.stat {
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}

.stat .stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.stat .stat-value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; margin-top: 4px; }

.stat .stat-delta { font-size: var(--text-xs); font-variant-numeric: tabular-nums; margin-top: 2px; }

.stat .stat-delta.up { color: var(--success-text); }

.stat .stat-delta.down { color: var(--error-text); }

@media (max-width: 980px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* .app / .sidebar / .nav-item / .header / .icon-btn / .main / .page / .panel */

/* ── Проектные добавки/оверрайды (plain CSS на токенах DS) — ПОСЛЕ DS-компонентов,
   чтобы адаптивный .app (off-canvas) перекрывал grid-раскладку shell.css. */

/* Проектные добавки к сайдбару поверх DS-shell (.sidebar/.nav-item/.nav-group в shell.css):
   аккордеон-тоггл групп, цвет иконок пунктов и адаптивный off-canvas.
   Разметка — vDefaultSidebar.tpl / vDefaultSidebarGroupItems.tpl. Иконки — SVG-спрайт (.icon). */

/* Сброс списка групп (base.css ещё не активен). */

.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }

/* Кнопка-тоггл группы (аккордеон) — поверх caps-лейбла .nav-group-label. */

.sidebar-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.sidebar-group-toggle:hover { color: var(--text-muted); }

.sidebar-group-toggle .icon {
  width: 13px; height: 13px;
  transition: transform var(--dur-fast) var(--ease);
}

.sidebar-group-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Цвет иконок пунктов (ITEM_CLASS из SidebarDataProvider). currentColor у svg-спрайта. */

.text-primary .icon { color: var(--accent); }

.text-success .icon { color: var(--success); }

.text-danger  .icon { color: var(--error); }

.text-warning .icon { color: var(--warning); }

/* Адаптив: off-canvas < 992px, статичный грид ≥ 992px.
   .show / body.sidebar-open переключает AppNavigation.js. */

@media (max-width: 991.98px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: var(--z-sidebar);
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
  }
  .sidebar.show { transform: translateX(0); }
  #sidebar-overlay {
    position: fixed; inset: 0;
    z-index: 39;
    display: none;
    background: var(--overlay);
  }
  body.sidebar-open #sidebar-overlay { display: block; }
}

@media (min-width: 992px) {
  #sidebar-overlay { display: none; }
  #sidebar-toggle  { display: none; }
}

/* добавки к DS-сайдбару (off-canvas, тоггл групп) */

/* Контролы скина и дропдауны шапки (skin/profile). Plain CSS на токенах DS. */

/* Меню-дропдаун под кнопкой в шапке (позиционирование). Визуал — DS .menu. */

.header-menu { position: absolute; right: 0; top: 100%; margin-top: 6px; }

.header-menu--skin    { width: 224px; }

.header-menu--profile { min-width: 184px; }

/* Ряд свотчей акцента. */

.skin-swatches { display: flex; gap: var(--space-2); padding: 2px var(--space-2) var(--space-2); }

/* Сегментированный переключатель на всю ширину строки дропдауна (плотность/шрифт). */

.segmented--full { display: flex; margin: 2px var(--space-2) var(--space-2); }

.segmented--full button { flex: 1; }

/* Свотч акцента (значение цвета — инлайн background в разметке). */

.skin-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
}

.skin-swatch--on { border-color: var(--text); }

/* дропдауны шапки, свотчи акцента */

/* SmartTable — самодостаточный компонентный стиль. Разметка генерится в tools/SmartTable/.
   --st-* — слой косвенности поверх токенов DS: таблица флипается с темой/акцентом/плотностью
   «бесплатно», отдельных тёмных значений не нужно (фаза 6 ретокенизации). */

:root {
  --st-bg:                var(--surface);
  --st-bg-sunken:         var(--surface-sunken);   /* detail-колодец (на ступень глубже master) */
  --st-header-bg:         var(--surface-raised);
  --st-footer-bg:         var(--surface-raised);
  --st-sticky-bg:         var(--surface-raised);
  --st-border-color:      var(--border);
  --st-border-strong:     var(--border-strong);
  --st-text:              var(--text);
  --st-text-muted:        var(--text-muted);
  --st-row-hover-bg:      var(--hover-overlay);
  --st-row-selected-bg:   var(--accent-subtle);
  --st-row-selected-text: var(--accent-text);
  --st-accent:            var(--accent);
  --st-font-size:         var(--text-md);   /* строки master И одноранговой таблицы (общий) */
  --st-line-height:       var(--leading-snug);
  --st-cell-padding-y:    var(--pad-y);
  --st-cell-padding-x:    var(--cell-pad-x);
  --st-border-radius:     var(--radius-sm);
  --st-dropdown-shadow:   var(--shadow-md);
}

.smart-table-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--st-border-color);
  border-radius: 4px;
  background: var(--st-bg);
  color: var(--st-text);
}

/* Чекбоксы выбора строк — нативные с акцентом */

.smart-table-container input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

.smart-table-container .smart-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}

/* Эти правила (.smart-table-container .smart-table …) общие для одноранговой
   таблицы И для master в MD — master всегда выглядит как одноранговая. Detail
   стилизуется отдельно (.smart-table-detail …), на ступень мельче. Не вводить
   master-специфичных переопределений — иначе рассинхрон. */

.smart-table-container .smart-table th,
.smart-table-container .smart-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--st-cell-padding-y) var(--st-cell-padding-x);
  font-size: var(--st-font-size);
  line-height: var(--st-line-height);
  vertical-align: middle;
}

/* Горизонтальный hairline между строками. */

.smart-table-container .smart-table-body tbody td {
  border-bottom: 1px solid var(--st-border-color);
}

/* Вертикальные разделители колонок — в заголовке и в строках. Не «модно», но
   удобно читать широкие таблицы. col-spacer (добивает ширину справа) и последняя
   ячейка — без правой границы, чтобы не дублировать рамку контейнера. */

.smart-table-container .smart-table th,
.smart-table-container .smart-table td {
  border-right: 1px solid var(--st-border-color);
}

.smart-table-container .smart-table th:last-child,
.smart-table-container .smart-table td:last-child {
  border-right: none;
}

/* Заголовки колонок — типографика DS (uppercase, tracking, muted).
   Выравнивание — не здесь, а через col-type-* (ниже), чтобы шапка совпадала со значениями
   и не конфликтовала по специфичности со служебными колонками (col-manager/col-selection). */

.smart-table-container .smart-table-header thead th {
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--st-text-muted);
}

/* Секции таблицы */

.smart-table-container .smart-table-header {
  background-color: var(--st-header-bg);
  border-bottom: 1px solid var(--st-border-strong);
  z-index: 10;
  position: relative;
  width: 100%;
  overflow: visible !important; /* внешний слой должен видеть вылетающий дропдаун */
}

.smart-table-container .smart-table-header-scroll {
  overflow: hidden; /* этот слой обрезает таблицу и скроллится программно */
  width: 100%;
}

.smart-table-container .smart-table-body {
  flex: 1 1 auto;
  background-color: var(--st-bg);
  overflow: auto; /* реальный скролл */
  z-index: 1;
}

.smart-table-container .smart-table-body tbody tr:hover { background-color: var(--st-row-hover-bg); }

/* Выбранная строка (чекбокс .row-select отмечен) — подсветка акцентом, как в DS. */

.smart-table-container .smart-table-body tbody tr:has(.row-select:checked) td {
  background-color: var(--st-row-selected-bg);
}

.smart-table-container .smart-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background-color: var(--st-footer-bg);
  border-top: 1px solid var(--st-border-color);
  font-size: var(--text-sm);
  color: var(--st-text-muted);
  font-variant-numeric: tabular-nums;
}

.smart-table-container .smart-table-footer .st-footer-strong { font-weight: var(--weight-semibold); color: var(--st-text); }

/* Колонки спец-назначения */

.smart-table-container .col-manager {
  position: sticky;
  left: 0;
  z-index: 100;
  background-color: var(--st-header-bg) !important;
  width: 35px;
  text-align: center;
  border-right: 1px solid var(--st-border-color); /* разделитель закреплённой служебной колонки */
  overflow: visible !important;
  padding: 0;
}

.smart-table-container .col-selection { width: 40px; text-align: center; }

.smart-table-container .col-spacer {
  width: auto !important;
  border-right: none !important;
  padding: 0 !important;
}

/* Выравнивание по типу — едино для заголовка (th) и значений (td), как в DS. */

.smart-table-container .col-type-string { text-align: left; }

.smart-table-container .col-type-int,
.smart-table-container .col-type-float {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.smart-table-container .col-type-date {
  text-align: center;
}

/* Приглушённый цвет — только у значений даты, не у заголовка. */

.smart-table-container .smart-table-body .col-type-date { color: var(--st-text-muted); }

/* Кнопка менеджера колонок (шестерёнка) */

.smart-table-container .st-colmanager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--st-text-muted);
}

/* Иконки в таблице (шестерёнка, три точки, раскрытие detail) — фикс. размер. */

.smart-table-container .st-colmanager-btn .icon,
.smart-table-container .col-manager .icon,
.smart-table-container .expand-trigger { width: 14px; height: 14px; }

/* Ресайзер и Drag-and-Drop.
   Поверх постоянных границ колонок аффорданс ресайза — вертикаль у правого края:
   при наведении на заголовок усиливается (strong = «граница»), на сам хэндл —
   акцентная (= «можно тянуть»). Линия — псевдоэлемент 2px по центру кликабельной
   4px-зоны. */

.smart-table-container th { position: relative; user-select: none; }

.smart-table-container th .resizer,
.smart-table-container th .resizer-detail {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 4px;
  cursor: col-resize !important;
  z-index: 20;
}

.smart-table-container th .resizer::after,
.smart-table-container th .resizer-detail::after {
  content: '';
  position: absolute;
  right: 1px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background var(--dur-fast) var(--ease);
}

.smart-table-container th:hover .resizer::after,
.smart-table-container th:hover .resizer-detail::after { background: var(--st-border-strong); }

.smart-table-container th .resizer:hover::after,
.smart-table-container th .resizer-detail:hover::after { background: var(--st-accent); }

.smart-table-container th.column-dragging { opacity: 0.4; background: var(--st-sticky-bg) !important; }

.smart-table-container th.drag-over { border-left: 2px solid var(--st-accent) !important; }

/* Скрытая колонка (замена Bootstrap .d-none) */

.smart-table-container .st-hidden { display: none !important; }

/* Выпадающее меню менеджера колонок (position:fixed задаётся из JS, чтобы обойти overflow). */

.st-dropdown-menu {
  display: none;
  position: fixed;
  z-index: 1100;
  min-width: 12rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  font-size: var(--text-base);
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--st-dropdown-shadow);
}

.st-dropdown-menu.st-open { display: block; }

.st-dropdown-menu .st-dropdown-header {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}

.st-dropdown-menu .st-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.st-dropdown-menu .st-dropdown-item:hover { background: var(--hover-overlay); }

/* Спиннер (индикатор загрузки detail в SmartMDTable). */

.st-spinner {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: st-spin 0.7s linear infinite;
  vertical-align: -2px;
}

@keyframes st-spin { to { transform: rotate(360deg); } }

/* ─── Master-Detail (SmartMDTable): вложенные detail-таблицы ──────────────────
   Каждый detail — самодостаточная таблица: свой thead (заголовок) над своими
   строками. Ширины колонок — через CSS-переменные --detail-col-{field}-width,
   общие для всех detail (синхронный ресайз). */

.smart-table-detail {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.smart-table-detail th, .smart-table-detail td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--st-cell-padding-y) var(--st-cell-padding-x);
  line-height: var(--st-line-height);
}

.smart-table-detail tbody td { border-bottom: 1px solid var(--st-border-color); }

/* ВАЖНО: detail-таблица вложена в master <table.smart-table>, поэтому master-правило
   `.smart-table-container .smart-table th/td` (специфичность 0-2-1) перекрывает
   одноклассовые `.smart-table-detail …` (0-1-x), включая font-size. Размеры detail
   задаём с той же базой специфичности (контейнер + detail) → выигрываем и обозначаем
   вложенность: detail на ступень мельче master. */

.smart-table-container .smart-table-detail tbody td {
  font-size: var(--text-base);   /* строки detail — ниже строк master (--st-font-size) */
}

/* Заголовок внутри каждого detail — как шапка таблицы, но мельче master-заголовка. */

.smart-table-container .smart-table-detail thead th {
  background: var(--st-header-bg);
  text-transform: uppercase;
  font-size: var(--text-2xs);    /* мельче master-заголовка (text-xs) */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--st-text-muted);
  border-bottom: 1px solid var(--st-border-strong);
}

/* Вертикальные разделители колонок в detail — для единообразия с master. */

.smart-table-detail th, .smart-table-detail td {
  border-right: 1px solid var(--st-border-color);
}

.smart-table-detail th:last-child, .smart-table-detail td:last-child {
  border-right: none;
}

.detail-cell { padding: 0; }

.smart-table-detail-body { background: var(--st-bg-sunken); }

/* ─── Выделение области «раскрытая группа» (Вариант 1) ──────────────────
   Когда detail-строка раскрыта (нет .st-hidden), родительская master-строка:
     • тонируется акцентом (--st-row-selected-bg = --accent-subtle);
     • теряет нижний hairline → «склеивается» со своим detail в одну группу.
   Чистый CSS через :has() — JS-правок не требует (состояние живёт на .detail-row).
   На hover раскрытой строки тинт чуть плотнее, чтобы hover читался поверх тинта. */

.smart-table-container .master-row:has(+ .detail-row:not(.st-hidden)) > td {
  background: var(--st-row-selected-bg);
  border-bottom-color: transparent;
}

.smart-table-container .master-row:has(+ .detail-row:not(.st-hidden)):hover > td {
  background: color-mix(in srgb, var(--st-accent) 14%, var(--st-row-selected-bg));
}

/* ─── Кнопки действий в строках (master/detail) ───────────────────────────── */

.st-row-actions {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.st-row-actions .icon-btn { width: 28px; height: 28px; }

/* Инлайновый select в ячейке (например, смена агентства у автора) — компактнее
   обычного .select, на всю ширину колонки. */

.smart-table td .select.st-inline-select {
  height: auto;
  min-height: 0;
  width: 100%;
  padding: 2px 24px 2px 8px;
  font-size: var(--st-font-size);
}

/* Строка, скрытая клиентским фильтром (по data-атрибутам). */

.smart-table-body tbody tr.st-row-filtered { display: none; }

/* Сгруппированная таблица суточной статистики: агентство (подытоги) → его авторы,
   затем «Частники», внизу «Всего». Не SmartTable — фиксированная раскрытая
   группировка, общий хедер. Чистый CSS на токенах DS. */

.stat-table-wrap { overflow-x: auto; }

.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 13px);
}

.stat-table th,
.stat-table td {
    padding: var(--space-1, 4px) 5px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    text-align: left;
}

.stat-table .stat-num { text-align: right; font-variant-numeric: tabular-nums; }

.stat-table .stat-total { font-weight: 600; }

/* Место под кнопку «сообщения» справа от числа — резервируем во ВСЕХ числовых
   ячейках (даже без кнопки), чтобы числа оставались выровнены по колонке. */

.stat-table .stat-num { position: relative; padding-right: 17px; }

.stat-table .stat-msg-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-faint, var(--text-muted));
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    line-height: 0;
}

.stat-table .stat-msg-btn:hover {
    color: var(--accent);
    background: var(--surface-sunken, var(--surface-raised));
}

.stat-table .stat-msg-btn .icon { width: 12px; height: 12px; }

/* Шапка: липкая, приглушённая; имя топика + его суточный тотал. */

.stat-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 500;
    vertical-align: bottom;
}

/* Строка-группа (агентство / «Частники») — крепче, с фоном, чуть крупнее. */

.stat-table tr.stat-group td {
    background: var(--surface-raised);
    font-weight: 700;
    font-size: 14px;
    border-top: 1px solid var(--border);
}

/* Авторы — с отступом под группой, мельче строки группы. */

.stat-table tr.stat-author-row td { font-size: 13px; }

.stat-table tr.stat-author-row .stat-name { padding-left: var(--space-4, 16px); }

/* Итоговая строка «Всего» — в стиле строки-группы (агентство), но липкая снизу. */

.stat-table tfoot .stat-grand td {
    background: var(--surface-raised);
    font-weight: 700;
    font-size: 14px;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
}

/* сгруппированная статистика дня (агентства → авторы) */

/* ── Утилиты DS (раскладка/тип) — последними. */

/* ============================================================
   UTILITIES (из DS) — небольшие layout/type-хелперы.
   Production-замена Tailwind-утилит раскладки; потребляют
   --space-* (spacing-шкала остаётся единственным источником).
   Импортируется ПОСЛЕДНИМ в ds.css.
   Леса демо (.ref/.skin-tile/.swatch-*) сюда НЕ входят.
   ============================================================ */

/* ---- flexbox layout ---- */

.flex        { display: flex; }

.inline-flex { display: inline-flex; }

.col         { display: flex; flex-direction: column; }

.wrap        { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start  { align-items: flex-start; }

.items-end    { align-items: flex-end; }

.justify-between { justify-content: space-between; }

.justify-center  { justify-content: center; }

.justify-end     { justify-content: flex-end; }

.flex-1  { flex: 1; }

.ml-auto { margin-left: auto; }

.w-full  { width: 100%; }

/* ---- positioning ---- */

.relative { position: relative; }

/* ---- gap (4px scale via tokens) ---- */

.gap-1 { gap: var(--space-1); }

.gap-2 { gap: var(--space-2); }

.gap-3 { gap: var(--space-3); }

.gap-4 { gap: var(--space-4); }

.gap-5 { gap: var(--space-5); }

.gap-6 { gap: var(--space-6); }

/* ---- margin top / bottom (via tokens) ---- */

.mt-1 { margin-top: var(--space-1); }

.mt-2 { margin-top: var(--space-2); }

.mt-3 { margin-top: var(--space-3); }

.mt-4 { margin-top: var(--space-4); }

.mt-6 { margin-top: var(--space-6); }

.mb-2 { margin-bottom: var(--space-2); }

.mb-3 { margin-bottom: var(--space-3); }

.mb-4 { margin-bottom: var(--space-4); }

/* ---- type helpers ---- */

.t-muted    { color: var(--text-muted); }

.t-faint    { color: var(--text-faint); }

.t-xs       { font-size: var(--text-xs); }

.t-sm       { font-size: var(--text-sm); }

.t-lg       { font-size: var(--text-lg); }

.t-semibold { font-weight: var(--weight-semibold); }

.caps {
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--text-faint);
}

/* Бренд-акцент = выбранный data-accent (DS). Существующие потребители бренд-цвета
   (--accent-color, --color-brand) следуют осью accent — перекрашиваются на лету.
   Семантические success/danger (Старт/Стоп бота) остаются прежними намеренно. */

:root {
  --accent-color: var(--accent);
  --color-brand:  var(--accent);
}

/* Базовая (заполненная акцентом) кнопка — всегда белый текст, независимо от --accent-fg
   (его контрастные значения нужны для галочек чекбоксов/бэйджей-счётчиков и т.п.). */

.btn-primary { --_fg: #fff; }

/* Навигация/меню без подчёркивания на hover (base.css даёт a{text-decoration:none}). */

.nav-item:hover, .menu-item:hover, .breadcrumbs a:hover { text-decoration: none; }

/* SVG-иконки (спрайт icons.js): базовый размер/выравнивание. Контекстные размеры
   (.btn .icon, .icon-btn .icon, .nav-item .icon, .menu-item .icon) — из DS-компонентов. */

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
}

.avatar .icon { width: 16px; height: 16px; }

/* Иконка темы: показываем по data-theme. */

.theme-ico-dark { display: none; }

[data-theme="dark"] .theme-ico-light { display: none; }

[data-theme="dark"] .theme-ico-dark  { display: inline-block; }

/* Кнопка управления ботом (toggle Старт/Стоп). Нейтральная: серый фон по теме,
   бордер акцента, адаптивный текст. Иконки — всегда зелёная (старт) / красная (стоп). */

.btn-bot { --_bg: var(--surface-raised); --_fg: var(--text); --_bd: var(--accent); }

[data-theme="light"] .btn-bot { --_bg: var(--surface-sunken); }

.btn-bot:hover  { --_bg: color-mix(in srgb, var(--accent) 12%, var(--surface-raised)); }

[data-theme="light"] .btn-bot:hover { --_bg: color-mix(in srgb, var(--accent) 10%, var(--surface-sunken)); }

.ico-start { color: var(--success); }

.ico-stop  { color: var(--error); }

/* Тосты — в правый верхний угол, прижато под хедер (DS по умолчанию снизу). */

.toast-stack {
  top: calc(var(--header-h) + var(--space-2));
  bottom: auto;
}

/* Адаптация DS-модалки под нативный <dialog> (спека §5.4): визуал даёт .modal,
   бэкдроп — сам <dialog>. .modal задаёт display:flex, поэтому возвращаем
   UA-правило скрытия закрытого диалога и центрирование. */

dialog.modal { margin: auto; padding: 0; }

dialog.modal:not([open]) { display: none; }

dialog.modal::backdrop { background: var(--overlay); }

/* Sticky-тулбар фильтров (страница авторов): прокрутка идёт внутри .main, поэтому
   поля агентства/фильтров/поиска «прилипают» к верху и не уезжают с таблицей. */

[data-ns-nek-authors-filters] {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
  background: var(--bg);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/* Заголовок таблицы авторов тоже липкий — прямо под тулбаром (его высота в
   --authors-filters-h выставляется из nsNekAuthorsPage.js; тулбар может переноситься).
   SmartTable по умолчанию не ограничивает высоту, поэтому шапка уезжает — фиксируем её. */

[data-ns-nek-authors] .smart-table-header {
  position: sticky;
  top: var(--authors-filters-h, 44px);
}

/* ─── База ────────────────────────────────────────────────────────────────── */

body.main-style {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Скрываем Alpine-элементы до инициализации (x-cloak). */

[x-cloak] { display: none !important; }

/* DS-shell: .app = 100vh, прокрутка внутри .main; страница сама не скроллится. */

html, body { height: 100%; }