.st-topbar {
  align-items: center;
  background: var(--st-color-surface-white);
  border-bottom: 1px solid var(--st-color-border-default);
  display: grid;
  gap: 0;
  grid-template-columns: var(--st-shell-sidebar-width) minmax(0, 1fr) auto;
  height: var(--st-shell-topbar-height);
  left: 0;
  padding: 0 var(--st-page-gutter);
  position: sticky;
  right: 0;
  top: 0;
  z-index: 220;
}

.st-topbar-brand {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 0;
  min-width: 0;
}

.st-topbar-logo-image {
  display: block;
  height: 34px;
  object-fit: contain;
  width: 166px;
}

.st-topbar-context,
.st-topbar-title-row,
.st-topbar-actions {
  align-items: center;
  display: flex;
  min-width: 0;
}

.st-topbar-context {
  gap: var(--st-space-3);
  text-align: left;
}

.st-topbar-title-row {
  gap: var(--st-space-2);
}

.st-topbar-title {
  color: var(--st-color-text-primary);
  font-size: var(--st-font-body-lg-size);
  font-weight: var(--st-font-weight-semibold);
  line-height: var(--st-line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-topbar-breadcrumb,
.st-topbar-breadcrumb-separator {
  color: var(--st-color-text-secondary);
  font-size: var(--st-font-body-lg-size);
  line-height: var(--st-line-height-tight);
}

.st-topbar-breadcrumb:hover {
  color: var(--st-color-brand-primary);
}

.st-topbar-back-link {
  align-items: center;
  border-radius: var(--st-radius-md);
  color: var(--st-color-text-secondary);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.st-topbar-back-link:hover {
  background: var(--st-color-surface-muted);
  color: var(--st-color-brand-primary);
}

.st-topbar-actions {
  gap: var(--st-space-2);
  justify-content: flex-end;
  margin-left: var(--st-space-4);
}

.st-topbar-icon-cluster {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.st-topbar .st-topbar-action-button {
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-md);
  color: var(--st-color-text-secondary);
  height: 18px;
  min-width: 18px;
  padding: 0;
  width: 18px;
}

.st-topbar .st-topbar-action-button:hover {
  background: var(--st-color-surface-muted);
  border-color: transparent;
  color: var(--st-color-brand-primary);
}

.st-topbar .st-topbar-action-button .st-icon {
  height: 18px;
  transform: none;
  width: 18px;
}

.st-topbar .st-notification-trigger.st-topbar-action-button .st-icon {
  transform: none;
}

.st-topbar .st-notification-trigger.st-topbar-action-button {
  margin-right: var(--st-space-2);
}

.st-topbar .st-topbar-action-button .st-notification-badge {
  border-color: var(--st-color-surface-white);
  font-size: 0.62rem;
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  right: -9px;
  top: -4px;
}

.st-avatar-button {
  background: var(--st-color-surface-white);
  border: 1px solid var(--st-color-border-default);
  border-radius: var(--st-radius-pill);
  box-shadow: var(--st-elevation-pill);
  color: var(--st-color-text-primary);
  height: 38px;
  padding: 3px var(--st-space-2) 3px 3px;
}

.st-avatar-button:hover {
  background: var(--st-color-surface-muted);
  border-color: var(--st-color-border-strong);
}

.st-avatar-initials {
  background: var(--st-color-brand-primary);
  color: var(--st-color-surface-white);
  height: 32px;
  width: 32px;
}

.st-avatar-meta strong {
  color: var(--st-color-text-primary);
  font-size: var(--st-font-caption-size);
  font-weight: var(--st-font-weight-semibold);
}

.st-avatar-meta span {
  color: var(--st-color-text-secondary);
  font-size: var(--st-font-nav-overline-size);
  font-weight: var(--st-font-weight-medium);
}

.st-notification-badge {
  background: var(--st-color-accent-orange);
  border-color: var(--st-color-surface-white);
}

@media (max-width: 1024px) {
  .st-topbar {
    gap: var(--st-space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-left: var(--st-space-4);
    padding-right: var(--st-space-4);
  }

  .st-topbar-actions {
    margin-left: 0;
  }
}

@media (max-width: 699px) {
  .st-topbar {
    gap: var(--st-space-2);
    padding-left: var(--st-space-3);
    padding-right: var(--st-space-3);
  }

  .st-topbar-breadcrumb,
  .st-topbar-breadcrumb-separator {
    display: none;
  }

  .st-topbar-title {
    font-size: var(--st-font-body-size);
  }
}