.vf-auth { --vf-auth-ink: #142d29; --vf-auth-muted: #536760; --vf-auth-accent: #17A2B8; --vf-auth-accent-text: #17A2B8; --vf-auth-cta: #138294; box-sizing: border-box; color: var(--vf-auth-ink); background: #f2f6f3; padding: clamp(28px, 5vw, 72px) 20px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.vf-auth *, .vf-auth *::before, .vf-auth *::after { box-sizing: border-box; }
.vf-auth__card { width: 100%; max-width: 520px; margin: 0 auto; padding: 40px; background: #fff; border: 1px solid #dce5df; border-radius: 20px; box-shadow: 0 12px 40px rgb(20 45 41 / 5%); }
.vf-auth__card--signup { max-width: 600px; }
.vf-auth__intro { margin-bottom: 28px; }
.vf-auth__eyebrow { color: var(--vf-auth-accent-text); font-weight: 750; font-size: .75rem; letter-spacing: .15em; margin: 0 0 16px; }
.vf-auth h1 { font-size: clamp(1.65rem, 4vw, 2rem); font-weight: 750; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 12px; overflow-wrap: anywhere; }
.vf-auth__lead { color: var(--vf-auth-muted); line-height: 1.7; margin: 0; }
.vf-auth__form .mb-3 { margin-bottom: 20px !important; }
.vf-auth__form label { display: inline-block; font-size: .9rem; font-weight: 600; margin-bottom: 7px; line-height: 1.5; }
.vf-auth__form input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]) { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid #a7b9b1; border-radius: 8px; background: #fff; color: var(--vf-auth-ink); font: inherit; }
.vf-auth__form input[type="radio"], .vf-auth__form input[type="checkbox"] { accent-color: var(--vf-auth-accent); flex: 0 0 auto; }
.vf-auth__form input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--vf-auth-accent); }
.vf-auth__form .form-check-input:checked { background-color: var(--vf-auth-accent); border-color: var(--vf-auth-accent); }
.vf-auth .form-text { color: var(--vf-auth-muted); font-size: .8rem; line-height: 1.6; margin-top: 6px; overflow-wrap: anywhere; }
.vf-auth .form-text ul { padding-left: 20px; margin-bottom: 0; }
.vf-auth .invalid-feedback, .vf-auth .errorlist { color: #a12424; font-size: .875rem; line-height: 1.5; }
.vf-auth .is-invalid { border-color: #a12424 !important; }
.vf-auth .alert { padding: 12px; margin-bottom: 20px; border: 1px solid #e4aaaa; border-radius: 8px; background: #fff3f3; color: #852424; }
.vf-auth a { color: var(--vf-auth-accent-text); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; overflow-wrap: anywhere; }
.vf-auth a:hover { color: #084c57; }
.vf-auth a.text-info { color: var(--vf-auth-accent-text) !important; }
.vf-auth a.text-info:hover { color: #084c57 !important; }
.vf-auth :is(a, button, input):focus-visible { outline: 3px solid var(--vf-auth-accent-text); outline-offset: 3px; box-shadow: none; }
.vf-auth__recovery { text-align: right; font-size: .875rem; margin: 8px 0 24px; }
.vf-auth__submit { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: var(--vf-auth-cta); color: #FFFFFF; font: inherit; font-weight: 700; padding: 12px 16px; cursor: pointer; }
.vf-auth__submit:hover { background: #117a8b; }
.vf-auth__submit:active { background: #0f6674; box-shadow: inset 0 0 0 2px var(--vf-auth-accent-text); }
.vf-auth__switch { border-top: 1px solid #e4ebe6; margin: 28px 0 0; padding-top: 24px; text-align: center; font-size: .9rem; line-height: 1.8; }
.vf-auth__notice { padding: 14px 16px; background: #edf5f0; border-radius: 8px; font-size: .875rem; line-height: 1.7; margin: 0 0 24px; }
.vf-auth__consent { min-width: 0; border: 0; padding: 0; margin: 24px 0 0; }
.vf-auth__consent legend { float: none; width: auto; padding: 0; margin: 0 0 12px; font-size: .9rem; font-weight: 700; }
.vf-auth__choice { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.vf-auth__choice input { margin-top: 5px; }
.vf-auth__choice label { font-weight: 400; margin: 0; }
.vf-auth__gate-note { font-size: .8rem; color: var(--vf-auth-muted); margin-top: 12px; }
.vf-auth__ready { margin-top: 24px; }
.vf-auth__social[hidden] { display: none !important; }
@media (max-width: 575px) {
  .vf-auth { padding: 24px 14px 36px; }
  .vf-auth__card { padding: 26px 20px; border-radius: 14px; }
  .vf-auth__intro { margin-bottom: 24px; }
}