/* Pager base: __PFX__ replaced by CssBuilder
   Colors do NOT hardcode: relies on CSS vars you set from theme:
   --c-primary --c-accent --c-bg --c-bg-soft --c-text-primary --c-text-secondary --c-border
*/
.__PFX__-pager{
  --pg-gap: 8px;
  --pg-pad: 6px 10px;
  --pg-r: 12px;
  --pg-bd: var(--c-border, rgba(0,0,0,.12));
  --pg-fg: var(--c-text-primary, #111);
  --pg-fg2: var(--c-text-secondary, #666);
  --pg-bg: var(--c-bg-soft, #f1f5f9);
  --pg-ac: var(--c-primary, #3b82f6);
  --pg-ac2: var(--c-accent, #f97316);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--pg-gap);
  margin: 18px 0;
  color: var(--pg-fg);
  flex-wrap: wrap;
}

.__PFX__-pager .__PFX__-pg{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--pg-gap);
  padding: 0;
  margin: 0;
  list-style:none;
  flex-wrap: wrap;
}

.__PFX__-pager .__PFX__-pg-it{ display:inline-flex; }

.__PFX__-pager .__PFX__-pg-a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--pg-pad);
  border: 1px solid var(--pg-bd);
  background: var(--pg-bg);
  color: var(--pg-fg);
  border-radius: var(--pg-r);
  text-decoration:none;
  line-height: 1;
  min-width: 34px;
  user-select:none;
  transition: filter .15s ease, transform .15s ease;
}
.__PFX__-pager a.__PFX__-pg-a:hover{ filter: brightness(0.98); transform: translateY(-1px); }

.__PFX__-pager .__PFX__-pg-it.is-current .__PFX__-pg-a{
  background: color-mix(in srgb, var(--pg-ac) 18%, var(--pg-bg));
  border-color: color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd));
  color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg));
  font-weight: 600;
}

.__PFX__-pager .__PFX__-pg-it.is-disabled .__PFX__-pg-a,
.__PFX__-pager .__PFX__-pg-a[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
  pointer-events:none;
}

.__PFX__-pager .__PFX__-pg-summary{
  font-size: 12px;
  color: var(--pg-fg2);
  padding: 4px 10px;
  border: 1px dashed color-mix(in srgb, var(--pg-bd) 80%, transparent);
  border-radius: 999px;
}

/* Tone (0-4) */
.__PFX__-pager.tone0{ --pg-bg: var(--c-bg-soft, #f1f5f9); }
.__PFX__-pager.tone1{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 86%, var(--pg-ac) 14%); }
.__PFX__-pager.tone2{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 88%, var(--pg-ac2) 12%); }
.__PFX__-pager.tone3{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 92%, var(--pg-bd) 8%); }
.__PFX__-pager.tone4{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 82%, var(--pg-ac) 18%); }

/* Variant knobs (v0..v19) */
.__PFX__-pager.v0 { --pg-r: 12px; --pg-gap: 8px; }
.__PFX__-pager.v1 { --pg-r: 999px; --pg-gap: 8px; }
.__PFX__-pager.v2 { --pg-r: 8px; --pg-gap: 10px; --pg-pad: 7px 12px; }
.__PFX__-pager.v3 { --pg-r: 4px; --pg-gap: 10px; --pg-pad: 7px 12px; }
.__PFX__-pager.v4 { --pg-r: 16px; --pg-gap: 6px; --pg-pad: 6px 10px; }
.__PFX__-pager.v5 { --pg-r: 999px; --pg-gap: 6px; --pg-pad: 6px 12px; }
.__PFX__-pager.v6 { --pg-r: 10px; --pg-gap: 12px; --pg-pad: 8px 12px; }
.__PFX__-pager.v7 { --pg-r: 14px; --pg-gap: 6px; --pg-pad: 6px 10px; }
.__PFX__-pager.v8 { --pg-r: 6px; --pg-gap: 8px; --pg-pad: 6px 10px; }
.__PFX__-pager.v9 { --pg-r: 999px; --pg-gap: 12px; --pg-pad: 8px 14px; }
.__PFX__-pager.v10{ --pg-r: 10px; --pg-gap: 6px;  --pg-pad: 5px 10px; }
.__PFX__-pager.v11{ --pg-r: 18px; --pg-gap: 6px;  --pg-pad: 5px 12px; }
.__PFX__-pager.v12{ --pg-r: 4px;  --pg-gap: 14px; --pg-pad: 8px 12px; }
.__PFX__-pager.v13{ --pg-r: 12px; --pg-gap: 14px; --pg-pad: 8px 12px; }
.__PFX__-pager.v14{ --pg-r: 999px;--pg-gap: 10px; --pg-pad: 7px 14px; }
.__PFX__-pager.v15{ --pg-r: 8px;  --pg-gap: 6px;  --pg-pad: 6px 9px;  }
.__PFX__-pager.v16{ --pg-r: 16px; --pg-gap: 10px; --pg-pad: 6px 12px; }
.__PFX__-pager.v17{ --pg-r: 999px;--pg-gap: 4px;  --pg-pad: 6px 12px; }
.__PFX__-pager.v18{ --pg-r: 6px;  --pg-gap: 4px;  --pg-pad: 6px 10px; }
.__PFX__-pager.v19{ --pg-r: 14px; --pg-gap: 12px; --pg-pad: 8px 14px; }

/* Family subtle tweaks */
.__PFX__-pager.f02 .__PFX__-pg-a{ border-style: dashed; }
.__PFX__-pager.f03 .__PFX__-pg-a{ border-width: 2px; }
.__PFX__-pager.f04 .__PFX__-pg-a{ background: color-mix(in srgb, var(--pg-bg) 78%, transparent); backdrop-filter: blur(2px); }
.__PFX__-pager.f05 .__PFX__-pg-a{ min-width: 38px; }

/* Jumper */
.__PFX__-pager .__PFX__-pg-jump{ display:flex; align-items:center; gap:8px; margin-left: 10px; }
.__PFX__-pager .__PFX__-pg-jump label{ font-size: 12px; color: var(--pg-fg2); }
.__PFX__-pager .__PFX__-pg-inp{
  width: 74px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--pg-bd);
  background: var(--pg-bg);
  color: var(--pg-fg);
}
.__PFX__-pager .__PFX__-pg-btn{
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd));
  background: color-mix(in srgb, var(--pg-ac) 16%, var(--pg-bg));
  color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg));
  cursor:pointer;
}