:root{
  --bg:#EEF1F9;--surface:#FFFFFF;--ink:#17213B;--muted:#69749B;--line:#E1E6F2;
  --primary:#5B4BDB;--primary-ink:#4132AE;--primary-soft:#EDEAFB;--pow:#E8459B;
  --ok:#12A46B;--ok-bg:#E4F6EE;--bad:#E23B3B;--bad-bg:#FCEAEA;--hint:#E08600;--hint-bg:#FCF1DD;
  --radius:20px;--shadow:0 1px 2px rgba(23,33,59,.04),0 12px 34px rgba(23,33,59,.07);
  --mono:'Space Grotesk',ui-monospace,monospace;--sans:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0}
/* Браузерное правило [hidden]{display:none} слабее любого
   авторского display, поэтому элемент с display:flex прятать
   атрибутом hidden без этой строки не получается. */
[hidden]{display:none!important}
#pgbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:99999;
  background:linear-gradient(90deg,var(--primary),var(--pow));width:0%;
  transition:width .25s ease,opacity .35s ease;box-shadow:0 0 8px rgba(91,75,219,.5)}
body{font-family:var(--sans);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 500px at 100% -10%,rgba(91,75,219,.10),transparent 60%),
    radial-gradient(900px 500px at -5% 0%,rgba(232,69,155,.08),transparent 55%),var(--bg);min-height:100vh}
.wrap{max-width:820px;margin:0 auto;padding:24px 18px 64px}
.back{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;color:var(--primary);
  text-decoration:none;font-weight:700;font-size:14px}
.back:hover{color:var(--primary-ink)}
/* Строка возврата: «назад по разделу» и «на главную». Вторая ссылка нужна
   тем, кто пришёл из поиска сразу на страницу темы: раздела он не видел,
   и кнопка «назад» вела его туда, где он не был. Адрес абсолютный (/),
   потому что глубина вложенности у страниц разная. */
/* ХЛЕБНЫЕ КРОШКИ — полный путь от главной.

   Раньше со страницы темы вели только «‹ Все темы» и «На главную»:
   уровень класса выпадал, и ни ученик, ни поисковик не видели, где
   находятся. Цепочку собирает inject_breadcrumbs() в build_seo.py —
   по пути файла, а не в каждом генераторе отдельно. */
/* Сверху 14px: цепочка не должна стоять у самой кромки окна. В
   полноэкранном режиме на маке эту полосу перехватывает выезжающая
   панель браузера — ссылка «Главная» не отзывается ни на наведение,
   ни на клик и выглядит обычным текстом. */
.crumbs{margin:14px 0 14px;font-size:13.5px;line-height:1.5}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;
  margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:"\203A";color:var(--muted);flex:none}
.crumbs a{color:var(--primary);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--primary-ink);text-decoration:underline}
.crumbs .here{color:var(--muted);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:640px){
  /* На телефоне цепочка едет одной строкой с прокруткой: переносить
     её нельзя — три строки над заголовком съедают пол-экрана. */
  .crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .crumbs ol::-webkit-scrollbar{display:none}
  .crumbs li{flex:none}
  .crumbs .here{max-width:55vw}
}
.navrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 14px}
.navrow .back{margin:0}
.navrow .back.home{color:var(--muted)}
.navrow .back.home:hover{color:var(--primary)}
.eyebrow{font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;color:var(--primary);margin:0 0 6px}
h1.title{font-family:var(--mono);font-weight:700;line-height:1.06;font-size:clamp(26px,5.5vw,40px);
  margin:0;letter-spacing:-.01em}
h1.title b{color:var(--pow)}
.sub{color:var(--muted);margin:8px 0 0;font-size:15px;max-width:56ch}
.wrap>.sub{max-width:100%;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(11px,2.6vw,15px)}
sup{font-size:.62em;vertical-align:super;line-height:0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 8px}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px 14px 12px;box-shadow:var(--shadow);overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.stat:nth-child(1)::before{background:var(--primary)}
.stat:nth-child(2)::before{background:var(--ok)}
.stat:nth-child(3)::before{background:var(--pow)}
.stat .k{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:4px}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:14px 2px 4px}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--pow));
  border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* tabs */
.tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);padding:5px;
  border-radius:14px;margin:22px 0 16px;box-shadow:var(--shadow)}
.tabs button{flex:1;border:0;background:transparent;padding:10px 12px;border-radius:10px;
  font-family:var(--sans);font-weight:700;font-size:15px;color:var(--muted);cursor:pointer;transition:.2s}
.tabs button[aria-selected="true"]{background:linear-gradient(135deg,var(--primary),var(--pow));color:var(--on-accent,#fff)}
.panel{display:none;animation:fade .35s ease}.panel.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* theory */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;margin-bottom:14px;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--primary),var(--pow))}
.card h2{font-family:var(--mono);font-size:17px;margin:0 0 10px;letter-spacing:-.01em}
.card p{margin:8px 0;color:var(--fg-33406b,#33406b)}
.def{font-family:var(--mono);font-size:clamp(17px,4vw,22px);text-align:center;padding:18px;
  background:var(--primary-soft);border-radius:14px;color:var(--primary-ink);letter-spacing:.01em}
.def sup{color:var(--pow)}
.props{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.props li{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px 12px 18px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg-fbfbfe,#FbFbfe);overflow:hidden}
.props li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--primary),var(--pow))}
.props .f{font-family:var(--mono);font-size:18px;min-width:160px}
.props .f sup{color:var(--pow)}
.props .ex{font-family:var(--mono);color:var(--muted);font-size:15px}
.props .ex b{color:var(--ink)}
.note{font-size:14px;color:var(--muted);margin-top:6px}
/* Подсказка внутри карточки теории: «на чём здесь теряют балл».
   Класс давно использовался разделами ОГЭ и ЕГЭ, а правила для него
   не было — текст выводился обычным абзацем без всякой плашки. */
.hint{margin:10px 0 0;padding:10px 13px;border-radius:11px;
  background:var(--hint-bg);border:1px solid var(--bd-f1d9a6,#F1D9A6);color:var(--fg-8a5b00,#8a5b00);
  font-size:13.5px;line-height:1.55}
.tlist{margin:6px 0 0;padding-left:20px;color:var(--fg-33406b,#33406b)}
.tlist li{margin:5px 0}

/* filters */
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scrollbar-width:thin}
.filters button{white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font-family:var(--sans);font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:99px;cursor:pointer;transition:.18s}
.filters button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-accent,#fff)}

/* problem */
.qcard-wrap{position:relative}
/* Пока скрипт не нарисовал вопрос, карточка пустая: резерв места, чтобы на тяжёлых
   страницах (данные разбираются секунды) блоки ниже не прыгали — SEO W03/CLS. */
.qcard:empty{min-height:450px}
.qcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 22px 18px;overflow:hidden;touch-action:pan-y;z-index:1}
.qcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--pow))}
.swipe-hint{position:absolute;top:50%;width:42px;height:42px;border-radius:50%;z-index:0;
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;color:var(--on-accent,#fff);
  background:linear-gradient(135deg,var(--primary),var(--pow));pointer-events:none;
  opacity:0;transform:translateY(-50%) scale(.55);
  transition:opacity .16s ease,transform .16s ease;box-shadow:0 6px 16px rgba(91,75,219,.3)}
.hint-prev{left:-8px}
.hint-next{right:-8px}
.qcard-wrap.show-prev .hint-prev,.qcard-wrap.show-next .hint-next{opacity:1;transform:translateY(-50%) scale(1)}
@media(min-width:641px){.swipe-hint{display:none}}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.badge{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;background:var(--primary-soft);color:var(--primary-ink)}
.counter{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
/* длинное слово (сельскохозяйственных, путь к файлу, номер) на телефоне переносится, а не уходит
   под обрезку карточки (overflow:hidden) — scripts/audit_mobile.py */
.qcard{overflow-wrap:break-word}
.prompt{color:var(--muted);font-size:22px;margin:12px 0 2px}
.prompt.big{font-size:28px;font-weight:700;color:var(--ink);margin:14px 0 2px;line-height:1.3;-webkit-hyphens:auto;hyphens:auto}
.figure{display:flex;justify-content:safe center;margin:14px 0 4px;padding:10px;max-width:100%;box-sizing:border-box;overflow-x:auto;
  background:var(--bg-fbfcff,#FbFcff);border:1px solid var(--line);border-radius:16px}
.figure svg{display:block;max-width:100%;height:auto;flex:none}.figure img{max-width:100%;height:auto}
.databox{margin:12px 0 4px;padding:14px 16px;background:var(--bg-fbfcff,#FbFcff);border:1px solid var(--line);
  border-radius:16px;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink);max-width:100%;box-sizing:border-box;overflow-x:auto}
@media (max-width:480px){.databox{padding:12px 10px}.databox th,.databox td{padding:6px 6px}
  /* таблица с текстом в ячейках ужимается по ширине телефона: слова переносятся (по слогам, где умеет
     браузер); числовые таблицы (.itbl, .punnett) не трогаем — у них прокрутка */
  .databox th{text-transform:none;letter-spacing:0}
  .databox table:not(.itbl):not(.punnett) :is(td,th){overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}}
.databox table{width:100%;border-collapse:collapse;font-size:14px}
.databox th,.databox td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line)}
.databox th{font-weight:700;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.02em}
.databox tr:last-child td{border-bottom:none}
.databox p{margin:0 0 8px}
.databox p:last-child{margin-bottom:0}
.pscheme{font-family:var(--mono);font-size:clamp(17px,4.5vw,22px);font-weight:700;
  text-align:center;letter-spacing:.01em;padding:6px 0}
.pscheme-auth{color:var(--ink)}
.pscheme-speech{color:var(--primary-ink);background:var(--primary-soft);border-radius:6px;padding:1px 4px}
.pscheme-br{color:var(--muted);font-weight:600}
.pscheme-word{color:var(--pow)}
.pscheme-note{text-align:center;color:var(--muted);font-size:12.5px;margin:8px 0 0!important}
.databox table.punnett{text-align:center}
.databox table.punnett th,.databox table.punnett td{text-align:center;font-family:var(--mono);font-weight:700}
.databox table.punnett td{color:var(--ink);font-size:15px}
.expr{font-family:var(--mono);font-weight:600;text-align:center;font-size:clamp(20px,5.5vw,32px);
  letter-spacing:.01em;margin:6px 0 4px;line-height:1.18;overflow-wrap:anywhere}
.expr sup{color:var(--pow);font-size:.6em}
.expr .sm{font-size:.62em;color:var(--muted);font-weight:500}
.frac{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  vertical-align:middle;margin:0 .16em;font-size:.86em;line-height:1.15;position:relative;top:.02em}
.frac .fn{display:block;padding:0 .22em .07em;border-bottom:1.6px solid currentColor}

.poem-toggle{margin:10px 0 2px;border:1px solid var(--line);border-radius:14px;background:var(--bg-fbfcff,#FbFcff);overflow:hidden}
.poem-toggle summary{cursor:pointer;list-style:none;padding:10px 14px;font-family:var(--sans);
  font-weight:700;font-size:13px;color:var(--primary-ink);user-select:none}
.poem-toggle summary::-webkit-details-marker{display:none}
.poem-toggle summary::before{content:"▸ ";display:inline-block;transition:.15s}
.poem-toggle[open] summary::before{content:"▾ "}
.poem-toggle summary:hover{color:var(--primary)}
.poem-full{padding:2px 16px 14px;font-family:var(--serif,Georgia,serif);font-size:15px;line-height:1.55;color:var(--ink)}
.poem-full p{margin:0 0 .9em}
.poem-full p:last-child{margin-bottom:0}
.frac .fd{display:block;padding:.07em .22em 0}

/* numeric */
.numrow{display:flex;gap:10px;justify-content:center;margin-top:16px}
.numrow input{font-family:var(--mono);font-size:19px;text-align:center;width:150px;padding:12px 14px;
  border:2px solid var(--line);border-radius:14px;outline:none;color:var(--ink);transition:.15s}
.numrow input:focus{border-color:var(--primary)}
.numrow input.ok{border-color:var(--ok);background:var(--ok-bg)}
.numrow input.bad{border-color:var(--bad);background:var(--bad-bg)}

/* choices */
.choices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:16px}.choice{overflow-wrap:anywhere}
@media(max-width:520px){.choices{grid-template-columns:minmax(0,1fr)}}
.choice{font-family:var(--mono);font-size:16px;text-align:center;padding:11px 10px;border:2px solid var(--line);
  border-radius:14px;background:var(--bg-fbfbff,#FbFbff);cursor:pointer;transition:.15s;color:var(--ink)}
.choice sup{color:var(--pow);font-size:.6em}
.choice:hover:not(:disabled){border-color:var(--primary);transform:translateY(-1px)}
.choice:disabled{cursor:default}
.choice.correct{border-color:var(--ok);background:var(--ok-bg);color:var(--fg-0b7a4f,#0b7a4f)}
.choice.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--fg-b52a2a,#b52a2a)}

/* controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.btn{font-family:var(--sans);font-weight:700;font-size:15px;border-radius:12px;padding:12px 18px;
  border:1px solid transparent;cursor:pointer;transition:.15s}
.btn.primary{background:var(--primary);color:var(--on-accent,#fff)}.btn.primary:hover:not(:disabled){background:var(--primary-ink);transform:translateY(-1px)}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}.btn.ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn:disabled{opacity:.5;cursor:default}
.spacer{flex:1}
.nav{display:flex;gap:8px}
.nav button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font-size:18px;cursor:pointer;color:var(--ink);transition:.15s}
.nav button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.nav button:disabled{opacity:.4;cursor:default}
/* подсказка по клавишам под карточкой — только там, где есть клавиатура */
.kbd-hint{margin:8px 2px 0;font-size:12px;color:var(--muted);text-align:right}
.kbd-hint kbd{font-family:var(--mono);font-size:11px;padding:1px 6px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface)}
@media (hover:none){.kbd-hint{display:none}}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* feedback */
.fb{margin-top:14px;font-weight:700;font-size:15px;display:none}
.fb.show{display:block}
.fb.ok{color:var(--ok)}.fb.bad{color:var(--bad)}
.box{margin-top:12px;border-radius:14px;padding:14px 16px;font-size:14.5px;display:none;animation:fade .3s ease}
.box.show{display:block}
.hintbox{background:var(--hint-bg);border:1px solid var(--bd-f1d9a6,#F1D9A6);color:var(--fg-8a5b00,#8a5b00)}
.solbox{background:var(--bg-f4f6fd,#F4F6FD);border:1px solid var(--line);color:var(--fg-33406b,#33406b)}
.solbox b{color:var(--ink)}
.solbox .mono{font-family:var(--mono)}
.solbox sup{color:var(--pow)}
.reset{margin-top:18px;text-align:center}
.reset button{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline}
.reset button:hover{color:var(--bad)}

/* ===================== серия верных ответов подряд + салют каждые 3 ===================== */
.streak-bar{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin:0 0 10px}
/* Как и у баннера cookies: авторский display перебивает браузерное
   правило [hidden], поэтому «Рекорд» и «Сегодня» показывались бы
   всегда, хотя скрипт прячет их атрибутом hidden до второй серии. */
.streak-pill[hidden]{display:none}
.streak-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:700;
  font-size:14px;color:var(--hint);background:var(--hint-bg);border-radius:99px;padding:7px 14px;
  margin:0;transition:.2s}
.streak-pill.hot{animation:streakPulse .5s ease infinite}
/* Рекорд и «сегодня» — бледнее текущей серии: главная цифра одна, остальные
   рядом для контекста. Кнопка «Поделиться» появляется только когда есть чем. */
.streak-pill.ghost{background:var(--soft);color:var(--pri);border:1px solid var(--line);
  box-shadow:none;font-weight:600}
.streak-share{margin-left:auto;flex:0 0 auto;border:1px solid var(--line);background:var(--surface,#fff);
  color:var(--pri);font-family:var(--mono);font-weight:700;font-size:13px;
  padding:6px 12px;border-radius:999px;cursor:pointer}
.streak-share:hover{background:var(--soft)}
@media(max-width:560px){
  .streak-bar{flex-wrap:wrap}
  .streak-share{margin-left:0;order:3}
}
@keyframes streakPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ---- монетки: по одной за каждый верный ответ подряд ----
   Копилка наглядно показывает, что именно теряется при ошибке: цифра
   в плашке серии обнуляется незаметно, а ряд монет заметно осыпается. */
.coin-row{display:flex;align-items:center;gap:3px;min-height:26px;flex-wrap:nowrap;
  flex:1 1 auto;min-width:0}
.streak-pill{flex:0 0 auto}
.coin{width:22px;height:22px;border-radius:50%;flex:0 0 auto;position:relative;
  background:radial-gradient(circle at 34% 30%,var(--bg-fff3b0,#FFF3B0) 0%,var(--bg-ffd75e,#FFD75E) 38%,var(--bg-f0a800,#F0A800) 72%,var(--bg-c97f00,#C97F00) 100%);
  box-shadow:0 1px 2px rgba(140,90,0,.45),inset 0 0 0 1.5px rgba(255,255,255,.45);
  animation:coinIn .42s cubic-bezier(.2,1.3,.4,1) both}
.coin::after{content:"";position:absolute;inset:5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5)}
.coin.gone{animation:coinOut .45s ease-in forwards}
.coin-more{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--hint);
  background:var(--hint-bg);border-radius:99px;padding:3px 8px;animation:coinIn .3s ease both}
@keyframes coinIn{
  0%{transform:translateY(-14px) scale(.2) rotateY(180deg);opacity:0}
  60%{opacity:1}
  100%{transform:translateY(0) scale(1) rotateY(0);opacity:1}}
@keyframes coinOut{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(26px) rotate(140deg) scale(.5);opacity:0}}
@media (max-width:420px){
  .coin{width:18px;height:18px}
  .coin::after{inset:4px}
  .coin-row{gap:2px;min-height:22px}}
@media (prefers-reduced-motion:reduce){
  .coin,.coin-more{animation:none}
  .coin.gone{animation:none;opacity:0}}

.fw-piece{position:fixed;z-index:301;pointer-events:none;width:12px;height:12px;border-radius:50%}
@keyframes fwBurst{0%{transform:translate(0,0) scale(1);opacity:1}
  65%{opacity:1}100%{transform:translate(var(--fx),var(--fy)) scale(.1);opacity:0}}
.fw-flash{position:fixed;width:460px;height:460px;border-radius:50%;z-index:298;pointer-events:none;
  transform:translate(-50%,-50%);animation:fwFlash .5s ease-out forwards}
@keyframes fwFlash{0%{opacity:.95;transform:translate(-50%,-50%) scale(.25)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}

.streak-toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-20px);z-index:302;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 40px rgba(23,33,59,.22);
  border-radius:99px;padding:12px 22px;font-family:var(--sans);font-weight:800;font-size:15px;
  color:var(--ink);display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.9,.25,1.3),opacity .35s ease}
.streak-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.streak-toast .emoji{font-size:20px}

.fbk-topbtn{position:fixed;top:16px;right:16px;z-index:40;display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:var(--sans);
  font-weight:700;font-size:13px;padding:9px 14px;border-radius:99px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.fbk-topbtn:hover{border-color:var(--primary);color:var(--primary-ink)}
@media (max-width:480px){.fbk-topbtn{top:6px;right:10px;width:40px;height:40px;padding:0;justify-content:center;font-size:0;gap:0}.fbk-topbtn::after{content:"💬";font-size:16px;line-height:1}}

.qid-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:8px 2px -4px}
.qid-row .qid{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.fbk-report{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--sans);
  font-weight:600;font-size:12px;padding:5px 11px;border-radius:99px;cursor:pointer;transition:.15s;white-space:nowrap}
.fbk-report:hover{border-color:var(--bad);color:var(--bad)}

.fbk-overlay{position:fixed;inset:0;background:rgba(23,33,59,.5);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:100}
.fbk-overlay[hidden]{display:none}
.fbk-modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px;max-width:420px;width:100%;max-height:90vh;overflow:auto;position:relative}
.fbk-close{position:absolute;top:14px;right:14px;background:none;border:0;font-size:18px;color:var(--muted);
  cursor:pointer;line-height:1;padding:4px}
.fbk-close:hover{color:var(--bad)}
.fbk-title{font-family:var(--mono);font-size:19px;font-weight:700;margin:0 0 16px;letter-spacing:-.01em}
.fbk-label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 14px}
/* Без этой строки поле «Номер теста» видно всегда: display:block из
   правила выше перебивает атрибут hidden, и на главной или в разделах
   в форме висела пустая строка с номером несуществующего задания.
   Номер нужен только когда форму открывают из самого задания. */
.fbk-label[hidden]{display:none}
.fbk-label span{display:block;margin-bottom:6px;color:var(--muted);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.04em}
.fbk-label select,.fbk-label textarea,.fbk-label input{width:100%;font-family:var(--sans);font-size:14.5px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;color:var(--ink);outline:none;
  transition:.15s;box-sizing:border-box}
.fbk-label select:focus,.fbk-label textarea:focus,.fbk-label input:focus{border-color:var(--primary)}
.fbk-label textarea{resize:vertical;min-height:110px;font-family:var(--sans)}
.fbk-label input[readonly]{background:var(--bg-f4f6fd,#F4F6FD);color:var(--muted)}
.fbk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fbk-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.fbk-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:2px 0 4px}
.fbk-note a{color:var(--primary-ink)}
.fbk-hint{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.fbk-status{font-size:13px;font-weight:600;color:var(--muted)}
.fbk-status.ok{color:var(--ok)}
.fbk-status.err{color:var(--bad)}
/* Кнопка «Отправить» размечена как .btn.primary. На страницах тем эти
   правила приходят из общего CSS, а витрины классов и главная собираются
   со своим сокращённым набором — там кнопка оставалась неоформленной.
   Поэтому правила едут вместе с самой формой. */
.fbk-modal .btn{font-family:var(--sans);font-weight:700;font-size:15px;
  border-radius:12px;padding:12px 18px;border:1.5px solid var(--line);
  background:var(--surface,#fff);color:var(--ink);cursor:pointer;min-height:46px;
  transition:.16s}
.fbk-modal .btn.primary{background:var(--primary);color:var(--on-accent,#fff);
  border-color:var(--primary)}
.fbk-modal .btn.primary:hover:not(:disabled){filter:brightness(1.07)}

/* ---- схема на весь экран (ZOOM_JS) ---- */
.rk-zfig{position:relative}
.rk-zfig>svg{cursor:zoom-in}
.rk-zbtn{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(23,33,59,.14);background:rgba(255,255,255,.92);color:#3B4467;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  box-shadow:0 2px 8px rgba(23,33,59,.14);z-index:2}
.rk-zbtn svg{width:18px;height:18px;display:block;cursor:pointer}
.rk-zbtn:hover{color:var(--primary,#5B4BDB)}
.rk-zoom{position:fixed;inset:0;z-index:10000;background:#0B0F1C;
  display:flex;flex-direction:column;touch-action:none}
.rk-zoom[hidden]{display:none}
.rk-zbar{display:flex;align-items:center;gap:8px;padding:10px 12px;
  padding-top:max(10px,env(safe-area-inset-top));color:#fff;flex:none}
.rk-zbar .sp{flex:1;font-size:13px;opacity:.7;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rk-zbar button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;padding:0;cursor:pointer;flex:none}
.rk-zbar button:hover{background:rgba(255,255,255,.2)}
.rk-zsc{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;touch-action:pan-x pan-y}
.rk-zin{flex:none;margin:auto;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));box-sizing:content-box}
.rk-zin svg{display:block;width:100%;height:auto;background:#fff;border-radius:12px;cursor:default}
@media print{.rk-zbtn,.rk-zoom{display:none!important}}

/* ---- Теория 2.0 (specs/theory-2): компоненты блоков theory/content/ ---- */
.th2{font-size:16px;line-height:1.62}
.th2 .card p,.th2 .card li{color:var(--ink)}
.th2 h2{font-family:var(--sans);font-size:19px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
.th2 h3{font-size:16px;font-weight:800;margin:16px 0 6px;color:var(--primary-ink)}
.th2 .th-lead{font-size:17px;margin:0 0 4px}
.th2 .th-lead b{color:var(--primary-ink)}
.th2 .th-key,.th2 .th-formula,.th2 .th-ex,.th2 .th-warn,.th2 .th-tip,.th2 .th-fact{
  border-radius:14px;padding:12px 15px;margin:12px 0;border:1px solid var(--line)}
.th2 .th-key{background:var(--primary-soft);border-color:transparent;border-left:4px solid var(--primary)}
.th2 .th-key::before{content:"Главное";display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary-ink);margin-bottom:4px}
.th2 .th-key[data-label]::before{content:attr(data-label)}
.th2 .th-formula{background:var(--surface);text-align:center;overflow-x:auto;padding:14px 12px;
  border:1.5px dashed var(--primary)}
.th2 .th-formula .th-cap{display:block;font-size:13px;color:var(--muted);margin-top:6px;text-align:center}
.th2 .th-ex{background:var(--ok-bg);border-color:transparent;border-left:4px solid var(--ok)}
.th2 .th-ex::before{content:"Пример";display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ok);margin-bottom:4px}
.th2 .th-ex[data-label]::before{content:attr(data-label)}
.th2 .th-warn{background:var(--bad-bg);border-color:transparent;border-left:4px solid var(--bad)}
.th2 .th-warn::before{content:"Частая ошибка";display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bad);margin-bottom:4px}
.th2 .th-tip{background:var(--hint-bg);border-color:transparent;border-left:4px solid var(--hint)}
.th2 .th-tip::before{content:"Как запомнить";display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--hint);margin-bottom:4px}
.th2 .th-tip[data-label]::before,.th2 .th-warn[data-label]::before{content:attr(data-label)}
.th2 .th-fact{background:var(--surface);border-style:dashed}
.th2 .th-fact::before{content:"Интересно";display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pow);margin-bottom:4px}
.th2 .th-key>:first-child,.th2 .th-ex>:first-child,.th2 .th-warn>:first-child,.th2 .th-tip>:first-child,
.th2 .th-fact>:first-child{margin-top:0}
.th2 .th-key>:last-child,.th2 .th-ex>:last-child,.th2 .th-warn>:last-child,.th2 .th-tip>:last-child,
.th2 .th-fact>:last-child{margin-bottom:0}
.th2 .th-steps{counter-reset:st;list-style:none;padding:0;margin:10px 0}
.th2 .th-steps>li{counter-increment:st;position:relative;padding:4px 0 4px 38px;margin:4px 0}
.th2 .th-steps>li::before{content:counter(st);position:absolute;left:0;top:3px;width:26px;height:26px;
  border-radius:50%;background:var(--primary);color:var(--on-accent,#fff);font-weight:800;font-size:13.5px;
  display:flex;align-items:center;justify-content:center}
.th2 .th-fig{margin:14px 0;text-align:center}
.th2 .th-fig>svg{width:max(60%,min(100%,300px));max-width:100%;height:auto;display:inline-block}
.th2 .th-fig figcaption,.th2 .th-pic figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.th2 .th-pic{margin:14px 0;text-align:center}
.th2 .th-pic img{width:max(60%,min(100%,300px));max-width:100%;height:auto;border-radius:14px}
.th2 .th-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:10px 0}
.th2 .th-grid>div{border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:var(--surface)}
.th2 .th-grid>div>b:first-child{display:block;color:var(--primary-ink);margin-bottom:3px}
.th2 .th-tw{overflow-x:auto;margin:10px 0}
.th2 table.th-table{border-collapse:collapse;width:100%;font-size:14.5px}
.th2 .th-table th,.th2 .th-table td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.th2 .th-table th{background:var(--primary-soft);color:var(--primary-ink);font-weight:800}
.th2 details.th-more{border:1px solid var(--line);border-radius:14px;margin:12px 0;background:var(--surface)}
.th2 details.th-more>summary{cursor:pointer;padding:10px 14px;font-weight:800;color:var(--primary)}
.th2 details.th-more>div{padding:0 14px 12px}
.th2 .mathd{overflow-x:auto;overflow-y:hidden;padding:4px 0}
.th2 .katex{font-size:1.08em}
.th2 .katex-display>.katex,.th2 .katex:has(.mfrac){font-size:1.4em}
.th2 .katex-display .katex .katex,.th2 .katex .katex:has(.mfrac){font-size:1em}
/* разделы по одному (specs/owner-batch-2026-10-13, T2): оглавление-чипы + «Назад / Далее» */
.th2-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.th2-toc button{font:inherit;font-size:13.5px;font-weight:700;line-height:1.25;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left}
.th2-toc button span{color:var(--muted);font-weight:800;margin-right:5px}
.th2-toc button[aria-current="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-accent,#fff)}
.th2-toc button[aria-current="true"] span{color:inherit;opacity:.75}
.th2-on>.card:not(.th2-cur){display:none}
.th2-pg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0}
.th2-pg button{font:inherit;font-size:14.5px;font-weight:800;padding:9px 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--primary-ink)}
.th2-pg button.th2-next{background:var(--primary);border-color:var(--primary);color:var(--on-accent,#fff);margin-left:auto}
.th2-pg button[hidden]{display:none}
.th2-pg .th2-all{border:0;background:none;color:var(--muted);font-weight:700;font-size:13.5px;padding:6px 4px;text-decoration:underline}
.th2-pg .th2-n{font-size:13px;color:var(--muted)}
.labt .lx a[hidden]{display:none!important}
.th2-more{flex:1 1 100%;font:inherit;font-size:14px;font-weight:800;padding:10px 14px;border-radius:14px;cursor:pointer;
  border:1px dashed var(--line);background:none;color:var(--primary-ink)}
@media (max-width:620px){.th2-toc{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-left:-4px;margin-right:-4px;padding:0 4px 2px}.th2-toc::-webkit-scrollbar{display:none}.th2-toc button{flex:none;white-space:nowrap}}
.th2:not(.th2-on) .th2-pg .th2-next,.th2:not(.th2-on) .th2-pg .th2-prev,.th2:not(.th2-on) .th2-pg .th2-n{display:none}
@media print{.th2-toc,.th2-pg{display:none!important}.th2-on>.card{display:block!important}}
.th2 .tex-raw{font-family:var(--mono);color:var(--primary-ink)}
.th2 .tex-d{display:block;text-align:center}
.th2 svg .ax{stroke:var(--muted);stroke-width:1.2;fill:none}
.th2 svg .grid{stroke:var(--line);stroke-width:1;fill:none}
.th2 svg .ln{stroke:var(--primary);stroke-width:2.5;fill:none}
.th2 svg .ln2{stroke:var(--pow);stroke-width:2.5;fill:none}
.th2 svg .ln3{stroke:var(--ok);stroke-width:2.5;fill:none}
.th2 svg .sh{fill:var(--primary-soft);stroke:var(--primary);stroke-width:1.5}
.th2 svg .sh2{fill:var(--hint-bg);stroke:var(--hint);stroke-width:1.5}
.th2 svg .dot{fill:var(--pow)}
.th2 svg .t{fill:var(--ink);font-family:var(--sans);font-size:13px}
.th2 svg .tm{fill:var(--muted);font-family:var(--sans);font-size:12px}
.th2 svg .tp{fill:var(--primary-ink);font-family:var(--sans);font-size:13px;font-weight:700}
.th-src{font-size:12.5px;color:var(--muted);margin:14px 2px 0}
.th2 pre{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 13px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.5;margin:10px 0}
.th2 code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.th2 :not(pre)>code{background:var(--primary-soft);padding:1px 5px;border-radius:6px}