@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root {
  --bg: #f4f6fb;
  --bg-soft: #fafbff;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-strong: #ffffff;
  --line: rgba(15, 23, 42, 0.09);
  --line-strong: rgba(15, 23, 42, 0.15);
  --text: #344054;
  --muted: #667085;
  --heading: #101828;
  --brand: #6c5ce7;
  --brand-2: #00b8a9;
  --brand-3: #ff9f43;
  --brand-4: #3b82f6;
  --brand-soft: #f0edff;
  --shadow: 0 24px 70px rgba(30, 41, 59, 0.10);
  --shadow-soft: 0 12px 36px rgba(30, 41, 59, 0.07);
  --radius: 24px;
  --radius-sm: 16px;
  --max: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -5%, rgba(108, 92, 231, 0.13), transparent 27%),
    radial-gradient(circle at 92% 3%, rgba(0, 184, 169, 0.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 18%, var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #6c5ce7 0%, #8b7cf6 50%, #00b8a9 100%);
  box-shadow: 0 10px 24px rgba(108, 92, 231, 0.24);
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 8px 11px 8px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-right-color: transparent;
  transform: rotate(10deg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.96rem;
}

.nav a.is-active {
  color: var(--heading);
}

/* ── Nav dropdown ───────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 4px;
  color: var(--muted); font-weight: 700; font-size: 0.96rem;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
}
.nav-dropdown-trigger:hover, .nav-dropdown.is-open .nav-dropdown-trigger { color: var(--heading); }
.nav-dropdown-trigger svg { transition: transform 0.18s; }
.nav-dropdown.is-open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15,23,42,0.14);
  border: 1px solid rgba(15,23,42,0.07);
  padding: 8px;
  min-width: 200px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 500;
}
.nav-dropdown.is-open .nav-dropdown-menu { display: flex; }
.nav-dropdown-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s;
}
.nav-dropdown-item:hover { background: var(--bg); color: var(--heading); }
.nav-dropdown-item-icon {
  font-size: 1.1rem; flex-shrink: 0; margin-top: 1px;
}
.nav-dropdown-item-body { display: flex; flex-direction: column; }
.nav-dropdown-item-label { font-size: 0.88rem; font-weight: 700; color: var(--heading); }
.nav-dropdown-item-desc { font-size: 0.76rem; color: var(--muted); margin-top: 1px; }

.nav-badge { display: inline-flex; margin-left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 0.6rem; font-weight: 800; color: #fff; background: var(--brand); }
.nav-badge.free { background: #15847b; }
.nav-badge.pro { background: #5b65d8; }
.nav-dropdown-item.coming-soon { opacity: 0.58; cursor: default; pointer-events: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  color: var(--heading);
  font-weight: 700;
}

.quota-badge small {
  color: var(--muted);
  font-weight: 700;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: white;
  background: linear-gradient(135deg, #5b4cdb 0%, #7567ea 55%, #8d80f4 100%);
  box-shadow: 0 14px 30px rgba(108, 92, 231, 0.24);
}

.button-secondary {
  color: var(--heading);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
}

.button-ghost {
  color: var(--muted);
  background: transparent;
}

.hero,
.page-hero {
  padding: 40px 0 22px;
}

.hero-grid,
.page-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 24px;
  align-items: start;
}

.hero-copy {
  padding: 22px 0 6px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(40, 194, 184, 0.12);
  color: #167971;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
.brand {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

h1 {
  margin: 18px 0 14px;
  color: var(--heading);
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  line-height: 0.96;
}

h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.75rem, 2.7vw, 3rem);
  line-height: 1;
}

h3 {
  margin: 0;
  color: var(--heading);
  font-size: 1.2rem;
}

.lede {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.metric {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow);
}

.metric strong {
  display: block;
  color: var(--heading);
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.metric span {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.panel,
.feature-card,
.pricing-card,
.dashboard-card,
.form-card,
.info-card,
.faq-card {
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.panel {
  overflow: hidden;
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}

.panel-label {
  color: var(--muted);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.switcher {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
}

.switcher button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.switcher button.is-active {
  color: var(--heading);
  background: white;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.panel-body {
  padding: 18px 20px 20px;
}

.field {
  margin-top: 12px;
}

.field:first-child {
  margin-top: 0;
}

.field label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: var(--heading);
  font-weight: 800;
}

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--heading);
  padding: 14px 16px;
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: rgba(255, 107, 87, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 107, 87, 0.1);
}

.chip-row,
.tag-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--muted);
}

.chip.is-active {
  color: var(--heading);
  border-color: rgba(255, 107, 87, 0.32);
  background: rgba(255, 107, 87, 0.08);
}
.prompt-chip-row { gap: 8px; }
.prompt-chip-row .chip { padding: 8px 12px; font-size: 0.8rem; cursor: pointer; }

/* "Try an example" 区：与 home / scene 页面的 chip 视觉保持一致，供 model 页使用 */
.prompt-example-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prompt-example-chips > .prompt-example-chip {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.prompt-example-chips > .prompt-example-chip:hover {
  color: #5748ce;
  border-color: rgba(108, 92, 231, 0.28);
  background: #f8f7ff;
}
.prompt-example-chips > .prompt-example-chip.is-active {
  color: var(--heading);
  border-color: rgba(255, 107, 87, 0.32);
  background: rgba(255, 107, 87, 0.08);
}
.model-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.model-meta-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(40, 194, 184, 0.1); color: #167971; font-size: 0.72rem; font-weight: 800; }
.batch-gate { border: 1px solid rgba(91, 101, 216, 0.2); background: rgba(91, 101, 216, 0.08); color: #4d57bc; cursor: pointer; }
.batch-gate.is-active { color: white; background: #5b65d8; }

.upload-box {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 100px;
  border-radius: 22px;
  border: 1.5px dashed rgba(255, 107, 87, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 107, 87, 0.08), rgba(40, 194, 184, 0.08)),
    rgba(255, 255, 255, 0.82);
  padding: 14px;
}

.upload-box strong {
  display: block;
  color: var(--heading);
  font-size: 0.94rem;
  margin-top: 6px;
}

.upload-box span {
  display: none;
}

.upload-cta {
  margin-top: 10px;
  padding: 10px 16px;
  font-size: 0.88rem;
}

.generator-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: sticky;
bottom: 0;
z-index: 3;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(15,23,42,0.08);
box-shadow: 0 -8px 20px rgba(15,23,42,0.06);
padding: 12px 0 4px;
margin-top: 8px;
  margin-top: 12px;
}

.small-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.button-wide {
  width: 100%;
}

.generator-footer-block {
  flex-direction: column;
  align-items: stretch;
}

.result-panel {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 251, 246, 0.92));
}

.result-stage {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.visual-product {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.5), transparent 22%),
    linear-gradient(145deg, #fbd3b2 0%, #ffb18f 35%, #f9f5ef 36%, #bfe9ea 100%);
}

.visual-portrait {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(145deg, #ffeed9 0%, #f6cb91 30%, #f9f0e7 46%, #d7d4ef 100%);
}

.visual-scene {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(145deg, #dce7fb 0%, #c6ddf7 30%, #e7f3ef 54%, #d7f0df 100%);
}

.visual-poster {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.3), transparent 26%),
    linear-gradient(145deg, #fbe1e6 0%, #ffd4cb 26%, #f8f2e7 48%, #ffe38f 100%);
}

.section {
  padding: 28px 0 6px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.feature-grid,
.pricing-grid,
.dashboard-grid {
  display: grid;
  gap: 18px;
}

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card,
.pricing-card,
.dashboard-card,
.info-card,
.faq-card {
  padding: 20px;
}

.feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 251, 246, 0.88));
}

.feature-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: white;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #ff6b57, #f4b942);
}

.feature-card p,
.pricing-card p,
.info-card p,
.faq-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.layout-two {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 22px;
  align-items: start;
}

.info-stack {
  display: grid;
  gap: 18px;
}

.info-card ul,
.pricing-card ul,
.dashboard-card ul {
  padding-left: 18px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.8;
}

.pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-card {
  position: relative;
  overflow: hidden;
}

.pricing-card.is-featured {
  border-color: rgba(255, 107, 87, 0.3);
  box-shadow: 0 24px 60px rgba(255, 107, 87, 0.18);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}

.price strong {
  font-size: 2.4rem;
  color: var(--heading);
}

.price span {
  color: var(--muted);
  font-weight: 700;
}

.pricing-note {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(40, 194, 184, 0.12);
  color: #167971;
  font-weight: 800;
  font-size: 0.86rem;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.compare-table th,
.compare-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.compare-table th {
  color: var(--heading);
  background: rgba(15, 23, 42, 0.02);
}

.compare-table td {
  color: var(--muted);
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-card h3 {
  font-size: 1rem;
}

.dashboard-grid {
  grid-template-columns: 0.94fr 1.06fr;
}

.status-card {
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 107, 87, 0.12), rgba(40, 194, 184, 0.11)),
    rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.status-card strong {
  display: block;
  font-size: 1.8rem;
  color: var(--heading);
  margin: 8px 0;
}

.meter {
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6b57, #f4b942, #28c2b8);
}

.creations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.creation {
  min-height: 152px;
  border-radius: 22px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.88);
}

.creation .thumb {
  border-radius: 18px;
  min-height: 92px;
  margin-bottom: 12px;
}

.creation strong {
  color: var(--heading);
}

.creation p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.thumb.product {
  background: linear-gradient(145deg, #f8d0b3, #ffd88a);
}

.thumb.portrait {
  background: linear-gradient(145deg, #e5e0ff, #ffd4bc);
}

.thumb.scene {
  background: linear-gradient(145deg, #d8eef4, #bfe1ff);
}

.thumb.poster {
  background: linear-gradient(145deg, #fee6ea, #ffe48f);
}

/* ── Account workspace ─────────────────────────────────────── */
.account-page {
  min-height: calc(100vh - 72px);
}

.account-heading {
  padding: 42px 0 22px;
}

.account-heading h1 {
  margin: 6px 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.account-heading p,
.account-section-head p,
.account-signin-card p {
  margin: 0;
  color: var(--muted);
}

.account-content {
  padding: 0 0 64px;
}

.account-signin-card[hidden],
[data-account-signed-in][hidden],
.account-metric[hidden] {
  display: none;
}

.account-signin-card,
.account-summary,
.account-creations {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.account-signin-card {
  min-height: 240px;
  padding: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.account-signin-card h2 {
  margin: 8px 0;
}

.account-summary {
  padding: 28px;
  border-radius: var(--radius);
}

.account-summary-head,
.account-summary-foot,
.account-section-head,
.account-identity,
.account-actions {
  display: flex;
  align-items: center;
}

.account-summary-head,
.account-summary-foot,
.account-section-head {
  justify-content: space-between;
  gap: 24px;
}

.account-identity {
  gap: 14px;
}

.account-identity img,
.account-avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.account-identity img {
  object-fit: cover;
}

.account-identity img[hidden],
.account-avatar-fallback[hidden] {
  display: none;
}

.account-avatar-fallback {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.account-identity h2,
.account-plan-state strong,
.account-metric strong,
.account-preview-details strong {
  color: var(--heading);
}

.account-identity h2 {
  margin: 0 0 3px;
  font-size: 1.05rem;
}

.account-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.account-plan-state {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.account-plan-state strong {
  font-size: 1.1rem;
}

.account-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #475467;
  background: #f2f4f7;
}

.account-status-badge[data-tone="success"] { color: #067647; background: #ecfdf3; }
.account-status-badge[data-tone="info"] { color: #175cd3; background: #eff8ff; }
.account-status-badge[data-tone="warning"] { color: #b54708; background: #fffaeb; }
.account-status-badge[data-tone="danger"] { color: #b42318; background: #fef3f2; }

.account-alert {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid #fecdca;
  border-radius: 14px;
  background: #fef3f2;
}

.account-alert strong { color: #b42318; }
.account-alert p { margin: 3px 0 0; color: #912018; font-size: 0.88rem; }
.account-alert[data-tone="warning"] { border-color: #fedf89; background: #fffaeb; }
.account-alert[data-tone="warning"] strong,
.account-alert[data-tone="warning"] p { color: #93370d; }

.account-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.account-metric {
  min-width: 0;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.account-metric:first-child { padding-left: 0; }
.account-metric:last-child { padding-right: 0; border-right: 0; }
.account-metric[hidden] + .account-metric { border-right: 0; }
.account-metrics:has(.account-metric[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-metric > span,
.account-preview-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.account-metric strong {
  display: block;
  margin-top: 8px;
  font-size: 1.2rem;
}

.account-metric strong b { font-weight: inherit; }
.account-metric p { min-height: 21px; margin: 5px 0 12px; color: var(--muted); font-size: 0.84rem; }
.account-metric small { display: block; margin-top: 8px; color: var(--muted); }

.account-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #eaecf0;
}

.account-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width 0.24s ease;
}

.account-cycle strong { font-size: 1.35rem; }

.account-summary-foot {
  padding-top: 22px;
}

.account-summary-foot > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.account-actions { gap: 10px; flex-shrink: 0; }

.account-creations {
  margin-top: 24px;
  padding: 28px;
  border-radius: var(--radius);
}

.account-section-head {
  align-items: end;
  margin-bottom: 24px;
}

.account-section-head h2 {
  margin: 6px 0 5px;
}

.account-filters {
  display: flex;
  align-items: end;
  gap: 10px;
}

.account-filters label {
  display: grid;
  gap: 5px;
}

.account-filters label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.account-filters select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--heading);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.account-filters select:focus-visible,
.account-creations:focus-visible,
.account-creation-card:focus-visible,
.account-icon-button:focus-visible,
.account-preview-nav:focus-visible {
  outline: 3px solid rgba(108, 92, 231, 0.25);
  outline-offset: 2px;
}

.account-gallery {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}


.account-creation-card {
position: relative;
min-width: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
color: inherit;
font: inherit;
text-align: left;
transition: transform 0.16s ease, box-shadow 0.16s ease;
}


.account-creation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(30, 41, 59, 0.11);
}

.account-creation-image {
position: relative;
display: block;
width: 100%;
padding: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
border: 0;
background: #f2f4f7;
cursor: pointer;
}


.account-creation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.24s ease;
}

.account-creation-card:hover img { transform: scale(1.025); }

.account-creation-overlay {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(16, 24, 40, 0.72);
  font-size: 0.73rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.account-creation-card:hover .account-creation-overlay,
.account-creation-card:focus-within .account-creation-overlay { opacity: 1; transform: none; }

.account-creation-overlay:focus-visible,
.account-creation-image:focus-visible {
outline: 3px solid rgba(108, 92, 231, 0.35);
outline-offset: -3px;
}

.account-creation-copy { padding: 13px 14px 14px; }
.account-creation-copy strong { display: block; overflow: hidden; color: var(--heading); font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.account-creation-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.76rem; }

.account-gallery-state {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 30px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.account-gallery-state strong { color: var(--heading); }
.account-gallery-state p { margin: 7px 0 16px; }

.account-gallery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-top: 20px;
}

.account-gallery-footer p { margin: 0; color: var(--muted); font-size: 0.84rem; }

.account-lightbox[hidden] { display: none; }
.account-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.account-lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(16, 24, 40, 0.72);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.account-lightbox-card {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.32);
}

.account-lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.account-lightbox-top h2 { margin: 0; font-size: 1.05rem; }
.account-icon-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: var(--heading);
  background: #f2f4f7;
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}

.account-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.7fr);
  min-height: 560px;
}

.account-preview-image-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 28px;
  background: #101828;
}

.account-preview-image-wrap img {
  max-width: 100%;
  max-height: 68vh;
  border-radius: 10px;
  object-fit: contain;
}

.account-preview-nav {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font: inherit;
  font-size: 1.8rem;
  cursor: pointer;
  transform: translateY(-50%);
}

.account-preview-nav:disabled { opacity: 0.28; cursor: default; }
.account-preview-nav.is-prev { left: 16px; }
.account-preview-nav.is-next { right: 16px; }
.account-preview-details { display: flex; flex-direction: column; gap: 22px; padding: 28px; }
.account-preview-details strong { display: block; margin-top: 6px; }
.account-preview-details p { margin: 7px 0 0; color: var(--text); line-height: 1.65; overflow-wrap: anywhere; }
.account-preview-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.account-preview-meta span { padding: 6px 9px; border-radius: 999px; color: var(--muted); background: #f2f4f7; font-size: 0.75rem; font-weight: 700; }
.account-preview-public-status { padding: 10px 12px; border-radius: 12px; background: #f2f4f7; font-size: 0.82rem; }
.account-preview-actions { display: grid; gap: 10px; margin-top: auto; }
.button-danger { color: #b42318; border-color: #fecdca; background: #fff5f4; }
.button-danger:hover { color: #fff; border-color: #b42318; background: #b42318; }
.button-danger:disabled { opacity: 0.55; cursor: wait; }
body.has-account-lightbox { overflow: hidden; }

.site-footer {
  margin-top: 30px;
  padding: 24px 0 42px;
  color: var(--muted);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 28px 36px;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links strong {
  color: var(--text);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.4;
}

.footer-links a:hover {
  color: var(--primary);
}

.legal-main {
  padding: 64px 0 24px;
}

.legal-document {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
}

.legal-document h1 {
  margin: 0 0 10px;
  font-size: clamp(2.25rem, 5vw, 3.6rem);
  letter-spacing: -0.045em;
}

.legal-document h2 {
  margin: 34px 0 10px;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.legal-document p,
.legal-document li {
  color: var(--muted);
  line-height: 1.75;
}

.legal-document ul {
  margin: 10px 0 0;
  padding-left: 22px;
}

.legal-document a {
  color: var(--primary);
}

.legal-meta {
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-note {
  margin-top: 40px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #f7f8fb;
}

@media (max-width: 720px) {
  .legal-main { padding-top: 28px; }
  .legal-document { padding: 28px 22px; border-radius: 18px; }
}

.mobile-toggle {
  display: none;
}

.mobile-nav {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal.is-open {
  display: flex;
}

.modal-card {
  width: min(520px, 100%);
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.28);
}

.modal-card h3 {
  font-size: 1.5rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 1080px) {
  .account-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-grid,
  .page-grid,
  .layout-two,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-inner {
    flex-wrap: wrap;
    padding: 12px 0;
  }

  .nav {
    display: none;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .mobile-nav {
    display: none;
    padding: 0 0 16px;
  }

  .mobile-nav.is-open {
    display: grid;
    gap: 10px;
  }

  .mobile-nav a {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-weight: 800;
  }
}

@media (max-width: 760px) {
  .account-heading { padding-top: 28px; }
  .account-summary,
  .account-creations,
  .account-signin-card { padding: 20px; }
  .account-signin-card,
  .account-summary-head,
  .account-summary-foot { align-items: flex-start; flex-direction: column; }
  .account-plan-state { justify-items: start; }
  .account-metrics { grid-template-columns: 1fr; }
  .account-metric,
  .account-metric:first-child,
  .account-metric:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .account-metric:last-child { border-bottom: 0; }
  .account-actions,
  .account-actions .button { width: 100%; }
  .account-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .account-filters label:last-child { grid-column: 1 / -1; }
  .account-filters select { width: 100%; }
  .account-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .account-creation-copy { padding: 10px; }
  .account-lightbox { padding: 0; }
  .account-lightbox-card { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .account-preview-layout { grid-template-columns: 1fr; min-height: 0; }
  .account-preview-image-wrap { min-height: 50vh; padding: 16px; }
  .account-preview-image-wrap img { max-height: 55vh; }
  .account-preview-details { min-height: 38vh; padding: 20px; }
  .account-preview-nav { width: 38px; height: 38px; }

  .hero,
  .page-hero {
    padding-top: 24px;
  }

  h1 {
    font-size: clamp(2.2rem, 12vw, 3.6rem);
  }

  .hero-metrics,
  .feature-grid,
  .pricing-grid,
  .creations-grid,
  .before-after,
  .result-swatches {
    grid-template-columns: 1fr;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .quota-badge {
    width: 100%;
    justify-content: center;
  }

  .section-head,
  .footer-inner,
  .generator-footer {
    flex-direction: column;
    align-items: start;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .result-stage {
    min-height: auto;
  }
}

.tool-page {
  padding-bottom: 56px;
}

.intro-center {
  padding: 24px 0 10px;
}

.intro-center .container {
  text-align: center;
}

.intro-center h1 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  margin: 10px 0 8px;
  line-height: 1.1;
}

.intro-copy {
  margin-inline: auto;
  font-size: 0.96rem;
  display: none;
}

.trust-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.trust-row span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.workspace-section {
padding: 6px 0 24px;
}

.workspace-grid {
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 20px;
align-items: stretch;
height: calc(100vh - 140px);
max-height: 920px;
min-height: 640px;
}

.workspace-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 107, 87, 0.12);
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.1);
}

.control-card {
padding: 18px 18px 0;
overflow-y: auto;
}

.result-card {
padding: 18px;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* ── 右侧结果区：主图 + 缩略图条 ── */
.task-feed-card {
  padding: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 520px;
}

/* 主展示区 */
.result-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f7f2ec;
  border-radius: 32px 0 0 32px;
  overflow: hidden;
  position: relative;
}
/* 让所有直接子 div 撑满 */
.result-main > div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.result-main img.result-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 空状态 / 生成中 —— 居中内容 */
.result-main-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  padding: 32px;
  height: 100%;
}
.result-main-placeholder .rmp-icon {
  font-size: 2.4rem;
  opacity: 0.35;
}
/* 生成中动画 */
.result-main-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 32px;
}
.rmg-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,107,87,0.18);
  border-top-color: #ff6b57;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
.rmg-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
}
.rmg-sub {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}
.rmg-prompt {
  max-width: 280px;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 缩略图条 */
.thumb-strip {
  width: 116px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.55);
  border-left: 1px solid rgba(0,0,0,0.06);
  border-radius: 0 32px 32px 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}
.thumb-strip::-webkit-scrollbar { display: none; }

/* 单个缩略图 */
.thumb-item {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  border: 2.5px solid transparent;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  background: #ede8e2;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.thumb-item:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.thumb-item.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,107,87,0.18), 0 4px 16px rgba(0,0,0,0.1);
}
.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 序号角标 */
.thumb-item::after {
  content: attr(data-idx);
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.32);
  border-radius: 5px;
  padding: 1px 5px;
  line-height: 1.4;
  backdrop-filter: blur(2px);
}
/* pending 缩略图占位 */
.thumb-item.is-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff5f0, #ffeee0);
}
.thumb-item.is-pending::after { display: none; }
.thumb-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(255,107,87,0.2);
  border-top-color: #ff6b57;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
/* 缩略图条空状态 */
.thumb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 24px 6px;
  opacity: 0.5;
  line-height: 1.5;
}

/* 空状态 */
.feed-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 48px 0;
  text-align: center;
}
.feed-empty-icon { font-size: 2.4rem; opacity: 0.3; }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.workspace-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.04);
  margin-bottom: 14px;
}

.workspace-tabs button {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-tabs button.is-active {
  background: linear-gradient(135deg, #ff7a18, #ff9e0d);
  color: white;
  box-shadow: 0 18px 32px rgba(255, 122, 24, 0.24);
}

.model-stack {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.94);
}

.model-stack .select {
  border: 0;
  padding: 8px 6px 0;
  background: transparent;
  box-shadow: none;
}

.model-helper {
  display: none;
}

.text-link {
  color: #ff4f92;
  font-weight: 800;
}

.upload-box-large {
  min-height: 120px;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.mini-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.progress-inline {
  flex: 1;
  min-width: 0;
}

.progress-bar {
  display: block;
  height: 16px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  margin-bottom: 10px;
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4f92, #ff7d6d, #ffca6c);
}

/* result-stage-tall: flex 由末尾规则处理 */

.result-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

.result-canvas {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}

.result-arrow {
  width: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.96);
  color: var(--heading);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 800;
  align-self: center;
}

.editor-flow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  overflow: hidden;
  padding: 4px 0;
}

.editor-shot {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  flex-shrink: 0;
}

.editor-shot::before {
  content: "";
  position: absolute;
  inset: 0;
}

.editor-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(180deg, transparent 48%, rgba(15, 23, 42, 0.2) 100%);
}

.shot-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.68);
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shot-note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--heading);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.45;
}

.prompt-strip {
  width: 100%;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd36a, #ffb43c);
  color: #372100;
  box-shadow: 0 8px 20px rgba(255, 180, 60, 0.2);
  flex-shrink: 0;
}

.prompt-strip strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prompt-strip p {
  margin: 0;
  font-weight: 800;
  line-height: 1.5;
}

.editor-turn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 184, 77, 0.16);
  color: #f59e0b;
  font-size: 1.4rem;
  font-weight: 800;
  flex-shrink: 0;
}

.result-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex-shrink: 0;
  padding: 0 16px 16px;
}

.result-stat {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(249, 250, 251, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.result-stat strong {
  display: block;
  color: var(--heading);
  font-size: 0.98rem;
}

.result-stat span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.task-panel {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.task-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.task-list {
  display: grid;
  gap: 12px;
}

.task-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(249, 250, 251, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.task-item.is-active {
  border-color: rgba(255, 122, 24, 0.2);
  box-shadow: 0 14px 28px rgba(255, 122, 24, 0.12);
}

.task-thumb {
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.task-copy strong {
  display: block;
  color: var(--heading);
  font-size: 0.96rem;
}

.task-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.task-time {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.task-thumb.product {
  background: linear-gradient(145deg, #f8d0b3, #ffd88a);
}

.task-thumb.portrait {
  background: linear-gradient(145deg, #e5e0ff, #ffd4bc);
}

.task-thumb.scene {
  background: linear-gradient(145deg, #d8eef4, #bfe1ff);
}

.task-thumb.poster {
  background: linear-gradient(145deg, #fee6ea, #ffe48f);
}

.stats-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.stats-band div {
  padding: 28px 18px;
  text-align: center;
  border-right: 1px solid rgba(15, 23, 42, 0.07);
}

.stats-band div:last-child {
  border-right: 0;
}

.stats-band strong {
  display: block;
  color: var(--heading);
  font-size: 2rem;
  font-family: "Space Grotesk", sans-serif;
}

.stats-band span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
}

.section-heading-center {
  text-align: center;
  margin-bottom: 24px;
}

.section-heading-center p {
  max-width: 860px;
  margin: 14px auto 0;
  color: var(--muted);
  line-height: 1.7;
}

.toolkit-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 8px;
  width: fit-content;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 999px;
}

.toolkit-tab {
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
}

.toolkit-tab.is-active {
  background: linear-gradient(135deg, #ff8abf, #ff5b98);
  color: white;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.showcase-card {
  padding: 16px;
  border-radius: 30px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.09);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

.showcase-card.blue {
  background: linear-gradient(180deg, #dff0ff, #c8e5ff);
}

.showcase-card.mint {
  background: linear-gradient(180deg, #dff7ea, #c3f0dd);
}

.showcase-card.pink {
  background: linear-gradient(180deg, #ffe2eb, #ffcfe1);
}

.showcase-card.green {
  background: linear-gradient(180deg, #e4f8ea, #d4f5d4);
}

.showcase-card.tilt-left {
  transform: rotate(-2deg);
}

.showcase-card.tilt-right {
  transform: rotate(2deg);
}

.showcase-visual {
  min-height: 212px;
  border-radius: 24px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.showcase-visual img {
  width: 100%;
  height: 100%;
  min-height: 212px;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

.button-dark {
  margin-top: 16px;
  background: #101214;
  color: white;
}

.section-tinted {
  margin-top: 10px;
  padding-top: 34px;
  padding-bottom: 24px;
  background:
    radial-gradient(circle at 40% 20%, rgba(255, 184, 204, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(255, 226, 234, 0.68), rgba(255, 245, 248, 0.7));
}

.step-card {
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  gap: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 36px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.step-copy h3 {
  font-size: 2.2rem;
  margin-bottom: 24px;
}

.step-pill {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff8abf, #ff5b98);
  color: white;
  font-weight: 800;
  margin: 0 0 12px;
}

.text-cta {
  display: inline-flex;
  margin-top: 22px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.step-visual {
  position: relative;
  min-height: 440px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.step-visual::before,
.step-visual::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.step-visual::before {
  left: 0;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(3px);
}

.step-visual::after {
  right: 0;
  background: rgba(255, 255, 255, 0.04);
}

.step-before,
.step-after {
  position: absolute;
  bottom: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  color: white;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.step-before {
  left: 16px;
  background: rgba(255, 121, 157, 0.82);
}

.step-after {
  right: 16px;
  background: rgba(74, 171, 255, 0.82);
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.tutorial-card {
  padding: 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.tutorial-thumb {
  min-height: 220px;
  border-radius: 24px;
  margin-bottom: 14px;
  overflow: hidden;
}

.tutorial-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

.tutorial-meta {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 215, 228, 0.9);
  color: var(--heading);
  font-size: 0.86rem;
  font-weight: 800;
}

.testimonial-card {
  position: relative;
  padding: 34px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 95% 100%, rgba(217, 227, 255, 0.85), transparent 32%),
    rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow);
}

.rating-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.rating-row strong {
  display: block;
  font-size: 2rem;
  color: var(--heading);
}

.rating-row span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
}

.testimonial-card blockquote {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.6rem, 2.5vw, 2.65rem);
  line-height: 1.35;
  font-style: italic;
  font-weight: 800;
}

.quote-author {
  margin: 20px 0 0;
  color: var(--heading);
  font-weight: 800;
}

.faq-shell {
  padding: 14px 0 30px;
}

.faq-stack {
  display: grid;
  gap: 0;
}

.faq-row {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.faq-row button {
  /* reset — overridden by .faq-q below */
}

.faq-action {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.split-feature {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: 26px;
  align-items: center;
}

.floating-visual,
.illustration-card {
  position: relative;
  min-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.35), transparent 28%),
    linear-gradient(145deg, #fff7f2, #f5fbff);
}

.phone-ghost {
  position: absolute;
  left: 24px;
  top: 96px;
  width: 72px;
  height: 310px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 34px rgba(15, 23, 42, 0.12);
}

.card-float {
  position: absolute;
  right: 38px;
  bottom: 36px;
  width: 144px;
  height: 184px;
  border-radius: 22px;
  background: linear-gradient(145deg, #2c3138, #505a69);
  transform: rotate(-8deg);
  box-shadow: 0 26px 44px rgba(15, 23, 42, 0.18);
}

.accordion-card {
  padding: 16px 0;
}

.accordion-row {
  padding: 22px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.accordion-row.is-open .accordion-copy {
  display: block;
}

.accordion-title {
  color: var(--heading);
  font-size: 1.18rem;
  font-weight: 900;
}

.accordion-copy {
  display: none;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.scene-photo {
  position: absolute;
  border-radius: 28px;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.14);
}

.scene-photo-main {
  left: 28px;
  bottom: 32px;
  width: 62%;
  height: 60%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(57, 173, 202, 0.4));
}

.scene-photo-float {
  right: 24px;
  bottom: 54px;
  width: 36%;
  height: 42%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 193, 117, 0.4));
}

.scene-photo-small {
  left: 42px;
  top: 34px;
  width: 42%;
  height: 38%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.35), rgba(255, 116, 149, 0.35));
}

/* Reusable content and comparison components */
.numbered-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.numbered-card { min-height: 220px; padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.84); box-shadow: 0 12px 34px rgba(15,23,42,.06); }
.numbered-card .number { display: block; color: var(--brand); font-weight: 800; margin-bottom: 30px; }
.numbered-card h3 { margin-bottom: 10px; }
.numbered-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.before-after-slider { --compare-position: 50%; position: relative; overflow: hidden; min-height: 360px; border-radius: 24px; background: #ddd; }
.before-after-slider > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before-after-slider .after-image { clip-path: inset(0 0 0 var(--compare-position)); }
.before-after-slider::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--compare-position); width: 3px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.before-after-slider input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-label { position: absolute; z-index: 2; top: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(15,23,42,.72); color: white; font-size: .72rem; font-weight: 800; }
.compare-label.before { left: 16px; }
.compare-label.after { right: 16px; }
.pricing-pack { border-style: dashed; }

@media (max-width: 1080px) {
  .workspace-grid,
  .showcase-grid,
  .tutorial-grid,
  .split-feature,
  .step-card {
    grid-template-columns: 1fr 1fr;
  }

  .stats-band,
  .rating-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-grid,
  .split-feature,
  .step-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .trust-row,
  .toolkit-tabs,
  .showcase-grid,
  .tutorial-grid,
  .stats-band,
  .rating-row {
    grid-template-columns: 1fr;
  }

  .showcase-grid,
  .tutorial-grid {
    display: grid;
  }

  .trust-row {
    display: grid;
  }

  .stats-band div {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  }

  .stats-band div:last-child {
    border-bottom: 0;
  }

  .testimonial-card,
  .workspace-card,
  .step-card {
    padding: 22px;
  }

  .tutorial-thumb,
  .showcase-visual,
  .step-visual,
  .floating-visual,
  .illustration-card {
    min-height: 200px;
  }

  .result-canvas,
  .result-meta,
  .task-item {
    grid-template-columns: 1fr;
  }

  .result-arrow {
    display: none;
  }

  .editor-shot,
  .prompt-strip {
    width: 100%;
  }

  .faq-row {
    font-size: 1rem;
  }
}

/* ── result-stage: flex:1 让它撑满 result-shell ── */
.result-stage-tall {
  flex: 1;
}

/* ── task-panel 静态版本隐藏（用 drawer 替代） ── */
.task-panel {
  display: none;
}

/* ── History Drawer ── */
.history-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: var(--heading);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s;
}

.history-btn:hover {
  background: #fff;
}

.history-btn .hbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b57, #f4b942);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
}

.history-drawer {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-radius: 28px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.history-drawer.is-open {
  transform: translateY(0);
}

.history-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  flex-shrink: 0;
}

.history-drawer-head h3 {
  font-size: 1.05rem;
}

.history-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: var(--heading);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.history-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 20px;
  display: grid;
  gap: 10px;
}

.history-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(249, 250, 251, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: border-color 0.16s;
}

.history-item:hover {
  border-color: rgba(255, 107, 87, 0.28);
}

.history-item.is-active {
  border-color: rgba(255, 122, 24, 0.24);
  box-shadow: 0 8px 20px rgba(255, 122, 24, 0.1);
}

.history-thumb {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-thumb.no-img {
  background: linear-gradient(145deg, #f8d0b3, #ffd88a);
}
.history-thumb.no-img.portrait { background: linear-gradient(145deg, #e5e0ff, #ffd4bc); }
.history-thumb.no-img.scene    { background: linear-gradient(145deg, #d8eef4, #bfe1ff); }
.history-thumb.no-img.poster   { background: linear-gradient(145deg, #fee6ea, #ffe48f); }

.history-copy strong {
  display: block;
  color: var(--heading);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-time {
color: var(--muted);
font-size: 0.78rem;
font-weight: 800;
white-space: nowrap;
}

/* ── Pending history item ── */
.history-item.is-pending {
  opacity: 0.75;
  cursor: default;
  pointer-events: none;
}
.history-thumb-pending {
  width: 64px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff0e8, #fde9d3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hist-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,107,87,0.25);
  border-top-color: #ff6b57;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  display: block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hist-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ff7a18;
  background: rgba(255,122,24,0.1);
  border-radius: 20px;
  padding: 1px 8px;
  margin: 2px 0 4px;
}

/* ── Aspect Ratio 选择器 ── */
.ratio-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ratio-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 56px;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.ratio-chip:hover {
  border-color: rgba(255,107,87,0.4);
  color: var(--heading);
}
.ratio-chip.is-active {
  border-color: var(--brand);
  color: var(--heading);
  box-shadow: 0 0 0 3px rgba(255,107,87,0.12);
}
.ratio-icon {
  background: var(--muted);
  border-radius: 3px;
  opacity: 0.35;
  transition: background 0.15s, opacity 0.15s;
}
.ratio-chip.is-active .ratio-icon { background: var(--brand); opacity: 1; }
.ratio-chip:hover .ratio-icon     { opacity: 0.6; }

.ratio-square       { width: 22px; height: 22px; }
.ratio-landscape-sm { width: 28px; height: 18px; }
.ratio-portrait-sm  { width: 18px; height: 26px; }
.ratio-portrait     { width: 14px; height: 26px; }
.ratio-landscape    { width: 30px; height: 17px; }

/* ── Image Quality 选择器 ── */
.quality-row {
  display: flex;
  gap: 8px;
}
.quality-chip {
  padding: 7px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.quality-chip:hover { border-color: rgba(255,107,87,0.4); color: var(--heading); }
.quality-chip.is-active {
  border-color: var(--brand);
  color: var(--heading);
  box-shadow: 0 0 0 3px rgba(255,107,87,0.12);
}
.quality-chip.is-locked,
.quality-chip:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  border-color: var(--line);
  box-shadow: none;
}

/* ── Result-only 大图展示（点击 history 后） ── */
.result-only-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 24px 72px;
  box-sizing: border-box;
  position: relative;
}
.result-only-img {
  max-width: calc(100% - 12px);
  max-height: calc(100% - 92px);
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  display: block;
  margin: auto;
  transition: opacity .2s ease;
}
.result-watermark-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.result-watermark-loading .spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(15,23,42,.12);
  border-top-color: rgba(15,23,42,.6);
  animation: wm-spin .9s linear infinite;
}
@keyframes wm-spin { to { transform: rotate(360deg); } }
.result-image-unavailable {
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(145deg, #f2f0ec, #e7e4df);
  color: #8b8780;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}
.result-image-unavailable span { font-size: 0.72rem; font-weight: 700; }
.result-image-unavailable small { font-size: 0.58rem; line-height: 1.25; }
.result-image-unavailable-main {
  min-height: 320px;
  border-radius: 14px;
}
.result-image-unavailable-main span { font-size: 1rem; }
.result-image-unavailable-main small { font-size: 0.78rem; }
.result-only-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  width: 100%;
}
.result-only-meta > span:first-child {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.result-only-prompt {
  font-size: 0.82rem;
  color: var(--muted);
  opacity: 0.7;
  max-width: 480px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Generating state ── */
.result-stage.generating {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fff9f5, #f0f8ff);
}

.gen-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 24px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.gen-spinner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.gen-spinner span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b57, #f4b942);
  animation: gen-bounce 1.1s ease-in-out infinite;
}

.gen-spinner span:nth-child(2) { animation-delay: 0.18s; }
.gen-spinner span:nth-child(3) { animation-delay: 0.36s; }

@keyframes gen-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40% { transform: translateY(-14px); opacity: 1; }
}

.gen-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.02em;
}

.gen-sub {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 700;
}

.gen-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.gen-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6b57, #f4b942, #28c2b8);
  width: 4%;
  transition: width 0.8s ease;
}

.gen-prompt {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  background: rgba(244, 185, 66, 0.1);
  border: 1px solid rgba(244, 185, 66, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gen-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.gen-step {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  text-align: left;
  padding: 3px 0;
}

.gen-step.is-done { color: #16a34a; }
.gen-step.is-active { color: var(--heading); }

/* ── Toast ── */
.site-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 9999;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
}

.site-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.site-toast.success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.site-toast.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.site-toast.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

/* ── upload-box cursor 优化 ── */
.upload-box {
  cursor: pointer;
}

/* ── 上传后预览状态 ── */
.upload-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-preview img {
  max-width: 100%;
  max-height: 108px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.upload-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #1f2937;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.15s;
  z-index: 2;
}
.upload-remove:hover { background: #ef4444; }

/* ── 左右对比布局 ── */
.compare-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.compare-shot {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  min-height: 0;
}

.compare-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.compare-shot-in .shot-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.68);
  color: white;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shot-badge-out {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b57, #f4b942);
  color: white;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare-shot .shot-note {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--heading);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
}

/* ── 中间列 + AI Transform 卡片 ── */
.compare-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 104px;
  flex-shrink: 0;
  gap: 0;
}

.ai-transform-card {
  width: 100%;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 107, 87, 0.18);
  box-shadow: 0 4px 20px rgba(255, 107, 87, 0.1);
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ai-transform-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff6b57, #ff8d5c 50%, #f4b942);
  box-shadow: 0 6px 18px rgba(255, 107, 87, 0.35);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  animation: icon-breathe 3s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { box-shadow: 0 6px 18px rgba(255,107,87,.35); transform: scale(1); }
  50%       { box-shadow: 0 8px 26px rgba(255,107,87,.55); transform: scale(1.06); }
}

.ai-transform-label {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
}

.ai-transform-prompt {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.ai-transform-arrows {
  display: flex;
  gap: 2px;
  align-items: center;
}

.ai-transform-arrows span {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--brand);
  animation: arrow-flow 1.5s ease-in-out infinite;
  opacity: 0.4;
}

.ai-transform-arrows span:nth-child(2) { animation-delay: 0.25s; }
.ai-transform-arrows span:nth-child(3) { animation-delay: 0.5s; }

@keyframes arrow-flow {
  0%, 100% { opacity: 0.25; transform: translateX(0); }
  50%       { opacity: 0.9;  transform: translateX(2px); }
}

/* 小屏退化为单列 */
@media (max-width: 900px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-mid { width: 100%; flex-direction: row; }
}

/* ── Tutorial pages ──────────────────────────────────────── */

/* Card clickable */
.tut-card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.tut-card-link { cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; }
.tut-card-link:hover { transform: translateY(-4px); box-shadow: 0 28px 64px rgba(15,23,42,0.13); }

/* Category badge on thumb */
.tutorial-thumb { position: relative; }
.tut-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-size: 0.8rem; font-weight: 700;
  color: var(--heading); backdrop-filter: blur(6px);
}

/* Card body */
.tut-card-body { padding: 4px 6px 8px; }
.tut-meta-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.tut-level {
  display: inline-flex; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,215,228,0.85); font-size: 0.78rem; font-weight: 700; color: var(--heading);
}
.tut-time { font-size: 0.82rem; color: var(--muted); }
.tut-card-body h3 { font-size: 1.05rem; margin: 6px 0 8px; line-height: 1.4; }
.tut-card-body p  { font-size: 0.9rem; color: var(--muted); margin: 0 0 12px; }
.tut-read-link { font-size: 0.88rem; font-weight: 700; color: var(--brand); }

/* Filter row */
.tut-filter-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0 24px; }

/* Loading */
.tut-loading { color: var(--muted); padding: 40px 0; font-size: 0.95rem; }
.tut-loading-full { display: flex; align-items: center; justify-content: center; min-height: 40vh; color: var(--muted); font-size: 1rem; }

/* CTA band */
.tut-cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: rgba(255,255,255,0.9); border-radius: 28px;
  padding: 40px 44px; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(15,23,42,0.08);
}
.tut-cta-band h2 { font-size: 1.5rem; margin: 0 0 6px; }
.tut-cta-band p  { margin: 0; color: var(--muted); }

/* ── Detail page ──────────────────────────────────────────── */
.tut-breadcrumb { padding: 28px 0 0; font-size: 0.9rem; }
.tut-breadcrumb a { color: var(--muted); text-decoration: none; font-weight: 600; }
.tut-breadcrumb a:hover { color: var(--brand); }

.tut-detail-hero { padding: 36px 0 24px; }
.tut-detail-hero-inner { max-width: 780px; }
.tut-detail-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tut-detail-title { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.2; margin: 0 0 14px; }
.tut-detail-summary { font-size: 1.1rem; color: var(--muted); margin: 0; max-width: 680px; }

.tut-detail-thumb {
  margin-bottom: 48px;
}
.tut-detail-thumb img {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: 28px; display: block;
}

.tut-detail-body {
  max-width: 780px; padding-bottom: 60px;
}
.tut-intro {
  font-size: 1.12rem; line-height: 1.75; color: var(--text);
  background: rgba(255,255,255,0.7); padding: 24px 28px; border-radius: 18px;
  border-left: 4px solid var(--brand); margin-bottom: 36px;
}
.tut-h2 { font-size: 1.35rem; margin: 40px 0 14px; }
.tut-p  { font-size: 1rem; line-height: 1.72; color: var(--text); margin: 0 0 18px; }
.tut-list { padding-left: 22px; margin: 0 0 22px; }
.tut-list li { font-size: 1rem; line-height: 1.65; color: var(--text); margin-bottom: 8px; }

/* Prompt block */
.tut-prompt-block {
  background: var(--heading); border-radius: 20px; padding: 22px 24px; margin: 24px 0 32px;
}
.tut-prompt-label { font-size: 0.8rem; font-weight: 800; color: var(--brand); letter-spacing: 0.06em; margin-bottom: 14px; }
.tut-prompt-item { position: relative; margin-bottom: 12px; }
.tut-prompt-item:last-child { margin-bottom: 0; }
.tut-prompt-code {
  font-family: "SF Mono", "Fira Code", monospace; font-size: 0.88rem; line-height: 1.6;
  color: #e2e8f0; background: rgba(255,255,255,0.08); border-radius: 12px;
  padding: 12px 80px 12px 16px; margin: 0; white-space: pre-wrap; word-break: break-word;
}
.tut-copy-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.15); color: #e2e8f0; font-size: 0.78rem; font-weight: 700;
  transition: background 0.15s;
}
.tut-copy-btn:hover { background: rgba(255,255,255,0.28); }

.tut-cta-inline { margin: 32px 0; }

@media (max-width: 900px) {
  .tut-cta-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .tut-detail-body { padding-left: 0; padding-right: 0; }
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { padding: 18px 0 0; }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.88rem; color: var(--muted);
}
.breadcrumb-list li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb-list li:not(:last-child)::after { content: '/'; color: var(--line); }
.breadcrumb-list a { color: var(--muted); text-decoration: none; font-weight: 600; }
.breadcrumb-list a:hover { color: var(--brand); }
.breadcrumb-list [aria-current="page"] { color: var(--heading); font-weight: 700; }

/* Tutorial detail date */
.tut-detail-date { font-size: 0.85rem; color: var(--muted); margin-top: 12px; }

/* ── Tutorial category grid (tutorial.html) ───────────────── */
.tut-category-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; margin-top: 24px;
}
.tut-category-card {
  display: block; padding: 24px; border-radius: 20px;
  background: rgba(255,255,255,0.85); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.tut-category-card:hover {
  transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,0.10);
  border-color: var(--brand);
}
.tut-cat-icon { display: block; font-size: 1.8rem; margin-bottom: 12px; }
.tut-category-card h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--heading); }
.tut-category-card p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── Changelog (changelog.html) ───────────────────────────── */
.changelog-list { display: flex; flex-direction: column; gap: 18px; }
.changelog-entry {
  padding: 24px 28px; border-radius: 20px;
  background: rgba(255,255,255,0.85); border: 1px solid var(--line);
  transition: box-shadow 0.18s, border-color 0.18s;
}
.changelog-entry:hover { box-shadow: 0 12px 32px rgba(15,23,42,0.08); border-color: var(--brand); }
.changelog-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.changelog-date { font-size: 0.88rem; font-weight: 700; color: var(--muted); }
.changelog-tag {
  display: inline-flex; padding: 4px 12px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.tag-feature    { background: rgba(255,107,87,0.12);  color: var(--brand); }
.tag-model      { background: rgba(88,141,239,0.12);  color: #5b8def; }
.tag-improvement{ background: rgba(40,194,184,0.12);  color: #28c2b8; }
.tag-fix        { background: rgba(244,185,66,0.14);  color: #d99a16; }
.changelog-entry h3 { font-size: 1.1rem; margin: 0 0 8px; color: var(--heading); }
.changelog-entry p  { font-size: 0.95rem; color: var(--muted); margin: 0; line-height: 1.6; }

@media (max-width: 900px) {
  .tut-category-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .changelog-entry { padding: 20px 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gallery Grid
═══════════════════════════════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-rows: repeat(2, 260px);
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 14px;
  padding-bottom: 14px;
  margin-top: 28px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
/* loading/empty 状态：临时改回 block，不走 column-flow */
.gallery-grid--loading {
  display: block !important;
}
.gallery-loading, .gallery-empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
  font-size: 0.95rem;
}
.gallery-card {
  background: var(--surface-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15,23,42,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(15,23,42,0.12); }
.gallery-card-img-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s;
}
.gallery-card-img-wrap:hover .gallery-card-img { transform: scale(1.04); }
.gallery-card-body { padding: 14px 16px; }
.gallery-card-model {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand); background: rgba(255,107,87,0.1);
  padding: 2px 8px; border-radius: 100px; margin-bottom: 6px;
}
.gallery-card-prompt {
  font-size: 0.82rem; color: var(--muted); line-height: 1.45;
  margin: 0 0 10px; min-height: 2.4em;
}
.gallery-card-footer { display: flex; align-items: center; justify-content: flex-end; }

/* ── Like button ─────────────────────────────────────────────── */
.like-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 12px; cursor: pointer;
  font-size: 0.85rem; color: var(--muted);
  transition: all 0.15s;
}
.like-btn:hover { border-color: var(--brand); color: var(--brand); }
.like-btn.is-liked { border-color: var(--brand); color: var(--brand); background: rgba(255,107,87,0.06); }
.like-icon { font-size: 0.9rem; }

@media (max-width: 640px) {
.gallery-grid {
  width: 100%;
  grid-template-rows: repeat(2, 200px);
  grid-auto-columns: minmax(148px, 44vw);
  gap: 10px;
  overscroll-behavior-inline: contain;
}
.gallery-card { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gallery Lightbox
═══════════════════════════════════════════════════════════════════════════ */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,23,42,0.85); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.gallery-lightbox.is-open { opacity: 1; pointer-events: all; }
.lightbox-inner {
  position: relative;
  background: var(--surface-strong);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 860px; width: 90vw;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.lightbox-img {
  width: 100%; max-height: 62vh; object-fit: contain;
  background: #0f172a;
}
.lightbox-meta { padding: 18px 24px; }
.lightbox-prompt { font-size: 0.88rem; color: var(--text); line-height: 1.55; margin: 0 0 12px; }
.lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lightbox-model { font-size: 0.78rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; }
.lightbox-close {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer;
  font-size: 1.1rem; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; z-index: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,0.24); }

/* ═══════════════════════════════════════════════════════════════════════════
Share Modal
═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open {
  display: flex;
}
.modal-box {
  background: white;
  border-radius: 24px;
  padding: 32px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(15,23,42,0.22);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 16px; right: 18px;
  background: none; border: none;
  font-size: 1.1rem; color: var(--muted);
  cursor: pointer; line-height: 1;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--heading); }
.share-modal-box {
  max-width: 460px;
}
.share-modal-title {
  font-size: 1.25rem; font-weight: 800; color: var(--heading);
  margin: 0 0 6px;
}
.share-modal-sub {
  font-size: 0.88rem; color: var(--muted); margin: 0 0 14px;
}
.share-prompt-preview {
  font-size: 0.82rem; color: var(--muted); font-style: italic;
  background: var(--bg); border-radius: 10px; padding: 8px 12px;
  margin: 0 0 20px; min-height: 1.6em;
}
.share-platforms {
  display: flex; flex-direction: column; gap: 10px;
}
.share-platform-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--bg-soft);
  font-size: 0.9rem; font-weight: 600; color: var(--text); cursor: pointer;
  transition: all 0.15s; text-align: left;
}
.share-platform-btn:hover {
  border-color: var(--brand); background: rgba(255,107,87,0.04);
}
.share-platform-btn svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Result Actions Bar (Make Public / Share / Download) — floating pill
═══════════════════════════════════════════════════════════════════════════ */
.result-actions {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.14);
  max-width: calc(100% - 32px);
  flex-wrap: nowrap;
}
.result-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.result-action-btn:hover {
  background: #f4f3ff;
  color: #5748ce;
}
.btn-make-public.is-public {
  color: var(--brand-2);
  background: rgba(40,194,184,0.10);
}
.btn-make-public.is-public:hover {
  background: rgba(40,194,184,0.16);
  color: var(--brand-2);
}
.btn-download {
  background: var(--brand);
  color: #fff;
}
.btn-download:hover {
  background: #ff5240;
  color: #fff;
}
/* 无水印下载：视觉上区分为付费权益入口，点击进入订阅引导 */
.btn-download-hd {
  background: linear-gradient(135deg, #6b5bff, #9b6bff);
  color: #fff;
}
.btn-download-hd:hover {
  background: linear-gradient(135deg, #5a4af0, #8a5af0);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   积分预估（生成按钮上方）
═══════════════════════════════════════════════════════════════════════════ */
.cost-preview {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
.cost-preview.is-insufficient {
  color: var(--brand);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   统一订阅引导弹窗（Plus / Pro 对比）
═══════════════════════════════════════════════════════════════════════════ */
.upgrade-modal-card {
  max-width: 520px;
  position: relative;
}
.upgrade-credits-summary {
  display: inline-block;
  background: #f0f0ff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .83rem;
  color: #5748ce;
  font-weight: 600;
  margin-bottom: 8px;
}
.upgrade-packs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.upgrade-packs .credit-pack-card { cursor: pointer; }
.upgrade-packs .credit-pack-card:hover { border-color: #6c5ce7; box-shadow: 0 0 0 3px rgba(108,92,231,.08); }
.upgrade-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}
@media (max-width: 560px) {
  .upgrade-plans { grid-template-columns: 1fr; }
}
.upgrade-plan-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upgrade-plan-card.is-featured {
  border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(255, 88, 70, 0.12);
}
.upgrade-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.upgrade-plan-head strong {
  font-size: 1.05rem;
}
.upgrade-plan-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.upgrade-plan-price small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}
.upgrade-plan-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.upgrade-plan-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
.upgrade-plan-rows li b {
  color: var(--text);
  font-weight: 600;
}
.account-metric-warning {
  display: block;
  margin-top: 6px;
  color: var(--brand);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Thumbnail Delete Button
═══════════════════════════════════════════════════════════════════════════ */
.thumb-item { position: relative; }
.thumb-delete-btn {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(15,23,42,0.65); color: #fff;
  border: none; cursor: pointer; font-size: 0.7rem; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  line-height: 1;
}
.thumb-item:hover .thumb-delete-btn { display: flex; }
.thumb-delete-btn:hover { background: var(--brand); }
.thumb-failed { display: flex; align-items: center; justify-content: center; color: var(--brand); font-weight: 700; font-size: 1rem; width: 100%; height: 100%; }
.thumb-item.is-failed { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   How-Steps — unified 3-step component (number circle + icon box + connector)
═══════════════════════════════════════════════════════════════════════════ */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  margin-top: 48px;
}

/* Horizontal connector line between steps */
.how-steps::before {
  content: '';
  position: absolute;
  top: 52px; /* center of icon box */
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: linear-gradient(to right, var(--brand, #6c5ce7) 0%, rgba(108,92,231,.25) 50%, var(--brand, #6c5ce7) 100%);
  z-index: 0;
}

.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* Number badge */
.how-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand, #6c5ce7);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  right: calc(50% - 52px);
  z-index: 2;
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(108,92,231,.25);
}

/* Icon box */
.how-step-icon {
  width: 96px;
  height: 96px;
  background: #fff;
  border: 1.5px solid rgba(108,92,231,.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(108,92,231,.08);
  margin-bottom: 24px;
  position: relative;
}
.how-step-icon svg {
  width: 40px;
  height: 40px;
  color: var(--brand, #6c5ce7);
  flex-shrink: 0;
}

.how-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 10px;
  line-height: 1.3;
}
.how-step p {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 720px) {
  .how-steps { grid-template-columns: 1fr; gap: 32px; }
  .how-steps::before { display: none; }
  .how-step { padding: 0; align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; }
  .how-step-icon { flex-shrink: 0; width: 64px; height: 64px; margin-bottom: 0; border-radius: 14px; }
  .how-step-icon svg { width: 28px; height: 28px; }
  .how-step-num { top: -8px; right: auto; left: calc(64px - 14px); }
  .how-step-body { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Style Showcase Section — compact chip grid
═══════════════════════════════════════════════════════════════════════════ */
.style-showcase-section { background: var(--bg-soft); }

/* Compact chip grid: 2 columns, each card is a horizontal chip */
.style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.style-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border, #e5e9f0);
  border-radius: 14px;
  padding: 12px 16px 12px 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
  cursor: pointer;
}
.style-card:hover {
  border-color: var(--brand, #6c5ce7);
  box-shadow: 0 4px 20px rgba(108,92,231,0.12);
  transform: translateY(-2px);
}
.style-card-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft);
}
.style-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.style-card:hover .style-card-thumb img { transform: scale(1.08); }
.style-card-info {
  flex: 1;
  min-width: 0;
}
.style-card-info h3 {
  margin: 0 0 3px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.style-card-prompt {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.style-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand, #6c5ce7);
  text-decoration: none;
}
.style-card-cta:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .style-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature Split — ezenhancer-style left/right alternating layout
   Used for "What You Can Do" capability showcase
═══════════════════════════════════════════════════════════════════════════ */
.feature-split-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 8px;
}
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.feature-split.reverse { direction: rtl; }
.feature-split.reverse > * { direction: ltr; }

.feature-split-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #e8e4ff 0%, #ddf5ff 100%);
}
.feature-split-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s;
}
.feature-split:hover .feature-split-visual img { transform: scale(1.04); }

.feature-split-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(108,92,231,0.9);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.feature-split-copy { }
.feature-split-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand, #6c5ce7);
  margin-bottom: 10px;
}
.feature-split-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--heading);
}
.feature-split-copy p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: var(--text-muted, #64748b);
  line-height: 1.7;
}
.feature-split-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.feature-split-tags span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand, #6c5ce7);
  background: rgba(108,92,231,0.08);
  border: 1px solid rgba(108,92,231,0.18);
  border-radius: 100px;
  padding: 3px 11px;
}
.feature-split-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  border-bottom: 2px solid var(--brand, #6c5ce7);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.feature-split-cta:hover { color: var(--brand, #6c5ce7); }

@media (max-width: 860px) {
  .feature-split { grid-template-columns: 1fr; gap: 24px; }
  .feature-split.reverse { direction: ltr; }
  .feature-split-list { gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Testimonials — legacy Infinite Scroll Track (homepage only)
═══════════════════════════════════════════════════════════════════════════ */
.testimonials-scroll-section { overflow: hidden; }

.testimonials-track-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.testimonials-track-wrap:hover .testimonials-track { animation-play-state: paused; }

.testimonials-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll-testimonials 48s linear infinite;
}

@keyframes scroll-testimonials {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonial-item {
  background: white;
  border-radius: var(--radius-sm);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.06);
  display: flex; flex-direction: column;
  width: 300px;
  flex-shrink: 0;
}
.testimonial-stars {
  color: #f59e0b; font-size: 0.9rem; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.testimonial-item blockquote {
  font-size: 0.86rem; color: var(--text); line-height: 1.65;
  margin: 0 0 16px; font-style: italic; flex: 1;
}
.testimonial-author {
  display: flex; align-items: center; gap: 12px;
}
.testimonial-author img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0;
}
.testimonial-author div { display: flex; flex-direction: column; }
.testimonial-author strong { font-size: 0.86rem; color: var(--heading); font-weight: 700; }
.testimonial-author span  { font-size: 0.78rem; color: var(--muted); }

@media (max-width: 640px) {
  .testimonial-item { width: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Review Wall — unified 2-row auto-scroll (all interior pages)
   ───────────────────────────────────────────────────────────────────────────
   Usage:
     <div class="review-wall">
       <div class="review-wall-row">          ← row 1, scrolls left
         <div class="review-card">…</div> × N (duplicate for seamless loop)
       </div>
       <div class="review-wall-row reverse">  ← row 2, scrolls right
         <div class="review-card">…</div> × N
       </div>
     </div>
═══════════════════════════════════════════════════════════════════════════ */
.review-wall {
  overflow: hidden;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 6px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.review-wall-row {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: rw-scroll-left 52s linear infinite;
}
.review-wall-row.reverse {
  animation: rw-scroll-right 52s linear infinite;
}
.review-wall-row:hover,
.review-wall-row.reverse:hover { animation-play-state: paused; }

@keyframes rw-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes rw-scroll-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.review-card {
  flex-shrink: 0;
  width: 340px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(15,23,42,.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .22s, border-color .22s;
}
.review-card:hover {
  box-shadow: 0 14px 36px rgba(108,92,231,.10);
  border-color: rgba(108,92,231,.24);
}
.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.review-card-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #edf0f5;
}
.review-card-meta {
  display: flex;
  flex-direction: column;
}
.review-card-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}
.review-card-role {
  font-size: .76rem;
  color: var(--muted);
  margin-top: 2px;
}
.review-card-stars {
  color: #f59e0b;
  font-size: .9rem;
  letter-spacing: .08em;
  flex-shrink: 0;
  white-space: nowrap;
}
.review-card blockquote {
  margin: 0;
  font-size: .86rem;
  color: var(--text);
  line-height: 1.68;
  font-style: normal;
}

@media (max-width: 760px) {
  .review-card { width: 280px; padding: 18px; }
  .review-wall-row { gap: 12px; }
  .review-wall { gap: 12px; }
}

/* ── Review wall: fallback avatar + status states ──────────── */
.review-card-avatar-fallback {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}

.review-wall-status {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  width: 100%;
}
[data-reviews-wall].review-wall--loading .review-wall-status,
[data-reviews-wall].review-wall--empty .review-wall-status,
[data-reviews-wall].review-wall--error .review-wall-status {
  display: block;
}
[data-reviews-wall].review-wall--error .review-wall-status {
  color: #b91c1c;
}

/* Section spacing */
.section--testimonials .review-wall {
  margin-top: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Prompt Examples (scene.html)
═══════════════════════════════════════════════════════════════════════════ */
.prompt-examples-wrap {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
  margin-bottom: 8px;
}
.prompt-examples-title {
  font-size: 1rem; font-weight: 700; color: var(--heading);
  margin: 0 0 16px;
}
.prompt-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prompt-example-group { }
.prompt-example-label {
  display: inline-block;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand); background: rgba(255,107,87,0.1);
  padding: 2px 8px; border-radius: 100px; margin-bottom: 8px;
}
.prompt-example-group ul {
  margin: 0; padding-left: 1.1em;
  display: flex; flex-direction: column; gap: 5px;
}
.prompt-example-group li {
  font-size: 0.8rem; color: var(--muted); line-height: 1.4;
}
@media (max-width: 860px) {
  .prompt-examples-grid { grid-template-columns: 1fr; }
}

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  font-size: 1rem; font-weight: 700; color: var(--heading);
  padding: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; line-height: 1.4;
}
.faq-toggle {
  flex-shrink: 0; font-size: 1.2rem; font-weight: 400;
  transition: transform 0.2s; margin-top: 1px;
}
.faq-row.is-open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  font-size: 0.88rem; color: var(--muted); line-height: 1.75;
  margin-top: 10px; display: none;
  padding-right: 28px;
}
.faq-row.is-open .faq-a { display: block; }

/* ── Feature Deep — 图文并排深度功能区块 ─────────────────────── */
.feature-deep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.feature-deep.reverse { direction: rtl; }
.feature-deep.reverse > * { direction: ltr; }

.feature-deep-visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff7f2, #f0f9ff);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.10);
}

.feature-deep-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 360px;
  max-height: 460px;
}

.feature-deep-visual .before-after-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.before-after-badge span {
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.before-after-badge span.after {
  background: linear-gradient(135deg, #ff6b57, #f4b942);
}

.feature-deep-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-deep-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(255, 107, 87, 0.1);
  border: 1px solid rgba(255, 107, 87, 0.2);
  border-radius: 999px;
  padding: 4px 14px;
  display: inline-flex;
  width: fit-content;
}

.feature-deep-copy h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: var(--heading);
  line-height: 1.2;
  margin: 0;
}

.feature-deep-copy p {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.78;
  margin: 0;
}

.feature-deep-copy p + p {
  margin-top: -6px;
}

.feature-deep-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.feature-deep-tags span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--heading);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 5px 14px;
}

.feature-deep-copy .button {
  align-self: flex-start;
  margin-top: 4px;
}

/* divider between deep feature blocks */
.feature-deep-section + .feature-deep-section {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 72px;
}

@media (max-width: 900px) {
  .feature-deep {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .feature-deep.reverse { direction: ltr; }
  .feature-deep-visual img { min-height: 260px; max-height: 320px; }
}

/* ═══ 首页 v2 新增模块样式 ═════════════════════════════════ */

/* 三支柱 */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}
.pillar-card {
  padding: 26px 24px 30px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
}
.pillar-card h3 {
  margin: 0 0 14px;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--heading);
}
.pillar-card p {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}
.pillar-card .text-cta { margin-top: auto; }

/* 风格卡 Try it 链接 */
.style-try {
  display: inline-flex;
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent, #ff6b57);
  text-decoration: none;
}
.style-try:hover { text-decoration: underline; }

/* 教程两列列表 */
.tutorial-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  margin-top: 30px;
}
.tutorial-list-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.07);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}
.tutorial-list-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}
.tut-list-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.45;
}
.tutorial-list-link:hover .tut-list-title { color: var(--accent, #ff6b57); }
.tut-list-meta {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.tutorial-list-action {
  margin-top: 24px;
  text-align: center;
}

/* Footer 多列 */
.footer-inner {
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer-brand { max-width: 300px; }
.footer-brand .small-note { margin-top: 10px; line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 130px; }
.footer-col h4 {
  margin: 0 0 4px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--heading);
}
.footer-col a {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}
.footer-col a:hover { color: var(--accent, #ff6b57); }

@media (max-width: 860px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .tutorial-list { grid-template-columns: 1fr; }
}

/* 画廊 Lightbox 生成器信息（模型名 + 关键词描述行） */
.lightbox-model-wrap { display: flex; flex-direction: column; gap: 3px; }
.lightbox-model {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
  text-transform: none;
  letter-spacing: 0;
}
.lightbox-model-link { color: var(--brand); text-decoration: underline; }
.lightbox-model-link:hover { color: var(--accent, #ff6b57); }
.lightbox-model-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026 visual system — polished AI creative studio
   ═══════════════════════════════════════════════════════════════════════════ */
::selection { color: #fff; background: var(--brand); }

:focus-visible {
  outline: 3px solid rgba(108, 92, 231, .28);
  outline-offset: 3px;
}

.site-header { box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 32px rgba(15,23,42,.035); }
.header-inner { max-width: 1380px; margin-inline: auto; }
.nav { gap: 8px; }
.nav > a, .nav-dropdown-trigger { padding: 9px 11px; border-radius: 10px; font-size: .86rem; font-weight: 650; }
.nav > a:hover, .nav-dropdown-trigger:hover { color: var(--heading); background: #f5f6fa; }
.nav-dropdown-menu { min-width: 278px; padding: 10px; border-radius: 18px; box-shadow: 0 20px 55px rgba(16,24,40,.14); }
.nav-dropdown-item { padding: 11px 12px; }
.nav-dropdown-item:hover { background: var(--brand-soft); }
.nav-dropdown-item-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f5f3ff; }

.button { min-height: 44px; letter-spacing: -.01em; }
.button:hover { transform: translateY(-2px); filter: saturate(1.04); }
.button:active { transform: translateY(0) scale(.985); }
.button-dark { background: #111827; color: #fff; box-shadow: 0 10px 24px rgba(17,24,39,.16); }
.button-secondary { box-shadow: 0 3px 10px rgba(15,23,42,.04); }

.intro-center { position: relative; overflow: hidden; padding: 34px 0 14px; }
.intro-center::before { content: ""; position: absolute; width: 420px; height: 420px; left: 50%; top: -300px; transform: translateX(-50%); border-radius: 50%; background: rgba(108,92,231,.10); filter: blur(6px); pointer-events: none; }
.intro-center .container { position: relative; }
.intro-center h1, .page-hero h1 { max-width: 900px; margin: 12px auto 10px; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.page-hero h1 { margin-inline: 0; }
.intro-copy { max-width: 720px; margin-top: 4px; margin-bottom: 12px; font-size: .95rem; line-height: 1.55; }
.intro-center .trust-row { margin-top: 10px; gap: 8px; }
.intro-center .trust-row span { padding: 6px 12px; font-size: .78rem; }
.eyebrow { color: #5748ce; background: #efedff; border: 1px solid rgba(108,92,231,.12); }
.trust-row { gap: 9px; margin-top: 22px; }
.trust-row span { background: rgba(255,255,255,.78); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(15,23,42,.035); }

.section { padding: 76px 0; }
.section + .section { margin-top: 0; }
.section-tinted, .section--features, .section--steps { background: linear-gradient(180deg, rgba(239,237,255,.42), rgba(246,248,252,.68)); border-block: 1px solid rgba(108,92,231,.06); }
.section-heading-center { max-width: 760px; margin: 0 auto 36px; }
.section-heading-center h2, .section-head h2 { font-size: clamp(2rem, 3.3vw, 3.4rem); line-height: 1.06; letter-spacing: -.052em; text-wrap: balance; }
.section-heading-center p { margin-top: 13px; font-size: 1.02rem; line-height: 1.7; }

.workspace-section { padding: 18px 0 54px; }
.workspace-grid { gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.64); box-shadow: 0 28px 90px rgba(49,46,129,.10); backdrop-filter: blur(20px); }
.workspace-card { border: 1px solid rgba(15,23,42,.08); border-radius: 22px; box-shadow: none; background: rgba(255,255,255,.96); }
.control-card { padding: 22px 22px 0; }
.workspace-tabs { padding: 4px; border-radius: 12px; background: #f2f4f7; }
.workspace-tabs button { min-height: 38px; border-radius: 9px; }
.workspace-tabs button.is-active { background: #fff; color: var(--heading); box-shadow: 0 3px 10px rgba(15,23,42,.08); }
.field label { margin-bottom: 7px; font-size: .78rem; letter-spacing: .01em; }
.select, .textarea, .input { border-radius: 12px; border-color: #dfe3ea; background: #fff; }
.select:focus, .textarea:focus, .input:focus { border-color: rgba(108,92,231,.6); box-shadow: 0 0 0 4px rgba(108,92,231,.10); }
.chip { cursor: pointer; padding: 8px 12px; border-radius: 9px; font-size: .78rem; background: #fff; }
.chip:hover { color: #5748ce; border-color: rgba(108,92,231,.28); background: #f8f7ff; }
.chip.is-active { color: #5748ce; border-color: rgba(108,92,231,.30); background: #efedff; }
.model-meta-pill, .model-badge-index span { color: #5748ce; background: #efedff; border: 1px solid rgba(108,92,231,.12); }
.upload-box { min-height: 128px; border-radius: 16px; border-color: rgba(108,92,231,.36); background: linear-gradient(145deg,#faf9ff,#f5fbfb); }
.generator-footer .button-primary { border-radius: 12px; }
.task-feed-card, .result-main { background: #f0f2f6; }
.task-feed-card { border-radius: 22px; min-height: 560px; }
.result-main { border-radius: 22px 0 0 22px; background-image: radial-gradient(#d5d9e2 1px, transparent 1px); background-size: 18px 18px; }
.thumb-strip { width: 108px; border-radius: 0 22px 22px 0; background: rgba(255,255,255,.9); }
.thumb-item { width: 84px; height: 84px; border-radius: 12px; }
.thumb-item.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(108,92,231,.14); }

.stats-band { border-radius: 22px; padding: 22px; background: #111827; color: #fff; box-shadow: 0 18px 50px rgba(17,24,39,.13); }
.stats-band strong { color: #fff; }
.stats-band span { color: #aeb7c6; }

.numbered-grid, .why-grid, .features-grid, .steps-grid { gap: 18px; }
.numbered-card, .why-card, .feature-card, .step-card { position: relative; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-soft); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.numbered-card:hover, .why-card:hover, .feature-card:hover, .step-card:hover { transform: translateY(-5px); border-color: rgba(108,92,231,.22); box-shadow: 0 22px 50px rgba(30,41,59,.10); }
.numbered-card .number, .why-num, .step-num { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 34px; border-radius: 13px; color: #5748ce; background: #efedff; font-weight: 800; }

.showcase-grid { gap: 20px; }
.showcase-card { overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: #fff !important; box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease; }
.showcase-card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(30,41,59,.12); }
.showcase-visual { margin: -16px -16px 18px; border-radius: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #edf0f5; }
.showcase-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.showcase-card:hover .showcase-visual img { transform: scale(1.035); }
.showcase-card h3 { font-size: 1.13rem; line-height: 1.3; letter-spacing: -.025em; }
.showcase-card p { color: var(--muted); line-height: 1.65; }
.showcase-card .button { margin-top: 6px; min-height: 38px; padding: 9px 13px; font-size: .8rem; }
.showcase-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand, #6c5ce7);
  margin-bottom: 8px;
}
.showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.showcase-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand, #6c5ce7);
  background: rgba(108,92,231,0.07);
  border: 1px solid rgba(108,92,231,0.16);
  border-radius: 100px;
  padding: 2px 9px;
  white-space: nowrap;
}

.results-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.result-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-soft); }
.result-card > img, .result-before-after { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.result-before-after { position: relative; overflow: hidden; }
.result-before-after img { width: 100%; height: 100%; object-fit: cover; }
.result-after-label { position: absolute; right: 14px; top: 14px; padding: 7px 10px; border-radius: 999px; color: #fff; background: rgba(17,24,39,.78); font-size: .72rem; font-weight: 800; backdrop-filter: blur(8px); }
.result-card figcaption { padding: 18px; }
.result-card figcaption p { margin: 6px 0 0; color: var(--muted); }

.feature-deep { gap: 54px; align-items: center; }
.feature-deep-section { margin-block: 34px; }
.feature-deep-visual { border-radius: 26px; box-shadow: 0 24px 65px rgba(30,41,59,.14); }
.feature-deep-copy h2 { font-size: clamp(2rem,3.4vw,3.45rem); line-height: 1.06; }
.feature-deep-copy p { line-height: 1.78; }
.before-after-slider { min-height: 430px; border-radius: 26px; cursor: ew-resize; }
.before-after-slider .before-image { filter: saturate(.55) contrast(.9) brightness(.88); }
.before-after-slider .after-image { filter: saturate(1.08) contrast(1.04) brightness(1.04); }
.before-after-slider::before { content: "↔"; position: absolute; z-index: 4; left: var(--compare-position); top: 50%; width: 42px; height: 42px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 3px solid #fff; border-radius: 50%; color: #5748ce; background: #fff; box-shadow: 0 6px 20px rgba(15,23,42,.22); pointer-events: none; }
.compare-label { top: 18px; padding: 8px 12px; background: rgba(17,24,39,.74); backdrop-filter: blur(8px); }

.pricing-card { padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); }
.pricing-card.is-featured { transform: translateY(-10px); border-color: rgba(108,92,231,.35); box-shadow: 0 28px 65px rgba(108,92,231,.16); }
.pricing-card.is-featured::before { content: "Recommended"; position: absolute; right: -34px; top: 20px; width: 140px; padding: 7px 0; transform: rotate(35deg); text-align: center; color: #fff; background: var(--brand); font-size: .68rem; font-weight: 800; }
.compare-table { box-shadow: var(--shadow-soft); background: #fff; }
.compare-table tr:hover td { background: #fafaff; }

/* ── Credit Pack Pricing ─────────────────────────────────────────────── */
.free-tier-banner { background: #f8f7ff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 24px 28px; }
.free-tier-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.free-tier-inner strong { font-size: 1rem; }
.free-tier-inner p { margin: 4px 0 0; color: #6b7280; font-size: .9rem; }

.credit-pack-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 32px auto 0; }
.credit-pack-card { position: relative; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 16px 20px; background: #fff; cursor: pointer; transition: border-color .18s, box-shadow .18s; user-select: none; }
.credit-pack-card:hover { border-color: #6c5ce7; box-shadow: 0 0 0 3px rgba(108,92,231,.08); }
.credit-pack-card.is-popular { border-color: #6c5ce7; background: #fdfcff; }
.credit-pack-card.is-loading { opacity: .6; pointer-events: none; }
.pack-main { display: flex; align-items: center; justify-content: space-between; }
.pack-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pack-credits { font-size: 1rem; font-weight: 700; color: #111; }
.pack-discount { padding: 2px 8px; border-radius: 6px; background: #fff3e0; color: #e67e22; font-size: .75rem; font-weight: 700; }
.pack-rate { color: #9ca3af; font-size: .8rem; }
.pack-price { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pack-original { text-decoration: line-through; color: #d1d5db; font-size: .88rem; }
.pack-price strong { font-size: 1.25rem; font-weight: 800; color: #111; }
.pack-hot { position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 20px; background: #e74c3c; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; }

.faq-shell { max-width: 840px; padding-block: 6px 18px; }
.faq-stack { gap: 8px; }
.faq-row { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.03); }
.faq-q { min-height: 48px; padding: 12px 16px; font-size: .94rem; font-weight: 700; line-height: 1.35; align-items: center; }
.faq-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 50%;
  color: #5748ce;
  background: #f1efff;
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
}
.faq-a { margin-top: 0; padding: 0 42px 14px 16px; font-size: .84rem; line-height: 1.62; }
.faq-row.is-open { border-color: rgba(108,92,231,.22); box-shadow: 0 8px 22px rgba(108,92,231,.065); }
.faq-row.is-open .faq-toggle { color: #fff; background: var(--brand); }

.tutorial-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); transition: transform .24s ease, box-shadow .24s ease; }
.tutorial-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(30,41,59,.11); }
.tutorial-thumb { aspect-ratio: 16/10; }
.tut-category-card, .changelog-entry, .status-card, .dashboard-card { border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-soft); }
.tut-category-card:hover { border-color: rgba(108,92,231,.26); background: #fafaff; }

.site-footer { margin-top: 70px; padding: 58px 0; color: #98a2b3; background: #101828; }
.site-footer .brand, .site-footer strong, .site-footer h4 { color: #fff; }
.site-footer .footer-inner { padding-top: 0; border: 0; }
.site-footer a:hover { color: #c8c2ff; }

@media (max-width: 1080px) {
  .results-grid { grid-template-columns: 1fr 1fr; }
  .results-grid .result-card:first-child { grid-column: 1 / -1; }
  .workspace-grid { padding: 8px; }
}

@media (max-width: 760px) {
  .intro-center { padding: 44px 0 22px; }
  .intro-center h1, .page-hero h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .section { padding: 54px 0; }
  .section-heading-center { margin-bottom: 26px; }
.workspace-grid { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; height: auto; max-height: none; min-height: 0; }
.control-card { padding: 16px 16px 0; }
.task-feed-card { min-height: 440px; flex-direction: column; }
.task-feed-card, .result-main { border-radius: 22px; }
.result-main { border-radius: 22px; min-height: 320px; }
.thumb-strip { width: 100%; height: auto; max-height: 110px; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-left: 0; border-top: 1px solid rgba(0,0,0,0.06); border-radius: 0 0 22px 22px; padding: 8px 10px; }
.thumb-item { width: 66px; height: 66px; }
  .results-grid { grid-template-columns: 1fr; }
  .results-grid .result-card:first-child { grid-column: auto; }
  .before-after-slider { min-height: 340px; }
  .pricing-card.is-featured { transform: none; }
  .compare-table { display: block; width: 100%; overflow-x: auto; }
  .feature-deep-tags + .button { max-width: 100%; white-space: normal; text-align: center; }
  .site-footer { padding: 42px 0; }
}

@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: clip; }
  /* Horizontal galleries scroll internally without increasing the document width. */
  [data-gallery-section] { width: 100%; min-width: 0; overflow: hidden; }
  [data-gallery-section] .gallery-grid { max-width: calc(100vw - 32px); }
  /* Dense standards tables stay readable through internal horizontal scrolling. */
  .table-wrap, .country-table-wrap, .standards-table-wrap { width: 100%; overflow-x: auto; }
  .section table:not(.compare-table) { display: block; width: 100%; max-width: calc(100vw - 32px); overflow-x: auto; }
  .feature-deep-copy .button { max-width: 100%; white-space: normal; text-align: center; }

  /* ── 工作台移动端细化 ── */
  .workspace-grid { gap: 10px; }
  .workspace-card { border-radius: 18px; }
  .control-card { padding: 14px 12px 0; }
  .task-feed-card { min-height: 360px; border-radius: 18px; }
  .result-main { border-radius: 18px; min-height: 260px; }
  .thumb-strip { max-height: 90px; border-radius: 0 0 18px 18px; padding: 6px 8px; }
  .thumb-item { width: 56px; height: 56px; border-radius: 10px; }
  .quality-row { flex-wrap: wrap; }
  .quality-chip { padding: 6px 14px; font-size: .82rem; }
  .generator-footer { padding: 8px 0 12px; }
  .generator-footer .button-primary { width: 100%; }
  .prompt-composer .textarea { min-height: 96px; }
  .upload-box { min-height: 96px; }
  .model-picker-menu { left: -12px; right: -12px; max-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.review-wall-row, .testimonials-track { animation: none !important; }
}

/* ── Prompt composer（内嵌图片上传） ─────────────────────── */
.prompt-composer {
  position: relative;
  min-height: 126px;
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.prompt-composer:focus-within {
  border-color: rgba(108,92,231,.5);
  box-shadow: 0 0 0 3px rgba(108,92,231,.07);
}
.prompt-composer .textarea {
  width: 100%;
  min-height: 124px;
  padding: 14px 14px 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  resize: vertical;
}
.prompt-composer .textarea:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.prompt-composer-bar {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.prompt-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(108,92,231,.28);
  border-radius: 999px;
  background: #f8f7ff;
  color: #5748ce;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  transition: background .16s ease, border-color .16s ease;
}
.prompt-attach:hover {
  background: #efedff;
  border-color: rgba(108,92,231,.42);
}
.prompt-attach-note {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.prompt-image-preview {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 9px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15,23,42,.1);
}
.prompt-image-preview[hidden] { display: none; }
.prompt-image-preview img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}
.prompt-image-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  font-size: .68rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: background .15s;
}
.prompt-image-remove:hover { background: #ef4444; }

/* ── 模型选择器（自定义下拉） ───────────────────────────── */
.model-picker {
  position: relative;
}
.model-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #e1e4ea;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.model-picker-trigger:hover,
.model-picker.is-open .model-picker-trigger {
  border-color: rgba(108,92,231,.42);
  box-shadow: 0 0 0 3px rgba(108,92,231,.07);
}
.mp-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f4f3ff;
  font-size: .95rem;
}
.mp-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mp-name {
  font-size: .9rem;
  font-weight: 800;
  color: var(--heading);
}
.mp-desc {
  font-size: .74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.2;
}
.mp-badge-pro {
  color: #fff;
  background: #7557e8;
  border: 1px solid #7557e8;
}
.mp-badge-free {
  color: #13756d;
  background: #e9f8f5;
  border: 1px solid #c9eee7;
}
.mp-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .18s ease;
}
.model-picker.is-open .mp-chevron { transform: rotate(180deg); }
.model-picker-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border: 1px solid #e2e5eb;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(30,41,59,.14);
}
.model-picker-menu[hidden] { display: none; }
.model-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.model-option:hover {
  background: #f8f7ff;
}
.model-option.is-active {
  background: #fff9e9;
}
.model-option .mp-icon {
  width: 30px;
  height: 30px;
  font-size: .95rem;
}
.model-option .mp-name {
  font-size: .84rem;
}
.model-option .mp-desc {
  font-size: .7rem;
}

/* Unified model pages — editorial system with model-specific accents */
body[data-model-page] .tool-page {
  --seedream-ink: #171512;
  --seedream-paper: #f7f3eb;
  --seedream-sand: #e8dfcf;
  --seedream-gold: #b87a34;
  --seedream-green: #244f43;
  background: #fcfbf8;
}
body[data-model-page="gpt-image-2"] .tool-page { --seedream-paper: #f0f4f7; --seedream-sand: #d9e2e8; --seedream-gold: #39718a; --seedream-green: #244f63; }
body[data-model-page="nano-banana"] .tool-page { --seedream-paper: #f5f0fa; --seedream-sand: #e4d8ef; --seedream-gold: #8253a5; --seedream-green: #554064; }

body[data-model-page] .intro-center {
  padding: 72px 0 40px;
  background:
    radial-gradient(circle at 15% 25%, rgba(184,122,52,.13), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(36,79,67,.11), transparent 28%),
    linear-gradient(180deg, #f7f3eb 0%, #fcfbf8 100%);
}

body[data-model-page] .intro-center::before {
  width: 580px;
  height: 580px;
  top: -430px;
  background: rgba(184,122,52,.14);
}

body[data-model-page] .intro-center h1 {
  max-width: 1050px;
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: .96;
  letter-spacing: -.065em;
  color: var(--seedream-ink);
}

body[data-model-page] .intro-copy {
  max-width: 820px;
  margin-top: 24px;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #625d54;
}

body[data-model-page] .eyebrow,
.seedream-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: 14px;
  color: #80501e;
  background: #f0e2cd;
  border: 1px solid #e1c7a3;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body[data-model-page] .trust-row--hero {
  max-width: 970px;
  margin: 28px auto 0;
}

body[data-model-page] .trust-row--hero .trust-badge {
  color: #3f3a33;
  background: rgba(255,255,255,.68);
  border-color: rgba(92,78,61,.14);
  backdrop-filter: blur(14px);
}

.seedream-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--seedream-ink);
}

.seedream-stats > div {
  min-height: 132px;
  padding: 28px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.seedream-stats > div:last-child { border-right: 0; }
.seedream-stats strong { font-size: .72rem; color: #d9b986; text-transform: uppercase; letter-spacing: .12em; }
.seedream-stats span { margin-top: 12px; color: #f7f3eb; font-size: .95rem; line-height: 1.45; }

.seedream-narrow { max-width: 1050px; }
.seedream-feature-section { background: var(--seedream-paper); }
.model-guide > .container > .section-heading-center { max-width: 820px; margin-bottom: 64px; }
.guide-chapter { padding: 56px 0; border-top: 1px solid #d9cebc; background: transparent; }
.guide-chapter:first-of-type { padding-top: 0; border-top: 0; }
.guide-chapter-heading { max-width: 780px; margin: 0 auto 32px; text-align: left; }
.guide-chapter-heading > span { display: block; margin-bottom: 12px; color: var(--seedream-gold); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.guide-chapter-heading h3 { margin: 0 0 12px; color: var(--seedream-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.12; }
.guide-chapter-heading p { margin: 0; color: #6f685f; font-size: 1rem; line-height: 1.75; }
.model-guide .seedream-prompts,
.model-guide .model-deep-dive,
.model-guide .model-settings,
.model-guide .editing-mistakes,
.model-guide .style-vocabulary,
.model-guide .character-drift,
.model-guide .series-workflow { background: transparent; }
body[data-model-page="gpt-image-2"] .guide-chapter-heading > span { color: #3d7896; }
body[data-model-page="nano-banana"] .guide-chapter { border-color: rgba(255,255,255,.16); }
body[data-model-page="nano-banana"] .guide-chapter-heading h3 { color: #fff; }
body[data-model-page="nano-banana"] .guide-chapter-heading p { color: #bdb6c4; }
body[data-model-page="nano-banana"] .guide-chapter-heading > span { color: #c9a9dc; }
body[data-model-page="nano-banana"] .style-token-grid article,
body[data-model-page="nano-banana"] .drift-grid article { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.16); }
body[data-model-page="nano-banana"] .style-token-grid { border-color: rgba(255,255,255,.16); }
body[data-model-page="nano-banana"] .style-token-grid span,
body[data-model-page="nano-banana"] .drift-grid article > strong,
body[data-model-page="nano-banana"] .workflow-steps h3 { color: #f3e8f8; }
body[data-model-page="nano-banana"] .style-token-grid p,
body[data-model-page="nano-banana"] .drift-grid p,
body[data-model-page="nano-banana"] .workflow-steps p { color: #c3bac7; }
body[data-model-page="nano-banana"] .workflow-steps,
body[data-model-page="nano-banana"] .workflow-steps li { border-color: rgba(255,255,255,.16); }
.seedream-accordion { border-top: 1px solid #d9cebc; }
.seedream-panel { border-bottom: 1px solid #d9cebc; }
.seedream-panel summary {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 100px;
  cursor: pointer;
  list-style: none;
}
.seedream-panel summary::-webkit-details-marker { display: none; }
.seedream-panel summary > span { color: var(--seedream-gold); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
.seedream-panel summary strong { color: var(--seedream-ink); font-size: clamp(1.25rem,2.3vw,1.8rem); letter-spacing: -.03em; }
.seedream-panel summary i { color: #777064; font-size: .82rem; font-style: normal; }
.seedream-panel summary::after { content: "+"; display: none; }
.seedream-panel[open] summary i { color: var(--seedream-gold); }
.seedream-panel-body { padding: 0 30px 34px 72px; color: #5e584e; line-height: 1.75; }
.seedream-panel-body > p:first-child { max-width: 780px; font-size: 1.03rem; }
.seedream-panel-body ul { display: grid; gap: 9px; margin: 22px 0 0; padding-left: 20px; }
.seedream-panel-body strong { color: #26221d; }
.seedream-tip-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 26px; }
.seedream-tip-grid > div { padding: 22px; background: rgba(255,255,255,.62); border: 1px solid #ded3c1; }
.seedream-tip-grid h3 { margin: 0; font-size: .95rem; }
.seedream-tip-grid ul { font-size: .84rem; }

.seedream-prompts { background: #fff; }
.seedream-prompt-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.seedream-prompt-group { padding: 26px; border: 1px solid #ded8cd; background: #fcfbf8; }
.seedream-prompt-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.seedream-prompt-group-head span { color: var(--seedream-gold); font-size: .7rem; font-weight: 800; }
.seedream-prompt-group-head h3 { margin: 0; font-size: 1.15rem; }
.seedream-prompt { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; width: 100%; padding: 15px 0; border: 0; border-top: 1px solid #e8e2d8; color: #3e3932; background: transparent; text-align: left; cursor: pointer; }
.seedream-prompt:hover code { color: var(--seedream-gold); }
.seedream-prompt > span { color: #9b9387; font-size: .68rem; padding-top: 2px; }
.seedream-prompt code { font: 500 .78rem/1.58 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: normal; transition: color .18s ease; }

.seedream-compare { background: var(--seedream-paper); }
.seedream-table-wrap { overflow-x: auto; border: 1px solid #dcd2c2; background: #fff; box-shadow: 0 18px 55px rgba(48,40,28,.08); }
.seedream-table { width: 100%; min-width: 780px; border-collapse: collapse; text-align: left; }
.seedream-table th, .seedream-table td { padding: 17px 18px; border-bottom: 1px solid #ece6dc; font-size: .86rem; }
.seedream-table thead th { color: #fff; background: var(--seedream-ink); }
.seedream-table tbody th { width: 23%; color: #28241f; background: #faf8f4; }
.seedream-table .is-current { background: #f2e7d5; }
.seedream-table thead .is-current { color: #fff; background: var(--seedream-gold); }
.seedream-table thead span { display: block; margin-top: 5px; font-size: .65rem; font-weight: 600; opacity: .8; }
.table-yes, .table-no { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.table-yes { color: #175949; background: #ddf2eb; }
.table-no { color: #776f63; background: #ece9e4; }

.seedream-showcase { background: #161512; }
.seedream-showcase .section-heading-center h2 { color: #fff; }
.seedream-showcase .section-heading-center p { color: #aaa398; }
.seedream-showcase .seedream-kicker { color: #e7c28e; background: rgba(184,122,52,.13); border-color: rgba(231,194,142,.25); }
.seedream-use-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 390px; gap: 12px; }
.seedream-use-card { position: relative; overflow: hidden; min-height: 390px; background: #29251f; }
.seedream-use-card--wide { grid-column: span 2; }
.seedream-use-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.seedream-use-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(10,9,8,.88)); }
.seedream-use-card:hover img { transform: scale(1.045); }
.seedream-use-card > div { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; color: #fff; }
.seedream-use-card span { color: #e4bd85; font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.seedream-use-card h3 { margin: 7px 0; color: #fff; font-size: 1.25rem; }
.seedream-use-card p { margin: 0; color: #d8d3cb; font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

.seedream-guides .tutorial-card { color: inherit; text-decoration: none; }
.seedream-guides .tutorial-card h3, .seedream-guides .tutorial-card p, .seedream-guides .tutorial-card .tutorial-meta { margin-inline: 18px; }
.seedream-guides .tutorial-card p { margin-bottom: 22px; }
.seedream-faq { background: var(--seedream-paper); }
.seedream-faq .faq-row { border-radius: 0; border-color: #ddd3c3; box-shadow: none; background: rgba(255,255,255,.65); }
.seedream-faq .faq-row.is-open { border-color: #c79554; box-shadow: none; }
.seedream-faq .faq-toggle { color: #80501e; background: #efe1cd; }
.seedream-faq .faq-row.is-open .faq-toggle { background: var(--seedream-gold); }

/* Model-specific content patterns inside the shared editorial system */
.edit-showcase-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.edit-showcase-card { padding: 18px; color: #eee9e2; border: 1px solid rgba(255,255,255,.14); background: #242321; }
.edit-showcase-visual { position: relative; height: 300px; overflow: hidden; margin-bottom: 18px; }
.edit-showcase-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.edit-showcase-card:hover img { transform: scale(1.035); }
.edit-showcase-visual span { position: absolute; left: 14px; bottom: 14px; padding: 6px 9px; color: #fff; background: rgba(15,15,15,.76); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.edit-showcase-card h3 { margin: 0 0 8px; color: #fff; }
.edit-showcase-card p { margin: 0; color: #bdb7ae; line-height: 1.6; }
.character-system { background: #171512; color: #f8f4ed; }
.character-system .section-heading-center h2 { color: #fff; }
.character-system .section-heading-center p { color: #bdb6c4; }
.identity-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.identity-copy, .identity-card { padding: clamp(24px,4vw,42px); border: 1px solid rgba(255,255,255,.14); }
.identity-copy > p { margin-top: 0; color: #c8c2bb; font-size: 1.05rem; line-height: 1.75; }
.identity-parts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.identity-parts span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); color: #e9dff0; font-size: .72rem; }
.identity-card { display: flex; flex-direction: column; justify-content: center; background: #2c2233; }
.identity-card > span { color: #cfa9e9; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.identity-card code { display: block; margin: 22px 0; color: #fff; font: 500 .92rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: normal; }
.identity-card small { color: #c3b7ca; line-height: 1.6; }
.style-vocabulary { background: #fff; }
.style-token-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #ddd5e4; border-left: 1px solid #ddd5e4; }
.style-token-grid article { min-height: 150px; padding: 26px; border-right: 1px solid #ddd5e4; border-bottom: 1px solid #ddd5e4; }
.style-token-grid span { color: var(--seedream-gold); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.style-token-grid p { margin: 18px 0 0; color: #55505a; line-height: 1.65; }
.character-use-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.18); }
.character-use-grid article { min-height: 220px; padding: 30px; background: #201c23; }
.character-use-grid strong { color: #caa2e7; font-size: .72rem; letter-spacing: .12em; }
.character-use-grid h3 { margin: 42px 0 10px; color: #fff; }
.character-use-grid p { margin: 0; color: #bdb5c2; line-height: 1.6; }

.model-deep-dive { background: #fff; }
.prompt-breakdown, .edit-breakdown-layout { border: 1px solid #ddd5c8; background: #fbf9f5; }
.breakdown-prompt { padding: 26px; color: #fff; background: var(--seedream-ink); }
.breakdown-prompt code, .breakdown-instruction code { font: 500 .9rem/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: normal; }
.breakdown-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.breakdown-grid article { min-height: 210px; padding: 24px; border-right: 1px solid #ddd5c8; }
.breakdown-grid article:last-child { border-right: 0; }
.breakdown-grid strong, .edit-breakdown-layout > div > span, .mistake-grid article > strong { color: var(--seedream-gold); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.breakdown-grid h3, .mistake-grid h3 { margin: 30px 0 10px; font-size: 1rem; }
.breakdown-grid p, .mistake-grid p { margin: 0; color: #666057; font-size: .86rem; line-height: 1.65; }
.model-settings { background: var(--seedream-paper); }
.settings-table tbody th { width: 25%; }
.edit-breakdown-layout { display: grid; grid-template-columns: .8fr 1.2fr 1fr; }
.edit-breakdown-layout > div { padding: 30px; border-right: 1px solid #ddd5c8; }
.edit-breakdown-layout > div:last-child { border-right: 0; }
.edit-breakdown-layout h3 { margin: 32px 0 10px; }
.edit-breakdown-layout p, .edit-breakdown-layout li { color: #5f5a52; line-height: 1.65; }
.breakdown-instruction { color: #fff; background: var(--seedream-ink); }
.breakdown-instruction code { display: block; margin-top: 30px; }
.breakdown-instruction span { color: #9bc5d8 !important; }
.editing-mistakes { background: var(--seedream-paper); }
.mistake-grid, .drift-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.mistake-grid article, .drift-grid article { padding: 28px; border: 1px solid #d9d1c5; background: rgba(255,255,255,.78); }
.mistake-grid small { display: block; margin-top: 20px; padding-top: 18px; border-top: 1px solid #ddd5c8; color: #375e70; line-height: 1.6; }
.model-choice-note { background: var(--seedream-paper); }
.model-choice-note .container { max-width: 900px; }
.model-choice-note h2 { max-width: 800px; margin: 0 0 18px; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.05; letter-spacing: -.045em; }
.model-choice-note p { color: #5d574e; font-size: 1.04rem; line-height: 1.75; }
.model-choice-note a { color: var(--seedream-gold); font-weight: 800; }
.related-guides { background: #fff; }
.related-guides h2 { margin: 0 0 26px; font-size: clamp(1.8rem,3vw,2.7rem); }
.related-guide-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #ded8cd; }
.related-guide-links a { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; color: inherit; text-decoration: none; border-bottom: 1px solid #ded8cd; border-right: 1px solid #ded8cd; }
.related-guide-links a:last-child { border-right: 0; }
.related-guide-links a:hover strong { color: var(--seedream-gold); }
.related-guide-links span { color: #746e65; font-size: .84rem; line-height: 1.5; }
.character-drift { background: var(--seedream-paper); }
.drift-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.drift-grid article > strong { display: block; margin-bottom: 18px; color: #432b54; font-size: 1rem; }
.drift-grid p { margin: 8px 0; color: #605767; line-height: 1.6; }
.drift-rule { display: grid; grid-template-columns: 170px 1fr; gap: 22px; margin-top: 18px; padding: 24px 28px; color: #fff; background: #2c2233; }
.drift-rule span { color: #d8cddd; line-height: 1.6; }
.series-workflow { background: #fff; }
.workflow-steps { max-width: 920px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid #ddd5e4; }
.workflow-steps li { display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid #ddd5e4; }
.workflow-steps li > span { color: var(--seedream-gold); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.workflow-steps h3 { margin: 0 0 8px; }
.workflow-steps p { margin: 0; color: #635d66; line-height: 1.65; }

@media (max-width: 980px) {
  .seedream-stats { grid-template-columns: 1fr 1fr; }
  .seedream-stats > div:nth-child(2) { border-right: 0; }
  .seedream-stats > div { border-bottom: 1px solid rgba(255,255,255,.12); }
  .seedream-tip-grid { grid-template-columns: 1fr; }
  .seedream-use-grid { grid-template-columns: 1fr 1fr; }
  .style-token-grid, .character-use-grid, .breakdown-grid { grid-template-columns: 1fr 1fr; }
  .breakdown-grid article { border-bottom: 1px solid #ddd5c8; }
  .edit-breakdown-layout { grid-template-columns: 1fr; }
  .edit-breakdown-layout > div { border-right: 0; border-bottom: 1px solid #ddd5c8; }
}

@media (max-width: 680px) {
  body[data-model-page] .intro-center { padding-top: 48px; }
  body[data-model-page] .intro-center h1 { font-size: clamp(2.65rem,13vw,4rem); }
  body[data-model-page] .intro-copy { font-size: .96rem; }
  .seedream-stats, .seedream-prompt-groups, .seedream-use-grid { grid-template-columns: 1fr; }
  .seedream-stats > div { min-height: 0; border-right: 0; }
  .seedream-panel summary { grid-template-columns: 38px minmax(0,1fr) 24px; min-height: 84px; }
  .seedream-panel summary i { display: none; }
  .seedream-panel summary::after { display: block; font-size: 1.3rem; }
  .seedream-panel[open] summary::after { content: "−"; }
  .seedream-panel-body { padding: 0 0 28px 38px; }
  .seedream-prompt-group { padding: 20px; }
  .seedream-use-card--wide { grid-column: auto; }
  .seedream-use-card { min-height: 340px; }
  .edit-showcase-grid, .identity-layout, .style-token-grid, .character-use-grid, .breakdown-grid, .mistake-grid, .drift-grid, .related-guide-links { grid-template-columns: 1fr; }
  .edit-showcase-visual { height: 250px; }
  .breakdown-grid article, .related-guide-links a { border-right: 0; }
  .drift-rule { grid-template-columns: 1fr; }
  .workflow-steps li { grid-template-columns: 46px 1fr; }
}

/* ── Unified credit and account controls ───────────────────── */
.header-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 5px 6px 5px 8px;
  border: 1px solid rgba(108, 92, 231, .24);
  border-radius: 999px;
  color: var(--heading);
  background: linear-gradient(135deg, #fff 15%, #f4f1ff 100%);
  box-shadow: 0 7px 20px rgba(91, 76, 219, .11);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-credit-link:hover {
  transform: translateY(-1px);
  border-color: rgba(108, 92, 231, .48);
  box-shadow: 0 10px 26px rgba(91, 76, 219, .18);
}
.header-credit-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5b4cdb, #8d80f4);
  font-size: 1.05rem;
  font-weight: 500;
}
.header-credit-copy { display: flex; align-items: baseline; gap: 4px; }
.header-credit-copy strong { font-size: .9rem; line-height: 1; }
.header-credit-copy small { color: #696279; font-size: .7rem; font-weight: 700; }
.header-credit-cta {
  padding: 7px 11px;
  border-radius: 999px;
  color: #fff;
  background: #5b4cdb;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.header-signin { min-height: 40px; }
.google-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.google-login-link:hover {
  border-color: #b9b0ee;
  background: #f7f5ff;
}
.user-menu { position: relative; }
.user-menu[hidden] { display: none !important; }
.user-avatar-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5b4cdb, #8d80f4);
  box-shadow: 0 0 0 1px rgba(91, 76, 219, .28), 0 7px 18px rgba(37, 28, 94, .15);
  cursor: pointer;
}
.user-avatar-btn:hover,
.user-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(108, 92, 231, .16), 0 8px 20px rgba(37, 28, 94, .2); }
.user-avatar-btn img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.user-avatar-btn span { font-weight: 800; }
.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 310px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  z-index: 1000;
}
.user-menu.is-open .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.user-dropdown-header { display: flex; align-items: center; gap: 11px; }
.user-dropdown-avatar-wrap {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5b4cdb, #8d80f4);
  font-weight: 800;
}
.user-dropdown-avatar { width: 100%; height: 100%; object-fit: cover; }
.user-dropdown-info { min-width: 0; flex: 1; }
.user-dropdown-name { overflow: hidden; color: var(--heading); font-size: .9rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown-email { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown-badge { padding: 4px 8px; border-radius: 999px; color: #51469f; background: #efedff; font-size: .66rem; font-weight: 800; }
.user-dropdown-quota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding: 12px;
  border-radius: 12px;
  background: #f7f7fb;
}
.user-dropdown-quota > div { display: grid; gap: 3px; }
.user-dropdown-quota-label { color: var(--heading); font-size: .75rem; font-weight: 800; }
.user-dropdown-quota small { color: var(--muted); font-size: .65rem; }
.user-dropdown-quota-total { color: #5b4cdb; font-size: 1.22rem; }
.user-dropdown-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  padding: 11px 12px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #5b4cdb, #7969eb);
  box-shadow: 0 8px 18px rgba(91, 76, 219, .18);
}
.user-dropdown-buy span { font-size: .82rem; font-weight: 800; }
.user-dropdown-buy small { color: rgba(255, 255, 255, .8); font-size: .68rem; }
.user-dropdown-divider { height: 1px; margin: 10px 0; background: var(--line); }
.user-dropdown-item {
  display: flex;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  color: #383548;
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.user-dropdown-item:hover { background: #f4f3f8; }
.user-dropdown-logout { color: #b43c4c; }

@media (max-width: 760px) {
  .header-actions { width: auto; margin-left: auto; gap: 8px; }
  .header-credit-link { min-height: 38px; padding: 4px 5px 4px 7px; }
  .header-credit-icon { width: 23px; height: 23px; }
  .header-credit-cta { display: none; }
  .header-signin { max-width: 132px; overflow: hidden; }
  .user-avatar-btn { width: 38px; height: 38px; }
  .user-dropdown { position: fixed; top: 68px; right: 16px; left: 16px; width: auto; }
  .header-actions .mobile-toggle { width: auto; padding: 10px 12px; }
}