/* =========================================================
   FWP TEAM — личный кабинет
   Наследует палитру сайта: Espresso · Warm Cream · Amber Forge
   ========================================================= */

:root {
  --color-espresso: #140b00;
  --color-midnight-cocoa: #0b0600;
  --color-warm-cream: #fff1e0;
  --color-walnut: #43392d;
  --color-cedar: #4f4538;
  --color-driftwood: #9b8e80;
  --color-burnt-edge: #181109;
  --color-amber-forge: #edcc00;

  --color-ok: #7bd36a;
  --color-fail: #e86a5a;

  --font-display: 'Oswald', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --panel: #1b1105;
  --panel-2: #221607;

  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --gutter: 24px;
  --cab-max: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(255, 248, 236, .05), transparent 62%),
    radial-gradient(900px 700px at 88% 12%, rgba(237, 204, 0, .035), transparent 60%),
    var(--color-espresso);
  background-attachment: fixed;
  color: var(--color-warm-cream);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }
svg { fill: currentColor; }
:focus-visible { outline: 2px solid var(--color-amber-forge); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

h1, h2, h3, .h {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.1;
}

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

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-amber-forge);
}

.muted { color: var(--color-driftwood); }

/* ---------- Шапка ---------- */
.cab-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 11, 0, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-burnt-edge);
}
.cab-head__inner {
  display: flex; align-items: center; gap: var(--gutter);
  min-height: 78px;
}
.cab-head__brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.cab-head__brand img { width: 54px; height: 40px; object-fit: contain; }
.cab-head__brand b {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; font-size: 16px;
}
.cab-head__brand span { display: block; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; color: var(--color-driftwood); text-transform: none; }

.cab-head__nav { display: flex; align-items: center; gap: 10px; }
.cab-head__user {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--color-walnut); border-radius: var(--radius-full);
  font-size: 15px;
}
.cab-head__avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-amber-forge); color: var(--color-espresso);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .04em;
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: 12px 24px;
  border: 1px solid transparent;
  text-align: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.btn svg { width: 19px; height: 19px; flex: 0 0 19px; }
.btn--primary { background: var(--color-amber-forge); color: var(--color-espresso); }
.btn--primary:hover { background: var(--color-warm-cream); }
.btn--primary:active { transform: translateY(1px); }
.btn--outline { border-color: var(--color-walnut); color: var(--color-warm-cream); }
.btn--outline:hover { border-color: var(--color-warm-cream); background: var(--color-warm-cream); color: var(--color-espresso); }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 16px 34px; font-size: 19px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- Плашки ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--radius-full); padding: 5px 13px;
  background: var(--color-walnut); color: var(--color-warm-cream);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; flex: 0 0 14px; }
.chip--ok { background: rgba(123, 211, 106, .16); color: var(--color-ok); }
.chip--fail { background: rgba(232, 106, 90, .16); color: var(--color-fail); }
.chip--amber { background: rgba(237, 204, 0, .16); color: var(--color-amber-forge); }
.chip--lock { background: transparent; border: 1px solid var(--color-cedar); color: var(--color-driftwood); }

/* ---------- Карточки и панели ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--color-burnt-edge);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
.panel + .panel { margin-top: 16px; }

.page-head { padding-top: 46px; padding-bottom: 28px; }
.page-head h1 { font-size: clamp(30px, 5vw, 46px); margin-top: 10px; }
.page-head p { color: var(--color-driftwood); margin-top: 12px; max-width: 70ch; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--color-driftwood); flex-wrap: wrap; }
.crumbs a:hover { color: var(--color-amber-forge); }

/* ---------- Флеш-сообщения ---------- */
.flash {
  display: flex; align-items: flex-start; gap: 12px;
  border-radius: var(--radius-lg); padding: 15px 20px; margin-bottom: 20px;
  background: rgba(237, 204, 0, .09);
  border: 1px solid rgba(237, 204, 0, .32);
  font-size: 16px;
}
.flash--err { background: rgba(232, 106, 90, .1); border-color: rgba(232, 106, 90, .35); }
.flash--ok { background: rgba(123, 211, 106, .1); border-color: rgba(123, 211, 106, .35); }

/* ---------- Прогресс ---------- */
.bar { height: 7px; border-radius: var(--radius-full); background: var(--color-burnt-edge); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--color-amber-forge); border-radius: inherit; transition: width .4s ease; }
.bar--ok > i { background: var(--color-ok); }

/* ---------- Список курсов ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }

.course-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--color-burnt-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.course-card:hover { border-color: var(--color-walnut); transform: translateY(-3px); }
.course-card__cover { aspect-ratio: 16 / 7; background: var(--panel-2); overflow: hidden; }
.course-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.course-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.course-card__body h2 { font-size: 23px; }
.course-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.course-card__foot { margin-top: auto; padding-top: 6px; }

/* ---------- Модули ---------- */
.module { border: 1px solid var(--color-burnt-edge); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; }
.module + .module { margin-top: 12px; }
.module[open] { border-color: var(--color-walnut); }

.module__head {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  transition: background-color .2s ease;
}
.module__head::-webkit-details-marker { display: none; }
.module__head::marker { content: ""; }
.module__head:hover { background: var(--panel-2); }
.module[open] .module__head { background: var(--panel-2); border-bottom: 1px solid var(--color-burnt-edge); }

.module__num {
  font-family: var(--font-display); font-size: 15px; letter-spacing: .08em;
  color: var(--color-amber-forge);
  width: 34px; flex: 0 0 34px;
}
.module__title { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: .01em; text-transform: uppercase; flex: 1; line-height: 1.25; }
.module__chev { width: 20px; height: 20px; flex: 0 0 20px; color: var(--color-driftwood); transition: transform .25s ease; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.module[open] .module__chev { transform: rotate(180deg); color: var(--color-amber-forge); }

.module__body { padding: 24px 26px 28px 76px; }
.module__body h4 {
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-amber-forge);
  margin: 26px 0 10px;
}
.module__body h4:first-child { margin-top: 0; }
.module__body p { margin-bottom: 12px; color: rgba(255, 241, 224, .88); }
.module__body ul, .module__body ol { margin: 0 0 14px; padding-left: 22px; }
.module__body ul { list-style: disc; }
.module__body ol { list-style: decimal; }
.module__body li { margin-bottom: 7px; color: rgba(255, 241, 224, .88); }
.module__body li::marker { color: var(--color-amber-forge); }
.module__body b, .module__body strong { color: var(--color-warm-cream); font-weight: 600; }
.module__body table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 15px; }
.module__body th, .module__body td { border: 1px solid var(--color-burnt-edge); padding: 10px 12px; text-align: left; }
.module__body th { background: var(--panel-2); font-family: var(--font-display); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }

/* ---------- Экзамены: список ---------- */
.exam-card {
  display: flex; align-items: center; gap: 20px;
  border: 1px solid var(--color-burnt-edge); border-radius: var(--radius-lg);
  background: var(--panel); padding: 22px 26px;
  transition: border-color .25s ease;
}
.exam-card + .exam-card { margin-top: 12px; }
.exam-card--open { border-color: rgba(237, 204, 0, .4); }
.exam-card--passed { border-color: rgba(123, 211, 106, .32); }
.exam-card--locked { opacity: .62; }

.exam-card__mark {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-walnut); color: var(--color-driftwood);
  font-family: var(--font-display); font-size: 17px;
}
.exam-card__mark svg { width: 20px; height: 20px; }
.exam-card--open .exam-card__mark { background: var(--color-amber-forge); border-color: var(--color-amber-forge); color: var(--color-espresso); }
.exam-card--passed .exam-card__mark { background: rgba(123, 211, 106, .16); border-color: rgba(123, 211, 106, .4); color: var(--color-ok); }

.exam-card__main { flex: 1; min-width: 0; }
.exam-card__main h3 { font-size: 19px; margin-bottom: 7px; }
.exam-card__note { font-size: 14.5px; color: var(--color-driftwood); }
.exam-card__side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Квиз ---------- */
.quiz-top {
  position: sticky; top: 78px; z-index: 20;
  background: rgba(20, 11, 0, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-burnt-edge);
  padding: 14px 0;
}
.quiz-top__inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.quiz-top__count { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }
.quiz-top__count b { color: var(--color-amber-forge); }
.quiz-top .bar { flex: 1; min-width: 180px; }
.quiz-timer { font-family: var(--font-display); font-size: 17px; letter-spacing: .06em; color: var(--color-amber-forge); }
.quiz-timer.is-low { color: var(--color-fail); }

.q {
  border: 1px solid var(--color-burnt-edge); border-radius: var(--radius-lg);
  background: var(--panel); padding: 26px 28px;
  transition: border-color .25s ease;
}
.q + .q { margin-top: 14px; }
.q.is-answered { border-color: rgba(237, 204, 0, .28); }
.q__num { font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-amber-forge); }
.q__text { font-size: 18px; font-weight: 600; margin: 9px 0 18px; line-height: 1.45; }

.opt {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid var(--color-burnt-edge); border-radius: var(--radius-md);
  background: var(--panel-2); padding: 15px 18px; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.opt + .opt { margin-top: 9px; }
.opt:hover { border-color: var(--color-walnut); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__dot {
  width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-cedar);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease;
}
.opt__dot::after { content: ""; width: 10px; height: 10px; border-radius: inherit; background: var(--color-amber-forge); transform: scale(0); transition: transform .18s ease; }
.opt:has(input:checked) { border-color: var(--color-amber-forge); background: rgba(237, 204, 0, .07); }
.opt:has(input:checked) .opt__dot { border-color: var(--color-amber-forge); }
.opt:has(input:checked) .opt__dot::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--color-amber-forge); outline-offset: 2px; }
.opt__text { flex: 1; }

/* разбор ответов */
.opt--correct { border-color: rgba(123, 211, 106, .5); background: rgba(123, 211, 106, .08); }
.opt--wrong { border-color: rgba(232, 106, 90, .5); background: rgba(232, 106, 90, .08); }
.opt--correct .opt__dot { border-color: var(--color-ok); }
.opt--correct .opt__dot::after { background: var(--color-ok); transform: scale(1); }
.opt--wrong .opt__dot { border-color: var(--color-fail); }
.opt--wrong .opt__dot::after { background: var(--color-fail); transform: scale(1); }
.opt__tag { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-driftwood); align-self: center; }

.q__note {
  margin-top: 14px; padding: 13px 16px; border-radius: var(--radius-md);
  background: rgba(237, 204, 0, .07); border: 1px solid rgba(237, 204, 0, .22);
  font-size: 15px; color: rgba(255, 241, 224, .88);
}

.quiz-foot {
  position: sticky; bottom: 0;
  margin-top: 22px; padding: 18px 0 24px;
  background: linear-gradient(to top, var(--color-espresso) 62%, transparent);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* ---------- Итог экзамена ---------- */
.score {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  border-radius: var(--radius-lg); padding: 32px 34px;
  border: 1px solid var(--color-burnt-edge); background: var(--panel);
}
.score--passed { border-color: rgba(123, 211, 106, .38); background: rgba(123, 211, 106, .06); }
.score--failed { border-color: rgba(232, 106, 90, .38); background: rgba(232, 106, 90, .06); }
.score__ring {
  width: 116px; height: 116px; flex: 0 0 116px;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 33px; letter-spacing: .02em;
  background: conic-gradient(var(--ring-color) calc(var(--ring) * 1%), var(--color-burnt-edge) 0);
  position: relative;
}
.score__ring::before { content: ""; position: absolute; inset: 9px; border-radius: inherit; background: var(--color-espresso); }
.score__ring span { position: relative; }
.score--passed .score__ring { --ring-color: var(--color-ok); color: var(--color-ok); }
.score--failed .score__ring { --ring-color: var(--color-fail); color: var(--color-fail); }
.score__main { flex: 1; min-width: 240px; }
.score__main h1 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 10px; }
.score__main p { color: var(--color-driftwood); }
.score__stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Вход ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--gutter); }
.login {
  width: 100%; max-width: 430px;
  border: 1px solid var(--color-burnt-edge); border-radius: var(--radius-lg);
  background: var(--panel); padding: 38px 36px 34px;
}
.login__logo { width: 96px; height: 72px; object-fit: contain; margin: 0 auto 18px; }
.login h1 { font-size: 27px; text-align: center; }
.login__sub { text-align: center; color: var(--color-driftwood); font-size: 15px; margin: 10px 0 26px; }

.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-driftwood);
}
.field input[type="text"], .field input[type="password"], .field input[type="email"] {
  width: 100%; padding: 13px 16px;
  background: var(--color-midnight-cocoa);
  border: 1px solid var(--color-walnut); border-radius: var(--radius-md);
  color: var(--color-warm-cream); font-size: 16px;
  transition: border-color .2s ease;
}
.field input:focus { outline: none; border-color: var(--color-amber-forge); }
.field .err { display: block; margin-top: 7px; font-size: 14px; color: var(--color-fail); }

.check { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--color-driftwood); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--color-amber-forge); }

.login__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-burnt-edge); text-align: center; font-size: 14px; color: var(--color-driftwood); }
.login__foot a:hover { color: var(--color-amber-forge); }

/* ---------- Пустое состояние ---------- */
.empty { text-align: center; padding: 56px 24px; }
.empty b { display: block; font-family: var(--font-display); font-size: 21px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.empty p { color: var(--color-driftwood); max-width: 46ch; margin: 0 auto; }

/* ---------- Подвал ---------- */
.cab-foot {
  margin-top: 64px; padding: 26px 0 34px;
  border-top: 1px solid var(--color-burnt-edge);
  color: var(--color-driftwood); font-size: 14px;
}
.cab-foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cab-foot a:hover { color: var(--color-amber-forge); }

/* ---------- Адаптив ---------- */
@media (max-width: 820px) {
  .cab-head__inner { min-height: 66px; }
  .cab-head__brand span { display: none; }
  .cab-head__user span { display: none; }
  .cab-head__user { padding: 6px; border-color: transparent; }
  .quiz-top { top: 66px; }
  .module__body { padding-left: 26px; }
  .exam-card { flex-wrap: wrap; }
  .exam-card__side { width: 100%; justify-content: flex-start; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .panel { padding: 22px 20px; }
  .q { padding: 22px 20px; }
  .page-head { padding-top: 30px; }
  .score { padding: 24px 22px; gap: 20px; }
  .score__ring { width: 92px; height: 92px; flex: 0 0 92px; font-size: 27px; }
  .course-grid { grid-template-columns: 1fr; }
  .btn--lg { padding: 14px 24px; font-size: 17px; }
}

/* разбор ответов — карточки не кликабельны */
div.opt { cursor: default; }

/* подпись у кнопки выхода прячется на узких экранах */
@media (max-width: 680px) {
  .only-wide { display: none; }
}

/* ===== Тёмная тема для нативных элементов =====
   Иначе браузер рисует свои кнопки и списки светлыми. */
:root { color-scheme: dark; }

select option { background: var(--panel); color: var(--color-warm-cream); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-warm-cream);
  -webkit-box-shadow: 0 0 0 1000px var(--color-midnight-cocoa) inset;
  caret-color: var(--color-warm-cream);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--color-amber-forge); }

/* ===== Текст из редактора =====
   Один набор правил и для модулей курса, и для описаний. */
.rich > *:first-child { margin-top: 0; }
.rich > *:last-child { margin-bottom: 0; }

.rich h1, .rich h2, .rich h3, .rich h4,
.module__body h1, .module__body h2, .module__body h3 {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-amber-forge);
  margin: 26px 0 10px; line-height: 1.2;
}
.rich h1, .module__body h1 { font-size: 24px; }
.rich h2, .module__body h2 { font-size: 20px; }
.rich h3, .module__body h3 { font-size: 17px; }
.rich h4 { font-size: 16px; }

.rich p { margin-bottom: 12px; color: rgba(255, 241, 224, .88); }
.rich ul, .rich ol { margin: 0 0 14px; padding-left: 22px; }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li { margin-bottom: 7px; color: rgba(255, 241, 224, .88); }
.rich li::marker { color: var(--color-amber-forge); }
.rich b, .rich strong { color: var(--color-warm-cream); font-weight: 600; }

.rich a, .module__body a { color: var(--color-amber-forge); text-decoration: underline; }
.rich a:hover, .module__body a:hover { color: var(--color-warm-cream); }

.rich blockquote, .module__body blockquote {
  margin: 0 0 14px; padding: 10px 0 10px 18px;
  border-left: 3px solid var(--color-amber-forge);
  color: var(--color-driftwood);
}

.rich img, .module__body img {
  border-radius: var(--radius-lg);
  margin: 6px 0 16px;
}

.rich hr, .module__body hr { border: 0; border-top: 1px solid var(--color-burnt-edge); margin: 22px 0; }

.rich table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 15px; }
.rich th, .rich td { border: 1px solid var(--color-burnt-edge); padding: 10px 12px; text-align: left; }
.rich th {
  background: var(--panel-2);
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; font-size: 14px;
}

/* таблица в модуле не должна распирать страницу на телефоне */
@media (max-width: 640px) {
  .rich table, .module__body table { display: block; overflow-x: auto; }
}

/* плеер YouTube из редактора */
.rich-video, .module__body .rich-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 8px 0 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--color-burnt-edge);
}
.rich-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* вопрос, в котором ошиблись: разбираем тему, верный ответ не показываем */
.q--mistake { border-color: rgba(232, 106, 90, .32); }
.q--mistake .q__num { color: var(--color-fail); }
.q--mistake .q__text { margin-bottom: 0; }

/* ---------- Описание курса под катом ---------- */
.page-head__sub { color: var(--color-driftwood); margin-top: 10px; }

.about {
  margin-top: 18px;
  border: 1px solid var(--color-burnt-edge);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}
.about__toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-amber-forge);
  transition: background-color .2s ease;
}
.about__toggle::-webkit-details-marker { display: none; }
.about__toggle::marker { content: ""; }
.about__toggle:hover { background: var(--panel-2); }
.about__chev {
  width: 18px; height: 18px; margin-left: auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease;
}
.about[open] .about__chev { transform: rotate(180deg); }
.about__close { display: none; }
.about[open] .about__open { display: none; }
.about[open] .about__close { display: inline; }
.about__body { padding: 4px 20px 22px; border-top: 1px solid var(--color-burnt-edge); padding-top: 18px; }

/* ---------- Учебные материалы: не выделяются мышкой ---------- */
.is-protected, .is-protected * {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* в полях ввода выделение нужно — иначе экзамен не сдать */
.is-protected input, .is-protected textarea, .is-protected select {
  -webkit-user-select: text;
  user-select: text;
}
.is-protected img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- Текстовые блоки курса ---------- */
.cblock { margin-bottom: 40px; }
.cblock--after {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--color-burnt-edge);
}
.cblock__title {
  font-size: clamp(21px, 3vw, 28px);
  margin-bottom: 16px;
}
.cblock__body {
  border: 1px solid var(--color-burnt-edge);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 26px 28px;
}
.cblock__lead { color: var(--color-driftwood); max-width: 78ch; margin-bottom: 20px; }

/* фото автора не должно занимать всю ширину блока */
.cblock__body img { max-width: 260px; border-radius: var(--radius-lg); }

/* ---------- Вид «плитки с цифрами» ---------- */
.ctiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

.ctile {
  position: relative;
  border: 1px solid var(--color-burnt-edge);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 26px 26px 24px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.ctile::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--color-amber-forge);
}
.ctile:hover { border-color: var(--color-walnut); transform: translateY(-2px); }

.ctile__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 52px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-amber-forge);
  margin-bottom: 10px;
}
.ctile__label { display: block; font-size: 15px; line-height: 1.45; color: rgba(255, 241, 224, .82); }

/* ---------- Вид «карточки по подзаголовкам» ---------- */
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }

.ccard {
  position: relative;
  border: 1px solid var(--color-burnt-edge);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: 26px 26px 24px;
  transition: border-color .25s ease, transform .25s ease;
}
.ccard:hover { border-color: var(--color-walnut); transform: translateY(-2px); }

.ccard__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--color-amber-forge);
  margin-bottom: 10px;
}
.ccard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.25;
  margin-bottom: 12px;
}
.ccard__body { font-size: 15.5px; }
.ccard__body p { color: rgba(255, 241, 224, .82); }
.ccard__body > *:last-child { margin-bottom: 0; }

/* карточка без заголовка — это вступление, пусть занимает всю ширину */
.ccard:has(.ccard__body:first-child) { grid-column: 1 / -1; background: none; border: 0; padding: 0; }
.ccard:has(.ccard__body:first-child):hover { transform: none; }

@media (max-width: 560px) {
  .cblock__body { padding: 22px 20px; }
  .cblock__body img { max-width: 100%; }
  .ctile, .ccard { padding: 22px 20px; }
  .ctiles, .ccards { grid-template-columns: 1fr; }
}

/* контейнер плеера без плеера — обычный текст, а не чёрный блок 16:9 */
.rich-video:not(:has(iframe)) {
  position: static;
  aspect-ratio: auto;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: visible;
}

/* экзамен внутри программы курса отделяем от соседних модулей */
.module + .exam-card, .exam-card + .module { margin-top: 18px; }