*{box-sizing:border-box}.auth-body{margin:0;min-height:100vh;display:grid;place-items:center;background:#0b1d33;font-family:Arial,sans-serif;color:#eaf2ff}.auth-card{width:min(420px,92vw);background:#102b4b;padding:32px;border-radius:16px;box-shadow:0 18px 50px #0005}.auth-card h1{margin:0 0 8px}.auth-card p{opacity:.8}.auth-card form,.security-form{display:grid;gap:10px;margin-top:22px}.auth-card input,.security-form input,.user-create input,.user-create select{width:100%;padding:12px;border:1px solid #365a7e;border-radius:9px;background:#0d223b;color:#fff}.auth-card button,.security-form button,.user-create button,.user-row button{padding:11px 16px;border:0;border-radius:9px;background:#2f80ed;color:white;font-weight:700;cursor:pointer}.qr{display:block;width:190px;margin:18px auto;background:#fff;padding:8px;border-radius:10px}.auth-card code{display:block;text-align:center;overflow-wrap:anywhere}.msg{padding:10px 12px;border-radius:8px;margin:12px 0}.msg.error{background:#5d2028}.msg.ok{background:#164d35}.account-grid{display:grid;grid-template-columns:120px 1fr;gap:12px}.account-grid dt{font-weight:700}.security-link{display:inline-block;margin-top:16px}.user-create{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:18px 0}.user-list{display:grid;gap:10px}.user-row{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:10px;background:rgba(255,255,255,.04)}.user-row span{display:block;opacity:.75;margin-top:4px}.user-row .secondary{background:#274765}@media(max-width:1000px){.user-create{grid-template-columns:1fr 1fr}}


/* =========================================================
   HMB - SENHAS
   OLHO NATIVO DO NAVEGADOR SEMPRE BRANCO
   ========================================================= */

input[type="password"] {
  color-scheme: dark;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  filter: invert(1) brightness(2) !important;
  opacity: 1 !important;
}

.password-toggle,
.password-toggle i,
.input-action,
.input-action i {
  color: #ffffff !important;
}


/* =========================================================
   HMB - CONTROLE GLOBAL DE SENHA
   ========================================================= */

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}


.hmb-password-field {
  position: relative;

  width: 100%;
}


.hmb-password-field > input {
  width: 100%;

  padding-right: 48px !important;
}


.hmb-password-toggle {
  position: absolute;

  top: 50%;
  right: 12px;

  transform: translateY(-50%);

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  background: transparent;

  color: #ffffff !important;

  cursor: pointer;

  appearance: none;

  box-shadow: none;
}


.hmb-password-toggle i {
  color: #ffffff !important;

  font-size: 16px;

  opacity: 1;
}


.hmb-password-toggle:hover,
.hmb-password-toggle:hover i {
  color: #ffffff !important;

  background: transparent;
}


/* =========================================================
   HMB - LOGIN
   ========================================================= */

.auth-body {
  margin: 0;

  min-height: 100vh;

  background:
    #071424;

  color:
    #edf7ff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


.hmb-login-page {
  width: min(530px, calc(100vw - 36px));

  margin: 0 auto;

  padding:
    58px 0
    48px;
}


.hmb-login-brand {
  display: flex;
  align-items: center;

  gap: 20px;

  margin:
    0 36px
    72px;
}


.hmb-auth-logo {
  position: relative;

  width: 80px;
  height: 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  flex: 0 0 80px;

  border-radius: 20px;

  background:
    linear-gradient(
      90deg,
      #183a82 0%,
      #183a82 25%,
      #285dd6 25%,
      #285dd6 50%,
      #268ce6 50%,
      #268ce6 75%,
      #43b9eb 75%,
      #43b9eb 100%
    );

  box-shadow:
    0 10px 28px
    rgba(0, 100, 220, .13);
}


.hmb-auth-logo::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      transparent 55%
    );
}


.hmb-auth-logo span {
  position: relative;
  z-index: 1;

  color: #ffffff;

  font-size: 23px;
  line-height: 1;
  font-weight: 900;

  letter-spacing: -.05em;
}


.hmb-login-brand-copy {
  min-width: 0;
}


.hmb-login-brand-copy strong,
.hmb-login-brand-copy span {
  display: block;
}


.hmb-login-brand-copy strong {
  color: #ffffff;

  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
}


.hmb-login-brand-copy span {
  margin-top: 9px;

  color: #8fa9c3;

  font-size: 16px;
  line-height: 1.4;
}


.auth-card.hmb-login-card {
  width: 100%;

  padding:
    42px 36px
    34px;

  border:
    1px solid #29425d;

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      #10243b,
      #0c1c30
    );

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, .18);
}


.hmb-login-heading h1 {
  margin: 0;

  color: #ffffff;

  font-size: 38px;
  line-height: 1.05;
  font-weight: 800;
}


.hmb-login-heading p {
  margin:
    12px 0 0;

  color: #758ca3;

  font-size: 16px;
}


.hmb-login-card form {
  display: grid;

  gap: 18px;

  margin-top:
    24px;
}


.auth-field {
  display: grid;

  gap: 8px;
}


.auth-field label {
  color: #ffffff;

  font-size: 15px;
}


.auth-card.hmb-login-card
input {
  width: 100%;

  height: 58px;

  padding:
    0 15px;

  border:
    1px solid #294967;

  border-radius:
    12px;

  outline:
    none;

  background:
    #07192a;

  color:
    #ffffff;

  font-size:
    15px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.auth-card.hmb-login-card
input:focus {
  border-color:
    #18acf0;

  box-shadow:
    0 0 0 3px
    rgba(24, 172, 240, .13);
}


.hmb-login-submit {
  width: 100%;

  min-height:
    58px;

  margin-top:
    11px;

  border:
    1px solid
    rgba(57, 191, 248, .45);

  border-radius:
    12px;

  background:
    linear-gradient(
      180deg,
      #27abe6,
      #1496d4
    );

  color:
    #ffffff;

  font-size:
    17px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform .15s ease,
    filter .15s ease;
}


.hmb-login-submit:hover {
  filter:
    brightness(1.08);
}


.hmb-login-submit:active {
  transform:
    translateY(1px);
}


.hmb-forgot-password {
  display: block;

  width: fit-content;

  margin:
    28px auto
    0;

  color:
    #38adf0;

  font-size:
    16px;

  font-weight:
    700;

  text-decoration:
    none;
}


.hmb-forgot-password:hover {
  text-decoration:
    underline;
}


.auth-card.hmb-login-card
.msg {
  margin:
    20px 0 0;
}


@media (max-width: 600px) {

  .hmb-login-page {
    padding-top:
      38px;
  }


  .hmb-login-brand {
    margin:
      0 18px
      40px;

    gap:
      14px;
  }


  .hmb-auth-logo {
    width: 62px;
    height: 62px;

    flex-basis: 62px;

    border-radius:
      16px;
  }


  .hmb-auth-logo span {
    font-size:
      18px;
  }


  .hmb-login-brand-copy strong {
    font-size:
      27px;
  }


  .hmb-login-brand-copy span {
    font-size:
      13px;
  }


  .auth-card.hmb-login-card {
    padding:
      30px 22px;
  }


  .hmb-login-heading h1 {
    font-size:
      31px;
  }

}



/* =========================================================
   HMB - LOGIN COMPACTO
   ========================================================= */

.hmb-login-page {
  width: min(440px, calc(100vw - 32px));
  padding: 36px 0 32px;
}


.hmb-login-brand {
  gap: 14px;
  margin: 0 24px 38px;
}


.hmb-auth-logo {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  border-radius: 15px;
}


.hmb-auth-logo span {
  font-size: 17px;
}


.hmb-login-brand-copy strong {
  font-size: 25px;
}


.hmb-login-brand-copy span {
  margin-top: 5px;

  font-size: 12px;
}


.auth-card.hmb-login-card {
  padding: 28px 26px 24px;

  border-radius: 16px;
}


.hmb-login-heading h1 {
  font-size: 27px;
}


.hmb-login-heading p {
  margin-top: 7px;

  font-size: 13px;
}


.hmb-login-card form {
  gap: 13px;

  margin-top: 19px;
}


.auth-field {
  gap: 6px;
}


.auth-field label {
  font-size: 12px;
}


.auth-card.hmb-login-card input {
  height: 44px;

  padding: 0 12px;

  border-radius: 9px;

  font-size: 13px;
}


.hmb-login-submit {
  min-height: 44px;

  margin-top: 6px;

  border-radius: 9px;

  font-size: 13px;
}


.hmb-forgot-password {
  margin-top: 20px;

  font-size: 13px;
}


.auth-card.hmb-login-card .msg {
  margin-top: 14px;

  font-size: 12px;
}


@media (max-width: 600px) {

  .hmb-login-page {
    width: min(400px, calc(100vw - 24px));
    padding-top: 24px;
  }

  .hmb-login-brand {
    margin: 0 16px 28px;
  }

  .auth-card.hmb-login-card {
    padding: 24px 20px;
  }

}


/* =========================================================
   HMB - AUTH
   ÍCONES DE SENHA SEMPRE BRANCOS
   ========================================================= */

.hmb-password-toggle,
.hmb-password-toggle *,
.hmb-password-toggle i,
.hmb-password-toggle svg,
.hmb-password-toggle svg *,
.password-toggle,
.password-toggle *,
.password-toggle i,
.password-toggle svg,
.password-toggle svg *,
.hmb-password-field button,
.hmb-password-field button *,
.hmb-password-field i,
.hmb-password-field svg,
.hmb-password-field svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

/* ==========================================================
   MONITOR BACKUP - LOGIN LOGO
   ========================================================== */

.hmb-login-brand .monitorbackup-logo {
    display: block;
    width: auto;
    max-width: 250px;
    height: 72px;
    object-fit: contain;
}


/* ==========================================================
   MONITOR BACKUP - AJUSTE FINAL DA LOGO NO LOGIN
   ========================================================== */

.hmb-login-brand .monitorbackup-logo {
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

.hmb-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}


/* ==========================================================
   MONITOR BACKUP - LOGIN SEM TEXTO AO LADO DA LOGO
   ========================================================== */

.hmb-login-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

.hmb-login-brand .monitorbackup-logo {
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

/* esconde qualquer bloco de texto ao lado da logo */
.hmb-login-brand > :not(.monitorbackup-logo) {
    display: none !important;
}