/* ============================================================
 * HireMe 前端样式 (从 3D-9.0.html 提取)
 * 包含：全局样式、页面样式、直播教学样式、组件样式
 * ============================================================ */

/* ===== Style Block 1 ===== */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #121212;
            color: #fff;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            padding-bottom: 70px; /* 【底部导航栏预留】为底部固定导航栏(bottom-nav)预留70px空间 */
            line-height: 1.5;
            overflow-x: hidden;
        }
        img {
            max-width: 100%;
            display: block;
        }
        button {
            cursor: pointer;
            border: none;
            outline: none;
        }
        /* ==================== 页面切换动画 ==================== */
        .page {
            display: none;
            opacity: 0;
            transform: translateX(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            min-height: 100vh;
        }
        .page.active {
            display: block;
            opacity: 1;
            transform: translateX(0);
        }

        /* 视频课程卡片悬停增强效果 */
        .video-course-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer; /* 鼠标改为手型，提示可点击 */
        }
        .video-course-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(255,107,0,0.3);
        }

        /* ==================== 全屏视频弹窗样式（新增） ==================== */
        /* 全屏遮罩层：固定定位，覆盖整个视口，z-index最高确保显示在最上层 */
        .fullscreen-video-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background-color: #000000; /* 纯黑色背景 */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        /* 激活状态：显示全屏视频 */
        .fullscreen-video-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        /* 视频容器：占满整个屏幕，自动适应宽高 */
        .fullscreen-video-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 全屏视频元素：拉伸填满整个屏幕，不留黑边 */
        .fullscreen-video {
            width: 100vw;
            height: 100vh;
            object-fit: cover; /* 裁剪填满，不留黑边 */
            pointer-events: none; /* 禁止鼠标点击操作 */
            touch-action: none; /* 禁止触摸操作 */
        }
        /* 关闭按钮：右上角小圆圈 */
        .fullscreen-close-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            color: #ffffff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
        }
        /* 激活状态：显示关闭按钮 */
        .fullscreen-video-overlay.active .fullscreen-close-btn {
            opacity: 1;
            visibility: visible;
        }
        .fullscreen-close-btn:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        /* ==================== 首页顶部横幅（透明叠加层，融入Hero首屏主视觉区） ==================== */
        .top-banner {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: auto;
            min-height: 80px;
            padding: 8px 24px;
            font-size: 14px;
            flex-wrap: wrap;
            gap: 10px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
        }
        /* 公司Logo图片容器：展示新建文件夹下的公司logo.jpg，使用object-fit保持图片比例 */
        .banner-image {
            height: 60px;
            width: 80px;
            border-radius: 10px;
            flex-shrink: 0;
            overflow: hidden; /* 隐藏溢出部分，确保圆角生效 */
        }
        .banner-image img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* 保持图片原始比例，完整显示在容器内 */
        }
        /* HireMe品牌文字区域：垂直排列品牌名和公司全称 */
        .logo {
            display: flex;
            flex-direction: column; /* 垂直排列：HireMe在上，公司名在下 */
            align-items: flex-start;
            gap: 2px;
            font-weight: 600;
            font-size: 15px;
            flex-shrink: 0;
            line-height: 1.3;
            text-shadow: 0 1px 4px rgba(0,0,0,0.5);
        }
        .logo .hireme-text {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 1px;
        }
        .logo .company-name {
            font-size: 11px;
            font-weight: 400;
            color: rgba(255,255,255,0.8);
            white-space: nowrap; /* 公司名过长时禁止换行，保持一行显示 */
        }
        .banner-content {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-left: auto;
        }
        /* 统一登录按钮：圆角边框，与翻译按钮模板一致 */
        .login-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 8px 14px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            white-space: nowrap;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: -0.2px;
            border: 2px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-family: inherit;
            text-decoration: none;
        }
        .login-btn:hover {
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.18);
        }
        /* ==================== 【新增】语言切换按钮样式 ==================== */
        .lang-toggle-btn {
            color: #000;
            background: rgba(0, 0, 0, 0.08);
            border: 2px solid rgba(0, 0, 0, 0.15);
            padding: 8px 16px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.5px;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .lang-toggle-btn:hover {
            background: rgba(0, 0, 0, 0.12);
            border-color: #000;
            transform: scale(1.04);
        }
        .lang-toggle-btn:active {
            transform: scale(0.95);
            background: rgba(0, 0, 0, 0.18);
        }
        .lang-toggle-btn .lang-icon {
            font-size: 15px;
        }
        /* ==================== 标签栏激活样式 ==================== */
        .tab-active {
            color: #fff;
            border-bottom: 2px solid #fff;
        }
        /* ==================== 卡片与通用组件 ==================== */
        .card-item {
            background: #1e1e1e;
            border-radius: 12px;
            overflow: hidden;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: transparent;
            display: flex;
            justify-content: space-around;
            padding: 6px 0;
            box-shadow: none;
            z-index: 1001; /* 高于侧边栏(900)和顶部导航(1000)，确保始终可见不被遮挡 */
        }
        .bottom-nav div {
            cursor: pointer;
            transition: color 0.2s ease;
        }
        .modal {
            z-index: 999;
        }
        /* ==================== 首页子菜单切换效果 ==================== */
        /* 【修改说明】默认所有子菜单选项透明(opacity:0)，点击标签后对应组显示(opacity:1)
           所有菜单组在一行内水平一字排开，与上级标签栏对齐 */
        .menu-group {
            transition: opacity 0.3s ease, transform 0.25s ease;
            opacity: 0; /* 【初始透明】所有子菜单初始状态均为完全透明 */
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap; /* 【不换行】确保每组内的6个选项沿水平方向一字排开 */
            align-items: center;
            gap: 6px; /* 【紧凑间距】各选项之间保持合理的水平间隔 */
            flex-shrink: 0; /* 【防止收缩】确保菜单组不被压缩变形 */
        }
        .menu-group.active {
            opacity: 1; /* 【激活可见】点击标签后对应组完全显示 */
            transform: scale(1.01); /* 【微放大】激活组有轻微放大效果，提供视觉反馈 */
        }
        .menu-group.inactive {
            opacity: 0.1; /* 【保持透明】非激活组保持完全透明，不干扰视觉 */
            pointer-events: none; /* 【禁止点击】透明选项不可交互，避免误触 */
        }
        /* ==================== 全局page-header：橙色返回栏，sticky固定在顶部 z-50 ==================== */
        .page-header {
            background: #ff6b00;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            position: sticky;
            top: 0;
            z-index: 50; /* 导航栏z-index设为60，会覆盖此返回栏 */
            min-height: 56px;
            transition: opacity 0.3s ease;
        }
        .back-btn {
            font-size: 20px;
            color: white;
            background: transparent;
        }
        /* ==================== 排名徽章样式 ==================== */
        .rank-1 {
            background: #ffd700;
            color: #000;
        }
        .rank-2 {
            background: #c0c0c0;
            color: #000;
        }
        .rank-3 {
            background: #cd7f32;
            color: #fff;
        }
        .rank-default {
            background: #333;
            color: #fff;
        }
        /* ==================== 分类标签样式 ==================== */
        .category-tab {
            padding: 8px 16px;
            border-radius: 20px;
            background: #333;
            white-space: nowrap;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .category-tab.active {
            background: #ff6b00;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 9999px;
            font-weight: 700;
            color: #ffffff;
            flex-shrink: 0;
        }
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background-color: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }
        .modal-card {
            background-color: #2D2D2D;
            border-radius: 16px;
            width: 100%;
            max-width: 520px;
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
            transform: translateY(30px) scale(0.95);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .modal-overlay.active .modal-card {
            transform: translateY(0) scale(1);
        }
        .modal-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 10;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.15);
            border: none;
            color: #ffffff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s ease;
            line-height: 1;
        }
        .modal-close-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }
        .modal-image-container {
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 16px 16px 0 0;
            background-color: #1a1a1a;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        .modal-image-container img:hover {
            transform: scale(1.05);
        }
        .modal-info-section {
            padding: 20px 24px 24px;
        }
        .modal-product-name {
            font-size: 1.3rem;
            font-weight: 700;
            color: #ffffff;
            margin: 0 0 8px;
            line-height: 1.4;
        }
        .modal-product-desc {
            font-size: 0.95rem;
            color: #b0b0b0;
            margin: 0 0 16px;
            line-height: 1.6;
        }
        .modal-meta-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .modal-price {
            font-size: 1.6rem;
            font-weight: 700;
            color: #FF6B00;
            margin: 0;
        }
        .modal-sales {
            font-size: 0.9rem;
            color: #999;
            background-color: rgba(255, 255, 255, 0.08);
            padding: 4px 12px;
            border-radius: 20px;
        }
        .modal-category-tag {
            font-size: 0.8rem;
            color: #FF6B00;
            background-color: rgba(255, 107, 0, 0.15);
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .modal-rank-display {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
            color: #ffd700;
            font-weight: 600;
            margin-bottom: 16px;
        }
        .modal-buy-btn {
            display: block;
            width: 100%;
            padding: 14px 0;
            background-color: #FF6B00;
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
            margin-top: 8px;
        }
        .modal-buy-btn:hover {
            background-color: #E55D00;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
        }
        .modal-buy-btn:active {
            transform: translateY(0) scale(0.98);
            box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
            transition: all 0.1s ease;
        }
        .product-card-interactive {
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .product-card-interactive:hover {
            background-color: #3A3A3A !important;
            border-color: rgba(255, 107, 0, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }
        .product-card-interactive:active {
            transform: scale(0.985);
            transition: transform 0.1s ease;
        }
        .category-btn-enhanced {
            transition: all 0.3s ease;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        .category-btn-enhanced:active {
            transform: scale(0.93);
            transition: transform 0.1s ease;
        }
        @media (max-width: 480px) {
            .modal-card {
                max-width: 95vw;
                max-height: 80vh;
                border-radius: 12px;
            }
            .modal-image-container {
                border-radius: 12px 12px 0 0;
            }
            .modal-info-section {
                padding: 16px 18px 20px;
            }
            .modal-product-name {
                font-size: 1.1rem;
            }
            .modal-price {
                font-size: 1.3rem;
            }
            .modal-buy-btn {
                padding: 12px 0;
                font-size: 1rem;
            }
            .modal-close-btn {
                top: 8px;
                right: 8px;
                width: 30px;
                height: 30px;
                font-size: 15px;
            }
        }
        /* ==================== 通用工具类 ==================== */
        .shadow-soft { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.02); }
        /* ==================== 鼠标空间深度交互系统 ==================== */
        [data-depth] { transition: transform 0.15s linear; will-change: transform; }
        .hero-mouse-glow { position: fixed; pointer-events: none; z-index: 3; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(237,194,0,0.07) 0%, transparent 70%); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.6s; }
        #gsapHero:hover .hero-mouse-glow { opacity: 1; }
        #gsapWorks, #gsapServices, #gsapClients, #gsapContact, .gsap-card-section { content-visibility: auto; contain-intrinsic-size: auto 600px; }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        #homePage, #topSellersPage { perspective: 1200px; position: relative; }
        #homePage .interactive-tilt, #topSellersPage .interactive-tilt { transform-style: preserve-3d; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; will-change: transform; }
        #homePage .interactive-tilt:hover, #topSellersPage .interactive-tilt:hover { box-shadow: 0 18px 40px rgba(255,255,255,0.08); }
        #topSellersPage .interactive-card { position: relative; transition: box-shadow 0.25s ease; overflow: hidden; }
        #topSellersPage .interactive-card:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.18); }

        /* 畅销榜单页面 浅色主题（与直播教学一致） */
        #topSellersPage {
            background-color: var(--lt-bg-primary);
            color: var(--lt-text-primary);
        }
        #topSellersPage .text-gray-400 {
            color: var(--lt-text-muted);
        }
        #topSellersPage .category-btn-enhanced {
            background: rgba(255, 59, 140, 0.30);
            border: 1px solid rgba(255, 59, 140, 0.45);
            color: var(--lt-text-primary);
        }
        #topSellersPage .category-btn-enhanced:hover {
            background: rgba(255, 59, 140, 0.50);
            border-color: rgba(255, 59, 140, 0.65);
        }
        #topSellersPage .category-btn-enhanced.active {
            background: #ff3b8c;
            border-color: #ff3b8c;
            color: #ffffff;
        }
        #topSellersPage .top-sellers-search-bar-wrapper {
            background: rgba(255, 59, 140, 0.08);
            border-bottom: 1px solid rgba(255, 59, 140, 0.15);
        }
        #topSellersPage .top-sellers-search-bar-inner input {
            color: var(--lt-text-primary);
        }
        #topSellersPage .top-sellers-search-bar-inner input::placeholder {
            color: var(--lt-text-muted);
        }
        #topSellersPage .search-toggle-btn-dark,
        #topSellersPage .lang-toggle-btn-dark {
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.4);
        }
        #topSellersPage .search-toggle-btn-dark:hover,
        #topSellersPage .lang-toggle-btn-dark:hover {
            background: rgba(255, 255, 255, 0.15);
        }
        /* 【畅销榜单界面浅色主题】顶部导航栏：香芋紫罗兰 → 淡玫粉色 */
        #topSellersPage header.bg-primary,
        #topSellersPage header.bg-primary\/90 {
            background: #ffb3c6 !important;
        }
        #topSellersPage header .text-white {
            color: var(--lt-text-primary) !important;
        }
        /* 分类导航栏：香芋紫罗兰 → 淡玫粉色 */
        #topSellersPage nav.bg-primary,
        #topSellersPage nav.bg-primary\/90 {
            background: rgba(255, 179, 198, 0.9) !important;
        }
        #topSellersPage nav .text-primary {
            color: var(--lt-text-primary) !important;
        }
        #topSellersPage nav .bg-white.text-primary {
            background: var(--lt-bg-white) !important;
        }
        /* 分类按钮的紫色背景：改为淡玫粉色 */
        #topSellersPage .category-btn-enhanced.bg-primary\/30 {
            background: rgba(255, 179, 198, 0.3) !important;
        }
        #topSellersPage .category-btn-enhanced.bg-primary\/50 {
            background: rgba(255, 179, 198, 0.5) !important;
        }

        /* 【畅销榜单界面浅色主题】商品卡片：深色背景 → 浅色主题变量 */
        #topSellersPage .top-sellers-card.bg-dark-card,
        #topSellersPage .bg-dark-card {
            background: var(--lt-bg-white) !important;
            border: 1px solid var(--lt-border);
        }
        /* 商品卡片内的文字颜色调整 */
        #topSellersPage .top-sellers-card h3 {
            color: var(--lt-text-primary) !important;
        }
        #topSellersPage .top-sellers-card .text-gray-400,
        #topSellersPage .top-sellers-card p.text-gray-400 {
            color: var(--lt-text-muted) !important;
        }
        #topSellersPage .top-sellers-card .text-gray-500 {
            color: var(--lt-text-secondary) !important;
        }
        /* 商品卡片价格：紫色 → 亮玫粉色 */
        #topSellersPage .top-sellers-card .text-primary {
            color: #ff3b8c !important;
        }
        /* 排名徽章保持原颜色（金银铜），但调整边框/阴影适配浅色 */
        #topSellersPage .top-sellers-card .rank-badge-mini {
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        /* 评分徽章：半透明黑 → 半透明灰色（适配浅色背景） */
        #topSellersPage .top-sellers-card .bg-black\/50 {
            background: rgba(0, 0, 0, 0.35) !important;
        }

        /* 【畅销榜单界面浅色主题】加入购物车按钮：紫色 → 亮玫粉色 */
        #topSellersPage .top-sellers-card-btn,
        #topSellersPage .top-sellers-card-btn.bg-primary,
        #topSellersPage .top-sellers-card-btn.bg-primary.hover\:bg-primary-hover {
            background: #ff3b8c !important;
            color: #ffffff !important;
            border: 1px solid #ff3b8c;
        }
        #topSellersPage .top-sellers-card-btn:hover {
            background: #e02e76 !important;
            border-color: #e02e76;
        }
        /* 加载状态的紫色边框：改为亮玫粉色 */
        #topSellersPage .border-primary,
        #topSellersPage .border-t-2.border-b-2.border-primary {
            border-color: #ff3b8c !important;
        }

        /* 畅销榜单页面卡片交互动画：与首页交互样式一致 */
        .top-sellers-card {
            background: var(--lt-bg-white);
            border: 1px solid var(--lt-border);
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .top-sellers-card:hover {
            box-shadow: 0 12px 32px rgba(0,0,0,0.12);
            border-color: rgba(255, 59, 140, 0.4);
        }
        .top-sellers-card:active {
            box-shadow: 0 4px 12px rgba(0,0,0,0.18);
        }
        .top-sellers-card-btn {
            position: relative;
            overflow: hidden;
        }
        .rank-badge-mini {
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .divider-center {
            position: relative;
        }
        .divider-center::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--accent);
        }
        /* ==================== 滚动淡入动画 ==================== */
        .fade-in-element {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .fade-in-element.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .slide-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        .slide-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* ==================== 【核心修改】统一全局导航栏样式 ==================== */
        /* 导航栏固定在顶部，z-index=60高于返回栏，实现覆盖效果 */
        .page-navbar {
            background: #ffffff !important; /* 强制白色背景 */
            color: #000000 !important; /* 强制黑色文字 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 0 !important; /* 固定在页面最顶部 */
            z-index: 60 !important; /* 高于返回栏的z-index=50 */
            font-family: 'Inter', sans-serif;
            transition: all 0.3s ease;
        }
        /* 导航链接统一样式 */
        .page-navbar .nav-link {
            color: #000000 !important; /* 黑色文字 */
            font-weight: 500;
            text-decoration: none;
            padding: 8px 0;
            transition: color 0.2s ease;
            white-space: nowrap;
        }
        .page-navbar .nav-link:hover {
            color: #ff6b00 !important; /* 悬停橙色 */
        }
        .page-navbar .nav-link.active {
            color: #ff6b00 !important; /* 激活状态橙色 */
            font-weight: 600;
            border-bottom: 2px solid #ff6b00;
        }
        /* 导航栏内的语言切换按钮样式 */
        .page-navbar .lang-toggle-btn {
            color: #000;
            background: rgba(0, 0, 0, 0.08);
            border: 2px solid rgba(0, 0, 0, 0.15);
        }
        .page-navbar .lang-toggle-btn:hover {
            background: rgba(0, 0, 0, 0.12);
            border-color: #000;
        }
        /* ==================== 响应式导航栏与面包屑横幅通用样式 ==================== */
        .breadcrumb-banner {
            position: relative;
            height: 280px;
            overflow: hidden;
            margin-top: 0; /* 导航栏覆盖返回栏后，面包屑直接接导航栏 */
        }
        .breadcrumb-banner .banner-bg {
            position: absolute;
            inset: 0;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        .breadcrumb-banner .banner-overlay {
            position: absolute;
            inset: 0;
            background: rgba(20, 61, 102, 0.9); /* 主色调 90% 不透明度 */
            z-index: 1;
        }
        .breadcrumb-banner .banner-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding: 0 2rem;
        }
        .breadcrumb-banner .breadcrumb-path {
            color: rgba(255,255,255,0.8);
            font-size: 0.9rem;
        }
        .breadcrumb-banner .breadcrumb-path a {
            color: white;
            text-decoration: none;
        }
        .breadcrumb-banner .scroll-down-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }
        .breadcrumb-banner .scroll-down-btn:hover {
            background: rgba(255,255,255,0.4);
        }
        /* 移动端汉堡菜单样式 */
        .mobile-menu {
            display: none;
        }
        @media (max-width: 767px) {
            .page-navbar .desktop-nav-links {
                display: none;
            }
            .mobile-menu {
                display: block;
            }
            .mobile-menu-links {
                display: none;
                flex-direction: column;
                background: white;
                padding: 1rem;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 60;
            }
            .mobile-menu-links.open {
                display: flex;
            }
            .mobile-menu-links a {
                padding: 12px 16px;
                color: #000;
                text-decoration: none;
                border-bottom: 1px solid #f0f0f0;
            }
            .mobile-menu-links a:hover {
                background: #f8f8f8;
                color: #ff6b00;
            }
        }
        @media (min-width: 768px) {
            .mobile-menu {
                display: none;
            }
            .page-navbar .desktop-nav-links {
                display: flex;
            }
            .mobile-menu-links {
                display: none !important;
            }
        }
        /* ==================== Core Business 页面通用样式 ==================== */
        .core-business-card-hover {
            transition: all 0.3s ease;
        }
        .core-business-card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .core-business-hero-overlay {
            background: linear-gradient(rgba(20, 61, 102, 0.85), rgba(20, 61, 102, 0.9));
        }
        .core-business-nav-shadow {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        .core-business-sticky-nav {
            position: sticky;
            top: 56px;
            z-index: 40;
        }
        /* ==================== Expert Team 页面样式 ==================== */
        .orange-photo {
            background: linear-gradient(135deg, #FFB380 0%, #FFC499 100%);
            transition: all 0.4s ease;
        }
        .team-card-hover:hover .orange-photo {
            background: linear-gradient(135deg, #FFC499 0%, #FFD5B3 100%);
        }
        .user-icon {
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.4s ease;
        }
        .team-card-hover:hover .user-icon {
            color: rgba(255, 255, 255, 0.9);
            transform: scale(1.1);
        }
        .team-card-hover {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .team-card-hover:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 20px 25px -5px rgba(255, 107, 0, 0.1), 0 10px 10px -5px rgba(255, 107, 0, 0.04);
        }
        .team-border-gradient {
            position: relative;
            border-radius: 0.75rem;
        }
        .team-border-gradient::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, #FFB380, #FF6B00);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .team-border-gradient:hover::before {
            opacity: 1;
        }
        .team-nav-blur {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .expert-sticky-nav {
            position: sticky;
            top: 56px;
            z-index: 40;
        }
        /* ==================== Contact Us 页面样式 ==================== */
        .contact-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .contact-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.08), 0 10px 15px -6px rgba(0, 0, 0, 0.04);
        }
        .contact-input {
            transition: all 0.3s ease;
        }
        .contact-input:focus {
            transform: scale(1.01);
        }
        .contact-submit-btn {
            background: linear-gradient(135deg, #6F61A8 0%, #8B7EC8 100%);
            transition: all 0.3s ease;
        }
        .contact-submit-btn:hover {
            background: linear-gradient(135deg, #5D5096 0%, #7A6DB8 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(111, 97, 168, 0.3);
        }
        .footer-social-icon {
            transition: all 0.3s ease;
        }
        .footer-social-icon:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 6px 15px rgba(111, 97, 168, 0.3);
        }
        .contact-sticky-nav {
            position: sticky;
            top: 56px;
            z-index: 40;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        /* ==================== Branch Offices 页面专属样式 ==================== */
        .hexagon {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        .hexagon-shadow {
            filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .branch-sticky-nav {
            position: sticky;
            top: 56px;
            z-index: 40;
        }
        /* ==================== 资源合作页面专属样式（作用域限制在 #resourceCooperationPage 内） ==================== */
        #resourceCooperationPage {
            background-color: #ffffff;
            color: #111827;
            font-family: 'Inter', sans-serif;
            line-height: 1.5;
        }
        /* 【修复说明】原通用重置 #resourceCooperationPage * 会覆盖统一导航栏(page-navbar)的 Tailwind 样式，
           导致资源合作页面的导航栏与其他五个页面(公司简介/核心业务/专家团队/分支机构/联系我们)显示不一致。
           现改为仅对 rc- 前缀的内容区域应用重置，排除 page-navbar、breadcrumb-banner 和 page-header，
           确保六个页面的导航栏外观和功能完全一致，实现跨页面联动。 */
        #resourceCooperationPage .rc-hero,
        #resourceCooperationPage .rc-hero *,
        #resourceCooperationPage .rc-mission-section,
        #resourceCooperationPage .rc-mission-section *,
        #resourceCooperationPage .rc-container,
        #resourceCooperationPage .rc-container *,
        #resourceCooperationPage .rc-partner-section,
        #resourceCooperationPage .rc-partner-section *,
        #resourceCooperationPage .rc-footer,
        #resourceCooperationPage .rc-footer * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #resourceCooperationPage .page-header {
            background: #ff6b00;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        #resourceCooperationPage .rc-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 32px;
        }
        #resourceCooperationPage .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #1E2A5E 0%, #2A3F7E 100%);
            color: white;
            font-weight: 600;
            padding: 12px 28px;
            border-radius: 40px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            font-size: 0.95rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        #resourceCooperationPage .btn-primary:hover {
            background: linear-gradient(135deg, #15234d 0%, #1f3368 100%);
            transform: translateY(-2px);
            box-shadow: 0 12px 20px -10px rgba(30, 42, 94, 0.3);
        }
        #resourceCooperationPage .btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            border: 2px solid #1E2A5E;
            color: #1E2A5E;
            font-weight: 600;
            padding: 10px 26px;
            border-radius: 40px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        #resourceCooperationPage .btn-outline:hover {
            background: #1E2A5E;
            color: white;
            transform: translateY(-2px);
        }
        #resourceCooperationPage .rc-navbar {
            padding: 20px 0;
            border-bottom: 1px solid #f0f2f5;
            background: rgba(255,255,255,0.98);
            position: sticky;
            top: 56px;
            z-index: 40;
        }
        #resourceCooperationPage .rc-nav-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        #resourceCooperationPage .rc-logo h2 {
            font-size: 1.8rem;
            font-weight: 800;
            background: linear-gradient(130deg, #1E2A5E, #3B5BA5);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.5px;
        }
        #resourceCooperationPage .rc-logo span {
            font-size: 0.8rem;
            font-weight: 500;
            color: #6c757d;
            display: block;
            letter-spacing: 0;
        }
        #resourceCooperationPage .rc-nav-links {
            display: flex;
            gap: 32px;
            align-items: center;
        }
        #resourceCooperationPage .rc-nav-links a {
            text-decoration: none;
            font-weight: 500;
            color: #2c3e50;
            transition: color 0.2s;
            font-size: 0.95rem;
        }
        #resourceCooperationPage .rc-nav-links a:hover,
        #resourceCooperationPage .rc-nav-links a.rc-active {
            color: #1E2A5E;
            font-weight: 600;
        }
        #resourceCooperationPage .rc-hero {
            padding: 60px 0 50px;
            background: linear-gradient(120deg, #F9FAFE 0%, #FFFFFF 100%);
        }
        #resourceCooperationPage .rc-hero-grid {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 48px;
        }
        #resourceCooperationPage .rc-hero-content {
            flex: 1;
        }
        #resourceCooperationPage .rc-hero-badge {
            background: #EFF3FF;
            color: #1E2A5E;
            border-radius: 40px;
            padding: 6px 16px;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 20px;
        }
        #resourceCooperationPage .rc-hero-content h1 {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #0A1C3A;
        }
        #resourceCooperationPage .rc-hero-content p {
            font-size: 1.125rem;
            color: #4a5568;
            margin-bottom: 32px;
            max-width: 550px;
        }
        #resourceCooperationPage .rc-hero-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        #resourceCooperationPage .rc-hero-stats {
            flex: 0.8;
            background: white;
            padding: 32px;
            border-radius: 28px;
            box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
            border: 1px solid #eef2f6;
        }
        #resourceCooperationPage .rc-stats-item {
            margin-bottom: 24px;
        }
        #resourceCooperationPage .rc-stats-number {
            font-size: 2rem;
            font-weight: 800;
            color: #1E2A5E;
        }
        #resourceCooperationPage .rc-global-badge {
            background: #eef2ff;
            border-radius: 30px;
            padding: 8px 16px;
            font-size: 0.8rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        #resourceCooperationPage .rc-mission-section {
            padding: 60px 0;
            background: #FFFFFF;
        }
        #resourceCooperationPage .rc-mission-card {
            background: #F8FAFE;
            border-radius: 32px;
            padding: 48px;
            text-align: center;
            border: 1px solid #eef2f8;
        }
        #resourceCooperationPage .rc-mission-card h3 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 20px;
        }
        #resourceCooperationPage .rc-section-title {
            text-align: center;
            font-size: 2.2rem;
            font-weight: 800;
            margin-bottom: 16px;
            color: #0A1C3A;
        }
        #resourceCooperationPage .rc-section-sub {
            text-align: center;
            color: #5b6e8c;
            max-width: 650px;
            margin: 0 auto 48px;
            font-size: 1.1rem;
        }
        #resourceCooperationPage .rc-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
            margin-top: 20px;
        }
        #resourceCooperationPage .rc-service-card {
            background: white;
            border-radius: 28px;
            padding: 32px 24px;
            box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            border: 1px solid #edf2f7;
        }
        #resourceCooperationPage .rc-service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.12);
            border-color: #dce5f0;
        }
        #resourceCooperationPage .rc-card-icon {
            font-size: 2.6rem;
            color: #1E2A5E;
            margin-bottom: 20px;
        }
        #resourceCooperationPage .rc-service-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 12px;
        }
        #resourceCooperationPage .rc-service-card p {
            color: #5c6f87;
            margin-bottom: 16px;
        }
        #resourceCooperationPage .rc-badge-china {
            background: #FFEAD2;
            color: #C25D00;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 40px;
            display: inline-block;
            margin-top: 12px;
        }
        #resourceCooperationPage .rc-two-col-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            margin: 60px 0;
        }
        #resourceCooperationPage .rc-info-card {
            background: #FFFFFF;
            border-radius: 28px;
            padding: 32px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
            border: 1px solid #eef2f8;
        }
        #resourceCooperationPage .rc-info-card h3 {
            font-size: 1.6rem;
            margin-bottom: 24px;
            font-weight: 700;
        }
        #resourceCooperationPage .rc-user-list {
            list-style: none;
        }
        #resourceCooperationPage .rc-user-list li {
            margin-bottom: 16px;
            display: flex;
            gap: 12px;
            align-items: center;
        }
        #resourceCooperationPage .rc-user-list i {
            color: #1E2A5E;
            font-size: 1.2rem;
            width: 28px;
        }
        #resourceCooperationPage .rc-advantage-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        #resourceCooperationPage .rc-advantage-item {
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }
        #resourceCooperationPage .rc-partner-section {
            background: linear-gradient(145deg, #F2F5FC 0%, #FFFFFF 100%);
            border-radius: 48px;
            margin: 60px 0 80px;
            padding: 56px 48px;
        }
        #resourceCooperationPage .rc-partner-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: start;
        }
        #resourceCooperationPage .rc-partner-benefits h3 {
            font-size: 1.9rem;
            font-weight: 800;
            margin-bottom: 20px;
        }
        #resourceCooperationPage .rc-partner-benefits p {
            margin-bottom: 24px;
            color: #2c3e50;
        }
        #resourceCooperationPage .rc-benefits-list {
            list-style: none;
            margin: 28px 0;
        }
        #resourceCooperationPage .rc-benefits-list li {
            margin: 16px 0;
            display: flex;
            gap: 12px;
            align-items: center;
        }
        #resourceCooperationPage .rc-benefits-list i {
            color: #1E2A5E;
            font-weight: 700;
        }
        #resourceCooperationPage .rc-partner-form {
            background: white;
            padding: 32px;
            border-radius: 32px;
            box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.08);
        }
        #resourceCooperationPage .rc-form-group {
            margin-bottom: 20px;
        }
        #resourceCooperationPage .rc-form-group input,
        #resourceCooperationPage .rc-form-group select,
        #resourceCooperationPage .rc-form-group textarea {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid #e2e8f0;
            border-radius: 60px;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            transition: 0.2s;
        }
        #resourceCooperationPage .rc-form-group textarea {
            border-radius: 24px;
            resize: vertical;
        }
        #resourceCooperationPage .rc-form-group input:focus,
        #resourceCooperationPage .rc-form-group select:focus,
        #resourceCooperationPage .rc-form-group textarea:focus {
            outline: none;
            border-color: #1E2A5E;
            box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.1);
        }
        #resourceCooperationPage .rc-btn-submit {
            background: #1E2A5E;
            color: white;
            border: none;
            width: 100%;
            padding: 14px;
            border-radius: 40px;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        #resourceCooperationPage .rc-btn-submit:hover {
            background: #102044;
            transform: scale(0.98);
        }
        #resourceCooperationPage .rc-lang-note {
            text-align: right;
            font-size: 0.75rem;
            color: #7f8c8d;
            margin-top: 8px;
        }
        #resourceCooperationPage .rc-offline-banner {
            background: linear-gradient(105deg, #F1F4FA 0%, #fff 100%);
            border-radius: 36px;
            padding: 36px 32px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 60px;
        }
        #resourceCooperationPage .rc-offline-banner h3 {
            font-size: 1.7rem;
            font-weight: 800;
        }
        #resourceCooperationPage .rc-offline-banner p {
            max-width: 600px;
            margin-top: 12px;
        }
        #resourceCooperationPage .rc-footer {
            background: #0A1122;
            color: #cdd9f4;
            padding: 48px 0 24px;
            margin-top: 40px;
        }
        #resourceCooperationPage .rc-footer-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 32px;
        }
        #resourceCooperationPage .rc-footer-copyright {
            text-align: center;
            padding-top: 24px;
            border-top: 1px solid #1f2a44;
            font-size: 0.8rem;
        }
        @media (max-width: 900px) {
            #resourceCooperationPage .rc-hero-grid,
            #resourceCooperationPage .rc-two-col-section,
            #resourceCooperationPage .rc-partner-wrapper {
                grid-template-columns: 1fr;
            }
            #resourceCooperationPage .rc-nav-links {
                display: none;
            }
            #resourceCooperationPage .rc-hero-content h1 {
                font-size: 2.2rem;
            }
            #resourceCooperationPage .rc-container {
                padding: 0 24px;
            }
            #resourceCooperationPage .rc-partner-section {
                padding: 32px 24px;
            }
        }
        @media (max-width: 640px) {
            #resourceCooperationPage .btn-primary,
            #resourceCooperationPage .btn-outline {
                padding: 10px 20px;
            }
        }
        /* 悬浮客服按钮样式 */
        .whatsapp-float {
            position: fixed;
            bottom: 90px;
            right: 20px;
            z-index: 2000;
            width: 56px;
            height: 56px;
            background-color: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
            transition: transform 0.2s;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }
        .whatsapp-float:hover {
            transform: scale(1.1);
        }
        /* ==================== 【新增】全局移动端响应式优化 ==================== */
        @media (max-width: 768px) {
            /* 顶部横幅在移动端调整高度和间距 */
            /* ==================== 移动端：首页Hero叠加层主标签栏 ==================== */
            /* 【说明】移动端缩小间距但仍保持宽松，宽度全宽与横幅对齐 */
            #heroOverlayWrapper > header.flex {
                top: 80px; /* 【移动端间距】与顶部横幅之间预留适当空间 */
                left: 0;
                right: 0;
                width: 100%; /* 【全宽对齐】与横幅宽度一致 */
                padding: 0; /* 【紧凑布局】仅保留文字区域 */
                gap: 8px; /* 【标签间距】移动端标签之间保持合理间隔 */
            }
            #heroOverlayWrapper > header.flex button {
                font-size: 13px; /* 【标签字号】移动端适当缩小 */
                padding: 0; /* 【紧凑布局】按钮无多余内边距 */
            }
            /* ==================== 移动端：子菜单区域 ==================== */
            /* 【说明】移动端子菜单宽度与顶部横幅一致，取消滚动条，图标适当缩小但仍清晰可见 */
            #heroOverlayWrapper > #menuWrapper {
                top: 125px; /* 【移动端间距】与标签栏之间保持合理间隔 */
                left: 0;
                right: 0;
                width: 100%; /* 【全宽对齐】与横幅宽度一致 */
                padding: 0; /* 【紧凑布局】仅保留内容区域 */
                gap: 6px; /* 【分组间距】移动端组间间隔缩小 */
                /* 【取消滚动条】移动端也不显示滚动条 */
            }
            #heroOverlayWrapper > #menuWrapper .menu-group .w-14 {
                width: 34px; /* 【移动端图标】34px保证全部图标可见 */
                height: 34px;
                font-size: 0.75rem;
            }
            #heroOverlayWrapper > #menuWrapper .menu-group .text-xs {
                font-size: 0.5rem; /* 【移动端文字】字号缩小，与图标匹配 */
            }
            #heroOverlayWrapper > #menuWrapper .menu-group {
                gap: 5px; /* 【移动端选项间距】缩小间距 */
            }
            #heroOverlayWrapper > #menuWrapper .menu-group > div {
                width: 50px; /* 【移动端菜单项宽度】统一宽度，保证间隔对齐 */
            }
            #heroOverlayWrapper > #menuWrapper .menu-group > div > p {
                margin-top: 3px !important; /* 【移动端图标文字间距】缩小 */
                max-width: 50px; /* 【移动端文字最大宽度】允许上下行折行 */
                white-space: normal; /* 【移动端允许换行】文字可上下行显示 */
                line-height: 1.2;
            }
            /* ==================== 移动端超小屏幕（<480px）进一步缩小 ==================== */
            @media (max-width: 480px) {
                #heroOverlayWrapper > header.flex {
                    top: 70px;
                    left: 0;
                    right: 0;
                    width: 100%;
                    padding: 0; /* 【紧凑布局】仅保留文字区域 */
                    gap: 4px;
                }
                #heroOverlayWrapper > header.flex button {
                    font-size: 11px;
                    padding: 0; /* 【紧凑布局】按钮无多余内边距 */
                }
                /* 子菜单区域在超小屏幕进一步缩小，不显示滚动条 */
                #heroOverlayWrapper > #menuWrapper {
                    top: 110px;
                    left: 0;
                    right: 0;
                    width: 100%;
                    padding: 0; /* 【紧凑布局】仅保留内容区域 */
                    gap: 4px;
                    /* 【取消滚动条】超小屏也不显示滚动条 */
                }
                #heroOverlayWrapper > #menuWrapper .menu-group .w-14 {
                    width: 28px; /* 【超小屏图标】28px保证全部图标可见 */
                    height: 28px;
                    font-size: 0.65rem;
                }
                #heroOverlayWrapper > #menuWrapper .menu-group .text-xs {
                    font-size: 0.45rem;
                }
                #heroOverlayWrapper > #menuWrapper .menu-group {
                    gap: 3px;
                }
                #heroOverlayWrapper > #menuWrapper .menu-group > div {
                    width: 42px; /* 【超小屏菜单项宽度】统一宽度，保证间隔对齐 */
                }
                #heroOverlayWrapper > #menuWrapper .menu-group > div > p {
                    margin-top: 2px !important;
                    max-width: 42px; /* 【超小屏文字最大宽度】允许上下行折行 */
                    white-space: normal;
                    line-height: 1.15;
                }
            }
            .top-banner {
                height: auto;
                min-height: 60px;
                padding: 6px 10px;
                gap: 6px;
                flex-wrap: wrap;
            }
            .banner-image {
                height: 40px;
                width: 55px;
                border-radius: 6px;
            }
            .logo {
                font-size: 12px;
                gap: 2px;
            }
            .logo .hireme-text {
                font-size: 16px;
            }
            .logo .company-name {
                font-size: 9px;
            }
            .banner-content {
                gap: 8px;
                margin-left: 0;
                width: 100%;
                justify-content: flex-end;
            }
            .login-btn {
                padding: 6px 14px;
                font-size: 12px;
            }
            /* 语言切换按钮在移动端缩小 */
            .lang-toggle-btn {
                padding: 6px 12px;
                font-size: 11px;
                gap: 4px;
            }
            .lang-toggle-btn .lang-icon {
                font-size: 13px;
            }
            /* 旧首页标签栏/子菜单规则已由 #heroOverlayWrapper 覆盖，此处保留为空以兼容 */
            /* 首页卡片在移动端调整为单列 */
            #homePage .grid.grid-cols-2 {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            #homePage .card-item.flex.h-72 {
                height: 180px;
            }
            #homePage .card-item .w-2\/3 {
                width: 45%;
            }
            #homePage .card-item .p-4 {
                padding: 10px;
            }
            #homePage .card-item h4 {
                font-size: 13px;
            }
            #homePage .card-item .text-sm {
                font-size: 11px;
            }
            #homePage .card-item .text-lg {
                font-size: 14px;
            }
            #homePage .card-item button {
                font-size: 11px;
                padding: 6px 10px;
            }
            /* 底部导航在移动端调整 */
            .bottom-nav {
                padding: 6px 0;
            }
            .bottom-nav div i {
                font-size: 18px;
            }
            .bottom-nav div p {
                font-size: 10px;
            }
            /* page-header在移动端调整 */
            .page-header {
                padding: 12px;
                gap: 10px;
                min-height: 48px;
            }
            .page-header h1 {
                font-size: 16px;
            }
            .back-btn {
                font-size: 18px;
            }
            /* 畅销榜单页面移动端调整 */
            #topSellersPage .top-sellers-card {
                border-radius: 12px;
                background: var(--lt-bg-white);
            }
            #topSellersPage .top-sellers-card h3 {
                font-size: 12px;
                color: var(--lt-text-primary);
            }
            #topSellersPage .top-sellers-card .text-xs {
                font-size: 10px;
                color: var(--lt-text-muted);
            }
            #topSellersPage .category-tab {
                padding: 6px 12px;
                font-size: 12px;
            }
            /* 公司简介页面移动端调整 */
            #companyProfilePage .relative.h-\[450px\] {
                height: 280px;
            }
            #companyProfilePage .container.mx-auto.px-4.py-16 {
                padding-top: 24px;
                padding-bottom: 24px;
            }
            #companyProfilePage .grid.md\\:grid-cols-2 {
                grid-template-columns: 1fr;
            }
            /* 核心业务页面移动端调整 */
            #coreBusinessPage .relative.h-\[500px\] {
                height: 300px;
            }
            #coreBusinessPage .grid.grid-cols-1.md\\:grid-cols-2 {
                gap: 16px;
            }
            /* 专家团队页面移动端调整 */
            #expertTeamPage .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            /* 联系我们页面移动端调整 */
            #contactPage .grid.md\\:grid-cols-2 {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            #contactPage .p-8.md\\:p-12 {
                padding: 20px;
            }
            /* 分支机构页面移动端调整 */
            #branchOfficesPage .hexagon {
                grid-template-columns: 1fr;
                gap: 16px;
                /* 缩小六边形在移动端的尺寸 */
            }
            #branchOfficesPage .grid.grid-cols-2.md\\:grid-cols-3.lg\\:grid-cols-4 {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            /* 全局容器padding调整 */
            .container.mx-auto.px-4 {
                padding-left: 12px;
                padding-right: 12px;
            }
            /* 页脚在移动端调整 */
            footer .grid.grid-cols-1.md\\:grid-cols-4 {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            footer .flex.flex-wrap.gap-8 {
                gap: 16px;
                flex-direction: column;
                align-items: center;
            }
        }
        /* 超小屏幕（320px-480px）额外优化 */
        @media (max-width: 480px) {
            .top-banner {
                padding: 4px 8px;
                gap: 4px;
                min-height: 50px;
            }
            .banner-image {
                height: 30px;
                width: 40px;
            }
            .logo {
                font-size: 10px;
                gap: 1px;
            }
            .logo .hireme-text {
                font-size: 14px;
            }
            .logo .company-name {
                font-size: 8px;
            }
            .banner-content {
                gap: 6px;
                width: 100%;
                justify-content: flex-end;
                flex-wrap: wrap;
            }
            .lang-toggle-btn {
                padding: 5px 10px;
                font-size: 10px;
                border-radius: 30px;
            }
            .login-btn {
                padding: 5px 10px;
                font-size: 10px;
                border-radius: 30px;
            }
            /* 首页卡片在超小屏幕进一步优化 */
            #homePage .card-item.flex.h-72 {
                height: 160px;
                flex-direction: row;
            }
            #homePage .card-item .w-2\/3 {
                width: 40%;
            }
            #homePage .card-item h4 {
                font-size: 12px;
            }
            #homePage .card-item .text-sm {
                font-size: 10px;
            }
            #homePage .card-item button {
                font-size: 10px;
                padding: 5px 8px;
            }
            /* 底部导航文字缩小 */
            .bottom-nav div p {
                font-size: 9px;
            }
            .bottom-nav div i {
                font-size: 16px;
            }
        }
        /* ==================== 刷新按钮样式（用于首页三个板块） ==================== */
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

/* ==================== 【P1】错误边界 Toast 样式 ==================== */
.error-fallback-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    animation: errorToastIn 0.3s ease;
}
.error-fallback-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1E293B;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    max-width: 90vw;
}
.error-fallback-refresh {
    background: #6F61A8;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.error-fallback-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
}
@keyframes errorToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==================== 【P1】懒加载占位样式 ==================== */
img.lazy:not(.lazy-loaded),
video.lazy:not(.lazy-loaded) {
    background: #f1f5f9;
    min-height: 200px;
    transition: opacity 0.3s ease;
}
img.lazy-loaded {
    opacity: 1;
}

/* ==================== 【P1】CDN 资源预连接提示 ==================== */
/* 在 HTML 中已添加 link rel="preconnect" 标签 */
        .section-header h3 {
            margin: 0;
        }
        .refresh-btn {
            margin-left: 8px;
            width: 30px;
            height: 30px;
            background: transparent;
            color: #ffffff;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: transform 0.18s ease, background 0.18s ease;
            cursor: pointer;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .refresh-btn:hover {
            transform: scale(1.06);
            background: rgba(255,255,255,0.03);
        }
        .refresh-btn:active {
            transform: scale(0.95);
        }
        .refresh-btn i {
            transition: transform 0.4s ease;
            display: inline-block;
        }
        .refresh-btn.spin i {
            animation: hm-rotate 0.7s linear;
        }
        @keyframes hm-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* ==================== 商品详情页样式 ==================== */
        #productDetailPage {
            background: #121212;
            color: #fff;
            min-height: 100vh;
            padding-bottom: 80px;
        }
        #productDetailPage.detail-fullscreen {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 1000;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 100vh;
            min-height: 100dvh;
            padding-bottom: 80px;
            transition: none;
            animation: detailSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @keyframes detailSlideIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes tsSlideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 详情页顶部返回栏 */
        .detail-header {
            background: #ff6b00;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            position: sticky;
            top: 0;
            z-index: 50;
            min-height: 48px;
        }
        .detail-header .back-btn-detail {
            font-size: 20px;
            color: #fff;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 4px;
        }
        .detail-header h1 {
            font-size: 0.95rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
        .detail-header .detail-header-icons {
            display: flex;
            gap: 12px;
        }
        .detail-header .detail-header-icons button {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            position: relative;
        }
        .detail-header .cart-badge {
            position: absolute;
            top: -6px;
            right: -8px;
            background: #fff;
            color: #ff6b00;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        /* 图片轮播区 */
        .detail-carousel {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background: #1a1a1a;
            user-select: none;
            -webkit-user-select: none;
        }
        .detail-carousel .carousel-track {
            display: flex;
            height: 100%;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .detail-carousel .carousel-slide {
            min-width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .detail-carousel .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .detail-carousel .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            color: #fff;
            border: none;
            font-size: 16px;
            cursor: pointer;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .detail-carousel .carousel-arrow:hover { background: rgba(0,0,0,0.7); }
        .detail-carousel .carousel-arrow.prev { left: 8px; }
        .detail-carousel .carousel-arrow.next { right: 8px; }
        .detail-carousel .carousel-dots {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
            z-index: 5;
        }
        .detail-carousel .carousel-dots .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: all 0.2s;
        }
        .detail-carousel .carousel-dots .dot.active {
            background: #ff6b00;
            width: 20px;
            border-radius: 4px;
        }
        /* 缩略图导航 */
        .detail-thumbnails {
            display: flex;
            gap: 8px;
            padding: 10px 16px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .detail-thumbnails::-webkit-scrollbar { display: none; }
        .detail-thumbnails .thumb {
            width: 56px;
            height: 56px;
            border-radius: 8px;
            border: 2px solid transparent;
            flex-shrink: 0;
            cursor: pointer;
            overflow: hidden;
            transition: border-color 0.2s;
        }
        .detail-thumbnails .thumb.active { border-color: #ff6b00; }
        .detail-thumbnails .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* 商品基本信息区 */
        .detail-info-section {
            padding: 16px;
        }
        .detail-info-section .detail-price-row {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
        }
        .detail-info-section .detail-current-price {
            font-size: 1.6rem;
            font-weight: 800;
            color: #ff6b00;
        }
        .detail-info-section .detail-original-price {
            font-size: 0.9rem;
            color: #777;
            text-decoration: line-through;
        }
        .detail-info-section .detail-discount {
            font-size: 0.75rem;
            background: rgba(255,107,0,0.15);
            color: #ff6b00;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 600;
        }
        .detail-info-section .detail-product-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 4px;
            line-height: 1.4;
        }
        .detail-info-section .detail-product-desc {
            font-size: 0.85rem;
            color: #999;
            margin-bottom: 8px;
        }
        .detail-info-section .detail-sales-info {
            font-size: 0.8rem;
            color: #888;
            display: flex;
            gap: 16px;
        }
        /* 规格选择区 */
        .detail-spec-section {
            padding: 12px 16px;
            border-top: 1px solid #2a2a2a;
        }
        .detail-spec-section .spec-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: #ccc;
            margin-bottom: 10px;
        }
        .detail-spec-section .spec-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }
        .detail-spec-section .spec-option {
            padding: 8px 18px;
            border: 1.5px solid #444;
            border-radius: 8px;
            background: #1e1e1e;
            color: #ccc;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
        }
        .detail-spec-section .spec-option:hover {
            border-color: #ff6b00;
            color: #ff6b00;
        }
        .detail-spec-section .spec-option.active {
            border-color: #ff6b00;
            background: rgba(255,107,0,0.15);
            color: #ff6b00;
            font-weight: 600;
        }
        .detail-spec-section .spec-option.disabled {
            border-color: #333;
            background: #1a1a1a;
            color: #555;
            cursor: not-allowed;
            text-decoration: line-through;
        }
        /* 数量选择区 */
        .detail-quantity-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-top: 1px solid #2a2a2a;
        }
        .detail-quantity-section .qty-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #ccc;
        }
        .detail-quantity-section .qty-controls {
            display: flex;
            align-items: center;
            gap: 0;
        }
        .detail-quantity-section .qty-btn {
            width: 36px;
            height: 36px;
            border: 1.5px solid #444;
            background: #1e1e1e;
            color: #ccc;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .detail-quantity-section .qty-btn:hover {
            border-color: #ff6b00;
            color: #ff6b00;
        }
        .detail-quantity-section .qty-btn:disabled {
            border-color: #333;
            color: #555;
            cursor: not-allowed;
        }
        .detail-quantity-section .qty-btn.minus { border-radius: 8px 0 0 8px; }
        .detail-quantity-section .qty-btn.plus { border-radius: 0 8px 8px 0; }
        .detail-quantity-section .qty-input {
            width: 56px;
            height: 36px;
            border: 1.5px solid #444;
            border-left: none;
            border-right: none;
            background: #1e1e1e;
            color: #fff;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 600;
            outline: none;
        }
        .detail-quantity-section .stock-tip {
            font-size: 0.75rem;
            color: #888;
            margin-left: 10px;
        }
        /* 标签页切换区 */
        .detail-tabs {
            display: flex;
            border-bottom: 1px solid #2a2a2a;
            position: sticky;
            top: 48px;
            background: #121212;
            z-index: 40;
        }
        .detail-tabs .tab-btn {
            flex: 1;
            padding: 12px 0;
            text-align: center;
            font-size: 0.9rem;
            font-weight: 500;
            color: #888;
            cursor: pointer;
            border: none;
            background: transparent;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .detail-tabs .tab-btn.active {
            color: #ff6b00;
            border-bottom-color: #ff6b00;
            font-weight: 600;
        }
        .detail-tab-content {
            display: none;
            padding: 16px;
            font-size: 0.9rem;
            line-height: 1.7;
            color: #bbb;
        }
        .detail-tab-content.active { display: block; }
        .detail-tab-content img {
            max-width: 100%;
            border-radius: 8px;
            margin: 8px 0;
        }
        /* 规格参数表 */
        .detail-specs-table {
            width: 100%;
            border-collapse: collapse;
        }
        .detail-specs-table td {
            padding: 10px 8px;
            border-bottom: 1px solid #2a2a2a;
            font-size: 0.85rem;
        }
        .detail-specs-table td:first-child {
            color: #888;
            width: 35%;
        }
        .detail-specs-table td:last-child {
            color: #ccc;
        }
        /* 用户评价区 */
        .detail-review-item {
            padding: 14px 0;
            border-bottom: 1px solid #2a2a2a;
        }
        .detail-review-item .review-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        .detail-review-item .review-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        .detail-review-item .review-name {
            font-weight: 600;
            font-size: 0.85rem;
        }
        .detail-review-item .review-stars {
            color: #ff6b00;
            font-size: 0.75rem;
        }
        .detail-review-item .review-text {
            font-size: 0.85rem;
            color: #bbb;
            margin-top: 4px;
        }
        .detail-review-item .review-images {
            display: flex;
            gap: 6px;
            margin-top: 8px;
        }
        .detail-review-item .review-images img {
            width: 64px;
            height: 64px;
            border-radius: 6px;
            object-fit: cover;
        }
        /* 底部固定购买栏 */
        .detail-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #1e1e1e;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 100;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
        }
        .detail-bottom-bar .bar-cart-btn {
            position: relative;
            background: transparent;
            border: none;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            flex-shrink: 0;
        }
        .detail-bottom-bar .bar-cart-btn .cart-count {
            position: absolute;
            top: -6px;
            right: -8px;
            background: #ff6b00;
            color: #fff;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        .detail-bottom-bar .bar-add-cart {
            flex: 1;
            padding: 12px 0;
            border-radius: 24px;
            border: 1.5px solid #ff6b00;
            background: transparent;
            color: #ff6b00;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .detail-bottom-bar .bar-add-cart:hover {
            background: rgba(255,107,0,0.1);
        }
        .detail-bottom-bar .bar-buy-now {
            flex: 1;
            padding: 12px 0;
            border-radius: 24px;
            border: none;
            background: linear-gradient(135deg, #ff6b00, #ff8c3a);
            color: #fff;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .detail-bottom-bar .bar-buy-now:hover {
            background: linear-gradient(135deg, #e55d00, #ff7a20);
        }
        .detail-bottom-bar .bar-buy-now:active {
            transform: scale(0.97);
        }
        /* 响应式：平板/电脑端优化 */
        @media (min-width: 768px) {
            #productDetailPage {
                max-width: 600px;
                margin: 0 auto;
                border-left: 1px solid #2a2a2a;
                border-right: 1px solid #2a2a2a;
            }
            .detail-bottom-bar {
                max-width: 600px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        @media (max-width: 380px) {
            .detail-info-section .detail-current-price { font-size: 1.3rem; }
            .detail-bottom-bar { padding: 8px 10px; gap: 8px; }
            .detail-bottom-bar .bar-add-cart,
            .detail-bottom-bar .bar-buy-now { font-size: 0.85rem; padding: 10px 0; }
        }
        /* 添加到购物车的toast提示 */
        .detail-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0,0,0,0.85);
            color: #fff;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 0.9rem;
            z-index: 200;
            pointer-events: none;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            white-space: nowrap;
        }
        .detail-toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .detail-toast i { margin-right: 6px; }

        /* ==================== 统一搜索按钮与搜索栏样式（复用直播教学模板） ==================== */
        /* 统一翻译按钮样式：复用直播教学模板 - 圆角边框按钮，图标+文字 */
        .lang-toggle-btn-dark {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 8px 14px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            white-space: nowrap;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: -0.2px;
            border: 2px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-family: inherit;
        }
        .lang-toggle-btn-dark:hover {
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.18);
        }

        /* 搜索按钮：模板圆角边框按钮，图标+文字 */
        .search-toggle-btn-dark {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            white-space: nowrap;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: -0.2px;
            border: 2px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-family: inherit;
        }
        .search-toggle-btn-dark:hover {
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.18);
        }
        .search-toggle-btn-dark.active-search {
            border-color: #ff6b00;
            background: rgba(255, 107, 0, 0.15);
            color: #ff6b00;
        }

        /* 首页搜索栏：绝对定位在heroOverlay内，叠加在视频上不产生黑色间隙 */
        .home-search-bar-wrapper {
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            z-index: 49;
            display: flex;
            justify-content: center;
            padding: 0;
            background: transparent;
            border-bottom: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
        }
        .home-search-bar-wrapper.active {
            max-height: 60px;
            opacity: 1;
            padding: 10px 24px;
        }
        /* 畅销榜单搜索栏：fixed定位，浮在内容上方，不推挤不露黑底 */
        .top-sellers-search-bar-wrapper {
            position: fixed;
            top: 56px;
            left: 0;
            right: 0;
            z-index: 49;
            display: flex;
            justify-content: center;
            padding: 0;
            background: transparent;
            border-bottom: none;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
        }
        .top-sellers-search-bar-wrapper.active {
            max-height: 60px;
            opacity: 1;
            padding: 10px 24px;
        }
        .home-search-bar-inner, .top-sellers-search-bar-inner {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 520px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50px;
            padding: 6px 8px 6px 18px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .home-search-bar-inner:focus-within, .top-sellers-search-bar-inner:focus-within {
            border-color: #ff3b8c;
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 4px rgba(255, 59, 140, 0.08);
        }
        .home-search-bar-inner input, .top-sellers-search-bar-inner input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 0.95rem;
            font-family: inherit;
            color: #ffffff;
            outline: none;
            min-width: 0;
            letter-spacing: -0.2px;
        }
        .home-search-bar-inner input::placeholder, .top-sellers-search-bar-inner input::placeholder {
            color: rgba(255, 255, 255, 0.5);
            opacity: 0.7;
        }
        .search-clear-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.5);
            padding: 6px 8px;
            border-radius: 50%;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 0.85rem;
            display: none;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .search-clear-btn.visible {
            display: flex;
        }
        .search-clear-btn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
        }
        .search-close-btn-inline {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            padding: 6px 14px;
            border-radius: 50px;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 600;
            font-size: 0.82rem;
            font-family: inherit;
            white-space: nowrap;
            flex-shrink: 0;
            letter-spacing: -0.2px;
        }
        .search-close-btn-inline:hover {
            background: rgba(255, 255, 255, 0.25);
            color: #ffffff;
        }

        /* 移动端响应式适配 */
        @media (max-width: 768px) {
            .home-search-bar-wrapper, .top-sellers-search-bar-wrapper {
                padding: 10px 12px;
            }
            .home-search-bar-inner, .top-sellers-search-bar-inner {
                max-width: 100%;
            }
        }

        

        /* GSAP色值变量（被Hero区块、服务卡片、Footer等使用） */
        :root {
            --gsap-bg-alt: #111111;
            --gsap-accent: #EDC200;
        }

        /* Hero区块 */
        /* ==================== Hero叠加层容器：将横幅/标签栏/子菜单融入首屏主视觉区 ==================== */
        #heroOverlayWrapper {
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        /* ==================== 首页主标签栏 ==================== */
        /* 【说明】透明叠加在Hero之上，宽度与顶部横幅对齐，紧凑布局仅保留文字区域 */
        #heroOverlayWrapper > header.flex {
            position: absolute;
            top: 110px; /* 【位置】与顶部横幅之间预留空间 */
            left: 0;
            right: 0;
            width: 100%; /* 【对齐横幅】宽度与顶部横幅一致，全宽显示 */
            z-index: 10;
            padding: 0; /* 【紧凑布局】仅保留文字区域，无多余内边距 */
            background: transparent !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            gap: 32px; /* 【标签间距】三个主标签(About Us/Sourcing Service/Courses Center)之间的水平间隔 */
        }
        #heroOverlayWrapper > header.flex button {
            color: #fff;
            font-size: 1.05rem; /* 【标签字号】清晰可见 */
            text-shadow: 0 1px 4px rgba(0,0,0,0.5);
            padding: 0; /* 【紧凑布局】按钮无多余内边距 */
        }
        /* ==================== 子菜单区域 ==================== */
        /* 【说明】透明叠加在Hero之上，与顶部横幅宽度对齐，取消滚动条，全部图标在一行内完整展示 */
        #heroOverlayWrapper > #menuWrapper {
            position: absolute;
            top: 175px; /* 【增大间距】位于主标签栏正下方，与标签栏之间预留充足间隔 */
            left: 0;
            right: 0;
            width: 100%; /* 【对齐横幅】宽度与顶部横幅保持一致 */
            z-index: 10;
            background: transparent !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            padding: 0; /* 【紧凑布局】仅保留内容区域，无多余内边距 */
            gap: 18px; /* 【分组间距】三组菜单(About/Sourcing/Course)之间的水平间隔 */
            /* 【取消滚动条】移除overflow-x/y，所有图标直接在一行显示 */
            display: flex;
            flex-direction: row; /* 【水平排列】所有菜单组沿水平方向一字排开 */
            flex-wrap: nowrap; /* 【禁止换行】确保所有组在同一行 */
            justify-content: center; /* 【居中排列】所有菜单组在屏幕水平居中 */
            align-items: center;
        }
        /* ==================== 子菜单图标容器 ==================== */
        /* 【说明】图标容器背景透明，仅保留图标本身可见，图标尺寸适中 */
        #heroOverlayWrapper > #menuWrapper .menu-group .w-14 {
            width: 44px; /* 【图标尺寸】44px刚好展示全部18个图标，不拥挤也不过大 */
            height: 44px; /* 【图标尺寸】高度与宽度一致保持圆形 */
            font-size: 1.0rem; /* 【图标字号】与44px图标匹配，清晰可见 */
            padding: 0 !important; /* 确保图标容器无多余内边距 */
            margin: 0 auto; /* 图标在文字上方水平居中 */
            flex-shrink: 0; /* 保持图标不被压缩 */
            background: transparent !important; /* 【透明背景】图标容器背景变透明，只显示图标本身 */
            border: 1px solid rgba(255,255,255,0.2); /* 【透明边框】微弱白色边框勾勒圆形轮廓 */
            color: #fff !important; /* 【图标白色】图标颜色保持白色可见 */
        }
        /* ==================== 子菜单文字样式 ==================== */
        #heroOverlayWrapper > #menuWrapper .menu-group .text-xs {
            font-size: 0.65rem; /* 【文字大小】与44px图标匹配 */
        }
        #heroOverlayWrapper > #menuWrapper .menu-group p {
            color: rgba(255,255,255,0.35); /* 【文字透明】文字变为半透明，仅图标突出显示 */
            text-shadow: none; /* 【取消阴影】透明风格不需要文字阴影 */
        }
        /* ==================== 每个菜单组 ==================== */
        /* 【说明】各组内选项均匀分布，图标间隔对齐，初始透明，激活后可见 */
        #heroOverlayWrapper > #menuWrapper .menu-group {
            justify-content: space-evenly; /* 【均匀分布】组内各选项等间距排列，图标间隔对齐 */
            width: auto; /* 【自适应宽度】宽度随内容自动调整，允许多组并排 */
            flex-wrap: nowrap; /* 【禁止换行】组内6个选项保持在一行 */
            flex-shrink: 0; /* 【防止收缩】确保菜单组不被父容器压缩 */
            gap: 8px; /* 【选项间距】组内各选项之间的水平间隔 */
            min-width: max-content; /* 【最小宽度】保证组内所有内容完整展示，包括About Us组 */
        }
        /* ==================== 每个菜单项 ==================== */
        /* 【说明】图标在上、文字在下，两者居中对齐，使用flex列布局 */
        #heroOverlayWrapper > #menuWrapper .menu-group > div {
            display: flex !important; /* flex布局 */
            flex-direction: column !important; /* 纵向排列：图标在上、文字在下 */
            align-items: center !important; /* 图标和文字水平居中对齐 */
            text-align: center !important; /* 文字居中 */
            width: 65px; /* 【固定宽度】每个菜单项统一宽度，保证图标间隔对齐 */
        }
        /* ==================== 菜单项文字段落 ==================== */
        /* 【说明】文字允许上下行折行显示，如"Company Profile"显示为两行 */
        #heroOverlayWrapper > #menuWrapper .menu-group > div > p {
            margin-top: 5px !important; /* 【图标文字间距】图标与文字之间预留5px间距 */
            width: 100% !important; /* 【宽度占满】文字占满菜单项宽度 */
            max-width: 65px; /* 【最大宽度】超出时自动折行，实现上下行显示 */
            white-space: normal; /* 【允许换行】文字可以上下行显示，如"Company"上"Profile"下 */
            line-height: 1.3; /* 【行高】上下行之间紧凑但不拥挤 */
            word-break: break-word; /* 【断词】长单词必要时断开换行 */
        }
        #gsapHero { position: relative; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
        .hero-bg-layer { position: absolute; inset: 0; z-index: 0; }
        .hero-bg-layer img { width: 100%; height: 120%; object-fit: cover; opacity: 0.35; filter: brightness(0.6); }
        /* ==================== Hero背景视频样式：循环播放、铺满全屏、显示视频原有亮度 ==================== */
        .hero-bg-layer video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;
        }
        .hero-gradient { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%); }
        .hero-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
        .hero-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gsap-accent); margin-bottom: 24px; border: 1px solid rgba(237,194,0,0.3); padding: 6px 20px; border-radius: 40px; }
        .hero-title { font-size: clamp(3rem, 8vw, 7rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 24px; }
        .hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255,255,255,0.6); max-width: 600px; margin: 0 auto 36px; font-weight: 400; line-height: 1.6; }
        .hero-cta { display: inline-block; padding: 14px 40px; background: var(--gsap-accent); color: #000; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; border-radius: 40px; transition: transform 0.3s, box-shadow 0.3s; }
        .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(237,194,0,0.3); }
        .hero-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-size: 0.7rem; letter-spacing: 0.1em; }
        .hero-scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); animation: scrollLinePulse 2s ease-in-out infinite; }
        @keyframes scrollLinePulse { 0%,100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.2); } }

        /* Works区块 */
        #gsapWorks { padding: 60px 40px; background: var(--gsap-bg-alt); }
        /* 改为白色，避免初始加载时闪烁黄色 */
        .section-label { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 16px; }
        .section-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 60px; }
        .works-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; max-width: 1400px; margin: 0 auto; }
        .work-item { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 4/5; will-change: transform, opacity; transition: box-shadow 0.4s; }
.work-item::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.12), transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: 5; }
.work-item:hover::after { opacity: 1; }
        .work-item:nth-child(1) { grid-column: span 5; } .work-item:nth-child(2) { grid-column: span 7; }
        .work-item:nth-child(3) { grid-column: span 4; } .work-item:nth-child(4) { grid-column: span 4; } .work-item:nth-child(5) { grid-column: span 4; }
        .work-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
        .work-item:hover img { transform: scale(1.08); }
        .work-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s; display: flex; align-items: flex-end; padding: 28px; }
        .work-item:hover .work-item-overlay { opacity: 1; }
        /* 可点击卡片样式：鼠标指针变为手型，提示用户可点击跳转 */
        .work-item-clickable { cursor: pointer; }
        .work-item-clickable:hover { box-shadow: 0 8px 30px rgba(255,107,0,0.3); }
        .work-item-info h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; }
        .work-item-info p { font-size: 0.8rem; color: rgba(255,255,255,0.6); }

        /* About区块 */
        #gsapAbout { padding: 160px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1400px; margin: 0 auto; }
        .about-heading { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 40px; line-height: 1.1; }
        .about-body { font-size: 1.05rem; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 480px; }
        .about-stats { display: flex; gap: 48px; margin-top: 50px; }
        .about-stat h4 { font-size: 2.5rem; font-weight: 700; color: var(--gsap-accent); line-height: 1; }
        .about-stat p { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 6px; }
        .about-image-col { position: relative; overflow: hidden; border-radius: 12px; height: 500px; }
        .about-image-col img { width: 100%; height: 130%; object-fit: cover; will-change: transform; }

        /* Services区块 */
        #gsapServices { padding: 120px 40px; background: var(--gsap-bg-alt); }
        .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; }
        .service-card { position: relative; background: #1a1a1a; border-radius: 16px; padding: 48px 36px; border: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.service-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.08), transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: 0; }
.service-card:hover::after { opacity: 1; }
        /* 可跳转服务卡片：鼠标指针改为手型，悬停增强效果 */
        .service-card-clickable { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
        .service-card-clickable:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(237,194,0,0.25); border-color: rgba(237,194,0,0.3); }
        .service-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(237,194,0,0.06), transparent 40%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; }
        .service-card:hover::before { opacity: 1; }
        .service-card > * { position: relative; z-index: 2; }
        .service-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(237,194,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gsap-accent); margin-bottom: 28px; }
        .service-card h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; }
        .service-card p { font-size: 0.9rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 24px; }
        .service-link { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gsap-accent); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; }
        .service-link:hover { gap: 14px; }

        /* Clients跑马灯 */
        #gsapClients { padding: 100px 0; overflow: hidden; }
        .marquee-wrapper { width: 100%; overflow: hidden; }
        .marquee-track { display: flex; gap: 80px; width: max-content; will-change: transform; }
        .marquee-item { flex-shrink: 0; font-size: 1.8rem; font-weight: 700; color: rgba(255,255,255,0.15); white-space: nowrap; transition: color 0.4s; }
        .marquee-item:hover { color: rgba(255,255,255,0.5); }

        /* Contact区块 */
        #gsapContact { padding: 160px 40px; text-align: center; overflow: hidden; position: relative; }
        .contact-bg-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(111,97,168,0.15) 0%, transparent 70%); transition: background 0.5s; pointer-events: none; }
        .contact-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
        .contact-heading { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
        .contact-sub { color: rgba(255,255,255,0.5); margin-bottom: 48px; font-size: 1.05rem; line-height: 1.6; }
        .contact-form { display: flex; flex-direction: column; gap: 16px; }
        .form-row { display: flex; gap: 16px; }
        .form-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 16px 20px; color: #fff; font-size: 0.95rem; font-family: var(--font); outline: none; transition: border-color 0.3s; }
        .form-input:focus { border-color: var(--gsap-accent); background: rgba(255,255,255,0.08); }
        .form-input::placeholder { color: rgba(255,255,255,0.3); }
        textarea.form-input { resize: vertical; min-height: 130px; }
        .form-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 40px; background: var(--gsap-accent); color: #000; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; border-radius: 40px; transition: transform 0.3s; align-self: center; margin-top: 8px; }
        .form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(237,194,0,0.3); }

        /* GSAP Footer */
        #gsapFooter { padding: 60px 40px; background: var(--gsap-bg-alt); transition: background 0.6s, color 0.6s; }
        .footer-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
        .footer-brand { font-size: 1.4rem; font-weight: 700; }
        .footer-brand span { color: var(--gsap-accent); }
        .footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
        .footer-socials { display: flex; gap: 18px; }
        .footer-socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all 0.3s; }
        .footer-socials a:hover { border-color: var(--gsap-accent); color: var(--gsap-accent); background: rgba(237,194,0,0.1); }

        /* GSAP风格卡片区 — 融入模板的核心业务/热销/明星课程 */
        .gsap-card-section { padding: 60px 40px; background: var(--gsap-bg-alt); position: relative; }
        .gsap-card-section .gsap-card-refresh { position: absolute; top: 40px; right: 40px; z-index: 5; }
        .works-grid--four .work-item:nth-child(n) { grid-column: span 4; }
        @media (max-width: 768px) {
            .works-grid--four .work-item:nth-child(n) { grid-column: span 6; }
        }
        @media (max-width: 480px) {
            .works-grid--four .work-item:nth-child(n) { grid-column: span 12; }
            .gsap-card-section .gsap-card-refresh { top: 24px; right: 16px; }
        }
        .gsap-card-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
        .gsap-card-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gsap-accent); }
        .gsap-card-refresh { width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--gsap-accent); border: 1px solid rgba(237,194,0,0.2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.3s; cursor: pointer; }
        .gsap-card-refresh:hover { background: rgba(237,194,0,0.1); border-color: var(--gsap-accent); }
        .gsap-card-refresh.spin i { animation: gsap-spin 0.6s linear infinite; }
        @keyframes gsap-spin { to { transform: rotate(360deg); } }

        /* 核心业务标题行 — 左侧标题 + 右侧广告卡片 */
        .section-header-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 40px;
            margin-bottom: 48px;
            position: relative;
        }
        .section-header-left {
            flex: 0 0 auto;
            position: relative;
        }
        .section-header-left .gsap-card-refresh {
            position: absolute;
            top: 0;
            right: -60px;
            z-index: 5;
        }
        .section-header-right {
            flex: 1 1 auto;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            min-width: 0;
            padding-top: 8px;
        }

        /* 广告卡片堆叠容器 */
        .ad-cards-stack {
            position: relative;
            width: 340px;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        /* 3D球形环绕广告卡片 */
        .ad-sphere-wrapper { position: relative; width: 340px; height: 280px; text-align: center; margin-right: 160px; }
        .ad-sphere-scene { width: 100%; height: 260px; perspective: 900px; perspective-origin: center center; }
        .ad-sphere-carousel { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.1s linear; will-change: transform; }
        .ad-sphere-card { position: absolute; width: 180px; left: 50%; top: 50%; margin-left: -90px; margin-top: -120px; cursor: pointer; backface-visibility: hidden; -webkit-backface-visibility: hidden; user-select: none; -webkit-user-select: none; transition: filter 0.3s; }
        .ad-sphere-card .ad-card-inner { width: 100%; height: 240px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.04); display: flex; flex-direction: column; transition: box-shadow 0.3s; }
        .ad-sphere-card:hover .ad-card-inner { box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
        .ad-sphere-card .ad-card-image { width: 100%; height: 120px; overflow: hidden; flex-shrink: 0; }
        .ad-sphere-card .ad-card-image img { width: 100%; height: 100%; object-fit: cover; }
        .ad-sphere-card .ad-card-body { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
        .ad-sphere-card .ad-card-badge { display: inline-block; background: #fbbf24; color: #000; font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; width: fit-content; }
        .ad-sphere-card .ad-card-title { font-size: 0.85rem; font-weight: 600; color: #111; margin-bottom: 4px; line-height: 1.3; }
        .ad-sphere-card .ad-card-desc { font-size: 0.7rem; color: #666; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3.6em; }
        .ad-sphere-card.front-ad-card { filter: brightness(1); }
        .ad-sphere-hint { color: rgba(255,255,255,0.3); font-size: 0.7rem; margin-top: 6px; letter-spacing: 0.04em; user-select: none; }

        @media (max-width: 1024px) {
            .ad-sphere-wrapper { width: 280px; height: 240px; }
            .ad-sphere-scene { height: 220px; perspective: 700px; }
            .ad-sphere-card { width: 150px; margin-left: -75px; margin-top: -100px; }
            .ad-sphere-card .ad-card-inner { height: 200px; }
            .ad-sphere-card .ad-card-image { height: 100px; }
            .ad-sphere-card .ad-card-title { font-size: 0.78rem; }
            .ad-sphere-card .ad-card-desc { font-size: 0.65rem; }
        }
        @media (max-width: 640px) {
            .ad-sphere-wrapper { width: 220px; height: 200px; }
            .ad-sphere-scene { height: 180px; perspective: 500px; }
            .ad-sphere-card { width: 120px; margin-left: -60px; margin-top: -80px; }
            .ad-sphere-card .ad-card-inner { height: 160px; }
            .ad-sphere-card .ad-card-image { height: 80px; }
            .ad-sphere-card .ad-card-title { font-size: 0.7rem; }
            .ad-sphere-card .ad-card-desc { font-size: 0.6rem; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-height: 1.5em; }
        }
        .ad-card-item {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            height: 260px;
            cursor: pointer;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                        z-index 0.5s step-end;
            z-index: calc(4 - var(--i));
            filter: drop-shadow(0 4px 20px rgba(0,0,0,0.08));
        }
        .ad-card-item:nth-child(1) { right: 0; }
        .ad-card-item:nth-child(2) { right: 28px; }
        .ad-card-item:nth-child(3) { right: 56px; }
        .ad-card-item:nth-child(4) { right: 84px; }

        /* 鼠标悬停堆叠容器 → 卡片向左展开 */
        .ad-cards-stack:hover .ad-card-item:nth-child(1) { right: 210px; }
        .ad-cards-stack:hover .ad-card-item:nth-child(2) { right: 140px; }
        .ad-cards-stack:hover .ad-card-item:nth-child(3) { right: 70px; }
        .ad-cards-stack:hover .ad-card-item:nth-child(4) { right: 0; }

        /* 单张卡片悬停放大 */
        .ad-card-item:hover {
            z-index: 99 !important;
            transform: translateY(-50%) scale(1.08);
        }

        /* 广告卡片内部 */
        .ad-card-inner {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 16px rgba(0,0,0,0.06);
            border: 1px solid rgba(0,0,0,0.04);
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.3s;
        }
        .ad-card-item:hover .ad-card-inner {
            box-shadow: 0 8px 40px rgba(0,0,0,0.12);
        }
        .ad-card-image {
            width: 100%;
            height: 130px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .ad-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s;
        }
        .ad-card-item:hover .ad-card-image img {
            transform: scale(1.08);
        }
        .ad-card-body {
            flex: 1;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .ad-card-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: #fff;
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 2px 8px;
            border-radius: 4px;
            margin-bottom: 6px;
            width: fit-content;
        }
        .ad-card-title {
            font-size: 13px;
            font-weight: 700;
            color: #1a1a2e;
            margin: 0 0 4px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .ad-card-desc {
            font-size: 11px;
            color: #64748b;
            margin: 0;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 广告卡片点击放大弹窗 */
        .ad-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: adFadeIn 0.3s ease;
        }
        @keyframes adFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .ad-overlay-content {
            background: #fff;
            border-radius: 20px;
            max-width: 560px;
            width: 90%;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            animation: adScaleIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        @keyframes adScaleIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .ad-overlay-image {
            width: 100%;
            height: 240px;
            overflow: hidden;
        }
        .ad-overlay-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .ad-overlay-body {
            padding: 24px 28px 28px;
        }
        .ad-overlay-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: #fff;
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 3px 10px;
            border-radius: 4px;
            margin-bottom: 12px;
        }
        .ad-overlay-title {
            font-size: 22px;
            font-weight: 800;
            color: #1a1a2e;
            margin: 0 0 10px;
            line-height: 1.3;
        }
        .ad-overlay-desc {
            font-size: 14px;
            color: #475569;
            line-height: 1.7;
            margin: 0 0 20px;
        }
        .ad-overlay-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 10px 24px;
            border-radius: 8px;
            text-decoration: none;
            transition: opacity 0.3s;
        }
        .ad-overlay-link:hover {
            opacity: 0.85;
        }
        .ad-overlay-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(0,0,0,0.3);
            color: #fff;
            border: none;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
            z-index: 1;
        }
        .ad-overlay-close:hover {
            background: rgba(0,0,0,0.5);
        }

        /* 广告卡片响应式 */
        @media (max-width: 1024px) {
            .section-header-row {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }
            .section-header-right {
                justify-content: flex-start;
                width: 100%;
            }
            .ad-cards-stack {
                width: 100%;
                height: 220px;
                justify-content: flex-start;
            }
            .ad-card-item {
                width: 150px;
                height: 200px;
                right: 0;
            }
            .ad-card-item:nth-child(1) { right: 0; }
            .ad-card-item:nth-child(2) { right: 20px; }
            .ad-card-item:nth-child(3) { right: 40px; }
            .ad-card-item:nth-child(4) { right: 60px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(1) { right: 160px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(2) { right: 105px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(3) { right: 50px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(4) { right: 0; }
            .ad-card-image { height: 100px; }
        }
        @media (max-width: 640px) {
            .ad-cards-stack {
                height: 180px;
            }
            .ad-card-item {
                width: 120px;
                height: 160px;
            }
            .ad-card-item:nth-child(1) { right: 0; }
            .ad-card-item:nth-child(2) { right: 16px; }
            .ad-card-item:nth-child(3) { right: 32px; }
            .ad-card-item:nth-child(4) { right: 48px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(1) { right: 130px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(2) { right: 86px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(3) { right: 42px; }
            .ad-cards-stack:hover .ad-card-item:nth-child(4) { right: 0; }
            .ad-card-image { height: 80px; }
            .ad-card-body { padding: 8px 10px; }
            .ad-card-title { font-size: 11px; }
            .ad-card-desc { font-size: 10px; }
        }

        /* 卡片区响应式 */
        @media (max-width: 768px) {
            .gsap-card-section { padding: 30px 20px; }
        }
        @media (max-width: 480px) {
            .gsap-card-section { padding: 20px 14px; }
        }

        /* GSAP响应式 */
        @media (max-width: 1024px) {
            #gsapAbout { grid-template-columns: 1fr; gap: 40px; padding: 80px 24px; }
            .about-image-col { height: 350px; }
            .services-grid { grid-template-columns: 1fr 1fr; }
            .works-grid { gap: 14px; }
            .work-item:nth-child(1) { grid-column: span 6; } .work-item:nth-child(2) { grid-column: span 6; }
            .work-item:nth-child(3) { grid-column: span 6; } .work-item:nth-child(4) { grid-column: span 6; } .work-item:nth-child(5) { grid-column: span 12; }
            .form-row { flex-direction: column; }
        }
        @media (max-width: 640px) {
            #gsapWorks { padding: 40px 16px; } #gsapServices { padding: 80px 16px; } #gsapContact { padding: 100px 16px; }
            .services-grid { grid-template-columns: 1fr; gap: 20px; }
            .works-grid { gap: 10px; } .work-item { aspect-ratio: 1; } .work-item:nth-child(n) { grid-column: span 6; }
            .about-stats { gap: 24px; } .about-stat h4 { font-size: 2rem; }
            .footer-inner { flex-direction: column; text-align: center; }
        }

        /* ============================================================
   ==================== 结算中心（个人中心7.2）页面样式 ====================
   ============================================================
   说明：本CSS区块是个人中心-7.2模板的完整样式系统，包含：
   - 登录/注册弹窗样式
   - 结算中心主布局（侧边栏 + 内容区）
   - 用户信息卡片、侧边导航菜单
   - 统计卡片、业务卡片、订单表格
   - 课程卡片、地址卡片、购物车样式
   - 结账弹窗、支付成功弹窗、Toast提示
   - 视频播放弹窗
   整个样式系统与底部导航栏的"结算中心"按钮联动，
   暗黑主题配色与首页/畅销榜单/直播教学页面保持一致。
   ============================================================ */
        /* ==================== 结算中心（个人中心）页面样式 - 浅色主题 ==================== */

        /* 登录弹窗遮罩层：固定定位覆盖全屏，半透明背景 */
        .cc-login-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 500;
            display: flex;
            align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .cc-login-overlay.show { opacity: 1; visibility: visible; }

        /* 登录弹窗卡片：浅色卡片，圆角 */
        .cc-login-modal {
            background: var(--lt-bg-white);
            border-radius: 16px;
            padding: 32px 28px;
            width: 420px; max-width: 92vw;
            box-shadow: var(--lt-shadow-lg);
            transform: translateY(20px);
            transition: transform 0.3s ease;
            position: relative;
        }
        .cc-login-overlay.show .cc-login-modal { transform: translateY(0); }

        /* 登录弹窗头部 */
        .cc-login-header { text-align: center; margin-bottom: 24px; }
        .cc-login-logo { font-size: 24px; font-weight: 700; color: var(--lt-text-primary); }
        .cc-login-logo span { color: #ff3b8c; }
        .cc-login-subtitle { font-size: 12px; color: var(--lt-text-secondary); margin-top: 6px; }

        /* 登录弹窗关闭按钮 */
        .cc-login-close {
            position: absolute; top: 16px; right: 16px;
            background: none; border: none;
            font-size: 22px; cursor: pointer;
            color: var(--lt-text-muted); line-height: 1;
        }
        .cc-login-close:hover { color: var(--lt-text-primary); }

        /* 登录表单输入框组 */
        .cc-login-input-group { position: relative; margin-bottom: 16px; }
        .cc-login-input-group i {
            position: absolute; left: 14px; top: 50%;
            transform: translateY(-50%);
            color: var(--lt-text-muted); font-size: 15px;
        }
        .cc-login-input-group input {
            width: 100%;
            padding: 12px 14px 12px 40px;
            border: 1px solid var(--lt-border);
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s ease;
            background: var(--lt-bg-white); color: var(--lt-text-primary);
        }
        .cc-login-input-group input:focus {
            outline: none; border-color: #ff3b8c;
            box-shadow: 0 0 0 3px rgba(255, 59, 140, 0.15);
        }
        .cc-login-input-group input::placeholder { color: var(--lt-text-muted); }

        /* 登录按钮 */
        .cc-btn-login {
            width: 100%; padding: 12px;
            background: #ff3b8c; color: #fff;
            border: none; border-radius: 8px;
            font-size: 15px; font-weight: 600;
            cursor: pointer;
            transition: background 0.2s ease;
            margin-top: 8px;
        }
        .cc-btn-login:hover { background: #e02e76; }

        /* 登录错误提示 */
        .cc-login-error { color: #ef4444; font-size: 12px; margin-top: 8px; min-height: 18px; }
        .cc-login-hint { text-align: center; font-size: 11px; color: var(--lt-text-muted); margin-top: 12px; }

        /* 登录/注册切换标签 */
        .cc-login-tabs { display: flex; gap: 0; margin-bottom: 20px; border-radius: 10px; overflow: hidden; border: 1px solid var(--lt-border); }
        .cc-login-tab { flex: 1; padding: 10px 0; background: transparent; border: none; color: var(--lt-text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
        .cc-login-tab.active { background: #ff3b8c; color: #fff; }
        .cc-login-tab:hover:not(.active) { background: rgba(255,59,140,0.08); color: #ff3b8c; }
        .cc-login-switch { text-align: center; margin-top: 14px; font-size: 13px; color: var(--lt-text-secondary); }
        .cc-login-switch a { color: #ff3b8c; text-decoration: none; font-weight: 500; cursor: pointer; }
        .cc-login-switch a:hover { text-decoration: underline; }

        /* ============================================================
           ============ 结算中心顶部固定导航栏（仅结算中心内固定） ============
           ============================================================
           说明：导航栏仅在结算中心页面内固定显示，切换到其他页面（首页、畅销榜单、
           直播教学等）时自动隐藏。导航栏固定在视口顶部，不随结算中心页面滚动。
           包含：Logo/品牌标识、语言切换、消息通知下拉面板、购物车图标、用户头像、
           快捷导航（我的订单/我的课程）。
           所有交互与侧边栏、内容区、全局购物车系统联动。
           与底部导航栏配合，形成完整的导航体系。
           ============================================================ */
        /* ============ 结算中心导航栏：固定定位，浅色主题（与直播教学页面同款） ============ */
        /* 说明：导航栏已从#checkoutCenterPage内部移出，放置于<body>直接子级，
           避免.page的transform导致position:fixed失效（transform会创建新的包含块）。
           position:fixed相对于视口定位，始终吸附在屏幕顶部，不随页面滚动。
           display:none默认隐藏，仅当结算中心页面激活时由JS添加.show类显示。
           z-index:1000确保覆盖所有内容。cc-main-container预留80px顶部间距（64px导航栏+16px间距）。 */
        .cc-top-nav {
            display: none;                 /* 【默认隐藏】仅在结算中心页面激活时显示，其他页面自动隐藏 */
            position: fixed;               /* 【固定定位】相对于视口固定，不随页面滚动 */
            top: 0; left: 0; right: 0;    /* 【全宽】横跨整个视口宽度 */
            height: 64px;                  /* 【高度】导航栏固定高度64px（与直播教学页面一致） */
            background: rgba(255, 179, 198, 0.9); /* 【背景色】淡玫粉色，与畅销榜单页面一致 */
            backdrop-filter: blur(20px);  /* 【毛玻璃效果】 */
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 59, 140, 0.2); /* 【底部边框】淡玫粉色边框 */
            color: var(--lt-text-primary);
            padding: 0 24px;              /* 【内边距】左右24px，与直播教学页面一致 */
            align-items: center;           /* 【垂直居中】导航项在64px高度内垂直居中 */
            justify-content: space-between;/* 【两端对齐】Logo在左，导航项在右 */
            z-index: 1000;                 /* 【层级】最上层，覆盖所有页面内容（包括弹窗遮罩） */
            box-shadow: none;             /* 【无阴影】与直播教学页面一致，通过边框实现分隔 */
        }
        /* 结算中心激活时显示导航栏：由switchPage函数动态添加/移除.show类 */
        .cc-top-nav.show {
            display: flex;                 /* 【显示】flex布局还原导航栏水平排列 */
        }
        .cc-top-nav .cc-top-logo {
            font-size: 20px;
            font-weight: 800;              /* 【加粗】与直播教学页面标题一致 */
            letter-spacing: -0.3px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--lt-text-primary);
        }
        .cc-top-nav .cc-top-logo i { color: #ff3b8c; font-size: 22px; }
        .cc-top-nav .cc-top-logo span { color: #ff3b8c; }
        .cc-top-nav .cc-business-tag {
            font-size: 10px;
            background: rgba(255,59,140,0.12);
            color: #ff3b8c;
            padding: 4px 10px;
            border-radius: 50px;          /* 【圆角】与直播教学页面按钮风格一致 */
            border: 1px solid rgba(255,59,140,0.25);
            font-weight: 600;
        }
        .cc-top-nav-right {
            display: flex;
            align-items: center;
            gap: 8px;                     /* 【间距】与直播教学页面按钮间距一致 */
            font-size: 0.85rem;
        }
        /* 导航链接分隔符：在同款按钮风格下隐藏 */
        .cc-top-nav-right .cc-nav-separator {
            display: none;
        }
        /* 移动端适配：小屏幕隐藏快捷导航链接文字，仅显示图标 */
        @media (max-width: 900px) {
            .cc-top-nav-right .cc-global-nav-link span { display: none; }
            .cc-top-nav-right .cc-global-nav-link { padding: 6px 8px; }
        }
        @media (max-width: 640px) {
            .cc-top-nav-right .cc-global-nav-link,
            .cc-top-nav-right .cc-nav-separator { display: none; }
        }
        /* 【统一】结算中心导航栏中的所有按钮（消息、购物车、翻译、登录）：统一直播教学页面同款样式 - pill形圆角边框 */
        .cc-top-nav-right .cc-icon-btn,
        .cc-top-nav-right .lang-toggle-btn-dark,
        .cc-top-nav-right .login-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 8px 14px !important;
            border-radius: 50px !important;
            border: 2px solid var(--lt-border) !important;
            background: var(--lt-bg-white) !important;
            color: var(--lt-text-primary) !important;
            font-family: inherit;
            font-size: 0.85rem !important;
            font-weight: 600 !important;
            cursor: pointer;
            position: relative;
            transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
            white-space: nowrap;
            letter-spacing: -0.2px;
        }
        .cc-top-nav-right .cc-icon-btn:hover,
        .cc-top-nav-right .lang-toggle-btn-dark:hover,
        .cc-top-nav-right .login-btn:hover {
            border-color: #ff3b8c !important;
            background: rgba(255,59,140,0.08) !important;
            color: #ff3b8c !important;
        }
        /* 角标（消息数、购物车数） */
        .cc-top-nav-right .cc-top-badge {
            position: absolute;
            top: -5px; right: -5px;
            background: #ef4444;
            color: #fff;
            font-size: 10px;
            width: 18px; height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }
        /* 消息通知容器：作为下拉面板的定位参考 */
        .cc-notif-wrapper {
            position: relative;
            display: inline-flex;
        }
        /* 消息通知下拉面板：绝对定位在铃铛下方，浅色主题适配 */
        .cc-notif-dropdown {
            position: absolute;
            top: calc(100% + 12px);       /* 距离图标下方12px */
            right: -10px;
            width: 380px;                  /* 下拉面板宽度 */
            max-width: 92vw;
            max-height: 480px;
            background: var(--lt-bg-white); /* 浅色卡片背景 */
            border-radius: 12px;
            box-shadow: var(--lt-shadow-lg);
            z-index: 500;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: 0.25s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--lt-border);
        }
        .cc-notif-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .cc-notif-dropdown::before {
            content: '';
            position: absolute;
            top: -8px; right: 18px;
            width: 0; height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid var(--lt-bg-white);
        }
        .cc-notif-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--lt-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
        }
        .cc-notif-header h3 {
            font-size: 15px; font-weight: 700;
            display: flex; align-items: center; gap: 8px;
            color: var(--lt-text-primary);
        }
        .cc-notif-header h3 i { color: #f59e0b; }
        .cc-notif-header .cc-mark-all-read {
            font-size: 12px; color: #ff3b8c;
            cursor: pointer; background: none; border: none;
            font-weight: 600; transition: color 0.2s;
        }
        .cc-notif-header .cc-mark-all-read:hover { color: #e02e76; text-decoration: underline; }
        .cc-notif-list {
            flex: 1; overflow-y: auto; padding: 4px 0;
        }
        .cc-notif-item {
            padding: 14px 20px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid var(--lt-border);
            position: relative;
        }
        .cc-notif-item:hover { background: var(--lt-bg-primary); }
        .cc-notif-item.unread { background: rgba(255,59,140,0.05); }
        .cc-notif-item.unread::before {
            content: '';
            position: absolute;
            left: 0; top: 12px; bottom: 12px;
            width: 3px;
            background: #ff3b8c;
            border-radius: 0 3px 3px 0;
        }
        .cc-notif-item .cc-notif-title {
            font-size: 13px; font-weight: 600;
            color: var(--lt-text-primary); margin-bottom: 4px; line-height: 1.4;
        }
        .cc-notif-item .cc-notif-content {
            font-size: 11px; color: var(--lt-text-secondary); line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2; line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .cc-notif-item .cc-notif-time {
            font-size: 10px; color: var(--lt-text-muted); margin-top: 6px;
        }
        .cc-notif-footer {
            padding: 10px 20px;
            border-top: 1px solid var(--lt-border);
            text-align: center; flex-shrink: 0;
        }
        .cc-notif-footer a {
            font-size: 12px; color: #ff3b8c; font-weight: 600;
            cursor: pointer; text-decoration: none;
        }
        .cc-notif-footer a:hover { text-decoration: underline; }
        .cc-notif-empty {
            text-align: center; padding: 40px 20px; color: var(--lt-text-muted);
        }
        .cc-notif-empty i { font-size: 36px; display: block; margin-bottom: 10px; color: var(--lt-text-secondary); }
        .cc-notif-empty p { font-size: 12px; }

        /* ==================== 消息通知页面（侧边栏入口） ==================== */
        .cc-notif-page-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 20px;
        }
        .cc-notif-page-header .cc-btn-outline {
            border: 1px solid var(--lt-border);
            color: var(--lt-text-secondary);
            background: transparent;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .cc-notif-page-header .cc-btn-outline:hover {
            border-color: #ff3b8c;
            color: #ff3b8c;
        }

        .cc-notif-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .cc-notif-tab {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 20px;
            border: 1px solid var(--lt-border);
            background: transparent;
            color: var(--lt-text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .cc-notif-tab:hover { border-color: var(--lt-text-muted); color: var(--lt-text-primary); }
        .cc-notif-tab.active {
            background: var(--lt-bg-white);
            border-color: #ff3b8c;
            color: #ff3b8c;
        }
        .cc-notif-tab-count {
            background: rgba(255,59,140,0.12);
            color: #ff3b8c;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            min-width: 20px;
            text-align: center;
        }
        .cc-notif-tab.active .cc-notif-tab-count {
            background: #ff3b8c;
            color: #fff;
        }

        .cc-notif-page-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .cc-notif-page-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 16px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid var(--lt-border-light);
        }
        .cc-notif-page-item:hover { background: var(--lt-bg-white); }
        .cc-notif-page-item.unread {
            background: rgba(255,59,140,0.04);
        }
        .cc-notif-page-item.unread:hover { background: rgba(255,59,140,0.08); }

        .cc-notif-page-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--lt-bg-white);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 16px;
            color: var(--lt-text-secondary);
        }
        .cc-notif-page-body {
            flex: 1;
            min-width: 0;
        }
        .cc-notif-page-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--lt-text-primary);
            margin-bottom: 4px;
        }
        .cc-notif-unread-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff3b8c;
            flex-shrink: 0;
        }
        .cc-notif-page-type-tag {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            background: var(--lt-bg-primary);
            color: var(--lt-text-secondary);
            font-weight: 400;
            flex-shrink: 0;
        }
        .cc-notif-page-content {
            font-size: 13px;
            color: var(--lt-text-secondary);
            line-height: 1.5;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .cc-notif-page-time {
            font-size: 11px;
            color: var(--lt-text-muted);
        }
        .cc-notif-read-badge {
            font-size: 11px;
            color: var(--lt-text-muted);
            flex-shrink: 0;
            padding: 4px 10px;
        }
        .cc-notif-page-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--lt-text-muted);
        }
        .cc-notif-page-empty i {
            font-size: 48px;
            display: block;
            margin-bottom: 12px;
            color: var(--lt-text-secondary);
        }
        .cc-notif-page-empty p {
            font-size: 14px;
        }

        /* 结算中心主布局：侧边栏（固定）+ 内容区 */
        /* 说明：左侧边栏使用position:fixed固定定位，始终在屏幕左侧显示，不随页面滚动。
           顶部导航栏(cc-top-nav)已移出#checkoutCenterPage，放置于<body>直接子级，
           使用position:fixed相对于视口定位，始终吸附在屏幕顶部，不随页面滚动。
           内容区顶部预留80px（64px导航栏高度+16px间距），防止内容被导航栏遮挡。
           内容区左侧为侧边栏预留320px空间（280px侧边栏宽度 + 40px间距）。 */
        .cc-main-container {
            max-width: 100%;              /* 内容区充满剩余宽度 */
            margin: 0;
            padding: 80px 20px 100px;     /* 顶部80px（64px导航栏+16px间距），底部100px给底部导航栏 */
            padding-left: 320px;          /* 【关键】左侧留出280px(侧边栏宽度)+40px(间距) */
            display: flex; gap: 24px;
            background: var(--lt-bg-primary); /* 浅色背景 */
            min-height: 100vh;            /* 最小高度100vh，确保整个页面都是浅色背景 */
        }
        /* 结算中心页面容器：覆盖body的深色背景 */
        #checkoutCenterPage {
            background: var(--lt-bg-primary);
            min-height: 100vh;
        }
        @media (max-width: 768px) {
            .cc-main-container { flex-direction: column; padding: 72px 12px 100px; }
            .cc-top-nav { padding: 0 12px; }
            .cc-top-nav .cc-business-tag { display: none; }
            .cc-notif-dropdown { width: 280px; right: -80px; }
        }

        /* ==================== 左侧边栏：全局固定定位 ==================== */
        /* 说明：侧边栏已从#checkoutCenterPage内部移出，放置于<body>直接子级，
           避免.page的transform导致position:fixed失效。
           position:fixed相对于视口定位，始终吸附在屏幕左侧，不随页面滚动。
           display:none默认隐藏，仅当结算中心页面激活时由JS添加.show类显示。
           z-index:900确保高于内容区但低于全局导航栏(1000)。 */
        .cc-sidebar {
            display: none;                 /* 【默认隐藏】仅在结算中心页面激活时显示 */
            width: 280px; flex-shrink: 0;
            position: fixed;              /* 【固定定位】相对于视口固定，不随页面滚动 */
            top: 56px;                    /* 【顶部偏移】从全局导航栏下方开始 */
            left: 0;                      /* 【左侧吸附】紧贴屏幕左边缘 */
            bottom: 0;                    /* 【底部延伸】至屏幕底部，充分利用垂直空间 */
            max-height: none;             /* 取消max-height限制，使用bottom控制高度 */
            overflow-y: auto;             /* 【滚动】内容超出时侧边栏内部滚动 */
            z-index: 900;                 /* 【层级】低于全局导航栏(1000)，高于内容区 */
            padding: 20px 16px;
            background: var(--lt-bg-primary); /* 【背景色】浅色背景与整体浅色主题一致 */
            scrollbar-width: thin;        /* 【滚动条】Firefox细滚动条 */
            scrollbar-color: var(--lt-border) transparent; /* 【滚动条颜色】浅色滚动条 */
            border-right: 1px solid var(--lt-border); /* 右侧分隔线 */
        }
        /* 结算中心激活时显示侧边栏：由switchPage函数动态添加/移除.show类 */
        .cc-sidebar.show {
            display: block;                /* 【显示】block布局还原侧边栏显示 */
        }
        /* WebKit浏览器（Chrome/Safari/Edge）侧边栏滚动条样式 */
        .cc-sidebar::-webkit-scrollbar { width: 4px; }
        .cc-sidebar::-webkit-scrollbar-track { background: transparent; }
        .cc-sidebar::-webkit-scrollbar-thumb { background: var(--lt-border); border-radius: 4px; }
        @media (max-width: 768px) {
            .cc-sidebar { width: 100%; position: static; max-height: none; padding: 16px 12px; background: none; border-right: none; }
            /* 移动端侧边栏已移出页面容器，改为固定定位覆盖层 */
            .cc-sidebar.show { width: 100%; position: fixed; top: 56px; left: 0; max-height: 50vh; background: var(--lt-bg-primary); z-index: 950; padding: 16px 12px; border-right: none; border-bottom: 1px solid var(--lt-border); }
        }

        /* 用户信息卡片：浅色渐变背景 */
        .cc-user-card {
            background: linear-gradient(135deg, var(--lt-bg-white) 0%, var(--lt-bg-primary) 100%);
            border-radius: 12px;
            padding: 28px 20px;
            color: var(--lt-text-primary);
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-bottom: 16px;
            cursor: pointer;
            border: 1px solid var(--lt-border);
        }
        .cc-user-card::before {
            content: ''; position: absolute;
            top: -40px; right: -40px;
            width: 120px; height: 120px;
            background: rgba(255,59,140,0.08);
            border-radius: 50%;
        }
        .cc-user-card .cc-avatar {
            width: 80px; height: 80px;
            border-radius: 50%;
            border: 3px solid #ff3b8c;
            margin: 0 auto 12px;
            background: rgba(255,59,140,0.12);
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; color: #ff3b8c;
            position: relative; z-index: 1;
        }
        .cc-user-card .cc-user-name { font-size: 18px; font-weight: 600; position: relative; z-index: 1; }
        .cc-user-card .cc-user-email { font-size: 12px; color: var(--lt-text-muted); margin-top: 6px; position: relative; z-index: 1; }

        /* 侧边导航菜单 */
        .cc-nav-menu {
            background: var(--lt-bg-white);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--lt-border);
        }
        .cc-nav-menu .cc-menu-title {
            font-size: 11px; text-transform: uppercase;
            letter-spacing: 1px; color: var(--lt-text-muted);
            padding: 12px 20px 6px; font-weight: 600;
        }
        .cc-nav-item {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 20px;
            cursor: pointer;
            transition: background 0.2s ease;
            border-left: 3px solid transparent;
            font-size: 14px; color: var(--lt-text-secondary);
            text-decoration: none;
        }
        .cc-nav-item:hover { background: var(--lt-bg-primary); border-left-color: #ff3b8c; color: var(--lt-text-primary); }
        .cc-nav-item.active { background: rgba(255,59,140,0.08); border-left-color: #ff3b8c; color: #ff3b8c; font-weight: 600; }
        .cc-nav-item i { width: 20px; text-align: center; font-size: 16px; color: var(--lt-text-muted); }
        .cc-nav-item.active i { color: #ff3b8c; }
        .cc-nav-item.logout { color: #ef4444; }
        .cc-nav-item.logout i { color: #ef4444; }
        .cc-nav-divider { height: 1px; background: var(--lt-border); margin: 4px 0; }

        /* 右侧内容区 */
        .cc-content-area { flex: 1; min-width: 0; background: var(--lt-bg-primary); min-height: calc(100vh - 172px); }
        .cc-content-section { display: none; background: var(--lt-bg-primary); }
        .cc-content-section.active { display: block; }
        .cc-section-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; color: var(--lt-text-primary); }
        .cc-section-desc { font-size: 13px; color: var(--lt-text-secondary); margin-bottom: 20px; }

        /* 统计卡片行 */
        .cc-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
        @media (max-width: 640px) {
            .cc-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
        }
        .cc-stat-card {
            background: var(--lt-bg-white);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--lt-border);
            display: flex; align-items: center; gap: 16px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }
        .cc-stat-card:hover { transform: translateY(-2px); box-shadow: var(--lt-shadow-md); }
        .cc-stat-icon {
            width: 50px; height: 50px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; flex-shrink: 0;
        }
        .cc-stat-icon.blue { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
        .cc-stat-icon.orange { background: rgba(249, 115, 22, 0.12); color: #f97316; }
        .cc-stat-icon.green { background: rgba(255, 59, 140, 0.12); color: #ff3b8c; }
        .cc-stat-num { font-size: 26px; font-weight: 700; color: var(--lt-text-primary); }
        .cc-stat-label { font-size: 13px; color: var(--lt-text-secondary); margin-top: 2px; }

        /* 业务卡片 */
        .cc-business-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
        @media (max-width: 768px) {
            .cc-business-cards { grid-template-columns: 1fr; }
        }
        .cc-business-card {
            background: var(--lt-bg-white);
            border-radius: 12px;
            padding: 24px;
            border: 2px solid transparent;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .cc-business-card:hover { border-color: #ff3b8c; box-shadow: var(--lt-shadow-md); }
        .cc-business-icon {
            width: 56px; height: 56px;
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; margin-bottom: 16px;
        }
        .cc-business-card.biz-1 .cc-business-icon { background: linear-gradient(135deg, #ff3b8c, #e02e76); color: #fff; }
        .cc-business-card.biz-2 .cc-business-icon { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
        .cc-business-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--lt-text-primary); }
        .cc-business-desc { font-size: 14px; color: var(--lt-text-secondary); margin-bottom: 12px; line-height: 1.7; }
        .cc-feature-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
        .cc-feature-tag {
            font-size: 11px;
            background: var(--lt-bg-primary); color: var(--lt-text-secondary);
            padding: 2px 8px; border-radius: 12px;
            font-weight: 500;
        }
        .cc-btn {
            display: inline-block; padding: 8px 20px;
            border-radius: 8px; font-size: 14px; font-weight: 600;
            cursor: pointer; transition: background 0.2s ease;
            border: none;
        }
        .cc-btn-primary { background: #ff3b8c; color: #fff; }
        .cc-btn-primary:hover { background: #e02e76; }
        .cc-btn-outline { background: transparent; color: #ff3b8c; border: 1px solid #ff3b8c; }
        .cc-btn-outline:hover { background: rgba(255, 59, 140, 0.08); }
        .cc-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 6px; }
        .cc-btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 4px; }

        /* 订单表格 */
        .cc-orders-container {
            background: var(--lt-bg-white);
            border-radius: 12px;
            border: 1px solid var(--lt-border);
            overflow: hidden;
            margin-bottom: 24px;
        }
        .cc-orders-header {
            padding: 20px;
            border-bottom: 1px solid var(--lt-border);
            font-size: 16px; font-weight: 600; color: var(--lt-text-primary);
        }
        .cc-order-table { width: 100%; border-collapse: collapse; }
        .cc-order-table th {
            background: var(--lt-bg-primary); padding: 12px 16px;
            text-align: left; font-size: 13px; font-weight: 600;
            color: var(--lt-text-secondary); border-bottom: 1px solid var(--lt-border);
        }
        .cc-order-table td {
            padding: 14px 16px; font-size: 13px;
            border-bottom: 1px solid var(--lt-border-light);
            vertical-align: middle; color: var(--lt-text-primary);
        }
        .cc-order-table tr:hover td { background: rgba(255, 59, 140, 0.04); }
        .cc-order-type { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
        .cc-order-type.cross { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
        .cc-order-type.sourcing { background: rgba(249, 115, 22, 0.12); color: #f97316; }
        .cc-order-type.course { background: rgba(255, 59, 140, 0.12); color: #ff3b8c; }
        .cc-status-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 500; }
        .cc-status-badge.shipping { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
        .cc-status-badge.completed { background: rgba(255, 59, 140, 0.12); color: #ff3b8c; }
        .cc-status-badge.pending { background: rgba(234, 179, 8, 0.15); color: #eab308; }
        .cc-status-badge.review { background: rgba(249, 115, 22, 0.15); color: #f97316; }
        .cc-status-badge.rejected { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
        .cc-product-info { display: flex; align-items: center; gap: 10px; }
        .cc-product-thumb {
            width: 40px; height: 40px; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; flex-shrink: 0;
        }

        /* 课程卡片网格 */
        .cc-courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
        @media (max-width: 640px) {
            .cc-courses-grid { grid-template-columns: 1fr; }
        }
        .cc-course-card {
            background: var(--lt-bg-white);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--lt-border);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .cc-course-card:hover { transform: translateY(-2px); box-shadow: var(--lt-shadow-md); }
        .cc-course-thumbnail {
            width: 100%; height: 180px;
            background: var(--lt-bg-primary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            position: relative;
        }
        .cc-course-thumbnail i { font-size: 48px; color: #ff3b8c; }
        .cc-course-thumbnail .play-overlay {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.4);
            opacity: 0; transition: opacity 0.2s ease;
        }
        .cc-course-thumbnail:hover .play-overlay { opacity: 1; }
        .cc-course-info { padding: 16px; }
        .cc-course-info h3 { font-size: 16px; font-weight: 700; color: var(--lt-text-primary); margin-bottom: 6px; }
        .cc-course-info p { font-size: 13px; color: var(--lt-text-secondary); margin-bottom: 12px; line-height: 1.5; }

        /* 地址卡片 */
        .cc-addresses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
        @media (max-width: 640px) {
            .cc-addresses-grid { grid-template-columns: 1fr; }
        }
        .cc-address-card {
            background: var(--lt-bg-white);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--lt-border);
            position: relative;
        }
        .cc-address-card.default { border-color: #ff3b8c; }
        .cc-address-card .cc-address-name { font-size: 16px; font-weight: 600; color: var(--lt-text-primary); margin-bottom: 4px; }
        .cc-address-card .cc-address-phone { font-size: 13px; color: var(--lt-text-secondary); margin-bottom: 4px; }
        .cc-address-card .cc-country-tag {
            display: inline-block; font-size: 11px;
            background: rgba(255, 59, 140, 0.12); color: #ff3b8c;
            padding: 2px 8px; border-radius: 10px;
            margin-bottom: 8px;
        }
        .cc-address-card .cc-address-detail { font-size: 13px; color: var(--lt-text-primary); margin-bottom: 12px; line-height: 1.5; }
        .cc-address-actions { display: flex; gap: 12px; }
        .cc-address-actions a { font-size: 12px; color: #ff3b8c; cursor: pointer; text-decoration: none; }
        .cc-address-actions a:hover { text-decoration: underline; }
        .cc-address-add {
            background: var(--lt-bg-white);
            border: 2px dashed var(--lt-border);
            border-radius: 12px;
            padding: 40px 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.2s ease;
        }
        .cc-address-add:hover { border-color: #ff3b8c; }
        .cc-address-add i { font-size: 32px; color: var(--lt-text-muted); margin-bottom: 8px; }
        .cc-address-add p { font-size: 14px; color: var(--lt-text-secondary); }

        /* ==================== 购物车样式（结算中心内嵌，与所有页面交互） ==================== */
        /* 购物车商品列表容器：每个商品卡片水平排列 */
        .cc-cart-list { margin-bottom: 24px; }
        .cc-cart-item {
            background: var(--lt-bg-white);
            border-radius: 12px;
            padding: 16px 20px;
            border: 1px solid var(--lt-border);
            display: flex; align-items: center; gap: 16px;
            margin-bottom: 12px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .cc-cart-item:hover { border-color: #ff3b8c; box-shadow: var(--lt-shadow-sm); }
        /* 购物车商品缩略图 */
        .cc-cart-item .cc-cart-thumb {
            width: 64px; height: 64px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; flex-shrink: 0;
            background: var(--lt-bg-primary);
        }
        .cc-cart-item .cc-cart-thumb img {
            width: 100%; height: 100%;
            object-fit: cover; border-radius: 10px;
        }
        /* 购物车商品信息文本 */
        .cc-cart-item .cc-cart-info { flex: 1; min-width: 0; }
        .cc-cart-item .cc-cart-name { font-size: 15px; font-weight: 600; color: var(--lt-text-primary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cc-cart-item .cc-cart-meta { font-size: 12px; color: var(--lt-text-secondary); }
        .cc-cart-item .cc-cart-price { font-size: 16px; font-weight: 700; color: #ff3b8c; white-space: nowrap; }
        /* 价格更新样式：展示旧价格删除线 */
        .cc-cart-item .cc-old-price { font-size: 12px; font-weight: 400; color: var(--lt-text-secondary); text-decoration: line-through; margin-right: 4px; }
        /* 价格已更新标记 */
        .cc-price-badge { display: inline-block; font-size: 10px; font-weight: 600; color: #fff; background: #f59e0b; padding: 1px 6px; border-radius: 10px; margin-left: 6px; vertical-align: middle; cursor: help; }
        .cc-price-badge.cc-price-badge-warn { background: #ef4444; }
        /* 价格变动提示条 */
        .cc-price-update-banner { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: #f59e0b; display: flex; align-items: center; gap: 8px; }
        .cc-price-update-banner i { font-size: 16px; flex-shrink: 0; }
        /* 价格变动商品卡片高亮 */
        .cc-cart-item.cc-cart-price-updated { border-left: 3px solid #f59e0b; }
        .cc-cart-item.cc-cart-price-warning { border-left: 3px solid #ef4444; }
        .cc-cart-item .cc-cart-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
        /* 购物车数量调节器 */
        .cc-cart-item .cc-cart-qty {
            display: flex; align-items: center; gap: 4px;
            background: var(--lt-bg-primary); border-radius: 8px; padding: 2px;
        }
        .cc-cart-item .cc-cart-qty button {
            width: 28px; height: 28px;
            border-radius: 6px; border: none;
            background: var(--lt-border); color: var(--lt-text-primary);
            font-size: 16px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s;
        }
        .cc-cart-item .cc-cart-qty button:hover { background: var(--lt-text-muted); }
        .cc-cart-item .cc-cart-qty span { width: 32px; text-align: center; font-size: 14px; color: var(--lt-text-primary); }
        .cc-cart-item .cc-cart-remove {
            background: none; border: none; color: #ef4444;
            cursor: pointer; font-size: 14px; padding: 6px;
            transition: color 0.2s;
        }
        .cc-cart-item .cc-cart-remove:hover { color: #dc2626; }
        /* 购物车为空时的占位提示 */
        .cc-cart-empty {
            text-align: center; padding: 60px 20px;
            color: var(--lt-text-muted); font-size: 15px;
        }
        .cc-cart-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
        /* 购物车底部结算栏 */
        .cc-cart-summary {
            background: var(--lt-bg-white);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid var(--lt-border);
            display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 12px;
        }
        .cc-cart-summary .cc-cart-total { font-size: 20px; font-weight: 700; color: var(--lt-text-primary); }
        .cc-cart-summary .cc-cart-total span { color: #ff3b8c; }

        /* ============================================================
        【已删除】后端数据同步面板CSS样式 — 该面板已从结算中心UI中移除，样式不再被任何HTML元素使用
        ============================================================ */

        /* 底部导航购物车角标：红色圆形数字提示，显示全局购物车商品数量 */
        .bottom-nav .nav-cart-badge {
            position: absolute; top: 2px; right: 50%;
            transform: translateX(18px);
            background: #ef4444; color: #fff;
            font-size: 10px; font-weight: 700;
            min-width: 18px; height: 18px;
            border-radius: 9px;
            display: flex; align-items: center; justify-content: center;
            padding: 0 4px;
        }
        .bottom-nav div { position: relative; }

        /* 表单样式 */
        .cc-form-group { margin-bottom: 16px; }
        .cc-form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--lt-text-primary); }
        .cc-form-group label .required { color: #ef4444; }
        .cc-form-group input, .cc-form-group textarea {
            width: 100%; padding: 10px 14px;
            border: 1px solid var(--lt-border);
            border-radius: 8px;
            font-size: 14px;
            background: var(--lt-bg-white); color: var(--lt-text-primary);
            transition: border-color 0.2s ease;
            font-family: inherit;
        }
        .cc-form-group input:focus, .cc-form-group textarea:focus {
            outline: none; border-color: #ff3b8c;
            box-shadow: 0 0 0 3px rgba(255, 59, 140, 0.12);
        }
        .cc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        @media (max-width: 640px) {
            .cc-form-row { grid-template-columns: 1fr; }
        }
        .cc-form-group textarea { resize: vertical; min-height: 80px; }

        /* 结账弹窗（浅色主题） */
        .cc-checkout-overlay {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 400;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .cc-checkout-overlay.show { opacity: 1; visibility: visible; }
        .cc-checkout-modal {
            background: var(--lt-bg-white);
            border-radius: 12px;
            width: 480px; max-width: 92vw; max-height: 85vh;
            overflow-y: auto;
            box-shadow: var(--lt-shadow-lg);
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        .cc-checkout-overlay.show .cc-checkout-modal { transform: translateY(0); }
        .cc-checkout-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--lt-border);
            display: flex; align-items: center; justify-content: space-between;
        }
        .cc-checkout-header h3 { font-size: 18px; font-weight: 700; color: var(--lt-text-primary); }
        .cc-checkout-close {
            background: none; border: none;
            font-size: 22px; cursor: pointer;
            color: var(--lt-text-muted); line-height: 1;
        }
        .cc-checkout-close:hover { color: var(--lt-text-primary); }
        .cc-checkout-body { padding: 24px; }
        .cc-checkout-product {
            background: var(--lt-bg-primary); border-radius: 8px;
            padding: 14px; margin-bottom: 20px;
            display: flex; align-items: center; gap: 12px;
        }
        .cc-checkout-product .cc-product-icon {
            width: 48px; height: 48px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; flex-shrink: 0;
        }
        .cc-checkout-product .cc-product-name { font-weight: 600; font-size: 14px; color: var(--lt-text-primary); }
        .cc-checkout-product .cc-product-price { font-size: 18px; font-weight: 700; color: #ff3b8c; }
        .cc-payment-methods { display: flex; gap: 10px; margin-bottom: 20px; }
        .cc-payment-method {
            flex: 1; padding: 14px 12px;
            border: 2px solid var(--lt-border);
            border-radius: 8px; text-align: center;
            cursor: pointer; transition: border-color 0.2s ease;
            font-size: 13px; font-weight: 500; color: var(--lt-text-secondary);
        }
        .cc-payment-method:hover { border-color: #ff3b8c; }
        .cc-payment-method.selected { border-color: #ff3b8c; background: rgba(255, 59, 140, 0.08); }
        .cc-payment-method i { display: block; font-size: 22px; margin-bottom: 6px; color: var(--lt-text-muted); }
        .cc-payment-method.selected i { color: #ff3b8c; }
        .cc-btn-confirm {
            width: 100%; padding: 14px;
            background: #ff3b8c; color: #fff;
            border: none; border-radius: 8px;
            font-size: 16px; font-weight: 700;
            cursor: pointer; transition: background 0.2s ease;
        }
        .cc-btn-confirm:hover { background: #e02e76; }

        /* 支付成功弹窗（浅色主题） */
        .cc-success-overlay {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 450;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .cc-success-overlay.show { opacity: 1; visibility: visible; }
        .cc-success-modal {
            background: var(--lt-bg-white);
            border-radius: 12px;
            width: 440px; max-width: 92vw;
            padding: 40px 32px;
            text-align: center;
            box-shadow: var(--lt-shadow-lg);
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        .cc-success-overlay.show .cc-success-modal { transform: translateY(0); }
        .cc-success-icon {
            width: 72px; height: 72px; border-radius: 50%;
            background: rgba(255, 59, 140, 0.12);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 20px; font-size: 36px; color: #ff3b8c;
        }
        .cc-success-title { font-size: 22px; font-weight: 700; color: #ff3b8c; margin-bottom: 10px; }
        .cc-success-message { font-size: 15px; color: var(--lt-text-secondary); margin-bottom: 16px; line-height: 1.6; }
        .cc-success-whatsapp {
            display: inline-flex; align-items: center; gap: 8px;
            background: rgba(255, 59, 140, 0.12); color: #ff3b8c;
            padding: 10px 20px; border-radius: 24px;
            font-size: 14px; font-weight: 600; margin-bottom: 20px;
        }
        .cc-success-whatsapp i { font-size: 20px; color: #25d366; }
        .cc-btn-success {
            padding: 10px 32px;
            background: #ff3b8c; color: #fff;
            border: none; border-radius: 24px;
            font-size: 15px; font-weight: 600;
            cursor: pointer; transition: background 0.2s ease;
        }
        .cc-btn-success:hover { background: #e02e76; }
        .cc-btn-cancel {
            padding: 10px 32px;
            background: var(--lt-border); color: var(--lt-text-primary);
            border: none; border-radius: 24px;
            font-size: 15px; font-weight: 600;
            cursor: pointer; transition: background 0.2s ease;
            margin-left: 10px;
        }
        .cc-btn-cancel:hover { background: var(--lt-text-muted); }
        .cc-success-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
        .cc-success-order-info {
            text-align: center;
            color: var(--lt-text-secondary);
            font-size: 13px;
            margin: 10px 0;
            padding: 8px 12px;
            background: rgba(255, 59, 140, 0.08);
            border-radius: 8px;
        }
        .cc-payment-progress {
            width: 100%;
            height: 6px;
            background: var(--lt-border);
            border-radius: 3px;
            overflow: hidden;
            margin: 15px 0;
        }
        .cc-payment-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff3b8c, #f59e0b);
            border-radius: 3px;
            transition: width 0.5s ease;
            animation: ccPaymentProgress 30s linear forwards;
        }
        @keyframes ccPaymentProgress {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        .cc-payment-countdown {
            text-align: center;
            color: var(--lt-text-secondary);
            font-size: 12px;
            margin-top: 8px;
        }

        /* Toast提示 */
        .cc-toast {
            position: fixed; bottom: 100px; left: 50%;
            transform: translateX(-50%);
            background: var(--lt-text-primary); color: #fff;
            padding: 12px 24px; border-radius: 24px;
            font-size: 14px; font-weight: 500;
            z-index: 600;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            box-shadow: var(--lt-shadow-md);
            border: 1px solid var(--lt-text-primary);
        }
        .cc-toast.show { opacity: 1; visibility: visible; }
        .cc-toast.error { border-color: #ef4444; color: #ef4444; }

        /* 视频播放弹窗（暗黑主题） */
        .cc-video-overlay {
            position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.9);
            z-index: 500;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .cc-video-overlay.show { opacity: 1; visibility: visible; }
        .cc-video-container {
            width: 90vw; max-width: 960px;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }
        .cc-video-container iframe { width: 100%; height: 540px; border: none; }
        @media (max-width: 640px) {
            .cc-video-container iframe { height: 240px; }
        }
        .cc-video-close {
            position: absolute; top: 12px; right: 12px;
            background: rgba(0,0,0,0.6); color: #fff;
            border: none; font-size: 20px; cursor: pointer;
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
        }

/* ===== Style Block 2 ===== */
/* 直播教学页面新增样式开始 - 适配浅色主题，参考直播课程-6.6无模拟版 */
:root {
    --lt-bg-primary: #f8fafb;
    --lt-bg-white: #ffffff;
    --lt-text-primary: #1a1d28;
    --lt-text-secondary: #5b6170;
    --lt-text-muted: #8b8f9a;
    --lt-accent: #ff3b8c;
    --lt-accent-hover: #e02e76;
    --lt-accent-soft: rgba(255, 59, 140, 0.08);
    --lt-gold: #f5a623;
    --lt-gold-soft: #fff8e7;
    --lt-blue: #2d7ef7;
    --lt-blue-soft: #eef5ff;
    --lt-green: #22c55e;
    --lt-green-soft: #f0fdf4;
    --lt-border: #e8ecf0;
    --lt-border-light: #f0f2f5;
    --lt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --lt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    --lt-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
    --lt-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
    --lt-radius-sm: 8px;
    --lt-radius-md: 12px;
    --lt-radius-lg: 18px;
    --lt-radius-xl: 24px;
    --lt-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lt-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 直播教学页面整体背景和文字颜色覆盖（浅色主题） */
#liveTeachingPage {
    background-color: var(--lt-bg-primary);
    color: var(--lt-text-primary);
    min-height: 100vh;
}

.lt-hero {
    background: linear-gradient(170deg, #fff5f5 0%, #ffffff 30%, #f8fafb 100%);
    padding: 60px 24px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lt-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 59, 140, 0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.lt-hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -60px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(45, 126, 247, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.lt-hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}
.lt-hero-badge {
    display: inline-block;
    background: var(--lt-accent-soft);
    color: var(--lt-accent);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}
.lt-hero h1 {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--lt-text-primary);
}
.lt-hero h1 .lt-highlight {
    background: linear-gradient(135deg, #ff3b8c, #ff78b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lt-hero p {
    font-size: 1.15rem;
    color: var(--lt-text-secondary);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.7;
}
.lt-hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.lt-hero-stat {
    text-align: center;
}
.lt-hero-stat .lt-stat-num {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ff3b8c;
}
.lt-hero-stat .lt-stat-label {
    font-size: 0.85rem;
    color: var(--lt-text-muted);
    margin-top: 2px;
}

.lt-section {
    padding: 50px 24px;
    max-width: 1260px;
    margin: 0 auto;
}
.lt-section-header {
    text-align: center;
    margin-bottom: 40px;
}
.lt-section-header h2 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.7px;
    margin-bottom: 8px;
    color: var(--lt-text-primary);
}
.lt-section-header p {
    color: var(--lt-text-secondary);
    font-size: 1rem;
}

.lt-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.lt-filter-tab {
    padding: 9px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--lt-bg-white);
    color: var(--lt-text-secondary);
    transition: var(--lt-transition);
    white-space: nowrap;
    font-family: inherit;
}
.lt-filter-tab:hover {
    border-color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
    color: #ff3b8c;
}
.lt-filter-tab.active {
    background: #ff3b8c;
    color: #fff;
    border-color: #ff3b8c;
}

.lt-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}
.lt-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--lt-text-muted);
}
.lt-empty-state i {
    font-size: 3.5rem;
    opacity: 0.25;
    margin-bottom: 16px;
    display: block;
}
.lt-empty-state p {
    font-size: 1rem;
    font-weight: 500;
}
.lt-loading-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--lt-text-muted);
}
.lt-loading-state i {
    font-size: 2rem;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
    display: block;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.lt-course-card {
    background: var(--lt-bg-white);
    border-radius: var(--lt-radius-lg);
    border: 1px solid var(--lt-border-light);
    overflow: hidden;
    transition: var(--lt-transition-slow);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--lt-shadow-sm);
}
.lt-course-card:hover {
    box-shadow: var(--lt-shadow-lg);
    transform: translateY(-4px);
    border-color: #ff3b8c;
}
.lt-course-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f0f2f5;
    overflow: hidden;
    cursor: pointer;
}
.lt-course-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.lt-course-card:hover .lt-course-card-thumb img {
    transform: scale(1.04);
}
.lt-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--lt-transition);
}
.lt-course-card:hover .lt-play-overlay {
    opacity: 1;
}
.lt-play-circle {
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--lt-shadow-lg);
    transition: var(--lt-transition);
    color: var(--lt-accent);
    font-size: 1.2rem;
}
.lt-play-circle:hover {
    transform: scale(1.08);
}
.lt-course-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ff3b8c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    letter-spacing: 0.3px;
    z-index: 2;
}
.lt-course-badge.lt-bestseller {
    background: var(--lt-gold);
    color: #fff;
}
.lt-course-badge.lt-new {
    background: var(--lt-blue);
    color: #fff;
}
.lt-course-card-body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lt-course-card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
    line-height: 1.4;
    cursor: pointer;
    color: var(--lt-text-primary);
}
.lt-course-card-body h3:hover {
    color: var(--lt-accent);
}
.lt-course-meta {
    font-size: 0.82rem;
    color: var(--lt-text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lt-course-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lt-course-desc {
    font-size: 0.9rem;
    color: var(--lt-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}
.lt-course-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--lt-border-light);
}
.lt-course-price {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ff3b8c;
}
.lt-course-price .lt-original {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--lt-text-muted);
    text-decoration: line-through;
    margin-left: 6px;
}
.lt-course-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.lt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: var(--lt-transition);
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: -0.2px;
}
.lt-btn-outline {
    background: transparent;
    border: 2px solid var(--lt-border);
    color: var(--lt-text-primary);
}
.lt-btn-outline:hover {
    border-color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
    color: #ff3b8c;
}
.lt-btn-primary {
    background: var(--lt-accent);
    color: #fff;
    border: 2px solid var(--lt-accent);
    box-shadow: 0 2px 8px rgba(255, 59, 140, 0.25);
}
.lt-btn-primary:hover {
    background: var(--lt-accent-hover);
    border-color: var(--lt-accent-hover);
    box-shadow: 0 4px 16px rgba(255, 59, 140, 0.35);
    transform: translateY(-1px);
}
.lt-btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
}
.lt-btn-block {
    width: 100%;
    justify-content: center;
}
.lt-btn-sm {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 50px;
}

/* 视频预览弹窗样式 */
.lt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lt-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.lt-modal {
    background: #fff;
    border-radius: var(--lt-radius-xl);
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--lt-shadow-xl);
    position: relative;
    animation: lt-modalIn 0.35s ease;
}
@keyframes lt-modalIn {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.lt-modal-close {
    position: sticky;
    top: 14px;
    right: 14px;
    float: right;
    z-index: 10;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--lt-border);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--lt-transition);
    color: var(--lt-text-primary);
}
.lt-modal-close:hover {
    background: rgba(255, 59, 140, 0.08);
    border-color: #ff3b8c;
    color: #ff3b8c;
}
.lt-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--lt-radius-xl) var(--lt-radius-xl) 0 0;
    overflow: hidden;
}
.lt-video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.lt-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1118;
    color: #fff;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
}
.lt-video-placeholder i {
    font-size: 3rem;
    opacity: 0.8;
}
.lt-video-placeholder span {
    font-size: 0.95rem;
    opacity: 0.7;
}
.lt-modal-body {
    padding: 24px 28px 28px;
}
.lt-modal-body h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--lt-text-primary);
}
.lt-modal-body .lt-modal-meta {
    font-size: 0.85rem;
    color: var(--lt-text-muted);
    margin-bottom: 16px;
}
.lt-modal-body .lt-modal-desc {
    color: var(--lt-text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
}
.lt-payment-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.lt-payment-option {
    flex: 1;
    min-width: 140px;
    padding: 16px;
    border: 2px solid var(--lt-border);
    border-radius: var(--lt-radius-md);
    text-align: center;
    cursor: pointer;
    transition: var(--lt-transition);
    font-weight: 600;
    background: #fff;
    color: var(--lt-text-primary);
}
.lt-payment-option:hover {
    border-color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
}
.lt-payment-option.selected {
    border-color: var(--lt-accent);
    background: var(--lt-accent-soft);
}
.lt-payment-option .lt-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--lt-text-primary);
}
.lt-payment-option .lt-label {
    font-size: 0.8rem;
    color: var(--lt-text-muted);
    margin-top: 2px;
}

/* Toast通知容器 */
.lt-toast-container {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lt-toast {
    background: #0f1118;
    color: #fff;
    padding: 14px 20px;
    border-radius: var(--lt-radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: var(--lt-shadow-lg);
    animation: lt-slideInRight 0.4s ease, lt-fadeOut 0.4s ease 2.6s forwards;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 400px;
}
.lt-toast.success {
    border-left: 4px solid var(--lt-green);
}
.lt-toast.info {
    border-left: 4px solid var(--lt-blue);
}
@keyframes lt-slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes lt-fadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

.lt-footer {
    background: #fff;
    border-top: 1px solid var(--lt-border-light);
    padding: 30px 24px;
    text-align: center;
    color: var(--lt-text-muted);
    font-size: 0.85rem;
}
.lt-footer .lt-secure-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 0.8rem;
}
.lt-footer .lt-secure-badges span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 语言切换按钮和搜索按钮样式 */
.lt-lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--lt-transition);
    letter-spacing: -0.2px;
    border: 2px solid var(--lt-border);
    background: var(--lt-bg-white);
    color: var(--lt-text-primary);
    font-family: inherit;
}
.lt-lang-toggle-btn:hover {
    border-color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
    color: #ff3b8c;
}
.lt-search-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--lt-transition);
    letter-spacing: -0.2px;
    border: 2px solid var(--lt-border);
    background: var(--lt-bg-white);
    color: var(--lt-text-primary);
    font-family: inherit;
}
.lt-search-toggle-btn:hover {
    border-color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
    color: #ff3b8c;
}
.lt-search-toggle-btn.active-search {
    border-color: var(--lt-accent);
    background: var(--lt-accent-soft);
    color: var(--lt-accent);
}

/* 搜索栏滑入动画 */
.lt-search-bar-wrapper {
    position: sticky;
    top: 64px;
    z-index: 49;
    display: flex;
    justify-content: center;
    padding: 0;
    background: var(--lt-bg-white);
    border-bottom: 1px solid var(--lt-border-light);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}
.lt-search-bar-wrapper.active {
    max-height: 60px;
    opacity: 1;
    padding: 10px 24px;
}
.lt-search-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    background: #f5f6f8;
    border-radius: 50px;
    padding: 6px 8px 6px 18px;
    border: 2px solid transparent;
    transition: var(--lt-transition);
}
.lt-search-bar-inner:focus-within {
    border-color: var(--lt-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.08);
}
.lt-search-bar-inner input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--lt-text-primary);
    outline: none;
    min-width: 0;
    letter-spacing: -0.2px;
}
.lt-search-bar-inner input::placeholder {
    color: var(--lt-text-muted);
    opacity: 0.7;
}
.lt-search-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lt-text-muted);
    padding: 6px 8px;
    border-radius: 50%;
    transition: var(--lt-transition);
    font-size: 0.85rem;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lt-search-clear-btn.visible {
    display: flex;
}
.lt-search-clear-btn:hover {
    color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
}
.lt-search-close-btn {
    background: #e8e8ec;
    border: none;
    cursor: pointer;
    color: var(--lt-text-secondary);
    padding: 6px 14px;
    border-radius: 50px;
    transition: var(--lt-transition);
    font-weight: 600;
    font-size: 0.82rem;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.2px;
}
.lt-search-close-btn:hover {
    background: #ff3b8c;
    color: #fff;
}

/* 页面头部导航栏样式（参考直播课程-6.6无模拟版，适配浅色主题，与畅销榜单页面一致） */
#liveTeachingPage .page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 179, 198, 0.9); /* 【背景色】淡玫粉色，与畅销榜单页面一致 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 59, 140, 0.2); /* 【底部边框】淡玫粉色边框 */
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
#liveTeachingPage .page-header h2 {
    color: var(--lt-text-primary);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -0.3px;
}
#liveTeachingPage .back-btn {
    color: var(--lt-text-secondary);
    background: transparent;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--lt-transition);
    padding: 0;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}
#liveTeachingPage .back-btn:hover {
    background: rgba(255, 59, 140, 0.08);
    color: #ff3b8c;
}

/* 响应式适配 */
@media (max-width: 768px) {
    #liveTeachingPage .page-header {
        padding: 0 10px;
        height: 56px;
    }
    #liveTeachingPage .back-btn {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }
    .lt-hero h1 { font-size: 2rem; }
    .lt-hero-stats { gap: 20px; }
    .lt-courses-grid { grid-template-columns: 1fr; }
    .lt-section { padding: 30px 10px; }
    .lt-modal { max-width: 95vw; border-radius: var(--lt-radius-lg); }
    .lt-payment-options { flex-direction: column; }
    .lt-search-bar-wrapper { padding: 10px 12px; }
    .lt-search-bar-inner { max-width: 100%; }
    .lt-search-close-btn { padding: 6px 10px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
    #liveTeachingPage .page-header {
        padding: 0 8px;
        height: 52px;
    }
    #liveTeachingPage .back-btn {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    .lt-hero h1 { font-size: 1.6rem; }
    .lt-course-price-row { flex-direction: column; align-items: flex-start; }
    .lt-course-actions { width: 100%; }
    .lt-course-actions .lt-btn { flex: 1; text-align: center; justify-content: center; }
}
/* 直播教学页面新增样式结束 */

/* ============================================================
   首页卡片区域 - 浅色主题（白底黑字 + 亮玫粉色点缀）
   核心服务、课程介绍、专业团队、优选产品
   ============================================================ */
#homePage .gsap-card-section,
#homePage #gsapWorks,
#homePage #gsapAbout,
#homePage #gsapServices,
#homePage #gsapClients,
#homePage #gsapContact,
#homePage #gsapFooter {
    background: var(--lt-bg-primary) !important;
    color: var(--lt-text-primary);
}
#homePage .section-title {
    color: var(--lt-text-primary);
}
#homePage .section-label {
    color: #ff3b8c;
    border-color: rgba(255, 59, 140, 0.3);
}
#homePage .work-item {
    background: var(--lt-bg-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--lt-border-light, rgba(17, 24, 39, 0.08));
}
#homePage .work-item::after {
    background: radial-gradient(circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 59, 140, 0.10), transparent 70%);
}
#homePage .work-item-clickable:hover {
    box-shadow: 0 8px 30px rgba(255, 59, 140, 0.25);
}
#homePage .work-item-overlay {
    background: linear-gradient(to top, rgba(255, 59, 140, 0.85) 0%, transparent 50%);
}
#homePage .work-item-info h3 {
    color: #ffffff;
}
#homePage .work-item-info p {
    color: rgba(255, 255, 255, 0.85);
}
#homePage .gsap-card-refresh {
    color: #ff3b8c;
    border: 1px solid rgba(255, 59, 140, 0.2);
}
#homePage .gsap-card-refresh:hover {
    background: rgba(255, 59, 140, 0.08);
    border-color: #ff3b8c;
    color: #ff3b8c;
}

/* About介绍区块 */
#homePage .about-heading {
    color: var(--lt-text-primary);
}
#homePage .about-body {
    color: var(--lt-text-muted);
}
#homePage .about-stat h4 {
    color: #ff3b8c;
}
#homePage .about-stat p {
    color: var(--lt-text-muted);
}

/* Services服务卡片 */
#homePage .service-card {
    background: var(--lt-bg-white);
    border: 1px solid var(--lt-border-light, rgba(17, 24, 39, 0.08));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
#homePage .service-card::after {
    background: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 59, 140, 0.06), transparent 70%);
}
#homePage .service-card::before {
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 59, 140, 0.05), transparent 40%);
}
#homePage .service-card-clickable:hover {
    box-shadow: 0 12px 40px rgba(255, 59, 140, 0.25);
    border-color: rgba(255, 59, 140, 0.3);
}
#homePage .service-icon {
    background: rgba(255, 59, 140, 0.08);
    color: #ff3b8c;
}
#homePage .service-card h3 {
    color: var(--lt-text-primary);
}
#homePage .service-card p {
    color: var(--lt-text-muted);
}
#homePage .service-link {
    color: #ff3b8c;
}
#homePage .service-link:hover {
    color: #e02e76;
}

/* Clients客户Logo */
#homePage .marquee-item {
    color: rgba(255, 59, 140, 0.4);
}
#homePage .marquee-item:hover {
    color: #ff3b8c;
}

/* Contact联系区块 */
#homePage .contact-bg-gradient {
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 59, 140, 0.08) 0%, transparent 70%);
}
#homePage .contact-heading {
    color: var(--lt-text-primary);
}
#homePage .contact-sub {
    color: var(--lt-text-muted);
}
#homePage .form-input {
    background: var(--lt-bg-white);
    border: 1px solid var(--lt-border-light, rgba(17, 24, 39, 0.1));
    color: var(--lt-text-primary);
}
#homePage .form-input:focus {
    border-color: #ff3b8c;
    background: rgba(255, 59, 140, 0.04);
}
#homePage .form-input::placeholder {
    color: var(--lt-text-muted);
}
#homePage .form-submit {
    background: #ff3b8c;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 59, 140, 0.25);
}
#homePage .form-submit:hover {
    box-shadow: 0 8px 30px rgba(255, 59, 140, 0.4);
}

/* Footer页脚 */
#homePage #gsapFooter {
    background: var(--lt-bg-white) !important;
    color: var(--lt-text-primary);
    border-top: 1px solid var(--lt-border-light, rgba(17, 24, 39, 0.08));
}
#homePage .footer-brand {
    color: var(--lt-text-primary);
}
#homePage .footer-brand span {
    color: #ff3b8c;
}
#homePage .footer-copy {
    color: var(--lt-text-muted);
}
#homePage .footer-socials a {
    border: 1px solid rgba(255, 59, 140, 0.2);
    color: var(--lt-text-muted);
}
#homePage .footer-socials a:hover {
    border-color: #ff3b8c;
    color: #ff3b8c;
    background: rgba(255, 59, 140, 0.08);
}

/* ============================================================
   首页卡片折叠功能样式
   核心服务、课程介绍、专业团队、优选产品 默认显示前3个，点击更多显示全部
   ============================================================ */
.home-card-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}
.home-collapsible-grid .work-item:nth-child(n+4) {
    display: none;
}
.home-collapsible-grid.home-grid-expanded .work-item:nth-child(n+4) {
    display: block;
}
.home-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 32px auto 0;
    padding: 12px 32px;
    background: transparent;
    color: var(--lt-text-primary);
    border: 2px solid var(--lt-border-medium, #d1d5db);
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.home-show-more-btn:hover {
    background: rgba(255, 59, 140, 0.08);
    border-color: #ff3b8c;
    color: #ff3b8c;
}
.home-show-more-btn .home-show-more-icon {
    transition: transform 0.3s ease;
}
.home-show-more-btn.home-btn-expanded .home-show-more-icon {
    transform: rotate(180deg);
}
@media (max-width: 768px) {
    .home-show-more-btn {
        margin: 24px auto 0;
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   核心服务弹窗（Core Service Popup）样式
   全屏弹窗，左侧图片，右侧详情，底部操作栏
   内联样式通过 showCoreServiceDetail() 动态注入，此处为全局动画
   ============================================================ */
@keyframes tsSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   客服面板（Chat Panel）样式
   嵌入在主页面中的模态客服聊天面板
   ============================================================ */
.chat-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
}
.chat-panel-backdrop.active {
    display: flex;
}
.chat-panel-window {
    width: 420px;
    height: auto;
    max-height: min(650px, calc(100vh - 32px));
    background: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: chat-panel-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chat-panel-slide-in {
    from { opacity: 0; transform: translateY(30px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel-header {
    flex-shrink: 0;
    height: 64px;
    background: linear-gradient(135deg, #003366 0%, #1a56db 60%);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
}
.chat-panel-avatar-group {
    position: relative;
    flex-shrink: 0;
}
.chat-panel-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.chat-panel-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34d399;
    border: 2px solid #003366;
    animation: chat-panel-pulse 2.5s ease-in-out infinite;
}
@keyframes chat-panel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.chat-panel-header-info {
    flex: 1;
    min-width: 0;
}
.chat-panel-header-company {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.chat-panel-header-status {
    font-size: 11px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
}
.chat-panel-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    display: inline-block;
    flex-shrink: 0;
}
.chat-panel-timezone-badge {
    font-size: 9px;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: 9999px;
}
.chat-panel-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.2s;
    flex-shrink: 0;
}
.chat-panel-close-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}
.chat-panel-compliance-banner {
    flex-shrink: 0;
    background: #fefce8;
    border-bottom: 1px solid #fde68a;
    padding: 6px 12px;
    font-size: 10px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
}
.chat-panel-compliance-banner a {
    color: #92400e;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.chat-panel-shield-icon {
    flex-shrink: 0;
    font-size: 12px;
}
.chat-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafbfc;
    scroll-behavior: smooth;
}
.chat-panel-body::-webkit-scrollbar {
    width: 4px;
}
.chat-panel-body::-webkit-scrollbar-track {
    background: transparent;
}
.chat-panel-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}
.chat-panel-msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: chat-panel-msg-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-panel-msg.agent {
    align-self: flex-start;
}
.chat-panel-msg.user {
    align-self: flex-end;
}
.chat-panel-msg .bubble {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-word;
}
.chat-panel-msg.agent .bubble {
    background: #fff;
    border: 1px solid #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-panel-msg.user .bubble {
    background: #1a56db;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-panel-msg .timestamp {
    font-size: 9px;
    color: #9ca3af;
    margin-top: 3px;
    padding: 0 4px;
}
.chat-panel-msg.user .timestamp {
    text-align: right;
}
.chat-panel-msg.system {
    align-self: center;
    max-width: 92%;
}
.chat-panel-msg.system .bubble {
    background: #f3f4f6;
    border: none;
    color: #4b5563;
    font-size: 10.5px;
    text-align: center;
    border-radius: 6px;
    padding: 7px 12px;
    box-shadow: none;
}
.chat-panel-msg.system .timestamp {
    display: none;
}
@keyframes chat-panel-msg-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    animation: chat-panel-msg-in 0.3s ease;
}
.chat-panel-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c4c9cf;
    animation: chat-panel-typing-bounce 1.4s ease-in-out infinite;
}
.chat-panel-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-panel-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-panel-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); background: #c4c9cf; }
    30% { transform: translateY(-6px); background: #8b9198; }
}
.chat-panel-consent-overlay {
    position: absolute;
    inset: 0;
    top: 64px;
    background: rgba(255, 255, 255, 0.99);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 18px;
    text-align: center;
    border-radius: 0 0 14px 14px;
    overflow-y: auto;
}
.chat-panel-consent-overlay.hidden {
    display: none;
}
.chat-panel-consent-icon {
    font-size: 28px;
    margin-bottom: 10px;
}
.chat-panel-consent-overlay h3 {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}
.chat-panel-consent-subtitle {
    font-size: 11px;
    color: #4b5563;
    margin-bottom: 12px;
    line-height: 1.5;
}
.chat-panel-consent-details {
    background: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    text-align: left;
    font-size: 10.5px;
    color: #4b5563;
    line-height: 1.5;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #f3f4f6;
    margin-bottom: 12px;
}
.chat-panel-consent-details strong {
    color: #111827;
    font-weight: 600;
}
.chat-panel-consent-details p {
    margin: 4px 0;
    line-height: 1.5;
}
.chat-panel-consent-details ul {
    padding-left: 16px;
    margin: 4px 0;
}
.chat-panel-consent-details li {
    margin-bottom: 2px;
}
.chat-panel-consent-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
    cursor: pointer;
    text-align: left;
}
.chat-panel-consent-checkbox-row input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1a56db;
}
.chat-panel-consent-checkbox-row label {
    font-size: 11px;
    color: #111827;
    cursor: pointer;
    line-height: 1.5;
}
.chat-panel-consent-checkbox-row label a {
    color: #1a56db;
    text-decoration: underline;
    font-weight: 500;
}
.chat-panel-btn-consent {
    width: 100%;
    padding: 11px;
    border-radius: 9999px;
    border: none;
    background: #d1d5db;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: not-allowed;
    transition: all 0.2s;
}
.chat-panel-btn-consent.active {
    background: #1a56db;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.chat-panel-btn-consent.active:hover {
    background: #1e40af;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.chat-panel-input-area {
    flex-shrink: 0;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.chat-panel-input-area.disabled {
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(30%);
}
.chat-panel-input-area textarea {
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 9999px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    resize: none;
    outline: none;
    max-height: 80px;
    line-height: 1.4;
    transition: border-color 0.2s;
    background: #fafbfc;
    color: #111827;
}
.chat-panel-input-area textarea:focus {
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.08);
    background: #fff;
}
.chat-panel-btn-send {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1a56db;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.chat-panel-btn-send:hover {
    background: #1e40af;
    transform: scale(1.04);
}
.chat-panel-btn-send:active {
    transform: scale(0.92);
}
.chat-panel-btn-send svg {
    width: 18px;
    height: 18px;
    fill: #fff;
}
.chat-panel-btn-send:disabled {
    background: #d5d9dd;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.chat-panel-footer-strip {
    flex-shrink: 0;
    height: 32px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 9px;
    color: #9ca3af;
    padding: 0 10px;
    flex-wrap: wrap;
}
.chat-panel-footer-strip a {
    color: #9ca3af;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.chat-panel-footer-strip a:hover {
    color: #111827;
}
.chat-panel-footer-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}
.chat-panel-contact-bar {
    flex-shrink: 0;
    background: #f0f7ff;
    border-top: 1px solid #bfdbfe;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.chat-panel-contact-title {
    font-size: 10px;
    font-weight: 700;
    color: #111827;
}
.chat-panel-contact-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.chat-panel-contact-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    color: #111827;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
}
.chat-panel-contact-item:hover {
    border-color: #1a56db;
    background: #eff6ff;
    color: #1a56db;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.chat-panel-service-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
    max-width: 85%;
    width: 100%;
}
.chat-panel-service-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-panel-service-card:hover {
    border-color: #1a56db;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transform: translateX(2px);
}
.chat-panel-service-card .card-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.chat-panel-service-card .card-icon.blue { background: #eff6ff; color: #1a56db; }
.chat-panel-service-card .card-icon.green { background: #ecfdf5; color: #059669; }
.chat-panel-service-card .card-icon.amber { background: #fffbeb; color: #d97706; }
.chat-panel-service-card .card-content {
    flex: 1;
    min-width: 0;
}
.chat-panel-service-card .card-title {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}
.chat-panel-service-card .card-desc {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 1px;
}
.chat-panel-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    align-self: flex-start;
    max-width: 85%;
}
.chat-panel-quick-reply-btn {
    padding: 7px 13px;
    border-radius: 9999px;
    border: 1.5px solid #1a56db;
    background: #fff;
    color: #1a56db;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    white-space: nowrap;
}
.chat-panel-quick-reply-btn:hover {
    background: #1a56db;
    color: #fff;
}
.chat-panel-quick-reply-btn:active {
    transform: scale(0.95);
}
.chat-panel-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: chat-panel-fade-in 0.2s ease;
}
.chat-panel-modal-backdrop.hidden {
    display: none;
}
@keyframes chat-panel-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.chat-panel-modal-dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    padding: 22px 20px;
    position: relative;
    animation: chat-panel-modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chat-panel-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel-modal-dialog h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #111827;
}
.chat-panel-modal-dialog .modal-meta {
    font-size: 10px;
    color: #9ca3af;
    margin-bottom: 14px;
}
.chat-panel-modal-dialog .modal-body {
    font-size: 12px;
    line-height: 1.7;
    color: #4b5563;
}
.chat-panel-modal-dialog .modal-body h4 {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 14px 0 5px;
}
.chat-panel-modal-dialog .modal-body p {
    margin-bottom: 6px;
}
.chat-panel-modal-dialog .modal-body ul {
    padding-left: 18px;
    margin: 5px 0;
}
.chat-panel-modal-dialog .modal-body li {
    margin-bottom: 3px;
}
.chat-panel-modal-dialog .modal-body .lang-block {
    background: #f9fafb;
    border-left: 3px solid #1a56db;
    padding: 8px 12px;
    margin: 10px 0;
    border-radius: 0 6px 6px 0;
}
.chat-panel-modal-dialog .modal-body .lang-block .lang-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a56db;
    margin-bottom: 3px;
}
.chat-panel-modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    color: #111827;
}
.chat-panel-modal-close-btn:hover {
    background: #e5e7eb;
}

/* ===== 非办公时间提示 · After-Hours Banner ===== */
.chat-panel-after-hours-banner {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    font-size: 12px;
    color: #7c2d12;
    line-height: 1.6;
    margin: 4px 0;
}
.chat-panel-after-hours-banner .ah-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}
.chat-panel-after-hours-banner .ah-content strong {
    color: #9a3412;
    font-size: 13px;
}
.chat-panel-after-hours-banner .ah-content small {
    color: #a1a1aa;
}
.chat-panel-msg.after-hours .bubble {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

/* ===== 离线状态点 · Offline Status Dot ===== */
.chat-panel-status-dot.offline {
    background: #f87171 !important;
    animation: chat-panel-pulse-offline 2s infinite;
}
@keyframes chat-panel-pulse-offline {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@media (max-width: 480px) {
    .chat-panel-backdrop {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }
    .chat-panel-window {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .chat-panel-consent-overlay {
        top: 64px;
        border-radius: 0;
    }
    .chat-panel-modal-dialog {
        max-width: 95vw;
        padding: 18px 14px;
        max-height: 80vh;
    }
}

/* ===== Style Block 3 ===== */
.refresh-btn.spin i { animation: spin 0.8s linear infinite; }

/* ===== WCAG 2.1 AA 无障碍样式 ===== */
/* Skip-to-content 键盘导航链接 */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10001;
    padding: 12px 20px;
    background: #6F61A8;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: 3px solid #EDC200;
    outline-offset: 2px;
}

/* 键盘焦点可见指示器 */
:focus-visible {
    outline: 3px solid #EDC200 !important;
    outline-offset: 2px;
}
/* 鼠标点击时不显示焦点环（保留 :focus-visible 的默认行为） */
:focus:not(:focus-visible) {
    outline: none;
}

/* 屏幕阅读器专用文本 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 减少动画偏好适配 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .page {
        transition: none;
    }
    .video-course-card {
        transition: none;
    }
}
.refreshing { opacity: 0.5; pointer-events: none; }

/* 飞入购物车动画 */
.fly-to-cart {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    will-change: transform, opacity;
}
.fly-to-cart img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.modal-cart-btn.added {
    background: #10b981 !important;
    color: #fff !important;
    transition: background 0.3s ease, color 0.3s ease;
}