* {
            font-family: 'Poppins', sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)), 
                        url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            overflow-x: hidden;
        }

        /* Floating tech particles */
        .tech-particle {
            position: fixed;
            width: 4px;
            height: 4px;
            background: rgba(59, 130, 246, 0.6);
            border-radius: 50%;
            animation: float-up 15s linear infinite;
            z-index: 0;
        }

        @keyframes float-up {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        /* Glass effect */
        .glass {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .glass-dark {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        /* Input styling */
        .glass-input {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(59, 130, 246, 0.3);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .glass-input:focus {
            background: rgba(30, 41, 59, 0.9);
            border-color: rgba(59, 130, 246, 0.7);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        }

        /* Button styling */
        .glass-btn {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
            border: 1px solid rgba(59, 130, 246, 0.4);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .glass-btn:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.3));
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
        }

        .glass-btn-primary {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            border: none;
        }

        .glass-btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8, #3b82f6);
        }

        .glass-btn-admin {
            background: linear-gradient(135deg, #8b5cf6, #6d28d9);
            border: none;
        }

        .glass-btn-admin:hover {
            background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        }

        .glass-btn-danger {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            border: none;
        }

        .glass-btn-success {
            background: linear-gradient(135deg, #10b981, #059669);
            border: none;
        }

        /* Option buttons */
        .option-btn {
            background: rgba(30, 41, 59, 0.6);
            border: 2px solid rgba(59, 130, 246, 0.3);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .option-btn:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.6);
            transform: scale(1.02);
        }

        .option-btn.selected {
            background: rgba(59, 130, 246, 0.4);
            border-color: #3b82f6;
        }

        .option-btn.correct {
            background: rgba(16, 185, 129, 0.5);
            border-color: #10b981;
            animation: pulse-green 0.5s ease;
        }

        .option-btn.wrong {
            background: rgba(239, 68, 68, 0.5);
            border-color: #ef4444;
            animation: shake 0.5s ease;
        }

        @keyframes pulse-green {
            0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
            50% { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }

        /* Progress bar */
        .progress-bar {
            background: rgba(59, 130, 246, 0.2);
            overflow: hidden;
        }

        .progress-fill {
            background: linear-gradient(90deg, #3b82f6, #10b981);
            transition: width 0.5s ease;
        }

        /* Result icon animation */
        .result-icon {
            animation: pop-in 0.5s ease;
        }

        @keyframes pop-in {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Screen transitions */
        .screen {
            transition: all 0.5s ease;
        }

        .screen.hidden {
            display: none;
            opacity: 0;
            transform: scale(0.95);
        }

        /* Confetti animation */
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            animation: confetti-fall 3s linear forwards;
        }

        @keyframes confetti-fall {
            0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(30, 41, 59, 0.5);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(59, 130, 246, 0.5);
            border-radius: 10px;
        }

        .question-item {
            transition: all 0.3s ease;
        }

        .question-item:hover {
            background: rgba(59, 130, 246, 0.2);
        }

        /* DB Status indicator */
        .db-status {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 100;
        }

        .db-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        .db-connected {
            background: #10b981;
            box-shadow: 0 0 10px #10b981;
        }

        .db-disconnected {
            background: #ef4444;
            box-shadow: 0 0 10px #ef4444;
        }

        /* Course Card Styles */
        .course-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .course-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .course-card.selected {
            border-color: #10b981;
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
        }

        /* Course colors - Original */
        .course-adca { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
        .course-dca { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
        .course-dfa { background: linear-gradient(135deg, #10b981, #059669); }
        .course-dtp { background: linear-gradient(135deg, #f59e0b, #d97706); }
        .course-ccc { background: linear-gradient(135deg, #ef4444, #dc2626); }
        .course-olevel { background: linear-gradient(135deg, #06b6d4, #0891b2); }
        .course-mdit { background: linear-gradient(135deg, #ec4899, #db2777); }
        .course-python { background: linear-gradient(135deg, #84cc16, #65a30d); }

        /* Course colors - New Courses */
        .course-c { background: linear-gradient(135deg, #6366f1, #4f46e5); }
        .course-cpp { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
        .course-java { background: linear-gradient(135deg, #f97316, #ea580c); }
        .course-webdesign { background: linear-gradient(135deg, #14b8a6, #0d9488); }
        .course-tally { background: linear-gradient(135deg, #a855f7, #9333ea); }
        .course-msoffice { background: linear-gradient(135deg, #f43f5e, #e11d48); }
        .course-videoediting { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
        .course-photoshop { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }

        /* Course badge */
        .course-badge {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* Modal animation */
        .modal-overlay {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-overlay > div {
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(20px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Answer review styling */
        .answer-correct {
            background: rgba(16, 185, 129, 0.2);
            border-left: 4px solid #10b981;
        }

        .answer-wrong {
            background: rgba(239, 68, 68, 0.2);
            border-left: 4px solid #ef4444;
        }

        .answer-skipped {
            background: rgba(107, 114, 128, 0.2);
            border-left: 4px solid #6b7280;
        }

        /* Print styles for export */
        @media print {
            body {
                background: white !important;
            }
            .glass, .glass-dark {
                background: white !important;
                border: 1px solid #e5e7eb !important;
            }
            .text-white {
                color: black !important;
            }
        }