/* ── Top Nav (Desktop) ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,15,0.8);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(42,42,61,.6);
  padding: 0 28px;
  padding-top: env(safe-area-inset-top, 0);
  display: flex; align-items: center; height: calc(var(--nav-height) + env(safe-area-inset-top, 0px)); gap: 6px;
}

.nav-btn {
  background: none; border: none; color: var(--text-muted);
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 14px; font-weight: 500; transition: all var(--transition);
  font-family: inherit; position: relative;
  display: flex; align-items: center; gap: 8px;
}
.nav-btn .nav-icon { display: none; }
.nav-btn:hover { color: var(--text); background: var(--bg-elevated); }
.nav-btn.active { color: var(--accent); background: var(--accent-dim); }

.nav-spacer { flex: 1; }

.nav-user {
  font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 10px;
}
.btn-logout {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 6px 12px; border-radius: var(--radius-xs); cursor: pointer; font-size: 12px;
  font-family: inherit; transition: all var(--transition);
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

.downloads-btn {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); padding: 8px 16px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px;
  font-family: inherit; transition: all var(--transition);
}
.downloads-btn:hover { border-color: var(--accent); background: var(--accent-dim); }
.badge {
  background: var(--accent); color: #000; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px; min-width: 18px; text-align: center;
}
.badge:empty { display: none; }