/* Login Page Styles - BEM Methodology */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.login-card__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.login-card__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.login-card__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-card__footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid var(--border-color);
    text-align: center;
}

.login-card__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

.login-card__link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base);
}

.login-card__link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Animations */
@keyframes slideInFromBottom {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-card {
    animation: slideInFromBottom 0.5s ease-out;
}