/* ── Password field with eye toggle ── */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper .form-input { padding-right: 42px; }

.input-eye {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0 5px 5px 0;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.12s;
  flex-shrink: 0;
}

.input-eye:hover { color: var(--color-text); background: var(--color-bg); }

.input-eye svg { display: block; }

.input-eye:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* ── Password match hint ── */
.input-hint {
  font-size: 12px;
  min-height: 16px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.input-hint[data-state="idle"]     { color: transparent; }
.input-hint[data-state="match"]    { color: var(--color-success); }
.input-hint[data-state="mismatch"] { color: var(--color-danger); }

.input-hint[data-state="match"]::before    { content: "✓"; font-weight: 600; }
.input-hint[data-state="mismatch"]::before { content: "✗"; font-weight: 600; }