/* Reset default margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set the body to take full height and center content */
body {
    height: 100vh; /* Keep height: 100vh to prevent overall page scrolling if content fits */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0; /* Add vertical padding to the body to create space at top/bottom */
    /* Use the dark gradient from style.css for background */
    background: linear-gradient(135deg, #050505 0%, #0a0a0a 10%, #0f1419 25%, #1a2332 40%, #243447 60%, #1a2332 75%, #0f1419 90%, #000000 100%);
    color: white;
    font-family: 'Inter', sans-serif; /* Use Inter font as in style.css */
    position: relative; /* For background animations */
    overflow: auto; /* Allow scrolling ONLY if content plus padding overflows the viewport */
    /* Changed from 'hidden' to 'auto' to ensure content is always accessible if it unexpectedly grows */
}

/* Background animations (copied from style.css for consistency) */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.04), transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.03), transparent 60%),
        radial-gradient(circle at 40% 80%, rgba(245, 158, 11, 0.03), transparent 60%),
        radial-gradient(circle at 90% 60%, rgba(16, 185, 129, 0.02), transparent 60%),
        radial-gradient(ellipse at 60% 30%, rgba(99, 102, 241, 0.04), transparent 70%),
        radial-gradient(ellipse at 10% 80%, rgba(245, 158, 11, 0.02), transparent 70%);
    background-size: 150% 150%;
    animation: moveGlow 90s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.neural-network-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 40px 60px, rgba(16, 185, 129, 0.1), transparent),
        radial-gradient(2px 2px at 120px 120px, rgba(99, 102, 241, 0.08), transparent),
        radial-gradient(1px 1px at 200px 200px, rgba(245, 158, 11, 0.06), transparent);
    background-size: 240px 240px, 360px 360px, 480px 480px;
    animation: neural-pulse 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.starry-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 50px 70px, white, transparent),
        radial-gradient(1px 1px at 150px 100px, white, transparent),
        radial-gradient(0.5px 0.5px at 200px 250px, white, transparent),
        radial-gradient(1.5px 1.5px at 300px 50px, white, transparent),
        radial-gradient(1px 1px at 350px 300px, white, transparent),
        radial-gradient(0.5px 0.5px at 450px 150px, white, transparent),
        radial-gradient(1.2px 1.2px at 500px 20px, white, transparent),
        radial-gradient(1px 1px at 600px 200px, white, transparent),
        radial-gradient(0.8px 0.8px at 700px 120px, white, transparent),
        radial-gradient(1.1px 1.1px at 800px 350px, white, transparent),
        radial-gradient(0.9px 0.9px at 900px 80px, white, transparent),
        radial-gradient(1.3px 1.3px at 1000px 280px, white, transparent),
        radial-gradient(0.7px 0.7px at 1100px 190px, white, transparent),
        radial-gradient(1px 1px at 1200px 310px, white, transparent),
        radial-gradient(0.6px 0.6px at 1300px 60px, white, transparent),
        radial-gradient(1.4px 1.4px at 1400px 240px, white, transparent),
        radial-gradient(0.8px 0.8px at 100px 400px, white, transparent),
        radial-gradient(1.1px 1.1px at 750px 450px, white, transparent),
        radial-gradient(0.6px 0.6px at 150px 150px, white, transparent),
        radial-gradient(1.0px 1.0px at 950px 10px, white, transparent),
        radial-gradient(0.7px 0.7px at 250px 550px, white, transparent),
        radial-gradient(1.2px 1.2px at 1150px 600px, white, transparent),
        radial-gradient(0.9px 0.9px at 50px 250px, white, transparent),
        radial-gradient(1.3px 1.3px at 400px 700px, white, transparent),
        radial-gradient(0.5px 0.5px at 1350px 350px, white, transparent),
        radial-gradient(1.0px 1.0px at 650px 500px, white, transparent);
    background-size: 1500px 1500px;
    animation: twinkle 50s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    25% { opacity: 0.8; transform: scale(1.01); }
    50% { opacity: 0.6; transform: scale(0.99); }
    75% { opacity: 0.9; transform: scale(1.02); }
    100% { opacity: 0.7; transform: scale(1); }
}


@keyframes moveGlow {
    0% { background-position: 0% 0%; transform: rotate(0deg) scale(1); }
    25% { background-position: 100% 50%; transform: rotate(90deg) scale(1.02); }
    50% { background-position: 0% 100%; transform: rotate(180deg) scale(1); }
    75% { background-position: 50% 0%; transform: rotate(270deg) scale(1.02); }
    100% { background-position: 0% 0%; transform: rotate(360deg) scale(1); }
}

@keyframes neural-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}


/* Auth container - using animated-card style */
.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2rem; /* Adjusted padding */
    text-align: center;
    /* Use animated-card styles for the container */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem; /* More rounded corners */
    backdrop-filter: blur(8px); /* Blur effect */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Ensure it's above background elements */
    z-index: 10; /* Bring container to front */
    /* Removed min-height: auto; as it's default and not needed with the new body setup */
}

.auth-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); /* Enhanced hover shadow */
}

/* Logo styling */
.auth-logo {
    margin-bottom: 5px; /* Reduced margin to bring it even closer to the email field */
    /* Increased max-width to make it a bit bigger, maintain max-height for vertical control */
    max-width: 200px; /* Adjust as needed, back to previous or slightly less */
    max-height: 100px; /* Keep this to control overall height */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain aspect ratio */
    transition: filter 0.3s ease, transform 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5)) drop-shadow(0 0 4px rgba(99, 102, 241, 0.3));
}

.auth-logo:hover {
    filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8)) drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
    transform: scale(1.05); /* Slightly scale up on hover without reformatting */
}


/* Form styling */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px; /* Add some space below logo */
}

/* Form group styling */
.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Label styling */
.form-group label {
    font-size: 14px;
    margin-bottom: 8px; /* Slightly more space */
    color: rgba(255, 255, 255, 0.7); /* Slightly softer white */
    font-weight: 500; /* A bit bolder */
}

/* Input styling - using form-input style */
.form-group input {
    width: 100%;
    padding: 0.75rem; /* Match style.css form-input padding */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem; /* Match style.css form-input border-radius */
    color: white;
    font-size: 1rem; /* Match style.css font-size */
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Add box-shadow transition */
}

/* Input focus effect */
.form-group input:focus {
    border-color: #10b981; /* Primary glow color on focus */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); /* Glow effect on focus */
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.4); /* Match style.css placeholder color */
}

/* Auth button styling - using cta-primary style */
.auth-button {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Primary gradient */
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem; /* Match cta-primary padding */
    border: none;
    border-radius: 9999px; /* Fully rounded */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 10px; /* Add some space above the button */
}

/* Auth button hover effect */
.auth-button:hover {
    transform: translateY(-3px); /* Slightly more pronounced lift */
    box-shadow: 0 12px 25px rgba(16, 185, 129, 0.4); /* Enhanced hover shadow */
}

/* Error message styling */
.error-message {
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 12px;
    background-color: rgba(220, 53, 69, 0.15); /* Slightly darker background for error */
    border: 1px solid rgba(220, 53, 69, 0.4); /* Stronger border */
    border-radius: 8px; /* Slightly more rounded */
    color: #ff8b8b; /* Brighter red for visibility */
    font-size: 14px;
    text-align: center;
    animation: slideIn 0.3s ease-out;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.2); /* Subtle glow for error */
}

/* Error message animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Auth footer styling */
.auth-footer {
    margin-top: 25px; /* More space from button */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7); /* Softer white */
}

/* Auth footer link styling */
.auth-footer a {
    color: #6366f1; /* Secondary glow color for links */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.auth-footer a:hover {
    color: #8183f9; /* Lighter shade on hover */
    text-decoration: underline;
}

/* Loading screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1000; /* Ensure it's on top */
}

/* Show loading screen */
.loading-screen.active {
    visibility: visible;
    opacity: 1;
}

/* Spinner */
.spinner {
    width: 60px; /* Slightly larger spinner */
    height: 60px;
    border: 6px solid rgba(255, 255, 255, 0.2);
    border-top-color: #10b981; /* Primary glow color for spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}