/* ============================================================================
 * screens.css · 五个屏的版面与动效
 *
 * ★ 全部用 **Penpot 画板（390 × 844.5）的绝对坐标**摆放，单位就是设计 px。
 *   屏幕装不下时不再逐元素压缩，而是整体缩放舞台（--stage-k，见 base.css / layout.js）。
 *   所以这里**没有任何纵向弹性留白、没有 media query、没有 --dz / --video-h / --card-k**。
 *
 * 每个元素后面的注释是它的设计出处（图层名 + 坐标），改之前先回 Penpot 核。
 * ========================================================================== */

/* ############################################################################
 * P1 · 封面   （Penpot 屏1a-封面）
 * ########################################################################## */
.cover-brand       { position: absolute; left: 144.5px;  top: 28px;  width: 101px;     height: 24px; }
.cover-wordmark    { position: absolute; left: 21px;     top: 143px; width: 323px;     height: 232px; }
/* ★ P1 双行标题：一张 4× PNG。
   Penpot `小标题` 图层实测 (60, 522) 270×71；
   原两行元素合起来是 (89.373,521) 207.254×28.959 + (0,556) 390×36
   → 纵向 521..592，与设计 522..593 严丝合缝（各留 1px）。 */
.cover-title {
  position: absolute;
  left: 60px; top: 522px;
  width: 270px; height: 71px;
  object-fit: contain;          /* 比例一致，不会留边；窄屏也只等比缩放 */
  max-width: calc(100% - 24px);
}
.cover-cta         { position: absolute; left: 113.5px;  top: 645px; width: var(--btn-w);      height: var(--btn-h); }
/* 底部说明：设计墨迹 22..190（**左对齐在 x=22**，不是屏幕居中）*/
.cover-note {
  /* Penpot 导出的透明 PNG：CSS 显示尺寸严格等于设计稿 168×16（1×，不放大） */
  position: absolute;
  left: 22px; top: 818px;
  width: 168px; height: 16px;
  display: block; object-fit: contain;
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

/* ############################################################################
 * P2 · 选择机型   （Penpot 屏2a-选择机型）
 * ########################################################################## */
/* 机身组占满整个舞台坐标系，元素直接按设计坐标摆 */
.phone-stage { position: absolute; inset: 0; }

.phone {
  position: absolute;
  padding: 0;
  background: none;
  border-radius: 10px;
  display: block;
  /* .phone 这一层只承担「入场位移」。命中区就是它，
     所以入场过程中机身画到哪、可点的区域就在哪。 */
  will-change: transform;
}
.phone__zoom {
  display: block;
  /* 这一层只承担「选中缩放 + 明暗」 */
  transform: scale(var(--phone-s, 1));
  transition: transform 0.36s var(--ease-soft), filter 0.36s var(--ease-soft);
  will-change: transform;
}
.phone__img {
  width: 100%;
  height: auto;
  pointer-events: none;
  /* 这一层只承担「静止悬浮」 */
}
/* 产品1 = 淬火(红) (38.5,185) 150×389.189 ；产品2 = 破风(蓝) (201.5,127) 150×365.831 */
.phone--red  { left: 38.5px;  top: 185px; width: 150px; }
.phone--blue { left: 201.5px; top: 127px; width: 150px; }

/* 选中态：放大 + 提亮 + 抬层级；另一台缩小 + 压暗 */
.phone-stage[data-selected="RED"] .phone--red,
.phone-stage[data-selected="BLUE"] .phone--blue { --phone-s: 1.06; z-index: 3; }
.phone-stage[data-selected="RED"] .phone--red .phone__zoom,
.phone-stage[data-selected="BLUE"] .phone--blue .phone__zoom {
  filter: brightness(1.06) drop-shadow(0 18px 30px rgba(20, 26, 48, 0.22));
}
.phone-stage[data-selected="RED"] .phone--blue,
.phone-stage[data-selected="BLUE"] .phone--red { --phone-s: 0.94; z-index: 1; }
.phone-stage[data-selected="RED"] .phone--blue .phone__zoom,
.phone-stage[data-selected="BLUE"] .phone--red .phone__zoom { filter: brightness(0.9); }

/* 「破风 / 淬火」：设计里是旋转过的矢量，旋转已烘焙进 SVG。
   ★ 尺寸必须用**导出的天然尺寸**（viewBox 含描边/阴影留白），
     否则浏览器/画布会把它按错误比例拉伸 —— 这是上一版箭头发虚、ACE 变形的同一个根因。 */
.splash { position: absolute; pointer-events: none; transition: opacity 0.36s var(--ease-soft); }
.splash--cuihuo { left: 50px;  top: 130px; width: 130px; height: 86px; }   /* Penpot (50,130) */
.splash--pofeng { left: 188px; top: 460px; width: 150px; height: 99px; }   /* Penpot (188,460) */
.phone-stage[data-selected="RED"] .splash--pofeng,
.phone-stage[data-selected="BLUE"] .splash--cuihuo { opacity: 0.35; }

/* 入场：两台从屏幕底部向上进来，错开 120ms，不弹跳 */
@keyframes phone-rise {
  from { transform: translate3d(0, 118%, 0); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes splash-fade {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
/* 静止时极轻的悬浮：只动 img，和上面两层的 transform 互不干扰 */
@keyframes phone-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
.phone__img { animation: phone-float 5.4s ease-in-out infinite; }
.phone--red .phone__img { animation-duration: 6.1s; animation-delay: 0.5s; }

.phone-stage[data-entering] .phone { animation: phone-rise 0.86s var(--ease-soft) both; }
.phone-stage[data-entering] .phone--red { animation-delay: 0.12s; }
.phone-stage[data-entering] .splash { animation: splash-fade 0.7s var(--ease-soft) both; animation-delay: 0.34s; }
.phone-stage[data-entering] .splash--pofeng { animation-delay: 0.46s; }

.phone-cta { position: absolute; left: 96.5px; top: 649px; width: var(--btn-w-wide); height: var(--btn-h); }

/* ############################################################################
 * P3 · 上传信息   （Penpot 屏3a-上传信息）
 * ########################################################################## */
/* 「上传头像」墨迹 142.956..246.956，中心 194.956 ≈ 舞台中心 → 整行居中 */
/* P3 白色拍立得相纸：Penpot 实测 (39.4,120) 309×640，白色、圆角 4，
   阴影 inner-shadow 0,0 blur10 spread4 + drop-shadow 0,-10 blur30。
   ★ 独立图层，不是把整页背景改白；层级在所有 P3 内容之下（z-index:0）。 */
.polaroid {
  position: absolute;
  left: 39.4px; top: 120px;
  width: 309px; height: 640px;
  border-radius: 4px;
  background: #ffffff;
  /* ★ 严格照 Penpot 实测（不估算）：
       inner-shadow  #ffffff @ 0.5   0,0  blur 10  spread 4
       drop-shadow   #000000 @ 0.06  0,-10 blur 30  spread 0
     旧版写的是 rgba(67,106,189,...) 蓝调、外层还给了 0.20（设计稿的 3.3 倍）
     —— 那正是「卡片顶部和左右一大片灰蓝阴影」的来源。
     顺序与设计稿一致；内阴影用 inset。不额外加蓝环境光 / 外发光 / 背景模糊。 */
  box-shadow: inset 0 0 10px 4px rgba(255, 255, 255, 0.5),
              0 -10px 30px 0 rgba(0, 0, 0, 0.06);
  z-index: 0;
  pointer-events: none;
}

.up-title {
  position: absolute; left: 0; top: 159.861px;
  width: 390px; height: 33px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-hero); font-weight: 500; line-height: 1.24;
  color: var(--ink); white-space: nowrap;
}
/* 「解锁风头正劲的你」墨迹 91.5..298.5，中心 195 → 整行居中；竖向渐变字 */
.up-sub {
  position: absolute; left: 0; top: 193px;
  width: 390px; height: 33px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-hero); font-weight: 500; line-height: 1.24;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dropzone {
  position: absolute; left: 99px; top: 257.105px;
  width: 192px; height: 192px;
  border-radius: var(--r-btn);
  /* Penpot 新版：上传框是**有填充**的 #dfe4f0（旧版是透明）*/
  background: #dfe4f0;
  opacity: 0.9;
  transition: transform 0.2s var(--ease-out);
  /* ★ 整个头像框就是唯一的换图入口（各状态通用）—— Desktop 指针要明确表达可点 */
  cursor: pointer;
}
.dropzone:active { transform: scale(0.985); }
/* 「正在处理 / 正在检测」期间不重复触发，指针也如实表达不可点 */
.dropzone[data-status="processing"],
.dropzone[data-status="checking"] { cursor: default; }
.dropzone[data-status="processing"]:active,
.dropzone[data-status="checking"]:active { transform: none; }
/* 点线边框用内联 SVG 画：CSS 的 dotted 间距由浏览器决定，
   而设计里是明确的 `stroke-width 4 / dasharray 0 7`（导出 SVG 实测）。 */
/* 描边参数写在 SVG 里（与 Penpot 导出一致）；CSS 只管层级与尺寸 */
.dropzone__border { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* ★ 这四个图标的尺寸一律取**导出 SVG 的天然尺寸**（viewBox 里 Penpot 已为描边/阴影留白），
   并把「设计坐标 + viewBox 原点」作为盒子左上角。
   按设计形状尺寸去渲染会把它们压扁 —— 上一版返回箭头只有应有的 35%、ACE 横向压到 69%。 */
/* dz-avatar：设计组 (150.84,288.945) 88.32²；导出天然 178.32×186.619，viewBox(-45,-45) */
.dz-avatar {
  position: absolute; left: 6.84px; top: -13.105px;    /* 150.84-45-99 , 288.945-45-257.105 */
  width: 178.32px; height: 186.619px;
}
/* dz-cam：设计组 (216.955,355.06) 21.504²；导出天然 111.504×120.504，viewBox(-45,-45) */
.dz-cam {
  position: absolute; left: 72.955px; top: 52.955px;   /* 216.955-45-99 , 355.06-45-257.105 */
  width: 111.504px; height: 120.504px;
}
/* dzTitle：「点击上传 / 拍照」设计 (146.635,399.265) 96.73×18，水平中心 195 = 舞台中心 */
/* 状态行：设计里那行「点击上传 / 拍照」，被状态机复用为唯一的状态文案载体。
   多行（未过审 / 繁忙时是两行）靠 height:auto + 顶部锚点撑开，不挤压别的元素。 */
.dz-title {
  position: absolute; left: 0; top: 142.16px;          /* 399.265 − 257.105 = 142.16 */
  width: 192px; min-height: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--fs-dz); font-weight: 500; line-height: 1.35;
  color: var(--ink); text-align: center; white-space: pre-line;
  z-index: 3;                                          /* 在有照片时要压在预览之上 */
}
/* 轻量操作：纯文字 + 下划线，**不是**按钮框 —— 需求 §13 要求成功轻、失败明确而不喧哗。
   位置在上传框正下方的空隙（设计坐标 y≈452，框底 449.105），不挤占框内空间。 */
.dz-actions {
  position: absolute; left: 0; top: 452px; width: 390px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.dz-action {
  font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.dz-action:active { opacity: 0.6; }

/* 选完图：占位人形与相机角标让位给真实预览。
   ★ 但 `.dz-title` **不再**一起隐藏 —— 它是状态行（「正在检测照片…」「✓ 点击照片可更换」）。 */
.dropzone[data-filled] .dz-avatar,
.dropzone[data-filled] .dz-cam { display: none; }

/* 状态行压在照片上时，垫一层很淡的压暗才读得清。
   做法与海报里的昵称暗底同一种（底部渐隐），不是新的视觉语言。 */
.dropzone[data-scrim]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background: linear-gradient(180deg, rgba(8, 14, 30, 0) 0%, rgba(8, 14, 30, 0.46) 100%);
  z-index: 2; pointer-events: none;
}
/* 状态行压在照片上时用白字（仅在有照片的 processing/checking/approved 会出现 data-scrim）*/
.dropzone[data-scrim] .dz-title { color: #fff; }

/* 上传框内的「拍摄建议」：Penpot 最后一层 (113.4,421) 166×13，
   相对上传框 (99,257.11) 即 (14.4,163.89)。只在上传框处于空态时显示。 */
.dz-hint {
  position: absolute;
  left: 14.4px; top: 163.89px;
  width: 166px; height: 13px;
  display: none;
  align-items: center; justify-content: center;
  font-size: var(--fs-tag); font-weight: 400; line-height: 13px;
  color: rgba(0, 0, 0, 0.5);                    /* Penpot fill #000 op .5 */
  white-space: nowrap; z-index: 3;
}
.dropzone[data-status="empty"] .dz-hint { display: flex; }

/* 检测中：给一点点呼吸感，但不做夸张 loading（需求 §2/§3）。
   ★ 只对 processing / checking 生效 —— 空态的「点击上传 / 拍照」必须是纯黑常显。 */
.dropzone[data-status="processing"] .dz-title,
.dropzone[data-status="checking"] .dz-title {
  opacity: 0.75; animation: dz-breathe 1.5s ease-in-out infinite;
}
@keyframes dz-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .dropzone[data-status="processing"] .dz-title,
  .dropzone[data-status="checking"] .dz-title { animation: none; opacity: 0.75; }
}

.dz-preview {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  /* 预览按方形框铺满（设计里上传框就是正方形）；送出去的字节仍是原比例，没有裁 */
  object-fit: cover;
}

/* 昵称框：设计 (22,476) 346×50 */
/* 昵称框：Penpot 新版实测 (67.4,479) 255×44，opacity .9（旧版是 346×50 @22,476）*/
.field {
  position: absolute; left: 67.4px; top: 479px;
  width: 255px; height: 44px;
  opacity: 0.9;
  border: 1px solid var(--brand);
  border-radius: var(--r-btn);
  background: rgba(67, 106, 189, 0);
}
.field__input {
  width: 100%; height: 100%; padding: 0 16px;
  border: 0; background: none; outline: none;
  font-size: var(--fs-field); font-weight: 500; line-height: 1.4;
}
.field__input::placeholder { color: rgba(0, 0, 0, 0.4); }
.field[data-invalid] { border-color: #e0483b; }

/* nicknameTag：设计 (237,533) 131×13，墨迹右端 368 */
.field__tag {
  position: absolute; left: 126.5px; top: 533px;
  width: 131px; height: 15px;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: var(--fs-tag); font-weight: 400; line-height: 15px;
  color: rgba(0, 0, 0, 0.5); white-space: nowrap;   /* Penpot op .5 */
}

.profile-cta { position: absolute; left: 113.5px; top: 645px; width: var(--btn-w); height: var(--btn-h); }

/* quota：Penpot 新版实测 (105.02,704) 174×17（旧版 714 / 14）*/
.quota {
  position: absolute; left: 105.02px; top: 704px;
  width: 174px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-quota); font-weight: 400; line-height: 14px;
  color: rgba(0, 0, 0, 0.72); white-space: nowrap;
}
.quota b { font-weight: 500; color: var(--brand-ink); }

/* ############################################################################
 * P4 · 生成中   （Penpot 屏4a-生成中）
 * ########################################################################## */
.gen-brand { position: absolute; left: 144.5px; top: 28px; width: 101px; height: 24px; }

/* 视频位：设计 (41.5,99) 307×545（比例 0.5633）。
   §11 要求视频**严格 9:16**，故高度取 307×16/9 = 545.78（比设计高 0.78px，肉眼不可见）；
   片源 608×1080 本身就是精确 9:16，object-fit:cover 下不裁不变形、无黑边。 */
/* ★ P4 视频：**铺满它所在的舞台**。
   移动端舞台 = 整屏；PC 舞台 = 居中的 390×845 手机容器。
   两侧都天然保持 9:16 与外层同比例 —— 不会横向/纵向拉伸，也没有黑边。

   ⚠️ 这里原来是 R1 的旧版式 `(41.5,99) 307×546`（视频小卡片 + 独立进度行），
   而当前 Penpot P4 是**全屏出血**：视频铺满整屏、压黑层与其上的文案/进度条叠加。
   旧值在 PC 宽屏上就表现为「视频缩成中央一根竖条、进度条位置异常、底部文案压在黑底上看不见」。 */
.video-stage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #0d0f14;
}
.video-stage video,
.video-stage .video-fallback { width: 100%; height: 100%; object-fit: cover; background: #0d0f14; }

/* ★ 压黑层（PC 与手机共用）。
   Penpot `屏4a-生成中` 实测：`Rectangle (-0.4,1) 390×844  #000000@0.5` —— **平铺，不是渐变**。
   此前有两个错：① 写成 0.34→0.46 的渐变，顶部只有 0.34，压不住视频上部的浅色区域
   → 白色 ONEPLUS Logo 「看不见」；② 这条只写在手机端媒体查询里 → **PC 上完全没有压黑层**。
   现在提到基础规则、并用设计原值 0.5。 */
.video-stage::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none;
}

.gen-line {
  /* ★ Penpot `屏4a-生成中` 实测：`loadCopy` (136.1,395) 117×20 —— 在进度条**上方**。
     原来是 R1 旧版式的 665（视频小卡片下方），在 PC 上就表现为「文字跑到下面去了」。 */
  position: absolute; left: 0; top: 395px;
  width: 390px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; line-height: 1.6;
  color: #ffffff;                     /* 设计 loadCopy #ffffff@1 */
  white-space: nowrap; z-index: 2;    /* 压在压黑层之上 */
}
/* P4 进度条：Penpot 实测底轨 200×4 / #999999 / 圆角 1；
   已完成段 121.18×4 / 线性渐变 #5b98ff → #ffffff（左→右）/ 圆角 4。
   ★ 两段是**独立**的：底轨不是「已完成色的暗版」。 */
.gen-progress {
  position: absolute; left: 95px; top: 420.25px;
  width: 200px; height: 4px;
  border-radius: 1px; background: var(--track); overflow: hidden;
}
.gen-progress__bar {
  display: block; width: 0%; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #5b98ff 0%, #ffffff 100%);
  transition: width 0.6s var(--ease-out);
}
.gen-tip {
  /* ★ Penpot 实测：`loadCopy` (132.1,437) 125×12 —— 在进度条**下方**，10px 灰字。
     原来沿用旧版式的 713 / 20 高 / 正文字号。 */
  position: absolute; left: 0; top: 437px;
  width: 390px; height: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 400; line-height: 1.6;
  color: #999999;                     /* 设计 loadCopy #999999@1 */
  white-space: nowrap; z-index: 2;
  transition: opacity 0.28s var(--ease-out);
}
.gen-tip[data-swap] { opacity: 0; }

/* ############################################################################
 * P5 · 结果海报   （Penpot 屏5a-结果海报 · BLUE / RED）
 * ########################################################################## */
.result-stage {
  position: absolute; inset: 0;
  /* ★ 刻意不写 overflow:hidden —— 海报投影要能溢出去，不能被容器切掉 */
}
/* 画布 = 设计 (6.5,120) 377×458；页面上的它就是保存出去的那张，没有第二套排版 */
/* ★ 海报画布 = 设计里的 `分享图模版a`（**没有相纸了**）：
   位置 (21.71,180.91)、尺寸 346×383（照片 346 + 异形底图多出的 37）。
   ⚠️ 这里原来是旧相纸的 (6.5,120) 377×458 —— 而画布内容已经变成 1080×1195，
   旧 CSS 把位图压进 377×458 的盒子 ⇒ **纵向被拉伸 9.8%**（用户报的「海报拉伸变形」）。
   圆角与阴影也一并去掉：新版没有相纸底。 */
.result-card {
  position: absolute; left: 21.71px; top: 180.91px;
  width: 346px; height: 383px;
  border-radius: 0;
  box-shadow: none;
  transition: opacity 0.3s var(--ease-out);
}
.result-card[data-pending] { opacity: 0; }

/* 主 CTA：设计 x=96（设计稿本身就偏右 2px，居中应为 94 —— 这里照设计取 96） */
/* ═══════════════════════════════════════════════════════════════════════════
 * P5 结果页：**纯白背景**
 *
 * Penpot 实测：画板内有独立背景图层 `Rectangle` (0,1) 390×844  fill=#ffffff@1；
 * 导出的画板在顶部/底部/右下角采样均为 [255,255,255]。
 *
 * 这一层要把**全局蓝色背景图 + 全局风动效**都盖住：
 *   .app 的蓝白渐变背景图   →  被这层白盖住
 *   .wind（z-index:0）      →  .screen 是 z-index:1，白底在其上 → 也盖住
 *
 * ★ 只作用在 P5，**没有删改全局风动效**：P1/P2/P3 的风照旧；
 *   P4 仍是全屏视频（视频在 .screen 内部，不受影响）。
 * ═══════════════════════════════════════════════════════════════════════════ */
.screen--result { background: #ffffff; }

.result-cta { position: absolute; left: 113.5px; top: 645px; width: var(--btn-w); height: var(--btn-h); }

/* 双按钮：设计 (24,707.13) 346×50，各 168×50，间隔 10。
   底部留白 = 844.5 − 757.13 = 87.37 ≈ 1.75 个按钮高（§9 要求 ≈ 1 个按钮高 + 安全区） */
/* P5 两个次级按钮：设计稿 x=27 / x=200，各 163×42，间距 10 */
.result-actions {
  position: absolute; left: 27px; top: 705px;
  width: 336px; height: var(--btn-h);
  display: flex; gap: var(--btn-gap);
}
.btn-soft {
  /* 与主按钮同一套规范：同高、同圆角、同字号字重；同样文字居中不换行 */
  flex: 0 0 var(--btn-w); height: var(--btn-h);
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  background: linear-gradient(180deg, #f5f7fb 0%, #c3cce9 100%);
  /* ★ 去掉投影（用户要求）。Penpot `屏5a` 实测：浅色按钮上
     `inner-shadow 0,0 b10 #ffffff@0.5` 是**可见**的（保留），
     而 `drop-shadow 0,22 b46 #000000@0.2` 是 **hidden=true**（设计里根本没启用）——
     我之前把这条被隐藏的深色投影也实现了，正是要去掉的那个。
     现在只留设计里真正可见的白色内阴影。 */
  box-shadow: var(--sh-inner);
  font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
  line-height: var(--btn-lh);
  letter-spacing: var(--btn-ls); text-align: center;
  transition: transform 0.16s var(--ease-out);
}
.btn-soft:active { transform: scale(0.975); }
.btn-soft__text {
  background: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand-ink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ══ 本地排障弹窗：Gender / Pose Debug（C04 本地专用）══════════════════════
   刻意做得朴素：它不是产品 UI，是给排障看的仪表盘。
   只在后端回了 debug 字段时才出现（见 assets/js/pose-debug.js），
   生产环境 POSE_DEBUG 无效 → 后端不回 debug → 这个弹窗永远不会弹出。 */
.pose-debug {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 16, 28, 0.42);
  padding: 24px;
}
.pose-debug__card {
  width: min(340px, 100%);
  background: #fff; color: #131722;
  border-radius: 14px; padding: 18px 18px 14px;
  box-shadow: 0 18px 48px rgba(10, 14, 30, 0.32);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pose-debug__title {
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid #e6e9f2;
}
.pose-debug__row { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; line-height: 1.5; }
.pose-debug__k { flex: 0 0 132px; color: #5b6480; }
.pose-debug__v { flex: 1 1 auto; font-weight: 600; word-break: break-all; }
.pose-debug__note {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e6e9f2;
  font-size: 11px; color: #7d86a1; line-height: 1.5;
}
.pose-debug__ok {
  display: block; width: 100%; margin-top: 14px;
  padding: 10px 0; border: 0; border-radius: 10px;
  background: #131722; color: #fff;
  font-size: 14px; font-weight: 600; font-family: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * 短屏重分配（C02 short viewport）· 手机端（< 700px）
 *
 * 桌面沿用上面的设计稿绝对坐标，一个字不动。
 * 手机端把纵向布局换成**弹性列**：DOM 顺序 = 视觉顺序，五个屏都成立。
 *   · 顶部区：从可用区顶部往下排，间隙 = 设计间隙 × --gap-scale
 *   · 主视觉：高度 = 设计高度 × --visual-k（保持自身比例）
 *   · 底部区：margin-top:auto 顶到下方，底部留白有下限
 * 文字与按钮的 font-size / height **完全不参与缩放**。
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {

  /* ── 通用：顶部导航层 ──────────────────────────────────────────────────
     它属于 top navigation layer：贴可用区顶部、固定 34px 高，
     不随主视觉缩放，也不因为整体比例变化而下漂。 */
  .topbar {
    position: relative;
    align-self: flex-start;
    margin-left: 22px;
    margin-top: clamp(14px, calc(28px * var(--gap-scale)), 28px);
    height: 34px;
    display: flex;
    align-items: center;
    z-index: auto;
  }

  /* ══ P1 · 封面 ══════════════════════════════════════════════════════ */
  /* 主 CTA 底边统一钉在 --foot-lift（距容器底）——
     所以下面这段 padding 是「foot-lift 减去 CTA 以下那几样东西」反推出来的。 */
  .screen--cover .stage__inner {
    padding-bottom: calc(var(--foot-lift) - 131px * var(--foot-scale) - 16px);
  }
  .cover-brand    { position: relative; align-self: center;
                    margin-top: clamp(14px, calc(28px * var(--gap-scale)), 28px);
                    width: 101px; height: 24px; }
  /* 设计里 wordmark 在 x=21、ace7 在 x=89.373 —— **都不是水平居中**，
     居中会整体右移 12.5px。这里按设计左对齐。 */
  .cover-wordmark { position: relative; align-self: flex-start;
                    margin-left: 21px;
                    margin-top: calc(91px * var(--gap-scale));
                    width: auto; height: calc(232px * var(--visual-k)); }
  /* 双行标题（整张 PNG）：位置/高度与原两行栈完全等价 ——
     原：margin-top 146×gap + 28.959 + 6 + 36 = 146×gap + 70.959；
     现：margin-top (146×gap − 1) + 71 = 146×gap + 70 → 高度一致，视觉不移位。 */
  .cover-title    { position: relative; align-self: flex-start;
                    margin-left: 60px;
                    /* +1.3px：原两行栈实际落在 520.66（比设计 522 高 1.34px），
                       换图时顺手对齐到设计值 —— 位移 1.3px 肉眼无感，
                       但版面实测从此与 Penpot 一致。 */
                    margin-top: calc(146px * var(--gap-scale) + 1.3px);
                    width: 270px; height: 71px; max-width: calc(100% - 24px);
                    object-fit: contain; }
  .cover-cta      { position: relative; align-self: center;
                    margin-top: auto;                      /* 底部区顶到下方 */
                    width: var(--btn-w); height: var(--btn-h); }
  .cover-note     { position: relative; align-self: flex-start;
                    margin-left: 22px;
                    margin-top: calc(131px * var(--foot-scale));   /* ← 共用尺度（设计 818−687）*/
                    width: 168px; height: 16px; }

  /* ══ P2 · 选择机型 ══════════════════════════════════════════════════ */
  /* 手机组是主视觉：整组等比缩放。入场动画挂在 .phone 上，不在容器上，
     所以在容器上做 scale 不会和入场打架。 */
  .screen--phone .stage__inner { padding-bottom: var(--foot-lift); }
  .phone-stage {
    position: relative;
    align-self: center;
    margin-top: calc(63px * var(--gap-scale));
    width: calc(390px * var(--visual-k));
    height: calc(432px * var(--visual-k));
    transform: scale(var(--visual-k));
    transform-origin: center top;   /* 内容按 0..432 排，盒子高 432*v，top 对齐才刚好填满 */
    flex: 0 0 auto;
  }
  /* 组内坐标 = 设计坐标 − (0, 125)：125 是手机组在画板里的顶部 */
  .phone--red   { top: 60px;  left: 38.5px; }
  .phone--blue  { top: 2px;   left: 201.5px; }
  .splash--cuihuo { top: 5px;   left: 50px;  width: 130px; height: 86px; }   /* Penpot (50,130) */
  .splash--pofeng { top: 335px; left: 188px; width: 150px; height: 99px; }  /* Penpot (188,460) */
  .phone-cta { position: relative; align-self: center;
               margin-top: auto; width: var(--btn-w-wide); height: var(--btn-h); }

  /* ══ P3 · 上传 + 昵称 ═══════════════════════════════════════════════ */
  .screen--profile .stage__inner {
    padding-bottom: calc(var(--foot-lift) - 16.87px * var(--foot-scale) - 17px);
  }
  /* 白色相纸：宽度/左边距严格用设计绝对值（309 / 39.4），
     顶部跟随上传标题（长屏时恰好落回设计的 120），高度也用设计的 640。
     这样 390×844 下与 Penpot 完全一致，短屏也不会与标题错位。 */
  .polaroid { left: 39.4px; right: auto; width: 309px;
              --pol-top: calc(62px + 97.861px * var(--gap-scale) - 39.86px);
              top: var(--pol-top);
              /* 设计值 640；短屏时收到「不越界」为止（长屏仍精确等于 640） */
              height: min(640px, calc(100% - var(--pol-top) - 8px)); }
  .up-title { position: relative; align-self: stretch; width: auto;
              margin-top: calc(97.861px * var(--gap-scale)); height: 33px; }
  .up-sub   { position: relative; align-self: stretch; width: auto; margin-top: 0; height: 33px; }
  /* 上传框是 P3 的主视觉：短屏允许适度缩小，但保底 70% */
  .dropzone { position: relative; align-self: center;
              margin-top: calc(31.105px * var(--gap-scale));
              left: auto; top: auto;
              width: calc(192px * var(--visual-k)); height: calc(192px * var(--visual-k)); }
  /* 上传框内部：整层绕**上传框左上角**等比缩小。
     ★ 必须缩「容器」而不是逐个缩子元素 —— 子元素的 transform-origin 是各自的左上角，
       逐个缩会让坐标原地不动（只有自身变小），短屏下就掉出盒子、压到昵称框上。
     `.dropzone__border` / `.dz-preview` 是 inset:0，本来就跟盒子走，不参与缩放。 */
  .dropzone__scale {
    position: absolute; left: 0; top: 0;
    width: 192px; height: 192px;
    transform: scale(var(--visual-k));
    transform-origin: top left;
    pointer-events: none;              /* 命中仍由 .dropzone 负责 */
  }
  .dropzone__scale > * { pointer-events: none; }
  .dz-actions { position: relative; align-self: center;
                margin-top: 2.9px; width: auto; height: auto; }
  /* ★ 昵称框与上传区之间的间距**不参与压缩**：固定取设计值 26.895px。
     原来跟着 --gap-scale 缩，短屏只剩 ~12px，视觉上「压着」上传框。
     固定之后：长屏与设计稿完全一致（零偏移），短屏反而比原来宽松一倍。 */
  /* 昵称框：Penpot 新版 255×44 @(67.4,479) */
  .field { position: relative; align-self: center;
           margin-top: calc(29.89px * var(--gap-scale));
           width: min(255px, calc(100% - 44px)); height: 44px; }
  /* 设计里它距昵称框左沿 59.1px（126.5 − 67.4）→ 用 flex-start + margin-left 精确落位 */
  .field__tag { position: relative; align-self: flex-start; margin-left: 126.5px;
                margin-top: calc(10px * var(--gap-scale));
                width: 131px; height: 15px; }
  .profile-cta { position: relative; align-self: center;
                 margin-top: auto; width: var(--btn-w); height: var(--btn-h); }
  .quota { position: relative; align-self: flex-start; margin-left: 105.02px;
           margin-top: calc(16.87px * var(--foot-scale));   /* 设计 704 − 687.13 */
           width: 174px; height: 17px; }

  /* ══ P4 · 生成中 ═══════════════════════════════════════════════════ */
  /* ★ P4 全屏：视频铺满整个舞台（设计稿素材 476×845，大于 390 画板 ⇒ 居中裁切），
     保持原始比例，用 object-fit: cover 填充，绝不变形。
     文字与品牌标改为覆盖在视频之上。 */
  .screen--generating .stage__inner { padding-bottom: 0; }
  /* ★ P4 视频背景：必须是**整个可视区域**，不受设计画板、max-width、
     安全区 padding、border-radius 限制。
     原来只在 .screen 的**内容盒**里铺满 —— 而 .screen 有
     `padding-bottom: var(--safe-bottom)`（iPhone 底部 ≈34px），
     于是最底那一条露出 .app 的蓝白背景 + 风线（用户报的「底部露出蓝色风线」）。

     两道保险：
       1) 这里撤掉 .screen 在 P4 上的安全区 padding；
       2) 视频层改成 position:fixed; inset:0，直接对可视视口铺满。 */
  html[data-bg="video"] .screen--generating { padding-top: 0; padding-bottom: 0; }
  html[data-bg="video"] .stage,
  html[data-bg="video"] .stage__inner { background: none; }
  /* 手机端视频容器：铺满舞台（未激活 P4 背景时也要有正确盒子，
     否则会退回桌面设计值 307×546)。 */
  .video-stage {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-bg="video"] .video-stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    background: #0d0f14;
    z-index: 0;                 /* 前景（Logo/标题/进度条）在自己的层里，压在它上面 */
  }
  html[data-bg="video"] .video-stage > video,
  html[data-bg="video"] .video-stage > .video-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;          /* 等比铺满、居中裁切，不拉伸、无黑边白边 */
    object-position: center center;
  }
  .video-stage > video,
  .video-stage > .video-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;          /* ★ 铺满 + 保持比例 + 居中裁切，不拉伸 */
    object-position: center center;
  }

  /* 文字层压在压黑之上 */
  .gen-brand, .gen-line, .gen-progress, .gen-tip { z-index: 2; }
  .gen-line, .gen-progress, .gen-tip { position: relative; }
  /* 品牌标是视频之上的**覆盖层**，不占弹性流 —— 否则文字块会被它挤出画板中心 */
  .gen-brand { position: absolute; left: 50%; transform: translateX(-50%);
               top: clamp(14px, calc(28px * var(--gap-scale)), 28px);
               width: 101px; height: 24px; }
  /* 文字按设计稿：y=395 / 进度条 200×4 @420 / 提示 @437（相对 845 画板）*/
  .gen-line {
    align-self: center; width: 117px; height: 20px;
    margin-top: auto; margin-bottom: 5px;
    font-size: 16px; font-weight: 400; line-height: 1.6; color: #ffffff;
  }
  .gen-progress { align-self: center; width: 200px; height: 4px; margin: 0; }
  .gen-tip {
    align-self: center; width: 125px; height: 12px;
    margin-top: 13px; margin-bottom: auto;   /* 上下都 auto ⇒ 文字块整体垂直居中（设计 395–449，中心 422）*/
    font-size: 10px; font-weight: 400; line-height: 1.6; color: #999999;
  }
  /* 旧的 P4 局部覆盖已删除：R2 起 P4 用设计稿的整板居中布局（见上方 gen-line/gen-progress/gen-tip）*/

  /* ══ P5 · 结果 ═════════════════════════════════════════════════════ */
  /* 底部呼吸区**下限 = 一个按钮高（50px）**，不写死 80/100/120 那种魔法数 */
  .screen--result .stage__inner { padding-bottom: max(50px, calc(98px * var(--gap-scale))); }
  /* 海报：短屏**放大**到能填满剩余空间的程度（相对旧的等比缩放）。
     容器留出真实空间装投影，所以这里不要 overflow:hidden。 */
  /* ★ 设计尺寸原本挂在 `.result-card`（画布）上，不是外层容器 ——
     所以这里量的是容器，画布必须跟着回到 0,0/100%。 */
  /* ★ 尺寸跟随新版海报：346×383（旧的是 377×458 相纸）。
     这里若与 `.result-card` 的设计尺寸不一致，画布就会被容器拉变形 —— 本轮就是这么坏的。 */
  .result-stage { position: relative; align-self: center;
                  margin-top: calc(58px * var(--gap-scale));
                  width: min(calc(346px * var(--visual-k)), calc(100% - 13px));
                  height: calc(383px * var(--visual-k)); }
  .result-card { left: 0; top: 0; width: 100%; height: 100%; }
  .result-cta { position: relative; align-self: center;
                margin-top: auto; left: auto; width: var(--btn-w); height: var(--btn-h); }
  .result-actions { position: relative; align-self: center;
                    margin-top: calc(18px * var(--gap-scale));
                    left: auto; width: min(336px, calc(100% - 44px)); height: var(--btn-h); }

  /* ★ 最后统一清掉桌面版留下的绝对偏移：
     这些元素现在是 position: relative 参与弹性流，left/top 会真的把它们推走。
     （`.phone-stage > *` 那些手机是**故意**保留设计坐标的，不在清理范围内。） */
  /* `.gen-brand`（P4 覆盖层）与 `.polaroid`（P3 白色相纸）都需要自己的定位，
     不能被这条统一清理掉 —— 否则相纸会塌成 0×0。 */
  .stage__inner > *:not(.gen-brand):not(.polaroid) { left: auto; top: auto; right: auto; bottom: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * P5 保存引导预览层
 *
 * 用途：环境没有可靠的「写入相册」通路时（iOS / 微信内置浏览器里 `<a download>`
 * 不会把图存进相册），给用户**完整合成图** + 长按保存。
 *
 * ★ 关键：图片必须在遮罩**之上**并且自己接收触摸 —— 否则长按会被遮罩吞掉，
 *   用户长按出来的是「存储网页图片」而不是这张合成图。
 *   所以遮罩层 `pointer-events: none`，只有图片和顶部操作条可点。
 * ═══════════════════════════════════════════════════════════════════════════ */
.img-preview {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) 16px calc(14px + var(--safe-bottom));
  background: rgba(10, 16, 32, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;            /* ★ 遮罩不吃触摸，长按落到图片上 */
}
.img-preview[hidden] { display: none !important; }

.img-preview__bar {
  pointer-events: auto;            /* 顶部条自己要可点（关闭按钮） */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.img-preview__hint { white-space: nowrap; }
.img-preview__close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer;
}
.img-preview__close:active { background: rgba(255, 255, 255, 0.4); }

.img-preview__stage {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
/* ★ 图片自己 pointer-events:auto、可被长按；高度按可用空间自适应，绝不放大 */
.img-preview__img {
  pointer-events: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
  -webkit-touch-callout: default;   /* 允许 iOS 长按菜单（存储图像） */
  -webkit-user-select: none;
  user-select: none;
}


/* 预览层：海报 / 头像 切换（两张都在时才出现） */
.img-preview__tabs {
  pointer-events: auto;
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.img-preview__tabs[hidden] { display: none !important; }
.img-preview__tab {
  border: 0;
  padding: 6px 18px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer;
}
.img-preview__tab[data-on] { background: rgba(255, 255, 255, 0.86); color: #17213a; }



/* 预览面板底部的兜底提示（长按没反应时的出路）。低调、不抢主提示。 */
.img-preview__fallback {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * P3 上传前的 1:1 裁剪界面
 *
 * 固定正方形裁剪框；图片在框内由用户拖动 / 缩放。
 * `.cropper__stage` 是**裁剪视口**（正方形、溢出裁掉），
 * 里面的 `.cropper__img` 由 crop.js 用 left/top/width/height 摆布 ——
 * 缩放比的下限保证图片**始终铺满**方框，所以永远不会露出底色。
 * ═══════════════════════════════════════════════════════════════════════════ */
.cropper {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  align-items: center;
  padding: calc(16px + var(--safe-top)) 18px calc(18px + var(--safe-bottom));
  background: rgba(11, 15, 26, 0.94);
  color: #fff;
  user-select: none; -webkit-user-select: none;
}
.cropper[hidden] { display: none; }
.cropper__head {
  flex: 0 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.cropper__title { font-size: 17px; font-weight: 500; letter-spacing: 0.02em; }
.cropper__close {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.cropper__hint {
  flex: 0 0 auto; margin: 8px 0 0; width: 100%;
  font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.66);
}
.cropper__box {
  flex: 1 1 auto; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0;
}
/* 正方形视口：边长取容器短边，超出部分裁掉 */
.cropper__stage {
  position: relative;
  width: min(100%, 78vw);
  aspect-ratio: 1 / 1;
  max-height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #0d0f14;
  touch-action: none;            /* 手势全部由 crop.js 接管，禁止浏览器滚动/缩放 */
  cursor: grab;
}
.cropper__stage[data-dragging] { cursor: grabbing; }
.cropper__img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;               /* 尺寸完全由 JS 指定，别被全局 img 规则压住 */
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 三分线：不拦手势 */
.cropper__grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255,255,255,.22) calc(33.333% - 0.5px), rgba(255,255,255,.22) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(255,255,255,.22) calc(66.666% - 0.5px), rgba(255,255,255,.22) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255,255,255,.22) calc(33.333% - 0.5px), rgba(255,255,255,.22) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(255,255,255,.22) calc(66.666% - 0.5px), rgba(255,255,255,.22) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}
.cropper__zoom {
  flex: 0 0 auto; width: min(100%, 260px); margin: 4px 0 0;
  accent-color: #4f8bff;
}
.cropper__actions {
  flex: 0 0 auto; width: 100%; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: var(--btn-gap);
}
/* ★ 两个裁剪按钮：**等宽等高**。
   `.btn-soft` 自带 `flex:0 0 var(--btn-w)`（163px），而 `.cta` 是 `flex:0 0 auto` 且没有宽度
   → 「确认使用」会按文字长度缩成 76px（实测）。这里统一成「同等伸缩、上限 --btn-w」：
   宽屏两个都是 163px；窄屏按容器等比缩小，**两者始终相等**，也不会溢出。 */
.cropper__actions .cropper__btn {
  position: static;
  flex: 1 1 0;             /* 同增同减 ⇒ 永远等宽 */
  min-width: 0;
  width: var(--btn-w);
  max-width: var(--btn-w); /* 宽屏不超过设计宽 163 */
}


/* ═══════════════════════════════════════════════════════════════════════════
 * P4 前景（PC）：与手机端同款配色与字号
 *
 * 手机端这些值写在 `@media (max-width: 699px)` 里，PC 上回落到基础规则 ——
 * 而基础规则用的是深色 `--ink`，压在压黑层上几乎看不见
 * （用户报的「PC 宽屏下底部文案几乎不可见」）。
 * 这里**只在 PC 补一份**，不动手机端一个字，零回归风险。
 *
 * 位置仍由基础规则的设计坐标（gen-line top:665 / gen-progress top:420 /
 * gen-tip top:713，随 --stage-k 缩放）给出，与 Penpot P4 一致。
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  /* z-index 与手机端一致：保证前景（Logo/文案/进度条）确实压在视频与压黑层之上，
     不依赖 DOM 顺序 —— 手机端本来就写的是 2，这里补齐以免两端层级行为不一致。 */
  /* 前景层级：基础规则已给 .gen-line/.gen-tip 设了 z-index:2，
     这里只补 Logo/进度条 —— 保证它们都压在视频与压黑层之上。 */
  .gen-brand, .gen-progress { z-index: 2; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * P3 裁剪弹窗（PC）：作用域收进**手机容器**，不要拿整个 PC viewport 当基准
 *
 * `.cropper` 基础是 `position:absolute; inset:0`（相对 .app）。手机上 .app 就是整屏 ✓
 * 但 PC 上 .app 是整个浏览器窗口，弹窗会铺满 1920 宽 —— 与「H5 内容居中」的原则相悖。
 * 这里复用 layout.js 已经算好并写到 CSS 变量里的舞台矩形（与 `.wind` 同一套算式）。
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  .cropper {
    inset: auto;
    left: var(--stage-left, 0);
    top: var(--stage-top, 0);
    width: var(--stage-w-px, 100%);
    height: var(--stage-h-px, 100%);
    padding: 16px 18px;
  }
  /* 舞台不高，给弹窗内部留出更紧凑的间距 */
  .cropper__box { padding: 10px 0; }
  .cropper__actions { margin-top: 10px; }
}