* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- фигура/формула: НЕ зависят от темы, бумага всегда светлая --- */
  --ink: #111;
  --goal: #ff7d00;
  --new: #eb0e0e;
  --old: #7a1fb5;
  --mark: #bfe0f7;
  --mark-stroke: #67a5d8;
  --paper: #fff;         /* поверхность формулы+фигуры — всегда светлая бумага */

  /* --- UI-хром: светлая тема (значения = старые хардкод-цвета) --- */
  --bg: #f3f4f7;
  --surface: #fff;
  --border: #e3e6ec;
  --border-strong: #d5d8e0;
  --text: #111;
  --text-secondary: #5a5f6e;
  --muted: #8a90a0;
  --caption: #4a4f5e;
  --footer: #a2a7b5;
  --hover-surface: #f6f7fa;
  --progress-track: #e3e6ec;
  --progress-track-hover: #d8dbe3;
  --card-shadow: 0 4px 14px rgba(30,40,70,.10);
  --figure-shadow: 0 1px 4px rgba(30,40,70,.06);
}

:root[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #1a1e25;
  --border: #2b313b;
  --border-strong: #394050;
  --text: #e7e9ee;
  --text-secondary: #c2c7d0;
  --muted: #9aa1ad;
  --caption: #c2c7d0;
  --footer: #8891a0;
  --hover-surface: #21262f;
  --progress-track: #2b313b;
  --progress-track-hover: #394050;
  --card-shadow: 0 4px 14px rgba(0,0,0,.35);
  --figure-shadow: 0 1px 4px rgba(0,0,0,.3);
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.wrap { max-width: 780px; margin: 0 auto; padding: 18px 14px 40px; }

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 18px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.header-right {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
button.header-left {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  background: none; border: none; padding: 4px 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; border-radius: 8px;
  min-height: 44px;
}
button.header-left:focus-visible { outline: 2px solid var(--goal); outline-offset: 3px; }
.header-logo {
  width: 36px; height: 36px; flex-shrink: 0; display: block;
}
.brand-block {
  flex: 1; min-width: 0;
}
.brand { font-size: 22px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; }
.brand span { color: var(--goal); }
.tagline {
  font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: .3px;
}
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 10px 4px; margin: -4px 0 6px -4px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; border-radius: 6px; min-height: 44px;
}
.back-link:hover { color: var(--text); }
.back-link:focus-visible { outline: 2px solid var(--goal); outline-offset: 2px; }

/* --- переключатель темы --- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; flex: 0 0 auto; padding: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover { background: var(--hover-surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--goal); outline-offset: 2px; }
.theme-toggle svg { width: 22px; height: 22px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.library-heading {
  font-size: 20px; font-weight: 700; letter-spacing: .2px; margin-bottom: 14px;
}

.library-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.problem-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease,
    background .2s, border-color .2s;
}
.problem-card:hover {
  transform: translateY(-2px); border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
}
.problem-card:focus-visible {
  transform: translateY(-2px); border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
  outline: 2px solid var(--goal); outline-offset: 2px;
}
.problem-card-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.problem-card-source { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.problem-card-snippet {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.problem-card-meta { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 4px; }

@media (max-width: 520px) {
  .library-grid { grid-template-columns: 1fr; }
}

.statement {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.45;
  color: var(--text);
}
.statement .source { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }

.figure-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 10px 14px 14px; box-shadow: var(--figure-shadow);
}

/* .goalbar — постоянная «шапка» карточки-фигуры: цель задачи (Доказать/Найти)
   видна на всех шагах, а на последнем шаге сменяется на итог (Доказано/Ответ).
   Это UI-элемент карточки (не часть фигуры), поэтому лежит на фоне карточки
   (--surface), а НЕ на «бумаге» (--paper) — оба цвета ниже читаются и на
   светлой, и на тёмной карточке: .ask = --goal (оранжевый бренд, одинаково
   виден в обеих темах), .done = --text (чернильный в light / светлый в dark —
   это ок, карточка тёмная). У задач без p.goal элемент получает атрибут
   hidden (см. app.js) и не занимает места. */
.goalbar {
  font-size: 17px; font-weight: 700; line-height: 1.4;
  padding: 2px 2px 12px;
  transition: color .3s ease;
}
.goalbar.ask  { color: var(--goal); }
.goalbar.done { color: var(--text); }
.goalbar[hidden] { display: none; }
.goalbar sub { font-size: 70%; }

/* .formula и .stage — это «бумага» фигуры: цветовая система рисунка
   (чёрные линии, оранжевая цель, красное новое, фиолетовое старое) рассчитана
   на светлый фон, поэтому в тёмной теме эта область НЕ темнеет — она остаётся
   светлой «подложкой-экраном» внутри тёмной карточки. --ink и цвета ролей SVG
   темой не затрагиваются вообще. */
.formula {
  background: var(--paper); color: var(--ink); border-radius: 8px 8px 0 0;
  /* фиксированная высота = maxLines (CSS-переменная из app.js) строк по 1.6em
     + вертикальные паддинги (6px+4px=10px, одинаково на всех брейкпоинтах —
     паддинг меняется только по горизонтали). Так рисунок под формулой не
     прыгает при листании шагов: высота — максимум по задаче, а не по текущему
     шагу. Коэффициент 1.6em (не 1.35 = заданный line-height) — с запасом:
     реальная высота строки .fl с инлайновыми sub/i в этом serif-шрифте
     («STIX Two Text») получается ~1.51em из-за метрик шрифта (измерено
     36.3px/24px и 24.9px/16.5px); 1.35em и даже 1.55em обрезали верх на
     3–4 строках на пару px (округление), 1.6em даёт видимый запас. */
  height: calc(var(--formula-lines, 3) * 1.6em + 10px);
  min-height: 0; display: flex; flex-direction: column; justify-content: flex-end;
  /* align-items:flex-start ниже — из-за direction:rtl на контейнере это даёт
     выравнивание по ПРАВОМУ краю (в rtl «start» — справа); flex-end дал бы левый */
  align-items: flex-start; gap: 2px; padding: 6px 8px 4px;
  font-family: "STIX Two Text", "Cambria Math", Georgia, serif;
  font-size: 24px; line-height: 1.35; text-align: right;
  /* длинная строка формулы скроллится сама в себе, а не раздвигает страницу;
     direction:rtl на контейнере + ltr на строке — чтобы по умолчанию было
     видно правый (конечный) край строки, а не обрезанное начало */
  max-width: 100%; overflow-x: auto; overflow-y: hidden;
  direction: rtl; scrollbar-width: none;
}
.formula::-webkit-scrollbar { display: none; }
.formula .fl {
  animation: fin .45s ease; transition: color .45s; white-space: nowrap;
  direction: ltr;
}
.formula .fl sup { font-size: 62%; }
.formula .fl b { font-weight: 700; }
.formula .f-goal { color: var(--goal); }
.formula .f-new { color: var(--new); }
.formula .f-done { color: var(--ink); }
@keyframes fin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }

.stage {
  position: relative; cursor: pointer; user-select: none;
  background: var(--paper); border-radius: 0 0 8px 8px;
}
.stage svg { display: block; width: 100%; height: auto; }

/* ---- роли объектов ---- */
.stage svg * {
  transition: stroke .45s, fill .45s, opacity .45s, stroke-width .45s, transform .45s;
}

.stroke { fill: none; stroke-linecap: round; }

/* дуги углов — заметно тоньше несущих линий (веер из 2-3 дуг не сливается).
   ВАЖНО: селекторы с .stroke — иначе .stroke.new (6px) ниже по файлу
   перебивает по порядку при равной специфичности (урок: дуги неделю
   рисовались 6px, владелец дважды жаловался на «жирные») */
.stroke.thin.base  { stroke-width: 2.2; }
.stroke.thin.goal  { stroke-width: 3.2; }
.stroke.thin.new   { stroke-width: 3.2; }
.stroke.thin.old   { stroke-width: 2.4; }
.stroke.thin.faded { stroke-width: 1.8; }

/* стороны угла: тоньше основных подсветок, но жирнее дуг — иерархия
   «стороны 4.5 > дуги 2.4» делает отметку угла цельной и читаемой */
.stroke.angside.base  { stroke-width: 2.6; }
.stroke.angside.goal  { stroke-width: 3.6; }
.stroke.angside.new   { stroke-width: 3.6; }
.stroke.angside.old   { stroke-width: 2.6; }
.stroke.angside.faded { stroke-width: 2.2; }

/* засечки равенства: в момент отметки (new/goal) — полный размер, а когда
   «остывают» в чёрный/фиолетовый/фон — на 15% короче, чтобы меньше мешали */
.tick.base, .tick.old, .tick.faded {
  transform: scale(.85);
  transform-box: fill-box;
  transform-origin: center;
}
.stroke.base  { stroke: var(--ink); stroke-width: 3.4; }
.stroke.goal  { stroke: var(--goal); stroke-width: 6; }
.stroke.new   { stroke: var(--new); stroke-width: 6; }
.stroke.old   { stroke: var(--old); stroke-width: 4; }
.stroke.aux   { stroke: var(--ink); stroke-width: 2.3; stroke-dasharray: 11 9; }
.stroke.faded { stroke: var(--ink); stroke-width: 3; opacity: .16; }
.stroke.hidden { opacity: 0; }

.markp { stroke-width: 2.4; }
.markp.mark, .markp.base { fill: var(--mark); stroke: var(--mark-stroke); }
.markp.markNew, .markp.new { fill: #ffc4c4; stroke: var(--new); }
.markp.markOld, .markp.old { fill: #ecd2fa; stroke: #a35fd0; }
.markp.goal    { fill: #ffe3c2; stroke: var(--goal); }
.markp.faded   { fill: var(--mark); stroke: var(--mark-stroke); opacity: .16; }
.markp.hidden  { opacity: 0; }

.pt circle { stroke: none; }
.pt text {
  font-family: "STIX Two Text", "Cambria Math", Georgia, serif;
  font-size: 36px; font-weight: 400; font-style: italic;
  /* белый ореол: буква читается, даже если легла на линию;
     бумага фигуры всегда светлая, поэтому ореол не зависит от темы */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 7px;
  stroke-linejoin: round;
  /* переезды метки между шагами (lpos) едут плавно */
  transition: transform .45s, fill .45s, opacity .45s;
}
.pt.base circle, .pt.faded circle { fill: var(--ink); }
.pt.base text, .pt.faded text { fill: var(--ink); }
.pt.new circle, .pt.newdot circle { fill: var(--new); }
.pt.new text { fill: var(--new); }
.pt.old circle { fill: var(--old); }
.pt.old text { fill: var(--old); }
.pt.goal circle { fill: var(--goal); }
.pt.goal text { fill: var(--goal); }
.pt.faded { opacity: .16; }
.pt.hidden { opacity: 0; }
.pt.newdot text { opacity: 0; }

.lbl {
  font-family: "STIX Two Text", Georgia, serif; font-style: italic; font-size: 30px;
  text-anchor: middle;
}
.lbl.base { fill: #333; }
.lbl.new { fill: var(--new); }
.lbl.old { fill: var(--old); }
.lbl.faded { fill: #333; opacity: .16; }
.lbl.hidden { opacity: 0; }

/* ---- управление ---- */
/* .nav — это UI-хром (не часть фигуры), поэтому в тёмной теме перекрашивается
   вместе с остальным интерфейсом, а не остаётся на светлой бумаге. */
.controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.nav {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 26px; line-height: 1; cursor: pointer; color: var(--text);
  flex: 0 0 auto; padding-bottom: 4px;
  transition: background .2s, border-color .2s, color .2s;
}
.nav:hover { background: var(--hover-surface); }
.nav:disabled { opacity: .3; cursor: default; }
.nav:focus-visible { outline: 2px solid var(--goal); outline-offset: 2px; }
.mid { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.progress {
  width: 100%; height: 6px; border-radius: 999px; background: var(--progress-track);
  cursor: pointer; position: relative;
  transition: background .2s;
}
/* невидимая зона нажатия вокруг тонкой полосы — увеличивает hit-area,
   не раздувая видимую высоту прогресс-бара */
.progress::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%);
}
.progress:hover { background: var(--progress-track-hover); }
.progress-fill {
  height: 100%; border-radius: 999px; background: var(--goal);
  transition: width .35s ease;
}
.counter { font-size: 12.5px; color: var(--muted); }

.caption {
  min-height: 4.2em; padding: 10px 6px 0; color: var(--caption);
  font-size: 15px; line-height: 1.45;
}

footer { text-align: center; color: var(--footer); font-size: 12.5px; margin-top: 16px; }

@media (max-width: 520px) {
  .formula { font-size: 19px; }
  .pt text { font-size: 40px; }
  .lbl { font-size: 34px; }
}

/* совсем узкие телефоны (320–380px) — ещё чуть уменьшаем формулу и отступы,
   чтобы длинные строки реже упирались в скролл, и подчищаем плотность макета */
@media (max-width: 380px) {
  .wrap { padding: 14px 10px 32px; }
  .brand { font-size: 19px; }
  .tagline { font-size: 11px; }
  .statement { padding: 12px 14px; font-size: 14.5px; }
  .figure-card { padding: 8px 10px 12px; }
  .goalbar { font-size: 15px; padding: 2px 2px 10px; }
  .formula { font-size: 16.5px; padding: 6px 4px 4px; }
  .caption { font-size: 14px; padding: 8px 4px 0; }
  .problem-card { padding: 12px 14px 10px; }
}

/* ---- админ-галерея ---- */
.gallery-bar {
  padding: 8px 10px; font-size: 13.5px; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--paper);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--gcell, 480px), 100%), 1fr));
  gap: 12px;
  padding: 12px; background: var(--paper);
}

/* галерея на всю ширину окна (full-bleed из центрированной колонки) */
.figure-card.gallery-active {
  width: calc(100vw - 48px);
  margin-left: calc(50% - 50vw + 24px);
}
/* формульная колонка и планка цели в галерее не нужны */
.figure-card.gallery-active .formula,
.figure-card.gallery-active .goalbar,
.figure-card.gallery-active #goalbar { display: none; }
.gallery-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gallery-zoom { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gallery-zoom button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 17px; line-height: 1;
  cursor: pointer;
}
.gallery-zoom button:hover { background: var(--hover-surface); }
.gallery-cell { cursor: pointer; border: 1px solid var(--border); border-radius: 8px; }
.gallery-cell:hover { border-color: var(--goal); }
.gallery-cell svg { display: block; width: 100%; height: auto; }
.gallery-cap { text-align: center; font-size: 12px; color: var(--muted); padding: 2px 0 4px; }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }