:root {
  --auth-navy-950: #08111f;
  --auth-navy-900: #0d192b;
  --auth-gold: #d4a52d;
  --auth-gold-dark: #ad7909;
  --auth-gold-soft: #fbf3df;
  --auth-surface: #f5f7fb;
  --auth-text: #0e1a2d;
  --auth-muted: #637087;
  --auth-border: #d7dfeb;
  --auth-danger: #c7374b;
  --auth-danger-soft: #fff0f2;
  --auth-success: #16865f;
  --auth-success-soft: #eaf9f3;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--auth-surface); }
body { min-height: 100vh; margin: 0; color: var(--auth-text); background: var(--auth-surface); font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; }

.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(390px, 42%) minmax(0, 1fr); }
.auth-brand { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; padding: clamp(34px, 5vw, 72px); overflow: hidden; color: #fff; background: radial-gradient(circle at 82% 22%, rgba(212, 165, 45, .24), transparent 27%), linear-gradient(145deg, #101d30 0%, #07101d 74%); }
.auth-brand::before { position: absolute; right: -170px; bottom: -190px; width: 470px; height: 470px; border: 1px solid rgba(212, 165, 45, .25); border-radius: 50%; box-shadow: 0 0 0 48px rgba(212, 165, 45, .035), 0 0 0 96px rgba(212, 165, 45, .025); content: ''; pointer-events: none; }
.auth-brand-lockup, .auth-brand-message, .auth-brand-footer { position: relative; z-index: 1; }
.auth-brand-lockup { display: inline-flex; width: fit-content; align-items: center; gap: 15px; }
.auth-logo { display: grid; width: 64px; height: 64px; flex: 0 0 64px; place-items: center; overflow: hidden; border: 1px solid rgba(212, 165, 45, .45); border-radius: 17px; background: #fffaf0; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.auth-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-brand-name { display: block; margin: 0; font-family: Montserrat, sans-serif; font-size: 25px; font-weight: 900; letter-spacing: -.04em; }
.auth-brand-name span { color: #f3c85d; }
.auth-brand-kicker { display: block; margin: 5px 0 0; color: #aeb9cb; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.auth-brand-message { max-width: 530px; margin: auto 0; padding: 58px 0; }
.auth-brand-eyebrow { margin: 0 0 18px; color: #f1c454; font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.auth-brand-message h1 { max-width: 520px; margin: 0; font-family: Montserrat, sans-serif; font-size: clamp(38px, 4.2vw, 62px); font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.auth-brand-message p:last-child { max-width: 490px; margin: 24px 0 0; color: #c2cbd9; font-size: 16px; line-height: 1.7; }
.auth-brand-footer { color: #8491a6; font-size: 11px; }

.auth-main { display: flex; min-width: 0; align-items: center; justify-content: center; padding: clamp(28px, 6vw, 90px); background: linear-gradient(rgba(215, 223, 235, .38) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 223, 235, .38) 1px, transparent 1px), var(--auth-surface); background-size: 44px 44px; }
.auth-content { width: min(100%, 500px); }
.auth-mobile-brand { display: none; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 15px; color: var(--auth-gold-dark); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.auth-eyebrow::before { width: 28px; height: 2px; border-radius: 2px; background: var(--auth-gold); content: ''; }
.auth-content h2 { margin: 0; font-family: Montserrat, sans-serif; font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -.055em; line-height: 1.04; }
.auth-intro { margin: 15px 0 32px; color: var(--auth-muted); font-size: 15px; line-height: 1.65; }
.auth-form { padding-top: 28px; border-top: 1px solid var(--auth-border); }
.auth-field { margin-bottom: 20px; }
.auth-field-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.auth-field label { color: #26344b; font-size: 12px; font-weight: 800; }
.auth-field-help { color: #8792a4; font-size: 11px; }
.auth-input-wrap { position: relative; }
.auth-input-icon { position: absolute; top: 50%; left: 16px; width: 19px; height: 19px; color: #8290a5; transform: translateY(-50%); pointer-events: none; }
.auth-control { width: 100%; height: 56px; padding: 0 52px 0 48px; border: 1px solid var(--auth-border); border-radius: 12px; outline: none; color: var(--auth-text); background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(14,26,45,.035); font-size: 14px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.auth-control::placeholder { color: #96a1b2; }
.auth-control:hover { border-color: #bcc8d9; background: #fff; }
.auth-control:focus { border-color: var(--auth-gold); background: #fff; box-shadow: 0 0 0 4px rgba(212,165,45,.13), 0 10px 26px rgba(14,26,45,.06); }
.auth-password-toggle { position: absolute; top: 50%; right: 10px; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #6f7c91; background: transparent; cursor: pointer; transform: translateY(-50%); }
.auth-password-toggle:hover, .auth-password-toggle:focus-visible { color: var(--auth-gold-dark); background: var(--auth-gold-soft); outline: none; }
.auth-password-toggle svg { width: 18px; height: 18px; }
.auth-button { display: inline-flex; width: 100%; height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #d8a72a, #b67d08); box-shadow: 0 13px 28px rgba(182,125,8,.22); font-size: 13px; font-weight: 850; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.auth-button:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 17px 34px rgba(182,125,8,.28); }
.auth-button svg { width: 16px; height: 16px; }
.auth-message { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 22px; padding: 13px 14px; border: 1px solid; border-radius: 11px; font-size: 13px; font-weight: 650; line-height: 1.45; }
.auth-message svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.auth-message.is-error { border-color: #f2b8c1; color: var(--auth-danger); background: var(--auth-danger-soft); }
.auth-message.is-success { border-color: #a9e4cd; color: var(--auth-success); background: var(--auth-success-soft); }
.auth-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--auth-border); color: #778397; font-size: 11px; }
.auth-link { color: #526078; font-weight: 750; text-decoration: none; }
.auth-link:hover { color: var(--auth-gold-dark); text-decoration: underline; }
.auth-secure { display: inline-flex; align-items: center; gap: 7px; }
.auth-secure svg { width: 14px; height: 14px; color: #1a9b6f; }
.auth-password-note { margin: -7px 0 20px; color: #778397; font-size: 11px; line-height: 1.5; }

@media (min-width:901px) and (max-height:820px) {
  .auth-brand { padding: 30px 48px; }
  .auth-brand-message { padding: 28px 0; }
  .auth-brand-message h1 { font-size: clamp(35px,3.6vw,50px); }
  .auth-brand-message p:last-child { margin-top: 17px; font-size: 14px; line-height: 1.55; }
  .auth-main { padding-top: 34px; padding-bottom: 34px; }
}

@media (max-width:900px) {
  .auth-shell { display: block; }
  .auth-brand { display: none; }
  .auth-main { min-height: 100vh; padding: 32px 22px; background-size: 38px 38px; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 50px; }
  .auth-mobile-brand .auth-logo { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; }
  .auth-mobile-brand .auth-brand-name { color: var(--auth-text); font-size: 21px; }
  .auth-mobile-brand .auth-brand-kicker { color: var(--auth-muted); }
}

@media (max-width:520px) {
  .auth-main { align-items: flex-start; padding: 24px 18px 30px; }
  .auth-mobile-brand { margin-bottom: 40px; }
  .auth-content h2 { font-size: 34px; }
  .auth-intro { margin-bottom: 25px; }
  .auth-form { padding-top: 24px; }
  .auth-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }