/* Centered navbar + pills (kept) */
.site-header{
  position: sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-wrap{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.brand{ font-weight:800; font-size:20px; text-decoration:none; }
.brand span{ color:#6aa7ff; }
.nav-center{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.nav-right{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* Pills */
.pill{
  --bg: #2563eb; --bg-hover:#1d4ed8; --bg-active:#1e40af; --shadow: rgba(37,99,235,0.4);
  display:inline-block; text-decoration:none; color:#fff !important;
  padding:8px 14px; border-radius:999px; font-weight:600; background: var(--bg);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
  box-shadow: 0 2px 10px -4px var(--shadow); position: relative;
}
.pill:hover{ transform: translateY(-1px); background: var(--bg-hover); box-shadow: 0 6px 18px -6px var(--shadow); filter: saturate(1.05); }
.pill.active{ background: var(--bg-active); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.14), 0 2px 10px -4px var(--shadow); }
.pill.primary{ --bg:#3b82f6; --bg-hover:#2563eb; --bg-active:#1d4ed8; --shadow: rgba(59,130,246,0.45); }
.pill.danger{ --bg:#ef4444; --bg-hover:#dc2626; --bg-active:#b91c1c; --shadow: rgba(239,68,68,0.45); }

/* Dropdown */
.dropdown{ position: relative; display:inline-block; }
.has-caret::after{
  content: ""; display:inline-block; margin-left:8px;
  border:6px solid transparent; border-top-color: rgba(255,255,255,0.9);
  transform: translateY(2px);
}
.dropdown-menu{
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 260px; background: rgba(12,16,24,0.95);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 8px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
  z-index: 1000;
}
/* Show only when .open is set by JS */
.dropdown.open .dropdown-menu{ opacity: 1; pointer-events: auto; }

.dropdown-group + .dropdown-group{ border-top: 1px solid rgba(255,255,255,0.06); margin-top:6px; padding-top:6px; }
.dropdown-label{ font-size:12px; opacity:0.8; padding:6px 8px; text-transform: uppercase; letter-spacing: .04em; }
.dropdown-item{ display:block; padding:8px 10px; border-radius: 10px; text-decoration:none; color:#fff; }
.dropdown-item.strong{ font-weight:700; }
.dropdown-item:hover{ background: rgba(255,255,255,0.06); }

/* Mobile */
@media (max-width: 800px){
  .nav-wrap{
    grid-template-columns: 1fr auto;
    grid-template-areas: "left right" "center center";
  }
  .nav-left{ grid-area: left; }
  .nav-center{ grid-area: center; margin-top:8px; }
  .nav-right{ grid-area: right; }
  .dropdown-menu{ left:0; right:0; transform:none; min-width:220px; }
}