.sys-pagination{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--color-surface-raised,#fff);border:1px solid var(--color-border,#e5e7eb);border-radius:9999px;box-shadow:0 8px 30px #0000002e}.sys-pagination__dots{display:flex;gap:.375rem;max-width:60vw;overflow-x:auto}.sys-pagination__dot,.sys-pagination__nav{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 .5rem;border:1px solid var(--color-border,#e5e7eb);border-radius:9999px;background:var(--color-bg,#fff);color:var(--color-text,#1a1a2e);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.sys-pagination__nav{font-size:1.25rem;line-height:1}.sys-pagination__dot.is-open,.sys-pagination__dot:hover,.sys-pagination__nav:hover{border-color:var(--color-primary,#3b82f6)}.sys-pagination__dot.is-open{background:var(--color-primary,#3b82f6);color:#fff}.sys-pagination-enter-active,.sys-pagination-leave-active{transition:opacity .25s ease,transform .25s ease}.sys-pagination-enter-from,.sys-pagination-leave-to{opacity:0;transform:translate(-50%) translateY(12px)}