/* Общая тема сайта «ЕГЭ по математике с нуля»: цвета, текст урока, блоки, задачи, печать.
   Светлая тема — «бумага»; тёмная включается автоматически по настройке системы. */

:root {
    color-scheme: light dark;
    --bg: #f6f5f0;
    --panel: #ffffff;
    --panel-2: #fbfaf6;
    --text: #2c2b28;
    --muted: #6f6b63;
    --border: #e1ddd2;
    --border-strong: #cfc9bb;
    --accent: #1f7a6d;
    --accent-ink: #ffffff;
    --accent-soft: #e2f1ed;
    --link: #1d6fa5;
    --shadow: 0 8px 26px rgba(60, 52, 30, .07);
    --code-bg: #f0eee6;

    --lvl-a: #2f8f5b;
    --lvl-b: #2a6fb0;
    --lvl-c: #7a52b3;

    --ok: #2f8f5b;      --ok-bg: #e7f4ec;
    --hint: #b7791f;    --hint-bg: #fbf1dc;
    --seen: #7a6f96;    --seen-bg: #efecf6;
    --bad: #c4512f;     --bad-bg: #fbece6;

    --box-def-bg: #edf3fb;     --box-def-bd: #4a7fc1;
    --box-rule-bg: #e9f5f1;    --box-rule-bd: #2f9a7a;
    --box-example-bg: #f4f2fc; --box-example-bd: #7d68c9;
    --box-warn-bg: #fcefe9;    --box-warn-bd: #d9734e;
    --box-tip-bg: #fcf5e2;     --box-tip-bd: #c99a22;
    --box-ege-bg: #eef4e7;     --box-ege-bd: #6a9a3c;

    --level-1: #3a9d5d;
    --level-2: #d49a1f;
    --level-3: #d0573c;

    --topbar-h: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c1d21;
        --panel: #24262b;
        --panel-2: #2a2c32;
        --text: #e7e5df;
        --muted: #a9a59b;
        --border: #3a3c43;
        --border-strong: #4a4d55;
        --accent: #5cc0ad;
        --accent-ink: #10201d;
        --accent-soft: #20362f;
        --link: #82b9e8;
        --shadow: 0 8px 26px rgba(0, 0, 0, .35);
        --code-bg: #2f3138;

        --lvl-a: #5fbf86;
        --lvl-b: #6ea6e0;
        --lvl-c: #ac8ae0;

        --ok: #63c48a;      --ok-bg: #1f3428;
        --hint: #e2b456;    --hint-bg: #3a3020;
        --seen: #b0a6cf;    --seen-bg: #2e2b3a;
        --bad: #ec8a69;     --bad-bg: #3d2720;

        --box-def-bg: #1f2937;     --box-def-bd: #6b9be0;
        --box-rule-bg: #1d2e2a;    --box-rule-bd: #4fb895;
        --box-example-bg: #2a2638; --box-example-bd: #9b88e0;
        --box-warn-bg: #36241e;    --box-warn-bd: #e08a66;
        --box-tip-bg: #33301d;     --box-tip-bd: #d9b44a;
        --box-ege-bg: #26301e;     --box-ege-bd: #8fbf5c;

        --level-1: #5fbf86;
        --level-2: #e2b456;
        --level-3: #ec8a69;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PT Sans", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}
a { color: var(--link); }
button, input { font: inherit; color: inherit; }

/* ---------- Текст урока ---------- */
.lesson {
    font-size: 16.5px;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.lesson > :first-child { margin-top: 0; }
.lesson h1, .lesson h2, .lesson h3, .lesson h4 {
    line-height: 1.25;
    scroll-margin-top: calc(var(--topbar-h) + 12px);
}
.lesson h1 { font-size: 1.85em; margin: 0 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.lesson h2 { font-size: 1.4em; margin: 1.8em 0 .6em; }
.lesson h3 { font-size: 1.15em; margin: 1.5em 0 .5em; }
.lesson h4 { font-size: 1em; margin: 1.3em 0 .4em; }
.lesson p { margin: 0 0 .9em; }
.lesson ul, .lesson ol { margin: 0 0 1em; padding-left: 1.6em; }
.lesson li { margin: .25em 0; }
.lesson li > p { margin: .25em 0; }
.lesson hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.lesson strong { font-weight: 700; }
.lesson img { max-width: 100%; height: auto; display: block; margin: 1em auto; }
.lesson code {
    background: var(--code-bg);
    border-radius: 5px;
    padding: .1em .35em;
    font-size: .9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.lesson pre { background: var(--code-bg); border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
.lesson pre code { background: none; padding: 0; }
.lesson blockquote {
    margin: 0 0 1em;
    padding: .6em 1em;
    border-left: 4px solid var(--border-strong);
    background: var(--panel-2);
    border-radius: 0 10px 10px 0;
    color: var(--muted);
}
.lesson blockquote > :last-child { margin-bottom: 0; }
.lesson table {
    border-collapse: collapse;
    margin: 0 0 1.1em;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
.lesson th, .lesson td { border: 1px solid var(--border); padding: 6px 12px; text-align: left; vertical-align: top; }
.lesson th { background: var(--panel-2); font-weight: 700; }
.lesson details > summary { cursor: pointer; }
.lesson .task-check { width: 1.1em; height: 1.1em; }

/* Формулы */
.katex { font-size: 1.08em; }
.tex-block { margin: .8em 0 1em; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.tex-block .katex-display { margin: 0; }
.tex-error { color: var(--bad); font-family: ui-monospace, monospace; font-size: .9em; }

/* Рисунки */
.lesson figure { margin: 1.2em 0; text-align: center; }
.lesson figcaption { color: var(--muted); font-size: .92em; margin-top: .3em; }

/* ---------- Цветные блоки ---------- */
.box {
    position: relative;
    margin: 1.1em 0;
    padding: 12px 16px 12px 18px;
    border-left: 4px solid var(--bd, var(--border-strong));
    border-radius: 0 12px 12px 0;
    background: var(--bgc, var(--panel-2));
}
.box > :last-child { margin-bottom: 0; }
.box::before {
    display: block;
    margin-bottom: 4px;
    font-size: .78em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bd);
}
.box.def     { --bgc: var(--box-def-bg);     --bd: var(--box-def-bd); }
.box.rule    { --bgc: var(--box-rule-bg);    --bd: var(--box-rule-bd); }
.box.example { --bgc: var(--box-example-bg); --bd: var(--box-example-bd); }
.box.warn    { --bgc: var(--box-warn-bg);    --bd: var(--box-warn-bd); }
.box.tip     { --bgc: var(--box-tip-bg);     --bd: var(--box-tip-bd); }
.box.ege     { --bgc: var(--box-ege-bg);     --bd: var(--box-ege-bd); }
.box.def::before     { content: "Определение"; }
.box.rule::before    { content: "Правило"; }
.box.example::before { content: "Пример " counter(example); counter-increment: example; }
.box.warn::before    { content: "Типичная ошибка"; }
.box.tip::before     { content: "Совет"; }
.box.ege::before     { content: "Как это выглядит на ЕГЭ"; }
.box[data-title]::before { content: attr(data-title); }
.box.example[data-title]::before { content: "Пример " counter(example) ". " attr(data-title); }
.book-section { counter-reset: example task; }

.ege-ref { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: baseline; }
.ege-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--box-ege-bg);
    color: var(--box-ege-bd);
    border: 1px solid color-mix(in srgb, var(--box-ege-bd) 35%, transparent);
    font-size: .85em;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Задачи ---------- */
.task {
    margin: 1.2em 0;
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
    scroll-margin-top: calc(var(--topbar-h) + 12px);
}
.task > :last-child { margin-bottom: 0; }
.task-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    font-size: .9em;
    font-weight: 800;
    color: var(--muted);
}
.task-head .task-num { color: var(--text); }
.task-level { display: inline-flex; gap: 3px; }
.task-level i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); display: inline-block; }
.task[data-level="1"] .task-level i:nth-child(-n+1),
.task[data-level="2"] .task-level i:nth-child(-n+2),
.task[data-level="3"] .task-level i:nth-child(-n+3) { background: var(--lvl-color); }
.task[data-level="1"] { --lvl-color: var(--level-1); }
.task[data-level="2"] { --lvl-color: var(--level-2); }
.task[data-level="3"] { --lvl-color: var(--level-3); }
.task-state {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .92em;
    font-weight: 700;
}
.task-state:empty { display: none; }
.task.st-solo  { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.task.st-solo .task-state { background: var(--ok-bg); color: var(--ok); }
.task.st-hint .task-state { background: var(--hint-bg); color: var(--hint); }
.task.st-seen .task-state { background: var(--seen-bg); color: var(--seen); }
.task.is-review .task-state { background: var(--bad-bg); color: var(--bad); }

.task-ui {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 8px;
}
.task-input {
    width: 150px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    background: var(--panel-2);
    font-size: 1.05em;
}
.task-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    font-size: .95em;
    text-decoration: none;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; }
.btn-small { min-height: 32px; padding: 4px 10px; font-size: .88em; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.task-feedback { flex-basis: 100%; min-height: 1.4em; font-weight: 650; font-size: .95em; }
.task-feedback.ok { color: var(--ok); }
.task-feedback.bad { color: var(--bad); }
.task-feedback.info { color: var(--muted); }
.task-answer {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--seen-bg);
    color: var(--text);
    font-weight: 700;
}
.task details {
    margin: 6px 0 0;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}
.task details > summary {
    font-weight: 700;
    color: var(--muted);
    list-style: none;
    padding: 4px 0;
}
.task details > summary::-webkit-details-marker { display: none; }
.task details > summary::before { content: "▸ "; }
.task details[open] > summary::before { content: "▾ "; }
.task details[open] > summary { color: var(--text); }
.task details > :not(summary) { margin-top: 6px; }
.task details.locked > summary { opacity: .55; }

/* Обычный спойлер вне задач */
.lesson details:not(.task details) {
    margin: 1em 0;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
}
.lesson details:not(.task details) > summary { font-weight: 700; }

/* Уроки «скоро» */
.soon-card {
    padding: 18px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    background: var(--panel-2);
    color: var(--muted);
}
.soon-card h2 { margin: 0 0 4px; font-size: 1.15em; color: var(--text); }
.soon-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .78em;
    font-weight: 700;
}

/* Проверь себя: чек-лист */
.lesson ul.contains-task-list { list-style: none; padding-left: .4em; }
.lesson .task-list-item input { margin-right: .5em; }

@media (max-width: 640px) {
    .lesson { font-size: 16px; }
    .task { padding: 12px 12px 10px; }
    .task-input { width: 100%; }
    .task-ui .btn { flex: 1 1 auto; }
}

/* ---------- Печать ---------- */
@media print {
    :root {
        color-scheme: light;
        --bg: #fff; --panel: #fff; --panel-2: #fafafa; --text: #000; --muted: #444;
        --border: #ccc; --border-strong: #aaa; --link: #000; --code-bg: #f3f3f3;
        --box-def-bg: #f5f8fc; --box-rule-bg: #f3faf7; --box-example-bg: #f7f6fd;
        --box-warn-bg: #fdf5f2; --box-tip-bg: #fdfaf0; --box-ege-bg: #f6f9f2;
    }
    body { background: #fff; }
    .no-print, .task-ui, .task-state { display: none !important; }
    .box, .task, table, figure, img { break-inside: avoid; }
    .task { box-shadow: none; }
    .task details:not([open]) { display: none; }
    a { color: #000; text-decoration: none; }
}