.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .9rem; border-radius: .7rem; font-weight: 600; font-size: .9rem; min-height: 2.5rem; transition: background-color .15s, transform .1s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { min-height: 2rem; padding: .25rem .7rem; font-size: .8rem; }
.btn-lg { min-height: 3rem; padding: .6rem 1.4rem; font-size: 1.05rem; border-radius: .85rem; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #4338ca; }
.btn-success { background: #059669; color: #fff; }
.btn-success:hover:not(:disabled) { background: #047857; }
.btn-secondary { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #f1f5f9; }
.btn-ghost { color: #475569; }
.btn-ghost:hover:not(:disabled) { background: #e2e8f0; }
.icon-btn { width: 2.5rem; padding: 0; }
.btn:focus-visible, .field:focus-visible, .mode-btn:focus-visible, .topic:focus-within, .option:focus-within, .palette-item:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.field { width: 100%; padding: .65rem .8rem; border: 1px solid #cbd5e1; border-radius: .7rem; background: #fff; }
.field:focus { border-color: #6366f1; }

.section-title { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; margin-bottom: .75rem; }
.step { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 999px; background: #4f46e5; color: #fff; font-size: .8rem; }

.mode-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: 1rem; background: #fff; border: 2px solid #e2e8f0; border-radius: 1rem; transition: border-color .15s, background-color .15s; }
.mode-btn:hover { border-color: #a5b4fc; }
.mode-btn[aria-checked="true"] { border-color: #4f46e5; background: #eef2ff; }

.topic { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: #fff; border: 2px solid #e2e8f0; border-radius: .9rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.topic:hover { border-color: #c7d2fe; }
.topic.selected { border-color: #4f46e5; background: #eef2ff; }
.topic input { width: 1.2rem; height: 1.2rem; accent-color: #4f46e5; flex-shrink: 0; }

.q-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; scroll-margin-top: 5rem; transition: border-color .15s; }
.q-card.flagged { border-color: #fbbf24; }
.q-card.answered { border-color: #c7d2fe; }
.option { display: flex; align-items: flex-start; gap: .75rem; margin-top: .6rem; padding: .75rem; border: 2px solid #e2e8f0; border-radius: .8rem; cursor: pointer; transition: background-color .15s, border-color .15s; }
.option:hover { background: #f8fafc; }
.option:has(input:checked) { border-color: #6366f1; background: #eef2ff; }
.option.correct { border-color: #10b981 !important; background: #ecfdf5 !important; }
.option.wrong { border-color: #ef4444 !important; background: #fef2f2 !important; }
.option input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; accent-color: #4f46e5; flex-shrink: 0; }
.locked .option { cursor: default; }

.palette-item { display: flex; align-items: center; justify-content: center; height: 2.6rem; border: 2px solid #cbd5e1; border-radius: .6rem; font-weight: 700; background: #fff; }
.palette-item.answered { background: #e0e7ff; border-color: #a5b4fc; }
.palette-item.flagged { background: #fef3c7; border-color: #fbbf24; }
.legend { display: inline-block; width: .9rem; height: .9rem; border-width: 2px; border-radius: .25rem; margin-right: .5rem; vertical-align: -2px; }

.toast { pointer-events: auto; color: #fff; padding: .7rem 1.1rem; border-radius: .8rem; box-shadow: 0 10px 25px rgb(0 0 0 / .2); font-weight: 600; font-size: .9rem; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }
.ring-score { --p: 0; width: 9rem; height: 9rem; border-radius: 999px; display: grid; place-items: center; margin: 0 auto; background: conic-gradient(var(--c, #4f46e5) calc(var(--p) * 1%), #e2e8f0 0); }
.ring-score > div { width: 7.4rem; height: 7.4rem; border-radius: 999px; background: #fff; display: grid; place-items: center; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }