@layer components {
  .account-menu { position: relative; margin-inline: var(--space-3); }
  .account-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 54px;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    text-align: left;
    color: var(--text-secondary);
    transition: background-color var(--duration-fast) var(--ease-smooth);
  }
  .account-trigger:hover,
  .account-trigger[aria-expanded="true"] { background-color: var(--nav-hover); }
  .account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--surface);
    font: var(--type-control-sm);
    color: var(--text-secondary);
  }
  .account-details { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .account-name { font: var(--type-control); color: var(--text); }
  .account-role,
  .account-email { font: var(--type-small); color: var(--text-secondary); }
  .account-panel {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    z-index: var(--z-overlay);
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
  }
  .account-summary {
    padding: var(--space-3);
    overflow-wrap: anywhere;
  }
  .account-summary .account-name { font: var(--type-body); }
  .account-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 38px;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    text-align: left;
    font: var(--type-body);
    color: var(--text);
  }
  .account-action:hover { background-color: var(--nav-hover); color: var(--text); }
  .account-signout {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--border);
  }
  @media (pointer: coarse) {
    .account-action { min-height: 44px; }
  }
}