/* Decoration stays inside the existing Account link and adds no focus target. */
a[data-account-avatar]{align-items:center}
a[data-account-avatar]>.account-avatar-badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;flex:0 0 32px;overflow:hidden;border:1px solid #5e7188;border-radius:50%;box-sizing:border-box;background:#20364c;color:#eaf4ff;font-family:inherit;font-size:11px;font-weight:750;line-height:1;letter-spacing:.02em;vertical-align:middle}
a[data-account-avatar]>.account-avatar-badge>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
a[data-account-avatar]>.account-avatar-badge>svg{display:block;width:18px;height:18px;flex-shrink:0}
a[data-account-avatar]>.account-avatar-badge~[data-icon="user"]{display:none}
.topbar a[data-account-avatar]{display:inline-flex;gap:8px;min-height:44px;padding:4px 7px;font-size:12px;color:#eaf4ff;border-radius:8px;white-space:nowrap}
.topbar a[data-account-avatar]:hover{background:#25354a;color:#fff}
a[data-account-avatar]:focus-visible{outline:3px solid #69b7ff;outline-offset:3px}
/* Keep the private avatar in the top bar on phones as well as in Menu. */
@media(max-width:700px){
 .topbar{gap:6px}
 .topbar a[data-account-avatar]{display:inline-flex;flex:0 0 auto;gap:6px;min-width:44px;min-height:44px;padding:4px;font-size:11px}
 .topbar>.mobile-menu-trigger{flex:0 0 86px;width:86px;min-height:44px;box-sizing:border-box;padding:10px 8px;gap:6px}
}
@media(max-width:370px){
 .topbar{gap:4px}
 .topbar a[data-account-avatar]{width:44px;min-width:44px;justify-content:center;padding:6px;box-sizing:border-box}
 .topbar a[data-account-avatar]>.account-top-label{display:none}
}