/* =====================================================
   MyLinks - Authentication Page Styles
   ===================================================== */

.auth-layout {
    display: flex;
    min-height: 100vh;
}

.auth-sidebar {
    width: 45%;
    background: var(--gray-900);
    color: var(--white);
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-sidebar-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 50% 50% at 20% 20%, rgba(var(--primary-rgb), 0.2), transparent),
        radial-gradient(ellipse 40% 40% at 80% 90%, rgba(var(--accent-rgb), 0.15), transparent);
    opacity: 0.5;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--white);
    position: relative;
}

.auth-logo img {
    height: 32px;
}

.auth-quote {
    position: relative;
    max-width: 400px;
}

.auth-quote-text {
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: var(--leading-snug);
    margin-bottom: var(--space-6);
}

.auth-quote-author {
    font-size: var(--text-base);
    font-weight: 500;
}

.auth-quote-title {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    background: var(--bg-primary);
}

.auth-form-container {
    width: 100%;
    max-width: 400px;
}

.auth-form-header h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.auth-form-header p {
    color: var(--text-secondary);
    margin-bottom: var(--space-10);
}

.auth-form-header p a {
    font-weight: 500;
}

@media (max-width: 1024px) {
    .auth-sidebar {
        display: none;
    }
    
    .auth-main {
        padding: var(--space-6);
    }
}