@layer components {
    .pagination-wrap {
        display: flex; justify-content: center; align-items: center;
        gap: var(--space-1); margin-top: var(--space-10); 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-md);
        font-size: var(--text-sm); color: var(--steel-600);
        transition: all var(--transition);
    }
    .pagination-wrap a:hover { background: var(--primary-600); color: var(--bg); border-color: var(--primary-600); }
    .pagination-wrap .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 var(--space-1); }
}