.profile-menu .avatar {
  display:grid;
  place-items:center;
  padding:0;
  overflow:hidden;
  width:40px;
  height:40px;
  flex-shrink:0;
}
.profile-menu .avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-menu .avatar:focus-visible { outline:2px solid #aac8f5; outline-offset:3px; }
.profile-menu .profile-dropdown { width:290px; max-width:calc(100vw - 24px); padding:16px; }
.profile-identity { display:flex; align-items:center; gap:12px; }
.profile-identity > div { min-width:0; overflow-wrap:anywhere; }
#profile-avatar-preview { display:block; width:64px; height:64px; flex-shrink:0; border-radius:50%; object-fit:cover; background:#233c62; border:1px solid #5265a4; }
.profile-avatar-controls { margin-top:14px; }
.profile-dropdown .profile-avatar-controls button { display:block; padding:10px 12px; border:1px solid #5265a4; border-radius:8px; text-align:center; font:inherit; color:#e2f0ff; background:#233c62; }
.profile-dropdown .profile-avatar-controls button:hover { background:#304b72; }
.profile-dropdown .profile-avatar-controls button:disabled { opacity:.6; cursor:wait; }
.profile-dropdown .profile-avatar-controls button:focus-visible { outline:2px solid #aac8f5; outline-offset:2px; }
.profile-dropdown #avatar-remove { margin-top:8px; background:transparent; border-color:transparent; color:#c9d9ed; }
.profile-dropdown #avatar-remove[hidden] { display:none; }
.profile-avatar-hint { margin:10px 0 0; color:#afc1dc; font-size:12px; line-height:1.45; }
#avatar-status { margin:8px 0 0; font-size:12px; line-height:1.45; overflow-wrap:anywhere; color:#c9d9ed; }
#avatar-status:empty { display:none; }
#avatar-status[data-state="error"] { color:#ffbaba; }
#avatar-status[data-state="success"] { color:#9ee2bb; }
#avatar-status[data-state="pending"]::before { content:""; display:inline-block; width:10px; height:10px; margin-right:7px; border:2px solid #7288a5; border-top-color:#e2f0ff; border-radius:50%; vertical-align:-1px; animation:avatar-spin .8s linear infinite; }
@keyframes avatar-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { #avatar-status[data-state="pending"]::before { animation:none; } }
@media (max-width:760px) { .profile-menu .avatar { width:44px; height:44px; } }