/* themes/default.css
   Основная тема. Использует CSS-переменные, чтобы позже можно было
   легко сделать светлую/тёмную тему, просто переопределив палитру. */

:root {
  --qf-bg: #f4f6fb;
  --qf-surface: #ffffff;
  --qf-text: #1c2130;
  --qf-text-muted: #6b7280;
  --qf-primary: #4f46e5;
  --qf-primary-hover: #4338ca;
  --qf-success: #16a34a;
  --qf-success-bg: #ecfdf3;
  --qf-error: #dc2626;
  --qf-error-bg: #fef2f2;
  --qf-border: #e2e5ee;
  --qf-row-bg: #fafbfe;
  --qf-input-bg: #ffffff;
  --qf-dropzone-active-bg: #eef2ff;
  --qf-radius: 14px;
  --qf-shadow: 0 8px 24px rgba(30, 41, 59, 0.08);
  --qf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Тёмная тема */
body.qf-theme-dark {
  --qf-bg: #12141c;
  --qf-surface: #1b1e29;
  --qf-text: #e5e7eb;
  --qf-text-muted: #9aa0ae;
  --qf-primary: #818cf8;
  --qf-primary-hover: #6f78e0;
  --qf-success: #4ade80;
  --qf-success-bg: #16281c;
  --qf-error: #f87171;
  --qf-error-bg: #2a1616;
  --qf-border: #2c303c;
  --qf-row-bg: #20242f;
  --qf-input-bg: #20242f;
  --qf-dropzone-active-bg: #262b3d;
  --qf-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.qf-theme-dark .qf-warnings {
  background: #2e2712;
  border-color: #8a6d1f;
  color: #f2c94c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--qf-font);
  background: var(--qf-bg);
  color: var(--qf-text);
  min-height: 100vh;
  padding: 24px 16px 60px;
}

#app {
  max-width: 720px;
  margin: 0 auto;
}

.qf-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.qf-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.qf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-text);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.qf-icon-btn:hover {
  background: var(--qf-row-bg);
  transform: translateY(-1px);
}

.qf-mode-badge {
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.qf-mode-badge:hover {
  transform: translateY(-1px);
}

.qf-mode-badge-exam {
  border-color: var(--qf-error);
  color: var(--qf-error);
}

.qf-dropzone {
  flex: 1;
  min-width: 220px;
  padding: 10px 14px;
  border: 1.5px dashed var(--qf-border);
  border-radius: 10px;
  background: var(--qf-surface);
  font-size: 13px;
  color: var(--qf-text-muted);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.qf-dropzone-active {
  border-color: var(--qf-primary);
  background: var(--qf-dropzone-active-bg);
}

.qf-file-label {
  color: var(--qf-primary);
  cursor: pointer;
  font-weight: 600;
}

.qf-status-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.qf-progress {
  font-size: 13px;
  color: var(--qf-text-muted);
}

.qf-timer {
  font-size: 13px;
  font-weight: 700;
  color: var(--qf-primary);
  font-variant-numeric: tabular-nums;
}

.qf-stats-summary {
  font-size: 13px;
}

.qf-stats-topics {
  font-size: 13px;
}

.qf-stats-topics-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.qf-stats-topics ul {
  margin: 0;
  padding-left: 18px;
}

.qf-stats-topics li {
  margin-bottom: 2px;
}

.qf-warnings {
  background: #fffbeb;
  border: 1px solid #f6c945;
  color: #92702a;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.qf-warnings ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.qf-question {
  background: var(--qf-surface);
  border-radius: var(--qf-radius);
  box-shadow: var(--qf-shadow);
  padding: 22px;
}

.qf-topic {
  font-size: 13px;
  color: var(--qf-text-muted);
  margin-bottom: 6px;
}

/* pre-line сохраняет переносы строк из CSV и при этом схлопывает лишние
   пробелы. Учителя пишут схему превращений отдельной строкой:

       Задана схема превращений веществ:
       Fe_2O_3 →(X) FeO →(Y) FeSO_4
       Определите, какие из веществ...

   без этого HTML склеивал всё в один абзац, и схема тонула в тексте. */
.qf-prompt {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  white-space: pre-line;
}

.qf-board {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qf-header-row {
  display: grid;
  grid-template-columns: 28px 1fr 200px;
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 5px;
}

.qf-header-row .qf-right-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--qf-primary);
  text-align: left;
}

.qf-row {
  display: grid;
  grid-template-columns: 28px 1fr 200px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--qf-row-bg);
  border: 1px solid var(--qf-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.qf-letter {
  font-weight: 700;
  color: var(--qf-primary);
  text-align: center;
}

.qf-item {
  font-size: 15px;
}

/* 0.8em, а не 0.7em: на 15-16px текста семидесятипроцентный индекс — это
   примерно 10px, и на телефоне цифра в формуле уже не читается. */
.qf-item sup, .qf-item sub,
.qf-prompt sup, .qf-prompt sub {
  font-size: 0.8em;
}

/* Крупный шрифт здесь — единственный доступный способ сделать индексы в
   формулах читаемыми. В <option> попадает простой текст с юникод-индексами
   (H₂SO₄), а их размер задан шрифтом: отдельно увеличить их нельзя ни
   разметкой, ни CSS — только вместе со всем списком. Было 13px, что давало
   индекс около 8px и делало формулы неразборчивыми. */
.qf-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--qf-border);
  background: var(--qf-input-bg);
  color: var(--qf-text);
  font-size: 18px;
  max-width: 100%;
}

.qf-row.qf-correct {
  background: var(--qf-success-bg);
  border-color: var(--qf-success);
}

.qf-row.qf-incorrect {
  background: var(--qf-error-bg);
  border-color: var(--qf-error);
}

.qf-hint {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--qf-error);
  margin-top: -4px;
}

.qf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.qf-btn {
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--qf-border);
  background: var(--qf-surface);
  color: var(--qf-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

.qf-btn:hover { transform: translateY(-1px); }
.qf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.qf-btn-primary {
  background: var(--qf-primary);
  border-color: var(--qf-primary);
  color: white;
}

.qf-btn-primary:hover { background: var(--qf-primary-hover); }

.qf-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--qf-text-muted);
  font-weight: 500;
}

.qf-result {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
}

.qf-result-good { color: var(--qf-success); }
.qf-result-bad { color: var(--qf-error); }
/* Экзамен: ответ зафиксирован, но не оценён. Цвет намеренно нейтральный —
   зелёный или красный здесь выдал бы правильность. */
.qf-result-recorded { color: var(--qf-text-muted); }

/* Обратный отсчёт контрольной: жёлтый за пять минут до конца, красный за
   минуту. Цвет здесь — не украшение, а единственный способ заметить время,
   не отвлекаясь от задания. */
.qf-timer-warn {
  color: #b45309;
  font-weight: 700;
}

.qf-timer-over {
  color: var(--qf-error);
  font-weight: 700;
}

/* Режим зафиксирован учителем при сборке (META MODE) — это не кнопка, а
   подпись. Курсор по умолчанию, чтобы не выглядело нажимаемым. */
.qf-mode-badge-locked {
  cursor: default;
  opacity: 1;
}

.qf-error {
  color: var(--qf-error);
  font-size: 14px;
}

/* --- select_sequence: фишки выбора и строка ответа --- */

.qf-seq-hint {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--qf-text-muted);
  margin-bottom: 14px;
}

.qf-seq-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.qf-seq-chip {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--qf-border);
  background: var(--qf-row-bg);
  color: var(--qf-text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.qf-seq-chip sup, .qf-seq-chip sub {
  font-size: 0.7em;
}

.qf-seq-chip:hover {
  transform: translateY(-1px);
}

.qf-seq-chip-used {
  background: var(--qf-primary);
  border-color: var(--qf-primary);
  color: #fff;
}

.qf-seq-chip:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.qf-seq-answer-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--qf-row-bg);
  border: 1px solid var(--qf-border);
}

.qf-seq-answer-label {
  font-size: 13px;
  color: var(--qf-text-muted);
  font-weight: 600;
}

.qf-seq-answer {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--qf-primary);
  font-variant-numeric: tabular-nums;
}

.qf-seq-clear {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
}

.qf-seq-answer-wrap.qf-seq-correct {
  background: var(--qf-success-bg);
  border-color: var(--qf-success);
}

.qf-seq-answer-wrap.qf-seq-correct .qf-seq-answer {
  color: var(--qf-success);
}

.qf-seq-answer-wrap.qf-seq-incorrect {
  background: var(--qf-error-bg);
  border-color: var(--qf-error);
  flex-direction: column;
  align-items: flex-start;
}

.qf-seq-answer-wrap.qf-seq-incorrect .qf-seq-answer {
  color: var(--qf-error);
}

/* --- numeric_answer: поле числового ввода --- */

.qf-numeric-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: var(--qf-row-bg);
  border: 1px solid var(--qf-border);
  margin-bottom: 10px;
}

.qf-numeric-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--qf-text-muted);
}

.qf-numeric-input {
  width: 140px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--qf-border);
  background: var(--qf-input-bg);
  color: var(--qf-text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.qf-numeric-input:disabled {
  opacity: 0.7;
}

.qf-numeric-unit {
  font-size: 14px;
  color: var(--qf-text-muted);
}

.qf-numeric-hint {
  font-size: 12px;
  color: var(--qf-text-muted);
  margin-bottom: 14px;
}

.qf-numeric-wrap.qf-numeric-correct {
  background: var(--qf-success-bg);
  border-color: var(--qf-success);
}

.qf-numeric-wrap.qf-numeric-incorrect {
  background: var(--qf-error-bg);
  border-color: var(--qf-error);
}

.qf-footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--qf-text-muted);
}

.qf-results-export {
  width: 100%;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--qf-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.qf-results-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qf-field-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--qf-text-muted);
  width: 100%;
  max-width: 320px;
}

.qf-field-inline input {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--qf-text);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--qf-border);
  background: var(--qf-row-bg);
}

.qf-form-message {
  font-size: 12px;
  font-weight: 600;
}

.qf-message-success { color: var(--qf-success); }
.qf-message-error { color: var(--qf-error); }

@media (max-width: 480px) {
  /* В списке лежит полный текст варианта ("3) [Ag(NH₃)₂]OH"), в узкую колонку
     он не помещается — поэтому на телефоне список уезжает на свою строку во
     всю ширину. Заодно это даёт крупную область попадания пальцем. */
  .qf-row {
    grid-template-columns: 24px 1fr;
    grid-template-areas:
      "letter item"
      "select select";
  }
  .qf-letter { grid-area: letter; }
  .qf-item { grid-area: item; }
  .qf-select { grid-area: select; width: 100%; }

  .qf-header-row {
    display: block;
  }
  .qf-header-row .qf-letter,
  .qf-header-row .qf-item {
    display: none;
  }
}

.qf-credits {
  max-width: 720px;
  margin: 14px auto 0;
  padding: 10px 4px 0;
  font-size: 12px;
  color: var(--qf-text-muted);
  text-align: center;
}

.qf-credits a {
  color: var(--qf-text-muted);
  text-decoration: underline;
}

.qf-credits a:hover {
  color: var(--qf-primary);
}

.qf-help-btn {
  font-weight: 700;
  font-size: 15px;
}

.qf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 34, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.qf-modal-card {
  max-width: 440px;
  width: 100%;
  background: var(--qf-surface);
  border-radius: var(--qf-radius);
  box-shadow: var(--qf-shadow);
  padding: 24px;
}

.qf-modal-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--qf-text);
}

.qf-modal-list {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--qf-text);
  font-size: 14px;
  line-height: 1.5;
}

.qf-modal-list li {
  margin-bottom: 10px;
}

.qf-modal-actions {
  margin-bottom: 12px;
}

.qf-modal-actions .qf-btn {
  width: 100%;
}

.qf-modal-hint {
  font-size: 12px;
  color: var(--qf-text-muted);
  text-align: center;
}

/* Элемент выключен на время контрольной работы (загрузка файла, смена
   порядка заданий). Не прячем совсем: ученик должен видеть, что кнопка есть,
   но сейчас недоступна, — иначе это выглядит как пропавшая функция. */
.qf-control-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Стрелка реакции с надписями сверху и снизу ---
   Рисуется линией и треугольником, а не символом "→": так стрелка тянется под
   ширину подписи. Символьная стрелка фиксированной ширины, и длинная подпись
   вроде "H_2SO_4(конц.), t°" висела бы над коротким хвостиком.
   Библиотеки формул (KaTeX/mhchem) для этого не подключаются — офлайн-файл не
   должен зависеть от сторонних ресурсов. */
.qf-rxn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 0.3em;
  line-height: 1.15;
}

/* Правый отступ больше левого: у правого края стоит треугольник стрелки, и
   без запаса он наезжал на последний символ подписи — особенно на индекс,
   который сидит низко ("4" в H_2SO_4). Треугольник шириной 0.5em, отступ
   0.95em — остаётся чистый просвет.
   min-height задаёт постоянную высоту и ПУСТЫМ слотам: они резервируются,
   чтобы блок стрелки был симметричен относительно линии и все стрелки строки
   стояли на одном уровне. */
.qf-rxn-over,
.qf-rxn-under {
  display: block;
  font-size: 0.72em;
  line-height: 1.25;
  min-height: 1.25em;
  white-space: nowrap;
  padding: 0 0.95em 0 0.4em;
  color: var(--qf-text);
}

/* Линия со стрелкой. min-width — чтобы стрелка без подписи не схлопнулась,
   width:100% — чтобы с подписью растянулась ровно под неё. */
.qf-rxn-line {
  display: block;
  width: 100%;
  min-width: 2.4em;
  height: 0;
  border-top: 1.5px solid currentColor;
  position: relative;
}

.qf-rxn-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -0.3em;
  width: 0;
  height: 0;
  border-left: 0.5em solid currentColor;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
}

/* Стрелка без единой подписи во всей строке: слоты не резервируются, блок
   состоит из одной линии и при vertical-align: middle встаёт ровно по
   середине строки — там же, где линия у стрелок с подписями. */

/* Индексы внутри подписи над стрелкой. Без этого правила они уменьшались бы
   дважды — сначала до размера подписи, потом до размера индекса, — и в
   "H_2SO_4(конц.)" цифры становились нечитаемыми. */
.qf-rxn sub, .qf-rxn sup {
  font-size: 0.85em;
}

/* --- Изображения в заданиях ---
   Белая подложка — не украшение. Структурные формулы рисуют почти чёрным
   (в файле пользователя fill:#1A1A1A), и в тёмной теме такая картинка стала
   бы невидимой. Подложка не зависит от того, чем и как нарисован файл:
   работает и с одноцветными схемами, и с цветными, и с подписями внутри.
   Перекраска заливки под цвет темы такой надёжности не даёт. */
.qf-img {
  max-width: 100%;
  background: #ffffff;
  border: 1px solid var(--qf-border);
  border-radius: 8px;
  padding: 6px;
}

/* Метка внутри строки: картинка встраивается в текст СВОИМ размером.
   Раньше высота ограничивалась двумя строками (max-height: 2.2em) — и
   структурная формула 17×17 мм ужималась примерно вдвое, до нечитаемого
   пятна. Строка от полноразмерной картинки становится высокой, текст вокруг
   выглядит разреженным — это осознанный размен: разреженный текст читается,
   мелкая формула нет. Нужна картинка покрупнее или компактный текст —
   ставьте метку отдельной строкой, там картинка идёт блоком. */
.qf-img:not(.qf-img-block) {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em;
  /* Страховка на случай SVG без своих размеров (только viewBox): такой файл
     браузер растянул бы по ширине контейнера. */
  max-height: 60vh;
}

/* Метка одна на строке: картинка отдельным блоком.
   Отступы небольшие и заданы ТОЛЬКО здесь: перенос строки вокруг метки
   съедается при разборе (см. renderImages), иначе к отступу добавлялась бы
   ещё и пустая строка, и текст отрывался бы от рисунка.
   max-height ограничивает высокую схему — иначе на телефоне она выдавила бы
   за экран и сами варианты ответа, и кнопки. */
.qf-img-block {
  display: block;
  margin: 8px 0;
  max-height: 45vh;
}

/* Метка есть, а картинки нет: молча пропасть она не должна — иначе учитель
   не заметит, что забыл прикрепить файл. */
.qf-img-missing {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed var(--qf-border);
  border-radius: 6px;
  font-size: 0.85em;
  color: var(--qf-text-muted);
}