/* Medidor de força de senha — Onda 5 / Fase 3.
   Folha PRÓPRIA porque as duas telas que o usam têm CSS diferente: a área do
   aluno (`aluno.css`, escura) e o checkout (`checkout.css`). Por isso nada
   aqui depende de token de tema — a trilha é cinza translúcido, que existe
   igual nos dois fundos, e o texto herda a cor de quem o abriga. */
.pw-meter { display: grid; gap: 6px; margin-top: 8px; }
.pw-meter-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pw-meter-bars span {
  height: 4px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .28);
  transition: background-color .18s ease;
}
/* A cor sai do PAI (`data-score`), não de cada segmento: assim os quatro
   pedaços acesos são da mesma cor e a barra se lê de relance. */
.pw-meter[data-score="0"] .pw-meter-bars span.on { background: #dc2626; }
.pw-meter[data-score="1"] .pw-meter-bars span.on { background: #ea580c; }
.pw-meter[data-score="2"] .pw-meter-bars span.on { background: #ca8a04; }
.pw-meter[data-score="3"] .pw-meter-bars span.on { background: #16a34a; }
.pw-meter[data-score="4"] .pw-meter-bars span.on { background: #15803d; }
.pw-meter-label, .pw-meter-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: inherit;
  opacity: .72;
}
.pw-meter-label { font-weight: 600; opacity: .85; }
.pw-meter-label:empty, .pw-meter-hint:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pw-meter-bars span { transition: none; }
}