/* Top account bar on the host desk: three quiet groups (status | tools | account) instead of one long row. */
.account-bar{gap:16px}
.account-bar .bar-state,.account-bar .bar-tools,.account-bar .bar-acct{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.account-bar .bar-state{gap:10px;color:var(--muted,#9fb0c3)}
.account-bar .bar-state .beta{padding:2px 7px;font-size:11px}
.account-bar #sync-status{font-size:12px;display:inline-flex;align-items:center;gap:6px;color:var(--muted,#9fb0c3)}
.account-bar #sync-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#4fae6a;flex:none}
.account-bar .bar-tools,.account-bar .bar-acct{padding-left:16px;border-left:1px solid var(--line)}
/* the email and the plan read as one chip */
.account-bar .bar-who{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:13px}
.account-bar .bar-who:not(:has(:not([hidden]))){display:none}
.account-bar .bar-who #account-who{padding:4px 10px 4px 12px;max-width:260px}
.account-bar .bar-who #account-plan{border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 12px;color:var(--gold);background:rgba(255,255,255,.03)}
.account-bar .bar-who #account-who[hidden]+#account-plan{border-left:0}
/* Host remote was a bare link; make it a button like its neighbours */
.account-bar .bar-btn{display:inline-block;border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:#203145;color:var(--text);text-decoration:none}
.account-bar .bar-btn:hover{filter:brightness(1.15)}
.account-bar #account-logout{background:transparent}
.account-bar .lang-sel{padding:6px 8px}
/* medium screens: drop the tagline so the three groups stay on one row */
@media(max-width:1500px){.account-bar .brand-description{display:none}}
/* small screens: the groups wrap, so the dividers go and the status line drops underneath */
@media(max-width:1300px){.account-bar .bar-tools,.account-bar .bar-acct{border-left:0;padding-left:0}.account-bar>a:first-child{width:100%}.account-bar .bar-state{order:5;width:100%}}