:root { --bg:#f7f5f0; --card:#fff; --ink:#22262b; --muted:#5b6370; --line:#e2ddd3; --accent:#2f6f5e; --danger:#b3261e; --warn:#8a5a00; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:1rem/1.5 system-ui, "Segoe UI", Roboto, sans-serif; overflow-wrap:break-word; }
header { background:var(--card); border-bottom:1px solid var(--line); padding:8px 16px; display:flex; gap:4px 16px; align-items:center; flex-wrap:wrap; }
header a { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
header a:hover, header a:focus { text-decoration:underline; }
header .brand { font-weight:700; margin-right:auto; }
main { max-width:760px; margin:0 auto; padding:16px; }
main.wide { max-width:1100px; }
a { color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:0 0 16px; }
h1 { font-size:1.6rem; line-height:1.25; margin:8px 0 4px; } h2 { font-size:1.2rem; margin:0 0 8px; } h3 { font-size:1rem; margin:12px 0 4px; }
p { margin:0 0 10px; max-width:80ch; }
.muted { color:var(--muted); font-size:1rem; }
video, img { max-width:100%; border-radius:8px; display:block; margin:0 auto; }
video { max-height:80vh; background:#000; }
audio { width:100%; margin:8px 0; display:block; }
label { display:block; font-weight:600; margin-top:6px; }
label.check { display:flex; gap:10px; align-items:flex-start; font-weight:400; min-height:44px; padding:8px 0; }
label.check input { width:22px; height:22px; flex:none; margin:2px 0 0; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], textarea, select {
  width:100%; min-height:44px; padding:9px 10px; border:1px solid #b9b2a4; border-radius:8px; font:inherit; font-size:1rem; margin:4px 0 10px; background:#fff; color:var(--ink); }
textarea { min-height:90px; }
input[type=file] { max-width:100%; font:inherit; margin:6px 0; min-height:44px; }
button, .btn { font:inherit; min-height:44px; padding:9px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
button.ghost, .btn.ghost { background:transparent; color:var(--accent); }
button.danger { background:transparent; color:var(--danger); border-color:var(--danger); }
button:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:3px solid #1d4ed8; outline-offset:2px; }
form.inline { display:inline; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > input, .row > select { width:auto; flex:1 1 150px; margin:0; }
.file { display:flex; gap:8px; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:8px 0; flex-wrap:wrap; }
.file > span, .file > a { overflow-wrap:anywhere; min-width:0; flex:1 1 200px; }
.error { color:var(--danger); }
.ok { color:var(--accent); font-weight:600; }
.warn { color:var(--warn); font-weight:600; }
.flash { border-left:4px solid var(--accent); }
.flash.error { border-left-color:var(--danger); }
.tag { font-size:1rem; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:1px 8px; color:var(--muted); white-space:nowrap; }
.bar { height:8px; background:var(--line); border-radius:999px; margin:6px 0 16px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); }
.locked { opacity:.75; }
.lesson-link { display:block; color:inherit; text-decoration:none; }
.lesson-link:hover h2, .lesson-link:focus h2 { text-decoration:underline; }
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.grid { border-collapse:collapse; width:100%; }
table.grid th, table.grid td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.grid th { font-size:1rem; color:var(--muted); }
pre.doc { white-space:pre-wrap; font:inherit; margin:0; max-width:80ch; }
details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--accent); }

/* звуки и слова */
.ipa { font-family:"Charis SIL", "Gentium Plus", "Doulos SIL", "Segoe UI", "Noto Sans", "Lucida Sans Unicode", "DejaVu Sans", sans-serif; }
.sounds { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:12px 0; }
.sound { position:relative; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:18px 8px 14px; text-align:center; }
.sound .n { position:absolute; top:6px; left:10px; font-size:1rem; color:var(--muted); }
.sound .ipa { font-size:1.9rem; line-height:1.2; color:var(--accent); }
.words { border-collapse:collapse; width:100%; margin:12px 0; overflow-wrap:anywhere; }
.words td { padding:8px 10px; border-bottom:1px solid var(--line); }
.words td:first-child { font-weight:700; }
.words td.ipa { color:var(--accent); font-size:1.1rem; white-space:nowrap; }
.words tr:last-child td { border-bottom:0; }

/* водяной знак с именем ученика поверх видео и картинок */
.wm { position:relative; margin:8px 0; overflow:hidden; border-radius:8px; }
.wm.video { background:#000; }
.wm::before, .wm::after { content:attr(data-wm); position:absolute; left:0; right:0; text-align:center; pointer-events:none; color:#fff; opacity:.4;
  text-shadow:0 0 3px #000, 0 0 3px #000; font-size:1rem; transform:rotate(-12deg); z-index:2; }
.wm::before { top:22%; } .wm::after { top:68%; }
/* свой плеер: во весь экран раскрывается рамка с именем, а не системный плеер телефона */
.wm.video video { display:block; width:100%; }
.player { display:flex; align-items:center; gap:6px; padding:0 6px; background:#111; color:#fff; position:relative; z-index:3; }
.player button { width:44px; min-height:44px; padding:0; flex:none; background:transparent; border-color:transparent; color:#fff; }
.player svg { width:22px; height:22px; fill:currentColor; }
.player input[type=range] { flex:1; min-width:0; height:44px; margin:0; accent-color:#fff; }
.player .time { font-size:1rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.wm:fullscreen { display:flex; flex-direction:column; justify-content:center; border-radius:0; margin:0; background:#000; }
.wm:-webkit-full-screen { display:flex; flex-direction:column; justify-content:center; border-radius:0; margin:0; background:#000; width:100%; height:100%; }
.wm.full { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000; display:flex; flex-direction:column; justify-content:center;
  border-radius:0; margin:0; background:#000; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.wm:fullscreen video, .wm.full video { flex:1; max-height:none; min-height:0; object-fit:contain; }
.wm:-webkit-full-screen video { flex:1; max-height:none; min-height:0; object-fit:contain; }
.wm:fullscreen::before, .wm:fullscreen::after, .wm.full::before, .wm.full::after { font-size:1.4rem; }
html.noscroll, html.noscroll body { overflow:hidden; }

/* упражнения */
.q { border:0; padding:0; margin:0 0 14px; min-width:0; }
.q legend { font-weight:700; padding:0; margin-bottom:6px; }
.opt { display:flex; gap:10px; align-items:center; min-height:44px; padding:8px 12px; margin:6px 0; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-weight:400; }
.opt:has(input:checked) { border-color:var(--accent); background:var(--bg); }
.opt input { width:20px; height:20px; flex:none; }
input.bad { border-color:var(--danger); background:#fdf3f2; }
input.good { border-color:var(--accent); background:#f1f8f5; }
ol.order { list-style:none; padding:0; margin:8px 0; }
ol.order li { display:flex; gap:8px; align-items:center; padding:6px 8px 6px 12px; margin:6px 0; background:var(--bg); border:1px solid var(--line); border-radius:8px; touch-action:manipulation; }
ol.order li span { flex:1; min-width:0; }
ol.order li button { width:44px; padding:0; flex:none; }
ol.order li.drag { opacity:.4; }
button.next { padding:10px 22px; margin-top:8px; }

/* запись ответа */
.rec { border:1px dashed #b9b2a4; border-radius:10px; padding:12px; margin:10px 0; }
.rec video { max-height:60vh; margin:8px auto; }
.rec .timer { font-variant-numeric:tabular-nums; font-weight:700; }
.rec .live::before { content:"● "; color:var(--danger); }
[hidden] { display:none !important; }

@media (max-width:480px) {
  .sounds { grid-template-columns:repeat(2, 1fr); }
  button.next, .rec button, .stack button { width:100%; }
  h1 { font-size:1.35rem; }
  .words td { padding:8px 6px; } .words td.ipa { white-space:normal; }
  main { padding:12px; } .card { padding:14px; }
}
@media (min-width:1200px) { body { font-size:1.06rem; } }

/* --- меню: сверху на компьютере, снизу на телефоне --- */
nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
nav.bottom { display: none; }
@media (max-width: 640px) {
  nav.top { display: none; }
  body.signed { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  nav.bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card);
    border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  nav.bottom > a, nav.bottom > details, nav.bottom > form { flex: 1 1 0; min-width: 0; margin: 0; }
  nav.bottom > a, nav.bottom summary, nav.bottom > form button { display: flex; align-items: center; justify-content: center; gap: 4px;
    min-height: 56px; padding: 4px 2px; font-size: .82rem; line-height: 1.15; text-align: center; text-decoration: none;
    color: var(--muted); background: none; border: 0; border-radius: 0; width: 100%; }
  nav.bottom > a[aria-current], nav.bottom details[open] > summary { color: var(--accent); font-weight: 700; box-shadow: inset 0 3px 0 var(--accent); }
  nav.bottom b { background: var(--danger); color: #fff; border-radius: 10px; padding: 0 6px; font-size: .75rem; }
  nav.bottom summary { list-style: none; }
  nav.bottom summary::-webkit-details-marker { display: none; }
  nav.bottom .more { position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 220px; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px; }
  nav.bottom .more a, nav.bottom .more button { display: flex; align-items: center; min-height: 48px; padding: 0 14px; width: 100%;
    text-decoration: none; color: var(--ink); background: none; border: 0; font-size: 1rem; text-align: left; border-radius: 8px; }
  nav.bottom .more form { margin: 0; }
  nav.bottom .more a[aria-current] { color: var(--accent); font-weight: 700; }
}

/* --- главная --- */
.btn.resume { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 16px 18px;
  font-size: 1.15rem; margin: 0 0 16px; box-sizing: border-box; }
.btn.resume small { font-size: .9rem; font-weight: 400; opacity: .9; }
.attention { border-left: 5px solid var(--warn); }
.attention ul { margin: 0; padding-left: 1.2em; }
.attention li { margin: 6px 0; }
.intro { border-left: 5px solid var(--accent); }
.intro ol { padding-left: 1.3em; }
.intro li { margin: 6px 0; }

/* --- урок: лента шагов и свёрнутые пройденные шаги --- */
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.steps a, .steps span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px;
  border-radius: 22px; border: 2px solid var(--line); background: var(--card); color: var(--muted); text-decoration: none;
  font-weight: 700; box-sizing: border-box; white-space: nowrap; }
.steps .done { border-color: var(--accent); color: var(--accent); }
.steps .current { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps .wait { border-color: var(--warn); color: var(--warn); }
.steps .locked { border-style: dashed; opacity: .7; }
details.step-done { padding-top: 6px; padding-bottom: 6px; }
details.step-done[open] { padding-bottom: 16px; }
details.step-done > summary { color: var(--ink); justify-content: space-between; gap: 10px; }
details.step-done > summary::after { content: "показать"; color: var(--accent); font-size: .9rem; white-space: nowrap; }
details.step-done[open] > summary::after { content: "свернуть"; }
section.step-current { border: 2px solid var(--accent); }
section.step-wait { border: 2px solid var(--warn); }
section.step-locked { opacity: .75; }

/* --- обсуждения --- */
.fresh { border-left: 5px solid var(--accent); }
.tag.new { background: var(--accent); color: #fff; }

/* --- документы: вид как в скачанном файле --- */
.doc { font-family: Georgia, "Times New Roman", serif; line-height: 1.55; max-width: 46em; }
.doc-title { text-align: center; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 4px; }
.doc-note { text-align: center; color: var(--muted); margin: 0 0 18px; }
.doc-section { font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.doc-clause, .doc-bullet { display: flex; gap: 10px; margin: 6px 0; }
.doc-clause .num { flex: 0 0 2.8em; font-weight: 700; }
.doc-bullet { padding-left: 2.8em; }
.doc-bullet .num { flex: 0 0 1.2em; }
.doc-text { margin: 8px 0; }
.doc span + span { min-width: 0; overflow-wrap: anywhere; }

/* --- ученики: список с поиском --- */
.filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 6px; }
.filter label { flex: 1 1 180px; margin: 0; }
details.student { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; margin: 8px 0; background: var(--card); }
details.student[open] { padding-bottom: 14px; border-color: var(--accent); }
details.student > summary { justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; color: var(--ink); padding: 8px 0; }
details.student .who { display: flex; flex-direction: column; min-width: 0; }
details.student h3 { font-size: 1rem; margin: 14px 0 4px; }
[hidden] { display: none !important; }

/* --- редактор: убрать строку, полоса загрузки --- */
.item { position: relative; }
button.x { flex: 0 0 44px; min-width: 44px; padding: 0; align-self: flex-end; }
.upload { margin-top: 10px; }
progress { display: block; width: 100%; height: 14px; accent-color: var(--accent); }