/* ==========================================================================
   灵拓智能AI剪辑 —— 界面样式
   深色专业风，适合卖给客户：不像工具，像个产品
   ========================================================================== */
:root {
  --bg: #f6f4fb;
  --bg-1: #ffffff;
  --bg-2: #fbf9ff;
  --bg-3: #f1edfa;
  --line: rgba(20, 16, 36, .10);
  --line-2: rgba(20, 16, 36, .18);
  --text: #14101f;
  --text-2: #5b5670;
  --text-3: #8b86a0;
  --brand: #5b3df5;
  --brand-2: #8b5cf6;
  --brand-glow: rgba(91, 61, 245, .28);
  --ok: #12a05c;
  --warn: #b57b00;
  --danger: #d92d20;
  --gold: #b57b00;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(60, 40, 120, .10);
  --font: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--brand); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 16, 36, .18); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 16, 36, .28); }

/* ------------------------------- 登录页 ------------------------------- */
#login {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(79,124,255,.22), transparent 60%),
              radial-gradient(900px 500px at 100% 110%, rgba(124,92,255,.18), transparent 55%),
              var(--bg);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(251, 249, 255, .96));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-logo .mark {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-weight: 800; font-size: 20px; color: #fff; box-shadow: 0 6px 18px var(--brand-glow);
}
.login-logo h1 { font-size: 20px; margin: 0; letter-spacing: .5px; }
.login-sub { color: var(--text-3); font-size: 12.5px; margin: 4px 0 24px; }

/* ------------------------------- 布局 ------------------------------- */
#app { display: none; height: 100vh; grid-template-columns: 232px 1fr; }
#app.on { display: grid; }

.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overltflow: hidden;
}
.brand {
  padding: 18px 16px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line);
}
.brand .mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  font-weight: 800; color: #fff; font-size: 16px; flex: none;
}
.brand .t { line-height: 1.25; min-width: 0; }
.brand .t b { display: block; font-size: 14.5px; letter-spacing: .3px; white-space: nowrap; }
.brand .t span { font-size: 11px; color: var(--text-3); }

.nav { flex: 1; overltflow-y: auto; padding: 10px 8px 20px; }
.nav-group { font-size: 11px; color: var(--text-3); padding: 14px 10px 6px; letter-spacing: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); cursor: pointer; user-select: none;
  border: 1px solid transparent; transition: .15s;
  font-size: 13.5px;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item.on {
  background: linear-gradient(90deg, rgba(79,124,255,.18), rgba(79,124,255,.04));
  color: #fff; border-color: rgba(79,124,255,.35);
}
.nav-item .ico { width: 18px; text-align: center; font-size: 15px; flex: none; }
.nav-item .badge {
  margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: var(--bg-3); color: var(--text-3); border: 1px solid var(--line);
}
.nav-item .badge.new { background: rgba(46,194,126,.15); color: var(--ok); border-color: rgba(46,194,126,.3); }

.sidebar-foot { border-top: 1px solid var(--line); padding: 11px 14px 13px; font-size: 12px; color: var(--text-3); }
/* 用堆叠布局，避免状态文字和版本号挤在一起重叠 */
.sidebar-foot .row { display: block; }
.sidebar-foot .row > span { display: flex; align-items: center; min-width: 0; }
.sidebar-foot .row > span:first-child { margin-bottom: 3px; }
.sidebar-foot #foot-status { white-space: nowrap; overltflow: hidden; text-overltflow: ellipsis; }
.sidebar-foot #foot-version { color: #4d5568; font-size: 11px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(46,194,126,.7); }
.dot.demo { background: var(--warn); box-shadow: 0 0 8px rgba(242,163,60,.6); }

/* ------------------------------- 主区域 ------------------------------- */
.main { display: flex; flex-direction: column; overltflow: hidden; background: var(--bg); }
.topbar {
  height: 58px; flex: none; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
}
.topbar h2 { margin: 0; font-size: 16px; font-weight: 600; }
.topbar .desc { color: var(--text-3); font-size: 12px; }
.topbar .spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
}
.chip.gold { color: var(--gold); border-color: rgba(232,195,122,.35); background: rgba(232,195,122,.08); }
.chip.ok { color: var(--ok); border-color: rgba(46,194,126,.3); background: rgba(46,194,126,.08); }
.chip.warn { color: var(--warn); border-color: rgba(242,163,60,.3); background: rgba(242,163,60,.08); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-weight: 700; font-size: 13px; color: #fff;
  cursor: pointer;
}

.content { flex: 1; overltflow-y: auto; padding: 22px 24px 60px; }
.panel { display: none; max-width: 1180px; margin: 0 auto; }
.panel.on { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------- 卡片与表单 ------------------------------- */
.card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px;
}
.card.tight { padding: 14px; }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.card-title .step {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--bg-3); border: 1px solid var(--line-2); font-size: 11px; color: var(--text-2); flex: none;
}
.card-sub { color: var(--text-3); font-size: 12.5px; margin: 0 0 14px; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #app.on { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 100; width: 232px; height: 100vh; transform: translateX(-100%); transition: .2s; }
  .sidebar.open { transform: none; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .content { padding: 14px; }

  /**
   * ══════════════════════════════════════════════════════════
   * 手机端顶栏要**收起来**，不能横向硬挤
   *
   *   截图里发现的问题（393px 宽）：
   *     · 标题「工作台」被切成两半（上半截看不见）
   *     · 「剩余不限」竖成一条，一个字一行
   *     · 「今日已用 77」也挤成两行
   *
   *   根因：顶栏是 `display:flex` 横排，里面塞了
   *   标题 + 描述 + 两个 chip + 头像。393px 放不下，
   *   于是每个元素都被压扁，文字只能竖着换行。
   *
   *   修法：
   *     ① 高度改成自适应（原来写死 58px，文字换行就溢出了）
   *     ② 两个 chip 在手机上**隐藏** —— 它们只是提示信息，
   *        首页的大数字卡片里已经有同样的数据了
   *     ③ 标题和描述允许换行、不裁切
   */
  .topbar {
    height: auto; min-height: 58px;
    padding: 8px 14px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  /**
   * ⚠️ 这里**必须用专门的类名**，不能写 `.topbar > div`。
   *
   *   我第一版写的是 `.topbar > div { min-width: 0; flex: 1; }` ——
   *   想让标题那块能收缩，结果**误伤了头像**：
   *   头像 `<div class="avatar">` 也是 `.topbar` 的直接子 div，
   *   于是它被设成 `flex: 1 1 0%`，宽度从 30px 被拉成 98px，
   *   在 393px 的手机上变成一整条紫色胶囊。
   *
   *   诊断证据（浏览器 computed style）：
   *     flex: "1 1 0%"     ← 根本不是我写的 flex:none
   *
   *   教训：`.parent > tag` 这种选择器很容易误伤同层的其它元素，
   *        用类名精确指定最安全。
   */
  .topbar-text { min-width: 0; flex: 1; }
  .topbar h2 { font-size: 15px; line-height: 1.3; }
  .topbar .desc {
    font-size: 11.5px; line-height: 1.4;
    /* 描述最多显示两行，超出省略 —— 不要让它把顶栏撑高 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overltflow: hidden;
  }
  /* 这两个只是提示，手机上隐藏（首页卡片里有同样的数据） */
  #chip-credits, #chip-today { display: none; }

  /**
   * ⚠️ 头像必须写 `flex: none`（或者 min-width）。
   *
   *   截图里发现：`.avatar` 只写了 `width: 32px`，
   *   在 flex 容器里它被**拉伸成了一整条胶囊**，占了半个顶栏。
   *   因为 flex 项的 `flex-shrink` 默认是 1，但这里是被
   *   `align-items: center` + 没有 `flex: none` 导致的宽度被撑开。
   *
   *   手机顶栏本来就窄，这个 bug 会把标题挤掉。
   */
  .avatar { width: 30px; height: 30px; min-width: 30px; flex: none; font-size: 12px; }

  /**
   * 手机端的汉堡菜单按钮。
   *
   * ⚠️ 必须给足点击区域 —— 苹果的人机界面指南建议 ≥44px，
   *    安卓建议 ≥48dp。原来是 32px 高，手指点上去很容易点偏。
   *    而这是手机上**唯一**能打开菜单的入口，点不中就等于功能不可用。
   */
  #menu-btn {
    min-width: 42px; min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 19px; line-height: 1;
    flex: none;
  }
}

label.f { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
label.f .hint { color: var(--text-3); font-size: 11.5px; font-weight: 400; }
input[type=text], input[type=password], input[type=number], input[type=url], select, textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 11px; outline: none; transition: .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,124,255,.14); }
textarea { resize: vertical; min-height: 90px; line-height: 1.7; }
select { cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--brand); }
input[type=file] { width: 100%; font-size: 12.5px; color: var(--text-2); }
input[type=file]::file-selector-button {
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text);
  padding: 6px 12px; border-radius: 8px; margin-right: 10px; cursor: pointer;
}
.field { margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text);
  transition: .15s; white-space: nowrap; user-select: none;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-2, var(--line)); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none; color: #fff; font-weight: 600;
  box-shadow: 0 6px 18px rgba(79,124,255,.28);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: #ffb4af; border-color: rgba(242,86,77,.4); background: rgba(242,86,77,.08); }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* 标签选择 */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab {
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
}
.tab:hover { color: var(--text); }
.tab.on { background: rgba(79,124,255,.16); border-color: rgba(79,124,255,.45); color: #fff; }

.picks { display: flex; gap: 8px; flex-wrap: wrap; }
.pick {
  padding: 7px 13px; border-radius: 10px; cursor: pointer; font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
}
.pick:hover { border-color: var(--line-2); color: var(--text); }
.pick.on { background: rgba(79,124,255,.16); border-color: rgba(79,124,255,.5); color: #fff; }

/* 提示条 */
.alert {
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2);
  display: flex; gap: 9px; align-items: flex-start; line-height: 1.7;
}
.alert.warn { border-color: rgba(242,163,60,.35); background: rgba(242,163,60,.08); color: #f4c67e; }
.alert.ok { border-color: rgba(46,194,126,.32); background: rgba(46,194,126,.08); color: #7fdcae; }
.alert.err { border-color: rgba(242,86,77,.35); background: rgba(242,86,77,.08); color: #ffb0aa; }
.alert .ico { flex: none; }
.alert a { color: inherit; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
 * 模块间"交接"横幅
 *
 * 客户从上一步跳过来时，页面顶部显示"收到了什么"。
 * 目的是让客户**放心** —— 看得到数据真的传过来了，
 * 才不会再去手动复制一遍。
 * ═══════════════════════════════════════════════════════════ */
.handoff-banner {
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid rgba(79, 124, 255, .38);
  background: linear-gradient(180deg, rgba(79, 124, 255, .10), rgba(79, 124, 255, .04));
  font-size: 12.5px;
  line-height: 1.7;
}
.handoff-banner .hb-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
}
.handoff-banner .hb-badge {
  flex: none;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
}
.handoff-banner .hb-title { color: var(--text); font-weight: 600; }
.handoff-banner .hb-close {
  flex: none; background: none; border: none; cursor: pointer;
  color: var(--text-3, #8a93a6); font-size: 14px; padding: 0 4px; line-height: 1;
}
.handoff-banner .hb-close:hover { color: var(--text); }
.handoff-banner .hb-line {
  color: var(--text-2); padding: 3px 0;
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
}
.handoff-banner .hb-line b { color: var(--text); flex: none; min-width: 34px; }
.handoff-banner .hb-preview {
  width: 100%;
  margin-top: 3px;
  padding: 6px 9px;
  border-radius: 6px;
  background: rgba(20, 16, 36, .06);
  color: var(--text-3, #9aa3b5);
  font-size: 12px;
  line-height: 1.6;
  max-height: 52px; overltflow: hidden;
}
.handoff-banner .hb-tip { color: #9fc0ff; }

/* "下一步"按钮组 */
.handoff-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 14px;
  padding-top: 13px; border-top: 1px dashed var(--line);
}
.handoff-row .handoff-label {
  font-size: 12.5px; color: var(--text-3, #8a93a6); flex: none;
}

/* 超小按钮（素材卡片上用） */
.btn.xs { padding: 3px 8px; font-size: 11px; border-radius: 6px; gap: 4px; }

/* 素材卡片底部的"拿去 XX"快捷按钮 */
.mat .mat-go {
  display: flex; gap: 5px; padding: 0 10px 6px;
}

/* 结果区 */
.out {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; line-height: 1.85; max-height: 460px; overltflow: auto; min-height: 60px;
}
.out.mono { font-family: var(--mono); font-size: 12.5px; }
.out:empty::before { content: "结果会显示在这里"; color: var(--text-3); font-size: 12.5px; }

.kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; font-size: 13px; }
.kv .k { color: var(--text-3); }
.kv .v { color: var(--text); word-break: break-word; }

/* 版本卡片 */
.ver {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px;
  background: var(--bg-2); margin-bottom: 10px;
}
.ver .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ver .head .angle {
  font-size: 11.5px; padding: 2px 8px; border-radius: 6px;
  background: rgba(79,124,255,.15); color: #a8c0ff; border: 1px solid rgba(79,124,255,.3);
}
.ver .head b { font-size: 14px; }
.ver .body { white-space: pre-wrap; line-height: 1.85; font-size: 13.5px; }
.ver .foot { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 风险展示 */
.score-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.score-ring {
  width: 108px; height: 108px; border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--ok) 0deg, var(--bg-3) 0deg);
}
.score-ring::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg-1);
}
.score-ring .num { position: relative; font-size: 27px; font-weight: 700; }
.score-ring .num small { font-size: 11px; color: var(--text-3); display: block; text-align: center; font-weight: 400; }

.hit {
  border-left: 3px solid var(--warn); background: var(--bg-2);
  padding: 9px 12px; border-radius: 0 8px 8px 0; margin-bottom: 8px; font-size: 13px;
}
.hit.high { border-left-color: var(--danger); }
.hit.mid { border-left-color: var(--warn); }
.hit.low { border-left-color: var(--brand); }
.hit .t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.hit .word { font-family: var(--mono); background: rgba(242,86,77,.14); color: #ffb0aa; padding: 1px 6px; border-radius: 5px; }
.hit .ctx { color: var(--text-3); font-size: 12px; }
.sev { font-size: 11px; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--text-2); }
.sev.high { color: #ffb0aa; border-color: rgba(242,86,77,.4); background: rgba(242,86,77,.1); }
.sev.mid { color: #f4c67e; border-color: rgba(242,163,60,.4); background: rgba(242,163,60,.1); }
.sev.low { color: #a8c0ff; border-color: rgba(79,124,255,.4); background: rgba(79,124,255,.1); }

.issue { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 9px; background: var(--bg-2); }
.issue .orig { font-family: var(--mono); font-size: 12.5px; color: #ffb0aa; background: rgba(242,86,77,.08); padding: 6px 9px; border-radius: 6px; margin: 7px 0; }
.issue .fix { font-size: 13px; color: #9fe0bd; background: rgba(46,194,126,.07); padding: 7px 9px; border-radius: 6px; margin-top: 6px; }

/* 素材网格 */
.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mat {
  border: 1px solid var(--line); border-radius: var(--radius-sm); overltflow: hidden;
  background: var(--bg-2); position: relative;
}
.mat .thumb { height: 104px; background: var(--bg-3); display: grid; place-items: center; overltflow: hidden; }
.mat .thumb img, .mat .thumb video { width: 100%; height: 100%; object-fit: cover; }
.mat .thumb .ph { font-size: 30px; opacity: .45; }
.mat .meta { padding: 8px 10px; font-size: 11.5px; color: var(--text-3); }
.mat .meta b { display: block; color: var(--text); font-size: 12.5px; font-weight: 500; white-space: nowrap; overltflow: hidden; text-overltflow: ellipsis; margin-bottom: 2px; }
.mat .act { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: .15s; }
.mat:hover .act { opacity: 1; }
.mat .act button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line-2);
  background: rgba(91, 61, 245, .85); color: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}
.mat .tagline { padding: 0 10px 8px; display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: var(--bg-3); color: var(--text-3); border: 1px solid var(--line); }

/* 上传拖拽区 */
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  padding: 26px 18px; text-align: center; color: var(--text-3);
  background: var(--bg-2); cursor: pointer; transition: .15s;
}
.drop:hover, .drop.over { border-color: var(--brand); background: rgba(79,124,255,.07); color: var(--text-2); }
.drop b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.drop .ico { font-size: 26px; margin-bottom: 6px; }

/* 进度条 */
.bar { height: 5px; background: var(--bg-3); border-radius: 3px; overltflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); width: 0; transition: width .3s; }

/* ---------------------------- 一键成片 ---------------------------- */
/* 进度条比通用的粗一点：这个页面用户要盯着看 1-2 分钟，细线看不清 */
.oc-bar { height: 9px; background: var(--bg-3); border-radius: 5px; overltflow: hidden; }
.oc-bar-fill {
  height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .5s ease;
  /* 走动时的条纹，让"卡在某个百分比"和"还在跑"一眼能区分 */
  background-size: 200% 100%;
  animation: oc-ltflow 1.6s linear infinite;
}
@keyframes oc-ltflow { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* 阶段清单：已完成 ✓ / 进行中 ◐ / 未开始 ○ */
.oc-stage {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 13px; color: var(--text-3);
  transition: color .2s;
}
.oc-stage-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; border: 1px solid var(--line-2); flex: none;
}
.oc-stage.ok { color: var(--text-2); }
.oc-stage.ok .oc-stage-ico { color: var(--ok); border-color: rgba(46,194,126,.45); background: rgba(46,194,126,.1); }
.oc-stage.now { color: var(--text); font-weight: 600; }
.oc-stage.now .oc-stage-ico { color: var(--brand); border-color: var(--brand); background: rgba(79,124,255,.12); }

/* 成片结果里的文案块 */
.oc-script {
  white-space: pre-wrap; line-height: 1.85; font-size: 13.5px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 14px; max-height: 340px; overltflow: auto;
}
.oc-titles { margin: 10px 0 0; padding-left: 20px; line-height: 2; font-size: 13.5px; }
.oc-titles li { margin-bottom: 2px; }

/* 大按钮（一键成片的主操作） */
.btn.lg { padding: 12px 26px; font-size: 15px; font-weight: 600; }

/* 拖拽高亮 —— 通用 .drop 用的是 .over，这里统一一下，省得两边不一致 */
.drop.on { border-color: var(--brand); background: rgba(79,124,255,.07); color: var(--text-2); }


/* 表格 */
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th, table.tb td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tb th { color: var(--text-3); font-weight: 500; font-size: 12px; }
table.tb tr:hover td { background: rgba(255,255,255,.018); }
table.tb td.num { font-family: var(--mono); }

/* 统计块 */
.stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; }
.stat .n { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.stat .l { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.stat .s { font-size: 11.5px; margin-top: 7px; color: var(--text-3); }

/* 首页功能卡 */
.feat {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; cursor: pointer; transition: .16s; position: relative; overltflow: hidden;
}
.feat:hover { border-color: rgba(79,124,255,.45); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(91, 61, 245, .18); }
.feat .ico { font-size: 20px; margin-bottom: 8px; }
.feat b { display: block; font-size: 14px; margin-bottom: 3px; }
.feat span { color: var(--text-3); font-size: 12px; line-height: 1.55; display: block; }
.feat .go { position: absolute; right: 14px; top: 14px; color: var(--text-3); font-size: 13px; }

/* 空状态 */
.empty { text-align: center; color: var(--text-3); padding: 34px 16px; font-size: 13px; }
.empty .ico { font-size: 34px; opacity: .5; margin-bottom: 8px; }

/* 提示 toast */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 400; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.toast {
  background: var(--bg-3); border: 1px solid var(--line-2); border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; max-width: 360px;
  box-shadow: var(--shadow); animation: slide .2s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* 弹窗 */
#modal { position: fixed; inset: 0; z-index: 300; background: rgba(20, 16, 36, .45); display: none; padding: 30px 18px; overltflow: auto; }
#modal.on { display: block; }
.modal-box {
  max-width: 920px; margin: 0 auto; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.modal-head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.modal-head b { font-size: 15px; }
.modal-head .x { margin-left: auto; cursor: pointer; color: var(--text-3); font-size: 19px; line-height: 1; padding: 0 4px; }
.modal-head .x:hover { color: var(--text); }
.modal-body { padding: 18px 20px 24px; }

/* 加载动画 */
.spin {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 流式光标 */
.typing::after { content: "▍"; animation: blink 1s steps(2) infinite; color: var(--brand); }
@keyframes blink { 50% { opacity: 0; } }

/* 结果工具条 */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.counter { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }

.hr { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb0 { margin-bottom: 0; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ==========================================================================
   语音引擎选择器（设置页 → 语音引擎）
   让客户选"本地还是线上"。做成可点卡片，比下拉框更能说清差别。
   ========================================================================== */
.vm-list { display: grid; gap: 8px; }

.vm-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  background: var(--bg-2);
}
.vm-item:hover { border-color: var(--brand); background: var(--bg-3); }
.vm-item:active { transform: scale(.995); }

/* 正在使用：高亮边框 + 左侧色条，一眼能看出选的是哪个 */
.vm-item.on {
  border-color: var(--brand);
  background: linear-gradient(90deg, rgba(99,102,241,.10), transparent 60%);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* 用不了：灰掉 + 禁止点击光标，但仍可读（要知道缺什么） */
.vm-item.off { opacity: .55; cursor: not-allowed; }
.vm-item.off:hover { border-color: var(--line); background: var(--bg-2); }

/* ==========================================================================
   剪辑模板选择器（自动剪辑页 → 选模板）
   横向铺开更容易比较；选中态用品牌色边框 + 左侧色条。
   ========================================================================== */
.tpl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.tpl-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  cursor: pointer;
  background: var(--bg-2);
  transition: border-color .15s, background .15s, transform .1s;
}
.tpl-item:hover { border-color: var(--brand); background: var(--bg-3); }
.tpl-item:active { transform: scale(.99); }

.tpl-item.on {
  border-color: var(--brand);
  background: linear-gradient(100deg, rgba(99,102,241,.12), transparent 65%);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ── 服务商卡片（视频对口型：选哪家云服务）──
 *
 * 用整块可点，不用单选框 —— 因为每张卡片上要显示
 * 价格、限制、申请教程、安全提示，信息量比一个 radio 大得多。
 * 选中态用左侧色条 + 渐变，和模板卡保持一致的视觉语言。
 */
.prov {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--bg-2);
  margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.prov:hover { border-color: var(--brand); background: var(--bg-3); }
.prov.on {
  border-color: var(--brand);
  background: linear-gradient(100deg, rgba(99,102,241,.12), transparent 65%);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ── 后台任务指示器 + 面板 ──
 *
 * 客户要求「切页面时工作不能消失，要继续在后台跑」。
 * 顶栏那个小标签就是用来证明"任务还活着"的 ——
 * 客户切到任何页面都能看到「⏳ 2 个任务在后台」，点开能看进度。
 */
#bg-jobs {
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  transition: border-color .15s, background .15s;
}
#bg-jobs:hover { border-color: var(--brand); background: var(--bg-3); }
#bg-jobs.warn { color: var(--warn); border-color: rgba(240,168,50,.35); }
#bg-jobs.ok { color: var(--ok); border-color: rgba(46,194,126,.35); }

.bg-panel {
  position: fixed;
  top: 58px;
  right: 18px;
  width: 360px;
  max-height: 62vh;
  overltflow-y: auto;
  z-index: 60;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(20, 16, 36, .16);
  padding: 14px 16px;
}
@media (max-width: 760px) {
  .bg-panel { left: 12px; right: 12px; width: auto; top: 54px; }
}
.bg-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.bg-task {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-3);
}
.bg-task:last-child { margin-bottom: 0; }

/* ── 文案工坊：三步合一 ──
 *
 * 三个原本独立的页面（提取 / 仿写 / 审查）合并成一页后，
 * 页面会很长。所以顶部放三个"快捷跳转"卡片，客户想改哪一步就点哪。
 *
 * 区块标题（.copy-head）用左侧色条 + 浅色背景，和卡片本身区分开，
 * 让客户一眼看出"这是新的一大步"而不是又一张普通卡片。
 */
.copy-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
@media (max-width: 900px) {
  .copy-jump { grid-template-columns: 1fr; }
}
.copy-jump-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color .15s, background .15s, transform .1s;
}
.copy-jump-item:hover { border-color: var(--brand); background: var(--bg-3); }
.copy-jump-item:active { transform: scale(.99); }
.copy-jump-item .n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), #8b5cf6);
}
.copy-jump-item .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.copy-jump-item .t b { font-size: 13px; }
.copy-jump-item .t em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-3);
  overltflow: hidden;
  text-overltflow: ellipsis;
  white-space: nowrap;
}

.copy-section { scroll-margin-top: 12px; }
.copy-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  background: linear-gradient(100deg, rgba(99,102,241,.10), transparent 70%);
}
.copy-head .ico { font-size: 20px; flex: none; }
.copy-head .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.copy-head .txt b { font-size: 15px; }
.copy-head .txt span { font-size: 12px; color: var(--text-3); }

/* ── 封面候选帧网格（标题封面生成页）──
 *
 * 为什么封面要单独一套样式、不复用素材库的 .mat：
 *   .mat 是"文件管理"的视觉（缩略图 + 文件名 + 删除按钮），
 *   而这里客户是在**挑一张好看的画面当封面**，
 *   需要的是"大图预览 + 显眼的时间点标记 + 一键下载"。
 *
 * 比例固定 9:16（竖版），保证 6 张排下来高度一致、不会参差。
 */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.cover-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overltflow: hidden;
  background: var(--bg-3);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.cover-item:hover { border-color: var(--brand); transform: translateY(-2px); }
.cover-item img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.cover-item .cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cover-item .cover-badge .chip {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(20, 16, 36, .45);
  backdrop-filter: blur(4px);
}
.cover-item .cover-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  padding: 7px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
  opacity: 0;
  transition: opacity .15s;
}
.cover-item:hover .cover-actions { opacity: 1; }
/* 触屏设备没有 hover，直接常显 —— 否则手机用户根本看不到下载按钮 */
@media (hover: none) {
  .cover-item .cover-actions { opacity: 1; }
}


/* ============================================================================
   浅色主题定点修补（2026-10-20 合并优化版时加）
   ----------------------------------------------------------------------------
   上面已经把 :root 的 21 个 token 换成浅色，绝大部分界面自动跟着变。
   这里只处理"深色主题下才成立"的写法：白色文字、纯黑遮罩、深色边框。
   ============================================================================ */

/* 深色用纯白文字的地方，浅色下要改成主文字色 */
.btn.primary, .btn.primary * { color: #fff; }        /* 主按钮底色是品牌紫，白字仍然对 */
[style*="color:#fff"], [style*="color: #fff"] { color: var(--text) !important; }

/* 输入类控件的占位符在浅色下要更淡一点 */
::placeholder { color: var(--text-3); opacity: .85; }

/* 表格斑马纹：深色靠"更亮"区分，浅色要靠"更暗" */
.tb tbody tr:hover { background: rgba(91, 61, 245, .04); }

/* 代码/等宽块在浅色下避免纯黑底 */
.mono, pre, code { color: var(--text); }
pre { background: var(--bg-2) !important; border: 1px solid var(--line); }

/* 图片/视频上的"底部压暗"渐变保留，但要更柔和，避免浅色界面里出现一条黑边 */
.cover-img::after, .preview-strip::after { background: linear-gradient(to top, rgba(20,16,36,.55), transparent); }

/* 选中的导航项：深色靠"提亮"，浅色靠"品牌色浅底" */
.nav-item.on { background: var(--bg-3); color: var(--brand); }

/* 手机侧栏在多设备上不要透出下层深色 */
@media (max-width: 760px) {
  #sidebar { background: var(--bg-1); }
}


/* ============================================================================
   创作中心首页（hero + 流程卡）—— 从我们这版搬过来
   ----------------------------------------------------------------------------
   优化版原来的首页是"数据看板 + 九宫格功能卡"，客户要的是"按顺序走完流程"，
   所以换成 hero + 6 步流程卡（步骤之间带箭头），这里补齐它需要的样式。
   ============================================================================ */

.card-title .step {
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  background: var(--bg-3); border: 1px solid var(--line-2); font-size: 11px; color: var(--text-2); flex: none;
}

.hub {
  --hub-ink: #14101f;
  --hub-ink-2: #5b5670;
  --hub-ink-3: #8b86a0;
  --hub-line: rgba(20, 16, 36, .09);
  --hub-purple: #5b3df5;
  --hub-violet: #8b5cf6;
  --hub-amber: #b57b00;
  --hub-amber-bg: #fff3d4;
  position: relative;
  padding: 34px 34px 26px;
  border-radius: 24px;
  overltflow: hidden;
  color: var(--hub-ink);
  background:
    radial-gradient(1100px 480px at 6% -12%, #ece3ff 0%, rgba(236, 227, 255, 0) 62%),
    radial-gradient(900px 460px at 94% -6%, #ffe6f2 0%, rgba(255, 230, 242, 0) 58%),
    radial-gradient(700px 400px at 60% 108%, #eef3ff 0%, rgba(238, 243, 255, 0) 60%),
    linear-gradient(180deg, #fdfbff 0%, #f8f5ff 100%);
  box-shadow: 0 26px 60px rgba(8, 6, 22, .45), inset 0 0 0 1px rgba(255, 255, 255, .7);
}

.hub::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 180px;
  background: linear-gradient(100deg, rgba(140, 92, 246, .10), rgba(255, 107, 176, .09) 55%, rgba(90, 160, 255, .08));
  filter: blur(24px); pointer-events: none;
}

.hub-st { position: absolute; pointer-events: none; user-select: none; }

.st-heart {
  right: 128px; top: 168px; font-size: 40px; color: #ffd2e6;
  text-shadow: 0 8px 20px rgba(255, 105, 170, .35); transform: rotate(-12deg);
}

.st-star {
  right: 42px; bottom: 150px; font-size: 38px; color: #fff;
  text-shadow: 0 6px 18px rgba(120, 90, 200, .28); transform: rotate(10deg);
}

.st-bubble {
  right: 40px; top: 214px; display: flex; gap: 5px; padding: 10px 12px;
  background: #fff; border-radius: 16px 16px 16px 4px;
  box-shadow: 0 10px 24px rgba(80, 60, 140, .14); transform: rotate(6deg);
}

.st-bubble i { width: 6px; height: 6px; border-radius: 50%; background: #cdc6e2; }

.st-like {
  right: 108px; top: 250px; font-size: 13px; font-weight: 700; color: #b9b2d0;
}

.hub-hero { position: relative; z-index: 1; max-width: 760px; }

.hub-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
  color: var(--hub-ink-3); text-transform: uppercase;
}

.hub-dash { width: 22px; height: 1.5px; background: var(--hub-ink-3); display: inline-block; }

.hub-h1 { margin: 14px 0 0; display: flex; flex-direction: column; gap: 2px; line-height: .96; }

.hub-ai {
  font-size: clamp(40px, 5.4vw, 66px); font-weight: 900; letter-spacing: -.035em;
  color: var(--hub-ink);
}

.hub-grad {
  font-size: clamp(38px, 5.6vw, 70px); font-weight: 900; font-style: italic;
  letter-spacing: -.03em;
  background: linear-gradient(96deg, #4c2fe0 0%, #7b4df0 46%, #b262e8 78%, #7b4df0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* 渐变字在部分浏览器裁掉末笔，补一点右边距 */
  padding-right: .08em;
}

.hub-sub {
  margin: 16px 0 0; font-size: 14px; color: var(--hub-ink-2); line-height: 1.7;
  max-width: 520px;
}

.hub-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

.hub-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px 12px 16px; border: 0; cursor: pointer;
  border-radius: 999px; background: #17121f; color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 12px 26px rgba(23, 18, 31, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}

.hub-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(23, 18, 31, .32); }

.hub-cta-ico { font-size: 9px; opacity: .85; }

.hub-cta-ar { opacity: .6; margin-left: 2px; }

.hub-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.hub-chips span {
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85);
  border: 1px solid var(--hub-line); font-size: 12px; color: var(--hub-ink-2);
  box-shadow: 0 4px 12px rgba(80, 60, 140, .06);
}

.hub-social {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
  padding: 10px 16px 10px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--hub-line);
  box-shadow: 0 8px 22px rgba(80, 60, 140, .08);
}

.hub-avatars { display: flex; }

.hub-avatars span {
  width: 28px; height: 28px; border-radius: 50%; margin-left: -8px;
  display: grid; place-items: center; font-size: 12px;
  background: linear-gradient(140deg, #efe7ff, #ffe9f4);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(80, 60, 140, .12);
}

.hub-avatars span:first-child { margin-left: 0; }

.hub-social-txt { display: flex; flex-direction: column; line-height: 1.35; }

.hub-social-txt b { font-size: 13.5px; }

.hub-social-txt span { font-size: 11.5px; color: var(--hub-ink-3); }

.hub-cards {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-top: 30px;
}

.hub-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 16px 14px; border-radius: 22px; cursor: pointer;
  background: #fff; border: 1px solid var(--hub-line);
  box-shadow: 0 10px 26px rgba(70, 50, 130, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width: 0;
}

.hub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 46px rgba(70, 50, 130, .16);
  border-color: rgba(120, 90, 220, .22);
}

.hub-card:focus-visible { outline: 2px solid var(--hub-purple); outline-offset: 3px; }

.hub-num {
  align-self: flex-start; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  background: #f1eefe; color: #4c2fe0;
}

.hub-card.hl .hub-num { background: var(--hub-amber-bg); color: var(--hub-amber); }

.hub-card.hl { border-color: rgba(230, 175, 40, .35); }

.hub-ct { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.hub-ct b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--hub-ink); }

.hub-csub { font-size: 11.5px; color: var(--hub-ink-3); }

.hub-cdesc {
  margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--hub-ink-2);
  /* 说明最多两行，卡片高度才齐 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overltflow: hidden;
}

.hub-thumb {
  position: relative; height: 104px; margin-top: 2px;
  border-radius: 14px; overltflow: hidden;
  background: linear-gradient(160deg, #ece7ff, #f7f2ff);
  display: flex; align-items: center; justify-content: center;
}

.hub-thumb::after {
  /* 一块"竖屏"白框，模拟手机 */
  content: ''; position: absolute; inset: 12px 50% 12px 50%;
  width: 44px; margin-left: -22px; border-radius: 9px;
  background: #fff; box-shadow: 0 6px 16px rgba(80, 60, 140, .16);
}

.hub-thumb i {
  position: absolute; z-index: 1; width: 26px; height: 3px; border-radius: 2px;
  background: #d8d1ee; top: 44px;
}

.hub-thumb em {
  position: absolute; z-index: 1; width: 0; height: 0; top: 54px;
  border-left: 9px solid #cfc6ea; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

.hub-arrow {
  position: absolute; right: 14px; bottom: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px;
  background: #17121f; color: #fff;
  box-shadow: 0 8px 18px rgba(23, 18, 31, .26);
  transition: transform .16s ease;
}

.hub-card:hover .hub-arrow { transform: translateX(3px); }

.hub-foot { position: relative; z-index: 1; margin-top: 24px; }

.hub-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.hub-pill {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; color: var(--hub-ink-2);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--hub-line);
}

.hub-pill b { color: var(--hub-ink); font-weight: 800; }

.hub-pill.ok { border-color: rgba(46, 194, 126, .35); color: #147a4a; background: rgba(46, 194, 126, .08); }

.hub-pill.warn { border-color: rgba(230, 160, 40, .38); color: #8a5a00; background: rgba(255, 196, 60, .12); }

.hub-all { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.hub-all-l { font-size: 11.5px; color: var(--hub-ink-3); margin-right: 2px; }

.hub-mini {
  padding: 4px 10px; border-radius: 8px; font-size: 12px; cursor: pointer;
  color: var(--hub-ink-2); background: rgba(255, 255, 255, .72);
  border: 1px solid var(--hub-line); text-decoration: none;
  transition: background .14s ease, color .14s ease;
}

.hub-mini:hover { background: #fff; color: var(--hub-purple); text-decoration: none; }

.hub-note {
  margin-top: 12px; padding: 10px 13px; border-radius: 12px; font-size: 12px;
  line-height: 1.7; color: var(--hub-ink-2);
  background: rgba(255, 255, 255, .75); border: 1px solid var(--hub-line);
}

.hub-note.warn { background: #fff7e6; border-color: rgba(230, 160, 40, .35); color: #7a5200; }

.hub-note a { color: var(--hub-purple); font-weight: 700; cursor: pointer; }

.st-star {
  color: #ffd75e;
  text-shadow: 0 6px 16px rgba(255, 190, 60, .55), 0 0 0 3px rgba(255, 255, 255, .9);
}

.hub-thumb i {
  top: auto; bottom: 24px; width: 26px; height: 5px; border-radius: 3px;
  background: #fff; box-shadow: 0 0 0 2px rgba(70, 50, 130, .18);
}

.hub-thumb em { top: 36px; }

.hub-st { z-index: 3; }

.st-star { right: 78px; top: 402px; bottom: auto; font-size: 34px; }

.hub-ltflow-head {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 30px 0 14px;
}

.hub-ltflow-head b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }

.hub-ltflow-head span { font-size: 12px; color: var(--hub-ink-3); }

.ltflow { position: relative; z-index: 1; display: flex; align-items: stretch; }

.ltflow-step {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 14px 13px;
  background: #fff; border: 1px solid var(--hub-line); border-radius: 20px;
  box-shadow: 0 8px 22px rgba(70, 50, 130, .06);
  cursor: pointer; text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ltflow-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(70, 50, 130, .15);
  border-color: rgba(91, 61, 245, .28);
}

.ltflow-step:focus-visible { outline: 2px solid var(--hub-purple); outline-offset: 3px; }

.ltflow-step.core { border-color: rgba(230, 175, 40, .4); }

.ltflow-step.core:hover { border-color: rgba(230, 175, 40, .65); }

.ltflow-top { display: flex; align-items: center; gap: 8px; }

.ltflow-num {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 13.5px; font-weight: 900;
  background: linear-gradient(140deg, #efe7ff, #ffe9f4); color: #4c2fe0;
}

.ltflow-step.core .ltflow-num { background: var(--hub-amber-bg); color: var(--hub-amber); }

.ltflow-tag {
  padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: #f1eefe; color: #4c2fe0; letter-spacing: .02em;
}

.ltflow-tag.core { background: var(--hub-amber-bg); color: var(--hub-amber); }

.ltflow-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin-top: 3px; }

.ltflow-mod { font-size: 11px; color: var(--hub-ink-3); }

.ltflow-desc {
  margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--hub-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overltflow: hidden;
}

.ltflow-go {
  margin-top: auto; padding-top: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--hub-purple);
}

.ltflow-arrow {
  flex: 0 0 52px; position: relative;
  display: flex; align-items: center; justify-content: center;
}

.ltflow-arrow::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
  border-top: 2px dashed rgba(91, 61, 245, .3);
}

.ltflow-arrow span {
  position: relative; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: #fff; color: var(--hub-purple);
  border: 1px solid rgba(91, 61, 245, .38);
  box-shadow: 0 4px 12px rgba(91, 61, 245, .16);
}

.hub {
  box-shadow: none;
  background: transparent;
  padding: 4px 0 0;
  border-radius: 0;
  overltflow: visible;
}

.ltflow-arrow { flex: 0 0 62px; }

.ltflow-arrow::before {
  left: 2px; right: 2px;
  border-top: 2px dashed rgba(91, 61, 245, .45);
}

.ltflow-arrow span {
  width: 30px; height: 30px; font-size: 13px;
  background: #fff; color: var(--hub-purple);
  border: 1.5px solid rgba(91, 61, 245, .45);
  box-shadow: 0 6px 16px rgba(91, 61, 245, .22);
}

.st-like { color: #9a92b5; }

.ltflow-gap {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 14px 0; height: 30px;
}

.ltflow-gap::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 50%;
  border-top: 2px dashed rgba(91, 61, 245, .28);
}

.ltflow-gap span {
  position: relative; padding: 3px 12px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(91, 61, 245, .3);
  font-size: 11.5px; font-weight: 700; color: var(--hub-purple);
  box-shadow: 0 4px 12px rgba(91, 61, 245, .14);
}

/* 只在手机上显示的元素（比如「直接拍一段」按钮） */
.phone-only { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .phone-only { display: flex; }
}

/* 只在手机上显示的行内提示 */
.phone-hint { display: none; color: #b45309; }
@media (max-width: 760px), (pointer: coarse) {
  .phone-hint { display: inline; }
}

/* ===================== 全页面拖放遮罩 ===================== */
/* 客户从微信把文件拖进网页时，整页给一个明确的"松手就上传"提示 */
#drop-mask {
  position: fixed; inset: 0; z-index: 9998;
  display: none; align-items: center; justify-content: center;
  background: rgba(91, 61, 245, .28);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
#drop-mask.on { display: flex; }
#drop-mask .dm-box {
  background: var(--bg-1, #fff); border: 2px dashed var(--brand, #5b3df5);
  border-radius: 18px; padding: 28px 40px; text-align: center;
  box-shadow: 0 24px 60px rgba(20, 16, 36, .22);
}
#drop-mask .dm-ico { font-size: 40px; line-height: 1; margin-bottom: 8px; }
#drop-mask .dm-t { font-size: 19px; font-weight: 800; color: var(--text, #241f35); }
#drop-mask .dm-s { font-size: 13px; color: var(--text-3, #6f6885); margin-top: 6px; }

/* ===================== 素材选择：选中一眼可见 ===================== */

/*
 * 客户反馈：第一次用不知道哪个选了。
 * 规则：
 *   选中   → 亮、品牌色粗描边、右上角绿底白字「✓ 已选」、轻微上浮
 *   未选   → 变暗（降透明 + 去饱和），鼠标移上去恢复一点，提示"可以点"
 */
.mats .mat {
  transition: opacity .16s ease, filter .16s ease, box-shadow .16s ease, transform .12s ease;
}

.mats .mat.mat-off {
  opacity: .48;
  filter: grayscale(.45);
}
.mats .mat.mat-off:hover {
  opacity: .82;
  filter: grayscale(0);
}

.mats .mat.mat-on {
  opacity: 1;
  filter: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(91, 61, 245, .30), 0 8px 20px rgba(91, 61, 245, .16);
  transform: translateY(-2px);
}

/* 角标：选中绿底白字；未选灰底提示可点 */
.mat .pick {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800; line-height: 1.5;
  background: var(--ok, #12b76a);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.mat .pick.pick-idle {
  background: rgba(20, 16, 36, .55);
  color: #fff;
  font-weight: 600;
  opacity: 0;
  transition: opacity .14s ease;
}
.mat.mat-off:hover .pick-idle { opacity: 1; }

/* 缩略图加载失败：显示占位，不要破图 */
.mat .thumb.broken::before {
  content: "⚠ 预览加载失败";
  font-size: 12px;
  color: var(--text-3, #6f6885);
}

/* ===================== 文案工坊：三步改成紧凑"数据条" ===================== */
/* 客户反馈原页面信息太杂、呈现不明朗 → 每步压缩成一行标题 + 一句话，结果出来才展开 */

.cp-step { padding: 14px 16px; }
.cp-step + .cp-step { margin-top: 10px; }

.cp-step-head {
  display: flex; align-items: center; gap: 10px;
  min-height: 24px;
}
.cp-step-title { font-size: 15px; font-weight: 700; color: var(--text); }
.cp-step-head .chip { margin-left: auto; flex: none; }

.cp-step-desc {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* 还没开始时：不要撑出大块空白 */
.cp-step-body:empty { display: none; }
.cp-step[data-state="idle"] .cp-step-body { display: none; }
.cp-step[data-state="idle"] .cp-step-desc { opacity: .75; }

/* 结果出来后才把它显出来，并加一条分隔线 */
.cp-step[data-state="running"] .cp-step-body,
.cp-step[data-state="done"] .cp-step-body,
.cp-step[data-state="err"] .cp-step-body {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}


/* ══════════════════════════════════════════════════════════════════════
 * 本版本自有功能组件（优化版没有的）
 * ══════════════════════════════════════════════════════════════════════
 * 这些样式对应的是我们后来加的功能：
 *   · 📦 批量出片（bt-*）：素材网格、素材组徽章、每条配置表、结果卡片
 *   · 🏪 店铺文案模板（shop-*）：模板卡片、生成结果
 *   · 👁 素材理解标记（ai-seen / tag-ai / vision-bar）
 *
 * 已经适配浅色主题：深色背景改成浅灰紫、蓝色改成品牌紫。
 * ⚠️ 变量名修正：原文件里用了 8 次 `var(--accent)` 但该变量从未定义，
 *    那些声明会被浏览器静默丢弃（批量选中高亮、店铺模板选中框一直是失效的）。
 *    现在统一改成 `var(--brand)`。
 * ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════

 * 我们版本独有、优化版没有的组件样式（自己的功能，必须保留）：

 *   · 批量出片（bt-*）

 *   · 店铺文案模板（shop-*）

 *   · 视觉模型标记（ai-seen / tag-ai / vision-bar）

 * ══════════════════════════════════════════════════════════ */



/* AI 识别出来的标签 —— 和人工标签区分开，一眼看出"这是 AI 看出来的" */
.tag-ai { background: rgba(91, 61, 245, .14); color: var(--brand-2); border-color: rgba(91, 61, 245, .3); }

/**
 * ⭐「AI 看到」—— 素材卡片上显示视觉模型理解到的画面内容。
 *
 * 客户以前完全不知道 AI 看懂了多少，只能猜"为什么这句配了这个画面"。
 * 显示出来之后可以自己判断准不准，还能改名字/加标签来纠正。
 */
.mat .ai-seen {
  display: flex; align-items: flex-start; gap: 5px;
  margin: 6px 0 2px; padding: 5px 7px;
  border-radius: 6px;
  background: rgba(91, 61, 245, .08);
  border: 1px solid rgba(91, 61, 245, .18);
  line-height: 1.45;
}

.mat .ai-seen-badge {
  flex: none; font-size: 10px; padding: 0 4px;
  border-radius: 4px; background: rgba(91, 61, 245, .22);
  color: var(--brand-2);
}

.mat .ai-seen-text { color: var(--text-2); font-size: 11px; }

/**
 * 👁「让 AI 看懂画面」操作条（素材库页面）
 *
 * 放在素材列表上方，客户一进页面就能看到。
 * 没分析过时是"提醒"状态，全部分析完变成"已完成"。
 */
.vision-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 4px 0 10px; padding: 10px 12px;
  border-radius: 8px;
  background: rgba(91, 61, 245, .07);
  border: 1px solid rgba(91, 61, 245, .2);
}

.vision-bar-main { flex: 1 1 260px; min-width: 0; line-height: 1.5; }

.vision-bar-main b { color: var(--text); font-size: 13px; }

.vision-bar-act { flex: none; }

@media (max-width: 560px) {
  .vision-bar { flex-direction: column; align-items: stretch; }
  .vision-bar-act .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
 * 批量出片（📦 batch 页面）
 * ══════════════════════════════════════════════════════════════════
 * 店铺老板要选一堆素材、贴一堆文案 —— 界面必须一眼看清「选了哪些」。
 */
.bt-mats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 320px;
  overltflow-y: auto;
  padding: 2px;
}

.bt-mat {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 8px;
  overltflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  background: var(--bg-3);
}

.bt-mat:hover { transform: translateY(-2px); }

.bt-mat.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(91, 61, 245,.25); }

.bt-thumb { height: 72px; overltflow: hidden; display: grid; place-items: center; }

.bt-thumb img, .bt-thumb video { width: 100%; height: 100%; object-fit: cover; }

.bt-name { font-size: 10.5px; color: var(--text-3); padding: 4px 5px; white-space: nowrap; overltflow: hidden; text-overltflow: ellipsis; }

.bt-check {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}

.bt-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg-2);
}

.bt-results { display: flex; flex-wrap: wrap; gap: 6px; }

.bt-res {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(91, 61, 245,.1);
  border: 1px solid rgba(91, 61, 245,.25);
  color: var(--text); text-decoration: none;
  font-size: 12px;
}

.bt-res:hover { background: rgba(91, 61, 245,.2); }

.bt-res-fail {
  background: rgba(240,120,120,.08);
  border-color: rgba(240,120,120,.25);
}

/* ══════════════════════════════════════════════════════════════════
 * 店铺文案模板（🏪 文案工坊里的第一个区块）
 * ══════════════════════════════════════════════════════════════════
 * 老板不写文案是因为"不知道写什么"，所以模板卡片要能一眼看懂
 * "选了这个会生成什么样的稿子" —— 所以带一行示例。
 */
.shop-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

.shop-tpl {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.shop-tpl:hover { transform: translateY(-2px); }

.shop-tpl.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(91, 61, 245,.2); }

.shop-tpl-ico { font-size: 22px; line-height: 1.1; flex: none; }

.shop-tpl-txt { min-width: 0; line-height: 1.5; }

.shop-tpl-txt b { display: block; font-size: 13px; color: var(--text); }

.shop-tpl-txt span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.shop-tpl-txt em { display: block; font-size: 11px; color: var(--text-3); margin-top: 5px; font-style: normal; }

.shop-tpl-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}

.shop-res {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg-2);
}

.shop-res-text {
  margin: 8px 0 6px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════════════
 * 批量出片（2026-10 升级：素材组 / 每条配置 / 质检提示）
 * ══════════════════════════════════════════════════════════ */

/* 素材分组标签页：[全部素材][组 A][组 B] */
.bt-grp-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bt-grp-tabs .btn.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 素材卡片右上角的"组"徽章（A / B） */
.bt-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--warn);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* 分组素材用不同边框区分，一眼看出哪些已经分组 */
.bt-mat.gA { border-color: var(--warn); }

.bt-mat.gB { border-color: #4bc0c0; }

/* 每条配置表 */
.bt-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overltflow: hidden;
}

.bt-tr {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 96px 108px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.bt-tr:last-child { border-bottom: 0; }

.bt-tr.bt-th {
  background: rgba(20, 16, 36, .04);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}

/* 没有分组时表格只有 3 列 */
.bt-table.no-group .bt-tr { grid-template-columns: 28px minmax(0, 1fr) 108px; }

.bt-tr select.sm {
  padding: 3px 6px;
  font-size: 11px;
  height: 26px;
}

.ellipsis {
  overltflow: hidden;
  text-overltflow: ellipsis;
  white-space: nowrap;
}

/* 结果卡片上的小标记（组A、🧠AI 等） */
.bt-mini {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(20, 16, 36, .07);
  color: var(--text-3);
}

/* 有质检提示的结果卡片 */
.bt-res.warn { border-color: var(--warn); }

/* ══════════════════════════════════════════════════════════════════════
 * 首页 hub / ltflow 的响应式（优化版没做，但客户主要用手机，必须补）
 * ══════════════════════════════════════════════════════════════════════ */

/* 第 4 步卡片里的第二个入口（批量出片） */
.ltflow-extra {
  display: block;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hub-purple, #5b3df5);
  background: #f4f0ff;
  border: 1px solid rgba(91, 61, 245, .22);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.ltflow-extra:hover { background: #ebe3ff; border-color: rgba(91, 61, 245, .45); text-decoration: none; }

/* 中等屏（平板 / 小笔记本）：流程卡两行两列 */
@media (max-width: 1080px) {
  .ltflow { flex-wrap: wrap; gap: 12px; }
  .ltflow-step { flex: 1 1 calc(50% - 40px); }
  .ltflow-arrow { display: none; }
}

/* 手机：流程变竖排，箭头改向下 */
@media (max-width: 760px) {
  .hub-h1 { line-height: 1.06; }
  .hub-ai { font-size: clamp(30px, 9vw, 42px); }
  .hub-grad { font-size: clamp(28px, 9vw, 40px); }
  .hub-sub { font-size: 13px; margin-top: 12px; }
  .hub-cta-row { gap: 10px; }
  .hub-cta { width: 100%; justify-content: center; }
  .hub-chips span { font-size: 11px; padding: 5px 10px; }
  .hub-social { width: 100%; }
  .hub-social-txt span { font-size: 11px; }

  /* 竖排流程：卡片之间用向下箭头 */
  .ltflow { flex-direction: column; gap: 0; }
  .ltflow-step { flex: 1 1 auto; width: 100%; }
  .ltflow-arrow {
    display: flex; flex: 0 0 auto; height: 34px;
    align-items: center; justify-content: center;
  }
  .ltflow-arrow::before {
    left: 50%; right: auto; top: 2px; bottom: 2px;
    border-top: 0; border-left: 2px dashed rgba(91, 61, 245, .45);
  }
  .ltflow-arrow span { transform: rotate(90deg); }

  .hub-ltflow-head { margin: 22px 0 12px; }
  .hub-ltflow-head b { font-size: 15px; }
  .hub-all { align-items: flex-start; }
  .hub-mini { font-size: 11.5px; padding: 5px 9px; }

  /* 装饰贴纸在窄屏会压在文字上，直接隐藏 */
  .hub-st { display: none; }
}

/* 超窄屏（小手机） */
@media (max-width: 420px) {
  .hub-pills { gap: 6px; }
  .hub-pill { font-size: 11px; padding: 4px 9px; }
  .ltflow-desc { -webkit-line-clamp: 3; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 「下一步」按钮（客户要求：只留一个、按顺序走、做大一点）
 * ══════════════════════════════════════════════════════════════════════
 * 为什么单独做一组类：
 *   原来每页底部是一排小按钮（拿去配音 / 去剪辑 / 去发布…），
 *   客户站在那儿要选 —— 选择困难、还容易选错顺序。
 *   现在按流程只给一个，视觉上也要"显眼"，让人自然往下点。
 */
.next-step {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: flex-end;
}

.next-btn {
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(91, 61, 245, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(91, 61, 245, .3);
}

/* 手机上占满整行，手指好点 */
@media (max-width: 760px) {
  .next-step { justify-content: stretch; }
  .next-btn { width: 100%; padding: 14px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 「下一步」大按钮（每页只留一个，按流程顺序走）
 * ══════════════════════════════════════════════════════════════════════
 * 客户要求：下一步只设置一个、按顺序来、按钮做大一点。
 * 原来每页底部是一排小按钮（拿去配音/去剪辑/去发布…），
 * 客户站在那儿要选 —— 选择困难还容易点错顺序。
 */
.next-step {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: flex-end;
}

.next-btn {
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(91, 61, 245, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(91, 61, 245, .3);
}

@media (max-width: 760px) {
  .next-step { justify-content: stretch; }
  .next-btn { width: 100%; padding: 14px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
 * 工作台首页：两个大功能卡（批量出片 / 爆款视频 AI 仿剪）
 * ══════════════════════════════════════════════════════════════════════
 * 客户要求：去掉原来的四步流程，只留这两个功能，而且**做大**。
 * 设计意图：首页只解决"走哪条路"，不做功能索引（其它页面在左侧菜单）。
 */
.home-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
  position: relative;
  z-index: 1;
}

.home-big-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  padding: 30px 28px 24px;
  min-height: 260px;
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 36, .10);
  background: linear-gradient(165deg, #ffffff 0%, #faf7ff 100%);
  box-shadow: 0 14px 36px rgba(70, 50, 130, .10);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-big-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(70, 50, 130, .18);
  border-color: rgba(91, 61, 245, .35);
}

/* 热门的那个（AI 仿剪）用暖色边框区分 */
.home-big-card.hot {
  background: linear-gradient(165deg, #fffdfb 0%, #fff5f0 100%);
  border-color: rgba(230, 120, 60, .22);
}
.home-big-card.hot:hover { border-color: rgba(230, 120, 60, .5); }

.hbc-ico { font-size: 40px; line-height: 1; }

.hbc-title {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
}

.hbc-desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 92%;
}
.hbc-desc b { color: var(--text); }

.hbc-tag {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--brand);
  background: rgba(91, 61, 245, .08);
  border: 1px solid rgba(91, 61, 245, .18);
}

.hbc-go {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand);
}

.home-foot-tip {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-3);
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .home-big { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .home-big-card { min-height: auto; padding: 22px 20px 18px; }
  .hbc-title { font-size: 21px; }
  .hbc-desc { font-size: 13px; max-width: 100%; }
  .hbc-ico { font-size: 32px; }
}

/* 9:16 预览画布：深色渐变模拟真实画面 */
.sub-stage {
  width: 168px; height: 298px; flex: none;
  border-radius: 12px; overltflow: hidden; position: relative;
  background: linear-gradient(160deg, #2a2140 0%, #14101f 55%, #241a3a 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.sub-stage::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 30% 25%, rgba(139,92,246,.30), transparent 70%),
              radial-gradient(50% 35% at 75% 80%, rgba(230,120,60,.18), transparent 70%);
}
.sub-stage-tip {
  position: absolute; top: 8px; left: 10px;
  font-size: 9px; color: rgba(255,255,255,.42); letter-spacing: .04em;
}

/* 预览里的字幕本体 */
.sub-line {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 88%; text-align: center; line-height: 1.34;
  font-weight: 900; letter-spacing: 0;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  white-space: pre-wrap; word-break: break-word;
}
.sub-line.bottom { bottom: 13%; }
.sub-line.top { top: 9%; }

/* 选择区 */
.sub-pick-area { flex: 1; min-width: 220px; }

/* ── 字幕动效（预览用）───────────────────────────────── */
@keyframes subSlideUp {
  from { transform: translateX(-50%) translateY(18px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes subZoomIn {
  from { transform: translateX(-50%) scale(.7); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);  opacity: 1; }
}
@keyframes subDropDown {
  from { transform: translateX(-50%) translateY(-26px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}
@keyframes subBounce {
  0%   { transform: translateX(-50%) scaleY(.6);  opacity: 0; }
  55%  { transform: translateX(-50%) scaleY(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1);   opacity: 1; }
}
@keyframes subType {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.sub-anim-slide { animation: subSlideUp .42s ease-out both; }
.sub-anim-zoom  { animation: subZoomIn .34s ease-out both; }
.sub-anim-drop  { animation: subDropDown .40s ease-out both; }
.sub-anim-bounce{ animation: subBounce .48s cubic-bezier(.3,1.6,.5,1) both; }
.sub-anim-type  { animation: subType 1.1s steps(18, end) both; }

@media (max-width: 760px) {
  .sub-stage { width: 132px; height: 234px; }
  .sub-pick-area { min-width: 100%; }
}


/* ══════ 素材预览弹层（点素材缩略图打开）══════ */
.pv-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 8, 24, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pv-box {
  background: #14121f; border-radius: 14px; padding: 12px;
  max-width: min(92vw, 1100px); max-height: 92vh;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.pv-head { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.pv-title { color: #f2f0fa; font-size: 14px; font-weight: 600; overltflow: hidden; text-overltflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.pv-meta { color: rgba(255,255,255,.55); font-size: 12px; }
.pv-close {
  margin-left: auto; color: rgba(255,255,255,.75); cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 15px;
  background: rgba(255,255,255,.08);
}
.pv-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.pv-media { max-width: 82vw; max-height: 74vh; border-radius: 10px; display: block; }
video.pv-media { background: #000; width: min(82vw, 900px); }
img.pv-media { object-fit: contain; }
.pv-audio { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 24px; }
.pv-audio-ico { font-size: 44px; }
.pv-audio audio { width: min(70vw, 520px); }
.mat .thumb[data-preview] { cursor: zoom-in; }


/* ══════ 文案助手：上传完成后的方框状态（客户要求）══════ */
.drop.done {
  border-style: solid;
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .06);
}
.ce-drop-done {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; text-align: center;
}
.ce-drop-check { font-size: 30px; line-height: 1; }
.ce-drop-title { font-size: 15px; color: var(--text, #1f2333); word-break: break-all; }
.ce-drop-hint { color: var(--muted, #7a7f95); }


/* ══════ 通用：上传方框的「已完成录入」状态（明显大气）══════ */
.drop-done {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; text-align: center;
}
.ce-drop-sub { color: var(--muted, #7a7f95); font-size: 13px; }

/* ===================== 首页聚合改造：隐藏左侧功能栏 ===================== */
/* 客户反馈：左侧栏功能太多、看不过来 → 全部功能搬到工作台首页，侧栏先藏起来 */

.sidebar { display: none !important; }
.main { width: 100%; }

/* 首页的"全部功能"网格 */
.home-funcs {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.home-func {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  text-align: left;
}
.home-func:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(91, 61, 245, .14);
}
.home-func .hf-ico { font-size: 22px; line-height: 1; flex: none; margin-top: 2px; }
.home-func .hf-t { font-size: 15px; font-weight: 800; color: var(--text); }
.home-func .hf-d { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.home-funcs-title {
  margin-top: 34px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); text-transform: uppercase;
}

/* 手机端：两列就够 */
@media (max-width: 760px) {
  .home-funcs { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-func { padding: 13px 14px; }
  .home-func .hf-t { font-size: 14px; }
  .home-func .hf-d { display: none; }
}

/* ===================== 修：去掉侧栏后布局塌成窄列 ===================== */
/* 原因：#app 是 grid-template-columns: 232px 1fr 两列，侧栏 display:none 后
   主内容被排到了第一列（232px），看起来就是"挤在左上角一条"。
   这里把布局改成单列，并让主区铺满。 */

#app,
#app.on {
  grid-template-columns: 1fr !important;
  grid-template-areas: none !important;
}
#app .main {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}
#app .content { width: 100% !important; max-width: none !important; }

/* 手机端把它做成悬浮小按钮，省空间 */
@media (max-width: 760px) {
  .back-bar { margin-bottom: 10px; }
}

@media (max-width: 760px) {
}

/* ===================== 全部功能搬到左侧 ===================== */
/* 客户要求：功能按钮放到左侧，右侧仍是 hero + 两张主卡片，其它不动。
   只在"有 .home-all 的面板"上生效，所以其它功能页完全不受影响。 */

@media (min-width: 900px) {
  .panel:has(.home-all) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-auto-rows: min-content;
    column-gap: 28px;
    align-items: start;
  }

  /* 左边的功能列表：占第一列，跨满整列高度 */
  .panel:has(.home-all) > .home-all {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
    top: 16px;
    margin-top: 0;
  }

  /* 其余内容（hero、两张主卡片等）全部放到右列 */
  .panel:has(.home-all) > *:not(.home-all) {
    grid-column: 2;
  }

  /* 左侧列表改成竖排单列，更像菜单 */
  .panel:has(.home-all) .home-funcs {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .panel:has(.home-all) .home-funcs-title {
    margin-top: 0;
    margin-bottom: 10px;
  }
  .panel:has(.home-all) .home-func {
    padding: 12px 14px;
  }
  .panel:has(.home-all) .home-func .hf-t { font-size: 14px; }
  .panel:has(.home-all) .home-func .hf-d {
    font-size: 12px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overltflow: hidden;
  }
}

/* 手机/窄屏保持原来的上下结构 */
@media (max-width: 899px) {
  .panel:has(.home-all) > .home-all { margin-top: 22px; }
}

/* ===================== 功能页左侧常驻功能列表 ===================== */
/* 客户要求：任何功能页都能直接切功能，不用先回首页 */

#content { display: flex; align-items: flex-start; gap: 22px; }
#content > .panel { flex: 1; min-width: 0; }

.func-rail {
  flex: none;
  width: 216px;
  position: sticky;
  top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
}
.func-rail .rail-back {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
}
.func-rail .rail-back:hover { border-color: var(--brand); color: var(--brand); }

.func-rail .rail-title {
  margin: 14px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-3);
  text-transform: uppercase;
}

.rail-list { display: flex; flex-direction: column; gap: 4px; }
.rail-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.rail-item:hover { background: var(--bg-3); color: var(--text); }
.rail-item.on {
  background: rgba(91, 61, 245, .10);
  color: var(--brand);
  font-weight: 800;
}
.rail-ico { font-size: 15px; flex: none; }

/* 窄屏（手机）：不显示左栏，改由首页卡片进入 */
@media (max-width: 860px) {
  .func-rail { display: none; }
  #content { display: block; }
}

/* 左侧列表里的卡片：形态和首页一致，只是竖排 */
.rail-list { display: flex; flex-direction: column; gap: 10px; }
.rail-list .home-func {
  width: 100%;
  padding: 12px 13px;
  border-radius: 12px;
  align-items: flex-start;
}
.rail-list .home-func .hf-ico { font-size: 18px; }
.rail-list .home-func .hf-t { font-size: 13.5px; }
.rail-list .home-func .hf-d {
  font-size: 11.5px;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overltflow: hidden;
}
/* 当前所在功能：品牌色描边 + 浅底 */
.rail-list .home-func.on {
  border-color: var(--brand);
  background: rgba(91, 61, 245, .08);
  box-shadow: 0 0 0 2px rgba(91, 61, 245, .16);
}
.rail-list .home-func.on .hf-t { color: var(--brand); }

/* ===================== 首页最终布局 ===================== */
/* 取消"全部功能搬左侧"的两列布局，恢复单列（hero + 两张主卡 + 右下两项） */
.panel:has(.home-all) {
  display: block !important;
}
.panel:has(.home-all) > .home-all {
  position: static !important;
  margin-top: 22px !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* 下面这两项（历史/设置）只占右半列，视觉上对齐"爆款视频 AI 仿剪"那张卡 */
.home-funcs.home-funcs-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
.home-funcs.home-funcs-right > .home-func {
  padding: 14px 16px;
}
/* 两项都放到右列（左列留空） */
.home-funcs.home-funcs-right > .home-func:nth-child(odd) { grid-column: 2; }
.home-funcs.home-funcs-right > .home-func:nth-child(even) { grid-column: 2; }

@media (max-width: 760px) {
  .home-funcs.home-funcs-right { grid-template-columns: 1fr; }
  .home-funcs.home-funcs-right > .home-func { grid-column: 1 !important; }
}

/* 横排贴右：历史与任务 / 设置与账号 两个小卡片，并排放在 AI 仿剪卡正下方 */
.home-all { margin-top: 14px !important; }
.home-all .home-funcs-title { display: none; }   /* 首页不显示"全部功能"标题 */

.home-funcs.home-funcs-right {
  display: flex !important;
  justify-content: flex-end;
  align-items: stretch;
  gap: 16px;
  margin-top: 0 !important;
}
.home-funcs.home-funcs-right > .home-func {
  flex: 0 0 242px;
  grid-column: auto !important;
  padding: 13px 15px;
}

@media (max-width: 760px) {
  .home-funcs.home-funcs-right { justify-content: stretch; }
  .home-funcs.home-funcs-right > .home-func { flex: 1 1 auto; }
}

/* 左栏贴紧内容：原来中间空了一大片（面板是居中限宽的，所以和左栏隔开） */
#content { gap: 12px !important; }

/* 有左栏时：让面板靠左、取消居中留白 */
#content:has(.func-rail) > .panel {
  max-width: none !important;
  margin: 0 !important;
}

/* 左栏本身收窄一点，更"贴" */
#content > .func-rail { width: 200px; }

/* 没有左栏时（首页）保持原来的居中观感 */
#content:not(:has(.func-rail)) > .panel {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  #content { gap: 0 !important; }
}

/* ===================== 工作台三步流程图 ===================== */
/* 导线用品牌色 3px + 箭头，客户一眼看出先后顺序 */

.ltflow { margin: 26px 0 10px; }

.ltflow-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.ltflow-card {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-1);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.ltflow-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 14px 32px rgba(91, 61, 245, .16);
}

.ltflow-card .ltfc-n {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d4bff, #9a6bff);
  color: #fff;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(91, 61, 245, .32);
}
.ltflow-card .ltfc-body { flex: 1; min-width: 0; }
.ltflow-card .ltfc-body b {
  display: block;
  font-size: 17px; font-weight: 800; color: var(--text);
  margin-bottom: 4px;
}
.ltflow-card .ltfc-body span {
  font-size: 12.5px; color: var(--text-3); line-height: 1.55;
}
.ltflow-card .ltfc-go {
  flex: none;
  font-size: 13px; font-weight: 800; color: var(--brand);
  opacity: 0; transition: opacity .14s ease;
}
.ltflow-card:hover .ltfc-go { opacity: 1; }

/* ★ 第一步 → 第二步 的导线（粗、带箭头） */
.ltflow-arrow {
  position: relative;
  flex: 0 0 104px;
  display: grid;
  place-items: center;
}
.ltflow-arrow::before {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(109,75,255,.25), #6d4bff);
  border-radius: 2px;
}
.ltflow-arrow::after {
  content: '';
  position: absolute;
  right: 6%; top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid #6d4bff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.ltflow-arrow span {
  position: relative;
  z-index: 1;
  margin-top: -30px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ★ 分叉：第二步下面分出两条线到 3A / 3B */
.ltflow-fork {
  position: relative;
  height: 66px;
  margin: 0 24%;
}
.ltflow-fork::before,
.ltflow-fork::after {
  content: '';
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #6d4bff, rgba(109,75,255,.45));
  border-radius: 2px;
}
.ltflow-fork::before { left: 0; }
.ltflow-fork::after { right: 0; }
/* 顶端横线（从第二步中点分向左右） */
.ltflow-fork .ltflow-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 12px; font-weight: 800;
  color: var(--brand);
  background: var(--bg);
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(109,75,255,.25);
  white-space: nowrap;
}
/* 两条竖线底部的箭头 */
.ltflow-fork .ltflow-label::before,
.ltflow-fork .ltflow-label::after { content: none; }

.ltflow-final {
  display: flex;
  gap: 18px;
}
.ltflow-final .ltflow-card { flex: 1; }

/* 箭头指向下面两张卡 */
.ltflow-fork::before { box-shadow: 0 60px 0 -3px #6d4bff; }
.ltflow-fork::after { box-shadow: 0 60px 0 -3px #6d4bff; }

.ltflow-card-alt .ltfc-n {
  background: linear-gradient(135deg, #ff8a3d, #ffb457);
  box-shadow: 0 4px 12px rgba(255, 138, 61, .3);
}

/* 手机端：竖排，导线换成向下的箭头 */
@media (max-width: 860px) {
  .ltflow-row, .ltflow-final { flex-direction: column; gap: 10px; }
  .ltflow-arrow { flex: 0 0 34px; }
  .ltflow-arrow::before { left: 50%; top: 8%; bottom: 8%; right: auto; width: 3px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, rgba(109,75,255,.25), #6d4bff); }
  .ltflow-arrow::after { right: auto; left: 50%; top: auto; bottom: 6%; transform: translateX(-50%); border-top: 10px solid #6d4bff; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: none; }
  .ltflow-arrow span { margin-top: 0; margin-left: 0; }
  .ltflow-fork { margin: 0 8%; height: 40px; }
}

/* 流程块硬约束：防止被其它 .flow 样式影响 */
.ltflow { display: block !important; width: 100% !important; }
.ltflow .ltflow-row,
.ltflow .ltflow-final {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  gap: 0 !important;
}
.ltflow .ltflow-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  flex-direction: row !important;
  white-space: normal !important;
  word-break: normal !important;
}
.ltflow .ltfc-body { writing-mode: horizontal-tb !important; }
.ltflow .ltfc-body b,
.ltflow .ltfc-body span {
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* 首页有流程图时：隐藏原来那两张主卡片（入口已并入流程） */
.panel:has(.ltflow) > .grid { display: none !important; }

/* 流程块与上方内容拉开距离 */
.ltflow { margin-top: 30px !important; }

/* 底部"历史与任务 / 设置与账号"保持在最下面 */
.panel:has(.ltflow) > .home-all { margin-top: 26px !important; }

/* 隐藏旧的两张主卡（入口已并入流程图） */
.panel:has(.ltflow) .home-big { display: none !important; }

/* 卡片放大版（客户要求：四个功能按键做大、横向舒展） */
.ltflow .ltflow-card {
  min-height: 132px !important;
  padding: 26px 30px !important;
  border-radius: 20px !important;
  gap: 18px !important;
}
.ltflow .ltflow-card .ltfc-n {
  width: 52px !important;
  height: 52px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
}
.ltflow .ltflow-card .ltfc-body b {
  font-size: 22px !important;
  letter-spacing: .01em;
  margin-bottom: 7px !important;
}
.ltflow .ltflow-card .ltfc-body span {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
.ltflow .ltflow-card .ltfc-go { font-size: 14px !important; }

/* 第一段导线加长加粗 */
.ltflow .ltflow-arrow { flex: 0 0 132px !important; }
.ltflow .ltflow-arrow::before { height: 4px !important; }
.ltflow .ltflow-arrow::after {
  border-left-width: 13px !important;
  border-top-width: 9px !important;
  border-bottom-width: 9px !important;
}
.ltflow .ltflow-arrow span { font-size: 12.5px !important; margin-top: -38px !important; }

/* 分叉区域也放宽一些，两条竖线位置对齐四张卡的中缝 */
.ltflow .ltflow-fork { height: 78px !important; margin: 0 25% !important; }
.ltflow .ltflow-fork::before,
.ltflow .ltflow-fork::after { width: 4px !important; }
.ltflow .ltflow-label { font-size: 13px !important; padding: 5px 16px !important; }

/* 第二行两张卡之间留出间距，和上面对齐 */
.ltflow .ltflow-final { gap: 20px !important; }
.ltflow .ltflow-row { gap: 0 !important; }

/* 手机端：保持竖排，但卡片高度不硬撑 */
@media (max-width: 860px) {
  .ltflow .ltflow-card { min-height: 0 !important; padding: 18px 18px !important; }
  .ltflow .ltflow-card .ltfc-body b { font-size: 18px !important; }
  .ltflow .ltflow-card .ltfc-n { width: 42px !important; height: 42px !important; font-size: 15px !important; }
}

/* 过时提示（其它功能在左侧菜单）隐藏 */
.panel:has(.ltflow) .home-foot-tip { display: none !important; }

/* 分叉导线 v2：只在②声音克隆下面分叉，素材库下面不出线 */

.ltflow .ltflow-fork {
  position: relative;
  height: 92px !important;
  margin: 0 !important;          /* 占满整行，用百分比定位 */
  display: block !important;
}
/* 清掉旧画法 */
.ltflow .ltflow-fork::before,
.ltflow .ltflow-fork::after { content: none !important; }

.ltflow .ltfork-stem,
.ltflow .ltfork-bar,
.ltflow .ltfork-drop {
  position: absolute;
  background: #6d4bff;
  border-radius: 3px;
}

/* 竖线：从②声音克隆正下方下来（②的中心 = 75%） */
.ltflow .ltfork-stem {
  left: 75%;
  top: 0;
  width: 4px;
  height: 46px;
  transform: translateX(-50%);
}
/* 横杠：在 46px 处，从 25% 拉到 75% */
.ltflow .ltfork-bar {
  left: 25%;
  right: 25%;
  top: 44px;
  height: 4px;
}
/* 两条下垂线 + 箭头 */
.ltflow .ltfork-drop {
  top: 46px;
  width: 4px;
  height: 30px;
  transform: translateX(-50%);
}
.ltflow .ltfork-drop-l { left: 25%; }
.ltflow .ltfork-drop-r { left: 75%; }

.ltflow .ltfork-drop::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  border-top: 12px solid #6d4bff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

/* 标签放在横杠中间偏上一点 */
.ltflow .ltflow-label {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand);
  background: var(--bg);
  padding: 4px 16px;
  border-radius: 999px;
  border: 1px solid rgba(109, 75, 255, .28);
  white-space: nowrap;
}

/* 手机端：竖排时分叉简化为一条竖线 */
@media (max-width: 860px) {
  .ltflow .ltflow-fork { height: 56px !important; }
  .ltflow .ltfork-bar { display: none !important; }
  .ltflow .ltfork-stem { left: 50%; height: 24px; }
  .ltflow .ltfork-drop { left: 50%; top: 24px; height: 20px; }
  .ltflow .ltfork-drop-r { display: none; }
  .ltflow .ltflow-label { top: 6px; }
}

/* 去掉导线（客户要求：不要连接线，只留四张卡片） */
.ltflow .ltfork-stem,
.ltflow .ltfork-bar,
.ltflow .ltfork-drop { display: none !important; }

/* 第一段箭头线也去掉，只留一点间距 */
.ltflow .ltflow-arrow { flex: 0 0 20px !important; }
.ltflow .ltflow-arrow::before,
.ltflow .ltflow-arrow::after,
.ltflow .ltflow-arrow span { display: none !important; }

/* 分叉区压扁成普通间距，中间保留一句提示文字 */
.ltflow .ltflow-fork { height: 44px !important; }
.ltflow .ltflow-label {
  position: static !important;
  display: block !important;
  margin: 0 auto 0 0 !important;
  transform: none !important;
  border: none !important;
  background: transparent !important;
  padding: 12px 0 0 !important;
  color: var(--text-3) !important;
  font-size: 13px !important;
}

/* 四张卡横向均匀铺开 */
.ltflow .ltflow-row, .ltflow .ltflow-final { gap: 18px !important; }

/* 素材库 → 声音克隆 的下一步按钮 */
.next-step-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(109,75,255,.08), rgba(154,107,255,.06));
  border: 1px dashed rgba(109, 75, 255, .35);
}
.next-step-bar .next-btn {
  min-height: 52px;
  padding: 14px 30px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6d4bff, #9a6bff);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(109, 75, 255, .35);
  transition: transform .14s ease, box-shadow .14s ease;
}
.next-step-bar .next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(109, 75, 255, .45);
}
.next-step-bar .next-hint {
  font-size: 13px;
  color: var(--text-3);
}

@media (max-width: 760px) {
  .next-step-bar { flex-direction: column; align-items: stretch; }
  .next-step-bar .next-btn { width: 100%; }
}

/* 声音克隆页的二选一引导 */
.next-step-two { flex-direction: column; align-items: stretch; gap: 12px; }
.next-step-two .next-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.next-step-two .next-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.next-step-two .next-btn { flex: 1 1 260px; }
.next-step-two .next-btn.alt {
  background: linear-gradient(135deg, #ff8a3d, #ffb457);
  box-shadow: 0 10px 24px rgba(255, 138, 61, .32);
}
.next-step-two .next-btn.alt:hover {
  box-shadow: 0 14px 30px rgba(255, 138, 61, .42);
}
@media (max-width: 760px) {
  .next-step-two .next-btns { flex-direction: column; }
  .next-step-two .next-btn { flex: 1 1 auto; width: 100%; }
}

/* 下一步按钮在带左栏的页面里（批量出片/标题封面等） */
#content:has(.func-rail) .next-step-bar { margin-top: 24px; }

/* ===== 主题 G：白底紫金 + 玻璃质感 ===== */
/* 色板：紫 = AI/创造力，金 = 价值感，白 = 干净好上手
   金色只做点缀（编号、渐变收尾），大面积保持紫 + 白，多了会俗 */

:root{
  --bg: #FCFAFF;
  --bg-1: #FFFFFF;
  --bg-2: #F8F4FF;
  --bg-3: #F1EAFE;
  --line: rgba(110, 60, 220, .14);
  --text: #221233;
  --text-2: #57476B;
  --text-3: #8B7C9E;
  --brand: #6D28D9;
  --brand-2: #8B5CF6;
  --gold: #C9A227;
  --gold-2: #EBD27C;
}

body{
  background:
    radial-gradient(880px 500px at 84% -10%, rgba(160,110,255,.20), transparent 62%),
    radial-gradient(700px 460px at 2% 6%, rgba(201,162,39,.12), transparent 60%),
    radial-gradient(900px 620px at 50% 112%, rgba(139,92,246,.12), transparent 66%),
    var(--bg) !important;
}

/* --- 卡片：白玻璃 + 紫金渐变描边 + 顶部高光 --- */
.card,
.ltflow-card,
.home-func,
.mini-card {
  position: relative;
  background: linear-gradient(158deg, rgba(255,255,255,.92), rgba(255,255,255,.72) 58%, rgba(248,240,255,.86)) !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(110, 70, 180, .13), inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* 紫金渐变描边（用 mask 做真正的渐变边框） */
.card::before,
.ltflow-card::before,
.home-func::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(139,92,246,.62), rgba(255,255,255,.10) 46%, rgba(201,162,39,.58));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card:hover,
.ltflow-card:hover,
.home-func:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(110, 70, 180, .20), inset 0 1px 0 #fff !important;
}

/* --- 标题：深紫 + 紫金渐变收尾 --- */
.card-title, .ltfc-body b, .hf-t { color: var(--text) !important; }
.card-sub, .ltfc-body span, .hf-d { color: var(--text-3) !important; }

/* --- 编号块：紫 → 金 --- */
.ltfc-n, .hf-ico, .step {
  background: linear-gradient(140deg, #A78BFA, #6D28D9) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(110, 60, 220, .28) !important;
  border-radius: 12px !important;
}
.ltfc-n:is(.alt),
.ltflow-card-alt .ltfc-n {
  background: linear-gradient(140deg, #F0D98A, #C9A227) !important;
  color: #241A02 !important;
  box-shadow: 0 8px 18px rgba(201, 162, 39, .30) !important;
}

/* --- 按钮：紫主色 / 白底紫边 --- */
.btn,
.next-btn,
.back-btn {
  border-radius: 10px !important;
  font-weight: 800 !important;
}
.btn.primary,
.next-btn,
.back-btn,
.next-step-bar .next-btn {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(110, 60, 220, .30) !important;
}
.btn.primary:hover,
.next-btn:hover,
.back-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(110, 60, 220, .40) !important; }

/* 次要按钮：白底紫边 */
.btn:not(.primary):not(.next-btn):not(.back-btn) {
  background: #fff !important;
  color: var(--brand) !important;
  border: 1px solid rgba(110, 60, 220, .26) !important;
}

/* --- 下一步引导条 --- */
.next-step-bar {
  background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(201,162,39,.06)) !important;
  border: 1px dashed rgba(139, 92, 246, .38) !important;
  border-radius: 16px !important;
}

/* --- 顶部栏 / 侧栏 --- */
.topbar { background: rgba(252,250,255,.82) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) !important; }
.func-rail { background: rgba(255,255,255,.86) !important; backdrop-filter: blur(16px); border: 1px solid var(--line) !important; border-radius: 16px !important; }
.rail-item.on { background: rgba(139,92,246,.10) !important; color: var(--brand) !important; }

/* --- 标签/胶囊：紫底 --- */
.chip.on, .pill.hot { background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important; color: #fff !important; border: none !important; }

/* --- 降级：老浏览器不支持 backdrop-filter 时，用更实的白底 --- */
@supports not (backdrop-filter: blur(1px)) {
  .card, .ltflow-card, .home-func {
    background: #FFFFFF !important;
  }
}

/* 修：缩略图撑破卡片（素材库竖屏视频直接按原尺寸渲染，溢出容器） */
#content img,
#content video{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* 承载缩略图的容器一律裁掉溢出 */
#content .card,
#content .mat,
#content .mat-item,
#content .media-item,
#content [class*="thumb"]{
  overflow: hidden;
}

/* 素材缩略图统一成竖向小卡（像一个封面），高度可控 */
#content [class*="mat"] video,
#content [class*="mat"] img{
  width: 100% !important;
  max-height: 240px !important;
  object-fit: cover !important;
  border-radius: 10px;
}

/* 素材网格里的图片/视频，别让它独占一大块 */
#content .grid img,
#content .grid video{
  max-height: 220px !important;
  object-fit: cover !important;
  border-radius: 10px;
}

/* 修：素材小卡定宽（缩略图不再溢出容器） */
#content [class*="pick"],
#content [class*="mat"],
#content [class*="thumb"]{
  max-width: 148px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

#content [class*="pick"] video,
#content [class*="pick"] img,
#content [class*="mat"] video,
#content [class*="mat"] img,
#content [class*="thumb"] video,
#content [class*="thumb"] img{
  max-width: 148px !important;
  max-height: 190px !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 10px !important;
}

/* 卡片里的文件名太长就省略，不撑破布局 */
#content [class*="pick"] span,
#content [class*="pick"] div{
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 素材墙统一横向排布，不会被一个竖屏视频顶歪 */
#content [class*="pick-list"],
#content [class*="mat-list"],
#content [class*="thumbs"]{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* 修：左栏功能卡文字溢出（说明文字压出卡片底部） */
.func-rail .home-func,
.rail-list .home-func {
  overflow: hidden !important;
  align-items: flex-start !important;
}

.func-rail .home-func .hf-d,
.rail-list .home-func .hf-d {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  max-height: 3.2em !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.func-rail .home-func .hf-t,
.rail-list .home-func .hf-t {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px){
}

@media (max-width: 760px){
}

/* 恢复：字幕选择器原有样式（我上一轮误删了它们） */

.sub-stage::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 30% 25%, rgba(139,92,246,.30), transparent 70%),
              radial-gradient(50% 35% at 75% 80%, rgba(230,120,60,.18), transparent 70%);
}

.sub-stage-tip {
  position: absolute; top: 8px; left: 10px;
  font-size: 9px; color: rgba(255,255,255,.42); letter-spacing: .04em;
}

.sub-line.bottom { bottom: 13%; }

.sub-line.top { top: 9%; }

.sub-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.sub-chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  background: var(--bg-3); border: 1px solid transparent;
  transition: all .15s ease; user-select: none;
}

.sub-chip:hover { border-color: rgba(91,61,245,.3); color: var(--brand); }

.sub-chip.on {
  background: var(--brand); color: #fff;
  box-shadow: 0 4px 12px rgba(91,61,245,.28);
}

/* 加宽字幕选择器 v2：容器只有 ~300px，所以每行只能放 2~3 个胶囊 */
.sub-picker{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
}
.sub-picker .sub-stage{
  flex: 0 0 150px !important;
  width: 150px !important;
}
.sub-picker .sub-pick-area{
  flex: 1 1 520px !important;
  min-width: 0 !important;
  width: auto !important;
}
.sub-picker .sub-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

/* 让承载它的卡片也放开宽度（它现在把内容夹在 ~300px 里） */
.card:has(.sub-picker),
.card:has(.sub-row){
  width: 100% !important;
  max-width: none !important;
}

/* 撤掉 148px 死宽：素材卡恢复自适应多列 */
#content [class*="mat"]{
  max-width: none !important;
}
#content [class*="mat"] video,
#content [class*="mat"] img{
  max-width: 100% !important;
  max-height: 260px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* 素材墙：多列自适应网格（包着多个素材卡的容器） */
#content div:has(> [class*="mat"]){
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* 精确修复：sub-picker 撑满（调试显示它只有 148px，父级 799px） */
.sub-picker{
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}
.sub-picker > .sub-stage{
  flex: 0 0 150px !important;
  width: 150px !important;
  max-width: 150px !important;
}
.sub-picker > .sub-pick-area{
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  display: block !important;
}
.sub-picker .sub-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}
/* 胶囊按内容宽度，别被拉成整行 */
.sub-picker .sub-chip{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* 手机录音条 */
.rec-bar{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(201,162,39,.05));
  border: 1px dashed rgba(139,92,246,.32);
}
.rec-bar .rec-tip{ font-size: 12.5px; color: var(--text-3); }
@media (max-width: 760px){
  .rec-bar{ position: sticky; top: 8px; z-index: 30; backdrop-filter: blur(10px); background: rgba(255,255,255,.92); }
  .rec-bar .btn{ flex: 1 1 auto; }
}

/* 手机端：流程卡竖排（原来横排导致每张卡只有 150px，中文挤成一条竖线） */
@media (max-width: 820px) {
  body { padding-left: 12px !important; padding-right: 12px !important; }

  .ltflow .ltflow-row,
  .ltflow .ltflow-final {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .ltflow .ltflow-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 16px 16px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }

  .ltflow .ltfc-n {
    width: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  .ltflow .ltfc-body b {
    font-size: 17px !important;
    white-space: normal !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
  }

  .ltflow .ltfc-body span {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
  }

  /* 手机端隐藏已废弃的分叉/箭头元素 */
  .ltflow .ltfork-stem,
  .ltflow .ltfork-bar,
  .ltflow .ltfork-drop,
  .ltflow .ltflow-arrow { display: none !important; }

  .ltflow .ltflow-fork { height: auto !important; margin: 8px 0 !important; }
  .ltflow .ltflow-label {
    position: static !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 12px !important;
    color: var(--text-3) !important;
  }

  /* 首页 hero 在手机上收一点，别把内容顶下去 */
  h1 { font-size: 38px !important; line-height: 1.15 !important; }
}

/* 手机端：文字不溢出（标题/说明压到卡片外面了） */
@media (max-width: 820px) {
  .ltflow .ltflow-card{
    overflow: hidden !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
  .ltflow .ltflow-card *{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    max-width: 100% !important;
  }
  .ltflow .ltfc-body{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: block !important;
  }
  .ltflow .ltfc-body b{
    display: block !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
  }
  .ltflow .ltfc-body span{
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }
  /* 数字块别压住文字 */
  .ltflow .ltfc-n{
    margin-top: 2px !important;
  }
}


/* 手机端卡片修正 v2：卡片只显示标题、编号被切、说明不见了 */
@media (max-width: 820px) {
  .ltflow .ltflow-card{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .ltflow .ltflow-card .ltfc-n{
    position: static !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
  }
  .ltflow .ltflow-card .ltfc-body{
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .ltflow .ltflow-card .ltfc-body b{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 0 0 3px 0 !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    color: var(--text) !important;
  }
  .ltflow .ltflow-card .ltfc-body span{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    color: var(--text-3) !important;
  }
}

/* 功能页导航条 */
.page-nav{
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 16px;
}
.page-nav .pn-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; border-radius: 12px;
  font-size: 14.5px; font-weight: 800; cursor: pointer;
  border: 1px solid rgba(110,60,220,.22); background: #fff; color: var(--brand);
  transition: transform .12s ease, box-shadow .12s ease;
}
.page-nav .pn-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(110,70,180,.16); }
.page-nav .pn-home{
  background: linear-gradient(135deg,#8B5CF6,#6D28D9); color:#fff; border: none;
  box-shadow: 0 8px 20px rgba(110,60,220,.28);
}
@media (max-width: 760px){
  .page-nav{ position: sticky; top: 6px; z-index: 30; }
  .page-nav .pn-btn{ flex: 1 1 auto; font-size: 14px; padding: 10px 12px; }
}

/* ② 禁止整页横向滚动（个别页有 12px 级别的溢出） */
html, body{ overflow-x: hidden !important; max-width: 100% !important; }

/* ③ 面板不能超出视口 */
#content, #content .panel{
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#content .panel > *{ max-width: 100% !important; box-sizing: border-box !important; }

/* ④ 导航条本身也要能换行，不撑宽 */
.page-nav{ max-width: 100% !important; box-sizing: border-box !important; }
.page-nav .pn-btn{ max-width: 100% !important; }

@media (max-width: 820px){
  /* ⑤ 所有输入框/文本域不超过容器 */
  #content input, #content textarea, #content select{
    max-width: 100% !important; box-sizing: border-box !important;
  }
}

/* 手机端栅格单列（设置页两列栅格 497px 撑破了 368px 屏幕） */
@media (max-width: 820px){
  #content .grid.c2,
  #content .grid.c3,
  #content .grid.c4,
  #content .grid{
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #content .grid > *{ width: 100% !important; max-width: 100% !important; }

  /* 表单控件不许撑宽 */
  #content input, #content textarea, #content select{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 多列行内布局统一换行 */
  #content .row{ flex-wrap: wrap !important; }
}

/* 手机端 #content 回归块级（flex 容器在手机上把内容撑到 525px，右侧被裁） */
@media (max-width: 820px){
  #content{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  #content .panel{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* 面板里所有直接子元素都不许超宽 */
  #content .panel > *{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* 长英文/URL 允许断行，别把布局撑开 */
  #content .panel, #content .panel *{
    overflow-wrap: anywhere !important;
  }
}

/* 手机端 app/main 锁宽：grid 项默认 min-width:auto，会被长内容顶宽 */
@media (max-width: 820px){
  html, body{ width: 100% !important; max-width: 100% !important; }
  #app, #app.on{
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  #app .main{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
  }
  #app .topbar, #app .content{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 手机端表格锁宽（设置页能力状态表 431px 撑破 372px 面板） */
@media (max-width: 820px){
  #content table{ width: 100% !important; table-layout: fixed !important; }
  #content table th, #content table td{
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    font-size: 12.5px !important;
    padding: 8px 6px !important;
  }
  /* 实在放不下就让表格自己横向滚动，而不是撑破页面 */
  #content table{
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}

/* ===================== 首页流程卡（新，纯 flex，无绝对定位） ===================== */
.fcard-wrap{
  width: 100%;
  margin: 22px 0 0;
  box-sizing: border-box;
}

.fcard-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/* 卡片：一行 flex —— 编号 | 标题+说明 */
.fcard{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(110,60,220,.16);
  border-radius: 18px;
  background: linear-gradient(158deg,#FFFFFF,#FFFCF7 60%,#FFF5E9);
  box-shadow: 0 10px 26px rgba(110,70,180,.09);
  cursor: pointer;
  box-sizing: border-box;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.fcard:hover{
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 16px 34px rgba(110,70,180,.16);
}

.fcard-n{
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg,#A78BFA,#6D28D9);
  box-shadow: 0 6px 16px rgba(110,60,220,.28);
}
.fcard-gold .fcard-n{
  background: linear-gradient(140deg,#F0D98A,#C9A227);
  color: #241A02;
  box-shadow: 0 6px 16px rgba(201,162,39,.30);
}

/* 标题和说明竖排，占满剩余宽度 */
.fcard-t{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  color: #221233;
  word-break: break-word;
}
.fcard-d{
  display: none;   /* 宽屏时说明放第二行，见下面的 grid 布局 */
}

/* 宽屏：标题与说明上下两行、编号在最左 */
@media (min-width: 821px){
  .fcard{
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
  }
  .fcard-n{ grid-column: 1; grid-row: 1 / span 2; }
  .fcard-t{ grid-column: 2; grid-row: 1; }
  .fcard-d{
    display: block;
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    line-height: 1.55;
    color: #8B7C9E;
  }
}

/* 手机：一列，说明要显示出来 */
@media (max-width: 820px){
  .fcard-grid{ grid-template-columns: 1fr; gap: 12px; }
  .fcard{ padding: 16px 16px; gap: 12px; align-items: flex-start; }
  .fcard-n{ flex-basis: 40px; width: 40px; height: 40px; font-size: 14px; border-radius: 11px; }
  .fcard-t{ font-size: 16px; }
  .fcard-d{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #8B7C9E;
    margin-top: 3px;
  }
  /* 手机上标题与说明上下叠：用 flex 列包一层不方便，直接让说明占满下一行 */
  .fcard{ flex-wrap: wrap; }
  .fcard-n{ order: 0; }
  .fcard-t{ order: 1; flex: 1 1 calc(100% - 52px); }
  .fcard-d{ order: 2; flex: 1 1 100%; padding-left: 52px; }
}

/* 新的流程卡出现后，旧的两张大卡不再显示 */
.panel:has(.fcard-wrap) .home-big{ display: none !important; }
.panel:has(.fcard-wrap) > .home-all{ margin-top: 26px !important; }

/* 素材库横排（.mats 原来只占 7 列网格的第 1 列） */
#content .mats{
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: start !important;
}
#content .mats > .mat{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 手机端：两列（每张卡约 170px） */
@media (max-width: 820px){
  #content .mats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
/* 超窄屏：一列 */
@media (max-width: 380px){
  #content .mats{ grid-template-columns: 1fr !important; }
}

/* （clamp 在 minmax 里无效，已移除） */

/* 素材列数最终版（提高权重，避免被其它 .mats 规则覆盖） */
#content .mats.mats{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
}
@media (max-width: 820px){
  #content .mats.mats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
@media (max-width: 360px){
  #content .mats.mats{ grid-template-columns: 1fr !important; }
}

/* 批量出片：素材与字幕横排 */

/* ① 素材组：横跨整行 + 自适应多列 */
#content .bt-mats{
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: start !important;
}
#content .bt-mats > .bt-mat{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
@media (max-width: 820px){
  #content .bt-mats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ② 字幕选择器：让承载它的卡片横跨整行，选择器自身才能铺开 */
#content .card:has(.sub-picker),
#content .card:has(.sub-row){
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}
#content .sub-picker{
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
#content .sub-pick-area{
  flex: 1 1 480px !important;
  min-width: 0 !important;
  width: auto !important;
}
#content .sub-picker .sub-stage{
  flex: 0 0 150px !important;
  width: 150px !important;
}
#content .sub-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}
#content .sub-chip{
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* 字幕选择器：块级上下结构（flex 布局会把胶囊区挤成 148px） */
#content .sub-picker{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
#content .sub-picker .sub-stage{
  width: 190px !important;
  max-width: 60% !important;
  margin-bottom: 12px !important;
}
#content .sub-picker .sub-pick-area{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
#content .sub-picker .sub-row{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
}
#content .sub-picker .sub-chip{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* 素材区去空白：父级 3 行网格把卡片顶到 900px 高区域的底部 */
#content div:has(> .bt-mats){
  align-content: start !important;
  align-items: start !important;
  grid-template-rows: none !important;
  height: auto !important;
  min-height: 0 !important;
  row-gap: 12px !important;
}
#content .bt-mats{
  grid-row: auto !important;
  align-self: start !important;
  align-content: start !important;
  height: auto !important;
}

/* 两列栅格顶部对齐：左列不再被右列内容拉伸到同高（900px） */
#content .grid.c2{ align-items: start !important; }
#content .grid.c2 > *{ align-self: start !important; height: auto !important; }

/* 隐藏「让 AI 看懂画面」分析条（客户反馈用处不大，桌面+手机都去掉） */
.vision-bar{ display: none !important; }

/* 素材容器不许裁剪：之前 [class*=mat] 的 overflow:hidden 把多余行裁掉了（手机只看到前两个素材） */
#content .bt-mats,
#content .mats{
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
#content .bt-mats > .bt-mat,
#content .mats > .mat{
  overflow: hidden !important;
}

/* 手机端批量素材两列（提高权重，确保生效） */
@media (max-width: 820px){
  #content .bt-mats.bt-mats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* 隐藏顶部功能说明文字（客户要求：只要标题，不要下面的介绍） */
.topbar .topbar-text .desc,
#page-desc{ display: none !important; }

/* 顶部静态导航按钮（切页零延迟） */
.topbar-nav{ display: none; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; }
.topbar-nav .tb-btn{
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  border: 1px solid rgba(110,60,220,.22); background: #fff; color: var(--brand);
}
.topbar-nav .tb-btn:hover{ border-color: var(--brand); }
.topbar-nav .tb-home{
  background: linear-gradient(135deg,#8B5CF6,#6D28D9); color:#fff; border:none;
}
@media (max-width: 760px){
  .topbar-nav .tb-btn{ height: 32px; padding: 0 10px; font-size: 12.5px; }
}

/* 隐藏旧的页内导航条（已改为顶部静态按钮，防止残留重复按钮） */
.page-nav{ display: none !important; }