:root {
  --bg: #0f0b18;
  --panel: #1a1330;
  --accent: #8b5cf6;
  --accent2: #a78bfa;
  --text: #e8e0ff;
  --muted: #9b8ec4;
  --border: #35285a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #2a1f4a 0%, var(--bg) 55%);
  color: var(--text);
}

.app {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sub {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.sub a {
  color: var(--accent2);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.tab {
  background: #221a3d;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab:hover {
  color: var(--text);
  border-color: #5a4a86;
}

.tab--active {
  background: linear-gradient(135deg, #5b21b6, #4c1d95);
  color: #fff;
  border-color: #7c3aed;
  font-weight: 600;
}

code {
  background: #2d2448;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.field span {
  font-size: 0.88rem;
  color: var(--muted);
}

select,
textarea {
  width: 100%;
  background: #120e22;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font: inherit;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.hint {
  margin: -0.5rem 0 0.9rem;
  font-size: 0.8rem;
  color: var(--accent2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

button.primary {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

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

.status {
  font-size: 0.85rem;
  color: var(--muted);
}

/* —— 右侧生图进度（与浅色页配套） */
.gen-progress {
  padding: 0.85rem 1rem 1rem;
  background: linear-gradient(165deg, #faf5ff 0%, #f3e8ff 45%, #ede9fe 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(91, 33, 182, 0.08);
}

.gen-progress[hidden] {
  display: none !important;
}

.gen-progress__head {
  margin-bottom: 0.75rem;
}

.gen-progress__head-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "id prompt model state";
  align-items: start;
  gap: 0.4rem 0.65rem;
  font-size: 0.82rem;
}

.gen-progress__id {
  grid-area: id;
  font-weight: 700;
  color: #5b21b6;
  font-size: 0.88rem;
}

.gen-progress__prompt {
  grid-area: prompt;
  margin: 0;
  line-height: 1.4;
  color: #3f3d5c;
  font-size: 0.82rem;
  word-break: break-word;
  max-height: 3.1em;
  overflow: hidden;
}

.gen-progress__model {
  grid-area: model;
  color: #94a3b8;
  font-size: 0.78rem;
  white-space: nowrap;
  align-self: center;
}

.gen-progress__state {
  grid-area: state;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #6d28d9;
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
  align-self: center;
}

.gen-progress__spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #c4b5fd;
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: gen-spin 0.75s linear infinite;
}

.gen-progress--idle .gen-progress__spin,
.gen-progress.is-done .gen-progress__spin,
.gen-progress.is-error .gen-progress__spin {
  display: none;
}

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

.gen-progress__body {
  padding-top: 0.25rem;
}

.gsteps {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.25rem 0.35rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.15rem;
  position: relative;
}

.gsteps::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0.8rem;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  z-index: 0;
}

.gstep {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.gstep__ic {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-size: 0.6rem;
  line-height: 1;
  margin: 0 auto 0.2rem;
  background: #e0e7ff;
  color: #6366f1;
  border: 2px solid #c7d2fe;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.gstep__l {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.2;
}

.gstep--pending .gstep__ic {
  opacity: 0.5;
  background: #e2e8f0;
  color: #94a3b8;
  border-color: #cbd5e1;
}

.gstep--pending .gstep__l {
  color: #94a3b8;
}

.gstep--done .gstep__ic {
  background: #10b981;
  color: #fff;
  border-color: #059669;
  font-size: 0.5rem;
  font-weight: 700;
  opacity: 1;
}

.gstep--done .gstep__l {
  color: #0f766e;
}

.gstep--current .gstep__ic {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.1rem;
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  color: #fff;
  border-color: #5b21b6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  font-size: 0.7rem;
  opacity: 1;
}

.gstep--current .gstep__l {
  color: #5b21b6;
  font-weight: 700;
}

.gstep--err .gstep__ic {
  background: #f87171;
  border-color: #dc2626;
  color: #fff;
  opacity: 1;
}

.gstep--err .gstep__l {
  color: #b91c1c;
  font-weight: 600;
}

.gen-progress__bar-wrap {
  margin-bottom: 0.45rem;
}

.gen-progress__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  overflow: hidden;
}

.gen-progress__bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #c026d3, #f0abfc);
  transition: width 0.35s ease;
}

.gen-progress__detail {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: #6b5b8c;
  min-height: 1.2em;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .gen-progress__head-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "id state"
      "prompt prompt"
      "model model";
  }
}

.result h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-weight: 600;
}

.out {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0.75rem;
}

.out-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}

.out-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #120e22;
}

.out-card__figure {
  position: relative;
  display: block;
  width: 100%;
}

.out-card__figure .out-card__actions {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 0.75rem;
  border-top: none;
  background: rgba(15, 23, 42, 0.48);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.out-card__figure:hover .out-card__actions,
.out-card__figure:focus-within .out-card__actions {
  opacity: 1;
  visibility: visible;
}

@media (hover: none), (pointer: coarse) {
  .out-card__figure .out-card__actions {
    opacity: 1;
    visibility: visible;
    background: rgba(15, 23, 42, 0.42);
  }
}

.out-card__cap {
  font-size: 0.78rem;
  color: var(--accent2);
  padding: 0.4rem 0.65rem;
  background: #1a1430;
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}

.out-card img,
.out-card__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.out.empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.out > img {
  align-self: center;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.result-compare .compare-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 0.9rem;
}

/* 全站仅此对比区双列（A/B）；出图结果与其余表单均为单列 */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

.compare-col h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.host-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: #b4a3dc;
  background: #221a3d;
  padding: 0.1em 0.45em;
  border-radius: 4px;
}

.out--compare {
  min-height: 200px;
  align-items: stretch;
  justify-content: flex-start;
}

.ecom-n-row,
.gen-n-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.ecom-n-row__n,
.gen-n-row__n {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ecom-n-row__n select,
.gen-n-row__n select {
  max-width: 11rem;
}

.ecom-n-row__series,
.gen-n-row__series {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  cursor: pointer;
}

.ecom-n-row__series input,
.gen-n-row__series input {
  margin-top: 0.2em;
  flex-shrink: 0;
}

#useCaseHint {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.out.out-err,
.out--compare.out-err {
  color: #fca5a5;
  font-size: 0.88rem;
  text-align: left;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.ecom-block,
.gen-options-block {
  background: #130e1f;
  border: 1px solid #3d2d5a;
  border-radius: 10px;
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 1rem;
}

.ecom-block__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.ecom-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #e0d0ff;
}

.ecom-pill {
  font-size: 0.7rem;
  color: #b8a0e8;
  background: #2a1f44;
  padding: 0.2em 0.5em;
  border-radius: 999px;
}

.ecom-line {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.86rem;
  color: var(--muted);
  cursor: pointer;
}

.ecom-line input {
  margin-top: 0.2rem;
  accent-color: var(--accent);
}

.prompt-tools {
  margin-bottom: 0.25rem;
}

.prompt-chips {
  margin-bottom: 0.45rem;
}

.prompt-chips__label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.prompt-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.chip:hover {
  background: #d1d5db;
  border-color: #9ca3af;
  color: #1f2937;
}

.ecom-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 0.4rem;
}

.btn-secondary {
  background: #2a2242;
  color: #e8e0ff;
  border: 1px solid #4c3d78;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #3a3255;
  border-color: #6b5a9a;
}

.ecom-hint {
  font-size: 0.8rem;
  color: #9b7fd4;
}

/* 隐藏 file input，由 .upload-textbox 触发 */
.file-input--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-textbox {
  display: block;
  min-height: 4.5rem;
  margin-top: 0.35rem;
  padding: 0.9rem 1rem;
  border: 2px solid #a78bfa;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7ff 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 16px rgba(99, 102, 241, 0.12);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.upload-textbox:hover {
  border-color: #7c3aed;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(99, 102, 241, 0.18);
}

.upload-textbox:focus,
.upload-textbox:focus-within {
  outline: none;
  border-color: #5b21b6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
}

.upload-textbox.is-dragover {
  border-color: #00a8b5;
  background: #e0fdfa;
}

.upload-textbox__placeholder {
  display: block;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4b5563;
}

.upload-textbox__placeholder strong {
  color: #5b21b6;
  font-weight: 600;
}

.upload-block {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.7rem 0;
}

.upload-block__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
}

.upload-block__head > span:first-child {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 600;
}

.upload-note {
  font-size: 0.75rem;
  color: #8b7eb5;
  line-height: 1.4;
}

/* 旧版行内 file 控件（若别处仍使用 .file-input） */
.file-input {
  width: 100%;
  max-width: 100%;
  font-size: 0.85rem;
  color: var(--muted);
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-height: 0;
}

.image-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.image-preview:empty {
  display: none;
}

.upload-block.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.images-only[hidden] {
  display: none;
}

/* —— Canva 风：青蓝 + 紫、浅色卡片 —— */
body.canva-hero {
  min-height: 100vh;
  color: #1e1b2e;
  background: linear-gradient(160deg, #e0f7ff 0%, #e8e4ff 38%, #f5f0ff 72%, #ffffff 100%);
  font-family: "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.app--content {
  max-width: 920px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(123, 104, 238, 0.18);
  box-shadow: 0 12px 40px rgba(79, 70, 190, 0.08);
  border-radius: 20px;
  margin: 0.75rem auto 2.5rem;
  padding: 1.5rem 1.35rem 2rem;
}

.topbar {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  font-size: 0.9rem;
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #6b2fd6;
  text-decoration: none;
  font-size: 1.1rem;
}

.topbar__logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}

.topbar__link {
  color: #4338a8;
  text-decoration: none;
}

.topbar__link:hover {
  color: #00a8b5;
  text-decoration: underline;
}

.credits-pill {
  background: linear-gradient(120deg, #00c4cc, #7b68ee);
  color: #fff;
  font-weight: 600;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: 0.8rem;
}

.topbar__email {
  color: #64748b;
  font-size: 0.82rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__ghost {
  background: transparent;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
  border-radius: 8px;
  padding: 0.2rem 0.65rem;
  font: inherit;
  cursor: pointer;
}

.topbar__ghost:hover {
  background: rgba(123, 104, 238, 0.12);
}

.topbar__account {
  position: relative;
  flex-shrink: 0;
}

.topbar__account[hidden] {
  display: none !important;
}

.topbar__account-btn {
  margin: 0;
  border: 1px solid rgba(123, 104, 238, 0.45);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
  color: #4338a8;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.topbar__account-btn:hover {
  border-color: #7b68ee;
  color: #312e81;
}

.topbar__account-btn[aria-expanded="true"] {
  border-color: #7b68ee;
  box-shadow: 0 0 0 2px rgba(123, 104, 238, 0.2);
}

.topbar__account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 13.5rem;
  padding: 0;
  padding-top: 1.95rem;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  z-index: 120;
}

.topbar__account-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.topbar__account-close:hover {
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
}

.topbar__account-menu[hidden] {
  display: none !important;
}

.topbar__account-email {
  padding: 0.35rem 2.1rem 0.45rem 0.85rem;
  font-size: 0.78rem;
  color: #475569;
  word-break: break-all;
  line-height: 1.45;
  border-bottom: 1px solid #f1f5f9;
}

.topbar__account-email::before {
  content: "邮箱";
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.topbar__account-item {
  display: block;
  padding: 0.52rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #4338a8;
  text-decoration: none;
}

.topbar__account-item:hover {
  background: #f8fafc;
  color: #312e81;
}

.topbar__account-item--action {
  margin-top: 0.1rem;
}

@media (max-width: 520px) {
  .topbar__account-menu {
    right: auto;
    left: 0;
  }
}

.header--canva h1 {
  color: #312e4d;
}

body.canva-hero .panel,
body.canva-hero .gen-options-block {
  background: #ffffff;
  border: 1px solid rgba(123, 104, 238, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
}

body.canva-hero .sub {
  color: #64748b;
}

body.canva-hero .tab {
  background: #f1f0ff;
  border-color: #d8cfff;
  color: #5b4a9a;
}

body.canva-hero .tab--active {
  background: linear-gradient(135deg, #00c4cc, #7b68ee);
  color: #fff;
  border-color: transparent;
}

body.canva-hero .tab:hover {
  border-color: #a78bfa;
}

body.canva-hero .field span {
  color: #475569;
  font-weight: 500;
}

body.canva-hero .input-light,
body.canva-hero input.input-light,
body.canva-hero select,
body.canva-hero textarea {
  background: #f8fafc;
  color: #1e1b2e;
  border: 1px solid #e2e8f0;
}

body.canva-hero .hint {
  color: #94a3b8;
}

.btn-canvas,
body.canva-hero .primary {
  background: linear-gradient(120deg, #7b68ee, #8b3dff) !important;
  color: #fff !important;
  border: none;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(123, 104, 238, 0.35);
}

body.canva-hero .primary:hover,
.btn-canvas:hover {
  filter: brightness(1.05);
}

body.canva-hero code {
  background: #f1f5f9;
  color: #4338a8;
  border: 1px solid #e2e8f0;
}

body.canva-hero .mng .panel h2 {
  color: #312e4d;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

body.canva-hero .mng .mng-table td {
  color: #334155;
  background: #fff;
}

body.canva-hero .mng .stat-card {
  background: #fff;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

body.canva-hero .mng .pkg-admin-row {
  color: #475569;
}

.auth-body {
  min-height: 100vh;
  background: linear-gradient(160deg, #e0f7ff 0%, #e6e0ff 50%, #fff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1rem;
}

.auth-wrap {
  width: 100%;
  max-width: 400px;
}

.auth-card {
  background: #fff;
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid rgba(123, 104, 238, 0.2);
  box-shadow: 0 16px 48px rgba(79, 70, 190, 0.12);
}

.auth-title {
  margin: 0 0 0.35rem;
  color: #312e4d;
  font-size: 1.45rem;
}

.auth-sub {
  color: #64748b;
  font-size: 0.86rem;
  margin: 0 0 1.25rem;
  line-height: 1.45;
}

.auth-conn {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 1rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.auth-conn--wait {
  color: #64748b;
  background: #f8fafc;
}

.auth-conn--ok {
  color: #166534;
  background: #ecfdf5;
  border-color: #86efac;
}

.auth-conn--bad {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

.auth-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.auth-tab {
  flex: 1;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.4rem;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  color: #64748b;
}

.auth-tab--active {
  background: linear-gradient(120deg, #e0e7ff, #fae8ff);
  border-color: #c4b5fd;
  color: #5b21b6;
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 防止与 .auth-form { display:flex } 同优先级时 [hidden] 不生效，导致登录/注册两表同时露出 */
.auth-form[hidden] {
  display: none !important;
}

.auth-panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #334155;
  margin: 0 0 0.35rem;
}

.auth-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.65rem;
}

.auth-mode-bar__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
}

.auth-mode-bar__switch {
  border: none;
  background: transparent;
  color: #4338a8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.auth-mode-bar__switch:hover {
  color: #00a8b5;
}

.auth-block[hidden] {
  display: none !important;
}

.auth-card--wide {
  width: 100%;
  max-width: 28rem;
}

.acct-summary {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.acct-summary__row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.35rem 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.88rem;
}

.acct-summary__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.acct-summary dt {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}

.acct-summary dd {
  margin: 0;
  color: #1e293b;
  word-break: break-all;
}

.acct-actions {
  margin: 0;
}

.acct-actions .btn-canvas {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

/* auth 页面无 .canva-hero；与首页输入框观感一致，避免出现「一栏灰边、一栏白」 */
.auth-body .input-light,
.auth-body input.input-light {
  background: #f8fafc;
  color: #1e1b2e;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.72rem;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}

.auth-body .input-light:focus {
  outline: none;
  border-color: rgba(123, 104, 238, 0.55);
  box-shadow: 0 0 0 3px rgba(123, 104, 238, 0.12);
}

.auth-sub__inline {
  color: #5b21b6;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #c4b5fd;
}

.auth-sub__inline:hover {
  color: #4c1d95;
  border-color: #a78bfa;
}

/* 必须与外层再套一层 .field 分开，否则 flex-direction:column 会与「横向并排」冲突 */
.auth-code-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.auth-code-row__lbl.field {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.auth-code-row .auth-code-input.input-light {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.65rem;
  max-height: 2.65rem;
  line-height: 1.35;
  resize: none;
  padding-block: 0.55rem;
}

.btn-auth-send {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: #5b21b6;
  font: inherit;
  cursor: pointer;
}

.btn-auth-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-details {
  margin: 0;
  padding: 0.35rem 0 0;
}

.auth-details summary {
  cursor: pointer;
  color: #6366f1;
  font-size: 0.86rem;
}

.auth-row {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #475569;
}

.auth-err {
  min-height: 1.1em;
  color: #dc2626;
  font-size: 0.85rem;
  margin: 0;
}

.auth-hint {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}

.auth-back {
  text-align: center;
  font-size: 0.86rem;
  color: #64748b;
  margin: 1rem 0 0;
}

.auth-back a {
  color: #7b68ee;
}

.auth-already {
  padding: 1rem 0 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1rem;
}

.auth-already__msg {
  margin: 0 0 0.5rem;
  color: #312e4d;
  font-size: 0.95rem;
}

.auth-already__hint {
  margin: 0 0 0.9rem;
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.45;
}

.auth-already__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.reg-code-row__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.reg-code-row__inputs .input-light {
  flex: 1 1 8rem;
  min-width: 6rem;
}

.canva-elevate,
.canva-hero .panel {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.app--wide {
  max-width: 1100px;
}

.header--canva .canva-back {
  display: inline-block;
  color: #7b68ee;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.1rem;
}

.stat-label {
  color: #64748b;
  font-size: 0.8rem;
}

.stat-val {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(120deg, #00a8b5, #7b68ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mng-table-wrap {
  overflow-x: auto;
}

.mng-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.mng-table th,
.mng-table td {
  border: 1px solid #e2e8f0;
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.mng-table th {
  background: #f8fafc;
  color: #475569;
}

.adj {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.mng-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.mng-pwd-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mng-pwd-block h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #334155;
}

.btn-ghost {
  background: #fff;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-ghost:hover {
  background: #f5f3ff;
}

.pkg-shop {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-bottom: 1.5rem;
}

.pkg-section {
  margin: 0;
}

.pkg-section__heading {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #312e4d;
  letter-spacing: 0.04em;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid rgba(99, 102, 241, 0.35);
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pkg-grid--section {
  margin-bottom: 0;
}

.pkg-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 1.1rem 1.2rem 1.2rem;
  text-align: center;
}

.pkg-card h3,
.pkg-card__name,
.pkg-card__official {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.55;
  color: #312e4d;
  text-align: center;
}

.pkg-card__official {
  font-size: 0.96rem;
  letter-spacing: 0.01em;
}

.pkg-line {
  font-size: 1.2rem;
  font-weight: 700;
  color: #4f46e5;
  margin-top: 0.15rem;
  letter-spacing: 0.02em;
}

.pkg-line__sep {
  font-weight: 600;
  color: #94a3b8;
  margin: 0 0.15rem;
}

.pkg-price-num {
  color: #0f766e;
}

.pkg-times-num {
  color: #7b68ee;
}

.pkg-credits {
  font-size: 1.4rem;
  font-weight: 700;
  color: #7b68ee;
}

.pkg-price {
  color: #0f766e;
  font-weight: 600;
  margin-top: 0.3rem;
}

.pkg-note {
  color: #94a3b8;
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
}

.pay-panel .qr-wrap {
  text-align: center;
  margin: 0.5rem 0;
}

.qr-img {
  max-width: 220px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.pkg-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  align-items: center;
}

.pkg-admin {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkg-admin-row {
  padding: 0.4rem 0;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.88rem;
}

/* —— 全站浅底导航、左右分栏创作区、历史与示例 —— */
html {
  scroll-behavior: smooth;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 249, 255, 0.9) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(123, 104, 238, 0.12);
}

.topbar--full {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.65rem 1.1rem;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}

.topbar--full .topbar__logo {
  font-size: 1.05rem;
  margin-right: 0.25rem;
}

.site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
}

.work-split {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

@media (max-width: 1024px) {
  .work-split {
    grid-template-columns: 1fr;
  }
}

.work-head__title {
  font-size: 1.2rem;
  color: #312e4d;
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.work-head__sub {
  margin: 0 0 0.9rem;
}

.work-split__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.work-output {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 12rem;
  max-height: min(92vh, 1100px);
  overflow-y: auto;
  padding: 1rem 1.1rem 1.15rem;
}

/** 平滑滚动置顶出图区时，避免固定在顶部的导航盖住标题 */
#workOutputPanel {
  scroll-margin-top: 5.25rem;
}

.work-output__title {
  margin-bottom: 0 !important;
}

.work-output__head-row {
  flex-shrink: 0;
  margin-bottom: 0.45rem;
}

.work-output__tabs {
  display: inline-flex;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: #fff;
}

.work-output__tab {
  border: none;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  line-height: 1.35;
}

.work-output__tab:hover {
  color: #4338a8;
}

.work-output__tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #00c4cc, #7b68ee);
}

.work-output__pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* [hidden] 默认 display:none 会被本类覆盖，导致「生图记录」与出图区同时露出 */
.work-output__stage > .work-output__pane[hidden] {
  display: none !important;
}

.work-output__pane--history {
  padding: 0.5rem 0.65rem 0.75rem;
  overflow: auto;
}

.work-output__history-inline-alert {
  margin: 0 0 0.5rem !important;
  padding: 0.5rem 0.45rem !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  border-radius: 10px;
}

.gen-history-list--embed {
  padding: 0 0.25rem 0.25rem !important;
  max-height: min(72vh, 720px);
}

.work-output__stage {
  flex: 1 1 auto;
  min-height: min(48vh, 480px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  overflow: hidden;
}

.work-output__stage.is-generating {
  min-height: min(52vh, 520px);
}

.work-output__result {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.work-output__result .result--embed {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 与 img-lightbox[hidden] 同类问题：上层 display:flex 会覆盖 [hidden]，非对比模式下仍露出 A/B 双列 */
.work-output__result > section.result--embed[hidden] {
  display: none !important;
}

.work-output__gen-progress {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.work-output__current {
  flex: 0 0 auto;
}

.work-output__history {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.75rem;
  margin-top: 0.15rem;
}

.work-output__history-title {
  font-size: 0.92rem;
  margin: 0 0 0.35rem;
  color: #475569;
  font-weight: 600;
}

.work-output__history-tip {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.out-placeholder-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.out-placeholder-icon {
  width: 4.75rem;
  height: 4.75rem;
  color: inherit;
  opacity: 0.55;
}

.out-placeholder__hint {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.out-card__btn {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.32rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: #5b21b6;
  cursor: pointer;
  font-weight: 600;
}

.out-card__btn:hover {
  background: #f5f3ff;
}

.out-card__btn--dl {
  border-color: #7c3aed;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
}

.out-card--plain {
  background: #fff;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  box-sizing: border-box;
}

/* 与同文件 .auth-form[hidden] 相同：flex 会与 [hidden] 同特异度并覆盖 display:none（遮罩卡住全页） */
.img-lightbox[hidden] {
  display: none !important;
}

.img-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(15, 23, 42, 0.78);
  cursor: zoom-out;
  z-index: 0;
}

.img-lightbox__inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(96vw, 1920px);
  height: min(92vh, 92dvh);
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 小图在视区内按比例放大；大图则缩放入屏（与 object-fit:contain 行为一致） */
.img-lightbox__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: min(96vw, 1920px);
  max-height: min(92vh, 92dvh);
  object-fit: contain;
  object-position: center;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.08);
}

.img-lightbox__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #334155;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.work-split__h {
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  color: #312e4d;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
}

.work-split__tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: #7c3aed;
  background: #f3e8ff;
  padding: 0.15em 0.5em;
  border-radius: 6px;
}

.work-split__sub {
  font-size: 0.8rem;
  font-weight: 400;
  color: #94a3b8;
}

.result--embed {
  margin: 0;
}

body.canva-hero .work-output .out {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
}

body.canva-hero .work-output .out.out--placeholder:not(.out-err) {
  flex: 1 1 auto;
  min-height: 12rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem 1.25rem;
  line-height: 1.55;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 45%, #f1f5f9 100%);
  border: 1px dashed #dbeafe;
  color: #64748b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.canva-hero .work-output .out.out--placeholder .out-placeholder__hint {
  color: #64748b;
  max-width: 16rem;
}

body.canva-hero .work-output .out.out--placeholder .out-placeholder-visual {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 1rem;
  background: radial-gradient(circle at 30% 20%, rgba(224, 231, 255, 0.9) 0%, rgba(237, 233, 254, 0.75) 50%, rgba(244, 244, 255, 0.5) 100%);
  border: 1px solid rgba(165, 180, 252, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(99, 102, 241, 0.1);
}

body.canva-hero .work-output .out.out--placeholder .out-placeholder-icon {
  width: 2.875rem;
  height: 2.875rem;
  opacity: 1;
  color: #6366f1;
}

body.canva-hero .work-output .out-card {
  background: #fff;
  border-color: #e2e8f0;
}

body.canva-hero .work-output .out-card__cap {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

body.canva-hero .work-output .out-card__figure .out-card__actions {
  background: rgba(30, 27, 46, 0.44);
}

@media (prefers-reduced-motion: reduce) {
  .out-card__figure .out-card__actions {
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(15, 23, 42, 0.45);
    transition: none;
  }
}

body.canva-hero .work-output .out.out-err,
body.canva-hero .work-output .out--compare.out-err {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
  white-space: pre-wrap;
}

body.canva-hero .gen-options-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

body.canva-hero .ecom-n-row__series,
body.canva-hero .gen-n-row__series {
  color: #64748b;
}

body.canva-hero .host-tag {
  background: #e0e7ff;
  color: #4338a8;
}

body.canva-hero .compare-col h3 {
  color: #94a3b8;
  font-weight: 600;
}

body.canva-hero .compare-col .host-tag {
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

body.canva-hero .upload-block {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.canva-hero .upload-block__head > span:first-child {
  color: #64748b;
  font-weight: 600;
}

body.canva-hero .upload-note {
  color: #94a3b8;
}

body.canva-hero .upload-textbox {
  border-color: #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 8px rgba(15, 23, 42, 0.05);
}

body.canva-hero .upload-textbox:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 14px rgba(15, 23, 42, 0.07);
}

body.canva-hero .upload-textbox:focus,
body.canva-hero .upload-textbox:focus-within {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.25);
}

body.canva-hero .upload-textbox.is-dragover {
  border-color: #7dd3fc;
  background: #f0f9ff;
}

body.canva-hero .upload-textbox__placeholder {
  color: #64748b;
}

body.canva-hero .upload-textbox__placeholder strong {
  color: #475569;
}

body.canva-hero .image-preview img {
  border-color: #e2e8f0;
}

.history-block__tip {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

.history-scroll {
  max-height: min(40vh, 360px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.2rem;
}

.history-scroll::-webkit-scrollbar {
  width: 6px;
}

.history-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.history-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  background: #fff;
  font-size: 0.8rem;
}

.history-item--ok {
  border-left: 3px solid #10b981;
}

.history-item--fail {
  border-left: 3px solid #f43f5e;
}

.history-item__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.history-item__time {
  color: #64748b;
  font-size: 0.78rem;
}

.history-item__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
}

.history-item--ok .history-item__badge {
  background: #d1fae5;
  color: #047857;
}

.history-item--fail .history-item__badge {
  background: #ffe4e6;
  color: #be123c;
}

.history-item__meta {
  margin-top: 0.35rem;
  color: #475569;
  font-size: 0.75rem;
}

.history-code {
  font-size: 0.7rem;
  background: #f1f5f9;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: #5b21b6;
}

.history-item__err {
  margin: 0.4rem 0 0;
  color: #b91c1c;
  font-size: 0.75rem;
  line-height: 1.4;
  word-break: break-word;
}

.history-empty {
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

a.history-inline-link {
  color: #5b21b6;
  font-weight: 600;
  text-decoration: underline;
}

a.history-inline-link:hover {
  color: #00a8b5;
}

.site-footer {
  margin: 2rem auto 0;
  max-width: min(1100px, 96vw);
  padding: 1.35rem 1.15rem 1.5rem;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(123, 104, 238, 0.14);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(79, 70, 190, 0.06);
}

.site-footer__intro {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}

.site-footer__keywords {
  display: block;
  margin-top: 0.55rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  color: #526077;
  line-height: 1.55;
  letter-spacing: 0.02em;
  word-break: break-word;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 10px;
  border: 1px dashed rgba(79, 70, 229, 0.22);
}

.site-footer__credit {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(34, 211, 238, 0.35);
  text-align: center;
}

.site-footer__credit-link {
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4338ca;
  text-decoration: none;
  border-bottom: 3px solid #22d3ee;
  padding-bottom: 2px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.site-footer__credit-link:hover {
  color: #0891b2;
  border-bottom-color: #0891b2;
}

body.auth-body .site-footer {
  margin-top: 0;
  max-width: min(560px, 94vw);
}

.site-section {
  margin-bottom: 2rem;
}

.site-section--alt {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 1.25rem 0;
  border: 1px solid rgba(123, 104, 238, 0.1);
}

.site-section__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0.15rem;
}

.site-section__title {
  font-size: 1.2rem;
  color: #312e4d;
  font-weight: 700;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.site-section__meta {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 400;
}

.site-section--examples {
  position: relative;
}

.site-section__title--examples {
  position: relative;
  padding-bottom: 0.45rem;
  margin-bottom: 1.15rem !important;
}

.site-section__title--examples::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: min(11rem, 75%);
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1, #c084fc, #22d3ee, #6366f1);
  background-size: 220% 100%;
  animation: example-title-bar 5s ease infinite;
}

.site-section__title-text {
  display: inline-block;
}

@keyframes example-title-bar {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes example-gradient-flow {
  0%,
  100% {
    background-position: 0% 45%;
  }
  50% {
    background-position: 100% 55%;
  }
}

@keyframes example-shimmer {
  0% {
    transform: translateX(-100%) rotate(8deg);
    opacity: 0;
  }
  12% {
    opacity: 0.75;
  }
  100% {
    transform: translateX(180%) rotate(8deg);
    opacity: 0;
  }
}

@keyframes example-spark {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes example-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.example-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.05rem 1.1rem;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease, border-color 0.25s ease;
  animation: example-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.example-card--d1 {
  animation-delay: 0.06s;
}

.example-card--d2 {
  animation-delay: 0.18s;
}

.example-card--d3 {
  animation-delay: 0.3s;
}

.example-card--d4 {
  animation-delay: 0.42s;
}

.example-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(99, 102, 241, 0.14), 0 8px 20px rgba(15, 23, 42, 0.07);
  border-color: rgba(167, 139, 250, 0.55);
}

.example-card:hover .example-card__ph {
  transform: scale(1.04);
}

.example-card h3 {
  margin: 0.6rem 0 0.4rem;
  font-size: 0.95rem;
  color: #312e4d;
  transition: color 0.25s ease;
}

.example-card:hover h3 {
  color: #5b21b6;
}

.example-card .sub {
  margin: 0;
  font-size: 0.8rem;
}

.example-card__ph {
  position: relative;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(-45deg, #e0f2fe, #c7d2fe, #ddd6fe, #f5d0fe, #e0f2fe);
  background-size: 400% 400%;
  animation: example-gradient-flow 9s ease infinite;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.example-card__ph::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 16%;
  right: 20%;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: -18px 26px 0 -1px rgba(255, 255, 255, 0.35), -8px 44px 0 -3px rgba(255, 255, 255, 0.2);
  animation: example-spark 2.6s ease-in-out infinite;
  z-index: 1;
}

.example-card__ph::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  animation: example-shimmer 3.6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

.example-card__ph--a {
  animation-duration: 9s;
}

.example-card__ph--b {
  background-image: linear-gradient(-45deg, #d9f99d, #a5f3fc, #bae6fd, #6ee7b7, #d9f99d);
  animation-duration: 11s;
  animation-direction: alternate;
}

.example-card__ph--b::before {
  animation-delay: 0.4s;
  right: 28%;
  top: 22%;
}

.example-card__ph--c {
  background-image: linear-gradient(-45deg, #fef3c7, #fed7aa, #fecdd3, #fbcfe8, #fef3c7);
  animation-duration: 8s;
}

.example-card__ph--c::before {
  animation-delay: 0.8s;
  right: 16%;
}

@media (prefers-reduced-motion: reduce) {
  .site-section__title--examples::after,
  .example-card,
  .example-card__ph,
  .example-card__ph::before,
  .example-card__ph::after {
    animation: none !important;
  }

  .example-card--d1,
  .example-card--d2,
  .example-card--d3,
  .example-card--d4 {
    animation-delay: 0s;
  }

  .example-card:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  }

  .example-card:hover .example-card__ph {
    transform: none;
  }
}

/* 电商主图示例：扫线揭示「后图」；替换 /public/examples/ecom-ba-{before,after}.png 可换素材 */
/* 智能做图：替换 /public/examples/smart-gen-{before,after}.png 可换素材 */
/* 智能分镜示例：替换 /public/examples/smart-story-{before,after}.png 可换素材 */
.example-ba {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 13.5rem;
  border-radius: 12px;
  overflow: hidden;
  background: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.example-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 智能做图 / 智能分镜示例：后图为长版式说明，contain 避免裁切 */
.example-card--smart .example-ba__img,
.example-card--smart-story .example-ba__img {
  object-fit: contain;
  background: #fff;
}

.example-ba__after-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: exampleBaReveal 6.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.example-ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  margin-left: -1px;
  z-index: 2;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), #fff 30%, #fff 70%, rgba(255, 255, 255, 0.2));
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.45),
    0 0 16px rgba(99, 102, 241, 0.65);
  animation: exampleBaLine 6.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  pointer-events: none;
}

@keyframes exampleBaReveal {
  0%,
  8% {
    clip-path: inset(0 100% 0 0);
  }
  42%,
  50% {
    clip-path: inset(0 0 0 0);
  }
  90%,
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

@keyframes exampleBaLine {
  0%,
  8% {
    left: 0%;
    opacity: 0.7;
  }
  42%,
  50% {
    left: 100%;
    opacity: 1;
  }
  90%,
  100% {
    left: 0%;
    opacity: 0.7;
  }
}

.example-ba__lbl {
  position: absolute;
  top: 0.45rem;
  z-index: 3;
  padding: 0.12rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  text-transform: none;
  line-height: 1.2;
}

.example-ba__lbl--before {
  left: 0.45rem;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(4px);
}

.example-ba__lbl--after {
  right: 0.45rem;
  color: #312e81;
  background: rgba(224, 231, 255, 0.92);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.example-ba__instruction {
  font-weight: 600;
  color: #4338ca;
}

.example-ba__sell {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #475569;
}

.example-ba__thumb {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.06rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #fef9c3, #fde047);
  color: #a16207;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.example-ba__thumb-svg {
  width: 1.2rem;
  height: 1.2rem;
}

.example-ba__sell-text {
  flex: 1;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .example-ba__after-mask,
  .example-ba__line {
    animation: none !important;
  }

  .example-ba__after-mask {
    clip-path: inset(0 49% 0 0) !important;
  }

  .example-ba__line {
    left: 51% !important;
    margin-left: -1.5px;
    opacity: 0.95;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 0.35rem 0.6rem;
}

.faq-item summary {
  font-weight: 600;
  color: #312e4d;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] summary {
  color: #5b21b6;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 0.4rem;
  padding-bottom: 0.5rem;
}

.faq-item p {
  margin: 0 0 0.5rem 0.15rem;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0 0.2rem 0.4rem;
}

.shop-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.5rem 1rem 2.5rem;
}

/* Topbar：与链接一致的纯按钮样式 */
.topbar__link-as-btn {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-size: inherit;
}

.topbar__link-like {
  color: #4338a8;
  text-decoration: none;
}

.topbar__link-like:hover {
  color: #00a8b5;
  text-decoration: underline;
}

/* 生图记录（仅本机 localStorage） */
.gen-history-sheet {
  position: fixed;
  z-index: 1210;
  inset: 0;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem;
  display: flex;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}

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

.gen-history-sheet:not([hidden]) {
  display: flex;
}

.gen-history-panel__inner {
  width: min(560px, 100%);
  max-height: min(88vh, 720px);
  margin-top: 4vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(123, 104, 238, 0.22);
  box-shadow: 0 24px 56px rgba(79, 70, 190, 0.18);
  overflow: hidden;
}

.gen-history-panel__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.85rem 1rem 0.5rem;
  border-bottom: 1px solid #f1f5f9;
}

.gen-history-sheet__dl-all {
  font-size: 0.74rem !important;
  padding: 0.35rem 0.55rem !important;
  white-space: nowrap;
  border-radius: 8px !important;
}

.gen-history-sheet__dl-all:hover {
  border-color: #7b68ee !important;
  color: #4338a8 !important;
}

.gen-history-panel__title {
  margin: 0;
  font-size: 1.05rem;
  color: #312e4d;
  justify-self: center;
  grid-column: 2;
}

.gen-history-panel__close {
  grid-column: 3;
  background: transparent;
  border: none;
  font-size: 1.55rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 0.2rem;
  justify-self: end;
}

.gen-history-panel__close:hover {
  color: #5b21b6;
}

.gen-history-panel__alert {
  margin: 0;
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #64748b;
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}

.gen-history-empty {
  padding: 0.75rem 1rem;
  margin: 0;
  font-size: 0.88rem;
  color: #94a3b8;
}

.gen-history-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gen-history-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.55rem 0.62rem;
  background: #fafafa;
}

.gen-history-item__shell {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.gen-history-item__aside {
  flex: 0 0 auto;
  padding-top: 0.06rem;
}

.gen-history-item__main {
  flex: 1 1 auto;
  min-width: 0;
}

.gen-history-dl-original {
  display: block;
  max-width: 4.85rem;
  padding: 0.38rem 0.35rem;
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #4338a8;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px dashed #c7d2fe;
  border-radius: 10px;
  cursor: pointer;
}

.gen-history-dl-original:hover {
  border-color: #7b68ee;
  color: #5b21b6;
}

@media (max-width: 520px) {
  .gen-history-dl-original {
    max-width: 3.25rem;
    font-size: 0.62rem;
  }
}

.gen-history-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.gen-history-tag {
  display: inline-block;
  background: rgba(123, 104, 238, 0.12);
  color: #5b21b6;
  font-weight: 600;
  padding: 0.08rem 0.4rem;
  border-radius: 6px;
  font-size: 0.7rem;
}

.gen-history-model {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gen-history-time {
  font-weight: 500;
  color: #334155;
}

.gen-history-time time {
  font-weight: 600;
  color: #1e293b;
}

.gen-history-item__block {
  margin-top: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eef2f7;
}

.gen-history-item__lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #94a3b8;
  margin-bottom: 0.25rem;
}

.gen-history-item__lbl--img {
  margin-top: 0.45rem;
  margin-bottom: 0.2rem;
  color: #64748b;
}

.gen-history-item__size {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #475569;
  word-break: break-word;
}

.gen-history-item__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.gen-history-thumb {
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: #fff;
  line-height: 0;
  max-width: 100%;
}

.gen-history-thumb img {
  width: 120px;
  height: auto;
  display: block;
  max-height: 140px;
  object-fit: contain;
}

.gen-history-item__prompt {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gen-history-item__del {
  margin-top: 0.35rem;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.gen-history-item__del:hover {
  color: #b91c1c;
}

.gen-history-panel__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem 1rem;
  border-top: 1px solid #f1f5f9;
  background: #fff;
}

.gen-history-clear {
  flex-shrink: 0;
}

.btn-gen-history-done {
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .gen-history-panel__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* 出图区「生图记录」标签：缩略图与出图结果 out-card 同款宽图展示 */
.gen-history-list--embed .gen-history-item--embed .gen-history-item__thumbs--embed {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
}

.gen-history-list--embed .gen-history-thumb--embed-match {
  width: 100%;
  max-width: none;
}

.gen-history-list--embed .gen-history-thumb--embed-match img {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* 生图记录独立页 gen-history.html */
.gh-page-body .site-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.gh-page__inner {
  padding: 1.25rem 0 2.5rem;
}

.gh-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.gh-page__title {
  margin: 0;
  font-size: 1.35rem;
  color: #1e293b;
}

.gh-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gh-page__toolbar-btn {
  font-size: 0.85rem !important;
}

.gh-page__toolbar-btn--danger {
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

.gh-page__alert {
  border-radius: 12px;
  margin-bottom: 1rem !important;
}

.gh-page__empty {
  margin-top: 0.5rem !important;
}

.gh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 0.9rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .gh-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.gh-page-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
  min-width: 0;
}

.gh-page-card__fig {
  position: relative;
  margin: 0;
  background: #120e22;
  border-bottom: 1px solid #e2e8f0;
}

.gh-page-card__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: zoom-in;
  line-height: 0;
  background: transparent;
}

.gh-page-card__zoom img {
  display: block;
  width: 100%;
  height: auto;
}

.gh-page-card__placeholder {
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.85rem;
}

.gh-page-card__body {
  padding: 0.55rem 0.62rem 0.35rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gh-page-card__meta {
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.gh-page-card__prompt {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.gh-page-card__actions {
  display: flex;
  gap: 0.45rem;
  padding: 0.45rem 0.62rem 0.65rem;
  margin-top: auto;
}

.gh-page-card__btn {
  flex: 1 1 auto;
  font-size: 0.75rem;
  padding: 0.38rem 0.45rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-weight: 600;
}

.gh-page-card__btn:hover {
  border-color: #94a3b8;
}

.gh-page-card__btn--primary {
  border-color: #c7d2fe;
  color: #4338a8;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.gh-page-card__btn--primary:hover {
  border-color: #7b68ee;
  color: #5b21b6;
}

.gh-pager-wrap {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}

.gh-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
}

.gh-pager__btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-weight: 600;
}

.gh-pager__btn:hover:not(:disabled) {
  border-color: #7b68ee;
  color: #4338a8;
}

.gh-pager__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gh-pager__info {
  font-size: 0.82rem;
  color: #64748b;
}