.site-account {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.site-account-trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--color-text, #203653);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.site-account-avatar {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f73f1;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.site-account[data-auth-state]:not([data-auth-state='signed-in']) .site-account-avatar {
  background: var(--notes-workspace-soft, #f0f3f8);
  color: var(--color-muted, #7a879e);
}

.site-account .site-account-avatar svg,
.site-account-popover .site-account-avatar svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-account-copy {
  display: grid;
  gap: 4px;
  max-width: 190px;
}

.site-account-copy strong,
.site-account-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-account-copy strong {
  font-size: 13px;
  font-weight: 650;
}

.site-account-copy > span {
  color: var(--color-muted, #7a879e);
  font-size: 11px;
}

.site-account-trigger:hover .site-account-avatar {
  box-shadow: 0 0 0 3px var(--notes-workspace-soft, #e7edff);
}

.site-account-trigger:focus-visible,
.site-account-popover a:focus-visible,
.site-account-popover button:focus-visible {
  outline: 2px solid var(--color-primary, #4f7cff);
  outline-offset: 4px;
}

.site-account-popover {
  position: fixed;
  z-index: 1100;
  width: min(300px, calc(100vw - 16px));
  padding: 18px;
  border: 1px solid var(--color-border, #d8e1ea);
  border-radius: 14px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #203653);
  box-shadow: 0 14px 45px rgb(25 45 90 / 14%);
  font-family: system-ui, sans-serif;
}

.site-account-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.site-account-summary > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.site-account-summary strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.site-account-summary > div > span {
  color: var(--color-muted, #64738f);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.site-account-status {
  margin: 0 0 14px;
  color: var(--color-muted, #64738f);
  font-size: 12px;
  line-height: 1.6;
}

.site-account-action {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #d8e1ea);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text, #203653);
  font:
    500 13px system-ui,
    sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.site-account-action:hover {
  background: var(--notes-workspace-soft, #eef3ff);
}

.site-account [hidden],
.site-account-popover [hidden],
.site-account-popover[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .site-account-copy {
    display: none;
  }
}

@media (max-width: 767px) {
  .funify-notes-page .site-header {
    gap: 6px;
  }

  .funify-notes-page .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .funify-notes-page .site-header .brand strong {
    font-size: 18px;
  }

  .funify-notes-page .site-header .menu,
  .funify-notes-page .notes-workspace-header-button {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .funify-notes-page .site-header .menu::before,
  .funify-notes-page .site-header .menu::after,
  .funify-notes-page .site-header .menu span {
    left: 8px;
  }

  .funify-notes-page .site-header .menu::before {
    top: 10px;
  }

  .funify-notes-page .site-header .menu span {
    top: 16px;
  }

  .funify-notes-page .site-header .menu::after {
    top: 22px;
  }

  .site-account-trigger {
    min-width: 34px;
    min-height: 34px;
  }

  .site-account .site-account-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
}

@media (prefers-color-scheme: dark) {
  .site-account-avatar {
    background: #26304a;
    color: #aec2ff;
  }
}