.user-identity {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}
.user-name { min-width: 0; overflow-wrap: anywhere; }
.user-identity:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.avatar { object-fit: cover; overflow: hidden; vertical-align: middle; border: 1px solid var(--color-border); background: var(--color-surface-alt); }
.avatar-sm { width: 24px; height: 24px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; }
.account-menu-trigger > .avatar { width: 30px; height: 30px; }
.user-card {
    position: fixed;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: .85rem;
    width: max-content;
    max-width: min(340px, calc(100vw - 24px));
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 8px 32px rgb(0 0 0 / 18%);
    direction: rtl;
    text-align: start;
    font-size: .9rem;
    line-height: 1.7;
}
.user-card[hidden] { display: none; }
.user-card-info { display: grid; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.user-card-name { font-size: 1rem; }
.user-card-username, .user-card-details { color: var(--color-muted); font-size: .8rem; }
.profile-photo { display: flex; align-items: center; gap: 1rem; margin-block: 1rem 1.5rem; }
.profile-photo p { margin: .25rem 0; }
.profile-photo-help, .profile-field-help { color: var(--color-muted); font-size: .85rem; }
.profile-photo-preview .avatar { display: block; }
.profile-upload-status { min-height: 1.5em; }
.profile-upload-status:empty { display: none; }
.profile-account-card { max-width: 560px; }
.profile-account-card input[type="file"] { width: 100%; min-width: 0; }
.profile-account-card input::file-selector-button { font: inherit; cursor: pointer; margin-inline-end: .6rem; }
.profile-account-card .form-field:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; }
.profile-account-card input[type="checkbox"] { width: auto; }