:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1b1f24);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --link: var(--tg-theme-link-color, #1f7a5a);
  --btn: var(--tg-theme-button-color, #1f9d6b);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f3f5f7);
  --line: rgba(127, 127, 127, 0.25);
  --danger: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root:not(.tg) {
    --bg: #15181c; --text: #e8eaed; --hint: #9aa0a6; --link: #5fd0a0;
    --btn: #22a874; --btn-text: #ffffff; --card: #1f2328;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 12px; }
h2 { font-size: 18px; margin: 20px 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--link); }
.muted { color: var(--hint); font-size: 14px; }
.wrap { padding: 16px; }
.card { background: var(--card); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; }
.card ul { margin: 6px 0 0; padding-left: 20px; }
.btn {
  display: block; width: 100%; border: 0; border-radius: 12px; padding: 14px 16px;
  margin: 8px 0 0; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--btn); color: var(--btn-text); text-align: center; text-decoration: none;
}
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn.secondary { background: var(--card); color: var(--text); }
.btn.link { background: none; color: var(--link); font-weight: 500; padding: 10px 0; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.choice {
  display: block; width: 100%; text-align: left; border: 2px solid var(--line); background: var(--bg);
  color: var(--text); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; font: inherit; cursor: pointer;
}
.choice b { display: block; }
.choice[aria-pressed="true"] { border-color: var(--btn); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--btn); }
.progress { height: 6px; border-radius: 3px; background: var(--card); overflow: hidden; margin: 0 0 18px; }
.progress > i { display: block; height: 100%; background: var(--btn); transition: width 0.2s; }
.question { font-size: 19px; font-weight: 600; min-height: 3.2em; margin: 0 0 16px; }
.level { font-size: 44px; font-weight: 800; line-height: 1; margin: 6px 0 8px; }
.course h3 { margin: 0 0 4px; font-size: 17px; }
.course .meta { color: var(--hint); font-size: 14px; margin: 0 0 4px; }
.error { color: var(--danger); }
.consent { font-size: 12px; line-height: 1.4; }
.consent p, .consent ul { margin-bottom: 8px; }
.consent li { margin-bottom: 4px; }
.consent-check { font-size: 13px; }
.file { display: block; width: 100%; margin: 12px 0 4px; font: inherit; color: var(--text); }
.hidden { display: none; }