/* ============================================================
 * APP 独立下载页样式（仿应用宝 / 华为应用市场单页版）
 * 适用：app_detail.php
 *
 *  页面结构（自上而下）：
 *    1. 顶部细栏：返回首页 + 品牌
 *    2. Hero：纯展示 APP 信息（含「下载 APP」锚按钮 + 分享）
 *    3. 屏幕截图：横向滑动
 *    4. 基础信息：表格卡片
 *    5. 详细介绍：富文本卡片
 *    6. 更新日志：版本分组
 *    7. 下载须知：橙色提示框
 *    8. ★ 下载主区（页面底部）★  电脑端：大二维码；移动端：大下载按钮
 *    9. 页脚：3 列 + 版权
 *   10. 移动端 sticky 底部下载条（始终可见）
 *   11. 回到顶部按钮
 *
 *  设备分流：
 *    - 桌面端（默认）：下载主区显示大二维码 + 备选直接下载链接
 *    - 移动端：下载主区显示大下载按钮；底部 sticky 始终可见
 * ============================================================ */

/* ====== 基础重置 ====== */
.app-landing {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(180deg, #f0f4f8 0%, #e2e8f0 100%);
    color: #1e293b;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.app-landing * { box-sizing: border-box; }
.app-landing a { color: #1890ff; text-decoration: none; }
.app-landing a:hover { text-decoration: underline; }

/* 键盘可访问性：focus 可见性 */
.app-landing a:focus-visible,
.app-landing button:focus-visible,
.app-landing [tabindex]:focus-visible {
    outline: 2px solid #1890ff;
    outline-offset: 2px;
    border-radius: 4px;
}
/* 键盘导航时隐藏 topbar/back-top 阴影动画，避免抖动 */
.app-landing-keyboard :focus { box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3); }

/* ====== 顶部细栏 ====== */
.app-landing-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    height: 56px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.app-landing-topbar-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-landing-topbar-back {
    color: #64748b;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: color 0.2s;
}
.app-landing-topbar-back:hover { color: #1890ff; text-decoration: none; }
.app-landing-topbar-brand {
    color: #1e293b;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-landing-topbar-brand::before {
    content: "🏢";
    font-size: 18px;
}

/* ====== Hero 主区（中心化展示） ====== */
.app-landing-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    padding: 48px 20px 56px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.app-landing-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}
.app-landing-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.app-landing-icon {
    width: 128px;
    height: 128px;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    flex-shrink: 0;
    overflow: hidden;
    background: #f1f5f9;
}
.app-landing-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.app-landing-meta {
    text-align: center;
    width: 100%;
}
.app-landing-name {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.2;
    word-break: break-word;
}
.app-landing-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 16px;
    line-height: 1.5;
}
.app-landing-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    justify-content: center;
}
.app-landing-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    background: #f1f5f9;
    color: #475569;
    line-height: 1.4;
}
.app-landing-pill-blue   { background: #dbeafe; color: #1e40af; }
.app-landing-pill-green  { background: #dcfce7; color: #15803d; }
.app-landing-pill-yellow { background: #fef9c3; color: #854d0e; }
.app-landing-stars {
    color: #f59e0b;
    font-size: 16px;
    letter-spacing: 1px;
    margin-right: 2px;
}
.app-landing-stars-num {
    font-size: 13px;
    color: #15803d;
    font-weight: 600;
}
.app-landing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 18px;
    justify-content: center;
}
.app-landing-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

/* Hero 操作行：下载按钮 + 分享 */
.app-landing-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
}
.app-landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #ffffff !important;  /* 覆盖 .app-landing a 蓝色 */
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(24, 144, 255, 0.35);
    transition: all 0.2s;
}
.app-landing-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(24, 144, 255, 0.45);
    color: #ffffff !important;
    text-decoration: none !important;
}
.app-landing-cta-icon { font-size: 18px; }
.app-landing-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.app-landing-share:hover {
    background: #f8fafc;
    border-color: #1890ff;
    color: #1890ff;
}

/* ====== 屏幕截图区 ====== */
.app-landing-section {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 20px;
}
.app-landing-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    border-left: 3px solid #1890ff;
}
.app-landing-section-title .icon { font-size: 18px; }

.app-landing-ss-stage {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/10;
}
.app-landing-ss-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    position: absolute;
    inset: 0;
    transition: opacity 0.25s ease;
    background: #f8fafc;  /* 图片加载前的浅灰底 */
}
.app-landing-ss-img.active { opacity: 1; cursor: zoom-in; }
.app-landing-ss-empty {
    color: #94a3b8;
    font-size: 14px;
    padding: 80px 20px;
    text-align: center;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-landing-ss-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    transition: background 0.2s;
    z-index: 2;
}
.app-landing-ss-nav:hover { background: rgba(0, 0, 0, 0.75); }
.app-landing-ss-nav-prev { left: 10px; }
.app-landing-ss-nav-next { right: 10px; }

.app-landing-ss-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
}
.app-landing-ss-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
    padding: 0;
    background: none;
}
.app-landing-ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-landing-ss-thumb.active { border-color: #1890ff; }
.app-landing-ss-thumb:hover { border-color: #93c5fd; }

/* ====== 内容/介绍/更新日志/须知 卡片 ====== */
.app-landing-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.app-landing-content {
    font-size: 14px;
    line-height: 1.85;
    color: #334155;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.app-landing-content p { margin: 10px 0; }
.app-landing-content p:first-child { margin-top: 0; }
.app-landing-content p:last-child { margin-bottom: 0; }
.app-landing-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.app-landing-content h2,
.app-landing-content h3,
.app-landing-content h4 { margin: 18px 0 10px; color: #1f2937; }
.app-landing-log-group { margin-bottom: 16px; }
.app-landing-log-version {
    font-size: 15px;
    font-weight: 600;
    color: #1890ff;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.app-landing-log-version::before {
    content: "●";
    color: #1890ff;
    font-size: 10px;
}
.app-landing-log-items { list-style: none; padding: 0; margin: 0; }
.app-landing-log-items li {
    padding: 4px 0 4px 18px;
    position: relative;
    color: #475569;
    font-size: 13px;
    line-height: 1.7;
}
.app-landing-log-items li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #94a3b8;
    font-size: 12px;
}

/* ====== 参数表（卡片网格化） ====== */
.app-landing-params {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.app-landing-params tr { border-bottom: 1px solid #f1f5f9; }
.app-landing-params tr:last-child { border-bottom: none; }
.app-landing-params th {
    width: 110px;
    text-align: left;
    color: #64748b;
    font-weight: 500;
    padding: 12px 16px 12px 0;
    vertical-align: top;
}
.app-landing-params td {
    color: #1e293b;
    padding: 12px 0;
    word-break: break-word;
}

/* ====== 下载须知 ====== */
.app-landing-notice {
    background: #fff7ed;
    border-left: 3px solid #f97316;
    padding: 14px 18px;
    border-radius: 6px;
    color: #7c2d12;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ============================================================
 * ★★★ 下载主区（页面底部）★★★
 * ============================================================ */
.app-landing-download {
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    padding: 40px 20px;
    margin: 32px 0 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    scroll-margin-top: 70px;
}
.app-landing-download-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.app-landing-download-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.app-landing-download-title::before {
    content: "📲";
    font-size: 28px;
}
.app-landing-download-subtitle {
    color: #64748b;
    font-size: 14px;
    margin: 0 0 28px;
}
.app-landing-download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    text-align: left;
}
/* 移动端（强制或屏幕窄）：单列 */
.app-landing.is-mobile .app-landing-download-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}

/* QR 块（沿用） */
.app-landing-qr-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    text-align: center;
}
.app-landing-qr-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.app-landing-qr-prompt-icon {
    font-size: 24px;
    line-height: 1;
}
.app-landing-qr-prompt-text {
    flex: 1;
    text-align: left;
    line-height: 1.3;
}
.app-landing-qr-prompt-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}
.app-landing-qr-prompt-text small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #1e40af;
    opacity: 0.85;
}
.app-landing-qr-box {
    width: 220px;
    height: 220px;
    margin: 0 auto 14px;
    background: #ffffff;
    border: 2px solid #1e293b;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-landing-qr-box img,
.app-landing-qr-box canvas {
    width: 200px !important;
    height: 200px !important;
    display: block;
}
/* 二维码生成前的骨架占位（避免 FOUC 白屏） */
.app-landing-qr-skel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 12px;
}
.app-landing-qr-skel-spin {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #1890ff;
    border-radius: 50%;
    animation: hlz-qr-spin 0.9s linear infinite;
}
.app-landing-qr-skel-text { font-size: 12px; color: #94a3b8; }
@keyframes hlz-qr-spin {
    to { transform: rotate(360deg); }
}
.app-landing-qr-tips {
    font-size: 13px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 12px;
    text-align: left;
}
.app-landing-qr-tips i {
    font-style: normal;
    color: #1890ff;
    font-weight: 600;
    margin-right: 6px;
}

/* 直接下载区 */
.app-landing-direct-dl {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    text-align: left;
}
.app-landing-direct-dl-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.app-landing-direct-dl-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #ffffff !important;  /* 覆盖 .app-landing a 的蓝色 */
    border-radius: 12px;
    text-decoration: none !important;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);
    transition: all 0.2s;
}
.app-landing-direct-dl-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(24, 144, 255, 0.35);
    color: #ffffff !important;
    text-decoration: none !important;
}
.app-landing-direct-dl-btn:active { transform: scale(0.99); }
.app-landing-direct-dl-btn-ios { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3); }
.app-landing-direct-dl-btn-ios:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.4); }
.app-landing-direct-dl-btn .ico { font-size: 24px; line-height: 1; }
/* iOS 按钮的 Apple Logo（用纯 CSS 内联 SVG，零依赖） */
.app-landing-direct-dl-btn-ios .ico {
    width: 26px;
    height: 26px;
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ffffff' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.4-45.6-40.8-79.2-40.8-31.6 0-58.4 16-79.6 16-21.6 0-43.2-16-71.6-16C105 143.1 67.2 174 67.2 220.8c0 32 13.2 64.4 28 88 13.6 22.4 30.4 47.2 52 47.2 19.2 0 26.4-12 50.4-12 22.4 0 29.6 12 50.4 12 21.6 0 37.6-23.2 50.4-44.8-32-13.6-44.8-40-44.8-60.4zM278.4 96c-12.8-14.4-21.6-34.4-19.2-54.4 16 1.2 34.4 10.4 45.6 24 10.4 12 19.2 32 16.8 51.2-16.8.8-35.2-8-43.2-20.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: 0;
}
.app-landing-mob-sticky-btn-ios .ico {
    width: 22px;
    height: 22px;
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ffffff' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.4-45.6-40.8-79.2-40.8-31.6 0-58.4 16-79.6 16-21.6 0-43.2-16-71.6-16C105 143.1 67.2 174 67.2 220.8c0 32 13.2 64.4 28 88 13.6 22.4 30.4 47.2 52 47.2 19.2 0 26.4-12 50.4-12 22.4 0 29.6 12 50.4 12 21.6 0 37.6-23.2 50.4-44.8-32-13.6-44.8-40-44.8-60.4zM278.4 96c-12.8-14.4-21.6-34.4-19.2-54.4 16 1.2 34.4 10.4 45.6 24 10.4 12 19.2 32 16.8 51.2-16.8.8-35.2-8-43.2-20.8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.app-landing-direct-dl-btn .text { flex: 1; }
.app-landing-direct-dl-btn .text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}
.app-landing-direct-dl-btn .text span {
    display: block;
    font-size: 12px;
    opacity: 0.85;
}
.app-landing-direct-link {
    display: block;
    padding: 12px 16px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 8px;
    transition: all 0.2s;
}
.app-landing-direct-link:hover {
    color: #1890ff;
    border-color: #93c5fd;
    background: #eff6ff;
    text-decoration: none;
}
.app-landing-tips-block {
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.app-landing-tips-block .tip-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px;
}
.app-landing-tips-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.7;
}
.app-landing-tips-block ul li {
    padding-left: 14px;
    position: relative;
}
.app-landing-tips-block ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #94a3b8;
}

/* 下架提示 */
.app-landing-offline-box {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #7f1d1d;
    padding: 20px 28px;
    border-radius: 12px;
    text-align: left;
    margin: 0 auto;
    max-width: 600px;
}
.app-landing-offline-icon { font-size: 32px; line-height: 1; }
.app-landing-offline-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.app-landing-offline-text small {
    display: block;
    font-size: 13px;
    opacity: 0.85;
}

/* ============================================================
 * 移动端 sticky 底部下载条
 * ============================================================ */
.app-landing-mob-sticky {
    display: none;  /* 桌面端不显示 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    z-index: 200;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.app-landing-mob-sticky-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #ffffff !important;  /* 覆盖 .app-landing a 蓝色 */
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
.app-landing-mob-sticky-btn:active { transform: scale(0.99); }
.app-landing-mob-sticky-btn .ico { font-size: 20px; }
.app-landing-mob-sticky-btn .text { flex: 1; }
.app-landing-mob-sticky-btn .text strong { display: block; font-size: 15px; line-height: 1.2; margin-bottom: 2px; color: #ffffff; }
.app-landing-mob-sticky-btn .text span { display: block; font-size: 11px; opacity: 0.9; color: #ffffff; }
/* 移动端 iOS sticky 按钮（深色背景） */
.app-landing-mob-sticky-btn-ios {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35) !important;
}

/* ============================================================
 * 回到顶部按钮
 * ============================================================ */
.app-landing-back-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 20px;
    cursor: pointer;
    z-index: 150;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}
.app-landing-back-top:hover {
    background: #1890ff;
    color: #ffffff;
    border-color: #1890ff;
    transform: translateY(-2px);
}
.app-landing-back-top[hidden] { display: none !important; }

/* ============================================================
 * 页脚
 * ============================================================ */
.app-landing-footer {
    background: #1e293b;
    color: #cbd5e1;
    padding: 36px 20px 16px;
    margin: 0;
}
.app-landing-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #334155;
}
.app-landing-footer-col h4 {
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}
.app-landing-footer-col p {
    font-size: 13px;
    line-height: 1.7;
    color: #94a3b8;
    margin: 0;
}
.app-landing-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
}
.app-landing-footer-col ul a {
    color: #cbd5e1;
    transition: color 0.2s;
}
.app-landing-footer-col ul a:hover { color: #ffffff; text-decoration: none; }
.app-landing-footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 16px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
}

/* ============================================================
 * Lightbox
 * ============================================================ */
.app-landing-ss-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-landing-ss-lightbox[hidden] { display: none !important; }
.app-landing-ss-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.app-landing-ss-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    transition: background 0.2s;
}
.app-landing-ss-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Lightbox 左右切换按钮 */
.app-landing-ss-lightbox-prev,
.app-landing-ss-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.app-landing-ss-lightbox-prev { left: 24px; }
.app-landing-ss-lightbox-next { right: 24px; }
.app-landing-ss-lightbox-prev:hover,
.app-landing-ss-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.08);
}

/* Lightbox 计数 */
.app-landing-ss-lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    user-select: none;
}

/* Lightbox 提示（用于 QR 码 lightbox） */
.app-landing-ss-lightbox-hint {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    user-select: none;
}

/* ============================================================
 * 响应式适配
 * ============================================================ */
@media (max-width: 900px) {
    .app-landing-hero { padding: 28px 16px 36px; }
    .app-landing-icon { width: 96px; height: 96px; border-radius: 22px; }
    .app-landing-name { font-size: 24px; }
    .app-landing-subtitle { font-size: 14px; }
    .app-landing-section { margin: 18px auto; padding: 0 16px; }
    .app-landing-card { padding: 18px; }
    .app-landing-ss-stage { aspect-ratio: 9/16; max-height: 60vh; }
    .app-landing-ss-thumb { width: 52px; height: 52px; }
    .app-landing-params th { width: 90px; }
    .app-landing-topbar { height: 48px; }
    .app-landing-download { padding: 28px 16px; }
    .app-landing-download-title { font-size: 20px; }
    .app-landing-download-grid { grid-template-columns: 1fr; gap: 18px; }
    .app-landing-footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .app-landing-mob-sticky { display: block; }   /* 移动端启用 */
    .app-landing-back-top { right: 16px; bottom: 80px; }
    /* 移动端 sticky 启用时，回到顶部按钮上移 */
}

@media (max-width: 480px) {
    .app-landing-hero { padding: 22px 14px 28px; }
    .app-landing-icon { width: 80px; height: 80px; border-radius: 18px; }
    .app-landing-name { font-size: 20px; }
    .app-landing-pill { font-size: 12px; padding: 4px 10px; }
    .app-landing-cta { padding: 10px 22px; font-size: 14px; }
    .app-landing-share { padding: 10px 16px; font-size: 13px; }
    .app-landing-section { padding: 0 14px; }
    .app-landing-card { padding: 16px; }
    .app-landing-qr-box { width: 200px; height: 200px; }
    .app-landing-qr-box img,
    .app-landing-qr-box canvas { width: 180px !important; height: 180px !important; }
}