.pw {
    position: relative;
    display: block;
    width: 100%;
}

.pw input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px 0 48px;
    border: 1px solid var(--ds-line-strong, #d5d9e2);
    border-radius: 10px;
    background: var(--ds-surface, #fff);
    color: var(--ds-ink, #14213d);
    font: inherit;
    font-size: 16px;
    direction: ltr;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pw input:focus {
    outline: none;
    border-color: var(--ds-primary, #f5620e);
    box-shadow: 0 0 0 3px var(--ds-primary-soft, #fff2e8);
}

.pw.is-error input { border-color: var(--ds-danger, #d92d20); }

.pw__eye {
    position: absolute;
    top: 50%;
    left: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-muted, #54607a);
    font-size: 20px;
    cursor: pointer;
}

.pw__eye:hover { background: var(--ds-surface-hover, #f3f5f7); color: var(--ds-ink, #14213d); }