.portal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0; }
.nav-item { min-height: 38px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.nav-item.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.nav-item:not(.active):not(.disabled):hover { border-color: var(--accent); }
.nav-item.disabled { color: var(--muted); background: transparent; }
.nav-item small { font-size: 11px; color: var(--muted); background: #e9eaf0; padding: 1px 5px; border-radius: 4px; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}