body {
            font-family: 'Inter', sans-serif;
        }
        .option-btn {
            transition: background-color 0.3s, transform 0.2s;
        }
        .option-btn:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .correct {
            background-color: #22c55e !important; /* green-500 */
            color: white !important;
            border-color: #16a34a !important; /* green-600 */
        }
        .incorrect {
            background-color: #ef4444 !important; /* red-500 */
            color: white !important;
            border-color: #dc2626 !important; /* red-600 */
        }
        .card-enter {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-content {
            animation: modal-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        @keyframes modal-in {
            from { opacity: 0; transform: scale(0.9) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .selector-btn {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            border: 2px solid #cbd5e1; /* slate-300 */
            font-weight: 600;
            transition: all 0.2s;
        }
        .selector-btn:hover {
            border-color: #3b82f6; /* blue-500 */
            color: #3b82f6;
        }
        .selector-btn.active {
            background-color: #3b82f6; /* blue-600 */
            color: white;
            border-color: #2563eb; /* blue-700 */
        }