/* Есеп — стиль «спокойный» (вариант B): тёплый светлый фон, белые карточки,
   тёмные кнопки-таблетки, один бирюзовый акцент, шрифт Onest. */
:root {
  --bg: #f7f6f2;
  --card: #ffffff;
  --ink: #16181d;
  --ink-2: #2b2f37;
  --muted: #646a75;
  --line: #e4e2db;
  --line-2: #d3d0c6;
  --soft: #efede7;
  --acc: #0f6e6b;
  --acc-soft: #e3f0ee;
  --ok: #1f8a52;
  --ok-soft: #eaf6ef;
  --bad: #c0443f;
  --bad-soft: #fbecea;
  --warn: #8a5a00;
  --warn-soft: #fbf1dc;
  --fig-accent: #6fbab4;
  --fig-soft: #ffffff;
  --radius: 20px;
  --shot: 0 30px 60px -30px rgba(20, 24, 30, .25);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
p a, .link { color: var(--acc); }
p a:hover, .link:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 .9em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
main.wrap { flex: 1; padding-top: 28px; padding-bottom: 72px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* шапка */
.top .bar { display: flex; align-items: center; gap: 32px; height: 76px; }
.logo { font-weight: 700; font-size: 22px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 18px; }
.nav { display: flex; gap: 26px; color: var(--muted); font-weight: 500; }
.nav a:hover, .nav a.on { color: var(--ink); }
.top .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .top .bar { gap: 12px; height: 64px; }
  .nav { display: none; }
}

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
footer .wrap { padding-top: 28px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; }
footer a:hover { color: var(--ink); }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2;
  border-radius: 999px; padding: 12px 22px; min-height: 46px;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s;
  background: var(--ink); color: #fff;
}
.btn:hover { background: var(--ink-2); }
.btn.line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.line:hover { background: var(--card); }
.btn.text { background: transparent; color: var(--ink); padding: 12px 14px; }
.btn.text:hover { background: var(--soft); }
.btn.acc { background: var(--acc); }
.btn.acc:hover { background: #0b5b58; }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--line-2); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.sm { padding: 7px 14px; min-height: 36px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn .ti { font-size: 18px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) { .top .btn { padding: 9px 14px; min-height: 40px; font-size: 15px; } }

/* поля */
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 14px; min-height: 46px; width: 100%;
}
input::placeholder, textarea::placeholder { color: #a3a7ae; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.btn:focus-visible, .choice:focus-visible, .pick:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 2px; }
textarea { min-height: 130px; resize: vertical; }
.lbl { display: block; font-weight: 600; font-size: .95rem; margin: 16px 0 6px; }
.form-err { color: var(--bad); min-height: 1.4em; margin: 10px 0 4px; font-size: .95rem; }

/* карточки и сетки */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card.tight { padding: 20px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .cols2, .cols3 { grid-template-columns: 1fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--acc); background: var(--acc-soft); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; background: var(--soft); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.acc { background: var(--acc-soft); color: var(--acc); }
.crumbs { color: var(--muted); font-size: .92rem; margin-bottom: 10px; }
.crumbs a:hover { color: var(--ink); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.lead { font-size: 1.15rem; color: var(--muted); }
.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* главная */
.hero { text-align: center; padding: 48px 0 0; }
.hero h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); line-height: 1.04; letter-spacing: -.035em; max-width: 13em; margin: 22px auto 22px; }
.hero h1 span { color: var(--acc); display: block; }
.hero .lead { max-width: 34em; margin: 0 auto 34px; font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
.hero .btn-row { justify-content: center; }
@media (max-width: 600px) { .hero .btn-row .btn { flex: 1 1 100%; } }
.shot { margin: 56px auto 0; max-width: 980px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shot); overflow: hidden; text-align: left; }
.shot-bar { display: flex; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.shot-bar b { width: 11px; height: 11px; border-radius: 50%; background: #e2dfd7; }
.shot-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 380px; }
.shot-body .side { border-right: 1px solid var(--line); padding: 22px 16px; }
.shot-body .lesson-main { padding: 28px 34px; }
@media (max-width: 760px) { .shot-body { grid-template-columns: 1fr; } .shot-body .side { display: none; } .shot-body .lesson-main { padding: 22px 18px; } }
.block { padding: 88px 0 0; }
.block > p.lead { max-width: 36em; }
.feat .ti { font-size: 28px; color: var(--acc); }
.feat h3 { margin: 14px 0 6px; font-size: 1.2rem; }
.feat p { margin: 0; color: var(--muted); }
.grades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
@media (max-width: 860px) { .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grade-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; transition: border-color .15s; display: block; }
.grade-card:hover { border-color: var(--ink); }
.grade-card b { font-size: 44px; letter-spacing: -.04em; display: block; line-height: 1; }
.grade-card span { color: var(--muted); font-size: .95rem; }
.grade-card p { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.checks { list-style: none; padding: 0; margin: 22px 0 30px; }
.checks li { display: flex; gap: 12px; margin-bottom: 14px; color: var(--muted); }
.checks .ti { color: var(--acc); font-size: 22px; flex: none; }

/* таблица результатов */
.res { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.res table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.res th, .res td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.res tbody tr:last-child td { border-bottom: 0; }
.res th { color: var(--muted); font-weight: 500; font-size: .85rem; }
.res th:first-child, .res td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); }
.res tbody tr:hover td { background: #faf9f6; }
.res tfoot td { color: var(--muted); font-size: .85rem; background: #faf9f6; border-top: 1px solid var(--line); border-bottom: 0; }
.res td a:hover { color: var(--acc); }
.mk-ok { color: var(--ok); }
.mk-bad { color: var(--bad); }
.mk-none { color: #c9c6bd; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .06em; }

/* выбор (онбординг, вход) */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .picks { grid-template-columns: 1fr; } }
.pick { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s; display: block; }
.pick:hover { border-color: var(--ink); }
.pick .ti { font-size: 28px; color: var(--acc); }
.pick b { display: block; font-size: 1.15rem; margin: 12px 0 4px; }
.pick span { color: var(--muted); font-size: .95rem; }
.seg { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { font: inherit; font-weight: 600; border: 0; background: transparent; border-radius: 999px; padding: 9px 20px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.narrow { max-width: 460px; margin: 24px auto 0; }
.center { text-align: center; }
.code-input { font-size: 1.6rem; letter-spacing: .14em; text-align: center; font-weight: 600; text-transform: uppercase; }

/* страница класса (список тем) */
.grade-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.grade-tabs a { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--muted); }
.grade-tabs a:hover { color: var(--ink); border-color: var(--ink); }
.grade-tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 860px) { .sections { grid-template-columns: 1fr; } }
.section-card h3 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.section-card h3 small { color: var(--muted); font-weight: 500; font-size: .85rem; letter-spacing: 0; white-space: nowrap; }
.topic-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; margin: 0 -12px; line-height: 1.35; }
a.topic-row:hover { background: var(--soft); }
.topic-row .st { width: 20px; flex: none; display: grid; place-items: center; color: var(--line-2); font-size: 18px; }
.topic-row .st.p1 { color: #c99a2e; }
.topic-row .st.p2 { color: var(--ok); }
.topic-row.soon { color: #a3a7ae; }
.topic-row .soon-tag { margin-left: auto; font-size: .8rem; }

/* урок: боковая колонка + задача */
.lesson { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 32px; align-items: start; }
.side h4 { margin: 0 0 10px; padding: 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: .95rem; line-height: 1.35; }
.side a:hover { background: var(--soft); color: var(--ink); }
.side a.on { background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.side a .ti { font-size: 18px; flex: none; }
.side a .done { color: var(--ok); }
.side a.soon { pointer-events: none; opacity: .55; }
.lesson .side { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 10px; max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 900px) { .lesson { grid-template-columns: 1fr; } .lesson .side { display: none; } }
.lesson-head { margin-bottom: 20px; }
.lesson-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 16px; }
.theory { font-size: 1.02rem; }
.theory ul { padding-left: 1.2em; margin: 0 0 .9em; }
.theory li { margin-bottom: .3em; }
.theory p:last-child { margin-bottom: 0; }
.stats-line { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.stats-line b { color: var(--ink); }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* задача */
.task-num { color: var(--muted); font-size: .9rem; margin-bottom: 6px; }
.task-q { font-size: 1.35rem; line-height: 1.5; margin-bottom: 18px; }
.task-q .katex { font-size: 1.1em; }
.task-fig { margin: 6px 0 18px; }
.task-fig svg.fig { width: 100%; max-width: 560px; height: auto; display: block; }
.task-fig svg.fig-plane { max-width: 360px; }
.task-fig svg.fig-small { max-width: 160px; }
.task-hint { color: var(--muted); font-size: .95rem; margin-top: -8px; }
.answer-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 520px; }
.answer-row input { flex: 1 1 200px; font-size: 1.25rem; }
.answer-row .unit { color: var(--muted); }
.preview { min-height: 1.6em; margin-top: 8px; color: var(--muted); font-size: .95rem; }
.keys { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.key { min-width: 46px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.key:hover { border-color: var(--ink); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; max-width: 640px; }
.choice { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-height: 52px; }
.choice:hover { border-color: var(--ink); }
.choice.sel { border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 1px var(--acc) inset; }
.choice:disabled { cursor: default; }
.choice.right { border-color: var(--ok); background: var(--ok-soft); box-shadow: none; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); box-shadow: none; }
.fields { display: grid; gap: 10px; margin-bottom: 14px; max-width: 420px; }
.field { display: grid; grid-template-columns: minmax(70px, auto) 1fr; gap: 12px; align-items: center; }
.field span { font-weight: 600; }
.fb { border-radius: 16px; padding: 16px 18px; margin-top: 18px; max-width: 640px; }
.fb.ok { background: var(--ok-soft); }
.fb.bad { background: var(--bad-soft); }
.fb.warn { background: var(--warn-soft); }
.fb .title { font-weight: 700; margin-bottom: 2px; }
.fb.ok .title { color: var(--ok); }
.fb.bad .title { color: var(--bad); }
.fb.warn .title { color: var(--warn); }
.solution { margin-top: 10px; }
.solution summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.solution ol { margin: 8px 0 0; padding-left: 1.3em; color: var(--ink-2); }
.solution li { margin-bottom: 4px; }
.next-row { margin-top: 18px; }
.answer-form.finished button[type=submit], .answer-form.finished .keys { display: none; }

/* задания и списки */
.list { display: grid; gap: 12px; }
.row-card { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.row-card h3 { margin: 0 0 2px; }
.row-card h3 a:hover { color: var(--acc); }
.progress { height: 6px; background: var(--soft); border-radius: 99px; overflow: hidden; min-width: 140px; margin-top: 6px; }
.progress > i { display: block; height: 100%; background: var(--acc); border-radius: 99px; }
.class-card { display: block; transition: border-color .15s; }
.class-card:hover { border-color: var(--ink); }
.class-card h3 { font-size: 1.4rem; margin-bottom: 4px; }
.tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs-line button { font: inherit; font-weight: 600; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.tabs-line button.on { color: var(--ink); border-bottom-color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats .card { padding: 16px 18px; }
.stats .num { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 700; letter-spacing: -.03em; }
.notice { background: var(--acc-soft); color: #0b4f4d; border-radius: 16px; padding: 16px 18px; }
.picker-topic { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; margin: 0 -10px; }
.picker-topic:hover { background: var(--soft); }
.picker-topic input[type=checkbox] { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--acc); }
.picker-topic .name { flex: 1; cursor: pointer; }
.picker-topic .cnt { width: 76px; min-height: 38px; padding: 6px 10px; flex: none; }
.sticky-bar { position: sticky; bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-top: 20px; box-shadow: var(--shot); display: grid; gap: 12px; grid-template-columns: 1fr 190px auto; align-items: end; }
@media (max-width: 760px) { .sticky-bar { grid-template-columns: 1fr; } }
.dots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.dots button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.dots button.cur { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.dots button.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.dots button.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.modal-back { position: fixed; inset: 0; background: rgba(22, 24, 29, .45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { max-width: 660px; width: 100%; max-height: 90vh; overflow: auto; }

/* печать карточек с кодами */
.print-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.print-card { border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 16px; break-inside: avoid; background: var(--card); }
.print-card .code { font-size: 1.4rem; }
@media print {
  .top, footer, .no-print { display: none !important; }
  body { background: #fff; }
  main.wrap { padding: 0; max-width: none; }
  .print-grid { grid-template-columns: repeat(3, 1fr); }
}

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: var(--ink); color: white; padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { top: 8px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.full { width: 100%; }
.top { position: relative; z-index: 10; }
.menu-toggle { display: none; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 12px; width: 40px; height: 40px; color: var(--ink); font-size: 22px; cursor: pointer; flex: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.section-label { display: block; color: var(--acc); font-size: .85rem; font-weight: 600; margin-bottom: 16px; }
.page-intro { padding: 40px 0 12px; max-width: 800px; }
.page-intro.center { margin: 0 auto; }
.page-intro h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin-bottom: 20px; }
.page-intro .lead { max-width: 38em; }
.page-intro.center .lead { margin-left: auto; margin-right: auto; }
.catalog-note { margin: 28px 0; }
.grade-status { font-size: .8rem; font-weight: 500; color: var(--acc); margin-top: 16px; }
.grade-card:hover { background: #fdfdfb; }
.block .cols3 { margin-top: 32px; }
.block .split .section-label { margin-bottom: 14px; }
.parent-strip, .study-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid var(--line); border-radius: 20px; padding: 32px; }
.parent-strip h2 { font-size: 1.8rem; }
.parent-strip p, .study-strip p { margin-bottom: 0; }
.parent-strip > .btn, .study-strip > .btn { flex: none; }
.study-strip { margin-top: 32px; background: var(--acc-soft); border-color: transparent; padding: 24px; }
.demo-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.demo-label .pill { flex: none; }
.shot .lesson-main { min-width: 0; }
.shot-body { min-height: 340px; }
.shot .fb { font-size: .95rem; }
.demo-results th, .demo-results td { padding: 12px 10px; }
.demo-results th:first-child, .demo-results td:first-child { padding-left: 20px; }
.demo-results .ti { font-size: 18px; }
.step-number { display: block; color: var(--acc); font-size: 1.7rem; font-weight: 500; letter-spacing: -.04em; }
.onboarding { max-width: 1000px; margin: 20px auto; }
.onboarding .page-intro { padding-bottom: 24px; }
.login-choice { max-width: 740px; }
.pick > .ti:last-child { display: block; margin-top: 24px; font-size: 20px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.back-link:hover { color: var(--acc); }
.auth-heading { margin: 6px 0 26px; }
.auth-heading h1 { font-size: 2.2rem; }
.auth-heading .section-label { margin-bottom: 12px; }
.auth-seg { width: 100%; }
.auth-seg button { flex: 1; font-size: .9rem; padding-left: 10px; padding-right: 10px; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-field button { position: absolute; right: 5px; top: 4px; height: 40px; width: 40px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--muted); font-size: 21px; }
.password-field button:hover { background: var(--soft); }
.password-help { margin: 6px 0 0; }
.search-field { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 0 16px; max-width: 560px; margin-bottom: 28px; }
.search-field > .ti { color: var(--muted); font-size: 21px; }
.search-field input { border: 0; padding-left: 0; padding-right: 0; background: transparent; }
.search-field input:focus { box-shadow: none; }
.search-field:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.topic-row > span:not(.st):not(.soon-tag) { min-width: 0; }
.topic-row > .ti:last-child { margin-left: auto; color: var(--line-2); font-size: 16px; }
.side-soon { display: flex; gap: 10px; font-size: .95rem; line-height: 1.35; color: var(--muted); opacity: .6; padding: 8px 10px; }
.lesson .side .back-link { padding: 2px 10px; margin-bottom: 22px; }
.lesson-content { min-width: 0; }
.mobile-lessons { display: none; margin-bottom: 20px; }
.mobile-lessons summary { font-weight: 600; cursor: pointer; }
.pager-link { display: flex; gap: 10px; align-items: center; max-width: 46%; font-size: .9rem; line-height: 1.4; color: var(--muted); }
.pager-link .ti { flex: none; }
.pager-link:hover { color: var(--acc); }
.theory .body { overflow-x: auto; }
.task-q { overflow-x: auto; padding-bottom: 6px; }
.theory .next-row { margin-top: 28px; }
.lesson-head .seg { margin-top: 4px; }
.grade-tabs button { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; background: transparent; }
.grade-tabs button.on { color: white; background: var(--ink); border-color: var(--ink); }
.section-block + .section-block { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.section-block h3 { margin-bottom: 16px; }
.class-label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin-bottom: 20px; }
.class-label > .ti:first-child { color: var(--acc); font-size: 22px; }
.class-label > .ti:last-child { margin-left: auto; }
.class-card h2 { font-size: 2rem; }
.new-class { max-width: 520px; margin-top: 24px; }
.new-class > summary { font-size: 1.15rem; font-weight: 600; cursor: pointer; }
.new-class > summary .ti { margin-right: 8px; color: var(--acc); }
.stats .small { line-height: 1.4; }
.stats .num { margin-top: 6px; }
.res { max-width: 100%; }
.res .code { white-space: nowrap; }
.picker-topic { display: grid; grid-template-columns: 20px minmax(0, 1fr) 76px auto; }
.picker-topic .name { min-width: 0; font-size: .95rem; }
.page-head p { margin-top: 12px; margin-bottom: 0; }
.choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice .katex { white-space: normal; }
.modal-back { backdrop-filter: blur(4px); }
.modal h2 { font-size: 1.5rem; }
.modal::backdrop { background: rgba(22, 24, 29, .45); backdrop-filter: blur(4px); }
@media (max-width: 960px) {
  .top .bar { gap: 12px; height: 64px; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; padding: 20px 24px; flex-direction: column; gap: 16px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px -20px #16181d55; }
}
@media (max-width: 900px) {
  .mobile-lessons { display: block; }
  .mobile-lessons .side { display: block; position: static; border: 0; max-height: 320px; padding: 12px 0 0; }
}
@media (max-width: 760px) {
  .menu-toggle { display: inline-flex; }
  .nav.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; padding: 20px 24px; flex-direction: column; gap: 16px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px -20px #16181d55; }
  .parent-strip, .study-strip { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
  .grade-card { padding: 20px; }
}
@media (max-width: 600px) {
  main.wrap { padding-top: 16px; padding-bottom: 48px; }
  .top .bar { gap: 8px; }
  .logo { font-size: 20px; gap: 7px; }
  .logo-mark { width: 28px; height: 28px; }
  .top .right { gap: 0; }
  .top .btn { padding: 10px 12px; font-size: 14px; }
  .top .btn.text { padding: 10px; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: 2.5rem; }
  .eyebrow { font-size: 12px; padding: 6px 10px; }
  .shot { margin-top: 36px; border-radius: 20px; }
  .demo-label { flex-wrap: wrap; margin-bottom: 16px; }
  .block { padding-top: 56px; }
  .card { padding: 22px; }
  .card.tight { padding: 16px; }
  .task-q { font-size: 1.15rem; }
  .answer-row input { flex-basis: 100%; min-width: 0; }
  .answer-row .btn { width: 100%; }
  .section-card h3 { font-size: 1.08rem; flex-wrap: wrap; gap: 6px; }
  .narrow { margin-top: 12px; }
  .auth-heading h1 { font-size: 2rem; }
  .stats { gap: 8px; }
  .stats .card { padding: 12px; }
  .stats .small { font-size: .75rem; }
  .stats .num { font-size: 1.4rem; }
  .stats .num .muted { display: block; font-size: .75rem !important; }
  .picker-topic { grid-template-columns: 20px minmax(0, 1fr) 62px; gap: 8px; }
  .picker-topic .cnt { width: 62px; }
  .picker-topic > button { grid-column: 2; justify-self: start; padding: 4px 12px; min-height: 30px; }
  .row-card { padding: 18px; }
  .row-card > div { min-width: 0 !important; }
  .demo-results th, .demo-results td { padding: 10px 7px; font-size: .8rem; }
  .demo-results th:first-child, .demo-results td:first-child { padding-left: 12px; }
  .pager-link { max-width: 47%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 360px) {
  .top .bar { gap: 6px; }
  .top .btn { padding: 9px; font-size: 13px; }
  .logo { font-size: 18px; }
  .menu-toggle { width: 36px; }
  .hero h1 { font-size: 2.2rem; }
}

/* Курс и наставник продолжают спокойный стиль B. */
.course-banner { display:flex; align-items:center; gap:20px; margin:24px 0; padding:24px; background:var(--acc-soft); border:1px solid #d0e4df; border-radius:var(--radius); }
.course-banner > span:nth-child(2) { display:grid; gap:4px; flex:1; min-width:0; }
.course-banner small { color:var(--acc); font-size:.8rem; }
.course-banner b { font-size:1.4rem; line-height:1.2; }
.course-banner span span { font-size:.9rem; color:var(--muted); }
.course-banner > .ti { font-size:24px; }
.course-banner-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--card); color:var(--acc); font-size:28px; flex-shrink:0; }
.course-intro { padding:30px 0 28px; max-width:780px; }
.course-intro h1 { margin:18px 0; }
.course-intro .btn-row { margin:26px 0 16px; }
.course-progress { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr); gap:32px; align-items:center; margin-bottom:26px; }
.course-progress p { margin:10px 0 0; max-width:580px; }
.course-progress .progress { margin-bottom:10px; }
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.course-lesson { display:flex; flex-direction:column; gap:12px; transition:border-color .15s, transform .15s; }
.course-lesson:hover { border-color:var(--acc); transform:translateY(-2px); }
.course-card-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.8rem; }
.course-card-top .ti { font-size:22px; color:var(--acc); }
.course-lesson h3 { font-size:1.2rem; margin:0; }
.course-lesson p { font-size:.88rem; color:var(--muted); margin:0; }
.course-lesson small { margin-top:auto; padding-top:10px; font-size:.78rem; }
.course-lesson.passed { background:#f3faf6; border-color:#cce3d6; }
.course-check { margin-top:32px; gap:32px; }
.course-check h2 { font-size:1.6rem; }
.course-check .btn { white-space:nowrap; }
.course-layout .lesson-content { min-width:0; }
.course-layout .side a { font-size:.85rem; padding:9px 10px; align-items:flex-start; }
.course-layout .side a .ti { margin-top:3px; flex-shrink:0; }
.course-goal { display:flex; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--acc); }
.course-goal .ti { font-size:22px; }
.course-theory > p { max-width:70ch; }
.course-block { margin:28px 0; }
.course-block h3 { font-size:1.15rem; margin-bottom:12px; }
.course-example { padding:22px; border-radius:14px; background:var(--bg); margin:26px 0; }
.course-example .task-q { margin:12px 0; font-size:1.1rem; }
.course-example ol, .solution ol { padding-left:22px; }
.course-example li { padding:5px 0 5px 6px; }
.course-mistake { display:flex; gap:12px; padding:18px; background:var(--acc-soft); border-radius:14px; font-size:.95rem; margin:24px 0; }
.course-mistake .ti { font-size:23px; color:var(--acc); flex-shrink:0; }
.course-theory .btn-row { margin-top:24px; }
.course-figure { padding:16px 0; }
.course-practice-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:8px 0 24px; }
.levels { margin-top:8px; }
.levels button { font-size:.85rem; padding:9px 16px; }
.course-mastery { padding-top:24px; display:flex; gap:16px; }
.course-mastery > .ti { font-size:26px; color:var(--ok); }
.course-mastery p { font-size:.88rem; margin:4px 0 14px; }
.quiz-form { display:grid; gap:18px; max-width:820px; margin:auto; }
.quiz-task-head { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.85rem; margin-bottom:18px; }
.quiz-task .answer-input { margin-top:12px; max-width:320px; }
.quiz-task .task-q { margin-bottom:16px; }
.quiz-task .fb { margin:18px 0; }
.quiz-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.quiz-choices label { display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:12px; border-radius:12px; cursor:pointer; }
.quiz-choices label:has(input:checked) { border-color:var(--acc); background:var(--acc-soft); }
.quiz-choices input { width:18px; height:18px; accent-color:var(--acc); flex-shrink:0; }
.quiz-submit { padding:24px 0 20px; }
.quiz-submit > span { display:block; margin-bottom:8px; }

.mentor-launcher { position:fixed; right:24px; bottom:22px; z-index:70; display:flex; align-items:center; gap:12px; padding:13px 18px; background:var(--ink); color:white; border:0; border-radius:20px; box-shadow:0 6px 28px #16181d25; text-align:left; cursor:pointer; font:inherit; }
.mentor-launcher > .ti { color:#a5d9d1; font-size:25px; }
.mentor-launcher b { display:block; font-size:.92rem; }
.mentor-launcher small { display:block; font-size:.7rem; color:#cbd0d5; }
.mentor-unread { background:var(--acc); border:1px solid #a5d9d1; border-radius:50%; width:21px; height:21px; text-align:center; font-size:12px; }
.mentor-panel { position:fixed; right:24px; bottom:110px; width:370px; height:min(690px,calc(100dvh - 136px)); z-index:80; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 70px #16181d22; overflow:hidden; font-size:14px; }
.mentor-head { display:flex; align-items:center; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--line); flex-shrink:0; }
.mentor-avatar { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); font-size:22px; }
.mentor-head b { font-size:16px; }
.mentor-head small { display:block; color:var(--muted); font-size:11px; }
.mentor-head button { margin-left:auto; border:0; background:var(--bg); border-radius:50%; width:34px; height:34px; font-size:19px; cursor:pointer; }
.mentor-context { padding:12px 18px; display:flex; align-items:center; gap:10px; background:#f7faf9; font-size:12px; flex-shrink:0; }
.mentor-context > .ti { font-size:18px; color:var(--acc); }
.mentor-context small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.mentor-log { flex:1; min-height:95px; overflow-y:auto; overscroll-behavior:contain; padding:18px; display:flex; flex-direction:column; gap:16px; }
.mentor-message { max-width:100%; overflow-wrap:anywhere; }
.mentor-message > small { color:var(--acc); font-weight:600; font-size:11px; display:block; margin-bottom:6px; }
.mentor-message p { margin:0 0 8px; line-height:1.6; }
.mentor-message p:last-child { margin:0; }
.mentor-message.learner { padding:12px 14px; background:var(--bg); border-radius:14px; align-self:flex-end; }
.mentor-message.learner > small { color:var(--muted); }
.mentor-message .katex { font-size:1.07em; }
.mentor-message .katex-html { white-space:normal; }
.mentor-empty { margin:auto 0; text-align:center; color:var(--muted); padding:18px 6px; }
.mentor-empty > .ti { color:var(--acc); font-size:30px; }
.mentor-empty h3 { color:var(--ink); margin:12px 0; font-size:17px; }
.mentor-empty p { font-size:13px; }
.mentor-thinking { font-size:12px; color:var(--muted); }
.mentor-quiz-note { background:var(--warn-soft); border-radius:12px; padding:12px; font-size:12px; }
.mentor-prompts { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; flex-shrink:0; }
.mentor-prompts button, .mentor-recommendation button, .mentor-recommendation a { border:1px solid var(--line); padding:6px 9px; border-radius:10px; background:white; font:inherit; font-size:11px; cursor:pointer; }
.mentor-prompts button:hover { border-color:var(--acc); color:var(--acc); }
.mentor-prompts button:disabled { opacity:.4; cursor:default; }
.mentor-recommendation { padding:0 14px; }
.mentor-recommendation:empty { display:none; }
.mentor-recommendation > * { display:block; margin-bottom:8px; color:var(--acc); width:100%; }
.mentor-form { display:flex; gap:8px; padding:4px 14px 12px; align-items:flex-end; flex-shrink:0; }
.mentor-form textarea { font:inherit; font-size:13px; resize:none; min-height:58px; max-height:110px; padding:12px; border-radius:14px; min-width:0; flex:1; }
.mentor-form .btn { padding:0; width:38px; height:38px; border-radius:12px; flex-shrink:0; font-size:21px; }
.mentor-footer { border-top:1px solid var(--line); padding:10px 16px; font-size:10px; color:var(--muted); flex-shrink:0; }
.mentor-footer > button { border:0; background:transparent; color:var(--muted); padding:2px 0; cursor:pointer; font:inherit; display:flex; align-items:center; gap:6px; }
.mentor-footer > button.on { color:var(--acc); }
.mentor-footer summary { cursor:pointer; padding-top:5px; }
.mentor-footer details[open] { max-height:110px; overflow-y:auto; }
.mentor-footer details p { margin:8px 0 0; }
.mentor-error { padding:10px 16px; font-size:12px; color:var(--bad); background:var(--bad-soft); }
.mentor-toast { display:flex; gap:12px; position:fixed; right:24px; bottom:112px; width:340px; max-width:calc(100vw - 32px); padding:18px; border-radius:18px; border:1px solid #cce1dc; background:var(--card); box-shadow:0 10px 40px #16181d16; z-index:75; font-size:12px; }
.mentor-toast > span { color:var(--acc); font-size:22px; }
.mentor-toast p { color:var(--muted); margin:7px 0; overflow-wrap:anywhere; }
.mentor-toast button { background:transparent; border:0; color:var(--acc); font:inherit; padding:0; cursor:pointer; }
.mentor-toast > button { align-self:flex-start; color:var(--muted); font-size:18px; }
@media (max-width:900px) {
  .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-progress { gap:20px; }
}
@media (max-width:600px) {
  .course-banner { gap:12px; padding:18px; }
  .course-banner-icon { width:38px; height:38px; font-size:22px; border-radius:12px; }
  .course-banner b { font-size:1.15rem; }
  .course-banner span span { font-size:.75rem; }
  .course-banner > .ti { display:none; }
  .course-grid, .course-progress { grid-template-columns:minmax(0,1fr); }
  .course-lesson { gap:10px; }
  .course-intro { padding-top:14px; }
  .course-intro .btn-row .btn { width:100%; }
  .course-example { padding:16px; }
  .course-mistake { padding:14px; font-size:.85rem; }
  .levels button { padding:8px 12px; font-size:.8rem; }
  .quiz-choices { grid-template-columns:minmax(0,1fr); }
  .quiz-task .answer-input { max-width:100%; width:100%; }
  .mentor-launcher { right:16px; bottom:14px; padding:10px 14px; gap:8px; border-radius:16px; }
  .mentor-launcher small { display:none; }
  .mentor-launcher b { font-size:13px; }
  .mentor-launcher > .ti { font-size:20px; }
  .mentor-panel { right:8px; left:8px; bottom:70px; width:auto; height:min(610px,calc(100dvh - 88px)); border-radius:20px; }
  .mentor-toast { right:16px; bottom:76px; }
  .quiz-submit { padding-bottom:70px; }
  main.wrap { padding-bottom:100px; }
}