.page-nav{
  margin-top:3rem;               /* mt-12 */
  display:flex;
  justify-content:space-between; /* keep ends apart */
  align-items:center;
  gap:1rem;
}
.page-nav .spacer{ width:1px; }  /* keeps layout if one side missing */

.page-nav .btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;         /* px-6 py-3 */
  border-radius:.75rem;          /* rounded-lg */
  font-weight:600;               /* font-semibold */
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform .2s, background-color .2s, color .2s, box-shadow .2s;
  text-decoration:none;
  color:#fff;
}
.page-nav .btn .icon{
  width:20px; height:20px;
  transition: transform .3s;
}

/* Previous (gray) */
.page-nav .btn.prev{ background:#4b5563; }                 /* gray-600 */
.page-nav .btn.prev:hover{ background:#374151; }           /* gray-700 */
.page-nav .btn.prev:hover .icon{ transform: translateX(-4px); }

/* Next (blue) */
.page-nav .btn.next{ background:#2563eb; }                 /* blue-600 */
.page-nav .btn.next:hover{ background:#1d4ed8; }           /* blue-700 */
.page-nav .btn.next:hover .icon{ transform: translateX(4px); }

/* Dark mode tweaks */
@media (prefers-color-scheme: dark){
  .page-nav .btn.prev{ background:#4b5563; }
  .page-nav .btn.next{ background:#2563eb; }
}