/* Practice engine: setup, question card, feedback, results, review. */
.startrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.setup .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.setup .qset{margin-bottom:16px}
.qcard{padding:24px}
.qhead{margin-bottom:14px}
.bar{height:8px;background:var(--chip);border-radius:99px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .25s}
.qtags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill.d1{background:hsl(150 60% 90%);color:hsl(150 60% 22%)}
.pill.d2{background:hsl(38 90% 90%);color:hsl(30 70% 26%)}
.pill.d3{background:hsl(355 90% 92%);color:hsl(355 70% 32%)}
:root[data-theme="dark"] .pill.d1{background:hsl(150 40% 20%);color:hsl(150 60% 80%)}
:root[data-theme="dark"] .pill.d2{background:hsl(38 40% 22%);color:hsl(38 90% 80%)}
:root[data-theme="dark"] .pill.d3{background:hsl(355 40% 24%);color:hsl(355 90% 82%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.d1{background:hsl(150 40% 20%);color:hsl(150 60% 80%)}:root:not([data-theme="light"]) .pill.d2{background:hsl(38 40% 22%);color:hsl(38 90% 80%)}:root:not([data-theme="light"]) .pill.d3{background:hsl(355 40% 24%);color:hsl(355 90% 82%)}}
.qtext{font-size:22px;margin:6px 0 18px;line-height:1.4}
.qtext code,.qopt code,.rev code,.modelans code,.fb code{font:600 .9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--chip);padding:1px 6px;border-radius:6px}
.qopts{display:grid;gap:10px}
.qopt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.qopt:hover{border-color:var(--brand)}
.qopt input{position:absolute;opacity:0;pointer-events:none}
.qopt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--surface))}
.qopt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.ltr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--chip);display:inline-grid;place-items:center;font:700 13px var(--font-head)}
.qopt.right{border-color:hsl(150 55% 38%);background:color-mix(in srgb,hsl(150 55% 45%) 14%,var(--surface))}
.qopt.wrong{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.qopt.right .ltr{background:hsl(150 55% 38%);color:#fff}
.qopt.wrong .ltr{background:var(--accent);color:#fff}
.fb{margin-top:16px;padding:14px 16px;border-radius:12px;border:1px solid var(--line)}
.fb.ok{border-color:hsl(150 55% 38%);background:color-mix(in srgb,hsl(150 55% 45%) 10%,var(--surface))}
.fb.bad{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.qact{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:18px}
textarea{width:100%;font:inherit;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);resize:vertical}
.modelans{margin:16px 0;padding:14px 16px;border-radius:12px;border:1px solid var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
.modelans h3{margin:0 0 6px;font-size:16px}
.score{display:flex;align-items:baseline;gap:12px;margin:10px 0}
.score b{font:700 48px/1 var(--font-head)}
.score span{color:var(--muted)}
.score.strong b{color:hsl(150 55% 32%)}
.score.good b{color:var(--brand)}
.score.low b{color:var(--accent)}
:root[data-theme="dark"] .score.strong b{color:hsl(150 60% 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .score.strong b{color:hsl(150 60% 70%)}}
.tbars{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:8px}
.tbars li{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 54px;gap:10px;align-items:center;font-size:14px}
.tb{height:10px;background:var(--chip);border-radius:99px;overflow:hidden}
.tb i{display:block;height:100%;border-radius:99px}
.tb i.hi{background:hsl(150 55% 40%)}
.tb i.mid{background:hsl(38 90% 50%)}
.tb i.lo{background:var(--accent)}
.tv{text-align:right;font-variant-numeric:tabular-nums}
.resact{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cta-inline{display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:18px 0}
.cta-inline h3{margin:0 0 4px}.cta-inline p{margin:0;color:var(--muted)}
.rev{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 14px;margin-bottom:10px}
.rev summary{cursor:pointer;font-weight:600}
.rev .mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;margin-right:6px;color:#fff}
.rev.ok .mark{background:hsl(150 55% 38%)}.rev.bad .mark{background:var(--accent)}
.revopts{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.revopts li{padding:6px 10px;border-radius:8px;border:1px solid transparent}
.revopts li.right{border-color:hsl(150 55% 38%);background:color-mix(in srgb,hsl(150 55% 45%) 10%,var(--surface))}
.revopts li.wrong{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.points li.got{color:hsl(150 55% 28%)}.points li.miss{color:var(--muted)}
:root[data-theme="dark"] .points li.got{color:hsl(150 60% 72%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .points li.got{color:hsl(150 60% 72%)}}
@media (max-width:640px){.setup .two{grid-template-columns:1fr}.qtext{font-size:19px}.qcard{padding:16px}.tbars li{grid-template-columns:1fr 54px}.tbars .tb{grid-column:1/-1;grid-row:2}.score b{font-size:40px}}
.points{list-style:none;padding-left:0}.points li{margin:4px 0}