body.help-center-bg .page-container {
    --help-star-opacity: 0;
    --help-nebula-opacity: 0;
    background: transparent;
    color: inherit;
    min-height: calc(100vh - var(--topbar-height, 72px));
    overflow-x: hidden;
    transition: background 0.6s ease, color 0.3s ease;
}

[data-theme=dark] body.help-center-bg .page-container {
    --help-bg: radial-gradient(120% 120% at 20% 20%, rgba(59, 130, 246, 0.18), transparent 60%),
        radial-gradient(120% 120% at 80% 10%, rgba(14, 165, 233, 0.12), transparent 65%),
        #050b1f;
    --help-star-opacity: 0.85;
    --help-nebula-opacity: 0.55;
    --help-star-color-1: rgba(255, 255, 255, 0.95);
    --help-star-color-2: rgba(125, 211, 252, 0.75);
    --help-star-color-3: rgba(165, 180, 252, 0.7);
    --help-nebula-1: rgba(99, 102, 241, 0.32);
    --help-nebula-2: rgba(14, 165, 233, 0.28);
    --help-nebula-3: rgba(236, 72, 153, 0.22);
    background: var(--help-bg);
}

body.help-center-bg .page-container::before,
body.help-center-bg .page-container::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
}

body.help-center-bg .page-container::before {
    inset: -25vmax;
    background-image:
        radial-gradient(1px 1px at 20px 20px, var(--help-star-color-1) 55%, transparent 60%),
        radial-gradient(1px 1px at 60px 80px, var(--help-star-color-2) 55%, transparent 60%),
        radial-gradient(2px 2px at 120px 140px, var(--help-star-color-3) 55%, transparent 65%);
    background-size: 160px 160px, 220px 220px, 320px 320px;
    animation: helpStarDrift 160s linear infinite;
    opacity: var(--help-star-opacity);
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
}

body.help-center-bg .page-container::after {
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 25px 35px, rgba(255, 255, 255, 0.6) 45%, transparent 60%),
        radial-gradient(2px 2px at 80px 90px, var(--help-star-color-2) 45%, transparent 60%),
        radial-gradient(closest-corner at 20% 20%, var(--help-nebula-1) 0%, transparent 65%),
        radial-gradient(closest-side at 80% 30%, var(--help-nebula-2) 0%, transparent 70%),
        radial-gradient(closest-side at 40% 85%, var(--help-nebula-3) 0%, transparent 70%);
    background-size: 240px 240px, 360px 360px, 100% 100%, 100% 100%, 100% 100%;
    animation: helpStarDriftSlow 260s linear infinite;
    opacity: var(--help-nebula-opacity);
    mix-blend-mode: screen;
    filter: blur(0.5px) saturate(120%);
}


@keyframes helpStarDrift {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-12%, -6%, 0); }
}

@keyframes helpStarDriftSlow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(10%, -4%, 0); }
}

/* 确保页面内容在星空背景之上（避免覆盖弹窗/覆盖层） */
body.help-center-bg .page-container > :not(.modal):not(.modal-backdrop):not(.toast-container):not(.offcanvas) {
    position: relative;
    z-index: 1;
}
