/* ══════════════════════════════════════════════
   TOP NAV BAR
   ══════════════════════════════════════════════ */

.top-nav {
  display: flex; gap: 0; margin-bottom: 18px;
  background: var(--surface-inverse); border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(15,23,42,.35);
}
.top-nav-tab {
  flex: 1; padding: 14px 20px; text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95em;
  color: var(--muted); cursor: pointer; border: none; background: transparent;
  transition: all .25s ease; position: relative; letter-spacing: .01em;
}
.top-nav-tab:hover { color: var(--text-2); background: rgba(255,255,255,.04); }
.top-nav-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #1e3a5f 0%, var(--primary-strong) 100%);
}
.top-nav-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 20%; width: 60%; height: 3px;
  background: var(--primary); border-radius: 3px 3px 0 0;
}
.top-nav-tab .nav-icon { font-size: 1.15em; margin-right: 6px; }