:root { --global-header-height: 48px; }

#global-header {
  position: sticky;
  z-index: 50;
  top: 0;
  width: 100%;
  height: var(--global-header-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid #e3e3e3;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(16px);
}

.header-location, .header-left, .header-right, .global-breadcrumb { display: flex; align-items: center; }
.header-location { min-width: 0; }
#global-header-logo { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; text-decoration: none; }
#global-header-logo img { width: 26px; height: 26px; object-fit: contain; }
.header-left { height: 30px; gap: 22px; margin-left: 24px; }
.nav-trigger { height: 30px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: #333; font-size: 12px; font-weight: 500; line-height: 15px; vertical-align: middle; cursor: pointer; }
#global-nav-explore, #global-nav-tools, #global-nav-search { margin: 0; }
.header-left .nav-trigger:hover, .header-left .nav-trigger:focus-visible { color: #000; text-decoration: underline; text-underline-offset: 4px; outline: 0; }
.global-breadcrumb { min-width: 0; gap: 6px; justify-self: center; font-size: 11px; line-height: 15px; white-space: nowrap; }
.global-breadcrumb a { padding: 2px 3px; border-radius: 4px; color: #969696; text-decoration: none; }
.global-breadcrumb a:hover, .global-breadcrumb a:focus-visible { background: #f3f3f3; color: #111; outline: 0; }
.global-breadcrumb > span { color: #c2c2c2; }
.global-breadcrumb strong { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; }
.header-right { justify-self: end; gap: 2px; }
.header-icon-button, #global-nav-search { position: relative; width: 30px; height: 30px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #676767; }
.header-icon-button:hover, .header-icon-button:focus-visible, #global-nav-search:hover, #global-nav-search:focus-visible { color: #111; background: #f3f3f3; outline: 0; }
.header-icon-button svg, #global-nav-search svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.header-action-separator { width: 1px; height: 16px; margin: 0 5px; background: #d8d8d8; }
.header-unread-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #ff6161; }
#global-account-button { position: relative; width: 27px; min-width: 27px; height: 27px; display: grid; place-items: center; margin-left: 4px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #111; color: #fff; font-size: 9px; font-weight: 600; cursor: pointer; }
#global-account-button img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
#global-account-button::before { content: none; }
.header-right [data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 70; top: calc(100% + 8px); left: 50%; padding: 6px 9px; border-radius: 6px; background: #1e1e1e; box-shadow: 0 4px 12px rgb(0 0 0 / 14%); color: #fff; font-size: 11px; font-weight: 500; line-height: 14px; opacity: 0; pointer-events: none; transform: translate(-50%, -3px); transition: opacity 120ms ease 120ms, transform 120ms ease 120ms; white-space: nowrap; }
.header-right [data-tooltip]:hover::after, .header-right [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
#global-account-button::after { right: 0; left: auto; transform: translateY(-3px); }
#global-account-button:hover::after, #global-account-button:focus-visible::after { transform: translateY(0); }
#nav-placeholder { position: absolute; z-index: 60; top: 42px; left: 86px; padding: 7px 11px; border: 1px solid #dadada; border-radius: 6px; background: #fff; font-size: 13px; }

@media (max-width: 760px) {
  #global-header { grid-template-columns: 1fr auto; padding: 0 14px; }
  .global-breadcrumb { display: none; }
  .header-left { gap: 14px; margin-left: 14px; }
}

@media (max-width: 540px) {
  #global-nav-tools, #global-workspace-members-button { display: none; }
}

@media (max-width: 410px) {
  #global-nav-explore { display: none; }
}