/* 视频首页模板样式 - 参考699pic.com/media */

/* ===== 仅视频首页：移除全站蓝色顶部主导航 ===== */
.navbar,
body.post-type-archive-video .navbar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 视频专属顶部导航：因为主导航移除，从 top:80px 上移到 top:0 */
.video-top-nav {
    top: 0 !important;
}

/* 全局容器 - 深色渐变背景（与图片2一致） */
.video-archive-page {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(60,200,156,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 0%, rgba(90,140,255,0.09) 0%, transparent 60%),
        linear-gradient(180deg, #1c2130 0%, #181c28 100%);
    min-height: 100vh;
}

/* ===== 视频专属顶部导航 ===== */
.video-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    min-height: 70px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.video-top-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 90px 0 20px;
}
.vtn-left {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.vtn-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    margin-right: 20px;
}
.vtn-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #10b981;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.4;
    height: 44px;
    box-sizing: border-box;
}
/* ========== LOGO 图片：固定宽160px 高50px + 白/彩双LOGO显隐 ========== */
.vtn-brand img.vtn-logo {
    display: block;
    width: 160px !important;
    max-width: 160px !important;
    height: 50px !important;
    object-fit: contain;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
}
/*
 * 关键：仅当两张LOGO都上传了（.vtn-brand-switchable）时，才按场景切换显示/隐藏
 * 单LOGO场景：始终按上面的 display:block 显示，不被下面任何切换规则误伤
 */
/* 视频首页：透明导航（默认未.scrolled）→ 白色LOGO显示；彩色LOGO隐藏 */
.video-top-nav:not(.scrolled) .vtn-brand-switchable img.vtn-logo-color { display: none !important; }
.video-top-nav:not(.scrolled) .vtn-brand-switchable img.vtn-logo-white { display: block !important; }
/* 视频首页：导航滚动后不透明深色背景（.scrolled）→ 彩色LOGO显示；白色隐藏 */
.video-top-nav.scrolled .vtn-brand-switchable img.vtn-logo-white { display: none !important; }
.video-top-nav.scrolled .vtn-brand-switchable img.vtn-logo-color { display: block !important; }

/* 视频商品页 / VIP页面：导航默认就是深色不透明背景 → 双LOGO时只显示彩色，隐藏白色 */
.video-detail-page .video-top-nav .vtn-brand-switchable img.vtn-logo-white,
body.svip-page-body .video-top-nav .vtn-brand-switchable img.vtn-logo-white,
body.evip-page-body .video-top-nav .vtn-brand-switchable img.vtn-logo-white {
    display: none !important;
}
.video-detail-page .video-top-nav .vtn-brand-switchable img.vtn-logo-color,
body.svip-page-body .video-top-nav .vtn-brand-switchable img.vtn-logo-color,
body.evip-page-body .video-top-nav .vtn-brand-switchable img.vtn-logo-color {
    display: block !important;
}
/* END LOGO 规则 */
.vtn-menu {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.vtn-menu-item {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    height: 70px;
    color: #fff;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: none;
}
/* 所有伪类状态（未访问/已访问/悬停/按下）都保持原色白色 + 无下划线 */
a.vtn-menu-item:link,
a.vtn-menu-item:visited,
a.vtn-menu-item:hover,
a.vtn-menu-item:active,
.vtn-menu-item:link,
.vtn-menu-item:visited,
.vtn-menu-item:hover,
.vtn-menu-item:active {
    color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    background: transparent !important;
    outline: none !important;
}
.vtn-menu-active {
    color: #fff !important;
    font-weight: 500;
}
.vtn-menu-active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 3px;
    background: #10b981;
    border-radius: 2px 2px 0 0;
}
.vtn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 5px;
    line-height: 1.4;
}
.vtn-badge-orange {
    background: #f97316;
    color: #fff;
}
.vtn-more-icon {
    color: #fff;
    margin-left: 4px;
    display: inline-flex;
    transition: transform 0.2s;
}
.vtn-has-dropdown:hover .vtn-more-icon {
    transform: rotate(90deg);
}
.vtn-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vtn-right-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    color: #fff;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 400;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.vtn-right-btn:hover {
    color: #4ade80;
}
.vtn-right-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.vtn-right-icon:hover {
    background: rgba(255,255,255,0.08);
    color: #4ade80;
}
/* 头像图标：圆形外观，匹配右上角M头像风格 */
.vtn-right-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
/* 未登录：登录/注册按钮 */
.vtn-right-guest {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
}
.vtn-guest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: all .2s ease;
    cursor: pointer;
    white-space: nowrap;
}
.vtn-guest-login {
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.3);
}
.vtn-guest-login:hover {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}
.vtn-guest-register {
    background: #4ade80;
    color: #ffffff;
    border: 1px solid #4ade80;
}
.vtn-guest-register:hover {
    background: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
}
/* 小屏适配 */
@media (max-width: 768px) {
    .vtn-right-guest { gap: 6px; margin-right: 4px; }
    .vtn-guest-btn { height: 30px; padding: 0 12px; font-size: 12px; }
}
.vtn-right-avatar-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    padding: 0 !important;
    overflow: visible;
}
.vtn-right-avatar-icon:hover {
    filter: brightness(1.08);
    background: rgba(255,255,255,0.06) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== 个人中心头像下拉菜单：白色背景 ===== */
.vtn-user-dropdown {
    background: #ffffff !important;
    width: 280px !important;
    height: 360px !important;
    min-height: 360px !important;
    box-shadow: 0 10px 40px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06) !important;
    border: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    left: auto !important;
    right: 0 !important;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
/* 兼容 header 中 user-menu-dropdown 内部默认样式在当前 vtn-user-dropdown 容器内的展示 */
.vtn-user-dropdown .user-menu-header {
    padding: 14px 18px 12px;
    flex-shrink: 0;
    background: #ffffff !important;
}
.vtn-user-dropdown .user-info h4 {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    text-shadow: none !important;
    margin: 0 !important;
}
.vtn-user-dropdown .user-level {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.vtn-user-dropdown .user-menu-stats {
    padding: 10px 18px;
    flex-shrink: 0;
    background: #ffffff !important;
}
/* 余额/积分数字：深色加粗，白底清晰可读 */
.vtn-user-dropdown .user-menu-stats .stat-value {
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    text-shadow: none !important;
}
.vtn-user-dropdown .user-menu-stats .stat-label {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 600;
}
/* 升级VIP：白底搭配暖色卡片，保留橙色VIP按钮 */
.vtn-user-dropdown .user-menu-vip {
    margin: 6px 18px 0;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff8ec 0%, #ffedd5 100%) !important;
    border: 1px solid rgba(255,152,0,0.3);
}
.vtn-user-dropdown .user-menu-vip p {
    margin: 0 !important;
    flex: 1;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: #92400e !important;
    font-weight: 600;
    text-align: left;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.vtn-user-dropdown .user-menu-vip .btn-vip {
    flex-shrink: 0;
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #ffb547 0%, #f97316 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 2px 6px rgba(249,115,22,0.3);
}
.vtn-user-dropdown .user-menu-buttons {
    padding: 10px 18px 10px;
    flex-shrink: 0;
    background: #ffffff !important;
}
.vtn-user-dropdown .btn-user,
.vtn-user-dropdown .btn-shop,
.vtn-user-dropdown .btn-admin {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
}
.vtn-user-dropdown .btn-admin {
    margin: 2px 18px 4px;
    flex-shrink: 0;
    border-radius: 6px;
}
.vtn-user-dropdown .user-menu-footer {
    padding: 8px 18px 10px;
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid #e5e7eb;
    background: #ffffff !important;
}
/* 底部菜单链接：深灰色，白底可读；hover强调色 */
.vtn-user-dropdown .user-menu-footer a {
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 600;
    text-decoration: none !important;
    padding: 3px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.vtn-user-dropdown .user-menu-footer a:hover {
    color: #f97316 !important;
    background: rgba(249,115,22,0.08);
}
/* user-info 容器文字 */
.vtn-user-dropdown .user-info {
    color: #0f172a !important;
}
.vtn-user-dropdown .user-info .user-meta {
    margin-top: 4px;
}
/* 未登录态容器 */
.vtn-user-guest {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.vtn-user-guest .user-menu-header {
    padding: 14px 18px 8px;
}
.vtn-right-avatar-icon img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
    width: 40px !important;
    height: 40px !important;
}

/* ===== 邮箱/消息图标 + 下拉卡片 ===== */
.vtn-msg-wrap {
    margin-left: 6px;
}
.vtn-msg-icon {
    position: relative;
}
.vtn-msg-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    min-width: 14px;
    text-align: center;
    font-weight: 600;
}
.vtn-msg-dropdown {
    left: auto !important;
    /* right 和 top 由 JS 动态计算（fixed定位），setProperty(!important)强制写入，这里不再写死覆盖 */
    /* ★ top/margin-top 必须设为 auto/0 + !important → 解除通用 .vtn-right .vtn-right-icon-wrap.vtn-has-dropdown > .vtn-dropdown 的 top:calc(100%-7px) 覆盖
          否则 JS 写的精确像素（如下移10px）会被该通用规则抹去，视觉上"移动没变化" */
    top: auto !important;
    margin-top: 0 !important;
    /* ★ 宽度强制 340px：3 层兜底（此条是类选择器 + !important）*/
    width: 340px !important;
    max-width: 340px !important;
    min-width: 340px !important;
    box-sizing: border-box !important;
    /* ★ position:fixed + left:auto 防止被 .video-detail-page .vtn-dropdown 强制改成 absolute/left:0 导致父容器限宽 */
    position: fixed !important;
    border-radius: 10px;
    background: #1f2a33;
    border: 1px solid #2c353e;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    padding: 0;
    overflow: hidden;
}
/* ★ 个人VIP/企业VIP/定制授权 三个弹窗：往上移动14px（相对之前向下14px的状态，最终回到按钮底部原生位置）
      → 只使用 transform: translateY(0px) 纯视觉位移，margin-top强制清零，1:1精准不叠加双倍 */
.vtn-right .vtn-right-btn-wrap.vtn-has-dropdown > .vtn-vip-dropdown,
.vtn-right .vtn-right-btn-wrap.vtn-has-dropdown > .vtn-ent-dropdown,
.vtn-right .vtn-right-btn-wrap.vtn-has-dropdown > .vtn-cust-dropdown {
    margin-top: 0 !important;
    transform: translateY(0px) !important;
}
.vtn-msg-inner {
    display: flex;
    flex-direction: column;
}
.vtn-msg-tabs {
    display: flex;
    align-items: center;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #2c353e;
}
.vtn-msg-tab {
    color: #e2e4e7;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
    margin-right: 22px;
    transition: color 0.2s;
    position: relative;
    font-weight: 500;
}
.vtn-msg-tab-active {
    color: #fff;
    font-weight: 600;
}
.vtn-msg-tab-active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: #4ade80;
    border-radius: 2px;
}
.vtn-msg-count {
    display: inline-block;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    line-height: 14px;
    padding: 0 5px;
    border-radius: 7px;
    margin-left: 4px;
    text-align: center;
    font-weight: 600;
}
.vtn-msg-list {
    padding: 8px 0;
    max-height: 280px;
    overflow-y: auto;
}
.vtn-msg-list::-webkit-scrollbar { width: 5px; }
.vtn-msg-list::-webkit-scrollbar-thumb { background: #3a4854; border-radius: 3px; }
.vtn-msg-list::-webkit-scrollbar-track { background: transparent; }
.vtn-msg-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 12px 18px;
    transition: background 0.2s;
}
.vtn-msg-item:hover {
    background: rgba(74, 222, 128, 0.06);
}
.vtn-msg-dot {
    position: absolute;
    top: 18px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: #ff4d4f;
    border-radius: 50%;
}
.vtn-msg-bell {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    margin-right: 12px;
}
.vtn-msg-content {
    flex: 1;
    min-width: 0;
}
.vtn-msg-title {
    color: #e2e4e7;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vtn-msg-time {
    color: #8b949e;
    font-size: 12px;
    font-weight: 400;
}
.vtn-msg-desc {
    color: #8b949e;
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vtn-msg-footer {
    padding: 12px 18px;
    border-top: 1px solid #2c353e;
    text-align: center;
}
.vtn-msg-footer a {
    color: #4ade80;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}
.vtn-msg-footer a:hover {
    color: #22c55e;
}

/* ===== 实拍视频hover下拉大菜单 ===== */
.vtn-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 675px;
    height: 430px;
    background: #1f2428;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}
.vtn-dropdown.vtn-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.vtn-dropdown-inner {
    padding: 16px 18px 14px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* VIP双栏 */
.vtn-vip-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.vtn-vip-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding: 8px 10px 9px;
    border: 1px solid rgba(255,255,255,0.06);
}
.vtn-vip-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.vtn-vip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.vtn-vip-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.vtn-vip-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-decoration: none !important;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
}
.vtn-vip-btn-green {
    background: #10b981;
    border: 1px solid rgba(16,185,129,0.5);
}
.vtn-vip-btn-green:hover {
    background: #059669;
}
.vtn-vip-btn-blue {
    background: #3b82f6;
    border: 1px solid rgba(59,130,246,0.5);
}
.vtn-vip-btn-blue:hover {
    background: #2563eb;
}
.vtn-vip-benefits {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 2px;
    flex-wrap: wrap;
}
.vtn-benefit-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
}
/* 付费视频下拉：顶部标题行 */
.vtn-header-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.vtn-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.vtn-header-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
/* 企业专享下拉：顶部企业VIP单栏条 */
.vtn-enterprise-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 9px 12px 9px 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.vtn-enterprise-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
.vtn-enterprise-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.vtn-enterprise-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.vtn-enterprise-benefits {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 4px;
    flex-wrap: wrap;
}
.vtn-enterprise-benefit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
.vtn-enterprise-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #3b82f6;
    border: 1px solid rgba(59,130,246,0.5);
    text-decoration: none !important;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
.vtn-enterprise-btn:hover {
    background: #2563eb;
}
/* ===== 摄图AI hover下拉大菜单：浅色背景 ===== */
.vtn-ai-dropdown {
    background: #ffffff !important;
    width: 675px !important;
    height: 520px !important;
    min-height: 520px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid #eef0f3 !important;
    border-top: none !important;
    overflow: visible !important;
}
.vtn-ai-inner {
    padding: 18px 20px 20px;
    gap: 14px;
    height: auto;
    min-height: auto;
}
.vtn-ai-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.vtn-ai-section-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #2c3035;
    padding-left: 2px;
}
.vtn-ai-section-en {
    font-size: 11.5px;
    font-weight: 500;
    color: #a0a6ad;
    letter-spacing: 0.5px;
}
.vtn-ai-grid {
    display: grid;
    gap: 10px;
}
.vtn-ai-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.vtn-ai-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    background: #f7f8fa;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.vtn-ai-card:hover {
    background: #fff;
    border-color: #d6e4ff;
    box-shadow: 0 4px 14px rgba(79,140,255,0.1);
    transform: translateY(-1px);
}
.vtn-ai-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    flex-shrink: 0;
}
.vtn-ai-icon-blue {
    background: linear-gradient(135deg, #e8f0ff 0%, #dbe7ff 100%);
}
.vtn-ai-icon-blue2 {
    background: linear-gradient(135deg, #e0ecff 0%, #cfdfff 100%);
}
.vtn-ai-icon-orange {
    background: linear-gradient(135deg, #fff0e8 0%, #ffe2d2 100%);
}
.vtn-ai-icon-cyan {
    background: linear-gradient(135deg, #e6f7f7 0%, #d4efef 100%);
}
.vtn-ai-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.vtn-ai-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2328;
    white-space: nowrap;
}
.vtn-ai-card-desc {
    font-size: 11.5px;
    color: #7a818a;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vtn-ai-card-hot {
    position: absolute;
    top: -1px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ff6b35 0%, #ff3b30 100%);
    border-radius: 0 0 5px 5px;
    letter-spacing: 0.5px;
}
/* 工具网格：6列 */
.vtn-ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.vtn-ai-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px 10px;
    background: #f7f8fa;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    text-decoration: none !important;
    color: #5b626b;
    transition: all 0.2s ease;
}
.vtn-ai-tool:hover {
    background: #eef4ff;
    border-color: #bfd4ff;
    color: #4f8cff;
}
.vtn-ai-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #5b626b;
    transition: color 0.15s;
}
.vtn-ai-tool:hover .vtn-ai-tool-icon {
    color: #4f8cff;
}
.vtn-ai-tool-name {
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.vtn-ai-tool-new {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    height: 14px;
    line-height: 14px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #f5222d;
    border-radius: 3px;
    letter-spacing: 0.3px;
}
/* ===== 更多 hover下拉大菜单：深色背景 + 绿色角装饰 ===== */
.vtn-more-dropdown {
    background: #242c33 !important;
    width: 380px !important;
    height: 565px !important;
    min-height: 565px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important;
    border: 1px solid #2c353e !important;
    border-top: none !important;
    overflow: hidden !important;
    left: auto !important;
    right: 0 !important;
}
.vtn-has-dropdown {
    position: relative !important;
}
.vtn-more-inner {
    padding: 12px 14px 14px;
    gap: 10px;
    height: auto !important;
    position: relative;
    z-index: 1;
}
/* 右下角绿色渐变装饰 */
.vtn-more-corner {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at top left, rgba(16,185,129,0.45) 0%, rgba(16,185,129,0.18) 35%, rgba(16,185,129,0) 70%);
    pointer-events: none;
    z-index: 0;
}
/* 6格大图标：3行2列（适配380窄宽度） */
.vtn-more-grid6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
}
.vtn-more-grid-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 10px 10px 12px;
    background: #2d3640;
    border: 1px solid #353f4b;
    border-radius: 6px;
    text-decoration: none !important;
    color: #d0d4d9;
    transition: all 0.2s ease;
}
.vtn-more-grid-item:hover {
    background: #35404c;
    border-color: #10b981;
    color: #10b981;
}
.vtn-more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #10b981;
}
.vtn-more-grid-item:hover .vtn-more-icon {
    color: #34d399;
}
.vtn-more-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
/* 分组标题 */
.vtn-more-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.vtn-more-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    padding-left: 2px;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.vtn-more-title-new {
    position: relative;
}
.vtn-more-badge-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    height: 15px;
    line-height: 15px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 4px;
    letter-spacing: 0.5px;
    transform: translateY(-1px);
}
/* 3格一行chip（适配380窄宽度） */
.vtn-more-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.vtn-more-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 8px;
    background: #2d3640;
    border: 1px solid #353f4b;
    border-radius: 6px;
    text-decoration: none !important;
    color: #cfd3d8;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.vtn-more-chip:hover {
    background: #35404c;
    border-color: #10b981;
    color: #10b981;
}
.vtn-more-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
}
.vtn-more-chip:hover .vtn-more-chip-icon {
    color: #34d399;
}
/* 全球素材库单按钮 */
.vtn-more-global {
    width: 100%;
}
.vtn-more-global-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    background: #2d3640;
    border: 1px solid #353f4b;
    border-radius: 6px;
    text-decoration: none !important;
    color: #cfd3d8;
    font-size: 12.5px;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.vtn-more-global-btn:hover {
    background: #35404c;
    border-color: #10b981;
    color: #10b981;
}
.vtn-more-global-btn svg {
    color: #10b981;
}
.vtn-more-global-btn:hover svg {
    color: #34d399;
}
/* 商业视觉中心 1列4行（适配380窄宽度） */
.vtn-more-grid2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.vtn-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 8px;
    background: #2d3640;
    border: 1px solid #353f4b;
    border-radius: 6px;
    text-decoration: none !important;
    color: #cfd3d8;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.vtn-more-btn:hover {
    background: #35404c;
    border-color: #10b981;
    color: #10b981;
}
.vtn-more-last {
    margin-bottom: 0;
}

/* ===== 右侧按钮包裹 & 个人VIP 364×470 下拉（双SVIP套餐卡片） ===== */
.vtn-right-btn-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
}
/* 空气桥伪元素禁用 pointer-events，避免误触菜单
   弹窗交互完全由 JS 延迟机制处理（显示延迟80ms防误触 + 关闭延迟300ms保证移到弹窗） */
.vtn-right-btn-wrap::before {
    content: '';
    position: absolute;
    top: 100%;
    pointer-events: none;
    z-index: -1;
}
/* 垂直空气桥：禁用 pointer-events，避免误触 */
.vtn-right-btn-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: -1;
}
.vtn-right-btn-wrap .vtn-dropdown {
    top: calc(100% + 2px);
    margin-top: 0;
}
.vtn-right-icon-wrap {
    position: relative;
    overflow: visible;
}
.vtn-right-icon-wrap::before {
    content: '';
    position: absolute;
    top: 100%;
    pointer-events: none;
    z-index: -1;
}
/* 垂直空气桥：禁用 pointer-events，避免误触 */
.vtn-right-icon-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: -1;
}
.vtn-right-icon-wrap .vtn-dropdown {
    top: calc(100% + 2px);
    margin-top: 0;
}
/* 右侧弹窗统一从上往下动画：完全由 JS .vtn-open 类控制显隐，
   禁止 CSS :hover 直接控制（否则鼠标跨按钮-弹窗间距时:hover丢失导致弹窗提前关闭）
   JS 显示延迟 150ms（防误触） + 关闭延迟 1500ms（保证移到弹窗） */
.vtn-right .vtn-right-btn-wrap.vtn-has-dropdown > .vtn-dropdown,
.vtn-right .vtn-right-icon-wrap > .vtn-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s !important;
    pointer-events: none !important;
}
/* 打开态：仅 .vtn-open 类，移除所有 :hover 触发规则，彻底避免跨间距时关闭 */
.vtn-right .vtn-right-btn-wrap.vtn-has-dropdown > .vtn-dropdown.vtn-open,
.vtn-right .vtn-right-icon-wrap > .vtn-dropdown.vtn-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s !important;
    pointer-events: auto !important;
}
.vtn-vip-dropdown {
    background: #1f2a33 !important;
    width: 364px !important;
    height: 470px !important;
    min-height: 470px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important;
    border: 1px solid #2c353e !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    overflow: visible !important;
    left: auto !important;
    right: -165px !important;
}
/* 个人VIP弹窗：+29px 上移12px → +17px */
#vtnVipDropdown {
    top: calc(100% + 17px) !important;
}
/* 个人VIP空气桥：高度同步缩短12px */
#vtnVipWrap::before {
    right: -165px;
    width: 165px;
    height: 487px;
}
.vtn-vip-inner {
    padding: 14px 16px 16px;
    height: auto !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* 单张SVIP卡片 */
.vtn-vip-card {
    background: #26303a;
    border: 1px solid #2f3b46;
    border-bottom: 1px solid #3a4854;
    border-radius: 8px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.vtn-vip-card:last-child {
    margin-bottom: 4px;
}
/* 套餐头部：名称 ›  +  ¥159/终身 立即开通按钮 */
.vtn-vip-card-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vtn-vip-card-title {
    display: flex;
    align-items: center;
    gap: 3px;
}
.vtn-vip-card-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}
.vtn-vip-card-arrow {
    color: #9aa4ad;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px);
}
.vtn-vip-card-price {
    display: flex;
    align-items: center;
    gap: 1px;
}
.vtn-vip-price-symbol {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transform: translateY(-4px);
    margin-right: 1px;
}
.vtn-vip-price-num {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}
.vtn-vip-price-num-2 {
    /* 299字号稍大或颜色更亮，视觉平衡 */
}
.vtn-vip-price-unit {
    color: #b8c0c8;
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
    margin-right: 10px;
    transform: translateY(2px);
}
/* 立即开通：青色渐变 #10b981→#06b6d4 */
.vtn-vip-btn-open {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    height: 30px;
    border-radius: 6px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    box-shadow: 0 2px 6px rgba(16,185,129,0.28);
    transition: filter 0.2s;
}
.vtn-vip-btn-open:hover {
    filter: brightness(1.08);
}
/* 第二张：开通按钮蓝色渐变 */
.vtn-vip-btn-open-2 {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    box-shadow: 0 2px 6px rgba(59,130,246,0.28);
}
/* 统计行：✓ 视频素材海量下载  71W */
.vtn-vip-card-sub {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vtn-vip-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd2d8;
    font-size: 12.5px;
    font-weight: 500;
}
.vtn-vip-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
}
.vtn-vip-stat-count {
    color: #9aa4ad;
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
}
.vtn-vip-desc {
    color: #8d97a0;
    font-size: 12px;
    line-height: 1.55;
}
.vtn-vip-desc-title {
    color: #c8cfd6;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 2px;
}
.vtn-vip-desc-content {
    color: #8d97a0;
    font-size: 12px;
    line-height: 1.5;
}
/* 四行权益勾选 */
.vtn-vip-perks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    margin-top: 2px;
}
.vtn-vip-perk {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    color: #b5bdc4;
    font-size: 12px;
    font-weight: 500;
    white-space: normal;
}
.vtn-vip-perk svg {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px;
    min-height: 11px;
    flex-shrink: 0;
    visibility: visible !important;
    display: block !important;
    margin-top: 2px;
}
.vtn-vip-perk-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vtn-vip-perk-title {
    color: #b5bdc4;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.vtn-vip-perk-content {
    color: #8d97a0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}
/* 右侧两张卡无第二张卡片2×2权益，适配4个一行两列 */
.vtn-vip-card-2 .vtn-vip-perk {
    /* 与卡1一致 */
}

/* ===== 企业VIP 295×400 下拉 ===== */
.vtn-ent-dropdown {
    background: #1f2a33 !important;
    width: 295px !important;
    height: 400px !important;
    min-height: 400px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important;
    border: 1px solid #2c353e !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    overflow: visible !important;
    left: auto !important;
    right: -148px !important;
}
/* 企业VIP弹窗：+29px 上移12px → +17px */
#vtnEntDropdown {
    top: calc(100% + 17px) !important;
}
/* 企业VIP空气桥：高度同步缩短12px */
#vtnEntWrap::before {
    right: -148px;
    width: 148px;
    height: 417px;
}
.vtn-ent-inner {
    padding: 16px 18px 28px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vtn-ent-title {
    text-align: center;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 2px 0 4px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
/* 2×2 企业权益网格 */
.vtn-ent-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 12px;
}
.vtn-ent-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 4px 4px 2px;
}
.vtn-ent-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #26303a;
    border: 1px solid #33404c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    margin-bottom: 0;
}
.vtn-ent-name {
    color: #e8ecf0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}
.vtn-ent-desc {
    color: #8f99a2;
    font-size: 11px;
    line-height: 1.5;
}
/* 立即开通按钮 */
.vtn-ent-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 20px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: auto;
    margin-bottom: 0;
    background: linear-gradient(135deg, #ff6b35 0%, #ee4d2d 50%, #e63946 100%);
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.4);
    transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
}
.vtn-ent-open:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.55);
    transform: translateY(-1px);
}

/* ===== 定制授权 550×550 下拉 ===== */
.vtn-cust-dropdown {
    background: #1f2a33 !important;
    width: 550px !important;
    height: 610px !important;
    min-height: 610px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35) !important;
    border: 1px solid #2c353e !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    overflow: visible !important;
    left: auto !important;
    right: -275px !important;
}
/* 定制授权弹窗：+29px 上移12px → +17px */
#vtnCustDropdown {
    top: calc(100% + 17px) !important;
}
/* 定制授权空气桥：高度同步缩短12px */
#vtnCustWrap::before {
    right: -275px;
    width: 275px;
    height: 627px;
}
.vtn-cust-inner {
    padding: 18px 22px 40px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* 顶部警示条 */
.vtn-cust-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #232e37;
    border: 1px solid #2e3a45;
    color: #9aa7b4;
    font-size: 11px;
    line-height: 1.55;
    flex-shrink: 0;
}
.vtn-cust-warn-icon {
    flex-shrink: 0;
    color: #10b981;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
/* 通用区块标题 */
.vtn-cust-title {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    padding: 2px 0 0;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
/* 6服务项 横排 */
.vtn-cust-service-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    flex-shrink: 0;
}
.vtn-cust-svc-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-width: 0;
}
.vtn-cust-svc-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vtn-cust-svc-icon svg,
.vtn-cust-svc-icon img {
    width: 45px !important;
    height: 45px !important;
}
.vtn-cust-svc-1 { background: linear-gradient(135deg, #223044 0%, #1c2938 100%); color: #60a5fa; }
.vtn-cust-svc-2 { background: linear-gradient(135deg, #1f2e3d 0%, #1b2a37 100%); color: #34d399; }
.vtn-cust-svc-3 { background: linear-gradient(135deg, #2b2a3d 0%, #222035 100%); color: #a78bfa; }
.vtn-cust-svc-4 { background: linear-gradient(135deg, #2c2a35 0%, #26242e 100%); color: #f472b6; }
.vtn-cust-svc-5 { background: linear-gradient(135deg, #1f323a 0%, #1a2c32 100%); color: #2dd4bf; }
.vtn-cust-svc-6 { background: linear-gradient(135deg, #2e2b3a 0%, #262231 100%); color: #fbbf24; }
.vtn-cust-svc-name {
    color: #d9dfe6;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
}
/* 联系客服图标：可点击 + 悬停翻转显示"联系客服" */
.vtn-cust-svc-contact {
    cursor: pointer;
    position: relative;
    perspective: 400px;
}
.vtn-cust-svc-contact .vtn-cust-svc-icon {
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center bottom;
}
.vtn-cust-svc-contact:hover .vtn-cust-svc-icon {
    transform: rotateX(90deg);
    opacity: 0;
}
/* "联系客服" 覆盖层：占据图标同一位置，悬停时翻转进入 */
.vtn-cust-svc-tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(-90deg);
    transform-origin: center bottom;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #223044 0%, #1c2938 100%);
    color: #60a5fa;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.4);
}
.vtn-cust-svc-contact:hover .vtn-cust-svc-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) rotateX(0);
}

/* 尊享特权 双卡片 */
.vtn-cust-priv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    flex-shrink: 0;
}
.vtn-cust-priv-card {
    background: #26303a;
    border: 1px solid #2f3b46;
    border-radius: 10px;
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vtn-cust-priv-head {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    padding-bottom: 2px;
    letter-spacing: 0.3px;
}
.vtn-cust-priv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}
/* 特权项可点击链接 */
.vtn-cust-priv-link {
    cursor: pointer;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 2px -8px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.vtn-cust-priv-link:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(2px);
}
.vtn-cust-priv-link:hover .vtn-cust-priv-name {
    color: #60a5fa;
}
.vtn-cust-priv-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vtn-cust-priv-icon svg,
.vtn-cust-priv-icon img {
    width: 45px !important;
    height: 45px !important;
}
.vtn-priv-1, .vtn-priv-api   { background: #1d3050; color: #60a5fa; }
.vtn-priv-2, .vtn-priv-shoot { background: #1f3546; color: #34d399; }
.vtn-priv-3, .vtn-priv-sub   { background: #1f3546; color: #34d399; }
.vtn-priv-r1, .vtn-priv-wide  { background: #2a2444; color: #a78bfa; }
.vtn-priv-r2, .vtn-priv-fast  { background: #3a2d1c; color: #fbbf24; }
.vtn-priv-r3, .vtn-priv-uni   { background: #351f2f; color: #f472b6; }
.vtn-cust-priv-text { min-width: 0; }
.vtn-cust-priv-name {
    color: #e8ecf0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.vtn-cust-priv-desc {
    color: #8f99a2;
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 2px;
}
/* 底部双按钮 */
.vtn-cust-actions {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 0;
    flex-shrink: 0;
}
.vtn-cust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: filter 0.2s;
}
.vtn-cust-btn:hover { filter: brightness(1.08); }
.vtn-cust-btn-main {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 45%, #a855f7 100%);
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(59,130,246,0.35);
}
.vtn-cust-btn-sub {
    background: transparent;
    color: #e8ecf0 !important;
    border: 1px solid #3a4854;
}

/* 图片卡片：3列 */
.vtn-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.vtn-img-card {
    text-decoration: none !important;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.2s;
}
.vtn-img-card:hover {
    transform: translateY(-2px);
}
.vtn-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 5px;
    background: #333;
}
.vtn-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}
.vtn-card-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.vtn-img-card:hover .vtn-img-wrap img {
    transform: scale(1.05);
}
.vtn-img-overlay-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 10px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
}
/* 5列标签区 */
.vtn-tags-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 12px;
    flex: 1;
    min-height: 0;
}
.vtn-tags-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.vtn-tags-label {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.vtn-tags-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.vtn-dot-green { background: #10b981; }
.vtn-dot-blue { background: #3b82f6; }
.vtn-dot-red { background: #ef4444; }
.vtn-dot-purple { background: #8b5cf6; }
.vtn-dot-orange { background: #f97316; }
.vtn-tags-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vtn-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.7);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.15s;
    line-height: 1.5;
}
.vtn-tag:hover {
    color: #10b981;
}
.vtn-tag-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    height: 13px;
    line-height: 13px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #f97316;
    border-radius: 2px;
    letter-spacing: 0.3px;
}
/* 单字母N角标（付费视频下拉用） */
.vtn-tag-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13px;
    padding: 0 3px;
    height: 13px;
    line-height: 13px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #f97316;
    border-radius: 2px;
    letter-spacing: 0.3px;
    margin-left: 2px;
}
/* banner区内容下移，避免被固定nav遮挡 */
.video-banner {
    margin-top: -48px; /* 上移横幅，使视频从页面顶部填充至导航栏后方 */
    padding-top: 70px;
    position: relative;
    height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.video-banner-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=cinematic%20dark%20blue%20gradient%20background%20with%20abstract%20video%20film%20strip%20pattern%2C%20minimal%20tech%20style&image_size=landscape_16_9') center/cover no-repeat;
    opacity: 0;
    display: none !important;
    visibility: hidden;
    z-index: -1;
}
.video-banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: none;
    background: #000;
}
.video-banner-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(11,25,50,0.65) 0%, rgba(9,18,40,0.55) 100%);
    z-index: 2;
    pointer-events: none;
}
.video-banner-content {
    position: relative; z-index: 3; text-align: center; color: #fff; width: 100%; max-width: 900px; padding: 0 20px;
}
/* Banner顶部统计信息 */
.video-banner-stats {
    display: flex; align-items: baseline; justify-content: center; gap: 20px;
    margin-bottom: 24px;
}
.vbs-left { display: flex; align-items: baseline; }
.vbs-number {
    font-size: 56px; font-weight: 800; line-height: 1;
    background: linear-gradient(90deg, #fff 0%, #a8e6cf 50%, #56c596 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}
.vbs-plus {
    font-size: 32px; font-weight: 700; color: #56c596; margin-left: 4px;
}
.vbs-right { display: flex; align-items: center; gap: 12px; }
.vbs-desc {
    font-size: 18px; color: rgba(255,255,255,0.92); font-weight: 500; letter-spacing: 1px;
}
.vbs-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 24px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    color: #fff; font-size: 12px; font-weight: 700;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(238, 90, 90, 0.4);
}
/* 搜索框下方热搜词 */
.video-banner-hot-words {
    display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
    gap: 4px; margin-top: 16px;
}
.vhw-label {
    font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; margin-right: 6px;
}
.vhw-item {
    font-size: 13px; color: rgba(255,255,255,0.85);
    text-decoration: none !important;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.vhw-item:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.video-banner-search {
    background: #fff; border-radius: 6px; overflow: visible; box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    display: flex; align-items: stretch; height: 64px; margin-top: 0;
}
.video-search-tabs {
    display: flex; align-items: center; padding: 0 20px; border-right: 1px solid #eee; height: 100%;
}
.video-search-tabs .search-tab {
    font-size: 15px; color: #333; font-weight: 500; position: relative;
}
.video-search-tabs .search-tab::after {
    display: none;
}
.video-search-form {
    display: flex; align-items: stretch; flex: 1; padding: 0; height: 100%;
}
.video-search-form input {
    flex: 1; border: none; outline: none; padding: 0 16px; font-size: 15px; color: #333; background: transparent; height: 100%;
}
.video-search-form input::placeholder { color: #bbb; }
.video-search-form button {
    flex-shrink: 0; align-self: stretch; padding: 0 36px; border: none; border-radius: 0; margin: 0;
    background: #2cb67d; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; font-size: 15px; font-weight: 500; gap: 6px; box-sizing: border-box;
}
.video-search-form button:hover { background: #22a06b; }
.video-search-form button svg { width: 18px; height: 18px; }

/* ===== 搜索框下拉热搜词面板 - 参考图2深色背景 ===== */
.video-banner-search {
    position: relative;
}
.video-search-hot-panel {
    display: none;
    position: fixed;
    background: #3b3d40;
    border-radius: 8px;
    padding: 14px 18px 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    z-index: 10002;
    color: #e2e4e7;
    font-size: 13px;
    max-height: 380px;
    overflow-y: auto;
}
.video-search-hot-panel::-webkit-scrollbar { width: 6px; }
.video-search-hot-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.video-search-hot-panel::-webkit-scrollbar-track { background: transparent; }
.video-search-hot-panel.vshp-open {
    display: block;
    animation: vshpFade 0.18s ease-out;
}
@keyframes vshpFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.vshp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.vshp-row-last {
    border-bottom: none;
}
.vshp-label {
    flex-shrink: 0;
    width: 70px;
    font-weight: 600;
    color: #3dd598;
    padding-top: 4px;
    letter-spacing: 0.2px;
}
.vshp-label.vshp-hot {
    color: #29d88a;
}
.vshp-tag {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    line-height: 26px;
    background: rgba(255,255,255,0.08);
    color: #d9dbe0;
    border-radius: 13px;
    text-decoration: none !important;
    margin-bottom: 4px;
    margin-right: 6px;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.vshp-tag:hover {
    background: #29d88a;
    color: #fff;
}
.vshp-tag.vshp-tag-blue {
    background: rgba(59,130,246,0.2);
    color: #7db9ff;
}
.vshp-tag.vshp-tag-blue:hover {
    background: #3b82f6;
    color: #fff;
}
.vshp-row .vshp-tag + .vshp-tag {
    margin-left: 0;
}

.search-sub-text {
    margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.65);
}

/* 主内容行布局 */
.video-main-row {
    display: flex; gap: 0; margin-top: -80px; position: relative; z-index: 10;
    align-items: stretch; justify-content: center;
}

/* 分类快捷入口（左侧） */
.video-category-shortcuts {
    display: flex; justify-content: center; gap: 18px;
    padding: 20px 10px; background: transparent;
}
.video-shortcut-item {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none !important; transition: transform 0.25s ease;
    cursor: pointer;
}
.video-shortcut-item * {
    text-decoration: none !important;
}
.video-shortcut-item:hover { transform: translateY(-6px) scale(1.06); z-index: 10; }
.video-shortcut-item.active .video-shortcut-icon {
    background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}
.video-shortcut-item.active .video-shortcut-icon-img { color: #fff; }
.video-shortcut-item.active .video-shortcut-name { color: #667eea; font-weight: 600; }
.video-shortcut-icon {
    width: 100px; height: 100px; border-radius: 50%;
    background: linear-gradient(145deg, #2a2d3e 0%, #1f2233 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.video-shortcut-icon::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(102,126,234,0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.video-shortcut-item:hover .video-shortcut-icon::before { opacity: 1; }
.video-shortcut-icon-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
}
.video-shortcut-icon-img {
    font-size: 36px; line-height: 1; transition: all 0.3s;
    z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.video-shortcut-item:hover .video-shortcut-icon {
    background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5), 0 0 0 4px rgba(102,126,234,0.12);
}
.video-shortcut-item:hover .video-shortcut-icon-img { opacity: 0; }
.video-shortcut-item:hover .video-shortcut-name { opacity: 0; }
.video-shortcut-item:hover .video-shortcut-play { opacity: 0; }
.video-shortcut-item:hover .video-shortcut-icon-video { opacity: 1; }
.video-shortcut-name {
    font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500;
    text-align: center; transition: all 0.3s;
    z-index: 1;
    margin-top: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.video-shortcut-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0; transition: opacity 0.2s; color: #fff;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}

/* VIP会员区域（右侧） */
.video-vip-area {
    width: 578px; min-width: 578px; height: 110px; display: flex; align-items: center;
    background: linear-gradient(135deg, #2d5a3d 0%, #1a4a2e 50%, #0f3d24 100%);
    border-radius: 55px; padding: 0 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    gap: 8px;
}
.video-vip-card {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
}
.vip-left {
    display: flex; align-items: center; gap: 10px;
}
.vip-icon-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex-shrink: 0;
}
.vip-icon {
    font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    line-height: 1;
}
.vip-icon img,
img.vip-icon {
    width: 36px; height: 36px; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.vip-info {
    display: flex; flex-direction: column !important; gap: 3px;
    align-items: flex-start !important;
    white-space: nowrap; flex-shrink: 0;
}
.vip-price {
    font-size: 22px; font-weight: 700; color: #ffd700; line-height: 1.15;
    white-space: nowrap; display: block; width: 100%;
}
.vip-desc {
    font-size: 12px; color: rgba(255,255,255,0.75); white-space: nowrap;
    display: block; width: 100%;
}
.vip-symbol {
    font-size: 14px; font-weight: 600; margin-right: 1px;
}
.vip-unit {
    font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.85); margin-left: 2px;
    white-space: nowrap;
}
.vip-type {
    font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 500;
    white-space: nowrap;
}
.vip-btn {
    display: inline-block; padding: 6px 16px;
    background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9);
    text-decoration: none !important; border-radius: 16px;
    font-size: 12px; font-weight: 500; transition: all 0.2s;
    white-space: nowrap; position: relative;
}
.vip-btn-default, .vip-btn-hover {
    display: block; transition: opacity 0.15s;
}
.vip-btn-hover {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0; white-space: nowrap;
}
.vip-btn:hover {
    background: #ffd700; color: #2d5a3d; font-weight: 600;
    text-decoration: none !important;
}
.vip-btn:hover .vip-btn-default { opacity: 0; }
.vip-btn:hover .vip-btn-hover { opacity: 1; }
.vip-card-divider {
    width: 1px; height: 40px; background: rgba(255,255,255,0.2);
}

/* 上新视频精选区块 */
.video-featured-wrap {
    background: linear-gradient(180deg, #1e2435 0%, #1a1f2e 100%);
    padding: 0 0 40px;
}
.video-featured-container {
    max-width: 1400px; margin: 0 auto; padding: 0 20px;
    transform: translateX(-60px);
}
/* 标题行 —— 强制可见兜底：防止未知CSS特异性/上下文/模块外层class覆盖导致样式3模块主标题+副标题空白 */
.video-featured-header {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 0 16px !important;
    gap: 12px !important;
    margin: 0 !important;
    min-height: 64px !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}
.video-featured-header-top {
    display: flex !important;
    align-items: center !important;
    min-height: 28px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.video-featured-title-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    min-height: 24px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.video-featured-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 0 0 14px !important;
    line-height: 1 !important;
    position: relative !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}
.video-featured-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #3cc89c 0%, #21a67f 100%);
    border-radius: 2px;
    display: block !important;
}
.video-featured-sub {
    font-size: 12px !important;
    color: rgba(255,255,255,0.45) !important;
    letter-spacing: 4px !important;
    line-height: 1 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255,255,255,0.45) !important;
    background: none !important;
}
.video-featured-tabs-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 32px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}
.video-featured-tabs {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.featured-tab, .scene-tab, .premium-tab {
    font-size: 12px; color: rgba(255,255,255,0.75);
    padding: 5px 14px; border-radius: 16px;
    cursor: pointer; transition: all 0.2s ease;
    background: rgba(255,255,255,0.06);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.featured-tab:hover, .scene-tab:hover, .premium-tab:hover { color: #fff; background: rgba(255,255,255,0.12); }
.featured-tab.active, .scene-tab.active, .premium-tab.active {
    color: #fff; background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(60, 200, 156, 0.35);
    transform: scale(1.05);
}
.featured-tab-more {
    font-size: 12px; color: rgba(255,255,255,0.7);
    padding: 5px 0;
    text-decoration: none !important;
    white-space: nowrap;
}
.featured-tab-more:hover { color: #3cc89c; }

/* 海量视频·高端付费 - 6格不对称网格：2大卡(各2×2，宽690px) + 4小卡，4列×3行 */
.video-premium-main {
    display: grid;
    grid-template-columns: 340px 340px 340px 340px;
    grid-template-rows: 180px 180px 180px;
    gap: 10px;
    justify-content: center;
}

/* 大卡片1：写1的位置 - cols 1-2, rows 1-2 */
.premium-large-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.premium-large-1 .featured-card-cover {
    height: 100%;
}

/* 大卡片2：红框标记 - cols 3-4, rows 2-3 (与大卡1同样大) */
.premium-large-2 {
    grid-column: 3 / 5;
    grid-row: 2 / 4;
}
.premium-large-2 .featured-card-cover {
    height: 100%;
}

/* ===================== 样式2：对角双大卡（style2）复刻版 ===================== */

/* style2 模块容器（外层） */
.video-featured-wrap.style2-module-wrap {
    padding: 18px 0 40px;
}

/* style2 头部：仅 tab 行（无主标题/副标题） */
.style2-tabs-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 16px; gap: 16px;
}
.style2-tabs {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.style2-tab {
    font-size: 13px; color: rgba(255,255,255,0.7);
    padding: 6px 18px; border-radius: 999px;
    cursor: pointer; transition: all 0.2s;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.05);
    line-height: 1.2;
    white-space: nowrap;
}
.style2-tab:hover {
    color: #fff; background: rgba(255,255,255,0.12);
}
/* style2 第一个激活 tab：紫→蓝渐变胶囊，白字加粗，和参考图片2一致 */
.style2-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #7b61ff 0%, #5b8bff 100%);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(123, 97, 255, 0.28);
}
.style2-tab-more {
    font-size: 13px; color: rgba(255,255,255,0.75);
    padding: 5px 0;
    text-decoration: none !important;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.style2-tab-more:hover { color: #fff; }

/* style2 主网格：左右两列（flex），每列内部独立垂直排布
   ┌───── 左列 ≈55% ─────┬─ 右列 ≈45% ─┐
   │                      │  小卡1 + 小卡2 │ ← 两小横排 flex-row
   │   大卡1（左上）      │               │
   │   (高度≈400px)       ├───────────────┤
   │                      │               │
   ├───────────┬──────────┤   大卡2(右下) │
   │ 小卡1(左) │小卡2(右) │   (高度≈400px)│
   └───────────┴──────────┴───────────────┘
*/
.style2-main-grid {
    display: flex;
    gap: 14px;
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
}
.style2-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    flex: 0 0 760px;
    max-width: 760px;
    width: 760px;
}
/* 两列同宽760px —— 保证两张大卡宽度一致 */
.style2-col-left,
.style2-col-right {
    flex: 0 0 760px;
    max-width: 760px;
    width: 760px;
}

/* 大卡：宽度760px × 高度406px */
.style2-large-tl, .style2-large-rb {
    flex: 0 0 auto;
    width: 760px;
    max-width: 760px;
}
.style2-large-tl .featured-card-cover,
.style2-large-rb .featured-card-cover {
    min-height: 406px;
    height: 406px;
    width: 100%;
}

/* 小卡横排行：两小卡各370px，中间gap 20px（370+20+370=760 刚好填满列宽） */
.style2-small-row {
    display: flex;
    gap: 20px;
    flex: 0 0 auto;
    min-height: 196px;
    height: 196px;
    width: 760px;
    max-width: 760px;
}
.style2-small-row .style2-card {
    flex: 0 0 370px;
    width: 370px;
    max-width: 370px;
    min-width: 370px;
}
.style2-small-row .style2-card .featured-card-cover {
    min-height: 196px;
    height: 196px;
    width: 100%;
}

/* ===================== style2 卡片内部元素（与参考图片2对齐） ===================== */

/* style2 所有卡片使用统一圆角 */
.style2-main-grid .featured-card {
    border-radius: 10px;
}
.style2-main-grid .featured-card-cover {
    border-radius: 10px;
}

/* style2 卡片标题「视频文章名称」—— 位置与样式1完全统一：左下角 12px/10px，不再额外平移（避免超出卡片被裁）
   默认透明，鼠标悬停/视频播放时淡入；无黑色背景块（与样式1视觉一致） */
.style2-main-grid .featured-card-title {
    position: absolute;
    left: 12px;
    bottom: 10px;
    right: auto;
    max-width: 85%;
    background: none !important;
    background-color: transparent !important;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 6px rgba(0,0,0,0.5);
    padding: 2px 6px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.style2-main-grid .featured-card:hover .featured-card-title,
.style2-main-grid .featured-card.video-playing .featured-card-title {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* style2 大卡：标题字号稍大（位置基准与小卡保持一致，不做padding偏移） */
.style2-main-grid .style2-large-tl .featured-card-title,
.style2-main-grid .style2-large-rb .featured-card-title {
    font-size: 15px;
}

/* style2 播放按钮：完全隐藏 —— 鼠标悬停自动播放视频，不显示中央播放图标 */
.style2-main-grid .featured-card-play,
.style2-main-grid .featured-card:hover .featured-card-play,
.style2-main-grid .featured-card.video-playing .featured-card-play {
    display: none !important;
    opacity: 0 !important;
}

/* style2 分辨率徽章位置：右下角12px（与参考图一致） */
.style2-main-grid .featured-card-badges-br {
    right: 12px;
    bottom: 12px;
}

/* 小卡片基础样式：180px高 */
.premium-card-small {
    height: 180px;
}
.premium-card-small .featured-card-cover {
    height: 100%;
}

/* 各小卡精确定位 */
.premium-card-small[data-card="1"] { grid-column: 3; grid-row: 1; }
.premium-card-small[data-card="2"] { grid-column: 4; grid-row: 1; }
.premium-card-small[data-card="3"] { grid-column: 1; grid-row: 3; }
.premium-card-small[data-card="4"] { grid-column: 2; grid-row: 3; }

/* 主网格：左1大卡 + 右2列2行共4小卡（固定像素，与样式2保持一致：大卡760×406，小卡370×196）
   v137：justify-content改为start，使视频卡片与上方标题/标签行左对齐 */
.video-featured-main {
    display: grid;
    grid-template-columns: 760px 370px 370px;
    grid-template-rows: 196px 196px;
    gap: 14px;
    justify-content: start;
    align-items: stretch;
}
/* 样式4：2行 × 4列 = 8个均等小卡（370×210 每卡），整体完全均匀 = 参考图样式 */
.video-featured-main.video-featured-grid8 {
    display: grid;
    grid-template-columns: repeat(4, 370px);
    grid-template-rows: repeat(2, 210px);
    gap: 14px;
    justify-content: start;
    align-items: stretch;
}
.video-featured-main.video-featured-grid8 .featured-card.featured-card-grid {
    width: 370px;
    height: 210px;
}
.video-featured-main.video-featured-grid8 .featured-card.featured-card-grid .featured-card-cover {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
}
/* 样式4：卡片标题——用户要求比样式1额外再向下移动27px（精准只对样式4生效，不影响样式1/2/3） */
.video-featured-main.video-featured-grid8 .featured-card .featured-card-title {
    transform: translateY(27px);
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
}
/* 热门场景推荐主网格（样式3）：左1张370×440卡 + 右3列×2行 共6张370×210视频卡 */
.video-scene-main {
    display: grid;
    grid-template-columns: 370px 370px 370px 370px;
    grid-template-rows: 210px 210px;
    gap: 14px;
    justify-content: start;
    align-items: stretch;
}
/* 样式3：左侧卡（featured-card-large在video-scene-main中）—— 用户指定 370×440 */
.video-scene-main > .featured-card.featured-card-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 370px;
    max-width: 370px;
    height: 440px;
    /* 取消style1大卡的760width影响 */
    min-width: 370px;
}
.video-scene-main > .featured-card.featured-card-large .featured-card-cover {
    width: 100%;
    height: 100%;
}
/* 样式3：右侧6个视频卡容器（grid内部自己再排3×2） */
.video-scene-main .featured-card-right-grid {
    grid-column: 2 / 5;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 370px 370px 370px;
    grid-template-rows: 210px 210px;
    gap: 14px;
}
/* 样式3：右侧视频卡 .featured-card-grid —— 370×210 */
.video-scene-main .featured-card.featured-card-grid {
    width: 370px;
    height: 210px;
}
.video-scene-main .featured-card.featured-card-grid .featured-card-cover {
    width: 100%;
    height: 100%;
}
/* 样式3：右侧视频卡标题——用户要求比样式1/2额外再向下移动27px（精准只对样式3生效，不影响样式1/2/4） */
.video-scene-main .featured-card-right-grid .featured-card .featured-card-title {
    transform: translateY(27px);
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
}
/* 左侧授权卡片（样式3左卡，非视频卡）—— 用户指定 370×440，跨左列2行 */
.video-scene-main .featured-promo-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 370px;
    height: 440px;
    min-width: 370px;
    max-width: 370px;
    background: linear-gradient(160deg, #3a4058 0%, #2a2f42 60%, #1e222e 100%);
    border-radius: 10px;
    padding: 28px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.featured-promo-card::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(60,200,156,0.25) 0%, transparent 70%);
    border-radius: 50%;
}
.featured-promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
.featured-promo-content {
    position: relative;
    z-index: 1;
}
.featured-promo-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.3;
}
.featured-promo-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    margin: 0 0 24px;
}
.featured-promo-btn {
    display: inline-block;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.2s;
}
.featured-promo-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(60,200,156,0.4);
}

.featured-card {
    background: transparent; border-radius: 8px; overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    align-self: stretch;
}
.featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}
/* 大卡片：占第1列，跨2行 → 高 196*2+14=406（与样式2大卡一致） */
.featured-card-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    height: 406px;
    width: 760px;
}
.featured-card-large .featured-card-cover {
    height: 100%;
    width: 100%;
}
.featured-card-large .featured-card-play svg {
    width: 64px; height: 64px;
}
/* 小卡片：全是图片区 → 370×196（与样式2小卡一致） */
.featured-card-small {
    height: 196px;
    width: 370px;
}
.featured-card-small .featured-card-cover {
    height: 100%;
    width: 100%;
}
.featured-card-small .featured-card-play svg {
    width: 48px; height: 48px;
}
/* 网格卡片 */
.featured-card-grid {
    height: 210px;
}
.featured-card-grid .featured-card-title {
    display: block;
    left: 12px;
    bottom: 36px;
    right: 12px;
    font-size: 13px;
    line-height: 1.4;
}
.featured-card-grid .featured-card-play svg {
    width: 56px; height: 56px;
}

/* 卡片封面 */
.featured-card-cover {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    text-decoration: none !important;
    overflow: hidden;
}
/* 封面图片 - 永远做底图显示（防止切换黑屏/闪黑） */
.featured-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* 视频 - 默认透明盖在img上层，有playing类时渐显盖在img上方（img一直在，不会黑） */
.featured-card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
    pointer-events: none;
    background: transparent;
}
.featured-card.video-playing .featured-card-video {
    opacity: 1 !important;
}
/* 渐变遮罩 */
.featured-card-mask {
    position: absolute; left: 0; right: 0; bottom: 0; top: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
    pointer-events: none;
}
/* 标题 - 左下角显示，参考图片样式（无黑色背景块，文字直接透明贴画面，鼠标悬停/视频播放时淡入） */
.featured-card-title {
    position: absolute;
    left: 12px;
    bottom: 10px;
    right: auto;
    max-width: 85%;
    background: none !important;
    background-color: transparent !important;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 6px rgba(0,0,0,0.5);
    z-index: 2;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
/* 鼠标悬停卡片 OR 视频处于播放状态 → 标题淡入显示 */
.featured-card:hover .featured-card-title,
.featured-card.video-playing .featured-card-title {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}
/* 分辨率 - 右下角显示 */
.featured-card-badges-br {
    position: absolute;
    right: 12px;
    bottom: 10px;
    top: auto;
    left: auto;
}
.featured-badge-res {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1.4;
    gap: 4px;
}
/* 分辨率徽章公共：img 图标样式 */
.featured-badge-res img {
    display: block;
    width: auto;
    height: 18px;
    max-height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
}
/* 场景1：只有图标 - 透明背景无padding */
.featured-badge-res-icon-only {
    padding: 0;
    background: transparent;
    min-width: 24px;
    height: 24px;
}
.featured-badge-res-icon-only img {
    height: 24px;
    max-height: 24px;
}
/* 场景2：只有文字 - 使用基础样式 + 文字样式变体 */
.featured-badge-res-text-only {
    /* 使用基础样式即可 */
}
/* 场景3：图标 + 文字同显 - 保留背景，图标在前文字在后 */
.featured-badge-res-has-both {
    padding: 3px 10px 3px 6px;
}
.featured-badge-res-has-both img {
    height: 16px;
}
.featured-badge-res-title {
    display: inline-block;
    line-height: 1.2;
}
/* 分辨率徽章：文字样式 - 原始样式（默认 text） */
.featured-badge-res-style-text {
    /* 使用 .featured-badge-res 默认样式 */
}
/* 分辨率徽章：胶囊样式 */
.featured-badge-res-style-capsule {
    padding: 3px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(43,125,233,0.9) 0%, rgba(26,91,181,0.9) 100%);
}
/* 胶囊 + 图标 + 文字同显 */
.featured-badge-res-style-capsule.featured-badge-res-has-both {
    padding: 2px 12px 2px 6px;
}
/* 胶囊 + 只有图标 */
.featured-badge-res-style-capsule.featured-badge-res-icon-only {
    background: transparent;
    padding: 0;
}
/* 分辨率徽章：方形样式 */
.featured-badge-res-style-square {
    padding: 4px 8px;
    border-radius: 2px;
    background: rgba(43,125,233,0.85);
}
/* 方形 + 图标 + 文字同显 */
.featured-badge-res-style-square.featured-badge-res-has-both {
    padding: 3px 8px 3px 5px;
}
/* 方形 + 只有图标 */
.featured-badge-res-style-square.featured-badge-res-icon-only {
    background: transparent;
    padding: 0;
}
/* 时长 - 隐藏 */
.featured-card-duration {
    display: none;
}
/* 播放按钮：鼠标悬停自动播放视频 → 任何状态下都不显示中央播放图标 */
.featured-card-play {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none !important;
    opacity: 0 !important;
}
.featured-card:hover .featured-card-play,
.featured-card.video-playing .featured-card-play {
    display: none !important;
    opacity: 0 !important;
}
/* 角标容器 - 默认右下角定位（匹配参考图4K ULTRA HD分辨率徽章位置） */
.featured-card-badges {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}
/* 分辨率徽章类 - 统一右下角（无论PHP里写-tl还是-br，统一渲染在右下角参考图位置） */
.featured-card-badges-tl,
.featured-card-badges-br {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 10px;
}
.featured-badge-count {
    font-size: 11px; color: #fff; font-weight: 500;
    background: rgba(0,0,0,0.6);
    padding: 4px 10px; border-radius: 4px;
}
/* 底部信息条（仅大卡片有） */
.featured-card-info {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    background: #1e222e;
}
.featured-card-count {
    font-size: 12px; color: rgba(255,255,255,0.65);
}
.featured-card-download {
    font-size: 11px; color: #fff; font-weight: 500;
    background: linear-gradient(135deg, #2b7de9 0%, #1a5bb5 100%);
    padding: 4px 12px; border-radius: 14px;
    text-decoration: none !important;
    transition: all 0.2s;
}
.featured-card-download:hover {
    background: linear-gradient(135deg, #1a5bb5 0%, #0f3d8a 100%);
    transform: scale(1.04);
}

/* 响应式：上新视频精选 */
@media (max-width: 1400px) {
    .video-featured-main {
        grid-template-columns: 45.7fr 24.3fr 24.3fr;
    }
    .video-premium-main {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 1080px) {
    .video-featured-main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    .video-featured-main .featured-card-large {
        grid-column: span 2;
        grid-row: auto;
    }
    .video-featured-main .featured-card-large .featured-card-cover {
        height: 0; padding-bottom: 62.5%; width: 100%;
    }
    .video-featured-main .featured-card-small {
        height: auto;
    }
    .video-featured-main .featured-card-small .featured-card-cover {
        height: 0; padding-bottom: 56%; width: 100%;
    }
    /* 海量视频响应式：单列堆叠 */
    .video-premium-main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .premium-card-large {
        grid-column: span 2;
        grid-row: auto;
    }
    .premium-card-small {
        grid-column: auto !important;
        grid-row: auto !important;
        height: 200px;
    }
}

/* 响应式：热门场景推荐 */
@media (max-width: 1400px) {
    .video-scene-main {
        grid-template-columns: 260px 1fr 1fr 1fr;
    }
}
@media (max-width: 1100px) {
    .video-scene-main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    .video-scene-main .featured-promo-card {
        grid-column: span 2;
        grid-row: auto;
        padding: 24px 20px;
    }
    .featured-card-grid {
        height: 200px;
    }
    .featured-card-grid .featured-card-cover {
        height: 200px;
    }
}
@media (max-width: 768px) {
    .video-scene-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .video-scene-main .featured-promo-card {
        grid-column: span 1;
    }
    .featured-card-grid {
        height: 220px;
    }
    .featured-card-grid .featured-card-cover {
        height: 220px;
    }
}
@media (max-width: 768px) {
    .video-featured-header {
        padding: 16px 0 12px;
    }
    .video-featured-tabs-row {
        flex-direction: column; align-items: flex-start;
    }
}

/* 查看更多 */
.video-view-more {
    text-align: center; margin: 30px 0 50px;
}
.video-view-more a {
    display: inline-block; padding: 14px 60px;
    background: linear-gradient(135deg, #2b7de9 0%, #1a5bb5 100%);
    color: #fff; text-decoration: none; border-radius: 30px;
    font-size: 16px; font-weight: 500; transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(43, 125, 233, 0.3);
}
.video-view-more a:hover {
    background: linear-gradient(135deg, #1a5bb5 0%, #0f3d8a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(43, 125, 233, 0.4);
}

/* 区域标题 */
.video-section-header {
    display: flex; align-items: baseline; gap: 14px; margin: 30px 0 20px;
}
.video-section-header h2 {
    font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0; position: relative; padding-left: 14px;
}
.video-section-header h2::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 20px; background: #0f3460; border-radius: 2px;
}
.video-section-sub {
    font-size: 12px; color: #bbb; letter-spacing: 2px; font-weight: 500;
}

/* 视频网格 */
.video-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;
}

/* 视频卡片 */
.video-card {
    background: #fff; border-radius: 12px; overflow: hidden; transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.video-card:hover {
    transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.video-card-cover {
    display: block; position: relative; width: 100%; padding-bottom: 65%; overflow: hidden; background: #f5f5f5;
}
.video-card-cover img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.video-card:hover .video-card-cover img { transform: scale(1.05); }
.video-cover-placeholder {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; color: #ccc;
}
.video-duration {
    position: absolute; bottom: 8px; right: 8px; padding: 2px 8px; font-size: 12px;
    color: #fff; background: rgba(0,0,0,0.7); border-radius: 3px; z-index: 2;
}
.video-resolution {
    position: absolute; top: 8px; left: 8px; padding: 2px 8px; font-size: 11px;
    color: #fff; background: rgba(15,52,96,0.85); border-radius: 3px; z-index: 2; font-weight: 500;
}
.video-badge {
    position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: 11px;
    color: #fff; background: #e74c3c; border-radius: 3px; z-index: 2; font-weight: 500;
}
.video-play-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease; z-index: 3;
}
.video-card:hover .video-play-overlay { opacity: 1; }

/* 视频hover自动播放 */
.video-cover-img {
    transition: opacity 0.3s ease;
}
.video-hover-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none;
}
.video-card:hover .video-cover-img {
    opacity: 0;
}
.video-card:hover .video-hover-video {
    opacity: 1;
}
.video-card:hover .video-play-overlay svg {
    opacity: 0.7;
}
.video-card:hover .video-play-overlay svg path {
    animation: pulse-play 0.5s ease-in-out infinite alternate;
}
@keyframes pulse-play {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* 卡片信息 */
.video-card-info { padding: 12px 14px 14px; }
.video-card-title {
    font-size: 14px; font-weight: 600; color: #1a1a2e; margin: 0 0 10px; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.video-card-title a { color: inherit; text-decoration: none; }
.video-card-title a:hover { color: #2b7de9; }
.video-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.video-downloads {
    font-size: 13px; color: #999; display: flex; align-items: center; gap: 3px;
}
.video-btn-download {
    display: inline-block; padding: 5px 14px; font-size: 13px; color: #fff; text-decoration: none;
    background: #2b7de9; border-radius: 16px; transition: all 0.2s;
}
.video-btn-download:hover { background: #1a5bb5; color: #fff; }

/* 分页 */
.video-pagination {
    text-align: center; padding: 20px 0 40px;
}
.video-pagination .page-numbers {
    display: inline-block; padding: 8px 14px; margin: 0 3px; font-size: 14px; color: #555;
    text-decoration: none; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; transition: all 0.2s;
}
.video-pagination .page-numbers:hover { color: #0f3460; border-color: #0f3460; }
.video-pagination .page-numbers.current { color: #fff; background: #0f3460; border-color: #0f3460; }

/* 空状态 */
.video-empty {
    text-align: center; padding: 80px 20px; color: #999;
}
.video-empty p { margin-top: 16px; font-size: 15px; }

/* 响应式 */
@media (max-width: 1024px) {
    .video-grid { grid-template-columns: repeat(3, 1fr); }
    .video-banner { height: 500px; }
    .video-category-shortcuts { gap: 20px; }
    .video-main-row { flex-direction: column; }
    .video-vip-area { width: 100%; }
}
@media (max-width: 768px) {
    .video-banner { height: 400px; }
    .video-banner-title { font-size: 26px; }
    .video-banner-desc { font-size: 13px; margin-bottom: 24px; }
    .video-banner-search { height: 52px; }
    .video-search-form button { height: 100%; padding: 0 20px; font-size: 14px; }
    .video-search-tabs { padding: 0 14px; }
    .video-search-tabs .search-tab { font-size: 14px; }
    .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .video-section-header h2 { font-size: 18px; }
    .video-card-title { font-size: 13px; }
    .video-container { padding: 0 12px; }
    .video-category-shortcuts { gap: 16px; flex-wrap: wrap; }
    .video-shortcut-icon { width: 90px; height: 90px; }
    .video-shortcut-icon-img { font-size: 30px; }
    .video-shortcut-name { font-size: 12px; }
    .video-vip-area { flex-direction: column; gap: 14px; padding: 16px; height: auto; border-radius: 10px; }
    .vip-card-divider { width: 100%; height: 1px; }
    .video-vip-card { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
    .video-grid { grid-template-columns: 1fr; }
    .video-banner-title { font-size: 20px; }
    .video-search-form button span { display: none; }
    .video-category-shortcuts { gap: 12px; }
    .video-shortcut-icon { width: 70px; height: 70px; }
    .video-shortcut-icon-img { font-size: 24px; }
    .video-shortcut-name { font-size: 11px; }
    .vip-price { font-size: 18px; }
    .vip-unit { font-size: 11px; }
}

/* ===== 上新视频精选 - 胶片风格 ===== */
.video-film-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 40px 0 60px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(60,200,156,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(120,90,220,0.1) 0%, transparent 55%),
        linear-gradient(180deg, #1a1f2e 0%, #161b28 50%, #12181f 100%);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.video-film-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(60,200,156,0.25), rgba(120,90,220,0.3), transparent);
}
.video-film-container::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(120,90,220,0.25), rgba(60,200,156,0.3), transparent);
}
.video-film-container > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.video-film-header {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px;
}

.video-film-title-wrap {
    display: flex; align-items: baseline; gap: 14px;
}

.video-film-title {
    font-size: 24px; font-weight: 700; color: #fff; margin: 0;
    position: relative; padding-left: 14px;
}
.video-film-title::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; background: linear-gradient(180deg, #3cc89c, #21a67f);
    border-radius: 2px;
}
.video-film-sub {
    font-size: 12px; color: rgba(255,255,255,0.5);
    letter-spacing: 2px; font-weight: 500;
}

.video-film-tabs-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

.video-film-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.film-tab {
    font-size: 13px; color: rgba(255,255,255,0.7);
    padding: 6px 16px; border-radius: 18px;
    cursor: pointer; transition: all 0.2s;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}
.film-tab:hover { color: #fff; background: rgba(255,255,255,0.15); }
.film-tab.active {
    color: #fff; background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    font-weight: 600; border-color: transparent;
}

.film-tab-more {
    font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none !important;
    transition: color 0.2s;
}
.film-tab-more:hover { color: #3cc89c; }

/* 胶片网格 4×2（上4下4，共8卡） */
.video-film-grid {
    display: grid; grid-template-columns: repeat(4, 340px);
    grid-template-rows: 200px 200px;
    gap: 20px;
    justify-content: center;
}

/* 胶片卡片 - 固定尺寸 340×200 */
.film-card {
    width: 340px;
    height: 200px;
    border-radius: 10px; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.film-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.film-card-inner {
    display: flex; height: 100%;
    text-decoration: none !important;
}

/* 胶片条（左侧装饰） */
.film-strip {
    width: 18px; flex-shrink: 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    display: flex; flex-direction: column;
    justify-content: space-around;
    padding: 10px 0;
    border-radius: 0;
}

.film-hole {
    display: block; width: 10px; height: 6px;
    margin: 0 auto;
    background: #333;
    border-radius: 1px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

/* 卡片媒体区域 */
.film-card-media {
    flex: 1; position: relative;
    background: #1a1a1a;
    overflow: hidden;
    min-height: 150px;
    border-radius: 0 10px 10px 0;
}

.film-card-img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.film-card:hover .film-card-img { transform: scale(1.05); }

.film-card-placeholder {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}

/* 视频hover自动播放 */
.film-card-video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transition: opacity 0.3s ease; pointer-events: none;
}
.film-card:hover .film-card-img { opacity: 0; }
.film-card:hover .film-card-placeholder { opacity: 0; }
.film-card:hover .film-card-video { opacity: 1; }

/* 播放按钮 */
.film-card-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; transition: opacity 0.3s ease;
    z-index: 3;
}
.film-card:hover .film-card-play { opacity: 1; }
.film-card-play svg { width: 42px; height: 42px; }

/* 底部遮罩 + 标题 */
.film-card-overlay {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none; z-index: 2;
}

.film-card-title {
    position: absolute; bottom: 10px; left: 12px;
    right: 70px; color: #fff; font-size: 13px;
    font-weight: 500; line-height: 1.4;
    z-index: 3; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

.film-card-res {
    position: absolute; bottom: 8px; right: 10px;
    padding: 2px 8px; font-size: 11px; font-weight: 600;
    color: #fff; background: rgba(0,0,0,0.6);
    border-radius: 10px; z-index: 3;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.3;
    overflow: hidden;
}
/* film-card: 公共图标 */
.film-card-res img {
    display: block;
    width: auto;
    height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
}
/* film-card: 只有图标 */
.film-card-res-icon-only {
    padding: 0;
    background: transparent;
    min-width: 20px;
    height: 20px;
    backdrop-filter: none;
}
.film-card-res-icon-only img {
    height: 20px;
}
/* film-card: 图标+文字同显 */
.film-card-res-has-both {
    padding: 2px 8px 2px 5px;
}
.film-card-res-has-both img {
    height: 13px;
}
.film-card-res-title {
    display: inline-block;
    line-height: 1.2;
}
/* film-card: 胶囊样式 */
.film-card-res-style-capsule {
    padding: 2px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(43,125,233,0.9) 0%, rgba(26,91,181,0.9) 100%);
}
.film-card-res-style-capsule.film-card-res-has-both {
    padding: 2px 10px 2px 5px;
}
.film-card-res-style-capsule.film-card-res-icon-only {
    background: transparent;
    padding: 0;
}
/* film-card: 方形样式 */
.film-card-res-style-square {
    padding: 3px 7px;
    border-radius: 2px;
    background: rgba(43,125,233,0.85);
}
.film-card-res-style-square.film-card-res-icon-only {
    background: transparent;
    padding: 0;
}

/* 胶片卡片响应式：总宽=4*340+3*20=1420px，窄于此时响应式 */
@media (max-width: 1480px) {
    .video-film-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .film-card {
        width: auto; height: 200px;
    }
}
@media (max-width: 720px) {
    .video-film-grid { grid-template-columns: 1fr; }
    .film-card { width: 100%; height: 190px; }
    .video-film-title { font-size: 20px; }
    .film-card-title { font-size: 12px; }
}

/* ===== 1200+协议模特 商用版权无忧 - 参考699pic.com/media/ 样式 ===== */
.models-container {
    width: 100%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(60,200,156,0.06) 0%, transparent 55%),
        linear-gradient(180deg, #12181f 0%, #1a2030 100%);
    padding: 50px 0 70px;
    overflow: hidden;
}
.models-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.models-header {
    text-align: center;
    margin-bottom: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.models-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}
.models-sub {
    font-size: 13px;
    color: rgba(60,200,156,0.35);
    letter-spacing: 3px;
    font-weight: 600;
}
/* clearfix */
.clearfix::before, .clearfix::after { content: ''; display: table; }
.clearfix::after { clear: both; }

/* v139 修复与视频列表左对齐：将margin:0 auto改为margin-left:0;margin-right:auto，
   使.models-box左边缘与视频卡片左边缘对齐（父容器内容区左起点），
   不再居中溢出导致左边比视频卡片多偏左100px */
.models-box {
    position: relative;
    width: 1520px;
    max-width: none;
    margin: 0 0 0 0;
    height: 437px;
    overflow: visible;
}
/* v97 新增 track-wrapper：照片容器与面板同层，统一 translateX(-66px)，两者一起左移；
   面板以 absolute 定位在此wrapper内，left 由JS同步=照片容器宽+20间距，
   从而实现 面板跟随图片滑动、间距恒保20px 的效果 */
.models-track-wrapper {
    position: relative;
    transform: translateX(-66px);
    height: 437px;
    overflow: visible;
}
.models-left {
    width: 1150px; /* v97 默认态=第五张完整：宽=裁点1150，最后一张i4:754~1150=396完整 */
    height: 437px;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    /* transform 移至 .models-track-wrapper，两者统一跟动 */
}
.models-track {
    position: relative;
    width: 100%;
    height: 100%;
}
.models-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 396px;
    height: 437px;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    background: #222;
    /* v97 全部5张卡统一加平滑过渡（第一张不再锁死0/禁用过渡）*/
    transition: left 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
}
/* v97 第一张卡不再 left:0!important/transform:none!important/transition:none!important，
   允许随布局滑到 L=34(idx3/4)等位置；只保留默认 z-index:1 */
.models-img[data-model="0"] {
    z-index: 1;
}
.models-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
/* v97 非激活态统一暗化（原规则只对非0号卡暗化，与默认i=4激活的场景冲突）*/
.models-img:not(.active) img {
    filter: brightness(0.85) saturate(0.95);
    transition: filter 0.45s ease;
}
.models-img.active img {
    filter: brightness(1) saturate(1);
}
/* v97 右侧面板：在 .models-track-wrapper 内 absolute，left 由JS同步 = .models-left.width + 20
   面板自身加 left 过渡，与图片同步跟滑；全程与最后一张可见右保持间距20px */
.models-right {
    position: absolute;
    top: 0;
    left: 1170px; /* 默认1150+20=1170，JS会同步覆盖 */
    right: auto;
    width: 365px;
    height: 437px;
    background: linear-gradient(135deg, #134028 0%, #0a2b1a 100%);
    z-index: 100;
    box-sizing: border-box;
    padding: 32px 28px;
    border-radius: 2px;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
    border: 1px solid rgba(60,200,156,0.15);
    /* 与图片同一跟手曲线：滑动时面板平滑位移 */
    transition: left 0.45s cubic-bezier(.22,1,.36,1);
    overflow: visible;
    /* v103 作为 slide 叠放容器 */
    isolation: isolate;
}

/* ========== v103 右侧 5 个 slide 叠放切换（跟随照片）
   v104 修复文字切换晃动：
     ① 去掉 translateY 垂直位移，仅保留 opacity 纯淡入淡出(0.2s)；
     ② 去掉 flex 布局 → slide 内部各区块(intro / desc / info / btn) 全部 absolute 固定坐标，
        不论 5 个 slide 内容长短如何，4 个区块的位置、大小在像素级完全一致 → 零晃动；
     ③ 超出部分安全裁切或隐藏（避免溢出造成布局抖动）。 */
.models-right-slide {
    position: absolute;
    inset: 32px 28px;              /* 与父 padding 对齐，不覆盖边框 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    /* 仅 opacity 过渡，无位移 → 零晃动 */
    transition: opacity 0.2s ease;
}
.models-right-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}
/* —— intro：顶部固定位置（最大 1 行，多余省略） —— */
.models-right-slide > .models-right-intro {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    line-height: 26px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* —— desc：大标题内容长描述（最多2行，多余省略） —— */
.models-right-slide > .models-right-desc {
    position: absolute;
    top: 42px;
    left: 12px;
    right: 4px;
    height: 46px;                   /* line-height 1.75 × 2行 ≈ 46px */
    line-height: 1.65;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}
.models-right-slide > .models-right-desc:empty { display: none; }
/* —— info 4 行：固定在 desc 下方 ~92px 位置，底部到 58px 以上（给按钮留 46+12=58） —— */
.models-right-slide > .models-right-info {
    position: absolute;
    top: 96px;
    left: 0;
    right: 0;
    bottom: 62px;              /* 下方留 62px = 按钮高度(44) + 间距(18) */
    overflow: hidden;
    font-size: 13px;
}
.models-right-slide > .models-right-info p {
    margin: 0 0 12px 0;
    padding: 0;
    line-height: 1.65;
    color: rgba(255,255,255,0.85);
    display: flex;
    gap: 6px;
}
.models-right-slide > .models-right-info p:last-child { margin-bottom: 0; }
/* —— 按钮：始终钉在 slide 底部，像素级固定位置 —— */
.models-right-slide > .models-right-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 11px 18px;
    box-sizing: border-box;
}

/* v103 大标题内容 → 卡片长描述（全局样式被 slide 内绝对定位覆盖，保留兜底）*/
.models-right-desc {
    margin: -4px 0 14px 0;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    padding-left: 12px;
    padding-right: 4px;
}

.models-right-intro {
    font-size: 17px;
    font-weight: 700;
    color: #3cc89c;
    padding-left: 12px;
    margin-bottom: 22px;
    position: relative;
    line-height: 1.4;
}
.models-right-intro::before {
    content: '';
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 16px;
    background: linear-gradient(180deg, #3cc89c, #21a67f);
    border-radius: 2px;
}
.models-right-info {
    font-size: 13px;
}
.models-right-info p {
    margin: 0 0 14px 0;
    padding: 0;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    display: flex;
    gap: 6px;
}
.models-right-info p:last-child { margin-bottom: 0; }
.models-right-info span {
    flex-shrink: 0;
    color: rgba(60,200,156,0.6);
    font-weight: 500;
}
.models-right-info em {
    font-style: normal;
    color: #fff;
    font-weight: 500;
}

/* v101 右侧绿色面板 CTA 链接按钮 */
.models-right-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    width: 100%;
    padding: 11px 18px;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    color: #0a2b1a !important;
    text-decoration: none !important;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 4px 14px rgba(60,200,156,0.28);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all .25s ease;
}
.models-right-btn:hover {
    background: linear-gradient(135deg, #4fd9ad 0%, #27b98d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(60,200,156,0.38);
    color: #072013 !important;
}
.models-right-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(60,200,156,0.28);
}

/* 模特区块响应式 */
@media (max-width: 1100px) {
    .models-box {
        height: auto;
    }
    .models-left {
        width: 100%; height: 300px;
    }
    .models-img { width: 280px; height: 300px; }
    .models-right {
        position: relative;
        width: 100%; max-width: 680px; height: auto;
        margin: 20px auto 0;
        right: auto; top: auto;
    }
}
@media (max-width: 680px) {
    .models-title { font-size: 20px; }
    .models-left { height: 220px; }
    .models-img { width: 200px; height: 220px; }
    .models-right { padding: 20px 18px; }
}

/* ===== 125129 企业选择摄图高清正版视频 - 幻灯片 ===== */
.enterprise-container {
    width: 100%;
    background:
        radial-gradient(ellipse at 20% 100%, rgba(60,200,156,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 0%, rgba(90,110,220,0.08) 0%, transparent 55%),
        linear-gradient(180deg, #1a2030 0%, #151a27 50%, #12181f 100%);
    padding: 50px 0 80px;
    overflow: hidden;
}
.enterprise-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.enterprise-title {
    margin: 0 0 34px 0;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

/* 品牌徽标行 */
.enterprise-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 10px 0 46px 0;
    padding: 14px 0;
    flex-wrap: wrap;
}
.logo-badge {
    width: 56px; height: 56px; border-radius: 50%;
    background: #2a2f45;
    border: 2px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(.22,.86,.35,1.2);
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
}
.logo-badge span { font-size: 13px; font-weight: 700; transition: font-size 0.3s ease; }
.logo-badge em { font-size: 10px; font-style: normal; color: rgba(255,255,255,0.7); margin-top: 1px; transition: font-size 0.3s ease; }
.logo-badge img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.logo-badge:hover { transform: translateY(-2px); }
.logo-badge-orange { background: linear-gradient(135deg, #ff9a4d, #e67300); border-color: rgba(255,154,77,0.4); }
.logo-badge-red    { background: linear-gradient(135deg, #e64040, #a81010); border-color: rgba(230,64,64,0.4); }
/* 激活的徽标 - 放大1.4倍 + 绿渐变外发光 */
.logo-badge.active {
    transform: scale(1.4);
    border-color: transparent;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    box-shadow:
        0 0 0 4px rgba(60,200,156,0.25),
        0 0 0 8px rgba(60,200,156,0.12),
        0 12px 28px rgba(0,0,0,0.5);
    z-index: 3;
    position: relative;
}
.logo-badge.active em { color: rgba(255,255,255,0.95); }

/* 幻灯片容器 */
.enterprise-carousel {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

.ec-track-wrap {
    overflow: hidden;
    border-radius: 16px;
}
.ec-track {
    position: relative;
    display: flex;
    transition: transform 0.6s cubic-bezier(.22,.86,.35,1);
    will-change: transform;
}
.ec-slide {
    flex: 0 0 100%;
    min-width: 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.ec-slide-inner {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    padding: 30px 36px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    min-height: 360px;
}

/* 左：封面标记1 */
.ec-cover {
    flex: 0 0 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-end;
}
.ec-cover-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    padding-left: 8px;
}
.ec-cover-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #2a2f45;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.08);
}
.ec-cover-box img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ec-cover-tag {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    padding-left: 8px;
}

/* 右：视频标记2（显示器效果） */
.ec-video {
    flex: 1;
    min-width: 0;
    align-self: flex-end;
}
.monitor {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    padding-bottom: 26px;
}
.monitor-screen {
    position: relative;
    background: #141821;
    border: 10px solid #1e2534;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.55);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.monitor-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #3cc89c, #21a67f, transparent);
    z-index: 3;
}
.monitor-screen img,
.monitor-screen video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.ec-play-big {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.95;
    z-index: 4;
}
.ec-play-big svg { width: 64px; height: 64px; }
.monitor-stand {
    width: 60px; height: 18px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2a3144, #1a1f2e);
    border-radius: 0 0 4px 4px;
}
.monitor-base {
    width: 130px; height: 6px;
    margin: 0 auto;
    background: linear-gradient(180deg, #333a50, #22283a);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* 企业幻灯片响应式 */
@media (max-width: 1100px) {
    .ec-slide-inner { flex-direction: column; align-items: center; padding: 24px 20px; }
    .ec-cover { flex: 0 0 auto; width: 100%; max-width: 440px; align-self: center; }
    .ec-video { align-self: center; width: 100%; }
    .monitor { margin: 0 auto; }
}
@media (max-width: 680px) {
    .enterprise-title { font-size: 20px; margin-bottom: 24px; }
    .enterprise-logos { gap: 12px; margin-bottom: 24px; }
    .logo-badge { width: 44px; height: 44px; }
    .logo-badge span { font-size: 11px; }
    .logo-badge em { font-size: 8px; }
    .ec-slide-inner { padding: 18px 14px; gap: 18px; }
    .ec-play-big svg { width: 48px; height: 48px; }
}

/* ===== 企业视频VIP 价格卡片 ===== */
.evip-container {
    width: 100%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(60,200,156,0.08) 0%, transparent 55%),
        linear-gradient(180deg, #151a27 0%, #14181f 60%, #12181f 100%);
    padding: 50px 0 90px;
}
.evip-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.evip-title {
    margin: 0 0 46px 0;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.evip-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* 单卡片 */
.evip-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 32px 30px 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}
.evip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
    border-color: rgba(60,200,156,0.25);
}

/* 中间 热门卡 - 放大+绿色边框 */
.evip-card-hot {
    background: linear-gradient(180deg, rgba(60,200,156,0.1) 0%, rgba(255,255,255,0.03) 100%);
    border: 2px solid rgba(60,200,156,0.55);
    transform: scale(1.04);
    box-shadow: 0 24px 52px rgba(0,0,0,0.5);
}
.evip-card-hot:hover { transform: scale(1.04) translateY(-4px); }

.evip-hot-ribbon {
    position: absolute;
    top: 14px; right: -6px;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px 0 0 4px;
    box-shadow: 0 4px 10px rgba(33,166,127,0.4);
}
.evip-hot-ribbon::after {
    content: '';
    position: absolute;
    right: 0; bottom: -6px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 6px 0 0;
    border-color: #188063 transparent transparent transparent;
}

.evip-card-name {
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 14px;
}

.evip-card-price {
    text-align: center;
    color: #fff;
    margin-bottom: 18px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}
.evip-yen { font-size: 18px; font-weight: 600; color: #3cc89c; }
.evip-num { font-size: 40px; font-weight: 800; color: #3cc89c; letter-spacing: 1px; line-height: 1; }
.evip-unit { font-size: 14px; color: rgba(255,255,255,0.6); margin-left: 2px; }

/* 开通按钮 - 无下划线 */
.evip-btn {
    display: block;
    text-align: center;
    padding: 11px 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: rgba(60,200,156,0.12);
    border: 1px solid rgba(60,200,156,0.5);
    border-radius: 999px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    margin-bottom: 22px;
    box-shadow: 0 4px 12px rgba(60,200,156,0.08);
}
.evip-btn:hover {
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(33,166,127,0.35);
}
.evip-btn-hot {
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(33,166,127,0.4);
}
.evip-btn-hot:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(33,166,127,0.55);
}

/* 分隔线 */
.evip-card-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    margin-bottom: 22px;
}

/* 下载能力区 */
.evip-card-cap {
    margin-bottom: 22px;
}
.evip-card-cap strong {
    display: block;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.95);
    margin-bottom: 10px;
    font-weight: 600;
}
.evip-cap-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.evip-cap-tags span {
    padding: 3px 10px;
    font-size: 11px;
    color: #3cc89c;
    background: rgba(60,200,156,0.1);
    border: 1px solid rgba(60,200,156,0.25);
    border-radius: 4px;
}
.evip-cap-tags span.cap-disabled {
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    text-decoration: line-through;
}

/* 特权列表 */
.evip-card-perks { flex: 1; }
.evip-perk-title {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 12px;
    font-weight: 500;
}
.evip-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.evip-perks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}
.evip-perks li > span {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    margin-top: 2px;
    position: relative;
    background: rgba(255,255,255,0.03);
}
.evip-perks li > span.check-on {
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    border-color: transparent;
}
.evip-perks li > span.check-on::after {
    content: '';
    position: absolute;
    left: 3.5px; top: 1.5px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}

/* 企业VIP响应式 */
@media (max-width: 1100px) {
    .evip-cards { grid-template-columns: 1fr; gap: 22px; max-width: 520px; margin: 0 auto; }
    .evip-card-hot { transform: none; }
    .evip-card-hot:hover { transform: translateY(-4px); }
}
@media (max-width: 680px) {
    .evip-title { font-size: 20px; margin-bottom: 32px; }
    .evip-num { font-size: 32px; }
    .evip-card { padding: 26px 20px 22px; }
}

/* ===== 乙方 甲方授权购买 ===== */
.partyB-container {
    width: 100%;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(60,200,156,0.06) 0%, transparent 55%),
        linear-gradient(180deg, #12181f 0%, #161b28 50%, #151a27 100%);
    padding: 50px 0 60px;
}
.partyB-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.partyB-title {
    margin: 0 0 40px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

/* 4列卡片 */
.partyB-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 42px;
}
.partyB-card {
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 22px 20px 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}
.partyB-card:hover {
    transform: translateY(-4px);
    border-color: rgba(60,200,156,0.25);
    box-shadow: 0 18px 38px rgba(0,0,0,0.45);
}

/* 角色卡通用标题 */
.partyB-role-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.partyB-role-desc {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.62);
    margin-bottom: 16px;
}
.partyB-role-art {
    margin-top: auto;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    height: 155px;
    position: relative;
    background: rgba(0,0,0,0.2);
}
.partyB-role-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.partyB-card:hover .partyB-role-art img { transform: scale(1.05); }

/* 第4卡：为甲方公司购买 */
.partyB-card-buy {
    background: linear-gradient(180deg, rgba(33,166,127,0.14) 0%, rgba(33,166,127,0.04) 100%);
    border: 1px solid rgba(60,200,156,0.35);
    padding: 26px 22px;
}
.partyB-buy-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.partyB-buy-desc {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(60,200,156,0.18);
}
.partyB-buy-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.partyB-buy-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}
.pb-tick {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-top: 2px;
    position: relative;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    box-shadow: 0 2px 6px rgba(33,166,127,0.35);
}
.pb-tick::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 查看详情按钮 无下划线 */
.partyB-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    border-radius: 999px;
    text-decoration: none !important;
    margin-top: auto;
    transition: all 0.25s ease;
    box-shadow: 0 8px 22px rgba(33,166,127,0.35);
}
.partyB-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 12px 28px rgba(33,166,127,0.55);
}

/* 底部 6 服务图标 */
.partyB-services {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.pb-svc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 8px;
    border-radius: 10px;
    transition: background 0.25s ease, transform 0.25s ease;
}
.pb-svc-item:hover {
    background: rgba(60,200,156,0.06);
    transform: translateY(-2px);
}
.pb-svc-ico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(60,200,156,0.1);
    color: #3cc89c;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.pb-svc-ico svg { width: 26px; height: 26px; }
.pb-svc-ico img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.pb-svc-item:hover .pb-svc-ico {
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(33,166,127,0.4);
}
.pb-svc-text {
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    text-align: center;
    line-height: 1.5;
}

/* 乙方区块响应式 */
@media (max-width: 1200px) {
    .partyB-cards { grid-template-columns: repeat(2, 1fr); }
    .partyB-services { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
    .partyB-title { font-size: 18px; margin-bottom: 28px; }
    .partyB-cards { grid-template-columns: 1fr; }
    .partyB-services { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 摄图商业视觉中心 ===== */
.vc-container {
    position: relative;
    width: 100%;
    overflow: visible;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(60,200,156,0.05) 0%, transparent 55%),
        linear-gradient(180deg, #151a27 0%, #131822 100%);
    padding: 50px 0 120px;
}
.vc-inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: visible;
}
.vc-title {
    margin: 0 0 38px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

/* 舞台：100px间距，右侧视频top60px/right100px，底部150px文字区 */
.vc-stage {
    position: relative;
    width: 1432px;
    height: 538px;
    margin: 0 auto;
    overflow: visible;
}

/* ==== 单卡通用 ==== */
.vc-card {
    position: absolute;
    border-radius: 22px;
    overflow: hidden;
    transition:
        transform 0.5s cubic-bezier(.22,.86,.35,1.05),
        clip-path 0.5s cubic-bezier(.22,.86,.35,1),
        box-shadow 0.4s ease,
        opacity 0.4s ease,
        filter 0.4s ease,
        width 0.5s cubic-bezier(.22,.86,.35,1),
        height 0.5s cubic-bezier(.22,.86,.35,1);
    background: #1a2030;
    box-shadow: 0 18px 42px rgba(0,0,0,0.45);
    will-change: transform, clip-path;
}

/*
 * 默认状态：左右对称的宽矩形，clip-path斜切形成六边形
 * 左侧卡：右边切去一块（右上→右下斜刀）
 * 右侧卡：左边切去一块（左上→左下斜刀）
 * 视觉间距15px（stage宽度1447px + 60px斜切 = 15px视觉间距）
 */
.vc-card-left {
    clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%);
}
.vc-card-right {
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0;
    transform: translateX(40px) scale(0.94);
    pointer-events: none;
}

/* 左侧卡：始终存在 */
.vc-stage > .vc-card-left {
    left: 0;
    top: 0;
    width: 746px;
    height: 538px;
    z-index: 2;
}
/* 其他左侧卡：默认完全隐藏（与右侧对称） */
.vc-card-left:not(.vc-card-active) {
    display: block;
    pointer-events: auto;
    opacity: 0;
    z-index: 1;
    transform: translateX(0) scale(1);
    left: 0;
    top: 60px;
    width: 555px;
    height: 314px;
    visibility: hidden;
}

/* 右侧卡堆叠：默认746×538显示封面，与左侧一样大 */
.vc-stage > .vc-card-right {
    right: 0;
    top: 0;
    width: 746px;
    height: 538px;
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);
}
/* active 的右侧卡：完全展开可见，保留斜切 */
.vc-stage > .vc-card-right.vc-card-active {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: auto;
    z-index: 3;
    right: 0 !important;
    top: 0 !important;
    width: 746px !important;
    height: 538px !important;
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%) !important;
}
/* 其他右侧卡：默认完全隐藏 */
.vc-card-right:not(.vc-card-active) {
    display: block;
    pointer-events: auto;
    opacity: 0;
    z-index: 1;
    transform: translateX(0) scale(1);
    right: 0;
    top: 60px;
    width: 555px;
    height: 314px;
    visibility: hidden;
}
/* hover时：右侧卡视频模式，堆叠卡片从两侧探出 */
.vc-stage:hover .vc-card-right[data-vc-layer="0"],
.vc-stage.force-hover .vc-card-right[data-vc-layer="0"] { z-index: 3 !important; right: auto !important; left: calc(50% + 82px) !important; top: 60px !important; width: 555px !important; height: 314px !important; min-height: 314px !important; max-height: 314px !important; clip-path: none !important; transform: translateY(-4px) scale(1) !important; opacity: 1 !important; visibility: visible !important; }
.vc-stage:hover .vc-card-right[data-vc-layer="1"],
.vc-stage.force-hover .vc-card-right[data-vc-layer="1"] { z-index: 2 !important; right: auto !important; left: calc(50% + 4px) !important; top: 87px !important; width: 480px !important; height: 260px !important; min-width: 480px !important; max-width: 480px !important; min-height: 260px !important; max-height: 260px !important; clip-path: none !important; transform: none !important; opacity: 0.85 !important; visibility: visible !important; filter: brightness(0.7) !important; }
.vc-stage:hover .vc-card-right[data-vc-layer="2"],
.vc-stage.force-hover .vc-card-right[data-vc-layer="2"] { z-index: 1 !important; right: auto !important; left: calc(50% + 237px) !important; top: 87px !important; width: 480px !important; height: 260px !important; min-width: 480px !important; max-width: 480px !important; min-height: 260px !important; max-height: 260px !important; clip-path: none !important; transform: none !important; opacity: 0.75 !important; visibility: visible !important; filter: brightness(0.7) !important; pointer-events: auto !important; }

/* 当舞台hover时：非激活的右侧卡片显示为堆叠预览 */
.vc-stage:hover .vc-card-right:not(.vc-card-active),
.vc-stage.force-hover .vc-card-right:not(.vc-card-active) {
    visibility: visible;
}

/* 堆叠卡：隐藏内容文字，只显示封面图和标题 */
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-scenes,
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-sub,
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-btn,
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-bar,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-scenes,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-sub,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-btn,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-bar {
    display: none;
}
/* 堆叠卡：缩小标题 */
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-title,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-title {
    font-size: 16px;
    margin: 0;
    text-align: center;
    width: 100%;
}
/* 堆叠卡：内容容器缩小 */
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-content,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-content {
    padding: 16px;
    justify-content: flex-end;
    align-items: center;
}
/* 堆叠卡：显示视频，隐藏封面 */
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-video,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-video {
    opacity: 1 !important;
    z-index: 2;
}
.vc-stage:hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-poster,
.vc-stage.force-hover .vc-card-right:not([data-vc-layer="0"]) .vc-card-poster {
    opacity: 0 !important;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
}

/* 卡背景 */
.vc-card-bg {
    position: absolute;
    inset: 0;
}
.vc-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(.22,.86,.35,1);
}
.vc-card:hover .vc-card-bg img { transform: scale(1.08); }
.vc-card-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.85) 100%);
}

/* 内容：固定在左半边 */
.vc-card-content {
    position: absolute;
    inset: 0;
    padding: 54px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.vc-card-title {
    margin: 0 0 8px 0;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}
.vc-card-sub {
    margin: 0 0 22px 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.5px;
}
.vc-card-bar {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #3cc89c, #21a67f);
    margin-bottom: 24px;
    border-radius: 2px;
}
.vc-card-scenes {
    max-width: 440px;
    margin: 0 0 28px 0;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255,255,255,0.7);
}
.vc-card-scenes span { color: rgba(255,255,255,0.82); }
.vc-card-btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 8px 22px rgba(33,166,127,0.35);
}
.vc-card-left .vc-card-btn {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
}
.vc-card-right .vc-card-btn {
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
}
.vc-card-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(33,166,127,0.55);
    color: #fff;
}

/* ===== 右侧卡：默认封面模式，hover视频模式 ===== */

/* 左侧卡 hover 收缩为方形（固定尺寸 530×520） */
.vc-stage:hover .vc-card-left,
.vc-stage.force-hover .vc-card-left,
.vc-card-left:hover {
    width: 530px;
    height: 520px;
    max-width: 530px;
    min-height: 520px;
    aspect-ratio: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(0,0,0,0.6);
}

/* 右侧视频卡：hover时收缩为555×314，居中显示 */
.vc-stage:hover .vc-card-right.vc-card-active,
.vc-stage.force-hover .vc-card-right.vc-card-active {
    right: auto !important;
    left: calc(50% + 82px) !important;
    top: 60px !important;
    width: 555px !important;
    height: 314px !important;
    min-width: 555px !important;
    min-height: 314px !important;
    max-width: 555px !important;
    max-height: 314px !important;
    aspect-ratio: auto;
    clip-path: none !important;
    transform: translateY(-4px) scale(1) !important;
    background: #000;
    box-shadow: 0 26px 60px rgba(0,0,0,0.6);
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0;
}

/* 视频容器内的视频元素：hover时仅激活卡显示视频 */
.vc-stage:hover .vc-card-right.vc-card-active .vc-card-video,
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
    opacity: 1 !important;
}
/* 堆叠卡片：显示视频，隐藏封面 */
.vc-stage:hover .vc-card-right:not(.vc-card-active) .vc-card-video,
.vc-stage.force-hover .vc-card-right:not(.vc-card-active) .vc-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
    opacity: 1 !important;
}
.vc-stage:hover .vc-card-right:not(.vc-card-active) .vc-card-poster,
.vc-stage.force-hover .vc-card-right:not(.vc-card-active) .vc-card-poster {
    opacity: 0 !important;
    z-index: 0;
}
.vc-stage:hover .vc-card-right.vc-card-active .vc-card-poster,
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-poster {
    opacity: 0 !important;
    z-index: 1;
}
/* 激活卡背景黑色（视频模式） */
.vc-stage:hover .vc-card-right.vc-card-active .vc-card-bg,
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-bg {
    background: #000;
}
/* 堆叠卡背景黑色（视频模式） */
.vc-stage:hover .vc-card-right:not(.vc-card-active) .vc-card-bg,
.vc-stage.force-hover .vc-card-right:not(.vc-card-active) .vc-card-bg {
    background: #000;
}
/* 堆叠卡：隐藏遮罩层 */
.vc-stage:hover .vc-card-right:not(.vc-card-active) .vc-card-mask,
.vc-stage.force-hover .vc-card-right:not(.vc-card-active) .vc-card-mask {
    opacity: 0;
}
.vc-stage:hover .vc-card-right.vc-card-active .vc-card-content,
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-content {
    opacity: 1;
    pointer-events: auto;
}
/* 视频模式：底部渐变遮罩仅激活卡 */
.vc-stage:hover .vc-card-right.vc-card-active .vc-card-mask,
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-mask {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.4) 100%) !important;
    opacity: 1;
}

/* ===== 右侧卡：默认封面模式 ===== */
.vc-card-right .vc-card-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.vc-card-right .vc-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}
/* 右侧卡：内容默认显示，右对齐 */
.vc-card-right .vc-card-content {
    position: absolute !important;
    inset: 0 !important;
    padding: 54px 44px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    z-index: 5 !important;
    opacity: 1 !important;
    transition: opacity 0.4s ease;
    text-align: right !important;
}
.vc-card-right .vc-card-content .vc-card-title {
    font-size: 30px !important;
    margin: 0 0 8px 0 !important;
    text-align: right !important;
}
.vc-card-right .vc-card-content .vc-card-sub {
    font-size: 15px !important;
    margin: 0 0 22px 0 !important;
    text-align: right !important;
}
.vc-card-right .vc-card-content .vc-card-bar {
    margin-bottom: 24px !important;
    margin-left: auto !important;
}
.vc-card-right .vc-card-content .vc-card-scenes {
    font-size: 13px !important;
    line-height: 1.8 !important;
    max-width: 440px !important;
    margin: 0 0 28px 0 !important;
    text-align: right !important;
}
.vc-card-right .vc-card-content .vc-card-btn {
    padding: 10px 28px !important;
    font-size: 13px !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}
/* 右侧卡内容始终可见 */
.vc-stage:hover .vc-card-right.vc-card-active .vc-card-content,
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-content {
    opacity: 1;
    pointer-events: auto;
}

/* 默认先隐藏右侧卡播放按钮（封面模式下不显示） */
.vc-card-right .vc-card-bg::before,
.vc-card-right .vc-card-bg::after {
    display: none !important;
}

/* 视频播放按钮 - 只在 force-hover 视频堆叠模式下显示右侧卡播放按钮 */
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-bg::before,
.vc-container.force-hover .vc-card-right.vc-card-active .vc-card-bg::before {
    display: flex !important;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    z-index: 21;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}
.vc-stage.force-hover .vc-card-right.vc-card-active .vc-card-bg::after,
.vc-container.force-hover .vc-card-right.vc-card-active .vc-card-bg::after {
    display: block !important;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    z-index: 22;
    pointer-events: none;
}
/* 视频播放1.5秒后隐藏播放按钮 */
.vc-stage.force-hover .vc-card-right.vc-card-active.is-playing .vc-card-bg::before,
.vc-container.force-hover .vc-card-right.vc-card-active.is-playing .vc-card-bg::before,
.vc-stage.force-hover .vc-card-right.vc-card-active.is-playing .vc-card-bg::after,
.vc-container.force-hover .vc-card-right.vc-card-active.is-playing .vc-card-bg::after {
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}
/* 视频播放模式下立即隐藏卡片内容覆盖层（标题/副标题/描述/按钮），避免文字显示在视频播放器上；标题由下方元信息面板展示 */
.vc-stage.force-hover .vc-card-right .vc-card-content,
.vc-container.force-hover .vc-card-right .vc-card-content {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}
.vc-stage.hover-right-cover .vc-card-left .vc-card-content,
.vc-container.hover-right-cover .vc-card-left .vc-card-content {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

/* ===== hover-right-cover 模式：hover右侧卡时 → 右侧收缩封面 + 左侧视频三层堆叠（镜像force-hover对称） ===== */

/* hover-right-cover 模式下左侧卡保留鼠标事件（支持点击切换视频），镜像force-hover右侧卡规则的对称 */
.vc-stage.hover-right-cover .vc-card-left,
.vc-container.hover-right-cover .vc-card-left {
    pointer-events: auto !important;
}

/* === 左侧：视频三层堆叠（镜像右侧force-hover对称结构）=== */

/* 1. 左侧 layer0（主卡）：555×314 居中，与右侧 layer0 calc(50%+82px) 对称 */
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"],
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"] {
    z-index: 3 !important;
    left: auto !important;
    right: calc(50% + 82px) !important;
    top: 60px !important;
    width: 555px !important;
    height: 314px !important;
    min-width: 555px !important;
    max-width: 555px !important;
    min-height: 314px !important;
    max-height: 314px !important;
    aspect-ratio: auto !important;
    clip-path: none !important;
    transform: translateY(-4px) scale(1) !important;
    background: #000 !important;
    box-shadow: 0 26px 60px rgba(0,0,0,0.6) !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"],
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"] {
    left: calc(50% - 640px) !important;
    right: auto !important;
}
/* 2. 左侧 layer1（主卡左旁 peek）：480×260 左侧露出边缘 */
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="1"],
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="1"] {
    z-index: 2 !important;
    left: auto !important;
    right: calc(50% + 237px) !important;
    top: 87px !important;
    width: 480px !important;
    height: 260px !important;
    min-width: 480px !important;
    max-width: 480px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 0.85 !important;
    visibility: visible !important;
    filter: brightness(0.7) !important;
}
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="1"],
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="1"] {
    left: calc(50% - 718px) !important;
    right: auto !important;
}
/* 3. 左侧 layer2（主卡右旁 peek）：480×260 右侧露出边缘 */
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="2"],
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="2"] {
    z-index: 1 !important;
    left: auto !important;
    right: calc(50% + 4px) !important;
    top: 87px !important;
    width: 480px !important;
    height: 260px !important;
    min-width: 480px !important;
    max-width: 480px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 0.75 !important;
    visibility: visible !important;
    filter: brightness(0.7) !important;
    pointer-events: auto !important;
}
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="2"],
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="2"] {
    left: calc(50% - 482px) !important;
    right: auto !important;
}

/* 4. hover-right-cover模式：非激活的左侧卡全部可见（peek显示），可点击切换（与右侧force-hover模式三层堆叠卡交互保持一致） */
.vc-stage.hover-right-cover .vc-card-left:not(.vc-card-active),
.vc-container.hover-right-cover .vc-card-left:not(.vc-card-active) {
    visibility: visible;
    pointer-events: auto !important;
}

/* 5. 左侧堆叠 peek 卡：隐藏非必要文字（与右侧堆叠 peek 对称） */
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-scenes,
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-sub,
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-btn,
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-bar,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-scenes,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-sub,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-btn,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-bar {
    display: none;
}
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-title,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-title {
    font-size: 16px;
    margin: 0;
    text-align: center;
    width: 100%;
}

/* 6. 左侧三层：显示视频隐藏封面 */
.vc-stage.hover-right-cover .vc-card-left .vc-card-video,
.vc-container.hover-right-cover .vc-card-left .vc-card-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 20;
    opacity: 1 !important;
}
.vc-stage.hover-right-cover .vc-card-left .vc-card-poster,
.vc-container.hover-right-cover .vc-card-left .vc-card-poster {
    opacity: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
}
.vc-stage.hover-right-cover .vc-card-left .vc-card-bg,
.vc-container.hover-right-cover .vc-card-left .vc-card-bg {
    background: #000;
}

/* 7. 左侧主卡（layer0）：hover-right-cover收缩状态下彻底隐藏内容文字 */
.vc-stage.hover-right-cover .vc-card-left.vc-card-active .vc-card-content,
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-content,
.vc-container.hover-right-cover .vc-card-left.vc-card-active .vc-card-content,
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-content {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
/* peek 卡（layer1/layer2）：彻底隐藏内容 */
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-content,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-content {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden !important;
}
/* 左侧遮罩：主卡变淡，peek 隐藏 */
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-mask,
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-mask {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.4) 100%) !important;
    opacity: 1;
}
.vc-stage.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-mask,
.vc-container.hover-right-cover .vc-card-left:not([data-vc-layer="0"]) .vc-card-mask {
    opacity: 0;
}

/* 8. 左侧卡：播放按钮仅在 hover-right-cover 主卡显示（与右侧 force-hover 对称） */
.vc-card-left .vc-card-bg::before,
.vc-card-left .vc-card-bg::after {
    display: none !important;
}
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-bg::before,
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-bg::before {
    display: flex !important;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    z-index: 21;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-bg::after,
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"] .vc-card-bg::after {
    display: block !important;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    z-index: 22;
    pointer-events: none;
}
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"].is-playing .vc-card-bg::before,
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"].is-playing .vc-card-bg::before,
.vc-stage.hover-right-cover .vc-card-left[data-vc-layer="0"].is-playing .vc-card-bg::after,
.vc-container.hover-right-cover .vc-card-left[data-vc-layer="0"].is-playing .vc-card-bg::after {
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}

/* === 右侧：收缩封面（镜像force-hover模式下左侧卡收缩效果）=== */

.vc-stage.hover-right-cover .vc-card-right.vc-card-active,
.vc-container.hover-right-cover .vc-card-right.vc-card-active,
.vc-stage.hover-right-cover .vc-card-right[data-vc-layer="0"],
.vc-container.hover-right-cover .vc-card-right[data-vc-layer="0"] {
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    width: 530px !important;
    height: 520px !important;
    max-width: 530px !important;
    min-height: 520px !important;
    aspect-ratio: auto !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    transform: translateY(-4px) !important;
    background: transparent !important;
    box-shadow: 0 26px 60px rgba(0,0,0,0.6) !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0;
    z-index: 3 !important;
}

/* 10. 右侧peek卡（layer1/layer2）：完全隐藏 */
.vc-stage.hover-right-cover .vc-card-right:not(.vc-card-active),
.vc-container.hover-right-cover .vc-card-right:not(.vc-card-active),
.vc-stage.hover-right-cover .vc-card-right[data-vc-layer="1"],
.vc-stage.hover-right-cover .vc-card-right[data-vc-layer="2"],
.vc-container.hover-right-cover .vc-card-right[data-vc-layer="1"],
.vc-container.hover-right-cover .vc-card-right[data-vc-layer="2"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}

/* 11. 右侧激活卡：显示封面隐藏视频 */
.vc-stage.hover-right-cover .vc-card-right.vc-card-active .vc-card-video,
.vc-container.hover-right-cover .vc-card-right.vc-card-active .vc-card-video {
    opacity: 0 !important;
    z-index: 1 !important;
}
.vc-stage.hover-right-cover .vc-card-right.vc-card-active .vc-card-poster,
.vc-container.hover-right-cover .vc-card-right.vc-card-active .vc-card-poster {
    opacity: 1 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
}

/* 12. 右侧激活卡：保持内容文字显示 */
.vc-stage.hover-right-cover .vc-card-right.vc-card-active .vc-card-content,
.vc-container.hover-right-cover .vc-card-right.vc-card-active .vc-card-content {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
}

/* 13. 右侧激活卡：品牌浮层已移除 */

/* 14. 右侧激活卡：保持原遮罩（封面渐变） */
.vc-stage.hover-right-cover .vc-card-right.vc-card-active .vc-card-bg,
.vc-container.hover-right-cover .vc-card-right.vc-card-active .vc-card-bg {
    background: transparent !important;
}
.vc-stage.hover-right-cover .vc-card-right.vc-card-active .vc-card-mask,
.vc-container.hover-right-cover .vc-card-right.vc-card-active .vc-card-mask {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.85) 100%) !important;
    opacity: 1 !important;
}

/* === force-hover 模式下左侧卡：收缩为方形封面（镜像 hover-right-cover 下右侧卡）=== */

.vc-stage.force-hover .vc-card-left.vc-card-active,
.vc-stage.force-hover .vc-card-left[data-vc-layer="0"],
.vc-container.force-hover .vc-card-left.vc-card-active,
.vc-container.force-hover .vc-card-left[data-vc-layer="0"] {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 530px !important;
    height: 520px !important;
    max-width: 530px !important;
    min-height: 520px !important;
    aspect-ratio: auto !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    transform: translateY(-4px) !important;
    background: transparent !important;
    box-shadow: 0 26px 60px rgba(0,0,0,0.6) !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0;
    z-index: 3 !important;
}

.vc-stage.force-hover .vc-card-left:not(.vc-card-active),
.vc-stage.force-hover .vc-card-left[data-vc-layer="1"],
.vc-stage.force-hover .vc-card-left[data-vc-layer="2"],
.vc-container.force-hover .vc-card-left:not(.vc-card-active),
.vc-container.force-hover .vc-card-left[data-vc-layer="1"],
.vc-container.force-hover .vc-card-left[data-vc-layer="2"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none;
}

.vc-stage.force-hover .vc-card-left.vc-card-active .vc-card-video,
.vc-container.force-hover .vc-card-left.vc-card-active .vc-card-video {
    opacity: 0 !important;
    z-index: 1 !important;
}
.vc-stage.force-hover .vc-card-left.vc-card-active .vc-card-poster,
.vc-container.force-hover .vc-card-left.vc-card-active .vc-card-poster {
    opacity: 1 !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
}

.vc-stage.force-hover .vc-card-left.vc-card-active .vc-card-content,
.vc-container.force-hover .vc-card-left.vc-card-active .vc-card-content {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
}
/* 品牌浮层已移除 */
.vc-stage.force-hover .vc-card-left.vc-card-active .vc-card-bg,
.vc-container.force-hover .vc-card-left.vc-card-active .vc-card-bg {
    background: transparent !important;
}
.vc-stage.force-hover .vc-card-left.vc-card-active .vc-card-mask,
.vc-container.force-hover .vc-card-left.vc-card-active .vc-card-mask {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.85) 100%) !important;
    opacity: 1 !important;
}

/* 视频元信息面板 - 在舞台内底部150px区域，与右侧视频卡对齐 */
.vc-video-meta-panel {
    position: absolute;
    bottom: 0;
    width: 555px;
    height: 150px;
    padding: 16px 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
    overflow: hidden;
}
/* 右侧元信息面板：与右侧视频卡对齐（right:100px） */
.vc-video-meta-panel.vc-video-meta-panel-right {
    right: 100px;
}
/* 左侧元信息面板：与左侧视频卡水平居中对齐，在左卡片正下方，左右两个面板完全对称 */
.vc-video-meta-panel.vc-video-meta-panel-left {
    left: 100px;
    right: auto;
}
.vc-container:hover .vc-video-meta-panel,
.vc-container.force-hover .vc-video-meta-panel {
    opacity: 1;
}
/* —— 商业视觉中心：鼠标悬停在哪一侧就隐藏该侧自己的独立元信息面板
   1) force-hover：鼠标在左侧（左侧展开、右侧收缩）→ 隐藏左侧自己的元信息面板 vc-video-meta-panel-left
   2) hover-right-cover：鼠标在右侧（右侧展开、左侧收缩）→ 隐藏右侧自己的元信息面板 vc-video-meta-panel-right */
.vc-stage.force-hover .vc-video-meta-panel.vc-video-meta-panel-left,
.vc-container.force-hover .vc-video-meta-panel.vc-video-meta-panel-left,
.vc-stage.hover-right-cover .vc-video-meta-panel.vc-video-meta-panel-right,
.vc-container.hover-right-cover .vc-video-meta-panel.vc-video-meta-panel-right {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* 响应式小屏下：左右两个面板堆叠排列，宽度100%，position相对定位正常流展示 */
@media (max-width: 1100px) {
    .vc-stage .vc-video-meta-panel,
    .vc-stage .vc-video-meta-panel.vc-video-meta-panel-left,
    .vc-stage .vc-video-meta-panel.vc-video-meta-panel-right {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        padding: 22px 20px 28px;
        margin-top: 18px;
    }
}

.vc-video-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.4;
}
.vc-video-desc {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
}

.vc-stage {
    padding: 0;
    overflow: visible;
}
.vc-stage:hover,
.vc-stage.force-hover {
    padding: 0;
}

/* 响应式 */
@media (max-width: 1560px) {
    .vc-inner { max-width: 100%; padding: 0 20px; }
    .vc-stage { width: 100%; max-width: 1500px; }
    .vc-stage > .vc-card-left {
        width: calc((100% - 355px) * 0.6 + 530px) !important;
        max-width: 746px;
    }
    .vc-stage > .vc-card-right,
    .vc-card-right.vc-card-active,
    .vc-card-right:not(.vc-card-active) {
        right: 100px;
        width: 555px !important;
        height: 314px !important;
    }
    .vc-stage:hover .vc-card-right,
    .vc-stage.force-hover .vc-card-right {
        right: auto !important;
    }
    .vc-stage:hover .vc-card-right[data-vc-layer="1"],
    .vc-stage:hover .vc-card-right[data-vc-layer="2"],
    .vc-stage.force-hover .vc-card-right[data-vc-layer="1"],
    .vc-stage.force-hover .vc-card-right[data-vc-layer="2"] {
        width: 480px !important;
        height: 260px !important;
        min-width: 480px !important;
        max-width: 480px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }
    .vc-video-meta-panel {
        right: 100px;
        width: 555px;
    }
}
@media (max-width: 1100px) {
    .vc-stage {
        height: auto;
    }
    .vc-stage > .vc-card-left {
        position: relative !important;
        left: auto;
        top: auto;
        width: 100% !important;
        height: 480px;
    }
    .vc-stage > .vc-card-right,
    .vc-card-right.vc-card-active,
    .vc-card-right:not(.vc-card-active) {
        position: relative !important;
        right: auto;
        top: auto;
        width: 100% !important;
        min-height: 420px;
        height: auto !important;
    }
    .vc-stage > .vc-card-right[data-vc-layer="1"],
    .vc-stage > .vc-card-right[data-vc-layer="2"] {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }
    .vc-card-right:not([data-vc-layer="0"]) .vc-card-content { opacity: 1; pointer-events: auto; }
    .vc-card-right:not([data-vc-layer="0"]) .vc-card-title { font-size: 28px; }
    .vc-card-right:not([data-vc-layer="0"]) .vc-card-scenes,
    .vc-card-right:not([data-vc-layer="0"]) .vc-card-sub,
    .vc-card-right:not([data-vc-layer="0"]) .vc-card-btn { display: block; }
    .vc-container:hover .vc-video-meta-panel,
    .vc-container.force-hover .vc-video-meta-panel {
        margin-left: 0;
        width: 100%;
        height: auto;
    }
}
@media (max-width: 680px) {
    .vc-title { font-size: 20px; margin-bottom: 28px; }
    .vc-stage > .vc-card-left { height: 420px; }
    .vc-card-content { padding: 34px 26px; }
    .vc-card-title { font-size: 22px; }
    .vc-card-sub { font-size: 14px; }
}

/* ==========================================================================
   专业服务双标签卡片区块（平面摄影/短视频·直播）
   外层深灰大圆角容器 + 4列 1大+3小 hover展开折叠
   ========================================================================== */
.exp-section {
    position: relative;
    width: 100%;
    /* 整块区域填充深色渐变背景，消除标记的空白区域 */
    background:
        radial-gradient(ellipse at 15% 0%, rgba(60,200,156,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 0%, rgba(90,140,255,0.09) 0%, transparent 60%),
        linear-gradient(180deg, #1c2130 0%, #181c28 100%);
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
/* 外层大圆角容器：背景透明（由父级.exp-section提供深色底），保留圆角和阴影 */
.exp-panel {
    max-width: 1540px;
    margin: 0 auto;
    padding: 56px 48px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
/* 底部「查看更多」区域同样采用深色背景延伸 */
.exp-more-wrap {
    margin: 42px auto 0;
    padding: 0 0 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}
.exp-inner {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 48px;
    justify-content: space-between;
}

/* ---- 左侧双标签菜单 ---- */
.exp-tabs {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 52px;
    padding-top: 8px;
}
.exp-tab {
    position: relative;
    padding-left: 18px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0.6;
}
.exp-tab:hover {
    opacity: 0.92;
}
.exp-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: transparent;
    border-radius: 3px;
    transition: background 0.3s ease;
}
.exp-tab.exp-tab-active {
    opacity: 1;
}
.exp-tab.exp-tab-active::before {
    background: #3cc89c;
}
.exp-tab-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.exp-tab-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.58);
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* ---- 右侧卡片组（flex横向布局，单卡固定精确宽高） ---- */
.exp-cards {
    flex: 1 1 auto;
    position: relative;
    min-height: 330px;
    /* 背景由父级.exp-section提供，避免色差 */
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}
.exp-card-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 0;
    background: transparent;
    width: 100%;
}

/* 单卡通用：精确折叠尺寸 210×330px，强制固定min/max-width防抖动 */
.exp-card {
    position: relative;
    flex: 0 0 auto;
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    height: 330px;
    min-height: 330px;
    max-height: 330px;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(60,90,160,0.14) 0%, transparent 65%),
        linear-gradient(180deg, rgba(48,54,72,0.6) 0%, rgba(32,36,50,0.7) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 8px 22px rgba(0,0,0,0.26);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        width 0.45s cubic-bezier(.22,.86,.35,1),
        min-width 0.45s cubic-bezier(.22,.86,.35,1),
        max-width 0.45s cubic-bezier(.22,.86,.35,1),
        transform 0.45s cubic-bezier(.22,.86,.35,1),
        opacity 0.3s ease,
        box-shadow 0.35s ease;
    cursor: pointer;
    will-change: width, min-width, max-width, transform;
}
/* 展开激活态：精确尺寸 480×330px，同时设min/max防grid/fr反向托住 */
.exp-card.exp-card-active {
    width: 480px;
    min-width: 480px;
    max-width: 480px;
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 18px 44px rgba(0,0,0,0.38);
}
/* 清除旧的遮罩/渐变层（旧结构不再需要） */
.exp-card::after,
.exp-card .exp-card-media,
.exp-card .exp-card-icon,
.exp-card .exp-card-name {
    display: none !important;
}

/* ==========================================================
   平面摄影 - 主卡（芒果TV）精确适配展开 480×330
   布局：左侧logo+品牌名 + 右侧手机预览（上方手机图+下方绿色标签）
   —— 收缩态（非 active，210px 窄宽）：隐藏右侧预览，仅显示左brand并居中（视觉上同小卡fold的竖排居中简化结构，不显示大图预览）
   ========================================================== */
.exp-card-photo-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 18px 20px;
    box-sizing: border-box;
    overflow: hidden !important;
}
/* —— 主卡收缩态（非 active）：隐藏预览大图，仅保留品牌区竖排居中，无图片显示 —— */
.exp-card.exp-card-photo-main:not(.exp-card-active) {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    padding: 22px 14px !important;
}
.exp-card.exp-card-photo-main:not(.exp-card-active) > .exp-photo-preview,
.exp-card.exp-card-photo-main:not(.exp-card-active) > .exp-small-expand,
.exp-card.exp-card-photo-main:not(.exp-card-active) .exp-photo-preview,
.exp-card.exp-card-photo-main:not(.exp-card-active) .exp-photo-phone,
.exp-card.exp-card-photo-main:not(.exp-card-active) .exp-photo-cover {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.exp-card.exp-card-photo-main:not(.exp-card-active) > .exp-photo-brand {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 10px !important;
}
/* 左侧：芒果TV logo + 名字 竖排（适配480宽，压缩尺寸） */
.exp-photo-brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 100px;
}
.exp-photo-logo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
.exp-photo-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
/* 右侧：手机预览 + 下方标签 */
.exp-photo-preview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    height: 100%;
    max-width: 270px;
}
.exp-photo-phone {
    flex: 1 1 auto;
    width: 172px;
    max-height: 100%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #0f1218;
    box-shadow: 0 20px 46px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(255,255,255,0.12);
    padding: 9px 9px 11px;
    box-sizing: border-box;
}
.exp-photo-phone::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.25);
    z-index: 2;
}
.exp-photo-phone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}
.exp-photo-preview-wide {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    display: block;
}
.exp-photo-cover {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #0f1218;
}
.exp-photo-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 短视频/直播主卡：左下 两行粉丝/播放量文字（沿用旧类名+改位置） */
.exp-photo-preview .exp-card-media-text {
    position: absolute;
    left: 18px;
    bottom: 14px;
    z-index: 3;
    opacity: 1;
    transform: none;
}

/* 标签（手机下方胶囊，压缩尺寸适配480宽） */
.exp-photo-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 6px 14px;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.2px;
    font-weight: 500;
    background: rgba(32,36,48,0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.exp-photo-tag-green {
    background: rgba(60,200,156,0.94);
    box-shadow: 0 8px 18px rgba(60,200,156,0.28);
}
.exp-photo-tag-blue {
    background: rgba(0,150,223,0.9);
    box-shadow: 0 8px 18px rgba(0,150,223,0.25);
}

/* ==========================================================
   平面摄影 - 三张小卡（作业帮 / 美的 / 同程）双结构体系：
   折叠 210×330：exp-small-fold（简化 sq-logo/name/tag 垂直居中）
   展开 480×330：exp-small-expand（与芒果TV主卡一致水平布局：brand + preview）
   ========================================================== */
/* 父容器：不作为布局载体，防止两个子结构同时显示导致溢出 */
.exp-card-photo-small {
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}
/* ---- [折叠态] 简化小结构：顶logo+名字+标签 垂直居中 ---- */
.exp-card-photo-small > .exp-small-fold {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 14px;
    box-sizing: border-box;
}
/* ---- [展开态] 完整水平结构：左brand + 右preview（与主卡.exp-card-photo-main完全一致） ---- */
.exp-card-photo-small > .exp-small-expand {
    display: none;
}
.exp-card-photo-small.exp-card-active {
    padding: 0 !important;
}
.exp-card-photo-small.exp-card-active > .exp-small-fold {
    display: none !important;
}
.exp-card-photo-small.exp-card-active > .exp-small-expand {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 18px 20px;
    box-sizing: border-box;
}
/* sq-logo / sq-name / sq-tag 仅在 .exp-small-fold 内生效（避免被展开结构干扰） */
.exp-small-fold .exp-photo-sq-logo {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.4px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}
.exp-small-fold .exp-photo-sq-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.exp-small-fold .exp-photo-sq-tag {
    margin-top: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 12px;
    border-radius: 18px;
    color: #fff;
    font-size: 11.5px;
    letter-spacing: 0.2px;
    font-weight: 500;
    background: rgba(32,36,48,0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ==========================================================
   旧结构（exp-card-media/badges）清理：防止影响
   ========================================================== */
.exp-card .exp-card-badge { display: none !important; }

/* 底部：查看更多按钮（青→蓝 渐变胶囊） - 样式继承自上方.exp-more-wrap */
.exp-more-btn {
    display: inline-block;
    min-width: 260px;
    padding: 14px 46px;
    text-align: center;
    background: linear-gradient(90deg, #2fd9c3 0%, #26b6e4 100%);
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 30px;
    text-decoration: none !important;
    box-shadow: 0 10px 26px rgba(38,182,228,0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.exp-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(38,182,228,0.4);
}

/* 响应式（flex布局 + 固定width/min-width/max-width，必须同步覆盖，否则会被桌面级固定值托住） */
@media (max-width: 1200px) {
    .exp-panel { padding: 44px 32px; }
    .exp-inner {
        flex-direction: column;
        gap: 28px;
    }
    .exp-tabs {
        flex: none;
        flex-direction: row;
        gap: 36px;
        padding-top: 0;
    }
    .exp-tab { padding-left: 14px; }
    .exp-tab-title { font-size: 20px; }
    /* 1200以下：缩减卡片尺寸，保证4卡一行放下（主卡360×330，折叠156×330，gap16 → 总宽996） */
    .exp-card-group {
        flex-wrap: nowrap;
        gap: 16px;
    }
    .exp-card {
        width: 156px;
        min-width: 156px;
        max-width: 156px;
        height: 330px;
        min-height: 330px;
        max-height: 330px;
    }
    .exp-card.exp-card-active {
        width: 360px;
        min-width: 360px;
        max-width: 360px;
    }
    /* 主卡 & 小卡激活态：统一压缩内部元素 */
    .exp-card-photo-main,
    .exp-card-photo-small.exp-card-active > .exp-small-expand {
        padding: 16px 18px;
        gap: 12px;
    }
    .exp-photo-logo { width: 56px; height: 56px; font-size: 20px; }
    .exp-photo-phone { width: 140px; }
    .exp-card-photo-small > .exp-small-fold { padding: 18px 12px; gap: 10px; }
    .exp-small-fold .exp-photo-sq-logo { width: 60px; height: 60px; font-size: 18px; }
}
@media (max-width: 768px) {
    .exp-panel { padding: 32px 20px; }
    /* 768以下：2列换行排布，激活态横占满，折叠态半宽 */
    .exp-card-group {
        flex-wrap: wrap;
        gap: 14px;
    }
    .exp-card {
        width: calc(50% - 7px);
        min-width: calc(50% - 7px);
        max-width: calc(50% - 7px);
        height: 300px;
        min-height: 300px;
        max-height: 300px;
    }
    .exp-card.exp-card-active {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    /* 激活态：主卡 + 小卡激活展开结构统一布局 */
    .exp-card-photo-main,
    .exp-card-photo-small.exp-card-active > .exp-small-expand {
        flex-direction: row;
        gap: 18px;
        padding: 22px 18px;
    }
    .exp-photo-brand { flex-direction: column; gap: 10px; min-width: 90px; }
    .exp-photo-phone { width: 180px; max-height: 240px; }
    .exp-card-media-title { font-size: 17px; }
    .exp-card-media-stats { font-size: 12px; }
    .exp-tab-title { font-size: 19px; }
    .exp-more-btn { min-width: 220px; padding: 12px 32px; }
    /* 折叠态简化结构压缩 */
    .exp-card-photo-small > .exp-small-fold { padding: 20px 14px; gap: 12px; }
}
@media (max-width: 480px) {
    .exp-panel { padding: 24px 16px; }
    .exp-card-group {
        flex-wrap: wrap;
        gap: 12px;
    }
    .exp-card {
        width: calc(50% - 6px);
        min-width: calc(50% - 6px);
        max-width: calc(50% - 6px);
        height: 240px;
        min-height: 240px;
        max-height: 240px;
    }
    .exp-card.exp-card-active {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 280px;
        min-height: 280px;
        max-height: 280px;
    }
    .exp-tabs { gap: 16px; flex-direction: column; }
    /* 480以下：折叠态简化结构 + 激活态展开结构双压缩 */
    .exp-card-photo-small > .exp-small-fold { padding: 16px 10px; gap: 10px; }
    .exp-small-fold .exp-photo-sq-logo { width: 56px; height: 56px; font-size: 16px; }
    .exp-card-photo-small.exp-card-active > .exp-small-expand {
        padding: 16px 14px;
        gap: 12px;
    }
    .exp-card-photo-small.exp-card-active .exp-photo-logo { width: 50px; height: 50px; font-size: 18px; }
    .exp-card-photo-small.exp-card-active .exp-photo-phone { width: 130px; }
}

/* ==========================================================
   右侧悬浮工具栏（参考699pic.com/media样式）
   ========================================================== */
.video-float-bar {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 6px 10px;
    background: rgba(25, 30, 45, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* 赚钱按钮容器（hover时左侧弹出横幅） */
.vfb-earn-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}
.vfb-earn-wrap .vfb-item-earn {
}
/* 弹出横幅：默认隐藏，通过JS控制显示 */
.vfb-earn-popup {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 350px;
    height: 100px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(120, 60, 220, 0.32);
    border: 1.5px solid rgba(255, 220, 100, 0.7);
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}
/* 透明桥接层：连接按钮和popup，防止hover丢失 */
.vfb-earn-popup::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: transparent;
    z-index: -1;
}
/* 小三角指示器（指向赚钱按钮） */
.vfb-earn-popup::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #7B35C2;
    border-right: 1.5px solid rgba(255, 220, 100, 0.7);
    border-bottom: 1.5px solid rgba(255, 220, 100, 0.7);
}
/* JS控制显示：通过vfb-popup-visible类触发 */
.vfb-earn-popup.vfb-popup-visible,
.vfb-checkin-popup.vfb-popup-visible {
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
    pointer-events: auto !important;
}
.vfb-earn-popup.vfb-popup-visible::before,
.vfb-checkin-popup.vfb-popup-visible::before {
    /* 桥接层在弹窗可见时也保持可见 */
}
/* 点击层：覆盖整个popup，使其可点击跳转 */
.vfb-earn-click {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    text-decoration: none !important;
    cursor: pointer;
    pointer-events: auto;
}
.vfb-earn-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255, 215, 100, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 80%, rgba(255, 130, 180, 0.25) 0%, transparent 55%),
        linear-gradient(135deg, #6B3DB8 0%, #8B48D9 35%, #A35BE0 65%, #7B35C2 100%);
    z-index: 0;
}
.vfb-earn-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, transparent 48%, rgba(255, 215, 100, 0.12) 48%, rgba(255, 215, 100, 0.12) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.06) 52%, transparent 52%);
    background-size: 16px 16px, 22px 22px;
    background-position: 0 0, 8px 11px;
}
.vfb-earn-illu-left,
.vfb-earn-illu-right {
    position: absolute;
    bottom: -2px;
    width: 52px;
    height: 80px;
    z-index: 1;
    pointer-events: none;
}
.vfb-earn-illu-left {
    left: 6px;
}
.vfb-earn-illu-right {
    right: 6px;
    transform: scaleX(-1);
}
.vfb-earn-illu-left svg,
.vfb-earn-illu-right svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.vfb-earn-content {
    position: relative;
    z-index: 2;
    padding: 14px 60px 12px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.vfb-earn-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 1px;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.3),
        0 0 10px rgba(255, 215, 100, 0.25);
    white-space: nowrap;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF6D5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vfb-earn-sub {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.vfb-earn-confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.vfb-earn-confetti > span {
    position: absolute;
    top: -6px;
    left: var(--l);
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    transform: rotate(var(--r));
    animation: vfbConfettiFall 2.2s ease-in-out infinite;
    animation-delay: var(--d);
    opacity: 0.85;
}
@keyframes vfbConfettiFall {
    0% { transform: translateY(-6px) rotate(var(--r)) scale(0.8); opacity: 0; }
    15% { opacity: 0.9; }
    85% { opacity: 0.9; }
    100% { transform: translateY(100px) rotate(calc(var(--r) + 45deg)) scale(0.7); opacity: 0; }
}
.vfb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 56px;
    gap: 3px;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 24px;
    cursor: pointer;
    transition:
        all 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.2s ease;
    position: relative;
}
.vfb-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.vfb-item.vfb-active {
    color: #fff;
}
.vfb-item.vfb-active .vfb-label {
}
.vfb-item.vfb-item-top {
    margin-top: 2px;
}
.vfb-item.vfb-item-top:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
.vfb-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vfb-icon svg {
    width: 22px;
    height: 22px;
}
.vfb-label {
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
    white-space: nowrap;
}
.vfb-divider {
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 4px 0;
}

/* ==========================================================
   签到按钮 - hover弹窗（三个圆形按钮横向排列）
   ========================================================== */
.vfb-checkin-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}
.vfb-checkin-wrap .vfb-item-checkin {
}
.vfb-checkin-popup {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 380px;
    height: auto;
    min-height: 100px;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(245, 87, 44, 0.28);
    border: 1.5px solid rgba(255, 160, 80, 0.6);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}
.vfb-checkin-popup::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #2a1a3e, #1a1028);
    border-right: 1.5px solid rgba(255, 160, 80, 0.6);
    border-bottom: 1.5px solid rgba(255, 160, 80, 0.6);
}
.vfb-checkin-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 120, 50, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 20%, rgba(255, 200, 80, 0.2) 0%, transparent 55%),
        linear-gradient(135deg, #2a1a3e 0%, #3d2556 40%, #2a1a3e 100%);
}
.vfb-checkin-content {
    position: relative;
    z-index: 2;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: inherit;
}
.vfb-checkin-buttons {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}
.vfb-checkin-btn {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.2s ease;
    width: 80px;
}
.vfb-checkin-btn:hover {
    transform: translateY(-3px);
}
.vfb-checkin-btn:hover .vfb-btn-icon {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.vfb-btn-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: box-shadow 0.2s ease;
    flex-shrink: 0;
}
.vfb-btn-daily .vfb-btn-icon {
    background: linear-gradient(135deg, #5b8dff 0%, #3a6fd8 100%);
    box-shadow: 0 4px 12px rgba(91, 141, 255, 0.4);
}
.vfb-btn-task .vfb-btn-icon {
    background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}
.vfb-btn-mall .vfb-btn-icon {
    background: linear-gradient(135deg, #ff6b9d 0%, #e6497a 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}
.vfb-btn-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    stroke-width: 1.8;
}
.vfb-btn-text {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.vfb-btn-tag {
    position: absolute;
    top: -4px;
    right: 0;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    line-height: 1;
    white-space: nowrap;
    z-index: 5;
}
.vfb-tag-limit {
    background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
}
.vfb-tag-subsidy {
    background: linear-gradient(135deg, #ff6348 0%, #ff4757 100%);
    box-shadow: 0 2px 6px rgba(255, 99, 72, 0.4);
}
.vfb-checkin-click {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    text-decoration: none !important;
    cursor: pointer;
    pointer-events: auto;
}

/* ===== 案例弹窗样式 ===== */
.vfb-case-wrap {
    position: relative;
}
.vfb-case-popup {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 340px;
    padding: 0;
    background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}
.vfb-case-popup::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: transparent;
    z-index: -1;
}
.vfb-case-popup::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #0f1419;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vfb-case-popup-inner {
    position: relative;
    padding: 18px 18px 16px;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 55%);
}
.vfb-case-header {
    text-align: center;
    margin-bottom: 14px;
}
.vfb-case-title {
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
    letter-spacing: 0.2px;
}
.vfb-case-qrs {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-start;
}
.vfb-case-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 140px;
}
.vfb-case-qr-box {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}
.vfb-case-qr-box img,
.vfb-case-qr-box .vfb-qr-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.vfb-case-qr-box .vfb-qr-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vfb-case-qr-box .vfb-qr-placeholder svg {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}
.vfb-case-qr-name {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
}

/* ===== 联系客服弹窗样式 ===== */
.vfb-service-wrap {
    position: relative;
}
.vfb-service-popup {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 300px;
    background: #fff;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}
.vfb-service-popup::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: transparent;
    z-index: -1;
}
.vfb-service-popup::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vfb-service-popup-inner {
    position: relative;
    padding: 16px 18px;
}
.vfb-service-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.vfb-service-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
}
.vfb-service-title svg {
    color: #4a90e2;
}
.vfb-service-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vfb-service-row {
    display: flex;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.6;
}
.vfb-service-label {
    color: #888;
    flex-shrink: 0;
    white-space: nowrap;
}
.vfb-service-value {
    color: #333;
    font-weight: 500;
    word-break: break-all;
}
.vfb-service-link {
    color: #4a90e2;
    cursor: pointer;
}
.vfb-service-link:hover {
    text-decoration: underline;
}
.vfb-service-wechat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #07c160;
    font-weight: 600;
}
.vfb-wechat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #07c160;
    color: #fff;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
}

/* ===== 定制服务弹窗样式 ===== */
.vfb-custom-wrap {
    position: relative;
}
.vfb-custom-popup {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 260px;
    background: #1a1a1a;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
}
.vfb-custom-popup::before {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 12px;
    height: 100%;
    background: transparent;
    z-index: -1;
}
.vfb-custom-popup::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.vfb-custom-popup-inner {
    position: relative;
    padding: 14px 16px;
}
.vfb-custom-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.vfb-custom-title {
    font-size: 14px;
    font-weight: 600;
    color: #f59e0b;
}
.vfb-custom-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vfb-custom-row {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.5;
    color: #ccc;
}
.vfb-custom-indent {
    padding-left: 18px;
}
.vfb-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    flex-shrink: 0;
}
.vfb-custom-icon svg {
    width: 12px;
    height: 12px;
}
.vfb-custom-name {
    color: #e5e5e5;
    font-weight: 500;
}
.vfb-custom-label {
    color: #888;
}
.vfb-custom-value {
    color: #e5e5e5;
    font-weight: 500;
}
.vfb-custom-ip {
    font-family: 'Courier New', Courier, monospace;
    color: #f59e0b;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.vfb-custom-link {
    color: #4ade80;
    cursor: pointer;
    font-weight: 500;
}
.vfb-custom-link:hover {
    text-decoration: underline;
}
.vfb-custom-sep {
    color: #555;
    margin: 0 4px;
}
.vfb-custom-tip {
    color: #f59e0b;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.4;
}
.vfb-custom-highlight {
    color: #4a90e2;
    font-weight: 600;
}
.vfb-custom-action {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
    text-align: center;
}
.vfb-custom-btn {
    display: inline-block;
    padding: 7px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.vfb-custom-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 响应式：悬浮工具栏 */
@media (max-width: 768px) {
    .video-float-bar {
        right: 10px;
        padding: 6px 4px;
        gap: 2px;
    }
    .vfb-item {
        width: 40px;
        height: 48px;
        border-radius: 20px;
    }
    .vfb-icon {
        width: 22px;
        height: 22px;
    }
    .vfb-icon svg {
        width: 18px;
        height: 18px;
    }
    .vfb-label {
        font-size: 10px;
    }
}
@media (max-width: 480px) {
    .video-float-bar {
        right: 6px;
    }
    .vfb-label {
        display: none;
    }
    .vfb-item {
        width: 42px;
        height: 42px;
    }
    .vfb-divider {
        width: 20px;
    }
}

/* ==========================================================
   签到大弹窗样式 - 彩色活泼风格
   ========================================================== */
.checkin-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.checkin-modal.show {
    display: flex !important;
}
.checkin-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}
.checkin-modal-box {
    position: relative;
    width: 700px;
    max-width: 95%;
    max-height: 92vh;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(255, 107, 157, 0.25), 0 10px 40px rgba(192, 108, 255, 0.2), 0 0 0 4px rgba(255, 255, 255, 0.8);
    animation: checkinModalIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes checkinModalIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.checkin-bg-decoration {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.checkin-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
}
.checkin-circle-1 {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #FF6B9D, #FFB74D);
    top: -60px;
    right: -40px;
    animation: float 6s ease-in-out infinite;
}
.checkin-circle-2 {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #4FC3F7, #C06CFF);
    bottom: 100px;
    left: -50px;
    animation: float 7s ease-in-out infinite reverse;
}
.checkin-circle-3 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #FFD700, #FF8A65);
    top: 50%;
    right: 15%;
    animation: float 8s ease-in-out infinite;
    opacity: 0.35;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -15px); }
}
.checkin-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B9D, #C06CFF);
    color: #fff;
    font-size: 22px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}
.checkin-modal-close:hover {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.6);
}
.checkin-modal-body {
    position: relative;
    z-index: 1;
    padding: 0;
    overflow-y: auto;
    max-height: 92vh;
}

/* 顶部庆祝区 - 彩色渐变头部 */
.checkin-top {
    background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 30%, #FFB74D 60%, #FFD700 100%);
    padding: 28px 30px 32px;
    position: relative;
    overflow: hidden;
}
.checkin-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 15% 50%, rgba(255,255,255,0.3) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(255,255,255,0.2) 0%, transparent 40%);
    pointer-events: none;
}
.checkin-top::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 20px;
    background: #fff;
    border-radius: 20px 20px 0 0;
}
.checkin-congrats {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}
.checkin-congrats-icon {
    width: 52px;
    height: 52px;
    animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.checkin-congrats-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
}
.checkin-congrats-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.checkin-congrats-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}
.checkin-congrats-desc span {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.checkin-score {
    text-align: center;
    position: relative;
    z-index: 2;
}
.checkin-score-num {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.checkin-score-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    font-weight: 500;
}
.checkin-total-score {
    text-align: right;
    position: relative;
    z-index: 2;
}
.checkin-total-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}
.checkin-total-value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 签到进度区 - 白色背景 */
.checkin-progress {
    padding: 0 30px;
    margin-top: -10px;
    margin-bottom: 20px;
    position: relative;
    z-index: 3;
}
.checkin-progress-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkin-progress-title::before {
    content: "";
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #FF6B9D, #FFB74D);
    border-radius: 2px;
}
.checkin-days {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9ff 0%, #fff5f7 100%);
    border-radius: 20px;
    border: 1px solid #ffe8ee;
}
.checkin-day-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
}
.checkin-day-num {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
}
.checkin-day-done .checkin-day-num {
    color: #FF6B9D;
    font-weight: 700;
}
.checkin-day-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s, box-shadow 0.3s;
}
.checkin-day-icon svg {
    width: 40px;
    height: 40px;
}
.checkin-day-item:hover .checkin-day-icon {
    transform: scale(1.12);
}
.checkin-day-reward {
    font-size: 10px;
    font-weight: 600;
    color: #bbb;
    white-space: nowrap;
}
.checkin-day-done .checkin-day-reward {
    color: #FF6B9D;
}
.checkin-day-special .checkin-day-reward {
    color: #FFB74D;
}
.checkin-day-tag {
    position: absolute;
    top: -8px;
    right: -6px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF6B9D 0%, #C06CFF 100%);
    padding: 2px 6px;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
}
.checkin-day-tag-special {
    background: linear-gradient(135deg, #FFD700 0%, #FF6B9D 100%);
    padding: 3px 7px;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* 底部任务和兑换区 - 白色背景 */
.checkin-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 30px 30px;
}
.checkin-section {
    background: #fafbff;
    border-radius: 18px;
    padding: 18px;
    border: 1px solid #eef0f7;
}
.checkin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.checkin-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    position: relative;
    padding-left: 12px;
}
.checkin-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #FF6B9D, #C06CFF);
    border-radius: 2px;
}
.checkin-section-more {
    font-size: 12px;
    color: #bbb;
    text-decoration: none;
    transition: color 0.2s;
}
.checkin-section-more:hover {
    color: #FF6B9D;
}

/* 任务列表 */
.checkin-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkin-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f5;
    transition: all 0.3s;
}
.checkin-task-item:hover {
    border-color: #FFD0DE;
    transform: translateX(3px);
    box-shadow: 0 4px 16px rgba(255, 107, 157, 0.08);
}
.checkin-task-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.12), rgba(192, 108, 255, 0.12));
    color: #FF6B9D;
    flex-shrink: 0;
}
.checkin-task-icon svg {
    width: 20px;
    height: 20px;
}
.checkin-task-info {
    flex: 1;
    min-width: 0;
}
.checkin-task-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}
.checkin-task-reward {
    font-size: 12px;
    color: #FFB74D;
    font-weight: 600;
}
.checkin-task-done .checkin-task-name {
    color: #bbb;
}
.checkin-task-done .checkin-task-reward {
    color: #ddd;
}
.checkin-task-status {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4FC3F7, #81D4FA);
    color: #fff;
    white-space: nowrap;
}
.checkin-task-btn {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF6B9D 0%, #C06CFF 100%);
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    box-shadow: 0 3px 10px rgba(255, 107, 157, 0.3);
}
.checkin-task-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 16px rgba(255, 107, 157, 0.45);
}

/* 兑换列表 */
.checkin-exchange-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkin-exchange-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f5;
    transition: all 0.3s;
}
.checkin-exchange-item:hover {
    border-color: #D4E4FF;
    transform: translateX(-3px);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.08);
}
.checkin-exchange-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.12), rgba(192, 108, 255, 0.12));
    color: #C06CFF;
    flex-shrink: 0;
}
.checkin-exchange-icon svg {
    width: 20px;
    height: 20px;
}
.checkin-exchange-info {
    flex: 1;
    min-width: 0;
}
.checkin-exchange-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}
.checkin-exchange-price {
    font-size: 12px;
    color: #FFB74D;
    font-weight: 600;
}
.checkin-exchange-btn {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #C06CFF 0%, #4FC3F7 100%);
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    box-shadow: 0 3px 10px rgba(192, 108, 255, 0.3);
}
.checkin-exchange-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 16px rgba(192, 108, 255, 0.45);
}

/* 响应式 */
@media (max-width: 768px) {
    .checkin-modal-box {
        width: 95%;
        max-height: 95vh;
        border-radius: 20px;
    }
    .checkin-top {
        padding: 22px 20px 28px;
    }
    .checkin-congrats-title {
        font-size: 18px;
    }
    .checkin-score-num {
        font-size: 30px;
    }
    .checkin-progress {
        padding: 0 20px;
    }
    .checkin-days {
        padding: 12px;
        gap: 6px;
    }
    .checkin-day-icon {
        width: 32px;
        height: 32px;
    }
    .checkin-day-icon svg {
        width: 32px;
        height: 32px;
    }
    .checkin-day-item {
        flex: 0 0 calc(33.33% - 4px);
    }
    .checkin-bottom {
        grid-template-columns: 1fr;
        padding: 0 20px 20px;
    }
}

/* 滚动条美化 */
.checkin-modal-body::-webkit-scrollbar {
    width: 6px;
}
.checkin-modal-body::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}
.checkin-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FF6B9D, #C06CFF);
    border-radius: 3px;
}
.checkin-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF4081, #9C27B0);
}

/* ===== 联系客服弹窗（点击模态框） ===== */
.vfb-service-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.vfb-service-modal.show {
    display: flex !important;
}
.vfb-service-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.vfb-service-modal-box {
    position: relative;
    width: 720px;
    max-width: 95%;
    height: 580px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: vfbServiceModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes vfbServiceModalIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.vfb-service-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: #fff;
    flex-shrink: 0;
}
.vfb-service-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vfb-service-modal-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vfb-service-modal-avatar svg {
    width: 20px;
    height: 20px;
    color: #fff;
}
.vfb-service-modal-info {
    display: flex;
    flex-direction: column;
}
.vfb-service-modal-name {
    font-size: 14px;
    font-weight: 600;
}
.vfb-service-modal-status {
    font-size: 11px;
    opacity: 0.85;
}
.vfb-service-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s;
    border-radius: 50%;
}
.vfb-service-modal-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
/* Header 顶部两 Tab 已移除，兜底 display:none 防止 OPCache 缓存旧模板时仍显示 */
.vfb-service-modal-tabs {
    display: none !important;
}
.vfb-service-tab {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.vfb-service-tab.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(16,185,129,0.35);
}
.vfb-service-tab.gray {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}
@media (max-width: 640px) {
    .vfb-service-modal-tabs { display: none; }
}

/* ============ 扫码客服弹窗：vfbScanCodeModal ============ */
.vfb-scan-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.vfb-scan-modal-overlay.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}
.vfb-scan-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}
.vfb-scan-modal-box {
    position: relative;
    z-index: 2;
    width: 680px;
    max-width: 94%;
    min-height: 360px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(0.92) translateY(12px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vfb-scan-modal-overlay.active .vfb-scan-modal-box {
    transform: scale(1) translateY(0);
}
.vfb-scan-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    opacity: 0.8;
    z-index: 3;
    transition: all 0.2s ease;
}
.vfb-scan-modal-close:hover {
    opacity: 1;
    background: #f3f4f6;
    transform: rotate(90deg);
    color: #111827;
}
.vfb-scan-modal-body {
    display: flex;
    align-items: stretch;
    padding: 36px 28px 32px;
    gap: 0;
}
.vfb-scan-left {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 18px 4px 8px;
    text-align: center;
}
.vfb-scan-qrbox {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #f0f7ff 0%, #fef6ff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
.vfb-scan-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    border-radius: 8px;
}
.vfb-scan-qr-placeholder {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    padding: 0 6px;
}
.vfb-scan-qr-name {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.3px;
}
.vfb-scan-divider {
    flex: 0 0 1px;
    background: linear-gradient(180deg, transparent 0%, #e5e7eb 12%, #e5e7eb 88%, transparent 100%);
    margin: 8px 8px;
}
.vfb-scan-right {
    flex: 1 1 auto;
    padding: 4px 8px 4px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
.vfb-scan-avatar-wrap {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2);
}
.vfb-scan-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    border-radius: 50%;
}
.vfb-scan-avatar-svg {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}
.vfb-scan-name-job {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    letter-spacing: 0.4px;
}
/* 扫码卡片顶部大字：客服名称（对应图片2右栏顶部"微信联系大客户经理"） */
.vfb-scan-service-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    letter-spacing: 0.4px;
    margin: 0;
}
/* 扫码卡片标题下方小字：说明（对应图片2"我们将尽快与您联系"） */
.vfb-scan-service-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
    margin: -8px 0 0 0;
}
.vfb-scan-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.vfb-scan-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    min-height: 28px;
}
.vfb-scan-info-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vfb-scan-info-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.vfb-scan-info-label {
    width: 40px;
    flex-shrink: 0;
    font-size: 13px;
    color: #6b7280;
}
.vfb-scan-info-value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
    word-break: break-all;
    transition: color 0.15s ease;
}
.vfb-scan-info-value[href]:hover { color: #4f46e5; text-decoration: underline; }
.vfb-scan-welcome {
    width: 100%;
    margin-top: 4px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
    border-radius: 12px;
    border: 1px solid #ede9fe;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vfb-scan-welcome p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
}
.vfb-scan-welcome p b,
.vfb-scan-welcome p strong { color: #111827; font-weight: 600; }

/* 扫码弹窗响应式：< 640px 改成上下堆叠 */
@media (max-width: 640px) {
    .vfb-scan-modal-body {
        flex-direction: column;
        align-items: center;
        padding: 40px 20px 28px;
        gap: 0;
    }
    .vfb-scan-left {
        flex: 1 1 auto;
        width: 100%;
        padding: 0 0 16px;
    }
    .vfb-scan-divider {
        width: 100%;
        height: 1px;
        flex: 0 0 1px;
        margin: 8px 0 18px;
        background: linear-gradient(90deg, transparent 0%, #e5e7eb 10%, #e5e7eb 90%, transparent 100%);
    }
    .vfb-scan-right {
        padding: 0 2px;
        align-items: center;
        text-align: center;
    }
    .vfb-scan-name-job { text-align: center; }
    .vfb-scan-service-title,
    .vfb-scan-service-subtitle { text-align: center; }
    .vfb-scan-info-row { justify-content: center; }
    .vfb-scan-info-value { text-align: left; }
}
.vfb-service-modal-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.vfb-service-modal-chat {
    flex: 1;
    width: 100%;
    padding: 16px;
    background: #f5f7fa;
    overflow-y: auto;
}
/* 前台聊天弹窗右侧信息面板：PLUS 广告卡 + 联系方式（参考图片2 风格：桌面固定 280px，左 chat 右 sidebar 两栏） */
.vfb-service-modal-sidebar {
    flex: 0 0 280px;
    width: 280px;
    padding: 16px;
    background: #fafbfc;
    border-left: 1px solid #eef0f3;
    overflow-y: auto;
    box-sizing: border-box;
}
.vfb-service-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.vfb-service-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.vfb-service-sidebar-tag {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    padding: 3px 8px;
    border-radius: 10px;
}
.vfb-service-sidebar-card {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    border-radius: 12px;
    padding: 14px;
    color: #fff;
    margin-bottom: 12px;
}
.vfb-service-card-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}
.vfb-service-card-desc {
    font-size: 11px;
    opacity: 0.9;
    line-height: 1.5;
    margin-bottom: 10px;
}
.vfb-service-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #333 !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 16px;
    transition: all 0.2s;
}
.vfb-service-card-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
}
.vfb-service-sidebar-info {
    font-size: 11px;
    color: #666;
    line-height: 1.7;
}
.vfb-service-info-title {
    color: #4a90e2;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.5;
}
.vfb-service-info-desc {
    color: #888;
    margin-bottom: 4px;
}
.vfb-service-info-item {
    color: #333;
    font-weight: 500;
    margin-bottom: 4px;
}
.vfb-service-modal-time {
    text-align: center;
    padding: 10px 0;
    background: #f5f7fa;
    border-radius: 6px;
    margin-top: 12px;
}

/* ===== 分类列表页样式（图片2风格） ===== */
.video-cat-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px 60px;
    padding-top: 100px;
}

/* 面包屑 */
.video-cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
}
.video-cat-breadcrumb a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.2s;
}
.video-cat-breadcrumb a:hover {
    color: #3cc89c;
}
.video-cat-breadcrumb .cat-sep {
    color: rgba(255,255,255,0.3);
}
.video-cat-breadcrumb .cat-current {
    color: #3cc89c;
    font-weight: 500;
}

/* 分类筛选 */
.video-cat-filter {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cat-filter-label {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 6px;
}
.cat-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cat-filter-tab {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
}
.cat-filter-tab:hover {
    color: #fff;
    background: rgba(60,200,156,0.15);
    border-color: rgba(60,200,156,0.4);
}
.cat-filter-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(60,200,156,0.35);
}

/* 排序选项 */
.video-cat-sort {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    margin-bottom: 20px;
}
.cat-sort-label {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}
.cat-sort-tabs {
    display: flex;
    gap: 16px;
}
.cat-sort-tab {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s;
    position: relative;
}
.cat-sort-tab:hover {
    color: #fff;
}
.cat-sort-tab.active {
    color: #3cc89c;
    font-weight: 500;
}
.cat-sort-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3cc89c;
    border-radius: 1px;
}
.cat-sort-count {
    margin-left: auto;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.cat-sort-count strong {
    color: #3cc89c;
    font-size: 16px;
    font-weight: 700;
}

/* 视频网格 */
.video-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
}
.video-cat-item {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.06);
}
.video-cat-item:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(60,200,156,0.25);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}
.video-cat-cover {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #1a1d2e;
}
.video-cat-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.video-cat-item:hover .video-cat-cover img {
    transform: scale(1.05);
}
.video-cat-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.video-cat-item:hover .video-cat-hover-video {
    opacity: 1;
}
.video-cat-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}
.video-cat-item:hover .video-cat-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.video-cat-res {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 10px;
    background: rgba(60,200,156,0.9);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.3;
    overflow: hidden;
    z-index: 3;
}
/* video-cat: 公共图标尺寸 */
.video-cat-res img {
    display: block;
    width: auto;
    height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
}
/* video-cat: 只有图标 */
.video-cat-res-icon-only {
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    min-width: 22px;
    height: 22px;
}
.video-cat-res-icon-only img {
    height: 22px;
}
/* video-cat: 图标+文字同显 */
.video-cat-res-has-both {
    padding: 3px 10px 3px 6px;
}
.video-cat-res-has-both img {
    height: 13px;
}
.video-cat-res-title {
    display: inline-block;
    line-height: 1.2;
}
/* video-cat: 胶囊样式 */
.video-cat-res-style-capsule {
    padding: 3px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(43,125,233,0.9) 0%, rgba(26,91,181,0.9) 100%);
}
.video-cat-res-style-capsule.video-cat-res-has-both {
    padding: 2px 12px 2px 6px;
}
.video-cat-res-style-capsule.video-cat-res-icon-only {
    background: transparent;
    padding: 0;
}
/* video-cat: 方形样式 */
.video-cat-res-style-square {
    padding: 4px 9px;
    border-radius: 2px;
    background: rgba(43,125,233,0.9);
}
.video-cat-res-style-square.video-cat-res-icon-only {
    background: transparent;
    padding: 0;
}
.video-cat-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}
.video-cat-info {
    padding: 14px 16px 18px;
}
.video-cat-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}
.video-cat-title a {
    color: #fff;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}
.video-cat-title a:hover {
    color: #3cc89c;
}
.video-cat-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.video-cat-tag {
    padding: 2px 8px;
    background: rgba(60,200,156,0.15);
    color: #3cc89c;
    border-radius: 3px;
    font-size: 11px;
}
.video-cat-views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* 空状态 */
.video-cat-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: rgba(255,255,255,0.5);
}
.video-cat-empty p {
    font-size: 16px;
}

/* 分页 */
.video-cat-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.video-cat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}
.video-cat-pagination .page-numbers:hover {
    color: #fff;
    background: rgba(60,200,156,0.15);
    border-color: rgba(60,200,156,0.4);
}
.video-cat-pagination .page-numbers.current {
    color: #fff;
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    border-color: transparent;
    font-weight: 600;
}

/* 响应式 */
@media (max-width: 1200px) {
    .video-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    .video-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .video-cat-page {
        padding: 20px 16px 40px;
        padding-top: 90px;
    }
}
@media (max-width: 600px) {
    .video-cat-grid {
        grid-template-columns: 1fr;
    }
    .video-cat-filter {
        flex-direction: column;
        gap: 10px;
    }
    .video-cat-sort {
        flex-wrap: wrap;
        gap: 12px;
    }
    .cat-sort-count {
        margin-left: 0;
        width: 100%;
    }
}

/* ===== 视频详情页样式 ===== */
.video-detail-page {
    background: #111318;
    min-height: 100vh;
    color: #fff;
    padding-top: 70px;
    padding-bottom: 40px;
    overflow-x: hidden;
}

/* 视频详情页 - 支持导航菜单样式（复用 video-archive-page 的导航样式） */
.video-detail-page .video-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    min-height: 70px;
    background: #242729;
    z-index: 999999;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.video-detail-page .video-top-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 90px 0 20px;
}
.video-detail-page .vtn-left {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.video-detail-page .vtn-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    margin-right: 20px;
}
.video-detail-page .vtn-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #10b981;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.4;
    height: 44px;
    box-sizing: border-box;
}
.video-detail-page .vtn-menu {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}
.video-detail-page .vtn-menu-item {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    height: 70px;
    color: #fff;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
}
.video-detail-page .vtn-menu-item a {
    color: #fff;
    text-decoration: none;
}
.video-detail-page .vtn-menu-item:hover,
.video-detail-page .vtn-menu-item:hover a {
    color: #10b981;
}
.video-detail-page .vtn-menu-item.vtn-menu-active,
.video-detail-page .vtn-menu-item.vtn-menu-active a {
    color: #10b981;
}
.video-detail-page .vtn-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.video-detail-page .vtn-right-btn-wrap {
    display: inline-flex;
    align-items: center;
}
.video-detail-page .vtn-right-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    height: 32px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
}
.video-detail-page .vtn-right-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.video-detail-page .vtn-right-icon-wrap {
    display: inline-flex;
    align-items: center;
}
.video-detail-page .vtn-right-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.2s;
}
.video-detail-page .vtn-right-icon:hover {
    color: #fff;
}
.video-detail-page .vtn-right-avatar-icon {
    width: auto;
    height: auto;
    border-radius: 50%;
    overflow: hidden;
}
.video-detail-page .vtn-right-avatar-icon img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
/* ===== 商品页导航按图2样式重绘 ===== */
/* 1) 菜单激活项：短绿色下划线居中，宽度约为文字2/3 */
.video-detail-page .vtn-menu-active {
    font-weight: 400;
    color: #fff !important;
}
.video-detail-page .vtn-menu-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #10b981;
    box-shadow: none;
}
/* 2) 移除所有菜单徽章（如实拍/热门角标） */
.video-detail-page .vtn-badge {
    display: none !important;
}
/* 3) 右侧VIP按钮（个人/企业/定制授权）改为纯白文字，去掉深色方块背景 */
.video-detail-page .vtn-right-btn-wrap .vtn-right-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 400;
    padding: 0 12px !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
}
.video-detail-page .vtn-right-btn-wrap .vtn-right-btn:hover {
    color: #4ade80 !important;
    background: transparent !important;
}
/* 4) 移除「搜索图标」「VIP方块按钮」「铃铛图标」——图2没有这些 */
.video-detail-page .vtn-right-icon-wrap .vtn-right-icon:not(.vtn-right-avatar-icon):not(.vtn-msg-icon) {
    display: none !important;
}
/* 隐藏VIP方块按钮（右侧单独的橙色VIP） */
.video-detail-page .vtn-right-icon-wrap .vtn-vip-btn-top {
    display: none !important;
}
.video-detail-page .vtn-right-btn.vtn-vip-btn-top {
    display: none !important;
}
/* 5) 铃铛图标改为信封图标 + 右上角小红点"1" */
.video-detail-page .vtn-right-icon.vtn-msg-icon {
    position: relative;
    color: rgba(255,255,255,0.85) !important;
}
.video-detail-page .vtn-right-icon.vtn-msg-icon svg {
    display: none;
}
.video-detail-page .vtn-right-icon.vtn-msg-icon::before {
    content: "✉";
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.video-detail-page .vtn-right-icon.vtn-msg-icon::after {
    content: "1";
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    box-sizing: border-box;
}
/* 6) 导航背景加深（纯黑灰），与图2一致 */
.video-detail-page .video-top-nav {
    background: #111214 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* 7) 导航高度70px（与视频首页一致） + 弹窗可见性修复 */
.video-detail-page .video-top-nav {
    height: 70px;
    min-height: 70px;
    overflow: visible !important;
}
.video-detail-page .video-top-nav-inner {
    padding: 0 60px 0 16px;
    overflow: visible !important;
}
.video-detail-page .vtn-left {
    overflow: visible !important;
}
.video-detail-page .vtn-menu-item {
    height: 70px;
    padding: 0 16px;
    font-size: 15px;
    position: relative !important;
    overflow: visible !important;
}
/* 8) 确保下拉弹窗在商品页可显示（z-index+定位+尺寸保留） */
.video-detail-page .vtn-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    overflow: visible !important;
    display: block !important;
}
.video-detail-page .vtn-dropdown.vtn-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    display: block !important;
}
/* 样式5大弹窗特殊处理（auto高度避免溢出裁剪） */
.video-detail-page .vtn-dropdown.vtn-dropdown-style5 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.video-detail-page .vtn-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.2;
}
.video-detail-page .vtn-badge-orange {
    background: #ff6b3a;
    color: #fff;
}

/* 广告 Banner */
.video-detail-banner {
    padding: 0;
    margin-bottom: 20px;
}
.vdb-banner-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100px;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 24px;
}
.vdb-banner-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 70%, #f5576c 100%);
    z-index: 0;
}
.vdb-banner-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='100' viewBox='0 0 600 100'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='1'%3E%3Cpath d='M0 50 Q150 15 300 50 T600 50'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
.vdb-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}
.vdb-banner-tag {
    padding: 4px 12px;
    background: rgba(255,255,255,0.25);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
}
.vdb-banner-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.vdb-banner-btn {
    position: relative;
    z-index: 1;
    padding: 10px 28px;
    background: #fff;
    color: #f5576c;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.vdb-banner-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.vdb-banner-close {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.vdb-banner-close:hover {
    background: rgba(255,255,255,0.35);
}

/* 容器 */
.video-detail-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 面包屑 */
.video-detail-breadcrumb {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.video-detail-breadcrumb a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
}
.video-detail-breadcrumb a:hover {
    color: #3cc89c;
}
.vdb-sep {
    margin: 0 8px;
    color: rgba(255,255,255,0.3);
}
.vdb-current {
    color: rgba(255,255,255,0.8);
}

/* 主体 */
.video-detail-main {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    margin-bottom: 40px;
    align-items: flex-start;
    justify-content: flex-start;
}
.video-detail-left {
    flex: 1;
    min-width: 0;
}
.video-detail-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}

/* ===== 1080P 模式：固定 960×540 ===== */
.video-detail-page-1080p .video-detail-left {
    flex: 1 1 auto;
    width: 960px;
    max-width: 100%;
    min-width: 0;
}
.video-detail-page-1080p .video-player-wrapper {
    position: relative;
    width: 960px;
    max-width: 100%;
    height: 540px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

/* ===== 4K 模式：固定 1450×813 ===== */
.video-detail-page-4k .video-detail-container {
    max-width: 1920px;
}
.video-detail-page-4k .video-detail-left {
    flex: 1 1 auto;
    width: 1450px;
    max-width: 100%;
    min-width: 0;
}
.video-detail-page-4k .video-player-wrapper {
    position: relative;
    width: 1450px;
    max-width: 100%;
    height: 813px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.video-player {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.video-player-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1d2e;
}
.video-player-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.placeholder-play {
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    backdrop-filter: blur(4px);
}

/* 播放器右下角分辨率图标（3种样式：文字/胶囊/方形） */
.player-res-icon {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    user-select: none;
    pointer-events: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.player-res-icon .player-res-img {
    display: block;
    max-height: 44px;
    object-fit: contain;
}
.player-res-icon .player-res-text {
    font-weight: 700;
    letter-spacing: 0.5px;
}
/* 文字样式（纯文字时才加轻量背景，有图片时完全透明） */
.player-res-icon.player-res-text:not(:has(.player-res-img)) {
    color: #fff;
    font-size: 15px;
    padding: 3px 8px;
    border-radius: 3px;
}
/* 胶囊样式（纯文字时才绿色胶囊，有图片时完全透明） */
.player-res-icon.player-res-badge:not(:has(.player-res-img)) {
    background: rgba(60,200,156,0.92) !important;
    color: #fff;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* 方形样式（纯文字时才轻量背景，有图片时完全透明） */
.player-res-icon.player-res-square:not(:has(.player-res-img)) {
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}
/* 有图标时的尺寸限制 */
.player-res-icon:not(.player-res-text) .player-res-img {
    max-height: 36px;
}

/* ===== 播放器下方属性（新样式） ===== */
.video-info-panel {
    padding: 12px 0 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 0 0 8px 8px;
}

/* 第一行：商图标 + 标题 + ID + 以视频搜视频 + 收藏 */
.vip-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vip-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.vip-biz-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    flex-shrink: 0;
}
.vip-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    color: rgba(255,255,255,0.95);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}
.vip-id {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
    margin-right: auto;
}

/* VIP图标 */
.vip-vip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* 特色标签（热门/独家/最新/推荐/精品/默认） */
.vip-feat-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.vip-feat-tag.vft-default   { background: linear-gradient(135deg, #6b7280, #4b5563); }
.vip-feat-tag.vft-hot       { background: linear-gradient(135deg, #ef4444, #dc2626); }
.vip-feat-tag.vft-exclusive { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.vip-feat-tag.vft-latest    { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.vip-feat-tag.vft-recommend { background: linear-gradient(135deg, #3cc89c, #10b981); }
.vip-feat-tag.vft-premium   { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* 视频分辨率图标（3种样式：文字/胶囊/方形） */
.vip-res-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}
.vip-res-icon .vip-res-img {
    display: block;
    max-height: 20px;
    object-fit: contain;
}
.vip-res-icon .vip-res-text {
    font-weight: 600;
}
/* 文字样式 */
.vip-res-icon.vip-res-text {
    padding: 0;
    background: transparent;
    border: none;
    color: #3cc89c;
    font-size: 13px;
    border-radius: 0;
}
/* 胶囊样式 */
.vip-res-icon.vip-res-badge {
    padding: 2px 10px;
    background: rgba(60,200,156,0.12);
    color: #3cc89c;
    border: 1px solid rgba(60,200,156,0.3);
    border-radius: 12px;
    font-size: 11px;
}
/* 方形样式 */
.vip-res-icon.vip-res-square {
    padding: 3px 8px;
    background: rgba(60,200,156,0.12);
    color: #3cc89c;
    border: 1px solid rgba(60,200,156,0.3);
    border-radius: 3px;
    font-size: 11px;
}
/* 有图标时统一尺寸 */
.vip-res-icon:not(.vip-res-text) .vip-res-img {
    max-height: 16px;
}

.vip-title-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.vip-search-by-video {
    padding: 4px 12px;
    background: linear-gradient(135deg, #3cc89c, #21a67f);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.vip-search-by-video:hover {
    box-shadow: 0 3px 10px rgba(60,200,156,0.4);
}
.vip-fav-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.vip-fav-btn:hover {
    color: #f59e0b;
    background: rgba(245,158,11,0.1);
}
.vip-fav-btn.favorited {
    color: #f59e0b;
}

/* 第二行：属性列表 */
.vip-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vip-meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.vip-meta-label {
    color: rgba(255,255,255,0.4);
    margin-right: 2px;
}
.vip-meta-value {
    color: rgba(255,255,255,0.75);
}
.vip-meta-category {
    color: #3cc89c;
}
.vip-software-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #00c8ff, #0081cb);
    border-radius: 3px;
    position: relative;
}
.vip-software-icon::after {
    content: 'Ps';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

/* 第三行：作者信息 */
.vip-author-row {
    padding: 10px 16px 4px;
}
.vip-author-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}
.vip-author-label {
    color: rgba(255,255,255,0.4);
}
.vip-author-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vip-author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}
.vip-author-name {
    color: rgba(255,255,255,0.75);
}
.vip-author-id {
    color: rgba(255,255,255,0.4);
}

/* 相似视频 */
.video-similar-section {
    margin-top: 32px;
    margin-bottom: 40px;
}
.vds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.vds-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.vds-more {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s;
}
.vds-more:hover {
    color: #3cc89c;
}
.vds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.vds-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s;
}
.vds-item:hover {
    transform: translateY(-4px);
}
.vds-cover {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1a1d2e;
    border-radius: 8px;
    overflow: hidden;
}
.vds-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.vds-item:hover .vds-cover img {
    transform: scale(1.05);
}
.vds-cover-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2d3548 0%, #1a1d2e 100%);
}
.vds-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
}
.vds-res {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(60,200,156,0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
}
.vds-title-text {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== 下载面板（新样式） ===== */
.vds-download-panel {
    position: sticky;
    top: 100px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 16px 18px;
}

/* Tab切换 */
.vds-tabs {
    display: flex;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 3px;
    margin-bottom: 16px;
}
.vds-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.vds-tab.active {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 600;
}
.vds-tab-content {
    display: none;
}
.vds-tab-content.active {
    display: block;
}

/* 分辨率选择 */
.vds-resolution-list {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vds-res-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.vds-res-item:hover {
    background: rgba(255,255,255,0.05);
}
.vds-res-item.active {
    border-color: rgba(60,200,156,0.3);
    background: rgba(60,200,156,0.05);
}
.vds-res-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
}
.vds-res-item.active .vds-res-radio {
    border-color: #10b981;
}
.vds-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s;
}
.vds-res-item.active .vds-radio-dot {
    background: #10b981;
}
.vds-res-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    flex: 1;
}
.vds-res-item.active .vds-res-label {
    color: #10b981;
}
.vds-res-size {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}
.vds-res-item.vds-res-locked {
    opacity: 0.55;
    cursor: pointer;
    position: relative;
}
.vds-res-item.vds-res-locked:hover {
    opacity: 0.75;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}
.vds-res-item.vds-res-locked .vds-res-radio {
    border-color: rgba(239, 68, 68, 0.4);
}
.vds-res-item.vds-res-locked .vds-res-label {
    color: rgba(255,255,255,0.5);
}
.vds-res-item.vds-res-locked .vds-res-size {
    color: rgba(255,255,255,0.3);
}
.vds-res-lock-icon {
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.7;
}
.vds-download-btn[disabled] {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.5);
}
.vds-download-btn.vds-btn-locked {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    cursor: not-allowed;
    opacity: 0.85;
}
.vds-vip-resolution-tip {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 6px;
    font-size: 12px;
    color: rgba(251, 191, 36, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vds-vrt-icon {
    font-size: 14px;
}
.vds-vrt-link {
    color: #fbbf24;
    text-decoration: underline;
    font-weight: 600;
    margin-left: auto;
}
.vds-vrt-link:hover {
    color: #f59e0b;
}
/* 升级提示弹窗 */
.vds-upgrade-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    padding: 20px 24px;
    z-index: 99999;
    max-width: 420px;
    width: calc(100% - 40px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(251, 191, 36, 0.15);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.vds-upgrade-toast.vds-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.vds-toast-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.vds-toast-icon {
    font-size: 24px;
}
.vds-toast-title {
    font-size: 15px;
    font-weight: 700;
    color: #fbbf24;
}
.vds-toast-msg {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 14px;
}
.vds-toast-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.vds-toast-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}
.vds-toast-btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
.vds-toast-btn-primary:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
}
.vds-toast-btn-secondary {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.15);
}
.vds-toast-btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}
.vds-toast-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    border: none;
    transition: all 0.2s;
}
.vds-toast-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
/* 套餐行：价格显示 */
.vds-pkg-price {
    color: rgba(255,255,255,0.55);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 1.4;
}
.vds-pkg-price-now {
    color: #3cc89c;
    font-weight: 700;
    font-size: 14px;
}
.vds-pkg-price-old {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    text-decoration: line-through;
}
.vds-pkg-vip-tag {
    display: inline-block;
    padding: 1px 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 2px;
    letter-spacing: 0.5px;
}
.vds-pkg-item.active .vds-pkg-price-now {
    color: #6ee7c7;
}

/* 下载按钮 */
.vds-download-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 0;
    background: linear-gradient(135deg, #10b981 0%, #3cc89c 50%, #00c8ff 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
    letter-spacing: 1px;
}
.vds-download-btn:link,
.vds-download-btn:visited,
.vds-download-btn:hover,
.vds-download-btn:active,
.vds-download-btn:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
}
.vds-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16,185,129,0.45);
}
.vds-download-btn.vds-personal-btn {
    background: linear-gradient(135deg, #10b981, #3cc89c);
}

/* 价格标签 */
.vds-price-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}
.vds-price-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}
.vds-price-tag-purple {
    background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(168,85,247,0.08));
    color: #d8b4fe;
    border: 1px solid rgba(168,85,247,0.3);
    position: relative;
    padding-right: 32px;
}
.vds-price-tag-purple::after {
    content: '✓';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background: #a855f7;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}
.vds-price-tag-orange {
    background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(249,115,22,0.08));
    color: #fdba74;
    border: 1px solid rgba(249,115,22,0.3);
}

/* 购买按钮 */
.vds-buy-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.vds-buy-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background: rgba(60,200,156,0.1);
    color: #3cc89c;
    border: 1px solid rgba(60,200,156,0.25);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 1px solid rgba(60,200,156,0.25) !important;
    outline: none !important;
    transition: all 0.2s;
    white-space: nowrap;
}
.vds-buy-btn:link,
.vds-buy-btn:visited,
.vds-buy-btn:hover,
.vds-buy-btn:active,
.vds-buy-btn:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    outline: none !important;
}
.vds-buy-btn:hover {
    background: rgba(60,200,156,0.2);
    border-color: rgba(60,200,156,0.4);
}
.vds-buy-btn-single {
    background: rgba(249,115,22,0.1);
    color: #f97316;
    border-color: rgba(249,115,22,0.25);
    border-bottom: 1px solid rgba(249,115,22,0.25) !important;
}
.vds-buy-btn-single:hover {
    background: rgba(249,115,22,0.2);
    border-color: rgba(249,115,22,0.4);
}

/* VIP提示 */
.vds-vip-tip {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 0 2px;
}
.vds-vip-tip a {
    color: #3cc89c;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
    font-weight: 500;
}
.vds-vip-tip a:link,
.vds-vip-tip a:visited,
.vds-vip-tip a:hover,
.vds-vip-tip a:active,
.vds-vip-tip a:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* 授权信息 */
.vds-license-info {
    padding: 14px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.7;
}
.vds-license-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px;
}
.vds-li-label {
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
    min-width: 68px;
}
.vds-li-value {
    color: rgba(255,255,255,0.7);
    flex: 1;
}
.vds-license-type-tags {
    display: inline-flex;
    gap: 6px;
}
.vds-license-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(60,200,156,0.12);
    color: #3cc89c;
    border: 1px solid rgba(60,200,156,0.25);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none !important;
    text-decoration-line: none !important;
    outline: none !important;
}
.vds-license-type-tag:link,
.vds-license-type-tag:visited,
.vds-license-type-tag:hover,
.vds-license-type-tag:active,
.vds-license-type-tag:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    outline: none !important;
}
.vds-license-enterprise {
    background: rgba(56,189,248,0.12);
    color: #38bdf8;
    border-color: rgba(56,189,248,0.25);
}
.vds-license-tips {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.vds-license-tips p {
    margin: 0 0 4px;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    line-height: 1.6;
}

/* 推荐视频区域 */
.video-recommend-section {
    padding-top: 20px;
}
.vrc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}
.vrc-header-decoration {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #3cc89c, transparent);
}
.vrc-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.vrc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.vrc-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.25s;
}
.vrc-item:hover {
    transform: translateY(-4px);
}
.vrc-cover {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1a1d2e;
    border-radius: 8px;
    overflow: hidden;
}
.vrc-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.vrc-item:hover .vrc-cover img {
    transform: scale(1.05);
}
.vrc-cover-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2d3548 0%, #1a1d2e 100%);
}
.vrc-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
}
.vrc-res {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(60,200,156,0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
}
.vrc-title-text {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右侧浮动工具栏 */
.video-float-tools {
    position: fixed;
    right: 20px;
    bottom: 50%;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
}
.vft-item {
    width: 48px;
    height: 48px;
    background: rgba(30,33,44,0.9);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: all 0.25s;
    backdrop-filter: blur(8px);
}
.vft-item:hover {
    background: rgba(60,200,156,0.2);
    color: #3cc89c;
    border-color: rgba(60,200,156,0.4);
    transform: scale(1.1);
}
.vft-icon {
    font-size: 18px;
}

/* 响应式 */
@media (max-width: 1024px) {
    .video-detail-main {
        flex-direction: column;
    }
    .video-detail-sidebar {
        width: 100%;
    }
    .vds-download-panel {
        position: static;
    }
    .vds-grid,
    .vrc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .vdb-banner-inner {
        height: auto;
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .vdb-banner-content {
        flex-wrap: wrap;
        gap: 8px;
    }
    .vdb-banner-title {
        font-size: 18px;
    }
    .vds-grid,
    .vrc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .video-float-tools {
        right: 10px;
    }
    .vft-item {
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 480px) {
    .vds-grid,
    .vrc-grid {
        grid-template-columns: 1fr;
    }
    .video-info-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===== 原有的 vfb-service-modal 样式（修复） ===== */
.vfb-service-modal-msg {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.vfb-service-msg-left {
    align-items: flex-start;
}
.vfb-service-msg-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.vfb-service-msg-avatar svg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.vfb-service-msg-content {
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 75%;
}
.vfb-service-msg-content p {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
.vfb-service-msg-content p + p {
    margin-top: 4px;
}
.vfb-service-modal-footer {
    border-top: 1px solid #eee;
    background: #fff;
    padding: 10px 14px;
    flex-shrink: 0;
    position: relative;
}
.vfb-service-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.vfb-service-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}
.vfb-service-action-btn:hover {
    background: #e8e8e8;
    color: #4a90e2;
    transform: scale(1.05);
}
.vfb-service-action-btn svg {
    width: 18px;
    height: 18px;
}
.vfb-service-link-btn {
    width: auto !important;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff !important;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center;
    height: 32px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}
.vfb-service-link-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}
.vfb-service-modal-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vfb-service-modal-input input {
    flex: 1;
    height: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 18px;
    padding: 0 14px;
    font-size: 13px;
    color: #333;
    background: #f9f9f9;
    outline: none;
}
.vfb-service-modal-input input:focus {
    border-color: #4a90e2;
    background: #fff;
}
.vfb-service-send-btn {
    height: 36px;
    padding: 0 20px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}
.vfb-service-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}
.vfb-service-modal-chat::-webkit-scrollbar {
    width: 4px;
}
.vfb-service-modal-chat::-webkit-scrollbar-track {
    background: transparent;
}
.vfb-service-modal-chat::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}
@media (max-width: 480px) {
    .vfb-service-modal-box {
        width: 96%;
        height: 92vh;
        border-radius: 14px;
    }
    .vfb-service-modal-main {
        flex-direction: column;
    }
    .vfb-service-modal-sidebar {
        flex: 0 0 auto;
        display: block;
        width: 100%;
        max-height: 36vh;
        padding: 12px 16px 14px;
        border-top: 1px solid #eee;
        border-left: none;
        background: #fafbfc;
    }
}

/* ===== 联系客服：表情面板 ===== */
.vfb-service-emoji-panel {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 100%;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.12), 0 6px 24px rgba(0,0,0,0.08);
    padding: 10px 12px;
    z-index: 20;
    max-height: 280px;
    display: flex;
    flex-direction: column;
}
.vfb-emoji-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}
.vfb-emoji-tab {
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    color: #666;
    background: #f5f5f5;
    transition: all 0.2s;
    white-space: nowrap;
    user-select: none;
}
.vfb-emoji-tab:hover {
    background: #e8e8e8;
    color: #4a90e2;
}
.vfb-emoji-tab.vfb-emoji-tab-active {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: #fff;
}
.vfb-emoji-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    overflow-y: auto;
    max-height: 200px;
    padding-right: 4px;
}
.vfb-emoji-grid::-webkit-scrollbar {
    width: 4px;
}
.vfb-emoji-grid::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}
.vfb-emoji-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
    user-select: none;
}
.vfb-emoji-item:hover {
    background: #eef5ff;
    transform: scale(1.25);
}

/* ===== 联系客服：待发送预览区 ===== */
.vfb-service-pending-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fafafa;
    border: 1px dashed #e0e0e0;
    border-radius: 10px;
}
.vfb-pending-item {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    flex-shrink: 0;
}
.vfb-pending-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vfb-pending-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #fff4e5 0%, #ffe8cc 100%);
    font-size: 10px;
    color: #d97706;
    text-align: center;
    padding: 4px;
    line-height: 1.2;
    word-break: break-all;
}
.vfb-pending-file .vfb-pending-file-icon {
    font-size: 20px;
    margin-bottom: 2px;
}
.vfb-pending-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.vfb-pending-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* ===== 联系客服：用户消息气泡（右侧） ===== */
.vfb-service-msg-right {
    align-items: flex-start;
    flex-direction: row-reverse;
}
.vfb-service-msg-right .vfb-service-msg-content {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: #fff;
    border-radius: 12px 12px 2px 12px;
}
.vfb-service-msg-right .vfb-service-msg-content p {
    color: #fff;
}
/* 消息中的图片 */
.vfb-service-msg-img {
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    transition: transform 0.2s;
}
.vfb-service-msg-img:hover {
    transform: scale(1.02);
}
/* 消息中的文件卡片 */
.vfb-service-msg-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(74,144,226,0.08);
    border-radius: 10px;
    min-width: 180px;
    border: 1px solid rgba(74,144,226,0.15);
}
.vfb-service-msg-right .vfb-service-msg-file {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
}
.vfb-msg-file-icon {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.vfb-msg-file-info {
    flex: 1;
    min-width: 0;
}
.vfb-msg-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vfb-service-msg-right .vfb-msg-file-name {
    color: #fff;
}
.vfb-msg-file-size {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}
.vfb-service-msg-right .vfb-msg-file-size {
    color: rgba(255,255,255,0.75);
}

/* ===== 联系客服：用户头像 ===== */
.vfb-service-msg-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
    overflow: hidden;
    object-fit: cover;
}
.vfb-service-msg-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
}

/* ===== FAQ 问题按钮行（客服弹窗自动回复） ===== */
.vfb-faq-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 16px;            /* 横向+纵向间隔 12px → 16px，按钮彼此更透气不拥挤 */
    padding: 18px 0 22px 48px; /* 上 padding 14 → 18，下 padding 18 → 22，与上图/工具栏再拉开 4px */
    margin-top: 4px;
    max-width: calc(100% - 48px);
}
.vfb-faq-btn {
    /* 默认：中性灰色，不突兀（蓝/紫/绿/橙弹窗都能接受） */
    background: #f6f7f9;
    color: #374151;
    border: 1px solid #bfdbfe;
    border-radius: 22px;
    padding: 9px 18px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.18s ease;
    white-space: nowrap;
    font-family: inherit;
}
/* —— 4 个客服弹窗主题色智能匹配：按外层 vfb-service-modal[data-modal-id] 选择器覆盖颜色 —— */
/* 1) 联系客服：蓝色主题（#3b82f6 系） */
#vfbServiceModal .vfb-faq-btn,
.vfb-service-modal[data-modal-id="vfbServiceModal"] .vfb-faq-btn {
    background: #eff6ff;
    color: #1d4ed8;
}
#vfbServiceModal .vfb-faq-btn:hover,
.vfb-service-modal[data-modal-id="vfbServiceModal"] .vfb-faq-btn:hover {
    background: #2563eb; color: #fff; border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}
/* 2) 充值 / 对公打款：橙色主题（#f97316 系） */
#vfbRechargeServiceModal .vfb-faq-btn,
.vfb-service-modal[data-modal-id="vfbRechargeServiceModal"] .vfb-faq-btn,
#vfbTransferServiceModal .vfb-faq-btn,
.vfb-service-modal[data-modal-id="vfbTransferServiceModal"] .vfb-faq-btn {
    background: #fff7ed;
    color: #c2410c;
}
#vfbRechargeServiceModal .vfb-faq-btn:hover,
.vfb-service-modal[data-modal-id="vfbRechargeServiceModal"] .vfb-faq-btn:hover,
#vfbTransferServiceModal .vfb-faq-btn:hover,
.vfb-service-modal[data-modal-id="vfbTransferServiceModal"] .vfb-faq-btn:hover {
    background: #ea580c; color: #fff; border-color: #ea580c;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.22);
}
/* 3) 支付：绿色主题（#16a34a 系）—— 就是用户截图里这个弹窗的主题 */
#vfbPayServiceModal .vfb-faq-btn,
.vfb-service-modal[data-modal-id="vfbPayServiceModal"] .vfb-faq-btn {
    background: #ecfdf5;
    color: #15803d;
}
#vfbPayServiceModal .vfb-faq-btn:hover,
.vfb-service-modal[data-modal-id="vfbPayServiceModal"] .vfb-faq-btn:hover {
    background: #16a34a; color: #fff; border-color: #16a34a;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.22);
}
/* 通用 hover 兜底（没命中主题时） */
.vfb-faq-btn:hover {
    background: #4b5563;
    color: #fff;
    border-color: #4b5563;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.2);
}
.vfb-faq-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ===== 分类菜单样式 ===== */
.video-cat-menu-bar {
    position: relative;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1d2e 0%, #252840 100%);
}
.video-cat-menu-bar .vcmb-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}
.video-cat-menu-bar .vcmb-content {
    position: relative;
    z-index: 1;
    padding: 20px;
}

/* 样式1: 标准导航 + 分类标签 */
.video-cat-menu-style1 .vcmb-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.video-cat-menu-style1 .vcmb-tab {
    padding: 8px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}
.video-cat-menu-style1 .vcmb-tab:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.video-cat-menu-style1 .vcmb-tab.active {
    background: linear-gradient(135deg, #3cc89c 0%, #21a67f 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(60,200,156,0.35);
}

/* 样式2: VIP卡片 + 分类列表 */
.video-cat-menu-style2 .vcmb-vip-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.video-cat-menu-style2 .vcmb-vip-card {
    flex: 1;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.video-cat-menu-style2 .vcmb-vip-features {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #475569;
    flex: 1;
    min-width: 0;
}
.video-cat-menu-style2 .vcmb-vip-features span {
    white-space: nowrap;
}
.video-cat-menu-style2 .vcmb-vip-personal {
    background: linear-gradient(135deg, rgba(254,243,199,0.9) 0%, rgba(253,230,138,0.9) 100%);
}
.video-cat-menu-style2 .vcmb-vip-enterprise {
    background: linear-gradient(135deg, rgba(219,234,254,0.9) 0%, rgba(191,219,254,0.9) 100%);
}
.video-cat-menu-style2 .vcmb-vip-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}
.video-cat-menu-style2 .vcmb-vip-desc {
    font-size: 13px;
    color: #64748b;
}
.video-cat-menu-style2 .vcmb-vip-btn {
    padding: 10px 24px;
    background: #0903fc;
    color: #fff;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.video-cat-menu-style2 .vcmb-vip-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(9,3,252,0.3);
}
.video-cat-menu-style2 .vcmb-cat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.video-cat-menu-style2 .vcmb-cat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.video-cat-menu-style2 .vcmb-cat-item:hover,
.video-cat-menu-style2 .vcmb-cat-item.active {
    background: rgba(9,3,252,0.15);
    border-color: rgba(9,3,252,0.4);
    color: #fff;
}
.video-cat-menu-style2 .vcmb-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}

/* 样式3: 企业VIP + 分类列表 */
.video-cat-menu-style3 .vcmb-vip-cards {
    margin-bottom: 20px;
}
.video-cat-menu-style3 .vcmb-vip-enterprise-big {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(219,234,254,0.95) 0%, rgba(191,219,254,0.95) 100%);
    border-radius: 12px;
}
.video-cat-menu-style3 .vcmb-vip-icon {
    font-size: 32px;
}
.video-cat-menu-style3 .vcmb-vip-info {
    flex: 1;
}
.video-cat-menu-style3 .vcmb-vip-features {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #475569;
    margin-top: 6px;
}
.video-cat-menu-style3 .vcmb-cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.video-cat-menu-style3 .vcmb-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.video-cat-menu-style3 .vcmb-cat-item:hover,
.video-cat-menu-style3 .vcmb-cat-item.active {
    background: rgba(9,3,252,0.15);
    border-color: rgba(9,3,252,0.4);
    color: #fff;
}
.video-cat-menu-style3 .vcmb-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}

/* 样式4: 创作/电商/工具模块 */
.video-cat-menu-style4 .vcmb-modules {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.video-cat-menu-style4 .vcmb-module {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px 20px;
}
.video-cat-menu-style4 .vcmb-module-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.video-cat-menu-style4 .vcmb-module-items {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.video-cat-menu-style4 .vcmb-module-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}
.video-cat-menu-style4 .vcmb-module-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
.video-cat-menu-style4 .vcmb-mi-icon {
    font-size: 18px;
}
.video-cat-menu-style4 .vcmb-hot {
    position: relative;
}
.video-cat-menu-style4 .vcmb-hot::after {
    content: 'HOT';
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    border-radius: 8px;
    font-weight: 700;
}

/* 样式5: 图片库/人像等模块 */
/* style5 大面板必须覆盖基类 height:430px + overflow:hidden，否则5分区会被裁切 */
.vtn-dropdown.vtn-style-panel.vtn-style-panel-5 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
.video-cat-menu-style5 .vcmb-modules-5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.video-cat-menu-style5 .vcmb-module {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
}
.video-cat-menu-style5 .vcmb-module-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.video-cat-menu-style5 .vcmb-mi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}
.video-cat-menu-style5 .vcmb-mi-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.video-cat-menu-style5 .vcmb-module-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.video-cat-menu-style5 .vcmb-module-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}

/* 响应式 */
@media (max-width: 768px) {
    .video-cat-menu-style2 .vcmb-vip-cards {
        flex-direction: column;
    }
    .video-cat-menu-style3 .vcmb-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .video-cat-menu-style5 .vcmb-modules-5 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .video-cat-menu-style3 .vcmb-cat-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 后台同步动态导航菜单样式 ===== */
/* 顶栏下拉（一级 → 二级） */
.vtn-menu .vtn-has-dynamic-sub {
    position: relative;
    z-index: 1;
}
.vtn-menu .vtn-has-dynamic-sub > a {
    color: inherit;
    text-decoration: none !important;
}
.vtn-menu .vtn-dynamic-submenu {
    width: auto;
    min-width: 180px;
    height: auto;
    background: #1f2428;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.35);
    left: 0;
    top: 100%;
    padding: 6px 0;
    overflow: visible;
}
.vtn-menu .vtn-has-dynamic-sub:hover .vtn-dynamic-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.vtn-menu .vtn-dynamic-submenu-inner {
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
}
.vtn-menu .vtn-dynamic-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 160px;
}
.vtn-menu .vtn-dynamic-sub-item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.vtn-menu .vtn-dynamic-sub-item > a {
    display: block;
    padding: 9px 18px;
    color: #e5e7eb;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    transition: all 0.15s;
}
.vtn-menu .vtn-dynamic-sub-item > a:hover {
    background: rgba(16,185,129,0.12);
    color: #4ade80;
}
.vtn-menu .vtn-dynamic-sub-item.is-active > a {
    background: rgba(16,185,129,0.18);
    color: #4ade80;
}

/* 二级及更深：子菜单向右展开 */
.vtn-menu .vtn-dynamic-has-children {
    position: relative;
}
.vtn-menu .vtn-dynamic-has-children > a::after {
    content: "›";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
}
.vtn-menu .vtn-dynamic-sublist {
    position: absolute;
    top: -6px;
    left: 100%;
    min-width: 170px;
    background: #1f2428;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.35);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1001;
}
.vtn-menu .vtn-dynamic-has-children:hover > .vtn-dynamic-sublist {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* ===== 顶级菜单大面板（样式1~5）显隐控制 ===== */
/* ============================================================
 * ⚠️ V2 修复：彻底收敛显隐为「单一开关」+ 「单一定位原点」
 *
 * —— 用户击穿点 1：「鼠标放首页菜单时，视频模板弹窗自己出来」
 *    根因：上一轮保留了 .vtn-style-panel:hover { opacity:1 } 这条兜底。
 *          但 panel 是 980px 宽、absolute 溢出跨区覆盖在首页菜单下方，
 *          即便 opacity:0，只要 pointer-events:auto，鼠标悬停到那个溢出
 *          区域 → 纯 CSS :hover 直接把 opacity 拉亮，JS 互斥锁根本没机会管。
 *    修复：彻底删除 .vtn-style-panel:hover 兜底；面板显隐 100% 只由
 *          JS 加的 .vtn-panel-is-open 类控制；关闭态强制 pointer-events:none
 *          → 透明 + 不吃任何鼠标事件，不会误拦相邻菜单路径。
 *
 * —— 用户击穿点 2：「定位依然不准」
 *    根因：上一轮相对 div.vtn-menu-item（窄 ~110px）做定位换算，而祖先元素
 *          （.video-top-nav）如果有 padding/border/transform，
 *          offsetParent 原点 ≠ topRect.left → 像素计算有系统误差。
 *    修复：把定位原点收敛到统一的 .vtn-menu（整排菜单 flex 容器），
 *          给它 position:relative 作为唯一锚点；panel/bridge 从原本是
 *          div.vtn-menu-item 的 direct child（absolute 相对 top），改为 JS
 *          动态计算相对 .vtn-menu 容器的 left/top 像素值，并且把
 *          div.vtn-menu-item 自己的 position:relative 去掉 → 消除"两层
 *          position:relative 嵌套"导致的坐标系歧义。
 * ============================================================ */
/* ① 单一定位原点：整排菜单 flex 容器 .vtn-menu 是 position:relative（L76 已有）
      top（div.vtn-menu-item）取消 position:relative，彻底消除歧义 */
.vtn-menu .vtn-menu-item.vtn-has-style-panel {
    position: static !important;     /* 取消自身作为定位上下文的身份 */
}
/* ② 大面板 & bridge：默认是关闭态 → pointer-events:none（不吃任何鼠标事件，
      就算溢出到相邻菜单下方，也不会挡人、也不会被 hover 误触发）*/
.vtn-menu .vtn-has-style-panel > .vtn-dropdown.vtn-style-panel,
.vtn-menu .vtn-has-style-panel > .vtn-dropdown-bridge {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    position: absolute;             /* 相对唯一锚点：.vtn-menu position:relative */
    top: 100%;                     /* 相对 .vtn-menu 底部（导航栏下沿） */
    left: 0;
    z-index: 50;
    pointer-events: none !important;/* 关闭态：完全不参与鼠标命中 */
}
/* 同时给关闭态子元素也锁死 pointer-events，避免 shadow DOM 穿透 */
.vtn-menu .vtn-has-style-panel:not(.vtn-panel-is-open) > .vtn-style-panel,
.vtn-menu .vtn-has-style-panel:not(.vtn-panel-is-open) > .vtn-dropdown-bridge,
.vtn-menu .vtn-style-panel:not(.vtn-panel-is-open),
.vtn-menu .vtn-style-panel:not(.vtn-panel-is-open) * {
    pointer-events: none !important;
}
/* L2/L3 小下拉（vtn-has-dynamic-sub）和普通 vtn-has-dropdown 仍用 CSS hover ——
   它们也保留自身原本的定位上下文（div.vtn-menu-item 的 position:static
   由上面的 !important 规则覆盖到 only has-style-panel，其它不受影响）*/
.vtn-menu .vtn-has-dynamic-sub > .vtn-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    pointer-events: auto;
}
.vtn-menu .vtn-menu-item:not(.vtn-has-style-panel):hover > .vtn-dropdown,
.vtn-menu .vtn-has-dynamic-sub:hover > .vtn-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) translateX(var(--preserve-x, 0)) !important;
}
/* —— L1 大面板（vtn-has-style-panel）：唯一打开通路 = JS 加 .vtn-panel-is-open —— */
/*  彻底删除 .vtn-style-panel:hover 兜底，避免跨区误亮 */
/* 对居中面板：-50% X 位移变量保留（兼容旧 JS 未重算前的临时展示） */
.vtn-menu .vtn-style-panel[style*="translate(-50%"],
.vtn-menu .vtn-style-panel.vtn-style-panel-1 {
    --preserve-x: -50%;
}
/* 弹窗显示时顶级菜单项保持高亮 */
.vtn-menu .vtn-has-style-panel:hover > a:first-child,
.vtn-menu .vtn-has-style-panel > a:first-child:hover,
.vtn-menu .vtn-has-style-panel.vtn-panel-is-open > a:first-child {
    color: #4ade80 !important;
}
/* 透明 hover bridge：仅作为打开态下"菜单项底部到面板顶部"的垂直命中通道
 * 关闭态 width 强制为 0 → 完全不存在，不会抢 hover */
.vtn-menu .vtn-has-style-panel > .vtn-dropdown-bridge {
    height: 30px;
    min-width: 0;
    width: 0;                                 /* 关闭态：宽度=0，不存在 */
    background: transparent;
    z-index: 49;
    pointer-events: none !important;         /* 关闭态：不吃鼠标 */
    display: block !important;
    -webkit-user-select: auto;
    user-select: auto;
}
/* 打开态：bridge 恢复 pointer-events:auto（由 JS 精确计算 left/width 与面板对齐） */
.vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-dropdown-bridge {
    pointer-events: auto !important;
}
/* —— 唯一合法打开规则（JS 加锁）：3 条合并 —— */
/*  加上 pointer-events:auto 恢复交互，且 transition visibility 切换为
    0s linear 0s，避免鼠标已离开但 transition 延迟期间还亮着  */
.vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-style-panel,
.vtn-menu .vtn-style-panel.vtn-panel-is-open,
.vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-dropdown-bridge {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) translateX(var(--preserve-x, 0)) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s !important;
    pointer-events: auto !important;
}
/* 打开态 panel 子元素也恢复 pointer-events（video/链接都要点） */
.vtn-menu .vtn-style-panel.vtn-panel-is-open,
.vtn-menu .vtn-style-panel.vtn-panel-is-open * {
    pointer-events: auto !important;
}
/* style1 打开态的 transform 清零（JS 已用 left 像素精确对齐，不需要 -50%） */
.vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-style-panel.vtn-style-panel-1,
.vtn-menu .vtn-style-panel.vtn-style-panel-1.vtn-panel-is-open {
    transform: translate(0, 0) !important;
    --preserve-x: 0;
}
/* 大面板里 <video> 被 hover 时，不要因为 user-select:none 让浏览器取消父容器 hover */
.vtn-menu .vtn-style-panel,
.vtn-menu .vtn-style-panel * {
    -webkit-user-select: auto;
    user-select: auto;
}
.vtn-menu .vtn-style-panel .vtn-autoplay-video,
.vtn-menu .vtn-style-panel .vtn-style1-l2-card,
.vtn-menu .vtn-style-panel .vtn-style1-l2-card-inner {
    pointer-events: auto;
}
/* 防止 <video> 的 controls/shadow DOM 打断 :hover */
.vtn-menu .vtn-style-panel video {
    display: block;
    pointer-events: auto;
}
.vtn-menu .vtn-style-panel video::-webkit-media-controls {
    pointer-events: auto;
}
/* L2 视频卡片：16:10 封面 + 播放 */
.vtn-menu .vtn-style1-l2-card {
    transform: translateZ(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vtn-menu .vtn-style1-l2-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.5);
}
/* 大面板内的分类标签/卡片hover态强化 */
.vtn-menu .vtn-cat-tag:hover {
    background: rgba(34,197,94,0.18) !important;
    color: #4ade80 !important;
    transform: translateY(-1px);
}
.vtn-menu .vtn-cat-tag.vtn-cat-tag-more:hover {
    background: rgba(34,197,94,0.25) !important;
}
.vtn-menu .vtn-submenu-mixed {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    position: absolute !important;
    z-index: 2;
}
.vtn-menu .vtn-has-style-panel:hover .vtn-submenu-mixed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* ===== 样式1 大面板（VIP卡片 + 封面 + 5列分类）精细样式 ===== */
.vtn-style-panel-1 .vtn-vipcard:hover {
    border-color: rgba(34,197,94,0.35) !important;
    background: #171a1c !important;
}
.vtn-style-panel-1 .vtn-vipcard-enterprise:hover {
    border-color: rgba(59,130,246,0.4) !important;
    background: #171a1c !important;
}
.vtn-style-panel-1 .vtn-btn-green:hover {
    background: #16a34a !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34,197,94,0.45) !important;
}
.vtn-style-panel-1 .vtn-btn-blue:hover {
    background: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59,130,246,0.45) !important;
}
.vtn-style-panel-1 .vtn-style1-cover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vtn-style-panel-1 .vtn-style1-cover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}
.vtn-style-panel-1 .vtn-col-link {
    transition: color 0.15s ease;
    position: relative;
}
.vtn-style-panel-1 .vtn-col-link:hover {
    color: #4ade80 !important;
}
.vtn-style-panel-1 li:hover .vtn-col-new {
    transform: translateX(-2px);
}

/* ============================================================
 * ⚠️ 顶部导航（主站/首页/视频模板）强制锁色+去下划线（100% 根因匹配）
 * 真实 DOM 结构（_ceonova_videomenu_render_item depth=0）：
 *   div.vtn-menu
 *     > div.vtn-menu-item [vtn-has-dropdown / vtn-menu-active / vtn-has-style-panel]
 *         > a :any-link
 *             > span 菜单文字
 * 之前写 a.vtn-menu-item 完全匹配不到 → 因为 a 根本没有 .vtn-menu-item 类，类在外层 div
 * ============================================================ */
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:any-link,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:link,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:visited,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:hover,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:active,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:focus,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a:focus-visible,
/* 兜底：兜底分支仍然是 <a class="vtn-menu-item"> 结构的场景 */
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu a.vtn-menu-item:any-link,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu a.vtn-menu-item:link,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu a.vtn-menu-item:visited,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu a.vtn-menu-item:hover,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu a.vtn-menu-item:active,
/* 下拉里的二级/三级链接也一并锁 */
div.video-archive-page .vtn-dynamic-sub-item > a:any-link,
div.video-archive-page .vtn-dynamic-sub-item > a:link,
div.video-archive-page .vtn-dynamic-sub-item > a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-thickness: 0 !important;
    text-decoration-style: solid !important;
    text-decoration-color: transparent !important;
    text-underline-offset: 0 !important;
    text-underline-position: auto !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    outline: none !important;
    transition: none !important;
}
/* a 里面包着 <span> 标题，有些主题对 span 用 box-shadow 模拟下划线 → 清掉 */
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a > span,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item > a * {
    color: #ffffff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}
/* 当前选中项 .vtn-menu-active → 类加在 div.vtn-menu-item 上，不再是 a 自身 */
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item.vtn-menu-active > a,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item.vtn-menu-active > a:any-link,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item.vtn-menu-active > a:visited,
div.video-archive-page div.video-top-nav div.vtn-left div.vtn-menu > div.vtn-menu-item.vtn-menu-active > a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}
/* .vtn-menu-active::after 是选中项底部短横指示条（功能视觉），用户没要求移除：
 * 如果真的想把它也去掉（把它误认为"下划线"），把下面两行取消注释即可：
 * div.vtn-menu-item.vtn-menu-active::after { display: none !important; content: none !important; }
 */

/* ===== video-detail-page 顶部导航弹窗修复 ===== */
/* 1) 带 style-panel 的菜单项必须取消自身作为定位上下文（比 7535 行的 .video-detail-page .vtn-menu-item 更高特异性） */
.video-detail-page .vtn-menu .vtn-menu-item.vtn-has-style-panel {
    position: static !important;
}
/* 2) 确保 .vtn-menu 是唯一的 position:relative 锚点，overflow 不裁剪 */
.video-detail-page .vtn-menu {
    position: relative !important;
    overflow: visible !important;
}
/* 3) vtn-left 和 导航内所有容器 都不能有 overflow:hidden 截断弹窗 */
.video-detail-page .vtn-left,
.video-detail-page .video-top-nav,
.video-detail-page .video-top-nav-inner {
    overflow: visible !important;
}
/* 4) style-panel 弹窗 + bridge 的显隐规则与 vtn-panel-is-open 挂钩（商品页作用域补齐） */
.video-detail-page .vtn-menu .vtn-has-style-panel > .vtn-dropdown.vtn-style-panel,
.video-detail-page .vtn-menu .vtn-has-style-panel > .vtn-dropdown-bridge {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999 !important;
    pointer-events: none !important;
}
.video-detail-page .vtn-menu .vtn-has-style-panel:not(.vtn-panel-is-open) > .vtn-style-panel,
.video-detail-page .vtn-menu .vtn-has-style-panel:not(.vtn-panel-is-open) > .vtn-dropdown-bridge {
    pointer-events: none !important;
}
/* 5) JS 加锁打开态：opacity=1 + visible + pointer-events:auto */
.video-detail-page .vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-style-panel,
.video-detail-page .vtn-menu .vtn-style-panel.vtn-panel-is-open,
.video-detail-page .vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-dropdown-bridge {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) translateX(var(--preserve-x, 0)) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}
.video-detail-page .vtn-menu .vtn-style-panel.vtn-panel-is-open,
.video-detail-page .vtn-menu .vtn-style-panel.vtn-panel-is-open * {
    pointer-events: auto !important;
}
/* 6) 商品页 bridge 关闭态宽度=0 隐藏 */
.video-detail-page .vtn-menu .vtn-has-style-panel > .vtn-dropdown-bridge {
    height: 30px;
    min-width: 0;
    width: 0;
    background: transparent;
    z-index: 9998 !important;
    pointer-events: none !important;
    display: block !important;
}
.video-detail-page .vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-dropdown-bridge {
    pointer-events: auto !important;
}
/* 7) 菜单项保持高亮 */
.video-detail-page .vtn-menu .vtn-has-style-panel.vtn-panel-is-open > a:first-child,
.video-detail-page .vtn-menu .vtn-has-style-panel:hover > a:first-child {
    color: #4ade80 !important;
}
/* 8) style-1 打开态 transform 清零（JS 用 left 像素定位） */
.video-detail-page .vtn-menu .vtn-has-style-panel.vtn-panel-is-open > .vtn-style-panel.vtn-style-panel-1 {
    transform: translate(0, 0) !important;
    --preserve-x: 0;
}

/* ============================================================ */
/* ===== video detail: 自定义播放器控件 + 暂停 VIP 弹窗 ===== */
/* ============================================================ */

/* 隐藏原生 video controls（仍保留video元素原生行为以保持事件一致，仅不显示其控件UI） */
.vdp-video-hide-native-ctrls::-webkit-media-controls,
.vdp-video-hide-native-ctrls::-webkit-media-controls-enclosure,
.vdp-video-hide-native-ctrls::-webkit-media-controls-panel,
.vdp-video-hide-native-ctrls::-webkit-media-controls-play-button,
.vdp-video-hide-native-ctrls::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.video-detail-page .video-player-wrapper {
    position: relative;
    background: #000;
    overflow: hidden;
    border-radius: 8px;
    /* 与参考图一致：播放器下方自定义控件贴在播放器内底部 */
}

/* ===== 自定义控件条 ===== */
.vdp-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 16px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    pointer-events: none;
}
.vdp-controls.vdp-controls-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

/* 进度条 */
.vdp-progress-bar {
    position: relative;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 10px;
}
.vdp-progress-bar:hover { height: 6px; margin-bottom: 8px; }
.vdp-progress-buffered,
.vdp-progress-played {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 3px;
}
.vdp-progress-buffered { background: rgba(255,255,255,0.38); width: 0%; }
.vdp-progress-played {
    background: linear-gradient(90deg, #00d4aa 0%, #00b4ff 100%);
    width: 0%;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.55);
}
.vdp-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.vdp-progress-bar:hover .vdp-progress-handle,
.vdp-progress-played:hover ~ .vdp-progress-handle { transform: translate(-50%, -50%) scale(1); }

/* 控件行 */
.vdp-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}
.vdp-ctrl-btn {
    background: transparent;
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    padding: 0;
}
.vdp-ctrl-btn:hover { background: rgba(255,255,255,0.14); }
.vdp-ctrl-btn:active { transform: scale(0.94); }
.vdp-ctrl-btn.vdp-play-toggle { width: 40px; height: 40px; }
.vdp-ctrl-btn.vdp-play-toggle .vdp-icon-play { display: none; }
.vdp-ctrl-btn.vdp-play-toggle .vdp-icon-pause { display: block; }
.vdp-ctrl-btn.vdp-play-toggle.vdp-state-paused .vdp-icon-play { display: block; }
.vdp-ctrl-btn.vdp-play-toggle.vdp-state-paused .vdp-icon-pause { display: none; }

/* 倍速 */
.vdp-speed-wrap { position: relative; }
.vdp-speed-btn { width: auto; padding: 0 10px; font-weight: 600; font-size: 13px; }
.vdp-speed-menu {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: rgba(20, 26, 33, 0.96);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    min-width: 104px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 40;
}
.vdp-speed-menu.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
.vdp-speed-item {
    padding: 7px 10px;
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s, color 0.12s;
}
.vdp-speed-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.vdp-speed-item.active { color: #00d4aa; background: rgba(0, 212, 170, 0.1); }

/* 时间 */
.vdp-time {
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: rgba(255,255,255,0.9);
    padding: 0 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vdp-time-sep { opacity: 0.55; margin: 0 3px; }
.vdp-ctrl-spacer { flex: 1; }

/* 音量 */
.vdp-mute-btn { position: relative; }
.vdp-mute-btn .vdp-icon-mute { display: none; }
.vdp-mute-btn.vdp-state-muted .vdp-icon-sound { display: none; }
.vdp-mute-btn.vdp-state-muted .vdp-icon-mute { display: block; }

.vdp-volume-wrap {
    display: inline-flex;
    align-items: center;
    width: 80px;
    height: 34px;
    padding: 0 6px;
}
.vdp-volume-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 3px;
    cursor: pointer;
}
.vdp-volume-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 3px;
    background: #fff;
    width: 100%;
}
.vdp-volume-handle {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ===== 暂停 VIP 弹窗（参考图样式复刻） ===== */
.vdp-vip-modal {
    position: absolute;
    inset: 0;
    z-index: 50;
}
.vdp-vip-modal .vdp-vip-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.vdp-vip-modal .vdp-vip-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    width: 520px;
    max-width: 92%;
    background: linear-gradient(180deg, #26323c 0%, #1d2831 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 20px 28px 22px;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.vdp-vip-modal.vdp-vip-visible .vdp-vip-card {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 关闭按钮 */
.vdp-vip-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.vdp-vip-close:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* 顶部头像+文字 */
.vdp-vip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.vdp-vip-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
    background: #1f2a33;
}
.vdp-vip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vdp-vip-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.vdp-vip-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.vdp-vip-user-tip {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* 标题 */
.vdp-vip-title {
    text-align: center;
    margin: 0 0 22px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}

/* 4 个特权 */
.vdp-vip-privileges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.vdp-vip-priv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}
.vdp-vip-priv-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
}
.vdp-vip-priv-name {
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

/* CTA 行：价格标签 + 开通按钮 */
.vdp-vip-cta-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 价格标签：左蓝右紫/粉渐变，在按钮左上覆盖 */
.vdp-vip-price-tag {
    position: absolute;
    top: -10px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px 0 10px;
    border-radius: 11px 11px 11px 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(90deg, #30a2ff 0%, #c962ff 100%);
    box-shadow: 0 4px 10px rgba(201, 98, 255, 0.35);
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}
.vdp-vip-price-blue { color: #fff; margin-right: 2px; }
.vdp-vip-price-pink { color: #fff; font-weight: 800; }

/* 开通按钮：青绿渐变（参考图按钮样式） */
.vdp-vip-btn,
a.vdp-vip-btn,
.vdp-vip-btn:link,
.vdp-vip-btn:visited,
.vdp-vip-btn:active,
.vdp-vip-btn:hover,
.vdp-vip-btn:focus {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 56px;
    border-radius: 23px;
    color: #fff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #00d2b5 0%, #00b9e3 100%);
    box-shadow:
        0 6px 18px rgba(0, 210, 181, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.vdp-vip-btn:hover {
    color: #fff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 210, 181, 0.5);
    filter: brightness(1.04);
}
.vdp-vip-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 210, 181, 0.35);
    text-decoration: none !important;
    text-decoration-line: none !important;
    color: #fff !important;
}

/* 响应式：窄屏下弹窗变窄 */
@media (max-width: 768px) {
    .vdp-vip-modal .vdp-vip-card {
        width: 94%;
        padding: 18px 16px 20px;
    }
    .vdp-vip-privileges { gap: 4px; }
    .vdp-vip-priv-name { font-size: 12px; }
    .vdp-vip-priv-icon { width: 56px; height: 56px; }
    .vdp-vip-priv-icon svg { width: 38px; height: 38px; }
    .vdp-vip-title { font-size: 16px; margin-bottom: 16px; }
    .vdp-vip-price-tag { left: 6px; top: -8px; font-size: 10px; height: 20px; padding: 0 8px; }
    .vdp-vip-btn { padding: 0 38px; height: 42px; border-radius: 21px; font-size: 14px; }
    .vdp-volume-wrap { width: 60px; }
}

/* ============================================================ */
/* ===== 4K 模式：大播放器 1450×813（已在上方定义） ===== */
/* 此处仅覆盖需要额外处理的部分 */
/* ============================================================ */
.video-detail-page-4k .video-player {
    object-fit: contain;
}
/* 4K 模式保留右侧下载面板（不再隐藏） */
.video-detail-page-4k .video-detail-sidebar {
    display: block;
}
/* 4K 模式：播放器下方增加下载入口条 */
.video-detail-page-4k .vdp-4k-download-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0;
    margin-top: 16px;
    border-bottom: 1px solid #2c353e;
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 36px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-btn:hover {
    transform: translateY(-1px);
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-btn-vip {
    background: linear-gradient(90deg, #00d2b5 0%, #00b9e3 100%);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 210, 181, 0.4);
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-btn-vip:hover {
    box-shadow: 0 10px 26px rgba(0, 210, 181, 0.5);
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-btn-buy {
    background: linear-gradient(90deg, #ff6b9d 0%, #c962ff 100%);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(201, 98, 255, 0.35);
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-btn-buy:hover {
    box-shadow: 0 10px 26px rgba(201, 98, 255, 0.45);
}
.video-detail-page-4k .vdp-4k-download-bar .vdp-4k-dl-tip {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
}

/* 1080P 模式不显示 4K 下载条 */
.video-detail-page-1080p .vdp-4k-download-bar {
    display: none;
}

/* ===== 播放器内分辨率徽章（仅4K模式页面显示） ===== */
.vdp-resolution-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
/* 分辨率图标（后台配置） */
.vdp-resolution-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.vdp-resolution-icon img {
    max-height: 36px;
    max-width: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* 4K: 红橙渐变 */
.vdp-resolution-badge.vrb-4k,
.vdp-resolution-badge.vrb-default {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    box-shadow: 0 2px 10px rgba(255,107,107,0.4);
}
/* 1080P: 青绿渐变 */
.vdp-resolution-badge.vrb-1080p {
    background: linear-gradient(135deg, #3cc89c, #1ab382);
    box-shadow: 0 2px 10px rgba(60,200,156,0.4);
}
/* 720P: 蓝色渐变 */
.vdp-resolution-badge.vrb-720p {
    background: linear-gradient(135deg, #5c8cff, #3b6fe0);
    box-shadow: 0 2px 10px rgba(92,140,255,0.4);
}
.vdp-res-label {
    font-size: 16px;
    line-height: 1;
}
.vdp-res-sub {
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.5px;
    opacity: 0.95;
}

/* 水印LOGO（仅4K模式页面显示） */
.vdp-watermark {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: rgba(255,255,255,0.12);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 4px;
    pointer-events: none;
    user-select: none;
}

/* 1080P 模式不显示分辨率徽章，但显示水印 */
.video-detail-page-1080p .vdp-resolution-badge {
    display: none !important;
}

/* 小屏适配 */
@media (max-width: 1600px) {
    .video-detail-page-1080p .video-detail-left,
    .video-detail-page-4k .video-detail-left {
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    .video-detail-page-1080p .video-player-wrapper,
    .video-detail-page-4k .video-player-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
    .video-detail-main {
        flex-wrap: nowrap;
    }
    .video-detail-sidebar {
        width: 300px;
        flex-shrink: 0;
        max-width: 300px;
    }
}



/* ==========================================================
   签到弹窗 全新覆盖样式（复刻参考图2 橙色渐变+波浪+4+3日历）
   特异性 .video-float-bar 作用域内，不影响其他页面
   ========================================================== */
.checkin-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none !important;
    align-items: center;
    justify-content: center;
}
.checkin-modal.show { display: flex !important; }
.checkin-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.checkin-modal-box {
    position: relative;
    width: 760px !important;
    max-width: 95%;
    background: #fff !important;
    border-radius: 14px !important;
    overflow: visible !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28) !important;
    display: flex !important;
    flex-direction: row !important;
    animation: checkinModalIn2 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes checkinModalIn2 {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.checkin-modal-close {
    position: absolute;
    top: 12px !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    color: #fff !important;
    font-size: 20px !important;
    line-height: 30px !important;
    text-align: center;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.2s;
}
.checkin-modal-close:hover { background: rgba(255,255,255,0.55); transform: rotate(90deg); }

/* ===== 左栏 ===== */
.checkin-modal-left {
    position: relative;
    width: 380px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffb94d 0%, #ff7a2e 50%, #ff5a2a 100%);
    border-radius: 14px 0 0 14px;
    overflow: hidden;
}
.checkin-left-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* 装饰金币浮动 */
.checkin-left-bg .coin {
    position: absolute;
    width: 34px;
    height: 34px;
    opacity: 0.7;
}
.checkin-left-bg .coin-1 { top: 10px; left: 20px; animation: coinFloat1 5s ease-in-out infinite; }
.checkin-left-bg .coin-2 { top: 60px; right: 30px; width: 26px; height: 26px; animation: coinFloat2 6s ease-in-out infinite; }
.checkin-left-bg .coin-3 { top: 200px; left: -10px; width: 40px; height: 40px; animation: coinFloat3 4.5s ease-in-out infinite; }
.checkin-left-bg .coin-4 { bottom: 80px; right: -6px; width: 28px; height: 28px; animation: coinFloat4 5.5s ease-in-out infinite; }
@keyframes coinFloat1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-14px) rotate(20deg)} }
@keyframes coinFloat2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(10px) rotate(-18deg)} }
@keyframes coinFloat3 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-10px) rotate(12deg)} }
@keyframes coinFloat4 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(12px) rotate(-14deg)} }

/* 波浪分隔 */
.checkin-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 5;
    pointer-events: none;
}

/* 左栏内主要内容 */
.checkin-left-inner {
    position: relative;
    z-index: 10;
    padding: 32px 24px 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

/* 主标题 */
.checkin-congrats {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.12);
    color: #5a2a00;
}
.checkin-congrats .checkin-num {
    font-size: 26px;
    font-weight: bold;
    color: #e24a00;
    text-shadow: 0 2px 5px rgba(0,0,0,0.15);
    margin: 0 2px;
}

/* 总积分 */
.checkin-sub1 {
    text-align: center;
    font-size: 13px;
    color: rgba(90, 42, 0, 0.85);
    margin-bottom: 12px;
}
.checkin-sub1 .checkin-total-value {
    font-weight: bold;
    color: #5a2a00;
}

/* 胶囊：本周已累计签到到X天 */
.checkin-week-pill {
    align-self: center;
    background: #fff;
    color: #333;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.checkin-week-pill .checkin-week-days {
    font-weight: bold;
    color: #e24a00;
}

/* ===== 7天日历（上4下3） ===== */
.checkin-calendar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.checkin-row1, .checkin-row2 {
    display: flex;
    gap: 10px;
}
.checkin-row1 { justify-content: flex-start; }   /* 4个 */
.checkin-row2 { justify-content: center; }        /* 3个居中 */

.checkin-day {
    position: relative;
    width: 78px;
    height: 100px;
    background: rgba(80, 35, 0, 0.32);
    border-radius: 8px;
    padding: 8px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s;
}
.checkin-day:hover { transform: translateY(-3px); }

/* 已签状态 */
.checkin-day.day-checked { background: rgba(90, 30, 0, 0.55); }
.checkin-day.day-checked .day-coin { opacity: 0.8; }
.checkin-day.day-checked .day-name,
.checkin-day.day-checked .day-pts { opacity: 0.85; }
.day-check {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* 当前待签（第3天） */
.checkin-day.day-current {
    background: linear-gradient(135deg, #fff1b8 0%, #ffd666 100%);
    box-shadow: 0 4px 14px rgba(255, 160, 40, 0.45);
    color: #5a2a00;
}
.checkin-day.day-current .day-name,
.checkin-day.day-current .day-pts { color: #5a2a00; opacity: 1; }
.checkin-day.day-current .day-coin circle[fill="#ffb94d"] { fill: #ffa92e; }

/* 红色"明日"标签 */
.day-tag-red {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(255,77,79,0.4);
}

/* 斜向"双倍奖励"红角标 */
.day-tag-slant {
    position: absolute;
    top: -2px;
    left: -4px;
    background: #ff4d4f;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    transform: rotate(-15deg);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(255,77,79,0.5);
    line-height: 1.2;
}

/* 未来特殊天（第5/7天） */
.checkin-day.day-future-special .day-coin,
.checkin-day.day-future-special .day-name,
.checkin-day.day-future-special .day-pts { opacity: 0.55; }

/* 日历元素本身 */
.checkin-day .day-coin {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}
.checkin-day .day-name {
    font-size: 12px;
    color: #fff;
    margin-bottom: 2px;
}
.checkin-day .day-pts {
    font-size: 11px;
    color: rgba(255,255,255,0.9);
}

/* 底部提示 */
.checkin-tip {
    position: relative;
    z-index: 10;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    padding-top: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ===== 右栏 ===== */
.checkin-modal-right {
    flex: 1;
    background: #fff;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-radius: 0 14px 14px 0;
}
.checkin-section { }
.section-head {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.section-bar {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #2563eb;
    border-radius: 2px;
    margin-right: 8px;
}
.section-title {
    font-size: 15px;
    font-weight: bold;
    color: #222;
    flex: 1;
}
.section-more {
    font-size: 12px;
    color: #888;
    text-decoration: none;
}
.section-more:hover { color: #2563eb; }

/* 任务 */
.checkin-task-list { display: flex; flex-direction: column; gap: 10px; }
.checkin-task {
    display: flex;
    align-items: center;
    background: #fafafa;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #f0f0f0;
    transition: background 0.2s;
}
.checkin-task:hover { background: #f3f8ff; border-color: #e0ecff; }
.task-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}
.task-reward {
    font-size: 12px;
    color: #ff6b35;
    margin-right: 14px;
}
.task-btn {
    display: inline-block;
    background: #2563eb;
    color: #fff;
    padding: 5px 18px;
    border-radius: 16px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.task-btn:hover { background: #1d4ed8; }
.task-btn-done {
    background: #e0e0e0 !important;
    color: #aaa !important;
    cursor: default;
}

/* 兑换 */
.checkin-exchange { }
.exchange-item {
    position: relative;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 14px 18px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.exchange-item:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37,99,235,0.12);
}
.exchange-corner {
    position: absolute;
    top: -6px;
    right: 12px;
    background: #ff4d4f;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(255,77,79,0.4);
}
.exchange-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-bottom: 10px;
}
.exchange-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.exchange-price {
    font-size: 18px;
    color: #ff4d4f;
    font-weight: bold;
    flex: 1;
}
.exchange-stock {
    font-size: 12px;
    color: #999;
    margin-right: 12px;
}
.exchange-btn {
    background: #2563eb;
    color: #fff;
    padding: 6px 22px;
    border-radius: 18px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s;
}
.exchange-btn:hover { background: #1d4ed8; }

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
    .checkin-modal-box {
        width: 96%;
        flex-direction: column !important;
    }
    .checkin-modal-left {
        width: 100%;
        border-radius: 14px 14px 0 0;
    }
    .checkin-modal-right { border-radius: 0 0 14px 14px; }
    .checkin-row1, .checkin-row2 { justify-content: center; }
    .checkin-day { width: 68px; height: 90px; }
}
/* ===== 动态广告位 Banner（图片模式） ===== */
.svip-deal-banner {
    overflow: hidden;
    border-radius: 8px;
}
.svip-deal-banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.svip-deal-banner-link {
    display: block;
    border-radius: 8px;
}
.svip-deal-banner-link:hover img {
    opacity: 0.95;
    transition: opacity 0.2s;
}

.video-detail-banner .vdb-banner-inner {
    overflow: hidden;
    border-radius: 6px;
}
.video-detail-banner .vdb-banner-img {
    display: block;
    width: 100%;
    height: auto;
}
.video-detail-banner .vdb-banner-img-link {
    display: block;
    border-radius: 6px;
}