/* ============ Токены ============ */
:root {
  --font-d: 'Unbounded', system-ui, sans-serif;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-xl: 32px; --r-lg: 24px; --r-md: 18px; --r-sm: 12px;
  --violet: #ff3d81; --pink: #ec4899; --lime: #c3f53c; --cyan: #22d3ee; --orange: #fb923c;
  --red: #f43f5e; --green: #22c55e; --amber: #f59e0b;
  --grad: linear-gradient(135deg, #ff3d81 0%, #ff6a3d 58%, #ffae3a 100%);
  --grad-2: linear-gradient(135deg, #ffd23f, #ff8a3d);
  --grad-3: linear-gradient(135deg, #c3f53c, #34d399);
  /* для поверхностей с белым текстом: оба конца ≥4.5:1 с белым */
  --grad-ink: linear-gradient(135deg, #e11d6a 0%, #c94a10 100%);
  --accent: #ff3d81;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* плавное экспоненциальное замедление */
  --header-h: 72px;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-2: #f8fafc;
  --surface: #ffffff; --surface-2: rgba(15, 23, 42, .04); --surface-3: rgba(15, 23, 42, .08);
  --solid: #ffffff; --border: #e2e8f0; --border-2: #cbd5e1;
  --text: #0f172a; --muted: #56607a; --faint: #626d82;
  --accent-ink: #c8185f; --accent-ink-2: #b45309;
  --shadow: 0 20px 40px -15px rgba(0, 0, 0, .07);
  --blob-o: .16;
  --ok-bg: rgba(34, 197, 94, .12); --ok: #15803d;
  --bad-bg: rgba(244, 63, 94, .10); --bad: #be123c;
  --warn-bg: rgba(245, 158, 11, .12); --warn: #b45309;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0a0b; --bg-2: #151013;
  --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .075); --surface-3: rgba(255, 255, 255, .12);
  --solid: #1a1416; --border: rgba(255, 255, 255, .085); --border-2: rgba(255, 255, 255, .16);
  --text: #fbf4f2; --muted: #b0a2a5; --faint: #8f8085;
  --accent-ink: #ff86b0; --accent-ink-2: #fdba74;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7);
  --blob-o: .6; --on-accent: #fff; --on-lime: #12140a;
  --ok-bg: rgba(34, 197, 94, .14); --ok: #4ade80;
  --bad-bg: rgba(244, 63, 94, .14); --bad: #fb7185;
  --warn-bg: rgba(245, 158, 11, .15); --warn: #fbbf24;
}

/* ============ База ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.5; min-height: 100dvh; overflow-x: clip;
  transition: background-color .5s var(--ease), color .3s;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(255, 61, 129, .38), transparent 60%),
    radial-gradient(32vmax 32vmax at 92% 12%, rgba(255, 138, 61, .30), transparent 60%),
    radial-gradient(40vmax 40vmax at 60% 100%, rgba(195, 245, 60, .16), transparent 60%);
  opacity: var(--blob-o); animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3vmax, -2vmax, 0) rotate(5deg); } }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-d); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.container { width: min(1240px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.spacer { flex: 1; }
::selection { background: rgba(255, 61, 129, .4); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

/* ============ Шапка (Верхняя плашка как на скринах) ============ */
.topbar {
  position: sticky; top: 0; z-index: 90; height: var(--header-h);
  background: var(--solid);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: background-color .3s var(--ease), border-color .3s, box-shadow .3s;
}
.topbar.scrolled {
  box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.08);
}
.topbar-in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.03em;
  flex-shrink: 0;
}
.logo-mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 17px; transform: rotate(-6deg);
  box-shadow: 0 6px 18px -4px rgba(236, 72, 153, .5); transition: transform .35s var(--ease-out);
}
.logo:hover .logo-mark { transform: rotate(6deg) scale(1.06); }
.logo-word i { color: var(--pink); font-style: normal; }

/* Основная навигация */
.nav-main {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.nav-link:hover, .nav-item.open > .nav-link {
  color: var(--violet);
  background: var(--surface-2);
}
.chevron-ico {
  width: 14px;
  height: 14px;
  transition: transform .2s var(--ease);
  color: var(--muted);
}
.nav-item:hover > .nav-link .chevron-ico,
.nav-item.open > .nav-link .chevron-ico {
  transform: rotate(180deg);
  color: var(--violet);
}

/* --- Мега-меню (скрины 1–4) --- */
.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: var(--solid);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  box-shadow: 0 24px 70px -15px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: none;
  min-height: 380px;
  z-index: 1000;
  overflow: hidden;
  animation: menuIn .2s var(--ease);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega.open .mega-menu {
  display: flex;
}

/* Колонки мега-меню */
.mega-col {
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
}
.mega-col-categories {
  width: 185px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.mega-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.mega-cat-item .chevron-r {
  width: 14px;
  height: 14px;
  color: var(--muted);
  opacity: .8;
  transition: transform .15s;
}
.mega-cat-item:hover {
  background: var(--surface-2);
  color: var(--violet);
}
.mega-cat-item:hover .chevron-r {
  transform: translateX(2px);
  color: var(--violet);
}
/* Активный оранжевый маркер как на скринах */
.mega-cat-item.active {
  background: #fff3ea;
  color: #ea580c;
  font-weight: 700;
}
[data-theme="dark"] .mega-cat-item.active {
  background: rgba(234, 88, 12, 0.20);
  color: #fb923c;
}
.mega-cat-item.active .chevron-r {
  color: #ea580c;
}
[data-theme="dark"] .mega-cat-item.active .chevron-r {
  color: #fb923c;
}

.mega-col-footer {
  margin-top: auto;
  padding-top: 14px;
}
.mega-all-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
}
.mega-all-btn:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: var(--surface-2);
  transform: translateY(-1px);
}

/* Колонка 2 (Классы или прямой список предметов) */
.mega-col-sub {
  width: 175px;
  border-right: 1px solid var(--border);
}
.mega-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.mega-sub-item .chevron-r {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.mega-sub-item:hover {
  background: var(--surface-2);
  color: var(--violet);
}
.mega-sub-item.active {
  background: #fff3ea;
  color: #ea580c;
  font-weight: 700;
}
[data-theme="dark"] .mega-sub-item.active {
  background: rgba(234, 88, 12, 0.20);
  color: #fb923c;
}

/* Колонка 3 (Предметы) */
.mega-col-subjects {
  width: 220px;
}
.mega-subject-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.mega-subject-item:hover {
  background: var(--surface-2);
  color: var(--violet);
  padding-left: 15px;
}

/* Простые дропдауны («Бесплатно», «О нас», скрин 5) */
.simple-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: var(--solid);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  animation: menuIn .2s var(--ease);
}
.nav-item.has-dropdown:hover .simple-dropdown,
.nav-item.has-dropdown.open .simple-dropdown {
  display: flex;
}
.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.dd-item .dd-ico {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--violet);
}
.dd-item .ic {
  width: 16px;
  height: 16px;
}
.dd-item:hover {
  background: var(--surface-2);
  color: var(--violet);
  transform: translateX(2px);
}

/* Правая часть шапки */
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Кнопка «Выбрать предметы» со скрина */
.btn-topbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  background: #5046e5;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(80, 70, 229, 0.35);
  transition: transform .2s var(--ease-out), box-shadow .2s;
  white-space: nowrap;
}
.btn-topbar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(80, 70, 229, 0.45);
  background: #4338ca;
}

/* Телефон со скрина */
.topbar-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.topbar-phone .ic {
  width: 16px;
  height: 16px;
  color: var(--violet);
}

.nav-item.has-mega::after,
.nav-item.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.topbar-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.topbar-login-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--violet);
}
.topbar-login-btn .ic {
  width: 16px;
  height: 16px;
}

.topbar-phone:hover {
  color: var(--violet);
  background: var(--surface-2);
}

/* Кнопка смены темы и мобильного меню */
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .2s var(--ease-out), background .15s;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover {
  transform: translateY(-1px);
  background: var(--surface-2);
  border-color: var(--border-2);
}
.theme-btn span {
  position: absolute;
  transition: transform .4s var(--ease-out), opacity .25s;
}
[data-theme="dark"] .ti-sun, [data-theme="light"] .ti-moon {
  transform: translateY(24px) rotate(90deg);
  opacity: 0;
}
.mobile-menu-btn {
  display: none;
}
.mobile-menu-btn .ic-close {
  display: none;
}
.mobile-menu-btn.is-open .ic-menu {
  display: none;
}
.mobile-menu-btn.is-open .ic-close {
  display: block;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--grad-3);
  color: var(--on-lime);
  cursor: pointer;
  transition: transform .2s var(--ease-out);
}
.avatar:hover { transform: scale(1.06); }

/* Мобильная шторка меню */
.mobile-drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--solid);
  z-index: 85;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  animation: drawerIn .25s var(--ease);
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-drawer-in {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mob-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mob-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 4px;
}
.mob-link {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.mob-link:hover {
  background: var(--surface-2);
  color: var(--violet);
  border-color: var(--border-2);
}
.mob-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}

@media (max-width: 980px) {
  .nav-main { display: none; }
  .mobile-menu-btn { display: grid; }
  .btn-topbar-cta { display: none; }
  .topbar-phone .phone-txt { display: none; }
}

/* ============ Кнопки и чипы ============ */
.btn {
  --bh: 46px; height: var(--bh); padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface-2); border: 1px solid var(--border); transition: transform .3s var(--ease-out), box-shadow .3s, background .2s, opacity .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-primary { background: var(--grad); border: 0; color: #fff; box-shadow: 0 10px 30px -10px rgba(236, 72, 153, .7); }
.btn-primary::after, .btn-lime::after {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: transform .7s var(--ease);
}
.btn-primary:hover::after, .btn-lime:hover::after { transform: translateX(120%) skewX(-20deg); }
.btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(236, 72, 153, .85); }
.btn-lime { background: var(--lime); color: var(--on-lime); border: 0; box-shadow: 0 10px 30px -12px rgba(195, 245, 60, .7); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ok { background: var(--green); color: #fff; border: 0; }
.btn-bad { background: var(--bad-bg); color: var(--bad); border: 1px solid transparent; }
.btn-lg { --bh: 56px; padding: 0 28px; font-size: 16px; }
.btn-sm { --bh: 36px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); letter-spacing: .01em; }
.pill-glow { background: color-mix(in srgb, var(--pink) 16%, transparent); border-color: color-mix(in srgb, var(--pink) 35%, transparent); color: color-mix(in srgb, var(--pink) 60%, var(--text)); }
.chip {
  padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--surface); border: 1px solid var(--border);
  transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease); display: inline-flex; gap: 6px; align-items: center;
}
.chip:hover { border-color: var(--border-2); transform: translateY(-1px); }
.chip.active { background: var(--text); color: var(--bg); border-color: transparent; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-pending { background: var(--warn-bg); color: var(--warn); }
.st-pending::before { animation: pulse 1.6s infinite; }
.st-revision, .st-failed, .st-overdue { background: var(--bad-bg); color: var(--bad); }
.st-accepted, .st-passed, .st-done { background: var(--ok-bg); color: var(--ok); }
.st-new { background: var(--surface-2); color: var(--muted); }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }

/* ============ Bento ============ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 26px;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .45s var(--ease), border-color .3s, box-shadow .4s;
}
.spot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 61, 129, .16), transparent 45%);
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }
.tile.hover-lift:hover { transform: translateY(-4px); border-color: var(--border-2); }
.tile h3 { font-size: 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tile-head h3 { margin: 0; }

/* Появление */
/* без fill-mode: after-анимация не оставляет transform/filter, иначе fixed-элементы
   внутри (меню кабинета, модалки) позиционируются relative к .view, а не к окну */
.view { animation: viewIn .6s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(18px) scale(.99); filter: blur(6px); } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }

/* Стикеры */
.sticker {
  position: absolute; z-index: 3; padding: 10px 16px; border-radius: 16px; font-family: var(--font-d); font-weight: 700; font-size: 13px; line-height: 1.2;
  background: var(--lime); color: var(--on-lime); border: 3px solid #fff; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4);
  transform: rotate(var(--rot, -8deg)); animation: float 5s ease-in-out infinite; text-align: center;
  transition: transform .4s var(--ease-out);
}
.sticker:hover { transform: rotate(0) scale(1.1); }
@keyframes float { 50% { translate: 0 -10px; } }

/* ============ Hero ============ */
.hero { padding-top: 28px; }
.hero-main { padding: 48px; min-height: 460px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.display { font-size: clamp(34px, 5.3vw, 68px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.grad-text { color: #e11d6a; }
.grad-text.g2 { background-image: var(--grad-2); }
.grad-text.g3 { background-image: var(--grad-3); }
.lead { font-size: 18px; color: var(--muted); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.social-proof { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }
.social-proof b { color: var(--text); }
.avatars { display: flex; }
.avatars span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--solid); border: 2px solid var(--bg); margin-left: -10px; font-size: 18px; border-radius: 12px; }
.avatars span:first-child { margin-left: 0; }
.hero-main .sticker { right: 34px; top: 34px; --rot: 9deg; }
.hero-art { background: var(--grad); border: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; color: #fff; }
.hero-art .orb { position: absolute; width: 340px; height: 340px; border-radius: 50%; top: -60px; right: -80px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); filter: blur(4px); animation: float 7s ease-in-out infinite; }
.score-big { position: absolute; inset: 0 0 18% 0; display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: clamp(110px, 13vw, 170px); letter-spacing: -.06em; line-height: 1; color: #fff; text-shadow: 0 24px 50px rgba(120, 20, 40, .35); animation: rocket 6s ease-in-out infinite; font-variant-numeric: tabular-nums; }
@keyframes rocket { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(8px, -18px) rotate(4deg); } }
.hero-art-cap { position: relative; z-index: 2; }
.hero-art-cap b { font-family: var(--font-d); font-size: 44px; display: block; line-height: 1; }
.hero-art-cap span { opacity: .85; font-weight: 600; }
.hero-art .sticker { top: 26px; left: 22px; --rot: -10deg; background: #fff; color: #111; border-color: var(--lime); }

.exam-tile { cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 180px; }
.exam-tile .ex-emoji { font-size: 44px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: var(--g); margin-bottom: 10px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transition: transform .5s var(--ease-out); }
.exam-tile:hover .ex-emoji { transform: rotate(-10deg) scale(1.08); }
.exam-tile h3 { font-size: 30px; margin: 0; }
.exam-tile .arrow { position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); transition: transform .4s var(--ease-out), background .3s; }
.exam-tile:hover .arrow { transform: rotate(-45deg); background: var(--text); color: var(--bg); }
.exam-count { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--muted); }
.feat-tile .big { font-size: 40px; margin-bottom: 10px; display: inline-block; transition: transform .5s var(--ease-out); }
.feat-tile:hover .big { transform: scale(1.2) rotate(-8deg); }
.feat-tile p { color: var(--muted); font-size: 14px; }
.feat-video { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 210, 63, .18), rgba(255, 61, 129, .1) 60%, transparent 85%), var(--surface); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.mini-player { border-radius: 18px; background: #0d0d16; aspect-ratio: 16/10; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.mini-player::before { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 28px; background: radial-gradient(circle at 70% 30%, rgba(236, 72, 153, .5), transparent 60%), radial-gradient(circle at 20% 80%, rgba(34, 211, 238, .4), transparent 60%); }
.mini-player i { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .2); }
.mini-player i::after { content: ''; position: absolute; inset: 0; width: 30%; border-radius: inherit; background: var(--grad); animation: mini 4s var(--ease) infinite; }
@keyframes mini { 0% { width: 5%; } 100% { width: 95%; } }

/* ============ Секции / каталог ============ */
.section { padding: 112px 0 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.035em; }
.section-head p { color: var(--muted); max-width: 440px; }
.kicker { font-size: 15px; color: var(--violet); font-weight: 700; display: block; margin-bottom: 8px; }
.filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  width: 100%;
}

.filters-row {
  width: 100%;
}

.filters-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-search-wrap {
  margin-left: auto;
}

.filters-row-chips {
  width: 100%;
  display: block;
}

.seg {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  gap: 2px;
  isolation: isolate;
  overflow: visible;
}

.seg button {
  position: relative;
  z-index: 2;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.seg button:hover {
  color: var(--text);
}
.seg button.active {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 44px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: color .2s cubic-bezier(.2, .9, .3, 1), background-color .2s cubic-bezier(.2, .9, .3, 1), border-color .2s cubic-bezier(.2, .9, .3, 1), box-shadow .2s cubic-bezier(.2, .9, .3, 1), transform .2s cubic-bezier(.2, .9, .3, 1), opacity .2s cubic-bezier(.2, .9, .3, 1), width .2s cubic-bezier(.2, .9, .3, 1), filter .2s cubic-bezier(.2, .9, .3, 1);
  user-select: none;
  -webkit-user-select: none;
}
.chip:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.chip.active {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .28);
  transform: translateY(-1px) scale(1.02);
}
.chip .ic {
  color: var(--violet);
  transition: color .2s ease, transform .2s ease;
}
.chip.active .ic {
  color: var(--bg) !important;
  transform: scale(1.08);
}

/* ============ Перетекающая капелька для экзаменов (Fluid Droplet Indicator) ============ */
#exam-seg .fluid-drop-pill {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: transform, width, height;
  transform-origin: center center;
  background: var(--grad);
  box-shadow: 0 6px 20px -3px rgba(255, 61, 129, .55), 0 2px 6px -1px rgba(255, 174, 58, .4);
}

.search { margin-left: auto; height: 46px; padding: 0 18px 0 42px; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%239c9ab6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m16 16-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center; border: 1px solid var(--border); min-width: 240px; outline: none; transition: border-color .2s, box-shadow .2s; }
.search:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(255, 61, 129, .18); }
.search:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(255, 61, 129, .18); }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 16px; }
.course-card {
  position: relative; border-radius: var(--r-xl); padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-height: 330px;
  background: var(--surface); border: 1px solid var(--border); overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i) * 55ms);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.course-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; background: var(--g); opacity: .95; z-index: -1; transition: height .6s var(--ease); border-radius: 0 0 40% 40% / 0 0 26px 26px; }
.course-card:hover { transform: translateY(-6px) rotate(-.4deg); border-color: var(--border-2); box-shadow: 0 30px 60px -30px rgba(255, 61, 129, .55); }
.course-card:hover::before { height: 165px; }
.cc-top { display: flex; justify-content: space-between; align-items: center; }
.exam-tag { padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: #fff; font-weight: 800; font-size: 12px; backdrop-filter: blur(6px); }
.badge { padding: 5px 10px; border-radius: 6px; background: var(--lime); color: var(--on-lime); font-weight: 800; font-size: 11px; text-transform: uppercase; transform: rotate(4deg); }
.badge.owned { background: #fff; color: #111; }
.cc-sticker { font-size: 58px; line-height: 1; height: 74px; margin-top: 2px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)); transition: transform .6s var(--ease-out); transform-origin: left bottom; }
.course-card:hover .cc-sticker { transform: rotate(-10deg) scale(1.12) translateY(-4px); }
.course-card h3 { font-size: 18px; margin-top: 18px; }
.cc-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cc-meta span::before { content: '•'; margin-right: 10px; color: var(--faint); }
.cc-meta span:first-child::before { display: none; }
.cc-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border-2); }
.cc-price-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.cc-guar { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.price { white-space: nowrap; }
.price small { color: var(--muted); font-size: 12px; display: block; line-height: 1; }
.price b { font-family: var(--font-d); font-size: 20px; }
.price i { font-style: normal; color: var(--muted); font-size: 13px; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); grid-column: 1/-1; }
.empty .big { font-size: 56px; display: block; margin-bottom: 10px; }

/* Тарифы */
.tariffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.tariff { display: flex; flex-direction: column; gap: 16px; }
.tariff .t-emoji { font-size: 34px; }
.tariff h3 { font-size: 26px; margin: 0; }
.tariff ul { list-style: none; display: grid; gap: 10px; font-size: 15px; }
.tariff li { display: flex; gap: 10px; }
.tariff li::before { content: ''; -webkit-mask: var(--check) center / 14px no-repeat; mask: var(--check) center / 14px no-repeat; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--ok); }
.tariff .btn { margin-top: auto; }
.tariff.popular { background: linear-gradient(color-mix(in srgb, var(--violet) 9%, var(--solid)), color-mix(in srgb, var(--violet) 9%, var(--solid))) padding-box, var(--grad) border-box; border: 2px solid transparent; }
.tariff .sticker { right: 18px; top: 18px; --rot: 8deg; font-size: 12px; }
.tariff .t-price { font-family: var(--font-d); font-size: 32px; font-weight: 800; }
.tariff .t-price small { font-family: var(--font); font-size: 14px; color: var(--muted); font-weight: 600; }

.footer { margin-top: 100px; padding: 40px 0 60px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.footer-in { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.link-btn { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); }

/* ============ Страница курса ============ */
.page { padding-top: 24px; }
.back { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 600; margin-bottom: 16px; transition: gap .3s var(--ease), color .2s; }
.back:hover { gap: 12px; color: var(--text); }
.course-hero { background: var(--g); border: 0; color: #fff; min-height: 340px; display: flex; flex-direction: column; gap: 16px; }
.course-hero h1 { font-size: clamp(28px, 4vw, 48px); max-width: 640px; }
.course-hero p { max-width: 560px; opacity: .9; font-size: 16px; }
.course-hero .cc-sticker { position: absolute; right: 30px; bottom: 20px; font-size: 140px; height: auto; opacity: .95; animation: float 6s ease-in-out infinite; }
.teacher-row { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.teacher-row .ava { width: 48px; height: 48px; border-radius: 16px; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 26px; backdrop-filter: blur(6px); }
.teacher-row small { display: block; opacity: .8; }
.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stats span { padding: 7px 13px; border-radius: 999px; background: rgba(0, 0, 0, .22); font-weight: 700; font-size: 13px; backdrop-filter: blur(6px); }
.buy-box { display: flex; flex-direction: column; gap: 12px; }
.t-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--border); cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease); background: var(--surface); }
.t-option:hover { border-color: var(--border-2); }
.t-option input { position: absolute; opacity: 0; pointer-events: none; }
.t-option .t-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-2); flex: none; transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out), opacity .25s var(--ease-out), width .25s var(--ease-out), filter .25s var(--ease-out); }
.t-option:has(input:checked) { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.t-option:has(input:checked) .t-radio { border: 6px solid var(--violet); }
.t-option .t-name { font-weight: 700; flex: 1; }
.t-option .t-name small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.t-option b { font-family: var(--font-d); font-size: 15px; white-space: nowrap; }
.program-list { list-style: none; display: grid; gap: 8px; counter-reset: l; }
.program-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), width .3s var(--ease), filter .3s var(--ease); }
a.program-item:hover { transform: translateX(6px); border-color: var(--border-2); background: var(--surface-2); }
.program-item .num { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-d); font-size: 14px; background: var(--surface-2); flex: none; }
.program-item.done .num { background: var(--ok-bg); color: var(--ok); }
.program-item .p-title { flex: 1; font-weight: 600; }
.program-item .p-title small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.lock { color: var(--faint); }

/* Прогресс */
.bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; position: relative; }
.bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--g, var(--grad)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.bar i::after { content: none; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.bar.thin { height: 6px; }
.ring { --size: 120px; width: var(--size); height: var(--size); position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring .bg { stroke: var(--surface-3); }
.ring .fg { stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.6s var(--ease); }
.ring .ring-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 26px; }

/* ============ Модалка ============ */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 15, .6); backdrop-filter: blur(10px); animation: fadeIn .3s var(--ease); }
.modal-backdrop.closing { animation: fadeOut .25s var(--ease) forwards; }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 32px; padding: 32px; background: var(--solid); border: 1px solid var(--border); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .6); animation: popIn .5s var(--ease-out); }
.modal.wide { width: min(980px, 100%); padding: 16px; }
.closing .modal { animation: popOut .25s var(--ease) forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes popOut { to { opacity: 0; transform: translateY(20px) scale(.96); } }
.modal-x { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); font-size: 22px; line-height: 1; z-index: 2; transition: transform .3s var(--ease-out); }
.modal-x:hover { transform: rotate(90deg); }
.modal h2 { font-size: 26px; margin-bottom: 6px; }
.modal-sec { margin-top: 20px; display: grid; gap: 10px; }
.label { font-weight: 700; font-size: 14px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 16px; background: var(--surface-2); border: 1.5px solid var(--border); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(255, 61, 129, .16); background: var(--surface); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239c9ab6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.select option { background: var(--solid); color: var(--text); }
.row { display: flex; gap: 10px; align-items: center; }
.summary { border-radius: 20px; padding: 16px 18px; background: var(--surface-2); display: grid; gap: 8px; font-size: 15px; }
.summary div { display: flex; justify-content: space-between; }
.summary .total { font-family: var(--font-d); font-size: 22px; padding-top: 8px; border-top: 1px dashed var(--border-2); }
.secure-note { font-size: 12px; color: var(--muted); text-align: center; }
.processing, .success { text-align: center; padding: 30px 10px; display: grid; gap: 14px; justify-items: center; }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid var(--surface-3); border-top-color: var(--pink); border-right-color: var(--violet); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.success .big { font-size: 90px; animation: boing .9s var(--ease-out); }
@keyframes boing { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1); } }
.lightbox img { border-radius: 20px; max-height: 80dvh; margin: 0 auto; }

/* ============ Дашборд ============ */
.dash-greet { min-height: 230px; display: flex; flex-direction: column; gap: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 61, 129, .22), rgba(255, 138, 61, .1) 55%, transparent 80%), var(--surface); }
.dash-greet h1 { font-size: clamp(28px, 3.4vw, 42px); }
.dash-greet .wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.lvl { display: flex; align-items: center; gap: 14px; margin-top: auto; max-width: 520px; }
.lvl .lvl-badge { font-family: var(--font-d); font-weight: 800; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--lime); color: var(--on-lime); transform: rotate(-6deg); flex: none; }
.lvl .bar { flex: 1; }
.lvl small { color: var(--muted); font-weight: 600; }
.streak { background: linear-gradient(160deg, #fb923c, #ec4899); border: 0; color: #fff; display: flex; flex-direction: column; }
.streak .fire { font-size: 56px; line-height: 1; animation: flicker 1.4s ease-in-out infinite alternate; transform-origin: bottom; display: inline-block; }
@keyframes flicker { to { transform: scale(1.08) rotate(3deg); } }
.streak .num { font-family: var(--font-d); font-size: 52px; font-weight: 800; line-height: 1; }
.week-dots { display: flex; gap: 6px; margin-top: auto; }
.week-dots span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; opacity: .8; }
.week-dots span::before { content: ''; display: block; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .22); margin-bottom: 4px; }
.week-dots span.on::before { background: #fff; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .3); }
.my-course { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease), width .35s var(--ease), filter .35s var(--ease); }
.my-course + .my-course { margin-top: 10px; }
.my-course:hover { border-color: var(--border-2); transform: translateX(4px); }
.my-course .mc-ico { width: 56px; height: 56px; border-radius: 18px; background: var(--g); display: grid; place-items: center; font-size: 28px; }
.my-course h4 { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }
.mc-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.dl-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.dl-item:last-child { border: 0; }
.dl-date { width: 50px; height: 54px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; text-align: center; line-height: 1; flex: none; }
.dl-date b { font-family: var(--font-d); font-size: 18px; display: block; }
.dl-date small { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.dl-date.hot { background: var(--bad-bg); color: var(--bad); }
.dl-date.hot small { color: inherit; }
.dl-body { flex: 1; min-width: 0; }
.dl-body b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-body small { color: var(--muted); font-size: 12px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.wd { border-radius: 16px; padding: 10px 0; text-align: center; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--muted); font-weight: 700; position: relative; }
.wd b { display: block; font-family: var(--font-d); font-size: 18px; color: var(--text); }
.wd.today { background: var(--text); color: var(--bg); border-color: transparent; }
.wd.today b { color: var(--bg); }
.wd.has::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--pink); }
.event { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.event + .event { margin-top: 8px; }
.event .ev-time { font-family: var(--font-d); font-weight: 700; font-size: 14px; min-width: 56px; }
.event .ev-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g); flex: none; }
.event small { display: block; color: var(--muted); font-size: 12px; }
.ach-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ach { text-align: center; padding: 16px 8px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); transition: transform .5s var(--ease-out); }
.ach:hover { transform: rotate(-4deg) scale(1.05); }
.ach .a-ico { font-size: 40px; display: block; margin-bottom: 6px; }
.ach b { font-size: 13px; display: block; }
.ach small { font-size: 11px; color: var(--muted); }
.ach.locked { opacity: .45; filter: grayscale(1); }
.hw-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), width .3s var(--ease), filter .3s var(--ease); }
.hw-row + .hw-row { margin-top: 8px; }
.hw-row:hover { border-color: var(--border-2); }
.hw-row .hw-ico { font-size: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); flex: none; }
.hw-row .dl-body b { font-size: 14px; }
.buy-more { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; background: linear-gradient(135deg, rgba(195, 245, 60, .18), rgba(34, 211, 238, .14)), var(--surface); }

/* ============ Урок ============ */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--text); }
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.lesson-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.lesson-head h1 { font-size: clamp(24px, 3vw, 36px); margin-top: 10px; }
.lesson-head .status-row { display: flex; gap: 8px; flex-wrap: wrap; }
.preview-banner { padding: 12px 18px; border-radius: 18px; background: var(--warn-bg); color: var(--warn); font-weight: 700; margin-bottom: 14px; }

.player { border-radius: 28px; overflow: hidden; background: #07070d; border: 1px solid var(--border); box-shadow: var(--shadow); outline: none; position: relative; user-select: none; }
.player:focus-visible { box-shadow: 0 0 0 3px var(--violet); }
.screen { aspect-ratio: 16/9; position: relative; overflow: hidden; cursor: pointer; background: #07070d; }
.screen video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.sim { position: absolute; inset: 0; color: #fff; }
.sim-bg { position: absolute; inset: -30%; background: var(--g); filter: saturate(1.2); opacity: .75; animation: simbg 16s linear infinite; animation-play-state: paused; }
.sim-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, transparent 0, rgba(7, 7, 13, .7) 70%); }
@keyframes simbg { to { transform: rotate(360deg); } }
.playing .sim-bg, .playing .sym, .playing .eq b { animation-play-state: running; }
.sym { position: absolute; font-family: var(--font-d); font-weight: 800; font-size: clamp(22px, 4vw, 54px); opacity: .22; left: calc(8% + var(--i) * 15%); animation: symf 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); animation-play-state: paused; }
@keyframes symf { 50% { transform: translateY(-24px) rotate(12deg); opacity: .4; } }
.sim-board { position: absolute; left: 6%; right: 30%; top: 50%; transform: translateY(-50%); }
.sim-board h2 { font-size: clamp(20px, 3.4vw, 42px); text-shadow: 0 6px 30px rgba(0, 0, 0, .4); }
.sim-board p { opacity: .75; margin-top: 10px; font-weight: 600; }
.sim-chapter { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.sim-chapter.pop { animation: chpop .6s var(--ease-out); }
@keyframes chpop { from { transform: translateY(10px) scale(.9); opacity: 0; } }
.sim-teacher { position: absolute; right: 5%; bottom: 8%; width: clamp(80px, 16vw, 160px); aspect-ratio: 1; border-radius: 30%; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); display: grid; place-items: center; font-size: clamp(40px, 8vw, 84px); border: 2px solid rgba(255, 255, 255, .25); }
.eq { position: absolute; bottom: 10%; display: flex; gap: 3px; height: 18px; align-items: flex-end; }
.eq b { width: 4px; background: #fff; border-radius: 4px; height: 30%; animation: eq .8s ease-in-out infinite alternate; animation-play-state: paused; }
.eq b:nth-child(2) { animation-delay: -.2s; } .eq b:nth-child(3) { animation-delay: -.5s; } .eq b:nth-child(4) { animation-delay: -.35s; }
@keyframes eq { to { height: 100%; } }
.big-play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #111; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .5); transition: transform .4s var(--ease-out), opacity .3s; z-index: 3; }
.big-play svg { width: 34px; height: 34px; margin-left: 4px; }
.big-play:hover { transform: scale(1.1); }
.big-play::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); animation: ripple 2s infinite; }
@keyframes ripple { to { transform: scale(1.4); opacity: 0; } }
.playing .big-play { opacity: 0; transform: scale(.6); pointer-events: none; }
.player-toast { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 4; backdrop-filter: blur(8px); }
.player-toast.show { opacity: 1; }
.player-err { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; padding: 20px; text-align: center; background: rgba(0, 0, 0, .7); }
.controls { padding: 10px 16px 14px; background: linear-gradient(#0b0b14, #07070d); color: #fff; }
.timeline { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.tl-track { position: absolute; left: 0; right: 0; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); overflow: hidden; transition: height .2s; }
.timeline:hover .tl-track { height: 9px; }
.tl-fill { height: 100%; width: 0; background: var(--grad); border-radius: inherit; }
.tl-mark { position: absolute; width: 3px; height: 11px; background: #07070d; transform: translateX(-50%); z-index: 1; pointer-events: none; }
.tl-thumb { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; transform: translateX(-50%) scale(0); transition: transform .25s var(--ease-out); z-index: 2; box-shadow: 0 0 0 5px rgba(236, 72, 153, .35); pointer-events: none; }
.timeline:hover .tl-thumb { transform: translateX(-50%) scale(1); }
.tl-tip { position: absolute; bottom: 26px; transform: translateX(-50%); padding: 6px 10px; border-radius: 10px; background: #fff; color: #111; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.tl-tip b { font-family: var(--font-d); margin-right: 4px; }
.timeline:hover .tl-tip { opacity: 1; }
.ctrl-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.pbtn { height: 38px; min-width: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; transition: background .2s, transform .3s var(--ease-out); font-weight: 800; font-size: 13px; padding: 0 8px; }
.pbtn:hover { background: rgba(255, 255, 255, .12); transform: scale(1.08); }
.pbtn svg { width: 20px; height: 20px; }
.ptime { font-size: 13px; color: rgba(255, 255, 255, .7); margin-left: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptime b { color: #fff; }
.pchapter { font-size: 13px; color: rgba(255, 255, 255, .6); margin-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pchapter::before { content: '•'; margin-right: 10px; }
.player:fullscreen { border-radius: 0; display: flex; flex-direction: column; }
.player:fullscreen .screen { flex: 1; aspect-ratio: auto; }

.tabs { display: flex; gap: 4px; margin: 20px 0 14px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs button { padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), width .3s var(--ease), filter .3s var(--ease); display: flex; gap: 6px; align-items: center; }
.tabs button.active { background: var(--text); color: var(--bg); }
.tabs .tab-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-size: 11px; display: grid; place-items: center; }
.panel { display: none; }
.panel.active { display: block; animation: viewIn .45s var(--ease); }
.notes { display: grid; gap: 14px; }
.notes ol { padding-left: 0; list-style: none; counter-reset: n; display: grid; gap: 10px; }
.notes li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; }
.notes li::before { content: counter(n); flex: none; width: 28px; height: 28px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-d); font-size: 12px; }
.rule-card { padding: 18px 20px; border-radius: 22px; background: var(--lime); color: var(--on-lime); transform: rotate(-.6deg); }
.rule-card small { font-weight: 700; font-size: 13px; opacity: .75; }
.rule-card p { font-family: var(--font-d); font-size: 18px; font-weight: 700; margin-top: 4px; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s; }
.file-row + .file-row { margin-top: 8px; }
.file-row:hover { border-color: var(--border-2); }
.f-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 11px; color: #fff; flex: none; background: var(--grad-2); overflow: hidden; }
.f-ico.pdf { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.f-ico.img { background: linear-gradient(135deg, #22c55e, #22d3ee); }
.f-ico img { width: 100%; height: 100%; object-fit: cover; }
.f-body { flex: 1; min-width: 0; }
.f-body b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-body small { color: var(--muted); font-size: 12px; }
.f-up { height: 4px; border-radius: 4px; background: var(--surface-3); margin-top: 6px; overflow: hidden; }
.f-up i { display: block; height: 100%; background: var(--grad); animation: up 1s var(--ease) forwards; }
@keyframes up { from { width: 0; } to { width: 100%; } }
.x-btn { width: 32px; height: 32px; border-radius: 10px; color: var(--muted); font-size: 18px; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s; flex: none; }
.x-btn:hover { background: var(--bad-bg); color: var(--bad); }

.hw-section { margin-top: 26px; }
.hw-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.hw-head h2 { font-size: 24px; margin-top: 8px; }
.hw-task { padding: 18px 20px; border-radius: 22px; background: var(--surface-2); margin-bottom: 18px; display: grid; gap: 12px; }
.task-list { padding-left: 22px; display: grid; gap: 6px; }
.dropzone {
  position: relative; border-radius: 26px; padding: 34px 20px; text-align: center; cursor: pointer; display: grid; gap: 6px; justify-items: center;
  border: 2px dashed var(--border-2); background: var(--surface); transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), width .3s var(--ease), filter .3s var(--ease); outline: none;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 7%, transparent); }
.dropzone.drag { border-color: var(--pink); border-style: solid; background: color-mix(in srgb, var(--pink) 10%, transparent); transform: scale(1.015); }
.dz-icon { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; font-size: 32px; background: var(--grad); margin-bottom: 8px; box-shadow: 0 14px 30px -10px rgba(236, 72, 153, .6); transition: transform .5s var(--ease-out); }
.dropzone:hover .dz-icon { transform: translateY(-6px) rotate(-8deg); }
.dropzone.drag .dz-icon { transform: scale(1.2) rotate(8deg); }
.dropzone span { color: var(--muted); font-size: 14px; }
.dropzone u { color: var(--text); }
.upload-list { margin: 14px 0; }
.hw-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

.status-card { border-radius: 24px; padding: 20px; margin-bottom: 18px; display: grid; gap: 14px; border: 1px solid var(--border); }
.status-card.s-pending { background: var(--warn-bg); }
.status-card.s-revision { background: var(--bad-bg); }
.status-card.s-accepted { background: var(--ok-bg); }
.sc-head { display: flex; gap: 14px; align-items: center; }
.sc-head .sc-ico { font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--solid); flex: none; }
.sc-head h3 { font-size: 18px; margin: 0 0 2px; }
.thread { display: grid; gap: 10px; }
.bubble { max-width: 88%; padding: 12px 16px; border-radius: 20px; background: var(--solid); border: 1px solid var(--border); font-size: 14px; }
.bubble.me { justify-self: end; border-bottom-right-radius: 6px; }
.bubble.them { border-bottom-left-radius: 6px; }
.bubble .b-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bubble .b-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bubble .b-files a, .bubble .b-files span { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); }
.score-pill { font-family: var(--font-d); font-weight: 800; padding: 6px 12px; border-radius: 12px; background: var(--lime); color: var(--on-lime); font-size: 14px; }

/* Квиз */
.quiz { display: grid; gap: 14px; }
.q-card { padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); transition: border-color .3s, background .3s; animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.q-card.shake { animation: shake .5s; border-color: var(--bad); }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.q-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.q-num { font-family: var(--font-d); font-size: 13px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-3); flex: none; }
.q-type { font-size: 12px; color: var(--muted); font-weight: 700; }
.q-text { font-weight: 700; font-size: 17px; margin-bottom: 14px; white-space: pre-line; }
.opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.opt { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease); font-weight: 600; }
.opt:hover { border-color: var(--border-2); transform: translateY(-2px); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-l { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); font-family: var(--font-d); font-size: 12px; flex: none; transition: color .3s var(--ease-out), background-color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out), opacity .3s var(--ease-out), width .3s var(--ease-out), filter .3s var(--ease-out); }
.opt.multi .opt-l { border-radius: 8px; }
.opt:has(input:checked) { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); }
.opt:has(input:checked) .opt-l { background: var(--violet); color: #fff; transform: scale(1.1) rotate(-6deg); }
.short-ans { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.short-ans label { font-weight: 800; font-size: 13px; color: var(--muted); }
.short-ans .input { font-family: 'Courier New', monospace; font-weight: 700; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; background-image: repeating-linear-gradient(90deg, transparent 0 31px, var(--border) 31px 32px); }
.hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.q-card.right { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.q-card.wrong { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.q-mark { margin-left: auto; font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 99px; }
.right .q-mark { background: var(--ok-bg); color: var(--ok); }
.wrong .q-mark { background: var(--bad-bg); color: var(--bad); }
.q-card.partial .q-mark { background: var(--warn-bg); color: var(--warn); }
.opt.is-correct { border-color: var(--green); background: var(--ok-bg); }
.opt.is-correct .opt-l { background: var(--green); color: #fff; }
.opt.is-correct.is-missed { border-style: dashed; }
.opt.is-wrong { border-color: var(--red); background: var(--bad-bg); }
.opt.is-wrong .opt-l { background: var(--red); color: #fff; }
.opt.ro { cursor: default; }
.opt.ro:hover { transform: none; }
.opt .tag { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--surface-3); }
.opt .tag.ok { background: var(--ok-bg); color: var(--ok); }
.opt .tag.bad { background: var(--bad-bg); color: var(--bad); }
.opt .tag.miss { background: var(--warn-bg); color: var(--warn); }
.q-answer-note { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--muted); }
.q-answer-order b { display: block; margin-bottom: 6px; color: var(--text); }
.q-answer-order ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.q-answer-order li { padding-left: 2px; }
.q-order.ro .q-order-item .tag { margin-left: auto; flex: none; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--bad-bg); color: var(--bad); }
.explain { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: 14px; }
.explain b { color: var(--violet); }
/* разбор у неверного ответа в «Проверь себя» — по кнопке */
.explain-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 13px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 700 13px var(--font); cursor: pointer; }
.explain-open:hover { border-color: var(--violet); color: var(--violet); }
.explain-open svg { width: 15px; height: 15px; }
.q-retry-one { flex: none; }
.q-retry-one svg { width: 15px; height: 15px; }
/* поле с ошибкой (телефон в заявке) */
.input.is-invalid { border-color: var(--bad, #dc2626) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad, #dc2626) 16%, transparent); }
.ans-line { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ans-line code { font-family: 'Courier New', monospace; font-weight: 800; padding: 3px 10px; border-radius: 8px; background: var(--surface-3); }
.ans-line code.ok { background: var(--ok-bg); color: var(--ok); }
.ans-line code.bad { background: var(--bad-bg); color: var(--bad); text-decoration: line-through; }
.result-head { display: flex; gap: 24px; align-items: center; padding: 22px; border-radius: 26px; background: radial-gradient(120% 160% at 0% 0%, rgba(255, 61, 129, .2), rgba(255, 138, 61, .1) 60%, transparent 85%), var(--surface); border: 1px solid var(--border); flex-wrap: wrap; }
.result-head h3 { font-size: 24px; margin-bottom: 4px; }
.result-head .ring { --size: 110px; }
/* попытки на практику-тест: счётчик в результате и закрытый разбор */
.q-attempt { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.q-attempt svg { width: 15px; height: 15px; }
.q-lock-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); }
.q-lock-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.opt.ro.is-picked { border-color: var(--muted); background: var(--surface-2); }
.opt.ro.is-picked .opt-l { background: var(--surface-3); color: var(--text); }

.lesson-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.lesson-aside .tile { padding: 20px; }
.tc-item { display: flex; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease); align-items: center; font-weight: 600; font-size: 14px; }
.tc-item:hover { background: var(--surface-2); }
.tc-item.active { background: color-mix(in srgb, var(--pink) 14%, transparent); }
.tc-item code { font-family: var(--font-d); font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--surface-3); flex: none; }
.tc-item.active code { background: var(--pink); color: #fff; }
.ls-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; font-size: 14px; font-weight: 600; transition: background .2s; }
.ls-item:hover { background: var(--surface-2); }
.ls-item.current { background: var(--surface-3); }
.ls-dot { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; background: var(--surface-3); flex: none; font-family: var(--font-d); }
.ls-dot.done { background: var(--ok-bg); color: var(--ok); }
.ls-dot.half { background: var(--warn-bg); color: var(--warn); }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

/* ============ Преподаватель ============ */
.t-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat { padding: 18px 20px; }
.stat b { font-family: var(--font-d); font-size: 34px; display: block; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat .s-ico { position: absolute; right: 16px; top: 14px; font-size: 26px; opacity: .9; }
.review-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.sub-list { display: grid; gap: 8px; max-height: 70dvh; overflow: auto; padding: 2px; }
.sub-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border); text-align: left; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease); width: 100%; }
.sub-item:hover { border-color: var(--border-2); }
.sub-item.active { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); }
.s-ava { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-2); flex: none; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thumb { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/5; background: var(--surface-2); position: relative; transition: transform .3s var(--ease-out); }
.thumb:hover { transform: scale(1.03); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb span { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 11px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-thumb { display: grid; place-items: center; text-align: center; padding: 14px; gap: 6px; font-size: 13px; font-weight: 600; }
.doc-thumb .f-ico { width: 56px; height: 56px; font-size: 13px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { font-size: 12px; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s; }
.quick button:hover { border-color: var(--violet); }
.scores { display: flex; gap: 6px; }
.scores button { width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid var(--border); font-family: var(--font-d); font-weight: 700; transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out), opacity .25s var(--ease-out), width .25s var(--ease-out), filter .25s var(--ease-out); }
.scores button.active { background: var(--lime); color: var(--on-lime); border-color: transparent; transform: scale(1.1) rotate(-5deg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1/-1; }
.field label { font-weight: 700; font-size: 13px; color: var(--muted); }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-card { padding: 18px; border-radius: 22px; border: 2px solid var(--border); background: var(--surface); text-align: left; transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease), width .3s var(--ease), filter .3s var(--ease); display: grid; gap: 4px; }
.type-card .big { font-size: 30px; }
.type-card small { color: var(--muted); }
.type-card.active { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); transform: translateY(-2px); }
.qb { padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 10px; animation: cardIn .4s var(--ease); }
.qb-top { display: flex; gap: 10px; align-items: center; }
.qb-top .select { width: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.qb-opt { display: flex; gap: 8px; align-items: center; }
.qb-opt .input { min-height: 42px; padding: 8px 14px; }
.correct-toggle { width: 42px; height: 42px; border-radius: 13px; border: 1.5px solid var(--border-2); flex: none; display: grid; place-items: center; font-weight: 800; transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out), opacity .25s var(--ease-out), width .25s var(--ease-out), filter .25s var(--ease-out); color: transparent; }
.correct-toggle.on { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.05); }
.mini-drop { border: 2px dashed var(--border-2); border-radius: 18px; padding: 16px; text-align: center; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s; }
.mini-drop:hover, .mini-drop.drag { border-color: var(--violet); color: var(--text); }

/* ============ Тосты / конфетти ============ */
#toasts { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .5); animation: toastIn .5s var(--ease-out); }
.toast.warn { background: var(--amber); color: #1b1200; }
.toast.out { animation: toastOut .3s var(--ease) forwards; }
.toast a { font-weight: 800; text-decoration: underline; white-space: nowrap; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.95); } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; width: 100%; height: 100%; }

/* ============ Адаптив ============ */
@media (max-width: 1060px) {
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .lesson-aside { position: static; grid-template-columns: 1fr 1fr; }
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .sub-list { max-height: none; }
  .span-3 { grid-column: span 6; }
  .span-4, .span-5 { grid-column: span 6; }
  .span-7, .span-8 { grid-column: span 12; }
  .hero-art { min-height: 320px; }
  .t-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  :root { --header-h: 62px; }
  body { padding-bottom: 84px; }
  /* backdrop-filter у шапки сделал бы её containing block для fixed-навигации */
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--bg) 94%, transparent); }
  .nav { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; margin: 0; justify-content: space-around; padding: 6px; border-radius: 24px; background: color-mix(in srgb, var(--solid) 88%, transparent); backdrop-filter: blur(16px); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .5); }
  .nav a { flex-direction: column; gap: 2px; font-size: 11px; padding: 8px 10px; border-radius: 18px; flex: 1; }
  .nav-ico { display: block; font-size: 20px; }
  .bento { gap: 12px; }
  .bento > * { grid-column: span 12 !important; }
  .tile { padding: 20px; border-radius: 26px; }
  .hero-main { padding: 26px; min-height: 0; }
  .hero-main .sticker { display: none; }
  .hero-art { min-height: 260px; }
  .feat-video { grid-template-columns: 1fr; }
  .tariffs { grid-template-columns: 1fr; }
  .search { margin-left: 0; width: 100%; min-width: 0; }
  .lesson-aside { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .pchapter, .ptime { display: none; }
  .sim-teacher { display: none; }
  .sim-board { right: 6%; top: auto; bottom: 8%; transform: none; }
  .sim-board h2 { font-size: 18px; }
  .sim-board p, .sim-chapter { display: none; }
  .big-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .big-play svg { width: 24px; height: 24px; }
  .modal { padding: 24px 20px; border-radius: 28px; }
  .my-course { grid-template-columns: 48px 1fr; }
  .my-course .btn { grid-column: 1/-1; }
  .my-course .mc-ico { width: 48px; height: 48px; }
  .course-hero .cc-sticker { font-size: 90px; opacity: .4; }
  .section { padding-top: 72px; }
  .lesson-nav .btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* движение убираем, а смены состояний (цвет, прозрачность) оставляем короткими — обратная связь не теряется */
  *, *::before, *::after { animation-duration: .18s !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
  .tilt, .tilt.tilting, .magnetic, .hover-lift:hover, .cc2:hover, .st2-arrow:hover, .td-next:hover { transform: none !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; }
}

/* ============ Доработки по аудиту redesign-existing-projects ============ */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.price b, .t-price, .ptime, .stat b, .dl-date b, .num, .ring-val, .summary, .hero-art-cap b { font-variant-numeric: tabular-nums; }
/* лёгкое зерно, чтобы градиенты не выглядели стерильно */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.skip { position: fixed; left: 16px; top: -60px; z-index: 500; padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 700; transition: top .2s var(--ease); }
.skip:focus { top: 12px; }
.legal { display: flex; gap: 16px; flex-wrap: wrap; }
.not-found { text-align: center; padding: 80px 20px; display: grid; gap: 16px; justify-items: center; }
.not-found .score-big { position: static; font-size: clamp(110px, 20vw, 200px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: none; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* ============ Векторные иконки ============ */
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }
.btn .ic { width: 1.1em; height: 1.1em; }
h3 .ic, .pill .ic, .status .ic, .chip .ic { color: var(--violet); }
.chip.active .ic { color: inherit; }
.nav-ico .ic { width: 22px; height: 22px; }
.theme-btn .ic { width: 20px; height: 20px; }
.exam-tile .ex-emoji { color: #fff; font-size: 34px; }
.exam-tile .ex-emoji .ic { stroke-width: 1.8; }
.exam-tile .arrow .ic { width: 18px; height: 18px; }
.cc-sticker { color: #fff; font-size: 54px; }
.cc-sticker .ic { stroke-width: 1.6; }
.course-hero .cc-sticker .ic { stroke-width: 1.2; }
.badge .ic { width: 12px; height: 12px; vertical-align: -1px; }
.t-emoji { color: var(--violet); font-size: 30px; }
.tariff.popular .t-emoji { color: var(--pink); }
.mc-ico { color: #fff; }
.mc-ico .ic { width: 26px; height: 26px; }
.teacher-row .ava, .sim-teacher span { font-family: var(--font-d); font-weight: 800; color: #fff; }
.teacher-row .ava { font-size: 16px; }
.sim-teacher span { font-size: clamp(28px, 5vw, 56px); }
.streak .fire .ic { width: 48px; height: 48px; color: #fff; }
.ach .a-ico { color: var(--violet); font-size: 34px; }
.sc-ico { color: var(--violet); }
.sc-ico .ic { width: 28px; height: 28px; }
.s-ico { color: var(--violet); }
.s-ico .ic { width: 24px; height: 24px; }
.hw-row .hw-ico { color: var(--violet); }
.hw-row .hw-ico .ic { width: 20px; height: 20px; }
.dz-icon { color: #fff; }
.dz-icon .ic { width: 30px; height: 30px; }
.empty .big { color: var(--faint); }
.empty .big .ic { width: 48px; height: 48px; stroke-width: 1.6; }
.success .big.success-ic { color: var(--violet); }
.success .big .ic { width: 80px; height: 80px; stroke-width: 1.5; }
.buy-more-ic { color: var(--violet); }
.buy-more-ic .ic { width: 40px; height: 40px; }
.type-card .big { color: var(--violet); }
.type-card .big .ic { width: 28px; height: 28px; }
.opt-l .ic, .ls-dot .ic, .num .ic { width: 15px; height: 15px; }
.f-ico .ic { width: 20px; height: 20px; }
.correct-toggle .ic { width: 18px; height: 18px; }
.x-btn { display: grid; place-items: center; }
.x-btn .ic { width: 16px; height: 16px; }
.modal-x { display: grid; place-items: center; }
.modal-x .ic { width: 18px; height: 18px; }
.lock .ic { width: 18px; height: 18px; }
.hero-stats .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
.thumb span .ic { width: 12px; height: 12px; }
.preview-banner .ic { width: 18px; height: 18px; vertical-align: -3px; }

/* ============ Разгруженная главная ============ */
.hero-main { min-height: 480px; gap: 26px; }
.hero-art { min-height: 480px; }
.hero-note { font-size: 14px; color: var(--muted); }
.hero-note b { color: var(--text); font-family: var(--font-d); }
.lead { max-width: 520px; }
.section-head { margin-bottom: 32px; }
@media (max-width: 1060px) {
  .hero-main, .hero-art { grid-column: span 12; }
  .hero-main, .hero-art { min-height: 0; }
  .hero-art { min-height: 300px; }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .exam-tile.span-4 { grid-column: span 4; }
}

/* =====================================================================
   v3: вход, роли, админка, анимации
   ===================================================================== */
:root { --chart: #e8336f; }
[data-theme="dark"] { --chart: #f2477f; }

/* --- индикатор прокрутки и шапка --- */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.topbar { transition: box-shadow .3s var(--ease), background-color .3s; }
.topbar.scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
.user-slot { position: relative; display: flex; align-items: center; }
button.avatar { border: 0; cursor: pointer; font-family: var(--font-d); }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: 270px; padding: 14px; border-radius: 20px;
  background: var(--solid); border: 1px solid var(--border); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
  display: grid; gap: 4px; transform-origin: top right; animation: menuIn .28s var(--ease-out);
}
.user-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.user-menu > b { font-family: var(--font-d); font-size: 15px; }
.um-xp { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--violet); margin: 6px 0; }
.um-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; font-weight: 600; font-size: 14px; text-align: left; width: 100%; transition: background .2s; }
.um-link:hover { background: var(--surface-2); }
.um-link .ic { color: var(--muted); width: 18px; height: 18px; }

/* --- вход / регистрация --- */
.auth { display: grid; gap: 16px; margin-top: 18px; }
.auth-seg { width: 100%; }
.auth-seg button { flex: 1; }
.auth-form { display: grid; gap: 12px; }
.auth-form .field span, .course-form .field span, .user-form .field span, .promo-form .field span { font-weight: 700; font-size: 13px; color: var(--muted); }
.auth-error { color: var(--bad); font-weight: 600; font-size: 14px; }
.auth-forgot { justify-self: end; margin-top: -6px; padding: 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.auth-forgot:hover { color: var(--accent-ink); }
.auth-back { padding: 0; background: none; border: 0; color: var(--accent-ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.auth-back:hover { text-decoration: underline; }
.auth-form.shake { animation: shake .45s; }
.demo-logins { display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--border-2); }
.demo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-row .btn { flex: 1; }
.gate { max-width: 520px; margin: 40px auto; display: grid; gap: 12px; text-align: center; justify-items: center; }
.gate .auth { text-align: left; width: 100%; }
.gate-ic { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 16px 34px -12px rgba(255, 61, 129, .6); animation: float 5s ease-in-out infinite; }
.gate-ic .ic { width: 32px; height: 32px; }
.course-form, .user-form { display: grid; gap: 12px; margin-top: 16px; }

/* --- кнопки: занятость, волна, магнит, опасные --- */
.btn.is-busy { color: transparent !important; pointer-events: none; }
.btn.is-busy::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--text); border-left-color: transparent; border-right-color: transparent; animation: spin .7s linear infinite; z-index: 2; }
.btn-primary.is-busy::before, .btn-danger.is-busy::before, .btn-ok.is-busy::before { border-top-color: #fff; border-bottom-color: #fff; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: ripple-in .65s var(--ease) forwards; z-index: 0; }
@keyframes ripple-in { to { transform: scale(1); opacity: 0; } }
.magnetic { transform: translate(var(--mx-off, 0), var(--my-off, 0)); transition: transform .35s var(--ease-out), box-shadow .3s; }
.magnetic:active { transform: translate(var(--mx-off, 0), var(--my-off, 0)) scale(.97); }
.btn-danger { background: var(--bad); color: #fff; border: 0; }
.btn-danger:hover { box-shadow: 0 12px 28px -10px var(--bad); }
.ok-line { color: var(--ok); }

/* --- 3D-наклон карточек --- */
.tilt { transform-style: preserve-3d; }
.tilt.tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-6px); transition: transform .12s linear, box-shadow .4s, border-color .3s; }
.course-card.tilting .cc-sticker { transform: translateZ(40px) rotate(-8deg) scale(1.1); }
.exam-tile.tilting .ex-emoji { transform: translateZ(30px) rotate(-10deg) scale(1.08); }

/* --- заголовок по словам --- */
.words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.words .w > span { display: inline-block; animation: wordUp .9s var(--ease) both; animation-delay: calc(120ms + var(--wi) * 70ms); }
@keyframes wordUp { from { transform: translateY(105%) rotate(4deg); opacity: 0; } }

/* --- hero: живой градиент, второе свечение, счёт 100 --- */
.hero-art { background-size: 200% 200%; animation: gradShift 12s ease-in-out infinite alternate; }
@keyframes gradShift { to { background-position: 100% 100%; } }
.orb-2 { width: 220px !important; height: 220px !important; top: auto !important; right: auto !important; bottom: -70px; left: -60px; animation-delay: -3s !important; opacity: .7; }
.score-big { animation: rocket 6s ease-in-out infinite, scoreGlow 4s ease-in-out infinite alternate; }
@keyframes scoreGlow { to { text-shadow: 0 30px 60px rgba(120, 20, 40, .5), 0 0 40px rgba(255, 255, 255, .35); } }

/* --- популярный тариф: вращающаяся рамка --- */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.tariff.popular {
  background: linear-gradient(color-mix(in srgb, var(--violet) 9%, var(--solid)), color-mix(in srgb, var(--violet) 9%, var(--solid))) padding-box,
              conic-gradient(from var(--ang), #ff3d81, #ffae3a, #c3f53c, #22d3ee, #ff3d81) border-box;
  animation: spinBorder 6s linear infinite;
}
@keyframes spinBorder { to { --ang: 360deg; } }

/* --- прогресс в карточке курса --- */
.cc-progress { margin-top: 2px; }

/* --- тосты с иконкой и полоской времени --- */
.toast { position: relative; overflow: hidden; }
.toast > .ic { width: 18px; height: 18px; flex: none; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: left; animation: toastLife var(--life, 3400ms) linear forwards; }
@keyframes toastLife { to { transform: scaleX(0); } }

/* --- скелетоны --- */
.skeleton-wrap { display: grid; gap: 14px; padding: 8px 0; }
.skel { height: 74px; width: var(--w); border-radius: 22px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skel 1.3s linear infinite; }
.skel:first-child { height: 120px; }
@keyframes skel { to { background-position: -200% 0; } }

/* --- переходы между экранами (View Transitions) --- */
.vt .view { animation: none; }
::view-transition-old(root) { animation: vtOut .28s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .5s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.995); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* --- кабинет: оживление --- */
.week-dots span.on::before { animation: dotPop .5s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 300ms); }
@keyframes dotPop { from { transform: scale(.4); opacity: 0; } }
.ach { animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.ach:not(.locked) .a-ico { animation: achGlow 3s ease-in-out infinite alternate; }
@keyframes achGlow { to { filter: drop-shadow(0 0 10px rgba(255, 61, 129, .55)); } }
.sub-item { animation: cardIn .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* --- админка --- */
.admin-tabs { margin-top: 0; }
.admin-panel { animation: viewIn .45s var(--ease); display: grid; gap: 16px; }
.admin-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.admin-bar .search { margin-left: 0; flex: 1; max-width: 420px; }
.table-tile { padding: 0; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td small { display: block; font-size: 12px; }
.table .num-col { text-align: right; white-space: nowrap; }
.table tr.is-blocked td { opacity: .5; }
.table tr.is-blocked td:last-child { opacity: 1; }
.u-cell { display: flex; gap: 12px; align-items: center; min-width: 220px; }
.u-cell .s-ava { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.u-cell .s-ava .ic { width: 18px; height: 18px; }
.mini-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--surface-3); font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.mini-tag.big-tag { font-size: 13px; margin: 0; padding: 4px 10px; font-family: var(--font-d); }
.select-sm, .input-sm { min-height: 38px; padding: 6px 12px; border-radius: 12px; font-size: 14px; width: auto; }
.select-sm { padding-right: 34px; background-position: right 10px center; }
.input-sm { width: 120px; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); transition: background .25s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s var(--ease-out); }
.switch input:checked + span { background: var(--grad); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.promo-form { display: grid; gap: 12px; align-content: start; }
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.danger-zone h3 { margin-bottom: 4px; }

/* график выручки */
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.ch-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.ch-base { stroke: var(--border-2); stroke-width: 1; }
.ch-axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.ch-val { fill: var(--text); font-size: 12px; font-weight: 700; font-family: var(--font); }
.ch-hit { fill: transparent; }
.ch-bar { fill: var(--chart); transform-box: fill-box; transform-origin: bottom; animation: barGrow .9s var(--ease) both; animation-delay: calc(var(--i) * 45ms); transition: opacity .2s; }
@keyframes barGrow { from { transform: scaleY(0); } }
.chart-wrap:hover .ch-bar { opacity: .45; }
.chart-wrap:hover .ch-col.hover .ch-bar { opacity: 1; }
.ch-col.hover .ch-hit { fill: var(--surface-2); }
.ch-tip { position: absolute; transform: translate(-50%, -100%); padding: 8px 12px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 13px; pointer-events: none; display: grid; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); }
.ch-tip[hidden] { display: none; }
.ch-tip span { font-size: 12px; opacity: .8; }
.table-view { margin-top: 10px; font-size: 14px; }
.table-view summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.table-view .table { margin-top: 8px; }
.top-list { display: grid; gap: 14px; }
.top-row { display: grid; gap: 6px; animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.top-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.top-line b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-line span { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.hbar.thin { height: 4px; margin-top: 6px; max-width: 120px; }
.hbar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--chart); transform-origin: left; animation: barGrowX 1s var(--ease) both; }
@keyframes barGrowX { from { transform: scaleX(0); } }

@media (max-width: 760px) {
  .user-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--header-h) + 6px); width: auto; }
  .topbar-actions .btn-sm { padding: 0 12px; }
  .danger-zone .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt.tilting, .magnetic { transform: none !important; }
  .words .w > span { animation: none; }
}

/* атрибут hidden всегда сильнее display у компонентов */
[hidden] { display: none !important; }

.stat b { padding-right: 34px; }
.stat b .cur { font-size: .55em; color: var(--muted); }

/* журнал действий в админке */
.audit { display: grid; gap: 2px; }
.audit-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px dashed var(--border); font-size: 14px; animation: cardIn .4s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.audit-row:last-child { border-bottom: 0; }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.audit-row code { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--surface-3); }

/* =====================================================================
   v4: Фичи конкурентов (100балльный репетитор, Школково)
   Пруфы, лид-форма с мессенджерами, кейсы «было-стало», FAQ, футер,
   тест-драйв первого урока, куки-баннер, документы 152-ФЗ и вычет 13%
   ===================================================================== */

/* --- Пруфы / ключевые метрики (Социальное доказательство) --- */
.proof-section { margin-top: 24px; }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.proof-card {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .3s;
}
.proof-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
}
.proof-card::after { content: none; }
.proof-card:nth-child(2)::after { background: var(--grad-2); }
.proof-card:nth-child(3)::after { background: var(--grad-3); }
.proof-card:nth-child(4)::after { background: linear-gradient(135deg, var(--lime), var(--cyan)); }
.proof-num {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.05;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.proof-card:nth-child(2) .proof-num { background-image: var(--grad-2); }
.proof-card:nth-child(3) .proof-num { background-image: var(--grad-3); }
.proof-card:nth-child(4) .proof-num { background-image: linear-gradient(135deg, var(--lime), var(--cyan)); }
.proof-label {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 600;
}

/* --- Hero top badge & Тест-драйв бейджи --- */
.hero-top-badge { margin-bottom: -6px; }
.trial-badge {
  background: var(--lime);
  color: var(--on-lime);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trial-badge .ic { width: 14px; height: 14px; }
.trial-badge.mini-badge {
  font-size: 10px;
  padding: 2px 7px;
  margin-left: auto;
  border-radius: 6px;
  transform: none;
}
.pill-trial {
  background: color-mix(in srgb, var(--lime) 20%, transparent);
  border-color: color-mix(in srgb, var(--lime) 40%, transparent);
  color: color-mix(in srgb, var(--lime) 70%, var(--text));
  font-weight: 700;
}
.trial-btn {
  color: var(--lime);
  border-color: color-mix(in srgb, var(--lime) 40%, transparent);
}
.trial-btn:hover {
  background: color-mix(in srgb, var(--lime) 15%, transparent);
  color: var(--lime);
  border-color: var(--lime);
}
.cc-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
}
.cc-actions.has-trial {
  grid-template-columns: 1.15fr 1fr;
}
.cc-actions .btn {
  width: 100%;
  padding: 0 8px;
  font-size: 13px;
  --bh: 36px;
  justify-content: center;
  white-space: nowrap;
}
.cc-actions .trial-btn {
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border-color: color-mix(in srgb, var(--lime) 50%, transparent);
  color: var(--lime);
  font-weight: 700;
}
.cc-actions .trial-btn:hover {
  background: color-mix(in srgb, var(--lime) 22%, transparent);
  border-color: var(--lime);
}

/* --- Лид-форма подбора курса (конкуренты) --- */
.lead-box {
  padding: 40px;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 61, 129, .15), rgba(255, 174, 58, .08) 45%, transparent 75%), var(--surface);
  border: 1px solid var(--border-2);
}
.lead-head {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
  max-width: 680px;
}
.lead-head h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
}
.lead-head p {
  font-size: 16px;
}
.hp-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0; padding: 0;
}

/* --- Стилизованный выбор класса --- */
.grade-picker-wrap {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.grade-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.grade-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.grade-hint {
  font-size: 12px;
  color: var(--faint);
  font-weight: 500;
}
.grade-chips {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  isolation: isolate;
}
.grade-chips .grade-chip-indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--violet) 12%, var(--surface));
  border: 2px solid var(--violet);
  box-shadow: 0 8px 30px -4px rgba(255, 61, 129, .38);
  pointer-events: none;
  z-index: 1;
  will-change: transform, width, height;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1),
              width .32s cubic-bezier(.22, 1, .36, 1),
              height .32s cubic-bezier(.22, 1, .36, 1),
              opacity .2s ease;
}
.grade-chip {
  position: relative;
  z-index: 2;
}
.grade-chip.active {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.grade-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 6px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: transform .25s var(--ease-out), border-color .2s, background .2s, box-shadow .3s;
  text-align: center;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.grade-chip:hover {
  border-color: var(--border-2);
  background: var(--surface-3);
  transform: translateY(-2px);
}
.grade-chip.active {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 14%, var(--surface));
  box-shadow: 0 8px 24px -6px rgba(255, 61, 129, .4);
  transform: translateY(-2px);
}
.grade-chip.active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
}
.gc-name {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
}
.gc-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -.01em;
}
.grade-chip.active .gc-sub {
  color: color-mix(in srgb, var(--violet) 75%, var(--text));
}
.grade-chip:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.lead-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: stretch;
}
.lead-inputs .input {
  min-height: 52px;
  font-size: 15px;
}
.lead-inputs .btn {
  min-height: 52px;
  padding: 0 28px;
  white-space: nowrap;
}
.lead-extra {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  max-width: 520px;
  line-height: 1.45;
}
.lead-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--violet);
  cursor: pointer;
}
.lead-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  flex-wrap: wrap;
}
.lead-socials {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-chat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .3s var(--ease-out), background .2s, border-color .2s;
  border: 1px solid var(--border);
}
.btn-chat:hover {
  transform: translateY(-2px);
}
.btn-tg {
  background: rgba(34, 158, 217, .12);
  color: #229ed9;
  border-color: rgba(34, 158, 217, .3);
}
.btn-tg:hover {
  background: rgba(34, 158, 217, .24);
  border-color: #229ed9;
}
.btn-vk {
  background: rgba(0, 119, 255, .12);
  color: #2787f5;
  border-color: rgba(0, 119, 255, .3);
}
.btn-vk:hover {
  background: rgba(0, 119, 255, .24);
  border-color: #2787f5;
}
.lead-success {
  padding: 36px 20px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  animation: cardIn .5s var(--ease);
}
.lead-success-ic {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  display: grid;
  place-items: center;
  font-size: 32px;
  box-shadow: 0 10px 30px -8px rgba(34, 197, 94, .4);
}
.lead-success h3 {
  font-size: 24px;
}
.lead-success p {
  color: var(--muted);
  max-width: 480px;
  font-size: 15px;
}

/* --- Истории учеников «Было → Стало» (Кейсы) --- */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.story-card {
  padding: 26px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--border);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.story-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-2);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, .4);
}
.story-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.story-student {
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-ava {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .3);
  flex: none;
}
.story-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pill-sm {
  padding: 2px 8px;
  font-size: 11px;
}
.story-delta {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.story-progress {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface-2);
}
.sp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.sp-after-val {
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-d);
}
.sp-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 4px;
}
.sp-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 1.2s var(--ease);
}
.sp-before {
  background: var(--muted);
  opacity: .7;
}
.sp-after {
  background: var(--grad);
}
.story-quote {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  position: relative;
  padding-left: 14px;
  border-left: 1px solid var(--violet);
  margin: 0;
}
.story-teacher {
  font-size: 13px;
  color: var(--text);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* --- FAQ Аккордеон с плавной анимацией раскрытия и сворачивания --- */
.faq-list {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.faq-item {
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .3s, background-color .3s, box-shadow .3s, transform .25s;
}
.faq-item:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .06);
}
.faq-item[open], .faq-item.is-active {
  border-color: color-mix(in srgb, var(--violet) 40%, transparent);
  background: color-mix(in srgb, var(--violet) 3.5%, var(--surface));
  box-shadow: 0 14px 40px -12px rgba(255, 61, 129, .15);
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 16px;
  user-select: none;
  transition: color .2s;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover {
  color: var(--violet);
}
.faq-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
  flex: none;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .25s, color .25s;
}
.faq-item[open] .faq-ico, .faq-item.is-active .faq-ico {
  transform: rotate(180deg);
  background: var(--violet);
  color: #fff;
}
.faq-collapse {
  overflow: hidden;
  will-change: height, opacity;
}
.faq-ans {
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}
.faq-ans p {
  max-width: 780px;
}
/* --- Богатый трастовый футер --- */
.footer {
  margin-top: 110px;
  padding: 60px 0 36px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 60%, var(--bg));
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.f-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.f-desc {
  line-height: 1.5;
  color: var(--muted);
  font-size: 13px;
}
.f-contacts {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.f-phone {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}
.f-phone:hover {
  color: var(--violet);
}
.f-socials {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.s-link {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform .3s var(--ease-out), background .2s, color .2s, border-color .2s;
}
.s-link .ic { width: 20px; height: 20px; }
.s-link:hover {
  transform: translateY(-3px) scale(1.05);
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}
.f-col h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text);
  letter-spacing: -.01em;
}
.f-col ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.f-col a, .f-col .link-btn {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s, transform .2s;
  display: inline-block;
  text-align: left;
}
.f-col a:hover, .f-col .link-btn:hover {
  color: var(--text);
  transform: translateX(3px);
}
.legal-links .link-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.pay-trust {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pay-badge {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .02em;
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Бесплатный тест-драйв в курсе и на уроке --- */
.trial-box {
  border: 1.5px dashed color-mix(in srgb, var(--lime) 50%, transparent);
  background: color-mix(in srgb, var(--lime) 8%, var(--surface));
  border-radius: 20px;
  padding: 20px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.trial-box h4 {
  font-size: 16px;
}
.trial-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}
.trial-divider::before, .trial-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.trial-divider span {
  padding: 0 10px;
}
.program-item.is-trial {
  border-color: color-mix(in srgb, var(--lime) 40%, transparent);
  background: color-mix(in srgb, var(--lime) 5%, var(--surface));
}
.trial-banner {
  margin-bottom: 18px;
  padding: 14px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 15%, transparent), color-mix(in srgb, var(--pink) 15%, transparent)), var(--surface);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, transparent);
  animation: viewIn .4s var(--ease);
}
.trial-banner-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}
.trial-banner-in span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Куки-баннер (Cookie consent 152-ФЗ) --- */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  max-width: 580px;
  width: calc(100% - 48px);
  padding: 14px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--solid) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-2);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .5);
  animation: toastIn .4s var(--ease-out);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cookie-banner.fade-out {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
}
.cookie-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.cookie-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookie-icon .ic {
  width: 16px;
  height: 16px;
}
.cookie-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
  display: block;
}
.cookie-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 700;
  padding: 9px 18px;
}
.link-btn.inline {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s;
}
.link-btn.inline:hover {
  color: var(--text);
}

/* --- Модалка юридических документов --- */
.legal-modal {
  display: grid;
  gap: 16px;
}
.legal-modal h2 {
  font-size: 24px;
  padding-right: 40px;
}
.legal-body {
  max-height: 60vh;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  display: grid;
  gap: 14px;
  padding-right: 6px;
}
.legal-body b {
  color: var(--text);
  display: block;
  margin-bottom: 2px;
  font-size: 15px;
}

/* --- Админка: статусы заявок и истории --- */
.lead-status-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Адаптив для новых компонентов --- */
@media (max-width: 1060px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grade-chips { grid-template-columns: repeat(3, 1fr); }
  .lead-inputs { grid-template-columns: 1fr 1fr; }
  .lead-inputs .btn { grid-column: 1/-1; }
}
@media (max-width: 760px) {
  .proof-grid { grid-template-columns: 1fr; gap: 10px; }
  .proof-card { padding: 18px 16px; }
  .lead-box { padding: 24px 18px; }
  .grade-chips { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .grade-chip { padding: 10px 6px; border-radius: 14px; }
  .gc-name { font-size: 13px; }
  .gc-sub { font-size: 10px; }
  .lead-inputs { grid-template-columns: 1fr; gap: 10px; }
  .lead-inputs .btn { width: 100%; }
  .lead-extra { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stories-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .cookie-banner { left: 12px; right: 12px; bottom: 84px; width: auto; max-width: none; padding: 14px 16px; border-radius: 18px; }
  .cookie-in { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-content { align-items: flex-start; }
  .cookie-btn { align-self: stretch; width: 100%; justify-content: center; }
  .trial-banner-in { flex-direction: column; align-items: flex-start; }
  .trial-banner-in .btn { width: 100%; }
}

/* ==========================================================================
   БАНК ЗАДАНИЙ ФИПИ (ЕГЭ, ОГЭ, ВПР) — Стиль по макету Умскул
   ========================================================================== */

.tasks-page-wrap {
  width: 100%;
  min-height: calc(100vh - 76px);
  background: var(--bg);
  padding: 24px 0 80px;
}

.tasks-layout {
  display: grid;
  grid-template-columns: 210px 1fr 290px;
  gap: 24px;
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Левая колонка навигации --- */
.tasks-nav-col {
  position: sticky;
  top: 92px;
}
.tasks-nav-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, .04);
}
.tasks-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease), width .2s var(--ease), filter .2s var(--ease);
  text-align: left;
  width: 100%;
  user-select: none;
}
.tasks-nav-item:hover {
  background: var(--surface-2);
  transform: translateX(2px);
}
.tasks-nav-item.active {
  background: rgba(255, 61, 129, .1);
  color: var(--pink);
  font-weight: 700;
}
.tasks-nav-item.active .t-nav-ico {
  color: var(--pink);
}
.t-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color .2s;
}

/* --- Центральная колонка --- */
.tasks-main-col {
  min-width: 0;
}
.tasks-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tasks-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tasks-page-title {
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}
.tasks-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: help;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
}
.tasks-info-btn:hover {
  color: var(--pink);
  border-color: var(--pink);
}
.btn-reset-tasks {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1.5px solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-reset-tasks:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* Строка поиска */
.tasks-search-wrap {
  position: relative;
  margin-bottom: 22px;
}
.tasks-search-input {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 20px 0 46px;
  font-size: 14px;
  outline: none;
  transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, .04);
}
.tasks-search-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 61, 129, .15);
}
.tasks-search-ico {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* Карточки заданий */
.task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, .04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
  animation: cardIn .4s var(--ease) both;
}
.task-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .09);
}
.task-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.t-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.t-badge-exam {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.t-badge-sub {
  background: #ede9fe;
  color: #6d28d9;
}
.t-badge-status {
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.t-badge-status.correct {
  background: #dcfce7;
  color: #15803d;
}
.t-badge-status.wrong {
  background: #fee2e2;
  color: #b91c1c;
}
.t-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}
.task-crumbs {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.task-crumbs b {
  color: var(--text);
  font-weight: 600;
}
.task-crumbs .crumb-dot {
  color: var(--faint);
}
.task-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text);
  margin-bottom: 22px;
}
.task-body p {
  margin: 0 0 12px;
}
.task-body p:last-child {
  margin-bottom: 0;
}
.task-body ul, .task-body ol {
  margin: 10px 0 14px 22px;
  padding: 0;
}
.task-body li {
  margin-bottom: 6px;
}
.task-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 14px 0;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--border);
  display: block;
}
.task-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px dashed var(--border-2);
}
.task-input-wrap {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
.task-ans-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
}
.task-ans-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 61, 129, .16);
}
.task-ans-input.correct {
  border-color: #16a34a !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}
.task-ans-input.wrong {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  animation: taskShake .4s var(--ease);
}
.btn-check-task {
  height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-sol-toggle {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
}
.btn-sol-toggle:hover {
  border-color: var(--border-2);
  background: var(--surface);
}
.btn-sol-toggle svg {
  transition: transform .25s var(--ease);
}
.btn-sol-toggle.expanded svg {
  transform: rotate(180deg);
}
.btn-fav-task {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
  font-size: 18px;
  margin-left: auto;
}
.btn-fav-task:hover {
  color: #eab308;
  border-color: #eab308;
  background: rgba(234, 179, 8, .08);
}
.btn-fav-task.active {
  color: #eab308;
  border-color: #eab308;
  background: rgba(234, 179, 8, .12);
}

/* Аккордеон решения */
.task-sol-panel {
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.68;
  animation: taskSolIn .3s var(--ease) both;
}
.sol-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sol-official-ans {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-block;
}
.sol-official-ans code {
  font-size: 15px;
  font-weight: 700;
  color: var(--pink);
  margin-left: 6px;
}

@keyframes taskSolIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes taskShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* --- Правая колонка фильтров --- */
.tasks-filter-col {
  position: sticky;
  top: 92px;
}
.tasks-filter-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, .04);
}
.tasks-filter-box .filter-label {
  display: none !important;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.filter-select {
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
  width: 100%;
}
.filter-select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 61, 129, .15);
}
.filter-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  user-select: none;
  padding: 4px 0;
  color: #1e293b;
}
.filter-checkbox-wrap input[type="checkbox"] {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  accent-color: #ff7a00;
  cursor: pointer;
}
.filter-stats-pill {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* --- Вкладка Пробные варианты --- */
.variants-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 24px;
  text-align: center;
}
.variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.variant-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease), width .25s var(--ease), filter .25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.variant-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .1);
}

/* --- Вкладка Эмулятор КЕГЭ --- */
.kege-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
}
.kege-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.kege-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.kege-code-area {
  width: 100%;
  height: 380px;
  font-family: monospace;
  font-size: 14px;
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 12px;
  padding: 16px;
  border: none;
  outline: none;
  resize: vertical;
}

/* Адаптив Банка заданий */
@media (max-width: 1200px) {
  .tasks-layout {
    grid-template-columns: 1fr 280px;
  }
  .tasks-nav-col {
    grid-column: 1 / -1;
    position: static;
  }
  .tasks-nav-box {
    flex-direction: row;
    overflow-x: auto;
  }
  .tasks-nav-item {
    white-space: nowrap;
    width: auto;
  }
}
@media (max-width: 860px) {
  .tasks-layout {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
  .tasks-filter-col {
    position: static;
  }
  .task-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .task-input-wrap {
    max-width: none;
  }
  .btn-check-task, .btn-sol-toggle {
    width: 100%;
    justify-content: center;
  }
  .btn-fav-task {
    margin-left: 0;
    width: 100%;
  }
  .kege-split {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Тренировочные варианты (Умскул-стайл)
   ========================================================= */
.variants-sec-title {
  font-size: 19px;
  font-weight: 700;
  margin: 24px 0 16px;
  color: var(--text);
}
.variants-pro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .variants-pro-grid {
    grid-template-columns: 1fr;
  }
}
.variant-pro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease), width .2s var(--ease), filter .2s var(--ease);
}
.variant-pro-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.06);
}
.var-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.var-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
}
.var-badge.sub-hist { background: #fee2e2; color: #dc2626; }
.var-badge.sub-rus  { background: #ffedd5; color: #ea580c; }
.var-badge.sub-math { background: #dbeafe; color: #2563eb; }
.var-badge.sub-math-base { background: #e0e7ff; color: #4338ca; }
.var-badge.sub-inf  { background: #ede9fe; color: #7c3aed; }
.var-badge.sub-soc  { background: #fef3c7; color: #d97706; }
.var-badge.sub-bio  { background: #dcfce7; color: #16a34a; }
.var-badge.sub-phys { background: #cffafe; color: #0891b2; }
.var-badge.sub-chem { background: #fae8ff; color: #c026d3; }
.var-badge.diff     { background: var(--surface-2); color: var(--muted); }

.var-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}
.var-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.btn-var-run {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #f97316;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
}
.btn-var-run:hover {
  background: #ea580c;
  border-color: #ea580c;
}
.btn-var-run.in-prog {
  background: #f97316;
}

/* Генератор своего варианта */
.generate-variant-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}
.gen-var-content {
  flex: 1;
}
.gen-var-content h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
.gen-var-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.gen-var-controls .filter-select {
  min-width: 140px;
}
.gen-var-ill {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  border-radius: 16px;
  color: #4f46e5;
}

/* =========================================================
   Интерфейс решения варианта (Тестирование, Скриншот 2)
   ========================================================= */
.var-testing-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.var-top-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scrollbar-width: thin;
}
.var-step-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.var-step-btn:hover {
  background: var(--surface-2);
}
.var-step-btn.active {
  border: 2px solid #2563eb;
  color: #2563eb;
  background: #eff6ff;
  font-weight: 700;
}
.var-step-btn.answered {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #86efac;
}
.var-step-btn.answered.active {
  border: 2px solid #2563eb;
  background: #dcfce7;
  color: #15803d;
}

.var-testing-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .var-testing-grid {
    grid-template-columns: 1fr;
  }
}
.var-task-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px;
}
.var-task-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.var-task-head h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.var-task-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 28px;
}
.var-task-body table.tasks-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.var-task-body table.tasks-table th,
.var-task-body table.tasks-table td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}
.var-task-body table.tasks-table th {
  background: var(--surface-2);
  font-weight: 600;
}

.var-task-footer {
  margin-top: 24px;
}
.var-input-wrap {
  margin-bottom: 20px;
  max-width: 520px;
}
.var-ans-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s, opacity .2s, width .2s, filter .2s;
}
.var-ans-input:focus {
  border-color: #2563eb;
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.var-input-hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}
.var-btn-row {
  display: flex;
  gap: 12px;
}
.var-skip-btn {
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 22px;
  font-weight: 600;
}
.var-submit-btn {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
  border-radius: 10px;
  padding: 10px 26px;
  font-weight: 600;
}
.var-submit-btn:hover {
  background: #ea580c;
}

.var-side-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  position: sticky;
  top: 90px;
}
.var-back-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.var-back-link:hover {
  color: var(--text);
}
.var-widget-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.4;
}
.var-timer {
  font-size: 22px;
  font-weight: 700;
  font-family: monospace;
  color: var(--text);
  margin-bottom: 20px;
}
.var-finish-btn {
  width: 100%;
  height: 42px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.var-finish-btn:hover {
  background: #dbeafe;
}

/* Результаты тестирования */
.var-results-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
}
.var-score-banner {
  text-align: center;
  padding: 24px;
  background: var(--surface-2);
  border-radius: 16px;
  margin-bottom: 28px;
}
.var-score-big {
  font-size: 48px;
  font-weight: 800;
  color: var(--text);
}
.var-results-stat-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 14px;
}
.var-stat-pill {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.var-stat-pill.ok { background: #dcfce7; color: #15803d; }
.var-stat-pill.bad { background: #fee2e2; color: #b91c1c; }
.var-stat-pill.skip { background: #f1f5f9; color: #64748b; }

@keyframes tasksSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner-ico {
  animation: tasksSpin 0.8s linear infinite;
}
.tasks-scroll-sentinel {
  padding: 24px 10px;
  text-align: center;
  min-height: 48px;
}

/* ========================================================
   CUSTOM SELECT / MODERN FILTER DROPDOWN
   ======================================================== */
.custom-select-wrap {
  position: relative;
  width: 100%;
  font-family: inherit;
  user-select: none;
}

.custom-select-trigger {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), background-color .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s cubic-bezier(0.4, 0, 0.2, 1), width .2s cubic-bezier(0.4, 0, 0.2, 1), filter .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.custom-select-trigger:hover {
  border-color: #cbd5e1;
}

.custom-select-wrap.open .custom-select-trigger,
.custom-select-trigger:focus-visible,
.custom-select-wrap:has(.custom-select-search-inp:focus) .custom-select-trigger {
  border-color: #ff7a00 !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.14) !important;
  outline: none;
}

.custom-select-val {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

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

.custom-select-search-inp {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  width: 100% !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.custom-select-search-inp::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.custom-select-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 122, 0, 0.1);
  color: #ea580c;
  flex-shrink: 0;
  white-space: nowrap;
}

.custom-select-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), color .2s;
}

.custom-select-wrap.open .custom-select-arrow {
  transform: rotate(180deg);
  color: #64748b;
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
  animation: customDropdownFadeIn .16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-select-wrap.open .custom-select-menu {
  display: block;
}

.custom-select-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #1e293b;
  transition: background .12s ease, color .12s ease;
}

.custom-select-opt:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.custom-select-opt.selected {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 500;
}

.custom-select-opt-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.custom-select-opt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}

.custom-select-opt-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-opt-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  flex-shrink: 0;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}

.custom-select-opt:hover .custom-select-opt-badge,
.custom-select-opt.selected .custom-select-opt-badge {
  background: rgba(255, 122, 0, 0.12);
  border-color: rgba(255, 122, 0, 0.25);
  color: #ea580c;
}

.custom-select-menu::-webkit-scrollbar {
  width: 6px;
}
.custom-select-menu::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.custom-select-menu::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.filter-group {
  position: relative;
}
.filter-group:has(.custom-select-wrap.open) {
  z-index: 99999 !important;
}
.custom-select-wrap.open {
  z-index: 99999 !important;
}
.custom-select-menu {
  background-color: var(--surface) !important;
  opacity: 1 !important;
}
[data-theme="light"] .custom-select-menu,
:root:not([data-theme="dark"]) .custom-select-menu {
  background-color: #ffffff !important;
}
[data-theme="dark"] .custom-select-menu {
  background-color: #151926 !important;
}

/* ========================================================
   CASCADING / DEPENDENT SELECT & CLEAR (x) STYLES
   ======================================================== */
.custom-select-wrap.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.custom-select-wrap.disabled .custom-select-trigger {
  cursor: not-allowed;
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
}

.custom-select-right-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.custom-select-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: #94a3b8 !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  user-select: none;
}

.custom-select-clear:hover {
  background: #64748b !important;
  color: #ffffff !important;
  transform: scale(1.08);
}

/* ========================================================
   UMSCHOOL-STYLE MULTI-SELECT CHECKBOXES & PLACEHOLDERS
   ======================================================== */
.custom-select-val.placeholder-active .custom-select-title {
  color: #94a3b8 !important;
  font-weight: 400;
}

.custom-select-cb-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.custom-select-fake-cb {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1.5px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}

.custom-select-fake-cb.checked {
  background: #ff7a00 !important;
  border-color: #ff7a00 !important;
}

.custom-select-opt.multi-opt {
  padding: 8px 10px;
  align-items: flex-start;
}

.custom-select-opt.multi-opt:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.custom-select-opt.multi-opt.selected {
  background: #f8fafc;
}

.custom-select-opt.multi-opt .custom-select-opt-name {
  white-space: normal;
  line-height: 1.35;
  font-size: 13.5px;
  color: #1e293b;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
}

/* ==========================================================================
   ПРОФЕССИОНАЛЬНАЯ ПРОВЕРКА РАБОТ, РЕДАКТОР УРОКОВ И КУРСОВ (СТУДИЯ ПРЕПОДАВАТЕЛЯ)
   ========================================================================== */

/* Вкладки студии */
.teacher-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  padding-bottom: 2px;
}
.teacher-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -4px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  border-radius: 8px 8px 0 0;
}
.teacher-tab-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.teacher-tab-btn.active {
  color: var(--accent-ink-2);
  border-bottom-color: #ff7a00;
  background: rgba(255, 122, 0, 0.05);
}
.t-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: #ff7a00;
  color: #fff;
  line-height: 1;
}

/* --- Проверка работ: Сетка --- */
.review-studio-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1080px) {
  .review-studio-grid {
    grid-template-columns: 1fr;
  }
}

/* Список работ */
.sub-panel-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .04);
}
.sub-search-inp {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0 14px 0 36px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.sub-search-inp:focus {
  border-color: #ff7a00;
}
.sub-filter-row {
  display: flex;
  gap: 6px;
  margin: 12px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.sub-pill-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.sub-pill-btn:hover {
  border-color: #cbd5e1;
  color: var(--text);
}
.sub-pill-btn.active {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
}
.sub-card-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--surface-2);
  margin-bottom: 8px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  text-align: left;
  width: 100%;
}
.sub-card-item:hover {
  background: var(--surface);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.sub-card-item.active {
  background: var(--surface);
  border-color: #ff7a00;
  box-shadow: 0 4px 16px -2px rgba(255, 122, 0, 0.15);
}
.sub-card-ava {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.sub-card-body {
  flex: 1;
  min-width: 0;
}
.sub-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-card-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 6px;
}
.sub-card-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.sub-badge-status {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.sub-badge-status.pending { background: #ffedd5; color: #ea580c; }
.sub-badge-status.revision { background: #e0e7ff; color: #4338ca; }
.sub-badge-status.accepted { background: #dcfce7; color: #15803d; }
.sub-badge-attempt {
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* Детальный редактор проверки */
.work-editor-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .05);
}
.work-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.work-student-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-student-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

/* Интерактивный холст разметки работы */
.work-canvas-studio {
  background: #0f172a;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #334155;
}
.canvas-studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  color: #e2e8f0;
  font-size: 13px;
  flex-wrap: wrap;
}
.canvas-tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.canvas-btn {
  padding: 6px 10px;
  border-radius: 8px;
  background: #334155;
  color: #f8fafc;
  border: 1px solid #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.canvas-btn:hover {
  background: #475569;
  border-color: #64748b;
}
.canvas-btn.active {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
}
.canvas-viewport-wrap {
  position: relative;
  min-height: 420px;
  max-height: 640px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #090d16;
  padding: 20px;
  user-select: none;
}
.canvas-inner-holder {
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.canvas-bg-img {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}
.canvas-draw-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.canvas-pin-note {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ff7a00;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: pinPop .2s cubic-bezier(.16, 1, .3, 1);
}
@keyframes pinPop {
  from { transform: translate(-50%, -50%) scale(0); }
  to { transform: translate(-50%, -50%) scale(1); }
}

/* Блок критериев ФИПИ */
.criteria-grading-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.criteria-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.criteria-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.criteria-desc b {
  display: block;
  font-size: 13.5px;
  color: var(--text);
}
.criteria-desc small {
  font-size: 12px;
  color: var(--muted);
}
.criteria-pts-selector {
  display: flex;
  gap: 4px;
}
.criteria-pt-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s, width .12s, filter .12s;
}
.criteria-pt-btn:hover {
  border-color: #ff7a00;
  color: var(--accent-ink-2);
}
.criteria-pt-btn.active {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
}
.criteria-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid #ff7a00;
  margin-top: 10px;
}

/* Структурированный отзыв куратора */
.curator-structured-feedback {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.feedback-box-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feedback-box-section label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.feedback-box-section textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.feedback-box-section textarea:focus {
  border-color: #ff7a00;
}
.quick-chips-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.quick-chip {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, transform .12s, opacity .12s, width .12s, filter .12s;
}
.quick-chip:hover {
  border-color: #ff7a00;
  color: var(--accent-ink-2);
  background: rgba(255, 122, 0, 0.05);
}

/* Действия проверки */
.work-review-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.btn-accept-work {
  padding: 12px 24px;
  border-radius: 12px;
  background: #16a34a;
  border: 1px solid #16a34a;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
.btn-accept-work:hover {
  background: #15803d;
}
.btn-revision-work {
  padding: 12px 24px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.btn-revision-work:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
}

/* ==========================================================================
   КОНСТРУКТОР УРОКОВ (LESSON BUILDER)
   ========================================================================== */
.builder-stepper {
  display: flex;
  border-radius: 12px;
  background: var(--surface-2);
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
  overflow-x: auto;
}
.builder-step-tab {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s, width .15s, filter .15s;
}
.builder-step-tab:hover {
  color: var(--text);
}
.builder-step-tab.active {
  background: #fff;
  color: var(--accent-ink-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.builder-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.builder-step-tab.active .builder-step-num {
  background: #ff7a00;
  color: #fff;
}
.timeline-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.callout-sample-box {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  border-left: 1px solid;
}
.callout-rule { background: #eff6ff; border-left-color: #3b82f6; color: #1e3a8a; }
.callout-tip  { background: #fefce8; border-left-color: #eab308; color: #713f12; }
.callout-trap { background: #fef2f2; border-left-color: #ef4444; color: #7f1d1d; }
.callout-math { background: #faf5ff; border-left-color: #a855f7; color: #581c87; }

/* ==========================================================================
   КОНСТРУКТОР КУРСОВ (COURSE BUILDER)
   ========================================================================== */
.course-builder-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
}
@media (max-width: 960px) {
  .course-builder-grid {
    grid-template-columns: 1fr;
  }
}
.subject-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.subject-picker-card {
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.subject-picker-card:hover {
  border-color: #ff7a00;
  transform: translateY(-2px);
}
.subject-picker-card.active {
  border-color: #ff7a00;
  background: rgba(255, 122, 0, 0.05);
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.15);
}
.curriculum-module-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.curriculum-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}



/* ==========================================================================
   ЛОГИЧНЫЙ КАБИНЕТ КУРАТОРА И ПРЕПОДАВАТЕЛЯ ПРЕДМЕТА
   ========================================================================== */

/* Hero карточка преподавателя и переключатель */
.teacher-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
  border: 1px solid rgba(255, 122, 0, 0.2);
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
}
.th-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff7a00, #ff9500);
  color: #fff;
  font-size: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.35);
}
.th-meta {
  flex: 1;
  min-width: 260px;
}
.th-meta h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.th-quick-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.th-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.th-switcher select {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  outline: none;
  cursor: pointer;
}

/* Навигация по вкладкам кабинета */
.cabinet-nav-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.c-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -4px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
}
.c-nav-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.c-nav-btn.active {
  color: var(--accent-ink-2);
  border-bottom-color: #ff7a00;
  background: rgba(255, 122, 0, 0.06);
}
.c-badge {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: #ff7a00;
  color: #fff;
  line-height: 1;
}

/* Панели */
.c-panel {
  display: none;
}
.c-panel.active {
  display: block;
}

/* Сплит-экран проверки (холст со сканом / шкала критериев) */
.review-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1100px) {
  .review-split-grid {
    grid-template-columns: 1fr;
  }
}

.solution-canvas-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.grading-sticky-panel {
  position: sticky;
  top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, .06);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* Холст и тулбар */
.canvas-toolbar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.canvas-tools-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.canvas-tool-btn {
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}
.canvas-tool-btn:hover {
  color: var(--text);
  background: var(--surface);
}
.canvas-tool-btn.active {
  background: #ff7a00;
  color: #fff;
}

.canvas-paper-wrap {
  position: relative;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.03);
}
.canvas-holder {
  position: relative;
  transition: transform 0.15s ease-out;
  transform-origin: center center;
}
.canvas-img-bg {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* Карточки критериев ФИПИ */
.criteria-card-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
  transition: border-color .15s;
}
.criteria-card-item:hover {
  border-color: rgba(255, 122, 0, 0.4);
}
.pt-pill-group {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.pt-pill {
  flex: 1;
  padding: 6px 0;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}
.pt-pill:hover {
  border-color: #ff7a00;
  color: var(--accent-ink-2);
}
.pt-pill.active {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.35);
}

/* Таблица студентов */
.students-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .04);
}
.students-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.students-table th {
  background: var(--surface-2);
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.students-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.students-table tr:last-child td {
  border-bottom: none;
}
.students-table tr:hover td {
  background: rgba(255, 122, 0, 0.02);
}

.tariff-badge-pro {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.tariff-badge-std {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

/* Карточки курсов и уроков программы */
.curriculum-course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px -2px rgba(0,0,0,.04);
}
.curriculum-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  margin-bottom: 8px;
  gap: 16px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}
.curriculum-lesson-row:hover {
  border-color: #ff7a00;
  transform: translateX(3px);
}

/* Чат с учениками */
.curator-chat-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  height: 640px;
}
@media (max-width: 860px) {
  .curator-chat-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
}
.chat-dialogs-col {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chat-messages-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-student-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s ease;
}
.chat-student-item:hover {
  background: var(--surface-2);
}
.chat-student-item.active {
  background: rgba(255, 122, 0, 0.08);
  border-left: 1px solid #ff7a00;
}
.chat-bubble {
  max-width: 75%;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.chat-bubble.student {
  background: var(--surface-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble.teacher {
  background: #ff7a00;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

/* --- Review Studio Grid & Components --- */
.c-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -4px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
}
.c-tab-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}
.c-tab-btn.active {
  color: var(--accent-ink-2);
  border-bottom-color: #ff7a00;
  background: rgba(255, 122, 0, 0.06);
}
.c-badge-counter {
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: #ff7a00;
  color: #fff;
  line-height: 1;
}

.review-split-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 960px) {
  .review-split-grid {
    grid-template-columns: 1fr;
  }
}
.review-queue-col {
  display: flex;
  flex-direction: column;
}
.review-queue-card {
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  margin-bottom: 10px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}
.review-queue-card:hover {
  border-color: #ff7a00;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.review-queue-card.active {
  border-color: #ff7a00;
  background: rgba(255, 122, 0, 0.04);
  box-shadow: 0 4px 16px rgba(255, 122, 0, 0.12);
}

.review-workspace-col {
  min-width: 0;
}
.inspector-head-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.task-condition-drawer {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  animation: fadeIn 0.2s ease;
}
.inspector-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1150px) {
  .inspector-body-grid {
    grid-template-columns: 1fr;
  }
}

.canvas-viewport-wrap {
  position: relative;
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 20px;
}
.canvas-inner-holder {
  position: relative;
  display: inline-block;
  max-width: 100%;
  transition: transform 0.15s ease-out;
  transform-origin: center center;
}
.canvas-bg-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.canvas-draw-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.canvas-pin-note {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #ff7a00;
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  white-space: nowrap;
}

.grading-card-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.criteria-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.criteria-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.criteria-desc {
  flex: 1;
  min-width: 0;
}
.criteria-desc b {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.criteria-desc small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
}
.criteria-pts-selector {
  display: flex;
  gap: 4px;
}
.criteria-pt-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.criteria-pt-btn:hover {
  border-color: #ff7a00;
  color: var(--accent-ink-2);
}
.criteria-pt-btn.active {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.35);
}

.grading-feedback-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.quick-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}
.quick-chip:hover {
  border-color: #ff7a00;
  color: var(--accent-ink-2);
}
.feedback-box-section {
  margin-bottom: 10px;
}
.feedback-box-section label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}
.feedback-box-section textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
  transition: border-color .15s;
}
.feedback-box-section textarea:focus {
  border-color: #ff7a00;
}
.btn-accept-work {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}
.btn-accept-work:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4);
}
.btn-revision-work {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--surface-2);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease, width .15s ease, filter .15s ease;
}
.btn-revision-work:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

/* =========================================================
   LMS Ученика (в стиле Умскул с фирменным стилем Препки)
   ========================================================= */
body.is-lms-mode {
  overflow-x: clip; /* hidden делает body контейнером прокрутки — и липкий сайдбар перестаёт липнуть */
  background: var(--bg-2);
}
body.is-lms-mode #site-header {
  display: none !important;
}
body.is-lms-mode .footer {
  display: none !important;
}
body.is-lms-mode #app {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: 100vh;
}

.lms-page-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-2);
  color: #1e293b;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ЛЕВЫЙ САЙДБАР */
.lms-sidebar {
  width: 250px;
  min-width: 250px;
  background: var(--solid);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02);
}

.lms-brand-block {
  padding: 20px 22px 16px;
  display: flex;
  align-items: center;
}

.lms-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.lms-logo-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #ff3d81, #ff8a3d);
  color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(255, 61, 129, 0.3);
}

.lms-logo-text {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0f172a;
  letter-spacing: -0.5px;
}
.lms-logo-text i {
  color: var(--accent-ink-2);
  font-style: normal;
}

/* Навигация сайдбара */
.lms-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
}

.lms-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, filter 0.15s ease;
}

.lms-nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.lms-nav-item.active {
  background: #fff4ec;
  color: #ea580c;
  font-weight: 700;
}
.lms-nav-item.active .lms-ico {
  color: #ea580c;
}

.lms-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #64748b;
  flex-shrink: 0;
}
.lms-ico svg {
  width: 18px;
  height: 18px;
}

.lms-side-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 12px 18px;
}

/* Месяц в сайдбаре */
.lms-month-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 10px;
}

.lms-month-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.lms-month-nav-btns {
  display: flex;
  gap: 4px;
}

.lms-m-arrow {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--solid);
  color: #475569;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.lms-m-arrow:hover {
  background: #f1f5f9;
  color: var(--accent-ink-2);
  border-color: #ffd8be;
}

/* Дерево предметов в сайдбаре */
.lms-subject-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 12px 24px;
}

.lms-subj-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}

.lms-subj-row:hover {
  background: var(--bg-2);
  color: var(--accent-ink-2);
}

.lms-subj-row.active {
  background: #fff7ed;
  color: #ea580c;
  font-weight: 700;
}

.lms-subj-sign {
  font-weight: 700;
  color: #94a3b8;
  font-size: 14px;
  width: 14px;
}
.lms-subj-row.active .lms-subj-sign {
  color: #ea580c;
}

.lms-subj-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lms-subj-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
}
.lms-subj-row.active .lms-subj-count {
  background: #fed7aa;
  color: #9a3412;
}

/* ЦЕНТРАЛЬНАЯ ОБЛАСТЬ */
.lms-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-2);
  min-height: 100vh;
}

/* ТОПБАР */
.lms-topbar {
  height: 64px;
  background: var(--solid);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 90;
}

.lms-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lms-mob-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}

.lms-page-caption {
  font-size: 13.5px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.2px;
}

.lms-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lms-stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #f1f5f9;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.lms-stat-pill svg {
  width: 16px;
  height: 16px;
  color: #64748b;
}

.lms-pill-xp {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
}
.lms-ico-gold {
  font-size: 14px;
}

.lms-pill-streak {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.lms-ico-fire {
  font-size: 14px;
}

.lms-icon-action {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--solid);
  border: 1px solid var(--border);
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.lms-icon-action:hover {
  background: var(--bg-2);
  color: var(--accent-ink-2);
  border-color: #ffd8be;
}
.lms-icon-action svg {
  width: 18px;
  height: 18px;
}
.lms-icon-action.theme-btn { overflow: hidden; }
.lms-icon-action.theme-btn svg { width: 20px; height: 20px; }

.lms-dot-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

.lms-avatar-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a00, #ff3d81);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.3);
}

/* ОСНОВНОЙ КОНТЕНТ */
.lms-body {
  padding: 28px 36px 60px;
  max-width: 1180px;
  width: 100%;
}

/* ВКЛАДКИ + ДРОПДАУНЫ */
.lms-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 2px;
}

.lms-tabs-bar {
  display: flex;
  gap: 8px;
}

.lms-head-tab {
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: #64748b;
  padding: 10px 18px;
  cursor: pointer;
  position: relative;
  bottom: -2px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, filter 0.15s ease;
}
.lms-head-tab:hover {
  color: #0f172a;
}
.lms-head-tab.active {
  color: var(--accent-ink-2);
  border-bottom-color: #ff7a00;
  font-weight: 700;
}

.lms-filter-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.lms-select-box {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: var(--solid);
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.lms-select-box:focus {
  border-color: #ff7a00;
}

/* СТРОКА СТАТУСОВ И ПОИСКА */
.lms-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.lms-status-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lms-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--solid);
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, filter 0.15s ease;
}
.lms-chip:hover {
  background: var(--bg-2);
  color: #0f172a;
}
.lms-chip.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.lms-search-input-wrap {
  position: relative;
  width: 280px;
}
.lms-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
}
.lms-search-field {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  outline: none;
  background: var(--solid);
  color: #0f172a;
  transition: border-color 0.15s;
}
.lms-search-field:focus {
  border-color: #ff7a00;
}

/* СПИСОК КАРТОЧЕК */
.lms-cards-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lms-card {
  background: var(--solid);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.lms-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.07);
  border-color: #fed7aa;
}

.lms-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.lms-card-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lms-sub-badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
}
.lms-sub-badge.subj-math {
  background: #fdf2f8;
  color: #db2777;
}
.lms-sub-badge.subj-rus {
  background: #fff7ed;
  color: #ea580c;
}
.lms-sub-badge.subj-inf {
  background: #ecfeff;
  color: #0891b2;
}
.lms-sub-badge.subj-soc {
  background: #f0fdf4;
  color: #16a34a;
}

.lms-type-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: #64748b;
}

.lms-card-deadline-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
.lms-card-deadline-tag svg {
  width: 15px;
  height: 15px;
}
.lms-card-deadline-tag.is-urgent {
  color: #ea580c;
  background: #fff7ed;
  padding: 3px 9px;
  border-radius: 6px;
}

.lms-card-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lms-card-heading {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
}

.lms-heading-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.lms-heading-link:hover {
  color: var(--accent-ink-2);
}

.lms-card-summary {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.lms-curator-quote {
  background: var(--bg-2);
  border-left: 1px solid #ff7a00;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #475569;
  margin-top: 4px;
}

.lms-card-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.lms-card-meta-tags {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lms-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}
.lms-meta-tag svg {
  width: 15px;
  height: 15px;
  color: #94a3b8;
}

.lms-status-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}
.lms-status-chip.st-pending {
  background: #fef3c7;
  color: #b45309;
}
.lms-status-chip.st-review {
  background: #e0f2fe;
  color: #0369a1;
}
.lms-status-chip.st-accepted {
  background: #dcfce7;
  color: #15803d;
}
.lms-status-chip.st-revision {
  background: #fee2e2;
  color: #b91c1c;
}

/* КНОПКА ОТКРЫТИЯ ПЛЕЕРА */
.lms-card-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff7a00, #ff3d81);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(255, 122, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.lms-card-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(255, 122, 0, 0.35);
  opacity: 0.95;
}
.lms-card-cta-btn svg {
  width: 16px;
  height: 16px;
}

/* КНОПКА ВОЗВРАТА ИЗ ПЛЕЕРА В LMS */
.lms-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff4ec;
  color: #ea580c;
  font-weight: 700;
  font-size: 13.5px;
  padding: 6px 14px;
  border-radius: 18px;
  text-decoration: none;
  border: 1px solid #ffd8be;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, width 0.15s ease, filter 0.15s ease;
}
.lms-back-link:hover {
  background: #ff7a00;
  color: #ffffff;
  border-color: #ff7a00;
  transform: translateX(-2px);
}
.lms-back-link svg {
  width: 16px;
  height: 16px;
}

/* КАРТОЧКИ КУРСОВ ВО ВКЛАДКЕ «ВСЕ ЗАНЯТИЯ» */
.lms-course-full-card {
  background: var(--solid);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.lms-cfc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.lms-cfc-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.lms-cfc-lessons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lms-lesson-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.lms-lesson-row:hover {
  background: #fff7ed;
  border-color: #fed7aa;
}
.lms-lesson-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lms-l-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lms-lesson-row:hover .lms-l-num {
  background: #ff7a00;
  color: #ffffff;
}

/* кнопка меню в кабинете: три полоски + подпись — понятнее, чем иконка «колонки» */
.lms-burger-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 40px; padding: 0 13px 0 10px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font: 800 13.5px var(--font); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.lms-burger-btn svg { width: 20px; height: 20px; color: var(--accent-ink); }
.lms-burger-btn:hover { border-color: var(--accent-ink); background: var(--surface-2); }
.lms-burger-btn:active { transform: scale(.98); }
/* пока открыто меню-оверлей, страница под ним стоит на месте */
body.is-menu-open { position: fixed; left: 0; right: 0; overflow: hidden; width: 100%; }
body.is-menu-open .view { animation: none; }

/* МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 900px) {
  .lms-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 95;
    transition: left 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .lms-sidebar.is-open {
    left: 0;
  }
  .lms-mob-toggle {
    display: inline-flex;
  }
  .lms-body {
    padding: 20px 16px 40px;
  }
  .lms-topbar {
    padding: 0 16px;
  }
  .lms-search-input-wrap {
    width: 100%;
  }
}

/* ТЕМНАЯ ТЕМА */
[data-theme="dark"] body.is-lms-mode {
  background: #090d16;
}
[data-theme="dark"] .lms-page-wrapper {
  background: #090d16;
  color: #f1f5f9;
}
[data-theme="dark"] .lms-sidebar,
[data-theme="dark"] .lms-topbar,
[data-theme="dark"] .lms-card,
[data-theme="dark"] .lms-course-full-card {
  background: #111827;
  border-color: #1f2937;
  color: #f1f5f9;
}
[data-theme="dark"] .lms-logo-text,
[data-theme="dark"] .lms-month-title,
[data-theme="dark"] .lms-card-heading,
[data-theme="dark"] .lms-cfc-title {
  color: #f9fafb;
}
[data-theme="dark"] .lms-nav-item,
[data-theme="dark"] .lms-subj-row,
[data-theme="dark"] .lms-card-summary {
  color: #94a3b8;
}
[data-theme="dark"] .lms-nav-item:hover,
[data-theme="dark"] .lms-subj-row:hover {
  background: #1f2937;
  color: #f9fafb;
}
[data-theme="dark"] .lms-stat-pill {
  background: #1f2937;
  color: #cbd5e1;
}
[data-theme="dark"] .lms-icon-action,
[data-theme="dark"] .lms-select-box,
[data-theme="dark"] .lms-search-field,
[data-theme="dark"] .lms-chip,
[data-theme="dark"] .lms-lesson-row {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}
[data-theme="dark"] .lms-side-divider,
[data-theme="dark"] .lms-card-bottombar,
[data-theme="dark"] .lms-view-header {
  border-color: #1f2937;
}

body.is-lms-mode #cookie-banner {
  display: none !important;
}


/* =========================================================
   TEACHBASE-INSPIRED MODERN DASHBOARD FOR PREPKA LMS
   ========================================================= */
.tb-dash-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* 1. Верхний информационный баннер */
.tb-notice-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 14px;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
  gap: 16px;
  flex-wrap: wrap;
}
.tb-notice-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}
.tb-notice-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.tb-notice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: 8px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  white-space: nowrap;
}
.tb-notice-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: translateX(2px);
}
.tb-notice-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: -10px;
  margin-bottom: 2px;
}
.tb-notice-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s, width 0.2s, filter 0.2s;
}
.tb-notice-dot.active {
  width: 18px;
  border-radius: 99px;
  background: #2563eb;
}

/* 2. Верхняя сетка из двух колонок: Продолжить + Расписание */
.tb-grid-two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
}
@media (max-width: 980px) {
  .tb-grid-two-col {
    grid-template-columns: 1fr;
  }
}

.tb-panel {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}
.tb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.tb-panel-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.tb-panel-link {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.tb-panel-link:hover {
  color: #ff5722;
}

/* Карточки «Продолжить» */
.tb-resume-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tb-resume-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #f1f5f9;
  background: #fbfcfe;
  text-decoration: none;
  color: inherit;
  transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), width 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.tb-resume-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}
.tb-resume-thumb {
  width: 124px;
  height: 76px;
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.tb-resume-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tb-resume-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-due-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: #ecfdf5;
  color: #059669;
}
.tb-due-pill.urgent {
  background: #fff1f2;
  color: #e11d48;
}
.tb-resume-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-resume-prog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.tb-prog-track {
  flex: 1;
  height: 5px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.tb-prog-fill {
  height: 100%;
  border-radius: 99px;
  background: #10b981;
}

/* Календарь / Расписание */
.tb-cal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tb-cal-month-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #475569;
  text-transform: uppercase;
}
.tb-cal-arrow-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tb-cal-arrow-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.tb-cal-days-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.tb-cal-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tb-cal-day-cell:hover {
  background: #f8fafc;
}
.tb-cal-d-name {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.tb-cal-d-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  position: relative;
}
.tb-cal-day-cell.is-selected .tb-cal-d-num {
  background: #10b981;
  color: #ffffff;
}
.tb-cal-day-cell.has-event .tb-cal-d-num::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10b981;
}
.tb-cal-day-cell.is-selected .tb-cal-d-num::after {
  background: #ffffff;
}
.tb-cal-agenda {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tb-agenda-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #334155;
}
.tb-agenda-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tb-agenda-kind {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
}
.tb-agenda-kind.urgent {
  color: #ea580c;
}
.tb-agenda-text {
  font-weight: 600;
  color: #1e293b;
}

/* 3. Нижний ряд: Мои курсы / Карточки предметов */
.tb-courses-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tb-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.tb-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1150px) {
  .tb-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .tb-cards-grid {
    grid-template-columns: 1fr;
  }
}

.tb-v-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), width 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.tb-v-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}
.tb-vc-thumb {
  height: 120px;
  position: relative;
  overflow: hidden;
  padding: 10px;
}
.tb-vc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tb-vc-badge.live {
  background: rgba(225, 29, 72, 0.9);
}
.tb-vc-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.tb-vc-type {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tb-vc-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0;
  flex: 1;
}
.tb-vc-footer {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

/* Виджет достижений внизу сайдбара */
.tb-side-bottom-stats {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tb-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: #475569;
}
.tb-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.tb-stat-val {
  font-weight: 800;
  color: #0f172a;
}

/* Пастельные органические градиенты для карточек */
.thumb-gradient-mint {
  background: radial-gradient(circle at 100% 100%, #6ee7b7 0%, transparent 60%), radial-gradient(circle at 0% 0%, #a7f3d0 0%, transparent 70%), #34d399;
}
.thumb-gradient-purple {
  background: radial-gradient(circle at 100% 0%, #c084fc 0%, transparent 60%), radial-gradient(circle at 0% 100%, #e9d5ff 0%, transparent 70%), #a855f7;
}
.thumb-gradient-amber {
  background: radial-gradient(circle at 80% 80%, #f59e0b 0%, transparent 60%), radial-gradient(circle at 20% 20%, #fef3c7 0%, transparent 70%), #fbbf24;
}
.thumb-gradient-sky {
  background: radial-gradient(circle at 90% 20%, #38bdf8 0%, transparent 60%), radial-gradient(circle at 10% 80%, #bae6fd 0%, transparent 70%), #0ea5e9;
}
.thumb-gradient-rose {
  background: radial-gradient(circle at 70% 30%, #fb7185 0%, transparent 60%), radial-gradient(circle at 10% 90%, #fecdd3 0%, transparent 70%), #f43f5e;
}

/* ТЕМНАЯ ТЕМА ДЛЯ TEACHBASE DASHBOARD */
[data-theme="dark"] .tb-panel,
[data-theme="dark"] .tb-resume-card,
[data-theme="dark"] .tb-v-card {
  background: #111827;
  border-color: #1f2937;
  color: #f1f5f9;
}
[data-theme="dark"] .tb-panel-title,
[data-theme="dark"] .tb-resume-title,
[data-theme="dark"] .tb-section-title,
[data-theme="dark"] .tb-vc-title,
[data-theme="dark"] .tb-stat-val,
[data-theme="dark"] .tb-agenda-text {
  color: #f9fafb;
}
[data-theme="dark"] .tb-cal-month-label,
[data-theme="dark"] .tb-cal-d-num,
[data-theme="dark"] .tb-vc-type,
[data-theme="dark"] .tb-stat-row {
  color: #94a3b8;
}
[data-theme="dark"] .tb-cal-arrow-btn,
[data-theme="dark"] .tb-cal-days-bar,
[data-theme="dark"] .tb-prog-track,
[data-theme="dark"] .tb-side-bottom-stats,
[data-theme="dark"] .tb-vc-footer {
  border-color: #1f2937;
  background-color: transparent;
}
[data-theme="dark"] .tb-prog-track {
  background: #1f2937;
}


/* =========================================================
   TEACHBASE-INSPIRED MODERN DASHBOARD REFINEMENTS
   ========================================================= */
.lms-topbar {
  height: 64px;
  background: var(--solid);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 90;
  gap: 20px;
}
@media (min-width: 901px) {
  .lms-burger-btn {
    display: none !important;
  }
}

.tb-top-search-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  height: 42px;
  padding: 0 14px;
  width: 440px;
  max-width: 100%;
  gap: 10px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tb-top-search-wrap:focus-within {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.tb-top-search-select {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  outline: none;
  cursor: pointer;
  padding-right: 4px;
  font-family: inherit;
}
.tb-top-search-div {
  width: 1px;
  height: 20px;
  background: #cbd5e1;
  flex-shrink: 0;
}
.tb-top-search-input {
  border: none;
  background: transparent;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  width: 100%;
  font-family: inherit;
}
.tb-top-search-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
}

.lms-user-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.tb-quick-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  padding: 3px 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

/* Organic Wave Art Thumbnails */
.thumb-gradient-mint {
  background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 76' preserveAspectRatio='none'%3E%3Cpath fill='%236ee7b7' fill-opacity='0.45' d='M0,45 C20,20 60,65 90,30 C105,15 115,25 120,35 L120,76 L0,76 Z'/%3E%3Cpath fill='%23a7f3d0' fill-opacity='0.35' d='M0,25 C30,50 70,10 100,40 C110,50 115,45 120,50 L120,76 L0,76 Z'/%3E%3C/svg%3E");
  background-size: cover;
}
.thumb-gradient-purple {
  background: #8b5cf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 76' preserveAspectRatio='none'%3E%3Cpath fill='%23c084fc' fill-opacity='0.45' d='M0,40 C30,65 65,15 95,45 C110,30 115,35 120,40 L120,76 L0,76 Z'/%3E%3Cpath fill='%23e9d5ff' fill-opacity='0.35' d='M0,20 C25,10 60,55 90,25 C105,40 115,30 120,35 L120,76 L0,76 Z'/%3E%3C/svg%3E");
  background-size: cover;
}
.thumb-gradient-amber {
  background: #f59e0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 76' preserveAspectRatio='none'%3E%3Cpath fill='%23fbbf24' fill-opacity='0.5' d='M0,35 C25,55 65,20 95,45 C110,25 115,30 120,40 L120,76 L0,76 Z'/%3E%3Cpath fill='%23fef3c7' fill-opacity='0.4' d='M0,15 C20,35 60,10 90,30 C105,45 115,35 120,40 L120,76 L0,76 Z'/%3E%3C/svg%3E");
  background-size: cover;
}
.thumb-gradient-sky {
  background: #0284c7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 76' preserveAspectRatio='none'%3E%3Cpath fill='%2338bdf8' fill-opacity='0.5' d='M0,45 C20,20 60,65 90,30 C105,15 115,25 120,35 L120,76 L0,76 Z'/%3E%3Cpath fill='%23bae6fd' fill-opacity='0.4' d='M0,25 C30,50 70,10 100,40 C110,50 115,45 120,50 L120,76 L0,76 Z'/%3E%3C/svg%3E");
  background-size: cover;
}
.thumb-gradient-rose {
  background: #e11d48 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 76' preserveAspectRatio='none'%3E%3Cpath fill='%23fb7185' fill-opacity='0.5' d='M0,40 C30,65 65,15 95,45 C110,30 115,35 120,40 L120,76 L0,76 Z'/%3E%3Cpath fill='%23fecdd3' fill-opacity='0.4' d='M0,20 C25,10 60,55 90,25 C105,40 115,30 120,35 L120,76 L0,76 Z'/%3E%3C/svg%3E");
  background-size: cover;
}

[data-theme="dark"] .tb-top-search-wrap,
[data-theme="dark"] .tb-quick-tools {
  background: #111827;
  border-color: #374151;
}
[data-theme="dark"] .tb-top-search-select,
[data-theme="dark"] .tb-top-search-input {
  color: #f1f5f9;
}
[data-theme="dark"] .tb-top-search-div {
  background: #374151;
}


/* =========================================================
   BLOCK/GRID LAYOUT & FILTERS (AS REQUESTED BY USER)
   ========================================================= */

/* Ограничиваем максимальную ширину контента, чтобы блоки не были растянуты */
.lms-content-container {
  max-width: 1220px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 28px 48px !important;
  box-sizing: border-box;
}

/* Сетка карточек на 3 колонки (как обведено на скрине 2) */
.lms-cards-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
}
@media (max-width: 1100px) {
  .lms-cards-grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .lms-cards-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* Блочная карточка занятия (как в референсе на скрине 2) */
.lms-block-card {
  background: var(--solid);
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 175px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), width 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.lms-block-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.lms-bc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.lms-bc-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lms-pill-exam {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  letter-spacing: 0.02em;
}
.lms-pill-subj {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.lms-pill-subj.subj-math { background: #fff7ed; color: #ea580c; }
.lms-pill-subj.subj-rus { background: #fdf2f8; color: #db2777; }
.lms-pill-subj.subj-inf { background: #eff6ff; color: #2563eb; }
.lms-pill-subj.subj-soc { background: #f0fdf4; color: #16a34a; }

.lms-pill-type {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg-2);
  color: #64748b;
}

.lms-bc-title {
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  margin: 0 0 16px 0;
  flex: 1;
}

.lms-bc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f8fafc;
}
.lms-bc-teacher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.lms-bc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffedd5;
  color: #ea580c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.lms-bc-tag {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}
.lms-bc-deadline {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lms-bc-deadline.is-urgent {
  color: #e11d48;
}

/* Фильтры в стиле скрина 3 */
.ums-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ums-select-wrap {
  position: relative;
}
.ums-select {
  appearance: none;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 36px 8px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ums-select:hover {
  border-color: #cbd5e1;
}
.ums-select:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

/* Пустое состояние как на скрине 3 */
.ums-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 20px;
  width: 100%;
  background: #ffffff;
  border: 1px dashed #e2e8f0;
  border-radius: 18px;
  gap: 10px;
}
.ums-empty-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: 0.75;
}
.ums-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.ums-empty-desc {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 10px 0;
}

/* Темная тема */
[data-theme="dark"] .lms-block-card,
[data-theme="dark"] .ums-empty-state {
  background: #111827;
  border-color: #1f2937;
  color: #f1f5f9;
}
[data-theme="dark"] .lms-bc-title,
[data-theme="dark"] .ums-empty-title {
  color: #f9fafb;
}
[data-theme="dark"] .lms-bc-teacher,
[data-theme="dark"] .lms-bc-tag {
  color: #94a3b8;
}
[data-theme="dark"] .lms-bc-bottom {
  border-color: #1f2937;
}
[data-theme="dark"] .ums-select {
  background-color: #111827;
  border-color: #374151;
  color: #f1f5f9;
}


/* =========================================================
   RIGHT-ALIGNED FILTER CARD (EXACT MATCH WITH SCREENSHOT 3)
   ========================================================= */
.lms-view-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .lms-view-header-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.ums-right-filter-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 12px 14px;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 768px) {
  .ums-right-filter-card {
    width: 100%;
    margin-left: 0;
  }
}

.ums-filter-input-wrap {
  width: 100%;
  position: relative;
}

.ums-filter-select {
  width: 100%;
  height: 42px;
  appearance: none;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 36px 0 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ums-filter-select:hover {
  border-color: #cbd5e1;
}
.ums-filter-select:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
}

[data-theme="dark"] .ums-right-filter-card {
  background: #111827;
  border-color: #1f2937;
}
[data-theme="dark"] .ums-filter-select {
  background-color: #111827;
  border-color: #374151;
  color: #f1f5f9;
}


/* =========================================================
   2-COLUMN LAYOUT WITH RIGHT-ALIGNED FILTER SIDEBAR (UMSCHOOL STYLE)
   ========================================================= */
.ums-page-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
@media (max-width: 960px) {
  .ums-page-layout {
    flex-direction: column-reverse;
  }
}

.ums-main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ums-filter-sidebar-col {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 84px;
}
@media (max-width: 960px) {
  .ums-filter-sidebar-col {
    width: 100%;
    position: static;
  }
}

.ums-filter-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* КАСТОМНЫЙ ДРОПДАУН (ВМЕСТО ДЕФОЛТНОГО SELECT) */
.custom-select-container {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  width: 100%;
  height: 44px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), width 0.15s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.custom-select-trigger:hover {
  border-color: #cbd5e1;
}
.custom-select-trigger.is-open {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.14);
}
.cs-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
  color: #64748b;
  flex-shrink: 0;
}
.custom-select-trigger.is-open .cs-chevron {
  transform: rotate(180deg);
  color: var(--accent-ink-2);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 6px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: csFadeIn 0.12s ease-out;
}
@keyframes csFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.custom-select-item {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s, width 0.12s, filter 0.12s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-select-item:hover {
  background: #fff7ed;
  color: #ea580c;
}
.custom-select-item.is-selected {
  background: #ffedd5;
  color: #c2410c;
  font-weight: 800;
}
.custom-select-container.is-open {
  z-index: 150;
}
.custom-select-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  margin-left: 8px;
}
.custom-select-item.is-selected .custom-select-badge {
  background: #fed7aa;
  color: #c2410c;
}

/* ТЕМНАЯ ТЕМА */
[data-theme="dark"] .ums-filter-card,
[data-theme="dark"] .custom-select-trigger,
[data-theme="dark"] .custom-select-menu {
  background: #111827;
  border-color: #1f2937;
  color: #f1f5f9;
}
[data-theme="dark"] .custom-select-trigger {
  color: #f1f5f9;
  border-color: #374151;
}
[data-theme="dark"] .custom-select-item {
  color: #cbd5e1;
}
[data-theme="dark"] .custom-select-item:hover {
  background: #1f2937;
  color: #ff9800;
}
[data-theme="dark"] .custom-select-item.is-selected {
  background: #27272a;
  color: #ff9800;
}

/* =========================================================
   COURSE & ASSESSMENT BUILDER (STUDIO) — EDTECH КАБИНЕТ ПРЕПОДАВАТЕЛЯ
   ========================================================= */

.studio-container {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-top: 16px;
}

/* 1. ВЕРХНИЙ БАР СТУДИИ */
.studio-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
  flex-wrap: wrap;
}
.studio-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.studio-subj-pills {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}
.studio-subj-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.studio-subj-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}
.studio-subj-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.studio-course-select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  background: #ffffff;
  cursor: pointer;
}
.studio-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studio-status-badge {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.studio-status-badge.draft { background: #fef3c7; color: #b45309; }
.studio-status-badge.published { background: #dcfce7; color: #15803d; }
.studio-status-badge.in_review { background: #e0e7ff; color: #4338ca; }

/* 2. ТРЁХКОЛОНОЧНЫЙ ЛЕЙАУТ */
.studio-body-layout {
  display: grid;
  grid-template-columns: 280px 1fr 310px;
  min-height: 720px;
  background: #ffffff;
}
@media (max-width: 1280px) {
  .studio-body-layout { grid-template-columns: 260px 1fr; }
  .studio-inspector-col { display: none; }
}

/* ЛЕВАЯ КОЛОНКА: ДЕРЕВО КУРСА */
.studio-tree-col {
  background: #fafbfc;
  border-right: 1px solid #e2e8f0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 850px;
}
.studio-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.studio-tree-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.tree-module-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.tree-module-head {
  padding: 10px 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.tree-lessons-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tree-lesson-card {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tree-lesson-card:hover {
  background: #f1f5f9;
}
.tree-lesson-card.active {
  background: #fff7ed;
  border: 1px solid #ffedd5;
}
.tree-lesson-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.tree-lesson-card.active .tree-lesson-title-row {
  color: #c2410c;
  font-weight: 700;
}
.tree-badges-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tree-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
}
.tree-pill.stop { background: #fee2e2; color: #b91c1c; }
.tree-pill.drip { background: #ede9fe; color: #6d28d9; }
.tree-pill.steps { background: #f1f5f9; color: #64748b; }

.tree-steps-sublist {
  margin-top: 4px;
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid #fed7aa;
}
.tree-step-item {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tree-step-item:hover { background: #fff; }
.tree-step-item.active { background: #ff7a00; color: #fff; font-weight: 700; }

.btn-add-tree {
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.btn-add-tree:hover {
  border-color: #ff7a00;
  color: #ea580c;
  background: #fff7ed;
}

/* ЦЕНТРАЛЬНАЯ ОБЛАСТЬ: ХОЛСТ РЕДАКТОРА (CANVAS) */
.studio-canvas-col {
  padding: 24px 32px;
  background: #ffffff;
  overflow-y: auto;
  max-height: 850px;
}
.studio-step-selector-tabs {
  display: flex;
  border-bottom: 2px solid #f1f5f9;
  gap: 16px;
  margin-bottom: 24px;
}
.studio-step-tab {
  border: none;
  background: transparent;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.studio-step-tab:hover { color: #0f172a; }
.studio-step-tab.active {
  color: var(--accent-ink-2);
}
.studio-step-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff7a00;
  border-radius: 2px;
}

/* NOTION-STYLE БЛОЧНЫЙ РЕДАКТОР */
.notion-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}
.notion-h1-input {
  font-size: 26px;
  font-weight: 800;
  border: none;
  outline: none;
  color: #0f172a;
  width: 100%;
  padding: 4px 0;
  font-family: inherit;
}
.notion-h1-input::placeholder { color: #cbd5e1; }

.notion-block-card {
  padding: 12px 14px;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  background: #ffffff;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.notion-block-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.notion-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
}
.notion-block-actions {
  display: flex;
  gap: 6px;
}
.btn-block-action {
  border: none;
  background: #f1f5f9;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}
.btn-block-action:hover { background: #fee2e2; color: #b91c1c; }

/* Блок видео с таймкодами */
.video-box-embed {
  background: #0f172a;
  border-radius: 12px;
  color: #ffffff;
  padding: 16px;
}
.video-timestamps-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ts-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border-radius: 8px;
}
.ts-badge-btn {
  background: #ff7a00;
  color: #fff;
  border: none;
  font-weight: 800;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Callout-блоки */
.callout-box {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.callout-box.cb-warning { background: #fff7ed; border-left: 1px solid #ff7a00; }
.callout-box.cb-rule { background: #f0fdf4; border-left: 1px solid #16a34a; }
.callout-box.cb-danger { background: #fef2f2; border-left: 1px solid #dc2626; }
.callout-icon { font-size: 20px; line-height: 1; }
.callout-text { flex: 1; font-size: 13.5px; color: #1e293b; outline: none; }

/* LaTeX Formula блок */
.katex-editor-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.katex-preview-render {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

/* Блок кода */
.code-editor-box {
  background: #1e1e2e;
  border-radius: 10px;
  padding: 12px;
  color: #cdd6f4;
  font-family: 'Fira Code', monospace;
}

/* Спойлер */
.spoiler-box {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
}
.spoiler-head {
  background: #f8fafc;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.spoiler-body {
  padding: 12px 14px;
  font-size: 13.5px;
}

/* Панель добавления блоков */
.notion-add-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}
.btn-add-block {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s, opacity 0.12s, width 0.12s, filter 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-add-block:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

/* КОНСТРУКТОР ТЕСТОВ (ASSESSMENT BUILDER) */
.assessment-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.assessment-meta-bar {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  align-items: center;
  flex-wrap: wrap;
}
.meta-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.meta-input-group input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-weight: 700;
}

.question-card-builder {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.q-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.q-type-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  background: #eff6ff;
  color: #2563eb;
}
.q-prompt-textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

/* Опции ответов */
.options-builder-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.opt-row-builder {
  display: flex;
  align-items: center;
  gap: 10px;
}
.opt-row-builder input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
}
.opt-row-builder.is-correct input[type="text"] {
  border-color: #22c55e;
  background: #f0fdf4;
}

/* ВЕТВЛЕНИЕ И ОТРАБОТКА ОШИБОК (REMEDIATION DRAWER) */
.remediation-drawer-box {
  background: #fff7ed;
  border-left: 1px solid #ff7a00;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: #c2410c;
}
.rem-trigger-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #fed7aa;
  font-size: 12px;
  background: #fff;
}
.rem-hint-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #ffffff;
}
.rem-followup-card {
  background: #ffffff;
  border: 1px dashed #fb923c;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ПРАВАЯ КОЛОНКА: ИНСПЕКТОР СВОЙСТВ */
.studio-inspector-col {
  background: #fafbfc;
  border-left: 1px solid #e2e8f0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inspector-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.inspector-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
}

/* РЕЖИМ ПРЕДПРОСМОТРА ГЛАЗАМИ УЧЕНИКА (STUDENT SIMULATOR) */
.student-preview-banner {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
}
.student-preview-content {
  background: #f8fafc;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.student-sim-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}


/* =========================================================
   TYPEFORM / STEPIK STYLE COURSE & ASSESSMENT STUDIO
   Фокус на 1 вопросе + наглядная схема ветвления + пошаговый навигатор
   ========================================================= */

.typeform-studio-container {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  min-height: 820px;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  margin-top: 12px;
}

/* 1. ВЕРХНИЙ БАР СТУДИИ (TOPBAR) */
.tf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.tf-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.tf-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tf-back-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.tf-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #64748b;
  font-weight: 600;
}
.tf-breadcrumbs b {
  color: #0f172a;
  font-weight: 800;
}
.tf-badge-subject {
  background: #eff6ff;
  color: #2563eb;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

/* Переключатель режимов по центру: Редактор / Превью */
.tf-mode-switcher {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}
.tf-mode-btn {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tf-mode-btn:hover {
  color: #0f172a;
}
.tf-mode-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.tf-mode-btn.preview-active {
  background: #7c3aed;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.tf-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tf-save-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #16a34a;
  font-weight: 700;
}
.tf-save-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
}
.tf-publish-btn {
  background: linear-gradient(135deg, #ff7a00 0%, #ff5500 100%);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.25);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tf-publish-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 122, 0, 0.35);
}

/* 2. ТРЕХКОЛОНОЧНЫЙ РАБОЧИЙ ХОЛСТ (STEPIK / TYPEFORM LAYOUT) */
.tf-workspace-layout {
  display: flex;
  flex: 1;
  min-height: 760px;
  background: #f8fafc;
}

/* ЛЕВАЯ КОЛОНКА: ШАГИ УРОКА (TYPEFORM SLIDE RAIL) */
.tf-steps-rail {
  width: 270px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.tf-rail-head {
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tf-rail-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}
.tf-rail-count {
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.tf-steps-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tf-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  border: 1px solid transparent;
  user-select: none;
}
.tf-step-item:hover {
  background: #f8fafc;
}
.tf-step-item.active {
  background: #fff7ed;
  border-color: #ffedd5;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.06);
}
.tf-step-num {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  flex-shrink: 0;
}
.tf-step-item.active .tf-step-num {
  background: #ea580c;
  color: #ffffff;
}
.tf-step-info {
  flex: 1;
  min-width: 0;
}
.tf-step-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-step-item.active .tf-step-name {
  color: #c2410c;
}
.tf-step-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tf-branch-badge {
  color: #ea580c;
  background: #ffedd5;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
}
.tf-add-step-wrap {
  padding: 12px;
  border-top: 1px solid #f1f5f9;
}
.tf-btn-add-step {
  width: 100%;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tf-btn-add-step:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #ea580c;
}

/* ЦЕНТРАЛЬНАЯ ОБЛАСТЬ: БОЛЬШАЯ ФОКУС-КАРТОЧКА (CENTER STAGE) */
.tf-canvas-stage {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8fafc;
}
.tf-focus-card {
  width: 100%;
  max-width: 860px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Заголовок карточки вопроса */
.tf-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}
.tf-card-qindex {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ea580c;
}
.tf-card-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tf-badge-pill {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  background: #f1f5f9;
  color: #334155;
}
.tf-badge-pill.points {
  background: #ecfdf5;
  color: #059669;
}

/* Формулировка вопроса */
.tf-q-prompt-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tf-q-title-display {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
}
.tf-q-title-display .katex {
  font-size: 1.1em;
}

/* Опции ответа (крупные карточки A, B, C, D) */
.tf-options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tf-opt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.tf-opt-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.tf-opt-card.is-correct {
  border-color: #10b981;
  background: #f0fdf4;
}
.tf-opt-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.tf-opt-key {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  font-size: 13.5px;
  font-weight: 800;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tf-opt-card.is-correct .tf-opt-key {
  background: #10b981;
  color: #ffffff;
}
.tf-opt-text {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}
.tf-opt-correct-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #059669;
  background: #d1fae5;
  padding: 4px 10px;
  border-radius: 6px;
}

/* 3. НАГЛЯДНАЯ СХЕМА ВЕТВЛЕНИЯ ПРИ ОШИБКЕ (VISUAL BRANCHING FLOW) */
.tf-branching-section {
  margin-top: 12px;
  background: #fafaf9;
  border: 1.5px dashed #fed7aa;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tf-branching-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tf-branch-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: #c2410c;
}
.tf-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}

/* Визуальная диаграмма узлов ветвления */
.tf-branch-diagram {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding-left: 24px;
  border-left: 2px solid #fdba74;
  margin-left: 8px;
}
.tf-node-card {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(251, 146, 60, 0.06);
}
.tf-node-card::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 20px;
  width: 24px;
  height: 2px;
  background: #fdba74;
}
.tf-node-badge {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ea580c;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tf-node-content {
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  line-height: 1.5;
}
.tf-node-ts-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  align-self: flex-start;
}
.tf-node-followup {
  background: #fff7ed;
  border: 1px solid #fb923c;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tf-node-followup-title {
  font-size: 13px;
  font-weight: 800;
  color: #9a3412;
}

/* 4. ПРАВЫЙ ИНСПЕКТОР ПАРАМЕТРОВ (PROPERTY DRAWER) */
.tf-inspector-drawer {
  width: 280px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  flex-shrink: 0;
}
.tf-insp-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-insp-group-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
}
.tf-insp-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-insp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.tf-insp-row input[type="number"] {
  width: 54px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-weight: 800;
  text-align: center;
}
.tf-insp-row select {
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}

/* 5. ИНТЕРАКТИВНЫЙ РЕЖИМ ПРЕВЬЮ УЧЕНИКА (PLAYGROUND) */
.tf-simulator-card {
  width: 100%;
  max-width: 760px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tf-sim-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
}
.tf-sim-opt-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  text-align: left;
  font-size: 15.5px;
  font-weight: 600;
  color: #1e293b;
}
.tf-sim-opt-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.tf-sim-opt-btn.selected {
  border-color: #ff7a00;
  background: #fff7ed;
  box-shadow: 0 2px 10px rgba(255, 122, 0, 0.12);
}
.tf-sim-opt-btn.wrong-selected {
  border-color: #ef4444;
  background: #fef2f2;
}
.tf-sim-opt-btn.correct-selected {
  border-color: #10b981;
  background: #f0fdf4;
}

/* Блок ошибки и подсказки в симуляторе */
.tf-sim-remediation-box {
  background: #fff7ed;
  border: 1.5px solid #fb923c;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: tfSlideDown 0.3s ease-out;
}
@keyframes tfSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tf-sim-rem-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #c2410c;
}
.tf-sim-rem-hint {
  font-size: 14px;
  color: #7c2d12;
  line-height: 1.5;
  font-weight: 500;
}


/* =============================================================================
   PREPKA COURSE & ASSESSMENT STUDIO 2.0 (PROFESSIONAL EDTECH STYLES)
   ============================================================================= */

.prepka-studio-root {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 860px;
  position: relative;
}

/* 1. TOPBAR */
.ps-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.ps-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ps-select-pill {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-select-pill:hover, .ps-select-pill:focus {
  border-color: #ff3d81;
  background: #ffffff;
}
.ps-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}
.ps-bc-sep {
  color: #cbd5e1;
}
.ps-bc-lesson b {
  color: #0f172a;
}
.ps-status-pill {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.ps-status-pill.status-published {
  background: #ecfdf5;
  color: #059669;
}
.ps-status-pill.status-draft {
  background: #fffbeb;
  color: #d97706;
}
.ps-badge-stop {
  padding: 4px 10px;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
}

.ps-mode-toggle-group {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}
.ps-toggle-btn {
  padding: 7px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-toggle-btn:hover {
  color: #0f172a;
}
.ps-toggle-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ps-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ps-autosave-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
}
.ps-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: psPulse 2s infinite;
}
@keyframes psPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 2. WORKSPACE GRID */
.ps-workspace-grid {
  display: grid;
  grid-template-columns: 290px 1fr 280px;
  flex: 1;
  min-height: 800px;
  background: #f8fafc;
}

/* 3. LEFT RAIL (STEPS & TREE) */
.ps-left-rail {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}
.ps-rail-nav {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 12px;
  gap: 6px;
  background: #f8fafc;
}
.ps-rail-tab {
  flex: 1;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-rail-tab:hover {
  color: #0f172a;
}
.ps-rail-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.ps-steps-scroll, .ps-tree-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-step-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  margin-bottom: 8px;
}
.ps-step-card:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.ps-step-card.is-active {
  background: #fff7ed;
  border-color: #ea580c;
  box-shadow: 0 2px 10px rgba(234, 88, 12, 0.1);
}
.ps-step-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.ps-step-number {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}
.ps-step-card.is-active .ps-step-number {
  background: #ea580c;
  color: #ffffff;
}
.ps-step-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ps-step-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-step-badges {
  display: flex;
  gap: 6px;
  font-size: 11px;
}
.ps-badge-points {
  color: #64748b;
  font-weight: 600;
}
.ps-badge-branch {
  color: #ea580c;
  font-weight: 800;
}
.ps-step-actions {
  display: flex;
  gap: 2px;
}
.ps-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-icon-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.ps-icon-btn.danger:hover {
  background: #fee2e2;
  color: #ef4444;
}
.ps-icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ps-btn-add-step {
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  color: #ea580c;
  border-color: #fdba74;
}
.ps-btn-add-step:hover {
  background: #fff7ed;
  border-color: #ea580c;
}

/* ДРЕВО КУРСА */
.ps-tree-mod-group {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.ps-tree-mod-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
}
.ps-tree-badge {
  background: #e2e8f0;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10.5px;
}
.ps-tree-lesson-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-tree-lesson-item:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}
.ps-tree-lesson-item.is-active {
  border-color: #ea580c;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 800;
}
.ps-btn-add-lesson {
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  border: 1px dashed #cbd5e1;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  margin-top: 4px;
}
.ps-btn-add-lesson:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 4. CENTER CANVAS */
.ps-center-canvas {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  justify-content: center;
}
.ps-canvas-card {
  width: 100%;
  max-width: 820px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ps-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}
.ps-ch-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ps-ch-step-badge {
  font-size: 13px;
  font-weight: 800;
  color: #ea580c;
  background: #fff7ed;
  padding: 4px 10px;
  border-radius: 8px;
}
.ps-ch-type-badge {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}
.ps-ch-points {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}
.ps-input-points {
  width: 60px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  font-weight: 800;
  font-size: 13px;
}

/* 5. NOTION EDITOR */
.ps-notion-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ps-input-hero-title {
  width: 100%;
  border: none;
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-input-hero-title:focus {
  border-bottom-color: #ea580c;
}
.ps-notion-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  flex-wrap: wrap;
}
.ps-nt-label {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
}
.ps-btn-tool {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-btn-tool:hover {
  border-color: #ea580c;
  color: #ea580c;
  background: #fff7ed;
}

.ps-blocks-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-block-card {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-bc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-bc-tag {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Callouts */
.ps-block-callout {
  border-left: 1px solid #f59e0b;
  background: #fffbeb;
}
.ps-block-callout.theme-tip {
  border-left-color: #10b981;
  background: #ecfdf5;
}
.ps-block-callout.theme-rule {
  border-left-color: #3b82f6;
  background: #eff6ff;
}

/* KaTeX formula */
.ps-formula-preview-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
}
.ps-preview-sub {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}
.ps-katex-output {
  font-size: 18px;
  margin-top: 6px;
  color: #0f172a;
}

/* Code */
.ps-code-area {
  background: #0f172a;
  color: #f8fafc;
  font-family: 'Fira Code', monospace;
  font-size: 13.5px;
  border-radius: 10px;
  padding: 12px;
}

/* 6. QUESTION BUILDER */
.ps-question-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ps-label {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  display: block;
  margin-bottom: 6px;
}
.ps-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-textarea:focus, .ps-input-text:focus {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}
.ps-input-text {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  font-size: 14px;
  outline: none;
}
.ps-prompt-live-preview {
  margin-top: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.ps-rich-preview {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 4px;
}

/* Options Grid */
.ps-opt-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.ps-opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-opt-row.is-correct-row {
  background: #f0fdf4;
  border-color: #10b981;
}
.ps-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.ps-opt-char {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #475569;
}
.ps-opt-row.is-correct-row .ps-opt-char {
  background: #10b981;
  color: #ffffff;
}
.ps-opt-input {
  flex: 1;
}
.ps-opt-rendered {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
}
.ps-tag-correct {
  background: #ecfdf5;
  color: #059669;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Matching & Ordering */
.ps-matching-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 10px;
}
.ps-match-row, .ps-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ps-match-key {
  width: 24px;
  font-size: 14px;
  color: #ea580c;
}
.ps-match-key.num {
  color: #2563eb;
}
.ps-order-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #ea580c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* 7. VISUAL BRANCHING (REMEDIATION) */
.ps-branching-card {
  margin-top: 14px;
  border: 1.5px solid #fed7aa;
  background: #fffaf5;
  border-radius: 16px;
  padding: 20px 24px;
}
.ps-branching-card.is-enabled {
  border-color: #f97316;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.08);
}
.ps-branch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-bh-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: #c2410c;
}
.ps-toggle-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
}
.ps-flow-diagram {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  flex-wrap: wrap;
}
.ps-flow-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
}
.node-trigger { background: #fee2e2; color: #991b1b; }
.node-remedy { background: #fef3c7; color: #92400e; }
.node-question { background: #dbeafe; color: #1e40af; }
.ps-flow-arrow { font-size: 16px; color: #f97316; font-weight: 800; }
.ps-remedy-inputs {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.ps-followup-box {
  background: #ffffff;
  border: 1px dashed #f97316;
  border-radius: 12px;
  padding: 16px;
}
.ps-fo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* 8. RIGHT INSPECTOR */
.ps-right-inspector {
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ps-insp-title {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.ps-insp-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-insp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.ps-ir-label {
  color: #64748b;
}

/* 9. MODALS */
.ps-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ps-modal-card {
  width: 100%;
  max-width: 680px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: psZoomIn 0.2s ease-out;
}
@keyframes psZoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.ps-modal-sm { max-width: 460px; }
.ps-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}
.ps-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ps-mg-item {
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
}
.ps-mg-item:hover {
  border-color: #ea580c;
  background: #fff7ed;
  transform: translateY(-2px);
}
.ps-mgi-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.ps-mg-item b { font-size: 13.5px; color: #0f172a; display: block; }
.ps-mg-item p { margin: 4px 0 0; font-size: 12px; color: #64748b; line-height: 1.4; }

/* 10. SIMULATOR */
.ps-sim-wrapper {
  background: #f8fafc;
  min-height: 850px;
  display: flex;
  flex-direction: column;
}
.ps-sim-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.ps-st-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}
.ps-st-bar {
  width: 200px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.ps-st-fill {
  height: 100%;
  background: #8b5cf6;
  transition: width 0.3s;
}
.ps-sim-stage {
  flex: 1;
  padding: 30px;
  display: flex;
  justify-content: center;
}
.ps-sim-card {
  width: 100%;
  max-width: 740px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ps-sim-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-sim-prompt {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.4;
}
.ps-sim-options-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.ps-sim-opt-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s, width 0.15s, filter 0.15s;
  text-align: left;
}
.ps-sim-opt-card:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.ps-sim-opt-card.is-selected {
  border-color: #8b5cf6;
  background: #f5f3ff;
}
.ps-sim-opt-card.is-correct {
  border-color: #10b981;
  background: #ecfdf5;
}
.ps-sim-opt-card.is-wrong {
  border-color: #ef4444;
  background: #fef2f2;
}

/* Remediation in Simulator */
.ps-sim-remediation-alert {
  background: #fff7ed;
  border: 1.5px solid #fb923c;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: psSlideDown 0.3s ease-out;
}
@keyframes psSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ps-sra-head {
  font-size: 15px;
  font-weight: 800;
  color: #c2410c;
}
.ps-sra-hint {
  font-size: 14px;
  color: #7c2d12;
  line-height: 1.5;
}
.ps-sra-followup-box {
  background: #ffffff;
  border: 1px dashed #ea580c;
  border-radius: 12px;
  padding: 14px;
  margin-top: 8px;
}
.ps-sra-fb-title {
  font-size: 13px;
  font-weight: 800;
  color: #ea580c;
  margin-bottom: 6px;
}
.ps-sra-fb-prompt {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}
.ps-sra-opt-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.ps-sim-success-box {
  background: #ecfdf5;
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-ssb-left b {
  font-size: 16px;
  color: #065f46;
}
.ps-ssb-exp {
  font-size: 13.5px;
  color: #047857;
  margin-top: 4px;
}
/* ============ Lesson editor: coherent, responsive workspace ============ */
.ls-wrap {
  --ls-accent: #e83e73;
  --ls-accent-soft: rgba(232, 62, 115, .09);
  --ls-ink: var(--text, #18202c);
  --ls-line: var(--border, #e7eaf0);
  display: grid;
  grid-template-columns: minmax(245px, 290px) minmax(0, 1fr);
  min-height: min(820px, calc(100dvh - 112px));
  color: var(--ls-ink);
  background: var(--bg-2, #f7f8fb);
  border: 1px solid var(--ls-line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(18, 28, 45, .07);
}
.ls-wrap button { -webkit-tap-highlight-color: transparent; }
.ls-tree {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--solid, #fff);
  border-right: 1px solid var(--ls-line);
}
.ls-tree-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 18px 14px; }
.ls-tree-title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:-.02em; }
.ls-tree-title svg { width:19px; height:19px; color:var(--ls-accent); }
.ls-icon-btn {
  display:inline-grid; place-items:center; flex:none; width:34px; height:34px;
  border:1px solid var(--ls-line); border-radius:10px; color:var(--muted);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.ls-icon-btn svg { width:16px; height:16px; }
.ls-icon-btn:hover { color:var(--ls-accent); border-color:rgba(232,62,115,.28); background:var(--ls-accent-soft); }
.ls-icon-btn:active { transform:scale(.96); }
.ls-icon-btn.danger:hover { color:#d64255; border-color:#f4c7cd; background:#fff3f4; }
.ls-tree-search { display:flex; align-items:center; gap:9px; margin:0 14px 14px; padding:0 11px; min-height:40px; border:1px solid var(--ls-line); border-radius:11px; color:var(--faint); background:var(--bg-2); }
.ls-tree-search svg { width:16px; height:16px; flex:none; }
.ls-search-inp { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.ls-search-inp::placeholder { color:var(--faint); }
.ls-tree-body { min-height:0; flex:1; overflow:auto; padding:0 9px 14px; overscroll-behavior:contain; }
.ls-course { margin:3px 0; border:1px solid transparent; border-radius:13px; overflow:hidden; }
.ls-course.open { border-color:var(--ls-line); background:var(--solid, #fff); }
.ls-course-head { display:flex; align-items:center; gap:9px; width:100%; min-height:58px; padding:9px 10px; text-align:left; border-radius:12px; transition:background .16s ease; }
.ls-course-head:hover { background:var(--bg-2); }
.ls-chev { display:grid; place-items:center; width:16px; color:var(--faint); transition:transform .18s ease; }
.ls-chev svg { width:14px; height:14px; }
.ls-course.open .ls-chev { transform:rotate(180deg); }
.ls-course-ic { display:grid; place-items:center; width:33px; height:33px; flex:none; border-radius:10px; color:#fff; background:var(--g, var(--ls-accent)); }
.ls-course-ic svg { width:16px; height:16px; }
.ls-course-txt { display:flex; flex:1; flex-direction:column; min-width:0; gap:3px; }
.ls-course-txt b { overflow:hidden; color:var(--text); font-size:11px; font-weight:800; line-height:1.35; text-overflow:ellipsis; }
.ls-course-txt small { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ls-pill { flex:none; padding:4px 7px; border-radius:20px; font-size:9px; font-weight:800; }
.ls-pill.draft { color:#a56b12; background:#fff3d8; }
.ls-lessons { padding:0 7px 8px 26px; }
.ls-lesson { display:flex; align-items:center; gap:2px; position:relative; min-height:45px; margin:2px 0; border-radius:10px; }
.ls-lesson.active { background:var(--ls-accent-soft); }
.ls-lesson-btn { display:flex; align-items:center; gap:9px; flex:1; min-width:0; padding:7px 5px 7px 8px; text-align:left; border-radius:9px; }
.ls-lesson-btn:hover { background:var(--surface-2); }
.ls-num { display:grid; place-items:center; width:22px; height:22px; flex:none; color:var(--muted); border:1px solid var(--ls-line); border-radius:7px; font-size:10px; font-weight:800; }
.ls-lesson.active .ls-num { color:var(--ls-accent); border-color:rgba(232,62,115,.22); background:var(--solid,#fff); }
.ls-lesson-txt { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.ls-lesson-txt b { overflow:hidden; color:var(--text); font-size:10px; font-weight:750; line-height:1.35; text-overflow:ellipsis; }
.ls-lesson.active .ls-lesson-txt b { color:var(--ls-accent); }
.ls-lesson-txt small { display:flex; flex-wrap:wrap; gap:5px; color:var(--muted); font-size:9px; }
.ls-lesson-txt small i { font-style:normal; }
.ls-lesson-txt small .q,.ls-lesson-txt small .c { color:#5571b8; }
.ls-lesson-txt small .f { color:#ae7531; }
.ls-lesson-flags { display:flex; align-items:center; gap:3px; padding-right:4px; }
.ls-lesson-flags .fg { display:grid; place-items:center; width:17px; height:17px; color:#8190a3; font-style:normal; }
.ls-lesson-flags .fg svg { width:12px; height:12px; }
.ls-lesson-flags .fg.v { color:#398b72; }
.ls-lesson-flags .fg.free { color:#d8942c; }
.ls-lesson-flags .fg.own { color:var(--ls-accent); }
.ls-lesson-flags .fg.off { opacity:.35; }
.ls-grip,.ls-ch-grip,.ls-q-grip,.ls-order-grip { color:#b5beca; cursor:grab; user-select:none; }
.ls-grip { padding:7px 4px; font-size:12px; letter-spacing:-3px; }
.ls-add-lesson { display:flex; align-items:center; gap:7px; width:100%; padding:9px 10px 8px 39px; color:var(--ls-accent); text-align:left; font-size:11px; font-weight:750; border-radius:9px; }
.ls-add-lesson:hover { background:var(--ls-accent-soft); }
.ls-add-lesson svg { width:14px; height:14px; }
.ls-tree-empty,.ls-tree-load { padding:18px 12px; color:var(--muted); font-size:12px; text-align:center; }
.ls-main { min-width:0; min-height:0; overflow:auto; }
.ls-editor { min-height:100%; display:flex; flex-direction:column; }
.ls-topbar {
  position:sticky; top:0; z-index:12; display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:82px; padding:14px clamp(18px,3vw,38px);
  background:color-mix(in srgb, var(--solid,#fff) 94%, transparent);
  border-bottom:1px solid var(--ls-line); backdrop-filter:blur(14px);
}
.ls-top-left { display:flex; min-width:0; flex-direction:column; gap:5px; }
.ls-top-sub { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.ls-title-inp { width:min(100%,520px); padding:0; border:0; outline:0; background:transparent; color:var(--text); font-size:clamp(17px,2vw,23px); font-weight:800; letter-spacing:-.04em; }
.ls-title-inp::placeholder { color:var(--faint); }
.ls-top-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:10px; }
.ls-top-meta i { display:inline-flex; align-items:center; gap:4px; font-style:normal; }
.ls-top-meta svg { width:13px; height:13px; }
.ls-dur { width:52px; padding:1px 3px; border:1px solid var(--ls-line); border-radius:5px; background:var(--bg-2); font-size:10px; }
.ls-top-meta .free { color:#ba8129; }
.ls-top-right { display:flex; align-items:center; justify-content:flex-end; flex:none; gap:8px; }
.ls-save-state { min-width:100px; color:var(--muted); font-size:10px; text-align:right; }
.ls-save-state.dirty { color:#b5791d; }
.ls-save-state.saving { color:#526fc4; }
.ls-save-state.saved { color:#218364; }
.ls-wrap .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:37px; padding:8px 12px; border:1px solid var(--ls-line); border-radius:10px; background:var(--solid,#fff); color:var(--text); font-size:11px; font-weight:750; line-height:1.2; transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.ls-wrap .btn:hover { border-color:var(--border-2); background:var(--bg-2); }
.ls-wrap .btn:active { transform:translateY(1px); }
.ls-wrap .btn svg { width:15px; height:15px; }
.ls-wrap .btn.btn-primary { color:#fff; border-color:var(--ls-accent); background:var(--ls-accent); box-shadow:0 5px 13px rgba(232,62,115,.18); }
.ls-wrap .btn.btn-primary:hover { background:#d83166; box-shadow:0 7px 17px rgba(232,62,115,.23); }
.ls-wrap .btn.btn-danger { color:#c83f50; border-color:#f0c8cd; background:#fff8f8; }
.ls-body { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:start; flex:1; min-height:0; }
.ls-nav { position:sticky; top:82px; display:flex; flex-direction:column; gap:4px; padding:22px 11px; }
.ls-nav-item { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:0 11px; color:var(--muted); text-align:left; font-size:11px; font-weight:700; border-radius:10px; transition:color .16s ease, background .16s ease; }
.ls-nav-item svg { width:16px; height:16px; flex:none; opacity:.8; }
.ls-nav-item:hover { color:var(--text); background:var(--surface-2); }
.ls-nav-item.active { color:var(--ls-accent); background:var(--ls-accent-soft); }
.ls-nav-item.active svg { opacity:1; }
.ls-nav-count { display:grid; place-items:center; min-width:19px; height:19px; margin-left:auto; padding:0 5px; color:var(--muted); background:var(--surface-2); border-radius:9px; font-size:9px; font-style:normal; }
.ls-section { min-width:0; max-width:1020px; padding:24px clamp(18px,3vw,42px) 52px; }
.ls-sec-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 19px; }
.ls-sec-head h3 { color:var(--text); font-size:20px; letter-spacing:-.04em; }
.ls-sec-head p { max-width:620px; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.6; }
.ls-sec-head .btn { flex:none; }
.ls-card { margin:0 0 14px; overflow:hidden; border:1px solid var(--ls-line); border-radius:15px; background:var(--solid,#fff); box-shadow:0 3px 12px rgba(18,28,45,.025); }
.ls-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:49px; padding:12px 17px; border-bottom:1px solid var(--ls-line); }
.ls-card-head h4 { color:var(--text); font-family:var(--font); font-size:12px; font-weight:800; letter-spacing:-.01em; }
.ls-card-body { padding:16px 17px; }
.ls-hint { color:var(--muted); font-size:10px; }
.ls-field { display:flex; flex-direction:column; gap:7px; min-width:0; margin:0 0 15px; color:var(--text); font-size:11px; font-weight:750; }
.ls-field:last-child { margin-bottom:0; }
.ls-field > span { color:var(--text); }
.ls-field > span i { font-size:10px; font-weight:500; font-style:normal; }
.ls-field .muted,.ls-field small { color:var(--muted); font-size:10px; font-weight:500; line-height:1.5; }
.ls-wrap .input,.ls-wrap .textarea,.ls-wrap .select {
  width:100%; min-width:0; padding:10px 11px; color:var(--text); border:1px solid var(--ls-line); border-radius:9px; outline:none; background:var(--solid,#fff); font-size:12px; font-weight:500; line-height:1.45; transition:border-color .16s ease, box-shadow .16s ease;
}
.ls-wrap .input:focus,.ls-wrap .textarea:focus,.ls-wrap .select:focus { border-color:rgba(232,62,115,.55); box-shadow:0 0 0 3px rgba(232,62,115,.09); }
.ls-wrap .textarea { min-height:66px; resize:vertical; }
.ls-wrap input[type="number"] { font-variant-numeric:tabular-nums; }
.ls-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.ls-check { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--ls-line); border-radius:10px; background:var(--bg-2); cursor:pointer; }
.ls-check input { width:16px; height:16px; margin-top:2px; accent-color:var(--ls-accent); }
.ls-check span { display:flex; flex-direction:column; gap:3px; }
.ls-check b { font-size:11px; }
.ls-check small { font-size:10px; line-height:1.45; }
.ls-check.big { padding:15px; }
.ls-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:19px; }
.ls-ov-row { display:flex; align-items:center; gap:11px; min-width:0; padding:12px; border:1px solid var(--ls-line); border-radius:12px; background:var(--solid,#fff); text-align:left; transition:border .16s ease, transform .16s ease, background .16s ease; }
.ls-ov-row:hover { transform:translateY(-1px); border-color:rgba(232,62,115,.28); }
.ls-ov-row.empty { background:var(--bg-2); }
.ls-ov-ic { display:grid; place-items:center; width:34px; height:34px; flex:none; color:var(--ls-accent); background:var(--ls-accent-soft); border-radius:10px; }
.ls-ov-ic svg { width:16px; height:16px; }
.ls-ov-txt { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.ls-ov-txt b { font-size:11px; }
.ls-ov-txt small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ls-ov-state { color:#27a17c; }
.ls-ov-row.empty .ls-ov-state { color:#c69a4a; }
.ls-ov-state svg { width:15px; height:15px; }
.ls-poster { position:relative; width:min(100%,480px); overflow:hidden; border-radius:12px; background:var(--bg-2); }
.ls-poster img { width:100%; max-height:250px; object-fit:cover; }
.ls-poster-x { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:31px; height:31px; color:#fff; border-radius:9px; background:rgba(16,22,30,.72); }
.ls-poster-x svg { width:15px; height:15px; }
.ls-upload-btn { position:relative; overflow:hidden; cursor:pointer; }
.ls-upload-btn input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.ls-embed-preview { overflow:hidden; margin-top:13px; border:1px solid var(--ls-line); border-radius:12px; background:#111; aspect-ratio:16/9; }
.ls-embed-preview iframe,.ls-embed-preview video { width:100%; height:100%; border:0; }
.ls-host { padding:4px 8px; border-radius:20px; color:#5571b8; background:#eef2ff; font-size:9px; font-weight:800; }
.ls-tl-track { position:relative; height:7px; margin:0 3px 17px; overflow:visible; border-radius:9px; background:var(--surface-3); }
.ls-tl-fill { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ee5281,#ff9c66); }
.ls-tl-track b { position:absolute; top:50%; width:11px; height:11px; border:2px solid var(--solid,#fff); border-radius:50%; background:#dc4772; transform:translate(-50%,-50%); box-shadow:0 1px 4px #0002; }
.ls-chapters,.ls-notes-list,.ls-tasks-list,.ls-opts,.ls-shorts,.ls-match-col,.ls-order,.ls-crits { display:flex; flex-direction:column; gap:7px; }
.ls-ch-row { display:grid; grid-template-columns:20px 72px minmax(0,1fr) 34px; align-items:center; gap:7px; }
.ls-ch-grip { text-align:center; font-size:12px; letter-spacing:-3px; }
.ls-ch-time { width:100%; padding:9px 5px; border:1px solid var(--ls-line); border-radius:8px; outline:0; background:var(--bg-2); text-align:center; font-size:11px; font-variant-numeric:tabular-nums; }
.ls-ch-title { padding:8px 10px !important; }
.ls-add-row { margin-top:11px; }
.ls-note-row,.ls-task-row { display:grid; grid-template-columns:25px minmax(0,1fr) 34px; align-items:start; gap:8px; }
.ls-note-num,.ls-task-num { display:grid; place-items:center; width:24px; height:24px; margin-top:5px; color:var(--muted); border-radius:8px; background:var(--bg-2); font-size:10px; font-weight:800; }
.ls-note-inp,.ls-task-row textarea { min-height:54px !important; }
.ls-rule-prev { margin-bottom:13px; padding:13px 15px; border-left: 1px solid #edaa42; border-radius:5px 10px 10px 5px; background:#fff8e8; }
.ls-rule-prev small { color:#aa751f; font-size:10px; font-weight:800; }
.ls-rule-prev p { margin-top:5px; color:#624e2b; font-size:12px; line-height:1.55; white-space:pre-wrap; }
.ls-materials,.ls-file-row { display:flex; flex-direction:column; gap:8px; }
.ls-file-row { display:flex; flex-direction:row; align-items:center; gap:11px; padding:10px; border:1px solid var(--ls-line); border-radius:10px; }
.ls-f-ico { display:grid; place-items:center; width:39px; height:39px; flex:none; color:#546fae; border-radius:10px; background:#edf2ff; font-size:9px; font-weight:900; }
.ls-f-txt { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; font-size:11px; }
.ls-f-txt b { overflow:hidden; text-overflow:ellipsis; }
.ls-f-txt small { color:var(--muted); font-size:10px; }
.ls-f-txt a { color:var(--ls-accent); }
.ls-switch input { accent-color:var(--ls-accent); }
.ls-switch { display:flex; align-items:center; cursor:pointer; }
.ls-switch i { display:none; }
.ls-switch:has(input:checked) { color:var(--ls-accent); }
.ls-note-inline,.ls-qf-hint { display:flex; align-items:flex-start; gap:8px; padding:10px; color:#6b6480; border-radius:9px; background:#f5f2ff; font-size:10px; line-height:1.5; }
.ls-note-inline svg,.ls-qf-hint svg { width:15px; height:15px; flex:none; color:#8468c1; }
.ls-hw-tabs { display:flex; gap:5px; padding:4px; border-radius:10px; background:var(--bg-2); }
.ls-hw-tabs button { padding:7px 10px; color:var(--muted); border-radius:7px; font-size:10px; font-weight:750; }
.ls-hw-tabs button.active { color:var(--ls-accent); background:var(--solid,#fff); box-shadow:0 1px 4px #18202c12; }
.ls-qs { display:flex; flex-direction:column; gap:8px; }
.ls-qs-empty { display:flex; align-items:center; justify-content:center; gap:10px; min-height:86px; color:var(--muted); border:1px dashed var(--ls-line); border-radius:12px; font-size:11px; }
.ls-qs-empty svg { color:var(--ls-accent); }
.ls-q { overflow:hidden; border:1px solid var(--ls-line); border-radius:12px; background:var(--solid,#fff); }
.ls-q.invalid { border-color:#efc886; }
.ls-q-head { display:flex; align-items:center; gap:5px; min-height:60px; padding:6px 9px; }
.ls-q-grip { padding:7px 3px; font-size:12px; letter-spacing:-3px; }
.ls-q-toggle { display:flex; align-items:center; flex:1; min-width:0; gap:9px; padding:6px 4px; text-align:left; }
.ls-q-num { display:grid; place-items:center; width:27px; height:27px; flex:none; color:var(--ls-accent); border-radius:8px; background:var(--ls-accent-soft); font-size:10px; font-weight:850; }
.ls-q-tt { display:grid; place-items:center; width:29px; height:29px; flex:none; color:#6374a5; border-radius:8px; background:#f1f3fa; }
.ls-q-tt svg { width:15px; height:15px; }
.ls-q-summary { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.ls-q-summary b { overflow:hidden; color:var(--text); font-size:11px; line-height:1.4; text-overflow:ellipsis; }
.ls-q-summary small { color:var(--muted); font-size:9px; }
.ls-q-summary .err { color:#b2741c; }
.ls-q-chev { color:var(--faint); transition:transform .18s ease; }
.ls-q-chev svg { width:15px; height:15px; }
.ls-q.open .ls-q-chev { transform:rotate(180deg); }
.ls-q-acts { display:flex; gap:3px; }
.ls-q-acts .ls-icon-btn { width:30px; height:30px; border-color:transparent; }
.ls-q-body { padding:15px; border-top:1px solid var(--ls-line); background:color-mix(in srgb,var(--bg-2) 55%, var(--solid)); }
.ls-qf-grid { display:grid; grid-template-columns:minmax(0,1fr) 175px; gap:17px; }
.ls-qf-main { min-width:0; }
.ls-qf-side { display:flex; flex-direction:column; gap:13px; }
.ls-qf-side .ls-field { margin:0; }
.ls-qf-type { display:flex; flex-direction:column; gap:7px; color:var(--text); font-size:10px; font-weight:750; }
.ls-qf-type small { font-size:9px; font-weight:500; line-height:1.45; }
.ls-q-img { margin:0 0 13px; }
.ls-q-img-add { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; color:#586c9e; border:1px dashed #cad3e7; border-radius:9px; font-size:10px; cursor:pointer; }
.ls-q-img-add svg { width:14px; height:14px; }
.ls-q-img-prev { position:relative; display:inline-block; max-width:280px; overflow:hidden; border-radius:10px; }
.ls-q-img-prev img { max-height:160px; object-fit:contain; }
.ls-q-img-prev .ls-icon-btn { position:absolute; top:6px; right:6px; background:var(--solid,#fff); }
.ls-opts { margin-top:7px; }
.ls-opt { display:flex; align-items:center; gap:8px; min-width:0; padding:6px; border:1px solid var(--ls-line); border-radius:9px; background:var(--solid,#fff); }
.ls-opt.correct { border-color:#9ed4c0; background:#f1fbf7; }
.ls-opt input[type="radio"],.ls-opt input[type="checkbox"] { width:15px; height:15px; flex:none; accent-color:#239875; }
.ls-opt-key { display:grid; place-items:center; width:23px; height:23px; flex:none; color:#62718c; border-radius:7px; background:var(--bg-2); font-size:9px; font-weight:850; }
.ls-opt-key.alt { color:#856bac; }
.ls-opt-inp { flex:1; min-width:0; padding:6px 4px; border:0; outline:0; background:transparent; font-size:11px; }
.ls-opt-inp:focus { box-shadow:inset 0 -1px var(--ls-accent); }
.ls-opt .ls-icon-btn { width:28px; height:28px; border-color:transparent; }
.ls-short-row { display:flex; align-items:center; gap:7px; }
.ls-short-ic { color:#299575; }
.ls-short-row .input { flex:1; }
.ls-match { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.ls-match-row { display:grid; grid-template-columns:24px minmax(0,1fr) 34px; align-items:center; gap:6px; }
.ls-match-pair { grid-column:2 / 3; }
.ls-order-row { display:grid; grid-template-columns:18px 25px minmax(0,1fr) auto 34px; align-items:center; gap:7px; }
.ls-order-grip { text-align:center; font-size:11px; letter-spacing:-3px; }
.ls-order-num { color:var(--muted); font-size:10px; font-weight:800; text-align:center; }
.ls-order-mv { display:flex; gap:2px; }
.ls-order-mv .ls-icon-btn { width:27px; height:27px; }
.ls-crit-row { display:grid; grid-template-columns:29px minmax(0,1fr) 90px 34px; align-items:center; gap:7px; }
.ls-crit-code { color:#65759d; font-size:10px; font-weight:850; }
.ls-crit-max { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:10px; white-space:nowrap; }
.ls-crit-max input { width:42px; padding:7px 4px; border:1px solid var(--ls-line); border-radius:7px; background:var(--solid,#fff); }
.ls-add-q { margin-top:14px; padding:15px; border:1px dashed var(--ls-line); border-radius:13px; background:var(--solid,#fff); }
.ls-add-q-label { display:flex; align-items:center; gap:7px; margin-bottom:11px; color:var(--text); font-size:11px; font-weight:800; }
.ls-add-q-label svg { width:15px; height:15px; color:var(--ls-accent); }
.ls-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.ls-type-btn { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:0 8px; min-width:0; padding:9px; text-align:left; border:1px solid var(--ls-line); border-radius:10px; background:var(--solid,#fff); transition:border .16s ease,background .16s ease,transform .16s ease; }
.ls-type-btn:hover { transform:translateY(-1px); border-color:rgba(232,62,115,.32); background:var(--ls-accent-soft); }
.ls-type-ic { display:grid; grid-row:span 2; place-items:center; width:29px; height:29px; color:#6878aa; border-radius:8px; background:#f1f3fa; }
.ls-type-ic svg { width:15px; height:15px; }
.ls-type-btn b { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ls-type-btn small { color:var(--muted); font-size:8px; }
.ls-meta { display:grid; grid-template-columns:130px minmax(0,1fr); gap:10px; font-size:11px; }
.ls-meta dt { color:var(--muted); }
.ls-meta dd { min-width:0; overflow-wrap:anywhere; font-weight:700; }
.ls-danger-acts { display:flex; flex-wrap:wrap; gap:8px; }
.danger-zone { border-color:#f2dadd; }
.danger-zone .ls-card-head { background:#fff9f9; }
.ls-placeholder,.ls-loading { min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center; }
.ls-placeholder { margin:auto; }
.ls-ph-ic { display:grid; place-items:center; width:62px; height:62px; margin-bottom:15px; color:var(--ls-accent); border-radius:18px; background:var(--ls-accent-soft); }
.ls-ph-ic svg { width:27px; height:27px; }
.ls-placeholder h3 { color:var(--text); font-size:20px; }
.ls-placeholder p { max-width:480px; margin:10px 0 18px; color:var(--muted); font-size:12px; line-height:1.65; }
.ls-ph-acts { display:flex; gap:8px; }
.ls-error { display:flex; align-items:center; gap:12px; margin:15px; padding:12px 14px; color:#9d3f4c; border:1px solid #f0c9ce; border-radius:11px; background:#fff6f7; font-size:11px; }
.ls-error > svg { width:19px; height:19px; flex:none; }
.ls-error > div { display:flex; flex:1; flex-direction:column; gap:2px; }
.ls-error span { color:#8b6870; }
.ls-preview { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:#f3f5f9; }
.ls-preview-bar { display:flex; align-items:center; gap:12px; min-height:52px; padding:0 20px; background:var(--solid,#fff); border-bottom:1px solid var(--ls-line); }
.ls-preview-tag { display:flex; align-items:center; gap:7px; color:var(--ls-accent); font-size:11px; font-weight:800; }
.ls-preview-body { overflow:auto; padding:30px 16px; }
.ls-pv { width:min(820px,100%); margin:0 auto; padding:clamp(20px,4vw,44px); border:1px solid #e5e9ef; border-radius:18px; background:#fff; box-shadow:0 12px 40px #17203312; }
.ls-pv-head h1 { margin:0 0 8px; color:#172033; font-size:clamp(22px,4vw,34px); }
.ls-pv-head p,.ls-pv section { color:#4e5d72; }
.ls-pv section { margin-top:24px; }
.ls-pv section h3 { margin-bottom:10px; color:#182538; font-size:16px; }
.ls-pv-file { display:block; margin-top:8px; padding:10px; border:1px solid #e5e9ef; border-radius:8px; }
.ls-save-state:empty { min-width:0; }
@media (max-width:1100px) {
  .ls-wrap { grid-template-columns:235px minmax(0,1fr); }
  .ls-body { grid-template-columns:150px minmax(0,1fr); }
  .ls-nav { padding-inline:8px; }
  .ls-nav-item { gap:7px; padding-inline:8px; font-size:10px; }
  .ls-qf-grid { grid-template-columns:minmax(0,1fr) 145px; gap:12px; }
}
@media (max-width:760px) {
  .ls-wrap { display:flex; flex-direction:column; min-height:calc(100dvh - 96px); border-radius:15px; }
  .ls-tree { max-height:240px; border-right:0; border-bottom:1px solid var(--ls-line); }
  .ls-tree-head { padding:12px 14px 9px; }
  .ls-tree-search { margin-bottom:9px; }
  .ls-tree-body { max-height:140px; padding-bottom:8px; }
  .ls-lessons { padding-left:20px; }
  .ls-course-head { min-height:47px; }
  .ls-lesson { min-height:39px; }
  .ls-topbar { position:relative; align-items:flex-start; flex-direction:column; gap:10px; padding:14px; }
  .ls-top-left { width:100%; }
  .ls-title-inp { width:100%; }
  .ls-top-right { width:100%; justify-content:flex-start; }
  .ls-save-state { flex:1; min-width:0; text-align:left; }
  .ls-body { display:flex; flex-direction:column; }
  .ls-nav { position:sticky; top:0; z-index:10; flex-direction:row; overflow:auto; gap:5px; padding:8px 10px; border-bottom:1px solid var(--ls-line); background:var(--solid,#fff); }
  .ls-nav-item { width:auto; min-height:35px; flex:none; gap:6px; padding:0 9px; white-space:nowrap; }
  .ls-nav-item svg { width:14px; height:14px; }
  .ls-nav-count { min-width:17px; height:17px; }
  .ls-section { width:100%; padding:18px 13px 34px; }
  .ls-overview { grid-template-columns:1fr; }
  .ls-qf-grid { grid-template-columns:1fr; }
  .ls-qf-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .ls-qf-hint { grid-column:1/-1; }
  .ls-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .ls-top-right .btn { padding:7px 9px; font-size:10px; }
  .ls-sec-head { flex-direction:column; }
  .ls-sec-head h3 { font-size:18px; }
  .ls-grid-2,.ls-match { grid-template-columns:1fr; }
  .ls-ch-row { grid-template-columns:16px 62px minmax(0,1fr) 31px; gap:5px; }
  .ls-card-body { padding:13px; }
  .ls-card-head { padding-inline:13px; }
  .ls-q-head { padding-inline:5px; }
  .ls-q-tt { display:none; }
  .ls-q-body { padding:11px; }
  .ls-crit-row { grid-template-columns:25px minmax(0,1fr) 78px 30px; gap:4px; }
  .ls-order-row { grid-template-columns:14px 20px minmax(0,1fr) 30px; gap:4px; }
  .ls-order-mv { display:none; }
  .ls-note-row,.ls-task-row { grid-template-columns:22px minmax(0,1fr) 31px; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .ls-wrap *, .ls-wrap *::before, .ls-wrap *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* Final layout pass for the server-backed teacher editor */
@media (max-width:1280px) {
  .ls-body { display:flex; flex-direction:column; }
  .ls-nav {
    position:sticky; top:0; z-index:10; flex-direction:row; overflow-x:auto;
    gap:5px; padding:8px 12px; border-bottom:1px solid var(--ls-line);
    background:var(--solid,#fff); scrollbar-width:thin;
  }
  .ls-nav-item { width:auto; min-height:36px; flex:none; gap:7px; padding:0 10px; white-space:nowrap; }
  .ls-section { width:100%; max-width:none; padding:20px clamp(16px,2.5vw,32px) 42px; }
  .ls-main { overflow:visible; }
}
@media (min-width:1281px) {
  .ls-wrap { grid-template-columns:minmax(245px,280px) minmax(0,1fr); }
  .ls-body { grid-template-columns:168px minmax(0,1fr); }
}

/* Просторная рабочая область студии */
.ls-wrap { width:100%; min-height:calc(100dvh - 92px); border-radius:16px; }
@media (min-width:1281px) {
  .ls-wrap:not(.ls-fullscreen) { grid-template-columns:minmax(270px,21vw) minmax(0,1fr); }
  .ls-wrap:not(.ls-fullscreen) .ls-body { grid-template-columns:180px minmax(0,1fr); }
  .ls-wrap:not(.ls-fullscreen) .ls-section { max-width:none; }
}
.ls-wrap.ls-fullscreen {
  position:fixed; inset:0; z-index:9999; width:100vw; height:100dvh; min-height:0;
  grid-template-columns:minmax(260px,20vw) minmax(0,1fr); border:0; border-radius:0;
  box-shadow:none; background:var(--bg-2,#f7f8fb);
}
.ls-fullscreen .ls-tree { overflow:hidden; }
.ls-fullscreen .ls-main { min-height:0; height:100dvh; overflow:auto; }
.ls-fullscreen .ls-editor { min-height:100%; }
.ls-fullscreen .ls-body { min-height:calc(100dvh - 88px); }
.ls-fullscreen .ls-section { max-width:none; width:100%; padding-inline:clamp(24px,3vw,56px); }
.ls-fullscreen .ls-topbar { position:sticky; top:0; z-index:15; }
.ls-fullscreen-btn { white-space:nowrap; }
.ls-fullscreen-btn svg { width:15px; height:15px; }
@media (max-width:760px) {
  .ls-wrap { min-height:calc(100dvh - 72px); border-radius:12px; }
  .ls-wrap.ls-fullscreen { display:flex; flex-direction:column; }
  .ls-fullscreen .ls-tree { flex:none; max-height:34dvh; }
  .ls-fullscreen .ls-main { height:auto; min-height:0; flex:1; overflow:auto; }
  .ls-fullscreen .ls-body { min-height:0; }
  .ls-fullscreen .ls-topbar { position:sticky; top:0; }
  .ls-fullscreen .ls-top-right { flex-wrap:wrap; }
}

/* Настоящий fullscreen для всей рабочей вкладки браузера */
.ls-fs-host:fullscreen {
  position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important;
  max-width:none!important; max-height:none!important; margin:0!important; padding:0!important;
  overflow:auto!important; background:var(--bg-2,#f7f8fb)!important;
}
.ls-fs-host:fullscreen .ls-wrap.ls-fullscreen {
  position:relative; inset:auto; width:100%; height:auto; min-height:100dvh;
  grid-template-columns:minmax(270px,19vw) minmax(0,1fr);
}
.ls-fs-host:fullscreen .ls-main { height:auto; min-height:100dvh; overflow:visible; }
.ls-fs-host:fullscreen .ls-editor { min-height:100dvh; }
.ls-fs-host:fullscreen .ls-body { min-height:calc(100dvh - 82px); }
.ls-fs-host:fullscreen .ls-section { max-width:none; width:100%; padding-inline:clamp(28px,4vw,72px); }
.ls-fs-host:fullscreen .ls-topbar { flex-wrap:wrap; }
.ls-fs-host:fullscreen .ls-top-left { flex:1 1 360px; }
.ls-fs-host:fullscreen .ls-title-inp { width:100%; max-width:none; }
.ls-fs-host:fullscreen .ls-top-right { flex-wrap:wrap; }
.ls-topbar { flex-wrap:wrap; }
.ls-top-left { flex:1 1 300px; }
.ls-title-inp { width:100%; max-width:640px; }
.ls-top-right { flex-wrap:wrap; }
@media (max-width:760px) {
  .ls-fs-host:fullscreen .ls-wrap.ls-fullscreen { display:flex; flex-direction:column; }
  .ls-fs-host:fullscreen .ls-tree { max-height:30dvh; }
}

/* Keep the lesson studio fluid even inside the site's centered dashboard column */
@media (min-width:761px) {
  .ls-wrap:not(.ls-fullscreen) {
    position:relative; left:50%; transform:translateX(-50%);
    width:calc(100vw - 48px); max-width:none;
    grid-template-columns:minmax(280px,20vw) minmax(0,1fr);
  }
}
@media (max-width:760px) {
  .ls-wrap:not(.ls-fullscreen) {
    position:relative; left:50%; transform:translateX(-50%);
    width:calc(100vw - 20px); max-width:none;
  }
}

/* Lesson Studio: readable, task-oriented workspace refresh */
.ls-wrap {
  --ls-accent:#e83e73;
  --ls-accent-soft:rgba(232,62,115,.09);
  --ls-line:#e2e7ef;
  --ls-ink:#18202c;
  font-size:14px;
  min-height:calc(100dvh - 300px);
  border-radius:16px;
  box-shadow:0 10px 36px rgba(18,28,45,.06);
}
@media (min-width:1281px) {
  .ls-wrap:not(.ls-fullscreen) { grid-template-columns:minmax(290px,330px) minmax(0,1fr); }
}
.ls-tree { background:#fff; }
.ls-tree-head { padding:18px 18px 13px; }
.ls-tree-title { font-size:16px; }
.ls-tree-search { min-height:44px; }
.ls-search-inp { font-size:13px; }
.ls-course-head { min-height:62px; padding:10px 11px; }
.ls-course-txt b { font-size:13px; }
.ls-course-txt small { font-size:11px; }
.ls-pill { font-size:10px; }
.ls-lesson { min-height:50px; }
.ls-lesson-btn { gap:8px; padding:7px 6px; }
.ls-lesson-txt b { font-size:12px; }
.ls-lesson-txt small { font-size:10px; }
.ls-add-lesson { min-height:40px; font-size:12px; }
.ls-topbar {
  min-height:96px; padding:18px clamp(22px,2.5vw,42px);
  gap:20px; align-items:center;
}
.ls-top-left { flex:1 1 420px; gap:7px; }
.ls-top-sub { font-size:11px; letter-spacing:.03em; }
.ls-title-inp { max-width:900px; font-size:clamp(22px,1.6vw,30px); }
.ls-top-meta { gap:14px; font-size:12px; }
.ls-top-meta svg { width:15px; height:15px; }
.ls-top-right { flex:0 1 auto; gap:9px; }
.ls-save-state { min-width:110px; font-size:12px; }
.ls-wrap .btn { min-height:42px; padding:10px 15px; font-size:12px; }
.ls-body { display:flex; flex-direction:column; align-items:stretch; }
.ls-nav {
  position:sticky; top:96px; z-index:11; display:flex; flex-direction:row;
  overflow-x:auto; gap:6px; padding:12px clamp(16px,2vw,32px);
  border-bottom:1px solid var(--ls-line); background:rgba(255,255,255,.97);
  scrollbar-width:thin;
}
.ls-nav-item {
  width:auto; min-height:46px; flex:0 0 auto; gap:9px; padding:0 13px;
  white-space:nowrap; font-size:13px; border:1px solid transparent;
}
.ls-nav-item.active { border-color:rgba(232,62,115,.12); }
.ls-nav-name { line-height:1; }
.ls-nav-count { min-width:22px; height:22px; font-size:11px; }
.ls-nav-state { font-size:10px; font-style:normal; font-weight:700; }
.ls-nav-state.done { color:#188665; }
.ls-nav-state.todo { color:#8a94a5; }
.ls-section {
  width:100%; max-width:1500px; margin:0 auto;
  padding:30px clamp(22px,3vw,52px) 64px;
}
.ls-sec-head { margin-bottom:22px; }
.ls-sec-head h3 { font-size:clamp(23px,1.8vw,30px); letter-spacing:-.035em; }
.ls-sec-head p { max-width:760px; margin-top:7px; font-size:14px; line-height:1.6; }
.ls-card { margin-bottom:18px; border-radius:16px; }
.ls-card-head { min-height:58px; padding:15px 20px; }
.ls-card-head h4 { font-size:15px; }
.ls-card-body { padding:20px; }
.ls-field { gap:8px; margin-bottom:18px; font-size:13px; }
.ls-field .muted,.ls-field small { font-size:12px; }
.ls-wrap .input,.ls-wrap .textarea,.ls-wrap .select { padding:12px 14px; font-size:14px; }
.ls-check { padding:14px 16px; }
.ls-check b { font-size:13px; }
.ls-check small { font-size:12px; }
.ls-hint { font-size:12px; }
.ls-overview { gap:12px; margin-bottom:22px; }
.ls-ov-row { gap:13px; min-height:76px; padding:14px 16px; border-radius:14px; }
.ls-ov-step { display:grid; place-items:center; width:27px; height:27px; flex:none; border:1px solid #dfe5ee; border-radius:50%; color:#718096; background:#fff; font-size:12px; font-weight:800; }
.ls-ov-row.ready .ls-ov-step { border-color:#c4e9dc; color:#168563; background:#edfaf5; }
.ls-ov-ic { width:40px; height:40px; border-radius:12px; }
.ls-ov-txt { gap:5px; }
.ls-ov-txt b { font-size:14px; }
.ls-ov-txt small { font-size:12px; }
.ls-ov-action { color:var(--ls-accent); flex:none; font-size:12px; font-weight:750; }
.ls-ov-row.ready .ls-ov-action { color:#168563; }
.ls-progress-card { display:flex; align-items:center; gap:24px; margin:0 0 14px; padding:16px 18px; border:1px solid var(--ls-line); border-radius:14px; background:#fff; }
.ls-progress-copy { display:flex; min-width:210px; flex-direction:column; gap:4px; }
.ls-progress-copy b { font-size:13px; }
.ls-progress-copy span { color:var(--muted); font-size:12px; }
.ls-progress-track { height:8px; flex:1; overflow:hidden; border-radius:10px; background:#edf0f5; }
.ls-progress-track i { display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#e83e73,#ff9b53); transition:width .25s ease; }
.ls-placeholder { min-height:520px; padding:48px 24px; }
.ls-placeholder h3 { font-size:26px; }
.ls-placeholder p { max-width:560px; font-size:14px; line-height:1.7; }
.ls-placeholder .btn { margin-top:4px; }
.ls-wrap button:focus-visible,.ls-wrap a:focus-visible,.ls-wrap input:focus-visible,.ls-wrap textarea:focus-visible,.ls-wrap select:focus-visible { outline:3px solid rgba(232,62,115,.32); outline-offset:2px; }
@media (max-width:1280px) {
  .ls-nav { top:96px; }
  .ls-section { max-width:1200px; }
}
@media (max-width:760px) {
  .ls-wrap { min-height:calc(100dvh - 120px); }
  .ls-tree { max-height:280px; }
  .ls-topbar { min-height:0; padding:16px; }
  .ls-top-left { flex:1 1 100%; }
  .ls-title-inp { font-size:23px; }
  .ls-top-right { width:100%; gap:7px; }
  .ls-save-state { min-width:0; flex:1 1 100%; text-align:left; }
  .ls-top-right .btn { padding:9px 10px; font-size:11px; }
  .ls-nav { top:0; padding:9px 10px; }
  .ls-nav-item { min-height:42px; padding:0 11px; font-size:12px; }
  .ls-nav-state { display:none; }
  .ls-section { max-width:none; padding:22px 15px 42px; }
  .ls-sec-head h3 { font-size:23px; }
  .ls-sec-head p { font-size:13px; }
  .ls-overview { grid-template-columns:1fr; }
  .ls-ov-row { min-height:68px; padding:11px; }
  .ls-progress-card { align-items:stretch; flex-direction:column; gap:10px; }
  .ls-progress-copy { min-width:0; }
  .ls-progress-track { flex:none; }
  .ls-card-body { padding:15px; }
}

/* Larger question controls and a clear next step for long forms */
.ls-q-head { min-height:72px; padding:8px 13px; }
.ls-q-toggle { gap:12px; padding:8px 5px; }
.ls-q-num { width:32px; height:32px; font-size:12px; }
.ls-q-tt { width:34px; height:34px; }
.ls-q-tt svg { width:17px; height:17px; }
.ls-q-summary { gap:5px; }
.ls-q-summary b { font-size:13px; }
.ls-q-summary small { font-size:11px; }
.ls-q-acts { gap:5px; }
.ls-q-acts .ls-icon-btn { width:34px; height:34px; }
.ls-q-body { padding:20px; }
.ls-qf-grid { grid-template-columns:minmax(0,1fr) 220px; gap:24px; }
.ls-qf-type { gap:8px; font-size:12px; }
.ls-qf-type small { font-size:11px; }
.ls-type-grid { gap:10px; }
.ls-type-btn { min-height:62px; padding:11px; }
.ls-type-btn b { font-size:11px; }
.ls-type-btn small { font-size:10px; }
.ls-q-img-add { padding:10px 12px; font-size:12px; }
.ls-section-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--ls-line); }
.ls-section-nav .btn { min-width:150px; }
@media (max-width:760px) {
  .ls-q-body { padding:15px; }
  .ls-qf-grid { grid-template-columns:1fr; gap:15px; }
  .ls-section-nav { align-items:stretch; flex-direction:column; }
  .ls-section-nav .btn { width:100%; }
}
.ls-top-sub { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ls-nav-arrow { font-size:18px; line-height:1; }
.ls-progress-track { cursor:default; }

/* Preview is portaled to body so it cannot be clipped by dashboard transforms */
.ls-preview-portal { position:fixed; inset:0; z-index:100000; display:flex; min-width:0; min-height:0; background:#f3f5f9; }
.ls-preview-portal .ls-preview { position:relative; inset:auto; z-index:auto; width:100%; height:100%; min-width:0; min-height:0; flex:1; }
.ls-preview-portal .ls-preview-body { min-height:0; flex:1; width:100%; overflow:auto; }


/* Lesson builder canvas refresh */
#studio-root { width:100% !important; max-width:none !important; margin:0 !important; }
#studio-root .prepka-studio-root { min-height:calc(100dvh - 92px); border-radius:0; border-left:0; border-right:0; box-shadow:none; }
#studio-root .ls-wrap { width:100%; min-height:calc(100dvh - 92px); border-radius:0; grid-template-columns:clamp(240px, 19vw, 320px) minmax(0,1fr); }
#studio-root .ls-main { min-width:0; }
#studio-root .ls-canvas-editor { min-height:calc(100dvh - 92px); background:#f6f7fb; }
#studio-root .ls-canvas { width:100%; max-width:none; margin:0; padding:clamp(24px,3vw,56px) clamp(24px,5vw,96px) 80px; }
#studio-root .ls-canvas-head { max-width:1180px; margin:0 auto 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
#studio-root .ls-canvas-eyebrow { color:#8b93a7; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
#studio-root .ls-canvas-head h2 { margin:6px 0 3px; color:#1e2433; font-size:28px; letter-spacing:-.04em; }
#studio-root .ls-canvas-head p { margin:0; color:#7b8497; font-size:14px; }
#studio-root .ls-title-block, #studio-root .ls-block-list, #studio-root .ls-canvas-add { max-width:1180px; margin-left:auto; margin-right:auto; }
#studio-root .ls-title-block { padding:22px 24px; margin-bottom:18px; background:#fff; border:1px solid #e6e9f0; border-radius:18px; box-shadow:0 8px 28px rgba(36,43,67,.05); }
#studio-root .ls-title-block > label { display:block; margin-bottom:8px; color:#8991a4; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
#studio-root .ls-title-block .ls-title-inp { width:100%; padding:0; border:0; outline:0; background:none; color:#202638; font-size:26px; font-weight:800; letter-spacing:-.035em; }
#studio-root .ls-title-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:15px; color:#8b93a7; font-size:12px; }
#studio-root .ls-title-meta input[type=number] { width:92px; padding:7px 9px; border:1px solid #e3e7ef; border-radius:8px; color:#3f475a; }
#studio-root .ls-free-toggle { display:flex; align-items:center; gap:7px; margin-left:16px; color:#596174; }
#studio-root .ls-block-list { display:grid; gap:14px; }
#studio-root .ls-block { overflow:hidden; background:#fff; border:1px solid #e1e5ee; border-radius:16px; box-shadow:0 6px 20px rgba(28,37,62,.04); transition:border-color .15s,box-shadow .15s; }
#studio-root .ls-block:focus-within { border-color:#b5bdf2; box-shadow:0 8px 26px rgba(82,93,180,.12); }
#studio-root .ls-block-head { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; background:#fafbfe; border-bottom:1px solid #edf0f5; color:#4c5569; font-size:13px; }
#studio-root .ls-block-head button { width:28px; height:28px; padding:0; border:0; border-radius:7px; background:transparent; color:#9aa2b3; cursor:pointer; }
#studio-root .ls-block-head button:hover { background:#edf0f6; color:#515a70; }
#studio-root .ls-block-head button.danger:hover { color:#d15a67; background:#fff0f2; }
#studio-root .ls-block-grip { color:#aab1c0; font-size:20px; line-height:1; cursor:grab; user-select:none; }
#studio-root .ls-block-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#eef0ff; color:#6572d4; }
#studio-root .ls-block-icon svg { width:15px; height:15px; }
#studio-root .ls-block-index { color:#a1a9b9; font-size:11px; }
#studio-root .ls-block-body { padding:20px 24px 24px; display:grid; gap:11px; }
#studio-root .ls-block-body label { color:#7c8598; font-size:12px; font-weight:750; }
#studio-root .ls-block-body input:not([type=checkbox]), #studio-root .ls-block-body textarea, #studio-root .ls-block-body select { width:100%; min-height:42px; box-sizing:border-box; padding:10px 12px; border:1px solid #dfe4ed; border-radius:9px; background:#fff; color:#30384b; font:inherit; font-size:14px; outline:0; }
#studio-root .ls-block-body textarea { min-height:90px; resize:vertical; line-height:1.55; }
#studio-root .ls-block-body input:focus, #studio-root .ls-block-body textarea:focus, #studio-root .ls-block-body select:focus { border-color:#8d98e5; box-shadow:0 0 0 3px rgba(101,114,212,.12); }
#studio-root .ls-block-title { font-weight:750; }
#studio-root .ls-rich { min-height:100px; padding:14px 15px; border:1px solid #dfe4ed; border-radius:10px; color:#30384b; font-size:15px; line-height:1.7; outline:0; }
#studio-root .ls-rich:empty:before { content:attr(data-placeholder); color:#b1b8c6; pointer-events:none; }
#studio-root .ls-rich:focus { border-color:#8d98e5; box-shadow:0 0 0 3px rgba(101,114,212,.12); }
#studio-root .ls-callout-tools { display:grid; grid-template-columns:190px minmax(0,1fr); gap:10px; }
#studio-root .ls-block[data-block-card^="legacy-rule"] .ls-block-body, #studio-root .ls-block .ls-callout-tools + .ls-rich { background:#fffaf0; }
#studio-root .ls-block-image { max-width:min(100%,720px); max-height:420px; object-fit:contain; border-radius:10px; background:#f5f6fa; }
#studio-root .ls-block-body small { color:#9aa2b2; font-size:12px; }
#studio-root .ls-quiz-head { display:flex; align-items:center; gap:12px; }
#studio-root .ls-quiz-head span { color:#9aa2b2; font-size:12px; }
#studio-root .ls-material-chips { display:flex; flex-wrap:wrap; gap:8px; }
#studio-root .ls-material-chips span { padding:8px 11px; border-radius:8px; background:#f1f3f8; color:#596174; font-size:12px; }
#studio-root .ls-canvas-add { display:flex; align-items:center; justify-content:center; width:100%; min-height:58px; margin-top:16px; border:1px dashed #bdc5da; border-radius:14px; background:transparent; color:#77819a; font:inherit; font-weight:750; cursor:pointer; }
#studio-root .ls-canvas-add:hover { border-color:#7f8cdd; background:#f2f3ff; color:#5e6bc9; }
.ls-context-menu { position:fixed; z-index:1000; width:245px; padding:10px; border:1px solid #e1e5ee; border-radius:13px; background:#fff; box-shadow:0 18px 50px rgba(28,37,62,.2); }
.ls-context-menu[hidden] { display:none; }
.ls-context-menu b { display:block; padding:7px 9px 9px; color:#8d95a6; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.ls-context-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 9px; border:0; border-radius:8px; background:none; color:#3e4659; text-align:left; font:inherit; font-size:13px; cursor:pointer; }
.ls-context-menu button:hover { background:#f1f3ff; color:#5968cb; }
.ls-context-menu button svg { width:16px; height:16px; color:#6c78d2; }
#studio-root .ls-topbar { position:sticky; top:0; z-index:20; }
@media (max-width:900px) { #studio-root .ls-wrap { display:flex; flex-direction:column; } #studio-root .ls-tree { max-height:250px; border-right:0; border-bottom:1px solid var(--ls-line); } #studio-root .ls-canvas { padding:22px 16px 60px; } #studio-root .ls-canvas-head { flex-direction:column; } #studio-root .ls-callout-tools { grid-template-columns:1fr; } }
@media (max-width:600px) { #studio-root .ls-title-block .ls-title-inp { font-size:21px; } #studio-root .ls-block-body { padding:16px; } #studio-root .ls-topbar .ls-top-right { flex-wrap:wrap; } }


/* Student screen builder: preview first, editing controls appear on the selected block */
#studio-root .ls-canvas-editor { min-height:calc(100dvh - 84px); background:#f4f5f8; }
#studio-root .ls-student-view { padding:22px clamp(14px,2.2vw,36px) 60px; color:#273043; }
#studio-root .ls-student-crumb { display:flex; align-items:center; gap:8px; margin:0 0 18px; color:#8790a2; font-size:12px; }
#studio-root .ls-student-crumb svg { width:15px; }
#studio-root .ls-student-crumb i { font-style:normal; color:#c4c9d2; }
#studio-root .ls-student-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(245px,24%); gap:22px; align-items:start; }
#studio-root .ls-student-main { min-width:0; }
#studio-root .ls-student-lesson-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
#studio-root .ls-student-kicker { color:#818aa0; font-size:12px; }
#studio-root .ls-student-lesson-head h1 { margin:5px 0 0; color:#222b3d; font-size:clamp(24px,2vw,34px); line-height:1.16; letter-spacing:-.035em; }
#studio-root .ls-student-teacher { display:flex; align-items:center; gap:9px; flex:none; }
#studio-root .ls-student-teacher>span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffeadc; color:#ed7b34; font-weight:800; }
#studio-root .ls-student-teacher b,#studio-root .ls-student-teacher small { display:block; }
#studio-root .ls-student-teacher b { font-size:12px; } #studio-root .ls-student-teacher small { margin-top:3px; color:#9098a7; font-size:10px; }
#studio-root .ls-student-video { position:relative; display:grid; place-items:center; min-height:clamp(250px,38vw,500px); overflow:hidden; border-radius:16px; background:#171c29; }
#studio-root .ls-student-video iframe,#studio-root .ls-student-video video { width:100%; height:100%; min-height:inherit; border:0; object-fit:contain; }
#studio-root .ls-video-empty { display:grid; justify-items:center; gap:8px; color:#fff; }
#studio-root .ls-video-empty>span { color:#adb6d1; } #studio-root .ls-video-empty svg { width:34px;height:34px; }
#studio-root .ls-video-empty small { color:#aab1c2; }
#studio-root .ls-student-stage { position:relative; min-height:1040px; margin-top:18px; overflow:visible; border-radius:14px; background:#fff; box-shadow:0 2px 12px rgba(30,43,67,.035); }
#studio-root .ls-stage-guide { position:absolute; top:10px; left:14px; color:#c1c6d0; font-size:10px; pointer-events:none; }
#studio-root .ls-student-block { position:absolute; top:var(--by); left:var(--bx); width:min(var(--bw),calc(100% - var(--bx))); min-width:260px; box-sizing:border-box; border:1px solid transparent; border-radius:13px; background:#fff; }
#studio-root .ls-student-block:hover { border-color:#e2e6ee; box-shadow:0 8px 24px rgba(36,47,72,.08); z-index:5; }
#studio-root .ls-student-block-tools { position:relative; z-index:8; inset:auto; display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:29px; padding:6px 8px; border:0; border-bottom:1px solid #edf0f5; border-radius:12px 12px 0 0; background:#fbfcfe; color:#8791a3; font-size:10px; opacity:0; transition:opacity .12s; overflow:visible; pointer-events:auto; }
#studio-root .ls-student-block:hover .ls-student-block-tools,#studio-root .ls-student-block:focus-within .ls-student-block-tools { opacity:1; }
#studio-root .ls-student-block-tools svg { width:13px;height:13px; }
#studio-root .ls-student-block-tools button { width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;color:#858ea0;cursor:pointer; }
#studio-root .ls-student-block-tools button:hover { background:#eef1f7; }
#studio-root .ls-student-grip { color:#818ba0;font-size:18px;cursor:move;touch-action:none; }
#studio-root .ls-pos-tools { display:flex;align-items:center;gap:3px;color:#9aa2b1; }
#studio-root .ls-pos-tools input { width:50px;height:21px;padding:2px 4px;border:1px solid #e1e5ed;border-radius:4px;font-size:10px; }
#studio-root .ls-student-block-body { padding:16px; border-radius:12px; color:#30394c; font-size:15px; line-height:1.65; }
#studio-root .ls-video-editor-wrap { position:relative; }

#studio-root .ls-student-block-body h2 { margin:0 0 10px;font-size:20px;line-height:1.3; }
#studio-root .ls-student-rich { min-height:34px;outline:0; }
#studio-root .ls-student-rich:empty:before { content:attr(data-placeholder);color:#c0c5cf; }
#studio-root .ls-editor-notes-group { display:grid; gap:10px; }
#studio-root .ls-editor-note-row { display:flex; align-items:flex-start; gap:10px; color:#30394c; line-height:1.55; }
#studio-root .ls-editor-note-row>b { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:7px; background:linear-gradient(135deg,#ff5d78,#ffb735); color:#fff; font-size:12px; }
#studio-root .ls-editor-note-row>div { min-width:0; flex:1; outline:0; }
#studio-root .ls-editor-note-row>button,
#studio-root .ls-editor-note-rule-head>button { flex:none; width:24px; height:24px; border:0; border-radius:7px; background:transparent; color:#a6adba; cursor:pointer; opacity:0; transition:opacity .15s,background .15s; }
#studio-root .ls-editor-note-row:hover>button,
#studio-root .ls-editor-note-rule:hover .ls-editor-note-rule-head>button,
#studio-root .ls-editor-note-row>button:focus,
#studio-root .ls-editor-note-rule-head>button:focus { opacity:1; }
#studio-root .ls-editor-note-row>button:hover,
#studio-root .ls-editor-note-rule-head>button:hover { background:#eef1f7; color:#e35b70; }
#studio-root .ls-editor-note-row>button svg,
#studio-root .ls-editor-note-rule-head>button svg { width:14px; height:14px; }
#studio-root .ls-editor-note-rule-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#studio-root .ls-editor-note-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
#studio-root .ls-editor-note-actions button { border:1px solid #e2e6ee; border-radius:8px; padding:7px 10px; background:#fff; color:#68738a; font-size:12px; cursor:pointer; }
#studio-root .ls-editor-note-actions button:hover { border-color:#aab7d4; color:#405487; background:#f7f9ff; }
#studio-root .ls-editor-note-row [data-placeholder]:empty:before { content:attr(data-placeholder); color:#b8bfcb; }
#studio-root .ls-editor-note-rule { margin-top:4px; padding:15px 17px; border-radius:12px; background:#c8f52d; color:#202a12; }
#studio-root .ls-editor-note-rule small { display:block; margin-bottom:5px; color:#617d27; font-size:11px; font-weight:750; }
#studio-root .ls-editor-note-rule p { margin:0; outline:0; font-size:15px; font-weight:800; line-height:1.45; }
#studio-root .ls-student-callout { padding:17px 19px;border-left: 1px solid #edaa37;border-radius:8px;background:#fff8e9; }
#studio-root .ls-student-callout.remember { border-color:#6286e8;background:#eef3ff; }
#studio-root .ls-student-callout.attention { border-color:#ed6c65;background:#fff0ee; }
#studio-root .ls-student-callout.definition { border-color:#47a989;background:#edfaf5; }
#studio-root .ls-student-callout small { font-weight:800;color:#7b5a20; }
#studio-root .ls-student-callout p { margin:6px 0 0;outline:0; }
#studio-root .ls-callout-kind { width:auto;padding:6px 8px;border:1px solid #e3e7ef;border-radius:7px;color:#70798b;font-size:11px; }
#studio-root .ls-student-formula { padding:25px;text-align:center;border-radius:12px;background:#f6f7fb;font:600 24px Georgia,serif; }
#studio-root .ls-student-block figure { margin:0; } #studio-root .ls-student-block figure img { display:block;max-width:100%;max-height:520px;margin:auto;border-radius:12px;object-fit:contain; }
#studio-root .ls-image-replace { display:flex; justify-content:center; margin-top:8px; color:#7b86c9; font-size:11px; cursor:pointer; }
#studio-root .ls-image-replace input { display:none; }
#studio-root .ls-student-upload { display:flex;align-items:center;justify-content:center;gap:8px;min-height:100px;border:1px dashed #cbd1dd;border-radius:12px;color:#8992a4;cursor:pointer; }
#studio-root .ls-student-upload input { max-width:190px; }
#studio-root .ls-student-link input,#studio-root .ls-student-block textarea,#studio-root .ls-student-block select,#studio-root .ls-student-block input:not([type=file]) { padding:9px 10px;border:1px solid #e0e4ec;border-radius:8px;color:#394256;font:inherit;font-size:13px; }
#studio-root .ls-student-material { display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #eff1f5;font-size:13px; }
#studio-root .ls-student-material>span { color:#7785d8; } #studio-root .ls-student-material small { margin-left:auto;color:#99a1b0; }
#studio-root .ls-student-options { display:grid;gap:8px; }
#studio-root .ls-student-options div { padding:10px 13px;border:1px solid #e5e8ef;border-radius:9px;color:#697286; }
#studio-root .ls-question-edit { display:grid;grid-template-columns:auto 90px;align-items:center;gap:8px;margin-top:14px;padding:12px;border-radius:9px;background:#f7f8fb;color:#798295;font-size:11px; }
#studio-root .ls-question-edit textarea,#studio-root .ls-question-edit label { grid-column:1/-1; }
#studio-root .ls-question-edit input[type=number] { width:75px; }
#studio-root .ls-student-sidecard { margin-bottom:14px;padding:17px;border:1px solid #e7eaf0;border-radius:13px;background:#fff; }
#studio-root .ls-student-sidecard h3 { display:flex;align-items:center;gap:8px;margin:0 0 9px;color:#343d50;font-size:14px; }
#studio-root .ls-student-sidecard h3 svg { width:16px;height:16px;color:#7885d9; }
#studio-root .ls-student-sidecard>small { color:#929aaa;font-size:11px; }
#studio-root .ls-student-course-row { display:flex;align-items:flex-start;gap:9px;padding:10px 4px;border-bottom:1px solid #f0f1f4;color:#697386;font-size:12px;line-height:1.4; }
#studio-root .ls-student-course-row i { display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:50%;background:#f0f2f7;color:#8992a5;font-size:10px;font-style:normal; }
#studio-root .ls-student-course-row.current { color:#5865c5;font-weight:750; } #studio-root .ls-student-course-row.current i { background:#e9ebff;color:#5967cb; }
#studio-root .ls-student-timestamp { display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f0f1f4;font-size:11px;line-height:1.4; }
#studio-root .ls-student-timestamp code { flex:none;color:#7a86d7; }
#studio-root .ls-edit-hint { display:grid;gap:5px;background:#f7f8fc;color:#8590a3;font-size:11px;line-height:1.5; }
#studio-root .ls-edit-hint b { color:#68738a; }
#studio-root .ls-student-bottom { display:flex;justify-content:space-between;margin:20px 0 0; }
@media(max-width:900px){#studio-root .ls-student-layout{grid-template-columns:1fr}#studio-root .ls-student-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#studio-root .ls-student-sidecard{margin:0}}
@media(max-width:600px){#studio-root .ls-student-lesson-head{align-items:flex-start;flex-direction:column}#studio-root .ls-student-teacher{display:none}#studio-root .ls-student-aside{grid-template-columns:1fr}#studio-root .ls-pos-tools input{width:38px}}

.lesson-content-blocks { margin:16px 0; overflow:visible; }
.lesson-canvas-block { position:absolute; box-sizing:border-box; padding:16px; border:1px solid #eceef3; border-radius:13px; background:#fff; box-shadow:0 2px 12px rgba(30,43,67,.04); }
.lesson-canvas-block h3 { margin:0 0 8px; }
.lesson-canvas-block .lesson-callout { margin:0; }
.lesson-canvas-block .lesson-formula { padding:20px; text-align:center; border-radius:10px; background:#f5f6fa; }
.lesson-canvas-block .lesson-formula pre { margin:0; white-space:pre-wrap; font-size:20px; }
.lesson-canvas-block .lesson-image { margin:0; }
.lesson-canvas-block .lesson-image img { display:block; max-width:100%; max-height:540px; margin:auto; object-fit:contain; border-radius:10px; }
@media(max-width:760px){.lesson-content-blocks{min-height:0!important}.lesson-canvas-block{position:absolute}}

.lesson-canvas-video .player { width:100%; margin:0; }
.lesson-canvas-video .player .screen { aspect-ratio:16/9; }

/* Public lesson pages keep the polished course layout; the free canvas is editor-only. */
.lesson-flow { display:grid; gap:16px; }
.lesson-flow-block { box-sizing:border-box; width:100%; }
.lesson-flow-text { padding:20px; border:1px solid #e7eaf0; border-radius:14px; background:#fff; }
.lesson-flow-block.tile { margin:0; }
.lesson-flow .player { width:100%; margin:0; }
.lesson-flow .player .screen { aspect-ratio:16/9; }
.lesson-flow .lesson-head { margin-bottom:0; }
.lesson-flow-notes { padding:20px; }
.lesson-flow-notes h3 { margin:0 0 14px; }
.lesson-flow-note { display:flex; align-items:flex-start; gap:10px; margin:9px 0; line-height:1.5; }
.lesson-flow-note>b { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:7px; background:linear-gradient(135deg,#ff5d78,#ffb735); color:#fff; font-size:12px; }
.lesson-flow-notes .lesson-callout { margin-top:14px; }


/* Full viewport teacher studio */
.teacher-cabinet-wrap { width:100% !important; max-width:none !important; margin:0 !important; padding-left:clamp(12px,2vw,32px) !important; padding-right:clamp(12px,2vw,32px) !important; }
.teacher-cabinet-wrap #panel-studio { width:calc(100vw - 24px) !important; margin-left:calc(50% - 50vw + 12px) !important; }
.teacher-cabinet-wrap #studio-root { width:100% !important; }
.teacher-cabinet-wrap #studio-root .prepka-studio-root { width:100% !important; }
.ls-context-menu { position:fixed !important; z-index:2147483647 !important; max-height:calc(100vh - 24px); overflow:auto; }


/* The student lesson is the entire editing surface */
.teacher-cabinet-wrap { width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:0!important; padding:0!important; }
.teacher-cabinet-wrap > .teacher-hero-card,.teacher-cabinet-wrap > .cabinet-nav-tabs { margin-left:24px; margin-right:24px; }
.teacher-cabinet-wrap #panel-studio { width:100vw!important; margin:0!important; }
.teacher-cabinet-wrap #studio-root { width:100vw!important; }
.teacher-cabinet-wrap #studio-root .prepka-studio-root { min-height:100vh!important; border-radius:0!important; border:0!important; }
#studio-root .ls-wrap { grid-template-columns:clamp(240px,18vw,320px) minmax(0,1fr)!important; min-height:calc(100vh - 80px)!important; border-radius:0!important; }
#studio-root .ls-main { min-width:0; overflow:visible!important; }
#studio-root .ls-canvas-editor { min-height:calc(100vh - 80px)!important; }
#studio-root .ls-canvas { min-height:calc(100vh - 80px); padding:14px clamp(14px,2vw,34px) 80px!important; }
#studio-root .ls-student-crumb strong { margin-left:auto; color:#a3aaba; font-size:11px; font-weight:600; }
#studio-root .ls-student-stage { width:100%; overflow:visible!important; border:1px solid #e8ebf1; background:#f8f9fb; }
#studio-root .ls-student-block { background:#fff; }
#studio-root .ls-student-block-tools { opacity:0; pointer-events:none; }
#studio-root .ls-student-block:hover .ls-student-block-tools,#studio-root .ls-student-block:focus-within .ls-student-block-tools { opacity:1; pointer-events:auto; }
#studio-root .ls-student-teacher { display:flex; align-items:center; gap:10px; }
#studio-root .ls-student-timestamp { display:grid; grid-template-columns:70px minmax(0,1fr); gap:7px; }
#studio-root .ls-student-timestamp input { width:100%; box-sizing:border-box; padding:8px; border:1px solid #e3e7ee; border-radius:7px; font-size:12px; }
#studio-root .ls-student-course-row { display:flex; gap:8px; padding:7px 0; border-bottom:1px solid #f0f1f4; font-size:12px; }
#studio-root .ls-student-course-row i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#f0f2f7; font-style:normal; font-size:10px; }
#studio-root .ls-student-course-row.current { color:#5966c8; font-weight:700; }

.ls-context-menu { position:fixed!important; z-index:2147483647!important; max-height:calc(100vh - 24px); overflow:auto; }
.teacher-cabinet-wrap { width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:0!important; padding:0!important; }
.teacher-cabinet-wrap > .teacher-hero-card,.teacher-cabinet-wrap > .cabinet-nav-tabs { margin-left:24px; margin-right:24px; }
.teacher-cabinet-wrap #panel-studio { width:100vw!important; margin:0!important; }
.teacher-cabinet-wrap #studio-root { width:100vw!important; }
.teacher-cabinet-wrap #studio-root .prepka-studio-root { min-height:100vh!important; border-radius:0!important; border:0!important; }
#studio-root .ls-wrap { grid-template-columns:clamp(240px,18vw,320px) minmax(0,1fr)!important; min-height:calc(100vh - 80px)!important; border-radius:0!important; }


/* Visible object boundaries make the student canvas easier to understand and grab. */
#studio-root .ls-student-block { border-color:#e5e8ef; transition:border-color .12s,box-shadow .12s; }
#studio-root .ls-student-block:hover,#studio-root .ls-student-block:focus-within { border-color:#aeb7d4; box-shadow:0 7px 22px rgba(36,47,72,.08); }
#studio-root .ls-student-video { min-height:clamp(230px,32vw,460px); }
#studio-root .ls-student-video .ls-video-empty { text-align:center; }
#studio-root .ls-student-link { display:grid; gap:5px; margin-top:10px; color:#8992a4; font-size:11px; }
#studio-root .ls-student-link input { width:100%; box-sizing:border-box; }


/* Editor resize affordance and matching student block geometry */
#studio-root .ls-student-block { height:var(--bh,auto); min-height:80px; }
#studio-root .ls-student-block-body { height:auto; min-height:0; box-sizing:border-box; overflow:visible; }
#studio-root .ls-resize-handle { position:absolute; right:3px; bottom:3px; width:15px; height:15px; cursor:nwse-resize; opacity:0; border-right:3px solid #7b88d7; border-bottom:3px solid #7b88d7; border-radius:0 0 5px 0; touch-action:none; }
#studio-root .ls-student-block:hover .ls-resize-handle,#studio-root .ls-student-block:focus-within .ls-resize-handle { opacity:1; }
#studio-root .ls-pos-tools input[data-pos="height"] { width:50px; }
#studio-root .ls-student-stage { width:min(1240px,100%); min-height:1200px; margin-inline:auto; }
#studio-root .ls-snap-guide { position:absolute; z-index:4; pointer-events:none; background:#6575d6; opacity:.8; }
#studio-root .ls-snap-guide-x { top:0; bottom:0; width:1px; }
#studio-root .ls-snap-guide-y { left:0; right:0; height:1px; }
.lesson-grid-blocks { grid-template-columns:minmax(0,1fr)!important; }
.lesson-grid-blocks .lesson-full-canvas { grid-column:1/-1; min-width:0; }
.lesson-grid-blocks .lesson-canvas-block { height:auto; min-height:80px; overflow:auto; }
.lesson-grid-blocks .lesson-canvas-block[style*="height:"] { box-sizing:border-box; }
.lesson-grid-blocks .lesson-canvas-block h1 { margin:4px 0 10px; font-size:clamp(24px,3vw,36px); }
.lesson-grid-blocks .lesson-canvas-block h3 { margin:0 0 8px; }
.lesson-grid-blocks .lesson-canvas-block .lesson-preview-kicker { color:var(--muted); font-size:12px; }
.lesson-grid-blocks .lesson-canvas-block .lesson-preview-teacher { display:flex; align-items:center; gap:10px; }
.lesson-grid-blocks .lesson-canvas-block .lesson-preview-teacher .ava { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffeadc; color:#ed7b34; font-weight:800; }
.lesson-grid-blocks .lesson-canvas-block .lesson-preview-course-row { text-decoration:none; color:inherit; }
@media(max-width:760px){#studio-root .ls-student-stage{width:100%}.lesson-grid-blocks .lesson-content-blocks{min-height:0!important}.lesson-grid-blocks .lesson-canvas-block{position:absolute!important}}

#studio-root .ls-video-source{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:6px;color:#8992a4;font-size:10px}#studio-root .ls-video-source input{width:170px;padding:6px 8px;border:1px solid #dfe4ee;border-radius:7px;font:inherit;font-size:11px}#studio-root .ls-video-upload{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border:1px solid #dfe4ee;border-radius:7px;background:#fff;color:#69758d;cursor:pointer;white-space:nowrap}#studio-root .ls-video-upload input{display:none}

#studio-root .ls-student-block-tools > *{pointer-events:auto}
#studio-root .ls-timestamp-list{display:grid;gap:8px}#studio-root .ls-timestamp-edit-row{display:grid;grid-template-columns:76px minmax(0,1fr) 28px;align-items:center;gap:7px}#studio-root .ls-timestamp-edit-row input{width:100%;min-width:0;box-sizing:border-box}#studio-root .ls-timestamp-edit-row button{width:28px;height:30px;border:0;border-radius:6px;background:#fff1f1;color:#c76b6b;cursor:pointer}#studio-root .ls-timestamp-add{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border:1px dashed #cbd2e1;border-radius:8px;background:#fff;color:#737fae;cursor:pointer}

/* Consistent editing chrome for every block and compact snapping between blocks. */
#studio-root .ls-student-block-tools { opacity:1; pointer-events:auto; }
#studio-root .ls-editor-note-formula { padding:15px 17px; border-radius:12px; background:#f4efff; color:#44336f; }
#studio-root .ls-editor-note-formula small { display:block; margin-bottom:6px; color:#7656b7; font-size:11px; font-weight:800; }
#studio-root .ls-editor-formula-input { min-height:28px; outline:0; font:600 20px Georgia,serif; text-align:center; }
#studio-root .ls-editor-formula-input:empty:before { content:attr(data-placeholder); color:#b7acd1; font:500 13px inherit; }
.lesson-formula-day { margin-top:14px; padding:14px 16px; border-radius:12px; background:#f4efff; color:#44336f; }
.lesson-formula-day small { display:block; margin-bottom:6px; color:#7656b7; font-weight:800; }
.lesson-formula-day pre { margin:0; white-space:pre-wrap; font:600 20px Georgia,serif; text-align:center; }
.lesson-flow-question { padding:16px 18px; }
.lesson-preview-question-meta { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--muted); font-size:10px; }
.lesson-preview-question-meta>b { padding:5px 8px; border-radius:8px; background:var(--surface-2); color:var(--text); font-size:10px; }
.lesson-preview-question-meta>span { color:var(--muted); }
.lesson-flow-question h3 { margin:0 0 12px; font-size:16px; line-height:1.35; }
.lesson-preview-question-body { display:grid; gap:7px; }
.lesson-preview-option { display:flex; align-items:center; gap:8px; min-height:36px; padding:7px 10px; border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:13px; }
.lesson-preview-option>b { display:grid; place-items:center; width:21px; height:21px; flex:none; border-radius:6px; background:var(--surface-2); font-size:10px; }
.lesson-preview-answer { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.lesson-preview-answer>span { width:180px; height:34px; border:1px solid var(--border); border-radius:9px; background:repeating-linear-gradient(90deg,var(--surface),var(--surface) 31px,var(--border) 32px); }
.lesson-preview-match { display:grid; grid-template-columns:1fr 22px 1fr; gap:8px; align-items:center; font-size:12px; }
.lesson-preview-match>span { padding:8px 10px; border:1px solid var(--border); border-radius:9px; }
.lesson-preview-match>i { text-align:center; color:var(--muted); }
.lesson-preview-order { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; font-size:12px; }
.lesson-preview-order>b { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:var(--surface-2); font-size:10px; }
.lesson-preview-long { min-height:70px; padding:10px; border:1px dashed var(--border-2); border-radius:9px; color:var(--muted); font-size:12px; }

/* The editor canvas uses the same student facing cards. Editing controls float
   above the card and do not change its geometry. */
#studio-root .ls-student-block { border:0; border-radius:16px; background:transparent; box-shadow:none; }
#studio-root .ls-student-block:hover,#studio-root .ls-student-block:focus-within { border:0; box-shadow:none; }
#studio-root .ls-student-block-tools { position:absolute; inset:8px 8px auto 8px; z-index:12; min-height:0; padding:4px 6px; border:1px solid rgba(222,226,237,.86); border-radius:10px; background:rgba(255,255,255,.92); box-shadow:0 5px 16px rgba(36,47,72,.08); backdrop-filter:blur(8px); }
#studio-root .ls-student-block-body { position:relative; z-index:1; padding:0; border-radius:16px; }
#studio-root .ls-student-block-body > h1,
#studio-root .ls-student-block-body > h2,
#studio-root .ls-student-block-body > p,
#studio-root .ls-student-block-body > .ls-student-rich { margin-left:20px; margin-right:20px; }
#studio-root .ls-student-block-lessonTitle .ls-student-block-body { padding:24px 20px; border:1px solid #e5e8ef; border-radius:16px; background:#fff; }
#studio-root .ls-student-block-teacher .ls-student-block-body { padding:16px 18px; border:1px solid #e5e8ef; border-radius:16px; background:#fff; }
#studio-root .ls-student-block-video .ls-student-block-body { overflow:hidden; border:1px solid #e5e8ef; border-radius:16px; background:#fff; }
#studio-root .ls-student-block-video .player { margin:0; width:100%; border-radius:16px; overflow:hidden; }
#studio-root .ls-student-block-notesGroup .ls-student-block-body,
#studio-root .ls-student-block-materials .ls-student-block-body,
#studio-root .ls-student-block-timestamp .ls-student-block-body,
#studio-root .ls-student-block-courseOutline .ls-student-block-body,
#studio-root .ls-student-block-homework .ls-student-block-body { padding:20px; border:1px solid #e3e7ef; border-radius:16px; background:#fff; box-shadow:0 5px 18px rgba(36,47,72,.04); }
#studio-root .ls-student-card-title { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:#20283b; font-size:18px; line-height:1.2; }
#studio-root .ls-editor-course-caption { display:block; margin-bottom:10px; color:#9aa2b1; font-size:11px; }
#studio-root .ls-student-block-timestamp .ls-timestamp-list { display:grid; gap:6px; }
#studio-root .ls-editor-timestamp-row { display:grid; grid-template-columns:46px minmax(0,1fr) 26px; align-items:center; gap:8px; padding:7px; border-radius:10px; color:#30394c; font-size:12px; }
#studio-root .ls-editor-timestamp-row.active { background:#fde5f0; }
#studio-root .ls-editor-timestamp-badge { display:block; padding:3px 5px; border-radius:6px; background:#edf0f4; color:#20283b; font:700 11px var(--font-d); }
#studio-root .ls-editor-timestamp-row.active .ls-editor-timestamp-badge { background:#ed4d98; color:#fff; }
#studio-root .ls-editor-timestamp-badge input { width:100%; padding:0; border:0; outline:0; background:transparent; color:inherit; font:inherit; }
#studio-root .ls-editor-timestamp-title { min-width:0; outline:0; }
#studio-root .ls-editor-timestamp-row > button { width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:#bd879f; cursor:pointer; opacity:0; }
#studio-root .ls-editor-timestamp-row:hover > button { opacity:1; }
#studio-root .ls-student-block-courseOutline .ls-student-course-row { padding:8px 4px; border-radius:9px; border:0; }
#studio-root .ls-student-block-courseOutline .ls-student-course-row.current { background:#eef0f3; color:#30394c; }
#studio-root .ls-student-block-notesGroup .ls-editor-notes-group { gap:8px; }
#studio-root .ls-student-block-quiz .ls-student-block-body { padding:18px 14px; border:1px solid #dfe4ee; border-radius:16px; background:#fff; }
#studio-root .ls-student-question-meta { display:flex; align-items:center; gap:8px; margin-bottom:11px; color:#8f98a8; font-size:10px; }
#studio-root .ls-student-question-meta b { display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#eef0f3; color:#30394c; font-size:12px; }
#studio-root .ls-student-question-text { margin:0 0 12px; font-size:14px; line-height:1.45; }
#studio-root .ls-student-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
#studio-root .ls-student-options div { display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 10px; border:1px solid #dfe4ee; border-radius:10px; color:#30394c; font-size:12px; }
#studio-root .ls-student-options div > b { display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:6px; background:#eef0f3; color:#30394c; font-size:10px; }
#studio-root .ls-student-block-quiz .ls-student-option { display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 10px; border:1px solid #dfe4ee; border-radius:10px; color:#30394c; font-size:12px; }
#studio-root .ls-student-block-quiz .ls-student-option>b { display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:6px; background:#eef0f3; color:#30394c; font-size:10px; }
#studio-root .ls-student-option-input { min-width:0; width:100%; padding:0!important; border:0!important; outline:0; background:transparent!important; color:inherit; font:inherit!important; }
#studio-root .ls-student-answer-preview { display:flex; align-items:center; gap:8px; color:#8d97a8; font-size:11px; }
#studio-root .ls-student-answer-preview>span { width:180px; height:32px; border:1px solid #dfe4ee; border-radius:9px; background:repeating-linear-gradient(90deg,#fff,#fff 31px,#e5e9f0 32px); }
#studio-root .ls-student-match-preview { display:grid; gap:7px; }
#studio-root .ls-student-match-preview>div { display:grid; grid-template-columns:1fr 20px 1fr; gap:7px; align-items:center; font-size:11px; }
#studio-root .ls-student-match-preview span { padding:8px; border:1px solid #dfe4ee; border-radius:9px; }
#studio-root .ls-student-match-preview i { text-align:center; color:#9aa2b1; }
#studio-root .ls-student-order-preview { display:grid; gap:7px; }
#studio-root .ls-student-order-preview>div { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #dfe4ee; border-radius:9px; }
#studio-root .ls-student-order-preview>div>b { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#eef0f3; font-size:10px; }
#studio-root .ls-student-long-preview { min-height:60px; padding:10px; border:1px dashed #cfd6e4; border-radius:9px; color:#9aa2b1; font-size:11px; }
#studio-root .ls-question-edit { margin-top:12px; border:1px solid #e8ebf1; background:#fafbfc; }
#studio-root .ls-student-block-homework .ls-student-block-body { padding:20px; }
#studio-root .ls-student-block-formula .ls-student-block-body { padding:0; }
#studio-root .ls-student-block-formula .ls-student-formula { border:1px solid #e1d9f1; border-radius:16px; background:#f4efff; }
#studio-root .ls-student-block-text .ls-student-block-body { min-height:70px; padding:20px; border:1px solid #e3e7ef; border-radius:16px; background:#fff; }
#studio-root .ls-student-block-callout .ls-student-block-body { padding:0; }
#studio-root .ls-student-block-image .ls-student-block-body,
#studio-root .ls-student-block-materials .ls-student-block-body { overflow:hidden; }
#studio-root .ls-student-block-quiz .ls-student-block-body > .pill { margin-bottom:10px; }
#studio-root .ls-student-block-homework .ls-student-block-body p { margin:0 0 12px; }
#studio-root .ls-student-block-homework .ls-student-block-body textarea { display:block; width:100%; box-sizing:border-box; }
#studio-root .ls-student-block-tools { left:auto; right:8px; width:max-content; max-width:calc(100% - 16px); opacity:.24; transition:opacity .15s,transform .15s; transform:translateY(-3px); }
#studio-root .ls-student-block:hover .ls-student-block-tools,#studio-root .ls-student-block:focus-within .ls-student-block-tools { opacity:1; transform:translateY(0); }
#studio-root .ls-student-block-tools > b { display:none; }
#studio-root .ls-student-block-tools .spacer { display:none; }
#studio-root .ls-student-block-tools button { background:rgba(255,255,255,.88); }
#studio-root .ls-question-settings-button { display:grid!important; place-items:center; color:#6574c8!important; }
#studio-root .ls-student-block-tools .ls-inline-edit,
#studio-root .ls-student-block-tools .ls-callout-kind,
#studio-root .ls-student-block-tools .ls-video-upload,
#studio-root .ls-student-block-tools .ls-video-url-input { display:none; }
#studio-root .ls-student-block:hover .ls-student-block-tools .ls-inline-edit,
#studio-root .ls-student-block:focus-within .ls-student-block-tools .ls-inline-edit,
#studio-root .ls-student-block:hover .ls-student-block-tools .ls-callout-kind,
#studio-root .ls-student-block:focus-within .ls-student-block-tools .ls-callout-kind,
#studio-root .ls-student-block:hover .ls-student-block-tools .ls-video-upload,
#studio-root .ls-student-block:focus-within .ls-student-block-tools .ls-video-upload,
#studio-root .ls-student-block:hover .ls-student-block-tools .ls-video-url-input,
#studio-root .ls-student-block:focus-within .ls-student-block-tools .ls-video-url-input { display:inline-flex; }
#studio-root .ls-student-block-quiz .ls-question-edit { display:block; width:100%; box-sizing:border-box; margin-top:14px; padding:0; overflow:hidden; }
#studio-root .ls-student-block-quiz .ls-question-edit summary { padding:10px 12px; color:#7b8495; font-size:11px; cursor:pointer; list-style:none; }
#studio-root .ls-student-block-quiz .ls-question-edit summary::-webkit-details-marker { display:none; }
#studio-root .ls-student-block-quiz .ls-question-edit summary::before { content:'▸'; display:inline-block; margin-right:6px; transition:transform .15s; }
#studio-root .ls-student-block-quiz .ls-question-edit[open] summary::before { transform:rotate(90deg); }
#studio-root .ls-student-block-quiz .ls-question-edit-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px; border-top:1px solid #e8ebf1; }
#studio-root .ls-student-block-quiz .ls-question-edit-fields label { display:grid; gap:5px; color:#7c8597; font-size:10px; }
#studio-root .ls-student-block-quiz .ls-question-edit-fields label.wide { grid-column:1/-1; }
#studio-root .ls-student-block-quiz .ls-question-edit-fields textarea { min-height:58px; resize:vertical; }
#studio-root .ls-student-block-quiz .ls-question-edit-fields input,
#studio-root .ls-student-block-quiz .ls-question-edit-fields select,
#studio-root .ls-student-block-quiz .ls-question-edit-fields textarea { width:100%; box-sizing:border-box; }
@media(max-width:700px){#studio-root .ls-student-block-quiz .ls-question-edit-fields{grid-template-columns:1fr}.ls-student-block-quiz .ls-question-edit-fields label.wide{grid-column:auto}}
@media(max-width:700px){#studio-root .ls-student-options{grid-template-columns:1fr 1fr}}
.ls-question-inspector { position:fixed; z-index:30; top:76px; left:clamp(250px,19vw,330px); width:min(360px,calc(100vw - 32px)); max-height:calc(100vh - 100px); overflow:auto; padding:18px; border:1px solid #e0e5ef; border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(26,38,68,.18); color:#30394c; }
.ls-question-inspector header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:16px; }
.ls-question-inspector header small { color:#9aa2b1; font-size:9px; letter-spacing:.08em; font-weight:800; }
.ls-question-inspector header h3 { margin:4px 0 0; font-size:16px; line-height:1.3; }
.ls-question-inspector header>button { width:28px; height:28px; border:0; border-radius:8px; background:#f2f4f8; color:#7a8496; cursor:pointer; }
.ls-inspector-field { display:grid; gap:6px; margin-bottom:12px; color:#818b9c; font-size:10px; }
.ls-inspector-field input,.ls-inspector-field select,.ls-inspector-option-text,.ls-inspector-pair input,.ls-inspector-pair select,.ls-inspector-criterion input { width:100%; min-width:0; box-sizing:border-box; padding:9px 10px; border:1px solid #dfe4ee; border-radius:9px; color:#30394c; background:#fff; font:inherit; font-size:12px; }
.ls-inspector-grid { display:grid; grid-template-columns:1fr 90px; gap:10px; }
.ls-inspector-section { margin-top:18px; padding-top:15px; border-top:1px solid #edf0f5; }
.ls-inspector-section h4 { margin:0 0 4px; font-size:13px; }
.ls-inspector-section p { margin:0 0 10px; color:#9aa2b1; font-size:10px; line-height:1.4; }
.ls-inspector-options { display:grid; gap:7px; }
.ls-inspector-option { display:grid; grid-template-columns:20px 22px minmax(0,1fr) 25px; gap:6px; align-items:center; }
.ls-inspector-correct { display:grid; place-items:center; }
.ls-inspector-correct input { display:none; }
.ls-inspector-correct span { width:16px; height:16px; border:1px solid #cbd2df; border-radius:50%; box-sizing:border-box; }
.ls-inspector-correct input[type=checkbox]+span { border-radius:5px; }
.ls-inspector-correct input:checked+span { background:#6676d7; border-color:#6676d7; box-shadow:inset 0 0 0 3px #fff; }
.ls-inspector-option>b,.ls-inspector-bullet { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; background:#eef0f4; color:#697487; font-size:10px; }
.ls-inspector-option>button,.ls-inspector-pair>button,.ls-inspector-criterion>button { width:25px; height:25px; padding:0; border:0; border-radius:7px; background:#fff1f1; color:#c4737c; cursor:pointer; }
.ls-inspector-add { display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:8px 10px; border:1px dashed #cbd3e2; border-radius:8px; background:#fff; color:#6e7aa1; font-size:11px; cursor:pointer; }
.ls-inspector-pairs { display:grid; gap:8px; }
.ls-inspector-pair { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 25px; align-items:center; gap:5px; }
.ls-inspector-pair>span { text-align:center; color:#9ba4b4; }
.ls-inspector-criterion { display:grid; grid-template-columns:minmax(0,1fr) 60px 25px; gap:6px; align-items:end; }
.ls-inspector-criterion label { display:grid; gap:4px; color:#9aa2b1; font-size:9px; }
@media(max-width:700px){.ls-question-inspector{left:16px;top:58px;width:calc(100vw - 32px)}.ls-inspector-grid{grid-template-columns:1fr 80px}}

/* Финальные правила студии: панель блока и выбор ответа всегда читаемы. */
#studio-root .ls-student-block-tools {
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #ffffff !important;
  border: 1px solid #cfd7e6 !important;
  box-shadow: 0 5px 16px rgba(36,47,72,.14) !important;
  color: #4f5b70 !important;
}
#studio-root .ls-student-block-tools button {
  color: #4f5b70 !important;
  background: #f7f8fc !important;
  border: 1px solid #e0e5ef !important;
}
#studio-root .ls-student-block-tools button:hover { background: #eef1ff !important; color: #4e60c8 !important; }
#studio-root .ls-question-settings-button {
  display: grid !important;
  place-items: center;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid #c7d0e2 !important;
  border-radius: 8px !important;
  background: #eef1ff !important;
  color: #4e60c8 !important;
  opacity: 1 !important;
}
#studio-root .ls-student-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #dfe4ee;
  border-radius: 10px;
  color: #30394c;
  font-size: 12px;
  background: #fff;
}
#studio-root .ls-student-option.is-correct {
  border-color: #7482d8 !important;
  background: #f0f2ff !important;
  box-shadow: 0 0 0 2px rgba(102,118,215,.10);
}
#studio-root .ls-student-correct-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #c8d0df;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
#studio-root .ls-student-correct-toggle.multi { border-radius: 6px; }
#studio-root .ls-student-option.is-correct .ls-student-correct-toggle {
  background: #6676d7;
  border-color: #6676d7;
  box-shadow: inset 0 0 0 2px #fff;
}
#studio-root .ls-student-option-input { cursor: text; }
#studio-root .ls-canvas { position: relative !important; }
#studio-root .ls-question-inspector {
  position: absolute !important;
  z-index: 100 !important;
  top: 16px;
  left: 16px;
  width: min(340px, calc(100% - 28px));
  max-height: min(720px, calc(100vh - 32px));
}
#studio-root .ls-student-correct-toggle { pointer-events: auto !important; cursor: pointer !important; }
#studio-root .ls-student-option-input { flex: 1 1 auto; }
#studio-root .ls-student-option:focus-within { outline: 2px solid rgba(102,118,215,.2); outline-offset: 1px; }
#studio-root .ls-student-correct-label { position:relative; display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; cursor:pointer; }
#studio-root .ls-student-correct-input { position:absolute; inset:0; z-index:2; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; opacity:0 !important; pointer-events:auto !important; cursor:pointer; }
#studio-root .ls-student-correct-label span { display:grid; place-items:center; width:18px; height:18px; box-sizing:border-box; border:1px solid #c8d0df; border-radius:50%; background:#fff; color:#fff; font-size:11px; font-weight:800; line-height:1; }
#studio-root .ls-student-correct-label input[type=checkbox] + span { border-radius:5px; }
#studio-root .ls-student-correct-input:checked + span { background:#6676d7; border-color:#6676d7; box-shadow:inset 0 0 0 2px #fff; }
#studio-root .ls-student-correct-label span { pointer-events:none; }
#studio-root .ls-student-block.is-selected {
  z-index: 20 !important;
  outline: 3px solid #596bd3 !important;
  outline-offset: 3px !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 5px rgba(89,107,211,.14), 0 12px 30px rgba(43,57,112,.16) !important;
}
#studio-root .ls-student-block.is-selected .ls-student-block-tools {
  border-color: #9aa6ed !important;
  background: #f1f3ff !important;
}
#studio-root .ls-resize-handle {
  z-index: 30 !important;
  right: 5px !important;
  bottom: 5px !important;
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background:
    linear-gradient(135deg, transparent 0 47%, #6978d7 48% 54%, transparent 55%),
    linear-gradient(135deg, transparent 0 62%, #6978d7 63% 69%, transparent 70%),
    #eef1ff !important;
  box-shadow: 0 1px 5px rgba(63,77,151,.2) !important;
}
#studio-root .ls-resize-handle:hover,
#studio-root .ls-student-block.is-selected .ls-resize-handle {
  background:
    linear-gradient(135deg, transparent 0 47%, #4456c1 48% 54%, transparent 55%),
    linear-gradient(135deg, transparent 0 62%, #4456c1 63% 69%, transparent 70%),
    #dfe4ff !important;
  transform: scale(1.08);
}

/* ===== Исправления страницы урока (lesson-fix-1) ===== */
.seg button.active { background: linear-gradient(135deg, #ff3d81, #ff8a3d) !important; color: #fff !important; }
.lesson-flow-block { margin: 0 0 18px; }
.lesson-text h3 { margin: 0 0 8px; }
.lesson-text p { margin: 0 0 10px; line-height: 1.65; }
.lesson-flow-notes > * + * { margin-top: 14px; }
.lesson-formula { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); overflow-x: auto; }
.lesson-formula small { display: block; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.lesson-formula pre { margin: 0; white-space: pre-wrap; font-size: 17px; }
.lesson-formula .katex-display { margin: 4px 0; }
.lesson-image img { display: block; max-width: 100%; height: auto; border-radius: 18px; }
.lesson-image figcaption { margin-top: 8px; }
.lesson-preview-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.lesson-preview-banner span { flex: 1; min-width: 200px; }
.q-img { display: block; max-width: 100%; border-radius: 14px; margin: 10px 0; }
.q-long { width: 100%; min-height: 140px; resize: vertical; font: inherit; line-height: 1.5; }
.q-long-answer { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); line-height: 1.55; }
.q-match { position: relative; display: grid; gap: 10px; }
.q-match-row { display: grid; grid-template-columns: auto 1fr minmax(160px, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--border); }
.q-match-row.is-correct { border-color: #10b981; }
.q-match-row.is-wrong { border-color: #ef4444; }
/* соединяем элементы с ответами стрелками */
.qm-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.qm-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.qm-item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.qm-item:hover { border-color: color-mix(in srgb, var(--pink) 40%, var(--border)); }
.qm-item:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.qm-text { flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.qm-dot { flex: none; position: relative; width: 11px; height: 11px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pink) 55%, var(--border)); background: transparent; touch-action: none; }
.qm-dot::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.qm-l .qm-dot { order: 9; }
.qm-r .qm-dot { order: -1; }
.qm-item.is-linked { border-color: color-mix(in srgb, var(--pink) 55%, var(--border)); background: color-mix(in srgb, var(--pink) 5%, var(--surface)); }
.qm-item.is-linked .qm-dot { background: var(--pink); border-color: var(--pink); }
.qm-item.is-sel { border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 16%, transparent); }
.qm-item.is-sel .qm-dot { background: var(--pink); border-color: var(--pink); }
.qm-item.is-over { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, var(--surface)); }
.qm-svg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.qm-line { fill: none; stroke: var(--pink); stroke-width: 2.5; stroke-linecap: round; }
.qm-line-temp { fill: none; stroke: var(--pink); stroke-width: 2; stroke-dasharray: 6 5; opacity: .75; }
.qm-dot-end { fill: var(--pink); }
.qm-arrow { fill: var(--pink); }
@media (max-width: 520px) {
  .qm-grid { gap: 18px; }
  .qm-item { min-height: 44px; padding: 7px 8px; font-size: 14px; gap: 6px; }
  .qm-dot { width: 10px; height: 10px; }
}
@media (max-width: 380px) {
  .qm-grid { gap: 12px; }
  .qm-item { min-height: 42px; padding: 6px 7px; font-size: 13.5px; gap: 5px; }
  .qm-item .opt-l { width: 24px; height: 24px; border-radius: 8px; font-size: 11px; }
  .qm-dot { width: 9px; height: 9px; }
}
.q-order { list-style: none; counter-reset: ord; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-order-item { counter-increment: ord; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.q-order-item::before { content: counter(ord); font-weight: 800; min-width: 22px; color: var(--muted); }
.q-order-text { flex: 1; }
.q-order-btns { display: flex; gap: 4px; }
.q-order-btns svg { transform: rotate(90deg); }
.q-order.ro .q-order-item.is-correct { border-color: #10b981; }
.q-order.ro .q-order-item.is-wrong { border-color: #ef4444; }
@media (max-width: 640px) { .q-match-row { grid-template-columns: auto 1fr; } .q-match-row select, .q-match-row > span:last-child { grid-column: 1 / -1; } }
.lesson-lock-ico { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #ff3d81, #ff8a3d); box-shadow: 0 14px 36px -14px rgba(255, 61, 129, .6); }
.lesson-lock-ico svg { width: 32px; height: 32px; }

/* ===== Холст урока (общий для ученика и студии) ===== */
.lc-canvas { position: relative; min-height: 200px; margin-bottom: 8px; }
.lc-block { position: absolute; box-sizing: border-box; min-width: 0; }
.lc-block > .tile, .lc-block > .hw-section, .lc-block > .lesson-flow-block, .lc-block > .rule-card, .lc-block > .lesson-image { margin: 0; }
.lc-block > .tile:only-child, .lc-block > .hw-section:only-child { min-height: inherit; }
.lc-title { font-size: clamp(24px, 3vw, 36px); margin-top: 10px; }
.lc-b-teacher { display: flex; align-items: center; }
.lc-canvas.lc-stack { height: auto !important; display: flex; flex-direction: column; gap: 16px; }
.lc-canvas.lc-stack > .lc-block { position: static; width: auto !important; min-height: 0 !important; }

/* ===== Фоны блоков урока ===== */
.lc-bg { border-radius: 22px; }
.lc-bg:not(.lc-bg-none) { padding: 18px 20px; }
.lc-bg-none { background: transparent !important; color: inherit !important; border-color: transparent !important; transform: none !important; }
.rule-card.lc-bg-none, .lesson-formula.lc-bg-none { padding-left: 0; padding-right: 0; }
.lc-bg-card { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow); }
.lc-bg-lime { background: var(--lime) !important; color: var(--on-lime) !important; border-color: transparent !important; }
.lc-bg-pink { background: color-mix(in srgb, #ff3d81 16%, var(--solid)) !important; color: var(--text) !important; border-color: transparent !important; }
.lc-bg-blue { background: color-mix(in srgb, #22d3ee 20%, var(--solid)) !important; color: var(--text) !important; border-color: transparent !important; }
.lc-bg-yellow { background: color-mix(in srgb, #ffd23f 30%, var(--solid)) !important; color: var(--text) !important; border-color: transparent !important; }
.lc-bg-violet { background: color-mix(in srgb, #8b5cf6 18%, var(--solid)) !important; color: var(--text) !important; border-color: transparent !important; }
.lc-bg small { color: inherit; opacity: .75; }
.lesson-points h3 { margin: 0 0 12px; }
.lesson-image.lc-bg:not(.lc-bg-none) img { border-radius: 14px; }
.lc-video { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; }
.lc-video iframe, .lc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Форматированный текст урока ===== */
.lesson-rich { line-height: 1.65; overflow-wrap: anywhere; }
.lesson-rich > div + div, .lesson-rich > p + p { margin-top: .6em; }
.lesson-rich p { margin: 0; }
.lesson-rich a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.lesson-rich ul, .lesson-rich ol { margin: .4em 0; padding-left: 1.4em; }
.lesson-rich li + li { margin-top: .2em; }
.lesson-callout-text { font-family: var(--font-d); font-size: 18px; font-weight: 700; margin-top: 4px; }

/* ===== Рамка, размер шрифта, формулы в тексте, громкость ===== */
.lc-bg-frame { background: transparent !important; color: inherit !important; border: 1.5px solid var(--border-2) !important; transform: none !important; }
.lc-bg { --fs: 1; }
.lc-fs-s { --fs: .85; } .lc-fs-l { --fs: 1.22; } .lc-fs-xl { --fs: 1.5; }
.lesson-text .lesson-rich, .lesson-points .lesson-rich { font-size: calc(16px * var(--fs, 1)); }
.lesson-points .lesson-flow-note { font-size: calc(15px * var(--fs, 1)); }
.lesson-callout-text { font-size: calc(18px * var(--fs, 1)) !important; }
.lesson-text h3 { font-size: calc(20px * var(--fs, 1)); }
.lc-math .katex { font-size: 1.08em; }
.lc-math .katex-display { margin: .4em 0; overflow-x: auto; overflow-y: hidden; }
/* формула, которую опасно рисовать (глубокая вложенность) — показываем исходником, чтобы страница не зависла */
.lc-math-big { color: #b3123f; background: #fff1f4; border-radius: 6px; padding: 1px 6px; font-size: .9em; word-break: break-word; }
.pvol-wrap { display: inline-flex; align-items: center; }
.pvol { width: 0; opacity: 0; margin: 0; accent-color: #ff3d81; transition: width .2s ease, opacity .2s ease, margin .2s ease; cursor: pointer; }
.pvol-wrap:hover .pvol, .pvol:focus-visible, .pvol-wrap:focus-within .pvol { width: 84px; opacity: 1; margin: 0 6px 0 2px; }
@media (hover: none) { .pvol { width: 70px; opacity: 1; margin: 0 6px 0 2px; } }

/* ===== Номера формул и ссылки на них ===== */
.lesson-formula { position: relative; }
.lc-fnum { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-d); font-size: 13px; font-weight: 700; opacity: .55; }
.lc-fref { color: var(--pink); font-weight: 700; text-decoration: none; border-bottom: 1.5px dashed currentColor; cursor: pointer; white-space: nowrap; }
.lc-fref:hover { opacity: .8; }
.lc-fref-missing { color: var(--muted); border-bottom-style: dotted; }
.lc-flash { animation: lcFlash 1.6s ease; }
@keyframes lcFlash { 0%, 35% { box-shadow: 0 0 0 4px rgba(255, 61, 129, .55); } 100% { box-shadow: 0 0 0 0 rgba(255, 61, 129, 0); } }
.lesson-text h3 .katex, .rule-card small .katex { font-size: 1em; }

/* ===== Личный кабинет ученика (настоящие данные) ===== */
.cab { color: var(--text); }
.cab-content { display: grid; gap: 20px; padding: 24px clamp(16px, 3vw, 32px) 48px; max-width: 1280px; }
.cab-top-title { font-family: var(--font-d); font-size: 20px; font-weight: 700; margin: 0 12px 0 4px; white-space: nowrap; }
.cab-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); }
.cab-search svg { width: 17px; height: 17px; flex: none; }
.cab-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.cab-avatar { background: var(--grad) !important; color: #fff !important; font-weight: 800; border-radius: 12px !important; }
.cab-avatar.big { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 22px !important; font-size: 26px; font-family: var(--font-d); }
.cab-nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff3d81; color: #fff; font: 800 11px/20px var(--font); font-style: normal; text-align: center; }
.cab-side-stats { margin: auto 14px 16px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: grid; gap: 8px; font-size: 13px; }
.cab-side-stats small { color: var(--muted); font-size: 11.5px; }
.cab-side-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cab-side-row span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; }
.cab-side-row svg { width: 15px; height: 15px; color: var(--accent-ink); }
.cab-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .4); }
.cab-bar { display: block; flex: 1; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.cab-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .4s var(--ease); }
/* приветствие */
.cab-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px; background: var(--grad); color: #fff; box-shadow: 0 20px 40px -24px rgba(255, 61, 129, .7); }
.cab-hero h1 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; }
.cab-hero p { margin: 0; opacity: .92; font-weight: 600; max-width: 520px; }
.cab-stats { display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 10px; }
.cab-stat { padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.cab-stat b { display: block; font-family: var(--font-d); font-size: 22px; line-height: 1.1; }
.cab-stat b small { font-size: 13px; opacity: .75; }
.cab-stat span { font-size: 12px; font-weight: 600; opacity: .9; }
.cab-profile { text-align: center; }
.cab-profile h2 { margin: 0; }
.cab-profile .cab-stats { margin: 16px 0; grid-template-columns: repeat(2, 1fr); }
.cab-profile .cab-stat { background: var(--surface-2); color: var(--text); }
/* панели */
.cab-grid-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
.cab-panel { padding: 20px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.cab-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cab-panel-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.cab-panel-head h2 > svg { width: 19px; height: 19px; color: var(--accent-ink); }
.cab-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.cab-link:hover { color: var(--accent-ink); }
.cab-link svg { width: 14px; height: 14px; }
.cab-muted { color: var(--muted); font-size: 14px; margin: 6px 0; }
.cab-h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 4px 0 12px; }
.cab-h2 svg { width: 20px; height: 20px; color: var(--accent-ink); }
.cab-thumb { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--g, var(--grad)); color: #fff; }
.cab-thumb svg { width: 24px; height: 24px; }
.cab-thumb.sm { width: 32px; height: 32px; border-radius: 10px; }
.cab-thumb.sm svg { width: 16px; height: 16px; }
/* продолжить */
.cab-resume-list { display: grid; gap: 10px; }
.cab-resume { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; transition: border-color .2s, transform .2s var(--ease), background .2s; }
.cab-resume:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateY(-1px); }
.cab-resume-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.cab-resume-body small, .cab-resume-meta { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cab-resume-body b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-resume-prog, .cab-course-pct { display: flex; align-items: center; gap: 10px; }
.cab-resume-prog em, .cab-course-pct em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.cab-course-pct { width: 180px; }
.cab-go { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); color: var(--text); }
.cab-go svg { width: 16px; height: 16px; }
/* неделя */
.cab-week-nav { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.cab-week-nav button { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 16px; }
.cab-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.cab-day { display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); }
.cab-day small { font-size: 11px; color: var(--muted); font-weight: 700; }
.cab-day b { font-family: var(--font-d); font-size: 16px; }
.cab-day i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3d81; color: #fff; font: 800 10.5px/18px var(--font); font-style: normal; }
.cab-day i.none { background: transparent; }
.cab-day.today { border-color: #ff3d81; }
.cab-day.sel { background: var(--text); color: var(--bg); border-color: var(--text); }
.cab-day.sel small { color: inherit; opacity: .7; }
.cab-agenda { display: grid; gap: 8px; }
.cab-agenda-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.cab-agenda-row > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.cab-agenda-row b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-agenda-row small { color: var(--muted); font-size: 12px; }
.cab-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--g); }
/* сроки и ответы */
.cab-due-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--border); }
.cab-due-row:last-child { border-bottom: 0; }
.cab-due-row:hover { background: var(--surface-2); border-radius: 12px; }
.cab-due-date { display: grid; justify-items: center; flex: none; width: 46px; padding: 5px 0; border-radius: 12px; background: var(--surface-2); line-height: 1.1; }
.cab-due-date b { font-family: var(--font-d); font-size: 17px; }
.cab-due-date small { font-size: 11px; color: var(--muted); font-weight: 700; }
.cab-due-row.soon .cab-due-date { background: var(--warn-bg); color: var(--warn); }
.cab-due-row.late .cab-due-date { background: var(--bad-bg); color: var(--bad); }
.cab-due-body { display: grid; flex: 1; min-width: 0; }
.cab-due-body b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-due-body small { color: var(--muted); font-size: 12.5px; }
.cab-due-row.late .cab-due-body small { color: var(--bad); font-weight: 700; }
.cab-chip { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.cab-chip.st-review { background: var(--warn-bg); color: var(--warn); }
.cab-chip.st-revision { background: var(--bad-bg); color: var(--bad); }
.cab-chip.st-accepted { background: var(--ok-bg); color: var(--ok); }
.cab-review { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; margin-bottom: 8px; transition: background .2s; }
.cab-review:hover { background: var(--surface-2); }
.cab-review-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab-review-top small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.cab-review b { font-size: 14px; }
.cab-review > small { color: var(--muted); font-size: 12px; }
.cab-quote { color: var(--muted); font-size: 13.5px; line-height: 1.5; border-left: 1px solid var(--border-2); padding-left: 10px; }
.cab-score { font-family: var(--font-d); font-weight: 800; font-size: 13px; }
.cab-review-list { display: grid; gap: 4px; }
.cab-review.big { padding: 16px 18px; background: var(--surface); }
/* курсы */
.cab-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cab-course { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); transition: transform .2s var(--ease), box-shadow .2s; }
.cab-course:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cab-course-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cab-course small { color: var(--muted); font-size: 12px; font-weight: 700; }
.cab-course > b { font-size: 16px; line-height: 1.3; }
.cab-course-foot { color: var(--muted); font-size: 12.5px; }
.cab-ring { --p: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(#ff3d81 calc(var(--p) * 1%), var(--surface-3) 0); }
.cab-ring b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--solid); font-size: 12px; font-weight: 800; }
/* моё обучение и домашки */
.cab-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cab-seg, .cab-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.cab-seg button, .cab-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.cab-seg button:hover, .cab-tabs button:hover { color: var(--text); background: var(--surface-2); }
.cab-seg button.on, .cab-tabs button.on { background: var(--text); color: var(--bg); }
.cab-tabs i { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--surface-3); color: inherit; font: 800 11px/18px var(--font); font-style: normal; text-align: center; }
.cab-tabs button.on i { background: rgba(255, 255, 255, .2); }
.cab-course-block { padding: 14px 16px; }
.cab-lesson-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 120px auto; align-items: center; gap: 14px; padding: 10px 8px; border-top: 1px solid var(--border); }
.cab-lesson-row:hover { background: var(--surface-2); border-radius: 12px; }
.cab-lnum { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-3); font-family: var(--font-d); font-size: 13px; font-weight: 700; }
.cab-lesson-row.done .cab-lnum { background: var(--ok-bg); color: var(--ok); }
.cab-lnum svg { width: 16px; height: 16px; }
.cab-lbody { display: grid; min-width: 0; }
.cab-lbody b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-lbody small { color: var(--muted); font-size: 12.5px; }
.cab-lvid { display: flex; }
.cab-hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cab-hw { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.cab-hw:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); }
.cab-hw.late { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.cab-hw-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cab-hw-top .cab-chip { margin-left: auto; }
.cab-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; background: var(--g); color: #fff; font-size: 11.5px; font-weight: 800; }
.cab-pill.ghost { background: var(--surface-2); color: var(--muted); }
.cab-pill svg { width: 12px; height: 12px; }
.cab-hw > b { font-size: 15px; line-height: 1.35; }
.cab-hw-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cab-hw-foot span { display: inline-flex; align-items: center; gap: 5px; }
.cab-hw-foot svg { width: 14px; height: 14px; }
.cab-hw-foot .late { color: var(--bad); font-weight: 800; }
.cab-hw-foot b { font-family: var(--font-d); color: var(--text); }
.cab-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border: 1.5px dashed var(--border-2); border-radius: 22px; text-align: center; color: var(--muted); }
.cab-empty > svg { width: 30px; height: 30px; color: var(--accent-ink); }
.cab-empty h3 { margin: 0; color: var(--text); }
.cab-empty p { margin: 0 0 6px; max-width: 420px; }
.cab-row-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 1100px) { .cab-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .cab-stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .cab-top-title { display: none; }
  .cab-lesson-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .cab-lvid { display: none; }
  .cab-course-pct { width: 110px; }
  .cab-content { padding: 16px; }
}

/* ===== Трекер по месяцам, заморозка, вопросы куратору ===== */
.cab-track-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.cab-months { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; }
.cab-month { display: grid; justify-items: center; gap: 6px; flex: none; min-width: 64px; }
.cab-month > b { font-family: var(--font-d); font-size: 14px; }
.cab-month > small { font-size: 12px; font-weight: 700; color: var(--muted); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.cab-month.now > small { color: var(--text); border-color: #ff3d81; }
.cab-month.future { opacity: .6; }
.cab-cells { display: flex; gap: 3px; padding: 4px; border: 2px solid var(--border-2); border-radius: 8px; min-height: 30px; }
.cab-cells i { width: 12px; height: 22px; border-radius: 2px; background: var(--surface-3); }
.cab-cells i.half { background: color-mix(in srgb, #8bd450 45%, var(--surface-3)); }
.cab-cells i.done { background: #8bd450; }
.cab-month.now .cab-cells { border-color: #ff3d81; }
.cab-track-note { margin: 2px 0 0; font-size: 12.5px; }
.cab-freeze { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.cab-freeze svg { width: 14px; height: 14px; }
.cab-freeze.on { background: color-mix(in srgb, #22d3ee 18%, transparent); color: #0e7490; }
.cab-freeze.off { background: var(--surface-2); color: var(--muted); }
.cab-freeze-btn svg { width: 14px; height: 14px; }
/* вопрос куратору на странице урока */
.lesson-qa { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.qa-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.qa-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.qa-head h3 svg { width: 18px; height: 18px; color: var(--accent-ink); }
.qa-head small { color: var(--muted); font-size: 12.5px; max-width: 520px; }
.qa-thread { display: grid; gap: 8px; margin-bottom: 12px; }
.qa-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); }
.qa-msg.me { justify-self: end; background: color-mix(in srgb, #ff3d81 12%, var(--surface)); border-bottom-right-radius: 4px; }
.qa-msg.staff { justify-self: start; border-bottom-left-radius: 4px; }
.qa-msg b { display: block; font-size: 12px; color: var(--muted); }
.qa-msg p { margin: 3px 0; line-height: 1.5; overflow-wrap: anywhere; }
.qa-msg small { color: var(--faint); font-size: 11px; }
.qa-closed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 700; }
.qa-closed svg { width: 15px; height: 15px; }
.qa-form { display: grid; gap: 8px; }
.qa-form textarea { width: 100%; resize: vertical; min-height: 80px; }
.qa-form > .btn { justify-self: start; }
.qa-limit { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 13.5px; margin: 0; }
.qa-limit svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.qa-limit a { color: var(--accent-ink); font-weight: 700; }
/* куратор */
.qa-admin { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; min-height: 420px; }
.qa-admin-list { display: grid; align-content: start; gap: 6px; max-height: 620px; overflow: auto; padding-right: 4px; }
.qa-admin-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.qa-admin-tabs button { flex: 1; padding: 6px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.qa-admin-tabs button.on { background: var(--text); color: var(--bg); }
.qa-admin-filter { padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; text-align: left; display: flex; align-items: center; gap: 6px; }
.qa-admin-filter svg { width: 13px; height: 13px; }
.qa-admin-item { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: left; font-size: 13px; }
.qa-admin-item.on { border-color: #ff3d81; box-shadow: 0 0 0 3px rgba(255, 61, 129, .12); }
.qa-admin-top { display: flex; justify-content: space-between; gap: 8px; }
.qa-admin-top small { color: var(--muted); font-size: 11px; }
.qa-admin-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.qa-admin-tags i { padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 700; }
.qa-admin-tags i.open { background: var(--warn-bg); color: var(--warn); }
.qa-admin-tags i.lim { background: var(--bad-bg); color: var(--bad); }
.qa-admin-thread { padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); display: grid; align-content: start; gap: 12px; }
.qa-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qa-admin-head small { display: block; color: var(--muted); font-size: 12.5px; }
.qa-admin-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-admin-empty { padding: 20px; text-align: center; }
.qa-freezes { margin-top: 22px; }
.qa-freezes h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.qa-freezes h3 svg { width: 18px; height: 18px; color: var(--accent-ink); }
.qa-ftable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qa-ftable th { text-align: left; color: var(--muted); font-size: 12px; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.qa-ftable td { padding: 8px; border-bottom: 1px solid var(--border); }
.qa-ftable tr.past { opacity: .55; }
@media (max-width: 860px) { .qa-admin { grid-template-columns: 1fr; } .qa-msg { max-width: 100%; } }

/* ===== Вебинары, пробный экзамен, комьюнити ===== */
.cab-lock { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.cab-lock svg { width: 14px; height: 14px; }
.cab-upsell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px; border: 1px dashed color-mix(in srgb, #ff3d81 45%, transparent); background: color-mix(in srgb, #ff3d81 7%, var(--surface)); }
.cab-upsell > svg { width: 26px; height: 26px; color: var(--accent-ink); flex: none; }
.cab-upsell > div { display: grid; flex: 1; min-width: 220px; }
.cab-upsell span { color: var(--muted); font-size: 13.5px; }
.cab-web-strip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.cab-web-strip > svg { width: 20px; height: 20px; color: var(--accent-ink); flex: none; }
.cab-web-strip > span { display: grid; flex: 1; }
.cab-web-strip small { color: var(--muted); }
.cab-web-strip.live { border-color: #ff3d81; box-shadow: 0 0 0 3px rgba(255, 61, 129, .12); }
.cab-web-list { display: grid; gap: 10px; }
.cab-web { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; }
.cab-web.live { border-color: #ff3d81; }
.cab-web.locked { opacity: .78; }
.cab-web-date { display: grid; justify-items: center; flex: none; width: 54px; padding: 8px 0; border-radius: 14px; background: var(--g); color: #fff; line-height: 1.1; }
.cab-web-date b { font-family: var(--font-d); font-size: 20px; }
.cab-web-date small { font-size: 11px; font-weight: 700; }
.cab-web-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.cab-web-body > small { color: var(--muted); font-size: 12.5px; }
.cab-web-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cab-web-tags i { padding: 2px 8px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-style: normal; font-size: 11.5px; font-weight: 800; }
.cab-web-tags i.live { background: #ff3d81; color: #fff; }
.cab-web-tags i.prem { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.cab-web-tags small { color: var(--muted); font-size: 12px; }
.cab-web-act { flex: none; }
.cab-exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin-top: 12px; }
.cab-exam { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: 18px; }
.cab-exam > b { font-size: 15px; line-height: 1.35; }
.cab-exam .cab-pill { justify-self: start; }
.cab-exam-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.cab-exam-meta svg { width: 14px; height: 14px; }
.cab-exam-best { font-size: 13px; color: var(--muted); }
.cab-exam .btn { justify-self: start; }
.cab-attempt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
.cab-attempt:hover { background: var(--surface-2); border-radius: 12px; }
.cab-attempt > span:first-child { display: grid; }
.cab-attempt small { color: var(--muted); font-size: 12px; }
.cab-score-big { font-family: var(--font-d); font-size: 22px; font-weight: 800; }
.cab-score-big small { font-size: 13px; color: var(--muted); }
.cab-exam-run { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.cab-exam-bar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.cab-exam-bar > b { flex: 1; min-width: 200px; }
.cab-exam-timer { font-family: var(--font-d); font-size: 20px; font-weight: 800; padding: 4px 12px; border-radius: 10px; background: var(--surface-2); }
.cab-exam-timer.low { background: var(--bad-bg); color: var(--bad); }
.cab-exam-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: start; }
.cab-exam-nav button { height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-weight: 800; font-size: 13px; color: var(--text); }
.cab-exam-nav button.done { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.cab-exam-nav button.on { outline: 2px solid #ff3d81; outline-offset: 1px; }
.cab-exam-task { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); min-width: 0; }
.cab-exam-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cab-exam-task-head small { color: var(--muted); }
.cab-exam-cond { line-height: 1.6; overflow-x: auto; }
.cab-exam-cond img { max-width: 100%; height: auto; }
.cab-exam-cond table { border-collapse: collapse; }
.cab-exam-cond td, .cab-exam-cond th { border: 1px solid var(--border); padding: 4px 8px; }
.cab-exam-ans { display: flex; align-items: center; gap: 10px; max-width: 460px; font-weight: 800; color: var(--muted); }
.cab-exam-ans .input { font-family: 'Courier New', monospace; font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.cab-exam-move { display: flex; justify-content: space-between; gap: 10px; }
.cab-result-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cab-ring.big { width: 96px; height: 96px; }
.cab-ring.big b { width: 80px; height: 80px; font-family: var(--font-d); font-size: 22px; }
.cab-ring.big b small { font-size: 12px; color: var(--muted); }
.cab-review-tasks { display: grid; gap: 6px; }
.cab-rt { border: 1px solid var(--border); border-radius: 14px; }
.cab-rt summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 13.5px; }
.cab-rt summary::-webkit-details-marker { display: none; }
.cab-rt-num { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; font-family: var(--font-d); font-weight: 800; font-size: 13px; }
.cab-rt.ok .cab-rt-num { background: var(--ok-bg); color: var(--ok); }
.cab-rt.bad .cab-rt-num { background: var(--bad-bg); color: var(--bad); }
.cab-rt summary .cab-muted { flex: 1; margin: 0; }
.cab-rt-pts { font-family: var(--font-d); }
.cab-rt-sol { padding: 0 14px 14px 54px; line-height: 1.6; overflow-x: auto; }
.cab-rt-sol img { max-width: 100%; }
.cab-chat-list { display: grid; align-content: start; gap: 8px; height: min(56vh, 560px); overflow-y: auto; padding: 4px; margin-bottom: 12px; }
.cab-chat-msg { max-width: 78%; padding: 9px 13px; border-radius: 16px; background: var(--surface-2); }
.cab-chat-msg.me { justify-self: end; background: color-mix(in srgb, #ff3d81 12%, var(--surface)); }
.cab-chat-msg.staff { border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); }
.cab-chat-msg b { font-size: 12.5px; }
.cab-chat-msg b i { font-style: normal; padding: 1px 6px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); font-size: 10.5px; }
.cab-chat-msg p { margin: 3px 0; line-height: 1.5; overflow-wrap: anywhere; }
.cab-chat-msg small { color: var(--faint); font-size: 11px; }
.cab-chat-msg small button { color: var(--faint); text-decoration: underline; font-size: 11px; }
.cab-chat-form { display: flex; gap: 10px; align-items: flex-end; }
.cab-chat-form textarea { flex: 1; resize: none; }
.cab-chat-rules { font-size: 12px; margin-top: 8px; }
.qa-admin-tags i.prio { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
/* куратор: вебинары */
.web-adm { margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.web-adm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.web-adm-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.web-adm-head h3 svg { width: 18px; height: 18px; color: var(--accent-ink); }
.web-adm-form { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 16px; background: var(--surface-2); }
.web-adm-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-top: 1px solid var(--border); }
.web-adm-row > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.web-adm-row small { color: var(--muted); font-size: 12.5px; }
.web-adm-row small em { color: var(--warn); font-style: normal; font-weight: 700; }
.web-adm-when { flex: none; width: 210px; font-size: 13px; font-weight: 700; }
.web-adm-acts { display: flex; gap: 6px; flex: none; }
.web-adm-past summary { cursor: pointer; padding: 10px 4px; color: var(--muted); font-weight: 700; font-size: 13px; }
@media (max-width: 860px) {
  .cab-exam-run { grid-template-columns: 1fr; }
  .cab-exam-nav { grid-template-columns: repeat(8, 1fr); }
  .cab-web { flex-wrap: wrap; }
  .web-adm-row { flex-wrap: wrap; } .web-adm-when { width: auto; }
}

/* ===== Трекер: фиксированная батарейка, группа ученика ===== */
.cab-cells { display: grid; grid-template-columns: repeat(10, 9px); gap: 3px; width: max-content; position: relative; }
.cab-cells::after { content: ''; position: absolute; right: -6px; top: 50%; width: 4px; height: 12px; margin-top: -6px; border-radius: 0 3px 3px 0; background: var(--border-2); }
.cab-month.now .cab-cells::after { background: #ff3d81; }
.cab-cells i { width: 9px !important; height: 22px; }
.cab-group { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.cab-group svg { width: 14px; height: 14px; }

/* ===== Вопрос куратору: кнопка и боковая панель ===== */
.qa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 999px; border: 0; background: var(--g, #22c55e); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); cursor: pointer; transition: transform .15s; }
.qa-fab:hover { transform: translateY(-2px); }
.qa-fab svg { width: 18px; height: 18px; }
.qa-fab.has-answer { background: #ff3d81; }
.qa-dot { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #ff3d81; }
.qa-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 20, .35); }
.qa-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; display: flex; flex-direction: column; width: min(440px, 100vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -18px 0 50px rgba(0, 0, 0, .18); transform: translateX(100%); transition: transform .22s ease; color: var(--text); }
.qa-drawer.on { transform: none; }
.qa-dhead { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.qa-dhead > div { display: grid; flex: 1; min-width: 0; }
.qa-dhead small { color: var(--muted); font-size: 12.5px; }
.qa-ava { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--g, #22c55e); color: #fff; font-weight: 800; font-size: 14px; }
.qa-ava.sm { width: 32px; height: 32px; font-size: 12px; }
.qa-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--surface-2); color: var(--text); cursor: pointer; }
.qa-x svg { width: 16px; height: 16px; }
.qa-topic { display: grid; gap: 4px; padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.qa-topic small { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.qa-topic b { font-size: 14px; line-height: 1.35; }
.qa-chip { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 2px 9px; border-radius: 7px; background: var(--ok-bg); color: var(--ok); font-size: 11.5px; font-weight: 800; }
.qa-chip svg { width: 12px; height: 12px; }
.qa-chip.lim { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.qa-chip.prio { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.qa-dbody { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.qa-msg { max-width: 84%; padding: 9px 13px; border-radius: 16px; background: var(--surface-2); }
.qa-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--g, #22c55e) 14%, var(--surface)); border-bottom-right-radius: 5px; }
.qa-msg.staff { align-self: flex-start; border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.qa-msg b { font-size: 12px; }
.qa-msg p { margin: 3px 0; line-height: 1.5; overflow-wrap: anywhere; }
.qa-msg small { color: var(--faint, var(--muted)); font-size: 11px; }
.qa-closed { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 700; }
.qa-closed svg { width: 13px; height: 13px; }
.qa-hello { margin: auto 0; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--muted); }
.qa-hello svg { width: 34px; height: 34px; color: var(--g, #22c55e); }
.qa-hello b { color: var(--text); font-size: 16px; }
.qa-hello p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.qa-dfoot { padding: 12px 18px 16px; border-top: 1px solid var(--border); }
.qa-form { display: flex; align-items: flex-end; gap: 8px; }
.qa-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; }
.qa-form .btn { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; }
.qa-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.qa-limit { display: flex; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.qa-limit svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.hw-head .qa-inline { margin-left: auto; align-self: center; }
@media (max-width: 640px) { .qa-fab span { display: none; } .qa-fab { padding: 15px; } }

/* ===== Группы (куратор) ===== */
.grp { display: grid; gap: 16px; }
.grp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.grp-head h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.grp-head h3 svg { width: 18px; height: 18px; color: var(--accent-ink); }
.grp-courses { flex-wrap: wrap; }
.grp-form { display: grid; grid-template-columns: 2fr 90px 1.4fr; gap: 10px; align-items: end; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.grp-form-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.grp-card { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.grp-card > header { display: flex; justify-content: space-between; gap: 8px; }
.grp-card > header > div { display: grid; }
.grp-card > header small { color: var(--muted); font-size: 12.5px; }
.grp-card .grp-form { grid-template-columns: 1fr 90px; }
.grp-card .grp-form .field:nth-child(3) { grid-column: 1 / -1; }
.grp-acts { display: flex; gap: 4px; }
.grp-cap { display: flex; align-items: center; gap: 10px; }
.grp-cap .cab-bar { flex: 1; }
.grp-cap em { font-style: normal; font-weight: 800; font-size: 13px; }
.grp-members { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.grp-m { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; }
.grp-m:hover { background: var(--surface-2); }
.grp-m > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.grp-m small { color: var(--muted); font-size: 11.5px; }
.grp-m .lse-x { opacity: 0; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.grp-m:hover .lse-x { opacity: 1; }
.grp-m .lse-x svg { width: 14px; height: 14px; }
.grp-card > .btn { justify-self: start; }
.grp-pick { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.grp-pick-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.grp-pick-list label { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; cursor: pointer; }
.grp-pick-list label:hover { background: var(--surface); }
.grp-pick-list span { display: grid; }
.grp-pick-list small { color: var(--muted); font-size: 11.5px; }
.grp-free { padding: 14px 16px; border: 1px dashed var(--border); border-radius: 18px; }
.grp-free h4 { margin: 0 0 10px; }
.grp-chip { display: inline-grid; margin: 0 6px 6px 0; padding: 5px 11px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.grp-chip small { color: var(--muted); font-size: 11px; font-weight: 600; }
.qa-admin-mine { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
@media (max-width: 700px) { .grp-form { grid-template-columns: 1fr; } }

/* ===== Кабинет преподавателя: поля и без горизонтального сдвига ===== */
/* 100vw включает полосу прокрутки — из-за этого страница уезжала вбок и обрезала левый край */
html, body { overflow-x: clip; }
.teacher-cabinet-wrap > .c-panel:not(#panel-studio) { margin: 0 24px 40px; min-width: 0; }
.cabinet-nav-tabs { overflow-y: hidden; scrollbar-width: none; padding-bottom: 0; }
.cabinet-nav-tabs::-webkit-scrollbar { display: none; }
.cabinet-nav-tabs .c-tab-btn { margin-bottom: -2px; }
.teacher-cabinet-wrap .students-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.teacher-cabinet-wrap .stat-pill-box { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); white-space: nowrap; }
.teacher-cabinet-wrap .u-cell { display: flex; align-items: center; gap: 10px; }
.teacher-cabinet-wrap .u-cell > div { display: grid; }
.teacher-cabinet-wrap td small svg { width: 12px; height: 12px; vertical-align: -2px; }
.qa-admin-sec { display: flex; align-items: center; gap: 6px; margin: 14px 4px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qa-admin-sec:first-child { margin-top: 2px; }
.qa-admin-sec svg { width: 14px; height: 14px; }
.qa-admin-thread .cm-head { margin: -4px -4px 0; }
.qa-admin-thread .cm-list { height: min(52vh, 520px); }

/* ===== Комьюнити: мессенджер (чаты групп + личные вопросы) ===== */
.cab-panel.cm { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; min-height: min(72vh, 720px); }
.cm-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--border); background: var(--surface-2); overflow-y: auto; max-height: min(78vh, 780px); }
.cm-side h4 { display: flex; align-items: center; gap: 6px; margin: 10px 8px 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cm-side h4:first-child { margin-top: 0; }
.cm-side h4 svg { width: 14px; height: 14px; }
.cm-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.cm-item:hover { background: var(--surface); }
.cm-item.on { background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.cm-item-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cm-item-top { display: flex; justify-content: space-between; gap: 8px; }
.cm-item-top b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-item-top small { flex: none; color: var(--muted); font-size: 11px; }
.cm-item-body > small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-item-body > small svg { width: 12px; height: 12px; vertical-align: -2px; }
.cm-item .qa-ava svg { width: 15px; height: 15px; }
.cm-gava { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, #ff3d81, #ff8a3d); color: #fff; }
.cm-gava svg { width: 19px; height: 19px; }
.cm-item .cm-gava { width: 32px; height: 32px; border-radius: 11px; }
.cm-item .cm-gava svg { width: 16px; height: 16px; }
.cm-tags { display: flex; gap: 4px; }
.cm-tags i, .cm-topic i { padding: 1px 7px; border-radius: 6px; background: var(--surface-3, var(--border)); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 800; }
.cm-tags i.open, .cm-topic i.open { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.cm-tags i.ans { background: #ff3d81; color: #fff; }
.cm-note { margin: 2px 8px 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cm-head > div { display: grid; flex: 1; min-width: 0; }
.cm-head small { color: var(--muted); font-size: 12.5px; }
.cm-topic { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.cm-topic svg { width: 15px; height: 15px; color: var(--muted); }
.cm-list { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; overflow-y: auto; height: min(56vh, 560px); }
.cm-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.cm-msg.me { align-self: flex-end; }
.cm-bubble { padding: 8px 13px; border-radius: 16px 16px 16px 5px; background: var(--surface-2); min-width: 0; }
.cm-msg.me .cm-bubble { border-radius: 16px 16px 5px 16px; background: color-mix(in srgb, #ff3d81 13%, var(--surface)); }
.cm-msg.staff .cm-bubble { background: color-mix(in srgb, #22c55e 12%, var(--surface)); border: 1px solid color-mix(in srgb, #22c55e 30%, transparent); }
.cm-bubble b { font-size: 12px; }
.cm-bubble b i { font-style: normal; padding: 1px 6px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); font-size: 10.5px; }
.cm-bubble p { margin: 3px 0; line-height: 1.5; overflow-wrap: anywhere; }
.cm-bubble small { color: var(--muted); font-size: 11px; }
.cm-bubble small button { border: 0; background: none; padding: 0; color: var(--muted); font-size: 11px; text-decoration: underline; cursor: pointer; }
.cm-list .qa-closed { align-self: center; }
.cm-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 18px 4px; border-top: 1px solid var(--border); }
.cm-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; }
.cm-form .btn { flex: none; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; }
.cm-rules { margin: 0; padding: 4px 18px 12px; color: var(--muted); font-size: 11.5px; }
.cm-empty { margin: auto; color: var(--muted); text-align: center; font-size: 13.5px; }
.cm-pick { display: grid; justify-items: center; gap: 6px; }
.cm-pick svg { width: 34px; height: 34px; color: var(--accent-ink); }
.cm-pick b { color: var(--text); }
.cm-locked { padding: 24px 18px; }
/* в тёмной теме чат должен быть плотным, а не просвечивать страницей */
[data-theme="dark"] .cab-panel.cm,
[data-theme="dark"] .cab-panel.cur-card { background: #151013; }
[data-theme="dark"] .cm-side { background: #100c0e; border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .cm-main { background: #151013; }
[data-theme="dark"] .cm-item:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .cm-item.on { background: #211a1d; box-shadow: none; }
[data-theme="dark"] .cm-bubble { background: #241d20; }
[data-theme="dark"] .cm-msg.me .cm-bubble { background: #4a1f31; }
[data-theme="dark"] .cm-msg.staff .cm-bubble { background: #16301f; border-color: #2f5a3c; }
[data-theme="dark"] .cm-head, [data-theme="dark"] .cm-form { border-color: rgba(255, 255, 255, .08); }
/* ===== Вопрос куратору в уроке: в тёмной теме панель непрозрачная ===== */
[data-theme="dark"] .qa-drawer { background: #151013; box-shadow: -18px 0 50px rgba(0, 0, 0, .55); }
[data-theme="dark"] .qa-dhead, [data-theme="dark"] .qa-dfoot { background: #191214; }
[data-theme="dark"] .qa-topic { background: #1d1619; }
[data-theme="dark"] .qa-msg { background: #241d20; }
[data-theme="dark"] .qa-msg.me { background: #1d3025; }
[data-theme="dark"] .qa-msg.staff { background: #1b2a20; border-color: #2a4a35; }
[data-theme="dark"] .qa-msg small { color: #9b8d91; }
[data-theme="dark"] .qa-x { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .qa-msg b { color: #d8cacc; }
[data-theme="dark"] .cur-card .cur-quota { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .cur-card .cur-quota.free { background: #16301f; }
@media (max-width: 860px) {
  .cab-panel.cm { grid-template-columns: 1fr; }
  .cm-side { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--border); }
  .teacher-cabinet-wrap > .c-panel:not(#panel-studio) { margin: 0 12px 32px; }
}
/* ширина окна без полосы прокрутки (--sbw выставляет app.js) */
.teacher-cabinet-wrap { width: calc(100vw - var(--sbw, 0px)) !important; margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2) !important; }
.teacher-cabinet-wrap #panel-studio, .teacher-cabinet-wrap #studio-root { width: 100% !important; }

/* ===== Тарифы: карточки, сравнение ===== */
.tariff .t-top { display: flex; align-items: center; gap: 12px; }
.tariff .t-top .t-emoji { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); }
.tariff .t-top .t-emoji svg { width: 24px; height: 24px; }
.tariff.popular .t-top .t-emoji { background: var(--grad); color: #fff; }
.tariff .t-base { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 700; }
.tariff .t-base svg { width: 16px; height: 16px; flex: none; color: var(--ok); }
.tariff-compare { margin-top: 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--solid, var(--surface)); }
.tariff-compare > summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; cursor: pointer; list-style: none; font-weight: 800; }
.tariff-compare > summary::-webkit-details-marker { display: none; }
.tariff-compare > summary svg { width: 18px; height: 18px; }
.tariff-compare[open] > summary { border-bottom: 1px solid var(--border); }
.tariff-compare.in-modal { margin-top: 12px; }
.tariff-compare.in-modal > summary { display: none; }
.tc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tc-table th, .tc-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.tc-table tr:last-child td { border-bottom: 0; }
.tc-table th:first-child, .tc-table td:first-child { text-align: left; font-weight: 600; min-width: 220px; }
.tc-table th { font-size: 15px; white-space: nowrap; }
.tc-table th svg { width: 16px; height: 16px; vertical-align: -3px; }
.tc-table th small { display: block; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.tc-table .pop { background: color-mix(in srgb, var(--violet, #8b5cf6) 7%, transparent); }
.tc-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.tc-yes svg { width: 14px; height: 14px; }
.tc-no { color: var(--faint, var(--muted)); }
.tc-val { font-size: 13px; font-weight: 700; }
.t-option b small { margin-left: 3px; color: var(--muted); font-size: 12px; font-weight: 600; }
.t-compare-link { justify-self: center; margin: -4px auto 4px; display: flex; }
.sub-prio { padding: 1px 6px; border-radius: 6px; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-style: normal; font-weight: 800; font-size: 10.5px; }

/* ===== Раздел «Куратор» ===== */
.cur-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qa-ava.big { width: 56px; height: 56px; font-size: 19px; }
.cur-who { display: grid; gap: 1px; min-width: 200px; }
.cur-who small { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cur-who b { font-size: 19px; }
.cur-who span { color: var(--muted); font-size: 13px; }
.cur-quota { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 260px; max-width: 560px; margin-left: auto; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.cur-quota.free { background: var(--ok-bg); }
.cur-quota.out { background: var(--surface-2); }
.cur-quota > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.cur-quota > div { display: grid; gap: 3px; }
.cur-quota b { font-size: 14px; }
.cur-quota small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.cur-courses { width: 100%; }
.cur-tabs button svg { width: 15px; height: 15px; vertical-align: -3px; }
.cur-new { display: flex; justify-content: center; gap: 6px; margin: 0 4px 10px; }
.cur-new[disabled] { opacity: .5; cursor: not-allowed; }
.cur-ask { display: grid; gap: 14px; padding: 18px; max-width: 640px; }
.cur-ask textarea { resize: vertical; }
.cur-ask .btn { justify-self: start; }
.cur-hint { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cur-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cur-status { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.cur-status.wait, .cm-tags i.wait { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.cur-status.ans, .cm-tags i.ans { background: #ff3d81; color: #fff; }
.cur-status.done, .cm-tags i.done { background: var(--ok-bg); color: var(--ok); }
.cur-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 18px 14px; color: var(--muted); font-size: 12.5px; }
.cur-locked { display: grid; justify-items: center; gap: 8px; max-width: 520px; margin: auto; padding: 40px 20px; text-align: center; }
.cur-locked > svg { width: 34px; height: 34px; color: var(--accent-ink); }
.cur-locked b { font-size: 17px; }
.cur-locked p { margin: 0; color: var(--muted); line-height: 1.55; }
.cab-panel.cm.cur-single { grid-template-columns: 1fr; }
.qa-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.qa-all svg { width: 14px; height: 14px; }

/* ===== Домашки: сроки и заморозка ===== */
.fz-bar { display: grid; gap: 8px; margin-bottom: 14px; }
.fz-bar .cab-panel-head .cab-muted { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: help; }
.fz-bar .cab-panel-head svg { width: 15px; height: 15px; }
.fz-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.fz-row.on { background: color-mix(in srgb, #2f9bff 12%, var(--surface)); }
.fz-row.off { opacity: .75; }
.fz-course { display: grid; min-width: 120px; font-weight: 800; font-size: 14px; }
.fz-course small { color: var(--muted); font-weight: 600; font-size: 12px; }
.fz-state { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 220px; font-size: 13.5px; }
.fz-state svg { width: 16px; height: 16px; flex: none; }
.fz-req { padding: 4px 10px; border-radius: 9px; background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fz-ask { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fz-ask .input { width: 240px; }
.fz-adm-req { display: grid; gap: 4px; }
.fz-adm-req small { color: var(--muted); }
@media (max-width: 860px) { .cur-quota { margin-left: 0; } }

/* ===== Кабинет преподавателя внутри общего кабинета ===== */
.lms-nav-label { margin: 14px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #94a3b8); }
.lms-nav-list > .lms-nav-label:first-child { margin-top: 2px; }
.cab-search-gap { flex: 1; }
.cab-teacher .lms-content-container.cab-content { max-width: none !important; display: block; }
.t-dash { display: grid; gap: 16px; min-width: 0; }
.t-dash-switch { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 8px 6px 12px; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--muted); }
.t-dash-switch svg { width: 15px; height: 15px; }
.t-dash-switch .select { min-width: 280px; }
/* редактор уроков — во всю ширину рабочей области */
.cab-t-studio .lms-content-container.cab-content { padding: 0 !important; }
.cab-t-studio #studio-root, .cab-t-studio #studio-root .prepka-studio-root { width: 100% !important; }
.cab-t-studio #studio-root .ls-wrap { min-height: calc(100vh - 64px) !important; border-radius: 0 !important; }
/* в редакторе уроков основное меню сворачивается в полосу с иконками */
.cab-t-studio .lms-sidebar { width: 64px; min-width: 64px; }
.cab-t-studio .lms-sidebar .lms-logo-text, .cab-t-studio .lms-sidebar .cab-side-stats, .cab-t-studio .lms-nav-label { display: none; }
.cab-t-studio .lms-brand-block { padding: 16px 0; justify-content: center; }
.cab-t-studio .lms-nav-item { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
.cab-t-studio .lms-nav-item > span:not(.lms-ico) { display: none; }
.cab-t-studio .lms-nav-item .cab-nav-badge { position: absolute; top: 2px; right: 6px; }
.cab-t-studio .lms-nav-list > .lms-nav-label + .lms-nav-item, .cab-t-studio .lms-nav-label { margin-top: 0; }
.cab-teacher .review-sub-topbar { flex-wrap: wrap; gap: 10px; }
.cab-teacher .review-sub-topbar input[type=search] { width: 100%; box-sizing: border-box; }

/* ===== Проверка ДЗ: зачтено / на доработку / не зачтено ===== */
.verdict-box { display: grid; gap: 8px; margin-top: 14px; }
.verdict-box > button { width: 100%; justify-content: center; }
.btn-reject-work { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--bad) 45%, transparent); background: transparent; color: var(--bad); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; }
.btn-reject-work:hover { background: var(--bad-bg); }
.btn-reject-work svg { width: 16px; height: 16px; }
.verdict-hint { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.verdict-hint b { color: var(--text); }
/* статус «не зачтено» — тёмно-красный, чтобы отличался от «на доработке» */
.st-rejected, .cab-chip.st-rejected { background: color-mix(in srgb, var(--bad) 85%, #000); color: #fff; }
.sub-badge-status.rejected { background: color-mix(in srgb, var(--bad) 85%, #000); color: #fff; }

/* ===== Окно проверки домашек ===== */
.cab-t-review .lms-content-container.cab-content { padding-bottom: 12px !important; }
.cab-t-review .t-dash { gap: 10px; }
.rv { display: grid; grid-template-columns: 290px minmax(0, 1fr) 340px; gap: 14px; height: calc(100vh - 166px); min-height: 520px; }
.rv > * { min-height: 0; }
/* очередь */
.rv-queue { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rv-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rv-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.rv-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
.rv-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.rv-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rv-tabs button i { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 11px; }
.rv-tabs button.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.rv-tabs button.on i { background: rgba(255, 255, 255, .2); }
.rv-list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding-right: 2px; }
.rv-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); text-align: left; color: var(--text); cursor: pointer; }
.rv-item:hover { border-color: color-mix(in srgb, #ff7a00 40%, var(--border)); }
.rv-item.on { border-color: #ff7a00; box-shadow: 0 0 0 3px rgba(255, 122, 0, .12); }
.rv-ava { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ff7a00, #ff3d81); color: #fff; font-size: 12.5px; font-weight: 800; }
.rv-ava.big { width: 44px; height: 44px; font-size: 15px; }
.rv-item-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rv-item-top { display: flex; justify-content: space-between; gap: 6px; }
.rv-item-top b { font-size: 14px; }
.rv-item-top small { flex: none; color: var(--muted); font-size: 11.5px; }
.rv-item-body > small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rv-tags:empty { display: none; }
.rv-tags i { padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 700; }
.rv-tags i.prio { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.rv-empty { display: grid; justify-items: center; gap: 4px; padding: 30px 10px; text-align: center; color: var(--muted); }
.rv-empty svg { width: 28px; height: 28px; color: var(--ok); }
.rv-empty b { color: var(--text); }
/* работа */
.rv-work { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.rv-none { align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 18px; color: var(--muted); }
.rv-none svg { width: 32px; height: 32px; }
.rv-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.rv-who { display: grid; flex: 1; min-width: 0; }
.rv-who b { font-size: 16px; }
.rv-who small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-status { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--surface-2); }
.rv-status.st-pending { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.rv-status.st-revision { background: var(--bad-bg); color: var(--bad); }
.rv-status.st-accepted { background: var(--ok-bg); color: var(--ok); }
.rv-status.st-rejected { background: color-mix(in srgb, var(--bad) 85%, #000); color: #fff; }
.rv-nav { display: flex; gap: 4px; }
.rv-icon { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 800; cursor: pointer; text-decoration: none; }
.rv-icon:hover { background: var(--surface-2); }
.rv-icon svg { width: 16px; height: 16px; }
.rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-att { font-size: 12.5px; font-weight: 800; }
.rv-attempts { display: flex; gap: 4px; }
.rv-attempts button { padding: 4px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.rv-attempts button.on { border-color: #ff7a00; color: var(--accent-ink-2); }
.rv-note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
.rv-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--muted); }
.rv-files { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.rv-file { display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 220px; padding: 5px 10px 5px 5px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; }
.rv-file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-file .f-ico { width: 30px; height: 30px; }
.rv-file.on { border-color: #ff7a00; box-shadow: 0 0 0 2px rgba(255, 122, 0, .15); }
.rv-viewer { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.rv-tools { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.rv-tools-gap { flex: 1; }
.rv-zoomlbl { min-width: 92px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; font-weight: 800; color: var(--text); cursor: pointer; }
.rv-stage { flex: 1; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--surface-2) 70%, #e2e8f0); }
.rv-img { display: grid; place-items: start center; padding: 14px; min-height: 100%; box-sizing: border-box; }
.rv-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, .12); background: #fff; transition: transform .2s; }
.rv-img.zoomed img { max-width: none; }
.rv-pdf { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.rv-text { margin: 0; padding: 16px; min-height: 100%; box-sizing: border-box; background: var(--surface); font: 13px/1.6 Consolas, "Courier New", monospace; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.rv-noview { display: grid; justify-items: center; align-content: center; gap: 8px; height: 100%; min-height: 240px; padding: 20px; text-align: center; color: var(--muted); }
.rv-noview > svg { width: 30px; height: 30px; }
.rv-noview b { color: var(--text); }
/* правая колонка */
.rv-side { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.rv-card { padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.rv-card h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rv-card h4 svg { width: 15px; height: 15px; }
.rv-hwtext { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.rv-tasks { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.rv-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rv-link svg { width: 14px; height: 14px; }
.rv-history { display: grid; gap: 10px; }
.rv-h { display: flex; gap: 10px; font-size: 13px; }
.rv-h-dot { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--border); }
.rv-h.st-accepted .rv-h-dot { background: var(--ok); }
.rv-h.st-revision .rv-h-dot { background: #f59e0b; }
.rv-h.st-rejected .rv-h-dot { background: var(--bad); }
.rv-h > div { display: grid; gap: 1px; min-width: 0; }
.rv-h small { color: var(--muted); font-size: 11.5px; }
.rv-h p { margin: 3px 0 0; color: var(--muted); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-verdict textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; }
.rv-quick { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; }
.rv-quick button { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--text); cursor: pointer; }
.rv-quick button:hover { border-color: #ff7a00; }
.rv-btns { display: grid; gap: 6px; }
.rv-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; border: 1.5px solid transparent; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.rv-btn svg { width: 17px; height: 17px; }
.rv-btn.ok { background: #16a34a; color: #fff; }
.rv-btn.ok:hover { background: #15803d; }
.rv-btn.redo { background: color-mix(in srgb, #f59e0b 14%, var(--surface)); border-color: color-mix(in srgb, #f59e0b 50%, transparent); color: #b45309; }
.rv-btn.no { background: transparent; border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
.rv-btn.no:hover { background: var(--bad-bg); }
.rv-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.rv-done { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.rv-done.st-accepted { background: var(--ok-bg); }
.rv-done.st-revision { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.rv-done.st-rejected { background: var(--bad-bg); }
.rv-done p { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.rv-done small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 1280px) { .rv { grid-template-columns: 250px minmax(0, 1fr) 300px; } }
@media (max-width: 1050px) { .rv { grid-template-columns: 1fr; height: auto; } .rv-list { max-height: 300px; } .rv-viewer { min-height: 60vh; } }
.rv-change { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.rv-change:hover { border-color: #ff7a00; }
.rv-change svg { width: 15px; height: 15px; }
.rv-cancel { margin-top: 8px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rv-edit-note { margin: 0 0 8px; }

/* ===== AI-разбор домашки ===== */
.bubble.b-msg { white-space: pre-line; }
.rv-ai { border-color: color-mix(in srgb, #7c3aed 28%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 7%, var(--surface)), var(--surface) 34%); }
.rv-ai h4 { color: #6d28d9; }
.rv-ai h4 svg { color: #7c3aed; }
.rv-ai-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.rv-ai-badge { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.rv-ai-badge.accepted { background: var(--ok-bg); color: var(--ok); }
.rv-ai-badge.revision { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.rv-ai-badge.rejected { background: var(--bad-bg); color: var(--bad); }
.rv-ai-conf, .rv-ai-model { font-size: 11px; color: var(--muted); }
.rv-ai-model { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); font-family: ui-monospace, monospace; }
.rv-ai-summary { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.rv-ai-block { margin-top: 10px; }
.rv-ai-block > b { display: block; margin-bottom: 5px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rv-ai-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.45; }
.rv-ai-list b { color: var(--text); }
.rv-ai-err { margin-bottom: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.rv-ai-err > summary { cursor: pointer; font-size: 12.5px; font-weight: 800; line-height: 1.4; }
.rv-ai-errbody { margin-top: 6px; display: grid; gap: 4px; }
.rv-ai-errbody p { margin: 0; font-size: 12.5px; line-height: 1.45; white-space: pre-line; }
.rv-ai-errbody p b { color: var(--text); }
.rv-ai-steps { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.45; }
.rv-ai-solution { margin-top: 10px; padding: 8px 10px; border: 1px dashed color-mix(in srgb, #7c3aed 35%, var(--border)); border-radius: 10px; }
.rv-ai-solution > summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: #6d28d9; }
.rv-ai-solution p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; white-space: pre-line; }
.rv-ai-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv-ai-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.rv-ai-actions .btn svg { width: 14px; height: 14px; }
.rv-ai-shared { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ok); }
.rv-ai-shared svg { width: 13px; height: 13px; }
.rv-ai-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.rv-ai-error { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 12.5px; line-height: 1.45; }
.rv-ai-error svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.rv-ai-wait { display: flex; align-items: center; gap: 9px; padding: 6px 0 2px; }
.rv-ai-wait > div { display: grid; gap: 2px; }
.rv-ai-wait b { font-size: 13px; }
.rv-ai-wait small { font-size: 11.5px; color: var(--muted); }
.rv-ai-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, #7c3aed 25%, transparent); border-top-color: #7c3aed; animation: rv-ai-spin .8s linear infinite; }
@keyframes rv-ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rv-ai-spin { animation-duration: 1.8s; } }

/* ===== Открытие уроков по расписанию ===== */
.lock-note { font-style: normal; font-weight: 700; color: #b45309; }
.cab-lesson-row.locked { opacity: .75; }
.cab-lesson-row.locked .cab-lnum { background: var(--surface-2); color: var(--muted); }
.cab-lesson-row.locked .cab-lnum svg, .program-item .num svg { width: 15px; height: 15px; }
.lesson-next-locked { display: inline-flex; align-items: center; gap: 8px; cursor: default; color: var(--muted); }
.lesson-next-locked svg { width: 16px; height: 16px; flex: none; }

/* ===== Расписание курса ===== */
.sch { display: grid; gap: 14px; }
.sch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sch-head h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.sch-head h3 svg { width: 18px; height: 18px; color: var(--accent-ink); }
.sch-head p { margin: 0; max-width: 640px; }
.sch-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sch-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sch-tool { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.sch-tool > b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.sch-tool > b svg { width: 16px; height: 16px; color: var(--accent-ink-2); }
.sch-tool small { font-size: 12px; line-height: 1.45; }
.sch-tool .btn { justify-self: start; }
.sch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.sch-row label { display: inline-flex; align-items: center; gap: 6px; }
.sch-row .input { height: 32px; padding: 0 8px; }
.sch-num { width: 64px; }
.sch-days { display: flex; gap: 4px; flex-wrap: wrap; }
.sch-days button { width: 38px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 800; color: var(--muted); cursor: pointer; }
.sch-days button.on { background: #ff7a00; border-color: #ff7a00; color: #fff; }
.sch-summary { color: var(--muted); font-size: 13px; }
.sch-summary b { color: #b45309; }
.sch-table { display: grid; gap: 8px; }
.sch-month { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.sch-month > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.sch-month > summary::-webkit-details-marker { display: none; }
.sch-month > summary b { font-size: 15px; }
.sch-month > summary span { color: var(--muted); font-size: 12.5px; }
.sch-month[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.sch-line { display: grid; grid-template-columns: 34px minmax(0, 1fr) 210px 170px; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.sch-line:last-child { border-bottom: 0; }
.sch-line.past { background: color-mix(in srgb, var(--ok-bg) 45%, transparent); }
.sch-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; font-weight: 800; }
.sch-title { display: grid; min-width: 0; }
.sch-title b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-title small { color: var(--muted); font-size: 11.5px; }
.sch-line .input { height: 32px; padding: 0 8px; width: 100%; box-sizing: border-box; }
.sch-after { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sch-after .select { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .sch-tools { grid-template-columns: 1fr; } .sch-line { grid-template-columns: 34px minmax(0, 1fr); } .sch-line .input, .sch-after { grid-column: 2; } }
.sch-line { grid-template-columns: 34px minmax(0, 1fr) 200px 250px; }
.sch-after { display: flex; align-items: center; gap: 8px; }
.sch-prev, .sch-afn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.sch-prev.on { color: #b45309; font-weight: 700; }
.sch-afn input { width: 56px; height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }

/* ===== Расписание курса v2: лента по месяцам + панель инструментов ===== */
.sch { display: grid; gap: 16px; padding-bottom: 70px; }
.sch-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sch-top h3 { margin: 0 0 4px; font-size: 22px; }
.sch-top p { margin: 0; max-width: 680px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.sch-top .select { min-width: 260px; }
.sch-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sch-stat { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.sch-stat > svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, #ff7a00 12%, transparent); color: var(--accent-ink-2); box-sizing: border-box; }
.sch-stat > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sch-stat small { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sch-stat b { font-size: 18px; line-height: 1.25; }
.sch-stat span { color: var(--muted); font-size: 12.5px; }
.sch-bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.sch-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff7a00, #ff3d81); }
.sch-bar.sm { width: 90px; margin: 0; flex: none; }
.sch-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
/* лента */
.sch-timeline { display: grid; gap: 10px; min-width: 0; }
.sch-month { border-radius: 20px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.sch-month.now { border-color: color-mix(in srgb, #ff7a00 45%, var(--border)); }
.sch-month > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; user-select: none; }
.sch-month > summary::-webkit-details-marker { display: none; }
.sch-month > summary:hover { background: var(--surface-2); }
.sch-m-name { font-family: var(--font-d); font-size: 17px; font-weight: 800; }
.sch-now { padding: 2px 8px; border-radius: 99px; background: #ff7a00; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; }
.sch-m-meta { flex: 1; color: var(--muted); font-size: 12.5px; }
.sch-month > summary > svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.sch-month[open] > summary > svg { transform: rotate(180deg); }
.sch-list { position: relative; padding: 4px 18px 14px; }
.sch-item { position: relative; display: grid; grid-template-columns: 74px 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px 0; }
/* вертикальная линия ленты */
.sch-item::before { content: ''; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.sch-item:first-child::before { top: 22px; }
.sch-item:last-child::before { bottom: calc(100% - 22px); }
.sch-item.chain::before { background: linear-gradient(#f59e0b, #f59e0b); }
.sch-when { display: grid; justify-items: end; padding-top: 6px; text-align: right; }
.sch-when b { font-family: var(--font-d); font-size: 22px; line-height: 1; }
.sch-when b.none { color: var(--muted); }
.sch-when small { color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sch-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 8px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); }
.sch-dot svg { width: 12px; height: 12px; }
.sch-item.past .sch-dot { border-color: #16a34a; background: #16a34a; color: #fff; }
.sch-item.next .sch-dot { border-color: #ff7a00; box-shadow: 0 0 0 4px color-mix(in srgb, #ff7a00 20%, transparent); }
.sch-card { display: grid; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.sch-item:hover .sch-card, .sch-card:focus-within { border-color: var(--border); background: var(--surface-2); }
.sch-item.next .sch-card { border-color: color-mix(in srgb, #ff7a00 40%, transparent); background: color-mix(in srgb, #ff7a00 5%, var(--surface)); }
.sch-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sch-card-top .sch-n { flex: none; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 7px; background: var(--surface-2); font-size: 11.5px; font-weight: 800; color: var(--muted); }
.sch-item.past .sch-card-top .sch-n { background: var(--ok-bg); color: var(--ok); }
.sch-card-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.sch-tags { display: flex; gap: 4px; flex: none; }
.sch-tags i { padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 700; }
.sch-tags i.next { background: #ff7a00; color: #fff; }
.sch-tags i.free { background: var(--ok-bg); color: var(--ok); }
.sch-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sch-date { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.sch-date svg { width: 14px; height: 14px; color: var(--muted); }
.sch-date input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); }
.sch-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sch-chip svg { width: 14px; height: 14px; }
.sch-chip input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.sch-chip.on { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); color: #b45309; }
.sch-chip.off { opacity: .45; cursor: default; }
.sch-chip:not(.off):hover { border-color: #f59e0b; }
.sch-chip.num input { width: 46px; height: 24px; padding: 0 4px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); text-align: center; font: inherit; font-weight: 800; color: var(--text); }
.sch-ref { color: #b45309; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* панель инструментов */
.sch-side { position: sticky; top: 76px; display: grid; gap: 10px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 2px; }
.sch-tool { display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.sch-tool h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; }
.sch-tool h4 svg { width: 16px; height: 16px; color: var(--accent-ink-2); }
.sch-tool p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sch-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sch-fields:has(> label:only-child) { grid-template-columns: 1fr; }
.sch-fields label { display: grid; gap: 4px; }
.sch-fields label > span { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.sch-fields .input { width: 100%; box-sizing: border-box; height: 34px; }
.sch-inline { display: flex !important; align-items: center; gap: 8px; }
.sch-inline .input { width: 72px !important; flex: none; }
.sch-inline span { color: var(--muted); font-size: 12.5px; font-weight: 600 !important; }
.sch-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sch-days button { height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 800; color: var(--muted); cursor: pointer; }
.sch-days button.on { background: #ff7a00; border-color: #ff7a00; color: #fff; }
.sch-wide { width: 100%; justify-content: center; }
.sch-btns { display: grid; gap: 6px; }
.sch-btns .btn { justify-content: center; }
.sch-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--bad) 40%, transparent); background: transparent; color: var(--bad); font-size: 13px; font-weight: 700; cursor: pointer; }
.sch-danger svg { width: 15px; height: 15px; }
.sch-danger:hover { background: var(--bad-bg); }
/* плашка сохранения */
.sch-savebar { position: fixed; left: 50%; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 16px; background: #111827; color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); transform: translate(-50%, 140%); transition: transform .25s ease; }
.sch-savebar.on { transform: translate(-50%, 0); }
.sch-savebar > svg { width: 18px; height: 18px; color: #f59e0b; }
.sch-savebar span { font-size: 14px; font-weight: 700; margin-right: 6px; }
.sch-savebar .btn-ghost { color: #fff; }
@media (max-width: 1200px) { .sch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .sch-body { grid-template-columns: 1fr; } .sch-side { position: static; max-height: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 640px) { .sch-item { grid-template-columns: 54px 18px minmax(0, 1fr); gap: 8px; } .sch-item::before { left: 70px; } .sch-stats { grid-template-columns: 1fr; } }

/* ===== Истории учеников: карусель ===== */
.stories2 { overflow: visible; }
.st2-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.st2-head h2 { margin: 10px 0 6px; font-size: clamp(30px, 4vw, 46px); }
.st2-head p { margin: 0; color: var(--muted); }
.st2-sum { display: flex; align-items: center; gap: 22px; }
.st2-sum > div:not(.st2-nav) { display: grid; }
.st2-sum b { font-family: var(--font-d); font-size: 30px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st2-sum span { color: var(--muted); font-size: 13px; font-weight: 600; }
.st2-nav { display: flex; gap: 8px; }
.st2-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background .15s, transform .15s; }
.st2-arrow:hover { background: var(--surface-2); transform: translateY(-1px); }
.st2-arrow svg { width: 18px; height: 18px; }
.st2-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 32px) / 3)); gap: 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: thin; }
.st2-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 26px; border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.st2-result { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.st2-score { display: flex; align-items: center; gap: 10px; font-family: var(--font-d); line-height: 1; }
.st2-score svg { width: 20px; height: 20px; color: var(--muted); }
.st2-from { font-size: 28px; color: var(--muted); }
.st2-to { font-size: 52px; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st2-meta { display: grid; justify-items: end; gap: 4px; text-align: right; }
.st2-delta { padding: 4px 10px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-size: 13px; font-weight: 800; white-space: nowrap; }
.st2-meta small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.st2-quote { position: relative; flex: 1; margin: 0; padding-top: 22px; font-size: 16px; line-height: 1.6; color: var(--text); }
.st2-quote::before { content: '“'; position: absolute; top: -14px; left: -4px; font-family: Georgia, serif; font-size: 64px; line-height: 1; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; }
.st2-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.st2-ava { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--g); color: #fff; font-weight: 800; font-size: 16px; }
.st2-who div { display: grid; }
.st2-who b { font-size: 15px; }
.st2-who small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 900px) { .st2-track { grid-auto-columns: minmax(280px, 82%); } .st2-to { font-size: 44px; } }
/* карточка истории: счёт — строкой, под ним прирост и экзамен */
.st2-track { grid-auto-columns: calc((100% - 32px) / 3); }
.st2-result { flex-direction: column; align-items: flex-start; gap: 10px; }
.st2-meta { display: flex; align-items: center; gap: 8px; justify-items: start; text-align: left; flex-wrap: wrap; }
.st2-to { font-size: 56px; }
@media (max-width: 1100px) { .st2-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 700px) { .st2-track { grid-auto-columns: 85%; } }
.st2-track { scrollbar-width: none; }
.st2-track::-webkit-scrollbar { display: none; }

/* ===== Карточка курса v2 ===== */
.cc2 { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 24px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation: cc2-in .5s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes cc2-in { from { opacity: 0; transform: translateY(10px); } }
/* мягкое пятно цвета предмета в углу */
.cc2::before { content: ''; position: absolute; z-index: -1; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--g); opacity: .12; filter: blur(8px); transition: opacity .2s, transform .3s; }
.cc2:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(17, 24, 39, .1); border-color: color-mix(in srgb, var(--text) 18%, var(--border)); }
.cc2:hover::before { opacity: .22; transform: scale(1.15); }
.cc2:focus-visible { outline: 3px solid color-mix(in srgb, #ff3d81 50%, transparent); outline-offset: 2px; }
.cc2-head { display: flex; align-items: center; gap: 10px; }
.cc2-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--g); color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }
.cc2-ico svg { width: 22px; height: 22px; }
.cc2-tags { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.cc2-tags b { font-size: 13px; letter-spacing: .02em; }
.cc2-tags span { color: var(--muted); font-size: 12px; }
.cc2-badge { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: var(--text); color: var(--surface); font-size: 11.5px; font-weight: 800; }
.cc2-badge.own { display: inline-flex; align-items: center; gap: 4px; background: var(--ok-bg); color: var(--ok); }
.cc2-badge svg { width: 12px; height: 12px; }
.cc2-body { display: grid; gap: 6px; flex: 1; }
.cc2-subj { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.cc2 h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.cc2-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.cc2-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cc2-meta svg { width: 14px; height: 14px; }
.cc2-teacher i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text); font-style: normal; font-size: 10px; font-weight: 800; }
.cc2-prog { display: grid; gap: 4px; }
.cc2-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.cc2-bar i { display: block; height: 100%; border-radius: inherit; background: var(--g); }
.cc2-prog small { color: var(--muted); font-size: 12px; }
.cc2-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.cc2-price { display: flex; align-items: baseline; gap: 4px; flex: 1; }
.cc2-price b { font-family: var(--font-d); font-size: 22px; }
.cc2-price small { color: var(--muted); font-size: 12.5px; }
.cc2-trial { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, #c3f53c 30%, var(--surface)); color: var(--text); font-size: 12px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.cc2-trial:hover { background: color-mix(in srgb, #c3f53c 55%, var(--surface)); }
.cc2-trial svg { width: 13px; height: 13px; }
.cc2-cont { flex: 1; font-size: 13.5px; font-weight: 800; color: var(--text); text-decoration: none; }
.cc2-go { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); color: var(--text); transition: background .2s, color .2s, transform .2s; }
.cc2-go svg { width: 17px; height: 17px; }
.cc2:hover .cc2-go { background: var(--g); color: #fff; transform: translateX(2px); }
.cc2-price { white-space: nowrap; }
.cc2-trial { justify-self: start; margin-top: 6px; }

/* ===== Страница каталога курсов ===== */
.courses-page { padding-top: 28px; }
.courses-page .section { padding-top: 8px; }
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 13.5px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); }


/* ===== Web Interface Guidelines: доступность, фокус, касания ===== */
/* видимый фокус с клавиатуры для всех интерактивных элементов (мышью не появляется) */
:where(a, button, summary, select, [role="button"], [role="link"], [role="tab"], [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid #ff3d81 !important; outline-offset: 2px;
}
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"]):focus-visible { outline: 2px solid color-mix(in srgb, #ff3d81 55%, transparent); outline-offset: 1px; }
/* без задержки двойного тапа и без серой вспышки на мобильных */
a, button, summary, label, select, input, textarea, [role="button"], [data-action], [data-href] { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
/* заголовки без «висячих» слов */
h1, h2, h3, .section-head h2 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
/* прокрутка внутри окон и панелей не утекает на страницу */
.modal, .modal-body, .qa-drawer, .qa-dbody, .cm-list, .cm-side, .rv-list, .rv-side, .rv-stage, .sch-side, .lms-sidebar, #mobile-drawer, .mega-menu { overscroll-behavior: contain; }
/* цифры, которые сравнивают, — одинаковой ширины */
.sch-stat b, .sch-when b, .cc2-price b, .st2-score, .t-price, .tc-table, .cab-stat b, .rv-tabs i, .td-count { font-variant-numeric: tabular-nums; }
/* нативные списки в тёмной теме Windows */
:where(select, .select) { background-color: var(--surface); color: var(--text); }
/* якоря не прячутся под липкой шапкой */
:where([id]) { scroll-margin-top: 84px; }


/* ===================================================================
   impeccable: adapt · colorize · harden · quieter · animate · polish
   =================================================================== */

/* --- adapt: шапка на телефоне — меню всегда видно --- */
@media (max-width: 520px) {
  .topbar-phone { display: none !important; }
  .topbar-login-btn { width: 40px; height: 40px; padding: 0 !important; justify-content: center; }
  .topbar-login-btn span { display: none; }
  .topbar-actions { gap: 6px; flex-shrink: 0; }
  .logo-text, .logo span:not(.logo-mark) { font-size: 20px; }
}
/* --- adapt: цели под палец не меньше 44px на сенсорных экранах --- */
@media (pointer: coarse) {
  .icon-btn, .topbar-login-btn, .mobile-menu-btn, .rv-icon, .st2-arrow, .cc2-go, .qa-x, .lse-x,
  .chip, .seg button, .cab-tabs button, .cab-seg button, .rv-tabs button, .sch-days button, .sch-chip,
  .btn-sm, .criteria-pt-btn, .rv-file, .cur-new, .cm-item, .td-btn { min-height: 44px; }
  .icon-btn, .rv-icon, .st2-arrow, .qa-x, .mobile-menu-btn { min-width: 44px; }
}

/* --- colorize: белый текст только на глубоком градиенте (AA ≥4.5:1) --- */
.btn-primary, .logo-mark, .cab-ava, .rv-ava, .qa-ava, .cur-new.btn-primary, .sch-days button.on, .sch-now, .cab-avatar { background: var(--grad-ink); }
.btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(225, 29, 106, .55); }
/* аватары отзывов на светлых градиентах предметов — тёмная буква */
.st2-ava { color: #10131a; }
/* салатовые подписи и ссылки — тёмно-оливковый текст */
.cc2-trial, .pill-trial, .trial-badge, .badge.trial-badge { color: #3f5a0e; }
.cc2-trial svg { color: inherit; }
/* соцсети в подвале: фирменные цвета, но читаемые */
.soc-tg, a[href*="t.me"] { color: #0b6fa0; }
.soc-vk, a[href*="vk.com"] { color: #1660c7; }
/* плашка про cookie: ссылка читается на полупрозрачном фоне */
.cookie a, .cookie-banner a, [class*="cookie"] a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
::placeholder { color: #6b6b6b; opacity: 1; }
[data-theme="dark"] ::placeholder { color: #9a8f92; }

/* --- quieter: цветные полоски и градиентный текст убраны, акцент — цветом и весом --- */
.proof-card::after, .st2-card::before { content: none !important; }
.grad-text { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #e11d6a !important; }
.grad-text.g2 { color: #c2410c !important; }
.grad-text.g3 { color: #15803d !important; }
[data-theme="dark"] .grad-text { color: #ff86b0 !important; }
[data-theme="dark"] .grad-text.g2 { color: #fdba74 !important; }
[data-theme="dark"] .grad-text.g3 { color: #86efac !important; }
.st2-sum b, .st2-to, .st2-quote::before, .not-found .score-big { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--accent-ink) !important; }
.st2-quote::before { opacity: .35; }
.proof-num { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--text) !important; }
/* врезки, цитаты, выбранные пункты — без толстой полосы сбоку */
.callout-box.cb-warning, .callout-box.cb-rule, .callout-box.cb-danger { border-left: 0 !important; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.callout-box.cb-warning { border-color: #fed7aa; } .callout-box.cb-rule { border-color: #bbf7d0; } .callout-box.cb-danger { border-color: #fecaca; }
.callout-sample-box, .remediation-drawer-box, .ps-block-callout, .lms-curator-quote { border-left-width: 1px !important; }
.story-quote, .cab-quote { border-left: 0 !important; padding-left: 0 !important; }
.chat-student-item.active { border-left: 0 !important; background: color-mix(in srgb, #ff7a00 9%, var(--surface)); }
.cm-item.on { box-shadow: 0 2px 10px rgba(0, 0, 0, .06) !important; outline: 1px solid color-mix(in srgb, #ff3d81 35%, transparent); }
#studio-root .ls-student-callout, .ls-rule-prev { border-left-width: 1px !important; }
/* бесконечные декоративные анимации: блик на полосках прогресса и пульсирующая точка */
.bar i::after { animation: none !important; display: none; }
.ps-pulse-dot { animation: none !important; }

/* --- typeset: длина строки в подзаголовках --- */
.hero-main p, .section-head p, .lead { max-width: 62ch; }
.exam-tile { color: inherit; text-decoration: none; }
.exam-tile h2 { font-size: 30px; margin: 0; }

/* --- polish: «поверхности браузера» в цветах продукта --- */
::selection { background: color-mix(in srgb, #ff3d81 24%, transparent); color: inherit; }
input, textarea, [contenteditable="true"] { caret-color: #e11d6a; }
a { text-underline-offset: 3px; }
html { scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 32%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

/* typeset: ответы в FAQ — удобная длина строки */
.faq-ans p { max-width: 68ch; }
/* плитки экзаменов: иконка рядом с заголовком, а не плашкой над ним */
.exam-tile .ex-head { display: flex; align-items: center; gap: 12px; }
.exam-tile .ex-head .ex-emoji { width: 44px; height: 44px; flex: none; margin: 0; }
.exam-tile .ex-head .ex-emoji svg { width: 22px; height: 22px; }

/* истории-примеры честно подписаны */
.st2-demo { align-self: flex-start; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }


/* ===== уведомления ===== */
.avatar { position: relative; }
.avatar-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: #e11d6a; border: 2px solid var(--surface); }
.um-badge { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 99px; background: #e11d6a; color: #fff; font-size: 11.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.ntf { min-width: min(440px, 100%); }
.ntf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ntf-head h2 { margin: 0; font-size: 22px; }
.ntf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: min(62vh, 560px); overflow: auto; overscroll-behavior: contain; }
.ntf-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .15s var(--ease-out, ease); }
a.ntf-item:hover { background: var(--surface-2); }
.ntf-item.new { background: color-mix(in srgb, #ff3d81 7%, var(--surface)); }
.ntf-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.ntf-ico svg { width: 18px; height: 18px; }
.ntf-item.new .ntf-ico { color: var(--accent-ink); }
.ntf-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ntf-body b { font-size: 15px; }
.ntf-body span { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.ntf-body small { color: var(--faint); font-size: 12.5px; }
.ntf-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #e11d6a; }
.ntf-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; text-align: center; color: var(--muted); }
.ntf-empty svg { width: 34px; height: 34px; opacity: .5; }
.ntf-empty b { color: var(--text); font-size: 16px; }
.cab-stat b small { font-size: .55em; color: var(--muted); font-weight: 700; }

/* ===== загрузка файлов: настоящий прогресс ===== */
.f-up.live i { animation: none; width: 0; transition: width .2s linear; }
.file-row.f-err { border-color: #fecaca; background: color-mix(in srgb, #ef4444 5%, var(--surface)); }
.file-row.f-err .f-state { color: #b91c1c; }
[data-theme="dark"] .file-row.f-err .f-state { color: #fca5a5; }

.cab-side-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }


/* ===== переписка по домашке ===== */
.hw-msg { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.hw-msg-lbl { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.hw-msg-lbl svg { width: 16px; height: 16px; color: var(--muted); }
.hw-msg .textarea { min-height: 64px; }
.hw-msg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hw-msg-row .muted { flex: 1; }
.bubble.b-msg { border-style: dashed; }
.rv-tags i.msg { background: color-mix(in srgb, #ff3d81 12%, var(--surface)); color: var(--accent-ink); display: inline-flex; align-items: center; gap: 4px; }
.rv-tags i.msg svg { width: 12px; height: 12px; }
.rv-h-msg.from-st .rv-h-dot { background: #e11d6a; }
.rv-h-files a { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 13px; }
.rv-h-files svg { width: 13px; height: 13px; }
.rv-msgcard { display: grid; gap: 8px; }
.rv-msgcard .btn { justify-self: end; }
.rv-new { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #e11d6a; color: #fff; font-size: 11px; font-weight: 800; }


/* ===== успеваемость ===== */
.cab-side-h { display: block; margin: 2px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cab-side-row b small { font-weight: 600; color: var(--muted); }
.cab-side-row span svg { width: 14px; height: 14px; }
.perf-cell { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.perf-cell span { display: inline-flex; align-items: center; gap: 4px; }
.perf-cell svg { width: 13px; height: 13px; color: var(--muted); }
.perf-cell .perf-low { color: #b45309; font-weight: 700; }
[data-theme="dark"] .perf-cell .perf-low { color: #fdba74; }


/* ===== раздел «Успеваемость» ===== */
.pf { display: grid; gap: 18px; }
.pf-course { margin: 0 0 4px; font-weight: 700; }
.pf-courses { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pf-courses button { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-weight: 700; color: var(--muted); }
.pf-courses button.on { background: var(--text); color: var(--bg, #fff); border-color: var(--text); }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pf-card { position: relative; display: grid; gap: 6px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.pf-card-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.pf-card-ico svg { width: 20px; height: 20px; }
.pf-card-val { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 6px; }
.pf-card-val small { font-size: 16px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.pf-card-lbl { font-weight: 800; }
.pf-card > small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.pf-bar { display: block; height: 6px; border-radius: 6px; background: var(--surface-3, var(--surface-2)); overflow: hidden; margin-top: 4px; }
.pf-bar i { display: block; height: 100%; border-radius: inherit; background: #64748b; }
.pf-card.good .pf-bar i { background: #16a34a; } .pf-card.good .pf-card-ico { color: #15803d; background: color-mix(in srgb, #16a34a 12%, var(--surface)); }
.pf-card.low .pf-bar i { background: #ea580c; } .pf-card.low .pf-card-ico { color: #c2410c; background: color-mix(in srgb, #ea580c 12%, var(--surface)); }
.pf-split { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
.pf-split span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pf-split b { color: var(--text); font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.ok { background: #16a34a; } .dot.warn { background: #f59e0b; } .dot.bad { background: #dc2626; } .dot.muted { background: #94a3b8; }
.pf-list { padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.pf-list header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-list h3 { margin: 0; font-size: 18px; }
.pf-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-filters button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: transparent; font-weight: 700; font-size: 13px; color: var(--muted); }
.pf-filters button.on { background: var(--text); color: var(--bg, #fff); border-color: var(--text); }
.pf-filters i { font-style: normal; opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }
.pf-head, .pf-r { display: grid; grid-template-columns: minmax(200px, 2.2fr) minmax(150px, 1.4fr) 90px 90px 150px; gap: 12px; align-items: center; }
.pf-head { padding: 0 12px 8px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.pf-r { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.pf-r:last-child { border-bottom: 0; }
.pf-c-lesson a { color: inherit; font-weight: 700; text-decoration: none; }
.pf-c-lesson a:hover { text-decoration: underline; }
.pf-c-lesson, .pf-c-res { display: grid; gap: 2px; min-width: 0; }
.pf-c-lesson small, .pf-c-res small { color: var(--muted); font-size: 12.5px; }
.pf-c-due, .pf-c-done { font-variant-numeric: tabular-nums; }
.pf-lbl { display: none; }
.pf-score { font-size: 17px; font-variant-numeric: tabular-nums; }
.pf-score.ok { color: #15803d; } .pf-score.bad { color: #c2410c; }
.pf-reset { justify-self: start; margin-top: 6px; font-size: 12px; padding: 6px 10px; }
.pf-chip { justify-self: start; display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.pf-chip.ok { background: #dcfce7; color: #166534; } .pf-chip.warn { background: #fef3c7; color: #92400e; } .pf-chip.bad { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .pf-chip.ok { background: #14532d; color: #bbf7d0; } [data-theme="dark"] .pf-chip.warn { background: #78350f; color: #fde68a; } [data-theme="dark"] .pf-chip.bad { background: #7f1d1d; color: #fecaca; }
.pf[data-f="problem"] .pf-r:not(.is-problem), .pf[data-f="quiz"] .pf-r:not(.is-quiz), .pf[data-f="file"] .pf-r:not(.is-file) { display: none; }
.pf-none { display: none; margin: 12px; color: var(--muted); }
.pf[data-f="problem"] .pf-rows:not(:has(.is-problem)) + .pf-none, .pf[data-f="quiz"] .pf-rows:not(:has(.is-quiz)) + .pf-none, .pf[data-f="file"] .pf-rows:not(:has(.is-file)) + .pf-none { display: block; }
.pf-empty { margin: 8px 0 0; }
.pf-how { padding: 14px 18px; border-radius: 16px; background: var(--surface-2); font-size: 14px; }
.pf-how summary { cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pf-how summary svg { width: 16px; height: 16px; color: var(--muted); }
.pf-how ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); }
.pf-how b { color: var(--text); }
.cab-stat-link { color: inherit; text-decoration: none; }
.cab-stat-link:hover { background: rgba(255, 255, 255, .26); }
.modal.modal-wide { width: min(1080px, calc(100vw - 32px)); max-width: none; }
.pf-modal h2 { margin: 0; }
.pf-modal > p { margin: 2px 0 16px; }
@media (max-width: 860px) {
  .pf-head { display: none; }
  .pf-r { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .pf-c-lesson { grid-column: 1 / -1; }
  .pf-lbl { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
  .pf-c-time { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pf-r { grid-template-columns: auto auto 1fr; gap: 6px 16px; align-items: end; }
  .pf-c-lesson, .pf-c-res { grid-column: 1 / -1; }
  .pf-c-time { grid-column: auto; justify-self: end; }
  .pf-c-res { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .pf-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pf-card { padding: 14px; border-radius: 16px; }
  .pf-card-ico { width: 30px; height: 30px; border-radius: 9px; }
  .pf-card-val { font-size: 26px; }
  .pf-card-lbl { font-size: 13.5px; line-height: 1.25; }
  .pf-card > small { font-size: 12px; }
  .pf-list { padding: 14px; }
}


/* ===== успеваемость: панели, календарь, графики ===== */
.pf-box { padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pf-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 17px; }
.pf-box h3 svg { width: 18px; height: 18px; color: var(--muted); }
.pf-box h3 small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-empty-box { display: grid; place-items: center; gap: 6px; min-height: 150px; color: var(--muted); font-size: 14px; text-align: center; }
.pf-empty-box svg { width: 28px; height: 28px; opacity: .45; }
/* что сделать */
.pf-todo-g + .pf-todo-g { margin-top: 12px; }
.pf-todo-g h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pf-todo-g h5 i { font-style: normal; margin-left: 4px; padding: 0 7px; border-radius: 99px; background: var(--surface-2); color: var(--text); }
.pf-todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-todo li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.pf-todo li a { color: inherit; text-decoration: none; min-width: 0; }
.pf-todo li a:hover b { text-decoration: underline; }
.pf-todo li b { font-weight: 700; overflow-wrap: anywhere; }
.pf-allgood { display: grid; justify-items: center; gap: 4px; padding: 26px 10px; text-align: center; color: var(--muted); }
.pf-allgood svg { width: 30px; height: 30px; color: #16a34a; }
.pf-allgood b { color: var(--text); font-size: 16px; }
/* бублик */
.pf-donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pf-donut svg { width: 150px; height: 150px; flex: none; }
.pf-dn-n { font-size: 24px; font-weight: 900; fill: var(--text); }
.pf-dn-l { font-size: 9.5px; fill: var(--muted); }
.pf-donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 170px; }
.pf-donut li { display: grid; grid-template-columns: 12px 1fr auto 40px; align-items: center; gap: 8px; font-size: 14px; }
.pf-donut li i { width: 12px; height: 12px; border-radius: 4px; }
.pf-donut li b { font-variant-numeric: tabular-nums; }
.pf-donut li span { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
/* календарь */
.pfc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 20px; min-width: 0; }
.pfc-cal { min-width: 0; }
.pfc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pfc-head b { font-size: 16px; min-width: 140px; text-align: center; }
.pfc-nav, .pfc-today { display: grid; place-items: center; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13px; }
.pfc-nav svg { width: 16px; height: 16px; }
.pfc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pfc-wd { text-align: center; font-size: 11.5px; font-weight: 800; color: var(--muted); padding-bottom: 4px; }
.pfc-cell { position: relative; display: grid; align-content: space-between; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px; border-radius: 12px; border: 1px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.pfc-blank { min-height: 52px; }
.pfc-cell b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pfc-cell:hover { border-color: var(--border); }
.pfc-cell.k-missed { background: color-mix(in srgb, #dc2626 12%, var(--surface)); }
.pfc-cell.k-due { background: color-mix(in srgb, #2563eb 11%, var(--surface)); }
.pfc-cell.k-late { background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.pfc-cell.k-done { background: color-mix(in srgb, #16a34a 11%, var(--surface)); }
.pfc-cell.today b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--surface); }
.pfc-cell.sel { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.pfc-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 7px; max-width: 100%; }
.pfd { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pfd.missed { background: #dc2626; } .pfd.due { background: #2563eb; } .pfd.late { background: #f59e0b; } .pfd.done { background: #16a34a; } .pfd.open { background: #94a3b8; }
.pfc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pfc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pfc-day { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); align-self: start; }
.pfc-day h4 { margin: 0 0 10px; font-size: 15px; text-transform: none; }
.pfc-day h4::first-letter { text-transform: uppercase; }
.pfc-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pfc-day li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.35; }
.pfc-day li .pfd { transform: translateY(-1px); }
.pfc-day li a { color: inherit; }
.pfc-day li.k-missed { color: #b91c1c; font-weight: 700; }
[data-theme="dark"] .pfc-day li.k-missed { color: #fca5a5; }
.pfc-day p { margin: 0; font-size: 14px; }
/* графики */
.pf-svg { width: 100%; height: auto; display: block; overflow: visible; }
.pf-grid { stroke: var(--border); stroke-width: 1; }
.pf-ax { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.pf-thr { stroke: #f59e0b; stroke-width: 1.5; stroke-dasharray: 5 4; }
.pf-thr-l { font-size: 10.5px; fill: #b45309; font-weight: 700; }
.pf-line { fill: none; stroke: #e11d6a; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pf-area { fill: color-mix(in srgb, #e11d6a 10%, transparent); stroke: none; }
.pf-pt { stroke: var(--surface); stroke-width: 2; }
.pf-pt.ok { fill: #16a34a; } .pf-pt.bad { fill: #ea580c; }
.pf-cap { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.pf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.pf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pf-legend span i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* тепловая карта */
.pfh { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.pfh-days { display: grid; grid-template-rows: 16px repeat(7, 13px); gap: 3px; font-size: 10px; color: var(--muted); }
/* строки задаём явно: иначе автораскладка ставит «ср/пт/вс» на строку выше */
.pfh-days span:nth-child(1) { grid-row: 2; }
.pfh-days span:nth-child(2) { grid-row: 3; }
.pfh-days span:nth-child(3) { grid-row: 4; }
.pfh-days span:nth-child(4) { grid-row: 5; }
.pfh-days span:nth-child(5) { grid-row: 6; }
.pfh-days span:nth-child(6) { grid-row: 7; }
.pfh-days span:nth-child(7) { grid-row: 8; }
.pfh-main { display: grid; grid-template-rows: 16px auto; gap: 3px; }
.pfh-months { display: grid; grid-template-columns: repeat(26, 13px); column-gap: 3px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.pfh-grid { display: grid; grid-template-columns: repeat(26, 13px); gap: 3px; }
.pfh-col { display: grid; grid-template-rows: repeat(7, 13px); gap: 3px; }
.pfh-grid i, .pfh-legend i { display: block; width: 13px; height: 13px; border-radius: 3px; }
.pfh-legend i { display: inline-block; }
.h0 { background: var(--surface-2); } .h1 { background: #fbcfe0; } .h2 { background: #f472a6; } .h3 { background: #e11d6a; } .h4 { background: #9d0f48; } .hf { background: transparent; outline: 1px dashed var(--border); outline-offset: -1px; }
[data-theme="dark"] .h1 { background: #5b1c35; } [data-theme="dark"] .h2 { background: #9d2459; }
@media (max-width: 1000px) {
  .pf-grid2 { grid-template-columns: 1fr; }
  .pfc { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pf-box { padding: 14px; border-radius: 16px; }
  .pfc-head { gap: 6px; }
  .pfc-head b { flex: 1 1 auto; min-width: 0; font-size: 15px; text-align: center; }
  .pfc-nav, .pfc-today { height: 32px; min-width: 32px; padding: 0 8px; }
  /* «Сегодня» — отдельной строкой, иначе шапка календаря шире карточки */
  .pfc-today { flex: 1 1 100%; }
  .pfc-cell { min-height: 42px; border-radius: 9px; padding: 4px 1px; }
  .pfc-cell b { font-size: 12.5px; }
  .pfd { width: 6px; height: 6px; }
  .pfc-dots { gap: 2px; }
  .pfc-day li { min-width: 0; }
  .pfc-day li span { overflow-wrap: anywhere; }
  .pf-donut svg { width: 120px; height: 120px; }
}
@media (max-width: 520px) { .pfc-blank { min-height: 42px; } }

/* тепловая карта: крупнее клетки */
.pfh { --c: 17px; --g: 4px; }
.pfh-days { grid-template-rows: 16px repeat(7, var(--c)); gap: var(--g); align-items: center; }
.pfh-main { gap: var(--g); }
.pfh-months, .pfh-grid { grid-template-columns: repeat(26, var(--c)); column-gap: var(--g); }
.pfh-grid { gap: var(--g); }
.pfh-col { grid-template-rows: repeat(7, var(--c)); gap: var(--g); }
.pfh-grid i { width: var(--c); height: var(--c); border-radius: 4px; }
/* на телефоне карта целиком влезает в карточку, без горизонтальной прокрутки */
@media (max-width: 520px) { .pfh { --c: 9px; --g: 1.5px; } .pfh-grid i { border-radius: 2px; } }

.pfh-wrap { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.pfh-wrap .pfh { flex: none; max-width: 100%; }
.pfr { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pfr li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pfr b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pfr span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }

.pfd.plan { background: #7c3aed; }
.pfc-cell.k-plan { background: color-mix(in srgb, #7c3aed 10%, var(--surface)); }

.pf-bar-q.ok { fill: #16a34a; } .pf-bar-q.bad { fill: #ea580c; }
.pf-val { font-size: 12px; font-weight: 800; fill: var(--text); font-variant-numeric: tabular-nums; }
.pf-box h3 { flex-wrap: wrap; row-gap: 2px; }
.pf-box h3 small { white-space: nowrap; }

/* тесты: столбики + линия */
.pfq-legend { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.pfq-legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.pfq-legend li b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.pfq-legend i, .pfq-tip i { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
i.avg { background: #f9a8c9; } i.me { background: #ea580c; } i.thr { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed #f59e0b; }
.pfq-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.pfq { position: relative; }
.pf-grid.dash { stroke-dasharray: 3 4; }
.pfq-band { fill: transparent; transition: fill .15s; }
.pfq-col.on .pfq-band { fill: color-mix(in srgb, #7c3aed 9%, transparent); }
.pfq-avg { fill: #f9c4d8; }
.pfq-me.ok { fill: #ea580c; } .pfq-me.bad { fill: #f59e0b; opacity: .75; }
.pfq-col.on .pfq-avg { fill: #f472a6; }
.pfq-line { fill: none; stroke: #e11d48; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.pfq-dot { fill: #e11d48; stroke: var(--surface); stroke-width: 2.5; pointer-events: none; }
.pfq-tip { position: absolute; top: 4px; transform: translateX(-50%); z-index: 2; display: grid; gap: 4px; width: 220px; padding: 10px 12px; border-radius: 12px; background: var(--text); color: var(--surface); font-size: 12.5px; line-height: 1.35; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); pointer-events: none; }
.pfq-tip span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pfq-tip .ok { color: #86efac; } .pfq-tip .bad { color: #fdba74; }
[data-theme="dark"] .pfq-tip .ok { color: #15803d; } [data-theme="dark"] .pfq-tip .bad { color: #c2410c; }

.pf-svg .pf-ax { font-size: 13px; } .pf-thr-l { font-size: 12px; } .pf-val { font-size: 13px; }
.pfq-legend { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 24px; }

/* ===== графики v2: вёрстка вместо масштабируемого SVG ===== */
.pfk { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -4px 0 18px; }
.pfk-item { display: grid; gap: 2px; }
.pfk-item span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pfk-item b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.pfk-item b small { font-size: 15px; font-weight: 800; margin-left: 1px; color: var(--muted); }
.pfk-item.muted b { color: color-mix(in srgb, var(--text) 70%, transparent); }
.pfk-item.up b { color: #16a34a; } .pfk-item.down b { color: #ea580c; }
.pfc2-scroll { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -4px; padding: 0 4px; }
.pfc2 { --h: 210px; --gut: 34px; position: relative; padding: 26px 0 0 var(--gut); min-width: calc(var(--gut) + var(--n) * 64px); }
.pfc2-grid { position: absolute; left: var(--gut); right: 0; top: 26px; height: var(--h); pointer-events: none; }
.pfc2-grid span { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--text) 10%, transparent); }
.pfc2-grid span[style*="bottom:0%"] { border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.pfc2-grid em { position: absolute; left: calc(-1 * var(--gut)); width: calc(var(--gut) - 8px); top: -8px; text-align: right; font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pfc2-grid .thr { border-top: 2px dashed #f59e0b; z-index: 1; }
.pfc2-grid .thr i { position: absolute; right: 0; top: -22px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: #b45309; font-style: normal; font-size: 11px; font-weight: 800; }
[data-theme="dark"] .pfc2-grid .thr i { color: #fcd34d; }
.pfc2-cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(56px, 1fr)); }
.pfc2-col { display: grid; justify-items: center; gap: 8px; border-radius: 14px; padding-bottom: 6px; transition: background-color .15s; cursor: default; }
.pfc2-col.on { background: color-mix(in srgb, #7c3aed 7%, transparent); }
.pfc2-col small { font-size: 12px; font-weight: 700; color: var(--muted); }
.pfc2-track { position: relative; width: 100%; height: var(--h); display: flex; justify-content: center; align-items: flex-end; }
.pfc2-avg { position: absolute; bottom: 0; width: min(54px, 62%); border-radius: 12px 12px 4px 4px; background: color-mix(in srgb, #f472a6 20%, var(--surface-2)); }
.pfc2-me { position: relative; width: min(24px, 30%); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #fb923c, #ea580c); box-shadow: 0 6px 16px -8px rgba(234, 88, 12, .8); }
.pfc2-me.bad { background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: 0 6px 16px -8px rgba(245, 158, 11, .8); }
.pfc2-me b { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 12px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pfc2-line { position: absolute; left: var(--gut); right: 0; top: 26px; height: var(--h); width: calc(100% - var(--gut)); overflow: visible; pointer-events: none; }
.pfc2-line path { fill: none; stroke: #e11d48; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.pfc2-dots { position: absolute; left: var(--gut); right: 0; top: 26px; height: var(--h); pointer-events: none; }
.pfc2-dots i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 3px var(--surface), 0 2px 6px rgba(225, 29, 72, .4); }
.pf-legend i.lg-me { background: linear-gradient(180deg, #fb923c, #ea580c); }
.pf-legend i.lg-avg { background: color-mix(in srgb, #f472a6 30%, var(--surface-2)); }
.pf-legend i.lg-thr { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed #f59e0b; }
.pf-legend i.s-ontime, .pfw-bar .s-ontime { background: #22c55e; }
.pf-legend i.s-free, .pfw-bar .s-free { background: #a5b4fc; }
.pf-legend i.s-late, .pfw-bar .s-late { background: #fbbf24; }
.pf-legend i.s-missed, .pfw-bar .s-missed { background: #f43f5e; }
/* недели */
.pfw { --h: 170px; display: grid; grid-template-columns: repeat(var(--n), minmax(48px, 1fr)); gap: 6px; padding-top: 22px; min-width: calc(var(--n) * 54px); }
.pfw-col { display: grid; justify-items: center; gap: 8px; padding: 6px 0; border-radius: 12px; }
.pfw-col.now { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pfw-col small { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pfw-col.now small { color: var(--text); }
.pfw-track { position: relative; width: 100%; height: var(--h); display: flex; justify-content: center; align-items: flex-end; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.pfw-bar { position: relative; width: min(30px, 56%); min-height: 10px; display: flex; flex-direction: column; border-radius: 9px 9px 3px 3px; overflow: visible; gap: 2px; }
.pfw-bar span { display: block; min-height: 4px; border-radius: 3px; }
.pfw-bar span:first-of-type { border-radius: 9px 9px 3px 3px; }
.pfw-bar b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pfw-none { width: min(30px, 56%); height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.pf-dn-track { stroke: var(--surface-2); }
@media (max-width: 520px) { .pfc2 { --h: 170px; } .pfw { --h: 130px; } .pfk-item b { font-size: 22px; } }

.pfc2-cols { grid-template-columns: repeat(var(--n), minmax(56px, 112px)); justify-content: center; width: fit-content; min-width: 100%; margin: 0 auto; }
.pfc2-cols { min-width: 0; max-width: 100%; }
.pfc2-line, .pfc2-dots { left: 0; right: 0; top: 0; width: 100%; height: var(--h); }
.pfc2-me b { bottom: calc(100% + 14px); }
.pfq-tip { width: 250px; }

/* тесты строками */
.pft { display: grid; gap: 4px; }
.pft-scale, .pft-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(200px, 2fr) 92px; gap: 18px; align-items: center; }
.pft-scale > div { position: relative; height: 16px; }
.pft-scale i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.pft-scale i[style*="left:0"] { transform: none; } .pft-scale i[style*="left:100%"] { transform: translateX(-100%); }
.pft-scale i.thr { color: #b45309; font-weight: 800; }
[data-theme="dark"] .pft-scale i.thr { color: #fcd34d; }
.pft-row { padding: 12px 0; border-top: 1px solid var(--border); }
.pft-name { display: grid; gap: 3px; min-width: 0; }
.pft-name b { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.pft-name small { font-size: 12.5px; color: var(--muted); }
.pft-bar { position: relative; height: 14px; border-radius: 99px; background: var(--surface-2); }
.pft-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.pft-fill.ok { background: linear-gradient(90deg, #4ade80, #16a34a); }
.pft-fill.bad { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.pft-thr { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed #f59e0b; }
.pft-avg { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.pft-val { display: grid; justify-items: end; gap: 1px; }
.pft-val b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.pft-val small { font-size: 11.5px; font-weight: 700; }
.pft-val.ok small { color: #15803d; } .pft-val.bad small { color: #b45309; }
[data-theme="dark"] .pft-val.ok small { color: #86efac; } [data-theme="dark"] .pft-val.bad small { color: #fcd34d; }
.pf-legend i.lg-avgtick { width: 4px !important; height: 14px !important; border-radius: 2px !important; background: var(--text); }
@media (max-width: 700px) {
  .pft-scale { display: none; }
  .pft-row { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .pft-bar { grid-column: 1 / -1; grid-row: 2; }
}
.pf-legend i.lg-ok { background: linear-gradient(90deg, #4ade80, #16a34a); }

/* краткий ответ «как в бланке»: каждая буква — в своей клетке.
   шаг буквы = ширина знака (1ch моноширинного шрифта) + интервал = ровно ширина клетки */
.short-ans { max-width: 100%; flex-wrap: wrap; }
.short-ans .input {
  --cell: 34px;
  flex: 0 1 auto; width: calc(var(--cell) * 12 + 2px); max-width: 100%; height: 46px;
  padding: 0 0 0 calc((var(--cell) - 1ch) / 2);
  font-family: 'Courier New', Courier, monospace; font-size: 20px; font-weight: 700; text-transform: uppercase;
  letter-spacing: calc(var(--cell) - 1ch);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) - 1px), var(--border) calc(var(--cell) - 1px) var(--cell));
  background-origin: padding-box; background-position: 0 0;
  border-radius: 10px;
}
/* На телефоне клетки остаются, но поле уже — 10 клеток влезают в экран.
   Тап в «щель» между клетками Chrome понимает как позицию 0, поэтому
   попадание пальцем в клетку считает скрипт (см. app.js, pointerup). */
@media (max-width: 520px) {
  .short-ans { width: 100%; }
  .short-ans .input {
    --cell: 30px;
    flex: 0 0 auto; width: calc(var(--cell) * 10 + 2px); max-width: 100%; height: 44px;
    font-size: 19px; padding: 0 0 0 calc((var(--cell) - 1ch) / 2);
    letter-spacing: calc(var(--cell) - 1ch);
    background-color: var(--surface);
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) - 1px), var(--border) calc(var(--cell) - 1px) var(--cell));
  }
}
@media (max-width: 380px) { .short-ans .input { --cell: 26px; } }
@media (max-width: 340px) { .short-ans .input { --cell: 24px; } }

/* переписка по домашке под замком (тариф «Старт») */
.hw-msg.is-locked { position: relative; }
.hw-msg.is-locked .hw-msg-lbl svg:last-child { color: var(--muted); }
.hw-msg-ghost { min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--faint); font-size: 14px; filter: blur(.5px); opacity: .7; }
.hw-msg.is-locked .hw-msg-row { opacity: .45; filter: grayscale(1); pointer-events: none; }
.hw-msg-lock { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: min(470px, calc(100% - 16px)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 40px -18px rgba(15, 23, 42, .45); }
.hw-msg-lock > svg { width: 22px; height: 22px; flex: none; color: var(--accent-ink); }
.hw-msg-lock > div { display: grid; gap: 3px; flex: 1; min-width: 200px; }
.hw-msg-lock b { font-size: 14.5px; }
.hw-msg-lock span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 520px) { .hw-msg-lock { position: static; transform: none; width: auto; margin-top: -4px; } }

.demo-group { display: grid; gap: 6px; margin-top: 8px; }
.demo-group small { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }


/* домашка с проверкой куратора не в тарифе — вся карточка под размытием */
.hw-section.is-locked { position: relative; overflow: hidden; min-height: 340px; }
.hw-lock-blur { filter: blur(7px) saturate(.7); opacity: .55; pointer-events: none; user-select: none; }
.hw-lock-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); display: grid; justify-items: center; gap: 10px; padding: 26px 24px; text-align: center; border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); box-shadow: 0 24px 60px -24px rgba(15, 23, 42, .5); backdrop-filter: blur(6px); }
.hw-lock-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, #e11d6a 12%, var(--surface)); color: var(--accent-ink); }
.hw-lock-ico svg { width: 24px; height: 24px; }
.hw-lock-card b { font-size: 17px; line-height: 1.3; }
.hw-lock-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.hw-lock-card .btn { margin-top: 4px; }


/* ===================== Админка 2 ===================== */
.admin-tabs { flex-wrap: wrap; }
.a2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.a2-head h3 { margin: 0 0 2px; font-size: 22px; }
.a2-head p { margin: 0; max-width: 70ch; }
.a2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.a2-kpi { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.a2-kpi-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.a2-kpi-ico svg { width: 17px; height: 17px; }
.a2-kpi-l { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.a2-kpi > b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.a2-kpi > small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.a2-delta { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.a2-delta i { font-style: normal; font-weight: 600; color: var(--muted); }
.a2-delta.up { color: #15803d; } .a2-delta.down { color: #c2410c; } .a2-delta.flat { color: var(--muted); }
[data-theme="dark"] .a2-delta.up { color: #86efac; } [data-theme="dark"] .a2-delta.down { color: #fdba74; }
.a2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a2-box { min-width: 0; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.a2-box.span-2 { grid-column: 1 / -1; }
.a2-box h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: 16px; }
.a2-box h4 > svg { width: 17px; height: 17px; color: var(--muted); }
.a2-box h4 small { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .lg-bar { background: color-mix(in srgb, #e11d6a 45%, var(--surface-2)); } .lg-line { height: 3px; background: #7c3aed; border-radius: 2px; }
/* столбики по времени */
.a2-bars { overflow-x: auto; }
.a2-bars-cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(10px, 1fr)); gap: 3px; min-width: calc(var(--n) * 13px); }
.a2-col { display: grid; gap: 6px; }
.a2-track { height: 170px; display: flex; align-items: flex-end; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.a2-track span { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #f472a6, #e11d6a); transition: filter .15s; }
.a2-col:hover .a2-track span { filter: brightness(1.12); }
.a2-col small { height: 14px; font-size: 10.5px; color: var(--muted); white-space: nowrap; text-align: center; overflow: visible; }
.a2-line { position: absolute; left: 0; top: 0; width: 100%; height: 170px; overflow: visible; pointer-events: none; }
.a2-line path { fill: none; stroke: #7c3aed; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
/* аудитория / числа */
.a2-aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.a2-aud > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.a2-aud b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.a2-aud span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.a2-aud .warn { background: color-mix(in srgb, #f59e0b 13%, var(--surface)); } .a2-aud .bad { background: color-mix(in srgb, #ef4444 11%, var(--surface)); }
.a2-aud .bad b { color: #b91c1c; } [data-theme="dark"] .a2-aud .bad b { color: #fca5a5; }
.a2-stack { display: flex; height: 26px; margin-top: 14px; border-radius: 9px; overflow: hidden; gap: 2px; }
.a2-stack span { display: grid; place-items: center; min-width: 18px; font-size: 12px; font-weight: 800; color: #fff; }
.a2-stack .ok { background: #22c55e; } .a2-stack .warn { background: #fbbf24; color: #78350f; } .a2-stack .bad { background: #f43f5e; }
.a2-stack span[style*="flex:0"] { display: none; }
/* воронка */
.a2-funnel { display: grid; gap: 8px; }
.a2-fstep { display: grid; gap: 3px; }
.a2-fbar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); overflow: hidden; font-size: 13.5px; }
.a2-fbar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, color-mix(in srgb, #e11d6a 26%, transparent), color-mix(in srgb, #7c3aed 22%, transparent)); border-radius: inherit; }
.a2-fbar span, .a2-fbar b { position: relative; } .a2-fbar b { font-variant-numeric: tabular-nums; }
.a2-fstep em { font-style: normal; font-size: 11.5px; color: var(--muted); padding-left: 4px; }
/* тарифы */
.a2-tariffs { display: grid; gap: 10px; }
.a2-trow { display: grid; grid-template-columns: 110px 90px minmax(120px, 1fr) 110px minmax(180px, auto); gap: 12px; align-items: center; }
.a2-trow .num { text-align: right; font-variant-numeric: tabular-nums; }
.a2-hbar { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.a2-hbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f472a6, #e11d6a); }
/* когорты */
.a2-cohort { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; font-variant-numeric: tabular-nums; }
.a2-cohort th { font-size: 11.5px; color: var(--muted); font-weight: 800; text-align: center; padding: 4px; }
.a2-cohort td { text-align: center; padding: 8px 6px; border-radius: 8px; background: color-mix(in srgb, #7c3aed calc(var(--a, 0) * 70%), var(--surface-2)); }
.a2-cohort td:first-child, .a2-cohort td:nth-child(2) { background: transparent; font-weight: 700; }
.a2-cohort td.na { background: transparent; }
/* таблицы */
.a2-table td small { display: block; }
.a2-mini { width: 80px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: inline-block; vertical-align: middle; }
.a2-mini i { display: block; height: 100%; background: #22c55e; border-radius: inherit; }
.a2-warn { color: #b45309; font-weight: 700; } [data-theme="dark"] .a2-warn { color: #fcd34d; }
.mini-tag.bad { background: #fee2e2; color: #991b1b; }
/* пользователи */
.a2-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.a2-filters .search { flex: 1 1 220px; min-width: 180px; }
.a2-filters .seg i { font-style: normal; opacity: .6; margin-left: 3px; }
.a2-count { margin: 4px 2px 10px; }
.a2-users tbody tr { cursor: pointer; }
.a2-users tbody tr:hover { background: var(--surface-2); }
.a2-role { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--surface-2); }
.a2-role.r-teacher { background: color-mix(in srgb, #7c3aed 14%, var(--surface)); color: #6d28d9; }
.a2-role.r-admin { background: color-mix(in srgb, #e11d6a 14%, var(--surface)); color: var(--accent-ink); }
[data-theme="dark"] .a2-role.r-teacher { color: #c4b5fd; }
/* карточка пользователя */
.a2-card { display: grid; gap: 18px; }
.a2-card-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-right: 36px; }
.a2-big-ava { width: 64px; height: 64px; flex: none; border-radius: 20px; display: grid; place-items: center; background: var(--grad-ink); color: #fff; font-size: 26px; font-weight: 900; }
.a2-big-ava.sm { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
.a2-who { flex: 1; min-width: 220px; }
.a2-who h2 { margin: 0; font-size: 24px; }
.a2-who p { margin: 2px 0 8px; }
.a2-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.a2-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a2-card-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.a2-card-stats > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.a2-card-stats b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.a2-card-stats span { font-size: 12px; color: var(--muted); }
.a2-sec { display: grid; gap: 10px; }
.a2-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.a2-sec h3 svg { width: 17px; height: 17px; color: var(--muted); }
.a2-sec h3 small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.a2-enr { display: grid; gap: 8px; }
.a2-enr-row { display: grid; grid-template-columns: minmax(200px, 1.6fr) 130px minmax(170px, 1.2fr) 120px auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); }
.a2-enr-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.a2-enr-prog { display: grid; gap: 3px; } .a2-enr-prog small { font-size: 11.5px; color: var(--muted); }
.a2-enr-perf { display: flex; gap: 10px; flex-wrap: wrap; } .a2-enr-perf small { font-size: 12px; color: var(--muted); } .a2-enr-perf b { color: var(--text); }
.a2-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.a2-inline select[hidden] { display: none; }
.a2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.a2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.a2-chip svg { width: 14px; height: 14px; color: var(--muted); }
.a2-chip em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: var(--surface); color: var(--muted); }
.a2-chip.subject { background: color-mix(in srgb, #7c3aed 11%, var(--surface)); }
.a2-chip.r-curator em { color: #0e7490; } .a2-chip.all { padding-right: 10px; }
.a2-chip button { width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.a2-chip button:hover { background: var(--surface); color: #b91c1c; }
.a2-chip button svg { width: 12px; height: 12px; }
.a2-act { display: grid; grid-template-columns: repeat(60, 1fr); gap: 3px; }
.a2-act i { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.a2-act i.on { background: #e11d6a; }
.a2-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.a2-list { display: grid; gap: 6px; }
.a2-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.a2-profile { display: grid; gap: 8px; }
.a2-profile .btn { justify-self: start; }
/* команда */
.a2-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); font-weight: 700; font-size: 14px; }
.a2-alert svg { width: 18px; height: 18px; color: #b45309; }
.a2-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.a2-member { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.a2-member header { display: flex; gap: 12px; align-items: center; }
.a2-member header > div { flex: 1; min-width: 0; display: grid; }
.a2-mstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.a2-mstats > div { display: grid; gap: 1px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); }
.a2-mstats b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.a2-mstats span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.a2-mstats .bad { background: color-mix(in srgb, #ef4444 11%, var(--surface)); }
@media (max-width: 1000px) { .a2-grid, .a2-two { grid-template-columns: 1fr; } .a2-trow { grid-template-columns: 1fr auto; } .a2-trow .a2-hbar { grid-column: 1 / -1; } .a2-enr-row { grid-template-columns: 1fr auto auto; } .a2-enr-prog, .a2-enr-perf { grid-column: 1 / -1; } }
@media (max-width: 560px) { .a2-team { grid-template-columns: 1fr; } .a2-mstats { grid-template-columns: repeat(3, 1fr); } .a2-act { grid-template-columns: repeat(30, 1fr); } }
.a2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .a2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a2-bars { overflow-y: hidden; padding-bottom: 2px; }
.a2-two > .a2-sec, .a2-sec { align-content: start; }
.a2-profile .input { width: 100%; }

/* графики метрик: ось с числами, общая шкала, подписи */
.a2-bars { display: grid; grid-template-columns: 40px 1fr; gap: 8px; }
.a2-yaxis { position: relative; height: 170px; }
.a2-yaxis span { position: absolute; right: 0; transform: translateY(50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a2-plot { position: relative; min-width: 0; overflow-x: auto; overflow-y: visible; }
.a2-grid-lines { position: absolute; left: 0; right: 0; top: 0; height: 170px; pointer-events: none; }
.a2-grid-lines i { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--text) 10%, transparent); }
.a2-grid-lines i[style="bottom:0%"] { border-top-style: solid; border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.a2-track { border-bottom: 0; }
.a2-track span { position: relative; min-height: 3px; }
.a2-track span b { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.a2-dots { position: absolute; left: 0; top: 0; width: 100%; height: 170px; pointer-events: none; }
.a2-dots i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 2px var(--surface); pointer-events: auto; }
.a2-line path { stroke-width: 2px; }

/* место под подписи над столбиками: всё поле графика сдвинуто на 18px, прокрутка — только вбок */
.a2-plot { overflow-x: auto; overflow-y: hidden; padding-top: 18px; }
.a2-yaxis { margin-top: 18px; }
.a2-grid-lines, .a2-dots, .a2-line { top: 18px; }
.a2-bars-cols .a2-line, .a2-bars-cols .a2-dots { top: 0; }

/* консультации и источники */
.a2-note { margin: 10px 0 0; }
.a2-split2 { display: grid; gap: 8px; margin-bottom: 12px; }
.a2-split2-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--surface-2); gap: 2px; }
.a2-split2-bar span { background: color-mix(in srgb, var(--text) 12%, var(--surface-2)); }
.a2-split2-bar span.ok { background: linear-gradient(90deg, #4ade80, #16a34a); }
.a2-split2-l { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.a2-split2-l span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.a2-split2-l i { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--text) 18%, var(--surface-2)); }
.a2-split2-l i.ok { background: #16a34a; }
.a2-split2-l b { color: var(--text); font-variant-numeric: tabular-nums; }
.a2-split2-l em { font-style: normal; font-size: 12px; }
.a2-src { display: grid; gap: 10px; }
.a2-src-row { display: grid; grid-template-columns: minmax(110px, 160px) minmax(80px, 1fr) auto; gap: 4px 12px; align-items: center; font-size: 13.5px; }
.a2-src-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2-src-row .small { grid-column: 2 / -1; }

.a2-h4-2 { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--border); }

.a2-fbar.top::before { background: linear-gradient(90deg, color-mix(in srgb, #0ea5e9 24%, transparent), color-mix(in srgb, #7c3aed 18%, transparent)); }
.a2-fbranch { display: grid; gap: 6px; margin: -2px 0 6px 18px; padding: 10px 12px; border-left: 2px solid var(--border); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

.a2-fbar.ok::before { background: linear-gradient(90deg, color-mix(in srgb, #22c55e 34%, transparent), color-mix(in srgb, #16a34a 22%, transparent)); }
.a2-fbar.off::before { background: color-mix(in srgb, var(--text) 12%, transparent); }
.a2-fbar.off { color: var(--muted); }
.a2-fstep.sub { padding-left: 18px; position: relative; }
.a2-fstep.sub::before { content: ''; position: absolute; left: 6px; top: -4px; bottom: 50%; width: 8px; border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 6px; }

.cab-pass { margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); text-align: left; }
.cab-pass summary { cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cab-pass summary svg { width: 16px; height: 16px; color: var(--muted); }
.cab-pass-form { display: grid; gap: 10px; margin-top: 12px; }
.cab-pass-form .btn { justify-self: start; }

.a-tab-badge { margin-left: 6px; min-width: 20px; padding: 1px 7px; border-radius: 99px; background: #e11d6a; color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.a-tab-badge[hidden] { display: none; }

/* ===================== Выпадающие списки в стиле сайта ===================== */
.ps-native { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; clip-path: inset(50%); }
/* база — слабым селектором, чтобы классы списка (.select, .select-sm, .filter-select…) задавали размеры как раньше */
:where(.ps-btn) { min-height: 38px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 12px; background-color: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.ps-btn { position: relative; display: inline-flex; align-items: center; max-width: 100%; min-width: 0; padding-right: 38px !important; text-align: left; cursor: pointer; background-image: none !important; appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.ps-btn:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
.ps-btn.ps-open, .ps-btn:focus-visible { outline: none; border-color: #ff3d81; box-shadow: 0 0 0 3px rgba(255, 61, 129, .16); }
.ps-btn[hidden] { display: none !important; }
.ps-btn:disabled { opacity: .55; cursor: not-allowed; }
.ps-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-chev { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); transition: transform .2s; pointer-events: none; }
.ps-btn.ps-open .ps-chev { transform: translateY(-50%) rotate(180deg); color: #e11d6a; }
.ps-pop { position: fixed; z-index: 100050; overflow: auto; overscroll-behavior: contain; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 22px 50px -14px rgba(15, 23, 42, .38), 0 2px 8px rgba(15, 23, 42, .07); animation: psIn .14s ease-out; outline: none; }
.ps-pop.up { animation-name: psInUp; }
@keyframes psIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes psInUp { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ps-pop { animation: none; } }
.ps-search { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 6px; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ps-search input { width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.ps-search input:focus { border-color: #ff3d81; }
.ps-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.3; color: var(--text); cursor: pointer; }
.ps-opt span { min-width: 0; overflow-wrap: anywhere; }
.ps-opt.active { background: var(--surface-2); }
.ps-opt.sel { font-weight: 800; color: var(--accent-ink); background: color-mix(in srgb, #ff3d81 8%, var(--surface)); }
.ps-opt.sel.active { background: color-mix(in srgb, #ff3d81 13%, var(--surface)); }
.ps-opt.dis { opacity: .45; cursor: not-allowed; }
.ps-opt[hidden], .ps-group[hidden], .ps-empty[hidden] { display: none; }
.ps-tick { width: 16px; height: 16px; flex: none; opacity: 0; }
.ps-opt.sel .ps-tick { opacity: 1; }
.ps-group { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ps-empty { padding: 14px; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (pointer: coarse) { .ps-opt { min-height: 44px; } .ps-btn { min-height: 44px; } }
/* полноширинные списки в формах */
.field .ps-btn, .a2-profile .ps-btn { width: 100%; }

.a-course-acts { white-space: nowrap; }
.a-course-acts .x-btn { vertical-align: middle; margin-left: 2px; }
.a-course-acts .x-btn:hover { color: #b91c1c; }

/* цены по тарифам */
.a-prices { display: flex; gap: 6px; }
.a-prices label { display: grid; gap: 2px; }
.a-prices label span { font-size: 11px; font-weight: 800; color: var(--muted); }
.a-prices .input-sm { width: 84px; min-height: 34px; padding: 4px 8px; font-variant-numeric: tabular-nums; }
.a-prices.form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.a-prices.form label span { font-size: 12.5px; }
.field > span small { font-weight: 600; margin-left: 6px; }

/* редактор: переименовать курс */
.ls-course { position: relative; }
.ls-course-ren { position: absolute; top: 13px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); opacity: 0; transition: opacity .15s, color .15s; cursor: pointer; }
.ls-course-ren svg { width: 15px; height: 15px; }
.ls-course:hover .ls-course-ren, .ls-course-ren:focus-visible { opacity: 1; }
.ls-course-ren:hover { color: var(--accent-ink); border-color: color-mix(in srgb, #ff3d81 40%, var(--border)); }
.ls-course:hover .ls-pill.draft { visibility: hidden; }
@media (pointer: coarse) { .ls-course-ren { opacity: 1; } .ls-course .ls-pill.draft { margin-right: 34px; } }

/* редактор: панель уроков — высотой с экран и со своей прокруткой (длинные курсы не обрезаются).
   overflow: clip вместо hidden — иначе «липкая» панель не держится при прокрутке страницы */
#studio-root .ls-wrap { overflow: clip; }
@media (min-width: 901px) {
  #studio-root .ls-tree { position: sticky; top: 0; align-self: start; height: 100dvh; max-height: 100dvh; }
  .cab-t-studio #studio-root .ls-tree { top: 64px; height: calc(100dvh - 64px); max-height: calc(100dvh - 64px); }
  #studio-root .ls-tree-body { flex: 1; min-height: 0; overflow-y: auto; }
}


/* ===================== Профиль ===================== */
.pp { display: grid; gap: 16px; max-width: 980px; }
.pp-card { padding: 22px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.pp-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 17px; }
.pp-card h3 svg { width: 18px; height: 18px; color: var(--muted); }
.pp-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pp-ava-wrap { position: relative; flex: none; }
.pp-ava { width: 104px; height: 104px; border-radius: 32px; display: grid; place-items: center; overflow: hidden; background: var(--grad-ink); color: #fff; font-size: 38px; font-weight: 900; box-shadow: 0 14px 30px -14px rgba(225, 29, 106, .6); }
.pp-ava img, .cab-avatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.pp-ava-btn { position: absolute; right: -6px; bottom: -6px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .4); }
.pp-ava-btn:hover { color: var(--accent-ink); }
.pp-ava-btn svg { width: 17px; height: 17px; }
.pp-who { flex: 1; min-width: 240px; }
.pp-who h2 { margin: 0; font-size: 26px; }
.pp-who > p { margin: 3px 0 10px; }
.pp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-ava-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-ava-acts label.btn { cursor: pointer; }
.pp-form { display: grid; gap: 12px; }
.pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-narrow { max-width: 220px; }
.pp-actions { display: flex; justify-content: flex-end; }
.pp-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pp-subj input { position: absolute; opacity: 0; pointer-events: none; }
.pp-subj span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.pp-subj span svg { width: 15px; height: 15px; }
.pp-subj input:checked + span { background: color-mix(in srgb, #ff3d81 12%, var(--surface)); border-color: color-mix(in srgb, #ff3d81 45%, var(--border)); color: var(--accent-ink); }
.pp-subj input:focus-visible + span { outline: 2px solid #ff3d81; outline-offset: 2px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 700; }
.pp-chip em { font-style: normal; font-size: 11px; color: var(--muted); }
.pp-theme { margin-top: 6px; }
.pp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); cursor: pointer; }
.pp-toggle span { display: grid; gap: 2px; }
.pp-toggle small { color: var(--muted); font-size: 12.5px; }
.pp-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pp-toggle i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: color-mix(in srgb, var(--text) 18%, var(--surface-2)); transition: background-color .2s; }
.pp-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .2s; }
.pp-toggle input:checked + i { background: #e11d6a; }
.pp-toggle input:checked + i::after { transform: translateX(18px); }
.pp-toggle input:focus-visible + i { outline: 2px solid #ff3d81; outline-offset: 2px; }
.pp-sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pp-sec-grid .pp-form { padding: 16px; border-radius: 16px; background: var(--surface-2); align-content: start; }
.pp-sec-grid .pp-form .btn { justify-self: start; }
.pp-sessions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; }
.pp-sessions span { display: inline-flex; align-items: center; gap: 6px; }
.pp-sessions svg { width: 16px; height: 16px; color: var(--muted); }
.cab-avatar.has-img, .avatar:has(img) { padding: 0; overflow: hidden; background: var(--surface-2); }
a.lms-avatar-btn { text-decoration: none; display: grid; place-items: center; }
@media (max-width: 700px) { .pp-grid, .pp-sec-grid { grid-template-columns: 1fr; } .pp-card { padding: 16px; } .pp-head { gap: 16px; } .pp-ava { width: 84px; height: 84px; border-radius: 26px; font-size: 30px; } }
/* настройка «без анимаций» */
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.no-motion .reveal { opacity: 1 !important; transform: none !important; }

/* ===================== Тёмная тема кабинета: одна палитра с сайтом (тёплый тёмный, без синего) ===================== */
[data-theme="dark"] body.is-lms-mode, [data-theme="dark"] .lms-page-wrapper { background: #0f0b0d; color: var(--text); }
[data-theme="dark"] .lms-sidebar, [data-theme="dark"] .lms-topbar, [data-theme="dark"] .lms-card, [data-theme="dark"] .lms-course-full-card {
  background: #161114; border-color: rgba(255, 255, 255, .07); color: var(--text);
}
[data-theme="dark"] .lms-logo-text, [data-theme="dark"] .lms-month-title, [data-theme="dark"] .lms-card-heading, [data-theme="dark"] .lms-cfc-title { color: var(--text); }
[data-theme="dark"] .lms-nav-item, [data-theme="dark"] .lms-subj-row, [data-theme="dark"] .lms-card-summary { color: #b9aaae; }
[data-theme="dark"] .lms-nav-label { color: #8f8085; }
[data-theme="dark"] .lms-nav-item:hover, [data-theme="dark"] .lms-subj-row:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
[data-theme="dark"] .lms-nav-item.active { background: rgba(255, 61, 129, .14); color: #ff86b0; }
[data-theme="dark"] .lms-nav-item.active .lms-ico { color: #ff86b0; }
[data-theme="dark"] .lms-icon-action, [data-theme="dark"] .lms-select-box, [data-theme="dark"] .lms-search-field, [data-theme="dark"] .lms-chip, [data-theme="dark"] .lms-lesson-row,
[data-theme="dark"] .lms-stat-pill { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: var(--text); }
[data-theme="dark"] .lms-side-divider, [data-theme="dark"] .lms-card-bottombar, [data-theme="dark"] .lms-view-header { border-color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .cab-side-stats { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .t-dash-switch, [data-theme="dark"] .cab-search { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); }
/* выпадающие списки и всплывающие панели — непрозрачные, иначе в тёмной теме сквозь них видно страницу */
.ps-pop, .ps-search { background: var(--solid); }
[data-theme="dark"] .ps-pop { background: #1d1619; border-color: rgba(255, 255, 255, .1); box-shadow: 0 22px 50px -14px rgba(0, 0, 0, .7); }
[data-theme="dark"] .ps-search { background: #1d1619; }
[data-theme="dark"] .ps-opt.active { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .ps-opt.sel { background: rgba(255, 61, 129, .16); color: #ff86b0; }
[data-theme="dark"] .ps-btn { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--text); }
[data-theme="dark"] .user-menu { background: #1d1619; }

/* фото в аватарах по всему сайту */
.qa-ava, .rv-ava, .s-ava, .a2-big-ava, .cc2-teacher i { overflow: hidden; }
.qa-ava img, .rv-ava img, .s-ava img, .a2-big-ava img, .cc2-teacher i img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.qa-ava.xs { width: 22px; height: 22px; min-width: 22px; font-size: 10px; display: inline-grid; place-items: center; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.qa-admin-top { align-items: center; }
.qa-admin-top .qa-ava.xs { margin-right: 4px; }
.qa-admin-head { display: flex; align-items: center; gap: 10px; }
.qa-admin-head > div { flex: 1; min-width: 0; }
.qa-msg .qa-ava.sm { display: inline-grid; width: 24px; height: 24px; font-size: 10px; vertical-align: middle; margin: -2px 6px 0 0; }
.b-meta { display: flex; align-items: center; flex-wrap: wrap; }
.b-meta .qa-ava.xs { margin-right: 6px; }
.cm-msg.me { flex-direction: row-reverse; }
/* ответ ученику у преподавателя: поле на всю ширину, кнопки «Ответить» и «Решено» под ним (не круглые кнопки из окна ученика) */
.qa-admin-thread .qa-form { display: grid; gap: 10px; }
.qa-admin-thread .qa-form textarea { width: 100%; }
.qa-admin-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.qa-admin-acts .btn { width: auto !important; height: auto !important; min-height: 40px; padding: 8px 16px !important; border-radius: 12px !important; font-size: 14px !important; }
.qa-admin-acts .btn { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; }
/* личная переписка куратора: окно фиксированной высоты, лента сообщений прокручивается, поле ответа прижато к низу */
.qa-admin-thread:has(.qa-thread) { display: flex; flex-direction: column; height: min(70vh, 640px); min-height: 420px; align-content: normal; }
.qa-admin-thread:has(.qa-thread) > .qa-admin-head,
.qa-admin-thread:has(.qa-thread) > .qa-form,
.qa-admin-thread:has(.qa-thread) > .qa-closed { flex: none; }
.qa-admin-thread:has(.qa-thread) > .qa-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; margin-bottom: 0; padding-right: 4px; overscroll-behavior: contain; }
.qa-admin-thread:has(.qa-thread) > .qa-form { margin-top: auto; }
.qa-admin-thread:has(.qa-thread) > .qa-closed { margin-top: auto; align-self: flex-start; }
/* левая колонка той же высоты, чтобы колонки заканчивались на одном уровне */
.qa-admin-list { max-height: min(70vh, 640px); }
@media (max-width: 860px) { .qa-admin-thread:has(.qa-thread) { height: min(64vh, 560px); } .qa-admin-list { max-height: min(64vh, 560px); } }
/* тёмная тема: на светлой плашке (фон = цвет текста) текст делаем тёмным и непрозрачным — иначе его не видно */
[data-theme="dark"] .rv-tabs button.on, [data-theme="dark"] .cc2-badge, [data-theme="dark"] .pfc-cell.today b, [data-theme="dark"] .pfq-tip { color: #161114; }
[data-theme="dark"] .rv-tabs button.on i { color: #161114; opacity: .7; }

/* ===================== Вебинары: превью и записи ===================== */
.cab-web-thumb { position: relative; flex: none; width: 168px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.cab-web-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cab-web-thumb .cab-web-date { position: absolute; left: 6px; bottom: 6px; width: 42px; padding: 5px 0; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.cab-web-thumb .cab-web-date b { font-size: 16px; }
.cab-web-thumb .cab-web-date small { font-size: 10px; }
.cab-web-strip-thumb { flex: none; width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; }
@media (max-width: 640px) { .cab-web.has-poster { flex-wrap: wrap; } .cab-web.has-poster .cab-web-thumb { width: 100%; } .cab-web-act { width: 100%; } }
.web-adm-thumb { flex: none; width: 64px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.web-adm-poster { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.web-adm-poster-img { flex: none; width: 176px; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px dashed var(--border); color: var(--muted); }
.web-adm-poster-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.web-adm-poster-img svg { width: 26px; height: 26px; }
.web-adm-poster-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.web-adm-poster-acts small { flex-basis: 100%; }
.web-adm-poster-acts label.btn { cursor: pointer; }
/* встроенное видео с обложкой: плеер грузится по нажатию */
.lc-facade button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.lc-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s; }
.lc-facade button:hover img { opacity: 1; }
.lc-facade i { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 50%; background: rgba(225, 29, 106, .92); color: #fff; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); transition: transform .2s; }
.lc-facade i svg { width: 30px; height: 30px; margin-left: 4px; }
.lc-facade button:hover i { transform: scale(1.06); }
.lc-facade button:focus-visible { outline: 3px solid #ff3d81; outline-offset: 2px; }
.lesson-embed { display: grid; gap: 10px; }
.lesson-embed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* студия: выбор вебинара */
.ls-add-web { margin-top: 2px; }
.ls-web-pick { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface-2); margin: 4px 0 12px; }
.ls-web-pick img, .ls-web-noposter { flex: none; width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--muted); }
.ls-web-pick > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ls-web-pick small { color: var(--muted); }

/* вебинары у преподавателя: эфир идёт — метка и кнопка «Закончить эфир» */
.web-adm-row > span:nth-child(2) { flex: none; min-width: 0; }
.web-adm-row > span.web-adm-info { display: grid; flex: 1; min-width: 0; }
.web-adm-when { display: grid; gap: 3px; }
.web-adm-live { justify-self: start; padding: 2px 8px; border-radius: 7px; background: #ff3d81; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; animation: webLive 1.6s ease-in-out infinite; }
@keyframes webLive { 50% { opacity: .55; } }
.web-adm-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* урок-запись вебинара в программе: свой цвет и метка «Вебинар» */
.web-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 2px 8px; border-radius: 7px; background: linear-gradient(135deg, #ff3d81, #e11d6a); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.web-tag svg { width: 12px; height: 12px; }
.program-item.is-webinar { border-color: color-mix(in srgb, #ff3d81 40%, var(--border)); background: color-mix(in srgb, #ff3d81 6%, var(--surface)); }
.program-item.is-webinar .num, .cab-lesson-row.is-webinar .cab-lnum { background: linear-gradient(135deg, #ff3d81, #e11d6a); color: #fff; }
.program-item.is-webinar .num svg, .cab-lesson-row.is-webinar .cab-lnum svg { width: 17px; height: 17px; }
.cab-lesson-row.is-webinar { background: color-mix(in srgb, #ff3d81 5%, transparent); }
.ls-lesson.is-webinar .ls-num { background: linear-gradient(135deg, #ff3d81, #e11d6a); color: #fff; }
.ls-lesson-txt small i.w { color: #e11d6a; font-weight: 800; }
[data-theme="dark"] .ls-lesson-txt small i.w { color: #ff86b0; }
.sch-tags i.web { background: #ff3d81; color: #fff; }

/* программа курса у урока: окно из 11 уроков, остальное — по кнопке */
.ls-outline .ls-out, .ls-outline .ls-more-btn.less { display: none; }
.ls-outline.all .ls-out, .ls-outline.all .ls-more-btn.less { display: flex; }
.ls-outline.all .ls-more-btn.up, .ls-outline.all .ls-more-btn.down { display: none; }
.ls-more-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 4px 0; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 12px; background: none; color: var(--muted); font: 700 13px var(--font); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.ls-more-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.ls-more-btn svg { width: 15px; height: 15px; }
.ls-more-btn.up svg, .ls-more-btn.less svg { transform: rotate(180deg); }

/* бесплатный урок в программе курса */
.free-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 2px 8px; border-radius: 7px; background: #16a34a; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; vertical-align: 2px; }
.free-tag svg { width: 12px; height: 12px; }
.program-item.is-free:not(.is-webinar) { border-color: color-mix(in srgb, #16a34a 35%, var(--border)); background: color-mix(in srgb, #16a34a 5%, var(--surface)); }
.program-item.is-free:not(.is-webinar) .num { background: color-mix(in srgb, #16a34a 16%, var(--surface-2)); color: #15803d; }
[data-theme="dark"] .program-item.is-free:not(.is-webinar) .num { color: #4ade80; }
.btn.btn-free { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.btn-free:hover { background: #15803d; border-color: #15803d; }

/* программа курса: первые 10 уроков, дальше — многоточие «и ещё N уроков» */
.program-list.clipped > li.pl-out { display: none; }
.program-list.clipped > li:nth-child(10) { -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.program-more { display: grid; justify-items: center; gap: 8px; margin-top: 4px; text-align: center; font-size: 14px; }
.program-dots { display: flex; gap: 6px; padding: 2px 0 4px; }
.program-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .55; }
.program-dots i:nth-child(2) { opacity: .4; } .program-dots i:nth-child(3) { opacity: .25; }

/* ===================== Фон карточки курса и шапки страницы курса ===================== */
.cc2-cover { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .4s ease; }
.cc2.has-cover { border-color: transparent; color: #fff; background: #1a1418; }
.cc2.has-cover::before { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border-radius: 0; filter: none; opacity: 1; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 6, 8, calc(.1 * var(--dim, 1))) 0%, rgba(10, 6, 8, calc(.35 * var(--dim, 1))) 38%, rgba(10, 6, 8, calc(.82 * var(--dim, 1))) 72%, rgba(10, 6, 8, calc(.9 * var(--dim, 1))) 100%); }
.cc2.has-cover:hover::before { opacity: 1; transform: none; }
.cc2.has-cover:hover .cc2-cover { transform: scale(1.04); }
.cc2.has-cover .cc2-tags span, .cc2.has-cover .cc2-subj, .cc2.has-cover .cc2-meta, .cc2.has-cover .cc2-price small, .cc2.has-cover .cc2-prog small { color: rgba(255, 255, 255, .78); }
.cc2.has-cover h3, .cc2.has-cover .cc2-cont, .cc2.has-cover .cc2-tags b { color: #fff; }
.cc2.has-cover .cc2-foot { border-top-color: rgba(255, 255, 255, .18); }
.cc2.has-cover .cc2-go { background: rgba(255, 255, 255, .16); color: #fff; }
.cc2.has-cover .cc2-badge:not(.own) { background: #fff; color: #161114; }
.cc2.has-cover .cc2-teacher i { background: rgba(255, 255, 255, .2); color: #fff; }
.cc2.has-cover .cc2-bar { background: rgba(255, 255, 255, .2); }
.cc2.has-cover .cc2-trial { background: #c3f53c; color: #161114; }
.course-hero.has-cover { isolation: isolate; }
.ch-cover { position: absolute; inset: 0; z-index: -2; background-size: cover; background-repeat: no-repeat; }
.course-hero.has-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(10, 6, 8, calc(.72 * var(--dim, 1))) 0%, rgba(10, 6, 8, calc(.45 * var(--dim, 1))) 45%, rgba(10, 6, 8, calc(.1 * var(--dim, 1))) 100%); }
.course-hero.has-cover .cc-sticker { display: none; }
/* поля фона в форме курса */
.cf-covers { display: grid; gap: 12px; }
.cf-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-prev { flex: none; display: grid; place-items: center; width: 96px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px dashed var(--border); color: var(--muted); }
.cf-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-prev svg { width: 22px; height: 22px; }
.cf-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.cf-acts small { flex-basis: 100%; font-size: 12.5px; }
.cf-acts label.btn { cursor: pointer; }

/* ===================== Конструктор оформления курса ===================== */
/* своя раскладка: элементы стоят по координатам эталонного блока, сцена масштабируется под ширину */
.dz-host { position: relative; width: 100%; }
.dz-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dz-el { position: absolute; }
.dz-el .cc-sticker { position: static; display: block; }
.dz-el.dz-light, .dz-el.dz-light * { color: #fff !important; }
.dz-el.dz-dark, .dz-el.dz-dark * { color: #161114 !important; }
.cc2.dz-custom { padding: 0; display: block; align-self: start; }
.course-hero.dz-custom { align-self: start; }
.dz-flow { display: flex; flex-direction: column; gap: 16px; flex: 1; }
@media (min-width: 900px) { .course-hero.dz-custom { padding: 0; } .course-hero.dz-custom > .dz-flow { display: none; } }
@media (max-width: 899px) { .course-hero.dz-custom > .dz-host { display: none; } }
.dz-open-btn { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .35); color: #fff; font: 700 13px var(--font); cursor: pointer; backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.dz-open-btn svg { width: 15px; height: 15px; }
.course-hero:hover .dz-open-btn, .dz-open-btn:focus-visible { opacity: 1; }
@media (hover: none) { .dz-open-btn { opacity: 1; } }
/* окно конструктора */
.modal.dz-modal { width: min(1120px, calc(100vw - 24px)); }
.dz-ed { display: grid; gap: 14px; }
.dz-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-right: 44px; }
.dz-top h2 { margin: 0; font-size: 20px; flex: 1 1 auto; }
.dz-own { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dz-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.dz-canvas { display: grid; place-items: center; min-height: 520px; padding: 24px; border-radius: 18px; overflow: auto; user-select: none;
  background: var(--surface-2) radial-gradient(circle, color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1.2px) 0 0 / 16px 16px; }
.dz-pv .cc2, .dz-pv .course-hero { transform: none !important; animation: none !important; margin: 0; cursor: default; }
.dz-pv .course-hero { min-height: 0; }
.dz-pv .cc2::before, .dz-pv .cc2-cover { transition: none; }
.dz-pv .dz-el { cursor: move; outline: 1px dashed transparent; outline-offset: 3px; border-radius: 4px; }
.dz-pv .dz-el:hover { outline-color: color-mix(in srgb, #ff3d81 55%, transparent); }
.dz-pv .dz-el.sel { outline: 2px solid #ff3d81; z-index: 5; }
.dz-rs { position: absolute; right: -9px; top: 50%; width: 10px; height: 26px; margin-top: -13px; border-radius: 5px; background: #ff3d81; cursor: ew-resize; opacity: 0; }
.dz-el.sel .dz-rs, .dz-el:hover .dz-rs { opacity: 1; }
.dz-guide { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1px dashed #ff3d81; pointer-events: none; z-index: 9; }
.dz-canvas.bg-sel .cc2, .dz-canvas.bg-sel .course-hero { outline: 2px solid #ff3d81; outline-offset: 4px; }
.dz-canvas .cc2, .dz-canvas .course-hero { cursor: grab; }
.dz-panel { display: grid; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; }
.dz-panel h4 { margin: 0; font-size: 16px; }
.dz-f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; }
.dz-f > span { display: flex; justify-content: space-between; }
.dz-f > span b { color: var(--muted); font-weight: 700; }
.dz-f input[type=range] { width: 100%; accent-color: #e11d6a; }
.dz-f small { font-weight: 500; line-height: 1.4; }
.dz-f .seg { width: 100%; }
.dz-f .seg button { flex: 1; }
.dz-btns, .dz-bg-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dz-bg-acts label.btn { cursor: pointer; }
.dz-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 13px var(--font); cursor: pointer; }
.dz-back svg { width: 14px; height: 14px; }
.dz-hint { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.dz-hint svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #e11d6a; }
.dz-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); font-weight: 700; }
.dz-hidden .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.dz-hidden .chip svg { width: 13px; height: 13px; }
.dz-foot { display: flex; align-items: center; gap: 8px; }
.dz-foot > span { flex: 1; }
@media (max-width: 860px) { .dz-main { grid-template-columns: 1fr; } .dz-canvas { min-height: 0; padding: 12px; } .dz-panel { position: static; } }
/* студия: «Оформление» рядом с «Переименовать» */
.ls-course-ren.ls-course-dz { right: 42px; }
.ls-course:hover .ls-pill.draft { margin-right: 0; }
@media (pointer: coarse) { .ls-course .ls-pill.draft { margin-right: 68px; } }

/* блоки оформления в карточке и шапке курса */
.dz-x > * { display: block; }
.dzx-text { line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.dzx-pill { display: inline-block !important; padding: .35em .8em; border-radius: 99px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.dzx-shape, .dzx-img { width: 100%; height: 100%; }
.dzx-img { object-fit: cover; user-select: none; }
.dzx-empty { display: grid !important; place-items: center; border: 2px dashed rgba(255, 255, 255, .6); border-radius: 12px; color: rgba(255, 255, 255, .8); }
.dzx-empty svg { width: 28px; height: 28px; }
.dzx-icon svg { width: 100%; height: auto; display: block; }
.dzx-line { width: 100%; }
.dz-rs.dz-rs-se { right: -7px; top: auto; bottom: -7px; width: 14px; height: 14px; margin: 0; border-radius: 50%; cursor: nwse-resize; }
/* меню «+ Блок» и панель блока */
.dz-add { position: relative; }
.dz-add-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 280px; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--solid); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .3); }
.dz-add-menu button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 700 13.5px var(--font); text-align: left; cursor: pointer; }
.dz-add-menu button:hover { background: var(--surface-2); }
.dz-add-menu svg { width: 16px; height: 16px; color: #e11d6a; }
.dz-panel h4 { display: flex; align-items: center; gap: 6px; }
.dz-panel h4 svg { width: 16px; height: 16px; color: #e11d6a; }
.dz-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-sw { width: 24px; height: 24px; padding: 0; border-radius: 8px; border: 1px solid var(--border-2); cursor: pointer; }
.dz-sw.on { outline: 2px solid #ff3d81; outline-offset: 2px; }
.dz-sw-pick { position: relative; display: grid; place-items: center; background: conic-gradient(#ff3d81, #ffd23f, #c3f53c, #3b82f6, #8b5cf6, #ff3d81); color: #fff; }
.dz-sw-pick svg { width: 13px; height: 13px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.dz-sw-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.dz-icons button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }
.dz-icons button svg { width: 17px; height: 17px; }
.dz-icons button.on { border-color: #ff3d81; color: #e11d6a; background: color-mix(in srgb, #ff3d81 10%, var(--surface)); }
.dz-panel .textarea, .dz-panel .input { font-weight: 500; }
.dz-panel { max-height: 70vh; overflow: auto; }

/* своя заливка карточки, свой значок предмета */
.cc2.has-fill:not(.has-cover) { background: var(--cfill); }
.cc2-ico.has-img { padding: 0; overflow: hidden; background: transparent; box-shadow: none; }
.dz-ico-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.cc-sticker.has-img { width: 1em; height: 1em; }
.cc-sticker.has-img .dz-ico-img { object-fit: contain; border-radius: 0; }
/* меню блоков по правой кнопке */
.dz-ed { position: relative; }
.dz-add-menu.dz-ctx { position: absolute; right: auto; z-index: 30; }
.dz-fills { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-fill-sw { width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid var(--border-2); cursor: pointer; }
.dz-fill-sw.on { outline: 2px solid #ff3d81; outline-offset: 2px; }
.dz-fill-own { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.dz-fill-own input { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: none; cursor: pointer; }

/* тексты и значки в конструкторе */
.dz-chip-img { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 4px; object-fit: cover; vertical-align: -.3em; }
.dz-pv [data-t] { cursor: text; border-radius: 3px; }
.dz-pv [data-t]:hover { box-shadow: 0 0 0 1px color-mix(in srgb, #ff3d81 50%, transparent); }
.dz-pv .dz-editing { outline: 2px solid #ff3d81; outline-offset: 2px; background: rgba(255, 255, 255, .12); cursor: text; user-select: text; -webkit-user-select: text; }
.dz-canvas .dz-editing { user-select: text; }
.dz-slots { gap: 10px; }
.dz-slot { display: grid; gap: 4px; font-weight: 600; font-size: 12.5px; }
.dz-slot small { font-weight: 500; }
.dz-slot-row { display: flex; gap: 6px; align-items: flex-start; }
.dz-slot-row .input, .dz-slot-row .textarea { flex: 1; min-width: 0; font-size: 13.5px; }
.dz-slot-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; overflow: hidden; }
.dz-slot-ic svg { width: 17px; height: 17px; }
.dz-slot-ic img { width: 100%; height: 100%; object-fit: cover; }
.dz-slot-pick { display: grid; gap: 8px; padding: 8px; border-radius: 12px; background: var(--surface-2); }
.dz-panel { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.dz-slot-row > .input, .dz-slot-row > .textarea { width: auto; }
.dz-f .seg { display: flex; min-width: 0; }
.dz-f .seg button { flex: 1 1 0; min-width: 0; padding: 7px 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* журнал действий: понятное название объекта вместо кода */
.audit-obj { color: var(--text); font-weight: 600; }

/* текст страницы, пришедший с сервера (для поисковиков), пока не загрузилось приложение */
.seo-page { padding-top: 32px; padding-bottom: 48px; line-height: 1.6; }
.seo-page h1 { margin: 12px 0; font-size: clamp(28px, 4vw, 44px); }
.seo-page h2 { margin: 24px 0 8px; font-size: 22px; }
.seo-page ul, .seo-page ol { padding-left: 22px; }
.seo-page li { margin: 4px 0; }
.seo-page a { color: var(--accent-ink); }

/* поле адреса курса: /course/ + свой хвост */
.cf-slug { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.cf-slug i { padding: 0 2px 0 12px; color: var(--muted); font-style: normal; font-size: 14px; white-space: nowrap; }
.cf-slug .input { border: 0; padding-left: 0; background: transparent; box-shadow: none; }

/* ===================== Телефоны: облегчённая графика =====================
   На сенсорных и узких экранах выключаем то, что перерисовывается каждый кадр и не видно глазу:
   плывущий фон, «зерно» поверх всего сайта, размытие под стеклом и декоративные бесконечные анимации.
   Загрузки, «в эфире», плеер и размытие закрытой домашки (это filter, а не backdrop-filter) не трогаем. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  body::before { animation: none; inset: 0; }
  body::after { display: none; }
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sticker, .course-hero .cc-sticker, .hero-art, .hero-art .orb, .score-big, .tariff.popular, .sim-bg, .sym,
  .dash-greet .wave, .streak .fire, .ach:not(.locked) .a-ico, .mini-player i::after, .big-play::before { animation: none !important; }
  .modal-backdrop { background: rgba(5, 4, 15, .62); }
}

/* фильтры банка заданий: список выбора закрыт, пока по нему не кликнули (ниже в файле было «всегда открыт») */
.custom-select-wrap:not(.open) .custom-select-menu { display: none; }
.custom-select-wrap.open .custom-select-menu { display: flex; }
/* формулы: у блока с горизонтальной прокруткой по вертикали всё обрезается, а дроби KaTeX выступают
   за свою строку на несколько пикселей — даём запас сверху и снизу, чтобы верх дробей не срезало */
.lc-math .katex-display, .lesson-formula .katex-display { padding: .4em 0 .4em; }
.lesson-formula { overflow-y: hidden; }

/* разбор после ответа: переносы строк, как их написал преподаватель */
.explain { white-space: pre-line; }




/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (телефоны). Проверено на ширине 360 и 390 px.
   Блок идёт в конце файла — перекрывает ранние правила, поэтому правки
   по телефону собраны в одном месте, а не разбросаны по ста сеткам.
   ========================================================================== */

/* ---- 1. Банк заданий: страница уезжала за экран на 137 px ----
   Колонка сетки была «1fr»: такой трек не сжимается меньше своего содержимого,
   поэтому левое меню распирало всю страницу и текст заданий обрезался. */
@media (max-width: 860px) {
  .tasks-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .tasks-layout > * { min-width: 0; }
  .tasks-nav-box { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tasks-nav-box::-webkit-scrollbar { display: none; }
  .tasks-page-title { font-size: clamp(20px, 6.4vw, 26px); }
  /* 16px в поле ввода — иначе iOS зумит страницу при фокусе */
  .task-ans-input { height: 48px; font-size: 16px; }
  .btn-check-task, .btn-sol-toggle { min-height: 48px; }
}

/* ---- 2. Куки-баннер занимал треть экрана телефона ---- */
@media (max-width: 760px) {
  .cookie-banner { bottom: 12px; padding: 12px 14px; border-radius: 16px; }
  .cookie-in { gap: 10px; }
  .cookie-content { gap: 9px; }
  .cookie-text { font-size: 12px; line-height: 1.4; }
  .cookie-icon { width: 26px; height: 26px; }
  .cookie-icon .ic { width: 14px; height: 14px; }
  .cookie-btn { min-height: 40px; padding: 8px 16px; }
}

/* ---- 3. Шапка кабинета: поиск выдавливал аватар за край экрана ---- */
@media (max-width: 700px) {
  .cab-search { display: none; }
  .lms-topbar { padding: 0 12px; gap: 10px; }
}

/* ---- 4. Тап-цели: палец попадает, если короткая сторона ≥ 44 px ---- */
@media (pointer: coarse) {
  .lms-burger-btn, .lms-icon-action, .lms-avatar-btn, .cab-avatar, .lms-logo-link,
  #user-slot .avatar, .topbar-actions button, .topbar-actions a, .ls-icon-btn {
    min-width: 44px; min-height: 44px;
  }
  .btn, .btn-primary, .btn-ghost, .btn-sm, .btn-reset-tasks { min-height: 44px; }
  .crumbs a, .f-col ul li a, .f-col ul li button, .lms-back-link, .ls-more-btn, .back {
    min-height: 40px; display: inline-flex; align-items: center;
  }
  .filter-checkbox-wrap, .t-option, .lead-consent {
    min-height: 44px; display: flex; align-items: center; gap: 10px;
  }
  .filter-checkbox-wrap input[type="checkbox"], .t-option input, .lead-consent input[type="checkbox"] {
    width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin: 0;
  }
  #player .pbtn, #player #p-play { min-width: 46px; min-height: 46px; }
  .tasks-info-btn { min-width: 36px; min-height: 36px; }
  /* тонкие текстовые ссылки: увеличиваем зону нажатия по вертикали */
  .link-btn.inline, .cookie-text a, .lead-consent a { display: inline-block; padding: 6px 0; }
}

/* ---- 5. Мелкий текст: на телефоне 10–11 px не читается ---- */
@media (max-width: 860px) {
  .gc-sub { font-size: 11.5px; }
  .cc2-meta, .cc2-teacher, .cc2-badge span, .pay-badge, .mini-tag,
  .footer-grid small, .f-col small.muted, .lms-nav-label, .rv-tabs i { font-size: 12px; }}

/* ---- 6. Редактор урока на телефоне ----
   Блоки стояли с координатами компьютерного холста: на телефоне это давало
   гигантские пустые промежутки, а сам холст был шире экрана. */
@media (max-width: 900px) {
  /* сетка не могла сжаться: холст 585 px в окне 390 px и правая часть обрезалась */
  .t-dash-studio { grid-template-columns: minmax(0, 1fr) !important; }
  .t-dash-studio > * { min-width: 0; }
  #studio-root, #studio-root .ls-wrap { max-width: 100%; }
  .ls-editor, .ls-main, .lse-stage, .lse-page { min-width: 0; max-width: 100%; }
  #studio-root .ls-tree { max-height: 42vh; }
}
@media (max-width: 860px) {
  .lse-canvas.lc-stack { min-height: 0; }
  .lse-canvas.lc-stack > .lse-block {
    top: auto !important; left: auto !important; width: auto !important; min-height: 0 !important;
  }
  /* растягивать блок по ширине на телефоне нечего — ручки только мешают */
  .lse-canvas.lc-stack .lse-rs { display: none; }
  .lse-canvas.lc-stack > .lse-block::before { inset: -3px -6px; }
  .lse-canvas.lc-stack .lse-bar { opacity: 1; transform: none; pointer-events: auto; }
  .lse-canvas.lc-stack .lse-bar button, .ls-icon-btn { min-width: 40px; min-height: 40px; }
  /* на телефоне подсказка про мышь только мешает: показываем короткую памятку */
  .lse-hint-full { display: none; }
  .lse-hint-touch { display: inline; }
}
.lse-hint-touch { display: none; }

/* ---- 7. Страница курса: программа уезжала за правый край ----
   Строка урока — flex, у названия min-width:auto: длинное название распирало ряд,
   и кнопка «Смотреть» обрезалась справа. */
@media (max-width: 860px) {
  .program-list { grid-template-columns: minmax(0, 1fr); }
  .program-list > li { min-width: 0; }
  .program-item { gap: 10px; padding: 12px; }
  .program-item .p-title { min-width: 0; }
  .program-item .p-title small { font-size: 12px; }
  .program-item .btn, .program-item .btn-sm { flex: none; }
  .program-item .num { width: 32px; height: 32px; border-radius: 10px; }
}

/* ---- 8. Плеер урока: увеличенные кнопки не помещались в строку ---- */
@media (max-width: 860px) {
  .ctrl-row { flex-wrap: wrap; gap: 2px; }
  /* ползунок громкости 70×16 пальцем не взять, громкость — кнопками телефона */
  .pvol-wrap { display: none; }
}

/* ---------- Модули программы курса ---------- */
.program-mods { display: grid; gap: 10px; }
.program-mod { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.program-mod-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; text-align: left; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .2s; }
.program-mod-head:hover { background: var(--surface-2); }
.program-mod-chev { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); transition: transform .2s var(--ease); }
.program-mod-chev svg { width: 16px; height: 16px; }
.program-mod.open .program-mod-chev { transform: rotate(180deg); }
.program-mod-title { flex: 1; min-width: 0; }
.program-mod-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.program-mod .program-list { display: none; padding: 0 10px 10px; }
.program-mod.open .program-list { display: grid; }
.program-mod.is-loose { border-style: dashed; }
.program-mod.is-loose .program-mod-title { color: var(--muted); }

/* ---------- Модули в боковой программе урока ---------- */
.ls-mods { display: grid; gap: 8px; }
.ls-mod { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ls-mod-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; text-align: left; font: 700 13px var(--font); cursor: pointer; }
.ls-mod-head:hover { background: var(--surface-2); }
.ls-mod-chev { display: grid; place-items: center; width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease); }
.ls-mod-chev svg { width: 14px; height: 14px; }
.ls-mod.open .ls-mod-chev { transform: rotate(180deg); }
.ls-mod-title { flex: 1; min-width: 0; }
.ls-mod-count { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 7px; }
.ls-mod-body { display: none; padding: 0 4px 6px; }
.ls-mod.open .ls-mod-body { display: block; }
.ls-mod.is-loose { border-style: dashed; }
.ls-mod.is-loose .ls-mod-title { color: var(--muted); }

/* авто-формулы в тексте */
.lc-auto-formula { margin: 8px 0; text-align: center; overflow-x: auto; }
.auto-math-text .lc-math { vertical-align: middle; }

/* AI-разбор: баллы по пунктам, низкая уверенность, правка текста перед отправкой */
.rv-ai-scores table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.rv-ai-scores td { padding: 6px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.rv-ai-scores td:nth-child(2) { white-space: nowrap; font-weight: 800; }
.rv-ai-scores td.ok { color: var(--ok, #16a34a); } .rv-ai-scores td.part { color: var(--warn, #b45309); } .rv-ai-scores td.bad { color: var(--bad, #dc2626); }
.rv-ai-low { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg, #fef3c7); color: var(--warn, #92400e); font-size: 13px; }
.rv-ai-sharebox { display: grid; gap: 8px; margin-top: 12px; }
.rv-ai-sharebox label { font-weight: 700; font-size: 13px; }
.rv-ai-sharebox textarea { width: 100%; font: inherit; font-size: 14px; }

/* регистрация: ученик или родитель */
.auth-kind { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0; border: 0; }
.auth-kind legend { width: 100%; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.auth-kind label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1.5px solid var(--line, #e3e3e8); border-radius: 14px; cursor: pointer; font-weight: 600; }
.auth-kind label:has(input:checked) { border-color: currentColor; background: var(--surface-2, rgba(0, 0, 0, .04)); }
@media (orientation: portrait) {
  .player:fullscreen { justify-content: center; background: #000; }
  .player:fullscreen .screen { flex: none; width: 100%; aspect-ratio: 16 / 9; }
}

/* ===== 152-ФЗ: согласия при регистрации, 2FA, приватность ===== */
.auth-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.auth-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #e11d6a; }
.auth-check a { color: var(--accent-ink, #c2185b); }
.auth-minor { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-2, #e3e3e8); border-radius: 14px; background: var(--surface-2, rgba(0,0,0,.03)); }
.auth-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.auth-legal { margin: 2px 0 0; text-align: center; }
.cookie-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pp-2fa-state { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.04)); font-size: 14px; line-height: 1.45; }
.pp-2fa-state.is-on { background: rgba(34,197,94,.12); color: var(--ok, #16a34a); font-weight: 600; }
.pp-2fa-steps { display: grid; gap: 10px; margin: 14px 0 18px; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.pp-secret { display: inline-block; margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2, #f2f2f5); font: 600 15px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .18em; word-break: break-all; }
.pp-recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.pp-recovery code { padding: 8px 10px; border: 1px dashed var(--border-2, #cfcfd6); border-radius: 10px; text-align: center; font: 600 14px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
/* данные и документы в профиле */
.pp-privacy-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.pp-privacy-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); color: var(--accent-ink); }
.pp-privacy-ico svg { width: 22px; height: 22px; }
.pp-privacy-head h3 { margin: 0 0 4px; }
.pp-privacy-head p { margin: 0; max-width: 62ch; }
.pp-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-doc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid transparent; transition: border-color .2s, background-color .2s, transform .2s; }
.pp-doc:hover { border-color: var(--border); background: var(--surface); transform: translateY(-2px); }
.pp-doc-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--muted); }
.pp-doc-ico svg { width: 17px; height: 17px; }
.pp-doc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-doc-tx b { font-size: 14px; line-height: 1.3; }
.pp-doc-tx small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.pp-doc-go { flex: none; margin-left: auto; color: var(--muted); }
.pp-doc-go svg { width: 16px; height: 16px; display: block; }
.pp-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.pp-danger-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 62ch; }
.pp-danger-tx b { font-size: 14px; }
.pp-danger-tx small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pp-danger .btn { flex: none; }
@media (max-width: 760px) {
  .pp-docs { grid-template-columns: minmax(0, 1fr); }
  .pp-danger { align-items: flex-start; }
  .pp-danger .btn { width: 100%; justify-content: center; }
}
.pp-narrow-form { max-width: 360px; margin-top: 14px; }
@media (max-width: 640px) {
  .cookie-actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie-actions .cookie-btn { width: 100%; justify-content: center; }
  .pp-recovery { grid-template-columns: 1fr; }
}