@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-color:#0b0f19;--bg-gradient:radial-gradient(circle at top right, #38bdf814, transparent 40%), radial-gradient(circle at bottom left, #818cf814, transparent 40%);--card-bg:#1e293b99;--card-border:#ffffff14;--card-hover:#ffffff0d;--accent-primary:#38bdf8;--accent-primary-glow:#38bdf84d;--accent-secondary:#818cf8;--accent-success-bg:#10b98126;--accent-success-text:#34d399;--accent-success-border:#10b981;--accent-danger-bg:#ef444426;--accent-danger-text:#f87171;--accent-danger-border:#ef4444;--text-main:#f8fafc;--text-muted:#94a3b8;--font-family:"Outfit", system-ui, -apple-system, sans-serif;--toggler-bg:#1e293bcc;--toggler-border:#ffffff1a;--toggler-icon:#f8fafc}[data-theme=light]{--bg-color:#f8fafc;--bg-gradient:radial-gradient(circle at top right, #0284c70d, transparent 40%), radial-gradient(circle at bottom left, #4f46e50d, transparent 40%);--card-bg:#ffffffb3;--card-border:#0000000f;--card-hover:#00000008;--accent-primary:#0ea5e9;--accent-primary-glow:#0ea5e94d;--accent-secondary:#6366f1;--accent-success-bg:#10b9811a;--accent-success-text:#059669;--accent-success-border:#10b981;--accent-danger-bg:#ef44441a;--accent-danger-text:#dc2626;--accent-danger-border:#ef4444;--text-main:#0f172a;--text-muted:#64748b;--toggler-bg:#fffc;--toggler-border:#0000001a;--toggler-icon:#0f172a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-main);background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;transition:background-color .4s,color .4s;display:flex;overflow-x:hidden}.glass-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--card-border);border-radius:24px;padding:3rem;transition:background-color .4s,border-color .4s,box-shadow .4s;box-shadow:0 25px 50px -12px #00000040}[data-theme=light] .glass-panel{box-shadow:0 25px 50px -12px #00000014}h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700}.text-gradient{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;position:relative}.text-gradient:after{content:"IT Quiz";z-index:-1;-webkit-text-fill-color:transparent;color:#0000;text-shadow:0 4px 20px var(--accent-primary-glow);background:0 0;position:absolute;top:0;left:0}.text-main{color:var(--text-main)}.text-muted{color:var(--text-muted)}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .25s cubic-bezier(.4,0,.2,1)}.btn-primary{background:var(--text-main);color:var(--bg-color);border-radius:12px;padding:14px 28px;font-size:1.05rem;font-weight:600;box-shadow:0 4px 14px #0000001a}.btn-primary:hover{opacity:.95;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.btn-primary:active{transform:translateY(0)}.btn-outline{color:var(--text-main);border:1px solid var(--card-border);background:0 0;border-radius:12px;padding:12px 24px;font-weight:500}.btn-outline:hover{background:var(--card-hover)}.btn-outline.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;box-shadow:0 4px 14px var(--accent-primary-glow);font-weight:600}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.5s cubic-bezier(.16,1,.3,1) forwards fadeInUp}@keyframes popIn{0%{opacity:0;transform:scale(.95)}50%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.pop-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards popIn}.app-container{justify-content:center;align-items:center;width:100vw;min-height:100vh;padding:24px;display:flex}.main-card{flex-direction:column;width:100%;max-width:760px;min-height:520px;display:flex}.app-header{text-align:center;margin-bottom:3rem}.app-title{margin-bottom:.5rem;font-size:3.2rem;font-weight:800}.app-subtitle{color:var(--text-muted);font-size:1.15rem}.screen-container{flex-direction:column;flex:1;display:flex}.setting-group{margin-bottom:2.5rem}.setting-group h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.2rem;font-size:1.1rem;font-weight:600}.options-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.2rem;display:grid}.option-card{border:1px solid var(--card-border);color:var(--text-muted);background:#ffffff08;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.option-card:hover{background:#ffffff14;border-color:#ffffff26;transform:translateY(-3px)}.option-card.active{background:var(--accent-primary-glow);border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 8px 25px #38bdf833}[data-theme=light] .option-card.active{background:#0ea5e91a;box-shadow:0 8px 25px #0ea5e933}.option-icon{font-size:1.6rem}.option-label{font-size:1.1rem;font-weight:700}.start-btn-container{text-align:center;margin-top:auto;padding-top:3rem}.btn-start{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 10px 30px var(--accent-primary-glow);border:none;border-radius:100px;width:100%;max-width:360px;padding:18px 48px;font-size:1.25rem;font-weight:800;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-start:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 15px 40px #38bdf866}.quiz-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.quiz-progress{color:var(--accent-primary);font-size:1.1rem;font-weight:700}.quiz-score{color:var(--text-muted);background:var(--card-hover);border-radius:20px;padding:6px 14px;font-size:.95rem;font-weight:600}.progress-bar-bg{background:var(--card-border);border-radius:3px;width:100%;height:6px;margin-bottom:3rem;overflow:hidden}.progress-bar-fill{background:var(--accent-primary);border-radius:3px;height:100%;transition:width .3s}.question-text{color:var(--text-main);margin-bottom:2.5rem;font-size:1.6rem;font-weight:600;line-height:1.5}.answers-grid{flex-direction:column;gap:1rem;display:flex}.answer-btn{border:2px solid var(--card-border);color:var(--text-main);text-align:left;background:#80808008;border-radius:14px;padding:16px 20px;font-size:1.1rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.answer-btn:hover:not(:disabled){background:var(--card-hover);border-color:#80808033;transform:translate(6px)}.answer-btn.active{border-color:var(--accent-primary);box-shadow:0 4px 15px var(--accent-primary-glow);background:#38bdf80d}.answer-btn.correct{background:var(--accent-success-bg);border-color:var(--accent-success-border);color:var(--accent-success-text);box-shadow:0 4px 15px #10b98133}.answer-btn.wrong{background:var(--accent-danger-bg);border-color:var(--accent-danger-border);color:var(--accent-danger-text)}.answer-btn:disabled{cursor:default}.explanation-box{border-left:4px solid var(--accent-primary);color:var(--text-main);background:#38bdf814;border-radius:0 12px 12px 0;margin-top:2rem;padding:1.5rem;font-size:1.05rem;line-height:1.6}.explanation-title{color:var(--accent-primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:1.05rem;font-weight:700}.next-btn-container{justify-content:flex-end;margin-top:2.5rem;display:flex}.result-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:3rem 0;display:flex}.result-title{margin-bottom:3rem;font-size:2.5rem;font-weight:800}.score-circle{border:6px solid var(--accent-primary);width:200px;height:200px;box-shadow:0 0 40px var(--accent-primary-glow);background:0 0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;margin-bottom:2.5rem;display:flex}.score-number{color:var(--text-main);font-size:4rem;font-weight:800;line-height:1}.score-total{color:var(--text-muted);margin-top:.5rem;font-size:1.2rem}.result-message{color:var(--text-main);max-width:80%;margin-bottom:3.5rem;font-size:1.3rem;font-weight:500;line-height:1.5}.theme-toggler{background:var(--toggler-bg);border:1px solid var(--toggler-border);-webkit-backdrop-filter:blur(8px);z-index:50;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.3rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:2rem;right:2rem;box-shadow:0 4px 12px #0000001a}.theme-toggler:hover{transform:scale(1.1);box-shadow:0 6px 16px #00000026}.toggler-icon{transition:transform .5s cubic-bezier(.4,0,.2,1)}.toggler-icon.dark{transform:rotate(-360deg)}.toggler-icon.light{transform:rotate(0)}.progress-root{background:var(--card-border);border-radius:9999px;width:100%;height:8px;margin-bottom:3rem;position:relative;overflow:hidden}.progress-indicator{background:var(--accent-primary);width:100%;height:100%;box-shadow:0 0 10px var(--accent-primary-glow);transition:transform .6s cubic-bezier(.65,0,.35,1)}.flip-btn-container{perspective:1000px;cursor:pointer;width:100%;height:56px}.flip-btn-container.disabled{cursor:default}.flip-btn-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flip-btn-inner.flipped{transform:rotateX(180deg)}.flip-btn-front,.flip-btn-back{backface-visibility:hidden;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.1rem;font-weight:600;display:flex;position:absolute}.flip-btn-front{background:var(--text-main);color:var(--bg-color);box-shadow:0 4px 14px #0000001a}.flip-btn-back{background:var(--accent-danger-bg);color:var(--accent-danger-text);border:1px solid var(--accent-danger-border);transform:rotateX(180deg)}