@charset "utf-8";

/* ===== 佳小宝 APP 下载页 · 参考 jlmhk 极简版（2026-10-26 第 42 版）=====
   第 42 版（2026-10-26，仍守「一屏极简」）：
     · 修构图：左列从 flex:1 改为固定 240（机身外宽），wrap 由 space-between 改 center；
       原来手机与白卡之间空出 200+px，现在两组作为一个整体居中，间距 48。
     · 平板断点：白卡 max-width:420 + margin:auto，避免 1040px 以下按钮被拉成整行宽。
     · 预览图改 <picture>：480w WebP（约 67KB）优先，PNG 750w 兜底；img 补 width/height。
     · 安装提示与「未知来源」说明补到按钮下（与 m 站同口径），meta 文字压深到 #6f7885。
     · 微信内置浏览器点下载 → 弹层提示「右上角 ··· → 在浏览器打开」（仅 PC 端需要，m 端已有）。
     · head 补 canonical 固定 /app/、m 站 alternate、OG/Twitter、JSON-LD（数据来自真实 APK）。
   第 41 版（2026-10-18）：
   ⚠️ 迭代史（别重走）：V16~24 白底极简逐版被否；V25/26 多屏「太复杂」；V27 单列居中通过；
      V28 橙大色块「很难看」；V29 白底左右（方向对但太复杂）；V30 极简版（截图太大/一屏装不下）；
      V31 卡片式（橙 logo+橙按钮与全站身份脱节）；V32 通栏两栏 hero；V33 二维码为主单列取景框；
      V34 补成 58同城式落地页 → 逐轮删减；V35 右侧改「标题+大二维码」→ 超过页脚被否；
      V36/37 只剩 Hero + 单机；V38 视觉打磨（rim 高光/侧键/玻璃反光/落地投影/标题短横/按钮图标）；
      V39 删 iPhone 引导行（.dlx-alt）；V40 删 chips/「或」分隔线 + 二维码中心 logo + 版本/大小行。
   **本版（V41）反馈「删除 首页 > 佳小宝APP」= 删面包屑**：
      删 app.htm 的 <div class="now"> 整行 + 预览的 .ph-now 假条 → 高度预算多出 ≈36px（见下）。
      ① 左 = **单机** mockup（app_preview.png，750×1624，居中不旋转，机身宽 220，含 V38 打磨）。
      ② 右 = 白卡：h1「手机扫描二维码下载佳小宝APP」+ 二维码(190，四角取景，**中心叠站点 logo**)
         + 下载按钮 + 版本/更新/大小行（$app_meta，读 dl/ 下真实 APK）。
      已删：6 类目 chips、「或」分隔线、iPhone 引导、功能九宫格、保障条、末屏 CTA、品牌行。
      本文件现在只剩 Hero 样式。
   ⚠️⚠️ 二维码中心 logo 与纠错级别**强耦合，必须成对改**：
      logo 盖住中心约 15% 模块 → qr.php 必须用 ec=h（约 30% 容错），app.php 已传 &ec=h。
      若哪天去掉 .dlx-qr__logo，记得把 ec=h 退回 ec=l（默认），否则白占容错让码变密。
      ⚠️ logo 素材是 images/app_qr_logo.png（108px，由 images/logo后台.png 缩来，白底红标）。
         换 logo 必须仍是**白底方形**，且保持 36px + 3px 白环的遮挡比例别再放大。
   ⚠️ 单屏硬指标**恢复生效**（V34 的「主动放宽」作废）：反馈「上下距离已经超过页脚了」。
      预算算法：视口高 − 页头 ≈156 − 页脚 ≈179 = Hero 可用高度。
      **V41 已删面包屑「首页 > 佳小宝APP」**（反馈），比原算法**多出 ≈36px 余量**；
      原预算约 530（1080p/900 视口），现在约 566。
      故 Hero 内容高上限从 ~475 放宽到 ~511：左列 489 = 上边距14 + 机身475(宽220，图 750×1624 等比) 是当前瓶颈。
      V40 删 chips/分隔线省约 67px、加 logo(0)/meta(+18)，右列变矮 → 左列仍是瓶颈，**总高未涨**。
      👉 现在多出的 36px 可用来把机身 220 加大到约 232（或保持 220 留缓冲），**尚未用掉** —— 想放手机时从这里取。
   ⚠️ 诚实红线不变：只有安卓安装包、未上架任何商店 —— 全页【不出现】「应用商店 / App Store」字样
      （连「未上架应用商店」也不写，改说「官网安装包 / 扫码即装」）；iPhone 一律引导 /m/；
      $app_meta 的版本/日期/大小**必须读 dl/ 下真实 APK 文件**（app.php 已做），不许写死、不许编造评分/下载量/用户数。
   ⚠️ QR 三件套成对改：app.php size=8（原生 232）≥ CSS 显示尺寸 + ec=h。
      V45 起桌面显示 168 → V47 改 150 → V48 改 **176**（≤640 仍 190）—— 三个值都在 90~232 安全区内，
      改显示尺寸不必动 app.php 的 size=8；但别让显示尺寸超过原生 232（会糊）或低于 90（扫不出）。
   类名前缀 dlx-（与 merged.css 已核无冲突）；通栏出血沿用 .footwrap 的 calc(-50vw + 50%) 写法。
   ⚠️ merged.css 锁了 a:hover，本页凡链接必须带 !important。

   第 44 版（2026-10-27）：间距 144→88 + 两栏竖向分隔线（.dlx-card::before）—— 后被 V45 取代。
   第 45 版（2026-10-27，左右栏重做 = 方案 B「手机主导」）：
     · 定案：右栏从 380 的白卡收窄成 **300 的窄下载条**（二维码 190→168、标题 17→15.5、内边距收紧），
       让「手机（250×561）」靠体量差成为绝对主体 —— 主次分明。
     · 手机**保持 250 不再放大**：单屏预算上限约 565（视口 − 页头 156 − 页脚 179），
       250 机身已 561，再放大必然顶到页脚（历史上「上下距离超过页脚」被否过）。
     · 间距 88→72（配合右栏变窄，两组更紧凑）；**删掉 V44 的竖向分隔线**（方案 B 是主次关系，
       不是对等双栏，分隔线会把两者重新拉平）。
     · 响应式：≤1040 竖排时白卡 max-width 420→340；≤640 二维码仍 190（小屏放大更好扫）。
     · 尺寸/对齐其余不动：手机仍 250、顶部对齐；渐变底、机身打磨、橙→红按钮、QR 中心 logo 全保留。
   第 46 版（2026-10-27，反馈「左右没有对齐 + 左右距离太近」）：
     · **两栏等高**：wrap 由 align-items:flex-start 改 **stretch** → 右卡拉到与手机同高 561，
       上下两条边都齐平（原来顶边齐、底边差约 160 才显得参差）。
     · 卡内改纵向 flex：标题顶、二维码居中、按钮+meta 贴底（.dlx-qr 的 margin:auto 吸收剩余空间）。
       ⚠️ 配套必须给 .dlx-qr 加 align-self:center，否则取景框四角会飞到卡片边缘（详见该规则注释）。
     · **间距 72→120**（反馈「太近」）。
     · 手机仍 250×561、右栏仍 300 —— 尺寸不动，只解决对齐与间距。
   第 47 版（2026-10-27，重新设计 = 58 风格 + **严格单屏**）：
     · **单屏硬指标**：视口高 − 页头156 − 页脚179 = Hero 可用高（1080p/900 视口 ≈565）。
       上一版手机 250（高561）已超预算：156+561+52+179 = 948 > 900 ⇒ 必然出滚动条。
       故机身 **250→200**（高 561→453），wrap padding 26→22（再省 8）。
       现总高 ≈ 156 + (453+44) + 179 = **832**，900 视口留 68px 余量 ✅（850 视口仍不出条）。
     · **58 风格右栏层级**：大字主标题「下载佳小宝APP」22px + 一行 slogan（负责说清「这是什么」）
       + 二维码(150)带「扫码下载」标签 + 按钮 + meta/tip。
       二维码与标签打包成 **.dlx-qrbox** 整块吸收卡内剩余空间（margin:auto），
       ⚠️ 不能把 margin:auto 留在 .dlx-qr 上 —— 那样标签会被甩到底部组、与码分家。
     · 保留 V46 的**两栏等高**（align-items:stretch）与**间距 120**；卡宽仍 300。
     · ⚠️ slogan 本质是 V40 删过的「副标题」，本次为 58 风格重新加回 ——
       不想要就删 app.htm 的 <p class="dlx-slogan"> 一行 + 本文件 .dlx-slogan 规则。
     · ⚠️ 机身缩放是**连带项**：改 .dlx-phone 的 width 必须同步改 侧键 top/height、
       .dlx-phone__scr 圆角、.dlx-phones 高度、.dlx-phones::after 投影宽度 —— 只改 width 会错位。
   第 48 版（2026-10-27，反馈「太小气」= 尺寸/留白太拘谨，**在守住 1 屏的前提下尽量放大**）：
     · 高度是死约束，所以**主要从横向放大**（不增高一分）：白卡 300→**420**、二维码 150→**176**、
       标题 22→**26**、slogan 13→14、按钮 48/16 → **50/17**、卡片圆角 16→18、内边距 24/26。
     · 手机 200→**220**（高 453→497），wrap padding 22→**18** 抵掉一部分增高。
       现总高 ≈ 156 + (497+36) + 179 = **868**，900 视口仍留 32px 余量 ✅（930 视口余 62）。
       卡内自然高 ≈490 < 497 ⇒ 仍由手机决定高度，两栏等高不被破坏。
     · 机身连带项同步：侧键 99/31 与 76/51、屏幕圆角 23、投影 202、left 220→240。
     · ⚠️ 再想更大只能二选一：**牺牲 1 屏**（放行滚动条）或**砍掉 slogan/meta/tip 腾高度**。
       横向上还有余地（卡 420→460、码 176→200），不会触碰单屏预算。 */

.dlx{position:relative;}

/* ===================== HERO ===================== */
/* 蓝→红 的品牌渐变底（蓝取自全站 --primary，红取自 --brand），呼应「蓝导航+红CTA」身份 */
.dlx-hero{
	margin-left:calc(-50vw + 50%);
	margin-right:calc(-50vw + 50%);
	background:linear-gradient(135deg,#2a7ab5 0%,#c8161d 100%);
}
.dlx-hero__wrap{
	width:1180px;max-width:100%;margin:0 auto;box-sizing:border-box;
	display:flex;align-items:stretch;justify-content:center;gap:120px;
	padding:18px 24px;text-align:left;
}

/* ---- 左：单机 mockup（正面那台，居中；双机已按反馈简化） ---- */
/* 固定 240 = 机身外宽（220 内容 + 左右各 10 内边距）。这样左列不会先吃掉剩余宽度、
   再把手机在巨大的空列里居中，导致手机和白卡之间出现 200+px 的断档。 */
/* V43（2026-10-27）：左机身 220→250（用 V41/V42 留出的预算放大，左侧更有存在感）；
   两栏由 align-items:center 改 flex-start（顶部对齐），右卡不再垂直居中悬空、与手机齐头。 */
.dlx-left{flex:0 0 240px;width:240px;text-align:left;display:flex;justify-content:center;}
.dlx-phones{position:relative;flex:none;width:100%;max-width:320px;height:497px;margin-top:0;}
.dlx-phone{
	position:absolute;top:0;left:50%;transform:translateX(-50%);
	width:220px;border-radius:31px;background:#0f1216;
	padding:10px;
	/* rim 高光勾出机身边缘，避免黑机身糊在渐变底上 */
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.14),
		inset 0 1px 0 0 rgba(255,255,255,.08),
		0 30px 60px -24px rgba(0,0,0,.55);
}
/* 侧键：右侧电源键 + 左侧音量键，让机身不再是光秃一块 */
.dlx-phone::before,.dlx-phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2b3037;}
.dlx-phone::before{top:99px;right:-3px;height:31px;}    /* 电源键 */
.dlx-phone::after{top:76px;left:-3px;height:51px;}      /* 音量键 */

.dlx-phone__scr{position:relative;display:block;border-radius:23px;overflow:hidden;background:#fff;line-height:0;}
.dlx-phone__scr picture{display:block;line-height:0;}
.dlx-phone__scr img{display:block;width:100%;height:auto;}
/* 屏幕玻璃反光：一道斜向高光，压住截图的平面感 */
.dlx-phone__scr::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(118deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 24%,rgba(255,255,255,0) 46%);
}
/* 落地投影：让手机「站」在渐变底上而不是浮空 */
.dlx-phones::after{
	content:"";position:absolute;left:50%;bottom:0;width:202px;height:26px;
	transform:translateX(-50%);pointer-events:none;
	background:radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 72%);
}

/* 类目 chips（.dlx-chips）已按反馈整体删除（V40） */

/* ---- 右：二维码卡（参考 jlmhk：一句加粗标题 + 大二维码 + 下载按钮），刻意从简 ---- */
/* V46：两栏等高 —— wrap 改 align-items:stretch，右卡拉到与手机同高（561），
   卡内改纵向 flex，内容按「标题在上 / 二维码居中 / 按钮在下」分布（见 .dlx-qr 的 margin:auto）。 */
.dlx-card{
	flex:none;width:420px;box-sizing:border-box;background:#fff;border-radius:18px;
	padding:24px 24px 26px;box-shadow:0 26px 64px -26px rgba(0,0,0,.4);
	text-align:center;
	display:flex;flex-direction:column;
}
/* 58 风格标题层级：大字主标题 + 一行 slogan（口号负责说明「这是什么」，标题只管品牌动作） */
.dlx-qrh{margin:0 0 10px;font-size:26px;font-weight:800;color:#14171c;letter-spacing:.5px;line-height:1.3;}
.dlx-qrh::after{content:"";display:block;width:36px;height:3px;margin:8px auto 0;border-radius:2px;background:linear-gradient(90deg,#ff8a50,#c8161d);}
.dlx-slogan{margin:0 0 16px;font-size:14px;color:#6b7482;letter-spacing:.2px;line-height:1.6;}
/* 二维码 + 「扫码下载」标签打包成一个块，由它吸收卡内剩余空间（margin:auto）→ 标题顶、码居中、按钮贴底 */
.dlx-qrbox{margin:auto 0;display:flex;flex-direction:column;align-items:center;}
.dlx-qrl{margin-top:10px;font-size:13px;color:#5f6874;letter-spacing:1px;line-height:1.5;}
/* ⚠️ align-self:center 不能省：卡改纵向 flex 后 .dlx-qr 会被拉伸到整栏宽，
   四角取景框（.dlx-qr__c 绝对定位于 .dlx-qr 四角）就会飞到卡片边缘、不再贴着二维码。 */
.dlx-qr{position:relative;display:inline-block;padding:10px;align-self:center;margin:0;}
.dlx-qr__pad{display:inline-block;padding:8px;border:1px solid #e8ebf1;border-radius:9px;background:#fff;box-shadow:0 10px 24px -16px rgba(15,23,42,.35);line-height:0;}
.dlx-qr__img{display:block;width:176px;height:176px;}
.dlx-qr__c{position:absolute;width:24px;height:24px;border:3px solid #c8161d;border-radius:3px;transition:width .18s ease,height .18s ease;}
.dlx-qr__c--tl{top:0;left:0;border-right:0;border-bottom:0;}
.dlx-qr__c--tr{top:0;right:0;border-left:0;border-bottom:0;}
.dlx-qr__c--bl{bottom:0;left:0;border-right:0;border-top:0;}
.dlx-qr__c--br{bottom:0;right:0;border-left:0;border-top:0;}

/* 二维码正中的站点 logo：白底红标（images/app_qr_logo.png），用 3px 白色静区环隔开码的模块。
   ⚠️ 盖住中心约 15% 模块 —— 必须配 qr.php 的 ec=h（30% 容错），改这里就要同步检查纠错级别。 */
.dlx-qr__logo{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	display:block;width:36px;height:36px;margin:0;border-radius:8px;background:#fff;
	box-shadow:0 0 0 3px #fff;pointer-events:none;
}
.dlx-qr__logo img{display:block;width:100%;height:100%;border-radius:8px;}

.dlx-btn-main{
	display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;
	border-radius:25px;background:linear-gradient(135deg,#ff8a50,#c8161d);color:#fff;
	font-size:17px;font-weight:700;letter-spacing:1px;text-decoration:none;
	box-shadow:0 14px 28px -14px rgba(200,22,29,.6);transition:transform .15s ease,filter .15s ease;
}
.dlx-btn-main:hover{background:linear-gradient(135deg,#ff9a66,#e4393c)!important;color:#fff!important;text-decoration:none!important;transform:translateY(-1px);filter:brightness(1.04);}
.dlx-btn-main:focus-visible{outline:3px solid #14171c;outline-offset:3px;}
.dlx-btn-main svg{width:20px;height:20px;fill:#fff;flex:none;}

/* 版本/更新时间/安装包大小（$app_meta，来自 dl/ 下真实 APK 文件，非编造数据）。
   两项都拿不到时模板整行不渲染。放在按钮下方作为「这包是最新的」信任信号。
   V42：12px 文字压深到 #6f7885（原 #98a1ad 对比度不足）。 */
.dlx-meta{margin-top:12px;font-size:12px;color:#5f6874;letter-spacing:.2px;line-height:1.5;}
/* V42：安卓安装提示，与 m 站「安装时若提示未知来源」同口径；没有 APK 时整行不渲染。 */
.dlx-tip{margin-top:6px;font-size:11.5px;color:#6b7482;letter-spacing:.2px;line-height:1.5;}

/* V42：微信内置浏览器（PC 端）点下载的提示层。默认不占位，只在命中 MicroMessenger 时由 JS 打开。 */
.dlx-wx{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;}
.dlx-wx.is-on{display:flex;}
.dlx-wx__mask{position:absolute;inset:0;background:rgba(9,13,20,.62);}
.dlx-wx__box{position:relative;width:100%;max-width:340px;box-sizing:border-box;background:#fff;border-radius:16px;padding:26px 22px 20px;text-align:center;box-shadow:0 26px 64px -22px rgba(0,0,0,.55);}
.dlx-wx__box b{display:block;margin-bottom:9px;font-size:16px;color:#14171c;}
.dlx-wx__box p{margin:0 0 18px;font-size:13.5px;line-height:1.75;color:#5b6573;}
.dlx-wx__btn{display:inline-block;min-width:132px;height:40px;border:0;border-radius:20px;background:linear-gradient(135deg,#ff8a50,#c8161d);color:#fff;font-size:14px;font-weight:700;cursor:pointer;}
.dlx-wx__btn:focus-visible{outline:3px solid #14171c;outline-offset:2px;}

/* iPhone 引导行（.dlx-alt）已按反馈整体删除（V39） */

/* 分区样式：功能九宫格已按反馈整体删除（V36），tpl-app.css 现在只剩 Hero */

/* ===================== 响应式 ===================== */
@media (max-width:1040px){
	.dlx-hero__wrap{flex-direction:column;align-items:stretch;gap:28px;padding:34px 24px;}
	/* 竖排时左列恢复整行宽，手机仍居中；白卡限宽 420，避免按钮被拉成整行宽 */
	.dlx-left{flex:1 1 auto;width:auto;}
	.dlx-phones{height:497px;margin:14px auto 0;}
	.dlx-phone{width:220px;}
	.dlx-card{width:100%;max-width:420px;margin:0 auto;}
}
@media (max-width:640px){
	.dlx-hero__wrap{padding:20px 16px;}
	.dlx-phones{height:406px;margin-top:18px;}
	.dlx-phone{width:178px;border-radius:26px;padding:8px;}
	.dlx-phone__scr{border-radius:20px;}
	.dlx-card{padding:22px 18px;border-radius:16px;}
	.dlx-qrh{font-size:23px;margin-bottom:10px;}
	.dlx-qr__img{width:190px;height:190px;}
}

@media (prefers-reduced-motion:reduce){
	.dlx-btn-main{transition:none;}
	.dlx-btn-main:hover{transform:none;}
}