Sprint 2: attempt cards, file import button, question layout, radio/check, sticky save

- Replace attempts table with attempts-card-list cards
- Custom import: sr-only file input + btn-styled label
- question-editor-block: stack header on mobile, row from 520px
- option marks: radio for single correct, checkbox for multiple
- Fixed bottom actions on max-width 640px with draft status; hide in-flow panel
- Update СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md and DOC/ШАГИ/ШАГ_2026-04-27_003.md

Made-with: Cursor

DOC/ШАГИ/ШАГ_2026-04-27_002.md

@@ -0,0 +1,5 @@
+# Шаг 2026-04-27 — спринты мобильного UI и правки
+
+- Документ спринтов: [`docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md`](../../docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md) (спринт 1 выполнен в коде).
+- Стили: `actions-bar`, `version-card-list`, `list-row__meta-tail`, `inline-actions--block-mobile`, safe-area у `.cabinet-main`, `.btn--sm` / `.btn-ghost`, `assign-list` без пустой «коробки`.
+- Страницы: `TestDetail.jsx` (карточки версий, панель команд, назначение), `TestsList.jsx` (мета-строка).

DOC/ШАГИ/ШАГ_2026-04-27_003.md

@@ -0,0 +1,4 @@
+# Шаг 2026-04-27 — спринт 2 (мобильный UI)
+
+- См. [`docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md`](../../docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md): пункты 2.1–2.5 отмечены выполненными.
+- Реализация: `TestDetail.jsx` (прогоны карточками, импорт через label+input, заголовок вопроса, radio/checkbox, фикс-футер), `cabinet-theme.css` (классы спринта 2).

docs/СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md

@@ -0,0 +1,36 @@
+# Спринты: мобильный UI кабинета тестов
+
+---
+
+## Спринт 1 — быстрые исправления
+
+**Цель:** выровнять кнопки, мета-строку списка, историю версий, назначение и safe-area; без смены контентной модели страниц.
+
+- [x] **1.1** Панель «Сохранить черновик / К списку»: убрать конфликт `inline-actions .btn { width: auto }` с `btn-primary` — колонка на всю ширину (`.actions-bar`)
+- [x] **1.2** Touch: `min-height` у `.btn--sm` (убрать, удалить вопрос, сделать активной…)
+- [x] **1.3** Список тестов: не разбивать «· v1» — хвост в `list-row__meta-tail` + `white-space: nowrap`
+- [x] **1.4** «История версий»: вместо `<table>` — карточки (`surface-card` + flex)
+- [x] **1.5** «Назначение»: не рендерить пустой `.assign-list` (убрать «коробку» без людей)
+- [x] **1.6** Сильнее рамка `.btn-ghost` (согласование с полями)
+- [x] **1.7** `padding-bottom` у `.cabinet-main` + `env(safe-area-inset-bottom)`
+- [x] **1.8** «Публикация»: на узком экране — кнопка на всю ширину (`.inline-actions--block-mobile`)
+
+**Файлы:** `frontend/src/styles/cabinet-theme.css`, `frontend/src/pages/TestDetail.jsx`, `frontend/src/pages/TestsList.jsx`.
+
+---
+
+## Спринт 2 — карточки, импорт, вопрос, радио/чек, фикс-футер
+
+- [x] **2.1** «Прогоны и разбор»: таблица заменена на список карточек (`.attempts-card-list`)
+- [x] **2.2** «Импорт из файла»: скрытый `input` + `label` с `.btn` (`.import-file-input` / `.import-file-label`)
+- [x] **2.3** «Вопрос N» + «Сгенерировать вопрос (ИИ)»: колонка на мобилке, ряд от `min-width: 520px` (`.question-editor-block__header`)
+- [x] **2.4** Варианты: `type="radio"` при одном верном, `checkbox` при нескольких
+- [x] **2.5** Моб. фикс-футер `≤640px` с «Сохранить» / «К списку» + статус черновика; панель в потоке скрыта
+
+**Файлы:** `frontend/src/styles/cabinet-theme.css`, `frontend/src/pages/TestDetail.jsx`.
+
+---
+
+## Спринт 3 — дизайн-токены (по желанию)
+
+- [ ] Единая шкала: `--control-height`, `--control-padding-x`, `--button-gap` — рефакторинг всех `inline-actions` и форм

frontend/src/pages/TestDetail.jsx

@@ -622,7 +622,7 @@ export default function TestDetail() {
   );
 
   return (
-    <div className="test-detail-page">
+    <div className="test-detail-page test-detail-page--with-fixed-actions">
       <div className="cabinet-brick cabinet-brick--hero">
         <p className="link-back" style={{ marginTop: 0 }}>
           <Link to="/tests">← к списку</Link>
@@ -792,22 +792,23 @@ export default function TestDetail() {
         {draftQuestions.map((q, qi) => (
           <div
             key={q.key}
+            className="question-editor-block"
             style={{
               borderTop: '1px solid var(--border-subtle, #2a2a2a)',
               marginTop: '1rem',
               paddingTop: '1rem',
             }}
           >
-            <div
-              className="inline-actions"
-              style={{ marginBottom: 6, flexWrap: 'wrap', alignItems: 'center' }}
-            >
-              <label className="form-label" htmlFor={`qtext-${q.key}`} style={{ marginBottom: 0 }}>
+            <div className="question-editor-block__header">
+              <label
+                className="form-label question-editor-block__title"
+                htmlFor={`qtext-${q.key}`}
+              >
                 Вопрос {qi + 1}
               </label>
               <button
                 type="button"
-                className="btn btn-ghost btn--sm"
+                className="btn btn-ghost btn--sm question-editor-block__ai-btn"
                 disabled={aiQBusy != null}
                 onClick={() => runAiGenerateQuestion(qi)}
               >
@@ -845,14 +846,18 @@ export default function TestDetail() {
             <p className="muted" style={{ marginBottom: 6, fontSize: 13 }}>
               Варианты
             </p>
-            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            <ul className="question-options-list" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
               {q.options.map((o, oi) => (
                 <li
                   key={o.key}
+                  className="question-option-row"
                   style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, marginBottom: 8 }}
                 >
                   <input
-                    type="checkbox"
+                    key={`${o.key}-${q.hasMultipleAnswers ? 'm' : 's'}`}
+                    className="question-option-row__mark"
+                    type={q.hasMultipleAnswers ? 'checkbox' : 'radio'}
+                    name={q.hasMultipleAnswers ? undefined : `q-${q.key}-correct`}
                     checked={o.isCorrect}
                     onChange={(e) => {
                       const v = e.target.checked;
@@ -936,10 +941,10 @@ export default function TestDetail() {
         </div>
       </AccSection>
 
-      <div className="cabinet-brick" style={{ marginTop: 0 }}>
+      <div className="cabinet-brick editor-actions-flow" style={{ marginTop: 0 }}>
         <div
-          className="inline-actions"
-          style={{ flexWrap: 'wrap', gap: '0.5rem', marginBottom: draftStatus ? '0.35rem' : 0 }}
+          className="actions-bar"
+          style={{ marginBottom: draftStatus ? '0.35rem' : 0 }}
         >
           <button type="button" className="btn btn-primary" onClick={saveDraft}>
             Сохранить черновик
@@ -949,54 +954,47 @@ export default function TestDetail() {
           </Link>
         </div>
         {draftStatus && (
-          <p className="muted" style={{ marginTop: 0, marginBottom: 0 }}>
+          <p className="muted editor-actions-status--flow" style={{ marginTop: 0, marginBottom: 0 }}>
             {draftStatus}
           </p>
         )}
       </div>
       <AccSection title="История версий" defaultOpen={false}>
-      <div className="surface-card" style={{ padding: 0, overflow: 'hidden' }}>
-        <table className="table-cabinet">
-          <thead>
-            <tr>
-              <th>Версия</th>
-              <th>Активна</th>
-              <th>Создана</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {versions.map((r) => (
-              <tr key={r.id}>
-                <td>
-                  v{r.version}
-                  {r.is_active && (
-                    <span
-                      className="code-inline"
-                      style={{ marginLeft: '0.5rem', fontSize: '0.7rem' }}
-                    >
-                      текущая
+        <ul className="version-card-list" aria-label="Список версий теста">
+          {versions.map((r) => (
+            <li key={r.id} className="surface-card version-card-list__item">
+              <div className="version-card-list__row">
+                <div className="version-card-list__main">
+                  <div className="version-card-list__title-line">
+                    <span className="font-headline" style={{ fontSize: '1rem' }}>
+                      v{r.version}
                     </span>
-                  )}
-                </td>
-                <td>{r.is_active ? 'да' : 'нет'}</td>
-                <td className="mono">{fmtDt(r.created_at)}</td>
-                <td>
-                  {!r.is_active && (
-                    <button
-                      type="button"
-                      className="btn btn-ghost btn--sm"
-                      onClick={() => activateVersion(r.id)}
-                    >
-                      сделать активной
-                    </button>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+                    {r.is_active && (
+                      <span className="code-inline" style={{ fontSize: '0.7rem' }}>
+                        текущая
+                      </span>
+                    )}
+                  </div>
+                  <p className="muted mono" style={{ margin: '0.4rem 0 0', fontSize: '0.8rem' }}>
+                    {fmtDt(r.created_at)}
+                  </p>
+                  <p className="muted" style={{ margin: '0.2rem 0 0', fontSize: '0.8rem' }}>
+                    Активна: {r.is_active ? 'да' : 'нет'}
+                  </p>
+                </div>
+                {!r.is_active && (
+                  <button
+                    type="button"
+                    className="btn btn-ghost btn--sm version-card-list__action"
+                    onClick={() => activateVersion(r.id)}
+                  >
+                    Сделать активной
+                  </button>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
       </AccSection>
 
       {attemptsList != null && attemptsList.length > 0 && (
@@ -1006,66 +1004,63 @@ export default function TestDetail() {
               {attemptsErr}
             </p>
           )}
-          <div className="surface-card" style={{ padding: 0, overflow: 'auto' }}>
-            <table className="table-cabinet">
-              <thead>
-                <tr>
-                  <th>Когда</th>
-                  <th>Участник</th>
-                  <th>v</th>
-                  <th>Результат</th>
-                  <th />
-                </tr>
-              </thead>
-              <tbody>
-                {attemptsList.map((a) => (
-                  <tr key={a.id}>
-                    <td className="mono" style={{ whiteSpace: 'nowrap' }}>
-                      {a.completedAt
-                        ? fmtDt(a.completedAt)
-                        : a.startedAt
-                          ? fmtDt(a.startedAt)
-                          : '—'}
-                    </td>
-                    <td>
-                      {a.attempterName || '—'}
-                      {a.attempterLogin && (
-                        <span className="code-inline" style={{ fontSize: 11, marginLeft: 6 }}>
-                          {a.attempterLogin}
-                        </span>
-                      )}
-                    </td>
-                    <td>v{a.testVersion}</td>
-                    <td>
-                      {a.status === 'completed' && a.totalQuestions != null ? (
-                        <>
-                          {a.correctCount}/{a.totalQuestions}
-                          {a.passed ? ' · зачёт' : ' · незачёт'}
-                        </>
-                      ) : (
-                        a.status
-                      )}
-                    </td>
-                    <td>
-                      {a.status === 'completed' && (
-                        <Link
-                          to={`/tests/${id}/attempts/${a.id}/review`}
-                          className="btn btn-ghost btn--sm"
-                        >
-                          Разбор
-                        </Link>
-                      )}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+          <ul className="attempts-card-list" aria-label="Список прогонов">
+            {attemptsList.map((a) => {
+              const when = a.completedAt
+                ? fmtDt(a.completedAt)
+                : a.startedAt
+                  ? fmtDt(a.startedAt)
+                  : '—';
+              const result =
+                a.status === 'completed' && a.totalQuestions != null ? (
+                  <>
+                    {a.correctCount}/{a.totalQuestions}
+                    {a.passed ? ' · зачёт' : ' · незачёт'}
+                  </>
+                ) : (
+                  a.status
+                );
+              return (
+                <li key={a.id} className="surface-card attempts-card-list__item">
+                  <div className="attempts-card-list__row">
+                    <div className="attempts-card-list__main">
+                      <p className="muted attempts-card-list__when mono" style={{ margin: 0, fontSize: '0.8rem' }}>
+                        {when}
+                      </p>
+                      <p className="attempts-card-list__who" style={{ margin: '0.35rem 0 0', fontWeight: 600 }}>
+                        {a.attempterName || '—'}
+                        {a.attempterLogin && (
+                          <span className="code-inline" style={{ fontSize: 11, marginLeft: 6 }}>
+                            {a.attempterLogin}
+                          </span>
+                        )}
+                      </p>
+                      <p className="muted" style={{ margin: '0.25rem 0 0', fontSize: '0.85rem' }}>
+                        v{a.testVersion} ·{' '}
+                        <span className="attempts-card-list__result">{result}</span>
+                      </p>
+                    </div>
+                    {a.status === 'completed' && (
+                      <Link
+                        to={`/tests/${id}/attempts/${a.id}/review`}
+                        className="btn btn-ghost btn--sm attempts-card-list__action"
+                      >
+                        Разбор
+                      </Link>
+                    )}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
         </AccSection>
       )}
 
       <AccSection title="Публикация (видимость в списке)" defaultOpen={false}>
-      <div className="inline-actions" style={{ marginTop: '0.5rem' }}>
+      <div
+        className="inline-actions inline-actions--block-mobile"
+        style={{ marginTop: '0.5rem' }}
+      >
         {test?.chainActive !== false ? (
           <button
             type="button"
@@ -1089,15 +1084,23 @@ export default function TestDetail() {
       </AccSection>
 
       <AccSection title="Импорт из файла" defaultOpen={false}>
-      <div className="inline-actions" style={{ marginBottom: '0.5rem' }}>
+      <div className="import-file-row" style={{ marginBottom: '0.5rem' }}>
         <input
+          id="import-test-file"
+          className="import-file-input"
           type="file"
           accept=".pdf,.docx,.txt,.md,application/pdf"
           onChange={onImportFile}
           disabled={importBusy}
           aria-label="Выбрать файл для импорта"
         />
-        {importBusy && <span className="text-muted">Обработка…</span>}
+        <label
+          htmlFor="import-test-file"
+          className={`btn btn-ghost import-file-label${importBusy ? ' is-busy' : ''}`}
+          style={importBusy ? { pointerEvents: 'none' } : undefined}
+        >
+          {importBusy ? 'Обработка…' : 'Выбрать файл'}
+        </label>
       </div>
       {importErr && (
         <p className="error-text" role="alert">
@@ -1191,41 +1194,44 @@ export default function TestDetail() {
             </select>
             {assignLoadBusy && <span className="text-muted">Загрузка…</span>}
           </div>
-          <div className="assign-list" role="group" aria-label="Список сотрудников">
-            {assignPeople.length === 0 && !assignLoadBusy && (
+          {assignPeople.length > 0 ? (
+            <div className="assign-list" role="group" aria-label="Список сотрудников">
+              {assignPeople.map((p) => {
+                const k = assignPersonKey(p);
+                const picked = assignSelected.has(k);
+                return (
+                  <label
+                    key={k}
+                    className={`assign-row${picked ? ' assign-row--selected' : ''}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={picked}
+                      onChange={() => toggleAssignPerson(p)}
+                    />
+                    <span className="assign-row__text">
+                      <span className="assign-row__fio">{p.fio}</span>
+                      {p.webLogin && (
+                        <span className="assign-row__login">{p.webLogin}</span>
+                      )}
+                      <span className="assign-row__meta">
+                        {p.departments || '—'}
+                        {p.clinicUserId
+                          ? ' · есть учётка в модуле'
+                          : ' · нет учётки (создадим при назначении)'}
+                      </span>
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          ) : (
+            !assignLoadBusy && (
               <p className="text-muted" style={{ margin: '0.5rem 0' }}>
                 Нет подходящих записей. Смените фильтры или поиск.
               </p>
-            )}
-            {assignPeople.map((p) => {
-              const k = assignPersonKey(p);
-              const picked = assignSelected.has(k);
-              return (
-                <label
-                  key={k}
-                  className={`assign-row${picked ? ' assign-row--selected' : ''}`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={picked}
-                    onChange={() => toggleAssignPerson(p)}
-                  />
-                  <span className="assign-row__text">
-                    <span className="assign-row__fio">{p.fio}</span>
-                    {p.webLogin && (
-                      <span className="assign-row__login">{p.webLogin}</span>
-                    )}
-                    <span className="assign-row__meta">
-                      {p.departments || '—'}
-                      {p.clinicUserId
-                        ? ' · есть учётка в модуле'
-                        : ' · нет учётки (создадим при назначении)'}
-                    </span>
-                  </span>
-                </label>
-              );
-            })}
-          </div>
+            )
+          )}
           <div className="inline-actions" style={{ marginTop: '0.75rem' }}>
             <button
               type="button"
@@ -1242,6 +1248,28 @@ export default function TestDetail() {
           {assignMsg && <p className="text-muted">{assignMsg}</p>}
         </AccSection>
       )}
+
+      <div
+        className="test-detail-fixed-actions"
+        role="region"
+        aria-label="Быстрые действия с черновиком"
+      >
+        <div className="test-detail-fixed-actions__inner">
+          {draftStatus && (
+            <p className="muted test-detail-fixed-actions__status" role="status">
+              {draftStatus}
+            </p>
+          )}
+          <div className="actions-bar">
+            <button type="button" className="btn btn-primary" onClick={saveDraft}>
+              Сохранить черновик
+            </button>
+            <Link to="/tests" className="btn btn-ghost">
+              К списку
+            </Link>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/pages/TestsList.jsx

@@ -106,11 +106,7 @@ export default function TestsList() {
                 <span className="list-row__title">{t.title}</span>
                 <span className="list-row__meta">
                   {formatTestAuthorLabel(user, t.created_by, t.author_full_name)}
-                  <span className="list-row__meta-sep" aria-hidden>
-                    {' '}
-                    ·{' '}
-                  </span>
-                  v{t.version}
+                  <span className="list-row__meta-tail">{' · '}v{t.version}</span>
                 </span>
               </Link>
             </div>
@@ -151,11 +147,9 @@ export default function TestsList() {
                     <span className="list-row__title">{t.title}</span>
                     <span className="list-row__meta">
                       {formatTestAuthorLabel(user, t.created_by, t.author_full_name)}
-                      <span className="list-row__meta-sep" aria-hidden>
-                        {' '}
-                        ·{' '}
+                      <span className="list-row__meta-tail">
+                        {' · '}v{t.version} · скрыт
                       </span>
-                      v{t.version} · скрыт
                     </span>
                   </Link>
                 </div>

frontend/src/styles/cabinet-theme.css

@@ -248,7 +248,7 @@ code,
 .btn-ghost {
   background: transparent;
   color: var(--primary);
-  border-color: color-mix(in srgb, var(--outline-variant) 50%, transparent);
+  border-color: color-mix(in srgb, var(--outline-variant) 70%, transparent);
 }
 
 .btn-ghost:hover {
@@ -264,8 +264,11 @@ code,
 
 .btn--sm {
   font-size: 0.8rem;
-  padding: 0.35rem 0.6rem;
+  padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
+  min-height: 2.75rem;
+  min-width: 2.75rem;
+  box-sizing: border-box;
 }
 
 /* --- App shell (cabinet/base) --- */
@@ -378,7 +381,7 @@ code,
   max-width: var(--max-content);
   width: 100%;
   margin: 0 auto;
-  padding: 1.25rem 1.25rem 2.5rem;
+  padding: 1.25rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
 }
 
 /* Cards & lists */
@@ -431,6 +434,11 @@ code,
   margin-top: 0.25rem;
 }
 
+/* «· v1» и хвост мета — не рвём посередине (мобайл) */
+.list-row__meta-tail {
+  white-space: nowrap;
+}
+
 /* Вся плитка — одна ссылка */
 .list-row--action {
   padding: 0;
@@ -609,7 +617,8 @@ code,
 }
 
 .assign-list {
-  max-height: min(50vh, 22rem);
+  max-height: min(40vh, 18rem);
+  min-height: 0;
   overflow: auto;
   border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
   border-radius: 0.75rem;
@@ -755,6 +764,57 @@ code,
   color: var(--on-surface-variant);
 }
 
+/* История версий: карточки вместо таблицы (мобайл) */
+.version-card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.version-card-list__item {
+  margin: 0;
+}
+
+.version-card-list__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.version-card-list__main {
+  min-width: 0;
+  flex: 1 1 12rem;
+}
+
+.version-card-list__title-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.version-card-list__action {
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+@media (max-width: 520px) {
+  .version-card-list__row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .version-card-list__action {
+    width: 100%;
+    align-self: stretch;
+  }
+}
+
 .draft-block {
   margin-top: 1.25rem;
   padding: 1rem;
@@ -783,3 +843,218 @@ code,
 .inline-actions .btn {
   width: auto;
 }
+
+/* Нижняя панель: полноширинные primary + secondary (без перебития .inline-actions .btn) */
+.actions-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.actions-bar .btn-primary {
+  width: 100%;
+  margin-top: 0;
+  box-sizing: border-box;
+}
+
+.actions-bar a.btn,
+.actions-bar .btn.btn-ghost {
+  display: block;
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+@media (min-width: 480px) {
+  .actions-bar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .actions-bar .btn-primary {
+    width: auto;
+    min-width: 12rem;
+    flex: 1 1 auto;
+  }
+
+  .actions-bar a.btn,
+  .actions-bar .btn.btn-ghost {
+    display: inline-block;
+    width: auto;
+    flex: 0 0 auto;
+  }
+}
+
+@media (max-width: 520px) {
+  .inline-actions--block-mobile {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .inline-actions--block-mobile .btn {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+/* --- Спринт 2: редактор вопроса, прогоны, импорт, фикс. футер --- */
+
+.question-editor-block__header {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.question-editor-block__title {
+  margin-bottom: 0;
+  font-size: 0.95rem;
+}
+
+.question-editor-block__ai-btn {
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  align-self: stretch;
+}
+
+@media (min-width: 520px) {
+  .question-editor-block__header {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .question-editor-block__ai-btn {
+    width: auto;
+    align-self: center;
+  }
+}
+
+/* Спринт 2.4: radio = один верный, checkbox = несколько (нативная метафора) */
+.question-option-row__mark {
+  width: 1.15rem;
+  height: 1.15rem;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+  cursor: pointer;
+  accent-color: var(--primary);
+}
+
+/* Список прогонов: карточки */
+.attempts-card-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.attempts-card-list__item {
+  margin: 0;
+}
+
+.attempts-card-list__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.attempts-card-list__main {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+
+.attempts-card-list__action {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 520px) {
+  .attempts-card-list__row {
+    flex-direction: column;
+  }
+
+  .attempts-card-list__action {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+/* Импорт: скрытый input + кнопка-стиль */
+.import-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.import-file-row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.import-file-label {
+  margin: 0;
+  cursor: pointer;
+  width: auto;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+/* Мобилка: закреплённый футер с «Сохранить» (дубль панели скрыт) */
+.test-detail-fixed-actions {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .test-detail-page--with-fixed-actions {
+    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  .test-detail-page--with-fixed-actions .editor-actions-flow {
+    display: none;
+  }
+
+  .test-detail-fixed-actions {
+    display: block;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    padding: 0.65rem 1.25rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
+    background: color-mix(in srgb, var(--surface) 96%, #fff);
+    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
+  }
+
+  .test-detail-fixed-actions__inner {
+    max-width: var(--max-content);
+    margin: 0 auto;
+  }
+
+  .test-detail-fixed-actions__status {
+    margin: 0 0 0.45rem;
+    font-size: 0.8rem;
+    line-height: 1.3;
+    max-height: 3.2rem;
+    overflow: auto;
+  }
+}