:root {
  --blue-950: #000000;
  --blue-900: #0a0a0f;
  --blue-800: #245bb4;
  --blue-700: #2d72e1;
  --blue-600: #2d72e1;
  --blue-500: #4b8ef1;
  --teal: #4fbcb2;
  --blue-100: #dcecff;
  --blue-50: #f1f7ff;
  --ink: #10213e;
  --muted: #66758e;
  --line: #dce3ed;
  --danger: #c83349;
  --white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--ink); background: #f7faff; font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: var(--blue-700); font-weight: 650; text-decoration: none; }
a:hover { color: var(--blue-800); text-decoration: underline; }
.auth-shell { display: grid; grid-template-columns: minmax(360px, 44%) 1fr; min-height: 100vh; }
.brand-panel { position: relative; overflow: hidden; display: flex; min-height: 100vh; padding: clamp(36px, 5vw, 72px); color: var(--white); background: radial-gradient(circle at 0 0, #1671e8 0, transparent 38%), linear-gradient(145deg, var(--blue-900), var(--blue-950)); }
.brand-panel:after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255,255,255,.025), 0 0 0 88px rgba(255,255,255,.025); }
.brand-content { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; max-width: 540px; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: #fff; font-size: 1.15rem; font-weight: 760; letter-spacing: -.02em; }
.brand:hover { color: #fff; text-decoration: none; }
.brand-mark { position: relative; display: inline-grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.brand-mark:before,.brand-mark:after,.brand-mark span { content:""; position:absolute; width:8px; border-radius:5px; background:var(--blue-600); transform:rotate(38deg); }
.brand-mark:before { height: 17px; left: 9px; top: 10px; }
.brand-mark span { height: 25px; left: 15px; top: 6px; }
.brand-mark:after { height: 15px; right: 7px; top: 8px; }
.brand-copy { margin: auto 0; padding: 64px 0; }
.eyebrow { margin: 0 0 16px; color: #88c7ff; font-size: .78rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.brand-copy h1 { max-width: 520px; margin: 0; color: #fff; font-size: clamp(2.3rem, 4.2vw, 4.5rem); font-weight: 720; line-height: 1.04; letter-spacing: -.055em; }
.brand-copy > p:last-child { max-width: 460px; margin: 28px 0 0; color: #bfd8fa; font-size: 1.04rem; line-height: 1.7; }
.trust-note { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); }
.trust-note svg { width: 28px; fill: #7bc3ff; }
.trust-note div { display: grid; gap: 3px; }.trust-note strong { font-size: .9rem; }.trust-note span { color: #9db9df; font-size: .8rem; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); }.orb-one { top: 21%; right: 9%; width: 14px; height: 14px; background:#67bdff; box-shadow:0 0 32px #67bdff; }.orb-two { left:12%; bottom:22%; width:7px; height:7px; background:#fff; opacity:.65; }
.form-panel { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; background: #fff; }
.form-wrap { position: relative; width: min(100%, 500px); margin: auto; padding: 64px 40px 36px; }
.mobile-brand { display: none; }
.locale-menu { position: absolute; top: 24px; right: 40px; }.locale-menu label { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }.locale-menu select { appearance:none; padding:7px 30px 7px 11px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%2366758e' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 9px center; }
.form-heading { margin-bottom: 34px; }.form-heading .form-eyebrow { margin-bottom: 10px; color:var(--blue-700); }.form-heading h2 { margin:0; font-size:clamp(1.8rem, 3vw, 2.35rem); letter-spacing:-.035em; }.form-heading > p:last-child { margin:12px 0 0; color:var(--muted); line-height:1.6; }
.field-group { margin-bottom: 21px; }.field-group > label { display:block; margin-bottom:8px; font-size:.9rem; font-weight:680; }
.input-shell { display:flex; align-items:center; height:54px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .18s, box-shadow .18s; }.input-shell:focus-within { border-color:var(--blue-600); box-shadow:0 0 0 4px rgba(22,113,232,.12); }.input-shell > svg { flex:0 0 auto; width:19px; fill:#8290a5; }.input-shell input { flex:1; width:100%; height:100%; padding:0 12px; border:0; outline:0; color:var(--ink); background:transparent; font:inherit; }.input-shell input::placeholder { color:#9aa6b8; }
.password-toggle { display:grid; width:36px; height:36px; padding:0; place-items:center; border:0; border-radius:8px; color:var(--muted); background:transparent; cursor:pointer; }.password-toggle:hover { background:var(--blue-50); }.password-toggle svg { width:19px; fill:currentColor; }
.has-error .input-shell { border-color:var(--danger); }.field-error { display:block; margin-top:7px; color:var(--danger); font-size:.82rem; }
.form-options { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:4px 0 26px; font-size:.88rem; }.checkbox { display:flex; align-items:center; gap:9px; color:var(--muted); cursor:pointer; }.checkbox input { position:absolute; opacity:0; }.checkbox span { display:grid; width:18px; height:18px; place-items:center; border:1.5px solid #aab5c5; border-radius:5px; }.checkbox input:checked + span { border-color:var(--blue-600); background:var(--blue-600); }.checkbox input:checked + span:after { content:""; width:8px; height:4px; border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-1px); }
.primary-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:54px; border:0; border-radius:12px; color:#fff; background:linear-gradient(110deg,var(--blue-700),var(--blue-500)); box-shadow:0 12px 24px rgba(11,87,208,.22); font:inherit; font-weight:720; cursor:pointer; transition:transform .18s, box-shadow .18s; }.primary-button:hover { transform:translateY(-1px); box-shadow:0 15px 28px rgba(11,87,208,.3); }.primary-button:focus-visible,.password-toggle:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid rgba(22,113,232,.3); outline-offset:3px; }.primary-button:disabled { opacity:.7; cursor:wait; transform:none; }.primary-button svg { width:20px; fill:currentColor; }
.form-info { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:.9rem; }.form-info p { margin:0; }
.alert { display:flex; gap:10px; margin:-12px 0 24px; padding:12px 14px; border-radius:10px; background:var(--blue-50); color:var(--blue-900); font-size:.88rem; line-height:1.45; }.alert-error { background:#fff1f3; color:#9c2236; }.alert-success { background:#eefbf4;color:#176a43; }.alert-icon { display:grid; flex:0 0 20px; width:20px; height:20px; place-items:center; border-radius:50%; background:currentColor; color:#fff; font-size:.72rem;font-weight:800; }
.auth-footer { display:flex; justify-content:space-between; gap:20px; width:100%; padding:24px 40px; color:#8a97aa; font-size:.75rem; }.auth-footer span:last-child { display:flex; align-items:center; gap:10px; }.auth-footer i { width:3px;height:3px;border-radius:50%;background:#b9c2d0; }.auth-footer a { color:#718096;font-weight:550; }
@media (max-width: 820px) { .auth-shell { display:block; }.brand-panel { display:none; }.form-panel { min-height:100svh; }.mobile-brand { display:flex; align-items:center; gap:10px; margin-bottom:56px; color:var(--blue-900); font-weight:760; }.mobile-brand .brand-mark { width:32px;height:32px;background:var(--blue-700);box-shadow:none; }.mobile-brand .brand-mark:before,.mobile-brand .brand-mark:after,.mobile-brand .brand-mark span { background:#fff; }.form-wrap { padding-top:32px; }.locale-menu { top:34px; }.auth-footer { margin-top:auto; } }
@media (max-width: 520px) { .form-wrap { padding:24px 22px 28px; }.mobile-brand { margin-bottom:46px; }.locale-menu { top:27px;right:22px; }.auth-footer { padding:20px 22px;flex-direction:column;align-items:center;gap:10px; }.form-options { align-items:flex-start; }.form-heading { margin-bottom:28px; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important;transition:none!important; } }

/* Identidade Giusoft: preto, azul e verde-água do site institucional. */
.brand-panel { background: radial-gradient(ellipse at 0 100%, rgba(45,114,225,.19), transparent 60%), #000; }
.brand-logo { display:block; width:218px; max-width:100%; height:auto; }
.brand-copy .eyebrow { color:var(--teal); }
.brand-copy > p:last-child { color:#a4acba; }
.trust-note svg { fill:var(--teal); }
.trust-note span { color:#9aa5b5; }
.orb-one { background:var(--teal); box-shadow:0 0 32px rgba(79,188,178,.5); }
.orb-two { background:var(--blue-500); }
.form-panel { background:#f8fafc; }
.primary-button { background:linear-gradient(110deg, #245fbe, #2d72e1); }
.form-eyebrow { color:#245fbe!important; }
.checkbox input:focus-visible + span { outline:3px solid var(--blue-500); outline-offset:3px; }
.otp-device-select {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.otp-device-select:focus-visible {
    outline: 2px solid var(--blue-600);
    outline-offset: 2px;
}

#otp {
    font-variant-numeric: tabular-nums;
    letter-spacing: .15em;
}
@media (max-width:820px) { .mobile-brand .brand-logo { width:160px; } }
@media (max-width:380px) { .mobile-brand .brand-logo { width:130px; } }