@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";:root{--clr-bg:#0c0f1a;--clr-surface:#12182cbf;--clr-border:#ffffff14;--clr-border-hl:#ffffff2e;--clr-text-1:#f0f4ff;--clr-text-2:#8b9cc8;--clr-text-3:#4e5d86;--clr-accent:#5b8ef7;--clr-accent-dk:#3b6ef0;--clr-accent-glow:#5b8ef759;--clr-success:#34d399;--clr-success-bg:#34d3991f;--clr-error:#f87171;--clr-error-bg:#f871711f;--grad-title:linear-gradient(135deg, #93c5fd 0%, #c4b5fd 100%);--grad-btn:linear-gradient(135deg, #5b8ef7 0%, #7c6ef0 100%);--space-xs:.5rem;--space-sm:.75rem;--space-md:1.25rem;--space-lg:2rem;--space-xl:3rem;--font:"Inter", system-ui, -apple-system, sans-serif;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--clr-bg);color:var(--clr-text-1);min-height:100vh;padding:var(--space-lg) var(--space-md);background-image:linear-gradient(#5b8ef708 1px,#0000 1px),linear-gradient(90deg,#5b8ef708 1px,#0000 1px);background-size:40px 40px;justify-content:center;align-items:flex-start;display:flex;overflow-x:hidden}body:before,body:after{content:"";filter:blur(80px);pointer-events:none;z-index:0;border-radius:50%;animation:14s ease-in-out infinite alternate blobFloat;position:fixed}body:before{background:radial-gradient(circle,#5b8ef72e 0%,#0000 70%);width:500px;height:500px;top:-120px;left:-100px}body:after{background:radial-gradient(circle,#a855f724 0%,#0000 70%);width:400px;height:400px;animation-delay:-7s;bottom:-100px;right:-80px}@keyframes blobFloat{0%{transform:translate(0)scale(1)}50%{transform:translate(30px,20px)scale(1.08)}to{transform:translate(-20px,40px)scale(.95)}}#root{z-index:1;justify-content:center;width:100%;display:flex;position:relative}.app-container{gap:var(--space-md);flex-direction:column;width:100%;max-width:580px;display:flex}.glass-card{background:var(--clr-surface);-webkit-backdrop-filter:blur(24px)saturate(180%);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg);animation:cardIn .45s var(--ease-out) both;box-shadow:inset 0 0 0 1px #ffffff0a,0 32px 64px -16px #0009,0 0 80px -20px #5b8ef714}@keyframes cardIn{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}h1{letter-spacing:-.04em;background:var(--grad-title);-webkit-text-fill-color:transparent;text-align:center;margin-bottom:var(--space-xs);-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,5vw,2.8rem);font-weight:900}h2{letter-spacing:-.03em;margin-bottom:var(--space-xs);text-align:center;font-size:1.5rem;font-weight:800}.card-subtitle{color:var(--clr-text-2);text-align:center;margin-bottom:var(--space-lg);font-size:.95rem;line-height:1.6}.login-icon{text-align:center;margin-bottom:var(--space-md);font-size:3rem;animation:2s ease-in-out infinite iconBounce;display:block}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.input-wrap{margin-bottom:var(--space-sm);position:relative}input[type=password]{border-radius:var(--radius-md);border:1.5px solid var(--clr-border);width:100%;color:var(--clr-text-1);font-family:var(--font);background:#00000040;outline:none;min-height:52px;padding:1rem 1.25rem;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}input[type=password]::placeholder{color:var(--clr-text-3)}input[type=password]:focus{border-color:var(--clr-accent);box-shadow:0 0 0 4px var(--clr-accent-glow)}.btn-primary{border-radius:var(--radius-md);background:var(--grad-btn);color:#fff;width:100%;min-height:52px;font-family:var(--font);letter-spacing:.01em;cursor:pointer;transition:transform .18s var(--ease-spring), box-shadow .2s;border:none;outline:none;padding:.875rem 1.5rem;font-size:1.05rem;font-weight:700;position:relative;overflow:hidden}.btn-primary:before{content:"";opacity:0;background:#ffffff1f;transition:opacity .2s;position:absolute;inset:0}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -6px #5b8ef780}.btn-primary:hover:before{opacity:1}.btn-primary:active{box-shadow:none;transform:translateY(0)}.btn-primary:focus-visible{outline:2.5px solid var(--clr-accent);outline-offset:3px}.btn-secondary{border-radius:var(--radius-md);border:1.5px solid var(--clr-border-hl);width:100%;min-height:48px;color:var(--clr-text-2);font-family:var(--font);cursor:pointer;background:#ffffff0f;outline:none;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:background .18s,border-color .18s,color .18s,transform .15s}.btn-secondary:hover{border-color:var(--clr-border-hl);color:var(--clr-text-1);background:#ffffff1a;transform:translateY(-1px)}.btn-secondary:active{transform:translateY(0)}.btn-secondary:focus-visible{outline:2.5px solid var(--clr-accent);outline-offset:3px}.error-message{color:var(--clr-error);text-align:center;animation:shake .35s var(--ease-out);padding:.5rem 0;font-size:.88rem;font-weight:500}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.settings-list{gap:var(--space-sm);margin-bottom:var(--space-lg);flex-direction:column;display:flex}.settings-row{border-radius:var(--radius-md);border:1px solid var(--clr-border);background:#0003;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.settings-row .row-label{color:var(--clr-text-1);font-size:1rem;font-weight:600}.settings-row .row-desc{color:var(--clr-text-2);margin-top:2px;font-size:.8rem}select{color:var(--clr-text-1);border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);font-family:var(--font);cursor:pointer;background:#0006;outline:none;min-height:44px;padding:.6rem .9rem;font-size:.95rem;font-weight:600;transition:border-color .2s,box-shadow .2s}select:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px var(--clr-accent-glow)}.toggle{flex-shrink:0;width:56px;height:30px;display:inline-block;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-track{border:1.5px solid var(--clr-border);cursor:pointer;background:#ffffff1a;border-radius:30px;transition:background .3s;position:absolute;inset:0}.toggle-track:after{content:"";width:22px;height:22px;transition:transform .3s var(--ease-spring);background:#fff;border-radius:50%;position:absolute;top:2px;left:3px;box-shadow:0 2px 6px #00000059}.toggle input:checked+.toggle-track{background:var(--clr-accent);border-color:var(--clr-accent)}.toggle input:checked+.toggle-track:after{transform:translate(26px)}.toggle input:focus-visible+.toggle-track{outline:2.5px solid var(--clr-accent);outline-offset:3px}.quiz-topbar{margin-bottom:var(--space-md);grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;display:grid}.quiz-topbar .score-badge{color:var(--clr-accent);background:#5b8ef71f;border:1px solid #5b8ef740;border-radius:9999px;justify-self:start;align-items:center;gap:.4rem;padding:.4rem .9rem;font-size:.9rem;font-weight:700;display:inline-flex}.quiz-topbar .progress-info{color:var(--clr-text-2);text-align:center;font-size:.8rem;font-weight:600}.quiz-topbar .timer-badge{font-variant-numeric:tabular-nums;color:var(--clr-accent);background:#5b8ef71f;border:1px solid #5b8ef740;border-radius:9999px;justify-self:end;align-items:center;gap:.4rem;padding:.4rem .9rem;font-size:.9rem;font-weight:700;display:inline-flex}.timer-badge.urgent{color:var(--clr-error);background:var(--clr-error-bg);border-color:#f871714d;animation:.8s ease-in-out infinite timerPulse}@keyframes timerPulse{0%,to{opacity:1}50%{opacity:.6}}.progress-bar-wrap{height:4px;margin-bottom:var(--space-lg);background:#ffffff14;border-radius:4px;overflow:hidden}.progress-bar-fill{background:var(--grad-btn);height:100%;transition:width .4s var(--ease-out);border-radius:4px}.word-display-wrap{text-align:center;margin-bottom:var(--space-lg)}.word-label{letter-spacing:.15em;text-transform:uppercase;color:var(--clr-text-3);margin-bottom:.75rem;font-size:.7rem;font-weight:700}.word-display{letter-spacing:-.03em;color:var(--clr-text-1);text-shadow:0 2px 20px #5b8ef733;animation:wordIn .3s var(--ease-spring) both;word-break:break-word;font-size:clamp(2.2rem,7vw,3.2rem);font-weight:900;line-height:1.1}@keyframes wordIn{0%{opacity:0;transform:scale(.92)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}.word-prompt{color:var(--clr-text-2);margin-top:.5rem;font-size:.85rem}.options-grid{margin-bottom:var(--space-md);grid-template-columns:1fr 1fr;gap:.75rem;display:grid}@media (width<=420px){.options-grid{grid-template-columns:1fr}}.option-btn{border-radius:var(--radius-md);border:1.5px solid var(--clr-border);min-height:64px;color:var(--clr-text-1);font-family:var(--font);cursor:pointer;text-align:center;transition:background .18s, border-color .18s, transform .18s var(--ease-spring), box-shadow .18s;background:#ffffff0a;outline:none;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem 1.1rem;font-size:1rem;font-weight:600;line-height:1.3;display:flex;position:relative;overflow:hidden}.option-btn:before{content:"";opacity:0;background:#ffffff12;transition:opacity .15s;position:absolute;inset:0}.option-btn:hover:not(:disabled){background:#5b8ef71a;border-color:#5b8ef780;transform:translateY(-2px)scale(1.01);box-shadow:0 8px 24px -8px #5b8ef74d}.option-btn:hover:not(:disabled):before{opacity:1}.option-btn:active:not(:disabled){transform:translateY(0)scale(.99)}.option-btn:focus-visible{outline:2.5px solid var(--clr-accent);outline-offset:2px}.option-btn:disabled{cursor:default}.option-btn.correct{color:var(--clr-success);animation:correctPop .35s var(--ease-spring);background:var(--clr-success-bg)!important;border-color:var(--clr-success)!important}.option-btn.incorrect{color:var(--clr-error);animation:incorrectShake .35s var(--ease-out);background:var(--clr-error-bg)!important;border-color:var(--clr-error)!important}@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.option-icon{flex-shrink:0;font-size:1.1rem}.result-score-ring{width:130px;height:130px;margin:var(--space-md) auto var(--space-lg);background:conic-gradient(var(--clr-accent) var(--pct,0%), #ffffff0f 0%);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:0 0 0 8px #5b8ef714,0 0 40px #5b8ef726}.result-score-ring:before{content:"";background:var(--clr-bg);border-radius:50%;width:106px;height:106px;position:absolute}.result-score-text{z-index:1;text-align:center;position:relative}.result-score-pct{letter-spacing:-.04em;color:var(--clr-text-1);font-size:2rem;font-weight:900}.result-score-label{color:var(--clr-text-2);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:600}.result-stats{margin-bottom:var(--space-lg);grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.stat-box{border:1px solid var(--clr-border);border-radius:var(--radius-md);text-align:center;background:#0003;padding:1rem}.stat-value{color:var(--clr-accent);letter-spacing:-.03em;font-size:1.6rem;font-weight:900}.stat-key{color:var(--clr-text-2);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;font-size:.78rem;font-weight:600}.result-message{color:var(--clr-text-2);text-align:center;margin-bottom:var(--space-lg);font-size:1.05rem}.divider{border:none;border-top:1px solid var(--clr-border);margin:var(--space-md) 0}@media (width<=480px){.glass-card{border-radius:var(--radius-md);padding:1.75rem 1.25rem}body{align-items:flex-start;padding:1rem .75rem}}@media (width>=600px){body{align-items:center;min-height:100vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.1ms!important;animation-duration:.01ms!important}}