.nav-dropdown { position: relative; display: inline-block; flex-shrink: 0; }
.nav-dropdown__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: -6px -10px;
  border: none; border-radius: 6px; background: none;
  color: var(--fg-muted, #475569); font: inherit; font-size: 14px; cursor: pointer;
}
.nav-dropdown__toggle:hover,
.nav-dropdown.is-open .nav-dropdown__toggle { color: var(--fg, #1f2937); background: #f1f5f9; }
.nav-dropdown__caret { font-size: 11px; opacity: 0.75; }
.nav-dropdown.is-open .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu[hidden] { display: none !important; }
.nav-dropdown__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
  min-width: 168px; margin: 0; padding: 6px 0; list-style: none;
  background: #2b2f36; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  flex-direction: column;
}
.nav-dropdown.is-open .nav-dropdown__menu { display: flex !important; }
.nav-dropdown__menu li { margin: 0; padding: 0; }
.nav-dropdown__menu a {
  display: block; padding: 11px 20px; color: #e8eaed;
  font-size: 14px; text-decoration: none; white-space: nowrap;
}
.nav-dropdown__menu a:hover { background: #3d434d; color: #fff; }
.nav-dropdown__menu a.is-active { background: #2563eb; color: #fff; font-weight: 600; }
.topbar, .topnav { overflow: visible; }