:root{--primary-blue:#2563eb;--primary-blue-light:#3b82f6;--primary-blue-dark:#1d4ed8;--primary-purple:#7c3aed;--primary-purple-light:#8b5cf6;--level-1-green:#10b981;--level-1-green-light:#34d399;--level-1-green-bg:#ecfdf5;--level-1-green-border:#a7f3d0;--level-2-yellow:#f59e0b;--level-2-yellow-light:#fbbf24;--level-2-yellow-bg:#fffbeb;--level-2-yellow-border:#fde68a;--level-3-red:#ef4444;--level-3-red-light:#f87171;--level-3-red-bg:#fef2f2;--level-3-red-border:#fecaca;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--success-green:#10b981;--success-bg:#ecfdf5;--success-border:#a7f3d0;--error-red:#ef4444;--error-bg:#fef2f2;--error-border:#fecaca;--warning-yellow:#f59e0b;--warning-bg:#fffbeb;--warning-border:#fde68a;--info-blue:#3b82f6;--info-bg:#eff6ff;--info-border:#bfdbfe;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--duration-fast:150ms;--duration-normal:300ms;--duration-slow:500ms;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080}.test-question-page{min-height:100vh;background:linear-gradient(135deg,var(--gray-50) 0,var(--gray-100) 100%);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.test-question-layout{display:grid;grid-template-columns:2fr;gap:var(--spacing-xl);max-width:1400px;margin:0 auto;padding:var(--spacing-2xl)}.question-section{background:#fff;border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.sidebar-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.container-sm{max-width:640px}.container-md{max-width:768px}.container-lg{max-width:1024px}.container-xl{max-width:1200px}.col-span-1{grid-column:span 1}.col-span-2,.col-span-full{grid-column:span 2}.m-xs{margin:var(--spacing-xs)}.m-sm{margin:var(--spacing-sm)}.m-md{margin:var(--spacing-md)}.m-lg{margin:var(--spacing-lg)}.m-xl{margin:var(--spacing-xl)}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.verse-avatar{transition:all var(--duration-normal) ease-in-out}.verse-avatar:hover{transform:scale(1.05)}.verse-avatar.emotion-neutral{filter:brightness(1)}.verse-avatar.emotion-encouraging{filter:brightness(1.1) saturate(1.2);animation:gentle-pulse 2s ease-in-out infinite}.verse-avatar.emotion-thinking{animation:thinking-wobble 1s ease-in-out infinite alternate}.verse-avatar.emotion-celebrating{animation:celebration-bounce .6s ease-in-out infinite alternate}.verse-speech-bubble{animation:bubble-appear var(--duration-normal) ease-out}.verse-speech-bubble:before{content:"";position:absolute;bottom:100%;right:2rem;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid;filter:drop-shadow(0 -2px 4px rgb(0 0 0/.1))}.answer-option{transition:all var(--duration-fast) ease-in-out;position:relative;overflow:hidden}.answer-option:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);transition:left var(--duration-slow) ease-in-out}.answer-option:hover:before{left:100%}.gem{transition:all var(--duration-normal) ease-in-out;position:relative}.gem[data-earned=true]{animation:gem-glow 2s ease-in-out infinite alternate}.gem:hover{transform:scale(1.1) rotate(5deg)}@keyframes gentle-pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes thinking-wobble{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}@keyframes celebration-bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}@keyframes bubble-appear{0%{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes gem-glow{0%{box-shadow:0 0 5px rgba(59,130,246,.3)}to{box-shadow:0 0 15px rgba(59,130,246,.6)}}@keyframes typing-cursor{0%,50%{opacity:1}51%,to{opacity:0}}.typing-cursor{animation:typing-cursor 1s infinite}@media (max-width:640px){.test-question-layout{grid-template-columns:1fr;gap:var(--spacing-md)}.question-section,.test-question-layout{padding:var(--spacing-md)}.verse-avatar{bottom:var(--spacing-md);right:var(--spacing-md)}.verse-speech-bubble{bottom:5rem;right:var(--spacing-md);max-width:calc(100vw - 2rem)}}@media (min-width:641px) and (max-width:768px){.test-question-layout{padding:var(--spacing-lg)}}@media (min-width:1024px){.test-question-layout{gap:var(--spacing-2xl)}}@media print{.verse-avatar,.verse-speech-bubble{display:none!important}.test-question-page{background:#fff!important}.question-section{box-shadow:none!important;border:1px solid var(--gray-300)!important}}.crystal-glow{position:relative;transition:all .4s ease-in-out;color:var(--gray-800);background:none}.crystal-glow:hover{background:linear-gradient(90deg,#3b82f6,#8b5cf6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 8px rgba(139,92,246,.4),0 0 16px rgba(59,130,246,.3),0 0 24px rgba(147,197,253,.2);transform:scale(1.02)}