/* ==========================================================================
   RV-ALPHA r67 —— 高端视觉设计层（来源：high-end-visual-design skill，
   stanfish06/skillquarium；Awwwards 级设计宪法）
   --------------------------------------------------------------------------
   定位：全站（重点：首页生成入口 + 各工具生成页）的最后覆盖层，
   在 sunum.css / vercel.css / 页面内联样式之后加载。
   设计宪法（skill 摘要）：
     · 浮岛玻璃胶囊导航（禁贴边通栏 sticky nav）
     · Double-Bezel 双层机壳卡片（外壳发丝线 + 内芯高光，同心圆角）
     · Eyebrow 眉题徽章 + 超大负字距标题 + 宏观留白
     · 自定义 cubic-bezier 运动（禁 linear / ease-in-out）
     · 滚动入场编排（translate-y + blur + opacity，800ms+）
     · 磁吸按钮物理（按下缩放 + 内部图标对角位移）
     · 只动 transform / opacity；backdrop-blur 仅用于固定元素
   摘除方式：删 base.html / index.html 中本文件 <link> 与 alpha.js 即可。
   ========================================================================== */

/* ---------- §A1 运动曲线全局重定义：全站 var(--ease)/var(--es) 自动升级 ---------- */
:root:root {
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --es:   cubic-bezier(0.32, 0.72, 0, 1);
  --rv-bezier: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   §A2 浮岛玻璃胶囊导航（Ethereal Glass）
   ========================================================================== */
.topbar {
  position: sticky;
  top: 10px;
  z-index: 40;
  margin: 14px auto 0;
  max-width: min(1240px, calc(100% - 24px));
  min-height: 0;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-bottom: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .38),
    0 16px 40px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: background .5s var(--rv-bezier), box-shadow .5s var(--rv-bezier);
}
.topbar:hover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .38),
    0 18px 46px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* 浅色主题下玻璃反白 */
html[data-theme="light"] .topbar {
  background: color-mix(in srgb, #ffffff 66%, transparent);
  box-shadow:
    0 1px 2px rgba(16, 18, 24, .08),
    0 16px 40px rgba(16, 18, 24, .10),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* 移动端：贴边距收窄，双行折叠保持 */
@media (max-width: 768px) {
  .topbar {
    top: 8px;
    margin: 10px auto 0;
    max-width: calc(100% - 16px);
    padding: 7px 12px;
    row-gap: 6px;
  }
}

/* 品牌区微动效：logo 悬浮轻浮起 */
.topbar .brand { transition: transform .5s var(--rv-bezier); }
.topbar .brand:hover { transform: translateY(-1px); }
.topbar .brand-logo { transition: filter .5s var(--rv-bezier); }
.topbar .brand:hover .brand-logo { filter: brightness(1.08); }

/* 导航链接：发丝胶囊 + 磁吸按压 */
.top-right a {
  transition:
    background .45s var(--rv-bezier),
    color .45s var(--rv-bezier),
    transform .45s var(--rv-bezier);
}
.top-right a:hover { transform: translateY(-1px); }
.top-right a:active { transform: scale(.96); }

/* ==========================================================================
   §A3 首页 Hero：眉题徽章 + 超大负字距渐变标题（Editorial 尺度）
   ========================================================================== */
.hero .hello {
  font-size: clamp(30px, 5vw, 54px) !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.14;
  background: linear-gradient(180deg, #ffffff 30%, #a9a9b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .hero .hello {
  background: linear-gradient(180deg, #17171a 30%, #5b5b66 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hello-sub {
  margin-top: 14px !important;
  font-size: 14.5px !important;
  letter-spacing: .01em;
}

/* 眉题徽章（Double-Bezel 微缩版）：标题上方（.hero 的 ::before/::after
   已被极光层与点阵网格占用，故挂 .hello::before，display:block 独占一行） */
.hero .hello::before {
  content: "SUNUM · AI CREATIVE STUDIO";
  display: block;
  width: max-content;
  margin: 0 auto 18px;
  padding: 5px 14px;
  font-family: "Geist", ui-sans-serif, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mut);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  /* 渐变文字裁切会波及伪元素，这里显式还原为普通文本渲染 */
  -webkit-text-fill-color: var(--mut);
  background-clip: border-box;
  -webkit-background-clip: border-box;
}
html[data-theme="light"] .hero .hello::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .025), rgba(0, 0, 0, .005));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
@media (max-width: 768px) {
  .hero .hello { font-size: clamp(26px, 7.6vw, 34px) !important; }
  .hero .hello-sub { font-size: 13px !important; }
}

/* ---------- Hero 输入卡：玻璃舱体 + 发丝内高光（Double-Bezel 内芯） ---------- */
.hero-card {
  transition:
    box-shadow .6s var(--rv-bezier),
    border-color .6s var(--rv-bezier),
    transform .6s var(--rv-bezier);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .4),
    0 24px 64px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
.hero-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--line2);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .4),
    0 30px 80px rgba(0, 0, 0, .44),
    0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* ==========================================================================
   §A4 工具入口网格：不对称 Bento + Double-Bezel + Button-in-Button
   ========================================================================== */
.tool-entry {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .35),
    0 14px 36px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition:
    transform .55s var(--rv-bezier),
    box-shadow .55s var(--rv-bezier),
    border-color .55s var(--rv-bezier),
    background .55s var(--rv-bezier);
}
.tool-entry:hover {
  transform: translateY(-5px);
  border-color: var(--line2);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .38),
    0 28px 64px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}
.tool-entry:active { transform: translateY(-2px) scale(.985); }

html[data-theme="light"] .tool-entry {
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
  box-shadow:
    0 1px 2px rgba(16, 18, 24, .06),
    0 14px 36px rgba(16, 18, 24, .09),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
html[data-theme="light"] .tool-entry:hover {
  box-shadow:
    0 2px 4px rgba(16, 18, 24, .07),
    0 28px 64px rgba(16, 18, 24, .13),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Bento 破格：首张卡（视频生成）桌面端占满整行 */
@media (min-width: 900px) {
  .tool-grid > .tool-entry:first-child { grid-column: 1 / -1; }
}

/* Button-in-Button：箭头收进独立圆形舱体，悬浮对角位移（磁吸物理） */
.tool-entry .arr {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  font-size: 13px;
  line-height: 1;
  transition:
    transform .5s var(--rv-bezier),
    background .5s var(--rv-bezier),
    color .5s var(--rv-bezier);
}
html[data-theme="light"] .tool-entry .arr { background: rgba(0, 0, 0, .055); }
.tool-entry:hover .arr {
  transform: translate(3px, -3px) scale(1.08);
  background: rgba(255, 255, 255, .13);
}
html[data-theme="light"] .tool-entry:hover .arr { background: rgba(0, 0, 0, .10); }
@media (prefers-reduced-motion: reduce) {
  .tool-entry:hover .arr { transform: none; }
}

/* 图标舱：悬浮轻抬 */
.tool-entry .tic { transition: color .5s var(--rv-bezier), transform .5s var(--rv-bezier); }
.tool-entry:hover .tic { transform: translateY(-1px) scale(1.04); }

/* ==========================================================================
   §A5 生成页（tools.html）：表单舱 + 结果舱 Double-Bezel 化
   （页面内联样式在后加载，故此处用 .gen-wrap 前缀提升特异性）
   ========================================================================== */
.gen-wrap .gen-right {
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .028),
    0 0 0 6px rgba(255, 255, 255, .05),
    0 2px 4px rgba(0, 0, 0, .4),
    0 28px 72px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-theme="light"] .gen-wrap .gen-right {
  box-shadow:
    0 0 0 5px rgba(16, 18, 24, .03),
    0 0 0 6px rgba(16, 18, 24, .06),
    0 2px 4px rgba(16, 18, 24, .06),
    0 28px 72px rgba(16, 18, 24, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* 表单卡片：统一 22px 大圆角 + 机壳内高光（覆盖通用 .card） */
.gen-wrap .card {
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: box-shadow .6s var(--rv-bezier), border-color .6s var(--rv-bezier);
}

/* 输入控件：聚焦时柔和强调光环（不含 backdrop-blur，滚动区安全） */
.gen-wrap textarea:focus,
.gen-wrap input:focus,
.gen-wrap select:focus {
  box-shadow:
    0 0 0 1px var(--line2),
    0 0 0 4px rgba(255, 255, 255, .045),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: box-shadow .5s var(--rv-bezier), border-color .5s var(--rv-bezier);
}

/* 结果区：内芯凹陷感（内容沉在玻璃之下） */
.gen-wrap .res-body {
  border-radius: 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
  transition: box-shadow .6s var(--rv-bezier);
}
html[data-theme="light"] .gen-wrap .res-body {
  box-shadow: inset 0 1px 3px rgba(16, 18, 24, .06);
}

/* ==========================================================================
   §A6 按钮：全圆胶囊 + 按压物理
   ========================================================================== */
.btn {
  border-radius: 999px;
  transition:
    transform .5s var(--rv-bezier),
    box-shadow .5s var(--rv-bezier),
    background .5s var(--rv-bezier),
    opacity .5s var(--rv-bezier);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { transform: none; }
/* 主 CTA：白舱体在深色下加一层可感的浮起（浅色主题自动由既有配色兜底） */
html[data-theme="dark"] .btn.solid,
html[data-theme="dark"] .btn.primary {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .5),
    0 10px 28px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .btn.solid:hover,
html[data-theme="dark"] .btn.primary:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .5),
    0 14px 36px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ==========================================================================
   §A7 滚动入场编排（配合 alpha.js IntersectionObserver）
   只用 transform + opacity + 短暂 filter，800ms+ 重入场；
   进入后即移除过渡负担（.rv-in 保持 will-change 清空）。
   ========================================================================== */
.rv {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity .85s var(--rv-bezier),
    transform .85s var(--rv-bezier),
    filter .85s var(--rv-bezier);
  transition-delay: var(--rv-d, 0ms);
  will-change: transform, opacity;
}
.rv.rv-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; filter: none; transition: none; }
}
/* JS 不可用时兜底：加 class 前先由 alpha.js 打 html.rv-on，
   无 JS 时 .rv 规则不生效，内容永远可见 */
html:not(.rv-on) .rv { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   §A8 细节收尾
   ========================================================================== */
/* 通用卡片：统一机壳高光（低调，不覆盖各页自有圆角） */
.card { transition: box-shadow .6s var(--rv-bezier), border-color .6s var(--rv-bezier), transform .6s var(--rv-bezier); }

/* 作品卡 / 模板卡：与工具入口同款机壳（悬浮轻抬 + 内高光） */
.work, .tpl {
  transition:
    transform .55s var(--rv-bezier),
    box-shadow .55s var(--rv-bezier),
    border-color .55s var(--rv-bezier);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .3),
    0 10px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.work:hover, .tpl:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .34),
    0 22px 52px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .09);
}
@media (prefers-reduced-motion: reduce) {
  .work:hover, .tpl:hover { transform: none; }
}

/* 页脚：低调化（弱化到第二层文字色） */
.footer, .site-footer { color: var(--mut); }
.footer a, .site-footer a { transition: color .5s var(--rv-bezier); }
.footer a:hover, .site-footer a:hover { color: var(--txt); }

/* 选中文本品牌化 */
::selection { background: rgba(124, 92, 255, .32); }

/* ==========================================================================
   §B1 按钮：光泽扫过（sheen sweep）+ 焦点环 + 品牌强调色
   ========================================================================== */
.btn {
  position: relative;
  overflow: hidden;
  accent-color: #7c5cff;
}
/* 主 CTA 悬浮时一道高光斜扫而过（纯 transform，无重绘负担） */
.btn.solid::after,
.btn.primary::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .38) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  transition: transform .9s var(--rv-bezier);
}
.btn.solid:hover::after,
.btn.primary:hover::after { transform: translateX(420%) skewX(-18deg); }
/* 幽灵按钮：悬浮时亮出玻璃底 */
html[data-theme="dark"] .btn:not(.solid):not(.primary):hover {
  background: rgba(255, 255, 255, .07);
}
html[data-theme="light"] .btn:not(.solid):not(.primary):hover {
  background: rgba(0, 0, 0, .045);
}
/* 键盘可达性：焦点环（不用 outline:0 裸奔） */
.btn:focus-visible,
.top-right a:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(124, 92, 255, .65);
  outline-offset: 2px;
  border-radius: 8px;
}
.btn:focus-visible { border-radius: 999px; }

/* ==========================================================================
   §B2 表单交互质感：悬浮抬边 + placeholder 弱化 + 光标品牌化
   ========================================================================== */
.gen-wrap textarea,
.gen-wrap input[type="text"],
.gen-wrap input[type="number"],
.gen-wrap input[type="password"],
.gen-wrap select {
  transition:
    border-color .45s var(--rv-bezier),
    box-shadow .45s var(--rv-bezier),
    background .45s var(--rv-bezier);
}
.gen-wrap textarea:hover,
.gen-wrap input:hover,
.gen-wrap select:hover {
  border-color: var(--line2);
}
.gen-wrap ::placeholder { color: var(--mut); opacity: .55; transition: opacity .4s var(--rv-bezier); }
.gen-wrap :focus::placeholder { opacity: .3; }
/* 全站输入框同样式（登录/注册/设置等，不只生成页） */
input, textarea, select { accent-color: #7c5cff; }
input::placeholder, textarea::placeholder { opacity: .55; }

/* ==========================================================================
   §B3 光标跟随光晕（Spotlight）：JS 写入 --mx/--my，这里只渲染
   仅注入到 .tool-entry / .hero-card 的子节点 .rv-glow，不碰伪元素
   ========================================================================== */
.rv-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--rv-bezier);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .085), transparent 65%);
}
html[data-theme="light"] .rv-glow {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(124, 92, 255, .07), transparent 65%);
}
.tool-entry:hover .rv-glow,
.hero-card:hover .rv-glow { opacity: 1; }
.tool-entry, .hero-card { position: relative; }

/* ==========================================================================
   §B4 滚动条：细轨化（webkit + firefox）
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--mut); }

/* ==========================================================================
   §B5 表格与列表行：悬浮行亮起（订单/后台/流水表）
   ========================================================================== */
table tbody tr { transition: background .4s var(--rv-bezier); }
table tbody tr:hover { background: rgba(255, 255, 255, .035); }
html[data-theme="light"] table tbody tr:hover { background: rgba(0, 0, 0, .028); }

/* ==========================================================================
   §B6 弹层玻璃化：dialog / modal / toast 通用（类名不存在时零影响）
   ========================================================================== */
.modal, .dialog, .popup, .toast, .tipbox {
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .4),
    0 32px 88px rgba(0, 0, 0, .44),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* ==========================================================================
   §B7 正文链接：下划线滑入动画（悬浮时从左划出）
   ========================================================================== */
.prose a, .article a, .legal a, .footer a, .site-footer a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .5s var(--rv-bezier), color .5s var(--rv-bezier);
}
.prose a:hover, .article a:hover, .legal a:hover,
.footer a:hover, .site-footer a:hover { background-size: 100% 1px; }

/* ==========================================================================
   §B8 图片/媒体柔和淡入：JS 在 load 后加 .rv-img-ok
   ========================================================================== */
img.rv-img { opacity: 0; transition: opacity .7s var(--rv-bezier); }
img.rv-img.rv-img-ok { opacity: 1; }
/* 无 JS / 加载失败兜底 */
html:not(.rv-on) img.rv-img { opacity: 1; }

/* ==========================================================================
   §B9 分段控件 / 标签页：底衬滑动（.hero-seg 与工具页 tab 通用）
   ========================================================================== */
.hero-seg button, .seg button {
  transition:
    background .45s var(--rv-bezier),
    color .45s var(--rv-bezier),
    transform .45s var(--rv-bezier);
}
.hero-seg button:active, .seg button:active { transform: scale(.96); }

/* ==========================================================================
   §B10 细节微质感
   ========================================================================== */
/* 徽章 / 标签：发丝胶囊 */
.badge, .tag, .chip {
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* 分隔线弱化为呼吸感发丝 */
hr { border: 0; border-top: 1px solid var(--line); opacity: .7; }
/* 数字等宽排版（积分/价格对齐更高级） */
.num, .credits, .price { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   §C 生成页专项精修（Midjourney / Krea / Leonardo 设计语言）
   作用域：#sec-img（生图）/ #sec-videogen（视频）。
   双 ID 前缀（#sec-img#sec-img）压过页面内联样式（后加载的 ID+class 平局规则）。
   纯 CSS 实现，零 DOM / JS 改动；摘除 = 随 §C 块整体删除。
   ========================================================================== */

/* ---- §C1 提示词框主角化：Krea 式独立舱体，聚焦即点亮 ----
   （注意：视频页 .vx-composer 的大画布作曲家保持原有 176px 大尺寸，仅加聚焦光环） */
#sec-img#sec-img .ai-in,
#sec-videogen#sec-videogen .ai-in {
  min-height: 110px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition:
    border-color .5s var(--rv-bezier),
    box-shadow .5s var(--rv-bezier),
    background .5s var(--rv-bezier);
}
/* 恢复视频作曲家的原设计尺寸（只叠加边框/圆角/聚焦光环） */
#sec-videogen#sec-videogen .vx-composer textarea.ai-in {
  min-height: 176px;
  padding: 16px 16px 8px;
}
#sec-img#sec-img textarea.ai-in:focus,
#sec-videogen#sec-videogen textarea.ai-in:focus {
  border-color: rgba(124, 92, 255, .55);
  box-shadow:
    0 0 0 3px rgba(124, 92, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* 浅色主题：作曲家舱体保持站点既有的深色舱设计，输入框不强改白底 */

/* ---- §C2 生成按钮英雄化：品牌渐变 + 光泽扫过 + 按压物理 ----
   页面自身存在两种形态：
   a) 常规胶囊（.jm-optrow / .gen-ft 内）→ 全套生效；
   b) 紧凑栏 44px 圆形↑按钮（.vx-bar 内，页面 JS 重排）→ 保留圆形与箭头，
      仅叠加渐变/光晕/按压，禁用扫光（避免箭头被当扫光位移）。 */
@keyframes rvCtaSheen {
  0% { transform: translateX(-140%) skewX(-18deg); }
  55%, 100% { transform: translateX(420%) skewX(-18deg); }
}
#sec-img#sec-img .jm-go,
#sec-videogen#sec-videogen .btn-pri {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(100deg, #7c5cff 0%, #5b46d6 60%, #4a37c4 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .4),
    0 8px 24px rgba(124, 92, 255, .38),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  transition:
    transform .5s var(--rv-bezier),
    box-shadow .5s var(--rv-bezier),
    filter .5s var(--rv-bezier);
}
/* 常规胶囊形态：撑满剩余行宽（Krea 式大 CTA） */
#sec-img#sec-img .jm-optrow .jm-go,
#sec-videogen#sec-videogen .gen-ft .btn-pri {
  flex: 1;
  padding: 13px 30px;
  font-size: 15px;
  letter-spacing: .01em;
}
/* 扫光层：仅常规胶囊形态（.vx-bar 圆形按钮的 ::after 是 ↑ 箭头，勿动） */
#sec-img#sec-img .jm-optrow .jm-go::after,
#sec-videogen#sec-videogen .gen-ft .btn-pri::after {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%; left: -30%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0), rgba(255,255,255,.35) 50%, rgba(255,255,255,0));
  transform: translateX(-140%) skewX(-18deg);
  transition: transform .9s var(--rv-bezier);
}
#sec-img#sec-img .jm-go:hover:not(:disabled),
#sec-videogen#sec-videogen .btn-pri:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .4),
    0 14px 36px rgba(124, 92, 255, .48),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}
#sec-img#sec-img .jm-optrow .jm-go:hover:not(:disabled)::after,
#sec-videogen#sec-videogen .gen-ft .btn-pri:hover:not(:disabled)::after {
  transform: translateX(420%) skewX(-18deg);
}
#sec-img#sec-img .jm-go:active:not(:disabled),
#sec-videogen#sec-videogen .btn-pri:active:not(:disabled) {
  transform: translateY(0) scale(.98);
  filter: brightness(.97);
}
#sec-img#sec-img .jm-go:disabled,
#sec-videogen#sec-videogen .btn-pri:disabled {
  filter: saturate(.4) brightness(.75);
  transform: none;
}
/* 紧凑栏圆形按钮：保住页面设计的尺寸与 ↑ 箭头，只吃渐变/光晕 */
#sec-img#sec-img .vx-bar .jm-go,
#sec-videogen#sec-videogen .vx-bar .btn-pri {
  width: 44px; height: 44px; min-width: 44px;
  padding: 0; font-size: 0;
  display: grid; place-items: center;
  overflow: visible;
}
#sec-img#sec-img .vx-bar .jm-go::after,
#sec-videogen#sec-videogen .vx-bar .btn-pri::after {
  content: "\2191";
  position: static;
  width: auto; top: auto; bottom: auto; left: auto;
  background: none;
  transform: none;
  transition: none;
  font-size: 17px; line-height: 1; font-weight: 700;
}
#sec-img#sec-img .vx-bar .jm-go:hover:not(:disabled)::after,
#sec-videogen#sec-videogen .vx-bar .btn-pri:hover:not(:disabled)::after {
  transform: none;
}

/* ---- §C3 参数 chips 玻璃化：选中态从重填充改为品牌环 + 淡底（Leonardo 式） ---- */
#sec-img#sec-img .chip,
#sec-videogen#sec-videogen .chip {
  transition:
    background .45s var(--rv-bezier),
    color .45s var(--rv-bezier),
    border-color .45s var(--rv-bezier),
    box-shadow .45s var(--rv-bezier),
    transform .45s var(--rv-bezier);
}
#sec-img#sec-img .chip:active,
#sec-videogen#sec-videogen .chip:active { transform: scale(.94); }
#sec-img#sec-img .chip.on,
#sec-videogen#sec-videogen .chip.on {
  background: rgba(124, 92, 255, .16) !important;
  color: #cdbcff !important;
  border-color: rgba(124, 92, 255, .55) !important;
  box-shadow:
    0 0 0 1px rgba(124, 92, 255, .25),
    0 4px 14px rgba(124, 92, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="light"] #sec-img#sec-img .chip.on,
html[data-theme="light"] #sec-videogen#sec-videogen .chip.on {
  background: rgba(124, 92, 255, .10) !important;
  color: #5b3fd6 !important;
  box-shadow:
    0 0 0 1px rgba(124, 92, 255, .35),
    0 3px 10px rgba(124, 92, 255, .16);
}

/* 模式集群（视频 7 模式 chips + 生图 jm-modes 分段）选中态同语言 */
#sec-videogen#sec-videogen .vgm.on {
  background: linear-gradient(100deg, rgba(124, 92, 255, .22), rgba(124, 58, 237, .14)) !important;
  color: #d3c5ff !important;
  border-color: rgba(124, 92, 255, .6) !important;
}
#sec-img#sec-img .jm-mode {
  transition: background .45s var(--rv-bezier), color .45s var(--rv-bezier),
              box-shadow .45s var(--rv-bezier), transform .45s var(--rv-bezier);
}
#sec-img#sec-img .jm-mode:active { transform: scale(.96); }
#sec-img#sec-img .jm-mode.on {
  background: linear-gradient(100deg, #7c5cff 0%, #5b46d6 120%) !important;
  box-shadow: 0 4px 16px rgba(124, 92, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

/* ---- §C4 模型卡：悬浮抬升 + 选中品牌环 + 角标精修 ---- */
#sec-videogen#sec-videogen .vg-mdl-card,
#sec-img#sec-img .jm-it {
  transition:
    transform .5s var(--rv-bezier),
    box-shadow .5s var(--rv-bezier),
    border-color .5s var(--rv-bezier),
    background .5s var(--rv-bezier);
}
#sec-videogen#sec-videogen .vg-mdl-card:hover:not(.on) {
  transform: translateY(-2px);
  border-color: var(--line2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
}
#sec-videogen#sec-videogen .vg-mdl-card.on {
  border-color: rgba(124, 92, 255, .65) !important;
  box-shadow:
    0 0 0 1px rgba(124, 92, 255, .4),
    0 8px 22px rgba(124, 92, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
#sec-img#sec-img .jm-it:hover { background: rgba(255, 255, 255, .05); }
#sec-img#sec-img .jm-it.on {
  border-color: rgba(124, 92, 255, .55);
  background: rgba(124, 92, 255, .10);
}
#sec-img#sec-img .jm-it .jm-radio { transition: border-color .4s var(--rv-bezier), box-shadow .4s var(--rv-bezier); }
#sec-img#sec-img .jm-it.on .jm-radio {
  border-color: #8f75ff;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .22);
}
html[data-theme="light"] #sec-videogen#sec-videogen .vg-mdl-card:hover:not(.on) {
  box-shadow: 0 10px 26px rgba(16, 18, 24, .10), inset 0 1px 0 #fff;
}

/* ---- §C5 上传卡与拖拽区：虚线呼吸 + 悬浮点亮（Dropzone 手感） ---- */
#sec-videogen#sec-videogen .vg-upcard,
#sec-img#sec-img .jm-drop,
#sec-img#sec-img .upcard-lite {
  border: 1.5px dashed var(--line2) !important;
  transition:
    border-color .5s var(--rv-bezier),
    background .5s var(--rv-bezier),
    transform .5s var(--rv-bezier),
    box-shadow .5s var(--rv-bezier);
}
#sec-videogen#sec-videogen .vg-upcard:hover,
#sec-img#sec-img .jm-drop:hover,
#sec-img#sec-img .upcard-lite:hover {
  border-color: rgba(124, 92, 255, .6) !important;
  background: rgba(124, 92, 255, .05) !important;
}
#sec-videogen#sec-videogen .vgup.vg-over .vg-upcard,
#sec-img#sec-img .jm-drop.rv-drag {
  border-color: #8f75ff !important;
  background: rgba(124, 92, 255, .10) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .18);
}

/* ---- §C6 结果舱：图片 hover 微缩放 + 双层机壳 + 历史条精修 ---- */
#sec-img#sec-img .jm-rimg,
#sec-img#sec-img .jm-gal-it,
#sec-videogen#sec-videogen .res-body video {
  overflow: hidden;
}
#sec-img#sec-img .jm-rimg img {
  border-radius: 14px;
  transition: transform .8s var(--rv-bezier), box-shadow .8s var(--rv-bezier);
}
#sec-img#sec-img .jm-rimg:hover img {
  transform: scale(1.012);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
#sec-img#sec-img .jm-gal-it {
  border-radius: 12px;
  transition: border-color .45s var(--rv-bezier), transform .45s var(--rv-bezier), box-shadow .45s var(--rv-bezier);
}
#sec-img#sec-img .jm-gal-it:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
/* 结果操作按钮（下载/再次生成/变体…）：玻璃胶囊化 */
#sec-img#sec-img .jm-act {
  border-radius: 999px;
  transition:
    transform .45s var(--rv-bezier),
    background .45s var(--rv-bezier),
    border-color .45s var(--rv-bezier),
    box-shadow .45s var(--rv-bezier);
}
#sec-img#sec-img .jm-act:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 92, 255, .45);
  background: rgba(124, 92, 255, .08);
}
#sec-img#sec-img .jm-act:active { transform: scale(.95); }

/* ---- §C7 空状态与进度：星标呼吸 + shimmer 流光 ---- */
@keyframes rvPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}
#sec-img#sec-img .res-empty::before,
#sec-videogen#sec-videogen .res-empty::before {
  animation: rvPulse 2.6s ease-in-out infinite;
}
@keyframes rvShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
#sec-videogen#sec-videogen .vg-prog-bar i {
  background-image: linear-gradient(90deg,
    rgba(124, 92, 255, .9), rgba(180, 160, 255, .95), rgba(124, 92, 255, .9));
  background-size: 200% 100%;
  animation: rvShimmer 1.6s linear infinite;
}
#sec-videogen#sec-videogen .vg-prog-bar {
  border-radius: 999px;
  overflow: hidden;
}

/* ---- §C8 滑杆（重绘强度）：品牌化 thumb ---- */
#sec-img#sec-img input[type="range"] {
  accent-color: #7c5cff;
  height: 4px;
}
#sec-img#sec-img input[type="range"]::-webkit-slider-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7c5cff;
  box-shadow: 0 2px 8px rgba(124, 92, 255, .45);
  cursor: grab;
  transition: transform .3s var(--rv-bezier);
}
#sec-img#sec-img input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
#sec-img#sec-img input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }

/* ---- §C9 高级设置折叠（details.jm-adv）：悬浮亮起 + 展开态品牌线 ---- */
#sec-img#sec-img .jm-adv {
  transition: border-color .5s var(--rv-bezier), background .5s var(--rv-bezier);
}
#sec-img#sec-img .jm-adv:hover { border-color: var(--line2); }
#sec-img#sec-img .jm-adv[open] {
  border-color: rgba(124, 92, 255, .4);
  background: rgba(124, 92, 255, .04);
}
#sec-img#sec-img .jm-adv summary { cursor: pointer; list-style: none; }
#sec-img#sec-img .jm-adv summary::-webkit-details-marker { display: none; }
#sec-img#sec-img .jm-adv-chev { transition: transform .45s var(--rv-bezier); display: inline-block; }
#sec-img#sec-img .jm-adv[open] .jm-adv-chev { transform: rotate(180deg); }

/* ---- §C10 弹出面板（模型选择 jm-pop / 模板 vgTplHost）：入场编排 ---- */
#sec-img#sec-img .jm-pop,
#sec-videogen#sec-videogen .vg-preset-wrap {
  animation: rvPopIn .5s var(--rv-bezier) both;
}
@keyframes rvPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #sec-img#sec-img .jm-pop, #sec-videogen#sec-videogen .vg-preset-wrap { animation: none; }
  #sec-img#sec-img .res-empty::before, #sec-videogen#sec-videogen .res-empty::before { animation: none; }
  #sec-videogen#sec-videogen .vg-prog-bar i { animation: none; }
}