html:not(.dark) body {
    background-image: radial-gradient(circle at top right, #f8f9fa, #e9ecef);
}

html.dark body {
    background-image: radial-gradient(circle at top right, #1a1a1a, #0a0a0a);
}

html.dark .login-container {
    backdrop-filter: blur(10px);
    background-color: rgba(30, 30, 30, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

html:not(.dark) .login-container {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* Chrome autofill fix for dark mode */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover, 
html.dark input:-webkit-autofill:focus, 
html.dark input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #121212 inset !important;
    -webkit-text-fill-color: white !important;
    border-color: #374151 !important;
}

/* Chrome autofill fix for light mode */
html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover, 
html:not(.dark) input:-webkit-autofill:focus, 
html:not(.dark) input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #f9fafb inset !important;
    -webkit-text-fill-color: #111827 !important;
    border-color: #d1d5db !important;
}