/* 由 ks100\related-support.html 内联 <style> 整体外置（步骤⑩方案A，2026-08-06）
   规则原样迁移，零改写，视觉零回归。 */


        /* 修复页眉菜单上方空白 */
        .ks100-nav a {
            line-height: 56px !important;
        }

        /* 手机端复制按钮和展示区域样式 */
        @media (max-width: 768px) {
            .copy-btn-mobile {
                width: 100% !important;
                height: 44px !important;
                font-size: 14px !important;
                border-radius: 8px !important;
            }

            .display-area-mobile {
                display: block !important;
                width: 100% !important;
                min-height: 120px !important;
                padding: 15px !important;
                box-sizing: border-box !important;
                border-radius: 8px !important;
                text-align: left !important;
            }

            /* 移动端预览框：长格式码截断预览（前 160 字符，与桌面端新 UI 一致） */
            .mobile-preview-encoded {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .mobile-preview-encoded-label {
                font-size: 12px;
                color: var(--support-muted);
            }
            .mobile-preview-encoded code {
                display: block;
                font-family: var(--font-mono, monospace);
                font-size: 12px;
                line-height: 1.6;
                color: var(--support-ink);
                background: rgba(255, 255, 255, 0.6);
                border-radius: 8px;
                padding: 12px 14px;
                word-break: break-all;
                white-space: pre-wrap;
            }

            .download-btn-mobile {
                height: 56px !important;
                font-size: 14px !important;
                border-radius: 8px !important;
                background-color: #FFFFFF !important;
                padding-right: 20px !important;
                box-sizing: border-box !important;
            }
        }

        /* 桌面端页眉菜单统一（与 computer-guide.html 一致） */
        @media (min-width: 769px) {
            /* 整页淡蓝渐变做底：参考 product-intro.html（仅渐变，不复制粒子特效）。
               html 绘制根层渐变，body 置透明，使整页（含下方内容区）透出淡蓝底，
               卡片浮于其上，与 product-intro 视觉一致。 */
            html {
                background: var(--bg-page-gradient);
            }
            body {
                margin: 0 !important;
                padding: 0 !important;
                font-family: var(--font-sans);
                color: var(--support-ink);
                -webkit-font-smoothing: antialiased;
                background: transparent;
            }

            header {
                position: relative;
                z-index: var(--z-toast);
                height: 64px !important;
                margin-bottom: 0 !important;
                box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
                padding: 0 !important;
                background: rgba(255,255,255,0.85) !important;
                backdrop-filter: saturate(180%) blur(20px);
            }

            main {
                padding-top: 0 !important;
            }

            .ks100-nav ul li a {
                line-height: 56px !important;
                font-size: 15px;
                color: #333;
                text-decoration: none;
                transition: color 0.2s ease;
            }
            .ks100-nav ul li a:hover {
                color: var(--support-blue);
            }

            /* ===== Hero 区域 ===== */
            .support-hero {
                position: relative;
                padding: 80px 60px 70px;
                background: var(--bg-page-gradient);
                overflow: hidden;
                box-sizing: border-box;
            }
            .support-hero::before {
                content: "";
                position: absolute;
                top: -120px;
                right: -80px;
                width: 480px;
                height: 480px;
                background: radial-gradient(circle, rgba(66,133,244,0.18) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
            }
            .support-hero::after {
                content: "";
                position: absolute;
                bottom: -160px;
                left: -100px;
                width: 400px;
                height: 400px;
                background: radial-gradient(circle, rgba(25,118,210,0.1) 0%, transparent 70%);
                border-radius: 50%;
                pointer-events: none;
            }
            .support-hero-inner {
                max-width: 1200px;
                margin: 0 auto;
                position: relative;
                z-index: var(--z-content);
                display: grid;
                grid-template-columns: 1.6fr 1fr;
                gap: 80px;
                align-items: center;
            }
            .support-hero-meta {
                display: flex;
                align-items: center;
                gap: 14px;
                margin-top: 20px;
                font-size: 13px;
                font-weight: 700;
                letter-spacing: 4px;
                color: var(--support-blue);
                text-transform: uppercase;
            }
            .support-hero-meta-line {
                flex: 0 0 40px;
                height: 2px;
                background: var(--support-blue);
                opacity: 0.3;
            }
            .support-hero-eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-family: var(--font-mono);
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 2px;
                color: var(--support-blue);
                text-transform: none;
            }
            .support-hero-eyebrow::before {
                content: "";
                width: 18px;
                height: 1px;
                background: var(--support-blue);
            }
            .support-hero h1 {
                font-size: clamp(40px, 5vw, 56px);
                font-weight: 800;
                line-height: 1.15;
                color: var(--support-ink);
                margin: 0 0 18px;
                letter-spacing: -1px;
                white-space: nowrap;
            }
            .support-hero h1 em {
                font-style: normal;
                font-weight: 800;
                background: linear-gradient(135deg, #1976D2 0%, #4285F4 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            .support-hero-lead {
                font-size: 17px;
                line-height: 1.75;
                color: var(--support-muted);
                max-width: 600px;
                margin: 0;
                font-weight: 400;
            }
            .support-hero-aside {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }
            .support-hero-aside-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 18px 22px;
                background: rgba(255, 255, 255, 0.7);
                border: 1px solid rgba(25, 118, 210, 0.1);
                border-radius: 12px;
                backdrop-filter: blur(10px);
            }
            .support-hero-aside-label {
                font-size: 13px;
                color: var(--support-muted);
                font-weight: 500;
            }
            .support-hero-aside-value {
                font-size: 28px;
                font-weight: 800;
                color: var(--support-ink);
                line-height: 1;
            }
            .support-hero-aside-value em {
                font-style: normal;
                color: var(--support-blue);
                font-weight: 800;
            }

            /* ===== 内容区域 ===== */
            .support-content {
                padding: 80px 20px 100px;
                /* 改为透明，让整页淡蓝渐变从根层透出做底；卡片（白底）浮于其上 */
                background: transparent;
                box-sizing: border-box;
            }
            .support-content-inner {
                max-width: 1200px;
                width: 100%;
                margin: 0 auto;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px;
                box-sizing: border-box;
            }
            .support-card {
                position: relative;
                background: var(--support-surface);
                border-radius: 20px;
                padding: 36px 32px 32px;
                border: 1px solid var(--support-line);
                box-shadow: 0 4px 24px rgba(25, 118, 210, 0.04);
                transition: box-shadow 0.4s ease, transform 0.4s ease;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            .support-card:hover {
                box-shadow: 0 12px 40px rgba(25, 118, 210, 0.1);
                transform: translateY(-2px);
            }
            .support-card-header {
            position: relative;
            z-index: var(--z-content);
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            padding-top: 2px;
            padding-bottom: 20px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--support-line);
        }
            .support-card-title-wrap {
                flex: 1;
            }
            .support-card-tag {
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: var(--support-blue);
                margin-bottom: 10px;
                display: block;
            }
            .support-card-title {
                font-size: 28px;
                font-weight: 800;
                color: var(--support-ink);
                margin: 0;
                line-height: 1.2;
                letter-spacing: -0.3px;
                white-space: normal;
            }
            .support-card-count {
                font-size: 40px;
                font-weight: 800;
                color: var(--support-blue);
                opacity: 0.15;
                line-height: 1;
                margin-left: 16px;
                font-variant-numeric: tabular-nums;
            }
            /* 列头右侧 2×2 栅格（与 computer-guide.html 桌面端列头一致）：
               行1 —— 圆点居中于计数正上方；行2 —— 切换按钮 ‹ ›（左）+ 计数（右）同排 */
            .support-card-header-right {
                display: grid;
                grid-template-columns: auto auto;
                grid-template-rows: auto auto;
                align-items: center;
                column-gap: 12px;
                row-gap: 6px;
                margin-left: 16px;
            }
            .support-card-header-right .support-card-count {
                grid-area: 2 / 2;
                justify-self: center;
                margin-left: 0;
            }
            .support-pagination {
                grid-area: 1 / 2;
                justify-self: center;
                align-self: end;
                margin: 0;
                padding: 0;
            }
            .support-pagination:not(.is-active) {
                display: none;
            }
            .support-pagination.is-active {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                user-select: none;
            }
            .support-page-dots {
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }
            .support-page-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--support-line);
                cursor: pointer;
                transition: all 0.3s ease;
                -webkit-tap-highlight-color: transparent;
            }
            .support-page-dot.active {
                background: var(--support-blue);
                width: 20px;
                border-radius: 4px;
            }
            /* 顺序切换按钮 ‹ ›：与计数同排、位于其左侧，首尾到头转灰 */
            .support-column-switch {
                grid-area: 2 / 1;
                align-self: center;
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }
            .support-switch-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 26px;
                height: 26px;
                padding: 0;
                border: 1px solid var(--support-line);
                border-radius: 50%;
                background: var(--support-surface-card);
                color: var(--support-ink);
                cursor: pointer;
                transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
                -webkit-tap-highlight-color: transparent;
            }
            .support-switch-btn svg {
                display: block;
                width: 14px;
                height: 14px;
            }
            .support-switch-btn:hover:not(:disabled) {
                background: var(--support-blue-light);
                border-color: var(--support-blue);
                color: var(--support-blue);
            }
            .support-switch-btn:focus-visible {
                outline: 2px solid var(--support-blue);
                outline-offset: 2px;
            }
            /* 不可用态：整枚按钮转灰（灰底 + 灰边 + 灰箭头） */
            .support-switch-btn:disabled {
                background: var(--support-line-soft);
                border-color: var(--support-line);
                color: var(--support-faint);
                opacity: 1;
                cursor: not-allowed;
            }
            /* 分页容器固定高度（6 项），由 JS 写入 --support-page-fixed-height */
            .support-list[data-paginated] {
                height: var(--support-page-fixed-height, 480px);
            }
            .support-list[data-paginated] .support-item.is-page-hidden {
                display: none;
            }

            /* ===== 资源列表 ===== */
            .support-list {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .support-item {
                position: relative;
                display: grid;
                grid-template-columns: 44px 1fr auto;
                align-items: center;
                gap: 16px;
                padding: 16px 26px 16px 14px;
                margin-bottom: 8px;
                border-radius: 12px;
                transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
                cursor: pointer;
            }
            .support-item:last-child {
                margin-bottom: 0;
            }
            .support-item:hover {
                background: var(--support-blue-light);
                transform: translateX(4px);
            }
            .support-item:hover .support-item-title {
                color: var(--support-blue);
            }
            .support-item.active {
                background: var(--support-blue-light);
            }
            .support-item.active .support-item-title {
                color: var(--support-blue);
            }
            .support-item-index {
                width: 44px;
                font-size: 20px;
                font-weight: 800;
                color: var(--support-blue);
                text-align: left;
                flex-shrink: 0;
                line-height: 1;
            }
            .support-item-body {
                min-width: 0;
            }
            .support-item-title {
                font-size: 16px;
                font-weight: 600;
                color: var(--support-ink);
                margin: 0 0 4px;
                letter-spacing: -0.1px;
                transition: color 0.25s ease;
                line-height: 1.4;
            }
            .support-item-desc {
                font-size: 13px;
                color: var(--support-muted);
                line-height: 1.55;
                margin: 0;
                font-weight: 400;
            }
            .support-item-meta {
                display: flex;
                align-items: center;
                gap: 4px;
                flex-shrink: 0;
            }
            .support-item-meta-text {
                font-family: var(--font-mono);
                font-size: 10px;
                font-weight: 500;
                letter-spacing: 1px;
                color: var(--support-faint);
                text-transform: uppercase;
            }
            .support-item-arrow {
                width: 18px;
                height: 18px;
                display: none;
                align-items: center;
                justify-content: center;
                color: var(--support-faint);
                transform: translateX(-4px);
                opacity: 0;
                transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease, color 0.35s ease;
            }
            .support-item-arrow svg {
                width: 14px;
                height: 14px;
            }
            .support-item:hover .support-item-arrow {
                transform: translateX(0);
                opacity: 1;
                color: var(--support-blue);
            }
            .support-item:hover .support-item-meta-text {
                color: var(--support-blue);
            }

            /* ===== 预览区域 ===== */
            .support-preview {
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            .support-preview-header {
            position: relative;
            z-index: var(--z-content);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
            .support-preview-label {
                font-size: 13px;
                font-weight: 600;
                color: var(--support-muted);
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .support-preview-label .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--support-blue);
                box-shadow: 0 0 0 4px var(--support-blue-light);
            }
            .support-copy-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 22px;
                background: linear-gradient(135deg, #1976D2, #4285F4);
                color: #FFFFFF;
                font-size: 14px;
                font-weight: 600;
                border: none;
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.25s ease;
                box-shadow: 0 4px 14px rgba(25, 118, 210, 0.3);
            }
            .support-copy-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
            }
            .support-copy-btn:active {
                transform: translateY(0);
            }
            .support-copy-btn svg {
                width: 16px;
                height: 16px;
            }
            .support-preview-area {
                flex: 1;
                background: var(--support-blue-light);
                border: 1px solid var(--support-line);
                border-radius: 14px;
                padding: 28px;
                min-height: 320px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: border-color 0.25s ease;
                word-break: break-all;
            }
            .support-preview-area.has-content {
                align-items: flex-start;
                justify-content: flex-start;
            }
            .support-preview-placeholder {
                text-align: center;
                color: var(--support-faint);
            }
            .support-preview-placeholder svg {
                width: 48px;
                height: 48px;
                margin-bottom: 16px;
                opacity: 0.5;
            }
            .support-preview-placeholder p {
                font-size: 14px;
                margin: 0;
                color: var(--support-muted);
            }
            .support-preview-content {
                font-size: 14px;
                line-height: 1.8;
                color: var(--support-ink);
                word-break: break-all;
                width: 100%;
            }
            .support-preview-encoded {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .support-preview-encoded-label {
                font-size: 13px;
                color: var(--support-muted);
                margin-bottom: 4px;
            }
            .support-preview-encoded code {
                display: block;
                font-family: var(--font-mono, monospace);
                font-size: 13px;
                line-height: 1.7;
                color: var(--support-ink);
                background: rgba(255, 255, 255, 0.6);
                border-radius: 8px;
                padding: 14px 16px;
                word-break: break-all;
                white-space: pre-wrap;
            }

            /* ===== Word 文档预设功能说明列表 ===== */
            .support-preview-word-intro {
                margin-bottom: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid var(--support-line);
            }
            .support-preview-word-intro-title {
                font-size: 14px;
                font-weight: 700;
                color: var(--support-ink);
                margin-bottom: 12px;
            }
            .support-preview-word-intro-group {
                margin-bottom: 14px;
            }
            .support-preview-word-intro-group:last-child {
                margin-bottom: 0;
            }
            .support-preview-word-intro-group-head {
                font-size: 16px;
                font-weight: 700;
                color: var(--support-blue);
                margin-bottom: 4px;
            }
            .support-preview-word-intro-group-desc {
                font-size: 15px;
                line-height: 1.65;
                font-weight: 700;
                color: var(--support-ink);
                word-break: break-all;
            }
            .mobile-preview-word-intro {
                margin-bottom: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--support-line);
            }
            .mobile-preview-word-intro-title {
                font-size: 14px;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 10px;
            }
            .mobile-preview-word-intro-group {
                margin-bottom: 12px;
            }
            .mobile-preview-word-intro-group:last-child {
                margin-bottom: 0;
            }
            .mobile-preview-word-intro-group-head {
                font-size: 16px;
                font-weight: 700;
                color: #1976D2;
                margin-bottom: 4px;
            }
            .mobile-preview-word-intro-group-desc {
                font-size: 15px;
                line-height: 1.6;
                font-weight: 700;
                color: #1a1a1a;
                word-break: break-all;
            }

            /* ===== PPT 演示预设功能说明列表 ===== */
            .support-preview-ppt-intro {
                margin-bottom: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid var(--support-line);
            }
            .support-preview-ppt-intro-title {
                font-size: 14px;
                font-weight: 700;
                color: var(--support-ink);
                margin-bottom: 12px;
            }
            .support-preview-ppt-intro-group {
                margin-bottom: 14px;
            }
            .support-preview-ppt-intro-group:last-child {
                margin-bottom: 0;
            }
            .support-preview-ppt-intro-group-head {
                font-size: 14px;
                font-weight: 700;
                color: var(--support-blue);
                margin-bottom: 4px;
            }
            .support-preview-ppt-intro-group-desc {
                font-size: 13px;
                line-height: 1.65;
                font-weight: 700;
                color: var(--support-ink);
                word-break: break-all;
            }
            .mobile-preview-ppt-intro {
                margin-bottom: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--support-line);
            }
            .mobile-preview-ppt-intro-title {
                font-size: 14px;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 10px;
            }
            .mobile-preview-ppt-intro-group {
                margin-bottom: 12px;
            }
            .mobile-preview-ppt-intro-group:last-child {
                margin-bottom: 0;
            }
            .mobile-preview-ppt-intro-group-head {
                font-size: 14px;
                font-weight: 700;
                color: #1976D2;
                margin-bottom: 4px;
            }
            .mobile-preview-ppt-intro-group-desc {
                font-size: 13px;
                line-height: 1.6;
                font-weight: 700;
                color: #1a1a1a;
                word-break: break-all;
            }

            /* ===== Excel / Outlook / OneNote / PDF 功能说明列表 ===== */
            .support-preview-excel-intro,
            .support-preview-outlook-intro,
            .support-preview-onenote-intro,
            .support-preview-pdf-intro {
                margin-bottom: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid var(--support-line);
            }
            .support-preview-excel-intro-title,
            .support-preview-outlook-intro-title,
            .support-preview-onenote-intro-title,
            .support-preview-pdf-intro-title {
                font-size: 14px;
                font-weight: 700;
                color: var(--support-ink);
                margin-bottom: 12px;
            }
            .support-preview-excel-intro-group,
            .support-preview-outlook-intro-group,
            .support-preview-onenote-intro-group,
            .support-preview-pdf-intro-group {
                margin-bottom: 14px;
            }
            .support-preview-excel-intro-group:last-child,
            .support-preview-outlook-intro-group:last-child,
            .support-preview-onenote-intro-group:last-child,
            .support-preview-pdf-intro-group:last-child {
                margin-bottom: 0;
            }
            .support-preview-excel-intro-group-head,
            .support-preview-outlook-intro-group-head,
            .support-preview-onenote-intro-group-head,
            .support-preview-pdf-intro-group-head {
                font-size: 14px;
                font-weight: 700;
                color: var(--support-blue);
                margin-bottom: 4px;
            }
            .support-preview-excel-intro-group-desc,
            .support-preview-outlook-intro-group-desc,
            .support-preview-onenote-intro-group-desc,
            .support-preview-pdf-intro-group-desc {
                font-size: 13px;
                line-height: 1.65;
                font-weight: 700;
                color: var(--support-ink);
                word-break: break-all;
            }
            .mobile-preview-excel-intro,
            .mobile-preview-outlook-intro,
            .mobile-preview-onenote-intro,
            .mobile-preview-pdf-intro {
                margin-bottom: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid var(--support-line);
            }
            .mobile-preview-excel-intro-title,
            .mobile-preview-outlook-intro-title,
            .mobile-preview-onenote-intro-title,
            .mobile-preview-pdf-intro-title {
                font-size: 14px;
                font-weight: 700;
                color: #1a1a1a;
                margin-bottom: 10px;
            }
            .mobile-preview-excel-intro-group,
            .mobile-preview-outlook-intro-group,
            .mobile-preview-onenote-intro-group,
            .mobile-preview-pdf-intro-group {
                margin-bottom: 12px;
            }
            .mobile-preview-excel-intro-group:last-child,
            .mobile-preview-outlook-intro-group:last-child,
            .mobile-preview-onenote-intro-group:last-child,
            .mobile-preview-pdf-intro-group:last-child {
                margin-bottom: 0;
            }
            .mobile-preview-excel-intro-group-head,
            .mobile-preview-outlook-intro-group-head,
            .mobile-preview-onenote-intro-group-head,
            .mobile-preview-pdf-intro-group-head {
                font-size: 14px;
                font-weight: 700;
                color: #1976D2;
                margin-bottom: 4px;
            }
            .mobile-preview-excel-intro-group-desc,
            .mobile-preview-outlook-intro-group-desc,
            .mobile-preview-onenote-intro-group-desc,
            .mobile-preview-pdf-intro-group-desc {
                font-size: 13px;
                line-height: 1.6;
                font-weight: 700;
                color: #1a1a1a;
                word-break: break-all;
            }

            /* ===== 入场动画 ===== */
            .support-reveal {
                opacity: 0;
                transform: translateY(28px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }
            .support-reveal.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
            .support-reveal.delay-1 { transition-delay: 0.1s; }
            .support-reveal.delay-2 { transition-delay: 0.2s; }
            .support-reveal.delay-3 { transition-delay: 0.3s; }
            .support-reveal.delay-4 { transition-delay: 0.4s; }

            .support-item {
                opacity: 0;
                transform: translateY(12px);
                transition: opacity 0.5s ease, transform 0.5s ease, background 0.25s ease, box-shadow 0.25s ease;
            }
            .support-item.is-visible {
                opacity: 1;
                transform: translateY(0);
            }

            /* 隐藏原始桌面端内容 */
            .desktop-content > div[style*="width: 1200px"] {
                display: none !important;
                visibility: hidden;
                position: absolute;
                width: 0;
                height: 0;
                overflow: hidden;
            }
        }

        /* 客户端下载按钮 */
        .client-download-wrap {
            position: relative;
            margin-left: auto;
            line-height: 56px;
            list-style: none;
        }
        .client-download-btn {
            display: inline-block;
            text-decoration: none;
            padding: 6px 14px;
            background: transparent;
            color: #333;
            font-size: 13px;
            font-weight: 500;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s ease;
            font-family: inherit;
        }
        .client-download-btn:hover {
            background: transparent;
            color: #1976D2;
            transform: translateY(-1px);
        }
        .client-download-popup {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 164px;
            padding: 12px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition: all 0.25s ease;
            z-index: var(--z-nav-header);
            pointer-events: none;
            line-height: normal;
        }
        .client-download-popup::before {
            content: "";
            position: absolute;
            top: -6px;
            right: 20px;
            width: 12px;
            height: 12px;
            background: #fff;
            transform: rotate(45deg);
            border-radius: 2px;
        }
        .client-download-wrap:hover .client-download-popup,
        .client-download-popup:hover {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }
        .client-download-popup img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 4px;
        }
        .client-download-popup .popup-title {
            font-size: 14px;
            color: #333;
            text-align: center;
            margin-top: 8px;
            margin-bottom: 4px;
            font-weight: 500;
        }
        .client-download-popup .popup-desc {
            font-size: 12px;
            color: #999;
            text-align: center;
            margin: 0;
        }

        .client-download-wrap {
            display: none;
        }

        @media (min-width: 769px) {
            .client-download-wrap {
                display: flex;
                align-items: center;
            }
        }
    

        /* 统一页眉菜单层级：确保在弹出菜单遮罩之上（不被半透明遮罩压暗） */
        @media (max-width: 768px) {
            header {
                position: relative !important;
                z-index: var(--z-nav-header) !important;
            }
        }
    

        /* 复制成功提示：浮现在被点击的复制按钮上方，向上淡化（参考 use-cases.html） */
        .copy-success-toast {
            position: fixed;
            left: 50%;
            top: 24px;
            transform: translateX(-50%);
            background: rgba(25, 118, 210, 0.92);
            color: #FFFFFF;
            padding: 9px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            white-space: nowrap;
            z-index: 9999;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
        }

        .copy-success-toast.show {
            visibility: visible;
            animation: copySuccessFloatUp 1.2s ease-out forwards;
        }

        @keyframes copySuccessFloatUp {
            0% {
                opacity: 0;
                transform: translateX(-50%) translateY(10px) scale(0.85);
            }
            20% {
                opacity: 1;
                transform: translateX(-50%) translateY(-4px) scale(1);
            }
            70% {
                opacity: 1;
                transform: translateX(-50%) translateY(-16px) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateX(-50%) translateY(-28px) scale(0.95);
            }
        }

        /* 复制按钮按下态：缩小 + 短暂变暗（按下变色动效） */
        .copy-btn-pressed {
            transform: scale(0.93) !important;
            filter: brightness(0.85);
        }

        /* 已复制消失后：按钮回弹（带回弹过冲） */
        .copy-btn-bounce {
            animation: copyBtnBounce 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes copyBtnBounce {
            0% { transform: scale(0.93); }
            55% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* 施工中提示框遮罩层 */
        .construction-toast-overlay {
            position: fixed;
            inset: 0px;
            background: rgba(0, 0, 0, 0.5);
            z-index: var(--z-popup);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .construction-toast-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        /* 施工中提示框 */
        .construction-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: #FFFFFF;
            border: 1px solid rgba(66, 133, 244, 0.3);
            border-radius: 20px;
            padding: 40px 60px;
            z-index: var(--z-popup-overlay);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 25px 60px rgba(0, 0, 0, 0.2),
                0 0 40px rgba(66, 133, 244, 0.15);
            text-align: center;
        }

        .construction-toast.show {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }

        .construction-toast-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4285F4, #8AB4F8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .construction-toast-icon svg {
            width: 30px;
            height: 30px;
            color: white;
        }

        .construction-toast h3 {
            font-size: 24px;
            font-weight: 700;
            color: #454F5E;
            margin-bottom: 8px;
        }

        .construction-toast p {
            font-size: 14px;
            color: #666666;
        }

        .construction-toast-close-btn {
            display: none;
        }

        /* 桌面端显示关闭按钮 */
        @media (min-width: 769px) {
            .construction-toast-close-btn {
                position: fixed;
                top: calc(50% - 130px);
                right: calc(50% - 210px);
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.06);
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background 0.2s ease;
                z-index: var(--z-popup-high);
            }

            .construction-toast-close-btn:hover {
                background: rgba(0, 0, 0, 0.12);
            }

            .construction-toast-close-btn svg {
                width: 18px;
                height: 18px;
                color: #999999;
            }
        }

        .construction-toast-action-hint {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            font-size: 13px;
            color: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .construction-toast-action-hint .construction-toast-countdown {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            background: rgba(66, 133, 244, 0.15);
            border-radius: 100px;
            font-size: 12px;
            font-weight: 700;
            color: #4285F4;
            transition: transform 0.3s ease;
        }

        .construction-toast-action-hint .construction-toast-countdown.pulse {
            animation: construction-countdown-pulse 0.5s ease;
        }

        @keyframes construction-countdown-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }

        /* 手机端提示框优化 */
        @media (max-width: 768px) {
            .construction-toast {
                width: calc(100% - 48px);
                max-width: 340px;
                padding: 36px 28px 32px;
                border-radius: 24px;
                left: 50%;
                top: 50%;
            }

            .construction-toast-icon {
                width: 64px;
                height: 64px;
                margin-bottom: 20px;
            }

            .construction-toast-icon svg {
                width: 32px;
                height: 32px;
            }

            .construction-toast h3 {
                font-size: 20px;
                font-weight: 700;
                margin-bottom: 10px;
                line-height: 1.4;
            }

            .construction-toast p {
                font-size: 14px;
                color: #454F5E;
                opacity: 0.75;
                line-height: 1.6;
            }

            .construction-toast-close-btn {
                position: absolute;
                top: 12px;
                right: 12px;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.06);
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background 0.2s ease;
                -webkit-tap-highlight-color: transparent;
            }

            .construction-toast-close-btn:active {
                background: rgba(0, 0, 0, 0.12);
            }

            .construction-toast-close-btn svg {
                width: 18px;
                height: 18px;
                color: #999999;
            }

            .construction-toast-action-hint {
                margin-top: 20px;
                padding-top: 16px;
                font-size: 12px;
            }
        }

        /* ============================================================
           深色模式兜底：覆盖本文件写死的浅色背景，跟随 theme-toggle 真源
           ============================================================ */
        @media (prefers-color-scheme: dark) and (max-width: 768px) {
            .mobile-content {
                background: var(--surface-page) !important;
            }
            .header-menu-2 {
                background-color: var(--surface-page) !important;
            }
            .client-download-popup,
            .client-download-popup::before {
                background: var(--surface-card) !important;
            }
            .client-download-popup .popup-title { color: var(--text-primary) !important; }
            .client-download-popup .popup-desc { color: var(--text-secondary) !important; }
            .support-card,
            .support-detail-card {
                background: var(--surface-card) !important;
                border-color: var(--line-default) !important;
            }
            .support-card h3,
            .support-detail-card h3,
            .support-card h4,
            .support-detail-title {
                color: var(--text-primary) !important;
            }
            .support-card p,
            .support-detail-card p,
            .support-detail-text {
                color: var(--text-secondary) !important;
            }
            .construction-toast {
                background: var(--surface-card) !important;
                border-color: var(--line-default) !important;
            }
            .construction-toast-title { color: var(--text-primary) !important; }
            .construction-toast-text { color: var(--text-secondary) !important; }

            /* 移动端深色模式：相关支持列表图标反白，避免深色 SVG 在深色卡片上不可见 */
            .download-btn-mobile {
                color: #FFFFFF !important;
            }
            .download-btn-mobile img {
                filter: brightness(0) invert(1) !important;
            }

            /* 移动端深色模式：点击后展示区域的文案（JS 动态写入的 span）提亮为白色 */
            #display-area-mobile,
            #display-area-mobile span {
                color: #FFFFFF !important;
            }
            /* 移动端深色模式：预览框底色/边框与截断代码块转灰黑（跟随 theme-toggle 深色 token） */
            #display-area-mobile {
                background: var(--surface-card) !important;
                border-color: var(--line-default) !important;
            }
            #display-area-mobile code {
                background: var(--surface-elevated) !important;
            }
        }

/* ===== 移动端横屏旋转提示遮罩（仅本页 related-support）=====
   需求：移动端且高度<宽度（横屏/因旋转导致）时，显示全屏遮罩，
   上层为手机顺时针旋转动画，提示用户转回竖屏。纯 CSS / 零 JS。
   视觉参考：https://2019.makemepulse.com/ 移动端竖屏锁定提示。
   关键：须中和 css/z-index.css 全局横屏锁（其把整页 html 旋转 -90°），
   否则本页 fixed 遮罩会被带着旋转、无法正立显示。中和仅作用于本页同条件场景。 */

/* 1) 中和全局横屏锁（仅本页、仅移动横屏场景；related-support.css 晚于 z-index.css 加载，!important 同级后写胜出） */
@media screen and (orientation: landscape) and (max-width: 768px) {
    html {
        transform: none !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        overflow: visible !important;
    }
}

/* 2) 遮罩默认隐藏 */
.rs-rotate-overlay {
    display: none;
}

/* 3) 移动横屏时显示遮罩 —— 参考 makemepulse 噪点深蓝灰底 + 米白卡片 + 横屏手机顺时针旋转 */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .rs-rotate-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: var(--z-lightbox);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20%;
        padding: 28px;
        background:
            radial-gradient(circle at 18% 22%, rgba(241, 241, 241, 0.035) 0, transparent 2px),
            radial-gradient(circle at 82% 18%, rgba(241, 241, 241, 0.03) 0, transparent 1.5px),
            radial-gradient(circle at 64% 78%, rgba(241, 241, 241, 0.04) 0, transparent 2px),
            radial-gradient(circle at 35% 88%, rgba(241, 241, 241, 0.03) 0, transparent 1.5px),
            linear-gradient(160deg, #5e647c 0%, #4f5568 100%);
        color: #1c1c1e;
        text-align: center;
        -webkit-font-smoothing: antialiased;
    }

    /* 顶部提示卡片 */
    .rs-rotate-card {
        background: #f2efe7;
        color: #1c1c1e;
        padding: 14px 22px;
        border-radius: 14px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
        max-width: 260px;
    }

    /* 舞台：手机 + 两侧弧线箭头 */
    .rs-rotate-stage {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        position: relative;
    }

    /* 手机图标：默认横屏态，顶部带听筒条 */
    .rs-rotate-phone {
        width: 112px;
        height: 58px;
        background: #f2efe7;
        border-radius: 14px;
        position: relative;
        box-sizing: border-box;
        box-shadow:
            0 0 0 2px rgba(241, 241, 241, 0.35),
            0 18px 40px rgba(0, 0, 0, 0.22);
        /* 横屏态(-90°) → 顺时针转至竖屏(0°) → 停顿 → 回横屏，循环 */
        animation: rs-rotate-clockwise 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        flex-shrink: 0;
    }

    /* 听筒/状态条（横屏态下置于右侧窄边、竖向居中） */
    .rs-rotate-phone::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 26px;
        background: rgba(28, 28, 30, 0.35);
        border-radius: 2px;
    }

    /* 居中勾选标记：独立于手机旋转，绝对定位在舞台中心（即手机中心）。
       用内联 SVG + stroke-dashoffset 描边“画出”勾（无淡入）。路径本身即为标准 ✓
       （左上起笔 → 最低点 → 右上），无需额外旋转。 */
    .rs-rotate-check {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        overflow: visible;
    }
    .rs-check-path {
        fill: none;
        stroke: #1c1c1e;
        stroke-width: 3.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: rs-check-draw 2.8s ease-in-out infinite;
    }


    .rs-rotate-text {
        margin: 0;
        color: rgba(241, 241, 241, 0.78);
        font-size: 13px;
        line-height: 1.5;
        font-weight: 400;
        letter-spacing: 0.02em;
    }
    .rs-rotate-text small {
        display: block;
        font-size: 12px;
        opacity: 0.85;
    }
}

/* 手机顺时针旋转关键帧：横屏(0° 横矩形) → 顺时针转90°成竖屏(90° 竖矩形) → 停顿 → 回横屏 */
@keyframes rs-rotate-clockwise {
    0%   { transform: rotate(0deg); }
    28%  { transform: rotate(90deg); }
    56%  { transform: rotate(90deg); }
    84%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* 勾选标记描边绘制：与手机旋转(2.8s)同步——旋转完成(28%)起从短臂侧描出，竖屏停顿(28%~56%)保持，回旋转出时反向描去 */
@keyframes rs-check-draw {
    0%   { stroke-dashoffset: 1; }
    28%  { stroke-dashoffset: 1; }
    50%  { stroke-dashoffset: 0; }
    56%  { stroke-dashoffset: 0; }
    72%  { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 1; }
}