/*!
 * Sintez UI v1.1.0
 * Набор компонентов на чистом HTML и CSS. MIT.
 *
 * Все стили лежат в каскадных слоях sintez.*. Любой ваш CSS вне слоя
 * автоматически сильнее, поэтому переопределение не требует !important
 * и борьбы со специфичностью.
 *
 * Математика:
 *  - текст: шкала Utopia, 15px @360 → 16px @1240, отношение 1.2 → 1.25;
 *  - интерлиньяж: (кегль + 8px) / кегль для текста, (кегль + 6px) / кегль для заголовков;
 *  - элементы управления и отступы внутри компонентов: фиксированная сетка 4px;
 *  - отступы секций и гаттеры: плавные пары Utopia;
 *  - вложенные радиусы: внутренний = внешний − отступ.
 */

/* Служебные цвета для псевдоэлементов браузера (дорожки шкал, ползунков, выпадающих списков).
   Тип <color> заставляет light-dark() вычисляться на самом элементе, в его теме,
   а псевдоэлемент получает уже готовый цвет. Без регистрации он мог взять светлую палитру. */
@property --_track { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_warn { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_bad { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_thumb-border { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_surface { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_line { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_hover { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_muted { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --_overlay { syntax: "<color>"; inherits: true; initial-value: transparent; }

@layer sintez.reset, sintez.tokens, sintez.base, sintez.layout, sintez.components, sintez.blocks, sintez.utilities;

/* ==========================================================================
   Tokens
   ========================================================================== */
@layer sintez.tokens {
  :root {
    color-scheme: light dark;

    /* Шрифты */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Плавная шкала (контент) */
    --step--1: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
    --step-0:  clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
    --step-1:  clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-2:  clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --step-3:  clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
    --step-4:  clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
    --step-5:  clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
    --step-6:  clamp(2.7994rem, 2.3839rem + 1.8466vw, 3.8147rem);

    /* Интерлиньяж, посчитан на максимальном кегле шага */
    --leading-small: 1.625; /* 12.8 + 8 */
    --leading-body: 1.5;    /* 16 + 8 */
    --leading-lead: 1.4;    /* 20 + 8 */
    --leading-1: 1.3;       /* 20 + 6 */
    --leading-2: 1.24;      /* 25 + 6 */
    --leading-3: 1.19;      /* 31.25 + 6 */
    --leading-4: 1.15;      /* 39.06 + 6 */
    --leading-5: 1.12;      /* 48.83 + 6 */
    --leading-6: 1.1;       /* 61.04 + 6 */

    /* Фиксированный кегль интерфейса (кнопки, поля, меню) */
    --ui-xs: 0.75rem;
    --ui-sm: 0.8125rem;
    --ui-md: 0.875rem;
    --ui-lg: 1rem;

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

    /* Сетка 4px */
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Плавные отступы (Utopia, 360 → 1240) */
    --flow-s:   clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);   /* 16 → 20 */
    --flow-m:   clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);    /* 24 → 32 */
    --flow-l:   clamp(2rem, 1.5909rem + 1.8182vw, 3rem);      /* 32 → 48 */
    --flow-xl:  clamp(3rem, 2.1818rem + 3.6364vw, 5rem);      /* 48 → 80 */
    --flow-2xl: clamp(4rem, 2.3636rem + 7.2727vw, 8rem);      /* 64 → 128 */
    --gutter:   clamp(1rem, 0.5909rem + 1.8182vw, 2rem);      /* 16 → 32 */
    --section-y: var(--flow-xl);

    --container: 75rem;
    --container-narrow: 45rem;
    --container-wide: 90rem;

    /* Высоты элементов управления */
    --control-xs: 1.75rem;
    --control-sm: 2rem;
    --control-md: 2.5rem;
    --control-lg: 3rem;

    /* Радиусы */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 999px;

    /* Движение */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration: 180ms;
    --duration-slow: 280ms;

    --z-sticky: 40;
    --z-dropdown: 50;
    --z-toast: 70;

    --navbar-h: 4rem;

    /* Нейтральная шкала: светлое значение, тёмное значение */
    --gray-1:  light-dark(#fcfcfc, #111111);
    --gray-2:  light-dark(#f9f9f9, #191919);
    --gray-3:  light-dark(#f0f0f0, #222222);
    --gray-4:  light-dark(#e8e8e8, #2a2a2a);
    --gray-5:  light-dark(#e0e0e0, #313131);
    --gray-6:  light-dark(#d9d9d9, #3a3a3a);
    --gray-7:  light-dark(#cecece, #484848);
    --gray-8:  light-dark(#bbbbbb, #606060);
    --gray-9:  light-dark(#8d8d8d, #6e6e6e);
    --gray-10: light-dark(#838383, #7b7b7b);
    --gray-11: light-dark(#646464, #b4b4b4);
    --gray-12: light-dark(#202020, #eeeeee);

    /* Семантика */
    --color-bg:            light-dark(#ffffff, #0a0a0a);
    --color-bg-subtle:     var(--gray-2);
    --color-bg-muted:      var(--gray-3);
    --color-surface:       light-dark(#ffffff, #141414);
    --color-fg:            var(--gray-12);
    --color-fg-muted:      var(--gray-11);
    --color-fg-subtle:     var(--gray-9);
    --color-border:        light-dark(#e5e5e5, #2a2a2a);
    --color-border-strong: var(--gray-7);
    --color-hover:         var(--gray-3);
    --color-active:        var(--gray-4);
    --color-accent:        var(--gray-12);
    --color-accent-fg:     light-dark(#ffffff, #111111);
    --color-accent-hover:  light-dark(#3d3d3d, #cfcfcf);
    --color-focus:         light-dark(#0d74ce, #3b9eff);
    --color-overlay:       light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.64));

    --color-danger:         light-dark(#ce2c31, #ff6369);
    --color-danger-solid:   light-dark(#e5484d, #e5484d);
    --color-danger-bg:      light-dark(#fff2f2, #2a1215);
    --color-danger-border:  light-dark(#fdbdbe, #5c1f24);
    --color-success:        light-dark(#218358, #3dd68c);
    --color-success-bg:     light-dark(#effaf3, #0f2419);
    --color-success-border: light-dark(#b2ddb5, #1d4a33);
    --color-warning:        light-dark(#ab6400, #ffca16);
    --color-warning-bg:     light-dark(#fffbe5, #2a1f06);
    --color-warning-border: light-dark(#f3d673, #5a3f0a);
    --color-info:           light-dark(#0d74ce, #70b8ff);
    --color-info-bg:        light-dark(#f1f8ff, #0b1d33);
    --color-info-border:    light-dark(#acd8fc, #173a61);

    --shadow-xs: 0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.3));
    --shadow-sm: 0 1px 2px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4)), 0 1px 3px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3));
    --shadow-md: 0 4px 12px -2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5)), 0 2px 4px -2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4));
    --shadow-lg: 0 12px 32px -8px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.7)), 0 4px 8px -4px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.4));

    /* Иконки-маски */
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E");
  }

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

/* ==========================================================================
   Reset
   ========================================================================== */
@layer sintez.reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    interpolate-size: allow-keywords;
  }
  body {
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  p, li, dd, figcaption, blockquote, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
  p { text-wrap: pretty; }
  table { border-collapse: collapse; }
  [hidden]:not([hidden="until-found"]) { display: none !important; }

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

/* ==========================================================================
   Base
   ========================================================================== */
@layer sintez.base {
  html {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    scroll-padding-top: calc(var(--navbar-h) + var(--space-4));
  }
  body {
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-feature-settings: "calt" 1, "kern" 1;
  }
  [data-theme] { background-color: var(--color-bg); color: var(--color-fg); }

  h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); color: var(--color-fg); }
  h1, .h1 { font-size: var(--step-5); line-height: var(--leading-5); letter-spacing: -0.03em; }
  h2, .h2 { font-size: var(--step-4); line-height: var(--leading-4); letter-spacing: -0.025em; }
  h3, .h3 { font-size: var(--step-3); line-height: var(--leading-3); letter-spacing: -0.02em; }
  h4, .h4 { font-size: var(--step-2); line-height: var(--leading-2); letter-spacing: -0.015em; }
  h5, .h5 { font-size: var(--step-1); line-height: var(--leading-1); letter-spacing: -0.01em; }
  h6, .h6 { font-size: var(--step-0); line-height: var(--leading-body); }

  .display {
    font-size: var(--step-6);
    line-height: var(--leading-6);
    letter-spacing: -0.04em;
    font-weight: var(--weight-semibold);
    text-wrap: balance;
  }
  .lead { font-size: var(--step-1); line-height: var(--leading-lead); color: var(--color-fg-muted); }
  small, .small { font-size: var(--step--1); line-height: var(--leading-small); }

  a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--duration-fast);
  }
  a:hover { text-decoration-color: currentColor; }

  code, kbd, samp, pre { font-family: var(--font-mono); }
  :not(pre) > code {
    padding: 0.125em 0.375em;
    font-size: 0.875em;
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
  }
  hr { border: 0; border-top: 1px solid var(--color-border); }
  ul, ol { padding-inline-start: 1.25em; }
  strong, b { font-weight: var(--weight-semibold); }

  ::selection { background: color-mix(in srgb, var(--color-focus) 24%, transparent); }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

  .prose { max-width: 65ch; }
  .prose > * + * { margin-top: 1em; }
  .prose > :is(h2, h3, h4) { margin-top: 1.75em; }
  .prose > :is(h2, h3, h4) + * { margin-top: 0.5em; }
  .prose li + li { margin-top: 0.375em; }
}

/* ==========================================================================
   Layout
   ========================================================================== */
@layer sintez.layout {
  .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container-narrow { --container: var(--container-narrow); }
  .container-wide { --container: var(--container-wide); }

  .section { padding-block: var(--section-y); }
  .section-sm { padding-block: var(--flow-l); }
  .section-muted {
    background-color: var(--color-bg-subtle);
    border-block: 1px solid var(--color-border);
  }

  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); }

  /* Кнопки и действия: на узком экране растягиваются и делят строку */
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  @media (width < 30rem) {
    .actions > * { flex: 1 1 auto; }
  }

  /*
   * Адаптивная сетка без медиазапросов.
   * --cols задаёт число колонок на широком экране, --min — минимальную ширину элемента.
   * Элементы последнего ряда растягиваются и делят оставшуюся ширину:
   * 3 карточки в 2 колонки дают 2 + 1 на всю ширину.
   */
  .grid {
    --cols: 3;
    --min: 16rem;
    --gap: var(--flow-s);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  .grid > * {
    flex: 1 1 max(min(var(--min), 100%), (100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    min-width: 0;
  }
  .grid-even > * { flex-grow: 0; }
  /* Шаги и фичи без рамок: между рядами нужен воздух крупнее, чем между колонками */
  .grid:has(> .step, > .feature:not(.card)) { row-gap: var(--flow-l); }
  .cols-2 { --cols: 2; --min: 20rem; }
  .cols-3 { --cols: 3; --min: 16rem; }
  .cols-4 { --cols: 4; --min: 13rem; }
  .cols-6 { --cols: 6; --min: 9rem; }
  .min-sm { --min: 9rem; }
  .min-md { --min: 13rem; }
  .min-lg { --min: 20rem; }

  /* Две колонки, которые складываются, когда обеим не хватает --split-min */
  .split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--flow-l);
  }
  .split > * { flex: 1 1 min(100%, var(--split-min, 22rem)); min-width: 0; }
  .split-start { align-items: flex-start; }

  .center { margin-inline: auto; text-align: center; }
  .measure { max-width: 65ch; }
}

/* ==========================================================================
   Components
   ========================================================================== */
@layer sintez.components {

  /* ---------- Button ---------- */
  .btn {
    --btn-h: var(--control-md);
    --btn-px: calc(var(--btn-h) / 2 - var(--space-1));
    --btn-fs: var(--ui-md);
    --btn-bg: var(--color-surface);
    --btn-fg: var(--color-fg);
    --btn-border: var(--color-border);
    --btn-bg-hover: var(--color-hover);
    --btn-bg-active: var(--color-active);
    --btn-shadow: var(--shadow-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-h);
    padding-inline: var(--btn-px);
    font-family: var(--font-sans);
    font-size: var(--btn-fs);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--btn-fg);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    box-shadow: var(--btn-shadow);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), scale var(--duration-fast);
  }
  @media (hover: hover) {
    .btn:hover { background-color: var(--btn-bg-hover); }
  }
  .btn:active { background-color: var(--btn-bg-active); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .btn svg { width: 1rem; height: 1rem; flex: none; }

  .btn-primary {
    --btn-bg: var(--color-accent);
    --btn-fg: var(--color-accent-fg);
    --btn-border: var(--color-accent);
    --btn-bg-hover: var(--color-accent-hover);
    --btn-bg-active: var(--color-accent-hover);
  }
  .btn-secondary {
    --btn-bg: var(--color-bg-muted);
    --btn-border: transparent;
    --btn-bg-hover: var(--gray-4);
    --btn-bg-active: var(--gray-5);
    --btn-shadow: none;
  }
  .btn-ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-shadow: none;
  }
  .btn-danger {
    --btn-bg: var(--color-danger-solid);
    --btn-fg: #fff;
    --btn-border: var(--color-danger-solid);
    --btn-bg-hover: color-mix(in srgb, var(--color-danger-solid) 88%, black);
    --btn-bg-active: color-mix(in srgb, var(--color-danger-solid) 80%, black);
  }
  .btn-link {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-bg-active: transparent;
    --btn-border: transparent;
    --btn-shadow: none;
    --btn-px: 0;
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 0.25em;
  }
  .btn-link:hover { text-decoration-color: currentColor; }
  .btn-xs { --btn-h: var(--control-xs); --btn-fs: var(--ui-xs); }
  .btn-sm { --btn-h: var(--control-sm); --btn-fs: var(--ui-sm); }
  .btn-lg { --btn-h: var(--control-lg); --btn-fs: var(--ui-lg); }
  .btn-icon { width: var(--btn-h); padding-inline: 0; }
  .btn-block { width: 100%; }

  .btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
  .btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--btn-fg);
    border-right-color: transparent;
    animation: sintez-spin 0.6s linear infinite;
  }
  @keyframes sintez-spin { to { rotate: 360deg; } }

  .btn-group { display: inline-flex; isolation: isolate; }
  .btn-group > .btn:not(:first-child) { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
  .btn-group > .btn:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
  .btn-group > .btn:focus-visible { z-index: 1; }

  /* ---------- Badge ---------- */
  .badge {
    --badge-bg: var(--color-bg-muted);
    --badge-fg: var(--color-fg);
    --badge-border: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 1.25rem;
    padding-inline: var(--space-2);
    font-size: var(--ui-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--badge-fg);
    background-color: var(--badge-bg);
    border: 1px solid var(--badge-border);
    border-radius: var(--radius-full);
    white-space: nowrap;
    vertical-align: middle;
  }
  .badge svg { width: 0.75rem; height: 0.75rem; }
  .badge-outline { --badge-bg: transparent; --badge-border: var(--color-border); }
  .badge-solid   { --badge-bg: var(--color-accent); --badge-fg: var(--color-accent-fg); }
  .badge-success { --badge-bg: var(--color-success-bg); --badge-fg: var(--color-success); --badge-border: var(--color-success-border); }
  .badge-danger  { --badge-bg: var(--color-danger-bg); --badge-fg: var(--color-danger); --badge-border: var(--color-danger-border); }
  .badge-warning { --badge-bg: var(--color-warning-bg); --badge-fg: var(--color-warning); --badge-border: var(--color-warning-border); }
  .badge-info    { --badge-bg: var(--color-info-bg); --badge-fg: var(--color-info); --badge-border: var(--color-info-border); }
  .badge-glass {
    --badge-bg: color-mix(in srgb, var(--color-fg) 12%, transparent);
    --badge-border: color-mix(in srgb, var(--color-fg) 20%, transparent);
    --badge-fg: var(--color-fg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .badge-dot::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
  .badge-lg { height: 1.5rem; padding-inline: var(--space-2-5, 0.625rem); font-size: var(--ui-sm); }

  /* ---------- Card ---------- */
  .card {
    --card-p: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--card-p);
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
  }
  .card-header { display: flex; flex-direction: column; gap: var(--space-1); }
  .card-title { font-size: var(--step-1); line-height: var(--leading-1); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
  .card-description { font-size: var(--ui-md); line-height: 1.25rem; color: var(--color-fg-muted); }
  .card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; }
  .card-flush { padding: 0; gap: 0; overflow: hidden; }
  .card-muted { background-color: var(--color-bg-subtle); box-shadow: none; }
  a.card { text-decoration: none; transition: border-color var(--duration-fast); }
  @media (hover: hover) { a.card:hover { border-color: var(--color-border-strong); } }
  @media (width < 30rem) { .card { --card-p: var(--space-5); } }

  /* ---------- Alert ---------- */
  .alert {
    --alert-fg: var(--color-fg);
    --alert-bg: var(--color-surface);
    --alert-border: var(--color-border);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-4);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    color: var(--color-fg);
    background-color: var(--alert-bg);
    border: 1px solid var(--alert-border);
    border-radius: var(--radius-lg);
  }
  .alert:not(:has(> svg)) { grid-template-columns: 1fr; }
  .alert > svg { width: 1rem; height: 1rem; margin-top: 0.125rem; color: var(--alert-fg); grid-row: span 2; }
  .alert > :not(svg) { grid-column: -2 / -1; }
  .alert-title { font-weight: var(--weight-medium); color: var(--alert-fg); }
  .alert-description { color: var(--color-fg-muted); }
  .alert-danger  { --alert-fg: var(--color-danger);  --alert-bg: var(--color-danger-bg);  --alert-border: var(--color-danger-border); }
  .alert-success { --alert-fg: var(--color-success); --alert-bg: var(--color-success-bg); --alert-border: var(--color-success-border); }
  .alert-warning { --alert-fg: var(--color-warning); --alert-bg: var(--color-warning-bg); --alert-border: var(--color-warning-border); }
  .alert-info    { --alert-fg: var(--color-info);    --alert-bg: var(--color-info-bg);    --alert-border: var(--color-info-border); }

  /* ---------- Inputs ---------- */
  .input, .textarea, .select {
    --input-h: var(--control-md);
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--input-h);
    padding-inline: var(--space-3);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    appearance: none;
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
    --_muted: var(--color-fg-subtle);
    --_surface: var(--color-surface);
    --_line: var(--color-border);
    --_hover: var(--color-hover);
  }
  .input::placeholder, .textarea::placeholder { color: var(--_muted); opacity: 1; }
  @media (hover: hover) {
    :is(.input, .textarea, .select):hover:not(:disabled, :focus) { border-color: var(--color-border-strong); }
  }
  :is(.input, .textarea, .select):focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; border-color: transparent; }
  :is(.input, .textarea, .select):is([aria-invalid="true"], :user-invalid),
  .field[data-invalid] :is(.input, .textarea, .select) { border-color: var(--color-danger); }
  :is(.input, .textarea, .select):is([aria-invalid="true"], :user-invalid):focus-visible { outline-color: var(--color-danger); }
  :is(.input, .textarea, .select):disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--color-bg-subtle); }
  .input-sm { --input-h: var(--control-sm); }
  .input-lg { --input-h: var(--control-lg); }

  .textarea {
    height: auto;
    min-height: 5.5rem;
    max-height: 20rem;
    padding-block: calc((var(--control-md) - 1.25rem - 2px) / 2);
    resize: vertical;
    field-sizing: content;
  }
  .select {
    padding-inline-end: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d8d8d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1rem;
    cursor: pointer;
    text-overflow: ellipsis;
  }

  /* Кастомный выпадающий список там, где браузер это умеет */
  @supports (appearance: base-select) {
    .select, .select::picker(select) { appearance: base-select; }
    .select { display: flex; align-items: center; }
    .select::picker-icon { display: none; }
    .select::picker(select) {
      margin-block: var(--space-1);
      padding: var(--space-1);
      border: 1px solid var(--_line);
      border-radius: var(--radius-lg);
      background-color: var(--_surface);
      box-shadow: var(--shadow-lg);
    }
    .select option {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      min-height: var(--control-sm);
      padding-inline: var(--space-2);
      border-radius: calc(var(--radius-lg) - var(--space-1));
      font-size: var(--ui-md);
    }
    .select option:is(:hover, :focus-visible) { background-color: var(--_hover); outline: none; }
    .select option::checkmark { order: 1; margin-inline-start: auto; content: "✓"; color: var(--color-fg-muted); }
  }

  /* iOS увеличивает страницу при фокусе на поле с кеглем меньше 16px */
  @media (pointer: coarse) {
    .input, .textarea, .select, .number-field-input { font-size: max(1rem, var(--ui-md)); }
  }

  .input-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    padding-inline: var(--space-3);
    color: var(--color-fg-muted);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    cursor: text;
  }
  .input-group:focus-within { outline: 2px solid var(--color-focus); outline-offset: -1px; border-color: transparent; }
  .input-group > svg { width: 1rem; height: 1rem; flex: none; }
  .input-group > .input { height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; flex: 1; }
  .input-group > .input:focus-visible { outline: none; }
  .input-addon { font-size: var(--ui-md); color: var(--color-fg-subtle); white-space: nowrap; }

  /* ---------- Field / Fieldset / Form ---------- */
  .field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .label { font-size: var(--ui-md); font-weight: var(--weight-medium); line-height: 1.25rem; color: var(--color-fg); }
  .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
  .description { font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }
  .error { font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-danger); }

  .fieldset { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: 0; border: 0; }
  .legend { margin-bottom: var(--space-4); padding: 0; font-size: var(--ui-lg); font-weight: var(--weight-semibold); line-height: 1.5rem; }
  .legend + .description { margin-top: calc(-1 * var(--space-3)); }

  .form { display: flex; flex-direction: column; gap: var(--space-5); }
  .form-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .form-row > * { flex: 1 1 min(100%, 12rem); }
  .form-row-tight > * { flex-basis: min(100%, 7rem); }
  .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
  @media (width < 30rem) { .form-actions > * { flex: 1 1 auto; } }

  /* ---------- Checkbox / Radio ---------- */
  .checkbox, .radio {
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1rem;
    height: 1rem;
    margin: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-xs);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--duration-fast), border-color var(--duration-fast);
  }
  .checkbox { border-radius: var(--radius-sm); }
  .radio { border-radius: 50%; }
  .checkbox::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--color-accent-fg);
    mask: var(--icon-check) center / contain no-repeat;
    scale: 0;
    transition: scale var(--duration-fast) var(--ease-out);
  }
  .checkbox:indeterminate::before { mask-image: var(--icon-minus); }
  .radio::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--color-accent-fg);
    scale: 0;
    transition: scale var(--duration-fast) var(--ease-out);
  }
  :is(.checkbox:checked, .checkbox:indeterminate, .radio:checked) { background-color: var(--color-accent); border-color: var(--color-accent); }
  :is(.checkbox:checked, .checkbox:indeterminate, .radio:checked)::before { scale: 1; }
  :is(.checkbox, .radio):disabled { opacity: 0.5; cursor: not-allowed; }
  :is(.checkbox, .radio)[aria-invalid="true"] { border-color: var(--color-danger); }

  .check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    cursor: pointer;
    user-select: none;
  }
  .check > :is(.checkbox, .radio) { margin-top: 0.125rem; }
  .check > .switch { margin-top: 0; }
  .check-body { display: flex; flex-direction: column; gap: var(--space-0-5); }
  .check:has(:disabled) { opacity: 0.55; cursor: not-allowed; }
  .check-group { display: flex; flex-direction: column; gap: var(--space-3); }
  .check-group-inline { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-5); }

  .choice-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
  }
  .choice-card > :is(.checkbox, .radio) { margin-top: 0.125rem; }
  .choice-card:has(:checked) { border-color: var(--color-fg); background-color: var(--color-bg-subtle); }
  .choice-card:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .choice-card:has(:focus-visible) :focus-visible { outline: none; }

  /* ---------- Switch ---------- */
  .switch {
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    background-color: var(--gray-7);
    border-radius: var(--radius-full);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--duration);
  }
  .switch::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: light-dark(#ffffff, var(--gray-12));
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    transition: translate var(--duration) var(--ease-out), background-color var(--duration);
  }
  .switch:checked { background-color: var(--color-accent); }
  .switch:checked::before { translate: 1rem 0; background-color: var(--color-accent-fg); }
  .switch:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ---------- Slider ---------- */
  .slider {
    --fill: 50%;
    --_track: var(--gray-5);
    --_fill: var(--color-accent);
    --_thumb-border: var(--gray-8);
    /* Дорожку и заполнение рисует сам элемент: внутренние части браузера остаются прозрачными */
    background:
      linear-gradient(var(--_fill), var(--_fill)) 0 50% / var(--fill) 0.25rem no-repeat,
      linear-gradient(var(--_track), var(--_track)) 0 50% / 100% 0.25rem no-repeat;
    width: 100%;
    height: 1.25rem;
    margin: 0;
    appearance: none;
    cursor: pointer;
  }
  .slider::-webkit-slider-runnable-track {
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: transparent;
  }
  .slider::-moz-range-track { height: 0.25rem; background: transparent; }
  .slider::-moz-range-progress { height: 0.25rem; background: transparent; }
  .slider::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.375rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--_thumb-border);
    box-shadow: var(--shadow-sm);
    appearance: none;
    transition: scale var(--duration-fast) var(--ease-out);
  }
  .slider::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--_thumb-border);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
  }
  .slider:active::-webkit-slider-thumb { scale: 1.15; }
  .slider:focus-visible { outline: none; }
  .slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .slider:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ---------- Progress / Meter ---------- */
  .progress-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .progress-label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--ui-md); line-height: 1.25rem; font-weight: var(--weight-medium); }
  .progress-label :is(output, .value) { font-weight: var(--weight-regular); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

  .progress, .meter {
    display: block;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    --_track: var(--gray-4);
    --_fill: var(--color-accent);
    --_warn: var(--color-warning);
    --_bad: var(--color-danger);
    background-color: var(--_track);
    color: var(--_fill);
    appearance: none;
  }
  /* Дорожку рисует сам элемент, служебная полоса браузера прозрачная: так дорожка
     не зависит от того, как браузер передаёт тему своим внутренним частям */
  .progress::-webkit-progress-bar { background: transparent; border-radius: inherit; }
  .progress::-webkit-progress-value { background-color: var(--_fill); border-radius: inherit; transition: inline-size var(--duration-slow) var(--ease-out); }
  .progress::-moz-progress-bar { background-color: var(--_fill); border-radius: inherit; }
  /* Шкала и прогресс на div с ролями meter и progressbar: дорожка — фон элемента,
     заполнение — обычный псевдоэлемент. Никаких внутренних частей браузера,
     поэтому вид одинаков везде и цвета всегда берутся из темы */
  div:is(.progress, .meter) { position: relative; }
  div:is(.progress, .meter)::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--value, 0%);
    border-radius: inherit;
    background-color: var(--_fill);
    transition: width var(--duration-slow) var(--ease-out);
  }
  div.meter[data-state="warning"] { --_fill: var(--color-warning); }
  div.meter[data-state="danger"] { --_fill: var(--color-danger); }
  div.progress[data-indeterminate]::before { content: none; }
  .progress[data-indeterminate],
  .progress:indeterminate {
    background: linear-gradient(90deg, transparent, var(--_fill), transparent) no-repeat, var(--_track);
    background-size: 40% 100%, auto;
    animation: sintez-indeterminate 1.4s var(--ease-in-out) infinite;
  }
  .progress:indeterminate::-webkit-progress-bar { background: transparent; }
  .progress:indeterminate::-moz-progress-bar { background: transparent; }
  @keyframes sintez-indeterminate { from { background-position: -67% 0, 0 0; } to { background-position: 167% 0, 0 0; } }

  .meter::-webkit-meter-bar { height: 0.5rem; background: transparent; border: 0; border-radius: inherit; }
  .meter::-webkit-meter-optimum-value { background: var(--_fill); border-radius: inherit; }
  .meter::-webkit-meter-suboptimum-value { background: var(--_warn); border-radius: inherit; }
  .meter::-webkit-meter-even-less-good-value { background: var(--_bad); border-radius: inherit; }
  .meter::-moz-meter-bar { background: var(--_fill); border-radius: inherit; }
  .meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--_warn); }
  .meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--_bad); }

  /* ---------- Separator ---------- */
  .separator { flex: none; align-self: stretch; height: 1px; margin: 0; border: 0; background-color: var(--color-border); }
  .separator-vertical { width: 1px; height: auto; min-height: 1em; }
  .separator-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--ui-sm);
    color: var(--color-fg-muted);
    white-space: nowrap;
  }
  .separator-label::before, .separator-label::after { content: ""; flex: 1; height: 1px; background-color: var(--color-border); }

  /* ---------- Avatar ---------- */
  .avatar {
    --avatar-size: 2.5rem;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--avatar-size);
    height: var(--avatar-size);
    overflow: hidden;
    font-size: calc(var(--avatar-size) * 0.375);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--color-fg);
    background-color: var(--gray-4);
    border-radius: 50%;
    user-select: none;
    vertical-align: middle;
  }
  .avatar img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
  .avatar-xs { --avatar-size: 1.5rem; }
  .avatar-sm { --avatar-size: 2rem; }
  .avatar-lg { --avatar-size: 3rem; }
  .avatar-xl { --avatar-size: 4rem; }
  .avatar-square { border-radius: calc(var(--avatar-size) * 0.25); }
  .avatar-group { display: flex; }
  .avatar-group > .avatar { box-shadow: 0 0 0 2px var(--color-bg); }
  .avatar-group > .avatar + .avatar { margin-inline-start: calc(var(--avatar-size) * -0.25); }

  /* ---------- Kbd ---------- */
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--ui-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--color-fg-muted);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  /* ---------- Skeleton ---------- */
  .skeleton {
    display: block;
    height: var(--skeleton-h, 1rem);
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--gray-3) 25%, var(--gray-4) 37%, var(--gray-3) 63%) 0 0 / 400% 100%;
    animation: sintez-shimmer 1.6s ease infinite;
  }
  @keyframes sintez-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* ---------- Table ---------- */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .table { width: 100%; font-size: var(--ui-md); line-height: 1.25rem; }
  .table :is(th, td) { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
  .table th { font-size: var(--ui-sm); font-weight: var(--weight-medium); color: var(--color-fg-muted); background-color: var(--color-bg-subtle); }
  .table tbody tr:last-child > * { border-bottom: 0; }
  .table .num { text-align: end; font-variant-numeric: tabular-nums; }
  .table .muted { color: var(--color-fg-muted); }
  @media (hover: hover) { .table-hover tbody tr:hover { background-color: var(--color-bg-subtle); } }
  @media (width < 48rem) {
    .table-stack thead { display: none; }
    .table-stack :is(tbody, tr, td) { display: block; }
    .table-stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack td { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; border: 0; white-space: normal; text-align: end; }
    .table-stack td::before { content: attr(data-label); color: var(--color-fg-muted); text-align: start; }
  }

  @media (width < 48rem) {
    .table-compare thead { display: none; }
    .table-compare, .table-compare tbody { display: block; }
    .table-compare tr {
      display: grid;
      grid-template-columns: repeat(var(--compare-cols, 3), minmax(0, 1fr));
      gap: var(--space-2) var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--color-border);
    }
    .table-compare tbody tr:last-child { border-bottom: 0; }
    .table-compare td { display: flex; flex-direction: column; gap: var(--space-0-5); padding: 0; border: 0; white-space: normal; }
    .table-compare td:first-child { grid-column: 1 / -1; font-weight: var(--weight-medium); }
    .table-compare td:not(:first-child)::before { content: attr(data-label); font-size: var(--ui-xs); color: var(--color-fg-subtle); }
  }

  /* ---------- Tabs ---------- */
  .tabs { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .tabs-list {
    position: relative;
    display: flex;
    gap: var(--space-1);
    max-width: 100%;
    overflow-x: auto;
    box-shadow: inset 0 -1px var(--color-border);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .tabs-list::-webkit-scrollbar { display: none; }
  .tab {
    position: relative;
    z-index: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    padding-inline: var(--space-3);
    font-size: var(--ui-md);
    font-weight: var(--weight-medium);
    color: var(--color-fg-muted);
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition: color var(--duration-fast);
  }
  .tab:hover, .tab[aria-selected="true"] { color: var(--color-fg); }
  .tab:focus-visible { outline-offset: -2px; }
  .tab svg { width: 1rem; height: 1rem; }
  .tabs-indicator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--indicator-w, 0);
    height: 2px;
    translate: var(--indicator-x, 0) 0;
    background-color: var(--color-fg);
    pointer-events: none;
    transition: translate var(--duration) var(--ease-out), width var(--duration) var(--ease-out);
  }
  @media (width < 30rem) {
    .tab { padding-inline: var(--space-2); font-size: var(--ui-sm); }
    .tab-has-label > svg { display: none; }
  }
  .tabs-select { display: none; }
  .tabs[data-collapsed] > .tabs-select { display: block; }
  .tabs[data-collapsed] > .tabs-list { display: none; }
  .tabs-panel { font-size: var(--ui-md); line-height: 1.25rem; color: var(--color-fg-muted); }
  .tabs-panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }

  .tabs-pills .tabs-list {
    width: fit-content;
    padding: var(--space-1);
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    box-shadow: none;
  }
  .tabs-pills .tab {
    height: calc(var(--control-md) - 2 * var(--space-1));
    border-radius: calc(var(--radius-lg) - var(--space-1));
  }
  .tabs-pills .tabs-indicator {
    top: var(--space-1);
    bottom: var(--space-1);
    height: auto;
    background-color: var(--color-surface);
    border-radius: calc(var(--radius-lg) - var(--space-1));
    box-shadow: var(--shadow-sm);
  }
  .tabs-fill .tabs-list { width: 100%; }
  .tabs-fill .tab { flex: 1 0 auto; justify-content: center; }

  /* Затухание у края прокручиваемого ряда (атрибуты ставит sintez.js) */
  [data-fade-start] { --fade-start: 2rem; }
  [data-fade-end] { --fade-end: 2rem; }
  :is([data-fade-start], [data-fade-end]) {
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
  }

  /* ---------- Accordion / Collapsible ---------- */
  .accordion { display: flex; flex-direction: column; }
  .accordion-item { border-bottom: 1px solid var(--color-border); }
  .accordion-trigger, .collapsible-trigger { list-style: none; cursor: pointer; user-select: none; }
  :is(.accordion-trigger, .collapsible-trigger)::-webkit-details-marker { display: none; }
  .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
    font-weight: var(--weight-medium);
  }
  .accordion-trigger::after, .collapsible-trigger::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-fg-muted);
    mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: rotate var(--duration) var(--ease-out);
  }
  .accordion-item[open] > .accordion-trigger::after { rotate: 180deg; }
  .accordion-trigger:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
  .accordion-panel { padding-bottom: var(--space-4); color: var(--color-fg-muted); }

  .collapsible-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-sm);
    padding-inline: var(--space-2) var(--space-3);
    font-size: var(--ui-md);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-md);
  }
  .collapsible-trigger::before { mask-image: var(--icon-chevron-right); }
  .collapsible[open] > .collapsible-trigger::before { rotate: 90deg; }
  @media (hover: hover) { .collapsible-trigger:hover { background-color: var(--color-hover); } }
  .collapsible-panel { padding-top: var(--space-2); }

  :is(.accordion-item, .collapsible)::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--duration-slow) var(--ease-out), content-visibility var(--duration-slow) allow-discrete;
  }
  :is(.accordion-item, .collapsible)[open]::details-content { block-size: auto; }

  /* ---------- Dialog ---------- */
  .dialog {
    --dialog-w: 30rem;
    --_overlay: var(--color-overlay, rgb(0 0 0 / 0.4));
    width: min(100% - 2 * var(--space-4), var(--dialog-w));
    max-width: none;
    max-height: min(100dvh - 2 * var(--space-4), 44rem);
    margin: auto;
    padding: var(--space-6);
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--duration) var(--ease-out),
      scale var(--duration) var(--ease-out),
      translate var(--duration-slow) var(--ease-out),
      overlay var(--duration-slow) allow-discrete,
      display var(--duration-slow) allow-discrete;
  }
  .dialog[open] { opacity: 1; scale: 1; }
  @starting-style { .dialog[open] { opacity: 0; scale: 0.96; } }
  .dialog::backdrop {
    background-color: var(--_overlay);
    opacity: 0;
    transition: opacity var(--duration), overlay var(--duration) allow-discrete, display var(--duration) allow-discrete;
  }
  .dialog[open]::backdrop { opacity: 1; }
  @starting-style { .dialog[open]::backdrop { opacity: 0; } }
  html:has(.dialog[open]:modal) { overflow: hidden; }

  .dialog-sm { --dialog-w: 25rem; }
  .dialog-lg { --dialog-w: 40rem; }
  .dialog-title { padding-inline-end: var(--space-8); font-size: var(--step-1); line-height: var(--leading-1); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
  .dialog-description { margin-top: var(--space-2); font-size: var(--ui-md); line-height: 1.25rem; color: var(--color-fg-muted); }
  .dialog-body { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
  .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
  .dialog-close { position: absolute; top: var(--space-3); right: var(--space-3); }

  @media (width < 30rem) {
    .dialog {
      --sheet-gap: var(--space-3);
      width: calc(100% - 2 * var(--sheet-gap));
      max-height: calc(100dvh - 2 * var(--sheet-gap) - env(safe-area-inset-top, 0px));
      margin: auto var(--sheet-gap) calc(var(--sheet-gap) + env(safe-area-inset-bottom, 0px));
      padding: var(--space-6) var(--space-5) var(--space-5);
      border-radius: var(--radius-2xl);
      opacity: 1;
      scale: 1;
      translate: 0 calc(100% + 2 * var(--sheet-gap));
    }
    .dialog[open] { translate: 0 0; }
    @starting-style { .dialog[open] { opacity: 1; scale: 1; translate: 0 calc(100% + 2 * var(--sheet-gap)); } }
    .dialog-actions { flex-direction: column-reverse; }
    .dialog-actions > * { width: 100%; }
  }

  /* ---------- Floating: popover, menu, preview card ---------- */
  .popover, .menu, .preview-card {
    position: fixed;
    inset: auto;
    margin: 0;
    max-width: calc(100vw - var(--space-4));
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--duration-fast) var(--ease-out),
      scale var(--duration-fast) var(--ease-out),
      overlay var(--duration-fast) allow-discrete,
      display var(--duration-fast) allow-discrete;
  }
  :is(.popover, .menu, .preview-card):popover-open { opacity: 1; scale: 1; }
  @starting-style { :is(.popover, .menu, .preview-card):popover-open { opacity: 0; scale: 0.96; } }

  .popover { width: max-content; max-width: min(20rem, calc(100vw - var(--space-4))); padding: var(--space-4); font-size: var(--ui-md); line-height: 1.25rem; }
  .popover-title { font-weight: var(--weight-medium); }
  .popover-description { margin-top: var(--space-1); color: var(--color-fg-muted); }
  .preview-card { width: 20rem; padding: var(--space-4); font-size: var(--ui-md); line-height: 1.25rem; }

  .menu { min-width: 12rem; padding: var(--space-1); }
  .menu-item, .combobox-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-sm);
    padding-inline: var(--space-2);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    color: var(--color-fg);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    border-radius: calc(var(--radius-lg) - var(--space-1));
    outline: none;
    cursor: default;
    user-select: none;
  }
  :is(.menu-item, .combobox-option):is(:hover, :focus-visible, [data-highlighted]) { background-color: var(--color-hover); }
  :is(.menu-item, .combobox-option) svg { width: 1rem; height: 1rem; flex: none; color: var(--color-fg-muted); }
  :is(.menu-item, .combobox-option):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; pointer-events: none; }
  .menu-item-danger { color: var(--color-danger); }
  .menu-item-danger svg { color: currentColor; }
  .menu-item-danger:is(:hover, :focus-visible) { background-color: var(--color-danger-bg); }
  .menu-shortcut { margin-inline-start: auto; padding-inline-start: var(--space-4); font-size: var(--ui-xs); color: var(--color-fg-subtle); letter-spacing: 0.04em; }
  .menu-label { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--ui-xs); font-weight: var(--weight-medium); color: var(--color-fg-muted); }
  .menu-separator { height: 1px; margin: var(--space-1) calc(-1 * var(--space-1)); background-color: var(--color-border); border: 0; }
  :is(.menu-item[role="menuitemcheckbox"], .menu-item[role="menuitemradio"])::before,
  .combobox-option::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask: var(--icon-check) center / 0.875rem no-repeat;
    opacity: 0;
  }
  .combobox-option::after { margin-inline-start: auto; }
  :is(.menu-item, .combobox-option)[aria-checked="true"]::before,
  .combobox-option[aria-selected="true"]::after { opacity: 1; }
  @media (pointer: coarse) { .menu-item, .combobox-option { min-height: var(--control-md); } }

  /* ---------- Tooltip ----------
     С подключённым sintez.js подсказка рисуется одним элементом в top layer:
     её не обрезает overflow, она переворачивается у края экрана.
     Без скрипта работает запасной вариант на псевдоэлементе. */
  .tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    max-width: min(16rem, calc(100vw - var(--space-4)));
    padding: var(--space-1) var(--space-2);
    overflow: visible;
    font-family: var(--font-sans);
    font-size: var(--ui-xs);
    font-weight: var(--weight-medium);
    line-height: 1rem;
    color: var(--color-bg);
    background-color: var(--color-fg);
    border: 0;
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete;
  }
  .tooltip:popover-open { opacity: 1; }
  @starting-style { .tooltip:popover-open { opacity: 0; } }
  :root.sintez-js [data-tooltip]::after { content: none; }

  :where([data-tooltip]) { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: var(--z-dropdown);
    left: 50%;
    bottom: calc(100% + var(--space-2));
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--ui-xs);
    font-weight: var(--weight-medium);
    line-height: 1rem;
    letter-spacing: 0;
    color: var(--color-bg);
    background-color: var(--color-fg);
    border-radius: var(--radius-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: -50% 0.25rem;
    transition: opacity var(--duration-fast), translate var(--duration-fast) var(--ease-out);
    transition-delay: 0s;
  }
  [data-tooltip]:is(:hover, :focus-visible)::after { opacity: 1; translate: -50% 0; transition-delay: 0.35s; }
  [data-tooltip-side="bottom"]::after { bottom: auto; top: calc(100% + var(--space-2)); translate: -50% -0.25rem; }
  [data-tooltip-side="right"]::after { left: calc(100% + var(--space-2)); bottom: 50%; translate: -0.25rem 50%; }
  [data-tooltip-side="left"]::after { left: auto; right: calc(100% + var(--space-2)); bottom: 50%; translate: 0.25rem 50%; }
  [data-tooltip-side="bottom"]:is(:hover, :focus-visible)::after { translate: -50% 0; }
  [data-tooltip-side="right"]:is(:hover, :focus-visible)::after,
  [data-tooltip-side="left"]:is(:hover, :focus-visible)::after { translate: 0 50%; }
  @media (hover: none) { [data-tooltip]:hover:not(:focus-visible)::after { opacity: 0; } }

  /* ---------- Toast ---------- */
  .toast-region {
    position: fixed;
    z-index: var(--z-toast);
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(22rem, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
  }
  @media (width < 30rem) {
    .toast-region { left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); width: auto; }
  }
  .toast {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    transition: opacity var(--duration) var(--ease-out), translate var(--duration) var(--ease-out);
  }
  @starting-style { .toast { opacity: 0; translate: 0 0.75rem; } }
  .toast[data-state="closed"] { opacity: 0; translate: 0 0.75rem; }
  .toast-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); }
  .toast[data-variant] .toast-title::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--toast-dot, currentColor); }
  .toast[data-variant="success"] { --toast-dot: var(--color-success); }
  .toast[data-variant="danger"]  { --toast-dot: var(--color-danger); }
  .toast[data-variant="warning"] { --toast-dot: var(--color-warning); }
  .toast[data-variant="info"]    { --toast-dot: var(--color-info); }
  .toast-description { color: var(--color-fg-muted); }
  .toast-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
  .toast-close { position: absolute; top: var(--space-2); right: var(--space-2); }

  /* ---------- Toggle / Toggle group / Toolbar / Menubar ---------- */
  .toggle {
    --toggle-h: var(--control-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: none;
    height: var(--toggle-h);
    min-width: var(--toggle-h);
    padding-inline: calc(var(--toggle-h) / 4);
    font-size: var(--ui-md);
    font-weight: var(--weight-medium);
    color: var(--color-fg-muted);
    white-space: nowrap;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  }
  /* Внутри группы контур задаёт контейнер, поэтому у кнопок он прозрачный */
  :is(.toggle-group, .toolbar, .menubar) > .toggle { background-color: transparent; border-color: transparent; box-shadow: none; }
  @media (hover: hover) { .toggle:hover { background-color: var(--color-hover); color: var(--color-fg); } }
  .toggle[aria-pressed="true"] { background-color: var(--color-active); color: var(--color-fg); }
  .toggle[aria-pressed="true"]:not(:is(.toggle-group, .toolbar, .menubar) > *) { border-color: var(--color-border-strong); }
  .toggle svg { width: 1rem; height: 1rem; }
  .toggle:disabled { opacity: 0.5; cursor: not-allowed; }
  .toggle-sm { --toggle-h: var(--control-sm); }

  .toggle-group, .toolbar, .menubar {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: var(--space-1);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .toggle-group { align-self: flex-start; }
  .toolbar, .menubar { overflow-x: auto; scrollbar-width: none; }
  :is(.toolbar, .menubar)::-webkit-scrollbar { display: none; }
  /* Высота внутренних кнопок подогнана так, чтобы вся группа была ровно --control-md */
  :is(.toggle-group, .toolbar, .menubar) > :is(.toggle, .btn) {
    --toggle-h: calc(var(--control-md) - 2 * var(--space-1) - 2px);
    --btn-h: calc(var(--control-md) - 2 * var(--space-1) - 2px);
    border-radius: calc(var(--radius-lg) - var(--space-1));
    flex: none;
  }
  :is(.toolbar, .menubar) > .separator-vertical { align-self: stretch; margin: var(--space-1); }
  .toolbar[data-overflow] { overflow: hidden; }
  .toolbar > .is-overflow { display: none !important; }
  .menubar > .btn { font-weight: var(--weight-regular); }
  .menubar > .btn[aria-expanded="true"] { background-color: var(--color-active); }

  /* ---------- Number field ---------- */
  .number-field {
    display: inline-flex;
    align-items: stretch;
    height: var(--control-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }
  .number-field:focus-within { outline: 2px solid var(--color-focus); outline-offset: -1px; }
  .number-field-input {
    width: 5rem;
    min-width: 0;
    flex: 1;
    padding: 0 var(--space-2);
    font-size: var(--ui-md);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-fg);
    background: transparent;
    border: 0;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .number-field-input::-webkit-inner-spin-button,
  .number-field-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
  .number-field-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--control-md) - 2px);
    color: var(--color-fg-muted);
    user-select: none;
    touch-action: manipulation;
    transition: background-color var(--duration-fast), color var(--duration-fast);
  }
  .number-field-btn:first-child { border-inline-end: 1px solid var(--color-border); }
  .number-field-btn:last-child { border-inline-start: 1px solid var(--color-border); }
  @media (hover: hover) { .number-field-btn:hover { background-color: var(--color-hover); color: var(--color-fg); } }
  .number-field-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .number-field-btn svg { width: 1rem; height: 1rem; }
  .number-field-btn:focus-visible { outline-offset: -2px; }

  /* ---------- Combobox / Autocomplete ---------- */
  .combobox { position: relative; width: 100%; }
  .combobox-list {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    max-height: 15rem;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    overflow-y: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    scrollbar-width: thin;
  }
  .combobox-list:not([hidden]) { animation: sintez-pop var(--duration-fast) var(--ease-out); }
  .combobox-empty { padding: var(--space-2); font-size: var(--ui-md); color: var(--color-fg-muted); }
  @keyframes sintez-pop { from { opacity: 0; scale: 0.98; } }

  /* ---------- Dropzone (область для контекстного меню, загрузки файлов) ---------- */
  .dropzone {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    min-height: 9rem;
    padding: var(--space-6);
    font-size: var(--ui-md);
    line-height: 1.25rem;
    color: var(--color-fg-muted);
    text-align: center;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    user-select: none;
  }

  /* ---------- Scroll area ---------- */
  .scroll-area {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-7) transparent;
  }
  .scroll-area::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
  .scroll-area::-webkit-scrollbar-thumb { background-color: var(--gray-7); border: 2px solid transparent; border-radius: var(--radius-full); background-clip: padding-box; }

  /* ---------- Breadcrumbs ---------- */
  .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-md);
    line-height: 1.25rem;
    color: var(--color-fg-muted);
  }
  .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
  .breadcrumbs li + li::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--color-fg-subtle);
    mask: var(--icon-chevron-right) center / contain no-repeat;
  }
  .breadcrumbs a { color: inherit; text-decoration: none; transition: color var(--duration-fast); }
  .breadcrumbs a:hover { color: var(--color-fg); }
  .breadcrumbs [aria-current] { color: var(--color-fg); font-weight: var(--weight-medium); }
  @media (width < 30rem) {
    .breadcrumbs li:not(:first-child):not(:nth-last-child(-n + 2)) { display: none; }
  }

  /* ---------- Pagination ---------- */
  .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
  .page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: var(--control-sm);
    height: var(--control-sm);
    padding-inline: var(--space-2);
    font-size: var(--ui-md);
    font-variant-numeric: tabular-nums;
    color: var(--color-fg-muted);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast), color var(--duration-fast);
  }
  @media (hover: hover) { a.page:hover { background-color: var(--color-hover); color: var(--color-fg); } }
  .page-step { color: var(--color-fg); background-color: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-xs); }
  .page[aria-current="page"] { color: var(--color-fg); font-weight: var(--weight-medium); background-color: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-xs); }
  .page svg { width: 1rem; height: 1rem; }
  .page[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
  @media (width < 30rem) {
    .page-num:not([aria-current]), .page-ellipsis, .page-label { display: none; }
  }

  /* ---------- Navbar / Navigation menu ---------- */
  .navbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: saturate(1.8) blur(12px);
    -webkit-backdrop-filter: saturate(1.8) blur(12px);
    border-bottom: 1px solid var(--color-border);
  }
  .navbar-inner { display: flex; align-items: center; gap: var(--space-6); height: var(--navbar-h); }
  .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    font-size: var(--ui-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    color: var(--color-fg);
    text-decoration: none;
    white-space: nowrap;
  }
  .navbar-brand svg { width: 1.5rem; height: 1.5rem; }
  .navbar-menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-6); min-width: 0; }
  .navbar-links { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  .navbar-link, .nav-dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-sm);
    padding-inline: var(--space-3);
    font-size: var(--ui-md);
    color: var(--color-fg-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--duration-fast), background-color var(--duration-fast);
  }
  @media (hover: hover) {
    :is(.navbar-link, .nav-dropdown > summary):hover { color: var(--color-fg); background-color: var(--color-hover); }
  }
  .navbar-link[aria-current="page"], .nav-dropdown[open] > summary { color: var(--color-fg); }
  .navbar-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
  .navbar-toggle { display: none; }

  .nav-dropdown { position: relative; }
  .nav-dropdown > summary { list-style: none; user-select: none; }
  .nav-dropdown > summary::-webkit-details-marker { display: none; }
  .nav-dropdown > summary::after {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: rotate var(--duration) var(--ease-out);
  }
  .nav-dropdown[open] > summary::after { rotate: 180deg; }
  .nav-dropdown-panel {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + var(--space-2));
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
    width: 34rem;
    padding: var(--space-2);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: opacity var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out);
  }
  @starting-style { .nav-dropdown[open] .nav-dropdown-panel { opacity: 0; translate: 0 -0.25rem; } }
  .nav-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--color-fg);
    text-decoration: none;
    border-radius: calc(var(--radius-xl) - var(--space-2));
    transition: background-color var(--duration-fast);
  }
  @media (hover: hover) { .nav-card:hover { background-color: var(--color-hover); } }
  .nav-card-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--control-sm);
    height: var(--control-sm);
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .nav-card-icon svg { width: 1rem; height: 1rem; }
  .nav-card-title { display: block; font-size: var(--ui-md); font-weight: var(--weight-medium); line-height: 1.25rem; white-space: nowrap; }
  .nav-card-text { display: block; font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }

  .burger { position: relative; display: block; width: 1rem; height: 1rem; }
  .burger::before, .burger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background-color: currentColor;
    border-radius: 1px;
    transition: translate var(--duration) var(--ease-out), rotate var(--duration) var(--ease-out);
  }
  .burger::before { top: calc(50% - 3.75px); }
  .burger::after { top: calc(50% + 2.25px); }
  [aria-expanded="true"] > .burger::before { translate: 0 3px; rotate: 45deg; }
  [aria-expanded="true"] > .burger::after { translate: 0 -3px; rotate: -45deg; }

  html.nav-lock { overflow: hidden; }

  @media (width < 48rem) {
    .navbar { --navbar-h: 3.5rem; }
    .navbar-toggle { display: inline-flex; margin-inline-start: auto; }
    .navbar-menu {
      position: fixed;
      top: var(--navbar-h);
      left: 0;
      right: 0;
      height: calc(100dvh - var(--navbar-h));
      display: none;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--space-6);
      padding: var(--space-2) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
      overscroll-behavior: contain;
      background-color: var(--color-bg);
    }
    .navbar[data-open] .navbar-menu { display: flex; animation: sintez-menu-in var(--duration) var(--ease-out); }
    .navbar-links { flex-direction: column; align-items: stretch; gap: 0; }
    .navbar-link, .nav-dropdown > summary {
      justify-content: space-between;
      width: 100%;
      height: var(--control-lg);
      padding-inline: 0;
      font-size: var(--ui-lg);
      color: var(--color-fg);
      border-bottom: 1px solid var(--color-border);
      border-radius: 0;
    }
    :is(.navbar-link, .nav-dropdown > summary):hover { background-color: transparent; }
    .nav-dropdown > summary::after { width: 1rem; height: 1rem; }
    .nav-dropdown-panel {
      position: static;
      grid-template-columns: 1fr;
      width: auto;
      padding: var(--space-2) 0;
      background: none;
      border: 0;
      border-bottom: 1px solid var(--color-border);
      border-radius: 0;
      box-shadow: none;
    }
    .nav-card { padding-inline: 0; }
    .navbar-actions { flex-wrap: wrap; gap: var(--space-3); }
    .navbar-actions > * { flex: 1 1 auto; }
    .navbar-actions > .btn { --btn-h: var(--control-lg); --btn-fs: var(--ui-lg); }
    .navbar-actions > .btn-icon { flex: none; }
  }
  @keyframes sintez-menu-in { from { opacity: 0; translate: 0 -0.5rem; } }
}

/* ==========================================================================
   Blocks: композиции для лендингов и приложений
   ========================================================================== */
@layer sintez.blocks {
  .section-header { display: flex; flex-direction: column; gap: var(--space-3); max-width: 40rem; margin-bottom: var(--flow-l); }
  .split > .section-header { margin-bottom: 0; }
  .section-header.center { align-items: center; margin-inline: auto; text-align: center; }
  .section-header p { color: var(--color-fg-muted); }
  .eyebrow { font-size: var(--ui-md); font-weight: var(--weight-medium); color: var(--color-fg-muted); }

  /* Фоновые паттерны. Плитка служит маской, цвет берётся из темы,
     а второй слой маски плавно гасит узор к краям. */
  :is(.bg-grid, .bg-graph, .bg-diagonal, .bg-truchet) { position: relative; isolation: isolate; }
  :is(.bg-grid, .bg-graph, .bg-diagonal, .bg-truchet)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--pattern-color, var(--color-border-strong));
    mask-image: var(--pattern-fade, radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 100%)), var(--pattern);
    mask-size: 100% 100%, var(--pattern-size);
    mask-repeat: no-repeat, repeat;
    mask-position: center, var(--pattern-position, center top);
    mask-composite: intersect;
  }
  .bg-grid { --pattern: var(--pattern-grid); --pattern-size: 3rem 3rem; --pattern-color: var(--color-border); }
  .bg-graph { --pattern: var(--pattern-graph); --pattern-size: 12.5rem 12.5rem; }
  .bg-diagonal { --pattern: var(--pattern-diagonal); --pattern-size: 2rem 2rem; --pattern-color: var(--color-border); }
  .bg-truchet { --pattern: var(--pattern-truchet); --pattern-size: 12rem 12rem; }
  .bg-fade-center { --pattern-fade: radial-gradient(ellipse 65% 75% at 50% 50%, #000 15%, transparent 100%); }
  .bg-fade-none { --pattern-fade: linear-gradient(#000, #000); }

  /* Hero */
  .hero { padding-block: var(--flow-2xl); }
  .hero-inner { display: flex; flex-direction: column; align-items: center; gap: var(--flow-s); max-width: 50rem; margin-inline: auto; text-align: center; }
  .hero-inner .lead { max-width: 38rem; }
  .hero-inner .actions { justify-content: center; margin-top: var(--space-2); }
  .hero-split .split { align-items: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--flow-s); }
  .hero-copy .actions { margin-top: var(--space-2); }
  @media (width < 30rem) { .hero-copy .actions, .hero-inner .actions { align-self: stretch; } }

  /* Окно-макет для иллюстраций */
  .window {
    overflow: hidden;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
  .window-bar {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    height: var(--control-md);
    padding-inline: var(--space-4);
    background-color: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
  }
  .window-bar > i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background-color: var(--gray-6); }
  .window-body { padding: var(--space-5); }

  .media {
    aspect-ratio: var(--ratio, 16 / 10);
    width: 100%;
    background-color: var(--color-bg-subtle);
    background-image:
      linear-gradient(var(--color-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
    border-radius: var(--radius-lg);
  }

  /* Логотипы */
  .logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--flow-s) var(--flow-l); color: var(--color-fg-subtle); }
  .logo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step-1); font-weight: var(--weight-semibold); letter-spacing: -0.03em; white-space: nowrap; }
  .logo svg { width: 1.5rem; height: 1.5rem; }

  /* Фичи */
  .feature { display: flex; flex-direction: column; gap: var(--space-3); }
  .feature-icon {
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    color: var(--color-fg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
  }
  .feature-icon svg { width: 1.25rem; height: 1.25rem; }
  .feature-title { font-size: var(--step-0); font-weight: var(--weight-semibold); line-height: var(--leading-body); }
  .feature-text { font-size: var(--ui-md); line-height: 1.5; color: var(--color-fg-muted); }

  /* Цифры */
  .stat { display: flex; flex-direction: column; gap: var(--space-1); }
  .stat-value { font-size: var(--step-4); line-height: var(--leading-4); font-weight: var(--weight-semibold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .stat-label { font-size: var(--ui-md); line-height: 1.25rem; color: var(--color-fg-muted); }
  .stat .badge { align-self: flex-start; margin-top: var(--space-1); }
  .stat-sm .stat-value { font-size: var(--step-2); line-height: var(--leading-2); letter-spacing: -0.02em; white-space: nowrap; }
  .stat-bordered { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
  .stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

  /* Шаги */
  .steps { counter-reset: step; padding: 0; list-style: none; }
  .step { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-2); }
  .step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--ui-sm);
    font-weight: var(--weight-medium);
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
  }

  /* Цены */
  /* Тарифы на подсетке: каждая карточка занимает 4 строки общей сетки,
     поэтому заголовки, цены, кнопки и списки стоят на одной линии во всех карточках */
  .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--flow-s); }
  .pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: var(--space-5); align-content: start; }
  .pricing-card > .card-header { align-self: start; }
  .pricing-card > .price { align-self: end; }
  .pricing-card > .feature-list { padding-top: var(--space-1); }
  @media (width < 64rem) {
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .pricing-card { grid-template-rows: none; grid-row: auto; }
  }
  @media (40rem <= width < 64rem) {
    .pricing-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); }
    .pricing-card > :not(.feature-list) { grid-column: 1; }
    .pricing-card > .feature-list { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  }
  .pricing-card.featured { border-color: var(--color-fg); box-shadow: var(--shadow-md); }
  .price { display: flex; align-items: baseline; gap: var(--space-1); }
  .price-value { font-size: var(--step-4); line-height: 1; font-weight: var(--weight-semibold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .price-period { font-size: var(--ui-md); color: var(--color-fg-muted); }
  .feature-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--ui-md); line-height: 1.25rem; }
  .feature-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
  .feature-list li::before { content: ""; flex: none; width: 1rem; height: 1.25rem; background-color: var(--color-fg); mask: var(--icon-check) center / 0.875rem no-repeat; }
  .feature-list li.off { color: var(--color-fg-subtle); }
  .feature-list li.off::before { background-color: var(--color-fg-subtle); mask-image: var(--icon-minus); }

  /* Отзывы */
  .testimonial { display: flex; flex-direction: column; gap: var(--space-5); }
  .testimonial blockquote { font-size: var(--step-0); line-height: var(--leading-body); }
  .author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; font-size: var(--ui-md); line-height: 1.25rem; }
  .author-name { font-weight: var(--weight-medium); }
  .author-role { color: var(--color-fg-muted); }

  /* CTA */
  .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--flow-s);
    padding: var(--flow-xl) var(--flow-m);
    text-align: center;
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
  }
  .cta p { max-width: 36rem; color: var(--color-fg-muted); }
  .cta .actions { justify-content: center; margin-top: var(--space-2); }
  @media (width < 30rem) { .cta .actions { align-self: stretch; } }

  /* Подписка */
  .subscribe { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; max-width: 28rem; }
  .subscribe > .input { flex: 999 1 14rem; }
  .subscribe > .btn { flex: 1 0 auto; }

  .newsletter { --card-p: var(--flow-m); }
  .newsletter .subscribe { max-width: none; }

  /* Подвал */
  .footer { padding-block: var(--flow-xl) var(--flow-m); font-size: var(--ui-md); line-height: 1.25rem; border-top: 1px solid var(--color-border); }
  .footer-brand { display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-fg-muted); }
  .footer-brand > .navbar-brand { margin-block: calc((1.25rem - 1.5rem) / 2); }
  .footer-title { margin-bottom: var(--space-3); font-weight: var(--weight-medium); color: var(--color-fg); }
  .footer-links { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .footer-links a { color: var(--color-fg-muted); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast); }
  .footer-links a:hover { color: var(--color-fg); }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--flow-l);
    padding-top: var(--space-6);
    font-size: var(--ui-sm);
    color: var(--color-fg-muted);
    border-top: 1px solid var(--color-border);
  }

  /* Статьи, команда */
  .post { display: flex; flex-direction: column; }
  .post .media { max-height: 15rem; border-radius: 0; border-bottom: 1px solid var(--color-border); }
  .post-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
  .post-meta { font-size: var(--ui-sm); color: var(--color-fg-muted); }
  .post-title { font-size: var(--step-1); line-height: var(--leading-1); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
  .post-text { font-size: var(--ui-md); line-height: 1.5; color: var(--color-fg-muted); }
  .person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--color-fg);
    text-decoration: none;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
  }
  .person-body { display: flex; flex-direction: column; min-width: 0; }
  .person-name { font-size: var(--ui-md); line-height: 1.25rem; font-weight: var(--weight-medium); }
  .person-role { font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }
  .person-join { background-color: transparent; border-style: dashed; border-color: var(--color-border-strong); transition: background-color var(--duration-fast); }
  @media (hover: hover) { .person-join:hover { background-color: var(--color-bg-subtle); } }
  .person-join .avatar { background-color: transparent; border: 1px dashed var(--color-border-strong); }
  .person-join .avatar svg { width: 1.25rem; height: 1.25rem; }
  .contact-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--ui-md); line-height: 1.25rem; }
  .contact-item svg { flex: none; margin-top: 0.125rem; color: var(--color-fg-muted); }
  .task { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); font-size: var(--ui-md); line-height: 1.25rem; border-top: 1px solid var(--color-border); }
  .task:has(:checked) span { color: var(--color-fg-subtle); text-decoration: line-through; }

  /* Пустое состояние */
  .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--flow-xl) var(--flow-m); text-align: center; }
  .empty-state p { max-width: 28rem; color: var(--color-fg-muted); }
  .empty-icon { display: grid; place-items: center; width: var(--control-lg); height: var(--control-lg); margin-bottom: var(--space-2); background-color: var(--color-bg-muted); border-radius: var(--radius-xl); }
  .empty-icon svg { width: 1.5rem; height: 1.5rem; }

  /* Вход */
  .auth { display: grid; place-items: center; padding: var(--flow-xl) var(--gutter); }
  .auth-card { width: 100%; max-width: 24rem; }
  .auth-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }

  /* Оболочка приложения */
  .app-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 40rem; }
  .app-sidebar { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4); background-color: var(--color-bg-subtle); border-inline-end: 1px solid var(--color-border); }
  .app-topbar { display: none; }
  .app-nav { display: flex; flex-direction: column; gap: var(--space-0-5); }
  .app-nav-label { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--ui-xs); font-weight: var(--weight-medium); color: var(--color-fg-subtle); }
  .app-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-sm);
    padding-inline: var(--space-2);
    font-size: var(--ui-md);
    color: var(--color-fg-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast), color var(--duration-fast);
  }
  .app-nav a svg { width: 1rem; height: 1rem; flex: none; }
  @media (hover: hover) { .app-nav a:hover { background-color: var(--color-hover); color: var(--color-fg); } }
  .app-nav a[aria-current="page"] { color: var(--color-fg); font-weight: var(--weight-medium); background-color: var(--color-active); }
  .app-main { display: flex; flex-direction: column; gap: var(--flow-m); min-width: 0; padding: var(--flow-m) var(--gutter); }
  .app-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  @media (width < 48rem) {
    .app-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-height: 0; }
    .app-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3.5rem;
      padding-inline: var(--gutter);
      background-color: var(--color-bg-subtle);
      border-bottom: 1px solid var(--color-border);
    }
    .app-sidebar { display: none; padding: var(--space-2) var(--gutter) var(--space-4); border-inline-end: 0; border-bottom: 1px solid var(--color-border); }
    .app-shell[data-open] .app-sidebar { display: flex; animation: sintez-menu-in var(--duration) var(--ease-out); }
    .app-sidebar .app-brand { display: none; }
    .app-nav a { height: var(--control-md); }
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
@layer sintez.utilities {
  .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;
  }
  .text-center { text-align: center; }
  .text-muted { color: var(--color-fg-muted); }
  .text-subtle { color: var(--color-fg-subtle); }
  .text-sm { font-size: var(--ui-md); line-height: 1.25rem; }
  .text-xs { font-size: var(--ui-sm); line-height: 1.25rem; }
  .font-medium { font-weight: var(--weight-medium); }
  .mono { font-family: var(--font-mono); }
  .tabular { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }
  .w-full { width: 100%; }
  .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 30rem; } .max-w-lg { max-width: 40rem; }
  .mt-auto { margin-top: auto; }
  .ms-auto { margin-inline-start: auto; }
  .gap-1 { --gap: var(--space-1); } .gap-2 { --gap: var(--space-2); } .gap-3 { --gap: var(--space-3); }
  .gap-4 { --gap: var(--space-4); } .gap-6 { --gap: var(--space-6); } .gap-8 { --gap: var(--space-8); }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .items-start { align-items: flex-start; }
  .self-start { align-self: flex-start; }
  @media (width < 48rem) { .hide-mobile { display: none !important; } }
  @media (width >= 48rem) { .show-mobile { display: none !important; } }
}

/* ==========================================================================
   1.1: медиа, коммерция, журнальная вёрстка
   ========================================================================== */

@layer sintez.components {
  /* ---------- Photo ---------- */
  .photo {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    aspect-ratio: var(--ratio, auto);
    background-color: var(--color-bg-muted);
    border-radius: var(--photo-radius, var(--radius-lg));
  }
  .photo > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
  .photo-flush { --photo-radius: 0; }
  .photo-mono > img { filter: grayscale(1) contrast(1.04); }
  .ratio-1 { --ratio: 1; } .ratio-4-5 { --ratio: 4 / 5; } .ratio-3-4 { --ratio: 3 / 4; } .ratio-2-3 { --ratio: 2 / 3; }
  .ratio-3-2 { --ratio: 3 / 2; } .ratio-4-3 { --ratio: 4 / 3; } .ratio-16-9 { --ratio: 16 / 9; } .ratio-21-9 { --ratio: 21 / 9; }
  .figure { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; min-width: 0; }
  .caption { font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }

  /* ---------- Browser ---------- */
  .browser {
    container-type: inline-size;
    overflow: hidden;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
  .browser-bar {
    display: grid;
    grid-template-columns: 1fr minmax(0, 28rem) 1fr;
    align-items: center;
    gap: var(--space-3);
    height: 2.75rem;
    padding-inline: var(--space-4);
    background-color: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
  }
  .browser-start, .browser-end { display: flex; align-items: center; gap: var(--space-4); color: var(--color-fg-subtle); }
  .browser-end { justify-content: flex-end; }
  .browser-dots { display: flex; gap: var(--space-1-5); }
  .browser-dots > i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--gray-6); }
  .browser-nav { display: flex; gap: var(--space-2); }
  .browser-bar svg { width: 1rem; height: 1rem; flex: none; }
  .browser-address {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-width: 0;
    height: 1.75rem;
    padding-inline: var(--space-3);
    font-size: var(--ui-sm);
    color: var(--color-fg-muted);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .browser-address span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .browser-address svg { width: 0.75rem; height: 0.75rem; color: var(--color-fg-subtle); }
  .browser-body { position: relative; background-color: var(--color-bg); }
  .browser-body > .photo { --photo-radius: 0; }
  @container (width < 34rem) {
    .browser-bar { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--space-3); }
    .browser-nav, .browser-end { display: none; }
  }

  /* ---------- Carousel ---------- */
  .carousel { --slide: 100%; --carousel-gap: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .carousel-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--radius-lg);
    cursor: grab;
  }
  .carousel-viewport::-webkit-scrollbar { display: none; }
  .carousel-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .carousel-viewport:focus-visible { outline-offset: 2px; }
  .carousel-track { position: relative; display: flex; gap: var(--carousel-gap); }
  .carousel-slide { flex: 0 0 var(--slide); min-width: 0; scroll-snap-align: start; user-select: none; }
  .carousel-slide img { -webkit-user-drag: none; }
  .carousel-controls { display: flex; align-items: center; gap: var(--space-3); }
  .carousel-counter { min-width: 3.5rem; font-size: var(--ui-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
  .carousel-dots { display: flex; flex: 1; justify-content: center; gap: var(--space-1); }
  .carousel-dot { position: relative; width: 1rem; height: 1.5rem; transition: width var(--duration) var(--ease-out); }
  .carousel-dot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 0.1875rem);
    height: 0.375rem;
    border-radius: var(--radius-full);
    background-color: var(--gray-6);
    transition: background-color var(--duration);
  }
  .carousel-dot[aria-current="true"] { width: 1.75rem; }
  .carousel-dot[aria-current="true"]::before { background-color: var(--color-fg); }
  .carousel-thumbs { position: relative; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
  .carousel-thumbs::-webkit-scrollbar { display: none; }
  .carousel-thumb {
    flex: 0 0 var(--thumb-w, 4.5rem);
    aspect-ratio: var(--thumb-ratio, 1);
    overflow: hidden;
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-md);
    opacity: 0.5;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: opacity var(--duration-fast), outline-color var(--duration-fast);
  }
  .carousel-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .carousel-thumb:hover { opacity: 0.8; }
  .carousel-thumb[aria-current="true"] { opacity: 1; outline-color: var(--color-fg); }
  .carousel-thumb:focus-visible { outline-color: var(--color-focus); }

  /* ---------- Chip ---------- */
  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    flex: none;
    height: var(--control-sm);
    padding-inline: var(--space-3);
    font-size: var(--ui-md);
    color: var(--color-fg);
    white-space: nowrap;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
  }
  @media (hover: hover) { .chip:hover { border-color: var(--color-border-strong); } }
  .chip[aria-pressed="true"], .chip:has(:checked) { color: var(--color-accent-fg); background-color: var(--color-accent); border-color: var(--color-accent); }
  .chip:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .chip > input { position: absolute; opacity: 0; pointer-events: none; }
  .chip svg { width: 0.875rem; height: 0.875rem; flex: none; }
  .chip-count { font-size: var(--ui-xs); color: var(--color-fg-subtle); font-variant-numeric: tabular-nums; }
  :is(.chip[aria-pressed="true"], .chip:has(:checked)) .chip-count { color: inherit; opacity: 0.65; }
  .chip-remove {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-end: calc(-1 * var(--space-1-5));
    color: var(--color-fg-muted);
    border-radius: 50%;
  }
  .chip-remove:hover { background-color: var(--color-hover); color: var(--color-fg); }
  .chip-row { display: flex; gap: var(--space-2); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; cursor: grab; }
  .chip-row.is-dragging { cursor: grabbing; user-select: none; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ---------- Option Group: цвета и размеры ---------- */
  .option-group { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
  .option-group > legend { margin-bottom: var(--space-3); padding: 0; font-size: var(--ui-md); font-weight: var(--weight-medium); line-height: 1.25rem; }
  .option-group > legend span { font-weight: var(--weight-regular); color: var(--color-fg-muted); }
  .swatches { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  /* Кольцо выбора рисуется внутри габарита: элемент не выходит за свои границы
     и не обрезается контейнерами с overflow: clip, например раскрывающимися группами */
  .swatch {
    position: relative;
    flex: none;
    width: var(--control-md);
    height: var(--control-md);
    border-radius: 50%;
    cursor: pointer;
  }
  .swatch::before {
    content: "";
    position: absolute;
    inset: 0.25rem;
    border-radius: 50%;
    background: var(--swatch, var(--gray-6));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  }
  .swatch::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    transition: border-color var(--duration-fast);
  }
  .swatch:has(:checked)::after { border-color: var(--color-fg); }
  .swatch:has(:focus-visible)::after { border-color: var(--color-focus); }
  .swatch > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .swatch:has(:disabled) { opacity: 0.35; cursor: not-allowed; }
  .options { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--option-min, 3.5rem), 1fr)); gap: var(--space-2); }
  .option {
    position: relative;
    display: grid;
    place-items: center;
    height: var(--control-md);
    padding-inline: var(--space-2);
    font-size: var(--ui-md);
    white-space: nowrap;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  }
  @media (hover: hover) { .option:hover { border-color: var(--color-border-strong); } }
  .option > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .option:has(:checked) { border-color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-fg); }
  .option:has(:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .option:has(:disabled) { color: var(--color-fg-subtle); text-decoration: line-through; background-color: var(--color-bg-subtle); cursor: not-allowed; }

  /* ---------- Дополнения к существующим компонентам ---------- */
  .number-field-sm { height: var(--control-sm); }
  .number-field-sm .number-field-btn { width: calc(var(--control-sm) - 2px); }
  .number-field-sm .number-field-input { width: 2.75rem; }
  .check .count { margin-inline-start: auto; padding-inline-start: var(--space-3); font-size: var(--ui-sm); color: var(--color-fg-subtle); font-variant-numeric: tabular-nums; }

  /* Drawer: боковая панель на основе dialog */
  .dialog-drawer {
    --dialog-w: 24rem;
    width: min(100% - var(--space-8), var(--dialog-w));
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border-right: 0;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    opacity: 1;
    scale: 1;
    translate: 100% 0;
  }
  .dialog-drawer[open] { display: flex; flex-direction: column; translate: 0 0; }
  @starting-style { .dialog-drawer[open] { opacity: 1; scale: 1; translate: 100% 0; } }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
  .drawer-head h2 { font-size: var(--step-1); line-height: var(--leading-1); letter-spacing: -0.01em; }
  .drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-5) var(--space-5); }
  .drawer-foot { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border); }
  .drawer-foot > * { flex: 1 1 auto; }
}

@layer sintez.blocks {
  /* ---------- Hero с фото ---------- */
  .hero-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(30rem, 62vw, 48rem);
    overflow: hidden;
  }
  .hero-cover-media { position: absolute; inset: 0; z-index: -2; }
  /* Нейтральный тёмный фон: мягкое световое пятно, глубина и лёгкое плёночное зерно */
  .surface-graphite {
    background:
      radial-gradient(110% 85% at 85% 0%, #474747 0%, transparent 55%),
      radial-gradient(80% 70% at 0% 100%, #1f1f1f 0%, transparent 60%),
      linear-gradient(160deg, #2a2a2a 0%, #101010 60%, #0a0a0a 100%);
  }
  .surface-graphite::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 12rem 12rem;
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  .hero-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.25) 55%, rgb(0 0 0 / 0.1));
  }
  .hero-cover-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--flow-s); padding-block: var(--flow-xl); }
  .hero-cover-content > :is(h1, h2, .display, .lead) { max-width: 40rem; }
  @media (width < 30rem) { .hero-cover-content .actions { align-self: stretch; } }

  .hero-edge {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--container) / 2)) minmax(0, calc(var(--container) / 2)) minmax(var(--gutter), 1fr);
    align-items: center;
    min-height: clamp(30rem, 50vw, 44rem);
  }
  .hero-edge-copy { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--flow-s); padding-block: var(--flow-xl); padding-inline-end: var(--flow-l); }
  .hero-edge-media { grid-column: 3 / -1; align-self: stretch; height: 100%; min-height: 24rem; }
  @media (width < 56rem) {
    .hero-edge { grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); min-height: 0; }
    .hero-edge-media { grid-column: 1 / -1; grid-row: 1; height: auto; min-height: 0; aspect-ratio: 3 / 2; }
    .hero-edge-copy { grid-column: 2; padding: var(--flow-l) 0 var(--flow-xl); }
  }
  @media (width < 30rem) {
    .hero-edge-media { aspect-ratio: 4 / 5; }
    .hero-edge-copy .actions { align-self: stretch; }
  }

  .hero-showcase-media { position: relative; margin-top: var(--flow-xl); }
  .hero-showcase-media > .photo { --photo-radius: var(--radius-2xl); }
  .hero-float { position: absolute; left: var(--flow-m); bottom: var(--flow-m); width: min(19rem, calc(100% - 2 * var(--flow-m))); box-shadow: var(--shadow-lg); }
  @media (width < 48rem) {
    .hero-showcase-media > .photo { --ratio: 4 / 3; }
    .hero-float { position: relative; left: auto; bottom: auto; width: auto; margin: calc(-1 * var(--flow-l)) var(--space-4) 0; }
  }

  .collage { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); align-items: start; }
  .collage > :nth-child(1) { grid-row: span 2; --ratio: 3 / 5; }
  .collage > :nth-child(2) { --ratio: 1; margin-top: var(--flow-l); }
  .collage > :nth-child(3) { --ratio: 4 / 5; }
  @media (width < 64rem) {
    /* Без вертикального смещения: верх и низ кадров совпадают, большой кадр
       растягивается ровно на высоту двух соседних */
    .collage { align-items: stretch; }
    .collage > :nth-child(1) { --ratio: auto; }
    .collage > :nth-child(2) { margin-top: 0; }
  }
  @media (width < 30rem) { .collage { gap: var(--space-3); } }

  /* ---------- Каталог и карточка товара ---------- */
  .catalog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--flow-m); }
  .catalog-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .catalog-tools .select { width: auto; }
  .catalog-grid { --gap: var(--space-4); row-gap: var(--flow-m); }
  .catalog-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--flow-l); }
  .catalog-more .progress { max-width: 12rem; height: 0.25rem; }

  .product-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .product-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
  .product-media > .photo { --photo-radius: 0; }
  .product-media img { transition: scale 0.6s var(--ease-out); }
  @media (hover: hover) { .product-card:hover .product-media img { scale: 1.04; } }
  .product-badge { position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); }
  .product-fav {
    position: absolute;
    z-index: 2;
    top: var(--space-2);
    right: var(--space-2);
    --btn-bg: color-mix(in srgb, var(--color-surface) 82%, transparent);
    --btn-border: transparent;
    border-radius: 50%;
    backdrop-filter: blur(8px);
  }
  .product-fav[aria-pressed="true"] svg { fill: currentColor; }
  .product-quick {
    position: absolute;
    z-index: 2;
    left: var(--space-2);
    right: var(--space-2);
    bottom: var(--space-2);
    opacity: 0;
    translate: 0 0.5rem;
    transition: opacity var(--duration), translate var(--duration) var(--ease-out);
  }
  .product-card:is(:hover, :focus-within) .product-quick { opacity: 1; translate: 0 0; }
  @media (hover: none) { .product-quick { display: none; } }
  .product-body { display: flex; flex-direction: column; gap: var(--space-0-5); }
  .product-title { font-size: var(--ui-md); font-weight: var(--weight-medium); line-height: 1.25rem; color: var(--color-fg); text-decoration: none; }
  .product-title::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
  .product-title:focus-visible { outline: none; }
  .product-title:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 4px; }
  .product-meta { font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }
  .price-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); margin-top: var(--space-1); font-size: var(--ui-md); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
  .price-old { font-size: var(--ui-sm); font-weight: var(--weight-regular); color: var(--color-fg-subtle); }

  /* ---------- Страница товара ---------- */
  .product-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--flow-l); align-items: start; margin-top: var(--space-5); }
  .product-gallery { position: sticky; top: var(--space-4); }
  .product-gallery .carousel-dots { display: none; }
  .product-info { display: flex; flex-direction: column; gap: var(--space-6); }
  .product-info h1 { font-size: var(--step-4); line-height: var(--leading-4); }
  .product-price { font-size: var(--step-2); line-height: var(--leading-2); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
  .product-buy { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .product-buy > .number-field { height: var(--control-lg); }
  .product-buy > .number-field .number-field-btn { width: calc(var(--control-lg) - 2px); }
  .product-buy > .btn-primary { flex: 1 1 12rem; }
  .perks { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--ui-md); line-height: 1.25rem; }
  .perks li { display: flex; gap: var(--space-3); align-items: flex-start; }
  .perks svg { flex: none; margin-top: 0.125rem; color: var(--color-fg-muted); }
  @media (width < 56rem) {
    .product-layout { grid-template-columns: minmax(0, 1fr); }
    .product-gallery { position: static; }
  }
  @media (width < 48rem) {
    .product-gallery .carousel-thumbs { display: none; }
    .product-gallery .carousel-dots { display: flex; }
  }

  /* ---------- Фильтры ---------- */
  .filter-bar { display: flex; flex-direction: column; gap: var(--space-3); }
  .filter-bar-tools { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .filter-bar-tools > :is(.chip-row, .chip-wrap) { flex: 1; min-width: 0; }
  .filter-bar-tools > .select { width: auto; flex: none; }
  .filter-pop { width: min(18rem, calc(100vw - var(--space-4))); }
  .filter-pop .form { gap: var(--space-4); }
  .filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--ui-md); }
  .filter-summary > .text-muted { margin-inline-end: var(--space-2); }
  @media (width < 30rem) {
    .filter-bar-tools { flex-direction: column; align-items: stretch; }
    .filter-bar-tools > .select { width: 100%; }
  }

  .range-inputs { display: flex; align-items: center; gap: var(--space-2); }
  .range-inputs > .input-group { flex: 1; min-width: 0; padding-inline: var(--space-2); }
  .range-inputs input { appearance: textfield; -moz-appearance: textfield; }
  .range-inputs input::-webkit-inner-spin-button, .range-inputs input::-webkit-outer-spin-button { margin: 0; appearance: none; }

  .filter-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--flow-l); align-items: start; }
  .filter-results { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
  .filter-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .filter-results-head .select { width: auto; }
  .filter-group { border-bottom: 1px solid var(--color-border); }
  .filter-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--control-md);
    font-size: var(--ui-md);
    font-weight: var(--weight-medium);
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .filter-group > summary::-webkit-details-marker { display: none; }
  .filter-group > summary::after {
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: var(--color-fg-muted);
    mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: rotate var(--duration) var(--ease-out);
  }
  .filter-group[open] > summary::after { rotate: 180deg; }
  .filter-group-body { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); }
  .filter-group-body .check { display: flex; }
  .filter-group::details-content { block-size: 0; overflow: clip; transition: block-size var(--duration-slow) var(--ease-out), content-visibility var(--duration-slow) allow-discrete; }
  .filter-group[open]::details-content { block-size: auto; }
  .filter-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); font-size: var(--ui-md); }

  /* На десктопе панель фильтров стоит в колонке, на телефоне это выезжающая панель */
  @media (width >= 48rem) {
    .dialog.filter-panel {
      position: sticky;
      top: var(--space-4);
      inset: auto;
      display: flex;
      flex-direction: column;
      width: auto;
      height: auto;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: visible;
      color: inherit;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      opacity: 1;
      scale: 1;
      translate: none;
    }
    .filter-panel .drawer-head { padding: 0 0 var(--space-2); border-bottom: 1px solid var(--color-border); }
    .filter-panel .drawer-body { padding: 0; overflow: visible; }
    .filter-panel .drawer-foot, .filter-panel .dialog-close-mobile { display: none; }
  }
  @media (width < 48rem) {
    .filter-layout { grid-template-columns: minmax(0, 1fr); }
    .filter-panel .drawer-head .btn-reset-desktop { display: none; }
  }

  .filter-compact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .filter-compact > .input-group { flex: 1 1 16rem; }
  .filter-compact > .tabs { flex: 0 1 auto; min-width: 0; }

  /* ---------- Корзина ---------- */
  .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--flow-l); align-items: start; }
  .cart-list { margin: 0; padding: 0; list-style: none; }
  .cart-item {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    transition: opacity var(--duration), translate var(--duration) var(--ease-out);
  }
  .cart-item.is-removing { opacity: 0; translate: -0.5rem 0; }
  .cart-info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .cart-title { font-size: var(--ui-md); font-weight: var(--weight-medium); line-height: 1.25rem; color: var(--color-fg); text-decoration: none; }
  .cart-variant { font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }
  .cart-controls { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
  .cart-price { font-size: var(--ui-md); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .order-summary { position: sticky; top: var(--space-4); gap: var(--space-4); }
  .summary-rows { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--ui-md); line-height: 1.25rem; }
  .summary-row { display: flex; justify-content: space-between; gap: var(--space-4); }
  .summary-row > :last-child { font-variant-numeric: tabular-nums; }
  .summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--step-1); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
  .promo { display: flex; gap: var(--space-2); }
  .promo > .input { flex: 1; }
  .pay-brands { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .pay-brand { display: inline-grid; place-items: center; height: 1.5rem; padding-inline: var(--space-2); font-size: var(--ui-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--color-fg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
  @media (width < 64rem) {
    .cart-layout { grid-template-columns: minmax(0, 1fr); }
    .order-summary { position: static; }
  }
  @media (width < 30rem) {
    .cart-item { grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-3); }
  }

  /* ---------- Оплата картой ---------- */
  .checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--flow-l); align-items: start; }
  .checkout-aside { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
  @media (width < 56rem) {
    .checkout { grid-template-columns: minmax(0, 1fr); }
    .checkout-aside { position: static; align-items: center; }
  }
  .pay-card {
    --card-bg: linear-gradient(135deg, #3b3b3b, #121212);
    container-type: inline-size;
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 1.586;
    perspective: 1200px;
  }
  .pay-card[data-brand="mir"] { --card-bg: linear-gradient(135deg, #36433b, #121815); }
  .pay-card[data-brand="visa"] { --card-bg: linear-gradient(135deg, #2e3547, #0f121b); }
  .pay-card[data-brand="mastercard"] { --card-bg: linear-gradient(135deg, #42362a, #16120d); }
  .pay-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s var(--ease-out); }
  .pay-card.is-flipped .pay-card-inner { transform: rotateY(180deg); }
  .pay-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7cqi;
    overflow: hidden;
    color: #f4f4f4;
    background: var(--card-bg);
    border-radius: 4.5cqi;
    box-shadow: 0 1.5rem 3rem -1.25rem rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.1);
    backface-visibility: hidden;
    transition: background 0.4s;
  }
  .pay-card-face::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / 0.16), transparent 60%); pointer-events: none; }
  .pay-card-back { justify-content: flex-start; gap: 6cqi; padding: 8cqi 0 0; transform: rotateY(180deg); }
  .pay-card-top { display: flex; align-items: center; justify-content: space-between; }
  .pay-card-chip { width: 12cqi; aspect-ratio: 1.3; border-radius: 1.6cqi; background: linear-gradient(135deg, #e2dccf, #9c9481); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
  .pay-card-brand { font-size: 5cqi; font-weight: 700; letter-spacing: 0.08em; }
  .pay-card-number { font-family: var(--font-mono); font-size: 6.2cqi; letter-spacing: 0.06em; white-space: nowrap; }
  .pay-card-bottom { display: flex; justify-content: space-between; gap: 4cqi; font-size: 3.8cqi; letter-spacing: 0.06em; text-transform: uppercase; }
  .pay-card-bottom > div { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }
  .pay-card-bottom > div > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pay-card-label { font-size: 2.8cqi; letter-spacing: 0.1em; opacity: 0.6; }
  .pay-card-stripe { height: 17cqi; background: #050505; }
  .pay-card-cvc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: 7cqi;
    padding: 2.5cqi 3.5cqi;
    font-family: var(--font-mono);
    font-size: 4.4cqi;
    color: #151515;
    background: #f2f0ea;
    border-radius: 1.2cqi;
  }
  .pay-card-cvc .pay-card-label { opacity: 0.55; }
  .pay-note { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--ui-sm); line-height: 1.25rem; color: var(--color-fg-muted); }
  .pay-note svg { flex: none; margin-top: 0.125rem; }
  .card-brand-badge { margin-inline-start: auto; flex: none; }
  .checkout-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); width: 100%; max-width: 22rem; font-size: var(--ui-md); }
  .checkout-total strong { font-size: var(--step-2); font-variant-numeric: tabular-nums; }

  /* Лукбук: карусель с подглядыванием следующего кадра */
  .lookbook .carousel { --slide: clamp(15rem, 38vw, 26rem); --carousel-gap: var(--flow-s); }
  /* Лента начинается по линии контейнера и уходит за правый край экрана */
  .lookbook .carousel-viewport {
    --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
    padding-inline: var(--edge);
    scroll-padding-inline: var(--edge);
    border-radius: 0;
  }
  .caption-num { margin-inline-end: var(--space-2); font-weight: var(--weight-medium); color: var(--color-fg); font-variant-numeric: tabular-nums; }
  .lookbook-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--flow-m); }
  .lookbook .carousel-controls { justify-content: flex-end; }
  @media (width < 30rem) { .lookbook .carousel { --slide: 78%; } }

  .gallery-block .carousel-slide .photo { --photo-radius: var(--radius-lg); }
  .gallery-block > .container { --container: 64rem; }
}


@layer sintez.tokens {
  :root {
    --pattern-graph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0.5 0V200M0 0.5H200' stroke-opacity='1'/%3E%3Cpath d='M40.5 0V200M0 40.5H200' stroke-opacity='0.5'/%3E%3Cpath d='M80.5 0V200M0 80.5H200' stroke-opacity='0.5'/%3E%3Cpath d='M120.5 0V200M0 120.5H200' stroke-opacity='0.5'/%3E%3Cpath d='M160.5 0V200M0 160.5H200' stroke-opacity='0.5'/%3E%3C/svg%3E");
    --pattern-diagonal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 0L32 32M32 0L0 32'/%3E%3C/svg%3E");
    --pattern-truchet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='square'%3E%3Cpath d='M0 0l24 24M24 0l24 24M72 0l-24 24M72 0l24 24M120 0l-24 24M120 0l24 24M144 0l24 24M192 0l-24 24M0 24l24 24M24 24l24 24M48 24l24 24M72 24l24 24M96 24l24 24M144 24l-24 24M144 24l24 24M168 24l24 24M24 48l-24 24M48 48l-24 24M72 48l-24 24M72 48l24 24M120 48l-24 24M120 48l24 24M168 48l-24 24M168 48l24 24M0 72l24 24M24 72l24 24M48 72l24 24M96 72l-24 24M96 72l24 24M144 72l-24 24M168 72l-24 24M168 72l24 24M24 96l-24 24M24 96l24 24M48 96l24 24M72 96l24 24M120 96l-24 24M120 96l24 24M144 96l24 24M192 96l-24 24M0 120l24 24M24 120l24 24M72 120l-24 24M96 120l-24 24M96 120l24 24M144 120l-24 24M168 120l-24 24M192 120l-24 24M24 144l-24 24M24 144l24 24M72 144l-24 24M72 144l24 24M96 144l24 24M144 144l-24 24M144 144l24 24M168 144l24 24M0 168l24 24M48 168l-24 24M72 168l-24 24M96 168l-24 24M120 168l-24 24M120 168l24 24M168 168l-24 24M192 168l-24 24'/%3E%3C/svg%3E");
    --pattern-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0.5 0V48M0 0.5H48'/%3E%3C/svg%3E");
  }
}

@layer sintez.components {
  .rating { display: inline-flex; align-items: center; gap: 2px; color: var(--color-fg); }
  .rating svg { width: 0.875rem; height: 0.875rem; fill: currentColor; stroke: none; }
  .rating .off { color: var(--gray-6); }
}

@layer sintez.blocks {
  /* Крупная цитата: одна мысль на весь экран */
  .quote-statement { display: flex; flex-direction: column; align-items: center; gap: var(--flow-m); max-width: 52rem; margin-inline: auto; text-align: center; }
  .quote-mark { width: var(--control-lg); height: var(--control-lg); color: var(--color-fg-subtle); }
  .quote-mark svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
  .quote-statement blockquote { font-size: var(--step-3); line-height: var(--leading-3); font-weight: var(--weight-medium); letter-spacing: -0.02em; text-wrap: balance; }
  .quote-statement .author { flex-direction: column; gap: var(--space-2); }
  .quote-statement .logo { font-size: var(--step-0); color: var(--color-fg-subtle); }

  /* Цитата с фото и цифрами */
  .quote-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .quote-feature-media { --photo-radius: 0; height: 100%; min-height: 22rem; }
  .quote-feature-body { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--flow-l); }
  .quote-text { font-size: var(--step-1); line-height: var(--leading-lead); color: var(--color-fg); text-wrap: pretty; }
  .quote-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .quote-stats .stat { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
  @media (width < 56rem) {
    .quote-feature { grid-template-columns: minmax(0, 1fr); }
    .quote-feature-media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
    .quote-feature-body { padding: var(--flow-m) var(--card-p) var(--card-p); }
  }
  @media (width < 30rem) {
    .quote-stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .quote-stats .stat { flex-direction: row; align-items: baseline; justify-content: space-between; padding-block: var(--space-3); }
  }

  /* Стена отзывов: многоколоночная раскладка без медиазапросов,
     не больше трёх колонок и не уже 17rem каждая */
  .quote-wall { columns: 3 17rem; column-gap: var(--space-4); }
  .quote-wall > * { width: 100%; margin-bottom: var(--space-4); break-inside: avoid; }
  .quote-card { gap: var(--space-4); }
  .quote-card blockquote { font-size: var(--ui-md); line-height: 1.6; color: var(--color-fg); }
  .quote-card .author { margin-top: 0; }
  .quote-wall-foot { display: flex; justify-content: center; margin-top: var(--space-4); }
}

@layer sintez.tokens {
  :root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); }
}