.account-menu { position: relative; display: block; }
.account-menu-toggle { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .35rem .65rem .35rem .35rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; list-style: none; }
.account-menu-toggle::-webkit-details-marker { display: none; }
.account-menu-toggle:hover, .account-menu[open] .account-menu-toggle { background: var(--surface-alt); }
.account-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent-text); }
.account-menu[open] .account-menu-chevron { transform: rotate(180deg); }
.account-menu-options { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 180px; padding: .4rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(32, 33, 36, .12); }
.account-menu-options a, .account-menu-options button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: .65rem .8rem; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); font: inherit; font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; }
.account-menu-options a:hover, .account-menu-options button:hover { background: var(--surface-alt); }
.account-menu-options button:disabled { opacity: .6; cursor: wait; }
.account-menu-options [role="alert"] { padding: .5rem; font-size: .85rem; }
@media (max-width: 600px) {
  header .header-auth.account-menu { display: block; margin-left: auto; }
  header .bar:has(.account-menu:not([hidden])) { gap: .4rem; }
  header .bar:has(.account-menu:not([hidden])) > .mbtn { margin-left: 0; }
  .account-menu .account-name { max-width: 85px; }
}
@media (max-width: 420px) {
  .account-menu .account-name { max-width: 65px; }
  .account-menu-toggle { gap: .3rem; padding-right: .4rem; }
}