/* =====================================================
   password-meter.css — thanh đo độ mạnh mật khẩu
   Đặt sau ô mật khẩu trong form đăng ký (register.php).
   Màu theo mức: weak đỏ → medium vàng → strong xanh lá
   → very-strong xanh dương.
   ===================================================== */

.pw-meter {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .65rem;
}

.pw-meter__bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--stc-border, #e2e8f0);
    overflow: hidden;
}

.pw-meter__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--stc-border, #e2e8f0);
    transition: width .25s ease, background-color .25s ease;
}

.pw-meter__label {
    font-size: var(--stc-text-xs, .75rem);
    font-weight: var(--stc-weight-semibold, 600);
    min-width: 4.5rem;
    text-align: right;
    color: var(--stc-text-muted, #64748b);
    white-space: nowrap;
}

/* Mức màu — fill chỉ nền, label chỉ màu chữ (tránh chữ tàng hình cùng màu nền) */
.pw-meter__fill[data-level="weak"]        { background: #ef4444; }
.pw-meter__fill[data-level="medium"]      { background: #f59e0b; }
.pw-meter__fill[data-level="strong"]      { background: #22c55e; }
.pw-meter__fill[data-level="very-strong"] { background: #3b82f6; }

.pw-meter__label[data-level="weak"]        { color: #ef4444; }
.pw-meter__label[data-level="medium"]      { color: #d97706; }
.pw-meter__label[data-level="strong"]      { color: #16a34a; }
.pw-meter__label[data-level="very-strong"] { color: #2563eb; }

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    .pw-meter__fill {
        transition: none;
    }
}