/* Password field wrapper + eye show/hide toggle */
.pwd-field {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.pwd-field > input[type="password"],
.pwd-field > input[type="text"] {
  position: relative;
  z-index: 0;
  width: 100%;
  padding-right: 2.85rem !important;
}

.pwd-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  color: var(--color-text-secondary, #b8c5d6);
  opacity: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.pwd-toggle:hover {
  color: var(--color-text-primary, #f8fafc);
  background: rgba(123, 66, 246, 0.12);
}

.pwd-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(123, 66, 246, 0.45);
}

.pwd-toggle__icon {
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}

.pwd-toggle__svg {
  display: block;
  flex-shrink: 0;
}

/* Password hidden → eye (click to show) */
.pwd-field:not([data-pwd-visible="true"]) .pwd-toggle__icon--show {
  display: inline-flex;
}

/* Password visible → eye-off (click to hide) */
.pwd-field[data-pwd-visible="true"] .pwd-toggle__icon--hide {
  display: inline-flex;
}

html[data-theme="light"] .pwd-toggle {
  color: #64748b;
}

html[data-theme="light"] .pwd-toggle:hover {
  color: #334155;
  background: rgba(109, 40, 217, 0.1);
}

.auth-card .pwd-field,
.login-card .pwd-field {
  width: 100%;
}

.ob-form .ob-field > .pwd-field {
  margin-top: 0.35rem;
}

.ob-form .pwd-field > input {
  margin-top: 0;
}

.login-card .pwd-field > input.input {
  width: 100%;
}