:root{--text: #111827;--bg: #ffffff;--card: #f3f4f6;--border: #d1d5db;--accent: #2563eb;--track: #e5e7eb}:root.dark{--text: #e5e7eb;--bg: #0b1220;--card: #111827;--border: #334155;--accent: #3b82f6;--track: #1f2937}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text)}.app{font-family:system-ui,sans-serif}.qcard{padding:12px;border:1px solid var(--border);border-radius:8px;margin:16px 0;background:var(--card)}.choices{display:grid;gap:8px}.choices button{text-align:left;padding:10px 12px;border-radius:8px;border:1px solid var(--accent);background:transparent;color:var(--text);cursor:pointer}.choices button.selected{background:#3b82f626}.choices button.correct{background:#22c55e2e;border-color:#22c55e}.choices button.incorrect{background:#ef44442e;border-color:#ef4444}.choices button:focus{outline:none}.progress{margin:12px 0 18px}.progress .track{height:6px;background:var(--track);border-radius:4px;overflow:hidden}.progress .fill{height:100%;background:var(--accent);border-radius:4px;transition:width .3s ease}.feedback{margin-top:20px;padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card)}.feedback.ok{border-color:#22c55e}.feedback.bad{border-color:#ef4444}.nav{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}.navbtn{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}.navbtn:disabled{opacity:.5;cursor:not-allowed}.attempt{padding:14px 16px;border-radius:8px;border:1px solid var(--border);background:color-mix(in oklab,var(--card) 85%,white 15%);margin-bottom:14px;transition:background .2s ease,transform .1s ease;color:var(--text)}.attempt:nth-child(2n){background:color-mix(in oklab,var(--card) 80%,var(--accent) 12%)}.attempt:hover{transform:translateY(-2px)}.attempt-score{font-weight:700}.attempt-score.good{color:#22c55e}.attempt-score.bad{color:#ef4444}.attempt-score.mid{color:#3b82f6}.attempt small,.attempt div{color:color-mix(in oklab,var(--text) 80%,white 20%)}.attempt.clickable{cursor:pointer;transition:background .2s ease,transform .1s ease}.attempt.clickable:hover{background:color-mix(in oklab,var(--card) 80%,var(--accent) 15%);transform:translateY(-2px)}
