/* ==========================================================================
   Lumara Learn — мини-апп ученика.
   Токены, шрифты, кнопки и стиль статьи взяты из основного сайта Lumara
   (lumara_v2/assets/css/main.css); размеры — calc(N * var(--u)), макет 390.
   ========================================================================== */

/* ---------- Шрифты ---------- */

@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/great-vibes-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/great-vibes-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены (как на сайте Lumara) ---------- */

:root {
  --u: calc(min(100vw, 480px) / 390);

  --color-bg: #F8F4EE;
  --color-text: #3C3533;
  --color-body: #625956;
  --color-accent: #713D43;
  --color-accent-hover: #603239;
  --color-accent-active: #603239;
  --color-button-text: #FFFCF8;
  --color-divider: #E4DDD5;
  --color-surface: #FFFCF8;
  --color-wine: #63383B;
  --color-on-wine: #E8D9D2;
  --color-powder: #E8D9D2;
  --color-sand: #F1EAE2;
  --color-border-warm: #D8C7BC;
  --color-muted: #817773;
  --color-gold-muted: #B08A50;
  --color-success: #4F6B4A;       /* «верно» в тесте: приглушённый зелёный в тон палитре */
  --color-success-bg: #E7ECDF;
  --color-error-bg: #F3E2E0;
  --color-focus: #3C3533;

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;

  --fs-display-xl: calc(40 * var(--u));
  --fs-display-l: calc(34 * var(--u));
  --fs-display-m: calc(28 * var(--u));
  --fs-display-s: calc(24 * var(--u));
  --lh-display: 90%;
  --lh-display-loose: 110%;
  --fs-lead: max(16px, calc(17 * var(--u)));
  --lh-lead: max(22px, calc(25 * var(--u)));
  --fs-text: max(14px, calc(15 * var(--u)));
  --lh-text: max(20px, calc(22 * var(--u)));
  --fs-small: max(13px, calc(13 * var(--u)));
  --lh-small: max(18px, calc(19 * var(--u)));
  --fs-label: max(12px, calc(12 * var(--u)));
  --lh-label: max(16px, calc(16 * var(--u)));
  --fs-button: max(14px, calc(15 * var(--u)));
  --fs-logo: calc(36 * var(--u));

  --container-max: calc(390 * var(--u));
  --gutter: calc(20 * var(--u));
  --nav-h: calc(64 * var(--u));

  --radius-button: calc(8 * var(--u));
  --radius-card: calc(16 * var(--u));

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
}

/* ---------- База ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;            /* светлая тема Lumara независимо от темы Telegram */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: calc(3 * var(--u));
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  padding-top: calc(16 * var(--u));
  padding-bottom: calc(var(--nav-h) + 40 * var(--u) + env(safe-area-inset-bottom));
}

.page--bare { padding-bottom: calc(40 * var(--u)); }

/* ---------- Логотип ---------- */

.app-logo {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-logo);
  line-height: calc(32 * var(--u));
  color: var(--color-text);
  text-decoration: none;
}

/* ---------- Заголовки и текст ---------- */

.page-title {
  margin-top: calc(20 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  color: var(--color-text);
  text-wrap: balance;
}

.page-lead {
  margin-top: calc(12 * var(--u));
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-body);
  text-wrap: pretty;
}

.section-title {
  margin-top: calc(36 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.muted {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-muted);
}

/* Навигационная цепочка — как на сайте */
.breadcrumbs ol {
  display: flex;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-muted);
}

.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li { flex: none; }
.breadcrumbs li + li::before { content: "/"; margin-inline: calc(6 * var(--u)); }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs [aria-current="page"] { color: var(--color-body); }

/* ---------- Кнопки (фирменная .button сайта) ---------- */

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(56 * var(--u));
  padding: 0 calc(20 * var(--u));
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-button-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-button);
  line-height: calc(20 * var(--u));
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--color-accent-hover); }
}

.button:active { background: var(--color-accent-active); }

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--color-border-warm);
  color: var(--color-surface);
  cursor: default;
}

/* Светлая: фирменная кнопка в инверсных цветах (как .final-cta__button) */
.button--light {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-border-warm);
}

@media (hover: hover) and (pointer: fine) {
  .button--light:hover { background: var(--color-sand); }
}

.button--light:active { background: var(--color-sand); }

/* Кнопка в Telegram: подпись по центру, фирменная стрелка ↗ справа */
.button--tg { padding-inline: calc(46 * var(--u)); }

.button__arrow {
  position: absolute;
  top: 50%;
  right: calc(16 * var(--u));
  display: flex;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  transform: translateY(-50%);
}

.button__arrow svg { width: 100%; height: 100%; padding: calc(3 * var(--u)); }

/* Подпись слева, стрелка → справа: кнопка «Продолжить» с названием урока */
.button--split {
  justify-content: space-between;
  gap: calc(12 * var(--u));
  min-height: calc(64 * var(--u));
  padding-inline: calc(20 * var(--u)) calc(18 * var(--u));
  text-align: left;
  white-space: normal;
}

.button__label { display: flex; flex-direction: column; min-width: 0; }

.button__sub {
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  opacity: 0.8;
}

.button__chevron { width: calc(18 * var(--u)); height: calc(14 * var(--u)); flex: none; }

.button-row { display: grid; gap: calc(10 * var(--u)); margin-top: calc(24 * var(--u)); }

.text-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--u));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- Прогресс ---------- */

.progress,
.progress__bar { display: block; }

.progress {
  height: calc(4 * var(--u));
  border-radius: 2px;
  background: var(--color-divider);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.progress--thin { height: 3px; }

/* ---------- Мои курсы: карточки курсов (компонент .format-card сайта) ---------- */

.course-cards {
  display: grid;
  gap: calc(18 * var(--u));
  margin-top: calc(24 * var(--u));
}

/* Фото на всю карточку, светлая панель поверх низа; кликабельна целиком
   через растянутую круглую ссылку */
.course-card {
  position: relative;
  height: calc(430 * var(--u));
  overflow: hidden;
  border-radius: calc(22 * var(--u));
  background: var(--color-wine);  /* тон-заглушка до загрузки фото и для курса без обложки */
}

.course-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card__panel {
  position: absolute;
  left: calc(12 * var(--u));
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  display: flex;
  flex-direction: column;
  padding: calc(16 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--color-surface);
}

.course-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.course-card__text {
  margin-top: calc(8 * var(--u));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-body);
}

/* Разделитель над подвалом — он же полоска прогресса курса */
.course-card__progress {
  height: 1px;
  margin-top: calc(14 * var(--u));
  background: var(--color-divider);
}

.course-card__progress span {
  display: block;
  height: 2px;
  margin-top: -0.5px;
  border-radius: 1px;
  background: var(--color-accent);
}

.course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding-top: calc(12 * var(--u));
}

.course-card__meta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-loose);
  font-variant-numeric: lining-nums;
  color: var(--color-text);
}

.course-card__status {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-accent);
}

.course-card__link {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-button-text);
  transition: background-color var(--dur-fast) var(--ease);
}

.course-card__link svg { width: calc(18 * var(--u)); height: calc(14 * var(--u)); }

.course-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.course-card__link:focus-visible { outline: none; }

.course-card:has(.course-card__link:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: calc(3 * var(--u));
}

@media (hover: hover) and (pointer: fine) {
  .course-card:hover .course-card__link { background: var(--color-accent-hover); }
}

.course-card:active .course-card__link { background: var(--color-accent-active); }

/* ---------- Курс ---------- */

.course-progress {
  margin-top: calc(24 * var(--u));
  padding: calc(18 * var(--u));
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-divider);
}

.course-progress__numbers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}

.course-progress__count {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.course-progress .progress { margin-top: calc(12 * var(--u)); }

.course-progress__video { margin-top: calc(8 * var(--u)); }

.course-progress .button { margin-top: calc(18 * var(--u)); }

.course-progress__note { margin-top: calc(14 * var(--u)); color: var(--color-body); }

.notice {
  margin-top: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-sand);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text);
}

/* Ближайший созвон — пудровая панель */
.call-card {
  margin-top: calc(16 * var(--u));
  padding: calc(18 * var(--u));
  border-radius: var(--radius-card);
  background: var(--color-powder);
}

.call-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
}

.call-card__date {
  margin-top: calc(10 * var(--u));
  font-weight: 600;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-accent);
}

.call-card__text { margin-top: calc(4 * var(--u)); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-body); }

/* ---------- Список уроков (по мотивам модулей курса на сайте) ---------- */

.lesson-list {
  margin-top: calc(14 * var(--u));
  border-top: 1px solid var(--color-divider);
}

.lesson-row { border-bottom: 1px solid var(--color-divider); }

.lesson-row__link {
  display: grid;
  grid-template-columns: calc(40 * var(--u)) 1fr calc(20 * var(--u));
  align-items: center;
  min-height: calc(76 * var(--u));
  padding: calc(14 * var(--u)) 0;
  color: inherit;
  text-decoration: none;
}

.lesson-row__num {
  display: flex;
  align-items: center;
  align-self: stretch;
  border-right: 1px solid var(--color-divider);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-accent);
}

.lesson-row__main { min-width: 0; padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u)); }

.lesson-row__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.lesson-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--u)) calc(10 * var(--u));
  margin-top: calc(6 * var(--u));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-body);
}

.lesson-row .progress { margin-top: calc(8 * var(--u)); }

.lesson-row__icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--color-accent); }

.lesson-row--locked .lesson-row__title,
.lesson-row--locked .lesson-row__num { color: var(--color-muted); }

.lesson-row--locked .lesson-row__icon { color: var(--color-muted); }

.lesson-row--locked .lesson-row__link { cursor: default; }

.state { font-weight: 600; }
.state--started { color: var(--color-accent); }
.state--watched { color: var(--color-success); }
.state--locked { color: var(--color-muted); font-weight: 500; }

.tag {
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--color-powder);
  color: var(--color-text);
}

.tag--success { background: var(--color-success-bg); color: var(--color-success); }

/* ---------- Урок ---------- */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: calc(16 * var(--u)) calc(var(--gutter) * -1) 0;
  overflow: hidden;
  background: #2A1618;
  color: var(--color-on-wine);
}

.player__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(10 * var(--u));
  padding: var(--gutter);
  text-align: center;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  background:
    radial-gradient(circle at 70% 30%, rgba(176, 138, 80, 0.18), transparent 55%),
    linear-gradient(160deg, #3A2023, #1F1112);
}

.player__play {
  display: grid;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.92);
  color: var(--color-accent);
}

.player__play svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(3 * var(--u)); }

.player__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.player:fullscreen { aspect-ratio: auto; margin: 0; }
.player:-webkit-full-screen { aspect-ratio: auto; margin: 0; }

/* Водяной знак с username ученика; угол меняется скриптом */
.player__watermark {
  position: absolute;
  top: calc(12 * var(--u));
  right: calc(14 * var(--u));
  z-index: 2;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: rgba(255, 252, 248, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
}

.player__watermark--br { top: auto; bottom: calc(52 * var(--u)); }
.player__watermark--bl { top: auto; bottom: calc(52 * var(--u)); right: auto; left: calc(14 * var(--u)); }
.player__watermark--tl { right: auto; left: calc(14 * var(--u)); }

/* «Продолжить с 12:34 · Начать сначала» поверх видео на паузе */
.player__resume {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  padding: var(--gutter);
  background: rgba(31, 17, 18, 0.55);
}

.player__chip {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: 0;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  cursor: pointer;
}

.player__chip--ghost { background: rgba(255, 252, 248, 0.16); color: var(--color-surface); }

.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  margin-top: calc(10 * var(--u));
}

.player-bar__speeds { display: flex; gap: calc(4 * var(--u)); }

.player-bar__speed,
.player-bar__full {
  min-width: calc(44 * var(--u));
  min-height: calc(34 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  border-radius: calc(8 * var(--u));
  background: var(--color-sand);
  color: var(--color-body);
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
}

.player-bar__speed[aria-pressed="true"] { background: var(--color-accent); color: var(--color-button-text); }

.player-bar__full { display: grid; place-items: center; }
.player-bar__full svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(12 * var(--u));
  margin-top: calc(12 * var(--u));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-body);
}

.lesson-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  margin-top: calc(32 * var(--u));
  padding: calc(16 * var(--u)) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  color: inherit;
  text-decoration: none;
}

.lesson-next__title {
  display: block;
  margin-top: calc(4 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
}

.lesson-next__icon { width: calc(18 * var(--u)); height: calc(14 * var(--u)); color: var(--color-accent); flex: none; }

.lesson-next--locked { color: var(--color-muted); }

/* ---------- Конспект: статья блога Lumara ---------- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(12 * var(--u));
  margin-top: calc(14 * var(--u));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-body);
}

.article-meta__tag {
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--color-powder);
  color: var(--color-text);
}

.article-meta__time { align-self: center; }

.article__body { margin-top: calc(28 * var(--u)); }

.article__body > * + * { margin-top: calc(12 * var(--u)); }

.article__body h2 {
  margin-top: calc(36 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.article__body h3 {
  margin-top: calc(28 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.article__body p,
.article__body li {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--color-body);
}

.article__body ul,
.article__body ol { padding-left: calc(20 * var(--u)); }

.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }

.article__body li + li { margin-top: calc(6 * var(--u)); }

.article__body li::marker { color: var(--color-accent); }

.article__body strong { font-weight: 600; color: var(--color-text); }

.article__body a { color: var(--color-accent); text-underline-offset: calc(3 * var(--u)); }

.article__body blockquote {
  margin: calc(24 * var(--u)) 0 0;
  padding-left: calc(16 * var(--u));
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-loose);
  color: var(--color-text);
}

.article__body figure { margin-top: calc(24 * var(--u)); }

.article__body figure img { width: 100%; border-radius: var(--radius-card); }

.article__body figcaption { margin-top: calc(8 * var(--u)); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-muted); }

.article__body h2 + p,
.article__body h3 + p { margin-top: calc(14 * var(--u)); }

.article-end { margin-top: calc(36 * var(--u)); }

/* ---------- Тест ---------- */

.test-progress { margin-top: calc(20 * var(--u)); }

.test-counter { margin-top: calc(8 * var(--u)); }

.question__text {
  margin-top: calc(18 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-loose);
  color: var(--color-text);
  text-wrap: pretty;
}

.question__image { margin-top: calc(16 * var(--u)); }

.question__image img { max-height: calc(260 * var(--u)); margin-inline: auto; border-radius: calc(10 * var(--u)); }

.question__hint { margin-top: calc(10 * var(--u)); }

.options { display: grid; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }

.option {
  position: relative;
  display: grid;
  grid-template-columns: calc(22 * var(--u)) 1fr;
  align-items: start;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-divider);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.option input { position: absolute; opacity: 0; pointer-events: none; }

.option__mark {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin-top: 1px;
  border: 1.5px solid var(--color-border-warm);
  border-radius: 50%;
  background: var(--color-surface);
}

.option--multiple .option__mark { border-radius: calc(5 * var(--u)); }

.option:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--color-accent); }

.option:has(input:checked) .option__mark {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--color-surface);
}

.option--multiple:has(input:checked) .option__mark { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--color-surface); }

.option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.option__text { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--color-text); }

.option.is-correct { background: var(--color-success-bg); box-shadow: inset 0 0 0 1.5px var(--color-success); }
.option.is-correct .option__mark { border-color: var(--color-success); }
.option.is-wrong { background: var(--color-error-bg); box-shadow: inset 0 0 0 1.5px var(--color-accent); }

.options.is-checked .option { cursor: default; }

.feedback {
  margin-top: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-sand);
}

.feedback__verdict { font-weight: 600; }
.feedback--correct .feedback__verdict { color: var(--color-success); }
.feedback--wrong .feedback__verdict { color: var(--color-accent); }

.feedback__text { margin-top: calc(4 * var(--u)); color: var(--color-body); }

.result {
  margin-top: calc(28 * var(--u));
  padding: calc(28 * var(--u)) calc(20 * var(--u));
  border-radius: var(--radius-card);
  background: var(--color-powder);
  text-align: center;
}

.result__score {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(64 * var(--u));
  line-height: var(--lh-display);
  color: var(--color-accent);
}

.result__text { margin-top: calc(8 * var(--u)); color: var(--color-body); }

/* Разбор ответов — простой список с тонкими линиями, как FAQ сайта */
.review { margin-top: calc(14 * var(--u)); border-top: 1px solid var(--color-divider); }

.review__item { padding: calc(16 * var(--u)) 0; border-bottom: 1px solid var(--color-divider); }

.review__question { font-weight: 600; color: var(--color-text); }

.review__line { margin-top: calc(6 * var(--u)); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-body); }

.review__line b { font-weight: 600; color: var(--color-text); }

.review__verdict { font-weight: 600; }
.review__verdict--correct { color: var(--color-success); }
.review__verdict--wrong { color: var(--color-accent); }

/* ---------- Мои конспекты ---------- */

.search {
  position: relative;
  margin-top: calc(20 * var(--u));
}

.search__input {
  width: 100%;
  min-height: calc(52 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(44 * var(--u));
  border: 0;
  border-radius: calc(12 * var(--u));
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-divider);
  font-family: var(--font-body);
  font-size: max(16px, var(--fs-text));   /* 16px — чтобы iOS не увеличивал страницу */
  color: var(--color-text);
  appearance: none;
}

.search__input::placeholder { color: var(--color-muted); }

.search__input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-accent); }

.search__icon {
  position: absolute;
  top: 50%;
  left: calc(16 * var(--u));
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  transform: translateY(-50%);
  color: var(--color-muted);
}

.note-group__title { margin-top: calc(32 * var(--u)); }

.note-list { margin-top: calc(12 * var(--u)); border-top: 1px solid var(--color-divider); }

.note-item { border-bottom: 1px solid var(--color-divider); }

.note-item a {
  display: block;
  padding: calc(16 * var(--u)) 0;
  color: inherit;
  text-decoration: none;
}

.note-item__title {
  display: block;
  margin-top: calc(4 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
  color: var(--color-text);
}

.note-item__snippet {
  display: block;
  margin-top: calc(8 * var(--u));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-body);
}

.note-item mark { background: var(--color-powder); color: inherit; border-radius: 2px; }

.empty { margin-top: calc(28 * var(--u)); color: var(--color-body); }

/* ---------- Профиль ---------- */

.profile-head {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-top: calc(20 * var(--u));
}

.avatar {
  display: grid;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-powder);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-m);
  color: var(--color-accent);
}

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

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

.profile-head__username { margin-top: calc(6 * var(--u)); }

.profile-courses { margin-top: calc(14 * var(--u)); border-top: 1px solid var(--color-divider); }

.profile-course { padding: calc(16 * var(--u)) 0; border-bottom: 1px solid var(--color-divider); }

.profile-course a { color: inherit; text-decoration: none; }

.profile-course__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
}

.profile-course__meta {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  margin-top: calc(8 * var(--u));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-body);
}

.profile-course .progress { margin-top: calc(8 * var(--u)); }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(4 * var(--u));
  margin-top: calc(14 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--color-sand);
}

.segmented__option {
  min-height: calc(44 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: 0;
  border-radius: calc(9 * var(--u));
  background: none;
  color: var(--color-body);
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
}

.segmented__option[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 0 1px 2px rgba(60, 53, 51, 0.12);
}

.profile-contact { margin-top: calc(36 * var(--u)); }

/* ---------- Нижнее меню ---------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--color-divider);
  background: rgba(248, 244, 238, 0.96);
  backdrop-filter: blur(8px);
}

.tabbar__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--container-max);
  height: var(--nav-h);
  margin-inline: auto;
}

.tabbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  height: 100%;
  color: var(--color-muted);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  text-decoration: none;
}

.tabbar__link svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

.tabbar__link[aria-current="page"] { color: var(--color-accent); font-weight: 600; }

/* ---------- Экран ожидания и вход ---------- */

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: calc(40 * var(--u));
}

.moon {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 50%;
  box-shadow: inset calc(-12 * var(--u)) calc(-5 * var(--u)) 0 0 var(--color-gold-muted);
}

.center-screen .button { margin-top: calc(28 * var(--u)); }

/* ---------- Предпросмотр (только локально) ---------- */

.dev-bar {
  padding: calc(8 * var(--u)) var(--gutter);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.dev-bar a { color: inherit; margin-right: calc(10 * var(--u)); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

.login-widget { margin-top: 28px; }