/* css/auth.css */
.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px); /* Adjust for container margin */
}

.login-form,
.register-form {
    width: 100%;
    max-width: 450px; /* Slightly wider forms */
    padding: 40px; /* More padding */
    border-radius: 20px; /* More rounded */
    background: var(--glass-bg-base);
    border: 1px solid var(--glass-border-base);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-shadow);
    text-align: center;
}

.login-form h2,
.register-form h2 {
    color: var(--primary-color);
    margin-bottom: 30px; /* More space */
    font-size: 2em;
    font-weight: 600;
}

.login-form .input-group,
.register-form .input-group {
    margin-bottom: 25px; /* More space between inputs */
}

.login-form .button.primary,
.register-form .button.primary {
    width: 100%; /* Full width button */
    margin-top: 20px;
    padding: 15px; /* Taller button */
    font-size: 1.1em;
}

.signup-link,
.login-link {
    margin-top: 25px; /* More space */
    font-size: 1em;
}

.signup-link a,
.login-link a {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-speed);
}

.signup-link a:hover,
.login-link a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

@media (max-width: 480px) {
    .login-form,
    .register-form {
        padding: 30px 20px;
    }
}