/* =========================================================================
   MEDATLON — оформление кабинета.

   Направление задано макетом «App-Medatlon» (Figma, сентябрь 2026): белая
   бумага в клетку, карточки в толстой зелёной рамке, широкие плитки сплошной
   заливки, кнопки-пилюли. Цвет теперь несёт смысл сам, без системы обводок:
     зелёный   — рамка карточки, шапка, «всё идёт по плану»
     розовый   — акцент, результат, внимание
     синий     — разделы и показатели
     тёмный    — действие (кнопка)

   Внешних шрифтов и библиотек нет: строгая CSP (см. docs/02-security.md §8)
   не допускает сторонних источников, а системный стек одинаково хорошо
   держит кириллицу и латиницу.

   ВАЖНО про ширину полос и кольца. Атрибут style="" браузер вырезает —
   CSP задана без 'unsafe-inline' для стилей. Поэтому проценты задаются
   классами .pct-0 … .pct-100 в конце файла, а не разметкой.
   ========================================================================= */
:root {
  /* Цвета сняты из макета точными значениями */
  --paper: #ffffff;
  --grid: #f1f1f1;
  --grid-strong: #f1f1f1;
  --card: #ffffff;

  --ink: #000000;
  --ink-soft: #6a6a6a;
  --ink-faint: #9a9a9a;
  --ink-dark: #292929;      /* кнопки и крупные цифры */

  --pink: #fe85bc;
  --pink-soft: #ffe3f0;
  --pink-wash: rgba(254, 133, 188, 0.34);
  --pink-text: #ff60a8;

  --lime: #a6c762;
  --lime-soft: #e0eec8;
  --lime-wash: #e5f1cc;

  --blue: #71b6fb;
  --blue-wash: rgba(113, 182, 251, 0.37);
  --blue-text: #1389ff;

  --amber: #e2a33c;
  --amber-soft: #fbf0da;

  --track: #efefef;         /* дорожка полосы */
  --chip: #ececed;          /* нейтральная плашка */
  --rule: #bababb;          /* разделитель внутри карточки */

  --radius: 19px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Рамка карточки — зелёная и толстая, это главный опознавательный знак.
     --border остаётся тонкой чёрной: ею обведены кнопки, поля и вопросы. */
  --frame: 5px solid var(--lime);
  --border: 2px solid var(--ink);
  --border-soft: 1px solid #e3e3e0;

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --gap: 18px;
  --cell: 17px;             /* шаг клетки на фоне */
  --shadow: 0 2px 0 rgba(20, 20, 15, 0.9);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Декор намеренно выходит за край страницы. clip обрезает его, не заводя
     полосы прокрутки вбок — в отличие от hidden, которая её оставляет.
     Ставить нужно и на html, и на body: одного body не хватает. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  /* Клетка одной сеткой: в макете она ровная, без крупных линий */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  /* Декор намеренно выходит за край. clip обрезает его, не заводя
     полосы прокрутки вбок — в отличие от hidden, который её оставляет. */
  overflow-x: clip;
}

/* ── Типографика ────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}
h3 {
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

p {
  margin: 0 0 0.85em;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--pink);
}

/* Надпись-ярлык: разрежённые прописные, моно. Используется для заголовков
   секций и подписей к числам. */
/* Подпись над блоком. В прежнем оформлении — разрежённая моноширинная
   капитель; макет вместо неё ставит обычный жирный заголовок. Имя класса
   сохранено: он стоит в 57 местах разметки. */
.eyebrow {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Тексты подписей писались под разрежённую капитель и потому набраны
   строчными («ближайшие занятия»). Поднимаем первую букву стилем, а не
   правкой шаблонов: эти строки проверяются тестами дословно. */
.eyebrow::first-letter {
  text-transform: uppercase;
}


/* Обращение к студенту на стартовой странице. */
.greeting {
  margin-bottom: 0.6em;
}

/* Подзаголовок под h1: объясняет, что делать на этой странице. */
.lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: -0.2em 0 1.4em;
  max-width: 46em;
}

/* Заглушка на месте ещё не загруженного материала. Слот виден всегда:
   так на странице занятия понятно, чего не хватает. */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line, #d9d9d9);
  border-radius: 12px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.placeholder--video {
  aspect-ratio: 16 / 9;
}

/* Домашнее задание: нумерованный список, где пункты с двоеточием —
   заголовки групп, а не сами задания. */
.hw {
  margin: 0;
  padding-left: 1.4em;
}

.hw li {
  margin: 0 0 0.7em;
}

/* Текст пункта домашки и кнопка скачивания в одну строку: кнопка прижата
   вправо и не уезжает вниз на длинном описании. */
.hw__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.hw__row > span {
  flex: 1;
}

.hw__group {
  font-weight: 600;
  margin-top: 1.1em;
}

.hw__group:first-child {
  margin-top: 0;
}

.muted {
  color: var(--ink-soft);
}

.tiny {
  font-size: 0.82rem;
}

.numeric {
  font-variant-numeric: tabular-nums;
}

/* ── Каркас ─────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 17px 56px;
  position: relative;
  z-index: 1;
}

.topbar {
  position: relative;
  z-index: 2;
  padding: 0 17px;
  margin-bottom: 22px;
}

.topbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Плашка «врезана» в верх экрана: снизу скруглена, а по бокам от неё идут
   обратные скругления — их рисуют ::before/::after радиальной заливкой.
   В макете это отдельные фигуры Vector 1073/1074. */
.topbar__tab {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  background: var(--lime);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 30px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar__tab::before,
.topbar__tab::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--radius);
  height: var(--radius);
  pointer-events: none;
}

.topbar__tab::before {
  left: calc(var(--radius) * -1);
  background: radial-gradient(circle at 0 100%, transparent var(--radius), var(--lime) 0);
}

.topbar__tab::after {
  right: calc(var(--radius) * -1);
  background: radial-gradient(circle at 100% 100%, transparent var(--radius), var(--lime) 0);
}

/* Круглая кнопка шапки: слева профиль, справа меню */
.iconbtn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--ink-dark);
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}

.iconbtn svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Логотип: тонкие прописные, вместо «O» — знак-молекула инлайновым SVG */
.logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.logo:hover {
  color: #fff;
}

.logo svg {
  width: 1.5em;
  height: 1.5em;
  display: block;
  margin-left: 2px;
  color: #fff;
}

/* Меню спрятано за круглой кнопкой и раскрывается по :target — без
   JavaScript, как того требует CSP. */
.nav {
  display: none;
  position: absolute;
  right: 17px;
  top: 58px;
  z-index: 5;
  background: #fff;
  border: var(--border);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 215px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

#menu:target .nav {
  display: block;
}

.nav a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.nav a:hover {
  background: var(--lime-soft);
  color: var(--ink);
}

.nav a.is-active {
  background: var(--lime);
  color: #fff;
}

.nav__lang {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}

.nav__lang button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: var(--border-soft);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.nav__lang button:hover {
  background: var(--lime-soft);
}

.nav__lang button.is-active {
  background: var(--lime);
  color: #fff;
}

.banner {
  background: var(--amber-soft);
  border-bottom: var(--border);
  padding: 8px 18px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Карточки ───────────────────────────────────────────────────────────── */
.card {
  position: relative;
  z-index: 1;
  background: var(--card);
  border: var(--frame);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: var(--gap);
}

@media (min-width: 700px) {
  .card {
    padding: 26px 24px;
  }
}

.card--flat {
  box-shadow: none;
}

.card--accent {
  background: var(--pink-soft);
  border-color: var(--pink);
}

/* Пунктирная рамка = пояснение, а не данные */
.note {
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: #fafafa;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: var(--gap);
}

.note strong {
  color: var(--ink);
}

/* Раскрывающийся блок: правила расчёта и длинные списки библиотеки.
   Работает на <details>, без JavaScript — CSP этого и требует. */
.note--details > summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}

.note--details > summary::-webkit-details-marker {
  display: none;
}

.note--details > summary::after {
  content: " ▾";
  color: var(--ink-faint);
}

.note--details[open] > summary::after {
  content: " ▴";
}

.note__body {
  margin-top: 12px;
}

.grid {
  display: grid;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--4 {
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 700px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Четыре показателя строго в одну строку: «Активность» уезжала на вторую,
   и разбивка балла переставала читаться одним взглядом. На узком экране
   переносится, иначе карточки станут нечитаемыми. */
.grid--metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 860px) {
  .grid--metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .grid--metrics {
    grid-template-columns: 1fr;
  }
}

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
}

/* ── Балл ───────────────────────────────────────────────────────────────── */
.score {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.score__value {
  font-size: clamp(3.2rem, 12vw, 4.6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.score__max {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-faint);
}

.score__delta {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: var(--border-soft);
}

.score__delta--up {
  background: var(--lime-soft);
  border-color: var(--lime);
}

.score__delta--down {
  background: var(--pink-soft);
  border-color: var(--pink);
}

/* ── Метрика ────────────────────────────────────────────────────────────── */
.metric {
  border: var(--frame);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--card);
}

.metric__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.metric__title {
  font-weight: 700;
  font-size: 0.95rem;
}

/* Пилюля = вес метрики */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--chip);
  color: var(--ink-soft);
  white-space: nowrap;
}

.pill--blue {
  background: var(--blue-wash);
  color: var(--blue-text);
}

.pill--pink {
  background: var(--pink-wash);
  color: var(--pink-text);
}

.pill--lime {
  background: var(--lime-wash);
  color: #5d7a25;
}

.metric__percent {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.metric__explanation {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 8px;
}

.metric__detail {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 2px;
}

.bar {
  height: 13px;
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
  margin-top: 12px;
}

.bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--blue);
}

.bar__fill--pink {
  background: var(--pink);
}

.bar__fill--blue {
  background: var(--blue);
}

.bar__fill--lime {
  background: var(--lime);
}

/* ── График ─────────────────────────────────────────────────────────────── */
.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart__grid {
  stroke: rgba(20, 20, 15, 0.12);
  stroke-width: 1;
}

.chart__line-me {
  fill: none;
  stroke: var(--pink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart__line-avg {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.chart__dot {
  fill: var(--card);
  stroke: var(--pink);
  stroke-width: 2.5;
}

.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 10px;
}

.legend__swatch {
  display: inline-block;
  width: 22px;
  height: 0;
  border-top: 2.5px solid var(--pink);
  vertical-align: middle;
  margin-right: 7px;
}

.legend__swatch--avg {
  border-top: 2px dashed var(--blue);
}

/* ── Серия KFF ──────────────────────────────────────────────────────────── */
.streak {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.streak__day {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: var(--border-soft);
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-family: var(--mono);
  color: var(--ink-faint);
  background: var(--card);
}

.streak__day--done {
  background: var(--lime);
  border-color: var(--ink);
  color: var(--ink);
}

.streak__day--missed {
  background: var(--pink-soft);
  border-color: var(--pink);
}

.streak__day--rest {
  border-style: dashed;
  background: transparent;
}

.streak__day--today {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.03em;
  line-height: 1;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: var(--border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.08s ease;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.btn:hover {
  transform: translateY(-1px);
  color: var(--ink);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--ink-dark);
  border-color: var(--ink-dark);
  color: #fff;
}

.btn--primary:hover {
  color: #fff;
}

.btn--lime {
  background: var(--lime);
  border-color: var(--lime);
  color: #fff;
}

.btn--ghost {
  border-color: var(--rule);
  background: transparent;
  color: var(--ink-soft);
}

.btn[disabled],
.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--wide {
  width: 100%;
  justify-content: center;
}

/* Кнопка внутри строки списка: не должна перебивать сам текст пункта */
/* Кнопка внутри строки списка: не должна перебивать сам текст пункта */
.btn--sm {
  padding: 10px 18px;
  font-size: 0.88rem;
  white-space: nowrap;
}

/* ── Формы ──────────────────────────────────────────────────────────────── */
label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  font: inherit;
  padding: 11px 14px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2.5px solid var(--pink);
  outline-offset: 2px;
}

.field {
  margin-bottom: 16px;
}

.field__help {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 5px;
}

.errorlist,
.error {
  color: #b3103f;
  font-size: 0.86rem;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

/* ── Сообщения ──────────────────────────────────────────────────────────── */
.message {
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--lime-soft);
  font-size: 0.92rem;
}

.message--error {
  background: var(--pink-soft);
  border-color: var(--pink);
}

.message--warning {
  background: var(--amber-soft);
  border-color: var(--amber);
}

/* ── Списки и таблицы ───────────────────────────────────────────────────── */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list__item {
  border-bottom: 1px solid var(--rule);
  padding: 15px 0;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.list__date {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  min-width: 96px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  padding: 0 10px 10px 0;
  border-bottom: var(--border);
}

td {
  padding: 11px 10px 11px 0;
  border-bottom: var(--border-soft);
  vertical-align: middle;
}

tr.is-me td {
  background: var(--pink-soft);
  font-weight: 700;
}

.rank {
  font-family: var(--mono);
  font-weight: 700;
  width: 44px;
}

/* Разрыв в таблице: между открытыми позициями и своим окружением */
.table-gap td {
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--mono);
  letter-spacing: 0.3em;
  border-bottom: 1.5px dashed rgba(20, 20, 15, 0.3);
  padding: 8px 0;
}

/* ── Проверка знаний ────────────────────────────────────────────────────── */
.question {
  border: var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: var(--gap);
  background: var(--card);
}

.question__number {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.question__text {
  font-size: 1.04rem;
  margin-bottom: 16px;
}

.question__context {
  font-size: 0.94rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--ink-soft);
  padding: 2px 0 2px 12px;
  margin-bottom: 14px;
}

.question__image {
  display: block;
  max-width: min(100%, 520px);
  height: auto;
  margin: 0 0 14px;
}

.option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--card);
}

.option:hover {
  border-color: var(--ink);
}

.option input {
  width: auto;
  margin: 3px 0 0;
  accent-color: var(--pink);
  flex: 0 0 auto;
}

.option--correct {
  background: var(--lime-soft);
  border: 1.5px solid var(--lime);
}

.option--wrong {
  background: var(--pink-soft);
  border: 1.5px solid var(--pink);
}

.option__mark {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.timer {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--gap);
}

.timer--warning {
  background: #b3103f;
}

.explanation {
  border-left: 3px solid var(--ink);
  padding: 2px 0 2px 14px;
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.save-state {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

/* ── Прочее ─────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--gap);
  border-bottom: var(--border);
  padding-bottom: 12px;
}

.tabs a {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--chip);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.tabs a.is-active {
  background: var(--ink-dark);
  color: #fff;
}

.tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  border: 0;
  color: var(--ink-soft);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  background: var(--ink-faint);
}

.status-dot--done {
  background: var(--lime);
}

.status-dot--todo {
  background: var(--pink);
}

.empty {
  text-align: center;
  padding: 36px 20px;
  border: var(--border-soft);
  border-radius: var(--radius);
  background: #fafafa;
  color: var(--ink-soft);
}

.auth {
  max-width: 440px;
  margin: 6vh auto;
}

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .card {
    padding: 18px;
  }
  .topbar__inner {
    gap: 10px;
  }
  .nav {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  body {
    background: #fff;
  }
  .topbar,
  .nav,
  .footer {
    display: none;
  }
}

/* =========================================================================
   Правки по документу методиста от 19–20.08.2026: шапка с отсчётом до
   экзамена, плитки быстрых переходов, сетка календаря, статусы уроков.
   ========================================================================= */

/* ── Шапка главной ──────────────────────────────────────────────────────── */
.hero {
  margin-bottom: 26px;
}

.hero__title {
  margin-bottom: 4px;
}

.hero__year {
  color: var(--pink);
}

.hero__countdown {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}

.score__pct {
  font-size: 0.5em;
  margin-left: 2px;
}

/* ── Плитки быстрых переходов ───────────────────────────────────────────── */
.tile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 84px;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 0;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.1s ease;
}

.tile:hover {
  transform: translateY(-2px);
  color: var(--ink);
}

.tile:active {
  transform: translateY(0);
}

.tile__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

.tile__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Иконки слегка повёрнуты: в макете они нарисованы от руки */
.tile--course .tile__icon  { transform: rotate(9deg); }
.tile--library .tile__icon { transform: rotate(-16deg); }
.tile--chat .tile__icon    { transform: rotate(8deg); }
.tile--curator .tile__icon { transform: rotate(-8deg); }

@media (min-width: 700px) {
  .tile {
    min-height: 96px;
    padding: 16px 28px;
  }
  .tile__icon {
    width: 50px;
    height: 50px;
  }
}

.tile h3 {
  margin: 0 0 2px;
  font-size: 1.25rem;
}

.tile p {
  margin: 0;
  font-size: 0.9rem;
}

.tile--course  { background: var(--blue); }
.tile--library { background: var(--lime); }
.tile--chat    { background: var(--pink); }
.tile--curator { background: var(--lime); }

/* ── Карточки разделов курса ────────────────────────────────────────────── */
.card--section {
  text-decoration: none;
  display: block;
  border: 0;
  color: var(--ink);
}

.card--section:hover {
  color: var(--ink);
}

.card--bms {
  background: var(--blue);
}

.card--kff {
  background: var(--lime);
}

.card--tv {
  background: var(--pink);
}

.card--sek {
  background: var(--lime);
}

.card--mf {
  background: var(--blue);
}

.card--sim {
  background: var(--lime);
}

/* Закрытый раздел остаётся цветным — меняется только курсор и замок в
   заголовке. На нажатие карточка коротко покачивается: это заметнее, чем
   отсутствие реакции, и не требует ни строчки JavaScript. */
.card--locked {
  cursor: not-allowed;
}

.card--locked .lock {
  font-size: 0.8em;
  vertical-align: 2px;
}

.card--locked:active {
  animation: shake 0.32s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px) rotate(-0.6deg);
  }
  40% {
    transform: translateX(5px) rotate(0.5deg);
  }
  60% {
    transform: translateX(-3px) rotate(-0.3deg);
  }
  80% {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--locked:active {
    animation: none;
  }
}

/* Теги предметов на карточке раздела — это перечисление, а не кнопки:
   раньше они выглядели кликабельными, и в них пытались тыкать. */
/* Предметы на карточке раздела — перечисление, а не кнопки */
.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
}

.bullets li {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

.bullets li::before {
  content: none;
}

/* ── Статусы уроков в списке предмета ───────────────────────────────────── */
.pill--done {
  background: var(--lime-soft);
  border-color: var(--lime);
  color: var(--ink);
}

.pill--todo {
  background: var(--pink-soft);
  border-color: var(--pink);
  color: var(--pink);
}

.pill--none {
  border-color: var(--ink);
  color: var(--ink);
}

.pill--locked {
  color: var(--ink-faint);
}

.list__item--locked {
  color: var(--ink-faint);
}

.list__item--locked .list__date {
  color: var(--ink-faint);
}

/* ── Календарь: классическая сетка месяца ───────────────────────────────── */
.cal__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}

.cal__month {
  font-weight: 600;
  text-transform: capitalize;
  min-width: 170px;
  text-align: center;
}

.cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: var(--border-soft);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
}

.cal {
  display: grid;
  gap: 4px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.cal__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal__row:not(:last-child) {
  border-bottom: var(--border-soft);
}

.cal__name {
  padding: 10px 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
}

.cal__row--names {
  background: rgba(20, 20, 15, 0.03);
}

.cal__name:not(:last-child),
.cal__cell:not(:last-child) {
  border-right: var(--border-soft);
}

.cal__cell {
  min-height: 86px;
  padding: 5px;
  border-radius: 10px;
  background: #fafafa;
  border: 0;
}

.cal__cell--muted .cal__day {
  color: var(--ink-faint);
}

.cal__cell--today .cal__day {
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 1px 6px;
}

.cal__day {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.cal__event {
  display: block;
  margin-top: 3px;
  padding: 4px 6px;
  background: var(--blue-wash);
  color: var(--blue-text);
  border-radius: 7px;
  text-decoration: none;
  font-size: 0.7rem;
  line-height: 1.2;
  overflow: hidden;
}

.cal__event strong {
  display: block;
  font-weight: 600;
}

/* Запланированное занятие: пунктирная рамка, страница открывается без материалов */
.cal__event--soon {
  background: transparent;
  border: 1px dashed var(--ink-faint);
  color: var(--ink-soft);
}

.cal__time,
.cal__topic {
  display: block;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .cal__row {
    grid-template-columns: 1fr;
  }
  .cal__row--names {
    display: none;
  }
  .cal__cell {
    min-height: 0;
    border-right: 0;
    border-bottom: var(--border-soft);
  }
  .cal__cell:empty {
    display: none;
  }
}

/* ── Банк заданий: варианты ответа при проверке ─────────────────────────── */
.opts {
  margin: 12px 0;
  padding-left: 1.3em;
  list-style: upper-alpha;
}

.opts__item {
  margin: 0 0 6px;
}

.opts__item--right {
  font-weight: 600;
}

.report {
  margin-top: 12px;
}

.report summary {
  cursor: pointer;
}

.report__form {
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin-top: 10px;
}

.opts__mark {
  display: inline;
  margin-left: 10px;
}

.opts__change {
  margin: 8px 0;
}

.opts__change summary {
  cursor: pointer;
}

/* Резервные коды 2FA: моноширинные, крупно, чтобы переписать без ошибок */
.codes {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.codes li {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

/* ── Задания на соответствие ────────────────────────────────────────────── */
.matching {
  display: grid;
  gap: 16px;
}

.matching__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.matching__label {
  flex: 1;
}

/* Пока скрипт не отработал, страница остаётся списками: слот скрыт,
   select виден. После апгрейда — наоборот. */
.matching__slot {
  display: none;
}

.matching--live .matching__slot {
  display: flex;
  align-items: center;
  min-width: 220px;
  min-height: 44px;
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed rgba(20, 20, 15, 0.35);
}

.matching--live .matching__slot.is-empty::before {
  content: "перетащите сюда";
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 0 8px;
}

.matching--live .matching__select {
  display: none;
}

.matching__bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: var(--border-soft);
  min-height: 56px;
}

.chip {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--card);
  border: var(--border);
  cursor: grab;
  user-select: none;
  font-size: 0.9rem;
}

.chip.is-dragging {
  opacity: 0.4;
}

.chip.is-picked {
  background: var(--pink-soft);
  border-color: var(--pink);
}

@media (max-width: 640px) {
  .matching__row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Материалы домашки одной строкой: в ряд помещается около пяти кнопок,
   на телефоне переносится само. */
.hw-links {
  margin-top: 16px;
}

.hw-links__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Страница урока: материалы и домашка ────────────────────────────────── */
.mat-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.mat-row + .mat-row {
  border-top: var(--border-soft);
}

.mat-row__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--lime-wash);
  font-size: 1.15rem;
}

.mat-row__body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mat-row__label {
  font-size: 1.02rem;
}

.mat-row__body > span:not(.tiny) {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.embed + .u-semi,
.embed + .mat-row {
  margin-top: 14px;
}

/* Домашка: шаги с номером, внутри пункт с пояснением и кнопками */
.hw-step {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--border-soft);
}

.hw-step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lime);
  color: #fff;
  font-weight: 700;
}

.hw-step__body {
  flex: 1;
  min-width: 0;
}

.hw-step h3 {
  margin: 4px 0 12px;
  font-size: 1.05rem;
}

.hw-item {
  margin-bottom: 16px;
}

.hw-item__title {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.hw-item > p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.hw-btn--video {
  background: var(--pink-soft);
  border-color: var(--pink);
}

.hw-btn--article {
  background: var(--blue-wash);
  border-color: var(--blue);
}

.hw-btn--anki {
  background: var(--lime-wash);
  border-color: var(--lime);
}

.hw-btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

/* Тренировочный тест: одно пояснение и по строке на тему */
.hw-test {
  padding: 14px 16px;
  border: var(--border-soft);
  border-radius: var(--radius);
  background: #fafafa;
}

.hw-test > p {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.hw-test > p strong {
  color: var(--ink);
}

.hw-test__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 0;
  border-top: var(--border-soft);
}

.hw-test__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.hw-test__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 460px) {
  .hw-step {
    gap: 10px;
  }

  .mat-row {
    flex-wrap: wrap;
  }
}

/* ── Подиум рейтинга ────────────────────────────────────────────────────── */
.title-accent {
  color: var(--pink);
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: var(--gap);
}

.podium__place {
  border: var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}

.podium__place--1 {
  background: var(--pink-soft);
}
.podium__place--2 {
  background: #e8ecfa;
}
.podium__place--3 {
  background: var(--lime-soft);
}

.podium__nick {
  font-weight: 700;
  margin: 0 0 4px;
}

.podium__score {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}

.pill--me {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}

.delta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: var(--border-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.delta--up {
  background: var(--lime-soft);
}
.delta--down {
  background: var(--pink-soft);
}

@media (max-width: 640px) {
  .podium {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   Блоки, которых в прежнем оформлении не было: отсчёт до экзамена
   костяшками, кольцо общего балла, цели на неделю, декор.
   ========================================================================= */

/* ── Обратный отсчёт ────────────────────────────────────────────────────── */
.countdown {
  position: relative;
  z-index: 1;
  background: var(--lime);
  border-radius: var(--radius);
  padding: 20px 14px 22px;
  margin-bottom: var(--gap);
  text-align: center;
  overflow: hidden;
}

.countdown__sticker {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  padding: 4px 18px 5px;
  transform: rotate(-0.6deg);
  margin-bottom: 2px;
}

.countdown__title {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-dark);
  margin: 0 0 16px;
  line-height: 1.05;
}

.flip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.flip__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.flip__cards {
  display: flex;
  gap: 4px;
}

/* Костяшка перекидных часов. Линия поперёк — ::after, не картинка. */
.flip__card {
  position: relative;
  width: 42px;
  height: 74px;
  background: #fff;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink-dark);
  font-variant-numeric: tabular-nums;
}

.flip__card[hidden] {
  display: none;
}
.flip__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px solid var(--ink-dark);
}

.flip__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-dark);
}

.flip__colon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  height: 74px;
  padding: 0 1px;
}

.flip__colon i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-dark);
  display: block;
}

/* ── Карточка прогресса: зелёный верх с кольцом, белый низ с полосами ──── */
.progress-card {
  padding: 0;
  overflow: hidden;
}

.progress-card__top {
  background: var(--lime);
  padding: 24px 20px;
  border-radius: calc(var(--radius) - 5px) calc(var(--radius) - 5px) 0 0;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.progress-card__head {
  flex: 1 1 200px;
  min-width: 190px;
}

.progress-card__head h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
}

.progress-card__head p {
  font-size: 0.95rem;
  margin: 0 0 14px;
}

.progress-card__body {
  padding: 6px 16px 10px;
}

/* Кольцо: бледный ободок снаружи, дуга результата, белый круг в центре.
   Процент задаётся классом .pct-N (см. конец файла), а не атрибутом style. */
.ring {
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--lime-soft);
  display: grid;
  place-items: center;
  position: relative;
}

.ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(var(--pink) var(--pct, 0%), var(--lime-soft) 0);
}

.ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: #fff;
}

.ring b {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ── Строка показателя в карточке прогресса ─────────────────────────────── */
.bar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.bar-row:first-child {
  border-top: 0;
}

.bar-row .bar {
  flex: 1 1 auto;
  margin-top: 0;
}

.bar-row__name {
  flex: 0 0 auto;
  min-width: 104px;
  font-size: 0.95rem;
}

.bar-row__pct {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: right;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* ── Цели на неделю ─────────────────────────────────────────────────────── */
.goals__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.goals__head h2 {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1.5rem;
}

.goals__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.goals__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.goals {
  list-style: none;
  margin: 0;
  padding: 0;
}

.goals li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--lime);
  font-size: 0.95rem;
}

.goals li:first-child {
  border-top: 0;
}

/* Отметка: выполнено — зелёная заливка с белой галкой, нет — пустой квадрат */
.check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 3px solid var(--lime);
  display: grid;
  place-items: center;
}

.check--done {
  background: var(--lime);
}

.check svg {
  width: 14px;
  height: 14px;
  display: none;
}

.check--done svg {
  display: block;
}

/* ── Декор: розовый росчерк ─────────────────────────────────────────────── */
.decor {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.decor svg {
  display: block;
  width: 100%;
  height: 100%;
}

.decor--tr {
  top: -30px;
  right: -70px;
  width: 220px;
  height: 300px;
}

/* ── Широкий экран ──────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root {
    --cell: 26px;
    --radius: 26px;
  }

  .countdown {
    padding: 28px 24px 30px;
  }
  .countdown__title {
    font-size: 3.4rem;
  }
  .countdown__sticker {
    font-size: 1.45rem;
    padding: 5px 24px 6px;
  }

  .flip__card {
    width: 58px;
    height: 100px;
    font-size: 3.6rem;
  }
  .flip__colon {
    height: 100px;
    gap: 22px;
  }
  .flip__colon i {
    width: 7px;
    height: 7px;
  }
  .flip__label {
    font-size: 0.92rem;
  }

  .ring {
    width: 150px;
    height: 150px;
  }
  .ring::before {
    inset: 7px;
  }
  .ring::after {
    inset: 20px;
  }
  .ring b {
    font-size: 2.6rem;
  }

  .progress-card__head h2 {
    font-size: 2rem;
  }
  .progress-card__body {
    padding: 10px 22px 14px;
  }
  .bar-row__name {
    min-width: 150px;
    font-size: 1rem;
  }

  .card.progress-card {
    padding: 0;
  }
}

/* ── Узкий телефон ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .flip__card {
    width: 38px;
    height: 66px;
    font-size: 2.2rem;
  }
  .flip__colon {
    height: 66px;
    gap: 12px;
  }
  .countdown__title {
    font-size: 1.9rem;
  }
  /* На телефоне росчерк уходил за край так, что от него оставались одни
     петли и они читались как случайные пятна. Сдвигаем внутрь и уменьшаем —
     видна линия, а не обрывки. */
  .decor--tr {
    top: -16px;
    right: -44px;
    width: 132px;
    height: 180px;
    opacity: 0.85;
  }

  .cal__cell {
    min-height: 56px;
    padding: 3px;
    border-radius: 8px;
  }
  .cal__day {
    font-size: 0.68rem;
  }
  .cal__event {
    font-size: 0.55rem;
    padding: 2px 3px;
    border-radius: 5px;
  }
  .cal__row--names .cal__name {
    font-size: 0.56rem;
    padding: 2px 0;
  }
}

/* =========================================================================
   Проценты классами, а не атрибутом style.

   Причина не косметическая. CSP задана как style-src 'self' 'nonce-…', без
   'unsafe-inline'. Nonce на атрибут style не распространяется, поэтому
   браузер вырезает его целиком — ширина полосы, записанная как
   style="width:63%", до экрана не доезжает и полоса остаётся пустой.

   Один набор классов обслуживает и ширину полосы, и дугу кольца.
   ========================================================================= */
.pct-0 { --pct: 0%; }
.pct-1 { --pct: 1%; }
.pct-2 { --pct: 2%; }
.pct-3 { --pct: 3%; }
.pct-4 { --pct: 4%; }
.pct-5 { --pct: 5%; }
.pct-6 { --pct: 6%; }
.pct-7 { --pct: 7%; }
.pct-8 { --pct: 8%; }
.pct-9 { --pct: 9%; }
.pct-10 { --pct: 10%; }
.pct-11 { --pct: 11%; }
.pct-12 { --pct: 12%; }
.pct-13 { --pct: 13%; }
.pct-14 { --pct: 14%; }
.pct-15 { --pct: 15%; }
.pct-16 { --pct: 16%; }
.pct-17 { --pct: 17%; }
.pct-18 { --pct: 18%; }
.pct-19 { --pct: 19%; }
.pct-20 { --pct: 20%; }
.pct-21 { --pct: 21%; }
.pct-22 { --pct: 22%; }
.pct-23 { --pct: 23%; }
.pct-24 { --pct: 24%; }
.pct-25 { --pct: 25%; }
.pct-26 { --pct: 26%; }
.pct-27 { --pct: 27%; }
.pct-28 { --pct: 28%; }
.pct-29 { --pct: 29%; }
.pct-30 { --pct: 30%; }
.pct-31 { --pct: 31%; }
.pct-32 { --pct: 32%; }
.pct-33 { --pct: 33%; }
.pct-34 { --pct: 34%; }
.pct-35 { --pct: 35%; }
.pct-36 { --pct: 36%; }
.pct-37 { --pct: 37%; }
.pct-38 { --pct: 38%; }
.pct-39 { --pct: 39%; }
.pct-40 { --pct: 40%; }
.pct-41 { --pct: 41%; }
.pct-42 { --pct: 42%; }
.pct-43 { --pct: 43%; }
.pct-44 { --pct: 44%; }
.pct-45 { --pct: 45%; }
.pct-46 { --pct: 46%; }
.pct-47 { --pct: 47%; }
.pct-48 { --pct: 48%; }
.pct-49 { --pct: 49%; }
.pct-50 { --pct: 50%; }
.pct-51 { --pct: 51%; }
.pct-52 { --pct: 52%; }
.pct-53 { --pct: 53%; }
.pct-54 { --pct: 54%; }
.pct-55 { --pct: 55%; }
.pct-56 { --pct: 56%; }
.pct-57 { --pct: 57%; }
.pct-58 { --pct: 58%; }
.pct-59 { --pct: 59%; }
.pct-60 { --pct: 60%; }
.pct-61 { --pct: 61%; }
.pct-62 { --pct: 62%; }
.pct-63 { --pct: 63%; }
.pct-64 { --pct: 64%; }
.pct-65 { --pct: 65%; }
.pct-66 { --pct: 66%; }
.pct-67 { --pct: 67%; }
.pct-68 { --pct: 68%; }
.pct-69 { --pct: 69%; }
.pct-70 { --pct: 70%; }
.pct-71 { --pct: 71%; }
.pct-72 { --pct: 72%; }
.pct-73 { --pct: 73%; }
.pct-74 { --pct: 74%; }
.pct-75 { --pct: 75%; }
.pct-76 { --pct: 76%; }
.pct-77 { --pct: 77%; }
.pct-78 { --pct: 78%; }
.pct-79 { --pct: 79%; }
.pct-80 { --pct: 80%; }
.pct-81 { --pct: 81%; }
.pct-82 { --pct: 82%; }
.pct-83 { --pct: 83%; }
.pct-84 { --pct: 84%; }
.pct-85 { --pct: 85%; }
.pct-86 { --pct: 86%; }
.pct-87 { --pct: 87%; }
.pct-88 { --pct: 88%; }
.pct-89 { --pct: 89%; }
.pct-90 { --pct: 90%; }
.pct-91 { --pct: 91%; }
.pct-92 { --pct: 92%; }
.pct-93 { --pct: 93%; }
.pct-94 { --pct: 94%; }
.pct-95 { --pct: 95%; }
.pct-96 { --pct: 96%; }
.pct-97 { --pct: 97%; }
.pct-98 { --pct: 98%; }
.pct-99 { --pct: 99%; }
.pct-100 { --pct: 100%; }

.bar__fill {
  width: var(--pct, 0%);
}


/* =========================================================================
   Служебные классы вместо атрибута style.

   Та же причина, что и у .pct-N выше: CSP задана без 'unsafe-inline' для
   стилей, поэтому style="" браузер вырезает и до экрана правило не доезжает.
   Раньше таких атрибутов в шаблонах было 95 штук, и все они молча ничего
   не делали. Здесь они выражены классами и наконец работают.
   ========================================================================= */
.embed {
  position: relative; padding-top: 56.25%;
}
.embed__frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 12px;
}
.u-block22 {
  display: block; margin-bottom: 22px;
}
.u-center {
  text-align: center;
}
.u-flex1 {
  flex: 1;
}
.u-flex1w {
  flex: 1; min-width: 260px;
}
.u-flex2 {
  flex: 2; min-width: 280px;
}
.u-m0b14 {
  margin: 0 0 14px;
}
.u-m0b20 {
  margin: 0 0 20px;
}
.u-m0b8 {
  margin: 0 0 8px;
}
.u-m10t {
  margin: 10px 0 0;
}
.u-m12t {
  margin: 12px 0 0;
}
.u-m14t {
  margin: 14px 0 0;
}
.u-m14t-card {
  margin: 14px 0 0; background: var(--card);
}
.u-m2t {
  margin: 2px 0 0;
}
.u-maxw220 {
  max-width: 220px;
}
.u-mb12 {
  margin-bottom: 12px;
}
.u-mb14 {
  margin-bottom: 14px;
}
.u-mb18 {
  margin-bottom: 18px;
}
.u-mb4 {
  margin-bottom: 4px;
}
.u-mb6 {
  margin-bottom: 6px;
}
.u-mb8 {
  margin-bottom: 8px;
}
.u-minw120 {
  min-width: 120px;
}
.u-mt10 {
  margin-top: 10px;
}
.u-mt10-pink {
  margin-top: 10px; color: var(--pink);
}
.u-mt12 {
  margin-top: 12px;
}
.u-mt14 {
  margin-top: 14px;
}
.u-mt16 {
  margin-top: 16px;
}
.u-mt16-end {
  margin-top: 16px; justify-content: flex-end;
}
.u-mt18 {
  margin-top: 18px;
}
.u-mt28 {
  margin-top: 28px;
}
.u-mt8 {
  margin-top: 8px;
}
.u-normal {
  font-weight: 400;
}
.u-num-lg {
  font-size: 2.4rem;
}
.u-num-xl {
  font-size: 3rem;
}
.u-pl20 {
  padding-left: 20px;
}
.u-plain {
  text-decoration: none;
}
.u-right {
  text-align: right;
}
.u-semi {
  font-weight: 600;
}
.u-start {
  align-items: flex-start;
}
.u-start28 {
  align-items: flex-start; gap: 28px;
}
.u-wauto {
  width: auto;
}

/* Ключ двухфакторки: длинная строка, которую переписывают руками */
.secret-key {
  font-family: var(--mono);
  word-break: break-all;
  background: #fafafa;
  border: var(--border-soft);
  border-radius: 12px;
  padding: 12px;
}


/* ═══ Навигация на широком экране ════════════════════════════════════════
   Макет нарисован под телефон, и там меню справедливо спрятано за кнопкой.
   На ноутбуке прятать его незачем: место есть, а лишнее нажатие до каждого
   раздела — это ухудшение против прежнего кабинета. Поэтому с 900 px меню
   разворачивается строкой под шапкой, а кнопка перестаёт быть кнопкой.

   visibility, а не display: кнопка должна продолжать занимать место, иначе
   логотип перестаёт стоять по центру.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .topbar__inner {
    flex-wrap: wrap;
  }

  .iconbtn--menu {
    visibility: hidden;
    pointer-events: none;
  }

  .nav {
    display: flex;
    position: static;
    order: 4;
    flex: 1 0 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav a {
    background: var(--chip);
    color: var(--ink-soft);
    font-size: 0.9rem;
    padding: 9px 18px;
  }

  .nav a:hover {
    background: var(--lime-soft);
    color: var(--ink);
  }

  .nav a.is-active {
    background: var(--ink-dark);
    color: #fff;
  }
}

/* Цвета полос в карточке прогресса идут по порядку показателей, как в
   макете: тесты синие, посещаемость розовая, KFF зелёный, активность синяя.
   Заданы позицией, а не классом в разметке: порядок показателей задаёт
   методист через веса, и подмешивать в шаблон ещё и цвет незачем. */
.progress-card__body .bar-row:nth-child(2) .bar__fill {
  background: var(--pink);
}

.progress-card__body .bar-row:nth-child(3) .bar__fill {
  background: var(--lime);
}

/* ── Окно «Отметить результат» (KFF) ───────────────────────────────────── */
.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 24px 22px;
  border: var(--frame);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dialog__close {
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
}

.results-table th {
  text-align: left;
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 8px 6px;
}

.results-table td {
  padding: 8px 6px;
  border-top: 1px solid var(--rule);
  vertical-align: top;
}

.results-table input[type="number"] {
  max-width: 110px;
}

.results-table__max {
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .dialog {
    padding: 20px 14px;
  }
  .results-table th {
    padding: 8px 4px;
    font-size: 0.66rem;
    letter-spacing: 0;
  }
  .results-table td {
    padding: 8px 4px;
  }
  .results-table input[type="number"] {
    width: 64px;
    max-width: 64px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Кнопки теста в узкой колонке переносятся, а не вылезают за рамку */
.hw-test__btns .btn {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}