:root {
    --auth-navy: #102a43;
    --auth-teal: #0f6f59;
    --auth-muted: #667085;
    --auth-line: #dce4ec;
}

.auth-body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at 8% 0, #1a4d68 0, #102a43 39%, #071827 100%);
    color: #344054;
    font-family: Raleway, Arial, sans-serif;
    font-size: 16px;
}

.auth-body *,
.auth-body *::before,
.auth-body *::after { box-sizing: border-box; }

.auth-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none;
}

.auth-brand:hover,
.auth-brand:focus { color: #fff; text-decoration: none; }
.auth-brand img { display: block; width: 180px; height: auto; }

.auth-card {
    width: min(100%, 450px);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    padding: clamp(27px, 6vw, 42px);
}

.auth-card__eyebrow { margin: 0 0 8px; color: var(--auth-teal); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.auth-card h1 { margin: 0; color: var(--auth-navy); font-size: clamp(26px, 5vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.auth-card__description { margin: 13px 0 28px; color: var(--auth-muted); font-size: 15px; line-height: 1.6; }
.auth-card .form-group { margin-bottom: 19px; }
.auth-card label { display: block; margin-bottom: 7px; color: var(--auth-navy); font-size: 14px; font-weight: 800; }
.auth-card .form-control { height: 48px; border: 1px solid #cbd5df; border-radius: 9px; box-shadow: none; color: #344054; font-family: inherit; padding: 10px 13px; }
.auth-card .form-control:focus { border-color: var(--auth-teal); box-shadow: 0 0 0 3px rgba(15,111,89,.14); }
.auth-card .has-error .form-control { border-color: #d92d20; }
.auth-card .help-block { margin: 7px 0 0; color: #b42318; font-size: 13px; font-weight: 700; }
.auth-card .cep-status { margin: 7px 0 0; color: var(--auth-muted); font-size: 13px; font-weight: 700; }
.auth-card .cep-status.is-error { color: #b42318; }
.auth-notice { display: flex; align-items: flex-start; gap: 10px; margin: 19px 0 0; border: 1px solid #b7e4d6; border-radius: 10px; background: #f0fbf7; color: #075b47; font-size: 14px; font-weight: 700; line-height: 1.5; padding: 12px; }
.auth-notice i { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 7px; background: #d8f3e8; color: #08785e; }
.auth-notice--error { border-color: #f5b7b1; background: #fff5f4; color: #9f1f17; }
.auth-notice--error i { background: #fee4e2; color: #b42318; }
.auth-actions { display: grid; gap: 12px; margin-top: 28px; }
.auth-body .auth-button { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; border: 1px solid var(--auth-teal); border-radius: 9px; background: var(--auth-teal); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; text-decoration: none; transition: background 160ms ease, transform 160ms ease; }
.auth-body .auth-button:hover,
.auth-body .auth-button:focus { background: #0a5e4b; color: #fff; text-decoration: none; transform: translateY(-1px); }
.auth-link { color: var(--auth-teal); font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; }
.auth-link:hover,
.auth-link:focus { color: #0a5e4b; text-decoration: underline; }
.auth-link:focus,
.auth-link:active { outline: none !important; box-shadow: none !important; }
.auth-back { margin-top: 23px; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; text-decoration: none; }
.auth-back:hover,
.auth-back:focus { color: #fff; text-decoration: none; }

@media (max-width: 480px) {
    .auth-shell { padding: 24px 14px; }
    .auth-brand img { width: 155px; }
    .auth-card { border-radius: 15px; padding: 27px 23px; }
}

@media (max-height: 800px) and (min-width: 481px) {
    .auth-shell { justify-content: flex-start; padding-top: 16px; padding-bottom: 16px; }
    .auth-brand { margin-bottom: 12px; }
    .auth-brand img { width: 130px; }
    .auth-card { padding: 24px 32px; }
    .auth-card__description { margin-top: 9px; margin-bottom: 18px; }
    .auth-card .form-group { margin-bottom: 12px; }
    .auth-actions { margin-top: 18px; }
    .auth-back { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-body * { transition-duration: .01ms !important; }
}