/* v278r1 — usabilidade segura de senhas */
.va-password-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
  width:100%;
}
.va-password-wrap>input{min-width:0;width:100%}
.va-password-toggle{
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:#13293a;
  color:#dce9f4;
  font:800 .68rem/1 system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.va-password-toggle:hover{border-color:rgba(255,255,255,.32);background:#18364b}
.va-password-toggle:focus-visible{outline:2px solid #ffb23f;outline-offset:2px}
.va-credential-card{display:grid;gap:12px;width:min(460px,calc(100vw - 26px))}
.va-credential-summary{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:8px 10px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:#0e2232;
}
.va-credential-summary span{color:#9fb3c2;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.va-credential-summary strong,.va-credential-summary code{
  min-width:0;
  overflow-wrap:anywhere;
  color:#fff;
  font-size:.86rem;
}
.va-credential-summary code{padding:5px 7px;border-radius:8px;background:#071621}
.va-password-generate-row{display:flex;justify-content:flex-end;margin-top:-3px}
.va-password-generate{min-height:38px}
@media(max-width:520px){
  .va-password-wrap{grid-template-columns:minmax(0,1fr) auto}
  .va-password-toggle{padding:0 8px;font-size:.62rem}
  .va-credential-summary{grid-template-columns:1fr;gap:4px}
  .va-credential-summary span{margin-top:5px}
}