/* Цвета — переменные на :root. Тёмная тема: системная (prefers-color-scheme) и переключатель (data-theme на <html>). */
:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-2: #efece3;
  --text: #1f2933;
  --muted: #566370;
  --border: #d6d1c4;
  --accent: #2f5d8a;
  --accent-text: #24496d;
  --accent-contrast: #ffffff;
  --accent-soft: #e3ecf5;
  --ok: #1f6b3f;
  --ok-bg: #e2f2e8;
  --bad: #a3321f;
  --bad-bg: #fbe8e4;
  --warn-bg: #fff3d1;
  --focus: #b86e00;
  --paper: #ffffff;
  --ink: #111111;
  --shadow: 0 1px 3px rgba(0, 0, 0, .12);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Times New Roman", Times, "Liberation Serif", "Noto Serif", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d;
    --surface: #1d232a;
    --surface-2: #262d35;
    --text: #e5e9ed;
    --muted: #9ba7b3;
    --border: #38414b;
    --accent: #7fb0e0;
    --accent-text: #9cc4ec;
    --accent-contrast: #0e1a27;
    --accent-soft: #223244;
    --ok: #74d39c;
    --ok-bg: #1d3427;
    --bad: #f39a8b;
    --bad-bg: #3b2420;
    --warn-bg: #3a331c;
    --focus: #ffb347;
    --paper: #1d232a;
    --ink: #e5e9ed;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14181d;
  --surface: #1d232a;
  --surface-2: #262d35;
  --text: #e5e9ed;
  --muted: #9ba7b3;
  --border: #38414b;
  --accent: #7fb0e0;
  --accent-text: #9cc4ec;
  --accent-contrast: #0e1a27;
  --accent-soft: #223244;
  --ok: #74d39c;
  --ok-bg: #1d3427;
  --bad: #f39a8b;
  --bad-bg: #3b2420;
  --warn-bg: #3a331c;
  --focus: #ffb347;
  --paper: #1d232a;
  --ink: #e5e9ed;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- база ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.25; margin: 1.4em 0 .5em; }
h1 { font-size: 1.55rem; margin-top: .6em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
p { margin: .6em 0; }
ul, ol { padding-left: 1.3em; margin: .5em 0; }
li { margin: .3em 0; }
a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
main:focus { outline: none; }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px 48px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.src { color: var(--muted); font-size: .78rem; white-space: nowrap; margin-left: .3em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-contrast); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; top: 8px; }
.hidden { display: none !important; }

/* ---------- шапка ---------- */
.app-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.app-header .wrap { padding-bottom: 0; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 52px; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; padding: 8px 0; }
.top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.top-links a { text-decoration: none; padding: 8px 2px; }

/* ---------- кнопки ---------- */
.btn {
  font: inherit;
  display: inline-block;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn:hover { background: var(--surface-2); }
.btn.small { min-height: 36px; padding: 4px 10px; font-size: .9rem; }
.btn.primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn[aria-pressed="true"], .btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* ---------- карточки, навигация ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 14px 0; box-shadow: var(--shadow); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.crumbs { font-size: .9rem; color: var(--muted); margin: 14px 0 0; }
.crumbs a { color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; border-bottom: 2px solid var(--border); padding-bottom: 8px; }
.tabs a { text-decoration: none; padding: 9px 14px; border-radius: 8px; color: var(--text); border: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.tabs a:hover { background: var(--surface-2); }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.badge { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.badge.soon { font-style: italic; }
.badge.exam { background: var(--warn-bg); color: var(--text); border-color: var(--focus); font-weight: 700; }
.callout { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 6px; margin: 12px 0; }
.callout.warn { background: var(--warn-bg); border-left-color: var(--focus); }

/* ---------- главная ---------- */
.block h2 { margin-top: 0; }
.topic-list { list-style: none; padding: 0; margin: 8px 0 0; }
.topic-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--border); margin: 0; }
.topic-list .tt { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.topic-list .par { color: var(--muted); margin-right: .4em; white-space: nowrap; }
.topic-links { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.topic-links a { padding: 6px 2px; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 6px 0 2px; }
.progress > span { display: block; height: 100%; background: var(--ok); }

/* ---------- таблицы ---------- */
table.data { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .96rem; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
table.data th { font-size: .82rem; color: var(--muted); font-weight: 600; }
table.data td.date { white-space: nowrap; font-weight: 600; width: 1%; }
dl.terms { margin: 8px 0; }
dl.terms dt { font-weight: 700; margin-top: .7em; }
dl.terms dd { margin: .1em 0 0; }

/* ---------- теория ---------- */
.theory h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.stimulus { margin: 14px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.stimulus img { display: block; margin: 0 auto 8px; max-height: 360px; object-fit: contain; }
.stimulus figcaption { font-weight: 600; }
.plan-req { font-weight: 600; margin-bottom: 0; }
.notes li .kmark { display: inline-block; font-weight: 700; background: var(--ok-bg); color: var(--ok); border-radius: 4px; padding: 0 6px; margin-right: 4px; }
.sample-answer { background: var(--surface-2); border-radius: 8px; padding: 10px 14px; }
details.qa { border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; background: var(--surface); }
details.qa summary { cursor: pointer; padding: 10px 12px; min-height: 44px; font-weight: 600; }
details.qa .ans { padding: 0 12px 10px; }

/* ---------- тест ---------- */
.q-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .9rem; }
.q-text { font-weight: 600; font-size: 1.05rem; margin: 8px 0 12px; }
.q-image { display: block; margin: 8px auto 12px; max-height: 340px; object-fit: contain; }
.opts { list-style: none; padding: 0; margin: 0; }
.opts li { margin: 8px 0; }
.opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; background: var(--surface); min-height: 44px; }
.opt input { margin-top: .3em; width: 1.1em; height: 1.1em; flex: none; }
.opt:hover { background: var(--surface-2); }
.opt.ok { background: var(--ok-bg); border-color: var(--ok); }
.opt.bad { background: var(--bad-bg); border-color: var(--bad); }
.opt .mark { margin-left: auto; font-weight: 700; padding-left: 8px; white-space: nowrap; }
.opt.ok .mark { color: var(--ok); }
.opt.bad .mark { color: var(--bad); }
.match-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: var(--surface); }
.match-row .l { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.match-row select { flex: 1 1 12rem; min-width: 0; max-width: 100%; font: inherit; min-height: 44px; padding: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.match-row.ok { background: var(--ok-bg); border-color: var(--ok); }
.match-row.bad { background: var(--bad-bg); border-color: var(--bad); }
.order-list { list-style: none; padding: 0; margin: 0; counter-reset: ord; }
.order-list li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px 6px 12px; margin: 8px 0; background: var(--surface); counter-increment: ord; }
.order-list li::before { content: counter(ord) "."; font-weight: 700; color: var(--muted); min-width: 1.4em; }
.order-list .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-list .btn { min-width: 44px; padding: 4px 8px; }
.order-list li.ok { background: var(--ok-bg); border-color: var(--ok); }
.order-list li.bad { background: var(--bad-bg); border-color: var(--bad); }
input.short { width: 100%; font: inherit; min-height: 44px; padding: 8px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
input.short.ok { border-color: var(--ok); background: var(--ok-bg); }
input.short.bad { border-color: var(--bad); background: var(--bad-bg); }
.feedback { margin-top: 12px; padding: 10px 14px; border-radius: 8px; border-left: 5px solid var(--border); background: var(--surface-2); }
.feedback.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.feedback.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.feedback .verdict { font-weight: 700; margin: 0 0 4px; }
.feedback ul { margin: 4px 0; }
.hint { color: var(--bad); font-weight: 600; min-height: 1.4em; margin: 6px 0 0; }
.score-big { font-size: 2rem; font-weight: 700; margin: 4px 0; }
.wrong-list li { margin: .6em 0; }

/* ---------- задания (карточка-билет) ---------- */
.ticket-style { font-family: var(--font-serif); }
.t-task { display: grid; grid-template-columns: 3.1em 1fr; gap: 10px 14px; margin: 6px 0; }
.t-task .num { border: 1px solid var(--ink); color: var(--ink); font-weight: 700; text-align: center; align-self: start; padding: 1px 2px; font-size: 1.05em; }
.t-task .t-body > p { margin: 0 0 .6em; text-align: justify; hyphens: auto; }
.t-task figure { margin: .5em 0 .8em; text-align: center; }
.t-task figure img { max-height: 300px; max-width: 100%; object-fit: contain; }
.t-task .req { margin-top: .6em; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; font-family: var(--font-ui); }
.panel { font-family: var(--font-ui); margin: 10px 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--surface); }
.panel h4 { margin: 0 0 6px; font-size: .95rem; color: var(--accent-text); }
.panel > :last-child { margin-bottom: 0; }
.timer-out { font-family: var(--font-ui); font-variant-numeric: tabular-nums; font-weight: 700; align-self: center; }
.timer-out.over { color: var(--bad); }
.selfcheck { font-family: var(--font-ui); margin-top: 14px; padding: 10px 14px; border-radius: 8px; background: var(--surface-2); }
.selfcheck legend { font-weight: 700; padding: 0 4px; }
.selfcheck fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.selfcheck label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; min-height: 40px; cursor: pointer; }
.selfcheck input { width: 1.2em; height: 1.2em; margin-top: .2em; flex: none; }
.selfcheck .total { font-weight: 700; margin: 6px 0 0; }
.fu-box { margin: 6px 0; }

/* ---------- вводный урок ---------- */
.sample { margin: 16px 0; }
.sample blockquote { margin: 8px 0; padding: 8px 14px; border-left: 4px solid var(--border); background: var(--surface-2); border-radius: 0 6px 6px 0; }
.marks { list-style: none; padding: 0; margin: 8px 0; }
.marks li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 6px; margin: 4px 0; }
.marks li.ok { background: var(--ok-bg); }
.marks li.no { background: var(--bad-bg); }
.marks .k { font-weight: 700; min-width: 2.2em; }
.marks .st { font-weight: 700; white-space: nowrap; }
.marks li.ok .st { color: var(--ok); }
.marks li.no .st { color: var(--bad); }
.score-chip { font-size: 1.1rem; }

/* ---------- билет (экран) ---------- */
.variant-list { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.variant-list a { display: block; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-decoration: none; min-height: 44px; }
.variant-list a:hover { background: var(--surface-2); }
.ticket-wrap { background: var(--paper); color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 14px 14px 6px; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.4; margin: 12px 0; }
table.ticket { width: 100%; border-collapse: collapse; }
table.ticket th, table.ticket td { padding: 0 0 12px; text-align: left; font-weight: normal; vertical-align: top; }
table.ticket thead { display: table-header-group; }
.t-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--ink); padding-bottom: 4px; margin-bottom: 4px; }
.frame { border: 1px solid var(--ink); padding: 6px 12px; font-style: italic; font-weight: 700; text-align: justify; }
.frame.center { text-align: center; }
.ticket-wrap .t-task .t-body > p { text-align: justify; }
.answers { font-family: var(--font-ui); font-size: .95rem; margin-top: 10px; }
.answers .panel { margin: 8px 0; }
.ticket-wrap:not(.show-answers) .answers { display: none; }
.protocol { display: none; }

@media (max-width: 480px) {
  h1 { font-size: 1.35rem; }
  .card { padding: 12px; }
  .t-task { grid-template-columns: 2.8em 1fr; gap: 8px 10px; }
  .ticket-wrap { padding: 10px 10px 2px; font-size: 1rem; }
}

/* ---------- протокол (виден только при печати) ---------- */
.protocol { font-family: var(--font-serif); color: #000; }
.protocol h2 { font-size: 15pt; text-align: center; margin: 0 0 6pt; }
.protocol h3 { font-size: 12.5pt; margin: 14pt 0 4pt; }
.protocol table { width: 100%; border-collapse: collapse; font-size: 11.5pt; }
.protocol th, .protocol td { border: 1px solid #000; padding: 4pt 6pt; text-align: left; vertical-align: top; }
.protocol td.score { width: 22mm; text-align: center; }
.protocol .sum { margin-top: 14pt; font-weight: 700; font-size: 12.5pt; }
.protocol .keys { font-size: 10.5pt; }
.protocol .keys ul { margin: 2pt 0; }

/* ---------- печать ---------- */
@page { size: A4; margin: 15mm 18mm; }
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .no-print, .app-header, .skip, .tabs, .crumbs, .toolbar, .selfcheck-wrap, .answers, .btn-row { display: none !important; }
  .wrap { max-width: none; padding: 0; margin: 0; }
  main { display: block; }
  .ticket-wrap { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: #fff !important; color: #000 !important; font-size: 13pt; line-height: 1.35; }
  .ticket-wrap * { color: #000 !important; border-color: #000 !important; }
  table.ticket tr { break-inside: avoid; }
  .t-task { grid-template-columns: 22mm 1fr; }
  .t-task figure img { max-height: 85mm; }
  .frame { font-size: 13pt; }
  body[data-print="protocol"] .ticket-wrap { display: none !important; }
  body[data-print="protocol"] .protocol { display: block !important; }
  body:not([data-print="protocol"]) .protocol { display: none !important; }
}