/* ============================================================
   Демо интерактивных механик обучения — мини-приложение MAX
   Фирменный стиль ARK. Vanilla CSS, без фреймворков.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter (текст) и Roboto Condensed (заголовки) — self-hosted, латиница + кириллица.
   Montserrat выше остаётся для курсов, где он выбран явно. */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Inter-400-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Inter-400-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Inter-500-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Inter-500-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Inter-600-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Inter-600-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Inter-700-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Inter-700-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Roboto Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/RobotoCondensed-600-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Roboto Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/RobotoCondensed-600-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Roboto Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/RobotoCondensed-700-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Roboto Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/RobotoCondensed-700-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Roboto Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/RobotoCondensed-800-lat.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+20AC, U+2122; }
@font-face { font-family: 'Roboto Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/RobotoCondensed-800-cyr.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* Фирменная палитра ARK: зелёный (в тон обложек курсов), плюс фиолетовый и оранжевый для акцентов KPI */
  --color-primary:    #0D5D4D;
  --color-accent:     #178F6F;
  --color-accent-hover: #106B54;
  --color-cta:        #178F6F;
  --color-cta-hover:  #106B54;
  --color-purple:     #523388;
  --color-orange:     #F8AA00;
  --color-bg:         #FFFFFF;
  --color-bg-card:    #F5F8FC;
  --color-text:       #123B32;
  --color-text-light: #FFFFFF;
  --color-success:    #51B34F;
  --color-error:      #dc3545;
  --color-warn:       #F8AA00;
  --font-main:        'Inter', Arial, sans-serif;
  /* UI-редизайн (docs/UI-REDESIGN.md, п.1): производные и игровые токены.
     --soft / --soft-2 пересчитываются из акцента темы в theme.js (hex, без color-mix). */
  --soft:             #E8F4F1;
  --soft-2:           #D5EBE5;
  --line:             rgba(19, 34, 27, 0.10);
  --highlight:        #C8F06A;
  --gold:             #C9A14A;
  --dark-panel:       #0F1F18;
  --font-heading:     'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --radius-card:      22px;
  --radius-pill:      100px;
  /* Почти плоско (UI-REDESIGN п.1): «бордер» --line нарисован тенью-обводкой,
     чтобы не менять размеры карточек и не сдвигать вёрстку механик. */
  --shadow-card:      0 1px 2px rgba(0,0,0,0.03), 0 0 0 1px var(--line);
  --shadow-deep:      0 24px 60px rgba(15,31,24,0.18);
  --plaque-width:     280px;
  --header-height:    64px;
  --progress-height:  6px;
  --quiz-dots-height: 0px;
}
#app.has-quiz-dots { --quiz-dots-height: 34px; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font-family: var(--font-main); }
img { max-width: 100%; display: block; }

/* Заголовки — Roboto Condensed капсом для всех клиентов (п.5 UI-REDESIGN).
   Текст вопросов и вариантов ответов — не заголовки, регистр не меняется. */
h1, h2, h3, .h1-title, .h2-subtitle {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h1-title {
  font-weight: 800;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.1;
  color: var(--color-primary);
}
.h2-subtitle {
  font-weight: 700;
  font-size: clamp(20px, 3vw, 24px);
  line-height: 1.15;
  color: var(--color-text);
}
.body-text { font-weight: 400; font-size: 16px; color: var(--color-text); }
.text-on-dark { font-weight: 400; font-size: 16px; color: var(--color-text-light); }

/* ---------------- App shell ---------------- */
#app {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--progress-height);
  background: #E1E8E4;
  z-index: 500;
}
.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 300ms ease;
}

.quiz-dots {
  position: fixed;
  top: calc(var(--progress-height) + var(--header-height));
  left: 0; right: 0;
  height: var(--quiz-dots-height, 34px);
  background: #fff;
  border-bottom: 1px solid #ECEDF3;
  z-index: 490;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  overflow-x: auto;
}
.quiz-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #D7DBE6;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease;
}
.quiz-dot:hover { transform: scale(1.4); }
.quiz-dot--correct { background: var(--color-success); }
.quiz-dot--wrong { background: var(--color-error); }
.quiz-dot--partial { background: var(--color-warn); }

.app-header {
  position: fixed;
  top: var(--progress-height);
  left: 0; right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
  z-index: 400;
  border-bottom: 1px solid #ECEDF3;
}
.app-header.is-dark {
  background: rgba(2,51,114,0.96);
  border-bottom-color: rgba(255,255,255,0.1);
}
.app-header__logo { height: 26px; }
.app-header__left { display: flex; align-items: center; gap: 10px; }
.header-score {
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.logo-ark {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}
.logo-ark--light { color: #fff; }
.s00__logo { margin-bottom: 24px; }
.s11__logo { margin: 0 auto 24px; }
.app-header__nav { display: flex; gap: 10px; align-items: center; }

.nav-btn {
  background: transparent;
  border: 1px solid #D7DBE6;
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.nav-btn:hover { background: #EEF1F8; }
a.nav-btn { display: inline-flex; align-items: center; text-decoration: none; }
.nav-btn--home { font-weight: 600; }
.app-header.is-dark .nav-btn { color: #fff; border-color: rgba(255,255,255,0.35); }
.app-header.is-dark .nav-btn:hover { background: rgba(255,255,255,0.12); }
.nav-btn--skip { color: var(--color-orange); border-color: var(--color-orange); }
.nav-btn--skip:hover { background: rgba(248,170,0,0.1); }

/* ---------------- Плавающий виджет контакта (на всех экранах) ---------------- */
.contact-widget { position: fixed; right: 20px; bottom: 20px; z-index: 520; }
.contact-widget__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-cta);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-main);
  box-shadow: 0 6px 20px rgba(13,93,77,0.35);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.contact-widget__btn:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,93,77,0.45);
}
.contact-widget__icon { font-size: 16px; line-height: 1; }
.contact-widget__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
}
.contact-widget__menu.hidden { display: none; }
.contact-widget__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: background 150ms ease;
}
.contact-widget__link:hover { background: var(--color-bg-card); }
@media (max-width: 560px) {
  .contact-widget__text { display: none; }
  .contact-widget__btn { padding: 14px; }
  .contact-widget__icon { font-size: 20px; }
}

/* ---------------- Screens & transitions ---------------- */
.screen {
  display: none !important;
  min-height: 100vh;
  padding-top: calc(var(--header-height) + var(--progress-height) + var(--quiz-dots-height));
  opacity: 0;
}
.screen.is-active {
  display: block !important;
  animation: screenFade 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.screen.s00.is-active {
  display: flex !important;
}
/* Утилита для коротких тёмных экранов вроде B36 (заголовок + пара кнопок) —
   без неё контент прилипает к верху, а под ним пустует весь остаток 100vh. */
.screen.screen--center.is-active {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@keyframes screenFade {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.screen--nochrome { padding-top: 0; }

.screen-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 32px 96px;
}

.screen-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: #999999;
  padding: 10px 16px;
  background: rgba(255,255,255,0.9);
  z-index: 300;
}
.screen.is-dark-bg .screen-footer,
.screen--dark .screen-footer { background: rgba(0,0,0,0.15); color: rgba(255,255,255,0.7); }

/* ---------------- Left plaque ---------------- */
.with-plaque { display: flex; min-height: 100vh; }
.plaque {
  width: var(--plaque-width);
  min-width: var(--plaque-width);
  background: var(--color-primary);
  color: #fff;
  padding: 40px 28px;
  padding-top: calc(var(--header-height) + var(--progress-height) + var(--quiz-dots-height) + 40px);
}
.plaque h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
}
.plaque__eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 10px;
}
.content-area { flex: 1; padding: 32px 40px 96px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-cta);
  color: #fff;
  border: none;
  min-height: 46px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  /* Кнопки — Roboto Condensed капсом, как в демо (UI-REDESIGN п.1). */
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms ease, opacity 300ms ease, transform 100ms ease;
}
.btn:hover:not(:disabled) { background: var(--color-cta-hover); }
.btn:active:not(:disabled) { transform: scale(0.94); }
.btn:disabled,
.btn.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--secondary {
  background: var(--soft);
  color: var(--color-cta);
  border: 1px solid transparent;
}
.btn--secondary:hover:not(:disabled) { background: var(--soft-2); }
/* На тёмном фоне (.s00/.s11) обычный вариант почти сливается с фоном —
   те же цвета, что у .btn--ghost, специально для этого созданного. */
.s00 .btn--secondary, .s11 .btn--secondary,
.branch-result .btn--secondary, .dialogue__result .btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.s00 .btn--secondary:hover:not(:disabled), .s11 .btn--secondary:hover:not(:disabled),
.branch-result .btn--secondary:hover:not(:disabled), .dialogue__result .btn--secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
}
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-pill);
}
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--wide { width: 100%; }
/* CTA на тёмном фоне (hero, итог курса) — лайм. */
.btn--lime { background: var(--highlight); color: #13221B; }
.btn--lime:hover:not(:disabled) { background: #B5E04F; }

.btn-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
#team-progress-row { margin: 0 0 24px; }

/* ---------------- Cards ---------------- */
.card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.card--muted { background: var(--color-bg-card); box-shadow: none; }

.mechanic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.mechanic-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  padding: 20px;
  text-align: left;
}
.mechanic-card__icon { font-size: 28px; margin-bottom: 10px; }
.mechanic-card__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
.mechanic-card__desc { font-size: 13px; color: var(--color-text); opacity: 0.75; margin: 0; line-height: 1.4; }

.flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 4px;
  margin: 20px 0;
}
.flow-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; }
.flow-step__icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--color-bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.flow-step__label { font-size: 12px; font-weight: 700; color: var(--color-text); text-align: center; line-height: 1.25; }
.flow-arrow { font-size: 20px; color: var(--color-accent); opacity: 0.6; flex-shrink: 0; align-self: flex-start; padding-top: 14px; }
.h1-title .flow-row { margin: 12px 0 0; }

/* ============================================================
   D00 — личный кабинет
   ============================================================ */
.d00 { background: var(--color-bg); }
.d00-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
}
.d00-header__user { font-weight: 500; color: var(--color-primary); }
.d00-header__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.profile-card {
  margin: 0 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-card__name { font-weight: 700; font-size: 20px; color: var(--color-primary); }
.profile-card__role-row { display: flex; align-items: center; }
.profile-card__role-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.profile-card__role-btn:hover { text-decoration: underline; }
.profile-card__role-display { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; }
.profile-card__role-edit { background: none; border: none; cursor: pointer; font-size: 13px; color: #999; padding: 0; }
.profile-card__role-edit:hover { color: var(--color-accent); }
.profile-card__role-form { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-card__role-form .gate-input { flex: 1; min-width: 180px; }
.profile-card__progress-summary { font-size: 14px; color: #666; line-height: 1.6; }
.profile-card__progress-summary strong { color: var(--color-primary); }
.gate-input {
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid #D7DBE6;
  font-size: 15px;
  font-family: var(--font-main);
}
.gate-input:focus { outline: none; border-color: var(--color-accent); }
.courses-section { padding: 0 40px 64px; }
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.course-card {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-card > .btn--wide { margin-top: auto; }
.course-card__btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
/* Высота задана явно на обеих кнопках вместо stretch + aspect-ratio —
   в Safari растяжение по кросс-оси с aspect-ratio на соседнем элементе
   не всегда даёт квадрат, круглая кнопка сплющивалась. Точные значения
   вместо auto надёжно держат круг в любом браузере. */
.course-card__btn-row .btn--wide { width: auto; flex: 1 1 auto; height: 48px; }
.course-card__cover-wrap {
  width: calc(100% + 44px);
  margin: -22px -22px 16px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
/* Готовая обложка целиком (content.coverUrl) — тёмная подложка снизу под
   белый заголовок, чтобы текст читался на любой фотографии. */
.course-card__cover-wrap:not(.course-card__cover-wrap--panel)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%);
}
.course-card__cover-wrap:not(.course-card__cover-wrap--panel) .course-card__cover-title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 14px 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
/* Нет готовой обложки — зелёная диагональная панель бренда с названием
   живым текстом слева и (опционально) фото человека справа
   (content.coverPhotoUrl, без текста — надпись рисуем сами, чтобы не
   обрезалась при любой длине заголовка). */
.course-card__cover-wrap--panel {
  align-items: stretch;
  background: var(--color-primary);
}
.course-card__cover-wrap--panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 78% 100%);
}
.course-card__cover-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 68%;
  padding: 14px 12px 14px 16px;
}
.course-card__cover-wrap--panel .course-card__cover-title {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card__cover-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  max-width: 40%;
  object-fit: contain;
  object-position: bottom;
  z-index: 1;
}
.course-card__badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  white-space: nowrap;
}
.course-card--active .course-card__badge { background: #E7F3EA; color: #1e8e4a; }
.course-card__badge--done { background: var(--color-cta); color: #fff; }
.course-card--locked { opacity: 0.8; }
.course-card--locked .course-card__badge { background: #EEE; color: #999; }
.course-card__hint { font-size: 13px; color: var(--color-accent); font-weight: 500; margin: 0 0 14px; }
/* Круглая кнопка "начать заново" рядом с "Продолжить" — раньше это была
   текстовая ссылка под кнопкой, из-за чего высота карточки менялась в
   зависимости от статуса курса. Круглая иконка в одном ряду с кнопкой
   держит высоту карточки постоянной и не путается с "Продолжить". */
.course-card__retake-btn {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg-card);
  border: 1.5px solid #B9C0D1;
  color: #555;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-card__retake-btn:hover { background: #fdeceb; border-color: var(--color-error); color: var(--color-error); }
.course-card p { font-size: 14px; color: #666; margin-bottom: 16px; }

/* ============================================================
   S00 — вводное видео
   ============================================================ */
.s00 {
  background: var(--color-primary);
  color: #fff;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 100px;
}
.s00__logo { height: 32px; margin-bottom: 24px; }
.s00__title { font-size: 28px; font-weight: 700; margin-bottom: 28px; }
.phone-frame {
  position: relative;
  width: min(240px, 62vw);
  aspect-ratio: 9 / 19.5;
  margin: 24px auto 0;
  padding: 10px;
  border-radius: 34px;
  background: #0b0b0f;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.06) inset;
}
.phone-frame__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}
.phone-frame__screen video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.phone-frame__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 16px;
  background: #0b0b0f;
  border-radius: 10px;
  z-index: 3;
}
.phone-frame__caption {
  margin: 16px auto 0;
  max-width: 320px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  text-align: center;
}
.phone-frame__caption--light { color: rgba(255,255,255,0.65); }
.video-speed { display: flex; gap: 8px; justify-content: center; margin: 16px auto 0; }
.video-speed__btn {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid #D7DBE6;
  background: #fff;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.video-speed__btn:hover { background: #EEF1F8; }
.video-speed__btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.video-speed--light .video-speed__btn { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
.video-speed--light .video-speed__btn:hover { background: rgba(255,255,255,0.12); }
.video-speed--light .video-speed__btn.is-active { background: #fff; color: var(--color-primary); border-color: #fff; }
.phone-frame__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  cursor: pointer;
  z-index: 2;
  transition: opacity 200ms ease;
}
.phone-frame__play.hidden { opacity: 0; pointer-events: none; }
.phone-frame__play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  padding-left: 3px;
}
.s00__actions { margin-top: 28px; display: flex; gap: 12px; }

/* ============================================================
   S01 — главное меню
   ============================================================ */
.s01-search {
  width: 100%;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #D7DBE6;
  font-size: 14px;
  margin-bottom: 24px;
  font-family: var(--font-main);
}
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.section-card {
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  border: 2px solid transparent;
}
.section-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.section-card.is-hidden-by-search { display: none; }
.section-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.section-card__status.not-started { background: #EEE; color: #888; }
.section-card__status.in-progress { background: #FDF1DC; color: #b3720b; }
.section-card__status.done { background: #E7F3EA; color: #1e8e4a; }
.section-card h3 { font-size: 18px; margin-bottom: 6px; }
.section-card p { font-size: 13px; color: #777; }

/* ============================================================
   Accordion / spoilers (S02, S05)
   ============================================================ */
.spoiler-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.spoiler {
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.spoiler--best { box-shadow: 0 0 0 2px var(--color-success), var(--shadow-card); }
.spoiler--best .spoiler__head { font-weight: 700; }
.spoiler__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  text-align: left;
}
.spoiler__arrow { transition: transform 200ms ease; font-size: 14px; color: var(--color-accent); }
.spoiler.is-open .spoiler__arrow { transform: rotate(180deg); }
.spoiler__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease, padding 300ms ease;
  padding: 0 22px;
  font-size: 15px;
  color: #444;
}
.spoiler.is-open .spoiler__body {
  max-height: 600px;
  padding: 0 22px 20px;
}
.spoiler-counter { font-size: 14px; color: #777; margin-top: 16px; }

/* ---------- Флип-карточки: accordion с config.view = "cards" (UI-REDESIGN 3.6a) ---------- */
.spoiler-list--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.spoiler-list--cards .flip-card {
  overflow: visible;
  background: none;
  box-shadow: none;
  perspective: 1600px;
}
.flip-card__inner {
  display: grid;
  min-height: 380px;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.flip-card.is-open .flip-card__inner { transform: rotateY(180deg); }
/* Обе стороны в одной ячейке грида: высота — по большей из сторон. */
.spoiler-list--cards .flip-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  max-height: none;
  padding: 26px 26px 24px;
  border-radius: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: left;
}
.spoiler-list--cards .flip-card__front {
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  font-weight: 400;
}
.spoiler-list--cards .flip-card__front:hover { box-shadow: 0 0 0 2px var(--color-accent); }
.spoiler-list--cards .flip-card__front:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.flip-card__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 72px;
  line-height: 0.9;
  color: var(--soft-2);
}
.flip-card__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-top: 8px;
  border-radius: 22px;
  background: var(--soft);
  color: var(--color-primary);
}
.flip-card__icon svg {
  width: 36px; height: 36px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.flip-card__title {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.flip-card__hint { font-size: 15px; color: #6A7A72; }
.spoiler-list--cards .flip-card__back {
  transform: rotateY(180deg);
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.flip-card.is-open .flip-card__back { padding: 26px 26px 24px; max-height: none; }
.flip-card__eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight);
}
.flip-card__back-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
}
.flip-card__text { line-height: 1.5; color: rgba(255,255,255,0.92); }
.flip-card__example {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.1);
  font-size: 14px;
}
.spoiler-list--cards + .spoiler-counter { color: #6A7A72; }
.spoiler-list--cards + .spoiler-counter [data-role="counter"] { font-weight: 700; color: var(--color-text); }
@media (max-width: 600px) {
  .spoiler-list--cards { grid-template-columns: 1fr; gap: 14px; }
  .flip-card__inner { min-height: 300px; }
  .flip-card__num { font-size: 56px; }
}
/* Без анимации поворота: оборот просто сменяет лицо. */
@media (prefers-reduced-motion: reduce) {
  .flip-card__inner, .flip-card.is-open .flip-card__inner { transition: none; transform: none; }
  .spoiler-list--cards .flip-card__back { transform: none; visibility: hidden; }
  .flip-card.is-open .flip-card__back { visibility: visible; }
  .flip-card.is-open .flip-card__front { visibility: hidden; }
}

/* ============================================================
   S03b — тренажёр: порядок действий (drag-n-drop)
   ============================================================ */
.reorder-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.reorder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e4e7;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: grab;
  user-select: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.reorder-item__handle { font-size: 18px; color: #b7bdc9; }
.reorder-item__text { font-size: 15px; }
.reorder-item.is-dragging { opacity: 0.4; }
.reorder-item.is-drop-target { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.reorder-item.is-selected { border-color: var(--color-accent); background: rgba(0,105,178,0.06); }
.reorder-list.is-shake { animation: reorderShake 400ms ease; }
@keyframes reorderShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.reorder-feedback { margin-top: 14px; font-weight: 500; min-height: 22px; }
.reorder-feedback.is-correct { color: var(--color-success); }
.reorder-feedback.is-incorrect { color: var(--color-error); }

/* ============================================================
   S05b — слайдер сравнения до/после
   ============================================================ */
.compare-slider {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  margin: 20px auto 8px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  touch-action: none;
  cursor: ew-resize;
}
.compare-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.compare-panel--bad { background: linear-gradient(180deg, #fff5f5, #ffe3e3); }
.compare-panel--good { background: linear-gradient(180deg, #f2fbf4, #dcf5e2); clip-path: inset(0 0 0 50%); }
.compare-panel__badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  white-space: nowrap;
}
.compare-panel__badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.compare-panel--bad .compare-panel__badge { left: 25%; }
.compare-panel--good .compare-panel__badge { left: 75%; }
.compare-panel--bad .dot { background: var(--color-error); }
.compare-panel--good .dot { background: var(--color-success); }
.compare-shelf { width: 70%; display: flex; flex-direction: column; gap: 10px; }
.compare-shelf--tilted { transform: rotate(-9deg); }
.compare-shelf__row {
  height: 22px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #b9c2d0 0 18%, #8f9bb0 18% 36%, #c7d0dd 36% 54%, #9aa6ba 54% 72%, #b9c2d0 72% 90%, #8f9bb0 90% 100%);
}
.compare-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  pointer-events: none;
}
.compare-slider__handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-primary);
}
.compare-slider__labels {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  color: #777;
  padding: 0 4px;
}

/* ============================================================
   S05c — свайп-тренажёр (карточки)
   ============================================================ */
.swipe-deck {
  position: relative;
  width: min(320px, 86vw);
  aspect-ratio: 4 / 3;
  margin: 24px auto 4px;
}
.swipe-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f5f8fc);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  opacity: 0;
  pointer-events: none;
}
.swipe-card.is-current { opacity: 1; pointer-events: auto; }
.swipe-card:active { cursor: grabbing; }
.swipe-card__glare {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.65) 50%, transparent 60%);
  pointer-events: none;
}
.swipe-card__hint {
  position: absolute;
  top: 16px;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid;
  opacity: 0;
  transition: opacity 100ms ease;
  white-space: nowrap;
}
.swipe-card__hint--yes { right: 16px; color: var(--color-success); border-color: var(--color-success); transform: rotate(8deg); }
.swipe-card__hint--no { left: 16px; color: var(--color-error); border-color: var(--color-error); transform: rotate(-8deg); }
.swipe-card.is-swipe-yes .swipe-card__hint--yes { opacity: 1; }
.swipe-card.is-swipe-no .swipe-card__hint--no { opacity: 1; }
.swipe-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 18px; }
.swipe-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  background: #fff;
  transition: transform 100ms ease, opacity 200ms ease;
}
.swipe-btn:active:not(:disabled) { transform: scale(0.92); }
.swipe-btn:disabled { opacity: 0.4; cursor: default; }
.swipe-btn--no { color: var(--color-error); }
.swipe-btn--yes { color: var(--color-success); }
.swipe-progress { font-size: 13px; color: #777; min-width: 84px; text-align: center; }
.swipe-feedback { margin-top: 14px; font-weight: 700; min-height: 22px; text-align: center; color: var(--color-primary); }

/* ============================================================
   S03 — тренажёр интерфейса (hotspots)
   ============================================================ */
.hotspot-stage {
  position: relative;
  display: inline-block;
  margin-top: 20px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 100%;
}
.hotspot-stage img { max-width: 100%; }
.hotspot {
  position: absolute;
  border: 2px solid rgba(23,143,111,0.65);
  background: rgba(23,143,111,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease;
}
.hotspot:hover { background: rgba(23,143,111,0.28); }
.hotspot.is-flash-correct { animation: flashCorrect 500ms ease; }
.hotspot.is-flash-incorrect { animation: flashIncorrect 500ms ease; }
@keyframes flashCorrect {
  0% { background: var(--color-success); }
  100% { background: rgba(23,143,111,0.12); }
}
@keyframes flashIncorrect {
  0% { background: var(--color-error); }
  100% { background: rgba(23,143,111,0.12); }
}
.trainer-feedback {
  margin-top: 16px;
  font-weight: 500;
  min-height: 24px;
}
.trainer-feedback.is-correct { color: var(--color-success); }
.trainer-feedback.is-incorrect { color: var(--color-error); }
.trainer-steps { display: flex; gap: 8px; margin-top: 16px; }
.trainer-step-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #E1E4EC;
}
.trainer-step-dot.is-done { background: var(--color-success); }

.result-screen {
  text-align: center;
  padding: 60px 20px;
}
.result-screen__icon { font-size: 56px; margin-bottom: 16px; }

/* ============================================================
   S04 — слайдер сцен
   ============================================================ */
.scene-slider { margin-top: 24px; }
.scene-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 12px;
}
.scene-card {
  min-width: 240px;
  max-width: 240px;
  flex: 0 0 auto;
}
.scene-card__icon { font-size: 32px; margin-bottom: 10px; }
.scene-card h3 { font-size: 16px; margin-bottom: 8px; }
.scene-card p { font-size: 13px; color: #666; }
.scene-slider__nav { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.scene-slider__arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #D7DBE6;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-accent);
}
.scene-slider__arrow:hover { background: #EEF1F8; }
.scene-slider__dots { display: flex; gap: 8px; }
.scene-slider__dot { width: 8px; height: 8px; border-radius: 50%; background: #D7DBE6; }
.scene-slider__dot.is-active { background: var(--color-accent); }
.scene-slider__count { margin-left: auto; font-size: 14px; color: #777; }

/* ============================================================
   S06 — текстовый тренажёр (диалог)
   ============================================================ */
.dialogue {
  max-width: 640px;
  margin: 24px auto 0;
}
.dialogue__bubble {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  padding: 20px;
}
.dialogue__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dialogue__options { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.dialogue__option {
  text-align: left;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #D7DBE6;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  font-size: 15px;
  font-family: var(--font-main);
  transition: border-color 150ms ease, background 150ms ease;
}
.dialogue__option:hover { border-color: var(--color-accent); background: #F7F9FD; }
.dialogue__result {
  margin-top: 20px;
  padding: 24px;
  border-radius: var(--radius-card);
  color: #fff;
}
.dialogue__result.is-correct { background: var(--color-success); }
.dialogue__result.is-partial { background: var(--color-warn); }
.dialogue__result.is-incorrect { background: var(--color-error); }
.dialogue__result h3 { font-size: 18px; margin-bottom: 8px; }

/* ============================================================
   KPI cards (S07/S08/S11)
   ============================================================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.kpi-card { text-align: center; }
.kpi-card__icon { font-size: 28px; margin-bottom: 8px; }
.kpi-card__name { font-weight: 500; font-size: 14px; }
.kpi-card__dot { width: 10px; height: 10px; border-radius: 50%; margin: 8px auto 0; }
.kpi-card__desc { font-size: 12px; color: #777; margin-top: 8px; line-height: 1.4; }
.kpi-card__formula { font-size: 11px; color: var(--color-accent); margin-top: 8px; font-weight: 500; background: var(--color-bg-card); border-radius: 8px; padding: 4px 8px; }

/* ============================================================
   S08 — сопоставление KPI (matching)
   ============================================================ */
.match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 24px;
  position: relative;
}
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.match-lines line, .bucket-lines line { stroke-width: 2.5px; stroke-linecap: round; transition: opacity 400ms ease; }
.match-line-correct { stroke: var(--color-success); }
.match-line-wrong { stroke: var(--color-error); }
.match-col { display: flex; flex-direction: column; gap: 12px; }
.match-col-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #999; font-weight: 700; margin-bottom: 2px; }
.match-col:first-of-type .match-item:not(.is-matched):not(.is-selected):not(.is-flash-wrong) {
  border-left: 3px solid var(--color-accent);
}
.match-col:last-of-type .match-item:not(.is-matched):not(.is-selected):not(.is-flash-wrong) {
  background: var(--color-bg-card);
  border-left: 3px solid var(--color-purple);
}
.match-item {
  padding: 14px 18px;
  border-radius: 10px;
  border: 2px solid #D7DBE6;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
  user-select: none;
  position: relative;
  z-index: 1;
}
.match-item:hover { border-color: var(--color-accent); }
.match-item.is-selected { border-color: var(--color-accent); background: #EEF1F8; }
.match-item.is-matched { border-color: var(--color-success); background: #E7F8EE; cursor: default; }
.match-item.is-flash-wrong { animation: shakeWrong 400ms ease; border-color: var(--color-error); }
@media (max-width: 720px) { .match-lines { display: none; } }
@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.match-progress { margin-top: 16px; font-size: 14px; color: #777; }

/* ============================================================
   S09 / S10 — вопросы с ветками
   ============================================================ */
.quiz-options { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; max-width: 640px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #D7DBE6;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  transition: border-color 150ms ease, background 150ms ease;
}
.quiz-option:hover { border-color: var(--color-accent); background: #F7F9FD; }
.quiz-option input { accent-color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-option.is-wrong-pick { border-color: var(--color-error); background: #FCEBEC; animation: shakeWrong 400ms ease; }

.branch-result {
  max-width: 640px;
  margin: 32px auto 0;
  padding: 32px;
  border-radius: var(--radius-card);
  color: #fff;
  text-align: center;
}
.branch-result.is-correct { background: var(--color-success); }
.branch-result.is-incorrect { background: var(--color-error); }
.branch-result h3 { font-size: 22px; margin-bottom: 12px; }
.branch-result p { font-size: 15px; opacity: 0.95; }

/* ============================================================
   Раздел-эйбрау (используется вместо .plaque на экранах без сайдбара)
   ============================================================ */
.section-eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
  color: var(--color-accent);
  font-weight: 700;
}

/* ============================================================
   S01 — обзор программы
   ============================================================ */
.programme-list {
  max-width: 420px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  counter-reset: programme;
}
.programme-list li {
  counter-increment: programme;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #ECEDF3;
  font-size: 15px;
}
.programme-list li::before {
  content: counter(programme);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-card);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   S03-sort — сортировка по категориям
   ============================================================ */
.sort-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 520px;
  margin: 20px 0;
}
.sort-card {
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: opacity 200ms ease, transform 150ms ease;
  position: relative;
  overflow: hidden;
}
.sort-card .compare-shelf { width: 100%; }
.sort-card.is-selected { box-shadow: 0 0 0 2px var(--color-accent); transform: scale(0.98); }
.sort-card.is-sorted { pointer-events: none; opacity: 0.35; }
.sort-card.is-sorted-correct { box-shadow: 0 0 0 2px var(--color-success); opacity: 0.6; }
.sort-card.is-sorted-wrong { box-shadow: 0 0 0 2px var(--color-error); opacity: 0.6; }
.sort-zones { display: flex; gap: 12px; max-width: 520px; }
.sort-zone {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 100ms ease;
}
.sort-zone:active { transform: scale(0.97); }
.sort-zone--bad { border-color: var(--color-error); color: var(--color-error); }
.sort-zone--good { border-color: var(--color-success); color: var(--color-success); }
.sort-progress { margin-top: 14px; font-size: 14px; color: #777; }

/* ============================================================
   S05-mc / S05-text — общий фидбэк-блок
   ============================================================ */
.mc-feedback { margin-top: 16px; font-weight: 500; min-height: 22px; max-width: 640px; }
.mc-feedback.is-correct { color: var(--color-success); }
.mc-feedback.is-incorrect { color: var(--color-error); }
.text-answer {
  display: block;
  max-width: 240px;
  margin-top: 20px;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #D7DBE6;
  font-family: inherit;
}
.text-answer:focus { outline: none; border-color: var(--color-accent); }

/* ============================================================
   S06-reflect — самооценка
   ============================================================ */
.rating-row { display: flex; gap: 10px; max-width: 360px; margin-top: 24px; }
.rating-btn {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #D7DBE6;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
}
.rating-btn:hover { border-color: var(--color-accent); }
.rating-btn.is-selected { border-color: var(--color-accent); background: var(--color-accent); color: #fff; transform: scale(1.06); }
.rating-labels { display: flex; justify-content: space-between; max-width: 360px; margin-top: 8px; font-size: 12px; color: #777; }

/* ============================================================
   S11 — итоговый экран
   ============================================================ */
.s11 {
  background: var(--color-primary);
  color: #fff;
  min-height: 100vh;
  text-align: center;
  padding: 60px 24px 100px;
}
.s11__logo { height: 32px; margin: 0 auto 24px; }
.score-ring {
  width: 200px; height: 200px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(var(--color-success) calc(var(--score, 0) * 1%), rgba(255,255,255,0.15) 0);
}
.score-ring__inner {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring__value { font-size: 44px; font-weight: 700; }
.score-ring__label { font-size: 13px; opacity: 0.7; }
.s11__status { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.s11__status.is-passed { color: var(--color-success); }
.s11__status.is-failed { color: var(--color-warn); }
.score-table {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 24px;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
.score-table th, .score-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.score-table th { opacity: 0.7; font-weight: 500; }

.team-table-wrap { overflow-x: auto; margin-top: 20px; }
.team-table { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; font-size: 14px; }
.team-table th, .team-table td { padding: 12px 14px; border-bottom: 1px solid #ECEDF3; white-space: nowrap; }
.team-table th { color: #777; font-weight: 500; font-size: 13px; }
.team-table td:first-child, .team-table th:first-child { font-weight: 700; color: var(--color-text); }
.team-status--finished { color: var(--color-success); font-weight: 700; }
.team-status--started { color: var(--color-orange); font-weight: 700; }
.team-row { cursor: pointer; }
.team-row:hover { background: var(--color-bg-card); }
.team-row__expand { color: var(--color-accent); font-weight: 700; transition: transform 150ms ease; display: inline-block; }
.team-row.is-open .team-row__expand { transform: rotate(90deg); }
.team-detail-row.hidden { display: none; }
.team-detail-row td { padding: 0 14px 16px; border-bottom: 1px solid #ECEDF3; }
.team-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.team-detail-card {
  background: var(--color-bg-card);
  border-radius: 12px;
  padding: 12px 14px;
}
.team-detail-card__label { font-size: 12px; color: #777; margin: 0 0 4px; }
.team-detail-card__value { font-size: 16px; font-weight: 700; color: var(--color-text); }

/* Ячейка курса в сводной строке участника — статус + балл в две строки,
   чтобы оба курса были видны без разворачивания. */
.team-course-cell { display: flex; flex-direction: column; gap: 2px; }
.team-course-cell--empty { color: #BBB; }
.team-course-cell__score { font-size: 13px; color: #777; }
.team-detail-groups { display: flex; flex-direction: column; gap: 16px; }
.team-detail-group__title { font-size: 13px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }

.team-charts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.team-chart-card {
  flex: 1 1 260px;
  background: var(--color-bg-card);
  border-radius: 16px;
  padding: 20px;
}
.team-chart-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 16px; }
.team-donut-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.team-donut {
  width: 140px; height: 140px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#ECEDF3 0 100%);
}
.team-donut::after {
  content: "";
  position: absolute; inset: 20px;
  background: var(--color-bg-card);
  border-radius: 50%;
}
.team-donut__value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--color-text);
  z-index: 1;
}
.team-legend { display: flex; flex-direction: column; gap: 8px; }
.team-legend__row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }
.team-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.team-legend__count { margin-left: auto; opacity: 0.6; }

.team-bars { display: flex; flex-direction: column; gap: 12px; }
.team-bar-row { font-size: 13px; }
.team-bar-row__label { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--color-text); }
.team-bar-row__label b { font-weight: 700; }
.team-bar-track { height: 8px; border-radius: 4px; background: #ECEDF3; overflow: hidden; }
.team-bar-track__fill { height: 100%; border-radius: 4px; background: var(--color-accent); }
.team-bar-track__fill--low { background: var(--color-error); }
.team-bars__empty { font-size: 13px; color: #888; }

.s11__skills {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 24px;
  text-align: left;
}
.s11__skills-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.s11__skills-list li {
  padding: 6px 0 6px 24px;
  position: relative;
}
.s11__skills-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-cta);
  font-weight: 700;
}

.confetti-piece {
  position: fixed;
  top: -10px;
  width: 8px; height: 14px;
  z-index: 600;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0.4; }
}

/* ============================================================
   Курс 2 — bucket-assign (N ролей) и сравнение показателей
   ============================================================ */
.bucket-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  max-width: 640px;
  margin: 20px 0;
}
.bucket-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 200ms ease, transform 150ms ease;
}
.bucket-item.is-selected { box-shadow: 0 0 0 2px var(--color-accent); transform: scale(0.98); }
.bucket-item.is-sorted { pointer-events: none; opacity: 0.35; }
.bucket-item.is-sorted-correct { box-shadow: 0 0 0 2px var(--color-success); opacity: 0.6; }
.bucket-item.is-sorted-wrong { box-shadow: 0 0 0 2px var(--color-error); opacity: 0.6; }
.bucket-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 640px;
}
.bucket-zone {
  flex: 1;
  min-width: 130px;
  padding: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 100ms ease;
}
.bucket-zone:active { transform: scale(0.97); }
.bucket-zone.is-selected { background: var(--color-accent); color: #fff; }
.bucket-zone__emoji { margin-right: 6px; }
.bucket-match { position: relative; }
.bucket-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.bucket-deck, .bucket-zones { position: relative; z-index: 1; }
@media (max-width: 720px) { .bucket-lines { display: none; } }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  max-width: 640px;
  margin: 20px 0;
}
.stat-card { padding: 16px 18px; }
.stat-card h3 { font-size: 16px; margin-bottom: 8px; }
.stat-card p { font-size: 14px; color: #666; margin: 2px 0; }

/* ============================================================
   Utility
   ============================================================ */
.hidden { display: none !important; }
.locked-note { font-size: 13px; color: #999; margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .with-plaque { flex-direction: column; }
  .plaque { width: 100%; min-width: 0; padding: 24px; padding-top: calc(var(--header-height) + var(--progress-height) + var(--quiz-dots-height) + 20px); }
  .match-board { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  .screen-inner { padding: 20px 16px 96px; }
  .content-area { padding: 20px 16px 96px; }
  .app-header { padding: 0 10px; }
  .logo-ark { font-size: 17px; }
  .app-header__nav { gap: 6px; }
  .nav-btn { padding: 6px 10px; font-size: 12px; }
  .h1-title { font-size: 24px; }
  .h2-subtitle { font-size: 18px; }
  .profile-card { margin: 0 16px 24px; gap: 16px; }
  .courses-section { padding: 0 16px 56px; }
  .d00-header { padding: 20px 16px; }
  .course-grid { grid-template-columns: 1fr; }
  .score-ring { width: 160px; height: 160px; }
  .score-ring__inner { width: 128px; height: 128px; }
}

/* ============================================================
   Планшет/десктоп — курс должен выглядеть как родное приложение для
   каждого класса экрана, а не как отмасштабированный мобильный вид.

   Планшет (768–1159px): контент просто использует доступную ширину —
   .screen-inner (1120px) и остальные внутренние max-width уже были
   спроектированы с запасом под это, поэтому здесь достаточно снять
   мобильные брейкпоинты, а не городить отдельную вёрстку.

   Десктоп (1160px+): весь экран (шапка, прогресс-бар, контент, футер)
   ограничивается по ширине и центрируется на нейтральном фоне — это
   даёт чёткий "рабочий" вид приложения на большом экране вместо
   растянутого на весь монитор контента.
   ============================================================ */
@media (min-width: 1160px) {
  body { background: #FFFFFF; }
  #app {
    max-width: 1160px;
    margin: 0 auto;
    box-shadow: 0 30px 70px rgba(0,0,0,0.14);
    min-height: 100vh;
  }
  .progress-bar,
  .app-header,
  .quiz-dots,
  .screen-footer {
    left: 50%;
    right: auto;
    width: 1160px;
    transform: translateX(-50%);
  }
  .contact-widget { right: calc(50vw - 560px + 20px); }
}

/* touch devices: hotspot/dnd hover states become tap-friendly (handled via JS classes) */
.is-touch .hotspot:hover { background: rgba(23,143,111,0.12); }

/* ============================================================
   Переключатель оформления главного экрана — демонстрация
   альтернативных тем. Затрагивает только #screen-d00.
   ============================================================ */
.theme-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
}
.theme-switcher__caption {
  font-size: 12px;
  color: #8A8A8A;
  text-align: center;
  max-width: 420px;
  line-height: 1.4;
  margin: 0;
}
.theme-switcher__track {
  position: relative;
  display: flex;
  width: min(360px, 100%);
  background: #EDECE6;
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.theme-switcher__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: calc((100% - 8px) / 3);
  background: #178F6F;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
}
.theme-switcher__track[data-active-index="1"] .theme-switcher__thumb { transform: translateX(100%); }
.theme-switcher__track[data-active-index="2"] .theme-switcher__thumb { transform: translateX(200%); }
.theme-switcher__btn {
  position: relative;
  z-index: 1;
  flex: 1;
  background: transparent;
  border: none;
  color: #666;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 200ms ease;
}
.theme-switcher__btn.is-active { color: #fff; }

/* ---------------- Тема «Яркая» — индиго / лайм / розовый ---------------- */
#screen-d00[data-dashboard-theme="bold"] {
  --color-primary:   #241C7A;
  --color-accent:    #F2338A;
  --color-accent-hover: #D91F73;
  --color-cta:       #F2338A;
  --color-cta-hover: #D91F73;
  --color-text:      #1C1642;
  --color-bg-card:   #FAF7EF;
  --font-main:       'Unbounded', Arial, sans-serif;
  --radius-card:     24px;
  background: #4F3FF0;
  font-family: var(--font-main);
  padding-bottom: 32px;
}
#screen-d00[data-dashboard-theme="bold"] .h2-subtitle,
#screen-d00[data-dashboard-theme="bold"] .logo-ark,
#screen-d00[data-dashboard-theme="bold"] .d00-header__user,
#screen-d00[data-dashboard-theme="bold"] .theme-switcher__caption {
  color: #fff;
}
#screen-d00[data-dashboard-theme="bold"] .card {
  background: #FAF7EF;
  box-shadow: 0 6px 28px rgba(36,28,122,0.18);
}
#screen-d00[data-dashboard-theme="bold"] .profile-card__progress-summary,
#screen-d00[data-dashboard-theme="bold"] .profile-card__role-display,
#screen-d00[data-dashboard-theme="bold"] .course-card p {
  color: #1A1A1A;
  font-weight: 400;
}
/* Крупная, громкая типографика — под настроение референса */
#screen-d00[data-dashboard-theme="bold"] .logo-ark { font-size: 26px; }
#screen-d00[data-dashboard-theme="bold"] .h2-subtitle { font-size: 30px; font-weight: 700; }
#screen-d00[data-dashboard-theme="bold"] .profile-card__name { font-size: 26px; }
/* Заголовок уже встроен в обложку курса — не дублируем его текстом под фото */
#screen-d00[data-dashboard-theme="bold"] .course-card h3 { display: none; }
#screen-d00[data-dashboard-theme="bold"] .course-card p { font-size: 14px; line-height: 1.5; }
#screen-d00[data-dashboard-theme="bold"] .course-card__badge { font-size: 13px; padding: 6px 14px; }
#screen-d00[data-dashboard-theme="bold"] .btn:not(.btn--secondary) {
  background: #D6F23C;
  color: #1C1642;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 32px;
}
#screen-d00[data-dashboard-theme="bold"] .btn:not(.btn--secondary):hover:not(:disabled) {
  background: #C2DE28;
}
#screen-d00[data-dashboard-theme="bold"] .course-card--active .course-card__badge {
  background: #E7F7A8;
  color: #3D4A0A;
}
#screen-d00[data-dashboard-theme="bold"] .theme-switcher__thumb { background: #D6F23C; }
#screen-d00[data-dashboard-theme="bold"] .theme-switcher__btn.is-active { color: #1C1642; }
#screen-d00[data-dashboard-theme="bold"] #team-progress-row {
  margin-left: 40px;
  margin-right: 40px;
}
#screen-d00[data-dashboard-theme="bold"] #team-progress-btn {
  background: #D6F23C;
  border-color: #D6F23C;
  color: #1C1642;
  font-weight: 700;
  width: 100%;
}
#screen-d00[data-dashboard-theme="bold"] #team-progress-btn:hover:not(:disabled) {
  background: #C2DE28;
  border-color: #C2DE28;
}

/* ---------------- Тема «Мягкая» — пастельный фиолетовый ---------------- */
#screen-d00[data-dashboard-theme="soft"] {
  --color-primary:   #5949C4;
  --color-accent:    #8B7FE8;
  --color-accent-hover: #7566DD;
  --color-cta:       #8B7FE8;
  --color-cta-hover: #7566DD;
  --color-text:      #332C5C;
  --color-bg-card:   #FFFFFF;
  --font-main:       'Plus Jakarta Sans', Arial, sans-serif;
  --radius-card:     28px;
  background: #F4F2FC;
  font-family: var(--font-main);
  padding-bottom: 32px;
}
#screen-d00[data-dashboard-theme="soft"] .h2-subtitle {
  font-weight: 700;
}
/* Заголовок уже встроен в обложку курса — не дублируем его текстом под фото */
#screen-d00[data-dashboard-theme="soft"] .course-card h3 { display: none; }
#screen-d00[data-dashboard-theme="soft"] .card {
  background: #fff;
  box-shadow: 0 8px 30px rgba(89,73,196,0.12);
  border: 1px solid #EBE7FA;
}
#screen-d00[data-dashboard-theme="soft"] .profile-card__progress-summary,
#screen-d00[data-dashboard-theme="soft"] .profile-card__role-display,
#screen-d00[data-dashboard-theme="soft"] .course-card p {
  color: #756FA0;
}
#screen-d00[data-dashboard-theme="soft"] .course-card--active .course-card__badge {
  background: #EDEAFB;
  color: #5949C4;
}
#screen-d00[data-dashboard-theme="soft"] .theme-switcher__btn.is-active {
  background: #8B7FE8;
  border-color: #8B7FE8;
  color: #fff;
}
@media (max-width: 560px) {
  .theme-switcher { padding-top: 12px; }
  #screen-d00[data-dashboard-theme="bold"] #team-progress-row { margin-left: 16px; margin-right: 16px; }
}