/* Login inspirado na referência mwn.net.br/login. */
.auth-shell {
    --auth-navy: #111030;
    --auth-teal: #30b09d;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 45% 55%;
    color: var(--auth-navy);
    background: #fff;
}

.auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 72px;
    color: #fff;
    background:
        radial-gradient(ellipse at 0 0, #5d5077b3, transparent 65%),
        radial-gradient(ellipse at 0 100%, #30b09d40, transparent 52%),
        var(--auth-navy);
}

.auth-brand-content, .auth-brand-footer { position: relative; z-index: 1; }
.auth-logo { display: block; width: fit-content; margin-bottom: 110px; }
.auth-logo img { display: block; width: 230px; height: auto; }
.auth-eyebrow { color: var(--auth-teal); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; }
.auth-brand .auth-eyebrow { margin: 12px 0; }
.auth-brand h1 { max-width: 540px; font-size: clamp(52px, 5.5vw, 88px); line-height: .96; letter-spacing: -2.5px; font-weight: 700; margin: 14px 0 26px; }
.auth-description { max-width: 470px; margin: 0; color: #ffffffb8; font-size: 16.3px; line-height: 1.7; }
.auth-brand-footer { margin: 70px 0 0; font-size: 13px; color: #ffffff80; }
.auth-rings { position: absolute; z-index: 0; pointer-events: none; width: 620px; height: 620px; top: -30px; left: 65%; border: 1px solid #30b09d30; border-radius: 50%; }
.auth-rings::after { content: ''; position: absolute; inset: 79px; border: 1px solid #30b09d30; border-radius: 50%; }

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 7vw;
    background-color: #fff;
    background-image: linear-gradient(#5d507706 1px, transparent 1px), linear-gradient(90deg, #5d507706 1px, transparent 1px);
    background-size: 28px 28px;
}

.auth-card { width: 100%; max-width: 440px; }
.auth-card h2 { margin: 12px 0 8px; font-size: 43.2px; line-height: 1.1; letter-spacing: -1.3px; font-weight: 700; }
.auth-helper { color: #69677e; font-size: 16px; line-height: 1.6; margin: 0; }
.auth-form { margin-top: 38px; }
.auth-field { margin-top: 20px; }
.auth-field label { font-size: 14px; font-weight: 700; }
.auth-field input { display: block; width: 100%; height: 53px; border: 1px solid #dcd8e6; border-radius: 5px; background: #fff; color: var(--auth-navy); padding: 0 15px; margin-top: 8px; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.auth-field input:focus { outline: none; border-color: var(--auth-teal); box-shadow: 0 0 0 3px #30b09d20; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth-label-row span { font-size: 12px; color: #858198; }
.auth-recovery { margin-top: 22px; font-size: 14px; color: #5d5077; text-align: right; }
.auth-recovery summary { display: inline-block; font-weight: 700; cursor: pointer; }
.auth-recovery summary::-webkit-details-marker { display: none; }
.auth-recovery summary:hover { text-decoration: underline; }
.auth-recovery summary:focus-visible { outline: 2px solid var(--auth-teal); outline-offset: 5px; }
.auth-recovery p { text-align: left; padding: 14px; margin: 14px 0 0; line-height: 1.6; background: #f3f1f7; border: 1px solid #e5e1e9; border-radius: 5px; }
.auth-submit { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 54px; margin-top: 32px; padding: 0 20px; border: 0; border-radius: 5px; background: var(--auth-navy); color: #fff; font-size: 16px; font-weight: 750; transition: background .15s; }
.auth-submit:hover { background: #29234d; }
.auth-submit svg { width: 20px; height: 20px; }
.auth-security { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: #858198; text-align: center; }
.auth-security svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--auth-teal); }

@media (max-width: 1100px) and (min-width: 761px) {
    .auth-brand { padding: 48px 36px; }
    .auth-logo { margin-bottom: 85px; }
    .auth-logo img { width: 190px; }
    .auth-brand h1 { font-size: 60px; }
    .auth-panel { padding: 48px 36px; }
    .auth-card h2 { font-size: 36px; }
}

@media (max-width: 760px) {
    .auth-shell { display: block; }
    .auth-brand { padding: 32px 28px 40px; }
    .auth-logo { margin-bottom: 56px; }
    .auth-logo img { width: 170px; }
    .auth-brand h1 { font-size: 40px; letter-spacing: -1.2px; margin-bottom: 24px; }
    .auth-brand-footer { display: none; }
    .auth-rings { top: -20px; left: 42%; width: 560px; height: 560px; }
    .auth-panel { padding: 48px 20px; }
    .auth-card { max-width: 440px; }
    .auth-card h2 { font-size: 32px; letter-spacing: -.9px; }
    .auth-helper { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field input, .auth-submit { transition: none; }
}