/* Стили Словики. Перенесены из версии на Next.js (tools/convert-css.mjs), дальше правятся здесь. */

@font-face {
  font-family: Onest;
  src: url("/assets/fonts/onest/cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Onest;
  src: url("/assets/fonts/onest/latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --paper: #F5F2EC;
  --task-paper: #F7F4EE;
  --ink: #17141F;
  --lilac: #C9BBFF;
  --lilac-answer: #CFC2FF;
  --lilac-button: #C7BBFA;
  --lilac-light: #F3F0FF;
  --lime: #D8F65A;
  --lime-light: #DEF573;
  --purple: #5B3FE0;
  --white: #FFFFFF;
  --muted: #4A4458;
  --border: #D4CEC3;
  --star: #7A5CFF;
  --ring: #B5A3FF;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Onest, sans-serif; }
main { max-width: 480px; margin: auto; padding: 20px 18px 40px; }
h1,h2,h3,p { margin: 0; }
h1 { font-size: 32px; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; }
h2 { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
p { line-height: 1.5; }
a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
button,input { font: inherit; color: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
input { width: 100%; min-width: 0; min-height: 52px; padding: 12px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--white); }
label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
button,.button { border: 0; border-radius: 999px; background: var(--ink); color: var(--white); min-height: 56px; padding: 14px 22px; font-weight: 700; text-decoration: none; justify-content: center; }
#variants, #progress { scroll-margin-top: 20px; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 28px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand b { font-size: 26px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.brand span { font-size: 12px; line-height: 1.2; color: var(--muted); }
/* The lime dot after «slovika»: the brand mark. */
.brand-dot { display: inline-block; width: .34em; height: .34em; margin-left: .07em; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 .055em var(--ink); }
.account-controls { display: flex; align-items: center; gap: 8px; }
.logout { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--lilac); font-size: 18px; font-weight: 800; }
.login { margin-top: 54px; }
.login h1 { font-size: 46px; margin-bottom: 28px; }
.login form { display: flex; flex-direction: column; gap: 20px; }
.error { background: var(--lilac-light); border: 2px solid var(--ink); border-radius: 16px; padding: 16px; margin-bottom: 20px; }
.cabinet { display: flex; flex-direction: column; gap: 22px; }
.greeting { font-size: 46px; line-height: 1; letter-spacing: -.035em; }
.marker { display: inline-block; background: var(--lime); border-radius: 12px; padding: 0 8px 2px; }
.greeting .marker { padding: 0 12px 4px; border-radius: 16px; transform: rotate(-2deg); margin-top: 6px; }
.star { fill: var(--star); vertical-align: top; margin-top: 10px; }
.inline-marker { background: var(--lime); padding: 0 4px; border-radius: 6px; }
.intro { margin-top: 18px; font-size: 21px; line-height: 1.3; font-weight: 700; }
.accent { color: var(--purple); }
.variant-card { padding: 20px 20px 22px; border-radius: 30px; background: var(--lilac); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.variant-card::before { content: ""; position: absolute; width: 110px; height: 110px; right: -18px; top: -18px; border: 14px solid var(--ring); border-radius: 50%; }
.variant-card::after { content: ""; position: absolute; width: 50px; height: 50px; right: 12px; top: 12px; border: 14px solid var(--ring); border-radius: 50%; }
.variant-card > * { position: relative; z-index: 1; }
.variant-card h2 { font-size: 28px; line-height: 1.05; font-weight: 800; max-width: 270px; }
.variant-card p { font-size: 15px; line-height: 1.45; }
.variant-card .button { justify-content: space-between; padding: 0 8px 0 22px; margin-top: 4px; }
.arrow { background: var(--lime); color: var(--ink); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; margin-left: 8px; }
.progress-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.stat { border-radius: 24px; padding: 18px; background: var(--white); display: flex; flex-direction: column; gap: 6px; }
.stat span { font-size: 13px; }
.stat strong { font-size: 42px; font-weight: 900; line-height: 1; white-space: nowrap; }
.stat strong small { font-size: 24px; color: var(--purple); }
.stat.latest strong small { color: var(--white); }
.stat.average b { font-size: 13px; font-weight: 600; }
.stat.latest { background: var(--ink); color: var(--white); }
.stat.average { grid-column: span 2; background: var(--lime-light); flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.stat.average div { display: flex; flex-direction: column; gap: 4px; }
.solved-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.solved-card { background: var(--white); padding: 16px 16px 16px 20px; border-radius: 24px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.solved-card { flex-wrap: wrap; }
/* The text takes the line; the buttons go under it when both do not fit beside. */
.solved-card > div:first-child { flex: 1 1 200px; min-width: 0; }
.solved-card b { font-weight: 800; }
.solved-card p { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* «Результат» and «Файл проверки» side by side: one filled, one outlined. */
.solved-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.file-link { min-height: 44px; display: inline-flex; align-items: center; border: 1.5px solid var(--ink); background: var(--white); border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink); }
.result-link { min-height: 44px; background: var(--lilac-button); border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 700; text-decoration: none; }
body:has(.task-page) { background: var(--task-paper); }
.task-page { background: var(--task-paper); }
.inline-link { display: inline; min-height: 0; font-weight: 700; text-underline-offset: 3px; }
.back { text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.source { color: var(--muted); font-size: 13px; margin-top: 12px; }
.task-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 3px; margin: 18px 0 32px; }
.task-nav a { justify-content: center; min-width: 0; min-height: 44px; font-size: 11px; font-weight: 800; border: 1.5px solid var(--border); border-radius: 8px; text-decoration: none; }
.task-nav a[data-answered="true"] { background: var(--lilac-answer); }
.task-nav a[aria-current="step"],.task-nav a.correct { background: var(--lime); border-color: var(--ink); }
.task-nav a.incorrect { background: var(--lilac); color: var(--ink); border-color: var(--ink); flex-direction: column; }
.solve-form { display: flex; flex-direction: column; gap: 30px; }
.reading { font-size: 16px; line-height: 1.6; display: flex; flex-direction: column; gap: 14px; }
.reading p { line-height: 1.6; }
.reading h2 { font-size: 18px; line-height: 1.4; }
.reading small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.note { font-size: 13px; line-height: 1.5; padding: 14px 16px; border-radius: 16px; background: var(--lilac-light); }
.task-card { border: 1.5px solid var(--ink); background: var(--white); border-radius: 28px; padding: 30px 18px 20px; position: relative; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 30px; margin-top: 14px; }
.task-card p { font-size: 15px; line-height: 1.55; white-space: pre-line; }
.task-card h3 { font-size: 16px; }
.task-sticker { position: absolute; top: -22px; left: 16px; transform: rotate(-6deg); background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 16px; font-size: 20px; font-weight: 900; }
.type-sticker { position: absolute; top: -14px; right: 18px; transform: rotate(5deg); background: var(--lilac-answer); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.choices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.choices li,.rule { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.choice-number { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.rule-letter { flex: 0 0 32px; height: 32px; border-radius: 10px; background: var(--lilac-answer); display: grid; place-items: center; font-weight: 900; }
.matching-table { width: 100%; display: block; }
.matching-table tbody,.matching-table tr,.matching-table td { display: block; width: 100%; }
.matching-table td { padding: 0; }
.matching-table td + td { border-top: 1.5px dashed var(--border); margin-top: 16px; padding-top: 16px; }
.matching-table h3 { font-size: 13px; text-transform: uppercase; margin-bottom: 12px; letter-spacing: .05em; }
.rules { display: flex; flex-direction: column; gap: 12px; }
.place-number { display: inline-block; min-width: 24px; text-align: center; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--lime); font-size: 12px; line-height: 20px; font-weight: 800; }
.answer-box { background: var(--lilac-light); padding: 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; position: relative; margin-top: 8px; }
.answer-box small { font-size: 13px; color: var(--muted); }
.order-sticker { position: absolute; top: -16px; right: 8px; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 14px 14px 4px 14px; background: var(--white); transform: rotate(4deg); font-size: 13px; font-weight: 800; }
.matching-inputs { display: flex; flex-wrap: wrap; gap: 8px; }
.matching-inputs label { align-items: center; font-size: 13px; }
.matching-inputs input { width: 54px; height: 60px; border: 2px solid var(--ink); text-align: center; font-size: 26px; font-weight: 900; padding: 4px; }
.submit { width: 100%; min-height: 60px; font-size: 17px; font-weight: 800; }
.result-score { font-size: 60px; font-weight: 900; letter-spacing: -.04em; margin: 22px 0 0; }
.results { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.result-card { padding: 20px 18px; }
.result-card p { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Shared task refinements, including phones. */
:root { --place-muted: #6B6577; --panel-border: #E2DCD1; }
.cabinet-top, .available-variants, .task-group, .group-tasks { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.cabinet-top, .available-variants { gap: 22px; }
.available-variants:empty { display: none; }
.desktop-header, .sticky-toolbar { display: none; }
.task-card:has(.answer-box input:focus) { box-shadow: 0 0 0 4px var(--lime); }
.task-card b { font-weight: 900; }
.place-number { display: inline; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--place-muted); font-size: 12px; font-weight: 600; line-height: 0; vertical-align: super; }
.task-sticker.incorrect { background: var(--lilac); color: var(--ink); }
.result-card { padding-top: 32px; }

@media (min-width: 768px) {
  main { max-width: 1260px; padding: 22px 40px 64px; }
  .site-header { width: 100%; margin-bottom: 44px; gap: 24px; }
  .brand b { font-size: 28px; }
  .login { max-width: 440px; margin: 54px auto 0; }
  .cabinet { gap: 44px; }
  .cabinet-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: stretch; }
  .cabinet-top > section { display: flex; flex-direction: column; justify-content: center; gap: 22px; }
  .greeting { font-size: 72px; line-height: .98; letter-spacing: -.04em; }
  .greeting .marker { padding: 0 16px 6px; border-radius: 20px; margin-top: 8px; }
  .star { width: 48px; height: 48px; margin-top: 18px; }
  .intro { font-size: 26px; max-width: 460px; margin-top: 0; }
  .variant-card { border-radius: 36px; padding: 32px 36px; gap: 16px; }
  .variant-card h2 { font-size: 40px; max-width: 400px; }
  .variant-card p { font-size: 17px; }
  .variant-card .button { align-self: flex-start; min-height: 60px; font-size: 18px; gap: 18px; }
  .variant-card::before { width: 154px; height: 154px; border-width: 20px; }
  .variant-card::after { width: 70px; height: 70px; border-width: 20px; right: 24px; top: 24px; }
  .cabinet h2 { font-size: 30px; }
  .cabinet .variant-card h2 { font-size: 40px; }
  .progress-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 16px; }
  .stat { min-height: 150px; border-radius: 28px; padding: 22px 24px; gap: 18px; justify-content: space-between; }
  .stat span, .stat.average b { font-size: 15px; }
  .stat strong { font-size: 56px; }
  .stat strong small { font-size: 30px; }
  .stat.average { padding: 22px 28px; }
  .stat.average strong { font-size: 64px; }
  .stat.average span { font-size: 14px; }
  .solved-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .solved-card { padding: 20px 22px; border-radius: 26px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .solved-card > div:first-child { flex: 1 1 auto; }
  .solved-card b { font-size: 18px; }
  .solved-card p { font-size: 14px; }
  .desktop-header { display: block; }
  .variant-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: 32px; margin-bottom: 28px; }
  .variant-heading h1 { font-size: 48px; }
  .variant-heading .task-nav { margin: 0; gap: 6px; }
  .task-nav a { font-size: 13px; border-radius: 10px; }
  .source { font-size: 14px; }
  .solve-form, .task-group, .group-tasks { gap: 40px; }
  .reading { background: var(--white); border-radius: 28px; padding: 32px 40px; gap: 16px; }
  .reading p { font-size: 18px; line-height: 1.75; }
  .reading h2 { font-size: 20px; }
  .task-card { padding: 36px 40px 32px; gap: 20px; scroll-margin-top: 110px; }
  .task-card p { font-size: 18px; line-height: 1.5; }
  .task-card p:has(sup) { font-size: 17px; line-height: 1.9; }
  .task-sticker { left: 28px; padding-inline: 18px; }
  .type-sticker { left: 120px; right: auto; }
  .choices li { font-size: 16px; }
  .answer-box { width: 440px; max-width: 100%; align-self: flex-start; border-radius: 20px; }
  .answer-box > input { font-size: 22px; font-weight: 800; }
  .matching-table { border: 1.5px solid var(--panel-border); border-radius: 20px; overflow: hidden; }
  .matching-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .matching-table td { padding: 18px 20px; }
  .matching-table td + td { border-top: 0; border-left: 1.5px dashed var(--border); margin: 0; padding: 18px 20px; }
  .rule, .matching-table .choices li { font-size: 15px; }
  .beside { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; gap: 32px; margin-top: 14px; }
  .beside .reading-rail { background: var(--white); border: 1.5px solid var(--panel-border); border-radius: 28px; min-width: 0; }
  .beside .reading { position: sticky; top: 96px; height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; padding: 28px 32px; }
  .beside .reading p { font-size: 17px; line-height: 1.7; }
  .beside .reading h2 { font-size: 18px; }
  .beside .task-card { margin-top: 0; padding: 34px 28px 24px; gap: 16px; }
  .beside .task-card p { font-size: 17px; }
  .beside .choices li { font-size: 15px; }
  .sticky-toolbar { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--paper); border-bottom: 1.5px solid var(--panel-border); }
  .toolbar-inner { max-width: 1260px; padding: 14px 40px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .toolbar-inner > b { font-size: 18px; flex: 1; }
  .toolbar-inner .task-nav { flex: 1.5; margin: 0; gap: 5px; }
  .toolbar-inner button { min-height: 44px; padding: 0 20px; font-size: 15px; }
  .results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .result-card { padding: 36px 28px 24px; }
  main > .task-nav { max-width: 560px; }
}

.topics { display: flex; flex-direction: column; gap: 12px; }
.topic { background: var(--white); border: 1.5px solid var(--border); border-radius: 20px; min-width: 0; }
.topic[open] { border-color: var(--ink); }
.topic summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0,1fr) 18px; gap: 10px; align-items: start; padding: 16px 12px; min-height: 44px; font-size: 15px; font-weight: 800; line-height: 1.45; border-radius: 20px; }
.topic summary::-webkit-details-marker { display: none; }
.topic-number { background: var(--lilac); border-radius: 12px; min-height: 44px; display: grid; place-items: center; font-size: 14px; }
.topic-arrow { font-size: 24px; line-height: 1; align-self: center; transition: transform .15s; }
.topic[open] .topic-arrow { transform: rotate(180deg); }
.topic-body { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 20px; }
.topic-body small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.topic-body button:disabled { background: var(--lilac-light); color: var(--muted); cursor: not-allowed; }
.reading-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.reading-heading h2 { flex: 1 1 220px; }
.read-text { background: var(--lilac-light); color: var(--ink); border: 1.5px solid var(--border); padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 700; }
.reading-heading .read-text { margin-left: auto; }
.read-text span { font-size: 20px; }
.reading-dialog { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; background: var(--paper); color: var(--ink); overflow-y: auto; }
.reading-dialog::backdrop { background: var(--paper); }
.reader-column { max-width: 768px; margin: auto; padding: 24px 24px 48px; }
.reader-header { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.reader-header h2 { font-size: 24px; flex: 1 1 220px; }
.reader-header button { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.reader-topic { font-size: 14px; line-height: 1.6; margin-bottom: 24px; color: var(--muted); }
.reader-text { display: flex; flex-direction: column; gap: 18px; }
.reader-text p { font-size: 20px; line-height: 1.8; white-space: pre-line; }
.reader-text small { font-size: 14px; line-height: 1.6; color: var(--muted); }
@media (min-width: 768px) {
  .topic summary { padding: 18px 16px; font-size: 16px; gap: 12px; }
  .topic-body { padding: 0 20px 24px; }
  .reader-column { max-width: 1196px; padding-inline: 48px; }
  .reading-dialog .reader-text p { font-size: 23px; line-height: 1.75; }
  .reader-topic { font-size: 16px; }
  .reader-header h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .topic-arrow { transition: none; } }

/* Teacher cabinet: Mix 1, cards on phones and a table on desktops. */
.teacher-cabinet { display: flex; flex-direction: column; gap: 28px; }
.teacher-label { font-size: 13px; background: var(--ink); color: white; padding: 8px 14px; border-radius: 999px; align-self: flex-start; letter-spacing: 0; }
.teacher-top,.teacher-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.teacher-top { justify-content: space-between; }
.teacher-cabinet .greeting { font-size: 38px; }
.teacher-buttons { width: 100%; }
/* «Загрузить вариант» and «Ошибки по заданиям» share one row under «+ Ученик» on a phone. */
.teacher-buttons > a { flex: 1 1 140px; justify-content: center; text-align: center; font-size: 14px; padding-inline: 12px; }
.teacher-create { width: 100%; }
.teacher-create summary,.student-controls summary { min-height: 48px; padding: 12px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; background: var(--ink); color: white; list-style: none; text-align: center; }
.teacher-create summary::-webkit-details-marker,.student-controls summary::-webkit-details-marker { display: none; }
.secondary,.teacher-cabinet .secondary { background: var(--lilac); color: var(--ink); }
.teacher-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 0; }
.teacher-form p { font-size: 13px; font-weight: 400; }
.teacher-form select { font: inherit; width: 100%; min-height: 48px; border: 1.5px solid var(--ink); border-radius: 12px; background: white; color: var(--ink); padding: 10px; }
.teacher-form button { font-size: 14px; min-height: 48px; }
.issued-credentials { padding: 16px; background: var(--lime-light); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; font-weight: 400; }
.issued-credentials code { user-select: all; }
.teacher-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.teacher-stats > * { padding: 18px; border-radius: 24px; background: white; display: flex; flex-direction: column; gap: 12px; }
/* Order: students, bank, waiting checks, average — each tile keeps its colour. */
.teacher-stats > :nth-child(2) { background: var(--lilac); }
.teacher-stats > :nth-child(3) { background: var(--lime-light); }
.teacher-stats > :nth-child(4) { background: var(--ink); color: white; }
.teacher-stats span,.teacher-stats small { font-size: 13px; }
.teacher-stats strong { font-size: 32px; font-weight: 900; line-height: 1.1; }
.teacher-stats p { font-size: 14px; }
.teacher-cabinet section > h2 { margin-bottom: 14px; }
.teacher-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.teacher-table thead { display: none; }
.teacher-table tbody { display: flex; flex-direction: column; gap: 16px; }
.teacher-table tr { display: flex; flex-direction: column; background: white; border-radius: 24px; padding: 20px; gap: 14px; }
.teacher-table td { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; align-items: start; }
.teacher-table td::before { content: attr(data-label); font-size: 12px; color: var(--muted); }
.teacher-table td:last-child { display: block; }
.teacher-table td:last-child::before { display: none; }
.teacher-table small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.teacher-table td > small { grid-column: 2; }
.teacher-table th { overflow-wrap: anywhere; }
.teacher-cells { display: flex; gap: 4px; flex-wrap: wrap; }
.teacher-cells span { border: 1.5px solid var(--ink); border-radius: 5px; min-width: 24px; padding: 3px; text-align: center; font-weight: 700; }
.teacher-cells .solved { background: var(--lilac); }
.student-controls .manage-toggle { background: var(--lilac-light); color: var(--ink); font-size: 13px; width: 100%; min-height: 48px; }
.teacher-bank { display: grid; gap: 16px; }
.teacher-bank article { border-radius: 24px; padding: 22px; background: white; display: flex; flex-direction: column; gap: 10px; }
.teacher-bank p { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.bank-number { font-weight: 900; font-size: 24px; }
/* «Исправить или удалить» on a bank card; variants taken out of the bank under the bank. */
.bank-manage { font-size: 13px; font-weight: 700; color: var(--ink); }
.bank-archived { margin-top: 18px; padding: 16px 18px; border: 1.5px dashed var(--border); border-radius: 20px; }
.bank-archived h3 { font-size: 16px; }
.bank-archived p { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.bank-archived ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bank-archived li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bank-access { background: var(--lilac); border-radius: 999px; padding: 6px 12px; font-size: 13px; align-self: flex-start; }
@media (min-width: 768px) {
  .teacher-cabinet .greeting { font-size: 56px; }
  /* All three buttons in one row next to the greeting; the new-student form opens under them. */
  .teacher-top { align-items: center; }
  .teacher-buttons { width: auto; flex-wrap: nowrap; align-items: center; }
  .teacher-buttons:has(.teacher-create[open]) { flex-wrap: wrap; max-width: 560px; }
  .teacher-buttons > a { flex: none; font-size: 15px; padding-inline: 20px; }
  .teacher-create { width: auto; flex: none; }
  .teacher-create summary { padding-inline: 24px; }
  .teacher-create[open] { flex-basis: 100%; }
  .teacher-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
  .teacher-stats strong { font-size: 40px; }
  .teacher-bank { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* The students table needs a computer width; on a tablet held upright the students
   stay cards, two in a row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .teacher-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .teacher-table-wrap { background: white; border-radius: 28px; padding: 8px; }
  .teacher-table { table-layout: fixed; }
  .teacher-table thead { display: table-header-group; }
  .teacher-table tbody { display: table-row-group; }
  .teacher-table tr { display: table-row; }
  .teacher-table th,.teacher-table td,.teacher-table td:last-child { display: table-cell; padding: 18px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
  .teacher-table th { font-size: 13px; }
  .teacher-table th:first-child { width: 16%; }
  .teacher-table th:last-child { width: 23%; }
  .teacher-table td::before { display: none; }
  .teacher-table small { margin-top: 6px; }
}
.teacher-cells .closed { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.upload-layout { display: grid; gap: 24px; margin-top: 24px; }
/* Fixing, re-recording or removing a published variant. */
.manage-variant { display: flex; flex-direction: column; }
.manage-status { font-size: 14px; color: var(--muted); margin-top: 6px; }
.manage-variant form > button, .manage-variant form .danger { align-self: flex-start; }
.danger { background: var(--white); color: #A1251B; border: 1.5px solid currentColor; }
.teacher-form .confirm { flex-direction: row; align-items: center; gap: 10px; font-weight: 700; }
.teacher-form .confirm input { width: 20px; height: 20px; min-height: 0; flex: none; }
.discard-draft summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.discard-draft p { font-size: 14px; margin: 10px 0; }
.correction-note { background: var(--lilac-light); border-radius: 16px; padding: 12px 14px; font-size: 14px; }
.upload-panel { background: white; border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 16px; margin-top: 20px; min-width: 0; }
.upload-panel p { font-size: 15px; }
.upload-step { align-self: flex-start; background: var(--lime); border-radius: 999px; padding: 6px 14px; font-weight: 900; }
.upload-drop { border: 2px dashed var(--ink); border-radius: 20px; padding: 18px; background: var(--paper); }
.upload-panel input[type=file] { padding: 10px 0; border: 0; background: transparent; font-size: 12px; }
.upload-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.upload-summary > div { padding: 14px 10px; border-radius: 18px; background: var(--lilac); font-size: 12px; }
.upload-summary > div:nth-child(2) { background: var(--lime-light); }
.upload-summary > div:nth-child(3) { background: var(--lilac-light); }
.upload-summary b { display: block; font-size: 28px; }
.import-tasks { display: flex; flex-direction: column; }
.import-task { padding: 20px 0; display: grid; gap: 12px; border-bottom: 1px solid var(--border); }
.import-task > b { background: var(--lilac-light); padding: 8px 12px; border-radius: 10px; justify-self: start; }
.import-task small { color: var(--muted); }
.upload-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.teacher-bank .bank-draft { border: 2px dashed var(--ink); }
.task-card.key-mismatch { border: 3px dashed var(--ink); background: var(--lilac-light); }
.exam-start-wrap { padding: 16px 0; }
.exam-start { background: white; border: 1.5px solid var(--ink); border-radius: 28px; padding: 20px; max-width: 800px; margin: 0 auto; display: grid; gap: 14px; grid-template-areas: "main" "rules" "side" "actions"; }
.exam-start h1 { margin: 0; }
/* Start screen: a compact, almost square card in the middle of the screen; the Словик with a
   speech bubble sits beside the title. Only here: once the timer runs, the page has no decor. */
.exam-start-main { grid-area: main; display: grid; gap: 10px; align-content: center; min-width: 0; }
.exam-start ol { grid-area: rules; }
.exam-start-side { grid-area: side; display: flex; align-items: center; gap: 10px; }
.exam-start-slovik { flex: none; width: 110px; height: auto; }
.exam-cheer { position: relative; order: 1; margin: 0; background: var(--lilac-light); border: 1.5px solid var(--ink); border-radius: 18px; padding: 8px 14px; font-weight: 700; line-height: 1.3; }
.exam-start-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.exam-start-actions form { margin: 0; }
@media (min-width: 768px) {
  /* The card stands in the middle of the screen below the header. */
  .exam-start-wrap { min-height: calc(100dvh - 110px); display: grid; align-items: center; padding: 8px 0 24px; }
  .exam-start { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "main side" "rules rules" "actions actions"; column-gap: 12px; row-gap: 16px; }
  .exam-start-side { gap: 12px; margin: -8px -8px 0 0; }
  .exam-start-slovik { width: 190px; }
  .exam-cheer { order: 0; max-width: 170px; text-align: center; }
  /* The bubble points right at the Словик. */
  .exam-cheer::after { content: ""; position: absolute; right: -8px; top: 50%; width: 14px; height: 14px; background: var(--lilac-light); border-right: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
}
.exam-duration { display: flex; gap: 14px; align-items: baseline; }
.exam-duration b { font-size: clamp(44px,6vw,60px); line-height: 1; }
.exam-start ol { margin: 4px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; }
.exam-start li::marker { font-weight: 800; color: var(--accent); }
.exam-toolbar { position: sticky; top: 0; z-index: 10; background: var(--paper); border: 1.5px solid var(--border); border-radius: 18px; padding: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 20px 0; }
.exam-toolbar button { margin-left: auto; min-height: 44px; padding: 10px 14px; font-size: 14px; }
.exam-toolbar small { width: 100%; font-size: 12px; }
.exam-timer { background: white; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.exam-timer.warning { background: var(--lime); }
.exam-timer.urgent { color: var(--lime); background: var(--ink); }
.exam-warning { margin: 0; font-size: 13px; width: 100%; }
.exam-audio { background: var(--lilac-light); padding: 18px; border-radius: 20px; display: grid; gap: 12px; }
.exam-audio p { font-size: 14px; }
.exam-audio button { justify-self: start; }
@media (min-width: 768px) { .exam-start { padding: 28px 32px; } .exam-start ol { font-size: 16px; } .exam-toolbar { padding: 12px 18px; } }
@media (min-width: 768px) {
 .upload-layout { grid-template-columns: 5fr 7fr; align-items: start; }
 .upload-panel { padding: 28px; }
 .import-task { grid-template-columns: 100px minmax(0,1fr) minmax(180px,300px); align-items: start; }
 .import-task small { grid-column: 2 / -1; }
}

.exam-toolbar .task-nav { display: none; }
@media (min-width: 768px) {
  .exam-toolbar .task-nav { display: grid; flex: 1; margin: 0; gap: 5px; }
  /* On a computer the timer bar already has the task cells: one row is enough. */
  .variant-heading.with-toolbar { grid-template-columns: minmax(0,1fr); }
  .variant-heading.with-toolbar > .task-nav { display: none; }
}

/* Изложение and сочинение handed in from the variant (task E). */
.written-submit { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 4px; }
.written-sent { align-self: flex-start; display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: var(--lime); font-weight: 800; }

/* «Сдать вариант?» — confirmation with the time left. */
.submit-dialog { width: min(440px, calc(100vw - 32px)); padding: 28px 24px 24px; border: 1.5px solid var(--ink); border-radius: 28px; background: var(--white); color: var(--ink); }
.submit-dialog::backdrop { background: rgb(23 20 31 / .45); }
.submit-dialog h2 { font-size: 28px; line-height: 1.1; margin: 0 0 14px; }
.submit-slovik { float: right; width: 88px; height: auto; margin: -8px -4px 4px 10px; }
.submit-dialog p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.submit-dialog .submit-left { display: inline-block; padding: 6px 12px; border-radius: 12px; background: var(--lime); font-size: 16px; }
.submit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.submit-actions button { flex: 1 1 160px; min-height: 48px; }
.submit-actions .secondary { background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); }

/* «Ждут проверки» leads to the page with every изложение and сочинение. */
.teacher-works-tile { color: var(--ink); text-decoration: none; align-items: flex-start; justify-content: flex-start; text-align: left; border: 1.5px solid transparent; transition: border-color .15s; }
.teacher-works-tile:hover, .teacher-works-tile:focus-visible { border-color: var(--ink); }
/* The student name opens the student page. */
.student-link { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; min-height: 0; }
.student-link b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.student-link small { color: var(--muted); font-weight: 500; }
/* Draft audio: attached state and a folded replacement. */
.audio-editor { display: grid; gap: 10px; }
.audio-attached { display: inline-block; justify-self: start; padding: 8px 14px; border-radius: 14px; background: var(--lime); font-weight: 600; }
.audio-editor summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
/* The key under a task when the teacher looks through a variant. */
.answer-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; align-self: flex-start; padding: 12px 16px; border-radius: 16px; background: var(--lime); }
.answer-key span { font-size: 13px; font-weight: 700; }
.answer-key b { font-size: 18px; overflow-wrap: anywhere; }
.answer-key small { font-size: 12px; }
.exam-audio audio { width: 100%; }
.bank-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; min-height: 0; }

/* A tablet held upright (768–1023 px) gets the wide layout, a little more compact. */
@media (min-width: 768px) and (max-width: 1023px) {
  main { padding: 22px 28px 56px; }
  .greeting { font-size: 60px; }
  .stat { padding: 20px; }
  .stat strong { font-size: 44px; }
  .stat strong small { font-size: 24px; }
  .stat.average { flex-wrap: wrap; }
}

/* 404: a surprised Словик in the middle. */
.not-found { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; margin: 0 auto; max-width: 440px; min-height: calc(100dvh - 200px); }
.not-found h1 { margin: 0; font-size: 36px; }
.not-found p { margin: 0; font-size: 17px; line-height: 1.45; }
/* The «!» sits to the right of the body: shift the picture so the body is on the axis. */
.not-found-slovik { width: 160px; height: auto; transform: translateX(7%); }


/* ===== login (из app/login.module.css) ===== */
/* Login «Знаки бренда». The decoration sits behind everything and never
   catches clicks or widens the page. */
.login-screen { min-height: calc(100dvh - 60px); display: flex; flex-direction: column; }
.login-decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.login-rings { position: absolute; left: -70px; top: 70px; width: 190px; height: 190px; }
.login-rings circle { stroke: var(--lilac); stroke-width: 14; }
.login-dot { position: absolute; left: -40px; bottom: 60px; width: 120px; height: 120px; border-radius: 50%; background: var(--lime); }
.login-number { position: absolute; left: 34px; bottom: 150px; background: var(--ink); color: var(--white); border-radius: 999px; padding: 8px 18px; font-weight: 900; font-size: 20px; transform: rotate(-8deg); }
.login-star { position: absolute; right: 18px; top: 84px; width: 56px; height: 56px; fill: var(--star); transform: rotate(12deg); }
.login-dashed { position: absolute; right: -80px; bottom: 40px; width: 180px; height: 180px; border-radius: 50%; border: 3px dashed var(--ink); }
.login-check { position: absolute; right: 10px; bottom: 96px; width: 56px; height: 56px; border-radius: 50%; background: var(--lime); border: 2.5px solid var(--ink); display: grid; place-items: center; }
.login-check svg { width: 28px; height: 28px; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.login-card.login-card { margin: auto 0; background: var(--white); border-radius: 32px; padding: 32px 24px 24px; box-shadow: 0 30px 60px -30px rgba(23, 20, 31, .25); display: flex; flex-direction: column; gap: 16px; }
.login-card.login-card h1 { margin: 0; font-size: 52px; line-height: 1; letter-spacing: -.045em; }
.login-title { display: inline-block; background: var(--lime); padding: 0 14px 6px; border-radius: 18px; transform: rotate(-2deg); }
.login-lead { color: var(--muted); }
/* The brand line above «Вход». */
.login-tagline { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.login-card.login-card form { gap: 18px; }
.login-submit { background: var(--lilac-button); color: var(--ink); font-size: 18px; font-weight: 800; min-height: 60px; margin-top: 4px; }
.login-help { font-size: 13px; color: var(--muted); text-align: center; }

@media (min-width: 768px) {
  .login-screen { min-height: calc(100dvh - 130px); }
  .login-rings { left: 6vw; top: 18vh; width: 260px; height: 260px; }
  .login-dot { left: 12vw; bottom: 14vh; width: 150px; height: 150px; }
  .login-number { left: calc(12vw + 96px); bottom: calc(14vh + 100px); padding: 10px 22px; font-size: 26px; }
  .login-star { right: 14vw; top: 14vh; width: 96px; height: 96px; }
  .login-dashed { right: 9vw; bottom: 18vh; width: 210px; height: 210px; }
  .login-check { right: calc(9vw + 70px); bottom: calc(18vh + 70px); width: 70px; height: 70px; }
  .login-check svg { width: 34px; height: 34px; }
  .login-card.login-card { width: 100%; max-width: 440px; margin: auto; padding: 40px 36px 32px; border-radius: 36px; }
  .login-card.login-card h1 { font-size: 60px; }
}

/* Словик winks from behind the card. */
.login-screen { row-gap: 84px; }
.login-card.login-card { position: relative; }
.login-slovik { position: absolute; right: 22px; top: -82px; width: 96px; height: auto; }
@media (min-width: 768px) { .login-screen { row-gap: 100px; } .login-slovik { width: 124px; top: -104px; right: 30px; } }
/* Computer: the card and the Словик above it stand in the middle of the screen together —
   the page's bottom padding is taken back. */
@media (min-width: 768px) {
  .login-screen { min-height: calc(100dvh - 66px); margin-bottom: -64px; }
}


/* ===== sections (из app/components/sections-menu.module.css) ===== */
/* «Разделы»: a dark pill in the header and a white side panel over a dimmed page. */
.sections-open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; font-size: 14px; font-weight: 700; }
.sections-burger { display: grid; gap: 3px; width: 16px; }
.sections-burger i { display: block; height: 2px; border-radius: 2px; background: var(--lime); }
.sections-burger i:nth-child(2) { width: 70%; }

.sections-panel { margin: 0 0 0 auto; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: var(--white); color: var(--ink); }
.sections-panel::backdrop { background: rgb(23 20 30 / .45); }
.sections-panel[open] { animation: slide .22s ease-out; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sections-panel[open] { animation: none; } }
.sections-inner { min-height: 100%; display: flex; flex-direction: column; padding: 20px 16px 16px; }
.sections-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sections-top h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.sections-close { width: 48px; height: 48px; min-height: 0; padding: 0; display: grid; place-items: center; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); }

.sections-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sections-divider { margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--border); }
.sections-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1.5px solid transparent; border-radius: 18px; color: var(--ink); text-decoration: none; }
a.sections-item:hover { background: var(--paper); }
.sections-item[aria-current] { background: var(--lilac-light); border-color: var(--ink); }
.sections-item[aria-current] .sections-icon { background: var(--lilac); }
.sections-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--paper); }
.sections-glyph { font-size: 18px; font-weight: 900; }
.sections-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sections-text b { font-size: 16px; font-weight: 800; line-height: 1.2; }
.sections-text small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.sections-later { cursor: default; }
.sections-later .sections-text b, .sections-later .sections-icon { opacity: .6; }
.sections-soon { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--lime); font-size: 12px; font-weight: 800; }
.sections-who { margin: auto 0 0; padding: 14px 12px 0; border-top: 1.5px solid var(--border); font-weight: 800; }

/* Phone: only the burger; the word «Разделы» comes back from 420 px. */
.sections-openLabel { display: none; }
@media (min-width: 420px) { .sections-openLabel { display: inline; } }
@media (max-width: 419px) { .sections-open { width: 44px; padding: 0; justify-content: center; } }

@media (min-width: 768px) {
  .sections-panel { width: 420px; border-radius: 32px 0 0 32px; }
  .sections-inner { padding: 26px 22px 20px; }
  .sections-top h2 { font-size: 28px; }
}


/* ===== written (из app/components/written.module.css) ===== */
/* Written works: status badges, submit and review forms. */
.written-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.written-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--paper); border: 1.5px dashed var(--ink); text-decoration: none; color: var(--ink); }
.written-badge.written-waiting { background: var(--lilac-light); border-style: solid; border-color: var(--lilac); }
.written-badge.written-done { background: var(--lime); border: 1.5px solid var(--ink); }
a.written-badge { min-height: 44px; }
/* Cabinet: written-work status as plain lines with a dot — lime checked, lilac waiting, dashed not handed in. */
.written-statuses { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; font-weight: 600; }
.written-statuses li { display: inline-flex; align-items: center; gap: 7px; }
.written-statuses li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--ink); flex: none; }
.written-statuses li.written-done::before { background: var(--lime); border-style: solid; }
.written-statuses li.written-waiting::before { background: var(--lilac); border-style: solid; }

.written-written { background: var(--white); border-radius: 24px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.written-written h2 { font-size: 20px; }
.written-written ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.written-written li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.written-written li b { font-weight: 800; }
.written-deadline { font-size: 13px; color: var(--muted); }
.written-action { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--purple); color: var(--white); font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; }
.written-fileLink { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--ink); }

.written-form { display: flex; flex-direction: column; gap: 16px; }
.written-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.written-form legend { font-weight: 800; margin-bottom: 10px; }
.written-topic { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--ink); font-weight: 800; cursor: pointer; }
.written-topic input { appearance: auto; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; flex: none; accent-color: var(--ink); }
.written-topic:has(input:checked) { background: var(--lime); }
.written-topic:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.written-drop { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 2px dashed var(--ink); border-radius: 20px; background: var(--white); font-weight: 800; }
.written-drop input { font-weight: 400; font-size: 14px; max-width: 100%; }
.written-hint { font-size: 13px; font-weight: 400; color: var(--muted); }
.written-criteria { flex-direction: column; flex-wrap: nowrap !important; gap: 0 !important; background: var(--paper); border-radius: 18px; padding: 6px 16px 10px !important; }
.written-criteria legend { float: left; width: 100%; font-weight: 800; padding: 10px 0 6px; margin: 0 !important; }
/* Only the score rows: the «+ да / меньше 70» pills are labels too and keep their own solid border. */
.written-criteria > label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 14px; font-weight: 400; }
.written-points { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 700; }
.written-points input { width: 64px; min-height: 44px; border: 1.5px solid var(--ink); border-radius: 12px; padding: 0 10px; background: var(--white); text-align: center; }
.written-volume legend { width: 100%; }
.written-breakdown { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; font-size: 13px; color: var(--muted); }
.written-breakdown li { display: flex; justify-content: space-between; gap: 12px; }

.written-page { display: flex; flex-direction: column; gap: 18px; }
.written-files { display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; list-style: none; }

.written-photos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.written-photos li { display: flex; flex-direction: column; gap: 6px; }
.written-photos a { min-height: 0; display: block; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--border); background: var(--paper); }
.written-photos img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.written-photos span { font-size: 13px; font-weight: 700; color: var(--muted); }

.written-queue { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.written-queue li { background: var(--white); border-radius: 20px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.written-queue small { color: var(--muted); }

@media (min-width: 768px) {
  .written-page { width: 100%; }
  /* Изложение and сочинение side by side; the criteria groups in two columns. */
  .written-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .written-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .written-groups > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .written-written { padding: 24px 28px; }
}
.written-cardActions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.written-works, .written-groups { display: grid; gap: 16px; }
.written-volume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0 10px; border-top: 1px dashed var(--border); font-size: 14px; font-weight: 700; }
.written-volumeChoices { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.written-volumeChoices .written-topic { min-height: 40px; padding: 0 14px; font-size: 14px; }
.written-criteria > small { padding: 6px 0 4px; }


/* ===== rules (из app/rules/rules.module.css) ===== */
/* «Как проверяют ответы»: rules with examples drawn as cells of the exam answer form. */
.rules-page { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
.rules-page h1 { margin: 0; font-size: 36px; line-height: 1.1; }
.rules-lead { margin: 0; font-size: 17px; line-height: 1.5; max-width: 640px; }

.rules-rules { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 28px; }
.rules-rule { position: relative; background: var(--white); border: 1.5px solid var(--ink); border-radius: 28px; padding: 30px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.rules-rule h2 { margin: 0; font-size: 21px; }
.rules-rule p { margin: 0; line-height: 1.5; }
.rules-number { position: absolute; top: -18px; left: 16px; transform: rotate(-6deg); background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 14px; font-size: 18px; font-weight: 900; }

.rules-examples { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.rules-example { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rules-example small { width: 100%; color: var(--muted); font-size: 13px; }
.rules-cells { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
.rules-cells span { width: 20px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--ink); margin-left: -1.5px; background: var(--paper); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.rules-cells span:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.rules-cells span:last-child { border-radius: 0 8px 8px 0; }
.rules-cells .rules-space { background: var(--white); }
.rules-cells .rules-comma { background: var(--lilac); }
.rules-yes, .rules-no { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.rules-yes { background: var(--lime); border: 1.5px solid var(--ink); }
.rules-no { background: var(--ink); color: var(--white); }

.rules-points { background: var(--lilac); border-radius: 30px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.rules-points h2 { margin: 0; font-size: 24px; }
.rules-parts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rules-parts li { background: var(--white); border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rules-parts b { font-size: 30px; font-weight: 900; line-height: 1; }
.rules-parts span { font-size: 13px; line-height: 1.35; }
.rules-total { margin: 0; line-height: 1.5; }
.rules-total b { background: var(--white); border-radius: 8px; padding: 0 6px; }
.rules-scale { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 20px; overflow: hidden; font-size: 14px; }
.rules-scaleHeading { margin: 4px 0 -6px; font-size: 15px; }
.rules-scale th, .rules-scale td { text-align: left; padding: 10px 12px; border-top: 1px dashed var(--border); vertical-align: top; }
.rules-scale thead th { border-top: 0; font-size: 12px; color: var(--muted); }
.rules-scale tbody th { font-weight: 900; white-space: nowrap; }
.rules-scale td:nth-child(2) { white-space: nowrap; }

@media (min-width: 768px) {
  .rules-page { width: 100%; }
  .rules-page h1 { font-size: 52px; }
  .rules-rules { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .rules-cells span { width: 26px; }
  .rules-rule { padding: 34px 26px 24px; }
  .rules-parts { grid-template-columns: repeat(4, 1fr); }
  .rules-points { padding: 28px; }
}

/* Словик reads next to the heading, like a teacher explaining. */
.rules-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rules-intro > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rules-slovik { width: 96px; height: auto; flex-shrink: 0; }
@media (min-width: 768px) { .rules-slovik { width: 170px; } }


/* ===== cabinet (из app/student/cabinet.module.css) ===== */
/* Kept apart from globals.css so it does not touch the shared stylesheet. */
.cabinet-gradeNote { font-size: 14px; font-weight: 800; }
.cabinet-wait { font-size: 26px !important; }

/* Link to the answer rules: blank cells echo the rules page. */
.cabinet-rules { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; width: fit-content; justify-self: start; align-self: start; padding: 10px 16px 10px 10px; max-width: 100%;
  border: 1.5px solid var(--ink); border-radius: 18px; background: var(--white); color: var(--ink); text-decoration: none; }
.cabinet-rules:hover .cabinet-arrow, .cabinet-rules:focus-visible .cabinet-arrow { transform: translateX(3px); }
.cabinet-cells { display: inline-flex; flex-shrink: 0; }
.cabinet-cells span { width: 22px; height: 32px; display: grid; place-items: center; border: 1.5px solid var(--ink); margin-left: -1.5px; background: var(--lime); font-weight: 800; font-size: 16px; }
.cabinet-cells span:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.cabinet-cells span:last-child { border-radius: 0 8px 8px 0; }
.cabinet-rulesText { display: grid; gap: 2px; min-width: 0; }
.cabinet-rulesText b { font-size: 15px; line-height: 1.2; }
.cabinet-rulesText small { font-size: 12px; line-height: 1.35; font-weight: 500; }
.cabinet-arrow { font-size: 20px; font-weight: 800; transition: transform .15s; }

/* The brand line under the greeting: a lilac sticker, like the stickers on the tasks. */
.cabinet-tagline { align-self: flex-start; display: inline-block; margin-top: 14px; padding: 4px 12px; border-radius: 999px; background: var(--lilac); font-size: 14px; font-weight: 800; transform: rotate(-1.5deg); }

/* Словик on every open variant: it takes the place of the ring decor. Sizes grow smoothly with the
   card itself (cqi = 1% of the card's inner width), not the screen: a phone or a vertical tablet
   (~300 px inside) gets 100 px, a computer (~550 px) the full 170 px, and the title keeps the
   rest of the width, so text never runs into the picture. */
.cabinet-withSlovik { container-type: inline-size; --slovik: clamp(100px, 32cqi, 170px); }
.cabinet-withSlovik.cabinet-withSlovik::before, .cabinet-withSlovik.cabinet-withSlovik::after { display: none; }
.cabinet-withSlovik h2 { font-size: clamp(28px, 9cqi, 40px) !important; }
.cabinet-withSlovik h2, .cabinet-withSlovik p { max-width: calc(100% - var(--slovik)) !important; }
.cabinet-cardSlovik { position: absolute !important; z-index: 0 !important; right: clamp(8px, 4cqi, 20px); top: clamp(10px, 3cqi, 16px); width: var(--slovik); height: auto; }

/* No open variant: when the next one opens, a sleeping Словик on a lilac hill. The hill, the
   Словик and the text grow with the card the same way; the hint ends before the hill starts. */
.cabinet-waiting { container-type: inline-size; --hill: clamp(150px, 51cqi, 280px); position: relative; overflow: hidden; background: var(--ink); color: var(--white); border-radius: 30px; padding: 22px 20px 24px; min-height: 330px; }
.cabinet-waitText { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.cabinet-waitLabel { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lime); }
.cabinet-waitText h2 { margin: 0; font-size: clamp(24px, 6cqi, 32px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; max-width: clamp(230px, 66cqi, 360px); color: var(--white); }
.cabinet-days { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; }
.cabinet-days b { font-size: clamp(56px, 14cqi, 76px); line-height: 1; font-weight: 900; color: var(--lime); }
.cabinet-waitHint { margin: 4px 0 0; max-width: min(280px, calc(100% + 20px - var(--hill))); font-size: clamp(14px, 3cqi, 16px); line-height: 1.45; color: var(--lilac-light); }
.cabinet-waitHint b { color: var(--white); }
.cabinet-moon { position: absolute; right: -16px; bottom: 0; width: var(--hill); height: calc(var(--hill) * .63); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--lilac-light); }
.cabinet-waitSlovik { position: absolute; right: -4px; bottom: 7px; width: calc(var(--hill) * .88); height: auto; }

@media (min-width: 768px) {
  .cabinet-waiting { border-radius: 36px; padding: 32px 36px; min-height: 340px; }
}

/* «Мой прогресс» before the first variant: the section is there (the «Разделы» link leads to it), with a promise instead of numbers. */
.cabinet-progressEmpty { margin-top: 12px; padding: 18px 20px; border: 1.5px dashed var(--border); border-radius: 24px; font-size: 15px; line-height: 1.45; max-width: 620px; }
@media (min-width: 768px) { .cabinet-progressEmpty { margin-top: 16px; padding: 22px 26px; font-size: 16px; } }


/* ===== insights (из app/student/progress-insights.module.css) ===== */
.insights-insights { display: grid; gap: 18px; min-width: 0; }
.insights-insights section { min-width: 0; border: 1.5px solid var(--ink); border-radius: 26px; padding: 22px; }
.insights-insights h2 { font-size: 24px; line-height: 1.15; margin: 0; }
.insights-insights p { font-size: 14px; line-height: 1.5; margin: 12px 0; }
.insights-weak { background: var(--lilac-light); }
/* A sticker like the task numbers: outlined, so it does not melt into the lilac card. */
.insights-eyebrow { display: inline-block; padding: 5px 11px; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 8px; font-size: 13px; font-weight: 800; transform: rotate(-3deg); margin-bottom: 16px; }
.insights-tasks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.insights-tasks li { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.5; }
.insights-taskText { flex: 1; min-width: 0; display: grid; gap: 8px; }
.insights-bar { display: block; height: 10px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); overflow: hidden; }
.insights-bar > span { display: block; height: 100%; background: var(--lilac); border-right: 1.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 999px; }
.insights-tasks li > b { flex: 0 0 64px; text-align: center; padding: 10px 4px; border: 1.5px solid var(--ink); background: var(--lilac); border-radius: 10px; font-size: 22px; }
.insights-perfect { font-size: 20px !important; font-weight: 700; padding: 16px 0; }
/* The trend is as tall as the weak-tasks card next to it: the chart takes the free height. */
.insights-trend { background: var(--white); display: flex; flex-direction: column; }
.insights-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.insights-heading > span { font-size: 12px; font-weight: 700; }
.insights-figure { margin: 0; flex: 1; display: flex; flex-direction: column; }
.insights-chart { flex: 1; min-height: 130px; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 0 20px 0 8px; margin-top: 12px; }
.insights-plot { display: block; width: 100%; height: 100%; min-width: 0; overflow: visible; }
.insights-value { fill: var(--ink); font-size: 14px; font-weight: 900; }
.insights-date { fill: var(--muted); font-size: 13px; font-weight: 500; }
.insights-scale { position: relative; color: var(--muted); font-size: 12px; font-weight: 500; }
.insights-scale span { position: absolute; right: 10px; transform: translateY(-50%); }
.insights-grid { stroke: var(--border); stroke-dasharray: 4 5; }
.insights-line { stroke: var(--purple); stroke-width: 3; fill: none; }
.insights-point { fill: var(--lilac); stroke: var(--ink); stroke-width: 1.5; }
/* Three numbers under the chart: last, best, change since the previous variant («Изменение»). */
.insights-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.insights-stats div { background: var(--paper); border-radius: 14px; padding: 8px 12px; min-width: 0; }
.insights-stats dt { font-size: 12px; color: var(--muted); }
.insights-stats dd { margin: 0; font-size: 18px; font-weight: 900; white-space: nowrap; }
@media (min-width: 768px) {
  /* Same edges as «Мой прогресс»: two halves of its four-column grid, equal height. */
  .insights-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
  .insights-insights section { padding: 28px; }
}


/* ===== review (из app/student/results/[resultId]/review.module.css) ===== */
/* Result review: the full task for every mistake, correct tasks folded. */
.review-page { display: flex; flex-direction: column; }
.review-page > section[aria-labelledby="written-heading"] { margin: 16px 0 18px; }
.review-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 22px; }
.review-card { margin-top: 14px; }

/* Mock exam: closed until the full review, then the total with the grade. */
.review-pending { margin: 18px 0 4px; background: var(--lilac); border-radius: 28px; padding: 22px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.review-pending p { font-size: 17px; font-weight: 600; line-height: 1.45; max-width: 560px; }
.review-pendingSticker { background: var(--purple); color: var(--white); border-radius: 999px; padding: 6px 16px; font-weight: 900; font-size: 15px; transform: rotate(-3deg); }
.review-total { margin: 16px 0 6px; display: grid; gap: 12px; }
/* Lilac, not black: the page should read as the brand lilac with lime accents. */
.review-totalMain { background: var(--lilac); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 28px; padding: 20px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.review-totalMain span { font-size: 15px; font-weight: 700; color: var(--ink); width: 100%; }
.review-totalMain strong { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.review-totalMain small { font-size: 28px; color: var(--purple); }
.review-grade { margin-left: auto; background: var(--lime); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 22px; padding: 6px 18px 10px; font-size: 48px; font-weight: 900; line-height: 1; transform: rotate(3deg); }
.review-parts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.review-parts li { background: var(--white); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.review-parts span { font-size: 13px; color: var(--muted); }
.review-parts b { font-size: 18px; font-weight: 900; }
.review-testHeading { margin-top: 18px; }

.review-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.review-toggle { display: inline-flex; align-self: flex-start; gap: 4px; background: var(--white); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.review-toggle a { min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; justify-content: center; }
.review-toggle a[aria-current="page"] { background: var(--lilac); color: var(--ink); }
.review-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); background: var(--white); border-radius: 16px; padding: 10px 14px; }
.review-legend span { display: inline-flex; align-items: center; gap: 8px; }
.review-legend i { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 900; box-sizing: border-box; }
.review-legend i.review-hit { background: var(--lime); border: 1.5px solid var(--ink); }
.review-legend i.review-extra { background: var(--purple); color: var(--white); }
.review-legend i.review-missed { border: 2px dashed var(--ink); }

/* Options and places with the student's choice marked. Words go with colour. */
.review-markedChoices li { padding: 8px 10px; border-radius: 14px; margin: -2px 0; }
.review-markedChoices li.review-hit { background: #F2FBCF; }
.review-markedChoices li.review-hit .choice-number { border: 1.5px solid var(--ink); }
.review-markedChoices li.review-extra { background: #ECE9F2; }
.review-markedChoices li.review-extra .choice-number { background: var(--purple); color: var(--white); }
.review-markedChoices li.review-missed { outline: 2px dashed var(--ink); outline-offset: -2px; }
.review-markedChoices li.review-missed .choice-number { background: transparent; border: 2px dashed var(--ink); }
.review-optionState { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 800; white-space: nowrap; padding-left: 8px; }

.review-place { border-radius: 6px; padding: 0 2px; }
.review-place.review-hit { background: var(--lime); color: var(--ink); font-weight: 800; }
.review-place.review-extra { background: var(--purple); color: var(--white); font-weight: 800; }
.review-place.review-missed { outline: 1.5px dashed var(--ink); color: var(--ink); font-weight: 800; }

.review-matching { display: flex; gap: 8px; flex-wrap: wrap; }
.review-matching > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 10px 12px; border-radius: 14px; font-size: 13px; }
.review-matching > div b { font-size: 18px; }
.review-matching > .review-hit { background: #F2FBCF; border: 1.5px solid var(--ink); }
.review-matching > .review-extra { background: #ECE9F2; border: 1.5px solid var(--ink); }

.review-answers { display: flex; flex-wrap: wrap; gap: 10px; }
.review-answers p { margin: 0; padding: 12px 16px; border-radius: 16px; font-weight: 800; font-size: 16px; }
.review-yours { background: #ECE9F2; }
.review-right { background: var(--lime); }

.review-explanation { background: var(--lilac-light); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.review-explanation h3 { font-size: 16px; }

.review-groupText { background: var(--task-paper); border-radius: 16px; padding: 10px 14px; }
.review-groupText summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 28px; }
/* Doubled class: stronger than both .task-card p and .inside p, so the text
   looks the same in a mistake card and in a folded correct one. */
.review-groupBody.review-groupBody { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.review-groupBody.review-groupBody h3 { margin: 6px 0 0; font-size: 15px; font-weight: 800; color: var(--muted); }
.review-groupBody.review-groupBody p { margin: 0; font-size: 16px; line-height: 1.65; white-space: normal; }
.review-groupBody.review-groupBody small { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (min-width: 768px) {
  .review-groupBody.review-groupBody p { font-size: 17px; line-height: 1.7; }
}

/* A correct task folded into one line. */
.review-correct { background: var(--white); border-radius: 22px; padding: 0; margin: 0; }
.review-correct summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 44px; }
.review-correct summary::-webkit-details-marker { display: none; }
.review-correct details[open] summary { border-bottom: 1.5px dashed var(--border); }
.review-miniSticker { flex-shrink: 0; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 12px; font-weight: 900; font-size: 15px; }
.review-summaryText { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; min-width: 0; }
.review-summaryText b { font-weight: 800; }
.review-show { margin-left: auto; flex-shrink: 0; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.review-showText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.review-chevron { font-size: 22px; line-height: 1; transition: transform .15s; }
.review-correct details[open] .review-chevron { transform: rotate(180deg); }
.review-inside { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.review-inside p { font-size: 15px; line-height: 1.55; white-space: pre-line; }

.review-hint { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.review-hint a { font-weight: 700; color: var(--ink); }

@media (min-width: 768px) {
  /* Same edges as the header and the cabinet. */
  .review-page { width: 100%; }
  .review-total { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
  .review-totalMain { padding: 26px 32px; }
  .review-totalMain strong { font-size: 84px; }
  .review-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The tiles are as tall as the total card: the points fill them instead of empty space. */
  .review-parts li { justify-content: space-between; padding: 18px 22px; }
  .review-parts span { font-size: 15px; }
  .review-parts b { font-size: 40px; line-height: 1; letter-spacing: -.02em; }
  .review-pending { padding: 32px 36px; }
  .review-pending p { font-size: 20px; }
  .review-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .review-inside { padding: 24px 40px 32px; }
  .review-inside p { font-size: 18px; }
  .review-optionState { font-size: 13px; }
  .review-showText { position: static; width: auto; height: auto; overflow: visible; clip: auto; text-decoration: underline; }
  .review-correct details[open] .review-show { display: none; }
}
@media (prefers-reduced-motion: reduce) { .review-chevron { transition: none; } }

/* Словик: on the pending card, under the total (by grade) and on «работа отправлена». */
.review-pendingText { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.review-pendingSlovik { width: 130px; height: auto; align-self: center; }
/* The total card is a compact grid: score and words on the left, grade and Словик on the right. */
.review-totalMain { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label grade" "score grade" "cheer slovik"; column-gap: 12px; row-gap: 6px; align-items: end; }
.review-totalMain > span { grid-area: label; }
.review-totalMain > strong { grid-area: score; }
.review-totalMain > .review-grade { grid-area: grade; align-self: start; justify-self: end; margin: 0; }
.review-cheer { grid-area: cheer; align-self: center; font-size: 15px; font-weight: 700; line-height: 1.4; max-width: 300px; margin: 0; }
.review-cheerSlovik { grid-area: slovik; justify-self: end; width: 92px; height: auto; margin: -4px -6px -12px 0; }
.review-sent { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 22px; padding: 10px 18px 10px 12px; }
.review-sent p { font-size: 15px; line-height: 1.45; }
.review-sentSlovik { width: 76px; height: auto; flex-shrink: 0; }
@media (min-width: 768px) {
  .review-pending { flex-direction: row; align-items: center; justify-content: space-between; }
  .review-pendingSlovik { width: 190px; margin: -12px 0; }
  .review-totalMain strong { font-size: 104px; }
  .review-cheer { font-size: 18px; }
  .review-cheerSlovik { width: 124px; }
  .review-sentSlovik { width: 92px; }
}


/* ===== reminders (из app/teacher/reminders.module.css) ===== */
/* Teacher reminders: new written works since the previous sign-in and students to nudge. */
.reminders-reminders { display: grid; gap: 12px; }
.reminders-fresh { background: var(--ink); color: var(--white); border-radius: 26px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.reminders-fresh p { margin: 0; font-weight: 700; }
.reminders-fresh strong { display: inline-block; min-width: 44px; margin-left: 6px; padding: 0 10px; border-radius: 12px; background: var(--lime); color: var(--ink); font-size: 26px; font-weight: 900; text-align: center; }
.reminders-keep { white-space: nowrap; }
.reminders-fresh small { display: block; margin-top: 4px; font-weight: 400; color: #CFC9DA; }
.reminders-fresh a { color: var(--white); font-weight: 700; }
.reminders-absent { background: var(--white); border-radius: 26px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.reminders-absent h3 { margin: 0; font-size: 18px; }
.reminders-absent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.reminders-absent li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 10px 0; border-top: 1px dashed var(--border); overflow-wrap: anywhere; }
.reminders-absent li span { color: var(--muted); font-size: 14px; }
.reminders-newBadge { display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--lime); border: 1.5px solid var(--ink); font-size: 12px; font-weight: 800; vertical-align: 2px; }

@media (min-width: 768px) {
  .reminders-reminders { grid-template-columns: minmax(260px, 1fr) 2fr; align-items: start; }
  .reminders-reminders > :only-child { grid-column: 1 / -1; }
}


/* ===== stats (из app/teacher/stats/stats.module.css) ===== */
/* Mistakes per task: one series, so one hue (purple, 3:1 on white), values in ink. */
.stats-page { display: flex; flex-direction: column; gap: 14px; }
.stats-lead { color: var(--muted); }
.stats-worst { background: var(--lime-light); border-radius: 18px; padding: 14px 18px; font-weight: 600; }
.stats-chart { list-style: none; padding: 8px 0; margin: 0; background: var(--white); border-radius: 24px; display: flex; flex-direction: column; }
.stats-chart > li + li { border-top: 1px solid var(--paper); }
.stats-chart summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px; align-items: center; gap: 12px; min-height: 48px; padding: 4px 18px; }
.stats-chart summary::-webkit-details-marker { display: none; }
.stats-chart summary:hover { background: var(--task-paper); }
.stats-chart details[open] summary { background: var(--lilac-light); }
.stats-number { font-weight: 900; font-size: 15px; justify-self: start; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.stats-number.stats-hot { background: var(--ink); color: var(--white); }
.stats-track { height: 12px; border-radius: 4px; background: var(--paper); overflow: hidden; }
.stats-bar { display: block; height: 100%; min-width: 0; background: var(--purple); border-radius: 0 4px 4px 0; }
.stats-value { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.stats-value b { font-size: 16px; color: var(--ink); font-weight: 900; margin-right: 4px; }
.stats-students { list-style: none; margin: 0; padding: 8px 18px 16px 94px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.stats-students li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.stats-students span { color: var(--muted); }
.stats-none { padding: 8px 18px 16px 94px; font-size: 14px; color: var(--muted); }

@media (max-width: 480px) {
  .stats-chart summary { grid-template-columns: 62px minmax(0, 1fr) 84px; gap: 8px; padding: 4px 12px; }
  .stats-students, .stats-none { padding-left: 18px; }
}
@media (min-width: 768px) {
  .stats-page { width: 100%; }
}


/* ===== profile (из app/teacher/students/[login]/profile.module.css) ===== */
/* A student's page in the teacher's cabinet. */
.profile-page { width: 100%; }
.profile-top { display: flex; flex-direction: column; gap: 16px; }
.profile-top h1 { margin: 0; }
.profile-meta { margin-top: 10px; font-size: 14px; color: var(--muted); }
.profile-statNote { font-size: 13px; font-weight: 700; }
.profile-none { color: var(--muted); }
.profile-variants { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.profile-variants li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--white); border: 1.5px solid transparent; }
.profile-variants li.profile-closed { background: transparent; border: 1.5px dashed var(--border); color: var(--muted); }
.profile-variants li.profile-opened { border-color: var(--lilac); }
.profile-number { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--ink); font-weight: 800; background: var(--paper); }
.profile-solved .profile-number { background: var(--lime); }
.profile-opened .profile-number { background: var(--lilac); }
.profile-closed .profile-number { border-style: dashed; border-color: var(--border); }
.profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.profile-info b { font-size: 16px; overflow-wrap: anywhere; }
.profile-info small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.profile-info .profile-score { color: var(--ink); font-weight: 700; }
.profile-open { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
  /* The text takes the whole line; «Разбор →» goes under it instead of squeezing it. */
  .profile-variants li { flex-wrap: wrap; align-items: flex-start; }
  .profile-info { flex-basis: calc(100% - 54px); }
  .profile-open { margin-left: 54px; }
}
@media (min-width: 768px) {
  .profile-top { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .profile-top > :last-child { min-width: 320px; }
  .profile-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== telegram (карточка «Уведомления в Telegram») ===== */
.telegram-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; margin-top: 28px; padding: 18px; border: 1.5px solid var(--ink); border-radius: 24px; background: var(--white); }
.telegram-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--ink); }
.telegram-text h2 { font-size: 19px; line-height: 1.2; margin: 0 0 4px; }
.telegram-text p { margin: 0; font-size: 14px; line-height: 1.45; }
.telegram-on { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); border: 1.5px solid var(--ink); margin-right: 8px; vertical-align: 0; }
.telegram-card form { grid-column: 1 / -1; }
.telegram-connect { width: 100%; }
.telegram-off { width: 100%; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); min-height: 48px; }
@media (min-width: 768px) {
  .telegram-card { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 24px; gap: 20px; }
  .telegram-card form { grid-column: auto; }
  .telegram-connect, .telegram-off { width: auto; }
  .telegram-text h2 { font-size: 21px; }
  .telegram-text p { font-size: 15px; }
}

/* «Настройки»: the cron address can be long. */
.settings-cron { display: block; overflow-wrap: anywhere; padding: 10px 12px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--border); }
.site-version { margin-top: 32px; font-size: 13px; opacity: .6; }
.site-version a { color: inherit; }