/* ============================================================================
 * 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; }
.cover-ace7        { position: absolute; left: 89.373px; top: 521px; width: 207.254px; height: 28.959px; }
/* 「解锁「风头正劲」的你」：设计墨迹 60..330，水平中心 195 = 舞台中心，故整行居中 */
.cover-line {
  position: absolute;
  left: 0; top: 556px;
  width: 390px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sub);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--ls-cover);
  /* letter-spacing 会在末字右侧留一个字距，居中时视觉偏左 —— 用 text-indent 抵掉 */
  text-indent: var(--ls-cover);
  color: var(--ink);
  white-space: nowrap;
}
.cover-cta         { position: absolute; left: 98px;     top: 637px; width: 194px;     height: 54px; }
/* 底部说明：设计墨迹 22..190（**左对齐在 x=22**，不是屏幕居中）*/
.cover-note {
  position: absolute;
  left: 22px; top: 818px;
  width: 168px; height: 16px;
  display: flex; align-items: center;
  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: 42px;  top: 125px; width: 146.283px; height: 108.446px; }
.splash--pofeng { left: 201px; top: 458px; width: 150.487px; height: 98.84px; }
.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: 74px; top: 637.13px; width: 242px; height: 54px; }

/* ############################################################################
 * P3 · 上传信息   （Penpot 屏3a-上传信息）
 * ########################################################################## */
/* 「上传头像」墨迹 142.956..246.956，中心 194.956 ≈ 舞台中心 → 整行居中 */
.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);
  background: rgba(67, 106, 189, 0);
  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;
}
.dropzone[data-scrim] .dz-title { color: #fff; }
/* 检测中：给一点点呼吸感，但不做夸张 loading（需求 §2/§3） */
.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 */
.field {
  position: absolute; left: 22px; top: 476px;
  width: 346px; height: 50px;
  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: 237px; top: 533px;
  width: 131px; height: 13px;
  display: flex; align-items: center; justify-content: flex-end;
  font-size: var(--fs-tag); font-weight: 400; line-height: 13px;
  color: rgba(0, 0, 0, 0.6); white-space: nowrap;
}

.profile-cta { position: absolute; left: 98px; top: 637.13px; width: 194px; height: 54px; }

/* quota：设计 (105.02,714) 179.95×14，中心 195 → 整行居中 */
.quota {
  position: absolute; left: 0; top: 714px;
  width: 390px; height: 14px;
  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 下不裁不变形、无黑边。 */
.video-stage {
  position: absolute; left: 41.5px; top: 99px;
  width: 307px; height: 545.78px;
  border-radius: 2px;
  overflow: hidden;
  background: #0d0f14;
  box-shadow: 0 12px 34px rgba(10, 16, 40, 0.22);
}
.video-stage video,
.video-stage .video-fallback { width: 100%; height: 100%; object-fit: cover; background: #0d0f14; }

.gen-line {
  position: absolute; left: 0; top: 665px;
  width: 390px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); font-weight: 400; line-height: 20px;
  color: var(--ink); white-space: nowrap;
}
.gen-progress {
  position: absolute; left: 129px; top: 696px;
  width: 132px; height: 2px;
  border-radius: 1px; background: var(--track); overflow: hidden;
}
.gen-progress__bar {
  display: block; width: 0%; height: 100%; border-radius: 1px;
  /* 导出 SVG 实测是横向渐变（x1 1.02 → x2 0.067，即右浅左深） */
  background: linear-gradient(270deg, var(--brand-hi) 0%, var(--brand-ink) 100%);
  transition: width 0.6s var(--ease-out);
}
.gen-tip {
  position: absolute; left: 0; top: 713px;
  width: 390px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); font-weight: 400; line-height: 20px;
  color: var(--ink); white-space: nowrap;
  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；页面上的它就是保存出去的那张，没有第二套排版 */
.result-card {
  position: absolute; left: 6.5px; top: 120px;
  width: 377px; height: 458px;
  border-radius: var(--r-btn);
  box-shadow: var(--sh-card);
  transition: opacity 0.3s var(--ease-out);
}
.result-card[data-pending] { opacity: 0; }

/* 主 CTA：设计 x=96（设计稿本身就偏右 2px，居中应为 94 —— 这里照设计取 96） */
.result-cta { position: absolute; left: 96px; top: 637.13px; width: 202px; height: 54px; }

/* 双按钮：设计 (24,707.13) 346×50，各 168×50，间隔 10。
   底部留白 = 844.5 − 757.13 = 87.37 ≈ 1.75 个按钮高（§9 要求 ≈ 1 个按钮高 + 安全区） */
.result-actions {
  position: absolute; left: 24px; top: 707.13px;
  width: 346px; height: 50px;
  display: flex; gap: 10px;
}
.btn-soft {
  flex: 1 1 0; height: 50px;
  border-radius: var(--r-btn);
  background: linear-gradient(180deg, #f5f7fb 0%, #c3cce9 100%);
  box-shadow: var(--sh-inner), var(--sh-card);
  font-size: var(--fs-cta); font-weight: 500; line-height: 1.4;
  letter-spacing: var(--ls-btn);
  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) - 127px * 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)); }
  .cover-ace7     { position: relative; align-self: flex-start;
                    margin-left: 89.373px;
                    margin-top: calc(146px * var(--gap-scale));
                    width: auto; height: 28.959px; }
  .cover-line     { position: relative; align-self: stretch;
                    margin-top: 6px; width: auto; height: 36px; }
  .cover-cta      { position: relative; align-self: center;
                    margin-top: auto;                      /* 底部区顶到下方 */
                    width: 194px; height: 54px; }
  .cover-note     { position: relative; align-self: flex-start;
                    margin-left: 22px;
                    margin-top: calc(127px * var(--foot-scale));   /* ← 共用尺度 */
                    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: 0;    left: 42px; }
  .splash--pofeng { top: 333px; left: 201px; }
  .phone-cta { position: relative; align-self: center;
               margin-top: auto; width: 242px; height: 54px; }

  /* ══ P3 · 上传 + 昵称 ═══════════════════════════════════════════════ */
  .screen--profile .stage__inner {
    padding-bottom: calc(var(--foot-lift) - 22.87px * var(--foot-scale) - 14px);
  }
  .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)); }
  /* 上传框内部：按设计坐标摆放的子元素跟着盒子一起缩；
     `.dropzone__border` / `.dz-preview` 是 inset:0，本来就跟着盒子走，不能再缩一次。 */
  .dropzone > *:not(.dropzone__border):not(.dz-preview) {
    transform: scale(var(--visual-k));
    transform-origin: top left;
  }
  .dz-actions { position: relative; align-self: center;
                margin-top: 2.9px; width: auto; height: auto; }
  /* ★ 昵称框与上传区之间的间距**不参与压缩**：固定取设计值 26.895px。
     原来跟着 --gap-scale 缩，短屏只剩 ~12px，视觉上「压着」上传框。
     固定之后：长屏与设计稿完全一致（零偏移），短屏反而比原来宽松一倍。 */
  .field { position: relative; align-self: center;
           margin-top: 26.895px;
           width: min(346px, calc(100% - 44px)); height: 50px; }
  .field__tag { position: relative; align-self: flex-end;
                margin-right: 22px; margin-top: calc(7px * var(--gap-scale));
                height: 13px; }
  .profile-cta { position: relative; align-self: center;
                 margin-top: auto; width: 194px; height: 54px; }
  .quota { position: relative; align-self: stretch; width: auto;
           margin-top: calc(22.87px * var(--foot-scale));   /* ← 共用尺度 */
           height: 14px; }

  /* ══ P4 · 生成中 ═══════════════════════════════════════════════════ */
  .screen--generating .stage__inner { padding-bottom: max(28px, calc(111.5px * var(--gap-scale))); }
  .gen-brand { position: relative; align-self: center;
               margin-top: clamp(14px, calc(28px * var(--gap-scale)), 28px);
               width: 101px; height: 24px; }
  /* 9:16 视频：宽高按同一比例缩，比例恒定 */
  .video-stage { position: relative; align-self: center;
                 margin-top: calc(47px * var(--gap-scale));
                 width: calc(307px * var(--visual-k));
                 height: calc(545.78px * var(--visual-k)); }
  .video-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
  .gen-line { position: relative; align-self: stretch; width: auto;
              margin-top: auto; height: 20px; }
  .gen-progress { position: relative; align-self: center;
                  margin-top: calc(11px * var(--gap-scale));
                  left: auto; top: auto; width: 132px; height: 2px; }
  .gen-tip { position: relative; align-self: stretch; width: auto;
             margin-top: calc(15px * var(--gap-scale)); height: 20px; }

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

  /* ★ 最后统一清掉桌面版留下的绝对偏移：
     这些元素现在是 position: relative 参与弹性流，left/top 会真的把它们推走。
     （`.phone-stage > *` 那些手机是**故意**保留设计坐标的，不在清理范围内。） */
  .stage__inner > * { left: auto; top: auto; right: auto; bottom: auto; }
}