.top-nav {
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.top-nav__button {
  padding: 8px;
  border-radius: 8px;
  transition: background-color 120ms ease;
  color: inherit;
}

.top-nav__button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.top-nav__dropdown {
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-border);
}

.top-nav__dropdown a {
  color: var(--color-text);
  transition: background-color 120ms ease, color 120ms ease;
}

.top-nav__dropdown a:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-accent);
}

.top-nav__badge {
  background: var(--color-accent);
  color: #111827;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 2px 8px;
}

.context-modal {
  background: rgba(0, 0, 0, 0.35);
}

.context-modal__panel {
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

/* Bottom nav */
.bottom-nav {
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  padding: 12px 0;
}

.bottom-nav__link {
  color: var(--color-muted);
  transition: color 120ms ease;
}

.bottom-nav__link:hover {
  color: var(--color-accent);
}