/*
 * Sign-in area (login, password reset, register): navy brand panel + form, one shell for all of them
 * (templates/security/_layout.html.twig). Tokens as the app (ui/ui.css): IBM Plex, #1F5FD1 accent.
 * Never use .mb-2/.mb-3 here (main.css gives them a `bottom` offset).
 */
html, body { margin: 0; background: #fff; }
.au2 { display: flex; flex-wrap: wrap; min-height: 100vh; font: 15px/1.5 "IBM Plex Sans", system-ui, sans-serif; color: #14171C; background: #fff; }
.au2 *, .au2 *::before, .au2 *::after { box-sizing: border-box; }
.au2 a { color: #1F5FD1; font-weight: 500; text-decoration: none; }
.au2 a:hover { color: #1747A0; text-decoration: underline; }

/* brand panel */
.au2-pn { flex: 1 1 520px; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 56px; background: #0F2A52; color: #fff; }
.au2-chk { position: absolute; left: -40px; bottom: -70px; width: 360px; height: 300px; opacity: .07; pointer-events: none; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 72px 72px; }
.au2-brand { position: relative; display: flex; align-items: center; gap: 12px; }
.au2-brand b { font-size: 19px; letter-spacing: -.01em; }
.au2-mark { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.au2-mark img { width: 34px; height: 34px; object-fit: contain; }
.au2-hero { position: relative; max-width: 520px; }
.au2-hero h2 { text-wrap: balance; margin: 0 0 14px; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: #fff; }
.au2-hero p { margin: 0 0 28px; font-size: 16px; color: rgba(255, 255, 255, .82); }
.au2-feat { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.au2-feat-i { flex: 0 0 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: #F7A04B; }
.au2-feat b { display: block; font-size: 14.5px; font-weight: 600; }
.au2-feat div span { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.au2-pn-foot { position: relative; font-size: 12.5px; color: rgba(255, 255, 255, .7); }

/* form side */
.au2-fm { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; padding: 32px 40px; }
.au2-top { display: flex; justify-content: flex-end; }
.au2-lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #EEF0F3; }
.au2-lang a, .au2-lang span { padding: 4px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #3A414C; }
.au2 .au2-lang a:hover { text-decoration: none; color: #14171C; }
.au2-lang .on { background: #fff; color: #14171C; box-shadow: 0 1px 2px rgba(20, 23, 28, .12); }
.au2-mid { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.au2-card { width: 100%; max-width: 392px; margin: 0; }
.au2-card.is-wide { max-width: 480px; }
.au2-card h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; color: #14171C; }
.au2-sub { margin: 0 0 24px; color: #4B5563; }
.au2-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 13.5px; }

/* fields */
.au2-fld { margin-bottom: 16px; }
.au2-fld label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #4B5563; }
.au2-in { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid #DDE1E6; border-radius: 9px; background: #fff; color: #5B6472; }
.au2-in:focus-within { border-color: #1F5FD1; box-shadow: 0 0 0 3px #E6EEFC; }
.au2-in.err { border-color: #B91C1C; box-shadow: 0 0 0 3px #FEE2E2; }
.au2 .au2-in input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: 15px "IBM Plex Sans", sans-serif; color: #14171C; }
.au2 .au2-in input[readonly] { color: #5B6472; }
.au2-in button { display: flex; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: #5B6472; cursor: pointer; }
.au2-in button:hover { background: #EEF0F3; color: #14171C; }
.au2-ferr { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: #B91C1C; }
.au2-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 20px; font-size: 13.5px; }
.au2-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 400; color: #14171C; cursor: pointer; }
.au2 .au2-check input { width: 16px; height: 16px; margin: 0; accent-color: #1F5FD1; }
.au2-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin: 0; border: 0; border-radius: 10px; background: #1F5FD1; color: #fff; font: 600 15px "IBM Plex Sans", sans-serif; cursor: pointer; }
.au2-btn:hover { background: #1A52B8; }
.au2-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; font-size: 12.5px; color: #5B6472; }
.au2-or::before, .au2-or::after { content: ""; flex: 1; border-top: 1px solid #E3E6EB; }
.au2-center { text-align: center; font-size: 14px; }

/* messages */
.au2-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.au2-alert b { display: block; font-weight: 600; }
.au2-alert svg { flex: 0 0 18px; margin-top: 2px; }
.au2-alert.is-err { background: #FEE2E2; color: #7F1D1D; }
.au2-alert.is-warn { background: #FEF3C7; color: #78350F; }
.au2-alert.is-ok { background: #DCFCE7; color: #14532D; }

.au2-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #5B6472; }
.au2 .au2-foot a { font-weight: 400; color: #5B6472; }

@media (max-width: 760px) {
    .au2 { flex-direction: column; flex-wrap: nowrap; }
    .au2-pn { flex: 0 0 auto; padding: 24px; gap: 16px; }
    .au2-hero h2 { font-size: 19px; line-height: 1.3; margin: 0; max-width: 300px; }
    .au2-hero p, .au2-feat { display: none; }
    .au2-pn-foot { display: none; }
    .au2-chk { width: 200px; height: 200px; left: auto; right: -40px; bottom: -60px; background-size: 40px 40px; }
    .au2-fm { padding: 20px 24px; }
    .au2-top { order: 3; justify-content: flex-start; margin-top: 12px; }
    .au2-mid { align-items: flex-start; padding: 8px 0; }
    .au2-btn, .au2-in { min-height: 48px; }
}