/* ==========================================================================
   POP · 宠物虚拟试衣 — Dimension 设计系统的移动端转化
   转化依据见 PRD §6.1（Token 对照表）与 §6.2（趣味感注入的五条）

   一条铁律：颜色一个不加。系统的 2% 色度是刻意的。
   宠物照片是界面上唯一的颜色源 —— 克制本身在放大宠物。
   ========================================================================== */

:root{
  /* ── 颜色：完全沿用 Dimension，不增不改 ── */
  --void:#0a0a0a;
  --graphite:#161616;
  --graphite-2:#1c1c1c;
  --frost:rgba(212,212,212,.055);
  --frost-2:rgba(212,212,212,.10);
  --snow:#ffffff;
  --bone:#ededed;
  --ash:#c2c2c2;
  --smoke:#9a9a9a;
  --slate:#6e6e6e;
  /* 发丝描边：手机高亮屏上满值 #e5e5e5 过刺眼，破坏「发丝」的本意 — PRD §6.1 */
  --hair:rgba(229,229,229,.13);
  --hair-2:rgba(229,229,229,.22);
  --hair-3:rgba(229,229,229,.38);
  --violet:#6b62f2;

  /* ── 字体 ──
     Design.md 指定 DM Sans + Geist。CDN 外链不可靠（现场断网就回落），
     实现时自托管 woff2 到 /static/fonts 并在这里替换。
     当前用系统栈近似：iOS/macOS 上是 SF Pro，几何感与 DM Sans 同源。 */
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",
       "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;

  /* ── 字号：web → mobile，见 PRD §6.1 ── */
  --t-display:34px;   --lh-display:1.06;  --tr-display:-.035em;
  --t-h:24px;         --lh-h:1.18;        --tr-h:-.028em;
  --t-hs:19px;        --lh-hs:1.3;        --tr-hs:-.018em;
  --t-body:16px;      --lh-body:1.55;
  --t-cap:12px;       --lh-cap:1.45;      --tr-cap:.03em;
  --t-micro:10.5px;

  /* ── 间距 / 圆角 ── */
  --pad:20px;                /* 左右安全边距 */
  --gap-section:44px;
  --card-pad:20px;
  --r-panel:28px;            /* web 42px → 28px：42 在 375 宽上占 11%，会圆到失去边界感 */
  --r-card:20px;
  --r-ui:10px;
  --r-icon:4px;
  --r-pill:9999px;           /* 不动。胶囊是这套系统的定义性轮廓 */

  --tap:44px;                /* iOS HIG 最小热区 */

  /* ── 动效：带阻尼的弹簧，手感上像真的在换一件衣服 — PRD §6.2 第五条 ── */
  --spring:cubic-bezier(.22,1.12,.32,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--ui);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* .drop / .placeholder / .badge 都自带 display，会盖掉 UA 的 [hidden]{display:none}
   （同为 0,1,0 特异性，作者样式后来居上）。没有这条，hidden 属性在它们身上不生效。 */
[hidden]{display:none !important;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input{font:inherit;color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--hair-3);outline-offset:3px;border-radius:var(--r-ui);}

/* ==========================================================================
   屏幕容器
   ========================================================================== */
#app{
  max-width:520px;margin:0 auto;min-height:100%;
  position:relative;
}
.screen{
  display:none;
  padding:0 var(--pad) calc(var(--tap) + 56px);
  min-height:100vh;
  min-height:100dvh;
  flex-direction:column;
}
.screen.is-active{display:flex;animation:screen-in .34s var(--spring) both;}
@keyframes screen-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* ── 顶部 ── */
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 0 6px;min-height:52px;
}
.back{
  width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--hair);border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ash);
  transition:border-color .2s,color .2s;
}
.back:active{border-color:var(--hair-3);color:var(--bone);}
.topbar .crumb{
  font-size:var(--t-cap);letter-spacing:var(--tr-cap);
  color:var(--slate);text-transform:uppercase;
}
.topbar .spacer{flex:1;}

/* ── 排版 ── */
.eyebrow{
  font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 0 10px;
}
h1.display{
  font-size:var(--t-display);line-height:var(--lh-display);
  letter-spacing:var(--tr-display);font-weight:500;
  margin:0 0 10px;color:var(--snow);text-wrap:balance;
}
h2.h{
  font-size:var(--t-h);line-height:var(--lh-h);letter-spacing:var(--tr-h);
  font-weight:500;margin:0 0 8px;color:var(--snow);
}
.lede{color:var(--ash);margin:0 0 22px;font-size:15px;line-height:1.6;}
.muted{color:var(--smoke);font-size:13.5px;line-height:1.55;}
.micro{
  font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.05em;color:var(--slate);
}

/* ── 卡片 / 面板 ── */
.card{
  background:var(--frost);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:var(--card-pad);
}
.panel{
  background:var(--frost);border:1px solid var(--hair);
  border-radius:var(--r-panel);padding:22px;
}

/* ── 按钮 ── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:12px 22px;border-radius:var(--r-pill);
  font-size:15px;font-weight:500;letter-spacing:.01em;
  transition:transform .18s var(--spring),opacity .2s,border-color .2s;
  width:100%;
}
.btn:active{transform:scale(.975);}
.btn-primary{background:var(--snow);color:#111;}   /* 系统里唯一的实心按钮 */
.btn-ghost{border:1px solid var(--hair-2);color:var(--ash);}
.btn-ghost:active{border-color:var(--hair-3);color:var(--bone);}
.btn[disabled]{opacity:.34;pointer-events:none;}
.btn-row{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:22px;}

/* 底部浮动操作条：拇指热区，距底边 16–24px，不贴边 — PRD §6.1 */
.dock{
  position:sticky;bottom:0;
  margin:auto calc(var(--pad) * -1) 0;
  padding:14px var(--pad) calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--void) 62%,rgba(10,10,10,0));
}

/* ==========================================================================
   P0 · 暗色功能首页
   与后续流程共享同一套色彩和几何语言；用空间、层级和轻光效增加高级感。
   ========================================================================== */
.home-screen{padding-bottom:46px;overflow:hidden;}
.home-masthead{
  min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--hair);
}
.home-brand{display:flex;align-items:center;min-width:0;}
.home-brand img{
  display:block;width:clamp(128px,40vw,156px);height:auto;
  filter:invert(1);opacity:.96;
}
.home-edition{font-size:9px;line-height:1;letter-spacing:.18em;color:var(--slate);}
.home-edition span{
  margin-left:7px;padding:4px 7px;border:1px solid var(--hair);border-radius:999px;
  font-size:8px;letter-spacing:.12em;color:var(--smoke);
}

.home-hero{position:relative;padding:34px 0 28px;isolation:isolate;}
.home-glow{
  position:absolute;z-index:-1;width:360px;height:360px;right:-215px;top:-46px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(107,98,242,.21) 0,rgba(107,98,242,.08) 35%,transparent 70%);
  filter:blur(2px);
}
.home-kicker{
  display:flex;align-items:center;gap:9px;margin:0 0 15px;
  font-size:11px;letter-spacing:.16em;font-weight:550;color:var(--smoke);
}
.home-kicker span{
  width:5px;height:5px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 14px rgba(107,98,242,.9);
}
.home-hero h1{
  margin:0;color:var(--snow);font-size:clamp(34px,9.4vw,46px);
  font-weight:500;line-height:1.12;letter-spacing:-.048em;
}
.home-hero h1 em{font-style:normal;color:#aaa5ff;}
.home-cta{
  width:100%;min-height:58px;margin-top:18px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-radius:999px;background:var(--snow);color:#111;
  box-shadow:0 14px 36px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .2s var(--spring),box-shadow .2s var(--ease);
}
.home-cta:active{transform:scale(.985);box-shadow:0 8px 24px rgba(0,0,0,.24);}
.home-cta-main{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:650;letter-spacing:.01em;}
.home-cta-main svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linejoin:round;}
.home-cta-arrow{font-size:22px;font-weight:300;line-height:1;}
.home-cta-note{margin:9px 0 0;text-align:center;color:var(--slate);font-size:10px;letter-spacing:.03em;}

.home-garments{padding:22px 0 0;border-top:1px solid var(--hair);}
.home-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:13px;}
.home-section-head p{margin:0 0 7px;color:var(--slate);font-size:9px;font-weight:600;letter-spacing:.2em;}
.home-section-head h2{margin:0;color:var(--snow);font-size:18px;line-height:1.25;font-weight:500;letter-spacing:-.02em;}
.home-section-head>span{padding-bottom:2px;color:var(--slate);font-size:10.5px;letter-spacing:.1em;}

/* 人台素材是横图：横向卡片保留完整轮廓，并露出下一张提示可滑动。 */
.home-screen .sku-grid{
  display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-right:calc(var(--pad) * -1);padding:2px var(--pad) 8px 0;
  scrollbar-width:none;
}
.home-screen .sku-grid::-webkit-scrollbar{display:none;}
.home-screen .sku{
  position:relative;flex:0 0 47%;scroll-snap-align:start;
  overflow:hidden;border:1px solid var(--hair);border-radius:16px;
  background:var(--graphite);text-align:left;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:border-color .24s var(--ease),transform .24s var(--spring),box-shadow .24s var(--ease);
}
.home-screen .sku img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:#d9d5cf;}
.home-screen .sku .nm{
  display:-webkit-box;min-height:46px;padding:9px 10px 10px;border-top:1px solid var(--hair);
  color:var(--smoke);font-size:11.5px;line-height:1.35;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.home-screen .sku.is-on{
  border-color:rgba(170,165,255,.72);transform:translateY(-2px);
  box-shadow:0 15px 34px rgba(0,0,0,.26),0 0 28px rgba(107,98,242,.09);
}
.home-screen .sku.is-on::after{
  content:"已选";position:absolute;top:8px;right:8px;
  padding:4px 8px;border-radius:999px;background:rgba(10,10,10,.78);color:var(--snow);
  border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(9px);
  font-size:9.5px;font-weight:600;letter-spacing:.08em;
}
.home-screen .sku.is-on .nm{color:var(--snow);}
.home-screen .sku-meta{margin:7px 2px 0;color:var(--slate);font-size:10.5px;line-height:1.4;}

.home-promise{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:24px;padding:15px 0 4px;border-top:1px solid var(--hair);
  color:var(--smoke);font-size:10.5px;white-space:nowrap;
}
.home-promise span{display:flex;align-items:center;gap:6px;}
.home-promise b{font-family:var(--mono);font-size:8.5px;font-weight:500;color:var(--violet);}
.home-promise i{width:3px;height:3px;border-radius:50%;background:var(--hair-3);}

/* ==========================================================================
   P1 · 上传
   ========================================================================== */
.drop{
  flex:1;min-height:210px;
  border:1px dashed var(--hair-2);border-radius:var(--r-panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--smoke);text-align:center;padding:26px 22px;
  transition:border-color .22s,background .22s;
}
.drop:active{border-color:var(--hair-3);background:var(--frost);}
.drop .plus{
  width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid var(--hair-2);display:grid;place-items:center;
  color:var(--bone);font-size:22px;font-weight:300;line-height:1;
}
.drop strong{display:block;color:var(--bone);font-weight:500;font-size:15px;margin-bottom:4px;}
.drop span{font-size:12.5px;line-height:1.5;}

.demo-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin:0 calc(var(--pad)*-1);padding-inline:var(--pad);}
.demo-row::-webkit-scrollbar{display:none;}
.demo-pet{
  flex:0 0 auto;width:84px;text-align:center;
}
.demo-pet img{
  width:84px;height:84px;object-fit:cover;border-radius:16px;
  border:1px solid var(--hair);transition:border-color .2s;
}
.demo-pet.is-on img{border-color:var(--hair-3);}
.demo-pet .nm{font-size:11.5px;color:var(--smoke);margin-top:6px;}
.demo-pet.is-on .nm{color:var(--bone);}

.photo-preview{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  border:1px solid var(--hair);background:var(--graphite);
}
.photo-preview img{width:100%;object-fit:cover;max-height:46vh;}
.photo-preview .swap{
  position:absolute;right:12px;bottom:12px;
  background:rgba(10,10,10,.72);backdrop-filter:blur(10px);
  border:1px solid var(--hair-2);border-radius:var(--r-pill);
  padding:8px 14px;font-size:12.5px;color:var(--bone);
}

/* ==========================================================================
   P2 · 宠物信息
   体型剪影是主输入（六选一）—— 比让主人报品种更快、更准，对串串友好
   ========================================================================== */
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 6px;}
.arch{
  border:1px solid var(--hair);border-radius:var(--r-card);
  padding:10px 6px 9px;text-align:center;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.arch svg{width:100%;height:44px;display:block;margin-bottom:6px;}
.arch .nm{font-size:12px;color:var(--smoke);line-height:1.25;letter-spacing:.01em;}
.arch.is-on{border-color:var(--hair-3);background:var(--frost-2);}
.arch.is-on .nm{color:var(--snow);}
.arch.is-on svg{--stroke:var(--snow);}
.arch-hint{
  font-size:12.5px;color:var(--slate);margin:2px 0 0;min-height:18px;
  transition:color .2s;
}

.field{margin-top:16px;}
.field-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;}
.field-head label{font-size:13px;color:var(--ash);}
.field-val{
  font-size:26px;font-weight:500;letter-spacing:-.03em;color:var(--snow);
  font-variant-numeric:tabular-nums;
}
.field-val em{font-style:normal;font-size:12px;color:var(--slate);margin-left:3px;letter-spacing:0;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:var(--tap);
  background:transparent;display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.13);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;background:var(--snow);
  margin-top:-8.5px;border:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
input[type=range]::-moz-range-track{height:3px;border-radius:9999px;background:rgba(255,255,255,.13);}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--snow);}

/* 折叠区：犬种和精确三围默认不占版面 */
.disclose{
  margin-top:16px;border:1px solid var(--hair);border-radius:var(--r-card);
  overflow:hidden;
}
.disclose > summary{
  list-style:none;min-height:var(--tap);display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;font-size:13.5px;color:var(--ash);
  cursor:pointer;
}
.disclose > summary::-webkit-details-marker{display:none;}
.disclose > summary .chev{color:var(--slate);transition:transform .24s var(--spring);}
.disclose[open] > summary .chev{transform:rotate(180deg);}
.disclose-body{padding:4px 16px 16px;border-top:1px solid var(--hair);}
.pick{
  display:flex;gap:7px;overflow-x:auto;padding:12px 0 4px;
  margin:0 -16px;padding-inline:16px;
}
.pick::-webkit-scrollbar{display:none;}
.pick button{
  flex:0 0 auto;border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:8px 14px;font-size:12.5px;color:var(--smoke);white-space:nowrap;
  transition:border-color .2s,color .2s,background .2s;
}
.pick button.is-on{border-color:var(--hair-3);color:#111;background:var(--snow);}
.measure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px;}
.measure{border:1px solid var(--hair);border-radius:var(--r-ui);padding:9px 10px;}
.measure label{display:block;font-size:11px;color:var(--slate);margin-bottom:2px;}
.measure input{
  width:100%;background:none;border:none;padding:0;
  font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--snow);
  font-variant-numeric:tabular-nums;
}
.measure input::placeholder{color:var(--slate);font-weight:400;}

/* 实时推荐预览：改体重时立刻更新，纯计算不花钱 */
.live-rec{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding:14px 18px;
  border:1px solid var(--hair);border-radius:var(--r-card);background:var(--frost);
}
.live-rec .lbl{font-size:12.5px;color:var(--slate);}
.live-rec .val{
  font-size:28px;font-weight:500;letter-spacing:-.04em;color:var(--snow);line-height:1;
  transition:transform .3s var(--spring);
}
.live-rec .val.bump{transform:scale(1.14);}
.live-rec .basis{font-size:11px;color:var(--slate);text-align:right;max-width:52%;
                 line-height:1.4;white-space:pre-line;}

/* ==========================================================================
   P3 · 生成中
   推荐码在这一屏就已经出来了 —— 等待的是图，不是结论。
   实测单次生成是分钟级，这条设计不是优化项而是必需项。 — PRD §4.5 / §9.4
   ========================================================================== */
.loading-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:20px 0;}
.orb{
  width:112px;height:112px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,
              rgba(107,98,242,.55),rgba(107,98,242,.06) 60%,transparent 72%);
  animation:breathe 2.4s var(--ease) infinite;   /* 慢到显得从容 */
}
@keyframes breathe{
  0%,100%{transform:scale(.92);opacity:.55;}
  50%{transform:scale(1.06);opacity:1;}
}
.loading-copy{text-align:center;}
.loading-copy .t{font-size:17px;color:var(--bone);margin-bottom:6px;letter-spacing:-.01em;}
.loading-copy .s{font-size:13px;color:var(--slate);}
.progress-line{
  height:1px;background:var(--hair);margin:0 auto;width:120px;position:relative;overflow:hidden;
}
.progress-line::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--hair-3),transparent);
  animation:sweep 1.9s var(--ease) infinite;
}
@keyframes sweep{from{transform:translateX(-120%);}to{transform:translateX(320%);}}

/* ==========================================================================
   P4 · 结果 — 核心屏
   ========================================================================== */
.stage{
  position:relative;border-radius:var(--r-panel);overflow:hidden;
  border:1px solid var(--hair);background:var(--graphite);
  aspect-ratio:var(--stage-ratio,3/2);
}
/* 固定画框内的交叉淡入，不要滑动切换。
   成图之间存在构图漂移，画框固定就把漂移裁掉了 — PRD §9.2b */
.stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .24s var(--ease);
}
.stage img.is-on{opacity:1;}
.stage .placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--slate);font-size:12.5px;text-align:center;padding:20px;
}
/* 紫色径向光晕：全站唯一一次，就在试穿结果出现的那一瞬 — PRD §6.2 第二条 */
.stage .reveal{
  position:absolute;left:50%;bottom:-40%;width:150%;aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(107,98,242,.5),transparent 62%);
}
.stage.revealing .reveal{animation:reveal 1.5s var(--ease) forwards;}
@keyframes reveal{
  0%{opacity:0;transform:translateX(-50%) translateY(16%) scale(.7);}
  38%{opacity:1;}
  100%{opacity:0;transform:translateX(-50%) translateY(-8%) scale(1.25);}
}
.stage .badge{
  position:absolute;left:14px;bottom:14px;
  background:rgba(10,10,10,.7);backdrop-filter:blur(12px);
  border:1px solid var(--hair-2);border-radius:14px;padding:9px 13px;
  display:flex;align-items:center;gap:9px;
}
.stage .badge b{font-size:19px;font-weight:500;letter-spacing:-.03em;color:var(--snow);line-height:1;}
.stage .badge span{font-size:11px;color:var(--ash);letter-spacing:.02em;}

.size-row{display:flex;gap:7px;margin:14px 0 0;}
.size-pill{
  flex:1;min-height:var(--tap);border:1px solid var(--hair);border-radius:var(--r-pill);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:var(--smoke);transition:all .24s var(--spring);
}
.size-pill .s{font-size:15px;font-weight:500;letter-spacing:-.01em;}
.size-pill .m{font-size:9px;letter-spacing:.06em;color:var(--slate);text-transform:uppercase;}
/* 还没出图的码：虚线边框 = 这里可以点，点了才花钱 */
.size-pill.is-idle{border-style:dashed;color:var(--slate);}
.size-pill.is-loading{border-style:dashed;color:var(--slate);animation:breathe-pill 1.6s var(--ease) infinite;}
@keyframes breathe-pill{0%,100%{opacity:.45;}50%{opacity:1;}}
.size-pill.is-error{border-style:dotted;color:var(--slate);}
.size-pill.is-rec .m{color:var(--ash);}
.size-pill.is-on{background:var(--snow);border-color:var(--snow);color:#111;}
.size-pill.is-on .m{color:rgba(0,0,0,.5);}

/* 三维合身指示：游标滑动而不是跳变 */
.fitbars{margin-top:16px;display:flex;flex-direction:column;gap:11px;}
.fitbar{display:flex;align-items:center;gap:11px;font-size:12.5px;}
.fitbar .ax{width:26px;flex:0 0 auto;color:var(--ash);}
.fitbar .track{
  flex:1;height:3px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);position:relative;
}
/* 合身区间的浅底 */
.fitbar .track .zone{
  position:absolute;top:0;bottom:0;left:25%;right:25%;
  background:rgba(255,255,255,.14);border-radius:var(--r-pill);
}
.fitbar .track .cursor{
  position:absolute;top:-3.5px;width:2px;height:10px;border-radius:2px;
  background:var(--snow);
  transition:left .42s var(--spring);
}
.fitbar .st{width:74px;flex:0 0 auto;text-align:right;color:var(--bone);}
.fitbar .st.warn{color:var(--ash);}

.explain{
  margin-top:18px;padding:15px 17px;border:1px solid var(--hair);
  border-radius:var(--r-card);background:var(--frost);
}
.explain .h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:7px;}
.explain p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ash);}
.explain .src{margin-top:9px;font-size:11px;color:var(--slate);line-height:1.5;}

/* ==========================================================================
   P5 · 轻档案
   ========================================================================== */
.profile-row{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--hair);
}
.profile-row:last-child{border-bottom:none;}
.profile-row img{width:52px;height:52px;border-radius:14px;object-fit:cover;border:1px solid var(--hair);}
.profile-row .info{flex:1;min-width:0;}
.profile-row .nm{font-size:15px;color:var(--bone);letter-spacing:-.01em;}
.profile-row .sub{font-size:12px;color:var(--slate);margin-top:2px;}
.profile-row .sz{font-size:18px;font-weight:500;letter-spacing:-.03em;color:var(--snow);}
.empty{text-align:center;color:var(--slate);font-size:13.5px;padding:44px 20px;}

/* 保存档案命名：名字只在真正需要存档时询问，不阻挡首次试穿。 */
.profile-sheet{
  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
}
.profile-sheet-scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.68);opacity:0;
  backdrop-filter:blur(3px);transition:opacity .26s var(--ease);
}
.profile-sheet-panel{
  position:relative;width:min(520px,100%);padding:12px 20px calc(22px + env(safe-area-inset-bottom));
  border:1px solid var(--hair-2);border-bottom:none;border-radius:28px 28px 0 0;
  background:#141414;box-shadow:0 -22px 60px rgba(0,0,0,.42);
  transform:translateY(102%);transition:transform .3s var(--spring);
}
.profile-sheet.is-on .profile-sheet-scrim{opacity:1;}
.profile-sheet.is-on .profile-sheet-panel{transform:translateY(0);}
.profile-sheet-handle{width:38px;height:4px;margin:0 auto 24px;border-radius:999px;background:var(--hair-3);}
.profile-sheet-kicker{margin:0 0 7px;color:var(--slate);font-size:10px;letter-spacing:.14em;}
.profile-sheet h2{margin:0;color:var(--snow);font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.03em;}
.profile-sheet-copy{margin:8px 0 22px;color:var(--smoke);font-size:13.5px;line-height:1.55;}
.profile-sheet label{display:block;margin:0 0 8px;color:var(--ash);font-size:12.5px;}
.profile-sheet input{
  width:100%;min-height:52px;padding:0 17px;border:1px solid var(--hair-2);border-radius:14px;
  outline:none;background:rgba(255,255,255,.035);color:var(--snow);font-size:16px;
  transition:border-color .2s,box-shadow .2s;
}
.profile-sheet input::placeholder{color:var(--slate);}
.profile-sheet input:focus{border-color:var(--hair-3);box-shadow:0 0 0 3px rgba(255,255,255,.035);}
.profile-sheet input.is-error{animation:field-shake .28s var(--ease);border-color:rgba(255,255,255,.55);}
@keyframes field-shake{25%{transform:translateX(-5px);}50%{transform:translateX(5px);}75%{transform:translateX(-3px);}}
.profile-sheet-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;margin-top:18px;}
.profile-sheet-actions .btn{padding-inline:14px;}

/* ── 宠物符号：1.5px 单色描边，与系统的几何图标语言一致 —— 不出现插画/卡通/emoji ── */
.glyph{stroke:var(--stroke,var(--ash));stroke-width:1.4;fill:none;
       stroke-linecap:round;stroke-linejoin:round;}

.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);
  background:var(--graphite-2);border:1px solid var(--hair-2);
  border-radius:var(--r-pill);padding:10px 20px;font-size:13px;color:var(--bone);
  opacity:0;pointer-events:none;transition:all .28s var(--spring);z-index:60;
  max-width:calc(100% - 40px);text-align:center;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;}
}