/* Tela de acesso Salwatts: marca em destaque e cartão de vidro. */
.login-view {
  position: relative;
  isolation: isolate;
  gap: 20px;
  padding: 42px 24px;
  overflow: hidden;
  background: radial-gradient(circle at 55% 23%, #f23b46 0, rgba(242, 59, 70, .18) 23%, transparent 44%), linear-gradient(132deg, #65030a 0%, #ba0d18 40%, #ed1c2b 100%);
}
.login-view::before, .login-view::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 120vw;
  height: 50vw;
  border: 2px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  transform: rotate(-16deg);
}
.login-view::before { left: -31vw; bottom: -29vw; box-shadow: 0 0 40px rgba(255, 255, 255, .06); }
.login-view::after { right: -37vw; top: 18vw; }
.login-brand { flex-direction: column; gap: 4px; color: #fff; font-size: 25px; font-weight: 600; line-height: 1.15; text-shadow: 0 2px 10px rgba(72, 0, 4, .25); }
.login-brand img { width: 278px; height: 154px; max-width: 76vw; padding: 0; background: transparent; border-radius: 0; filter: drop-shadow(0 8px 15px rgba(70, 0, 5, .17)); }
.login-card {
  width: min(560px, 92vw);
  padding: 32px 56px 36px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(72, 0, 6, .35));
  color: #fff;
  box-shadow: 0 20px 42px rgba(64, 0, 5, .24), inset 1px 1px 0 rgba(255, 255, 255, .38);
  backdrop-filter: blur(20px) saturate(122%);
}
.security-lock { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px; border: 1px solid rgba(255, 255, 255, .68); border-radius: 50%; background: rgba(255, 255, 255, .1); }
.security-lock svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.login-card h1 { text-align: center; font-size: 27px; }
.login-card > p:not(.eyebrow) { max-width: 390px; margin: 10px auto 0; color: rgba(255, 255, 255, .92); text-align: center; }
.login-card form { margin-top: 23px; }
.login-card label { color: #fff; }
.login-card input { padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .57); border-radius: 11px; outline-color: #fff; background: rgba(130, 29, 37, .48); color: #fff; }
.login-card input::placeholder { color: rgba(255, 255, 255, .7); }
.login-card button { border: 1px solid rgba(255, 255, 255, .88); border-radius: 11px; background: #fff; color: #c81420; box-shadow: 0 8px 16px rgba(77, 0, 5, .16); }
.login-card button:hover { background: #fff3f3; }
.message { color: #fff; text-align: center; }
.forgot-password { color: #fff; font-size: 13px; font-weight: 600; text-align: center; }
@media (max-width: 760px) {
  .login-view { gap: 17px; padding: 28px 18px; }
  .login-brand { font-size: 20px; }
  .login-brand img { width: 235px; height: 130px; }
  .login-card { padding: 27px 24px 29px; }
  .login-card h1 { font-size: 25px; }
}