/* Physical left alignment is intentional in both RTL and LTR layouts. */
.account-header {
  display: flex;
  direction: ltr;
  justify-content: flex-start;
  padding: 12px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line, #d8e0da);
  background: var(--surface, #fffdf8);
  color: var(--ink, #17211d);
}
.account-header[hidden], .account-header [hidden] { display: none !important; }
.account-header .account-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line, #d8e0da);
  border-radius: 14px;
  color: inherit;
  background: var(--surface-2, #f8faf7);
  text-decoration: none;
  font-weight: 500;
}
.account-header .account-link:hover { border-color: var(--green, #0f6a5b); }
.account-header .account-link:focus-visible { outline: 3px solid var(--a11y-focus, #164e85); outline-offset: 3px; }
.account-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--green-soft, #dceee9);
  color: var(--ink, #17211d);
  font-size: .875rem;
  font-weight: 650;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-copy { display: grid; min-width: 0; text-align: left; line-height: 1.4; }
.account-name { font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }
.account-handle { font-size: .8125rem; color: var(--muted, #62716a); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .account-header { padding-block: 8px; }
}