/* ============================================================
   ДИЗАЙН-СИСТЕМА — один слой, без исторических переопределений.

   Правила:
   · Форма: кнопки-действия — таблетки (--r-pill); строки-варианты
     (ответ теста, пункт оглавления, чип палитры) и поля/селекты —
     прямоугольник --r-m; панели — --r-l; вложенные карточки
     (итог теста, подсказка, баннер) — --r-m.
   · Акценты: тёплый градиент --warmgrad — только главный CTA экрана
     («начать / продолжить занятие»); все рабочие действия — синий
     --accgrad. Семантика UI: --good / --bad / --warn. Цвета слоёв
     схемы (--client, --core…) в интерфейсе не используются.
   · Надзаголовок-лейбл — единый стиль .lab (и его группа ниже).
   · Шкала шрифтов: 11 лейбл · 12 вторичный · 13 кнопки/текст-S ·
     14 текст · 15.5 чтение · 16/18/22/28 заголовки · 42 дисплей.
   · Навигация = капсула: стеклянный контейнер с одним синим активом.
     Три уровня: шапка приложения → переключатель тренажёров →
     режим внутри тренажёра (компактная капсула в .dhead .tools).
     Свободная пилюля без капсулы — только контентный чип.
   · Анатомия экрана: один ряд .dhead — слева lab/h2/описание,
     справа .tools (селекты, режимы). Контролы в теле не живут.
   ============================================================ */
:root{
  /* форма и движение */
  --r-s:8px; --r-m:12px; --r-l:20px; --r-pill:999px;
  --t-fast:.15s; --t-med:.3s;
  --sidew:300px; /* единая ширина сайдбаров: палитра, карточки, карта */
  /* базовые цвета */
  --bg:#E9F0FA; --bg2:rgba(255,255,255,.55); --panel:rgba(255,255,255,.62); --line:rgba(28,28,37,.09); --line2:rgba(28,28,37,.06);
  --ink:#1C1C25; --muted:rgba(28,28,37,.64); --muted2:rgba(60,60,67,.48);
  /* цвета слоёв схемы — только для диаграмм (доска, карта, легенда) */
  --client:#c2890a; --edge:#4E92D8; --core:#5b63e6; --store:#16a06a; --scale:#e0701c; --push:#9b46e8; --rtc:#e6397a;
  /* семантика UI */
  --good:#16a06a; --bad:#e6397a; --warn:#c2890a;
  --accgrad:linear-gradient(135deg,#5A9CE0,#7FB9EC);
  --warmgrad:linear-gradient(135deg,#F09042,#E4603E); --warmsh:0 8px 20px rgba(228,96,62,.30);
  --glass:rgba(255,255,255,.62); --glassline:rgba(255,255,255,.55);
  --shadow:0 18px 44px rgba(30,34,64,.12);
  /* поверхности */
  --topbg:rgba(255,255,255,.55); --boardbg:rgba(255,255,255,.5); --boardgrid:rgba(78,146,216,.12); --mapbg:rgba(255,255,255,.55);
  --slotfill:#f4f7fc; --slothover:#e9eff8; --slotsel:#e3ecfb; --slotbad:#fdeaf0; --ghosttxt:#c2cad8;
  --nodefill:#ffffff; --cyllid:#eef2f9;
  --accentbg:#e9f0ff; --accentline:#cfe0ff;
  --okbg:#eafaf1; --okbg2:#f3fbf6; --oktext:#0f7a4a; --goodline:#bce4cd;
  --badbg:#fdeef3; --badbg2:#fdf4f7; --badtext:#b42c57; --badline:#f0c2cf;
  --warnbg:#fdf3da; --warnline:#efd9a8; --warntext:#9a6b00;
  --easyline:#bcd9f0; --easytext:#1364a6;
  --selbg:#eef3ff; --selhover:#f4f8ff;
  --mdtext:#2c3547; --codetext:#334155;
  --linkc:#b3bdd2; --linkdash:#c6cedd;
}
html[data-theme="dark"]{
  --bg:#0B1018; --bg2:rgba(255,255,255,.06); --panel:rgba(20,27,44,.6); --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.07);
  --ink:#E9EEF8; --muted:rgba(233,238,248,.66); --muted2:rgba(233,238,248,.44);
  --client:#f4c95d; --edge:#6FAEE6; --core:#8b9bff; --store:#5ad19a; --scale:#ff944d; --push:#cf91f5; --rtc:#ff6f91;
  --good:#5ad19a; --bad:#ff6f91; --warn:#f4c95d;
  --warmgrad:linear-gradient(135deg,#FFA45C,#F2704C); --warmsh:0 8px 22px rgba(244,114,76,.30);
  --glass:rgba(20,27,44,.6); --glassline:rgba(255,255,255,.09);
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --topbg:rgba(10,15,24,.55); --boardbg:rgba(13,19,32,.55); --boardgrid:rgba(120,170,230,.08); --mapbg:rgba(13,19,32,.55);
  --slotfill:rgba(255,255,255,.04); --slothover:rgba(255,255,255,.08); --slotsel:#1c2c4f; --slotbad:#3a1626; --ghosttxt:#3d4a63;
  --nodefill:#1A2133; --cyllid:#242e45;
  --accentbg:#16263f; --accentline:#2c4570;
  --okbg:#10301f; --okbg2:#0e2719; --oktext:#74e3ab; --goodline:#1f5238;
  --badbg:#371527; --badbg2:#2c1220; --badtext:#ff90b1; --badline:#5e2a3e;
  --warnbg:#2f2511; --warnline:#5d4a1d; --warntext:#e8c66d;
  --easyline:#27506e; --easytext:#83c8f5;
  --selbg:#18263f; --selhover:#141f33;
  --mdtext:#c9d3e5; --codetext:#b7c3da;
  --linkc:#48556f; --linkdash:#3a465f;
}

/* ====== БАЗА И ФОН ====== */
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,'SF Pro Text','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;z-index:-2;
  background:linear-gradient(165deg,#E9F0FA 0%,#E6F3FA 42%,#FDFDFF 100%);}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(420px 420px at -4% -6%, rgba(106,164,224,.16), transparent 70%),
  radial-gradient(480px 480px at 104% 36%, rgba(125,180,232,.12), transparent 70%),
  radial-gradient(420px 420px at 28% 108%, rgba(106,164,224,.10), transparent 70%);}
html[data-theme="dark"] body::before{background:linear-gradient(165deg,#0C111D 0%,#0A0F18 45%,#101727 100%);}
html[data-theme="dark"] body::after{background:
  radial-gradient(420px 420px at -4% -6%, rgba(90,156,224,.10), transparent 70%),
  radial-gradient(480px 480px at 104% 36%, rgba(127,185,236,.07), transparent 70%);}
/* один контейнер для всего: хедер и контент любой вкладки совпадают по обоим краям.
   Флекс-колонка на всю высоту окна — футер не липнет к короткому контенту,
   а прижимается к низу экрана (margin-top:auto у .appfoot) */
.wrap{max-width:1100px;margin:0 auto;padding:0 16px 36px;display:flex;flex-direction:column;min-height:100vh;}
.view{display:none;}
.view.on{display:block;margin-bottom:48px;}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ====== ХЕДЕР ====== */
header.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:22px 0 6px;margin-bottom:22px;background:transparent;border:none;}
header.top .brand{justify-self:start;}
header.top .iconbtn{justify-self:end;background:var(--glass);border:1px solid var(--glassline);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);}
@media(max-width:760px){header.top{grid-template-columns:auto 1fr auto;}header.top .tabs{justify-self:center;}}
.brand{display:flex;align-items:center;gap:9px;cursor:pointer;}
.brand .logo{width:30px;height:30px;border-radius:10px;background:var(--accgrad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 14px rgba(90,156,224,.35);flex:none;}
/* вордмарка — двухтоновая пара: жирная «Архитектура» + лёгкое акцентное «мессенджера» */
.brand h1{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin:0;white-space:nowrap;color:var(--ink);}
.brand h1 em{font-style:normal;font-weight:500;color:var(--edge);}
@media(max-width:560px){.brand h1{display:none;}}
.tabs{display:flex;gap:2px;flex-wrap:wrap;padding:5px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glassline);box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);}
.tab{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--r-pill);padding:8px 16px;cursor:pointer;transition:var(--t-fast);}
.tab:hover{color:var(--ink);background:var(--bg2);}
.tab.on{color:#fff;background:var(--accgrad);box-shadow:0 6px 16px rgba(90,156,224,.30);}
.tab svg,.pseg svg{flex:none;display:block;}
/* компактный хедер на узких экранах — иначе табы не влезают и страница уезжает вправо */
@media(max-width:430px){
  header.top{gap:6px;}
  .tabs{padding:3px;}
  .tab{padding:7px 9px;font-size:12px;gap:4px;}
  .tab svg{width:14px;height:14px;}
  header.top .iconbtn{width:36px;height:36px;}
}

/* ====== КНОПКИ ====== */
button{font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);background:var(--bg2);border:1px solid transparent;border-radius:var(--r-pill);padding:8px 16px;cursor:pointer;transition:var(--t-fast);}
button:hover{border-color:var(--edge);color:var(--ink);}
button:disabled{opacity:.35;cursor:default;}
button.primary{background:var(--accgrad);color:#fff;box-shadow:0 8px 20px rgba(90,156,224,.32);}
button.primary:hover{filter:brightness(1.06);border-color:transparent;color:#fff;}
button.ghost{background:transparent;color:var(--muted);}
/* стеклянная второстепенная кнопка (герой-блоки) */
.ghosty{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;font-size:14px;background:var(--bg2);border:1px solid var(--glassline);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
/* тёплый акцент — единственный главный CTA экрана (лендинг, кабинет) */
.landing .ctas .primary,.landcta .primary,.heroctas .primary{padding:13px 26px;font-size:15px;background:var(--warmgrad);box-shadow:var(--warmsh);}
.iconbtn{display:flex;align-items:center;justify-content:center;border-radius:50%;width:40px;height:40px;padding:0;font-size:15px;line-height:1;background:var(--bg2);}
.linkbtn{display:block;width:100%;background:none;border:none;color:var(--muted2);font-size:12px;margin-top:10px;padding:4px;cursor:pointer;text-align:center;}
.linkbtn:hover{color:var(--bad);background:none;border-color:transparent;}
.linkbtn.inline{display:inline;width:auto;margin:0;padding:0;}
.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-start;}

/* ====== СЕЛЕКТЫ ====== */
.lvlSelect,.scnSelect,.selsec{appearance:none;background-color:var(--bg2);border:1px solid transparent;color:var(--ink);font-family:inherit;font-weight:600;font-size:13px;border-radius:var(--r-m);padding:8px 30px 8px 12px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.lvlSelect:hover,.scnSelect:hover,.selsec:hover{border-color:var(--edge);}
.scnSelect{flex:1;min-width:150px;}
.selsec{width:100%;margin-bottom:10px;}

/* ====== ЛЕЙБЛЫ И ТЕКСТОВЫЕ ПОМОЩНИКИ ====== */
.lab,.palette h3,.sidecard h3,.toc .part,.reader .rmeta,.mappanel .tag,.mappanel .row b{
  font-size:11px;letter-spacing:.6px;color:var(--muted2);text-transform:uppercase;font-weight:700;}
.note{color:var(--muted2);font-size:12px;margin-top:8px;}
.note.lg{font-size:13px;line-height:1.6;}
.soft{color:var(--muted2);font-weight:400;}
a.lnk{color:var(--edge);text-decoration:none;} a.lnk:hover{text-decoration:underline;}
/* утилиты — замена инлайн-стилям в app.js */
.w100{width:100%;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;}
.mb8{margin-top:0;margin-bottom:8px;}
.my12{margin-top:12px;margin-bottom:12px;}

/* ====== ПАНЕЛИ (стекло) ====== */
.panel,.reader,.sidecard,.flash,.mappanel,.palette,.ivpanel,.dragghost{
  background:var(--glass);border:1px solid var(--glassline);border-radius:var(--r-l);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:var(--shadow);}
.board,.mapboard{background:var(--boardbg);border:1px solid var(--glassline);border-radius:var(--r-l);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--shadow);}
/* светлая тема: ридер курса молочный и почти непрозрачный — голубой фон страницы не просвечивает под текстом */
html[data-theme="light"] .reader{background:rgba(255,255,255,.92);}
.panel{padding:24px;margin-bottom:16px;}

/* ====== ПРАКТИКА: ОБОЛОЧКА ТРЕНАЖЁРОВ ====== */
/* переключатель тренажёров — текстовые вкладки на тонкой линии во всю ширину:
   без рамок и заливки, активная подчёркнута акцентным штрихом. Иерархия:
   капсула в шапке = приложение, линия-вкладки = раздел внутри */
.pseg-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--line);}
.pseg{position:relative;display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--muted);background:transparent;border:none;border-radius:0;padding:10px 16px 13px;cursor:pointer;transition:var(--t-fast);}
.pseg:hover{color:var(--ink);background:transparent;border:none;}
.pseg.on{color:var(--ink);}
.pseg.on::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--accgrad);}
@media(max-width:640px){.pseg{padding:9px 8px 12px;font-size:12px;gap:4px;}.pseg svg{width:14px;height:14px;}}
.pview{display:none;}
.pview.on{display:block;}
/* единая анатомия тренажёра: шапка «текст слева, контролы справа», контент
   заполняет контейнер целиком — края совпадают с шапкой, как на вкладке «Курс» */
.drill{margin:0;}
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:0 0 18px;}
.dhead h2{margin:3px 0 4px;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.dhead p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;max-width:62ch;}
.dhead .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.dhead .tools .selsec{width:240px;margin:0;}

/* ====== ИГРА «СОБЕРИ СХЕМУ» ====== */
.lvlpick{display:flex;align-items:center;gap:8px;}
.lvlpick .arrow{padding:6px 12px;font-size:15px;line-height:1;}
.phaserow{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.phaseinfo{flex:1;min-width:0;}
.phasetag{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.phasetag .fnum{color:var(--edge);}
.pbar{height:7px;background:var(--bg2);border:none;border-radius:5px;overflow:hidden;}
.pbar i{display:block;height:100%;width:0;background:var(--edge);border-radius:5px;transition:var(--t-med);}
.phasesub{margin-top:6px;font-size:12px;color:var(--muted2);}
.phasesub b{color:var(--edge);font-weight:700;}
.phasesub .miss{color:var(--bad);}
.phasectl{display:flex;gap:8px;}
.buildgrid{display:grid;grid-template-columns:minmax(0,1fr) var(--sidew);gap:16px;}
@media(max-width:920px){.buildgrid{grid-template-columns:minmax(0,1fr);}}
/* на узких экранах схему не ужимаем до нечитаемой — даём горизонтальный скролл */
@media(max-width:700px){
  .board,.mapboard{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  svg.boardsvg,svg#mapSvg{min-width:740px;}
}
.board,.mapboard{background-image:linear-gradient(var(--boardgrid) 1px,transparent 1px),linear-gradient(90deg,var(--boardgrid) 1px,transparent 1px);background-size:30px 30px;}
.board{padding:8px;position:relative;overflow:hidden;}
svg.boardsvg{width:100%;height:auto;display:block;touch-action:manipulation;}
.slot{cursor:pointer;}
.slot rect.box{fill:var(--slotfill);stroke-dasharray:5 4;stroke-width:1.5;}
.slot:hover rect.box{fill:var(--slothover);}
.slot.armed rect.box{fill:var(--slotsel);stroke-dasharray:none;stroke-width:2.4;}
.slot text.hint{font-family:'Space Mono',monospace;font-size:9.5px;fill:var(--muted2);}
.slot text.qm{font-weight:800;font-size:18px;fill:var(--ghosttxt);}
.slot.bad rect.box{fill:var(--slotbad);stroke:var(--bad)!important;}
.pnode{cursor:pointer;}
.pnode rect.box{stroke-width:2;fill:var(--nodefill);}
.pnode text.lbl{font-weight:700;font-size:12px;fill:var(--ink);pointer-events:none;}
.pnode text.sub{font-family:'Space Mono',monospace;font-size:8.5px;fill:var(--muted);pointer-events:none;}
.pnode.pick rect.box{stroke:var(--ink);stroke-width:3.2;filter:drop-shadow(0 0 5px rgba(0,0,0,.2));}
.pnode.miss rect.box{stroke-dasharray:4 3;}
.pnode.hintnode rect.box{filter:drop-shadow(0 0 8px currentColor);stroke-width:3.4;}
.glink{stroke-width:2.4;fill:none;}
.glink.done{stroke:var(--good);filter:drop-shadow(0 0 3px var(--good));}
.glink.flash{stroke:var(--bad);}
.glink.hint{stroke:var(--warn);stroke-dasharray:6 5;opacity:.7;}
.palette{padding:16px;}
.palette h3{margin:0 0 10px;}
.chip{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--bg2);border:1px solid transparent;border-left:4px solid transparent;border-radius:var(--r-m);padding:8px 10px;margin-bottom:7px;cursor:grab;transition:border-color var(--t-fast),opacity var(--t-fast);touch-action:none;user-select:none;}
.chip:hover{border-color:var(--edge);}
.chip:active{cursor:grabbing;}
.chip.pick{background:var(--slotsel);border-color:var(--edge);}
.chip.dragging{opacity:.35;}
.chip .nm{font-size:13px;font-weight:700;}
.chip .sb{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px;}
.dragghost{position:fixed;transform:translate(-50%,-135%);border:1px solid var(--edge);border-left:4px solid var(--edge);border-radius:var(--r-m);padding:7px 11px;font-size:12px;font-weight:700;color:var(--ink);pointer-events:none;z-index:200;white-space:nowrap;}
.slot.dragover rect.box{fill:var(--slotsel);stroke-dasharray:none!important;stroke-width:2.8;}
.palette .empty{color:var(--muted2);font-size:13px;line-height:1.5;padding:8px 0;}
.done-banner{background:var(--okbg);border:1px solid var(--good);color:var(--oktext);border-radius:var(--r-m);padding:12px 14px;margin-top:12px;font-weight:600;display:none;}
.done-banner.show{display:block;}
details.legend{margin-top:12px;}
details.legend summary{font-size:12px;color:var(--muted2);cursor:pointer;list-style:none;user-select:none;}
details.legend summary::-webkit-details-marker{display:none;}
details.legend summary::before{content:'▸ ';}
details.legend[open] summary::before{content:'▾ ';}
.legendrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted);}
.legendrow i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;}

/* ====== КАРТОЧКИ ====== */
.cardgrid{display:grid;grid-template-columns:minmax(0,1fr) var(--sidew);gap:16px;align-items:start;}
@media(max-width:920px){.cardgrid{grid-template-columns:minmax(0,1fr);}}
.flash{padding:24px;min-height:300px;display:flex;flex-direction:column;}
.flash .meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted2);letter-spacing:.4px;margin-bottom:14px;}
.flash .secpill{background:var(--bg2);border:1px solid transparent;border-radius:var(--r-pill);padding:4px 12px;color:var(--edge);font-weight:600;text-transform:none;letter-spacing:0;}
.flash .q{font-size:20px;font-weight:700;line-height:1.35;}
.flash .ahint{margin-top:14px;color:var(--muted);font-size:13px;font-style:italic;}
.flash .answer{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink);display:none;}
.flash .answer.show{display:block;}
.flash .answer .src{display:block;margin-top:12px;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted2);}
.flash .spacer{flex:1;}
.flash .actions{margin-top:18px;}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.grades.duo{grid-template-columns:1fr 1fr;}
.grades button{padding:11px 4px;font-size:13px;text-align:center;border-radius:var(--r-m);}
.g-again{border-color:var(--badline);color:var(--badtext);}
.g-hard{border-color:var(--warnline);color:var(--warntext);}
.g-good{border-color:var(--goodline);color:var(--oktext);}
.g-easy{border-color:var(--easyline);color:var(--easytext);}
.grades button:hover{filter:brightness(.97);}
.grades button small{display:block;font-family:'Space Mono',monospace;font-size:9px;opacity:.7;margin-top:2px;font-weight:400;}
.sidecard{padding:16px;margin-bottom:12px;}
.sidecard h3{margin:0 0 12px;}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.pill{background:var(--bg2);border:1px solid transparent;border-radius:var(--r-m);padding:7px 10px;font-size:12px;color:var(--muted);line-height:1.1;}
.pill b{display:block;font-size:17px;color:var(--ink);font-weight:800;margin-bottom:2px;}
.pill.due b{color:var(--warn);}
.heat{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;margin-top:4px;}
.cell{aspect-ratio:1;padding:0;border-radius:3px;background:var(--bg2);border:none;font-family:'Space Mono',monospace;font-size:8px;display:flex;align-items:center;justify-content:center;color:var(--muted2);cursor:pointer;transition:var(--t-fast);}
.cell:hover{outline:1px solid var(--edge);}
.emptyq{text-align:center;color:var(--muted);padding:40px 10px;}
.emptyq b{color:var(--good);display:block;font-size:16px;margin-bottom:6px;}

/* ====== КУРС ====== */
/* minmax(0,…) — иначе таблицы и <pre> внутри ридера распирают колонку шире экрана */
.coursegrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start;}
@media(max-width:860px){.coursegrid{grid-template-columns:minmax(0,1fr);}}
/* оглавление — тихая навигация без коробки: «листом бумаги» остаётся только
   ридер, и разница высот колонок при прокрутке перестаёт быть заметной */
.toc{background:transparent;border:none;box-shadow:none;padding:2px 10px 24px 2px;
  position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;}
.toc .part{display:block;margin:14px 6px 6px;}
.toc .part:first-child{margin-top:2px;}
.toc .ti{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;background:var(--bg2);border:1px solid transparent;border-radius:var(--r-m);padding:8px 10px;margin-bottom:5px;cursor:pointer;transition:var(--t-fast);}
.toc .ti:hover{border-color:var(--edge);}
.toc .ti.on{border-color:var(--edge);background:var(--accentbg);opacity:1;}
.toc .ti .n{font-size:12px;font-weight:700;color:var(--edge);min-width:20px;}
.toc .ti.read{opacity:.62;}
.toc .ti.read .n::after{content:' ✓';color:var(--good);}
.toc .ti .tt{font-size:12px;font-weight:600;line-height:1.3;}
.toc .ti .qsc{margin-left:auto;flex:none;align-self:center;font-family:'Space Mono',monospace;font-size:10px;color:var(--warntext);background:var(--warnbg);border:1px solid var(--warnline);border-radius:6px;padding:1px 5px;}
.reader{padding:26px 32px;min-height:300px;}
.reader .rmeta{display:block;margin-bottom:6px;}
.reader h1.rt{font-size:28px;font-weight:800;margin:0 0 18px;line-height:1.15;}
.md{font-size:15.5px;line-height:1.68;color:var(--mdtext);}
.md h2{font-size:19px;font-weight:800;margin:26px 0 10px;color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:6px;}
.md h3{font-size:16px;font-weight:700;margin:20px 0 8px;color:var(--ink);}
.md h4{font-size:14px;font-weight:700;margin:16px 0 6px;color:var(--muted);}
.md p{margin:10px 0;} .md ul,.md ol{margin:10px 0;padding-left:22px;} .md li{margin:5px 0;}
.md strong{color:var(--ink);font-weight:700;}
.md code{font-family:'Space Mono',monospace;font-size:13px;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--edge);}
.md pre{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;overflow:auto;margin:14px 0;}
.md pre code{background:none;border:none;padding:0;color:var(--codetext);font-size:12.5px;line-height:1.5;}
.md blockquote{border-left:3px solid var(--edge);margin:12px 0;padding:4px 14px;color:var(--muted);background:var(--bg2);border-radius:0 var(--r-s) var(--r-s) 0;}
.md table{border-collapse:collapse;margin:14px 0;width:100%;font-size:13px;}
.md th,.md td{border:1px solid var(--line2);padding:7px 10px;text-align:left;}
.md th{background:var(--bg2);color:var(--ink);font-weight:700;}
.md a{color:var(--edge);}
.rnav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);}
.rnav .grow{flex:1;}

/* ====== ВВОДНАЯ «О КУРСЕ» ====== */
.introprog{display:flex;align-items:center;gap:12px;margin:6px 0 20px;}
.introprog .bar{flex:1;height:8px;background:var(--bg2);border:none;border-radius:5px;overflow:hidden;}
.introprog .bar i{display:block;height:100%;background:var(--core);border-radius:5px;transition:var(--t-med);}
.introprog span{font-size:12px;color:var(--muted);white-space:nowrap;}
.intropart{margin:0 0 22px;}
.intropart h3{font-size:16px;font-weight:700;margin:0 0 4px;color:var(--ink);}
.intropart p{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 10px;}
.introsecs{display:flex;flex-wrap:wrap;gap:8px;}
.introsec{display:inline-flex;align-items:center;gap:7px;background:var(--bg2);border:1px solid transparent;border-radius:var(--r-pill);padding:6px 13px;font-size:12px;font-weight:600;text-align:left;line-height:1.3;}
.introsec:hover{border-color:var(--edge);}
.introsec b{color:var(--edge);font-weight:800;}
.introsec.done{opacity:.62;}
.introsec.done b::after{content:' ✓';color:var(--good);}

/* ====== ТЕСТ ПО РАЗДЕЛУ ====== */
.quiz{margin-top:30px;padding-top:22px;border-top:2px solid var(--line);}
.quiz.checked .qopt{pointer-events:none;}
.quizhead h2{font-size:18px;font-weight:700;margin:0;}
.quizsub{color:var(--muted);font-size:13px;margin:5px 0 16px;}
.qitem{margin-bottom:20px;padding-left:12px;border-left:3px solid transparent;transition:var(--t-fast);}
.qitem.ok{border-left-color:var(--good);}
.qitem.bad{border-left-color:var(--bad);}
.qq{font-size:15px;font-weight:700;margin-bottom:9px;line-height:1.4;}
.qq b{color:var(--edge);margin-right:5px;}
.qopts{display:flex;flex-direction:column;gap:7px;}
.qopt{text-align:left;width:100%;background:var(--nodefill);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 13px;font-weight:500;font-size:13px;line-height:1.45;white-space:normal;color:var(--ink);transition:var(--t-fast);}
.qopt:hover{border-color:var(--edge);color:var(--ink);background:var(--selhover);}
.qopt.sel,.qopt.sel:hover{border-color:var(--edge);background:var(--selbg);color:var(--ink);}
.qopt.right{border-color:var(--good);background:var(--okbg);color:var(--oktext);font-weight:600;}
.qopt.wrong{border-color:var(--bad);background:var(--badbg);color:var(--badtext);font-weight:600;}
.quiz.checked .qopt.faded{opacity:.45;}
.qopt .ltr{font-weight:800;margin-right:8px;}
.qopt .verdict{float:right;font-size:11px;font-weight:700;margin-left:10px;white-space:nowrap;}
.qopt.right .verdict{color:var(--oktext);} .qopt.wrong .verdict{color:var(--badtext);}
.qexp{display:none;margin-top:9px;font-size:13px;line-height:1.55;color:var(--muted);background:var(--bg2);border-radius:var(--r-s);padding:9px 12px;}
.qexp.show{display:block;}
.qexp b{color:var(--ink);}
.quizfoot{margin-top:18px;}
.qcheckbtn{width:100%;}
/* вложенная карточка-итог: используется тестом, API-дриллом и таблицами */
.qsummary{border:1px solid var(--line);border-radius:var(--r-m);padding:20px;text-align:center;}
.qsummary.ok{border-color:var(--good);background:var(--okbg2);}
.qsummary.bad{border-color:var(--badline);background:var(--badbg2);}
.qsummary .big{font-size:28px;font-weight:800;line-height:1;}
.qsummary.ok .big{color:var(--oktext);} .qsummary.bad .big{color:var(--badtext);}
.qsummary .msg{font-size:13px;color:var(--muted);margin:9px 0 15px;line-height:1.5;}
.qsummary .acts{justify-content:center;}
.qsummary.compact{text-align:left;}
.qsummary.compact .big{font-size:20px;}
.qsummary.compact .acts{justify-content:flex-start;}

/* ====== КАРТА ====== */
/* карта на всю ширину контейнера; сценарий и сброс — в .dhead .tools;
   контекст узла/сценария — полосой под картой; зум кнопками поверх доски */
.mapboard{padding:8px;position:relative;overflow:hidden;}
svg#mapSvg{width:100%;height:auto;display:block;}
.mapzoom{position:absolute;bottom:14px;right:14px;display:flex;flex-direction:column;gap:6px;z-index:5;}
.mapzoom button{width:34px;height:34px;border-radius:50%;padding:0;font-size:17px;line-height:1;background:var(--glass);border:1px solid var(--glassline);box-shadow:0 4px 12px rgba(20,30,55,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.mapzoom button:hover{border-color:var(--edge);color:var(--edge);}
/* плавающий контекст в пустой верхней зоне доски: шаги сценария и пояснение узла */
.mapover{position:absolute;top:14px;left:14px;right:14px;z-index:4;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.mapover>*{pointer-events:auto;}
.mapover .capbar{margin:0;font-size:12.5px;padding:10px 14px;background:var(--glass);border:1px solid var(--glassline);border-left:3px solid var(--edge);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 22px rgba(20,30,55,.10);}
.mapover .capbar.rtc{border-left-color:var(--rtc);}
/* пояснение узла — плавающая карточка рядом с кликнутым блоком (координаты ставит JS);
   в свободном режиме — короткая подсказка в верхнем левом углу */
.mappanel{display:none;position:absolute;left:14px;top:14px;z-index:6;margin:0;padding:12px 32px 12px 16px;min-height:0;max-height:300px;overflow:auto;max-width:560px;}
.mappanel.show{display:block;}
.mclose{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;padding:0;font-size:15px;line-height:1;color:var(--muted);background:var(--bg2);border:none;flex:none;}
.mclose:hover{color:var(--bad);border:none;}
.mappanel .mclose{position:absolute;top:8px;right:8px;}
.mappanel h3{font-size:15px;margin:4px 0 2px;}
.mappanel .secref{font-size:11px;margin-bottom:8px;}
.mappanel .row{margin:8px 0;}
.mappanel .row span{font-size:12.5px;}
.mappanel .mhint{margin:0;font-size:12px;line-height:1.55;color:var(--muted);}
.mappanel h3{margin:7px 0 3px;font-size:18px;font-weight:700;}
.mappanel .secref{font-size:12px;color:var(--edge);font-weight:600;margin-bottom:12px;}
.mappanel .row{margin:11px 0;}
.mappanel .row b{display:block;margin-bottom:3px;}
.mappanel .row span{font-size:13px;line-height:1.5;color:var(--ink);}
.mappanel .hint{color:var(--muted);font-size:13px;line-height:1.55;}
/* полоса шагов: заголовок и стрелки в одну строку, под ними подпись шага */
.capbar{border-radius:var(--r-m);font-size:13px;line-height:1.5;color:var(--ink);display:none;}
.capbar.show{display:block;}
.caphead{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.capbar .cstep{font-family:'Space Mono',monospace;font-size:11px;color:var(--edge);letter-spacing:.5px;}
.capbar.rtc .cstep{color:var(--rtc);}
.capbar #mcapText{display:block;margin-top:5px;}
.capnav{display:flex;gap:6px;align-items:center;}
.capnav .arrow{padding:4px 11px;font-size:14px;line-height:1;}
.capnav .kbdhint{font-size:11px;color:var(--muted2);margin-right:6px;}
@media(max-width:560px){.capnav .kbdhint{display:none;}}
/* узлы и связи карты */
.node{cursor:pointer;} .node text{pointer-events:none;}
.node .label{font-weight:700;font-size:13px;fill:var(--ink);}
.node .sub{font-family:'Space Mono',monospace;font-size:9.5px;fill:var(--muted);}
.node .tech{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;fill:currentColor;opacity:.95;letter-spacing:.2px;}
.node .shape{transition:var(--t-fast);} .node .lid{transition:var(--t-fast);}
.node .qline{stroke:currentColor;opacity:.3;stroke-width:1.4;}
.node .titlebar{opacity:.9;}
.node:hover .shape{filter:brightness(.96);}
.node.isnew .shape{stroke-dasharray:4 3;}
.node.dim{opacity:.34;}
.node.hl .shape{stroke-width:3;}
.node.active .shape{stroke-width:3.2;filter:drop-shadow(0 0 4px currentColor);}
.node.active.act-rtc .shape{filter:drop-shadow(0 0 6px var(--rtc));}
.node.sel .shape{stroke:var(--ink);stroke-width:3.2;filter:drop-shadow(0 0 5px rgba(0,0,0,.18));}
.link{stroke:var(--linkc);stroke-width:2;fill:none;transition:var(--t-fast);}
.link.dashed{stroke-dasharray:5 5;stroke:var(--linkdash);}
.link.rtc{stroke:var(--rtc);stroke-dasharray:6 6;opacity:.5;}
.link.active{stroke:var(--ink);stroke-width:3;}
.link.statusline{stroke:var(--client);} /* цвет потока статусов = жёлтый слоя клиента — это язык диаграммы */
.link.rtcline{stroke:var(--rtc);stroke-width:3;opacity:1;}
.link.dim{opacity:.16;}
.planelabel{fill:var(--muted2);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
.planediv{stroke:var(--line);stroke-dasharray:2 9;stroke-width:1.4;}
.servlabel{fill:var(--muted2);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;}
#marrow path{fill:var(--linkc);}
#marrowA path{fill:var(--ink);}

/* ====== КАБИНЕТ: без коробок — кольцо и типографика на чистом фоне ====== */
/* герой: кольцо и текст слева, столбик CTA справа; статистика — отдельной крупной строкой */
.cabhero{display:flex;gap:40px;align-items:center;flex-wrap:wrap;padding:30px 0 4px;}
.ring{position:relative;width:172px;height:172px;border-radius:50%;flex:none;
  background:conic-gradient(from -90deg,#5A9CE0,#7FB9EC calc(var(--p,0)*3.6deg),rgba(110,150,200,.18) 0);
  box-shadow:0 10px 30px rgba(47,107,255,.18);}
.ring .hole{position:absolute;inset:14px;background:var(--bg);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring .hole b{font-size:48px;font-weight:800;line-height:1;color:var(--ink);}
.ring .hole b i{font-style:normal;font-size:24px;font-weight:700;color:var(--muted);margin-left:2px;}
.ring .hole small{font-size:11px;color:var(--muted2);margin-top:4px;letter-spacing:1px;}
.cabhero .meta{flex:1;min-width:260px;}
.cabhero .meta .lvlbadge{display:inline-block;font-size:12px;font-weight:700;color:var(--edge);background:var(--accentbg);border:1px solid var(--accentline);border-radius:var(--r-pill);padding:4px 13px;margin-bottom:12px;letter-spacing:.2px;}
.cabhero .meta h2{margin:0 0 8px;font-size:31px;font-weight:800;letter-spacing:-.4px;}
.cabhero .meta p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:46ch;}
.heroctas{display:flex;flex-direction:column;gap:10px;min-width:260px;}
.heroctas button{justify-content:center;display:inline-flex;align-items:center;gap:8px;}
/* тихая сервисная строка под CTA: экспорт / импорт / сброс — текст, не кнопки
   (та же идиома, что футер) */
.herodata{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:2px;}
.herodata i{font-style:normal;color:var(--muted2);font-size:12px;}
.databtn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:2px 4px;font-size:12.5px;font-weight:600;color:var(--muted2);border-radius:0;}
.databtn:hover{color:var(--edge);background:none;border:none;}
.databtn.danger:hover{color:var(--bad);}
.cabstats{display:flex;gap:24px 72px;flex-wrap:wrap;margin:52px 0 4px;font-size:12px;color:var(--muted2);letter-spacing:.4px;text-transform:uppercase;}
.cabstats span{display:flex;flex-direction:column;gap:6px;}
.cabstats b{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:0;text-transform:none;}
/* прогресс по направлениям — один контейнер: пять ячеек с тонкими разделителями */
.cabcols{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:46px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glassline);border-radius:var(--r-l);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:var(--shadow);}
/* ячейка целиком кликабельна: иконка-плашка сверху, прогресс прижат к низу */
.ccol{cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;padding:28px 26px;border-left:1px solid var(--line2);transition:background var(--t-fast);}
.ccol:first-child{border-left:none;}
.ccol:hover{background:var(--bg2);}
.cic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--accentbg);color:var(--edge);margin-bottom:16px;}
@media(max-width:840px){
  .cabcols{grid-template-columns:1fr 1fr;}
  .ccol{border-left:none;border-top:1px solid var(--line2);}
  .ccol:nth-child(-n+2){border-top:none;}
  .ccol:nth-child(even){border-left:1px solid var(--line2);}
}
@media(max-width:560px){
  .cabcols{grid-template-columns:1fr;}
  .ccol{border-left:none;}
  .ccol:first-child{border-top:none;}
  .ccol:nth-child(2){border-top:1px solid var(--line2);}
}
.ccol h3{display:flex;align-items:center;gap:9px;margin:0 0 7px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.ccol h3 svg{color:var(--edge);flex:none;}
.ccol h3 .go{display:inline-flex;color:var(--muted2);transition:var(--t-fast);}
.ccol:hover h3 .go{color:var(--edge);transform:translateX(3px);}
.ccol .num{margin:0 0 20px;font-size:13px;color:var(--muted);}
.ccol .num b{color:var(--ink);font-weight:800;font-size:17px;}
.ccol .bar{height:2px;width:100%;margin-top:auto;background:var(--line);border:none;border-radius:2px;overflow:hidden;}
.ccol .bar i{display:block;height:100%;background:var(--accgrad);border-radius:2px;transition:var(--t-med);}
/* данные: экспорт/импорт парой с пояснением, сброс — отдельно и в стороне */

/* ====== ГЛАВНАЯ: ЛЕНДИНГ ====== */
.landing{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;padding:26px 0 10px;}
@media(max-width:940px){.landing{grid-template-columns:1fr;gap:28px;}.phone{margin:0 auto;}}
.landing h2{font-size:clamp(30px,4.6vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 16px;}
@media(max-width:440px){.landing h2{font-size:25px;}}
.landing h2 b{background:var(--warmgrad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.landing .sub{font-size:16px;line-height:1.6;color:var(--muted);max-width:50ch;margin:0 0 22px;}
.landing .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.factrow{display:flex;gap:16px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:12px;color:var(--muted2);}
.factrow b{color:var(--edge);font-weight:700;}
.kickrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.kickrow span{font-size:12px;font-weight:600;color:var(--edge);background:var(--accentbg);border:1px solid var(--accentline);border-radius:var(--r-pill);padding:4px 12px;letter-spacing:.02em;}
/* секции-витрины: текст + живой кусочек продукта; хайрлайн отделяет секции друг от друга и от героя */
.landsec{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:44px;padding-top:44px;border-top:1px solid var(--line);}
.landsec.flip .lsdemo{order:-1;}
@media(max-width:860px){.landsec{grid-template-columns:1fr;gap:24px;margin-top:32px;padding-top:32px;}.landsec.flip .lsdemo{order:0;}}
.lstext h3{margin:8px 0 10px;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.lstext p{margin:0 0 18px;font-size:14px;line-height:1.65;color:var(--muted);max-width:48ch;}
.lsdemo{pointer-events:none;user-select:none;margin-bottom:0;}
.lsdemo.center{display:flex;flex-direction:column;align-items:center;gap:22px;}
.lsdemo .cabstats{margin:0;justify-content:center;gap:20px 44px;}
.lsdemo .qopts{margin-top:10px;}
/* появление при скролле */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;}}
/* финальный CTA — без коробки, на той же линии-разделителе, что и секции */
.landcta{margin-top:44px;padding:44px 0 8px;text-align:center;border-top:1px solid var(--line);}
.landcta h3{margin:0 0 7px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.landcta p{margin:0 0 20px;font-size:14px;color:var(--muted);}
.landsign{margin-top:26px;text-align:center;font-size:13px;color:var(--muted2);line-height:1.6;}
.landsign+.landsign{margin-top:8px;}
.landsign a{color:var(--edge);font-weight:600;text-decoration:none;}
.landsign a:hover{text-decoration:underline;}
.landsign .linkbtn{display:inline;width:auto;padding:0;margin:0;font-size:13px;color:var(--edge);font-weight:600;background:none;border:none;cursor:pointer;}
.landsign .linkbtn:hover{text-decoration:underline;}

/* телефон-мокап */
.phone{position:relative;width:312px;height:584px;border-radius:40px;overflow:hidden;margin:0;
  background:linear-gradient(165deg,#E9F0FA 0%,#E6F3FA 42%,#FDFDFF 100%);
  box-shadow:0 24px 60px rgba(30,34,64,.16),0 0 0 1px rgba(255,255,255,.6) inset;}
html[data-theme="dark"] .phone{background:linear-gradient(165deg,#101727 0%,#0D1320 45%,#151E33 100%);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset;}
.phone .blob{position:absolute;border-radius:50%;pointer-events:none;top:-50px;left:-70px;width:260px;height:260px;background:radial-gradient(circle,rgba(106,164,224,.14),transparent 70%);}
.ph-head{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:10px;padding:18px 16px 12px;
  background:var(--topbg);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-bottom:1px solid var(--glassline);}
.ph-ava{width:42px;height:42px;border-radius:50%;padding:2px;background:var(--accgrad);box-sizing:border-box;flex:none;}
.ph-ava i{display:flex;width:100%;height:100%;border-radius:50%;background:#DCEDF9;border:2px solid rgba(255,255,255,.9);box-sizing:border-box;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:600;color:#3D7CB0;}
.ph-head .nm{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
.ph-head .st{font-size:11px;font-weight:500;color:var(--edge);}
.ph-msgs{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:84px 14px 78px;}
.ph-msg{max-width:80%;padding:9px 13px 7px;border-radius:16px;font-size:13px;line-height:1.4;
  opacity:0;transform:translateY(10px);animation:msgIn .5s cubic-bezier(.2,.7,.3,1) forwards;}
.ph-msg.in{align-self:flex-start;border-bottom-left-radius:5px;background:var(--bg2);border:1px solid var(--glassline);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.ph-msg.out{align-self:flex-end;border-bottom-right-radius:5px;background:var(--accgrad);color:#fff;border:1px solid rgba(255,255,255,.12);}
.ph-msg .mt{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:10px;}
.ph-msg.in .mt{color:var(--muted2);}
.ph-msg.out .mt{color:rgba(255,255,255,.7);}
@keyframes msgIn{to{opacity:1;transform:none;}}
.ph-typing{align-self:flex-start;display:flex;gap:4px;align-items:center;padding:11px 14px;border-radius:16px;border-bottom-left-radius:5px;background:var(--bg2);border:1px solid var(--glassline);opacity:0;max-height:44px;overflow:hidden;animation:msgIn .5s forwards;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
@keyframes typOut{to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0;margin-bottom:-6px;}}
.ph-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted2);animation:tym 1.2s infinite;}
.ph-typing i:nth-child(2){animation-delay:.15s;}
.ph-typing i:nth-child(3){animation-delay:.3s;}
@keyframes tym{0%,60%,100%{transform:none;opacity:.4;}30%{transform:translateY(-3px);opacity:.95;}}
.ph-input{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px 16px;
  background:var(--topbg);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border-top:1px solid var(--glassline);}
.ph-input .fld{flex:1;height:36px;border-radius:18px;background:var(--bg2);border:1px solid var(--glassline);display:flex;align-items:center;padding:0 14px;font-size:13px;font-weight:500;color:var(--muted2);cursor:pointer;text-align:left;transition:var(--t-fast);}
.ph-input .fld:hover{border-color:var(--edge);color:var(--edge);}
@media (prefers-reduced-motion: reduce){.ph-msg{animation:none!important;opacity:1!important;transform:none!important;}.ph-typing{display:none;}}

/* ====== ПРИКИДКИ ====== */
.estq{font-size:18px;font-weight:700;line-height:1.5;margin:10px 0 6px;color:var(--ink);}
.estq.sm{font-size:16px;}
.estunit{color:var(--muted);font-size:13px;margin-bottom:12px;}
.eststeps{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.65;font-family:'Space Mono',monospace;}
.eststeps.sans{font-family:inherit;}

/* ====== ТРЕНАЖЁР «КОНТРАКТЫ» (API + БД) ====== */
/* режим API/БД — компактная капсула 3-го уровня в .dhead .tools */
.adpills{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--bg2);border:1px solid var(--glassline);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.adpill{font-weight:600;font-size:13px;color:var(--muted);background:transparent;border:1px solid transparent;padding:6px 13px;display:flex;align-items:center;gap:6px;}
.adpill:hover{color:var(--ink);border-color:transparent;}
.adpill.on{color:#fff;background:var(--accgrad);box-shadow:0 4px 12px rgba(90,156,224,.28);}
.mrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.mbtn{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;padding:8px 14px;}
.mbtn.on{background:var(--accgrad);color:#fff;border-color:transparent;}
.adcanon{font-family:'Space Mono',monospace;font-size:13px;margin:10px 0 8px;color:var(--ink);word-break:break-word;}
.adfacts{font-size:13px;color:var(--muted);line-height:1.7;}
.adfacts b{color:var(--ink);}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px;}
.tchip{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;padding:7px 14px;}
.tchip.on{border-color:var(--edge);background:var(--accentbg);}
.tchip.done{color:var(--oktext);}
/* кликабельные чипы — единый элемент выбора/сборки без печати */
.pickgrid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.pchip{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;padding:8px 14px;background:var(--bg2);border:1px solid transparent;border-radius:var(--r-pill);color:var(--ink);transition:var(--t-fast);}
.pchip:hover{border-color:var(--edge);}
.pchip.on{background:var(--accentbg);border-color:var(--edge);box-shadow:0 0 0 1px var(--edge) inset;}
.pchip.right{background:var(--okbg);border-color:var(--good);color:var(--oktext);}
.pchip.wrong{background:var(--badbg);border-color:var(--bad);color:var(--badtext);text-decoration:line-through;}
.pchip.missed{background:var(--warnbg);border-color:var(--warnline);color:var(--warntext);}
.pchip.faded{opacity:.4;}
.pchip:disabled{opacity:.3;cursor:default;}
.pathbuild{font-family:'Space Mono',monospace;font-size:14px;background:var(--bg2);border:1px dashed var(--line);border-radius:var(--r-m);padding:9px 12px;min-height:42px;display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin-bottom:8px;}
.pathbuild .bseg{cursor:pointer;background:var(--accentbg);border:1px solid var(--accentline);border-radius:var(--r-s);padding:2px 8px;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:var(--ink);}
.pathbuild .bseg:hover{border-color:var(--bad);text-decoration:line-through;}
.pathbuild .slash{color:var(--muted2);font-weight:700;}
.pathbuild .ph{color:var(--muted2);font-size:12px;font-style:italic;}

/* ====== ПРОГОН ИНТЕРВЬЮ ====== */
.ivpanel{padding:24px;margin-bottom:16px;}
.ivhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.ivpanel h3{margin:4px 0 10px;font-size:18px;font-weight:700;}
.ivpanel p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;}

/* ====== ПРАЗДНОВАНИЯ И ТОСТ ====== */
.confetti{position:fixed;top:-14px;width:9px;height:14px;border-radius:2px;z-index:300;pointer-events:none;animation:confall linear forwards;}
@keyframes confall{to{transform:translate(var(--dx,0),105vh) rotate(560deg);opacity:.85;}}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--r-m);font-weight:700;font-size:14px;opacity:0;transition:var(--t-med);z-index:310;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.25);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ====== МОБИЛЬНАЯ АДАПТАЦИЯ ====== */
/* оглавление курса на телефоне прячется за кнопку-шапку: иначе список из
   30 пунктов отодвигает текст раздела на три экрана вниз */
.tocbar{display:none;}
@media(max-width:860px){
  .tocbar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
    background:var(--glass);border:1px solid var(--glassline);border-radius:var(--r-m);padding:13px 14px;
    font-size:14px;font-weight:700;color:var(--ink);box-shadow:var(--shadow);
    backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);}
  .tocbar .chev{flex:none;color:var(--muted);transition:transform var(--t-fast);}
  .tocbar[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .toc{display:none;}
  .toc.open{display:block;position:static;max-height:55vh;overflow:auto;
    background:var(--glass);border:1px solid var(--glassline);border-radius:var(--r-l);box-shadow:var(--shadow);
    backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);padding:10px 12px 14px;}
}
@media(max-width:640px){
  /* переключатель тренажёров — горизонтальная лента во всю ширину экрана,
     а не две строки подчёркнутых вкладок */
  .pseg-row{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:0 -16px 18px;padding:0 12px;}
  .pseg-row::-webkit-scrollbar{display:none;}
  .pseg{flex:none;white-space:nowrap;}
}
@media(max-width:700px){
  /* телефон-мокап на лендинге не влезает в экран телефона без ужимания
     до игрушечного — на мобиле его просто нет, герой остаётся текстовым */
  .phone{display:none;}
  /* шапка экрана: контролы в строку на всю ширину, не «лесенкой» */
  .dhead h2{font-size:20px;}
  .dhead .tools{width:100%;}
  .dhead .tools .selsec{width:100%;}
  .lvlpick{flex:1 1 100%;}
  .lvlpick .lvlSelect{flex:1;min-width:0;}
  .dhead .tools>.lvlSelect{flex:1;min-width:0;}
  .scnSelect{width:100%;}
  /* игра: палитра над доской — выбрала блок, и доска сразу под пальцем;
     чипы — компактные пилюли в несколько рядов вместо колонки на весь экран */
  .buildgrid .palette{order:-1;}
  #paletteBox{display:flex;flex-wrap:wrap;gap:7px;}
  #paletteBox .chip{display:inline-flex;width:auto;margin:0;}
  #paletteBox .empty,#paletteBox .note,#paletteBox .pickgrid,#paletteBox button{width:100%;}
  /* панели плотнее — воздух по краям на телефоне дороже */
  .panel,.ivpanel{padding:18px 14px;}
  .flash{padding:20px 16px;}
  .reader{padding:22px 16px;}
  .reader h1.rt{font-size:23px;}
  /* широкие таблицы курса скроллятся пальцем, длинные токены в коде переносятся */
  .md table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .md code{overflow-wrap:anywhere;}
  /* кабинет: кольцо и текст в столбик по центру, CTA на всю ширину,
     статистика — сеткой два на два вместо разъезжающейся строки */
  .cabhero{flex-direction:column;align-items:center;text-align:center;gap:22px;padding:18px 0 0;}
  .cabhero .meta{min-width:0;}
  .heroctas{width:100%;min-width:0;}
  .cabstats{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:36px 0 0;}
  .cabstats b{font-size:24px;}
  /* карта: полоса шагов сценария — над доской и липнет к верху экрана при
     прокрутке; пояснение узла — нижним листом поверх экрана; кнопки зума
     не нужны — доска и так скроллится по горизонтали */
  .mapboard{display:flex;flex-direction:column;}
  .mapover{position:sticky;order:-1;top:8px;left:8px;right:auto;width:100%;margin-bottom:8px;z-index:7;}
  .mapzoom{display:none;}
  .capnav .arrow{padding:8px 14px;}
  .mappanel{position:fixed;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto!important;max-width:none;max-height:45vh;z-index:150;}
  .mappanel:has(.mhint){display:none;}
}
@media(max-width:380px){.tab svg{display:none;}}

/* ====== ПОДВАЛ ====== */
.appfoot{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted2);}
.appfoot a{display:inline-flex;align-items:center;gap:5px;color:var(--edge);font-weight:600;text-decoration:none;}
.appfoot a:hover{text-decoration:underline;}
.appfoot i{font-style:normal;color:var(--muted2);}
.appfoot .linkbtn{display:inline;width:auto;padding:0;margin:0;font-size:13px;color:var(--edge);font-weight:600;}
.appfoot .linkbtn:hover{text-decoration:underline;}