:root {
  --bg: #f5f0e6;          /* бежевый фон */
  --paper: #fffdf9;       /* карточки */
  --sand: #ece4d4;        /* бежевые плашки */
  --line: #e2d9c8;
  --blue: #5b8db8;
  --blue-dark: #3f6f98;
  --blue-soft: #e3eef7;
  --gray: #6b7179;
  --ink: #33383e;
  --ok: #4f8f6a;
  --ok-soft: #e4f1e8;
  --no: #b9665c;
  --no-soft: #f7e5e1;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(80, 70, 50, .06), 0 4px 16px rgba(80, 70, 50, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 "PT Sans", "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3, h4 { font-family: "PT Serif", Georgia, serif; line-height: 1.25; margin: 0; }
a { color: var(--blue-dark); }
button { font: inherit; color: inherit; }
.page { max-width: 880px; margin: 0 auto; padding: 18px 16px 40px; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gray); font-size: 15px; margin-bottom: 18px; }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--blue); color: #fbf8f2; display: grid; place-items: center; font: 700 17px "PT Serif", Georgia, serif; }
.foot { margin-top: 40px; text-align: center; color: #a49c8c; font-size: 14px; }

/* ---------- главная ---------- */
.hero { padding: 8px 0 22px; }
.hero h1 { font-size: clamp(28px, 5vw, 40px); color: var(--ink); }
.hero p { color: var(--gray); max-width: 620px; margin: 10px 0 0; }
.blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 560px) { .blocks { grid-template-columns: 1fr; } }
.block-card {
  display: block; position: relative; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 18px; box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.block-card:hover { transform: translateY(-2px); border-color: #c9d9e8; }
.block-card h2 { font-size: 24px; margin: 12px 0 4px; }
.block-card p { margin: 0 0 16px; color: var(--gray); font-size: 15px; }
.block-num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font: 700 16px "PT Serif", Georgia, serif;
}
.bar { height: 6px; border-radius: 3px; background: var(--sand); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.bar-label { font-size: 13px; color: var(--gray); margin-top: 6px; }
.reset { margin-top: 28px; text-align: center; }

/* ---------- страница темы ---------- */
.crumbs { font-size: 15px; margin-bottom: 14px; }
.crumbs a { text-decoration: none; }
.block-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.block-head .block-num { width: 46px; height: 46px; font-size: 22px; }
.block-head h1 { font-size: clamp(26px, 5vw, 34px); }
.block-head p { margin: 2px 0 0; color: var(--gray); }

.theory { background: var(--blue-soft); border: 1px solid #cfe0ee; border-radius: var(--radius); margin-bottom: 22px; }
.theory summary { cursor: pointer; padding: 14px 18px; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.theory summary::-webkit-details-marker { display: none; }
.theory summary span { font: 700 19px "PT Serif", Georgia, serif; color: var(--blue-dark); }
.theory summary span::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.theory[open] summary span::before { transform: rotate(90deg); }
.theory summary small { color: var(--gray); font-size: 14px; }
.theory-body { padding: 0 18px 18px; }
.theory-body p { margin: 0 0 12px; }
.theory-body h4 { font-size: 18px; margin: 18px 0 10px; color: var(--ink); }
.types { display: grid; gap: 10px; }
.type { background: var(--paper); border-radius: 10px; padding: 12px 14px; font-size: 16px; }
.type .eg { margin-top: 6px; font-size: 15px; color: var(--gray); }
.type s, .example s, .fix-head s { text-decoration-color: var(--no); text-decoration-thickness: 2px; color: var(--ink); }
.type .ok { color: var(--ok); font-weight: 700; }
.q3 { margin: 0 0 12px; padding-left: 22px; }
.q3 li { margin-bottom: 4px; }
.why { margin: 0 0 12px; padding-left: 20px; }
.habit { background: var(--paper); border-left: 4px solid var(--blue); border-radius: 8px; padding: 10px 14px; }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--sand); padding: 5px; border-radius: 12px; }
.tab { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; text-decoration: none; color: var(--gray); font-weight: 700; font-size: 15px; }
.tab.active { background: var(--paper); color: var(--blue-dark); box-shadow: var(--shadow); }
.tab.done::after { content: " ✓"; color: var(--ok); }

/* ---------- карточка упражнения ---------- */
.ex { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ex-num { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-dark); font-weight: 700; }
.ex-done { font-size: 13px; color: var(--ok); font-weight: 700; display: none; }
.ex.is-done .ex-done { display: inline; }
.ex-title { font-size: 22px; margin: 6px 0 6px; }
.ex-task { margin: 0 0 16px; color: var(--gray); }
.subtask { margin: 18px 0 10px; font-weight: 700; }

.item-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sand);
  display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--gray);
}
.item-main { flex: 1; min-width: 0; }
.item-fb:empty { display: none; }
.item-fb { margin-top: 8px; }
.fb { display: flex; gap: 8px; align-items: baseline; font-weight: 700; }
.fb-mark { flex: none; }
.fb-ok { color: var(--ok); }
.fb-no { color: var(--no); }
.note { font-size: 15.5px; color: var(--ink); background: #faf6ee; border-radius: 8px; padding: 9px 12px; margin-top: 6px; }
.note-common { background: var(--blue-soft); }
.hint { color: var(--no); font-size: 15px; }
.score { margin-top: 14px; font-size: 15px; color: var(--gray); }
.score-full { color: var(--ok); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; padding: 9px 16px; font-size: 15.5px; font-weight: 700;
  text-decoration: none; background: none; transition: background .15s, border-color .15s;
}
.btn-main { background: var(--blue); color: #fff; }
.btn-main:hover { background: var(--blue-dark); }
.btn-ghost { border-color: #c9d9e8; color: var(--blue-dark); background: var(--paper); }
.btn-ghost:hover { background: var(--blue-soft); }
.btn-ghost.open { background: var(--blue-soft); }
.btn-link { color: var(--gray); font-weight: 400; text-decoration: underline; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
[hidden] { display: none !important; }

/* выбор из вариантов (карточки) */
.pair { display: flex; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); }
.pair:first-child { border-top: 0; padding-top: 0; }
.pair-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-3 .pair-opts { grid-template-columns: 1fr; }
.opt {
  justify-content: flex-start; text-align: left; font-weight: 400; background: #faf7f1;
  border: 1.5px solid var(--line); padding: 10px 12px; line-height: 1.4;
}
.opt:hover { border-color: var(--blue); background: var(--paper); }
.opt-letter { flex: none; font-weight: 700; color: var(--blue-dark); margin-right: 8px; }
.locked .opt, .locked .chip { cursor: default; }
.locked .opt:not(.is-right):not(.is-wrong) { opacity: .6; }
.is-right { border-color: var(--ok) !important; background: var(--ok-soft) !important; }
.is-wrong { border-color: var(--no) !important; background: var(--no-soft) !important; }

/* выбор слова в предложении */
.inline-list { margin: 0; padding-left: 22px; }
.inline-item { padding: 8px 0; }
.inline-text { margin: 0; line-height: 2.1; }
.choice { display: inline-flex; align-items: center; gap: 2px; vertical-align: baseline; flex-wrap: wrap; }
.slash { color: #b7ad9b; margin: 0 2px; }
.chip {
  border: 1.5px solid #c9d9e8; background: var(--blue-soft); color: var(--blue-dark);
  border-radius: 999px; padding: 2px 12px; font-weight: 700; font-size: 16px; line-height: 1.5;
}
.chip:hover { background: #d4e5f3; }
.locked .chip:not(.is-right):not(.is-wrong):not(.is-wrong-word):not(.is-miss) { opacity: .55; }
.chip.is-right { color: var(--ok); }
.chip.is-wrong { color: var(--no); text-decoration: line-through; }

/* лишнее / шпион */
.odd { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px dashed var(--line); }
.odd:first-child { border-top: 0; }
.odd-label { flex: none; width: 100px; font-size: 13px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .04em; padding-top: 7px; }
.odd-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-lg { background: #faf7f1; border-color: var(--line); color: var(--ink); font-weight: 400; padding: 5px 14px; }
.chip-lg:hover { border-color: var(--blue); background: var(--paper); }
.chip.is-wrong-word { border-color: var(--no); background: var(--no-soft); color: var(--no); text-decoration: line-through; font-weight: 700; }
.chip.is-miss { border-color: #b7ad9b; background: var(--sand); }
.odd-spy .odd-label::before { content: "🔍 "; }

/* плюс / минус */
.pm { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pm-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.pm-row:first-child { border-top: 0; }
.pm-row:nth-child(even) { background: #fbf8f2; }
.pm-switch { display: flex; gap: 6px; }
.pm-btn { width: 42px; height: 36px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; font-size: 20px; font-weight: 700; line-height: 1; }
.pm-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pm-note { grid-column: 1 / -1; font-size: 15px; }
.pm-note:empty { display: none; }
.pm-row.is-right { background: var(--ok-soft) !important; border-color: var(--line) !important; }
.pm-row.is-wrong { background: var(--no-soft) !important; border-color: var(--line) !important; }

/* А / Б */
.verdict { display: flex; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); }
.verdict:first-child { border-top: 0; padding-top: 0; }
.vab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.vcell { background: #faf7f1; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.vopts { display: flex; flex-wrap: wrap; gap: 8px; }

/* найти ошибку в тексте */
.hunt { display: flex; gap: 12px; padding: 14px 0; border-top: 1px dashed var(--line); }
.hunt:first-child { border-top: 0; padding-top: 0; }
.hunt-text { line-height: 1.95; font-size: 17.5px; }
.hunt-long .hunt-text { background: #faf7f1; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-family: "PT Serif", Georgia, serif; }
.essay-title { font-size: 19px; margin-bottom: 10px; text-align: center; }
.para-break { display: block; height: 8px; }
.w { cursor: pointer; border-radius: 4px; padding: 1px 1px; transition: background .1s; }
.w:hover { background: var(--blue-soft); }
.w:focus-visible { outline: 2px solid var(--blue); }
.w.sel { background: #fde7a8; box-shadow: inset 0 -2px 0 #e0b84a; }
.checked .w { cursor: default; }
.checked .w:hover { background: none; }
.w.hit { background: var(--ok-soft) !important; box-shadow: inset 0 -2px 0 var(--ok); }
.w.extra { background: none !important; box-shadow: none; text-decoration: line-through; text-decoration-color: var(--no); color: var(--gray); }
.w.ans:not(.hit) { background: var(--no-soft); box-shadow: inset 0 -2px 0 var(--no); }
.key { margin-top: 10px; }

/* таблицы */
.tbl-wrap { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 15px; }
.tbl th { background: var(--sand); text-align: left; padding: 8px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray); }
.tbl td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl td:first-child { font-weight: 700; }
.tbl-colloc td:first-child { color: var(--blue-dark); letter-spacing: .03em; }
.tbl-colloc td:nth-child(3) { color: var(--no); }
.tbl-colloc { margin-bottom: 0; }

/* выделенные ошибки + таблица исправлений */
.marked-text { background: #faf7f1; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-family: "PT Serif", Georgia, serif; line-height: 1.85; margin-bottom: 16px; }
.mk { background: #fde7a8; padding: 1px 3px; border-radius: 4px; font-weight: 700; }
.mk sup { color: var(--blue-dark); font-family: "PT Sans", sans-serif; font-size: 11px; margin-right: 2px; }
.fix-list { display: grid; gap: 10px; }
.fix-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fix-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.fix-num { flex: none; color: var(--blue-dark); font-weight: 700; font-size: 14px; }
.fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* поля ввода */
.field {
  width: 100%; display: block; margin-top: 8px; resize: vertical; min-height: 42px;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; background: #fff;
  font: inherit; font-size: 16px; color: var(--ink);
}
.field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.flabel { display: block; font-size: 13px; color: var(--gray); font-weight: 700; }
.flabel .field { margin-top: 4px; font-weight: 400; }
.reveal { margin-top: 8px; }
.reveal .btn { padding: 6px 12px; font-size: 14.5px; }
.reveal .btn::after { content: "▾"; font-size: 12px; transition: transform .15s; }
.reveal .btn.open::after { transform: rotate(180deg); }
.reveal-body { margin-top: 8px; background: var(--blue-soft); border-radius: 10px; padding: 10px 14px; font-size: 15.5px; }
.reveal-body p { margin: 0 0 6px; }
.reveal-body p:last-child { margin: 0; }
.reveal-body .note { background: none; padding: 0; }

.example { background: #faf7f1; border-radius: 10px; padding: 10px 14px; font-size: 15.5px; margin-bottom: 14px; }
.quote { margin: 0 0 14px; border-left: 4px solid var(--blue); background: #faf7f1; border-radius: 0 10px 10px 0; padding: 12px 16px; font-style: italic; }
.open-list { display: grid; gap: 12px; }
.open-row { border-top: 1px dashed var(--line); padding-top: 12px; }
.open-row:first-child { border-top: 0; padding-top: 0; }
.open-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.open-prompt { font-weight: 700; font-size: 17px; }
.open-hint { color: var(--gray); font-size: 15px; font-style: italic; }
.open-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 4px; }
.open-compact .open-row { display: grid; grid-template-columns: minmax(180px, 1fr) 1.4fr; gap: 4px 14px; align-items: start; }
.open-compact .open-head { padding-top: 10px; }
.open-compact .reveal { grid-column: 2; margin-top: 0; }
.open-compact .flabel > span { display: none; }

/* сочинения */
.topics { display: grid; gap: 8px; margin-bottom: 12px; }
.topic { display: flex; gap: 10px; align-items: flex-start; background: #faf7f1; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.topic:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.topic input { margin-top: 5px; accent-color: var(--blue); }
.plan-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.plan { margin: 0 0 12px; padding-left: 22px; color: var(--gray); }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wchip { border: 1.5px dashed #b7ad9b; border-radius: 999px; padding: 3px 12px; font-size: 15px; color: var(--gray); transition: all .2s; }
.wchip small { display: block; font-size: 12px; color: #a49c8c; line-height: 1.3; }
.wchip.on { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.wchip.on::before { content: "✓ "; }
.field.essay { min-height: 200px; line-height: 1.6; }
.essay-stat { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--gray); margin-top: 8px; }
.st-ok { color: var(--ok); }
.st-warn { color: #b0802f; }
.checklist { margin-top: 16px; background: #faf7f1; border-radius: 12px; padding: 12px 14px; }
.checklist-title { font-weight: 700; margin-bottom: 6px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; cursor: pointer; font-size: 15.5px; }
.check-item input { margin-top: 5px; accent-color: var(--ok); flex: none; }
.check-item input:checked + span { color: var(--gray); text-decoration: line-through; }

.pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .ex { padding: 16px 14px 18px; border-radius: 12px; }
  .ex-title { font-size: 20px; }
  .pair-opts, .vab, .fix-grid { grid-template-columns: 1fr; }
  .odd { flex-direction: column; gap: 6px; }
  .odd-label { width: auto; padding-top: 0; }
  .pair .item-num, .verdict .item-num, .hunt .item-num { display: none; }
  .open-compact .open-row { grid-template-columns: 1fr; }
  .open-compact .open-head { padding-top: 0; }
  .open-compact .reveal { grid-column: 1; }
  .tab { font-size: 14px; }
  .pager .btn { flex: 1; }
}