/* Ритм — Mini App, «Ритм 5» (02.10, вечер): система Пронина буквально — значения сняты с его мини-приложения и
   из его движка (docs/design-system.md). Белый фон, группы #f4f4f4, чернила #1d1d1f, пояснения #6e6e73, Google Sans
   400/500, кнопка 48 со скруглением 14, панель — серая таблетка с капсулой; тёмные страницы — чёрные с плашками
   #333333. Стили разложены по файлам css/NN-*.css, страница получает их одним app.css (web/shell.py). Прежние виды —
   design/prototypes/miniapp-v1 … v4. */

@font-face {
  font-family: "Google Sans";
  src: url("/static/gsans-latin.woff2?v=0feef3235236") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122,
    U+2190-2199, U+2212;
}

@font-face {
  font-family: "Google Sans";
  src: url("/static/gsans-cyrillic.woff2?v=032125d892f3") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}

@font-face {
  font-family: "Manrope";
  src: url("/static/manrope.ttf?v=3ae11c49db04") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ─── токены ─────────────────────────────────────────────────────────────── */
/* Значения сняты с мини-приложения Пронина (скриншоты владельца 02.10, iPhone, 1 pt = 1 px) и его дизайн-системы
   (движок 0.34.11, catalog/design-tokens.json): белый фон, серые группы #f4f4f4, чернила #1d1d1f, вторичный
   #6e6e73, чёрные кнопки, нижняя панель — серая таблетка #f2f2f2 с капсулой #dfdfdf. Тёмные экраны — как его
   страницы оплаты и уроков: чёрный фон и плашки #333333. Своих цветов и правил сверх этого не добавляем. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73; /* пояснения, подписи, неактивные значки */
  --ink-3: #888889; /* подсказка в пустом поле */
  --ink-4: #dbdbdb; /* пустой кружок отметки */
  --well: #f4f4f4; /* группы строк, строки выбора, поля */
  --well-2: #ebebeb; /* нажатие на строке */
  --chip: #f0f0f0; /* «‹ Все уроки», вторая кнопка, метки в тексте */
  --line: #e4e4e4; /* разделители внутри групп */
  --rule: #dfdfdf; /* линия под шапкой */
  --track: #e4e4e4; /* дорожки шкал */
  --btn: #1d1d1f;
  --btn-ink: #ffffff;
  --btn-off: #f4f4f4;
  --btn-off-ink: #6e6e73;
  --dark-card: #262629; /* тёмная карточка на белом — главное дело, урок дня */
  --dark-card-2: #262626;
  --dark-edge: transparent;
  --dark-ink: #ffffff;
  --dark-ink-2: rgba(255, 255, 255, 0.62);
  --dark-pill: rgba(255, 255, 255, 0.16); /* «Открыть» на тёмной карточке */
  --float: #f2f2f2; /* нижняя панель */
  --float-on: #dfdfdf; /* выбранный раздел */
  --float-puck: #ffffff; /* бегунок меню */
  --float-puck-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.07);
  --float-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  --float-edge: transparent;
  --sheet-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
  --scrim: rgba(0, 0, 0, 0.32);
  --good: #00bc7d; /* галочки в списках */
  --warn: #fdc700;
  --bad: #d83a3c;
  --blue: #3392ff; /* ссылки-цифры, «Оплатить сейчас», метка «ПЛЮС» */
  --blue-deep: #0078e5;
  --link: #1d1d1f;

  /* цвет курса */
  --accent: #ad46ff;
  --accent-text: #8200db;
  --accent-ink: #ffffff;
  --accent-soft: rgba(173, 70, 255, 0.12);
  --hero-a: #262629;
  --hero-b: #262629;

  /* значки в строках — сплошные круги, как в профиле Пронина */
  --ib-violet: #c27aff;
  --ib-blue: #3392ff;
  --ib-green: #00d492;
  --ib-teal: #00d5be;
  --ib-amber: #fdc700;
  --ib-pink: #fb64b6;
  --ib-sky: #00bcff;
  --ib-gray: #a1a1a1;
  --ib-ink: #1d1d1f;
  --ib-red: #ff6467;

  /* форма */
  --r-btn: 14px;
  --r-row: 14px;
  --r-group: 18px;
  --r-card: 20px;
  --r-hero: 20px;
  --gutter: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.32, 1.32, 0.42, 1);
  --safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --tabs-h: 64px; /* нижнее меню — капсула с бегунком (03.10) */
  --font: "Google Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* графики */
  --chart-grid: rgba(29, 29, 31, 0.07);
  --chart-axis: #6e6e73;
  --c-f1: #e4e4e4;
  --c-f2: #c9c9cc;
  --c-f3: #a1a1a1;
  --c-f4: #6e6e73;
  --c-f5: #1d1d1f;
  --c-sun-a: #fdc700;
  --c-sun-b: #ffdf20;
  --z-evening: #6e6e73;
  --z-room: #a1a1a1;
  --z-window: #fdc700;
  --z-outdoor: #ffdf20;
  --skel: #f4f4f4;
  --skel-hi: #ebebeb;

  /* прежние имена — на них опираются инструменты, графики и конспект */
  --text: var(--ink);
  --muted: var(--ink-2);
  --faint: var(--ink-3);
  --surface: var(--well);
  --surface-2: var(--well-2);
  --card: var(--well);
  --btn-2: var(--chip);
  --task: var(--dark-card);
  --task-2: var(--dark-card-2);
  --task-ink: var(--dark-ink);
  --task-muted: var(--dark-ink-2);
  --chip-dark: var(--dark-card);
  --hairline: var(--line);
  --amber: var(--warn);
  --amber-tint: rgba(253, 199, 0, 0.16);
  --pink: #f6339a;
  --emerald: #00bc7d;
  --c-light: #fdc700;
  --c-dim: #f6339a;
  --c-sleep-a: var(--accent);
  --c-sleep-b: var(--accent);
  --c-track: var(--track);
  --c-now: var(--ink);
  --chart-bar: var(--accent);
  --shadow-pop: var(--float-shadow);
}

/* тёмная тема — как тёмные страницы Пронина: чёрный фон, плашки #333333, белые кнопки. Те же значения — у тёмного
   «острова» (data-island): страница оплаты тёмная и в светлой теме, как оплата у Пронина */
:root[data-theme="dark"],
:root[data-island] {
  color-scheme: dark;
  --bg: #000000;
  --ink: #ffffff;
  --ink-2: #bdbdbd;
  --ink-3: #999999;
  --ink-4: #5c5c5c;
  --well: #333333;
  --well-2: #404040;
  --chip: #333333;
  --line: #474747;
  --rule: #333333;
  --track: #474747;
  --btn: #ffffff;
  --btn-ink: #000000;
  --btn-off: #333333;
  --btn-off-ink: #999999;
  --dark-card: #333333;
  --dark-card-2: #404040;
  --dark-edge: #5c5c5c;
  --dark-pill: rgba(255, 255, 255, 0.16);
  --float: #333333;
  --float-on: #5c5c5c;
  --float-puck: #5c5c5c;
  --float-puck-shadow: none;
  --float-shadow: 0 17px 55px rgba(0, 0, 0, 0.35);
  --sheet-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.6);
  --bad: #ff8a80;
  --link: #ffffff;
  --accent-text: #c27aff;
  --ib-ink: #5c5c5c;
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-axis: #bdbdbd;
  --c-f1: #474747;
  --c-f2: #5c5c5c;
  --c-f3: #999999;
  --c-f4: #bdbdbd;
  --c-f5: #ffffff;
  --z-evening: #999999;
  --z-room: #bdbdbd;
  --skel: #1c1c1c;
  --skel-hi: #333333;
}

/* цвет курса — из той же палитры (фишки движка Пронина): только шкалы, отметки и знак курса. Блок с data-course
   (раздел «Моего ритма», «Мелодия сна») берёт цвет своего курса: данные сна — всегда цветом «Сна» */
:root[data-course="sleep"], [data-course="sleep"] { --accent: #ad46ff; --accent-text: #8200db; --accent-soft: rgba(173, 70, 255, 0.12); }
:root[data-course="focus"], [data-course="focus"] { --accent: #3392ff; --accent-text: #155dfc; --accent-soft: rgba(51, 146, 255, 0.12); }
:root[data-course="energy"], [data-course="energy"] { --accent: #9ae600; --accent-text: #497d00; --accent-soft: rgba(154, 230, 0, 0.16); }
:root[data-course="food"], [data-course="food"] { --accent: #00bc7d; --accent-text: #009966; --accent-soft: rgba(0, 188, 125, 0.12); }
:root[data-course="stress"], [data-course="stress"],
:root[data-course="teeth"], [data-course="teeth"] { --accent: #00a6f4; --accent-text: #0084d1; --accent-soft: rgba(0, 166, 244, 0.12); }
:root[data-course="move"], [data-course="move"] { --accent: #f6339a; --accent-text: #e60076; --accent-soft: rgba(246, 51, 154, 0.12); }

:root[data-theme="dark"][data-course="sleep"],
:root[data-theme="dark"] [data-course="sleep"],
:root[data-island][data-course="sleep"] { --accent-text: #c27aff; }
:root[data-theme="dark"][data-course="focus"],
:root[data-theme="dark"] [data-course="focus"],
:root[data-island][data-course="focus"] { --accent-text: #8ec5ff; }
:root[data-theme="dark"][data-course="energy"],
:root[data-theme="dark"] [data-course="energy"],
:root[data-island][data-course="energy"] { --accent-text: #bbf451; }
:root[data-theme="dark"][data-course="food"],
:root[data-theme="dark"] [data-course="food"],
:root[data-island][data-course="food"] { --accent-text: #00d492; }
:root[data-theme="dark"][data-course="stress"],
:root[data-theme="dark"] [data-course="stress"],
:root[data-theme="dark"][data-course="teeth"],
:root[data-theme="dark"] [data-course="teeth"],
:root[data-island][data-course="stress"],
:root[data-island][data-course="teeth"] { --accent-text: #00bcff; }
:root[data-theme="dark"][data-course="move"],
:root[data-theme="dark"] [data-course="move"],
:root[data-island][data-course="move"] { --accent-text: #fb64b6; }
:root[data-theme="dark"][data-course],
:root[data-theme="dark"] [data-course],
:root[data-island][data-course] { --accent-soft: rgba(255, 255, 255, 0.1); }

/* ─── основа ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  -webkit-user-drag: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sprite {
  display: none;
}

.ic {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.num,
.aside,
.big,
.t-time,
.tp-time,
.tnum {
  font-variant-numeric: tabular-nums;
}

[hidden] {
  display: none !important;
}

/* ─── каркас ─────────────────────────────────────────────────────────────── */

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px var(--gutter) calc(var(--tabs-h) + 44px + var(--safe-b));
}

body.full .app {
  padding-bottom: calc(28px + var(--safe-b));
}

body.composing .app {
  padding-bottom: calc(96px + var(--safe-b));
}

.screen > * {
  animation: rise 0.36s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 6) * 24ms);
}

.screen.push > * {
  animation-name: rise-push;
}

.screen.back > * {
  animation-name: rise-back;
}

.screen.quick > * {
  animation: fade-in 0.15s ease backwards;
  animation-delay: 0s;
}

/* перерисовка того же кадра (после «урок пройден») — без въезда */
.screen.still > * {
  animation: none;
}

/* раздел, пролистанный свайпом, въезжает с той стороны, куда листали (app.js navInit) */
.screen.nav-next {
  animation: nav-next 0.34s var(--ease) both;
}

.screen.nav-prev {
  animation: nav-prev 0.34s var(--ease) both;
}

@keyframes nav-next {
  from {
    transform: translate3d(56px, 0, 0);
    opacity: 0;
  }
}

@keyframes nav-prev {
  from {
    transform: translate3d(-56px, 0, 0);
    opacity: 0;
  }
}

.app {
  touch-action: pan-y; /* вбок по экрану листают разделы — прокрутку вниз и вверх это не трогает */
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes rise-push {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
}

@keyframes rise-back {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
}

/* ─── типографика ────────────────────────────────────────────────────────── */
/* Шкала Пронина (замеры с его приложения): 24 — заголовок экрана, 20 — раздел, 19 — заголовок карточки на
   главной, 17 — приветствие в шапке, 16 — строки и текст (строка 25), 15 — подзаголовок раздела, 14 — пояснения
   и подписи, 12 — надпись капителью над разделом. Только 400 и 500. */

.title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink);
  text-wrap: balance;
}

.title.long {
  font-size: 20px;
  line-height: 28px;
}

.eyebrow,
.eyebrow-s,
.label {
  display: block;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-2);
}

/* надпись над разделом, как «РУКОВОДСТВО» и «УСЛУГА» у Пронина */
.kicker {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lead {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-2);
}

.section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 28px 0 12px;
}

.section h2 {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.section small {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--ink-2);
}

.note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
}

.note.left {
  text-align: left;
}

.facts {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.hint {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* «Назад» на странице — только вне Telegram (в Telegram — его родная кнопка); вид — серая таблетка «‹ Все уроки» */
.back-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  margin: 0 0 16px;
  padding: 0 16px 0 10px;
  border: 0;
  border-radius: 20px;
  background: var(--chip);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.back-link .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* курсор в полях ввода — цветом акцента: по умолчанию он берёт цвет текста и местами сливался с фоном (владелец 04.10:
   «в поле не ставится ползунок, либо он белый и сливается») */
input,
textarea,
[contenteditable] {
  caret-color: var(--accent);
}

/* ─── нижнее меню: капсула с бегунком и шар Ритма посередине ──────────────── */
/* Владелец 03.10: «нижнее меню не нравится: похоже на Пронина, неудобное, нельзя перелистнуть, слишком маленькое» →
   вариант «Капсула с бегунком» и «Ритм по центру ещё там как-то аккуратно». Широкая капсула 64: четыре раздела с
   подписями у всех (значок 24 и подпись 12), у выбранного значок залит, под ним белый бегунок; бегунок едет за
   пальцем (свайп разделов и перетаскивание по капсуле, app.js navInit). Шар Ритма (чат и SOS, счётчик ответов —
   на нём) — над серединой капсулы, ниже (.tabs.raised). Во вложенном экране меню гаснет на месте. */

.tabs {
  position: fixed;
  left: 50%;
  bottom: max(12px, var(--safe-b));
  z-index: 40;
  transform: translateX(-50%);
  transition:
    transform 0.22s var(--ease),
    opacity 0.18s ease;
}

/* во вложенном экране меню нет: тихо гаснет на месте, а не уезжает вниз за край */
.tabs[hidden] {
  display: block !important;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
}

.tabbar {
  position: relative;
  display: flex;
  align-items: center;
  width: min(420px, calc(100vw - 24px));
  height: var(--tabs-h);
  padding: 5px;
  border-radius: 32px;
  background: var(--float);
  box-shadow: var(--float-shadow);
  touch-action: none; /* по капсуле тащат бегунок — страница не прокручивается */
}

.tab {
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 27px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.2s ease,
    transform 0.12s ease;
}

.tab .ic {
  flex: none;
  width: 24px;
  height: 24px;
}

.tab .ic.on,
.tab.on .ic.off {
  display: none;
}

.tab.on .ic.on {
  display: block;
}

.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab:active {
  transform: scale(0.94);
}

.tab.on,
.tab.near {
  color: var(--ink);
}

.tabbar.scrub .tab:active {
  transform: none;
}

/* бегунок — белая капсула под выбранным разделом; пружиной переезжает к новому, за пальцем — без задержки */
.tab-puck {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 0;
  height: 54px;
  border-radius: 27px;
  background: var(--float-puck);
  box-shadow: var(--float-puck-shadow);
  pointer-events: none;
  transition:
    transform 0.36s var(--spring),
    width 0.3s var(--ease);
}

.tab-puck.drag,
.tab-puck.still {
  transition: none;
}

/* шар Ритма: нажатие — лист «Написать Ритму» и SOS, долгое нажатие — сразу SOS. Владелец 03.10, вечер: «Ритм по
   центру как-то не органично — либо его больше сделать и чуть приподнять»; из двух вариантов (над капсулой и отдельным
   кругом справа, как поиск в iOS 26) выбрал «над капсулой». Шар 60 стоит над серединой капсулы на плавном холме цвета
   панели (стык без углов — кривая в маске); тень у капсулы и холма общая (filter у .tabs), иначе на стыке видна
   полоса. Класс .raised у #tabs — в shell.py. */
.tab-orb {
  appearance: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  touch-action: none; /* с шара страница не листается: палец повёл — это не нажатие (app.js, orbInit) */
}

.tab-orb img {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  transition: transform 0.16s var(--spring);
  pointer-events: none;
}

.tab-orb img:not([src]) {
  visibility: hidden;
}

.tab-orb:active img {
  transform: scale(0.9);
}

.tab-orb .ava-count {
  position: absolute;
  z-index: 1;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 0 0 2px var(--float);
}

.tab-gap {
  display: none;
}

/* raised: холм 156 × 26 над серединой капсулы, шар 60 в нём */
.tabs.raised {
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.05));
}

.tabs.raised .tabbar {
  box-shadow: none;
}

.tabs.raised .tab-gap {
  display: block;
  flex: 0 0 70px;
}

.tabs.raised .tab-orb {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 156px;
  height: 70px;
  margin-left: -78px;
  align-items: flex-start;
  padding-top: 6px;
  pointer-events: none; /* нажимается только сам шар, а не весь холм */
}

.tabs.raised .tab-orb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 156px;
  height: 27px;
  background: var(--float);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 27'%3E%3Cpath d='M0 27C40 27 44 0 78 0s38 27 78 27z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 27'%3E%3Cpath d='M0 27C40 27 44 0 78 0s38 27 78 27z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.tabs.raised .tab-orb img {
  pointer-events: auto;
  border-radius: 50%;
}

/* меню скрыто (знакомство, вложенные экраны) — шар не нажимается: картинке выше нажатия возвращены, и без этого правила
   она ловила касания сквозь невидимое меню (владелец 04.10: «в диагностике жму внизу посередине — выскакивает Ритм») */
.tabs[hidden] .tab-orb img {
  pointer-events: none;
}

.tabs.raised .tab-orb .ava-count {
  top: 2px;
  left: 50%;
  margin-left: 14px;
}

/* ─── шапка вкладок: «Привет, имя» и кружок справа, под ними линия ───────── */

.hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  margin: 2px 0 0;
  padding: 0 0 16px;
}

.hello h1 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.hello h1 span {
  color: var(--ink-2);
}

.hello .avatar-btn {
  width: 36px;
  height: 36px;
}

/* шапка вкладки: название раздела (24, как заголовок экрана) и под ним строка — дата, день курса */
.tab-head {
  align-items: flex-end;
  padding-bottom: 14px;
}

.tab-head .th-txt {
  min-width: 0;
}

.tab-head h1 {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.24px;
}

.tab-head p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* «Сегодня»: день недели и дата надписью капителью, «Сегодня» — крупно (владелец 03.10, верх главной «Кружки») */
.tab-head.big {
  padding-bottom: 6px;
}

.tab-head.big .th-acts {
  align-self: center;
}

.tab-head .th-kick {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tab-head.big h1 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.3px;
}

/* ─── лист снизу ─────────────────────────────────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet .scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.sheet .panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 8px var(--gutter) calc(20px + var(--safe-b));
  border-radius: 26px 26px 0 0;
  background: var(--bg);
  transform: translateY(104%);
  transition: transform 0.34s var(--ease);
}

:root[data-theme="dark"] .sheet .panel,
:root[data-island] .sheet .panel {
  background: #121214;
}

.sheet.open .scrim {
  opacity: 1;
}

.sheet.open .panel {
  transform: none;
}

.grip {
  width: 36px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 3px;
  background: var(--ink-4);
}

.sheet-body > .btn + .btn,
.sheet-body > .btns + .btn,
.sheet-body > .btn + .note {
  margin-top: 10px;
}

.sheet-body .report {
  margin-bottom: 20px;
}

.sheet-lesson {
  margin: 0 0 20px;
}

.sheet-lesson .cov {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 16px;
  border-radius: var(--r-card);
  object-fit: cover;
  background: var(--well);
}

.sheet-lesson .pills {
  margin: 0 0 10px;
}

.sheet-lesson h3 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.sheet-lesson p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.done-sheet {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 4px 0 22px;
  text-align: center;
}

.done-sheet h3 {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

.done-sheet p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

/* источник исследования в конспекте */
.src-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.src-head .n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--btn-ink);
  background: var(--btn);
}

.src-head .kind {
  font-size: 14px;
  color: var(--ink-2);
}

.src-title {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 500;
}

.src-by {
  margin: 8px 0 22px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* ─── уведомление ────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabs-h) + 30px + var(--safe-b));
  z-index: 90;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  border-radius: 22px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--btn-ink);
  background: var(--btn);
  box-shadow: var(--float-shadow);
  transform: translate(-50%, 0);
  animation: toast 0.3s var(--ease) both;
}

body.full .toast {
  bottom: calc(24px + var(--safe-b));
}

body.composing .toast {
  bottom: calc(92px + var(--safe-b));
}

@keyframes toast {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* ─── загрузка ─────────────────────────────────────────────────────────────── */

/* экран ещё грузится — «Такты» по центру чуть выше середины; затянулось — шар из точек (app.js loader) */
.skel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58vh;
}

/* ─── пустые экраны и ошибки ─────────────────────────────────────────────── */

.empty {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 20px 12px 12px;
  text-align: center;
}

.empty .art {
  width: 104px;
  height: 104px;
  margin: 0 auto 10px;
}

.empty h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.empty p {
  max-width: 320px;
  margin: 8px auto 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.empty .btn {
  width: auto;
  min-width: 200px;
  margin-top: 22px;
}

.state {
  display: grid;
  place-content: center;
  min-height: 76vh;
  text-align: center;
}

/* ─── праздник ───────────────────────────────────────────────────────────── */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}

.confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 3px;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 540deg));
    opacity: 0.9;
  }
}

/* ─── кнопки ─────────────────────────────────────────────────────────────── */
/* Как у Пронина: главная — почти чёрная #1d1d1f (в тёмной теме белая), во всю ширину, 48 px, скругление 14,
   16/500. Вторая — серая #f0f0f0 («Все уроки»). Неактивная — серая с серым текстом («Продолжить» до галочек).
   Маленькая — таблетка «Открыть» на тёмной карточке. */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--btn-ink);
  background: var(--btn);
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    opacity 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.btn > .ic {
  display: none;
}

.btn.with-ic > .ic {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.btn:active {
  transform: scale(0.98);
  opacity: 0.86;
}

.btn[disabled] {
  color: var(--btn-off-ink);
  background: var(--btn-off);
  pointer-events: none;
}

.btn.second {
  font-size: 15px;
  color: var(--ink);
  background: var(--chip);
}

.btn.accent {
  color: var(--accent-ink);
  background: var(--accent);
}

.btn.blue {
  color: #ffffff;
  background: var(--blue);
}

.btn.ghost {
  min-height: 44px;
  color: var(--ink-2);
  background: transparent;
}

.btn.small {
  width: auto;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  font-size: 15px;
}

.btn.fit {
  width: auto;
  min-width: 0;
}

.btn.primary {
  color: var(--btn-ink);
  background: var(--btn);
}

/* на тёмной карточке: главная — белая, «Открыть» — полупрозрачная таблетка */
.on-dark .btn,
.card-dark .btn {
  color: #1d1d1f;
  background: #ffffff;
}

.on-dark .btn.second,
.card-dark .btn.second,
.card-dark .btn.small {
  color: #ffffff;
  background: var(--dark-pill);
}

.btns {
  display: grid;
  gap: 12px;
}

.btns.two {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btns.three {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.btns.two .btn,
.btns.three .btn {
  width: 100%;
  padding: 0 8px;
}

/* ссылка в тексте — подчёркнутые чернила 500, как «подписан на канал» */
.link-btn {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ─── группы строк: профиль, материалы, дела дня ─────────────────────────── */
/* Как профиль Пронина: серая плашка #f4f4f4 со скруглением 18, строка 70: круг 32 со сплошным цветом и белым
   знаком, название 16/500, пояснение 14 серым, справа — стрелка. Линия между строками — от текста до края. */

.list,
.group {
  margin: 0 0 16px;
  border-radius: var(--r-group);
  background: var(--well);
  overflow: hidden;
}

.item {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.item.static {
  cursor: default;
}

button.item:active {
  background: var(--well-2);
}

.item + .item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 60px;
  height: 1px;
  background: var(--line);
}

.list.plain .item + .item::before {
  left: 16px;
}

.item .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.item .txt b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.item .txt span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.item .val {
  flex: none;
  font-size: 15px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.item .go {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  color: var(--ink-3);
}

.item.locked .txt b {
  color: var(--ink-2);
}

/* значок строки: сплошной круг 32 и белый знак */
.bubble {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ib-gray);
}

.bubble .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.bubble.violet { background: var(--ib-violet); }
.bubble.blue { background: var(--ib-blue); }
.bubble.green { background: var(--ib-green); }
.bubble.teal { background: var(--ib-teal); }
.bubble.amber { background: var(--ib-amber); }
.bubble.pink { background: var(--ib-pink); }
.bubble.sky { background: var(--ib-sky); }
.bubble.red { background: var(--ib-red); }
.bubble.gray { background: var(--ib-gray); }
.bubble.ink,
.bubble.solid { background: var(--ib-ink); }
.bubble.accent { background: var(--accent); }

/* серая карточка с текстом */
.card {
  position: relative;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.card > p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.card > p:last-child {
  margin-bottom: 0;
}

.card > .btn,
.card > .btns {
  margin-top: 16px;
}

.card > .pills + .btn,
.card > .pills + .btns {
  margin-top: 14px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.card-head > .bubble {
  display: none;
}

.card-head h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.card-head .aside {
  font-size: 14px;
  color: var(--ink-2);
}

/* тёмная карточка на белом — как карточка курса у Пронина (#262629, скругление 20) */
.card-dark {
  position: relative;
  margin: 0 0 16px;
  padding: 20px;
  border-radius: var(--r-card);
  color: var(--dark-ink);
  background: var(--dark-card);
  box-shadow: inset 0 0 0 1px var(--dark-edge);
  overflow: hidden;
}

.card-dark .eyebrow,
.card-dark .t-time {
  color: var(--dark-ink-2);
}

/* ─── фишки, метки и переключатели ───────────────────────────────────────── */

.pill,
.chip-x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  background: var(--chip);
}

.pill .ic,
.chip-x .ic {
  width: 14px;
  height: 14px;
}

.pill.dark,
.chip-x.dark {
  color: var(--btn-ink);
  background: var(--btn);
}

.pill.pink,
.pill.accent,
.chip-x.accent {
  color: var(--accent-ink);
  background: var(--accent);
}

/* жёлтая метка «Без подписки» */
.pill.amber {
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12px;
  color: #1d1d1f;
  background: var(--warn);
}

.pill.soft {
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* синяя метка капителью — «ПЛЮС» */
.pill.caps {
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 12px;
  letter-spacing: 0.66px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button.chip-x {
  appearance: none;
  height: auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 19px;
  white-space: normal;
  text-align: left;
  line-height: 20px;
  cursor: pointer;
}

button.chip-x:active {
  background: var(--well-2);
}

/* метка в тексте — серая, как «Claude Code» и «Codex» в уроке */
.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 20px;
  color: var(--ink);
  background: var(--chip);
}

/* фильтры, как у Пронина: выбранный — чёрная таблетка, дальше черта и просто текст */
.seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  margin: 0 0 20px;
}

.seg button {
  appearance: none;
  position: relative;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.seg button:first-child {
  margin-right: 13px;
}

.seg button:first-child::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -8px;
  width: 1px;
  height: 16px;
  background: var(--rule);
}

.seg button.on {
  padding: 0 11px;
  font-weight: 500;
  color: var(--btn-ink);
  background: var(--btn);
}

/* выбор на всю ширину (тема, где заниматься) — серая дорожка, выбранный — белый сегмент */
.segm {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 14px;
  background: var(--well);
}

.segm button {
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 6px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.segm button.on {
  color: var(--ink);
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] .segm button.on,
:root[data-island] .segm button.on {
  background: #5c5c5c;
  box-shadow: none;
}

/* ─── шкалы ──────────────────────────────────────────────────────────────── */

.pbar {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.pbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform-origin: 0 50%;
  animation: grow 0.8s var(--ease) both;
}

.pbar.accent i {
  background: var(--accent);
}

.week-dots {
  display: flex;
  gap: 6px;
}

.week-dots i {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--track);
}

.week-dots i.done {
  background: var(--ink);
}

.week-dots i.now {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* самочувствие — пять делений, как индикатор сигнала */
.feelbar {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

.feelbar i {
  width: 4px;
  border-radius: 2px;
  background: var(--track);
}

.feelbar i:nth-child(1) { height: 36%; }
.feelbar i:nth-child(2) { height: 52%; }
.feelbar i:nth-child(3) { height: 68%; }
.feelbar i:nth-child(4) { height: 84%; }
.feelbar i:nth-child(5) { height: 100%; }

.feelbar i.on {
  background: var(--ink);
}

.feel-lbl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
}

/* кружок отметки, как в согласии у Пронина: пусто — серый круг, сделано — чёрный с белой галочкой */
.check,
.done-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--ink-4);
}

.check .ic,
.done-mark .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.done-mark,
.check.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.done-mark.big {
  width: 64px;
  height: 64px;
  border-radius: 32px;
}

.done-mark.big .ic {
  width: 30px;
  height: 30px;
}

/* ─── картинки ───────────────────────────────────────────────────────────── */

.art,
.obj {
  display: block;
  flex: none;
  object-fit: contain;
  pointer-events: none;
}

/* Ритм в шапке — шар на месте кружка профиля Пронина (36): антенна-нота выходит за круг вверх */
.avatar-btn {
  appearance: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.avatar-btn img {
  position: absolute;
  left: -12px;
  top: -20px;
  width: 60px;
  height: 60px;
  pointer-events: none;
}

.avatar-btn:active {
  transform: scale(0.92);
}

/* ─── формы ──────────────────────────────────────────────────────────────── */

.field {
  margin: 0 0 24px;
  transition: opacity 0.25s ease;
}

.field.off {
  opacity: 0.35;
  pointer-events: none;
}

/* подпись поля — «Что случилось» у Пронина: 14/500 чернилами */
.field > label,
.field > .label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.input,
.field input[type="text"],
.field input[type="email"] {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--well);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.input::placeholder,
.field input::placeholder {
  color: var(--ink-3);
}

/* варианты ответа — строки согласия Пронина: серая строка 50, слева кружок; выбранный — чёрный с галочкой */
.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.opt {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 14px 10px 12px;
  border: 0;
  border-radius: var(--r-row);
  background: var(--well);
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.opt::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--ink-4) center / 13px 13px no-repeat;
  transition: background-color 0.18s ease;
}

.opt:active {
  transform: scale(0.98);
}

.opt.on::before {
  background-color: var(--btn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .opt.on::before,
:root[data-island] .opt.on::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.opt .e {
  flex: none;
  font-size: 19px;
  line-height: 1;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: var(--r-group);
  background: var(--well);
  cursor: pointer;
}

.switch-row .lbl {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.switch {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: var(--ink-4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.22s var(--ease);
}

.switch.on {
  background: var(--good);
}

.switch.on::after {
  transform: translateX(20px);
}

/* подсказка — серая плашка «Запомни»: жёлтый знак, жирная первая строка, текст 16 */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--well);
}

.callout .ic {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--warn);
  stroke-width: 2.2;
}

.callout p {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.callout b {
  display: block;
  margin: 0 0 4px;
  font-weight: 500;
}

/* текст отчёта бота: абзацы 16/25, жирное — 500, цитата — серой плашкой */
.report {
  text-align: left;
}

.report p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.report p:last-child {
  margin-bottom: 0;
}

.report strong {
  font-weight: 500;
}

.report blockquote {
  margin: 14px 0 0;
  padding: 16px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
  background: var(--well);
}

.card .report blockquote {
  background: var(--bg);
}

/* выбор одного из нескольких строками: выбранная — с галочкой справа */
.radio-row .tick {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.radio-row.on .tick {
  opacity: 1;
}

.radio-row {
  min-height: 52px;
}

.radio-row .txt b {
  font-weight: 400;
}

.radio-row.on .txt b {
  font-weight: 500;
}

/* серая кнопка на серой плашке — белая */
.card .btn.second,
.ask .btn.second,
.hero .btn.second {
  background: var(--bg);
}

/* ─── скорость и отклик (03.10, docs/performance-2026-10-02.md) ─────────────────────────────────────────────
   Заставка при запуске, ожидание на кнопке, которая отправила запрос, и нажатие у кнопок, где его не было видно.
   Только токены «Ритма 5»: фон страницы, чернила и пояснения; никаких градиентов и свечения. */

/* Заставка — «Проявление» (владелец 03.10, вместо чёрного экрана с шаром): сразу виден точечный набросок экрана той
   же формы (шапка, карточка дня, плитки), по нему бежит волна. Пришёл первый экран — набросок уходит, экран
   проявляется из размытия сверху вниз (.screen.develop, app.js watchSplash). Ждать пришлось дольше 2,5 с — поверх
   наброска шар из точек (общий компонент ожидания ниже) и подпись. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 75; /* над вкладками и полем ввода, под листом и уведомлениями */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter) 14vh;
  background: var(--bg);
  transition:
    opacity 0.28s var(--ease),
    visibility 0s linear 0.28s;
}

.splash.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sp-sketch {
  position: absolute;
  inset: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(14px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)) var(--gutter) 0;
  transition: opacity 0.3s ease;
}

.splash.slow .sp-sketch {
  opacity: 0.3;
}

.sp-sketch i {
  display: block;
  margin-top: 16px;
  border-radius: 20px;
  background-image: radial-gradient(circle, var(--ink-3) 1.25px, transparent 1.75px);
  background-size: 9px 9px;
  opacity: 0.22;
  animation: sp-wave 1.8s ease-in-out infinite;
}

.sp-sketch .s1 { width: 34%; height: 14px; margin-top: 10px; border-radius: 6px; }
.sp-sketch .s2 { width: 52%; height: 30px; margin-top: 8px; border-radius: 8px; animation-delay: 0.08s; }
.sp-sketch .s3 { height: 80px; margin-top: 22px; border-radius: 40px; animation-delay: 0.16s; }
.sp-sketch .s4 { height: 236px; margin-top: 22px; animation-delay: 0.24s; }
.sp-sketch .s5 { height: 96px; animation-delay: 0.32s; }
.sp-sketch .s6,
.sp-sketch .s7 { display: inline-block; width: calc(50% - 6px); height: 150px; animation-delay: 0.4s; }
.sp-sketch .s7 { margin-left: 12px; animation-delay: 0.46s; }

@keyframes sp-wave {
  0%,
  100% {
    opacity: 0.22;
  }
  45% {
    opacity: 0.85;
  }
}

/* первый экран проявляется из наброска: каждый блок резкеет со своей задержкой, сверху вниз */
.screen.develop > * {
  animation: sp-develop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(min(var(--i, 0), 8) * 140ms);
}

@keyframes sp-develop {
  0% {
    filter: blur(14px);
    opacity: 0.3;
  }
  50% {
    filter: blur(4px);
    opacity: 0.9;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}

.sp-orb {
  position: relative;
}

/* подпись появляется, только если ждать приходится заметно; совсем долго — подсказка, что делать */
.splash-note {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 40px;
  margin: 18px 0 0;
}

.splash-note span {
  position: absolute;
  inset: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* классы ставит app.js по времени (watchSplash): через 2,5 с — «собираю», через 14 с — что делать */
.splash.slow .wait,
.splash.stuck .late {
  opacity: 1;
}

.splash.stuck .wait {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sp-sketch i,
  .screen.develop > * {
    animation: none;
  }
}

/* ─── ожидание: один компонент на три длительности (app.js loader) ───────────────────────────────────────────────
   «Такты» — короткое ожидание: четыре точки, первая крупнее (сильная доля), удар бежит по кругу — 100 ударов в
   минуту. «Шар из точек» — долгое: 18 точек слетаются в круг Ритма, у него появляются глаза, он делает удар и
   моргает. Только чернила: без цвета, свечения и объёма. */
.ld {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: ld-in 0.2s ease 0.15s both; /* на быстрой сети ожидание не мигает */
}

@keyframes ld-in {
  from {
    opacity: 0;
  }
}

.ld-beat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 16px;
}

.ld-beat i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  animation: ld-tick 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.ld-beat i:first-child {
  width: 11px;
  height: 11px;
}

.ld-beat i:nth-child(2) { animation-delay: 0.6s; }
.ld-beat i:nth-child(3) { animation-delay: 1.2s; }
.ld-beat i:nth-child(4) { animation-delay: 1.8s; }

@keyframes ld-tick {
  0% {
    opacity: 1;
    transform: scale(1.45);
  }
  18% {
    opacity: 0.85;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}

.ld-beats {
  color: var(--ink);
}

.ld-orb {
  gap: 22px;
  min-height: 132px;
  color: var(--ink);
}

.ld-ring {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  animation: ld-beat-orb 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s infinite;
}

.ld-ring i {
  position: absolute;
  left: 34.5px;
  top: 34.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: ld-gather 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ld-eyes {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 9px;
  margin: -8px 0 0 -10.5px;
  animation:
    ld-eyes-in 0.3s ease-out 0.95s both,
    ld-blink 3.2s ease-in-out 1.6s infinite;
}

.ld-eyes u {
  display: block;
  width: 6px;
  height: 16px;
  border-radius: 3px;
  background: currentColor;
}

@keyframes ld-gather {
  from {
    transform: translate(var(--x0), var(--y0)) scale(0.5);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    transform: translate(var(--x1), var(--y1)) scale(1);
    opacity: 1;
  }
}

@keyframes ld-beat-orb {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.14);
  }
  32% {
    transform: scale(0.97);
  }
  48% {
    transform: scale(1);
  }
}

@keyframes ld-eyes-in {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}

@keyframes ld-blink {
  0%,
  44%,
  52%,
  100% {
    transform: scaleY(1);
  }
  48% {
    transform: scaleY(0.12);
  }
}

.ld-note {
  margin: 0;
  max-width: 280px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
}

.ld-note:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ld,
  .ld-beat i,
  .ld-ring,
  .ld-ring i,
  .ld-eyes {
    animation: none;
  }

  .ld-ring i {
    transform: translate(var(--x1), var(--y1));
  }

  .ld-beat i {
    opacity: 0.45;
  }
}

/* картинка, которая ещё грузится, не мелькает пустым местом: место под неё уже есть, сама она проявится (app.js) */
#app img.ld-wait {
  opacity: 0;
}

/* Ожидание на кнопке: запрос ушёл, ответа ещё нет (через туннель это 0,4–1,2 с). Появляется через 0,15 с, чтобы на
   быстрой сети ничего не мигало; второе нажатие в это время не проходит. */
.is-busy {
  pointer-events: none;
}

.btn.is-busy {
  position: relative;
  color: transparent;
}

.btn.is-busy > * {
  visibility: hidden;
}

.btn.is-busy > .busy-beat {
  position: absolute;
  inset: 0;
  justify-content: center;
  height: auto;
  visibility: visible;
  color: var(--btn-ink);
}

.btn.second.is-busy > .busy-beat,
.btn.ghost.is-busy > .busy-beat {
  color: var(--ink);
}

.busy-beat i {
  width: 6px;
  height: 6px;
}

.busy-beat i:first-child {
  width: 8px;
  height: 8px;
}

button.item.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sp-spin 0.7s linear infinite;
}

button.item.is-busy {
  position: relative;
}

button.item.is-busy::after {
  right: 18px;
  color: var(--ink-2);
}

button.item.is-busy > .go,
button.item.is-busy > .check {
  visibility: hidden;
}

button.is-busy:not(.btn):not(.item) {
  opacity: 0.55;
}

@keyframes sp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Нажатие видно у всех кнопок: у этих своего состояния не было (в iOS :active работает только со слушателем
   касаний — его ставит app.js). Свои правила разделов ниже по порядку файлов главнее этих. */
.back-link:active,
.flow-back:active,
.info-btn:active,
.link-btn:active,
.pl-close:active,
.tr-copy:active,
.kp-row:active,
.kf-head:active {
  opacity: 0.6;
}

.pl-send:active,
.send:active {
  transform: scale(0.92);
}

/* ─── общие разделы: заголовок страницы и тёмная карточка раздела (месяц клуба, пустой «Мой ритм») ───────────── */
/* «Сегодня» с вечера 03.10 — в 28-home.css (карточка дня с тактами, сообщения Ритма, плитки). Здесь — то, что
   осталось общим: раздел с тёмной карточкой 20 и строкой «что это → Открыть». */

.page-head {
  margin: 4px 0 20px;
}

.page-head .title {
  margin: 0;
}

.page-head .lead {
  margin: 8px 0 0;
}

.feature {
  margin: 20px 0 8px;
}

.feature .kicker {
  margin: 0 0 6px;
}

.feature h2 {
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.19px;
  color: var(--ink);
  text-wrap: balance;
}

.feature .meta {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 236px;
  margin: 14px 0 0;
  border-radius: var(--r-card);
  color: var(--dark-ink);
  background: var(--dark-card);
  box-shadow: inset 0 0 0 1px var(--dark-edge);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.16s ease;
}

.feature-card:active {
  transform: scale(0.985);
}

.fc-art {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 22px 20px 8px;
}

.fc-art > * {
  width: 100%;
}

.fc-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 20px;
}

.fc-meta {
  font-size: 14px;
  line-height: 18px;
  color: var(--dark-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-arrow {
  width: 18px;
  height: 18px;
  color: var(--dark-ink-2);
  stroke-width: 1.6;
}

.fc-btn {
  appearance: none;
  justify-self: end;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: var(--dark-pill);
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
}

/* ─── «Программа» ────────────────────────────────────────────────────────── */
/* Как у Пронина: раздел курса, карточка-счётчик (как «+28 800» в его приложении), фильтр «Уроки | Материалы» и
   уроки отдельными строками со скруглением 12 и зазором 8 — «1 УРОК | название», справа замок. */

.course-sec {
  margin-bottom: 14px;
}

/* счётчик: большое число, подпись и шкала */
.stat-card {
  margin: 0 0 20px;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.sc-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sc-big b {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.sc-big span {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-2);
}

.stat-card > p {
  margin: 2px 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* неделя: название 15/500 и рядом мелко сколько пройдено */
.wk-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 10px;
}

.wk-head b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.wk-head small {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.lrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lrow {
  padding: 0 16px;
  border-radius: 12px;
  background: var(--well);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.16s ease;
}

.lrow:active {
  transform: scale(0.99);
  background: var(--well-2);
}

.lr-top {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 0;
}

.lr-n {
  flex: none;
  width: 24px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
}

.lr-k {
  flex: none;
  position: relative;
  margin: 0 12px 0 10px;
  padding-right: 12px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lr-k::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 1px;
  height: 18px;
  background: var(--rule);
}

.lr-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lr-t b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink);
}

.lr-t small {
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.lrow .lr-lock,
.lrow .lr-done {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 10px;
}

.lr-lock {
  color: var(--ink-3);
  stroke-width: 1.8;
}

.lr-done {
  color: var(--good);
  stroke-width: 2.4;
}

.lrow.locked .lr-t b,
.lrow.paywall .lr-t b,
.lrow.next .lr-t b,
.lrow.soon .lr-t b {
  color: var(--ink-2);
}

/* урок дня раскрыт: рамка и кнопка под названием, как «Начать обучение» у Пронина */
.lrow.today {
  padding-bottom: 12px;
  box-shadow: inset 0 0 0 1px var(--rule);
}

.lrow.today .lr-t b {
  font-weight: 500;
}

.lrow .lr-btn {
  min-height: 42px;
  border-radius: 12px;
  font-size: 15px;
}

/* «Материалы» */
.group-label {
  margin: 20px 0 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.empty-card {
  padding: 8px 16px 20px;
}

.tag-lock {
  flex: none;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
  white-space: nowrap;
}

.tag-lock.on {
  color: var(--accent-ink);
  background: var(--accent);
}

.gift-view .title {
  margin: 4px 0 16px;
}

.gift-view img {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border-radius: var(--r-card);
  -webkit-touch-callout: default;
  pointer-events: auto;
}

/* мини-курсы: шкала дней, задание дня тёмной карточкой, дни строками */
.sm-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 16px;
}

.sm-bar {
  flex: 1;
  display: flex;
  gap: 4px;
}

.sm-bar i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}

.sm-bar i.on {
  background: var(--good);
}

.sm-bar i.no {
  background: var(--ink-3);
}

.sm-bar i.now {
  background: var(--accent);
}

.sm-progress span {
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
}

.sm-line {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 21px;
  background: var(--well);
}

.sm-today .kicker {
  margin: 0 0 6px;
  color: var(--dark-ink-2);
}

.sm-today h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.sm-fact {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--dark-ink-2);
}

.card .sm-fact,
.sheet-lesson .sm-fact {
  color: var(--ink-2);
}

.sm-task {
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.sm-task b {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dark-ink-2);
}

.sm-task p {
  margin: 0;
  font-size: 16px;
  line-height: 23px;
}

.sm-mark {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.sm-mark.ok,
.sm-mark.late {
  color: #00d492;
}

.lrow.cur {
  box-shadow: inset 0 0 0 1px var(--rule);
}

.lrow.cur .lr-t b {
  font-weight: 500;
}

.sm-plan {
  margin: 12px 0 8px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 22px;
}

.sm-plan li + li {
  margin-top: 4px;
}

.sm-best {
  margin-top: 4px;
}

.sm-best .kicker {
  margin: 0 0 6px;
  color: var(--dark-ink-2);
}

.sm-best h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.streams .list + .btn.second {
  margin-top: -8px;
}

/* ─── тропа курса (03.10, вариант «Тропа»): одна линия через курс, недели волнами, тёмная карточка у узла ──────────
   Пройденный путь и шаг к следующему уроку — чернилами (линия 4), дальше — точками. Узел 60: пройден — чернилами с
   белым значком, урок дня — 76 цветом курса с тихим кругом, впереди — серый. Разбор недели — 66 с кольцом из семи
   долей. Подпись рядом с узлом: «Урок 10 · завтра» 12 серым и название 16/500. Карточка у узла — как карточка дня. */
.trail {
  margin: 6px 0 0;
}

.tr-wk {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 26px 0 18px;
  text-align: center;
}

/* линия тропы идёт сквозь заголовок недели: текст стоит на фоне страницы */
.tr-wk::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 5px;
  margin-left: -2.5px;
  background: radial-gradient(circle, var(--ink-4) 2.4px, transparent 2.6px) center top / 5px 11px repeat-y;
}

.tr-wk.on::before {
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
}

.tr-wk.first::before {
  display: none;
}

.tr-wk .in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  padding: 6px 14px;
  background: var(--bg);
}

.tr-wk small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tr-wk b {
  margin-top: 4px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.tr-wk span {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tr-field {
  position: relative;
}

.tr-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.tr-svg path {
  fill: none;
  stroke-linecap: round;
}

.tr-svg path.on {
  stroke: var(--ink);
  stroke-width: 4;
}

.tr-svg path.off {
  stroke: var(--ink-4);
  stroke-width: 5;
  stroke-dasharray: 0.1 11;
}

.tr-node {
  appearance: none;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--well);
  color: var(--ink-3);
  box-shadow: 0 0 0 5px var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s var(--ease);
}

.tr-node:active {
  transform: scale(0.92);
}

.tr-node .ic {
  position: relative;
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

.tr-node.done {
  background: var(--ink);
  color: var(--bg);
}

.tr-node.next,
.tr-node.missed,
.tr-node.paywall {
  color: var(--ink-2);
}

.tr-node.today {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  background: var(--accent);
  color: #ffffff;
}

.tr-node.today .ic {
  width: 32px;
  height: 32px;
}

/* урок дня — тихий круг расходится раз в 2,6 с: глаз сразу находит, куда нажать */
.tr-node.today::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent);
  opacity: 0;
  animation: tr-pulse 2.6s var(--ease) 0.6s infinite;
}

.tr-node.today.fx::after {
  display: none;
}

@keyframes tr-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

.tr-node.sel {
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--ink);
}

.tr-node.review {
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
}

.tr-node .wk-ring {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  overflow: visible;
}

.tr-node .wk-ring path {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 4;
  stroke-linecap: round;
}

.tr-node .wk-ring path.on {
  stroke: var(--ink);
}

.tr-lbl {
  position: absolute;
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.tr-lbl.l {
  text-align: right;
}

.tr-lbl small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.tr-lbl.now small {
  color: var(--ink);
  font-weight: 500;
}

.tr-lbl b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.tr-lbl.future b {
  color: var(--ink-2);
}

/* карточка урока у узла — тёмная, как карточка дня; хвостик смотрит на узел */
.tr-pop {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--dark-card);
  box-shadow: inset 0 0 0 1px var(--dark-edge);
  color: var(--dark-ink);
  transform-origin: var(--ox, 50%) 0;
  animation: tr-pop 0.3s var(--spring) both;
}

.tr-pop::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(var(--ox, 50%) - 8px);
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--dark-card);
  transform: rotate(45deg);
}

@keyframes tr-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
  }
}

.tr-pop .kicker {
  margin: 0;
  color: var(--dark-ink-2);
}

.tr-pop h3 {
  margin: 6px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.tr-sub {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--dark-ink-2);
}

.tr-hint {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--dark-ink-2);
}

.tr-pop .btn {
  width: 100%;
  margin-top: 16px;
  background: var(--dark-ink);
  color: var(--dark-card);
}

.tr-got {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tr-got li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 21px;
}

.tr-got li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tr-got .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* «урок пройден» (app.js trailFx): заливка чернилами, галочка, штрихи, «+3 такта», счёт прокручивается */
.tr-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
}

.tr-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.tr-check svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--bg);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.tr-node.fx .ic {
  color: #ffffff;
}

.tr-ray {
  position: absolute;
  z-index: 3;
  width: 3px;
  height: 12px;
  margin: -6px 0 0 -1.5px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.tr-chip {
  position: absolute;
  z-index: 7;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  line-height: 32px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.tr-swap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.tr-swap.done {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
}

.tr-roll {
  display: inline-block;
  height: 20px;
  overflow: hidden;
  vertical-align: top;
}

.tr-roll > span {
  display: block;
}

.tr-roll i {
  display: block;
  height: 20px;
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .tr-node.today::after,
  .tr-pop {
    animation: none;
  }
}

/* ─── «Профиль» ──────────────────────────────────────────────────────────── */
/* 03.10: один главный блок — кто ты и уровень, ниже два списка строк со значениями (как первая версия профиля,
   но в системе Пронина). Настройки — отдельными короткими экранами, а не карточками посреди профиля. */

.me-card {
  appearance: none;
  display: block;
  width: 100%;
  margin: 20px 0 16px;
  padding: 16px;
  border: 0;
  border-radius: var(--r-group);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.me-card:active {
  background: var(--well-2);
}

.me-who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.me-ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 500;
  color: #ffffff;
  background: var(--ib-ink); /* цвет курса на экране один — у шкалы уровня */
}

.me-ava .ic {
  width: 20px;
  height: 20px;
}

.me-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.me-name b {
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
}

.me-name span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.me-lv {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.me-lv-top,
.lv-now-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.me-lv-n,
.lv-now-n {
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.me-lv-name {
  display: block;
  margin: 4px 0 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.me-lv-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.me-lv-next .go {
  flex: none;
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
  color: var(--ink-3);
}

/* ─── короткие экраны настроек: уведомления, где заниматься, оформление ─── */

.sw-list .item + .item::before,
.list .plain-row + .item::before {
  left: 16px;
}

.sw-row {
  min-height: 72px;
}

.sw-row .txt {
  padding-right: 4px;
}

.sw-hint {
  margin: -6px 4px 20px;
}

.notify .hint .link-btn {
  font-size: 14px;
  color: var(--ink);
}

/* выбор одного варианта — строки согласия Пронина, в два ряда: название и пояснение */
.choice {
  display: grid;
  gap: 8px;
}

.opt.wide {
  align-items: flex-start;
  padding: 14px 16px 14px 14px;
}

.opt.wide::before {
  margin-top: 0;
}

.opt-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.opt-txt b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.opt-txt span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-2);
}

.mode-view .hint.after {
  margin: 14px 4px 0;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mode-view .hint.after.on {
  opacity: 1;
}

.theme-view .hint {
  margin: 12px 4px 0;
}

.zone-sheet h3 {
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
}

.zone-sheet .hint {
  margin: 6px 0 16px;
}

.zone-sheet .opt.wide {
  min-height: 50px;
  padding: 13px 16px 13px 14px;
}

/* общая шапка короткого экрана (инструменты, уровни, настройки) */
.tool-head {
  margin: 8px 0 20px;
}

.tool-head .eyebrow-s {
  margin: 0 0 2px;
}

.tool-head .lead {
  margin-top: 8px;
}

/* ─── уровни ─────────────────────────────────────────────────────────────── */
/* Главный блок — где ты сейчас: уровень N из 5, шкала до следующего, примерно сколько дней и подарок следующего
   уровня. Ниже — все уровни одной группой (пройденные — зелёной галочкой, текущий — цветом курса) и за что такты. */

.lv-now {
  margin: 0 0 8px;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.lv-now h2 {
  margin: 4px 0 12px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

.lv-now-next {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* подарок следующего уровня — строкой под линией в той же карточке, без своей плашки */
.lv-gift {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 21px;
  color: var(--ink);
}

.lv-gift .ic {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  color: var(--ink-2);
}

.lv-list {
  padding: 0;
  list-style: none;
}

.lv-list .item {
  align-items: flex-start;
  min-height: 0;
  padding: 14px 16px;
}

.lv-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  background: var(--ink-4);
}

.lv-dot .ic {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.lv-row.done .lv-dot {
  background: var(--good);
}

.lv-row.now .lv-dot {
  color: var(--btn-ink);
  background: var(--btn); /* текущий — чёрным, как выбранное у Пронина; цвет курса — только у шкалы */
}

.lv-row.next .txt b {
  color: var(--ink-2);
}

.lv-list .txt small {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}

.earn .item {
  min-height: 56px;
}

.earn-n {
  flex: none;
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ─── «Подъём и темп» ────────────────────────────────────────────────────── */

.time-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}

.tchip {
  appearance: none;
  min-height: 46px;
  padding: 8px 4px;
  border: 0;
  border-radius: 14px;
  background: var(--well);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.tchip:active {
  transform: scale(0.96);
}

.tchip.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.fine {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--r-group);
  background: var(--well);
}

.fine-mid {
  flex: 1;
  text-align: center;
}

.fine-val {
  display: block;
  font-size: 30px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

.fine-mid small {
  font-size: 12px;
  color: var(--ink-2);
}

.tp-step {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--bg);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.tp-step:active {
  transform: scale(0.92);
}

.pace {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pace-opt {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: var(--well);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.pace-opt:active {
  transform: scale(0.97);
}

.pace-opt b {
  font-size: 15px;
  font-weight: 500;
}

.pace-opt small {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.pace-opt.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.pace-opt.on small {
  color: inherit;
  opacity: 0.7;
}

.wake-preview {
  transition: opacity 0.2s ease;
}

.wake-preview.loading {
  opacity: 0.45;
  pointer-events: none;
}

.wake-card .facts {
  margin-top: 12px;
}

.pv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.pv-stats div {
  padding: 10px 8px;
  border-radius: 14px;
  background: var(--bg);
  text-align: center;
}

.pv-stats b {
  display: block;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pv-stats span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.pv-empty {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pv-empty .ic {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--ink-2);
}

.pv-empty p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
}

.wake .btn.ghost {
  margin-top: 4px;
}

/* клуб — свой файл css/22-club.css */

/* что теперь будет — после выбора, как «✓ Рассылку можно отключить в профиле» у Пронина: зелёная галочка */
.mode-view .after .ic.ok {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  stroke-width: 2.6;
  color: var(--good);
}

/* «Помощь» в профиле: счётчик непрочитанного рядом со стрелкой (тот же, что на шаре Ритма в шапке) */
.help-aside {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* ─── «Мой ритм» ─────────────────────────────────────────────────────────── */
/* 03.10, владелец: «графики плотные, хочется воздушнее и современнее». Фильтр периода — сверху, счётчик как
   «+28 800» у Пронина (четыре числа без цветных точек: они ничего не обозначали), один график ночей вместо двух,
   больше воздуха между блоками, разница недель — серым, без красного и зелёного. */

.seg.period {
  margin: 18px 0 14px;
}

.rhythm .stat-card {
  margin-bottom: 8px;
}

.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 16px;
  margin-top: 18px;
}

.sc-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-grid b {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}

.sc-grid span {
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.rhythm .section {
  margin-top: 32px;
}

.chart-card {
  padding: 18px 16px 16px;
}

.chart-card > .facts {
  margin: 14px 2px 0;
}

.chart-card > .facts:first-child {
  margin: 0 2px 14px;
}

.cmp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 18px 12px;
  text-align: center;
}

.cmp b {
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cmp span {
  display: block;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.cmp .delta {
  margin-top: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.list.more {
  margin-top: 32px;
}

/* ─── графики: общее ─────────────────────────────────────────────────────── */

.chart-box {
  position: relative;
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font);
}

.chart .grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart .grid.dash {
  stroke-dasharray: 3 4;
}

.chart .axis {
  fill: var(--chart-axis);
  font-size: 12px;
  font-weight: 400;
}

.chart .axis.we {
  fill: var(--accent-text);
}

.chart .axis.strong {
  fill: var(--ink);
  font-weight: 500;
}

.chart .axis.unit {
  font-size: 12px;
}

.chart .target {
  stroke: var(--ink);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.chart .miss {
  stroke: var(--ink-4);
  stroke-width: 2;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.chart .tick {
  stroke: var(--chart-grid);
}

.chart .hit {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

.chart .bar {
  transition: opacity 0.2s ease;
}

.chart .bar.f1 { fill: var(--c-f1); }
.chart .bar.f2 { fill: var(--c-f2); }
.chart .bar.f3 { fill: var(--c-f3); }
.chart .bar.f4 { fill: var(--c-f4); }
.chart .bar.f5 { fill: var(--c-f5); }

.chart .bar.grow {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: grow 0.6s var(--ease) backwards;
}

.chart .dbar {
  fill: var(--ink-4);
  transition: opacity 0.2s ease;
}

.chart .dbar.good {
  fill: var(--accent);
}

.chart .dbar.rise {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rise-y 0.6s var(--ease) backwards;
}

@keyframes rise-y {
  from {
    transform: scaleY(0);
  }
}

.picking .bar,
.picking .dbar {
  opacity: 0.25;
}

.picking .bar.on,
.picking .dbar.on {
  opacity: 1;
}

.night-pick {
  display: none;
  margin: 12px 2px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

.night-pick.on {
  display: block;
  animation: fade-in 0.28s var(--ease) backwards;
}

.night-pick b {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.night-pick span {
  color: var(--ink-2);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 14px 2px 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.chart-legend + .chart-legend {
  margin-top: 6px;
}

.chart-legend .dash {
  width: 22px;
  border-top: 2px dashed var(--ink);
  opacity: 0.6;
}

.chart-legend .dash.ahead {
  margin-left: 6px;
  border-top-color: var(--accent);
  opacity: 1;
}

.chart-legend .key {
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: var(--ink-4);
}

.chart-legend .key.ok {
  background: var(--accent);
}

.chart-legend .key + .key,
.chart-legend .key ~ .dash {
  margin-left: 8px;
}

.chart-legend .dot-hit,
.chart-legend .dot-miss {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chart-legend .dot-hit {
  background: var(--accent);
}

.chart-legend .dot-miss {
  margin-left: 6px;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* лесенка — в цвете курса: пройденный путь сплошной, дальше — пунктир, цель — нейтральная линия */
.chart .goal-l {
  stroke: var(--ink);
  stroke-opacity: 0.4;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.chart .goal-t {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.chart .today-l {
  stroke: var(--chart-grid);
  stroke-width: 1.5;
}

.chart .today-t {
  fill: var(--ink-2);
  font-size: 12px;
}

.chart .stairs {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .stairs.plan {
  stroke-dasharray: 5 5;
  opacity: 0.55;
}

.chart .stairs.fade {
  animation: fade-in 0.6s ease 0.6s backwards;
}

.chart .stairs.draw {
  animation: draw 1.1s var(--ease) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.chart .goal-d {
  fill: var(--ink);
  stroke: var(--well);
  stroke-width: 2.5;
}

.chart .start-d {
  fill: var(--accent);
  stroke: var(--well);
  stroke-width: 2.5;
}

.chart .wake-d {
  fill: var(--well);
  stroke: var(--accent);
  stroke-width: 2;
  transition: opacity 0.2s ease;
}

.chart .wake-d.hit {
  fill: var(--accent);
  stroke: var(--well);
}

.picking .wake-d {
  opacity: 0.35;
}

.picking .wake-d.on {
  opacity: 1;
}

.chart .pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pop 0.4s var(--ease) backwards;
}

.chart .pop.late {
  animation-delay: 0.85s;
}

@keyframes pop {
  from {
    transform: scale(0);
  }
}

/* ─── ночи столбиками ────────────────────────────────────────────────────── */

.chart .nbar {
  fill: var(--ink-4);
  transition: opacity 0.2s ease;
}

.chart .nbar.ok {
  fill: var(--accent);
}

.chart .nbar.rise {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: rise-y 0.6s var(--ease) backwards;
}

.chart .nplan {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.chart .nmiss {
  fill: var(--ink-4);
}

/* ─── «Мелодия сна» ──────────────────────────────────────────────────────── */
/* Нотный стан по 15 ночей: линии стана — как линии в группах, ноты — цветом курса (залитая — сна хватило,
   пустая — меньше нормы), тонкая линия мелодии. Та же раскладка у картинки для сохранения (render/melody.py). */

.melody-card {
  padding: 18px 14px 16px;
}

.chart.staff .staff-l {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .melody-l {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.35;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.chart .melody-l.fade {
  animation: fade-in 0.6s ease 0.4s backwards;
}

.chart .nt ellipse {
  fill: var(--well);
  stroke: var(--accent);
  stroke-width: 1.6;
}

.chart .nt.full ellipse {
  fill: var(--accent);
  stroke: none;
}

.chart .nt line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.chart .nt {
  transition: opacity 0.2s ease;
}

.picking .nt {
  opacity: 0.3;
}

.picking .nt.on {
  opacity: 1;
}

.read-list .item {
  min-height: 64px;
}

/* «как читать» — нота такой же, как на стане: цвета курса на белом круге */
.rd-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--bg);
}

.rd-ic .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.note-mark {
  width: 15px;
  height: 20px;
  overflow: visible;
}

.note-mark ellipse {
  fill: var(--bg);
  stroke: currentColor;
  stroke-width: 1.9;
}

.note-mark.full ellipse {
  fill: currentColor;
  stroke: none;
}

.note-mark line {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.melody-btns {
  margin-top: 24px;
  gap: 8px;
}

.melody-wait .pbar {
  margin-top: 4px;
}

/* подпись легенды не разрывается: знак и слова — вместе */
.chart-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  white-space: nowrap;
}

.chart-legend .lg .dash.ahead,
.chart-legend .lg .dot-miss {
  margin-left: 0;
}

/* лесенка и якорь: под графиком — строки «подпись — значение» через линию, как строки группы (без плиток) */
.kv-rows {
  margin-top: 14px;
}

.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}

.kv-row span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.kv-row b {
  flex: none;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.kv-row .link-btn {
  flex: none;
  font-size: 14px;
  color: var(--ink);
}

.kv-card {
  padding: 4px 16px;
}

.kv-card .kv-rows {
  margin: 0;
}

.kv-card .kv-row:first-child {
  border-top: 0;
}

/* ─── «Мой ритм» по курсам ───────────────────────────────────────────────── */

/* курс — сегментом во всю ширину под шапкой (если курсов несколько); период — тихим текстом у заголовка графика */
.segm.rh-courses {
  margin: 18px 0 0;
}

.rhythm > .stat-card {
  margin-top: 20px;
}

.section .per {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 6px;
}

.per button {
  appearance: none;
  padding: 4px 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
}

.per button.on {
  font-weight: 500;
  color: var(--ink);
}

.per-sep {
  font-size: 14px;
  color: var(--ink-3);
}

/* «что с этим делать» — строкой под линией в главном блоке, без своей плашки (критик: коробка в коробке) */
.now-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.now-line > .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  stroke-width: 1.8;
  color: var(--ink-2);
}

.now-line .txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.now-line .txt span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.now-line .txt b {
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: var(--ink);
}

/* по дням: подпись строки и её число, под ними точки по дням */
.chart .row-l {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.chart .row-n {
  fill: var(--ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.chart .dg {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.4;
  transition: opacity 0.2s ease;
}

.chart .dg.full {
  fill: var(--accent);
  stroke: none;
}

.chart-legend .dgk {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px var(--ink-4);
}

.chart-legend .dgk.full {
  background: var(--accent);
  box-shadow: none;
}

/* подписи у краёв оси времени и метка выбранной ночи или дня над графиком */
.chart .axis-w {
  fill: var(--ink-2);
  font-size: 12px;
}

.chart .pick-t {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
}

.chart .col-on {
  fill: var(--well-2);
  pointer-events: none;
}

.chart-legend .line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ─── отметки: ночь и день ───────────────────────────────────────────────── */

.form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
}

.form-head .art {
  display: none;
}

.form-head + .lead {
  margin: 8px 0 24px;
}

/* время: крупно посередине, по бокам «−15» и «+15»; нажатие на время — системный выбор */
.tp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-group);
  background: var(--well);
}

.tp-time {
  position: relative;
  flex: 1;
  display: block;
  text-align: center;
  font-size: 30px;
  line-height: 48px;
  font-weight: 500;
  letter-spacing: -0.8px;
  cursor: pointer;
}

.tp-time input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
  font-size: 16px;
}

.tp-extra {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.tp-extra .btn {
  min-height: 38px;
  font-size: 14px;
}

/* что было за день — строками согласия: кружок, значок и слово */
.opts.factors {
  grid-template-columns: 1fr;
}

/* самочувствие — пять делений и слово */
.feels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.feel {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 78px;
  padding: 12px 2px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.feel:active {
  transform: scale(0.96);
}

.feel.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.feel.on .feelbar i {
  background: currentColor;
  opacity: 0.3;
}

.feel.on .feelbar i.on {
  opacity: 1;
}

.feels + .hint {
  text-align: center;
}

/* итог формы до сохранения: тёмной строкой */
.estimate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-group);
  color: var(--dark-ink);
  background: var(--dark-card);
}

.estimate .ic {
  color: var(--accent);
}

.estimate b {
  display: block;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
}

.estimate span {
  font-size: 14px;
  color: var(--dark-ink-2);
}

.submit {
  margin-top: 8px;
}

/* «уже отмечено»: сон крупно, отрезок отбой → подъём */
.sleepline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 12px;
}

.sleepline b {
  font-size: 30px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.6px;
}

.span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.span i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}

/* фишки выбора нескольких (вечер, напитки) */
.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 19px;
  background: var(--well);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.chip:active {
  transform: scale(0.96);
}

.chip.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.chip.small {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 12px;
}

.card .chip {
  background: var(--bg);
}

.card .chip.on {
  background: var(--btn);
}

.routine-chips {
  margin: 12px 0 14px;
}

/* ─── итог отметки ───────────────────────────────────────────────────────── */

.result {
  padding-top: 8px;
}

.result > .art {
  width: 96px;
  height: 96px;
  margin: 0 auto 8px;
}

.result h1 {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.5px;
  text-align: center;
}

.result > .card {
  padding: 18px;
}

.result > .btns,
.result > .btn {
  margin-top: 12px;
}

/* ─── отметка ночи шагами (03.10): один вопрос на экран, как знакомство ─────────────────────────────────── */
.nflow .flow-body > .title {
  margin: 8px 0 8px;
}

.nflow .flow-body > .lead {
  margin: 0 0 16px;
}

.nflow-start {
  margin-top: 4px;
}

.nflow .field {
  margin: 8px 0 0;
}

.nflow .feels {
  margin-top: 8px;
}

.nflow .flow-main {
  margin-top: 20px;
}

.nflow-sum {
  margin: 8px 0 0;
}

.nflow-sum span {
  display: block;
}

/* ─── отметка дня: группы с воздухом, значок у каждого пункта, отметка — кругом справа ────────────────────── */
.day-title {
  margin: 12px 0 8px;
}

.factor-list .check-row {
  min-height: 56px;
}

.factor-list .check-row .box {
  margin-left: auto;
}

.list.factor-list .check-row + .check-row::before {
  left: 60px;
}

/* ─── урок в приложении: экран шага ───────────────────────────────────────── */
/* Один шаг на экран (владелец 02.10: «весь экран построен под урок»): сверху шкала урока и номер шага, ниже подпись
   урока (14 серым, как «Урок 1 из 14 · Модуль 1 из 5» у Пронина), заголовок 24, текст 16/25, картинка со
   скруглением 20, варианты — серыми строками с кружком, как согласие Пронина; внизу одна чёрная кнопка 48. */

.player {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 12px - var(--safe-b));
}

.pl-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -12px calc(var(--gutter) * -1) 0;
  padding: 14px var(--gutter) 12px;
  background: var(--bg);
}

.pl-close {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
}

.pl-close .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.pl-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.pl-bar i {
  display: block;
  height: 100%;
  width: 3%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.5s var(--ease);
}

.pl-count {
  flex: none;
  min-width: 40px;
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  color: var(--ink-2);
}

.pl-stage {
  flex: 1;
  padding: 8px 0 24px;
}

.pl-step.in {
  animation: pl-in 0.36s var(--ease) backwards;
}

.pl-step.back {
  animation: pl-back 0.3s var(--ease) backwards;
}

@keyframes pl-in {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
}

@keyframes pl-back {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

.pl-meta {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.pl-title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink);
  text-wrap: balance;
}

.pl-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 18px;
  border-radius: var(--r-card);
  pointer-events: none;
}

.pl-text .lb-text {
  font-size: 16px;
  line-height: 25px;
}

.pl-hint {
  margin: 18px 0 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.pl-opts {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.pl-hint + .pl-opts {
  margin-top: 0;
}

.pl-opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px 12px 14px;
  border: 0;
  border-radius: var(--r-row);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    opacity 0.25s ease,
    background-color 0.18s ease;
}

.pl-opt::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--ink-4) center / 13px 13px no-repeat;
  transition: background-color 0.18s ease;
}

.pl-opt.multi::before {
  border-radius: 7px;
}

.pl-opt b {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}

.pl-opt b .e {
  margin-right: 8px;
}

.pl-opt:active {
  transform: scale(0.985);
}

.pl-opt.on::before {
  background-color: var(--btn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .pl-opt.on::before,
:root[data-island] .pl-opt.on::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.pl-opt.on.good::before {
  background-color: var(--good);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.pl-opt.on.soft::before {
  background-color: var(--warn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.pl-opts.answered .pl-opt:not(.on) {
  opacity: 0.45;
}

.pl-opts.answered .pl-opt {
  pointer-events: none;
}

.pl-opt.pending {
  animation: breathe 1s ease-in-out infinite;
}

/* отклик на ответ — серая плашка «Запомни» со знаком тона */
.pl-fb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--well);
  animation: pl-in 0.36s var(--ease) backwards;
}

.pl-fb-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 12px;
  color: #ffffff;
  background: var(--blue);
}

.pl-fb.good .pl-fb-ic {
  background: var(--good);
}

.pl-fb.soft .pl-fb-ic {
  color: #1d1d1f;
  background: var(--warn);
}

.pl-fb-ic .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.pl-fb .lb-text {
  font-size: 16px;
  line-height: 25px;
}

.pl-widget {
  margin-top: 18px;
}

.pl-links {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

/* низ: одна кнопка, над ней — мягкий переход в фон */
.pl-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 16px var(--gutter) calc(16px + var(--safe-b));
  background: linear-gradient(to top, var(--bg) 78%, transparent);
}

.pl-foot:empty {
  display: none;
}

.player.busy .pl-foot .btn {
  opacity: 0.6;
  pointer-events: none;
}

.btn.pending {
  animation: breathe 1s ease-in-out infinite;
}

.pl-say {
  display: flex;
  gap: 8px;
}

.pl-say input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--well);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.pl-say input::placeholder {
  color: var(--ink-3);
}

.pl-send {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-btn);
  color: var(--btn-ink);
  background: var(--btn);
  cursor: pointer;
}

.pl-send .ic {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

/* итог урока */
.pl-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  text-align: center;
}

.pl-orb {
  width: 128px;
  height: 128px;
  margin: 0 0 8px;
}

.pl-end .pl-title {
  margin-bottom: 10px;
}

.pl-takty {
  height: 26px;
  margin: 0 0 18px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
}

.pl-end .pl-text {
  align-self: stretch;
  text-align: left;
}

.pl-next {
  align-self: stretch;
  margin: 18px 0 0;
  padding: 16px;
  border-radius: 16px;
  text-align: left;
  background: var(--well);
}

.pl-next .kicker {
  margin: 0 0 6px;
}

.pl-next .lb-text {
  font-size: 15px;
  line-height: 22px;
}

@keyframes breathe {
  50% {
    opacity: 0.55;
  }
}

/* текст урока и бота (Telegram-HTML): абзацы, жирное — 500, цитата — серой плашкой */
.lb-text {
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: break-word;
}

.lb-text.empty {
  display: none;
}

.lb-text b,
.lb-text strong {
  font-weight: 500;
}

.lb-text i,
.lb-text em {
  color: var(--ink-2);
}

.lb-text a[href] {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lb-text blockquote {
  display: block;
  margin: 10px 0 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--well);
  white-space: pre-line;
}

.lb-text code,
.lb-text pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--chip);
}

.lb-text .tg-spoiler,
.lb-text tg-spoiler {
  border-radius: 4px;
  background: var(--well-2);
}

.item.pending {
  animation: breathe 1s ease-in-out infinite;
}

.flow-text a,
.flow-body .lead a,
.quote a,
.callout a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* пункт с отметкой: круг слева, отмечен — чёрный с галочкой (как «Прежде чем начать» у Пронина) */
.check-row {
  cursor: pointer;
}

/* кружок отметки, как в согласии Пронина: пусто — серый круг, отмечено — чёрный с белой галочкой */
.check-row .box {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: transparent;
  background: var(--ink-4);
  transition: background-color 0.18s ease;
}

.check-row .box .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.check-row.on .box {
  color: var(--btn-ink);
  background: var(--btn);
}

.list .check-row + .check-row::before {
  left: 50px;
}

/* «Прежде чем начать»: пункты — отдельными серыми строками со скруглением 14 и зазором 8, как у Пронина */
.consent-list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.consent-list .item {
  min-height: 50px;
  padding: 12px 14px 12px 12px;
  border-radius: var(--r-row);
  background: var(--well);
}

.consent-list .item + .item::before {
  display: none;
}

.consent-list .txt b {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
}

.info-btn {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: -6px -8px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.info-btn .ic {
  width: 20px;
  height: 20px;
}

.hint.center {
  text-align: center;
}

.ok-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
  text-align: center;
}

.ok-note .ic {
  width: 14px;
  height: 14px;
  padding: 2px;
  border-radius: 50%;
  stroke-width: 3.2;
  color: #ffffff;
  background: var(--good);
}

/* сворачиваемый текст: «Как это будет», «Текст согласия», «Подробнее» */
.quote {
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.quote p,
.quote-text {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-2);
}

details.quote {
  margin-top: 12px;
  padding: 0;
}

details.quote summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

details.quote summary::-webkit-details-marker {
  display: none;
}

details.quote summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.8px solid var(--ink-3);
  border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}

details.quote[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

details.quote > p {
  padding: 0 16px 16px;
}

.opt-row .txt b .e,
.check-row .txt b .e {
  margin-right: 10px;
}

.pl-paras {
  display: grid;
  gap: 12px;
}

/* «Другое время» у договорённости: строка без кружка, со значком часов */
.pl-opts.tight {
  margin-top: 8px;
}

.pl-opt.pl-time::before {
  display: none;
}

.pl-opt.pl-time .ic {
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}

.pl-opt.pl-time b {
  font-weight: 500;
  color: var(--ink);
}

#sheet .tp {
  margin: 4px 0 16px;
}

/* короткий шаг — по центру свободного места, а не прижат к верху (владелец 03.10) */
.pl-stage {
  display: flex;
  flex-direction: column;
}

.pl-stage.mid::before,
.pl-stage.mid::after {
  content: "";
  flex: 2;
}

.pl-stage.mid::after {
  flex: 3;
}

/* договорённость с напоминанием: строки настроек «Напомнить» и «Время» */
.pl-deal {
  margin-top: 18px;
}

/* вступление мини-игры повторяет текст шага над ней — второй раз не показываем */
.pl-step.has-head .pl-widget .rw-lead {
  display: none;
}

/* после ответа: верный вариант — зелёной галочкой и не приглушён, свой неверный — жёлтым крестиком (не красным) */
.pl-opts.answered .pl-opt.right {
  opacity: 1;
}

.pl-opt.right::before,
.pl-opt.on.right::before {
  background-color: var(--good);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.pl-opt.on.soft:not(.right)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

/* ─── иллюстрации урока — нативные (app.js, lessonVisual) ─────────────────────────────────────────────────── */
/* Серая плашка «Ритма 5», цвет курса — только у главного (сон, тело), остальное серым; линии тонкие, воздух. */
.vis {
  margin: 4px 0 18px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--well);
}

.vis .kicker {
  margin: 0 0 8px;
}

/* обложка урока: значок курса в круге и «День 1 из 30» — по центру, над названием */
.vis-cover {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
}

.vis-cover .kicker {
  margin: 0;
}

.vis-ic {
  width: 64px;
  height: 64px;
  background: var(--accent);
}

.vis-ic .ic {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

.pl-step.cover {
  text-align: center;
}

.pl-step.cover .pl-title {
  text-wrap: balance;
}

/* сутки: строки «Сейчас» и «Цель», под ними шкала 18:00 → 18:00 */
.vis-day {
  display: grid;
  gap: 12px;
}

.vd-row {
  display: grid;
  gap: 6px;
}

.vd-l {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.vd-l b {
  font-weight: 500;
  color: var(--ink);
}

.vd-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--track);
}

.vd-sleep {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: vd-grow 0.7s var(--ease) backwards 0.15s;
}

.vd-sleep.goal {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
  background-image: repeating-linear-gradient(90deg, var(--accent-soft) 0 6px, transparent 6px 10px);
}

.vd-axis {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}

@keyframes vd-grow {
  from {
    transform: scaleX(0);
  }
}

/* пещера: большое «32», две волны и подписи к ним */
.vc-big {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
}

.vc-big b {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.vc-big span {
  font-size: 16px;
  color: var(--ink-2);
}

.vc-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 10px;
  overflow: visible;
}

.vc-grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.vc-body,
.vc-plan {
  fill: none;
  stroke-linecap: round;
}

.vc-body {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: vc-draw 1.4s var(--ease) forwards 0.2s;
}

.vc-body {
  stroke: var(--accent);
  stroke-width: 3;
}

.vc-plan {
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 5 6;
  animation: vc-fade 0.8s ease backwards 0.9s;
}

@keyframes vc-fade {
  from {
    opacity: 0;
  }
}

@keyframes vc-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.vc-legend {
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
}

.vc-k {
  display: grid;
  grid-template-columns: 18px auto;
  justify-content: start;
  align-items: center;
  gap: 8px;
}

.vc-k i {
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.vc-k.plan i {
  height: 2px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 9px);
}

@media (prefers-reduced-motion: reduce) {
  .vc-body {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* итог урока: что дальше — одной группой строк со значком (как в профиле) */
.pl-end .pl-plan {
  align-self: stretch;
  text-align: left;
}

.pl-plan-row {
  align-items: flex-start;
  min-height: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}

.pl-plan-row .bubble {
  margin-top: 1px;
  background: var(--accent);
}

.pl-plan-row .lb-text {
  font-size: 15px;
  line-height: 21px;
}

/* длинный список «отметь несколько» — строки плотнее, чтобы кнопка была видна без прокрутки (владелец 03.10) */
.pl-opts.many {
  gap: 6px;
}

.pl-opts.many .pl-opt {
  min-height: 46px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.pl-opts.many .pl-opt b {
  font-size: 15px;
  line-height: 20px;
}

/* тип человека: значок типа, подпись, название, строка о главном */
.vis-type {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vis-ic.sm {
  width: 48px;
  height: 48px;
}

.vis-ic.sm .ic {
  width: 24px;
  height: 24px;
}

.vt-txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vt-txt .kicker {
  margin: 0;
}

.vt-txt b {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}

.vt-txt span {
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

/* путь к цели: ступеньки подъёма по дням, цель — пунктиром */
.vp-ends {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.vp-ends b {
  font-weight: 500;
  color: var(--ink);
}

.vp-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 6px 0 4px;
  overflow: visible;
}

.vp-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.vp-goal {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.vp-dot {
  fill: var(--accent);
}

.vp-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}

.vp-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

/* программа курса: недели строками, уроки — значками */
.vis-map {
  display: grid;
  gap: 8px;
}

.vm-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 8px;
}

.vm-w {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.vm-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vm-i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-3);
  background: var(--bg);
}

.vm-i .ic {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.vm-i.typed {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent-text);
}

.vm-i.done {
  color: var(--ink);
}

.vm-i.today {
  color: #ffffff;
  background: var(--accent);
  box-shadow: none;
}

.vm-legend {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.vm-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vm-k i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.vm-k.typed i {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* ─── текст урока блоками (03.10): термин, подпись над абзацем, перечисление, «важно» ─────────────────────── */
.tx-term {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  background: var(--well);
}

.tx-term > b {
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}

.tx-lab {
  display: grid;
  gap: 4px;
}

.tx-k {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.tx-list {
  display: grid;
  gap: 10px;
}

.tx-li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
}

.tx-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--well);
}

.tx-mark:empty::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}

.tx-note {
  margin: 0;
}

.tx-note .lb-text {
  font-size: 15px;
  line-height: 22px;
}

/* разбор критика 03.10 ─────────────────────────────────────────────────────── */
/* шаг-вопрос: надпись капителью над заголовком («Угадай», «План на завтра»), заголовок — сам вопрос, пояснение серым */
.pl-kick {
  margin: 0 0 8px;
}

.pl-title.long {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.1px;
}

.pl-text.quiet .lb-text {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

/* счётчик «N / M» убран — полоска сверху занимает всю ширину */
.pl-count:empty {
  display: none;
}

/* «отметь несколько» — тот же кружок, что везде в системе, а не квадрат */
.pl-opt.multi::before {
  border-radius: 11px;
}

/* итог урока: такты — серой меткой, строки — серыми кругами (цвет курса уже у шара) */
.pl-end .pl-takty {
  color: var(--ink-2);
  background: var(--chip);
}

.pl-end .pl-plan {
  margin-top: 6px;
}

.pl-plan-row .bubble {
  background: var(--ib-gray);
}

.pl-note {
  align-self: stretch;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: var(--ink-2);
}

/* ─── Ритм: разговор — отдельный экран ───────────────────────────────────── */

.chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 8px;
}

.chat-head .avatar-btn {
  width: 40px;
  height: 40px;
  cursor: default;
}

.chat-head .avatar-btn img {
  left: -13px;
  top: -22px;
  width: 66px;
  height: 66px;
}

.chat-head b {
  display: block;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
}

.chat-head span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.chat-log {
  flex: 1;
  padding: 8px 0 120px;
}

.chat-hello {
  margin: 28px 0 6px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

.chat-sub {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-2);
}

.msg {
  max-width: 86%;
  margin: 10px 0 0;
  padding: 12px 16px;
  border-radius: 22px;
  font-size: 16px;
  line-height: 23px;
  animation: rise 0.26s var(--ease) backwards;
}

.msg.me {
  margin-left: auto;
  border-bottom-right-radius: 6px;
  color: var(--btn-ink);
  background: var(--btn);
}

.msg.ritm {
  border-bottom-left-radius: 6px;
  color: var(--ink);
  background: var(--well);
}

.msg.ritm p {
  margin: 0 0 8px;
}

.msg.ritm p:last-child {
  margin-bottom: 0;
}

.msg.ritm b,
.msg.ritm strong {
  font-weight: 500;
}

.msg-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.typing {
  display: inline-flex;
  gap: 5px;
  margin: 12px 0 0;
  padding: 16px;
  border-radius: 22px;
  border-bottom-left-radius: 6px;
  background: var(--well);
}

/* Ритм печатает — «Такты» (общий компонент ожидания, css/05-speed.css) */
.typing .ld-beat {
  color: var(--ink-2);
}


.compose {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  padding: 10px var(--gutter) calc(12px + var(--safe-b));
  background: var(--bg);
  transform: translateX(-50%);
}

.compose textarea {
  flex: 1;
  min-height: 48px;
  max-height: 140px;
  margin: 0;
  padding: 13px 18px;
  border: 0;
  border-radius: 24px;
  outline: none;
  resize: none;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  background: var(--well);
  -webkit-user-select: text;
  user-select: text;
}

.compose textarea::placeholder {
  color: var(--ink-3);
}

.send {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--btn-ink);
  background: var(--btn);
  cursor: pointer;
}

.send .ic {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.send[disabled] {
  opacity: 0.25;
}

/* ─── водяной знак и прогресс чтения ─────────────────────────────────────── */

.wm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 360px 240px;
}

body.marked .wm {
  display: block;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  height: 3px;
  pointer-events: none;
}

body.reading .progress {
  display: block;
}

.progress i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--ink);
}

.noscript {
  margin: 30vh auto 0;
  text-align: center;
  color: var(--ink-2);
}

/* ─── конспект: экран приложения ─────────────────────────────────────────── */
/* Шапка — значок урока в круге цвета курса (как обложка урока), «КОНСПЕКТ · ДЕНЬ 1 ИЗ 30», заголовок 24, вводная
   16 серым, время чтения 14; без картинки-обложки (владелец 03.10: иллюстрации — нативные). Разделы — серые
   карточки 18: номер в голубом круге, заголовок 16/500, стрелка; раскрытая — текст 16/25. «Для тебя» — синяя метка
   капителью. Наглядные блоки — серые плашки 20 (внутри серой карточки — белые). «Твой план» — группа строк. */

.kn {
  max-width: 680px;
  margin: 0 auto;
}

/* конспект другого курса (сон пройден, сейчас питание) — значок и графики в цвете своего курса: значения те же,
   что в 01-tokens; цветного текста на экране конспекта нет */
.kn[data-course="sleep"] { --accent: #ad46ff; --accent-soft: rgba(173, 70, 255, 0.12); }
.kn[data-course="focus"] { --accent: #3392ff; --accent-soft: rgba(51, 146, 255, 0.12); }
.kn[data-course="energy"] { --accent: #9ae600; --accent-soft: rgba(154, 230, 0, 0.16); }
.kn[data-course="food"] { --accent: #00bc7d; --accent-soft: rgba(0, 188, 125, 0.12); }
.kn[data-course="stress"],
.kn[data-course="teeth"] { --accent: #00a6f4; --accent-soft: rgba(0, 166, 244, 0.12); }
.kn[data-course="move"] { --accent: #f6339a; --accent-soft: rgba(246, 51, 154, 0.12); }
:root[data-theme="dark"] .kn[data-course] { --accent-soft: rgba(255, 255, 255, 0.1); }

/* шапка */
.kn-head {
  margin: 10px 0 22px;
}

.kn-ic {
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
}

.kn-ic .ic {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.kn-head .kicker {
  margin: 0 0 8px;
}

.kn-title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink);
  text-wrap: balance;
}

.kn-lede {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-2);
}

.kn-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.kn-meta .ic {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.kn-secs {
  display: grid;
  gap: 28px;
}

.kn-free {
  display: grid;
  gap: 12px;
}

.kn-free > p {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

/* заголовок раздела на белой странице: номер в сером круге и 20/26, как раздел у Пронина */
.kn-solo > h2,
.kp-head h2,
.ks-h {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.kn-solo > h2 {
  margin-bottom: 16px;
}

.kn-solo > .kf-you,
.ks > .kf-you {
  margin: 0 0 6px;
}

/* «для тебя» — подписью капителью со знаком, без цветной плашки (владелец 03.10: «никакого цветного текста») */
.kf-you {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kf-you .ic {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.ks-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  background: var(--well);
}

.ks-n .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* раздел с наглядными блоками: заголовок, блоки серыми плашками прямо на странице, абзацы — по «Подробнее» */
.ks {
  display: grid;
  gap: 16px;
}

.ks-h {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ks-h .ks-n {
  margin-top: 0;
}

.ks > p,
.kr-in > p,
.kp-rest > p {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

.ks:not(.open) > .kf-detail {
  display: none;
}

.ks.open > .kf-detail {
  animation: kf-show 0.3s var(--ease) backwards;
}

@keyframes kf-show {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.ks-more {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  min-height: 44px;
  margin: -12px 0 -14px;
  padding: 0 12px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.ks-more .ic {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform 0.28s var(--ease);
}

.ks.open .ks-more .ic {
  transform: rotate(-90deg);
}

/* разделы только из текста и исследования — строками одной серой группы; нажатие на строку раскрывает текст */
.kg {
  border-radius: var(--r-group);
  background: var(--well);
  overflow: hidden;
}

.kr {
  position: relative;
}

.kr + .kr::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 54px;
  height: 1px;
  background: var(--line);
}

.kr-head {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.kr-head:active {
  background: var(--well-2);
}

.kr-head .ks-n {
  background: var(--bg);
}

.kr-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.kr-t b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.kr-t small {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.kr-go {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform 0.28s var(--ease);
}

.kr.open .kr-go {
  transform: rotate(-90deg);
}

.kr-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.kr.open .kr-body {
  grid-template-rows: 1fr;
}

.kr-in {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px 0 54px;
}

.kr.open .kr-in {
  padding-bottom: 16px;
}

/* списки — серыми точками: цвет курса здесь не нужен (разбор критика 03.10) */
.kn ul,
.kn ol:not(.pl-opts) {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kn ul > li,
.kn-refs ol > li {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

.kn ul > li {
  padding-left: 22px;
}

.kn ul > li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-2);
}

/* вставка «для тебя» — серой плашкой на странице */
.kn .you-note {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.kn .you-note > p {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
}

/* подпись «по твоим ответам»: у общего класса .tag есть серая подложка — здесь она лишняя (читалась полосой) */
.kn .tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kn .tag .ic {
  width: 14px;
  height: 14px;
}

.kn h3 {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.kn strong {
  font-weight: 500;
}

/* данные человека в тексте — полужирным, цветом чернил (владелец 03.10: «никакого цветного текста») */
.kn .v {
  font-weight: 500;
  color: inherit;
}

.kn sup.cite {
  font-size: 0.72em;
  line-height: 0;
}

/* сноска — строчным элементом: не уезжает одна на новую строку и держит точку рядом с собой; попасть пальцем
   помогает невидимая зона 32×32 вокруг цифры */
.kn sup.cite a {
  position: relative;
  display: inline;
  margin-left: 2px;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--chip);
  text-decoration: none;
  vertical-align: 2px;
}

.kn sup.cite a::after {
  content: "";
  position: absolute;
  inset: -8px -7px;
}

.kg sup.cite a,
.kn-plan sup.cite a,
.kv sup.cite a,
.vis sup.cite a,
.kn .you-note sup.cite a {
  background: var(--bg);
}

/* «Твой план» — сразу после «Главного в цифрах»: заголовок 20 и «2 из 4», ниже группа строк: значок дела слева,
   дело 16/500 и пояснение 14 серым, справа кружок 22 — пустой серый, сделано — чёрный с галочкой */
.kp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.kp-head small {
  flex: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.kp-rows,
.kv-today {
  border-radius: var(--r-group);
  background: var(--well);
  overflow: hidden;
}

.kp-row,
.kt-row {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.kp-row:active {
  background: var(--well-2);
}

.kp-row + .kp-row::before,
.kt-row + .kt-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  height: 1px;
  background: var(--line);
}

.kp-row.with-icon + .kp-row::before,
.kt-row + .kt-row::before {
  left: 60px;
}

/* значок дела — серым кругом: цвет курса на экране один, у значка урока в шапке */
.kp-b {
  background: var(--ib-gray);
}

.kp-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  color: transparent;
  background: var(--ink-4);
  transition: background-color 0.18s ease;
}

.kp-box .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.kp-row.on .kp-box {
  color: var(--btn-ink);
  background: var(--btn);
}

.kp-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp-t b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.kp-t > span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.kp-row.on .kp-t b {
  color: var(--ink-2);
}

.kp-rest {
  display: grid;
  gap: 8px;
  margin: 12px 2px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.kp-rest > p {
  font-size: 14px;
  line-height: 20px;
}

/* ─── наглядные блоки (app.js, konspektVisual) ─────────────────────────────── */
/* Серая плашка 18 прямо на белой странице — без второго фона (разбор критика 03.10: «коробки в коробках»),
   подпись капителью. Цвет курса — только у главного в графике: столбик, выходные в неделе, сон в сутках.
   Числа — 30/500, как счётчик у Пронина. */
.kv,
.kn .vis {
  margin: 0;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.kn-free > .vis {
  margin: 0;
}

.kv > .kicker,
.kv-bars > .kicker,
.kv-week > .kicker {
  margin: 0 0 12px;
}

/* «главное в цифрах»: числа одно под другим через тонкую линию — подпись во всю ширину, без узких столбцов */
.ks-nums {
  display: grid;
  gap: 14px;
}

.ks-num + .ks-num {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ks-num b {
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.ks-num > span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* таблица */
.kv-table {
  padding: 14px 16px 6px;
}

.kv-table table {
  width: 100%;
  border-collapse: collapse;
}

.kv-table th,
.kv-table td {
  padding: 11px 10px 11px 0;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink);
}

.kv-table th:last-child,
.kv-table td:last-child {
  padding-right: 0;
}

.kv-table thead th {
  padding-top: 0;
  padding-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kv-table tbody tr {
  border-top: 1px solid var(--line);
}

.kv-table tbody th {
  font-weight: 500;
}

.kv-table.c2 tbody th {
  width: 55%;
}

/* «было → стало» */
.kc-side .kicker {
  margin: 0 0 4px;
}

.kc-side.after .kicker {
  color: var(--ink);
}

.kc-t {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.kc-side.after .kc-t {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.kc-arrow {
  position: relative;
  display: grid;
  place-items: center;
  height: 28px;
  margin: 10px 0;
}

.kc-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}

.kc-arrow span {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  color: var(--ink-2);
  background: var(--bg);
}

.kc-arrow .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
  transform: rotate(90deg);
}

/* столбики — как строки суток в уроке: подпись и значение, под ними шкала */
.kb-rows {
  display: grid;
  gap: 12px;
}

.kb-row {
  display: grid;
  gap: 6px;
}

.kb-l {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.kb-l b {
  flex: none;
  font-weight: 500;
  color: var(--ink);
}


.kb-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--track);
  overflow: hidden;
}

.kb-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  background: var(--ink-3);
  transform-origin: 0 50%;
  animation: vd-grow 0.7s var(--ease) backwards 0.15s;
}

.kb-fill.main {
  background: var(--accent);
}

/* неделя подъёмов: будни — серые точки на одной линии, выходные — цветом курса ниже */
.kw-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 8px;
  overflow: visible;
}

.kw-guide {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.kw-t,
.kw-d {
  font-size: 12px;
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.kw-d.off {
  font-weight: 500;
  fill: var(--ink);
}

.kw-path {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 2;
  stroke-linejoin: round;
}

.kw-dot {
  fill: var(--ink-2);
}

.kw-dot.off {
  fill: var(--accent);
}

.kw-legend .vc-k {
  grid-template-columns: 10px auto;
}

/* подписи легенды — по шкале шрифтов (14), без 13 из урока */
.kn .vc-legend {
  font-size: 14px;
  line-height: 20px;
}

.kw-legend .vc-k i {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--ink-2);
}

.kw-legend .vc-k.off i {
  background: var(--accent);
}

/* «проверь себя» — как вопрос в уроке: серые строки ответа, после ответа — отклик серой плашкой */
.kv.kv-quiz {
  padding: 0;
  background: none;
}

.kq-q {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}

.kv-quiz .pl-opts {
  margin-top: 0;
}

.kv-quiz .pl-fb {
  margin-top: 12px;
}

.kq-a {
  font-size: 15px;
  line-height: 23px;
}

.kq-again {
  appearance: none;
  display: block;
  min-height: 44px;
  margin: 2px 0 -12px;
  padding: 0 12px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* «Запомни» — жёлтый круг 24 со знаком, «Запомни» 16/500, мысль 16/25 */
.kk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.kk-head b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.kk-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  color: #1d1d1f;
  background: var(--warn);
}

.kk-ic .ic {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.kk-t {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

/* термин */
.kv-term .kicker {
  margin: 0 0 6px;
}

.kt-term {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.kt-def {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

/* исследования — строкой группы, список раскрывается под ней */
.kn-refs .kr-in {
  padding-left: 16px;
}

.kn-refs ol {
  gap: 14px;
}

.kn-refs li {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.kn-refs li::before {
  display: none;
}

.kn-refs li.flash {
  animation: flash 1.4s ease;
}

@keyframes flash {
  30% {
    background: var(--accent-soft);
  }
}

.kn-refs .n {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
}

.kn-refs .ref a {
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.kn-refs .ref p {
  margin: 2px 0 0;
}

.kn-refs .ref .kind {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.kn-refs .ref .by {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* подвал: урок пройден */
.kn-done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.kn-done .done-mark {
  margin-top: 1px;
}

.kn-done b {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.kn-done p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .kb-fill {
    animation: none;
  }
}

.doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 4px 0 24px;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.doc > .label {
  display: none;
}

.doc .title {
  margin: 4px 0 6px;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.doc-meta {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.doc-body {
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: break-word;
}

.doc-body p {
  margin: 0 0 12px;
}

.doc-body h2 {
  margin: 30px 0 10px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

.doc-body b,
.doc-body strong {
  font-weight: 500;
}

.doc-body ul,
.doc-body ol {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.doc-body li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 20px;
}

.doc-body li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

.doc-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.doc-body .card {
  margin: 0 0 8px;
  padding: 16px 18px;
  border-radius: var(--r-group);
  background: var(--well);
}

.doc-body .card p:last-child {
  margin-bottom: 0;
}

/* таблица в политике — строками: что собираем, ниже серым — откуда */
.doc-body table,
.doc-body tbody,
.doc-body tr,
.doc-body td {
  display: block;
}

.doc-body thead {
  display: none;
}

.doc-body table {
  margin: 4px 0 16px;
}

.doc-body tr {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.doc-body tr:last-child {
  border-bottom: 1px solid var(--line);
}

.doc-body td + td {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.doc .section {
  margin-top: 40px;
}


/* ─── инструменты: окно света, люксметр, кофеин до сна ───────────────────── */

.chart text {
  font-variant-numeric: tabular-nums;
}

.chart .cap {
  fill: var(--ink-2);
  font-size: 12px;
}

.chart .track {
  fill: var(--c-track);
}

.chart .hit:focus-visible {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* окно света */

.chart .seg {
  transition: opacity 0.22s ease;
}

.chart .s-dim {
  fill: var(--c-dim);
}

.chart .s-light {
  fill: var(--c-light);
}

.chart .s-light.lamp {
  fill: none;
  stroke: var(--c-light);
  stroke-width: 2;
}

.chart .seg-t {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
}

.chart .sun-t {
  fill: var(--warn);
  font-size: 12px;
  font-weight: 500;
}

.picking .seg {
  opacity: 0.4;
}

.picking .seg.on {
  opacity: 1;
}

.chart .grow {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: grow 0.7s var(--ease) backwards;
}

.chart .now-l {
  stroke: var(--c-now);
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}

.chart .now-p {
  fill: var(--c-now);
}

.chart .now-t {
  fill: var(--bg);
  font-size: 12px;
  font-weight: 500;
}

.chart .now-d {
  fill: var(--bg);
  stroke: var(--c-now);
  stroke-width: 2.5;
}

.chart .drop {
  animation: drop 0.5s var(--ease) 0.55s backwards;
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.legend-chips .chip {
  background: var(--bg);
}

.legend-chips .chip.on {
  color: var(--ink);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.sw {
  flex: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--c-track);
}

.sw.s-sun {
  background: linear-gradient(90deg, var(--c-sun-a), var(--c-sun-b));
}

.sw.s-dim {
  background: var(--c-dim);
}

.sw.s-sleep {
  background: var(--accent);
}

.sw.s-light {
  background: var(--c-light);
}

.sw.s-light.lamp {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c-light);
}

.pick-info {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg);
}

.pick-info.swap {
  animation: swap 0.3s var(--ease) backwards;
}

@keyframes swap {
  from {
    opacity: 0.2;
    transform: translateY(4px);
  }
}

.pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}

.pick-head b {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
}

.pick-t {
  flex: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pick-info p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.note-card .card-head {
  margin-bottom: 8px;
}

/* ─── люксметр ───────────────────────────────────────────────────────────── */

.file-in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lux .btns.two,
.tool.lux > .btns {
  margin: 0 0 14px;
}

.lux-card {
  padding: 18px 16px;
}

.lux-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
}

.lux-photo {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
}

.lux-num {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
}

.lux-num b {
  font-size: 30px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.lux-num span {
  font-size: 15px;
  color: var(--ink-2);
}

.lux-num .approx {
  flex-basis: 100%;
  font-size: 14px;
  color: var(--ink-2);
}

.lux-card.idle .eyebrow-s {
  margin: 0;
}

.lux-card.pending .lux-num b.sk-text {
  font-size: 17px;
  color: var(--ink-2);
  animation: breathe 1.2s ease-in-out infinite;
}

.lux-words {
  margin: 10px 0 14px;
  font-size: 15px;
  line-height: 22px;
}

.lux-card.idle .lux-words {
  color: var(--ink-2);
}

.lux-gauge {
  margin-top: 4px;
}

.chart .zone {
  transition: opacity 0.3s ease;
}

.chart .zone.dim {
  opacity: 0.35;
}

.chart .z-evening { fill: var(--z-evening); }
.chart .z-room { fill: var(--z-room); }
.chart .z-window { fill: var(--z-window); }
.chart .z-outdoor { fill: var(--z-outdoor); }

.chart .needle-l {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.chart .needle-k {
  fill: var(--ink);
  stroke: var(--well);
  stroke-width: 3;
}

.zone-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
  text-align: center;
}

.zone-labels span.on {
  font-weight: 500;
  color: var(--ink);
}

.lux-rows {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lux-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lux-row .ic {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--warn);
}

.lux-row + .lux-row .ic {
  color: var(--c-dim);
}

.lux-row small {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
}

.lux-row span {
  font-size: 15px;
  line-height: 22px;
}

.lux-card.problem p {
  margin: 0 0 14px;
}

/* ─── кофеин до сна ──────────────────────────────────────────────────────── */

.drink-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 420px) {
  .drink-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.drink {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--well);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.card .drink {
  background: var(--bg);
}

.drink:active {
  transform: scale(0.97);
}

.drink b {
  max-width: 100%;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

.drink span {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.drink.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.drink.on span {
  color: inherit;
  opacity: 0.7;
}

.slider > .label {
  margin: 0 0 8px;
}

.slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
}

.slider-val {
  font-size: 30px;
  line-height: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.slider.late-on .slider-val {
  color: var(--c-dim);
}

.track-wrap {
  position: relative;
  height: 44px;
}

.track {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 18px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-track);
}

.track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.track .fill {
  left: 0;
  width: 0;
  background: var(--accent);
}

.track .late {
  right: 0;
  background: repeating-linear-gradient(135deg, rgba(246, 51, 154, 0.22) 0 4px, transparent 4px 8px);
}

.track .mark {
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--c-dim);
}

.track-wrap input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
}

.track-wrap input[type="range"]:focus {
  outline: none;
}

.track-wrap input[type="range"]::-webkit-slider-runnable-track {
  height: 44px;
  background: transparent;
}

.track-wrap input[type="range"]::-moz-range-track {
  height: 44px;
  background: transparent;
}

.track-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: 8px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 4px var(--accent),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

.track-wrap input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 4px var(--accent),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

.slider-scale {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.slider-scale .b {
  color: var(--c-dim);
}

.caf-card {
  padding: 16px 14px 18px;
}

.chart .bed-l {
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.chart .bed-t {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.chart .border-l {
  stroke: var(--c-dim);
  stroke-width: 1.5;
  opacity: 0.8;
}

.chart .border-t {
  fill: var(--c-dim);
  font-size: 12px;
  font-weight: 500;
}

.chart .caf-line {
  fill: none;
  stroke: var(--c-light);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .caf-line.draw {
  animation: draw 0.9s var(--ease) 0.1s forwards;
}

.chart .caf-start {
  fill: var(--c-light);
}

.chart .caf-start.pending {
  fill: var(--bg);
  stroke: var(--c-light);
  stroke-width: 2;
}

.chart .caf-bed {
  stroke: var(--well);
  stroke-width: 2.5;
}

.chart .l-high { fill: var(--c-dim); }
.chart .l-some { fill: var(--c-light); }
.chart .l-low { fill: var(--accent); }

.chart .val-t {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 500;
}

.caf-sum {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
}

.caf-num {
  font-size: 30px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

.caf-num.l-high {
  color: var(--c-dim);
}

.caf-num.l-some {
  color: var(--warn);
}

.caf-unit {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-2);
}

.caf-share {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--bg);
}

.caf-head {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.caf-day .caf-empty,
.caf-day .caf-removed {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.caf-day .caf-removed {
  margin-bottom: 10px;
  color: var(--ink);
}

.caf-list {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
}

.caf-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.caf-row:last-child {
  border-bottom: 0;
}

.caf-row b {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.caf-ico {
  font-size: 18px;
  line-height: 1;
}

.caf-t,
.caf-mg {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.caf-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.caf-total b {
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.caf-like {
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.caf-verdict {
  flex-direction: column;
  gap: 6px;
}

.caf-verdict b {
  font-size: 15px;
  font-weight: 500;
}

/* ─── широкие и узкие экраны ─────────────────────────────────────────────── */

@media (min-width: 720px) {
  .app {
    max-width: 620px;
    padding-top: 22px;
  }

  body.reading .app {
    max-width: 720px;
  }

  .kn {
    font-size: 17px;
    line-height: 29px;
  }
}

@media (max-width: 374px) {
  :root {
    --gutter: 16px;
  }

  .title {
    font-size: 24px;
    line-height: 32px;
  }

  .tab {
    min-width: 46px;
    padding: 0 11px;
  }

  .hero .obj {
    width: 92px;
    height: 92px;
  }

  .hero.has-obj .hero-text {
    padding-right: 92px;
  }
}

@media print {
  body > * {
    display: none !important;
  }
}

/* ─── интерактивные блоки урока (static/widgets.js) ───────────────────────── */
/* «Миф или правда», «угадай» ползунком, «расставь по порядку», «соедини пары» — язык «Ритма 4»: белый или
   чёрный фон, серые колодцы, чёрная главная кнопка, Google Sans 400/500. Акцент курса — только мелкие отметки,
   зелёный и красный — только кружки «верно / не так». Тень — только у того, что держат пальцем. Блок нажимает те же
   кнопки, что в чате; обычные кнопки блока (.lb-rows) страница прячет, пока блок нарисован. */

/* текст чата (там карточка или порядок по шагам) прячем: блок сам показывает вступление и всё остальное */
.lb > .lb-text:has(+ .rw-own) {
  display: none;
}

.rw {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.rw-hint {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
}

.rw-go {
  margin-top: 4px;
}

/* блок пройден (кнопки сняты) или уже не последний — только итог, без управления */
.rw.done,
.lb:not(.live) .rw,
.lesson-view.busy .rw {
  pointer-events: none;
}

.rw.done .rw-go,
.rw.done .rw-sides,
.rw.done .rw-mvs,
.rw.done .rw-hint,
.lb:not(.live) .rw .rw-go,
.lb:not(.live) .rw .rw-sides {
  display: none;
}

.rw.done .rw-grip {
  visibility: hidden;
}

/* кружок «верно / не так» */
.rw-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--good);
}

.rw-mark.miss {
  background: var(--bad);
}

.rw-mark .ic {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.enter .rw-mark,
.rw-feedback.enter .rw-mark {
  animation: rw-pop 0.42s var(--ease) 0.08s backwards;
}

@keyframes rw-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  60% {
    transform: scale(1.15);
  }
}

@keyframes rw-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes rw-fade {
  from {
    opacity: 0;
  }
}

/* ─── «миф или правда» ────────────────────────────────────────────────────── */

.rw-progress {
  display: flex;
  gap: 4px;
}

.rw-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
  transition: background-color 0.3s ease;
}

.rw-seg.now {
  background: var(--ink);
}

.rw-seg.ok {
  background: var(--good);
}

.rw-seg.miss {
  background: var(--bad);
}

/* стопка — от края до края экрана: улетающая карточка исчезает за краем, а страница не уезжает вбок */
.rw-stack {
  position: relative;
  z-index: 0;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 18px;
  overflow-x: hidden;
  overflow-x: clip;
}

.rw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 212px;
  padding: 44px 22px 30px;
  border-radius: var(--r-card);
  background: var(--well);
  color: var(--ink);
}

.rw-card-text {
  margin: 0;
  font-size: 20px;
  line-height: 29px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.rw-count {
  position: absolute;
  top: 18px;
  left: 22px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-3);
  transition: opacity 0.15s ease;
}

.rw-top {
  z-index: 1;
  outline: none;
  cursor: grab;
  touch-action: pan-y; /* вверх-вниз — прокрутка страницы, вбок — карточка */
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease; /* отпустили не дотянув — пружинит на место */
}

.rw-top:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.rw-top.drag {
  cursor: grabbing;
  transition: box-shadow 0.2s ease;
  box-shadow:
    0 18px 40px rgba(10, 10, 10, 0.14),
    0 2px 8px rgba(10, 10, 10, 0.08);
}

.rw-top.drag .rw-count {
  opacity: 0;
}

.rw-top.fly {
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.3, 0.7, 0.4, 1),
    opacity 0.32s ease;
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.14);
}

.rw-top.enter {
  animation: rw-rise 0.36s var(--ease) backwards;
}

.rw-top.enter .rw-card-text,
.rw-top.enter .rw-count {
  animation: rw-fade 0.3s ease 0.08s backwards;
}

@keyframes rw-rise {
  from {
    background-color: var(--well-2);
    transform: translateY(9px) scale(0.95);
  }
}

/* прошлая карточка, которая ещё летит, когда пришла новая */
.rw-ghost {
  position: absolute;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.14);
}

.rw-stamp {
  position: absolute;
  top: 14px;
  padding: 3px 12px;
  border: 2px solid currentColor;
  border-radius: 10px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
  background: var(--well);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.rw-top.drag .rw-stamp {
  transition: none;
}

.rw-stamp.s0 {
  right: 18px;
  transform: rotate(8deg);
}

.rw-stamp.s1 {
  left: 18px;
  transform: rotate(-8deg);
}

.rw-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rw-side {
  appearance: none;
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--well);
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.rw-side:active {
  transform: scale(0.97);
  background: var(--well-2);
}

.rw-side.hot,
.rw-side.hot:active {
  color: var(--btn-ink);
  background: var(--btn);
}

.rw-feedback {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.rw-feedback.enter {
  animation: rw-up 0.34s var(--ease) backwards;
}

.rw-fb {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rw-fb > b {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.rw .rw-fb .lb-text {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.rw-score {
  display: grid;
  gap: 2px;
}

.rw-score.enter {
  animation: rw-up 0.4s var(--ease) 0.05s backwards;
}

.rw-big {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  color: var(--ink-2);
}

.rw-big b {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rw-verdict {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.rw-results,
.rw-pairs {
  display: grid;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border-radius: var(--r-group);
  background: var(--well);
}

.rw-results li,
.rw-pairs li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
}

/* тонкая линия между строками — от текста до края, как в группах строк */
.rw-results li + li::before,
.rw-pairs li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 52px;
  height: 1px;
  background: var(--line);
}

.rw-results li.enter,
.rw-pairs li.enter {
  animation: rw-up 0.32s var(--ease) backwards;
}

.rw-rt,
.rw-pt {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
  font-size: 15px;
  line-height: 21px;
}

.rw-rt small,
.rw-pt small {
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
}

.rw-pt b {
  font-weight: 500;
}

.rw-pt span {
  color: var(--ink-2);
}

/* ─── «угадай» ползунком ──────────────────────────────────────────────────── */

.rw-readout {
  margin: 4px 0 0;
  text-align: center;
  font-size: 24px;
  line-height: 64px;
  font-weight: 500;
  color: var(--ink-2);
}

.rw-num {
  display: inline-block;
  font-size: 30px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rw-num.bump {
  animation: rw-bump 0.18s ease;
}

@keyframes rw-bump {
  50% {
    transform: scale(1.06);
  }
}

.rw-readout span {
  margin-left: 2px;
}

.rw-slider {
  position: relative;
  height: 44px;
  margin: 0 14px; /* место для половины ручки по краям */
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
}

.rw-rail {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 8px;
  margin-top: -4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--track);
}

.rw-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--ink);
}

.rw-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 3px var(--ink);
  transition: transform 0.15s ease;
}

.rw-slider.active .rw-knob {
  transform: scale(1.18);
}

.rw-slider:focus-visible .rw-knob {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.rw-ends {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-3);
}

.rw-gscale {
  display: grid;
  gap: 4px;
  padding-top: 26px; /* место для подписи верного ответа над шкалой */
}

.rw-gscale .rw-ends {
  margin-top: 0;
}

.rw-gtrack {
  position: relative;
  height: 10px;
  margin: 0 14px 22px; /* снизу — место для подписи «ты» */
  border-radius: 5px;
  background: var(--track);
}

.rw-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: var(--good);
  opacity: 0.4;
  transform-origin: 0 50%;
}

.rw-band.miss {
  background: var(--bad);
}

.rw-pin {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
}

.rw-pin i {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.rw-pin.truth i {
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--bg);
}

.rw-pin.you i {
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  box-shadow: inset 0 0 0 3px var(--ink-2);
}

.rw-pin b {
  position: absolute;
  left: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.rw-pin.truth b {
  bottom: 12px;
}

.rw-pin.you b {
  top: 10px;
  font-weight: 400;
  color: var(--ink-2);
}

.rw-pin.at-start b {
  left: -8px;
  transform: none;
}

.rw-pin.at-end b {
  left: 8px;
  transform: translateX(-100%);
}

.rw-guess.fresh .rw-band {
  animation: rw-grow 0.42s var(--ease) backwards;
}

.rw-guess.fresh .rw-pin.truth {
  animation: rw-drop 0.45s var(--ease) 0.18s backwards;
}

@keyframes rw-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes rw-drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.rw-mine {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

/* ─── «расставь по порядку» ───────────────────────────────────────────────── */

.rw-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rw-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 58px;
  padding: 7px 6px 7px 2px;
  border-radius: var(--r-btn);
  background: var(--well);
  transition:
    transform 0.26s var(--ease),
    box-shadow 0.2s ease;
}

.rw-item.snap {
  transition: none;
}

.rw-item.lift {
  z-index: 2;
  transition: box-shadow 0.2s ease;
  box-shadow:
    0 14px 32px rgba(10, 10, 10, 0.14),
    0 2px 6px rgba(10, 10, 10, 0.08);
}

.rw-list.dragging {
  -webkit-user-select: none;
  user-select: none;
}

.rw-grip {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 44px;
  color: var(--ink-3);
  cursor: grab;
  touch-action: none; /* тянем за ручку — страница не едет */
}

.rw-item.lift .rw-grip {
  color: var(--ink);
  cursor: grabbing;
}

.rw-dots {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.rw-n {
  flex: none;
  min-width: 18px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.rw-t {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}

.rw-mvs {
  display: flex;
  flex: none;
  gap: 2px;
}

.rw-mv {
  appearance: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}

.rw-mv:active {
  background: var(--well-2);
}

.rw-mv[disabled] {
  opacity: 0.28;
  cursor: default;
}

.rw-mv .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.rw-mv.down .ic {
  transform: rotate(180deg);
}

.rw-head {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
}

.rw-head.enter {
  animation: rw-up 0.3s var(--ease) backwards;
}

.rw-list.result .rw-item {
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
}

.rw-list.result .rw-item.enter {
  animation: rw-up 0.32s var(--ease) backwards;
}

.rw-sort .rw-mine {
  margin-top: -6px;
}

/* ─── «соедини пары» ──────────────────────────────────────────────────────── */

.rw-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* пары строк одной высоты: слева и справа ряды совпадают */
  gap: 8px 10px;
}

.rw-chip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--well);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.rw-chip:active {
  transform: scale(0.98);
}

.rw-chip.sel {
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* соединённые пункты — цветом своей пары: мягкая заливка и тонкая рамка того же цвета */
.rw-chip.on {
  color: var(--ink);
  background: color-mix(in srgb, var(--pair, var(--accent)) 14%, var(--bg));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pair, var(--accent)) 60%, transparent);
}

.rw-chip.pop {
  animation: rw-tap 0.3s var(--ease);
}

@keyframes rw-tap {
  50% {
    transform: scale(1.04);
  }
}

.rw-badge {
  display: none;
}

/* точки рядом не нужны — пара видна по цвету (владелец 03.10) */
.rw-chip.on .rw-badge {
  display: none;
}

.rw-ct {
  min-width: 0;
}

@media (max-width: 360px) {
  .rw-card-text {
    font-size: 20px;
    line-height: 27px;
  }

  .rw-mv {
    width: 34px;
  }
}

/* ответ на карточку — на ней самой (критик 03.10): утверждение мельче, ниже знак, вердикт и пояснение */
.rw-turned {
  justify-content: flex-start;
  gap: 0;
  cursor: default;
}

.rw-turned .rw-card-text {
  font-size: 17px;
  line-height: 24px;
  color: var(--ink-2);
}

.rw-verdict-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 6px;
}

.rw-verdict-row b {
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
}

.rw-turned .lb-text {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}

.rw-next {
  width: 100%;
  margin-top: 4px;
}

/* главная кнопка мини-игры внизу урока — как «Дальше» */
.pl-foot .rw-go {
  margin-top: 0;
}

/* ─── оплата: тёмная страница, как покупка у Пронина, из деталей «Ритма 5» ──────────────────────────────── */
/* Чёрный фон и плашки #333333 в любой теме (тёмный «остров», data-island). Верх — обложка цвета курса (с 04.10, ночью;
   было — название и плитки «что входит»), скидка — строкой с подарком, сроки — плитками 2×2 с кружком (было —
   полосками), пунктир, почта для чека, условия и белая кнопка. Перевод — сумма крупно, QR-код, код и реквизиты одной
   группой, «Я оплатил»; проверка — ход перевода тремя шагами. «Доступ открыт» — зелёная галочка, срок и строки «куда
   дальше». Только токены. */

.pay,
.pay-wait,
.paid {
  color: var(--ink);
}

.pay-title {
  margin: 4px 0 0;
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.9px;
  color: var(--ink);
  text-wrap: balance;
}

.pay-lead {
  margin: 8px 0 24px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.pay-what,
.pay-offer {
  margin: 0 0 12px;
}

.btn + .pay-what {
  margin-top: 24px;
}

.pay .section {
  margin-top: 4px;
}

.pay .card + .btn {
  margin: 8px 0 24px;
}

/* «Продлить заранее» — когда доступ идёт и сам не продлится */
.pay-sub {
  margin: 28px 0 12px;
}

.pay-sub h2 {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.pay-sub p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* сроки — плитками 2×2: срок и кружок выбора, цена крупно, сколько в месяц, метка выгоды внизу */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 8px;
}

.plans .plan {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 132px;
  padding: 14px 14px 14px 16px;
  border: 0;
  border-radius: var(--r-group);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.plans .plan:active {
  transform: scale(0.98);
}

.plans .plan.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.plan-top b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.plan-sum {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.plan-per {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.plan-tag {
  margin-top: auto;
}

.plan-per + .plan-tag {
  margin-top: 10px;
}

.plans .plan .box {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-4);
}

.plans .plan .box .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.plans .plan.on .box {
  color: var(--btn-ink);
  background: var(--btn);
  box-shadow: none;
}

.pay-sep {
  height: 0;
  margin: 20px 0;
  border-top: 1px dashed var(--well);
}

.pay-hint {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.pay-hint.center {
  margin-top: 12px;
  text-align: center;
}

.pay-mail {
  margin: 0 0 16px;
}

.pay-mail label {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
}

.pay-terms {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.pay-terms p {
  margin: 0 0 8px;
}

.pay-terms .link-btn {
  font-size: inherit;
  color: var(--ink);
}

/* условия коротко — три строки «заголовок и пояснение» над кнопкой; полный текст — «Условия полностью» */
.pay-facts {
  margin: 0 0 16px;
}

.pay-fact {
  min-height: 60px;
}

.pay-more p {
  margin: 0 0 8px;
}

/* тестовая платёжка (админам): строка над кнопкой, что денег не будет */
.pay-test {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--r-row);
  background: var(--well);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

.pay-test .ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ink-2);
}

.btn.pay-go {
  min-height: 52px;
}

.pay-note {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.pay-note p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 22px;
  white-space: pre-line;
}

.pay-note p:last-child {
  margin-bottom: 0;
}

/* «Ждём оплату», «Перевод не нашёлся», «Время вышло» — как «Ждём оплату» у Пронина */
.pw-body {
  padding-top: 20px;
}

.pw-body .kicker {
  margin: 0 0 6px;
}

.pw-title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink);
}

.pw-text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}

/* «Сегодня»: перевод ждёт оплаты или проверки — сумма крупно в тёмной карточке, срок — серым внизу карточки */
.pay-card-sum {
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--dark-ink);
}

/* «Доступ открыт»: галочка, срок, строки «куда дальше», «Готово» */
.pd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 8px 24px;
  text-align: center;
}

.pd-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 0 16px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--good);
  animation: pd-pop 0.5s var(--spring) 0.1s backwards;
}

.pd-mark .ic {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.pd-title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

.pd-sub {
  max-width: 330px;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
  text-wrap: balance;
}

.pd-next {
  margin: 0 0 20px;
}

@keyframes pd-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-mark {
    animation: none;
  }
}

/* перевод: сумма крупно и «скопировать» рядом, одна строка о копейках и таймер */
.tr-head {
  padding-top: 8px;
}

.tr-head .kicker {
  margin: 0 0 6px;
}

.tr-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.tr-amount {
  margin: 0;
  font-size: 36px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -1.2px;
}

.tr-copy {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--well);
  color: var(--ink);
  cursor: pointer;
}

.tr-copy .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.tr-copy:active {
  background: var(--well-2);
}

/* сколько ещё действуют сумма и код — серой меткой рядом с суммой */
.tr-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 32px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: 16px;
  background: var(--well);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.tr-left .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.tr-list .tr-copy {
  background: var(--well-2);
}

.tr-note {
  margin: 8px 0 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* платёжный QR-код: белый квадрат на плашке, ниже — как им пользоваться и «Сохранить» */
.tr-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  padding: 20px 16px 16px;
  border-radius: var(--r-group);
  background: var(--well);
  text-align: center;
}

.tr-qr-img {
  width: min(232px, 70%);
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
}

.tr-qr-img img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
}

.tr-qr-txt b {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.tr-qr-txt p {
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tr-pill {
  appearance: none;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: var(--dark-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

/* код заказа и реквизиты — строки «подпись над значением» в одной группе, без значков */
.tr-list {
  margin: 0 0 16px;
}

.tr-row {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 12px 10px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.tr-row + .tr-row::before,
.tr-row + .tr-fold-body::before,
.tr-fold-body .tr-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  height: 1px;
  background: var(--line);
}

.tr-fold-body {
  position: relative;
}

.tr-fold-body .tr-row:first-child::before {
  display: none;
}

.tr-val {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tr-val small {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tr-val b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.tr-fold {
  cursor: pointer;
}

.tr-fold:active {
  background: var(--well-2);
}

.tr-go {
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  stroke-width: 1.6;
  transition: transform 0.2s var(--ease);
}

/* раскрывающаяся строка — одна стрелка, которая поворачивается: вниз — свёрнуто, вверх — раскрыто; строка-переход
   («Перевод идёт долго?») — стрелкой вправо */
.tr-expand .tr-go {
  transform: rotate(90deg);
}

.tr-expand.open .tr-go {
  transform: rotate(-90deg);
}

.tr-fold-note {
  margin: 0;
  padding: 4px 16px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tr-after {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tr-btns {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.tr-more {
  margin-top: 16px;
}

/* «Я оплатил» (и «Перейти к переводу») всегда на экране: внизу поверх прокрутки, сплошным фоном страницы */
.tr-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: 8px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) calc(12px + var(--safe-b));
  background: var(--bg);
}

/* проверка перевода — ход тремя шагами, как статус перевода в банке */
.tr-track {
  margin: 20px 0 20px;
  padding: 6px 0;
  list-style: none;
}

.tr-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 16px;
}

.tr-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: -20px;
  left: 26px;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}

.tr-step.done::after {
  background: var(--good);
}

.tr-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--well);
  box-shadow: inset 0 0 0 2px var(--ink-4);
}

.tr-step.done .tr-dot {
  color: #ffffff;
  background: var(--good);
  box-shadow: none;
}

.tr-step.done .tr-dot .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.tr-step.now .tr-dot {
  box-shadow: inset 0 0 0 2px var(--warn);
}

.tr-step.now .tr-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  animation: tr-blink 1.6s ease-in-out infinite;
}

.tr-step.next .tr-val b {
  color: var(--ink-2);
}

@keyframes tr-blink {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-step.now .tr-dot::after {
    animation: none;
  }
}

/* долгое ожидание оплаты и проверка перевода — шар из точек над заголовком */
.pw-orb {
  min-height: 0;
  margin: 8px 0 18px;
}

.pay-sheet .pay-more-list {
  margin: 0;
}

/* ─── обложка экрана выбора срока (04.10, ночью) ───────────────────────────────────────────────────────────── */
/* Владелец: «всё из первого, но описание клуба из второго обложкой… в первом хоть есть конкретика». Ровный цвет курса
   во всю ширину, 3D-предмет курса, заголовок под тип человека, строка о доступе и три пункта «что входит» с настоящим
   числом уроков. Две компоновки на выбор (app.js, payCover): A — белые плашки лесенкой вокруг предмета, B — строки
   белым по цвету курса. Без градиентов, свечения, стекла и новых цветов; шрифт 24/16/15/14. */

.pay-cover {
  --on-accent: var(--accent-ink); /* текст на цвете курса: белый, а на светлых зелёном и лаймовом — чёрный */
  position: relative;
  margin: 12px calc(var(--gutter) * -1) 24px;
  padding: 20px var(--gutter) 24px;
  border-radius: 0 0 var(--r-hero) var(--r-hero);
  color: var(--on-accent);
  background: var(--accent);
}

.pay-cover[data-course="food"],
.pay-cover[data-course="energy"] {
  --on-accent: var(--btn-ink);
}

/* в Telegram сверху шапки нет (или она системная): обложка встаёт вплотную к верху страницы */
.pay-cover.flush:first-child {
  margin-top: -12px;
}

.pc-title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  text-wrap: balance;
}

.pc-sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 21px;
}

/* A «Плашки»: три белые плашки по две строки — название 16 полужирным, пояснение 14 серым — лесенкой и с лёгким
   поворотом вокруг предмета (он лежит под ними слева), заголовок под плашками */
.pay-cover.a .pc-stage {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 320px;
  margin: 0 0 20px;
}

.pay-cover.a .pc-obj {
  position: absolute;
  top: 4px;
  left: -4%;
  width: 52%;
  height: auto;
  animation: pc-float 6s ease-in-out infinite;
}

.pc-card {
  position: relative;
  z-index: 1;
  width: 66%;
  padding: 14px 16px;
  border-radius: var(--r-group);
  color: var(--btn-ink);
  background: var(--btn);
  transform: rotate(var(--r, 0deg));
  animation: pc-pop 0.5s var(--spring) calc(0.12s + var(--k, 0) * 0.08s) backwards;
}

.pc-card.c1 {
  --r: -2deg;
  margin-left: 34%;
}

.pc-card.c2 {
  --r: 1.5deg;
  margin-left: 26%;
}

.pc-card.c3 {
  --r: -1.5deg;
  margin-left: 14%;
}

/* путь курса в плашке уроков: пройденные — тёмным, «сейчас» — цветом курса, впереди — светлым */
.pc-path {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 14px;
  margin: 0 0 8px;
}

.pc-path i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-2);
}

.pc-path i.on {
  background: var(--btn-ink);
}

.pc-path i.now {
  width: 12px;
  height: 12px;
  background: var(--accent);
}

.pc-path em {
  margin-left: 2px;
  font-size: 12px;
  line-height: 14px;
  font-style: normal;
  color: var(--ink-4);
}

.pc-card b {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  text-wrap: balance;
}

.pc-desc {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-4);
  text-wrap: balance;
}


/* ─── «Чаты»: Ритм, Личная забота, Поддержка (web/chats_app.py) ─────────────── */
/* Только токены «Ритма 5»: белый фон, серые пузыри собеседника, свои — чёрные (главная кнопка), группы строк
   #f4f4f4 со скруглением 18, без градиентов и теней у кнопок. Разговор — продолжение css/16-chat.css. */

/* счётчик непрочитанного на шаре Ритма в шапке */
.avatar-btn .ava-count {
  position: absolute;
  top: -5px;
  right: -9px;
  z-index: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  border: 2px solid var(--bg);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--btn-ink);
  background: var(--btn);
  font-variant-numeric: tabular-nums;
}

.avatar-btn .ava-count[hidden] {
  display: none;
}

/* ─── список чатов ─────────────────────────────────────────────────────── */

.chats-title {
  margin: 8px 0 20px;
}

.chat-row {
  align-items: center;
}

.chat-row .txt span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-row.unread .txt span {
  color: var(--ink);
}

.chat-aside {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  align-self: stretch;
}

.chat-aside time {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.chat-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  color: var(--btn-ink);
  background: var(--btn);
  font-variant-numeric: tabular-nums;
}

.chat-aside .chat-lock {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  color: var(--ink-3);
}

/* Ритм в строке — его шар в круге 32, нота-антенна выходит вверх, как у шара в шапке */
.chat-orb {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.chat-orb img {
  position: absolute;
  left: -11px;
  top: -18px;
  width: 54px;
  height: 54px;
  pointer-events: none;
}

.chat-orb.big {
  width: 36px;
  height: 36px;
}

.chat-orb.big img {
  left: -12px;
  top: -20px;
  width: 60px;
  height: 60px;
}

.bubble.chat-big {
  width: 36px;
  height: 36px;
}

.bubble.chat-big .ic {
  width: 19px;
  height: 19px;
}

/* ─── разговор ─────────────────────────────────────────────────────────── */

.thread-head {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 12px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.thread-head > div {
  min-width: 0;
}

/* круг собеседника в шапке: правило «.chat-head span» (подпись серым) его не касается */
.thread-head > .bubble {
  display: grid;
  color: #ffffff;
  font-size: 0;
  line-height: 0;
}

.thread-state {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thread-state.typing-now {
  color: var(--ink);
}

.thread-offline {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: var(--r-row);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  background: var(--well);
}

.thread-offline[hidden] {
  display: none;
}

.thread-log {
  padding-bottom: 170px;
}

.thread .msg {
  animation: none;
}

.thread .msg.fresh {
  animation: rise 0.26s var(--ease) backwards;
}

.chat-day {
  margin: 20px 0 4px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.chat-ticket {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
}

.chat-ticket::before,
.chat-ticket::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.msg-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 12px 0 0;
}

.msg-group.cont {
  margin-top: 4px;
}

.msg-group.me {
  align-items: flex-end;
}

.msg-group > .msg {
  margin: 0;
}

.msg-who {
  margin: 0 0 4px 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* черновик обращения и цитаты в ответах — серой чертой слева, как цитата в Telegram */
.thread .msg blockquote {
  margin: 8px 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--ink-4);
  color: var(--ink);
}

.thread .msg time {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.msg.with-photo {
  max-width: 72%;
  padding: 4px;
}

.msg.with-photo .msg-text {
  display: block;
  padding: 8px 12px 0;
}

.msg.with-photo time {
  padding: 0 12px 4px;
}

.chat-photo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  max-height: 360px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--well-2);
  cursor: zoom-in;
}

.chat-photo.broken {
  min-height: 60px;
}

.msg-status {
  margin: 4px 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: right;
}

button.msg-status {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.msg-chosen {
  margin: 8px 0 0 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.chip-x.nav {
  gap: 2px;
}

.chip-x.nav .ic {
  width: 16px;
  height: 16px;
  margin-right: -4px;
  color: var(--ink-2);
}

/* оценка после решения: пять кругов, выбранные — чёрные, как выбор у Пронина */
.rate-card {
  width: 100%;
  max-width: 360px;
  margin: 8px 0 0;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.rate-card > b {
  display: block;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.rate-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.rate-dot {
  appearance: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}

.rate-dot.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.rate-ends {
  display: flex;
  justify-content: space-between;
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.rate-ends i {
  font-style: normal;
}

/* первый вход: «Чем помочь?» и частые вопросы */
.thread-intro .chat-hello {
  margin-top: 24px;
}

.thread-kicker {
  margin: 4px 4px 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.thread-topics .item {
  min-height: 54px;
  padding: 14px 16px;
}

/* ввод: строка состояния, подсказки, фото, поле */
.compose.thread-compose {
  display: block;
}

.compose-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.thread-hint {
  margin: 0 4px 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.thread-hint[hidden],
.thread-sugg[hidden],
.thread-attach[hidden] {
  display: none;
}

.thread-sugg {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.thread-sugg::-webkit-scrollbar {
  display: none;
}

.thread-sugg .chip-x {
  flex: none;
  white-space: nowrap;
}

.thread-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 8px 8px 8px 8px;
  border-radius: var(--r-row);
  background: var(--well);
}

.attach-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--well-2) center / cover no-repeat;
}

.attach-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.attach-txt b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.thread-attach.bad .attach-txt span {
  color: var(--ink);
}

.attach-x {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}

.attach-x .ic {
  width: 18px;
  height: 18px;
}

.clip {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 48px;
  margin: 0 -4px;
  padding: 0;
  border: 0;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}

.clip .ic {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.thread-compose.locked .btn {
  margin: 0;
}

/* фото на весь экран */
.photo-full {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #000000;
  cursor: zoom-out;
}

.photo-full img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* «Личная забота» без подписки */
.care-hero {
  margin: 28px 0 16px;
}

.care-hero .bubble.chat-big {
  width: 64px;
  height: 64px;
}

.care-hero .bubble.chat-big .ic {
  width: 30px;
  height: 30px;
}

.care-lead {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink-2);
}

.care-lock .hint {
  margin: 0 4px 20px;
}

.care-lock .btn + .btn {
  margin-top: 8px;
}

/* «Обращения» в шапке поддержки */
.thread-head > div {
  flex: 1;
}

.thread-tickets {
  appearance: none;
  position: relative;
  flex: none;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--chip);
  cursor: pointer;
}

.thread-tickets::after {
  content: "";
  position: absolute;
  inset: -4px;  /* зона касания 44 */
}

.thread-tickets[hidden] {
  display: none;
}

.thread-ticket-list {
  margin: 0 0 12px;
}

.sheet-title {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

/* черновик обращения — карточкой, а не текстом из бота */
.draft-card {
  width: 100%;
  max-width: 360px;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.draft-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.draft-lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.draft-quote {
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--ink-4);
  font-size: 16px;
  line-height: 24px;
  white-space: pre-wrap;
}

.draft-due {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.draft-card .btn {
  width: 100%;
  margin: 14px 0 0;
}

.draft-more .btn {
  margin: 0;
}

.draft-more {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
}

.draft-more .btn.second {
  flex: 1;
  background: var(--bg);
}

.chat-event {
  margin: 16px 0 4px;
}

/* ─── клуб — приложение в приложении ──────────────────────────────────────── */
/* Шапка как у вкладок: название 24 и строка «где ты сейчас», под ними линия. Главный блок — раздел главной Пронина:
   надпись капителью, заголовок 19, строка 15 и тёмная карточка 20: дело дня, тонкая шкала месяца, счёт и кнопка.
   Дальше — серые группы строк. Своих цветов нет. «Отмечено» везде одним знаком — .done-mark (чёрный круг с белой
   галочкой, в тёмной теме наоборот), шкалы — чернилами (критик 03.10: три цвета на одно «отмечено»). */

.club-head + .feature {
  margin-top: 20px;
}

.club-month + .list {
  margin-top: 16px;
}

/* тёмная карточка челленджа: «Дело дня», само дело и тонкая шкала месяца — как счётчик Пронина, без точек недели */
.cm-card {
  min-height: 0;
}

.cm-art {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--dark-ink-2);
}

.cm-task {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
  text-wrap: pretty;
}

.cm-bar {
  height: 4px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--dark-pill);
  overflow: hidden;
}

.cm-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ffffff;
}

/* закрытый клуб: карточка без кнопки — не нажимается, внизу серая строка с замком */
.cm-card.static {
  cursor: default;
}

.cm-card.static:active {
  transform: none;
}

.fc-foot.cm-foot-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-lock {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--dark-ink-2);
}

/* кнопка карточки: дело ждёт — белая «Отметить», отмечено — полупрозрачная с галочкой. Таблетка 36 и зона
   нажатия 44 — отметку легко попасть пальцем */
.cm-card .fc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  border-radius: 18px;
  color: #1d1d1f;
  background: #ffffff;
}

.cm-card .fc-btn::before {
  content: "";
  position: absolute;
  inset: -4px -4px;
}

.cm-card .fc-btn.on {
  color: #ffffff;
  background: var(--dark-pill);
}

.cm-card .fc-btn .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.cm-card .fc-btn[disabled] {
  opacity: 0.6;
}

/* челлендж целиком: дело дня с одной кнопкой, ниже счётчик цели и месяц днями */
.cm-cal {
  padding: 16px 8px 12px;
}

.cm-stat {
  margin: 0 8px 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.cm-stat > p {
  margin: 4px 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.cm-cal-head,
.cm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cm-cal-head span {
  padding: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: var(--ink-2);
}

.cm-grid {
  row-gap: 4px;
}

.cm-cell {
  appearance: none;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  transition: transform 0.12s ease;
}

/* прошедшие без отметки — серым, будущие — светло-серым; отмечено — тот же знак, что везде: чёрный круг с белой
   галочкой; сегодня — обводка */
.cm-cell.past {
  font-weight: 400;
  color: var(--ink-2);
}

.cm-cell.next {
  font-weight: 400;
  color: var(--ink-3);
}

.cm-cell.done {
  color: var(--btn-ink);
  background: var(--btn);
}

.cm-cell.done .ic {
  width: 18px;
  height: 18px;
  stroke-width: 3;
}

.cm-cell.now {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.cm-cell.can {
  cursor: pointer;
}

button.cm-cell:active {
  transform: scale(0.9);
}

.cm-cell.blank {
  visibility: hidden;
}

.cm-cal > .cm-hint {
  margin: 12px 8px 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--ink-2);
}

.cm-today > .kicker {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.card > .cm-today-task {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 24px;
}

.cm-done {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.cm-done b {
  flex: 1;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.cm-done .link-btn {
  min-height: 44px;
  font-size: 15px;
  color: var(--ink-2);
}

/* год в клубе: месяц строчными 14 серым в колонке 44, тема и вариант — как строка группы; идущий месяц — чернилами */
.cy-mon {
  flex: none;
  width: 44px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.cy-row.cur .cy-mon {
  font-weight: 500;
  color: var(--ink);
}

.club-gifts .stat-card > p:last-child {
  margin-bottom: 0;
}

/* закрытый клуб: что внутри (строки с замком) и как вступить */
.list.inside .item {
  align-items: flex-start;
}

.list.inside .item > .ic.go {
  margin-top: 8px;
}

.club-join {
  margin: 0 0 24px;
}

.club-join p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

/* листы клуба: идея недели, вариант челленджа, тема года */
.sheet-lesson .cm-sheet-note {
  font-size: 14px;
  line-height: 20px;
}

.sheet-lesson .cm-sheet-var b {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

.sheet-lesson .cm-sheet-var span {
  display: block;
  margin-top: 4px;
}

.cm-opt {
  align-items: center;
}

/* идеи недель в листе: «Неделя 1» мелко серым, под ним название */
.cm-ideas .item {
  min-height: 56px;
  padding: 8px 16px;
}

.cm-ideas .txt {
  gap: 0;
}

.cm-opt .txt span {
  white-space: normal;
}

/* ─── «Программа» с 03.10: каталог курсов, карточка курса, диагностика, термины; путь главами — 28-home.css ── */
/* Владелец 03.10: «список уроков ужасный, склад без иконок… и курс сверху как-то просто», «курсы отдельно все»,
   «базу терминов, как карточки, квизлет». Только «Ритм 5» (docs/design-system.md): серые группы со скруглением 18,
   строки 64–70 с круглыми залитыми значками 32, 16/500 и 14 серым, линия от текста до края. Цвет курса — только у
   его значка и шкалы дней. Без градиентов, теней и объёма. */

/* цвета курсов — те же, что у темы курса (01-tokens.css, data-course) */
.c-sleep { --cc: #ad46ff; }
.c-food { --cc: #00bc7d; }
.c-energy { --cc: #9ae600; }
.c-stress,
.c-teeth { --cc: #00a6f4; }
.c-move { --cc: #f6339a; }
.c-focus { --cc: #3392ff; }

.bubble.cc { background: var(--cc, var(--accent)); }

.bubble.big {
  width: 56px;
  height: 56px;
}

.bubble.big .ic {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.group-lead {
  margin: -4px 0 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.group-lead.first {
  margin: 0 0 16px;
}

/* «Пока ждёшь урок N» */
.wait-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 20px 0 10px;
}

.wait-head b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.wait-head span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* ─── «Курсы» ────────────────────────────────────────────────────────────── */

.tip-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: var(--btn-ink);
  background: var(--btn);
  vertical-align: 2px;
}

/* ─── карточка курса ─────────────────────────────────────────────────────── */

.cv-head {
  margin: 4px 0 0;
}

.cv-head .bubble.big,
.cq-body > .bubble.big {
  margin: 0 0 16px;
}

.cv-head .kicker,
.cq-body > .kicker {
  margin: 0 0 6px;
}

/* три числа, как счётчик у Пронина: уроки, типы, термины */
.cv-facts {
  display: flex;
  margin: 20px 0 0;
  padding: 14px 0;
  border-radius: var(--r-group);
  background: var(--well);
}

.cv-fact {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
}

.cv-fact + .cv-fact {
  box-shadow: inset 1px 0 0 var(--line);
}

.cv-fact b {
  display: block;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.cv-fact span {
  display: block;
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.cv-state {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-group);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.cv-state b {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.cv-state p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.cv-state .pbar {
  margin: 12px 0 2px;
}

.course-view .list .item .val {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.more-row {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.more-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  height: 1px;
  background: var(--line);
}

.more-row:active {
  background: var(--well-2);
}

.cv-disc {
  margin: 20px 0 0;
}

/* ─── «Курс начался», конец круга карточек ──────────────────────────────── */

.cat-done {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 40px;
  text-align: center;
}

.cat-done > .back-link {
  justify-self: start;
}

.cat-done .title {
  margin-top: 12px;
}

.cat-done .lead {
  margin: 0;
}

.cat-done .hint {
  margin: 0;
}

.cat-done .btns {
  justify-self: stretch;
  margin-top: 20px;
}

/* ─── диагностика курса ──────────────────────────────────────────────────── */

.cq-body.in > * {
  animation: rise-push 0.3s var(--ease) backwards;
}

.cq-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 20px;
}

.cq-top .pbar {
  flex: 1;
}

.cq-top span {
  flex: none;
  font-size: 14px;
  color: var(--ink-2);
}

.cq-body .title.cq-q {
  font-size: 20px;
  line-height: 26px;
}

.cq-body > .lead + .hint {
  margin-top: 16px;
}

.cq-opts {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
}

.cq-opts .opt {
  width: 100%;
}

.cq-body > .btn.ghost {
  margin-top: 12px;
}

.cq-body > .btn.submit {
  margin-top: 20px;
}

.cq-traits {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.cq-traits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 23px;
  color: var(--ink);
}

.cq-traits .ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  stroke-width: 2.4;
  color: var(--good);
}

.cq-body > .callout {
  margin: 16px 0 0;
}

.cq-stop p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.cq-body > .btn + .btn {
  margin-top: 10px;
}

/* ─── термины ────────────────────────────────────────────────────────────── */

.terms-view .seg {
  margin: 20px 0 0;
}

.terms-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
}

.terms-stat .pbar {
  flex: 1;
}

.terms-stat span {
  flex: none;
  font-size: 14px;
  color: var(--ink-2);
}

.term {
  appearance: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

button.term:active {
  background: var(--well-2);
}

.term + .term::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  height: 1px;
  background: var(--line);
}

.tm-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tm-t b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.tm-t span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tm-t .tm-x {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.term.locked {
  cursor: default;
}

.term.locked b {
  color: var(--ink-2);
}

.tm-t .tm-day {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* отметка с карточек: «новый» — чернилами, «повторить» — серым (цветного текста нет, галочка — значком) */
.tm-state {
  flex: none;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.tm-state.again {
  font-weight: 400;
  color: var(--ink-2);
}

.tm-known {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px -6px 0 0;
  stroke-width: 2.6;
  color: var(--good);
}

.tm-lock {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  stroke-width: 1.8;
  color: var(--ink-3);
}

.sheet-term .kicker {
  margin: 0 0 6px;
}

.sheet-term h3 + p {
  color: var(--ink);
  font-size: 16px;
  line-height: 25px;
}

/* карточки: термин → нажал → объяснение; «Не знаю» и «Знаю» под карточкой */
.cards-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 20px;
}

.cards-top .pbar {
  flex: 1;
}

.cards-top span {
  flex: none;
  font-size: 14px;
  color: var(--ink-2);
}

.flash {
  appearance: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 340px;
  margin: 0 0 16px;
  padding: 28px 24px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.flash .kicker {
  margin: 0 0 10px;
}

.fl-term {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  text-wrap: balance;
}

.fl-hint {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-3);
}

.fl-text {
  font-size: 17px;
  line-height: 26px;
  color: var(--ink);
}

.fl-from {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.flash.turn {
  animation: cat-turn 0.24s var(--ease);
}

@keyframes cat-turn {
  50% {
    transform: scaleX(0.04);
  }
}

/* переключатель «Уроки | Материалы | Курсы» — с воздухом под шапкой вкладки */
.program > .seg {
  margin: 16px 0 20px;
}

/* строка, где всё уже сделано: справа — галочка вместо стрелки */
.item .go.done {
  color: var(--good);
  stroke-width: 2.4;
}

.terms-facts {
  margin: 20px 0 0;
}

.cards-view .cv-facts {
  margin: 24px 0 0;
}

.cards-view > .btn.second {
  margin-top: 20px;
}

/* «Все 8» в «Для кого» — строкой со стрелкой */
.more-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.more-row .go {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  color: var(--ink-3);
}

/* действие карточки курса закреплено внизу, сплошным фоном страницы (как «Я оплатил» на переводе) */
.cv-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  margin: 20px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) calc(12px + var(--safe-b));
  background: var(--bg);
}

.cv-foot:empty {
  display: none;
}

.cv-foot .cv-note {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
}

.cv-foot .btn.submit {
  margin: 0;
}

.cv-plan {
  margin: 8px 0 0;
}

/* ─── отметки ночи и дня: итоги, вопрос утра, шаги (03.10, разбор critic/today.md) ─────────────────────────────── */
/* Итог — одна мысль, как «Доступ открыт»: зелёная галочка 64, заголовок 24, крупное число 30 и строка 15 серым — по
   центру, чуть выше середины; ниже одна группа строк со значками (события утра, совет на вечер) и одна кнопка. Вопрос
   утра — своим экраном: заголовок, пояснение, числа недели плитками, ответ — строками согласия в два ряда. Шаги отметки
   ночи — один столбец строк выбора, от вопроса до выбора 20. Только токены «Ритма 5»; цвет текста — оттенки чернил. */

.ck {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 72px - var(--safe-b));
  padding: 16px 0 8vh;
}

.ck-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px 24px;
  text-align: center;
}

.ck-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 0 16px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--good);
  animation: ck-pop 0.5s var(--spring) 0.1s backwards;
}

.ck-mark .ic {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.ck-title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

.ck-num {
  margin: 12px 0 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

.ck-num span {
  margin-left: 6px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--ink-2);
}

.ck-line {
  max-width: 320px;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
  text-wrap: balance;
}

.ck-head .ck-pills {
  justify-content: center;
  margin: 16px 0 0;
}

/* тихая текстовая кнопка: «Изменить» под метками дня, «Не сейчас» под почтой */
.ck-edit {
  appearance: none;
  min-height: 44px;
  margin: 8px 0 -8px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.ck-edit:active {
  opacity: 0.6;
}

.ck-rows {
  margin: 0 0 20px;
}

@keyframes ck-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-mark {
    animation: none;
  }
}

/* ─── вопрос утра: «Неделя позади», «Получилось?», «Вчера вечером», почта ─── */

.ck-step > .kicker {
  margin: 8px 0 6px;
}

.ck-step > .title {
  margin: 8px 0 0;
}

.ck-step > .kicker + .title {
  margin-top: 0;
}

/* длинный текст договорённости — вопросом 20/500, в две строки (docs/screen-checklist.md, п. 6) */
.ck-step > .title.ck-long {
  font-size: 20px;
  line-height: 26px;
}

.ck-step > .lead {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 21px;
}

/* три числа недели — плитками на серой плашке, как числа в карточке курса */
.ck-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 0;
}

.ck-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 14px 12px 12px;
  border-radius: var(--r-row);
  background: var(--well);
}

.ck-stat b {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

.ck-stat span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* самочувствие — деления на месте числа и слово подписью, как в карточке ночи */
.ck-stat-feel b {
  display: flex;
  align-items: center;
  height: 30px;
}

.ck-stat-feel .feelbar {
  height: 22px;
}

.ck-text {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.ck-step > .ck-rows {
  margin: 20px 0 0;
}

.ck-q {
  margin: 28px 0 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.ck-step > .lead + .ck-q,
.ck-step > .title + .ck-q {
  margin-top: 20px;
}

.ck-step > .title + .ck-choice,
.ck-step > .lead + .ck-choice,
.ck-step > .ck-more + .ck-choice {
  margin-top: 20px;
}

.ck-choice.busy .opt {
  pointer-events: none;
}

.ck-choice .opt.pending {
  animation: breathe 1s ease-in-out infinite;
}

.ck-more {
  margin: 12px 0 0;
}

.ck-more summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.ck-more summary::-webkit-details-marker {
  display: none;
}

.ck-more p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.ck-step .btn.ck-go {
  margin-top: 20px;
}

.ck-mail {
  margin: 20px 0 0;
}

.ck-skip {
  display: block;
  margin: 8px auto 0;
}

/* ─── отмечено: «Ночь на 2 октября», «Отмечено в 03:21», карточка, «Изменить» ─── */

.ck-done > .title {
  margin: 8px 0 0;
}

.ck-done > .lead {
  margin: 4px 0 20px;
  font-size: 15px;
  line-height: 21px;
}

.ck-done > .ck-pills {
  margin: 0 0 20px;
}

/* ночь карточкой — и до сохранения («Записать ночь?»), и после */
.card.ck-night {
  margin: 0 0 20px;
  padding: 16px 16px 14px;
}

.ck-night .sleepline {
  margin: 0 0 12px;
}

.ck-night .sleepline b {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.4px;
}

.ck-night .span {
  margin: 0 0 10px;
}

.card.ck-night > .facts {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.card.ck-night > .facts:first-letter {
  text-transform: uppercase;
}

/* ─── шаги отметки ночи: от вопроса до выбора 20, варианты — строками в один столбец ─── */

.nflow .flow-body > .title {
  margin: 8px 0 20px;
}

.nflow .flow-body > .title.has-lead {
  margin-bottom: 8px;
}

.nflow .flow-body > .lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 21px;
}

.nflow .field {
  margin: 0;
}

.opts.ck-one {
  grid-template-columns: 1fr;
}

/* самочувствие: слово слева, деления справа */
.ck-feel .opt {
  justify-content: flex-start;
}

.ck-feel .ck-feel-w {
  flex: 1;
}

.ck-feel .feelbar {
  flex: none;
  height: 18px;
}

.nflow .card.ck-night {
  margin: 0;
}

.nflow .flow-main {
  margin-top: 20px;
}

.nflow .btn.ck-change {
  margin-top: 8px;
}

/* ─── «Как Ритм подстраивается» ──────────────────────────────────────────── */
/* Экран из «Мой ритм» (viewAdapt в app.js): «Сейчас» — карточка-счётчик, как в «Программе» (будильник крупно, строка,
   шкала пути и одна-две строки про вечер), ниже журнал изменений одним списком и «Что я учитываю» — обычные группы
   строк «Ритма 5». Своих цветов и размеров нет: токены 01-tokens.css, цветного текста нет. */

.adapt-now {
  margin: 4px 0 0;
}

.adapt-now .kicker {
  margin-bottom: 6px;
}

/* строки под шкалой — внутри той же карточки: без своей плашки, линия от текста до края, как в группах */
.adapt-now .an-rows {
  margin: 14px 0 -6px;
  border-top: 1px solid var(--line);
}

.adapt-now .item {
  min-height: 0;
  padding: 12px 0;
}

.adapt-now .item + .item::before {
  left: 44px;
  right: 0;
}

/* журнал — одна группа строк, дата справа серым, как значение в строке профиля */
.adapt-log .list {
  margin-bottom: 8px;
}

.adapt-row .val {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 14px;
}

.adapt-log > .btn {
  margin-top: 8px;
}

.adapt-empty {
  margin: 0 0 8px;
}

/* лист с причиной: заголовок по шкале «Ритма 5» — 20/26, как раздел (общий заголовок листа урока — 22, вне шкалы) */
.adapt-sheet h3 {
  font-size: 20px;
  line-height: 26px;
}

/* ─── ощущение приложения (03.10, ночь) ─────────────────────────────────────── */
/* Владелец: «отклик где-то не такой», «нельзя отменить», «вышел — вернулся на то же место». Здесь: нажатие видно у
   всего, что нажимается; уведомление с «Отменить»; урок во весь экран. Только токены «Ритма 5»: нажатие строки —
   --well-2, кнопки — прозрачность, как у главной кнопки; цветного текста нет. */

/* нажатие видно у всего, что нажимается: у этих элементов своего :active не было */
.seg button,
.segm button,
.kq-again,
.msg-status.fail,
.rate-dot,
.attach-x,
.clip,
.me-card,
.fc-btn,
.switch-row,
.toast-act {
  transition: opacity 0.12s ease;
}

.seg button:active,
.segm button:active,
.kq-again:active,
.msg-status.fail:active,
.rate-dot:active,
.attach-x:active,
.clip:active,
.fc-btn:active,
.switch-row:active,
.toast-act:active {
  opacity: 0.6;
}

.me-card:active {
  opacity: 0.8;
}

.stream-row[role="button"] {
  transition: background-color 0.16s ease;
}

.stream-row[role="button"]:active {
  background: var(--well-2);
}

/* тихая вторая кнопка («Изменить», «Поправить ночь», «Отменить отбой», «Выйти из мини-курса») — сразу под главной */
.btn + .btn.ghost {
  margin-top: 4px;
}

/* ─── уведомление с действием: «День отмечен · Отменить» ────────────────── */

/* уведомление по ширине текста: раньше от left: 50% ему доставалась половина экрана, и даже «Отбой в 02:50 отменён»
   ломалось на две строки */
.toast {
  width: max-content;
}

.toast.act {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 520px;
  padding: 4px 4px 4px 18px;
}

.toast.act .toast-t {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
}

/* сверху — когда внизу экрана своя кнопка («Дальше» в уроке): «На главную» не должна лечь на неё */
body .toast.top,
body.full .toast.top,
body.composing .toast.top {
  top: calc(64px + var(--full-top, 0px));
  bottom: auto;
}

/* «Отменить» — таблеткой того же цвета, что текст уведомления: без цветного текста (владелец 03.10) */
.toast-act {
  appearance: none;
  flex: none;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: rgba(127, 127, 127, 0.28);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}

/* ─── «Ритм на главном экране» и «Во весь экран» в «Где заниматься», «Рассвет по месту» в «Окне света» ── */

.home-list,
.place-list {
  margin-top: 24px;
}

/* ─── во весь экран (Bot API 8.0): всё приложение по настройке или урок по кнопке ─────────────────── */
/* Шапки Telegram нет: сверху — системная строка и кнопки Telegram поверх страницы. Под ними — сплошной фон, чтобы
   прокрученное не просвечивало; содержимое и липкие шапки начинаются ниже. */

body.tg-full {
  --full-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}

body.tg-full::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 45;
  height: var(--full-top);
  background: var(--bg);
  pointer-events: none;
}

body.tg-full .app {
  padding-top: calc(12px + var(--full-top));
}

body.tg-full .pl-top,
body.tg-full .flow-top,
body.tg-full .thread-head {
  top: var(--full-top);
}

body.tg-full .sheet .panel {
  max-height: calc(100% - var(--full-top) - 12px);
}

.pl-full {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.12s ease;
}

.pl-full .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.pl-full:active {
  opacity: 0.6;
}

/* видно 36, а нажимается 44 — как просит чек-лист экрана (п. 18) */
.pl-full::after {
  content: "";
  position: absolute;
  inset: -4px;
}

/* мини-курс: «Отмечено: в зачёт» — без зелёного текста (владелец 03.10: «никакого цветного текста»); зачёт и так
   виден галочкой в списке дней */
.sm-mark.ok,
.sm-mark.late {
  color: inherit;
}

/* ─── разбор критика 03.10 ─────────────────────────────────────────────────── */

/* «Спокойной ночи» после «Ложусь спать»: шар, заголовок и одна строка с числами — по центру, как экран-итог */
.night-sheet {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 4px 0 24px;
  text-align: center;
}

.night-sheet .art {
  width: 96px;
  height: 96px;
  margin: 0 0 8px;
}

.night-sheet h3 {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.night-sheet p {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

/* мини-курс: в тёмной карточке задание — прямо текстом, без второй плашки; «Подробнее» — таблеткой, как на карточке
   «Подходит тебе»; подпись «день 1 из 3» — по шкале шрифтов (было 13) */
.sm-do {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 23px;
  color: var(--dark-ink);
}

.sm-today .btn.small {
  margin: 0 0 16px;
}

.sm-progress span {
  font-size: 14px;
}

/* «Окно света»: солнце — тем же жёлтым, что «свет утром», без перелива */
.chart .s-sun {
  fill: var(--c-light);
}

.sw.s-sun {
  background: var(--c-light);
}

/* «Окно света»: пояснение к выбранному отрезку — прямо в серой карточке под чертой, без белой коробки внутри серой
   (сводка критика, п. 7) */
.tool .chart-card .pick-info {
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

/* рассвет и закат под полосой солнца — серым и по шкале шрифтов (было жёлтым 11 px) */
.chart .sun-t {
  fill: var(--ink-2);
  font-size: 12px;
}

/* ─── знакомство и отметка ночи шагами: общий каркас мастера (.flow-*) ──────────────────────────────────── */
/* Перенесено из 15-lesson.css 03.10. Сейчас этим каркасом пользуется отметка ночи шагами (app.js, nightForm, правки —
   14-forms.css, .nflow) и запасной вид шага знакомства без экрана (app.js, viewFlow → drawPlain). Само знакомство —
   экранами .ob-* ниже. */

.flow-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: -12px calc(-1 * var(--gutter)) 12px;
  padding: 8px var(--gutter);
  background: var(--bg);
}

.flow-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  margin-left: -8px;
  padding: 6px 10px 6px 2px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
}

.flow-back .ic {
  width: 22px;
  height: 22px;
}

.flow-bar {
  flex: 1;
}

.flow-bar i {
  width: 5%;
  background: var(--ink);
  transition: width 0.5s var(--ease);
  animation: none;
}

.flow-body {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.flow-body.in > * {
  animation: rise 0.34s var(--ease) backwards;
}

.flow-body.in > *:nth-child(2) { animation-delay: 30ms; }

.flow-body.in > *:nth-child(3) { animation-delay: 60ms; }

.flow-body.in > *:nth-child(4) { animation-delay: 90ms; }

.flow-body.in > *:nth-child(n + 5) { animation-delay: 120ms; }

.flow-body > .title {
  margin: 4px 0 10px;
}

.flow-text p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
}

.flow-text p b,
.flow-text p strong {
  font-weight: 500;
  color: var(--ink);
}

.flow-body > .lead {
  margin: 0 0 20px;
}

.flow-main {
  margin-top: 16px;
}

.flow-body > .btn.ghost {
  margin-top: 6px;
}

/* ─── знакомство: экраны шагов (app.js — viewFlow и flowScreen; сервер — handlers/intro.py, _ui) ──────────────── */
/* Владелец 03.10: «не чат в экранах — под мини-апп всё интерактивно упаковано», «экраны воздушные, сытые, всё сразу
   понятно». Устроен как экран урока: сверху «Назад» и полоска пути (знакомство → диагностика → план), ниже шаг,
   внизу одна чёрная кнопка. Детали — «Ритма 5»: ответы — серые строки с кружком (согласие Пронина), курсы и сферы —
   группы строк со значком (его профиль), короткие ответы — плитками, время — барабаном. Цвет курса — у полоски,
   значка шага и выбранного; до выбора курса полоска чёрная. */

/* ровно в экран: сверху .app даёт 12, снизу 28 + safe-b (02-base.css, body.full) — нижний отступ забираем, иначе
   каждый шаг чуть прокручивался (критик 03.10, проход 2: 872 при экране 844); кнопка внизу остаётся на месте */
.ob {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 12px);
  margin-bottom: calc(-28px - var(--safe-b));
}

.ob-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: -12px calc(var(--gutter) * -1) 0;
  padding: 14px var(--gutter) 12px;
  background: var(--bg);
}

.ob-back {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--chip);
  color: var(--ink);
  cursor: pointer;
}

.ob-back .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.ob-back:active {
  opacity: 0.6;
}

.ob-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.ob-bar i {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transition: width 0.5s var(--ease);
}

.ob[data-course] .ob-bar i {
  background: var(--accent);
}

.ob-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 0 20px;
}

/* короткий шаг — по центру свободного места, оптически чуть выше середины (как короткий шаг урока) */
.ob-stage.mid::before,
.ob-stage.mid::after {
  content: "";
  flex: 2;
}

.ob-stage.mid::after {
  flex: 3;
}

.ob-step {
  display: flex;
  flex-direction: column;
}

.ob-step.in {
  animation: pl-in 0.36s var(--ease) backwards;
}

.ob-step.back {
  animation: pl-back 0.3s var(--ease) backwards;
}

.ob-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 12px var(--gutter) calc(16px + var(--safe-b));
  background: var(--bg);
}

.ob-foot:empty {
  display: none;
}

.ob.busy .ob-stage,
.ob.busy .ob-foot {
  pointer-events: none;
}

.ob .pending {
  animation: breathe 1s ease-in-out infinite;
}

/* ─── текст шага ─── */

.ob-kicker {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* подпись группы («Что я вижу по ответам», «Темп», «Россия») — 12 капителью, как .kicker системы */
.ob-kicker.sm {
  margin: 24px 0 8px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

.ob-title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--ink);
  text-wrap: balance;
}

.ob-sub {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.ob-title.center,
.ob-sub.center,
.ob-hint.center {
  text-align: center;
}

/* отклик на прошлый ответ — серая строка с зелёной галочкой: «записал», без фиолетового абзаца */
.ob-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.ob-note.center {
  justify-content: center;
  margin: 12px 0 0;
  text-align: center;
}

.ob-note .ic,
.ob-ok .ic {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 2.5px;
  border-radius: 50%;
  stroke-width: 3.4;
  color: #ffffff;
  background: var(--good);
}

/* строка с галочкой у кнопки: значок — в начале текста, а не у левого края, когда текст в две строки */
.ob-ok {
  display: block;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
  text-wrap: balance;
}

.ob-foot .ob-ok {
  margin: 2px 0 0;
}

.ob-ok .ic {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 6px 0 0;
  vertical-align: -2px;
}

.ob-hint {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.ob-foot .ob-hint {
  margin: 0;
}

.ob-error {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--bad);
}

.ob-p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

/* ─── главное крупно: Ритм, значок шага, тип, часы, бесплатные дни ─── */

.ob-orb {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 20px;
  pointer-events: none;
}

.ob-orb.sm {
  width: 88px;
  height: 88px;
  margin-bottom: 16px;
}

.ob-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.ob-icon .ic {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

.ob-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ob-hero .ob-kicker {
  margin-bottom: 4px;
}

.ob-hero .ob-title {
  margin-bottom: 6px;
}

/* «Всё готово»: тот же зелёный знак, что у итогов отметок и «Доступ открыт» (.ck-mark, 23-checkin.css) — по центру */
.ob-step > .ck-mark {
  margin: 0 auto 20px;
}

.ob-clock {
  margin: 0 0 18px;
  text-align: center;
}

.ob-clock .ob-kicker {
  margin: 0;
}

.ob-clock b {
  display: block;
  margin-top: 2px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink);
}

/* ─── ответы и выбор ─── */

.ob-step .list {
  margin: 20px 0 0;
}

.ob-step .ob-kicker.sm + .list {
  margin-top: 0;
}

.ob-opts {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.ob-opt {
  min-height: 54px;
}

/* длинный список «отметь несколько» — плотнее, как .pl-opts.many в уроке: последний вариант виден без прокрутки */
.ob-opts.many {
  gap: 6px;
}

.ob-opts.many .ob-opt {
  min-height: 46px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ob-opts.many .ob-opt b {
  font-size: 15px;
  line-height: 20px;
}

/* плитки для коротких ответов: «Готов / Готова», возраст */
.ob-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}

.ob-tiles.three {
  grid-template-columns: repeat(3, 1fr);
}

.ob-tile {
  appearance: none;
  min-width: 0;
  min-height: 60px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-row);
  background: var(--well);
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.ob-tile:active {
  transform: scale(0.97);
}

.ob-tile.on {
  color: var(--btn-ink);
  background: var(--btn);
}

/* сферы и «отметь несколько» со значком: строка группы, справа — тот же кружок 22, что в строках выбора и в уроке
   (критик 03.10, проход 2: квадратик был только здесь). Слева место занято значком курса */
.ob-check {
  min-height: 56px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ob-box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--ink-4) center / 13px 13px no-repeat;
  transition: background-color 0.18s ease;
}

.ob-check.on .ob-box {
  background-color: var(--btn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .ob-check.on .ob-box {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ob-field {
  margin-top: 20px;
}

.ob-input {
  height: 56px;
  border-radius: var(--r-row);
  font-size: 17px;
}

/* «Другое» на «Как ты обо мне узнал?»: поле прямо под строкой */
.ob-other {
  display: grid;
}

.ob-cities .item {
  min-height: 54px;
}

/* ─── барабан времени ─── */

.ob-chips {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.ob-chips .tchip {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  font-size: 15px;
}

/* выбранная — обводкой чернилами, а не заливкой: чёрная — только главная кнопка, а само время видно на барабане */
.ob-chips .tchip.on {
  color: var(--ink);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.wheel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 220px;
  margin: 16px 0 0;
  user-select: none;
  -webkit-user-select: none;
}

.wh-band {
  position: absolute;
  top: 88px;
  right: 0;
  left: 0;
  height: 44px;
  border-radius: 14px;
  background: var(--well);
  pointer-events: none;
}

.wh-col {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 220px;
  overflow-x: hidden; /* барабан крутится только вверх-вниз: без этого колонку можно было увезти вбок (владелец 04.10) */
  overflow-y: scroll;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
  border-radius: 14px;
}

.wh-col::-webkit-scrollbar {
  display: none;
}

.wh-col:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ink-3);
}

.wh-list {
  padding: 88px 0;
}

.wh-i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  scroll-snap-align: center;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  opacity: 0.3;
  cursor: pointer;
  transition:
    color 0.12s ease,
    opacity 0.12s ease,
    transform 0.12s ease;
}

.wh-i.on {
  font-weight: 500;
  color: var(--ink);
  opacity: 1;
  transform: scale(1.2);
}

.wh-i.n1 {
  color: var(--ink-2);
  opacity: 0.75;
}

.wh-i.n2 {
  opacity: 0.45;
}

.wh-sep {
  position: relative;
  z-index: 1;
  margin-top: -3px;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

/* ─── итоги: иллюстрация, числа, темп, «что я вижу», «Важно», вопрос у кнопок ─── */

.ob-vis {
  margin-top: 20px;
}

.ob-step > .ob-vis:first-child {
  margin-top: 0;
}

.ob-vis > .vis {
  margin: 0;
}

.ob-pace {
  margin: 0;
}

.ob-facts .item {
  min-height: 0;
  padding: 14px 16px;
}

.ob-facts .txt span {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}

.ob-step > .callout {
  margin: 20px 0 0;
}

.ob-care p {
  font-size: 15px;
  line-height: 22px;
}

/* вопрос итога — над кнопками внизу (в .ob-foot) */
.ob-ask {
  margin: 0 0 4px;
}

.ob-ask b {
  display: block;
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
}

.ob-ask span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.ob-step > details.quote {
  margin: 12px 0 0;
}

.ob-step .consent-list {
  margin-top: 20px;
}

/* общая картина: сферы шкалой из пяти делений, совет — цветом курса */
.ob-meters {
  display: grid;
  gap: 12px;
}

.ob-meter {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
}

.ob-meter b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.ob-cells {
  display: flex;
  gap: 4px;
}

.ob-cells i {
  width: 18px;
  height: 8px;
  border-radius: 4px;
  background: var(--track);
}

.ob-cells i.on {
  background: var(--ink-3);
}

.ob-meter.tip .ob-cells i.on {
  background: var(--accent);
}

/* последний штрих: чат Ритма с булавкой — как строка в списке чатов Telegram */
.ob-chat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.ob-ava {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg);
}

.ob-ava img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ob-chat .txt {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.ob-chat .txt b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.ob-chat .txt span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.ob-pin .ic {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transform: rotate(45deg);
}

/* «Всё готово»: первый урок строкой группы */
.ob-lesson .txt small {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ob-lesson .item {
  min-height: 78px;
}

/* экран по центру (приветствие, перед анкетой, часы, «всё готово»): подпись и отклик — тоже по центру */
.ob-kicker.center {
  text-align: center;
}

.ob-note.mid {
  justify-content: center;
  text-align: center;
}

/* путь к цели: заголовок и строка о ступеньках уже есть на экране — внутри иллюстрации их не повторяем */
.ob-vis .vis-plan > .kicker,
.ob-vis .vis-plan > .vp-note {
  display: none;
}

/* карта программы: «Неделя 1» — 12 по шкале (13 — вне шкалы) */
.ob-vis .vm-w {
  font-size: 12px;
}

.ob-traits {
  margin: 22px 0 0;
}

.ob-traits li:last-child {
  margin-bottom: 0;
}

.ob-fold {
  margin: 12px 0 0;
}

.ob-fold-in {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

/* по левому краю (критик 03.10: по центру — только итог из одной мысли): Ритм и значок шага — слева */
.ob-orb.left,
.ob-icon.left {
  margin-left: 0;
  margin-right: 0;
}

.ob-orb.left {
  width: 88px;
  height: 88px;
  margin-bottom: 16px;
}

.ob-hero {
  align-items: flex-start;
  text-align: left;
}

.ob-icon.left {
  margin-bottom: 14px;
}

/* живая строка под барабаном: «Сон около 8 ч» меняется при прокрутке */
.ob-live {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
  text-align: center;
}

.ob-care-more {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ─── пульт админа и двойник (static/admin.js, docs/admin-miniapp.md) ───────────────────────────────── */
/* Только «Ритм 5» (docs/design-system.md): группы строк #f4f4f4 со скруглением 18 и кругами 32, счётчики (число
   30/500, подпись 14 серым), фильтры-таблетки, лист снизу, тёмная карточка #262629. Своих цветов нет: всё — токены.
   Единственный новый вид — чат двойника: нарочно как Telegram, потому что показывает, что человек увидит в чате. */

/* ─── счётчики плитками ─── */

.adm-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 16px;
}

.adm-tile {
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.adm-tile b {
  display: block;
  overflow: hidden;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.adm-tile span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.adm-tiles.four {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.adm-tiles.four .adm-tile {
  padding: 12px 10px 12px;
  text-align: center;
}

.adm-tiles.four .adm-tile b {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.2px;
}

.adm-tiles.four .adm-tile span {
  font-size: 14px;
  line-height: 20px;
}

/* ─── воронка: шаг, число и доля — строкой со шкалой ─── */

.adm-funnel {
  padding: 4px 0;
}

.adm-step {
  padding: 12px 16px;
}

.adm-step + .adm-step {
  border-top: 1px solid var(--line);
}

.adm-step-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.adm-step-top b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.adm-step-top span {
  font-size: 15px;
  color: var(--ink-2);
}

.adm-step.off .adm-step-top {
  margin: 0;
}

/* ─── люди ─── */

.adm-search {
  position: relative;
  display: block;
  margin: 0 0 14px;
}

.adm-search .ic {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: var(--ink-3);
  pointer-events: none;
}

.adm-search .input {
  padding-left: 44px;
  -webkit-appearance: none;
  appearance: none;
}

.adm-search .input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.adm-ini {
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: #ffffff;
}

.adm-person .txt b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.adm-handle {
  font-weight: 400;
  color: var(--ink-2);
}

.adm-person .val {
  font-size: 14px;
}

.adm-more {
  margin: 4px 0 16px;
}

.adm-empty p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

/* ─── карточка человека ─── */

.adm-now {
  margin: -8px 0 20px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.adm-now b {
  font-weight: 500;
  color: var(--ink);
}

.adm-acc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-acc .kicker {
  margin: 0 0 4px;
}

.adm-acc-line {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}

.adm-acc-sub {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.adm-acc > .btn {
  margin-top: 16px;
}

.adm-acc > .btn.adm-revoke {
  margin-top: 4px;
  min-height: 44px;
  font-size: 15px;
  color: var(--bad);
}

.adm-history .adm-ev {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 16px;
  font-size: 15px;
  line-height: 21px;
}

.adm-history .adm-ev + .adm-ev {
  border-top: 1px solid var(--line);
}

.adm-ev-t {
  flex: none;
  width: 92px;
  font-size: 14px;
  color: var(--ink-2);
}

.adm-ev-w {
  min-width: 0;
  color: var(--ink);
}

button.adm-ev.more {
  appearance: none;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

/* ─── лист подтверждения и листы двойника ─── */

.adm-sheet .choice {
  margin: 0 0 12px;
}

.adm-sheet .opt.wide {
  min-height: 50px;
  padding: 13px 16px 13px 14px;
}

.adm-switch {
  appearance: none;
  width: 100%;
  min-height: 64px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 0;
  text-align: left;
  font: inherit;
}

.adm-switch .lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-switch .lbl b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.adm-switch .lbl span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-2);
}

.adm-lines {
  margin: 0 0 16px;
}

.adm-lines .item.static {
  min-height: 52px;
  padding: 12px 16px;
}

.adm-lines .txt span {
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
}

.adm-li {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: var(--ink-2);
}

.kicker.adm-k {
  margin: 4px 0 10px;
}

.adm-time {
  margin: 0 0 18px;
}

.adm-sheet .list + .adm-switch {
  margin-top: -4px;
}

/* ─── главная пульта: тёмная карточка двойника ─── */

.twin-card .kicker {
  color: var(--dark-ink-2);
}

.twin-card h2 {
  margin: 6px 0 0;
  font-size: 19px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dark-ink);
}

.twin-card .tw-line {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--dark-ink-2);
}

.twin-card .tw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  line-height: 20px;
  color: var(--dark-ink-2);
}

.twin-card .tw-row .btn.small {
  color: #ffffff;
  background: var(--dark-pill);
}

/* ─── шапка вкладки у двойника: «Двойник · пт 3 окт, 08:30», круг — лист двойника ─── */

.twin-head .twin-now b {
  font-weight: 500;
  color: var(--ink);
}

.avatar-btn.twin-ava {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--dark-card);
}

.avatar-btn.twin-ava .ic {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* ─── навигатор: курс неделями, урок строкой ─── */

.adm-course .seg {
  margin-bottom: 8px;
}

.adm-weeks .lrows {
  margin: 0 0 10px;
}

.adm-lrow .lr-t small:empty {
  display: none;
}

.adm-lrow .lr-n {
  font-size: 17px;
}

.adm-lrow .lr-k {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.72px;
}

.adm-lrow .lr-t small,
.adm-weeks .wk-t small {
  font-size: 14px;
  line-height: 20px;
}

/* ─── чат двойника ─── */

.tc-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
}

.tc-day {
  margin: 8px 0 2px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}

.tc-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 88%;
}

.tc-msg.me {
  align-self: flex-end;
  align-items: flex-end;
}

.tc-bubble {
  position: relative;
  padding: 10px 14px 8px;
  border-radius: 18px 18px 18px 6px;
  background: var(--well);
  font-size: 16px;
  line-height: 23px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.tc-msg.me .tc-bubble {
  border-radius: 18px 18px 6px 18px;
  color: var(--btn-ink);
  background: var(--btn);
}

.tc-bubble p {
  margin: 0 0 8px;
}

.tc-bubble p:last-of-type {
  margin-bottom: 4px;
}

.tc-bubble b,
.tc-bubble strong {
  font-weight: 500;
}

.tc-photo {
  display: block;
  width: calc(100% + 28px);
  max-width: none;
  margin: -10px -14px 10px;
  border-radius: 18px 18px 0 0;
}

.tc-time {
  display: block;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  color: var(--ink-2);
}

.tc-msg.me .tc-time {
  color: var(--dark-ink-2);
}

.tc-row {
  display: flex;
  gap: 6px;
}

.btn.tc-b {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 18px;
}

.tc-aside {
  margin: 0;
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--ink-2);
}

.tc-kb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 20px;
}

/* ─── «Сегодня» и «Программа», вечер 03.10: свои, а не витрина Пронина ──────────────────────────────────────────── */
/* Владелец 03.10: «карусель на главном — не знаю», «список уроков — копия Пронина», «в целом пока топорно»,
   «везде одно и то же — блоки, разделы, карточки», «разделы по-разному», «инструменты и SOS — не нашёл».
   «Сегодня»: тёмная карточка дня — такты дня сверху, ниже то, что делаем сейчас, и одна кнопка; сообщения Ритма
   пузырями; плитки разной формы (курс путём, ночи столбиками, подъём крупным временем, инструменты значками).
   «Программа»: курс, освоенное крупными числами, путь главами. Только «Ритм 5»: токены 01-tokens.css, шрифт
   24/20/19/17/16/15/14/12, крупное число 30, цвет курса — одно выделение на экран (шкала дней), без коробок в коробках. */

/* ─── шапка вкладки: SOS рядом с шаром Ритма ─── */

.th-acts {
  display: flex;
  flex: none;
  align-items: center;
  gap: 20px;
}

.sos-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: var(--chip);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.16s ease;
}

.sos-btn:active {
  transform: scale(0.96);
  opacity: 0.7;
}

/* ─── карточка дня ─── */

.day-card {
  margin: 20px 0 0;
  padding: 16px 20px 20px;
  border-radius: var(--r-card);
  color: var(--dark-ink);
  background: var(--dark-card);
  box-shadow: inset 0 0 0 1px var(--dark-edge);
}

.day-card.solo {
  padding-top: 20px;
}

/* такты: полоска, название, подпись. Сделано — полоска целиком, сейчас — наполовину, впереди — дорожка */
.beats {
  display: flex;
  gap: 8px;
  margin: 0 -4px 18px;
}

.beat {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 52px;
  margin: 0;
  padding: 4px 4px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--dark-ink-2);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.16s ease;
}

.beat:active {
  opacity: 0.6;
}

.beat-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  margin: 0 0 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.beat.done .beat-bar {
  background: #ffffff;
}

.beat.now .beat-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  border-radius: 2px;
  background: #ffffff;
}

.beat b {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
}

.beat small {
  max-width: 100%;
  font-size: 12px;
  line-height: 16px;
  color: var(--dark-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beat.on {
  color: var(--dark-ink);
}

.beat-ok {
  flex: none;
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.dc-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--dark-ink-2);
}

.dc-title {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--dark-ink);
  text-wrap: balance;
}

.dc-line {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--dark-ink-2);
}

.dc-sum {
  display: block;
  margin: 10px 0 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--dark-ink);
}

/* кнопка — внизу карточки на одном месте: тело карточки не ниже самого частого (надпись, заголовок, две строки) */
.dc-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.day-card:not(.solo) .dc-body {
  min-height: 166px;
}

.dc-gap {
  flex: 1 0 18px;
}

.dc-body.swap {
  animation: dc-swap 0.26s var(--ease);
}

@keyframes dc-swap {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}

/* ─── сообщения Ритма: пузырь от шара, как в чате; ответы — таблетками под ним ─── */

.home-inbox:empty {
  display: none;
}

.home-inbox {
  margin: 20px 0 0;
}

.hm-msg {
  appearance: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  animation: rise 0.26s var(--ease) backwards;
}

.hm-msg + .hm-msg,
.hm-ask + .hm-msg,
.hm-msg + .hm-ask {
  margin-top: 12px;
}

button.hm-msg {
  cursor: pointer;
}

button.hm-msg:active .hm-bubble {
  background: var(--well-2);
}

.hm-msg > .chat-orb,
.hm-msg > .bubble {
  margin-bottom: 2px;
}

.hm-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hm-bubble {
  display: block;
  max-width: 100%;
  padding: 10px 16px 12px;
  border-radius: 22px 22px 22px 6px;
  background: var(--well);
  transition: background-color 0.16s ease;
}

.hm-bubble small {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.hm-bubble p,
.hm-bubble .hm-p {
  display: block;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
}

.hm-reply .hm-bubble .hm-p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.hm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0 42px;
}

.hm-chips .btn {
  width: auto;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  font-size: 15px;
}

.hm-chips.sent .btn:not(.pending) {
  opacity: 0.4;
}

/* ─── плитки: сетка 2 колонки, у каждой своя форма ─── */

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 0;
}

.tile {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  border: 0;
  border-radius: var(--r-group);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.tile.wide {
  grid-column: 1 / -1;
}

button.tile:active,
.stream-tile:active:not(:has(.btn:active)) {
  background: var(--well-2);
}

.tl-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tl-big {
  display: block;
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink);
  white-space: nowrap;
}

.tl-name {
  display: block;
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.tl-sub {
  display: block;
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.tile .pbar {
  margin: auto 0 0;
}

.wake-tile .tl-sub,
.level-tile .tl-sub {
  margin-bottom: 14px;
}

/* курс — путём */
.pb-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pb-top .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pb-top .txt b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.pb-top .txt span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.pb-top .go {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  color: var(--ink-3);
}

.pb-ticks,
.ph-ticks {
  display: flex;
  gap: 7px;
  margin: 14px 0 0;
}

.pb-ch {
  display: flex;
  flex: 7 1 0;
  gap: 3px;
  min-width: 0;
}

.pb-ch i {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
}

.pb-ch i.on {
  background: var(--accent);
}

.pb-ch i.now {
  background: var(--ink);
}

.pb-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.pb-foot span:first-child {
  flex: none;
  white-space: nowrap;
}

.pb-foot span:last-child:not(:first-child) {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ночи — столбиками: высота — сколько спал; меньше нормы — светлее, не отмечена — точкой */
.nt-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
  margin: 12px 0 0;
}

.nt-bars i {
  flex: 1;
  min-width: 0;
  border-radius: 3px;
  background: var(--ink);
}

.nt-bars i.short {
  background: var(--ink-3);
}

.nt-bars i.none,
.nt-bars i.nos {
  height: 4px;
  background: var(--track);
}

/* инструменты — значками в ряд: значок, название, что с ним */
.tools-tile {
  cursor: default;
}

.tt-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px -6px 0;
}

.tt {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 92px;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.tt:active {
  background: var(--well-2);
}

.tt .bubble {
  width: 40px;
  height: 40px;
  margin: 0 0 2px;
}

.tt .bubble .ic {
  width: 20px;
  height: 20px;
}

.tt b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.tt small {
  margin-top: -6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.tt.locked b {
  color: var(--ink-2);
}

/* мини-курс — днями */
.st-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.st-dots {
  display: flex;
  flex: none;
  gap: 6px;
}

.st-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--track);
}

.st-dots i.on {
  background: var(--ink);
}

.st-dots i.now {
  box-shadow: inset 0 0 0 2px var(--ink);
  background: transparent;
}

.stream-tile .btns {
  margin-top: 14px;
}

.stream-tile .btn.second {
  background: var(--bg);
}

.home-kept {
  margin-top: 16px;
}

/* ─── «Программа» → «Уроки»: курс сверху, освоенное числами, путь главами ─── */

.prog-head {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.16s ease;
}

.prog-head:active {
  opacity: 0.6;
}

.prog-head .bubble.big {
  width: 48px;
  height: 48px;
}

.prog-head .bubble.big .ic {
  width: 24px;
  height: 24px;
}

.prog-head .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prog-head .txt b {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.prog-head .txt span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.prog-head .go {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  color: var(--ink-3);
}

.ph-ticks {
  margin-top: 16px;
}

.ph-ticks + .pb-foot {
  margin-top: 8px;
}

/* освоено — крупными числами: привычки, инструменты, термины; каждое ведёт к своему */
.ph-stats {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
}

.ph-stat {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 10px 14px 12px;
  border: 0;
  border-radius: var(--r-group);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.ph-stat:active {
  background: var(--well-2);
}

.ph-stat b {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.ph-stat span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* глава: надпись капителью, тема 20, счёт; между главами — тонкая линия */
.chapter {
  margin: 0;
  box-shadow: inset 0 1px 0 var(--line);
}

.ph-stats + .chapter,
.pb-foot + .chapter,
.list + .chapter {
  margin-top: 20px;
}

.ch-head {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.16s ease;
}

.ch-head:active {
  opacity: 0.6;
}

.ch-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ch-t small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ch-t b {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.ch-n {
  flex: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.ch-chev {
  flex: none;
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform 0.22s var(--ease);
}

.ch-head.open .ch-chev {
  transform: rotate(-90deg);
}

/* линия уроков: круг со значком, от круга к кругу — линия; пройденное — чернилами */
.rail {
  margin: 2px 0 14px;
}

.rl {
  appearance: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0 0 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

button.rl:active .rl-txt {
  opacity: 0.6;
}

.rl.static {
  cursor: default;
}

.rl::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 4px;
  left: 15px;
  width: 2px;
  border-radius: 1px;
  background: var(--track);
}

.rl:last-child::before {
  display: none;
}

.rl.done::before {
  background: var(--ink);
}

.rl-node {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--ink-4);
}

.rl.done .rl-node,
.rl.today .rl-node {
  color: var(--btn-ink);
  background: var(--btn);
}

.rl-node .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.rl-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 5px;
  transition: opacity 0.16s ease;
}

.rl-txt small {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rl-txt b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.rl-txt span {
  display: -webkit-box;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* урок дня на линии — серая плашка с кнопкой */
.rl-card {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.rl-kick {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rl-card b {
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.rl-card p:not(.rl-kick) {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.rl-card .btn {
  margin-top: 14px;
}

/* программа курса в карточке из каталога — та же линия, только смотреть */
.cv-plan {
  margin-top: 20px;
}

/* Сторис (ряд кружков и просмотр) — в css/32-stories.css. */

/* лист шара Ритма из нижнего меню */
.orb-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.orb-head .art {
  width: 52px;
  height: 52px;
}

.orb-head b {
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.orb-head span {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.orb-note {
  margin: 14px 2px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* ─── Ответ структурой: карточка в чате (static/app.js, chatCard; services/reply_card.py) ──────────────────────────
   Владелец 03.10: «а просто огромный текст? такого тоже быть не должно». Пузырь — суть до трёх строк, ниже в том же
   пузыре — строки, как группа Пронина: круг 32 со знаком, название 16/500, пояснение 14 серым, линия от текста до края;
   пункты без значков — серыми точками, как списки конспекта; тихая строка 14 серым; «Подробнее» — нижней строкой. */

.msg.cmsg {
  padding: 12px 16px;
}

.msg.cmsg.wide {
  width: 100%;
  max-width: 100%;
}

.cm-title {
  margin: 0 0 2px;
  font-size: 16px;
  line-height: 23px;
  font-weight: 500;
  color: var(--ink);
}

.msg.ritm .cm-lead {
  margin: 0;
}

.cm-rows {
  margin: 12px -16px 0;
  border-top: 1px solid var(--line);
}

.cm-row {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: background-color 0.16s ease;
}

button.cm-row {
  cursor: pointer;
}

button.cm-row:active {
  background: var(--well-2);
}

.cm-row + .cm-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 16px;
  left: 60px;
  height: 1px;
  background: var(--line);
}

.cm-row .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-row .txt b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.cm-row .txt span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.cm-row .val {
  flex: none;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.cm-row .go {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  color: var(--ink-3);
}

/* шаги по порядку — номер в круге 32: «Уровни» у Пронина (текущий — чернилами, остальные — серым) */
.cm-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  color: #ffffff;
  background: var(--ib-gray);
  font-variant-numeric: tabular-nums;
}

.cm-num.on {
  color: var(--btn-ink);
  background: var(--btn);
}

/* пункты без значков — как список конспекта: серая точка, текст 15 */
.cm-rows.points {
  margin-top: 8px;
  border-top: 0;
}

.cm-rows.points .cm-row {
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 6px 16px;
}

.cm-rows.points .cm-row + .cm-row::before {
  display: none;
}

.cm-rows.points .txt b {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

.cm-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 8px 0 0 2px;
  border-radius: 50%;
  background: var(--ink-3);
}

.cm-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.cm-rows:not(.points) + .cm-note {
  margin: 0 -16px;
  padding: 12px 16px 2px;
  border-top: 1px solid var(--line);
}

.cm-note .ic {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke-width: 2;
}

.cm-note.done .ic {
  color: var(--good);
}

/* «Подробнее» — нижней строкой пузыря: лист с остальным текстом */
.cm-more {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% + 32px);
  min-height: 44px;
  margin: 10px -16px -12px;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.cm-more:active {
  background: var(--well-2);
}

.cm-more .ic {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  color: var(--ink-3);
}

.thread .msg.cmsg time {
  margin-top: 6px;
}

.cm-sheet p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.cm-sheet p:last-child {
  margin-bottom: 0;
}

/* ─── упражнения-проводники SOS (app.js, viewGuide) ─────────────────────────────────────────────────────────────
   Экран из одной мысли: надпись капителью, заголовок 24, строка 16 серым, один главный блок, главная кнопка внизу на
   своём месте. Ночью — тёмная страница (data-island), как оплата. */

.guide {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
}

.guide > .kicker {
  margin: 8px 0 8px;
}

.gd-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 4px;
  margin: auto calc(var(--gutter) * -1) 0;
  padding: 16px var(--gutter) calc(12px + var(--safe-b));
  background: var(--bg);
}

/* перетасовка: слово плитками, текущая буква — чернилами */
.gs-box {
  margin: 24px 0 0;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--well);
}

.gs-word {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.gs-l {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-row);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.gs-l.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.gs-hint {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

.gs-tip {
  margin-top: 16px;
}

/* «встань ненадолго»: шаги группой, текущий — чернилами, сделанный — зелёной галочкой */
.gg-steps {
  margin: 24px 0 0;
}

.gg-step .txt b {
  color: var(--ink-2);
}

.gg-step.on .txt b,
.gg-step.was .txt b {
  color: var(--ink);
}

/* медленное дыхание: круг цвета курса растёт на вдохе и сжимается на выдохе */
.gb-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 248px;
  margin: 28px 0 0;
}

.gb-ring {
  grid-area: 1 / 1;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--accent-soft);
  transform: scale(0.5);
  transition-property: transform;
  transition-timing-function: ease-in-out;
}

.gb-ring.full {
  transform: scale(1);
}

.gb-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0.42);
}

.gb-word {
  display: block;
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}

.gb-count {
  margin: 8px 0 0;
  text-align: center;
}

/* строки без значков со значением справа — как группа «За что такты»: линия от края текста */
.cm-rows.plain .cm-row {
  min-height: 48px;
  padding: 12px 16px;
}

.cm-rows.plain .cm-row + .cm-row::before {
  left: 16px;
}

.cm-rows.plain .txt b {
  font-weight: 400;
}

.cm-rows.plain .val {
  font-weight: 500;
  color: var(--ink);
}

/* ─── конспект: воздух между разделами, «Ответить ещё раз» и «Исследования» своим разделом (владелец 03.10) ────── */

.kn-secs {
  gap: 36px;
}

/* «Ответить ещё раз» — второй кнопкой-таблеткой с отступом, а не ссылкой, прижатой к следующему блоку */
.kq-again {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 12px 0 0;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  background: var(--chip);
  text-decoration: none;
}

.kn-refs2 {
  margin: 40px 0 0;
}

.kn-refs2 .section {
  margin: 0 0 12px;
}

.kn-ref-list .item {
  align-items: flex-start;
  min-height: 64px;
}

.kn-ref .ks-n {
  margin-top: 1px;
  background: var(--bg);
}

.kn-ref .txt b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.kn-ref .val {
  margin-top: 1px;
  font-size: 14px;
  line-height: 22px;
}

.kn-ref.item {
  gap: 10px;
}

.kn-ref .go {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.kn-ref.flash {
  animation: flash 1.4s ease;
}

.kn-refs2 + .kn-done {
  margin-top: 24px;
}

/* лист-пояснение (app.js, infoSheet): строка сути, строки со значками, тихая строка, одна кнопка */
.sheet-lesson.info-sheet {
  margin-bottom: 16px;
}

.info-list {
  margin: 0 0 12px;
}

.info-note {
  margin: 0 0 20px;
}

/* ─── «Окно света» (app.js, viewLight): одна мысль — когда ловить свет; тёмная карточка, как дела по времени ───── */

.light-tool .lw-main {
  margin: 20px 0 8px;
}

.lw-k {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--dark-ink-2);
}

.lw-time {
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: var(--dark-ink);
  font-variant-numeric: tabular-nums;
}

.lw-how {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--dark-ink-2);
}

.lw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
}

.lw-now {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-ink);
  background: var(--dark-pill);
}

.lw-why {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  margin-left: auto;
  padding: 0 0 0 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-ink);
  cursor: pointer;
}

.lw-why .ic {
  width: 16px;
  height: 16px;
  color: var(--dark-ink-2);
}

.lw-list {
  margin-bottom: 16px;
}

/* ─── «Мой ритм» курса кроме «Сна» (app.js, viewCourseRhythm): «Как часто» строками и полоска дней ─────────────── */

.rc-counts {
  margin: 0 0 8px;
}

.rc-count {
  min-height: 64px;
}

.rc-count .txt {
  gap: 8px;
}

.rc-count .txt b {
  font-size: 16px;
  line-height: 22px;
}

.rc-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}

.rc-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.rc-count .val {
  align-self: flex-start;
  margin-top: 1px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

.rc-strip {
  margin-bottom: 20px;
}

.rc-days {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px 0;
}

.rc-days.two {
  grid-template-columns: repeat(15, 1fr);
}

.rc-d {
  appearance: none;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.rc-d > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px var(--ink-4);
}

.rc-d.m > i {
  background: var(--ink);
  box-shadow: none;
}

.rc-d.main > i {
  background: var(--accent);
}

.rc-d > span {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.rc-d.on {
  background: var(--well-2);
}

.rc-d.on > span {
  color: var(--ink);
  font-weight: 500;
}

.rc-day-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rc-day-t b {
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: var(--ink);
}

.chart-legend .rck {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px var(--ink-4);
}

.chart-legend .rck.m {
  background: var(--ink);
  box-shadow: none;
}

.chart-legend .rck.main {
  background: var(--accent);
  box-shadow: none;
}

/* ─── оплата: полный текст условий — по фразе в строке, тихая строка вместо абзаца в бесплатные дни ─────────── */

.pay-more-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.pay-more-list li {
  position: relative;
  padding-left: 16px;
}

.pay-more-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}

.pay-hint.pay-wait {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 21px;
}

/* ─── документы: «Коротко» у оферты — списком по фразе ─────────────────────────────────────────────────────────── */

.doc-body .doc-short ul {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.doc-body .doc-short li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 22px;
}

.doc-body .doc-short li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}

.kn-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 4px 0;
}

.kn-disclaimer .ic {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke-width: 1.8;
  color: var(--ink-3);
}

/* раскрытый раздел конспекта: текст во всю ширину группы, а не колонкой в 27 знаков под заголовком (03.10) */
.kr-in {
  padding-left: 16px;
}

.kr-in > p {
  max-width: 100%;
}

/* люксметр: «нет данных камеры» — строкой и двумя пунктами вместо абзаца */
.lux-points {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.lux-points li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.lux-points li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}

/* ─── SOS — раздел (app.js, viewSos, viewSosSit; 03.10, вечер) ───────────────────────────────────────────────── */

.sos-page > .kicker {
  margin: 8px 0 8px;
}

.sos-page .list {
  margin-bottom: 8px;
}

.sos-crisis {
  margin-top: 24px;
}

.sos-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 4px 0;
}

.sos-note .ic {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke-width: 1.8;
  color: var(--ink-3);
}

.sos-note.strong {
  margin: 16px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-row);
  color: var(--ink);
  background: var(--well);
}

.sos-rec {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
}

.sos-rec .hint {
  margin: 0;
}

/* заземление: крупное число шага */
.gg-box {
  text-align: left;
}

.gg-num {
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gg-what {
  margin: 2px 0 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}

/* пауза 10 минут: круг с оставшимся временем */
.gp-stage {
  display: grid;
  place-items: center;
  margin: 24px 0 8px;
}

.gp-ring {
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
}

.gp-ring > svg {
  grid-area: 1 / 1;
  transform: rotate(-90deg);
}

.gp-track,
.gp-arc {
  fill: none;
  stroke-width: 8;
}

.gp-track {
  stroke: var(--well);
}

.gp-arc {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

.gp-time {
  grid-area: 1 / 1;
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gp-tips {
  margin-top: 16px;
}

.gp-tips .item {
  min-height: 52px;
}

/* шкала голода: десять плиток в два ряда */
.gh-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 24px 0 0;
}

.gh-n {
  appearance: none;
  min-height: 52px;
  border: 0;
  border-radius: var(--r-row);
  font: inherit;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  background: var(--well);
  cursor: pointer;
}

.gh-n.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.gh-say {
  margin: 20px 0 12px;
  font-size: 16px;
  line-height: 25px;
  color: var(--ink);
}

/* ─── уведомления (app.js, viewInbox) ─────────────────────────────────────────────────────────────────────────── */

.inbox-day {
  margin: 20px 4px 8px;
}

.inbox-row .txt b {
  font-weight: 400;
}

.inbox-row.unread .txt b {
  font-weight: 500;
}

.inbox-prev {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--btn);
}

/* «Подробнее» в листе-карточке: своя строка с воздухом до кнопки «Понятно» — раньше ссылка прилипала к кнопке
   (владелец 04.10, «Программа возврата»: «всё налезает») */
.link-btn.info-more {
  display: block;
  margin: 14px 0 22px;
  padding: 6px 0;
}

/* окно света в уроке 2 (app.js, visualLight): тот же блок, что на экране инструмента, без серой подложки урока */
.vis.vis-light {
  display: grid;
  gap: 8px;
  padding: 0;
  background: none;
}

.vis-light .lw-main,
.vis-light .lw-list {
  margin: 0;
}

/* ─── урок-образец 03.10 («Темнота вечером»): выбор нового вида, наглядности шага, договорённость ─────────────── */
/* Владелец: «разнообразно, как в Duolingo, везде всё визуально прямо в уроке», но в «Ритме 5»: белый фон, серые
   плашки #f4f4f4, чернила, цвет курса — одно выделение на экран, без градиентов, свечения и объёма. Шрифт — только
   24/20/19/17/16/15/14/12, крупное число — 30. Блоки — static/widgets.js, урок — app.js (viewLesson), договорённость
   на «Сегодня» — app.js (dealCard). */

/* «Назад» к прошлому шагу — тот же круг, что «Закрыть» */
.pl-prev[hidden] {
  display: none;
}

/* неверный ответ — жёлтым крестиком, как у строк выбора урока (критик 03.10: «не красным»), во всех блоках */
.rw-mark.miss {
  color: #1d1d1f;
  background: var(--warn);
}

.rw-seg.miss {
  background: var(--warn);
}

/* ─── плитки: два-три варианта со значком или нарисованной лампой ─── */
.rw-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rw-tiles.n3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.rw-tile {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 18px 12px 16px;
  border: 0;
  border-radius: var(--r-group);
  background: var(--well);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.18s ease,
    opacity 0.25s ease;
}

.rw-tile:active {
  transform: scale(0.98);
}

.rw-tile b {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}

.rw-tile > span:not(.bubble):not(.rw-mark) {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rw-tile.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.rw-tiles.answered .rw-tile {
  pointer-events: none;
}

.rw-tiles.answered .rw-tile:not(.on):not(.right) {
  opacity: 0.45;
}

.rw-tile .rw-mark {
  position: absolute;
  top: 10px;
  right: 10px;
}

.rw-lamp {
  display: block;
  width: 96px;
  height: 64px;
}

/* ─── ответ на шкале: зоны-кнопки по ширине шкалы, после ответа — верное значение линией ─── */
.rw-scale-ask {
  position: relative;
}

.rw-scale-ask.done {
  padding-top: 34px;
}

/* зоны — отрезки одной шкалы встык (тонкая белая черта между ними), чтобы линия ответа стояла точно */
.rw-zones {
  display: flex;
  overflow: hidden;
  border-radius: var(--r-group);
}

.rw-zone {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 124px;
  padding: 14px 10px 12px;
  border: 0;
  border-right: 2px solid var(--bg);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    opacity 0.25s ease,
    background-color 0.18s ease;
}

.rw-zone:last-child {
  border-right: 0;
}

.rw-zone:active {
  background: var(--well-2);
}

.rw-zone-ic {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0 0 14px;
  color: var(--ink-2);
}

.rw-zone b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.rw-zone span {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.rw-zone.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.rw-zone:first-child.on {
  border-radius: var(--r-group) 0 0 var(--r-group);
}

.rw-zone:last-child.on {
  border-radius: 0 var(--r-group) var(--r-group) 0;
}

.rw-scale-ask.done .rw-zone:not(.on):not(.right) {
  opacity: 0.55;
}

.rw-zone .rw-mark {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 20px;
  height: 20px;
}

.rw-zline {
  position: absolute;
  top: 28px;
  bottom: -6px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
}

.rw-ztag {
  position: absolute;
  top: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transform: translateX(-50%);
}

.rw-ztag.start {
  transform: translateX(-12px);
}

.rw-ztag.end {
  transform: translateX(calc(-100% + 12px));
}

.rw-scale.fresh .rw-zline,
.rw-scale.fresh .rw-ztag {
  animation: rw-drop 0.45s var(--ease) 0.15s backwards;
}

.rw-scale .rw-ends {
  margin-top: 6px;
}

/* ─── сутки и закат ─── */
.rw-dayline {
  gap: 14px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--well);
}

.rw-dl-head {
  display: grid;
  gap: 2px;
}

.rw-dl-head .kicker {
  margin: 0 0 2px;
}

.rw-dl-at {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.rw-dl-lead {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rw-dl-scale {
  display: grid;
  gap: 8px;
  padding: 0 11px; /* половина ручки по краям */
}

.rw-dl-track {
  position: relative;
  height: 14px;
  margin: 6px 0;
  border-radius: 7px;
  background: var(--track);
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
}

.rw-dayline.done .rw-dl-track {
  cursor: default;
}

.rw-dl-day,
.rw-dl-sun,
.rw-dl-sleep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.rw-dl-day {
  border-radius: 7px 0 0 7px;
  background: var(--c-f2);
}

.rw-dl-sun {
  background: var(--accent);
  transition:
    left 0.25s var(--ease),
    width 0.25s var(--ease);
}

.rw-dl-sleep {
  border-radius: 0 7px 7px 0;
  background: var(--ink);
}

.rw-dl-day {
  transition: width 0.25s var(--ease);
}

.rw-dl-knob {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 3px var(--accent);
  transition: left 0.25s var(--ease);
}

.rw-dayline.done .rw-dl-knob {
  display: none;
}

.rw-dl-track:focus-visible .rw-dl-knob {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.rw-dl-tags {
  position: relative;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
}

.rw-dl-tag {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.rw-dl-tag b {
  font-weight: 500;
  color: var(--ink);
}

.rw-dl-tag.wake {
  left: -11px;
}

.rw-dl-tag.bed {
  transform: translateX(-50%);
}

.rw-dl-tag.bed.end {
  transform: translateX(calc(-100% + 11px));
}

/* быстрые варианты — таблетки 40, как над барабаном знакомства: выбранная — обводкой чернилами (заливка чернилами —
   только у главной кнопки) */
.rw-dl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rw-chip-t {
  appearance: none;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: var(--bg);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    opacity 0.12s ease;
}

.rw-chip-t:active {
  opacity: 0.6;
}

.rw-chip-t.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.rw-chip-t[disabled]:not(.on) {
  display: none;
}

/* ─── вечер по шагам: шкала «закат → сон», шаги на своём времени ─── */
.rw-evening {
  gap: 12px;
}

.rw-ev-line {
  display: grid;
  gap: 6px;
}

.rw-ev-row {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 46px 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

button.rw-ev-row {
  cursor: pointer;
}

.rw-ev-t {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* вертикальная линия вечера — через все строки, точки на ней */
.rw-ev-dot {
  position: relative;
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-f2);
}

.rw-ev-row:not(.point.end) .rw-ev-dot::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  width: 2px;
  height: 60px;
  background: var(--track);
}

.rw-ev-row.point.start .rw-ev-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
}

.rw-ev-row.point.start .rw-ev-dot::after {
  left: 5px;
  top: 12px;
}

.rw-ev-row.point.end .rw-ev-dot {
  width: 12px;
  height: 12px;
  background: var(--ink);
}

.rw-ev-row.point {
  min-height: 40px;
}

.rw-ev-txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.rw-ev-txt b {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}

.rw-ev-txt span {
  font-size: 14px;
  line-height: 19px;
  color: var(--ink-2);
}

.rw-ev-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--r-row);
  background: var(--well);
  transition: transform 0.12s ease;
}

button.rw-ev-row:active .rw-ev-card {
  transform: scale(0.985);
  background: var(--well-2);
}

.rw-ev-card .rw-ev-txt {
  flex: 1;
}

.rw-ev-x {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}

.rw-ev-empty {
  margin: 0 0 0 68px;
  padding: 12px 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rw-ev-k {
  margin: 8px 0 -4px;
}

.rw-ev-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rw-ev-opt {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 0;
  border-radius: var(--r-group);
  background: var(--well);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    opacity 0.2s ease;
}

.rw-ev-opt:active {
  transform: scale(0.98);
  background: var(--well-2);
}

.rw-ev-opt[disabled] {
  opacity: 0.45;
  cursor: default;
}

.rw-ev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-bottom: 4px;
}

.rw-ev-opt b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.rw-ev-at {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rw-ev-plus {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
}

/* ─── разложи по группам ─── */
.rw-bins {
  gap: 14px;
}

.rw-bin-card {
  display: grid;
  gap: 10px;
}

.rw-bin-now {
  min-height: 128px;
  padding: 38px 20px 24px;
}

.rw-bin-now.enter {
  animation: rw-rise 0.32s var(--ease) backwards;
}

.rw-bin-ready {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-row);
  background: var(--well);
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.rw-bin-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rw-bin-groups.done {
  grid-template-columns: 1fr;
}

.rw-bin {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 132px;
  padding: 12px;
  border-radius: var(--r-group);
  background: var(--well);
  outline: none;
  transition:
    background-color 0.18s ease,
    transform 0.12s ease;
}

.rw-bin.ready {
  cursor: pointer;
}

.rw-bin.ready:active {
  transform: scale(0.985);
  background: var(--well-2);
}

.rw-bin:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.rw-bin-empty {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 19px;
  color: var(--ink-3);
}

.rw-bin-empty[hidden] {
  display: none;
}

.rw-bin-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.rw-bin-h .bubble {
  width: 24px;
  height: 24px;
}

.rw-bin-h .bubble .ic {
  width: 14px;
  height: 14px;
}

.rw-bin-h b {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.rw-bin-n {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rw-bin-list {
  display: grid;
  gap: 6px;
}

.rw-bin-item {
  appearance: none;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  font-size: 14px;
  line-height: 19px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.rw-bin-item.new {
  animation: rw-up 0.26s var(--ease) backwards;
}

.rw-bin-item:active {
  opacity: 0.6;
}

.rw-bin.done .rw-results {
  padding: 0;
  background: transparent;
}

.rw-bin.done .rw-results li {
  padding: 8px 0;
}

.rw-bin.done .rw-results li + li::before {
  left: 36px;
}

/* ─── вспомни ─── */
.rw-rc-card {
  min-height: 148px;
  padding: 40px 20px 24px;
}

.rw-rc-card .rw-card-text {
  font-size: 19px;
  line-height: 26px;
}

.rw-recall .rw-rc-opts {
  margin-top: -4px;
}

.rw-recall .pl-fb {
  margin: 0;
}

/* ─── договорённость ─── */
.rw-deal {
  gap: 16px;
}

.rw-deal-opt {
  align-items: flex-start;
  padding-top: 14px;
  padding-bottom: 14px;
}

.rw-deal-opt .txt span {
  margin-top: 2px;
}

.rw-radio {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 5px;
  border-radius: 50%;
  color: var(--btn-ink);
  background: var(--ink-4);
  transition: background-color 0.18s ease;
}

.rw-radio.on {
  background: var(--btn);
}

.rw-radio .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.rw-deal.done .rw-radio {
  background: var(--good);
}

.rw-deal-note {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.rw-deal-note:empty {
  display: none;
}

.rw-deal-quick {
  margin: 0 0 12px;
}

.rw-deal-quick .rw-chip-t {
  background: var(--well);
}

/* ─── наглядности шага ─── */

/* шкала строками: подпись и значение, под ними дорожка с полосой («вечером дома») и отметкой */
.vs-rows {
  display: grid;
  gap: 14px;
}

.vs-row {
  display: grid;
  gap: 6px;
}

.vs-l {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.vs-l b {
  font-weight: 500;
  color: var(--ink);
}

.vs-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--bg);
}

.vs-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: var(--c-f2);
}

.vs-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ink-2);
  box-shadow: 0 0 0 2px var(--well);
  animation: rw-pop 0.4s var(--ease) backwards;
}

.vs-dot.main {
  background: var(--accent);
}

.vs-legend {
  margin-top: 12px;
}

.vs-k i {
  width: 18px;
  height: 8px;
  border-radius: 4px;
  background: var(--c-f2);
}

/* неделя с лампами: переключатель, люди точками на шкале вечера, после — крупное число */
.vis-shift .segm,
.vis-howto .segm {
  background: var(--well-2);
}

.vis-shift .segm button.on,
.vis-howto .segm button.on {
  background: var(--bg);
}

:root[data-theme="dark"] .vis-shift .segm,
:root[data-theme="dark"] .vis-howto .segm {
  background: var(--bg);
}

:root[data-theme="dark"] .vis-shift .segm button.on,
:root[data-theme="dark"] .vis-howto .segm button.on {
  background: #5c5c5c;
}

.vsh-rows {
  display: grid;
  gap: 6px;
  margin: 18px 0 8px;
}

.vsh-row {
  position: relative;
  height: 10px;
}

.vsh-row::before {
  content: "";
  position: absolute;
  top: 4.5px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}

.vsh-p,
.vsh-ghost {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
}

.vsh-p {
  background: var(--ink-2);
  transition:
    left 0.7s var(--ease),
    background-color 0.3s ease;
}

.vsh-ghost {
  box-shadow: inset 0 0 0 1.5px var(--ink-4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vsh-line {
  position: absolute;
  top: 4px;
  height: 2px;
  width: 0;
  border-radius: 1px;
  background: var(--accent-soft);
  transition: width 0.7s var(--ease);
}

.vsh-rows.moved .vsh-p {
  background: var(--accent);
}

.vsh-rows.moved .vsh-ghost {
  opacity: 1;
}

.vsh-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.vsh-big {
  display: grid;
  gap: 2px;
  margin: 14px 0 0;
  animation: rw-up 0.36s var(--ease) backwards;
}

.vsh-big b {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.vsh-big span,
.vsh-note {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.vsh-note {
  margin: 14px 0 0;
}

.vsh-big[hidden],
.vsh-note[hidden] {
  display: none;
}

/* комната: нарисована линиями, свет — плоскими конусами краской с прозрачностью (без свечения) */
.vsc-room {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.vsc-floor {
  stroke: var(--c-f2);
  stroke-width: 2;
}

.vsc-cord {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.vsc-shade {
  fill: var(--ink-2);
}

.vsc-bulb {
  fill: var(--ib-amber);
  transition: fill 0.4s ease;
}

.vsc-cone {
  fill: var(--ib-amber);
  opacity: 0.24;
  transition: opacity 0.5s ease;
}

.s-off .vsc-cone {
  opacity: 0;
}

.s-off .vsc-bulb {
  fill: var(--ink-4);
}

.vsc-screen {
  fill: var(--ib-sky);
  transition: fill 0.4s ease;
}

.s-tint .vsc-screen {
  fill: var(--ib-amber);
}

.s-off .vsc-screen {
  fill: var(--ink-4);
}

.vsc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.vsc-tag b {
  font-weight: 500;
  color: var(--ink);
}

.vsc-meter {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.vsc-l {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.vsc-l b {
  font-weight: 500;
  color: var(--ink);
}

.vsc-track {
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}

.vsc-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ink); /* цвета в комнате — у света (тёплый, холодный экран); шкала — чернилами */
  transition: width 0.6s var(--ease);
}

/* что тянет туда и что обратно — строками со стрелкой */
.vis-tug {
  display: grid;
  gap: 10px;
}

.vt-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-row .txt {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.vt-row .txt b {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}

.vt-row .txt span {
  font-size: 14px;
  line-height: 19px;
  color: var(--ink-2);
}

.vt-dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

.vt-dir .ic {
  width: 16px;
  height: 16px;
}

.vt-dir.back .ic {
  transform: rotate(180deg);
}

/* где включить: вкладки и шаги по порядку, последний — со временем человека */
.vh-body {
  margin-top: 14px;
}

.vh-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vh-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vh-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
}

.vh-steps li.last .vh-n {
  color: #ffffff;
  background: var(--accent);
}

.vh-steps b {
  font-size: 16px;
  line-height: 21px;
  font-weight: 500;
}

.vh-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

/* исследование: сколько людей — крупно, группы значками, итог строкой */
.vst-who {
  display: grid;
  gap: 2px;
  margin: 0;
}

.vst-who b {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--ink);
}

.vst-who span {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.vst-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.vst-groups.n2 {
  grid-template-columns: 1fr 1fr;
}

.vst-g {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 12px 6px;
  border-radius: var(--r-row);
  background: var(--bg);
  text-align: center;
}

.vst-g span {
  font-size: 14px;
  line-height: 18px;
  color: var(--ink-2);
}

.vst-g.main span {
  font-weight: 500;
  color: var(--ink);
}

.vst-g.main {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.vst-res {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}

.vst-res.enter {
  animation: rw-up 0.34s var(--ease) backwards;
}

.vst-res[hidden],
.vst-ask[hidden] {
  display: none;
}

.vst-ask {
  margin: 14px 0 -4px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
}

button.vst-g {
  appearance: none;
  position: relative;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

button.vst-g:active {
  transform: scale(0.97);
}

button.vst-g[disabled] {
  cursor: default;
}

.vst-groups.done .vst-g:not(.main):not(.mine) {
  opacity: 0.5;
}

.vst-g.mine {
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}

.vst-g .rw-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
}

/* ─── договорённость на «Сегодня» и на итоге урока ─── */
.deal-card {
  margin: 16px 0 0;
}

.deal-main {
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.deal-main .txt b {
  font-size: 16px;
  line-height: 21px;
}

.deal-k {
  display: block;
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.deal-at {
  display: grid;
  justify-items: end;
  flex: none;
  margin-left: 4px;
}

.deal-at small {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.deal-at b {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}

.deal-step {
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.deal-step .deal-t {
  flex: none;
  width: 44px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink-2);
}

.deal-step .txt b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
}

.deal-note {
  min-height: 0;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.deal-note .ic {
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  color: var(--ink-2);
}

/* на итоге урока: что взял — строкой, договорённость — той же карточкой, что на «Сегодня» */
.pl-take {
  max-width: 330px;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
  text-wrap: balance;
}

.pl-deal-end {
  align-self: stretch;
  text-align: left;
}

.pl-deal-end .deal-card {
  margin: 0;
}

.pl-end.with-deal .pl-plan {
  margin-top: 12px;
}

/* наглядность шага нового вида — под заголовком и строками */
.pl-vis {
  margin-top: 18px;
}

.pl-vis > .vis,
.pl-vis > .kv {
  margin: 0;
}

/* «как сделать» шагами без вкладок — шаги сразу */
.vis-howto.one .vh-body {
  margin-top: 0;
}

/* ─── ошибки логики по проходу владельца 03.10 (app.js: timePicker, nightForm, viewCourse) ─────────────────── */

/* время — барабаном знакомства (26-onboarding.css: .wheel, .ob-chips): в отметке ночи таблетки сразу под вопросом,
   в листе «Во сколько напомнить?» — барабан и кнопка «Готово» */
.tp-wheel .ob-chips {
  margin-top: 0;
}

.tp-wheel .ob-chips + .wheel {
  margin-top: 12px;
}

#sheet .tp-wheel {
  margin: 0 0 16px;
}

#sheet .tp-wheel .wheel {
  margin-top: 4px;
}

/* прежний ответ в «Было иначе» — серой пометкой справа, ничего не выбрано заранее */
.opt .opt-usual {
  flex: none;
  margin-left: auto;
  padding-left: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ink-2);
}

/* ─── оплаты и чеки: «Оплаты и чеки» профиля, «Нужен чек?» после оплаты, пульт «Переводы и чеки» (03.10) ───────
   Система «Ритм 5»: серые группы, чёрный текст, пояснения серым, без своих цветов и градиентов. Только токены. */

/* вопрос «Нужен чек об оплате?» — серой группой; на тёмной странице «Доступ открыт» токены острова */
.rc-ask {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.rc-q {
  display: block;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}

.rc-sub,
.rc-done {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.rc-done {
  margin: 0;
  color: var(--ink);
}

.rc-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rc-btns .btn {
  flex: 1 1 0;
}

.payments .list,
.payments .pm-group {
  margin-bottom: 16px;
}

.pm-group .list {
  margin-bottom: 8px;
}

.rc-row .txt b {
  font-weight: 500;
}

.rc-change {
  display: inline;
  margin-top: 2px;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: left;
}

/* ─── пульт: «Переводы и чеки» ─── */

.ptr-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ptr-card.new {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.ptr-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ptr-sum {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.ptr-code,
.ptr-want {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

.ptr-want.on {
  color: var(--btn-ink);
  background: var(--btn);
}

.ptr-want.off {
  color: var(--ink-2);
}

.ptr-dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ink);
}

.ptr-who {
  align-self: flex-start;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}

.ptr-who[disabled] {
  text-decoration: none;
  cursor: default;
}

.ptr-line,
.ptr-hint {
  margin: 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink);
}

.ptr-line.muted,
.ptr-hint {
  color: var(--ink-2);
}

.ptr-line .icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.ptr-photos {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  overflow-x: auto;
}

.ptr-photo {
  width: 96px;
  height: 128px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg);
  cursor: zoom-in;
}

.ptr-photo.broken {
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ink-2);
}

.ptr-acts {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ptr-acts .btn {
  flex: 1 1 0;
}

.ptr-attach {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ptr-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
}

.ptr-input::placeholder {
  color: var(--ink-3);
}

.ptr-input:focus {
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.ptr-attach .btn.small {
  flex: none;
  min-height: 40px;
  border-radius: 12px;
  white-space: nowrap;
}

.ptr-steps ol {
  margin: 8px 0 8px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink);
}

.ptr-steps li + li {
  margin-top: 6px;
}

.ptr-steps .link-btn {
  padding: 0;
  font-size: 15px;
}

/* карточка человека: знакомство, переписка по линиям */
.adm-facts .item.static {
  gap: 12px;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.adm-facts .txt span {
  color: var(--ink-2);
}

.adm-facts .val {
  max-width: 60%;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  white-space: normal;
}

.adm-threads {
  margin: 8px 0 16px;
}

.adm-talk {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adm-msg {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--well);
}

.adm-msg.out {
  align-self: flex-end;
  color: var(--btn-ink);
  background: var(--btn);
}

.adm-msg.out p {
  color: var(--btn-ink);
}

.adm-msg.out .adm-msg-who {
  color: var(--btn-ink);
  opacity: 0.62;
}

.adm-msg-who {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.adm-msg p {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ─── сторис (docs/stories.md): ряд кружков на «Сегодня» и просмотр во весь экран ───────────────────────────────────
   Просмотр — как у МТС и Т-Банка: карточка во весь экран с закруглёнными нижними углами, под ней чёрная полоса с кнопкой
   «Следующая», сверху полоски по слайдам. Фон — ровный цвет с очень мягким переходом в тон потемнее того же цвета
   (никаких разноцветных градиентов, свечений и стекла); герой слайда — один 3D-предмет или шар Ритма; таблетки вокруг
   него и варианты ответов — сплошные. Цвета тем лежат только здесь, в блоке «темы». Шрифт и шкала размеров — как во
   всём приложении; крупные 34 и 96 — только здесь. */

/* ─── темы: пара «светлее → темнее» одного тона и всё, что от неё зависит ───────────────────────────────────────── */
.svt {
  --sv-a: #8f37e4;
  --sv-b: #6f1cc6;
  --sv-ink: #ffffff;
  --sv-ink-2: rgba(255, 255, 255, 0.86);
  --sv-pill: #ffffff;
  --sv-pill-ink: #1d1d1f;
  --sv-opt: #ffffff;
  --sv-opt-ink: #1d1d1f;
  --sv-warm: #ffe8bd; /* неверный ответ: тёплый тон, не красный */
  --sv-track: #5a12a8; /* дорожка полоски ответов и пустой столбик */
  --sv-tint: #ebd9fb; /* заливка внутри белой капсулы */
  --sv-pale: #b98af0; /* неглавный столбик */
  --sv-bar: #ffffff;
  --sv-bar-track: rgba(255, 255, 255, 0.36);
  --sv-btn: #ffffff;
  --sv-btn-ink: #1d1d1f;
  --sv-x: #ffffff;
  --sv-x-ink: #1d1d1f;
  --sv-shadow: rgba(20, 0, 50, 0.3);
  --sv-dot-a: #ffffff;
  --sv-dot-b: #fdc700;
  --sv-dot-c: #ffd7ee;
}

.svt[data-theme="night"] {
  --sv-a: #8f37e4;
  --sv-b: #6f1cc6;
  --sv-track: #5a12a8;
  --sv-tint: #ebd9fb;
  --sv-pale: #b98af0;
}

.svt[data-theme="dawn"] {
  --sv-a: #e0338f;
  --sv-b: #bf1b72;
  --sv-track: #a1135f;
  --sv-tint: #fbd9ea;
  --sv-pale: #f08ac0;
  --sv-shadow: rgba(80, 0, 40, 0.3);
}

.svt[data-theme="amber"] {
  --sv-a: #e75a0f;
  --sv-b: #c84508;
  --sv-track: #ac3a05;
  --sv-tint: #fde0cf;
  --sv-pale: #f5a06b;
  --sv-shadow: rgba(80, 20, 0, 0.32);
}

.svt[data-theme="mint"] {
  --sv-a: #0b9b73;
  --sv-b: #077f5c;
  --sv-track: #066a4d;
  --sv-tint: #d0f0e5;
  --sv-pale: #6bd0b1;
  --sv-shadow: rgba(0, 40, 25, 0.32);
}

.svt[data-theme="sky"] {
  --sv-a: #2f7cf0;
  --sv-b: #1b5fd1;
  --sv-track: #144fb5;
  --sv-tint: #d8e6fd;
  --sv-pale: #8cb6f6;
  --sv-shadow: rgba(0, 20, 80, 0.32);
}

.svt[data-theme="ink"],
.svt[data-theme="photo"] {
  --sv-a: #333336;
  --sv-b: #1b1b1e;
  --sv-track: #3a3a3e;
  --sv-tint: #e6e6ea;
  --sv-pale: #5c5c62;
  --sv-shadow: rgba(0, 0, 0, 0.5);
}

/* цвет курса: тот же тон, что у шара Ритма (design/mascot/orb.py), чуть глубже, чтобы белый текст читался */
.svt[data-theme="course"] {
  --sv-a: #8f37e4;
  --sv-b: #6f1cc6;
  --sv-track: #5a12a8;
  --sv-tint: #ebd9fb;
  --sv-pale: #b98af0;
}

:root[data-course="focus"] .svt[data-theme="course"] {
  --sv-a: #2f7cf0;
  --sv-b: #1b5fd1;
  --sv-track: #144fb5;
  --sv-tint: #d8e6fd;
  --sv-pale: #8cb6f6;
  --sv-shadow: rgba(0, 20, 80, 0.32);
}

:root[data-course="stress"] .svt[data-theme="course"] {
  --sv-a: #0a8696;
  --sv-b: #076573;
  --sv-track: #055560;
  --sv-tint: #cdebef;
  --sv-pale: #6ec3cd;
  --sv-shadow: rgba(0, 35, 40, 0.32);
}

:root[data-course="food"] .svt[data-theme="course"] {
  --sv-a: #e5620f;
  --sv-b: #c34e0a;
  --sv-track: #a84307;
  --sv-tint: #fde2d0;
  --sv-pale: #f5a874;
  --sv-shadow: rgba(80, 20, 0, 0.32);
}

:root[data-course="energy"] .svt[data-theme="course"] {
  --sv-a: #4f8a0e;
  --sv-b: #3e6f08;
  --sv-track: #335c06;
  --sv-tint: #deedc9;
  --sv-pale: #9cc464;
  --sv-shadow: rgba(20, 40, 0, 0.32);
}

:root[data-course="move"] .svt[data-theme="course"] {
  --sv-a: #e0338f;
  --sv-b: #bf1b72;
  --sv-track: #a1135f;
  --sv-tint: #fbd9ea;
  --sv-pale: #f08ac0;
  --sv-shadow: rgba(80, 0, 40, 0.3);
}

:root[data-course="teeth"] .svt[data-theme="course"] {
  --sv-a: #0f9060;
  --sv-b: #0b7650;
  --sv-track: #096443;
  --sv-tint: #cdeee0;
  --sv-pale: #6ccaa6;
  --sv-shadow: rgba(0, 40, 25, 0.32);
}

/* белая карточка: тёмный текст, таблетки и варианты — #f4f4f4, кнопка — чёрная */
.svt[data-theme="paper"] {
  --sv-a: #ffffff;
  --sv-b: #ffffff;
  --sv-ink: #1d1d1f;
  --sv-ink-2: #6e6e73;
  --sv-pill: #f4f4f4;
  --sv-pill-ink: #1d1d1f;
  --sv-opt: #f4f4f4;
  --sv-opt-ink: #1d1d1f;
  --sv-warm: #ffe8bd;
  --sv-track: #e4e4e4;
  --sv-tint: #dcdcdc;
  --sv-pale: #d6d6d6;
  --sv-bar: #1d1d1f;
  --sv-bar-track: rgba(0, 0, 0, 0.14);
  --sv-btn: #1d1d1f;
  --sv-btn-ink: #ffffff;
  --sv-x: #f4f4f4;
  --sv-x-ink: #1d1d1f;
  --sv-shadow: rgba(0, 0, 0, 0.16);
  --sv-dot-a: #1d1d1f;
  --sv-dot-b: #fdc700;
  --sv-dot-c: #a1a1a1;
}

/* ─── ряд кружков на «Сегодня» ──────────────────────────────────────────────────────────────────────────────────── */
.stories {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--gutter);
  margin: 12px calc(-1 * var(--gutter)) 22px;
  padding: 2px var(--gutter);
}

.stories::-webkit-scrollbar {
  display: none;
}

.st {
  appearance: none;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 76px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  scroll-snap-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* новое — кольцо от цвета курса к янтарю, просмотренное — серое кольцо в 1 точку; лицо у обоих одного размера (60) */
.st-ring {
  --ring: 3px;
  --gap: 3px;
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  padding: var(--ring);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent) 10%, var(--ib-amber) 95%);
  transition: transform 0.16s var(--ease);
}

.st.seen .st-ring {
  --ring: 1px;
  --gap: 5px;
  background: var(--ink-4);
}

.st:active .st-ring {
  transform: scale(0.94);
}

.st-gap {
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--gap);
  border-radius: 50%;
  background: var(--bg);
}

.st-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sv-a), var(--sv-b));
}

.st-face img {
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
}

.st-face .sv-c-obj {
  width: 82%;
  height: 82%;
  margin-top: 2%;
  filter: drop-shadow(0 3px 4px var(--sv-shadow));
}

.st-face .sv-c-orb {
  width: 92%;
  height: 92%;
}

.st-face .sv-c-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-face .sv-c-emoji {
  font-size: 30px;
  line-height: 1;
}

.st-l {
  max-width: 76px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.st.seen .st-l {
  color: var(--ink-2);
}

.st-n {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ─── просмотр ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.story-view {
  --sv-top: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
}

/* открытие — из нажатого кружка: масштаб и проявление, пружина */
.story-view.opening {
  animation: sv-open 0.28s var(--spring) both;
  transform-origin: var(--ox, 50%) var(--oy, 22%);
}

.story-view.out {
  animation: sv-out 0.22s ease both;
  pointer-events: none;
}

@keyframes sv-open {
  from {
    transform: scale(0.16);
    opacity: 0;
    border-radius: 40px;
  }
}

@keyframes sv-out {
  to {
    transform: translateY(36px) scale(0.94);
    opacity: 0;
  }
}

.sv-deck {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  perspective: 1400px;
}

/* в полноэкранном Telegram сверху его кнопки «Назад» и «⋯»: карточка начинается под ними, на чёрном, со
   скруглением сверху — как сторис МТС под строкой состояния (владелец 04.10: кнопки лежали на белой карточке,
   «композиция нарушена»). Вне полноэкранного режима --sv-top = 0 и всё как было */
.sv-card {
  position: absolute;
  inset: var(--sv-top) 0 0;
  overflow: hidden;
  border-radius: min(24px, var(--sv-top)) min(24px, var(--sv-top)) 24px 24px;
  color: var(--sv-ink);
  background: var(--sv-b);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform-origin: 50% 50%;
}

.sv-card.drag {
  transition: none;
}

.sv-card.snap {
  transition: transform 0.3s var(--ease);
}

/* затемнение грани куба, пока она повёрнута */
.sv-shade {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #000000;
  opacity: var(--sh, 0);
  pointer-events: none;
}

.sv-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sv-a), var(--sv-b));
}

/* фото на весь экран: поверх — тёмный градиент, чтобы текст читался (сверху до 55%, снизу до 60%) */
.sv-photo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

.sv-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.38) 24%, rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.6) 100%);
}

.svt[data-theme="photo"] .sv-stage {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.sv-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 10px 16px 0;
}

.sv-bars {
  display: flex;
  gap: 4px;
  transition: opacity 0.2s ease;
}

.sv-card.paused .sv-bars {
  opacity: 0.4;
}

.sv-bars i {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sv-bar-track);
}

.sv-bars b {
  display: block;
  width: 0;
  height: 100%;
  background: var(--sv-bar);
  transition: width 0.3s var(--ease);
}

.sv-bars i.done b {
  width: 100%;
}

.sv-bars i.cur b {
  width: 0;
  animation: sv-bar var(--dur, 6s) linear forwards;
  transition: none;
}

.sv-bars i.cur.wait b {
  animation: none;
}

.sv-card.paused .sv-bars i.cur b {
  animation-play-state: paused;
}

@keyframes sv-bar {
  to {
    width: 100%;
  }
}

.sv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin-top: 12px;
}

.sv-head .st-face {
  flex: none;
  width: 32px;
  height: 32px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.sv-head .st-face .sv-c-emoji {
  font-size: 17px;
}

.sv-head p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sv-ink);
}

.sv-head p span {
  color: var(--sv-ink-2);
  font-weight: 400;
}

.sv-x {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--sv-x);
  color: var(--sv-x-ink);
  cursor: pointer;
}

.sv-x .ic {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.sv-x:active {
  transform: scale(0.94);
}

/* слайд */
.sv-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 92px 24px 24px;
}

.sv-slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: sv-in 0.4s var(--ease) both;
}

@keyframes sv-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.sv-copy {
  flex: none;
}

.sv-slide.center > .sv-copy {
  margin-top: auto;
  margin-bottom: auto;
}

.sv-slide.center > .sv-copy + .sv-btn {
  margin-top: 0;
}

.sv-kick {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-ink);
  opacity: 0.84;
}

.sv-title {
  margin: 0;
  font-size: clamp(27px, 4.1vh, 34px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

.sv-text {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: var(--sv-ink);
  opacity: 0.92;
  text-wrap: pretty;
}

/* герой слайда: один предмет, много воздуха */
.sv-hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 8px -24px 0;
}

.sv-slide.top .sv-hero {
  align-items: flex-end;
}

.sv-slide.bottom .sv-hero {
  align-items: flex-start;
  margin: 0 -24px 8px;
}

.sv-obj,
.sv-orb {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 100%;
  object-fit: contain;
  animation:
    sv-float 6s ease-in-out infinite alternate,
    sv-shift 0.5s var(--ease) both;
  -webkit-user-drag: none;
}

.sv-obj {
  filter: drop-shadow(0 22px 22px var(--sv-shadow));
}

.sv-orb {
  max-width: 64%;
}

.sv-pic {
  display: block;
  max-width: 76%;
  max-height: 100%;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 0 22px 40px var(--sv-shadow);
}

@keyframes sv-float {
  from {
    transform: translateY(-6px);
  }

  to {
    transform: translateY(6px);
  }
}

/* таблетки вокруг героя: сплошные, чуть повёрнуты, у каждой своя фаза плавания */
.sv-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: 64%;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--sv-pill);
  color: var(--sv-pill-ink);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px var(--sv-shadow);
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
  animation: sv-pill 5s ease-in-out infinite alternate;
  animation-delay: var(--ph, 0s);
}

.sv-pill.on {
  opacity: 1;
}

.sv-pill.p0 {
  --rot: -6deg;
  --ph: -1s;
}

.sv-pill.p1 {
  --rot: 5deg;
  --ph: -2.6s;
}

.sv-pill.p2 {
  --rot: 4deg;
  --ph: -3.8s;
}

.sv-pill.p3 {
  --rot: -5deg;
  --ph: -0.4s;
}

@keyframes sv-pill {
  from {
    transform: translateY(-4px) rotate(var(--rot));
  }

  to {
    transform: translateY(4px) rotate(var(--rot));
  }
}

/* крупное число */
.sv-number {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.sv-big {
  margin: 0;
  font-size: 96px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  animation: sv-pop 0.6s var(--spring) both;
}

/* «16 из 17» не влезает крупно в строку: число остаётся 96, «из 17» — 34 */
.sv-big .sv-of {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sv-ink-2);
}

@keyframes sv-pop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

.sv-number .sv-title {
  margin-top: 14px;
  font-size: clamp(24px, 3.4vh, 28px);
  line-height: 1.16;
}

.sv-spark {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
  margin-top: 28px;
}

.sv-spark i {
  flex: 1;
  height: calc(var(--v, 0.5) * 100%);
  min-height: 6px;
  border-radius: 4px;
  background: var(--sv-bar);
  transform-origin: bottom;
  animation: sv-grow 0.6s var(--ease) both;
  animation-delay: calc(var(--k, 0) * 40ms + 150ms);
}

.sv-scale {
  height: 10px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--sv-track);
}

.sv-scale b {
  display: block;
  width: calc(var(--v, 0.5) * 100%);
  height: 100%;
  border-radius: 5px;
  background: var(--sv-bar);
  animation: sv-wide 0.8s var(--ease) both;
  animation-delay: 0.15s;
}

.sv-scale-cap {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sv-ink);
  opacity: 0.86;
}

@keyframes sv-wide {
  from {
    width: 0;
  }
}

@keyframes sv-grow {
  from {
    transform: scaleY(0.04);
  }
}

/* столбики недели: норма — пунктиром, лучшая ночь — белым, остальные — бледным тоном той же темы */
.sv-chart {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: min(44vh, 340px);
  margin-top: auto;
}

.sv-slide.bottom .sv-chart {
  margin-top: 0;
}

.sv-slide.k-chart > .sv-copy {
  margin-bottom: 24px;
}

.sv-slide.k-chart.bottom > .sv-copy {
  margin: auto 0 0;
}

.sv-chart .col {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}

.sv-chart .bar {
  width: 100%;
  min-height: 4px;
  border-radius: 8px;
  background: var(--sv-pale);
  transform-origin: bottom;
  animation: sv-grow 0.6s var(--ease) both;
  animation-delay: calc(var(--k, 0) * 60ms + 120ms);
}

.sv-chart .bar.hot {
  background: var(--sv-bar);
}

.sv-chart small {
  font-size: 12px;
  line-height: 16px;
  color: var(--sv-ink);
  opacity: 0.86;
}

.sv-goal {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--sv-ink);
  opacity: 0.7;
  pointer-events: none;
}

.sv-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--sv-ink);
  opacity: 0.86;
}

.sv-legend i {
  width: 18px;
  border-top: 2px dashed var(--sv-ink);
}

/* варианты ответа: сплошные капсулы 56 */
.sv-answer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sv-answer .sv-hero {
  margin-top: 4px;
  margin-bottom: 4px;
}

.sv-answer .sv-obj {
  max-width: 56%;
}

.sv-answer .sv-orb {
  max-width: 44%;
}

.sv-opts {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.sv-opt {
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0 22px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: var(--sv-opt);
  color: var(--sv-opt-ink);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.14s var(--ease),
    opacity 0.3s ease,
    background-color 0.2s ease;
}

.sv-opt:active {
  transform: scale(0.98);
}

.sv-opt span {
  min-width: 0;
}

.sv-opt .sv-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sv-b);
  color: #ffffff;
  animation: sv-pop 0.4s var(--spring) both;
}

.svt[data-theme="paper"] .sv-opt .sv-tick {
  background: #1d1d1f;
}

.sv-opt .sv-tick .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.sv-opts.done .sv-opt {
  pointer-events: none;
}

.sv-opts.done .sv-opt:not(.right):not(.pick) {
  background: var(--sv-pale);
  color: rgba(29, 29, 31, 0.56);
}

/* верный: остаётся белым, с галочкой; неверный: тёплый тон и лёгкое покачивание, без красного */
.sv-opt.pick:not(.right) {
  background: var(--sv-warm);
  animation: sv-shake 0.42s ease both;
}

.sv-opt.right {
  animation: sv-bump 0.4s var(--spring) both;
}

@keyframes sv-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  22% {
    transform: translateX(-7px);
  }

  48% {
    transform: translateX(6px);
  }

  72% {
    transform: translateX(-3px);
  }
}

@keyframes sv-bump {
  from {
    transform: scale(0.97);
  }
}

/* результат ответа: слово и пояснение */
.sv-result {
  flex: none;
  margin: 26px 0 0;
  animation: sv-in 0.4s var(--ease) both;
}

.sv-result b {
  display: block;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sv-result p {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 24px;
  opacity: 0.92;
  text-wrap: pretty;
}

.sv-slide.answered .sv-kick {
  margin-bottom: 6px;
}

.sv-slide.answered .sv-title {
  font-size: clamp(22px, 3.2vh, 26px);
  line-height: 1.16;
}

.sv-slide.answered .sv-text {
  display: none;
}

.sv-slide.has-shares:not(.k-poll) .sv-hero {
  display: none;
}

.sv-slide.answered .sv-answer .sv-obj {
  max-width: 48%;
}

.sv-slide.answered .sv-answer .sv-orb {
  max-width: 38%;
}

.sv-slide.answered .sv-opt {
  min-height: 48px;
}

.sv-slide.answered .sv-opts {
  gap: 8px;
  padding-top: 14px;
}

/* тесно: сначала плотнее, потом ещё плотнее, на самых низких экранах «как ответили другие» уходит */
.sv-slide.fit1 .sv-result {
  margin-top: 16px;
}

.sv-slide.fit1 .sv-result p {
  font-size: 16px;
  line-height: 22px;
}

.sv-slide.fit1 .sv-opt {
  min-height: 42px;
}

.sv-slide.fit1 .sv-opts {
  gap: 6px;
  padding-top: 10px;
}

.sv-slide.fit1 .sv-shares {
  margin-top: 12px;
}

.sv-slide.fit1 .sv-shares h4 {
  margin-bottom: 6px;
}

.sv-slide.fit1 .sv-share {
  margin-top: 6px;
}

.sv-slide.fit2 .sv-kick {
  display: none;
}

.sv-slide.fit2 .sv-result {
  margin-top: 12px;
}

.sv-slide.fit2 .sv-opt {
  min-height: 38px;
  font-size: 16px;
}

.sv-slide.fit2 .sv-shares h4 {
  display: none;
}

.sv-slide.fit2 .sv-share i {
  height: 4px;
  margin-top: 2px;
}

.sv-slide.fit2 .sv-share {
  margin-top: 4px;
}

.sv-slide.fit3 .sv-shares {
  display: none;
}

/* «как ответили другие» */
.sv-shares {
  flex: none;
  margin-top: 18px;
  animation: sv-in 0.45s var(--ease) both;
}

.sv-shares h4 {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.84;
}

.sv-share {
  margin-top: 9px;
}

.sv-share div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}

.sv-share div b {
  font-weight: 600;
}

.sv-share i {
  display: block;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--sv-track);
}

.sv-share i b {
  display: block;
  width: calc(var(--v, 0) * 1%);
  height: 100%;
  border-radius: 3px;
  background: var(--sv-bar);
  animation: sv-wide 0.8s var(--ease) both;
  animation-delay: 0.2s;
}

.sv-share.mine div {
  font-weight: 600;
}

.sv-shares.solo {
  margin-top: auto;
}

/* опрос: после выбора варианты становятся строками с долями — у выбранного белая галочка */
.sv-thanks {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 24px;
  animation: sv-in 0.4s var(--ease) both;
}

/* «миф или правда»: две большие кнопки */
.sv-myth {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.sv-myth .sv-opt {
  min-height: 108px;
  justify-content: center;
  border-radius: 28px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

.sv-myth .sv-opt .sv-tick {
  position: absolute;
  top: 12px;
  right: 12px;
}

.sv-slide.answered .sv-myth .sv-opt {
  min-height: 64px;
}

/* конфетти: из верной капсулы, 600 мс, только CSS */
.sv-conf {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 8;
  pointer-events: none;
}

.sv-conf i {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #ffffff);
  animation: sv-conf 0.6s cubic-bezier(0.15, 0.7, 0.3, 1) both;
}

.sv-conf i:nth-child(3n) {
  width: 6px;
  height: 10px;
  border-radius: 2px;
}

@keyframes sv-conf {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(0.6);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 120deg)) scale(1);
  }
}

/* «подыши минуту»: круг растёт 4 секунды (вдох) и сжимается 6 (выдох) */
.sv-breathe {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.sv-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(268px, 68vw);
  height: min(268px, 68vw);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--sv-bar);
}

.sv-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: var(--sv-bar);
  color: var(--sv-b);
  transform: scale(1);
  transition: transform 6s cubic-bezier(0.45, 0, 0.35, 1);
}

.sv-disc.in {
  transform: scale(1.5);
  transition-duration: 4s;
}

.sv-disc b {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.svt[data-theme="paper"] .sv-disc {
  color: #ffffff;
}

.sv-count {
  margin: 22px 0 0;
  min-height: 24px;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.86;
}

/* кнопка слайда: одна, во весь экран, 56, капсула */
.sv-btn {
  appearance: none;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 20px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 28px;
  background: var(--sv-btn);
  color: var(--sv-btn-ink);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.14s var(--ease);
}

.sv-btn:active {
  transform: scale(0.98);
}

.sv-btn.dark {
  background: #1d1d1f;
  color: #ffffff;
}

.svt[data-theme="ink"] .sv-btn.dark,
.svt[data-theme="photo"] .sv-btn.dark {
  background: #ffffff;
  color: #1d1d1f;
}

.sv-btn.accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.svt:not([data-theme="ink"]):not([data-theme="paper"]):not([data-theme="photo"]) .sv-btn.accent {
  background: #ffffff;
  color: var(--sv-b);
}

.sv-btn.ghost {
  background: transparent;
  color: var(--sv-ink);
  box-shadow: inset 0 0 0 2px var(--sv-ink);
}

.sv-slide .sv-btn + .sv-btn {
  margin-top: 10px;
}

/* полоса под карточкой: чёрная, 64, «Следующая» */
.sv-strip {
  position: relative;
  z-index: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64px + var(--safe-b));
  padding: 0 16px var(--safe-b);
  background: #000000;
}

.sv-next {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  height: 44px;
  padding: 0 18px 0 6px;
  border: 0;
  border-radius: 22px;
  background: #1f1f21;
  color: #ffffff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.14s var(--ease);
}

.sv-next:active {
  transform: scale(0.97);
}

.sv-next .st-face {
  flex: none;
  width: 32px;
  height: 32px;
}

.sv-next .st-face .sv-c-emoji {
  font-size: 17px;
}

.sv-next span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sv-next span b {
  font-weight: 600;
}

.sv-next .ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  opacity: 0.8;
}

.sv-next.plain {
  padding-left: 22px;
}

/* смена слайда вперёд и назад: центр слегка смещается в сторону движения */
.sv-slide.fwd {
  --dx: 26px;
}

.sv-slide.back {
  --dx: -26px;
}

@keyframes sv-shift {
  from {
    opacity: 0;
    translate: var(--dx, 0px) 0;
  }
}

/* окно шире телефона (Telegram на компьютере): сторис остаётся колонкой телефона посередине */
@media (min-width: 560px) {
  .story-view {
    align-items: center;
  }

  .sv-deck,
  .sv-strip {
    width: 480px;
    max-width: 100%;
  }

  .sv-card {
    border-radius: 24px;
  }
}

/* «уменьшить движение»: сторис не листаются сами, предметы стоят, смены — без плавания */
@media (prefers-reduced-motion: reduce) {
  .story-view,
  .story-view.out,
  .sv-slide,
  .sv-obj,
  .sv-orb,
  .sv-pill,
  .sv-big,
  .sv-spark i,
  .sv-chart .bar,
  .sv-share i b,
  .sv-scale b {
    animation: none !important;
  }

  .sv-disc,
  .sv-disc.in {
    transition-duration: 0.01s;
  }
}

/* ─── пульт → «Сторис» (static/admin.js): список, редактор, кто видит, расписание, отклик ─────────────────────────
   Только токены «Ритма 5»: группы #f4f4f4, чернила, чёрная главная кнопка, фильтры-таблетки. Цвета тем (плитки фона)
   берутся из css/32-stories.css — они там, а не здесь. */

.ast-face {
  display: block;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
}

.ast-face .st-face {
  width: 100%;
  height: 100%;
}

.ast-view > .btn {
  margin-bottom: 18px;
}

/* строка списка: кружок, название, кто видит, срок, отклик */
.ast-row {
  align-items: flex-start;
  min-height: 0;
  padding: 14px 16px;
}

.ast-row .txt {
  gap: 1px;
}

.ast-row .txt b {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ast-row .txt .ast-resp {
  margin-top: 3px;
  color: var(--ink);
}

.ast-row .go {
  align-self: center;
}

.ast-pin {
  display: inline-block;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--chip);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}

/* группы редактора */
.ast-group {
  margin: 0 0 26px;
}

.ast-group > h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}

.ast-note {
  margin: -4px 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}

.ast-field {
  display: block;
  margin: 0 0 16px;
}

.ast-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.ast-label b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.ast-label small {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-2);
  text-align: right;
}

.ast-input {
  margin: 0;
}

textarea.ast-input {
  height: auto;
  min-height: 92px;
  padding: 12px 16px;
  resize: none;
  line-height: 22px;
}

.ast-count {
  display: block;
  margin: 6px 4px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-3);
  text-align: right;
}

.ast-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ast-row2 > .ast-field:only-child {
  grid-column: 1 / -1;
}

.ast-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ast-chip {
  appearance: none;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 19px;
  background: var(--well);
  color: var(--ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}

.ast-chip:active {
  transform: scale(0.97);
}

.ast-chip.on {
  background: var(--btn);
  color: var(--btn-ink);
}

/* обложка */
.ast-cover {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ast-cover .ast-face {
  width: 72px;
  height: 72px;
}

/* плитки фона: тот же цвет, что в просмотрщике */
.ast-themes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 8px;
}

.ast-theme-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ast-theme-box small {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ast-theme {
  appearance: none;
  display: block;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sv-a), var(--sv-b));
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}

.ast-theme.on {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px var(--ink);
}

/* выбор героя и обложки */
.ast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}

.ast-grid.emoji {
  grid-template-columns: repeat(6, 1fr);
}

.ast-tile {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 16px;
  background: var(--well);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ast-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ast-tile.on {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.ast-pic {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 4px;
}

.ast-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--well);
  color: var(--ink-3);
}

.ast-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ast-file {
  display: none;
}

/* слайды списком */
.ast-slides {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ast-slide {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 10px;
  border-radius: var(--r-group);
  background: var(--well);
}

.ast-slide-main {
  appearance: none;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 6px 12px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ast-slide-main .txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ast-slide-main .txt b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.ast-slide-main .txt span {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ast-slide-main .go {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}

.ast-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
}

.ast-slide-acts {
  display: flex;
  gap: 4px;
}

.ast-mini {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

.ast-mini .ic {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.ast-mini.down .ic {
  transform: rotate(180deg);
}

.ast-mini[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.ast-add {
  align-self: flex-start;
  margin-top: 4px;
}

.ast-warn {
  margin: 12px 0 0;
}

.ast-warn p {
  font-size: 15px;
  line-height: 22px;
}

.ast-warn b {
  display: inline;
  margin: 0 6px 0 0;
}

/* живой счёт */
.ast-count-line {
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-group);
  background: var(--well);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-2);
}

.ast-count-line b {
  display: block;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink);
}

.ast-count-line.bad {
  color: var(--bad);
}

/* варианты ответа */
.ast-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ast-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ast-option-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ast-option-top .ast-input {
  flex: 1;
  min-width: 0;
}

.ast-reply {
  height: 40px;
  font-size: 14px;
}

.ast-right {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--well);
  color: var(--ink-4);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.ast-right.on {
  background: var(--good);
  color: #ffffff;
}

.ast-right .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
}

.ast-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ast-button {
  padding: 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.ast-button .input {
  background: var(--bg);
}

.ast-button .ast-chip {
  background: var(--bg);
}

.ast-button .ast-chip.on {
  background: var(--btn);
}

/* отклик */
.ast-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
}

.ast-ans > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 20px;
}

.ast-ans.right > div span {
  font-weight: 500;
}

.ast-ans i {
  display: block;
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--track);
}

.ast-ans i b {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ink-3);
}

.ast-ans.right i b {
  background: var(--good);
}

.ast-per .item {
  min-height: 0;
  padding: 10px 16px;
}

/* ошибки и сохранение */
.ast-errs {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--r-group);
  background: var(--well);
}

.ast-errs p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--bad);
}

.ast-errs p + p {
  margin-top: 4px;
}

.ast-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 12px var(--gutter) calc(12px + var(--safe-b));
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--line);
}

.ast-dirty {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  text-align: center;
}

.ast-more {
  display: flex;
  flex-direction: column;
  margin: 8px 0 0;
}

.ast-danger {
  color: var(--bad);
}