:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --line: #e3e6eb;
  --line-soft: #eef0f3;
  --text: #1d2330;
  --muted: #6b7280;
  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --ok: #16a34a;
  --warn: #d97706;
  --warn-bg: #fff7e6;
  --danger: #dc2626;
  --danger-bg: #fdecec;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);

  /* категории: фон / полоса */
  --c-homework: #b9d3ff; --c-homework-b: #3b82f6;
  --c-oge: #d4c2ff; --c-oge-b: #7c3aed;
  --c-art: #ffcf99; --c-art-b: #ea7a10;
  --c-artschool: #ffbdd8; --c-artschool-b: #db2777;
  --c-club: #b2ebc6; --c-club-b: #16a34a;
  --c-school: #dde1e8; --c-school-b: #9aa3af;
  --c-other: #d3dae4; --c-other-b: #64748b;
}


* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }
h1, h2 { margin: 0; }
h1 { font-size: 20px; font-weight: 650; }
h2 { font-size: 14px; font-weight: 650; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 12px; margin: 4px 0 8px; }

button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
button.ghost { background: transparent; }
button.danger { color: var(--danger); }
button.small { padding: 3px 8px; font-size: 12px; }
button.icon { padding: 4px 10px; font-size: 18px; line-height: 1; background: transparent; border-color: transparent; }
button.icon:hover { border-color: var(--line); }
button.pulse { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

/* ---------- вход ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-box { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 28px 24px; text-align: center; width: 300px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); }
.pin-dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-pad button { font-size: 22px; padding: 14px 0; border-radius: 12px; }
.error { color: var(--danger); min-height: 1.4em; margin: 12px 0 0; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.week-nav { display: flex; align-items: center; gap: 6px; }
.week-nav h1 { min-width: 170px; text-align: center; }
.week-stats { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; flex-wrap: wrap; }
.stat.warn { color: var(--warn); font-weight: 600; }
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; flex: 1; min-width: 80px; max-width: 220px; }
.bar-fill { height: 100%; background: var(--ok); border-radius: 99px; transition: width .3s; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.day-tabs { display: none; }

/* ---------- раскладка ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 16px; align-items: start; }
.board { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

.grid { display: grid; }
.corner, .axis-tray { border-bottom: 1px solid var(--line); }
.day-head { padding: 8px 8px 6px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.day-head .dname { font-weight: 650; }
.day-head .ddate { color: var(--muted); font-size: 12px; }
.day-head .dcount { position: absolute; top: 8px; right: 8px; font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 1px 7px; }
.day-head.weekend { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.day-head.today { box-shadow: inset 0 3px 0 var(--accent); }
.day-head.today .dname { color: var(--accent); }

.tray { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 4px; min-height: 8px; }
.tray.weekend { background: color-mix(in srgb, var(--warn) 6%, var(--surface)); min-height: 52px; }
.tray.has-shifted { background: var(--warn-bg); }
.tray-title { font-size: 11px; font-weight: 650; color: var(--warn); text-transform: uppercase; letter-spacing: .02em; padding: 2px 2px 0; }
.tray:not(.weekend) .tray-title { color: var(--muted); }
.tray-hint { font-size: 11px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 6px; text-align: center; }
.tray.drop, .col.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }

.axis { position: relative; }
.tick { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.tick:first-child { transform: none; }
.col { position: relative; border-left: 1px solid var(--line); }
.col.weekend { background: color-mix(in srgb, var(--warn) 4%, transparent); }
.col.today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.hline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); pointer-events: none; }
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 5; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---------- блоки ---------- */
.block {
  position: absolute; overflow: hidden; border-radius: 6px; padding: 3px 6px 3px 8px;
  background: var(--cat); border-left: 3px solid var(--cat-b); font-size: 12px; cursor: pointer;
  line-height: 1.25;
}
.block:hover { box-shadow: var(--shadow); z-index: 3; }
.b-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.b-time { color: #3f4654; font-size: 11px; white-space: nowrap; }
.b-flag { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 700; color: var(--danger); text-transform: uppercase; }
.b-moved { font-size: 10px; color: var(--warn); font-weight: 600; }

.block.fixed { opacity: .9; }
.block.fixed .b-title { padding-right: 20px; }
.block.visited { opacity: .6; }

.check {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0;
  border-radius: 5px; border: 1.5px solid var(--cat-b); background: var(--surface);
  font-size: 12px; line-height: 15px; color: #fff; font-weight: 700;
}
.st-done .check, .visited .check { background: var(--ok); border-color: var(--ok); }
.block.st-done { opacity: .65; }
.block.st-done .b-title { text-decoration: line-through; }
.block.st-skipped { opacity: .35; }
.block.st-skipped .b-title { text-decoration: line-through; }
.block.st-overdue, .block.st-debt {
  background: #ffc4c4;
  border-left-color: var(--danger);
}
.block.in-tray { position: relative; min-height: 36px; }
.block.in-tray.st-overdue { background: #ffc4c4; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-left: 3px solid var(--danger); }
.block.dragging { opacity: .4; }
.block.item { cursor: grab; }

/* цвета категорий */
.cat-homework { --cat: var(--c-homework); --cat-b: var(--c-homework-b); }
.cat-oge { --cat: var(--c-oge); --cat-b: var(--c-oge-b); }
.cat-art { --cat: var(--c-art); --cat-b: var(--c-art-b); }
.cat-artschool { --cat: var(--c-artschool); --cat-b: var(--c-artschool-b); }
.cat-club { --cat: var(--c-club); --cat-b: var(--c-club-b); }
.cat-school { --cat: var(--c-school); --cat-b: var(--c-school-b); }
.cat-other { --cat: var(--c-other); --cat-b: var(--c-other-b); }

/* ---------- боковая панель ---------- */
.side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; }
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel h2.warn { color: var(--warn); margin-bottom: 6px; }
.panel h2.danger { color: var(--danger); margin: 10px 0 6px; }
.empty { color: var(--muted); font-size: 12px; border: 1px dashed var(--line); border-radius: 8px; padding: 10px; }

#debtPanel { border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.debt-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 0 6px 8px; border-left: 3px solid var(--cat-b); margin-bottom: 4px; }
.debt-main { display: flex; flex-direction: column; min-width: 0; }
.debt-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-main small { color: var(--muted); }
.debt-actions { display: flex; gap: 4px; flex-shrink: 0; }

.proj { border-left: 3px solid var(--cat-b); background: var(--cat); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; cursor: grab; display: flex; flex-direction: column; gap: 5px; }
.proj .bar { max-width: none; background: var(--surface); }
.proj small { color: #3f4654; font-size: 11px; }
.proj.behind small { color: var(--danger); font-weight: 600; }
.proj.finished { opacity: .6; }
.proj-head { display: flex; justify-content: space-between; gap: 8px; }
.proj-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.proj-actions { display: flex; gap: 6px; }

.chip { display: flex; flex-direction: column; border-left: 3px solid var(--cat-b); background: var(--cat); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; cursor: grab; }
.chip small { color: #3f4654; font-size: 11px; }

.fixed-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; align-items: center; padding: 4px 6px; border-left: 3px solid var(--cat-b); margin-bottom: 3px; cursor: pointer; border-radius: 4px; }
.fixed-row:hover { background: var(--surface-2); }
.fx-day { font-weight: 650; color: var(--muted); }
.fixed-row small { color: var(--muted); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); padding: 0 4px; }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--cat); border: 2px solid var(--cat-b); }

/* ---------- диалог ---------- */
dialog { border: none; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
dialog::backdrop { background: rgba(15, 18, 25, .45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.dlg-head h2 { font-size: 17px; }
.dlg-body { padding: 6px 16px; display: flex; flex-direction: column; gap: 10px; }
.dlg-foot { display: flex; gap: 8px; padding: 12px 16px 16px; flex-wrap: wrap; }
.spacer { flex: 1; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 120px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; color: var(--muted); font-weight: 600; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--accent); }
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot { display: grid; grid-template-columns: 1fr 100px 100px auto; gap: 6px; }
.lessons { margin: 0; padding-left: 22px; line-height: 1.9; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 50; max-width: calc(100vw - 32px); }

/* ---------- узкий экран ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 820px) {
  .top { padding: 8px 16px; gap: 8px; }
  .week-nav h1 { min-width: 0; font-size: 17px; }
  .top-actions { width: 100%; }
  .top-actions #addBtn { flex: 1; }
  .day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px 16px 0; }
  .tab { display: flex; flex-direction: column; align-items: center; padding: 6px 0; position: relative; }
  .tab small { color: var(--muted); }
  .tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .tab.active small { color: inherit; }
  .tab.today:not(.active) { border-color: var(--accent); }
  .tab.weekend:not(.active) { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
  .tab .dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
  .layout { padding: 12px 16px; }
  .block { font-size: 13px; }
}

/* Карточки в полосе над сеткой — компактные, полоса не раздувает сетку */
.tray { max-height: 280px; overflow-y: auto; }
.block.in-tray { min-height: 0; flex-shrink: 0; padding: 4px 24px 4px 8px; }
.block.in-tray .b-title { padding-right: 0; }
.block.in-tray .b-flag { display: block; margin: 0; }
@media (max-width: 820px) {
  .week-nav { width: 100%; }
}

/* Прогноз сдвига на выходные: пунктирные карточки на месте, куда дело переедет */
.block.ghost { background: #fff1f1; border: 2px dashed var(--danger); border-left: 3px solid var(--danger); }
.block.ghost .b-title { color: #7f1d1d; }
button.commit { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; align-self: flex-start; }
.tray-title.danger { color: var(--danger) !important; }
.block.ghost .b-moved { display: none; }

/* ---------- переключатель режимов ---------- */
.modes { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.modes button { border: none; background: transparent; padding: 6px 14px; border-radius: 8px; font-weight: 600; color: var(--muted); }
.modes button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
body.mode-today .week-nav, body.mode-today #fillBtn, body.mode-today .day-tabs { display: none; }
body.mode-today .side .panel:not(.keep), body.mode-today .legend { display: none; }

/* ---------- экран «Сегодня» ---------- */
.today-view { display: flex; flex-direction: column; gap: 14px; }
.tday { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.tday-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.tday-head h2 { font-size: 16px; }
.tday.big .tday-head h2 { font-size: 20px; }
.tcount { font-weight: 700; color: var(--muted); white-space: nowrap; }
.tcount.all { color: var(--ok); }
.tlist { display: flex; flex-direction: column; gap: 6px; }
.tempty { color: var(--muted); padding: 6px 0; }

.trow {
  display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "c t m" "c f m";
  align-items: center; column-gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--cat); border-left: 4px solid var(--cat-b); cursor: pointer;
}
.tday:not(.big) .trow { padding: 7px 12px; }
.tcheck { grid-area: c; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 2px solid var(--cat-b); background: var(--surface); color: #fff; font-weight: 800; font-size: 15px; }
.trow.done .tcheck { background: var(--ok); border-color: var(--ok); }
.ttitle { grid-area: t; font-weight: 650; font-size: 15px; }
.trow.done .ttitle { text-decoration: line-through; opacity: .6; }
.tfrom { grid-area: f; font-size: 12px; font-weight: 700; color: var(--danger); }
.ttime { grid-area: m; color: #3f4654; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trow.incoming { background: #ffe1e1; border-left-color: var(--danger); }

.tday.weekend { border-top: 4px solid var(--warn); }
.wstatus { border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-weight: 650; }
.wstatus.calm { background: #e3f6ea; }
.wstatus.ok { background: #fff3d6; }
.wstatus.bad { background: #ffe1e1; }
.wstatus-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wstatus-bar .bar { max-width: 260px; background: rgba(255, 255, 255, .7); }
.wstatus.ok .bar-fill { background: var(--warn); }
.wstatus.bad .bar-fill { background: var(--danger); }
.wstatus-bar small { font-weight: 500; color: #3f4654; }
.wday { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.wday-name { font-weight: 700; padding-top: 8px; }
.wday.lost .wday-name { color: var(--danger); }
.tday.debts { border-top: 4px solid var(--danger); }

@media (max-width: 820px) {
  .modes { width: 100%; }
  .modes button { flex: 1; }
  .wday { grid-template-columns: 1fr; }
  .wday-name { padding-top: 0; }
}

/* ---------- тренажёр ОГЭ ---------- */
body.mode-oge .week-nav, body.mode-oge .week-stats, body.mode-oge #fillBtn, body.mode-oge #addBtn, body.mode-oge .day-tabs, body.mode-oge .side { display: none; }
body.mode-oge .layout { grid-template-columns: minmax(0, 860px); justify-content: center; }
.trow { grid-template-areas: "c t m" "c f g"; }
.tgo { grid-area: g; justify-self: end; margin-top: 4px; background: var(--surface); }
.tnext { display: block; font-size: 12px; font-weight: 600; color: #3f4654; }
.cover { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.cover .bar { max-width: 220px; }
.cover small { color: #3f4654; }
.timer { font-variant-numeric: tabular-nums; }
.timer.bad, .hint.bad { color: var(--danger); }

.oge-hero h2 { font-size: 20px; margin-bottom: 6px; }
.oge-hero p { margin: 0 0 12px; }
.oge-hero .bar { max-width: none; margin-bottom: 12px; }
.rec, .sum-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.rec-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 10px; text-align: left; min-width: 120px; }
.big-score { font-size: 40px; font-weight: 800; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.topic-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n t" "n s"; column-gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; border-left: 5px solid var(--line); }
.tc-num { grid-area: n; font-weight: 800; font-size: 18px; align-self: center; color: var(--muted); min-width: 34px; }
.tc-title { grid-area: t; font-weight: 650; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.topic-card .tc-sub { min-width: 0; }
.tc-sub { grid-area: s; font-size: 12px; color: #3f4654; }
.lvl-none { border-left-color: #c7cdd6; }
.lvl-bad { background: #ffe1e1; border-left-color: var(--danger); }
.lvl-mid { background: #fff3d6; border-left-color: var(--warn); }
.lvl-good { background: #dff5e7; border-left-color: var(--ok); }
.lvl-theory { background: #eef0ff; border-left-color: var(--accent); }
.tcount.lvl-bad { color: var(--danger); background: none; }
.tcount.lvl-mid { color: var(--warn); background: none; }
.tcount.lvl-good { color: var(--ok); background: none; }

.weak { display: flex; flex-wrap: wrap; gap: 6px; }
.weak-chip { background: #ffe1e1; border-radius: 99px; padding: 4px 10px; font-size: 13px; }

.topic-why { font-size: 15px; margin: 0 0 12px; }
.topic-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.theory h3 { margin: 0 0 8px; font-size: 16px; }
.theory ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }

.q-text summary { cursor: pointer; font-weight: 700; }
.q-text-p { margin: 8px 0; line-height: 1.6; }
.q-body .q-para { margin: 0 0 8px; line-height: 1.55; font-size: 15px; }
.q-form { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.opt { display: grid; grid-template-columns: 22px 24px 1fr; gap: 6px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; line-height: 1.45; }
.opt:has(input:checked) { border-color: var(--accent); background: #eef0ff; }
.opt input { width: 18px; height: 18px; margin-top: 2px; }
.opt-n { font-weight: 700; }
.match { display: flex; gap: 14px; }
.match label { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.match select { width: 70px; font-size: 16px; }
.match.distrib { flex-wrap: wrap; gap: 24px; }
.match.distrib b { font-size: 15px; }
.q-input { font-size: 18px; max-width: 360px; }
.feedback { border-radius: 10px; padding: 12px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.feedback.ok { background: #dff5e7; }
.feedback.bad { background: #ffe1e1; }
.feedback p { margin: 0; line-height: 1.5; }
.feedback small { color: #3f4654; }

.essay-input { font-size: 15px; line-height: 1.6; }
.checklist { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.opt.right { border-color: var(--ok); background: #dff5e7; }
.opt.wrong { border-color: var(--danger); background: #ffe1e1; }
.tabs2 { margin: 4px 0 2px; }
.lesson p { margin: 0 0 10px; line-height: 1.6; font-size: 15px; }
.example { border-left: 4px solid var(--accent); background: #f3f4ff; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.ex-text { font-size: 15px; line-height: 1.5; }
.ex-note { font-size: 13px; color: #3f4654; margin-top: 4px; }
.mistake { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.mk-wrong { color: #a11d1d; }
.mk-right { color: #146c35; }
.mk-why { font-size: 13px; color: #3f4654; }
.selfcheck { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.selfcheck summary { cursor: pointer; line-height: 1.5; }
.sc-answer { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: #146c35; line-height: 1.5; }

/* ---------- тренажёр: предметы, прогноз, формулы, часть 2 ---------- */
.subj-tabs { width: 100%; flex-wrap: wrap; }
.subj-tabs button { flex: 1; }
.subj-tabs button:disabled { opacity: .45; cursor: default; }
.forecast { border-top: 4px solid var(--accent); }
.goal-pick { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.goal-pick button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fc-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 4px 0 6px; }
.fc-score { font-size: 18px; }
.fc-score b { font-size: 30px; }
.fc-lack { font-weight: 700; }
.fc-lack.bad { color: var(--danger); }
.fc-lack.ok { color: var(--ok); }
.cond { font-size: 13px; margin-top: 4px; }
.cond.bad { color: var(--danger); font-weight: 600; }

.q-img { max-width: 100%; vertical-align: middle; background: #fff; }
.q-img.big { display: block; margin: 8px auto; max-height: 360px; cursor: zoom-in; }
.q-img.big.zoom { max-height: none; width: 100%; cursor: zoom-out; }
math { font-size: 1.2em; }
.q-table-wrap { overflow-x: auto; margin: 8px 0; }
.q-table { border-collapse: collapse; font-size: 14px; }
.q-table td { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; }
.opt-body { line-height: 1.5; }
.num-input { display: flex; gap: 6px; align-items: center; }
.num-input .q-input { flex: 1; }
.num-input button { font-size: 18px; min-width: 40px; }
.solution { background: #f3f4ff; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.solution h3 { margin: 0 0 6px; font-size: 15px; }
.solution ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.criteria .crit { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; line-height: 1.5; }
.crit-score { min-width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.dlg-scroll { max-height: 65vh; overflow-y: auto; }
.dlg-scroll .theory ul { padding-left: 20px; line-height: 1.5; }
.q-file { display: inline-block; margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; }
.q-para code, .q-text-p code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; white-space: pre-wrap; }
.code-line { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; margin: 0 !important; line-height: 1.45 !important; background: #f6f7f9; padding: 0 8px; }
.match { flex-wrap: wrap; }
.q-table td { white-space: pre-line; }
.test-case { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.test-case.right { border-color: var(--ok); background: #f1fbf4; }
.test-case.wrong { border-color: var(--danger); background: #fff5f5; }
.test-head { font-weight: 700; margin-bottom: 4px; }
.test-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.test-cols pre, .code-ref pre, .code-ref-pre, .formula { font-family: ui-monospace, Menlo, Consolas, monospace; background: #f6f7f9; border-radius: 6px; padding: 6px 8px; margin: 2px 0; white-space: pre; overflow-x: auto; font-size: 13px; }
.test-out { font-family: ui-monospace, Menlo, Consolas, monospace; }
.code-ref { margin-top: 6px; }
.code-ref summary { cursor: pointer; font-weight: 600; }
.sheet-answers { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sheet-answers .q-input { max-width: 220px; }
@media (max-width: 820px) { .test-cols { grid-template-columns: 1fr; } }

.check-box { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #e3f6ea; border-left: 4px solid var(--ok); }
.check-box > b { display: block; margin-bottom: 4px; }
.opt-unsure { color: #3f4654; border-style: dashed; }
.rec-base { display: block; color: #3f4654; font-style: italic; }