/* 防止移动端横向滚动 */
        html, body {
            overflow-x: hidden;
            width: 100%;
        }
        
        body { 
            background-color: #fffaf5;
        }
        
        /* 优化页面渲染性能 */
        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* 减少布局抖动 */
        #app {
            will-change: opacity;
            contain: layout style paint;
        }
        
        /* Header 固定高度，防止抖动 */
        header {
            height: 4rem; /* 64px */
            will-change: background, box-shadow;
            contain: layout; /* 隔离布局影响 */
        }
        
        @media (min-width: 768px) {
            header {
                height: 5rem; /* 80px */
            }
        }
        
        /* Header 内容容器防止抖动 */
        header > div {
            height: 100%;
        }
        
        header .flex.justify-between {
            height: 100%;
        }
        
        /* 优化导航栏过渡 */
        #desktop-nav {
            min-height: 1.5rem; /* 防止高度变化 */
            contain: paint; /* 隔离绘制 */
        }
        
        #desktop-nav a {
            transition: color 0.15s ease-in-out;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            position: relative;
            will-change: color; /* 只优化颜色变化 */
        }
        
        /* 防止下划线导致高度变化 */
        #desktop-nav a span {
            position: absolute;
            bottom: -0.5rem;
            left: 0;
            right: 0;
            pointer-events: none;
        }
        
        /* 防止图标闪烁和布局变化 */
        [data-lucide] {
            display: inline-block;
            width: 1em;
            height: 1em;
            flex-shrink: 0;
        }
        
        /* 图标加载后的样式 */
        [data-lucide].lucide {
            flex-shrink: 0;
            vertical-align: middle;
        }
        
        /* 认证区域固定宽度，防止抖动 */
        #auth-actions {
            min-width: 140px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            contain: layout style; /* 隔离布局和样式 */
        }
        
        /* 登录按钮固定尺寸 */
        #auth-actions > button {
            flex-shrink: 0;
        }
        
        /* 用户头像固定尺寸 */
        #auth-actions .w-9.h-9 {
            flex-shrink: 0;
            width: 2.25rem !important;
            height: 2.25rem !important;
        }
        
        /* 语言切换器防止抖动 */
        #language-switcher {
            contain: layout;
        }
        
        /* 移动菜单按钮固定尺寸 */
        #mobile-menu-btn {
            width: 2.5rem;
            height: 2.5rem;
            flex-shrink: 0;
        }
        
        /* 隐藏滚动条但保留功能 */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #d6d3d1;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a29e;
        }
        * {
            scrollbar-width: thin;
            scrollbar-color: #d6d3d1 transparent;
        }
        
        /* 验证码错误抖动动画 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
            20%, 40%, 60%, 80% { transform: translateX(8px); }
        }
        .shake {
            animation: shake 0.6s ease-in-out;
        }
        
        /* 单次弹跳动画 */
        @keyframes bounce-once {
            0%, 100% { transform: translateY(0); }
            25% { transform: translateY(-10px); }
            50% { transform: translateY(0); }
            75% { transform: translateY(-5px); }
        }
        .animate-bounce-once {
            animation: bounce-once 0.6s ease-in-out;
        }
        
        /* 浮窗动画 - 慢速弹跳 */
        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .animate-bounce-slow {
            animation: bounce-slow 3s ease-in-out infinite;
        }
        
        /* 浮窗动画 - 慢速脉冲 */
        @keyframes pulse-slow {
            0%, 100% { opacity: 0.75; }
            50% { opacity: 1; }
        }
        .animate-pulse-slow {
            animation: pulse-slow 3s ease-in-out infinite;
        }
        
        /* 跑马灯动画 */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .marquee-container {
            display: flex;
            overflow: hidden;
            width: 100%;
        }
        .marquee-content {
            display: flex;
            animation: marquee 30s linear infinite;
            flex-shrink: 0 !important; /* 防止被压缩 */
            min-width: auto !important; /* 覆盖全局样式 */
            width: max-content !important; /* 确保宽度由内容决定 */
        }
        .marquee-content:hover {
            animation-play-state: paused;
        }
        .marquee-content span {
            flex-shrink: 0 !important; /* 防止span被压缩 */
            min-width: auto !important;
        }
        
        /* 验证码输入框样式 */
        .code-input {
            width: 3rem;
            height: 3.5rem;
            font-size: 1.5rem;
            font-weight: 700;
            text-align: center;
            border: 2px solid #e7e5e4;
            border-radius: 0.75rem;
            background: #fafaf9;
            transition: all 0.2s;
        }
        .code-input:focus {
            outline: none;
            border-color: #f97316;
            background: white;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
        }
        .code-input.error {
            border-color: #ef4444;
            background: #fef2f2;
            color: #dc2626;
        }
        
        /* 搜索筛选器下拉框样式优化 */
        .search-filter-select {
            background-image: linear-gradient(to bottom, #ffffff, #fafaf9);
            position: relative;
            transition: all 0.3s ease;
        }
        
        .search-filter-select:hover {
            background-image: linear-gradient(to bottom, #ffffff, #fff7ed);
            border-color: #fb923c !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
        }
        
        .search-filter-select:focus {
            background: white;
            border-color: #f97316 !important;
            box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
        }
        
        /* 选中非默认选项后的样式 */
        .search-filter-select.has-value {
            background: linear-gradient(to right, #fff7ed, #fef3c7);
            border-color: #fb923c !important;
            color: #ea580c;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(249, 115, 22, 0.12);
        }
        
        .search-filter-select.has-value:hover {
            background: linear-gradient(to right, #fed7aa, #fde68a);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
        }
        
        /* 移动端下拉框优化 */
        /* ==================== 移动端适配样式 ==================== */
        @media (max-width: 768px) {
            /* 搜索筛选器优化 */
            .search-filter-select {
                font-size: 13px;
                padding: 8px 12px;
                padding-right: 32px;
            }
            
            /* Hero 区域优化 */
            h1 {
                font-size: 1.875rem !important; /* 30px */
                line-height: 1.2 !important;
            }
            
            h2 {
                font-size: 1.5rem !important; /* 24px */
                line-height: 1.3 !important;
            }
            
            h3 {
                font-size: 1.25rem !important; /* 20px */
            }
            
            /* 优化按钮触摸区域 */
            button, a.btn, .btn {
                min-height: 44px;
                padding: 0.75rem 1.25rem;
            }
            
            /* 卡片间距优化 */
            .card-grid {
                gap: 1rem !important;
            }
            
            /* 表单输入框优化 */
            input, select, textarea {
                font-size: 16px !important; /* 防止 iOS 自动缩放 */
                padding: 0.75rem !important;
            }
            
            /* Modal 弹窗优化 */
            .modal-content {
                max-height: 90vh;
                margin: 1rem;
                border-radius: 1.5rem;
            }
            
            /* 优化触摸友好的间距 */
            .touch-friendly {
                padding: 1rem;
            }
            
            /* Footer 优化 */
            footer {
                padding: 2rem 0;
            }
            
            footer .grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            /* 搜索框优化 */
            .search-box {
                width: 100%;
            }
            
            /* 隐藏桌面端元素 */
            .hide-mobile {
                display: none !important;
            }
            
            /* 移动端显示 */
            .show-mobile {
                display: block !important;
            }
            
            /* ===== 分类栏移动端优化 ===== */
            #category-nav {
                /* 完全圆角背景 (pill shape) */
                border-radius: 9999px !important;
                padding: 1rem !important;
                width: 100%;
                max-width: calc(100vw - 2rem);
                margin: 60px auto 0 auto; /* 上边距60px */
                background: white !important;
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
                border: 2px solid rgba(249, 115, 22, 0.2) !important;
                position: relative;
            }
            
            /* 添加渐变边缘提示（表示可以滚动） */
            #category-nav::after {
                content: '';
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                width: 3rem;
                background: linear-gradient(to left, white, transparent);
                pointer-events: none;
                border-radius: 0 9999px 9999px 0;
            }
            
            #category-filters {
                /* 改为横向滚动，不换行 */
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                gap: 0.5rem !important;
                padding: 0.25rem 0.5rem;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                /* 隐藏滚动条但保留功能 */
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            
            #category-filters::-webkit-scrollbar {
                display: none;
            }
            
            /* 分类按钮在移动端的样式 */
            #category-filters button {
                flex-shrink: 0; /* 防止按钮被压缩 */
                white-space: nowrap; /* 防止文字换行 */
                font-size: 0.875rem; /* 14px */
                padding: 0.5rem 1rem !important;
                min-width: auto;
            }
            
            /* 分类栏容器位置调整 */
            #category-nav {
                top: 4rem !important; /* 移动端 header 高度是 64px */
            }
            
            /* 网格布局优化 - 单列显示 */
            #destination-results {
                grid-template-columns: 1fr !important;
                gap: 1.25rem !important;
            }
            
            /* 网格布局优化 - 单列显示 */
            #destination-results {
                grid-template-columns: 1fr !important;
                gap: 1.25rem !important;
            }
            
            /* 搜索信息栏优化 */
            #search-info {
                padding: 0.75rem 1rem !important; /* 减小上下内边距 */
                margin: 150px 0 1.5rem 0 !important; /* 上边距150px */
                z-index: 10 !important; /* 确保搜索信息框在合适的层级，不遮挡其他元素 */
            }
            
            #search-info > div {
                flex-direction: row !important; /* 保持横向布局 */
                align-items: center !important; /* 垂直居中对齐 */
                justify-content: center !important; /* 整体居中 */
                gap: 1rem !important; /* 内容和按钮之间的间距 */
                flex-wrap: nowrap !important; /* 不换行 */
            }
            
            /* 搜索信息文字区域 */
            #search-info .flex-col {
                text-align: center !important; /* 文字居中 */
                gap: 0.25rem !important; /* 减小标题和计数之间的间距 */
            }
            
            /* 清除按钮在移动端的样式 */
            #search-info button {
                flex-shrink: 0; /* 防止按钮被压缩 */
            }
            
            /* 分类导航和套餐列表间距优化 */
            .sticky.z-40:has(#category-nav) {
                margin-bottom: 4rem !important; /* 增大分类导航和套餐列表的间距 */
            }
            
            /* ===== 首页 Hero 区域优化 ===== */
            /* 搜索框容器优化 */
            .max-w-xl {
                max-width: 100% !important;
                padding-left: 0;
                padding-right: 0;
            }
            
            .max-w-3xl {
                max-width: 100% !important;
            }
            
            /* 搜索框适配 */
            .relative.group .relative.bg-white {
                padding: 0.5rem !important;
                flex-wrap: nowrap;
            }
            
            .relative.group input[type="text"] {
                padding: 0.75rem 0.5rem !important;
                font-size: 16px !important;
                min-width: 0; /* 允许 input 缩小 */
            }
            
            .relative.group button {
                padding: 0.75rem 1rem !important;
                font-size: 14px !important;
                flex-shrink: 0; /* 防止按钮被压缩 */
            }
            
            /* 搜索图标优化 */
            .relative.group .ml-4 {
                margin-left: 0.5rem !important;
            }
            
            /* 热门目的地按钮优化 */
            .flex.flex-wrap.justify-center.gap-3,
            .flex.flex-wrap.justify-center.gap-2 {
                gap: 0.5rem !important;
            }
            
            .flex.flex-wrap.justify-center button {
                padding: 0.5rem 1rem !important;
                font-size: 0.875rem !important;
            }
            
            /* ===== 功能特性卡片优化 ===== */
            .grid.grid-cols-1.md\\:grid-cols-3 {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
            }
            
            /* ===== 套餐卡片移动端优化 ===== */
            .shadow-card {
                padding: 1.25rem !important;
            }
            
            .shadow-card h3 {
                font-size: 1.5rem !important;
            }
            
            .shadow-card .text-3xl {
                font-size: 2rem !important;
            }
            
            /* ===== 防止文字溢出 ===== */
            h1, h2, h3, h4, h5, h6, p, span, div {
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            /* ===== Hero 区域背景装饰优化 ===== */
            .absolute.top-\[-10\%\],
            .absolute.bottom-\[10\%\] {
                display: none; /* 移动端隐藏大装饰背景 */
            }
            
            /* ===== 顶部间距优化 ===== */
            .pt-16.pb-24 {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }
            
            .lg\\:pt-32.lg\\:pb-40 {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }
            
            /* ===== 特性区域优化 ===== */
            .py-20 {
                padding-top: 3rem !important;
                padding-bottom: 3rem !important;
            }
            
            .p-8 {
                padding: 1.5rem !important;
            }
            
            /* ===== Modal 弹窗优化 ===== */
            .max-w-4xl, .max-w-2xl, .max-w-md {
                max-width: calc(100vw - 2rem) !important;
            }
            
            .px-6.sm\\:px-8,
            .px-6.sm\\:px-10 {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
            
            .pt-6.sm\\:pt-8,
            .py-6.sm\\:py-8 {
                padding: 1rem !important;
            }
            
            /* ===== 导航栏移动端固定 ===== */
            header {
                position: sticky !important;
                top: 0 !important;
            }
            
            /* ===== 防止图片超出 ===== */
            img {
                max-width: 100%;
                height: auto;
            }
            
            /* ===== 表格横向滚动 ===== */
            table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            /* ===== 跑马灯优化 ===== */
            .marquee-container {
                max-width: 100vw;
                overflow: hidden;
                display: block !important;
            }
            
            .marquee-content {
                min-width: auto !important;
                width: max-content !important;
            }
            
            /* 跑马灯容器在移动端样式 */
            .rounded-full.py-3.px-6,
            [style*="border-radius: 9999px"] {
                padding: 0.5rem 1rem !important;
                border-radius: 9999px !important;
            }
            
            /* 跑马灯文字大小优化 */
            .marquee-content {
                font-size: 0.875rem !important; /* 14px */
            }
            
            /* ===== 顶部导航优化 ===== */
            /* 确保按钮不被压缩 */
            .flex-shrink-0 {
                flex-shrink: 0 !important;
            }
            
            /* ===== 目的地页分类栏间距优化 ===== */
            /* 移动端调整 */
            .-mt-24 {
                margin-top: -4rem !important; /* 移动端向上移动更多 */
            }
            
            .mb-16 {
                margin-bottom: 3rem !important; /* 移动端增大与列表间距 */
            }
            
            /* ===== 博客卡片优化 ===== */
            .grid.grid-cols-1.md\\:grid-cols-3 .overflow-hidden {
                border-radius: 1rem;
            }
            
            /* ===== 最大容器宽度限制 ===== */
            .max-w-7xl,
            .max-w-6xl,
            .max-w-5xl,
            .max-w-4xl,
            .max-w-3xl,
            .max-w-2xl,
            .max-w-xl {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            /* ===== 确保所有 flex 容器不溢出（跑马灯除外） ===== */
            .flex:not(.marquee-content) {
                min-width: 0; /* 允许 flex 子元素缩小 */
            }
            
            /* ===== 热门套餐网格优化 ===== */
            #home-hot-offers {
                grid-template-columns: 1fr !important;
            }
            
            /* ===== Logo 和品牌名优化 ===== */
            header .font-extrabold {
                font-size: 1.125rem !important; /* 18px */
            }
            
            /* ===== 确保 padding 不导致溢出 ===== */
            * {
                box-sizing: border-box;
            }
            
            /* ===== Hero 标题优化 ===== */
            .text-5xl,
            .md\\:text-7xl {
                font-size: 2rem !important;
                line-height: 1.1 !important;
            }
            
            .text-4xl {
                font-size: 1.75rem !important;
                line-height: 1.2 !important;
            }
            
            .text-xl {
                font-size: 1rem !important;
                line-height: 1.5 !important;
            }
            
            /* ===== 目的地页 Hero 区域优化 ===== */
            .bg-\[\#fffaf5\] {
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }
            
            /* ===== 按钮组优化 ===== */
            .gap-3,
            .gap-6,
            .gap-8 {
                gap: 0.75rem !important;
            }
            
            /* ===== 充值弹窗金额按钮优化 ===== */
            .topup-amount-btn {
                padding: 0.75rem !important; /* 减小padding */
            }
            
            .topup-amount-btn div {
                font-size: 1.5rem !important; /* 减小字体 */
            }
            
            #custom-amount-container {
                padding: 0.75rem 1rem !important; /* 移动端合适的padding */
            }
            
            #custom-amount {
                font-size: 1.5rem !important; /* 减小字体 */
                width: 100% !important; /* 移动端宽度自适应 */
            }
            
            #dollar-sign {
                font-size: 1.5rem !important; /* 减小字体 */
            }
        }
        
        /* 平板适配 */
        @media (min-width: 769px) and (max-width: 1024px) {
            h1 {
                font-size: 2.5rem !important;
            }
            
            h2 {
                font-size: 2rem !important;
            }
        }
        
        /* 小屏幕手机优化（iPhone SE 等） */
        @media (max-width: 375px) {
            h1 {
                font-size: 1.625rem !important; /* 26px */
            }
            
            h2 {
                font-size: 1.25rem !important; /* 20px */
            }
            
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }
        
        /* 优惠券票据样式 */
        .coupon-ticket {
            position: relative;
            background: white;
            border-radius: 16px;
        }
        .coupon-ticket::before,
        .coupon-ticket::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #fffaf5;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
        }
        .coupon-ticket::before {
            left: -10px;
        }
        .coupon-ticket::after {
            right: -10px;
        }
        
        /* 隐藏number input的上下箭头 */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }