.site-tools,
.site-auth,
.site-auth-trigger,
.site-auth-identity,
.site-auth-actions {
  display: flex;
  align-items: center;
}

.site-tools {
  position: relative;
  justify-self: end;
  gap: 0.4rem;
}

.site-auth {
  position: relative;
}

.site-auth-trigger {
  min-height: 2.75rem;
  padding: 0 0.75rem 0 0.45rem;
  gap: 0.45rem;
  color: rgba(247, 247, 248, 0.86);
  background: rgba(8, 9, 11, 0.58);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 650;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--room-ease);
}

.site-auth-trigger:hover,
.site-auth-trigger[aria-expanded="true"] {
  color: #fff;
  background: rgba(8, 9, 11, 0.86);
}

.site-auth-trigger:active,
.site-auth-action:active {
  transform: scale(0.97);
}

.site-auth-avatar {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  color: #111113;
  background: rgba(250, 250, 251, 0.94);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 760;
}

.site-auth-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-auth-avatar--large {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.9rem;
}

.site-auth-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  width: min(20rem, calc(100vw - 2rem));
  padding: 1.1rem;
  color: #f7f7f8;
  background: rgba(8, 9, 11, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
}

.site-auth-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: rgba(247, 247, 248, 0.66);
  border-radius: 7px;
  font-size: 1.25rem;
}

.site-auth-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.site-auth-identity {
  padding-right: 2rem;
  gap: 0.75rem;
}

.site-auth-identity div {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.site-auth-identity strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-auth-identity span,
.site-auth-hint,
.site-auth-status {
  color: rgba(247, 247, 248, 0.62);
  font-size: 0.72rem;
  line-height: 1.55;
}

.site-auth-hint,
.site-auth-status {
  margin: 0.85rem 0 0;
}

.site-auth[data-auth-state="failure"] .site-auth-status {
  color: #ffb7b7;
}

.site-auth-google {
  min-height: 44px;
  margin-top: 0.9rem;
}

.site-auth-actions {
  margin-top: 0.9rem;
  justify-content: flex-end;
  gap: 0.5rem;
}

.site-auth-action {
  min-height: 2.35rem;
  padding: 0 0.8rem;
  color: #111113;
  background: rgba(250, 250, 251, 0.94);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
}

.site-auth-action:hover {
  background: #fff;
}

@media (max-width: 767px) {
  .site-auth-trigger {
    width: 2.75rem;
    padding: 0;
    justify-content: center;
  }

  .site-auth-trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .site-auth-panel {
    position: fixed;
    top: 4.5rem;
    right: var(--space-sm);
    left: var(--space-sm);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-auth-trigger,
  .site-auth-action {
    transition-duration: 0.01ms;
  }
}