/* ============================================================
   VideoGen 样式表 —— 设计令牌 + 组件类

   原来这些是散在 index.html 里的一大段 <style>,颜色(#7c3aed 之类)
   硬编码了三十多处,想调一下整体色调得全文找。

   现在:颜色/圆角/阴影/动效时长全部收成下面的 CSS 变量,
   组件类只引用变量。**改主题色只需要改这里的几行。**

   ⚠️ .hidden 必须留着。Tailwind 的 preflight 是关掉的
      (index.html 里 corePlugins:{preflight:false}),
      没有别人替它兜底 —— 删了整站的显示/隐藏全废。
   ============================================================ */

/* ===== 设计令牌 ===== */
:root {
  /* 主色:紫。数值就是原来硬编码的那些,所以观感不变 */
  --vg-brand: #7c3aed;
  --vg-brand-hover: #6d28d9;
  --vg-brand-ring: #8b5cf6;
  --vg-brand-300: #a78bfa;
  --vg-brand-soft: #f5f3ff;
  --vg-brand-deep: #4c1d95;
  --vg-brand-sel-dark: #312e81;   /* 深色下选中卡片的底 */
  --vg-brand-pick-dark: #1e1b3a;  /* 深色下"日常首选"那一行的底 */
  --vg-brand-chip-dark: #2e1065;  /* 深色下小标签的底 */

  /* 副色:粉。渐变按钮的第二个色停 */
  --vg-accent: #ec4899;
  --vg-accent-hover: #db2777;
  --vg-grad: linear-gradient(135deg, var(--vg-brand), var(--vg-accent));
  --vg-grad-hover: linear-gradient(135deg, var(--vg-brand-hover), var(--vg-accent-hover));

  /* 文字/背景/描边 */
  --vg-ink: #111827;
  --vg-ink-2: #6b7280;
  --vg-ink-3: #9ca3af;
  --vg-bg: #f9fafb;
  --vg-surface: #fff;
  --vg-surface-2: #f3f4f6;
  --vg-border: #e5e7eb;
  --vg-border-strong: #d1d5db;

  /* 圆角:统一成三档。输入框/小件用 md,卡片用 xl,主按钮/大块用 2xl */
  --vg-r-sm: .5rem;
  --vg-r-md: .75rem;
  --vg-r-lg: 1rem;
  --vg-r-xl: 1.25rem;
  --vg-r-2xl: 1.5rem;

  /* 阴影:原来除了生成按钮 hovering 那一下,其余全是平描边,没有层次 */
  --vg-sh-1: 0 1px 2px rgba(0, 0, 0, .05);
  --vg-sh-2: 0 4px 16px rgba(124, 58, 237, .10);
  --vg-sh-brand: 0 8px 24px -6px rgba(124, 58, 237, .35);

  /* 动效:统一时长和缓动,别一处 .15s 一处 .3s */
  --vg-t: 200ms;
  --vg-t-fast: 120ms;
  --vg-ease: cubic-bezier(.4, 0, .2, 1);
}

.dark {
  --vg-ink: #f3f4f6;
  --vg-ink-2: #9ca3af;
  --vg-ink-3: #6b7280;
  --vg-bg: #030712;
  --vg-surface: #111827;
  --vg-surface-2: #1f2937;
  --vg-border: #1f2937;
  --vg-border-strong: #374151;
  --vg-sh-2: 0 4px 16px rgba(0, 0, 0, .4);
}

/* ===== 基础 ===== */
.hidden { display: none !important; }
* { box-sizing: border-box; }
button { cursor: pointer; background: transparent; }
button:disabled { opacity: .5; cursor: wait; }
button, input, textarea, select { font: inherit; border: 0 solid var(--vg-border-strong); }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* 焦点圈。原来只盖了 button/a,而模型卡和风格卡是 div+tabindex,
   键盘 Tab 过去**看不见焦点** —— 这里补上 [tabindex]。 */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--vg-brand);
  outline-offset: 2px;
}

/* 动效敏感的人:全关。原来没有这条。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 通用组件类 =====
   这些原来是在标签里堆 Tailwind 串,而且同一个串重复四五遍。
   收成类之后,手机断点和主题色都只需要改一处。 */

.vg-card {
  background: var(--vg-surface);
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-r-xl);
  padding: 1.25rem;
}
.dark .vg-card { border-color: var(--vg-border); }

.vg-input, .vg-select {
  padding: .5rem .75rem;
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-r-md);
  background: var(--vg-surface);
  color: inherit;
  transition: border-color var(--vg-t-fast) var(--vg-ease),
              box-shadow var(--vg-t-fast) var(--vg-ease);
}
.vg-input:focus, .vg-select:focus {
  outline: none;
  border-color: var(--vg-brand-ring);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .15);
}
.dark .vg-select { background: var(--vg-surface-2); color: #fff; }

.vg-btn-ghost {
  padding: .375rem .75rem;
  border-radius: var(--vg-r-sm);
  color: var(--vg-ink-2);
  transition: background-color var(--vg-t-fast) var(--vg-ease),
              color var(--vg-t-fast) var(--vg-ease);
}
.vg-btn-ghost:hover { background: var(--vg-surface-2); }
.dark .vg-btn-ghost:hover { background: #1f2937; }

.vg-btn-outline {
  padding: .5rem 1rem;
  border: 2px solid var(--vg-border);
  border-radius: var(--vg-r-md);
  font-weight: 500;
  transition: border-color var(--vg-t-fast) var(--vg-ease),
              background-color var(--vg-t-fast) var(--vg-ease);
}
.vg-btn-outline:hover { border-color: var(--vg-brand-ring); }

/* 分段控件 —— #modeTabs 和历史那两个 Tab 是同一个形状,原来各写各的 */
.vg-seg {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--vg-surface-2);
  border-radius: var(--vg-r-lg);
  width: fit-content;
}
.dark .vg-seg { background: var(--vg-surface-2); }

/* 小节标题 */
.vg-sec-title {
  font-size: .875rem;
  font-weight: 500;
  color: var(--vg-ink-2);
  margin: 0 0 .75rem;
}

/* 吸底操作条:价格 + 生成按钮。原来按钮在整条表单的最底下,
   1366×768 上要滚动才看得见。 */
.vg-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0 .5rem;
  margin-top: .25rem;
  /* 底色跟卡片一致(不是跟页面一致)—— 它嵌在 .vg-card 里,
     用页面底色会变成白卡里嵌一条灰条。纯色,不用 color-mix/backdrop-filter。 */
  background: var(--vg-surface);
  border-top: 1px solid var(--vg-border);
}

/* 缩略图还在读盘时的占位。没有它的话,多图粘贴时会闪一片破图图标
   (img src="" 浏览器画不出图)。 */
.vg-thumb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--vg-surface-2) 25%, var(--vg-border) 50%, var(--vg-surface-2) 75%);
  background-size: 200% 100%;
  animation: vg-shimmer 1.2s linear infinite;
  color: var(--vg-ink-3);
  font-size: .7rem;
}
@keyframes vg-shimmer { to { background-position: -200% 0; } }

/* 轻提示。原来 relay.js 只会弹 alert(),一次粘 3 张超大图就连弹 3 个模态框。 */
.vg-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 1rem);
  z-index: 200;
  max-width: min(90vw, 30rem);
  padding: .7rem 1.1rem;
  border-radius: var(--vg-r-lg);
  background: #1f2937;
  color: #f9fafb;
  font-size: .85rem;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vg-t) var(--vg-ease), transform var(--vg-t) var(--vg-ease);
}
.vg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.vg-toast.bad { background: #b91c1c; }

/* ===== 渐变按钮 ===== */
.gradient-btn { background: var(--vg-grad); }
.gradient-btn:hover { background: var(--vg-grad-hover); }

/* 选中态的卡片 */
.style-card.selected { border-color: var(--vg-brand-ring); background: var(--vg-brand-soft); }
.dark .style-card.selected { background: var(--vg-brand-deep); }
.model-card.selected {
  border-color: var(--vg-brand-ring);
  background: var(--vg-brand-soft);
  box-shadow: 0 0 0 1px var(--vg-brand-ring);
}
.dark .model-card.selected {
  background: var(--vg-brand-sel-dark);
  border-color: var(--vg-brand-300);
  box-shadow: 0 0 0 1px var(--vg-brand-300);
}

/* 一排二选一的小按钮(首帧/首尾帧/参考图、分辨率、模式) */
.opt-btn {
  transition: background-color var(--vg-t-fast) var(--vg-ease),
              color var(--vg-t-fast) var(--vg-ease),
              border-color var(--vg-t-fast) var(--vg-ease);
}
.opt-btn.active {
  background: var(--vg-brand);
  color: #fff;
  border-color: var(--vg-brand);
}

/* ===== 上传区 ===== */
.upload-zone {
  border: 2px dashed var(--vg-border-strong);
  border-radius: var(--vg-r-lg);
  padding: 1.5rem;
  text-align: center;
  transition: border-color var(--vg-t-fast) var(--vg-ease),
              background-color var(--vg-t-fast) var(--vg-ease);
  cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--vg-brand-ring);
  background: var(--vg-brand-soft);
}
.dark .upload-zone:hover, .dark .upload-zone.dragover {
  border-color: var(--vg-brand-300);
  background: #1e1b4b;
}

/* ===== Tab ===== */
#modeTabs { display: flex; gap: .25rem; padding: .25rem; width: fit-content;
            background: var(--vg-surface-2); border-radius: var(--vg-r-lg); }
#modeTabs button.active {
  background: var(--vg-surface);
  color: var(--vg-brand);
  border-color: var(--vg-brand);
  box-shadow: var(--vg-sh-1);
}
.dark #modeTabs button.active {
  background: var(--vg-brand-sel-dark);
  border-color: var(--vg-brand-300);
  color: #e9d5ff;
}
.hist-tab-btn.active { background: var(--vg-brand); color: #fff; }

/* ===== 转圈 ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ===== 缩略图 ===== */
.price-badge { font-variant-numeric: tabular-nums; }
.thumb {
  position: relative;
  border-radius: var(--vg-r-md);
  overflow: hidden;
  border: 1px solid var(--vg-border);
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 删除按钮。原来是 1.35rem ≈ 21.6px,手机上按不准 —— 触摸屏上放大。 */
.thumb button {
  position: absolute; top: .25rem; right: .25rem;
  width: 1.35rem; height: 1.35rem; border-radius: 9999px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .7rem; line-height: 1;
  transition: background-color var(--vg-t-fast) var(--vg-ease);
}
.thumb button:hover { background: rgba(185, 28, 28, .85); }
.dark .thumb { border-color: var(--vg-border-strong); }
.chip { font-variant-numeric: tabular-nums; }

/* ===== 价格表 =====
   一个模型一块,块里每种画质/模式一行,行里是各档秒数的价钱。
   秒数和价钱都用等宽数字,几行摞在一起时好上下对着看。 */
.pt-model { border: 1px solid var(--vg-border); border-radius: var(--vg-r-md); padding: .6rem .75rem; }
.dark .pt-model { border-color: var(--vg-border-strong); }
.pt-name { font-weight: 600; font-size: .8rem; margin-bottom: .35rem; }
.pt-est { margin-left: .4rem; font-weight: 400; font-size: .65rem; color: #d97706;
          border: 1px solid currentColor; border-radius: .35rem; padding: 0 .25rem; }
.pt-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .72rem; padding: .15rem 0; }
.pt-tag { flex: 0 0 auto; min-width: 3.2rem; font-weight: 600; color: var(--vg-brand); }
.dark .pt-tag { color: var(--vg-brand-300); }
.pt-cells { display: flex; gap: .45rem; flex-wrap: wrap; }
.pt-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-cell b { font-weight: 500; color: var(--vg-ink-2); }
.pt-cell i { font-style: normal; color: var(--vg-ink-3); font-size: .9em; margin-left: .15rem; }
/* 每秒单价。跟总价挤在一格里,用紫色分开 —— 比价主要看它。 */
.pt-cell .pt-per { color: var(--vg-brand); margin-left: .35rem; }
.dark .pt-cell .pt-per { color: var(--vg-brand-300); }
.pt-kind { margin-left: auto; color: var(--vg-ink-3); font-size: .65rem; }

/* ===== 推荐面板 ===== */
.rec-cards { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rec-card { border: 1px solid var(--vg-border); border-radius: .9rem; padding: .7rem .85rem; }
.dark .rec-card { border-color: var(--vg-border); }
.rec-head { font-size: .7rem; color: var(--vg-ink-3); text-transform: uppercase; letter-spacing: .03em; }
.rec-model { font-weight: 600; font-size: .95rem; margin: .3rem 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rec-use { font-size: .65rem; font-weight: 500; padding: .1rem .45rem; border-radius: .5rem;
           border: 1px solid #ddd6fe; color: var(--vg-brand); background: var(--vg-brand-soft); }
.dark .rec-use { border-color: var(--vg-brand-deep); background: var(--vg-brand-chip-dark); color: #c4b5fd; }
.rec-why { font-size: .78rem; line-height: 1.6; color: var(--vg-ink-2); }
.rec-why b { color: var(--vg-ink); font-weight: 600; }
.rec-warn { color: #b45309; }
.dark .rec-warn { color: #fbbf24; }
.rec-list { border: 1px solid var(--vg-border); border-radius: .9rem; overflow: hidden; }
.dark .rec-list { border-color: var(--vg-border); }
.rec-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem; font-size: .78rem; }
.rec-row + .rec-row { border-top: 1px solid var(--vg-surface-2); }
.dark .rec-row + .rec-row { border-top-color: #111827; }
.rec-row-head { font-size: .65rem; color: var(--vg-ink-3); text-transform: uppercase; background: var(--vg-bg); }
.dark .rec-row-head { background: #0b1220; }
.rec-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row-price { width: 5.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.rec-row-price i { font-style: normal; color: var(--vg-ink-3); font-size: .85em; }
/* 每秒单价那一列,比价主要看它,所以挑成紫色。
   按次的模型这列是「—」:一口价,跟片长无关,没有"每秒"这回事。 */
.rec-row-per { width: 4.9rem; text-align: right; font-variant-numeric: tabular-nums;
               font-weight: 600; color: var(--vg-brand); }
.dark .rec-row-per { color: var(--vg-brand-300); }
.rec-row-per i { font-style: normal; font-weight: 400; color: var(--vg-ink-3); font-size: .85em; }
/* 「日常首选」那一行整行挑出来 —— 30 多行里不标一下没人找得到 */
.rec-row-pick { background: var(--vg-brand-soft); }
.dark .rec-row-pick { background: var(--vg-brand-pick-dark); }
.rec-pin { display: inline-block; margin-right: .35rem; padding: 0 .3rem; border-radius: .35rem;
           font-size: .6rem; font-weight: 600; color: #fff; background: var(--vg-brand);
           vertical-align: 1px; }
.rec-row-q { width: 4.2rem; text-align: center; color: var(--vg-ink-2); }
.rec-row-s { width: 3rem; text-align: right; color: var(--vg-ink-2); font-variant-numeric: tabular-nums; }

/* 图/视频两条路(中转、直连)都取不到时,顶掉那个空白框的提示。
   原来是 alt="" 的破图 —— 浏览器画一个空框,看着就像"什么都没发生"。 */
.media-bad { display: flex; align-items: center; justify-content: center; text-align: center;
             min-height: 4rem; padding: .75rem; border-radius: var(--vg-r-md);
             border: 1px dashed #fca5a5; background: #fef2f2;
             color: #b91c1c; font-size: .75rem; line-height: 1.5; }
.media-bad a { color: var(--vg-brand); text-decoration: underline; margin-left: .2rem; }
.dark .media-bad { border-color: #7f1d1d; background: #2a1414; color: #fca5a5; }
.dark .media-bad a { color: var(--vg-brand-300); }

/* 结果区:scrollIntoView 滚过来时,顶部不会被那条吸顶页头盖住 */
#resultSection { scroll-margin-top: 5rem; }
#apiKeyInput { min-width: 0; }
#apiKeyInput::placeholder { font-size: 12px; }

/* ===== 手机 =====
   ⚠️「怎么选」在手机上默认收起,但**不能用 .hidden 类** ——
      end-to-end 测试断言 #recPanel 的 class 里不能有 hidden。
      所以走媒体查询:类名保持干净,窄屏照样收起来。
      展开靠 toggleRecommend() 加上的 .open。 */
@media (max-width: 767px) {
  #recPanel:not(.open) { display: none; }
  .thumb button { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
  .upload-zone { padding: 1rem; }
  .vg-actionbar { padding-bottom: .5rem; }
}

/* 填 Key 那张卡在窄屏上太挤(左右各 32px 内边距只剩 272px),
   连带"检测这把 Key"那行字会折行。 */
@media (max-width: 420px) {
  .gate-card { padding: 24px 20px !important; }
}