:root{
  --brand:#00AE8E; --brand-deep:#008F75; --accent:#F47920;
  --bg:#F4F8F6; --surface:#FFFFFF; --ink:#182420; --muted:#5E6E68;
  --border:#DCE6E2; --tint:#E9F5F1; --tint-border:#C4E4DB;
  --good:#0E8A63; --good-bg:#E3F4EC; --bad:#C0392B; --bad-bg:#FBEAE7;
  --warn:#A9600F; --warn-bg:#FBEEDF;
  --chip-bg:#EEF3F1; --shadow:0 1px 3px rgba(24,36,32,.07);
}
@media (prefers-color-scheme: dark){:root{
  --brand:#23C9A6; --brand-deep:#3AD6B5; --accent:#FF9448;
  --bg:#0E1513; --surface:#17201D; --ink:#E9F0ED; --muted:#93A39C;
  --border:#28352F; --tint:#152722; --tint-border:#2A4A40;
  --good:#3ECF9A; --good-bg:#123126; --bad:#F2836F; --bad-bg:#3A1F1A;
  --warn:#E9A257; --warn-bg:#33240F;
  --chip-bg:#1F2B27; --shadow:none;
}}
:root[data-theme="dark"]{
  --brand:#23C9A6; --brand-deep:#3AD6B5; --accent:#FF9448;
  --bg:#0E1513; --surface:#17201D; --ink:#E9F0ED; --muted:#93A39C;
  --border:#28352F; --tint:#152722; --tint-border:#2A4A40;
  --good:#3ECF9A; --good-bg:#123126; --bad:#F2836F; --bad-bg:#3A1F1A;
  --warn:#E9A257; --warn-bg:#33240F;
  --chip-bg:#1F2B27; --shadow:none;
}
:root[data-theme="light"]{
  --brand:#00AE8E; --brand-deep:#008F75; --accent:#F47920;
  --bg:#F4F8F6; --surface:#FFFFFF; --ink:#182420; --muted:#5E6E68;
  --border:#DCE6E2; --tint:#E9F5F1; --tint-border:#C4E4DB;
  --good:#0E8A63; --good-bg:#E3F4EC; --bad:#C0392B; --bad-bg:#FBEAE7;
  --warn:#A9600F; --warn-bg:#FBEEDF;
  --chip-bg:#EEF3F1; --shadow:0 1px 3px rgba(24,36,32,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.65 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
#app{max-width:720px;margin:0 auto;padding:20px 18px 56px}
a{color:var(--brand-deep)}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{line-height:1.25;text-wrap:balance;margin:0}
.label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ── Шапка ─────────────────────────────── */
.top{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.logo{font-weight:800;font-size:17px;letter-spacing:-.02em}
.logo em{font-style:normal;color:var(--brand)}
.logo em + em{color:var(--accent)}
.top .label{margin-left:auto}

/* ── Герой с прогрессом ────────────────── */
.hero{display:flex;gap:18px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px}
.ring{flex:none;width:84px;height:84px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{stroke:var(--border)}
.ring .bar{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px;letter-spacing:-.02em}
.hero h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.hero p{margin:4px 0 10px;color:var(--muted);font-size:13.5px}
.cta{display:inline-block;border:0;border-radius:10px;background:var(--brand);color:#fff;
  font-weight:700;font-size:14px;padding:9px 16px;text-decoration:none}
:root[data-theme="dark"] .cta, .cta.dark-ok{color:#08211B}
@media (prefers-color-scheme: dark){.cta{color:#08211B}}
:root[data-theme="light"] .cta{color:#fff}

/* ── Карточки модулей ──────────────────── */
.list{display:flex;flex-direction:column;gap:10px}
.card{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;color:inherit}
.card:hover{border-color:var(--brand)}
.card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.card .no{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;background:var(--chip-bg);color:var(--muted)}
.card.done .no{background:var(--good-bg);color:var(--good)}
.card .body{min-width:0;flex:1}
.card .t{font-weight:700;font-size:15px;line-height:1.35}
.card .s{color:var(--muted);font-size:12.5px;margin-top:2px}
.chip{flex:none;font-size:11px;font-weight:700;letter-spacing:.03em;border-radius:999px;
  padding:3px 9px;background:var(--chip-bg);color:var(--muted);margin-top:2px}
.chip.done{background:var(--good-bg);color:var(--good)}
.chip.mid{background:var(--tint);color:var(--brand-deep)}
.sect{margin:22px 0 10px}

/* ── Страница модуля ───────────────────── */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
  font-size:13px;font-weight:600;margin-bottom:16px}
.back:hover{color:var(--ink)}
.mhead{margin-bottom:20px}
.mhead h1{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:6px 0 6px}
.mhead .sub{color:var(--muted);font-size:14px}
.meta-row{display:flex;gap:14px;margin-top:10px;color:var(--muted);font-size:12.5px;font-weight:600}
article h2{font-size:18.5px;font-weight:800;letter-spacing:-.01em;margin:26px 0 8px}
article p{margin:9px 0}
article ul,article ol{margin:9px 0;padding-left:22px}
article li{margin:4px 0}
article code{background:var(--chip-bg);border-radius:5px;padding:1px 5px;font-size:.9em}
.twrap{overflow-x:auto;margin:12px 0}
article table{border-collapse:collapse;font-size:13.5px;min-width:420px}
article th,article td{border:1px solid var(--border);padding:7px 10px;text-align:left;vertical-align:top}
article th{background:var(--chip-bg);font-size:12px;letter-spacing:.03em}

.panel{background:var(--tint);border:1px solid var(--tint-border);border-radius:14px;padding:16px 18px;margin:26px 0}
.panel .label{color:var(--brand-deep);margin-bottom:8px;display:block}
.panel ul{margin:0;padding-left:20px}
.panel li{margin:5px 0}
.boss{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:26px 0}
.boss .q{font-weight:700;margin:6px 0 4px}
.boss details{margin-top:6px}
.boss summary{cursor:pointer;color:var(--brand-deep);font-weight:600;font-size:13.5px}
.boss .a{margin-top:8px;color:var(--ink)}

/* ── Квиз ──────────────────────────────── */
.quiz{margin:26px 0}
.qcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin:12px 0}
.qcard .qq{font-weight:700;margin-bottom:10px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:block;width:100%;text-align:left;background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:9px 12px;font-size:14px;line-height:1.45}
.opt:hover:not(:disabled){border-color:var(--brand)}
.opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.opt:disabled{cursor:default}
.opt.correct{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:600}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.explain{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.score{background:var(--tint);border:1px solid var(--tint-border);border-radius:12px;
  padding:12px 16px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.score .retry{border:1px solid var(--tint-border);background:transparent;border-radius:8px;
  padding:5px 12px;font-size:13px;font-weight:600;color:var(--brand-deep)}

/* ── Завершение и навигация ────────────── */
.markrow{margin:26px 0 8px}
.mark{width:100%;border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:13px;font-weight:700;font-size:15px}
.mark.on{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.mark:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pn{display:flex;gap:10px;margin-top:14px}
.pn a{flex:1;min-width:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:10px 14px;text-decoration:none;color:inherit;font-size:13px}
.pn a:hover{border-color:var(--brand)}
.pn .dir{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pn .nx{text-align:right}
.pn .tt{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* ── Глоссарий ─────────────────────────── */
.search{width:100%;border:1px solid var(--border);border-radius:12px;background:var(--surface);
  color:inherit;font:inherit;padding:11px 14px;margin:14px 0 6px}
.search:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.gitem{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin:8px 0}
.gitem .term{font-weight:800}
.gitem .def{margin-top:3px;color:var(--muted);font-size:13.5px;line-height:1.55}
.empty{color:var(--muted);text-align:center;padding:30px 0}

/* ── Справочник продуктов ──────────────── */
.st{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:3px 8px;white-space:nowrap}
.st.ok{background:var(--good-bg);color:var(--good)}
.st.cfg{background:var(--warn-bg);color:var(--warn)}
.st.plan{background:var(--chip-bg);color:var(--muted)}
.st.res{background:var(--chip-bg);color:var(--muted)}
.pgroup{margin:20px 0 8px}
.pcard{display:flex;gap:12px;align-items:baseline;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 15px;margin:7px 0;text-decoration:none;color:inherit}
.pcard:hover{border-color:var(--brand)}
.pcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pcard .pnm{font-weight:700;font-size:14.5px;flex:none}
.pcard .pt{color:var(--muted);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.facts{margin:16px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.facts div{display:flex;gap:12px;padding:9px 14px;font-size:13.5px;border-bottom:1px solid var(--border)}
.facts div:last-child{border-bottom:0}
.facts b{flex:none;width:38%;max-width:150px;font-weight:600;color:var(--muted)}
.pblock{margin:20px 0}
.pblock > .label{display:block;margin-bottom:6px}
.pblock p{margin:8px 0}
.pboss{background:var(--tint);border:1px solid var(--tint-border);border-radius:12px;padding:14px 16px;margin:20px 0}
.pboss .label{display:block;color:var(--brand-deep);margin-bottom:6px}

/* ── Экзамен ───────────────────────────── */
.ecat{margin:22px 0 8px}
.eitem{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:8px 0}
.eitem summary{cursor:pointer;list-style:none;padding:13px 16px;font-weight:700;font-size:14.5px;line-height:1.4;display:flex;gap:8px}
.eitem summary::-webkit-details-marker{display:none}
.eitem summary::before{content:"+";flex:none;font-weight:800;color:var(--accent);width:14px}
.eitem[open] summary::before{content:"–"}
.eitem .ebody{padding:0 16px 14px;font-size:14px}
.eitem .tip{margin-top:8px;font-size:12.5px;color:var(--muted)}
.eitem .tip strong{color:var(--accent)}

footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--border);
  color:var(--muted);font-size:12.5px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer button{border:0;background:none;color:var(--muted);text-decoration:underline;padding:0;font-size:12.5px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
@media (max-width:430px){#app{padding:16px 14px 48px}.hero{padding:15px;gap:14px}.ring{width:74px;height:74px}}

/* Экраны входа и полоса пользователя — только для серверной версии портала.
   Токены цветов и типографика наследуются из основного файла стилей. */

.hidden{display:none}
.err:empty,.note:empty{display:none}

/* ── Полоса пользователя ── */
.userbar{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto;
  padding:10px 18px 0;font-size:12.5px;color:var(--muted)}
.userbar .who{margin-left:auto;font-weight:600}
.userbar form{margin:0}
.userbar button{border:1px solid var(--border);background:var(--surface);color:var(--muted);
  border-radius:8px;padding:4px 11px;font-size:12.5px;font-weight:600}
.userbar button:hover{border-color:var(--brand);color:var(--ink)}
.userbar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── Экраны входа, первого входа и смены пароля ── */
body.gate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px 16px}
.gatebox{width:100%;max-width:380px}
.gatehead{text-align:center;margin-bottom:22px}
.gatehead .logo{font-weight:800;font-size:15px;letter-spacing:-.02em}
.gatehead .logo em{font-style:normal;color:var(--brand)}
.gatehead .logo em + em{color:var(--accent)}
.gatehead h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:8px 0 6px}
.gatehead p{margin:0;color:var(--muted);font-size:13.5px}

.gatebox form{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.gatebox label{font-size:12.5px;font-weight:600;color:var(--muted);margin-top:8px}
.gatebox label .hint{font-weight:400}
.gatebox input{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--bg);
  color:inherit;font:inherit;padding:11px 13px}
.gatebox input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.gatebox button[type=submit]{margin-top:16px;border:0;border-radius:10px;background:var(--brand);
  color:#fff;font-weight:700;font-size:15px;padding:12px}
.gatebox button[type=submit]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-color-scheme: dark){.gatebox button[type=submit]{color:#08211B}}
:root[data-theme="dark"] .gatebox button[type=submit]{color:#08211B}
:root[data-theme="light"] .gatebox button[type=submit]{color:#fff}

.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad);border-radius:10px;
  padding:10px 13px;font-size:13.5px;font-weight:600;margin:0 0 14px}
.gatebox form .err{margin:0 0 6px}
.note{color:var(--muted);font-size:13.5px;margin:8px 0 0}
.foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:16px;line-height:1.5}

/* Уведомление о рассинхроне прогресса (сеть пропала) */
.syncbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:10;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);border-radius:999px;
  padding:7px 16px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow);max-width:92vw}