/* Shared header account control. Host pages supply their existing theme tokens. */
.account-control {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 44px; min-height: 44px; flex: 0 0 auto; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  font-family: var(--sans, inherit); font-size: 14px; font-weight: 400;
  line-height: 1.4; color: var(--muted); text-decoration: none; cursor: pointer;
}
.account-control:hover { color: var(--text, var(--ink)); }
.account-name {
  max-width: 160px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.account-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--border, var(--line));
  background: color-mix(in srgb, var(--id-color) 18%, var(--surface, var(--card)));
  color: var(--id-color); font-family: var(--mono, monospace);
  font-size: 12px; font-weight: 600; line-height: 1;
}
.account-login, .account-shortcut {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--border, var(--line));
  border-radius: 9px; background: var(--surface, var(--card));
  color: var(--text, var(--ink)); font: 500 14px/1.4 var(--sans, sans-serif);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.account-control:focus-visible, .account-login:focus-visible, .account-shortcut:focus-visible {
  outline: 2px solid var(--accent, var(--green-action, var(--ink))); outline-offset: 3px;
}
.account-control[hidden], .account-login[hidden], .account-shortcut[hidden] { display: none; }
@media (max-width: 700px) {
  .account-control .account-name { display: none; }
}