@layer components {
    .pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
    .pagination-wrap a, .pagination-wrap > span {
        display: flex; align-items: center; justify-content: center;
        min-width: 36px; height: 36px; padding: 0 10px;
        border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; color: var(--text); transition: all var(--transition);
    }
    .pagination-wrap a:hover { background: var(--primary-600); color: var(--bg); border-color: var(--primary-600); }
    .pagination-wrap .active span, .pagination-wrap span.active span { background: var(--primary-600); color: var(--bg); border-color: var(--primary-600); }
    .pagination-wrap .disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
    .pagination-wrap .dots { border: none; min-width: auto; padding: 0 4px; }
}