:root{--indigo: #4F46E5;--indigo-deep: #3730A3;--indigo-soft: #EEF0FF;--emerald: #10B981;--emerald-deep:#047857;--emerald-soft:#D1FAE5;--amber: #F59E0B;--amber-deep: #B45309;--amber-soft: #FEF3C7;--coral: #F43F5E;--coral-deep: #BE123C;--coral-soft: #FFE4E6;--ink: #1A1523;--ink-2: #4A4458;--ink-3: #8B8699;--line: #E7E5EC;--paper: #F7F7FB;--white: #ffffff;--shadow-sm: 0 1px 3px rgba(26,21,35,.06);--shadow-md: 0 4px 16px rgba(79,70,229,.1);--shadow-lg: 0 12px 32px rgba(26,21,35,.12);--radius: 14px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:inherit}input,select{font-family:inherit}.btn-primary{width:100%;padding:14px;font-size:15px;font-weight:600;background:var(--indigo);color:#fff;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .2s,background .15s;box-shadow:0 2px 8px #4f46e540}.btn-primary:hover{background:var(--indigo-deep);box-shadow:0 4px 14px #4f46e559}.btn-primary:active{transform:scale(.97)}.btn-primary:disabled{background:#c7c5d0;box-shadow:none;cursor:default}.btn-ghost{width:100%;padding:12px;font-size:13px;background:transparent;color:var(--ink-2);border:1px solid var(--line);border-radius:11px;margin-top:8px;transition:background .15s,border-color .15s}.btn-ghost:hover{background:var(--paper);border-color:var(--ink-3)}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}.eyebrow{font-size:11px;font-weight:700;color:var(--indigo);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}.page-title{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}.page-sub{font-size:13px;color:var(--ink-2);line-height:1.65;margin-bottom:1.25rem}.prog-bg{height:8px;background:var(--indigo-soft);border-radius:99px;overflow:hidden}.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--indigo),var(--emerald));transition:width .6s cubic-bezier(.4,0,.2,1)}.xp-pill{display:inline-flex;align-items:center;gap:5px;background:var(--amber-soft);border:1px solid #FCD34D;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:700;color:var(--amber-deep)}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.back-btn{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-2);border:none;background:none;padding:0}.back-btn:hover{color:var(--ink)}.highlight{background:var(--indigo-soft);border-left:3px solid var(--indigo);border-radius:0 8px 8px 0;padding:11px 14px;margin:10px 0;font-size:13px;color:#2a2440;line-height:1.65}.inp{width:100%;padding:12px 14px;font-size:16px;border:1.5px solid var(--line);border-radius:11px;transition:border-color .15s,box-shadow .15s;background:var(--white)}.inp:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}@keyframes correctPulse{0%{transform:scale(1)}40%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes correctGlow{0%{box-shadow:0 0 #10b98180}to{box-shadow:0 0 0 16px #10b98100}}.answer-correct{background:var(--emerald-soft)!important;border-color:var(--emerald)!important;color:var(--emerald-deep)!important;animation:correctPulse .4s ease,correctGlow .6s ease}@keyframes errorShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.answer-wrong{background:var(--coral-soft)!important;border-color:var(--coral)!important;color:var(--coral-deep)!important;animation:errorShake .4s ease}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;top:-20px;animation:confettiFall linear forwards}@keyframes confettiFall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}.screen-flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9998;animation:flashFade .5s ease forwards}.screen-flash.correct{background:radial-gradient(circle,rgba(16,185,129,.18),transparent 70%)}.screen-flash.wrong{background:radial-gradient(circle,rgba(244,63,94,.15),transparent 70%)}@keyframes flashFade{0%{opacity:1}to{opacity:0}}@keyframes xpFloat{0%{opacity:0;transform:translateY(0) scale(.8)}20%{opacity:1;transform:translateY(-8px) scale(1.1)}to{opacity:0;transform:translateY(-40px) scale(1)}}.xp-float{position:absolute;font-weight:800;color:var(--amber-deep);font-size:18px;pointer-events:none;animation:xpFloat 1.2s ease forwards;z-index:50}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeUp .3s ease both}.typing-dots{display:flex;gap:4px;padding:4px 0}.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--indigo);animation:bounce .9s infinite}.typing-dots span:nth-child(2){animation-delay:.15s}.typing-dots span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}@media (min-width: 900px){.app-root{max-width:720px!important;padding:0 24px!important}.desktop-wide{max-width:760px;margin-left:auto;margin-right:auto}.desktop-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.desktop-grid>.card{margin-bottom:0}}@media (min-width: 1200px){.app-root{max-width:800px!important}}.report-fab{right:max(16px,calc(50% - 270px))}@media (min-width: 900px){.report-fab{right:max(16px,calc(50% - 360px))}}@media (min-width: 1200px){.report-fab{right:max(16px,calc(50% - 400px))}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}