/* Studentix — единый дизайн-язык: токены + базовые компоненты (S31-r, 2026-10-01).
   Спецификация: docs/DESIGN.md («Дизайн-язык проекта», «Стеклянный стиль», «Редактор: стиль и контролы»),
   план переделки: docs/night/DESIGN-REBUILD-PLAN.md. Референс — doc.mail.ru; эталон «своего» стиля — hero главной.

   Правила (обязательны для всех этапов S24-r, S25-r, S26-r, S22-r, S18-r):
   1. СВЕТЛАЯ тема по умолчанию везде. Тёмная — только явно: <html data-theme="dark">. Системная prefers-color-scheme НЕ включает тёмную.
   2. Цвета берём только отсюда: фон #F4F7FE, поверхности #FFFFFF, один акцент #2F6BFF, текст #1B2430 / #566274. Никаких «случайных» hex в css этапов.
   3. Стекло (.stx-glass) — только плавающие элементы: шапка-пилюля, тулбар, меню, попапы, правая панель, окно блокировки.
      Рабочие зоны (лист A4, списки, формы, карточки контента) — плоское белое (.stx-card / .stx-surface).
   4. Иконки — только тонкие (stroke 1.5) из спрайта images/icons.svg, цвет currentColor. Без заливных, без разнокалиберных.
   5. Типографика текста: колонка 680–760 px (.stx-prose), левый край, ссылки инлайн (style.min.css ставит a{display:block} — здесь снимаем).
   6. Не копировать чужие макеты. Развиваем дизайн владельца.

   Подключается ПЕРЕД plan.css, css редактора, посадочных, кабинета, инструментов. Все имена — с префиксом --stx- / .stx-. */

:root {
  color-scheme: light;

  /* ---------- палитра (светлая) */
  --stx-bg: #F4F7FE;                 /* фон приложения и страниц */
  --stx-surface: #FFFFFF;            /* лист, карточки, рабочие зоны */
  --stx-surface-2: #F8FAFF;          /* вторичные панели, поля внутри карточек */
  --stx-surface-raise: rgba(255, 255, 255, .8);
  --stx-text: #1B2430;               /* основной текст, 15.6:1 на белом */
  --stx-text-2: #566274;             /* вторичный текст, 6.2:1 */
  --stx-text-3: #8A94A6;             /* плейсхолдеры и намёки (не для смыслового текста) */
  --stx-accent: #2F6BFF;             /* единственный акцент */
  --stx-accent-hover: #2258EE;
  --stx-accent-active: #1B4DD6;
  --stx-accent-text: #1F52D9;        /* акцентный текст и ссылки, 6.4:1 */
  --stx-accent-soft: rgba(47, 107, 255, .10);
  --stx-accent-soft-2: rgba(47, 107, 255, .16);
  --stx-accent-line: rgba(47, 107, 255, .28);
  --stx-accent-ring: rgba(47, 107, 255, .30);
  --stx-accent-shadow: 0 6px 16px rgba(47, 107, 255, .26);
  --stx-on-accent: #FFFFFF;
  --stx-success: #1F9D55;
  --stx-success-text: #1A7F45;
  --stx-success-soft: rgba(31, 157, 85, .12);
  --stx-warning: #F59E0B;
  --stx-warning-text: #7A4A00;
  --stx-warning-soft: rgba(245, 158, 11, .14);
  --stx-danger: #E0405A;
  --stx-danger-text: #C4243E;
  --stx-danger-soft: rgba(224, 64, 90, .12);
  --stx-separator: rgba(27, 36, 48, .08);
  --stx-line: rgba(27, 36, 48, .14);
  --stx-fill: rgba(27, 36, 48, .05);
  --stx-fill-2: rgba(27, 36, 48, .09);
  --stx-veil: rgba(255, 255, 255, .82);
  --stx-scrim: rgba(27, 36, 48, .32);
  --stx-tooltip-bg: #1B2430;
  --stx-tooltip-fg: #FFFFFF;
  --stx-paper: #FFFFFF;              /* лист A4 — всегда белый */
  --stx-paper-ink: #111111;

  /* тинты плиток иконок (mail.ru): документ — голубой, таблица — зелёный, PDF — розово-красный */
  --stx-tint-doc-bg: #E3EEFF;   --stx-tint-doc-fg: #2F6BFF;
  --stx-tint-table-bg: #E1F5EA; --stx-tint-table-fg: #1F9D55;
  --stx-tint-pdf-bg: #FFE5EA;   --stx-tint-pdf-fg: #E0405A;
  --stx-tint-warn-bg: #FFF3DC;  --stx-tint-warn-fg: #B45309;

  /* ---------- стекло (только плавающие элементы) */
  --stx-glass-bg: rgba(255, 255, 255, .72);
  --stx-glass-bg-strong: rgba(255, 255, 255, .88);
  --stx-glass-blur: blur(20px) saturate(140%);
  --stx-glass-border: 1px solid rgba(255, 255, 255, .55);
  --stx-glass-shadow: 0 8px 30px rgba(20, 40, 80, .10);
  --stx-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* ---------- радиусы */
  --stx-r-field: 10px;   /* поля, мелкие кнопки, пункты меню */
  --stx-r-card: 14px;    /* карточки, кнопки */
  --stx-r-panel: 18px;   /* панели, меню, инфобоксы */
  --stx-r-sheet: 20px;   /* шторки, окна */
  --stx-r-pill: 999px;

  /* ---------- тени (мягкие, синеватые) */
  --stx-shadow-sm: 0 1px 2px rgba(20, 40, 80, .04), 0 4px 12px rgba(20, 40, 80, .06);
  --stx-shadow-md: 0 8px 24px rgba(20, 40, 80, .10);
  --stx-shadow-lg: 0 24px 64px rgba(20, 40, 80, .18);
  --stx-shadow-paper: 0 1px 2px rgba(20, 40, 80, .06), 0 12px 40px rgba(20, 40, 80, .08);
  --stx-shadow-card-hover: 0 12px 32px rgba(20, 40, 80, .12);

  /* ---------- движение */
  --stx-dur-fast: 150ms;
  --stx-dur: 180ms;
  --stx-dur-slow: 220ms;
  --stx-ease: cubic-bezier(.32, .72, 0, 1);
  --stx-spring: cubic-bezier(.34, 1.36, .64, 1);

  /* ---------- шрифты и шкала (docs/DESIGN.md §2) */
  --stx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --stx-font-doc: "Times New Roman", Times, "Liberation Serif", serif;
  --stx-fs-display: clamp(40px, 5vw, 64px);   /* hero посадочной, 1.05, 700, −.02em */
  --stx-fs-h1: clamp(32px, 3.6vw, 44px);      /* заголовок страницы, 1.1, 700, −.02em */
  --stx-fs-h2: clamp(26px, 2.6vw, 32px);      /* раздел, 1.15, 700, −.015em */
  --stx-fs-h3: 22px;                          /* подраздел / окно, 1.25, 600, −.01em */
  --stx-fs-h4: 18px;                          /* карточка, 1.3, 600 */
  --stx-fs-body: 17px;                        /* текст статей, 1.55 */
  --stx-fs-ui: 15px;                          /* интерфейс, кнопки, 1.3 */
  --stx-fs-sm: 14px;                          /* подписи в формах */
  --stx-fs-caption: 13px;                     /* подписи, 1.38 */
  --stx-fs-micro: 12px;                       /* бейджи, kbd */
  --stx-measure: 720px;                       /* колонка чтения 680–760 */
  --stx-container: 1120px;
  --stx-gutter: 20px;

  /* ---------- размеры */
  --stx-tap: 44px;
  --stx-control-h: 44px;    /* поле, кнопка, селект */
  --stx-control-h-lg: 56px; /* поля формы главной */
  --stx-control-h-sm: 36px;
  --stx-header-h: 64px;

  /* ---------- фон под стеклом: мягкие блобы, чтобы blur читался */
  --stx-blob-1: rgba(47, 107, 255, .16);
  --stx-blob-2: rgba(120, 170, 255, .22);
  --stx-blob-3: rgba(190, 215, 255, .35);
  --stx-backdrop:
    radial-gradient(60% 50% at 8% 0%, var(--stx-blob-2) 0, transparent 70%),
    radial-gradient(55% 60% at 95% 10%, var(--stx-blob-1) 0, transparent 70%),
    radial-gradient(50% 45% at 50% 100%, var(--stx-blob-3) 0, transparent 70%),
    linear-gradient(180deg, #F7F9FF 0%, var(--stx-bg) 100%);
  --stx-backdrop-veil:
    radial-gradient(60% 50% at 8% 0%, var(--stx-blob-2) 0, transparent 70%),
    radial-gradient(55% 60% at 95% 10%, var(--stx-blob-1) 0, transparent 70%),
    radial-gradient(50% 45% at 50% 100%, var(--stx-blob-3) 0, transparent 70%),
    linear-gradient(180deg, rgba(244, 247, 254, .86) 0%, rgba(232, 238, 252, .9) 100%);
}

/* ---------- тёмная тема: ТОЛЬКО по явному <html data-theme="dark"> (решение владельца 2026-10-01: свет по умолчанию везде) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --stx-bg: #0F1420;
  --stx-surface: #171D2B;
  --stx-surface-2: #1E2536;
  --stx-surface-raise: rgba(255, 255, 255, .06);
  --stx-text: #EEF2F8;
  --stx-text-2: #A9B3C4;
  --stx-text-3: #6F7A8E;
  --stx-accent: #4F82FF;
  --stx-accent-hover: #6A95FF;
  --stx-accent-active: #3D6FF0;
  --stx-accent-text: #8FB2FF;
  --stx-accent-soft: rgba(79, 130, 255, .16);
  --stx-accent-soft-2: rgba(79, 130, 255, .24);
  --stx-accent-line: rgba(79, 130, 255, .38);
  --stx-accent-ring: rgba(79, 130, 255, .45);
  --stx-accent-shadow: 0 6px 16px rgba(79, 130, 255, .30);
  --stx-success: #34C77B;
  --stx-success-text: #5FD99A;
  --stx-success-soft: rgba(52, 199, 123, .16);
  --stx-warning: #FFB020;
  --stx-warning-text: #FFD27A;
  --stx-warning-soft: rgba(255, 176, 32, .16);
  --stx-danger: #FF5C73;
  --stx-danger-text: #FF8A9B;
  --stx-danger-soft: rgba(255, 92, 115, .16);
  --stx-separator: rgba(255, 255, 255, .10);
  --stx-line: rgba(255, 255, 255, .16);
  --stx-fill: rgba(255, 255, 255, .07);
  --stx-fill-2: rgba(255, 255, 255, .12);
  --stx-veil: rgba(23, 29, 43, .82);
  --stx-scrim: rgba(0, 0, 0, .55);
  --stx-tooltip-bg: #EEF2F8;
  --stx-tooltip-fg: #0F1420;
  --stx-tint-doc-bg: rgba(79, 130, 255, .18);   --stx-tint-doc-fg: #8FB2FF;
  --stx-tint-table-bg: rgba(52, 199, 123, .18); --stx-tint-table-fg: #5FD99A;
  --stx-tint-pdf-bg: rgba(255, 92, 115, .18);   --stx-tint-pdf-fg: #FF8A9B;
  --stx-tint-warn-bg: rgba(255, 176, 32, .18);  --stx-tint-warn-fg: #FFD27A;
  --stx-glass-bg: rgba(23, 29, 43, .72);
  --stx-glass-bg-strong: rgba(23, 29, 43, .88);
  --stx-glass-border: 1px solid rgba(255, 255, 255, .10);
  --stx-glass-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --stx-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --stx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .3);
  --stx-shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
  --stx-shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);
  --stx-shadow-paper: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .5);
  --stx-shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .5);
  --stx-blob-1: rgba(47, 107, 255, .22);
  --stx-blob-2: rgba(79, 130, 255, .18);
  --stx-blob-3: rgba(120, 90, 255, .16);
  --stx-backdrop:
    radial-gradient(60% 50% at 8% 0%, var(--stx-blob-2) 0, transparent 70%),
    radial-gradient(55% 60% at 95% 10%, var(--stx-blob-1) 0, transparent 70%),
    radial-gradient(50% 45% at 50% 100%, var(--stx-blob-3) 0, transparent 70%),
    linear-gradient(180deg, #131A29 0%, var(--stx-bg) 100%);
  --stx-backdrop-veil:
    radial-gradient(60% 50% at 8% 0%, var(--stx-blob-2) 0, transparent 70%),
    radial-gradient(55% 60% at 95% 10%, var(--stx-blob-1) 0, transparent 70%),
    radial-gradient(50% 45% at 50% 100%, var(--stx-blob-3) 0, transparent 70%),
    linear-gradient(180deg, rgba(15, 20, 32, .86) 0%, rgba(10, 14, 24, .92) 100%);
}

/* ---------- запасы прочности */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --stx-glass-bg: #FFFFFF; --stx-glass-bg-strong: #FFFFFF; --stx-glass-blur: none; --stx-glass-border: 1px solid rgba(27, 36, 48, .08); }
  :root[data-theme="dark"] { --stx-glass-bg: #171D2B; --stx-glass-bg-strong: #171D2B; --stx-glass-border: 1px solid rgba(255, 255, 255, .10); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --stx-glass-bg: rgba(255, 255, 255, .97); --stx-glass-bg-strong: rgba(255, 255, 255, .99); --stx-glass-blur: none; --stx-scrim: rgba(27, 36, 48, .5); }
  :root[data-theme="dark"] { --stx-glass-bg: rgba(23, 29, 43, .97); --stx-glass-bg-strong: rgba(23, 29, 43, .99); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --stx-dur-fast: 0ms; --stx-dur: 0ms; --stx-dur-slow: 0ms; }
}
@media (prefers-contrast: more) {
  :root { --stx-separator: rgba(27, 36, 48, .25); --stx-line: rgba(27, 36, 48, .45); --stx-text-2: #3C4657; --stx-text-3: #5B6779; --stx-glass-border: 1px solid rgba(27, 36, 48, .3); }
}

/* =====================================================================
   БАЗОВЫЕ ПОВЕРХНОСТИ
   ===================================================================== */
.stx-glass {
  background: var(--stx-glass-bg);
  -webkit-backdrop-filter: var(--stx-glass-blur);
  backdrop-filter: var(--stx-glass-blur);
  border: var(--stx-glass-border);
  border-radius: var(--stx-r-panel);
  box-shadow: var(--stx-glass-shadow), var(--stx-glass-highlight);
  color: var(--stx-text);
}
.stx-glass--strong { background: var(--stx-glass-bg-strong); }
.stx-glass--pill { border-radius: var(--stx-r-pill); }
.stx-glass--sheet { border-radius: var(--stx-r-sheet); }

.stx-surface { background: var(--stx-surface); border: 1px solid var(--stx-separator); border-radius: var(--stx-r-card); color: var(--stx-text); }
.stx-surface--flat { border: 0; box-shadow: var(--stx-shadow-sm); }
.stx-backdrop { background: var(--stx-backdrop); background-attachment: fixed; }
.stx-sep { height: 1px; margin: 0; border: 0; background: var(--stx-separator); }
.stx-container { width: 100%; max-width: var(--stx-container); margin: 0 auto; padding: 0 var(--stx-gutter); box-sizing: border-box; }

/* лист A4: белый, непрозрачный, одна тень */
.stx-paper { background: var(--stx-paper); color: var(--stx-paper-ink); border-radius: 4px; box-shadow: var(--stx-shadow-paper); }

/* =====================================================================
   ТИПОГРАФИКА
   ===================================================================== */
.stx-h1, .stx-h2, .stx-h3, .stx-h4 { margin: 0; font-family: var(--stx-font); color: var(--stx-text); text-wrap: balance; }
.stx-h1 { font-size: var(--stx-fs-h1); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.stx-h2 { font-size: var(--stx-fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.stx-h3 { font-size: var(--stx-fs-h3); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.stx-h4 { font-size: var(--stx-fs-h4); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.stx-display { font-size: var(--stx-fs-display); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.stx-lead { margin: 0; font-size: 19px; line-height: 1.5; color: var(--stx-text-2); }
.stx-eyebrow { display: inline-block; margin: 0 0 12px; font-size: var(--stx-fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stx-accent-text); }
.stx-caption { font-size: var(--stx-fs-caption); line-height: 1.38; color: var(--stx-text-2); }
.stx-muted { color: var(--stx-text-2); }

/* Колонка чтения: статьи, SEO-текст, инструкции. Левый край, ссылки инлайн. */
.stx-prose {
  max-width: var(--stx-measure);
  font-family: var(--stx-font);
  font-size: var(--stx-fs-body);
  line-height: 1.55;
  letter-spacing: -.005em;
  color: var(--stx-text);
  text-align: left;
  overflow-wrap: break-word;
}
.stx-prose--center { margin-left: auto; margin-right: auto; }
.stx-prose > * { margin: 0 0 1.1em; }
.stx-prose > :last-child { margin-bottom: 0; }
.stx-prose h1, .stx-prose h2, .stx-prose h3, .stx-prose h4 { color: var(--stx-text); text-wrap: balance; }
.stx-prose h1 { margin: 0 0 .6em; font-size: var(--stx-fs-h1); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.stx-prose h2 { margin: 1.6em 0 .6em; font-size: var(--stx-fs-h2); line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.stx-prose h3 { margin: 1.4em 0 .5em; font-size: var(--stx-fs-h3); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.stx-prose h4 { margin: 1.2em 0 .4em; font-size: var(--stx-fs-h4); line-height: 1.3; font-weight: 600; }
.stx-prose > h2:first-child, .stx-prose > h3:first-child { margin-top: 0; }
.stx-prose p { margin: 0 0 1.1em; }
.stx-prose a, .stx-prose p a, .stx-prose li a, .stx-prose td a {
  display: inline;               /* снимает a{display:block} из style.min.css */
  color: var(--stx-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--stx-accent-line);
  transition: text-decoration-color var(--stx-dur) var(--stx-ease);
}
.stx-prose a:hover { text-decoration-color: currentColor; }
.stx-prose strong { font-weight: 600; }
.stx-prose ul, .stx-prose ol { padding-left: 1.4em; }
.stx-prose li { margin: 0 0 .45em; }
.stx-prose li::marker { color: var(--stx-text-3); }
.stx-prose ul > li::marker { color: var(--stx-accent); }
.stx-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--stx-accent); color: var(--stx-text-2); font-size: 1.02em; }
.stx-prose blockquote p:last-child { margin-bottom: 0; }
.stx-prose hr { height: 1px; margin: 2em 0; border: 0; background: var(--stx-separator); }
.stx-prose img, .stx-prose figure img { display: block; max-width: 100%; height: auto; border-radius: var(--stx-r-card); }
.stx-prose figure { margin: 1.6em 0; }
.stx-prose figcaption { margin-top: 8px; font-size: var(--stx-fs-caption); color: var(--stx-text-2); }
.stx-prose code { padding: .1em .4em; border-radius: 6px; background: var(--stx-fill); font-size: .92em; }
.stx-prose table { width: 100%; margin: 1.4em 0; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; border: 1px solid var(--stx-separator); border-radius: var(--stx-r-field); overflow: hidden; }
.stx-prose th, .stx-prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stx-separator); }
.stx-prose th { background: var(--stx-surface-2); font-weight: 600; color: var(--stx-text-2); font-size: 14px; }
.stx-prose tr:last-child td { border-bottom: 0; }
.stx-prose--wide { max-width: 760px; }
.stx-prose--narrow { max-width: 680px; }

/* =====================================================================
   ССЫЛКИ, ФОКУС, KBD
   ===================================================================== */
.stx-link { display: inline; padding: 0; border: 0; background: none; color: var(--stx-accent-text); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stx-accent-line); cursor: pointer; }
.stx-link:hover { text-decoration-color: currentColor; }
.stx-link--quiet { text-decoration: none; }
.stx-link--quiet:hover { text-decoration: underline; }
.stx-link--arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.stx-link--arrow .stx-i { width: 18px; height: 18px; transition: transform var(--stx-dur) var(--stx-ease); }
.stx-link--arrow:hover .stx-i { transform: translateX(2px); }
.stx-focus:focus-visible, .stx-btn:focus-visible, .stx-iconbtn:focus-visible, .stx-select__btn:focus-visible, .stx-input:focus-visible, .stx-textarea:focus-visible,
.stx-segment__btn:focus-visible, .stx-toolbar__btn:focus-visible, .stx-menu__item:focus-visible, .stx-topnav__link:focus-visible, .stx-toc__btn:focus-visible, .stx-card--link:focus-visible {
  outline: 3px solid var(--stx-accent-ring); outline-offset: 2px;
}
.stx-kbd { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--stx-fill); color: var(--stx-text-2); font-family: var(--stx-font); font-size: var(--stx-fs-micro); font-weight: 500; line-height: 1.5; white-space: nowrap; }

/* =====================================================================
   КНОПКИ — иерархия и состояния
   ===================================================================== */
.stx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--stx-control-h); padding: 0 18px;
  border: 1px solid var(--stx-line);
  border-radius: var(--stx-r-card);
  background: var(--stx-surface);
  color: var(--stx-text);
  font-family: var(--stx-font);
  font-size: var(--stx-fs-ui); line-height: 1.15; font-weight: 500; letter-spacing: -.005em;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--stx-dur) var(--stx-ease), border-color var(--stx-dur) var(--stx-ease),
              box-shadow var(--stx-dur) var(--stx-ease), transform var(--stx-dur-fast) var(--stx-ease), opacity var(--stx-dur), color var(--stx-dur);
}
.stx-btn:hover { background: var(--stx-surface-2); border-color: var(--stx-accent-line); }
.stx-btn:active { transform: scale(.98); background: var(--stx-fill); }
.stx-btn:disabled, .stx-btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.stx-btn:disabled:hover, .stx-btn[aria-disabled="true"]:hover { background: var(--stx-surface); border-color: var(--stx-line); }
.stx-btn .stx-i { width: 18px; height: 18px; }

.stx-btn--primary { background: var(--stx-accent); border-color: var(--stx-accent); color: var(--stx-on-accent); box-shadow: var(--stx-accent-shadow); }
.stx-btn--primary:hover { background: var(--stx-accent-hover); border-color: var(--stx-accent-hover); transform: translateY(-1px); }
.stx-btn--primary:active { background: var(--stx-accent-active); border-color: var(--stx-accent-active); transform: scale(.98); box-shadow: none; }
.stx-btn--primary:disabled, .stx-btn--primary[aria-disabled="true"] { background: var(--stx-accent); border-color: var(--stx-accent); opacity: .45; }
.stx-btn--primary:disabled:hover, .stx-btn--primary[aria-disabled="true"]:hover { background: var(--stx-accent); border-color: var(--stx-accent); transform: none; }

/* вторичная: белая с тонкой рамкой (на стекле — стеклянная) */
.stx-btn--secondary { background: var(--stx-surface); border-color: var(--stx-line); }
.stx-btn--secondary:hover { border-color: var(--stx-accent-line); color: var(--stx-accent-text); }
.stx-glass .stx-btn--secondary { background: var(--stx-glass-bg); -webkit-backdrop-filter: var(--stx-glass-blur); backdrop-filter: var(--stx-glass-blur); }

/* мягкая: голубая заливка без рамки — «второе действие» рядом с главной */
.stx-btn--soft { background: var(--stx-accent-soft); border-color: transparent; color: var(--stx-accent-text); }
.stx-btn--soft:hover { background: var(--stx-accent-soft-2); border-color: transparent; }

/* тихая: текстовая, для «Отмена», «Позже», «Отменить подписку» */
.stx-btn--quiet { background: transparent; border-color: transparent; color: var(--stx-accent-text); }
.stx-btn--quiet:hover { background: var(--stx-accent-soft); border-color: transparent; }
.stx-btn--quiet.stx-btn--neutral { color: var(--stx-text-2); }
.stx-btn--danger { background: var(--stx-danger-soft); border-color: transparent; color: var(--stx-danger-text); }
.stx-btn--danger:hover { background: var(--stx-danger); border-color: var(--stx-danger); color: #fff; }

.stx-btn--sm { min-height: var(--stx-control-h-sm); padding: 0 14px; font-size: var(--stx-fs-sm); border-radius: var(--stx-r-field); }
.stx-btn--lg { min-height: var(--stx-control-h-lg); padding: 0 28px; font-size: 17px; font-weight: 600; border-radius: var(--stx-r-card); }
.stx-btn--pill { border-radius: var(--stx-r-pill); }
.stx-btn--block { width: 100%; }
.stx-btn.is-loading { pointer-events: none; opacity: .75; }
.stx-btn.is-loading .stx-i { animation: stx-spin 1s linear infinite; }
@keyframes stx-spin { to { transform: rotate(360deg); } }

/* иконка-кнопка 44×44 */
.stx-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--stx-tap); height: var(--stx-tap); flex: none; padding: 0;
  border: 0; border-radius: var(--stx-r-field);
  background: transparent; color: var(--stx-text-2);
  cursor: pointer;
  transition: background-color var(--stx-dur) var(--stx-ease), color var(--stx-dur) var(--stx-ease);
}
.stx-iconbtn .stx-i { width: 20px; height: 20px; }
.stx-iconbtn:hover { background: var(--stx-fill); color: var(--stx-text); }
.stx-iconbtn:active { background: var(--stx-fill-2); }
.stx-iconbtn[aria-pressed="true"], .stx-iconbtn.is-active { background: var(--stx-accent-soft); color: var(--stx-accent-text); }
.stx-iconbtn:disabled { opacity: .4; cursor: default; }
.stx-iconbtn--round { border-radius: 50%; }

/* =====================================================================
   ПЛИТКИ ИКОНОК, ТЕГИ, АВАТАР, ПРОГРЕСС
   ===================================================================== */
.stx-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--stx-r-field); background: var(--stx-tint-doc-bg); color: var(--stx-tint-doc-fg); }
.stx-tile--table { background: var(--stx-tint-table-bg); color: var(--stx-tint-table-fg); }
.stx-tile--pdf { background: var(--stx-tint-pdf-bg); color: var(--stx-tint-pdf-fg); }
.stx-tile--warn { background: var(--stx-tint-warn-bg); color: var(--stx-tint-warn-fg); }
.stx-tile--neutral { background: var(--stx-fill); color: var(--stx-text-2); }
.stx-tile--lg { width: 48px; height: 48px; border-radius: 14px; }
.stx-tile--xl { width: 56px; height: 56px; border-radius: 16px; }
.stx-tile .stx-i { width: 20px; height: 20px; }
.stx-tile--lg .stx-i { width: 24px; height: 24px; }
.stx-tile--xl .stx-i { width: 28px; height: 28px; }

.stx-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: var(--stx-r-pill); background: var(--stx-fill); color: var(--stx-text-2); font-family: var(--stx-font); font-size: var(--stx-fs-micro); font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.stx-tag .stx-i { width: 14px; height: 14px; }
.stx-tag--accent { background: var(--stx-accent-soft); color: var(--stx-accent-text); }
.stx-tag--success { background: var(--stx-success-soft); color: var(--stx-success-text); }
.stx-tag--warning { background: var(--stx-warning-soft); color: var(--stx-warning-text); }
.stx-tag--danger { background: var(--stx-danger-soft); color: var(--stx-danger-text); }
.stx-tag--outline { background: transparent; border: 1px solid var(--stx-line); }

.stx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--stx-accent-soft); color: var(--stx-accent-text); font-family: var(--stx-font); font-size: 13px; font-weight: 600; text-transform: uppercase; overflow: hidden; }
.stx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stx-avatar--sm { width: 26px; height: 26px; font-size: 11px; }

.stx-progress { position: relative; height: 4px; border-radius: 2px; background: var(--stx-fill-2); overflow: hidden; }
.stx-progress__bar { position: absolute; inset: 0 auto 0 0; width: var(--value, 0%); border-radius: 2px; background: var(--stx-accent); transition: width var(--stx-dur-slow) var(--stx-ease); }
.stx-progress--success .stx-progress__bar { background: var(--stx-success); }

/* =====================================================================
   КАРТОЧКИ (белые, плоские; радиус 14–20, мягкая тень, ровная сетка)
   ===================================================================== */
.stx-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px;
  border: 1px solid var(--stx-separator);
  border-radius: var(--stx-r-panel);
  background: var(--stx-surface);
  color: var(--stx-text);
  box-shadow: var(--stx-shadow-sm);
  text-decoration: none;
  box-sizing: border-box;
  transition: transform var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease), border-color var(--stx-dur) var(--stx-ease);
}
.stx-card--link { cursor: pointer; }
.stx-card--link:hover, .stx-card--hover:hover { transform: translateY(-2px); box-shadow: var(--stx-shadow-card-hover); border-color: var(--stx-accent-line); }
.stx-card--flat { box-shadow: none; }
.stx-card--tinted { background: var(--stx-surface-2); box-shadow: none; }
.stx-card--sm { padding: 16px 18px; border-radius: var(--stx-r-card); gap: 8px; }
.stx-card--lg { padding: 28px 28px; border-radius: var(--stx-r-sheet); }
.stx-card__icon { margin-bottom: 4px; }
.stx-card__title { margin: 0; font-family: var(--stx-font); font-size: var(--stx-fs-h4); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--stx-text); }
.stx-card__text { margin: 0; font-size: var(--stx-fs-ui); line-height: 1.5; color: var(--stx-text-2); }
.stx-card__text a { display: inline; color: var(--stx-accent-text); }
.stx-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; font-size: var(--stx-fs-caption); color: var(--stx-text-2); }
.stx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.stx-card__row { display: flex; align-items: flex-start; gap: 14px; }
.stx-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.stx-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .stx-grid--3, .stx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stx-grid, .stx-grid--2, .stx-grid--3, .stx-grid--4 { grid-template-columns: 1fr; gap: 12px; } }

/* полоса из 3–4 фактов (посадочные): плитки с тонкой иконкой, ровная сетка */
.stx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.stx-facts__item { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--stx-separator); border-radius: var(--stx-r-card); background: var(--stx-surface); }
.stx-facts__title { display: block; margin: 0 0 2px; font-size: var(--stx-fs-ui); font-weight: 600; color: var(--stx-text); }
.stx-facts__text { margin: 0; font-size: var(--stx-fs-sm); line-height: 1.45; color: var(--stx-text-2); }
@media (max-width: 1024px) { .stx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stx-facts { grid-template-columns: 1fr; gap: 10px; } }

/* =====================================================================
   ИНФОБОКСЫ (стиль блога: строго, но красиво; без синей полосы)
   ===================================================================== */
.stx-infobox {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 1.5em 0; padding: 18px 20px;
  border: 1px solid var(--stx-separator);
  border-radius: var(--stx-r-panel);
  background: var(--stx-surface);
  box-shadow: var(--stx-shadow-sm);
  font-family: var(--stx-font);
  font-size: 16px; line-height: 1.5; color: var(--stx-text);
}
.stx-infobox .stx-tile { margin-top: 1px; }
.stx-infobox__body { min-width: 0; flex: 1; }
.stx-infobox__title { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--stx-text); }
.stx-infobox__body p { margin: 0 0 .6em; }
.stx-infobox__body p:last-child { margin-bottom: 0; }
.stx-infobox__body a { display: inline; color: var(--stx-accent-text); }
.stx-infobox--tip { background: var(--stx-surface-2); box-shadow: none; }
.stx-infobox--warn { border-color: rgba(245, 158, 11, .35); }
.stx-infobox--warn .stx-tile { background: var(--stx-tint-warn-bg); color: var(--stx-tint-warn-fg); }
.stx-infobox--ok .stx-tile { background: var(--stx-success-soft); color: var(--stx-success-text); }
@media (max-width: 600px) { .stx-infobox { padding: 16px; gap: 12px; font-size: 15px; } }

/* шаги «Как это работает»: карточки с номером-кружком, не полоски */
.stx-steps { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: stx-step; }
.stx-steps--vertical { grid-template-columns: 1fr; }
.stx-steps__item { counter-increment: stx-step; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--stx-separator); border-radius: var(--stx-r-panel); background: var(--stx-surface); box-shadow: var(--stx-shadow-sm); }
.stx-steps__item::before { content: counter(stx-step); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--stx-accent-soft); color: var(--stx-accent-text); font-family: var(--stx-font); font-size: 15px; font-weight: 600; }
.stx-steps__title { margin: 0; font-size: var(--stx-fs-h4); font-weight: 600; line-height: 1.3; color: var(--stx-text); }
.stx-steps__text { margin: 0; font-size: var(--stx-fs-ui); line-height: 1.5; color: var(--stx-text-2); }
.stx-steps--vertical .stx-steps__item { flex-direction: row; align-items: flex-start; gap: 16px; }
.stx-steps--vertical .stx-steps__item::before { flex: none; }
@media (max-width: 1024px) { .stx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stx-steps { grid-template-columns: 1fr; gap: 12px; } }

/* =====================================================================
   ХЛЕБНЫЕ КРОШКИ — под шапкой, нормальный размер, ссылки инлайн
   ===================================================================== */
.stx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 20px; padding: 0; list-style: none; font-family: var(--stx-font); font-size: var(--stx-fs-sm); line-height: 1.4; color: var(--stx-text-2); }
.stx-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.stx-crumbs li + li::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; opacity: .5; -webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.stx-crumbs a { display: inline; color: var(--stx-text-2); text-decoration: none; border-radius: 4px; }
.stx-crumbs a:hover { color: var(--stx-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.stx-crumbs [aria-current="page"] { color: var(--stx-text); font-weight: 500; }
.stx-crumbs .stx-i { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .stx-crumbs { font-size: var(--stx-fs-caption); }
  .stx-crumbs li { min-height: 44px; }
  .stx-crumbs li:not(:last-child):not(:first-child) { display: none; }
  .stx-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =====================================================================
   ШАПКА-ПИЛЮЛЯ (стекло) — одна строка без переносов, тонкие иконки, аккаунт-пилюля
   ===================================================================== */
.stx-topnav {
  display: flex; align-items: center; gap: 4px;
  width: max-content; max-width: 100%;
  min-height: 56px; padding: 6px 8px 6px 18px;
  border-radius: var(--stx-r-pill);
  background: var(--stx-glass-bg-strong);
  -webkit-backdrop-filter: var(--stx-glass-blur);
  backdrop-filter: var(--stx-glass-blur);
  border: var(--stx-glass-border);
  box-shadow: var(--stx-glass-shadow), var(--stx-glass-highlight);
  font-family: var(--stx-font);
  box-sizing: border-box;
}
.stx-topnav__logo { display: inline-flex; align-items: center; margin-right: 12px; flex: none; }
.stx-topnav__logo img, .stx-topnav__logo svg { display: block; height: 28px; width: auto; }
.stx-topnav__links { display: flex; align-items: center; gap: 2px; flex: none; }
.stx-topnav__link {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 12px;
  border: 0; border-radius: var(--stx-r-field);
  background: none; color: var(--stx-text-2);
  font-family: var(--stx-font); font-size: var(--stx-fs-ui); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--stx-dur) var(--stx-ease), color var(--stx-dur) var(--stx-ease);
}
.stx-topnav__link:hover { background: var(--stx-fill); color: var(--stx-text); }
.stx-topnav__link[aria-current="page"], .stx-topnav__link.is-active { color: var(--stx-text); background: var(--stx-accent-soft); }
.stx-topnav__link .stx-i { width: 16px; height: 16px; color: var(--stx-text-3); transition: transform var(--stx-dur) var(--stx-ease); }
.stx-topnav__link[aria-expanded="true"] .stx-i--caret { transform: rotate(180deg); }
.stx-topnav__spacer { flex: 1; min-width: 8px; }
.stx-topnav__account {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 4px 12px 4px 4px; margin-left: 6px;
  border: 1px solid var(--stx-line); border-radius: var(--stx-r-pill);
  background: var(--stx-surface); color: var(--stx-text);
  font-family: var(--stx-font); font-size: var(--stx-fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: border-color var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease);
}
.stx-topnav__account:hover { border-color: var(--stx-accent-line); box-shadow: var(--stx-shadow-sm); }
.stx-topnav__account .stx-i { width: 16px; height: 16px; color: var(--stx-text-3); }
.stx-topnav__account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.stx-topnav .stx-btn { margin-left: 6px; }
@media (max-width: 1024px) { .stx-topnav__account-name { max-width: 96px; } }

/* мобильная шапка: логотип + кнопка меню, ссылки уходят в шторку */
.stx-topnav__burger { display: none; }
@media (max-width: 900px) {
  .stx-topnav { width: 100%; padding: 6px 6px 6px 14px; justify-content: space-between; }
  .stx-topnav__links, .stx-topnav__account-name, .stx-topnav > .stx-btn { display: none; }
  .stx-topnav__burger { display: inline-flex; }
}

/* =====================================================================
   МЕНЮ / ВЫПАДАЮЩИЙ СПИСОК (белое, радиус 16–18, мягкая тень, тонкие иконки, подсказки клавиш серым)
   ===================================================================== */
.stx-menu {
  display: grid; gap: 2px;
  min-width: 232px; padding: 8px;
  border-radius: var(--stx-r-panel);
  background: var(--stx-glass-bg-strong);
  -webkit-backdrop-filter: var(--stx-glass-blur);
  backdrop-filter: var(--stx-glass-blur);
  border: var(--stx-glass-border);
  box-shadow: var(--stx-shadow-lg), var(--stx-glass-highlight);
  font-family: var(--stx-font);
}
.stx-menu__item {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: var(--stx-r-field);
  background: none; color: var(--stx-text);
  font-family: var(--stx-font); font-size: var(--stx-fs-ui); line-height: 1.2; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-menu__item:hover, .stx-menu__item.is-active { background: var(--stx-accent-soft); color: var(--stx-accent-text); }
.stx-menu__item .stx-i { width: 20px; height: 20px; flex: none; color: var(--stx-accent); }
.stx-menu__item:hover .stx-i { color: currentColor; }
.stx-menu__kbd { margin-left: auto; font-size: var(--stx-fs-caption); color: var(--stx-text-3); }
.stx-menu__sep { height: 1px; margin: 4px 6px; background: var(--stx-separator); }
.stx-menu__label { padding: 8px 12px 4px; font-size: var(--stx-fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stx-text-3); }
.stx-menu__item--all { margin-top: 4px; border-top: 1px solid var(--stx-separator); border-radius: 0 0 var(--stx-r-field) var(--stx-r-field); justify-content: space-between; font-weight: 600; }
.stx-menu__item--all .stx-i { width: 16px; height: 16px; }
.stx-menu__item--danger { color: var(--stx-danger-text); }
.stx-menu__item--danger:hover { background: var(--stx-danger-soft); color: var(--stx-danger-text); }

/* =====================================================================
   ТУЛБАР-ПИЛЮЛЯ (редактор, инструменты) — стекло дозированно, тонкие иконки, тонкие разделители
   ===================================================================== */
.stx-toolbar {
  display: inline-flex; align-items: center; gap: 2px;
  max-width: 100%; padding: 6px;
  border-radius: var(--stx-r-pill);
  background: var(--stx-glass-bg);
  -webkit-backdrop-filter: var(--stx-glass-blur);
  backdrop-filter: var(--stx-glass-blur);
  border: var(--stx-glass-border);
  box-shadow: var(--stx-glass-shadow), var(--stx-glass-highlight);
  overflow-x: auto; scrollbar-width: none;
  font-family: var(--stx-font);
}
.stx-toolbar::-webkit-scrollbar { display: none; }
.stx-toolbar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--stx-r-field);
  background: none; color: var(--stx-text);
  font-family: var(--stx-font); font-size: var(--stx-fs-sm); font-weight: 500; cursor: pointer;
  transition: background-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-toolbar__btn .stx-i { width: 20px; height: 20px; }
.stx-toolbar__btn:hover { background: var(--stx-fill); }
.stx-toolbar__btn:active { background: var(--stx-fill-2); }
.stx-toolbar__btn[aria-pressed="true"], .stx-toolbar__btn.is-active { background: var(--stx-accent-soft); color: var(--stx-accent-text); }
.stx-toolbar__btn:disabled { opacity: .35; cursor: default; background: none; }
.stx-toolbar__btn--wide { padding: 0 10px; }
.stx-toolbar__btn--ai { color: var(--stx-accent-text); }
.stx-toolbar__sep { width: 1px; height: 22px; margin: 0 6px; flex: none; background: var(--stx-line); }
.stx-toolbar__group { display: inline-flex; align-items: center; gap: 2px; }
.stx-toolbar--float { position: fixed; left: 50%; transform: translateX(-50%); z-index: 30; }
.stx-toolbar--top { top: 12px; }
.stx-toolbar--bottom { bottom: max(12px, env(safe-area-inset-bottom)); }
.stx-toolbar .stx-select__btn { min-height: 36px; padding: 0 30px 0 10px; font-size: var(--stx-fs-sm); border-color: transparent; background: transparent; box-shadow: none; }
.stx-toolbar .stx-select__btn:hover { background: var(--stx-fill); }
.stx-toolbar .stx-select__chevron { right: 10px; width: 14px; height: 14px; margin-top: -7px; }
@media (max-width: 600px) { .stx-toolbar--float { left: 12px; right: 12px; transform: none; width: auto; } }

/* =====================================================================
   СЕГМЕНТ-КОНТРОЛ и ВКЛАДКИ
   ===================================================================== */
.stx-segment { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px; border-radius: var(--stx-r-card); background: var(--stx-fill); font-family: var(--stx-font); overflow-x: auto; scrollbar-width: none; }
.stx-segment::-webkit-scrollbar { display: none; }
.stx-segment--pill { border-radius: var(--stx-r-pill); }
.stx-segment__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 14px;
  border: 0; border-radius: calc(var(--stx-r-card) - 3px);
  background: transparent; color: var(--stx-text-2);
  font-family: var(--stx-font); font-size: var(--stx-fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--stx-dur) var(--stx-ease), color var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease);
}
.stx-segment--pill .stx-segment__btn { border-radius: var(--stx-r-pill); }
.stx-segment__btn:hover { color: var(--stx-text); }
.stx-segment__btn[aria-selected="true"], .stx-segment__btn.is-active { background: var(--stx-surface); color: var(--stx-text); box-shadow: var(--stx-shadow-sm); }
.stx-segment__btn .stx-i { width: 16px; height: 16px; }
.stx-segment__count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--stx-accent-soft); color: var(--stx-accent-text); font-size: var(--stx-fs-micro); line-height: 18px; text-align: center; }
.stx-segment--block { display: flex; }
.stx-segment--block .stx-segment__btn { flex: 1; }

/* вкладки с подчёркиванием (лента редактора, разделы) */
.stx-tabs { display: flex; gap: 2px; padding: 0; margin: 0; list-style: none; border-bottom: 1px solid var(--stx-separator); overflow-x: auto; scrollbar-width: none; font-family: var(--stx-font); }
.stx-tabs::-webkit-scrollbar { display: none; }
.stx-tabs__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--stx-r-field) var(--stx-r-field) 0 0; background: none; color: var(--stx-text-2); font-family: var(--stx-font); font-size: var(--stx-fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--stx-dur) var(--stx-ease), background-color var(--stx-dur) var(--stx-ease); }
.stx-tabs__btn:hover { color: var(--stx-text); background: var(--stx-fill); }
.stx-tabs__btn[aria-selected="true"] { color: var(--stx-accent-text); }
.stx-tabs__btn[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--stx-accent); }

/* =====================================================================
   ПОЛЯ, СЕЛЕКТ, ТУМБЛЕР — едины с формой главной (разметка: js/form.js)
   ===================================================================== */
.stx-label { display: block; margin: 0 0 8px; font-family: var(--stx-font); font-size: var(--stx-fs-sm); font-weight: 500; line-height: 1.3; color: var(--stx-text-2); letter-spacing: -.005em; }
.stx-hint { margin: 6px 0 0; font-family: var(--stx-font); font-size: var(--stx-fs-caption); line-height: 1.4; color: var(--stx-text-2); }
.stx-hint--error { color: var(--stx-danger-text); }
.stx-field { min-width: 0; }
.stx-fields { display: grid; gap: 14px; }
.stx-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .stx-fields--2 { grid-template-columns: 1fr; } }

.stx-input, .stx-textarea {
  display: block; width: 100%; min-height: var(--stx-control-h); padding: 10px 14px; box-sizing: border-box;
  border: 1px solid var(--stx-line); border-radius: var(--stx-r-field);
  background: var(--stx-surface); color: var(--stx-text);
  font-family: var(--stx-font); font-size: 16px; line-height: 1.4;
  transition: border-color var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease);
}
.stx-input::placeholder, .stx-textarea::placeholder { color: var(--stx-text-3); }
.stx-input:hover, .stx-textarea:hover { border-color: var(--stx-accent-line); }
.stx-input:focus, .stx-textarea:focus { outline: none; border-color: var(--stx-accent); box-shadow: 0 0 0 4px var(--stx-accent-soft); }
.stx-input.is-invalid, .stx-textarea.is-invalid { border-color: var(--stx-danger); box-shadow: 0 0 0 4px var(--stx-danger-soft); }
.stx-input:disabled, .stx-textarea:disabled { opacity: .55; background: var(--stx-surface-2); }
.stx-input--lg { min-height: var(--stx-control-h-lg); padding: 14px 18px; border-radius: var(--stx-r-card); font-size: 17px; }
.stx-input--sm { min-height: var(--stx-control-h-sm); padding: 6px 10px; font-size: var(--stx-fs-sm); }
.stx-textarea { resize: vertical; min-height: 96px; }

/* селект: нативный <select> — источник значения; кастомный список поверх (form.js). Свет, шеврон, плавное раскрытие, галочка у выбранного */
.stx-select { position: relative; font-family: var(--stx-font); }
.stx-select__native {
  display: block; width: 100%; min-height: var(--stx-control-h); padding: 0 42px 0 14px; box-sizing: border-box;
  border: 1px solid var(--stx-line); border-radius: var(--stx-r-field);
  background: var(--stx-surface); color: var(--stx-text);
  font: 500 16px/1.2 var(--stx-font);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.stx-select.is-enhanced .stx-select__native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.stx-select.is-native-pick .stx-select__native { z-index: 2; pointer-events: auto; }
.stx-select.is-native-pick .stx-select__native:focus-visible ~ .stx-select__btn { border-color: var(--stx-accent); box-shadow: 0 0 0 4px var(--stx-accent-soft); }
.stx-select__btn {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--stx-control-h); padding: 0 42px 0 14px; box-sizing: border-box;
  border: 1px solid var(--stx-line); border-radius: var(--stx-r-field);
  background: var(--stx-surface); color: var(--stx-text);
  font: 500 16px/1.2 var(--stx-font); text-align: left; cursor: pointer;
  transition: border-color var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease), background-color var(--stx-dur) var(--stx-ease);
}
.stx-select__btn:hover { border-color: var(--stx-accent-line); }
.stx-select__btn:focus { outline: none; }
.stx-select__btn:focus-visible, .stx-select.is-open .stx-select__btn { outline: none; border-color: var(--stx-accent); box-shadow: 0 0 0 4px var(--stx-accent-soft); }
.stx-select__btn:disabled { opacity: .55; cursor: default; }
.stx-select__value { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stx-select__value .stx-i { width: 18px; height: 18px; color: var(--stx-text-2); }
.stx-select__chevron, .stx-select::after { position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; margin-top: -8px; color: var(--stx-text-2); pointer-events: none; transition: transform var(--stx-dur-slow) var(--stx-ease); }
.stx-select:not(.is-enhanced)::after {
  content: ""; background: currentColor;
  -webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stx-select.is-enhanced::after { content: none; }
.stx-select.is-open .stx-select__chevron { transform: rotate(180deg); }
.stx-select__list {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0;
  max-height: min(320px, 50vh); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; box-sizing: border-box;
  border: 1px solid var(--stx-separator); border-radius: var(--stx-r-card);
  background: var(--stx-surface); box-shadow: var(--stx-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity var(--stx-dur) var(--stx-ease), transform var(--stx-dur-slow) var(--stx-ease), visibility 0s linear var(--stx-dur-slow);
}
.stx-select.is-up .stx-select__list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.stx-select.is-open .stx-select__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stx-select__option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px;
  border-radius: var(--stx-r-field); color: var(--stx-text); font: 400 15px/1.2 var(--stx-font); cursor: pointer;
  transition: background-color var(--stx-dur-fast) var(--stx-ease), color var(--stx-dur-fast) var(--stx-ease);
}
.stx-select__option.is-active, .stx-select__option:hover { background: var(--stx-fill); }
.stx-select__option[aria-selected="true"] { color: var(--stx-accent-text); font-weight: 600; background: var(--stx-accent-soft); }
.stx-select__check { width: 16px; height: 16px; margin-left: auto; flex: none; color: var(--stx-accent); visibility: hidden; }
.stx-select__option[aria-selected="true"] .stx-select__check { visibility: visible; }
.stx-select--lg .stx-select__native, .stx-select--lg .stx-select__btn { min-height: var(--stx-control-h-lg); padding-left: 18px; border-radius: var(--stx-r-card); font-size: 17px; }
.stx-select--sm .stx-select__native, .stx-select--sm .stx-select__btn { min-height: var(--stx-control-h-sm); padding: 0 34px 0 10px; font-size: var(--stx-fs-sm); }
.stx-select--sm .stx-select__chevron { right: 10px; width: 14px; height: 14px; margin-top: -7px; }

/* тумблер: плавный ход, подпись справа */
.stx-switch__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.stx-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--stx-fill-2); box-shadow: inset 0 0 0 1px var(--stx-line); transition: background-color var(--stx-dur-slow) var(--stx-ease), box-shadow var(--stx-dur-slow) var(--stx-ease); }
.stx-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 40, 80, .28); transition: transform 300ms var(--stx-spring); }
.stx-switch__input:checked + .stx-switch { background: var(--stx-accent); box-shadow: none; }
.stx-switch__input:checked + .stx-switch::after { transform: translateX(18px); }
.stx-switch__input:focus-visible + .stx-switch { outline: 3px solid var(--stx-accent-ring); outline-offset: 2px; }
.stx-switch__input:disabled + .stx-switch { opacity: .5; }
.stx-switch--sm { width: 36px; height: 22px; border-radius: 11px; }
.stx-switch--sm::after { width: 16px; height: 16px; }
.stx-switch__input:checked + .stx-switch--sm::after { transform: translateX(14px); }
.stx-switch-line { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--stx-tap); cursor: pointer; font-family: var(--stx-font); }
.stx-switch-line__text { font-size: var(--stx-fs-sm); line-height: 1.4; color: var(--stx-text); }
.stx-switch-line__hint { display: block; font-size: var(--stx-fs-caption); color: var(--stx-text-2); }
.stx-switch-line__text a { display: inline; color: var(--stx-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.stx-switch-card { position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--stx-line); border-radius: var(--stx-r-card); background: var(--stx-surface); cursor: pointer; user-select: none; font-family: var(--stx-font); transition: border-color var(--stx-dur) var(--stx-ease), background-color var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease); }
.stx-switch-card:hover { border-color: var(--stx-accent-line); box-shadow: var(--stx-shadow-sm); }
.stx-switch-card:has(input:checked) { border-color: var(--stx-accent-line); background: var(--stx-surface-2); }
.stx-switch-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stx-switch-card__title { font-size: var(--stx-fs-ui); font-weight: 500; line-height: 1.3; color: var(--stx-text); }
.stx-switch-card__hint { font-size: var(--stx-fs-caption); line-height: 1.35; color: var(--stx-text-2); }

/* галочка (чекбокс): тонкая рамка, акцент при выборе */
.stx-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-family: var(--stx-font); }
.stx-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--stx-line); border-radius: 7px; background: var(--stx-surface); cursor: pointer; transition: background-color var(--stx-dur) var(--stx-ease), border-color var(--stx-dur) var(--stx-ease); }
.stx-check input:hover { border-color: var(--stx-accent-line); }
.stx-check input:checked { border-color: var(--stx-accent); background: var(--stx-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }
.stx-check input:focus-visible { outline: 3px solid var(--stx-accent-ring); outline-offset: 2px; }
.stx-check span { font-size: var(--stx-fs-sm); line-height: 1.45; color: var(--stx-text-2); }
.stx-check a { display: inline; color: var(--stx-accent-text); }

/* чипы выбора (тип работы): как на форме главной */
.stx-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 1px solid var(--stx-line); border-radius: 12px; background: var(--stx-surface); color: var(--stx-text); font-family: var(--stx-font); font-size: var(--stx-fs-ui); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--stx-dur) var(--stx-ease), border-color var(--stx-dur) var(--stx-ease), color var(--stx-dur) var(--stx-ease), box-shadow var(--stx-dur) var(--stx-ease); }
.stx-chip .stx-i { width: 16px; height: 16px; color: var(--stx-text-2); }
.stx-chip:hover { border-color: var(--stx-accent-line); box-shadow: var(--stx-shadow-sm); }
.stx-chip[aria-pressed="true"], .stx-chip.is-active { background: var(--stx-accent); border-color: var(--stx-accent); color: var(--stx-on-accent); box-shadow: var(--stx-accent-shadow); }
.stx-chip[aria-pressed="true"] .stx-i, .stx-chip.is-active .stx-i { color: currentColor; }

/* =====================================================================
   ОГЛАВЛЕНИЕ РЕДАКТОРА (сайдбар): статусы, закрытые пункты мягко, замок тонкий, подпись одной строкой
   ===================================================================== */
.stx-toc { margin: 0; padding: 0; list-style: none; font-family: var(--stx-font); }
.stx-toc__head { padding: 4px 12px 8px; font-size: var(--stx-fs-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stx-text-3); }
.stx-toc__btn {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; column-gap: 8px;
  width: 100%; min-height: 40px; padding: 8px 10px; box-sizing: border-box;
  border: 0; border-radius: var(--stx-r-field); background: none; color: var(--stx-text);
  font-family: var(--stx-font); font-size: var(--stx-fs-sm); line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color var(--stx-dur-fast) var(--stx-ease);
}
.stx-toc__btn:hover { background: var(--stx-fill); }
.stx-toc__item.is-current > .stx-toc__btn { background: var(--stx-accent-soft); color: var(--stx-accent-text); }
.stx-toc__item--l2 .stx-toc__btn { padding-left: 26px; font-size: var(--stx-fs-caption); }
.stx-toc__item--l1 .stx-toc__btn { font-weight: 500; }
.stx-toc__mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--stx-text-3); }
.stx-toc__mark .stx-i { width: 16px; height: 16px; }
.stx-toc__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stx-toc__status { font-size: var(--stx-fs-micro); color: var(--stx-text-3); white-space: nowrap; }
.stx-toc__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--stx-text-3); box-sizing: border-box; }
.stx-toc__item[data-status="done"] .stx-toc__dot { background: var(--stx-success); border-color: var(--stx-success); }
.stx-toc__item[data-status="running"] .stx-toc__dot { border-color: var(--stx-accent); border-top-color: transparent; animation: stx-spin 1s linear infinite; }
.stx-toc__item[data-status="running"] .stx-toc__status { color: var(--stx-accent-text); }
.stx-toc__item[data-status="error"] .stx-toc__dot { border-color: var(--stx-danger); }
.stx-toc__item[data-status="error"] .stx-toc__status { color: var(--stx-danger-text); }
.stx-toc__item[data-status="locked"] .stx-toc__btn { color: var(--stx-text-2); }
.stx-toc__item[data-status="locked"] .stx-toc__mark { color: var(--stx-text-3); }
.stx-toc__item[data-status="locked"] .stx-toc__btn:hover { background: var(--stx-accent-soft); color: var(--stx-accent-text); }
.stx-toc__item[data-status="locked"] .stx-toc__btn:hover .stx-toc__mark, .stx-toc__item[data-status="locked"] .stx-toc__btn:hover .stx-toc__status { color: var(--stx-accent-text); }
.stx-toc__group { margin: 12px 0 0; padding: 12px 10px 0; border-top: 1px solid var(--stx-separator); }
.stx-toc__group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--stx-fs-caption); font-weight: 500; color: var(--stx-text-2); }
.stx-toc__group-title .stx-i { width: 16px; height: 16px; color: var(--stx-text-3); }
.stx-toc__group-text { margin: 0 0 10px; font-size: var(--stx-fs-micro); line-height: 1.4; color: var(--stx-text-3); }
@media (prefers-reduced-motion: reduce) { .stx-toc__item[data-status="running"] .stx-toc__dot { animation: none; border-top-color: var(--stx-accent); } }

/* плашка «Закрыто» в углу страницы (не первой) */
.stx-lock-chip { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 28px; border-radius: var(--stx-r-pill); background: var(--stx-glass-bg-strong); -webkit-backdrop-filter: var(--stx-glass-blur); backdrop-filter: var(--stx-glass-blur); border: var(--stx-glass-border); box-shadow: var(--stx-shadow-sm); color: var(--stx-text-2); font-family: var(--stx-font); font-size: var(--stx-fs-micro); font-weight: 600; }
.stx-lock-chip .stx-i { width: 14px; height: 14px; }

/* =====================================================================
   СОСТОЯНИЯ: пустое, скелетон, тост, подсказка
   ===================================================================== */
.stx-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; margin: 48px auto; padding: 32px 24px; text-align: center; font-family: var(--stx-font); }
.stx-empty__art { width: 120px; height: 120px; margin-bottom: 8px; color: var(--stx-accent); opacity: .9; }
.stx-empty__art svg { width: 100%; height: 100%; }
.stx-empty__title { margin: 0; font-size: var(--stx-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--stx-text); }
.stx-empty__text { margin: 0 0 12px; font-size: var(--stx-fs-ui); line-height: 1.5; color: var(--stx-text-2); }
.stx-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--stx-fill) 0%, var(--stx-fill-2) 50%, var(--stx-fill) 100%); background-size: 200% 100%; color: transparent; animation: stx-skel 1.4s ease-in-out infinite; }
@keyframes stx-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .stx-skel { animation: none; } }
.stx-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--stx-r-card); background: var(--stx-tooltip-bg); color: var(--stx-tooltip-fg); font-family: var(--stx-font); font-size: var(--stx-fs-sm); box-shadow: var(--stx-shadow-lg); }
.stx-toast .stx-btn { min-height: 32px; padding: 0 12px; font-size: var(--stx-fs-caption); background: rgba(255, 255, 255, .12); border-color: transparent; color: inherit; }
.stx-toast[data-kind="error"] { background: var(--stx-danger); color: #fff; }
.stx-tooltip { padding: 6px 10px; border-radius: 8px; background: var(--stx-tooltip-bg); color: var(--stx-tooltip-fg); font-family: var(--stx-font); font-size: var(--stx-fs-micro); line-height: 1.3; white-space: nowrap; box-shadow: var(--stx-shadow-md); }

/* =====================================================================
   ОКНА И ШТОРКИ: подложка со скримом, окно на стекле (только у подложки)
   ===================================================================== */
.stx-scrim { position: fixed; inset: 0; z-index: 90; background: var(--stx-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stx-sheet { position: relative; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; box-sizing: border-box; border-radius: var(--stx-r-sheet); background: var(--stx-glass-bg-strong); -webkit-backdrop-filter: var(--stx-glass-blur); backdrop-filter: var(--stx-glass-blur); border: var(--stx-glass-border); box-shadow: var(--stx-shadow-lg), var(--stx-glass-highlight); color: var(--stx-text); font-family: var(--stx-font); }
.stx-sheet__title { margin: 0 0 6px; font-size: var(--stx-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.stx-sheet__text { margin: 0 0 20px; font-size: var(--stx-fs-ui); line-height: 1.5; color: var(--stx-text-2); }
.stx-sheet__close { position: absolute; top: 12px; right: 12px; }
.stx-sheet__foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.stx-sheet__grabber { display: none; width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--stx-fill-2); }
@media (max-width: 600px) {
  .stx-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 92vh; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--stx-r-sheet) var(--stx-r-sheet) 0 0; }
  .stx-sheet__grabber { display: block; }
}

/* =====================================================================
   УТИЛИТЫ
   ===================================================================== */
.stx-row { display: flex; align-items: center; gap: 12px; }
.stx-row--between { justify-content: space-between; }
.stx-row--wrap { flex-wrap: wrap; }
.stx-stack { display: grid; gap: 12px; }
.stx-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stx-inline-links a { display: inline; }   /* для любого текста DLE: снимает a{display:block} */
.stx-nowrap { white-space: nowrap; }

/* editor-polish (2026-10-01): хлебные крошки на мобиле — зона нажатия ссылки не меньше 44 px
   (посадочные, документы, каталог, восстановление пароля). Специфичность (0,2,4) выше, чем у
   .lnd li a:not([class]) {display:inline} (0,2,2) из landing.css и .ctg-crumbs a (0,1,1) из catalog.css */
@media (max-width: 600px) {
  html body [class*="crumb"] li > a[href], html body [class*="crumb"] > a[href] { display: inline-flex; align-items: center; min-height: 44px; }
  html body [class*="crumb"] ol, html body [class*="crumb"] ul { align-items: center; } /* текущая страница — на одной линии со ссылками */
}