/* ============================================================
   Banner Maker — UI 主题：极简健康科技风
   参考 design.md（白底 + 黑色胶囊 CTA + 紫色点缀 + 柔光晕 + 漂浮卡）
   说明：仅改外观，所有 id/class 与 app.js 保持一致。
   ============================================================ */
:root {
  /* 主色 / 强调 */
  --ink: #111111;
  --ink-soft: #1e1e1e;
  --purple: #8f3dff;
  --purple-bright: #b348ff;
  --lavender: #e8c8ff;
  --cream: #fff3d3;
  --pink: #f6d6ff;

  /* 中性 */
  --page-bg: #ececec;
  --canvas: #ffffff;
  --surface: #fafafa;
  --border: #e8e8e8;
  --border-soft: #f1f1f1;
  --text-primary: #181818;
  --text-secondary: #5f5f5f;
  --text-tertiary: #9a9a9a;

  /* 渐变 */
  --grad-purple: linear-gradient(135deg, #7b3dff 0%, #b348ff 100%);
  --grad-dark: linear-gradient(180deg, #252525 0%, #111111 100%);

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* 阴影（大扩散 低透明） */
  --sh-xs: 0 1px 2px rgba(17,17,17,.06);
  --sh-sm: 0 6px 18px rgba(17,17,17,.08);
  --sh-md: 0 14px 36px rgba(17,17,17,.12);
  --sh-purple: 0 20px 50px rgba(143,61,255,.26);

  --t-fast: 160ms ease;
  --t-base: 220ms ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", "Plus Jakarta Sans", -apple-system, "PingFang SC",
               "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

/* 柔光晕背景层（疗愈轻科技感） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 88%, rgba(255,243,211,.85) 0%, rgba(255,243,211,0) 62%),
    radial-gradient(42% 55% at 88% 18%, rgba(232,200,255,.80) 0%, rgba(232,200,255,0) 65%),
    radial-gradient(50% 60% at 60% 45%, rgba(246,214,255,.55) 0%, rgba(246,214,255,0) 70%),
    #ececec;
  filter: saturate(1.02);
}

.app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; height: 100vh;
}

/* ---------------- Header（透明 + 玻璃徽标） ---------------- */
.header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: transparent;
}
.header .logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-purple);
  box-shadow: var(--sh-purple);
}
.header h1 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.header .badge {
  margin-left: auto; font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  box-shadow: var(--sh-sm);
}
.header .badge.live {
  color: var(--purple);
  border-color: rgba(143,61,255,.28);
  background: rgba(243,234,255,.85);
}

/* ---------------- 主体（两块漂浮画布） ---------------- */
.main {
  flex: 1; display: flex; min-height: 0;
  gap: 20px; padding: 0 28px 28px;
}
.config, .preview {
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.config {
  width: 348px; flex: 0 0 348px;
  overflow-y: auto; padding: 24px;
}
.preview {
  flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}

/* 细滚动条 */
.config::-webkit-scrollbar { width: 8px; }
.config::-webkit-scrollbar-thumb { background: #e3e3e6; border-radius: 999px; }

/* ---------------- 配置表单 ---------------- */
.section-title {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); margin: 22px 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.section-title::before {
  content: ""; width: 4px; height: 14px; border-radius: 999px;
  background: var(--grad-purple);
}
.section-title:first-child { margin-top: 0; }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 7px;
}
.field textarea, .field input[type=text] {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 11px 13px; font-size: 13px; font-family: inherit; resize: vertical;
  color: var(--text-primary); background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea::placeholder, .field input::placeholder { color: var(--text-tertiary); }
.field textarea:focus, .field input[type=text]:focus {
  outline: none; border-color: var(--purple); background: #fff;
  box-shadow: 0 0 0 3px rgba(143,61,255,.12);
}
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type=color] {
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 3px; background: #fff; cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.color-row input[type=color]:hover {
  border-color: var(--purple); transform: scale(1.06);
  box-shadow: 0 2px 10px rgba(143,61,255,.25);
}
.color-row input[type=text] { flex: 1; }

/* ---------------- 素材上传 ---------------- */
.assets { display: flex; flex-direction: column; gap: 14px; }
.uploader .u-label {
  display: flex; justify-content: space-between; font-size: 12px;
  font-weight: 500; color: var(--text-secondary); margin-bottom: 7px;
}
.dropzone {
  border: 1.5px dashed #d8d4e0; border-radius: var(--r-md); height: 96px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--surface); overflow: hidden; position: relative;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-base);
}
.dropzone:hover { border-color: var(--purple); background: #fcfaff; box-shadow: var(--sh-sm); }
.dropzone img { width: 100%; height: 100%; object-fit: contain; }
.dropzone .ph { font-size: 12px; color: var(--text-tertiary); }
/* 有图后 hover 浮出「替换 / 删除」遮罩 */
.dropzone.has-img::after {
  content: "点击替换"; position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: #fff; background: rgba(17,17,17,.34);
  opacity: 0; transition: opacity var(--t-base); pointer-events: none;
}
.dropzone.has-img:hover::after { opacity: 1; }
.dropzone .clear {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(17,17,17,.55); color: #fff; font-size: 13px; line-height: 22px;
  text-align: center; backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-4px) scale(.9); pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.dropzone.has-img:hover .clear { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ---------------- 配置底部按钮 ---------------- */
.actions { display: flex; gap: 10px; margin-top: 26px; }
.btn {
  flex: 1; border: none; border-radius: var(--r-full); padding: 13px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  -webkit-user-select: none; user-select: none; /* 防止选中流光文字时露出实心白字(闪白) */
}
.btn.ghost {
  flex: 0 0 72px; background: #fff; color: var(--text-primary);
  border: 1px solid var(--border); box-shadow: var(--sh-xs);
}
.btn.ghost:hover { background: var(--surface); border-color: #e2e2e2; }
.btn.primary {
  /* 渐变走 background-image，并垫一层不透明紫色兜底色：
     hover 切到纯色时即使渐变图被移除，底下也始终是紫色，绝不露出背后白卡 */
  background-image: var(--grad-purple); background-color: #7b3dff; color: #fff;
  border: 1px solid #7b3dff; box-shadow: 0 10px 24px rgba(143,61,255,.32);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.primary::after {
  content: "↗"; font-size: 15px; font-weight: 700; line-height: 1;
}
.btn.primary:hover:not(:disabled) {
  background-color: #6f2cf0; background-image: none; transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(143,61,255,.42);
}
.btn.primary:disabled { background: #d8d8d8; border-color: #d8d8d8; cursor: not-allowed; box-shadow: none; }
.btn.primary:disabled::after { content: ""; }

/* 「立即生成」文字流光 —— 移植自 React Bits <ShinyText/>（原生 CSS 版）
   props 映射: color/shineColor=渐变两色, spread=120deg, speed≈3.6s, 连续无停顿, direction=left */
.btn.primary .shiny-text {
  --shine-base: rgba(255,255,255,.66);  /* color：基础文字色（提亮 → 与高光对比更柔） */
  --shine-hi: #ffffff;                  /* shineColor：高光 */
  /* 加宽高光过渡带(30%~70%) → 柔和的流动光泽，而非生硬的白点 */
  background-image: linear-gradient(120deg,
    var(--shine-base) 0%, var(--shine-base) 30%,
    var(--shine-hi) 50%,
    var(--shine-base) 70%, var(--shine-base) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* 状态切换(进入/退出禁用态)时平滑过渡，消除硬跳白 */
  transition: -webkit-text-fill-color var(--t-base), color var(--t-base);
  animation: shiny-text 3.6s linear infinite;
}
/* 连续匀速横扫(150%→-50%，一个周期=扫过一次，首尾无缝衔接)，去掉原先停顿 → 消除一闪一闪 */
@keyframes shiny-text {
  from { background-position: 150% center; }
  to   { background-position: -50% center; }
}
/* 生成中(禁用)暂停流光、恢复实心字；尊重「减少动态」偏好 */
.btn.primary:disabled .shiny-text {
  animation: none;
  -webkit-text-fill-color: rgba(255,255,255,.85); color: rgba(255,255,255,.85);
}
@media (prefers-reduced-motion: reduce) {
  .btn.primary .shiny-text {
    animation: none;
    -webkit-text-fill-color: #fff; color: #fff;
  }
}

/* ---------------- 预览区 ---------------- */
.preview-bar {
  padding: 16px 24px; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px;
}
.preview-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 28px; min-height: 0; position: relative;
}
/* 细网格只垫在背景层(伪元素)，遮罩不影响上层的图片 */
.preview-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(17,17,17,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 0%, transparent 78%);
}
.preview-stage img {
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%; border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.preview-stage .empty {
  position: relative; z-index: 1;
  color: var(--text-tertiary); font-size: 14px; line-height: 1.7; text-align: center;
}
.preview-stage .spinner-wrap { position: relative; z-index: 1; }
.stage-download {
  position: absolute; bottom: 28px; right: 28px;
  background: var(--grad-dark); color: #fff;
  border: 1px solid #1a1a1a; border-radius: var(--r-full); padding: 11px 24px;
  font-size: 14px; font-weight: 600; cursor: pointer; display: none;
  box-shadow: 0 10px 22px rgba(17,17,17,.16); transition: transform var(--t-fast);
}
.stage-download:hover { transform: translateY(-1px); background: #000; }
.stage-download.show { display: block; }

/* Loading */
.spinner {
  width: 40px; height: 40px; border: 3px solid var(--lavender); border-top-color: var(--purple);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 结果缩略图条 ---------------- */
.results {
  height: 120px; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 12px; padding: 0 24px; overflow-x: auto;
}
.results .count { font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }
.thumb {
  width: 86px; height: 86px; border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  border: 2px solid transparent; flex: 0 0 auto; background: var(--surface);
  box-shadow: var(--sh-xs); transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.thumb:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.thumb.active { border-color: var(--purple); box-shadow: 0 6px 18px rgba(143,61,255,.22); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; bottom: 140px; left: 50%; transform: translateX(-50%);
  background: rgba(17,17,17,.92); color: #fff; padding: 11px 20px; border-radius: var(--r-full);
  font-size: 13px; opacity: 0; transition: opacity .3s; pointer-events: none;
  max-width: 70%; box-shadow: var(--sh-md); z-index: 200;
}
.toast.show { opacity: 1; }

/* ---------------- 访问口令遮罩 ---------------- */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,18,28,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
}
.gate.show { display: flex; }
.gate-box {
  background: #fff; border-radius: var(--r-xl); padding: 32px; width: 340px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 28px 80px rgba(17,17,17,.22);
}
.gate-box h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.gate-box p { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.6; }
.gate-box input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 14px; background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.gate-box input:focus {
  outline: none; border-color: var(--purple); background: #fff;
  box-shadow: 0 0 0 3px rgba(143,61,255,.12);
}
.gate-box button {
  width: 100%; margin-top: 16px; border: 1px solid #1a1a1a; border-radius: var(--r-full);
  padding: 13px; background-image: var(--grad-dark); background-color: #111; color: #fff; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: transform var(--t-fast), background-color var(--t-fast);
}
.gate-box button:hover { background-color: #000; background-image: none; transform: translateY(-1px); }
.gate-err { color: #e84d5b; font-size: 12px; margin-top: 10px; min-height: 16px; }

/* ---------------- 响应式（窄屏堆叠） ---------------- */
@media (max-width: 860px) {
  body { overflow: auto; height: auto; }
  .app { height: auto; min-height: 100vh; }
  .main { flex-direction: column; }
  .config { width: 100%; flex: none; }
  .preview { min-height: 70vh; }
}

/* ============================================================
   参考图补充组件：标题区 / 计数徽标 / 版式条 / 切换箭头 /
   下载全部 / 选中打勾 / 用户头像
   ============================================================ */

/* 左栏标题区 */
.config-intro { margin-bottom: 22px; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  color: var(--purple); text-transform: uppercase;
}
.config-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); margin: 6px 0 8px;
}
.config-sub { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }

/* 分组计数徽标 */
.count-pill {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--purple);
  background: rgba(143,61,255,.10); border-radius: var(--r-full); padding: 3px 9px;
  letter-spacing: 0;
}

/* 预览顶栏：左信息 + 下载全部 */
.pv-left { display: flex; flex-direction: column; gap: 2px; }
.pv-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
#note { font-size: 12px; font-weight: 500; }
.pv-download-all {
  margin-left: auto; border: 1px solid var(--border); background: #fff;
  color: var(--text-primary); border-radius: var(--r-full); padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--sh-xs);
  display: none; transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.pv-download-all:hover { background: var(--surface); border-color: #e2e2e2; transform: translateY(-1px); }

/* 版式条（版式 A · n/3） */
.variant-bar {
  display: none; align-items: center; justify-content: space-between;
  padding: 14px 30px 0;
}
.variant-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.variant-index { font-size: 13px; font-weight: 600; color: var(--text-tertiary); }

/* 大图左右切换箭头 */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.nav-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); box-shadow: var(--sh-md); }
.nav-arrow.prev { left: 18px; }
.nav-arrow.next { right: 18px; }

/* 选中缩略图打勾 */
.thumb { position: relative; }
.thumb.active::after {
  content: "✓"; position: absolute; top: 5px; right: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--purple); color: #fff; font-size: 11px; line-height: 18px;
  text-align: center; box-shadow: 0 2px 6px rgba(143,61,255,.45);
}

/* 用户头像 chip */
.user-chip {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--grad-purple); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-purple);
}

/* 生成中：底部缩略图条的骨架屏占位（闪烁微光） */
.thumb.skeleton {
  cursor: default; border-color: transparent;
  background: linear-gradient(100deg, #efedf4 28%, #f8f6fc 48%, #efedf4 68%);
  background-size: 200% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
}
.thumb.skeleton::after { content: none; }   /* 不显示打勾 */
.thumb.skeleton img { display: none; }
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* 两列并排：按钮底色+文字颜色 / 产品图+Logo */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.assets-row { display: flex; gap: 14px; }
.assets-row .uploader { flex: 1; min-width: 0; }