/*
 * Public authentication layouts and authentication-only controls.
 * See docs/frontend-architecture.md for ownership and loading rules.
 */

.auth-body { min-height: 100vh; background: #f7f9fc; }
.auth-layout { display: grid; min-height: calc(100vh - 76px); grid-template-columns: minmax(360px, 37%) 1fr; }
.auth-hero { position: relative; overflow: hidden; padding: 56px; background: radial-gradient(circle at 30% 30%, #07467c 0, #052f57 38%, #031f3c 100%); color: #fff; }
.auth-hero::before { position: absolute; inset: 0; background-image: radial-gradient(#5ca7ff 1px, transparent 1px); background-size: 20px 20px; content: ""; opacity: .16; }
.auth-brand { position: relative; display: inline-flex; color: #fff; text-decoration: none; }
.auth-brand .brand-copy strong { font-size: 26px; }
.auth-hero__copy { position: relative; z-index: 1; max-width: 430px; margin-top: 70px; }
.auth-hero__copy h1 { margin: 0 0 20px; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; }
.auth-hero__copy > p { color: #d4e3f3; font-size: 17px; line-height: 1.7; }
.auth-benefits { display: grid; gap: 24px; margin-top: 42px; }
.auth-benefits > div { display: flex; align-items: center; gap: 15px; }
.auth-benefits .soft-icon { background: rgb(16 112 232 / 13%); color: #58a8ff; }
.auth-benefits strong, .auth-benefits small { display: block; }
.auth-benefits small { margin-top: 5px; color: #bcd2e8; }
.factory-art { position: absolute; right: -30px; bottom: 40px; left: 25px; height: 240px; border-bottom: 4px solid #56a4f4; opacity: .16; }
.factory-art span { position: absolute; bottom: 0; width: 110px; height: 74px; border: 3px solid #56a4f4; transform: skewY(-15deg); }
.factory-art span:nth-child(1) { left: 3%; }
.factory-art span:nth-child(2) { bottom: 34px; left: 30%; }
.factory-art span:nth-child(3) { left: 57%; }
.factory-art span:nth-child(4) { bottom: 54px; left: 80%; }
.auth-stage { display: grid; padding: 52px 30px; place-items: center; background-image: radial-gradient(#dbe3ed 1px, transparent 1px); background-size: 22px 22px; }
.auth-card { width: min(100%, 550px); padding: 48px; border: 1px solid #dce3eb; border-radius: 14px; background: rgb(255 255 255 / 96%); box-shadow: 0 18px 55px rgb(17 42 75 / 8%); }
.auth-card__heading { margin-bottom: 30px; text-align: center; }
.auth-card__heading h2 { margin: 0 0 8px; font-size: 29px; }
.auth-card__heading p { margin: 0; color: var(--muted); line-height: 1.55; }
.auth-footer { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 46px; border-top: 1px solid #dce3eb; background: #fff; color: var(--muted); font-size: 13px; }
.auth-footer nav { display: flex; gap: 30px; }
.auth-footer a { color: var(--text); text-decoration: none; }
.auth-help, .auth-back { display: block; margin-top: 28px; text-align: center; }
.auth-back { font-weight: 700; text-decoration: none; }
.password-rules { display: grid; gap: 5px; padding: 15px; border: 1px solid #bcd9ff; border-radius: 8px; background: #f3f8ff; color: #425978; font-size: 13px; }

@media (max-width: 900px) {
    .auth-layout { display: block; min-height: calc(100vh - 70px); }
    .auth-hero { display: none; }
    .auth-stage { min-height: calc(100vh - 70px); padding: 24px; }
    .auth-footer { padding: 18px 24px; }
    .auth-footer nav { gap: 14px; }
}

@media (max-width: 600px) {
    .auth-card { padding: 30px 22px; }
    .auth-footer { align-items: flex-start; flex-direction: column; }
    .auth-footer nav { flex-wrap: wrap; }
    .form-split { align-items: flex-start; gap: 12px; }
}