:root {
  --blue: #1157f5;
  --blue-deep: #0642e8;
  --text: #07090f;
  --muted: #33415f;
  --line: #d8e4ff;
  --soft-blue: #eef5ff;
  --green: #09a55a;
  --purple: #7430ef;
  --radius: 8px;
  color-scheme: light;
  font-family:
    "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  background: #fff;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 28%, rgba(38, 102, 255, 0.07), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #fbfdff 100%);
}

img,
svg {
  display: block;
}

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

button {
  border: 0;
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 4vw, 72px);
  min-height: 68px;
  padding: 0 clamp(18px, 3.6vw, 48px);
  border-bottom: 1px solid #e5ebf5;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 12px rgba(26, 54, 112, 0.05);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 84px;
  height: 56px;
}

.brand img {
  width: 84px;
  height: 56px;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 4.2vw, 56px);
  height: 68px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  font-size: 16px;
  font-weight: 700;
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 68px;
  color: #111827;
}

.main-nav a.active {
  color: var(--blue);
}

.main-nav a.active::after {
  position: absolute;
  right: 0;
  bottom: 9px;
  left: 0;
  height: 3px;
  border-radius: 20px;
  background: var(--blue);
  content: "";
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
}

.history-link {
  color: #064cff;
}

.login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 44px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #1768ff 0%, #0648f2 100%);
  box-shadow: 0 6px 14px rgba(18, 84, 241, 0.22);
}

.credits-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid #d8e4ff;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8faff 0%, #eef5ff 100%);
  font-size: 14px;
  font-weight: 800;
  color: #1157f5;
  white-space: nowrap;
}

.credits-display svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.credits-value {
  font-size: 16px;
  font-weight: 950;
  color: #0642e8;
}

.credits-label {
  color: #5c6a82;
  font-size: 13px;
  font-weight: 700;
}

.page-shell {
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 32px clamp(18px, 3.1vw, 48px) 16px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(400px, 536px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(20px, 3.1vw, 54px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 8px;
}

.slanted-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  isolation: isolate;
  min-height: 54px;
  margin: 0 0 24px 0;
  padding: 0 16px 0 22px;
  width: max-content;
  transform: none;
  color: #1053ff;
  background: transparent;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.slanted-label::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1.5px solid #2368ff;
  border-radius: 4px;
  background: #fff;
  content: "";
}

.slanted-label::after {
  position: absolute;
  inset: 8px -8px -8px 8px;
  z-index: -2;
  border-radius: 4px;
  background: #1157f5;
  content: "";
}

.hero-copy h1 {
  margin: 0 0 16px;
  font-size: clamp(36px, 2.86vw, 48px);
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: 0;
}

.hero-subtitle {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}

.hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 202px) minmax(0, 193px);
  gap: 22px;
  margin-bottom: 24px;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 55px;
  border-radius: 7px;
  font-size: 18px;
  font-weight: 900;
}

.primary-btn {
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(16, 82, 245, 0.21);
}

.secondary-btn {
  border: 1.5px solid #0d59ff;
  color: #1157f5;
  background: #fff;
}

.primary-btn svg,
.secondary-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 0;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: #202532;
  font-size: 16px;
  font-weight: 800;
}

.benefits li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 157px;
}

.benefits li + li {
  padding-left: 28px;
}

.benefits li + li::before {
  position: absolute;
  left: 0;
  width: 1px;
  height: 24px;
  background: #d9e4f8;
  content: "";
}

.benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 4px 10px rgba(17, 87, 245, 0.22);
}

.benefit-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.upload-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 530px;
  padding: 12px 18px 6px;
  border: 1px solid #e1e8f5;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 24px rgba(31, 74, 146, 0.08);
}

.upload-card h2 {
  margin: 0 0 8px 6px;
  font-size: 18px;
  font-weight: 900;
}

.drop-zone {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  min-height: 140px;
  padding: 24px 16px 20px;
  margin-bottom: 4px;
  border: 2px dashed #d7dde7;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.drop-zone.is-dragging {
  border-color: #c7cfdb;
  background: #fafbfc;
  box-shadow: inset 0 0 0 2px rgba(17, 24, 39, 0.04);
}

.drop-zone.has-preview {
  justify-items: start;
  padding: 8px 12px;
  text-align: left;
}

.drop-zone.has-preview > svg {
  display: none;
}

.drop-zone.has-preview > strong,
.drop-zone.has-preview > span:not(.selected-file) {
  display: none;
}

.selected-file {
  display: none;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.drop-zone.has-preview .selected-file {
  display: flex;
}

.selected-file img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 6px;
  object-fit: contain;
  background: #eef3fb;
}

.selected-file span {
  overflow: hidden;
  color: #202b40;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-file,
.brand-logo-file,
.reference-file,
.outfit-upload-file,
.remix-upload-preview,
.tools-upload-preview {
  position: relative;
}

.upload-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  color: transparent;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
  cursor: pointer;
  font-size: 0;
  font-weight: 900;
  line-height: 1;
}

.upload-remove::before,
.upload-remove::after {
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: #dc2626;
  content: "";
}

.upload-remove::before {
  transform: rotate(45deg);
}

.upload-remove::after {
  transform: rotate(-45deg);
}

.selected-file .upload-remove,
.brand-logo-file .upload-remove,
.reference-file .upload-remove,
.remix-upload-preview .upload-remove,
.tools-upload-preview .upload-remove {
  top: -7px;
  right: auto;
  left: 28px;
  width: 22px;
  height: 22px;
}

.selected-file .upload-remove::before,
.selected-file .upload-remove::after,
.brand-logo-file .upload-remove::before,
.brand-logo-file .upload-remove::after,
.reference-file .upload-remove::before,
.reference-file .upload-remove::after,
.remix-upload-preview .upload-remove::before,
.remix-upload-preview .upload-remove::after,
.tools-upload-preview .upload-remove::before,
.tools-upload-preview .upload-remove::after {
  width: 10px;
}

.has-preview > .upload-remove,
.has-preview .upload-remove {
  display: grid;
}

.upload-remove:focus-visible {
  outline: 3px solid rgba(17, 87, 245, 0.35);
  outline-offset: 2px;
}

.quick-upload-url {
  display: block;
  min-height: 18px;
  margin: 8px 6px 0;
  overflow: hidden;
  color: #1258ff;
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-upload-url:not([href]) {
  color: #74819a;
  cursor: default;
  text-decoration: none;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.drop-zone svg {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 24px 24px no-repeat;
}

.drop-zone svg path {
  display: none;
}

.drop-zone strong {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.drop-zone > span:not(.selected-file) {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(180deg, #1768ff 0%, #064af4 100%);
  box-shadow: 0 8px 16px rgba(16, 82, 245, 0.2);
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}


.case-panel {
  min-width: 0;
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #c7d8ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.73);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 18px;
}

.section-title span {
  width: 66px;
  height: 2px;
  border-radius: 20px;
  background: #2766ff;
}

.section-title h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 950;
}

.case-carousel {
  position: relative;
  width: min(100%, 900px);
  margin: auto;
  padding-bottom: 24px;
  touch-action: pan-y;
}

.case-carousel-viewport {
  overflow: hidden;
  border-radius: 10px;
  background: #f6f8fc;
  box-shadow: 0 8px 24px rgba(28, 62, 120, 0.1);
}

.case-carousel-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.case-slide {
  flex: 0 0 100%;
  margin: 0;
}

.case-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.case-carousel-dots button:focus-visible {
  outline: 3px solid rgba(19, 91, 245, 0.3);
  outline-offset: 3px;
}

.case-carousel-dots {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.case-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbd7ed;
  cursor: pointer;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

.case-carousel-dots button.active {
  width: 24px;
  border-radius: 8px;
  background: #135bf5;
}

@media (prefers-reduced-motion: reduce) {
  .case-carousel-track {
    transition: none;
  }
}

@media (min-width: 981px) {
  .case-panel {
    align-self: stretch;
    contain: size;
  }

  .case-carousel {
    display: grid;
    flex: 1;
    grid-template-rows: minmax(0, 1fr) 8px;
    gap: 12px;
    min-height: 0;
    margin: 0 auto;
    padding-bottom: 0;
  }

  .case-carousel-viewport,
  .case-carousel-track,
  .case-slide {
    height: 100%;
    min-height: 0;
  }

  .case-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .case-slide img {
    height: 100%;
  }

  .case-carousel-dots {
    position: static;
    grid-row: 2;
    align-self: center;
  }
}

.start-section {
  margin-top: 14px;
}

.start-section > h2 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 15px;
  font-size: 21px;
  font-weight: 950;
}

.start-section > h2::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 1px;
  background: var(--blue);
  content: "";
}

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

.tool-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 286px;
  padding: 16px 14px 14px;
  border: 1px solid #dfe7f4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(33, 67, 134, 0.05);
}

.tool-header {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 4px;
  min-height: 54px;
}

.tool-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
}

.tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
}

.tool-icon svg {
  width: 28px;
  height: 28px;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 63px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  color: #1d67f3;
  background: #eef4ff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.purple-tag {
  color: #733df0;
  background: #f2ecff;
}

.green-tag {
  color: #149c60;
  background: #e9f7ee;
}

.tool-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  margin: 18px 0 14px;
  border-radius: 6px;
  object-fit: contain;
  background: #f1f5fb;
}

.card-btn {
  position: relative;
  margin-top: auto;
  height: 45px;
  font-size: 18px;
}

.card-btn span {
  position: absolute;
  right: 20px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.purple-btn {
  background: linear-gradient(90deg, #6e28e7 0%, #7834f3 100%);
  box-shadow: 0 8px 16px rgba(116, 48, 239, 0.2);
}

.indigo-btn {
  background: linear-gradient(90deg, #3b56d8 0%, #365ede 100%);
  box-shadow: 0 8px 16px rgba(59, 86, 216, 0.18);
}

.green-btn {
  background: linear-gradient(90deg, #069e57 0%, #07a65f 100%);
  box-shadow: 0 8px 16px rgba(8, 160, 91, 0.18);
}

.commerce-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 16px clamp(18px, 2.2vw, 32px) 32px;
  gap: 26px;
}

body.page-commerce {
  background:
    linear-gradient(180deg, #f9fbff 0%, #fff 42%, #f8fbff 100%);
}

body.page-commerce .home-page,
body.page-commerce .remix-page {
  display: none;
}

body.page-commerce .commerce-page {
  display: grid;
  grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
  align-items: stretch;
}

body.mode-advanced.page-commerce .commerce-page {
  align-items: stretch;
}

.commerce-sidebar,
.result-card {
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.06);
}

.commerce-sidebar {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 8px 20px 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.98)),
    #fff;
}

.commerce-sidebar-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.commerce-sidebar-scroll::-webkit-scrollbar {
  display: none;
}

.commerce-sidebar-footer {
  display: grid;
  gap: 12px;
  flex: 0 0 auto;
}

.commerce-results {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
}

body.mode-advanced .commerce-results {
  min-height: auto;
}

.commerce-title h1 {
  margin: 0 0 7px;
  font-size: 28px;
  font-weight: 950;
}

.commerce-title p,
.commerce-form p,
.results-head p,
.safe-note {
  margin: 0;
  color: #65738e;
  font-size: 15px;
  font-weight: 700;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 5px 0 2px;
  border: 1px solid #d8e2f1;
  border-radius: 8px;
  padding: 6px;
  background: #f3f7ff;
}

.mode-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  border-radius: 7px;
  color: #26324a;
  background: transparent;
  font-size: 16px;
  font-weight: 900;
}

.mode-tab svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mode-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 31px;
  height: 18px;
  border-radius: 9px;
  color: #fff;
  background: #ff4e4e;
  font-size: 11px;
  font-weight: 950;
}

body.mode-quick .quick-tab,
body.mode-advanced .advanced-tab {
  color: #fff;
  background: linear-gradient(180deg, #236bff 0%, #074cf0 100%);
  box-shadow: 0 8px 18px rgba(17, 87, 245, 0.22);
}

body.mode-quick .quick-tab span {
  color: #1157f5;
  background: #fff;
}

.generate-options h2 {
  margin: 0 0 7px;
}

.commerce-upload-title {
  display: block;
  margin: 0 0 3px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.generate-options h2 {
  font-size: 19px;
  font-weight: 950;
}

.commerce-form {
  border: 1px solid #dbe6f7;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(32, 72, 138, 0.05);
}

.quick-form {
  padding-bottom: 15px;
}

.advanced-form,
.advanced-generate,
body.mode-advanced .quick-generate {
  display: none;
}

body.mode-advanced .advanced-form {
  display: block;
}

body.mode-advanced .advanced-generate {
  display: inline-flex;
}

body.mode-advanced .quick-form {
  display: block;
}

body.mode-advanced .product-name-field {
  display: none;
}

.commerce-upload,
.reference-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 186px;
  padding-top: 20px;
  margin: 12px 0;
  border: 2px dashed #d7dde7;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  cursor: pointer;
}

.quick-form .commerce-upload {
  margin: 6px 0 0;
}

.commerce-upload.has-preview {
  min-height: 96px;
  padding-top: 0;
  justify-content: center;
}

.commerce-upload svg,
.reference-upload svg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 24px 24px no-repeat;
}

.commerce-upload svg path,
.reference-upload svg path {
  display: none;
}

.commerce-upload strong,
.reference-upload strong {
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.commerce-upload strong {
  display: block;
  margin-top: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.commerce-sample-section {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
}

.commerce-sample-section[hidden] {
  display: none;
}

.commerce-sample-header {
  display: flex;
  flex: 0 0 28px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0;
  color: #1f2937;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.15;
}

.commerce-sample-header svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  fill: none;
  stroke: #667085;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: none;
}

.commerce-sample-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5px;
}

.commerce-sample-item {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.commerce-sample-item:focus-visible {
  outline: 2px solid #7fa4ff;
  outline-offset: 2px;
}

.commerce-sample-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px dashed #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
}

.commerce-upload span {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.commerce-upload-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.commerce-upload-item { position: relative; display: grid; gap: 5px; min-width: 0; padding: 6px; border: 1px solid #d8dee9; border-radius: 6px; background: #fff; }
.commerce-upload-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.commerce-upload-item span { font-size: 12px; color: #475569; }
.product-upload-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgb(15 23 42 / 22%);
  color: #ef4444;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.product-upload-remove:hover { background: #fff5f5; }
.product-upload-remove:focus-visible { outline: 2px solid #176dff; outline-offset: 2px; }

@media (max-width: 640px) {
  .commerce-upload-list { grid-template-columns: repeat(3, minmax(72px, 1fr)); overflow-x: auto; }
}

.brand-logo-upload,
.reference-upload {
  min-height: 118px;
  margin: 0;
}

.brand-logo-upload small,
.reference-upload small {
  margin-top: 5px;
  color: #77849a;
  font-size: 13px;
  font-weight: 700;
}

.brand-logo-upload.has-preview,
.reference-upload.has-preview {
  grid-template-columns: 42px 1fr;
  justify-items: start;
  gap: 10px 12px;
  min-height: 82px;
  padding: 10px 12px;
  text-align: left;
}

.brand-logo-upload.has-preview svg,
.reference-upload.has-preview svg {
  grid-row: span 2;
  width: 34px;
  height: 34px;
}

.brand-logo-upload svg {
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 12px 12px no-repeat;
}

.brand-logo-upload svg path {
  display: none;
}

.brand-logo-upload strong {
  color: #111827;
}

.brand-logo-upload.has-preview small,
.reference-upload.has-preview small {
  display: none;
}

.brand-logo-file,
.reference-file {
  display: none;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.brand-logo-upload.has-preview .brand-logo-file,
.reference-upload.has-preview .reference-file {
  display: flex;
  grid-column: 2;
}

.brand-logo-file img,
.reference-file img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 6px;
  object-fit: contain;
  background: #eef3fb;
}

.brand-logo-file em,
.reference-file em {
  overflow: hidden;
  color: #202b40;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.required-star {
  color: #e21d2c;
  font-size: 16px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.brand-logo-field {
  grid-template-columns: max-content minmax(132px, 1fr);
  align-items: center;
  column-gap: 10px;
}

.brand-logo-field > .field-title {
  white-space: nowrap;
}

.brand-logo-field .brand-logo-upload {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  min-width: 148px;
  min-height: 38px;
  margin: 0;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 0 11px;
  background: #fff;
}

.brand-logo-field .brand-logo-upload svg,
.brand-logo-field .brand-logo-upload.has-preview svg {
  grid-row: auto;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 20px;
}

.brand-logo-field .brand-logo-upload strong {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.brand-logo-field .brand-logo-upload small {
  display: none;
}

.brand-logo-field .brand-logo-upload.has-preview {
  display: inline-flex;
  justify-self: end;
  min-height: 40px;
  padding: 6px 10px;
  text-align: left;
}

.brand-logo-field .brand-logo-upload.has-preview strong {
  display: none;
}

.brand-logo-field .brand-logo-upload.has-preview .brand-logo-file {
  display: flex;
  grid-column: auto;
}

.brand-logo-field .brand-logo-file img {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.brand-logo-field .brand-logo-file em {
  max-width: 170px;
  font-size: 12px;
}

.upload-thumb {
  position: relative;
  display: none;
  width: 90px;
  height: 90px;
  overflow: hidden;
  border: 1px solid #e0e7f3;
  border-radius: 8px;
  background: #f4f7fb;
}

.upload-thumb.commerce-upload-list {
  position: static;
  display: grid;
  width: 100%;
  height: auto;
  overflow-x: auto;
  border: 0;
  background: transparent;
}

.upload-thumb.commerce-upload-list .commerce-upload-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.upload-thumb.has-preview {
  display: block;
}

.upload-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.upload-thumb i {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #12b95b;
}

.upload-thumb i::before {
  width: 8px;
  height: 4px;
  transform: rotate(-45deg);
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
}

.field-stack {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
}

.field-stack label {
  display: grid;
  gap: 7px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.field-stack input,
.field-stack select,
.field-stack textarea {
  width: 100%;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

#advanced-product-name::placeholder {
  color: #9aa3af;
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
}

.field-stack input {
  height: 42px;
  padding: 0 11px;
}

.field-stack select {
  height: 42px;
  padding: 0 11px;
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #65738e 50%),
    linear-gradient(135deg, #65738e 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 17px,
    calc(100% - 12px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field-stack select:disabled {
  color: #8a96aa;
  background-color: #f5f7fb;
  cursor: not-allowed;
}

.generation-ratio-field small {
  color: #65738e;
  font-size: 12px;
  font-weight: 700;
}

.generation-ratio-field small.is-error {
  color: #d14343;
}

.requirements-field {
  position: relative;
}

.field-label-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.field-help {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #9aa4b2;
  border-radius: 50%;
  color: #7a8494;
  background: #fff;
  cursor: help;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.field-tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  z-index: 20;
  width: min(268px, calc(100vw - 96px));
  padding: 12px 15px;
  border-radius: 6px;
  color: #fff;
  background: rgba(70, 70, 70, 0.72);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.42;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(-50%);
  transition: opacity 0.16s ease;
  visibility: hidden;
  white-space: normal;
}

.field-tooltip::before {
  position: absolute;
  top: 50%;
  left: -9px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid rgba(70, 70, 70, 0.72);
  border-bottom: 9px solid transparent;
  content: "";
  transform: translateY(-50%);
}

.field-help:hover .field-tooltip,
.field-help:focus .field-tooltip,
.field-help:focus-within .field-tooltip {
  opacity: 1;
  visibility: visible;
}

.field-stack textarea {
  resize: vertical;
  min-height: 82px;
  padding: 10px 11px;
  line-height: 1.45;
}

.requirements-field textarea {
  min-height: 190px;
  color: #202938;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.requirements-field textarea::placeholder {
  color: #9aa3af;
  opacity: 1;
}

@media (max-width: 640px) {
  .field-tooltip {
    top: calc(100% + 10px);
    right: -8px;
    left: auto;
    width: min(260px, calc(100vw - 48px));
    transform: none;
  }

  .field-tooltip::before {
    top: -8px;
    right: 10px;
    left: auto;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(70, 70, 70, 0.72);
    border-left: 8px solid transparent;
    border-top: 0;
    transform: none;
  }
}

.generate-options {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.product-name-field {
  display: grid;
  gap: 6px;
  margin-bottom: 30px;
  padding-top: 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.product-name-field > span {
  font-size: 14px;
}

.product-name-field input {
  width: 100%;
  height: 42px;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 0 12px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.product-name-field input::placeholder {
  color: #9aa3af;
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
}

.product-name-field input:focus,
.field-stack input:focus,
.field-stack select:focus,
.field-stack textarea:focus {
  outline: 2px solid rgba(17, 87, 245, 0.18);
  border-color: #2f6bff;
}

.option-head,
.generate-summary,
.result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.option-head span,
.generate-summary,
.result-footer {
  color: #65738e;
  font-size: 14px;
  font-weight: 800;
}

.option-head h2 {
  font-size: 14px;
}

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

.option-grid label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid #dbe5f4;
  border-radius: 8px;
  background: #fbfdff;
}

.option-grid label:has(input:checked) {
  border-color: #8bb0ff;
  background: #f4f8ff;
}

.option-grid input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1157f5;
}

.option-grid b,
.option-grid em {
  display: block;
  font-style: normal;
}

.option-grid b {
  color: #1b2539;
  font-size: 13px;
  font-weight: 850;
}

.option-grid em {
  margin-top: 3px;
  color: #7d89a0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.generate-summary {
  margin: 17px 0 14px;
}

.generate-btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #1768ff 0%, #0648f2 100%);
  box-shadow: 0 10px 18px rgba(17, 87, 245, 0.19);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.generate-btn:disabled {
  color: #7b879c;
  background: #e8edf5;
  box-shadow: none;
  cursor: not-allowed;
}

.advanced-generate,
body.mode-advanced .quick-generate {
  display: none;
}

body.mode-advanced .advanced-generate {
  display: inline-flex;
}

.safe-note {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #edf1f7;
}

.results-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.results-head h2 {
  margin: 0 0 7px;
  font-size: 27px;
  font-weight: 950;
}

.results-head p span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin-left: 14px;
  padding: 0 12px;
  border-radius: 13px;
  color: #15944d;
  background: #dff8e9;
  font-size: 13px;
}

.result-actions {
  display: flex;
  gap: 14px;
}

.result-actions button {
  min-width: 150px;
  height: 44px;
  border: 1.5px solid #1157f5;
  border-radius: 7px;
  color: #1157f5;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.result-actions button + button {
  color: #fff;
  background: #1157f5;
}

.result-grid {
  --result-card-width: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--result-card-width));
  grid-auto-rows: auto;
  justify-content: start;
  align-content: start;
  gap: 12px;
  flex: 1;
}

body.mode-advanced .result-grid {
  flex: initial;
}

.result-card {
  display: flex;
  width: var(--result-card-width);
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
}

.detail-poster {
  grid-column: auto;
}

.card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.card-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 950;
}

.card-head span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  color: #15944d;
  background: #e5f8ed;
  font-size: 12px;
  font-weight: 900;
}

.card-head i,
.card-head i::before {
  display: block;
  border: 2px solid #0f172a;
  border-radius: 50%;
  content: "";
}

.card-head i {
  width: 20px;
  height: 20px;
  border-left-color: transparent;
}

.card-head i::before {
  width: 5px;
  height: 5px;
  margin: -2px 0 0 10px;
  border-top: 0;
  border-left: 0;
  transform: rotate(-25deg);
}

.poster-canvas,
.scene-canvas,
.point-canvas,
.white-canvas {
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: #f3f5f8;
}

.poster-canvas {
  background:
    radial-gradient(circle at 88% 55%, rgba(42, 100, 25, 0.24), transparent 12%),
    linear-gradient(135deg, #eadbc4 0%, #fbf4e8 44%, #d3b791 100%);
}

.poster-canvas img,
.scene-canvas img,
.point-canvas img,
.white-canvas img {
  position: absolute;
  right: 7%;
  bottom: 0;
  width: 68%;
  height: 92%;
  object-fit: cover;
  object-position: left center;
  mix-blend-mode: multiply;
}

.poster-canvas strong,
.poster-canvas p {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: 20px;
  color: #3b2411;
}

.poster-canvas strong {
  padding-top: 74px;
  font-size: 21px;
  font-weight: 950;
}

.poster-canvas p {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
}

.scene-canvas {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #614725 0%, #d9bd92 46%, #5a4a2e 100%);
}

.point-canvas {
  background: linear-gradient(135deg, #f4ead8 0%, #d7bd95 100%);
}

.point-canvas img {
  right: 3%;
  width: 62%;
}

.point-canvas span {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  max-width: 45%;
  margin: 56px 0 0 17px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #3b2b1c;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 10px rgba(67, 49, 27, 0.08);
  font-size: 14px;
  font-weight: 900;
}

.point-canvas span + span {
  margin-top: 28px;
}

.detail-canvas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.detail-canvas div {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f5eadc 0%, #d8c5aa 100%);
}

.detail-canvas img {
  width: 220%;
  height: 140px;
  object-fit: cover;
  object-position: left center;
}

.detail-canvas b,
.detail-canvas em {
  display: block;
  padding: 0 10px;
  color: #3d2b1c;
  text-align: center;
}

.detail-canvas b {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 950;
}

.detail-canvas em {
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.white-canvas {
  background: radial-gradient(circle at 50% 84%, rgba(0, 0, 0, 0.13), transparent 18%), #fff;
}

.white-canvas img {
  right: 23%;
  width: 52%;
  height: 88%;
}

.image-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}

.detail-image-canvas {
  display: block;
  overflow: hidden;
  min-height: 210px;
  border-radius: 8px;
  background: #f6efe4;
}

.detail-image-canvas > img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: fill;
}

.white-canvas.image-canvas > img {
  object-fit: contain;
  padding: 16px 28px;
  background: #fff;
}

.card-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 11px;
}

.card-tools button {
  height: 37px;
  border: 1px solid #dbe4f2;
  border-radius: 6px;
  color: #172036;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.result-footer {
  justify-content: flex-end;
  margin-top: 17px;
}

.empty-results-head {
  margin-bottom: 18px;
  padding: 18px 18px 16px;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.98)),
    #fff;
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.empty-results-head h2 {
  font-size: 16px;
}

.empty-results-head p {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.commerce-results .card-head h3 {
  font-size: 14px;
}

.empty-result-grid {
  grid-template-columns: repeat(auto-fill, var(--result-card-width));
  gap: 12px;
}

.empty-card {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.empty-card .card-head {
  grid-template-columns: 1fr auto;
}

.empty-card .card-head span {
  color: #51627c;
  background: #eef3fb;
}

.empty-preview {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 0;
  aspect-ratio: 3 / 4;
  flex: 1;
  border: 1.5px dashed #b8c9ea;
  border-radius: 8px;
  color: #6b7890;
  background:
    linear-gradient(135deg, rgba(246, 249, 255, 0.95), rgba(255, 255, 255, 0.95)),
    #fff;
  text-align: center;
}

.empty-preview b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #1157f5;
  background: #eaf2ff;
  font-size: 14px;
  font-weight: 950;
}

.empty-preview p {
  max-width: 11em;
  margin: 0;
  color: #53627b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

/* Commerce result card download button */
.commerce-page .card-tools {
  display: block;
}

.card-tools.commerce-success-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.card-tools.commerce-success-actions .commerce-download-btn {
  margin-top: 0;
}

.card-tools.commerce-failed-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.card-tools.commerce-failed-actions button {
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}

.commerce-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 37px;
  margin-top: 11px;
  border: 1px solid #1768ff;
  border-radius: 6px;
  color: #1768ff;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.commerce-download-btn:hover {
  color: #fff;
  background: #1768ff;
}

.commerce-download-btn:active {
  background: #0648f2;
}

.commerce-regenerate-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 37px;
  border: 1px solid #1768ff;
  border-radius: 6px;
  color: #1768ff;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.commerce-regenerate-btn:hover:not(:disabled) {
  color: #fff;
  background: #1768ff;
}

.commerce-regenerate-btn:disabled {
  color: #7b879c;
  border-color: #dbe4f2;
  background: #f4f7fb;
  cursor: wait;
}

.result-card-failed .empty-preview {
  border-color: #f1b5b5;
  color: #9b2f2f;
  background: #fff8f8;
}

.result-card-failed .empty-preview b {
  color: #b42318;
  background: #ffe5e2;
}

.result-card-generating .card-head span {
  color: #1157f5;
  background: #eaf2ff;
}

.result-card-generating .empty-preview {
  border-color: #8bb0ff;
  color: #1157f5;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.96)),
    #fff;
}

.empty-preview.result-image-preview {
  position: relative;
  overflow: hidden;
  border-style: solid;
  padding: 0;
}

.empty-preview.result-image-preview img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

.empty-preview.result-image-preview-clickable {
  cursor: zoom-in;
}

.empty-preview.result-image-preview-clickable img {
  transition: transform 160ms ease;
}

.empty-preview.result-image-preview-clickable:hover img,
.empty-preview.result-image-preview-clickable:focus-visible img {
  transform: scale(1.025);
}

.empty-preview.result-image-preview-clickable:focus-visible {
  outline: 3px solid rgba(36, 91, 255, 0.45);
  outline-offset: 3px;
}

.result-card-image-loading .card-head span {
  color: #0f5cc0;
  background: #eaf2ff;
}

.result-card-image-loading .empty-preview.result-image-preview img {
  opacity: 0;
}

.result-image-load-state {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  align-content: center;
  place-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.96)),
    #fff;
  text-align: center;
}

.result-image-load-state p {
  max-width: 12em;
  margin: 0;
  color: #53627b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.result-image-load-state b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #b42318;
  background: #ffe5e2;
  font-size: 14px;
  font-weight: 950;
}

.result-card-image-load-failed .card-head span {
  color: #b42318;
  background: #ffe5e2;
}

.result-card-image-load-failed .empty-preview.result-image-preview {
  border-color: #f1b5b5;
}

.result-image-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #1768ff;
  border-radius: 6px;
  color: #1768ff;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.result-image-retry-btn:hover {
  color: #fff;
  background: #1768ff;
}

.generating-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #dbe8ff;
  border-top-color: #1157f5;
  border-radius: 50%;
  animation: commerce-spin 0.9s linear infinite;
}

.generation-item-progress {
  display: grid;
  align-items: center;
  grid-template-areas: "track";
  width: min(250px, calc(100% - 28px));
  height: 14px;
  margin: 0 auto;
}

.generation-item-progress-track {
  display: block;
  grid-area: track;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid #b8d3ff;
  background: #edf5ff;
  box-shadow: inset 0 1px 2px rgba(39, 110, 232, 0.12);
}

.generation-item-progress-fill {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #1768ff;
  transition: width 0.45s ease;
}

.generation-preview-stack {
  display: grid;
  grid-template-rows: 14px 42px;
  align-items: center;
  width: 100%;
  height: 64px;
  margin: 0 auto;
}

.generation-item-progress-value {
  z-index: 1;
  grid-area: track;
  justify-self: end;
  padding-right: 6px;
  color: #0f5cc0;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

.generating-hint-ticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  max-height: 42px;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
  color: #5d6a7e;
  font-size: 13px;
  font-weight: 850;
  line-height: 18px;
  text-align: center;
}

.generating-hint-ticker p {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  animation: generation-hint-slide 7s ease-in-out infinite;
}

@keyframes commerce-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes generation-hint-slide {
  0%,
  15% {
    opacity: 0;
    transform: translateY(110%);
  }
  28%,
  72% {
    opacity: 1;
    transform: translateY(0);
  }
  85%,
  100% {
    opacity: 0;
    transform: translateY(-110%);
  }
}

.commerce-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 37px;
  margin-top: 0;
  border: 1px solid #b42318;
  border-radius: 6px;
  color: #b42318;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.commerce-retry-btn:hover {
  color: #fff;
  background: #b42318;
}

.commerce-retry-btn:disabled {
  color: #9ca3af;
  border-color: #e5e7eb;
  background: #f3f4f6;
  cursor: wait;
}

/* Disabled/pending state for generate button */
.btn-upload-pending {
  color: #7b879c !important;
  background: #e8edf5 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.outfit-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 16px clamp(18px, 2.2vw, 32px) 32px;
  gap: 26px;
}

body.page-outfit {
  background: linear-gradient(180deg, #f9fbff 0%, #fff 42%, #f8fbff 100%);
}

body.page-outfit .home-page,
body.page-outfit .commerce-page,
body.page-outfit .popular-page,
body.page-outfit .remix-page {
  display: none;
}

body.page-outfit .outfit-page {
  display: grid;
  grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
  align-items: stretch;
}

.outfit-panel {
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.outfit-panel {
  position: sticky;
  top: 84px;
  align-self: stretch;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 13px 18px 15px;
  overflow: hidden;
}

.outfit-panel-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.outfit-panel-scroll::-webkit-scrollbar {
  display: none;
}

.outfit-panel-footer {
  flex: 0 0 auto;
  padding-top: 15px;
}

.outfit-title h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  color: #101827;
  font-size: 28px;
  font-weight: 950;
}

.outfit-title h1 span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #cbc8ff;
  border-radius: 9px;
  color: #694ef4;
  background: #f0efff;
  font-size: 13px;
  font-weight: 950;
}

.outfit-title p,
.outfit-upload-card p,
.outfit-prompt small {
  margin: 0;
  color: #74819a;
  font-size: 13px;
  font-weight: 800;
}

.outfit-upload-card {
  position: relative;
  margin-top: 16px;
}

.outfit-panel-scroll > .outfit-upload-card:first-child {
  margin-top: 0;
}

.outfit-upload-card h2,
.outfit-prompt span,
.outfit-scene-options h2,
.outfit-custom-scene span,
.generate-count > span {
  display: block;
  margin: 0 0 5px;
  color: #20283a;
  font-size: 15px;
  font-weight: 950;
}

.outfit-upload-card em,
.outfit-prompt em,
.outfit-scene-options em {
  color: #e21d2c;
  font-style: normal;
}

.outfit-upload {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 172px;
  margin-top: 8px;
  overflow: hidden;
  border: 1.5px dashed #d7dde7;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.outfit-upload:hover {
  border-color: #c7cfdb;
  background: #fafbfc;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04);
}

.outfit-upload.has-preview {
  min-height: 236px;
  border-style: solid;
  background: #fff;
}

.outfit-upload-preview {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
  min-height: 118px;
}

.outfit-upload-preview::before {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 24px 24px no-repeat;
  content: "";
  line-height: 1;
}

.outfit-upload-preview::after {
  color: #667085;
  content: "建议图片清晰，主体完整。";
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.model-preview {
  background-position: center;
}

.cloth-preview {
  width: 185px;
  background-position: center;
}

.outfit-upload-actions {
  position: absolute;
  right: 14px;
  bottom: 13px;
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.outfit-upload-actions strong {
  display: inline-grid;
  place-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #245bff;
  border-radius: 8px;
  color: #245bff;
  background: #fff;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(36, 91, 255, 0.1);
}

.upload-state {
  position: absolute;
  right: 14px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #546274;
  font-size: 13px;
  font-weight: 850;
}

.upload-state::before,
.ready-states span::before,
.quality-list li::before,
.outfit-status span:last-child::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: #16b35d;
  content: "✓";
  font-size: 12px;
  font-weight: 950;
}

.outfit-upload .upload-state::before {
  color: #6d7c96;
  background: #eef3ff;
  content: "";
}

.outfit-upload.has-preview .upload-state::before {
  color: #fff;
  background: #16b35d;
  content: "✓";
}

.ready-states span.pending::before {
  color: #6d7c96;
  background: #eef3ff;
  content: "";
}

.outfit-upload-file {
  display: none;
  align-items: stretch;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 188px;
  padding: 18px 14px 48px;
}

.outfit-upload.has-preview .outfit-upload-preview {
  display: none;
}

.outfit-upload.has-preview .outfit-upload-file {
  display: grid;
  grid-template-rows: minmax(126px, 1fr) auto;
  row-gap: 10px;
}

.outfit-upload.has-preview .outfit-upload-actions {
  display: flex;
}

.outfit-upload-file img {
  width: min(100%, 238px);
  height: 132px;
  flex: 0 0 auto;
  border-radius: 7px;
  object-fit: contain;
  background: #f3f6fb;
}

.outfit-upload-file em {
  overflow: hidden;
  width: min(100%, 260px);
  color: #263248;
  font-style: normal;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outfit-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 176px;
  padding: 18px 14px;
  margin-top: 8px;
  overflow: visible;
  border: 2px dashed #d7dde7;
  border-radius: 8px;
  color: #111827;
  background: #fff;
}

.outfit-upload.has-preview {
  min-height: 88px;
  padding: 10px 14px;
  justify-content: center;
  border-style: dashed;
}

.outfit-upload svg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 24px 24px no-repeat;
}

.outfit-upload svg path {
  display: none;
}

.outfit-upload strong {
  display: block;
  margin-top: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.outfit-upload:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.outfit-upload-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  overflow: visible;
}

.outfit-upload-list:empty {
  display: none;
}

.outfit-upload-item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #d8dee9;
  border-radius: 6px;
  background: #fff;
}

.outfit-upload-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: #f3f6fb;
}

.outfit-upload-item span {
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outfit-prompt {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.outfit-prompt input {
  width: 100%;
  height: 48px;
  border: 1px solid #d9e3f1;
  border-radius: 7px;
  padding: 0 12px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}

.outfit-prompt small {
  display: flex;
  justify-content: space-between;
}

.outfit-prompt b {
  color: #8390a5;
  font-weight: 850;
}

.outfit-scene-options,
.outfit-custom-scene {
  margin-top: 13px;
}

.outfit-scene-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.outfit-scene-option-grid label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid #dbe5f4;
  border-radius: 8px;
  color: #20283a;
  background: #fbfdff;
  font-size: 13px;
  font-weight: 850;
}

.outfit-scene-option-grid label:has(input:checked) {
  border-color: #8bb0ff;
  background: #f4f8ff;
}

.outfit-scene-option-grid input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #245bff;
}

.outfit-scene-option-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outfit-custom-scene {
  display: grid;
  gap: 8px;
}

.outfit-custom-scene textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 10px 12px;
  color: #172036;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.outfit-custom-scene textarea::placeholder {
  color: #9aa3af;
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
}

.outfit-custom-scene textarea:focus {
  outline: 2px solid rgba(17, 87, 245, 0.18);
  border-color: #2f6bff;
}

.outfit-custom-scene textarea:disabled {
  color: #98a2b3;
  background: #f5f7fb;
  cursor: not-allowed;
}

.garment-type,
.generate-count,
.outfit-checks,
.ready-states {
  margin-top: 13px;
}

.garment-type {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.garment-type button,
.generate-count button {
  height: 31px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  color: #273248;
  background: #f8fbff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.garment-type button.active,
.generate-count button.active {
  border-color: #245bff;
  color: #fff;
  background: #245bff;
}

.generate-count {
  display: grid;
  grid-template-columns: 1fr 200px;
  align-items: center;
  gap: 12px;
}

.generate-count > span {
  margin: 0;
}

.generate-count div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.outfit-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.outfit-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #273248;
  font-size: 13px;
  font-weight: 850;
}

.outfit-checks input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #245bff;
}

.ready-states {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid #edf1f7;
}

.ready-states span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #354157;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.ready-states span::before {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: #22bb68;
  font-size: 10px;
}

.outfit-generate-btn {
  width: 100%;
  height: 48px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(90deg, #1474ff 0%, #5b2af2 100%);
  box-shadow: 0 9px 18px rgba(54, 79, 244, 0.24);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
}

.outfit-safe-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #7a879d;
  font-size: 13px;
  font-weight: 850;
}

.outfit-safe-note::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.8px solid #8da0bf;
  border-radius: 50%;
  color: #8da0bf;
  content: "✓";
  font-size: 11px;
  font-weight: 950;
}

.outfit-results {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
}

.outfit-results-head {
  margin-top: 0;
  margin-bottom: 18px;
}

.plan-heading h2 {
  margin: 0 0 7px;
  color: #101827;
  font-size: 25px;
  font-weight: 950;
}

.plan-heading p {
  margin: 0;
  color: #70809c;
  font-size: 15px;
  font-weight: 800;
}

.outfit-results-head h2 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 950;
}

.outfit-results-head p {
  margin: 0;
  color: #70809c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.outfit-results-head p span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-left: 12px;
  padding: 0 12px;
  border-radius: 12px;
  color: #149557;
  background: #dff7e9;
  font-size: 13px;
  font-weight: 950;
}

.outfit-results-head > div:last-child {
  display: flex;
  gap: 14px;
}

.outline-action,
.solid-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 178px;
  height: 42px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
}

.outline-action {
  border: 1.5px solid #245bff;
  color: #245bff;
  background: #fff;
}

.solid-action {
  color: #fff;
  background: #1157f5;
  box-shadow: 0 8px 16px rgba(17, 87, 245, 0.2);
}

.outline-action svg,
.solid-action svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outfit-compare {
  --result-card-width: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--result-card-width));
  justify-content: start;
  align-items: start;
  gap: 14px;
  min-height: 0;
  padding: 0;
}

.outfit-scene-result-card {
  width: var(--result-card-width);
}

.outfit-result-grid .card-head h3 {
  color: #111827;
  font-size: 14px;
}

.outfit-scene-result-card .empty-preview {
  width: 100%;
}

.compare-photo {
  min-width: 0;
  margin: 0;
  padding: 12px;
}

.outfit-compare .compare-photo {
  grid-column: auto;
}

.compare-photo figcaption {
  margin: 0 0 14px;
  color: #667085;
  font-size: 16px;
  font-weight: 500;
}

.photo-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #f7f8fb 0 9%, transparent 9% 91%, #f7f8fb 91% 100%),
    #f4f6f9;
}

.outfit-main-result-card .photo-frame {
  border: 1.5px dashed #b8c9ea;
  background:
    linear-gradient(135deg, rgba(246, 249, 255, 0.95), rgba(255, 255, 255, 0.95)),
    #fff;
}

.preview-focus {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #0b6fe8;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 61, 124, 0.16);
  cursor: pointer;
}

.preview-focus svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outfit-plan-section {
  margin-top: 22px;
}

.plan-heading {
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin: 0 0 12px 10px;
}

.plan-heading h2 {
  margin: 0;
  font-size: 22px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 240px));
  justify-content: start;
  gap: 12px;
}

.plan-card {
  position: relative;
  padding: 10px;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}

.plan-card:not(.is-disabled):hover {
  border-color: #8bb0ff;
  box-shadow: 0 8px 24px rgba(36, 91, 255, 0.12);
}

.plan-card.is-disabled {
  filter: grayscale(1);
  opacity: 0.48;
  cursor: not-allowed;
}

.plan-card.is-disabled .plan-image {
  background: #e7ebf2;
}

.plan-card.is-disabled .plan-head h3,
.plan-card.is-disabled .plan-tools button {
  color: #111827;
}

.plan-card.selected {
  border-color: #245bff;
  box-shadow: 0 0 0 2px rgba(36, 91, 255, 0.16);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.plan-head h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.plan-check {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  accent-color: #111827;
  cursor: pointer;
}

.plan-card.selected .plan-head h3 {
  color: #111827;
}

.plan-image {
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
}

.plan-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.plan-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 28px;
  color: #111827;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  line-height: 1;
}

.plan-tools button svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-tools button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.outfit-status {
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  margin-top: 22px;
  color: #76839a;
  font-size: 14px;
  font-weight: 850;
}

.outfit-status span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.outfit-status span:first-child::before {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.7px solid #6f7f99;
  border-radius: 50%;
  content: "";
}

.outfit-status span:last-child::before {
  width: 18px;
  height: 18px;
  color: #18a75c;
  background: transparent;
  box-shadow: inset 0 0 0 2px #18a75c;
}

@media (max-width: 1400px) {
  .outfit-compare {
    grid-template-columns: repeat(auto-fill, var(--result-card-width));
    gap: 12px;
  }
}

.popular-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 24px clamp(18px, 2.2vw, 32px) 32px;
}

body.page-popular {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 38%, #f8fbff 100%);
}

body.page-popular .home-page,
body.page-popular .commerce-page,
body.page-popular .remix-page {
  display: none;
}

body.page-popular .popular-page {
  display: block;
}

.popular-heading {
  display: grid;
  grid-template-columns: minmax(230px, 360px) minmax(360px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.popular-heading h1 {
  margin: 0 0 7px;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.12;
}

.popular-heading p {
  margin: 0;
  color: #687690;
  font-size: 15px;
  font-weight: 800;
}

.popular-search {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 10px;
  height: 45px;
  padding: 0 16px;
  border: 1px solid #d5e0f2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.popular-search svg {
  width: 20px;
  height: 20px;
  stroke: #6c7a92;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.popular-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: #172036;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.popular-search input::placeholder {
  color: #8390a5;
}

.free-create-btn,
.favorite-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 45px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 950;
}

.free-create-btn {
  min-width: 150px;
  border: 1.5px solid #245bff;
  border-radius: 8px;
  color: #245bff;
  background: #fff;
  cursor: pointer;
}

.free-create-btn svg,
.favorite-link svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.free-create-btn span {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  z-index: 3;
  display: block;
  min-width: 152px;
  height: 35px;
  transform: translateX(-50%);
  border: 1px solid #e0e6f1;
  border-radius: 7px;
  color: #5d687d;
  background: #fff;
  box-shadow: 0 8px 18px rgba(22, 43, 90, 0.14);
  font-size: 13px;
  font-weight: 800;
  line-height: 35px;
  text-align: center;
}

.favorite-link {
  color: #202637;
}

.favorite-link svg {
  fill: none;
}

.popular-layout {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.template-filter,
.template-browser {
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.template-filter {
  position: sticky;
  top: 84px;
}

.template-filter {
  padding: 16px;
}

.template-filter h2 {
  margin: 0 0 14px;
  color: #172036;
  font-size: 24px;
  font-weight: 950;
}

.category-list {
  display: grid;
  gap: 4px;
}

.category-list a {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 0 9px;
  border-radius: 6px;
  color: #30394c;
  font-size: 14px;
  font-weight: 850;
}

.category-list a.active {
  color: #245bff;
  background: #e9edff;
}

.cat-icon {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
  color: #344057;
}

.category-list a.active .cat-icon {
  color: #245bff;
}

.cat-icon::before,
.cat-icon::after {
  position: absolute;
  content: "";
}

.cat-icon.home::before {
  inset: 6px 3px 2px;
  border: 1.8px solid currentColor;
  border-top: 0;
}

.cat-icon.home::after {
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  border-top: 1.8px solid currentColor;
  border-left: 1.8px solid currentColor;
}

.cat-icon.heart::before {
  inset: 2px;
  border: 1.8px solid currentColor;
  transform: rotate(45deg);
  border-top-left-radius: 8px;
  border-bottom-right-radius: 3px;
}

.cat-icon.food::before,
.cat-icon.food::after {
  top: 2px;
  bottom: 2px;
  border-left: 1.8px solid currentColor;
}

.cat-icon.food::before {
  left: 5px;
  box-shadow: 4px 0 0 currentColor;
}

.cat-icon.food::after {
  right: 4px;
  border-radius: 6px;
}

.cat-icon.house::before {
  inset: 7px 3px 2px;
  border: 1.8px solid currentColor;
}

.cat-icon.house::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-top: 1.8px solid currentColor;
  border-left: 1.8px solid currentColor;
}

.cat-icon.edu::before {
  top: 4px;
  left: 1px;
  width: 16px;
  height: 9px;
  transform: skewY(-18deg);
  border: 1.8px solid currentColor;
  border-radius: 2px;
}

.cat-icon.video::before {
  inset: 4px 2px;
  border: 1.8px solid currentColor;
  border-radius: 4px;
}

.cat-icon.video::after {
  top: 7px;
  left: 8px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid currentColor;
}

.cat-icon.pin::before {
  inset: 2px 4px 1px;
  border: 1.8px solid currentColor;
  border-radius: 10px 10px 10px 0;
  transform: rotate(-45deg);
}

.cat-icon.pin::after {
  top: 7px;
  left: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.cat-icon.user::before {
  top: 3px;
  left: 6px;
  width: 7px;
  height: 7px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
}

.cat-icon.user::after {
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 7px;
  border: 1.8px solid currentColor;
  border-radius: 8px 8px 3px 3px;
}

.cat-icon.bag::before {
  inset: 6px 3px 2px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
}

.cat-icon.bag::after {
  top: 2px;
  left: 6px;
  width: 7px;
  height: 6px;
  border: 1.8px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.cat-icon.building::before {
  inset: 2px 4px 2px;
  border: 1.8px solid currentColor;
  box-shadow: inset 0 -5px 0 rgba(52, 64, 87, 0.12);
}

.cat-icon.building::after {
  top: 5px;
  left: 8px;
  width: 3px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 5px 0 0 currentColor, 5px 5px 0 currentColor;
}

.template-browser {
  min-width: 0;
  padding: 16px 14px 0;
}

.popular-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
  margin-bottom: 15px;
}

.popular-tabs button {
  min-width: 58px;
  height: 32px;
  padding: 0 15px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  color: #172036;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.popular-tabs button.active {
  border-color: #245bff;
  color: #fff;
  background: #245bff;
}

.popular-tabs button.tone-active {
  border-color: #8262e8;
  color: #fff;
  background: #8262e8;
}

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

.template-toolbar p {
  margin: 0;
  color: #647189;
  font-size: 14px;
  font-weight: 850;
}

.template-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 35px;
  padding: 0 12px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  color: #172036;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 850;
}

.sort-btn span {
  width: 8px;
  height: 8px;
  transform: rotate(45deg) translateY(-2px);
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
}

.view-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 35px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  color: #29344a;
  background: #fff;
  cursor: pointer;
}

.view-btn.active {
  border-color: #dbe6ff;
  color: #245bff;
  background: #eef4ff;
}

.view-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 2;
  fill: currentColor;
  stroke-linecap: round;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(144px, 1fr));
  gap: 18px;
  padding: 2px 4px 18px;
}

.template-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(30, 55, 104, 0.06);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.template-card:hover {
  transform: translateY(-2px);
  border-color: #b9caff;
  box-shadow: 0 14px 26px rgba(30, 55, 104, 0.11);
}

.template-card.selected {
  position: relative;
  border-color: #245bff;
  box-shadow:
    0 12px 26px rgba(36, 91, 255, 0.12),
    0 0 0 2px rgba(36, 91, 255, 0.16);
}

.template-card.selected::after {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #245bff;
  box-shadow: 0 2px 8px rgba(36, 91, 255, 0.34);
  content: "✓";
  font-size: 14px;
  font-weight: 950;
}

.template-art {
  position: relative;
  display: flex;
  aspect-ratio: 0.76;
  min-height: 190px;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 14px 22px;
  text-align: center;
  isolation: isolate;
}

.template-art::before,
.template-art::after {
  position: absolute;
  z-index: -1;
  content: "";
}

.template-art b,
.template-art em {
  position: relative;
  z-index: 2;
  display: block;
  font-style: normal;
  line-height: 1.24;
}

.template-art b {
  color: #ffd86e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.template-art em {
  margin-top: 6px;
  color: rgba(255, 229, 149, 0.92);
  font-size: 12px;
  font-weight: 850;
}

.template-art > span {
  position: absolute;
  z-index: 1;
}

.wedding-red {
  background:
    linear-gradient(90deg, rgba(255, 207, 72, 0.6) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 207, 72, 0.6) calc(100% - 1px)),
    linear-gradient(180deg, rgba(255, 207, 72, 0.65) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 207, 72, 0.65) calc(100% - 1px)),
    radial-gradient(circle at 50% 8%, rgba(255, 210, 84, 0.26), transparent 22%),
    linear-gradient(135deg, #8c0805 0%, #b41308 48%, #741006 100%);
}

.wedding-red::before {
  inset: 7px;
  border: 1px solid rgba(255, 202, 61, 0.62);
  border-radius: 8px;
}

.couple-shape {
  top: 22px;
  left: 50%;
  width: 102px;
  height: 82px;
  transform: translateX(-50%);
}

.couple-shape::before,
.couple-shape::after {
  position: absolute;
  bottom: 0;
  width: 52px;
  height: 70px;
  border-radius: 22px 22px 6px 6px;
  content: "";
}

.couple-shape::before {
  left: 7px;
  background:
    radial-gradient(circle at 50% 10px, #f3c5a9 0 10px, transparent 11px),
    linear-gradient(135deg, transparent 0 30%, #111 31% 100%);
  transform: rotate(-8deg);
}

.couple-shape::after {
  right: 5px;
  background:
    radial-gradient(circle at 50% 10px, #f4c4a9 0 10px, transparent 11px),
    linear-gradient(135deg, #fff 0 55%, #f6dce2 56% 100%);
  transform: rotate(9deg);
}

.parent-invite {
  justify-content: flex-start;
  padding-top: 24px;
  background:
    radial-gradient(circle at 50% 62%, #2b221d 0 18px, transparent 19px),
    radial-gradient(circle at 37% 60%, #2b221d 0 17px, transparent 18px),
    linear-gradient(180deg, #f5dcc3 0%, #fff5e6 100%);
}

.parent-invite b,
.floral-pink b,
.baby-gold b,
.baby-blue b,
.moving-home b,
.green-floral b,
.minimal-gray b,
.ink-birthday b {
  color: #8f3a1c;
  font-size: 21px;
}

.parent-invite em,
.floral-pink em,
.baby-gold em,
.baby-blue em,
.moving-home em,
.green-floral em,
.minimal-gray em,
.ink-birthday em {
  color: #9b684f;
}

.parent-invite::before,
.floral-pink::before,
.green-floral::before {
  right: -10px;
  bottom: -10px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 60, 42, 0.36) 0 6px, transparent 7px);
  background-size: 18px 18px;
}

.floral-pink {
  justify-content: flex-start;
  padding-top: 24px;
  background:
    radial-gradient(circle at 50% 72%, rgba(31, 31, 31, 0.72) 0 18px, transparent 19px),
    radial-gradient(circle at 62% 72%, rgba(255, 255, 255, 0.82) 0 18px, transparent 19px),
    linear-gradient(135deg, #ffe5e8 0%, #fff7ef 100%);
}

.baby-gold,
.baby-blue {
  justify-content: flex-start;
  padding-top: 25px;
}

.baby-gold {
  background:
    radial-gradient(circle at 50% 56%, #fff 0 43px, transparent 44px),
    radial-gradient(circle at 50% 58%, #ffdca9 0 55px, transparent 56px),
    linear-gradient(180deg, #fff4e6 0%, #f7dfbd 100%);
}

.baby-gold > span,
.baby-blue > span {
  top: 83px;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 39%, #f0b998 0 13px, transparent 14px),
    linear-gradient(#f7d5ad 0 0);
}

.baby-blue {
  background:
    radial-gradient(circle at 50% 56%, #fff 0 43px, transparent 44px),
    radial-gradient(circle at 50% 58%, #d5ebff 0 55px, transparent 56px),
    linear-gradient(180deg, #d9ecff 0%, #eef7ff 100%);
}

.baby-blue b {
  color: #295a8a;
}

.birthday-cake {
  background:
    radial-gradient(circle at 50% 70%, #f7c7bd 0 46px, transparent 47px),
    linear-gradient(180deg, #fff0e6 0%, #ffd8d3 100%);
}

.birthday-cake > span {
  top: 76px;
  left: 50%;
  width: 82px;
  height: 52px;
  transform: translateX(-50%);
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(#fff 0 18px, #f2a39b 19px 100%);
  box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.5);
}

.birthday-cake b {
  color: #d55b39;
  font-size: 20px;
}

.birthday-cake em {
  color: #b87560;
}

.longevity-red,
.banquet-gate,
.wedding-screen,
.red-banquet,
.opening-red {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 218, 97, 0.2), transparent 28%),
    linear-gradient(135deg, #8d0805 0%, #c21b0d 54%, #760b07 100%);
}

.longevity-red > span {
  top: 64px;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #f0c09a 0 15px, transparent 16px),
    linear-gradient(#2d251d 0 0);
}

.moving-home {
  background:
    linear-gradient(90deg, rgba(95, 68, 41, 0.18), transparent 38%, rgba(95, 68, 41, 0.13)),
    linear-gradient(180deg, #f9efe2 0%, #ddc7aa 100%);
}

.moving-home > span {
  top: 64px;
  right: 22px;
  left: 22px;
  height: 58px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 46%, #d8b98f 47% 53%, transparent 54%),
    linear-gradient(#f7f1e7, #efe0cd);
  box-shadow: inset 0 0 0 5px #fff8ec;
}

.banquet-gate > span,
.wedding-screen > span,
.red-banquet > span,
.opening-red > span {
  right: 22px;
  bottom: 34px;
  left: 22px;
  height: 72px;
  border: 2px solid rgba(255, 202, 61, 0.72);
  border-radius: 58px 58px 0 0;
}

.wedding-screen {
  background:
    radial-gradient(circle at 16px 16px, #ffca2f 0 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 16px) 16px, #ffca2f 0 7px, transparent 8px),
    linear-gradient(135deg, #970a06 0%, #d41f10 54%, #7f0b07 100%);
}

.red-banquet b,
.opening-red b {
  font-size: 24px;
}

.green-floral {
  background:
    radial-gradient(circle at 12% 24%, rgba(107, 151, 84, 0.25) 0 18px, transparent 19px),
    radial-gradient(circle at 88% 18%, rgba(107, 151, 84, 0.22) 0 20px, transparent 21px),
    linear-gradient(135deg, #edf5e8 0%, #fff9ec 100%);
}

.minimal-gray {
  background:
    linear-gradient(160deg, rgba(30, 36, 46, 0.12) 0 1px, transparent 1px 68%),
    linear-gradient(180deg, #f9f7f3 0%, #e8e3db 100%);
}

.ink-birthday {
  background:
    radial-gradient(circle at 24% 78%, rgba(17, 24, 39, 0.45) 0 8px, transparent 9px),
    linear-gradient(135deg, rgba(26, 46, 72, 0.18), transparent 45%),
    linear-gradient(180deg, #f5f1e7 0%, #e7ded0 100%);
}

.template-meta {
  padding: 11px 12px 12px;
  border-top: 1px solid #eef2f7;
}

.template-meta h3 {
  overflow: hidden;
  margin: 0 0 7px;
  color: #182236;
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-meta p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 11px;
  color: #717e92;
  font-size: 12.5px;
  font-weight: 800;
}

.template-meta p span {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 7px;
  border: 1px solid #dbe7ff;
  border-radius: 6px;
  color: #245bff;
  background: #f4f7ff;
}

.template-meta div {
  display: block;
}

.template-meta button {
  height: 34px;
  min-width: 0;
  width: 100%;
  padding: 0 12px;
  border-radius: 8px;
  color: #fff;
  background: #245bff;
  box-shadow: 0 7px 14px rgba(36, 91, 255, 0.18);
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}

@media (max-width: 1260px) {
  body.page-outfit .outfit-page {
    grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
    gap: 26px;
  }

  .plan-grid {
    grid-template-columns: repeat(3, minmax(180px, 220px));
  }

  .popular-heading {
    grid-template-columns: minmax(220px, 320px) minmax(300px, 1fr) auto;
  }

  .favorite-link {
    grid-column: 3;
  }

  .popular-layout {
    grid-template-columns: 212px minmax(0, 1fr);
  }

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

@media (max-width: 980px) {
  .site-header {
    gap: 24px;
  }

  .commerce-page,
  .outfit-page,
  .remix-page {
    padding-right: 14px;
    padding-left: 14px;
    gap: 16px;
  }

  body.page-commerce .commerce-page {
    grid-template-columns: 1fr;
  }

  body.page-outfit .outfit-page {
    grid-template-columns: 1fr;
  }

  .outfit-panel {
    position: static;
  }

  .outfit-results-head {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .outfit-results-head > div:last-child {
    width: 100%;
  }

  .outline-action,
  .solid-action {
    flex: 1;
    min-width: 0;
  }

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

  .popular-heading {
    grid-template-columns: 1fr auto;
  }

  .popular-search {
    grid-column: 1 / -1;
    order: 2;
  }

  .free-create-btn,
  .favorite-link {
    order: 1;
  }

  .favorite-link {
    grid-column: auto;
  }

  .popular-layout {
    grid-template-columns: 1fr;
  }

  .template-filter {
    position: static;
  }

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

  .template-grid {
    grid-template-columns: repeat(3, minmax(132px, 1fr));
    max-height: none;
  }

  .commerce-sidebar {
    position: static;
  }

  .results-head {
    grid-template-columns: 1fr;
  }

  .result-actions {
    width: 100%;
  }

  .result-actions button {
    flex: 1;
    min-width: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .case-panel {
    min-height: auto;
  }

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

@media (min-width: 901px) {
  .hero-copy h1,
  .hero-subtitle {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 62px;
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .brand {
    width: 72px;
    height: 48px;
  }

  .brand img {
    width: 72px;
    height: 48px;
  }

  .main-nav {
    grid-column: 1 / -1;
    order: 3;
    width: calc(100vw - 36px);
    height: 36px;
    gap: 26px;
    font-size: 15px;
  }

  .main-nav a {
    height: 36px;
  }

  .main-nav a.active::after {
    bottom: 0;
  }

  .header-actions {
    gap: 14px;
    font-size: 15px;
  }

  .login-link {
    width: 64px;
    height: 38px;
  }

  .page-shell {
    padding-top: 24px;
  }

  .hero-copy h1 {
    max-width: 690px;
  }

  .hero-subtitle {
    max-width: 690px;
  }

  .benefits {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .benefits li,
  .benefits li + li {
    min-width: 0;
    padding-left: 0;
  }

  .benefits li + li::before {
    display: none;
  }

  .case-panel {
    padding: 22px 12px 24px;
  }

  .case-carousel {
    width: min(100%, 820px);
  }
}

@media (max-width: 640px) {
  body {
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  }

  .site-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .history-link {
    display: none;
  }

  .page-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hero-copy {
    padding-top: 4px;
  }

  .slanted-label {
    max-width: calc(100vw - 45px);
    min-height: 46px;
    margin-bottom: 24px;
    padding: 0 12px;
    font-size: clamp(16px, 5.2vw, 22px);
    white-space: normal;
    line-height: 1.15;
  }

  .slanted-label::after {
    inset: 6px -6px -6px 6px;
  }

  .hero-copy h1 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .hero-subtitle {
    white-space: normal;
  }

  .hero-actions {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .primary-btn,
  .secondary-btn {
    height: 50px;
  }

  .upload-card {
    max-width: none;
    padding: 14px 12px 6px;
  }

  .drop-zone {
    min-height: 140px;
    padding: 28px 16px;
    text-align: center;
  }

  .section-title {
    gap: 14px;
  }

  .section-title span {
    width: 40px;
  }

  .section-title h2 {
    font-size: 24px;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .tool-card {
    min-height: 0;
  }

  .tool-header {
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
  }

  .tool-icon {
    width: 50px;
    height: 50px;
  }

  .tool-header h3 {
    font-size: 21px;
  }

  .tag {
    min-width: 0;
    max-width: 72px;
    padding: 0 7px;
    font-size: 12px;
  }

  .commerce-page {
    padding-right: 14px;
    padding-left: 14px;
  }

  .outfit-page {
    padding: 14px;
  }

  .outfit-panel {
    padding: 15px 14px;
  }

  .outfit-title h1 {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    font-size: 28px;
  }

  .outfit-upload {
    min-height: 186px;
  }

  .outfit-upload.has-preview {
    min-height: 88px;
  }

  .outfit-upload-actions {
    right: 12px;
    bottom: 12px;
  }

  .outfit-upload-list {
    gap: 5px;
  }

  .garment-type {
    grid-template-columns: repeat(3, 1fr);
  }

  .generate-count,
  .outfit-checks,
  .ready-states {
    grid-template-columns: 1fr;
  }

  .generate-count div {
    width: 100%;
  }

  .outfit-results-head {
    margin-top: 4px;
  }

  .outfit-results-head h2,
  .plan-heading h2 {
    font-size: 22px;
  }

  .outfit-results-head h2 {
    font-size: 16px;
  }

  .outfit-results-head p span {
    margin: 8px 0 0;
  }

  .outfit-results-head > div:last-child {
    flex-direction: column;
  }

  .photo-frame {
    aspect-ratio: 3 / 4;
  }

  .plan-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-left: 0;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .outfit-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .popular-page {
    padding: 18px 14px 28px;
  }

  .popular-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .popular-heading > * {
    grid-column: auto;
  }

  .popular-heading h1 {
    font-size: 28px;
  }

  .popular-search {
    grid-column: auto;
    order: 0;
  }

  .free-create-btn,
  .favorite-link {
    order: 0;
    width: 100%;
  }

  .free-create-btn span {
    display: none;
  }

  .category-list {
    grid-template-columns: 1fr;
  }

  .popular-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .popular-tabs::-webkit-scrollbar {
    display: none;
  }

  .popular-tabs button {
    flex: 0 0 auto;
  }

  .template-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .template-toolbar > div {
    width: 100%;
  }

  .sort-btn {
    flex: 1;
    justify-content: space-between;
  }

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

  .template-art {
    min-height: 158px;
    padding: 16px 10px 17px;
  }

  .template-art b {
    font-size: 20px;
  }

  .commerce-sidebar {
    padding: 17px 14px 16px;
  }

  .commerce-title h1,
  .results-head h2 {
    font-size: 24px;
  }

  .mode-tab {
    min-height: 46px;
    gap: 6px;
    font-size: 14px;
  }

  .commerce-upload {
    min-height: 146px;
  }

  .option-grid,
  .detail-canvas {
    grid-template-columns: 1fr;
  }

  .detail-poster {
    grid-column: auto;
  }

  .result-actions {
    flex-direction: column;
  }

  .poster-canvas,
  .scene-canvas,
  .point-canvas,
  .white-canvas {
    min-height: 286px;
  }

  .point-canvas span {
    max-width: 58%;
  }

  .card-tools {
    grid-template-columns: 1fr;
  }
}

/* ===== 生图记录页 ===== */
body.page-history {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 46%, #f8fbff 100%);
}

html.page-history-scrollless {
  scrollbar-width: none;
}

html.page-history-scrollless::-webkit-scrollbar {
  display: none;
}

body.page-history .home-page,
body.page-history .commerce-page,
body.page-history .outfit-page,
body.page-history .popular-page,
body.page-history .login-page {
  display: none;
}

body.page-history .history-page {
  display: block;
}

.history-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 24px clamp(18px, 3.1vw, 48px) 32px;
}

.history-container {
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
  padding: 24px 28px 20px;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.history-header h1 {
  margin: 0 0 7px;
  font-size: 28px;
  font-weight: 950;
}

.history-header p {
  margin: 0;
  color: #65738e;
  font-size: 14px;
  font-weight: 700;
}

.history-actions {
  display: flex;
  gap: 12px;
}

.history-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.history-refresh-btn {
  border: 1.5px solid #245bff;
  color: #245bff;
  background: #fff;
}

.history-refresh-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.history-refresh-btn.is-loading,
.history-refresh-btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.history-refresh-btn.is-loading svg {
  animation: history-refresh-spin 0.9s linear infinite;
}

@keyframes history-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.history-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #edf1f7;
}

.history-records {
  border: 1px solid #edf1f7;
  border-radius: 8px;
  overflow: hidden;
}

.history-record {
  padding: 18px 20px;
  border-bottom: 1px solid #edf1f7;
}

.history-record:last-child { border-bottom: 0; }

.history-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.history-record-meta { color: #1f2937; font-size: 14px; font-weight: 900; }

.history-bundle-download {
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  color: #245bff;
  background: #eef4ff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.history-bundle-download:hover { color: #fff; background: #245bff; }

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.history-table thead {
  background: #f8faff;
}

.history-table th {
  padding: 14px 16px;
  color: #647189;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #edf1f7;
}

.history-table td {
  padding: 16px;
  color: #1f2937;
  font-weight: 700;
  border-bottom: 1px solid #f2f4f9;
  white-space: nowrap;
}

.history-table tbody tr:hover {
  background: #fafcff;
}

.history-table .task-id {
  color: #245bff;
  font-weight: 900;
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 13px;
}

.result-type-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.result-type-tag.poster {
  color: #245bff;
  background: #eef4ff;
}

.result-type-tag.outfit {
  color: #733df0;
  background: #f2ecff;
}

.result-type-tag.scene {
  color: #149c60;
  background: #e9f7ee;
}

.result-type-tag.remix {
  color: #d97706;
  background: #fff7ed;
}

.result-type-tag.detail {
  color: #0d9488;
  background: #f0fdfa;
}

.history-download {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  color: #245bff;
  background: #eef4ff;
  font-size: 13px;
  font-weight: 900;
}

.history-download:hover {
  color: #fff;
  background: #245bff;
}

/* Multi-output detail row layered under a history summary row */
.history-output-row {
  background: #fafcff;
}

.history-output-row:hover {
  background: #fafcff;
}

.history-output-cell {
  padding: 12px 16px 16px;
  border-top: 1px dashed #e6ebf5;
}

.history-output-count {
  font-size: 12px;
  font-weight: 900;
  color: #5b6479;
  margin-bottom: 10px;
}

.history-output-grid {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  overflow: visible;
  padding-bottom: 2px;
}

.history-output-empty {
  grid-column: 1 / -1;
  padding: 12px;
  color: #8a93a8;
  font-size: 13px;
  text-align: center;
}

.history-output-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 178px;
}

.history-output-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #eef1f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-output-preview.has-version-stack {
  overflow: visible;
  background: transparent;
}

.history-output-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  isolation: isolate;
}

.history-output-stack-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

.history-output-stack-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(219, 226, 238, 0.95);
  border-radius: 10px;
  background: #eef1f7;
  box-shadow: 0 8px 18px rgba(36, 52, 82, 0.12);
  transform: translate(calc((var(--stack-index) - 1) * 4px), calc((1 - var(--stack-index)) * 2px));
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
  z-index: calc(10 + var(--stack-index));
}

.history-output-stack-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-output-stack-layer.is-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a93a8;
  font-size: 13px;
  font-weight: 900;
}

.history-output-stack:not(.is-single-visual):hover .history-output-stack-layer:nth-child(1),
.history-output-stack:not(.is-single-visual).is-expanded .history-output-stack-layer:nth-child(1) {
  transform: translate(-9px, 6px) rotate(-4deg);
}

.history-output-stack:not(.is-single-visual):hover .history-output-stack-layer:nth-child(2),
.history-output-stack:not(.is-single-visual).is-expanded .history-output-stack-layer:nth-child(2) {
  transform: translate(8px, 5px) rotate(4deg);
}

.history-output-stack:not(.is-single-visual):hover .history-output-stack-layer:nth-child(3),
.history-output-stack:not(.is-single-visual).is-expanded .history-output-stack-layer:nth-child(3) {
  transform: translate(0, -1px);
  box-shadow: 0 12px 24px rgba(36, 52, 82, 0.2);
}

.history-output-stack-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 12;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(18, 31, 58, 0.78);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
}

.history-output-stack-toggle {
  position: absolute;
  inset: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.history-output-stack-toggle:focus-visible {
  outline: 3px solid rgba(36, 91, 255, 0.55);
  outline-offset: 3px;
}

.history-output-stack-options {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  z-index: 30;
  display: flex;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 10px 10px;
  border: 1px solid #e2e8f3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(31, 48, 83, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px) scale(0.97);
  transform-origin: top center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.history-output-stack:hover .history-output-stack-options,
.history-output-stack:focus-within .history-output-stack-options,
.history-output-stack.is-expanded .history-output-stack-options {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.history-output-stack-option {
  display: flex;
  flex: 0 0 62px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #364158;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  cursor: zoom-in;
}

.history-output-stack-option:hover,
.history-output-stack-option:focus-visible {
  border-color: #245bff;
  color: #245bff;
  outline: none;
  background: #f3f6ff;
}

.history-output-preview .history-output-stack-option img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}

.history-output-stack-option.is-unavailable,
.history-output-stack-option:disabled {
  color: #9aa3b5;
  cursor: not-allowed;
  opacity: 0.72;
}

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

.history-output-preview.is-clickable {
  cursor: zoom-in;
}

.history-output-preview.is-clickable img {
  transition: transform 160ms ease;
}

.history-output-preview.is-clickable:hover img,
.history-output-preview.is-clickable:focus-visible img {
  transform: scale(1.025);
}

.history-output-preview.is-clickable:focus-visible {
  outline: 3px solid rgba(36, 91, 255, 0.45);
  outline-offset: 3px;
}

.history-image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(15, 23, 42, 0.78);
}

.history-image-preview-modal[hidden] {
  display: none;
}

.history-image-preview-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 1240px);
  max-height: 92dvh;
  min-width: 120px;
  min-height: 120px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
}

.history-image-preview-image {
  display: block;
  max-width: min(88vw, 1180px);
  max-height: calc(92dvh - 24px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.history-image-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dce5f4;
  border-radius: 50%;
  color: #334155;
  background: #fff;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.18);
}

.history-image-preview-close::before,
.history-image-preview-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.history-image-preview-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.history-image-preview-close:hover,
.history-image-preview-close:focus-visible {
  color: #245bff;
  border-color: #245bff;
  outline: none;
}

.history-image-preview-status {
  color: #647189;
  font-size: 14px;
  font-weight: 800;
}

body.history-preview-open {
  overflow: hidden;
}

.history-output-preview.is-placeholder {
  box-sizing: border-box;
  padding: 12px;
  color: #8a93a8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}

.history-output-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #1b2335;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-output-download {
  margin-top: 8px;
  height: 32px;
  border-radius: 6px;
  border: none;
  color: #245bff;
  background: #eef4ff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.history-output-download:hover {
  color: #fff;
  background: #245bff;
}

.history-output-regenerate {
  margin-top: 8px;
  height: 32px;
  border-radius: 6px;
  border: none;
  color: #b42318;
  background: #fff1f0;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.history-output-regenerate:hover {
  color: #fff;
  background: #b42318;
}

.history-output-regenerate:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  cursor: wait;
}

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.history-empty[hidden] {
  display: none;
}

.history-empty svg {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  stroke: #bcc7dd;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.history-empty p {
  margin: 0 0 8px;
  color: #647189;
  font-size: 16px;
  font-weight: 900;
}

.history-empty span {
  color: #94a0b8;
  font-size: 13px;
  font-weight: 700;
}

/* ===== 登录页 ===== */
body.page-login {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 46%, #f8fbff 100%);
}

body.page-login .home-page,
body.page-login .commerce-page,
body.page-login .outfit-page,
body.page-login .popular-page,
body.page-login .history-page {
  display: none;
}

body.page-login .login-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  padding: 40px 18px;
}

.login-container {
  width: 100%;
  max-width: 440px;
}

.login-card {
  padding: 40px 36px 36px;
  border: 1px solid #dfe8f7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 36px rgba(24, 61, 124, 0.08);
}

.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.login-brand img {
  width: 240px;
  height: 160px;
  object-fit: contain;
}

.login-card h1 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 950;
  text-align: center;
}

.login-sub {
  margin: 0 0 28px;
  color: #65738e;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.login-form {
  display: grid;
  gap: 18px;
}

.login-form label {
  display: grid;
  gap: 7px;
}

.login-form label > span {
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.login-form label > span em {
  color: #94a0b8;
  font-style: normal;
  font-weight: 700;
}

/* --- 邮箱输入 --- */
.email-field input {
  width: 100%;
  height: 48px;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 0 14px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.email-field input:focus {
  border-color: #245bff;
  box-shadow: 0 0 0 2px rgba(36, 91, 255, 0.1);
}

.code-input-wrap {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
}

.code-input-wrap input {
  width: 100%;
  height: 48px;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 0 14px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.code-input-wrap input:focus {
  border-color: #245bff;
  box-shadow: 0 0 0 2px rgba(36, 91, 255, 0.1);
}

.send-code-btn {
  height: 48px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #245bff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.send-code-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.invite-field input {
  width: 100%;
  height: 48px;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 0 14px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.invite-field input:focus {
  border-color: #245bff;
  box-shadow: 0 0 0 2px rgba(36, 91, 255, 0.1);
}

.dev-mode-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #65738e;
  font-weight: 700;
  cursor: pointer;
}

.dev-mode-field[hidden] {
  display: none !important;
}

.dev-mode-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #245bff;
  cursor: pointer;
}

.login-submit-btn {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #1768ff 0%, #0648f2 100%);
  box-shadow: 0 10px 18px rgba(17, 87, 245, 0.19);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
}

.login-agreement {
  margin: 20px 0 0;
  color: #94a0b8;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
}

.login-agreement a {
  color: #245bff;
  text-decoration: underline;
}

/* ===== 生成数量已移除 ===== */
.generate-count {
  display: none;
}

/* ===== 响应式 - 历史/登录页 ===== */
@media (max-width: 980px) {
  .history-container {
    padding: 20px 16px 16px;
  }

  .history-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-actions {
    width: 100%;
  }

  .history-refresh-btn {
    flex: 1;
    justify-content: center;
  }

  .login-card {
    padding: 32px 24px 28px;
  }
}

@media (max-width: 640px) {
  .history-table-wrapper {
    margin: 0 -16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .login-page {
    padding: 24px 14px;
  }

  .login-card {
    padding: 28px 18px 24px;
  }

  .code-input-wrap {
    grid-template-columns: 1fr 110px;
    gap: 8px;
  }

  .history-image-preview-modal {
    padding: 20px;
  }

  .history-image-preview-content {
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 40px);
    padding: 8px;
  }

  .history-image-preview-image {
    max-width: calc(100vw - 56px);
    max-height: calc(100dvh - 56px);
  }

  .history-image-preview-close {
    top: -10px;
    right: -10px;
  }
}

/* ===== 制作同款页 ===== */
body.page-remix {
  background: linear-gradient(180deg, #f9fbff 0%, #fff 42%, #f8fbff 100%);
}

body.page-remix .home-page,
body.page-remix .commerce-page,
body.page-remix .outfit-page,
body.page-remix .popular-page,
body.page-remix .history-page,
body.page-remix .login-page {
  display: none;
}

body.page-remix .remix-page {
  display: grid;
  grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}

.remix-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 16px clamp(18px, 2.2vw, 32px) 32px;
}

.remix-layout {
  display: grid;
  grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}

.remix-sidebar {
  position: sticky;
  top: 84px;
  align-self: stretch;
  display: flex;
  min-height: 0;
  flex-direction: column;
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
  overflow: hidden;
  padding: 13px 18px 20px;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.remix-sidebar-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.remix-sidebar-scroll::-webkit-scrollbar {
  display: none;
}

.remix-sidebar-footer {
  flex: 0 0 auto;
  padding-top: 16px;
}

.remix-back {
  margin-bottom: 14px;
}

.remix-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #647189;
  font-size: 14px;
  font-weight: 800;
}

.remix-back-link:hover {
  color: #245bff;
}

.remix-back-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remix-upload-card,
.remix-form,
.remix-options {
  margin-top: 18px;
}

.remix-sidebar-scroll > .remix-upload-card:first-child {
  margin-top: 0;
}

.remix-upload-card h2,
.remix-form h2,
.remix-options h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 950;
  color: #20283a;
}

.remix-upload-card h2 {
  font-size: 15px;
}

.remix-upload-card em,
.remix-field-stack em {
  color: #e21d2c;
  font-style: normal;
}

.remix-upload-card > p {
  margin: 0 0 10px;
  color: #74819a;
  font-size: 13px;
  font-weight: 800;
}

.remix-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 176px;
  padding: 18px 14px;
  margin-top: 8px;
  border: 2px dashed #d7dde7;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  cursor: pointer;
}

.remix-upload-zone svg {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 24px 24px no-repeat;
}

.remix-upload-zone svg path {
  display: none;
}

.remix-upload-zone strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.remix-upload-zone > span {
  color: #667085;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.remix-upload-zone.has-preview {
  gap: 4px;
  height: 88px;
  min-height: 0;
  padding: 8px 14px;
  text-align: center;
}

.remix-upload-zone.has-preview svg {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.remix-upload-preview {
  display: none;
  position: relative;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #d8dee9;
  border-radius: 6px;
  background: #fff;
}

.upload-thumb.remix-upload-list {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  overflow: visible;
}

.upload-thumb.remix-upload-list.has-preview {
  display: grid;
}

.remix-upload-preview.has-preview {
  display: grid;
}

.remix-upload-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid #d8dee9;
  border-radius: 4px;
  object-fit: cover;
  background: #f3f6fb;
}

.remix-upload-preview em,
.remix-upload-preview .upload-status-text {
  overflow: hidden;
  color: #475569;
  font-style: normal;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remix-upload-preview .upload-remove {
  top: 6px;
  right: 6px;
  left: auto;
}

.remix-field-stack {
  display: grid;
  gap: 12px;
}

.remix-field-stack label {
  display: grid;
  gap: 7px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.remix-field-stack input,
.remix-field-stack textarea,
.remix-field-stack select {
  width: 100%;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.remix-field-stack input,
.remix-field-stack select {
  height: 42px;
  padding: 0 11px;
}

.remix-field-stack select {
  appearance: auto;
  cursor: pointer;
}

.remix-field-stack textarea {
  height: 48px;
  min-height: 48px;
  resize: none;
  padding: 0 12px;
  border-color: #d9e3f1;
  font-weight: 850;
  line-height: 48px;
}

.remix-product-name-field {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.remix-product-name-field span {
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

.remix-product-name-field em {
  color: #e21d2c;
  font-style: normal;
}

.remix-product-name-field input {
  width: 100%;
  height: 48px;
  border: 1px solid #d9e3f1;
  border-radius: 7px;
  padding: 0 12px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.remix-product-name-field input:focus {
  outline: 2px solid rgba(17, 87, 245, 0.18);
  border-color: #2f6bff;
}

.remix-field-stack input:focus,
.remix-field-stack textarea:focus,
.remix-field-stack select:focus {
  outline: 2px solid rgba(17, 87, 245, 0.18);
  border-color: #2f6bff;
}

.remix-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.remix-option-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid #dbe5f4;
  border-radius: 8px;
  background: #fbfdff;
  font-size: 13px;
  font-weight: 800;
  color: #273248;
  cursor: pointer;
}

.remix-option-grid label:has(input:checked) {
  border-color: #8bb0ff;
  background: #f4f8ff;
}

.remix-option-grid input {
  width: 17px;
  height: 17px;
  accent-color: #1157f5;
}

.remix-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #edf1f7;
}

.remix-status span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #354157;
  font-size: 12px;
  font-weight: 850;
}

.remix-status span::before {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: #16b35d;
  content: "✓";
  font-size: 10px;
  font-weight: 950;
}

.remix-status span.pending::before {
  color: #6d7c96;
  background: #eef3ff;
  content: "";
}

.remix-generate-btn {
  width: 100%;
  height: 48px;
  margin-top: 0;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(90deg, #1474ff 0%, #5b2af2 100%);
  box-shadow: 0 9px 18px rgba(54, 79, 244, 0.24);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
}

.remix-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.remix-safe-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: #7a879d;
  font-size: 13px;
  font-weight: 850;
}

.remix-safe-note::before {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.8px solid #8da0bf;
  border-radius: 50%;
  color: #8da0bf;
  content: "✓";
  font-size: 11px;
  font-weight: 950;
}

/* 右侧结果区 */
.remix-results {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.remix-results-head {
  margin-top: 0;
  margin-bottom: 18px;
}

.remix-results-head h2 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 950;
}

.remix-results-head p {
  margin: 0;
  color: #70809c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.remix-results-head > div:last-child {
  display: flex;
  gap: 14px;
}

.remix-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px;
}

.remix-result-grid {
  --result-card-width: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--result-card-width));
  gap: 12px;
  align-content: start;
  justify-content: start;
  align-items: start;
  min-height: 0;
  padding: 0;
}

.remix-result-card {
  width: var(--result-card-width);
  margin: 0;
}

.remix-results .card-head h3 {
  color: #111827;
  font-size: 14px;
}

.remix-result-frame {
  position: relative;
  width: 100%;
}

.remix-result-card.has-result .remix-result-frame {
  overflow: hidden;
}

.remix-result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remix-result-card .card-tools.commerce-success-actions,
.outfit-scene-result-card .card-tools.commerce-success-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.remix-result-card .card-tools.commerce-success-actions button,
.outfit-scene-result-card .card-tools.commerce-success-actions button {
  min-width: 0;
  white-space: nowrap;
}

.remix-result-card .card-tools.commerce-success-actions .commerce-download-btn,
.outfit-scene-result-card .card-tools.commerce-success-actions .commerce-download-btn {
  margin-top: 0;
}

.remix-compare-card {
  margin: 0;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
  overflow: hidden;
}

.remix-compare-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #edf1f7;
  background: #fafcff;
}

.remix-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.remix-badge.original {
  color: #647189;
  background: #eef1f7;
}

.remix-badge.generated {
  color: #245bff;
  background: #eef4ff;
}

.remix-compare-card figcaption h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 950;
  color: #1f2937;
}

.remix-compare-frame {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.remix-template-preview {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-height: 420px;
  padding: 24px 18px 28px;
  text-align: center;
}

.remix-template-preview .couple-shape {
  position: relative;
  top: auto;
  left: auto;
  width: 102px;
  height: 82px;
  transform: none;
  margin-bottom: 14px;
}

.remix-template-preview b {
  color: #ffd86e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 900;
}

.remix-template-preview em {
  margin-top: 6px;
  color: rgba(255, 229, 149, 0.92);
  font-size: 12px;
  font-weight: 850;
  font-style: normal;
}

.wedding-red-preview {
  background:
    linear-gradient(90deg, rgba(255, 207, 72, 0.6) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 207, 72, 0.6) calc(100% - 1px)),
    linear-gradient(180deg, rgba(255, 207, 72, 0.65) 0 1px, transparent 1px calc(100% - 1px), rgba(255, 207, 72, 0.65) calc(100% - 1px)),
    radial-gradient(circle at 50% 8%, rgba(255, 210, 84, 0.26), transparent 22%),
    linear-gradient(135deg, #8c0805 0%, #b41308 48%, #741006 100%);
}


@media (min-width: 981px) {
  body.page-commerce,
  body.page-outfit,
  body.page-remix {
    overflow: hidden;
  }

  body.page-commerce .commerce-page,
  body.page-outfit .outfit-page {
    height: calc(100dvh - 68px);
    overflow: hidden;
  }

  body.page-commerce .commerce-page,
  body.page-outfit .outfit-page {
    grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
  }

  .commerce-sidebar-scroll,
  .commerce-results,
  .outfit-panel-scroll,
  .outfit-results {
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .commerce-sidebar-scroll::-webkit-scrollbar,
  .commerce-results::-webkit-scrollbar,
  .outfit-panel-scroll::-webkit-scrollbar,
  .outfit-results::-webkit-scrollbar {
    display: none;
  }

  .commerce-sidebar,
  .outfit-panel {
    position: relative;
    top: 0;
  }

  .commerce-sidebar {
    align-self: stretch;
  }
}

@media (min-width: 981px) {
  body.page-remix .remix-page {
    height: calc(100dvh - 68px);
    overflow: hidden;
    grid-template-columns: minmax(320px, 368px) minmax(0, 1fr);
  }

  .remix-sidebar-scroll,
  .remix-results {
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .remix-sidebar-scroll::-webkit-scrollbar,
  .remix-results::-webkit-scrollbar {
    display: none;
  }

  .remix-sidebar {
    position: relative;
    top: 0;
    max-height: none;
  }
}

/* 制作同款响应式 */
@media (max-width: 980px) {
  body.page-remix .remix-page {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .remix-layout {
    grid-template-columns: 1fr;
  }

  .remix-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .remix-sidebar-scroll {
    overflow: visible;
  }

  .remix-compare {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .remix-results-head {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .remix-results-head > div:last-child {
    width: 100%;
  }

  .remix-results-head .outline-action,
  .remix-results-head .solid-action {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .remix-page {
    padding: 16px 14px 28px;
  }

  .remix-sidebar {
    padding: 16px 14px;
  }

  .remix-compare-frame,
  .remix-template-preview {
    min-height: 340px;
  }

  .remix-option-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== AI工具箱页 ===== */
body.page-tools {
  background: linear-gradient(180deg, #f8fbff 0%, #fff 46%, #f8fbff 100%);
}

body.page-tools .home-page,
body.page-tools .commerce-page,
body.page-tools .outfit-page,
body.page-tools .popular-page,
body.page-tools .remix-page,
body.page-tools .history-page,
body.page-tools .login-page {
  display: none;
}

body.page-tools .tools-page {
  display: block;
}

.tools-page {
  display: none;
  width: 100%;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  margin: 0;
  padding: 20px clamp(18px, 2.2vw, 32px) 32px;
}

.tools-layout {
  display: grid;
  grid-template-columns: 230px minmax(340px, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  min-height: 0;
}

/* 左侧工具列表 */
.tools-nav {
  position: sticky;
  top: 84px;
  padding: 16px;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.tools-nav h2 {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 950;
  color: #101827;
}

.tools-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tools-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.tools-item:hover {
  background: #f4f7ff;
}

.tools-item.active {
  background: #eef4ff;
  box-shadow: inset 0 0 0 1px rgba(36, 91, 255, 0.15);
}

.tools-item-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f0f4fb;
  color: #52627d;
}

.tools-item.active .tools-item-icon {
  color: #fff;
  background: linear-gradient(135deg, #316bff, #0d4bea);
}

.tools-item-icon::before {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  content: "";
}

.tools-item-icon.free-create::before { content: "✦"; }
.tools-item-icon.upscale::before { content: "↗"; }
.tools-item-icon.restore::before { content: "↺"; }
.tools-item-icon.id-photo::before { content: "▣"; }
.tools-item-icon.wedding-invite::before { content: "♡"; }
.tools-item-icon.media-cover::before { content: "▰"; }

.tools-item strong {
  display: block;
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.tools-item.active strong {
  color: #1157f5;
}

.tools-item small {
  display: block;
  margin-top: 2px;
  color: #8893a8;
  font-size: 12px;
  font-weight: 700;
}

/* 中间输入区 */
.tools-input {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 116px);
  height: calc(100dvh - 116px);
  min-height: 0;
  max-height: calc(100vh - 116px);
  max-height: calc(100dvh - 116px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.tools-input-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 20px 20px 12px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tools-input-scroll::-webkit-scrollbar {
  display: none;
}

.tools-input-footer {
  flex: 0 0 auto;
  padding: 14px 20px 20px;
  border-top: 1px solid #edf1f7;
  background: rgba(255, 255, 255, 0.98);
}

.tools-input-header {
  margin-bottom: 18px;
}

.tools-input-header h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 950;
  color: #101827;
}

.tools-input-header p {
  margin: 0;
  color: #65738e;
  font-size: 14px;
  font-weight: 700;
}

.tools-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 170px;
  padding: 18px 14px;
  border: 2px dashed #d7dde7;
  border-radius: 8px;
  color: #111827;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.tools-upload-zone svg {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #f3f4f6 url("./assets/upload.png") center / 22px 22px no-repeat;
}

.tools-upload-zone svg path {
  display: none;
}

.tools-upload-zone strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.tools-upload-zone > span {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.tools-upload-zone.has-preview {
  gap: 4px;
  min-height: 80px;
  padding: 10px 14px;
}

.tools-upload-zone.has-preview svg {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  margin: 0;
}

.tools-upload-zone.has-preview #tools-upload-hint {
  display: none;
}

.upload-thumb.tools-upload-list {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  overflow: visible;
}

.upload-thumb.tools-upload-list.has-preview {
  display: grid;
}

.tools-upload-preview {
  display: none;
  position: relative;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #d8dee9;
  border-radius: 6px;
  background: #fff;
}

.tools-upload-preview.has-preview {
  display: grid;
}

.tools-upload-preview img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid #d8dee9;
  border-radius: 4px;
  object-fit: cover;
  background: #f3f6fb;
}

.tools-upload-preview em,
.tools-upload-preview .upload-status-text {
  overflow: hidden;
  color: #475569;
  font-style: normal;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools-upload-preview .upload-remove {
  top: 6px;
  right: 6px;
  left: auto;
}

.tools-free-create-prompt {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf1f7;
}

.tools-free-create-prompt label {
  display: grid;
  gap: 8px;
}

.tools-free-create-prompt label > span {
  color: #1f2937;
  font-size: 13px;
  font-weight: 900;
}

.tools-free-create-prompt label > span em {
  color: #8b96aa;
  font-style: normal;
  font-weight: 700;
}

.tools-free-create-prompt label > span em.required-star {
  color: #e21d2c;
  font-weight: 950;
}

.tools-free-create-prompt textarea {
  width: 100%;
  min-height: 112px;
  padding: 12px 13px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  color: #1f2937;
  background: #fbfdff;
  outline: none;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.tools-free-create-prompt textarea:focus {
  border-color: #4a7dff;
  box-shadow: 0 0 0 3px rgba(49, 107, 255, 0.12);
}

.tools-free-create-prompt > small {
  display: block;
  margin-top: 7px;
  color: #8b96aa;
  font-size: 12px;
  font-weight: 700;
}

.tools-style-chips {
  display: flex;
  gap: 8px;
}

.tools-style-chips button {
  height: 34px;
  padding: 0 16px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  color: #273248;
  background: #f8fbff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.tools-style-chips button.active {
  border-color: #245bff;
  color: #fff;
  background: #245bff;
}

/* 工具选项 */
.tools-options {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf1f7;
}

.tools-options h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 950;
  color: #101827;
}

.tools-option-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tools-upscale-options .tools-option-row {
  grid-template-columns: 1fr;
}

.tools-id-photo-options .tools-option-row {
  grid-template-columns: 1fr;
}

.tools-wedding-info .tools-option-row {
  grid-template-columns: 1fr;
}

.tools-option-row label {
  display: grid;
  gap: 6px;
}

.tools-option-row label > span {
  color: #1f2937;
  font-size: 13px;
  font-weight: 900;
}

.tools-option-row label > span em.required-star {
  color: #e21d2c;
  font-weight: 950;
  font-style: normal;
}

.tools-option-row input,
.tools-option-row select {
  height: 40px;
  border: 1px solid #d8e2f0;
  border-radius: 7px;
  padding: 0 11px;
  color: #172036;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.tools-option-row input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.tools-option-row select {
  cursor: pointer;
}

.tools-template-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf1f7;
}

.tools-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tools-template-head h3 {
  margin: 0;
  color: #101827;
  font-size: 14px;
  font-weight: 950;
}

.tools-template-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

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

.tools-template-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  color: #172036;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.tools-template-card.active {
  border-color: #245bff;
  box-shadow: 0 0 0 2px rgba(36, 91, 255, 0.12);
}

.tools-template-preview {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 70px;
  border-radius: 6px;
  background: #f3f6fb;
}

img.tools-template-preview {
  object-fit: contain;
}

.tools-template-preview.id-standard,
.tools-template-preview.id-american,
.tools-template-preview.id-academic,
.tools-template-preview.id-light-oxygen {
  aspect-ratio: 3 / 4;
  height: auto;
}

.tools-template-preview.invite-new-chinese,
.tools-template-preview.invite-handdrawn,
.tools-template-preview.invite-european,
.tools-template-preview.invite-blue-rhine {
  aspect-ratio: 9 / 16;
  height: auto;
}

.tools-template-preview::before,
.tools-template-preview::after {
  position: absolute;
  content: "";
}

.tools-template-preview::before {
  inset: 12px auto auto 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
}

.tools-template-preview::after {
  right: 12px;
  bottom: 12px;
  left: 14px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 -16px 0 rgba(255, 255, 255, 0.5);
}

.tools-template-card strong,
.tools-template-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools-template-card strong {
  font-size: 13px;
  font-weight: 900;
}

.tools-template-card small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.tools-template-preview.id-standard,
.tools-template-preview.id-american,
.tools-template-preview.id-academic,
.tools-template-preview.id-light-oxygen {
  background: #fff;
}
.tools-template-preview.invite-new-chinese,
.tools-template-preview.invite-handdrawn,
.tools-template-preview.invite-european,
.tools-template-preview.invite-blue-rhine {
  background: transparent;
}
.tools-template-preview.cover-knowledge { background: linear-gradient(135deg, #0f172a 0%, #2563eb 64%, #facc15 100%); }
.tools-template-preview.cover-review { background: linear-gradient(135deg, #f97316 0%, #facc15 52%, #111827 100%); }
.tools-template-preview.cover-life { background: linear-gradient(135deg, #14b8a6 0%, #f0fdfa 56%, #f472b6 100%); }
.tools-template-preview.cover-talk { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 54%, #22d3ee 100%); }

.tools-scale-chips {
  display: flex;
  gap: 8px;
}

.tools-scale-chips button {
  height: 38px;
  padding: 0 20px;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  color: #273248;
  background: #f8fbff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.tools-scale-chips button.active {
  border-color: #245bff;
  color: #fff;
  background: #245bff;
}

/* 生成按钮 */
.tools-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  margin-top: 0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #1474ff 0%, #5b2af2 100%);
  box-shadow: 0 9px 18px rgba(54, 79, 244, 0.24);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
}

.tools-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.generate-btn,
.outfit-generate-btn,
.remix-generate-btn,
.tools-generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 48px;
  margin-top: 0;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #1768ff 0%, #0648f2 100%);
  box-shadow: 0 10px 18px rgba(17, 87, 245, 0.19);
  cursor: pointer;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.generate-btn:disabled,
.outfit-generate-btn:disabled,
.remix-generate-btn:disabled,
.tools-generate-btn:disabled,
.btn-upload-pending {
  color: #7b879c !important;
  background: #e8edf5 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}

.generate-btn.is-loading,
.outfit-generate-btn.is-loading,
.remix-generate-btn.is-loading,
.tools-generate-btn.is-loading {
  gap: 8px;
  cursor: not-allowed;
}

.generate-button-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  animation: commerce-spin 0.8s linear infinite;
}

.generate-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep quick and advanced generate buttons mutually exclusive after shared button styling. */
.advanced-generate,
body.mode-advanced .quick-generate {
  display: none;
}

body.mode-advanced .advanced-generate {
  display: inline-flex;
}

.tools-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
}

.tools-status span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #354157;
  font-size: 13px;
  font-weight: 850;
}

.tools-status span::before {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: #16b35d;
  content: "✓";
  font-size: 10px;
  font-weight: 950;
}

.tools-status span.pending::before {
  color: #6d7c96;
  background: #eef3ff;
  content: "";
}

/* 右侧结果区 */
.tools-output {
  min-width: 0;
  padding: 20px;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(24, 61, 124, 0.05);
}

.tools-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.tools-output-head h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 950;
  color: #101827;
}

.tools-output-head p {
  margin: 0;
  color: #70809c;
  font-size: 13px;
  font-weight: 800;
}

.tools-output-actions {
  display: flex;
  gap: 10px;
}

.tools-compare-btn,
.tools-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.tools-compare-btn {
  border: 1.5px solid #dce5f1;
  color: #273248;
  background: #fff;
}

.tools-compare-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tools-download-btn {
  color: #fff;
  background: #1157f5;
  box-shadow: 0 6px 14px rgba(17, 87, 245, 0.18);
}

.tools-download-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tools-result-grid {
  --result-card-width: 220px;
  align-items: start;
}

.tools-result-card .card-head h3 {
  font-size: 14px;
}

.tools-result-card .empty-preview {
  aspect-ratio: var(--tools-result-aspect-ratio, 3 / 4);
}

.tools-result-card[data-tools-result-feature^="tool_wedding_invite"] .empty-preview {
  aspect-ratio: 9 / 16;
}

.tools-output-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 20px;
}

.tools-compare-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #fff;
}

.tools-compare-card figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #edf1f7;
  color: #647189;
  font-size: 13px;
  font-weight: 900;
}

.tools-result-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 5px;
  color: #149c60;
  background: #e9f7ee;
  font-size: 12px;
  font-weight: 900;
}

.tools-compare-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: #f4f6f9;
}

.tools-compare-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 兼容其他页面隐藏 tools-page */
body.page-commerce .tools-page,
body.page-outfit .tools-page,
body.page-popular .tools-page,
body.page-history .tools-page,
body.page-login .tools-page,
body.page-remix .tools-page {
  display: none;
}

/* 响应式 - 工具箱 */
@media (max-width: 1260px) {
  .tools-layout {
    grid-template-columns: 200px minmax(300px, 380px) minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 980px) {
  .tools-layout {
    grid-template-columns: 1fr;
  }

  .tools-nav {
    position: static;
  }

  .tools-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .tools-item {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    padding: 10px 6px;
    text-align: center;
  }

  .tools-item small {
    display: none;
  }

  .tools-input {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .tools-input-scroll {
    overflow: visible;
  }

  .tools-input-footer {
    border-top: 0;
    padding-top: 12px;
  }

  .tools-output-compare {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tools-page {
    padding: 14px 14px 24px;
  }

  .tools-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .tools-item {
    padding: 8px 4px;
  }

  .tools-item strong {
    font-size: 12px;
  }

  .tools-input,
  .tools-output {
    padding: 0;
  }

  .tools-input-scroll,
  .tools-output {
    padding: 16px 14px;
  }

  .tools-input-footer {
    padding: 0 14px 16px;
  }

  .tools-output-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tools-output-actions {
    width: 100%;
  }

  .tools-compare-btn,
  .tools-download-btn {
    flex: 1;
    min-width: 0;
  }

  .tools-option-row {
    grid-template-columns: 1fr;
  }

  .tools-id-photo-options .tools-option-row,
  .tools-template-grid {
    grid-template-columns: 1fr;
  }
}