/* The account bar (includes/account_bar.php), top right over the banner (.header-scene, 1000), under the phone
   menu (2000). */
.account-bar { position: absolute; top: 10px; right: 12px; z-index: 1500; display: flex; align-items: center; gap: .55rem;
    padding: .3rem .75rem; border-radius: 999px; background: rgba(20, 13, 8, .62); backdrop-filter: blur(3px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35); font: .88rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #f3e9d8; pointer-events: auto; }
.account-bar a { color: #f3e9d8; text-decoration: none; }
.account-bar a:hover, .account-bar button:hover { color: #fde08d; }
.account-bar form { margin: 0; display: flex; }
.account-bar-sep { width: 1px; height: 1.05em; background: rgba(243, 233, 216, .3); }
.account-bar-user { display: inline-flex; align-items: center; gap: .4rem; max-width: 14rem; }
.account-bar-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-bar-user img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid #fde08d88; }
.account-bar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.account-bar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: #f3e9d8; cursor: pointer; }
.account-bar-icon:hover { background: rgba(253, 224, 141, .12); }
.account-bar-count { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #b07a1e; color: #fff; font-size: .68rem; line-height: 16px; text-align: center; }
@media (max-width: 600px) {
    .account-bar { top: 6px; right: 6px; padding: .25rem .6rem; font-size: .82rem; }
    .account-bar-user span { max-width: 7rem; }
}