.pagination { display: flex; width: fit-content; max-width: 100%; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; margin: 18px auto 0; padding: 5px; border: 1px solid var(--glass-edge); border-radius: 16px; background: var(--control-fill); box-shadow: inset 0 1px 0 var(--glass-highlight); }
.pagination:empty { display: none; }
.page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 36px; padding: 0 9px; border: 1px solid transparent; background: transparent; border-radius: 11px; color: var(--text-dim); font-size: 13px; cursor: pointer; }
.page-btn:hover:not(:disabled) { border-color: var(--accent); }
.page-btn.active { background: linear-gradient(150deg, rgb(255 255 255 / 30%), transparent), var(--accent); border-color: var(--glass-edge); color: var(--btn-text); }
.page-arrow { font-size: 22px; line-height: 1; }
.pagination .motion-indicator { border-radius: 11px; background: linear-gradient(145deg, rgb(255 255 255 / 38%), transparent), rgb(135 206 235 / 48%); }
.page-btn:disabled { opacity: .45; cursor: not-allowed; }
.page-ellipsis { padding: 0 4px; color: var(--text-dim); font-size: 13px; }
@media (max-width: 520px) { .pagination { gap: 3px; } .page-btn { min-width: 32px; padding: 0 7px; } .page-btn[data-distant="true"] { display: none; } }