/* «АМСУ · База знаний» — интерфейс на дизайн-системе АМСУ (ramsu.ru, colors_and_type.css).
   Цвета, шрифты, скругления и тени — из ДС. Помечено «производное» — значения, выведенные из цветов ДС
   ради WCAG 2.2 AA или тёмной темы (в ДС она не описана). Лаймовый цвет не используется. */

.hub {
  --font-display: 'Unbounded', 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'PT Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* в ДС нет моноширинного; PT Mono — только коды, номера заданий и контрольные суммы (UI-CH-17.6) */

  /* Поверхности и текст — ДС */
  --bg: #F4F6FA;             /* bg-alt */
  --surface: #FFFFFF;        /* bg */
  --surface-2: #EEF2F8;      /* bg-alt-2 */
  --surface-3: #E5EAF1;      /* line */
  --border: #E5EAF1;         /* line */
  --border-strong: #D9E0EA;  /* line-2 */
  --control-border: #728298; /* производное от slate-2: граница полей, флажков, переключателей — 3,92:1 на белом, 3,62:1 на #F4F6FA, 3,49:1 на #EEF2F8 (UI-CH-18.1) */
  --text: #0E1B2E;           /* ink */
  --text-nav: #1C2B40;       /* ink-2: пункты навигации */
  --text-2: #46566C;         /* производное от slate: вторичный текст, 7,5:1 (UI-CH-17.1) */
  --text-3: #55657C;         /* производное от slate: подписи, от 5,3:1 на всех светлых фонах; slate-2 (3:1) для текста не годится */
  --text-faint: #8595AB;     /* slate-2: только значки и декор */

  /* Действие — синий ДС */
  --primary: #1E50E0;        /* blue-600 */
  --primary-hover: #1A44C2;  /* blue-700 */
  --primary-press: #16389E;  /* blue-800 */
  --on-primary: #FFFFFF;
  --primary-soft: #EAF0FF;   /* blue-50 */
  --primary-ink: #1A44C2;    /* blue-700: текст на blue-50 */
  --primary-fg: #1E50E0;     /* значки и текст цвета действия */
  --control-on: #1E50E0;
  --link: #1E50E0;
  --focus: #1E50E0;

  /* Золото ДС — только мелкий акцент: черта надзаголовка, маркеры, треугольник знака на синем */
  --accent: #E8A33D;         /* gold-500 */
  --mark: #FCEFD9;           /* chip-amber-bg: совпадение в поиске */
  --mark-ink: #0E1B2E;

  /* Синий градиент ДС (hero / CTA) */
  --hero-from: #0B1B40;
  --hero-to: #1D4FD7;
  --on-hero: #FFFFFF;
  --on-hero-2: #D6E2FF;      /* blue-100: вторичный текст на градиенте, от 4,9:1 */
  --scrim: rgba(11, 27, 64, .48);

  /* Пастельные плашки значков — ДС chip-* */
  --chip-blue-bg: #EAF0FF;   --chip-blue-fg: #2E5BEA;
  --chip-teal-bg: #E1F4ED;   --chip-teal-fg: #1F9E73;
  --chip-amber-bg: #FCEFD9;  --chip-amber-fg: #D8902A;
  --chip-violet-bg: #EFE9FB; --chip-violet-fg: #7C5CFC;

  /* Смысловые статусы: фон — тинты ДС; текст — оттенки ДС, затемнённые до 4,5:1 (производное) */
  --s-success-fg: #137556; --s-success-bg: #E1F4ED;
  --s-info-fg: #1A44C2;    --s-info-bg: #EAF0FF;
  --s-future-fg: #18408F;  --s-future-bg: #EEF2F8; --s-future-line: #9DB0D6;
  --s-warning-fg: #8A5410; --s-warning-bg: #FCEFD9;
  --s-danger-fg: #B4302B;  --s-danger-bg: #FDECEC;
  --s-ai-fg: #5B3FD0;      --s-ai-bg: #EFE9FB;
  --s-neutral-fg: #4F5F76; --s-neutral-bg: #EEF2F8; /* 5,8:1 (UI-CH-17.1) */

  /* Тени — ДС */
  --shadow-xs: 0 1px 2px rgba(14, 27, 46, .05);
  --shadow-1: 0 2px 8px rgba(14, 27, 46, .06);                                    /* shadow-sm */
  --shadow-md: 0 10px 30px rgba(14, 27, 46, .07);
  --shadow-2: 0 24px 60px rgba(14, 27, 46, .10), 0 0 0 1px rgba(14, 27, 46, .05); /* shadow-lg + контур */
  --shadow-blue: 0 14px 30px rgba(30, 80, 224, .28);

  /* Скругления — ДС */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  --ease: ease-out;
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 220ms;

  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Тёмная тема — производная от цветов ДС (ink, ink-2, slate-3, синие, золото). Сверить с тёмным режимом ramsu.ru */
.hub[data-theme="dark"] {
  --bg: #0E1B2E;
  --surface: #1C2B40;
  --surface-2: #23344B;
  --surface-3: #2B3D56;
  --border: #2B3D56;
  --border-strong: #3A4D69;
  --control-border: #8595AB;
  --text: #EEF2F8;
  --text-nav: #D9E0EA;
  --text-2: #C9D2DE;         /* 9,4:1 на карточке */
  --text-3: #AEB9CA;         /* 7,2:1 на карточке */
  --text-faint: #8595AB;

  --primary: #1E50E0;
  --primary-hover: #2E5BEA;
  --primary-press: #1A44C2;
  --on-primary: #FFFFFF;
  --primary-soft: #1F3566;
  --primary-ink: #D6E2FF;
  --primary-fg: #AEC4FF;
  --control-on: #4E79F0;
  --link: #AEC4FF;
  --focus: #AEC4FF;

  --accent: #F0B24A;
  --mark: #5A4113;
  --mark-ink: #FCEFD9;
  --scrim: rgba(3, 8, 18, .64);

  --chip-blue-bg: #1F3566;   --chip-blue-fg: #AEC4FF;
  --chip-teal-bg: #103A2E;   --chip-teal-fg: #7DD3B0;
  --chip-amber-bg: #3B2A10;  --chip-amber-fg: #F0B24A;
  --chip-violet-bg: #2E2459; --chip-violet-fg: #C7B6FF;

  --s-success-fg: #7DD3B0; --s-success-bg: #103A2E;
  --s-info-fg: #AEC4FF;    --s-info-bg: #1F3566;
  --s-future-fg: #D6E2FF;  --s-future-bg: #122A63; --s-future-line: #3A5594;
  --s-warning-fg: #F0B24A; --s-warning-bg: #3B2A10;
  --s-danger-fg: #FF9C96;  --s-danger-bg: #45201F;
  --s-ai-fg: #C7B6FF;      --s-ai-bg: #2E2459;
  --s-neutral-fg: #C3CCD9; --s-neutral-bg: #2B3D56; /* 6,8:1 */

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, .3);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-2: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  --shadow-blue: 0 12px 26px rgba(30, 80, 224, .35);
}

/* Знак АМСУ: геометрия не меняется, цвет частей — переменными.
   ДС: знак одним цветом — ink на светлом, белый на тёмном и на синем градиенте. */
.hub { --logo-outer: var(--text); --logo-arcs: var(--text); --logo-mark: var(--text); }
.lv-mono { --logo-outer: var(--text); --logo-arcs: var(--text); --logo-mark: var(--text); }
.lv-blue { --logo-outer: var(--text); --logo-arcs: var(--text); --logo-mark: var(--primary-fg); }
.lv-white { --logo-outer: #FFFFFF; --logo-arcs: #FFFFFF; --logo-mark: #FFFFFF; }
.lv-gold { --logo-outer: #FFFFFF; --logo-arcs: #FFFFFF; --logo-mark: #E8A33D; }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--text) !important; text-decoration: none !important; flex: none; }
.lockup > svg { width: 36px; height: 36px; flex: none; display: block; }
.lockup .nm { display: flex; flex-direction: column; gap: 2px; }
.lockup .nm b { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: .04em; }
.lockup .nm span { font-size: 12px; line-height: 14px; color: var(--text-3); font-weight: 500; letter-spacing: .01em; }

/* База */
.hub, .hub * { box-sizing: border-box; }
.hub h1, .hub h2, .hub h3, .hub h4, .hub p, .hub ul, .hub ol, .hub figure { margin: 0; }
.hub ul, .hub ol { padding: 0; list-style: none; }
.hub a { color: var(--link); text-decoration: none; }
.hub a:hover { text-decoration: underline; }
.hub button { font: inherit; color: inherit; }
.hub :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hub mark { background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 0 2px; }
.hub p, .hub li { text-wrap: pretty; }
/* Заголовки и заглавные экраны — без переноса слов (UI-CH-33): ни переноса по слогам, ни разрыва слова; строки делятся только между словами. */
.hub h1, .hub h2, .hub h3, .hub h4, .hub h5, .hub h6, .hub .d1, .hub .d2, .hub .h1, .hub .h2, .hub .h3, .hub .h4 { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.hub .d1, .hub .d2, .hub h1 { text-wrap: balance; }

/* Типографика — ДС: Unbounded для заголовков, Golos Text для текста и интерфейса.
   Шкала уменьшена для рабочего интерфейса (в ДС — сайт: 56 / 42 / 30 / 22). */
.d1 { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 54px; letter-spacing: -.01em; }
.d2 { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 42px; letter-spacing: -.01em; }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.005em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 26px; }
.h3 { font-family: var(--font-ui); font-weight: 700; font-size: 17px; line-height: 24px; } /* карточки, панели, подразделы — Golos Text (UI-CH-17.5) */
.hub .doc-title { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.005em; } /* название документа в заголовке — Golos Text */
.h4 { font-weight: 700; font-size: 15px; line-height: 22px; }
.t-lead { font-size: 17px; line-height: 26px; }
.t-sm { font-size: 13px; line-height: 18px; }
.t-xs { font-size: 12px; line-height: 16px; }
.c2 { color: var(--text-2); }
.c3 { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.req { font-family: var(--font-ui); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; } /* реквизиты: №, даты, пункты, редакции — Golos Text с табличными цифрами */
.num { font-variant-numeric: tabular-nums; }
/* Надзаголовок ДС: золотая черта + синие прописные */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--primary-fg); }
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
.strong { font-weight: 600; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--link) !important; }

/* Иконки: маска + currentColor */
.ic { display: inline-block; width: 20px; height: 20px; flex: none; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.s14 { width: 14px; height: 14px; }
.ic.s16 { width: 16px; height: 16px; }
.ic.s18 { width: 18px; height: 18px; }
.ic.s24 { width: 24px; height: 24px; }

.i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); }
.i-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='9' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='5' rx='1.5'/%3E%3Crect x='13.5' y='11.5' width='7' height='9' rx='1.5'/%3E%3Crect x='3.5' y='15.5' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); }
.i-book { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5.5A2.5 2.5 0 0 1 6.5 3H20v14H6.5A2.5 2.5 0 0 0 4 19.5 2.5 2.5 0 0 0 6.5 22H20'/%3E%3Cpath d='M8 7h8M8 11h6'/%3E%3C/svg%3E"); }
.i-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); }
.i-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E"); }
.i-star-fill { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E"); }
.i-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 6.5 2.5 8 2.5 8h-17S6 15.5 6 9z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.i-upload { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3.5M7 8.5l5-5 5 5'/%3E%3Cpath d='M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E"); }
.i-inbox { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5l1.5-3h5'/%3E%3Cpath d='M5.5 5h13L21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6z'/%3E%3C/svg%3E"); }
.i-file { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
.i-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.i-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.4c1.8.9 3 2.9 3 5.6'/%3E%3C/svg%3E"); }
.i-tree { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='5' rx='1.2'/%3E%3Crect x='3' y='16' width='6' height='5' rx='1.2'/%3E%3Crect x='15' y='16' width='6' height='5' rx='1.2'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/svg%3E"); }
.i-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.i-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); }
.i-activity { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E"); }
.i-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 16v-5M12 16V6M17 16v-8'/%3E%3C/svg%3E"); }
.i-history { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.i-settings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E"); }
.i-more { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E"); }
.i-menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
.i-chev-r { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.i-chev-d { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.i-sem { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5c2.7-2.7 5.3 2.7 8 0s5.3-2.7 8 0M4 15.5c2.7-2.7 5.3 2.7 8 0s5.3-2.7 8 0'/%3E%3C/svg%3E"); }
.i-chev-u { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
.i-chev-l { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.i-filter { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.2 7.6V19l-3.6-1.8v-4.6z'/%3E%3C/svg%3E"); }
.i-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5V15M7 10l5 5 5-5M4 20.5h16'/%3E%3C/svg%3E"); }
.i-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.i-check-c { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E"); }
.i-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E"); }
.i-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); }
.i-x-oct { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l5 5v8l-5 5H8l-5-5V8z'/%3E%3Cpath d='M9.5 9.5l5 5M14.5 9.5l-5 5'/%3E%3C/svg%3E"); }
.i-shield-ok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.i-shield-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M9.5 9.5l5 5M14.5 9.5l-5 5'/%3E%3C/svg%3E"); }
.i-shield-q { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M12 8.5v4M12 15.5h.01'/%3E%3C/svg%3E"); }
.i-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3C/svg%3E"); }
.i-loader { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/%3E%3C/svg%3E"); }
.i-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); }
.i-image { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-11 9'/%3E%3C/svg%3E"); }
.i-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.i-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.i-external { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.i-spark { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5l1.7 4.8L17.5 10l-4.8 1.7L11 16.5l-1.7-4.8L4.5 10l4.8-1.7z'/%3E%3Cpath d='M18.5 15l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); }
.i-building { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16M14.5 9h4a1 1 0 0 1 1 1v11M3 21h18M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
.i-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5a7 7 0 0 0-14 0C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.i-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.i-minus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.i-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.8-3.5L3.5 10'/%3E%3Cpath d='M3.5 4v6h6M4 13a8 8 0 0 0 14.8 3.5l1.7-2.5'/%3E%3Cpath d='M20.5 20v-6h-6'/%3E%3C/svg%3E"); }
.i-eye { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-logout { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 16l-4-4 4-4M6 12h10'/%3E%3C/svg%3E"); }
.i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E"); }
.i-branch { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='8' r='2.5'/%3E%3Cpath d='M6 8.5v7M18 10.5c0 4-4 4.5-9.6 6.3'/%3E%3C/svg%3E"); }
.i-wifi-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M8.5 16.5a5 5 0 0 1 7 0M5 12.6a10 10 0 0 1 4.6-2.4M19 12.6a10 10 0 0 0-2.4-1.7M2 8.8a15 15 0 0 1 4.2-2.6M12 20h.01'/%3E%3C/svg%3E"); }
.i-swap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4 4 7l3 3M4 7h13M17 20l3-3-3-3M20 17H7'/%3E%3C/svg%3E"); }
.i-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.i-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.i-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
.i-arrow-r { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.i-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }
.i-monitor { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.i-template { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2'/%3E%3Cpath d='M3.5 9h17M9 9v11.5'/%3E%3C/svg%3E"); }
.i-scale { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 7h14M5 7l-2.5 6a3 3 0 0 0 5 0zM19 7l-2.5 6a3 3 0 0 0 5 0z'/%3E%3C/svg%3E"); }
.i-practice { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.i-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3M14 9l2 2'/%3E%3C/svg%3E"); }

.i-scan { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h5'/%3E%3C/svg%3E"); }
.i-table { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 9.5h17M3.5 15h17M10 9.5V20'/%3E%3C/svg%3E"); }
.i-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14M5 10h14M5 14h10M5 18h7'/%3E%3C/svg%3E"); }
.i-pages { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='13' height='15' rx='2'/%3E%3Cpath d='M4 7v12a2 2 0 0 0 2 2h10'/%3E%3C/svg%3E"); }

/* Кнопки — ДС: основная синяя с синей тенью, вторичная белая с тонкой границей, радиус 14 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent; font-weight: 600; font-size: 14px; line-height: 20px;
  cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.btn-primary { background: var(--primary); color: var(--on-primary) !important; }
.btn-primary.btn-lg { box-shadow: var(--shadow-blue); } /* синяя тень — только у главной кнопки экрана (UI-CH-17.7) */
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--primary-press); transform: none; box-shadow: none; }
.btn-secondary { background: var(--surface); color: var(--text) !important; border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-soft { background: var(--primary-soft); color: var(--primary-ink) !important; }
.btn-soft:hover { border-color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text-2) !important; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text) !important; }
.btn-danger { background: var(--surface); color: var(--s-danger-fg) !important; border-color: var(--border-strong); }
.btn-danger:hover { background: var(--s-danger-bg); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); gap: 6px; }
.btn-sm.btn-primary { box-shadow: none; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Поля */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); }
.hint { font-size: 12px; line-height: 16px; color: var(--text-3); }
.err-text { font-size: 12px; line-height: 16px; color: var(--s-danger-fg); display: flex; gap: 6px; align-items: center; }
.input { height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.input::placeholder { color: var(--text-3); }
.input:focus, .input.is-focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.is-err { border-color: var(--s-danger-fg); box-shadow: 0 0 0 3px var(--s-danger-bg); }
.input-lg { height: 48px; font-size: 16px; }
.inputwrap { position: relative; display: flex; align-items: center; min-width: 0; }
.inputwrap > .ic { position: absolute; left: 12px; color: var(--text-3); pointer-events: none; }
.inputwrap > .input { padding-left: 40px; }
.inputwrap > .kbd { position: absolute; right: 10px; }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: none; }

/* Статусы, метки, этапы — ДС: метки-капсулы на тинтах */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-full);
  font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.chip > .ic { width: 14px; height: 14px; }
.chip-lg { height: 28px; padding: 0 12px 0 10px; font-size: 13px; gap: 6px; }
.chip-lg > .ic { width: 16px; height: 16px; }
.st-success { color: var(--s-success-fg); background: var(--s-success-bg); }
.st-info { color: var(--s-info-fg); background: var(--s-info-bg); }
.st-future { color: var(--s-future-fg); background: var(--s-future-bg); outline: 1px dashed var(--s-future-line); outline-offset: -1px; }
.st-warning { color: var(--s-warning-fg); background: var(--s-warning-bg); }
.st-danger { color: var(--s-danger-fg); background: var(--s-danger-bg); }
.st-ai { color: var(--s-ai-fg); background: var(--s-ai-bg); }
.st-neutral { color: var(--s-neutral-fg); background: var(--s-neutral-bg); }
.fg-success { color: var(--s-success-fg); } .fg-info { color: var(--s-info-fg); } .fg-future { color: var(--s-future-fg); }
.fg-warning { color: var(--s-warning-fg); } .fg-danger { color: var(--s-danger-fg); } .fg-ai { color: var(--s-ai-fg); }
.fg-neutral { color: var(--s-neutral-fg); } .fg-primary { color: var(--primary-fg); }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface); font-size: 13px; line-height: 18px; color: var(--text-2);
  white-space: nowrap; cursor: pointer; }
.tag:hover { border-color: var(--border-strong); color: var(--text); }
.tag.on { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); font-weight: 600; }
.tag > .ic { width: 14px; height: 14px; }
.stage { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px dashed var(--text-faint);
  border-radius: var(--r-xs); font-family: var(--font-ui); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--text-3);
  letter-spacing: .02em; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.badge.hot { background: var(--primary); color: var(--on-primary); }
.kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: var(--r-xs); font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--surface); }

/* Поверхности — ДС: белые карточки, тонкая граница и мягкая тень, радиус 18 */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card-flat { background: var(--surface-2); border-radius: var(--r-lg); }
.divider { height: 1px; background: var(--border); border: 0; width: 100%; }
.dots { background-image: radial-gradient(var(--border-strong) 1px, transparent 1.3px); background-size: 18px 18px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-ink); font-family: var(--font-ui); font-size: 12px; font-weight: 700; flex: none; }

/* ДС: синий градиент с сеткой (hero, финальная полоса) */
.hero-band { color: var(--on-hero); background-color: var(--hero-from);
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(115deg, var(--hero-from) 0%, var(--hero-to) 100%);
  background-size: 34px 34px, 34px 34px, 100% 100%; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28); color: var(--on-hero); font-size: 13px; font-weight: 500; }
.hero-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E8A33D; flex: none; }

/* ДС: пастельные плашки значков и номеров (карточки направлений) */
.ichip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex: none; }
.ichip > .ic { width: 22px; height: 22px; }
.ichip.sm { width: 36px; height: 36px; border-radius: var(--r-sm); }
.ichip.sm > .ic { width: 18px; height: 18px; }
.ich-blue { background: var(--chip-blue-bg); color: var(--chip-blue-fg); }
.ich-teal { background: var(--chip-teal-bg); color: var(--chip-teal-fg); }
.ich-amber { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.ich-violet { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
.numchip { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex: none;
  font-weight: 800; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
.numchip.sm { width: 32px; height: 32px; border-radius: var(--r-sm); font-size: 13px; }
/* номера — текст, поэтому цвет цифр затемнён до 4,5:1 (производное) */
.nc-blue { background: var(--chip-blue-bg); color: var(--s-info-fg); }
.nc-teal { background: var(--chip-teal-bg); color: var(--s-success-fg); }
.nc-amber { background: var(--chip-amber-bg); color: var(--s-warning-fg); }
.nc-violet { background: var(--chip-violet-bg); color: var(--s-ai-fg); }

/* Баннеры */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14px; line-height: 20px; }
.banner > .ic { margin-top: 0; }

/* Навигация (компьютер) */
.topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 24px;
  background: var(--surface); border-bottom: 1px solid var(--border); }
/* Организация пользователя — подпись, не кнопка: у сотрудника одна организация (UI-CH-19) */
.ctx { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 16px; border-left: 1px solid var(--border);
  background: none; text-align: left; color: var(--text); flex: none; }
.sidebar { flex: 1 1 248px; padding: 20px 12px 24px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border-right: 1px solid var(--border); }
.navgroup { padding: 18px 12px 6px; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; }
.navitem { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
  color: var(--text-nav) !important; font-weight: 500; font-size: 14px; text-decoration: none !important; }
.navitem > .ic { color: var(--text-faint); }
.navitem:hover { background: var(--surface-2); color: var(--text) !important; }
.navitem.active { background: var(--primary-soft); color: var(--primary-ink) !important; font-weight: 600; }
.navitem.active > .ic { color: var(--primary-fg); }
.navitem > .badge { margin-left: auto; }
.main { flex: 999 1 560px; min-width: 0; padding: 28px 40px 48px; }
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-3); }

/* Сегменты, вкладки, переключатели */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-md);
  border: 1px solid var(--border); }
.seg > button { height: 30px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--r-sm); font-size: 13px;
  font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.seg > button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); font-weight: 600; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { position: relative; height: 44px; padding: 0 12px; border: 0; background: none; font-size: 14px; font-weight: 500;
  color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--primary-fg); }
.switch { position: relative; width: 40px; height: 24px; border-radius: var(--r-full); background: var(--control-border);
  border: 0; flex: none; cursor: pointer; padding: 0; transition: background-color var(--dur-2) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--dur-2) var(--ease); }
.switch[aria-checked="true"] { background: var(--control-on); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.check { width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--control-border); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; flex: none; color: #FFFFFF; }
.check.on { background: var(--control-on); border-color: var(--control-on); }

/* Таблицы и списки */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
.tbl th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); padding: 10px 12px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tr.sel td { background: var(--primary-soft); }
.scrollx { overflow-x: auto; }
.row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: var(--text) !important;
  text-decoration: none !important; }
.row + .row { border-top: 1px solid var(--border); }

/* Телефон */
.phone { width: 100%; max-width: 390px; height: 844px; overflow: hidden; position: relative; display: flex; flex-direction: column;
  background: var(--bg); }
.mhead { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.mbody { flex: 1; overflow: hidden; padding: 0 16px 108px; display: flex; flex-direction: column; gap: 16px; }
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 6px 24px; background: var(--surface); border-top: 1px solid var(--border); }
.tabbar > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px;
  font-size: 11px; line-height: 14px; font-weight: 500; color: var(--text-3) !important; text-decoration: none !important;
  position: relative; }
.tabbar > a > .pill { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; }
.tabbar > a.active { color: var(--primary-ink) !important; font-weight: 600; }
.tabbar > a.active > .pill { background: var(--primary-soft); color: var(--primary-fg); }
.tabbar > a.cta > .pill { width: 60px; height: 36px; border-radius: 18px; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-blue); }
.tabbar > a.cta.active > .pill { background: var(--primary-press); color: var(--on-primary); }
.tabbar .count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-2); padding: 8px 16px 32px; display: flex; flex-direction: column; gap: 4px; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 0 auto 10px; }
.scrim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--scrim); }

/* Подсказка (тост), всплывающее меню, пункты меню */
.hub { --toast-bg: #0E1B2E; --toast-fg: #FFFFFF; --toast-action: #AEC4FF; }
.hub[data-theme="dark"] { --toast-bg: #EEF2F8; --toast-fg: #0E1B2E; --toast-action: #1A44C2; }
.toast { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--r-md);
  background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-2); font-size: 14px; line-height: 20px; }
.toast .t-act { border: 0; background: none; color: var(--toast-action); font: inherit; font-weight: 600; height: 36px;
  padding: 0 10px; border-radius: 8px; cursor: pointer; }
.toast .t-x { border: 0; background: none; color: var(--toast-fg); opacity: .7; width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.popover { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 8px; min-width: 300px;
  display: flex; flex-direction: column; gap: 2px; }
.menuitem { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0;
  background: none; border-radius: var(--r-sm); cursor: pointer; text-align: left; font: inherit; font-size: 14px; color: var(--text); }
.menuitem:hover { background: var(--surface-2); }
.menuitem.danger { color: var(--s-danger-fg); }
.menu-label { padding: 8px 10px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }

/* Скелетон */
.skel { border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%; animation: hub-skel 1.4s ease-in-out infinite; }
@keyframes hub-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::after { transition: none !important; animation: none !important; }
}

/* Компактный вид рабочих экранов: очередь, документы, загрузки, администрирование (UI-CH-17.4) */
.hub[data-density="compact"] .card { box-shadow: none; }
.hub[data-density="compact"] .tbl th { padding: 8px 12px; }
.hub[data-density="compact"] .tbl td { padding: 8px 12px; }
.hub[data-density="compact"] .tbl .chip { height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-xs); }
.hub[data-density="compact"] .row { min-height: 48px; }

/* Всплывающая подпись значковых кнопок — при наведении и фокусе с клавиатуры; не исчезает, пока указатель на ней; Esc закрывает (UI-CH-05 п. 9) */
.has-tip { position: relative; }
.has-tip[data-tip]:hover::after, .has-tip[data-tip]:focus-visible::after, .has-tip.is-tip[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px);
  z-index: 25; white-space: nowrap; padding: 5px 8px; border-radius: var(--r-xs); background: var(--toast-bg); color: var(--toast-fg);
  font-size: 12px; line-height: 16px; font-weight: 500; box-shadow: var(--shadow-1); }
.has-tip.tip-start::after { right: auto; left: 0; }
/* Сохранённая звёздочка: значок + стрелка — нажатие открывает меню подборок */
.btn.star-btn { width: auto; min-width: 32px; padding: 0 6px; gap: 2px; }
.btn.star-btn.btn-lg { min-width: 48px; padding: 0 10px; }

/* Текст только для экранного диктора */
.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; }
/* Скрытая колонка таблицы */
.tbl .col-off { display: none; }

/* Пометка источника значения — под полем, мелко, со значком: «из файла», «из прошлой загрузки» (UI-CH-20) */
.src-mark { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; color: var(--text-3); }
.src-mark > .ic { width: 14px; height: 14px; }
/* Значок «по полю фильтруют каталог» рядом с подписью поля */
.flt-mark { display: inline-flex; align-items: center; color: var(--text-3); border-radius: 4px; }
.flt-mark > .ic { width: 14px; height: 14px; }
/* Поле со списком меток — одной строкой, высотой как поле ввода */
.chips-input { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; cursor: pointer; text-align: left; background: var(--surface); }
.chips-input .chip { flex: none; }

/* Фильтры каталога: строка значения с флажком и числом, переключатель-радио (UI-CH-21) */
.facet { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 6px; border: 0; background: none;
  border-radius: var(--r-xs); font: inherit; font-size: 13px; line-height: 18px; color: var(--text); cursor: pointer; text-align: left; }
.facet:hover { background: var(--surface-2); }
.facet.is-zero { color: var(--text-3); }
.facet .num { margin-left: auto; color: var(--text-3); font-size: 12px; }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--control-border); background: var(--surface); flex: none; }
.radio.on { border-color: var(--control-on); background: var(--control-on); box-shadow: inset 0 0 0 4px var(--surface); }

/* «Мои загрузки»: загрузка — строка с итогом; раскрытие — файлы по этапам и пояснение под файлом (UI-CH-22) */
.upl { border-top: 1px solid var(--border); }
.upl.is-new { box-shadow: inset 3px 0 0 var(--primary); }
.upl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 60px; padding: 10px 20px 10px 12px; }
.upl-tg { width: 32px; flex: none; display: inline-flex; justify-content: center; }
.uf { min-width: 980px; border-top: 1px solid var(--border); background: var(--surface-2); }
.uf-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, .7fr) 156px; gap: 0 12px;
  align-items: center; min-height: 48px; padding: 8px 20px 8px 54px; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.uf-row.uf-h { min-height: 36px; border-top: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
.uf-row.is-open, .uf-det { background: var(--surface); }
.uf-span { grid-column: 2 / 6; }
.uf-span3 { grid-column: 3 / 6; }
.uf-off { display: none; }
.uf-act { display: flex; justify-content: flex-end; }
.uf-det { padding: 4px 20px 16px 54px; }
.hub[data-density="compact"] .uf .chip { height: 22px; padding: 0 8px 0 6px; border-radius: var(--r-xs); }
.tbl tr.row-off { display: none; }

/* Поиск по смыслу: выдержки с типом совпадения, переход к пункту (UI-CH-24, SEM-04…07) */
.frag { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.frag-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.match { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-2); }
.match > .ic { width: 14px; height: 14px; }
.match.sem { color: var(--primary-ink); }
.frag-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Выделение в тексте документа: слова — маркером, смысл — весь пункт */
.lex-hit, .sem-hit { display: flex; flex-direction: column; gap: 4px; margin: 0 -12px; padding: 8px 12px; border-radius: 8px; }
.sem-hit { background: var(--primary-soft); }
.lex-hit.is-cur, .sem-hit.is-cur { box-shadow: inset 0 0 0 2px var(--primary-fg); }
.search-ctx { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px; }

/* Панель фильтров списков: «Загрузки» и «Очередь» (UI-CH-25) */
.fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.btn.is-set { border-color: var(--primary-fg); background: var(--primary-soft); color: var(--primary-ink) !important; }
.upl-day { padding: 8px 20px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-3); }
.uf.flat { border-top: 0; background: var(--surface); }
.uf.flat .uf-row { padding-left: 20px; grid-template-columns: minmax(0, 1.9fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr) minmax(0, .7fr) 150px; }
.uf.flat .uf-row.uf-h { background: var(--surface-2); }
.tbl tr.q-group td { background: var(--surface-2); }
/* Выбор периода: быстрые варианты и календарь с диапазоном */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-w { font-size: 11px; line-height: 24px; text-align: center; font-weight: 600; color: var(--text-3); }
.cal-d { height: 32px; border: 0; padding: 0; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-d:hover { background: var(--surface-2); }
.cal-d.in-range { background: var(--primary-soft); color: var(--primary-ink); border-radius: 0; }
.cal-d.is-start, .cal-d.is-end { background: var(--primary); color: var(--on-primary); }
.cal-d.is-today { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.cal-d.is-future { color: var(--text-3); }
.cal-blank { visibility: hidden; pointer-events: none; }

/* Поиск: тип совпадения, сворачиваемые группы фильтров, вид «Списком» (UI-CH-26) */
.i-quote { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17c2.5-1 4-3.2 4-6.5V7H5v4h4'/%3E%3Cpath d='M15 17c2.5-1 4-3.2 4-6.5V7h-4v4h4'/%3E%3C/svg%3E"); }
.i-sort { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 7.5 7 4l3.5 3.5M17 20V4M13.5 16.5 17 20l3.5-3.5'/%3E%3C/svg%3E"); }
.fgroup-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-xs); }
.fgroup-h > .ic { margin-left: auto; flex: none; }
.fgroup-h:hover > .ic { color: var(--text); }
.fgroup-sum { margin-left: auto; min-width: 0; max-width: 170px; text-align: right; line-height: 16px; color: var(--text-2); }
.fgroup-sum + .ic { margin-left: 0; }
.match.weak { color: var(--text-3); }
.hub .sum-l { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: var(--r-full); background: none; font: inherit; font-size: 14px; color: var(--link); cursor: pointer; }
.hub .sum-l:hover { background: var(--surface-2); }
.hub .sum-l.on { background: var(--primary-soft); color: var(--primary-ink); }
.hub .sum-l.is-off { color: var(--text-3); cursor: default; }
.sr-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 0 12px; align-items: center; min-height: 58px; padding: 8px 10px 8px 16px; border-top: 1px solid var(--border); }
.sr-row.sr-h { min-height: 36px; border-top: 0; background: var(--surface-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
.sr-row.is-open, .sr-det { background: var(--surface-2); }
.sr-det { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }
.sr-det .frag { background: var(--surface); }

/* Поиск: дерево разделов и поле «Вид спорта» (UI-CH-26.3, UI-CH-27.5) */
.i-sport { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3c-2.5 3-2.5 6 0 9s2.5 6 0 9'/%3E%3Cpath d='M3.6 8.5c3.5 1.5 6.3 1.8 8.4 3.5M20.4 15.5c-3.5-1.5-6.3-1.8-8.4-3.5'/%3E%3C/svg%3E"); }
.sec-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sec-row > .facet { flex: 1; min-width: 0; }
.sec-row.sec-l1 { padding-left: 22px; }
.sec-row.sec-l2 { padding-left: 44px; }
.sec-row.sec-l3 { padding-left: 66px; }
.hub .sec-exp { width: 24px; height: 28px; flex: none; }
.sec-sp { width: 24px; flex: none; }

/* ====================================================================================
   Вариант «до 10» (UI-CH-18, принято). Перенесено на основной лист 10.10.2026 (холст 61).
   ==================================================================================== */

/* 18.1 Границы полей, флажков, переключателей #728298 — принято 09.10 и перенесено на основной лист (hub.css) */

/* 18.2 Двойная рамка фокуса: внутреннее кольцо цвета поверхности + внешнее синее.
   Видна на белом, сером, голубом выделении и на синих кнопках; на градиенте — белая. */
.hub { --focus-gap: var(--surface); }
.hub :focus-visible, .hub .is-ring { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); }
.hub .input:focus-visible, .hub .input.is-focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px var(--primary-soft); }
.hub .hero-band { --focus: #FFFFFF; --focus-gap: #0B1B40; }
.hub .tabbar a:focus-visible > .pill, .hub .tabbar a.is-ring > .pill { outline: 2px solid var(--focus); outline-offset: 2px; }
.hub .tabbar a:focus-visible, .hub .tabbar a.is-ring { outline: none; box-shadow: none; }

/* 18.3 Ссылка «Перейти к содержанию»: первая по Tab, видна только при фокусе */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 40px;
  padding: 0 16px; border-radius: var(--r-md); background: var(--primary); color: var(--on-primary) !important; font-weight: 600;
  font-size: 14px; text-decoration: none !important; box-shadow: var(--shadow-2); transition: top var(--dur-2) var(--ease); }
.skip-link:focus, .skip-link.is-shown { top: 12px; }
.hub main:focus { outline: none; }

/* 18.4 Одна основная кнопка на экран: правило без новых классов — см. доску «Компоненты» */

/* 18.5 Таблицы: закреплённая шапка, сортировка, выбор колонок */
.tbl-scroll { overflow: auto; max-height: var(--tbl-max, 560px); overscroll-behavior: contain; }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.tbl-scroll.is-scrolled thead th, .tbl thead.is-stuck th { box-shadow: 0 1px 0 var(--border), 0 6px 12px -8px rgba(14, 27, 46, .25); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: -4px -6px; padding: 0 6px; border: 0;
  border-radius: var(--r-xs); background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:hover { background: var(--surface-2); color: var(--text); }
.th-sort > .ic { width: 14px; height: 14px; color: var(--text-faint); }
.tbl th[aria-sort="ascending"], .tbl th[aria-sort="descending"] { color: var(--text); }
.tbl th[aria-sort="ascending"] .th-sort > .ic, .tbl th[aria-sort="descending"] .th-sort > .ic { color: var(--primary-fg); }
.tbl tr.is-range td { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.tbl tr.is-range td + td { box-shadow: none; }
.tbl .col-off { display: none; }

/* 18.6 Движение: шторки, диалоги, тосты, меню. При «уменьшить движение» — без анимации (правило выше) */
/* анимируются свойства translate/scale, а не transform — не конфликтуют с позиционированием translateX(-50%) */
@keyframes hub-sheet-in { from { translate: 0 32px; opacity: 0; } to { translate: none; opacity: 1; } }
@keyframes hub-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hub-pop-in { from { opacity: 0; translate: 0 -4px; scale: .98; } to { opacity: 1; translate: none; scale: none; } }
@keyframes hub-toast-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
.sheet { animation: hub-sheet-in var(--dur-3) cubic-bezier(.2, .8, .2, 1) both; }
.scrim { animation: hub-fade-in var(--dur-2) var(--ease) both; }
.hub [role="dialog"].card { animation: hub-fade-in var(--dur-2) var(--ease) both; }
.popover { animation: hub-pop-in var(--dur-1) var(--ease) both; transform-origin: top; }
.toast { animation: hub-toast-in var(--dur-2) var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { animation: none !important; transition: none !important; }
}

/* 18.7 Телефон: безопасные зоны (вырез, полоса жестов) */
.tabbar { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.sheet { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px)); }
.phone .mhead { padding-top: max(10px, env(safe-area-inset-top)); }

/* 18.8 Режим чтения документа: 17/28, строка до 68 знаков */
.reading { font-size: 17px; line-height: 28px; max-width: 68ch; color: var(--text); }
.reading p + p { margin-top: 14px; }
.reading h2 { font-family: var(--font-ui); font-weight: 700; font-size: 20px; line-height: 28px; margin: 28px 0 10px; }
.reading .pt { font-weight: 700; color: var(--primary-ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.reading-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0;
  background: var(--bg); border-bottom: 1px solid var(--border); }
.reading-toc { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; }
.reading-toc a { display: block; padding: 6px 10px; border-radius: var(--r-xs); color: var(--text-2) !important; border-left: 2px solid transparent; }
.reading-toc a[aria-current="true"] { color: var(--primary-ink) !important; background: var(--primary-soft); border-left-color: var(--primary); font-weight: 600; }

/* 18.9 Поиск и команды (Ctrl F) */
.cmdk { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); z-index: 41;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; display: flex; flex-direction: column;
  animation: hub-fade-in var(--dur-2) var(--ease) both; }
.cmdk-head { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--border); }
.cmdk-head > .ic { color: var(--text-3); }
.cmdk-input { flex: 1; min-width: 0; height: 54px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--text); }
.cmdk-input:focus-visible { outline: none; box-shadow: none; }
.cmdk-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: 440px; overflow: auto; }
.cmdk-group { padding: 10px 10px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
.cmdk-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; color: var(--text); text-decoration: none !important; }
.cmdk-item > .ic { color: var(--text-3); }
.cmdk-item:hover, .cmdk-item[aria-selected="true"] { background: var(--primary-soft); color: var(--primary-ink); }
.cmdk-item[aria-selected="true"] > .ic { color: var(--primary-fg); }
.cmdk-item .kbd { margin-left: auto; }
.cmdk-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: 12px; line-height: 16px; color: var(--text-3); }
.cmdk-foot > span { display: inline-flex; align-items: center; gap: 6px; }

/* 18.10 Мотив ДС: концентрические кольца + золотой треугольник («play»).
   На градиенте — водяной знак; на светлом — пустые состояния. Других изображений нет. */
.hub { --motif-ring: rgba(30, 80, 224, .10); --motif-ring-2: rgba(30, 80, 224, .05); }
.hub[data-theme="dark"] { --motif-ring: rgba(174, 196, 255, .14); --motif-ring-2: rgba(174, 196, 255, .07); }
.motif { position: relative; width: 136px; height: 136px; flex: none; }
.motif::before { content: ""; position: absolute; inset: 20px; border-radius: 50%; border: 18px solid var(--motif-ring);
  box-shadow: 0 0 0 14px var(--motif-ring-2); }
.motif::after { content: ""; position: absolute; left: calc(50% - 11px); top: 50%; transform: translateY(-50%);
  border-left: 30px solid var(--accent); border-top: 19px solid transparent; border-bottom: 19px solid transparent; }
.motif.sm { width: 96px; height: 96px; }
.motif.sm::before { inset: 14px; border-width: 12px; box-shadow: 0 0 0 10px var(--motif-ring-2); }
.motif.sm::after { left: calc(50% - 8px); border-left-width: 22px; border-top-width: 14px; border-bottom-width: 14px; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 40px 24px; }
.empty .h3 { max-width: 420px; }
.empty p { max-width: 460px; }

/* 18.11 Тост с отменой: таймер-полоса (без звука, без блокировки) */
.toast.has-timer { position: relative; overflow: hidden; }
.toast.has-timer::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--left, 60%);
  background: var(--toast-action); opacity: .8; }

/* 18.12 Плотность — личная настройка: переключатель в панели инструментов таблицы */
.density-toggle { display: inline-flex; }

/* 18.13 Подсказки клавиш в панели выбора */
.keys { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--text-3); flex-wrap: wrap; }

/* 18.14 Состояния компонентов (для доски «Компоненты»; в продукте — псевдоклассы) */
.btn-primary.is-hover { background: var(--primary-hover); }
.btn-primary.is-press { background: var(--primary-press); box-shadow: none; }
.btn-secondary.is-hover, .btn-ghost.is-hover { background: var(--surface-2); }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor;
  border-color: var(--text-2) var(--text-2) transparent transparent; animation: hub-spin .8s linear infinite; }
.btn-primary.is-busy::after { border-color: var(--on-primary) var(--on-primary) transparent transparent; }
.btn-danger.is-busy::after { border-color: var(--s-danger-fg) var(--s-danger-fg) transparent transparent; }
@keyframes hub-spin { to { transform: rotate(360deg); } }
.offline-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--s-warning-bg); color: var(--s-warning-fg);
  font-size: 13px; line-height: 18px; font-weight: 600; }

/* Значки варианта (Lucide-подобные штрихи, 24×24, stroke 2) */
.i-sort { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 7.5 7 4l3.5 3.5M17 20V4M13.5 16.5 17 20l3.5-3.5'/%3E%3C/svg%3E"); }
.i-arrow-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.i-arrow-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.i-columns { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='16' rx='2'/%3E%3Cpath d='M9.5 4v16M14.5 4v16'/%3E%3C/svg%3E"); }
.i-undo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
.i-keyboard { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Cpath d='M6.5 10h.01M10 10h.01M14 10h.01M17.5 10h.01M7.5 14h9'/%3E%3C/svg%3E"); }
.i-reading { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5h6A3.5 3.5 0 0 1 12 9v11a2.5 2.5 0 0 0-2.5-2.5h-7z'/%3E%3Cpath d='M21.5 5.5h-6A3.5 3.5 0 0 0 12 9v11a2.5 2.5 0 0 1 2.5-2.5h7z'/%3E%3C/svg%3E"); }
.i-type { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V5h11v2M9.5 5v14M7.5 19h4M14 13v-1.5h7V13M17.5 11.5V19M16 19h3'/%3E%3C/svg%3E"); }
.i-flash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.i-camera-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M9.5 4.5h5L16 7h3a2 2 0 0 1 2 2v8.5M17.5 20H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9.9 10.1a3 3 0 0 0 4 4'/%3E%3C/svg%3E"); }
.i-focus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8V5a2 2 0 0 1 2-2h3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-sun { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.i-plus-sq { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.i-share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 7.5 12 3l4.5 4.5'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3C/svg%3E"); }
.i-corner { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 10 4 15l5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E"); }

/* ---------- Лист «Объекты спорта» (UI-CH-31, W16/W17): изображения, таблицы-сетки, дерево комплекта, лист чертежа ---------- */
.ob-img { position: relative; overflow: hidden; background: var(--surface-2); }
.ob-img > svg { display: block; width: 100%; height: 100%; }
.ob-img .ob-lbl { position: absolute; left: 10px; top: 10px; }
.ob-none { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-3); }
.ob-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; box-shadow: var(--shadow-1); }
.ob-card .ob-img { border-bottom: 1px solid var(--border); }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 16px; }
.ob-row { display: grid; gap: 0 12px; align-items: center; min-height: 44px; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 13px; line-height: 18px; }
.ob-row.ob-h { min-height: 34px; border-top: 0; background: var(--surface-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-3); }
.ob-row.ob-sum { background: var(--surface-2); font-weight: 600; }
.ob-row.is-sel { background: var(--primary-soft); }
.ob-row.is-off { color: var(--text-3); }
.ob-ind1 { padding-left: 26px; }
.ob-ind2 { padding-left: 52px; }
.ob-r { text-align: right; font-variant-numeric: tabular-nums; }
.ob-paper { background: #FFFFFF; color: #24324A; border-radius: 4px; box-shadow: var(--shadow-1); }
.ob-paper svg { display: block; width: 100%; height: auto; }
.ob-stamp { border-collapse: collapse; font-size: 10px; line-height: 13px; color: #24324A; }
.ob-stamp td { border: 1px solid #24324A; padding: 2px 6px; }
.ob-tile { display: flex; flex-direction: column; gap: 6px; }
.ob-tile .ob-img { border-radius: var(--r-sm); }
.ob-dia { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); }
.ob-dia.lv0 { border-color: var(--primary); box-shadow: var(--shadow-1); }
.ob-dia.lv2 { background: var(--surface-2); }
.ob-pick.is-sel { outline: 2px solid var(--primary); outline-offset: -2px; }
.navitem.ob-sub { padding-left: 36px; }
.ob-ph > * { flex: none; }
.ob-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
/* Многострочное поле: растёт по содержимому, текст не обрезается (UI-CH-33.4) */
.input.input-ml { display: block; height: auto; min-height: 40px; padding-top: 9px; padding-bottom: 9px; line-height: 20px; resize: none; overflow: hidden; field-sizing: content; }
.input.input-ml.input-lg { min-height: 48px; padding-top: 13px; padding-bottom: 13px; }
/* API-ключи (UI-CH-34): выбранная карточка списка, недоступный пункт прав */
.card.is-sel { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.check.is-dis { background: var(--surface-2); border-style: dashed; }