:root {
  --bg: #12081b;
  --bg-alt: #1d0f2b;
  --bg-soft: #28163a;
  --accent: #8045f5;
  --accent-glow: #a472ff;
  --accent-soft: #5d2fae;
  --text: #f5f2fa;
  --text-dim: #c6bbd8;
  --danger: #ff4d61;
  --success: #4ad791;
  --warn: #ffb347;
  --radius-sm: 6px;
  --radius: 14px;
  --shadow: 0 4px 10px -4px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04),0 0 0 4px rgba(128,69,245,0.06);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}

html, body { margin:0; padding:0; background: radial-gradient(circle at 30% 20%, #241031, #0d0514 60%); color: var(--text); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display:flex; }
.app-shell { flex:1; display:flex; align-items:stretch; justify-content:center; }
.screen { width:100%; max-width:640px; padding: clamp(1rem, 2.5vh, 1.75rem) clamp(1rem, 4vw, 2rem) 4rem; box-sizing:border-box; animation: fadeIn .4s ease; }
header { text-align:center; }
header.compact { display:flex; align-items:center; gap:.75rem; text-align:left; }

h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); margin:.25rem 0 .5rem; background:linear-gradient(90deg,var(--accent-glow),#e6d5ff); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.5px; }
.tagline { margin:0 0 1.5rem; font-size:.95rem; color:var(--text-dim); }

.stats-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); margin-bottom:1.5rem; }
.stat { background: linear-gradient(145deg,var(--bg-soft), var(--bg-alt)); padding: .9rem .95rem 1rem; border-radius: var(--radius); position:relative; overflow:hidden; box-shadow: var(--shadow); }
.stat h3 { margin:0 0 .4rem; font-size:.75rem; letter-spacing: .5px; text-transform:uppercase; color: var(--accent-glow); font-weight:600; }
.stat .value { font-size:1.55rem; font-weight:600; line-height:1.1; }
.stat small { display:block; color: var(--text-dim); margin-top:.35rem; font-size:.65rem; letter-spacing:.5px; }

.actions { display:flex; flex-direction:column; gap:.8rem; margin-top:1rem; }
.actions.dynamic { position:fixed; left:0; right:0; bottom:0; padding:1rem 1.25rem 1.5rem; background:linear-gradient(0deg, rgba(13,5,20,0.96), rgba(13,5,20,0.65) 55%, rgba(13,5,20,0)); backdrop-filter: blur(10px); }

button { font: inherit; cursor:pointer; border:none; border-radius: var(--radius-sm); padding:.9rem 1.1rem; background: var(--bg-soft); color: var(--text); font-weight:600; letter-spacing:.4px; position:relative; overflow:hidden; transition:.25s background, .25s transform; }
button.primary { background: linear-gradient(135deg,var(--accent-soft), var(--accent-glow)); color:#fff; }
button.primary:hover { filter:brightness(1.08); }
button.secondary { background: linear-gradient(135deg,#35204b,#20122f); }
button.secondary:hover { background:#322046; }
button.ghost { background:transparent; color: var(--text-dim); }
button.ghost:hover { color: var(--text); }
button.wide { width:100%; }
button:active { transform: translateY(2px); }
button:focus-visible { outline:2px solid var(--accent-glow); outline-offset:2px; }
.icon-btn { width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; background:var(--bg-soft); border-radius:50%; box-shadow: var(--shadow); }

.category-list { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 2rem; }
.category-chip { padding:.6rem .85rem .55rem; background:linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); border-radius: 1000px; font-size:.75rem; font-weight:500; letter-spacing:.5px; position:relative; cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:.4rem; }
.category-chip input { display:none; }
.category-chip.recommended { box-shadow:0 0 0 2px var(--accent-glow); }
.category-chip.selected { background: linear-gradient(145deg,var(--accent-soft),var(--accent-glow)); color:#fff; }
.category-chip .accuracy { font-size:.6rem; padding:.15rem .4rem; background:rgba(255,255,255,0.08); border-radius:100px; }

.quiz-screen { padding-bottom:9rem; }
.question-wrapper { margin-top:.75rem; }
.question-meta { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color: var(--text-dim); margin-bottom:.5rem; display:flex; gap:.75rem; flex-wrap:wrap; }
#question-text { font-size: clamp(1.15rem, 4.5vw, 1.4rem); line-height:1.35; font-weight:600; margin:0 0 1rem; }
.options { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.options li { margin:0; }
.option-btn { width:100%; text-align:left; padding: .95rem 1rem 1rem; background: linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); border-radius: var(--radius); position:relative; font-size:.95rem; line-height:1.3; font-weight:500; letter-spacing:.2px; box-shadow: var(--shadow); }
.option-btn span.index { width:1.7rem; height:1.7rem; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border-radius:50%; font-size:.75rem; font-weight:600; margin-right:.65rem; color: var(--accent-glow); }
.option-btn.correct { background: linear-gradient(145deg,var(--success), #1f5c40); color:#042015; box-shadow:0 0 0 1px rgba(74,215,145,0.3), 0 4px 14px -4px rgba(74,215,145,0.5); }
.option-btn.incorrect { background: linear-gradient(145deg,#5a0f23,#30040f); color:#ffdce1; box-shadow:0 0 0 1px rgba(255,77,97,0.4), 0 4px 14px -4px rgba(255,77,97,0.5); }
.option-btn.disabled { opacity:.55; pointer-events:none; }
.option-btn:not(.disabled):active { transform:scale(.985); }

.feedback { margin-top:1.1rem; padding:1rem 1rem 1.15rem; border-radius: var(--radius); font-size:.85rem; line-height:1.35; background: linear-gradient(145deg,var(--bg-soft),var(--bg-alt)); box-shadow: var(--shadow); animation: slideUp .35s ease; }
.feedback.correct { border-left:4px solid var(--success); }
.feedback.incorrect { border-left:4px solid var(--danger); }

.progress-bar { height:6px; flex:1; background:#2a1c3d; border-radius: 4px; overflow:hidden; position:relative; }
.progress-bar span { display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--accent-soft), var(--accent-glow)); transition: width .3s ease; }
.progress-wrapper { flex:1; display:flex; align-items:center; }

.footer-note { margin-top:2rem; font-size:.65rem; text-align:center; letter-spacing:.6px; color: var(--text-dim); }

.hidden { display:none !important; }

@media (min-height:740px) {
  .quiz-screen { padding-bottom:10rem; }
}

@keyframes fadeIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
@keyframes slideUp { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }