/* 试穿一下 — 燕麦米 · 雾灰绿 · 深墨绿 (default "sage") + 雾蓝灰 alt theme ([data-theme="blue"]).
   System fonts only, no external assets. Every colour lives in the tokens below — swap a theme by changing these only.
   v3: single-stage progressive flow (person → garment → loading → result), assistant bubble, floating CTA. */
:root{
  /* surfaces */
  --bg:#f6f3ee; --bg2:#ecefe9; --surface:#fbfaf6;
  /* text */
  --ink:#25302a; --ink-2:#3b473f; --mute:#525d56; --faint:#56615a; --ph:#6b756d;
  --deep:#35604d;            /* accent text / labels on light fills */
  /* accents */
  --acc:#5f7d6b; --acc-deep:#3f6b57; --acc-soft:#a9bfae; --sky:#9fbfcc;
  --cta-1:#4a7664; --cta-m:#437069; --cta-2:#3b6770;
  --warm:#d99a7a; --warm-deep:#c27a56; --warm-tint:#f8e7dc; --warm-tint-2:#f1e6d8;
  --danger:#a4432b;
  /* soft fills */
  --tint-a:#e4ede6; --tint-b:#efeadc; --tint-c:#dfe9ec;
  /* ambient backdrop */
  --blob-a:#a9bfae; --blob-b:#b7d0dd; --blob-c:#e4d6bb;
  --amb-1:#e3ece5; --amb-2:#e1ecf1; --amb-3:#f0e7d4;
  /* particles (hearts / sparkles) */
  --p1:#d99a7a; --p2:#a9bfae; --p3:#9fbfcc; --p4:#e8c9a8; --p5:#ffffff;
  /* rgb triplets for tinted shadows / borders */
  --sh:52,88,72; --sh-d:30,42,36; --ln:95,125,107; --lt:226,236,228; --lt-d:196,214,204;
  --cta-rgb:60,104,98; --cta2-rgb:59,103,112; --acc-rgb:95,125,107; --bg-rgb:246,243,238; --glow:169,191,174;
  --line:rgba(255,255,255,.85); --line-2:rgba(var(--ln),.32);
  --grad-cta:linear-gradient(120deg,var(--cta-1) 0%,var(--cta-m) 58%,var(--cta-2) 100%);
  --grad-soft:linear-gradient(135deg,var(--tint-a) 0%,var(--tint-b) 100%);
  --sh-card:0 1px 2px rgba(var(--sh),.08),0 10px 24px -10px rgba(var(--sh),.20),0 28px 50px -28px rgba(var(--sh),.28);
  --r-xl:32px; --r-lg:28px; --r-md:22px; --r-sm:16px;
  --ease:cubic-bezier(.22,.8,.26,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --sans:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --px:0; --py:0;
}
/* alt theme: 雾蓝灰 + 奶白 + 深靛 — activate with ?theme=blue */
[data-theme="blue"]{
  --bg:#f3f5f8; --bg2:#e9eef4; --surface:#fafbfd;
  --ink:#1f2a3a; --ink-2:#374559; --mute:#4f5b6e; --faint:#4f5b6e; --ph:#69758a;
  --deep:#2b4a73;
  --acc:#5b7a99; --acc-deep:#3f5f86; --acc-soft:#a5b8cd; --sky:#9cc3d6;
  --cta-1:#4f6f94; --cta-m:#476990; --cta-2:#3f5f86;
  --warm:#d99a7a; --warm-deep:#c27a56; --warm-tint:#f8e7dc; --warm-tint-2:#efe9e1;
  --danger:#a4432b;
  --tint-a:#e3eaf2; --tint-b:#eceae3; --tint-c:#dde7f0;
  --blob-a:#a5b8cd; --blob-b:#c3d4e6; --blob-c:#e6dcc6;
  --amb-1:#e2e9f1; --amb-2:#e4edf5; --amb-3:#f1ebde;
  --p1:#d99a7a; --p2:#a5b8cd; --p3:#9cc3d6; --p4:#e8c9a8; --p5:#ffffff;
  --sh:48,72,104; --sh-d:28,38,56; --ln:91,122,153; --lt:226,234,243; --lt-d:196,210,226;
  --cta-rgb:63,95,134; --cta2-rgb:63,95,134; --acc-rgb:91,122,153; --bg-rgb:243,245,248; --glow:165,184,205;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.6;letter-spacing:.02em;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
svg{flex:none}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc-deep);outline-offset:3px;border-radius:12px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

/* ---------- ambient blobs (parallax wrapper + drifting orb) ---------- */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(90% 55% at 15% -5%,var(--amb-1) 0%,transparent 60%),radial-gradient(80% 50% at 100% 30%,var(--amb-2) 0%,transparent 62%),radial-gradient(90% 50% at 0% 100%,var(--amb-3) 0%,transparent 60%),var(--bg)}
.ow{position:absolute;transition:transform .9s var(--ease);will-change:transform}
.ow-a{left:-110px;top:6%;transform:translate3d(calc(var(--px)*70px),calc(var(--py)*50px),0)}
.ow-b{right:-110px;top:42%;transform:translate3d(calc(var(--px)*-60px),calc(var(--py)*-70px),0)}
.ow-c{left:12%;bottom:-90px;transform:translate3d(calc(var(--px)*50px),calc(var(--py)*-40px),0)}
.orb{display:block;border-radius:50%;filter:blur(56px)}
.orb-a{width:320px;height:320px;background:var(--blob-a);opacity:.55;animation:drift-a 24s ease-in-out infinite alternate}
.orb-b{width:300px;height:300px;background:var(--blob-b);opacity:.55;animation:drift-b 28s ease-in-out infinite alternate}
.orb-c{width:260px;height:260px;background:var(--blob-c);opacity:.5;animation:drift-c 30s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate3d(70px,60px,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(-60px,-70px,0) scale(1.1)}}
@keyframes drift-c{to{transform:translate3d(60px,-50px,0) scale(1.15)}}

/* ---------- shell: one phone-sized app ---------- */
.shell{position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:var(--sat)}
.topbar{flex:none;display:flex;align-items:center;gap:6px;min-height:52px;padding:4px calc(14px + var(--sar)) 0 calc(14px + var(--sal))}
.icon-btn{flex:none;width:44px;height:44px;margin-left:-6px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:0 6px 14px -8px rgba(var(--sh),.5);animation:popin .5s var(--spring)}
.icon-btn:active{transform:scale(.92)}
.brand{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--cta-1),var(--cta-2));box-shadow:0 6px 14px -5px rgba(var(--sh),.55),inset 0 1px 0 rgba(255,255,255,.4)}
.brand-name{font-weight:700;letter-spacing:.1em;color:var(--ink);font-size:16px;white-space:nowrap}
.dots{display:flex;align-items:center}
.dotb{width:26px;height:44px;display:grid;place-items:center;position:relative}
.dotb i{display:block;width:8px;height:8px;border-radius:99px;background:rgba(var(--ln),.45);transition:width .5s var(--spring),background .3s,transform .3s}
.dotb.done i{background:var(--acc-soft)}
.dotb.on i{width:24px;background:linear-gradient(90deg,var(--cta-1),var(--cta-2))}
.dotb:disabled{cursor:default}
.dotb:not(:disabled):active i{transform:scale(.8)}

/* ---------- assistant bubble ---------- */
.assist{flex:none;display:flex;align-items:flex-end;gap:10px;min-height:60px;padding:6px calc(18px + var(--sar)) 8px calc(18px + var(--sal))}
.avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--acc),var(--cta-2));box-shadow:0 8px 16px -6px rgba(var(--sh),.5),0 0 0 3px rgba(255,255,255,.7);animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-4deg)}}
.bubble{position:relative;max-width:calc(100% - 52px);min-height:42px;display:flex;align-items:center;padding:9px 16px;border-radius:20px 20px 20px 6px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 22px -12px rgba(var(--sh),.45);font-size:16px;font-weight:600;line-height:1.45;color:var(--ink);transform-origin:0 100%}
.bubble.pop{animation:bpop .55s var(--spring)}
@keyframes bpop{from{transform:scale(.82);opacity:.4}to{transform:none;opacity:1}}
.b-dots{display:none;gap:5px;align-items:center;height:22px}
.b-dots i{width:7px;height:7px;border-radius:50%;background:var(--acc-soft);animation:dotb 1s ease-in-out infinite}
.b-dots i:nth-child(2){animation-delay:.15s}.b-dots i:nth-child(3){animation-delay:.3s}
@keyframes dotb{0%,70%,100%{transform:translateY(0);opacity:.5}35%{transform:translateY(-5px);opacity:1}}
.bubble.typing .b-dots{display:inline-flex}.bubble.typing .b-text{display:none}

.pending{flex:none;display:flex;align-items:center;gap:8px;margin:0 calc(18px + var(--sar)) 6px calc(18px + var(--sal));min-height:40px;padding:0 16px 0 12px;border-radius:99px;font-size:13.5px;font-weight:600;color:var(--deep);background:rgba(255,255,255,.85);border:1px solid var(--line-2);box-shadow:0 8px 18px -10px rgba(var(--sh),.55);animation:popin .5s var(--spring);align-self:flex-start;max-width:calc(100% - 36px)}
.pending-ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--cta-1),var(--cta-2));animation:twinkle 1.8s ease-in-out infinite}
.pending[data-s="done"]{color:#fff;background:var(--grad-cta);border-color:transparent;animation:popin .5s var(--spring),glow 1.8s ease-in-out .5s infinite}
.pending[data-s="done"] .pending-ico{background:rgba(255,255,255,.28)}
.pending[data-s="error"]{color:var(--danger)}
@keyframes glow{50%{box-shadow:0 10px 26px -6px rgba(var(--cta-rgb),.7)}}
@keyframes popin{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.8) rotate(14deg);opacity:.7}}

/* ---------- stage stack: one at a time, slide / scale / blur-through ---------- */
.stages{position:relative;flex:1;min-height:0}
.stage{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:4px calc(18px + var(--sar)) 112px calc(18px + var(--sal));
  visibility:hidden;opacity:0;transform:translate3d(9%,0,0) scale(.96);filter:blur(10px);
  transition:transform .6s var(--ease),opacity .4s var(--ease),filter .5s var(--ease),visibility 0s linear .6s;scrollbar-width:none}
.stage::-webkit-scrollbar{display:none}
.stage[data-pos="before"]{transform:translate3d(-9%,0,0) scale(.96)}
.stage[data-pos="active"]{visibility:visible;opacity:1;transform:none;filter:blur(0);transition-delay:0s}
.stage>*{flex:none}

/* ---------- shared bits ---------- */
.hint{margin:12px 2px 0;color:var(--faint);font-size:12.5px;line-height:1.7;text-align:center}
.warn{margin:10px 2px 0;font-size:12.5px;line-height:1.6;color:var(--deep);text-align:center}
.warn:empty{display:none}.warn.bad{color:var(--danger)}
.chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 20px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.8);color:var(--ink-2);font-size:14.5px;font-weight:600;box-shadow:0 6px 14px -8px rgba(var(--sh),.5);transition:transform .3s var(--spring),background .2s;user-select:none;-webkit-user-select:none}
.chip:active{transform:scale(.92)}
.chip-main{background:linear-gradient(135deg,var(--tint-a),var(--tint-b));border-color:rgba(var(--ln),.55);color:var(--deep)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:50px;padding:0 18px;border-radius:99px;font-size:14.5px;font-weight:600;border:1px solid var(--line-2);background:rgba(255,255,255,.85);color:var(--deep);text-decoration:none;box-shadow:0 8px 18px -12px rgba(var(--sh),.55);transition:transform .3s var(--spring),background .2s;white-space:nowrap}
.btn:active{transform:scale(.93)}
.btn-ghost{background:rgba(255,255,255,.45);color:var(--ink-2);box-shadow:none}
.btn-main{background:linear-gradient(135deg,var(--tint-a),var(--tint-b));border-color:rgba(var(--ln),.55);color:var(--deep)}
.btn-primary{background:var(--grad-cta);color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px rgba(var(--cta-rgb),.65)}
.save{position:relative;overflow:hidden;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;border-radius:99px;font-size:15.5px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--grad-cta);box-shadow:0 12px 24px -12px rgba(var(--cta-rgb),.65),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .3s var(--spring),opacity .3s}
.save:active{transform:scale(.94)}.save:disabled{opacity:.6}
.link{font-size:12.5px;font-weight:600;color:var(--faint);min-height:44px;padding:0 4px;text-decoration:underline;text-decoration-color:rgba(var(--sh),.35);text-underline-offset:3px}
.notice-ai{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:linear-gradient(135deg,var(--tint-a),var(--tint-b));border:1px solid rgba(var(--ln),.4);color:var(--deep);font-size:12px}
.notice-ai b{font-weight:700;letter-spacing:.06em}
.notice-priv{display:inline-flex;align-items:center;gap:5px}
.field{width:100%;min-width:0;height:50px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.88);color:var(--ink);font-size:16px;box-shadow:inset 0 2px 6px rgba(var(--ln),.12);transition:border-color .25s,box-shadow .25s}
.field::placeholder{color:var(--ph);opacity:1}
.field:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}
/* tap ripple */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(var(--glow),.35) 60%,transparent 70%);transform:scale(0);animation:ripple .7s var(--ease) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.rip{position:relative}

/* ---------- stage 1: person ---------- */
.pframe{position:relative;width:min(100%,calc(50dvh * .75));min-width:200px;aspect-ratio:3/4;margin:6px auto 0;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;
  background:var(--grad-soft);border:2px dashed rgba(var(--ln),.6);box-shadow:var(--sh-card);transition:transform .4s var(--spring),box-shadow .3s,border-color .3s;isolation:isolate}
.pframe:active{transform:scale(.98)}
.pframe.drag{border-color:var(--acc);transform:scale(1.02);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.25),var(--sh-card)}
.pframe[data-filled="true"]{border:3px solid #fff;box-shadow:var(--sh-card),0 0 0 2px rgba(var(--ln),.5)}
.pframe.pop{animation:photopop .7s var(--spring)}
@keyframes photopop{0%{transform:scale(.9) rotate(-1.5deg)}60%{transform:scale(1.03) rotate(.6deg)}100%{transform:none}}
.p-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center;color:var(--acc)}
.p-sil{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 12px 26px -14px rgba(var(--sh),.5);margin-bottom:10px;animation:bob 4.5s ease-in-out infinite}
.p-title{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:.05em}
.p-sub{font-size:12.5px;color:var(--mute);line-height:1.6}
.p-img,.p-broken{position:absolute;inset:0;display:none}
.pframe[data-filled="true"] .p-empty{display:none}
.pframe[data-filled="true"][data-broken="false"] .p-img{display:block}
.pframe[data-broken="true"] .p-broken{display:flex}
.pframe .fitbg{position:absolute;inset:-12%;width:124%;height:124%;max-width:none;object-fit:cover;filter:blur(24px) saturate(1.1) brightness(1.06);opacity:.9;z-index:-1}
.pframe .fit{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:blurin .8s var(--ease)}
@keyframes blurin{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
.p-broken{flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:20px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.7)}
.p-broken .s{font-size:12.5px;color:var(--mute);font-weight:500}
.praise{position:absolute;left:50%;top:14px;transform:translate(-50%,-14px) scale(.8);opacity:0;pointer-events:none;white-space:nowrap;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--deep);font-size:14px;font-weight:700;box-shadow:0 10px 22px -10px rgba(var(--sh),.6);transition:transform .5s var(--spring),opacity .35s}
.praise.on{opacity:1;transform:translate(-50%,0) scale(1)}
.p-edit{position:absolute;right:12px;bottom:12px;display:none;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--deep);font-size:12.5px;font-weight:700;box-shadow:0 8px 16px -8px rgba(var(--sh-d),.5)}
.pframe[data-filled="true"] .p-edit{display:inline-flex}
.pbtns{display:flex;gap:10px;justify-content:center;margin-top:16px}

/* ---------- stage 2: garment ---------- */
.me{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:4px 14px 4px 4px;margin:2px 0 10px;border-radius:99px;background:rgba(255,255,255,.8);border:1px solid var(--line);box-shadow:0 6px 14px -8px rgba(var(--sh),.5);font-size:13px;font-weight:600;color:var(--ink-2);overflow:hidden;transition:transform .3s var(--spring)}
.me:active{transform:scale(.95)}
.me-img{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--grad-soft);box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(var(--ln),.55)}
.me-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.me-e{padding:2px 9px;border-radius:99px;background:var(--grad-soft);color:var(--deep);font-size:12px}
.drop{position:relative;border-radius:var(--r-lg);border:2px dashed rgba(var(--ln),.55);background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5));box-shadow:var(--sh-card);transition:transform .4s var(--spring),border-color .3s,box-shadow .3s;overflow:hidden}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.drop{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}
.drop.drag{border-color:var(--acc);transform:scale(1.02);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.25),var(--sh-card)}
.drop.nudge{animation:nudge .5s var(--ease)}
@keyframes nudge{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.drop-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 18px 20px;text-align:center}
.drop-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;margin-bottom:6px;color:var(--acc);background:var(--grad-soft);box-shadow:0 10px 22px -12px rgba(var(--sh),.5);animation:bob 4.5s ease-in-out infinite}
.drop-title{font-size:19px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.drop-sub{font-size:12.5px;color:var(--mute);line-height:1.65;max-width:20em}
.drop-btns{display:flex;gap:10px;margin-top:12px}
.drop-has{display:none;padding:12px}
.drop[data-state="has"],.drop[data-state="fail"]{border-style:solid;border-color:#fff;box-shadow:var(--sh-card),0 0 0 2px rgba(var(--ln),.5)}
.drop[data-state="has"] .drop-empty,.drop[data-state="fail"] .drop-empty{display:none}
.drop[data-state="has"] .drop-has,.drop[data-state="fail"] .drop-has{display:block;animation:cardin .6s var(--spring)}
@keyframes cardin{from{opacity:0;transform:scale(.88) translateY(10px)}to{opacity:1;transform:none}}
.gprev{position:relative;height:min(30dvh,260px);min-height:150px;border-radius:var(--r-md);overflow:hidden;background:#fff;display:grid;place-items:center}
.gprev img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s}
.gprev img.ok{opacity:1}
.gprev:not(.ok)::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(var(--glow),.45) 50%,transparent 70%);animation:shimmer 1.6s ease-in-out infinite}
.gprev-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--acc);font-size:13px;font-weight:600;background:var(--grad-soft)}
.drop[data-state="fail"] .gprev-ph{display:flex}
.drop[data-state="fail"] .gprev::after,.drop[data-state="fail"] .gprev img{display:none}
.gchip-wrap{margin-top:12px;display:flex;justify-content:center}
.gchip{display:flex;align-items:center;gap:10px;max-width:100%;padding:5px 6px 5px 5px;border-radius:99px;background:#fff;border:1px solid var(--line-2);box-shadow:0 10px 22px -12px rgba(var(--sh),.5);animation:popin .55s var(--spring)}
.gchip-img{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--grad-soft);flex:none}
.gchip-img img{width:100%;height:100%;object-fit:cover}
.gchip-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.gchip-txt b{font-size:13.5px;color:var(--deep)}
.gchip-txt i{font-style:normal;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.gchip-x{flex:none;position:relative;overflow:hidden;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--grad-soft);margin-left:2px;transition:transform .3s var(--spring)}
.gchip-x:active{transform:scale(.85) rotate(90deg)}
.urlrow{display:flex;gap:8px;margin-top:14px;align-items:center}
.go{position:relative;overflow:hidden;flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--grad-cta);box-shadow:0 10px 20px -10px rgba(var(--cta-rgb),.65);transition:transform .3s var(--spring)}
.go:active{transform:scale(.88)}
.hist{margin-top:18px}
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.hist-head h3{font-size:15px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.gal-sub{font-size:12px;color:var(--faint)}
.hist-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 18px 12px;margin:0 -18px;scrollbar-width:none}
.hist-row::-webkit-scrollbar{display:none}
.hitem{position:relative;overflow:hidden;flex:none;width:70px;height:88px;border-radius:20px;background:#fff;border:2px solid #fff;box-shadow:0 8px 18px -10px rgba(var(--sh),.5);scroll-snap-align:start;transition:transform .35s var(--spring),box-shadow .3s;animation:popin .5s var(--spring) both}
.hitem:active{transform:scale(.9)}
.hitem img{width:100%;height:100%;object-fit:cover}
.hitem.on{box-shadow:0 0 0 2.5px var(--acc-deep),0 10px 20px -10px rgba(var(--sh),.6)}
.hitem.broken img{display:none}.hitem.broken{background:var(--grad-soft)}
.hist-empty{font-size:12.5px;color:var(--faint);padding:10px 14px;border-radius:var(--r-sm);border:1.5px dashed rgba(var(--ln),.35);text-align:center;background:rgba(255,255,255,.4)}
.hist.has .hist-empty{display:none}

/* ---------- floating CTA ---------- */
.cta{position:absolute;left:50%;bottom:calc(46px + var(--sab));z-index:5;width:min(calc(100% - 40px),340px);min-height:58px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:99px;font-size:17px;font-weight:700;letter-spacing:.12em;color:#fff;
  background:var(--grad-cta);box-shadow:0 18px 32px -12px rgba(var(--cta-rgb),.65),0 4px 10px -4px rgba(var(--cta2-rgb),.35),inset 0 1px 0 rgba(255,255,255,.4);
  opacity:0;visibility:hidden;transform:translate(-50%,46px) scale(.7);transition:transform .65s var(--spring),opacity .3s,visibility 0s linear .65s,filter .3s}
.cta.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.cta.show:active{transform:translate(-50%,0) scale(.95,.93)}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%) skewX(-18deg);animation:sheen 4.2s ease-in-out infinite 1.2s;pointer-events:none}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(330%) skewX(-18deg)}}
.cta>*{position:relative;z-index:1}
.cta.wait{background:var(--tint-c);color:var(--ink-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(var(--ln),.3)}
.cta.wait::after{display:none}
.cta-ic{animation:nudgeR 1.8s ease-in-out infinite}
@keyframes nudgeR{50%{transform:translateX(4px)}}
.notes{flex:none;position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;min-height:40px;padding:6px 14px calc(8px + var(--sab));font-size:11.5px;color:var(--mute);background:linear-gradient(180deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.9) 40%)}

/* ---------- stage 3: loading ---------- */
.loadcard{position:relative;overflow:hidden;width:min(100%,calc(46dvh * .75));min-width:200px;margin:6px auto 0;aspect-ratio:3/4;border-radius:var(--r-xl);border:2px solid #fff;background:linear-gradient(160deg,var(--tint-a),var(--tint-c));box-shadow:var(--sh-card),0 0 0 6px rgba(255,255,255,.45);isolation:isolate;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.lc-bg{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(20px) saturate(1.05) brightness(1.08);z-index:-3;transform:scale(1.05);opacity:.9}
.lc-veil{position:absolute;inset:0;z-index:-2;background:radial-gradient(75% 60% at 50% 45%,rgba(var(--lt),.1),rgba(var(--lt),.7)),linear-gradient(180deg,rgba(var(--lt-d),.25),rgba(var(--lt-d),.3))}
.loadcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.rings{position:absolute;left:50%;top:44%;width:200px;height:200px;margin:-100px 0 0 -100px;display:grid;place-items:center;pointer-events:none}
.rings svg{overflow:visible}
.ring{fill:none;stroke:url(#rg);stroke-width:2.5;transform-origin:100px 100px;opacity:0;animation:ringpulse 3.2s ease-in-out infinite}
.r1{animation-delay:.8s}.r2{animation-delay:.4s}.r3{animation-delay:0s}
.core{fill:#fff;transform-origin:100px 100px;filter:drop-shadow(0 0 10px rgba(255,255,255,.95));animation:pulse 1.9s ease-in-out infinite}
@keyframes ringpulse{0%{transform:scale(.55);opacity:0}35%{opacity:.95}100%{transform:scale(1.12);opacity:0}}
@keyframes pulse{50%{transform:scale(1.8);opacity:.6}}
.lc-g{position:absolute;left:12px;top:12px;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#fff;border:2.5px solid #fff;box-shadow:0 10px 20px -8px rgba(var(--sh),.6);animation:popin .7s var(--spring) .3s both}
.lc-g img{width:100%;height:100%;object-fit:cover}
.lc-poke{position:absolute;right:12px;top:14px;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.7);font-size:11.5px;font-weight:600;color:var(--deep);pointer-events:none}
.lc-line{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);white-space:nowrap;margin:0;padding:10px 20px;border-radius:99px;font-size:15.5px;font-weight:600;letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.9);box-shadow:0 10px 24px -12px rgba(var(--sh),.55);transition:opacity .35s,transform .35s var(--ease);pointer-events:none;max-width:calc(100% - 20px)}
.lc-line.swap{opacity:0;transform:translate(-50%,8px)}
.tipcard{display:flex;gap:10px;align-items:flex-start;max-width:340px;margin:16px auto 0;padding:12px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:0 10px 22px -14px rgba(var(--sh),.5);font-size:13.5px;line-height:1.65;color:var(--ink-2);min-height:64px;align-items:center}
.tip-k{flex:none;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cta-1),var(--cta-2))}
.tipcard p{transition:opacity .35s,transform .35s var(--ease)}.tipcard p.swap{opacity:0;transform:translateY(6px)}
.load-meta{margin:16px auto 0;max-width:340px;text-align:center}
.bar{height:6px;border-radius:6px;background:rgba(var(--lt-d),.7);overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(var(--sh),.2)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:6px;background:linear-gradient(90deg,var(--acc-soft),var(--sky),var(--acc-soft));animation:indet 1.9s ease-in-out infinite}
@keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.load-sub{margin-top:10px;color:var(--mute);font-size:12.5px;line-height:1.6}
.sep{margin:0 6px;color:var(--faint)}
.load-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.load-actions .btn-main{min-width:240px}

/* particles (hearts / sparkles) */
.fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:4}
.pt{position:absolute;width:var(--s,18px);height:var(--s,18px);margin:calc(var(--s,18px) / -2) 0 0 calc(var(--s,18px) / -2);color:var(--c,var(--p1));filter:drop-shadow(0 2px 5px rgba(var(--glow),.55));opacity:0;animation:ptfly var(--d,1.3s) var(--ease) forwards}
.pt svg{width:100%;height:100%}
@keyframes ptfly{0%{opacity:0;transform:translate3d(0,0,0) scale(.3) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx,0),var(--dy,-90px),0) scale(1.1) rotate(var(--r,30deg))}}

/* ---------- stage 4: result ---------- */
.modes{display:flex;padding:4px;margin:2px auto 12px;width:max-content;max-width:100%;border-radius:99px;background:rgba(var(--lt-d),.5);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 2px 6px rgba(var(--sh),.12)}
.mode{min-height:42px;padding:0 17px;border-radius:99px;font-size:13.5px;font-weight:600;color:var(--mute);transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--spring)}
.mode.on{background:#fff;color:var(--deep);box-shadow:0 6px 14px -6px rgba(var(--sh),.45)}
.mode:active{transform:scale(.92)}
.cwrap{position:relative;display:flex;justify-content:center}
.compare{position:relative;width:min(100%,calc(41dvh * var(--ar)));min-width:200px;border-radius:var(--r-xl);overflow:hidden;border:3px solid #fff;background:var(--bg2);box-shadow:0 2px 6px rgba(var(--ln),.15),0 22px 44px -18px rgba(var(--sh),.45),0 40px 70px -40px rgba(var(--sh),.5);transition:width .5s var(--ease)}
.compare[data-mode="side"]{width:100%}
.cmp-stack{position:relative;aspect-ratio:var(--ar);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cmp-layer{position:absolute;inset:0;margin:0}
.cmp-layer img,.cmp-side img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.cmp-orig{clip-path:inset(0 calc(100% - var(--pos)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-hold{opacity:0;filter:blur(8px);transform:scale(1.03);transition:opacity .28s var(--ease),filter .35s var(--ease),transform .4s var(--ease);pointer-events:none}
.compare.holding .cmp-hold,.compare[data-mode="orig"] .cmp-hold{opacity:1;filter:blur(0);transform:none}
.compare[data-mode="orig"] .cmp-hold .tag-c{display:none}
.tag{position:absolute;bottom:12px;padding:5px 13px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.08em;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 6px 14px -8px rgba(var(--sh-d),.5)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.tag{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.tag-l{left:12px}.tag-r{right:12px;color:var(--deep)}.tag-c{left:50%;transform:translateX(-50%);white-space:nowrap}
.compare:not([data-mode="slide"]) .cmp-orig .tag-l{display:none}
.compare[data-mode="orig"] .tag-try,.compare.holding .tag-try{display:none}
.compare[data-mode="try"] .cmp-orig{visibility:hidden}
.compare[data-mode="try"] .handle,.compare[data-mode="orig"] .handle{display:none}
.compare[data-mode="orig"] .cmp-orig{visibility:hidden}
.ai-chip{position:absolute;top:12px;right:12px;padding:4px 11px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.1em;background:rgba(255,255,255,.9);color:var(--deep);box-shadow:0 6px 14px -8px rgba(var(--sh-d),.5);pointer-events:none;z-index:2}
.handle{position:absolute;top:0;bottom:0;left:var(--pos);width:44px;margin-left:-22px;display:flex;justify-content:center;touch-action:pan-y}
.compare.holding .handle{opacity:0}
.handle-line{position:absolute;top:0;bottom:0;width:3px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px rgba(var(--ln),.25),0 0 14px rgba(255,255,255,.9),0 0 26px rgba(var(--glow),.7)}
.handle-knob{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--warm-deep);background:#fff;box-shadow:0 10px 22px -8px rgba(var(--sh),.6),0 0 0 6px rgba(255,255,255,.45);transition:transform .35s var(--spring)}
.handle-knob::before,.handle-knob::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border:solid #fff;border-width:0 0 2.5px 2.5px;filter:drop-shadow(0 1px 3px rgba(var(--sh-d),.6))}
.handle-knob::before{left:-16px;transform:rotate(45deg)}.handle-knob::after{right:-16px;transform:rotate(-135deg)}
.compare.dragging .handle-knob{transform:scale(1.14)}
.handle:focus-visible{outline:none}.handle:focus-visible .handle-knob{outline:2px solid var(--acc-deep);outline-offset:3px}
.cmp-side{display:none;grid-template-columns:1fr 1fr;gap:3px;background:#fff;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cmp-side figure{position:relative;margin:0;aspect-ratio:var(--ar)}
.cmp-side figcaption{position:absolute;left:10px;bottom:10px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:700;background:rgba(255,255,255,.92);color:var(--ink)}
.cmp-side figure:last-child figcaption{color:var(--deep)}
.compare[data-mode="side"] .cmp-stack{display:none}.compare[data-mode="side"] .cmp-side{display:grid}
/* reveal: soft curtain + blur-to-sharp */
.curtain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(160deg,var(--tint-a),var(--tint-c));-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
.compare.reveal .curtain{animation:curtain 1.5s var(--ease) forwards}
.compare.reveal .cmp-stack,.compare.reveal .cmp-side{animation:unblur 1.4s var(--ease) both}
@keyframes curtain{0%{opacity:1;clip-path:inset(0 0 0 0)}55%{opacity:.9}100%{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes unblur{0%{filter:blur(18px) saturate(1.3);transform:scale(1.06)}100%{filter:none;transform:none}}
.compare.swap .cmp-stack,.compare.swap .cmp-side{animation:swapimg .5s var(--ease)}
@keyframes swapimg{0%{opacity:.2;filter:blur(10px);transform:scale(.97)}100%{opacity:1;filter:none;transform:none}}
.rrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.rhint{font-size:12.5px;color:var(--mute);text-align:center}
.holdbtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;font-size:13px;font-weight:700;color:var(--deep);background:linear-gradient(135deg,var(--tint-a),var(--tint-b));border:1px solid rgba(var(--ln),.55);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.holdbtn:active,.holdbtn.on{transform:scale(.94);background:#fff}
.strong-note{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;justify-content:center;margin-top:10px;font-size:12px;color:var(--mute)}
.strong-note .notice-ai{font-size:13px;padding:7px 14px}
.qa{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-top:14px}
.qa .btn{padding:0 8px;font-size:13.5px}.qa .save{padding:0 10px;font-size:15px;letter-spacing:.04em}
.gal{margin-top:18px}
.gal-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 18px 12px;margin:0 -18px;scrollbar-width:none}
.gal-row::-webkit-scrollbar{display:none}
.gitem{position:relative;overflow:hidden;flex:none;width:66px;height:88px;border-radius:20px;background:#fff;border:2px solid #fff;box-shadow:0 8px 18px -10px rgba(var(--sh),.5);scroll-snap-align:start;transition:transform .35s var(--spring),box-shadow .3s;animation:popin .5s var(--spring) both}
.gitem img{width:100%;height:100%;object-fit:cover}
.gitem:active{transform:scale(.9)}
.gitem.on{box-shadow:0 0 0 2.5px var(--acc-deep),0 10px 20px -10px rgba(var(--sh),.6)}
.gitem b{position:absolute;left:5px;top:5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font-size:11px;color:#fff;background:linear-gradient(135deg,var(--cta-1),var(--cta-2))}

/* ---------- error ---------- */
.errbox{margin-top:12px;padding:28px 20px;text-align:center;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(var(--lt),.7));box-shadow:var(--sh-card)}
.err-ico{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;color:var(--warm-deep);background:linear-gradient(135deg,var(--warm-tint),var(--warm-tint-2));box-shadow:0 8px 18px -8px rgba(var(--sh),.45),inset 0 1px 0 #fff;animation:bob 3.5s ease-in-out infinite}
.err-title{margin-top:14px;font-size:24px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.err-lead{margin-top:4px;color:var(--mute);font-size:13.5px}
.err-text{margin:14px auto 0;max-width:22em;padding:13px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.9);border:1px solid var(--line-2);color:var(--ink);font-size:14.5px;line-height:1.7;word-break:break-word;text-align:left}
.err-help{margin-top:14px;color:var(--mute);font-size:13px}
.err-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}

/* ---------- sheet / toast ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(var(--sh-d),.45);animation:fadein .3s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet-panel{position:relative;width:100%;max-width:520px;max-height:100dvh;overflow:auto;padding:22px 18px calc(18px + var(--sab));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface);border:1px solid #fff;border-bottom:0;box-shadow:0 -20px 50px -20px rgba(var(--sh),.5);animation:sheetin .5s var(--ease)}
@keyframes sheetin{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-title{margin:0 0 14px;text-align:center;font-weight:700;font-size:16px;color:var(--deep)}
.sheet-panel img{width:auto;max-width:100%;max-height:60dvh;margin:0 auto;border-radius:var(--r-md);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.toast{position:fixed;left:50%;bottom:calc(126px + var(--sab));z-index:60;transform:translate(-50%,20px) scale(.9);opacity:0;pointer-events:none;padding:11px 20px;border-radius:99px;background:#fff;border:1px solid var(--line-2);box-shadow:0 14px 30px -12px rgba(var(--sh),.55);color:var(--deep);font-size:14px;font-weight:600;transition:opacity .35s,transform .45s var(--spring);max-width:calc(100vw - 40px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}

/* ---------- wide screens: a phone-app card on a pastel backdrop ---------- */
@media (min-width:760px){
  .shell{max-width:440px;height:min(880px,calc(100dvh - 48px));margin:24px auto;border-radius:44px;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 80px -40px rgba(var(--sh),.45),inset 0 1px 0 rgba(255,255,255,.9);padding-top:6px}
  .notes{border-radius:0 0 44px 44px}
  .toast{bottom:calc(50% - min(440px,calc(50dvh - 24px)) + 126px)}
}
@media (max-width:370px){
  .stage{padding-left:14px;padding-right:14px}
  .chip{padding:0 14px;font-size:14px}
  .mode{padding:0 12px}
  .qa{grid-template-columns:1.3fr 1fr 1fr;gap:6px}
  .qa .btn{font-size:13px;padding:0 4px;gap:4px}
  .brand-name{font-size:15px}
}
@media (max-height:640px){
  .assist{min-height:52px}.p-sil{width:80px;height:80px}
}
@media (hover:hover){
  .pframe:hover,.drop:hover{border-color:var(--acc-soft)}
  .chip:hover,.btn:hover{background:#fff}
  .cta.show:hover{transform:translate(-50%,-2px) scale(1.02)}
  .hitem:hover,.gitem:hover{transform:translateY(-3px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .stage,.stage[data-pos]{filter:none!important;transform:none!important}
  .loadcard::before{display:none}
  .ring{animation:none;opacity:.7}
  .ow{transform:none!important}
  .fx,.curtain{display:none}
  .ripple{display:none}
}

/* =====================================================================
   v3.1 — persistent history (我的试穿) + multi-compare
   ===================================================================== */
.hbtn{position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 12px 0 10px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--deep);background:rgba(255,255,255,.82);border:1px solid var(--line-2);box-shadow:0 6px 14px -8px rgba(var(--sh),.5);transition:transform .3s var(--spring);overflow:visible}
.hbtn:active{transform:scale(.92)}
.hbtn-n{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cta-1),var(--cta-2));box-shadow:0 0 0 2px var(--surface);animation:popin .5s var(--spring)}
.hbtn.on{background:#fff;box-shadow:0 0 0 2px rgba(var(--cta-rgb),.5)}
@media (max-width:370px){.hbtn-t{display:none}.hbtn{width:40px;padding:0;justify-content:center}}
.hh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:4px 2px 10px}
.hh-t{font-size:28px;font-weight:700;letter-spacing:.06em;line-height:1.2;background:linear-gradient(100deg,var(--cta-1) 0%,var(--cta-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--cta-1)}
.hh-s{font-size:12.5px;color:var(--mute);margin-top:2px}
.hnote{margin:0 0 10px;padding:10px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.7);border:1.5px dashed rgba(var(--ln),.45);font-size:12.5px;color:var(--deep);line-height:1.6}
.hhint{margin:0 2px 10px;font-size:12.5px;color:var(--faint)}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hcard{position:relative;border-radius:var(--r-md);background:#fff;border:2px solid #fff;box-shadow:var(--sh-card);overflow:hidden;animation:cardin .6s var(--spring) both;transition:box-shadow .3s,transform .35s var(--spring)}
.hcard.sel{box-shadow:0 0 0 3px var(--acc-deep),var(--sh-card)}
.hcard.leaving{animation:cardout .4s var(--ease) forwards}
@keyframes cardout{to{opacity:0;transform:scale(.8)}}
.hopen{position:relative;display:block;width:100%;aspect-ratio:3/4;background:var(--grad-soft);overflow:hidden}
.hopen img{width:100%;height:100%;object-fit:cover}
.hopen:active{transform:scale(.97)}
.hopen .miss{position:absolute;inset:0;display:none;place-items:center;font-size:12px;color:var(--acc);text-align:center;padding:10px}
.hopen.broken img{display:none}.hopen.broken .miss{display:grid}
.hg{position:absolute;left:8px;bottom:8px;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 6px 12px -4px rgba(var(--sh-d),.5);display:grid;place-items:center;color:var(--acc)}
.hg img{width:100%;height:100%;object-fit:cover}
.hexp{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.9);font-size:10.5px;font-weight:700;color:var(--deep)}
.hsel{position:absolute;left:6px;top:6px;width:44px;height:44px;display:grid;place-items:center}
.hsel i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:transparent;background:rgba(255,255,255,.85);border:2px solid rgba(var(--ln),.6);box-shadow:0 4px 10px -4px rgba(var(--sh-d),.5);transition:transform .35s var(--spring),background .2s,color .2s}
.hsel[aria-checked="true"] i{color:#fff;background:linear-gradient(135deg,var(--cta-1),var(--cta-2));border-color:#fff;transform:scale(1.12)}
.hdel{position:absolute;right:6px;top:6px;width:44px;height:44px;display:grid;place-items:center;overflow:visible}
.hdel i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--deep);background:rgba(255,255,255,.88);box-shadow:0 4px 10px -4px rgba(var(--sh-d),.5);transition:transform .3s var(--spring)}
.hdel:active i{transform:scale(.8)}
.hmeta{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px 9px;font-size:12px;color:var(--mute)}
.hmeta b{font-weight:700;color:var(--ink-2);font-size:12.5px}
.hempty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 10px 0}
.hempty-art{max-width:100%;height:auto}
.ha-float{animation:bob 4s ease-in-out infinite;transform-origin:110px 90px}
.ha-s1{animation:twinkle 2.4s ease-in-out infinite;transform-origin:42px 63px}
.ha-s2{animation:twinkle 2.8s ease-in-out .6s infinite;transform-origin:176px 52px}
.ha-s3{animation:bob 3.4s ease-in-out .3s infinite}
.hempty-t{margin-top:8px;font-size:20px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
.hempty-s{margin:6px 0 18px;font-size:13.5px;color:var(--mute);max-width:19em;line-height:1.7}
.hempty .save{min-width:200px}
/* compare view */
.refbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;margin:0 -4px 12px;padding:8px 12px 8px 8px;border-radius:99px;background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:0 10px 22px -14px rgba(var(--sh),.55)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.refbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.ref-img{flex:none;width:44px;height:58px;border-radius:14px;overflow:hidden;background:var(--grad-soft);box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(var(--ln),.55)}
.ref-img img{width:100%;height:100%;object-fit:cover}
.ref-t{display:flex;flex-direction:column;line-height:1.35;font-size:12px;color:var(--mute)}
.ref-t b{font-size:13.5px;color:var(--deep)}
.ccols{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:4px 18px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ccols::-webkit-scrollbar{display:none}
.ccol{flex:none;scroll-snap-align:center;width:calc((100% - 10px) / 2);min-width:150px;display:flex;flex-direction:column;gap:8px;animation:cardin .6s var(--spring) both}
.ccols[data-n="3"] .ccol{width:calc((100% - 10px) / 2.15)}
.cimg{position:relative;aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;background:var(--grad-soft);border:2.5px solid #fff;box-shadow:var(--sh-card);touch-action:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.cimg .c-orig{opacity:0;filter:blur(8px);transform:scale(1.03);transition:opacity .28s var(--ease),filter .35s var(--ease),transform .4s var(--ease)}
.cimg.holding .c-orig{opacity:1;filter:none;transform:none}
.cimg .tag{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;bottom:8px;font-size:11.5px;display:none}
.cimg.holding .tag{display:block}
.cimg .ai-chip{top:8px;right:8px;font-size:10px;padding:3px 9px}
.ccol-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);padding:0 2px}
.ccol-meta .hg{position:static;width:26px;height:26px;box-shadow:none;border:1.5px solid rgba(var(--ln),.5)}
.ccol .save{min-height:44px;font-size:14px;letter-spacing:.04em;padding:0 10px}
.cfm-panel{max-width:360px;margin-bottom:0}
.cfm-d{text-align:center;color:var(--mute);font-size:13.5px;margin-bottom:6px}
.sheet:has(.cfm-panel){align-items:center}
.sheet:has(.cfm-panel) .sheet-panel{border-radius:var(--r-xl);border-bottom:1px solid #fff;margin:0 20px;width:auto}
.toast-undo{display:flex;align-items:center;gap:12px;pointer-events:none;white-space:nowrap}
.toast-undo.on{pointer-events:auto}
.toast-undo button{min-height:44px;padding:0 6px;margin:-8px -8px -8px 0;font-weight:700;color:#fff;border-radius:99px;background:var(--grad-cta);padding:0 16px}
@media (max-width:370px){
  .hist-row,.gal-row,.ccols{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
}

/* ========== v3.1 feature layer: magazine / closet / story / prefs / demo / gestures ========== */
.hbtn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 10px;border-radius:99px;background:rgba(255,255,255,.78);border:1px solid var(--line);color:var(--ink-2);font-size:12.5px;font-weight:600;box-shadow:0 6px 14px -8px rgba(var(--sh),.5)}
.hbtn.on{background:linear-gradient(135deg,var(--tint-a),var(--tint-b));border-color:rgba(var(--ln),.5);color:var(--deep)}
.hbtn-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--grad-cta);color:#fff;font-size:11px;font-weight:700}
.prefs-strip{margin:14px 0 0;display:flex;justify-content:center}
.plink{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid var(--line-2);color:var(--mute);font-size:12.5px;font-weight:600}
.plink svg{color:var(--acc)}

/* magazine cards */
.mag{margin:16px 0 4px}
.mag-sub{font-size:12px;color:var(--faint);font-weight:500}
.mag-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mag-row::-webkit-scrollbar{display:none}
.mag-card{flex:none;width:148px;scroll-snap-align:start;border:0;padding:0;background:none;text-align:left;border-radius:18px;overflow:hidden;box-shadow:var(--sh-card);position:relative;animation:popin .5s var(--spring) both}
.mag-card img{width:148px;height:210px;object-fit:cover;background:var(--tint-a);display:block}
.mag-card b{display:block;padding:8px 10px 10px;font-size:12.5px;color:var(--ink-2);background:#fff}
.mag-card:active{transform:scale(.96)}

/* closet tags + drag */
.tags{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;margin-top:4px}
.tags::-webkit-scrollbar{display:none}
.tagb{flex:none;min-height:34px;padding:0 14px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--mute);background:rgba(255,255,255,.7);border:1px solid var(--line-2)}
.tagb.on{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:0 8px 16px -10px rgba(var(--cta-rgb),.55)}
.hgrid.closet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hcard{position:relative;border-radius:22px;background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--sh-card);overflow:hidden;animation:popin .45s var(--spring) both;touch-action:manipulation}
.hcard.sel{outline:2px solid var(--acc-deep);outline-offset:2px}
.hcard.leaving{opacity:0;transform:scale(.86);transition:.35s var(--ease)}
.hcard.dragging{opacity:.85;transform:scale(1.04);z-index:5;box-shadow:0 18px 40px -16px rgba(var(--sh),.55)}
.hcard .htag{position:absolute;left:8px;bottom:36px;z-index:2;min-height:24px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:700;color:var(--deep);background:rgba(255,255,255,.92);border:1px solid var(--line);backdrop-filter:blur(8px)}
.hcard .hretry{position:absolute;right:8px;bottom:36px;z-index:2;min-height:28px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:700;color:#fff;background:var(--grad-cta);border:0;opacity:1;pointer-events:auto;box-shadow:0 6px 12px -6px rgba(var(--cta-rgb),.55)}
.hcard:hover .hretry,.hcard:focus-within .hretry,.hcard.show-retry .hretry{opacity:1;pointer-events:auto}
.hopen{display:block;width:100%;aspect-ratio:.72;position:relative;overflow:hidden;background:var(--tint-a);border:0;padding:0}
.hopen img{width:100%;height:100%;object-fit:cover}
.hopen.broken img{opacity:0}
.hopen .miss{display:none;position:absolute;inset:0;place-items:center;color:var(--faint);font-size:12px;font-weight:600;background:var(--tint-b)}
.hopen.broken .miss{display:grid}
.hopen .hg{position:absolute;left:8px;top:8px;width:28px;height:28px;border-radius:50%;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--acc)}
.hopen .hg img{width:100%;height:100%;object-fit:cover}
.hopen .hexp{position:absolute;right:8px;top:8px;font-size:10px;font-weight:700;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.9);color:var(--warm-deep)}
.hsel,.hdel{position:absolute;top:8px;z-index:3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 4px 10px -6px rgba(var(--sh),.5)}
.hsel{right:44px}.hdel{right:8px}
.hsel i,.hdel i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%}
.hsel[aria-checked="true"]{background:var(--grad-cta);color:#fff;border-color:transparent}
.hsel[aria-checked="true"] i{background:transparent}
.hmeta{display:flex;justify-content:space-between;gap:6px;padding:8px 10px 10px;font-size:11.5px;color:var(--mute)}
.hmeta b{color:var(--ink-2);font-weight:700}

/* story compare */
.story-lead{text-align:center;color:var(--mute);font-size:13.5px;margin:4px 0 12px;font-weight:600}
.story{position:relative;border-radius:28px;overflow:hidden;background:#111;box-shadow:var(--sh-card);aspect-ratio:.62;max-height:62vh;touch-action:pan-y}
.story-track{display:flex;height:100%;transition:transform .45s var(--ease);will-change:transform}
.story-track li{flex:none;width:100%;height:100%;position:relative}
.story-track img{width:100%;height:100%;object-fit:cover}
.story-track .stag{position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:700;backdrop-filter:blur(8px)}
.story-dots{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:center;gap:5px;padding:0 24px;pointer-events:none}
.story-dots i{flex:1;max-width:48px;height:3px;border-radius:99px;background:rgba(255,255,255,.35)}
.story-dots i.on{background:#fff}
.story-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:16px;font-weight:700;text-align:center;letter-spacing:.04em}

/* prefs sheet */
.prefs-panel{text-align:left}
.pf{border:0;margin:14px 0 0;padding:0}
.pf legend{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:36px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:600;color:var(--mute);background:rgba(255,255,255,.85);border:1px solid var(--line-2)}
.pill.on{color:#fff;background:var(--grad-cta);border-color:transparent}

/* poster */
#poster-img{width:100%;max-height:58vh;object-fit:contain;border-radius:16px;background:var(--tint-a);margin:8px 0}
.poster-url{font-size:11.5px;color:var(--faint);word-break:break-all;text-align:center;margin:0 0 8px}

/* demo overlay */
.demo{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(14px)}
.demo[hidden]{display:none!important}
.demo-card{width:min(360px,100%);padding:22px 20px 18px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(var(--sh),.55);text-align:center}
.demo-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--acc);text-transform:uppercase}
.demo-t{font-size:22px;font-weight:800;color:var(--ink);margin:4px 0 14px;letter-spacing:.06em}
.demo-stage{position:relative;height:180px;margin:0 auto 12px;border-radius:24px;background:linear-gradient(160deg,var(--tint-a),var(--tint-c));overflow:hidden;display:grid;place-items:center}
.demo-avatar{transition:transform .6s var(--ease),opacity .4s}
.demo-garment{position:absolute;right:18%;top:18%;opacity:0;transform:translateY(-20px) scale(.8);transition:opacity .5s,transform .6s var(--spring)}
.demo[data-step="1"] .demo-garment,.demo[data-step="2"] .demo-garment{opacity:1;transform:none}
.demo[data-step="2"] .demo-avatar{transform:scale(1.04)}
.demo[data-step="2"] .demo-garment{left:50%;right:auto;top:32%;transform:translateX(-50%) scale(1.15);filter:drop-shadow(0 10px 16px rgba(var(--sh),.35))}
.demo-spark{position:absolute;opacity:0;font-size:28px;transition:opacity .4s,transform .5s var(--spring)}
.demo[data-step="2"] .demo-spark{opacity:1;transform:translate(40px,-50px) scale(1.2)}
.demo-line{font-size:14.5px;font-weight:600;color:var(--ink-2);min-height:22px;margin:0 0 10px}
.demo-bar{height:4px;border-radius:99px;background:rgba(var(--ln),.2);overflow:hidden;margin:0 8px 14px}
.demo-bar i{display:block;height:100%;width:0;background:var(--grad-cta);border-radius:inherit;transition:width .4s var(--ease)}
.demo-actions{display:flex;gap:10px;justify-content:center}
.demo-actions .save{flex:1}.demo-actions .btn{flex:none;min-width:88px}

/* pinch zoom overlay */
.zoom-layer{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.88);display:grid;place-items:center;touch-action:none}
.zoom-layer[hidden]{display:none!important}
.zoom-layer img{max-width:100%;max-height:100%;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-select:none}

/* pull hint */
.pull{position:fixed;left:50%;top:calc(10px + var(--sat));transform:translate(-50%,-120%);z-index:40;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(var(--sh),.5);font-size:12.5px;font-weight:700;color:var(--deep);transition:transform .25s var(--ease);pointer-events:none}
.pull.on{transform:translate(-50%,0)}

/* result pinch hint */
.cwrap{position:relative;touch-action:pan-y}
.compare.zooming{touch-action:none}
.qa{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qa .save{flex:1 1 140px}.qa .btn{flex:1 1 auto}

.err-tips{margin:12px 0 0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--line);text-align:left;color:var(--mute);font-size:12.5px;line-height:1.7}
.err-tips li{list-style:disc;margin-left:18px}

@media (prefers-reduced-motion: reduce){
  .demo-avatar,.demo-garment,.demo-spark,.story-track,.mag-card,.hcard{transition:none!important;animation:none!important}
}

/* garment candidates from Taobao resolve */
.gcands{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;margin:4px 0 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gcands::-webkit-scrollbar{display:none}
.gcands[hidden]{display:none!important}
.gcand{flex:none;width:64px;height:64px;padding:0;border-radius:14px;overflow:hidden;border:2px solid transparent;background:#fff;box-shadow:0 6px 14px -8px rgba(var(--sh),.45);position:relative}
.gcand img{width:100%;height:100%;object-fit:cover;display:block}
.gcand.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--glow),.35)}
.gcand.broken{opacity:.4}
.gcand:active{transform:scale(.94)}