/* app.css — візуальна мова успадкована від «Річного плану КРОК-1» */

:root {
  /* Світло-блакитна гама: холодний папір, медичний синій, емалевий
     відблиск. Кольори зі значенням (червоний, зелений, бурштиновий)
     лишаються незмінними — вони позначають стан, а не настрій. */
  --paper: #F9FBFD;
  --paper-2: #F0F5F9;
  --white: #ffffff;
  --ink: #12232E;
  --ink-soft: #4A5E6E;
  --ink-faint: #8AA0B0;
  --blue: #3F7B9E;
  --blue-deep: #2F5E7A;
  --blue-tint: #EAF2F7;
  --sky: #8FBFD8;
  --amber: #B4670A;
  --amber-tint: #F9EEDC;
  --amber-line: #E4B876;
  --red: #A32F2A;
  --red-tint: #F8E7E5;
  --green: #1E7A47;
  --green-tint: #E3F1E8;
  --line: #E0E9EF;
  --line-soft: #EEF3F7;
  --shadow: 0 1px 2px rgba(30,55,75,.04), 0 6px 20px rgba(30,55,75,.05);
  --radius: 12px;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue); font-weight: 500;
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: .92rem; font-weight: 500;
  padding: 10px 18px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--paper-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-danger { background: var(--white); border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red-tint); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn-sm { padding: 6px 12px; font-size: .82rem; border-radius: 7px; }
.btn-xs { padding: 3px 9px; font-size: .76rem; border-radius: 6px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Поля ---------- */

label.field { display: block; margin-bottom: 14px; }
label.field > span {
  display: block; font-size: .78rem; font-weight: 500; color: var(--ink-soft);
  margin-bottom: 5px; letter-spacing: .01em;
}
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=url], input[type=search], select, textarea {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
textarea { line-height: 1.5; resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}
input[type=checkbox], input[type=radio] { accent-color: var(--blue); width: 16px; height: 16px; }
.check { display: flex; align-items: center; gap: 9px; font-size: .92rem; margin-bottom: 10px; cursor: pointer; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- Картки, плашки ---------- */

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.note {
  background: var(--amber-tint); border: 1px solid var(--amber-line);
  border-radius: var(--radius); padding: 14px 16px; font-size: .9rem; margin: 16px 0;
}
.note b { color: #7a4406; }
.alert {
  border-radius: 9px; padding: 11px 14px; font-size: .89rem; margin: 12px 0;
  border: 1px solid var(--line); background: var(--paper-2);
}
.alert-err { background: var(--red-tint); border-color: #E8BDB9; color: #7A211D; }
.alert-ok { background: var(--green-tint); border-color: #BCDCC8; color: #14562F; }

.pill {
  display: inline-block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  padding: 3px 8px; border-radius: 20px; background: var(--blue-tint); color: var(--blue-deep);
}
.pill-amber { background: var(--amber-tint); color: #7a4406; }
.pill-red { background: var(--red-tint); color: #7A211D; }
.pill-green { background: var(--green-tint); color: #14562F; }
.pill-grey { background: var(--paper-2); color: var(--ink-soft); }

/* ---------- Каркас сторінки ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(16px, 3vw, 34px); height: 62px;
  background: rgba(249,251,253,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.02rem;
  line-height: 1.1; white-space: nowrap;
}
.topbar .brand small {
  display: block; font-family: var(--mono); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin-top: 2px; font-weight: 500;
}
.topbar nav { display: flex; gap: 2px; margin-left: 10px; flex-wrap: wrap; }
.topbar nav a {
  padding: 7px 12px; border-radius: 8px; font-size: .88rem; color: var(--ink-soft);
}
.topbar nav a:hover { background: var(--blue-tint); color: var(--blue-deep); text-decoration: none; }
.topbar nav a.on { background: var(--blue); color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: .84rem; color: var(--ink-soft); text-align: right; line-height: 1.25; }
.topbar .who b { display: block; color: var(--ink); font-weight: 600; }

main.wrap { max-width: 1120px; margin: 0 auto; padding: 30px clamp(16px, 3vw, 34px) 90px; }
main.narrow { max-width: 720px; }
/* Адміністрування: беремо всю ширину вікна, але лишаємо поля, щоб
   таблиця не прилипала до країв екрана. Обмеження зверху все-таки є —
   на дуже широкому моніторі рядок у півтори тисячі пікселів очима вже
   не пробігти. */
main.wide {
  max-width: min(1720px, 100%);
  /* Поля вужчі, ніж на решті сторінок: тут місце йде під таблицю, а не
     під зручну довжину рядка. */
  padding-left: 16px; padding-right: 16px;
}
/* Таблиця користувачів має дев'ять стовпчиків. На звичайному розмірі
   вона на ноутбуці їде вбік, і половина даних лишається за краєм —
   тому в адмініструванні рядки щільніші. */
main.wide table { font-size: .84rem; }
main.wide th, main.wide td { padding: 9px 10px; }

.pagehead { margin-bottom: 24px; }
.pagehead h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; }
.pagehead p { color: var(--ink-soft); max-width: 68ch; margin: 4px 0 0; }

/* ---------- Вхід ---------- */

.authshell {
  min-height: 100vh; display: grid; place-items: center;
  padding: 30px 18px; background:
    radial-gradient(900px 400px at 50% -10%, var(--blue-tint), transparent 70%), var(--paper);
}
.authbox { width: 100%; max-width: 430px; }
.authbox .logo { text-align: center; margin-bottom: 24px; }
.authbox .logo h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 2px; }
.authbox .logo .eyebrow { display: block; margin-bottom: 10px; }
.tabs { display: flex; gap: 3px; background: var(--paper-2); padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.tabs button {
  flex: 1; padding: 9px; border: 0; background: transparent; border-radius: 7px;
  font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
}
.tabs button.on { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- Панель показників ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; box-shadow: var(--shadow);
}
.stat .k {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.stat .v { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-top: 4px; line-height: 1.05; }
.stat .s { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }

/* Перелік одержувачів у вікні листа: галочка з іменем ліворуч,
   звертання праворуч. Звертання окремим полем навмисно — правила
   кличного відмінка на всі імена не розрахувати, і власниця має бачити,
   як звернуться до кожного, до надсилання, а не після. */
.mllist { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.mlrow { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.mlrow:last-child { border-bottom: 0; }
/* Двома класами, а не одним: у вікні діє правило .modal label, яке
   робить кожну позначку блоком, і рядок від нього розсипається. */
.mlrow .check { display: flex; align-items: center; gap: 9px; margin: 0; flex: 1; min-width: 0; }
.mlrow .check > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Двома класами знову ж таки: правило input[type=text] задає ширину
   на всі сто відсотків і без цього виграє. */
.mlrow .mlname { width: 140px; flex: 0 0 auto; }
/* Вікно з листом ширше за звичайне: у ньому текст на півтора десятка
   рядків, і читати його в колонку завширшки з телефон незручно. */
.modal:has(.mllist) { max-width: 760px; }

/* ---------- Плитки режимів ---------- */

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 22px 0; }
.mode {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  border-top: 3px solid var(--blue);
}
.mode.amber { border-top-color: var(--amber); }
.mode.grey { border-top-color: var(--ink-faint); }
.mode h3 { font-size: 1.15rem; margin-bottom: 6px; }
.mode p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 16px; flex: 1; }

/* ---------- Таблиці ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: .89rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; background: var(--paper-2); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper); }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Смуга прогресу ---------- */

.bar { height: 8px; border-radius: 20px; background: var(--line-soft); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--blue); border-radius: 20px; transition: width .3s; }
.bar.thin { height: 5px; }
.bar > i.ok { background: var(--green); }
.bar > i.bad { background: var(--red); }
.bar > i.warn { background: var(--amber); }

/* ---------- Іспит ---------- */

/* Смужка поступу під час роботи.
 *
 * Раніше вона стояла в потоці сторінки: на телефоні займала два ряди
 * над питанням, а карта питань, коли її відкривали, розсовувала текст і
 * збивала місце, на якому ти читала.
 *
 * Тепер смужка плаває — на великому екрані зверху, на телефоні знизу,
 * під великим пальцем. Місце під неї лишає body.runmode, інакше
 * останній рядок питання ховався б під смужкою.
 */
.exambar {
  position: fixed; z-index: 120;
  left: 50%; transform: translateX(-50%);
  top: 14px; width: min(100% - 28px, 1120px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px; box-shadow: 0 6px 24px rgba(18,45,70,.10);
}
body.runmode main.wrap { padding-top: 92px; }

/* Язичок шторки. На великому екрані смужка стоїть угорі й нічого не
   перекриває — там язичок зайвий і схований. */
.exam-tab { display: none; }
.exam-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 1; }

/* Карта питань — шторка, яку відсувають за потреби.
 *
 * Вікно посеред екрана перебиває роботу: воно вимагає уваги, хоч ти
 * просто хотіла глянути, скільки лишилось. Шторка з'їжджає збоку, не
 * перекриває питання цілком і закривається тим самим дотиком.
 *
 * На телефоні вона піднімається знизу — звідти ж, де плаває смужка
 * поступу, і туди дістає великий палець.
 */
.mapbox {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 400px); overflow-y: auto;
  background: var(--white); box-shadow: -14px 0 40px rgba(18,45,70,.18);
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  animation: sheet-in .18s ease-out;
}

@media (max-width: 720px) {
  .mapbox {
    top: auto; left: 0; right: 0; width: auto;
    max-height: 72vh; border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -14px 40px rgba(18,45,70,.18);
    animation: curtain-up .2s ease-out;
  }
  @keyframes curtain-up { from { transform: translateY(20px); opacity: .7; } }
}
@media (prefers-reduced-motion: reduce) { .mapbox { animation: none; } }

@media (max-width: 720px) {
  /* Згорнута смужка — тільки язичок: вузька смужка внизу, яка показує
     номер питання й поступ, але не закриває варіанти відповіді. */
  .exambar {
    top: auto; bottom: 10px; width: min(100% - 20px, 560px);
    gap: 10px; padding: 0; flex-direction: column; align-items: stretch;
    overflow: hidden;
  }
  .exam-tab {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 14px; border: 0; background: none;
    font-family: var(--sans); font-size: .82rem; color: var(--ink-soft);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .exam-tab .mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .exam-mini {
    flex: 1; height: 4px; border-radius: 3px; background: var(--line);
    overflow: hidden;
  }
  .exam-mini i { display: block; height: 100%; background: var(--blue); }
  .exam-chev {
    font-size: 1rem; line-height: 1; color: var(--ink-faint);
    transition: transform .18s ease;
  }
  .exambar.open .exam-chev { transform: rotate(180deg); }

  .exam-body { display: none; padding: 0 12px 10px; }
  .exambar.open .exam-body { display: flex; gap: 10px; }
  /* Номер питання й поступ уже стоять на язичку — у розгорнутій частині
     вони б повторювали самі себе. Лишаємо там час і кнопки. */
  .exam-body > div:has(#progress),
  .exam-body > div:has(#pbar) { display: none; }
  .exam-tab .exam-chev { font-size: 1.15rem; font-weight: 700; }

  body.runmode main.wrap { padding-top: 24px; padding-bottom: 76px; }
  body.runmode.barsopen main.wrap { padding-bottom: 168px; }
  .exambar .timer { font-size: 1.15rem; }
  .exambar .lbl { display: none; }
}
.timer {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--blue-deep); line-height: 1;
}
.timer.warn { color: var(--amber); }
.timer.danger { color: var(--red); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.exambar .lbl { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 3px; }

.qcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.qmeta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.qtext { font-family: var(--serif); font-size: clamp(1.05rem, 2.2vw, 1.24rem); line-height: 1.5; margin-bottom: 22px; }

.opts { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex; gap: 13px; align-items: flex-start; width: 100%; text-align: left;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); cursor: pointer; font-family: var(--sans); font-size: .96rem;
  line-height: 1.45; color: var(--ink); transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--blue); background: var(--blue-tint); }
.opt .k {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  background: var(--paper-2); color: var(--ink-soft); margin-top: -1px;
}
.opt.sel { border-color: var(--blue); background: var(--blue-tint); }
.opt.sel .k { background: var(--blue); color: #fff; }
.opt.right { border-color: var(--green); background: var(--green-tint); }
.opt.right .k { background: var(--green); color: #fff; }
.opt.wrong { border-color: var(--red); background: var(--red-tint); }
.opt.wrong .k { background: var(--red); color: #fff; }
.opt:disabled { cursor: default; }
.opt:disabled:hover { border-color: var(--line); background: var(--white); }
.opt.right:disabled:hover { border-color: var(--green); background: var(--green-tint); }
.opt.wrong:disabled:hover { border-color: var(--red); background: var(--red-tint); }

.qnav { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.qnav .spacer { flex: 1; }

.grid-nums { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.grid-nums button {
  width: 34px; height: 30px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--white); font-family: var(--mono); font-size: .72rem; cursor: pointer;
  color: var(--ink-soft); padding: 0;
}
.grid-nums button:hover { border-color: var(--blue); }
.grid-nums button.done { background: var(--blue-tint); border-color: #B9D6D1; color: var(--blue-deep); font-weight: 700; }
.grid-nums button.flag { border-color: var(--amber); background: var(--amber-tint); color: #7a4406; }
.grid-nums button.cur { outline: 2px solid var(--blue); outline-offset: 1px; }
.grid-nums button.ok { background: var(--green-tint); border-color: #BCDCC8; color: #14562F; }
.grid-nums button.bad { background: var(--red-tint); border-color: #E8BDB9; color: #7A211D; }

/* ---------- Результат ---------- */

.scorewrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.donut { --pct: 0; --col: var(--blue); position: relative; width: 148px; height: 148px; flex: 0 0 148px; }
.donut::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--col) calc(var(--pct) * 1%), var(--line-soft) 0);
}
.donut::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: var(--white); }
.donut .lbl {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; text-align: center;
}
.donut .lbl b { font-family: var(--serif); font-size: 2rem; font-weight: 700; display: block; line-height: 1; }
.donut .lbl span { font-size: .72rem; color: var(--ink-soft); }

.explain {
  margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  background: var(--paper-2); border-left: 3px solid var(--blue); font-size: .92rem;
}

/* Пояснення від ШІ. Навмисно виглядає інакше за решту тексту й несе
   постійну позначку: студент має завжди бачити, що це згенеровано, а не
   взято з офіційного джерела. */
.ai-box {
  margin-top: 12px; padding: 14px 16px; border-radius: 10px;
  background: var(--amber-tint); border: 1px solid var(--amber-line);
  font-size: .92rem; line-height: 1.55;
}
.ai-box .ai-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: #7a4406; font-weight: 500;
}
.ai-box .ai-head::before {
  content: '✦'; font-size: .85rem; letter-spacing: 0;
}
.ai-box .ai-text { white-space: pre-wrap; color: var(--ink); }
.ai-box .ai-note {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--amber-line);
  font-size: .78rem; color: #7a4406;
}
.ai-box.loading .ai-text { color: var(--ink-soft); font-style: italic; }

/* ---------- Теорія ---------- */

.theory-content { font-size: .97rem; line-height: 1.7; }
.theory-content h4 { font-size: 1.06rem; margin: 22px 0 8px; }
.theory-content h4:first-child { margin-top: 0; }
.theory-content p { margin: 0 0 12px; max-width: 72ch; }
.theory-content ul, .theory-content ol { margin: 0 0 12px; padding-left: 22px; max-width: 72ch; }
.theory-content li { margin-bottom: 5px; }
.theory-content b, .theory-content strong { color: var(--ink); }
/* Ілюстрації з підручників: обмежуємо ширину й даємо рамку, щоб скан
   сторінки не зливався з текстом сторінки. */
.theory-content img {
  max-width: 100%; height: auto; display: block; margin: 16px 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--white);
}
.theory-content figure { margin: 16px 0; }
.theory-content figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
.theory-content h3 {
  font-size: 1.14rem; margin: 30px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}
.theory-content h3:first-child { margin-top: 0; }
.theory-content table { margin: 14px 0; border: 1px solid var(--line); border-radius: 9px; }
.theory-content .tablewrap { margin: 14px 0; }
.theory-content code {
  font-family: var(--mono); font-size: .86em;
  background: var(--paper-2); padding: 1px 5px; border-radius: 5px;
}
.theory-content blockquote {
  margin: 14px 0; padding: 10px 16px; border-left: 3px solid var(--blue);
  background: var(--paper-2); border-radius: 0 9px 9px 0;
}

/* Навчальні врізки: «КРОК-акцент», «Не плутати», «Обов'язково знати».
   Студент має впізнавати їх з одного погляду, гортаючи тему перед
   іспитом, тому колір несе зміст: жовтий — те, що питають, червоний —
   те, що плутають і що треба знати напам'ять, зелений — повторення. */
.theory-content .tbox {
  margin: 20px 0; padding: 15px 18px 4px;
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: 0 11px 11px 0; background: var(--white);
}
.theory-content .tbox-head {
  font-family: var(--sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--ink-soft);
}
.theory-content .tbox > :last-child { margin-bottom: 11px; }
.theory-content .tbox p,
.theory-content .tbox ul,
.theory-content .tbox ol { max-width: none; }

.theory-content .tbox-krok  { border-left-color: var(--amber); background: var(--amber-tint); }
.theory-content .tbox-krok .tbox-head { color: var(--amber); }
.theory-content .tbox-warn  { border-left-color: var(--red); background: var(--red-tint); }
.theory-content .tbox-warn .tbox-head { color: var(--red); }
.theory-content .tbox-must  { border-left-color: var(--red); background: var(--white); }
.theory-content .tbox-must .tbox-head { color: var(--red); }
.theory-content .tbox-recap { border-left-color: var(--blue); background: var(--blue-tint); }
.theory-content .tbox-recap .tbox-head { color: var(--blue-deep); }
.theory-content .tbox-num,
.theory-content .tbox-link,
.theory-content .tbox-algo { border-left-color: var(--blue); background: var(--paper-2); }
.theory-content .tbox-num .tbox-head,
.theory-content .tbox-link .tbox-head,
.theory-content .tbox-algo .tbox-head { color: var(--blue-deep); }
/* Опис ілюстрації, якої ще немає, — це завдання на майбутнє, а не
   матеріал для читання, тому найтихіший вигляд. */
.theory-content .tbox-pic {
  border-left-color: var(--ink-faint); background: var(--paper-2);
  border-style: dashed; border-left-style: solid;
}
.theory-content .tbox-pic .tbox-head { color: var(--ink-faint); }
.theory-content .tbox-quiz { border-left-color: var(--blue); background: var(--white); }
.theory-content .tbox-quiz .tbox-head { color: var(--blue-deep); }
.theory-content .tbox-quiz ol { counter-reset: none; }

@media (max-width: 640px) {
  .theory-content .tbox { padding: 13px 14px 3px; }
}

/* ---------- Модальні вікна ---------- */

.modal-bg {
  position: fixed; inset: 0; background: rgba(18,45,70,.42); z-index: 200;
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(2px);
}
.modal {
  background: var(--white); border-radius: 14px; padding: 26px;
  max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(18,45,70,.25);
  max-height: 88vh; overflow-y: auto;
}
.modal h3 { font-size: 1.2rem; }
.modal .acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }

/* ---------- Дрібниці ---------- */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }
.toolbar input[type=text], .toolbar input[type=search], .toolbar select {
  width: auto; min-width: 190px;
}
.toolbar .searchbox { min-width: 250px; }

/* Поле пошуку.
   Лупа тут не для краси: поле стоїть у панелі поряд із кнопкою, і без
   значка його легко прийняти за ще одну кнопку. Хрестик з'являється
   лише тоді, коли є що стирати, — порожнє поле з кнопкою «очистити»
   виглядає як недороблене. */
.searchbox { position: relative; display: flex; align-items: center; }
.searchbox input[type=search] {
  width: 100%; padding-left: 36px; padding-right: 34px;
  -webkit-appearance: none; appearance: none;
}
.searchbox input[type=search]::-webkit-search-cancel-button,
.searchbox input[type=search]::-webkit-search-decoration { display: none; }
.searchbox .sico {
  position: absolute; left: 12px; width: 15px; height: 15px;
  color: var(--ink-faint); pointer-events: none;
}
.searchbox .sclear {
  position: absolute; right: 5px; border: 0; background: transparent;
  cursor: pointer; color: var(--ink-faint); line-height: 1;
  font-size: .95rem; padding: 6px 8px; border-radius: 8px;
}
.searchbox .sclear:hover { color: var(--ink); background: var(--paper-2); }
@media (max-width: 560px) {
  .toolbar .searchbox { min-width: 0; width: 100%; }
}

.empty { text-align: center; padding: 56px 20px; color: var(--ink-soft); }
.empty h3 { color: var(--ink); }

.seclabel {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 30px 0 10px; font-weight: 500;
}

.spinner {
  width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Меню на телефоні ---------------------------------------------------
 *
 * На великому екрані розділи стоять рядом у шапці. На телефоні той самий
 * ряд або переносився в кілька рядків, з'їдаючи півекрана, або гортався
 * вбік — і половина пунктів лишалася за краєм, про неї й не здогадаєшся.
 *
 * Тому там шапка стискається до знака й кнопки, а розділи відкриваються
 * панеллю поверх сторінки: усе видно одразу, поточний позначено.
 */
.burger {
  display: none; width: 42px; height: 38px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.burger[aria-expanded="true"] { border-color: var(--blue); }

.sheet { position: fixed; inset: 0; z-index: 200; }
.sheet-back { position: absolute; inset: 0; background: rgba(18,45,70,.34); }
/* Панель відкривається з того самого боку, де стоїть кнопка: інакше
   палець тисне ліворуч, а вміст виїжджає праворуч — і рука опиняється
   не там, де перший пункт списку. */
.sheet-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(84vw, 340px);
  background: var(--white); box-shadow: 14px 0 40px rgba(18,45,70,.18);
  display: flex; flex-direction: column;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  animation: sheet-in .18s ease-out;
}
@keyframes sheet-in { from { transform: translateX(-14px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .sheet-panel { animation: none; } }

.sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sheet-who { flex: 1; font-size: .82rem; color: var(--ink-soft); line-height: 1.3; }

.sheet-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; overflow-y: auto; }
.sheet-nav a {
  padding: 12px 14px; border-radius: 10px; color: var(--ink);
  font-size: 1rem; font-weight: 500;
}
.sheet-nav a.on { background: var(--blue); color: #fff; }
.sheet-nav a:hover { text-decoration: none; }

.sheet-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}

/* Поки панель відкрита, сторінка під нею не прокручується. */
body.nomove { overflow: hidden; }

@media (max-width: 720px) {
  .topbar { height: 56px; flex-wrap: nowrap; padding: 0 14px; gap: 10px; }
  .topbar nav,
  .topbar .who,
  .topbar > .btn { display: none; }
  /* Кнопка меню ліворуч, знак — праворуч, і між ними порожньо: два
     важкі кути врівноважують шапку, а не збиваються в один бік. */
  .topbar .spacer { display: none; }
  .topbar .brand { margin-left: auto; text-align: right; }
  /* Кнопка стоїть перед знаком, а не після всього: великий палець
     дістає до лівого краю, не перехоплюючи телефон. */
  .burger { display: flex; order: -1; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .scorewrap { justify-content: center; }
}

@media (min-width: 721px) {
  /* Сховати треба лише меню-шторку — на великому екрані розділи стоять
     угорі. Карта питань теж лежить у .sheet, але вона потрібна скрізь. */
  #menu-sheet { display: none !important; }
}

@media print {
  .topbar, .qnav, .toolbar, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- Ілюстрації з підручників ---------- */

.figures {
  display: grid; gap: 16px; margin: 0 0 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.fig {
  margin: 0; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
/* Скани з книжок різного розміру й пропорцій. Обмежуємо висоту, щоб
   сітка не «стрибала»; повний розмір відкривається за кліком. */
.fig img {
  width: 100%; height: 190px; object-fit: contain; background: #fff;
  cursor: zoom-in; display: block; padding: 8px; box-sizing: border-box;
}
.fig figcaption {
  font-size: .78rem; line-height: 1.45; padding: 10px 12px 12px;
  border-top: 1px solid var(--line); color: var(--ink-2);
}

.figfull {
  position: fixed; inset: 0; z-index: 300; cursor: zoom-out;
  background: rgba(22, 32, 43, .88); padding: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.figfull img {
  max-width: 100%; max-height: 84vh; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 10px;
}
.figfull .cap {
  color: #fff; font-size: .84rem; margin-top: 14px; max-width: 720px;
  text-align: center; line-height: 1.5;
}

/* ---------- Матеріали теми ---------- */

.mat { position: relative; margin: 0 0 26px; }
.mat:last-of-type { margin-bottom: 0; }
.mat-title { font-size: 1.1rem; margin: 0 0 10px; }

/* Кнопки правки тримаємо блідими: адміністратор і так знає, де вони, а
   на сторінці головне — сам матеріал. */
.mat-tools {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; opacity: .45; transition: opacity .12s;
}
.mat:hover .mat-tools, .mat-tools:focus-within { opacity: 1; }
.mat-kind {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: auto;
}

.mat-fig { margin: 0; }
.mat-fig img {
  max-width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: var(--white);
}
.mat-fig figcaption, .mat-cap {
  font-size: .84rem; color: var(--ink-soft); margin: 8px 0 0; line-height: 1.5;
}

/* Відео тримаємо у співвідношенні 16:9, інакше рамка або обрізає
   зображення, або лишає під ним порожню смугу. */
.mat-video {
  position: relative; padding-top: 56.25%; border-radius: 10px;
  overflow: hidden; background: #000;
}
.mat-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mat-link {
  display: block; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--white); text-decoration: none;
  color: inherit; transition: border-color .12s, box-shadow .12s;
}
.mat-link:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.mat-link-title { display: block; font-weight: 600; color: var(--blue-deep); }
.mat-link-host { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 2px; }
.mat-link-note { display: block; font-size: .84rem; color: var(--ink-soft); margin-top: 6px; }

.mat-add {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
  font-size: .84rem;
}

/* Поля у модальних вікнах підписані звичайним <label>, без обгортки. */
.modal label {
  display: block; font-size: .78rem; font-weight: 500;
  color: var(--ink-soft); margin-bottom: 5px;
}
.modal input[type=file] { font-size: .86rem; }

/* ---------- Англійські картки ---------- */

.vocab-run { max-width: 640px; margin: 0 auto; }

.vcard { text-align: center; padding: 34px 26px; }
.vmeta { font-size: .8rem; margin-bottom: 22px; }
/* Слово — головне на екрані, тому великим шрифтом і з повітрям навколо:
   картка має читатися з відстані витягнутої руки на телефоні. */
.vword {
  font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.9rem);
  font-weight: 600; line-height: 1.15; margin: 6px 0;
  overflow-wrap: anywhere;
}
.vtrans {
  font-size: 1.2rem; color: var(--blue-deep); margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.vacts { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.vacts .btn { min-width: 150px; }

@media (max-width: 520px) {
  .vcard { padding: 26px 16px; }
  .vacts .btn { min-width: 0; flex: 1; }
}

/* Слово можна натиснути, щоб почути вимову; показуємо це підкресленням
   і значком, інакше про таку можливість ніхто не здогадається. */
.vword.vspeak {
  cursor: pointer; display: inline-flex; align-items: baseline;
  gap: 12px; border-radius: 10px; padding: 2px 10px;
  transition: background .12s;
}
.vword.vspeak:hover, .vword.vspeak:focus-visible {
  background: var(--blue-tint); outline: none;
}
.vsound { font-size: .5em; opacity: .5; }
.vword.vspeak:hover .vsound { opacity: 1; }

.vipa {
  font-family: var(--mono); font-size: .92rem; color: var(--ink-faint);
  margin-top: 4px;
}

/* ---------- Англомовна частина ---------- */

.entop { font-size: .82rem; margin-bottom: 14px; }
/* Умова англійською читається повільніше за рідну, тож рядок ширший і
   міжрядковий інтервал більший, ніж у решті тексту. */
.entext { font-size: 1.02rem; line-height: 1.75; margin: 0 0 18px; max-width: 68ch; }
.enacts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Кожне слово можна торкнутися. Підкреслення ледь помітне: суцільно
   підкреслений текст читати неможливо. */
.w { cursor: pointer; border-bottom: 1px dotted var(--ink-faint); }
.w:hover { background: var(--amber-tint); border-bottom-color: var(--amber); }

.wordpop {
  position: absolute; z-index: 150; max-width: 260px;
  background: var(--ink); color: #fff; border-radius: 9px;
  padding: 9px 12px; font-size: .86rem; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(18,45,70,.28);
}
.wordpop b { display: block; font-family: var(--mono); font-size: .78rem;
             color: var(--amber-line); margin-bottom: 3px; }

/* Відповідь уже дано: варіант лишається живою кнопкою, щоб працював
   дотик до слів, але поводиться як напис. */
.opt.locked { cursor: default; }
.opt.locked:hover { border-color: var(--line); background: var(--white); }
.opt.locked.right:hover { border-color: var(--green); background: var(--green-tint); }
.opt.locked.wrong:hover { border-color: var(--red); background: var(--red-tint); }
.opt .w { border-bottom-color: currentColor; opacity: .95; }

/* ---------- довідник препаратів ---------- */

.dtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.dtools input[type="search"] { flex: 1 1 260px; min-width: 0; }
.dtools select { flex: 0 1 260px; }
.dtools .check { margin: 0; white-space: nowrap; }

.drug {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.dhead {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; user-select: none;
}
.dhead:hover { background: var(--paper-2); }
.dhead h3 { margin: 0; font-size: 1rem; }
.dlat { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); font-style: italic; }
.dsub { margin: 3px 0 0; font-size: .82rem; color: var(--ink-soft); }
.dmeta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 1 auto; }
.dmeta .pill { white-space: normal; text-align: right; }

/* Згорнута картка — це лише заголовок: перелік із семисот препаратів має
   гортатися, а не розтягуватися на сотню екранів. */
.drug .dbody { display: none; padding: 0 16px 14px; border-top: 1px solid var(--line); }
.drug.open .dbody { display: block; }

.dsyn { margin: 10px 0 0; font-size: .82rem; }
.drow { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.drow:last-of-type { border-bottom: 0; }
.dkey { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding-top: 2px; }
.dval p, .dval ul { margin: 0; }
.dval ul { padding-left: 18px; }
.dval li { margin: 2px 0; }
.dkrok {
  margin-top: 10px; padding: 10px 12px;
  background: var(--amber-tint); border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0; font-size: .9rem;
}

@media (max-width: 620px) {
  .drow { grid-template-columns: 1fr; gap: 2px; }
  .dmeta { justify-content: flex-start; }
  .dhead { flex-direction: column; gap: 6px; }
}

/* ---------- позначки в конспекті ---------- */

.notebar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  position: sticky; top: 8px; z-index: 6;
}
.nb-modes, .nb-colors { display: flex; gap: 6px; align-items: center; }
.nb-right { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.nb-status { font-size: .78rem; min-width: 86px; text-align: right; }
.nb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

.sw {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.sw.on { border-color: var(--ink); }
.sw-mark-y { background: #ffe58a; }
.sw-mark-g { background: #b7ebc0; }
.sw-mark-p { background: #ffc4dd; }
.sw-ink-b { background: #1d4ed8; }
.sw-ink-r { background: #c1121f; }
.sw-ink-k { background: #1a1a1a; }

.wd {
  width: 28px; height: 26px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--white); cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
}
.wd.on { border-color: var(--ink); }
.wd i { display: block; width: 16px; background: var(--ink); border-radius: 3px; }

/* Виділення маркером. Колір напівпрозорий, щоб текст лишався читабельним
   і поверх виділення було видно рукописне. */
mark.hl { background: transparent; color: inherit; border-radius: 2px; padding: 0 1px; }
mark.hl-y { background: rgba(255, 214, 64, .45); }
mark.hl-g { background: rgba(52, 199, 89, .28); }
mark.hl-p { background: rgba(255, 105, 170, .26); }

/* Аркуш конспекту стає полотном: шар лежить поверх тексту, але поки не
   ввімкнено олівець, події миші крізь нього проходять до тексту. */
#theory-body { position: relative; }
.ink-layer {
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; overflow: visible; z-index: 4;
}
.ink-layer.active { pointer-events: auto; touch-action: pan-y; }
.ink { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ink-b { stroke: #1d4ed8; }
.ink-r { stroke: #c1121f; }
.ink-k { stroke: #1a1a1a; }

/* Поки малюють, текст не має виділятися від дотику долонею. */
#theory-body.noting { -webkit-user-select: none; user-select: none; }

@media (max-width: 620px) {
  .notebar { position: static; }
  .nb-right { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Кнопка підтвердження виділення. Стоїть під самим текстом, бо зверху
   iPadOS показує власне віконце «Копіювати / Знайти». */
.mark-ask {
  position: absolute; z-index: 40;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

/* =========================================================================
   Стоматологічний шар
   -------------------------------------------------------------------------
   Сайт лишається робочим інструментом для підготовки до іспиту, тож теми
   тут рівно стільки, щоб її було видно, і не стільки, щоб вона заважала
   читати. Три прийоми: знак із зубом, ледь помітний візерунок на тлі й
   шар емалі в шкалах поступу.
   ========================================================================= */

:root {
  /* Кольори емалі й дентину: холодний блакитний відблиск поверх теплого
     кістяного. Вони доповнюють наявну бірюзу, а не заміняють її. */
  --enamel: #EFF6FA;
  --enamel-edge: #DCE8F0;
  --dentine: #F2E8D8;
  --mint: #85BBD6;
}

/* Тло: розріджена сітка зубів, майже невидима. Ставимо на сам документ, а
   не на body, щоб вона не з'їжджала разом із вмістом при прокручуванні. */
html {
  background:
    radial-gradient(1200px 520px at 50% -240px, var(--enamel), transparent 70%),
    var(--paper);
}
body {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'>\
<g fill='none' stroke='%233F7B9E' stroke-opacity='.035' stroke-width='1.4'>\
<path d='M30 26c-6 0-10 5-10 12 0 7 2 10 3 17 1 6 1 13 4 13s3-7 5-11c1-3 3-3 4 0 2 4 2 11 5 11s3-7 4-13c1-7 3-10 3-17 0-7-4-12-10-12-3 0-4 1-4 1s-1-1-4-1z'/>\
<path d='M126 104c-6 0-10 5-10 12 0 7 2 10 3 17 1 6 1 13 4 13s3-7 5-11c1-3 3-3 4 0 2 4 2 11 5 11s3-7 4-13c1-7 3-10 3-17 0-7-4-12-10-12-3 0-4 1-4 1s-1-1-4-1z'/>\
</g></svg>");
  background-attachment: fixed;
}

/* ---------- знак ---------- */

.brandmark { display: flex; align-items: center; gap: 10px; }
.brandmark .tooth {
  width: 26px; height: 26px; flex: none;
  color: var(--blue);
  filter: drop-shadow(0 1px 1px rgba(63, 123, 158, .16));
}
.authbox .logo .tooth {
  width: 54px; height: 54px; color: var(--blue);
  margin: 0 auto 10px; display: block;
}

/* Великий блідий зуб за карткою входу — щоб перший екран не був порожнім. */
.authshell { position: relative; overflow: hidden; }
.authshell::before {
  content: ''; position: absolute; right: -80px; bottom: -110px;
  width: 460px; height: 460px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path fill='%233F7B9E' fill-opacity='.05' d='M32 6c-4 0-6 2-9 2s-5-2-9-2C8 6 5 12 5 20c0 9 3 13 5 22 2 8 2 16 6 16s4-9 6-15c2-5 6-5 8 0 2 6 2 15 6 15s4-8 6-16c2-9 5-13 5-22 0-8-3-14-9-14-4 0-6 2-9 2z'/>\
</svg>") center/contain no-repeat;
}
.authbox { position: relative; z-index: 1; }

/* ---------- шкали як шар емалі ---------- */

.bar { background: var(--enamel); box-shadow: inset 0 0 0 1px var(--enamel-edge); }
.bar > i {
  background: linear-gradient(90deg, var(--mint), var(--blue));
}
.bar > i.ok { background: linear-gradient(90deg, #3CB371, var(--green)); }
.bar > i.warn { background: linear-gradient(90deg, #D99A3C, var(--amber)); }
.bar > i.bad { background: linear-gradient(90deg, #C9615C, var(--red)); }

/* ---------- плитки режимів ---------- */

/* Кутовий зуб-водяний знак: плитка перестає бути просто прямокутником,
   але нічого не перекриває. */
.mode { position: relative; overflow: hidden; }
.mode::after {
  content: ''; position: absolute; right: -26px; top: -18px;
  width: 120px; height: 120px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path fill='%233F7B9E' fill-opacity='.07' d='M32 6c-4 0-6 2-9 2s-5-2-9-2C8 6 5 12 5 20c0 9 3 13 5 22 2 8 2 16 6 16s4-9 6-15c2-5 6-5 8 0 2 6 2 15 6 15s4-8 6-16c2-9 5-13 5-22 0-8-3-14-9-14-4 0-6 2-9 2z'/>\
</svg>") center/contain no-repeat;
  transform: rotate(12deg);
}
.mode.amber::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path fill='%23B4670A' fill-opacity='.09' d='M32 6c-4 0-6 2-9 2s-5-2-9-2C8 6 5 12 5 20c0 9 3 13 5 22 2 8 2 16 6 16s4-9 6-15c2-5 6-5 8 0 2 6 2 15 6 15s4-8 6-16c2-9 5-13 5-22 0-8-3-14-9-14-4 0-6 2-9 2z'/>\
</svg>");
}
.mode.grey::after { opacity: .5; }
.mode > * { position: relative; z-index: 1; }
.mode:hover { border-color: var(--enamel-edge); box-shadow: 0 2px 4px rgba(18,45,70,.05), 0 12px 30px rgba(63,123,158,.10); }
.mode { transition: box-shadow .18s, border-color .18s, transform .18s; }
.mode:hover { transform: translateY(-2px); }

/* ---------- заголовки розділів ---------- */

/* Перед назвою розділу — маленький зуб замість звичайної рисочки. */
.seclabel { display: flex; align-items: center; gap: 8px; }
.seclabel::before {
  content: ''; width: 13px; height: 13px; flex: none;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path fill='%233F7B9E' d='M32 6c-4 0-6 2-9 2s-5-2-9-2C8 6 5 12 5 20c0 9 3 13 5 22 2 8 2 16 6 16s4-9 6-15c2-5 6-5 8 0 2 6 2 15 6 15s4-8 6-16c2-9 5-13 5-22 0-8-3-14-9-14-4 0-6 2-9 2z'/>\
</svg>") center/contain no-repeat;
  opacity: .55;
}

/* ---------- дрібне ---------- */

.stat { transition: box-shadow .18s, transform .18s; }
.stat:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(18,45,70,.05), 0 10px 24px rgba(63,123,158,.09); }

.topbar { background: rgba(249,251,253,.88); }
.topbar nav a.on { box-shadow: 0 2px 8px rgba(63,123,158,.28); }

/* Картка з матеріалом теми — аркуш із тонкою емалевою смужкою зверху. */
#theory-body { border-top: 3px solid var(--enamel-edge); }

/* Під час роботи тло рівне: тоді жодна оздоба не відволікає. Ознака —
   присутність панелі іспиту, окремого класу для цього не заводимо. */
body:has(.exambar) { background-image: none; }

/* Дії в рядку таблиці. Видалення — хрестик, а не слово: у рядку на
   чотири кнопки слово «Видалити» витісняє все інше. */
.rowacts { white-space: nowrap; }
.btn-del {
  padding: 6px 10px; color: var(--ink-faint); font-size: 1rem; line-height: 1;
}
.btn-del:hover { color: var(--red); border-color: var(--red); background: var(--red-tint); }

/* Кнопка прослуховування у картці перекладу та вибір голосу. */
.popsay {
  border: 0; background: transparent; cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 0 4px; margin-left: 2px;
  opacity: .75;
}
.popsay:hover { opacity: 1; }
.voicepick {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--ink-soft);
}
.voicepick select { max-width: 210px; }

/* =========================================================================
   Вигляд власних нотаток
   -------------------------------------------------------------------------
   Сайт був надто офіційний — як бланк, а не як зошит. Додаємо те, за чим
   впізнають власні записи: крапкову сітку на картках, рукописні підписи
   розділів, підкреслення від руки під заголовком і смужку клейкої стрічки
   на врізках.

   Чого навмисно не робимо: не пишемо рукописним шрифтом сам матеріал і не
   нахиляємо картки. Теорію читають годинами, і кожна така «жвавість»
   обертається втомою очей.
   ========================================================================= */

:root {
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --rule: rgba(63, 123, 158, .09);     /* колір сітки на папері */
  --tape: rgba(180, 103, 10, .14);     /* клейка стрічка */
}

/* Крапкова сітка — як у зошиті в крапку. Не прив'язана до рядків тексту:
   сітка, що не збігається з ними, читається як неохайність, а ця просто
   лежить під текстом рівним полем. */
.card, #theory-body, .drug, .tablewrap {
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}
/* Там, де під сіткою стоять рядки таблиці, вона зайва. */
.tablewrap table { background: var(--white); }

/* ---------- рукописні підписи ---------- */

.eyebrow {
  font-family: var(--hand); font-size: 1.22rem; letter-spacing: 0;
  text-transform: none; color: var(--blue); font-weight: 600;
}
.seclabel {
  /* Caveat дрібніший за звичайні шрифти при тому самому кеглі, тому
     підпис розділу ставимо помітно більшим: він має читатися як
     написаний від руки заголовок, а не як дрібна примітка. */
  font-family: var(--hand); font-size: 1.62rem; letter-spacing: 0;
  text-transform: none; color: var(--ink); font-weight: 600;
  line-height: 1.15;
}
.seclabel::before { width: 16px; height: 16px; opacity: .6; }
.topbar .brand small { font-family: var(--hand); font-size: .82rem; letter-spacing: 0; text-transform: none; }

/* ---------- підкреслення від руки ---------- */

/* Хвиляста лінія під заголовком сторінки: саме так підкреслюють у
   зошиті — не по лінійці. */
/* Підпис стоїть над заголовком окремим рядком: сам заголовок став
   рядковим, щоб підкреслення від руки було рівно по ширині тексту. */
.pagehead .eyebrow { display: block; margin-bottom: 2px; }
.pagehead h1 {
  display: inline-block;
  padding-bottom: 10px;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10' preserveAspectRatio='none'>\
<path d='M2 7c24-5 40 3 62-1 22-4 38 4 60 0 22-4 40 4 74-2' fill='none' stroke='%233F7B9E' stroke-opacity='.45' stroke-width='2.4' stroke-linecap='round'/>\
</svg>") left bottom / 100% 9px no-repeat;
}

/* ---------- врізки як записки ---------- */

/* Смужка клейкої стрічки над кольоровою врізкою в конспекті. */
.theory-content .tbox { position: relative; }
.theory-content .tbox::before {
  content: ''; position: absolute; top: -7px; left: 22px;
  width: 58px; height: 15px;
  background: var(--tape);
  border-left: 1px dashed rgba(180, 103, 10, .28);
  border-right: 1px dashed rgba(180, 103, 10, .28);
  transform: rotate(-2deg);
  pointer-events: none;
}

/* ---------- олівцеві дрібниці ---------- */

/* Виділення в тексті теорії — як слід маркера, з нерівним краєм. */
.theory-content b, .theory-content strong { font-weight: 600; }

/* Цитата з підручника — на полях, як виписка. */
blockquote {
  border-left: 3px solid var(--blue-tint);
  margin: 14px 0; padding: 2px 0 2px 14px; color: var(--ink-soft);
}

/* Картки трохи тепліші за тло: аркуш, покладений на стіл. */
.card, .stat, .mode, .drug { background-color: #FFFEFC; }

/* Під час іспиту сітки немає: там потрібен чистий бланк. */
body:has(.exambar) .card { background-image: none; }

/* Поле зошита: вертикальна лінія ліворуч на аркуші з матеріалом. На
   вузькому екрані її немає — там кожен піксель ширини потрібен тексту. */
@media (min-width: 760px) {
  #theory-body {
    padding-left: 40px;
    background-image:
      linear-gradient(to right, transparent 21px, rgba(180, 103, 10, .20) 21px,
                      rgba(180, 103, 10, .20) 22px, transparent 22px),
      radial-gradient(var(--rule) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    background-position: 0 0, 11px 11px;
    background-repeat: no-repeat, repeat;
  }
}

/* ---------- переходи між сторінками ---------- */

@keyframes page-in-fwd {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes page-in-back {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.page-fwd  { animation: page-in-fwd .22s cubic-bezier(.22, .61, .36, 1) both; }
.page-back { animation: page-in-back .22s cubic-bezier(.22, .61, .36, 1) both; }

/* Картки й рядки таблиці підхоплюються з невеликим відставанням — так
   сторінка «розкладається», а не з'являється однією плитою. Затримки
   лише на перших кількох: далі око їх однаково не помічає, а чекати
   доводиться довше. */
.page-fwd .card, .page-back .card,
.page-fwd .mode, .page-back .mode,
.page-fwd .stat, .page-back .stat,
.page-fwd .tablewrap, .page-back .tablewrap {
  animation: page-in-fwd .26s cubic-bezier(.22, .61, .36, 1) both;
}
.page-fwd .card:nth-child(2), .page-fwd .mode:nth-child(2),
.page-fwd .stat:nth-child(2), .page-back .card:nth-child(2) { animation-delay: .03s; }
.page-fwd .card:nth-child(3), .page-fwd .mode:nth-child(3),
.page-fwd .stat:nth-child(3), .page-back .card:nth-child(3) { animation-delay: .06s; }
.page-fwd .mode:nth-child(4), .page-fwd .stat:nth-child(4) { animation-delay: .09s; }

/* Дрібні натискання теж мають відгук. */
.btn { transition: background .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s; }
.btn:active { transform: translateY(1px) scale(.985); }
tbody tr { transition: background .12s; }

/* Кому анімації заважають — тому їх немає. Це системне налаштування, і
   зневажати його не можна: для частини людей рух на екрані означає
   нудоту, а не красу. */
@media (prefers-reduced-motion: reduce) {
  .page-fwd, .page-back,
  .page-fwd .card, .page-back .card, .page-fwd .mode, .page-back .mode,
  .page-fwd .stat, .page-back .stat, .page-fwd .tablewrap, .page-back .tablewrap {
    animation: none;
  }
  html { scroll-behavior: auto; }
}

@media (max-width: 520px) {
  .pagehead h1 { font-size: 1.5rem; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 12px 13px; }
  .stat .v { font-size: 1.3rem; }
  main.wrap { padding-top: 18px; }
}

/* Кошик матеріалів теми: видно лише адміністраторові й лише коли не порожній. */
.mat-trash { margin-top: 16px; }
.trashrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border: 1px dashed var(--line-strong, var(--line));
  border-radius: 10px; background: var(--surface-2, var(--paper-2)); margin-bottom: 8px;
}
.trashrow p { margin: 2px 0 0; font-size: .8rem; }

/* Перелік тем для тренування: прапорці замість випадного списку. */
.topiclist {
  max-height: 280px; overflow: auto; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
  background: var(--white);
}
.topiclist .check { display: flex; align-items: baseline; gap: 7px; margin: 0; padding: 3px 0; }
/* Дисципліна теми — праворуч, дрібним: назви тем у різних дисциплінах
   бувають схожі, і без підпису не видно, про яку саме йдеться. */
.tsub { margin-left: auto; padding-left: 10px; font-size: .72rem; color: var(--ink-faint); white-space: nowrap; }
#tq { width: 100%; }

/* Системи органів у тренуванні: у два стовпці, бо їх рівно одинадцять. */
#syscard { margin-bottom: 16px; }
.syslist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px 18px; }
.syslist .check { margin: 0; padding: 3px 0; }

/* Смужка денної норми над переліком дисциплін. */
.daybar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}

/* Заголовок дисципліни в переліку тем і дисципліни всередині системи. */
.tgroup {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 10px 0 2px; padding-top: 6px; border-top: 1px solid var(--line-soft);
}
.tgroup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.syssubs .check { margin: 0; padding: 4px 0; }

/* Пошук по всьому словнику й кнопка озвучення в рядку. */
.wtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.wtools input[type="search"] { flex: 1 1 240px; min-width: 0; }
.wtools select { flex: 0 1 200px; }
.wsay {
  border: 0; background: transparent; cursor: pointer; padding: 0 2px;
  font-size: .9rem; line-height: 1; opacity: .6;
}
.wsay:hover { opacity: 1; }

/* --- Флеш-картки препаратів --------------------------------------------
 *
 * Лицьовий бік тримаємо просторим і по центру, як у картках зі словами:
 * коли на екрані сама лише назва, ніщо не має підказувати відповідь.
 * Зворотний бік — звичайні рядки довідника, вирівняні ліворуч, бо це
 * вже текст для читання, а не для згадування.
 */
.dcard { text-align: center; padding: 20px 22px; }
.statnum { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.dstat { margin-bottom: 18px; }

.cname { font-size: 1.55rem; font-weight: 700; margin: 4px 0 2px; }
.clat { font-style: italic; color: var(--ink-faint); margin-bottom: 8px; }
.cclue {
  font-size: 1.06rem; line-height: 1.55; text-align: left;
  max-width: 46em; margin: 4px auto 18px;
}


/* Варіанти відповіді — у стовпчик: назви препаратів довгі, у рядок вони
   переносяться посеред слова і читаються гірше. */
.copts { display: grid; gap: 8px; max-width: 34em; margin: 4px auto 0; }
.copt {
  text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
  font: inherit; color: inherit; cursor: pointer;
}
.copt:hover { border-color: var(--blue); }
.copt.ok { border-color: var(--green); background: var(--green-tint); }
.copt.no { border-color: var(--red); background: var(--red-tint); }

@media (max-width: 640px) {
  .dcard { padding: 14px 12px; }
  .cname { font-size: 1.15rem; margin: 2px 0; }
  .clat { font-size: .82rem; margin-bottom: 4px; }
  .row3.dstat { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .row3.dstat .card { padding: 12px 8px; }
  .statnum { font-size: 1.4rem; }
}

/* --- Зворотний бік флеш-картки ------------------------------------------
 *
 * Чотири блоки, як на кафедральних слайдах: група, механізм, ефекти —
 * поруч, показання — широкою смугою під ними. Заголовок блоку темніший
 * за його вміст, тож око спершу бачить, про що йдеться, і вже потім
 * читає. Кожен пункт окремою плиткою: перелік через крапку з комою
 * читається гірше, ніж той самий перелік рядками.
 */
.cback.fcgrid {
  display: grid; gap: 8px; margin: 14px 0 0; text-align: left;
  grid-template-columns: repeat(3, 1fr);
}
.fcwide { margin-top: 8px; display: flex; justify-content: center; }
.fcwide .fcb { width: min(100%, 34em); }

.fcb { display: flex; flex-direction: column; gap: 4px; }
.fch {
  background: var(--sky); color: var(--ink);
  font-weight: 700; text-align: center; font-size: .82rem;
  padding: 6px 10px; border-radius: 9px;
}
.fcg {
  font-size: .74rem; color: var(--ink-faint); text-align: center;
  line-height: 1.3; padding: 0 6px;
}
.fci {
  background: var(--blue-tint); border-radius: 9px; font-size: .88rem;
  padding: 7px 10px; text-align: center; line-height: 1.35;
}
/* Скільки пунктів лишилося за кадром. Навмисно непримітно: це не зміст,
   а підказка, де шукати повний перелік. */
.fcmore { font-size: .74rem; color: var(--ink-faint); text-align: center; }

@media (max-width: 760px) {
  /* На телефоні картка має вміщатися в екран цілком: гортати, щоб
     побачити показання, — це вже не картка, а сторінка довідника. */
  .cback.fcgrid { grid-template-columns: 1fr; gap: 5px; margin-top: 10px; }
  .fcwide { margin-top: 5px; }
  .fcb { gap: 3px; }
  .fch { padding: 4px 8px; font-size: .72rem; border-radius: 7px; }
  .fci {
    padding: 5px 8px; text-align: left; font-size: .8rem;
    line-height: 1.3; border-radius: 7px;
  }
  .fcg { display: none; }
  .fcmore { font-size: .68rem; }
  .dsrc { margin-top: 7px; padding-top: 5px; font-size: .68rem; }
  .vacts { margin-top: 10px; }
}

/* Підпис джерела картки препарату. Дрібний і неяскравий: він потрібен
   для довіри, а не для читання щоразу. */
.dsrc {
  margin: 10px 0 0; font-size: .74rem; color: var(--ink-faint);
  border-top: 1px dotted var(--line); padding-top: 6px; text-align: left;
}

/* Ціна на екрані оплати. Велика й спокійна: це головне число сторінки,
   але не заклик, тому без яскравого кольору. */
.payprice {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 700;
  line-height: 1.1; margin: 14px 0 6px; color: var(--ink);
}

/* --- Вітрина ------------------------------------------------------------
 *
 * Єдина сторінка, яку бачать до реєстрації. Тому вона показує сам
 * матеріал, а не обіцянки: справжній конспект, справжні завдання,
 * справжню картку. Оформлення стримане — товар тут і є оформлення.
 */
.showcase { max-width: 900px; margin: 0 auto; padding: 34px 18px 90px; }

.sc-hero { text-align: center; padding: 10px 0 26px; }
.sc-hero .tooth { width: 54px; height: 54px; color: var(--blue); }
.sc-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 10px 0 6px; }
.sc-hero p { color: var(--ink-soft); max-width: 60ch; margin: 0 auto; }
.sc-acts {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 22px;
}

.sc-facts {
  display: grid; gap: 12px; margin: 10px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.sc-fact {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.sc-fact b { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.sc-fact span { display: block; font-weight: 500; margin: 4px 0 2px; }
.sc-fact small { color: var(--ink-faint); font-size: .8rem; line-height: 1.35; display: block; }

.sc-block { margin: 30px 0; }
.sc-q .sc-qtext { font-weight: 500; margin: 0 0 10px; }
.sc-opts { margin: 0; padding-left: 1.3em; }
.sc-opts li { padding: 3px 0; }
.sc-opts li.ok { color: var(--green); font-weight: 600; }

.sc-buy .card { padding: 30px 24px; }
.sc-buy h2 { margin-bottom: 4px; }
.sc-buy .payprice { margin: 10px 0 8px; }

@media (max-width: 640px) {
  .showcase { padding: 22px 14px 70px; }
  .sc-fact { padding: 13px 15px; }
  .sc-fact b { font-size: 1.45rem; }
}

/* --- Підхід флеш-картками на весь екран ---------------------------------
 *
 * Картка потрібна для того, щоб охопити її оком за раз. Усередині
 * звичайної сторінки над нею шапка, обабіч поля, знизу край екрана — і
 * частину доводиться догортувати, тобто саме те, чого картка має
 * позбавити. Тому на час підходу вона займає екран цілком.
 *
 * Трьома смугами: поступ і лічильник угорі, картка посередині, кнопки
 * знизу. Середина стискається під те, що лишилося, а не навпаки.
 */
body.fcmode { overflow: hidden; }

.fcstage {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  background: var(--paper);
  padding: 14px clamp(12px, 4vw, 28px) calc(14px + env(safe-area-inset-bottom));
}

.fctop { flex: 0 0 auto; }
.fcmeta {
  display: flex; align-items: center; gap: 14px; margin-top: 8px;
  font-size: .78rem; color: var(--ink-faint);
}
.fcmeta .pill { font-size: .6rem; }
.fcx {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--ink-faint); padding: 4px 6px;
}
.fcx:hover { color: var(--ink); }

/* Середина — єдине місце, якому дозволено прокручуватись, і то лише
   тоді, коли картка виявилася довшою за екран. */
.fcmid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
}
.fcmid > .card { width: min(100%, 880px); margin: auto; }

.fcbot { flex: 0 0 auto; padding-top: 10px; }
.fcbot .vacts { margin: 0; display: flex; gap: 10px; justify-content: center; }
.fcbot .vacts .btn { min-width: 150px; }
.fcbot .copts { max-width: 34em; margin: 0 auto; }

@media (max-width: 640px) {
  .fcstage { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .fcmeta { gap: 10px; font-size: .72rem; margin-top: 6px; }
  .fcbot .vacts .btn { min-width: 0; flex: 1; }
}

/* ---------- Умови й договори ---------- */

/* Аркуш із суцільним текстом читають підряд, тому рядок вужчий за
   звичайну сторінку: довгий рядок ока не тримає. */
.legal { max-width: 720px; }
.legal h2 {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 700;
  margin: 26px 0 8px;
}
.legal p { margin: 0 0 10px; line-height: 1.6; }

/* Картка реквізитів. Ім'я — заголовком: на питання «хто продає» має
   відповідати перший рядок, а не комірка таблиці. */
.reqcard {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); padding: 18px 20px; margin-top: 14px;
  max-width: 560px;
}
.reqname {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 700;
  line-height: 1.3; padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.reqs { margin: 0; }
/* Підпис над значенням, а не поруч: довга адреса тоді не б'ється на
   вузький стовпчик, а йде на всю ширину картки. */
.req { padding: 10px 0; border-bottom: 1px solid var(--line); }
.req:last-child { border-bottom: 0; padding-bottom: 0; }
.req dt {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.req dd { margin: 0; line-height: 1.45; }
/* Номери копіюють, тому цифри однакової ширини й виділяються одним
   дотиком, без вожіння пальцем по рядку. */
.req-num {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; user-select: all; -webkit-user-select: all;
}

@media (min-width: 560px) {
  /* Коли місця вистачає — підпис ліворуч, значення праворуч: так
     картка читається як бланк, а не як стовпчик. */
  .req {
    display: grid; grid-template-columns: 190px 1fr;
    align-items: baseline; gap: 14px;
  }
  .req dt { margin-bottom: 0; }
}

.foot {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 16px calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); margin-top: 40px;
  font-size: .82rem; text-align: center;
}
/* Рядок реквізитів — те, що банк шукає на сайті очима: хто продає, під
   яким номером, де і як з ним зв'язатися. */
.foot-req { color: var(--ink-soft); max-width: 720px; line-height: 1.5; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.doclinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.foot a { color: var(--ink-faint); }
.foot a:hover { color: var(--blue-deep); }
/* На екрані входу підвал стоїть під карткою, а не приклеєний до низу. */
.authshell .foot { border-top: 0; margin-top: 26px; padding-bottom: 12px; }
/* Під час іспиту підвал ні до чого: він відволікає й відсуває кнопки. */
body.runmode .foot, body:has(.exambar) .foot { display: none; }

/* Перелік тем: рядок цілком відкриває тему. Ціль для пальця завбільшки
   з рядок влучніша за кнопку, а стовпець із кнопками звільняється під
   те, що справді потрібно, — позначку про опрацьоване. */
.topics tbody tr { cursor: pointer; }
.topics tbody tr:hover { background: var(--blue-tint); }
.topics tbody td:nth-child(2) { color: var(--blue-deep); }
/* Комірка з галочкою натиск до рядка не пускає: людина відмічає
   пройдене, а не йде читати. */
.topics .tdone { cursor: default; text-align: center; }
.topics .tdone .check { display: inline-flex; margin: 0; padding: 6px 12px; }
.topics .tdone input { width: 20px; height: 20px; }

/* Згода з умовами перед оплатою.
   Галочка окремо, текст окремим блоком: інакше довгі посилання не мають
   де переноситися, і рядок розсовує картку ширше за екран. */
.payagree {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 330px; margin: 16px auto 0;
  text-align: left; font-size: .86rem; line-height: 1.45;
  cursor: pointer;
}
.payagree input { flex: none; margin-top: 2px; width: 18px; height: 18px; }
/* Сітка навколо картки не має рости за вмістом: що не вміщається,
   те переноситься, а не виштовхує решту за край екрана. */
.authshell { max-width: 100%; }
.authbox { min-width: 0; }

/* Акційна ціна: стара поруч і перекреслена. Вона тут не для краси —
   без неї «349» ні про що не каже, а з нею видно, від чого знижка. */
.payprice s {
  margin-left: 12px; font-size: .5em; font-weight: 500;
  color: var(--ink-faint); text-decoration-thickness: 2px;
}
.promo {
  margin-top: 10px; font-size: .88rem; line-height: 1.4;
  color: var(--amber); font-weight: 500;
}

/* Смужка демонстраційного режиму. Бурштинова, бо це попередження, а не
   помилка, і стоїть над шапкою — її має бути видно з будь-якого екрана. */
.demobar {
  position: sticky; top: 0; z-index: 60;
  background: var(--amber); color: #fff;
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 14px;
  font-size: .86rem; line-height: 1.35;
}
/* Кнопка тут світла на бурштиновому, а не навпаки: смужка вже яскрава,
   і другий яскравий колір усередині неї сперечався б із нею. */
.demobar .demobtn {
  background: #fff; color: var(--amber);
  border-radius: 999px; padding: 5px 16px;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.demobar .demolink { color: #fff; text-decoration: underline; white-space: nowrap; }
.demobar + .topbar { top: 46px; }
@media (max-width: 480px) {
  .demobar { font-size: .8rem; padding: 7px 12px; }
  .demobar + .topbar { top: 68px; }
}

/* Закрита в демо тема. Не ховаємо й не робимо недоступною: нехай
   натискають і бачать, що саме там лежить, — це і продає. Але видно
   одразу, що вона закрита, щоб не шукати навмання. */
.topics tr.shut td:nth-child(2) { color: var(--ink-faint); }
.lockmark {
  display: inline-block; margin-left: 10px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber);
  background: var(--amber-tint); border-radius: 999px; padding: 3px 9px;
  vertical-align: middle; white-space: nowrap;
}

/* ---------- Перший екран для гості ----------

   Число тут головне: воно й пояснює, навіщо вчити слова, і його можна
   перевірити. Тому воно стоїть перед заголовком і більше за нього. */
.welcome { max-width: 860px; }
.wlead { margin-bottom: 34px; }
.wbig {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 5.2rem); line-height: .95;
  color: var(--blue-deep); margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.welcome h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.35;
  max-width: 620px; margin-bottom: 14px;
}
.welcome .wlead p { color: var(--ink-soft); line-height: 1.6; max-width: 640px; }
.wsub {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  margin: 0 0 14px;
}
.wverdict { margin: 16px 0 0; font-weight: 600; }
.wverdict.ok { color: var(--green); }
.wverdict.no { color: var(--red); }
.wnext { margin-top: 18px; }
.wcta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px;
}
@media (max-width: 480px) {
  .wcta .btn { width: 100%; }
}

/* Підказка про дотик до слова. Без неї переклад ніхто не знайде: на
   вигляд це звичайний текст, і здогадатися, що по ньому можна тицьнути,
   нізвідки. */
.whint { font-size: .84rem; margin: 10px 0 0; }

/* Розділи: не плитки з назвами — назви видно й у меню, — а те, чого без
   розділу не буде. Тому кожен блок читається як абзац, а не як кнопка. */
.wsecs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
/* Оболонка та сама, що в плиток показників (.stat): біла картка з тонкою
   рамкою й тінню. Різниця одна — головне тут не число, а назва розділу,
   тож у неї й іде великий шрифт. */
.wsec {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow);
}
.wsec h3 {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  margin: 0 0 6px; line-height: 1.15;
}
.wsec p {
  margin: 0; color: var(--ink-soft); line-height: 1.5; font-size: .82rem;
}