.user-avatar{display:inline-grid;overflow:hidden;place-items:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(145deg,#3157d5,#7693ee);color:#fff;font-weight:800;letter-spacing:.035em;text-transform:uppercase}
.user-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.user-avatar-xs{width:28px;height:28px;font-size:.58rem}.user-avatar-sm{width:38px;height:38px;font-size:.72rem}.user-avatar-md{width:48px;height:48px;font-size:.86rem}.user-avatar-lg{width:72px;height:72px;font-size:1.15rem}.user-avatar-xl{width:112px;height:112px;font-size:1.75rem}
.account-menu{position:relative;flex:0 0 auto}
.account-menu>summary{display:grid;padding:0;place-items:center;border:1px solid transparent;border-radius:50%;cursor:pointer;list-style:none;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu>summary:hover,.account-menu>summary:focus-visible,.account-menu.active>summary{border-color:#c5d0ee;background:#edf1ff}
.account-menu>summary:focus-visible{outline:3px solid rgba(49,87,213,.22);outline-offset:2px}
.account-menu[open]>summary{border-color:#aebdea;background:#edf1ff;box-shadow:0 0 0 3px rgba(49,87,213,.1)}
.account-menu .user-avatar>span{display:block;line-height:1;transform:translateY(1px)}
.account-menu-popover{position:absolute;top:calc(100% + 9px);right:0;z-index:12;display:grid;min-width:230px;padding:7px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 18px 44px rgba(30,45,75,.15)}
.account-menu-person{display:grid;gap:2px;margin:2px 3px 6px;padding:7px 9px 10px;border-bottom:1px solid var(--line);transition:border-color .22s ease}
.account-menu-person strong,.account-menu-person>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .22s ease,transform .28s cubic-bezier(.22,.61,.36,1),filter .22s ease}.account-menu-person strong{color:var(--ink);font-size:.88rem}.account-menu-person>span{color:var(--muted);font-size:.74rem;font-weight:500}
.account-menu.is-logout-preview .account-menu-person{border-bottom-color:rgba(180,35,24,.22)}.account-menu.is-logout-preview .account-menu-person strong{opacity:.58;filter:grayscale(.7);transform:translateX(3px)}.account-menu.is-logout-preview .account-menu-person>span{opacity:.3;filter:grayscale(1);transform:translateX(8px)}
.account-menu-popover>a{padding:9px 11px;border-radius:8px;color:var(--muted);font-size:.88rem;font-weight:700;text-decoration:none}.account-menu-popover>a:hover,.account-menu-popover>a:focus-visible,.account-menu-popover>a.active{background:#edf1ff;color:var(--accent)}
.account-menu-divider{height:1px;margin:5px 4px;background:var(--line)}.account-menu-popover>a.account-menu-logout:hover,.account-menu-popover>a.account-menu-logout:focus-visible,.account-menu-popover>a.account-menu-logout.is-pending{background:#fff1f0;color:var(--danger)}.account-menu-popover>a.account-menu-logout.is-pending{display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;cursor:wait}.account-menu-logout.is-pending::after{content:"";width:12px;height:12px;flex:0 0 auto;border:2px solid rgba(180,35,24,.25);border-top-color:var(--danger);border-radius:50%;animation:account-menu-logout-spin .65s linear infinite}@keyframes account-menu-logout-spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.account-menu-popover{position:fixed;top:62px;right:16px}}
@media(max-width:560px){.user-avatar-sm{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.account-menu *{transition:none!important;animation:none!important}}