/*
 * runtime.css — добавки поверх base.css (перенесённого style.css из
 * исходного демо), нужные новому дата-драйвенному рантайму.
 */

/* Слот лого — в исходном демо было только .logo-ark (текст), реального
   <img>-варианта не было (см. header.js). */
.app-header__logo-img {
  height: 26px;
  display: block;
}

/* ---------- Тёмная шапка (UI-REDESIGN 3.2) ---------- */
.app-header {
  background: var(--color-primary);
  backdrop-filter: none;
  border-bottom: none;
  color: #fff;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
}
.app-brand:focus-visible { outline: 2px solid var(--highlight); outline-offset: 4px; }
.app-brand .app-header__logo-img {
  height: 38px;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.app-brand__ark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.04em;
}
.app-brand__sep { width: 1px; height: 26px; background: rgba(255,255,255,0.3); }
.app-brand__academy {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.app-header .app-header__course {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.app-header .nav-btn { color: #fff; border-color: rgba(255,255,255,0.3); }
.app-header .nav-btn:hover { background: rgba(255,255,255,0.12); }
.app-header .course-progress-label { color: var(--highlight); }
.app-header .learner-badge { color: #fff; }
.app-header .learner-badge__switch { color: rgba(255,255,255,0.75); }
.app-header .learner-badge__admin { background: rgba(255,255,255,0.14); color: #fff; }
.app-header .learner-badge__admin:hover { background: rgba(255,255,255,0.24); }
@media (max-width: 600px) {
  .app-brand .app-header__logo-img { height: 28px; max-width: 110px; }
  .app-brand__ark { font-size: 20px; }
  .app-brand__sep, .app-brand__academy { display: none; }
  .app-header .app-header__course { margin-left: 10px; padding-left: 10px; font-size: 14px; }
}

/* Один экран монтируется за раз (не все экраны разом в DOM, как в
   исходном демо) — прогресс-бар/шапка остаются фиксированными, но нет
   необходимости в padding-top под quiz-dots, раз они пока не подключены. */
#screen-mount .screen {
  padding-top: calc(var(--header-height) + var(--progress-height));
}

/* Баннер предпросмотра черновика (main.js: renderPreviewBanner) — поверх
   всего, чтобы нельзя было спутать черновик с опубликованным курсом. */
.preview-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 700;
  padding: 10px 16px;
  text-align: center;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-orange);
}

/* Астронавты — exam mode (task 5a), independent of learner-picker styles. */
.has-exam .app-header__left { min-width: 0; flex: 1; overflow: hidden; }
.has-exam .logo-ark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-inner { max-width: 720px; width: 100%; margin: 0 auto; padding: 28px 20px 72px; box-sizing: border-box; }
.exam-inner .h1-title { overflow-wrap: anywhere; }
.exam-eyebrow { color: var(--color-primary); font-weight: 700; }
.exam-rules { padding-left: 22px; line-height: 1.6; list-style: disc; margin: 20px 0; }
.exam-rules li { margin-bottom: 12px; }
.exam-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin: 18px 0; }
.exam-timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.exam-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.exam-instruction { margin-bottom: 16px; }
.exam-fields .quiz-option { min-height: 48px; margin-bottom: 12px; overflow-wrap: anywhere; }
.exam-fields .quiz-option input { flex-shrink: 0; }
.exam-fields .gate-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.exam-answer-status { min-height: 24px; margin: 20px 0; line-height: 1.5; }
.exam-form [hidden] { display: none !important; }
.exam-form .btn, .exam-inner > .btn { min-height: 48px; max-width: 100%; white-space: normal; }
.exam-result-score { font-size: 48px; font-weight: 700; margin: 24px 0; }
.exam-result-back { margin-top: 28px; }
@media (max-width: 400px) {
  .exam-inner { padding-left: 16px; padding-right: 16px; }
  .exam-form .btn, .exam-inner > .btn { width: 100%; }
}

/* =====================================================}

   C1 — demo-grade идентификация ученика (learnerPicker.js, header.js)
   ============================================================ */

.learner-picker {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.learner-picker__card {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-align: center;
}

.learner-picker__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 8px;
}

.learner-picker__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.learner-picker__hint {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

.learner-picker__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.access-gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.access-gate__input {
  padding: 14px 16px;
  border: 1px solid #D7DBE6;
  border-radius: 12px;
  font-size: 16px;
  font-family: var(--font-main);
}

.access-gate__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Виден только при ?shell=... (презентация на встрече) — см. main.js. */
.shell-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
}

.learner-picker__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #D7DBE6;
  background: #fff;
  cursor: pointer;
  font-family: var(--font-main);
  text-align: left; /* <button> центрирует текст по умолчанию в UA-стилях браузера — .learner-picker__list{text-align:left} это не перебивает, т.к. наследование проигрывает собственному значению элемента */
  transition: border-color 150ms ease, background 150ms ease;
}

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

/* Круглые аватары (avatar.js) — фото ученика или инициалы, если фото нет. */
.avatar {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-card);
}

.avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  background: #e8f5ee;
}

.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--md { width: 44px; height: 44px; font-size: 15px; }
.avatar--lg { width: 64px; height: 64px; font-size: 20px; }

.learner-picker__item:hover {
  border-color: var(--color-accent);
  background: #F7F9FD;
}

.learner-picker__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.learner-picker__role {
  font-size: 12px;
  color: #777;
  line-height: 1.3;
}

/* Бейдж «вы вошли как …» справа в шапке */
.app-header__right {
  display: flex;
  align-items: center;
}

.learner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  min-width: 0;
  max-width: 100%;
}

.learner-badge__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.learner-badge__admin {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  white-space: nowrap;
}

.learner-badge__admin:hover { background: var(--soft-2); }

.learner-badge__switch {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--font-main);
  flex-shrink: 0;
}

/* ============================================================
   C3 — личный кабинет сотрудника (dashboard.js). Статусы карточек
   курса поверх готовой вёрстки .course-card из base.css (~строка 498).
   ============================================================ */

.course-card {
  cursor: pointer;
}

/* Цвета статусов — UI-REDESIGN п.1. */
.course-card__badge--not-started {
  background: #EEF0EE;
  color: #6A7A72;
}

.course-card__badge--in-progress {
  background: #FFF1D6;
  color: #9A6A12;
}

.course-card__badge--done {
  background: var(--soft);
  color: var(--color-accent);
}

.course-card__badge--failed {
  background: #FCE3DD;
  color: #D9573F;
}

/* ============================================================
   C6 — уведомления внутри платформы (dashboard.js: notificationsHtml)
   ============================================================ */

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.notification-item {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.notification-item--unread {
  border-left-color: var(--color-accent);
  background: var(--color-bg-card);
}

.notification-item__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}

.notification-item__body {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}
.save-status { position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 16px; background: #fff; border-top: 1px solid #ddd; font-size: 13px; z-index: 650; }
.save-status button { margin-left: 8px; min-height: 36px; cursor: pointer; }
button.notification-item { width: 100%; text-align: left; font: inherit; color: inherit; }


/* E11: course modules, navigation and save status. */
.module-home { max-width: 1000px; margin: 0 auto; padding: calc(var(--header-height) + 30px) 16px 40px; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 24px 0; }
.module-card { border: 1px solid #dbe5e1; border-radius: 16px; padding: 20px; background: var(--color-bg-card); display: grid; gap: 12px; overflow-wrap: anywhere; }
.module-card--locked { background: #f0f1f4; color: #555; }
.module-card button:disabled { opacity: .6; cursor: not-allowed; }
.module-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: calc(var(--header-height) + 18px) 16px 12px; }
.module-nav + div .screen { padding-top: 0 !important; min-height: auto; }
.module-kind { color: var(--color-primary); font-weight: 700; font-size: 13px; }
.module-complete { padding: 16px; margin-top: 16px; border-radius: 12px; background: #e8f5ee; color: var(--color-primary); }
.module-dashboard-link { display: inline-block; margin-top: 12px; color: var(--color-primary); }
.module-return { margin: 16px; }
.module-save-status { padding: 12px 16px; font-size: 14px; }
/* Заголовок курса — часто длинное авторское название, при переносе на
   несколько строк съедает экран телефона сильнее обычного H1 (аудит
   вёрстки 30.09.2026) — поэтому меньше общего мобильного H1 (480px ниже). */
@media (max-width: 480px) { .module-home .h1-title { font-size: 20px; line-height: 1.25; } .module-card .btn { width: 100%; } }

/* Persistent navigation belongs to the course, not to individual mechanics. */
[hidden] { display: none !important; }
.app-header__left { min-width: 0; flex: 1; }
.app-header .logo-ark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header__nav { flex-shrink: 0; margin-left: 12px; }
.course-menu { max-width: 900px; margin: auto; padding: calc(var(--header-height) + 30px) 20px 40px; display: grid; gap: 16px; }
.course-menu__item { padding: 16px; text-align: left; border: 1px solid #dbe5e1; border-radius: 12px; background: var(--color-bg-card); color: var(--color-text); font: inherit; cursor: pointer; }
.course-menu__item:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) {
  :root { --header-height: 108px; }
  .app-header { flex-wrap: wrap; padding: 10px 16px; gap: 6px; }
  .app-header__left { flex-basis: 100%; }
  .app-header .logo-ark { font-size: 16px; }
  .app-header__nav { margin-left: auto; }
  .nav-btn { min-height: 40px; }
  .screen-inner { padding: 24px 16px 32px; }
}

/* Employee home: assigned learning, reference materials, results and messages. */
.learner-home { max-width: 1120px; margin: auto; padding: calc(var(--header-height) + 32px) 24px 48px; }
.learner-home__welcome { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.learner-home h1 { color: var(--color-primary); font-size: clamp(24px, 4vw, 34px); }
.learner-level { display: grid; gap: 4px; background: #e8f5ee; padding: 16px 24px; border-radius: 16px; }
.learner-level strong { color: var(--color-primary); font-size: 24px; }
.learner-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.learner-tabs button { padding: 12px 16px; border: 1px solid #dbe5e1; border-radius: 24px; background: white; color: var(--color-primary); font-size: 14px; cursor: pointer; }
.learner-tabs button[aria-pressed="true"] { background: var(--color-primary); color: white; }
.next-step { padding: 20px; border: 1px solid #bddace; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; background: #f1f8f4; }
.next-step h2 { font-size: 20px; margin: 6px 0; }
.course-description { margin-bottom: 12px; }
.learner-panel .course-card { min-width: 0; overflow-wrap: anywhere; }
.learner-panel .course-card__cover-wrap { width: 100%; height: 150px; border-radius: 12px; margin-bottom: 12px; }
.learner-panel progress { accent-color: var(--color-accent); width: 100%; margin: 8px 0 16px; }
.level-rules { margin-bottom: 24px; font-size: 14px; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 16px; }
.resource-card { display: grid; gap: 12px; border: 1px solid #dbe5e1; border-radius: 16px; padding: 20px; background: var(--color-bg-card); overflow-wrap: anywhere; }
.resource-card__badge { justify-self: start; padding: 6px 10px; border-radius: 10px; background: var(--soft); color: var(--color-accent); font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.resource-card__badge--presentation { background: #FDE8DC; color: #B4532A; }
.resource-card__badge--pdf { background: #FCE3DD; color: #D9573F; }
.resource-card__badge--document { background: #E3ECFB; color: #2F5FB8; }
.resource-card__badge--spreadsheet { background: #E1F2E6; color: #2C7A45; }
.resource-card__badge--video { background: #EFE6FA; color: #6B3FA8; }
@media (max-width:600px) { .learner-home { padding-left:16px; padding-right:16px; } .learner-level { width:100%; } .learner-tabs { display:grid; grid-template-columns:1fr 1fr; } .learner-tabs button { padding:12px 6px; } }

/* ============================================================
   B4 — рейтинг демо-группы + достижения участника (dashboard.js: team())
   ============================================================ */
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.team-row { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.team-row--you { border: 1px solid var(--color-accent); }
.team-row__summary { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.team-row__name { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
.team-row__name small { font-weight: 400; color: #777; }
.team-row__stats { text-align: right; flex-shrink: 0; }
.team-row__stats strong { display: block; color: var(--color-primary); }
.team-row__stats span { font-size: 13px; color: #777; }
.team-row__achievements { list-style: none; margin: 0; padding: 0 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.team-row__achievements li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; padding-top: 6px; border-top: 1px solid #ECEDF3; }

/* Mobile navigation keeps learning content above the fold. */
.learner-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.learner-identity h1 { margin:4px 0; }
.learner-tabs button { display:flex; align-items:center; justify-content:center; gap:8px; position:relative; }
.learner-tabs svg { width:22px; height:22px; flex-shrink:0; }
.tab-badge { border-radius:20px; background:var(--color-accent); color:white; min-width:18px; padding:2px; font-size:10px; }
.team-row__name { flex:1; min-width:0; overflow-wrap:anywhere; }
.course-progress-label { font-size:13px; font-weight:700; color:var(--color-primary); margin-left:auto; }
.quiz-option input[type="checkbox"], .quiz-option input[type="radio"] { appearance:none; -webkit-appearance:none; width:24px; height:24px; border:2px solid #708a82; border-radius:7px; display:grid; place-content:center; background:white; cursor:pointer; }
.quiz-option input[type="radio"] { border-radius:50%; }
.quiz-option input:checked { border-color:var(--color-accent); background:var(--color-accent); }
.quiz-option input:checked::after { content:""; width:10px; height:6px; border:solid white; border-width:0 0 2px 2px; transform:translateY(-1px) rotate(-45deg); }
.quiz-option input[type="radio"]:checked::after { width:10px; height:10px; border:0; border-radius:50%; background:white; transform:none; }
.quiz-option:has(input:checked) { border-color:var(--color-accent); box-shadow:inset 0 0 0 1px var(--color-accent); }
.quiz-option input:focus-visible, .learner-tabs button:focus-visible { outline:3px solid var(--color-primary); outline-offset:4px; }
.quiz-option input:disabled { cursor:default; opacity:.65; }
@media (max-width:600px) {
 .learner-home { padding-top:calc(var(--header-height) + 16px); padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
 .learner-home__welcome { gap:12px; margin-bottom:16px; }
 .learner-home h1 { font-size:21px; }
 .learner-level { padding:12px 16px; }
 .learner-level strong { font-size:20px; }
 .learner-tabs { position:fixed; bottom:0; left:0; right:0; z-index:600; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; margin:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:white; border-top:1px solid #dbe5e1; box-shadow:0 -4px 20px #123b3210; }
 .learner-tabs button { flex-direction:column; border:0; border-radius:12px; font-size:10px; line-height:1.2; gap:4px; padding:8px 2px; min-height:56px; min-width:0; background:transparent; }
 .learner-tabs button[aria-pressed="true"] { background:#e8f5ee; color:var(--color-primary); font-weight:700; }
 .learner-tabs button span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .learner-tabs svg { width:20px; height:20px; }
 .tab-badge { position:absolute; right:10px; top:2px; }
 .team-row__summary { gap:10px; padding:12px; flex-wrap:wrap; }
 .team-row__stats { margin-left:auto; }
}
@media (forced-colors:active) { .quiz-option input[type="checkbox"],.quiz-option input[type="radio"] { appearance:auto; } }

.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:600px) {
 .app-header__left, .has-exam .app-header__left { flex:1 1 0; }
 .app-header__right { max-width:40%; }
 .app-header__nav { flex-basis:100%; width:100%; margin:0; }
 .course-progress-label { margin-left:auto; }
}

/* ============================================================
   UI-REDESIGN 3.4 — кабинет сотрудника: сайдбар разделов (≥1024),
   сегмент сверху (планшет), нижняя панель (телефон — см. выше).
   Разметка dashboard.js не менялась — раскладка CSS-гридом.
   ============================================================ */
.learner-home {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "welcome" "tabs" "panel";
  align-content: start;
}
.learner-home__welcome { grid-area: welcome; }
.learner-tabs { grid-area: tabs; }
.learner-panel { grid-area: panel; min-width: 0; }

/* Приветствие */
.learner-identity p { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); }
.learner-home h1 { color: var(--color-text); font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.02; }
.learner-level { background: #fff; box-shadow: var(--shadow-card); border-radius: 22px; padding: 18px 24px; min-width: 220px; }
.learner-level strong { font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: var(--color-primary); text-transform: uppercase; }
.learner-level span { font-weight: 600; color: var(--color-accent); }
.learner-level small { color: #6A7A72; }

/* Планшет: разделы — pill-сегмент */
.learner-tabs { gap: 4px; padding: 4px; background: #fff; box-shadow: var(--shadow-card); border-radius: 999px; justify-self: start; max-width: 100%; overflow-x: auto; }
.learner-tabs button { border: 0; border-radius: 999px; min-height: 42px; padding: 8px 16px; white-space: nowrap; color: var(--color-text); }
.learner-tabs button[aria-pressed="true"] { background: var(--color-accent); color: #fff; }

/* «Следующий шаг» — тёмная hero-карточка (как «Next best mission» в демо) */
.next-step {
  position: relative;
  overflow: hidden;
  padding: 34px 36px;
  border: 0;
  border-radius: 28px;
  background: var(--color-primary);
  color: #fff;
  align-items: flex-end;
}
.next-step::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -110px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.next-step > div { position: relative; z-index: 1; max-width: 720px; }
.next-step span { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--highlight); }
.next-step h2 { margin: 10px 0 8px; color: #fff; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; }
.next-step p { color: rgba(255,255,255,0.8); }
.next-step .btn { position: relative; z-index: 1; background: var(--highlight); color: #13221B; }
.next-step .btn:hover:not(:disabled) { background: #B5E04F; }

/* Карточки курсов — сетка */
.learner-panel .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.learner-panel .course-card { border-radius: 22px; }

/* Команда — строки в стиле лиги */
.team-row { box-shadow: var(--shadow-card); border-radius: 16px; }
.team-row--you { border: 0; background: var(--soft); }
.team-row__stats strong { font-family: var(--font-heading); font-size: 18px; }

/* Компьютер: белый сайдбар слева на всю высоту, как в админке */
@media (min-width: 1024px) {
  .learner-home {
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas: "tabs welcome" "tabs panel";
    column-gap: 40px;
    padding: var(--header-height) 44px 48px 0;
  }
  .learner-tabs {
    position: sticky;
    top: calc(var(--header-height) + var(--progress-height));
    align-self: start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    height: calc(100vh - var(--header-height) - var(--progress-height));
    margin: 0;
    padding: 24px 16px;
    overflow: visible;
    background: #fff;
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .learner-tabs button {
    justify-content: flex-start;
    gap: 14px;
    min-height: 50px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 16px;
    color: var(--color-text);
    background: transparent;
  }
  .learner-tabs button:hover { background: var(--color-bg-card); }
  .learner-tabs button[aria-pressed="true"] { background: var(--soft); color: var(--color-accent); font-weight: 700; }
  .learner-tabs .tab-badge { margin-left: auto; padding: 2px 8px; }
  .learner-home__welcome { margin: 34px 0 24px; }
}

@media (max-width: 600px) {
  .next-step { padding: 24px 20px; border-radius: 22px; }
  .next-step .btn { width: 100%; }
  .learner-tabs { justify-self: stretch; border-radius: 0; }
  .learner-tabs button[aria-pressed="true"] { background: var(--soft); color: var(--color-accent); }
}

/* Весь экран на всю ширину (UI-REDESIGN 3.5), как в демо и админке —
   снимаем «колонку 1160px с тенью» из исходного демо (base.css). Ширину
   контента экранов курса ограничивают сами экраны (.screen-inner). */
@media (min-width: 1160px) {
  body { background: var(--color-bg); }
  #app { max-width: none; margin: 0; box-shadow: none; }
  .progress-bar,
  .app-header,
  .quiz-dots,
  .screen-footer { left: 0; right: 0; width: auto; transform: none; }
  .contact-widget { right: 20px; }
}

/* Телефон: имя сотрудника уже есть в приветствии — в шапке оставляем
   «сменить» и «Админка», чтобы они не обрезались. */
@media (max-width: 600px) {
  .app-header .learner-badge__name { display: none; }
  .app-header__right { max-width: none; }
}

/* ============================================================
   UI-REDESIGN 3.5 — колонка шагов курса (courseSteps.js), ≥1024px.
   На узких экранах скрыта — остаётся кнопка «Меню».
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.course-steps { display: none; }
@media (min-width: 1024px) {
  .course-steps {
    display: block;
    position: fixed;
    top: calc(var(--header-height) + var(--progress-height));
    left: 0;
    bottom: 0;
    z-index: 300;
    width: 320px;
    overflow-y: auto;
    padding: 26px 18px 32px;
    background: #fff;
    border-right: 1px solid var(--line);
  }
  #app.has-steps #screen-mount { margin-left: 320px; }
  #app.has-steps .quiz-dots,
  #app.has-steps .screen-footer { left: 320px; }
  .course-steps__title {
    margin: 0 8px 18px;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--color-text);
  }
  .course-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .course-steps__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
  }
  .course-steps__item:hover:not(:disabled) { background: var(--color-bg-card); }
  .course-steps__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .course-steps__item:disabled { opacity: .45; cursor: not-allowed; }
  .course-steps__item.is-current { background: var(--soft); font-weight: 700; }
  .course-steps__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-bg-card);
    color: #6A7A72;
  }
  .course-steps__item.is-current .course-steps__icon { background: var(--color-primary); color: #fff; }
  .course-steps__item.is-done:not(.is-current) .course-steps__icon { background: var(--soft); color: var(--color-accent); }
  .course-steps__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .course-steps__name { min-width: 0; overflow-wrap: anywhere; }
}

/* Вне курса (код доступа, выбор роли/профиля, кабинет) нет прогресса и
   кнопок курса: прогресс-бар скрыт, шапка в одну строку и на телефоне. */
#app:not(.in-course) { --progress-height: 0px; }
#app:not(.in-course) .progress-bar { display: none; }
@media (max-width: 600px) {
  #app:not(.in-course) { --header-height: 64px; }
  #app:not(.in-course) .app-header { flex-wrap: nowrap; padding: 0 16px; }
  #app:not(.in-course) .app-header__left { flex-basis: auto; }
}

/* Шапка курса на средних ширинах (запрос 01.10.2026: имя наезжало на
   «Академию»): правая часть сжимается, имя — многоточием; лишнее прячем
   по мере сужения. Ничего не накладывается, всё в одну строку. */
.app-header__left { overflow: hidden; }
.app-header__right { min-width: 0; flex-shrink: 1; margin-left: 12px; }
.app-header .learner-badge { flex-wrap: nowrap; }
.app-header .learner-badge__switch,
.app-header .learner-badge__admin { flex-shrink: 0; }
@media (max-width: 1200px) {
  #app.in-course .app-brand__sep,
  #app.in-course .app-brand__academy { display: none; }
}
@media (max-width: 960px) {
  #app.in-course .learner-badge__name { display: none; }
}

/* ============================================================
   Заголовок-вопрос и «Данные к вопросу» (renderScreen.js)
   ============================================================ */
.h1-title--question {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  max-width: 900px;
}
.data-card {
  margin: 18px 0 22px;
  padding: 20px 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
  max-width: 900px;
}
.data-card__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
}
.data-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 15px; }
.data-table thead th { padding: 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6A7A72; text-align: left; }
.data-table tbody th, .data-table td { height: 60px; padding: 8px 14px; background: var(--color-bg-card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table tbody th { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; font-weight: 700; color: var(--color-text); }
.data-table td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; }
.data-table__value { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-text); }
.data-table__bar { display: block; width: 100%; max-width: 120px; height: 6px; margin-top: 6px; border-radius: 999px; background: #E1E8E4; overflow: hidden; }
.data-table__bar i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }
/* Телефон: каждая строка — карточка, показатели сеткой с подписями. */
@media (max-width: 600px) {
  .data-card { padding: 14px; border-radius: 18px; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody { display: block; }
  .data-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--color-bg-card); }
  .data-table tbody th, .data-table td, .data-table td:last-child { display: block; height: auto; padding: 0; border: 0; border-radius: 0; background: none; }
  .data-table tbody th { grid-column: 1 / -1; font-size: 16px; }
  .data-table td::before { content: attr(data-col); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6A7A72; }
}

/* ============================================================
   UI-REDESIGN 3.6 — квизы: крупные карточки-ответы, 2 колонки на
   компьютере, состояния, фидбек-плашки. Только CSS — разметка и
   обработчики шаблонов (branchQuiz, infoQuiz, multipleChoice,
   infoMultipleChoice) не менялись.
   ============================================================ */
.quiz-options { max-width: 900px; gap: 12px; }
@media (min-width: 768px) {
  .quiz-options { display: grid; grid-template-columns: 1fr 1fr; }
}
.quiz-option {
  min-height: 72px;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}
.quiz-option:hover { border-color: var(--color-accent); background: #fff; }
.quiz-option:has(input:checked) { border-color: var(--color-accent); background: var(--soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.quiz-option:has(input:disabled) { cursor: default; }
.quiz-option.is-wrong-pick { border-color: #D9573F; background: #FCE3DD; box-shadow: inset 0 0 0 1px #D9573F; }

/* Фидбек — плашка с иконкой, а не мелкий цветной текст */
.mc-feedback:not(.hidden):not(:empty),
.reorder-feedback:not(:empty),
.trainer-feedback:not(:empty) {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 900px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 600;
}
.mc-feedback.is-correct, .reorder-feedback.is-correct, .trainer-feedback.is-correct { background: var(--soft); color: var(--color-accent); }
.mc-feedback.is-incorrect, .reorder-feedback.is-incorrect, .trainer-feedback.is-incorrect { background: #FCE3DD; color: #B4432F; }
.mc-feedback.is-correct::before, .reorder-feedback.is-correct::before, .trainer-feedback.is-correct::before,
.mc-feedback.is-incorrect::before, .reorder-feedback.is-incorrect::before, .trainer-feedback.is-incorrect::before {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.mc-feedback.is-correct::before, .reorder-feedback.is-correct::before, .trainer-feedback.is-correct::before { content: "✓"; background: var(--color-accent); }
.mc-feedback.is-incorrect::before, .reorder-feedback.is-incorrect::before, .trainer-feedback.is-incorrect::before { content: "!"; background: #D9573F; }

/* Пояснение после ответа — мягкая карточка */
.screen-inner [data-role="explain"]:not(.hidden) {
  max-width: 900px;
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--soft);
  border-left: 4px solid var(--color-accent);
  line-height: 1.55;
}
.screen-inner [data-role="explain"] .btn { margin-top: 16px; }

/* Итог вопроса с ветками: «верно» — тёмная плашка, «не совсем» — красная */
.branch-result { max-width: 900px; margin: 24px 0 0; padding: 26px 28px; border-radius: 22px; text-align: left; }
.branch-result.is-correct { background: var(--color-primary); }
.branch-result.is-correct h3 { color: var(--highlight); }
.branch-result.is-incorrect { background: #B4432F; }
.branch-result h3 { font-size: 26px; text-transform: uppercase; }
/* Диалоги (branchScenario, textTrainer) — длинные реплики, одна колонка. */
@media (min-width: 768px) {
  .quiz-options[data-role="options"] { grid-template-columns: 1fr; }
}
/* Кнопки внутри итоговой плашки: на тёмной — лайм, на красной — белая. */
.branch-result .btn:not(.btn--secondary) { background: #fff; color: var(--color-text); }
.branch-result.is-correct .btn:not(.btn--secondary) { background: var(--highlight); color: #13221B; }
.branch-result .btn:not(.btn--secondary):hover:not(:disabled) { filter: brightness(0.95); }

/* ============================================================
   UI-REDESIGN 3.6 — drag-механики: genericMatching, bucketAssign,
   sortDeck, reorder. Только CSS: состояния (is-selected, is-matched,
   is-sorted-*, is-drop-target…) ставят шаблоны, transform из JS у этих
   механик не используется. Линии сопоставления (lineConnector.js)
   меряются после отрисовки — анимаций сдвига нет.
   ============================================================ */
.match-board { max-width: 900px; gap: 48px; }
.match-col-label { color: #6A7A72; letter-spacing: .1em; }
.match-item, .bucket-item, .sort-card {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}
.match-col:first-of-type .match-item:not(.is-matched):not(.is-selected):not(.is-flash-wrong) { border-left: 4px solid var(--color-accent); }
.match-col:last-of-type .match-item:not(.is-matched):not(.is-selected):not(.is-flash-wrong) { background: #fff; border-left: 4px solid var(--gold); }
.match-item:hover, .bucket-item:hover, .sort-card:hover { border-color: var(--color-accent); }
.match-item.is-selected, .bucket-item.is-selected, .sort-card.is-selected {
  border-color: var(--color-accent);
  background: var(--soft);
  box-shadow: 0 0 0 3px var(--soft-2);
  transform: translateY(-2px);
}
.match-item.is-matched { border-color: transparent; background: var(--soft); color: var(--color-accent); }
.match-item.is-flash-wrong { border-color: #D9573F; background: #FCE3DD; }
.match-lines line, .bucket-lines line { stroke-width: 3px; }
.match-line-correct { stroke: var(--color-accent); }
.match-line-wrong { stroke: #D9573F; }
.bucket-item.is-sorted-correct, .sort-card.is-sorted-correct { box-shadow: 0 0 0 2px var(--color-accent); background: var(--soft); opacity: .75; }
.bucket-item.is-sorted-wrong, .sort-card.is-sorted-wrong { box-shadow: 0 0 0 2px #D9573F; background: #FCE3DD; opacity: .75; }

/* Зоны — пунктирные слоты; выбранная — сплошная акцентом */
.bucket-zones, .sort-zones { max-width: 900px; gap: 14px; }
.bucket-zone, .sort-zone {
  min-height: 96px;
  padding: 16px;
  border: 2px dashed var(--soft-2);
  border-radius: 18px;
  background: #fff;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: border-color 150ms ease, background 150ms ease, transform 100ms ease;
}
.bucket-zone:hover, .sort-zone:hover { border-color: var(--color-accent); background: var(--soft); }
.bucket-zone.is-selected { border-style: solid; border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.sort-zone--good { border-color: var(--soft-2); color: var(--color-accent); }
.sort-zone--bad { border-color: #F2C3B8; color: #B4432F; }
.sort-zone--bad:hover { border-color: #D9573F; background: #FCE3DD; }
.match-progress, .sort-progress, .bucket-progress { color: #6A7A72; }

/* Порядок действий — номер-квадрат слева (CSS-счётчик: пересчитывается
   при перестановке), ручка ⋮⋮, перетаскиваемый — с тенью */
.reorder-list { max-width: 900px; counter-reset: reorder-step; }
.reorder-item {
  counter-increment: reorder-step;
  min-height: 64px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.reorder-item::before {
  content: counter(reorder-step);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
}
.reorder-item__text { font-size: 16px; font-weight: 600; }
.reorder-item__handle { order: 3; margin-left: auto; color: #9AA7A0; }
.reorder-item.is-selected { border-color: var(--color-accent); background: var(--soft); }
.reorder-item.is-drop-target { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--soft-2); }
.reorder-item.is-dragging { opacity: .5; box-shadow: 0 20px 40px rgba(15,31,24,0.18); }

@media (prefers-reduced-motion: reduce) {
  .match-item.is-selected, .bucket-item.is-selected, .sort-card.is-selected { transform: none; }
}
.bucket-zone, .sort-zone { display: grid; place-items: center; text-align: center; }
.bucket-item.is-sorted, .sort-card.is-sorted { border-style: dashed; }

/* ============================================================
   UI-REDESIGN 3.6 — свайпы, hotspot, сравнение, карусель, самооценка,
   текстовый ответ. Только CSS. swipeDeck.js двигает inline-transform
   только текущую карточку — стопку рисуем на СЛЕДУЮЩИХ (они не
   трансформируются JS), текущая всегда сверху.
   ============================================================ */
.swipe-deck { width: min(420px, 88vw); aspect-ratio: 4 / 3; margin: 28px auto 18px; }
.swipe-card {
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--line), 0 18px 40px rgba(15,31,24,0.08);
  padding: 28px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--color-text);
}
.swipe-card.is-current { z-index: 3; }
.swipe-card.is-current + .swipe-card { opacity: 1; z-index: 2; transform: translateY(10px) scale(0.96); box-shadow: 0 0 0 1px var(--line); }
.swipe-card.is-current + .swipe-card + .swipe-card { opacity: 0.6; z-index: 1; transform: translateY(20px) scale(0.92); box-shadow: 0 0 0 1px var(--line); }
.swipe-card.is-current + .swipe-card > *,
.swipe-card.is-current + .swipe-card + .swipe-card > * { visibility: hidden; }
.swipe-card__hint {
  top: 20px;
  padding: 6px 14px;
  border-width: 3px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #fff;
}
.swipe-card__hint--yes { color: var(--color-accent); border-color: var(--color-accent); transform: rotate(12deg); }
.swipe-card__hint--no { color: #D9573F; border-color: #D9573F; transform: rotate(-12deg); }
.swipe-progress { color: #6A7A72; font-weight: 600; }
[data-role="no"].btn--secondary { background: #FCE3DD; color: #B4432F; }
[data-role="no"].btn--secondary:hover:not(:disabled) { background: #F9D2C8; }

/* Hotspot — скруглённые зоны акцентом, найденные — сплошные */
.hotspot-stage { border-radius: 22px; box-shadow: var(--shadow-card); }
.hotspot { border-color: rgba(23,143,111,0.7); border-radius: 12px; }
.hotspot.is-done { background: rgba(23,143,111,0.22); border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(255,255,255,0.7); }

/* Сравнение «до / после» — ручка-кружок акцентом, бейджи-чипы */
.compare-slider { border-radius: 22px; }
.compare-slider__handle { width: 3px; }
.compare-slider__handle-icon { width: 48px; height: 48px; background: var(--color-accent); color: #fff; box-shadow: 0 6px 18px rgba(15,31,24,0.25); }
.compare-panel__badge { border-radius: 999px; font-weight: 700; }

/* Карусель — карточки-сцены радиус 22, точки-пилюли */
.scene-card { border-radius: 22px; padding: 22px; min-width: 260px; max-width: 280px; }
.scene-card h3 { font-size: 18px; }
.scene-card p { font-size: 14px; color: #6A7A72; line-height: 1.5; }
.scene-slider__arrow { width: 46px; height: 46px; border-color: var(--line); }
.scene-slider__arrow:hover { background: var(--soft); }
.scene-slider__dot { width: 8px; height: 8px; border-radius: 999px; background: #D7DED9; transition: width 200ms ease; }
.scene-slider__dot.is-active { width: 24px; background: var(--color-accent); }
.scene-slider__count { color: #6A7A72; font-weight: 600; }

/* Самооценка — кружки 56px, подписи шкалы по краям */
.rating-row { max-width: none; gap: 12px; flex-wrap: wrap; }
.rating-btn { flex: 0 0 56px; width: 56px; height: 56px; border: 2px solid var(--line); font-family: var(--font-heading); font-size: 20px; }
.rating-btn.is-selected { transform: scale(1.08); box-shadow: 0 6px 16px rgba(15,31,24,0.18); }
.rating-labels { max-width: calc(56px * 5 + 12px * 4); color: #6A7A72; font-weight: 600; }

/* Текстовый ответ — поле 56px, радиус 14, кольцо фокуса */
.text-answer { max-width: 480px; width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; font-size: 17px; background: #fff; }
.text-answer:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--soft); }

@media (prefers-reduced-motion: reduce) {
  .scene-slider__dot { transition: none; }
}
/* Текстовый ответ в механиках использует .gate-input (общий с кодом доступа). */
.screen-inner .gate-input { display: block; max-width: 480px; width: 100%; min-height: 56px; margin-top: 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; font-size: 17px; background: #fff; }
.screen-inner .gate-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--soft); }
/* Штампы «Да / Нет» на свайп-карточке: в разметке (swipeDeck.js) только
   модификаторы без базового .swipe-card__hint — поэтому они стояли в
   тексте. Даём базовые стили по модификаторам: штамп в углу, виден при
   свайпе в свою сторону (is-swipe-yes / is-swipe-no ставит JS). */
.swipe-card__hint--yes,
.swipe-card__hint--no {
  position: absolute;
  top: 20px;
  padding: 6px 14px;
  border: 3px solid;
  border-radius: 10px;
  background: #fff;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 100ms ease;
  pointer-events: none;
}

/* ============================================================
   UI-REDESIGN 3.6 — диалоги (branchScenario, textTrainer) как чат:
   реплика собеседника — пузырь, варианты — карточки с буквами A/B/C
   (CSS-счётчик), итог — мягкая плашка цвета исхода. Только CSS.
   ============================================================ */
.dialogue { max-width: 900px; margin: 24px 0 0; }
.dialogue__bubble {
  position: relative;
  max-width: 760px;
  padding: 18px 22px;
  border-radius: 22px 22px 22px 6px;
  background: #F1EDE2;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.5;
}
.dialogue .quiz-options[data-role="options"] { counter-reset: dialogue-option; margin-top: 18px; }
.dialogue__option {
  counter-increment: dialogue-option;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
}
.dialogue__option::before {
  content: counter(dialogue-option, upper-alpha);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 800;
}
.dialogue__option:hover { border-color: var(--color-accent); background: #fff; box-shadow: 0 0 0 3px var(--soft); }
.dialogue__option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dialogue__result { margin-top: 18px; padding: 20px 22px; border-radius: 18px; color: var(--color-text); line-height: 1.5; }
.dialogue__result.is-correct { background: var(--soft); border-left: 4px solid var(--color-accent); }
.dialogue__result.is-partial { background: #FFF1D6; border-left: 4px solid #E0A63A; }
.dialogue__result.is-incorrect { background: #FCE3DD; border-left: 4px solid #D9573F; }
.dialogue__result .btn--secondary { background: var(--soft); color: var(--color-cta); border-color: transparent; }
.dialogue__option { align-items: center; }

/* ============================================================
   UI-REDESIGN 3.6b — итоговый экран «Курс пройден» (finishScreen.js)
   ============================================================ */
.finish__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.finish__hero {
  position: relative;
  overflow: hidden;
  padding: 40px 40px 36px;
  border-radius: 30px;
  background: var(--color-primary);
  color: #fff;
}
.finish__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--highlight); }
.finish__title { margin: 10px 0 4px; color: #fff; font-size: clamp(40px, 5vw, 64px); line-height: .95; }
.finish__score { font-family: var(--font-heading); font-size: clamp(64px, 9vw, 120px); font-weight: 800; line-height: 1; color: var(--highlight); }
.finish__bar { height: 12px; margin: 22px 0 18px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; max-width: 520px; }
.finish__bar i { display: block; height: 100%; border-radius: 999px; background: var(--highlight); }
.finish__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.finish__chip { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 14px; font-weight: 600; }
.finish__medal {
  position: absolute;
  top: 32px;
  right: 32px;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#E8C86E, #C9A14A, #F3DB8F, #B98D35, #E8C86E);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  animation: finishPop .6s cubic-bezier(.2,1.4,.4,1) both;
}
.finish__medal span {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--highlight);
  font-size: 48px;
  font-weight: 800;
}
@keyframes finishPop { from { transform: scale(.4); opacity: 0; } }
.finish__side { display: grid; gap: 16px; }
.finish__card { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); }
.finish__card-eyebrow { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6A7A72; }
.finish__row { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.finish__row b { font-family: var(--font-heading); font-size: 18px; }
.finish__meter { height: 10px; margin-top: 8px; border-radius: 999px; background: #E1E8E4; overflow: hidden; }
.finish__meter i { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.finish__mistakes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.finish__mistakes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.finish__mistakes li:last-child { border-bottom: 0; }
.finish__mistakes .btn { min-height: 38px; padding: 6px 16px; font-size: 14px; flex-shrink: 0; }
.finish__empty, .finish__next { color: #6A7A72; margin-bottom: 14px; }
.finish__card .btn { text-decoration: none; }
@media (max-width: 1100px) {
  .finish__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .finish__hero { padding: 28px 22px; border-radius: 22px; }
  .finish__medal { width: 96px; height: 96px; top: 22px; right: 18px; }
  .finish__medal span { width: 74px; height: 74px; font-size: 32px; }
  .finish__title { max-width: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .finish__medal { animation: none; }
}
.finish__hero.is-complete .finish__title,
.finish__hero.is-complete .finish__eyebrow { max-width: calc(100% - 170px); }
@media (max-width: 600px) {
  .finish__hero.is-complete .finish__title, .finish__hero.is-complete .finish__eyebrow { max-width: calc(100% - 100px); }
}

/* ============================================================
   Навигация (запрос 01.10.2026): фото+имя справа ссылкой на главную,
   «Главная» в колонке шагов / нижней панели, на телефоне навигация
   курса — нижняя панель (как в кабинете), «Демо» — плавающая кнопка.
   ============================================================ */
.app-header .learner-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  transition: background 150ms ease;
}
.app-header .learner-badge:hover { background: rgba(255,255,255,0.12); }
.app-header .learner-badge:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.app-header .learner-badge__name { font-size: 14px; font-weight: 600; }
.app-header .learner-badge .avatar { width: 38px; height: 38px; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.35); }
/* Имя справа и в узкой шапке: прячем только текст, фото остаётся. */
@media (max-width: 960px) { #app.in-course .app-header .learner-badge__name { display: none; } }
@media (max-width: 600px) { .app-header .learner-badge__name { display: none; } .app-header .learner-badge { padding: 2px; } }
/* Порядок в шапке курса: логотип/курс — навигация — сотрудник справа. */
.app-header__right { order: 3; margin-left: 12px; }
.app-header__nav { order: 2; margin-left: auto; }

/* «Главная» в колонке шагов */
.course-steps__home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.course-steps__home:hover { background: var(--soft-2); }
@media (min-width: 1024px) { #app.has-steps .nav-btn--home { display: none; } }

/* Плавающая кнопка «Демо» */
.demo-switcher { position: fixed; left: 16px; bottom: 16px; z-index: 900; font-family: var(--font-main); }
.demo-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--dark-panel);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(15,31,24,0.3);
  cursor: pointer;
}
.demo-switcher__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); }
.demo-switcher__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 260px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-deep);
}
.demo-switcher__menu[hidden] { display: none; }
.demo-switcher__title { margin: 4px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6A7A72; }
.demo-switcher__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.demo-switcher__item:hover { background: var(--soft); color: var(--color-accent); }
/* Над нижними панелями (кабинет, курс) на телефоне */
@media (max-width: 600px) { .demo-switcher { bottom: calc(84px + env(safe-area-inset-bottom)); left: 12px; } }
/* Статус сохранения — маленькая «таблетка» справа внизу, не полоса на всю
   ширину (закрывала нижнюю панель навигации на телефоне). Ошибка с кнопкой
   «Повторить сохранение» остаётся видна и доступна. */
.save-status {
  left: auto;
  right: 16px;
  bottom: 16px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--dark-panel);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(15,31,24,0.25);
}
.save-status button { border: 0; border-radius: 999px; padding: 4px 12px; background: var(--highlight); color: #13221B; font-weight: 700; }
/* «Демо» — справа внизу, над статусом сохранения; не перекрывает колонку шагов */
.demo-switcher { left: auto; right: 16px; bottom: 64px; }
.demo-switcher__menu { left: auto; right: 0; }
@media (max-width: 600px) {
  .save-status { bottom: calc(80px + env(safe-area-inset-bottom)); right: 12px; }
  .demo-switcher { right: 12px; left: auto; bottom: calc(128px + env(safe-area-inset-bottom)); }
  #app:not(.in-course) ~ .save-status { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Экзамен (UI-REDESIGN 3.6) — только стили: логика и таймер
   examRuntime.js не менялись (кольцо-таймер потребовало бы JS).
   ============================================================ */
.exam-inner { max-width: 900px; }
.exam-eyebrow { color: var(--color-accent); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.exam-rules { list-style: none; padding: 0; display: grid; gap: 10px; }
.exam-rules li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
  line-height: 1.5;
}
.exam-rules li::before {
  content: "✓";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--color-accent);
  font-weight: 800;
}
.exam-timer {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--dark-panel);
  color: var(--highlight);
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: .02em;
}
.exam-fields .quiz-option { min-height: 64px; }
.exam-result-score { font-family: var(--font-heading); font-size: clamp(64px, 10vw, 110px); font-weight: 800; line-height: 1; color: var(--color-accent); }
/* Плашка сохранения теперь только при ошибке (main.js) — показываем её
   сверху по центру под шапкой: заметно и не перекрывает навигацию. */
.save-status[hidden] { display: none !important; }
.save-status {
  top: calc(var(--header-height) + var(--progress-height) + 12px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: #B4432F;
  border-radius: 16px;
  text-align: center;
}
.demo-switcher { bottom: 16px; }
@media (max-width: 600px) {
  .save-status { bottom: auto; right: auto; width: calc(100vw - 24px); }
  .demo-switcher { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.save-status--info { background: var(--dark-panel); }

/* ============================================================
   Правки 01.10.2026 (вечер): на телефоне «Главная / Назад / Меню» —
   снова в шапке (второй строкой), а внизу на всех экранах телефона —
   панель приложения с разделами кабинета (appTabbar.js); линия
   прогресса — сразу под зелёной шапкой; описание под видео шире.
   ============================================================ */
.app-header { top: 0; }
.progress-bar { top: var(--header-height); }
#app.in-course .app-header__nav .nav-btn--home { font-weight: 700; }

.app-tabbar { display: none; }
@media (max-width: 600px) {
  .app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(18,59,50,0.06);
  }
  .app-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 8px 2px;
    border-radius: 12px;
    color: var(--color-text);
    font-size: 10px;
    line-height: 1.2;
    text-decoration: none;
  }
  .app-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tabbar a.is-active { background: var(--soft); color: var(--color-accent); font-weight: 700; }
  .app-tabbar svg { width: 20px; height: 20px; }
  #app.has-tabbar #screen-mount { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Описание под видео с аватаром — шире и крупнее, читается легче */
.phone-frame__caption { max-width: 640px; font-size: 15px; line-height: 1.6; color: #556660; }
/* Телефон, курс: строка 1 — логотип/курс + фото справа, строка 2 —
   «Главная / Назад / Меню / Шаг» (фото раньше выпадало под шапку). */
@media (max-width: 600px) {
  #app.in-course .app-header__left { flex: 1 1 0; flex-basis: 0; min-width: 0; }
  #app.in-course .app-header__right { order: 2; flex-shrink: 0; max-width: none; margin-left: 8px; }
  #app.in-course .app-header__nav { order: 3; flex-basis: 100%; width: 100%; margin: 0; }
}
/* Информационное уведомление (не ошибка) — внизу по центру, исчезает само. */
.save-status--info {
  top: auto;
  bottom: 24px;
  max-width: min(520px, calc(100vw - 32px));
}
@media (max-width: 600px) { .save-status--info { bottom: calc(80px + env(safe-area-inset-bottom)); } }
/* Флип-карточки: подсказка резервирует две строки — заголовки карточек
   стоят на одной высоте при подсказках разной длины. */
.flip-card__hint { min-height: calc(2 * 1.4em); line-height: 1.4; }

/* «Уменьшить движение» — единое правило для всего плеера: анимации и
   переходы практически мгновенные (флип-карточки переворачиваются без
   поворота — см. отдельное правило выше). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Правило «задание — на один экран» (01.10.2026): на компьютере
   hotspot-задания (скриншот интерфейса) — вопрос и подсказки слева,
   скриншот справа, по высоте экрана без прокрутки. Зоны клика заданы
   в % от картинки (.hotspot-stage обнимает img) — при уменьшении
   картинки они остаются на своих местах.
   ============================================================ */
.hotspot-stage img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--header-height) - var(--progress-height) - 64px);
}
@media (min-width: 1024px) {
  .screen-inner:has(> .hotspot-stage),
  .screen-inner:has(> [data-role="trainer-wrap"]) {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    column-gap: 36px;
    align-items: start;
    align-content: start;
    max-width: 1400px;
  }
  .screen-inner:has(> .hotspot-stage) > *,
  .screen-inner:has(> [data-role="trainer-wrap"]) > * { grid-column: 1; }
  .screen-inner:has(> .hotspot-stage) > .hotspot-stage,
  .screen-inner:has(> [data-role="trainer-wrap"]) > [data-role="trainer-wrap"] {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin-top: 0;
  }
  .screen-inner:has(> .hotspot-stage) > .h1-title,
  .screen-inner:has(> [data-role="trainer-wrap"]) > .h1-title {
    font-size: clamp(26px, 2.4vw, 34px);
  }
  /* Без лишнего «хвоста» снизу — задания помещаются в один экран. */
  .screen-inner { padding-bottom: 40px; }
}
@media (min-width: 1024px) {
  .screen-inner { padding-top: 24px; }
  .screen-inner:has(> .hotspot-stage) .hotspot-stage img { max-height: calc(100vh - var(--header-height) - var(--progress-height) - 96px); }
  /* У тренажёра под скриншотом — строка подсказки */
  .screen-inner:has(> [data-role="trainer-wrap"]) .hotspot-stage img { max-height: calc(100vh - var(--header-height) - var(--progress-height) - 150px); }
}
/* Зоны hotspot не подсказывают ответ: до нахождения — невидимы (в тесте
   обводка выдавала правильный ответ), найденная — подсвечена. */
.hotspot { border-color: transparent; background: transparent; }
.hotspot:hover { background: transparent; }
.hotspot.is-done { border-color: var(--color-accent); background: rgba(23,143,111,0.22); }
@media (min-width: 1024px) {
  .screen-inner:has(> .hotspot-stage) > .btn,
  .screen-inner:has(> [data-role="trainer-wrap"]) > .btn { justify-self: start; }
}

/* Задание для сотрудника под заголовком (hotspot) */
.task-instruction { max-width: 640px; margin: 4px 0 18px; font-size: 18px; line-height: 1.5; color: var(--color-text); }
/* Экзамен на телефоне: отступ под нижнюю панель уже есть у #screen-mount —
   свой нижний отступ экзамена не нужен (лишняя прокрутка на 72px). */
@media (max-width: 600px) { #app.has-tabbar .exam-inner { padding-bottom: 16px; } }
/* Телефон с нижней панелью: экран «на всю высоту» = высота минус панель —
   иначе любой экран курса прокручивался на высоту панели. */
@media (max-width: 600px) {
  #app.has-tabbar #screen-mount > .screen { min-height: calc(100vh - 72px - env(safe-area-inset-bottom)); }
}

/* Игровой слой (итерация 1): длительность и XP шага в колонке шагов */
.course-steps__meta { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #6A7A72; font-variant-numeric: tabular-nums; }
.course-steps__item.is-current .course-steps__meta { color: var(--color-accent); }

/* Демо-переключатель «Игровой слой» (gameLayerFlag.js): без слоя прячем
   XP, уровни, рейтинг команды, медаль — остаётся базовый контур. */
.base-only { display: none; }
.no-game .base-only { display: block; }
.no-game .game-only,
.no-game .course-steps__meta,
.no-game .learner-level,
.no-game .level-rules,
.no-game .learner-tabs [data-panel="team"],
.no-game .app-tabbar [data-tab="team"],
.no-game .finish__medal,
.no-game .team-row__stats { display: none !important; }
.no-game .app-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.no-game .finish__hero.is-complete .finish__title,
.no-game .finish__hero.is-complete .finish__eyebrow { max-width: none; }
.demo-switcher__toggle-row { display: flex; justify-content: space-between; gap: 10px; }
.demo-switcher__state { color: var(--color-accent); font-weight: 700; }
[aria-checked="false"] .demo-switcher__state { color: #6A7A72; }
@media (max-width: 600px) { .no-game .learner-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================
   LVL и лиги (01.10.2026): LVL — личный уровень по XP, лига —
   группа соревнования по металлам (Gold / Silver / Bronze).
   ============================================================ */
.learner-level { display: grid; gap: 6px; min-width: 240px; }
.learner-level__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learner-level__league { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.learner-level__league--gold { background: #F6E9C6; color: #8A6A1E; }
.learner-level__league--silver { background: #E7EBEE; color: #59646B; }
.learner-level__league--bronze { background: #F3E1D3; color: #8C5A34; }
.learner-level__bar { display: block; height: 8px; border-radius: 999px; background: #E1E8E4; overflow: hidden; }
.learner-level__bar i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }

.league { margin-top: 18px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); }
.league__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.league__head h3 { margin: 0; font-size: 20px; }
.league__meta { margin-left: auto; color: #6A7A72; font-size: 13px; font-weight: 600; }
.league__medal { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.league--gold .league__medal { background: conic-gradient(#E8C86E, #C9A14A, #F3DB8F, #B98D35, #E8C86E); }
.league--silver .league__medal { background: conic-gradient(#DDE2E5, #A7B0B6, #F1F3F4, #959FA6, #DDE2E5); }
.league--bronze .league__medal { background: conic-gradient(#E3B28C, #B47A4E, #F0CDB0, #9E6640, #E3B28C); }
.league--mine { box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-card); }
.league .team-row { box-shadow: none; border: 1px solid var(--line); }
.team-row__place { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-card); font-family: var(--font-heading); font-weight: 800; color: #6A7A72; }
.team-row--top1 .team-row__place { background: var(--gold); color: #fff; }
.team-row--top2 .team-row__place { background: #A7B0B6; color: #fff; }
.team-row--top3 .team-row__place { background: #B47A4E; color: #fff; }
.team-row__fullname { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-row__you { padding: 1px 8px; border-radius: 999px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; }
.team-row__summary { align-items: center; }
/* Пояснение над рейтингом/лигами — отступ снизу как сверху. */
.learner-panel > .field-hint { margin: 0 0 24px; color: #6A7A72; }
.learner-panel > .field-hint + .league { margin-top: 0; }

/* Карточка уровня — тёмная, показатели лаймом, медаль лиги (запрос 01.10.2026) */
.learner-level {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 12px 30px rgba(15,31,24,0.18);
}
.learner-level__body { display: grid; gap: 6px; flex: 1; min-width: 0; }
.learner-level strong { color: var(--highlight); font-size: 30px; }
.learner-level span { color: rgba(255,255,255,0.88); }
.learner-level small { color: rgba(255,255,255,0.65); }
.learner-level__bar { background: rgba(255,255,255,0.16); }
.learner-level__bar i { background: var(--highlight); }
.learner-level__medal {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.learner-level__medal > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
}
.learner-level__medal--gold { background: conic-gradient(#E8C86E, #C9A14A, #F3DB8F, #B98D35, #E8C86E); }
.learner-level__medal--silver { background: conic-gradient(#DDE2E5, #A7B0B6, #F1F3F4, #959FA6, #DDE2E5); }
.learner-level__medal--bronze { background: conic-gradient(#E3B28C, #B47A4E, #F0CDB0, #9E6640, #E3B28C); }
.learner-level .learner-level__league { color: #13221B; }
@media (max-width: 600px) { .learner-level { width: 100%; } .learner-level__medal { width: 60px; height: 60px; } .learner-level__medal > span { width: 46px; height: 46px; font-size: 20px; } }

/* Плашки «🔥 серия · LVL · XP» в шапке кабинета (как в демо) */
.app-header__right { display: flex; align-items: center; gap: 10px; }
.header-stats { display: inline-flex; align-items: center; gap: 8px; }
.header-stat { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 700; white-space: nowrap; }
.header-stat b { color: var(--highlight); }
@media (max-width: 600px) { .header-stat { padding: 4px 9px; font-size: 13px; } .header-stats { gap: 4px; } }
@media (max-width: 380px) { .header-stats .header-stat:last-child { display: none; } }
.demo-switcher__hint { margin: 4px 8px 6px; padding: 8px 10px; border-radius: 10px; background: var(--soft); color: var(--color-text); font-size: 13px; line-height: 1.45; }
.demo-switcher__hint[hidden] { display: none; }

/* Экран загрузки (index.html) — виден с первого кадра, пока грузятся
   модули и данные; заменяется первым же отрисованным экраном. */
.boot-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; color: var(--color-text-muted, #5B6B64); font-size: 15px; }
.boot-loader__spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--soft, #E3EFEA); border-top-color: var(--color-accent, #0D5D4D); animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-loader__spin { animation-duration: 2.4s; } }

.course-unavailable { max-width: 520px; margin: 12vh auto 0; padding: 0 20px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.course-unavailable h1 { margin: 0; font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(26px, 5vw, 36px); }
.course-unavailable p { margin: 0; color: var(--color-text-muted, #5B6B64); line-height: 1.55; }

/* Телефон, 02.10.2026: нижняя панель кабинета — как в курсе (полные подписи,
   без «Обуче…»): поздние правила вкладок ПК (padding 16px, nowrap) иначе
   перебивали мобильные. Кнопка «Демо» — компактнее, меньше перекрывает. */
@media (max-width: 600px) {
  .learner-home .learner-tabs { border-radius: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(18,59,50,0.06); overflow: visible; }
  .learner-home .learner-tabs button { min-height: 56px; padding: 8px 2px; border-radius: 12px; font-size: 10px; white-space: normal; color: var(--color-text); }
  .learner-home .learner-tabs button[aria-pressed="true"] { background: var(--soft); color: var(--color-accent); }
  .learner-home .learner-tabs button span { white-space: nowrap; overflow: visible; text-overflow: clip; letter-spacing: -0.01em; }
  .demo-switcher__toggle { min-height: 32px; padding: 6px 12px; font-size: 12px; box-shadow: 0 6px 18px rgba(15,31,24,0.25); }
}
html { overscroll-behavior-y: none; }
.video-error { max-width: 420px; margin: 16px auto 0; padding: 14px 16px; border-radius: 14px; background: #FFF4DC; color: #6E4D0C; text-align: center; }
.video-error p { margin: 0 0 10px; line-height: 1.45; }
.video-error.hidden { display: none; }

/* Шаг «Текст / теория» (textBlock) */
.text-block { display: grid; gap: 24px; max-width: 760px; }
.text-block--with-image { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.text-block__body { font-size: 17px; line-height: 1.6; color: var(--color-text); }
.text-block__body p { margin: 0 0 14px; }
.text-block__figure { margin: 0; }
.text-block__figure img { display: block; width: 100%; height: auto; border-radius: 18px; }
.text-block__figure figcaption { margin-top: 8px; font-size: 14px; color: var(--color-text-muted, #5B6B64); }
@media (max-width: 900px) { .text-block--with-image { grid-template-columns: 1fr; } .text-block__figure { order: -1; } }
/* Заголовок экрана получает фокус программно (для экранного диктора) —
   без синей рамки для мыши/касания. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

.notification-item__warn { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #FFF4DC; color: #6E4D0C; font-size: 14px; line-height: 1.45; }

/* Телефон, аудит 02.10.2026: строка рейтинга — имя в одну строку, должность
   с многоточием (раньше «представител / ь» рвалось посреди слова). */
@media (max-width: 600px) {
  .team-row__summary { flex-wrap: nowrap; gap: 10px; }
  .team-row__name { overflow-wrap: normal; }
  .team-row__fullname { display: block; white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.25; }
  .team-row__name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-row__fullname .team-row__you { margin-left: 6px; }
  .team-row__stats strong { font-size: 16px; }
  .team-row__stats span { font-size: 12px; white-space: nowrap; }
  .module-dashboard-link { display: inline-flex; align-items: center; min-height: 44px; }
}
.resume-choice .btn-row { justify-content: center; margin-top: 8px; }
.resume-choice__hint { font-size: 13px; }
.in-course .course-unavailable { margin-top: 0; padding-top: calc(var(--header-height) + 40px); }

/* ИИ-ролевая игра (aiRoleplay) */
.roleplay { display: grid; gap: 14px; max-width: 760px; }
.roleplay__brief { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--soft, #E3EFEA); }
.roleplay__brief p { margin: 0; line-height: 1.5; }
.roleplay__label { margin: 6px 0 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.roleplay__chat { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px 2px; }
.roleplay__msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; }
.roleplay__msg p { margin: 2px 0 0; white-space: pre-wrap; }
.roleplay__who { font-size: 12px; font-weight: 700; opacity: .75; }
.roleplay__msg--character { align-self: flex-start; background: #fff; border: 1px solid var(--line, #DCE5E0); border-bottom-left-radius: 4px; }
.roleplay__msg--employee { align-self: flex-end; background: var(--color-accent); color: #fff; border-bottom-right-radius: 4px; }
.roleplay__msg.is-typing p { color: var(--color-text-muted, #5B6B64); font-style: italic; }
.roleplay__form { display: flex; gap: 10px; align-items: flex-end; }
.roleplay__form textarea { flex: 1; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line, #DCE5E0); border-radius: 14px; font: inherit; resize: vertical; }
.roleplay__form.hidden, .roleplay__bar.hidden, .roleplay__result.hidden, .roleplay__error.hidden { display: none; }
.roleplay__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 14px; color: var(--color-text-muted, #5B6B64); }
.roleplay__error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #FFF1D6; color: #6E4D0C; }
.roleplay__result { display: grid; gap: 12px; }
.roleplay__score { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #FFF4DC; color: #6E4D0C; }
.roleplay__score b { font-family: var(--font-heading); font-size: 40px; line-height: 1; }
.roleplay__score.is-passed { background: var(--color-primary); color: #fff; }
.roleplay__summary { margin: 0; line-height: 1.55; }
.roleplay__criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.roleplay__criteria li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border: 1px solid var(--line, #DCE5E0); border-radius: 12px; }
.roleplay__criteria li span { font-size: 13px; font-weight: 700; }
.roleplay__criteria li p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--color-text-muted, #5B6B64); }
.roleplay__criteria li.is-met span { color: var(--color-accent); }
.roleplay__criteria li.is-partial span { color: #A8740F; }
.roleplay__criteria li.is-missed span { color: #B23A26; }
.roleplay__tips { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 600px) { .roleplay__msg { max-width: 92%; } .roleplay__form { flex-direction: column; align-items: stretch; } }
.roleplay__msg.is-streaming p::after { content: "▍"; margin-left: 2px; animation: rp-caret 1s steps(2) infinite; color: var(--color-accent); }
@keyframes rp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .roleplay__msg.is-streaming p::after { animation: none; } }