/* Async-режим (§7.1): светлая тема, мобайл-first, те же плитки .opt-a…f из app.css. */

.async .meta { font-size: 15px; }

/* ---------- прохождение ---------- */
.a-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); }
.a-head__right { text-align: right; }
.a-progress { font-size: 20px; font-weight: 800; }
.a-score { font-size: 26px; font-weight: 800; line-height: 1; }

.a-timer { display: flex; align-items: center; gap: 10px; }
.a-timer .bar { flex: 1 1 auto; height: 12px; }
.a-timer .bar > i { transition: width 100ms linear; }
.a-timer__num { min-width: 3ch; text-align: right; font-weight: 800; font-size: 20px; }
.a-timer.is-late .bar > i { background: var(--bad); }
.a-timer.is-late .a-timer__num { color: var(--bad); }
.a-timer.is-over .a-timer__num { color: var(--bad); }

.q-text { font-size: clamp(20px, 5.5vw, 28px); font-weight: 700; line-height: 1.25; }
.q-theme { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.q-media { width: 100%; max-height: 40dvh; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-2); }
.q-hint { font-size: 14px; color: var(--muted); }

.opts.cols-1 { grid-template-columns: 1fr; }
.opt { min-height: 72px; }
.opt .opt__shape { color: inherit; flex: 0 0 auto; }
.opt:disabled { opacity: 1; }
.opt.dim:disabled { opacity: .4; }
.opt.is-yours { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .85); }
.opt.wrong-pick { outline: 4px solid var(--bad); outline-offset: 2px; }

.a-input { display: flex; flex-direction: column; gap: var(--gap); }
.a-input .input { font-size: 22px; min-height: 64px; }

.a-verdict { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 16px 18px; border-radius: var(--radius); font-size: 22px; font-weight: 800; }
.a-verdict.ok { background: color-mix(in srgb, var(--ok) 22%, var(--card)); color: #0b5a2a; }
.a-verdict.bad { background: color-mix(in srgb, var(--bad) 20%, var(--card)); color: #8a1c1c; }
.a-verdict.part { background: color-mix(in srgb, var(--warn) 24%, var(--card)); color: #6b4300; }
.a-verdict__pts { font-variant-numeric: tabular-nums; }
.a-answer { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 16px; }
.a-answer dt { color: var(--muted); }
.a-answer dd { margin: 0; font-weight: 600; }
.a-expl { padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--bg-2); border-radius: var(--radius-sm); }
.a-empty { color: var(--muted); }

/* ---------- результат ---------- */
.r-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg) var(--gap); }
.r-stat { display: flex; flex-direction: column; gap: 4px; }
.r-stat__num { font-size: clamp(30px, 9vw, 44px); font-weight: 800; line-height: 1; }
.r-stat__label { font-size: 14px; color: var(--muted); }
.r-item { border-left: 5px solid var(--line); }
.r-item.is-ok { border-left-color: var(--ok); }
.r-item.is-part { border-left-color: var(--warn); }
.r-item.is-bad { border-left-color: var(--bad); }
.r-item__q { font-weight: 700; }
.r-item__verdict { display: flex; justify-content: space-between; font-weight: 800; }
.r-item__expl { color: var(--fg-2); font-size: 15px; }

/* ---------- админка раундов ---------- */
.admin-round-grid { align-items: start; }
@media (max-width: 720px) {
  .admin-round-grid, .grid-2 { grid-template-columns: 1fr; }
}