/* Shared show/hide password toggle styling.
 *
 * The button is rendered server-side directly after its password input,
 * inside a position:relative wrapper that spans the input (the auth pages
 * use .auth-input-wrap; the settings/password forms wrap input + button in
 * a <div class="relative">). The input carries .password-toggle-input so
 * typed text never runs underneath the toggle, even without JavaScript.
 *
 * Progressive enhancement: the button is hidden by default (display:none)
 * and only becomes visible once the shared script has successfully
 * enhanced it (it sets data-password-toggle-enhanced="true"). Without
 * JavaScript the page therefore stays a plain masked password field with
 * no misleading active-looking control.
 */
input.password-toggle-input {
    padding-right: 3.25rem;
}

.password-visibility-toggle {
    display: none;
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.password-visibility-toggle[data-password-toggle-enhanced="true"] {
    display: inline-flex;
}

.password-visibility-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.password-visibility-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: -2px;
    background: rgba(255, 255, 255, 0.06);
}

.password-visibility-toggle svg {
    width: 20px;
    height: 20px;
}