/* ============================================================
   FRIENDLY / AUTH — login, magic link, register.
   ============================================================ */

.auth-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: var(--bg);
    background-image:
        radial-gradient(800px 500px at 15% 20%, rgba(124, 58, 237, .18) 0%, transparent 55%),
        radial-gradient(700px 500px at 85% 80%, rgba(236, 72, 153, .18) 0%, transparent 55%);
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

/* Floating decorative blobs */
.auth-body::before,
.auth-body::after {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    filter: blur(80px); opacity: .4;
    animation: float-blob 14s ease-in-out infinite;
    pointer-events: none;
}
.auth-body::before { background: var(--accent);  top: -100px; left: -100px; }
.auth-body::after  { background: var(--accent2); bottom: -100px; right: -100px; animation-delay: -7s; }
@keyframes float-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.15); }
}

.auth-container {
    width: 100%; max-width: 460px;
    position: relative; z-index: 1;
}

.auth-logo {
    text-align: center; margin-bottom: 32px;
}
.auth-logo h1 {
    font-size: 32px; font-weight: 800;
    letter-spacing: -.03em;
    background: var(--gradient-primary);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: 0 20px 60px rgba(124, 58, 237, .18);
    animation: card-enter var(--bounce);
}
@keyframes card-enter {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
}

.auth-title {
    font-size: 24px; font-weight: 800;
    text-align: center; margin-bottom: 10px;
    letter-spacing: -.02em;
}
.auth-subtitle {
    font-size: 14px; color: var(--text2);
    text-align: center; margin-bottom: 28px;
    line-height: 1.5;
}

/* OAuth buttons */
.auth-oauth { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.auth-oauth-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: inherit;
    font-size: 14px; font-weight: 700;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}
a.auth-oauth-btn { text-decoration: none; }
.auth-oauth-btn:hover {
    border-color: var(--accent);
    background: var(--surface2);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.auth-oauth-btn img { width: 22px; height: 22px; }

.auth-divider {
    display: flex; align-items: center; gap: 14px;
    color: var(--text3); font-size: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    margin: 22px 0;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .input { padding: 14px 16px; font-size: 15px; }
.auth-form .btn-primary { width: 100%; padding: 14px; font-size: 15px; }

.auth-footer { text-align: center; margin-top: 24px; }
.auth-footer a {
    font-size: 13px; font-weight: 600;
    color: var(--text3);
}
.auth-footer a:hover { color: var(--accent); }

.auth-link {
    display: block; text-align: center; margin-top: 18px;
    font-size: 14px; font-weight: 600; color: var(--text2);
}

/* Magic link screen */
.auth-magic { text-align: center; padding: 20px 0; }
.auth-magic-icon {
    font-size: 56px; margin-bottom: 18px;
    animation: bounce-in var(--bounce);
}
@keyframes bounce-in {
    from { opacity: 0; transform: translateY(-20px); }
}
.auth-magic-email {
    font-weight: 800; color: var(--accent);
    word-break: break-all;
}

.auth-loader {
    width: 48px; height: 48px; margin: 24px auto;
    border: 4px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-right-color: var(--accent2);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}