/* ── NAV ─────────────────────────────── */
nav {
  background: var(--navy);
  display: flex; align-items: center;
  padding: 0 20px; height: 56px; gap: 20px;
  position: sticky; top:0; z-index:200;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.logo {
  display:flex; align-items:center; gap:9px;
  color:#fff; font-weight:800; font-size:14px; white-space:nowrap; flex-shrink:0;
}
.nav-tabs { display:flex; gap:4px; }
.tab-btn {
  background:transparent; border:none;
  color:rgba(255,255,255,.55); padding:6px 16px;
  border-radius:7px; cursor:pointer; font-size:13px; font-weight:600;
  transition: all .18s;
}
.tab-btn.active { background:var(--teal); color:#fff; }
.tab-btn:hover:not(.active) { background:rgba(255,255,255,.08); color:#fff; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.live-badge {
  display:flex; align-items:center; gap:6px;
  color:var(--green); font-size:11px; font-weight:700; letter-spacing:.04em;
}
.live-dot {
  width:7px; height:7px; border-radius:50%; background:var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.7)} }
.upd-ts { font-size:10px; color:rgba(255,255,255,.35); }

/* ── TAB CONTAINERS ───────────────────── */
.tab-content { display:none; }
.tab-content.active { display:flex; }

@media (max-width: 768px) {
  nav { flex-wrap:wrap; height:auto; padding:0 12px; gap:0; }
  .logo { padding:10px 0; flex:1; }
  .nav-right { display:none; }
  .nav-tabs {
    width:100%; overflow-x:auto; scrollbar-width:none;
    padding:0 40px 6px; gap:2px;
    mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
    scroll-behavior: smooth;
  }
  .nav-tabs::-webkit-scrollbar { display:none; }
  .tab-btn { flex-shrink:0; font-size:12px; padding:6px 12px; }
}