:root{
  --paper:#F1F4F6; --plate:#FFFFFF;
  --ink:#15212B; --ink-soft:#4E606E; --ink-faint:#8395A2;
  --rule:#D2DCE3;
  --deep:#1C5D82; --deep-wash:#E4EEF4;
  --shoal:#9A7736; --shoal-wash:#F3EBDB;
  --ok:#2E6B4F; --ok-wash:#E3F0E9;
  --bad:#9B3B32; --bad-wash:#F7E7E5;
  --shadow:0 1px 2px rgba(21,33,43,.07);
  --serif:"PT Serif",Georgia,serif;
  --narrow:"PT Sans Narrow","Arial Narrow",sans-serif;
  --mono:"PT Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E161D; --plate:#16222C;
    --ink:#DBE5EC; --ink-soft:#93A6B4; --ink-faint:#6A7D8B;
    --rule:#26343F;
    --deep:#79B8DB; --deep-wash:#152833;
    --shoal:#D3B67F; --shoal-wash:#241F16;
    --ok:#7BC49C; --ok-wash:#132219;
    --bad:#E08C82; --bad-wash:#26140F;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E161D; --plate:#16222C;
  --ink:#DBE5EC; --ink-soft:#93A6B4; --ink-faint:#6A7D8B;
  --rule:#26343F; --deep:#79B8DB; --deep-wash:#152833;
  --shoal:#D3B67F; --shoal-wash:#241F16;
  --ok:#7BC49C; --ok-wash:#132219; --bad:#E08C82; --bad-wash:#26140F;
  --shadow:0 1px 2px rgba(0,0,0,.35); color-scheme:dark;
}

*{box-sizing:border-box}
/* Правило по id (например #busy{display:flex}) перебивает браузерное
   [hidden]{display:none}. Без !important скрытые элементы остаются видимыми. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.6;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:var(--narrow); font-weight:700; text-wrap:balance; line-height:1.2}
h1{font-size:28px;margin:0 0 6px}
h2{font-size:24px;margin:36px 0 10px}
h3{font-size:19px;margin:24px 0 6px}
p{margin:12px 0}
a{color:var(--deep)}
.muted{color:var(--ink-faint)}
.err{color:var(--bad)}

button{font:inherit;cursor:pointer;border-radius:3px;border:1px solid var(--rule);
  background:var(--plate);color:var(--ink);padding:9px 16px}
button:hover{border-color:var(--deep)}
button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--deep);outline-offset:2px}
button.primary{background:var(--deep);border-color:var(--deep);color:var(--paper);font-family:var(--narrow);
  font-weight:700;font-size:17px;letter-spacing:.01em}
button.link{background:none;border:none;color:var(--ink-faint);padding:4px;text-decoration:underline}
input,textarea{font:inherit;background:var(--plate);color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;padding:9px 11px;width:100%}
textarea{font-family:var(--mono);font-size:14px;resize:vertical}

/* ── вход ── */
.screen{min-height:60vh}
.login-box{max-width:22rem;margin:14vh auto;padding-inline:16px;display:flex;flex-direction:column;gap:12px}

/* ── шапка ── */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:var(--paper);border-bottom:1px solid var(--rule)}
.bar-in{max-width:48rem;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--deep)}
.bar nav{display:flex;gap:6px;margin-right:auto}
.nav{font-family:var(--narrow);padding:5px 12px;border-color:transparent;background:none;color:var(--ink-soft)}
.nav.on{background:var(--deep-wash);border-color:var(--rule);color:var(--ink)}

.wrap{max-width:48rem;margin:0 auto;padding-inline:16px;padding-block:8px 72px}
.back{background:none;border:none;color:var(--ink-faint);padding:10px 0}

/* ── карточки уроков ── */
.lessons{display:flex;flex-direction:column;gap:8px}
.lesson-row{display:flex;align-items:center;gap:12px;background:var(--plate);
  border:1px solid var(--rule);border-radius:3px;padding:12px 14px;box-shadow:var(--shadow);
  text-align:left;width:100%}
.lesson-row .n{font-family:var(--mono);font-size:12px;color:var(--deep);min-width:3.2em}
.lesson-row .t{flex:1 1 auto;min-width:0;font-family:var(--narrow);font-size:18px;font-weight:700}
.lesson-row .s{font-family:var(--mono);font-size:11px;color:var(--ink-faint);white-space:nowrap}
.lesson-row[disabled]{opacity:.5;cursor:not-allowed}

.card{background:var(--plate);border:1px solid var(--rule);border-top:2px solid var(--deep);
  border-radius:3px;box-shadow:var(--shadow);padding:16px 18px;margin:16px 0}
.card h2,.card h3{margin-top:0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep);display:block;margin-bottom:6px}

/* ── шаги урока ── */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0;
  border-bottom:1px solid var(--rule);padding-bottom:10px}
.steps button{font-family:var(--narrow);padding:6px 13px;background:none;border-color:transparent;color:var(--ink-soft)}
.steps button.on{background:var(--deep-wash);border-color:var(--rule);color:var(--ink);font-weight:700}

.md{overflow-wrap:break-word}
.md h2{font-size:22px} .md h3{font-size:18px}
.md table{border-collapse:collapse;width:100%}
.md th,.md td{border:1px solid var(--rule);padding:6px 9px;text-align:left}
.md blockquote{border-left:3px solid var(--shoal);background:var(--shoal-wash);
  margin:16px 0;padding:8px 16px;border-radius:0 3px 3px 0}
.md code{font-family:var(--mono);font-size:.9em;background:var(--deep-wash);padding:1px 4px;border-radius:2px}
.md pre{overflow-x:auto}
mjx-container[display="true"]{margin:12px 0!important;overflow-x:auto;overflow-y:hidden;max-width:100%}

/* ── форма сдачи ── */
.answers{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.arow{display:grid;grid-template-columns:2.6em 1fr 5.4em;gap:8px;align-items:center}
.arow .an{font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.arow select{font:inherit;background:var(--plate);color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;padding:9px 6px}
/* label по умолчанию строчный: отступы не раздвигают строку и блок наезжает
   на соседний текст. display:block обязателен. */
.dropzone{display:block;width:100%;margin:14px 0 0;
  border:1px dashed var(--rule);border-radius:3px;padding:18px;text-align:center;
  color:var(--ink-faint);background:var(--plate);cursor:pointer;
  transition:border-color .15s,color .15s}
.dropzone:hover{border-color:var(--deep);color:var(--ink-soft)}
.dropzone small{display:block;margin-top:4px;font-size:14px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:76px;height:76px;object-fit:cover;border-radius:3px;border:1px solid var(--rule)}

/* ── вердикты ── */
.verdicts{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.v{display:grid;grid-template-columns:2.6em 1.6em 1fr;gap:10px;align-items:start;
  padding:9px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--plate)}
.v.ok{background:var(--ok-wash);border-color:var(--ok)}
.v.fail{background:var(--bad-wash);border-color:var(--bad)}
.v.disputed{background:var(--shoal-wash);border-color:var(--shoal)}
.v .vn{font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.v .vt{min-width:0}
.v .vt b{font-family:var(--narrow)}
.v small{display:block;color:var(--ink-soft);font-size:14px}
.v .src{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--shoal);
  border:1px solid var(--shoal);border-radius:2px;padding:0 4px;vertical-align:2px}

.tally{display:flex;gap:18px;font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin:8px 0 0}

/* ── реестр ── */
.reg{display:flex;flex-direction:column;gap:8px}
.reg-item{background:var(--plate);border:1px solid var(--rule);border-left:3px solid var(--shoal);
  border-radius:0 3px 3px 0;padding:11px 14px}
.reg-item.closed{border-left-color:var(--ok);opacity:.65}
.reg-item .rt{font-family:var(--narrow);font-weight:700;font-size:17px}
.reg-item .rm{font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.pips{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.pip{width:7px;height:7px;border-radius:50%;background:var(--rule)}
.pip.on{background:var(--ok)}

/* ── вопросы по теории ── */
.ask{margin:32px 0 0;padding:16px 0 0;border-top:2px solid var(--deep)}
.ask>p{margin-top:4px}
.ask-thread{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.turn{display:grid;grid-template-columns:4.2em 1fr;gap:10px;align-items:start}
.turn .who{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:5px}
.turn.user .who{color:var(--shoal)}
.turn.assistant .who{color:var(--deep)}
.turn .body{min-width:0;padding:9px 13px;border-radius:3px;border:1px solid var(--rule);background:var(--plate)}
.turn.user .body{background:var(--shoal-wash);border-color:var(--shoal)}
.turn .body>p:first-child{margin-top:0}
.turn .body>p:last-child{margin-bottom:0}
.ask-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.ask-form textarea{flex:1 1 16rem;min-height:3.2em}
.ask-form button{flex:0 0 auto}
.ask-form button[disabled]{opacity:.6;cursor:wait}

/* ── памятка по вводу ── */
.howto{border:1px solid var(--rule);border-left:3px solid var(--deep);
  border-radius:0 3px 3px 0;background:var(--plate);padding:10px 14px;margin:14px 0}
.howto summary{color:var(--deep);font-size:16px}
.howto table{border-collapse:collapse;width:100%;margin:10px 0;font-size:15px}
.howto td{padding:5px 8px 5px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.howto td:first-child{white-space:nowrap;color:var(--ink-soft);width:11em}
.howto td:last-child{color:var(--ink-faint);font-size:14px}
.howto code{font-family:var(--mono);font-size:.92em;background:var(--deep-wash);
  padding:1px 5px;border-radius:2px;white-space:nowrap}
.howto p{margin:8px 0 0;font-size:15px}

details{border-top:1px solid var(--rule);padding-top:10px;margin-top:14px}
summary{cursor:pointer;font-family:var(--narrow);font-weight:700}

/* ── занятость ── */
#busy{position:fixed;inset:0;background:color-mix(in srgb,var(--paper) 88%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:100}
.spinner{width:30px;height:30px;border:2px solid var(--rule);border-top-color:var(--deep);
  border-radius:50%;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#busy p{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}

@media (max-width:480px){
  body{font-size:16px}
  .arow{grid-template-columns:2.2em 1fr;grid-template-areas:"n a" ". c"}
  .arow .an{grid-area:n} .arow input{grid-area:a} .arow select{grid-area:c;width:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}