/* AmiHeadshot web tokens 参考实现 v9（ui-spec-web.md 唯一真源）
   2026-10-07 v9：字体体系换装对齐新样式稿——标题衬线 PT Serif → Fraunces（拉丁）+
   Noto Serif SC 700（中文宋体化，自托管切片 assets/fonts/serif-display.css）；新增
   latin-display（品牌字标 / accent 数字 Fraunces italic）；sec-lead 16/18px txt-2；
   模块标题居中（steps/compare/pricing/faq）；对比表照抄样式稿（920 居中卡 + 竖分隔 +
   列比 1:1.2:1.2）；FAQ 答案 15px txt-2；stats/价格数字统一 40px。v8 结构与 token 沿用。 */

/* 衬线字体注册见 assets/fonts/serif-display.css（Fraunces + Noto Serif SC 切片，base.html 引入） */

:root {
  --accent: #4D42E0;        /* 靛紫 CTA（AmiPhotos 竞品实测口径） */
  --accent-hover: #3F35C4;
  --accent-soft: #EEEBFC;   /* 选中态/浅底（AmiPhotos 同名 token） */
  --accent-mist: #D9D4F8;   /* accent-soft 加深一档：虚线/hover 描边/时间轴线 */
  --ink: #1D243A;           /* 深藏青标题/正文主色 */
  --txt: #3A4258;
  --txt-2: #6B7280;
  --bg: #F3F9FB;            /* 页面底色（浅蓝白） */
  --card: #FFFFFF;
  --line: #E3E9EF;
  --outline: #C9D2DE;       /* 次按钮描边（AmiPhotos 口径） */
  --green: #00B67A;         /* 评分/成功绿 */
  --ok: #00B67A;
  --warn: #DC2626;
  --footer-bg: #1D243A;     /* footer = ink 深藏青 */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 6px rgba(29, 36, 58, .05), 0 12px 32px rgba(29, 36, 58, .07);
  --shadow-up: 0 4px 12px rgba(29, 36, 58, .08), 0 20px 48px rgba(29, 36, 58, .13);
  --serif: "Fraunces", "Noto Serif SC", Georgia, "Songti SC", "SimSun", serif; /* v9 标题衬线：拉丁 Fraunces / 中文 Noto Serif SC（宋体观感），系统宋体兜底 */
  --latin: "Fraunces", "Noto Serif SC", Georgia, serif; /* latin-display：品牌字标 / accent 数字（常配 italic） */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  font-size: 17px;
  line-height: 1.65;
}
/* 横向溢出兜底：clip 不建滚动容器，不影响 sticky header（blob/跑马灯仍由各自 overflow:hidden 裁切；
   .tint 全幅负边距技法依赖 50vw 也由此护栏兜住） */
html, body { overflow-x: clip; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
section { margin: 76px auto; }
/* 标题节奏（v6 全局）：h2 与内容之间永远隔一行 sec-lead 的呼吸，禁止 gap 归零 */
main section > h2 { margin-bottom: 14px; }
/* 白卡交替区块（AmiPhotos 白卡节奏）：页面底 #F3F9FB，区块白底拉通视口 */
.tint {
  background: var(--card);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 24px calc(50vw - 50%) 44px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, .faq summary, .step b { font-family: var(--serif); }
h1 { font-size: clamp(40px, 4.8vw, 56px); line-height: 1.08; letter-spacing: -1.8px; font-weight: 700; text-wrap: balance; color: var(--ink); }
h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.16; letter-spacing: -1.4px; font-weight: 700; text-wrap: balance; color: var(--ink); }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--ink); }
/* 中文标题：衬线栈回落 CJK 黑体后撤负字距（AmiPhotos 栈同款问题，v3 踩坑沿用） */
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 { letter-spacing: 0; }
@media (max-width: 640px) {
  h1 { font-size: 34px; }
  h2 { font-size: 30px; }
  .wrap { padding: 0 20px; }
  section { margin: 44px auto; }
  .tint { padding: 16px 20px 28px; }
}

.header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
/* v9.1 导航分组（样式稿口径）：左组 = logo + 分类链接紧挨；右组 = 语言切换 + CTA */
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.nav-left { display: flex; align-items: center; gap: 40px; min-width: 0; }
.logo { font-family: var(--latin); font-weight: 700; font-size: 19px; letter-spacing: -.2px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex: none; }
.logo-mark { width: 32px; height: 32px; border-radius: 8px; flex: none; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); }
/* 导航（AmiPhotos 口径）：ink 文字 + hover 变主色，无底色块；flex gap 排布 */
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--ink); font-size: 15px; font-weight: 600; padding: 7px 0; border-radius: var(--radius-sm); }
.nav a:hover { color: var(--accent); }
/* 全部产品下拉（产品卡式 mega menu：纯 CSS hover/focus 展开 + motion.js 触屏点按兜底） */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; padding: 7px 0; white-space: nowrap; }
.nav-drop-btn:hover, .nav-drop-btn:focus-visible, .nav-drop.open .nav-drop-btn { color: var(--accent); }
/* caret 无宽高属性时 svg 按内容框默认比例放大（31×19px 实测），中文按钮被挤换行撑到 113px 撑爆 header——
   定死 10×6 与 viewBox 同比，不影响其他 svg（2026-10-08 站长排查结论） */
.nav-drop-btn .caret { width: 10px; height: 6px; flex: 0 0 auto; display: block; transition: transform .18s ease; }
.nav-drop.open .nav-drop-btn .caret { transform: rotate(180deg); }
.drop-menu { position: absolute; top: calc(100% + 10px); left: -16px; width: 344px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(20, 28, 46, .12); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; }
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu, .nav-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.drop-cap { margin: 4px 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--txt-2); }
.drop-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); }
.drop-card img { width: 56px; height: 56px; flex: none; border-radius: 10px; object-fit: cover; background: var(--bg); }
.drop-card b { display: block; font-size: 14.5px; font-weight: 700; color: inherit; }
.drop-card i { display: block; font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--txt-2); margin-top: 2px; line-height: 1.45; }
.drop-card:hover { background: var(--accent-soft); }
.drop-card:hover b { color: var(--accent); }
.drop-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--txt); border-top: 1px solid var(--line); }
.drop-all .caret { width: 10px; height: 6px; flex: 0 0 auto; transform: rotate(-90deg); }
.drop-all:hover { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 16px; flex: none; }
.lang-switch { color: var(--txt-2); }
.lang-switch:hover { color: var(--accent); }
/* 特异性修正（沿 v7 踩坑登记）：.nav a 样式不再覆盖 CTA（CTA 已挪出 .nav），保险保留白字规则 */
.nav-right a.btn, .nav-right a.btn:hover { color: #fff; }
@media (max-width: 920px) { .nav-left { gap: 24px; } .nav { gap: 18px; } }
@media (max-width: 640px) { .nav-left { gap: 16px; } .nav { gap: 14px; } .nav .hide-s { display: none; } }

/* 按钮（AmiPhotos 口径）：16px/600 + 8px 圆角；主=实心靛紫白字；次=白底 #C9D2DE 描边 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 12px 26px; font-family: var(--font); font-size: 16px; font-weight: 600; cursor: pointer; text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--line); color: var(--txt-2); cursor: not-allowed; }
.btn[hidden] { display: none; }   /* L3 20261015-201434：display:inline-flex 压过 UA [hidden]（与 .tray 同坑）——任何挂 hidden 的按钮真隐藏 */
.btn-2 { background: var(--card); color: var(--ink); border: 1.5px solid var(--outline); }
.btn-2:hover { background: var(--card); border-color: var(--ink); color: var(--ink); }
.btn-sm { padding: 8px 16px; font-size: 14px; }

/* ---------- hero v8：pill 徽标 + 双 CTA + 勾清单 + 拖动对比滑块（去洗墙/拍立得） ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 540px) 1fr; gap: 56px;
  align-items: center; margin: 20px auto 28px;
}
.hero-pill { display: inline-block; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; margin-bottom: 20px; }
/* hero 正文（v9 样式稿口径）：18px/1.6/400/txt-2，≤920 16px；H1 与副文层级拉开 */
.hero p.lead { font-size: 18px; line-height: 1.6; color: var(--txt-2); margin: 20px 0 0; max-width: 500px; }
@media (max-width: 920px) { .hero p.lead { font-size: 16px; } }
/* accent 数字/词（latin-display italic）：H1「20 种」、CTA「40」等 */
.hl { font-family: var(--latin); font-style: italic; color: var(--accent); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-side { max-width: 440px; width: 100%; justify-self: center; }
.slider-cap { margin-top: 14px; text-align: center; font-size: 13px; color: var(--txt-2); }
/* 勾清单（hero 横排 / showcase·CTA 复用；.col 竖排变体） */
.check-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0; padding: 0; }
.check-list.col { flex-direction: column; gap: 12px; }
.check-list li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.check-list li::before { content: ""; flex: none; width: 11px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 32px; margin: 8px auto 20px; }
  .hero-side { justify-self: start; }
}

/* v6：跑马灯已删（与风格画廊重复、无语义装饰） */

/* 入场与滚动 reveal */
.rise { animation: rise .65s cubic-bezier(.22, .9, .32, 1) backwards; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, .9, .32, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[style*="--rd"] { transition-delay: var(--rd); }

/* ---------- 风格画廊 v6：白底影册（竖版大图 tile + 2×2 主卡 + 底部遮罩名签） ---------- */
.styles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-flow: dense; }
.style-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; color: var(--ink); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
/* 主卡保持 3/4 比例给跨行提供高度贡献：其内容全为绝对定位，若 aspect 归 auto，
   被跨的行无人撑高会折叠成 0px（实测 389+0 行 → 主卡被压成 405px），勿改回 auto */
.style-card.feat { grid-column: span 2; grid-row: span 2; }
.style-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.style-card .thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(29, 36, 58, .5); font-size: 14px; font-weight: 500; }
/* 显式铺满：缺此规则时 img 按 width=512 属性尺寸渲染，被卡片 overflow:hidden 硬剪成放大裁切（额头贴边） */
.style-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s cubic-bezier(.22, .9, .32, 1); }
.style-card:hover .thumb img { transform: scale(1.045); }
.tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 36, 58, 0) 52%, rgba(29, 36, 58, .82)); transition: background .3s ease; }
.style-card:hover .tile-shade { background: linear-gradient(180deg, rgba(29, 36, 58, .06) 38%, rgba(29, 36, 58, .9)); }
.tile-meta { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 5px; }
.tile-name { color: #fff; font-weight: 600; font-size: 16px; line-height: 1.3; }
.tile-blurb { color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.style-card:hover .tile-blurb, .style-card.feat .tile-blurb { opacity: 1; transform: none; }
.style-card.feat .tile-name { font-size: 21px; }
.style-card.feat .tile-blurb { font-size: 14px; }
/* 缺图回落：柔色底（语义=风格差异） */
.styles-grid .style-card:nth-child(8n+1) .thumb { background: linear-gradient(150deg, #EEEBFC, #D9D4F8); }
.styles-grid .style-card:nth-child(8n+2) .thumb { background: linear-gradient(150deg, #CCFBF1, #99F6E4); }
.styles-grid .style-card:nth-child(8n+3) .thumb { background: linear-gradient(150deg, #EDE9FE, #DDD6FE); }
.styles-grid .style-card:nth-child(8n+4) .thumb { background: linear-gradient(150deg, #FAE8FF, #F5D0FE); }
.styles-grid .style-card:nth-child(8n+5) .thumb { background: linear-gradient(150deg, #E0F2FE, #BAE6FD); }
.styles-grid .style-card:nth-child(8n+6) .thumb { background: linear-gradient(150deg, #FEF9C3, #FDE68A); }
.styles-grid .style-card:nth-child(8n+7) .thumb { background: linear-gradient(150deg, #F1F5F9, #CBD5E1); }
.styles-grid .style-card:nth-child(8n+8) .thumb { background: linear-gradient(150deg, #FFE4E6, #FECDD3); }
@media (max-width: 920px) { .styles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .styles-grid { grid-template-columns: 1fr; } .style-card.feat { grid-column: span 1; grid-row: span 1; aspect-ratio: 3 / 4; } .style-card.feat .tile-blurb { opacity: 1; transform: none; } }

/* 区块 eyebrow（v8 样式稿口径：13px 大写加粗 accent，中英同值装饰标） */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }

/* 「还有 N 种」chips（v8：首页画廊 6 卡之外的 active 风格走文字链） */
.more-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.more-label { font-size: 13px; color: var(--txt-2); }
.more-chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; transition: border-color .15s ease, color .15s ease; }
.more-chip:hover { border-color: var(--accent); color: var(--accent); }
/* chips 行尾的入口链（accent 实底变体） */
.more-chip.cta { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); border-color: var(--accent); color: #fff; }
.more-chip.cta:hover { background: var(--accent-hover); color: #fff; }
.more-chip.cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- showcase v8：白卡两栏（勾清单 + 滑块）+ stats 数据条 ---------- */
.showcase-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.showcase-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.showcase-grid h2 { margin: 0 0 14px; }
.showcase-grid .sec-lead { margin-bottom: 0; }
.showcase-side { display: grid; justify-items: center; }
.showcase-side .ba-slider { width: 100%; max-width: 400px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 28px; }
.stat b { display: block; font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: var(--ink); }
.stat b .unit { font-size: 16px; letter-spacing: 0; margin-left: 5px; color: var(--txt-2); }
.stat .lbl { display: block; margin-top: 4px; font-size: 14px; color: var(--txt-2); }
@media (max-width: 920px) { .showcase-grid { grid-template-columns: 1fr; gap: 28px; } .stat-row { grid-template-columns: repeat(2, 1fr); gap: 20px; } .showcase-card { padding: 20px; } }
@media (max-width: 640px) { .stat b { font-size: 30px; } }

/* ---------- 拖动对比滑块 v8（hero/showcase 共用；JS 缺席静置 50%） ---------- */
.ba-slider { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; --pos: 50%; }
.ba-slider > img, .ba-slider .before { position: absolute; inset: 0; }
.ba-slider img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ba-slider .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; }
.ba-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 12px rgba(0, 0, 0, .35); }
.ba-handle { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1px solid rgba(29, 36, 58, .08); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.ba-handle svg { width: 20px; height: 20px; fill: none; stroke: var(--txt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-tag { position: absolute; top: 12px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 13px; }
.ba-tag.t-before { left: 12px; background: rgba(29, 36, 58, .55); color: #fff; }
.ba-tag.t-after { right: 12px; background: var(--accent-soft); color: var(--accent); }
/* 全覆盖透明 range：键盘/触屏原生拖动，点击任意位置跳位 */
.ba-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* pairs 轮播（2026-10-08 C+）：showcase 侧多组 fade 轮换；单组不渲染本结构（与 v8 全同） */
.ba-carousel { position: relative; display: grid; }
.showcase-side .ba-carousel { width: 100%; max-width: 400px; }
.ba-slide { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.ba-slide.cur { opacity: 1; pointer-events: auto; }
.ba-slide .slider-cap { margin-top: 14px; }
.ba-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.ba-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.ba-dot:hover { background: var(--txt-2); }
.ba-dot.cur { background: var(--ink); }
.ba-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ba-slide { transition: none; } }

/* 三步走 v8：白卡（右上衬线序号水印 + 图标盒），去 v6 时间轴 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px 24px; transition: transform .3s ease, box-shadow .3s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.step-num { position: absolute; right: 22px; top: 12px; font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1; color: var(--accent-soft); }
.step .ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.step .ic svg { color: var(--accent); }
.step h3 { margin: 18px 0 6px; font-size: 17px; }
.step p { color: var(--txt-2); font-size: 14.5px; }
@media (max-width: 920px) { .steps { grid-template-columns: 1fr; gap: 16px; } }

/* v6：信任条（.trust）已删——死代码清理，被隐私六格取代 */

/* FAQ v6：窄列居中（对标竞品 ~720-800px 口径），不吃满 1392 网格 */
.faq { max-width: 768px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 12px; transition: box-shadow .2s ease; }
.faq details[open] { box-shadow: var(--shadow); border-color: var(--accent-mist); }
/* 自绘 chevron：::marker 在 Chrome/Safari 形态不一致 */
.faq summary { cursor: pointer; font-size: 17px; font-weight: 700; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.faq details p { color: var(--txt-2); font-size: 15px; margin-top: 10px; }

/* ---------- CTA band v8：两栏（文案+双按钮+勾清单 | 照片拼贴），accent-soft 底 ---------- */
.cta-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; background: var(--accent-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 48px; color: var(--txt); }
.cta-band h2 { color: var(--ink); font-size: clamp(28px, 3vw, 40px); letter-spacing: -1.2px; }
.cta-band p { color: var(--txt); font-size: 17px; margin: 12px 0 0; max-width: 480px; }
.cta-band .eyebrow { margin-bottom: 8px; }
.cb-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.cta-band .check-list { margin-top: 24px; }
/* 拼贴：主图 + 两张旋转小图 + 虚线胶囊（样式稿口径） */
.cb-collage { position: relative; width: 100%; max-width: 380px; justify-self: center; }
.cb-collage .main { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cb-collage .mini { position: absolute; width: 38%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; border-radius: 12px; border: 4px solid #fff; box-shadow: var(--shadow); }
.cb-collage .mini1 { left: -10%; bottom: 9%; transform: rotate(-6deg); }
.cb-collage .mini2 { right: -8%; top: 8%; width: 36%; transform: rotate(6deg); }
.collage-badge { position: absolute; left: 24px; bottom: -12px; background: var(--card); border: 2px dashed var(--accent); color: var(--accent); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; }
@media (max-width: 920px) { .cta-band { grid-template-columns: 1fr; gap: 36px; padding: 32px 28px; } .cb-collage { max-width: 320px; } .cb-collage .mini1 { left: -4%; } .cb-collage .mini2 { right: -3%; } }
@media (max-width: 640px) { .cta-band { padding: 28px 20px; } }

/* ---------- footer v7：深藏青（=ink）三栏 + 底行版权 ---------- */
.footer { background: var(--footer-bg); margin-top: 76px; padding-top: 48px; }
.f-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr .9fr; gap: 40px; padding-bottom: 36px; }   /* v20：+场合列（数据驱动包链接） */
.footer .logo { color: #fff; margin-bottom: 14px; }
.f-tag { color: #9DA8BC; font-size: 14px; max-width: 340px; margin-bottom: 16px; }
.footer .fam { color: #9DA8BC; font-size: 13px; }
.footer .fam a { margin-left: 4px; }
.f-col h4 { color: #E7ECF3; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 4px 0 14px; }
.f-col a { display: block; color: #9DA8BC; font-size: 14px; margin: 0 0 11px; }
.f-col a:hover { color: #fff; }
.f-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2E3852; padding-top: 18px; padding-bottom: 22px; color: #9DA8BC; font-size: 13px; }
@media (max-width: 640px) { .f-grid { grid-template-columns: 1fr; gap: 28px; } .f-bottom { flex-direction: column; } }

.icon { width: 22px; height: 22px; }
.icon-sm { width: 17px; height: 17px; }
.icon, .icon-sm { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- v4 矩阵：工作台三段有序流（场景 → 风格 → 景别） / examples 页维切换 ---------- */
.wiz-sec + .wiz-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
/* ?entry= 入口引导高亮（studio.js 加挂 .wiz-flash，2.4s 自摘；动效敏感者只换底色） */
.wiz-flash { outline: 2px solid var(--accent-mist); outline-offset: 6px; border-radius: var(--radius-sm); background: var(--accent-soft); transition: background 1.6s ease, outline-color 1.6s ease; }
.wiz-h { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
/* 风格卡精选徽标 */
.pick-badge { display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent-mist); background: var(--accent-soft); border-radius: 999px; padding: 1.5px 8px; vertical-align: 1px; }
.pick.on .pick-badge { background: #fff; }
/* 场景卡（v4 scenes_lib）——标签库退役批删除（零消费者死样式，含 .scene-info 子选择器） */
.scene-meta { font-size: 12.5px; color: var(--txt-2); }
@media (max-width: 640px) { .scene-grid { grid-template-columns: 1fr; } }
/* examples 页维切换（按风格 / 按场景） */
.ex-tabs { display: flex; gap: 8px; margin: 8px auto 4px; width: fit-content; }

/* ---------- 工作台 v2：阶段式（编辑双栏 → 结果全宽）+ 排版修正 ---------- */
/* 步骤条：编辑态 1/2 活跃（accent 描边），结果态 3 当前实底、1/2 完成浅底 */
.steps-bar { list-style: none; display: flex; gap: 28px; margin: 0 0 24px; padding: 0; flex-wrap: wrap; }
.steps-bar li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--txt-2); }
.steps-bar li i { font-style: normal; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); font-size: 13px; font-weight: 700; flex: none; }
/* v16 进度态：当前步 = accent 实心；已完成步 = accent 描边；未来步 = 灰 */
.steps-bar[data-step="1"] li[data-step="1"] i,
.steps-bar[data-step="2"] li[data-step="2"] i,
.steps-bar[data-step="3"] li[data-step="3"] i,
.steps-bar[data-step="4"] li[data-step="4"] i { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps-bar[data-step="2"] li[data-step="1"] i,
.steps-bar[data-step="3"] li[data-step="1"] i, .steps-bar[data-step="3"] li[data-step="2"] i,
.steps-bar[data-step="4"] li[data-step="1"] i, .steps-bar[data-step="4"] li[data-step="2"] i, .steps-bar[data-step="4"] li[data-step="3"] i { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.steps-bar[data-step="2"] li[data-step="1"], .steps-bar[data-step="3"] li[data-step="1"], .steps-bar[data-step="3"] li[data-step="2"],
.steps-bar[data-step="4"] li[data-step="1"], .steps-bar[data-step="4"] li[data-step="2"], .steps-bar[data-step="4"] li[data-step="3"] { color: var(--ink); }
@media (max-width: 640px) { .steps-bar { gap: 16px; } .steps-bar li { font-size: 13px; } .steps-bar li span { display: none; } .steps-bar[data-step="1"] li[data-step="1"] span, .steps-bar[data-step="2"] li[data-step="2"] span, .steps-bar[data-step="3"] li[data-step="3"] span, .steps-bar[data-step="4"] li[data-step="4"] span { display: inline; } }

/* v16 满屏分步段：一步一事；[hidden] 显式压 display（grid/flex 特异性踩坑沿 v2 注记） */
.step-sec { min-height: calc(100vh - 220px); display: block; }
.step-sec[hidden] { display: none; }
.step-inner { max-width: 1100px; margin: 0 auto; }
.step-inner h2 { font-size: 26px; letter-spacing: -.8px; margin: 0 0 14px; }
.step-cta { margin-top: 22px; }
.step-cta .btn { min-width: 220px; }
.btn-xl { width: 100%; padding: 14px 18px; font-size: 16px; margin-top: 14px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.panel h2 { font-size: 26px; letter-spacing: -.8px; }

.drop {
  border: 2px dashed var(--accent-mist); border-radius: 10px; padding: 44px 20px; text-align: center;
  color: var(--txt-2); cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
  background: #FAF9FE;
}
.drop p { font-size: 15.5px; font-weight: 500; color: var(--txt); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.drop img.preview { max-width: 100%; max-height: 260px; border-radius: 8px; animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
/* v16 步 1 大拖拽区（满屏居中卡主视觉） */
.drop-xl { padding: 72px 28px; }
.drop-xl p { font-size: 17px; }
/* v1.1 多图上传预览条（1-5 张缩略图） */
.previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.previews img { width: 56px; height: 56px; object-fit: cover; object-position: top center; border-radius: 8px; border: 1px solid var(--line); animation: pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.hint { font-size: 13px; line-height: 1.55; color: var(--txt-2); margin-top: 10px; }

.consent { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-top: 20px; background: var(--bg); }
.consent ul { list-style: none; margin: 8px 0 14px; }
.consent li { font-size: 14px; line-height: 1.55; color: var(--txt); padding-left: 22px; position: relative; margin: 8px 0; }
.consent li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 6px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.consent label { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--txt); align-items: flex-start; cursor: pointer; padding: 6px 0; }
.consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }

.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 640px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
/* pick v2：button 化（键盘可达）——reset 继承字体 + 左对齐 + 独立行高 */
.pick { font: inherit; text-align: left; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; cursor: pointer; font-size: 14.5px; line-height: 1.4; color: var(--txt); background: var(--card); transition: border-color .15s, background .15s, color .15s; }
.pick:hover { border-color: var(--accent-mist); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.pick-bar { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pick-group { margin-top: 22px; }
.pick-group h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--txt-2); letter-spacing: .06em; text-transform: uppercase; }
.pick-group .pick-grid { margin-top: 0; }
/* 选区反馈（est）：比 hint 高一档，是关键操作回显 */
.hint#est { font-size: 14px; color: var(--txt); }

/* 结果态（v2 全宽 panel） */
.stage-results { margin-top: 4px; }
.results-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.results-head h2 { margin: 0; }
.overall { font-size: 15px; color: var(--txt); margin: 0; }
.results-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.dl-all-hint { margin-top: 10px; }
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 920px) { .results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .results { grid-template-columns: 1fr; } }
.shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); position: relative; }
.shot .frame { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--txt-2); font-size: 13px; background: linear-gradient(135deg, #F3F9FB, #EEEBFC); }
.shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; animation: pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.shot .bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 13px; }
.shot .st-queued { color: var(--txt-2); }
.shot .st-running { color: var(--accent); }
.shot .st-succeeded { color: var(--green); }
.shot .st-failed { color: var(--warn); }
.skel { width: 70%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #E3E9EF 25%, #EEF2F7 50%, #E3E9EF 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }

.err-msg { background: #FEF2F2; border: 1px solid #FECACA; color: var(--warn); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; margin-top: 14px; }
.ok-note { color: var(--green); font-size: 14px; margin-top: 10px; }
.muted { color: var(--txt-2); font-size: 14px; }

.article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; max-width: 760px; margin: 0 auto; }
.article h2 { font-size: 22px; margin: 28px 0 10px; }
.article p { color: var(--txt); margin-bottom: 12px; }
.draft-tag { display: inline-block; background: #FEF9C3; color: #854D0E; border: 1px solid #FDE68A; font-size: 12px; border-radius: 999px; padding: 2px 10px; margin-bottom: 20px; }

/* ---------- v5 对标模块（v8 首页改版后仅存风格页仍用项） ---------- */
.example-img { width: 100%; height: auto; aspect-ratio: 1 / 1.15; object-fit: cover; object-position: top center; border-radius: 12px; display: block; }

/* ---------- v18 风格详情页：姿势集图组与配套（静态展示；与工作台 .pose-strip 交互条语义不同，独立类避免耦合） ---------- */
.pose-set { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.hero-visual .pose-set { max-width: 440px; }   /* 与首页 .hero-side 440 同体量，防 hero 右列 2×2 过高 */
.pose-set-item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.pose-set-item img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; }   /* img 双轴接管纪律：不写 width/height 属性 */
.pose-tag { position: absolute; left: 8px; bottom: 8px; background: rgba(29,36,58,.82); color: #fff; font-size: 12px; line-height: 1; padding: 5px 10px; border-radius: 999px; }   /* 视觉同 .tpl-poses-badge（名签位在左下） */
.price-note { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 16px 0 0; }
.pose-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pose-chip { border: 1px solid var(--line); background: var(--card); color: var(--txt-2); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.pack-list { max-width: 620px; margin: 24px auto 0; }
@media (max-width: 640px) { .pose-set { gap: 8px; } .pose-tag { font-size: 11px; left: 6px; bottom: 6px; padding: 4px 8px; } }

/* 区块 lead（v9 样式稿 SectionHead desc 口径）：18px txt-2 relaxed，≤640 16px */
.sec-lead { color: var(--txt-2); font-size: 18px; line-height: 1.6; margin: 0 0 36px; max-width: 780px; }
@media (max-width: 640px) { .sec-lead { font-size: 16px; } }
/* 模块标题居中（v9.2：全模块统一，styles/privacy 一并居中；「全部风格免费试」并入 chips 行尾） */
section.center > .eyebrow, section.center > h1, section.center > h2, section.center > .sec-lead { margin-left: auto; margin-right: auto; text-align: center; }
section.center .cb-btns { justify-content: center; }  /* v12.2 hero 主 CTA 与节尾 CTA 随模块居中（原仅三件套被居中，按钮/H1 靠左） */
.ph { width: 100%; border-radius: 10px; border: 1.5px dashed var(--accent-mist); background: linear-gradient(135deg, #FAF9FE, #EEEBFC); }
.folio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.folio-item { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.folio-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.folio-item img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.folio-tag { position: absolute; left: 10px; bottom: 10px; background: rgba(29, 36, 58, .72); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.quote p { font-size: 14.5px; color: var(--txt); }
.quote footer { margin-top: 12px; font-size: 13px; color: var(--txt-2); }
@media (max-width: 920px) { .quotes { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .folio-grid { grid-template-columns: repeat(2, 1fr); } .pack ul { grid-template-columns: 1fr; } }

.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sec-grid { grid-template-columns: 1fr; } }
/* 隐私卡 v8：浅底 + 图标盒 + 衬线标题（白带上的浅蓝卡，样式稿口径） */
.sc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; transition: border-color .2s ease; }
.sc:hover { border-color: rgba(77, 66, 224, .4); }
.sc .ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); margin-bottom: 14px; }
.sc .ic svg { color: var(--accent); }
.sc h3 { font-family: var(--serif); font-size: 17px; }
.sc p { font-size: 14px; color: var(--txt); margin-top: 6px; }

/* 对比表 v9：照抄样式稿——920 居中卡 + 列比 1:1.2:1.2 + 第 2/3 列竖分隔 + 斑马纹 */
.cmp-wrap { overflow-x: auto; max-width: 920px; margin: 0 auto; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cmp th, .cmp td { padding: 16px 24px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); }
.cmp tbody th { color: var(--ink); font-weight: 600; width: 29%; }
.cmp thead th { background: var(--bg); font-size: 15px; }
.cmp thead th.us { color: var(--accent); font-family: var(--latin); }
.cmp thead th:last-child { color: var(--txt-2); }
.cmp thead th.us, .cmp thead th:last-child { border-left: 1px solid var(--line); }
.cmp thead .mark-sm { width: 18px; height: 18px; vertical-align: -4px; margin-right: 7px; color: var(--accent); }
.cmp tbody th .icon-sm { color: var(--accent); vertical-align: -3px; margin-right: 8px; }
.cmp tbody tr:nth-child(even) { background: rgba(243, 249, 251, .6); }
.cmp td.us { font-weight: 600; color: var(--ink); border-left: 1px solid var(--line); }
.cmp td:last-child { color: var(--txt-2); border-left: 1px solid var(--line); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) { .cmp th, .cmp td { padding: 12px 16px; font-size: 13px; } }

/* ---------- 定价 v8：衬线大价格 + 绿字免费标 + 主推卡 2px 描边（beta 横条并入 sec-lead） ---------- */
.price-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1160px; margin: 0 auto; align-items: stretch; }
@media (max-width: 920px) { .price-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 36px 32px; text-align: center; box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.price:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.price .tier { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-2); margin-bottom: 12px; }
.amt-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.price .amt { font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; color: var(--ink); }
.price .per { font-size: 13px; color: var(--txt-2); margin: 8px 0 6px; }
.price ul { list-style: none; text-align: left; margin: 18px 0 24px; }
.price li { font-size: 15px; color: var(--txt); padding: 7px 0 7px 26px; position: relative; }
.price li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 11px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.price .btn { width: 100%; }
.price.hot { border: 2px solid var(--accent); box-shadow: var(--shadow-up); }
.hot-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.pr-note { font-size: 13px; color: var(--txt-2); text-align: center; max-width: 640px; margin: 20px auto 0; }
@media (max-width: 640px) { .price-row { grid-template-columns: 1fr; } }

/* ---------- examples 页（/styles/）v10：族节模板 + 纯图卡网格（参照 headshotphoto 节奏） ---------- */
.ex-section .sec-lead { margin-bottom: 28px; }
.ex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1072px; margin: 0 auto; }  /* v12.1 强居中：4×256+3×16，标题居中而网格随 wrap 拉伸时视觉割裂（用户截图反馈） */
.ex-card { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.ex-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
/* img 双轴接管（CLS 纪律）：显式 3/4 竖版比例 + top center 裁切 */
.ex-card img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block; transition: transform .5s cubic-bezier(.22, .9, .32, 1); }
.ex-card:hover img { transform: scale(1.04); }
.ex-name { position: absolute; left: 10px; bottom: 10px; background: rgba(29, 36, 58, .72); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.ex-section .cb-btns { margin-top: 28px; }
@media (max-width: 920px) { .ex-grid { grid-template-columns: repeat(2, 1fr); max-width: 528px; } }  /* 2×256+16 */
@media (max-width: 640px) { .ex-grid { gap: 10px; } .ex-name { font-size: 11px; padding: 3px 9px; } }

/* 风格页 hero 右列：大图限宽靠右，配合 hero 横通出血 */
.hero-visual { display: flex; justify-content: flex-end; }
.hero-visual .example-img { max-width: min(100%, 580px); }

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .rise { animation: none; opacity: 1; }
}

/* ---------- 工作台 v5（B4 目录模型）：照片墙 / 参照人物行 / 统一进度条 / 分组交付预览 ---------- */

/* v1.1 档位选择器（左 panel）：radio 组 + 付费档 email 输入 */
.plan-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plan-opt { border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 7px 12px; font-size: 13.5px; color: var(--txt); cursor: pointer; display: inline-flex; flex-direction: column; gap: 1px; }
.plan-opt small { font-size: 11px; color: var(--txt-2); }
.plan-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--ink); }
.plan-opt beta { font-size: 10px; color: var(--ok); font-weight: 700; letter-spacing: .4px; }
#pay-email { margin-top: 10px; width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }
#pay-email:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) { .plan-row { gap: 6px; } .plan-opt { padding: 6px 10px; font-size: 12.5px; } }

/* 照片墙：模板卡网格（3/4 竖版封面 + 名签；标签库退役批：筛选组样式删除） */
.wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 920px) { .wall-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wall-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.tpl-card { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease; }
.tpl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); }
.tpl-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-up); }
.tpl-cover { cursor: pointer; }
.tpl-cover img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block; }
.tpl-meta { cursor: pointer; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.tpl-name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
/* v20：.tpl-tags/.tpl-tag 随 tag 徽标退场删除；标签库退役批：.filter-bar/.chip 筛选样式一并删除 */

/* ---------- v20 工作台真全屏（main.studio-full 布局变体；挑选在前向导） ---------- */
main.studio-full { max-width: none; padding: 0; }
.studio-full .studio-sec { padding-left: 0; padding-right: 0; }
.studio-full .steps-bar { position: sticky; top: 72px; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0; padding: 14px 40px 12px; }
.studio-full .step-sec { min-height: calc(100vh - 150px); padding: 30px 40px 120px; }
/* 站长拍板（2026-10-15 截图反馈）：向导内容默认全宽——文本头单独限可读宽 760，
 * 包卡墙/模板墙/生成墙真正吃满视口（「不是 1400、1200 这种宽度」原话）；表单步自限居中 */
.studio-full .step-inner { max-width: none; }
.studio-full #step-1 h2, .studio-full #step-1 .hint { max-width: 760px; }
.studio-full #step-2 .step-inner { max-width: 900px; margin: 0 auto; }   /* 上传：单一任务大卡居中 */
.studio-full #step-3 .step-inner { max-width: 1160px; margin: 0 auto; }  /* 确认支付：网格+表单可读宽 */
.studio-full #step-4 .step-inner { max-width: none; }   /* 生成墙全宽交付 */
.studio-full .tray { position: fixed; left: 20px; right: 20px; bottom: 16px; z-index: 45; margin: 0; }
.tray[hidden] { display: none; }   /* .tray display:flex 压过 UA [hidden]，交付态收起须显式 none */
.studio-full .wall-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 640px) {
  .studio-full .steps-bar { padding: 12px 20px 10px; }
  .studio-full .step-sec { padding: 22px 20px 120px; }
  .studio-full .tray { left: 12px; right: 12px; }
}

/* 参照人物行（选中卡内联展开；防歧义文案 + 圆头像） */
.cast-row { padding: 10px 12px 14px; border-top: 1px dashed var(--line); }
.cast-note { font-size: 12px; color: var(--txt-2); margin: 0 0 8px; line-height: 1.45; }
.cast-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.cast-av { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; padding: 0; border: 2px solid transparent; cursor: pointer; background: none; }
.cast-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cast-av.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* 统一进度条（生成态；终态收起） */
.progress { margin: 6px 0 2px; width: 100%; max-width: 640px; }
.progress-bar { height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .6s ease; }

/* 交付预览分组：组头（参照样片同屏 = WYSIWYG 验证位）+ A/B 双槽 */
.tpl-group { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 14px 16px 16px; }
.results .tpl-group { margin-bottom: 16px; }
.tg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tg-ref { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--accent-mist); }
.tg-ref img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tg-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.tg-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .tg-shots { grid-template-columns: 1fr; } .tpl-group { padding: 12px; } }

/* 收藏星标（槽位右上角；sessionStorage 态） */
.shot { position: relative; }
.fav { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255, 255, 255, .88); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; padding: 0; }
.fav svg { width: 18px; height: 18px; fill: none; stroke: var(--txt-2); stroke-width: 1.8; }
.fav.on svg { fill: #f5b301; stroke: #c99700; }
.fav:hover svg { stroke: var(--ink); }


/* ---------- P1 v14（flow-redesign）：header 登录态 / inline 登录 / 场景包条 / 选择托盘 / 生成墙 / 账户页 ---------- */

/* header 登录态：静态默认 Log in 链接 → 有 session 升级账户菜单（hover/focus-within 沿 nav-drop 模式） */
.nav-auth { display: flex; align-items: center; }
.nav-login { color: var(--txt-2); font-size: 15px; font-weight: 600; padding: 7px 0; }
.nav-login:hover { color: var(--accent); }
.nav-user { position: relative; }
.nav-user-btn { background: none; border: 0; cursor: pointer; color: var(--txt); font: inherit; font-size: 15px; font-weight: 600; padding: 7px 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-btn:hover, .nav-user:focus-within .nav-user-btn { color: var(--accent); }
.user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(20, 28, 46, .12); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; }
.nav-user:hover .user-menu, .nav-user:focus-within .user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu a, .user-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 12px; border-radius: var(--radius-sm); }
.user-menu a:hover, .user-menu button:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 640px) { .nav-auth .hide-s { display: none; } }

/* inline 登录门槛（工作室左栏；两字段嵌流程） */
.inline-auth { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.inline-auth h3 { font-size: 16px; margin: 0 0 12px; color: var(--ink); }
.inline-auth input { width: 100%; border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: 15px; margin-bottom: 10px; background: var(--card); }
.inline-auth input:focus { outline: 2px solid var(--accent-mist); border-color: var(--accent); }
.inline-auth .linklike { background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; color: var(--accent); padding: 4px 0; }
.inline-auth .linklike:hover { text-decoration: underline; }
#auth-known p { font-size: 14px; color: var(--txt); margin: 0 0 6px; overflow-wrap: anywhere; }

/* 场景包条（照片墙顶部横滑；预置勾选组合，非锁定） */
/* v16 场景包大卡（步 2 推荐视图主入口）：2×2 封面格拼贴 + 名 + blurb + N 个形象 */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 8px; }   /* v20 全宽后 240→300；min(300px,100%) 钳制防 ≤379px 窄容器轨道溢出（L3 20261015-210200） */
.pack-hero { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer; font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pack-hero:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-up); }
.ph-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 10px; overflow: hidden; background: var(--accent-soft); aspect-ratio: 4 / 3; }
.ph-collage img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ph-collage.ph-few img:first-child:last-child { grid-column: 1 / -1; }
.ph-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.ph-meta b { font-size: 15.5px; color: var(--ink); }
.ph-meta i { font-style: normal; font-size: 13px; color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph-meta em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); }
.pack-hero.ghost { border-style: dashed; border-color: var(--accent-mist); background: none; }
.pack-hero.ghost .ph-collage-ghost { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: none; }
.pack-hero.ghost .ph-collage-ghost::before { content: "＋"; font-size: 34px; font-weight: 300; color: var(--accent-mist); }
.pack-hero.ghost .ph-meta b { color: var(--accent); }
.pack-hero.ghost:hover .ph-collage-ghost::before { color: var(--accent); }
#adjust-view .linklike { margin-bottom: 12px; display: inline-block; }

/* 选择托盘（照片墙底部常驻粘性；计数 + 总价 + 生成按钮） */
.tray { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 28, 46, .14); padding: 12px 16px; }
#tray-count { font-size: 15px; font-weight: 600; color: var(--ink); }
.tray .btn { flex: none; }
@media (max-width: 640px) { .tray { flex-wrap: wrap; } .tray .btn { width: 100%; } }

/* v16 步 3 确认支付：左确认网格 + 右摘要/登录/支付 */
.pay-cols { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: start; }
@media (max-width: 920px) { .pay-cols { grid-template-columns: 1fr; } }
.confirm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.cf-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.cf-cover img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: 8px; display: block; background: var(--accent-soft); }
.cf-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cf-name { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-remove { border: 0; background: none; color: var(--txt-2); font-size: 12px; cursor: pointer; padding: 2px 4px; text-decoration: underline; }
.cf-remove:hover { color: var(--bad); }
.cf-casts .cast-avatars { margin-top: 6px; }
.pay-right { position: sticky; top: 96px; }
.pay-right .inline-auth { margin-top: 14px; }
.pay-summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.pay-line { font-size: 15px; color: var(--txt); margin: 0 0 6px; }
.pay-total { font-size: 34px; font-weight: 700; letter-spacing: -1px; color: var(--ink); margin: 0 0 8px; }
.pay-summary .hint { margin: 0; }

/* 生成墙（P1 每模板 1 张）：三件套下载 + Redo 行、圆裁预览 */
.tg-shots { grid-template-columns: 1fr; }  /* P1 单卡：覆盖 2 列默认（A/B 双槽退役） */
.shot-actions { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.shot-actions .btn { margin: 0; }
.circle-prev { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: var(--shadow); }
.circle-prev img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-radius: 50%; }
.shot .frame { position: relative; }

/* 首页定价单卡（P1 $2.99 直通；四卡退役） */
.price-row.price-single { justify-content: center; }
.price-row.price-single .price { max-width: 420px; }

/* 账户页组（窄卡模板） */
.acct-sec { max-width: 460px; margin: 0 auto; padding: 48px 0 24px; }
.acct-sec.acct-wide { max-width: 720px; }
.acct-sec > h1 { font-size: 32px; margin: 0 0 20px; }
.acct-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin-bottom: 18px; }
.acct-card h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.6px; }
.acct-card h2 { font-size: 18px; margin: 0 0 14px; }
.acct-sub { font-size: 14.5px; color: var(--txt-2); line-height: 1.6; margin: 0 0 16px; }
.acct-card input { width: 100%; border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: 11px 12px; font: inherit; font-size: 15px; margin-bottom: 12px; background: var(--card); }
.acct-card input:focus { outline: 2px solid var(--accent-mist); border-color: var(--accent); }
.acct-card .btn { width: 100%; }
.acct-alt { text-align: center; font-size: 14px; margin: 14px 0 0; }
.acct-alt a { color: var(--accent); font-weight: 600; }
.acct-alt a:hover { text-decoration: underline; }
.acct-danger { border-color: #f3d4d4; }
.btn-danger { background: var(--warn); border-color: var(--warn); }
.btn-danger:hover { background: #b91f1f; border-color: #b91f1f; }

/* 我的订单卡列表 */
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order-card { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.order-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.oc-thumb { width: 56px; height: 56px; flex: none; border-radius: 10px; background: var(--accent-soft) center/cover no-repeat; }
.oc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-meta b { font-size: 15px; color: var(--ink); }
.oc-meta i { font-style: normal; font-size: 13px; color: var(--txt-2); }
.oc-state { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 12px; flex: none; }
.oc-state.exp { color: var(--txt-2); background: #eef1f4; }
.oc-go { font-size: 14px; font-weight: 600; color: var(--accent); flex: none; }
@media (max-width: 640px) { .acct-sec { padding: 32px 0 16px; } .order-card { flex-wrap: wrap; } }

/* ---------- v17 姿势集（2026-10-12，flow-redesign §15 / ui-spec v17） ---------- */
.tpl-cover { position: relative; }
.tpl-poses-badge { position: absolute; left: 8px; top: 8px; background: rgba(29,36,58,.82); color: #fff; font-size: 12px; line-height: 1; padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.tpl-count { color: var(--txt-2); font-size: 13px; margin-left: 6px; }
.pose-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; }
.pose-av { position: relative; width: 56px; flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.pose-av img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: 8px; transition: filter .2s ease, opacity .2s ease; }
.pose-av.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tpl-card.on .pose-av:not(.on) img { filter: grayscale(.7); opacity: .45; }   /* 选中态：取消的姿势置灰（v17 去勾语义） */
.pose-all { flex: 0 0 auto; align-self: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--txt-2); font: inherit; font-size: 12px; line-height: 1.25; padding: 0 12px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.pose-all:hover { color: var(--ink); border-color: var(--accent); }
.pose-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-poses { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cf-pose { display: flex; align-items: center; gap: 10px; }
.cf-pose img { width: 40px; height: 53px; object-fit: cover; object-position: top center; border-radius: 6px; display: block; }
.cf-pose-name { flex: 1; font-size: 14px; color: var(--txt); }
.cf-pose-remove { border: 0; background: none; color: var(--txt-2); font-size: 12px; cursor: pointer; padding: 2px 4px; text-decoration: underline; }
.cf-pose-remove:hover { color: var(--bad); }
@media (max-width: 640px) { .pose-av { width: 48px; } }

/* ---------- v20 站点架构：场景包区（首页）/ 包页 / 相关包 chips ---------- */
.linklike { display: inline-block; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent); cursor: pointer; text-decoration: none; }
.linklike:hover { text-decoration: underline; }
/* v20.1 首页场景包区（站长拍板 2026-10-15：横排大卡吃满网格——原 2×2+1160 上限与规范「4 包大卡横排」不符） */
.packs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; max-width: none; margin: 0 auto; text-align: left; }
.pack-card { display: grid; grid-template-columns: 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.pack-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-up); text-decoration: none; }
.pack-card-info b { font-size: 17px; font-weight: 700; }
.pack-card-info p { font-size: 14px; color: var(--txt-2); margin: 6px 0 0; line-height: 1.55; }
.pack-card-meta { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--accent); font-weight: 600; }
.pk-collage { display: grid; gap: 4px; }
.hero-visual .pk-collage { max-width: 440px; }   /* 包页 hero 右列体量对齐 pose-set/hero-side（2026-10-15：双轴接管修复后 collage 失去隐性压高，显式限宽） */
.pk-collage img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: 8px; display: block; }   /* height:auto 必须显式接管——img 属性 height=512 会让 aspect-ratio 失效爆高（ui-spec「双轴接管」坑，2026-10-15 首页实测 1066px 卡） */
.pk-collage.pk-n1 { grid-template-columns: 1fr; }
.pk-collage.pk-n2, .pk-collage.pk-n3, .pk-collage.pk-n4 { grid-template-columns: 1fr 1fr; }
.pk-collage.pk-n3 img:last-child { grid-column: span 2; aspect-ratio: 3 / 2; object-position: center 22%; }
.pk-look { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 44px; align-items: center; padding: 38px 0; border-top: 1px solid var(--line); text-align: left; }
.pk-look:first-of-type { border-top: 0; }
.pk-look h3 { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: -.4px; }
html[lang="zh"] .pk-look h3 { letter-spacing: 0; }
.pk-look-blurb { color: var(--txt-2); margin: 10px 0 0; line-height: 1.6; }
.pk-look .price-note { margin-top: 12px; }
.pk-look-cta { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.pk-look-visual .pose-set { max-width: 440px; margin: 0 auto; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pk-chips .pose-chip { color: var(--accent); text-decoration: none; }
.pk-chips .pose-chip:hover { text-decoration: underline; }
@media (max-width: 920px) {
  .packs-row { grid-template-columns: 1fr; }
  .pk-look { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 640px) {
}

/* ---------- v20 模板页包回链（标签库退役批：目录筛选样式删除） ---------- */
.pk-back { margin-top: 14px; align-items: center; }
.pk-back-label { font-size: 13px; color: var(--txt-2); margin-right: 4px; }

/* ---------- v20 AuthModal（全站模态认证）+ /account/ hub ---------- */
.auth-mask { position: fixed; inset: 0; z-index: 90; background: rgba(29, 36, 58, .48); display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-modal { position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: var(--radius); box-shadow: 0 24px 64px rgba(20, 28, 46, .22); padding: 28px; }
.auth-modal h3 { font-family: var(--serif); font-size: 24px; margin: 0 0 16px; }
.auth-modal form { display: grid; gap: 10px; }
.auth-modal input { width: 100%; border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: 11px 14px; font: inherit; font-size: 15px; }
.auth-modal input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.am-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--txt-2); cursor: pointer; padding: 4px; }
.am-close:hover { color: var(--ink); }
.acct-sec-h { font-size: 22px; margin: 34px 0 14px; }
.acct-verify { border-left: 3px solid var(--accent); }
.acct-card h3 { font-size: 17px; margin: 0 0 10px; }
@media (prefers-reduced-motion: no-preference) { .auth-mask { animation: auth-in .16s ease; } }
@keyframes auth-in { from { opacity: 0; } }