#change-password-dialog { width: min(480px, calc(100vw - 32px)); box-sizing: border-box; margin: auto; inset: 0; transform: none; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--ws-line); border-radius: 18px; padding: 24px; background: var(--ws-surface); color: var(--ws-text); }
#change-password-dialog::backdrop { background: #09182d80; }
#change-password-form { display: grid; gap: 16px; }
#change-password-form h2, #change-password-form p { margin: 0; }
#change-password-form label { display: grid; gap: 6px; }
#change-password-form input:not([type=checkbox]) { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ws-control-line); border-radius: 8px; background: var(--ws-surface); color: var(--ws-text); font: inherit; }
#change-password-form .password-visibility { display: flex; align-items: center; gap: 8px; }
#change-password-form .password-visibility input { width: auto; }
#change-password-form small, #change-password-form > p { color: var(--ws-muted); }
#change-password-status[data-error=true] { color: var(--ws-danger); }
#change-password-form .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.password-change-button { cursor: pointer; font: inherit; color: var(--ws-text); background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: 8px; padding: 8px 12px; }

@media (max-width: 480px) { #change-password-dialog { padding: 16px; } #change-password-form { padding: 0; gap: 12px; } }