.site-account { position: relative; margin-left: 0; flex-shrink: 0; font-family: 'Hanken Grotesk', -apple-system, sans-serif; }
.account-trigger, .account-avatar { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(251,247,244,.28); border-radius: 50%; background: #242427; color: #FBF7F4; font-size: 15px; font-weight: 800; text-decoration: none; overflow: hidden; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { border-color: #FF2A30; background: #353033; }
.account-trigger svg, .account-avatar svg { width: 22px; height: 22px; }
.account-popover[hidden] { display: none; }
.account-popover { position: absolute; right: 0; top: calc(100% + 14px); width: min(352px, 92vw); max-height: calc(100dvh - 110px); overflow: auto; padding: 14px; border: 1px solid rgba(251,247,244,.18); border-radius: 20px; background: #1b1b1e; color: #FBF7F4; box-shadow: 0 16px 48px #0008; text-align: left; line-height: 1.4; z-index: 300; }
.account-popover:focus-visible, .account-popover :focus-visible, .account-trigger:focus-visible { outline: 2px solid #FBF7F4; outline-offset: 3px; }
.account-summary { display: flex; align-items: center; gap: 13px; padding: 16px 34px 16px 12px; margin-bottom: 10px; border-radius: 14px; background: #101012; }
.account-avatar { width: 50px; height: 50px; flex-shrink: 0; border: 2px solid #EF0107; }
.account-identity { min-width: 0; }
.account-name { display: block; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.account-email { display: block; font-size: 13px; margin-top: 3px; color: #d2cdca; overflow-wrap: anywhere; }
.account-tier { display: inline-block; margin-top: 9px; padding: 3px 8px; border-radius: 6px; border: 1px solid #ffffff24; font-size: 11px; color: #eee7e3; }
.account-close { position: absolute; top: 18px; right: 16px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #d2cdca; cursor: pointer; font: inherit; font-size: 25px; }
.account-popover .account-action { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: #FBF7F4; text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; }
.account-popover .account-action:hover { background: #ffffff0d; }
.account-action svg { width: 19px; height: 19px; flex-shrink: 0; color: #d2cdca; }
.account-popover .account-note { padding: 4px 12px 10px; margin: 0; color: #c5bfbb; font-size: 12px; }
@media (max-width: 600px) { .site-account { margin-left: 0; } .account-popover { position: fixed; top: 88px; right: 4vw; } }

.account-popover .account-action[hidden], .account-status[hidden] { display: none; }
.account-popover .account-action:disabled { cursor: wait; opacity: .65; }
.account-status { padding: 4px 12px 10px; margin: 0; color: #d2cdca; font-size: 12px; }