*{box-sizing:border-box}
html{font-size:62.5%}
body{margin:0;min-height:100vh}
img{max-width:100%}
button{font-family:inherit;cursor:pointer}
a{text-decoration:none;color:inherit}

/* ===== design tokens: category color system + shared motion system + noise ===== */
body[data-page-theme="ai"]{
  --m:var(--crimson);
  --cat-image:#FF3B5C;   /* crimson family   -> 图像 */
  --cat-video:#FF8A3D;   /* amber family     -> 视频 */
  --cat-fx:#C9A0FF;      /* violet family    -> 特效 */
  --cat-play:#E6B873;    /* gold family      -> 玩法 */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-fast:.18s;
  --dur-med:.32s;
  --dur-slow:.55s;
  --noise-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-fam="image"]{--cat:var(--cat-image)}
[data-fam="video"]{--cat:var(--cat-video)}
[data-fam="fx"]{--cat:var(--cat-fx)}
[data-fam="play"]{--cat:var(--cat-play)}

/* ===== shared entrance / stagger reveal system (scroll-observed, reduced-motion safe) ===== */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  .js-reveal.will-animate > *{opacity:0;transform:translateY(14px)}
  .js-reveal.will-animate.in-view > *{animation:riseIn var(--dur-slow) var(--ease-out) both}
  .js-reveal.will-animate.in-view > *:nth-child(1){animation-delay:.00s}
  .js-reveal.will-animate.in-view > *:nth-child(2){animation-delay:.05s}
  .js-reveal.will-animate.in-view > *:nth-child(3){animation-delay:.10s}
  .js-reveal.will-animate.in-view > *:nth-child(4){animation-delay:.15s}
  .js-reveal.will-animate.in-view > *:nth-child(5){animation-delay:.20s}
  .js-reveal.will-animate.in-view > *:nth-child(6){animation-delay:.25s}
  .js-reveal.will-animate.in-view > *:nth-child(7){animation-delay:.30s}
  .js-reveal.will-animate.in-view > *:nth-child(8){animation-delay:.35s}
  .js-reveal.will-animate.in-view > *:nth-child(9){animation-delay:.40s}
  .js-reveal.will-animate.in-view > *:nth-child(10){animation-delay:.45s}
  .js-reveal.will-animate.in-view > *:nth-child(11){animation-delay:.50s}
  .js-reveal.will-animate.in-view > *:nth-child(12){animation-delay:.55s}
  .js-reveal.will-animate.in-view > *:nth-child(13){animation-delay:.60s}
  .js-reveal.will-animate.in-view > *:nth-child(14){animation-delay:.64s}
  .js-reveal.will-animate.in-view > *:nth-child(15){animation-delay:.68s}
  .js-reveal.will-animate.in-view > *:nth-child(16){animation-delay:.72s}
  .re-enter{animation:riseIn .45s var(--ease-out) both}
}

/* ===== real ai-page.css (hero preserved + rebuilt system below) ===== */
body[data-page-theme="ai"]{--m:var(--crimson)}

.ai-hero{position:relative;width:100%;min-height:clamp(470px,78vh,700px);overflow:hidden;isolation:isolate;
  display:flex;align-items:center;padding-top:58px}
.ai-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% 22%,rgba(255,59,92,.30),transparent 58%),
    radial-gradient(90% 80% at 12% 90%,rgba(230,184,115,.16),transparent 60%),
    radial-gradient(70% 70% at 50% -10%,rgba(123,224,198,.12),transparent 55%),
    linear-gradient(160deg,#1a0d14 0%,var(--paper) 60%)}
.ai-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30;
  filter:saturate(1.12) contrast(1.08);mix-blend-mode:screen;transform:scale(1.02)}
.ai-hero__bg::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,59,92,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,59,92,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 80% at 70% 40%,#000,transparent 72%);
          mask-image:radial-gradient(80% 80% at 70% 40%,#000,transparent 72%)}
.ai-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,12,.72),rgba(8,8,12,.20) 52%,rgba(8,8,12,.60)),
             linear-gradient(0deg,var(--paper) 2%,transparent 34%)}
.ai-hero__orb{position:absolute;z-index:0;border-radius:50%;filter:blur(46px);pointer-events:none;opacity:.7}
@media (prefers-reduced-motion:no-preference){.ai-hero__orb{animation:aiFloat 9s ease-in-out infinite}}
.ai-hero__orb--a{width:280px;height:280px;right:6%;top:14%;background:radial-gradient(circle,rgba(255,59,92,.55),transparent 70%)}
.ai-hero__orb--b{width:200px;height:200px;right:24%;bottom:8%;background:radial-gradient(circle,rgba(230,184,115,.42),transparent 70%);animation-delay:-3s}
@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.ai-hero__in{position:relative;z-index:2;width:100%;max-width:900px;padding:36px clamp(16px,5vw,72px) clamp(40px,8vh,80px)}
.ai-hero__k{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-latin);font-style:italic;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);margin-bottom:16px}
.ai-hero__k::before{content:"";width:32px;height:1.5px;background:var(--crimson);box-shadow:0 0 8px var(--crimson)}
.ai-hero__k .badge{font-style:normal;font-family:var(--font-sans);letter-spacing:.02em;text-transform:none;
  padding:3px 11px;border-radius:var(--r-pill);background:rgba(255,59,92,.16);border:1px solid rgba(255,59,92,.4);
  color:#fff;font-weight:700}
.ai-hero__t{font-family:var(--font-serif);font-weight:900;color:var(--title);
  font-size:clamp(40px,7vw,84px);line-height:1.01;letter-spacing:0;margin:0;text-wrap:balance;
  text-shadow:0 20px 60px rgba(0,0,0,.55)}
.ai-hero__t em{font-style:italic;
  background:linear-gradient(120deg,#FF3B5C,#FF8A3D 55%,#E6B873);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(255,59,92,.35))}
.ai-hero__sub{margin-top:20px;font-size:clamp(15px,1.7vw,18px);line-height:1.7;color:var(--ink-2);max-width:600px}
.ai-hero__sub b{color:var(--gold);font-weight:700}
.ai-hero__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:13px}
.ai-hero__stats{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 30px}
.ai-stat{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ai-stat b{font-family:var(--font-latin);font-weight:900;font-size:clamp(24px,3vw,32px);color:var(--title);line-height:1}
.ai-stat span{font-size:12px;color:var(--ink-3);letter-spacing:.04em}

/* ===== unified button system: primary / ghost / tertiary chip ===== */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;
  border-radius:var(--r-pill);font-size:14px;font-weight:700;letter-spacing:.02em;border:none;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-med),background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
  white-space:nowrap}
.ds-btn--primary{background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;box-shadow:var(--shadow-primary)}
.ds-btn--primary:hover{box-shadow:var(--shadow-primary-h);transform:translateY(-1px)}
.ds-btn--ghost{background:var(--fill-2);color:var(--ink);border:1px solid var(--line-2)}
.ds-btn--ghost:hover{border-color:var(--crimson);color:var(--crimson)}
.ds-btn--lg{height:50px;padding:0 30px;font-size:15.5px}
.ds-btn--sm{height:34px;padding:0 15px;font-size:12.5px}
.ds-btn:disabled,.ds-btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;pointer-events:none}
.ds-btn:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ds-btn--block{width:100%;max-width:100%}

/* tertiary chip pill: crimson-soft -> crimson-gradient on hover (card CTAs, sample "compare" triggers) */
.ai-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;color:var(--crimson);background:var(--crimson-soft);
  border:1px solid rgba(255,59,92,.32);transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);
  font-family:inherit}
.ai-chip:hover{background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;border-color:transparent}
.ai-chip:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-chip svg{width:15px;height:15px;transition:transform var(--dur-fast)}

.ai-secthead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:0 clamp(16px,5vw,72px);margin:clamp(30px,5vw,52px) 0 18px}
.ai-secthead h2{font-family:var(--font-serif);font-weight:900;color:var(--title);
  font-size:clamp(23px,3vw,34px);line-height:1;letter-spacing:.01em;margin:0}
.ai-secthead .en{font-family:var(--font-latin);font-style:italic;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--crimson)}
.ai-secthead p{flex-basis:100%;margin-top:4px;font-size:13.5px;color:var(--ink-3);max-width:620px;line-height:1.7}

/* ===== flagship spotlight band (digitalman) ===== */
.ai-spotlight{margin:0 clamp(16px,5vw,72px) clamp(30px,5vw,54px);display:grid;grid-template-columns:1fr;
  border-radius:24px;overflow:hidden;border:1px solid rgba(123,224,198,.28);box-shadow:var(--shadow-m);
  background:var(--surface)}
@media(min-width:860px){.ai-spotlight{grid-template-columns:1.05fr 1fr}}
.ai-spotlight__art{position:relative;min-height:240px;
  background:
    radial-gradient(120% 140% at 12% -10%,color-mix(in srgb,#7BE0C6 65%,transparent),transparent 58%),
    radial-gradient(120% 120% at 100% 8%,color-mix(in srgb,#E6B873 30%,transparent),transparent 55%),
    radial-gradient(140% 90% at 50% 122%,rgba(3,3,7,.72),transparent 60%),
    linear-gradient(155deg,#0f4438,#06050a 124%)}
.ai-spotlight__art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  mix-blend-mode:overlay;background-image:linear-gradient(78deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%),var(--noise-svg);
  background-repeat:no-repeat,repeat;background-size:300% 300%,170px 170px;background-position:-100% -100%,0 0}
@media(prefers-reduced-motion:no-preference){.ai-spotlight__art::before{animation:phShimmer 8s ease-in-out infinite}}
.ai-spotlight__rec{position:absolute;z-index:2;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.24);padding:3px 10px 3px 8px;border-radius:var(--r-pill)}
.ai-spotlight__rec i{width:6px;height:6px;border-radius:50%;background:var(--crimson);display:block}
@media(prefers-reduced-motion:no-preference){.ai-spotlight__rec i{animation:aiPulse 1.3s ease-in-out infinite}}
.ai-spotlight__playtag{position:absolute;z-index:2;left:14px;bottom:14px;font-size:11.5px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.24);padding:4px 12px;border-radius:var(--r-pill)}
.ai-spotlight__body{padding:clamp(24px,4vw,42px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.ai-spotlight__k{font-family:var(--font-latin);font-style:italic;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--m-ai)}
.ai-spotlight__body h3{font-family:var(--font-serif);font-weight:900;font-size:clamp(24px,3vw,32px);color:var(--title);margin:0}
.ai-spotlight__body h3 em{font-style:italic;color:var(--m-ai)}
.ai-spotlight__body p{font-size:14px;line-height:1.75;color:var(--ink-2);margin:0;max-width:480px}
.ai-spotlight__stats{display:flex;gap:20px;flex-wrap:wrap;margin:2px 0 6px}
.ai-spotlight__stats .ai-stat{background:rgba(123,224,198,.08);border-color:rgba(123,224,198,.24)}
.ai-spotlight__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}

/* ===== category bars ===== */
.ai-catbar{display:flex;align-items:center;gap:11px;padding:0 clamp(16px,5vw,72px);margin:clamp(22px,3.4vw,38px) 0 14px}
.ai-catbar .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  color:var(--cat,#FF3B5C);background:color-mix(in srgb,var(--cat,#FF3B5C) 16%,transparent)}
.ai-catbar .ic svg{width:19px;height:19px}
.ai-catbar h3{font-family:var(--font-serif);font-weight:800;font-size:clamp(18px,2.2vw,23px);color:var(--title);line-height:1;margin:0}
.ai-catbar .en{font-family:var(--font-latin);font-style:italic;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ai-catbar .line{flex:1;height:1px;background:var(--hair);min-width:20px}
.ai-catbar--image{--cat:var(--cat-image)}
.ai-catbar--video{--cat:var(--cat-video)}
.ai-catbar--fx{--cat:var(--cat-fx)}
.ai-catbar--play{--cat:var(--cat-play)}

/* ===== tool grid + card (category-accent-driven, elevated placeholder art, coming-soon state) ===== */
.ai-grid{display:grid;gap:clamp(14px,1.6vw,22px);padding:0 clamp(16px,5vw,72px);grid-template-columns:repeat(1,1fr)}
@media(min-width:560px){.ai-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.ai-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.ai-grid{grid-template-columns:repeat(4,1fr)}}

.ai-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-s);cursor:pointer;width:100%;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med),border-color var(--dur-med)}
.ai-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--crimson) 42%,transparent);
  box-shadow:0 30px 70px -38px rgba(255,59,92,.72),0 0 0 1px rgba(255,255,255,.04)}
.ai-card:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

/* shared elevated placeholder-art recipe: mesh gradient (category-derived) + grain + shimmer + vignette */
.ai-card__cover,.ai-shot,.ai-hist-card__cover,.ai-resultgrid__item,.ai-feed-card__cover{
  background:
    radial-gradient(115% 140% at 14% -10%,color-mix(in srgb,var(--cat,#FF3B5C) 68%,transparent),transparent 58%),
    radial-gradient(115% 115% at 100% 6%,color-mix(in srgb,var(--cat,#FF3B5C) 30%,white 16%),transparent 52%),
    radial-gradient(140% 90% at 50% 122%,rgba(3,3,7,.72),transparent 60%),
    linear-gradient(155deg,color-mix(in srgb,var(--cat,#FF3B5C) 42%,#06050a 58%),#06050a 124%)}
.ai-card__cover{position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate}
.ai-card__cover.has-uaa-media{background:#0C0C10}
.ai-card__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.01);transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow)}
.ai-card:hover .ai-card__media{transform:scale(1.07);filter:saturate(1.08) contrast(1.04)}
.ai-card__cover::before,.ai-shot::before,.ai-hist-card__cover::before,.ai-resultgrid__item::before,
.ai-selected__cover::before,.ai-tmpl-card::before,.ai-sample__imgs span::before,
.ai-compare__before::before,.ai-compare__after::before,.ai-videopanel::before,.ai-demo-trio__cell::before,
.ai-spotlight__art::before,.ai-feed-card__cover::before,.ai-style__swatch::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:linear-gradient(78deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%),var(--noise-svg);
  background-repeat:no-repeat,repeat;background-size:300% 300%,170px 170px;background-position:-100% -100%,0 0}
.ai-card__cover.has-uaa-media::before{opacity:.14;mix-blend-mode:soft-light}
@keyframes phShimmer{0%,15%{background-position:-100% -100%,0 0}60%,100%{background-position:200% 200%,0 0}}
@media(prefers-reduced-motion:no-preference){
  .ai-card__cover:not(.has-uaa-media)::before,.ai-shot:not(.has-uaa-media)::before,.ai-hist-card__cover::before,
  .ai-resultgrid__item::before,.ai-selected__cover::before,.ai-tmpl-card::before,.ai-sample__imgs span::before,
  .ai-compare__before::before,.ai-compare__after::before,.ai-videopanel::before,.ai-demo-trio__cell::before,
  .ai-spotlight__art::before,.ai-feed-card__cover::before,.ai-style__swatch::before{animation:phShimmer 7.5s ease-in-out infinite}
}
.ai-card__cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background:radial-gradient(120% 120% at 80% 8%,rgba(255,255,255,.24),transparent 55%),
             radial-gradient(130% 65% at 50% 128%,transparent 40%,rgba(3,3,7,.6) 100%)}
.ai-card__cover.has-uaa-media::after{opacity:.82;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.52)),
             radial-gradient(120% 120% at 80% 10%,rgba(255,255,255,.18),transparent 55%)}
.ai-card__ic{position:absolute;z-index:2;left:16px;top:14px;width:48px;height:48px;border-radius:13px;
  display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);transition:transform var(--dur-med),box-shadow var(--dur-med),opacity var(--dur-fast)}
.ai-card__ic svg{width:25px;height:25px}
.ai-card:hover .ai-card__ic{transform:scale(1.06) rotate(-3deg)}
.ai-card__cat{position:absolute;z-index:2;right:12px;top:14px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.26)}
.ai-card__en{position:absolute;z-index:2;left:18px;bottom:13px;font-family:var(--font-latin);font-style:italic;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.ai-card__body{padding:17px 18px 19px;display:flex;flex-direction:column;gap:7px;flex:1}
.ai-card__name{font-family:var(--font-serif);font-weight:800;font-size:18px;color:var(--ink);line-height:1.25;transition:color var(--dur-fast)}
.ai-card:hover .ai-card__name{color:var(--crimson)}
.ai-card__desc{font-size:13px;line-height:1.6;color:var(--ink-3);flex:1;margin:0}
.ai-card__go{margin-top:6px;align-self:flex-start}
.ai-card:hover .ai-card__go{transform:none}
.ai-card:hover .ai-card__go svg{transform:translateX(3px)}

/* coming-soon state: honest, deliberately muted, no false affordance */
.ai-card.is-soon{cursor:not-allowed}
.ai-card.is-soon:hover{transform:none;border-color:rgba(255,255,255,.10);box-shadow:var(--shadow-s)}
.ai-card.is-soon .ai-card__cover{filter:grayscale(.55) brightness(.66) saturate(.65)}
.ai-card.is-soon:hover .ai-card__media{transform:scale(1.01);filter:none}
.ai-card.is-soon .ai-card__ic{opacity:.5}
.ai-card.is-soon:hover .ai-card__ic{transform:none}
.ai-card.is-soon .ai-card__cat{opacity:.65}
.ai-card.is-soon .ai-card__name{color:var(--ink-2)}
.ai-card.is-soon:hover .ai-card__name{color:var(--ink-2)}
.ai-card__go--soon{color:var(--ink-3)!important;background:var(--fill-2)!important;border-color:var(--line)!important;cursor:not-allowed}
.ai-card.is-soon:hover .ai-card__go--soon{background:var(--fill-2);color:var(--ink-3)}
.ai-card__go--soon svg{width:13px;height:13px}
.ai-card:disabled{cursor:not-allowed}

/* ===== trending gallery ===== */
.ai-gallery{display:grid;gap:clamp(12px,1.4vw,18px);padding:0 clamp(16px,5vw,72px) 10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.ai-gallery{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ai-gallery{grid-template-columns:repeat(5,1fr)}}
.ai-shot{position:relative;display:block;aspect-ratio:3/4;border-radius:15px;overflow:hidden;cursor:pointer;isolation:isolate;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med);border:1px solid rgba(255,255,255,.10)}
.ai-shot.has-uaa-media{background:#0C0C10}
.ai-shot__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.01);transition:transform var(--dur-med) var(--ease-out),filter var(--dur-med)}
.ai-shot:hover .ai-shot__media{transform:scale(1.08);filter:saturate(1.08) contrast(1.04)}
.ai-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(8,8,12,.9));z-index:1}
.ai-shot:hover{transform:translateY(-7px) scale(1.025);z-index:2;box-shadow:0 28px 60px -34px rgba(255,59,92,.72)}
.ai-shot:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.ai-shot__cap{position:absolute;z-index:2;left:11px;right:11px;bottom:11px}
.ai-shot__cap .t{font-family:var(--font-serif);font-weight:700;font-size:13px;color:#fff;line-height:1.3}
.ai-shot__cap .m{margin-top:4px;font-size:10.5px;color:rgba(255,255,255,.7);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ai-shot__cap .m .heat{color:var(--gold);font-family:var(--font-latin);font-weight:700}
.ai-shot__cap .m .dot{opacity:.5}
.ai-shot__tool{position:absolute;z-index:2;left:10px;top:10px;padding:2px 8px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18)}

/* ===== bottom CTA band ===== */
.ai-bottom{margin:clamp(34px,5vw,60px) clamp(16px,5vw,72px) 10px;position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(120deg,#17131c,#0E0D14);border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-m);
  padding:clamp(30px,5vw,54px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ai-bottom::after{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,59,92,.24),transparent 65%);pointer-events:none}
.ai-bottom__k{font-family:var(--font-latin);font-style:italic;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--crimson)}
.ai-bottom h3{font-family:var(--font-serif);font-weight:900;font-size:clamp(26px,4vw,42px);color:var(--title);line-height:1.05;margin:0}
.ai-bottom p{max-width:560px;font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0}

/* ===== footer: category-mapped nav + honest "soon" entries (local override, additive-safe) ===== */
.cn-foot__cols{grid-template-columns:repeat(7,minmax(84px,auto))}
@media(max-width:1180px){.cn-foot__cols{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.cn-foot__cols{grid-template-columns:repeat(2,1fr)}}
.cn-foot__col .soon{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);opacity:.55;padding:4px 0;cursor:default}
.cn-foot__col .soon i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.02em;color:var(--ink-3);
  background:var(--fill-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;flex-shrink:0}

/* ===== tool flow pages: face-image / takeoff / digitalman / text2picture / history ===== */
.ai-toolmain{padding-top:clamp(84px,11vw,104px);padding-bottom:clamp(40px,6vw,64px)}
.ai-crumb{display:inline-flex;align-items:center;gap:6px;margin:0 clamp(16px,5vw,72px) 16px;font-size:13px;font-weight:700;color:var(--ink-3);transition:color var(--dur-fast)}
.ai-crumb:hover{color:var(--crimson)}
.ai-crumb:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:4px}

.ai-toolwrap{padding:0 clamp(16px,5vw,72px);max-width:860px}
.ai-flow{display:flex;flex-direction:column;gap:26px;margin-top:6px}
.ai-flow h4{font-family:var(--font-serif);font-weight:800;font-size:15px;color:var(--title);margin:0 0 2px}
.ai-flow__label{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:2px;display:block}
.ai-flow__hint{font-size:12px;color:var(--ink-3);margin:2px 0 0}

.ai-link-arrow{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--crimson);transition:gap var(--dur-fast)}
.ai-link-arrow:hover{gap:9px}
.ai-link-arrow:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:4px}
.ai-tool-foot{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin:22px clamp(16px,5vw,72px) 0}

/* pill / chip rows (category filters, resolution, ratio choices) */
.ai-pillrow{display:flex;flex-wrap:wrap;gap:9px}
.ai-pill{display:inline-flex;height:34px;padding:0 16px;align-items:center;justify-content:center;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none;
  background:var(--fill-1);border:1px solid var(--line);transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);
  font-family:inherit;white-space:nowrap}
.ai-pill:hover{border-color:var(--line-2);color:var(--ink)}
.ai-pill:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-pill.is-on{background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;border-color:transparent;box-shadow:var(--shadow-primary)}
.ai-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;margin-top:1px}

/* template gallery grid (face-image) */
.ai-tmpl-grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.ai-tmpl-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.ai-tmpl-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.ai-tmpl-grid{grid-template-columns:repeat(6,1fr)}}
.ai-tmpl-card{position:relative;display:block;aspect-ratio:2/3;border-radius:14px;overflow:hidden;cursor:pointer;isolation:isolate;
  --cat:var(--cat-fx);filter:hue-rotate(var(--hue,0deg));
  background:
    radial-gradient(115% 140% at 14% -10%,color-mix(in srgb,var(--cat) 68%,transparent),transparent 58%),
    radial-gradient(115% 115% at 100% 6%,color-mix(in srgb,var(--cat) 30%,white 16%),transparent 52%),
    linear-gradient(155deg,color-mix(in srgb,var(--cat) 42%,#06050a 58%),#06050a 124%);
  box-shadow:var(--shadow-s);
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med)}
.ai-tmpl-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.ai-tmpl-card:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.ai-tmpl-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 50%,rgba(8,8,12,.82))}
.ai-tmpl-card__tag{position:absolute;z-index:2;left:9px;top:9px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.22)}
.ai-tmpl-card__cap{position:absolute;z-index:2;left:11px;bottom:10px;font-family:var(--font-serif);font-weight:700;font-size:13px;color:#fff}
.ai-tmpl-card--01{--hue:0deg}
.ai-tmpl-card--02{--hue:28deg}
.ai-tmpl-card--03{--hue:56deg}
.ai-tmpl-card--04{--hue:84deg}
.ai-tmpl-card--05{--hue:112deg}
.ai-tmpl-card--06{--hue:140deg}
.ai-tmpl-card--07{--hue:168deg}
.ai-tmpl-card--08{--hue:196deg}
.ai-tmpl-card--09{--hue:224deg}
.ai-tmpl-card--10{--hue:252deg}
.ai-tmpl-card--11{--hue:280deg}
.ai-tmpl-card--12{--hue:308deg}
.ai-tmpl-card--13{--hue:336deg}

/* selected-template preview block (template.html) */
.ai-selected{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:16px;border-radius:16px;background:var(--fill-1);border:1px solid var(--line)}
.ai-selected__cover{position:relative;width:110px;flex-shrink:0;aspect-ratio:2/3;border-radius:12px;overflow:hidden;isolation:isolate;
  --cat:var(--cat-fx);filter:hue-rotate(var(--hue,0deg));
  background:
    radial-gradient(115% 140% at 14% -10%,color-mix(in srgb,var(--cat) 68%,transparent),transparent 58%),
    linear-gradient(155deg,color-mix(in srgb,var(--cat) 42%,#06050a 58%),#06050a 124%);
  box-shadow:var(--shadow-s)}
.ai-selected__meta{display:flex;flex-direction:column;gap:6px}
.ai-selected__meta h3{font-family:var(--font-serif);font-weight:800;font-size:18px;color:var(--title);margin:0}
.ai-selected__meta p{font-size:12.5px;color:var(--ink-3);margin:0}

/* upload dropzone */
.ai-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:168px;
  border:1.5px dashed var(--line-2);border-radius:16px;background:var(--fill-1);cursor:pointer;text-align:center;
  padding:22px;transition:border-color var(--dur-fast),background var(--dur-fast)}
.ai-toolmain [hidden]{display:none!important}
.ai-upload:hover,.ai-upload:focus-visible{border-color:var(--crimson);background:var(--crimson-soft)}
.ai-upload:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-upload__ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--crimson-soft);color:var(--crimson)}
.ai-upload__ic svg{width:22px;height:22px}
.ai-upload__t{font-size:14px;font-weight:700;color:var(--ink)}
.ai-upload__s{font-size:12px;color:var(--ink-3)}
.ai-upload.is-filled{border-style:solid;border-color:var(--line);background:var(--surface);flex-direction:row;
  justify-content:flex-start;text-align:left;gap:14px;padding:14px 16px;cursor:default}
/* 选中文件后这里放真图缩略图(ai-product-shell.js 注入 .ai-upload__thumb)；
   渐变底色保留，作为图片解码前/读不出来时的兜底 */
.ai-upload__swatch{position:relative;overflow:hidden;width:64px;height:64px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--cat,#FF3B5C),#06050a)}
.ai-upload__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.ai-upload__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai-upload__name{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.ai-upload__status{font-size:11.5px;color:var(--ink-3)}
.ai-upload__remove{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--fill-2);border:1px solid var(--line);color:var(--ink-3);transition:color var(--dur-fast),border-color var(--dur-fast)}
.ai-upload__remove:hover{color:var(--crimson);border-color:var(--crimson)}
.ai-upload__remove:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}

/* audio upload (digitalman) */
.ai-audio{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--fill-1);border:1px solid var(--line);flex-wrap:wrap}
.ai-audio__btn{gap:7px;flex-shrink:0}
.ai-audio__wave{display:flex;align-items:flex-end;gap:2px;height:24px}
.ai-audio__wave span{display:block;width:3px;border-radius:2px;background:var(--gold);opacity:.85}
.ai-audio__dur{font-size:13px;font-weight:700;color:var(--ink-2);font-family:var(--font-latin)}
.ai-audio__empty{font-size:12.5px;color:var(--ink-3)}

/* price / balance row */
/* 列数跟着条目数走，不写死 3 列：视频类页面多一格「视频时长」，写死 3 列时第 4 格(U币充值)会掉到第二行 */
.ai-price-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--fill-1);font-size:13.5px;color:var(--ink-2)}
.ai-price-row__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:72px;padding:12px 14px;text-align:center}
.ai-price-row__item+.ai-price-row__item{border-left:1px solid var(--line)}
.ai-price-row__label{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-3);line-height:1.2;white-space:nowrap}
.ai-price-row__value,.ai-price-row__balance{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap}
.ai-price-row b{color:var(--gold);font-weight:800;font-family:var(--font-latin)}
.ai-price-row__value b{color:var(--crimson)}
/* 预计费用：金额一行、「单价 × 秒数」的算式另起一行。挤在一行时窄格子放不下，
   而 .ai-price-row__value 是 nowrap，放不下不会自动折行，只会被裁掉。 */
.ai-price-row__cost{display:flex;flex-direction:column;align-items:center;gap:1px}
.ai-price-row__calc{color:var(--ink-3);font-size:11px;font-weight:600;letter-spacing:0}
.ai-price-row__value--balance b{color:var(--gold)}
/* 窄屏下这一格会被压得很窄，nowrap 防止「充值」两个字被拆成上下两行 */
.ai-price-row__balance a,.ai-price-row__recharge{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border-radius:6px;background:var(--crimson);color:#fff;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;transition:filter var(--dur-fast),transform var(--dur-fast)}
.ai-price-row__balance a:hover,.ai-price-row__recharge:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ai-price-row a:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-radius:4px}

/* generating progress state */
.ai-progress{display:none;flex-direction:column;align-items:center;gap:14px;padding:34px 20px;text-align:center}
.ai-progress.show{display:flex}
.ai-progress__bar{position:relative;width:100%;max-width:340px;height:6px;border-radius:6px;background:var(--fill-2);overflow:hidden}
.ai-progress__bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:6px;
  background:linear-gradient(135deg,#FF3B5C,#E6B873)}
@media(prefers-reduced-motion:no-preference){.ai-progress__bar::after{animation:aiProgress 1.15s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.ai-progress__bar::after{width:70%}}
@keyframes aiProgress{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
.ai-progress__label{font-size:13.5px;font-weight:700;color:var(--ink-2)}

/* before/after compare slider */
.ai-compare{display:none}
.ai-compare.show{display:block}
.ai-result{margin-top:2px}
.ai-compare__frame{position:relative;aspect-ratio:4/3;max-width:560px;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-m);user-select:none;touch-action:none;background:var(--surface)}
.ai-compare__before,.ai-compare__after{position:absolute;inset:0;isolation:isolate;
  background:linear-gradient(150deg,var(--b1,#5a5a66),var(--b2,#1a1a22))}
.ai-compare__after{--cat:var(--cat-fx);filter:hue-rotate(var(--hue,0deg));
  background:
    radial-gradient(115% 140% at 14% -10%,color-mix(in srgb,var(--a1,var(--cat)) 62%,transparent),transparent 58%),
    linear-gradient(150deg,var(--a1,var(--cat)),var(--a2,#1a0d14));
  clip-path:inset(0 0 0 50%)}
.ai-compare__divider{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-50%);cursor:ew-resize;z-index:3}
.ai-compare__divider::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.4)}
.ai-compare__handle{position:absolute;top:50%;left:50%;width:38px;height:38px;border-radius:50%;background:#fff;
  display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 4px 16px rgba(0,0,0,.45);color:#1a0d14}
.ai-compare__handle svg{width:18px;height:18px}
.ai-compare__divider:focus-visible .ai-compare__handle{outline:2px solid var(--crimson);outline-offset:2px}
.ai-compare__label{position:absolute;z-index:2;top:10px;padding:4px 11px;border-radius:var(--r-pill);font-size:11px;
  font-weight:800;letter-spacing:.03em;color:#fff;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.24)}
.ai-compare__label--before{left:10px}
.ai-compare__label--after{right:10px}
.ai-result-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* notes checklist */
.ai-notes{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:14px;background:var(--fill-1);border:1px solid var(--line)}
.ai-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ai-notes li{display:flex;gap:9px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.ai-notes li::before{content:"";flex-shrink:0;margin-top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* sample / inspiration gallery */
.ai-samples-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.ai-samples-grid{grid-template-columns:repeat(3,1fr)}}
.ai-sample{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line);background:var(--surface)}
.ai-sample__imgs{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/10}
.ai-sample__imgs span{position:relative;display:block;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--g1),var(--g2))}
.ai-sample__cap{padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-sample__cap b{font-size:12px;font-weight:700;color:var(--ink)}

/* simple modal / lightbox for sample compare */
.ai-modal{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:24px}
.ai-modal.open{display:flex}
.ai-modal__veil{position:absolute;inset:0;background:rgba(8,8,12,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ai-modal__panel{position:relative;z-index:2;max-width:560px;width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px;box-shadow:var(--shadow-m)}
.ai-modal__panel h4{margin:0 0 12px;font-family:var(--font-serif);font-weight:800;font-size:15px;color:var(--title)}
.ai-modal__close{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--fill-2);
  border:1px solid var(--line);color:var(--ink-2);display:grid;place-items:center;transition:color var(--dur-fast),border-color var(--dur-fast)}
.ai-modal__close:hover{color:var(--crimson);border-color:var(--crimson)}
.ai-modal__close:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}

/* prompt textarea + counter (text2picture) */
.ai-textarea{width:100%;min-height:150px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);padding:16px 18px;font-size:14px;line-height:1.7;font-family:inherit;resize:vertical}
.ai-textarea:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-color:var(--crimson)}
.ai-textcount{display:flex;justify-content:flex-end;font-size:12px;color:var(--ink-3);margin-top:6px}
.ai-textcount.is-max{color:var(--crimson);font-weight:700}

/* prompt formula tutorial */
.ai-formula{padding:16px 18px;border-radius:14px;background:var(--crimson-soft);border:1px solid rgba(255,59,92,.28)}
.ai-formula__eq{font-family:var(--font-serif);font-weight:800;font-size:15px;color:var(--title);margin-bottom:10px}
.ai-formula__eq b{color:var(--crimson)}
.ai-formula dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:0;font-size:12.5px;color:var(--ink-2)}
.ai-formula dt{font-weight:800;color:var(--gold);white-space:nowrap}
.ai-formula dd{margin:0}

/* 2x2 result variations grid (text2picture) */
.ai-resultgrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);max-width:560px}
.ai-resultgrid__item{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s);isolation:isolate;
  filter:hue-rotate(var(--hue,0deg))}
.ai-resultgrid__dl{position:absolute;z-index:2;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;transition:background var(--dur-fast)}
.ai-resultgrid__dl:hover{background:var(--crimson)}
.ai-resultgrid__dl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ai-resultgrid__dl svg{width:15px;height:15px}

/* digitalman video result panel + broadcast metadata + demo trio */
.ai-videopanel{position:relative;aspect-ratio:16/9;max-width:560px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-m);isolation:isolate;
  background:
    radial-gradient(120% 140% at 12% -10%,color-mix(in srgb,#7BE0C6 60%,transparent),transparent 58%),
    linear-gradient(135deg,#134438,#06050a 130%)}
.ai-videopanel::after{content:"";position:absolute;inset:0;z-index:1;opacity:.55;
  background:radial-gradient(130% 65% at 50% 128%,transparent 40%,rgba(3,3,7,.62) 100%)}
.ai-videopanel__rec{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#fff;background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.24);padding:3px 10px 3px 8px;border-radius:var(--r-pill)}
.ai-videopanel__rec i{width:6px;height:6px;border-radius:50%;background:var(--crimson);display:block}
@media(prefers-reduced-motion:no-preference){.ai-videopanel__rec i{animation:aiPulse 1.3s ease-in-out infinite}}
.ai-videopanel__play{position:absolute;z-index:2;top:50%;left:50%;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;transform:translate(-50%,-50%);
  box-shadow:0 8px 30px rgba(0,0,0,.4);color:#155244}
.ai-videopanel__play svg{width:24px;height:24px;margin-left:3px}
.ai-videopanel__tag{position:absolute;z-index:2;left:12px;bottom:12px;font-size:11.5px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.24);padding:3px 10px;border-radius:var(--r-pill)}
.ai-videopanel__tc{position:absolute;z-index:2;right:12px;bottom:12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.85);
  font-family:var(--font-latin);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);padding:3px 9px;border-radius:var(--r-pill)}
.ai-video-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--ink-3)}
.ai-video-meta b{color:var(--ink-2);font-family:var(--font-latin);font-weight:800}
.ai-demo-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:560px;margin-top:16px}
.ai-demo-trio figure{margin:0;display:flex;flex-direction:column;gap:6px}
.ai-demo-trio__cell{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--g1),var(--g2))}
.ai-demo-trio figcaption{font-size:11px;color:var(--ink-3);text-align:center}
.ai-demo-wave{display:flex;align-items:center;justify-content:center;gap:2px;height:100%;padding:0 10px}
.ai-demo-wave span{display:block;width:3px;border-radius:2px;background:rgba(255,255,255,.85)}

/* ===== unified history page ===== */
html:has(body.ai-history-page){overflow-x:clip}
.ai-hist-note{font-size:12px;color:var(--ink-3)}
.ai-history-page .ai-toolmain{padding-top:clamp(40px,5vw,58px)}
.ai-history-head{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:14px;margin:0 clamp(16px,5vw,72px) 18px}
.ai-history-head .ai-secthead{margin:0;padding:2px 0 0}
.ai-history-back{display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--fill-1);color:var(--ink-2);box-shadow:var(--shadow-s);transition:color var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ai-history-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ai-history-back:hover{color:#fff;background:var(--crimson);border-color:var(--crimson);box-shadow:0 0 26px -6px var(--crimson)}
.ai-history-back:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.ai-hist-filters{display:grid;gap:0;overflow:hidden;margin:0 clamp(16px,5vw,72px) 4px;padding:16px 20px 12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-s)}
.ai-hist-filters__grp{display:flex;align-items:center;gap:14px;min-width:0;padding:10px 0}
.ai-hist-filters__grp+.ai-hist-filters__grp{border-top:1px dashed color-mix(in srgb,var(--line) 60%,transparent)}
.ai-hist-filters__lbl{flex:0 0 64px;font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--ink-3);line-height:32px;white-space:nowrap}
.ai-hist-filters .ai-pillrow{flex:1;min-width:0;gap:7px}

.ai-hist-selectbar{display:flex;align-items:center;padding:0 clamp(16px,5vw,72px);margin-bottom:14px;font-size:13px;color:var(--ink-2)}
.ai-hist-selectbar--summary{justify-content:flex-start;margin-top:10px}
.ai-hist-count{color:var(--ink-3);font-weight:400}
/* 空态占位(.ai-empty 本体在 cine.css)：生成记录页的 <main> 不带左右内边距，
   卡片列 .ai-hist-grid 是自己 padding 出来的，占位块得照抄同一个缩进才能对齐 */
.ai-history-page .ai-empty{margin:0 clamp(16px,5vw,72px)}
@media(max-width:640px){.ai-history-page .ai-empty{margin:0 16px}}
@media(max-width:640px){
  .ai-history-page .ai-toolmain{padding-top:26px}
  .ai-history-head{grid-template-columns:40px minmax(0,1fr);gap:12px;margin:0 16px 14px}
  .ai-history-back{width:40px;height:40px}
  .ai-history-head .ai-secthead{padding-top:2px}
  .ai-history-head .ai-secthead h2{font-size:23px}
  .ai-history-head .ai-secthead p{margin-top:3px;font-size:12.5px}
  .ai-hist-filters{margin:0 10px 2px;padding:12px 12px 8px;border-radius:14px}
  .ai-hist-filters__grp{align-items:flex-start;gap:10px;padding:8px 0}
  .ai-hist-filters__lbl{flex-basis:64px;font-size:12px}
  .ai-hist-filters .ai-pillrow{flex-wrap:wrap;overflow:visible;gap:6px}
  .ai-hist-filters #statusPills{flex-wrap:nowrap;gap:4px}
  .ai-hist-filters #statusPills .ai-pill{flex:1 1 0;min-width:0;padding:0 6px;font-size:11.5px}
  .ai-hist-selectbar{padding:0 16px;margin-top:10px;margin-bottom:12px}
}

.ai-hist-grid{display:grid;gap:18px;padding:0 clamp(16px,5vw,72px)}
@media(min-width:640px){.ai-hist-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.ai-hist-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.ai-hist-grid{grid-template-columns:repeat(4,1fr)}}
.ai-hist-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-s);transition:transform var(--dur-med),box-shadow var(--dur-med)}
.ai-hist-card:hover{transform:translateY(-4px)}
.ai-hist-card.is-hidden{display:none}
.ai-hist-card__cover{position:relative;aspect-ratio:4/3;isolation:isolate;overflow:hidden;cursor:pointer}
.ai-hist-card__cover:focus-visible{outline:2px solid var(--crimson);outline-offset:-2px}
.ai-hist-card__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ai-hist-card__badge{position:absolute;z-index:3;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-pill);font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1.5;
  white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none}
.ai-hist-card__badge svg{width:11px;height:11px}
.ai-hist-card__badge--done{background:rgba(230,184,115,.94);color:#1a1a22;border:0}
.ai-hist-card__badge--run{background:rgba(255,59,92,.92);color:#fff;border:0;box-shadow:0 4px 14px -4px rgba(255,59,92,.7)}
.ai-hist-card__badge--run .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
@media(prefers-reduced-motion:no-preference){.ai-hist-card__badge--run .dot{animation:aiPulse 1.3s ease-in-out infinite}}
@keyframes aiPulse{0%,100%{opacity:1}50%{opacity:.25}}
.ai-hist-card__badge--fail{background:rgba(110,28,42,.88);color:#fff;border:1px solid rgba(255,99,119,.42)}
.ai-hist-card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.ai-hist-card__tool{font-size:13.5px;font-weight:800;color:var(--ink);font-family:var(--font-serif)}
.ai-hist-card__time{font-size:11.5px;color:var(--ink-3)}
.ai-hist-card__actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ai-hist-card__actions button,.ai-hist-card__actions a{display:inline-flex;height:28px;align-items:center;justify-content:center;padding:0 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;
  color:var(--ink-2);background:var(--fill-1);border:1px solid var(--line);transition:border-color var(--dur-fast),color var(--dur-fast);font-family:inherit;line-height:1;text-decoration:none}
.ai-hist-card__actions button:hover,.ai-hist-card__actions a:hover{border-color:var(--crimson);color:var(--crimson)}
.ai-hist-card__actions button:focus-visible,.ai-hist-card__actions a:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
/* 「显示提示词」不做强调色：它和查看/下载/删除是同一档次的次要操作，一排按钮里只有它是红的反而像警示。
   样式一律走上面 .ai-hist-card__actions button 的通用规则，别再单独给它上色。 */
.ai-hist-card__actions .hist-next{border-color:color-mix(in srgb,var(--crimson) 44%,var(--line));background:var(--crimson-soft);color:var(--crimson)}
.ai-hist-card__actions .is-unavailable{opacity:.48;cursor:not-allowed}

.ai-hist-viewer{position:fixed;z-index:calc(var(--z-modal,900) + 2);inset:0;display:none;padding:clamp(16px,4vw,48px);align-items:center;justify-content:center}
.ai-hist-viewer.is-open{display:flex}
.ai-hist-viewer__veil{position:absolute;inset:0;background:rgba(7,7,10,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ai-hist-viewer__panel{position:relative;z-index:1;width:min(100%,940px);max-height:calc(100vh - 32px);overflow:auto;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-m)}
.ai-hist-viewer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:0 16px;border-bottom:1px solid var(--line)}
.ai-hist-viewer__head strong{min-width:0;overflow:hidden;color:var(--title);font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.ai-hist-viewer__close{display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--fill-1);color:var(--ink-2);font:inherit;font-size:20px;line-height:1;transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.ai-hist-viewer__close:hover{border-color:var(--crimson);background:var(--crimson-soft);color:var(--crimson)}
.ai-hist-viewer__stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:min(62vh,620px);background:var(--surface-2)}
.ai-hist-viewer__stage.is-single{grid-template-columns:minmax(0,1fr)}
/* 提示词模式：弹窗按文字收窄。940 是给「原图/结果」双图对照留的宽度，纯文字用那个宽度，
   一句话的提示词会摊成孤零零的一长条，长提示词每行也四五十个字，读起来要来回甩头。
   :has() 是因为 is-prompt 挂在 stage 上、要改的却是它的父级 panel（openPrompt/openViewer 自己切这个类）。 */
.ai-hist-viewer__panel:has(.ai-hist-viewer__stage.is-prompt){width:min(100%,560px)}
/* 正文不再套一层边框+底色的盒子：那是文本框的长相，会让人以为提示词可以在这儿编辑。
   背景也跟 panel 拉平，整个弹窗就是「标题栏 + 正文」一块面。 */
.ai-hist-viewer__stage.is-prompt{min-height:0;padding:20px;align-content:start;background:var(--surface)}
.ai-hist-viewer__prompt{margin:0;color:var(--ink);font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.ai-hist-viewer__pane{position:relative;min-width:0;min-height:300px;overflow:hidden;background:var(--uaa-product-fallback,#202024)}
.ai-hist-viewer__pane + .ai-hist-viewer__pane{border-left:1px solid var(--line)}
.ai-hist-viewer__label{position:absolute;z-index:2;top:12px;left:12px;padding:4px 9px;border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);background:rgba(20,20,23,.78);color:#fff;font-size:11px;font-weight:800;line-height:1.25;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ai-hist-viewer__media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#09090b}
.ai-hist-viewer__empty{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--ink-3);font-size:13px;text-align:center}
/* 确认弹窗：复用 .ai-hist-viewer 的遮罩/面板/头部，只把内容区换成一段文案 + 两个按钮。
   面板窄一档——里面就一句话，用查看结果那个 940px 的宽度会空得离谱。 */
.ai-hist-confirm .ai-hist-viewer__panel{width:min(100%,420px)}
.ai-hist-confirm__body{padding:20px 16px;color:var(--ink);font-size:14px;line-height:1.7}
.ai-hist-confirm__body p{margin:0}
.ai-hist-confirm__foot{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px}
.ai-hist-confirm__btn{min-width:76px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--fill-1);color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.ai-hist-confirm__btn:hover{border-color:var(--line-2);color:var(--ink)}
/* 确定键用主色实心：这两个动作(退款/删除)不可撤销，得让「确定」和「取消」一眼分得开 */
.ai-hist-confirm__btn--go{border-color:var(--crimson);background:var(--crimson);color:#fff}
.ai-hist-confirm__btn--go:hover{border-color:var(--crimson);background:var(--crimson);color:#fff;filter:brightness(1.08)}
@media(max-width:640px){
  .ai-hist-viewer{padding:12px}
  .ai-hist-viewer__panel{max-height:calc(100vh - 24px)}
  .ai-hist-viewer__stage{min-height:0;grid-template-columns:minmax(0,1fr)}
  .ai-hist-viewer__pane{min-height:calc((100vh - 140px) / 2)}
  .ai-hist-viewer__pane + .ai-hist-viewer__pane{border-top:1px solid var(--line);border-left:0}
}

.ai-hist-pager{display:flex;justify-content:center;gap:8px;padding:34px clamp(16px,5vw,72px) 10px}
.ai-hist-pager button{min-width:36px;height:36px;padding:0 10px;border-radius:10px;background:var(--fill-1);
  border:1px solid var(--line);color:var(--ink-2);font-size:13px;font-weight:700;font-family:inherit;transition:border-color var(--dur-fast),color var(--dur-fast)}
.ai-hist-pager button.is-on{background:var(--crimson);color:#fff;border-color:transparent}
.ai-hist-pager button:hover{border-color:var(--crimson);color:var(--crimson)}
.ai-hist-pager button:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:30px auto 8px;padding:0 16px}
.ai-pager a[data-ai-page]{min-width:42px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:var(--fill-1);color:var(--ink-2);font:700 13.5px/1 var(--font-latin);text-decoration:none;transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.ai-pager a[data-ai-page]:hover{border-color:var(--line-2);color:var(--ink)}
.ai-pager a[data-ai-page].on{color:#fff;background:var(--mc);border-color:var(--mc);box-shadow:0 0 12px -4px var(--mc)}
.ai-pager a[data-ai-page][aria-disabled="true"]{opacity:.35;pointer-events:none}
.ai-pager .gap{padding:0 2px;color:var(--ink-3);font-weight:700}
.ai-pager .cn-pager__info{font:12.5px/1 var(--font-latin);color:var(--ink-3)}

.ai-template-list .ai-tmpl-grid{grid-template-columns:minmax(0,1fr)}
.ai-paginated-list .ai-feed-grid{grid-template-columns:minmax(0,1fr)}
.ai-history-page .ai-hist-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:721px){
  .ai-template-list .ai-tmpl-grid,.ai-paginated-list .ai-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-history-page .ai-hist-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .ai-pager{gap:8px 10px;padding:0 8px}
  .ai-pager a[data-ai-page]{min-width:34px;height:38px;padding:0 8px;font-size:13px}
  .ai-pager .gap{padding:0 1px}
}
.ai-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);opacity:0;z-index:var(--z-toast);
  padding:10px 20px;border-radius:var(--r-pill);background:var(--bar-bg);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);box-shadow:var(--shadow-m);font-size:12.5px;font-weight:700;color:var(--ink);
  transition:transform var(--dur-med),opacity var(--dur-med);pointer-events:none}
.ai-toast.show{transform:translate(-50%,0);opacity:1}

/* =========================================================================================
   ADDITIONS — 9 remaining tools (pic2pic / stylized / change / text2video / pic2video /
   facevideo / dance / blindbox / writing-external). All additive, no renames above this line.
   ========================================================================================= */

/* ===== external-service treatment (AI 写作) — distinct from is-soon "coming soon" ===== */
.ai-card__go--ext{color:var(--gold)!important;background:rgba(230,184,115,.14)!important;border-color:rgba(230,184,115,.4)!important}
.ai-card__go--ext:hover{background:linear-gradient(135deg,#E6B873,#caa25c)!important;color:#1a140a!important}
.ai-card__go--ext svg{width:13px;height:13px}
.ai-card__extflag{position:absolute;z-index:2;right:12px;top:46px;display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--r-pill);font-size:10px;font-weight:800;letter-spacing:.04em;color:#1a140a;
  background:var(--gold);border:1px solid rgba(230,184,115,.6)}
.cn-foot__col a.ext{display:inline-flex;align-items:center;gap:6px}
.cn-foot__col a.ext i{font-style:normal;font-size:9px;font-weight:800;color:var(--gold);background:rgba(230,184,115,.14);
  border:1px solid rgba(230,184,115,.35);border-radius:4px;padding:1px 5px;transition:background var(--dur-fast),color var(--dur-fast)}
.cn-foot__col a.ext:hover i{color:#1a140a;background:var(--gold)}

/* ===== multi-image upload slots (pic2pic: up to N images + live counter) ===== */
.ai-upload-multi{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.ai-upload-slot{position:relative;width:104px;height:104px;border-radius:14px;border:1.5px dashed var(--line-2);
  background:var(--fill-1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;color:var(--ink-3);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast);
  flex-shrink:0;font-family:inherit}
.ai-upload-slot:hover,.ai-upload-slot:focus-visible{border-color:var(--crimson);background:var(--crimson-soft);color:var(--crimson)}
.ai-upload-slot:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-upload-slot svg{width:20px;height:20px}
.ai-upload-slot span{font-size:10.5px;font-weight:700}
.ai-upload-slot.is-filled{border-style:solid;border-color:var(--line);cursor:default;color:#fff;isolation:isolate;
  background:linear-gradient(150deg,var(--m1,#FF3B5C),var(--m2,#06050a))}
.ai-upload-slot.is-filled:hover{border-color:var(--line);background:linear-gradient(150deg,var(--m1,#FF3B5C),var(--m2,#06050a));color:#fff}
.ai-upload-slot__name{position:relative;z-index:1;font-size:10px;font-weight:700;padding:0 8px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:88px}
.ai-upload-slot__remove{position:absolute;z-index:2;right:5px;top:5px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:12px;line-height:1;border:1px solid rgba(255,255,255,.3)}
.ai-upload-slot__remove:focus-visible{outline:2px solid #fff;outline-offset:1px}
.ai-upload-counter{font-size:12px;font-weight:700;color:var(--ink-3)}

/* ===== confirm dialog (video 24h-retention warning, reuses .ai-modal shell) ===== */
.ai-confirm__body{font-size:13.5px;line-height:1.75;color:var(--ink-2);margin:0 0 20px}
.ai-confirm__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ===== cross-tool integration affordance (facevideo / dance template.html) ===== */
.ai-crosstool{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-radius:14px;
  background:rgba(123,224,198,.08);border:1px solid rgba(123,224,198,.28)}
.ai-crosstool__thumb{position:relative;width:56px;height:56px;border-radius:10px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(150deg,#C9A0FF,#3E2A66)}
.ai-crosstool__body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:9px}
.ai-crosstool__body p{margin:0;font-size:13px;line-height:1.65;color:var(--ink-2)}
.ai-crosstool__body p b{color:var(--m-ai);font-weight:800}
.ai-crosstool__actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== paginated results feed (stylized samples / facevideo + dance results) ===== */
.ai-feed-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.ai-feed-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.ai-feed-grid{grid-template-columns:repeat(4,1fr)}}
.ai-feed-card{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-s);transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med)}
.ai-feed-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.ai-feed-card.is-hidden{display:none}
.ai-feed-card__cover{position:relative;aspect-ratio:4/3;isolation:isolate;--cat:var(--cat-image);filter:hue-rotate(var(--hue,0deg));
  background:radial-gradient(115% 140% at 14% -10%,color-mix(in srgb,var(--cat) 62%,transparent),transparent 58%),
    linear-gradient(150deg,var(--cat),#06050a 120%)}
.ai-feed-card__cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(8,8,12,.82))}
.ai-feed-card__play{position:absolute;z-index:2;top:50%;left:50%;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;transform:translate(-50%,-50%);color:#1a0d14}
.ai-feed-card__play svg{width:14px;height:14px;margin-left:1px}
.ai-feed-card__meta{position:absolute;z-index:2;left:9px;bottom:8px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.85)}
.ai-feed-card__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.ai-feed-card__cap{font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:6px}
.ai-feed-card__time{font-size:10.5px;color:var(--ink-3);font-weight:600}
.ai-feed-card__actions{display:flex;gap:6px;flex-wrap:wrap}
.ai-feed-card__actions .ai-chip{height:29px;padding:0 12px;font-size:11px}
/* pagination reuses .ai-hist-pager (container + button states already defined above) */

/* ===== video-template card modifiers (facevideo / dance galleries: duration + play glyph) ===== */
.ai-tmpl-card__play{position:absolute;z-index:2;top:50%;left:50%;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;transform:translate(-50%,-50%);color:#1a0d14;
  transition:transform var(--dur-med)}
.ai-tmpl-card:hover .ai-tmpl-card__play{transform:translate(-50%,-50%) scale(1.08)}
.ai-tmpl-card__play svg{width:15px;height:15px;margin-left:1px}
.ai-tmpl-card__dur{position:absolute;z-index:2;right:9px;top:9px;font-size:10px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.22);padding:2px 8px;border-radius:var(--r-pill)}

/* ===== style grid (stylized: 21 style options, art-studio single-select swatches) ===== */
.ai-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.ai-style{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 6px 8px;border-radius:12px;
  background:var(--fill-1);border:1px solid var(--line);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);
  font-family:inherit}
.ai-style:hover{border-color:var(--line-2)}
.ai-style:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-style__swatch{position:relative;width:100%;aspect-ratio:1/1;border-radius:9px;overflow:hidden;isolation:isolate;
  --cat:var(--cat-image);filter:hue-rotate(var(--hue,0deg));
  background:radial-gradient(120% 130% at 20% -10%,color-mix(in srgb,var(--cat) 66%,transparent),transparent 60%),
    linear-gradient(150deg,color-mix(in srgb,var(--cat) 46%,#06050a 54%),#06050a 120%)}
.ai-style__ring{position:absolute;inset:0;z-index:2;border-radius:9px;box-shadow:inset 0 0 0 0 var(--crimson);transition:box-shadow var(--dur-fast)}
.ai-style__label{font-size:10.5px;font-weight:700;color:var(--ink-2);text-align:center;line-height:1.25}
.ai-style.is-on{border-color:var(--crimson);background:var(--crimson-soft)}
.ai-style.is-on .ai-style__label{color:var(--crimson)}
.ai-style.is-on .ai-style__ring{box-shadow:inset 0 0 0 2px var(--crimson)}

/* ===== material grid (blindbox: 22 base-material options, grouped by family) ===== */
.ai-material-groups{display:flex;flex-direction:column;gap:16px}
.ai-material-group__h{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase;margin:0 0 9px}
.ai-material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.ai-material{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 6px 8px;border-radius:12px;
  background:var(--fill-1);border:1px solid var(--line);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);
  font-family:inherit}
.ai-material:hover{border-color:var(--line-2)}
.ai-material:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.ai-material__swatch{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--m1),var(--m2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ai-material__label{font-size:10px;line-height:1.3;text-align:center;color:var(--ink-2);font-weight:600}
.ai-material.is-on{border-color:var(--crimson);background:var(--crimson-soft)}
.ai-material.is-on .ai-material__label{color:var(--crimson);font-weight:800}
.ai-material.is-on .ai-material__swatch{box-shadow:0 0 0 2px var(--crimson),inset 0 0 0 1px rgba(255,255,255,.2)}

/* ===== static example pair strip (blindbox: exactly 2 static examples, no gallery) ===== */
.ai-example-pair{display:flex;flex-direction:column}
.ai-example-pair h5{margin:0;padding:10px 11px 0;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.ai-example-pair .ai-sample__imgs{margin-top:8px}

/* =========================================================================================
   ADDITIONS — inline creation workspace (no page click-through): persistent panel mounted
   right after the hero, one tool's full flow injected on selection, grid/gallery become the
   tool switcher. All additive, no renames above this line.
   ========================================================================================= */

/* header/footer chrome removed site-wide: standalone pages no longer reserve space for the
   fixed .st-header bar (local override of the hero/tool-page top padding only) */
.ai-hero{padding-top:clamp(14px,2.4vw,26px)}
.ai-toolmain{padding-top:clamp(30px,4.5vw,46px)}

/* ===== workspace panel: the single mount point, category-tinted via [data-fam] ===== */
.ai-workspace{position:relative;overflow:hidden;isolation:isolate;margin:0 clamp(16px,5vw,72px) clamp(30px,5vw,54px);
  padding:clamp(22px,4vw,32px) clamp(18px,4vw,30px) clamp(28px,4.5vw,42px);border-radius:26px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m)}
.ai-workspace::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:radial-gradient(120% 100% at 10% -14%,color-mix(in srgb,var(--cat,var(--crimson)) 24%,transparent),transparent 60%)}
.ai-workspace__head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ai-workspace__kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--cat,var(--crimson));transition:color var(--dur-med)}
.ai-workspace__kicker i{font-style:italic;font-family:var(--font-latin);color:var(--ink-3);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ai-workspace__current{font-size:12px;color:var(--ink-3)}
.ai-workspace__current b{color:var(--ink);font-weight:800}
.ai-workspace #toolStage{position:relative;z-index:1}
.ai-workspace .ai-toolwrap{padding:0;max-width:none}
.ai-inline-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.01)}
.has-uaa-media .ai-inline-media + *{position:relative;z-index:2}
.ai-feed-card__cover.has-uaa-media,.ai-sample__imgs span.has-uaa-media,.ai-compare__before.has-uaa-media,.ai-compare__after.has-uaa-media,
.ai-resultgrid__item.has-uaa-media,.ai-style__swatch.has-uaa-media,.ai-upload-slot.has-uaa-media,.ai-videopanel.has-uaa-media{overflow:hidden}
.ai-feed-card__cover.has-uaa-media::after,.ai-resultgrid__item.has-uaa-media::after,.ai-videopanel.has-uaa-media::after{
  content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.52));pointer-events:none}

/* ===== grid card active state: the card currently mirrored in the workspace above ===== */
.ai-card.is-active{border-color:var(--cat,var(--crimson));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--cat,var(--crimson)) 60%,transparent),0 30px 70px -38px color-mix(in srgb,var(--cat,var(--crimson)) 65%,transparent)}
.ai-card.is-active .ai-card__go{color:var(--cat,var(--crimson));background:color-mix(in srgb,var(--cat,var(--crimson)) 16%,transparent);border-color:color-mix(in srgb,var(--cat,var(--crimson)) 40%,transparent)}

/* ===== template-picker cards promoted to real <button> selectors (no page navigation) ===== */
button.ai-tmpl-card{border:0;margin:0;font:inherit;-webkit-appearance:none;appearance:none}
.ai-tmpl-card.is-selected{outline:2px solid var(--crimson);outline-offset:2px;box-shadow:0 0 0 4px rgba(255,59,92,.16),var(--shadow-m)}

/* =========================================================================================
   UAA PRODUCT PAGE RESPONSIVE LAYER
   Terminal, product-scoped overrides only. Keep this layer last so hub/index/history retain
   their legacy presentation.
   ========================================================================================= */

/* Neutral product-local themes. The unscoped site tokens above remain unchanged. */
html[data-theme="dark"] .uaa-product-page{
  color-scheme:dark;
  --paper:#121214;--bg-2:#171719;--surface:#1c1c1f;--surface-2:#232327;--surface-3:#2a2a2f;
  --ink:#f2f2f3;--ink-2:#c4c4c8;--ink-3:#939399;--title:#ffffff;
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.16);--hair:rgba(255,255,255,.09);
  --fill-1:rgba(255,255,255,.05);--fill-2:rgba(255,255,255,.075);--fill-hover:rgba(255,255,255,.09);
  --bar-bg:rgba(24,24,27,.88);--mask:rgba(18,18,20,.78);--toast-bg:#252529;--toast-fg:#f2f2f3;
  --shadow-s:0 8px 24px -16px rgba(18,18,20,.68);--shadow-m:0 22px 52px -28px rgba(18,18,20,.82);
  --crimson-soft:rgba(255,59,92,.14);--uaa-product-fallback:#202024
}
html[data-theme="light"] .uaa-product-page{
  color-scheme:light;
  --paper:#f5f6f7;--bg-2:#eceef1;--surface:#ffffff;--surface-2:#f0f1f3;--surface-3:#e6e8eb;
  --ink:#1b1b1e;--ink-2:#505057;--ink-3:#777780;--title:#17171a;
  --line:rgba(24,24,27,.11);--line-2:rgba(24,24,27,.18);--hair:rgba(24,24,27,.10);
  --fill-1:rgba(24,24,27,.035);--fill-2:rgba(24,24,27,.055);--fill-hover:rgba(24,24,27,.075);
  --bar-bg:rgba(255,255,255,.90);--mask:rgba(35,35,39,.42);--toast-bg:#242428;--toast-fg:#f7f7f8;
  --shadow-s:0 8px 24px -16px rgba(45,45,52,.28);--shadow-m:0 22px 48px -28px rgba(45,45,52,.38);
  --crimson-soft:rgba(255,59,92,.10);--uaa-product-fallback:#eef0f2
}

.uaa-product-page{width:100%;min-height:100vh;overflow-x:hidden;overflow-x:clip;background:var(--paper);color:var(--ink)}
.uaa-product-page *{letter-spacing:0}

/* Sticky normal-flow product bar. */
.uaa-product-page .uaa-product-bar{
  position:sticky;top:0;z-index:var(--z-sticky,600);display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;height:58px;padding:0 clamp(14px,3vw,32px);background:var(--bar-bg);
  border:0;border-bottom:1px solid var(--hair);box-shadow:none;
  backdrop-filter:saturate(115%) blur(14px);-webkit-backdrop-filter:saturate(115%) blur(14px)
}
.uaa-product-page .uaa-product-bar__brand{display:inline-flex;align-items:center;gap:8px;height:38px;min-width:0;color:var(--title)}
.uaa-product-page .uaa-product-bar__logo{display:block;width:28px;height:28px;flex:0 0 28px;border-radius:6px;object-fit:contain}
.uaa-product-page .uaa-product-bar__brand-name{font-size:14px;font-weight:800;white-space:nowrap}
.uaa-product-page .uaa-product-bar__back,
.uaa-product-page .uaa-product-bar__history,
.uaa-product-page .uaa-product-bar__account{
  display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border:1px solid transparent;
  border-radius:6px;color:var(--ink-2);font-size:12px;font-weight:700;line-height:1;white-space:nowrap;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)
}
.uaa-product-page .uaa-product-bar__current{display:flex;align-items:center;gap:9px;min-width:0;padding:0 2px}
.uaa-product-page .uaa-product-bar__product-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--title);font-size:14px;font-weight:800}
.uaa-product-page .uaa-product-bar__product-kind{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--fill-1);color:var(--ink-3);font-size:10.5px;font-weight:700
}
.uaa-product-page .uaa-product-bar__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.uaa-product-page .uaa-product-bar__balance{
  display:inline-flex;align-items:center;height:34px;padding:0 10px;border:1px solid rgba(230,184,115,.28);
  border-radius:6px;background:rgba(230,184,115,.09);color:var(--gold);font-size:12px;font-weight:800;white-space:nowrap
}
.uaa-product-page .uaa-product-bar__theme{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:var(--fill-1);color:var(--ink-2);appearance:none;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)
}
.uaa-product-page .uaa-product-bar__theme-icon{display:block;width:18px;height:18px}
.uaa-product-page .uaa-product-bar__back:hover,
.uaa-product-page .uaa-product-bar__history:hover,
.uaa-product-page .uaa-product-bar__account:hover{background:var(--fill-hover);border-color:var(--line-2);color:var(--title)}
.uaa-product-page .uaa-product-bar__balance:hover{background:rgba(230,184,115,.14);border-color:rgba(230,184,115,.48)}
.uaa-product-page .uaa-product-bar__theme:hover{background:var(--crimson-soft);border-color:var(--crimson);color:var(--crimson)}
.uaa-product-page .uaa-product-bar a:focus-visible,
.uaa-product-page .uaa-product-bar button:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}

/* Compact workspace heading and one-column default flow. */
.uaa-product-page .uaa-product-main{width:100%;max-width:1360px;min-width:0;margin:0 auto;padding-top:22px;padding-bottom:48px}
.uaa-product-page .ai-crumb{
  margin:0 clamp(16px,3vw,32px) 10px;color:var(--ink-3);font-size:12px;line-height:1.4;
  transition:color var(--dur-fast),background var(--dur-fast)
}
.uaa-product-page .ai-crumb:hover{color:var(--crimson)}
.uaa-product-page .ai-secthead{
  display:none;align-items:center;gap:7px 12px;padding:0 clamp(16px,3vw,32px);margin:0 0 18px
}
.uaa-product-page .ai-secthead h2{font-size:24px;line-height:1.25;font-weight:800}
.uaa-product-page .ai-secthead .en{font-size:11px;color:var(--ink-3)}
.uaa-product-page .ai-secthead p{max-width:720px;margin:2px 0 0;font-size:13px;line-height:1.65;color:var(--ink-3)}
.uaa-product-page .ai-link-arrow{gap:5px;font-size:12.5px;transition:color var(--dur-fast)}
.uaa-product-page .ai-link-arrow:hover{gap:5px;color:var(--crimson)}
.uaa-product-page .ai-toolwrap{
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;width:100%;max-width:1360px;
  min-width:0;margin:0 auto;padding:0 clamp(16px,3vw,32px)
}
.uaa-product-page .ai-flow{
  display:flex;flex-direction:column;gap:22px;min-width:0;margin:0;padding:24px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);box-shadow:var(--shadow-s)
}
.uaa-product-page .ai-flow > *{min-width:0;max-width:100%}
.uaa-product-page .ai-flow h4{margin:0;font-size:15px;line-height:1.4;color:var(--title)}
.uaa-product-page .ai-flow__label{font-size:13px;line-height:1.45;color:var(--ink-2)}
.uaa-product-page .ai-flow__hint{font-size:12px;line-height:1.55;color:var(--ink-3)}
.uaa-product-page .uaa-template-summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;min-height:68px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-2)
}
.uaa-product-page .uaa-template-summary__copy{display:grid;gap:3px;min-width:0}
.uaa-product-page .uaa-template-summary__eyebrow{font-size:10.5px;font-weight:800;line-height:1.3;color:var(--crimson)}
.uaa-product-page .uaa-template-summary__copy strong{overflow-wrap:anywhere;font-size:14px;line-height:1.35;color:var(--title)}
.uaa-product-page .uaa-template-summary__meta{overflow-wrap:anywhere;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.uaa-product-page .uaa-template-summary__action{
  display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--title);
  font-size:13px;font-weight:700;line-height:1;text-align:center;white-space:nowrap
}
.uaa-product-page .ai-notes{
  gap:9px;margin-top:2px;padding:20px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent
}
.uaa-product-page .ai-notes li{font-size:12.5px;line-height:1.65;color:var(--ink-3)}
.uaa-product-page .ai-notes li::before{margin-top:7px;background:var(--crimson)}

/* Stable preview column and media/fallback stack. */
.uaa-product-page .uaa-product-preview{
  display:flex;flex-direction:column;gap:12px;width:100%;max-width:640px;min-width:0;justify-self:center;
  /* 预览框的高度上限。≥980px 的两列布局在下面用更大的值覆盖它（那边是靠它反推整列宽度）。 */
  --uaa-frame-max-h:min(60dvh,520px)
}
/* 单列布局(<980px)下框是满宽的，竖版素材经 aspect-ratio 一算就非常高——9:16 的视频在 900px 宽的列里
   要 1600px 高，一屏根本装不下，底下的提示词/生成记录全被推走。
   这里给框的<b>宽度</b>封顶（= 上限高度 × 比例），高度再由 aspect-ratio 从这个宽度推出来，
   框仍是素材本身的形状，不裁不留黑边。反过来写「max-height」压不住：宽度是满的，比例只会照着宽度算高。 */
.uaa-product-page .uaa-product-preview__frame{
  position:relative;width:100%;max-width:calc(var(--uaa-frame-max-h) * (var(--uaa-preview-ratio,4 / 5)));
  margin-inline:auto;aspect-ratio:var(--uaa-preview-ratio,4 / 5);overflow:hidden;isolation:isolate;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-2);box-shadow:var(--shadow-s)
}
.uaa-product-page .uaa-product-preview__heading{margin:0;color:var(--title);font-size:14px;font-weight:800;line-height:1.4}
/* 效果预览下方的「预览生成提示词」：提示词是整段自然语言，可能很长也可能一个空格都没有，
   所以给 overflow-wrap:anywhere（否则一长串英文提示词会把整列撑宽）+ 高度封顶后可滚动，
   不让它把右侧预览列拉成一条长面条。user-select 保持默认，用户要能直接框选复制。 */
.uaa-product-page .uaa-product-preview__prompt{
  display:flex;flex-direction:column;gap:7px;width:100%;padding:11px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-s)
}
.uaa-product-page .uaa-product-preview__prompt-title{margin:0;color:var(--title);font-size:13px;font-weight:800;line-height:1.35}
.uaa-product-page .uaa-product-preview__prompt-body{
  margin:0;max-height:11.5em;overflow-y:auto;overflow-wrap:anywhere;color:var(--ink-2);font-size:12.5px;line-height:1.7;
  white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent
}
.uaa-product-page .uaa-product-preview__history{
  display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:11px;width:100%;min-height:58px;padding:9px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow-s);
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)
}
.uaa-product-page .uaa-product-preview__history:hover{border-color:color-mix(in srgb,var(--crimson) 72%,var(--line));background:var(--crimson-soft);color:var(--crimson);transform:translateY(-1px);box-shadow:var(--shadow-m)}
.uaa-product-page .uaa-product-preview__history:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.uaa-product-page .uaa-product-preview__history-icon{display:grid;width:36px;height:36px;place-items:center;border:1px solid color-mix(in srgb,var(--crimson) 28%,var(--line));border-radius:8px;background:var(--crimson-soft);color:var(--crimson)}
.uaa-product-page .uaa-product-preview__history-icon svg{width:19px;height:19px}
.uaa-product-page .uaa-product-preview__history-copy{display:grid;min-width:0;gap:2px}
.uaa-product-page .uaa-product-preview__history-copy strong{color:var(--title);font-size:13.5px;font-weight:800;line-height:1.35}
.uaa-product-page .uaa-product-preview__history-copy span{overflow:hidden;color:var(--ink-3);font-size:11.5px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.uaa-product-page .uaa-product-preview__history-arrow{color:var(--crimson);font-family:var(--font-latin);font-size:22px;font-weight:500;line-height:1;text-align:center}
.uaa-product-page .uaa-product-preview__comparison{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;height:100%;overflow:hidden}
.uaa-product-page .uaa-product-preview__comparison--single{grid-template-columns:minmax(0,1fr)}
.uaa-product-page .uaa-product-preview__pane{position:relative;min-width:0;overflow:hidden;background:var(--surface-2)}
.uaa-product-page .uaa-product-preview__comparison:not(.uaa-product-preview__comparison--single):not(.uaa-product-preview__comparison--compare) [data-preview-role="output"]{border-left:1px solid rgba(255,255,255,.36)}
.uaa-product-page .uaa-product-preview__comparison--compare{display:block;--uaa-preview-split:50%}
.uaa-product-page .uaa-product-preview__comparison--compare .uaa-product-preview__pane{position:absolute;inset:0;width:100%;height:100%}
.uaa-product-page .uaa-product-preview__comparison--compare [data-preview-role="source"]{z-index:1}
.uaa-product-page .uaa-product-preview__comparison--compare [data-preview-role="output"]{z-index:2;clip-path:inset(0 calc(100% - var(--uaa-preview-split)) 0 0)}
.uaa-product-page .uaa-product-preview__comparison--compare [data-preview-role="source"] .uaa-product-preview__pane-label{right:10px;left:auto}
.uaa-product-page .uaa-product-preview__divider{position:absolute;z-index:5;top:0;bottom:0;left:var(--uaa-preview-split);width:2px;background:rgba(255,255,255,.94);box-shadow:0 0 12px rgba(0,0,0,.45);transform:translateX(-50%);pointer-events:none}
.uaa-product-page .uaa-product-preview__handle{position:absolute;z-index:6;top:50%;left:var(--uaa-preview-split);display:grid;width:42px;height:42px;padding:0;place-items:center;border:0;border-radius:50%;background:#fff;color:var(--crimson);box-shadow:0 6px 22px rgba(0,0,0,.45);transform:translate(-50%,-50%);cursor:ew-resize;touch-action:none}
.uaa-product-page .uaa-product-preview__handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.uaa-product-page .uaa-product-preview__handle:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.uaa-product-page .uaa-product-preview__pane-label{
  position:absolute;z-index:3;top:10px;left:10px;max-width:calc(100% - 20px);overflow:hidden;padding:4px 8px;
  border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);background:rgba(26,26,29,.72);color:#fff;
  font-size:10.5px;font-weight:800;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.uaa-product-page .uaa-product-preview__arrow{
  position:absolute;z-index:4;top:50%;left:50%;display:grid;width:28px;height:28px;place-items:center;
  border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(26,26,29,.78);color:#fff;
  font-size:15px;font-weight:800;line-height:1;transform:translate(-50%,-50%);pointer-events:none
}
.uaa-product-page .uaa-product-preview__fallback{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:24px;text-align:center;background:var(--uaa-product-fallback);color:var(--ink-3)
}
.uaa-product-page .uaa-product-preview__fallback strong{color:var(--title);font-size:15px;line-height:1.4}
.uaa-product-page .uaa-product-preview__fallback span{max-width:260px;font-size:12.5px;line-height:1.6}
.uaa-product-page .uaa-product-preview__media,
.uaa-product-page .uaa-product-inline-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0;background:#09090b}
/* 对比滑块里两张图必须共用同一取景框：frame 的比例由 syncPreviewAspect() 按「生成效果」那张定，
   原始照片比例不同时 contain 会各自留边，看起来就是两张图尺寸不一致(H5 上尤其明显)。
   改 cover 让两侧都铺满同一个框，滑杆划过去才是同一处画面的前后对比。
   单图/并排预览不在此列——那里要的是完整显示，继续用 contain。 */
.uaa-product-page .uaa-product-preview__comparison--compare .uaa-product-preview__media{object-fit:cover}
.uaa-product-page .has-uaa-media > :not(.uaa-product-inline-media):not(.uaa-product-preview__media){z-index:2}
.uaa-product-page .uaa-media-fallback:not(.uaa-product-preview__frame)::after{
  content:"预览暂不可用";position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:12px;
  background:var(--uaa-product-fallback);color:var(--ink-3);font-size:12px;text-align:center;pointer-events:none
}

/* Tool controls and generated results stay inside the operational panel. */
.uaa-product-page .ai-upload,
.uaa-product-page .ai-textarea,
.uaa-product-page .ai-audio,
.uaa-product-page .ai-selected,
.uaa-product-page .ai-videopanel,
.uaa-product-page .ai-compare__frame,
.uaa-product-page .ai-resultgrid__item,
.uaa-product-page .ai-style,
.uaa-product-page .ai-material,
.uaa-product-page .ai-tmpl-card,
.uaa-product-page .ai-upload-slot,
.uaa-product-page .ai-price-row,
.uaa-product-page .ai-formula,
.uaa-product-page .ai-crosstool,
.uaa-product-page .ai-modal__panel,
.uaa-product-page .ai-workspace{border-radius:8px}
.uaa-product-page .ai-selected__cover,
.uaa-product-page .ai-upload__swatch,
.uaa-product-page .ai-style__swatch,
.uaa-product-page .ai-style__ring,
.uaa-product-page .ai-material__swatch,
.uaa-product-page .ai-crosstool__thumb,
.uaa-product-page .ai-demo-trio__cell{border-radius:6px}
.uaa-product-page .ds-btn{border-radius:6px}
.uaa-product-page .ai-pill,
.uaa-product-page .ai-chip,
.uaa-product-page .ai-compare__label,
.uaa-product-page .ai-videopanel__rec,
.uaa-product-page .ai-videopanel__tag,
.uaa-product-page .ai-videopanel__tc,
.uaa-product-page .ai-tmpl-card__tag,
.uaa-product-page .ai-tmpl-card__dur{border-radius:var(--r-pill)}
.uaa-product-page .uaa-product-bar__theme,
.uaa-product-page .ai-upload__remove,
.uaa-product-page .ai-upload-slot__remove,
.uaa-product-page .ai-compare__handle,
.uaa-product-page .ai-resultgrid__dl,
.uaa-product-page .ai-videopanel__play,
.uaa-product-page .ai-feed-card__play,
.uaa-product-page .ai-tmpl-card__play{border-radius:50%}
.uaa-product-page .ai-upload__ic{border-radius:8px}
.uaa-product-page .ai-upload,
.uaa-product-page .ai-audio,
.uaa-product-page .ai-selected,
.uaa-product-page .ai-price-row{background:var(--surface-2);border-color:var(--line)}
.uaa-product-page .ai-upload{width:100%;min-height:160px;padding:20px}
.uaa-product-page .ai-upload.is-filled{background:var(--surface-2)}
.uaa-product-page .ai-upload__info{flex:1;min-width:0}
.uaa-product-page .ai-upload__name,
.uaa-product-page .ai-upload-slot__name{display:block;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uaa-product-page .ai-upload-multi{max-width:100%;overflow:hidden}
.uaa-product-page .ai-upload-slot{width:96px;height:96px;background:var(--surface-2)}
.uaa-product-page .ai-upload-slot.is-filled{border-style:solid;background:var(--surface-3)}
.uaa-product-page .ai-textarea{max-width:100%;min-height:144px;padding:14px 15px;background:var(--surface-2)}
.uaa-product-page .ai-audio{max-width:100%;padding:13px 14px}
.uaa-product-page .ai-audio__wave span{background:var(--crimson)}
.uaa-product-page .ai-selected{padding:14px}
.uaa-product-page .ai-selected__meta{min-width:0;flex:1}
.uaa-product-page .ai-selected__meta h3{overflow-wrap:anywhere;font-size:16px}
.uaa-product-page .ai-price-row{flex:0 0 auto;border-radius:8px;background:var(--surface-2);border-color:var(--line)}
.uaa-product-page .ai-flow > .ds-btn{flex:0 0 auto}
.uaa-product-page .ai-price-row__item{min-height:76px;padding:12px 14px}
.uaa-product-page .ai-price-row__label{font-size:11px}
.uaa-product-page .ai-price-row__value,.uaa-product-page .ai-price-row__balance{font-size:13px}
.uaa-product-page .ai-price-row b{color:var(--crimson)}
.uaa-product-page .ai-price-row__item:first-child .ai-price-row__value b{color:var(--title)}
.uaa-product-page .ai-price-row__balance b,.uaa-product-page .ai-price-row__value--balance b{color:var(--gold)}
.uaa-product-page .ai-price-row__balance a,
.uaa-product-page .ai-price-row__recharge{
  min-width:54px;height:30px;padding:0 12px;border:0;border-radius:6px;
  background:var(--crimson);color:#fff;font-size:12px;font-weight:800;
  box-shadow:0 6px 12px -8px rgba(255,59,92,.88);
  transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)
}
.uaa-product-page .ai-price-row__balance a:hover,
.uaa-product-page .ai-price-row__recharge:hover{background:color-mix(in srgb,var(--crimson) 88%,#fff);color:#fff;filter:none;transform:translateY(-1px);box-shadow:0 8px 14px -8px rgba(255,59,92,.95)}
.uaa-product-page .ai-formula{background:var(--crimson-soft)}
.uaa-product-page .ai-formula dt{color:var(--crimson)}
.uaa-product-page .ai-crosstool{background:var(--fill-1);border-color:var(--line)}
.uaa-product-page .ai-workspace{box-shadow:var(--shadow-s)}
.uaa-product-page .ai-workspace::before{display:none}
.uaa-product-page .ai-style-grid,
.uaa-product-page .ai-material-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;max-width:100%}
.uaa-product-page .ai-style,
.uaa-product-page .ai-material{min-width:0;background:var(--surface-2)}
.uaa-product-page .ai-result,
.uaa-product-page .ai-compare,
.uaa-product-page .ai-videopanel,
.uaa-product-page .ai-resultgrid,
.uaa-product-page .ai-demo-trio{width:100%;max-width:100%;min-width:0}
.uaa-product-page .ai-compare__frame,
.uaa-product-page .ai-videopanel{width:100%;max-width:100%;overflow:hidden;border:1px solid var(--line);box-shadow:none}
.uaa-product-page .ai-resultgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.uaa-product-page .ai-resultgrid__item{aspect-ratio:1/1;min-width:0;border:1px solid var(--line);box-shadow:none}
.uaa-product-page .ai-videopanel{aspect-ratio:16/9;background:var(--surface-2)}
.uaa-product-page .ai-videopanel::after{pointer-events:none}
.uaa-product-page .ai-videopanel.has-uaa-media .ai-videopanel__play,
.uaa-product-page .ai-videopanel.has-uaa-media .ai-videopanel__tag,
.uaa-product-page .ai-videopanel.has-uaa-media .ai-videopanel__tc{display:none}
.uaa-product-page .ai-result-actions{display:flex;flex-wrap:wrap;max-width:100%}
.uaa-product-page .ai-result{display:none!important}
.uaa-product-page .ai-tool-foot{display:flex;flex-wrap:wrap;gap:10px 14px;max-width:1360px;margin:20px clamp(16px,3vw,32px) 0}

/* Secondary feeds/examples are unframed inside the primary panel. */
.uaa-product-page .ai-feed-grid,
.uaa-product-page .ai-samples-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:100%}
.uaa-product-page .ai-feed-card,
.uaa-product-page .ai-sample{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.uaa-product-page .ai-feed-card:hover{transform:none;box-shadow:none}
.uaa-product-page .ai-feed-card__cover,
.uaa-product-page .ai-sample__imgs{overflow:hidden;border-radius:8px}
.uaa-product-page .ai-feed-card__body{padding:9px 2px 4px}
.uaa-product-page .ai-sample__cap{padding:9px 2px}
.uaa-product-page .ai-hist-pager{flex-wrap:wrap;padding:22px 0 4px}
.uaa-product-page .ai-hist-pager button{border-radius:6px}

/* Template lists have an exact terminal cascade: never inherit the legacy six-column rule. */
.uaa-product-page .ai-tmpl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
.uaa-product-page .ai-tmpl-card{
  width:100%;min-width:0;aspect-ratio:2/3;border:1px solid var(--line);box-shadow:none;
  transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)
}
.uaa-product-page .ai-tmpl-card.has-uaa-media{filter:none;background:var(--surface-2)}
.uaa-product-page .ai-tmpl-card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow-s)}
.uaa-product-page .ai-tmpl-card:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.uaa-product-page .ai-tmpl-card::after{pointer-events:none}
.uaa-product-page .ai-video-template-list .ai-tmpl-card{aspect-ratio:16 / 9}
.uaa-product-page .ai-video-template-list .ai-tmpl-card__cap{font-family:var(--font-sans);font-size:12px}
.uaa-product-page .ai-tmpl-card--custom{
  display:grid;place-items:center;align-content:center;gap:12px;isolation:isolate;filter:none;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));border-style:dashed;border-color:var(--line-2)
}
.uaa-product-page .ai-tmpl-card--custom::after{display:none}
.uaa-product-page .ai-tmpl-card__custom-icon{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;
  color:var(--ink-2);font-size:25px;font-weight:300;line-height:1;background:var(--surface-1)
}
.uaa-product-page .ai-tmpl-card--custom .ai-tmpl-card__tag{position:static;color:var(--ink-3);border-color:var(--line);background:transparent}
.uaa-product-page .ai-tmpl-card--custom .ai-tmpl-card__cap{position:static;color:var(--title);font-family:var(--font-sans);font-size:13px}

@media (min-width: 640px){
  .uaa-product-page .ai-tmpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width: 900px){
  .uaa-product-page .ai-tmpl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width: 980px){
  .uaa-product-page.uaa-product-page--direct .ai-toolwrap,
  .uaa-product-page.uaa-product-page--template-detail .ai-toolwrap{
    grid-template-columns:minmax(380px,460px) minmax(0,1fr);gap:clamp(24px,4vw,52px);max-width:1360px
  }
  /* 直连产品页只有「表单 + 效果预览」两块，而第二列是 1fr、吃掉全部剩余宽度：
     预览靠 justify-self:center 只是在自己那条轨道里居中，整块内容在宽屏上看着仍然偏左。
     把容器收到两列的实际用量：460(表单) + 52(gap) + 540(预览上限) + 32×2(padding) = 1116。
     顶部返回行同步收窄，维持与卡片左缘 32px 的对齐关系。
     模板详情页 --template-detail 不动：它的第二列要留给模板墙，不能按预览宽度收。 */
  .uaa-product-page.uaa-product-page--direct .ai-toolwrap{max-width:1116px}
  .uaa-product-page.uaa-product-page--direct .ai-page-back-row{width:min(calc(100% - 32px),1116px)}
  .uaa-product-page .uaa-product-preview{align-self:start}
  /* 高度封顶，形状仍跟着图片走(aspect-ratio 沿用基础规则里的 --uaa-preview-ratio)：
     原先写死 aspect-ratio:auto + 满宽固定高，框恒为横向，竖图在里面要么被 cover 裁掉大半，
     要么 contain 出两条黑边。改成「定高、宽度按比例反推、最宽不超过列宽」，
     框即图片的形状，对比两侧才严丝合缝。 */
  /* 高度封顶，形状仍跟着图片走(aspect-ratio 沿用基础规则里的 --uaa-preview-ratio)：
     原先写死 aspect-ratio:auto + 满宽固定高，框恒为横向，竖图在里面要么被 cover 裁掉大半，
     要么 contain 出两条黑边。
     写法上不能用「定高 + max-width」——宽度触顶时 aspect-ratio 不会反推高度，横图会被压扁；
     所以先按最大高度反算出宽度、再与列宽取小，高度交给 aspect-ratio 由这个确定宽度推出。 */
  /* 「效果预览」标题上提到顶部返回行那一水平线（位移由 ai-product-shell.js#alignPreviewHeading 量出来
     写进 --uaa-heading-lift）。脱离文档流后它不再占右列第一行，左右两个内容框自然齐平；
     left:0 让它横向仍跟着图框左缘走，不会飘到整页最右边。 */
  .uaa-product-page .uaa-product-preview{position:relative}
  .uaa-product-page .uaa-product-preview__heading--lifted{
    position:absolute;left:0;top:0;margin:0;white-space:nowrap;
    transform:translateY(var(--uaa-heading-lift,-32px))
  }

  /* 高度上限放到 76dvh/760px：竖图的宽度是由高度乘比例反推的，上限压得太低(原 58dvh/560px)
     会让人像这类瘦长图只剩两百多像素宽，右列大片留白。 */
  /* :not(.uaa-face-example-preview) —— 这套按图片比例反算列宽的规则只适用于对比预览(有 __frame 的)。
     换脸/双图页用的是「大图 + 三缩略图」结构，没有 __frame，--uaa-preview-ratio 也就不会被写入，
     套进来会拿默认 4/5 去算出一个与实际内容无关的窄列。 */
  .uaa-product-page .uaa-product-preview:not(.uaa-face-example-preview){
    --uaa-frame-max-h:min(76dvh,760px);
    width:min(100%,calc(var(--uaa-frame-max-h) * (var(--uaa-preview-ratio,4 / 5))))
  }
  /* 换脸/双图页同样让「列宽 = 内容宽度」(大图与缩略图行都是 390)：
     否则列是 540、图只有 390 居中，图两侧各空 75px，与左侧表单卡之间的间距被撑得比对比预览页大一截，
     标题也只能跟着居中的图走。收到 390 之后 left:0 就是图的左缘，标题自然左对齐。 */
  .uaa-product-page .uaa-face-example-preview{width:min(100%,390px)}
  /* 宽度算在整列上(而不是只算在框上)，「生成记录」入口才会跟图等宽，右列edge 才齐 */
  .uaa-product-page .uaa-product-preview__frame{width:100%;height:auto}
}

@media (min-width: 721px){
  .uaa-product-page .uaa-product-main{padding-top:14px;padding-bottom:28px}
  .uaa-product-page .ai-secthead{display:none}
  .uaa-product-page .ai-toolwrap{align-items:start;gap:16px}
  .uaa-product-page .ai-flow{gap:14px;padding:18px}
  .uaa-product-page .ai-upload{min-height:132px;padding:16px}
  .uaa-product-page .ai-notes{gap:6px;padding-top:14px}
  .uaa-product-page .ai-notes li{font-size:12px;line-height:1.5}
  .uaa-product-page .uaa-product-preview{max-width:540px}
}

@media (min-width: 1180px){
  .uaa-product-page .ai-tmpl-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .uaa-product-page .ai-video-template-list .ai-tmpl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width: 720px){
  .uaa-product-page .uaa-product-bar{
    grid-template-columns:28px auto minmax(0,1fr) auto;gap:6px;height:56px;padding:0 10px
  }
  .uaa-product-page .uaa-product-bar__brand-name,
  .uaa-product-page .uaa-product-bar__product-kind,
  .uaa-product-page .uaa-product-bar__balance,
  .uaa-product-page .uaa-product-bar__account{display:none}
  .uaa-product-page .uaa-product-bar__brand{width:28px;height:34px}
  .uaa-product-page .uaa-product-bar__logo{width:26px;height:26px;flex-basis:26px}
  .uaa-product-page .uaa-product-bar__back{height:34px;padding:0 7px;font-size:11.5px}
  .uaa-product-page .uaa-product-bar__current{min-width:0;padding:0}
  .uaa-product-page .uaa-product-bar__product-name{font-size:13px}
  .uaa-product-page .uaa-product-bar__actions{gap:4px}
  .uaa-product-page .uaa-product-bar__history{display:inline-flex;height:34px;padding:0 7px;font-size:11.5px}
  .uaa-product-page .uaa-product-main{padding-top:18px;padding-bottom:36px}
  .uaa-product-page .ai-crumb{margin-right:16px;margin-left:16px}
  .uaa-product-page .ai-secthead{padding-right:16px;padding-left:16px;margin-bottom:14px}
  .uaa-product-page .ai-secthead h2{font-size:20px}
  .uaa-product-page .ai-secthead .ai-link-arrow{flex-basis:100%;margin-left:0!important}
  .uaa-product-page .ai-toolwrap{gap:20px;padding-right:16px;padding-left:16px}
  .uaa-product-page .ai-flow{gap:20px;padding:22px}
  .uaa-product-page .uaa-template-summary{gap:9px;min-height:66px;padding:10px}
  .uaa-product-page .uaa-template-summary__action{min-height:40px;padding:0 9px}
  .uaa-product-page .ai-pillrow{
    flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding-bottom:4px;scroll-behavior:auto;
    overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .uaa-product-page .ai-pillrow::-webkit-scrollbar{display:none}
  .uaa-product-page .ai-pill{flex:0 0 auto}
  .uaa-product-page .ai-flow > .ds-btn{width:100%}
  .uaa-product-page .ai-audio__btn{width:100%}
  .uaa-product-page .ai-result-actions .ds-btn,
  .uaa-product-page .ai-confirm__actions .ds-btn{width:100%;flex:1 1 100%}
  .uaa-product-page .ai-tool-foot{margin-right:16px;margin-left:16px}
  .uaa-product-page .ai-tool-foot > *{width:100%;flex:1 1 100%}
  .uaa-product-page .ai-price-row{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .uaa-product-page .ai-price-row__item{min-height:66px;gap:5px;padding:9px 5px}
  .uaa-product-page .ai-price-row__label{font-size:10px}
  .uaa-product-page .ai-price-row__value,.uaa-product-page .ai-price-row__balance{gap:4px;font-size:11px}
  .uaa-product-page .ai-price-row b{font-size:11.5px}
  .uaa-product-page .ai-price-row__balance a,.uaa-product-page .ai-price-row__recharge{min-width:48px;height:27px;padding:0 9px;border-radius:5px;font-size:11px}
  .uaa-product-page .uaa-product-preview{position:static;max-width:none}
  .uaa-product-page .uaa-product-preview__history{grid-template-columns:32px minmax(0,1fr) 18px;gap:9px;min-height:54px;padding:8px 10px}
  .uaa-product-page .uaa-product-preview__history-icon{width:32px;height:32px;border-radius:7px}
  .uaa-product-page .uaa-product-preview__history-copy strong{font-size:13px}
  .uaa-product-page .uaa-product-preview__history-copy span{font-size:11px}
}

@media (max-width: 390px){
  .uaa-product-page .uaa-product-bar{grid-template-columns:28px 34px minmax(0,1fr) auto;gap:5px;padding-right:8px;padding-left:8px}
  .uaa-product-page .uaa-product-bar__back{width:34px;padding:0;font-size:0}
  .uaa-product-page .uaa-product-bar__back::before{content:"\2190";font-size:18px;line-height:1}
  .uaa-product-page .uaa-product-bar__history{display:inline-flex;width:36px;padding:0;font-size:0}
  .uaa-product-page .uaa-product-bar__history::before{content:"历史";font-size:11px;line-height:1}
  .uaa-product-page .uaa-product-bar__product-name{font-size:12.5px}
  .uaa-product-page .ai-flow{padding:22px}
}

/* Keep paginated AI lists aligned with the novel list even after terminal grid overrides. */
.uaa-product-page .ai-template-list .ai-tmpl-grid,
.uaa-product-page .ai-paginated-list .ai-feed-grid{grid-template-columns:minmax(0,1fr)}
.uaa-product-page .ai-video-template-list .ai-tmpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.uaa-product-page .ai-video-template-list .ai-tmpl-card .uaa-product-inline-media{z-index:1;object-fit:cover;object-position:50% 50%}
.uaa-product-page .ai-video-template__backdrop{position:absolute;inset:-8%;z-index:0!important;display:none;overflow:hidden;background:#09090b;pointer-events:none}
.uaa-product-page .ai-video-template__backdrop img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.08);opacity:.58;transform:scale(1.12)}
.uaa-product-page .ai-tmpl-card.is-portrait-source .ai-video-template__backdrop{display:block}
.uaa-product-page .ai-tmpl-card.is-portrait-source .uaa-product-inline-media{object-fit:contain}
.uaa-product-page .ai-image-face-template-list .ai-tmpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.uaa-product-page .ai-image-face-template-list .ai-tmpl-card .uaa-product-inline-media{object-fit:cover;object-position:50% 38%}
.uaa-product-page .ai-image-face-template-list .ai-tmpl-card .uaa-product-inline-media[data-focal="top"]{object-position:50% 22%}
.uaa-product-page .ai-image-face-template-list .ai-tmpl-card .uaa-product-inline-media[data-focal="center"]{object-position:50% 50%}
.uaa-product-page .ai-image-face-template-list .ai-tmpl-card .uaa-product-inline-media[data-focal="bottom"]{object-position:50% 72%}
.uaa-product-page .ai-adaptive-notes{width:100%;min-width:0;margin:0;padding:0;gap:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-s);overflow:hidden}
.uaa-product-page .ai-adaptive-notes summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;background:var(--fill-1);transition:background var(--dur-fast),color var(--dur-fast)}
.uaa-product-page .ai-adaptive-notes summary::-webkit-details-marker{display:none}
.uaa-product-page .ai-adaptive-notes summary h4{min-width:0;margin:0}
.uaa-product-page .ai-adaptive-notes summary:hover{background:var(--surface-2)}
.uaa-product-page .ai-adaptive-notes summary:focus-visible{outline:2px solid var(--crimson);outline-offset:-2px}
.uaa-product-page .ai-adaptive-notes summary::after{content:"";width:8px;height:8px;flex:0 0 8px;margin:0 4px 4px 0;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform var(--dur-fast),margin var(--dur-fast),border-color var(--dur-fast)}
.uaa-product-page .ai-adaptive-notes[open] summary{border-bottom:1px solid var(--line)}
.uaa-product-page .ai-adaptive-notes[open] summary::after{margin:4px 4px 0 0;transform:rotate(225deg);border-color:var(--crimson)}
.uaa-product-page .ai-adaptive-notes ul{margin:0;padding:14px 16px 16px;overflow-wrap:anywhere}
@media (max-width: 720px){.uaa-product-page .ai-adaptive-notes summary{min-height:50px;padding:0 14px}.uaa-product-page .ai-adaptive-notes ul{padding:12px 14px 14px}}
@media (min-width: 721px){
  .uaa-product-page .ai-template-list .ai-tmpl-grid,
  .uaa-product-page .ai-paginated-list .ai-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uaa-product-page .ai-video-template-list .ai-tmpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uaa-product-page .ai-image-face-template-list .ai-tmpl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (prefers-reduced-motion: reduce){
  .uaa-product-page *,
  .uaa-product-page *::before,
  .uaa-product-page *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important
  }
  .uaa-product-page .ai-tmpl-card:hover,
  .uaa-product-page .ai-feed-card:hover,
  .uaa-product-page .ds-btn:hover,
  .uaa-product-page .ai-link-arrow:hover{transform:none}
}

/* Template library and same-page creation workbench. */
.uaa-product-page .uaa-template-library,
.uaa-product-page .uaa-template-creation{
  width:calc(100% - clamp(32px,6vw,64px));max-width:1296px;margin:0 auto 24px
}
/* 模板库整体收到与返回行(页面标题)同宽：原来是 1296，比返回行的 1116 宽出 180px，
   于是分类 tab、「热门模板」标题、瀑布流全都比页面标题左出 90px，整页没有统一的左基线。
   创作态是在内层 .ai-toolwrap 上收的（外层还要给模板墙留宽度），这里没有单一内层容器，
   直接收外层，效果等同。 */
@media (min-width: 980px){
  /* padding 与 .ai-toolwrap 同值：创作态/脱衣等页面的内容左缘都是「容器 + 32」，
     模板库不补这段的话会比它们再左出 32px，整页仍然没有一条统一的左基线。 */
  .uaa-product-page .uaa-template-library{max-width:1116px;padding-inline:32px}
}
.uaa-product-page .uaa-template-library[hidden],
.uaa-product-page .uaa-template-creation[hidden]{display:none!important}
.uaa-product-page .uaa-template-library__sr-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.uaa-product-page .uaa-template-library__head{
  display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px;padding:22px 24px;
  border:1px solid var(--line);border-radius:8px;background:linear-gradient(135deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-s)
}
.uaa-product-page .uaa-template-library__copy{display:grid;gap:7px;min-width:0;max-width:780px}
.uaa-product-page .uaa-template-library__eyebrow{
  color:var(--crimson);font-size:11px;font-weight:850;line-height:1.3;letter-spacing:.08em;text-transform:uppercase
}
.uaa-product-page .uaa-template-library__head h1,
.uaa-product-page .uaa-template-library__head h2{margin:0;color:var(--title);font-size:clamp(22px,2.5vw,34px);line-height:1.22}
.uaa-product-page .uaa-template-library__head p{max-width:720px;margin:0;color:var(--ink-2);font-size:13px;line-height:1.7}
.uaa-product-page .uaa-template-library__summary{
  flex:0 0 auto;display:grid;gap:3px;min-width:116px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink-3);font-size:11px;line-height:1.35;text-align:right
}
.uaa-product-page .uaa-template-library__summary strong{color:var(--title);font-size:16px;font-weight:850}
.uaa-product-page .uaa-template-library__history{text-decoration:none;transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
.uaa-product-page .uaa-template-library__history:hover{border-color:var(--crimson);background:var(--crimson-soft);color:var(--crimson);transform:translateY(-1px)}
.uaa-product-page .uaa-template-library__history:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.uaa-product-page .uaa-template-library__section-head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;margin:26px 0 12px
}
.uaa-product-page .uaa-template-library__section-head h2,
.uaa-product-page .uaa-template-library__section-head h3{margin:0;color:var(--title);font-size:18px;line-height:1.35}
.uaa-product-page .uaa-template-library__section-head p,
.uaa-product-page .uaa-template-library__section-head span{margin:0;color:var(--ink-3);font-size:11.5px;line-height:1.5}
.uaa-product-page .uaa-template-library__section-head > span{flex:0 0 auto;white-space:nowrap}

.uaa-product-page .uaa-template-categories{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:0
}
/* 无分类维度的页面（合成视频换脸/跳舞）把这个容器留着只为给 JS 挂钩子，display:grid 会盖掉 hidden，必须显式压掉。 */
.uaa-product-page .uaa-template-categories[hidden]{display:none}
.uaa-product-page .uaa-template-category{
  display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink-2);
  font:inherit;font-size:13px;font-weight:750;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;appearance:none;
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-template-category:hover{
  border-color:color-mix(in srgb,var(--crimson) 52%,var(--line));background:var(--crimson-soft);color:var(--crimson);transform:translateY(-1px)
}
.uaa-product-page .uaa-template-category:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.uaa-product-page .uaa-template-category.is-active,
.uaa-product-page .uaa-template-category[aria-pressed="true"]{
  border-color:var(--crimson);background:var(--crimson);color:#fff;box-shadow:0 7px 18px rgba(210,24,45,.2)
}
.uaa-product-page .uaa-template-category--custom{
  border-color:color-mix(in srgb,var(--crimson) 58%,var(--line));background:linear-gradient(135deg,var(--crimson-soft),var(--surface-2));color:var(--crimson)
}
.uaa-product-page .uaa-template-category--custom span{font-size:20px;font-weight:400;line-height:1}
.uaa-product-page .uaa-template-category--custom strong{overflow:hidden;font-size:13px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}

.uaa-product-page .uaa-template-waterfall{width:100%;column-count:4;column-gap:14px}
.uaa-product-page .uaa-waterfall-tile{
  position:relative;display:inline-block;width:100%;margin:0 0 14px;overflow:hidden;break-inside:avoid;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);box-shadow:var(--shadow-s);
  transform:translateZ(0);transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-waterfall-tile:hover{border-color:var(--line-2);box-shadow:var(--shadow-m);transform:translateY(-2px)}
.uaa-product-page .uaa-waterfall-tile.is-selected,
.uaa-product-page .uaa-waterfall-tile[aria-current="true"]{
  border-color:var(--crimson);box-shadow:0 0 0 2px var(--crimson-soft),0 12px 28px rgba(210,24,45,.18)
}
.uaa-product-page .uaa-waterfall-tile__use{
  position:relative;display:block;width:100%;min-height:180px;padding:0;overflow:hidden;border:0;background:var(--fill-2);
  color:#fff;text-align:left;text-decoration:none;cursor:pointer;appearance:none
}
.uaa-product-page .uaa-waterfall-tile__use::after{
  content:"";position:absolute;z-index:1;inset:38% 0 0;background:linear-gradient(transparent,rgba(5,5,8,.78));pointer-events:none
}
.uaa-product-page .uaa-waterfall-tile__use:focus-visible{outline:2px solid var(--crimson);outline-offset:-3px}
.uaa-product-page .uaa-waterfall-tile__use img{
  display:block;width:100%;height:auto;min-height:180px;object-fit:cover;object-position:50% 38%;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));transition:filter var(--dur-fast),transform var(--dur-med)
}
.uaa-product-page [data-template-workbench][data-media-kind="video"] .uaa-waterfall-tile__use{min-height:0;aspect-ratio:16 / 9;background:#09090b}
.uaa-product-page [data-template-workbench][data-media-kind="video"] .uaa-waterfall-tile__use img{width:100%;height:100%;min-height:0;object-position:center}
/* 跳舞模板（/ai/mix_video/dance）的素材全是竖版短视频，按 16:9 铺等于把人从腰上裁掉，改成 9:16。
   媒体类型取 data-workbench-media-kind（dance→funbox aiType=2），不能用 data-media-kind——
   那个只区分图/视频，跳舞和视频换脸都是 "video"，一起改会把横版的换脸模板拉变形。 */
.uaa-product-page [data-template-workbench][data-workbench-media-kind="dance"] .uaa-waterfall-tile__use{aspect-ratio:9 / 16}
/* 无海报的视频模板：用视频首帧当缩略图，尺寸与 img 一致 */
.uaa-product-page [data-template-workbench][data-media-kind="video"] .uaa-waterfall-tile__use video{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#09090b;pointer-events:none
}
.uaa-product-page .uaa-waterfall-tile:hover .uaa-waterfall-tile__use img{filter:brightness(.88);transform:scale(1.018)}
.uaa-product-page .uaa-waterfall-tile__action{
  position:absolute;z-index:2;right:52px;bottom:12px;left:12px;overflow:hidden;color:#fff;font-size:12px;font-weight:800;
  line-height:1.35;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-waterfall-tile:hover .uaa-waterfall-tile__action,
.uaa-product-page .uaa-waterfall-tile__use:focus-visible .uaa-waterfall-tile__action,
.uaa-product-page .uaa-waterfall-tile.is-selected .uaa-waterfall-tile__action{opacity:1;transform:none}
.uaa-product-page .uaa-waterfall-tile__check{
  position:absolute;z-index:3;top:9px;right:9px;display:none;width:26px;height:26px;place-items:center;
  border:2px solid #fff;border-radius:50%;background:var(--crimson);color:#fff;font-size:13px;font-weight:900;
  box-shadow:0 4px 12px rgba(0,0,0,.32)
}
.uaa-product-page .uaa-waterfall-tile.is-selected .uaa-waterfall-tile__check,
.uaa-product-page .uaa-waterfall-tile[aria-current="true"] .uaa-waterfall-tile__check{display:grid}
/* 视频模板的顶部信息条：左标题、右时长。z-index 要在 __use::after 那层渐变(z-index:1)之上，否则会被压暗看不清。
   两块都做成小药丸而不是裸文字：缩略图是任意视频首帧，深浅不定，只靠 text-shadow 压不住。
   没有时长的模板不渲染时长那格，标题照常显示。 */
.uaa-product-page .uaa-waterfall-tile__meta{
  position:absolute;z-index:3;top:9px;right:9px;left:9px;display:flex;align-items:flex-start;gap:8px;pointer-events:none
}
.uaa-product-page .uaa-waterfall-tile__name,
.uaa-product-page .uaa-waterfall-tile__duration{
  padding:3px 7px;border:1px solid rgba(255,255,255,.28);border-radius:5px;background:rgba(10,10,14,.68);color:#fff;
  font-size:10.5px;font-weight:800;line-height:1.35;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
}
/* 标题可被压缩并省略号，时长不参与收缩——它是计费依据，宁可挤标题也不能截。 */
.uaa-product-page .uaa-waterfall-tile__name{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.uaa-product-page .uaa-waterfall-tile__duration{flex:0 0 auto;margin-left:auto;font-variant-numeric:tabular-nums}
/* 选中态右上角会冒出对勾(26px)，信息条整体右收，别让时长压在对勾上。 */
.uaa-product-page .uaa-waterfall-tile.is-selected .uaa-waterfall-tile__meta,
.uaa-product-page .uaa-waterfall-tile[aria-current="true"] .uaa-waterfall-tile__meta{right:41px}
.uaa-product-page .uaa-waterfall-tile__preview{
  position:absolute;z-index:4;right:9px;bottom:9px;min-width:42px;min-height:30px;padding:0 8px;
  border:1px solid rgba(255,255,255,.62);border-radius:6px;background:rgba(10,10,14,.68);color:#fff;
  font:inherit;font-size:10.5px;font-weight:800;line-height:1;cursor:pointer;opacity:0;appearance:none;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:border-color var(--dur-fast),background var(--dur-fast),opacity var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-waterfall-tile:hover .uaa-waterfall-tile__preview,
.uaa-product-page .uaa-waterfall-tile:focus-within .uaa-waterfall-tile__preview{opacity:1}
.uaa-product-page .uaa-waterfall-tile__preview:hover{border-color:#fff;background:var(--crimson);transform:translateY(-1px)}
.uaa-product-page .uaa-waterfall-tile__preview:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}
.uaa-product-page .uaa-waterfall-tile.has-media-error .uaa-waterfall-tile__use{display:grid;min-height:220px;place-items:center}
.uaa-product-page .uaa-waterfall-tile.has-media-error .uaa-waterfall-tile__use::before{
  content:"模板图片暂时无法加载";position:absolute;z-index:2;padding:16px;color:var(--ink-3);font-size:11.5px;line-height:1.5;text-align:center
}
.uaa-product-page .uaa-waterfall-tile.has-media-error .uaa-waterfall-tile__use img{visibility:hidden}
.uaa-product-page .uaa-template-load-more{
  display:flex;align-items:center;justify-content:center;width:min(420px,100%);min-height:44px;margin:18px auto 0;padding:0 18px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:12px;font-weight:800;text-decoration:none;cursor:pointer;appearance:none;
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-template-load-more[hidden]{display:none!important}
.uaa-product-page .uaa-template-load-more:hover{border-color:var(--crimson);background:var(--crimson-soft);color:var(--crimson);transform:translateY(-1px)}
.uaa-product-page .uaa-template-load-more:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.uaa-product-page .uaa-template-status{min-height:22px;margin:10px auto 0;color:var(--ink-3);font-size:11.5px;line-height:1.55;text-align:center}
.uaa-product-page .uaa-template-status.is-error{color:var(--crimson)}

.uaa-product-page .uaa-template-creation{scroll-margin-top:82px}
.uaa-product-page .uaa-template-creation__head{display:grid;gap:5px;margin:0 0 16px;padding:0 2px}
.uaa-product-page .uaa-template-creation__head h1{margin:0;color:var(--title);font-size:clamp(21px,2.2vw,30px);line-height:1.25}
.uaa-product-page .uaa-template-creation__head p{max-width:760px;margin:0;color:var(--ink-2);font-size:12.5px;line-height:1.65}
.uaa-product-page .uaa-template-creation__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-s)
}
.uaa-product-page .uaa-template-creation__back{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink-2);
  font:inherit;font-size:12px;font-weight:800;cursor:pointer;appearance:none;
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-template-creation__back:hover{border-color:var(--crimson);background:var(--crimson-soft);color:var(--crimson);transform:translateX(-1px)}
.uaa-product-page .uaa-template-creation__back:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.uaa-product-page .uaa-template-creation__title{display:grid;gap:3px;min-width:0;text-align:right}
.uaa-product-page .uaa-template-creation__eyebrow{color:var(--crimson);font-size:10.5px;font-weight:850;line-height:1.3}
.uaa-product-page .uaa-template-creation__title h1,
.uaa-product-page .uaa-template-creation__title h2{overflow:hidden;margin:0;color:var(--title);font-size:17px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.uaa-product-page .uaa-template-creation__title p{overflow:hidden;margin:0;color:var(--ink-3);font-size:11px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.uaa-product-page .uaa-template-creation .ai-toolwrap{width:100%;max-width:none;margin:0}
/* PC 上创作态要与页面其它部分对齐：.uaa-template-creation 是给模板墙用的 1296 宽容器，
   上面那条 max-width:none 让里面的两栏也跟着撑到 1296，比返回行(1116)宽出一截——
   表现就是左侧表单卡冲到页面标题左边，两栏之间的空档也被拉大。
   这里把它收回与 --direct 同一口径并居中，跟脱衣等页面完全对齐。 */
@media (min-width: 980px){
  .uaa-product-page .uaa-template-creation .ai-toolwrap{max-width:1116px;margin-inline:auto}
}
.uaa-product-page .uaa-template-creation .ai-flow{min-width:0}
.uaa-product-page .uaa-template-creation [data-face-mode-panel][hidden],
.uaa-product-page .uaa-template-creation [data-video-mode-panel][hidden]{display:none!important}
.uaa-product-page .uaa-template-creation .uaa-template-summary{
  width:100%;min-height:66px;margin:0;padding:11px 12px;border-color:color-mix(in srgb,var(--crimson) 24%,var(--line));
  background:linear-gradient(135deg,var(--surface-2),var(--surface))
}
/* 创作态的「当前模板」条是 缩略图 + 文案 + 重新选择 三格，必须按创作态本身来选，不能挂 [data-face-workspace]：
   合成视频页的根节点是 [data-video-workspace]，挂在 face 上等于它拿不到这条，
   只剩基础的两列(1fr auto)，第三个子元素被挤到第二行、缩略图被 1fr 撑开——整条就散了。 */
.uaa-product-page .uaa-template-creation .uaa-template-summary{
  grid-template-columns:72px minmax(0,1fr) auto;min-height:112px
}
.uaa-product-page .uaa-template-summary__media{
  position:relative;display:block;width:72px;height:88px;overflow:hidden;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);box-shadow:var(--shadow-s)
}
.uaa-product-page .uaa-template-summary__media[hidden]{display:none!important}
.uaa-product-page .uaa-template-summary__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* 模板没海报时 JS 会把媒体块 hidden 掉，此时要收回三列，否则左边留一条 72px 的空轨道。 */
.uaa-product-page .uaa-template-creation .uaa-template-summary:has(.uaa-template-summary__media[hidden]){
  grid-template-columns:minmax(0,1fr) auto;min-height:66px
}
.uaa-product-page [data-face-workspace] .uaa-template-summary.is-custom-template{grid-template-columns:minmax(0,1fr) auto;min-height:66px}
/* 这条也不能挂 [data-face-workspace]：合成视频页的「当前模板」同样是个 <button>，
   不给这组就没有指针手型、没有 hover/focus 反馈，看着像块死掉的信息条。 */
.uaa-product-page .uaa-template-creation .uaa-template-summary{
  color:inherit;font:inherit;text-align:left;cursor:pointer;appearance:none;
  transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-template-creation .uaa-template-summary:hover{
  border-color:var(--crimson);background:var(--crimson-soft);box-shadow:var(--shadow-m);transform:translateY(-1px)
}
.uaa-product-page .uaa-template-creation .uaa-template-summary:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.uaa-product-page .uaa-template-creation .uaa-template-summary__copy strong{font-size:14px}
.uaa-product-page .uaa-template-creation .uaa-template-summary:hover .uaa-template-summary__action{
  border-color:var(--crimson);background:var(--crimson-soft);color:var(--crimson)
}
.uaa-product-page .uaa-face-example-preview__stage{
  position:relative;width:min(100%,390px);height:clamp(360px,58vh,520px);margin:0 auto;overflow:hidden;border:1px solid var(--line);border-radius:8px;
  background:#09090b;box-shadow:var(--shadow-s)
}
/* 样例可能是视频（混合视频的双图动作 result 是 mp4），video 与 img 同一套铺法 */
.uaa-product-page .uaa-face-example-preview__stage img,
.uaa-product-page .uaa-face-example-preview__stage video{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.uaa-product-page .uaa-face-example-preview__stage [hidden]{display:none}
.uaa-product-page .uaa-face-example-preview__stage > span{
  position:absolute;right:10px;bottom:10px;padding:5px 8px;border:1px solid rgba(255,255,255,.3);border-radius:8px;
  background:rgba(12,12,16,.7);color:#fff;font-size:10.5px;font-weight:800;line-height:1.2;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
}
.uaa-product-page .uaa-face-example-preview__thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,390px);margin:0 auto}
.uaa-product-page .uaa-face-example-preview__thumb{
  position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;padding:0;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-2);cursor:pointer;appearance:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)
}
.uaa-product-page .uaa-face-example-preview__thumb img,
.uaa-product-page .uaa-face-example-preview__thumb video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.uaa-product-page .uaa-face-example-preview__thumb-label{
  position:absolute;right:5px;bottom:5px;left:5px;display:flex;align-items:center;justify-content:center;min-height:24px;padding:3px 5px;
  border:1px solid rgba(255,255,255,.24);border-radius:6px;background:rgba(12,12,16,.74);color:#fff;
  font-size:10.5px;font-weight:800;line-height:1.2;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.uaa-product-page .uaa-face-example-preview__thumb:hover{border-color:var(--crimson);transform:translateY(-1px)}
.uaa-product-page .uaa-face-example-preview__thumb.is-active,
.uaa-product-page .uaa-face-example-preview__thumb[aria-selected="true"]{border:2px solid var(--crimson);box-shadow:0 0 0 2px var(--crimson-soft)}
.uaa-product-page .uaa-face-example-preview__thumb:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

.uaa-product-page.uaa-template-dialog-open{overflow:hidden}
.uaa-product-page .uaa-template-dialog{
  position:fixed;z-index:1800;inset:0;display:none;align-items:center;justify-content:center;padding:24px
}
.uaa-product-page .uaa-template-dialog.is-open{display:flex}
.uaa-product-page .uaa-template-dialog__veil{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(3,3,6,.8);
  cursor:pointer;appearance:none;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)
}
.uaa-product-page .uaa-template-dialog__panel{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(210px,1.08fr) minmax(190px,.92fr);
  width:min(520px,100%);max-height:min(70dvh,520px);overflow:hidden;border:1px solid var(--line-2);
  border-radius:8px;background:var(--surface);box-shadow:0 30px 90px rgba(0,0,0,.52)
}
.uaa-product-page .uaa-template-dialog__close{
  position:absolute;z-index:4;top:12px;right:12px;display:grid;width:38px;height:38px;place-items:center;padding:0;
  border:1px solid rgba(255,255,255,.36);border-radius:8px;background:rgba(8,8,12,.7);color:#fff;
  font:inherit;font-size:22px;line-height:1;cursor:pointer;appearance:none
}
.uaa-product-page .uaa-template-dialog__close:hover{background:var(--crimson)}
.uaa-product-page .uaa-template-dialog__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.uaa-product-page .uaa-template-dialog__media{display:grid;min-height:260px;overflow:hidden;place-items:center;background:#09090b}
.uaa-product-page .uaa-template-dialog__media img,
.uaa-product-page .uaa-template-dialog__media video{
  display:block;width:100%;height:100%;max-height:min(70dvh,520px);object-fit:contain;background:#09090b
}
.uaa-product-page .uaa-template-dialog__info{
  display:flex;flex-direction:column;align-items:start;gap:11px;min-width:0;padding:44px 20px 20px
}
.uaa-product-page .uaa-template-dialog__meta{
  display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border:1px solid color-mix(in srgb,var(--crimson) 36%,var(--line));
  border-radius:8px;background:var(--crimson-soft);color:var(--crimson);font-size:10.5px;font-weight:850;line-height:1.3
}
.uaa-product-page .uaa-template-dialog__info h2,
.uaa-product-page .uaa-template-dialog__info h3{margin:0;color:var(--title);font-size:19px;line-height:1.3}
.uaa-product-page .uaa-template-dialog__description{margin:0;color:var(--ink-2);font-size:13px;line-height:1.75}
.uaa-product-page .uaa-template-dialog__hint{
  margin:0;padding-top:13px;border-top:1px solid var(--line);color:var(--ink-3);font-size:11.5px;line-height:1.65
}
.uaa-product-page .uaa-template-dialog__use{width:100%;min-height:40px;margin-top:auto}

@media (max-width: 1100px){
  .uaa-product-page .uaa-template-waterfall{column-count:3}
  .uaa-product-page .uaa-template-dialog__panel{grid-template-columns:minmax(200px,1fr) minmax(190px,.82fr);width:min(480px,100%)}
}

@media (min-width: 721px){
  .uaa-product-page [data-face-workspace] .uaa-template-categories{
    display:flex;align-items:end;gap:4px;width:100%;margin-top:10px;padding:0 2px;
    overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent
  }
  .uaa-product-page [data-face-workspace] .uaa-template-category{
    flex:0 0 auto;min-height:44px;padding:0 16px;border:0;border-bottom:2px solid transparent;border-radius:0;
    background:transparent;color:var(--ink-3);box-shadow:none;white-space:nowrap
  }
  .uaa-product-page [data-face-workspace] .uaa-template-category:hover{
    border-bottom-color:color-mix(in srgb,var(--crimson) 54%,transparent);background:var(--crimson-soft);color:var(--crimson);transform:none
  }
  .uaa-product-page [data-face-workspace] .uaa-template-category.is-active,
  .uaa-product-page [data-face-workspace] .uaa-template-category[aria-pressed="true"]{
    border-bottom-color:var(--crimson);background:transparent;color:var(--crimson);box-shadow:none
  }
  .uaa-product-page [data-face-workspace] .uaa-template-category--custom{
    margin-left:auto;border-left:1px solid var(--line);border-bottom-color:transparent;background:transparent;color:var(--crimson)
  }
}

@media (max-width: 720px){
  .uaa-product-page .uaa-template-library,
  .uaa-product-page .uaa-template-creation{width:calc(100% - 32px);margin-bottom:20px}
  .uaa-product-page .uaa-template-library__head{align-items:start;flex-direction:column;gap:14px;margin-bottom:18px;padding:18px}
  .uaa-product-page .uaa-template-library__head h1,
  .uaa-product-page .uaa-template-library__head h2{font-size:24px}
  .uaa-product-page .uaa-template-library__head p{font-size:12px;line-height:1.65}
  .uaa-product-page .uaa-template-library__summary{width:100%;min-width:0;text-align:left}
  /* 一行 3 个：图片换脸共 12 个页签(11 个分类 + 自定义模板)，正好 4 整行，比原来的两列矮 100px 左右。
     没上 4 列是因为「自定义模板」那格是 ＋ 图标 + 5 个字，4 列在 390px 屏上宽度不够，只会被 ellipsis 咬掉一个字。 */
  .uaa-product-page .uaa-template-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .uaa-product-page .uaa-template-category{min-height:42px;padding:6px 6px;font-size:12px}
  .uaa-product-page .uaa-template-category--custom{gap:5px}
  .uaa-product-page .uaa-template-category--custom span{font-size:17px}
  .uaa-product-page .uaa-template-category--custom strong{font-size:12px}
  .uaa-product-page .uaa-template-library__section-head{align-items:center;margin:22px 0 10px}
  .uaa-product-page .uaa-template-library__section-head h2,
  .uaa-product-page .uaa-template-library__section-head h3{font-size:16px}
  .uaa-product-page .uaa-template-waterfall{column-count:2;column-gap:10px}
  .uaa-product-page .uaa-waterfall-tile{margin-bottom:10px}
  .uaa-product-page .uaa-waterfall-tile__use{min-height:128px}
  .uaa-product-page [data-template-workbench][data-media-kind="video"] .uaa-waterfall-tile__use{min-height:0}
  .uaa-product-page .uaa-waterfall-tile__use img{min-height:128px}
  .uaa-product-page [data-template-workbench][data-media-kind="video"] .uaa-waterfall-tile__use img{min-height:0}
  .uaa-product-page .uaa-waterfall-tile__action{right:50px;bottom:10px;left:9px;font-size:10.5px;opacity:1;transform:none}
  .uaa-product-page .uaa-waterfall-tile__preview{right:7px;bottom:7px;min-width:40px;min-height:29px;padding:0 7px;opacity:1}
  .uaa-product-page .uaa-waterfall-tile__check{top:7px;right:7px;width:24px;height:24px}
  .uaa-product-page .uaa-waterfall-tile__meta{top:7px;right:7px;left:7px;gap:6px}
  .uaa-product-page .uaa-waterfall-tile.is-selected .uaa-waterfall-tile__meta,
  .uaa-product-page .uaa-waterfall-tile[aria-current="true"] .uaa-waterfall-tile__meta{right:37px}
  .uaa-product-page .uaa-waterfall-tile__name,
  .uaa-product-page .uaa-waterfall-tile__duration{padding:2px 6px;font-size:10px}
  .uaa-product-page .uaa-waterfall-tile.has-media-error .uaa-waterfall-tile__use{min-height:160px}
  .uaa-product-page .uaa-template-load-more{min-height:42px;margin-top:14px}
  .uaa-product-page .uaa-template-creation{scroll-margin-top:66px}
  .uaa-product-page .uaa-template-creation__bar{align-items:start;margin-bottom:12px;padding:10px}
  .uaa-product-page .uaa-template-creation__back{min-width:40px;min-height:40px;padding:0 9px}
  .uaa-product-page .uaa-template-creation__title{gap:2px;text-align:right}
  .uaa-product-page .uaa-template-creation__title h1,
  .uaa-product-page .uaa-template-creation__title h2{max-width:210px;font-size:15px}
  .uaa-product-page .uaa-template-creation__title p{max-width:210px}
  .uaa-product-page .uaa-template-creation .ai-toolwrap{display:flex;flex-direction:column;gap:16px}
  .uaa-product-page .uaa-template-creation .uaa-product-preview{order:-1;max-width:none}
  .uaa-product-page [data-face-workspace] .uaa-template-creation .uaa-product-preview,
  .uaa-product-page [data-video-workspace] .uaa-template-creation .uaa-product-preview{order:1}
  .uaa-product-page .uaa-face-example-preview__stage{height:min(52vh,400px);min-height:300px}
  .uaa-product-page .uaa-template-creation .ai-flow{order:0;width:100%}
  /* 与桌面同理，按创作态选而不是按 [data-face-workspace]，否则合成视频页在窄屏拿不到这套两列布局。 */
  .uaa-product-page .uaa-template-creation .uaa-template-summary{
    grid-template-columns:64px minmax(0,1fr);gap:8px 10px;min-height:104px
  }
  .uaa-product-page .uaa-template-creation .uaa-template-summary:has(.uaa-template-summary__media[hidden]){
    grid-template-columns:minmax(0,1fr);min-height:92px
  }
  .uaa-product-page .uaa-template-creation .uaa-template-summary__media{grid-row:1 / span 2;width:64px;height:80px}
  .uaa-product-page .uaa-template-creation .uaa-template-summary__copy{grid-column:2}
  .uaa-product-page .uaa-template-creation .uaa-template-summary__action{
    grid-column:2;justify-self:start;min-width:0;min-height:32px;padding:0 11px;font-size:11.5px
  }
  .uaa-product-page .uaa-template-creation .uaa-template-summary:has(.uaa-template-summary__media[hidden]) .uaa-template-summary__copy,
  .uaa-product-page .uaa-template-creation .uaa-template-summary:has(.uaa-template-summary__media[hidden]) .uaa-template-summary__action{grid-column:1}
  .uaa-product-page [data-face-workspace] .uaa-template-summary.is-custom-template{grid-template-columns:minmax(0,1fr);min-height:92px}
  .uaa-product-page [data-face-workspace] .uaa-template-summary.is-custom-template .uaa-template-summary__copy,
  .uaa-product-page [data-face-workspace] .uaa-template-summary.is-custom-template .uaa-template-summary__action{grid-column:1}
  .uaa-product-page .uaa-template-dialog{align-items:end;padding:0}
  .uaa-product-page .uaa-template-dialog__panel{
    grid-template-columns:minmax(0,1fr);width:100%;max-height:92dvh;overflow-y:auto;border-right:0;border-bottom:0;border-left:0;
    border-radius:8px 8px 0 0
  }
  .uaa-product-page .uaa-template-dialog__media{min-height:0}
  .uaa-product-page .uaa-template-dialog__media img,
  .uaa-product-page .uaa-template-dialog__media video{width:auto;max-width:100%;height:auto;max-height:46dvh}
  .uaa-product-page .uaa-template-dialog__info{gap:11px;padding:20px 18px max(20px,env(safe-area-inset-bottom))}
  .uaa-product-page .uaa-template-dialog__info h2,
  .uaa-product-page .uaa-template-dialog__info h3{font-size:20px}
  .uaa-product-page .uaa-template-dialog__close{top:9px;right:9px}
}

@media (prefers-reduced-motion: reduce){
  .uaa-product-page .uaa-template-category,
  .uaa-product-page .uaa-waterfall-tile,
  .uaa-product-page .uaa-waterfall-tile__use img,
  .uaa-product-page .uaa-waterfall-tile__action,
  .uaa-product-page .uaa-waterfall-tile__preview,
  .uaa-product-page .uaa-template-load-more,
  .uaa-product-page .uaa-template-creation__back{transition-duration:.01ms!important}
  .uaa-product-page .uaa-template-category:hover,
  .uaa-product-page .uaa-waterfall-tile:hover,
  .uaa-product-page .uaa-waterfall-tile:hover .uaa-waterfall-tile__use img,
  .uaa-product-page .uaa-template-load-more:hover,
  .uaa-product-page .uaa-template-creation__back:hover{transform:none}
}

/* iOS：<16px 输入框聚焦会放大页面——.ai-textarea 无显式字号(继承<16px)，触屏设备下提到16px消除放大。见 ds/components.css 同类修复。 */
@media (hover:none) and (pointer:coarse){.ai-textarea{font-size:16px!important}}