:root {
  --auth-orange: #f58220;
  --auth-green: #138f2d;
  --auth-blue: #174d82;
  --auth-navy: #0d2138;
  --auth-bg: #f4f7fb;
  --auth-text: #172033;
  --auth-muted: #687588;
  --auth-border: #e1e7ee;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.auth-body {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--auth-bg);
  color: var(--auth-text);
}
.auth-accent-strip { height: 5px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.auth-accent-strip span:nth-child(1) { background: var(--auth-orange); }
.auth-accent-strip span:nth-child(2) { background: var(--auth-blue); }
.auth-accent-strip span:nth-child(3) { background: var(--auth-green); }
.auth-shell { min-height: calc(100vh - 5px); display: grid; grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.1fr); }
.auth-brand {
  position: relative;
  overflow: hidden;
  padding: 58px clamp(38px, 5vw, 76px);
  background: linear-gradient(145deg, #0d2138 0%, #12395f 64%, #17614f 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.auth-brand::before { width: 340px; height: 340px; right: -160px; top: -140px; background: rgba(245,130,32,.15); }
.auth-brand::after { width: 260px; height: 260px; left: -145px; bottom: -110px; background: rgba(255,255,255,.05); }
.auth-brand__logo { position: relative; z-index: 1; width: 186px; max-width: 100%; height: auto; }
.auth-brand__content { position: relative; z-index: 1; max-width: 520px; margin: 70px 0; }
.auth-brand__kicker { color: #ffd8b5; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-brand h1 { margin: 13px 0 15px; font-size: clamp(32px, 4vw, 49px); line-height: 1.07; letter-spacing: -.03em; }
.auth-brand p { margin: 0; max-width: 480px; color: rgba(255,255,255,.72); line-height: 1.7; font-size: 14px; }
.auth-brand__points { position: relative; z-index: 1; display: grid; gap: 10px; color: rgba(255,255,255,.68); font-size: 12px; }
.auth-brand__point { display: flex; align-items: center; gap: 9px; }
.auth-brand__point::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--auth-orange); box-shadow: 0 0 0 3px rgba(245,130,32,.12); }
.auth-main { display: flex; flex-direction: column; min-width: 0; background: #f7f9fc; }
.auth-top { min-height: 74px; display: flex; align-items: center; justify-content: flex-end; padding: 16px 34px; color: var(--auth-muted); font-size: 12px; }
.auth-form-wrap { flex: 1; display: grid; place-items: center; padding: 30px; }
.auth-card { width: min(440px, 100%); padding: 36px; background: #fff; border: 1px solid var(--auth-border); border-radius: 16px; box-shadow: 0 18px 46px rgba(27,47,72,.08); }
.auth-card__mobile-logo { display: none; width: 166px; height: auto; margin-bottom: 26px; }
.auth-title { margin: 0; font-size: 27px; font-weight: 850; letter-spacing: -.02em; }
.auth-subtitle { margin: 9px 0 25px; color: var(--auth-muted); font-size: 13px; line-height: 1.6; }
.auth-label { display: block; margin: 15px 0 7px; font-size: 12px; font-weight: 750; }
.auth-input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--auth-border); border-radius: 9px; outline: none; background: #fff; color: var(--auth-text); font-size: 14px; transition: border .15s ease, box-shadow .15s ease; }
.auth-input:focus { border-color: var(--auth-blue); box-shadow: 0 0 0 3px rgba(23,77,130,.09); }
.auth-input--otp { min-height: 58px; text-align: center; letter-spacing: 9px; font-size: 24px; font-weight: 800; }
.auth-button { width: 100%; min-height: 46px; margin-top: 22px; border: 0; border-radius: 9px; background: linear-gradient(90deg, var(--auth-blue), #21699e); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(23,77,130,.15); }
.auth-button:hover { filter: brightness(.98); }
.auth-links { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.auth-link, .auth-link-button { color: var(--auth-blue); text-decoration: none; font-weight: 750; }
.auth-link-button { appearance: none; padding: 0; border: 0; background: transparent; cursor: pointer; }
.auth-alert { margin-bottom: 18px; padding: 11px 13px; border-radius: 9px; font-size: 12px; line-height: 1.45; }
.auth-alert--error { background: #fff0f1; color: #a3343d; border: 1px solid #f5d6d8; }
.auth-alert--success { background: #edf9f0; color: #23723a; border: 1px solid #d3efda; }
.auth-info { padding: 12px 13px; border-radius: 9px; background: #f6f8fb; border: 1px solid var(--auth-border); color: var(--auth-muted); font-size: 11px; line-height: 1.5; }
.auth-footer { min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 14px 30px; color: #8792a2; font-size: 10px; text-align: center; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-top { min-height: 46px; padding: 10px 18px; }
  .auth-form-wrap { padding: 18px; }
  .auth-card { padding: 30px 24px; }
  .auth-card__mobile-logo { display: block; }
}
.auth-help { margin:-2px 0 9px;color:#6d7888;font-size:11px;line-height:1.45; }