/* ================================================================
   Zibll Smart Bundle Hub - 对齐 zibll 官方定价页（深色 · 多彩强调 · 发光推荐卡）
   每张卡片通过内联 --accent / --accent-rgb 注入专属强调色
   支持跟随主题深浅模式切换
   ================================================================ */

:root {
    --zbh-bg: #0a0a12;
    --zbh-bg-2: #0e0e18;
    --zbh-card-bg: #16161f;
    --zbh-card-border: rgba(255, 255, 255, 0.07);
    --zbh-text-main: #f4f6fb;
    --zbh-text-sub: #c8cdda;
    --zbh-text-muted: #7e859a;
    --zbh-pink: #ff4d8d;
}

/* 浅色模式变量 */
body:not(.dark-theme) {
    --zbh-bg: #f8f9fc;
    --zbh-bg-2: #ffffff;
    --zbh-card-bg: #ffffff;
    --zbh-card-border: rgba(0, 0, 0, 0.08);
    --zbh-text-main: #1a1a2e;
    --zbh-text-sub: #4a4a5e;
    --zbh-text-muted: #8a8a9e;
}

/* ===== 画布：克制的深色 + 顶部微光 ===== */
.zbh-page {
    position: relative;
    min-height: 100vh;
    padding-bottom: 90px;
    color: var(--zbh-text-main);
    background:
        radial-gradient(900px 460px at 50% -8%, rgba(124,92,255,0.16), transparent 62%),
        linear-gradient(180deg, var(--zbh-bg) 0%, var(--zbh-bg-2) 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

/* 浅色模式下的特殊调整 */
body:not(.dark-theme) .zbh-page {
    background:
        radial-gradient(900px 460px at 50% -8%, rgba(124,92,255,0.08), transparent 62%),
        linear-gradient(180deg, var(--zbh-bg) 0%, var(--zbh-bg-2) 100%);
}

body:not(.dark-theme) .zbh-orb {
    opacity: 0.12;
}

body:not(.dark-theme) .zbh-banner-bg {
    opacity: 0.4;
}

body:not(.dark-theme) .zbh-plan {
    box-shadow: 0 24px 50px -28px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}

body:not(.dark-theme) .zbh-plan:hover {
    box-shadow: 0 28px 60px -26px rgba(0,0,0,0.2), 0 0 40px -16px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 rgba(255,255,255,1);
}

body:not(.dark-theme) .zbh-banner-title {
    text-shadow: 0 2px 20px rgba(124,92,255,0.15);
    color: #1a1a2e !important;
}

body:not(.dark-theme) .zbh-banner-desc {
    color: #4a4a5e !important;
}

body:not(.dark-theme) .zbh-banner-tag {
    color: #7c5cff !important;
    background: rgba(124,92,255,0.1);
    border-color: rgba(124,92,255,0.3);
}

body:not(.dark-theme) .zbh-plan-name {
    color: var(--accent) !important;
}

body:not(.dark-theme) .zbh-plan-desc {
    color: #6a6a7e !important;
}

body:not(.dark-theme) .zbh-plan-price strong {
    color: var(--accent) !important;
}

body:not(.dark-theme) .zbh-plan-features li {
    color: #4a4a5e !important;
}

body:not(.dark-theme) .zbh-stat-label {
    color: #6a6a7e !important;
}

body:not(.dark-theme) .zbh-stat-value {
    color: #1a1a2e !important;
}

body:not(.dark-theme) .zbh-cta {
    background: linear-gradient(120deg, #f0f4ff 0%, #e8ecff 45%, #f5f0ff 100%);
    border-color: rgba(124,92,255,0.15);
}

body:not(.dark-theme) .zbh-cta-title {
    color: #1a1a2e !important;
}

body:not(.dark-theme) .zbh-cta-desc {
    color: #4a4a5e !important;
}

body:not(.dark-theme) .zbh-cta-btn {
    color: #fff !important;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
}

body:not(.dark-theme) .zbh-trust {
    background: rgba(124,92,255,0.06);
    border-color: rgba(124,92,255,0.15);
}

body:not(.dark-theme) .zbh-trust-text strong {
    color: #1a1a2e !important;
}

body:not(.dark-theme) .zbh-trust-text span {
    color: #6a6a7e !important;
}

body:not(.dark-theme) .zbh-plan-sale-hint {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.3);
    color: #b45309 !important;
}

body:not(.dark-theme) .zbh-price-badge {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent) !important;
}

body:not(.dark-theme) .zbh-price-save {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.9), rgba(var(--accent-rgb),0.7));
    color: #fff !important;
}

/* 极淡漂浮光斑（保留氛围但不抢戏） */
.zbh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}
.zbh-orb--1 { width: 460px; height: 460px; top: -140px; left: 8%;  background: #7c5cff; }
.zbh-orb--2 { width: 420px; height: 420px; top: 60px;  right: 6%; background: var(--zbh-pink); }
.zbh-orb--3 { display: none; }

.zbh-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== 顶部 Banner ===== */
.zbh-banner { position: relative; padding: 100px 0 28px; text-align: center; }
.zbh-banner-content { position: relative; z-index: 2; }
/* 英雄区缓动极光背景 */
.zbh-banner-bg {
    position: absolute;
    top: -120px;
    left: 50%;
    width: 900px;
    height: 560px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 30% 40%, rgba(124,92,255,0.32), transparent 70%),
        radial-gradient(closest-side at 70% 35%, rgba(255,77,141,0.22), transparent 70%),
        radial-gradient(closest-side at 50% 65%, rgba(59,158,251,0.22), transparent 70%);
    filter: blur(50px);
    opacity: 0.7;
    animation: zbhAurora 12s ease-in-out infinite alternate;
}

.zbh-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(124,92,255,0.12);
    border: 1px solid rgba(124,92,255,0.35);
    color: #c9bdff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 100px;
    margin-bottom: 24px;
    letter-spacing: 1.5px;
    animation: zbhFadeUp 0.6s ease-out both;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}
.zbh-banner-tag:hover {
    background: rgba(124,92,255,0.2);
    border-color: rgba(124,92,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124,92,255,0.3);
}
.zbh-banner-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--zbh-pink);
    box-shadow: 0 0 10px 2px rgba(255,77,141,0.8);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.zbh-banner-title {
    font-size: 52px;
    font-weight: 800;
    margin: 0 0 20px;
    letter-spacing: -1.5px;
    line-height: 1.15;
    color: #fff;
    animation: zbhFadeUp 0.6s ease-out both;
    text-shadow: 0 2px 20px rgba(124,92,255,0.3);
}

.zbh-banner-desc {
    font-size: 18px;
    color: var(--zbh-text-sub);
    max-width: 680px;
    margin: 0 auto 8px;
    line-height: 1.7;
    animation: zbhFadeUp 0.8s ease-out both;
    font-weight: 500;
}

/* ===== 卡片布局：CSS Grid 自适应，任意数量都不崩 ===== */
.zbh-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px;
    margin-top: 28px;
    max-width: 100%;
}
/* 1 张时居中限宽，避免单卡被拉得过宽 */
.zbh-plans:has(.zbh-plan:only-child) {
    grid-template-columns: minmax(0, 540px);
    justify-content: center;
}
/* 2 张时两列等宽，限制最大宽度 */
.zbh-plans:has(.zbh-plan:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
/* 3 张时三列等宽 */
.zbh-plans:has(.zbh-plan:nth-child(3):last-child):not(:has(.zbh-plan:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* 4张及以上时，每行最多3张 */
.zbh-plans:has(.zbh-plan:nth-child(4)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ===== 单个方案卡片 ===== */
.zbh-plan {
    --accent: #6366f1;
    --accent-rgb: 99,102,241;
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 42px 36px;
    border-radius: 24px;
    background: var(--zbh-card-bg);
    border: 1px solid var(--zbh-card-border);
    box-shadow: 0 24px 50px -28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), border-color 0.4s ease, box-shadow 0.4s ease;
    animation: zbhFadeUp 0.9s ease-out both;
    cursor: pointer;
    max-width: 580px;
    min-width: 360px;
    width: 100%;
}
/* 鼠标跟随聚光高光 */
.zbh-plan::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--accent-rgb), 0.16), transparent 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}
.zbh-plan:hover::after { opacity: 1; }
/* 顶部玻璃高光线 */
.zbh-plan-header,
.zbh-plan-price,
.zbh-plan-info,
.zbh-plan-action { position: relative; z-index: 2; }
.zbh-plan:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 28px 60px -26px rgba(0,0,0,0.9), 0 0 40px -16px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* 推荐卡：整圈发光强调描边 */
.zbh-plan--featured {
    border-color: rgba(var(--accent-rgb), 0.7);
    background:
        radial-gradient(130% 70% at 50% 0%, rgba(var(--accent-rgb),0.12), transparent 60%),
        var(--zbh-card-bg);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 24px 60px -24px rgba(0,0,0,0.85), 0 0 55px -18px rgba(var(--accent-rgb),0.5);
}
.zbh-plan--featured:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.45), 0 30px 70px -24px rgba(0,0,0,0.9), 0 0 75px -14px rgba(var(--accent-rgb),0.6);
}

/* 推荐胶囊：右上角 */
.zbh-plan-tag {
    position: absolute;
    top: 22px;
    right: 22px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 100px;
    box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb), 0.9);
    z-index: 3;
}

/* ===== 头部 ===== */
.zbh-plan-header { margin-bottom: 22px; }

.zbh-plan-gallery {
    width: 100%;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.zbh-plan-gallery.is-empty {
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb),0.30), transparent 60%),
        linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(255,255,255,0.03));
}
.zbh-plan-gallery.is-empty::before {
    content: "\f03e";
    font-family: "FontAwesome", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; color: rgba(255,255,255,0.28); z-index: 2;
}
.zbh-plan-gallery .swiper-slide { overflow: hidden; }
.zbh-plan-gallery .swiper-slide img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s cubic-bezier(0.4,0,0.2,1);
}
.zbh-plan:hover .zbh-plan-gallery img { transform: scale(1.07); }
.zbh-plan-gallery::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 46px;
    background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
    z-index: 1; pointer-events: none;
}
.zbh-plan-gallery .swiper-pagination { bottom: 10px !important; z-index: 2; }
.zbh-plan-gallery .swiper-pagination-bullet { background: #fff; opacity: 0.45; }
.zbh-plan-gallery .swiper-pagination-bullet-active { background: var(--accent); opacity: 1; }
.zbh-plan-gallery .swiper-button-next,
.zbh-plan-gallery .swiper-button-prev {
    color: #fff; width: 30px; height: 30px;
    background: rgba(0,0,0,0.35); border-radius: 50%;
    opacity: 0; transition: all 0.3s ease;
}
.zbh-plan-gallery .swiper-button-next::after,
.zbh-plan-gallery .swiper-button-prev::after { font-size: 13px; font-weight: bold; }
.zbh-plan:hover .zbh-plan-gallery .swiper-button-next,
.zbh-plan:hover .zbh-plan-gallery .swiper-button-prev { opacity: 1; }

/* 方案名称用专属强调色 */
.zbh-plan-name {
    font-size: 23px;
    font-weight: 800;
    color: var(--accent);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.zbh-plan-desc {
    font-size: 13.5px;
    color: var(--zbh-text-muted);
    line-height: 1.6;
    margin: 0;
    min-height: 20px;
}

/* ===== 价格 ===== */
.zbh-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.zbh-plan-price strong {
    font-size: 38px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -1px;
    line-height: 1;
}
.zbh-plan-price--tbd { font-size: 26px !important; color: var(--zbh-text-muted) !important; }

.zbh-price-promo { display: inline-flex; align-items: center; gap: 8px; }
.zbh-price-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    padding: 3px 9px;
    border-radius: 6px;
    white-space: nowrap;
}
.zbh-price-promo del { font-size: 14px; color: var(--zbh-text-muted); text-decoration: line-through; }

/* 浅色模式下价格标签优化 */
body:not(.dark-theme) .zbh-price-promo del {
    color: #8a8a9e !important;
}

/* 节省金额标 */
.zbh-price-save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    align-self: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--accent-rgb),0.7));
    padding: 4px 10px;
    border-radius: 7px;
    box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb),0.8);
    white-space: nowrap;
}

/* ===== 信息区（撑开，把按钮顶到底部） ===== */
.zbh-plan-info { flex: 1; display: flex; flex-direction: column; }

.zbh-plan-features { list-style: none; padding: 0; margin: 0 0 24px; }
.zbh-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 8px 0;
    font-size: 14.5px;
    color: var(--zbh-text-sub);
    line-height: 1.5;
}
.zbh-plan-features li i {
    flex: 0 0 auto;
    margin-top: 1px;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.15);
}

/* ===== 统计区 ===== */
.zbh-plan-stats {
    display: flex;
    gap: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
}
.zbh-stat-item { display: flex; flex-direction: column; }
.zbh-stat-label { font-size: 12px; color: var(--zbh-text-muted); margin-bottom: 4px; }
.zbh-stat-value { font-size: 19px; font-weight: 700; color: var(--zbh-text-main); }

/* ===== 底部按钮 ===== */
.zbh-plan-action { margin-top: 26px; }
.zbh-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s ease;
    /* 普通卡：强调色描边按钮 */
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent) !important;
    border: 2px solid rgba(var(--accent-rgb), 0.45);
    position: relative;
    overflow: hidden;
}
.zbh-plan-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.zbh-plan-btn:hover::before {
    left: 100%;
}
.zbh-plan-btn:hover {
    background: var(--accent);
    color: #fff !important;
    box-shadow: 0 12px 26px -8px rgba(var(--accent-rgb), 0.7);
    transform: translateY(-2px);
    border-color: var(--accent);
}

/* 非销售商品按钮样式（了解详情） */
.zbh-plan-btn--link {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent) !important;
    border: 2px solid rgba(var(--accent-rgb), 0.6);
}
.zbh-plan-btn--link:hover {
    background: var(--accent);
    color: #fff !important;
    box-shadow: 0 12px 26px -8px rgba(var(--accent-rgb), 0.7);
    transform: translateY(-2px);
    border-color: var(--accent);
}
/* 推荐卡：实心强调按钮 */
.zbh-plan--featured .zbh-plan-btn {
    background: var(--accent);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 12px 28px -8px rgba(var(--accent-rgb), 0.8);
}
.zbh-plan--featured .zbh-plan-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* ===== 服务保障徽章条（多彩图标） ===== */
.zbh-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 52px;
    padding: 24px 26px;
    border-radius: 18px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
}
.zbh-trust-item {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1 1 180px;
    min-width: 170px;
    padding: 4px 8px;
}
.zbh-trust-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.zbh-trust-text { display: flex; flex-direction: column; line-height: 1.4; }
.zbh-trust-text strong { font-size: 14.5px; font-weight: 700; color: var(--zbh-text-main); }
.zbh-trust-text span { font-size: 12px; color: var(--zbh-text-muted); margin-top: 2px; }

/* 每个保障项不同色 */
.zbh-trust-item:nth-child(5n+1) .zbh-trust-icon { color: #3b9efb; background: rgba(59,158,251,0.14); }
.zbh-trust-item:nth-child(5n+2) .zbh-trust-icon { color: #ff4d8d; background: rgba(255,77,141,0.14); }
.zbh-trust-item:nth-child(5n+3) .zbh-trust-icon { color: #16d6a6; background: rgba(22,214,166,0.14); }
.zbh-trust-item:nth-child(5n+4) .zbh-trust-icon { color: #a855f7; background: rgba(168,85,247,0.14); }
.zbh-trust-item:nth-child(5n+5) .zbh-trust-icon { color: #f59e0b; background: rgba(245,158,11,0.14); }
.zbh-trust-item:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.06); }

/* ===== 空状态 ===== */
.zbh-empty { text-align: center; padding: 90px 20px; color: var(--zbh-text-muted); font-size: 16px; }

/* ===== 单图画廊（不走 Swiper，静态渲染） ===== */
.zbh-plan-gallery--single {
    width: 100%;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.zbh-plan-gallery--single a { display: block; width: 100%; height: 100%; }
.zbh-plan-gallery--single img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.zbh-plan:hover .zbh-plan-gallery--single img { transform: scale(1.07); }
.zbh-plan-gallery--single.is-empty {
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb),0.30), transparent 60%),
        linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(255,255,255,0.03));
}
.zbh-plan-gallery--single.is-empty::before {
    content: "\f03e";
    font-family: "FontAwesome", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; color: rgba(255,255,255,0.28); z-index: 2;
}

/* ===== 停售/敬请期待 标签 ===== */
.zbh-plan-tag--soon { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 6px 18px -4px rgba(245,158,11,0.9); }
.zbh-plan-tag--only { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 6px 18px -4px rgba(100,116,139,0.9); }

/* ===== 热销中标签 ===== */
.zbh-plan-tag--hot {
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 6px 18px -4px rgba(239,68,68,0.9);
    animation: hotPulse 2s ease-in-out infinite;
}
@keyframes hotPulse {
    0%, 100% {
        box-shadow: 0 6px 18px -4px rgba(239,68,68,0.9);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 8px 24px -4px rgba(239,68,68,1);
        transform: scale(1.05);
    }
}

/* ===== 停售卡片：弱化强调 ===== */
.zbh-plan--disabled .zbh-plan-name { color: var(--zbh-text-sub); }
.zbh-plan--disabled .zbh-plan-price strong { color: var(--zbh-text-sub); }
.zbh-plan--disabled .zbh-plan-btn--disabled {
    background: rgba(255,255,255,0.05);
    color: var(--zbh-text-muted) !important;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: not-allowed;
    box-shadow: none;
}
.zbh-plan--disabled .zbh-plan-btn--link {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
}

/* 浅色模式下停售卡片优化 */
body:not(.dark-theme) .zbh-plan--disabled .zbh-plan-btn--disabled {
    background: rgba(0,0,0,0.05);
    color: #8a8a9e !important;
    border-color: rgba(0,0,0,0.1);
}

body:not(.dark-theme) .zbh-plan--disabled .zbh-plan-btn--link {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent) !important;
    border-color: rgba(var(--accent-rgb), 0.5);
}

/* 停售提示文字 */
.zbh-plan-sale-hint {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    color: #fbbf24;
    font-size: 12.5px;
    line-height: 1.5;
}
.zbh-plan--soon .zbh-plan-sale-hint {
    background: rgba(124,92,255,0.1);
    border-color: rgba(124,92,255,0.25);
    color: #c9bdff;
}

/* ===== 响应式 ===== */
@media (max-width: 1200px) {
    .zbh-plans {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }
}
@media (max-width: 992px) {
    .zbh-banner-title { font-size: 38px; }
    .zbh-plans {
        gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    .zbh-plan {
        padding: 38px 30px;
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .zbh-banner { padding: 76px 0 24px; }
    .zbh-banner-title { font-size: 30px; }
    .zbh-banner-desc { font-size: 15px; }
    .zbh-plans {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
    }
    .zbh-plan {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 36px 28px;
    }
    .zbh-trust-item { flex-basis: 45%; }
    .zbh-trust-item:not(:last-child) { border-right: none; }
}

/* ================================================================
   高端化升级层
   ================================================================ */

/* 整页细颗粒质感 */
.zbh-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* 浅色模式下降低噪点效果 */
body:not(.dark-theme) .zbh-page::after {
    opacity: 0.25;
}

/* ===== 英雄区数据指标 ===== */
.zbh-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
    padding: 20px 38px;
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: zbhFadeUp 1.1s ease-out both;
    cursor: help;
}
.zbh-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}
.zbh-hero-stat:hover {
    transform: translateY(-2px);
}
.zbh-hero-num {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff 0%, #c9bdff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s ease;
}
.zbh-hero-stat:hover .zbh-hero-num {
    transform: scale(1.05);
}
.zbh-hero-label {
    font-size: 13px;
    color: var(--zbh-text-sub);
    margin-top: 8px;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.zbh-hero-hint {
    font-size: 11px;
    color: var(--zbh-text-muted);
    margin-top: 4px;
    opacity: 0.8;
    letter-spacing: 0.3px;
}
.zbh-hero-sep { width: 1px; height: 40px; background: rgba(255,255,255,0.12); }

/* ===== 推荐卡：旋转流光描边 ===== */
@property --zbh-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.zbh-plan--featured::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    padding: 1.5px;
    background: conic-gradient(from var(--zbh-angle),
        rgba(var(--accent-rgb),0) 0deg,
        rgba(var(--accent-rgb),0.9) 70deg,
        rgba(255,255,255,0.9) 110deg,
        rgba(var(--accent-rgb),0.9) 150deg,
        rgba(var(--accent-rgb),0) 230deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: zbhSpin 4.5s linear infinite;
    pointer-events: none;
    z-index: 2;
}

/* ===== 推荐按钮流光扫光 ===== */
.zbh-plan-btn { position: relative; overflow: hidden; }
.zbh-plan--featured .zbh-plan-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -130%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    animation: zbhShine 3.2s ease-in-out infinite;
}

/* ===== 底部行动号召带 ===== */
.zbh-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 48px 52px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(120deg, #1a1530 0%, #241a3d 45%, #2a1730 100%);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 30px 70px -34px rgba(0,0,0,0.9);
}
.zbh-cta-glow {
    position: absolute;
    width: 560px; height: 560px;
    right: -120px; top: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,92,255,0.5), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}
.zbh-cta-content { position: relative; z-index: 2; }
.zbh-cta-title { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -0.5px; }
.zbh-cta-desc { font-size: 16px; color: var(--zbh-text-sub); margin: 0; line-height: 1.6; }
.zbh-cta-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none !important;
    color: #1a1530 !important;
    background: linear-gradient(135deg, #fff, #e6e0ff);
    box-shadow: 0 14px 34px -10px rgba(124,92,255,0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}
.zbh-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -10px rgba(124,92,255,0.9); }
.zbh-cta-btn i { transition: transform 0.3s ease; }
.zbh-cta-btn:hover i { transform: translateX(4px); }

@media (max-width: 768px) {
    .zbh-hero-stats { gap: 18px; padding: 14px 20px; }
    .zbh-hero-num { font-size: 27px; }
    .zbh-cta { padding: 30px 26px; text-align: center; justify-content: center; }
    .zbh-cta-title { font-size: 21px; }
}

/* ===== 动画 ===== */
@keyframes zbhFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes zbhSpin {
    to { --zbh-angle: 360deg; }
}
@keyframes zbhShine {
    0%, 60% { left: -130%; }
    100% { left: 130%; }
}
@keyframes zbhAurora {
    0%   { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 0.6; }
    50%  { transform: translateX(-46%) translateY(18px) rotate(8deg); opacity: 0.8; }
    100% { transform: translateX(-54%) translateY(-10px) rotate(-6deg); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
    .zbh-plan, .zbh-banner-tag, .zbh-banner-title, .zbh-banner-desc, .zbh-hero-stats, .zbh-banner-bg { animation: none !important; }
    .zbh-plan--featured::before, .zbh-plan--featured .zbh-plan-btn::after { animation: none !important; }
    /* 降级：关闭重渲染特效 */
    .zbh-orb, .zbh-banner-bg, .zbh-cta-glow { display: none !important; }
    .zbh-page::after { opacity: 0 !important; }
    .zbh-plan:hover { transform: none !important; }
    .zbh-plan:hover .zbh-plan-gallery img,
    .zbh-plan:hover .zbh-plan-gallery--single img { transform: none !important; }
}

/* ===== 移动端性能降级：关闭 backdrop-filter / 噪点 ===== */
@media (max-width: 768px) {
    .zbh-hero-stats { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .zbh-page::after { opacity: 0.25; }
    .zbh-orb { filter: blur(70px); opacity: 0.15; }
}