/* Glassy pager (works with .pager + .page/.pager-nav classes) */
.pager{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.35rem; padding:.55rem .6rem; border-radius:14px;
}
.pager--lg{ padding:.65rem .75rem }

.pager a, .pager .page, .pager .pager-nav{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-width:34px; height:38px; padding:0 .7rem;
  border-radius:10px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,#ffffff1a,#ffffff0c);
  color:#eae7ff; text-decoration:none; font-weight:800;
  transition:.18s transform, .18s filter, .18s background, .18s border;
}

.pager .page:hover,
.pager .pager-nav:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color:#7d69e955;
}

.pager .page.is-active{
  background: radial-gradient(260px 160px at 20% 0%, #8a64ff44, transparent 60%),
              linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(108,60,255,.35);
  color:#fff;
}

.pager .is-disabled,
.pager .is-disabled:hover{
  opacity:.55; pointer-events:none; transform:none; filter:none;
}

.pager .gap{
  color:var(--muted); padding:0 .2rem; user-select:none;
}

.chev{ font-weight:900; font-size:1.1rem; line-height:1 }

/* Make it breathe on small screens */
@media (max-width: 520px){
  .pager a, .pager .page, .pager .pager-nav{
    height:36px; min-width:32px; padding:0 .6rem; border-radius:10px;
  }
  .hide-sm{ display:none }
}