/* ═══════════════════════════════════════════════════════════════
   思拍 · 移动端交互界面（小红书式）
   2026-10-15 新建。独立于桌面版 index.html，互不影响。
   · 浅色主题 · 最大宽 480px 居中（桌面下呈手机形态）
   · 品牌青绿 #10afa9 作强调色，点赞用红（平台惯例）
   · 纯 CSS：column-count 做真瀑布流；无框架无构建
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 品牌 */
  --brand:#10afa9;
  --brand-2:#4fd0c8;
  --brand-ink:#0a8b86;
  --brand-soft:#e6f6f5;
  /* 语义 */
  --like:#ff2e4d;
  --ok:#0f9d63;
  --warn:#c08307;
  --bad:#e5484d;
  /* 中性 */
  --bg:#f5f6f8;
  --card:#ffffff;
  --card-2:#fafbfc;
  --txt:#17181c;
  --sub:#5f6672;
  --dim:#9aa1ab;
  --line:#ecedf0;
  --line-2:#f4f5f7;
  /* 尺寸 */
  --r:12px;
  --r-lg:16px;
  --hd-h:50px;
  --tab-h:54px;
  --w:480px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 🔴 必须：`[hidden]` 只是 UA 样式的 display:none，作者样式里的 `display:flex` 会把它**覆盖**，
   导致 el.hidden=true 却仍然显示（.reader/.seg 都踩过）。
   2026-10-15 实测：详情层从加载起就盖满全屏，页面所有截图都是它。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
body{
  background:#e6e8ec;color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
input,textarea{font:inherit}
::-webkit-scrollbar{width:0;height:0}

/* ── App 外壳：桌面下居中呈手机 ───────────────────────────── */
.app{
  position:relative;width:100%;max-width:var(--w);margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--bg);display:flex;flex-direction:column;
}
@media(min-width:520px){
  body{background:#dfe2e7}
  .app{box-shadow:0 0 0 1px rgba(0,0,0,.05),0 12px 48px -12px rgba(20,30,45,.22)}
}

/* ── 顶部栏 ────────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:30;
  padding-top:var(--safe-t);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.hd-top{height:var(--hd-h);display:flex;align-items:center;gap:9px;padding:0 12px}
.brand{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.brand img{width:26px;height:26px;object-fit:contain}
.brand b{font-size:16.5px;letter-spacing:.5px;font-weight:800}
.search{
  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;
  background:#f2f3f5;border-radius:17px;color:var(--dim);font-size:13.5px;
  transition:background .15s;
}
.search:active{background:#e9ebee}
.search svg{flex:0 0 auto;opacity:.75}
.search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-ic{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;color:#3b4048;border-radius:50%}
.hd-ic:active{background:#f2f3f5}

/* 分段标签（2026-10-15：加入「活动：XX」后可能 4+ 个 ⇒ 可横滑，滚动条隐藏） */
.seg{display:flex;gap:20px;padding:0 14px 9px;position:relative;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.seg::-webkit-scrollbar{display:none}
.seg .s{
  position:relative;font-size:15px;color:var(--sub);padding-bottom:5px;
  transition:color .15s;white-space:nowrap;flex:0 0 auto;
}
.seg .s.on{color:var(--txt);font-weight:700;font-size:15.5px}
.seg .s.on::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:20px;height:3px;border-radius:2px;background:var(--brand);
}
.seg .s .cnt{font-size:11px;color:var(--dim);margin-left:3px;font-weight:400}
/* 活动分段：加一枚小星标，和普通分段区分开 */
.seg .s.act::before{content:'✦';font-size:10px;margin-right:3px;color:var(--brand)}

/* ── 主内容区 ─────────────────────────────────────────────── */
.main{
  flex:1;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 6px);
}
.main.pad{padding:12px}

/* ── 底部导航 ─────────────────────────────────────────────── */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:40;
  width:100%;max-width:var(--w);height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--dim)}
.tb .ic{display:grid;place-items:center;height:24px}
.tb .lb{font-size:10.5px;line-height:1}
.tb.on{color:var(--txt);font-weight:600}
.tb.on .lb{font-weight:700}
.tb.plus .ic{
  width:46px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 4px 12px -3px rgba(16,175,169,.55);
}
.tb.plus.on .ic{filter:brightness(1.05)}

/* ── 筛选行（2026-10-15 搬桌面版逻辑：先选 → 再点「确认筛选」） ──────
   桌面版的规则原样搬过来：
     · 模特库性别段 = **硬分区**（不是普通筛选），任何关键词筛选都只在当前性别里
     · 服饰 / 场景 / 姿态 / 脸部 四个下拉 = 草稿态，改完要点「确认筛选」才生效
     · 全空时按钮变成「清空筛选」= 回全库
   🔴 布局（2026-10-15 实测修正）：390px 下整行内容有 658px（溢出 268px），
      原来的「整行横滑」会把**确认按钮甩到屏幕外**（实测 x=570..646）——
      用户改完下拉根本找不到确认键，功能等于废的。
      改成：`.fl-scroll` 里只放筛选控件（可横滑），**确认按钮钉在右侧常驻可见**。 */
.filter-row{
  display:flex;align-items:center;gap:8px;
  padding:2px 12px 9px;
}
.fl-scroll{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.fl-scroll::-webkit-scrollbar{display:none}
.gr-hint{font-size:11.5px;color:var(--dim);flex:0 0 auto;padding-right:1px}
.gender-seg{
  display:flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:2px;border-radius:9px;background:#f1f3f4;
}
.gender-seg button{
  border:0;background:transparent;border-radius:7px;
  padding:4px 11px;font-size:12.5px;color:var(--sub);font-weight:600;
}
.gender-seg button.on{background:#fff;color:var(--brand-ink);box-shadow:0 1px 4px -1px rgba(0,0,0,.16)}
.facet{position:relative;flex:0 0 auto;display:block}
.facet select{
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:6px 24px 6px 10px;font-size:12.5px;color:var(--txt);
  font-family:inherit;font-weight:600;max-width:118px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
}
.facet select:focus{outline:none;border-color:var(--brand)}
/* 有草稿未提交 ⇒ 高亮 */
.facet select.dirty{border-color:var(--brand);background-color:var(--brand-soft);color:var(--brand-ink)}
.facet-reset{
  flex:0 0 auto;border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--sub);white-space:nowrap;
}
.facet-reset.dirty{
  border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;box-shadow:0 4px 12px -5px rgba(16,175,169,.7);
}
.facet-reset:disabled{opacity:.5}

/* ── 活动页（2026-10-15 用户点单：底栏「活动」展示迪士尼等限定活动） ── */
.act-switch{display:flex;gap:8px;padding:10px 12px 2px;overflow-x:auto;scrollbar-width:none}
.act-switch::-webkit-scrollbar{display:none}
.act-switch button{
  flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--sub);white-space:nowrap;
}
.act-switch button.on{
  border-color:transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;box-shadow:0 4px 12px -5px rgba(16,175,169,.7);
}
.act-hero{
  position:relative;margin:10px 12px 6px;border-radius:16px;overflow:hidden;
  min-height:172px;display:flex;align-items:flex-end;
  /* 无封面（池未拉回 / 活动没有图）时的底色：品牌绿渐变。
     有封面时前端内联 background-image 会覆盖这里的渐变，只剩底图（2026-10-15）。 */
  background:linear-gradient(135deg,#10afa9,#4fd0c8);
  background-color:#10afa9;                 /* 万一封面图 404，也别露出白底 */
  background-size:cover;
  /* 偏上取景：cover 裁切时优先保住人脸（人影棚照的脸普遍在上半区） */
  background-position:center 34%;
  box-shadow:0 10px 26px -14px rgba(16,175,169,.85);
}
.act-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,28,.05) 0%,rgba(6,26,28,.30) 45%,rgba(6,26,28,.78) 100%);
}
/* 有真底图时把暗化压重一点 —— 照片是彩色人物照，白字要压得住 */
.act-hero.has-cover::after{
  background:linear-gradient(180deg,rgba(6,26,28,.10) 0%,rgba(6,26,28,.42) 42%,rgba(6,26,28,.86) 100%);
}
.act-hero .ah{
  position:relative;z-index:1;padding:14px 16px 15px;color:#fff;width:100%;
}
.act-hero .badge{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.4px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.42);
  padding:2.5px 9px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.act-hero h2{margin:8px 0 4px;font-size:23px;line-height:1.15;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.act-hero p{margin:0;font-size:12.5px;opacity:.94;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.act-hero .meta{margin-top:8px;font-size:11.5px;opacity:.9}
.act-sec-hd{display:flex;align-items:center;gap:8px;padding:10px 14px 2px}
.act-sec-hd h3{margin:0;font-size:14.5px;font-weight:800}
.act-sec-hd .n{font-size:11.5px;color:var(--dim);margin-left:auto}

/* ── 瀑布流 ───────────────────────────────────────────────── */
.wf{column-count:2;column-gap:8px;padding:8px 8px 4px}
@media(min-width:430px){.wf{column-gap:9px;padding:9px 9px 4px}}
.card{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 8px;background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,30,45,.05);transition:transform .12s;
}
.card:active{transform:scale(.985)}
.card .ph{position:relative;background:#eef0f3;overflow:hidden}
.card .ph img{width:100%;height:auto;display:block;background:#eef0f3}
.card .ph .bdg{
  position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:8px;
  font-size:10.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* 活动图角标「限定」：品牌渐变，和普通脸型角标区分开 */
.card .ph .bdg.act{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 2px 8px -3px rgba(16,175,169,.9);
}
/* 卡片右下角的收藏按钮（2026-10-15：原来心形只是个展示用 span，首页没法直接收藏）。
   玻璃底 + 小尺寸，落在图片上不挡人；命中区 34×29（手指够点）。 */
.card .ph .fav{
  position:absolute;right:6px;bottom:6px;display:flex;align-items:center;gap:3px;
  height:29px;min-width:34px;padding:0 8px;border-radius:15px;border:0;
  background:rgba(18,22,28,.46);color:#fff;font-size:11px;font-weight:700;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .12s,background .15s,color .15s;
}
.card .ph .fav b{font-weight:600}
.card .ph .fav svg{width:13px;height:13px;display:block}
.card .ph .fav:active{transform:scale(.9)}
.card .ph .fav.on{background:rgba(255,255,255,.94);color:var(--like)}
.card .bd{padding:7px 9px 9px}
.card .tt{
  font-size:13px;line-height:1.36;color:var(--txt);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .au{display:flex;align-items:center;gap:5px;margin-top:7px}
.card .au .av{
  width:17px;height:17px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:8.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.card .au .nm{font-size:11.5px;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .au .lk{display:flex;align-items:center;gap:2px;font-size:11px;color:var(--dim);flex:0 0 auto}
.card .au .lk svg{width:12px;height:12px}
.card .au .lk.on{color:var(--like)}

/* 骨架屏 */
.sk{break-inside:avoid;margin:0 0 8px;border-radius:var(--r);background:#eef0f3;animation:skp 1.3s ease-in-out infinite}
@keyframes skp{0%,100%{opacity:1}50%{opacity:.55}}

/* ── 空态 ─────────────────────────────────────────────────── */
.empty{padding:64px 28px;text-align:center;color:var(--dim)}
.empty .em{font-size:38px;opacity:.4;margin-bottom:12px}
.empty .t{font-size:14px;color:var(--sub);margin-bottom:6px}
.empty .s{font-size:12.5px;line-height:1.6}
.empty .btn{margin-top:16px}

/* ── 按钮 ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px;border-radius:11px;font-size:14.5px;font-weight:600;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 6px 18px -8px rgba(16,175,169,.75);transition:.16s;
}
.btn:active{transform:translateY(1px);filter:brightness(.96)}
.btn.block{width:100%;padding:13px}
.btn.ghost{background:#fff;color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.ghost:active{background:#f3f5f7}
.btn.sm{padding:7px 15px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.5;box-shadow:none;pointer-events:none}
.btn.plain{background:none;box-shadow:none;color:var(--brand);font-weight:600;padding:8px 0}

/* ── 分段控件（筛选 pill） ───────────────────────────────── */
.pills{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{
  flex:0 0 auto;padding:7px 14px;border-radius:16px;font-size:13px;color:var(--sub);
  background:#fff;border:1px solid var(--line);transition:.15s;white-space:nowrap;
}
.pill.on{background:var(--txt);color:#fff;border-color:var(--txt);font-weight:600}
.pill .n{opacity:.55;margin-left:4px;font-size:11.5px}

/* ── 发现页：分类横滑 ─────────────────────────────────────── */
.sec{margin-bottom:22px}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;padding:0 12px 9px}
.sec-hd h3{margin:0;font-size:16px;font-weight:800;letter-spacing:.3px}
.sec-hd .more{font-size:12.5px;color:var(--dim)}
.rail{display:flex;gap:9px;overflow-x:auto;padding:0 12px 4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .rc{
  flex:0 0 auto;width:104px;border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(20,30,45,.05);
}
.rail .rc img{width:104px;height:138px;object-fit:cover;background:#eef0f3}
.rail .rc .cap{padding:6px 8px;font-size:11.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 分类砖（发现页顶部） */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:0 12px}
.tile{
  position:relative;height:82px;border-radius:var(--r);overflow:hidden;
  display:flex;align-items:center;padding:0 16px;
  font-size:15px;font-weight:700;color:#fff;
  box-shadow:0 3px 12px -6px rgba(20,30,45,.5);
}
.tile .sub{position:absolute;left:16px;bottom:12px;font-size:11px;font-weight:400;opacity:.85}
.tile em{font-style:normal;font-size:11.5px;font-weight:600;opacity:.9}

/* ── 生成页 ───────────────────────────────────────────────── */
.page{padding:14px 14px 8px}
.page-hd{padding:6px 2px 14px}
.page-hd h2{margin:0 0 5px;font-size:20px;font-weight:800;letter-spacing:.2px}
.page-hd p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.55}

.step{
  background:#fff;border-radius:var(--r-lg);padding:15px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(20,30,45,.05);
}
.step-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.step-no{
  width:21px;height:21px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;background:var(--brand-soft);color:var(--brand-ink);
}
.step.done .step-no{background:var(--brand);color:#fff}
.step-hd h4{margin:0;font-size:14.5px;font-weight:700}
.step-hd .tip{margin-left:auto;font-size:11.5px;color:var(--dim)}

/* 上传槽
   🔴 2026-10-16：原来靠 aspect-ratio:3/4 定比例。改为 padding-bottom 撑高 ——
   旧 Safari / 旧 WebView 不吃 aspect-ratio，槽位会退化成"没有高度"，
   里面的 <img height:100%> 也跟着塌成按原图比例，整排槽位高矮乱七八糟。 */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{
  position:relative;height:0;padding-bottom:133.333%;border-radius:11px;overflow:hidden;
  background:#f3f5f7;border:1px dashed #d6dae0;
}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.add{color:var(--dim);border-style:dashed;cursor:pointer}
.slot.add .plus{
  position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:300;line-height:1;
}
/* 🔴 2026-10-16 修「触屏手机上点打叉删不掉照片」（网页端鼠标没问题）：
   原来这是 19×19px 的圆点 —— 远低于触屏最小点击区（44×44），拇指基本点不中，
   点偏一点就落在图片上 ⇒ 什么也不发生。
   现在：视觉放大到 22px；真实可点区域用 ::after 撑到约 46×46
   （撑到格子外的部分被 .slot 的 overflow:hidden 裁掉，格子内已是满宽，足够）。
   ::after 是伪元素，事件目标仍是这个 <span>，所以 data-act="rmPhoto" 照常命中。 */
.slot .x{
  position:absolute;right:3px;top:3px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:13px;
  font-weight:600;line-height:1;cursor:pointer;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
}
.slot .x::after{content:'';position:absolute;left:-20px;right:-20px;top:-20px;bottom:-20px}
.slot .x:active{background:rgba(0,0,0,.78)}

/* 质检报告 */
.verdict{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:11px;
  font-size:13.5px;font-weight:600;margin-bottom:11px;
}
.verdict.ok{background:#e9f8f0;color:#0b7a4c}
.verdict.warn{background:#fdf5e3;color:#8a5c00}
.verdict.bad{background:#fdecec;color:#b3252a}
.verdict .vk{font-size:17px}
.checks{display:flex;flex-direction:column;gap:1px}
.chk{display:flex;align-items:flex-start;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line-2);font-size:13px}
.chk:last-child{border-bottom:0}
.chk .ci{flex:0 0 auto;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;margin-top:1px}
.chk .ci.p{background:#e9f8f0;color:#0b7a4c}
.chk .ci.w{background:#fdf5e3;color:#8a5c00}
.chk .ci.b{background:#fdecec;color:#b3252a}
.chk .cn{font-weight:600;flex:0 0 auto;min-width:74px;color:var(--txt)}
.chk .cd{color:var(--sub);flex:1;line-height:1.5}

/* 风格选择网格
   🔴 2026-10-16：同 .slot —— 去掉 aspect-ratio，改用 padding-bottom 撑高。
   否则在不支持 aspect-ratio 的浏览器上，这 3 列会退化成"每列高矮不一、
   角标看不见"的样子（用户截图就是这个形态）。 */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:288px;overflow-y:auto}
.pick{position:relative;display:block;height:0;padding-bottom:133.333%;border-radius:10px;overflow:hidden;background:#eef0f3}
.pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 选中标记：左上角。2026-10-16 调整 —— 右上角让给 ♥ 收藏、右下角让给 ⤢ 放大，
   三件事各占一角，热区互不重叠（原来 ✓ 在右上，占了收藏的位置）。 */
.pick .sel{
  position:absolute;inset:0;border:2.5px solid var(--brand);border-radius:10px;
  display:none;align-items:flex-start;justify-content:flex-start;padding:5px;
}
.pick.on .sel{display:flex}
.pick .sel i{
  width:19px;height:19px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;font-style:normal;font-weight:700;
}
/* ♥ 收藏（右上）与 ⤢ 放大（右下）：只做自己的事，不改选中状态。
   热区用伪元素撑到 ~36px（拇指点得到）；z-index 压在底部文字条之上。 */
.pick .pfav,.pick .pzoom{
  position:absolute;right:6px;z-index:2;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-style:normal;line-height:1;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  cursor:pointer;touch-action:manipulation;
}
.pick .pfav{top:6px;font-size:13px}
.pick .pzoom{bottom:6px}
.pick .pfav::after,.pick .pzoom::after{content:'';position:absolute;inset:-6px;border-radius:50%}
.pick .pfav.on{background:#ff2e4d}
.pick .cap{
  position:absolute;left:0;right:0;bottom:0;padding:12px 36px 6px 7px;font-size:10.5px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 「一键匹配模特」的适配分（2026-10-16 起并进底部文案，这块角标样式留作兼容） */
.pick .msc{
  position:absolute;left:5px;top:5px;padding:1.5px 6px;border-radius:9px;
  background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.2px;
}
/* 生图库（购物车）的抬头 + 「清空」 */
.cart-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 9px;
  font-size:12.5px;color:var(--sub)}
.cart-clear{flex:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--dim);font-size:12.5px;cursor:pointer;touch-action:manipulation}

/* 生成底栏（sticky） */
.gen-foot{
  position:sticky;bottom:calc(var(--tab-h) + var(--safe-b));z-index:20;
  margin:4px -14px 0;padding:12px 14px;
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.cost{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;font-size:13px;color:var(--sub)}
.cost b{font-size:19px;color:var(--txt);font-weight:800}
.cost b em{font-style:normal;font-size:12px;font-weight:400;color:var(--dim);margin-left:2px}

/* 结果 */
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.results .r{position:relative;height:0;padding-bottom:133.333%;border-radius:11px;overflow:hidden;background:#eef0f3}
.results .r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.results .r .tag{
  position:absolute;left:6px;bottom:6px;padding:3px 8px;border-radius:7px;font-size:10.5px;
  color:#fff;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.prog{height:4px;border-radius:2px;background:#eef0f3;overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:2px;width:0;transition:width .4s}

/* ── 我的 ─────────────────────────────────────────────────── */
.me-top{
  padding:20px 16px 28px;color:#fff;
  background:linear-gradient(150deg,var(--brand),#0b9a94 60%,var(--brand-2));
  border-radius:0 0 20px 20px;
}
.me-row{display:flex;align-items:center;gap:12px}
.me-ava{
  width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);
  font-size:20px;font-weight:800;
}
.me-id{flex:1;min-width:0}
.me-id b{display:block;font-size:18px;font-weight:800;letter-spacing:.3px}
.me-id span{font-size:12.5px;opacity:.86}
.me-stats{display:flex;gap:26px;margin-top:18px}
.me-stats .s{text-align:left}
.me-stats .s b{display:block;font-size:20px;font-weight:800}
.me-stats .s span{font-size:11.5px;opacity:.84}
.mem-chip{
  display:inline-flex;align-items:center;gap:4px;margin-top:12px;padding:5px 12px;border-radius:14px;
  background:rgba(255,255,255,.2);font-size:12px;font-weight:600;
}
.me-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 14px;margin-top:-16px}
.me-card{
  background:#fff;border-radius:var(--r);padding:14px;box-shadow:0 2px 10px -6px rgba(20,30,45,.22);
}
.me-card .k{font-size:12px;color:var(--dim);margin-bottom:5px}
.me-card .v{font-size:21px;font-weight:800;letter-spacing:.2px}
.me-card .v em{font-style:normal;font-size:12px;font-weight:400;color:var(--dim);margin-left:2px}
.me-list{margin:14px 14px 0;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 2px rgba(20,30,45,.05)}
.me-it{display:flex;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid var(--line-2);font-size:14.5px}
.me-it:last-child{border-bottom:0}
.me-it:active{background:#fafbfc}
.me-it .mi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);font-size:14px}
.me-it .mt{flex:1}
.me-it .mv{color:var(--dim);font-size:13px}
.me-it .ma{color:#c8ccd2;font-size:16px}

/* 作品小格 */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 14px}
.mini-grid .m{position:relative;height:0;padding-bottom:133.333%;border-radius:9px;overflow:hidden;background:#eef0f3}
.mini-grid .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── 沉浸式详情 ───────────────────────────────────────────── */
.reader{position:fixed;inset:0;z-index:100;background:#0d0f12;display:flex;flex-direction:column;
  animation:rdIn .22s ease}
@keyframes rdIn{from{opacity:0}to{opacity:1}}
.rd-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(38px) brightness(.5);transform:scale(1.25);opacity:.75}
.rd-close{
  position:absolute;right:12px;top:calc(12px + var(--safe-t));z-index:6;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.rd-track{
  flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;position:relative;z-index:2;
}
.rd-track::-webkit-scrollbar{display:none}
.rd-slide{
  flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;padding:16px 12px;
  box-sizing:border-box;
}
.rd-slide img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.9);
}
.rd-slide .ph{width:100%;height:100%;display:grid;place-items:center;color:#5a616b;font-size:13px}
/* 🔴 2026-10-16 用户报：滑块指示点出现在图片正中间。
   原来 `.rd-dots` 是 absolute + top:50% + translateY(-50%) ⇒ 正好压在图片中央。
   `.reader` 是 flex 列（track → dots → info），所以这里改成**静态排列**，
   自然落在图片下方；再给 46px 下边距，抵消 `.rd-info{margin-top:-46px}`
   的上移量，避免被信息区盖住。 */
.rd-dots{position:static;flex:0 0 auto;margin:0 0 46px;z-index:5;display:flex;justify-content:center;gap:5px;pointer-events:none}
.rd-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32);transition:.2s}
.rd-dots i.on{background:#fff;width:14px;border-radius:3px}

.rd-info{
  position:relative;z-index:5;padding:14px 16px calc(16px + var(--safe-b));
  background:linear-gradient(transparent,rgba(0,0,0,.72) 26%);
  margin-top:-46px;pointer-events:none;
}
.rd-info>*{pointer-events:auto}
.rd-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.rd-tag{padding:3px 10px;border-radius:11px;font-size:11.5px;color:#fff;background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rd-au{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.rd-au .av{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
.rd-au .nm{flex:1;min-width:0;color:#fff;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-btn{
  flex:0 0 auto;padding:5px 14px;border-radius:14px;font-size:12.5px;font-weight:600;
  color:#fff;background:var(--like);transition:.15s;
}
.fl-btn.on{background:rgba(255,255,255,.18)}
.rd-bar{display:flex;align-items:center;gap:20px}
.rd-act{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.92);font-size:12.5px}
.rd-act svg{transition:transform .18s}
.rd-act:active svg{transform:scale(.86)}
.rd-act.on{color:var(--like)}
.rd-act.on svg path{fill:var(--like);stroke:var(--like)}
.rd-act i{font-style:normal}
.rd-use{
  margin-left:auto;padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 18px -8px rgba(16,175,169,.9);
}
.rd-use:active{transform:translateY(1px)}
/* ⤓ 原图（下载）：浏览走 1080 WebP，点它才拉原图。
   .solo = 「我的作品」里只有这一个按钮 ⇒ 居中显示。 */
.rd-act.rd-save{color:rgba(255,255,255,.92)}
.rd-act.rd-save.busy{opacity:.5}
.rd-act.rd-save.solo{margin:0 auto;padding:10px 22px;border-radius:12px;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 爱心飘动 */
.fly{position:fixed;z-index:120;pointer-events:none;font-size:0;color:var(--like);
  animation:flyUp .85s ease-out forwards}
@keyframes flyUp{0%{transform:scale(.4);opacity:1}30%{transform:scale(1.25)}100%{transform:scale(1) translateY(-64px);opacity:0}}

/* ── 底部面板 ─────────────────────────────────────────────── */
.sheet-wrap{position:fixed;inset:0;z-index:110}
.sheet-mask{position:absolute;inset:0;background:rgba(0,0,0,.42);animation:rdIn .18s ease}
.sheet{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--w);
  background:#fff;border-radius:18px 18px 0 0;padding-bottom:var(--safe-b);
  animation:shIn .26s cubic-bezier(.32,.72,0,1);max-height:88vh;overflow-y:auto;
}
@keyframes shIn{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-body{padding:18px 18px 22px}
.sh-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sh-hd h3{margin:0;font-size:17px;font-weight:800}
.sh-x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--dim);font-size:19px}
.sh-x:active{background:#f2f3f5}

/* ── 出图前提示（居中对话框）───────────────────────────────
   🔴 2026-10-16 用户定：点「立即生成」先把话说清楚（单张多久 / 多张叠加 /
   完成后去哪看），并允许当天不再提醒。
   🔴 这里**故意不写 display** —— 显隐靠元素上的 [hidden]，一旦写了 display:flex
   就会把 [hidden] 的 display:none 顶掉，弹窗关不掉（老坑）。 */
.dlg-wrap{position:fixed;inset:0;z-index:120}
.dlg-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:rdIn .18s ease}
.dlg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 52px);max-width:330px;background:#fff;border-radius:18px;
  padding:22px 20px 16px;animation:dlgIn .22s cubic-bezier(.32,.72,0,1);
}
@keyframes dlgIn{
  from{transform:translate(-50%,-50%) scale(.9);opacity:0}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.dlg h3{margin:0 0 10px;font-size:17px;font-weight:800;text-align:center}
.dlg p{margin:0;font-size:13.5px;line-height:1.8;color:var(--sub)}
.dlg p b{color:var(--txt);font-weight:700}
.dlg-chk{display:flex;align-items:center;gap:8px;margin:16px 0 4px;font-size:13px;color:var(--sub)}
.dlg-chk input{width:17px;height:17px;margin:0;accent-color:var(--brand)}
.dlg-btns{display:flex;gap:10px;margin-top:12px}
.dlg-btns .btn{flex:1;padding:11px 0}

/* 表单 */
.fld{margin-bottom:13px}
.fld>label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:6px;font-weight:600}
.fld input{
  width:100%;height:46px;padding:0 14px;border-radius:11px;border:1px solid var(--line);
  background:#fafbfc;font-size:15px;outline:none;transition:.15s;
}
.fld input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(16,175,169,.12)}
/* 🔴 2026-10-16 故障反馈：多行描述框（用户点名「不要一行，要好几行那种」） */
.fld textarea{
  width:100%;min-height:132px;padding:11px 14px;border-radius:11px;border:1px solid var(--line);
  background:#fafbfc;font-size:15px;line-height:1.55;outline:none;transition:.15s;resize:vertical;
}
.fld textarea:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(16,175,169,.12)}
/* 认证弹窗「手机验证码 + 获取验证码」一行（2026-10-15 图形人机码下线，
   随之下线的样式：.cap-img / .cap-img svg）。 */
.cap-row{display:flex;gap:9px;align-items:flex-end}
.cap-row .fld{flex:1;margin-bottom:13px}
.sms-btn{
  flex:0 0 auto;height:46px;padding:0 15px;border-radius:11px;font-size:13.5px;font-weight:600;
  color:var(--brand-ink);background:var(--brand-soft);white-space:nowrap;
}
.sms-btn[disabled]{color:var(--dim);background:#f2f3f5;pointer-events:none}
/* 「挑风格」的池选择条（男库/女库/♥收藏/活动…）：可横滑 ——
   池的数量会随在期活动变多，用均分的 .seg-pick 会把「✦ 迪士尼限定」挤断行 */
.pool-seg{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:3px;margin-bottom:11px}
.pool-seg::-webkit-scrollbar{display:none}
.pool-seg button{
  flex:0 0 auto;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line);
  background:#fafbfc;font-size:13.5px;color:var(--sub);white-space:nowrap;transition:.15s;
}
.pool-seg button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:700}

.seg-pick{display:flex;gap:9px}
.seg-pick button{
  flex:1;height:44px;border-radius:11px;border:1px solid var(--line);background:#fafbfc;
  font-size:14.5px;color:var(--sub);transition:.15s;
}
.seg-pick button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.form-msg{font-size:12.5px;color:var(--bad);min-height:17px;margin:4px 0 10px}
.form-msg.ok{color:var(--ok)}
.sw{text-align:center;font-size:13px;color:var(--dim);margin-top:14px}
.sw a{color:var(--brand-ink);font-weight:600;text-decoration:none;margin-left:4px}

/* 充值档位 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.plan{
  border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;transition:.15s;
}
.plan.on{border-color:var(--brand);background:var(--brand-soft)}
.plan .p{font-size:18px;font-weight:800;letter-spacing:.2px}
.plan .c{font-size:11px;color:var(--dim);margin-top:3px}
.plan .g{font-size:10.5px;color:var(--brand-ink);margin-top:2px;font-weight:600}
.mem-cards{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.mem-card{
  display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:13px;
  padding:13px 15px;transition:.15s;
}
.mem-card.on{border-color:var(--brand);background:var(--brand-soft)}
.mem-card .n{flex:1}
.mem-card .n b{display:block;font-size:15px;font-weight:700}
.mem-card .n span{font-size:11.5px;color:var(--dim)}
.mem-card .pr{font-size:19px;font-weight:800;color:var(--brand-ink)}
.mem-card .pr em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--dim)}
/* 「当前」标（我正在用的档位） */
.mem-card .n b .cur{
  font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--brand);
  border-radius:6px;padding:1px 5px;margin-left:5px;vertical-align:2px;
}

/* 二维码 */
.qr-wrap{text-align:center;padding:14px 0 6px}
.qr{
  width:172px;height:172px;margin:0 auto 10px;border-radius:13px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;
}
.qr img{width:100%;height:100%;object-fit:contain}
.qr .ph{font-size:12.5px;color:var(--dim);padding:0 18px;line-height:1.5}
.note{font-size:12px;color:var(--dim);line-height:1.6}
.note.rule{background:#fafbfc;border-radius:10px;padding:11px 13px;margin-bottom:13px}

/* ── 支付方式提示条（2026-10-15 用户：「这个要明显一点」）───────────
   原来「现仅支持支付宝」是夹在一行 12px 灰色小字里的一截加粗，
   在弹窗里基本等于隐形（用户扫一眼看不到，才会以为"什么支付都能用"）。
   改成「支付宝蓝」的浅底卡片 + 4px 左侧色条 + 「支」字徽标 + 14px 加粗标题，
   第一眼就能看到；配色是电商工具里的常规告知色，不会像报错那么刺眼。
   两处弹窗（充值积分 / 开通会员）复用同一个 .pay-tip。 */
.pay-tip{
  display:flex;gap:9px;align-items:flex-start;
  background:#eef5ff;border:1px solid #c3dbff;border-left:4px solid #1677ff;
  border-radius:12px;padding:11px 13px;margin:0 0 14px;
  font-size:13px;line-height:1.5;color:#0d47a1;
}
.pay-tip .pt-i{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:#1677ff;color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.pay-tip .pt-t{display:block;font-weight:700;font-size:14px;color:#0a3d91;letter-spacing:.2px}
.pay-tip .pt-d{display:block;font-weight:500;color:#3f6ea6;font-size:12.5px;margin-top:2px}

/* ── 轻提示 ───────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 26px);transform:translateX(-50%);
  z-index:200;padding:10px 20px;border-radius:21px;font-size:13.5px;color:#fff;
  background:rgba(20,24,30,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:tst .22s ease;max-width:80%;text-align:center;
}
@keyframes tst{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 加载态遮罩 */
.busy{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:rgba(12,15,19,.4);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.busy .bx{
  background:#fff;border-radius:15px;padding:24px 30px;text-align:center;min-width:150px;
}
.spin{
  width:30px;height:30px;margin:0 auto 11px;border-radius:50%;
  border:3px solid #e9ebee;border-top-color:var(--brand);animation:sp .75s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
.busy .bt{font-size:13.5px;color:var(--sub)}

/* 页面切换动效 */
.view{animation:vIn .2s ease}
@keyframes vIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 安全区微调 */
@supports(padding:max(0px)){
  .hd-top{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
}

/* 🔴 2026-10-16：图片自动重试 2 次仍失败 ⇒ 灰底占位，
   压掉浏览器默认的破图问号与 alt 文字（否则用户以为"图没了"）。见 m.js 的 error 捕获。 */
img.img-dead{background:#e9edf1;color:transparent;font-size:0;text-indent:-9999px}