.password-strength-card {
  background: #f8fbff;
  border: 1px solid #d8e6f7;
  border-radius: 12px;
  color: #47627d;
  padding: 14px 16px;
}

.password-strength-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.password-strength-heading strong {
  color: #1c4e91;
  font-size: 0.95rem;
}

.js-password-strength-label {
  color: #5a6a7c;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.password-strength-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #dbe7f3;
}

.password-strength-progress::-webkit-progress-bar {
  background: #dbe7f3;
  border-radius: 999px;
}

.password-strength-progress::-webkit-progress-value {
  border-radius: 999px;
  transition: all 0.2s ease;
}

.password-strength-progress::-moz-progress-bar {
  border-radius: 999px;
  transition: all 0.2s ease;
}

.password-strength-progress[data-strength-tone="empty"]::-webkit-progress-value,
.password-strength-progress[data-strength-tone="empty"]::-moz-progress-bar {
  background: #dbe7f3;
}

.password-strength-progress[data-strength-tone="weak"]::-webkit-progress-value,
.password-strength-progress[data-strength-tone="weak"]::-moz-progress-bar {
  background: linear-gradient(90deg, #d64545, #ef6a6a);
}

.password-strength-progress[data-strength-tone="fair"]::-webkit-progress-value,
.password-strength-progress[data-strength-tone="fair"]::-moz-progress-bar {
  background: linear-gradient(90deg, #d98f2b, #f0b45a);
}

.password-strength-progress[data-strength-tone="medium"]::-webkit-progress-value,
.password-strength-progress[data-strength-tone="medium"]::-moz-progress-bar {
  background: linear-gradient(90deg, #2f80ed, #59a2ff);
}

.password-strength-progress[data-strength-tone="strong"]::-webkit-progress-value,
.password-strength-progress[data-strength-tone="strong"]::-moz-progress-bar,
.password-strength-progress[data-strength-tone="very-strong"]::-webkit-progress-value,
.password-strength-progress[data-strength-tone="very-strong"]::-moz-progress-bar {
  background: linear-gradient(90deg, #1d7a46, #32a166);
}

.password-rule-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.password-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #5a6a7c;
  font-size: 0.9rem;
  line-height: 1.5;
}

.password-rule-item::before {
  content: "○";
  color: #9aa8b6;
  font-size: 0.95rem;
  line-height: 1.4;
}

.password-rule-item.is-passed {
  color: #1d7a46;
  font-weight: 600;
}

.password-rule-item.is-passed::before {
  content: "●";
  color: #1d7a46;
}

.password-rule-item.is-unmet::before {
  content: "○";
  color: #9aa8b6;
}

.password-rule-item-server {
  color: #4a6178;
}