.login-page {
    min-height: calc(100vh - 84px);
    background: var(--background);
}

.login-layout {
    min-height: calc(100vh - 84px);
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr);
}

.login-visual {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border-radius: 0 120px 0 0;
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(31, 16, 22, .72));
}

.login-visual > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
}

.login-visual-overlay {
    position: absolute;
    z-index: 2;
    left: clamp(32px, 6vw, 90px);
    right: 60px;
    bottom: 55px;
    max-width: 510px;
    color: var(--white);
}

.login-visual-overlay span {
    color: var(--accent);
    font-size: 24px;
}

.login-visual-overlay p {
    margin: 10px 0 0;
    font: 36px/1.08 var(--serif);
}

.login-content {
    display: grid;
    place-items: center;
    padding: 64px clamp(32px, 7vw, 110px);
}

.login-layout:has(#login-video) .login-content {
    align-items: start;
    padding-block: clamp(48px, 8vh, 92px);
}

.login-card {
    width: min(100%, 460px);
}

.login-kicker {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.login-card h1 {
    margin: 0;
    font: 54px/1 var(--serif);
}

.login-intro {
    margin: 17px 0 34px;
    color: var(--muted);
    line-height: 1.65;
}

.form-alert {
    margin-bottom: 22px;
    padding: 13px 15px;
    border-left: 4px solid var(--primary-dark);
    border-radius: 8px;
    color: #711f34;
    background: #f7e7eb;
    font-size: 14px;
}

.login-form {
    display: grid;
    gap: 22px;
}

.form-group {
    display: grid;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 700;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.future-link {
    color: var(--primary-dark);
    font-size: 13px;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 54px;
    padding: 0 17px;
    border: 1px solid #d9ced1;
    border-radius: 14px;
    outline: none;
    color: var(--dark);
    background: var(--white);
    font: 15px var(--sans);
    transition: border-color .2s, box-shadow .2s;
}

.form-group select { appearance: auto; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover { color: var(--primary-dark); background: #f8f1f2; }
.password-toggle svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.password-toggle.is-visible svg { color: var(--primary); }
.password-toggle .eye-slash { display: block; }
.password-toggle.is-visible .eye-slash { display: none; }
.google-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #d9ced1; border-radius: 14px; color: var(--dark); background: white; cursor: pointer; font-weight: 700; }
.google-button:hover { border-color: var(--primary); background: #fdfafa; }
.google-button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: white; background: #4285f4; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 19px 0; color: var(--muted); font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e5dadd; }

.form-group input:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(167, 85, 101, .13);
}

.login-submit {
    width: 100%;
    border: 0;
    cursor: pointer;
    font: 700 15px var(--sans);
}

.signup-prompt {
    margin: 26px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.signup-prompt span,
.signup-prompt a {
    color: var(--primary-dark);
    font-weight: 700;
}

.signup-prompt a:hover {
    text-decoration: underline;
}

.field-errors,
.errorlist {
    margin: 0;
    padding: 0;
    color: #8f3448;
    font-size: 13px;
    list-style: none;
}

.password-help {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.signup-content {
    align-items: start;
    padding-block: 28px;
}

.signup-content .login-intro {
    margin-bottom: 24px;
}

.signup-form {
    gap: 12px;
}

.signup-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.signup-row .form-group { min-width: 0; }
.signup-layout{align-items:start}
.signup-layout .login-visual{position:sticky;top:84px;height:calc(100vh - 84px);min-height:610px}
.signup-content .login-card{width:min(100%,620px)}
.signup-content .login-card h1{font-size:46px}
.signup-content .form-group{gap:6px}
.signup-content .form-group input,.signup-content .form-group select{height:50px}
.signup-content .auth-divider{margin:13px 0}
.signup-content .signup-prompt{margin-top:15px}
.signup-content .age-notice{margin-top:11px}
.signup-password-row+.password-help{margin-top:-7px}
.age-notice { margin: 15px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.age-notice a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.signup-birth-date { max-width: 100%; }
.signup-birth-date small { color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (max-width: 900px) {
    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-visual {
        min-height: 330px;
        border-radius: 0 0 70px 0;
    }
    .signup-layout .login-visual{position:relative;top:auto;width:100%;height:300px;min-height:300px}

    .login-visual-overlay {
        left: 32px;
        right: 32px;
        bottom: 32px;
    }

    .login-visual-overlay p {
        max-width: 520px;
        font-size: 30px;
    }

    .login-content {
        padding: 52px 24px 70px;
    }
}

@media (max-width: 600px) {
    .signup-row { grid-template-columns: 1fr; }
    .login-page,
    .login-layout {
        min-height: calc(100dvh - 70px - env(safe-area-inset-top));
    }

    .login-visual {
        min-height: 250px;
    }

    .login-visual-overlay p {
        font-size: 24px;
    }

    .login-card h1 {
        font-size: 44px;
    }
}
.social-error-page{min-height:calc(100vh - 84px);display:grid;place-items:center;padding:48px 20px;background:linear-gradient(135deg,#faf8f5 68%,#f2e5e6 68%)}
.social-error-card{width:min(100%,560px);padding:clamp(30px,5vw,52px);border:1px solid #e4d7da;border-radius:28px;text-align:center;background:#fff;box-shadow:0 24px 70px rgba(31,16,22,.1)}
.social-error-card h1{margin:4px 0 18px;font:clamp(42px,6vw,62px)/.98 var(--serif);color:var(--dark)}
.social-error-card>p:not(.auth-kicker){margin:0 auto 28px;max-width:460px;color:var(--muted);line-height:1.65}
.social-error-card .button{display:flex;justify-content:center;width:100%;margin-bottom:17px}
.social-error-home{color:var(--primary-dark);font-size:14px;font-weight:700}