<div class="input-group">
  <label class="input-label" for="pwd">Password</label>
  <div class="pwd-wrap">
    <input class="input" id="pwd" type="password" placeholder="Enter password" oninput="checkStrength(this.value)" />
    <button type="button" class="pwd-toggle" onclick="togglePwd()">👁</button>
  </div>
  <div class="strength-bars">
    <div class="strength-bar" id="b1"></div>
    <div class="strength-bar" id="b2"></div>
    <div class="strength-bar" id="b3"></div>
    <div class="strength-bar" id="b4"></div>
  </div>
  <p class="input-hint" id="strengthLabel">—</p>
</div>

<style>
.pwd-wrap { position: relative; }
.pwd-wrap .input { width: 100%; padding-right: 2.75rem; box-sizing: border-box; }
.pwd-toggle {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.5;
}
.strength-bars { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.strength-bar { flex: 1; height: 3px; border-radius: 9999px; background: var(--border); transition: background 0.3s; }
.strength-bar.weak { background: #EF4444; }
.strength-bar.fair { background: #F59E0B; }
.strength-bar.good { background: #3B82F6; }
.strength-bar.strong { background: #22C55E; }
</style>

<script>
function checkStrength(val) {
  const bars = [b1, b2, b3, b4];
  const label = document.getElementById('strengthLabel');
  bars.forEach(b => b.className = 'strength-bar');
  let score = 0;
  if (val.length >= 8) score++;
  if (/[A-Z]/.test(val)) score++;
  if (/[0-9]/.test(val)) score++;
  if (/[^A-Za-z0-9]/.test(val)) score++;
  const cls = ['weak','fair','good','strong'];
  const labels = ['Weak','Fair','Good','Strong'];
  for (let i = 0; i < score; i++) bars[i].classList.add(cls[score - 1]);
  label.textContent = score ? labels[score - 1] : '—';
}
function togglePwd() {
  const i = document.getElementById('pwd');
  i.type = i.type === 'password' ? 'text' : 'password';
}
</script>