/* Контейнер: фиксирован в правом верхнем углу, стопка уведомлений. */
.C1dDtCLrEKZ4_H3SzSQE {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 360px;
  max-width: calc(100vw - var(--space-4) * 2);
  pointer-events: none;
}

/* Одно уведомление. */
.vxiM_NvkymiT7KfhxFx3 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: N1ZYFsLdjGtFxPc4EZnN 180ms ease-out;
}

.P7oyd5dF5UheWx2Sa3Ty {
  flex: 1;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  word-break: break-word;
}

.i2GpnkxVN2Q4iVYfGvo2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -2px -4px -2px 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.i2GpnkxVN2Q4iVYfGvo2:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
}

/* Варианты по типу. */
.Dp020JFINV56gAD9aKGA {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.Yb8m8e6hNrrlbsbPoEnQ {
  border-color: var(--color-success-border);
  background: var(--color-success-subtle);
}

.Yb8m8e6hNrrlbsbPoEnQ .P7oyd5dF5UheWx2Sa3Ty {
  color: var(--color-success);
}

.LpLonfapZMRXbPfkedJh {
  border-color: var(--color-error);
  background: var(--color-error-subtle);
}

.LpLonfapZMRXbPfkedJh .P7oyd5dF5UheWx2Sa3Ty {
  color: var(--color-error);
}

@keyframes N1ZYFsLdjGtFxPc4EZnN {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vxiM_NvkymiT7KfhxFx3 {
    animation: none;
  }
}

@media (max-width: 480px) {
  .C1dDtCLrEKZ4_H3SzSQE {
    top: var(--space-2);
    right: var(--space-2);
    left: var(--space-2);
    width: auto;
    max-width: none;
  }
}

.DQeOwljcp67UCfUDjzik {
  display: inline-block;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: ESNDnHbgvZJEQzwRPm5h 0.7s linear infinite;
}

@keyframes ESNDnHbgvZJEQzwRPm5h {
  to {
    transform: rotate(360deg);
  }
}

.jNrsMXkAFqvL07uYCrq_ {
  position: relative;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text-primary);
  overflow-x: hidden;
}

/* ── Свечение за курсором ───────────────────────────────── */
.t4xeqRj9qKr5_Vgcltx5 {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.18), rgba(79, 70, 229, 0) 62%);
  will-change: transform;
}

/* ── Шапка ──────────────────────────────────────────────── */
.EbzD0tGxyMGkBWHoGKhz {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px var(--space-6);
}

.eY6TdSEYofLkCx2iCBwj {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.eY6TdSEYofLkCx2iCBwj:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* ── Логотип «крч.» с мигающей точкой ───────────────────── */
.A60cdnN_mwcHmpy1QcnD {
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
}

.N1uIXO0xhvg3T208qldE {
  color: var(--color-accent);
  animation: zzpMBesoNnFZYwa1Fd34 1.2s steps(1, end) infinite;
}

@keyframes zzpMBesoNnFZYwa1Fd34 {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.15;
  }
}

.Cl8blxzBsWwe3Mrb7yQs {
  font-size: 24px;
}

/* ── Hero ───────────────────────────────────────────────── */
.bfbjRiwznHd0FoacZMv6 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 64px var(--space-6) 96px;
}

.ttq9skAhGUMtI5P2swBL {
  font-size: clamp(72px, 16vw, 132px);
  line-height: 1;
}

.mR5Kg8eloY1FrkxiKR2g {
  margin: 24px 0 0;
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.spHRN7Czr0nBSjLzEdiD {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.f8qdGqyP1vNy6G66OlRD {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
}

/* Плавающие декоративные пятна на фоне hero */
.SAQz2puMfHn02E0pTG1A,
.OSBKbFrmDfq47biTG9p_ {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.SAQz2puMfHn02E0pTG1A {
  width: 340px;
  height: 340px;
  top: -40px;
  left: -80px;
  background: rgba(79, 70, 229, 0.12);
  animation: YWQ5u0JC9Ap_R2oyG6dz 9s ease-in-out infinite;
}

.OSBKbFrmDfq47biTG9p_ {
  width: 300px;
  height: 300px;
  right: -60px;
  top: 120px;
  background: rgba(99, 102, 241, 0.1);
  animation: YWQ5u0JC9Ap_R2oyG6dz 11s ease-in-out infinite reverse;
}

@keyframes YWQ5u0JC9Ap_R2oyG6dz {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, 28px);
  }
}

/* ── Кнопка CTA ─────────────────────────────────────────── */
.gBLREoxYSqWvQ_Vz2b6B {
  margin-top: 36px;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 34px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.25);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.gBLREoxYSqWvQ_Vz2b6B:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.32);
}

.gBLREoxYSqWvQ_Vz2b6B:active {
  transform: translateY(0);
}

/* ── Секции ─────────────────────────────────────────────── */
._yQX9yvLOyMNdH7SYpGP {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px var(--space-6);
}

.aQUl4L7u3mICT__sQkyZ {
  max-width: none;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.UpAkecu4kQGz50QZWtH1 {
  margin: 0 0 40px;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

/* ── Карточки «три вопроса» ─────────────────────────────── */
._rzkQv19oSaH3uE3y13v {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.QWayID4G3BfArtiZzejx {
  display: flex;
}

.kOmh29KOoFuolf2qFDHt {
  flex: 1;
  padding: 28px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.kOmh29KOoFuolf2qFDHt:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.QeYV4zC0tKKc7PFDqnm2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
}

.Vj2t45Dl3WCMJws83AjL {
  margin: 12px 0 8px;
  font-size: 19px;
  font-weight: 600;
}

.FLZiCkFObNpitujMkKH4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ── Подзаголовок-лид секции ────────────────────────────── */
.j88akpT5DBohWYEY4rfs {
  max-width: 620px;
  margin: -20px auto 44px;
  text-align: center;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ── Как проходит обучение (шаги) ───────────────────────── */
.kdfmlqGJtDmOqCYsMWnW {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: var(--space-5);
}

.l1xykrgJBm2HVnR_F4Ho {
  display: flex;
}

.SkTtk_ol88uoqBD0QtD4 {
  position: relative;
  flex: 1;
  padding: 26px 24px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.SkTtk_ol88uoqBD0QtD4:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.KZ_7GxIXWgOn27AsFBD5,
.UNDn0sS27V1eONUP62uP {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.KZ_7GxIXWgOn27AsFBD5 svg,
.UNDn0sS27V1eONUP62uP svg {
  width: 24px;
  height: 24px;
}

.rNDavbNACI0FCm531rsE {
  display: block;
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.B9pQKzbmICWGt1FV61AM {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.w62znSkWjcVd5UdRs0J0 {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ── Трудоустройство (карточки) ─────────────────────────── */
.z5Fj_XJU6514imtx7FwX {
  flex: 1;
  padding: 28px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.z5Fj_XJU6514imtx7FwX:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.z5Fj_XJU6514imtx7FwX .Vj2t45Dl3WCMJws83AjL {
  margin-top: 16px;
}

.ZIfLiyF1FA9v_4a5jmJq {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 22px 26px;
  text-align: center;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-xl);
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.ZIfLiyF1FA9v_4a5jmJq strong {
  color: var(--color-accent);
}

/* ── Авторский менторинг ────────────────────────────────── */
.M_gx8Z1LRDUDx9svVg0E {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.lZAnO_qSn3lj6_nmyITg {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--color-accent-subtle), var(--color-background) 75%);
  overflow: hidden;
}

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

.U7dp4jZ2c0FGaPkBTS5i {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-disabled);
}

.TI9B5AtFb8SMa3ezOmdA {
  margin: 0 0 18px;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.TI9B5AtFb8SMa3ezOmdA strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.u6inAAX99OQnZGkOz7YH {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.u6inAAX99OQnZGkOz7YH li {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.L2FSv5N3quPNfsrFtiLa {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.jIYqj63_f2SJFR4JgV2R {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.jIYqj63_f2SJFR4JgV2R svg {
  width: 18px;
  height: 18px;
}

.jIYqj63_f2SJFR4JgV2R:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* Тематические цвета иконок соцсетей (иконка через fill: currentColor у svg). */
.hvqkGgDphzyCAKPQeKPL svg {
  color: #229ed9;
}

.eNF3j7PDOnn8vx72rAzU svg {
  color: #ff0000;
}

.vPkRhfaoH6gl3KORR_Pr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.25);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.vPkRhfaoH6gl3KORR_Pr:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.32);
}

/* ── Как проходит обучение — таймлайн ───────────────────── */
.kxeLEmkeE0julznctjCD {
  max-width: 760px;
  margin: 0 auto;
}

.qDiVuBMlPEUJPmB7J_i0 {
  display: flex;
  gap: 22px;
  padding-bottom: 26px;
}

.qDiVuBMlPEUJPmB7J_i0:last-child {
  padding-bottom: 0;
}

.P1N8G93RihHu176Py_RV {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.EA3e360E6QgjL7O_7VOt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-accent), #6366f1);
  color: #fff;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3);
}

.EA3e360E6QgjL7O_7VOt svg {
  width: 26px;
  height: 26px;
}

.bOYDdVv4U2p1PRjzJ082 {
  flex: 1;
  width: 2px;
  margin-top: 8px;
  background: linear-gradient(var(--color-accent), var(--color-border));
  opacity: 0.5;
}

.DEMsuo3Chy_PHJyVTGxA {
  position: relative;
  flex: 1;
  padding: 18px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.DEMsuo3Chy_PHJyVTGxA:hover {
  transform: translateX(4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.hVG_kQhygmEg06DaI1Uu {
  position: absolute;
  top: -14px;
  right: 10px;
  font-size: 78px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-accent-subtle);
  z-index: 0;
  pointer-events: none;
}

.DEMsuo3Chy_PHJyVTGxA > .rNDavbNACI0FCm531rsE,
.DEMsuo3Chy_PHJyVTGxA > .B9pQKzbmICWGt1FV61AM,
.DEMsuo3Chy_PHJyVTGxA > .w62znSkWjcVd5UdRs0J0 {
  position: relative;
  z-index: 1;
}

/* ── Собеседования (топ-10) ─────────────────────────────── */
.VtSphWlwUC1ypEjfZyo9 {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.Iuz3CJ43hqCFtwAlWIry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 26px;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--color-accent), #6366f1);
  color: #fff;
  box-shadow: 0 16px 36px rgba(79, 70, 229, 0.3);
}

.DPybN_qFRscTBY26TXwX {
  font-size: clamp(40px, 7vw, 58px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.rQzES9XylOKAs1VMCGFr {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.92;
}

.g6fFdla015ySxOWL6maM {
  margin: 0 0 16px;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.g6fFdla015ySxOWL6maM strong {
  color: var(--color-accent);
  font-weight: 700;
}

/* ── Принципы ───────────────────────────────────────────── */
.J0QGhCEwWrVZZS4WJK5I {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.H2IPHqvajmHC5oGHw6Lu {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 26px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-size: clamp(18px, 3vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.H2IPHqvajmHC5oGHw6Lu:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.h2ofkJRHFjH35J3Zu9lP {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--color-accent);
  transform: translateY(1px);
}

.UfLY63rrCWElkMJf4eSS {
  font-weight: 700;
  color: var(--color-text-primary);
}

.LjelCaxZCKashUOw8x0L {
  font-weight: 500;
  color: var(--color-text-disabled);
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
}

.hYZNHX7GIi1hCKwCS9hK {
  margin: 18px 0 0;
  text-align: center;
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 700;
  color: var(--color-text-disabled);
}

.hYZNHX7GIi1hCKwCS9hK span {
  color: var(--color-accent);
}

/* ── Повествование ──────────────────────────────────────── */
.NREfHEf562UhcZmYn84P {
  max-width: 680px;
  margin: 0 auto;
}

.EtnA9bpGK0RsuoY75lDY {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* Ключевая мысль — акцентная врезка слева */
.AeN9ZAWFmJWlGAiARa3p {
  margin: 0 0 28px;
  padding: 18px 0 18px 24px;
  border-left: 4px solid var(--color-accent);
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

/* «Без …» — карточки-чипы вместо сплошного списка */
.eKhR6wzufILwwu6KOwUe {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eKhR6wzufILwwu6KOwUe li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 17px;
  font-weight: 600;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.eKhR6wzufILwwu6KOwUe li:hover {
  border-color: var(--color-accent);
  transform: translateX(4px);
}

.eKhR6wzufILwwu6KOwUe li::before {
  content: "крч.";
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

/* Финальная триада — заметный баннер */
.XcJL7NwpyZcm26uGeVgd {
  margin: 32px 0 0;
  padding: 28px 24px;
  text-align: center;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-xl);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.XcJL7NwpyZcm26uGeVgd strong {
  color: var(--color-accent);
}

/* ── Финальный CTA ──────────────────────────────────────── */
.c0mHv7QhB_Lx8AJYbB6Z {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px var(--space-6) 96px;
}

.bdxqM1MHzNTwuxLPy8Ij {
  margin: 0;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Подвал ─────────────────────────────────────────────── */
.jSC8PCwfiOtd6L9ENWc4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 32px var(--space-6) 48px;
  border-top: 1px solid var(--color-border);
}

.IpetpJ5FoGtTYwOJDhKq {
  font-size: 20px;
}

.vEZN1mnjPYd9o5x6tGQP {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ── Анимация появления ─────────────────────────────────── */
._cQYW0JAQ2dc9WezKOBs {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.nK1CrzNFGL2Mn2ZQlYQd {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  ._cQYW0JAQ2dc9WezKOBs {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .N1uIXO0xhvg3T208qldE,
  .SAQz2puMfHn02E0pTG1A,
  .OSBKbFrmDfq47biTG9p_ {
    animation: none;
  }
  .t4xeqRj9qKr5_Vgcltx5 {
    display: none;
  }
}

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 768px) {
  ._rzkQv19oSaH3uE3y13v {
    grid-template-columns: 1fr;
  }
  ._yQX9yvLOyMNdH7SYpGP {
    padding: 56px var(--space-5);
  }
  .bfbjRiwznHd0FoacZMv6 {
    padding: 40px var(--space-5) 72px;
  }
  .c0mHv7QhB_Lx8AJYbB6Z {
    padding: 36px var(--space-5) 72px;
  }
  .M_gx8Z1LRDUDx9svVg0E,
  .VtSphWlwUC1ypEjfZyo9 {
    grid-template-columns: 1fr;
  }
  .lZAnO_qSn3lj6_nmyITg {
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (hover: none) {
  .t4xeqRj9qKr5_Vgcltx5 {
    display: none;
  }
}

.arTHrBoBqc9RAMlTOgC_ {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

._Fc7OFvaRXcGrnC4tlEt {
  position: relative;
  display: flex;
  align-items: center;
}

.dA07HLZFfYwYtdO68uqd {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.KwIvK_XDsMH7k9RAx6Im {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Обёртка примыкает к триггеру вплотную (top: 100%), а визуальный зазор
   создаётся прозрачным padding-top — он остаётся частью hover-зоны. */
.vF7mh26YT7J6EkI7Bxg9 {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 10px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.npt3craEsGLliWS1ikgy {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.VNIeNEt068rrrtheOHMp {
  width: 200px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 6px;
}

.IA1ZD0fnKMiwC8WvqP5h {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.m87tL7KHorSxfDzL6mgI {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.SpHKszWAO7gldmkzdpap {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.IN9dd6zg5GtrGzXksolu {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
}

.IN9dd6zg5GtrGzXksolu:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.YyIk95TnXyg0zZOMqaVN {
  color: var(--color-error);
}

.YyIk95TnXyg0zZOMqaVN:hover {
  background: var(--color-error-subtle);
  color: var(--color-error);
}

.YDisnXs5xTxmM6xrxX37 {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

@media (max-width: 768px) {
  .KwIvK_XDsMH7k9RAx6Im {
    display: none;
  }
}

.fDY4blvvKTP4EzUWsA8Z {
  display: inline-flex;
  align-items: baseline;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
  user-select: none;
}

.Vcwgl6hzKmbQWx3HiKs6 {
  color: var(--color-accent);
  animation: d4wvJWh4ImReLKbNeWgx 1.2s steps(1, end) infinite;
}

@keyframes d4wvJWh4ImReLKbNeWgx {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Vcwgl6hzKmbQWx3HiKs6 {
    animation: none;
  }
}

.jBW4aDQ7xyACZy1R3olI {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
}

.R1UuZctChlnAVFg7MdDR {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.PU0ipleyb_4uHBIDUcUr {
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.PU0ipleyb_4uHBIDUcUr:hover {
  color: var(--color-accent);
}

.uzmfeIhSH6FNvhU9112P {
  color: var(--color-text-disabled);
}

.pBrAEEpKkpPoubkHs7pk {
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uUOxefxlorNiOgK31ygY {
  height: 56px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--color-background);
}

.HpXlTPmMLM3cKeMI7j_z {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.BBEZ4WSA2Nob8JxpqdaB {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.LPZnVPNPaLNOwEePdagL {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.RUs5ANwkdi4ei0Lg_IoR {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ERbG9qbE1u45kK60ciQT {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  flex-shrink: 0;
}

.mlIuOoDvrwAZS_Di_usA {
  display: none;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 4px;
}

@media (max-width: 768px) {
  .uUOxefxlorNiOgK31ygY {
    padding: 0 16px;
  }

  .mlIuOoDvrwAZS_Di_usA {
    display: inline-flex;
  }

  /* На узких экранах крошки в топбаре скрываем — навигация остаётся в сайдбаре. */
  .BBEZ4WSA2Nob8JxpqdaB {
    display: none;
  }

  /* Действия (Сохранить/Отмена и т.п.) на мобиле — компактнее, могут сжиматься,
     чтобы не налезать на логотип. */
  .LPZnVPNPaLNOwEePdagL {
    gap: var(--space-2);
    min-width: 0;
  }

  .RUs5ANwkdi4ei0Lg_IoR {
    gap: 6px;
    min-width: 0;
  }

  .RUs5ANwkdi4ei0Lg_IoR button {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}

.LH0kcGsos0Afx4qvIVJP {
  width: 300px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--color-background);
  height: 100%;
}

.wNu8aHpDlOSDu44bArwQ {
  padding: 20px 12px 4px;
}

.ChMvTsh0QRBICus6Jn4r {
  height: 1px;
  background: var(--color-border);
  margin: 8px 12px;
}

.oiyLlSyQxdapt6PyX3Gd {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 10px;
  margin-bottom: 8px;
}

.fI6MrtB6Ge0CQbpNMmui {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: 2px;
  text-align: left;
}

.fI6MrtB6Ge0CQbpNMmui:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.gBoAlmPQtaQDfZmMMGbc {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.gBoAlmPQtaQDfZmMMGbc:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.ZSWaK9dil2B_ZH5ZsClr {
  opacity: 0.45;
  cursor: not-allowed;
}

.ZSWaK9dil2B_ZH5ZsClr:hover {
  background: transparent;
  color: var(--color-text-secondary);
}

.am17PAnIvinKb0cPl704 {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.JxO_nM0CUFzHrTLTJpVu {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.oTQwZ1DF3rmTpIAXgXyq {
  display: flex;
  flex: 1;
  overflow: hidden;
}

._LF8Rgf1KYb9GlZWIyT6 {
  flex-shrink: 0;
}

.y0uwMrYh67bDOXh9k4WV {
  flex: 1;
  /* min-width:0 — чтобы широкий контент (блоки кода с длинными строками) НЕ
     растягивал колонку под свой min-content: текст переносится по ширине экрана,
     а код/таблицы скроллятся внутри себя (особенно важно на мобильном). */
  min-width: 0;
  overflow-y: auto;
  padding: 36px 52px 52px;
}

.TICm1E1ZEjeMbkNhRyg2 {
  display: none;
}

/* ── Планшет / телефон: сайдбар → drawer ───────────────────── */
@media (max-width: 768px) {
  ._LF8Rgf1KYb9GlZWIyT6 {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }

  .zE2KkHQSNoz8pLoDh9Rm {
    transform: translateX(0);
  }

  .TICm1E1ZEjeMbkNhRyg2 {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.4);
  }

  .y0uwMrYh67bDOXh9k4WV {
    padding: 24px 16px 40px;
  }
}

.BFcSu0REhvEEI1pcVzhH {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  border: 1px solid transparent;
}

.immSiGqbyfehb9_GjJ2y {
  display: inline-flex;
  align-items: center;
}

.q9nYJuTw9GDsez6L2gJv {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.q9nYJuTw9GDsez6L2gJv:hover {
  background: var(--color-accent-hover);
}

.qRS9LwiqDkS0OflvqMy4 {
  background: var(--color-background);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  font-weight: 500;
}

.qRS9LwiqDkS0OflvqMy4:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.koGEcZaRxjG1Ti1DBrJs {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.zdj9cswCq4aPxZiIUymd {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.VYMe5R8Rp3MxitK3tcNY {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.HihkgSmsXZELVzDKJHLp {
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
}

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

.Hk_bAKzu2Xe91yp32ata {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

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

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

.QOE2UUE9vnm6fiGg4zO7 {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.QOE2UUE9vnm6fiGg4zO7:hover,
.QOE2UUE9vnm6fiGg4zO7:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  outline: none;
}

.wB6YWCbAVA3B7oZRlgME {
  background: var(--color-success-subtle);
  border-color: var(--color-success-border);
}

.dBdhNgGW_pa1UrXVBl18 {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.AZ2fHZzTS6O6y8N5Qn2U {
  background: var(--color-success-subtle);
}

.Wt3EWADt_ni6d1_2Xbwa {
  flex: 0 0 300px;
  min-width: 0;
}

._2tfKZz8mC21dDtqEDVUG {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.C9hyM93bI6_9awV_Ryp7 {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.CfepMZQdHWqqO_JwCzlC {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

.La_C1QIoUJS7bp68HjXr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.YGJKJUsW3z9JIarpYMS2 {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.u8esHsqKXmHmGk7Uai6R {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.Djt2NeFU2jthrpPQNloZ {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  margin-left: 6px;
}

.MC3RKpINA4YC4XXi8PM8 {
  color: var(--color-success);
}

.Cw8yZGkomgA2Pz6b63ft {
  display: inline-flex;
  flex-shrink: 0;
}

/* ── Админские действия на карточке ────────────────────────── */
.nTzKrUbeL9mALB6Hegyd {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.MNaSmhEfjYctUiY3SGh2 {
  width: 1px;
  height: 32px;
  background: var(--color-border);
}

.CjPKiUR4OgjZgWZ_bv1S {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.CjPKiUR4OgjZgWZ_bv1S:hover,
.CjPKiUR4OgjZgWZ_bv1S:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  outline: none;
}

/* ── Планшет / телефон ─────────────────────────────────────── */
@media (max-width: 768px) {
  .QOE2UUE9vnm6fiGg4zO7 {
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px 14px;
  }

  .Wt3EWADt_ni6d1_2Xbwa {
    flex: 1 1 auto;
    order: 1;
  }

  /* Бейдж встаёт в одну строку с иконкой и заголовком, справа. */
  .Cw8yZGkomgA2Pz6b63ft {
    order: 2;
    margin-left: auto;
  }

  .qGuAXC2DqVBiR0BduNJs {
    flex: 1 1 100%;
    order: 3;
  }

  .nTzKrUbeL9mALB6Hegyd {
    flex: 1 1 100%;
    order: 4;
    justify-content: flex-end;
  }

  .MNaSmhEfjYctUiY3SGh2 {
    display: none;
  }
}

@media (max-width: 480px) {
  .dBdhNgGW_pa1UrXVBl18 {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }
}

.NVqyv0Lzz5UR8QdAUv1R {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ftM2z075_BKFMweDAwm0 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.OW1aSs6dIo6yXEHs0lMH {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.leu1ui4H0TpxIrh_jPl7 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .NVqyv0Lzz5UR8QdAUv1R {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ftM2z075_BKFMweDAwm0 {
    font-size: 22px;
  }

  .leu1ui4H0TpxIrh_jPl7 {
    flex-wrap: wrap;
  }
}

.r7qq1U9Mp0QF9iLUahFp {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.X11hISXaNQeWIDu3I0Ee {
  display: flex;
  justify-content: center;
  padding: 64px 0;
}

.BnHuU2oenv3nl4l1wSxf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 64px 24px;
  text-align: center;
}

.jyrQ_flu2UtPHzyis5lm {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.bDdYrScZHIwvuAUJCLYA {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

.bDdYrScZHIwvuAUJCLYA a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}

.bDdYrScZHIwvuAUJCLYA a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.cR8w4zi1MlY4Tu_FRLOI {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background: var(--color-surface);
}

.tBrEPDLhn2zPKM97dlmv {
  width: 100%;
  max-width: 420px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.jzwTjXoMeVZ0C6FSs2Gq {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.x_jiyL473pKSxfIkL51u {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  text-align: center;
}

.MNNbDrjsHoi8BP5hcnyc {
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
}

.Qniop6JT8HARG_zL5mdw {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}

@media (max-width: 480px) {
  .tBrEPDLhn2zPKM97dlmv {
    padding: var(--space-6);
  }
}

/* Общие стили форм аутентификации (логин/регистрация). */
.WtFzs5GpSFBAJ9QUCc5x {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.yDVJQZuilTgE_QQcXDfW {
  width: 100%;
  justify-content: center;
  height: 44px;
  font-size: 15px;
  margin-top: var(--space-2);
}

.UKmhIZoUaGUdmpKbA9SO {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 13px;
}

.t5FqEK50mSEF0Of0QYFD {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.t5FqEK50mSEF0Of0QYFD input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.zBYox3PCZhTrLkd9cljE {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-5);
  padding: 14px 16px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-subtle);
  color: var(--color-warning);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}

.I8GpWaAJnf8qbv48QBcw {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.z84Dg5Nj5VluvVvm43h_ {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
}

.z84Dg5Nj5VluvVvm43h_:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.z84Dg5Nj5VluvVvm43h_:disabled {
  opacity: 0.6;
  cursor: default;
}

.LEvDoq5yzszMGQj_FEqc {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.LEvDoq5yzszMGQj_FEqc:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.lSQ02S2BRysP77iXUBYQ {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.s_hCmL_EOPfPHhbpyqlb {
  font-size: 13px;
  color: var(--color-error);
  background: var(--color-error-subtle);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.yirMbppjjy65VwFyHbCY {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bihWh9E21dMXMrwGcGhI {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.R4_Reco5aquxUtnjfEIu {
  position: relative;
}

.b4JqREZfQUHwYik5AzeU {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-background);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.b4JqREZfQUHwYik5AzeU::placeholder {
  color: var(--color-text-disabled);
}

.b4JqREZfQUHwYik5AzeU:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.bNOcu39cXzlDpZjEOg_9 {
  padding-right: 44px;
}

.hhUSgDRivX4FVuDSLGtS {
  border-color: var(--color-error);
}

.hhUSgDRivX4FVuDSLGtS:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-subtle);
}

.QtEhZMyFDgB7nMhf4Xnl {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-text-secondary);
}

.fKJ3D9KQAvV2OJMDZhM_ {
  font-size: 12px;
  color: var(--color-error);
}

.xJmnRvl6vQm_jp6sbESZ {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-6);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--color-accent-subtle), var(--color-background) 60%);
  overflow: hidden;
  text-align: center;
}

.rD9W0LmK0eadedVDkZA7 {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
}

.G0bg1vUddmlsYqKVDtdc {
  position: relative;
  z-index: 1;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* ── Большой 404 с «летающей тарелкой» вместо нуля ── */
.RV3e0G_mIrfejIISSHBe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1;
  user-select: none;
}

.OR8Y4n9lcudzWez5_eSx {
  font-size: clamp(96px, 22vw, 180px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  text-shadow: 0 12px 30px rgba(79, 70, 229, 0.18);
}

.sH1U_NuOHh897pQ4t7OT {
  font-size: clamp(72px, 17vw, 140px);
  animation: lZNy1pJ_HrgFhWEGq1xZ 3.2s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.12));
}

@keyframes lZNy1pJ_HrgFhWEGq1xZ {
  0%,
  100% {
    transform: translateY(-8px) rotate(-6deg);
  }
  50% {
    transform: translateY(10px) rotate(6deg);
  }
}

.r317u7mrj3JsBjeZsMOh {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.K_SWB3zcL4hX0w9T_85w {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.ii9vWsPmg3MIAyewhDoY {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Декоративные звёзды (мерцание) ── */
.k7botGWfMBuEAIRAn99z span {
  position: absolute;
  color: var(--color-accent);
  opacity: 0.35;
  font-size: 18px;
  animation: up4Ol5Yw7afDBPIcpvSx 2.6s ease-in-out infinite;
}

.k7botGWfMBuEAIRAn99z span:nth-child(2) {
  animation-delay: 0.5s;
}
.k7botGWfMBuEAIRAn99z span:nth-child(3) {
  animation-delay: 1s;
}
.k7botGWfMBuEAIRAn99z span:nth-child(4) {
  animation-delay: 1.5s;
}
.k7botGWfMBuEAIRAn99z span:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes up4Ol5Yw7afDBPIcpvSx {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sH1U_NuOHh897pQ4t7OT,
  .k7botGWfMBuEAIRAn99z span {
    animation: none;
  }
}

@media (max-width: 480px) {
  .rD9W0LmK0eadedVDkZA7 {
    top: var(--space-4);
    left: var(--space-4);
  }
}

.Y1TV4jFeNhgL2dnKRale {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-background);
  color: var(--color-text-primary);
}

/* ── top-bar ───────────────────────────────────────────── */
.ypfP67KirQkJYkM519ja {
  height: 56px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--color-background);
  gap: var(--space-3);
}

.iUM6KXTRZq3E4XRcQVOn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.Ey1UWgcXYccKJbl4xVRF {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 18px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.Ey1UWgcXYccKJbl4xVRF:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.lxjjlJ08_BficQ0aEdjH {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-width: 0;
}

.AN8vPy4zzYThtBdcf1qR {
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.AN8vPy4zzYThtBdcf1qR:hover {
  color: var(--color-accent);
}

.yO_GFaC37ejWOzbHL8zM {
  color: var(--color-text-disabled);
}

.G4V54R2SrXsuf054QEGN {
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── layout ────────────────────────────────────────────── */
.M5wViLuFCjhBnvL4Uqdc {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── sidebar ───────────────────────────────────────────── */
.FDMqa1mHR7xQMN2F9Z5E {
  width: 300px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--color-background);
}

.HGencQuRejeGriIbnr2C {
  height: 56px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.h71x9Efo_Uhk0_B_oHM1 {
  padding: var(--space-4) var(--space-2) var(--space-1);
}

.hbNOz7wggGM157KDf5Nz {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.BYOlA9VixrCIfCZ2lcqL {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px var(--space-2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: 1px;
  user-select: none;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
}

.BYOlA9VixrCIfCZ2lcqL:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.HEy4ue95PHDDXBhvBPhA {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.h1ObKndYRnbNAflWvoty {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.OzUUp7PjH9oVybDntRSw {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2);
}

/* мобильный оверлей сайдбара */
.cbqtQ9Kgn6vKOmrWfTi8 {
  display: none;
}

/* ── content ───────────────────────────────────────────── */
.g1LY2GCzHUGl6bon8Fkr {
  flex: 1;
  overflow-y: auto;
  padding: 36px 52px 52px;
  min-width: 0;
}

/* course-header */
.jwm904O4uJUgkJhoVSt8 {
  margin-bottom: var(--space-8);
}

.ROSdmbMc8K6VT0XZo0aR {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 10px;
}

.U665oYQ6Q4_McpIb1HbW {
  flex: 1;
  min-width: 0;
}

.PMt9_38dhf8btKPggnZn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.Wg_kqEmH5GqhdHRnd03k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

.bq3zYjyZ5pcWC1Z1d88y {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.QSM7Pf7NT_N4D2Kf6fqQ {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.OYh_dM7lA6eCVz8KznDS {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* progress-section */
.UMSb3gOkVD1bfTia5BXD {
  margin-top: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.szLKEay1SOH3aNpMq3KC {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.vRuNZGv21w02bV1qluWB {
  flex: 1;
}

.VrU4o2rC9I_fg7qT6psh {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.F6coS3DsfB1mAAGBKqhg {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ── состояния загрузки / ошибки / пустоты ─────────────── */
.yXPgWaAgHRj2Nj5vZbEL {
  display: flex;
  justify-content: center;
  padding: 64px 0;
}

.cty2yvcwOEaJKd_rIuxd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 64px 24px;
  text-align: center;
}

.HsLaXILKEXO9OjaApWhO {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.KN8CrMISZiZKJxV9uM7P {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── module ────────────────────────────────────────────── */
.Z_4MqDcZsJF7NSXGYGVc {
  margin-bottom: 28px;
  /* отступ при scrollIntoView, чтобы заголовок не прятался под верхом контента */
  scroll-margin-top: var(--space-4);
}

.GQsifYxyh8j45o6HkXfA {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 6px 8px;
  margin-left: -8px;
  margin-right: -8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
}

.GQsifYxyh8j45o6HkXfA:hover {
  background: var(--color-surface);
}

.R7ivn1G3nmJnd3UTirK6 {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--color-accent);
  border-radius: 7px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.GQsifYxyh8j45o6HkXfA:hover .R7ivn1G3nmJnd3UTirK6 {
  background: var(--color-accent-subtle);
}

.HZGXYgOfDVZcQJI2Cu2A {
  transform: rotate(-90deg);
}

.fSdjVxsrCKKvcMvCIbgz {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--color-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.rBh39rGWElSGV7o1eqVV {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.gxRwPvcijAE5RIbtLM7_ {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.x4fHC1W_EjefAHxtpwr4 {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: auto;
  text-align: right;
}

/* task-list */
.RiX5LwthgDDKxq18d0g9 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 36px;
}

.ol6BaEEQIqKDkIBeIfmy {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.ol6BaEEQIqKDkIBeIfmy:hover:not(.KnR6xFs5_ykwqKkY0UQr) {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.KS3tkjy6bqzXmq0yAvns {
  background: var(--color-success-subtle);
  border-color: var(--color-success-border);
}

.KnR6xFs5_ykwqKkY0UQr {
  opacity: 0.55;
  cursor: not-allowed;
}

.I33Ryxp2HcluX3csm587 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}

.HRW_IQD4GKRsgZ1rqsp4 {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

.yWAvC56IWqe6ckR8sBDV {
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 700;
}

.edhziYKCPdCkWjWqy5d7 {
  border: 2px solid var(--color-border);
  color: var(--color-text-disabled);
}

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

.owgMY5JosaDtI_dlcwjA {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.KnR6xFs5_ykwqKkY0UQr .owgMY5JosaDtI_dlcwjA {
  color: var(--color-text-secondary);
}

.fWcYBBeih9eyPmgJKlAL {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 3px;
}

.hin6ErPzc0VGwE9EIaVv {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.XZXpU4oF5rR5SCehdEMs {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.ooPj4wgJceuyMbFo7bo9 {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.Qtz7iG5cSas6Zp6TGQ6j {
  background: var(--color-surface-elevated);
  color: var(--color-text-disabled);
}

/* ── адаптив ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .Ey1UWgcXYccKJbl4xVRF {
    display: flex;
  }

  .g1LY2GCzHUGl6bon8Fkr {
    padding: var(--space-6) var(--space-5) var(--space-8);
  }

  /* сайдбар выезжает поверх контента */
  .FDMqa1mHR7xQMN2F9Z5E {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 280px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }

  .Qj2yMv9uIx3Ok67XczTa {
    transform: translateX(0);
  }

  .cbqtQ9Kgn6vKOmrWfTi8 {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.4);
    border: none;
  }

  .bq3zYjyZ5pcWC1Z1d88y {
    font-size: 22px;
  }

  .gxRwPvcijAE5RIbtLM7_ {
    font-size: 14px;
  }

  /* Название задания: меньше шрифт и до 2 строк — помещается больше текста. */
  .owgMY5JosaDtI_dlcwjA {
    font-size: 14px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .UMSb3gOkVD1bfTia5BXD {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }

  .vRuNZGv21w02bV1qluWB {
    flex: 1 1 100%;
    order: 3;
  }
}

@media (max-width: 480px) {
  .ypfP67KirQkJYkM519ja {
    padding: 0 var(--space-4);
  }

  .g1LY2GCzHUGl6bon8Fkr {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .ROSdmbMc8K6VT0XZo0aR {
    flex-direction: column;
  }

  .PMt9_38dhf8btKPggnZn {
    flex-wrap: wrap;
  }

  .QSM7Pf7NT_N4D2Kf6fqQ {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .gxRwPvcijAE5RIbtLM7_ {
    font-size: 13px;
  }

  .owgMY5JosaDtI_dlcwjA {
    font-size: 13px;
  }

  .RiX5LwthgDDKxq18d0g9 {
    padding-left: 0;
  }

  .ol6BaEEQIqKDkIBeIfmy {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .hin6ErPzc0VGwE9EIaVv {
    margin-left: 42px;
  }

  .x4fHC1W_EjefAHxtpwr4 {
    flex-basis: 100%;
    margin-left: 36px;
    text-align: left;
  }
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*

Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax

base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b

*/
.hljs {
  color: #abb2bf;
  background: #282c34
}
.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
  color: #c678dd
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
  color: #e06c75
}
.hljs-literal {
  color: #56b6c2
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: #98c379
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
  color: #d19a66
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
  color: #61aeee
}
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
  color: #e6c07b
}
.hljs-emphasis {
  font-style: italic
}
.hljs-strong {
  font-weight: bold
}
.hljs-link {
  text-decoration: underline
}
.ucUvXUbCFjgxPQlfkMQI {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-background);
  color: var(--color-text-primary);
}

/* ── Топбар с хлебными крошками ─────────────────────────── */
.K7Oi2ni3jJ4cc3PrRBQ2 {
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--color-background);
}

.EsyLakzieXaGd3N8xwo6 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
}

.BanQ1R2dekqBralZA8nn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.Rxcu8p5wMR5rf_MARG6T {
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.Rxcu8p5wMR5rf_MARG6T:hover {
  color: var(--color-accent);
}

.eQ_wuaJRufkFZEd1rUT7 {
  color: var(--color-text-disabled);
}

.eW6JooXr9SBZgKb8BxhO {
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.volnuE_zxKBZ4QKoyHl4 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.phcohu09ntA07wxr9a8d {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ── Раскладка ──────────────────────────────────────────── */
.WDTH0YfGZnw6BNvxHaUV {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Сайдбар ────────────────────────────────────────────── */
.BH6Qtyh9mqWKUTsn0SHQ {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-background);
}

.gTgtZRxtjTG4fIOWsPkl {
  height: 56px;
  flex-shrink: 0;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.mJM9UWZxQPmAY8qckwDJ {
  padding: var(--space-4) var(--space-2) var(--space-1);
}

.Ei8pOjD9E8FdZbVJ2_jo {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.IsKnWH9XyyEhwIkfPlck {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px var(--space-2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: 1px;
  user-select: none;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
}

.IsKnWH9XyyEhwIkfPlck:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.AV7tO71GkXldIEpWbk5i {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.AV7tO71GkXldIEpWbk5i:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.HovzFti_waR7ai4cD7RA {
  color: var(--color-success);
}

.KnIWVYGsEdfuQdEeaqxo {
  opacity: 0.45;
  cursor: not-allowed;
}

.KnIWVYGsEdfuQdEeaqxo:hover {
  background: transparent;
  color: var(--color-text-secondary);
}

.Rm6p6tSs_V8r2BqLCp9L {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.r6RFRm3OBpdlJRaZjGpV {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2);
}

/* ── Состояния загрузки / ошибки ────────────────────────── */
.RPOlYm9XtUGWuWwDwE0N {
  display: flex;
  justify-content: center;
  padding: 64px 0;
}

.rdPscWbkZkW8GAk2gSQt {
  padding: 48px 0;
  text-align: center;
}

.wevcPh7iJznAd0qtgZ8Q {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* ── Главная область: контент + правая панель ───────────── */
.bVdgSsb8QIWH_X3Q0PW3 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

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

/* ── Админская плашка ───────────────────────────────────── */
.V5LpDACCgModAD1pEtH8 {
  max-width: 760px;
  margin-bottom: var(--space-5);
  padding: var(--space-2) 14px;
  border-radius: var(--radius-md);
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.GW4SxOnpgRzTn9aTmOPa {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-warning);
  letter-spacing: 0.02em;
}

.j9ijcSOHrNU8DPIOnLz3 {
  font-size: 14px;
  line-height: 1;
}

.J5wkmWhs_WmsV0HY5UqD {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-warning);
  background: var(--color-background);
  color: var(--color-warning);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.J5wkmWhs_WmsV0HY5UqD:hover {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}

/* ── Шапка задания ──────────────────────────────────────── */
.vVVlIDofI2awYEX92MwV {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.lVixtVhUvAbUAf4EileR {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 3px var(--space-3);
  border-radius: 20px;
  margin-bottom: var(--space-3);
}

.uTrhjA21kHWhTquDrLju {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.J7ka_X3_rYZtqcSt5oY9 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.qoK9w4cE2gbDm_1IHyQG {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Кнопка «выполнено» (низ контента) + нижняя навигация ── */
.pQhG7As46fJZPyqZaJsG {
  max-width: 760px;
  margin-top: var(--space-12);
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 15px;
  justify-content: center;
}

.Z2xLM3fqsjgPh6bVwi47 {
  max-width: 760px;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.MjMggCSRdweLyVCED8Eh {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: var(--color-background);
  font-weight: 500;
}

.MjMggCSRdweLyVCED8Eh:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.CMAjpsfkJ3xTQNa0tXpe {
  color: var(--color-accent);
  border-color: #c7d2fe;
  background: var(--color-accent-subtle);
}

.CMAjpsfkJ3xTQNa0tXpe:hover {
  background: #e0e7ff;
  border-color: var(--color-accent);
}

/* ── Правая панель (карточка, прилипает при скролле) ─────── */
.ZzSGtg0Oa3NmS23fbGQv {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
}

.SAtE52Uek_X8hOAdXg7k {
  width: 100%;
  justify-content: center;
}

/* Кнопка «Редактировать задание» (ADMIN) — отдельный класс, т.к. на мобиле
   .panelComplete скрывается (дублирует нижний CTA), а эта кнопка нужна всегда. */
.YnnyykHiUZ7guylNzpo2 {
  width: 100%;
  justify-content: center;
}

/* Метка «Выполнено» вместо кнопки самоотметки. */
.J8uZpOHk8WmyVJ9QYOfu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-success-subtle);
  color: var(--color-success);
  font-size: 14px;
  font-weight: 600;
}

/* Пояснение для заданий, которые отмечает ментор. */
.L7Yewctg5TrEsthRuo9d {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
}

.jrxPYi5yqQ10jYL84yKW {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-3);
}

.yZMC4SExTQ18h4pZ3YMQ {
  height: 1px;
  background: var(--color-border);
}

.mKZukmuOw3NHCMFf3K4c {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.Drj3j524qc6fta0usXjr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  font-size: 13px;
}

.HCg__6N2z76c6hwwEY7e {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.EF99NicY3y1NT8d5kTBh {
  min-width: 0;
  text-align: right;
  color: var(--color-text-primary);
  font-weight: 500;
  overflow-wrap: break-word;
}

.cw3xCdkDwNbGypvPZksU {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pcDhJ31u6wDuBJSWp4gy {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  border-radius: 7px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: var(--color-background);
  text-align: left;
}

.pcDhJ31u6wDuBJSWp4gy:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.kVGBlleOXph1NKmh7Cbz {
  color: var(--color-accent);
  border-color: #c7d2fe;
  background: var(--color-accent-subtle);
  font-weight: 500;
}

/* На десктопе кнопка «выполнено» внизу контента дублирует панель — скрываем её,
   на узких экранах правая панель уезжает вниз, поэтому кнопку показываем. */
.pQhG7As46fJZPyqZaJsG {
  display: none;
}

/* ── Вложения задания ───────────────────────────────────── */
.HjJtcbp7dUhYNI6QmwEI {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.BNg26CSJvGfe69UzE4dO {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.xZT3mQQWWBrAVpQ6uYtA {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aiyB4CJLhnNcrkto5Erg {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.aiyB4CJLhnNcrkto5Erg:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.rdu9vRE4LeG51Po4QNpf {
  font-size: 20px;
  line-height: 1;
}

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

.NgLgLPWTO_fN7JYx0MTe {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eI0f0NIj3TmAmO2KNRvw {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.yFsgfXf14Y3cPCPvNbML {
  color: var(--color-text-secondary);
  font-size: 16px;
}

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Контент и правая панель в одну колонку. */
  .bVdgSsb8QIWH_X3Q0PW3 {
    flex-direction: column;
    gap: var(--space-6);
    /* В колонке тянем элементы на всю ширину: иначе align-items:flex-start
       (с десктопа) оставляет контент по ширине содержимого, и широкий блок кода
       распирает страницу вместо внутреннего скролла. */
    align-items: stretch;
  }

  /* правая панель переезжает вниз отдельной колонкой */
  .ZzSGtg0Oa3NmS23fbGQv {
    width: 100%;
    position: static;
    order: 2;
  }

  /* нижнюю кнопку «выполнено» внутри контента показываем,
     панельную дублирующую — прячем, чтобы избежать двойного CTA выше */
  .pQhG7As46fJZPyqZaJsG {
    display: flex;
    margin-top: var(--space-6);
  }

  .SAtE52Uek_X8hOAdXg7k {
    display: none;
  }

  .uTrhjA21kHWhTquDrLju {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .K7Oi2ni3jJ4cc3PrRBQ2 {
    padding: 0 var(--space-4);
  }

  .phcohu09ntA07wxr9a8d {
    display: none;
  }

  /* в крошках на узком экране оставляем только текущую страницу */
  .BanQ1R2dekqBralZA8nn:not(:last-child) {
    display: none;
  }

  .DnaRqQmQPr3jKDmLV0Ye {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .uTrhjA21kHWhTquDrLju {
    font-size: 22px;
  }

  .J7ka_X3_rYZtqcSt5oY9 {
    gap: var(--space-3);
  }

  .Z2xLM3fqsjgPh6bVwi47 {
    flex-direction: column;
    align-items: stretch;
  }

  .MjMggCSRdweLyVCED8Eh {
    justify-content: center;
  }
}

._oIHRiRWDRSV9qI2ga5p {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(2px);
}

.RHwNVKQsAfk_A84VzBfp {
  width: 100%;
  max-width: 420px;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

.CR37I9cTiIfit598Ocv2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.MCRwZmv_aQUml2wYBEek {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}

.oIqjpcQX7wNij_ZUZsN0 {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.dSSnIp3L87XhDd8yIIpx,
.oUNVLxBw7mGtZ4bc2VYc {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.dSSnIp3L87XhDd8yIIpx {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.dSSnIp3L87XhDd8yIIpx:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.oUNVLxBw7mGtZ4bc2VYc {
  border: none;
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.oUNVLxBw7mGtZ4bc2VYc:hover {
  background: var(--color-accent-hover);
}

.iW3WybimsA7jtb7zHyU8 {
  background: var(--color-error);
}

.iW3WybimsA7jtb7zHyU8:hover {
  background: #b91c1c;
}

/* ── Состояния загрузки / ошибки ───────────────────────────── */
.TT188sR2Tq9vyKqMCgiQ {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) 0;
}

.WGGgTZwCsTj9lWiITDFk {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Карточка студента ─────────────────────────────────────── */
.xVPdevJVI1KCTynBebEZ {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.gciwBefybYn20EUus8OK {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gq1w1S2WppC2XYY8heb1 {
  flex: 1;
  min-width: 0;
}

.C8CAePFImATuJHpXg3nC {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

.n0rV7qffwP2p8U82jpzc {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.RPuUzxWtVcvd0gsFSs3i {
  color: var(--color-border);
}

.P8NXBRDkohzvEoL8UYFT {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qTnBacRR6P07TmQYBmv_ {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.GwsgZWUS7zBfNhYf711U {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.Lu6RjJP6aR9eHUbGhQxy {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}

.KYa6_V70WhieHBAODIdJ {
  color: var(--color-accent);
}

.kktkNgY57U5MlG9RhYvJ {
  color: var(--color-success);
}

.GfHfj4gzAuBjj8c0VUX_ {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.HdOFNPHZrIOfXiMG2x_D {
  width: 1px;
  height: 32px;
  background: var(--color-border);
}

.ZDPw4OggOACxRI5XxmVN {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.k03qsFK1Td1HNuqBBEYg {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ── Модуль ────────────────────────────────────────────────── */
.XvCI8n0Adf3TQoZZk2YW {
  margin-bottom: 28px;
}

.oBVc5hdmGPEQbPoxPdPT {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.T3ZxFgmc6nm9gnrL51Qg {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--color-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.d7zKlCR6Ya_Gx3qUzdIR {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.Oo1LS_V6jVe1Qcj9N8CL {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.HR4WiIM0gM0uPvzw8OAw {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.TJClO9E2GWXLZie90axL {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.bpakzZAG7lyqUk99iB1g {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
}

.bpakzZAG7lyqUk99iB1g:hover {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.MrpAenA0pDwa9ROEvqiF {
  color: var(--color-border);
  font-size: 12px;
}

/* ── Список заданий ────────────────────────────────────────── */
.lUo1ACdE5w5tucUQoZtv {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 36px;
}

.W8GRnLUAisLqkevoKwqw {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-background);
}

.sCapVPeY9QzuK7_KeVvs {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--color-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.KHx5a2TMXWXSOQzfTLQX {
  flex: 1;
  min-width: 0;
}

.hi0j18MtyUpkVYTjTHyf {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbWcV16g2ZhDntMcwpGy {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.FXP10ardlbPHRM1uZJ8i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-success);
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success-border);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Тоггл доступа ─────────────────────────────────────────── */
.z21dFOfF0h2ZpXWHDmQH {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.z21dFOfF0h2ZpXWHDmQH input {
  display: none;
}

.W8DHtUyK6GbGollbvyjK {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-surface-elevated);
  border: 1.5px solid var(--color-border);
  position: relative;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.z21dFOfF0h2ZpXWHDmQH input:checked + .W8DHtUyK6GbGollbvyjK {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.dDmWFPpBNpyw7ugRkURh {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-disabled);
  position: absolute;
  top: 1px;
  left: 1px;
  transition: left 0.18s, background 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.z21dFOfF0h2ZpXWHDmQH input:checked + .W8DHtUyK6GbGollbvyjK .dDmWFPpBNpyw7ugRkURh {
  left: 19px;
  background: var(--color-text-inverse);
}

.dn1QBYOVlKJfFmZ4iDSQ {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-disabled);
  min-width: 54px;
}

.z21dFOfF0h2ZpXWHDmQH input:checked ~ .dn1QBYOVlKJfFmZ4iDSQ {
  color: var(--color-accent);
}

/* Тумблер недоступен (ментор смотрит участника-админа) */
.z21dFOfF0h2ZpXWHDmQH:has(input:disabled) {
  cursor: not-allowed;
}

.z21dFOfF0h2ZpXWHDmQH input:disabled + .W8DHtUyK6GbGollbvyjK {
  opacity: 0.5;
}

/* Пометка о блокировке управления (участник-админ) */
.dzvR115H5cCv8qUkBCss {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-warning);
}

/* Кнопка «Открыть весь курс» в карточке студента */
.ed4f6I0G9C2QIOUy5KO_ {
  margin-top: var(--space-3);
  align-self: flex-start;
}

/* ── Планшет / телефон ─────────────────────────────────────── */
@media (max-width: 768px) {
  .xVPdevJVI1KCTynBebEZ {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .gq1w1S2WppC2XYY8heb1 {
    text-align: center;
  }

  .n0rV7qffwP2p8U82jpzc {
    justify-content: center;
  }

  .gciwBefybYn20EUus8OK {
    align-self: center;
  }

  .P8NXBRDkohzvEoL8UYFT {
    flex: 1 1 auto;
  }

  .oBVc5hdmGPEQbPoxPdPT {
    flex-wrap: wrap;
  }

  .TJClO9E2GWXLZie90axL {
    margin-left: 0;
    flex-basis: 100%;
    padding-left: 36px;
  }

  .lUo1ACdE5w5tucUQoZtv {
    padding-left: var(--space-3);
  }
}

@media (max-width: 480px) {
  .W8GRnLUAisLqkevoKwqw {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .KHx5a2TMXWXSOQzfTLQX {
    flex: 1 1 60%;
  }

  .FXP10ardlbPHRM1uZJ8i {
    order: 3;
  }

  .z21dFOfF0h2ZpXWHDmQH {
    order: 4;
    margin-left: auto;
  }

  .HR4WiIM0gM0uPvzw8OAw {
    white-space: normal;
  }
}

.HvQVtZGKOHdf59l4FEaL {
  position: relative;
}

.IvALSPIhhhb2d7FJenzA {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.Y5l3aBrYzljzRVhsQCGi {
  position: relative;
}

.rN6THUZjLj942jl7thOT {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  outline: none;
}
.rN6THUZjLj942jl7thOT:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.rN6THUZjLj942jl7thOT::placeholder {
  color: var(--color-text-disabled);
}

.OX_t07AiINRyqdkyHOCb {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
}

/* ── Выпадающий список результатов ──────────────────────────────────────── */
.fEZpX_6SLAUnwsOWakeq {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.XwytpksEpj58f7VU10r3 {
  padding: var(--space-3);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.TfW7WVd3WC1CZl7A7sMM {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.TfW7WVd3WC1CZl7A7sMM:hover {
  background: var(--color-surface);
}

.KiBFYtP9r0zyG0U16DXE {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.PRLeSvlEmgxmRSWVLT4_ {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.P4GYg7m4WdWuGIZrUijQ {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.N2UU2v1MVWr_6z9wQX6h {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  white-space: nowrap;
}

/* ── Выбранный пользователь ─────────────────────────────────────────────── */
.LJg5pbellvBzqv1Ihp6U {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cgfAQNuy4BsNgFL_2Rsr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.ZJYZG9S3NoiqYvQHzM6v {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.IHdbcfjBf0oG5AMS0dMq {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jRfXRpFXcJcbm7G3oTo9 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
}
.jRfXRpFXcJcbm7G3oTo9:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.erzsEYKPsmqW7s2nAjFP {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(2px);
}

.ZsI5b1BrDtBHLilViWON {
  width: 100%;
  max-width: 420px;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

.C7HtJDrrAZnW_qI5RH4I {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.xcbh52LSEUQIOiw0NhZX {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.VBV4Ll9Za8epAo049MO6 {
  margin-top: var(--space-4);
}

.ayq9KiwDkDvvltrUpDr0 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.lvxUnowLLVHpNbkwqN4b {
  width: 100%;
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L6 6L11 1%27 stroke=%27%236B7280%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.lvxUnowLLVHpNbkwqN4b:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.Bb0gp1w6gYOfNjuQ9GxW {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.O_o6s3uSrgCBUFEtMgtt {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.O_o6s3uSrgCBUFEtMgtt:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.O_o6s3uSrgCBUFEtMgtt:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Хлебные крошки (над хедером, вместо стандартного заголовка) ─────────── */
.q0T7s2EU6Gc1UTlWaiQH {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 14px;
  margin-bottom: var(--space-5);
}
.LAE0Rn8M3y4ohOO2Wbjw {
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.LAE0Rn8M3y4ohOO2Wbjw:hover {
  color: var(--color-accent);
}
.C1rEGNzeMdAARttyXkmJ {
  color: var(--color-text-disabled);
}
.uGrvVyWfqmXtmVC7k9_u {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* ── Заголовок страницы ─────────────────────────────────────────────────── */
.swF9DmkbIkzyX21bBhZg {
  margin-bottom: var(--space-8);
}
.UzjkkX7htrzRZSwTqCvp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: var(--space-2);
}
.zmm52DwjLHr1PyzGWwUf {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.xXmE9tPEz7dHE_nRgoCQ {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ── Карточки статистики ────────────────────────────────────────────────── */
.XVpTktH3a5L_evA_UE3C {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.Br6wAF4isnpPjhV9rDcC {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.B_STct2FqngU9xR5C8dI {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.Lz0XEh1qxxGnugY_Znul {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.EISPYmiZaZ5J21qZM6rP {
  color: var(--color-accent);
}
.ygkK3d7h559kMAcG33lD {
  color: var(--color-success);
}
.eWxeMtx07QPl5GwwjWgG {
  color: var(--color-warning);
}

/* ── Тулбар: поиск + фильтр ─────────────────────────────────────────────── */
.xVNmC5JEEFtkQbQZXOZK {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ofIaKrRiKbxPjrVjJjNO {
  flex: 1;
  max-width: 320px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background)
    url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 fill=%27none%27 viewBox=%270 0 16 16%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%277%27 cy=%277%27 r=%275%27 stroke=%27%239CA3AF%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M11 11l2.5 2.5%27 stroke=%27%239CA3AF%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E")
    no-repeat 12px center;
  outline: none;
}
.ofIaKrRiKbxPjrVjJjNO:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.ofIaKrRiKbxPjrVjJjNO::placeholder {
  color: var(--color-text-disabled);
}

.q2MmnzNLWWTFZOURs4OI {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-secondary);
  background: var(--color-background);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L6 6L11 1%27 stroke=%27%236B7280%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.q2MmnzNLWWTFZOURs4OI:focus {
  border-color: var(--color-accent);
}

.yiMxqhdnKiaIp9CEj09s {
  margin-left: auto;
  white-space: nowrap;
}

/* Бейдж роли участника (для не-админа — без дропдауна). */
.Jm0aA3zTwwdeot8tYhOf {
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
}

/* Бейдж глобальной роли ADMIN — роль в курсе менять нельзя. */
.corgr84Wlld5xk2qcQZi {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 600;
}

/* ── Таблица участников ─────────────────────────────────────────────────── */
.bS5xDtRWKyJKr_eReBYI {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.Z8_yx18Zw02g_ron7FUE {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.Z8_yx18Zw02g_ron7FUE thead th {
  background: var(--color-surface);
  padding: 11px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.Z8_yx18Zw02g_ron7FUE thead th:first-child {
  padding-left: var(--space-5);
}
.Z8_yx18Zw02g_ron7FUE thead th:last-child {
  padding-right: var(--space-5);
  text-align: right;
}
.Z8_yx18Zw02g_ron7FUE tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
.Z8_yx18Zw02g_ron7FUE tbody tr:last-child {
  border-bottom: none;
}
.Z8_yx18Zw02g_ron7FUE tbody tr:hover {
  background: var(--color-surface);
}
.nEXm_X79pg5X6YVczIEm {
  cursor: pointer;
}
.Z8_yx18Zw02g_ron7FUE tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.Z8_yx18Zw02g_ron7FUE tbody tr:last-child td {
  border-bottom: none;
}
.Z8_yx18Zw02g_ron7FUE tbody td:first-child {
  padding-left: var(--space-5);
}
.Z8_yx18Zw02g_ron7FUE tbody td:last-child {
  padding-right: var(--space-5);
}

/* ── Ячейка студента ────────────────────────────────────────────────────── */
.i69QtTFEGc9G0CAnwThX {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.i69QtTFEGc9G0CAnwThX:hover {
  background: var(--color-surface-elevated);
}
.YfEoQJDMUoLYwAGSdOZ_ {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text-inverse);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jpCqaKYqhoN6jRYwX4UT {
  background: var(--color-accent);
}
.M_HTmKiuTbcyZOT5jAM_ {
  background: #059669;
}
.speA7C_2I2lwpmssvKpb {
  background: #7c3aed;
}
.ey3x6ZpRjoDBiK0L69fy {
  background: #e11d48;
}
.aZ2gTPL_ZitgFpjIpsLk {
  background: #ea580c;
}
.GPAf5HaRrYoH7jpT9rVj {
  background: #0d9488;
}
.DjXItei0osL7gx5bg9hi {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.BdCWsueZWzukqGOFpm9Y {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* ── Ячейка прогресса ───────────────────────────────────────────────────── */
.vnZ5K9r3JtekxzSS7iUu {
  min-width: 180px;
}
.PjajMvQq7UNy7htnicgf {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.NzaBhlxbJKz19AQFzaOl {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Открыто заданий ────────────────────────────────────────────────────── */
.XWbrVaz_46Ou43TvQf94 {
  font-size: 13px;
  color: var(--color-text-primary);
  font-weight: 500;
}
.Ppr7HczpuO7qT_B2AfxI {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ── Последняя активность ───────────────────────────────────────────────── */
.faYhcAasbrfLatfOcpGz {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ── Бейдж статуса ──────────────────────────────────────────────────────── */
.dDu36W4FsJgFeCHMW4rS {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.dDu36W4FsJgFeCHMW4rS::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.imr28QtjQpJHvb7Ygap7 {
  background: var(--color-success-subtle);
  color: var(--color-success);
}
.be_SPK31dgNI9NaWGcbk {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}
.UwJn8QfgwCEGRjNZ7xjw {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* ── Действия в строке ──────────────────────────────────────────────────── */
.CD2wKW3FLi7vR0Bupgc1 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.15s;
}
.Z8_yx18Zw02g_ron7FUE tbody tr:hover .CD2wKW3FLi7vR0Bupgc1,
.CD2wKW3FLi7vR0Bupgc1:focus-within {
  opacity: 1;
}
.QwFrj05mO2eV8FSbk27P {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-family: inherit;
}
.QwFrj05mO2eV8FSbk27P:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* ── Действие «Исключить» (только для админа) ───────────────────────────── */
.eG_4I8RIC45BYxWvSnC_ {
  text-align: right;
  white-space: nowrap;
}
.XsgWcnFx5typKEc93QQC {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-family: inherit;
}
.XsgWcnFx5typKEc93QQC:hover:not(:disabled) {
  border-color: var(--color-error);
  color: var(--color-error);
  background: var(--color-error-subtle);
}
.XsgWcnFx5typKEc93QQC:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Дропдаун роли ──────────────────────────────────────────────────────── */
.cdzyPJA1wZ6pO_rFCdB6 {
  position: relative;
}
.Pi1WnmuPJUoD5hj9lsLY {
  font-size: 9px;
  opacity: 0.6;
}
.gJ86Zp8KGl68gHu2fjhL {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 160px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.FtOfJPDLwTIWRAP5FXsk {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Меню в портале: фиксировано к вьюпорту, поверх всех блоков, не обрезается. */
.ai_y_pfqpVDVO5UoPeV6 {
  position: fixed;
  right: auto;
  z-index: 1000;
}
/* Раскрытие вверх — когда под кнопкой не хватает места (последние строки). */
.Aiowv3Ftqvge7t8fy5nV {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(4px);
}
.Aiowv3Ftqvge7t8fy5nV.FtOfJPDLwTIWRAP5FXsk {
  transform: translateY(0);
}
.FhpufzRZMzKRiNFvwfFr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
}
.FhpufzRZMzKRiNFvwfFr:hover {
  background: var(--color-surface);
}
.pSZQeHhNTFbb2hVIo3AL {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}
.OG3ouR71ALV9fhaqvKFQ {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lv0sszfV4edSX0mK1cSx {
  background: var(--color-accent);
}
.IbPjTuori5ox8cO9tRsh {
  background: var(--color-success);
}

/* ── Подпись участника в мобильной карточке (скрыта на десктопе) ─────────── */
.QAF5Ba_Mt0BZNfCupxFP {
  display: none;
}

.VO3xo0bqoz5Z2XYXmjgF {
  padding: var(--space-12) var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.DRy9r_3SJTceSDOqA9hr {
  display: flex;
  justify-content: center;
  padding: var(--space-12) 0;
}

.eJ0xvRpyamkoIeTNf4OO {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.pe8tawMrOkN6VixgYq71 {
  font-size: 14px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ── Планшет ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .XVpTktH3a5L_evA_UE3C {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Мобильный: таблица перестраивается в карточки ──────────────────────── */
@media (max-width: 768px) {
  .xVNmC5JEEFtkQbQZXOZK {
    flex-wrap: wrap;
  }
  .ofIaKrRiKbxPjrVjJjNO {
    max-width: none;
  }

  .bS5xDtRWKyJKr_eReBYI {
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .Z8_yx18Zw02g_ron7FUE,
  .Z8_yx18Zw02g_ron7FUE thead,
  .Z8_yx18Zw02g_ron7FUE tbody,
  .Z8_yx18Zw02g_ron7FUE tr,
  .Z8_yx18Zw02g_ron7FUE td {
    display: block;
    width: 100%;
  }
  .Z8_yx18Zw02g_ron7FUE thead {
    /* визуально скрываем шапку, оставляя доступной для скринридеров */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .Z8_yx18Zw02g_ron7FUE tbody tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
    background: var(--color-background);
  }
  .Z8_yx18Zw02g_ron7FUE tbody tr:hover {
    background: var(--color-background);
  }
  .Z8_yx18Zw02g_ron7FUE tbody td,
  .Z8_yx18Zw02g_ron7FUE tbody td:first-child,
  .Z8_yx18Zw02g_ron7FUE tbody td:last-child {
    padding: var(--space-2) var(--space-4);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .QAF5Ba_Mt0BZNfCupxFP {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }
  .i69QtTFEGc9G0CAnwThX {
    width: 100%;
  }
  .vnZ5K9r3JtekxzSS7iUu {
    min-width: 0;
    flex-direction: column;
    align-items: stretch !important;
  }
  .eTt2xENlnG_vAYi9U9aV {
    width: 100%;
  }
  .CD2wKW3FLi7vR0Bupgc1 {
    opacity: 1;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .gJ86Zp8KGl68gHu2fjhL {
    right: auto;
    left: 0;
  }
}

@media (max-width: 480px) {
  .XVpTktH3a5L_evA_UE3C {
    grid-template-columns: 1fr;
  }
  .QwFrj05mO2eV8FSbk27P {
    flex: 1;
    justify-content: center;
  }
}

.YWfUo7u417UG5H5Ix22K {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(2px);
}

.KFyP4tnS8gGtJ4OrT1r0 {
  width: 100%;
  max-width: 460px;
  background: var(--color-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

.V_tx4XGPxGh9JrbkWZ1A {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.adzj3DwJ1Ld8E19vqOee {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
}

.mRInhSsCQvnuBiQvSSGa {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.aolzKCi5UkqjjSKOxWK4,
.kqZmvomacMIwn6hwKXCQ,
.cnwa3FQ4rtPODzM3W0NR {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.aolzKCi5UkqjjSKOxWK4,
.kqZmvomacMIwn6hwKXCQ,
.cnwa3FQ4rtPODzM3W0NR {
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.aolzKCi5UkqjjSKOxWK4:disabled,
.kqZmvomacMIwn6hwKXCQ:disabled,
.cnwa3FQ4rtPODzM3W0NR:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.aolzKCi5UkqjjSKOxWK4 {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.aolzKCi5UkqjjSKOxWK4:hover:not(:disabled) {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.kqZmvomacMIwn6hwKXCQ {
  border: 1px solid var(--color-error);
  background: var(--color-background);
  color: var(--color-error);
}

.kqZmvomacMIwn6hwKXCQ:hover:not(:disabled) {
  background: var(--color-error-subtle);
}

.cnwa3FQ4rtPODzM3W0NR {
  border: none;
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.cnwa3FQ4rtPODzM3W0NR:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

/* Экран редактирования курса (ADMIN). У макета свой топбар со Save/Cancel,
   поэтому AppLayout не используется — хром воспроизведён на атомах. */

.F9X0wDTA2cnsuKUEX18Y {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--color-background);
  color: var(--color-text-primary);
}

/* ── top-bar ───────────────────────────────────────────── */
.mhoUc8UxX_sRkdDKA77y {
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  background: var(--color-background);
}

.Z3pgBtWK0UghWSYs48Ml {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  min-width: 0;
}

.q0HNBYV1ttG1_COz8NcZ {
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.q0HNBYV1ttG1_COz8NcZ:hover {
  color: var(--color-accent);
}

.DrfHTVvSErbwLHNSH4QN {
  color: var(--color-text-disabled);
}

.TRtUZvYPHAg_2BbjfZUc {
  color: var(--color-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jCwGvGH_xpHbdThjF9MR {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.hBznN9Lr2_lcDbpCdH3j {
  width: 1px;
  height: 24px;
  background: var(--color-border);
}

.XBYGHiZCeyIq12hYOGfj {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.n09lKR7RGAYOHlHOoNrF {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ── layout ────────────────────────────────────────────── */
.y0M2GU5Rn2oi32sBhkr1 {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── sidebar ───────────────────────────────────────────── */
.gj5sgBEmYA9UWUt9z03U {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  background: var(--color-background);
  padding: var(--space-4) var(--space-2);
}

.h7dhr2ZesgUn6r33TImc + .h7dhr2ZesgUn6r33TImc {
  margin-top: var(--space-2);
}

.xju7WfarxEnfc90ABXoF {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2);
}

.lqn6WfxKY7L8WUWjk297 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.pec7gGkw3lSawSyfwaq7 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 7px var(--space-2);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: 1px;
}

.pec7gGkw3lSawSyfwaq7:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.CqZo0JBcDrelnYd6m4PN {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.EXFFxRmgQhXZQa4sciPb {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

/* ── content ───────────────────────────────────────────── */
.MlokNI3fgnIWSL7qbP_G {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-12) var(--space-12);
}

/* ── edit-mode bar ─────────────────────────────────────── */
.bzff3Jc7R8L1t676HARm {
  /* В обычном потоке (не sticky): иначе плашка «всплывает» и наезжает на
     заголовок курса при скролле содержимого. */
  background: var(--color-warning-subtle);
  border-bottom: 1px solid var(--color-warning-border);
  padding: var(--space-3) var(--space-12);
  margin: 0 calc(-1 * var(--space-12)) var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.WmpeFLU3Afwyp0XjSWwB {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-warning);
}

.BjGhTHF4R1vxTzIVPAdn {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* ── course header ─────────────────────────────────────── */
.mWm1ThCQdxghZyhdtYfL {
  margin-bottom: var(--space-8);
}

.R_bLH_USXBarAm6TDaG2 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 3px var(--space-3);
  border-radius: 20px;
  margin-bottom: var(--space-3);
}

.jFn36qz9vpPqkRjrUpag {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}

.pRUpa_IG4Po9DInlqU0u {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.SfQRuLxEeGBZ1H9SHh6L {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── module ────────────────────────────────────────────── */
.Q_V7PzW_tEDZaprOW6aF {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  transition: background 0.12s ease, box-shadow 0.12s ease;
  /* Чтобы при скролле к модулю из меню заголовок не прятался под верхом контента. */
  scroll-margin-top: var(--space-4);
}

/* Модуль-цель при перетаскивании задания из другого модуля. */
.z2AeC6ESH_HZurwjD2rJ {
  background: var(--color-accent-subtle);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.xrQEqOheAZ1lQUu5aZeE {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.xrQEqOheAZ1lQUu5aZeE:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.U3BkNLzNNKm0RamujLEt {
  color: var(--color-text-disabled);
  font-size: 16px;
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
  padding: 2px;
}

.U3BkNLzNNKm0RamujLEt:hover {
  color: var(--color-text-secondary);
}

.U3BkNLzNNKm0RamujLEt:active {
  cursor: grabbing;
}

.NF6z8CuVvpAgp2vDVc6m {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--color-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

._ZdO2iK4tsk1gsCil_N2 {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.KQiFY_koN4NByqXjSR7n {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  cursor: text;
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  margin: -2px calc(-1 * var(--space-1));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.KQiFY_koN4NByqXjSR7n:hover {
  background: var(--color-surface-elevated);
}

.LQ7CWBniJGgvJfgB3RG2 {
  flex: 1;
  min-width: 0;
  font: inherit;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-1);
  background: var(--color-background);
  color: var(--color-text-primary);
  outline: none;
}

.NYEkYRwJWv45dR4bRCiY {
  font-size: 15px;
  font-weight: 600;
}

.JDgxYTx9oPR8OCSC_3ek {
  font-size: 15px;
  font-weight: 500;
}

.jEbDCzwoU6_6Sut6NzZo {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.GtvGyYZz_oohwwX_7K36 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-disabled);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
}

.xrQEqOheAZ1lQUu5aZeE:hover .GtvGyYZz_oohwwX_7K36 {
  opacity: 1;
}

.GtvGyYZz_oohwwX_7K36:hover {
  border-color: var(--color-error);
  color: var(--color-error);
  background: var(--color-error-subtle);
}

/* ── авто-открытие модуля ──────────────────────────────── */
.xNGhvtOj0Db4A3h9IcrZ {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2) var(--space-8);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.MuYoeXs6OD6jlylos05Z {
  font-size: 13px;
  line-height: 1;
}

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

.LgPMmMKI9DZFEquHpgAh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.musx8H5IHQMtKpK8oKmo {
  white-space: nowrap;
}

.Muy5qjVSofnX6LlMI3XD {
  color: var(--color-text-disabled);
}

.Y_XZWHdsz5U9l7Mmz9lG {
  width: 56px;
  font: inherit;
  font-size: 12px;
  text-align: center;
  padding: 3px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: var(--color-text-primary);
  outline: none;
}

.Y_XZWHdsz5U9l7Mmz9lG:focus {
  border-color: var(--color-accent);
}

/* ── task-list ─────────────────────────────────────────── */
.geUNCNhqFPcIO88wJwyJ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: var(--space-8);
}

.ynXs8Y4Hu6SOr76sZFjA {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 13px var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: grab;
}

.ynXs8Y4Hu6SOr76sZFjA:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.ynXs8Y4Hu6SOr76sZFjA:active {
  cursor: grabbing;
}

/* Демонстрация состояния «перетаскивается» (статика, без реальной механики). */
.YZdHmP9zEORIaLKoD8Qi {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
  transform: rotate(-1deg);
  cursor: grabbing;
  position: relative;
  z-index: 5;
}

.YZdHmP9zEORIaLKoD8Qi .U3BkNLzNNKm0RamujLEt {
  opacity: 1;
  color: var(--color-accent);
}

.YZdHmP9zEORIaLKoD8Qi .pPczUyaiAKZVauMqLH3f {
  opacity: 1;
}

/* Drop-zone — визуальный плейсхолдер места вставки (статика). */
.o8B3e_baIwbK5dCJvAkU {
  height: 48px;
  border: 2px dashed var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
  gap: 6px;
}

.iNKFiw0QsWSESrHU9h2k {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--color-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.MWJNnvVIgkAsVVw90wQI {
  flex: 1;
  min-width: 0;
}

.I09Zrl_DY7Fd0C9cUC9w {
  display: block;
  max-width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  border-radius: var(--radius-sm);
  padding: 1px var(--space-1);
  margin: -1px calc(-1 * var(--space-1));
}

.I09Zrl_DY7Fd0C9cUC9w:hover {
  background: var(--color-surface-elevated);
}

/* ── загрузка / ошибка ─────────────────────────────────── */
.ibsqPOJK8vZ0ovk_2pYL {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 240px;
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-12);
}

.dwOgv2eFdN7w35FYHvuc {
  color: var(--color-error);
  font-weight: 500;
}

.jFiCAxQGRviKN8uQLShb {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.gdLiMpLCK14BXgqqAYdn,
.pPczUyaiAKZVauMqLH3f {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-disabled);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
}

.ynXs8Y4Hu6SOr76sZFjA:hover .gdLiMpLCK14BXgqqAYdn,
.ynXs8Y4Hu6SOr76sZFjA:hover .pPczUyaiAKZVauMqLH3f {
  opacity: 1;
}

.gdLiMpLCK14BXgqqAYdn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.YZdHmP9zEORIaLKoD8Qi .gdLiMpLCK14BXgqqAYdn {
  opacity: 1;
}

.pPczUyaiAKZVauMqLH3f:hover {
  border-color: var(--color-error);
  color: var(--color-error);
  background: var(--color-error-subtle);
}

/* ── add buttons ───────────────────────────────────────── */
.XzRmjTL6zB8Dut7gBPfb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--space-3) 0;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}

.XzRmjTL6zB8Dut7gBPfb:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.adrRLKYmc46MRNodUp2B {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-top: var(--space-2);
}

.adrRLKYmc46MRNodUp2B:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* ── Зона удаления лекции (danger zone) ────────────────── */
.MOJSNTFMLEbyHlqWjiHZ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-lg);
  background: var(--color-error-subtle);
}

.lPYRfOgjMECpwNjbajNO {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-error);
}

.hpewqnc1RdAeOE9hPbbg {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.MBVUzBuvBio1YPRnZR2b {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-error);
  background: var(--color-error);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.MBVUzBuvBio1YPRnZR2b:hover {
  opacity: 0.9;
}

.MBVUzBuvBio1YPRnZR2b:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 768px) {
  .MOJSNTFMLEbyHlqWjiHZ {
    flex-direction: column;
    align-items: stretch;
  }
  .MBVUzBuvBio1YPRnZR2b {
    width: 100%;
  }
}

/* ── мобильный гамбургер (скрыт на десктопе) ───────────── */
.Fu_xWg5iLroUu43uq22g {
  display: none;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: var(--space-1);
}

.bD0rtgr15Jy6UAHvmRxV {
  display: none;
}

/* ── адаптив ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .Fu_xWg5iLroUu43uq22g {
    display: inline-flex;
  }

  .Z3pgBtWK0UghWSYs48Ml {
    flex: 1;
  }

  .mhoUc8UxX_sRkdDKA77y {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  /* На узких экранах сайдбар — выезжающая панель. */
  .gj5sgBEmYA9UWUt9z03U {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
    width: 300px;
    max-width: 80vw;
  }

  .SoyJzUfZJFA90kL4mpSN {
    transform: translateX(0);
  }

  .bD0rtgr15Jy6UAHvmRxV {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.32);
    border: none;
  }

  .MlokNI3fgnIWSL7qbP_G {
    padding: 0 var(--space-5) var(--space-8);
  }

  .bzff3Jc7R8L1t676HARm {
    padding: var(--space-3) var(--space-5);
    margin: 0 calc(-1 * var(--space-5)) var(--space-6);
  }

  .n09lKR7RGAYOHlHOoNrF {
    display: none;
  }

  .geUNCNhqFPcIO88wJwyJ {
    padding-left: var(--space-4);
  }

  .xNGhvtOj0Db4A3h9IcrZ {
    margin-left: var(--space-4);
  }

  /* На тач-экранах действия по ховеру недоступны — показываем всегда. */
  .gdLiMpLCK14BXgqqAYdn,
  .pPczUyaiAKZVauMqLH3f,
  .GtvGyYZz_oohwwX_7K36 {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .jCwGvGH_xpHbdThjF9MR {
    gap: var(--space-2);
  }

  .hBznN9Lr2_lcDbpCdH3j,
  .XBYGHiZCeyIq12hYOGfj {
    display: none;
  }

  .jFn36qz9vpPqkRjrUpag {
    font-size: 22px;
  }

  .MlokNI3fgnIWSL7qbP_G {
    padding: 0 var(--space-4) var(--space-6);
  }

  .bzff3Jc7R8L1t676HARm {
    padding: var(--space-2) var(--space-4);
    margin: 0 calc(-1 * var(--space-4)) var(--space-5);
  }

  .xrQEqOheAZ1lQUu5aZeE {
    flex-wrap: wrap;
  }

  .GtvGyYZz_oohwwX_7K36 {
    margin-left: auto;
  }

  .ynXs8Y4Hu6SOr76sZFjA {
    padding: var(--space-3);
    gap: var(--space-2);
  }
}

/* ── Верхняя панель действий редактора (breadcrumb + кнопки) ─── */
.BN6l2whUGxRLlQi32KLH {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

._il0yif4x1sI3RAXms74 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}

.I58Uq8xWq28Jggfh8qbG {
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.I58Uq8xWq28Jggfh8qbG:hover {
  color: var(--color-accent);
}

.lfjEa7xzcrddb3XW011F {
  color: var(--color-text-disabled);
}

.GcATmsjT367JYypdg_e9 {
  color: var(--color-text-primary);
  font-weight: 500;
}

.OAfJIaqp8xyKy0D4GrJU {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.JZWjDJ10_h78j92s9Arw {
  font-size: 12px;
  color: var(--color-text-disabled);
}

.ejUfEaHyEUPvReK9IbMv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
}

.dPTnqUZvyNn79J_GPkMP {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ── Раскладка: основная область + правая панель настроек ───── */
.v0SN3eqPN_hVgNVreJBZ {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.NMSTUlpC9ROWL7ItJMfq {
  flex: 1;
  min-width: 0;
}

/* ── Поля формы ─────────────────────────────────────────────── */
.rgsJEtsYAt3Xi8MzyNaQ {
  margin-bottom: var(--space-8);
}

.MApypao4QUJyiVwEjFmy {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 7px;
}

.ifY_W7SJDoiWX6_6uodH {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 5px;
}

.oYWgz5_83omHmx69M1bw {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  outline: none;
  transition: border-color 0.15s;
}

.oYWgz5_83omHmx69M1bw:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.ORFobGm6JqKeSEUTpdTG {
  font-size: 22px;
  font-weight: 600;
  padding: 12px 16px;
  letter-spacing: -0.015em;
}

.rSTUsDt2UjTAEjqzOXz9 {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 1.7;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}

.rSTUsDt2UjTAEjqzOXz9:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* ── Загрузка обложки ───────────────────────────────────────── */
.HsPPw7Hy75xTuXRMrkdH {
  width: 100%;
  height: 148px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  padding: var(--space-4);
}

.HsPPw7Hy75xTuXRMrkdH:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.WjO1QGN6gGZ8qBGTgQrK {
  font-size: 28px;
}

.mF9UkuqnD8HPP0LN768y {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.pT2fo9cM7NjjAgW4834z {
  font-size: 12px;
  color: var(--color-text-disabled);
}

/* ── Правая панель настроек ─────────────────────────────────── */
.icK3SLFhumcP6W6C_1X8 {
  width: 280px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-background);
}

.t23FRzBbqXFVPU06FpL6 {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.t23FRzBbqXFVPU06FpL6:last-child {
  border-bottom: none;
}

.Idu_zlesZRLdNxUN7kg3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-4);
}

.Uo0BW8w3FZllNAE7kQyA {
  margin-bottom: var(--space-4);
}

.Uo0BW8w3FZllNAE7kQyA:last-child {
  margin-bottom: 0;
}

.fEh4ce1VCSUe35F8mEXu {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  display: block;
}

.s9OYabYhksgrWiLe9tKO {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L6 6L11 1%27 stroke=%27%236B7280%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.s9OYabYhksgrWiLe9tKO:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.HQIWMIftqZGDyaUPE1sM {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  outline: none;
}

.HQIWMIftqZGDyaUPE1sM:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* ── Тоггл «Виден студентам» ─────────────────────────────────── */
.Kr7Qucz5sUbCzYcriMrD {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.kxMviUTEeTheiQoDfT3A {
  font-size: 13px;
  color: var(--color-text-primary);
}

.SOp32XA1OpUPTxd6U5AY {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-surface-elevated);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.15s;
}

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

.SOp32XA1OpUPTxd6U5AY::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  top: 3px;
  left: 3px;
  transition: left 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.FrvbUmRhc0xu0jLFqu4M::after {
  left: 19px;
}

/* ── Опасная зона ───────────────────────────────────────────── */
.Y99ETVMlsUuSJESRwIzM {
  width: 100%;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #fecaca;
  background: var(--color-error-subtle);
  color: var(--color-error);
  text-align: left;
  font-family: inherit;
}

.Y99ETVMlsUuSJESRwIzM:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* ── Адаптив ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .v0SN3eqPN_hVgNVreJBZ {
    flex-direction: column;
  }

  .icK3SLFhumcP6W6C_1X8 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .BN6l2whUGxRLlQi32KLH {
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 480px) {
  .OAfJIaqp8xyKy0D4GrJU {
    width: 100%;
  }

  .ORFobGm6JqKeSEUTpdTG {
    font-size: 18px;
  }
}

.MId0xZPu72JGORmj2A0i {
  position: relative;
  /* Редактор — самодостаточный блок: тулбар закреплён сверху, а длинный контент
     прокручивается ВНУТРИ тела (см. .body). Так панель форматирования всегда
     остаётся над содержимым и не «всплывает» поверх него при скролле страницы. */
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 760px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
}

.ufhNhGuTcudtQcKNagjY {
  /* position: relative — контекст позиционирования для поповера вставки медиа.
     flex-shrink: 0 — тулбар не сжимается, остаётся закреплённым сверху редактора. */
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.Av6Ubz99_19SdbXHP1HI {
  display: inline-flex;
  align-items: center;
}

.Z7gtofGxTkZAhpDWAn3Q {
  width: 1px;
  height: 26px;
  background: var(--color-border);
  margin: 0 8px;
}

.Y7B2cEE4tIAgDhNArZBM {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: inherit;
}

.Y7B2cEE4tIAgDhNArZBM:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.CSQcWQ_lEBw7dgAEk7V8,
.CSQcWQ_lEBw7dgAEk7V8:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* Выбор языка блока кода */
.lCpLIgdRC12f9f3Y0ooE {
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.lCpLIgdRC12f9f3Y0ooE:hover {
  border-color: var(--color-accent);
}

/* Поповер вставки медиа — крепится к низу тулбара, чтобы оставаться рядом
   с кнопкой даже при «липком» тулбаре во время скролла. */
.Az5YbfF5CtLAlxloIIFe {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 12px;
  width: 320px;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.P45jTCu6OzbetGLTpySl {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.wTbEu279EbdAJRdCyNdO {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.wTbEu279EbdAJRdCyNdO:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
}

.vcfuxXp0Glsya6nbpYnG {
  display: none;
}

.qQWU_Mf_oROTsBM7j1LC {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.L_qH1_FMGXHbCWvuQeF8 {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-background);
}

.L_qH1_FMGXHbCWvuQeF8:focus {
  outline: none;
  border-color: var(--color-accent);
}

.PSdlswHmbHWDtfEyuLSR {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

.mgLrOsdq_0yU7nzCmfjA,
.Ijn9ur9m9uMNbWwkcNfy {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.mgLrOsdq_0yU7nzCmfjA {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
}

.mgLrOsdq_0yU7nzCmfjA:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.Ijn9ur9m9uMNbWwkcNfy {
  border: none;
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.Ijn9ur9m9uMNbWwkcNfy:hover {
  background: var(--color-accent-hover);
}

.Ijn9ur9m9uMNbWwkcNfy:disabled {
  background: var(--color-text-disabled);
  cursor: not-allowed;
}

.ECe9P8wcgyAWO0AlZwaG {
  /* Тело прокручивается внутри редактора; тулбар остаётся закреплённым сверху. */
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  padding: 18px 20px;
  outline: none;
}

.ECe9P8wcgyAWO0AlZwaG:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-disabled);
}

.BJJBve3n7jVmVZM290Fc {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-background);
  color: var(--color-text-primary);
}

/* ── top-bar ───────────────────────────────────────────── */
.Dmv7kA8TrWVpa_TjnYfY {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

.cTtZjLQoPeCd5qOH5Gp9 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
}

.LdTN678NbXW44VsI_jbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.zw1eQIpQZj_Fqxaq61Wg {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.zw1eQIpQZj_Fqxaq61Wg:hover {
  color: var(--color-accent);
}

.lPhT_zvkKUvWxmfmEl_x {
  color: var(--color-text-disabled);
}

.CavzBLWhYD3Rk7eDUCEX {
  color: var(--color-text-primary);
  font-weight: 500;
}

.IfiamBTAjqQKOpNbCHsq {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.zPASFCJ4XVIRewzRdiz0 {
  font-size: 12px;
  color: var(--color-text-disabled);
  white-space: nowrap;
}

/* ── layout ────────────────────────────────────────────── */
.UoYDmyk9ERpbdYvjpGsa {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Центрированное состояние загрузки/ошибки на месте всего layout. */
.UlTefmicK8wMWsKDv5dr {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}

/* ── sidebar ───────────────────────────────────────────── */
.YAdHdICKyTdaksJlVz7b {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-background);
}

.PPitzC0VMJnR_l0ejxQN {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.KK5bFpCzzUN1Jg499quM {
  padding: var(--space-4) var(--space-2) var(--space-1);
}

.YWEwlP_IBOwu8hEBxxPu {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.jYuGhQjB7f_0lc_cbesG {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px var(--space-2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 1px;
}

.jYuGhQjB7f_0lc_cbesG:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.QH24KCqa3nI0KwRyqism {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.QH24KCqa3nI0KwRyqism:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.v_64BOatYcc3sAjdF7fX {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

/* ── editor wrap ───────────────────────────────────────── */
.VA0FfCIeVn6wGd076Rtc {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
}

/* ── main editing area ─────────────────────────────────── */
.xLt3UaOp64XmakVBgzt3 {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 36px var(--space-12) 52px;
}

.Vcm6y_1sBgylK41MghyI {
  margin-bottom: 26px;
}

.T6norzMubBwu5UwDW9v7 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 7px;
}

.B62ucjPxjrbgtXRt9tWA {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 5px;
}

.JgBuaXJ7dxofLSxVu9mj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.JgBuaXJ7dxofLSxVu9mj .T6norzMubBwu5UwDW9v7 {
  margin-bottom: 0;
}

.f7dGZM1beMGBT41JOPtI {
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.f7dGZM1beMGBT41JOPtI:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.EwSz4ipATkEKy5H3R7UV {
  margin-top: 10px;
  background: #1a1b26;
  color: #c0caf5;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Редактируемый HTML-исходник (режим «Показать HTML») */
.m3RWNG66VnEvC9zSuQ2O {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  background: #1a1b26;
  color: #c0caf5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
  outline: none;
}

.m3RWNG66VnEvC9zSuQ2O:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.F2c5KbbfHmAlr_uxE4mR {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.jOYkQWnSZBHkSJF23Mwi {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 10px;
}

.M6BCkQQDGYDKbReZ6zoR {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  outline: none;
  transition: border-color 0.15s;
}

.M6BCkQQDGYDKbReZ6zoR:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.XdqFWFUXX_HM7aL8FGcd {
  font-size: 22px;
  font-weight: 600;
  padding: 12px 16px;
  letter-spacing: -0.015em;
}

/* ── rich text editor ──────────────────────────────────── */
.H9XVAqwbgzolJKAr6T9m {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.a9HhG45vQ7RwSG67KJjF {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-wrap: wrap;
}

.TevDIN_Gw1GNqSDcKG2W {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mFVMYKIlh4cLW2uiKVgN {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
}

.mFVMYKIlh4cLW2uiKVgN:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.LY0waSpYfNbZydu_ZmMo {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.LY0waSpYfNbZydu_ZmMo:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.jsxS1eJn0_ZDqJxyO1eQ {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 4px;
}

.lf3FMFUyNVupqdkgVbFC {
  min-height: 300px;
  padding: 18px var(--space-5);
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-primary);
  outline: none;
}

.lf3FMFUyNVupqdkgVbFC p {
  margin-bottom: 10px;
}

.lf3FMFUyNVupqdkgVbFC strong {
  font-weight: 600;
}

.lf3FMFUyNVupqdkgVbFC code {
  font-family: var(--font-mono);
  background: var(--color-surface-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ── attachments ───────────────────────────────────────── */
.UxAlAdSqdX0jpgFMRC7g {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 10px;
}

.s3VkzX2NR4NY_ERCzZdw {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.FTT7JXk8SBShBlCLOsS2 {
  font-size: 18px;
  flex-shrink: 0;
}

.rhAx9kpu1_hjCueZbUwj {
  flex: 1;
  min-width: 0;
}

.hjtFwNE2eVxHSgAdho1C {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AJUK6mPNtVhinFRbqkGo {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.Wu2dUJnc_ZNdCzouHJQk {
  font-size: 16px;
  color: var(--color-text-disabled);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: transparent;
  line-height: 1;
  padding: 0;
}

.Wu2dUJnc_ZNdCzouHJQk:hover {
  color: var(--color-error);
}

.NJGztQGGOXNUM4ARLGoF {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.NJGztQGGOXNUM4ARLGoF:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.NJGztQGGOXNUM4ARLGoF:disabled {
  cursor: default;
  opacity: 0.7;
}

/* ── settings panel ────────────────────────────────────── */
.VqbZ0HlGR16HSA2PmGW4 {
  width: 272px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  background: var(--color-background);
}

.fph05zjZ78yiEEFBZyBA {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.B8SrTyxJzI8OkrSWSetw {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 14px;
}

.q496weWYxFFX2MAU6frc {
  margin-bottom: 14px;
}

.q496weWYxFFX2MAU6frc:last-child {
  margin-bottom: 0;
}

.Pbl6FHafASqHlE1OdJyE {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  display: block;
}

.zPtzmjCVz0S2jL4wLjlP {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L6 6L11 1%27 stroke=%27%236B7280%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.zPtzmjCVz0S2jL4wLjlP:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.jN6YyRzzljAv8zop5jXP {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  outline: none;
}

.jN6YyRzzljAv8zop5jXP:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* toggle */
.WdsnYKvC1bZ2Qu99T3BO {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}

.bVblBOSKFQM8gwoDWenf {
  margin-top: 14px;
}

.kr8p0J7u9Og4JOYQ0X1Z {
  font-size: 13px;
  color: var(--color-text-primary);
}

.LvpZosiBTdzmqhzwh19W {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-accent);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

.RPJvvUkKg9WDt3A6ZOwe {
  background: var(--color-surface-elevated);
}

.LvpZosiBTdzmqhzwh19W::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-background);
  top: 3px;
  right: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.RPJvvUkKg9WDt3A6ZOwe::after {
  right: auto;
  left: 3px;
}

/* content type chips */
.A7qjeoxGF03ydLBcBEW_ {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.NE37VbTqvf7vi2SCGEgI {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-background);
  cursor: pointer;
  font-family: inherit;
}

.sC0yw06Vmzfl3mWZqDAY {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* danger zone */
.vAXpU97mCTdfkA3mQqPF {
  width: 100%;
  padding: var(--space-2) 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #fecaca;
  background: var(--color-error-subtle);
  color: var(--color-error);
  text-align: left;
  font-family: inherit;
}

.vAXpU97mCTdfkA3mQqPF:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* ── адаптив ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .BJJBve3n7jVmVZM290Fc {
    height: auto;
    min-height: 100%;
  }

  .Dmv7kA8TrWVpa_TjnYfY {
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .IfiamBTAjqQKOpNbCHsq {
    width: 100%;
    justify-content: flex-end;
  }

  .UoYDmyk9ERpbdYvjpGsa {
    flex-direction: column;
    overflow: visible;
  }

  .YAdHdICKyTdaksJlVz7b {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .PPitzC0VMJnR_l0ejxQN {
    border-bottom: none;
    border-right: 1px solid var(--color-border);
    padding: 0 var(--space-4);
  }

  .KK5bFpCzzUN1Jg499quM {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }

  .YWEwlP_IBOwu8hEBxxPu {
    display: none;
  }

  .jYuGhQjB7f_0lc_cbesG {
    margin-bottom: 0;
    white-space: nowrap;
  }

  .VA0FfCIeVn6wGd076Rtc {
    flex-direction: column;
    overflow: visible;
  }

  .xLt3UaOp64XmakVBgzt3 {
    overflow-y: visible;
    padding: var(--space-6) var(--space-5) var(--space-8);
  }

  .VqbZ0HlGR16HSA2PmGW4 {
    width: 100%;
    overflow-y: visible;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 480px) {
  .Dmv7kA8TrWVpa_TjnYfY {
    padding: var(--space-3);
  }

  .IfiamBTAjqQKOpNbCHsq {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .zPASFCJ4XVIRewzRdiz0 {
    flex-basis: 100%;
    text-align: right;
  }

  .xLt3UaOp64XmakVBgzt3 {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .fph05zjZ78yiEEFBZyBA {
    padding: var(--space-4);
  }

  .XdqFWFUXX_HM7aL8FGcd {
    font-size: 19px;
  }
}

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

:root {
  /* Базовые цвета */
  --color-background:       #FFFFFF;
  --color-surface:          #F8F9FA;
  --color-surface-elevated: #F1F3F5;
  --color-border:           #E5E7EB;

  /* Текст */
  --color-text-primary:   #111827;
  --color-text-secondary: #6B7280;
  --color-text-disabled:  #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  /* Акцент */
  --color-accent:        #4F46E5;
  --color-accent-hover:  #4338CA;
  --color-accent-active: #3730A3;
  --color-accent-subtle: #EEF2FF;

  /* Семантические */
  --color-success:        #16A34A;
  --color-success-subtle: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-warning:        #D97706;
  --color-warning-subtle: #FFFBEB;
  --color-error:          #DC2626;
  --color-error-subtle:   #FEF2F2;

  /* Типографика */
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", monospace;

  /* Отступы (8px-сетка) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Скругления */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Тени */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  height: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   Единый стиль форматированного контента задания.

   ВАЖНО: класс `.richText` используется ОДНОВРЕМЕННО
     • в конструкторе задания  — RichTextEditor (contentEditable),
     • при показе задания студенту — RichContent (страница TaskView).
   Это единственный источник правды для вида контента. Благодаря этому то, что
   собрано в конструкторе, выглядит на странице задания 1 в 1. Любая правка
   стиля контента — только здесь, в одном месте.

   Стилизуются и СЕМАНТИЧЕСКИЕ теги (h2/h3/strong/em/ul/code/pre/…), которые
   генерирует WYSIWYG-редактор через execCommand, и парные `rc*`-классы богатых
   блоков (видео, блок кода, подсказка, предупреждение, рисунок) — те же классы
   вставляют кнопки конструктора. Семантика и `rc*`-класс оформлены одинаково,
   поэтому набранный текст и вставленные блоки выглядят идентично везде.
   ────────────────────────────────────────────────────────────────────────── */

.richText {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-primary);
  overflow-wrap: break-word;
}

.richText:focus {
  outline: none;
}

/* ── Абзацы ─────────────────────────────────────────────── */
.richText p,
.richText .rcP {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text-primary);
}

/* ── Заголовки ──────────────────────────────────────────── */
.richText h2,
.richText .rcH2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  padding-top: var(--space-1);
}

.richText h3,
.richText .rcH3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Инлайн-форматирование ──────────────────────────────── */
.richText strong,
.richText b {
  font-weight: 600;
}

.richText em,
.richText i {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Жирный + курсив одновременно: оставляем основной цвет (жирный под наклоном),
   а не приглушённый цвет одиночного курсива. */
.richText b em,
.richText b i,
.richText strong em,
.richText strong i,
.richText em b,
.richText em strong,
.richText i b,
.richText i strong {
  color: var(--color-text-primary);
}

.richText u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.richText a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.richText a:hover {
  color: var(--color-accent-hover);
}

/* ── Списки ─────────────────────────────────────────────── */
.richText ul,
.richText ol,
.richText .rcUl,
.richText .rcOl {
  margin: 0;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.richText ul,
.richText .rcUl {
  list-style: disc;
}

.richText ol,
.richText .rcOl {
  list-style: decimal;
}

.richText li {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-primary);
  padding-left: var(--space-1);
}

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

.richText ol li::marker,
.richText .rcOl li::marker {
  color: var(--color-accent);
  font-weight: 600;
}

.richText li b,
.richText li strong {
  font-weight: 600;
}

.richText li em,
.richText li i {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ── Инлайн-код ─────────────────────────────────────────── */
.richText code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

/* ── Простой блок кода (<pre>) — на случай вставки execCommand ── */
.richText pre {
  margin: 0;
  background: #282c34;
  color: #abb2bf;
  padding: var(--space-5);
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
}

.richText pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* ── Богатый блок кода (с шапкой «как в IDE») ────────────── */
.richText .rcCodeBlock {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.richText .codeHeader {
  background: #1a1b26;
  padding: 10px var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.richText .codeLang {
  font-size: 12px;
  font-weight: 600;
  color: #7f849c;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.richText .codeDots {
  display: flex;
  gap: 6px;
}

.richText .codeDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.richText .codeDotRed {
  background: #f38ba8;
}

.richText .codeDotYellow {
  background: #f9e2af;
}

.richText .codeDotGreen {
  background: #a6e3a1;
}

.richText .codePre {
  margin: 0;
  border-radius: 0;
  padding: var(--space-5);
  background: #282c34;
  color: #abb2bf;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  box-shadow: none;
}

.richText .codePre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

/* highlight.js (atom-one-dark) добавляет классу `.hljs` свой фон и padding —
   гасим их, фон/отступы кода задаёт наша обёртка `.codePre` / `pre`. */
.richText pre code.hljs {
  background: none;
  padding: 0;
}

/* ── Подсказка / предупреждение (callout) ───────────────── */
.richText blockquote,
.richText .rcTip {
  margin: 0;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
}

.richText .rcTipLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.richText blockquote p,
.richText .rcTip p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-primary);
}

.richText .rcWarning {
  border-left: 3px solid var(--color-warning);
  background: var(--color-warning-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
}

.richText .rcWarningLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-warning);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.richText .rcWarning p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-primary);
}

/* ── Видео ──────────────────────────────────────────────── */
.richText .rcVideo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0f0f0f;
  aspect-ratio: 16 / 9;
  position: relative;
}

.richText .rcVideoThumb {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.richText .rcVideoPlay {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.richText .rcVideoLabel {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.richText .rcVideoDuration {
  position: absolute;
  bottom: var(--space-3);
  right: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-inverse);
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

/* ── Рисунок / изображение ──────────────────────────────── */
.richText figure,
.richText .rcFigure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Ширина фигуры задаётся инлайн-стилем из конструктора (50%/75%/…); по умолчанию
   фигура растягивается на всю ширину контейнера. */

/* Подсветка выбранного в конструкторе медиа (служебный класс, в сохранённый
   HTML не попадает — снимается в RichTextEditor при отдаче значения). */
.richText .rteSelected {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

/* Несколько медиа в один ряд (бок о бок). */
.richText .rcMediaRow {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}

.richText .rcMediaRow > figure {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
}

@media (max-width: 560px) {
  .richText .rcMediaRow {
    flex-direction: column;
  }
}

/* Пустой слот ряда — плейсхолдер в конструкторе (в сохранённый HTML не попадает). */
.richText .rcSlot {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.richText .rcSlotAdd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
}

.richText .rcSlotHint {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.richText .rcSlotBtns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.richText .rcSlotBtn {
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.richText .rcSlotBtn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.richText img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* Встроенное видео (вставляется конструктором: с ПК или по ссылке) */
.richText video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: #000;
}

.richText figcaption,
.richText .rcCaption {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
  text-align: center;
}

.richText .rcImage {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.richText .rcImageInner {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Блок-схема (декоративная, внутри rcImage) ──────────── */
.richText .diagramLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}

.richText .diagram {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
}

.richText .diagramCol {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.richText .diagramStart {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-5);
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}

.richText .diagramLineV {
  width: 2px;
  height: var(--space-5);
  background: var(--color-text-secondary);
}

.richText .diagramCheck {
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: 12px;
  background: var(--color-background);
}

.richText .diagramBranches {
  display: flex;
  align-items: flex-start;
}

.richText .diagramBranchTrue {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.richText .diagramLineVSuccess {
  width: 2px;
  height: var(--space-5);
  background: var(--color-success);
}

.richText .diagramTrue {
  background: var(--color-success-subtle);
  border: 2px solid var(--color-success);
  color: var(--color-success);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.richText .diagramReturn {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.richText .diagramBranchFalse {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: var(--space-6);
  margin-top: var(--space-5);
}

.richText .diagramFalse {
  background: var(--color-error-subtle);
  border: 2px solid var(--color-error);
  color: var(--color-error);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Адаптив ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .richText .diagram {
    transform: scale(0.85);
    transform-origin: left center;
  }
}

@media (max-width: 480px) {
  .richText .rcImage {
    height: auto;
    min-height: 220px;
  }

  .richText .diagram {
    transform: scale(0.75);
  }
}