/* 企鹅钱包 下载页样式 —— 移动端优先。
 *
 * 视觉 2026-11-09 起按 UI 稿：Figma `9zjfxrZC7P0LIY3xBWKETl` › Layout › 「下载页」分区
 * （`16878:23171` 下载页-Android、`16878:23189` 下载页-iOS；`16878:23206` 是系统下载弹窗示意，页面不做）。
 * 色值全部对应 App 的设计变量（app/src/global.css）：页面底 #f4f6fb（background/fill/body-default）、
 * 品牌蓝 #0a23de（blue-500 = --color-primary）、标题 #0b1240、空态灰 #7f8288。稿面尺寸基于 390 宽画板：
 * 左右留白 24；图标 96 / 圆角 24 / 渐变 #4a6bff → #0a1fc8（手柄 (0.2,0.1)→(0.8,0.9)，换算成 CSS 143deg、
 * 色标 14.3% / 85.7%）/ 投影 0 10 24 -4 rgba(10,35,222,.25)；图标下 16 是 24/28.8 粗体名称；再 40 是按钮区，
 * 两个 52 高的全圆角胶囊、间距 12：「下载APP」纯色 #0a23de 白字 18/27 带 24 下载图标（图标与文字间距 8），
 * 「立刻体验」透明底 1px #0a23de 描边蓝字。顶部背景纹理 390×272 是稿面 `bg-texture` 节点 3x 导出
 * （assets/bg-texture.webp，已按 #f4f6fb 压平 alpha；稿面这张纹理本身非常淡，别拿 App 的 bg-texture.webp 顶替，那张没叠 30% 白、饱和度高得多）。稿面字体 Urbanist 只对拉丁字形有效，本页文案是中文，不引入 web 字体。
 *
 * 屏幕适配与 App H5 的「手机外框」同一套做法（app/src/components/app/phone-frame.web.tsx，
 * 常量 app/src/constants/theme.ts 的 H5Frame.maxWidth = 486，2026-11-03 对齐 star）：
 *   - 内容区 width: 100% + max-width: 486px 居中、overflow: hidden；手机视口 < 486 时 max-width
 *     是空操作，手机端零变化，所以布局不写任何断点；
 *   - 外层（body）在宽于外框时铺 frame-gutter 纯黑：487 = 486 + 1，手机视口一律不命中
 *     （App 里这条媒体查询由 lib/zoom-lock.ts 注入，目的是 JS 跑起来前就有黑边，不闪白；
 *     本页 CSS 在 <head> 里同步加载，静态写在这里即可）；
 *   - 尺寸一律 px，不用 rem / vw（App 的 global.css 也没有一处 rem / vw）；
 *   - safe-area：viewport-fit=cover + env(safe-area-inset-*) 兜刘海与底部条。 */
:root {
  --primary: #0a23de;
  --primary-pressed: #0819a8;
  --outline-pressed: rgba(10, 35, 222, 0.08);
  --icon-gradient: linear-gradient(143deg, #4a6bff 14.3%, #0a1fc8 85.7%);
  --icon-shadow: 0 10px 24px -4px rgba(10, 35, 222, 0.25);
  --text-title: #0b1240;
  --text-secondary: #7f8288;
  --bg: #f4f6fb;
  --frame-gutter: #000000;
  --frame-max-width: 486px;
  --btn-height: 52px;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial,
    sans-serif;
  color: var(--text-title);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* 宽屏：外框两侧铺黑（同 App H5 的 bg-frame-gutter） */
@media (min-width: 487px) {
  body {
    background: var(--frame-gutter);
  }
}

/* 「手机外框」：486 居中，手机上就是 100% 宽。顶部纹理按宽度等比铺（稿面 390×272），下面接页面底色 */
.page {
  width: 100%;
  max-width: var(--frame-max-width);
  margin: 0 auto;
  padding: calc(186px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg) url("./bg-texture.webp") center top / 100% auto no-repeat;
}

/* 图标 + 名称（稿面：96 圆角 24 渐变方块 + 投影，内嵌 60 的白色符号；下方 16 是 24/28.8 粗体名称） */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.logo {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: var(--icon-gradient);
  box-shadow: var(--icon-shadow);
}
.logo svg {
  display: block;
  width: 60px;
  height: 60px;
}
.title {
  margin: 16px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
  color: var(--text-title);
}

/* 按钮区：名称下方 40，两个全圆角胶囊纵排，间距 12 */
.actions {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--btn-height);
  padding: 0 24px;
  border-radius: 9999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.1s,
    background-color 0.15s;
}
/* display:flex 会压过 hidden 属性的 UA 样式，必须显式关掉（2026-11-04 旧版二维码卡片踩过） */
.btn[hidden] {
  display: none;
}
.btn:active {
  transform: scale(0.985);
}
/* 「下载APP」：纯色品牌蓝胶囊 + 下载图标 */
.btn-primary {
  background: var(--primary);
  color: #ffffff;
}
.btn-primary:active {
  background: var(--primary-pressed);
}
/* 「立刻体验」：透明底、1px 品牌蓝描边、蓝字 */
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:active {
  background: var(--outline-pressed);
}
.btn-icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}
/* 空态：两个按钮都不可用时（稿面没画，沿用稿面的次要灰） */
.empty {
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
}
.empty[hidden] {
  display: none;
}

/* 微信 / QQ 引导遮罩：fixed 铺满视口（逃出 .page 这层框），内容再套一层 486 居中的 .mask-inner */
.mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.82);
  color: #ffffff;
}
.mask[hidden] {
  display: none;
}
.mask-inner {
  width: 100%;
  max-width: var(--frame-max-width);
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 20px 0;
}
.mask-arrow {
  display: flex;
  justify-content: flex-end;
}
.mask-arrow svg {
  width: 96px;
  height: 96px;
  margin-right: 8px;
}
.mask-body {
  margin-top: 8px;
  padding: 0 8px;
}
.mask-step {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.4;
}
.mask-dots {
  display: inline-block;
  padding: 0 8px;
  border: 1.5px solid #ffffff;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
}
.mask-note {
  margin: 24px 0 0;
  font-size: 14px;
  opacity: 0.8;
}