/* PIN Display Component */
.pin-display {
  align-items: center;
  display: flex;
  gap: var(--size-2);
}

.pin-output {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

/* Simple visibility utility */
.display-none {
  display: none !important;
}

/* CSS-only icon state management */
.pin-display .icon--eye { display: inline-block; }
.pin-display .icon--eye-off { display: none; }

.pin-display.pin-revealed .icon--eye { display: none; }
.pin-display.pin-revealed .icon--eye-off { display: inline-block; }