.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; }
.account-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; max-width: 1120px; margin-inline: auto; }
.account-layout > .card { margin-bottom: 0; }
.account-layout h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.account-layout h3 { margin: 0 0 .75rem; font-size: 1rem; }
.account-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.account-settings-section + .account-settings-section { border-block-start: 1px solid var(--color-border); margin-block-start: 1.5rem; padding-block-start: 1.5rem; }
#account-settings { scroll-margin-block-start: 6rem; }
.profile-photo > div { min-width: 0; }
.profile-photo-preview { flex-shrink: 0; }
.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; }
@media (max-width: 800px) {
    .account-layout { grid-template-columns: minmax(0, 1fr); }
}