: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;
            }
        }