.private-auth-shell .private-password-control {
  position:relative;
  min-width:0;
}

.private-auth-shell .private-password-control > input[type="password"],
.private-auth-shell .private-password-control > input[type="text"] {
  padding-right:64px;
}

/* The shared token sheet gives text inputs a legacy !important treatment.
   Keep a simple private-account field visually identical after the type flip;
   the more specific otter-flow rules continue to own the two-panel variant. */
.private-auth-shell:not(.otter-login) .private-password-control > input[type="text"] {
  border-radius:8px!important;
  background:var(--hws-surface)!important;
  color:var(--hws-foreground)!important;
  box-shadow:none!important;
}

.private-auth-shell .private-password-visibility {
  position:absolute;
  top:50%;
  right:4px;
  display:inline-grid;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  margin:0;
  padding:0 6px;
  border:0;
  border-radius:8px;
  color:var(--account-green, var(--hws-primary, #2f8069));
  background:transparent;
  font:inherit;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transform:translateY(-50%);
  touch-action:manipulation;
}

.private-auth-shell .private-password-visibility__icon {
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
}

.private-auth-shell .private-password-visibility:hover {
  background:var(--account-green-wash, var(--hws-accent-subtle, #edf6ef));
}

.private-auth-shell .private-password-visibility:focus-visible {
  outline:2px solid var(--account-focus, var(--hws-focus, currentColor));
  outline-offset:1px;
}

@media (forced-colors:active) {
  .private-auth-shell .private-password-visibility:hover {
    background:ButtonFace;
  }
}

/* The injected controls on the approved otter flow use the same visual
   treatment as the login page's existing #otter-reveal.  Keep this scoped so
   legacy/simple account pages retain their existing token colors. */
.private-auth-shell.otter-login .private-password-visibility {
  right:2px;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  border-radius:50%;
  padding:8px;
  color:#6b7d71;
  background:transparent;
}

.private-auth-shell.otter-login .private-password-visibility[aria-pressed="true"] {
  background:#eaf5ed;
  color:var(--otter-green);
}

.private-auth-shell.otter-login .private-password-visibility:focus-visible {
  outline:2px solid var(--otter-focus);
  outline-offset:4px;
}

@media (hover:hover) and (pointer:fine) {
  .private-auth-shell.otter-login .private-password-visibility:hover {
    background:#edf6ef;
    color:var(--otter-green);
  }
}