body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f1f5f9' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.section-active {
    animation: fadeIn 0.4s ease-out forwards;
}
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
.feedback-pop {
    animation: popIn 0.3s ease-out forwards;
}
.nav-link {
    @apply px-3 py-2 sm:px-4 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-900 transition-all duration-300;
}
.nav-link.active {
    @apply text-slate-900 font-semibold;
}
.feedback-correct {
    @apply text-green-600 font-bold;
}
.feedback-incorrect {
    @apply text-red-600 font-bold;
}
.card {
    @apply bg-white rounded-2xl shadow-lg p-6 md:p-8;
}
.btn-primary {
    @apply w-full sm:w-auto bg-gradient-to-r from-teal-500 to-orange-400 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105;
}
.btn-secondary {
    @apply w-full sm:w-auto bg-white text-blue-700 font-semibold py-3 px-6 rounded-lg shadow-md border-2 border-blue-600 hover:bg-blue-50 transition-all duration-300 transform hover:scale-105;
}
.btn-danger {
    @apply w-full sm:w-auto bg-white text-red-700 font-semibold py-2 px-5 rounded-lg shadow-sm border-2 border-red-500 hover:bg-red-50 transition-all duration-300 transform hover:scale-105;
}
.input-field {
    @apply border-2 border-slate-300 rounded-lg p-3 text-center text-2xl font-mono w-full max-w-xs focus:border-blue-600 focus:ring-0 transition-all duration-300;
}
.history-list {
    @apply list-none p-0 max-h-60 overflow-y-auto space-y-3 pr-2;
}
.history-list li {
    @apply bg-slate-50 p-3 rounded-lg shadow-sm border border-slate-200 flex justify-between items-center text-slate-700 hover:shadow-md hover:border-slate-300 transition-all duration-200 cursor-default;
}