/* ⚠️ Копия design/tokens.css — правьте оригинал и запустите design/sync.sh (CI сверяет копии). */
/* Prop Hub — дизайн-система цвета. Три слоя: базовые шкалы (--ink-*, --iris-*, --verdant-*, --rose-*, --saffron-*)
   → смысловые роли (--bg, --surface, --text-*, --accent*, --yes/--no/--warn …) → стили компонентов.
   Компоненты берут ТОЛЬКО роли; светлая тема переопределяет роли, а не шкалы. Старые имена (--white = текст,
   --ash/--silver = вторичный текст, --panel, --line …) — псевдонимы ролей, чтобы ничего не сломалось. */
:root {
  /* ── базовые шкалы (одинаковые во всех фронтах) ── */
  --ink-0: #ffffff; --ink-25: #fafafc; --ink-50: #f5f6f9; --ink-100: #eceef3; --ink-200: #e3e5ec; --ink-300: #c6c9d3;
  --ink-400: #9b9ca8; --ink-500: #636675; --ink-600: #545766; --ink-700: #3b3d4a; --ink-800: #23242d; --ink-850: #17181f;
  --ink-900: #121218; --ink-925: #0c0c10; --ink-950: #060608;
  --iris-50: #f3efff; --iris-100: #e7deff; --iris-200: #cbb8ff; --iris-300: #a98bff; --iris-500: #8052ff; --iris-600: #6a3ff0;
  --iris-700: #5530cc; --iris-900: #2e1a70;
  --verdant-50: #e8f8f2; --verdant-200: #8ff0d3; --verdant-500: #17c290; --verdant-600: #0e9a72; --verdant-700: #097553;
  --verdant-brand: #15846e;
  --rose-50: #ffeef0; --rose-300: #ff8f95; --rose-500: #ff5a63; --rose-600: #e03a45; --rose-700: #b62b36;
  --saffron-50: #fff6e0; --saffron-400: #ffc94d; --saffron-500: #ffb829; --saffron-600: #db9100; --saffron-700: #925f00;

  /* ── роли: тёмная тема (по умолчанию) ── */
  --bg: var(--ink-950);
  --surface: var(--ink-925);
  --surface-2: var(--ink-900);
  --card-bg: linear-gradient(180deg, var(--surface-2), var(--surface)); /* карточки и панели */
  --card-shadow: none;
  --pop-shadow: 0 12px 30px rgba(0, 0, 0, .45); /* меню, тултипы, поповеры */
  --sheet-shadow: 0 -14px 40px rgba(0, 0, 0, .5); /* нижние шторки */
  --sunken: rgba(255, 255, 255, .03); /* дорожки полос, строки, утопленные поля */
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .14);
  --text: var(--ink-0);
  --text-2: #c2c3cc;
  --text-3: var(--ink-400);
  --accent: var(--iris-500); /* основная кнопка, фокус, ссылки-акценты */
  --accent-hover: var(--iris-600);
  --on-accent: #fff;
  --accent-text: var(--iris-300); /* фиолетовый ТЕКСТ (ссылки, подписи) — читаемый на фоне */
  --accent-fg: #fff; /* текст активной пилюли */
  --accent-soft: rgba(128, 82, 255, .16); /* фон активной пилюли / выбранного */
  --accent-line: rgba(128, 82, 255, .45); /* рамка выбранного */
  --accent-ring: rgba(128, 82, 255, .18); /* focus-ring полей/селектов */
  --accent-tint: rgba(128, 82, 255, .1); /* hover-заливка кнопок исхода */
  --bar: rgba(128, 82, 255, .14); /* заливка полосы вероятности */
  --yes: var(--verdant-500); /* «Да»/Up — заливки, точки, линии графика */
  --no: var(--rose-500);
  --warn: var(--saffron-500);
  --c-yes: var(--verdant-200); /* текст «да»/выигрыш/рост */
  --c-no: var(--rose-300); /* текст «нет»/убыток/ошибка */
  --c-loss: var(--rose-300);
  --c-info: var(--iris-200);
  --c-warn: #ffd98a; /* текст «ожидание/внимание» */
  --placeholder: #5d5f6b;
  --glow: rgba(128, 82, 255, .1); /* свечение фона сверху (только тёмная) */
  --input-bg: #08080b;
  --appbar-bg: rgba(6, 6, 8, .7);
  --hover: rgba(255, 255, 255, .06);
  --subtle: var(--sunken);
  --zebra: rgba(255, 255, 255, .025); /* чётные строки таблиц и списков-таблиц */
  --footer-bg: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  --footer-hl: inset 0 1px 0 rgba(255, 255, 255, .08);

  --c-ok: var(--c-yes); /* админка/кабинеты партнёров */

  /* ── псевдонимы прежних имён ── */
  --void: #000;
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --white: var(--text); /* основной текст */
  --silver: var(--text-2);
  --ash: var(--text-3);
  --iris: var(--accent);
  --iris-dim: var(--accent-hover);
  --saffron: var(--warn);
  --verdant: var(--verdant-brand);
  --verdant-bright: var(--yes);
  --danger: var(--no);
  --line: var(--border);
  --line-2: var(--border-strong);

}

/* Светлая тема — спроектирована отдельно, не инверсией: нейтральный холодный фон без фиолетовой дымки, белые
   карточки отделены мягкой тенью, полосы вероятностей серые, фиолетовый — только на главном действии и выбранном.
   Цвета текста состояний — тёмные ступени шкал, контраст ≥ 4.5:1 к белому, фону и своим подложкам. */
[data-theme='light'] {
  --bg: var(--ink-50);
  --surface: var(--ink-0);
  --surface-2: var(--ink-25);
  --card-bg: var(--ink-0);
  --card-shadow: 0 1px 2px rgba(18, 18, 24, .04), 0 2px 10px rgba(18, 18, 24, .05);
  --pop-shadow: 0 2px 6px rgba(18, 18, 24, .06), 0 12px 32px rgba(18, 18, 24, .12);
  --sheet-shadow: 0 -8px 30px rgba(18, 18, 24, .12);
  --sunken: var(--ink-50);
  --zebra: var(--ink-50);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --text: var(--ink-900);
  --text-2: var(--ink-700);
  --text-3: var(--ink-500);
  --accent: var(--iris-600);
  --accent-hover: var(--iris-700);
  --accent-text: var(--iris-700);
  --accent-fg: var(--iris-700); /* белый на бледной пилюле не читается */
  --accent-soft: var(--iris-50);
  --accent-line: rgba(106, 63, 240, .4);
  --accent-ring: rgba(106, 63, 240, .2);
  --accent-tint: rgba(106, 63, 240, .07);
  --bar: var(--ink-200);
  --yes: var(--verdant-700);
  --no: var(--rose-700);
  --warn: var(--saffron-700);
  --c-yes: var(--verdant-700);
  --c-no: var(--rose-700);
  --c-loss: var(--rose-700);
  --c-info: var(--iris-700);
  --c-warn: var(--saffron-700);
  --placeholder: #8a8d9a;
  --glow: transparent;
  --input-bg: var(--ink-0);
  --appbar-bg: rgba(255, 255, 255, .82);
  --hover: rgba(18, 18, 24, .045);
  --footer-bg: var(--ink-0);
  --footer-hl: none;
  --void: #fff;
}

/* ── ритм: шрифты, начертания, межстрочные, отступы, радиусы (одни для всех фронтов) ──
   Плотный торговый интерфейс: основа 14px; 11px — минимум, только заглавные метки/бейджи/счётчики.
   Брейкпоинты (в @media токены не работают — числа): ≤480 маленький телефон · ≤760 телефон · ≤1000 узкая
   раскладка (= useIsMobile в JS) · ≤1180 ноутбук · ≥1560 широкий экран. */
:root {
  --fs-2xs: 11px; /* заглавные метки, бейджи, счётчики */
  --fs-xs: 12px; /* мета: время, объём, подписи графика */
  --fs-sm: 13px; /* плотные списки, карточки, таблицы */
  --fs-base: 14px; /* основной текст интерфейса */
  --fs-md: 15px; /* кнопки, строки исходов, текст справки */
  --fs-lg: 16px; /* заголовок блока; поля ввода на телефоне */
  --fs-xl: 18px; /* заголовок карточки/модалки */
  --fs-2xl: 20px; /* крупные цифры в строках */
  --fs-3xl: 24px; /* заголовок страницы */
  --fs-4xl: 30px; /* цена, баланс, цифры тарифов */
  --fs-display: 40px; /* одно главное число экрана */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700; /* цифры и цены; 800/900 не используем */
  --lh-tight: 1.2; /* заголовки, крупные цифры */
  --lh-snug: 1.35; /* строки списков, кнопки, карточки */
  --lh-body: 1.5; /* абзацы, правила, справка */
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-10: 64px;
  --radius-xs: 4px; /* чипы, мелкие метки */
  --radius-sm: 8px; /* кнопки, поля, строки */
  --radius-md: 12px; /* карточки, меню, поповеры */
  --radius-lg: 16px; /* модалки, шторки */
  --radius-pill: 999px; /* фильтры, метки-пилюли */
  --radius: var(--radius-md); /* карточка (прежнее имя) */
}

/* Поля ввода на телефоне и тач-устройствах — не мельче 16px: иначе iOS Safari увеличивает страницу при фокусе
   (поиск, сумма ставки, промокод, вход). Поле крупнее 16px задаёт свой размер ещё и в --input-fs. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), select, textarea {
    font-size: max(16px, var(--input-fs, 16px)) !important;
  }
}

/* ── значок меню (бургер): две полосы и короткая третья, прижатая к стороне кнопки ──
   <span class="burger-ico" data-side="left|right" aria-hidden="true"><i></i><i></i><i></i></span>
   left — кнопка у левого края (короткая полоса слева), right — у правого (справа). Цвет — currentColor. */
.burger-ico { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; height: 18px; flex: none; }
.burger-ico i { display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: width 0.15s ease-out; }
.burger-ico i:last-child { width: 55%; }
.burger-ico[data-side='left'] { align-items: flex-start; }
.burger-ico[data-side='right'] { align-items: flex-end; }
@media (prefers-reduced-motion: reduce) { .burger-ico i { transition: none; } }

/* ── поиск (один на все фронты): в покое — flat, лупа и короткое слово («Поиск»); по тапу/клику плавно раскрывается в
   пилюлю (заливка поля, рамка, при фокусе — iris + кольцо) и так же сворачивается, когда фокус ушёл и поле пустое.
   Раскрыт = фокус внутри или введён текст. Ширины задаёт место: --ph-search-w0 (покой), --ph-search-w1 (раскрыт).
   <label class="ph-search"><svg class="ph-search-ico" …/><input type="search" placeholder="Поиск"
     data-short="Поиск" data-ph="Поиск по статьям…" aria-label="Поиск по статьям…"></label>
   Полную подсказку в раскрытом поле ставит скрипт места (focusin/focusout по data-ph/data-short). ── */
.ph-search { position: relative; flex: 0 1 auto; width: var(--ph-search-w0, 128px); min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
  height: var(--ph-search-h, 40px); padding: 0 var(--sp-3); background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--text-2); cursor: text;
  transition: width .3s cubic-bezier(0.2, 0.8, 0.2, 1), padding .3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color .2s, border-color .2s, box-shadow .2s; }
.ph-search:hover { color: var(--text); }
.ph-search:focus-within, .ph-search:has(input:not(:placeholder-shown)) { width: var(--ph-search-w1, 320px); background: var(--input-bg); border-color: var(--border-strong); color: var(--text-3);
  transition: width .32s cubic-bezier(0.2, 0.8, 0.2, 1), padding .32s cubic-bezier(0.2, 0.8, 0.2, 1), background-color .15s, border-color .15s, box-shadow .2s; }
.ph-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ph-search-ico { flex: none; width: 18px; height: 18px; }
.ph-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; background: none; border: 0; outline: 0; box-shadow: none; color: var(--text); font: inherit; font-size: var(--fs-base); cursor: inherit; }
.ph-search input::placeholder { color: currentColor; opacity: 1; }
.ph-search:focus-within input::placeholder { color: var(--placeholder); }
.ph-search input::-webkit-search-cancel-button { display: none; }
/* только значок (узкое место): покой — квадрат с лупой, раскрытие то же */
.ph-search.ph-search-ico-only { --ph-search-w0: var(--ph-search-h, 40px); padding: 0 calc((var(--ph-search-h, 40px) - 20px) / 2); }
.ph-search.ph-search-ico-only:not(:focus-within):not(:has(input:not(:placeholder-shown))) input { flex: 0 0 0; width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ph-search { transition: none !important; } }

/* ── анимация по видимости (design/reveal.js): всё внутри [data-reveal] ждёт, пока блок станет виден (30% его высоты
   или 30% экрана), и стартует один раз. Пауза — только при .rv на <html> (ставит reveal.js), без JS ничего не прячется ── */
.rv [data-reveal]:not([data-in]),
.rv [data-reveal]:not([data-in]) *:not(.spin) { animation-play-state: paused !important; } /* спиннер ждать не должен */
/* печать / PDF: блоки, до которых не доскроллили, не остаются невидимым первым кадром */
@media print { .rv [data-reveal]:not([data-in]), .rv [data-reveal]:not([data-in]) * { animation: none !important; } }

/* ── выпадающие меню: само меню выезжает, пункты появляются построчно (у кнопки сразу видно, что откроется) ── */
@keyframes ph-drop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ph-drop-item { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-drop { transform-origin: top center; animation: ph-drop-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.menu-drop > * { animation: ph-drop-item 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.menu-drop > :nth-child(2) { animation-delay: 25ms; }
.menu-drop > :nth-child(3) { animation-delay: 50ms; }
.menu-drop > :nth-child(4) { animation-delay: 75ms; }
.menu-drop > :nth-child(5) { animation-delay: 100ms; }
.menu-drop > :nth-child(6) { animation-delay: 125ms; }
.menu-drop > :nth-child(7) { animation-delay: 150ms; }
.menu-drop > :nth-child(8) { animation-delay: 175ms; }
.menu-drop > :nth-child(n + 9) { animation-delay: 200ms; } /* длинный список не ждёт */

/* ── рост полосы-индикатора слева направо (прогресс, запас до просадки) ── */
@keyframes ph-bar-grow { from { transform: scaleX(0); } to { transform: none; } }
.bar-grow { transform-origin: left center; animation: ph-bar-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards; }

html[data-anim='off'] .menu-drop, html[data-anim='off'] .menu-drop > *, html[data-anim='off'] .bar-grow { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .menu-drop, .menu-drop > *, .bar-grow { animation: none !important; }
}

/* ⚠️ Копия design/cookie-banner.css — правьте оригинал и запустите design/sync.sh (CI сверяет копии). */
/* Cookie-баннер — один вид на лендинге, в кабинете и на /privacy, /terms (там токенов дизайн-системы нет — у каждой
   роли запасное значение тёмной темы). Плашка внизу, НЕ блокирует страницу: контейнер не ловит клики, только карточка.
   Рамка — градиент цветов логотипа; слева знак логотипа, палочки которого маятником разлетаются, крутясь вокруг своей
   оси, и собираются обратно (единственное движение на баннере; «уменьшить движение» — знак стоит собранным).
   Кнопки равны по действию (обе на виду, одного размера, рядом), выделена «Принять». */
.ckb {
  --ckb-surface: var(--surface, #0c0c10);
  --ckb-text: var(--text-2, #c2c3cc);
  --ckb-hi: var(--text, #fff);
  --ckb-line: var(--border, rgba(255, 255, 255, .09));
  --ckb-mute: var(--text-3, #9b9ca8);
  --ckb-link: var(--accent, #8052ff);
  --ckb-iris: var(--iris-500, #8052ff);
  --ckb-iris-hover: var(--iris-600, #6a3ff0);
  --ckb-green: var(--verdant-brand, #15846e);
  --ckb-gold: var(--saffron-500, #ffb829);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  padding: var(--sp-4, 16px);
  padding-bottom: calc(var(--sp-4, 16px) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.ckb[hidden] { display: none; }
.ckb-card {
  pointer-events: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4, 16px) var(--sp-5, 24px);
  padding: var(--sp-4, 16px) var(--sp-5, 24px);
  border-radius: var(--radius-lg, 16px);
  /* рамка 1px градиентом логотипа: заливка по padding-box, градиент по border-box */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ckb-surface), var(--ckb-surface)) padding-box,
    linear-gradient(100deg, var(--ckb-green), var(--ckb-iris) 52%, var(--ckb-gold)) border-box;
  animation: ckb-in .42s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ckb-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ── знак логотипа: три палочки ── */
.ckb-mark {
  width: 54px;
  height: 47px;
  overflow: visible;
  flex: none;
  margin: var(--sp-2, 8px); /* место для разлёта палочек */
}
/* палочка = <g> (сдвиг по X) + <path> внутри (сдвиг по Y, поворот, масштаб) — у каждого движения своя кривая,
   поэтому путь изогнут (arcs) и у всех палочек разный */
.ckb-stick, .ckb-stick > path {
  transform-box: fill-box;
  transform-origin: center;
}
/* Цикл 4,4 с (принципы анимации иконок: arcs, anticipation, follow through, secondary action):
   собран (пауза) → знак коротко сжимается (anticipation) → разлёт с коротким разгоном и долгим торможением к краю → на краю зависает,
   как маятник → разгон обратно, при сборке палочки чуть проскакивают и встают на место (follow through) → знак
   «щёлкает»: короткий подъём масштаба и яркости (secondary action). Палочки стартуют со сдвигом 80 мс (overlapping).
   Остановки — только в лого и на краях: промежуточные кадры посреди пути дают рывки. Без var() в @keyframes —
   Safari такие кадры не пересчитывает. Поворот кратен 180° — параллелограмм симметричен */
.ckb-mark { animation: ckb-pulse 4.4s linear infinite; }
@keyframes ckb-pulse {
  0%, 9% { transform: scale(1); filter: brightness(1); animation-timing-function: ease-in; }
  13% { transform: scale(.9); animation-timing-function: ease-out; }
  17%, 91% { transform: scale(1); filter: brightness(1); animation-timing-function: ease-out; }
  96% { transform: scale(1.07); filter: brightness(1.3); animation-timing-function: ease-in-out; }
  100% { transform: scale(1); filter: brightness(1); }
}
.ckb-s1 { animation: ckb-x1 4.4s infinite; }
.ckb-s1 > path { animation: ckb-y1 4.4s infinite, ckb-r1 4.4s infinite; }
.ckb-s2 { animation: ckb-x2 4.4s infinite; animation-delay: 80ms; }
.ckb-s2 > path { animation: ckb-y2 4.4s infinite, ckb-r2 4.4s infinite; animation-delay: 80ms; }
.ckb-s3 { animation: ckb-x3 4.4s infinite; animation-delay: 160ms; }
.ckb-s3 > path { animation: ckb-y3 4.4s infinite, ckb-r3 4.4s infinite; animation-delay: 160ms; }
/* Орбита: вся тройка вместе проворачивается вокруг центра знака, пока палочки разлетаются (≈200° к краю), и при
   сборке доходит до полного оборота — к месту палочки возвращаются в исходном положении, цикл замыкается без рывка.
   Свои вращения и пути палочек — поверх (они внутри обёртки). Центр — в координатах viewBox знака */
.ckb-orbit { transform-box: view-box; transform-origin: 148px 160px; animation: ckb-orbit 4.4s infinite; }
@keyframes ckb-orbit {
  0%, 14% { rotate: 0deg; animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
  52% { rotate: 200deg; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  90%, 100% { rotate: 360deg; }
}
@keyframes ckb-x1 {
  0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(.45, .1, .2, 1); }
  52% { translate: 128px 0; animation-timing-function: cubic-bezier(.6, 0, .35, 1.35); }
  90%, 100% { translate: 0 0; }
}
@keyframes ckb-y1 {
  0%, 14% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(.4, .15, .25, 1); }
  52% { translate: 0 22px; scale: .8; animation-timing-function: cubic-bezier(.7, 0, .5, 1); }
  90%, 100% { translate: 0 0; scale: 1; }
}
@keyframes ckb-r1 {
  0%, 14% { rotate: 0deg; animation-timing-function: cubic-bezier(.5, .05, .2, 1); }
  52% { rotate: 360deg; animation-timing-function: cubic-bezier(.55, 0, .35, 1); }
  90%, 100% { rotate: 0deg; }
}
@keyframes ckb-x2 {
  0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(.4, .15, .25, 1); }
  52% { translate: -100px 0; animation-timing-function: cubic-bezier(.7, 0, .5, 1); }
  90%, 100% { translate: 0 0; }
}
@keyframes ckb-y2 {
  0%, 14% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(.45, .1, .2, 1); }
  52% { translate: 0 -96px; scale: .9; animation-timing-function: cubic-bezier(.6, 0, .35, 1.35); }
  90%, 100% { translate: 0 0; scale: 1; }
}
@keyframes ckb-r2 {
  0%, 14% { rotate: 0deg; animation-timing-function: cubic-bezier(.45, .1, .25, 1); }
  52% { rotate: -540deg; animation-timing-function: cubic-bezier(.5, 0, .3, 1.1); }
  90%, 100% { rotate: 0deg; }
}
@keyframes ckb-x3 {
  0%, 14% { translate: 0 0; animation-timing-function: cubic-bezier(.4, .12, .3, 1); }
  52% { translate: -38px 0; animation-timing-function: cubic-bezier(.65, 0, .45, 1); }
  90%, 100% { translate: 0 0; }
}
@keyframes ckb-y3 {
  0%, 14% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(.5, .08, .25, 1); }
  52% { translate: 0 118px; scale: .75; animation-timing-function: cubic-bezier(.7, 0, .5, 1); }
  90%, 100% { translate: 0 0; scale: 1; }
}
@keyframes ckb-r3 {
  0%, 14% { rotate: 0deg; animation-timing-function: cubic-bezier(.45, .05, .2, 1); }
  52% { rotate: 180deg; animation-timing-function: cubic-bezier(.55, 0, .3, 1.25); }
  90%, 100% { rotate: 0deg; }
}

.ckb-text {
  margin: 0;
  font-size: var(--fs-sm, 13px);
  line-height: var(--lh-body, 1.5);
  color: var(--ckb-text);
  text-wrap: pretty;
}
.ckb-text a {
  color: var(--ckb-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ckb-link) 45%, transparent);
  white-space: nowrap;
}
.ckb-text a:hover { border-bottom-color: var(--ckb-link); }

.ckb-actions {
  display: flex;
  gap: var(--sp-2, 8px);
}
.ckb-btn {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 var(--sp-5, 24px);
  border-radius: var(--radius-sm, 8px);
  font: inherit;
  font-size: var(--fs-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ckb-btn:focus-visible { outline: 2px solid var(--ckb-iris); outline-offset: 2px; }
.ckb-reject {
  color: var(--ckb-hi);
  background: transparent;
  border: 1px solid var(--ckb-line);
}
.ckb-reject:hover { border-color: var(--ckb-mute); }
.ckb-accept {
  color: #fff;
  background: var(--ckb-iris);
  border: 1px solid var(--ckb-iris);
}
.ckb-accept:hover { background: var(--ckb-iris-hover); border-color: var(--ckb-iris-hover); }

/* узко: знак и текст строкой, кнопки во всю ширину под ними — «Принять» сверху */
@media (max-width: 760px) {
  .ckb { padding: var(--sp-3, 12px); padding-bottom: calc(var(--sp-3, 12px) + env(safe-area-inset-bottom, 0px)); }
  .ckb-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-3, 12px) var(--sp-4, 16px);
    padding: var(--sp-4, 16px);
  }
  .ckb-mark { width: 40px; height: 35px; align-self: start; margin-top: 2px; }
  .ckb-actions { grid-column: 1 / -1; flex-direction: column-reverse; }
  .ckb-btn { width: 100%; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ckb-card, .ckb-mark, .ckb-orbit, .ckb-stick, .ckb-stick > path { animation: none; }
}

/* Блог prop-hub.pro/blog — тёмная тема лендинга и справки (токены design/tokens.css выше, Inter). Flat: заливка и
   рамка 1px, без декоративных теней; иерархия — весом и размером. Ширина контента 1700, колонка текста ~70 знаков. */
:root { --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --max: 1700px; --col: 720px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body.bl { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-base)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
.bl a { color: inherit; }
.bl :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.bl img { max-width: 100%; height: auto; }
.bl-wrap { max-width: var(--max); margin: 0 auto; padding-inline: max(var(--sp-5), env(safe-area-inset-left, 0px)); }
/* каркас как в справке (support/src/style.css .shell): слева сайдбар рубрик 280px, справа контент на всю ширину 1700 */
.bl-shell { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-7); padding: 0 var(--sp-5); }
.bl-sidebar { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow: auto; padding: var(--sp-6) var(--sp-2) var(--sp-6) 0; }
.bl-nav-sec { margin-top: var(--sp-4); }
.bl-nav-h { display: block; margin: 0 0 var(--sp-1); padding: var(--sp-1) 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; }
a.bl-nav-h:hover, a.bl-nav-h[aria-current] { color: var(--accent); }
.bl-nav-tree { list-style: none; margin: 0 0 0 var(--sp-2); padding: 0; border-left: 1px solid var(--border); }
.bl-nav-tree a { display: block; margin-left: -1px; padding: 5px var(--sp-3) 5px 17px; border-left: 2px solid transparent; color: var(--text-3); font-size: var(--fs-sm); line-height: var(--lh-snug); text-decoration: none; transition: color .15s, border-color .15s; }
.bl-nav-tree a:hover { color: var(--text); }
.bl-nav-tree a[aria-current] { color: var(--text); border-left-color: var(--accent); font-weight: var(--fw-semibold); }

/* шапка */
.bl-top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top, 0px); }
.bl-top-in { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; }
.bl-logo { display: inline-flex; flex: none; }
.bl-logo img { height: 24px; width: auto; }
/* логотип по теме: белая надпись — тёмной, цветная — светлой */
.bl .lg-l { display: none; }
[data-theme='light'] .bl .lg-d { display: none; }
[data-theme='light'] .bl .lg-l { display: block; }
/* кнопки шапки: меню (только узко) и тема — как в справке: 38px, рамка 1px */
.bl-menu, .bl-theme { display: none; width: 38px; height: 38px; flex: none; place-items: center; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: none; color: var(--text); cursor: pointer; }
.bl-theme { display: grid; color: var(--text-2); }
.bl-theme:hover { color: var(--text); }
.bl-theme .ic-moon, [data-theme='light'] .bl-theme .ic-sun { display: none; }
[data-theme='light'] .bl-theme .ic-moon { display: block; }
/* верх выезжающего меню (ссылки шапки + кабинет) — только на телефоне */
.bl-drawer-top { display: none; }
.bl-nav { display: flex; gap: var(--sp-5); flex: 1; font-size: var(--fs-sm); }
.bl-nav a { color: var(--text-2); text-decoration: none; }
.bl-nav a:hover, .bl-nav-blog { color: var(--text); }
.bl-langs { display: flex; gap: var(--sp-1); }
.bl-lang { font-size: var(--fs-xs); color: var(--text-3); text-decoration: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); }
.bl-lang[aria-current] { color: var(--text); background: var(--surface-2); }
.bl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sp-5); border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-decoration: none; }
.bl a.bl-btn { color: #fff; }
.bl-btn:hover { filter: brightness(1.08); }
.bl-btn-sm { min-height: 36px; padding: 0 var(--sp-4); }

.bl-main { min-width: 0; padding-block: var(--sp-7) var(--sp-8); }
.bl-h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.02em; margin: 0 0 var(--sp-2); text-wrap: balance; }
.bl-sub { color: var(--text-2); max-width: 70ch; margin: 0 0 var(--sp-5); }

/* рубрики */
.bl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.bl-chip { font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; padding: var(--sp-1h) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.bl-chip:hover { color: var(--text); border-color: var(--border-strong); }
.bl-chip.on { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }

/* карточки */
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--sp-4); }
.bl-card a { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color .15s; }
.bl-card a:hover { border-color: var(--border-strong); }
/* обложка — кадр ролика статьи 16:9 во всю ширину карточки, над рубрикой */
.bl-card .bl-card-img { display: block; width: calc(100% + 2 * var(--sp-5)); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-2); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg); }
.bl-card-h { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); text-wrap: balance; }
.bl-card p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.bl-card-rub { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-medium); }
.bl-card time { font-size: var(--fs-xs); color: var(--text-3); }
.bl-empty { color: var(--text-2); }
.bl-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-7); font-size: var(--fs-sm); color: var(--text-2); }
.bl-pager a { color: var(--text); text-decoration: none; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-pill); }

/* статья */
/* хлебные крошки — как в кабинете (front .sp-crumbs): ссылки серым, разделитель «·» приглушённо */
.bl-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.bl-crumbs a { color: var(--text-2); text-decoration: none; }
.bl-crumbs a:hover { color: var(--text); }
.bl-crumbs-sep { color: var(--text-3); }
/* на десктопе путь виден в сайдбаре (рубрика и статья подсвечены) — крошки только там, где сайдбара нет (≤900);
   разметка BreadcrumbList остаётся: на мобильной версии крошки видны */
@media (min-width: 901px) { .bl-crumbs { display: none; } }
/* текст и оглавление: три равных резиновых промежутка (край → текст → оглавление → край), как в справке */
.bl-doc { display: grid; grid-template-columns: minmax(0, 760px) 240px; justify-content: space-evenly; column-gap: var(--sp-5); align-items: start; }
.bl-article h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: var(--lh-tight); letter-spacing: -.02em; margin: 0 0 var(--sp-3); text-wrap: balance; }
.bl-meta { font-size: var(--fs-sm); color: var(--text-3); margin: 0 0 var(--sp-5); }
.bl-lead { font-size: var(--fs-lg); color: var(--text-2); line-height: var(--lh-body); margin: 0 0 var(--sp-6); }
.bl-body { font-size: 17px; line-height: 1.7; }
.bl-body > * { margin: 0 0 var(--sp-4); }
.bl-body h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); margin: var(--sp-7) 0 var(--sp-3); letter-spacing: -.01em; text-wrap: balance; }
.bl-body h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin: var(--sp-6) 0 var(--sp-2); }
.bl-body h4 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); }
.bl-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bl-body ul, .bl-body ol { padding-left: 1.3em; }
.bl-body li { margin: 0 0 var(--sp-1h); }
.bl-body blockquote { margin-inline: 0; padding: var(--sp-3) var(--sp-4); border-left: 2px solid var(--accent); background: var(--surface); color: var(--text-2); }
.bl-body code { font-size: .9em; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-2); }
.bl-body pre { overflow-x: auto; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.bl-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
.tbl { overflow-x: auto; margin: 0 0 var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-md); }
.tbl table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th { color: var(--text-2); font-weight: var(--fw-medium); background: var(--surface); }
.tbl tr:last-child td { border-bottom: 0; }
.bl-faq { margin-top: var(--sp-7); }
.bl-faq h2 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.bl-faq details { border-top: 1px solid var(--border); padding: var(--sp-3) 0; }
.bl-faq details:last-child { border-bottom: 1px solid var(--border); }
.bl-faq summary { cursor: pointer; font-weight: var(--fw-semibold); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.bl-faq summary::-webkit-details-marker { display: none; }
.bl-faq summary::after { content: '+'; color: var(--text-3); flex: none; }
.bl-faq details[open] summary::after { content: '−'; }
.bl-faq details > :not(summary) { color: var(--text-2); margin: var(--sp-2) 0 0; }
.bl-disclaimer { margin-top: var(--sp-7); font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-body); }

/* боковая колонка: оглавление + CTA */
.bl-side { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(64px + 24px); align-self: start; max-height: calc(100vh - 64px - 48px); overflow-y: auto; }
.bl-toc { position: relative; }
.bl-toc-h { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 var(--sp-2); }
.bl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1h); }
.bl-toc a { display: block; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; line-height: var(--lh-snug); }
.bl-toc a[data-depth="1"] { padding-left: 12px; font-size: var(--fs-xs); }
.bl-toc a:hover, .bl-toc a.in-view { color: var(--text); }
.bl-toc.has-rail ol { padding-left: var(--sp-4); }
.toc-rail { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.toc-rail path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toc-rail-track path { stroke: var(--border-strong); }
.toc-rail-fill path { stroke: var(--text); }
.toc-rail-fill { transition: clip-path .2s; }
.bl-cta { padding: var(--sp-5); border-radius: var(--radius-lg); border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(100deg, var(--verdant-brand), var(--iris-500) 52%, var(--saffron-500)) border-box; }
.bl-cta-h { font-weight: var(--fw-semibold); font-size: var(--fs-md); margin: 0 0 var(--sp-2); }
.bl-cta p { font-size: var(--fs-sm); color: var(--text-2); margin: 0 0 var(--sp-4); }
.bl-cta .bl-btn { width: 100%; }
.bl-related { margin-top: var(--sp-9, 56px); }
.bl-related h2 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); }
.bl-cta-mobile { display: none; margin-top: var(--sp-6); }
.bl-404 { text-align: center; padding-block: var(--sp-10); }

/* подвал — как в кабинете (front/src/index.css .app-footer): frosted-подложка с верхним хайлайтом */
.app-footer {
  margin-top: var(--sp-8); padding: var(--sp-6) 0 calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--footer-hl);
}
.af-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.app-footer .af-logo { display: block; height: 20px; width: auto; opacity: .85; }
.af-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); margin-left: auto; }
.af-links a { color: var(--text-2); text-decoration: none; }
.af-links a:hover { color: var(--text); }
.af-bottom { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.af-social { display: flex; gap: var(--sp-2); margin-left: auto; }
.af-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); transition: color .15s, border-color .15s; }
.af-social a:hover { color: var(--text); border-color: var(--text-3); }
.af-disclaimer { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--text-3); margin: 0 0 var(--sp-3); }
.af-org { font-size: var(--fs-xs); color: var(--text-2); margin: 0 0 var(--sp-1); }
.af-copy { font-size: var(--fs-xs); color: var(--text-3); margin: 0; }

@media (max-width: 1280px) {
  .bl-doc { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }
  .bl-side { position: static; max-height: none; overflow: visible; order: -1; }
  .bl-side .bl-cta { display: none; }
  .bl-toc .toc-rail { display: none; }
  .bl-toc.has-rail ol { padding-left: 0; }
  /* узко: оглавление над текстом рядом кнопок, без подпунктов (как в справке) */
  .bl-toc ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-left: 0; }
  .bl-toc li { margin: 0; }
  .bl-toc a { display: inline-block; margin: 0; padding: var(--sp-1) 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: var(--lh-snug); }
  .bl-toc a[data-depth="1"], .bl-toc li:has(> a[data-depth="1"]) { display: none; }
  .bl-article .bl-cta-mobile { display: block; }
}
@media (max-width: 900px) {
  /* узко — сайдбар становится выезжающим меню по бургеру (как в справке), отступы как в справке */
  .bl-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--sp-4); }
  .bl-menu { display: grid; }
  .bl-nav, .bl-top-app { display: none; }
  .bl-top-in { gap: var(--sp-3); }
  .bl-langs { margin-left: auto; }
  .bl-sidebar { position: fixed; z-index: 15; top: calc(64px + env(safe-area-inset-top, 0px)); left: 0; bottom: 0; width: min(320px, 86vw);
    height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)); max-height: none; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-right: 1px solid var(--border); padding: var(--sp-5) var(--sp-5) var(--sp-8); transform: translateX(-102%); }
  /* выезд — только после нажатия на бургер (html.nav-anim): при смене ширины меню не уезжает на глазах */
  html.nav-anim .bl-sidebar { transition: transform 0.16s cubic-bezier(0.4, 0, 1, 1); }
  html.nav-open .bl-sidebar { transform: none; }
  html.nav-anim.nav-open .bl-sidebar { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
  /* «Справка» и «Тарифы» в одну строку, если влезают (иначе перенос); кнопка кабинета — на всю ширину ниже */
  .bl-drawer-top { display: flex; flex-wrap: wrap; column-gap: var(--sp-5); row-gap: var(--sp-1); margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
  .bl-drawer-top a:not(.bl-btn) { padding: var(--sp-2) 0; color: var(--text-2); text-decoration: none; font-size: var(--fs-base); }
  .bl-drawer-top .bl-btn { flex-basis: 100%; margin-top: var(--sp-2); }
  .bl-wrap { padding-inline: max(var(--sp-4), env(safe-area-inset-left, 0px)); }
  .bl-main { padding-top: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) { html.nav-anim .bl-sidebar, html.nav-anim.nav-open .bl-sidebar { transition: none; } }
@media (max-width: 760px) {
  .bl-main { padding-block: var(--sp-4) var(--sp-8); }
  .bl-h1 { font-size: var(--fs-3xl); }
  .bl-body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .toc-rail-fill, .bl-card a { transition: none; } }

/* ролик в тексте (абзац @@VIDEO:…@@): кадр 16:9 во всю колонку, подпись под ним */
.bl-video { margin: var(--sp-6) 0; }
.bl-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); }
.bl-video figcaption { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug); }