:root{
  --ink:#07111f;
  --panel:#0b1728;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-soft:#eff6ff;
  --muted:#64748b;
  --line:#dbe3ee;
  --surface:#fff;
  --bg:#f4f7fb;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:#172033;background:var(--bg)}
body{min-height:100dvh}
button,input{font:inherit}
a{color:inherit}

.login-layout{
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(340px,38%) minmax(560px,62%);
  overflow:hidden;
}
.login-showcase{
  position:relative;
  overflow:hidden;
  min-height:100dvh;
  padding:36px clamp(34px,4.2vw,68px);
  color:#fff;
  background:
    radial-gradient(circle at 17% 13%,rgba(37,99,235,.34),transparent 31%),
    radial-gradient(circle at 88% 82%,rgba(14,165,233,.18),transparent 30%),
    linear-gradient(145deg,#06101d,#0b1728 64%,#0d2643);
  display:flex;
  flex-direction:column;
}
.login-showcase::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.login-brand,.mobile-brand{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:11px;
  width:max-content;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:1.18rem;
}
.login-brand strong span,.mobile-brand strong span{color:#60a5fa}
.brand-symbol{
  width:39px;
  height:39px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  box-shadow:0 10px 25px rgba(37,99,235,.35);
  font-size:21px!important;
}
.showcase-content{
  position:relative;
  z-index:1;
  width:min(100%,620px);
  margin:auto 0;
  padding:34px 0;
}
.intro-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(147,197,253,.24);
  border-radius:999px;
  background:rgba(37,99,235,.13);
  color:#bfdbfe;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.intro-badge .material-icons-round{font-size:16px}
.showcase-content h1{
  max-width:650px;
  margin:20px 0 16px;
  font-size:clamp(2.45rem,4.35vw,4.75rem);
  line-height:1.02;
  letter-spacing:-.055em;
}
.showcase-content>p{
  max-width:580px;
  margin:0;
  color:#b8c5d8;
  font-size:.93rem;
  line-height:1.72;
}
.showcase-highlights{
  display:grid;
  gap:10px;
  margin-top:28px;
}
.showcase-highlights article{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}
.showcase-highlights article>.material-icons-round{
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#93c5fd;
  background:rgba(37,99,235,.17);
  font-size:19px;
}
.showcase-highlights strong,.showcase-highlights small{display:block}
.showcase-highlights strong{font-size:.72rem;color:#f8fafc}
.showcase-highlights small{margin-top:3px;color:#9fb0c7;font-size:.61rem;line-height:1.45}
.showcase-footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px;
  color:#8fa2bb;
  font-size:.61rem;
}
.showcase-footer .material-icons-round{font-size:16px;color:#6ee7b7}

.login-workspace{
  min-width:0;
  min-height:100dvh;
  padding:0 clamp(22px,4.5vw,62px) 12px;
  background:linear-gradient(180deg,#fff,#f7f9fc);
  display:grid;
  grid-template-rows:62px minmax(0,1fr) auto;
}
.login-topbar{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(219,227,238,.7);
}
.secure-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#64748b;
  font-size:.62rem;
  font-weight:700;
}
.secure-status .material-icons-round{font-size:15px;color:#16a34a}
.login-topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}
.login-topbar-actions p{margin:0;color:#64748b;font-size:.68rem}
.login-topbar-actions p a{color:#1d4ed8;font-weight:800;text-decoration:none}
.login-topbar-actions p a:hover{text-decoration:underline}
.login-accessibility-slot{display:flex;align-items:center;flex:0 0 auto}
.login-accessibility-slot .ct-a11y-toolbar-button{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  flex-basis:36px!important;
  border-color:#d6e0ed!important;
  box-shadow:none!important;
  background:rgba(255,255,255,.76)!important;
}

.login-card-wrap{
  min-height:0;
  display:grid;
  place-items:center;
  padding:22px 0 14px;
}
.login-card{
  width:min(100%,470px);
  padding:29px 31px 25px;
  border:1px solid #e1e8f1;
  border-radius:23px;
  background:rgba(255,255,255,.96);
  box-shadow:0 25px 70px rgba(15,23,42,.075);
}
.mobile-brand{display:none;color:#172033;margin-bottom:25px}
.card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:23px;
}
.heading-kicker{
  display:block;
  color:#2563eb;
  font-size:.6rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card-heading h2{
  margin:7px 0 7px;
  color:#172033;
  font-size:1.72rem;
  line-height:1.1;
  letter-spacing:-.04em;
}
.card-heading p{max-width:325px;margin:0;color:#718096;font-size:.72rem;line-height:1.55}
.security-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid #bbf7d0;
  border-radius:999px;
  background:#f0fdf4;
  color:#15803d;
  font-size:.55rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.security-chip .material-icons-round{font-size:15px}
.form-field{margin-bottom:14px}
.field-label{
  display:block;
  margin:0 0 7px;
  color:#334155;
  font-size:.7rem;
  font-weight:760;
}
.field-control{
  min-height:47px;
  border:1px solid #cfd9e6;
  border-radius:11px;
  display:flex;
  align-items:center;
  padding:0 12px;
  background:#f9fbfd;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.field-control:hover{border-color:#afbdd0}
.field-control:focus-within{
  border-color:#60a5fa;
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.09);
}
.field-control>.material-icons-round{flex:0 0 auto;color:#8795a8;font-size:19px}
.field-control input{
  flex:1;
  min-width:0;
  height:45px;
  border:0;
  outline:0;
  padding:0 9px;
  background:transparent;
  color:#172033;
  font-size:.78rem;
}
.field-control input::placeholder{color:#a0adbd}
/* O campo é um controle composto: o foco visual pertence ao contêiner, não ao input interno. */
.login-card .field-control input:focus,
.login-card .field-control input:focus-visible{
  outline:none!important;
  outline-offset:0!important;
  box-shadow:none!important;
}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #f9fbfd inset!important;-webkit-text-fill-color:#172033!important}
.password-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.icon-button,.link-button{border:0;background:transparent;cursor:pointer}
.icon-button{width:34px;height:34px;flex:0 0 34px;border-radius:8px;display:grid;place-items:center;color:#64748b}
.icon-button:hover{background:#edf4ff;color:#1d4ed8}
.icon-button .material-icons-round{font-size:19px}
.link-button{padding:0;color:#2563eb;font-size:.63rem;font-weight:780}
.link-button:hover{text-decoration:underline}
.login-options{margin:1px 0 17px}
.remember-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  color:#536176;
  font-size:.65rem;
  cursor:pointer;
}
.remember-row input{width:15px;height:15px;margin:0;accent-color:#2563eb}
.private-device-note{
  display:flex;
  align-items:center;
  gap:5px;
  margin:7px 0 0 23px;
  color:#8a98aa;
  font-size:.57rem;
}
.private-device-note .material-icons-round{font-size:14px;color:#64748b}
.primary-button{
  width:100%;
  min-height:45px;
  border:0;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  cursor:pointer;
  font-size:.72rem;
  font-weight:830;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.primary-button:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(37,99,235,.27)}
.primary-button:disabled{opacity:.65;cursor:wait;transform:none;box-shadow:none}
.primary-button .material-icons-round{font-size:18px}
.status-message{
  min-height:16px;
  margin:8px 0 0;
  text-align:center;
  color:#64748b;
  font-size:.61rem;
}
.login-support{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid #e5ebf3;
  color:#718096;
}
.login-support>.material-icons-round{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#eff6ff;
  color:#2563eb;
  font-size:17px;
}
.login-support p{margin:0;font-size:.61rem;line-height:1.45}
.login-support a{color:#1d4ed8;font-weight:780;text-decoration:none}
.login-support a:hover{text-decoration:underline}
.login-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  padding:0 0 4px;
  color:#8a98aa;
  text-align:center;
  font-size:.56rem;
  line-height:1.45;
}
.login-legal a{color:#64748b;text-decoration:none}
.login-legal a:hover{text-decoration:underline}
.swal2-container{z-index:var(--ct-layer-dialog,2100)!important}

@media(max-width:1080px){
  .login-layout{grid-template-columns:minmax(310px,36%) minmax(560px,64%)}
  .login-showcase{padding:30px}
  .showcase-content h1{font-size:2.65rem}
  .showcase-content>p{font-size:.82rem}
  .login-workspace{padding-inline:26px}
}
@media(max-width:900px){
  .login-layout{display:block;overflow:visible}
  .login-showcase{display:none}
  .login-workspace{min-height:100dvh;padding:0 22px 14px}
  .mobile-brand{display:inline-flex}
  .login-card-wrap{padding-top:16px}
}
@media(max-width:620px){
  .login-workspace{padding:0 14px 12px;grid-template-rows:56px minmax(0,1fr) auto}
  .login-topbar{height:56px}
  .secure-status{display:none}
  .login-topbar{justify-content:flex-end}
  .login-topbar-actions{gap:7px}
  .login-topbar-actions p{font-size:.62rem}
  .login-accessibility-slot .ct-a11y-toolbar-button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex-basis:34px!important;
  }
  .login-card-wrap{align-items:start;padding:12px 0 10px}
  .login-card{padding:22px 18px;border-radius:19px}
  .mobile-brand{margin-bottom:20px}
  .card-heading{margin-bottom:19px}
  .card-heading h2{font-size:1.48rem}
  .security-chip{display:none}
  .login-legal{font-size:.53rem}
}
@media(max-height:720px) and (min-width:901px){
  .login-showcase{padding-block:25px}
  .showcase-content{padding:16px 0}
  .showcase-content h1{font-size:2.55rem;margin:14px 0 10px}
  .showcase-highlights{margin-top:17px;gap:7px}
  .showcase-highlights article{padding:8px 10px}
  .login-workspace{grid-template-rows:52px minmax(0,1fr) auto;padding-bottom:7px}
  .login-topbar{height:52px}
  .login-card-wrap{padding:10px 0 7px}
  .login-card{padding:23px 27px 20px}
  .card-heading{margin-bottom:17px}
  .form-field{margin-bottom:11px}
  .login-options{margin-bottom:13px}
  .login-support{margin-top:13px;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}

.login-continuation{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px;margin:0 0 18px;padding:11px 12px;border:1px solid #bfdbfe;border-radius:13px;background:#eff6ff;color:#1e3a8a}.login-continuation[hidden]{display:none}.login-continuation>.material-icons-round{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#dbeafe;color:#2563eb;font-size:18px}.login-continuation strong,.login-continuation small{display:block}.login-continuation strong{font-size:.7rem}.login-continuation small{margin-top:3px;color:#50698e;font-size:.61rem;line-height:1.45}