.profile-avatar {
    position: relative;
    display: inline-grid;
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    place-items: center;
    overflow: hidden;
    border: 2px solid #e6d7b9;
    border-radius: 50%;
    background: #f4ead4;
    color: #805618;
    font-size: 1.75rem;
    font-weight: 600;
}
.profile-avatar--small {
    flex-basis: 2rem;
    width: 2rem;
    height: 2rem;
    font-size: .85rem;
}
.profile-avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 575.98px) {
    .account-panel > .profile-avatar {
        flex-basis: 3.5rem;
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.3rem;
    }
}

/* Personal account settings retain the shared form controls and brand tokens. */
.personal-details-notice { line-height: 1.85; overflow-wrap: anywhere; }
.personal-details-section + .personal-details-section { border-top: 1px solid var(--sb-line); margin-top: 1.75rem; padding-top: 1.75rem; }
.personal-details-section .section-title { margin-bottom: 1rem; }
.personal-details-summary { padding: .85rem 1rem; border-radius: .75rem; background: var(--sb-bg, #faf7f0); overflow-wrap: anywhere; line-height: 1.8; }
.personal-details-privacy .form-check { line-height: 1.85; }
.personal-details-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--sb-line); }
@media (max-width: 575.98px) {
    .personal-details-actions { flex-direction: column-reverse; align-items: stretch; }
    .personal-details-actions .btn { width: 100%; }
}