/* W1.1' per-page split of tasks/trainer.css (W1_1prime_PLAN). Generated by split_css.cjs. */
/* Cascade: load order MUST be tokens -> base -> page -> print (no @layer; layered
   !important would invert base-vs-print precedence). Enforced by check_trainer_css_layers. */
/* @keyframes/@font-face */

@keyframes homeBadgeShimmer{
  0%{opacity:.55}
  50%{opacity:1}
  100%{opacity:.55}
}


/* Shake при неверном ответе */
@keyframes ht-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}



*{box-sizing:border-box}

/* мобильные браузеры (Chrome mobile, iOS Safari) при дефолте text-size-adjust:auto
   АВТО-увеличивают текст после загрузки контента → страница «раздувается» ~110%, нижняя
   панель уезжает под экран. Фиксируем 100% — текст рендерится в своём CSS-размере.
   (В headless-Chromium авто-увеличение выключено, поэтому в тестах не воспроизводилось.) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


.hidden{display:none !important}

h1,h2{margin:0 0 10px}

h1{font-size:26px}

h2{font-size:20px}

p{margin:8px 0}


.container{
  max-width:1080px;
  margin:28px auto;
  padding:0 16px;
}


.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
}


/* оверлей загрузки */
#loadingOverlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  font-size:15px;
  color:var(--text-dim);
}


/* кнопки */
button{
  appearance:none;
  border:1px solid var(--border);
  background:var(--muted);
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  transition:.12s ease-in-out;
  font:inherit;
}

button:hover{filter:brightness(1.06)}

button:disabled{opacity:.55;cursor:not-allowed}


/* поля */
input[type="text"],input[type="number"]{
  background:var(--muted);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
}

input[type="number"]{
  width:36px;
  text-align:center;
  appearance:textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

input[type="number"]{-moz-appearance:textfield}


/* ссылки */
a{color:var(--accent);text-decoration:none}

a:hover{text-decoration:underline}




/* ============================================================================
   L1 · SCREEN / TRAINER UI — PART A (controls, accordion, runner, summary)
   Инварианты:
   - Screen-side UI для picker/bulk-controls, mode-toggle, theme-toggle,
     accordion, student-home badges layout, runner (qwrap/answer-row/result/
     shake), summary stats, sheet-panel container, mobile/desktop breakpoints
     для этих UI-элементов.
   - Не используют body.print-layout-active.
   - Не вложены в @media print.
   - Могут содержать @media (max-width|min-width) — screen breakpoints.
   ============================================================================ */

/* массовые кнопки (ряд 2) */
#picker .bulk-controls{
  display:flex;
  align-items:center;
  gap:var(--btn-gap);
  flex-wrap:wrap;
  margin:0; /* вертикальные отступы задаёт .sub-controls */
}

#picker .bulk-controls .bulk-hint{
  font-size:12px;
  color:var(--text-dim);
  margin-left:6px;
}

#picker .bulk-controls button{
  padding:6px 10px;
  font-size:13px;
  border-radius:10px;
}


/* вертикальные отступы между рядами */
#picker{
  --block-gap:18px;
  --btn-gap:8px;
  --row-gap:var(--btn-gap);
}

#picker .accordion{
  margin-top:var(--block-gap);
}


/* верхний блок выбора (ряд 1) */
#picker .controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}

#picker .controls-actions-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--btn-gap);
}

#picker .controls-actions-right button{
  min-width:132px;
  padding:6px 10px;
  font-size:13px;
  border-radius:10px;
}
@media (max-width: 640px) {

  #picker .controls{
    justify-content:flex-start;
  }

  #picker .controls-actions-right{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}


/* компактная кнопка (как в bulk-controls) */
.btn-compact{
  padding:6px 10px;
  font-size:13px;
  border-radius:10px;
}

/* чекбокс "Перемешать задачи" */
#picker .controls .shuffle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--text-dim);
}

#picker .controls .shuffle input{
  margin:0;
}


/* переключатель режимов */
.mode-toggle{
  display:inline-flex;
  align-items:center;
  padding:2px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border);
}

.mode-toggle .mode-btn{
  border:none;
  background:transparent;
  padding:6px 12px;
  border-radius:999px;
  color:var(--text-dim);
  font-size:13px;
  font-weight:500;
  box-shadow:none;
}

.mode-toggle .mode-btn:hover:not(.active){
  background:rgba(148,163,184,.12);
}

.mode-toggle .mode-btn.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 0 1px rgba(59,130,246,.6);
}


/* тумблер темы (стили оставляем, но сам переключатель скроем ниже) */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
}


.theme-toggle-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}


.theme-toggle-label{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:48px;
  height:24px;
  padding:2px 4px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border);
  box-sizing:border-box;
  transition:background-color .2s ease,border-color .2s ease;
  font-size:14px;
}


.theme-toggle-icon{
  line-height:1;
  transition:opacity .2s ease,transform .2s ease;
}


/* светлая тема – акцент на солнце */
html[data-theme="light"] .theme-toggle-icon-light,
body[data-theme="light"] .theme-toggle-icon-light{
  opacity:1;
}

html[data-theme="light"] .theme-toggle-icon-dark,
body[data-theme="light"] .theme-toggle-icon-dark{
  opacity:.4;
}


/* тёмная тема – акцент на луне */
html[data-theme="dark"] .theme-toggle-icon-light,
body[data-theme="dark"] .theme-toggle-icon-light{
  opacity:.4;
}

html[data-theme="dark"] .theme-toggle-icon-dark,
body[data-theme="dark"] .theme-toggle-icon-dark{
  opacity:1;
}


/* временно скрываем тумблер темы на всех страницах */
.theme-toggle{
  display:none !important;
}


/* аккордеон (страница выбора задач и уникальные прототипы) */
.accordion{margin-top:12px}

.node{
  /* без разделительных линий, отступы — середина между старым и текущим */
  border-bottom:none;
  padding:12px 0;
}

.node:last-child{border-bottom:none}


.node .row{
  display:flex;
  align-items:center;
}


/* отступ между счётчиком и названием */
.node .row .countbox{margin-right:20px}

.node.section .section-title{margin-left:20px}


/* секция */
.section-title{
  background:transparent;
  border:none;
  padding:0;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  flex:1 1 auto;
  min-width:0;
  white-space:normal;
}


/* заголовки разделов на главной странице — чуть крупнее и полужирные */
#accordion .section-title{
  font-size:15px;
  font-weight:600;
}


/* (раньше здесь был счётчик возле каждой темы на странице УП) */

/* кнопка «Уникальные прототипы» — показываем только у раскрытой секции */
.unique-btn{
  margin-left:12px;
  display:none;
}

.node.section.show-uniq .unique-btn{
  display:inline-flex;
}

.unique-btn svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.node .spacer{flex:1}


/* темы (подразделы) — убираем жирный шрифт */
.node.topic .title{
  font-weight:400;
}


/* дети */
.children{
  margin:8px 0 6px 32px;
  display:none;
}

.node.section.expanded>.children{display:block}


/* счётчики */
.countbox{
  display:flex;
  align-items:center;
  gap:6px;
}

.countbox .btn{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--muted);
  color:var(--text);
  border-radius:8px;
  touch-action:manipulation; /* П2: без double-tap-to-zoom при быстром двойном тапе по +/− */
}

.countbox .btn:active{transform:translateY(1px)}

/* П2: убираем double-tap zoom на всех счётчиках/степперах/кнопках подборки (мобайл/iOS) */
.countbox, .tp-ctr-btn, .added-task-act, .added-task-stepper, .added-task-acts{ touch-action:manipulation; }


/* блок действий в шапке (лист задач) */
.run-head .actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}


/* результат */
.result{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel-2);
}

.result.ok{
  border-color:#0ea572;
  background:rgba(16,185,129,.12);
}

.result.bad{
  border-color:#cf3d3d;
  background:rgba(239,68,68,.12);
}


/* навигация */
.nav{
  margin-top:12px;
  display:flex;
  gap:8px;
}


/* сводка */
#summary .stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;
  margin-top:8px;
}

#summary .stats>div{
  background:var(--panel-2);
  border:1px solid var(--border);
  padding:10px;
  border-radius:10px;
}


/* отчёт: статистика (десктоп = полный набор, мобилка = компактный) */
#summary .stats>div.stat-compact{ display:none; }
@media (max-width: 520px) {

  #summary .stats>div.stat-full{ display:none; }

  #summary .stats>div.stat-compact{ display:block; }


  /* цвет как у бейджей на главной (аккордеон) */
  #summary .stats>div.stat-score.gray{ background: rgba(148,163,184,.10); }

  #summary .stats>div.stat-score.red{ background: rgba(239,68,68,.14); }

  #summary .stats>div.stat-score.yellow{ background: rgba(245,158,11,.16); }

  #summary .stats>div.stat-score.lime{ background: rgba(132,204,22,.14); }

  #summary .stats>div.stat-score.green{ background: rgba(16,185,129,.12); }


  /* время: как green-бейдж (>=90%) */
  #summary .stats>div.stat-time{
    background: rgba(16,185,129,.12);
    border-color: var(--border);
    color: inherit;
  }
}

#summary .actions{
  margin-top:10px;
  display:flex;
  gap:8px;
}


/* небольшая подпись "Всего задач" в режиме списка */
.list-meta{
  margin:4px 0 8px;
  font-size:13px;
  color:var(--text-dim);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


/* внутренний контейнер как в ДЗ */
.sheet-panel{
  margin-top:14px;
}

/* общий вариант — на всех страницах с раннером */
#runner{
  padding-bottom:40px;
}
@media (max-width:640px) {

  input[type="number"]{width:56px}


  /* шапка выбора задач */
  #picker .controls-right{
    width:100%;
    align-items:flex-start;
  }

  #picker .controls-right .right-actions{
    align-items:flex-start;
  }


  /* аккордеон на узких экранах:
     текст раздела остаётся в одной строке со счётчиком,
     но может переноситься внутри себя на 2+ строки */
  .node .row{
    align-items:flex-start;
  }

  .node.section .section-title{
    margin-left:12px;
  }

  .node .row .countbox{
    margin-right:12px;
  }

  .unique-btn{
    margin-left:8px;
  }
}
@media (min-width:900px) {

  /* середина между очень плотным (4px) и текущим (12px) вариантом */
  .accordion .node{
    padding:8px 0;
  }


  /* компактнее кнопки - и + */
  .accordion .countbox .btn{
    width:24px;
    height:24px;
    padding:0;
    border-radius:6px;
  }


  /* компактнее поле количества */
  .accordion .countbox input[type="number"],
  .accordion .countbox .count{
    padding:4px 6px;
    height:24px;
    font-size:13px;
  }


  /* заголовок раздела чуть мельче и плотнее по строке */
  #accordion .section-title{
    font-size:14px;
    line-height:1.2;
  }


  /* меньше зазор между счётчиком и заголовком */
  .accordion .node .row .countbox{
    margin-right:12px;
  }
}


/* ============================================================================
   L2 · SCREEN / CARDS (base grid, figure cases, spacing, mobile, figure-box)
   Инварианты:
   - Всё про .task-card, .ws-item, .task-fig, .ws-fig, .task-num, .ws-num,
     .task-stem, .ws-stem, .task-ans, .ws-ans, .ws-ans-wrap,
     .print-ans-line{display:none} screen-default, .sheet-panel card
     overrides, @media (max-width: 720px) mobile stacking, light-theme
     figure overrides.
   - Не используют body.print-layout-active.
   - Не вложены в @media print.
   ============================================================================ */

/* ------- общие карточки задач (лист + уникальные + тест) ------- */

/* строка «Ответ:» для печати — скрыта на экране, видна только в @media print */
.print-ans-line { display: none; }
.task-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}


/* сама карточка */
.ws-item,
.task-card{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
}


/* в светлой теме фон карточки делаем белым */
html[data-theme="light"] .ws-item,
body[data-theme="light"] .ws-item,
html[data-theme="light"] .task-card,
body[data-theme="light"] .task-card{
  background:#ffffff;
}


/* ── Номер слева, текст справа: базовая сетка для ВСЕХ карточек ───────────
   Все task-card и ws-item получают двухколоночную сетку: auto-ширина бейджа
   + 1fr текст. Карточки с картинкой получают третью колонку под изображение.
   ──────────────────────────────────────────────────────────────────────── */
.task-card,
.ws-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "num stem"
    "ans ans";
  column-gap: 12px;
  align-items: start;
}


/* Привязка элементов */
.task-card .task-num, .ws-item .ws-num   { grid-area: num;  justify-self: start; align-self: start; margin-bottom: 0; }

.task-card .task-stem, .ws-item .ws-stem { grid-area: stem; margin-top: 7px; }

.task-card .task-ans,  .ws-item .ws-ans  { grid-area: ans; }


/* Карточки с маленькой картинкой (задания 1, 3): три колонки, картинка ~25% */
.task-card:has(.task-fig),
.ws-item:has(.ws-fig) {
  grid-template-columns: auto minmax(0, 1fr) minmax(132px, 28%);
  grid-template-rows: auto auto;
  grid-template-areas:
    "num stem fig"
    "ans ans ans";
  column-gap: 12px;
}

.task-card:has(.task-fig) .task-fig { grid-area: fig; margin: 15px 22px 0 0; align-self: start; justify-self: end; }

.task-card:has(.task-fig) .task-fig img { display: block; }

.ws-item:has(.ws-fig) .ws-fig { grid-area: fig; margin: 15px 22px 0 0; align-self: start; justify-self: end; }

.ws-item:has(.ws-fig) .ws-fig img { display: block; }


/* Карточки с большой картинкой (задания 2, 8, 11): картинка 38% */
.task-card:has([data-fig-size="large"]),
.ws-item:has([data-fig-size="large"]) {
  grid-template-columns: auto minmax(0, 1fr) minmax(164px, 38%);
  column-gap: 16px;
}


/* Векторные SVG (задание 2): обрезаем белое поле снизу (контент ≈ y=8..195 из 220px viewBox). */
.task-fig[data-fig-type="vectors"],
.ws-fig[data-fig-type="vectors"] {
  overflow: hidden;
  aspect-ratio: 220 / 187;
}


/* Screen-only layout для vectors:
   на экране картинка живёт в обычной правой колонке без print-driven
   фиксированной 220px-геометрии и без резервирования нижнего пространства
   под печатные сценарии. */
.task-card:has(.task-fig[data-fig-type="vectors"]),
.ws-item:has(.ws-fig[data-fig-type="vectors"]) {
  grid-template-columns: auto minmax(0, 1fr) minmax(144px, 34%);
  grid-template-rows: auto auto;
  grid-template-areas:
    "num stem fig"
    "ans ans ans";
}

/* Картинка — grid-area: fig (из общего правила), обнуляем лишние отступы.
   margin-top: -10px поднимает картинку на 10px без изменения grid-структуры. */
.task-card:has(.task-fig[data-fig-type="vectors"]) .task-fig,
.ws-item:has(.ws-fig[data-fig-type="vectors"]) .ws-fig {
  margin: -10px 0 0 0;
}

.task-card:has(.task-fig[data-fig-type="vectors"]) .task-fig img,
.ws-item:has(.ws-fig[data-fig-type="vectors"]) .ws-fig img {
  width: 100%;
  display: block;
}

.task-card:has(.task-fig[data-fig-type="vectors"]) .task-stem,
.ws-item:has(.ws-fig[data-fig-type="vectors"]) .ws-stem {
  margin-top: 7px;
}

/* Задание 2 (vectors) без картинки: inline-формулы плотнее обычного текста,
   поэтому визуально добавляем чуть больший отступ до стема. */
.task-card:not(:has(.task-fig))[data-topic-id^="2."] .task-stem,
.ws-item:not(:has(.ws-fig))[data-topic-id^="2."] .ws-stem {
  margin-top: 3px;
}

.task-card:has(.task-fig[data-fig-type="vectors"]) .task-ans,
.ws-item:has(.ws-fig[data-fig-type="vectors"]) .ws-ans {
  align-self: start;
  margin-bottom: 0;
}


/* В screen-mode video-slot остаётся частью answer-row, а не отдельным
   абсолютно позиционированным хвостом карточки. */
.ws-item:has(.ws-fig[data-fig-type="vectors"]) .video-solution-slot {
  position: static;
  margin-left: auto;
}


/* Смещённые варианты (2.1.3_1.svg, 2.2.2_1.svg) — вниз 15px, влево 20px */
.task-card:has(.task-fig[data-fig-variant="shifted"]) .task-fig,
.ws-item:has(.ws-fig[data-fig-variant="shifted"]) .ws-fig {
  top: 15px;
  right: 20px;
}


/* ── Задание 8 (derivatives): wide-landscape — под текстом,
   portrait и near-square landscape-narrow — справа. ── */
.task-card:has(.task-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]):not([data-fig-orientation="landscape-narrow"])),
.ws-item:has(.ws-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]):not([data-fig-orientation="landscape-narrow"])) {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "num stem"
    ".   fig"
    "ans ans";
}

.task-card:has(.task-fig[data-fig-type="derivatives"][data-fig-orientation="portrait"]),
.task-card:has(.task-fig[data-fig-type="derivatives"][data-fig-orientation="landscape-narrow"]),
.ws-item:has(.ws-fig[data-fig-type="derivatives"][data-fig-orientation="portrait"]),
.ws-item:has(.ws-fig[data-fig-type="derivatives"][data-fig-orientation="landscape-narrow"]) {
  grid-template-columns: auto minmax(0, 1fr) minmax(144px, 32%);
  grid-template-rows: auto auto;
  grid-template-areas:
    "num stem fig"
    "ans ans ans";
}


/* Screen-only ширина graphs не должна повторять print-width один в один. */
.task-card:has(.task-fig[data-fig-type="graphs"]),
.ws-item:has(.ws-fig[data-fig-type="graphs"]) {
  grid-template-columns: auto minmax(0, 1fr) minmax(136px, 31%);
}


/* Задание 8 (derivatives) wide-landscape: по центру + ограничение ширины.
   Portrait и near-square landscape-narrow идут в right-column case. */
.task-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]):not([data-fig-orientation="landscape-narrow"]),
.ws-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]):not([data-fig-orientation="landscape-narrow"]) {
  width: 56%;
  margin-left: auto;
  margin-right: auto;
}

.task-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]):not([data-fig-orientation="landscape-narrow"]) img,
.ws-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]):not([data-fig-orientation="landscape-narrow"]) img {
  width: 100%;
  display: block;
}

.task-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]) img,
.ws-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]) img {
  width: 100%;
  display: block;
}

/* ── Задания 2 (vectors) и 11 (graphs): верх картинки = верх первой строки.
   Убираем vertical padding — контейнер прижат к изображению сверху и снизу. ── */
.task-fig[data-fig-type="vectors"], .ws-fig[data-fig-type="vectors"],
.task-fig[data-fig-type="graphs"],  .ws-fig[data-fig-type="graphs"] {
  padding-top: 0;
  padding-bottom: 0;
}



/* "номер" задачи / прототипа */
.ws-num,
.task-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:6px;
  border:2px solid var(--border);
  font-weight:600;
  font-size:13px;
  margin-bottom:4px;
  min-width: calc(1.5em + 15px);
}


/* подсветка номера задачи в итоговом экране ДЗ */
.task-num.ok{ border-color:#166534; }

.task-num.bad{ border-color:#b91c1c; }


.added-task-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}


.modal-badge-group{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex:0 0 auto;
}


.modal-stats-badge,
.modal-date-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:5px 8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.10);
  color:var(--text);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  flex:0 0 auto;
}

.modal-stats-badge{ min-width:96px; }

/* WFX2 (2026-06-05): бейджи модалки подбора прототипов — ЕДИНАЯ фиксированная ширина,
   точность ровно под давностью. 96px = прежняя проверенная min-width .modal-stats-badge:
   вмещает самый широкий контент обоих бейджей («100% 3/3», «Не решал», «Загрузка…»,
   дату «дд.мм.гг») без переноса/обрезки. box-sizing:border-box — чтобы padding+border
   входили в ширину и обе пилюли были РОВНО одной ширины (justify-content:center задан выше).
   Класс .proto-modal-* стоит ТОЛЬКО на этой модалке (added-tasks с .added-task-* не
   затрагивается). Правило общее для ученика и учителя — модальный бейдж у них один. */
.proto-modal-badge,
.proto-modal-date-badge{ width:96px; box-sizing:border-box; }

.modal-date-badge{ min-width:74px; font-weight:600; }

.modal-date-badge[hidden]{ display:none !important; }

.modal-stats-badge b{font-weight:600}

.modal-stats-badge .small{font-size:10px;color:var(--text-dim)}

.modal-stats-badge.gray,
.modal-date-badge.gray{background:rgba(148,163,184,.10)}

.modal-stats-badge.green,
.modal-date-badge.green{background:rgba(16,185,129,.12)}

.modal-stats-badge.lime,
.modal-date-badge.lime{background:rgba(132,204,22,.14)}

.modal-stats-badge.yellow,
.modal-date-badge.yellow{background:rgba(245,158,11,.16)}

.modal-stats-badge.red,
.modal-date-badge.red{background:rgba(239,68,68,.14)}


/* текст условия */
.ws-stem,
.task-stem{
  margin-top:2px;
  overflow-wrap:anywhere;
}


/* ответ */
.ws-ans,
.task-ans{
  margin-top:6px;
}


.sheet-panel .task-card .task-ans{
  justify-self:start;
  width:100%;
}

.sheet-panel .task-card:has(.task-fig) .task-ans{
  margin-top:10px;
}

.sheet-panel .task-card .task-ans input[type="text"]{
  width:220px;
  max-width:100%;
}


/* В карточках без картинки — две строки отступа между условием и ответом */
.task-card:not(:has(.task-fig)) .task-ans,
.ws-item:not(:has(.ws-fig)) .ws-ans {
  margin-top: 2em;
}


/* JS выставляет data-stem-ends="formula" после MathJax-рендера,
   если последним значимым содержимым стема является блочная формула. */
.task-card:not(:has(.task-fig))[data-stem-ends="formula"] .task-ans,
.ws-item:not(:has(.ws-fig))[data-stem-ends="formula"] .ws-ans {
  margin-top: 6px;
}


/* ws-ans-wrap: обёртка для ответа + кнопки видео (уникальные прототипы).
   Занимает grid-area: ans вместо самого .ws-ans; gap = column-gap грида. */
.ws-item .ws-ans-wrap {
  grid-area: ans;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.ws-item:not(:has(.ws-fig)) .ws-ans-wrap {
  margin-top: 2em;
}

.ws-item:not(:has(.ws-fig))[data-stem-ends="formula"] .ws-ans-wrap {
  margin-top: 6px;
}

.ws-ans-wrap .ws-ans {
  margin-top: 0;
}
@media (max-width: 720px) {

  body:not([data-home-variant]) .container {
    margin: 20px auto;
    padding: 0 10px;
  }


  body:not([data-home-variant]) .panel {
    padding: 14px 12px;
  }


  .task-card,
  .ws-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }


  .task-card .task-stem,
  .ws-item .ws-stem {
    min-width: 0;
  }


  .task-card:has(.task-fig),
  .ws-item:has(.ws-fig) {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "num stem"
      ". fig"
      "ans ans";
  }


  .task-card:has(.task-fig[data-fig-type="vectors"]),
  .ws-item:has(.ws-fig[data-fig-type="vectors"]),
  .task-card:has(.task-fig[data-fig-type="graphs"]),
  .ws-item:has(.ws-fig[data-fig-type="graphs"]),
  .task-card:has(.task-fig[data-fig-type="derivatives"][data-fig-orientation="portrait"]),
  .ws-item:has(.ws-fig[data-fig-type="derivatives"][data-fig-orientation="portrait"]) {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "num stem"
      ". fig"
      "ans ans";
  }


  .task-card:has(.task-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])),
  .ws-item:has(.ws-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])) {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "num stem"
      "fig fig"
      "ans ans";
  }


  .task-card:has(.task-fig) .task-fig,
  .ws-item:has(.ws-fig) .ws-fig {
    justify-self: start;
    margin: 12px 0 0;
    width: auto;
    max-width: 100%;
  }


  .task-card:has(.task-fig[data-fig-type="vectors"]) .task-fig,
  .ws-item:has(.ws-fig[data-fig-type="vectors"]) .ws-fig {
    margin: 12px 0 0;
  }


  .task-card:has(.task-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])) .task-fig,
  .ws-item:has(.ws-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])) .ws-fig {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
  }


  .task-card:has(.task-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])) .task-ans,
  .ws-item:has(.ws-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])) .ws-ans,
  .ws-item:has(.ws-fig[data-fig-size="large"]:not([data-fig-orientation="portrait"])) .ws-ans-wrap {
    margin-top: 10px;
  }


  .task-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]),
  .ws-fig[data-fig-type="derivatives"]:not([data-fig-orientation="portrait"]) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }


  .task-card:has(.task-fig[data-fig-type="vectors"]) .task-ans,
  .ws-item:has(.ws-fig[data-fig-type="vectors"]) .ws-ans {
    align-self: start;
    margin-top: 10px;
    margin-bottom: 0;
  }


  .ws-item .ws-ans-wrap {
    flex-wrap: wrap;
  }


  .ws-item:has(.ws-fig[data-fig-type="vectors"]) .video-solution-slot {
    margin-left: 0;
  }
}


.ws-ans summary,
.task-ans summary{
  cursor:pointer;
}


/* картинка в карточке (лист задач, уникальные, тест) */
.ws-fig,
.task-fig{
  margin:15px 0 6px;
  padding:4px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:0;
}


.ws-fig img,
.task-fig img{
  max-width:100%;
  max-height:260px;
  object-fit:contain;
  display:block;
  border:none;
  border-radius:0;
  background:transparent;
}


/* Размер max-height зависит от типа задания */
.task-fig[data-fig-size="small"] img { max-height:180px; }


/* large (задания 2, 8, 11) — заполнить колонку целиком */
.task-fig[data-fig-size="large"] img { width:100%; height:auto; max-height:none; }

.ws-fig[data-fig-size="large"] img   { width:100%; height:auto; max-height:none; }


/* в светлой теме делаем фон/рамку вокруг картинок более лёгкими */
html[data-theme="light"] .ws-fig,
body[data-theme="light"] .ws-fig,
html[data-theme="light"] .task-fig,
body[data-theme="light"] .task-fig{
  border:none;
  background:transparent;
  padding:0;
}


/* ============================================================================
   L3 · SCREEN / TRAINER UI — PART B (MathJax, tooltip, header, modals, hw,
                                      myhw, smart panels, profile, my_students,
                                      teacher-student-view, score-thermo)
   Инварианты:
   - Остальной screen-UI: .q-card, MathJax container, [data-tip] tooltip,
     .page-head / .create-head / auth-mini / home-icon-btn, print-dialog
     (screen-part), .print-custom-title{display:none} screen-default,
     .hw-create-ans{display:none} screen-default, hw-panel, hw-summary,
     modal task picker, proto picker, vs-modal, user-menu, hw-bell,
     myhw, students-list, smart-panel / smart-hw-*, profile menu,
     my_students hardfixes, teacher-student-view accordion и score-thermo.
   - Не используют body.print-layout-active.
   - Не вложены в @media print.
   - Могут содержать @media (max-width|min-width) — screen breakpoints
     (mobile/tablet/desktop-specific UI).
   ============================================================================ */

/* одиночная карточка вопроса в режиме тестирования */
.q-card{
  margin-top:8px;
}


/* фикс для SVG-рендера MathJax, чтобы корень не обрезался */
mjx-container[jax="SVG"] > svg{
  overflow:visible;
}


/* общие ограничения для формул, чтобы не вылезали за панель */
mjx-container{
  max-width:100%;
  overflow-x:auto;
}


/* ── Кастомный tooltip: data-tip="..." → мгновенный, красивый ── */
[data-tip]{position:relative;}

[data-tip]::after,
[data-tip]::before{
  position:absolute;
  pointer-events:none;
  opacity:0;
  transition:opacity .08s ease;
  z-index:9999;
}

/* Тело tooltip */
[data-tip]::after{
  content:attr(data-tip);
  top:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%);
  background:#3f4a5a;
  color:#fff;
  font-size:12px;
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:500;
  white-space:nowrap;
  padding:5px 10px;
  border-radius:7px;
  line-height:1.4;
  letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* Стрелка tooltip (вверх — указывает на элемент) */
[data-tip]::before{
  content:'';
  top:calc(100% + 3px);
  left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-bottom-color:#3f4a5a;
}

[data-tip]:hover::after,
[data-tip]:hover::before{opacity:1;}


/* фокус — только при навигации с клавиатуры (мышь не подсвечивает) */
button:focus-visible,
input:focus-visible{
  outline:2px solid rgba(59,130,246,.35);
  outline-offset:2px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible){
  outline:none;
}


/* кликабельные названия подтем для выбора прототипов */
#accordion .node.topic .title.proto-clickable{cursor:pointer}

/* Аккордеон (главная ученика И учителя, оба уровня): единая лёгкая hover-анимация —
   название чуть сдвигается вправо, без рамок. Прямоугольная фокус-обводка убрана
   (у подтемы .title — это <div>, не покрытый глобальным button/input:focus-правилом);
   клавиатурный фокус показываем тем же сдвигом. */
#accordion .section-title,
#accordion .node.topic .title{
  transition: transform .15s ease;
}
#accordion .section-title:hover,
#accordion .section-title:focus-visible,
#accordion .node.topic .title:hover,
#accordion .node.topic .title:focus-visible{
  transform: translateX(3px);
}
#accordion .section-title:focus,
#accordion .node.topic .title:focus{
  outline: none;
}


/* hw_create: верхняя панель + авторизация */
.create-head { display:flex; justify-content:space-between; align-items:center; }

.create-head-right { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }



.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.page-head-right {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width: 1024px) {

  header#appHeader.page-head{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    gap:10px;
  }


  header#appHeader.page-head .page-head-left{
    min-width:0;
  }


  /* Right column stacks controls so the account stays at the very top. */
  header#appHeader.page-head .page-head-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-start;
    gap:6px;
    flex-wrap:nowrap;
  }


  /* Auth block ("Антон" / "Войти") should always be first. */
  header#appHeader.page-head .page-head-right .auth-mini{ order:-20; }

  header#appHeader.page-head .page-head-right > #homeBtn{ order:-10; }

  header#appHeader.page-head .page-head-right [data-header-extra="1"]{ order:0; }


  /* Prevent the account button from pushing layout on narrow screens. */
  header#appHeader.page-head .user-menu-btn{ max-width:52vw; }

  header#appHeader.page-head .user-menu-btn-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }


  /* Ensure dropdown never goes out of the viewport. */
  header#appHeader.page-head .user-menu{
    max-width:calc(100vw - 24px);
    min-width:min(240px, calc(100vw - 24px));
    max-height:70vh;
    overflow:auto;
  }
}

.btn.small {
  padding:6px 10px;
  font-size:13px;
  border-radius:10px;
}


.print-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.print-btn-icon {
  flex-shrink:0;
}
@media (max-width:600px) {

  .print-btn-label { display:none; }

  .print-btn { padding:6px 8px; }
}

/* WD4-фикс: кнопку «Печать» показываем только на десктопе (≥1025px) —
   на мобилке/планшете скрываем целиком (ученик и учитель, все task-страницы). */
@media (max-width:1024px) {
  .print-btn { display:none !important; }
}


/* ── Диалог настроек печати ─────────────────────────────────────────────── */
.print-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.print-dialog {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.print-dialog-h {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
}

.print-dialog-field {
  margin-bottom: 14px;
}

.print-dialog-label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  opacity: .75;
}

.print-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 14px;
  background: var(--panel-bg, #fff);
  color: inherit;
  outline: none;
}

.print-dialog-input:focus {
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.2);
}

.print-dialog-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  cursor: pointer;
}

.print-dialog-check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #3b82f6);
  cursor: pointer;
  flex-shrink: 0;
}

.print-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.print-dialog-cancel {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.print-dialog-cancel:hover {
  background: var(--panel-2, rgba(0,0,0,.04));
}

.print-dialog-confirm {
  padding: 8px 18px;
  border-radius: 10px;
  border: none;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.print-dialog-confirm:hover { opacity: .88; }


/* Заголовок, вставляемый перед печатью — скрыт на экране */
.print-custom-title { display: none; }


.fixed-mini-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:46px 1fr 160px 44px;
  gap:10px;
  align-items:end;
}


.fixed-mini-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}


.fixed-mini-label{
  font-size:12px;
  color:var(--text-dim);
}
@media (max-width: 720px) {

  .fixed-mini-card{
    grid-template-columns:46px 1fr 44px;
    grid-template-areas:
      "num q del"
      "num t del";
    align-items:center;
  }

  .fixed-mini-q{ grid-area:q; }

  .fixed-mini-t{ grid-area:t; }
}


.icon-btn {
  width:36px;
  min-width:36px;
  height:36px;
  /* центр символа примерно на 45% высоты (т.е. отступ от низа ~55%) */
  padding:0 0 4px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card, var(--panel));
  cursor:pointer;
  font-size:22px;
  line-height:1;
  text-align:center;
}

.icon-btn:hover { background:rgba(0,0,0,.03); }



.auth-mini { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; position:relative; }

/* Кнопка "На главную": на десктопе остаётся текстовой, на мобилке превращается в иконку справа от "Антон". */
.home-icon-btn{ display:inline-flex; align-items:center; gap:6px; }

.home-icon-btn .home-icon-img{ display:none; width:18px; height:18px; }

.home-icon-btn .home-icon-label{ display:inline; }
@media (max-width: 1024px) {

  header#appHeader.page-head .page-head-right .auth-mini{
    flex-wrap:nowrap;
    gap:6px;
  }


  header#appHeader.page-head .home-icon-btn{
    width:clamp(30px, 8vw, 36px);
    height:clamp(30px, 8vw, 36px);
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  header#appHeader.page-head .home-icon-btn:hover{ background:transparent; }

  header#appHeader.page-head .home-icon-btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px rgba(59,130,246,.35);
  }


  header#appHeader.page-head .home-icon-btn .home-icon-img{ display:block; width:100%; height:100%; }

  header#appHeader.page-head .home-icon-btn .home-icon-label{ display:none; }
}


.auth-email { opacity:.85; }


.topic-auto { opacity:.85; }


/* ---------- modal task picker (hw_create) ---------- */
.modal {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}

.modal-card {
  position:relative;
  width:min(980px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  /* П4: без min-height — высота по контенту (head + карточки), чтобы при 1-2 карточках не было
     пустого места до края; max-height выше + внутренний скролл сохраняют поведение для длинных. */
}

.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--panel-2);
}

.modal-title { font-size:16px; }





/* ---------- proto picker modal (home_student / home_teacher) ---------- */
#protoPickerModal .proto-picker-main{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

#protoPickerModal #protoPickerList{
  flex:1;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

#protoPickerModal #protoPickerHint{ flex-shrink:0; }


.tp-main-actions { display:flex; align-items:center; gap:10px; }


.tp-list {
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}


.tp-item {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel);
}


.tp-item-left { flex:1; min-width:0; }

.tp-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.tp-item-meta { font-size:12px; opacity:.8; margin-bottom:0; }

.tp-item-stem { font-size:14px; line-height:1.35; }

.tp-item-head .modal-badge-group{margin-left:auto}


.tp-preview { display:flex; gap:10px; align-items:flex-start; }

.tp-fig {
  width:96px;
  max-width:96px;
  height:auto;
  /* без рамки/скруглений: картинка без видимого контейнера и без обрезки углов */
  border-radius:0;
  border:none;
  background:transparent;
  display:block;
}


.tp-item-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.tp-ctr-btn {
  width:32px;
  height:32px;
  /* центр символа примерно на 45% высоты (т.е. отступ от низа ~55%) */
  padding:0 0 3px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card, var(--panel));
  cursor:pointer;
  font-size:18px;
  line-height:1;
  text-align:center;
}


.tp-ctr-btn:disabled { opacity:.5; cursor:default; }

.tp-ctr-val { min-width:20px; text-align:center; }

.tp-ctr-cap { font-size:12px; opacity:.75; }


/* ── WD.2.7 — УНИВЕРСАЛЬНАЯ карточка предпросмотра в обеих модалках (ученик + учитель):
   #addedTasksModal (предпросмотр) и #protoPickerModal (аккордеон). Перенесено из home-student.css,
   т.к. home_teacher.html page-CSS не грузит → общий вид должен жить в base.css.
   .task-card — grid; "label" во всю ширину сверху; контролы справа (+/× или степпер). ── */
:is(#addedTasksModal, #protoPickerModal) .added-task-card{
  grid-template-areas: "label label" "num stem" "ans ans" !important;
}
:is(#addedTasksModal, #protoPickerModal) .added-task-card:has(.task-fig){
  grid-template-areas: "label label label" "num stem fig" "ans ans ans" !important;
}
:is(#addedTasksModal, #protoPickerModal) .added-task-toprow{
  grid-area: label; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px;
}
:is(#addedTasksModal, #protoPickerModal) .added-task-toplabel{
  flex:1 1 auto; min-width:0; font-size:13px; line-height:1.3; color:var(--text-dim); overflow-wrap:anywhere;
}
:is(#addedTasksModal, #protoPickerModal) .added-task-right{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; margin-left:auto;
}
:is(#addedTasksModal, #protoPickerModal) .added-task-right .modal-badge-group{ margin-left:0; }
/* кнопки «+» / «×» (предпросмотр) */
:is(#addedTasksModal, #protoPickerModal) .added-task-act{
  flex:0 0 auto; width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text);
  font-size:18px; line-height:1; cursor:pointer;
}
:is(#addedTasksModal, #protoPickerModal) .added-task-act:hover{ background:var(--surface2,#f1f5f9); }
:is(#addedTasksModal, #protoPickerModal) .added-task-act:disabled{ opacity:.4; cursor:not-allowed; }
:is(#addedTasksModal, #protoPickerModal) .added-task-remove{ color:#dc2626; }
:is(#addedTasksModal, #protoPickerModal) .added-task-remove svg{ width:16px; height:16px; display:block; }
/* кнопки закрытия модалок предпросмотра И аккордеона — в стиле карточного крестика
   (тот же размер 28×28/18px), но чёрные (а не красные). Перебивают .btn.small. */
#addedTasksClose, #protoPickerClose{
  flex:0 0 auto; width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text);
  font-size:18px; line-height:1; cursor:pointer; min-width:0;
}
#addedTasksClose:hover, #protoPickerClose:hover{ background:var(--surface2,#f1f5f9); }
/* степпер количества (аккордеон) — кнопки/значение/«из N» используют общие .tp-ctr-* выше */
:is(#addedTasksModal, #protoPickerModal) .added-task-stepper{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
/* контейнер кнопок «+»/«×» (предпросмотр) — единый блок справа, как и степпер */
:is(#addedTasksModal, #protoPickerModal) .added-task-acts{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
/* WD.2.7 fix (П3) — бейджи точности и давности РАВНОЙ ширины (96px, как было у .proto-modal-badge);
   .modal-stats-badge иначе min-width:96, а .modal-date-badge min-width:74 → точность была шире. */
:is(#addedTasksModal, #protoPickerModal) .modal-stats-badge,
:is(#addedTasksModal, #protoPickerModal) .modal-date-badge{ width:96px; box-sizing:border-box; }
/* скролл: фон не скролится, скролится список внутри (.modal-card — flex-колонка с overflow:hidden) */
body.preview-open{ overflow:hidden !important; }
:is(#addedTasksModal, #protoPickerModal) .modal-head{ flex:0 0 auto; }
:is(#addedTasksModal, #protoPickerModal) .added-tasks-main{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* ФБ4 — модалки центрируются по ВИДИМОЙ области (dvh), не по 100vh. На iOS Safari 100vh больше
   видимого (адресная строка/тулбар тянутся за её пределы), и высокая модалка (≈100vh-24) верхним
   краем уходит под верхнюю панель → заголовок+× обрезаются. dvh = динамический вьюпорт (с учётом
   тулбаров). vh-правила выше (.modal inset:0 / .modal-card max-height:100vh) остаются fallback'ом. */
#addedTasksModal, #protoPickerModal { height: 100dvh; bottom: auto; }
#addedTasksModal .modal-card, #protoPickerModal .modal-card { max-height: calc(100dvh - 24px); }

/* WD.2.7 — мобайл: карточка в 1 колонку (картинка под условием). Брейкпоинт как в
   home_student.mobile.css; обе модалки, обе роли.
   П1: модалка НЕ нижний-лист — центрируется через .modal{flex} (как десктоп); .modal-card берёт
   десктоп-размеры (min(980,100vw-24) + max-height + внутренний скролл), растёт по контенту по центру. */
@media (orientation: portrait) and (max-width: 1024px), (max-width: 900px) {
  /* ФБ1 — на мобайле прячем подпись (номер) в ОБЕИХ модалках: длинные строки иначе не влезают.
     Верхняя строка = бейджи + контролы (+/× или степпер). */
  :is(#addedTasksModal, #protoPickerModal) .added-task-toplabel{ display:none !important; }
  /* ФБ3 — номера нет → бейджи ВЛЕВО, контролы (acts/степпер) — ВПРАВО, через space-between
     (без margin:auto и без grow — иначе ломается сжатие/растягивается бейдж). 2 элемента:
     бейдж-группа + единый контейнер контролов (.added-task-acts или .added-task-stepper). */
  :is(#addedTasksModal, #protoPickerModal) .added-task-right{
    flex:1 1 100% !important; margin-left:0 !important; justify-content:space-between !important; flex-wrap:wrap !important;
  }
  :is(#addedTasksModal, #protoPickerModal) .added-task-right .modal-badge-group{ flex:0 1 auto !important; min-width:0 !important; }
  /* ФБ2 — на узком экране бейджи сжимаются РАВНОМЕРНО (вместо фикс-96px из десктоп-правила),
     при крайней нехватке строка переносится (flex-wrap выше). */
  :is(#addedTasksModal, #protoPickerModal) .modal-stats-badge,
  :is(#addedTasksModal, #protoPickerModal) .modal-date-badge{ width:auto !important; flex:0 1 96px !important; min-width:0 !important; }
  /* компактнее зазоры на узких экранах, чтобы строка [бейджи · контролы] влезала (320px) */
  :is(#addedTasksModal, #protoPickerModal) .modal-badge-group{ gap:4px !important; }
  :is(#addedTasksModal, #protoPickerModal) .added-task-stepper{ gap:4px !important; }
  :is(#addedTasksModal, #protoPickerModal) .added-task-stepper .tp-ctr-cap{ display:none !important; }
  :is(#addedTasksModal, #protoPickerModal) .added-task-card,
  :is(#addedTasksModal, #protoPickerModal) .added-task-card:has(.task-fig){
    grid-template-columns: auto minmax(0,1fr) !important;
    grid-template-areas: "label label" "num stem" "fig fig" "ans ans" !important;
  }
  :is(#addedTasksModal, #protoPickerModal) .added-task-card .task-fig{
    grid-area: fig !important; justify-self:center !important; margin:12px auto 0 !important; max-width:100% !important;
  }
  :is(#addedTasksModal, #protoPickerModal) .added-task-card .task-fig img{
    max-width:100% !important; height:auto !important; display:block !important; margin:0 auto !important;
  }
}

.tp-hint { padding:0 12px 12px; }
.tp-topic summary {
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
}
.tp-topic summary:hover { background:rgba(148,163,184,.12); }


.tp-types { padding:6px 0 6px 8px; }

.tp-types-list { display:flex; flex-direction:column; gap:6px; }


/* ------- hw: отступы поля ответа + центрирование кнопки ------- */
.hw-panel{ padding-bottom:0; }

.hw-panel .run-body{
  display:flex;
  flex-direction:column;
  padding-bottom:24px; /* отступ снизу равен отступу над кнопкой */
}

.hw-panel .q-card .task-ans{
  margin-top:18px; /* увеличенный отступ между условием и полем ответа */
}

.hw-panel .q-card .task-ans input[type="text"]{
  width:220px;
}

.hw-panel .hw-bottom{
  display:flex;
  justify-content:center; /* кнопка по центру */
  margin-top:24px;        /* отступ от последней карточки до кнопки */
}


/* ------- hw: итоговый экран (статистика/отчет) ------- */
.hw-summary-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}


.hw-summary-head h2{ margin:0; }


.hw-review-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 14px;
}


.hw-summary-head #restart{
  margin-left:auto;
  white-space:nowrap;
}


/* Отступ от условия задачи до блока "Ваш ответ" (две строки) */
.hw-review-answers{
  margin-top:1.8em;
}


/* Видео-решение в карточке итогов (ДЗ/тренировка) */
.hw-review-answers .hw-ans-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.hw-review-answers .hw-ans-line > :first-child {
  flex:1 1 auto;
  min-width:0;
}
.hw-review-answers .hw-ans-line .video-solution-slot {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}


.video-solution-slot{ white-space:nowrap; }

.video-solution-missing{ opacity:.75; font-size:12px; }


.video-solution-btn{
  border:none;
  background:var(--accent);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  box-shadow:0 0 0 1px rgba(59,130,246,.6);
  cursor:pointer;
  white-space:nowrap;
}

.video-solution-btn:hover{ filter:brightness(.97); }



/* контейнер для кнопок справа в строке ответа */
.hw-actions{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* переопределяем старое margin-left:auto, чтобы слот не "растягивал" контейнер */
.hw-actions .video-solution-slot{ margin-left:0 !important; }
@media (max-width: 520px) {

  /* переносим действия на строку ниже, не трогая десктоп */
  #hw .hw-review-answers .hw-ans-line{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  /* текст занимает всю ширину, кнопки уходят на новую строку */
  #hw .hw-review-answers .hw-ans-line > :first-child{
    flex:1 1 100%;
  }

  /* кнопки на отдельной строке и по левому краю */
  #hw .hw-review-answers .hw-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-top:6px;
  }


  /* то же самое для отчёта после тренировки */
  #summary .hw-review-answers .hw-ans-line{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  #summary .hw-review-answers .hw-ans-line > :first-child{
    flex:1 1 100%;
  }

  #summary .hw-review-answers .hw-actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    margin-top:6px;
  }
}



/* Кнопка "Решить аналог" в итогах ДЗ */
.analog-btn{
  border:none;
  background:var(--success);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  box-shadow:0 0 0 1px rgba(5,150,105,.55);
  cursor:pointer;
  white-space:nowrap;
}

.analog-btn:hover{ filter:brightness(.97); }

.analog-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}



/* Модалка видео-решения (Rutube iframe) */
body.vs-modal-open{ overflow:hidden; }


.vs-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3200;
}

.vs-modal[hidden]{ display:none; }


.vs-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.38);
}


.vs-modal-card{
  position:relative;
  width:min(980px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
}


.vs-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--panel-2);
}

.vs-modal-title{ font-size:16px; }

.vs-modal-close{
  width:36px;
  height:36px;
  padding:0 0 4px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  border-radius:12px;
}

.vs-modal-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.vs-iframe-wrap{
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
}

.vs-iframe-wrap iframe{
  width:100%;
  height:100%;
  border:0;
}


.vs-modal-foot{ opacity:.9; font-size:12px; }


/* hw_create: меню аккаунта */
.user-menu-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* WD.2.6: аватар-кружок в пилюле — по умолчанию скрыт; показывается только на мобайле
   главной ученика (home_student.mobile.css), чтобы пилюля читалась как меню. */
.user-menu-avatar{ display: none; }


.user-menu-btn-label{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.user-menu-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


.hw-bell{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  vertical-align: middle;
}


.hw-bell img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* fallback (если где-то остался SVG) */
.hw-bell svg{
  width: 100%;
  height: 100%;
  fill: var(--danger);
}


.hw-bell--top{
  position: static;
  transform: none;
  margin-left: 2px;
  flex: 0 0 auto;
  pointer-events: none; /* клик по иконке открывает меню как по кнопке */
}


.hw-bell--menu{
  width: 14px;
  height: 14px;
  margin-left: 10px;
}


.myhw-submitted{
  font-size: 12px;
  color: var(--text-dim);
}


.myhw-actions-row{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}




.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 2500;
}


.user-menu-item {
  width: 100%;
  display: block;
  text-align: left;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}


.user-menu-item:hover {
  background: rgba(148,163,184,.12);
}


.user-menu-item:active {
  background: rgba(148,163,184,.18);
}


.user-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}


.user-menu-item.danger {
  color: var(--danger);
}



/* ===== Patch2: students/stats UI ===== */

.muted { color: var(--text-dim); }


.student-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}


.student-problem{
  border-color: rgba(220,38,38,.55);
  box-shadow: 0 0 0 2px rgba(220,38,38,.08);
}


.stat-chip   {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 2px 8px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.stat-gray   { background: rgba(148,163,184,.10); }

.stat-green  { background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.35); }

.stat-lime   { background: rgba(132,204,22,.14); border-color: rgba(132,204,22,.35); }

.stat-yellow { background: rgba(234,179,8,.14); border-color: rgba(234,179,8,.35); }

.stat-red    { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); }



/* ===== Patch 3C: умное ДЗ (рекомендации + план) ===== */

.err{ color: var(--danger); }




/* profile: меню действий (шестерёнка) */
.profile-titlebar{display:flex;align-items:center;gap:10px;}

.profile-menu-wrap{position:relative;display:inline-flex;align-items:center;}

.profile-gear-btn{width:36px;min-width:36px;height:36px;padding:0;font-size:18px;line-height:1;}

.profile-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:2600;}

.profile-menu-item{width:100%;display:block;text-align:left;border:none;background:transparent;box-shadow:none;padding:10px 12px;border-radius:10px;cursor:pointer;}

.profile-menu-item:hover{background:rgba(148,163,184,.12);}

.profile-menu-item:active{background:rgba(148,163,184,.18);}

.profile-menu-item:disabled{opacity:.55;cursor:not-allowed;}
@media (max-width: 1024px) {

  .profile-titlebar{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .profile-titlebar h1{
    min-width:0;
  }
}





/* ===== my_students: панель действий и модалка добавления ===== */
.students-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}

.students-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}


/* небольшая модалка (добавление ученика) */
.modal-card.modal-sm{width:min(520px, calc(100vw - 24px));min-height:auto;}

.modal-body-simple{padding:12px 14px;display:flex;flex-direction:column;gap:12px;}

.modal-actions-simple{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}


/* карточка ученика: шестерёнка и меню действий */
.student-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}

.student-head .student-title{margin-bottom:0;}

.student-menu-wrap{position:relative;display:inline-flex;align-items:center;}

body.teacher-student-view #picker .accordion{margin-top:4px !important}



/* =========================
   Главная учителя: режим «как у ученика» (teacher-student-view)
   ========================= */

body.teacher-student-view #accordion .section-title{
  flex:0 0 auto;
  width:auto;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;

  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}


body.teacher-student-view #accordion .unique-btn{
  margin-left:5ch;
}


body.teacher-student-view #accordion .node.section .section-title{margin-left:0}

body.teacher-student-view #accordion .node .row .countbox{margin-right:12px}


/* названия тем/подтем — как у ученика (без овальных плашек) */
body.teacher-student-view #accordion .node.topic .title{
  display:block;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  line-height:1.25;
  white-space:normal;
  overflow:visible;
}


body.teacher-student-view #accordion .home-last10-badge{flex:0 0 auto}

body.teacher-student-view #accordion .home-topic-badge{margin-right:12px}


body.teacher-student-view #accordion{
  --home-countbox-w:132px;
  --home-pct-w:40px;
  --home-cov-w:60px;
  --home-cols-gap:12px;
}


body.teacher-student-view #accordion .node.section > .row,
body.teacher-student-view #accordion .home-badges-head .row{
  display:grid;
  grid-template-columns:var(--home-countbox-w) var(--home-pct-w) var(--home-cov-w) max-content max-content 1fr;
  column-gap:var(--home-cols-gap);
  align-items:center;
}


body.teacher-student-view #accordion .node.section > .row > .countbox{
  margin-right:0;
  width:var(--home-countbox-w);
}


body.teacher-student-view #accordion .home-badges-head .countbox-head{
  margin-right:0;
  width:var(--home-countbox-w);
}


/* бейджи в гриде: убираем обёртку из потока layout (дети занимают колонки 2 и 3) */
body.teacher-student-view #accordion .home-section-badges{
  margin-right:0;
  display:contents;
}


body.teacher-student-view #accordion .home-section-pct{
  width:var(--home-pct-w);
  min-width:var(--home-pct-w);
  padding:4px 4px;
  gap:0;
  justify-self:center;
  box-sizing:border-box;
}

body.teacher-student-view #accordion .home-section-pct .small{display:none}


body.teacher-student-view #accordion .home-section-cov{
  width:var(--home-cov-w);
  min-width:var(--home-cov-w);
  padding:4px 6px;
  gap:0;
  justify-self:center;
  box-sizing:border-box;
}

body.teacher-student-view #accordion .home-section-cov .small{display:none}


/* подписи над бейджами верхнего уровня */
body.teacher-student-view #accordion .home-badges-head{
  padding:6px 0 2px;
}

body.teacher-student-view #accordion .home-badges-head .countbox-head{
  visibility:hidden;
  pointer-events:none;
}

body.teacher-student-view #accordion .home-badges-head .home-badge-label{
  font-size:11px;
  line-height:1;
  color:var(--text-dim);
  text-align:center;
  user-select:none;
  justify-self:center;
}

body.teacher-student-view #accordion .home-badges-head .home-badge-label.pct{
  width:var(--home-pct-w);
  min-width:var(--home-pct-w);
}

body.teacher-student-view #accordion .home-badges-head .home-badge-label.cov{
  width:var(--home-cov-w);
  min-width:var(--home-cov-w);
}

body.teacher-student-view #accordion .home-badges-head .spacer{
  grid-column:4/-1;
}


body.teacher-student-view #accordion .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  font-size:11px;
  gap:4px;
  line-height:1;
  white-space:nowrap;
  width:80px;
  min-width:80px;
  overflow:visible;
  font-variant-numeric:tabular-nums;
}

body.teacher-student-view #accordion .badge b{font-weight:600}

body.teacher-student-view #accordion .badge .small{font-size:10px;color:var(--text-dim)}


body.teacher-student-view #accordion .badge.gray{background:rgba(148,163,184,.10)}

body.teacher-student-view #accordion .badge.green{background:rgba(16,185,129,.12)}

body.teacher-student-view #accordion .badge.lime{background:rgba(132,204,22,.14)}

body.teacher-student-view #accordion .badge.yellow{background:rgba(245,158,11,.16)}

body.teacher-student-view #accordion .badge.red{background:rgba(239,68,68,.14)}


/* плавное обновление + скелетон */
body.teacher-student-view #accordion .badge{
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}


body.teacher-student-view.home-stats-loading #accordion .home-last10-badge{
  position:relative;
  opacity:.70;
}

body.teacher-student-view.home-stats-loading #accordion .home-last10-badge b,
body.teacher-student-view.home-stats-loading #accordion .home-last10-badge .small{
  color:transparent;
}

body.teacher-student-view.home-stats-loading #accordion .home-last10-badge::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:50%;
  height:10px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.22), rgba(148,163,184,.10));
  animation:homeBadgeShimmer 1.1s ease-in-out infinite;
  pointer-events:none;
}
@media (max-width:640px) {

  body.teacher-student-view #accordion .badge{padding:4px 7px}
}
@media (min-width:1025px) {

  body.teacher-student-view #accordion{
    --home-badge-w: 60px;
    --home-badges-gap: 15px; /* как у ученика по замеру: между бейджами */
    --home-hgap: 14px;       /* как у ученика по замеру: countbox->бейдж и бейдж->заголовок */
  }


  /* grid: countbox | gap | badges | gap | title | uniq */
  body.teacher-student-view #accordion .home-badges-head .row,
  body.teacher-student-view #accordion .node.section > .row{
    display:grid !important;
    grid-template-columns: max-content var(--home-hgap) max-content var(--home-hgap) 1fr max-content !important;
    column-gap:0 !important;
    align-items:center !important;
  }


  /* countbox */
  body.teacher-student-view #accordion .home-badges-head .row > .countbox,
  body.teacher-student-view #accordion .node.section > .row > .countbox{
    grid-column:1 !important;
    width:auto !important;
    margin-right:0 !important;
  }


  /* badges container: always flex (no display:contents) */
  body.teacher-student-view #accordion .home-badges-head .home-section-badges,
  body.teacher-student-view #accordion .node.section > .row > .home-section-badges{
    grid-column:3 !important;
    display:flex !important;
    gap:var(--home-badges-gap) !important;
    align-items:center !important;
    margin-right:0 !important;
  }


  /* labels above badges */
  body.teacher-student-view #accordion .home-badges-head{
    padding:0 0 1px !important;
    margin:0 !important;
  }

  body.teacher-student-view #accordion .home-badges-head .row{
    padding:1px 0 0 0 !important;
    margin:0 !important;
  }

  body.teacher-student-view #accordion .home-badges-head .home-badge-label{
    width:var(--home-badge-w) !important;
    min-width:var(--home-badge-w) !important;
    text-align:center !important;
    justify-self:auto !important;
  }

  body.teacher-student-view #accordion .home-badges-head .row > .spacer{
    grid-column:5 / -1 !important;
  }


  /* top-level badges width */
  body.teacher-student-view #accordion .home-section-pct,
  body.teacher-student-view #accordion .home-section-cov{
    width:var(--home-badge-w) !important;
    min-width:var(--home-badge-w) !important;
    justify-self:auto !important;
  }


  /* neutralize old fixed width for badges,
     BUT keep top-level %/coverage badges fixed-width like on student home.
     WFX2 (2026-06-05): исключаем и .home-topic-badge — у него своя фикс-ширина
     (--home-pct-w, правило ниже, §5.6). Без этого width:auto (выше по специфичности)
     перебивал её → бейджи точности подтем «прыгали». */
  body.teacher-student-view #accordion .badge:not(.home-section-pct):not(.home-section-cov):not(.home-topic-badge){
    width:auto !important;
    min-width:0 !important;
  }


  /* section title: outlined pill like student */
  body.teacher-student-view #accordion .node.section > .row > .section-title{
    grid-column:5 !important;
    margin-left:0 !important;
    border:1px solid var(--border) !important;
    border-radius:14px !important;
    padding:6px 10px !important;
    background:rgba(148,163,184,.06) !important;
    width:fit-content !important;
    max-width:100% !important;
    justify-self:start !important;
    box-sizing:border-box !important;
  }


  /* unique btn */
  body.teacher-student-view #accordion .node.section > .row > .unique-btn{
    grid-column:6 !important;
    margin-left:0 !important;
  }


  /* gap between labels row and first section */
  body.teacher-student-view #accordion .home-badges-head + .node.section{
    padding-top:0 !important;
  }


  /* children: do not inflate vertical gaps */
  body.teacher-student-view #accordion .children{
    margin-top:0 !important;
  }


  /* 2nd level badge width (same approach as student).
     WFX2 §5.6-fix (2026-06-05): равняем на --home-badge-w (60px) — реальную ширину
     section-бейджей (их width задаётся var(--home-badge-w) !important на десктопе),
     а НЕ на --home-pct-w (40px, только grid-колонка). Иначе подтема у́же раздела.
     Контент идентичен section-«%» (только «%», .small пуст), текст центрируется
     через .badge{justify-content:center}. JS-переменную --home-topic-badge-w не трогаем. */
  body.teacher-student-view #accordion .home-topic-badge{
    width:var(--home-badge-w, 60px) !important;
    min-width:var(--home-badge-w, 60px) !important;
  }
}