:root {
  --синій: #1B5FA8;
  --бірюза: #0B7A6B;
  --червоний: #B3261E;
  --сірий: #5A6672;
  --рамка: #C9D3DD;
  --тло: #F7FAFD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: #fff;
  color: #17232E;
  font: 17px/1.5 Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.обгортка { max-width: 680px; margin: 0 auto; }

h1 { font-size: 26px; margin: 0 0 6px; color: var(--синій); }
h2 { font-size: 20px; margin: 22px 0 8px; }
.пояснення { color: var(--сірий); margin: 0 0 18px; }
.дрібно { color: var(--сірий); font-size: 15px; }

.картка {
  border: 1px solid var(--рамка);
  border-radius: 12px;
  padding: 16px;
  background: var(--тло);
}

label { display: block; font-weight: bold; margin: 16px 0 6px; }
label:first-of-type { margin-top: 0; }

input[type=text], input[type=password], textarea {
  width: 100%;
  padding: 13px 12px;
  font: 17px Arial, Helvetica, sans-serif;
  color: #17232E;
  background: #fff;
  border: 2px solid var(--рамка);
  border-radius: 8px;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus { outline: none; border-color: var(--синій); }
textarea { min-height: 96px; resize: vertical; }
input[type=file] { width: 100%; padding: 10px 0; font-size: 16px; }

.кнопка {
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  font: bold 19px Arial, Helvetica, sans-serif;
  color: #fff;
  background: var(--синій);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.кнопка:disabled { background: #9AAFC4; cursor: default; }

.список { list-style: none; padding: 0; margin: 12px 0 0; }
.список li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.список .назва { flex: 1; word-break: break-all; }
.список .розмір { color: var(--сірий); font-size: 15px; white-space: nowrap; }

.повідомлення {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--тло);
  border: 1px solid var(--рамка);
}
.помилка { background: #FDECEA; border-color: #F0B9B4; color: var(--червоний); }
.закрито { background: #FFF4E5; border-color: #F0D5A8; font-weight: bold; }

.успіх { border: 3px solid var(--бірюза); background: #F2FAF8; }
.успіх h1 { color: var(--бірюза); }
.позначка { color: var(--бірюза); font-weight: bold; }

.текст { margin-bottom: 8px; }
/* На 360 px довга таблиця в завданні інакше розсуває всю сторінку:
   хай прокручується сама, а не тягне за собою текст. */
.текст table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.текст th, .текст td { border: 1px solid var(--рамка); padding: 8px 10px; text-align: left; }
.текст code {
  background: #EEF3F8;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: Menlo, Consolas, monospace;
  font-size: 15px;
}
.текст pre { background: #EEF3F8; padding: 12px; border-radius: 8px; overflow-x: auto; }
.текст img { max-width: 100%; height: auto; }

.таблиця { border-collapse: collapse; width: 100%; font-size: 16px; }
.таблиця th, .таблиця td {
  border: 1px solid var(--рамка);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.таблиця th { background: var(--тло); }
.таблиця .час { white-space: nowrap; color: var(--сірий); }
.таблиця .коментар { font-size: 15px; }
.мітка {
  display: inline-block;
  background: #FFF4E5;
  border: 1px solid #F0D5A8;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  body { padding: 12px; font-size: 16px; }
  h1 { font-size: 22px; }
  .таблиця, .таблиця thead, .таблиця tbody, .таблиця tr, .таблиця td { display: block; }
  .таблиця thead { display: none; }
  .таблиця tr { border: 1px solid var(--рамка); border-radius: 8px; margin-bottom: 10px; }
  .таблиця td { border: none; border-bottom: 1px solid var(--рамка); }
  .таблиця td:last-child { border-bottom: none; }
}

/* --- майстер із кроків --------------------------------------------------- */

.верх {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 18px;
}
.верх .смужка { margin: 0; padding: 0; border: none; flex: 1 1 auto; }

.смужка {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

/* Один індикатор на всю сторінку: «збережено 21:00», «зберігаю…»,
   «не збереглося — спробувати ще». На кроці-матеріалі його немає. */
.збереження {
  /* `margin-left: auto` тримає напис праворуч і тоді, коли смужка
     кроків займає весь рядок і індикатор переносить на новий. */
  margin: 0 0 0 auto;
  color: var(--сірий);
  font-size: 15px;
  text-align: right;
  flex: 0 0 auto;
}
.збереження.невдача { color: var(--червоний); }
.збереження .ще {
  font: inherit;
  color: var(--червоний);
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
}
.крок-номер {
  display: inline-block;
  min-width: 38px;
  padding: 8px 6px;
  text-align: center;
  text-decoration: none;
  color: var(--синій);
  background: #fff;
  border: 2px solid var(--рамка);
  border-radius: 8px;
  font-weight: bold;
}
.крок-номер.здано { background: #E8F5F1; border-color: var(--бірюза); color: var(--бірюза); }
.крок-номер.чернетка { background: #FDECEA; border-color: var(--червоний); color: var(--червоний); }
/* Крок, до якого ще не бралися, теж має бути видно здалеку: сірий номер
   на білому зливався з рештою, і дитина не бачила, що пропустила. */
.крок-номер:not(.здано):not(.поточний):not(.підсумок-номер) {
  background: #FDECEA; border-color: var(--червоний); color: var(--червоний);
}
/* Стан кроку в підсумку — пігулка, а не сірий підпис: `.список .розмір`
   фарбує сірим і б'є простий клас специфічністю, тому селектор такий само. */
.список .стан {
  border-radius: 999px;
  padding: 3px 11px;
  font-weight: bold;
}
.список .стан-готово { color: var(--бірюза); background: #E8F5F1; }
.список .стан-ні { color: var(--червоний); background: #FDECEA; }
.крок-номер.поточний { border-color: var(--синій); background: var(--синій); color: #fff; }
.підсумок-номер { min-width: auto; padding-left: 12px; padding-right: 12px; font-weight: normal; }

.навігація {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.навігація .кнопка { width: auto; margin-top: 0; padding: 12px 20px; text-decoration: none; }

.кнопка.друга {
  background: #fff;
  color: var(--синій);
  border: 2px solid var(--синій);
  display: inline-block;
  text-align: center;
}
.кнопки { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.кнопки .кнопка { width: auto; margin-top: 16px; }
.лічильник, .бракує { margin: 8px 0 0; }
.вставка { margin: 8px 0 0; }

/* Крок-тест не має власної обгортки: картки питань самі по собі —
   менше рамок, менше сірого, менше висоти на екран. */
.картка.тест { border: none; background: none; padding: 0; }
.питання { border: 1px solid var(--рамка); border-radius: 10px; margin: 0 0 14px; padding: 12px; background: #fff; }
.питання:last-of-type { margin-bottom: 0; }
/* `legend` стоїть на самій рамці, і довге питання перекривало її зверху.
   Плаваючий на всю ширину заголовок стає звичайним рядком усередині
   картки, а варіанти йдуть під ним. */
.питання legend { float: left; width: 100%; font-weight: bold; margin: 0 0 10px; padding: 0; }
.варіанти { clear: both; }
.варіант { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; margin: 10px 0 0; }
.варіант input { margin-top: 4px; }
.вузька { margin-top: 16px; }

.успіх-рядок { background: #F2FAF8; border-color: var(--бірюза); color: var(--бірюза); font-weight: bold; }

.учасники-кроки .клітинка { font-size: 15px; }
/* Історія спроб у клітинці: свіжа звичайна, давніші — приглушені й
   під рискою, щоб око бачило поточний стан першим. */
.учасники-кроки .спроба + .спроба { margin-top: 6px; padding-top: 6px; border-top: 1px dotted var(--рамка); }
.учасники-кроки .спроба.давня { color: var(--сірий); }
.учасники-кроки .підпис-кроку { display: none; }
.учасники-кроки .час { display: block; color: var(--сірий); font-size: 13px; }
.учасники-кроки .учасник { font-weight: bold; }
.клітинка.не_почато { color: var(--сірий); }

@media (max-width: 420px) {
  /* Вузький екран: учитель дивиться з телефона, тож рядок таблиці стає
     карткою на учасника, а кожна клітинка підписує свій крок. */
  .учасники-кроки .підпис-кроку { display: block; font-weight: bold; }
  .учасники-кроки thead { display: none; }
  .крок-номер { min-width: 34px; padding: 7px 4px; }
}

/* Кнопка «видати доступ» у клітинці результатів — дрібна, не на всю ширину. */
.кнопка.дрібна { width: auto; margin: 6px 0 0; padding: 6px 10px; font-size: 14px; }

/* Свої файли — окремою карткою: у кожного рядка власна форма «прибрати»
   (форму у формі HTML не вміє), і вона не має розсувати рядок. */
.картка.файли { margin-top: 16px; }
.картка.файли h2 { margin-top: 0; }
.список .прибрати { margin: 0; }
.список .прибрати .кнопка.дрібна { margin: 0; }
.список li.порожньо { border-style: dashed; background: var(--тло); }

/* Код перепустки диктують уголос, тож він має читатися через клас. */
.перепустка-код {
  margin: 8px 0;
  font: bold 34px/1.2 Menlo, Consolas, monospace;
  letter-spacing: 4px;
  color: var(--бірюза);
}
input.код {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: Menlo, Consolas, monospace;
}