:root {
  --auth-navy: #101b2d;
  --auth-navy-light: #18384b;
  --auth-ink: #172033;
  --auth-muted: #68758a;
  --auth-blue: #176b87;
  --auth-blue-bright: #2296b5;
  --auth-mint: #5fcbb3;
  --auth-border: #dfe7ec;
}

* { box-sizing: border-box; }
.veristay-auth-page { min-height: 100vh; margin: 0; color: var(--auth-ink); background: #eef3f5; font-family: "Inter", "Open Sans", sans-serif; }
.veristay-auth-shell { display: grid; min-height: 100vh; padding: 32px; place-items: center; }
.veristay-auth-panel { display: grid; width: min(1120px, 100%); min-height: 680px; grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr); border: 1px solid rgba(16, 27, 45, .08); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(16, 27, 45, .14); overflow: hidden; }

.veristay-auth-story { position: relative; display: flex; flex-direction: column; padding: 52px 58px 42px; color: #fff; background: linear-gradient(145deg, var(--auth-navy) 0%, #153247 62%, #176b78 100%); overflow: hidden; }
.veristay-auth-story:before, .veristay-auth-story:after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.veristay-auth-story:before { width: 420px; height: 420px; right: -225px; top: -185px; box-shadow: 0 0 0 54px rgba(255,255,255,.025), 0 0 0 108px rgba(255,255,255,.018); }
.veristay-auth-story:after { width: 230px; height: 230px; left: -140px; bottom: -120px; }
.veristay-auth-story > * { position: relative; z-index: 1; }
.veristay-auth-brand img { display: block; width: 190px; height: auto; }
.veristay-auth-story-copy { margin: auto 0; padding: 72px 0 56px; }
.veristay-auth-eyebrow { display: block; margin-bottom: 14px; color: var(--auth-mint); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.veristay-auth-story h1 { max-width: 520px; margin: 0 0 22px; color: #fff; font-size: clamp(38px, 4.2vw, 57px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.veristay-auth-story-copy > p { max-width: 510px; margin: 0; color: #c1d0da; font-size: 15px; line-height: 1.75; }
.veristay-auth-benefits { display: grid; gap: 13px; margin: 30px 0 0; padding: 0; list-style: none; color: #e6eff2; font-size: 13px; }
.veristay-auth-benefits i { display: inline-grid; width: 23px; height: 23px; margin-right: 10px; color: var(--auth-mint); border: 1px solid rgba(95,203,179,.35); border-radius: 50%; place-items: center; }
.veristay-auth-trust { display: flex; align-items: center; gap: 10px; margin: 0; color: #9fb4c0; font-size: 11px; }
.veristay-auth-trust span { width: 7px; height: 7px; border-radius: 50%; background: var(--auth-mint); box-shadow: 0 0 0 5px rgba(95,203,179,.12); }

.veristay-auth-form-panel { display: grid; padding: 58px 64px; background: #fff; place-items: center; }
.veristay-auth-form-wrap { width: 100%; max-width: 390px; }
.veristay-auth-mobile-brand { display: none; }
.veristay-auth-form-wrap h2 { margin: 0 0 10px; color: var(--auth-ink); font-size: 32px; font-weight: 700; letter-spacing: -.035em; }
.veristay-auth-intro { margin: 0 0 34px; color: var(--auth-muted); font-size: 13px; line-height: 1.65; }
.veristay-auth-alert { display: flex; gap: 10px; margin-bottom: 22px; padding: 12px 14px; color: #9d3943; border: 1px solid #f0cbd0; border-radius: 10px; background: #fff5f6; font-size: 12px; }
.veristay-auth-alert p { margin: 0; }
.veristay-auth-field { margin-bottom: 20px; }
.veristay-auth-field label { display: block; margin-bottom: 8px; color: #354156; font-size: 12px; font-weight: 650; }
.veristay-auth-field .form-control { width: 100%; height: 50px; padding: 0 15px; color: var(--auth-ink); border: 1px solid var(--auth-border); border-radius: 10px; background: #f9fbfc; font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.veristay-auth-field .form-control:focus { border-color: #75b8c7; outline: 0; background: #fff; box-shadow: 0 0 0 4px rgba(23,107,135,.1); }
.veristay-auth-field.has-error .form-control { border-color: #d96974; }
.veristay-auth-field-error { display: block; margin-top: 6px; color: #bd4c57; font-size: 11px; }
.veristay-auth-field-help { display: block; margin-top: 6px; color: #8792a2; font-size: 10px; line-height: 1.45; }
.veristay-auth-field-help ul { margin: 5px 0 0; padding-left: 17px; }
.veristay-auth-field-help li + li { margin-top: 2px; }
.veristay-auth-options { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 2px 0 24px; color: #8792a2; font-size: 10px; line-height: 1.45; }
.veristay-auth-options span { max-width: 205px; }
.veristay-auth-options a, .veristay-auth-register a { color: var(--auth-blue); font-weight: 650; text-decoration: none; }
.veristay-auth-options a:hover, .veristay-auth-register a:hover { color: #10566e; text-decoration: underline; }
.veristay-auth-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; gap: 10px; color: #fff; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--auth-blue), var(--auth-blue-bright)); box-shadow: 0 12px 24px rgba(23,107,135,.2); font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.veristay-auth-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(23,107,135,.25); }
.veristay-auth-submit:focus-visible { outline: 3px solid rgba(23,107,135,.25); outline-offset: 3px; }
.veristay-auth-terms { margin: 0 0 20px; color: #8792a2; font-size: 10px; line-height: 1.5; }
.veristay-auth-register { margin: 28px 0 0; color: var(--auth-muted); font-size: 12px; text-align: center; }
.veristay-auth-support { margin: 38px 0 0; color: #9aa5b3; font-size: 10px; text-align: center; }


.veristay-auth-panel--register { min-height: 760px; }
.veristay-auth-panel--register .veristay-auth-form-panel { padding-top: 42px; padding-bottom: 42px; }
.veristay-auth-panel--register .veristay-auth-field { margin-bottom: 14px; }
.veristay-auth-panel--register .veristay-auth-field .form-control { height: 46px; }
.veristay-auth-panel--register .veristay-auth-intro { margin-bottom: 24px; }
.veristay-auth-panel--register .veristay-auth-register { margin-top: 22px; }
.veristay-auth-panel--register .veristay-auth-support { margin-top: 24px; }

.veristay-auth-panel--reset { min-height: 640px; }
.veristay-auth-panel--reset .veristay-auth-story-copy { padding-top: 64px; padding-bottom: 48px; }
.veristay-auth-panel--reset .veristay-auth-intro { margin-bottom: 28px; }
.veristay-auth-panel--reset .veristay-auth-field { margin-bottom: 18px; }
.veristay-auth-panel--reset .veristay-auth-support { margin-top: 28px; }

.veristay-auth-confirmation .veristay-auth-intro { margin-bottom: 24px; }
.veristay-auth-status-icon { display: grid; width: 58px; height: 58px; margin-bottom: 24px; color: var(--auth-blue); border: 1px solid #cce4e9; border-radius: 16px; background: #edf8f8; font-size: 25px; place-items: center; }
.veristay-auth-note { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 24px; padding: 14px 15px; color: #566579; border: 1px solid var(--auth-border); border-radius: 10px; background: #f8fafb; font-size: 11px; line-height: 1.55; }
.veristay-auth-note i { flex: 0 0 auto; margin-top: 2px; color: var(--auth-blue); font-size: 15px; }
.veristay-auth-note p { margin: 0; }
.veristay-auth-confirmation .veristay-auth-submit { text-decoration: none; }

@media (max-width: 900px) {
  .veristay-auth-shell { padding: 20px; }
  .veristay-auth-panel { min-height: auto; grid-template-columns: 1fr; }
  .veristay-auth-story { display: none; }
  .veristay-auth-form-panel { min-height: calc(100vh - 40px); padding: 50px 32px; }
  .veristay-auth-mobile-brand { display: block; margin-bottom: 54px; }
  .veristay-auth-mobile-brand img { width: 165px; }
}

@media (max-width: 480px) {
  .veristay-auth-shell { padding: 0; }
  .veristay-auth-panel { min-height: 100vh; border: 0; border-radius: 0; }
  .veristay-auth-form-panel { min-height: 100vh; padding: 38px 24px; }
  .veristay-auth-mobile-brand { margin-bottom: 44px; }
  .veristay-auth-form-wrap h2 { font-size: 28px; }
  .veristay-auth-options { align-items: flex-end; }
}
