/* 好图复刻 · 公众站样式
   设计语言（学习 Winq）：暗色中性面 + 1px 发丝线 + 单一强调色。
   强调色纪律：柠檬绿只表示「图钉 / 激活 / 进度 / 生成中」，不做大面积铺色。
   结构：tokens → 排版 → 控件 → 导航 → Hero → 数据条 → 创作台 → 原理行 → FAQ → 尾部 → 认证页 → 作品页 → 杂项 */
:root {
  --surface: #08090a;
  --surface-raised: #101113;
  --surface-sunken: #050506;
  --line: #1f2023;
  --line-strong: #5f6168;
  --ink: #f7f8f8;
  --ink-muted: #8a8f98;
  --action: #f7f8f8;
  --on-action: #08090a;
  --pin: #c8f03c;
  --pin-soft: #1a2208;
  --pin-line: #5d6b2a;
  --pin-text: #d4f55e;
  --on-pin: #191919;
  --ok: #6cb8f5;
  --err: #ff8a7a;
  --blue: var(--pin-text); /* 兼容历史内联样式 */
  --focus: var(--pin-text);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-raised: 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 40px rgba(0, 0, 0, .6);
  --shadow-pin: 0 0 0 2px var(--pin), 0 0 32px 6px rgba(200, 240, 60, .28);
  --font: "OPPO Sans", "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, "OPPO Sans", "PingFang SC", "Microsoft YaHei", monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/24px var(--font);
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
.icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(200, 240, 60, .25); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px var(--surface-sunken) inset;
  transition: background-color 9999s;
}
[hidden] { display: none !important; }
.muted { color: var(--ink-muted); }

/* ---------- 排版 ---------- */
h1, h2, h3 { font-family: var(--font); margin: 0; text-wrap: balance; }
.eyebrow { display: flex; align-items: center; gap: var(--space-2);
           font: 500 13px/18px var(--font); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pin); flex: none; }
.eyebrow b { color: var(--ink); font-weight: 600; }
.display-xl { font-size: clamp(42px, 6.8vw, 76px); line-height: 1.06; font-weight: 600; letter-spacing: -.03em; }
.display-l { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; }
.display-xl .dot, .display-l .dot, .page-head .dot { color: var(--pin); }
.heading { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; }
.lead { font-size: 17px; line-height: 28px; letter-spacing: -.005em; color: var(--ink-muted);
        max-width: 52ch; margin: var(--space-4) 0 0; }
.sec-head { max-width: 680px; margin-bottom: var(--space-12); }
.center { text-align: center; }
.center .sec-head, .center .lead { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* ---------- 布局骨架 ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-8); }
.main { flex: 1; }
section { padding: var(--space-24) 0; }
.section-tight { padding: var(--space-16) 0; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
       min-height: 44px; font: 500 15px/20px var(--font); letter-spacing: -.005em;
       border-radius: var(--radius-md); padding: var(--space-3) 18px;
       border: 1px solid transparent; cursor: pointer; white-space: nowrap;
       color: var(--ink); background: none; text-decoration: none;
       transition: opacity .15s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--action); color: var(--on-action); }
/* hover 只压暗背景、不动文字色：opacity 会让整个按钮半透明，
   在毛玻璃（backdrop-filter）导航上与深色底混合后文字对比度塌掉 */
.btn-primary:hover { background: #e4e5e6; }
.btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--line-strong); }
.btn-lg { min-height: 48px; font-size: 16px; line-height: 22px; padding: 13px 22px; width: 100%; }
.btn-sm { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* 兼容旧类名（JS 生成的下载按钮等） */
.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
          min-height: 44px; font: 500 15px/20px var(--font); border-radius: var(--radius-md);
          padding: var(--space-3) 18px; border: 1px solid var(--line); cursor: pointer;
          color: var(--ink); background: var(--surface-raised); white-space: nowrap; }
.mp-btn:hover { border-color: var(--line-strong); }
.mp-btn.primary { background: var(--action); border-color: transparent; color: var(--on-action); }
.mp-btn.primary:hover { background: #e4e5e6; }
.mp-btn.lg { min-height: 48px; font-size: 16px; width: 100%; margin-top: var(--space-6); }
.mp-btn.sm { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.mp-btn:disabled { opacity: .45; cursor: not-allowed; }
.mp-btn .icon { width: 18px; height: 18px; }

/* ---------- 徽标 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font);
         padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line);
         color: var(--ink-muted); background: var(--surface-raised); white-space: nowrap; }
.badge .icon { width: 12px; height: 12px; }
.badge-pin { background: var(--pin-soft); border-color: transparent; color: var(--pin-text); }
.badge-pin b { font-weight: 600; }
.badge-live { color: var(--pin-text); }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                      background: var(--pin); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.mp-badge { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/16px var(--font);
            border-radius: var(--radius-pill); padding: 3px 10px; border: 1px solid var(--line);
            background: var(--surface-raised); color: var(--ink-muted); }
.mp-badge .icon { width: 12px; height: 12px; }
.mp-badge.wait { color: var(--ink-muted); }
.mp-badge.run { color: var(--pin-text); border-color: transparent; background: var(--pin-soft); }
.mp-badge.run::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
                        background: var(--pin); animation: pulse 1.6s ease-in-out infinite; }
.mp-badge.ok { color: var(--ok); }
.mp-badge.err { color: var(--err); }

/* ---------- 导航 ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 10, .72);
       backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
       border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: var(--space-6); height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--pin); color: var(--on-pin);
              display: inline-flex; align-items: center; justify-content: center;
              font-weight: 700; font-size: 14px; flex: none; }
.brand-name { font: 600 16px/1 var(--font); letter-spacing: -.01em; }
.brand-slogan { font: 400 12px/1 var(--font); letter-spacing: .06em; color: var(--ink-muted);
                padding-left: 10px; border-left: 1px solid var(--line); }
@media (max-width: 720px) { .brand-slogan { display: none; } }
.nav-links { display: flex; gap: var(--space-4); margin-left: auto; align-items: center; }
.nav-links > a:not(.btn) { color: var(--ink-muted); font-size: 14px; padding: var(--space-2) 0; }
/* 文字链 hover 提亮；.btn 按钮除外，避免优先级压过 .btn-primary 的深色文字（白字落在白底上会隐形） */
.nav-links > a:not(.btn):hover { color: var(--ink); }
.nav-links .badge-pin { padding: 6px 12px; font-size: 13px; }
.nav-links .badge-pin b { color: var(--pin-text); }
.nav-ghost { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
             color: var(--ink-muted); font-size: 14px; cursor: pointer; padding: var(--space-2) 0; }
.nav-ghost:hover { color: var(--err); }
.nav .btn-sm { min-height: 34px; padding: 6px 14px; font-size: 14px; border-radius: var(--radius-pill); }

/* ---------- Hero ---------- */
.hero { padding: var(--space-16) 0 var(--space-24); position: relative;
        background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
             gap: var(--space-12); align-items: center; }
.hero .lead { margin-top: var(--space-6); }
.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }
.fine { margin-top: var(--space-3); font-size: 13px; color: var(--ink-muted); }

/* Hero 演示面板（参考图 → 成图） */
.demo { position: relative; background: var(--surface-raised); border: 1px solid var(--line);
        border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-raised); }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
            margin-bottom: var(--space-6); }
.cam { display: flex; align-items: center; gap: var(--space-2); padding: 6px 12px;
       border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line);
       font: 500 12px/16px var(--font); color: var(--ink-muted); }
.cam .icon { width: 14px; height: 14px; color: var(--pin); }
.demo-screens { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; }
.screen { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--surface-sunken);
          border: 1.5px solid var(--line); overflow: hidden; }
.screen.is-done { border-color: var(--pin-line); box-shadow: 0 0 0 1px var(--pin-line), 0 0 28px rgba(200, 240, 60, .12); }
.screen-label { position: absolute; left: 10px; bottom: 9px; font: 500 11px/14px var(--font);
                color: var(--ink-muted); }
.screen.is-done .screen-label { color: var(--pin-text); }
.wf { position: absolute; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 7px; }
.wf-subject { left: 22%; top: 16%; width: 56%; height: 40%; }
.wf-l1 { left: 14%; right: 14%; top: 66%; height: 6px; }
.wf-l2 { left: 14%; right: 30%; top: 78%; height: 6px; }
.wf-l3 { left: 14%; right: 22%; top: 90%; height: 6px; }
.screen.is-done .wf-subject { background: var(--pin-soft); border-color: var(--pin-line); }
.screen.is-done .wf-subject::after { content: ""; position: absolute; right: 8px; top: 8px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--pin);
    box-shadow: 0 0 12px 2px rgba(200, 240, 60, .5); animation: pulse 1.6s ease-in-out infinite; }
.demo-arrow { color: var(--pin); display: grid; place-items: center; }
.demo-arrow .icon { width: 22px; height: 22px; }
.demo-hud { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
            margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line);
            font: 400 12px/18px var(--mono); color: var(--ink-muted); flex-wrap: wrap; }
.demo-hud output { color: var(--ink); }

/* ---------- 数据条 ---------- */
.strip { padding: 0 0 var(--space-24); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: var(--space-8) var(--space-6) var(--space-8) 0; }
.stat + .stat { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.stat strong { display: block; font: 600 30px/1.15 var(--font); letter-spacing: -.03em;
               margin-bottom: var(--space-2); }
.stat strong em { font-style: normal; font-size: 16px; letter-spacing: 0; color: var(--pin-text); margin-left: 2px; }
.stat span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- 创作台 ---------- */
.studio-panel { position: relative; background: var(--surface-raised); border: 1px solid var(--line);
                border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-raised); }
.studio-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
              margin-bottom: var(--space-6); flex-wrap: wrap; }
.studio-title { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.studio-title h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.studio-title .note { font-size: 13px; color: var(--ink-muted); }
.studio-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
               gap: var(--space-8); align-items: start; }
.studio-uploads { display: grid; gap: var(--space-4); }
.studio-fields { display: grid; gap: 20px; }

/* 上传框：凹陷底 + 虚线发丝线 */
.mp-uploads { display: grid; gap: var(--space-4); }
.mp-drop { position: relative; overflow: hidden; cursor: pointer; text-align: center;
           border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md);
           background: var(--surface-sunken); min-height: 176px; padding: var(--space-4);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 6px; transition: border-color .15s ease, background .15s ease; }
.mp-drop:hover, .mp-drop.drag { border-color: var(--ink-muted); background: #0a0b0c; }
.mp-drop.filled { border-style: solid; border-color: var(--line); }
.mp-drop .icon { width: 22px; height: 22px; color: var(--ink-muted); }
.mp-drop .t { font-size: 14px; font-weight: 600; }
.mp-drop .d { font-size: 12px; color: var(--ink-muted); }
.mp-drop .tag-required { position: absolute; top: 10px; left: 10px; font: 500 11px/16px var(--font);
                         color: var(--err); background: rgba(255, 138, 122, .1);
                         border: 1px solid rgba(255, 138, 122, .25); border-radius: var(--radius-pill);
                         padding: 0 8px; }
.mp-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
               background: var(--surface-sunken); padding: 8px; }
.mp-drop.filled .icon, .mp-drop.filled .t, .mp-drop.filled .d { display: none; }
.mp-drop .re-up { position: absolute; right: 8px; bottom: 8px; display: none; gap: 6px; z-index: 2; }
.mp-drop.filled .re-up { display: flex; }
.mp-drop .re-up button { border: 1px solid var(--line-strong); background: rgba(8, 9, 10, .85);
                         backdrop-filter: blur(4px); border-radius: var(--radius-pill);
                         font-size: 12px; padding: 4px 10px; cursor: pointer; color: var(--ink); }
.mp-drop .re-up button:hover { border-color: var(--pin-line); color: var(--pin-text); }

/* 表单域 */
.mp-field { display: grid; gap: var(--space-2); }
.mp-field > label { font: 500 13px/18px var(--font); color: var(--ink); display: flex;
                    align-items: baseline; gap: var(--space-2); }
.mp-field .opt { color: var(--ink-muted); font-weight: 400; font-size: 12px; }
.mp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mp-chip { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md);
           padding: 8px 14px; font: 400 13px/18px var(--font); cursor: pointer; color: var(--ink-muted);
           transition: border-color .12s ease, color .12s ease, background .12s ease; }
.mp-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.mp-chip.active { background: var(--pin-soft); border-color: var(--pin-line); color: var(--pin-text); }
.mp-chip .px { color: var(--ink-muted); font-size: 11px; margin-left: 5px; }
.mp-chip.active .px { color: var(--pin-text); opacity: .75; }
.mp-fidelity { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.mp-fid { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 6px;
          text-align: center; cursor: pointer; background: var(--surface); color: var(--ink-muted);
          transition: border-color .12s ease, color .12s ease, background .12s ease; }
.mp-fid:hover { border-color: var(--line-strong); color: var(--ink); }
.mp-fid.active { background: var(--pin-soft); border-color: var(--pin-line); color: var(--pin-text); }
.mp-fid .v { font-weight: 600; font-size: 14px; display: block; letter-spacing: -.01em; }
.mp-fid .l { font-size: 12px; display: block; }
.mp-fid .d { font-size: 11px; display: block; margin-top: 2px; opacity: .7; }
.mp-input, .mp-textarea { width: 100%; min-height: 44px; border: 1px solid var(--line);
                          border-radius: var(--radius-md); padding: 11px 14px;
                          font: 400 14px/22px var(--font); background: var(--surface-sunken);
                          color: var(--ink); outline: none;
                          transition: border-color .12s ease, box-shadow .12s ease; }
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--ink-muted); opacity: .6; }
.mp-input:focus, .mp-textarea:focus { border-color: var(--pin-line);
                                      box-shadow: 0 0 0 3px rgba(200, 240, 60, .12); }
.mp-textarea { min-height: 84px; resize: vertical; }

/* 进度 / 错误 / 结果 */
.studio-foot { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.mp-progress { border: 1px solid var(--line); border-radius: var(--radius-md);
               background: var(--surface); padding: var(--space-4) var(--space-6); display: none; }
.mp-progress.show { display: flex; align-items: center; gap: var(--space-3); }
.mp-progress .spin { width: 18px; height: 18px; border: 2px solid var(--line-strong);
                     border-top-color: var(--pin); border-radius: var(--radius-pill);
                     animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.mp-progress .pt { font-size: 14px; font-weight: 600; }
.mp-progress .pd { font-size: 12px; color: var(--ink-muted); }
.mp-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 1; }
.mp-bar i { display: block; height: 100%; width: 0; border-radius: 2px;
            background: var(--pin); transition: width .25s ease; }
.mp-error { display: none; border: 1px solid rgba(255, 138, 122, .3); border-radius: var(--radius-md);
            background: rgba(255, 138, 122, .07); color: var(--err);
            padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 20px; }
.mp-error.show { display: block; }
.mp-result { display: none; }
.mp-result.show { display: block; }
.mp-result-img { width: 100%; display: block; border-radius: var(--radius-md);
                 border: 1px solid var(--line); background: var(--surface-sunken); }
.mp-result-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3);
                  flex-wrap: wrap; }
.mp-result-foot .meta { color: var(--ink-muted); font: 400 12px/16px var(--mono); flex: 1; }

/* 匿名锁定遮罩：完整工具界面可见但不可操作 */
.studio-lock { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
               background: rgba(5, 5, 6, .7); backdrop-filter: blur(10px);
               -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-lg);
               text-align: center; padding: var(--space-6); }
.studio-lock .lock-pin { display: inline-flex; align-items: baseline; gap: 6px;
                         font: 600 44px/1 var(--font); letter-spacing: -.03em; color: var(--pin-text);
                         margin-bottom: var(--space-4); }
.studio-lock .lock-pin small { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.studio-lock h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.015em;
                  margin-bottom: var(--space-2); }
.studio-lock p { margin: 0 0 var(--space-6); color: var(--ink-muted); font-size: 14px; }
.studio-lock .cta { justify-content: center; margin-top: 0; }

/* ---------- 原理行（编号功能） ---------- */
.features { display: grid; gap: 0; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
               gap: var(--space-16); align-items: center; padding: var(--space-12) 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row h3 { margin-bottom: var(--space-3); }
.feature-row .desc { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 26px; max-width: 52ch; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.ticks li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px;
            line-height: 22px; color: var(--ink-muted); }
.ticks li b { color: var(--ink); font-weight: 500; }
.ticks .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--pin-text); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
               gap: var(--space-4); align-items: center; padding: var(--space-6) 0;
               font: 500 16px/24px var(--font); letter-spacing: -.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--ink-muted); transition: transform .2s ease; }
.faq details[open] summary .icon { transform: rotate(45deg); color: var(--pin-text); }
.faq details p { margin: 0 0 var(--space-6); color: var(--ink-muted); max-width: 62ch; font-size: 15px; }

/* ---------- 尾部 CTA / 页脚 ---------- */
.final { text-align: center; }
.final-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--pin); color: var(--on-pin);
              display: grid; place-items: center; font: 700 24px/1 var(--font);
              margin: 0 auto var(--space-8); }
.final .lead { margin-left: auto; margin-right: auto; }
.final .cta { justify-content: center; }
footer { border-top: 1px solid var(--line); padding: var(--space-8) 0; font-size: 14px;
         color: var(--ink-muted); }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
              flex-wrap: wrap; }
.foot-brand { display: flex; align-items: center; gap: 8px; }
.foot-brand .brand-mark { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
footer nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
footer a { color: var(--ink-muted); }
footer a:hover { color: var(--ink); }
.foot-icp { margin-top: var(--space-6); display: flex; align-items: center; justify-content: center;
            gap: var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); opacity: .85; }
.foot-icp a { color: var(--ink-muted); }
.foot-icp a:hover { color: var(--ink); }

/* ---------- 认证页（卡片在导航与页脚之间垂直居中） ---------- */
body[data-page="login"] .main, body[data-page="register"] .main {
  display: flex; padding: var(--space-10) var(--space-4);
}
.mp-auth { width: 100%; max-width: 420px; margin: auto; }
.mp-card { background: var(--surface-raised); border: 1px solid var(--line);
           border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); padding: var(--space-8); }
.mp-auth h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; }
.mp-auth .sub { color: var(--ink-muted); font-size: 14px; margin: 0 0 var(--space-6); }
.mp-auth .field { margin-bottom: var(--space-4); display: grid; gap: var(--space-2); }
.mp-auth label { font: 500 13px/18px var(--font); }
.mp-auth .row2 { display: flex; gap: var(--space-2); }
.mp-auth .row2 .mp-input { flex: 1; min-width: 0; }
.send-code { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md);
             padding: 0 var(--space-4); min-height: 44px; font: 500 13px/18px var(--font);
             cursor: pointer; color: var(--ink-muted); white-space: nowrap;
             transition: border-color .12s ease, color .12s ease; }
.send-code:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.send-code:disabled { opacity: .5; cursor: not-allowed; }
.mp-auth .foot { text-align: center; margin-top: var(--space-4); font-size: 14px; color: var(--ink-muted); }
.mp-auth .foot a { color: var(--pin-text); font-weight: 500; }
.mp-auth .foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-form-error { display: none; border: 1px solid rgba(255, 138, 122, .3); border-radius: var(--radius-md);
                 background: rgba(255, 138, 122, .07); color: var(--err);
                 font-size: 13px; line-height: 20px; padding: var(--space-3) var(--space-4);
                 margin-bottom: var(--space-4); }
.mp-form-error.show { display: block; }

/* ---------- 作品页 ---------- */
.page-head { padding: var(--space-16) 0 var(--space-8); }
.page-head h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; font-weight: 600;
                letter-spacing: -.025em; margin: 0; }
.page-head .sub { margin-top: var(--space-3); color: var(--ink-muted); font-size: 14px; }
.page-head .sub a { color: var(--pin-text); font-weight: 500; }
.page-head .sub a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
                padding-bottom: var(--space-16); }
.mp-task { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
           overflow: hidden; transition: border-color .15s ease; }
.mp-task:hover { border-color: var(--line-strong); }
.mp-task .thumb { aspect-ratio: 1; background: var(--surface-sunken); display: flex; align-items: center;
                  justify-content: center; color: var(--ink-muted); position: relative; }
.mp-task .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-task .thumb .st { font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mp-task .foot { padding: var(--space-3) var(--space-4); display: flex; align-items: center;
                 justify-content: space-between; gap: var(--space-2); border-top: 1px solid var(--line); }
.mp-task .tm { font: 400 12px/16px var(--mono); color: var(--ink-muted); }
.mp-empty { text-align: center; color: var(--ink-muted); padding: var(--space-24) 0; font-size: 14px; }
.mp-empty .icon { width: 24px; height: 24px; margin: 0 auto var(--space-2); color: var(--line-strong); }

/* ---------- Toast ---------- */
.mp-toast { position: fixed; left: 50%; bottom: var(--space-8); transform: translateX(-50%) translateY(12px);
            background: var(--surface-raised); border: 1px solid var(--line-strong);
            border-radius: var(--radius-md); box-shadow: var(--shadow-raised); color: var(--ink);
            font-size: 14px; line-height: 20px; padding: 10px 16px; opacity: 0; pointer-events: none;
            transition: opacity .2s ease, transform .2s ease; z-index: 99; max-width: 80vw; }
.mp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mp-toast.err { border-color: rgba(255, 138, 122, .4); color: var(--err); }

/* ---------- 滚动浮现（.js 类由脚本添加，避免无 JS 时内容不可见） ---------- */
.js .reveal { opacity: 0; transform: translateY(12px);
              transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .hero-grid, .feature-row, .faq, .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-row, .faq { gap: var(--space-12); }
  .hero { padding: var(--space-12) 0 var(--space-16); }
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  section { padding: var(--space-16) 0; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-4); }
  .hero { padding: var(--space-8) 0 var(--space-16); }
  .display-xl { font-size: clamp(34px, 10vw, 44px); }
  .demo { padding: var(--space-4); }
  .demo-screens { grid-template-columns: 1fr; }
  .demo-arrow .icon { transform: rotate(90deg); }
  .stat { padding: var(--space-6) var(--space-3) var(--space-6) 0; }
  .stat + .stat { padding-left: var(--space-3); }
  .stat strong { font-size: 24px; }
  .studio-panel { padding: var(--space-4); }
  .mp-fidelity { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-task-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-links > a:not(.btn) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 大片库（公众展示 + 选片） ---------- */
.mp-shot-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.mp-cat-chip { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill);
               padding: 7px 16px; font: 400 13px/18px var(--font); cursor: pointer; color: var(--ink-muted);
               transition: border-color .12s ease, color .12s ease, background .12s ease; }
.mp-cat-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.mp-cat-chip.active { background: var(--pin-soft); border-color: var(--pin-line); color: var(--pin-text); }

.mp-shot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.mp-shot-card { position: relative; margin: 0; overflow: hidden; cursor: pointer;
                border: 1px solid var(--line); border-radius: var(--radius-md);
                background: var(--surface-raised); transition: border-color .15s ease; }
.mp-shot-card:hover { border-color: var(--line-strong); }
.mp-shot-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.mp-shot-card figcaption { position: absolute; left: 0; right: 0; bottom: 0;
                           padding: 40px 12px 10px;
                           background: linear-gradient(transparent, rgba(5, 5, 6, .92));
                           display: flex; flex-direction: column; gap: 3px; }
.mp-shot-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-shot-meta b { font: 500 13px/18px var(--font); color: var(--ink);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-shot-meta span { font: 400 11px/16px var(--font); color: var(--ink-muted); }
.mp-shot-go { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center;
              gap: 5px; font: 500 12px/16px var(--font); color: var(--pin-text);
              opacity: 0; transform: translateY(4px);
              transition: opacity .15s ease, transform .15s ease; }
.mp-shot-go .icon { width: 13px; height: 13px; }
.mp-shot-card:hover .mp-shot-go, .mp-shot-card:focus-visible .mp-shot-go { opacity: 1; transform: none; }
@media (hover: none) { .mp-shot-go { opacity: 1; transform: none; } }
.mp-shot-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-muted);
                 padding: var(--space-16) 0; font-size: 14px; }
.mp-shot-more { text-align: center; margin-top: var(--space-8); }

/* Lightbox 大图预览 */
.mp-lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
               background: rgba(5, 5, 6, .86); backdrop-filter: blur(8px);
               -webkit-backdrop-filter: blur(8px); padding: var(--space-6); }
.mp-lightbox figure { margin: 0; max-width: min(880px, 92vw); width: 100%; }
.mp-lightbox img { width: 100%; max-height: 68vh; object-fit: contain; border-radius: var(--radius-md);
                   border: 1px solid var(--line); background: var(--surface-sunken); }
.lb-cap { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.lb-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lb-info b { font: 600 16px/24px var(--font); }
.lb-info span { font: 400 13px/18px var(--font); color: var(--ink-muted); }
.lb-close { position: absolute; top: var(--space-6); right: var(--space-6);
            width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--line);
            background: var(--surface-raised); color: var(--ink); cursor: pointer;
            display: grid; place-items: center; }
.lb-close:hover { border-color: var(--line-strong); }

/* 选片弹层 */
.mp-picker { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
             background: rgba(5, 5, 6, .7); backdrop-filter: blur(6px);
             -webkit-backdrop-filter: blur(6px); padding: var(--space-6); }
.pk-panel { width: min(960px, 94vw); max-height: 84vh; display: flex; flex-direction: column;
            background: var(--surface-raised); border: 1px solid var(--line);
            border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); overflow: hidden; }
.pk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
           padding: var(--space-6) var(--space-6) var(--space-4); }
.pk-head h3 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.015em; }
.pk-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.pk-close { width: 34px; height: 34px; flex: none; border-radius: var(--radius-pill);
            border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
            cursor: pointer; display: grid; place-items: center; }
.pk-close:hover { border-color: var(--line-strong); color: var(--ink); }
.pk-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-6) var(--space-4);
           border-bottom: 1px solid var(--line); }
.pk-body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.pk-card { position: relative; overflow: hidden; cursor: pointer; padding: 0;
           border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken);
           transition: border-color .12s ease; }
.pk-card:hover { border-color: var(--line-strong); }
.pk-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.pk-card .pk-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 6px;
                 font: 500 11px/15px var(--font); color: var(--ink); text-align: left;
                 background: linear-gradient(transparent, rgba(5, 5, 6, .92));
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
           padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }
.pk-count { font: 400 12px/16px var(--font); color: var(--ink-muted); }
.pk-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-muted);
            padding: var(--space-16) 0; font-size: 14px; }

/* 创作台：大片选择卡 */
.mp-shot-pick { position: relative; overflow: hidden; cursor: pointer; text-align: center;
                border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md);
                background: var(--surface-sunken); min-height: 176px; padding: var(--space-4);
                display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 6px; transition: border-color .15s ease, background .15s ease; }
.mp-shot-pick:hover { border-color: var(--ink-muted); background: #0a0b0c; }
.mp-shot-pick .icon { width: 22px; height: 22px; color: var(--ink-muted); }
.mp-shot-pick .t { font-size: 14px; font-weight: 600; }
.mp-shot-pick .d { font-size: 12px; color: var(--ink-muted); max-width: 32ch; }
.mp-shot-pick .sp-btn { margin-top: var(--space-2); }
.mp-shot-pick.filled { border-style: solid; border-color: var(--line); }
.mp-shot-pick .sp-img { position: absolute; inset: 0; width: 100%; height: 100%;
                        object-fit: contain; background: var(--surface-sunken); padding: 8px; }
.mp-shot-pick .sp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
                        display: flex; align-items: center; gap: var(--space-2);
                        padding: var(--space-2) var(--space-3);
                        background: linear-gradient(transparent, rgba(5, 5, 6, .92) 40%); }
.mp-shot-pick .sp-info { flex: 1; min-width: 0; text-align: left; }
.mp-shot-pick .sp-info b { display: block; font: 500 13px/18px var(--font);
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-shot-pick .sp-info span { font: 400 11px/15px var(--font); color: var(--ink-muted); }
.mp-shot-pick .sp-act { display: flex; gap: 6px; }
.mp-shot-pick .sp-act button { border: 1px solid var(--line-strong); background: rgba(8, 9, 10, .85);
                               backdrop-filter: blur(4px); border-radius: var(--radius-pill);
                               font-size: 12px; padding: 4px 10px; cursor: pointer; color: var(--ink); }
.mp-shot-pick .sp-act button:hover { border-color: var(--pin-line); color: var(--pin-text); }

/* 作品页：来源大片行 */
.mp-task-shot { display: flex; align-items: center; gap: var(--space-2);
                padding: var(--space-3) var(--space-4) 0; font-size: 12px;
                color: var(--ink-muted); min-width: 0; }
.mp-task-shot img { width: 26px; height: 26px; object-fit: cover; border-radius: var(--radius-sm);
                    border: 1px solid var(--line); flex: none; }
.mp-task-shot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 960px) {
  .mp-shot-grid, .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mp-shot-grid, .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}