/* Копия src/design/primitives.css с коммита bd5eae10 (08.10.2026) для прототипа калькулятора — не править, обновлять копированием. */
/* ============================================================================
   primitives.css — примитивы дизайн-системы (слой 2).
   ----------------------------------------------------------------------------
   Зависит только от tokens.css. Не знает про конкретные экраны.
   Все классы начинаются с `ui-`. Компонент либо вешает эти классы,
   либо настраивает их переменные (--lift-*, --btn-*, --pill-*), но не
   рисует объём, форму и цвет сам.

   ЗАКОН ОБЪЁМА — три режима, четвёртого нет:
     A. плоский            — только линия 1px или заливка, без тени и света;
     B. блик без линии     — свет по кромке + тень (действие на своём фоне);
     C. блик с линией      — волосяная линия, гаснущая в освещённых углах,
                             + тень (карточки, панели, вторичные кнопки).
   ============================================================================ */

/* ============================================================================
   0. БАЗА
   ============================================================================ */
:root {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-backdrop);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--type-ui-tracking);
}

::selection { background: var(--surface-focus); }

/* Голое поле ввода не рисует ни фона, ни рамки, ни углов: форму рисует только
   примитив .ui-field (или .ui-field-compound вокруг ввода). Иначе внутри поля
   проступает белая плашка браузера с прямыми углами (TASK-206.12). :where —
   нулевая специфичность, любой класс сильнее. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select) {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* ============================================================================
   0b. РАЗМЕР И ВЛОЖЕННОСТЬ (TASK-206.11, sessions/138…/система-ui_v1.md)
   ----------------------------------------------------------------------------
   Размер — одна ручка. Контрол (кнопка, иконка, сегмент, чип, поле) берёт
   высоту, кегль, отступ сбоку, значок и промежуток из --ctl-*. По умолчанию
   md; .ui-size-* на контейнере задаёт размер всему внутри, на элементе — ему.
   Числа шкалы — в tokens.css (--size-*).

   Вложенность — концентрично. Контейнер публикует --nest-r: радиус для детей
   у его края. Плотный (отступ меньше радиуса: меню, сайдбар, капсула, трек
   сегментов) — свой радиус минус отступ; свободный (окно, карточка, страница)
   и холст — капсула. Кнопка, иконка, сегмент, чип скругляются var(--nest-r):
   на холсте это капсула и круг, в меню — как строки меню.
   ============================================================================ */
:root,
.ui-size-md {
  --ctl-h: var(--size-md-h);
  --ctl-fs: var(--size-md-fs);
  --ctl-px: var(--size-md-px);
  --ctl-icon: var(--size-md-icon);
  --ctl-gap: var(--size-md-gap);
}
.ui-size-xs {
  --ctl-h: var(--size-xs-h);
  --ctl-fs: var(--size-xs-fs);
  --ctl-px: var(--size-xs-px);
  --ctl-icon: var(--size-xs-icon);
  --ctl-gap: var(--size-xs-gap);
}
.ui-size-sm,
.ui-btn-sm {
  --ctl-h: var(--size-sm-h);
  --ctl-fs: var(--size-sm-fs);
  --ctl-px: var(--size-sm-px);
  --ctl-icon: var(--size-sm-icon);
  --ctl-gap: var(--size-sm-gap);
}
.ui-size-lg,
.ui-btn-lg {
  --ctl-h: var(--size-lg-h);
  --ctl-fs: var(--size-lg-fs);
  --ctl-px: var(--size-lg-px);
  --ctl-icon: var(--size-lg-icon);
  --ctl-gap: var(--size-lg-gap);
}
/* плотная панель под палец: на компьютере свой размер (sm), на телефоне — lg, как строки меню */
@media (max-width: 768px) {
  .ui-size-touch {
    --ctl-h: var(--size-lg-h);
    --ctl-fs: var(--size-lg-fs);
    --ctl-px: var(--size-lg-px);
    --ctl-icon: var(--size-lg-icon);
    --ctl-gap: var(--size-lg-gap);
  }
}

/* холст и свободные контейнеры: детям у края ничего не мешает — капсула */
:root { --nest-r: var(--r-pill); }
/* плотные: строки и кнопки у края идут параллельно углу */
.ui-surface-popover { --nest-r: calc(var(--r-popover) - var(--popover-inset)); }

/* ============================================================================
   1. .ui-lift — ЕДИНЫЙ ПРИМИТИВ ОБЪЁМА
   ----------------------------------------------------------------------------
   Свет рисуется без псевдоэлементов: прозрачная рамка толщиной --lift-t
   показывает слои border-box — два радиальных пятна света в углах поверх
   цвета кромки. Внутренность закрашена фоном (padding-box). Поэтому детям
   не нужен z-index, а абсолютное позиционирование внутри не ломается.

   Переменные (переопределяй в компоненте, не переписывай физику):
     --lift-bg     фон
     --lift-edge   цвет кромки вне света (линия для C, фон для B)
     --lift-blik   цвет света
     --lift-t      толщина кромки
     --lift-r      радиус
     --lift-elev   тень
     --lift-spot-x / --lift-spot-y  размер пятна света
   ============================================================================ */
.ui-lift {
  --lift-bg: var(--surface-1);
  --lift-edge: var(--line);
  --lift-blik: var(--blik);
  --lift-t: var(--blik-t);
  --lift-r: var(--r-card);
  --lift-elev: var(--elev-card);
  --lift-spot-x: var(--blik-spot);
  --lift-spot-y: var(--blik-spot);
  border: var(--lift-t) solid transparent;
  border-radius: var(--lift-r);
  background:
    linear-gradient(var(--lift-bg), var(--lift-bg)) padding-box,
    radial-gradient(var(--lift-spot-x) var(--lift-spot-y) at 0% 0%, var(--lift-blik), transparent 85%) border-box,
    radial-gradient(var(--lift-spot-x) var(--lift-spot-y) at 100% 100%, var(--lift-blik), transparent 85%) border-box,
    linear-gradient(var(--lift-edge), var(--lift-edge)) border-box;
  box-shadow: var(--lift-elev);
}

/* роли поверхности */
.ui-surface-popover { --lift-r: var(--r-popover); --lift-elev: var(--elev-raised); }
.ui-surface-panel { --lift-r: var(--r-panel); --lift-elev: var(--elev-panel); }

/* ============================================================================
   1b. .ui-float — ПЛАВАЮЩАЯ ПАНЕЛЬ поверх основной
   ----------------------------------------------------------------------------
   Сайдбар, боковая карточка записи и любая будущая панель, которая
   «нависает» над страницей: страница продолжается под ней. Положение задаёт
   раскладка, здесь — только вид. -glass: полупрозрачное стекло с размытием,
   сквозь которое видно уходящий под панель контент.
   ============================================================================ */
/* слои снаружи внутрь: тень → тонкий тёмный контур → белая кромка → фон */
.ui-float {
  border: var(--hairline) solid var(--edge-float);
  border-radius: var(--r-shell);
  background: var(--surface-canvas);
  box-shadow: var(--rim), var(--elev-float);
}
.ui-float-glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}


/* ============================================================================
   3. ТИПОГРАФИКА
   ============================================================================ */
.ui-overline {
  color: var(--text-tertiary);
  font-size: var(--type-overline-size);
  line-height: var(--type-overline-line);
  font-weight: 700;
  letter-spacing: var(--type-overline-tracking);
  text-transform: uppercase;
}
.ui-display {
  font-weight: 800;
  letter-spacing: var(--type-display-tracking);
  line-height: 1.08;
}
.ui-display i,
.ui-display em { font-weight: 600; font-style: italic; letter-spacing: var(--type-heading-tracking); }
.ui-caption { color: var(--text-secondary); font-size: var(--type-caption-size); line-height: var(--type-caption-line); }

/* ============================================================================
   4. КНОПКИ — один набор на всё приложение (TASK-206.04)
   ----------------------------------------------------------------------------
   Других кнопок с текстом нет: место выбирает вариант и размер, свой вид
   кнопке не задаёт (проверяет check:style). Форма — капсула, как у строки
   инструментов.
   primary   — главное действие окна или карточки: заливка fill;
   secondary — второе действие рядом с главным («Отмена»): мягкая подложка
               без рамки — серая рамка на белом читалась устаревшей;
   quiet     — действие в строке, тулбаре, меню: прозрачная, подложка по наведению;
   ghost     — ссылка-действие цвета акцента;
   dark      — тёмная заливка.
   Оттенок danger — разрушительное действие: с primary — красная заливка,
   с остальными — красный текст. Размер — из шкалы (раздел 0b): .ui-btn-sm и
   .ui-btn-lg — то же, что .ui-size-sm и .ui-size-lg; форма — var(--nest-r).
   ============================================================================ */
.ui-btn {
  --btn-bg: transparent;
  --btn-bg-hover: var(--surface-hover);
  --btn-bg-active: var(--surface-pressed);
  --btn-fg: var(--text-primary);
  --btn-elev: none;
  height: var(--ctl-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ctl-gap);
  flex: none;
  padding: 0 var(--ctl-px);
  border: 0;
  border-radius: var(--nest-r);
  background: var(--btn-bg);
  box-shadow: var(--btn-elev);
  color: var(--btn-fg);
  font: 600 var(--ctl-fs) / 1 var(--font-sans);
  letter-spacing: var(--type-ui-tracking);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.ui-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--btn-bg-hover); }
.ui-btn:active:not(:disabled, [aria-disabled="true"]) { background: var(--btn-bg-active); transform: scale(0.98); }
.ui-btn:focus-visible { outline: 0; box-shadow: var(--btn-elev), var(--focus-halo); }

.ui-btn-primary {
  --btn-bg: var(--fill);
  --btn-bg-hover: var(--fill-hover);
  --btn-bg-active: var(--fill-active);
  --btn-fg: var(--fill-on);
  --btn-elev: var(--elev-btn);
}
.ui-btn-secondary {
  --btn-bg: var(--surface-btn);
  --btn-bg-hover: var(--surface-btn-hover);
}
.ui-btn > :is(svg, .ui-icon) { width: var(--ctl-icon); height: var(--ctl-icon); }
/* тихие без подложки: текст ближе к краю, чтобы на одной линии с соседними подписями */
.ui-btn-quiet { --btn-fg: var(--text-secondary); padding: 0 calc(var(--ctl-px) - var(--space-1)); font-weight: 500; }
.ui-btn-quiet:hover:not(:disabled) { color: var(--text-primary); }
.ui-btn-quiet:is([aria-pressed="true"], [aria-expanded="true"]) { --btn-bg: var(--surface-selected); color: var(--text-primary); }
.ui-btn-ghost { --btn-fg: var(--accent); --btn-bg-hover: var(--accent-soft); padding: 0 calc(var(--ctl-px) - var(--space-1)); }
.ui-btn-danger { --btn-fg: var(--text-danger); --btn-bg-hover: var(--surface-danger-hover); }
.ui-btn-primary.ui-btn-danger {
  --btn-bg: var(--fill-danger);
  --btn-bg-hover: var(--fill-danger-hover);
  --btn-bg-active: var(--fill-danger-hover);
  --btn-fg: var(--fill-on);
}

.ui-btn-block { width: 100%; }

/* отключено: форма та же, свет и нажатие сняты */
.ui-btn:is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  opacity: 0.45;
  transform: none;
  cursor: not-allowed;
}

/* ============================================================================
   5. ИКОНОЧНАЯ КНОПКА — режим A: квадрат в высоту размера, форма var(--nest-r)
   (на холсте круг)
   ============================================================================ */
.ui-icon-btn {
  width: var(--ctl-h);
  height: var(--ctl-h);
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--nest-r);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.ui-icon-btn > :is(svg, .ui-icon) { width: var(--ctl-icon); height: var(--ctl-icon); }
.ui-icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.ui-icon-btn[aria-pressed="true"],
.ui-icon-btn[aria-expanded="true"] { background: var(--surface-selected); color: var(--text-primary); }
.ui-icon-btn:disabled { opacity: 0.3; cursor: default; }
/* -sm — то же, что .ui-size-xs: действие в строке */
.ui-icon-btn-sm {
  --ctl-h: var(--size-xs-h);
  --ctl-icon: var(--size-xs-icon);
}

/* Стеклянная капсула панелей: общий вид поля поиска и кнопок сайдбара.
   Внутри стеклянной панели своё размытие не нужно — поверхность и кромка
   те же, что у капсул строки инструментов. Раскладку содержимого задаёт компонент. */
.ui-capsule {
  height: var(--capsule-h, var(--toolbar-control-h));
  border: var(--hairline) solid var(--edge-capsule);
  --nest-r: var(--r-pill);
  border-radius: var(--capsule-r, var(--r-pill));
  background: var(--surface-glass);
  box-shadow: var(--rim), var(--glass-shade), var(--elev-capsule);
  color: var(--text-primary);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-line);
  font-weight: 500;
}
.ui-capsule:hover:not(:disabled),
.ui-capsule[aria-expanded="true"] { background: var(--surface-raised); border-color: var(--line-hover); }
.ui-capsule:focus-within { box-shadow: var(--rim), var(--focus-halo); }
.ui-capsule:focus-visible { outline: 0; }

/* Аватар пространства — тот же элемент, что в его настройках. */
.ui-avatar {
  overflow: hidden;
  width: var(--avatar-size, var(--control-h));
  height: var(--avatar-size, var(--control-h));
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--avatar-r, var(--r-control));
  /* инициалы — мягкая акцентная заливка, как у аккаунтов на входе: в тёмной теме не светлая плитка */
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 var(--hairline) var(--accent-edge);
  color: var(--accent);
  font-size: var(--type-caption-size);
  font-weight: 700;
}

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

/* ============================================================================
   6. ИКОНКА — размер и толщина линии только из шкалы
   ============================================================================ */
.ui-icon { flex: none; stroke-width: var(--icon-stroke); }

/* ============================================================================
   7. ПИЛЮЛЯ — режим A: пастельная заливка + цветная обводка
   ----------------------------------------------------------------------------
   Цвет задаётся data-color="blue|green|…" и берётся из контентной палитры.
   ============================================================================ */
.ui-pill {
  --pill-bg: var(--color-default-pill);
  --pill-text: var(--color-default-pill-text);
  --pill-edge: var(--color-default-edge);
  max-width: 100%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: var(--r-chip);
  background: var(--pill-bg);
  box-shadow: inset 0 0 0 1px var(--pill-edge);
  color: var(--pill-text);
  font-size: var(--type-tag-size);
  line-height: var(--type-tag-line);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-color="gray"]   { --pill-bg: var(--color-gray-pill);   --pill-text: var(--color-gray-pill-text);   --pill-edge: var(--color-gray-edge);   --pill-dot: var(--color-gray-dot); }
[data-color="brown"]  { --pill-bg: var(--color-brown-pill);  --pill-text: var(--color-brown-pill-text);  --pill-edge: var(--color-brown-edge);  --pill-dot: var(--color-brown-dot); }
[data-color="orange"] { --pill-bg: var(--color-orange-pill); --pill-text: var(--color-orange-pill-text); --pill-edge: var(--color-orange-edge); --pill-dot: var(--color-orange-dot); }
[data-color="yellow"] { --pill-bg: var(--color-yellow-pill); --pill-text: var(--color-yellow-pill-text); --pill-edge: var(--color-yellow-edge); --pill-dot: var(--color-yellow-dot); }
[data-color="green"]  { --pill-bg: var(--color-green-pill);  --pill-text: var(--color-green-pill-text);  --pill-edge: var(--color-green-edge);  --pill-dot: var(--color-green-dot); }
[data-color="blue"]   { --pill-bg: var(--color-blue-pill);   --pill-text: var(--color-blue-pill-text);   --pill-edge: var(--color-blue-edge);   --pill-dot: var(--color-blue-dot); }
[data-color="purple"] { --pill-bg: var(--color-purple-pill); --pill-text: var(--color-purple-pill-text); --pill-edge: var(--color-purple-edge); --pill-dot: var(--color-purple-dot); }
[data-color="pink"]   { --pill-bg: var(--color-pink-pill);   --pill-text: var(--color-pink-pill-text);   --pill-edge: var(--color-pink-edge);   --pill-dot: var(--color-pink-dot); }
[data-color="red"]    { --pill-bg: var(--color-red-pill);    --pill-text: var(--color-red-pill-text);    --pill-edge: var(--color-red-edge);    --pill-dot: var(--color-red-dot); }

/* чип-фильтр — A, активный = тёмная заливка; размер и форма — как у кнопки */
.ui-chip {
  height: var(--ctl-h);
  display: inline-flex;
  align-items: center;
  gap: var(--ctl-gap);
  padding: 0 var(--ctl-px);
  border: 0;
  border-radius: var(--nest-r);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-secondary);
  font: 500 var(--ctl-fs) / 1 var(--font-sans);
  cursor: pointer;
}
.ui-chip:hover { background: var(--surface-2); color: var(--text-primary); }
.ui-chip[aria-pressed="true"],
.ui-chip.is-active { background: var(--surface-inverse); color: var(--text-inverse); box-shadow: none; }

/* Сегменты — выбор одного из нескольких: трек — форма размера контекста
   (на холсте капсула), сегменты на отступе --seg-inset концентричны треку,
   выбранный — капля текущего места, как активная вкладка (TASK-206.11).
   .ui-segmented-block — во всю ширину, сегменты поровну. */
.ui-segmented {
  --seg-inset: 2px;
  height: var(--ctl-h);
  display: inline-flex;
  align-items: stretch;
  flex: none;
  padding: var(--seg-inset);
  border-radius: var(--nest-r);
  background: var(--surface-btn);
}
.ui-segmented > button {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ctl-gap);
  padding: 0 calc(var(--ctl-px) - var(--seg-inset));
  border: 0;
  border-radius: max(0px, calc(var(--nest-r) - var(--seg-inset)));
  background: transparent;
  color: var(--text-secondary);
  font: 500 var(--ctl-fs) / 1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.ui-segmented > button:hover:not(:disabled) { color: var(--text-primary); }
.ui-segmented > button:is([aria-pressed="true"], [aria-checked="true"]) {
  background: var(--surface-current);
  box-shadow: 0 0 0 var(--hairline) var(--edge-current), var(--elev-current);
  color: var(--text-current);
}
.ui-segmented > button:focus-visible { outline: 0; box-shadow: var(--focus-halo); }
.ui-segmented > button:disabled { opacity: 0.45; cursor: default; }
.ui-segmented-block { display: flex; width: 100%; }
.ui-segmented-block > button { flex: 1 1 0; min-width: 0; }

/* ============================================================================
   8. SEVERITY — цвет + форма значка + текст
   ============================================================================ */
.ui-sev {
  --sev: var(--text-secondary);
  --sev-soft: var(--surface-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--r-chip);
  background: var(--sev-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sev) 28%, transparent);
  color: var(--sev);
  font-size: var(--type-tag-size);
  font-weight: 600;
}
.ui-sev[data-sev="critical"] { --sev: var(--sev-critical); --sev-soft: var(--sev-critical-soft); }
.ui-sev[data-sev="serious"]  { --sev: var(--sev-serious);  --sev-soft: var(--sev-serious-soft); }
.ui-sev[data-sev="warning"]  { --sev: var(--sev-warning);  --sev-soft: var(--sev-warning-soft); }
.ui-sev[data-sev="good"]     { --sev: var(--sev-good);     --sev-soft: var(--sev-good-soft); }
.ui-sev[data-sev="info"]     { --sev: var(--accent);       --sev-soft: var(--accent-soft); }

/* ============================================================================
   9. ПОЛЯ ВВОДА — утопленные
   ============================================================================ */
.ui-field {
  width: 100%;
  height: var(--ctl-h);
  padding: 0 calc(var(--ctl-px) - 3px);
  border: 0;
  border-radius: min(var(--r-control), var(--nest-r));
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--text-primary);
  font-size: var(--type-data-size);
  line-height: var(--type-data-line);
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea.ui-field { height: auto; min-height: 72px; padding: 8px calc(var(--ctl-px) - 3px); resize: vertical; }
/* Составное поле: значок + ввод + действие. Форму рисует обёртка
   (class="ui-field ui-field-compound"), ввод внутри голый, действие —
   иконочная кнопка, концентричная полю: высота и радиус минус отступ. */
.ui-field-compound {
  --field-inset: 3px;
  display: flex;
  align-items: center;
  gap: var(--ctl-gap);
  padding: 0 var(--field-inset) 0 calc(var(--ctl-px) - 3px);
}
.ui-field-compound > :is(input, select) { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; outline: 0; }
.ui-field-compound > :is(input, select):focus-visible { outline: 0; } /* фокус рисует обёртка, не общий контур ввода */
.ui-field-compound > :is(svg, .ui-icon) { flex: none; width: var(--ctl-icon); height: var(--ctl-icon); color: var(--text-tertiary); }
.ui-field-compound > .ui-icon-btn {
  width: calc(var(--ctl-h) - 2 * var(--field-inset));
  height: calc(var(--ctl-h) - 2 * var(--field-inset));
  border-radius: calc(min(var(--r-control), var(--nest-r)) - var(--field-inset));
}
.ui-field-compound:focus-within {
  background: var(--surface-canvas);
  box-shadow: inset 0 0 0 1px var(--accent-edge), 0 0 0 3px var(--surface-focus);
}
.ui-field::placeholder { color: var(--text-tertiary); }
.ui-field:hover { box-shadow: inset 0 0 0 1px var(--line); }
.ui-field:focus,
.ui-field:focus-visible {
  outline: 0;
  background: var(--surface-canvas);
  box-shadow: inset 0 0 0 1px var(--accent-edge), 0 0 0 3px var(--surface-focus);
}
.ui-field[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--sev-critical); }
.ui-label {
  display: grid;
  gap: 6px;
  color: var(--text-strong);
  font-size: var(--type-tag-size);
  line-height: var(--type-tag-line);
  font-weight: 600;
}

/* ============================================================================
   10. ПЕРЕКЛЮЧАТЕЛЬ и ЧЕКБОКС — включённое = заливка fill со светом
   ============================================================================ */
.ui-switch {
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-pressed);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.ui-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  /* бегунок белый в обеих темах, как у переключателя в меню (menus.css) */
  background: var(--fill-on);
  box-shadow: var(--elev-thumb);
  transition: transform var(--dur-base) var(--ease-out);
}
.ui-switch[aria-checked="true"],
.ui-switch:checked {
  background: var(--fill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fill-blik) 55%, transparent);
}
.ui-switch[aria-checked="true"]::after,
.ui-switch:checked::after { transform: translateX(12px); }
input.ui-switch { appearance: none; margin: 0; }

.ui-check {
  appearance: none;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--surface-canvas);
  box-shadow: inset 0 0 0 1.5px var(--line-hover);
  cursor: pointer;
}
.ui-check:checked {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--fill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fill-blik) 60%, transparent), var(--elev-control);
}

/* ============================================================================
   11. ВРАЩЕНИЕ — индикатор загрузки: <Icon name="loading" className="ui-spin" />
   ----------------------------------------------------------------------------
   Только transform: вращение не трогает раскладку и идёт на композиторе.
   ============================================================================ */
.ui-spin { animation: ui-spin 0.9s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ui-btn,
  .ui-switch,
  .ui-switch::after { transition: none; }
  .ui-spin { animation-duration: 2.4s; }
}