:root {
            --primary: #2563eb;
            --secondary: #1e293b;
            --success: #10b981;
            --error: #ef4444;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #f8fafc; 
            color: #1e293b;
            scroll-behavior: smooth;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        .card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05); }

        .answer-option { 
            transition: all 0.2s ease; 
            cursor: pointer; 
            border: 2px solid #f1f5f9;
            background: white;
        }
        .answer-option:hover { border-color: var(--primary); background-color: #eff6ff; }
        .answer-option.selected { border-color: var(--primary); background-color: #dbeafe; ring: 4px solid #dbeafe; }
        .answer-option.correct { border-color: var(--success); background-color: #ecfdf5; }
        .answer-option.incorrect { border-color: var(--error); background-color: #fef2f2; }

        .progress-bar-fill { transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

        @keyframes levelUp {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .animate-level-up { animation: levelUp 0.5s ease-out forwards; }

        @media print {
            .no-print { display: none !important; }
            body { background: white; padding: 0; }
            .print-only { display: block !important; }
            .card { border: 1px solid #e2e8f0 !important; box-shadow: none !important; }
        }