:root {
    --page-bg-top: #e7f0f7;
    --page-bg-mid: #f5f2e9;
    --page-bg-bottom: #e7efe6;
    --panel-border: #d5dee8;
    --panel-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
}

.page-bg {
    background:
        radial-gradient(1200px 520px at 8% -8%, rgba(56, 189, 248, 0.18), transparent 62%),
        radial-gradient(900px 420px at 92% 4%, rgba(250, 204, 21, 0.15), transparent 58%),
        linear-gradient(180deg, var(--page-bg-top) 0%, var(--page-bg-mid) 48%, var(--page-bg-bottom) 100%);
    background-attachment: fixed;
}

.page-bg .bg-white {
    background-color: rgba(255, 255, 255, 0.88) !important;
}

.page-bg .bg-gray-50,
.page-bg .bg-stone-50,
.page-bg .bg-\[\#f8f8f5\] {
    background-color: rgba(247, 251, 255, 0.78) !important;
}

.page-bg .bg-slate-900,
.page-bg .bg-stone-900,
.page-bg .bg-\[\#181710\] {
    background-color: #1f2937 !important;
}

.page-bg .border-gray-100,
.page-bg .border-gray-200,
.page-bg .border-slate-100,
.page-bg .border-slate-200,
.page-bg .border-slate-700,
.page-bg .border-slate-800 {
    border-color: var(--panel-border) !important;
}

.page-bg .shadow-sm,
.page-bg .shadow-md,
.page-bg .shadow-lg,
.page-bg .shadow-xl,
.page-bg .shadow-2xl {
    box-shadow: var(--panel-shadow) !important;
}

@media (max-width: 767px) {
    .page-bg {
        background-attachment: scroll;
    }
}

.pagination-modern {
    flex-wrap: wrap;
}

.pagination-modern .page-nav {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid #d5dee8;
    color: #0f172a;
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.pagination-modern .page-nav:hover {
    background-color: #f1f5f9;
}

.pagination-modern .page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem;
    border-radius: 0.75rem;
}

.pagination-modern .page-number {
    display: flex;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid #d5dee8;
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-modern .page-number:hover {
    background-color: #f1f5f9;
}

.pagination-modern .page-number.is-current,
.pagination-modern .page-number.active,
.pagination-modern .page-number.current {
    background-color: #fbbf24;
    border-color: #fbbf24;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.28);
}

.pagination-modern .page-total {
    display: flex;
    height: 2.5rem;
    padding: 0 0.875rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid #d5dee8;
    background-color: #ffffff;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pagination-modern .page-numbers [aria-current="page"],
.pagination-modern .page-numbers .is-current,
.pagination-modern .page-numbers .active,
.pagination-modern .page-numbers .current {
    background-color: #fbbf24;
    border-color: #fbbf24;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.28);
}

.pagination-modern .page-ellipsis {
    display: flex;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #64748b;
    font-weight: 700;
    user-select: none;
}