:root{
  --bg:#f6f4ef;
  --paper:#fffdf8;
  --ink:#1f2430;
  --ink-soft:#5a6274;
  --ink-faint:#8b93a4;
  --line:#e4dfd3;
  --line-soft:#efeae0;
  --accent:#2f5fd0;
  --accent-soft:#e8eefb;
  --green:#1f8a55;
  --green-soft:#e4f4eb;
  --amber:#b5741a;
  --amber-soft:#fbf0dd;
  --red:#c0392b;
  --red-soft:#fbeae7;
  --violet:#6b4fbb;
  --violet-soft:#efeafb;
  --shadow:0 1px 2px rgba(31,36,48,.05),0 6px 18px rgba(31,36,48,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 "Segoe UI","Inter",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Тексты занятий длинные, а экран телефона узкий. Мягкий перенос по
     словарю (его включает html lang="ru") убирает дыры в строках, а
     break-word страхует от длинных формул и адресов, которые иначе
     вылезли бы за край страницы. */
  hyphens:auto;
  overflow-wrap:break-word;
}
/* В коде, формулах и таблицах с числами переносы неуместны. */
.mono,.shape,.gt,.ans,input,textarea,.coin-n,.exam-time{hyphens:none}
button{font:inherit;color:inherit}
input,textarea{font:inherit;color:inherit}

#app{display:flex;min-height:100vh}

/* ── боковая панель ───────────────────────────────────────────── */
.side{
  width:252px;flex:0 0 252px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:#20263a;color:#cfd6e6;
  display:flex;flex-direction:column;
  padding:20px 16px;
}
.side-brand{display:flex;gap:11px;align-items:center;margin-bottom:26px;padding:0 6px}
.side-logo{
  width:46px;height:46px;border-radius:13px;flex:0 0 46px;display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.side-title{font-weight:650;color:#fff;font-size:14.5px;line-height:1.22}
.side-sub{font-size:11.5px;color:#8b95ae;letter-spacing:.2px}

.side-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;
  background:none;border:0;cursor:pointer;text-align:left;
  color:#b9c2d6;font-size:14.5px;width:100%;
}
.nav-item:hover{background:#2a3149;color:#e8edf8}
.nav-item.on{background:#33406b;color:#fff;font-weight:600}
.nav-ico{width:19px;text-align:center;opacity:.85;font-size:15px}
.nav-badge{margin-left:auto;font-size:11px;background:#3d4664;color:#c9d2e6;padding:1px 7px;border-radius:20px}
.nav-item.on .nav-badge{background:#4c5b8e;color:#fff}

.side-progress{margin-top:auto;padding:14px 12px 6px;border-top:1px solid #2f3651}
.sp-row{display:flex;justify-content:space-between;font-size:12px;color:#98a2ba;margin-bottom:7px}
.sp-bar{height:6px;background:#2c3450;border-radius:20px;overflow:hidden}
.sp-fill{height:100%;background:linear-gradient(90deg,#4a7bec,#5fd6a4);border-radius:20px;transition:width .4s}
.sp-note{font-size:11.5px;color:#7d879f;margin-top:9px}

/* ── основная область ─────────────────────────────────────────── */
.main{flex:1;min-width:0;padding:34px 40px 90px;overflow-x:hidden}
.wrap{max-width:840px;margin:0 auto}

.page-kicker{font-size:12px;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:7px}
h1{font-size:29px;line-height:1.2;margin:0 0 8px;letter-spacing:-.3px;font-weight:680}
h2{font-size:20px;margin:34px 0 12px;letter-spacing:-.2px;font-weight:660}
h3{font-size:16px;margin:0 0 8px;font-weight:650}
.lead{color:var(--ink-soft);font-size:16.5px;margin:0 0 22px;max-width:64ch}
p{margin:0 0 12px}

.card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;margin-bottom:14px;
  box-shadow:var(--shadow);
}
.card.tight{padding:15px 18px}
.card.flat{box-shadow:none}

.muted{color:var(--ink-soft)}
.tiny{font-size:13px}
.center{text-align:center}

/* кнопки */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:1px solid transparent;border-radius:10px;
  padding:10px 18px;cursor:pointer;font-weight:600;font-size:14.5px;
  background:var(--accent);color:#fff;transition:filter .15s,transform .05s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:#faf8f3}
.btn.soft{background:var(--accent-soft);color:var(--accent);border-color:#d3e0f8}
.btn.warn{background:var(--amber-soft);color:var(--amber);border-color:#f0dfc0}
.btn.go{background:var(--green);color:#fff}
.btn.sm{padding:7px 13px;font-size:13.5px;border-radius:9px}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ── карточки занятий ─────────────────────────────────────────── */
.lesson-grid{display:flex;flex-direction:column;gap:11px}
.lesson{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .15s,transform .1s;
}
.lesson:hover{border-color:#c9d6f0;transform:translateY(-1px)}
.lesson.locked{opacity:.6;cursor:default;box-shadow:none}
.lesson.locked:hover{transform:none;border-color:var(--line)}
.lesson.done{border-color:#cfe7da;background:#fbfefc}
.l-day{
  flex:0 0 74px;text-align:center;padding-top:2px;
}
.l-day b{display:block;font-size:14px}
.l-day span{font-size:12px;color:var(--ink-faint)}
.l-body{flex:1;min-width:0}
.l-title{font-weight:650;font-size:16.5px;margin-bottom:2px}
.l-sub{font-size:13.5px;color:var(--ink-soft)}
.l-meta{display:flex;gap:12px;margin-top:8px;font-size:12.5px;color:var(--ink-faint);flex-wrap:wrap}
.l-state{flex:0 0 auto;align-self:center}

.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.grey{background:#eeeae1;color:#7b8294}
.pill.blue{background:var(--accent-soft);color:var(--accent)}
.pill.green{background:var(--green-soft);color:var(--green)}
.pill.amber{background:var(--amber-soft);color:var(--amber)}
.pill.violet{background:var(--violet-soft);color:var(--violet)}
.pill.red{background:var(--red-soft);color:var(--red)}

/* ── подготовка к занятию ─────────────────────────────────────── */
.prep{background:#fffaf0;border:1px solid #f0e3c8;border-radius:14px;padding:20px 22px;margin-bottom:16px}
.prep h3{display:flex;align-items:center;gap:9px;color:#8a6516}
.prep ul{margin:12px 0 0;padding-left:0;list-style:none}
.prep li{display:flex;gap:10px;padding:6px 0;font-size:15px;border-bottom:1px dashed #efe2c8}
.prep li:last-child{border-bottom:0}
.prep li i{font-style:normal;color:#c69a3e}

/* ── текстовые блоки урока ────────────────────────────────────── */
.talk{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow)}
.talk p:last-child{margin-bottom:0}

.numlist{counter-reset:n;list-style:none;padding:0;margin:10px 0 0}
.numlist li{counter-increment:n;position:relative;padding:7px 0 7px 34px;font-size:15px;border-bottom:1px solid var(--line-soft)}
.numlist li:last-child{border-bottom:0}
.numlist li::before{
  content:counter(n);position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

.techcard{background:#f4f1fb;border:1px solid #ded5f4;border-radius:14px;padding:18px 22px;margin:16px 0}
.techcard h3{color:var(--violet)}
.techcard .numlist li::before{background:#e3daf8;color:var(--violet)}
.techcard .numlist li{border-bottom-color:#e6e0f5}

/* ── задачи ───────────────────────────────────────────────────── */
.task{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  margin-bottom:11px;box-shadow:var(--shadow);overflow:hidden;
}
.task.open{border-color:#c3d3f2}
.task-head{display:flex;gap:13px;align-items:center;padding:14px 18px;cursor:pointer}
.task-head:hover{background:#fbf9f4}
.task-id{
  flex:0 0 auto;min-width:38px;height:30px;padding:0 8px;border-radius:8px;
  background:#eef1f7;color:#4a5468;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.task.s-self .task-id{background:var(--green-soft);color:var(--green)}
.task.s-hint .task-id{background:var(--accent-soft);color:var(--accent)}
.task.s-walked .task-id{background:var(--amber-soft);color:var(--amber)}
.task-brief{flex:1;min-width:0;font-size:14.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task.open .task-brief{white-space:normal;color:var(--ink)}
.task-body{padding:4px 18px 20px;border-top:1px solid var(--line-soft)}
.task-text{font-size:16.5px;line-height:1.6;margin:16px 0 6px}
.task-note{font-size:13.5px;color:var(--ink-soft);background:#f4f2ec;border-radius:8px;padding:8px 12px;margin-bottom:6px;display:inline-block}
.star{color:#d99a12}

.answer-row{display:flex;gap:9px;align-items:center;margin-top:16px;flex-wrap:wrap}
.answer-row label{font-size:14px;color:var(--ink-soft)}
.ans{
  width:130px;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;font-size:17px;font-weight:600;text-align:center;
}
.ans:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.fb{border-radius:11px;padding:13px 16px;margin-top:14px;font-size:15px;line-height:1.55}
.fb.ok{background:var(--green-soft);border:1px solid #c3e6d3;color:#155f3c}
.fb.no{background:var(--amber-soft);border:1px solid #f0dfc0;color:#7d5310}
.fb.bad{background:var(--red-soft);border:1px solid #f2cfc9;color:#8c2c20}
.fb b{font-weight:670}

.hint{background:#f2f6fd;border:1px solid #d6e2f8;border-left:3px solid var(--accent);
  border-radius:10px;padding:13px 16px;margin-top:10px;font-size:15px}
.hint-n{font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:4px}

.think{background:#fffaf0;border:1px dashed #e2ceA0;border-radius:11px;padding:16px;margin-top:12px;text-align:center}
.think-t{font-size:32px;font-weight:700;color:var(--amber);letter-spacing:1px;font-variant-numeric:tabular-nums}
.think-q{font-size:15px;color:#7d5310;margin-top:6px}

.step{border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-top:10px;background:#fff}
.step-q{font-weight:600;font-size:15.5px;margin-bottom:2px}
.step-a{font-size:15px;color:var(--ink-soft);margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft)}
.step.done{background:#fcfbf7}
.step-i{font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:5px}

.idea{background:#f4f1fb;border:1px solid #ded5f4;border-radius:11px;padding:13px 16px;margin-top:12px;font-size:15px}
.idea .step-i{color:var(--violet)}
.warnbox{background:#fbf0dd;border:1px solid #f0dfc0;border-radius:11px;padding:12px 16px;margin-top:10px;font-size:14.5px;color:#7d5310}

/* сетка-черновик */
.gridwrap{margin-top:14px}
.gridwrap .gt{border-collapse:collapse;background:#fff;font-size:14px}
.gridwrap .gt th,.gridwrap .gt td{border:1px solid #d7d2c5;padding:0}
.gridwrap .gt th{background:#f4f2ec;font-weight:600;font-size:12.5px;padding:7px 10px;color:var(--ink-soft)}
.gridwrap .gt th.rh{text-align:right;min-width:96px}
.gcell{width:62px;height:40px;border:0;background:none;cursor:pointer;font-size:21px;font-weight:700;color:var(--ink-faint)}
.gcell:hover{background:#f6f4ee}
.gcell.plus{color:var(--green);background:var(--green-soft)}
.gcell.minus{color:var(--red)}
.grid-help{font-size:12.5px;color:var(--ink-faint);margin-top:7px}

/* таблица перебора (правда/ложь) */
.tt{border-collapse:collapse;margin-top:12px;font-size:13.5px;background:#fff;width:100%}
.tt th,.tt td{border:1px solid var(--line);padding:8px 10px;text-align:center}
.tt th{background:#f4f2ec;font-weight:600;font-size:12.5px;color:var(--ink-soft)}
/* Левый столбец — короткая метка («6—8 из 8», «Что сделано»). Без нижней
   границы ширины он на телефоне схлопывается до одной буквы в строке. */
.tt td.nm{text-align:left;font-weight:600;min-width:92px}
.tt .t{color:var(--green);font-weight:600}
.tt .f{color:var(--red)}
.tt tr.hit td{background:var(--green-soft)}

/* ── экзамен ──────────────────────────────────────────────────── */
.exam-bar{
  position:sticky;top:0;z-index:5;margin:0 -40px 20px;padding:14px 40px;
  background:#20263a;color:#fff;display:flex;align-items:center;gap:18px;
}
.exam-time{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.exam-time.low{color:#ffb4a8}
.exam-lbl{font-size:12.5px;color:#9aa4bd;line-height:1.3}
.exam-bar .btn{margin-left:auto}
.exam-task{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px 20px;margin-bottom:11px;box-shadow:var(--shadow)}
.exam-task .n{font-size:12.5px;color:var(--ink-faint);font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px}
.exam-task p{font-size:16px;line-height:1.6}

.scoreboard{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.sc{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:14px 18px;min-width:126px;box-shadow:var(--shadow)}
.sc b{display:block;font-size:27px;line-height:1.15;font-weight:700}
.sc span{font-size:12.5px;color:var(--ink-faint)}

/* ── прогресс ─────────────────────────────────────────────────── */
.mrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.mrow:last-child{border-bottom:0}
.mname{flex:0 0 236px;font-size:15px;font-weight:600}
.mname small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-faint)}
.mbar{flex:1;height:9px;background:#eae5da;border-radius:20px;overflow:hidden;min-width:80px}
.mfill{height:100%;border-radius:20px;transition:width .5s}
.mlvl{flex:0 0 auto;min-width:106px;text-align:right}

.check{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.check:last-child{border-bottom:0}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.check.on{color:var(--ink-soft)}
.check .cd{flex:1}

textarea.reflect{
  width:100%;min-height:76px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;resize:vertical;font-size:15px;line-height:1.5;
}
textarea.reflect:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.namein{padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;width:250px;font-size:15px}
.namein:focus{outline:0;border-color:var(--accent)}

.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 15px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:14px}
.tab:hover{background:#faf8f3}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.divider{height:1px;background:var(--line);margin:26px 0}
.backlink{background:none;border:0;color:var(--accent);cursor:pointer;font-size:14px;padding:0;margin-bottom:16px;font-weight:600}
.backlink:hover{text-decoration:underline}

.stat-note{font-size:13.5px;color:var(--ink-faint);margin-top:6px}
.kv{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv b{flex:0 0 186px;font-weight:600;color:var(--ink-soft)}


/* ── профессор Пи: наставник ──────────────────────────────────── */
.owl{display:block;width:76px;flex:0 0 76px;height:auto;user-select:none;-webkit-user-drag:none}
.owl.lg{width:136px;flex:0 0 136px}
.owl.sm{width:52px;flex:0 0 52px}
.owl.floatl{float:left;margin:0 14px 6px 0}

.say{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.say .bubble{
  position:relative;flex:1;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;box-shadow:var(--shadow);
}
.say .bubble::before{
  content:"";position:absolute;left:-8px;top:30px;width:15px;height:15px;
  background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);border-radius:0 0 0 3px;
}
.say .bubble p:last-child{margin-bottom:0}
.say.ok .bubble{background:var(--green-soft);border-color:#c3e6d3;color:#155f3c}
.say.ok .bubble::before{border-color:#c3e6d3}
.say.no .bubble{background:var(--amber-soft);border-color:#f0dfc0;color:#7d5310}
.say.no .bubble::before{border-color:#f0dfc0}
.say.bad .bubble{background:var(--red-soft);border-color:#f2cfc9;color:#8c2c20}
.say.bad .bubble::before{border-color:#f2cfc9}
.say.hintsay .bubble{background:#f2f6fd;border-color:#d6e2f8}
.say.hintsay .bubble::before{border-color:#d6e2f8}
.say.idea .bubble{background:#f4f1fb;border-color:#ded5f4}
.say.idea .bubble::before{border-color:#ded5f4}

.card.hero{display:flex;gap:20px;align-items:center}
.hero-txt{flex:1;min-width:0}
.hero-txt h3{font-size:19px;margin-bottom:6px}
.hero-txt p:last-child{margin-bottom:0}
.card.twin{overflow:hidden}

.side-owl{
  display:flex;gap:11px;align-items:center;
  background:#2a3149;border-radius:12px;padding:9px 11px;margin-bottom:14px;
}
.side-owl .owl{width:46px;flex:0 0 46px}
.side-owl b{display:block;color:#fff;font-size:13px;line-height:1.25}
.side-owl span{font-size:11.5px;color:#8b95ae}

/* Карточка соседа по парте в боковом меню: тот же размер, что у наставника,
   но теплее по тону — два голоса не должны выглядеть одинаково. */
.side-ham{background:#3a3040}
.side-ham .ham-pic{width:46px;flex:0 0 46px}
.side-ham b{display:block;color:#fff;font-size:13px;line-height:1.25}
.side-ham span{font-size:11.5px;color:#c49a68}

.think{display:flex;flex-direction:column;align-items:center}
.think .owl{margin-bottom:2px}

.say.hintsay .owl{width:58px;flex:0 0 58px}


/* ── Хомяк Байт: сосед по парте ────────────────────────────────
   Зеркальное облачко: наставник говорит слева, сосед по парте —
   справа. Разный цвет и разная сторона нужны затем, чтобы ребёнок
   ни на секунду не спутал, кто из них говорит. */
.ham-pic{display:block;width:78px;flex:0 0 78px;height:auto;user-select:none;-webkit-user-drag:none}
.say.ham{flex-direction:row-reverse}
.say.ham .bubble{background:#fff6ea;border-color:#f2ddbf}
.say.ham .bubble::before{
  left:auto;right:-8px;
  border-left:0;border-bottom:0;
  border-right:1px solid #f2ddbf;border-top:1px solid #f2ddbf;
  border-radius:0 3px 0 0;
}
.ham-name{
  font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;
  color:#b5813a;font-weight:700;margin-bottom:4px;
}


/* ── иконки состояния занятий и задач ─────────────────────────── */
.l-ico{width:64px;flex:0 0 64px;height:auto;align-self:center}
.lesson.locked .l-ico{filter:grayscale(.9);opacity:.45}
.lesson{align-items:center}
.l-meta span b{font-weight:650;color:var(--ink-soft)}
.t-ico{width:44px;flex:0 0 44px;height:auto}
.kv.ok{align-items:center}
.kv.ok .t-ico{margin-right:2px}

.kv.li b{flex:0 0 16px;text-align:center;color:var(--ink-faint)}

/* ── день разгрузки в плане недели ────────────────────────────── */
.restday{
  display:flex;gap:16px;align-items:flex-start;
  background:#f4f2ec;border:1px dashed var(--line);border-radius:14px;
  padding:14px 18px;
}
.rd-day{flex:0 0 92px;text-align:center;padding-top:2px}
.rd-day b{display:block;font-size:13.5px;color:var(--ink-soft)}
.rd-day span{font-size:12px;color:var(--ink-faint)}
.rd-title{font-weight:650;font-size:15px;margin-bottom:3px}
.rd-text{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* ── переключатель недель ─────────────────────────────────────── */
.tab.off{opacity:.5;cursor:not-allowed}
.tab.off:hover{background:#fff}

/* ── таблица «умножать или складывать» ────────────────────────── */
.tt.rule td{text-align:left}
.tt.rule td:last-child{text-align:center;width:130px;color:var(--violet)}

/* ── главный вопрос недели после верного ответа ───────────────── */
.challenge{
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(21,95,60,.22);
  font-size:14.5px;
}

/* ── фигуры на клетчатой бумаге ──────────────────────────────── */
.shapewrap{margin:14px 0}
.shape{display:grid;gap:0;width:max-content;
  background:#fff;padding:10px;border:1px solid var(--line);border-radius:10px}
.shape .sq{width:22px;height:22px;border:1px solid #e0dccf;background:#fff}
.shape .sq.on{background:#cfe0fb;border-color:#9bb8ea}
.shape-help{font-size:12.5px;color:var(--ink-faint);margin-top:8px;max-width:52ch}

/* ── π-коины и награды ───────────────────────────────────────── */
.side-wallet{
  display:flex;align-items:center;gap:10px;width:100%;
  background:#2b3350;border:1px solid #3a4468;border-radius:11px;
  padding:9px 11px;margin-bottom:12px;cursor:pointer;text-align:left;color:#e8edf8;
}
.side-wallet:hover{background:#333d60}
.side-wallet img{width:30px;height:30px;flex:0 0 30px}
.side-wallet b{display:block;font-size:13px;color:#ffd75e;line-height:1.25}
.side-wallet span{font-size:11.5px;color:#93a0bd}

.wallet{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,#3b2f72,#5a3fa8);
  color:#fff;border-radius:16px;padding:22px 24px;margin:18px 0 6px;
}
.wallet-pic{width:128px;height:128px;flex:0 0 128px}
.wallet-txt{flex:1;min-width:220px}
.wallet-sum{font-size:42px;font-weight:700;line-height:1;color:#ffd75e}
.wallet-sum span{font-size:24px;opacity:.8}
.wallet-rank{font-size:17px;font-weight:650;margin:6px 0 4px}
.wallet .muted{color:#d3cbf0}
.sp-bar.light{height:7px;background:rgba(255,255,255,.22);border-radius:20px;overflow:hidden;margin-top:14px}
.sp-bar.light .sp-fill{background:linear-gradient(90deg,#ffd75e,#ffb020)}

.coin-n{color:var(--amber);font-weight:650;white-space:nowrap}
.coin-line{
  display:flex;align-items:center;gap:9px;margin-top:11px;
  background:#fff6e0;border:1px solid #f0dcae;border-radius:10px;padding:9px 12px;
}
.coin-line img{width:28px;height:28px;flex:0 0 28px}
.coin-line b{color:#a8710f}
.coin-line span{color:var(--ink-soft);font-size:13.5px}

.coin-toast{
  position:fixed;right:20px;bottom:20px;z-index:40;
  display:flex;align-items:center;gap:11px;
  background:#20263a;color:#fff;border-radius:13px;padding:12px 17px 12px 13px;
  box-shadow:0 8px 28px rgba(31,36,48,.32);
  animation:coinpop .35s ease-out;
}
.coin-toast img{width:36px;height:36px;flex:0 0 36px}
.coin-toast b{display:block;color:#ffd75e;font-size:16px}
.coin-toast span{font-size:12.5px;color:#aeb8cf}
@keyframes coinpop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* ── о программе ─────────────────────────────────────────────── */
.about-hero{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.about-logo{width:104px;height:104px;flex:0 0 104px;border-radius:24px;box-shadow:var(--shadow)}
.mail{font-size:17px;font-weight:600;margin:4px 0 10px}
.mail a{color:var(--accent);text-decoration:none;word-break:break-all}
.mail a:hover{text-decoration:underline}

/* ── адаптив: компьютер, планшет, смартфон ───────────────────── */

/* Шапка и затемнение существуют только на узких экранах. */
.topbar,.scrim{display:none}

/* Планшет в альбомной ориентации и небольшие ноутбуки:
   панель сужается, поля основной области уменьшаются. */
@media (max-width:1180px){
  .side{width:214px;flex:0 0 214px;padding:16px 12px}
  .side-brand{margin-bottom:18px}
  .main{padding:28px 26px 80px}
  .wrap{max-width:100%}
}

/* Планшет и всё, что уже: боковая панель уезжает в выдвижной ящик. */
@media (max-width:900px){
  #app{display:block}
  .topbar{
    display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:30;
    background:#20263a;color:#fff;
    padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
  }
  .burger{background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:4px 6px}
  .topbar-logo{width:30px;height:30px;border-radius:8px}
  .topbar-title{font-weight:650;font-size:15px;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-coins{
    display:flex;align-items:center;gap:6px;background:#2b3350;border:1px solid #3a4468;
    color:#ffd75e;font-weight:650;font-size:13.5px;border-radius:20px;padding:5px 11px 5px 6px;cursor:pointer;
  }
  .topbar-coins img{width:20px;height:20px}

  .side{
    position:fixed;top:0;left:0;bottom:0;z-index:50;
    width:264px;flex:0 0 264px;height:100%;
    transform:translateX(-100%);transition:transform .22s ease;
    padding:calc(18px + env(safe-area-inset-top,0px)) 14px 18px;
  }
  body.nav-open .side{transform:none}
  body.nav-open .scrim{
    display:block;position:fixed;inset:0;z-index:45;background:rgba(18,22,34,.5);
  }
  body.nav-open{overflow:hidden}

  .main{padding:22px 18px calc(70px + env(safe-area-inset-bottom,0px))}
  h1{font-size:25px}
  h2{font-size:18.5px;margin-top:28px}
  .lead{font-size:15.5px}
  .card,.techcard,.prep{padding:16px 17px}
  .wallet{gap:16px;padding:18px}
  .wallet-pic{width:96px;height:96px;flex:0 0 96px}
}

/* Смартфон. Всё, что на компьютере стоит в строку, здесь встаёт в столбец:
   строки шире экрана — главная причина, по которой страницу приходится
   таскать вбок, а на телефоне это мучительно. */
@media (max-width:560px){
  body{font-size:15.5px}
  .main{padding:18px 14px calc(60px + env(safe-area-inset-bottom,0px))}
  h1{font-size:22px}
  h2{font-size:17.5px;margin-top:24px}
  .lead{font-size:15px}
  .card,.techcard,.prep,.step{padding:14px 15px;border-radius:12px}

  /* картинки наставника на телефоне занимали треть экрана */
  .owl{width:52px;flex:0 0 52px}
  .ham-pic{width:56px;flex:0 0 56px}
  .owl.lg{width:76px;flex:0 0 76px}
  .owl.sm{width:42px;flex:0 0 42px}
  .say{gap:9px}
  .say .bubble{padding:12px 14px;font-size:14.5px}
  .card.hero{flex-direction:column;align-items:flex-start;gap:12px}

  .lesson{flex-wrap:wrap;align-items:flex-start;padding:13px 14px}
  .l-state{width:100%;margin-top:4px}
  .l-meta{flex-wrap:wrap;gap:6px 12px}

  .task-head{flex-wrap:wrap;gap:8px 11px;padding:12px 14px}
  .task-brief{flex-basis:100%;order:3}

  /* поле ответа должно быть на всю ширину, а кнопка — под ним:
     на узком экране они иначе сжимаются в нечитаемые огрызки */
  .answer-row{gap:8px}
  .answer-row .ans,.namein{width:100%;flex:1 1 100%}
  .answer-row .btn{width:100%}
  .btn-row .btn{flex:1 1 auto}

  .scoreboard{gap:9px}
  .scoreboard .sc{flex:1 1 42%;min-width:0}
  .tabs{gap:6px}
  .tab{font-size:13px;padding:7px 11px}

  .kv{flex-direction:column;gap:2px}
  .kv b{flex:none}
  .kv.li{flex-direction:row;gap:8px}
  .kv.ok{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}

  .mrow{flex-wrap:wrap;gap:8px}
  .mrow .mname{flex:1 1 100%}
  .mrow .mbar{flex:1 1 60%}

  .exam-bar{flex-wrap:wrap;gap:12px;position:sticky;top:52px;z-index:20}
  .exam-bar .btn{margin-left:0;width:100%}

  .about-hero{gap:14px}
  .about-logo{width:72px;height:72px;flex:0 0 72px;border-radius:18px}
  .wallet{flex-direction:column;align-items:flex-start;text-align:left}
  .wallet-txt{min-width:0}
  .wallet-sum{font-size:36px}
  .coin-toast{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}

  .restday{flex-direction:column;gap:8px}
  .shape .sq{width:18px;height:18px}
}

/* Клетчатые поля и таблицы с числами не ужимаются — их прокручивают вбок
   внутри собственной рамки, а не всей страницей. */
.gt{display:block;overflow-x:auto;white-space:nowrap}
.gridwrap,.shapewrap{overflow-x:auto}

/* А вот в таблицах с текстом — критерии, приёмы, «как читать результат» —
   ячейка держит целое предложение. Раньше она вместе со всеми уезжала
   в одну строку под горизонтальную прокрутку, и на телефоне читать её
   было нельзя. Теперь такие таблицы переносят текст по словам, а у длинных
   слов срабатывает мягкий перенос: разметка html lang="ru" даёт браузеру
   словарь переносов. Прокрутка вбок остаётся запасным вариантом — на случай
   таблицы, которая не помещается даже после переносов. */
.tt{display:block;overflow-x:auto;white-space:normal;
  overflow-wrap:break-word;hyphens:auto}
@media (min-width:561px){
  .tt{display:table}
}

/* Печать: боковая панель и кнопки на бумаге не нужны. */
@media print{
  .side,.topbar,.scrim,.btn,.btn-row,.coin-toast{display:none !important}
  .main{padding:0}
  body{background:#fff}
}

/* ── экран входа ─────────────────────────────────────────────── */
body.auth-on{background:#20263a}
.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(160deg,#20263a 0%,#2c2a52 100%);
}
.auth-card{
  width:100%;max-width:430px;background:var(--paper);
  border-radius:18px;padding:30px 30px 24px;box-shadow:0 16px 48px rgba(0,0,0,.34);
}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.auth-brand img{width:46px;height:46px;border-radius:13px;flex:0 0 46px}
.auth-brand b{display:block;font-size:15px;line-height:1.25}
.auth-brand span{font-size:12px;color:var(--ink-faint)}
.auth-card h2{font-size:21px;margin:0 0 6px}
.auth-lead{color:var(--ink-soft);font-size:14px;margin-bottom:18px}
.fld{display:block;margin-bottom:13px}
.fld > span{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px;font-weight:600}
.fld input,.fld select{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;font-size:15px;
}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--accent)}
.btn.wide{width:100%;justify-content:center;margin-top:6px}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13.5px;padding:4px 0}
.linkbtn:hover{text-decoration:underline}
.auth-links{margin-top:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.auth-msg{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;line-height:1.45}
.auth-msg.err{background:var(--red-soft);border:1px solid #f2cfc9;color:#8c2c20}
.auth-msg.ok{background:var(--green-soft);border:1px solid #c3e6d3;color:#155f3c}
.auth-foot{margin-top:20px;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-faint)}
.auth-foot a{color:var(--accent);text-decoration:none;word-break:break-all}

/* ── админ-консоль ───────────────────────────────────────────── */
.form2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:12px}
.form2 .fld.wide2{grid-column:1 / -1}
@media (max-width:640px){ .form2{grid-template-columns:1fr} }

.mono{font-family:"Consolas","SF Mono",ui-monospace,monospace;font-size:13.5px}
.mono.big{font-size:19px;font-weight:700;letter-spacing:.5px;color:var(--accent)}
.card.cred{background:#f2f6fd;border-color:#d6e2f8}
.okbox{background:var(--green-soft);border:1px solid #c3e6d3;color:#155f3c;
  border-radius:11px;padding:12px 15px;margin:14px 0;font-size:14px}

.urow{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.urow:hover{background:#fbf9f4}
.urow.off{opacity:.58}
.urow-main{flex:1;min-width:0}
.urow-name{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:15px}
.urow-sub{font-size:12.5px;color:var(--ink-faint);margin-top:3px}
.urow-act{color:var(--ink-faint);font-size:12px;padding:0 4px}
.uedit{padding:4px 0 16px;border-bottom:1px solid var(--line-soft)}
.tablewrap{overflow-x:auto}
.tt.stat{min-width:720px;white-space:nowrap}

/* ── кабинет родителя ────────────────────────────────────────── */
.chartwrap{margin-top:4px}
.chart{width:100%;height:auto;display:block}
.chart-legend{display:flex;gap:7px 16px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--ink-faint);margin-top:10px}
.chart-legend .lg{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:-10px}
.chart-legend .lg.green{background:#2fa872}
.chart-legend .lg.blue{background:#4a7bec}
.chart-legend .lg.amber{background:#e2a844}
.chart-legend .lg.none{background:#e4dfd3}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{
  display:inline-block;padding:3px 9px;border-radius:7px;font-size:12.5px;
  font-weight:600;border:1px solid;cursor:default;
}
.chip.ok{background:var(--green-soft);border-color:#c3e6d3;color:#155f3c}
.chip.warn{background:var(--amber-soft);border-color:#f0dfc0;color:#7d5310}
.chip.bad{background:var(--red-soft);border-color:#f2cfc9;color:#8c2c20}

.rec{padding:13px 0;border-bottom:1px solid var(--line-soft)}
.rec:last-child{border-bottom:0}
.rec-t{font-weight:650;font-size:15.5px;margin-bottom:4px}
.rec-b{color:var(--ink-soft);font-size:14.5px;line-height:1.55}

.side-user{margin-top:14px;padding-top:12px;border-top:1px solid #2f3651;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.su-name{font-size:12.5px;color:#98a2ba;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .linkbtn{color:#8fa6dd;font-size:12.5px;flex:0 0 auto}

/* #app объявлен как display:flex, и это правило перебивало браузерное
   [hidden]{display:none} — под экраном входа оставалась пустая страница
   во весь рост и лишняя полоса прокрутки. */
[hidden]{display:none !important}

/* Адрес почты переносим целиком, а не посреди слова. */
.auth-foot a,.mail a{word-break:normal;overflow-wrap:anywhere}

/* ── предложение поставить ярлык ──────────────────────────────── */
.install-banner{
  position:fixed;z-index:38;
  left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(560px, calc(100vw - 28px));
  display:flex;gap:13px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:15px;
  padding:15px 16px;box-shadow:0 10px 34px rgba(31,36,48,.2);
  animation:ibrise .28s ease-out;
}
@keyframes ibrise{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.ib-icon{width:46px;height:46px;flex:0 0 46px;border-radius:12px}
.ib-body{flex:1;min-width:0}
.ib-title{font-weight:650;font-size:15.5px;margin-bottom:3px}
.ib-text{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.ib-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:11px}
.ib-steps{margin:12px 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.ib-steps li{margin-bottom:5px}
.ib-note{margin-top:10px;background:var(--amber-soft);border:1px solid #f0dfc0;color:#7d5310;
  border-radius:9px;padding:9px 11px;font-size:12.5px;line-height:1.45}
.ib-close{
  background:none;border:0;color:var(--ink-faint);font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px;flex:0 0 auto;
}
.ib-close:hover{color:var(--ink)}

/* Когда плашка на экране, всплывашка с наградой встаёт над ней,
   а не поверх — они обе внизу справа. */
.install-banner ~ .coin-toast{bottom:calc(110px + env(safe-area-inset-bottom,0px))}

@media (max-width:560px){
  .install-banner{
    left:10px;right:10px;width:auto;transform:none;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    padding:13px 14px;
  }
  @keyframes ibrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .ib-icon{width:38px;height:38px;flex:0 0 38px}
  .ib-row{gap:10px}
  .install-banner ~ .coin-toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* Подсказка под полем формы — короткое пояснение, зачем оно нужно. */
.fld-hint{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:5px;line-height:1.4}

/* ══════════════════ блоки курса 7 класса ══════════════════ */

/* ── теоретический минимум ────────────────────────────────────── */
.theory{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow);
}
.theory h3{margin:0}
.th-sec{padding-top:14px;margin-top:14px;border-top:1px solid var(--line-soft)}
.th-sec h4{margin:0 0 8px;font-size:14.5px;font-weight:660;color:var(--violet);
  letter-spacing:.2px;text-transform:uppercase}
.th-sec ul{margin:0;padding-left:20px}
.th-sec li{margin-bottom:7px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.th-sec li:last-child{margin-bottom:0}

/* ── задача на оформление ─────────────────────────────────────── */
.wr-task{font-size:17px;line-height:1.6;font-weight:600;margin-bottom:10px}
textarea.wr-text{min-height:230px;font-family:"Georgia","Segoe UI",serif;line-height:1.7}
.card.sample{background:#f4f1fb;border-color:#ded5f4}
.card.sample p{font-size:15.5px;line-height:1.65}
.sample-ans{
  display:inline-block;background:var(--violet);color:#fff;font-weight:650;
  padding:4px 14px;border-radius:20px;margin-bottom:12px;font-size:14px;
}
.tt.crit td{text-align:left}
.tt.crit td:last-child{text-align:center;width:90px}

/* ── журнал ошибок ────────────────────────────────────────────── */
.jrn{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.jrn-head,.jrn-row{display:grid;grid-template-columns:1fr 2fr 2fr 1fr}
.jrn-head{background:#f4f2ec;font-size:12px;font-weight:650;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.5px}
.jrn-head div{padding:8px 10px;border-right:1px solid var(--line)}
.jrn-head div:last-child{border-right:0}
.jrn-row textarea{
  border:0;border-top:1px solid var(--line);border-right:1px solid var(--line);
  padding:9px 10px;min-height:58px;resize:vertical;font-size:14px;
  background:#fff;width:100%;display:block;
}
.jrn-row textarea:last-child{border-right:0}
.jrn-row textarea:focus{outline:0;background:#f7faff}

/* На телефоне четыре колонки журнала превращаются в четыре строки:
   в столбик шириной с палец писать нечего. Подписи столбцов при этом
   уходят, поэтому каждое поле подписывает себя само через placeholder. */
@media (max-width:700px){
  .jrn-head{display:none}
  .jrn-row{grid-template-columns:1fr;border-top:1px solid var(--line)}
  .jrn-row:first-child{border-top:0}
  .jrn-row textarea{border-right:0}
  .jrn-row + .jrn-row{margin-top:0}
  textarea.wr-text{min-height:180px}
}