<form class="lf-show" aria-label="Sign in with password reveal">
  <h2 class="lf-show-title">Sign in</h2>
  <label class="lf-show-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
  </label>
  <label class="lf-show-row lf-show-row-pw">
    <span>Password</span>
    <span class="lf-show-pw">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
      <button
        type="button"
        class="lf-show-eye"
        aria-label="Show password"
        aria-pressed="false"
        data-lf-eye
      >
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <path
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
          />
        </svg>
      </button>
    </span>
  </label>
  <div class="lf-show-meta">
    <label><input type="checkbox" name="remember" /> Remember me</label>
    <a href="#">Forgot password?</a>
  </div>
  <button type="submit" class="lf-show-submit">Sign in</button>
</form>

.lf-show {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px 24px;
  display: grid;
  gap: 12px;
}
.lf-show-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-show-row {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-show-row input:focus {
  border-color: #7c6cff;
}
.lf-show-pw {
  position: relative;
  display: block;
}
.lf-show-pw input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 38px;
}
.lf-show-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b8b6d4;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.lf-show-eye:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.04);
}
.lf-show-eye[aria-pressed="true"] {
  color: #7c6cff;
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.08);
}
.lf-show-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-show-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-show-submit {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-show-submit:hover {
  transform: translateY(-1px);
}

/* ─── tiny JS to toggle reveal ─── */
/*
document.querySelectorAll('[data-lf-eye]').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.previousElementSibling;
    const next  = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    btn.setAttribute('aria-pressed', String(next === 'text'));
    btn.setAttribute('aria-label', next === 'text' ? 'Hide password' : 'Show password');
  });
});
*/

// Show / hide password toggle
document.querySelectorAll('[data-lf-eye]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var input = btn.previousElementSibling;
    if (!input) return;
    var next = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    var revealed = next === 'text';
    btn.setAttribute('aria-pressed', String(revealed));
    btn.setAttribute('aria-label', revealed ? 'Hide password' : 'Show password');
  });
});