.test-page { min-height: 100vh; }
.test-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; padding: 10px max(20px, calc((100vw - 920px) / 2));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--header-bg) 90%, transparent);
  backdrop-filter: blur(18px);
}
.test-shell { width: min(860px, calc(100% - 32px)); margin: 42px auto 80px; outline: none; }
.test-loading, .test-empty { padding: 40px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper-card); text-align: center; color: var(--ink-soft); }
.test-hero { display: grid; gap: 10px; margin-bottom: 28px; }
.test-hero h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.6rem); }
.test-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ink-soft); }
.test-pill { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .82rem; font-weight: 700; }
.test-form { display: grid; gap: 16px; }
.test-question { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper-card); box-shadow: var(--shadow-tight); }
/* Браузер по умолчанию кладёт <legend> прямо на верхнюю рамку и разрывает её:
   номер вопроса и баллы висели над карточкой, а условие ложилось на линию.
   float возвращает заголовок в обычный поток внутрь карточки. */
.test-question legend { float: left; width: 100%; margin: 0; padding: 0; font-weight: 750; font-size: 1.08rem; }
.test-question legend ~ * { clear: both; }
.test-question--missing { border-color: var(--danger); }
.test-question__top { display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.test-question__number { color: var(--accent); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.test-question__points { margin-left: auto; color: var(--ink-soft); font-size: .8rem; white-space: nowrap; }
.test-options { display: grid; gap: 8px; }
.test-option { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.test-option:has(.test-option__correct) { grid-template-columns: 22px minmax(0,1fr) auto; }
.test-option__correct { color: var(--accent); font-size: .76rem; }
.test-option:hover { border-color: var(--accent); }
.test-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.test-option--correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.test-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.test-option--correct{border-color:#1f7a5a;background:#1f7a5a20}.test-option--wrong{border-color:#a8332a;background:#a8332a18}
.test-text { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; }
.test-fill{font-size:1.05rem;line-height:2.5}.test-inline{width:min(180px,45vw);margin:0 5px;padding:7px 9px;border:0;border-bottom:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--ink);font:inherit}.test-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}.test-match>span{padding:11px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}.test-order{display:grid;gap:7px}.test-order__item{display:grid;grid-template-columns:1fr 38px 38px;gap:6px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:13px}.test-move{width:36px;height:36px;border:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font:inherit}.test-budget{display:grid;grid-template-columns:1fr minmax(120px,200px);gap:8px;align-items:center}.test-budget small{grid-column:1/-1;color:var(--ink-soft)}.test-info{padding:14px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:0 12px 12px 0}
.test-actions { position: sticky; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--paper-card) 92%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.test-result { padding: 26px; border-radius: 24px; background: var(--paper-card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.test-result__score { font-size: clamp(2.7rem, 10vw, 5rem); font-weight: 800; line-height: 1; color: var(--accent); }
.test-result__state { margin: 8px 0 18px; font-size: 1.1rem; font-weight: 700; }
.test-attempts { display: grid; gap: 8px; margin-top: 18px; }
.test-attempt { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.test-review { margin-top: 24px; }
.test-review .test-question { box-shadow: none; }
.test-correct { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #2e9e74 14%, transparent); }
.test-explanation { margin-top: 8px; color: var(--ink-soft); }
@media (max-width: 620px) {
  .test-shell { width: min(100% - 20px, 860px); margin-top: 24px; }
  .test-question { padding: 18px 14px; border-radius: 18px; }
  .test-actions { align-items: stretch; flex-direction: column; }
  .test-actions .btn { width: 100%; min-height: 48px; }
  .test-question__top { display: grid; grid-template-columns: auto 1fr auto; align-items: start; }
  .test-question__number { grid-column: 1 / 3; }
  .test-question__points { grid-column: 3; grid-row: 1; }
  .test-question__top > span:nth-child(2) { grid-column: 1 / -1; }
}

/* На телефоне всплывающее сообщение кабинета стоит внизу экрана. Раньше оно
   ложилось поверх вариантов ответа: прочитать «Ответы приняты» можно было
   только вслепую нажав туда, где только что был вариант. Оставляем под него
   место — тогда ничто не перекрывается и ничего не прыгает. */
@media (max-width: 760px) {
  .test-page .test-shell { padding-bottom: 104px; }
}