.vc-auth { margin: 0; background: var(--vc-page); color: var(--vc-text); font-family: var(--vc-font); -webkit-font-smoothing: antialiased; }
.vc-auth *, .vc-auth *::before, .vc-auth *::after { box-sizing: border-box; }
.vc-auth [hidden] { display: none !important; }
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; padding: 24px; gap: 24px; }
.auth-story { background: var(--vc-navy); border-radius: 24px 64px 24px 24px; color: #fff; padding: 40px 48px 28px; display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; }
.auth-story::before { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid #ffffff09; border-radius: 50%; top: 20%; left: 22%; pointer-events: none; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 750; letter-spacing: -.8px; line-height: 1.1; position: relative; }
.brand-light { font-weight: 400; }
.auth-brand small { display: block; font-size: 9px; font-weight: 500; letter-spacing: 2px; margin-top: 8px; color: #bac9dd; }
.auth-story-content { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 8px 0 32px; }
.auth-illustration { width: min(100%, 420px); height: auto; align-self: center; object-fit: contain; }
.auth-eyebrow { display: block; font-size: 10px; line-height: 1.6; font-weight: 700; letter-spacing: 1.8px; }
.auth-story .auth-eyebrow { color: var(--vc-accent); margin-bottom: 14px; }
.auth-story h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 550; line-height: 1.2; letter-spacing: -1px; margin: 0 0 18px; }
.auth-story-copy p { max-width: 380px; color: #b7c6da; font-size: 14px; line-height: 1.8; margin: 0; }
.auth-story-footer { display: flex; align-items: center; gap: 9px; padding-top: 20px; border-top: 1px solid #ffffff1c; color: #b7c6da; font-size: 11px; }
.auth-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vc-accent); flex-shrink: 0; }
.auth-access { display: flex; flex-direction: column; padding: 28px clamp(24px, 5vw, 80px) 12px; min-width: 0; }
.auth-access-label { font-size: 10px; font-weight: 600; letter-spacing: 1.8px; color: var(--vc-muted); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.auth-access-label .auth-dot { background: var(--vc-primary); }
.auth-form-container { width: 100%; max-width: 400px; margin: auto; padding: 60px 0; }
.auth-form-heading { margin-bottom: 32px; }
.auth-form-heading .auth-eyebrow { color: var(--vc-primary); margin-bottom: 16px; }
.auth-form-heading h1 { font-size: clamp(32px, 3.2vw, 44px); font-weight: 650; letter-spacing: -1.6px; line-height: 1.12; margin: 0 0 18px; }
.auth-form-heading p { color: var(--vc-muted); font-size: 14px; line-height: 1.7; margin: 0; }
.auth-field { margin-bottom: 20px; }
.vc-auth .form-label { font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.vc-auth .form-control { height: 52px; border: 1px solid var(--vc-border); border-radius: var(--vc-radius); padding: 12px 16px; background: var(--vc-surface); color: var(--vc-text); font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.vc-auth .form-control::placeholder { color: #78859a; opacity: 1; }
.vc-auth .form-control:hover { border-color: #aabbd1; }
.vc-auth .form-control:focus { border-color: var(--vc-primary); box-shadow: 0 0 0 3px #2563eb1f; outline: none; }
.vc-auth .form-control[aria-invalid="true"] { border-color: #b42336; }
.auth-password { position: relative; }
.auth-password .form-control { padding-right: 52px; }
.auth-password-toggle { position: absolute; top: 4px; right: 4px; height: 44px; width: 44px; display: grid; place-items: center; color: var(--vc-muted); background: transparent; border: 0; border-radius: 8px; }
.auth-password-toggle:hover { background: #edf2f8; color: var(--vc-primary); }
.password-slash { display: none; }
.auth-password-toggle[aria-pressed="true"] .password-slash { display: block; }
.auth-options { display: flex; justify-content: flex-end; margin: -4px 0 24px; }
.auth-text-button { border: 0; padding: 8px 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--vc-primary-hover); text-underline-offset: 4px; }
.auth-text-button:hover { text-decoration: underline; }
.vc-auth .auth-submit { --bs-btn-bg: var(--vc-primary); --bs-btn-border-color: var(--vc-primary); --bs-btn-hover-bg: var(--vc-primary-hover); --bs-btn-hover-border-color: var(--vc-primary-hover); --bs-btn-active-bg: var(--vc-primary-hover); --bs-btn-disabled-bg: var(--vc-primary); --bs-btn-disabled-border-color: var(--vc-primary); display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 13px 18px; border-radius: var(--vc-radius); font-size: 14px; font-weight: 600; box-shadow: 0 4px 10px #2563eb15; }
.auth-submit-arrow { margin-left: 4px; }
.auth-submit:disabled { cursor: wait; }
.auth-submit:disabled .auth-submit-arrow { display: none; }
.vc-auth button:focus-visible { outline: 3px solid var(--vc-primary); outline-offset: 4px; }
.auth-back { display: block; margin: 18px auto 0; min-height: 44px; }
.auth-back span { margin-right: 6px; }
.auth-form-note { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--vc-border); padding-top: 24px; margin-top: 30px; color: var(--vc-muted); font-size: 11px; }
.auth-message { font-size: 13px; line-height: 1.6; border-radius: var(--vc-radius); margin-bottom: 20px; overflow-wrap: anywhere; }
.auth-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 10px; color: var(--vc-muted); }
.auth-footer > span:first-child { font-weight: 700; color: var(--vc-text); }
.auth-footer strong { font-weight: 500; }
.auth-mobile-brand { display: none; }
@media (min-width: 1500px) {
    .auth-layout { max-width: 1600px; margin-inline: auto; }
    .auth-story { padding-inline: 64px; }
    .auth-illustration { width: min(100%, 480px); }
}
@media (min-width: 901px) and (max-height: 820px) {
    .auth-illustration { width: min(100%, 290px); }
    .auth-story-content { padding-bottom: 24px; }
    .auth-form-container { padding-block: 36px; }
}
@media (max-width: 1100px) {
    .auth-story { padding: 32px; }
    .auth-access { padding-inline: 24px; }
}
@media (max-width: 900px) {
    .auth-layout { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .auth-story, .auth-access-label { display: none; }
    .auth-access { padding: 32px 24px 24px; min-height: 100vh; min-height: 100svh; }
    .auth-mobile-brand { display: flex; width: 100%; max-width: 400px; margin-inline: auto; font-size: 25px; }
    .auth-mobile-brand small { color: var(--vc-muted); }
    .auth-form-container { padding-block: 48px; }
    .auth-form-heading h1 { font-size: 38px; }
    .vc-auth .form-control { font-size: 16px; }
    .auth-footer { width: 100%; max-width: 400px; margin-inline: auto; }
}
@media (max-width: 380px) {
    .auth-access { padding: 24px 20px 20px; }
    .auth-form-heading h1 { font-size: 34px; }
    .auth-footer { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .vc-auth *, .vc-auth *::before, .vc-auth *::after { animation: none !important; transition: none !important; }
}
