/* Кабинеты сайта: вход, учитель, ученик (задача 19; новый вид — задача 20; расписание — задача 21; живой сайт — задача 22).
   Подключается после engine/themes/brand.css и engine/engine.css — оттуда кнопки (.btn, .iconbtn), шапка (.bar), поля, .wrap.
   Цвета, шрифты, радиусы — только переменные темы (brand.css), своих цветов здесь нет.
   Сайт всегда светлый (site.js ставит data-theme="light"), узор темы на страницах сайта убран (body.site-page). */

/* ---------- основа страниц сайта ---------- */
:root body.site-page { background-image: none; background-color: var(--c-bg) }
:root .site-page .wrap { box-shadow: none }
.site-page .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em }
.site { padding-top: var(--sp-5); padding-bottom: var(--sp-7) }
.site-page h1 { font: var(--fw-heavy) clamp(30px, 6vw, 44px)/1.05 var(--font-display); letter-spacing: -.03em }
.site-page h2 { font: var(--fw-bold) 22px/1.2 var(--font-display); letter-spacing: -.01em; margin-top: var(--sp-6) }
.site-page .lead { color: var(--c-muted); font-weight: var(--fw-semi); margin-top: 8px; font-size: 17px }
.muted { color: var(--c-muted) }
.small { font-size: var(--fs-small) }
.nowrap { white-space: nowrap }
.site-page code { font-size: .92em; background: var(--c-surface-2); padding: 1px 6px; border-radius: var(--r-xs) }

/* шапка (вход, ученик) */
.s-bar { background: var(--c-surface) }
.s-page .s-bar .bar-in { max-width: 1080px }
.bar-in .s-brand { font: var(--fw-heavy) 17px/1.1 var(--font-display); color: var(--c-ink); text-decoration: none; display: flex; align-items: center; gap: var(--sp-2); min-width: 0 }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-marker); box-shadow: inset 0 0 0 2px var(--c-ink); flex: none; display: inline-block }
.s-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.bar-in .grow { flex: 1 }

/* плашки */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-tiny); font-weight: var(--fw-bold); background: var(--c-surface-2); color: var(--c-ink); white-space: nowrap; line-height: 1.5 }
.tag svg.ico { width: 13px; height: 13px; stroke-width: 3 }
.tag.done { background: var(--c-good-bg); color: var(--c-good) }
.tag.going { background: var(--c-accent-soft); color: var(--c-ink) }
.tag.hw { background: var(--c-homework-bg); color: var(--c-homework) }
.honest { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-muted); border-left: 3px solid var(--c-marker); padding-left: var(--sp-3); max-width: 70ch }
.warn { margin-top: var(--sp-3); padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-accent-soft); color: var(--c-ink); font-weight: var(--fw-bold); font-size: var(--fs-small); box-shadow: inset 4px 0 0 var(--c-marker) }

/* поля формы */
.field { display: grid; gap: 6px; margin-top: var(--sp-4) }
.field > span { font-weight: var(--fw-bold); font-size: var(--fs-small) }
.field input, .sel, .mini input, .blk-note textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); min-height: 48px }
.field input:focus, .sel:focus, .mini input:focus, .blk-note textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-marker) }
.pass { position: relative }
.pass input { padding-right: 52px }
.pass .iconbtn { position: absolute; right: 4px; top: 4px; border: 0; background: transparent; color: var(--c-muted) }
.form-err { margin-top: var(--sp-3); padding: 10px 14px; border-radius: var(--r-md); background: var(--c-bad-bg); color: var(--c-bad); font-weight: var(--fw-bold); font-size: var(--fs-small) }
.form-ok { margin-top: var(--sp-3); padding: 10px 14px; border-radius: var(--r-md); background: var(--c-good-bg); color: var(--c-good); font-weight: var(--fw-bold); font-size: var(--fs-small) }
.btn.wide { width: 100%; justify-content: center; margin-top: var(--sp-5); min-height: 52px }
.site-page a.btn { text-decoration: none; color: inherit }
.site-page a.btn.primary { color: var(--t-sig-ink) }
.btn.yel { background: var(--c-marker); color: var(--c-marker-ink); border-color: var(--c-marker); font-weight: var(--fw-bold) }
.site-page a.btn.yel { color: var(--c-marker-ink) }
.btn.yel:hover:not(:disabled) { background: var(--c-marker); filter: brightness(1.05) }
.btn.ghost-w { background: transparent; color: var(--t-plate-ink); border-color: currentColor; font-weight: var(--fw-bold) }
.btn.ghost-w:hover:not(:disabled) { background: var(--c-accent-tint) }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; font-weight: var(--fw-semi); font-size: var(--fs-small); color: var(--c-muted); cursor: pointer }
.linkbtn:hover { color: var(--c-ink) }
.ava { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--c-marker); color: var(--c-marker-ink); box-shadow: inset 0 0 0 2px var(--c-ink); font: var(--fw-heavy) 17px/1 var(--font-display) }
.ava.xl { width: 72px; height: 72px; font-size: 32px; box-shadow: inset 0 0 0 3px var(--c-ink) }

/* вход */
.login { max-width: 440px; margin: 0 auto; padding-top: var(--sp-6) }
.login .card { margin-top: var(--sp-5); border: 2px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-marker) }

/* сообщение внизу */
.s-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: var(--sp-4);
  background: var(--t-plate); color: var(--t-plate-ink); padding: 12px 14px 12px 18px; border-radius: var(--r-md); font-weight: var(--fw-semi); font-size: 15px; box-shadow: var(--shadow-2);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); max-width: calc(100vw - 32px) }
.s-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto }
.s-toast button { background: var(--c-marker); color: var(--c-marker-ink); border: 0; border-radius: var(--r-sm); padding: 7px 12px; font-weight: var(--fw-bold); font-size: var(--fs-small); cursor: pointer; flex: none }

/* ---------- кабинет учителя: меню слева + содержимое ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); background: var(--t-plate); color: var(--t-plate-ink) }
.side-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: var(--fw-heavy) 18px/1.1 var(--font-display); padding: 4px 8px }
.side-brand .dot { box-shadow: none }
.side-nav { display: grid; gap: 4px; position: relative }
.side-a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); color: inherit; text-decoration: none; font-weight: var(--fw-semi); font-size: 15px; opacity: .78; transition: background var(--dur-fast), opacity var(--dur-fast) }
.side-a:hover { opacity: 1; background: var(--c-accent-tint) }
.side-a.on { opacity: 1; background: var(--c-marker); color: var(--c-marker-ink); font-weight: var(--fw-bold) }
.side-a svg.ico { width: 20px; height: 20px }
.side-a .s { display: none }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: var(--sp-3) 8px 0; border-top: 1px solid var(--c-accent-tint) }
.side-foot .ava { box-shadow: none }
.side-foot .who { display: grid; min-width: 0; flex: 1; line-height: 1.25 }
.side-foot .who small { opacity: .7 }
.side-out { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: inherit; border: 1px solid var(--c-accent-tint); border-radius: var(--r-sm); padding: 7px 10px; font-weight: var(--fw-semi); font-size: 13px; cursor: pointer }
.side-out:hover { background: var(--c-accent-tint) }
.side-out svg.ico { width: 16px; height: 16px }

.main { padding: var(--sp-6) clamp(16px, 4vw, 48px) 80px; max-width: 1180px; width: 100%; min-width: 0 }
.p-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6) }
.sec-h h2 { margin: 0 }
.more { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-marker); text-decoration-thickness: 3px; text-underline-offset: 4px }
.more svg.ico { width: 16px; height: 16px }

/* главная: «Следующий урок» + сводка */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-4); margin-top: var(--sp-5) }
.next-t { background: var(--t-plate); color: var(--t-plate-ink); border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-4); align-content: start; min-width: 0 }
.next-t .nt-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap }
.next-t .k, .next .k { font-size: var(--fs-tiny); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .1em; opacity: .75 }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.chip { border: 1px solid var(--c-accent-tint); background: transparent; color: inherit; border-radius: var(--r-pill); padding: 5px 12px; font-weight: var(--fw-semi); font-size: 13px; cursor: pointer }
.chip:hover { border-color: currentColor }
.chip.on { background: var(--t-plate-ink); color: var(--t-plate); border-color: var(--t-plate-ink); font-weight: var(--fw-bold) }
.nt-who { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; width: max-content; max-width: 100% }
.nt-who .ava { box-shadow: none }
.nt-who b { display: block; font-size: 17px }
.nt-who small { display: block; opacity: .75; font-weight: var(--fw-semi) }
.next-t .tt { display: flex; align-items: flex-start; gap: var(--sp-4); font: var(--fw-heavy) clamp(26px, 4vw, 40px)/1.08 var(--font-display); letter-spacing: -.02em }
.next-t .tt .n, .next .tt .n { flex: none; min-width: 1.5em; padding: 0 .18em; text-align: center; background: var(--c-marker); color: var(--c-marker-ink); border-radius: var(--r-md); line-height: 1.3 }
.nt-sub { opacity: .78; font-weight: var(--fw-semi); font-size: 15px }
.nt-acts { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2) }
.nt-acts .btn { min-height: 52px; padding-left: 22px; padding-right: 22px; font-size: 16px }

.stats { display: grid; gap: var(--sp-4); grid-template-rows: 1fr 1fr }
.stat { border: 2px solid var(--c-ink); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5); display: grid; align-content: end; gap: 2px; background: var(--c-surface) }
.stat .num { font-size: 64px; line-height: .95; font-weight: var(--fw-heavy) }
.stat .lb { font-weight: var(--fw-bold); font-size: 17px }
.stat small { color: var(--c-muted); font-weight: var(--fw-semi) }
.stat.accent { background: var(--c-marker); color: var(--c-marker-ink); border-color: var(--c-marker) }
.stat.accent small { color: inherit; opacity: .75 }

/* карточки учеников */
.students { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: var(--sp-4) }
.st-card { display: grid; gap: var(--sp-4); align-content: start; text-decoration: none; color: inherit; background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-xl); padding: var(--sp-5); transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast) }
.st-card:hover { border-color: var(--c-ink); transform: translateY(-2px); box-shadow: 5px 5px 0 var(--c-marker) }
.st-top { display: flex; align-items: center; gap: 12px; min-width: 0 }
.st-id { display: grid; min-width: 0 }
.st-card .nm { font: var(--fw-bold) 20px/1.2 var(--font-display) }
.st-card .ln { font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-semi) }
.st-card .ln b { color: var(--c-ink) }
.st-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap }
.st-mid .big { display: flex; align-items: baseline; gap: 8px }
.st-mid .big b { font: var(--fw-heavy) 44px/1 var(--font-display); letter-spacing: -.03em }
.st-mid .big small { font-weight: var(--fw-semi); color: var(--c-muted); max-width: 7em; line-height: 1.2 }
.bal { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); font-weight: var(--fw-bold); font-size: 13px }
.bal svg.ico { width: 15px; height: 15px }
.bal.low { background: var(--c-marker); color: var(--c-marker-ink) }
.st-last { border-top: 1px solid var(--c-line); padding-top: var(--sp-3); display: grid; gap: 2px }
.st-last .k { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-heavy); color: var(--c-muted) }
.empty-s { display: grid; gap: var(--sp-3); justify-items: start }

.hist-card { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-5) }
.hist { list-style: none; margin: 0; padding: 0 }
.hist li { display: flex; gap: var(--sp-3); align-items: baseline; padding: 9px 0; border-top: 1px solid var(--c-line); font-size: 15px; flex-wrap: wrap }
.hist li:first-child { border-top: 0 }
.hist .d { font-weight: var(--fw-bold); min-width: 6.5em; font-variant-numeric: tabular-nums }

/* добавить, файл */
.form-card { margin-top: var(--sp-5); max-width: 640px; border: 2px solid var(--c-ink) }
.grid2 { display: grid; gap: 0 var(--sp-4); grid-template-columns: 1fr 1fr }
.file-card { margin-top: var(--sp-5); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; border: 2px solid var(--c-line); border-radius: var(--r-xl); padding: var(--sp-5); max-width: 860px }
.file-card.ch { border-color: var(--c-ink); box-shadow: 6px 6px 0 var(--c-marker) }
.fc-ico { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--c-surface-2); display: grid; place-items: center }
.file-card.ch .fc-ico { background: var(--c-marker) }
.fc-ico svg.ico { width: 28px; height: 28px }
.fc-t b { font-size: 17px; display: block }
.fc-t p { font-size: var(--fs-small); margin-top: 4px }
.steps-l { margin: var(--sp-5) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--sp-3); max-width: 640px }
.steps-l li { counter-increment: s; display: flex; gap: var(--sp-3); align-items: baseline }
.steps-l li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--c-ink); color: var(--c-bg); font: var(--fw-heavy) 14px/1 var(--font-display) }

/* карточка ученика */
.crumb { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semi); font-size: var(--fs-small); color: var(--c-ink); text-decoration: none; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface) }
.sp-head { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap }
.sp-id { flex: 1; min-width: 200px }
.sp-id .lead { margin-top: 4px }
.sp-go { min-height: 52px; padding-left: 22px; padding-right: 22px }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); align-items: start }
.blk { background: var(--c-surface); border: 2px solid var(--c-line); border-radius: var(--r-xl); padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; min-width: 0 }
.blk-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-tiny); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted) }
.blk-h svg.ico { width: 16px; height: 16px }
.blk > .num { font-size: 64px; line-height: .9; font-weight: var(--fw-heavy) }
.blk-done { border-color: var(--c-ink) }
.done-row { display: grid; gap: var(--sp-2) }
.sel { font-size: 15px; min-height: 44px; padding: 8px 12px }
.blk .hist li { display: grid; gap: 0; font-size: var(--fs-small); padding: 7px 0; line-height: 1.35 }
.blk .hist .d { min-width: 0; font-size: var(--fs-tiny); color: var(--c-muted) }
.switch.left { justify-content: flex-start; padding: 0 }
.bal-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.bal-big .num { font-size: 56px; line-height: .95; font-weight: var(--fw-heavy) }
.bal-big span { font-weight: var(--fw-bold); color: var(--c-muted) }
.bal-big.low .num { background: var(--c-marker); color: var(--c-marker-ink); padding: 0 .12em; border-radius: var(--r-sm) }
.meter { height: 8px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden }
.meter i { display: block; height: 100%; background: var(--c-ink); border-radius: var(--r-pill) }
.pack-row { display: flex; gap: var(--sp-2); align-items: flex-end }
.mini { display: grid; gap: 4px; width: 110px }
.mini span { font-weight: var(--fw-bold); font-size: var(--fs-small) }
.mini input { font-size: 17px; min-height: 44px; padding: 8px 12px }
.pack-row .btn { min-height: 44px }
.blk-note textarea { font-size: 15px; resize: vertical; min-height: 140px; line-height: 1.5 }
.note-f { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-tiny) }
.saved { color: var(--c-good); font-weight: var(--fw-bold) }
.blk-rec { margin-top: var(--sp-6) }
.blk-rec .honest { margin-top: 0 }
.rec-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.rec-l li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2) }
.rec-l .rt { display: grid; min-width: 0 }

/* список уроков по модулям */
.mods { display: grid; gap: var(--sp-5); margin-top: var(--sp-4) }
.mod-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap }
.mod-h h3 { font: var(--fw-bold) 18px/1.25 var(--font-display) }
.mod-h h3 .n { background: var(--c-marker); color: var(--c-marker-ink); padding: 0 6px; border-radius: var(--r-xs); margin-right: 6px }
.mod-h .acts { display: flex; gap: var(--sp-2) }
.les { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2) }
.le { display: grid; grid-template-columns: 38px 1fr auto; gap: 4px var(--sp-3); align-items: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) }
.le .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); font: var(--fw-heavy) 15px/1 var(--font-display) }
.le.on .num { background: var(--c-marker); color: var(--c-marker-ink) }
.le a.t { color: inherit; text-decoration: none }
.le .t { font-weight: var(--fw-bold); min-width: 0 }
.le .t small { display: block; font-weight: var(--fw-semi); color: var(--c-muted); margin-top: 2px }
.le .acts { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end }
.le.off { opacity: .75 }
.le .switch { padding: 0; min-height: 0; gap: 8px; font-size: var(--fs-small) }

/* ---------- кабинет ученика ---------- */
.st-wrap { max-width: 1080px }
.course-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px }
.mod-chip { background: var(--c-marker); color: var(--c-marker-ink); padding: 2px 12px; border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: 15px }
.st-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); margin-top: var(--sp-5); align-items: start }
.st-side { display: grid; gap: var(--sp-4); position: sticky; top: 76px }
.f-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-surface-2); border-radius: var(--r-pill); width: max-content; max-width: 100% }
.f-tab { border: 0; background: transparent; border-radius: var(--r-pill); padding: 8px 18px; font-weight: var(--fw-bold); font-size: 15px; color: var(--c-muted); cursor: pointer }
.f-tab[aria-selected="true"] { background: var(--c-ink); color: var(--c-bg) }
.f-body { margin-top: var(--sp-4); display: grid; gap: var(--sp-3) }
.next { border: 3px solid var(--c-ink); border-radius: var(--r-xl); background: var(--c-surface); padding: var(--sp-5) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-4); box-shadow: 8px 8px 0 var(--c-marker); margin-bottom: var(--sp-3) }
.next .k { color: var(--c-muted); opacity: 1 }
.next .tt { display: flex; align-items: flex-start; gap: var(--sp-4); font: var(--fw-heavy) clamp(28px, 5vw, 42px)/1.08 var(--font-display); letter-spacing: -.02em }
.next .tt .n { box-shadow: inset 0 0 0 3px var(--c-ink) }
.next .btn { justify-self: start; min-height: 56px; padding-left: 30px; padding-right: 30px; font-size: 17px }
.next.done-all, .next.empty { box-shadow: none; border-style: dashed }
.next.done-all .tt, .next.empty .tt { font-size: clamp(22px, 4vw, 28px) }
.nx-prog { display: grid; gap: 6px; max-width: 360px }
.nx-prog small { font-weight: var(--fw-bold); color: var(--c-muted) }
.f-h { margin-top: var(--sp-4) !important; font-size: 18px !important }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.f-it { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface) }
.f-ico { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c-surface-2); font: var(--fw-heavy) 16px/1 var(--font-display) }
.f-it.hw .f-ico { background: var(--c-homework-bg); color: var(--c-homework) }
.f-it.ok .f-ico { background: var(--c-good-bg); color: var(--c-good) }
.f-t { color: inherit; text-decoration: none; display: grid; min-width: 0 }
.f-t b { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.f-t small { color: var(--c-muted); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.f-empty { text-align: center }
.f-more { justify-self: center; margin-top: var(--sp-2) }
.prog-blk .nums { display: grid; gap: var(--sp-3) }
.n-it { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline }
.n-it .num { font-size: 48px; line-height: 1; font-weight: var(--fw-heavy); min-width: 1.3em; grid-row: span 2 }
.n-it span { font-weight: var(--fw-bold) }
.n-it small { color: var(--c-muted); font-weight: var(--fw-semi); grid-column: 2 }
.n-it + .n-it { border-top: 1px solid var(--c-line); padding-top: var(--sp-3) }
.bal-blk { border-color: var(--c-ink) }
.bal-blk.low { background: var(--c-accent-soft); border-color: var(--c-marker) }
.bal-blk .pre { color: var(--c-ink) }
.links { display: grid; gap: var(--sp-2) }
.link-t { display: flex; align-items: center; gap: 12px; padding: var(--sp-3) var(--sp-4); border: 2px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; color: var(--c-ink); background: var(--c-surface); transition: border-color var(--dur-fast) }
.link-t:hover { border-color: var(--c-ink) }
.link-t svg.ico { width: 22px; height: 22px }
.link-t span { display: grid; line-height: 1.25 }
.link-t small { color: var(--c-muted); font-weight: var(--fw-semi) }
.empty { margin-top: var(--sp-5) }

/* ---------- расписание (задача 21) ---------- */
/* «Войти в урок»: серая с отсчётом → жёлтая за 5 минут до начала → «Урок прошёл — Урок проведён?» */
.enter { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0 }
.enter .btn { min-height: 52px; padding-left: 22px; padding-right: 22px; font-size: 16px }
.enter.sm .btn { min-height: 40px; padding: 0 14px; font-size: 14px }
.enter.sm .btn svg.ico { width: 16px; height: 16px }
.enter-b[disabled] { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); opacity: 1; cursor: default; box-shadow: none }
.enter .cnt { font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.enter .cnt.on { color: var(--c-good) }
.enter[data-state="open"] .btn.yel { box-shadow: 0 0 0 0 var(--c-marker); animation: enter-glow 2s var(--ease) infinite }
@keyframes enter-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 227, 77, .7) } 70% { box-shadow: 0 0 0 10px rgba(255, 227, 77, 0) } 100% { box-shadow: 0 0 0 0 rgba(255, 227, 77, 0) } }
@media (prefers-reduced-motion: reduce) { .enter[data-state="open"] .btn.yel { animation: none } }
.past-q { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap }
.btn.ask-done { border: 2px solid var(--c-ink); background: var(--c-surface); color: var(--c-ink); font-weight: var(--fw-bold) }
.next-t .enter-b[disabled] { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .22) }
.next-t .enter .cnt { color: var(--t-plate-ink); opacity: .8 }
.next-t .enter .cnt.on { color: var(--c-marker); opacity: 1 }
.next-t .btn.ask-done { background: transparent; color: var(--t-plate-ink); border-color: currentColor }
.next-t .past-q .cnt { color: var(--t-plate-ink) }
.nt-when { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); font-size: 15px; background: var(--c-accent-tint); padding: 4px 12px; border-radius: var(--r-pill) }
.nt-when svg.ico { width: 16px; height: 16px }
.rep { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--c-muted) }
.rep svg.ico { width: 15px; height: 15px }
.ava.sm { width: 32px; height: 32px; font-size: 14px }
.tag.demo { background: var(--c-extra-bg); color: var(--c-extra) }
.tag svg.ico + span { margin-left: 0 }
.sp-next { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-small); font-weight: var(--fw-semi) }
.sp-next svg.ico { width: 16px; height: 16px; display: block }
.sp-next a { color: var(--c-ink); text-decoration-color: var(--c-marker); text-decoration-thickness: 3px }

/* главная: расписание на неделю */
.wk-days { display: grid; gap: var(--sp-4); margin-top: var(--sp-4) }
.wk-day h3 { font: var(--fw-bold) 15px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: var(--sp-2) }
.wk-day.today h3 { color: var(--c-ink) }
.wk-day.today h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-marker); box-shadow: inset 0 0 0 2px var(--c-ink); margin-right: 8px; vertical-align: 1px }
.wk-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.wk-it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4) }
.wk-it.demo { border-style: dashed }
.wk-t { display: grid; line-height: 1.2 }
.wk-t b { font: var(--fw-heavy) 20px/1.1 var(--font-display); font-variant-numeric: tabular-nums }
.wk-t small { color: var(--c-muted); font-weight: var(--fw-semi); font-size: var(--fs-tiny) }
.wk-who { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0 }
.wk-who > span:last-child { display: grid; min-width: 0 }
.wk-who b { font-weight: var(--fw-bold) }
.wk-who small { color: var(--c-muted); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wk-empty { display: grid; gap: var(--sp-3); justify-items: start; margin-top: var(--sp-4) }

/* страница «Расписание»: неделя по часам */
.sc-demo { display: flex; gap: var(--sp-2) }
.sc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap }
.sc-nav { display: flex; align-items: center; gap: var(--sp-2) }
.sc-nav .iconbtn svg.ico { width: 20px; height: 20px }
.sc-wrap { margin-top: var(--sp-4); border: 2px solid var(--c-ink); border-radius: var(--r-xl); background: var(--c-surface); overflow: auto; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); min-height: 420px }
.sc { --slot: 32px; display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: auto calc(var(--rows) * var(--slot)); min-width: 0 }
.sc-corner, .sc-dh { position: sticky; top: 0; z-index: 3; background: var(--c-surface); border-bottom: 2px solid var(--c-ink) }
.sc-dh { display: grid; justify-items: center; padding: 8px 2px; line-height: 1.1 }
.sc-dh small { font-weight: var(--fw-bold); color: var(--c-muted); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .06em }
.sc-dh b { font: var(--fw-heavy) 22px/1.1 var(--font-display) }
.sc-dh.today b { background: var(--c-marker); color: var(--c-marker-ink); border-radius: var(--r-pill); padding: 0 10px; box-shadow: inset 0 0 0 2px var(--c-ink) }
.sc-dh.gone { opacity: .55 }
.sc-times { display: grid; grid-auto-rows: calc(2 * var(--slot)) }
.sc-times span { font-size: var(--fs-tiny); font-weight: var(--fw-bold); color: var(--c-muted); text-align: right; padding-right: 8px; transform: translateY(-.6em); font-variant-numeric: tabular-nums }
.sc-times span:first-child { transform: none }
.sc-col { position: relative; display: grid; grid-auto-rows: var(--slot); border-left: 1px solid var(--c-line); min-width: 0 }
.sc-col.today { background: var(--c-accent-soft) }
.sc-slot { border: 0; border-top: 1px solid var(--c-line); background: transparent; padding: 0; cursor: pointer; color: var(--c-ink); font: var(--fw-heavy) 18px/1 var(--font-display); display: grid; place-items: center; min-width: 0 }
.sc-slot.half { border-top-style: dotted }
.sc-slot span { opacity: 0; transition: opacity var(--dur-fast) }
.sc-slot:hover span, .sc-slot:focus-visible span { opacity: 1 }
.sc-slot:hover, .sc-slot:focus-visible { background: var(--c-marker); outline: none }
.sc-slot.past { cursor: default; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-surface-2) 6px 7px) }
.sc-slot.past:hover { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-surface-2) 6px 7px) }
.sc-slot.past span { display: none }
.sc-ev { position: absolute; z-index: 2; margin-top: 2px; display: grid; align-content: start; gap: 0; text-align: left; overflow: hidden; padding: 5px 8px 4px; border-radius: var(--r-sm);
  border: 2px solid var(--c-ink); background: var(--t-plate); color: var(--t-plate-ink); cursor: pointer; font: inherit; line-height: 1.3; transition: transform var(--dur-fast), box-shadow var(--dur-fast) }
.sc-ev:hover, .sc-ev:focus-visible { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--c-marker); outline: none; z-index: 4 }
.sc-ev .ev-n { font-weight: var(--fw-bold); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sc-ev .ev-t, .sc-ev .ev-l { font-size: 12px; font-weight: var(--fw-semi); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sc-ev .rep { color: inherit; opacity: .85 }
.sc-ev .rep svg.ico { width: 13px; height: 13px }
.sc-ev.short .ev-l { display: none }
.sc-ev.open { background: var(--c-marker); color: var(--c-marker-ink) }
.sc-ev.past { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-line) }
.sc-ev.past.marked { background: var(--c-good-bg); color: var(--c-good); border-color: var(--c-good) }
.sc-ev.demo { outline: 2px dashed var(--c-ink); outline-offset: 1px }
.sc-ev.demo.past { outline-color: var(--c-line) }
.sc-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--c-bad); z-index: 3; pointer-events: none }
.sc-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-bad) }
.sc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-3) }
.sc-legend span { display: inline-flex; align-items: center; gap: 6px }
.lg { width: 16px; height: 16px; border-radius: 4px; display: inline-grid; place-items: center; border: 2px solid var(--c-ink); background: var(--t-plate) }
.lg.rep-lg { background: none; border: 0 }
.lg.rep-lg svg.ico { width: 15px; height: 15px }
.lg.demo-lg { outline: 2px dashed var(--c-ink); outline-offset: 1px; width: 12px; height: 12px; margin: 2px }
.lg.open-lg { background: var(--c-marker) }
.lg.past-lg { background: var(--c-surface-2); border-color: var(--c-line) }
/* телефон: дни недели кружками */
.sc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: var(--sp-3) }
.sc-dc { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 2px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); cursor: pointer; font: inherit }
.sc-dc small { font-size: 11px; font-weight: var(--fw-bold); color: var(--c-muted); text-transform: uppercase }
.sc-dc b { font: var(--fw-heavy) 18px/1 var(--font-display) }
.sc-dc.today { border-color: var(--c-ink) }
.sc-dc.on { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink) }
.sc-dc.on small { color: inherit; opacity: .75 }
.cnt-dot { position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-marker); box-shadow: inset 0 0 0 1.5px var(--c-ink) }

/* окошко брони и урока */
.sc-dlg { width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 2px solid var(--c-ink); border-radius: var(--r-xl); padding: 0; background: var(--c-surface); color: var(--c-ink); box-shadow: 8px 8px 0 var(--c-marker) }
.sc-dlg::backdrop { background: var(--c-overlay) }
.dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) 0 }
.dlg-h h2 { margin: 0; font-size: 24px }
.dlg-h p { margin-top: 4px; font-weight: var(--fw-semi) }
.dlg-b { padding: 0 var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-2) }
.dlg-b .field { margin-top: var(--sp-3) }
.dlg-when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) }
.dlg-when .field { margin-top: var(--sp-3) }
.dlg-when input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border-radius: var(--r-md); border: 2px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); min-height: 48px }
.dlg-when input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-marker) }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--c-surface-2); border-radius: var(--r-md) }
.seg-b { flex: 1; border: 0; background: transparent; border-radius: var(--r-sm); padding: 9px 10px; font: inherit; font-weight: var(--fw-bold); font-size: 15px; color: var(--c-muted); cursor: pointer }
.seg-b[aria-checked="true"] { background: var(--c-ink); color: var(--c-bg) }
.dlg-rep { margin-top: var(--sp-3); align-items: flex-start; gap: 10px }
.dlg-rep input { margin-top: 4px }
.dlg-b > .btn.wide { margin-top: var(--sp-4) }
.dlg-info { display: grid; gap: var(--sp-3); margin-top: var(--sp-4) }
.dlg-info .nt-who small { display: block; font-weight: var(--fw-semi) }
.dlg-info .tags { display: flex; gap: 6px; flex-wrap: wrap }
.dlg-enter { margin-top: var(--sp-3) }
.dlg-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4) }
.dlg-acts .btn { flex: 1 1 auto; justify-content: center }
.btn.danger { color: var(--c-bad); border-color: var(--c-bad) }
.btn.danger-f { background: var(--c-bad); color: #FFFFFF; border-color: var(--c-bad); font-weight: var(--fw-bold) }
.dlg-sub { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--c-surface-2) }
.dlg-sub .btn { justify-self: start; margin-top: var(--sp-2) }
.dlg-sub .dlg-when .field { margin-top: 0 }

/* ученик: «Уроки» — расписание */
.sch { display: grid; gap: var(--sp-3) }
.sch-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2) }
.sch-it { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface) }
.sch-it.first { border: 3px solid var(--c-ink); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5); box-shadow: 6px 6px 0 var(--c-marker) }
.sch-d { display: grid; justify-items: center; line-height: 1.05; background: var(--c-surface-2); border-radius: var(--r-md); padding: 6px 0 }
.sch-d b { font: var(--fw-heavy) 22px/1 var(--font-display) }
.sch-d small { font-size: 11px; font-weight: var(--fw-bold); color: var(--c-muted); text-transform: uppercase }
.sch-it.first .sch-d { background: var(--c-marker); color: var(--c-marker-ink) }
.sch-it.first .sch-d small { color: inherit }
.sch-t { display: grid; min-width: 0 }
.sch-t b { font-weight: var(--fw-bold) }
.sch-it.first .sch-t b { font: var(--fw-heavy) 20px/1.2 var(--font-display) }
.sch-t small { color: var(--c-muted); font-weight: var(--fw-semi) }

@media (max-width: 760px) {
  .sc-wrap { max-height: none; min-height: 0; overflow: visible; border-radius: var(--r-lg) }
  .sc.one .sc-dh { display: none }
  .sc.one .sc-col.today { background: none }
  .sc.one .sc-corner { display: none }
  .sc.one { grid-template-rows: calc(var(--rows) * var(--slot)); --slot: 34px }
  .sc-hint { display: none }
  .sc-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; border-width: 2px 0 0; box-shadow: none; max-height: 92vh }
  .wk-it { grid-template-columns: 52px minmax(0, 1fr); }
  .wk-it .enter { grid-column: 1 / -1 }
  .wk-it .enter .btn { flex: 1 }
  .nt-acts .enter { flex: 1 1 100% }
  .nt-acts .enter .btn { flex: 1 }
}
@media (max-width: 640px) {
  .sch-it { grid-template-columns: 48px minmax(0, 1fr) }
  .sch-it .enter { grid-column: 1 / -1 }
  .sch-it .enter .btn { flex: 1; justify-content: center }
  .sch-it.first { padding: var(--sp-3) var(--sp-4) }
}

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .sp-grid { grid-template-columns: 1fr 1fr }
  .blk-note { grid-column: 1 / -1 }
}
@media (max-width: 900px) {
  .home-top { grid-template-columns: 1fr }
  .stats { grid-template-rows: none; grid-template-columns: 1fr 1fr }
  .st-grid { grid-template-columns: 1fr }
  .st-side { position: static; grid-template-columns: 1fr 1fr }
  .st-side .links { grid-column: 1 / -1; grid-template-columns: 1fr 1fr }
  .st-side .prog-blk { grid-column: 1 / -1 }
  .prog-blk .nums { grid-template-columns: repeat(3, 1fr) }
  .n-it { grid-template-columns: 1fr; align-content: start }
  .n-it .num { grid-row: auto }
  .n-it small { grid-column: 1 }
  .n-it + .n-it { border-top: 0; padding-top: 0; border-left: 1px solid var(--c-line); padding-left: var(--sp-3) }
}

/* ---------- телефон: меню учителя — внизу ---------- */
@media (max-width: 760px) {
  .shell { display: block }
  .side { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; height: auto; flex-direction: row; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); gap: 0 }
  .side-brand { display: none }
  .side-nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 100% }   /* 6 пунктов меню (задача 22) */
  .side-a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; line-height: 1.1; text-align: center; border-radius: var(--r-sm) }
  .side-a .l { display: none }
  .side-a .s { display: block }
  .side-foot { position: fixed; top: 0; left: 0; right: 0; z-index: 41; margin: 0; border: 0; border-bottom: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); padding: 8px var(--page-gutter) }
  .side-foot .ava { width: 32px; height: 32px; font-size: 14px; box-shadow: inset 0 0 0 2px var(--c-ink) }
  .side-foot .who { display: flex; gap: 6px; align-items: baseline }
  .side-out { border-color: var(--c-line) }
  .main { padding: 72px var(--page-gutter) 110px }
  .next-t { padding: var(--sp-5) }
  .nt-acts .btn { flex: 1 1 100%; }
  .stat { padding: var(--sp-3) var(--sp-4) }
  .stat .num { font-size: 48px }
  .sp-grid { grid-template-columns: 1fr }
  .file-card { grid-template-columns: auto 1fr }
  .file-card .btn { grid-column: 1 / -1 }
  .s-toast { bottom: 84px }
}
@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr }
  .le { grid-template-columns: 34px 1fr; padding: var(--sp-3) }
  .le .acts { grid-column: 1 / -1; justify-content: flex-start }
  .next { padding: var(--sp-4) var(--sp-4) var(--sp-5); box-shadow: 5px 5px 0 var(--c-marker) }
  .next .btn { justify-self: stretch }
  .st-side { grid-template-columns: 1fr }
  .st-side .links { grid-template-columns: 1fr 1fr }
  .f-it { grid-template-columns: 40px minmax(0, 1fr) auto; padding: var(--sp-3) }
  .f-it > .btn { display: none }
  .f-tab { padding: 8px 14px }
  .sp-head .ava.xl { width: 56px; height: 56px; font-size: 24px }
  .sp-go { width: 100%; justify-content: center }
  .hist .d { min-width: 0 }
}
/* «Выйти» в шапке ученика — с подписью и на телефоне */
@media (max-width: 640px) { :root .s-bar .iconbtn.wide { width: auto; padding: 0 10px } :root .s-bar .iconbtn.wide span { display: inline } }

/* ===================================================================================================
   ЗАДАЧА 22 — живой сайт: шапка «матовое стекло», приветствие с часами, чат-заглушка, каталог обложками,
   работы на проверку, лента ученика. Движение (анимации) — отдельный раздел «движение» в самом конце файла.
   =================================================================================================== */

/* шапка ученика — матовое стекло (полупрозрачный фон темы + размытие под ним) */
.site-page .s-bar { background: color-mix(in srgb, var(--c-surface) 78%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-bottom-color: color-mix(in srgb, var(--c-line) 70%, transparent) }
.s-bar .bar-in { gap: var(--sp-2) }
/* кабинет учителя: тонкая шапка справа над страницей («Сообщения») */
.t-top { position: sticky; top: 0; z-index: 15; display: flex; justify-content: flex-end; gap: var(--sp-2); margin: calc(-1 * var(--sp-6)) calc(-1 * clamp(16px, 4vw, 48px)) 0; padding: 10px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--c-bg) 72%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px) }
.t-top:empty { display: none }
.chat-btn { position: relative }
.side-chat { display: none }
/* счётчик на пункте меню («Работы на проверку») */
.side-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--c-marker); color: var(--c-marker-ink); font: var(--fw-heavy) 12px/22px var(--font-display); text-align: center; font-variant-numeric: tabular-nums }
.side-a.on .side-n { background: var(--c-ink); color: var(--c-marker) }

/* приветствие с часами */
.t-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap }
.hello-l { min-width: 0; flex: 1 1 320px }
.clk { display: grid; justify-items: end; gap: 2px; text-align: right }
.clk-t { font: var(--fw-heavy) clamp(40px, 6.4vw, 60px)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline }
.clk-t i { font-style: normal; opacity: .3; padding: 0 .03em }
.clk-t .sec { color: var(--c-muted) }
.clk-d { font-weight: var(--fw-semi); color: var(--c-muted); font-size: 15px }

/* ---------- чат-заглушка ---------- */
.chat-scrim { position: fixed; inset: 0; z-index: 70; background: var(--c-overlay); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease) }
.chat-scrim.on { opacity: 1; pointer-events: auto }
.chat { position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--c-surface); color: var(--c-ink);
  border-left: 2px solid var(--c-ink); box-shadow: var(--shadow-2); transform: translateX(104%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); visibility: hidden }
.chat.on { transform: none; visibility: visible }
.chat:not(.on) { transition: transform .3s cubic-bezier(.4, 0, .6, 1), visibility 0s .3s }
.chat.two { width: min(760px, 100vw) }
.chat:focus { outline: none }
.chat-h { display: flex; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-4) 14px var(--sp-5); border-bottom: 1px solid var(--c-line) }
.chat-ht { flex: 1; display: grid; line-height: 1.2; min-width: 0 }
.chat-ht b { font: var(--fw-heavy) 20px/1.2 var(--font-display) }
.chat-ht small { color: var(--c-muted); font-weight: var(--fw-semi) }
.chat-back { display: none }
.chat-b { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) }
.chat.two .chat-b { grid-template-columns: 250px minmax(0, 1fr) }
.chat-side { border-right: 1px solid var(--c-line); overflow: auto; background: var(--c-surface-2) }
.chat-l { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px }
.chat-li { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px; border: 0; border-radius: var(--r-md); background: transparent; color: inherit; font: inherit; cursor: pointer }
.chat-li:hover { background: var(--c-surface) }
.chat-li.on { background: var(--c-surface); box-shadow: inset 3px 0 0 var(--c-marker), 0 1px 0 var(--c-line) }
.chat-lt { display: grid; min-width: 0; line-height: 1.3 }
.chat-lt b { font-weight: var(--fw-bold) }
.chat-lt small, .chat-lw { color: var(--c-muted); font-size: 13px; font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chat-lw { align-self: start; font-size: 12px }
.chat-c { display: flex; flex-direction: column; min-height: 0; min-width: 0 }
.chat-who { display: flex; align-items: center; gap: 10px; padding: 12px var(--sp-5); border-bottom: 1px solid var(--c-line) }
.chat-f { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 6px }
.chat-day { align-self: center; margin: 10px 0 4px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-muted); font-size: 12px; font-weight: var(--fw-bold) }
.msg { max-width: 82%; align-self: flex-start; display: grid; gap: 3px }
.msg.mine { align-self: flex-end; justify-items: end }
.msg-b { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--c-surface-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-size: 16px }
.msg.mine .msg-b { border-radius: 18px 18px 6px 18px; background: var(--t-plate); color: var(--t-plate-ink) }
.msg.pending .msg-b { background: color-mix(in srgb, var(--t-plate) 82%, var(--c-surface)) }
.msg-m { display: flex; gap: 8px; align-items: center; color: var(--c-muted); font-size: 12px; font-weight: var(--fw-semi); padding: 0 4px }
.msg-p { display: inline-flex; align-items: center; gap: 4px }
.msg-p svg.ico { width: 13px; height: 13px }
.chat-in { display: flex; gap: var(--sp-2); align-items: flex-end; padding: var(--sp-3) var(--sp-4) 6px; border-top: 1px solid var(--c-line) }
.chat-in textarea { flex: 1; resize: none; font: inherit; font-size: 16px; line-height: 1.4; padding: 11px 14px; min-height: 46px; max-height: 140px; border-radius: 22px; border: 2px solid var(--c-line); background: var(--c-surface); color: var(--c-ink) }
.chat-in textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-marker) }
.chat-send { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; justify-content: center; flex: none }
.chat-send svg.ico { width: 20px; height: 20px }
.chat-note { padding: 0 var(--sp-5) var(--sp-3); color: var(--c-muted); font-size: 12px }
.chat-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); padding: var(--sp-6); text-align: center; color: var(--c-muted); font-weight: var(--fw-semi) }
.chat-ei { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2) }
.chat-ei svg.ico { width: 30px; height: 30px }
.chat-none { padding: 12px; text-align: center }
body.chat-open { overflow: hidden }

/* ---------- каталог уроков: обложки ---------- */
.cat-h { display: grid; gap: 4px; margin-top: var(--sp-6) }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4) }
.cat-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(10, 10, 10, .04) }
.cv { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface-2); overflow: hidden }
.cv img { width: 100%; height: 100%; object-fit: cover; display: block }
.cv-none { position: absolute; inset: 0; display: grid; place-items: center; font: var(--fw-heavy) 44px/1 var(--font-display); color: var(--c-muted); letter-spacing: -.03em }
.cv-credit { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-photo-label); color: var(--c-photo-label-ink); font-size: 11px; font-weight: var(--fw-semi); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9 }
.cv-credit:hover { opacity: 1; text-decoration: underline }
.cat-st { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 11px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink); font-size: 12px; font-weight: var(--fw-heavy); box-shadow: 0 2px 10px rgba(10, 10, 10, .15) }
.cat-st.ok { background: var(--c-good); color: var(--c-bg) }
.cat-b { display: grid; gap: 4px; align-content: start; padding: var(--sp-4) var(--sp-5) var(--sp-5) }
.cat-k { color: var(--c-muted); font-size: var(--fs-tiny); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .08em }
.cat-t { font: var(--fw-heavy) 24px/1.15 var(--font-display); letter-spacing: -.02em }
.cat-m { color: var(--c-muted); font-weight: var(--fw-semi); font-size: var(--fs-small) }
.cat-b .meter { margin-top: 8px; height: 6px }
.cat-b .meter i { background: var(--c-marker); box-shadow: inset 0 0 0 1px var(--c-ink) }
.cat-card.soon .cv img { filter: grayscale(.35) }
.lv-hero { position: relative; margin-top: var(--sp-4); border-radius: var(--r-xl); overflow: hidden; display: grid; background: var(--t-plate); color: var(--t-plate-ink) }
.lv-hero .cv.big { aspect-ratio: 21 / 8; grid-area: 1 / 1 }
.lv-hero .cv.big::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 10, 10, .78), rgba(10, 10, 10, .05) 70%) }
.lv-hero .cv-credit { left: auto; right: 12px; bottom: 12px; top: auto; z-index: 2 }
.lv-t { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; padding: var(--sp-5) var(--sp-6); color: #FFFFFF; display: grid; gap: 6px; justify-items: start }
.lv-t .cat-st { position: static; box-shadow: none }
.lv-t h1 { color: inherit }
.lv-t h1 small { font-size: .5em; opacity: .75; letter-spacing: 0 }
.lv-t .lead { color: inherit; opacity: .85; margin-top: 0 }

/* ---------- работы на проверку ---------- */
.rv-sum { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4) }
.rv-big { display: inline-flex; align-items: baseline; gap: 10px }
.rv-big .num { font-size: 56px; line-height: 1; font-weight: var(--fw-heavy) }
.rv-big span { font-weight: var(--fw-bold); font-size: 17px }
.rv-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2) }
.rv-it { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1.3fr) 76px auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); color: inherit; text-decoration: none }
.rv-it.fresh { border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-marker) }
.rv-it.seen { background: var(--c-surface-2) }
.rv-it.seen .ava { background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-line) }
.rv-it.new .ava { background: var(--c-surface-2); box-shadow: none }
.rv-t, .rv-s { display: grid; min-width: 0; line-height: 1.3; justify-items: start; gap: 2px }
.rv-t b { font-weight: var(--fw-bold); font-size: 17px; display: inline-flex; align-items: center; gap: 8px }
.rv-t small, .rv-s small { color: var(--c-muted); font-weight: var(--fw-semi); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.rv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-bad) }
.rv-p { display: grid; justify-items: end; line-height: 1.1 }
.rv-p .num { font-size: 24px; font-weight: var(--fw-heavy) }
.rv-p small { color: var(--c-muted); font-size: 12px; font-weight: var(--fw-semi) }
.rv-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4) }
.rv-head .nt-who { flex: 1 1 260px }
.rv-name { font: var(--fw-heavy) clamp(26px, 4vw, 34px)/1.1 var(--font-display) !important }
.rv-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.rv-pct { display: inline-flex; align-items: baseline; gap: 6px }
.rv-pct .num { font-size: 32px; font-weight: var(--fw-heavy) }
.rv-pct small { color: var(--c-muted); font-weight: var(--fw-semi); font-size: 13px }
.rv-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5) }
.rv-legend span { display: inline-flex; align-items: center; gap: 6px }
.rv-step { margin-top: var(--sp-5); display: grid; gap: var(--sp-3) }
.rv-step h2 { margin: 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.rv-step.here h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-marker); box-shadow: inset 0 0 0 2px var(--c-ink) }
.rv-task { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); display: grid; gap: var(--sp-2) }
.rv-tt b { font-weight: var(--fw-bold) }
.rv-prompt { color: var(--c-muted); font-weight: var(--fw-semi); font-size: 15px }
.rv-text { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--c-accent-soft); box-shadow: inset 4px 0 0 var(--c-marker); display: grid; gap: 6px }
.rv-tk { font-size: var(--fs-tiny); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted) }
.rv-text p { font-size: 18px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere }
.rv-auto { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.mks { display: flex; gap: 5px; flex-wrap: wrap }
.mk { display: inline-block; width: 18px; height: 18px; border-radius: 5px; background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-line) }
.mk.first { background: var(--c-good); box-shadow: none }
.mk.later { background: var(--c-marker); box-shadow: inset 0 0 0 1.5px var(--c-ink) }
.mk.tried { background: var(--c-bad); box-shadow: none }
.rv-legend .mk { width: 14px; height: 14px; border-radius: 4px }

/* ---------- ученик: лента «Все активности», «Задать домашку» у учителя ---------- */
.f-it.act { grid-template-columns: 48px minmax(0, 1fr) auto auto }
.f-date { display: grid; justify-items: center; line-height: 1.05; background: var(--c-surface-2); border-radius: var(--r-md); padding: 6px 0 }
.f-date b { font: var(--fw-heavy) 20px/1 var(--font-display) }
.f-date small { font-size: 11px; font-weight: var(--fw-bold); color: var(--c-muted); text-transform: uppercase }
.st-side .tiles { grid-template-columns: 1fr 1fr }
/* в узкой правой колонке (компьютер) плитки — строками: значок слева, текст справа */
@media (min-width: 901px) {
  .st-side .tiles { grid-template-columns: 1fr }
  .st-side .tile { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: 4px; padding: var(--sp-4) }
  .st-side .tile > * { grid-column: 2 }
  .st-side .tile > .tile-i { grid-column: 1; grid-row: 1 / span 3; margin: 0 }
  .st-side .tile-v .num { font-size: 36px }
  .st-side .tile.calm .tile-v { font-size: 19px }
}
.btn.hw-give.on { background: var(--c-homework-bg); color: var(--c-homework); border-color: var(--c-homework) }
.f-tabs { position: relative }
.f-tab { position: relative; z-index: 1 }

@media (max-width: 900px) {
  .st-side .tiles { grid-column: 1 / -1 }
}
@media (max-width: 760px) {
  .t-top { display: none }
  .side-chat { display: inline-flex; width: 36px; height: 36px; padding: 0; justify-content: center; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink) }
  .side-chat .l { display: none }
  .side-n { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; font-size: 11px; margin: 0 }
  .side-a { position: relative }
  .chat, .chat.two { width: 100vw; border-left: 0 }
  .chat.two .chat-b { grid-template-columns: minmax(0, 1fr) }
  .chat.two .chat-b .chat-c { display: none }
  .chat.two .chat-b.conv-on .chat-side { display: none }
  .chat.two .chat-b.conv-on .chat-c { display: flex }
  .chat-side { border-right: 0; background: var(--c-surface) }
  .chat-back { display: inline-flex }
  .chat .chat-who { display: none }
  .msg { max-width: 88% }
  .clk { justify-items: start; text-align: left }
  .rv-it { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 6px }
  .rv-s { grid-column: 2 / -1; grid-row: 2 }
  .rv-it > .tag.demo { display: none }
  .lv-hero .cv.big { aspect-ratio: 4 / 3 }
  .lv-t { padding: var(--sp-4) }
}
@media (max-width: 640px) {
  .s-bar .chat-btn .l { display: none !important }
  :root .s-bar .chat-btn.wide { width: 40px; padding: 0; justify-content: center }
  .f-it.act { grid-template-columns: 44px minmax(0, 1fr) auto }
  .f-it.act > .tag { display: none }
  .cat-grid { grid-template-columns: 1fr }
}

/* ===================================================================================================
   ДВИЖЕНИЕ (задача 22) — работает только при классе .mo на <html> (его ставит site/motion.js).
   Не подключили motion.js — ничего этого нет. Только transform и opacity. prefers-reduced-motion — без движения.
   Кривая — cubic-bezier(.2, .8, .2, 1) (мягкая, «пружинистая», без отскока).
   =================================================================================================== */
.mo { --mo-ease: cubic-bezier(.2, .8, .2, 1) }
/* появление блоков при первом показе страницы: снизу на 14 px + проявление, по очереди (задержку ставит motion.js) */
@keyframes mo-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.mo .mo-rise { animation: mo-rise .46s var(--mo-ease) var(--mo-d, 0ms) both }
/* смена вкладки / пункта меню: проявление + сдвиг 8 px */
@keyframes mo-swap { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.mo .mo-swap { animation: mo-swap .23s var(--mo-ease) both }
/* полоски прогресса и баланса плавно заполняются */
@keyframes mo-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.mo .meter > i.mo-fill { transform-origin: left center; animation: mo-fill .9s var(--mo-ease) .15s both }
/* метка выбранного пункта переезжает (меню учителя — жёлтая, вкладки ленты — чёрная) */
.mo .mo-mark { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: var(--r-md); background: var(--c-marker); transition: transform .38s var(--mo-ease), opacity .2s }
.mo .side-nav.mo-has-mark .side-a { position: relative; z-index: 1 }
.mo .side-nav.mo-has-mark .side-a.on { background: transparent }
.mo .f-tabs.mo-has-mark .mo-mark { border-radius: var(--r-pill); background: var(--c-ink) }
.mo .f-tabs.mo-has-mark .f-tab[aria-selected="true"] { background: transparent; transition: color .25s }
/* наведение на карточки: подъём на 3 px и тень чуть глубже (200 мс); на телефоне — лёгкое «нажатие» */
.mo .st-card, .mo .tile, .mo .cat-card, .mo .rv-it, .mo .link-t, .mo .f-it, .mo .wk-it, .mo .stat, .mo .le, .mo .sch-it:not(.first), .mo .next, .mo .next-t {
  transition: transform .2s var(--mo-ease), box-shadow .2s var(--mo-ease), border-color .2s }
@media (hover: hover) {
  .mo .st-card:hover { transform: translateY(-3px); box-shadow: 7px 7px 0 var(--c-marker) }
  .mo .tile:hover, .mo .cat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 10, 10, .14) }
  .mo .rv-it:hover, .mo .link-t:hover, .mo .f-it:hover, .mo .wk-it:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 10, 10, .08) }
  .mo .rv-it.fresh:hover { box-shadow: 6px 6px 0 var(--c-marker) }
  .mo .cat-card:hover .cv img { transform: scale(1.035) }
}
.mo .cv img { transition: transform .5s var(--mo-ease) }
.mo .tile:active, .mo .cat-card:active, .mo .st-card:active, .mo .rv-it:active, .mo .f-it:active, .mo .link-t:active, .mo .btn:active:not(:disabled) { transform: scale(.98) }
/* чат: новое сообщение мягко появляется */
@keyframes mo-msg { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
.mo .msg.fresh { animation: mo-msg .28s var(--mo-ease) both }
/* часы: секунды едва заметно «дышат» при смене — без движения, только прозрачность */
@media (prefers-reduced-motion: reduce) {
  .mo .mo-rise, .mo .mo-swap, .mo .meter > i.mo-fill, .mo .msg.fresh { animation: none }
  .mo .mo-mark, .chat, .chat-scrim { transition: none !important }
  .mo *, .mo *:hover, .mo *:active { transform: none !important }
  .chat.on { transform: none }
  .chat:not(.on) { visibility: hidden }
}