/* 星汇 — 5 套七彩动态背景主题 */

/* ---------- 主题变量（默认：七彩霓虹） ---------- */
body.ms-luxury,
body.ms-luxury[data-xh-bg="rainbow"] {
    --lux-rainbow: linear-gradient(
        -45deg,
        #ff006e,
        #fb5607,
        #ffbe0b,
        #06d6a0,
        #118ab2,
        #8338ec,
        #3a86ff,
        #ff006e
    );
    --lux-rainbow-overlay:
        radial-gradient(ellipse 90% 60% at 20% 10%, rgba(255, 0, 110, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 30%, rgba(58, 134, 255, 0.16), transparent 50%),
        radial-gradient(ellipse 80% 55% at 50% 90%, rgba(6, 214, 160, 0.14), transparent 55%),
        rgba(8, 10, 22, 0.42);
    --lux-bg-base: #0a0a14;
    --lux-rainbow-speed: 16s;
    --lux-text: #eef1f8;
    --lux-muted: #b4c0d8;
    --lux-heading: #ffffff;
    --lux-gold: #ffbe0b;
    --lux-gold-light: #ffe566;
    --lux-gold-dark: #8338ec;
    --lux-blue: #3a86ff;
    --lux-blue-bright: #06d6a0;
    --lux-link: #60a5fa;
    --lux-link-hover: #90e0ef;
    --lux-on-accent: #0a1220;
    --lux-on-accent-hover: #050508;
    --lux-warn: #fbbf24;
    --lux-border: rgba(255, 255, 255, 0.18);
    --lux-border-accent: rgba(255, 190, 11, 0.38);
    --lux-gradient-gold: linear-gradient(135deg, #8338ec 0%, #3a86ff 32%, #06d6a0 68%, #ffbe0b 100%);
    --lux-gradient-accent: linear-gradient(135deg, #ff006e 0%, #8338ec 30%, #3a86ff 55%, #06d6a0 80%, #ffbe0b 100%);
}

body.ms-luxury[data-xh-bg="sunset"] {
    --lux-rainbow: linear-gradient(
        -45deg,
        #ff006e,
        #ff4757,
        #ff6348,
        #ffa502,
        #ffbe0b,
        #ff6b81,
        #e55039,
        #ff006e
    );
    --lux-rainbow-overlay:
        radial-gradient(ellipse 85% 55% at 15% 15%, rgba(255, 71, 87, 0.22), transparent 55%),
        radial-gradient(ellipse 75% 50% at 85% 25%, rgba(255, 165, 2, 0.18), transparent 50%),
        radial-gradient(ellipse 80% 50% at 50% 95%, rgba(255, 107, 129, 0.15), transparent 55%),
        rgba(18, 8, 12, 0.45);
    --lux-bg-base: #120810;
    --lux-rainbow-speed: 14s;
    --lux-text: #fce8e4;
    --lux-muted: #d4a89a;
    --lux-heading: #fff5f0;
    --lux-gold: #ffa502;
    --lux-gold-light: #ffbe0b;
    --lux-gold-dark: #e55039;
    --lux-blue: #ff6348;
    --lux-blue-bright: #ff6b81;
    --lux-link: #ffb347;
    --lux-link-hover: #ffd166;
    --lux-on-accent: #1a0806;
    --lux-on-accent-hover: #0d0403;
    --lux-warn: #ffd166;
    --lux-border: rgba(255, 180, 140, 0.2);
    --lux-border-accent: rgba(255, 165, 2, 0.42);
    --lux-gradient-gold: linear-gradient(135deg, #e55039 0%, #ff6348 32%, #ffa502 68%, #ffbe0b 100%);
    --lux-gradient-accent: linear-gradient(135deg, #ff006e 0%, #ff4757 28%, #ffa502 58%, #ffbe0b 100%);
}

body.ms-luxury[data-xh-bg="ocean"] {
    --lux-rainbow: linear-gradient(
        -45deg,
        #0077b6,
        #00b4d8,
        #48cae4,
        #90e0ef,
        #03045e,
        #4361ee,
        #4cc9f0,
        #0077b6
    );
    --lux-rainbow-overlay:
        radial-gradient(ellipse 90% 60% at 25% 10%, rgba(0, 180, 216, 0.2), transparent 55%),
        radial-gradient(ellipse 70% 50% at 75% 35%, rgba(67, 97, 238, 0.18), transparent 50%),
        radial-gradient(ellipse 80% 55% at 50% 90%, rgba(72, 202, 228, 0.14), transparent 55%),
        rgba(6, 12, 28, 0.48);
    --lux-bg-base: #060c1c;
    --lux-rainbow-speed: 18s;
    --lux-text: #e0f4ff;
    --lux-muted: #94c5e8;
    --lux-heading: #f0f9ff;
    --lux-gold: #00b4d8;
    --lux-gold-light: #90e0ef;
    --lux-gold-dark: #0077b6;
    --lux-blue: #4361ee;
    --lux-blue-bright: #4cc9f0;
    --lux-link: #48cae4;
    --lux-link-hover: #90e0ef;
    --lux-on-accent: #031525;
    --lux-on-accent-hover: #020c18;
    --lux-warn: #7dd3fc;
    --lux-border: rgba(144, 224, 239, 0.2);
    --lux-border-accent: rgba(72, 202, 228, 0.42);
    --lux-gradient-gold: linear-gradient(135deg, #03045e 0%, #0077b6 32%, #00b4d8 68%, #90e0ef 100%);
    --lux-gradient-accent: linear-gradient(135deg, #03045e 0%, #4361ee 35%, #00b4d8 65%, #90e0ef 100%);
}

body.ms-luxury[data-xh-bg="neon"] {
    --lux-rainbow: linear-gradient(
        -45deg,
        #39ff14,
        #00ffff,
        #ff00ff,
        #bf00ff,
        #ffff00,
        #00ff87,
        #7b2cbf,
        #39ff14
    );
    --lux-rainbow-overlay:
        radial-gradient(ellipse 85% 55% at 20% 12%, rgba(57, 255, 20, 0.16), transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 28%, rgba(255, 0, 255, 0.15), transparent 50%),
        radial-gradient(ellipse 80% 55% at 50% 92%, rgba(0, 255, 255, 0.12), transparent 55%),
        rgba(4, 10, 8, 0.5);
    --lux-bg-base: #040a08;
    --lux-rainbow-speed: 12s;
    --lux-text: #e8ffe8;
    --lux-muted: #a8e6c8;
    --lux-heading: #f0fff4;
    --lux-gold: #39ff14;
    --lux-gold-light: #00ffff;
    --lux-gold-dark: #00ff87;
    --lux-blue: #ff00ff;
    --lux-blue-bright: #00ffff;
    --lux-link: #39ff14;
    --lux-link-hover: #00ffff;
    --lux-on-accent: #041208;
    --lux-on-accent-hover: #020a05;
    --lux-warn: #ffff00;
    --lux-border: rgba(57, 255, 20, 0.2);
    --lux-border-accent: rgba(0, 255, 255, 0.38);
    --lux-gradient-gold: linear-gradient(135deg, #7b2cbf 0%, #ff00ff 30%, #00ffff 65%, #39ff14 100%);
    --lux-gradient-accent: linear-gradient(135deg, #39ff14 0%, #00ffff 35%, #ff00ff 68%, #ffff00 100%);
}

body.ms-luxury[data-xh-bg="royal"] {
    --lux-rainbow: linear-gradient(
        -45deg,
        #7400b8,
        #6930c3,
        #5e60ce,
        #c9a227,
        #e8c547,
        #8338ec,
        #b5179e,
        #7400b8
    );
    --lux-rainbow-overlay:
        radial-gradient(ellipse 90% 60% at 22% 10%, rgba(131, 56, 236, 0.2), transparent 55%),
        radial-gradient(ellipse 70% 50% at 78% 30%, rgba(201, 162, 39, 0.16), transparent 50%),
        radial-gradient(ellipse 80% 55% at 50% 90%, rgba(116, 0, 184, 0.14), transparent 55%),
        rgba(10, 8, 22, 0.46);
    --lux-bg-base: #0a0816;
    --lux-rainbow-speed: 20s;
    --lux-text: #ece8f8;
    --lux-muted: #b8a8d8;
    --lux-heading: #f5f0ff;
    --lux-gold: #c9a227;
    --lux-gold-light: #e8c547;
    --lux-gold-dark: #8338ec;
    --lux-blue: #8338ec;
    --lux-blue-bright: #b5179e;
    --lux-link: #e8c547;
    --lux-link-hover: #f5d76e;
    --lux-on-accent: #120818;
    --lux-on-accent-hover: #0a0410;
    --lux-warn: #f0c84a;
    --lux-border: rgba(201, 162, 39, 0.22);
    --lux-border-accent: rgba(232, 197, 71, 0.42);
    --lux-gradient-gold: linear-gradient(135deg, #7400b8 0%, #8338ec 32%, #c9a227 68%, #e8c547 100%);
    --lux-gradient-accent: linear-gradient(135deg, #7400b8 0%, #8338ec 35%, #c9a227 65%, #e8c547 100%);
}

/* ---------- 应用动态底（覆盖 theme-luxury 固定值） ---------- */
body.ms-luxury {
    background-color: var(--lux-bg-base) !important;
    color: var(--lux-text);
}

@media (prefers-reduced-motion: no-preference) {
    body.ms-luxury :where(h1, h2, h3, h4, h5, h6, p, a, span, li, strong, button, label, .xh-bg-name, .xh-lang-trigger, .xh-bg-trigger) {
        transition: color 0.32s ease, -webkit-text-fill-color 0.32s ease, border-color 0.32s ease;
    }
}

body.ms-luxury::before {
    background: var(--lux-rainbow);
    animation-duration: var(--lux-rainbow-speed);
}

body.ms-luxury::after {
    background: var(--lux-rainbow-overlay);
}

/* 防篡改：永不显示横幅（静默修复） */
[class*="ms-integrity-banner"],
#ms-integrity-banner,
.ms-tamper-banner {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---------- 全站字体 · 随 5 套主题渐变联动 ---------- */
@keyframes xh-theme-text-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.ms-luxury .lux-text-gradient,
body.ms-luxury .landing-bgimg .landing-content h1 .ms-hero-title-line,
body.ms-luxury .landing-bgimg .landing-content h1 .ms-hero-title-accent,
body.ms-luxury .ms-stat-pill strong,
body.ms-luxury .ms-hero-card strong,
body.ms-luxury .section-capture .section-title span.subtitle,
body.ms-luxury .section-capture .section-title h2,
body.ms-luxury .lux-feat-card-title,
body.ms-luxury .lux-feat-card-badge,
body.ms-luxury .lux-feat-chip,
body.ms-luxury .demo-pass .demo-pass-area .pass-title h4.title,
body.ms-luxury .lux-notice-head .section-title h2,
body.ms-luxury .lux-notice-card h3,
body.ms-luxury .lux-notice-panel h3,
body.ms-luxury .lux-notice-alert-body strong,
body.ms-luxury .land-copyright .footer-sitemap,
body.ms-luxury .header-area .nav-wrap nav .navbar-collapse ul.nav li.menu-link:hover a,
body.ms-luxury .header-area .nav-wrap nav .navbar-collapse ul.nav li.menu-link.active a,
body.ms-luxury .land-copyright .footer-nav a:hover,
body.ms-luxury .demo-store-area .demo-store-item ul.store-ul li.store-li:hover .item-area .demo-name span,
body.ms-luxury .lux-cat-item:hover span:last-child,
body.ms-luxury .ms-hero-card:hover strong {
    background-image: var(--lux-gradient-accent);
    background-size: 220% 220%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
    body.ms-luxury .lux-text-gradient,
    body.ms-luxury .landing-bgimg .landing-content h1 .ms-hero-title-line,
    body.ms-luxury .landing-bgimg .landing-content h1 .ms-hero-title-accent,
    body.ms-luxury .ms-stat-pill strong,
    body.ms-luxury .section-capture .section-title span.subtitle,
    body.ms-luxury .section-capture .section-title h2,
    body.ms-luxury .lux-feat-card-title,
    body.ms-luxury .lux-feat-card-badge,
    body.ms-luxury .lux-feat-chip,
    body.ms-luxury .demo-pass .demo-pass-area .pass-title h4.title,
    body.ms-luxury .lux-notice-head .section-title h2,
    body.ms-luxury .lux-notice-card h3,
    body.ms-luxury .lux-notice-panel h3,
    body.ms-luxury .header-area .nav-wrap nav .navbar-collapse ul.nav li.menu-link:hover a,
    body.ms-luxury .header-area .nav-wrap nav .navbar-collapse ul.nav li.menu-link.active a {
        animation: xh-theme-text-flow var(--lux-rainbow-speed) ease infinite;
    }
}

body.ms-luxury p,
body.ms-luxury li,
body.ms-luxury label,
body.ms-luxury .ms-hero-desc,
body.ms-luxury .lux-feat-card-desc,
body.ms-luxury .lux-notice-card p,
body.ms-luxury .lux-notice-list li,
body.ms-luxury .lux-feat-points li,
body.ms-luxury .section-capture .section-title p,
body.ms-luxury .section-capture .section-title h2 span,
body.ms-luxury .ms-hero-card .ms-hero-card-text span,
body.ms-luxury .land-copyright .copyright p,
body.ms-luxury .land-copyright .copyright span,
body.ms-luxury .land-copyright .footer-nav a,
body.ms-luxury .demo-store-area .demo-store-item ul.store-ul li.store-li .item-area .demo-name p,
body.ms-luxury .lux-pass-desc,
body.ms-luxury .header-area .nav-wrap nav .navbar-collapse ul.nav li.menu-link a {
    color: var(--lux-muted);
}

body.ms-luxury .lux-cat-item span:last-child {
    color: var(--lux-gold-light);
}

body.ms-luxury a:not(.ms-btn):not(.store-button):not(.scroll-top):not(.footer-sitemap) {
    color: var(--lux-link);
}

body.ms-luxury a:not(.ms-btn):not(.store-button):not(.scroll-top):hover {
    color: var(--lux-link-hover);
}

body.ms-luxury .lux-notice-list li::before,
body.ms-luxury .lux-feat-points li::before {
    background: var(--lux-gold);
}

body.ms-luxury .lux-notice-list li::before {
    color: var(--lux-gold);
    -webkit-text-fill-color: var(--lux-gold);
}

/* ---------- 主题选择器触发按钮 ---------- */
.xh-bg-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--lux-text, #e8eaf0);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.xh-bg-trigger:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--lux-border-accent);
}

.xh-bg-trigger-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(
        #ff006e,
        #fb5607,
        #ffbe0b,
        #06d6a0,
        #118ab2,
        #8338ec,
        #3a86ff,
        #ff006e
    );
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
    animation: xh-bg-icon-spin 6s linear infinite;
}

@keyframes xh-bg-icon-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .xh-bg-trigger-icon {
        animation: none;
    }
}

/* ---------- 主题选择弹窗 ---------- */
.xh-bg-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.xh-bg-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.xh-bg-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.xh-bg-panel {
    position: relative;
    width: min(520px, 96vw);
    max-height: min(85vh, 640px);
    overflow: auto;
    padding: 24px 22px 28px;
    border-radius: 16px;
    background: rgba(12, 16, 32, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.xh-bg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.xh-bg-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #f3f4f6;
}

.xh-bg-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.xh-bg-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.xh-bg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.xh-bg-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 6px);
    margin: 0 auto;
    width: 100%;
}

.xh-bg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.xh-bg-item:hover {
    border-color: var(--lux-border-accent);
    transform: translateY(-2px);
}

.xh-bg-item.is-active {
    border-color: var(--lux-gold);
    box-shadow: 0 0 0 1px var(--lux-border-accent), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.xh-bg-preview {
    width: 100%;
    height: 72px;
    border-radius: 10px;
    background-size: 400% 400%;
    animation: xh-rainbow-flow 8s ease infinite;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.xh-bg-preview--rainbow {
    background: linear-gradient(-45deg, #ff006e, #fb5607, #ffbe0b, #06d6a0, #118ab2, #8338ec, #3a86ff, #ff006e);
}

.xh-bg-preview--sunset {
    background: linear-gradient(-45deg, #ff006e, #ff4757, #ff6348, #ffa502, #ffbe0b, #ff6b81, #e55039, #ff006e);
}

.xh-bg-preview--ocean {
    background: linear-gradient(-45deg, #0077b6, #00b4d8, #48cae4, #90e0ef, #03045e, #4361ee, #4cc9f0, #0077b6);
}

.xh-bg-preview--neon {
    background: linear-gradient(-45deg, #39ff14, #00ffff, #ff00ff, #bf00ff, #ffff00, #00ff87, #7b2cbf, #39ff14);
}

.xh-bg-preview--royal {
    background: linear-gradient(-45deg, #7400b8, #6930c3, #5e60ce, #c9a227, #e8c547, #8338ec, #b5179e, #7400b8);
}

.xh-bg-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--lux-text, #e8eaf0);
    text-align: center;
}

@media (max-width: 640px) {
    .xh-bg-trigger-label {
        display: none;
    }
    .xh-bg-grid {
        grid-template-columns: 1fr;
    }
    .xh-bg-item:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }
    .xh-bg-trigger {
        padding: 6px 10px;
        margin-left: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xh-bg-preview {
        animation: none;
        background-size: cover;
    }
}