/* Styles pour la page de connexion */
body { font-family: 'Inter', sans-serif; }

.rasengan-bg {
    background: radial-gradient(circle at 50% 50%,
        rgba(99, 102, 241, 0.1) 0%,
        rgba(147, 51, 234, 0.1) 50%,
        rgba(249, 115, 22, 0.1) 100%);
}

.dark .rasengan-bg {
    background: radial-gradient(circle at 50% 50%,
        rgba(17, 24, 39, 0.9) 0%,
        rgba(31, 41, 55, 0.8) 50%,
        rgba(55, 65, 81, 0.7) 100%);
}

.login-card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .login-card {
    background: rgba(31, 41, 55, 0.95);
    border: 1px solid rgba(75, 85, 99, 0.3);
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, #60a5fa, #f97316, #f97316);
    filter: blur(1px);
    animation: float 6s ease-in-out infinite;
}

.floating-orb:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    animation-delay: -2s;
}

.floating-orb:nth-child(2) {
    width: 120px;
    height: 120px;
    top: 70%;
    right: 20%;
    animation-delay: -4s;
}

.floating-orb:nth-child(3) {
    width: 60px;
    height: 60px;
    top: 20%;
    right: 15%;
    animation-delay: -1s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(120deg); }
    66% { transform: translateY(10px) rotate(240deg); }
}

.input-field:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Style pour le bouton toggle du mode sombre */
.dark-mode-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(249, 115, 22, 0.3) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.dark .dark-mode-btn {
    background: rgba(31, 41, 55, 0.9) !important;
    border: 2px solid rgba(249, 115, 22, 0.5) !important;
}

.dark-mode-btn:hover {
    background: rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.6) !important;
    transform: scale(1.05) !important;
}

.dark .dark-mode-btn:hover {
    background: rgba(55, 65, 81, 0.9) !important;
}