/* Auth pages — login, signup, admin login, connections */
@import url("brand.d1a727f6935e.css");

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

/* Full-bleed gradient fallback */
.auth-backdrop {
    position: fixed;
    inset: 0;
    background: var(--gradient-hero-backdrop);
    z-index: 0;
}

/* Image backdrop — overrides gradient when a background is available */
.auth-backdrop--image {
    background-size: cover;
    background-position: center;
    animation: backdrop-fadein 0.8s ease-out;
}

/* Ken Burns: slow pan + zoom on the image layer */
.auth-backdrop--image .auth-backdrop__img {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    animation: backdrop-fadein 1s ease-out;
}

.auth-backdrop--animated .auth-backdrop__img {
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.auth-backdrop--kb-1 .auth-backdrop__img {
    animation: kb-zoom-pan-1 25s ease-in-out infinite alternate;
}
.auth-backdrop--kb-2 .auth-backdrop__img {
    animation: kb-zoom-pan-2 30s ease-in-out infinite alternate;
}
.auth-backdrop--kb-3 .auth-backdrop__img {
    animation: kb-zoom-pan-3 28s ease-in-out infinite alternate;
}
.auth-backdrop--kb-4 .auth-backdrop__img {
    animation: kb-zoom-pan-4 26s ease-in-out infinite alternate;
}

/* Variant 1: zoom in + drift right */
@keyframes kb-zoom-pan-1 {
    0%   { transform: scale(1)    translate(0, 0);      opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: scale(1.15) translate(-3%, -2%);   opacity: 1; }
}

/* Variant 2: zoom out + drift left */
@keyframes kb-zoom-pan-2 {
    0%   { transform: scale(1.15) translate(-2%, -1%);   opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: scale(1)    translate(2%, 1%);     opacity: 1; }
}

/* Variant 3: slow zoom in + drift up */
@keyframes kb-zoom-pan-3 {
    0%   { transform: scale(1)    translate(1%, 2%);     opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: scale(1.12) translate(-1%, -2%);   opacity: 1; }
}

/* Variant 4: zoom in + drift down-left */
@keyframes kb-zoom-pan-4 {
    0%   { transform: scale(1.08) translate(2%, -1%);    opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: scale(1)    translate(-2%, 2%);    opacity: 1; }
}

.auth-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}

@keyframes backdrop-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .auth-backdrop--animated .auth-backdrop__img {
        animation: backdrop-fadein 0.5s ease-out both !important;
    }
}

/* Attribution overlay */
.auth-attribution {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    max-width: 60%;
}

.auth-attribution__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-attribution__link {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    transition: color 0.15s;
}

.auth-attribution__link:hover {
    color: #fff;
}

/* Card */
.auth-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.2);
}

.auth-card--wide {
    max-width: 480px;
}

.auth-brand {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.auth-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* Provider buttons */
.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.15s;
    line-height: 1;
}

.auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-btn:active {
    transform: translateY(0);
}

/* Google */
.auth-btn--google {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
}

.auth-btn--google:hover {
    background: #f8f9fa;
}

.auth-btn__icon--google {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%2334A853' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23FBBC05' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Apple */
.auth-btn--apple {
    background: #000;
    color: #fff;
}

.auth-btn--apple:hover {
    background: #1a1a1a;
}

.auth-btn__icon--apple {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Facebook */
.auth-btn--facebook {
    background: #1877f2;
    color: #fff;
}

.auth-btn--facebook:hover {
    background: #166fe5;
}

.auth-btn__icon--facebook {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Primary action button */
.auth-btn--primary {
    background: var(--color-accent);
    color: var(--color-on-brand);
    width: 100%;
    justify-content: center;
}

.auth-btn--primary:hover {
    background: var(--color-accent-hover);
}

/* Danger button */
.auth-btn--danger {
    background: #dc2626;
    color: #fff;
    width: 100%;
    justify-content: center;
    margin-top: 0.75rem;
}

.auth-btn--danger:hover {
    background: #b91c1c;
}

/* Form elements */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}

.auth-input {
    padding: 0.7rem 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s;
    outline: none;
}

.auth-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.auth-input--readonly {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}

/* Alerts */
.auth-messages {
    margin-bottom: 1rem;
}

.auth-alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.auth-alert--error,
.auth-alert--danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.auth-alert--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.auth-alert--warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.auth-alert--info {
    background: #e8f4fa;
    color: #164a6b;
    border: 1px solid #b8d4e8;
}

/* Links */
.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.auth-link {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.auth-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Connections page */
.connections-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.connections-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.15s;
}

.connections-item:has(input:checked) {
    border-color: var(--color-accent);
    background: rgba(43, 120, 177, 0.08);
}

.connections-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.connections-provider {
    font-weight: 600;
    color: var(--color-text);
}

.connections-identity {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 1.5rem 0;
}

.auth-note {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    text-align: center;
}

.auth-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
    padding: 1.5rem 0;
}

/* Responsive */
@media (max-width: 480px) {
    .auth-card {
        margin: 1rem;
        padding: 2rem 1.5rem;
        border-radius: 0.75rem;
    }

    .auth-card--wide {
        max-width: 100%;
    }

    .auth-brand {
        font-size: 1.5rem;
    }

    .auth-attribution {
        bottom: 0.75rem;
        left: 0.75rem;
        font-size: 0.7rem;
        max-width: 80%;
    }
}