/* ============================================================
 * 实景爆款 · 深色主题覆盖层 v2
 * 严格对齐「AI漫剧生产系统」(/var/www/hermes-moyin/style.css)
 *
 * 加载顺序：style.css → m1.css → m1-dark.css（本文件最后）
 * → 只影响 m1.html；旧版一步式 index.html 不受任何影响
 * → 还原：删掉 m1.html 里对本文件的 <link> 即可（零残留）
 *
 * v2 修复（用户反馈「颜色很不搭」）：
 *   ① style.css 里写死的橙色阴影 rgba(255,107,53,…) 全部覆盖
 *   ② 面板改成短剧同款：渐变底 + 顶部彩条 + 内高光
 *   ③ 品牌字用短剧同款「粉→红→紫」渐变
 * ============================================================ */

/* ── ① 变量换肤（覆盖 style.css :root） ── */
:root{
  color-scheme:dark;
  --primary:#e94560;
  --primary-dark:#c7304a;
  --ink:#e8eeff;
  --ink-soft:#93a4c8;
  --bg:#0b1020;
  --bg-2:#121a2e;
  --card:#16203a;
  --panel-2:#1b2743;
  --line:#2a3a5c;
  --line-2:#3a4d73;
  --dim:#6b7fa6;
  --muted:#93a4c8;
  --brand:#e94560;
  --brand-2:#7c3aed;
  --blue:#3b82f6;
  --accent:#22d3ee;
  --gold:#fbbf24;
  --ok:#10b981;
  --err:#ef4444;
  --warn:#fbbf24;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 8px 24px rgba(0,0,0,.28);
  /* 深色派生色（半透明铺底） */
  --tint-primary:rgba(233,69,96,.14);
  --tint-primary-b:rgba(233,69,96,.38);
  --tint-brand2:rgba(124,58,237,.18);
  --tint-brand2-b:rgba(124,58,237,.38);
  --tint-ok:rgba(16,185,129,.13);
  --tint-warn:rgba(251,191,36,.12);
  --tint-err:rgba(239,68,68,.14);
  --soft-fill:rgba(255,255,255,.07);
  --solid-btn:rgba(58,77,115,.5);       /* 短剧同款实心灰蓝按钮底 */
  --solid-btn-h:rgba(74,95,138,.78);
  --input-fill:rgba(11,16,32,.7);       /* 短剧同款输入框底 */
}

/* ── ② 页面底色 + 红紫光晕（对齐短剧 body） ── */
html{background:var(--bg)}
body{
  background:
    radial-gradient(760px 420px at 50% -6%, rgba(124,58,237,.26), transparent 68%),
    radial-gradient(1200px 600px at 15% -10%, rgba(124,58,237,.22), transparent 62%),
    radial-gradient(900px 500px at 90% 0%, rgba(233,69,96,.17), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
}
#app{background:transparent}

/* ── ③ 顶栏 / 页签栏 ── */
/* 关键：半透明 + 模糊，让 body 的紫红光晕透上来（参照系统顶部是透光的） */
.topbar{background:rgba(11,16,32,.55);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(150%)}
.tabbar{background:rgba(11,16,32,.55);border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(150%)}
.topbar-link{background:transparent;border-color:var(--line-2);color:var(--ink-soft)}
.topbar-link:active{background:var(--soft-fill)}

/* 品牌字：短剧同款「粉 → 红 → 紫」渐变 */
.brand span:last-child{
  background:linear-gradient(92deg,#ff8fa3 0%,var(--brand) 45%,var(--brand-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}

/* 额度徽标（覆盖橙色底 → 回归红色系） */
.quota-badge{color:#ffb3c0;background:rgba(233,69,96,.08);border:1px solid rgba(233,69,96,.28)}
.quota-badge.low{color:var(--gold);background:var(--tint-warn);border-color:rgba(251,191,36,.35)}
.quota-badge.zero{color:#fff;background:var(--err);border-color:var(--err)}

/* 任务页签（覆盖 orange 阴影 → 红） */
.task-tab{background:var(--soft-fill);color:var(--ink-soft);border-color:transparent}
.task-tab.active{background:var(--primary);color:#fff;
  box-shadow:0 4px 12px rgba(233,69,96,.38)}
.task-new{border-radius:var(--radius-sm);border:none;
  background:rgba(58,77,115,.6);color:#cbd5e1;transition:background .15s ease}
.task-new:active{background:rgba(74,95,138,.8);color:#fff}

/* ── ④ 面板卡片：短剧同款（渐变底 + 顶部彩条 + 内高光） ── */
.block{
  background:linear-gradient(180deg,var(--card) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;overflow:hidden;
}
.block::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand),transparent);
  opacity:.75;
}
.block-title{color:var(--ink)}
.tip{color:var(--ink-soft)}
.step-no{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.35)}
.block-title.sub{color:var(--gold)}

/* 模板卡 / 画质卡（覆盖 orange 底 + 阴影） */
.card,.quality-opt{background:var(--bg-2);border-color:var(--line)}
.card.active,.quality-opt.active{
  border-color:var(--primary);background:rgba(233,69,96,.10);
  box-shadow:0 4px 14px rgba(233,69,96,.22)}
.card-name,.quality-name{color:var(--ink)}
.quality-opt.active .quality-name{color:var(--primary)}
.quality-sub{color:var(--ink-soft)}
.meta-pill{background:var(--soft-fill);color:var(--ink-soft)}
.meta-pill.model{color:#ff8fa3;background:var(--tint-primary)}
.skeleton-card{background:linear-gradient(90deg,#16203a 25%,#1b2743 37%,#16203a 63%);
  background-size:400% 100%}

/* 行业标签（覆盖 orange 阴影） */
.tab{background:var(--soft-fill);color:var(--ink-soft)}
.tab.active{background:var(--primary);color:#fff;
  box-shadow:0 4px 12px rgba(233,69,96,.38)}

/* ── ⑤ 表单控件（短剧同款：深底 + 紫色聚焦环） ── */
.field label{color:var(--ink)}
.sel,.chips-input,.ta,.login-input{
  background:var(--input-fill);color:var(--ink);border-color:var(--line)}
.sel:focus,.chips-input:focus,.ta:focus,.login-input:focus{
  border-color:var(--brand-2);background:rgba(11,16,32,.9);
  box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.ta::placeholder,.chips-input::placeholder,.login-input::placeholder{color:var(--dim)}
.sel option,.sel optgroup{background:#0f1729;color:#e8eeff}
.fixed-val{background:var(--soft-fill);color:var(--ink-soft);border-color:var(--line)}
.hint-text{color:var(--ink-soft)}
.hint-text.err{color:#fca5a5}

/* 选择图片大按钮 */
.pick-big{background:rgba(11,16,32,.55);border:1px dashed var(--line-2)}
.pick-big:active{background:rgba(11,16,32,.8)}
.pick-big-main{color:var(--ink)}
.pick-big-sub{color:var(--ink-soft)}

/* ── ⑥ 图片卡片 ── */
.img-card{background:var(--bg-2);border-color:var(--line)}
.img-card .im{background:rgba(11,16,32,.7)}
.img-card .idx{background:var(--primary);color:#fff}
.img-card .desc{color:var(--ink-soft)}
.img-card .desc.empty{color:var(--dim)}
.img-card .ops button{border-radius:var(--radius-sm);
  background:rgba(58,77,115,.6);border-color:var(--line-2);color:#cbd5e1}
.img-card .ops button:active{background:rgba(74,95,138,.8);color:#fff}
.img-card .ops button.del{color:#fca5a5;border-color:rgba(239,68,68,.4)}
.img-card .warn{color:var(--gold)}

/* ── ⑦ 识别描述绿框 ── */
.green-box-wrap{border-color:rgba(16,185,129,.5)}
.green-box-title{background:var(--tint-ok);color:#6ee7b7;
  border-bottom:1px solid rgba(16,185,129,.3)}
.green-box{background:rgba(11,16,32,.72);color:#a7f3d0}

/* ── ⑧ 脚本编辑 / 镜头卡片 ── */
.ta.mono{color:#cdd8f0}
.gc-text{background:rgba(11,16,32,.6);border-color:var(--line);color:var(--ink-soft)}
.version-row .vchip{background:var(--soft-fill);color:var(--ink-soft);
  border-color:transparent}
.version-row .vchip.active{background:var(--tint-primary);color:#ff8fa3;
  border-color:var(--tint-primary-b)}
.shot-card{background:rgba(11,16,32,.55);border-color:var(--line)}
.shot-card .ta{background:rgba(11,16,32,.75)}
.shot-no{background:var(--primary);color:#fff}
.shot-hint,.shot-refs-none{color:var(--dim)}
.shot-ref-bad{color:#fca5a5;background:var(--tint-err);border-color:rgba(239,68,68,.4)}
.shot-ref-chip{background:rgba(11,16,32,.7);border-color:var(--line-2)}
.shot-ref-no{color:#ff8fa3}

/* ── ⑨ 参考图条 ── */
.ref-item{background:rgba(11,16,32,.7);border:1px solid var(--line-2)}
.ref-item .badge-no{background:var(--primary);color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4)}
.ref-strip .none{color:var(--dim)}

/* ── ⑩ 参考音频 ── */
.audio-block{border-top:1px solid var(--line)}
.audio-head{color:var(--ink)}
.audio-preview-meta,.audio-time,.audio-meta{color:var(--ink-soft)}
.audio-tip{color:rgba(251,191,36,.78)}
.audio-warn{color:var(--gold);background:var(--tint-warn);
  border-color:rgba(251,191,36,.35)}
.audio-preview{background:rgba(11,16,32,.6);border-color:var(--line)}
.btn-outline{border-radius:var(--radius-sm);
  background:rgba(58,77,115,.6);color:#cbd5e1;border:1px solid var(--line-2)}
.btn-outline:active{background:rgba(74,95,138,.8);color:#fff}
.btn-outline:disabled{opacity:.55;border-color:var(--line);color:var(--dim)}
/* 🔴 关键：覆盖 style.css 里写死的橙色阴影；红色收敛到品牌红系 */
.btn-rec{border-radius:var(--radius-sm);
  background:rgba(233,69,96,.13);color:#ff9aad;
  border:1px solid rgba(233,69,96,.5);box-shadow:none}
.btn-rec:active{background:rgba(233,69,96,.24);color:#fff}

/* ── ⑪ 弹窗：录音 / 素材库 ── */
.rec-card,.lib-card{background:var(--card);border:1px solid var(--line);
  box-shadow:0 16px 48px rgba(0,0,0,.6)}
.rec-title,.rec-timer{color:var(--ink)}
.rec-sub{color:var(--ink-soft)}
/* 录音大圆钮：红→深红，去掉橙色 */
.rec-btn{background:linear-gradient(160deg,var(--brand),var(--primary-dark));
  box-shadow:0 8px 22px rgba(233,69,96,.4)}
.rec-level{background:var(--soft-fill)}
.lib-head{border-bottom:1px solid var(--line);color:var(--ink)}
.lib-close{color:var(--ink-soft)}
.lib-item{background:rgba(11,16,32,.55);border-color:var(--line)}
.lib-item:active{background:var(--panel-2)}
.lib-item.active{border-color:var(--primary);background:var(--tint-primary)}
.lib-item .li-no{background:var(--primary);color:#fff}
.lib-item .li-meta{color:var(--ink-soft)}
.lib-list .empty{color:var(--dim)}

/* 覆盖 m1.css 的橙色 pulse 动画 */
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(233,69,96,.5)}
  70%{box-shadow:0 0 0 18px rgba(233,69,96,0)}
  100%{box-shadow:0 0 0 0 rgba(233,69,96,0)}
}

/* ── ⑫ chips ── */
.chip{background:var(--tint-primary);color:#ff8fa3;
  border:1px solid var(--tint-primary-b)}
.chips-input{background:var(--input-fill)}
.chips-input:focus{background:rgba(11,16,32,.9)}

/* ── ⑬ 按钮：严格对齐短剧系统 ──
 * 差异对照（用户反馈「主要是按钮的颜色跟风格」）：
 *   形状：药丸 999px → 圆角矩形 8px（短剧 button 用 --radius-sm）
 *   字号：16px/700 又大又粗 → 13.5px/600 精致
 *   次按钮：描边空心 → 实心灰蓝 rgba(58,77,115,.6)（短剧 #btn-clear）
 *   主按钮：红渐变 + 红辉光（短剧 #btn-script）
 */

/* 主按钮：红渐变 + 红辉光 */
.btn-primary{
  border-radius:var(--radius-sm);
  padding:10px 18px;font-size:13.5px;font-weight:600;
  background:linear-gradient(135deg,var(--brand) 0%,#c7324b 100%);
  color:#fff;box-shadow:0 4px 14px rgba(233,69,96,.30);
  transition:filter .2s ease,box-shadow .2s ease,transform .12s ease}
.btn-primary:active{filter:brightness(1.08);transform:translateY(1px)}
.btn-primary:disabled{background:#3a4d73;color:#cbd5e1;box-shadow:none;
  opacity:.75;cursor:not-allowed;filter:none;transform:none}
/* slim 变体（步骤内按钮）也统一 8px */
.btn-primary.slim{border-radius:var(--radius-sm);padding:9px 18px;font-size:13px}

/* 次按钮：短剧同款实心灰蓝 */
.btn-ghost{
  border-radius:var(--radius-sm);border:none;
  padding:8px 14px;font-size:13px;font-weight:600;
  background:rgba(58,77,115,.6);color:#cbd5e1;
  transition:background .15s ease,color .15s ease}
.btn-ghost:active{background:rgba(74,95,138,.8);color:#fff}
.btn-ghost.tiny{border-radius:var(--radius-sm);padding:5px 10px;font-size:12px}
.btn-ghost.danger{border-color:rgba(239,68,68,.5);color:#fca5a5}
.btn-ghost.danger:active{background:var(--tint-err);color:#fff}

/* ── ⑭ 预览 / 成片 ── */
.preview-empty{background:rgba(11,16,32,.6);color:var(--dim)}
.prompt-box{background:rgba(11,16,32,.8);border-color:var(--line);
  border-left:2px solid var(--accent)}
.prompt-box summary{color:var(--accent)}
.prompt-box summary:hover{color:#67e8f9}
.prompt-box pre{color:#9fb2d4}
.m1-video{background:#000}
.video-wrap .btn-ghost{text-decoration:none}
.badge{color:var(--ink-soft)}
.badge b{color:var(--ink)}

/* ── ⑮ 底部栏 ── */
.bottom-bar{background:rgba(11,16,32,.94);border-top:1px solid var(--line);
  backdrop-filter:blur(10px)}
.cost{color:var(--ink-soft)}
.cost b{color:var(--primary)}

/* ── ⑯ 登录遮罩 ── */
.overlay{background:
    radial-gradient(900px 500px at 20% 0%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(700px 400px at 85% 10%, rgba(233,69,96,.20), transparent 55%),
    var(--bg)}
/* 关键：覆盖橙色阴影 rgba(255,107,53,.15) */
.login-card{background:linear-gradient(180deg,var(--card) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);box-shadow:0 16px 48px rgba(0,0,0,.6)}
.login-title{color:var(--ink);
  background:linear-gradient(92deg,#ff8fa3 0%,var(--brand) 45%,var(--brand-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.login-sub{color:var(--ink-soft)}
.login-err{color:#fca5a5}

/* ── ⑰ Toast ── */
.toast{background:rgba(22,32,58,.97);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 8px 28px rgba(0,0,0,.45)}
.toast.err{background:rgba(239,68,68,.97);border-color:transparent}
.toast.ok{background:rgba(16,185,129,.97);border-color:transparent}

/* ── ⑱ 空态 ── */
.no-task{color:var(--ink-soft)}

/* ── ⑲ 滚动条（短剧同款） ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(11,16,32,.5)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#5570a3}

/* ============================================================
 * ⑳ 全局排版 / 形状系统对齐短剧系统（v5）
 * ------------------------------------------------------------
 * 依据：对 drama.shadedegree.com 逐组件取 getComputedStyle 比对
 *   body           15px        → 14px（短剧基准字号）
 *   .block-title   13px        → 15px/700（短剧 .card h2）
 *   .tip           11px        → 12px
 *   内层组件圆角   10~12px     → 8px（短剧 .card-inner/.thumb/.preview/.img-btn 均 8px）
 *   输入类内边距   9px 10px    → 12px 14px（短剧 textarea 13px 14px）
 *   面板圆角       12px        → 10px（短剧 .card 移动端 10px）
 *   弹窗圆角       16~18px     → 12px（短剧 .style-modal-box）
 * ============================================================ */

html{-webkit-text-size-adjust:100%}
body{font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}

/* ── 面板 ── */
.block{border-radius:10px;padding:16px}
.block-title{font-size:15px;font-weight:700}
.block-title.sub{font-size:13px}
.tip{font-size:12px;line-height:1.6}

/* ── 输入类：圆角 8px + 舒适内边距 ── */
.sel,.fixed-val,.chips-input,.login-input{
  border-radius:8px;padding:12px 14px;font-size:14px}
.ta{border-radius:8px}
.shot-card .ta{border-radius:8px}
.chips-input:focus,.ta:focus{padding:12px 14px}

/* ── 内层组件圆角统一 8px ── */
.pick-big{border-radius:10px;padding:22px 16px}
.pick-big-main{font-size:15px;font-weight:600}
.pick-big-sub{font-size:12.5px}
.img-card{border-radius:8px}
.img-card .im{border-radius:6px}
.green-box-wrap{border-radius:8px}
.shot-card{border-radius:8px}
.ref-item{border-radius:8px}
.shot-ref-chip{border-radius:6px}
.audio-preview{border-radius:8px}
.prompt-box{border-radius:8px}
.preview-empty{border-radius:10px}

/* ── 弹窗圆角 12px（对齐短剧 .style-modal-box） ── */
.rec-card,.lib-card{border-radius:12px}

/* ── 小字排版 ── */
.field label{font-size:12.5px;font-weight:600}
.hint-text{font-size:12px;line-height:1.6}
.meta-pill,.quality-sub{font-size:11.5px}

/* ============================================================
 * ㉑ 顶栏对齐短剧 .header（v6）
 * ------------------------------------------------------------
 * 短剧 .header：居中 + h1 20px/800 渐变字 + .subtitle 12px/字距1px
 *              + ::after 2px 居中渐变下划线（transparent→brand→transparent）
 * 改造：顶栏从「左 LOGO App 条」→「居中标题 + 副标题 + 渐变下划线」
 *      额度徽标改绝对定位右上角；顶栏不再 sticky，改由页签栏吸顶
 * ============================================================ */
.topbar{
  position:relative;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:24px 16px 20px;text-align:center;
  background:transparent;border-bottom:1px solid var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.topbar::after{
  content:'';position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:120px;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.topbar .brand{font-size:20px;font-weight:800;letter-spacing:.5px;gap:6px}
.topbar .brand .logo{font-size:20px}
/* 渐变字（对齐短剧 h1） */
.topbar .brand span:last-child{
  background:linear-gradient(92deg,#ff7a90 0%,var(--brand) 40%,var(--brand-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--brand);
}
.brand-sub{font-size:12px;letter-spacing:1px;color:var(--ink-soft);font-weight:400}
/* 额度徽标：绝对定位右上角，不挤标题 */
.topbar .topbar-right{position:absolute;top:12px;right:12px}
.topbar .quota-badge{font-size:12px;padding:4px 10px}
/* 页签栏接管吸顶 */
.tabbar{top:0;background:rgba(11,16,32,.82);backdrop-filter:blur(14px) saturate(150%)}

/* ============================================================
 * ①b 功能工具栏（三大产品线：实景爆款 / 长视频 / 产品广告）
 * 位置：顶栏标题下方、任务页签上方；吸顶时与页签栏同底色
 * ============================================================ */
.feature-bar{
  display:flex;gap:6px;padding:8px 16px 0;background:transparent;
  position:relative;z-index:20;border-bottom:1px solid var(--line);
}
.feature-item{
  flex:1;min-width:0;appearance:none;border:1px solid var(--line);
  background:rgba(58,77,115,.28);color:var(--ink-soft);
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.3px;
  padding:8px 6px;border-radius:var(--radius-sm);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feature-item:active{background:rgba(74,95,138,.5)}
.feature-item.active{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  box-shadow:0 4px 12px rgba(233,69,96,.35);
}
.feature-item.dim{opacity:.45}
.feature-item .soon{
  font-size:10px;font-weight:700;opacity:.75;margin-left:4px;
  border:1px solid currentColor;border-radius:6px;padding:0 4px;
}

/* 功能线信息条（时长/功能名提示） */
.feat-meta{
  display:inline-flex;align-items:center;gap:6px;margin:-4px 0 10px;
  font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--ink-soft);
  background:rgba(58,77,115,.28);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;
}
.feat-meta:empty{display:none}