.vip-page { overflow-y: auto; padding-bottom: 100px; }

/* === VIP Hero Background === */
.vip-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360px;
    background: url('https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=Luxurious%20dark%20cinematic%20background%20with%20subtle%20gold%20particles%2C%20premium%20VIP%20feeling%2C%20minimal%2C%20very%20subtle%20and%20dark%2C%20abstract%2C%20high%20quality%2C%208k&image_size=square') no-repeat top center;
    background-size: cover;
    z-index: 0;
    opacity: 0.4; /* 调淡背景 */
}
.vip-hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to bottom, rgba(8,8,10,0.9), transparent);
}
.vip-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--bg-app));
}

.vip-section { padding: 0 16px; margin-top: 8px; }
/* section 之间的间距（如「最新首播」与上方「会员专属爽剧」），比首段与开通卡片之间更舒展 */
.vip-section + .vip-section { margin-top: 20px; }
.vip-section h3 { margin: 0 0 12px 0; color: #F9D423; font-size: 18px; display: flex; align-items: center; gap: 8px; }
/* 剧卡片统一使用公共组件 .drama-grid / .drama-card（见 drama-card.css）。
   .vip-section 已有 16px 内边距，取消 .drama-grid 自带内边距，避免双重留白。 */
.vip-section .drama-grid { padding: 0; }

/* === 紧凑型开通会员引导（聚焦连续包周，对齐 vip_pay.html）=== */
.vip-upsell {
    position: relative;
    margin: 0 16px 16px;
    padding: 13px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2D2214 0%, #151008 100%);
    border: 1px solid rgba(255, 209, 102, 0.18);
    box-shadow: 0 12px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255, 209, 102, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.vip-upsell-fx { /* 金色高光扫过 */
    position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 209, 102, 0.13), transparent);
    transform: skewX(-20deg);
    animation: vipUpsellShine 5s infinite;
    pointer-events: none;
}
@keyframes vipUpsellShine { 0% { left: -60%; } 25% { left: 160%; } 100% { left: 160%; } }

.vip-upsell-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vip-upsell-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--vip-text); }
.vip-upsell-title i { width: 20px; height: 20px; fill: var(--vip-text); }
.vip-upsell-badge {
    font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap;
    background: linear-gradient(90deg, #FF6B6B, #FF4757);
    padding: 4px 9px; border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    flex-shrink: 0;
}
.vip-upsell-title { flex-shrink: 0; }

.vip-upsell-benefits { position: relative; z-index: 1; font-size: 11.5px; color: rgba(255, 209, 102, 0.62); letter-spacing: 0.2px; }

.vip-upsell-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vip-upsell-price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.vip-upsell-plan { font-size: 11px; font-weight: 700; color: #4A3500; background: linear-gradient(90deg, #F3E0B0, #D4AF37); padding: 2px 7px; border-radius: var(--radius-full); }
.vip-upsell-price .cur { font-size: 13px; font-weight: 700; color: var(--vip-text); }
.vip-upsell-price .num { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.vip-upsell-price .unit { font-size: 12px; color: rgba(255,255,255,0.6); }
.vip-upsell-price .orig { font-size: 12px; color: #6b6b6b; text-decoration: line-through; }

.vip-upsell-btn {
    display: flex; align-items: center; gap: 1px; flex-shrink: 0;
    background: linear-gradient(90deg, #F3D5A5 0%, #D4A559 50%, #F3D5A5 100%);
    background-size: 200% auto;
    color: #4A3000; font-size: 14px; font-weight: 800; white-space: nowrap;
    padding: 10px 16px; border: none; border-radius: var(--radius-full);
    box-shadow: 0 6px 16px rgba(212, 165, 89, 0.35);
    cursor: pointer;
    animation: vipUpsellBtnShine 3s linear infinite;
}
.vip-upsell-btn i { width: 16px; height: 16px; }
@keyframes vipUpsellBtnShine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }