.app-topbar .app-topbar-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  grid-column: 4;
  justify-self: end;
  min-width: 0;
}
.app-topbar { gap: 8px; grid-template-columns: 44px 44px minmax(280px, 640px) minmax(150px, 1fr); }
.app-menu-button, :root[data-theme="neo"] .app-menu-button:not(.link-button, .menu-toggle) {
  align-items: center;
  background: var(--card-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--muted);
  display: inline-flex;
  grid-column: 1;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;
}
.app-menu-button > span:last-child { display: none; }
.app-topbar-title { align-items: center; display: flex; grid-column: 2; width: 44px; }
.app-topbar-center { grid-column: 3; }
.app-topbar-title .eyebrow,
.app-topbar-title strong { display: none; }
.topbar-icon-button {
  align-items: center;
  aspect-ratio: 1;
  background: var(--card-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  display: inline-flex;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 44px;
}
.topbar-icon-button:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  filter: none;
  text-decoration: none;
}
.topbar-icon-button .side-icon { height: 20px; width: 20px; }
.topbar-brand-button .brand-logo { display: flex; }
.topbar-brand-button .logo-frame { display: none !important; }
.topbar-brand-button .logo-icon { display: block !important; height: 38px; object-fit: contain; width: 38px; }
.shell-chrome-hidden .app-topbar { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.shell-chrome-hidden .app-bottom-nav { opacity: 0; pointer-events: none; transform: translateY(105%); }
.notification-menu { margin: 0; padding: 0; position: relative; }
.notification-menu[open] { z-index: 120; }
.notification-menu summary { list-style: none; }
.notification-menu summary::-webkit-details-marker { display: none; }
.notification-dot {
  align-items: center;
  background: var(--danger);
  border: 2px solid var(--card-strong);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 10px;
  font-weight: 900;
  height: 19px;
  justify-content: center;
  min-width: 19px;
  padding: 0 4px;
  position: absolute;
  right: -5px;
  top: -5px;
}
.notification-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 6px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(340px, calc(100vw - 32px));
  z-index: 121;
}
.notification-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  padding: 5px 6px;
  text-transform: uppercase;
}
.notification-item {
  border-radius: 12px;
  display: grid;
  gap: 3px;
  padding: 10px;
}
.notification-item:hover { background: var(--accent-soft); text-decoration: none; }
.notification-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.notification-item strong { font-size: 14px; line-height: 1.25; }
.help-menu { margin: 0; padding: 0; position: relative; }
.help-menu[open] { z-index: 120; }
.app-topbar:has(.help-menu[open], .notification-menu[open])::before {
  backdrop-filter: blur(12px);
  background: rgba(11, 15, 20, .16);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}
:root[data-theme="neo"] .app-topbar:has(.help-menu[open], .notification-menu[open])::before { background: rgba(0, 0, 0, .34); }
.app-topbar:has(.help-menu[open]) .help-menu,
.app-topbar:has(.notification-menu[open]) .notification-menu { z-index: 2; }
.help-menu summary { list-style: none; }
.help-menu summary::-webkit-details-marker { display: none; }
.help-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  padding: 16px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(304px, calc(100vw - 24px));
  z-index: 121;
}
.help-panel > strong { font-size: 17px; }
.help-panel nav { display: grid; gap: 8px; }
.help-panel nav + nav { border-top: 1px solid var(--line); padding-top: 12px; }
.help-panel a { background: var(--card-strong); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-weight: 750; padding: 12px 14px; }
.help-panel a:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
.topbar-empty { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0; padding: 10px; }
.topbar-brand-button { background: transparent; border: 0; box-shadow: none; display: inline-flex; padding: 0; }
.profile-follow-form { margin-left: auto; }
.profile-follow {
  border-radius: 999px;
  margin-left: auto;
  min-width: 116px;
  white-space: nowrap;
}
.profile-follow.following {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--accent-strong);
}
@media (min-width: 761px) {
  .app-topbar { margin-left: -76px; padding-left: 10px; width: calc(100% + 76px); z-index: 50; }
  .app-shell.sidebar-pinned .app-topbar { grid-template-columns: minmax(280px, 640px) minmax(150px, 1fr); margin-left: 0; width: 100%; }
  .app-shell.sidebar-pinned .app-menu-button,
  .app-shell.sidebar-pinned .app-topbar-title { display: none; }
  .app-shell.sidebar-pinned .app-topbar-center { grid-column: 1; }
  .app-shell.sidebar-pinned .app-topbar .app-topbar-actions { grid-column: 2; }
}
@media (max-width: 760px) {
  .app-topbar { grid-template-columns: 42px minmax(0, 1fr); }
  .app-menu-button, :root[data-theme="neo"] .app-menu-button:not(.link-button, .menu-toggle) { display: none !important; }
  .app-topbar-title { grid-column: 1; width: 42px; }
  .topbar-brand-button, :root[data-theme="neo"] .topbar-brand-button:not(.link-button, .menu-toggle) { background: transparent; display: inline-flex; }
  .topbar-brand-button .logo-icon { height: 36px; width: 36px; }
  .app-topbar-title .eyebrow, .app-topbar-title > strong { display: none; }
  .app-topbar .app-topbar-actions { grid-column: 2; order: 1; }
  .app-topbar-center { grid-column: 1 / -1; order: 2; width: 100%; }
  .topbar-icon-button { border-radius: 13px; width: 46px; }
  .topbar-icon-button .side-icon { height: 21px; width: 21px; }
  .topbar-discover-search { grid-template-columns: 36px 1fr 36px; padding: 3px; }
  .profile-head { align-items: flex-start; flex-wrap: wrap; }
  .profile-follow-form, .profile-follow { margin-left: 0; }
}