.um-kicker {
  margin: 0 0 10px;
  color: var(--um-primary);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
}

.um-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  height: 64px;
  background: var(--um-topbar-bg);
  border-bottom: 1px solid var(--um-line);
  backdrop-filter: blur(14px);
}

/* Fixed 300px/320px side columns (matching .um-layout's sidebar/rightbar
   widths below), same 1460px max-width and centering, and the same 18px
   horizontal padding, so the nav's own centered middle column lines up with
   the feed column underneath it - like Facebook centers its nav icons above
   its own center feed, rather than centering within the full-bleed topbar. */
.um-topbar-inner {
  display: grid;
  grid-template-columns: 300px auto 320px;
  align-items: center;
  /* Matches .um-layout's own 24px gap: with both containers sharing the same
     max-width/padding/300px-left-column, an identical gap here is what makes
     the nav's track start at the exact same x-position as the feed column
     below it (the grid math otherwise cancels out gap for a symmetric center,
     but the nav's track can legitimately grow past the feed's 680px cap to
     fit its own labels, so matching the shared left edge - not a computed
     center - is what stays correct at every width). */
  gap: 24px;
  width: 100%;
  max-width: 1460px;
  height: 100%;
  margin: 0 auto;
  padding: 8px 18px;
  box-sizing: border-box;
}

.um-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* The button holds the UnliTube mark, which paints its own rose circle - so no
   background here, or the circle would double up at the anti-aliased edge. */
.um-logo {
  border: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.um-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.um-logo:hover,
.um-logo:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px var(--um-shadow);
}

.um-search {
  width: min(320px, 100%);
  border: 1px solid var(--um-line);
  border-radius: 999px;
  padding: 11px 14px;
  background: var(--um-surface-strong);
  color: var(--um-text);
}

.um-topnav,
.um-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.um-search-pop {
  position: fixed;
  top: 72px;
  left: 18px;
  z-index: 19;
  width: min(420px, calc(100vw - 36px));
  background: var(--um-surface-strong);
  border: 1px solid var(--um-line);
  border-radius: var(--um-radius);
  box-shadow: 0 18px 48px rgba(32, 35, 31, 0.16);
  padding: 14px;
}

.um-search-pop h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.um-kicker,
.um-section-title,
.um-time,
.um-module h3,
.um-card strong,
.um-author strong,
.um-metric strong,
.um-listing-card strong,
.um-saved-content strong,
.um-account-stats strong {
  font-weight: 500 !important;
}

@media (max-width: 1500px) {
  .um-topbar-inner {
    /* Keep the base rule's 24px column-gap here (matching .um-layout's gap,
       needed for the nav to still start at the feed's left edge down to
       1121px, where .um-layout still uses its full sidebar/feed/rightbar
       columns) - only tighten the horizontal padding at this tier. */
    padding-inline: 14px;
  }

  .um-topnav,
  .um-actions {
    gap: 5px;
    overflow: visible;
  }
}