.profile-menu { position: relative; }
.profile-avatar { appearance: none; width: 2.25rem; height: 2.25rem; border: 1px solid #4f77a5; border-radius: 999px; background: #163252; color: #eef2ff; font: inherit; font-weight: 800; cursor: pointer; }
.profile-avatar:hover { background: #1c416a; }
.profile-avatar:focus-visible { outline: 2px solid #9dc6f4; outline-offset: 2px; }
.profile-menu__popover { position: absolute; right: 0; top: calc(100% + .55rem); z-index: 20; width: min(21rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid #35506f; border-radius: 14px; background: #0b1b2f; box-shadow: 0 18px 50px rgba(0,0,0,.38); }
.profile-menu__popover > button { appearance: none; display: block; width: 100%; border: 0; border-radius: 9px; padding: .65rem .7rem; background: transparent; color: #dce8f8; text-align: left; font: inherit; cursor: pointer; }
.profile-menu__popover > button:hover, .profile-menu__popover > button:focus-visible { background: #163252; outline: none; }
.profile-menu__panel { margin-top: .45rem; padding: .8rem; border-top: 1px solid #243348; color: #c9d7e8; }
.profile-menu__panel strong { display: block; overflow-wrap: anywhere; }
.profile-menu__settings dl { margin: .5rem 0; }
.profile-menu__settings dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-top: 1px solid #1d2e44; }
.profile-menu__settings dt { color: #9fb0c5; font-size: .78rem; }
.profile-menu__settings dd { margin: 0; color: #eef2ff; font-size: .78rem; font-weight: 700; text-align: right; }
@media (max-width: 600px) { .profile-menu__popover { position: fixed; right: .5rem; top: 5.4rem; width: min(21rem, calc(100vw - 1rem)); } }