/* ─── iOS Safari 横向溢出修复（必须放在最顶部）─── */
        html {
            overflow-x: hidden;
        }

        :root {
            --primary: #0f172a;
            --primary-light: #3b82f6;
            --accent: #6366f1;
            --accent-2: #8b5cf6;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --bg-main: #eef2ff;
            --glass-bg: rgba(255, 255, 255, 0.55);
            --glass-bg-strong: rgba(255, 255, 255, 0.72);
            --glass-border: rgba(255, 255, 255, 0.65);
            --glass-border-subtle: rgba(255, 255, 255, 0.4);
            --card-shadow: 0 8px 32px 0 rgba(99, 102, 241, 0.08);
            --card-shadow-hover: 0 24px 48px 0 rgba(99, 102, 241, 0.14);
            --blur-sm: blur(12px);
            --blur-md: blur(20px);
            --blur-lg: blur(32px);
        }

        * {
            box-sizing: border-box;
        }


        body {
            font-family: 'Inter', -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            line-height: 1.6;
            background-color: var(--bg-main);
            background-image:
                radial-gradient(ellipse 80% 60% at 10% -5%, rgba(165, 180, 252, 0.35) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 95% 10%, rgba(196, 181, 253, 0.28) 0%, transparent 55%),
                radial-gradient(ellipse 50% 40% at 80% 80%, rgba(147, 197, 253, 0.22) 0%, transparent 60%),
                radial-gradient(ellipse 70% 50% at -10% 90%, rgba(167, 243, 208, 0.15) 0%, transparent 60%);
            color: var(--text-primary);
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* ─────── 磨砂玻璃系统 ─────── */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            border: 1px solid var(--glass-border);
            box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
        }

        /* 导航下拉菜单：纯白不透明背景 */
        #langDropdown,
        #userDropdown {
            background: #ffffff !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.48);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            border: 1px solid rgba(255, 255, 255, 0.68);
            border-radius: 28px;
            box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.9);
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.68);
            transform: translateY(-6px);
            box-shadow: var(--card-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.9);
            border-color: rgba(255, 255, 255, 0.85);
        }

        .glass-card-dark {
            background: rgba(15, 23, 42, 0.82);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 28px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        }

        /* ─────── 按钮 ─────── */
        .btn-primary {
            background: var(--primary);
            color: white;
            padding: 10px 36px;
            border-radius: 100px;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
            opacity: 0.92;
        }

        /* 确保 Tailwind .hidden 能正确覆盖 .btn-primary 的 display 属性 */
        .btn-primary.hidden { display: none !important; }

        .btn-secondary {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: var(--text-primary);
            padding: 14px 36px;
            border-radius: 100px;
            font-weight: 600;
            border: 1px solid rgba(255,255,255,0.85);
            transition: all 0.3s;
            box-shadow: 0 2px 12px rgba(99,102,241,0.08);
        }

        .btn-secondary:hover {
            background: rgba(255,255,255,0.92);
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(99,102,241,0.12);
        }

        /* ─────── 装饰光晕 ─────── */
        .glow-orb {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 68%);
            border-radius: 50%;
            z-index: -1;
            pointer-events: none;
            filter: blur(1px);
        }

        .glow-orb-blue {
            background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 68%);
        }

        .glow-orb-violet {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 68%);
        }

        .glow-orb-emerald {
            background: radial-gradient(circle, rgba(52, 211, 153, 0.09) 0%, transparent 68%);
        }

        /* 浮动动画 */
        @keyframes floatY {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        @keyframes floatYSlow {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }

        @keyframes toastSlideIn {
            from { opacity: 0; transform: translateY(24px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .float-card { animation: floatY 5s ease-in-out infinite; }
        .float-card-slow { animation: floatYSlow 7s ease-in-out infinite; }
        .float-card-delayed { animation: floatY 5s ease-in-out infinite 1.5s; }

        /* ─────── 分割线 ─────── */
        .section-divider {
            width: 48px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-light), var(--accent));
            border-radius: 4px;
            margin: 0 auto 28px;
        }

        /* ─────── 标签 ─────── */
        .label-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 18px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: rgba(255,255,255,0.65);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.8);
            box-shadow: 0 2px 10px rgba(99,102,241,0.1);
            color: var(--accent);
        }

        /* ─────── 数字高亮 ─────── */
        .stat-number {
            font-feature-settings: "tnum";
            font-variant-numeric: tabular-nums;
        }

        /* ─────── Toast ─────── */
        .toast {
            min-width: 300px;
            max-width: 420px;
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            border-radius: 22px;
            padding: 18px 24px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            animation: toastSlideIn 0.4s cubic-bezier(0.2, 1, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .toast::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
        }

        .toast-container {
            position: fixed;
            bottom: 32px;
            right: 32px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: flex-end;
        }

        /* ─────── 图标气泡 ─────── */
        .icon-bubble {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        /* ─────── 渐变文字 ─────── */
        .gradient-text-blue {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .gradient-text-violet {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ─────── 进度/指标条 ─────── */
        .metric-bar {
            height: 4px;
            border-radius: 4px;
            background: rgba(0,0,0,0.06);
            overflow: hidden;
        }

        .metric-bar-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #3b82f6, #6366f1);
        }

        /* ─────── 步骤连接线 ─────── */
        .step-connector {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(99,102,241,0.3), rgba(99,102,241,0.1));
        }

        /* ─────── 表格行 ─────── */
        .spec-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        .spec-row:last-child { border-bottom: none; }

        /* ─────── 响应式导航 ─────── */
        @media (max-width: 768px) {
            .glow-orb { width: 300px; height: 300px; }
        }

        /* ─────── 移动端全局适配 ─────── */
        @media (max-width: 767px) {

            /* Toast：底部居中，全宽 */
            .toast-container {
                bottom: 16px;
                right: 12px;
                left: 12px;
                align-items: stretch;
            }
            .toast {
                min-width: unset;
                max-width: 100%;
                padding: 14px 18px;
                gap: 12px;
                border-radius: 18px;
            }

            /* 区块间距缩小 */
            .section-pad {
                padding-top: 48px;
                padding-bottom: 48px;
            }

            /* 玻璃卡片：缩小圆角、禁用悬浮上移 */
            .glass-card {
                border-radius: 20px;
            }
            .glass-card:hover {
                transform: none;
            }

            /* 按钮：增大触控区域 */
            .btn-primary {
                padding: 14px 28px;
                font-size: 15px;
            }
            .btn-secondary {
                padding: 14px 28px;
                font-size: 15px;
            }

            /* 规格行：允许换行 */
            .spec-row {
                flex-wrap: wrap;
                gap: 6px;
            }

            /* 图标气泡：缩小尺寸 */
            .icon-bubble {
                width: 44px;
                height: 44px;
                border-radius: 14px;
                font-size: 18px;
            }

            /* 分割线间距 */
            .section-divider {
                margin-bottom: 20px;
            }

            /* 步骤连接线：隐藏 */
            .step-connector {
                display: none;
            }
        }

        /* ═══════════════════════════════════════════
           移动端导航、弹窗、输入框专项优化
        ═══════════════════════════════════════════ */
        @media (max-width: 767px) {

            /* 1. 导航栏水平内边距收窄，腾出更多空间 */
            nav .max-w-7xl {
                padding-left: 14px !important;
                padding-right: 14px !important;
            }

            /* 2. 未登录：登录按钮缩小，留出汉堡菜单空间 */
            #authBtn {
                padding: 8px 14px !important;
                font-size: 13px !important;
                min-width: 0 !important;
            }

            /* 3. 导航汉堡菜单按钮：确保可见 */
            nav button.md\\:hidden {
                flex-shrink: 0 !important;
                padding: 6px !important;
            }

            /* 4. 移动端菜单：改善视觉效果 */
            #mobile-menu {
                background: rgba(255, 255, 255, 0.92);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }
            #mobile-menu a {
                border-radius: 16px !important;
                transition: background 0.15s, color 0.15s;
            }

            /* 5. 登录/注册弹窗：减小内边距 */
            #loginModalContent {
                padding: 24px 18px 22px !important;
                border-radius: 24px !important;
            }

            /* 6. 个人资料弹窗：同步减小内边距 */
            #profileModal > div:last-child {
                padding: 24px 18px 22px !important;
                border-radius: 24px !important;
            }

            /* 7. 输入框：强制 16px 字号，阻止 iOS Safari 自动缩放页面 */
            input[type="email"],
            input[type="text"],
            input[type="password"],
            input[type="number"],
            textarea,
            select {
                font-size: 16px !important;
            }

            /* 8. 验证码行（输入框 + 发送按钮）：按钮文字缩短 */
            .flex.gap-2 > button[id$="CodeBtn"] {
                padding-left: 10px !important;
                padding-right: 10px !important;
                font-size: 12px !important;
                white-space: nowrap;
            }

            /* 9. 首页 Hero 区域：减小水平内边距让内容更宽 */
            main > section,
            main > div > section {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }

            /* 10. 登录弹窗：标题字号适配 */
            #loginModalContent h2 {
                font-size: 1.4rem !important;
            }

            /* 11. 移动菜单中已登录区域的用户信息 */
            #mobile-user-section {
                padding: 12px 16px;
            }

            /* 12. 统计条：减小水平内边距，防止数字溢出 */
            .stats-strip .stat-item {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            /* 13. 统计数字：适当缩小字号确保不溢出列宽 */
            .stats-strip .stat-number {
                font-size: 1.75rem !important;
                line-height: 1.2 !important;
            }

            /* 14. 首页 Hero 标题：确保不因过大溢出 */
            main h1 {
                word-break: break-word;
                overflow-wrap: break-word;
            }

            /* 15. 各区块水平内边距统一收窄 */
            .section-pad {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
        }

        /* 超小屏（< 380px）额外优化 */
        @media (max-width: 379px) {
            nav .max-w-7xl {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
            #authBtn {
                padding: 7px 10px !important;
                font-size: 12px !important;
            }
            #loginModalContent {
                padding: 20px 14px 18px !important;
            }
        }

        /* ═══════════════════════════════════════════
           移动端二级导航条（Pill Nav Strip）
        ═══════════════════════════════════════════ */

        /* 桌面端隐藏 */
        .mobile-nav-strip {
            display: none;
        }

        /* 博客详情 Hero：预构建 tailwind.min.css 不含无断点 .pt-28（仅有 md:pt-28），
           导致 ≥768px 时 Hero 无上内边距、fixed 顶栏（约 4rem）遮挡标题区。
           小屏由下方 main { padding-top: 116px } 承担顶栏占位，此处不再叠加。 */
        @media (min-width: 768px) {
            #blog-detail-page .article-hero {
                padding-top: 7rem;
            }
        }

        @media (max-width: 767px) {
            /* 导航条容器：横向滚动 */
            .mobile-nav-strip {
                display: flex;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                gap: 6px;
                padding: 8px 14px 10px;
                border-top: 1px solid rgba(255,255,255,0.28);
            }
            .mobile-nav-strip::-webkit-scrollbar { display: none; }

            /* 每个导航链接 */
            .mobile-nav-strip a {
                display: inline-flex;
                align-items: center;
                white-space: nowrap;
                padding: 7px 15px;
                border-radius: 100px;
                font-size: 13px;
                font-weight: 600;
                color: #475569;
                flex-shrink: 0;
                text-decoration: none;
                transition: background 0.2s, color 0.2s;
                background: rgba(255,255,255,0.5);
                border: 1px solid rgba(255,255,255,0.65);
            }
            .mobile-nav-strip a.active {
                background: #0f172a;
                color: #fff;
                border-color: transparent;
                box-shadow: 0 3px 10px rgba(15,23,42,0.2);
            }
            .mobile-nav-strip a:not(.active):active {
                background: rgba(255,255,255,0.8);
            }

            /* 导航栏增加二级条后，主内容区顶部偏移增大
               nav header(64px) + strip(~48px) + buffer = 116px */
            main {
                padding-top: 116px !important;
                overflow-x: hidden;
                width: 100%;
            }

            /* body 宽度锁死，防止绝对定位装饰元素撑开页面 */
            body {
                width: 100%;
                overflow-x: hidden;
            }

            /* 页面内容区：收窄 section 内水平内边距，让内容更宽 */
            section.max-w-7xl,
            div.max-w-7xl > section,
            main > section,
            main > div > section {
                padding-left: 14px !important;
                padding-right: 14px !important;
            }

            /* Hero section：移动端减少顶部/底部空白，并裁剪超宽背景装饰 */
            main > section:first-of-type {
                padding-top: 20px !important;
                padding-bottom: 36px !important;
                overflow-x: hidden;
            }

            /* Hero h1：缩小字号防止溢出，同时保持视觉冲击力 */
            main h1 {
                font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
                word-break: break-word !important;
                overflow-wrap: break-word !important;
            }

            /* 全宽区块（如统计条、背景色块）不限制宽度 */
            .w-full, .stats-strip {
                max-width: 100% !important;
            }

        }

        /* ═══════════════════════════════════════════
           移动端内容区间距与卡片优化
        ═══════════════════════════════════════════ */
        @media (max-width: 767px) {

            /* Section 标题块下方间距压缩（mb-24 = 96px → 40px，mb-20 = 80px → 32px）*/
            .text-center.mb-24 {
                margin-bottom: 2.5rem !important;
            }
            .text-center.mb-20 {
                margin-bottom: 2rem !important;
            }

            /* Glass 卡片大内边距压缩（p-10 = 2.5rem = 40px → 20px 16px）*/
            .glass-card.p-10 {
                padding: 1.25rem 1rem !important;
            }
            .glass-card.p-8 {
                padding: 1rem 0.875rem !important;
            }

            /* FAQ / 特殊 glass 卡 水平内边距（px-10 = 2.5rem → 1.25rem）*/
            .glass-card.px-10 {
                padding-left: 1.25rem !important;
                padding-right: 1.25rem !important;
            }

            /* Section 内容网格顶部间距（mt-20 = 80px → 24px）*/
            .grid.mt-20 {
                margin-top: 1.5rem !important;
            }

            /* CTA 按钮行下方间距（mb-20 = 80px → 40px）*/
            .flex.flex-col.mb-20,
            .flex.mb-20 {
                margin-bottom: 2.5rem !important;
            }

            /* FAQ 触发行上下间距（py-8 = 32px → 20px）*/
            .faq-trigger.py-8 {
                padding-top: 1.25rem !important;
                padding-bottom: 1.25rem !important;
            }

            /* FAQ 答案缩进减小 */
            .faq-body p.pl-9 {
                padding-left: 0.5rem !important;
            }

            /* 页脚顶部间距（pt-24 = 96px → 40px）*/
            footer.pt-24 {
                padding-top: 2.5rem !important;
            }
            footer.pb-12 {
                padding-bottom: 1.75rem !important;
            }

            /* 页脚内容网格下方间距（mb-16 = 64px → 32px）*/
            footer .mb-16 {
                margin-bottom: 2rem !important;
            }

            /* 页脚链接列 gap 压缩（gap-10 = 40px → 24px）*/
            footer .gap-10 {
                gap: 1.5rem !important;
            }

            /* 规格对比卡：禁用悬浮上移（与 glass-card 保持一致）*/
            .spec-row {
                padding: 12px 0;
            }
        }

        @media (max-width: 479px) {
            /* 超小屏 FAQ 标题字号缩小 */
            .faq-trigger h4 {
                font-size: 13px !important;
                line-height: 1.45 !important;
            }
        }

        /* ─────── 无障碍：减少动画模式 ─────── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .float-card,
            .float-card-slow,
            .float-card-delayed {
                animation: none !important;
            }
            .reveal {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
            }
        }