body {
    background: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 50%, #f0f9ff 100%);
    min-height: 100vh;
    color: #1e293b;
}

.dark body {
    background: linear-gradient(135deg, #082f49 0%, #0c4a6e 50%, #164e63 100%);
    color: #f8fafc;
}

/* Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark .glass-panel {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3D Effects */
.preserve-3d {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.card-3d {
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.card-3d:hover {
    transform: translateZ(20px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

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

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Brain Animation */
.brain-container {
    position: relative;
    perspective: 1000px;
}

.brain-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.3);
    transform-style: preserve-3d;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
}

/* Form Validation Feedback */
.input-error {
    border-color: #ef4444 !important;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}