:root { --bg:#071126; --card:rgba(14,27,56,.64); --text:#f7f8ff; --muted:#aeb9d4; --blue:#58b7ff; --purple:#a270ff; --border:rgba(177,198,255,.17); --shadow:0 22px 60px rgba(0,0,0,.26); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--text); background:radial-gradient(circle at 50% -10%,#20356e 0%,transparent 35%),var(--bg); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.background-orb { position:fixed; z-index:-1; border-radius:50%; filter:blur(12px); opacity:.48; pointer-events:none; }
.orb-one { width:26rem; height:26rem; background:#6531cb; top:21%; left:-13rem; }
.orb-two { width:24rem; height:24rem; background:#036bda; top:-7rem; right:-9rem; }
.app-shell { width:min(100%,1120px); min-height:100vh; margin:auto; padding:25px 28px 56px; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--text); display:flex; gap:9px; align-items:center; font:600 1.15rem "Space Grotesk",sans-serif; text-decoration:none; letter-spacing:-.04em; }.brand span span{color:#91a0c4}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--blue),var(--purple));box-shadow:0 0 25px #8160ff88}.status-pill{padding:8px 12px;border:1px solid var(--border);border-radius:99px;color:var(--muted);font-size:.78rem}.status-pill span{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#6df2bd;box-shadow:0 0 9px #6df2bd}
.hero { max-width:860px; margin:clamp(70px,13vh,135px) auto 0; text-align:center; animation:rise .7s ease both; }.eyebrow{margin:0 0 15px;color:#bfa7ff;font-size:.73rem;font-weight:700;letter-spacing:.15em}.hero h1,h2{font-family:"Space Grotesk",sans-serif;letter-spacing:-.06em}.hero h1{max-width:760px;margin:0 auto;font-size:clamp(3rem,7vw,5.75rem);line-height:.98}.hero h1 span{background:linear-gradient(100deg,#b89aff,#62c6ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{margin:22px auto 34px;color:var(--muted);font-size:clamp(1rem,2vw,1.18rem)}
.glass-card{border:1px solid var(--border);background:linear-gradient(125deg,rgba(29,43,78,.76),rgba(10,20,46,.62));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:24px}.topic-card{text-align:left;padding:25px}.topic-card label{display:block;margin-bottom:10px;font-weight:600}.input-row{display:flex;gap:11px}.input-row input{width:100%;min-width:0;padding:16px 17px;border:1px solid rgba(168,191,255,.18);border-radius:14px;outline:0;color:var(--text);background:rgba(4,12,31,.55);transition:.2s}.input-row input::placeholder{color:#8490ad}.input-row input:focus{border-color:#7f9cff;box-shadow:0 0 0 4px #7f9cff1c}.primary-button,.secondary-button{border:0;border-radius:13px;padding:14px 18px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}.primary-button{color:#fff;background:linear-gradient(110deg,#7b50ed,#318ae9);box-shadow:0 9px 24px #654bdd57;white-space:nowrap}.primary-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 13px 30px #654bdd75}.primary-button:disabled{cursor:not-allowed;opacity:.62}.button-icon{margin-left:8px;font-size:1.2em}.input-hint,.message{margin:13px 1px 0;color:var(--muted);font-size:.82rem}.message{min-height:1.15em;color:#ff9ba8;font-weight:600}.feature-row{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 32px;margin-top:27px;color:#bdc7df;font-size:.84rem}.feature-row span{color:#9f83ff;margin-right:5px}
.quiz-section,.result-section{max-width:760px;margin:70px auto 0}.quiz-card{padding:clamp(23px,5vw,42px);animation:rise .5s ease}.quiz-meta{display:flex;align-items:center;justify-content:space-between;gap:15px}.quiz-meta p:last-child{margin:0;color:var(--muted);font-size:.88rem}.progress-track{height:6px;margin:22px 0 32px;overflow:hidden;border-radius:99px;background:#ffffff12}.progress-track div{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--blue));transition:width .35s ease}.quiz-card h2{margin:0 0 26px;font-size:clamp(1.5rem,4vw,2.15rem);line-height:1.16}.options{display:grid;gap:12px}.option-button{display:flex;align-items:center;gap:13px;width:100%;padding:15px;border:1px solid var(--border);border-radius:14px;text-align:left;color:var(--text);background:#07142d70;transition:.2s}.option-button:hover:not(:disabled){border-color:#8d8aff;transform:translateX(3px);background:#25336175}.option-letter{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:9px;color:#b5c0dc;background:#ffffff12;font-weight:700;font-size:.8rem}.option-button.selected{border-color:#a888ff;background:#7550de35}.option-button.correct{border-color:#67eab2;background:#28b77a2e}.option-button.incorrect{border-color:#ff8293;background:#db466130}.option-button:disabled{cursor:default}.explanation{margin:20px 0 0;padding:14px 16px;border-left:3px solid var(--blue);border-radius:0 10px 10px 0;color:#c7d8f7;background:#55aef814;font-size:.92rem;line-height:1.5}.quiz-navigation{display:flex;justify-content:space-between;gap:12px;margin-top:30px}.secondary-button{color:#d9e1f8;border:1px solid var(--border);background:#ffffff0a}.secondary-button:hover:not(:disabled){background:#ffffff17}.secondary-button:disabled{cursor:not-allowed;opacity:.4}
.result-section{text-align:center}.result-card{padding:42px 28px;animation:rise .5s ease}.result-icon{display:grid;place-items:center;width:55px;height:55px;margin:0 auto 18px;border-radius:16px;background:linear-gradient(135deg,#b172ff,#49bdff);font-size:1.4rem;box-shadow:0 0 32px #835fe580}.result-card h2{margin:0;font-size:2.2rem}.score-main{margin:8px 0 20px;color:var(--muted)}.score-ring{display:flex;flex-direction:column;justify-content:center;width:138px;height:138px;margin:0 auto 25px;border:8px solid #7a74fa;border-radius:50%;box-shadow:inset 0 0 24px #765bdc33,0 0 34px #765bdc30}.score-ring span{font:700 2rem "Space Grotesk",sans-serif}.score-ring small{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.result-stats{display:flex;justify-content:center;gap:1px;margin:0 auto 27px;max-width:300px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#030b1d40}.result-stats div{flex:1;padding:12px}.result-stats div+div{border-left:1px solid var(--border)}.result-stats strong,.result-stats span{display:block}.result-stats strong{font-size:1.2rem}.result-stats span{margin-top:2px;color:var(--muted);font-size:.77rem}
.loading-overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:#03091891;backdrop-filter:blur(7px)}.loading-card{width:min(100%,350px);padding:34px;text-align:center}.loading-card p{margin:15px 0 5px;font-size:1.08rem;font-weight:700}.loading-card span{color:var(--muted);font-size:.83rem}.spinner{width:43px;height:43px;margin:auto;border:4px solid #a38aff31;border-top-color:#8f9dff;border-radius:50%;animation:spin .8s linear infinite}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.app-shell{padding:20px 16px 40px}.status-pill{display:none}.hero{margin-top:70px}.topic-card{padding:18px}.input-row{flex-direction:column}.input-row .primary-button{width:100%}.feature-row{align-items:flex-start;flex-direction:column;margin:24px 8px 0;text-align:left}.quiz-section,.result-section{margin-top:44px}.quiz-navigation .primary-button,.quiz-navigation .secondary-button{padding:13px 14px}.quiz-card{border-radius:19px}}