/* ==========================================================================
   讲匠 · 设计系统（Design System）
   --------------------------------------------------------------------------
   分层：① 令牌 → ② 基础 → ③ 布局 → ④ 组件 → ⑤ 页面专用
   规则：组件只引用令牌，不写裸色值；新增组件必须复用已有间距/圆角/阴影档位。
   ========================================================================== */

/* ── ① 令牌 ───────────────────────────────────────────────────────────── */
:root{
  /* 品牌：翡翠绿（主）+ 靛紫（AI 动作）*/
  --brand-50:#ECFDF5; --brand-100:#D1FAE5; --brand-200:#A7F3D0;
  --brand-300:#6EE7B7; --brand-400:#34D399; --brand-500:#10B981;
  --brand-600:#059669; --brand-700:#047857; --brand-800:#065F46; --brand-900:#064E3B;

  --accent-50:#EEF2FF; --accent-100:#E0E7FF; --accent-200:#C7D2FE; --accent-300:#A5B4FC;
  --accent-400:#818CF8; --accent-500:#6366F1;
  --accent-600:#4F46E5; --accent-700:#4338CA;

  /* 中性：冷灰（slate）*/
  --ink-50:#F8FAFC;  --ink-100:#F1F5F9; --ink-200:#E2E8F0; --ink-300:#CBD5E1;
  --ink-400:#94A3B8; --ink-500:#64748B; --ink-600:#475569; --ink-700:#334155;
  --ink-800:#1E293B; --ink-900:#0F172A; --ink-950:#020617;

  /* 语义色 */
  --ok:#059669; --ok-bg:#ECFDF5;
  --warn:#B45309; --warn-bg:#FFFBEB;
  --danger:#DC2626; --danger-bg:#FEF2F2;
  --info:#0369A1; --info-bg:#F0F9FF;
  --credit:#F59E0B; --credit-bg:#FFFBEB;

  /* 圆角 */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-full:999px;

  /* 阴影（3 级 + 悬浮）*/
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 4px 14px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04);
  --sh-lg:0 14px 36px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.05);
  --sh-xl:0 28px 70px rgba(15,23,42,.18);
  --ring:0 0 0 3px rgba(16,185,129,.16);
  --ring-accent:0 0 0 3px rgba(99,102,241,.18);

  /* 渐变 */
  --grad-brand:linear-gradient(135deg,#10B981 0%,#047857 100%);
  --grad-accent:linear-gradient(135deg,#6366F1 0%,#4338CA 100%);
  --grad-ink:linear-gradient(135deg,#1E293B 0%,#0F172A 100%);

  /* 字体 */
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* 动效 */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:140ms; --t:200ms; --t-slow:320ms;

  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:60px;
}

/* ── ② 基础 ───────────────────────────────────────────────────────────── */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* ★ 恒定预留滚动条槽位：页面高度不同时（如素材库不滚动、生成页要滚动），
     滚动条出现/消失会让视口宽度在 W 与 W-15 之间跳变 → 整页横向平移 = "抖动"。
     scrollbar-gutter 让槽位始终占位，宽度恒定。 */
  scrollbar-gutter:stable; }
body{
  overflow-x:hidden;
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(16,185,129,.06), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(99,102,241,.05), transparent 55%),
    var(--ink-50);
  background-attachment:fixed;
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
*{ box-sizing:border-box; }
::selection{ background:var(--brand-200); color:var(--brand-900); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--ink-300); border-radius:var(--r-full); border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--ink-400); background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

h1,h2,h3,h4{ letter-spacing:-.01em; line-height:1.25; }
.num{ font-variant-numeric:tabular-nums; }

/* 统一图标 */
.ico{ width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; flex:none;
      fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ico-lg{ width:1.4em; height:1.4em; }
.ico-sm{ width:.95em; height:.95em; }

/* ── ③ 布局 ───────────────────────────────────────────────────────────── */
.shell{ max-width:1440px; margin:0 auto; padding-left:16px; padding-right:16px; }
@media(min-width:640px){ .shell{ padding-left:24px; padding-right:24px; } }
.page{ padding-top:20px; padding-bottom:40px; }
.stack{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* ★ 溢出防护：grid / flex 子项默认 min-width:auto，
   会被内部 nowrap（truncate）内容的 min-content 撑破 →
   移动端整页横向溢出。统一把子项最小宽度归零，交给内部元素自己缩。 */
.grid > *{ min-width:0; }
.flex > .stack{ min-width:0; }

.section-title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:650; color:var(--ink-800); }
.section-title .ico{ color:var(--brand-600); }
.muted{ color:var(--ink-500); }
.tiny{ font-size:12px; line-height:1.6; }

/* ── ④ 组件 ───────────────────────────────────────────────────────────── */

/* 按钮 --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 16px; border-radius:var(--r-md);
  font-size:14px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn .ico{ width:1.15em; height:1.15em; }

.btn-primary{
  background:var(--grad-brand); color:#fff; box-shadow:0 1px 2px rgba(4,120,87,.25), 0 6px 16px -6px rgba(5,150,105,.55);
}
.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 2px 4px rgba(4,120,87,.25), 0 10px 24px -8px rgba(5,150,105,.6); }
.btn-primary:focus-visible{ outline:none; box-shadow:var(--ring), 0 6px 16px -6px rgba(5,150,105,.5); }

.btn-accent{ background:var(--grad-accent); color:#fff; box-shadow:0 1px 2px rgba(67,56,202,.25), 0 6px 16px -6px rgba(79,70,229,.5); }
.btn-accent:hover{ filter:brightness(1.06); }

.btn-ghost{
  background:#fff; color:var(--ink-700); border-color:var(--ink-300); box-shadow:var(--sh-xs);
}
.btn-ghost:hover{ background:var(--ink-50); border-color:var(--ink-400); color:var(--ink-900); }

.btn-soft{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.btn-soft:hover{ background:var(--brand-100); }

.btn-quiet{ background:transparent; color:var(--ink-600); }
.btn-quiet:hover{ background:var(--ink-100); color:var(--ink-900); }

/* 危险操作（删除）—— 两步确认用，第二下才真的删 */
.btn-danger{ background:#fff; color:var(--danger); border-color:#FECACA; }
.btn-danger:hover{ background:var(--danger-bg); border-color:#FCA5A5; color:var(--danger); }

.btn-sm{ height:34px; padding:0 12px; font-size:13px; border-radius:var(--r-sm); }
.btn-lg{ height:50px; padding:0 26px; font-size:16px; border-radius:var(--r-lg); }
.btn-icon{ width:40px; padding:0; }
.btn-icon.btn-sm{ width:34px; }
.btn-block{ width:100%; }

/* 兼容旧类名 */
.btn-primary-sm{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
  border-radius:var(--r-sm); background:var(--grad-brand); color:#fff; font-weight:600; font-size:13.5px;
  border:0; cursor:pointer; box-shadow:0 1px 2px rgba(4,120,87,.22); }
.btn-primary-sm:hover{ filter:brightness(1.06); }
.btn-fixed-bottom{ position:fixed; left:0; right:0; bottom:0; z-index:50; height:56px; border-radius:0;
  width:100%; padding-bottom:var(--safe-b); }

/* 分段控件 ------------------------------------------------------------ */
.seg{ display:inline-flex; padding:4px; gap:3px; background:var(--ink-100); border-radius:var(--r-md);
      border:1px solid var(--ink-200); box-shadow:inset 0 1px 2px rgba(15,23,42,.03); }
.seg-item{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 16px;
  border:0; background:transparent; border-radius:var(--r-sm); cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink-500); white-space:nowrap;
  transition:all var(--t-fast) var(--ease);
}
.seg-item:hover{ color:var(--ink-800); }
.seg-item.on{ background:#fff; color:var(--ink-900); box-shadow:var(--sh-sm); }
.seg-item .ico{ color:var(--ink-400); }
.seg-item.on .ico{ color:var(--brand-600); }

/* 卡片 ---------------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.card-pad{ padding:18px; }
.card-lg{ border-radius:var(--r-xl); box-shadow:var(--sh-md); }
.card-flat{ box-shadow:none; }
.card-head{ padding:14px 18px; border-bottom:1px solid var(--ink-200); display:flex; align-items:center; gap:10px; }
.card-body{ padding:18px; }

/* 面板（深色）*/
.panel-ink{ background:var(--grad-ink); color:#E2E8F0; border:1px solid rgba(255,255,255,.06); }

/* 徽标 / 芯片 --------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px;
  border-radius:var(--r-full); background:var(--ink-100); color:var(--ink-600);
  font-size:12.5px; font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.chip-brand{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.chip-accent{ background:var(--accent-50); color:var(--accent-700); border-color:var(--accent-100); }
.chip-credit{ background:var(--credit-bg); color:#92400E; border-color:#FDE68A; }

.credit-chip{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px;
  border-radius:var(--r-full); background:linear-gradient(180deg,#FFFDF5,#FFF7E6);
  color:#8a5a00; font-size:14px; font-weight:700; border:1px solid #FDE9C2;
  box-shadow:var(--sh-xs); white-space:nowrap; transition:box-shadow var(--t-fast) var(--ease);
}
.credit-chip:hover{ box-shadow:var(--sh-sm); }
.credit-chip b{ font-variant-numeric:tabular-nums; }
.credit-chip.low{ background:#FEF2F2; color:#B91C1C; border-color:#FECACA; }
.credit-chip.low::after{ content:""; width:6px; height:6px; border-radius:50%; background:#EF4444; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* 状态标签 ------------------------------------------------------------ */
.tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-full);
      font-size:12px; font-weight:600; line-height:1.5; }
.tag-ok{ background:var(--ok-bg); color:var(--ok); }
.tag-run{ background:var(--info-bg); color:var(--info); }
.tag-fail{ background:var(--danger-bg); color:var(--danger); }
.tag-wait{ background:var(--warn-bg); color:var(--warn); }
.tag-gray{ background:var(--ink-100); color:var(--ink-500); }
.tag-soft{ display:inline-block; padding:2px 9px; margin:0 5px 5px 0; background:var(--ink-100);
  color:var(--ink-600); border-radius:var(--r-xs); font-size:12px; }
.tag-brand{ display:inline-block; padding:2px 9px; background:var(--brand-50); color:var(--brand-700);
  border-radius:var(--r-xs); font-size:12px; font-weight:600; }

/* 表单 ---------------------------------------------------------------- */
.field{ display:block; }
.field-label{ display:block; font-size:13px; font-weight:600; color:var(--ink-700); margin-bottom:7px; }
.field-hint{ font-size:12px; color:var(--ink-400); margin-top:6px; line-height:1.6; }

/* ★★ Tailwind preflight 会吃掉裸控件的内边距（实测 /create/ 页）
   `tailwind.css` 在 `app.css` **之后**加载（base.html 里有意为之），而它的 preflight 有
   `button,input,optgroup,select,textarea{ margin:0; padding:0 }` —— **元素选择器 0-0-1**，
   和下面这条里的 `textarea` / `select` 同优先级 → **后加载者赢** → 内边距被清零。
   结果：`input[type=text]`（0-1-1，靠属性选择器抬了一级）没事，
   而**不带 class 的 `<select>` / `<textarea>` 左右内边距全是 0**：
   音色 / 画幅 / 画面主题 / 目标时长 文字贴着边框，下拉箭头压在文字上。
   修法：给命中条件加 `:not([hidden])` 抬到 **0-1-1**（不用 `!important`，也不改加载顺序）。
   ★ 以后凡是**只靠元素选择器**命中表单控件的规则，都要这么抬一级。 */
.inp, textarea:not([hidden]), input[type=text], input[type=tel], input[type=url], select:not([hidden]){
  width:100%; border:1px solid var(--ink-200); border-radius:var(--r-md);
  background:#fff; color:var(--ink-900); font-family:inherit; font-size:14.5px;
  padding:0 13px; height:44px; outline:none;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  box-shadow:var(--sh-xs);
}
/* ★ textarea 自适应高度（rows 说了算）。
   必须写 `textarea.inp` 而不是光秃秃的 `textarea`：
   上面的 `.inp` 是**类选择器**（0-1-0），优先级高于**类型选择器** `textarea`（0-0-1），
   于是 `height:44px` 一直赢，`rows` 完全失效 —— 文本框被压成一行高。
   实测踩过（改稿面板）：正文框渲染 44px，而内容需要 381px；
   所有 `<textarea class="inp">` 都中招（定位页 rows=7 的也是）。 */
textarea:not([hidden]), textarea.inp{ height:auto; padding:12px 14px; line-height:1.8; resize:vertical; }
.inp:hover, textarea:hover, input:hover, select:hover{ border-color:var(--ink-300); }
.inp:focus, textarea:focus, input:focus, select:focus{ border-color:var(--brand-500); box-shadow:var(--ring); }
input::placeholder, textarea::placeholder{ color:var(--ink-400); }
select:not([hidden]){ appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:16px; }
label{ font-size:13.5px; font-weight:600; color:var(--ink-700); }
input[type=checkbox]{ width:16px; height:16px; accent-color:var(--brand-600); cursor:pointer; }

/* 开关 ---------------------------------------------------------------- */
.switch{ position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch .track{ width:42px; height:24px; border-radius:var(--r-full); background:var(--ink-300);
  transition:background var(--t) var(--ease); flex:none; position:relative; }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease); }
.switch input:checked + .track{ background:var(--brand-500); }
.switch input:checked + .track::after{ transform:translateX(18px); }

/* 胶囊选择 ------------------------------------------------------------ */
/* ★ #1 同导航：字重恒定 500（不改 600），避免选中时宽度变化把整排挤动 */
.pill{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
  border:1px solid var(--ink-200); border-radius:var(--r-full); background:#fff; color:var(--ink-600);
  font-size:13px; font-weight:500; cursor:pointer;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.pill:hover{ border-color:var(--brand-400); color:var(--brand-700); background:var(--brand-50); }
.pill-on{ background:var(--grad-brand); border-color:transparent; color:#fff;
  box-shadow:0 1px 2px rgba(4,120,87,.2); }
.pill-on:hover{ background:var(--grad-brand); color:#fff; }

/* 进度条 -------------------------------------------------------------- */
.progress{ height:7px; background:var(--ink-100); border-radius:var(--r-full); overflow:hidden; }
.progress > div{ height:100%; border-radius:var(--r-full); background:var(--grad-brand);
  transition:width var(--t-slow) var(--ease); position:relative; }
.progress > div::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:sheen 1.4s infinite; }
@keyframes sheen{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

/* 骨架 / 加载 ---------------------------------------------------------- */
.spin{ display:inline-block; width:15px; height:15px; border:2px solid var(--ink-200);
  border-top-color:var(--brand-500); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.skel{ background:linear-gradient(90deg,var(--ink-100),var(--ink-200),var(--ink-100));
  background-size:200% 100%; animation:skel 1.3s infinite; border-radius:var(--r-sm); }
@keyframes skel{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* 空态 ---------------------------------------------------------------- */
.empty{ text-align:center; padding:52px 20px; color:var(--ink-500); }
.empty .ico-wrap{ width:66px; height:66px; margin:0 auto 15px; border-radius:var(--r-2xl);
  display:grid; place-items:center; color:var(--brand-600);
  background:linear-gradient(160deg,var(--brand-50),#fff);
  border:1px solid var(--brand-100); box-shadow:0 8px 20px -12px rgba(5,150,105,.5); }
.empty .ico-wrap .ico{ width:29px; height:29px; stroke-width:1.55; }
.empty-title{ font-size:15.5px; font-weight:650; color:var(--ink-800); }
.empty-desc{ font-size:13px; color:var(--ink-400); margin-top:5px; line-height:1.7; }

/* 折叠 ---------------------------------------------------------------- */
.fold{ overflow:hidden; }
.fold-head{ cursor:pointer; user-select:none; transition:background var(--t-fast) var(--ease); }
.fold-head:hover{ background:var(--ink-50); }
.fold-body{ display:none; }
.fold.open .fold-body{ display:block; animation:fade-down var(--t) var(--ease); }
.fold.open .fold-arrow{ transform:rotate(90deg); }
.fold-arrow{ transition:transform var(--t) var(--ease); display:inline-block; color:var(--ink-400); }
@keyframes fade-down{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* 导航 ---------------------------------------------------------------- */
/* ★ #1 修复导航抖动：
   ① 激活态不再改 font-weight（500→600 会让文字变宽 → 整排右移）
   ② 过渡只保留 background-color / color（transition:all 会把 font-weight 也插值，
      渲染成 520/540/560 的中间字重 → 逐帧重排 = 字重蠕动）
   ③ 当前页用「底部指示条」标记，指示条绝对定位，不占布局 → 位移恒为 0 */
.nav-link{ position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border-radius:var(--r-sm); color:var(--ink-600);
  font-size:14px; font-weight:500; white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.nav-link .ico{ color:var(--ink-400); transition:color var(--t-fast) var(--ease); }
.nav-link:hover{ background:var(--ink-100); color:var(--ink-900); }
.nav-link:hover .ico{ color:var(--ink-600); }
.nav-link.active{ color:var(--brand-700); background:var(--brand-50); }
.nav-link.active .ico{ color:var(--brand-600); }
/* 底部指示条：绝对定位，不参与布局 → 切换时零位移 */
.nav-link::after{ content:""; position:absolute; left:11px; right:11px; bottom:2px; height:2.5px;
  border-radius:2px; background:var(--brand-500); opacity:0;
  transform:scaleX(.4); transition:opacity var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease); }
.nav-link.active::after{ opacity:1; transform:scaleX(1); }

/* ★ 顶栏稳定性：导航分级 + 兜底收窄
   ────────────────────────────────────────────────────────────────────────
   一级 4 项（生成/定位/选题/素材库）常显；
   二级 5 项（模型/历史/样片/价格/指南）≥1140px 才由 nav:inline-flex 放出，
   窄屏走 #menu-btn 汉堡菜单（见 base.html）。
   若不分级：9 项 white-space:nowrap 共 679px 不可压缩，
   768px 窗口里会把右侧「积分 / 昵称」挤出屏幕（实测溢出 227px）→ 顶栏横向跳。

   下面这段是**兜底**：给 nav 加 min-width:0 + 横向滚动。
   正常情况永不触发（分级后已放得下）；万一遇到极窄/超大字号，
   导航自己收窄并滑动，右侧「积分/昵称/菜单」始终留在屏内。
   滚动条隐藏：避免多出一条视觉元素，也避免它改变 nav 高度。 */
header nav{ min-width:0; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; }
header nav::-webkit-scrollbar{ width:0; height:0; }
header .credit-chip{ flex:none; }

/* <1140px：导航只剩一级 4 项（约 308px），但仍差 2px 放不下
   （768px 窗口可用 306px）→ 把 nav-link 左右内边距各收 2px，省 16px 即可。
   1140px 以上是 9 项全开，内边距保持 11px。 */
@media (max-width:1139px){
  .nav-link{ padding-left:9px; padding-right:9px; }
  .nav-link::after{ left:9px; right:9px; }
}

.mm-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:11px 4px; border-radius:var(--r-md); background:var(--ink-50); color:var(--ink-600);
  font-size:11.5px; font-weight:500;
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.mm-item .ico{ width:19px; height:19px; }
.mm-item:active{ background:var(--brand-50); color:var(--brand-700); }

/* 表格 ---------------------------------------------------------------- */
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.tbl th{ text-align:left; padding:11px 14px; background:var(--ink-50); color:var(--ink-500);
  font-weight:600; font-size:12.5px; border-bottom:1px solid var(--ink-200); }
.tbl th:first-child{ border-top-left-radius:var(--r-md); }
.tbl th:last-child{ border-top-right-radius:var(--r-md); }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--ink-100); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover td{ background:var(--ink-50); }

/* Toast --------------------------------------------------------------- */
.toast{ pointer-events:auto; display:inline-flex; align-items:center; gap:8px;
  background:rgba(15,23,42,.94); color:#fff; backdrop-filter:blur(10px);
  padding:11px 18px; border-radius:var(--r-md); font-size:13.5px; font-weight:500;
  box-shadow:var(--sh-lg); animation:tin var(--t) var(--ease); }
.toast.err{ background:rgba(185,28,28,.96); }
.toast.ok{ background:rgba(5,150,105,.96); }
.toast.warn{ background:rgba(180,83,9,.96); }
@keyframes tin{ from{ opacity:0; transform:translateY(-10px) scale(.97) } to{ opacity:1; transform:none } }

/* ★ #2 分镜状态条（创作页）：告诉用户分镜在不在、要不要重切 */
.segbar{ display:flex; align-items:center; gap:10px; margin-top:10px;
  background:var(--brand-50); border:1px solid var(--brand-100);
  border-radius:var(--r-md); padding:10px 13px; }
.segbar>span:first-child{ color:var(--brand-600); font-weight:800; flex:none; }
.segbar .t{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--brand-700); line-height:1.45; }
.segbar .t small{ display:block; font-size:11.5px; font-weight:500; opacity:.85; margin-top:1px; }
.segbar .go{ flex:none; border:1px solid var(--brand-200); background:#fff; color:var(--brand-700);
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:var(--r-sm); cursor:pointer;
  transition:background-color var(--t-fast) var(--ease); }
.segbar .go:hover{ background:var(--brand-50); }
.segbar.warn{ background:var(--amber-50); border-color:var(--amber-100); }
.segbar.warn>span:first-child{ color:var(--amber-600); }
.segbar.warn .t{ color:var(--amber-600); }

/* ★ #3 全局 tooltip：任何元素加 data-tip="说明" 即可
   —— 不用原生 title（延迟 1s、样式不可控、移动端没有） */
#tip{ position:fixed; z-index:9999; pointer-events:none;
  background:var(--ink-900); color:#fff; font-size:12px; font-weight:600; line-height:1.45;
  padding:7px 11px; border-radius:8px; max-width:min(280px,72vw);
  box-shadow:0 8px 24px rgba(15,23,42,.28);
  opacity:0; transform:translateY(3px); transition:opacity .16s var(--ease), transform .16s var(--ease); }
#tip.on{ opacity:1; transform:translateY(0); }
#tip::after{ content:""; position:absolute; border:5px solid transparent; }
#tip.below::after{ bottom:100%; left:50%; margin-left:-5px; border-bottom-color:var(--ink-900); }
#tip.above::after{ top:100%; left:50%; margin-left:-5px; border-top-color:var(--ink-900); }
/* 触屏：长按 500ms 才弹，且不要挡住点击 */
@media (hover:none){ #tip{ font-size:12.5px; } }

/* 手机预览框 ---------------------------------------------------------- */
.phone{
  position:relative; width:100%; max-width:250px; margin:0 auto;
  aspect-ratio:9/16; border-radius:30px; padding:9px;
  background:linear-gradient(160deg,#334155,#0F172A);
  box-shadow:var(--sh-lg), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone::before{ content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:56px; height:5px; border-radius:var(--r-full); background:rgba(255,255,255,.22); z-index:2; }
.phone-screen{ position:relative; width:100%; height:100%; border-radius:23px; overflow:hidden;
  background:var(--ink-100); display:grid; place-items:center; }
.phone-screen video, .phone-screen img{ width:100%; height:100%; object-fit:cover; display:block; }
.phone-screen .ph-empty{ text-align:center; color:var(--ink-400); padding:20px; }

/* AI 助手 ------------------------------------------------------------- */
.ai-launcher{ position:fixed; right:20px; bottom:calc(20px + var(--safe-b)); z-index:60;
  height:48px; padding:0 18px; border-radius:var(--r-full); border:1px solid var(--ink-200);
  cursor:pointer; background:#fff; color:var(--ink-800); box-shadow:var(--sh-lg);
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  transition:all var(--t) var(--ease); }
.ai-launcher:hover{ transform:translateY(-2px); box-shadow:var(--sh-xl); }
.ai-launcher .ico{ color:var(--accent-600); }
.ai-panel{ position:fixed; right:20px; bottom:calc(80px + var(--safe-b)); z-index:60;
  width:360px; max-width:calc(100vw - 40px); height:470px; max-height:72vh;
  background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-xl);
  box-shadow:var(--sh-xl); display:none; flex-direction:column; overflow:hidden; }
.ai-panel.open{ display:flex; animation:fade-up var(--t) var(--ease); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (max-width:640px){
  .ai-panel{ right:0; left:0; bottom:0; width:100%; max-width:100%; height:76vh; border-radius:var(--r-xl) var(--r-xl) 0 0; }
  .ai-launcher{ right:16px; }
}

/* AI 结果弹层 --------------------------------------------------------- */
.ai-modal{ position:fixed; inset:0; z-index:90; display:none; background:rgba(15,23,42,.5);
  backdrop-filter:blur(4px); padding:20px; align-items:center; justify-content:center;
  height:100dvh; }   /* ★ dvh：手机地址栏收起/展开时弹窗不会被裁掉 */
.ai-modal.open{ display:flex; animation:tin var(--t) var(--ease); }
.ai-modal-box{ background:#fff; border-radius:var(--r-xl); width:100%; max-width:760px;
  max-height:88dvh; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--sh-xl); }
@media (max-width:640px){
  .ai-modal{ padding:0; align-items:flex-end; }
  .ai-modal-box{ max-width:100%; max-height:94dvh; border-radius:var(--r-xl) var(--r-xl) 0 0; }
}

/* AI 结果卡片 --------------------------------------------------------- */
.ai-ver{ border:1px solid var(--ink-200); border-radius:var(--r-md); padding:15px; margin-bottom:12px;
  background:#fff; transition:all var(--t-fast) var(--ease); }
.ai-ver:hover{ border-color:var(--brand-300); box-shadow:var(--sh-md); }
.ai-ver h4{ font-size:14px; font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.ai-ver p{ font-size:13.5px; line-height:1.8; color:var(--ink-600); white-space:pre-wrap; }
.ai-ver .ai-actions{ margin-top:11px; display:flex; gap:8px; }
.ai-badge{ font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--r-full);
  background:var(--brand-50); color:var(--brand-700); }
.ai-badge.warn{ background:var(--warn-bg); color:var(--warn); }
.ai-spin{ display:inline-block; width:14px; height:14px; border:2px solid var(--ink-200);
  border-top-color:var(--brand-500); border-radius:50%; animation:spin .7s linear infinite; }

/* 预览 iframe 加载遮罩：弹窗先开，iframe 真正渲染完才撤掉（避免黑屏看着像卡死） */
.pv-wrap{ position:relative; width:270px; height:480px; }
.pv-wrap > iframe{ width:270px; height:480px; display:block; border:0; border-radius:10px; background:#000; }
.pv-loading{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; background:#0b0b0f; border-radius:10px;
  transition:opacity .35s ease; }
.pv-loading.hide{ opacity:0; pointer-events:none; }
.pv-loading .ai-spin{ width:26px; height:26px; border-color:rgba(255,255,255,.25); border-top-color:#fff; }
.pv-loading-t{ font-size:12.5px; color:rgba(255,255,255,.7); }

/* 风格卡 / 主题卡 ----------------------------------------------------- */
.style-card{ border:1.5px solid var(--ink-200); border-radius:var(--r-md); overflow:hidden;
  background:#fff; cursor:pointer; transition:all var(--t-fast) var(--ease); text-align:left; width:100%; }
.style-card:hover{ border-color:var(--brand-400); box-shadow:var(--sh-md); transform:translateY(-1px); }
.style-card.selected{ border-color:var(--brand-500); box-shadow:var(--ring); }
.style-thumb{ position:relative; aspect-ratio:16/9; background:var(--grad-brand); }
.style-thumb img{ width:100%; height:100%; object-fit:cover; }
.style-cost{ color:#92400E; font-weight:700; font-size:11.5px; background:var(--credit-bg);
  padding:2px 8px; border-radius:var(--r-full); }

.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
.theme-card{ border:1.5px solid var(--ink-200); border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  background:#fff; text-align:left; padding:0; transition:all var(--t-fast) var(--ease); }
.theme-card:hover{ border-color:var(--brand-400); transform:translateY(-2px); box-shadow:var(--sh-md); }
.theme-card.selected{ border-color:var(--brand-500); box-shadow:var(--ring); }
.theme-swatch{ height:58px; display:grid; place-items:center; font-size:13px; font-weight:700; }
.theme-card .tc-body{ padding:9px 11px; }
.theme-card .tc-body b{ font-size:12.5px; display:block; }
.theme-card .tc-body span{ font-size:11px; color:var(--ink-400); }

/* 提示词框 ------------------------------------------------------------ */
.prompt-box{ background:var(--ink-50); border:1px solid var(--ink-200); border-radius:var(--r-md);
  padding:14px 16px; font-size:13.5px; line-height:1.9; color:var(--ink-600);
  white-space:pre-wrap; word-break:break-word; font-family:var(--font); }

/* 步骤条 -------------------------------------------------------------- */
.steps{ display:flex; flex-direction:column; gap:2px; counter-reset:step; }
.steps li{ position:relative; padding:5px 0 5px 30px; font-size:13px; color:var(--ink-500); list-style:none; }
.steps li::before{ counter-increment:step; content:counter(step);
  position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%;
  background:var(--ink-100); color:var(--ink-500); font-size:11px; font-weight:700;
  display:grid; place-items:center; transition:all var(--t) var(--ease); }
.steps li.done{ color:var(--ink-400); text-decoration:line-through; }
.steps li.done::before{ content:"✓"; background:var(--brand-100); color:var(--brand-700); text-decoration:none; }
.steps li.cur{ color:var(--ink-900); font-weight:600; }
.steps li.cur::before{ background:var(--grad-brand); color:#fff; box-shadow:0 0 0 3px var(--brand-100); }

/* 吸底操作条 ---------------------------------------------------------- */
.actionbar{ position:sticky; bottom:0; z-index:40; margin-top:4px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border:1px solid var(--ink-200); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:12px 14px; display:flex; align-items:center; gap:14px; }
@media (max-width:1023px){ .actionbar{ display:none; } }

/* 统计小块 ------------------------------------------------------------ */
.stat{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--ink-50); border:1px solid var(--ink-200); }
.stat .k{ font-size:11.5px; color:var(--ink-400); font-weight:500; }
.stat .v{ font-size:17px; font-weight:700; color:var(--ink-900); font-variant-numeric:tabular-nums; }

/* 分隔 ---------------------------------------------------------------- */
.hr{ height:1px; background:var(--ink-200); border:0; margin:0; }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-300); display:inline-block; }

/* ── ⑤ 页面专用 ───────────────────────────────────────────────────────── */

/* 创作页：内容区大输入 */
.compose{ background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-xl);
  box-shadow:var(--sh-md); overflow:hidden; transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.compose:focus-within{ border-color:var(--brand-300); box-shadow:var(--sh-lg), var(--ring); }
.compose textarea{ border:0; box-shadow:none; border-radius:0; font-size:15.5px; line-height:1.9;
  min-height:260px; padding:18px 20px; background:transparent; }
.compose textarea:focus{ box-shadow:none; }
.compose textarea:hover{ border-color:transparent; }
.compose-tools{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--ink-100);
  background:linear-gradient(180deg,#fff,var(--ink-50)); }
.compose-head + textarea{ padding-top:12px; }
.seg-item:disabled{ opacity:.45; cursor:not-allowed; }
.seg-item:disabled:hover{ color:var(--ink-500); }

/* 定位条 */
.pos-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent-50),#fff); border:1px solid var(--accent-100); }

/* ★ A 需求：定位「双入口」选择卡 */
.mode-pick{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; text-align:left;
  padding:18px; border-radius:var(--r-lg); border:1.5px solid var(--ink-200); background:#fff;
  cursor:pointer; width:100%; transition:all var(--t-fast) var(--ease); box-shadow:var(--sh-xs); }
.mode-pick:hover{ border-color:var(--brand-400); background:var(--brand-50);
  box-shadow:var(--sh-md); transform:translateY(-1px); }
.mode-pick:focus-visible{ outline:none; box-shadow:var(--ring); border-color:var(--brand-400); }
.mode-pick.accent:hover{ border-color:var(--accent-400); background:var(--accent-50); }
.mode-pick.accent:focus-visible{ box-shadow:var(--ring-accent); border-color:var(--accent-400); }
.mode-pick .mp-t{ font-size:15.5px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--ink-900); }
.mode-pick .mp-d{ font-size:13px; color:var(--ink-500); line-height:1.75; }
.mode-pick .mp-go{ font-size:12.5px; font-weight:600; color:var(--brand-700); display:inline-flex; align-items:center; gap:5px; }
.mode-pick.accent .mp-go{ color:var(--accent-700); }

/* ★ A3：AI 起草后高亮「AI 填的」字段 —— 用户一眼看出哪些要核对 */
.ai-fill{ background:var(--accent-50) !important; border-color:var(--accent-300) !important; }
.filled-wrap{ position:relative; border-left:3px solid var(--accent-400);
  padding-left:12px; margin-left:-15px; border-radius:2px; }

/* AI 起草结果说明条 */
.ai-note{ display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent-50),#fff); border:1px solid var(--accent-100);
  font-size:13px; color:var(--ink-700); line-height:1.75; align-items:flex-start; }
.ai-note .ico{ color:var(--accent-600); flex:none; margin-top:2px; }
.ai-note .an-t{ font-weight:700; color:var(--ink-900); }

/* 风格选择器（展开态）*/
.style-current{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--r-md);
  border:1.5px solid var(--ink-200); background:#fff; cursor:pointer; width:100%; text-align:left;
  transition:all var(--t-fast) var(--ease); }
.style-current:hover{ border-color:var(--brand-400); background:var(--brand-50); }

/* 配色方案触发器（点击展开弹窗选择）*/
.palette-trigger{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--r-md);
  border:1.5px solid var(--ink-200); background:#fff; cursor:pointer; width:100%; text-align:left;
  transition:all var(--t-fast) var(--ease); }
.palette-trigger:hover{ border-color:var(--brand-400); background:var(--brand-50); }
.palette-swatch{ width:46px; height:30px; border-radius:8px; flex:none;
  background:linear-gradient(135deg,#334155,#0f172a); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }

/* ★ 配色弹窗里的卡片：16 套 × 4 列 = 4 行，必须一屏看完。
   沿用 .style-card 的 16/9 缩略图时单行约 142px，4 行 + 说明超出行高 →
   第 4 行被弹窗底边切一半（实测）。这里把缩略图压成色卡高度。 */
.pal-card .style-thumb{ aspect-ratio:auto; height:58px; }

/* 预览卡 */
.preview-card{ background:linear-gradient(170deg,#F8FAFC,#EEF2F6); border:1px solid var(--ink-200);
  border-radius:var(--r-xl); padding:20px; box-shadow:var(--sh-md); }

/* 首页 hero */
.hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:var(--r-full);
  background:rgba(255,255,255,.75); backdrop-filter:blur(8px); border:1px solid var(--brand-100);
  color:var(--brand-700); font-size:13px; font-weight:600; box-shadow:var(--sh-sm); }

.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(900px 440px at 50% -18%, rgba(16,185,129,.16), transparent 70%),
    radial-gradient(760px 400px at 88% -6%, rgba(99,102,241,.11), transparent 66%),
    linear-gradient(180deg,#fff 0%,var(--ink-50) 100%);
  border-bottom:1px solid var(--ink-200); }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(15,23,42,.055) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 78%); }
.hero > *{ position:relative; }

.grad-text{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; }

/* 区块标题 */
.sec-h2{ font-size:26px; font-weight:700; text-align:center; letter-spacing:-.02em; color:var(--ink-900); }
.sec-sub{ text-align:center; color:var(--ink-500); margin-top:9px; font-size:15px; line-height:1.7; }
@media (max-width:640px){ .sec-h2{ font-size:22px; } .sec-sub{ font-size:14px; } }

/* 图标徽标（特性卡/身份卡） */
.ib{ width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center; flex:none; }
.ib .ico{ width:23px; height:23px; stroke-width:1.6; }
.ib-brand{ background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100); }
.ib-accent{ background:var(--accent-50); color:var(--accent-600); border:1px solid var(--accent-100); }
.ib-ink{ background:var(--ink-100); color:var(--ink-600); border:1px solid var(--ink-200); }
.ib-warn{ background:var(--warn-bg); color:var(--warn); border:1px solid #FDE68A; }
.ib-info{ background:var(--info-bg); color:var(--info); border:1px solid #BAE6FD; }
.ib-sm{ width:38px; height:38px; border-radius:var(--r-sm); }
.ib-sm .ico{ width:19px; height:19px; }

/* ★ H48 逐条复制小按钮（选题灵感包：封面大字 / 开场钩子 每条可单独复制） */
.copy-mini{ width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none;
  color:var(--ink-400); background:transparent; border:1px solid transparent; cursor:pointer;
  transition:color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease); }
.copy-mini .ico{ width:15px; height:15px; }
.copy-mini:hover{ color:var(--brand-600); background:#fff; border-color:var(--ink-200); }

/* 悬浮抬升 */
.lift{ transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); }

/* ★ H62 新手模式：收起来的项。用 !important 覆盖 Tailwind 的 display 工具类
   （那些类在 tailwind.css 里，层叠顺序晚于 app.css）。 */
.beginner .b-hide{ display:none !important; }
.lift:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--brand-200); }

/* 步骤序号 */
.step-num{ width:34px; height:34px; border-radius:var(--r-full); display:grid; place-items:center;
  font-size:15px; font-weight:800; color:#fff; background:var(--grad-brand);
  box-shadow:0 6px 14px -6px rgba(5,150,105,.6); flex:none; }

/* 强调小块（身份卡底部） */
.kv-note{ margin-top:13px; padding:9px 12px; border-radius:var(--r-sm); font-size:12.5px;
  font-weight:600; display:flex; align-items:center; gap:7px; line-height:1.5; }
.kv-note .ico{ width:15px; height:15px; }

/* CTA 卡 */
.cta-card{ background:var(--grad-ink); color:#fff; border-radius:var(--r-2xl); padding:44px 28px;
  text-align:center; position:relative; overflow:hidden; box-shadow:var(--sh-xl); }
.cta-card::after{ content:""; position:absolute; width:420px; height:420px; right:-140px; top:-180px;
  border-radius:50%; background:radial-gradient(closest-side, rgba(16,185,129,.45), transparent); }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 弹窗 v2（C 需求）：头部图标 + 副标题 + 吸底操作条
   ══════════════════════════════════════════════════════════════════════════ */
.ai-modal-box{ max-width:900px; background:var(--ink-50); }
.ai-modal-box.wide{ max-width:1080px; }
.ai-modal-box.plain{ max-width:760px; }

.aim-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; flex:none;
  background:#fff; border-bottom:1px solid var(--ink-200); }
.aim-head .ib{ flex:none; }
.aim-title{ font-size:16px; font-weight:700; color:var(--ink-900); letter-spacing:-.01em;
  display:block; line-height:1.3; }
.aim-sub{ font-size:12.5px; color:var(--ink-400); margin-top:2px; line-height:1.5; }
.aim-x{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  border:0; background:transparent; color:var(--ink-400); cursor:pointer;
  transition:all var(--t-fast) var(--ease); }
.aim-x:hover{ background:var(--ink-100); color:var(--ink-800); }

/* ★ min-height:0 必须留着：否则 flex 子项不肯收缩，内容会溢出并盖住吸底操作条 */
.aim-body{ padding:18px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch; }
.aim-body.flush{ padding:0; }

/* ★ 吸底操作条：主次分明、有分隔线（C2） */
.aim-foot{ flex:none; padding:12px 16px; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-top:1px solid var(--ink-200); }
.aim-foot .grow{ flex:1; min-width:0; }
.aim-foot .btn{ min-width:0; }

/* 统一加载态（C3） */
.ai-loading{ padding:56px 20px; text-align:center; color:var(--ink-500); }
.ai-loading .ai-spin{ width:22px; height:22px; border-width:2.5px; }
.ai-loading-t{ margin-top:14px; font-size:14.5px; font-weight:600; color:var(--ink-700); }
.ai-loading-s{ margin-top:6px; font-size:12.5px; color:var(--ink-400); line-height:1.7; }
.ai-steps-mini{ display:flex; flex-direction:column; gap:7px; max-width:330px; margin:16px auto 0; text-align:left; }
.ai-steps-mini div{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-400); }
.ai-steps-mini .n{ width:18px; height:18px; border-radius:50%; background:var(--ink-200); color:var(--ink-500);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; flex:none; }
.ai-steps-mini .on{ color:var(--brand-700); font-weight:600; }
.ai-steps-mini .on .n{ background:var(--grad-brand); color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 结果卡片 v2（C2/C4）
   ══════════════════════════════════════════════════════════════════════════ */
.ai-ver{ background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-lg);
  padding:16px; margin-bottom:12px; box-shadow:var(--sh-xs);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ai-ver:hover{ border-color:var(--brand-300); box-shadow:var(--sh-md); }
.ai-ver.picked{ border-color:var(--brand-500); box-shadow:var(--ring); }
.ai-ver h4{ font-size:14.5px; font-weight:700; margin-bottom:9px; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; }
.ai-ver p{ font-size:13.5px; line-height:1.85; color:var(--ink-600); white-space:pre-wrap;
  word-break:break-word; }
.ai-ver .ai-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* 折叠（C4）：默认只展开第一版 */
.ai-fold-head{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.ai-fold-head .chev{ transition:transform var(--t) var(--ease); color:var(--ink-400); }
.ai-fold.open .ai-fold-head .chev{ transform:rotate(90deg); }
.ai-fold .ai-fold-body{ display:none; }
.ai-fold.open .ai-fold-body{ display:block; }

/* 评分：用 tag 而不是裸文字 */
.score-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.score-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; background:var(--ink-100); color:var(--ink-600); }
.score-tag.hi{ background:var(--ok-bg); color:var(--ok); }
.score-tag.mid{ background:var(--warn-bg); color:var(--warn); }
.score-tag.lo{ background:var(--danger-bg); color:var(--danger); }
.score-total{ font-size:12px; font-weight:700; color:var(--ink-700); padding-left:4px; }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 风格选择器（E 需求）
   ══════════════════════════════════════════════════════════════════════════ */
.sp-wrap{ display:grid; grid-template-columns:172px 1fr; gap:0; min-height:420px; }
.sp-nav{ border-right:1px solid var(--ink-200); padding:12px 10px; background:#fff;
  display:flex; flex-direction:column; gap:3px; }
.sp-nav button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 11px; border-radius:var(--r-sm); border:0; background:transparent; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink-600); transition:all var(--t-fast) var(--ease); }
.sp-nav button:hover{ background:var(--ink-100); color:var(--ink-900); }
.sp-nav button.on{ background:var(--brand-50); color:var(--brand-700); }
.sp-nav .cnt{ margin-left:auto; font-size:11px; font-weight:500; color:var(--ink-400); }

.sp-main{ padding:16px; overflow-y:auto; min-height:0; max-height:min(64vh,600px); }
.sp-cols{ display:grid; grid-template-columns:1fr 264px; gap:14px; align-items:start; }
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; }
.sp-detail-col{ position:sticky; top:0; }

.sp-card{ position:relative; border:1.5px solid var(--ink-200); border-radius:var(--r-md); overflow:hidden;
  background:#fff; cursor:pointer; text-align:left; padding:0;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.sp-card:hover{ border-color:var(--brand-400); transform:translateY(-2px); box-shadow:var(--sh-md); }
.sp-card.selected{ border-color:var(--brand-500); box-shadow:var(--ring); }
.sp-thumb{ position:relative; aspect-ratio:16/10; background:var(--grad-brand); overflow:hidden; }
.sp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-thumb .ph{ position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:10px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em; }
.sp-thumb .ph small{ display:block; font-size:10.5px; font-weight:500; opacity:.8; margin-top:3px; }
.sp-play{ position:absolute; right:7px; bottom:7px; width:28px; height:28px; border-radius:50%;
  border:0; display:grid; place-items:center; cursor:pointer; color:#fff;
  background:rgba(15,23,42,.62); backdrop-filter:blur(4px); transition:all var(--t-fast) var(--ease); }
.sp-play:hover{ background:var(--brand-600); transform:scale(1.08); }
.sp-play .ico{ width:14px; height:14px; }
.sp-rec{ position:absolute; left:7px; top:7px; padding:2px 8px; border-radius:var(--r-full);
  font-size:10.5px; font-weight:700; color:#fff; background:var(--grad-accent);
  box-shadow:0 2px 8px -2px rgba(67,56,202,.7); }
/* ★ P2：非精选风格（已合并 / 逐帧）在「显示全部风格」里的角标。
   放左下角：左上被「推荐」占、右下被「看动效预览」占，这里不冲突。
   文案如实说明"它去哪了"，用户才敢放心换到接替者。 */
.sp-legacy-badge{ position:absolute; left:7px; bottom:7px; max-width:calc(100% - 46px);
  padding:2px 7px; border-radius:var(--r-full); font-size:10px; font-weight:600; color:#fff;
  background:rgba(15,23,42,.68); backdrop-filter:blur(4px); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
/* ★ P2：详情面板里的"合并关系"说明行（已并入 X / 接管了 N 种老风格） */
.sp-dep{ font-size:12px; line-height:1.7; color:var(--ink-500); margin-top:7px;
  padding:7px 9px; border-radius:var(--r-sm); background:var(--ink-50); }
.sp-body{ padding:9px 11px; }
.sp-body b{ font-size:13px; display:block; color:var(--ink-900); }
/* ★ H42 风格卡片第 1 个信息位：适合什么内容（原来只有名字，挑风格要逐个点开） */
.sp-body .sp-fit{ font-size:11px; color:var(--ink-500); line-height:1.45; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sp-body .meta{ font-size:11px; color:var(--ink-400); margin-top:5px; display:flex; align-items:center;
  gap:5px; flex-wrap:wrap; }
/* ★ H42 第 3 个信息位：素材要求（需实拍素材的必须提前说，否则用户选完才发现做不了） */
.sp-need{ color:var(--warn); font-weight:600; }
.sp-free{ color:var(--ink-400); }
.sp-pick{ position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand-500); color:#fff; opacity:0; transform:scale(.7);
  transition:all var(--t-fast) var(--ease); }
.sp-card.selected .sp-pick{ opacity:1; transform:none; }
.sp-card.selected .sp-rec{ display:none; }
/* ★ #4 次优候选卡：同尺寸并排，可一键切换 */
.sp-alt{ flex:1; min-width:0; }
.sp-alt:hover{ border-color:var(--brand-400); }

/* 详情条（选中风格后出现） */
.sp-detail{ padding:14px; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--ink-200); box-shadow:var(--sh-xs); }
.sp-detail h5{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sp-detail p{ font-size:13px; color:var(--ink-600); line-height:1.8; margin-top:7px; }
.sp-detail .facts{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }

/* 适配度提示条（F2） */
.fit-banner{ display:flex; gap:11px; padding:12px 14px; border-radius:var(--r-md); margin-top:12px;
  font-size:13px; line-height:1.7; border:1px solid; align-items:flex-start; }
.fit-banner .ico{ width:18px; height:18px; margin-top:1px; flex:none; }
.fit-banner b{ font-weight:700; }
.fit-good{ background:var(--ok-bg); border-color:#A7F3D0; color:#065F46; }
.fit-ok{ background:var(--warn-bg); border-color:#FDE68A; color:#92400E; }
/* ★ #4 「需要微调」不再用错误红，改成提示橙 —— 这是建议不是判决 */
.fit-bad{ background:var(--warn-bg); border-color:#FDE68A; color:#92400E; }
.fit-banner .acts{ margin-top:9px; display:flex; gap:8px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 分镜编辑器（G 需求）
   ══════════════════════════════════════════════════════════════════════════ */
.sg-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px;
  border-radius:var(--r-md); background:#fff; border:1px solid var(--ink-200); margin-bottom:14px; }
.sg-bar .stat-mini{ display:flex; flex-direction:column; gap:1px; }
.sg-bar .stat-mini .k{ font-size:10.5px; color:var(--ink-400); }
.sg-bar .stat-mini .v{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.sg-cmp{ font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:var(--r-full); }
.sg-cmp.ok{ background:var(--ok-bg); color:var(--ok); }
.sg-cmp.low{ background:var(--warn-bg); color:var(--warn); }
.sg-cmp.high{ background:var(--info-bg); color:var(--info); }

.sg-cards{ display:flex; flex-direction:column; gap:11px; }
.sg-card{ position:relative; background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-md);
  padding:13px 14px 13px 46px; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.sg-card:hover{ border-color:var(--ink-300); box-shadow:var(--sh-sm); }
.sg-card.editing{ border-color:var(--brand-400); box-shadow:var(--ring); }
.sg-idx{ position:absolute; left:12px; top:13px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff;
  background:var(--grad-brand); box-shadow:0 3px 8px -3px rgba(5,150,105,.6); }
.sg-card.is-cover .sg-idx{ background:var(--grad-ink); }
.sg-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:7px; }
.sg-len{ margin-left:auto; font-size:11.5px; color:var(--ink-400); font-variant-numeric:tabular-nums; }
.sg-line{ font-size:13.5px; line-height:1.8; color:var(--ink-800); }
.sg-big{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:4px 10px;
  border-radius:var(--r-sm); background:var(--accent-50); color:var(--accent-700);
  font-size:12.5px; font-weight:700; border:1px solid var(--accent-100); }
.sg-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.sg-tags span{ font-size:11px; padding:1px 7px; border-radius:var(--r-xs); background:var(--ink-100); color:var(--ink-500); }
.sg-tools{ display:flex; gap:5px; margin-top:10px; flex-wrap:wrap; }
.sg-tools .btn{ height:28px; padding:0 9px; font-size:12px; border-radius:var(--r-xs); }
.sg-form{ display:flex; flex-direction:column; gap:9px; }
.sg-form textarea{ min-height:78px; font-size:13.5px; }
.sg-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.sg-form label{ font-size:11.5px; color:var(--ink-500); font-weight:600; display:block; margin-bottom:4px; }
.sg-append{ display:flex; gap:8px; justify-content:center; padding:12px; border:1.5px dashed var(--ink-300);
  border-radius:var(--r-md); background:transparent; color:var(--ink-500); cursor:pointer;
  font-size:13px; font-weight:600; width:100%; transition:all var(--t-fast) var(--ease); }
.sg-append:hover{ border-color:var(--brand-400); color:var(--brand-700); background:var(--brand-50); }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 「我的想法」模式（B 需求）
   ══════════════════════════════════════════════════════════════════════════ */
.compose-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px 10px; border-bottom:1px solid var(--ink-100); }
.idea-hint{ display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--accent-50),#fff); border:1px solid var(--accent-100);
  font-size:12.5px; color:var(--ink-600); line-height:1.75; align-items:flex-start; }
.idea-hint .ico{ color:var(--accent-600); flex:none; margin-top:1px; }
.compose.idea{ border-color:var(--accent-100); }
.compose.idea:focus-within{ border-color:var(--accent-500); box-shadow:var(--sh-lg), var(--ring-accent); }

/* 输入模式大分段（用在正文框顶部） */
.seg-lg{ padding:4px; }
.seg-lg .seg-item{ height:36px; padding:0 15px; }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 标签页（D 需求：内置 / 我的 / 收藏）
   ══════════════════════════════════════════════════════════════════════════ */
.tabs{ display:flex; gap:3px; border-bottom:1px solid var(--ink-200); }
.tab{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:10px 15px;
  border:0; background:transparent; cursor:pointer; font-size:14px; font-weight:600;
  color:var(--ink-500); transition:color var(--t-fast) var(--ease); }
.tab:hover{ color:var(--ink-800); }
.tab.on{ color:var(--brand-700); }
.tab.on::after{ content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2.5px;
  border-radius:var(--r-full); background:var(--grad-brand); }
.tab .cnt{ font-size:11px; font-weight:700; padding:1px 6px; border-radius:var(--r-full);
  background:var(--ink-100); color:var(--ink-500); }
.tab.on .cnt{ background:var(--brand-100); color:var(--brand-700); }

/* 星标按钮 */
.star-btn{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid var(--ink-200); background:#fff; color:var(--ink-400); cursor:pointer;
  transition:all var(--t-fast) var(--ease); }
.star-btn:hover{ border-color:#FCD34D; color:#D97706; background:#FFFBEB; }
.star-btn.on{ border-color:#FCD34D; color:#D97706; background:#FFFBEB; }
.star-btn .ico{ fill:none; }
.star-btn.on .ico{ fill:#F59E0B; stroke:#D97706; }

/* 图标按钮（小、方、带边框） */
.btn-icon-b{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid var(--ink-200); background:#fff; color:var(--ink-500); cursor:pointer;
  transition:all var(--t-fast) var(--ease); }
.btn-icon-b:hover{ border-color:var(--ink-300); color:var(--ink-800); background:var(--ink-50); }
.btn-icon-b.danger:hover{ border-color:#FECACA; color:var(--danger); background:var(--danger-bg); }
.btn-icon-b:disabled{ opacity:.4; cursor:not-allowed; }

/* ── 响应式 ───────────────────────────────────────────────────────────── */
/* 单列布局（<lg）时，先把设置填完、再看预览更符合手机操作；
   桌面端（≥1024px）预览在右栏顶部并吸顶，保持原样。 */
@media (max-width:1023px){
  .stack > .block-basic{ order:1; }
  .stack > .block-advanced{ order:2; }
  .stack > .preview-card{ order:3; }
}
@media (max-width:768px){
  body{ font-size:15.5px; }
  .card-pad{ padding:15px; }
  .btn-lg{ height:48px; }
  .empty{ padding:40px 16px; }
}

/* ── 响应式（弹窗 v2 / 风格选择器 / 分镜）─────────────────────────────── */
@media (max-width:860px){
  .ai-modal-box.wide{ max-width:100%; }
  .sp-wrap{ grid-template-columns:1fr; }
  .sp-nav{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--ink-200);
    padding:9px 10px; gap:6px; }
  .sp-nav button{ width:auto; white-space:nowrap; padding:7px 12px; }
  .sp-nav .cnt{ display:none; }
  .sp-main{ max-height:none; }
  .sp-cols{ grid-template-columns:1fr; }
  .sp-detail-col{ position:static; }
  .sp-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
}
@media (max-width:640px){
  .ai-modal-box{ background:#fff; }
  .aim-head{ padding:12px 14px; }
  .aim-body{ padding:14px; }
  .aim-foot{ padding:10px 12px; padding-bottom:calc(10px + var(--safe-b)); }
  .aim-foot .btn{ flex:1; }
  .seg-edit .row2{ grid-template-columns:1fr; }
  .seg-toolbar{ gap:8px; }
  .sp-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); }
  .sp-main{ padding:12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★ 动画层 v3（克制版）
   原则：动画只用来「交代信息出现的先后」，不表演。
   - 去掉 blur / scale —— filter:blur() 在合成层是真实模糊渲染，
     filter 动画期间整块文字发虚，滚完还残留，且中文正文最明显（"页面都展开了还糊着"）。
   - 去掉 Hero 视差淡出（曾设 opacity .55）—— 半透明 Hero 让文字发灰，像故障。
   - 去掉 hero-orb 漂浮光斑 —— blur(46px) 大半径滤镜外溢，首屏整块发虚。
   - 保留：极小位移淡入（14px）、短时长（.5s）、轻级联、数字滚动、进度条。
   - 揭示态初始隐藏只在 .js 下生效，base.html 有 2s 兜底强制显示，绝不留白。
   ══════════════════════════════════════════════════════════════════════════ */
.js [data-reveal]{
  opacity:0; transform:translateY(14px);
  will-change:opacity,transform;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }
/* 兜底：JS 未在 2s 内初始化 / 主动降级 / 减少动效 → 直接显示，零位移 */
.reveal-fallback [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
/* Hero 编排项同样兜底：必须覆盖 opacity / transform，否则 Hero 会卡在隐藏态 */
.reveal-fallback [data-hero-item]{ opacity:1 !important; transform:none !important; }
.reveal-fallback .line-inner{ transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-hero-item], .line-inner{ opacity:1 !important; transform:none !important; }
}

/* ── Hero 行遮罩上移（.line-mask 溢出裁剪，.line-inner 由 GSAP 升起）── */
.line-mask{ display:block; overflow:hidden; }
.line-inner{ display:block; will-change:transform; }
/* 未被 GSAP 接管前先藏住；一旦 JS 失败，:not(.reveal-fallback) 失效即自动显示 */
.js:not(.reveal-fallback) .hero-intro [data-hero-item]{ opacity:0; }
.js:not(.reveal-fallback) .hero-intro .line-inner{ transform:translateY(112%); }

/* ── 滚动进度条（2px，细，不抢视线）───────────────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-400),var(--brand-500) 45%,var(--accent-500));
  pointer-events:none;
}
/* 无 GSAP 时用原生 scroll 监听兜底 */
.no-gsap .scroll-progress{ transition:transform .1s linear; }

/* ── 卡片光标跟随高光（anim.js 写入 --gx/--gy）────────────────────────── */
.card, .style-card, .cta-card{ position:relative; }
.card::before, .style-card::before, .cta-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s var(--ease); z-index:0;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),
    rgba(16,185,129,.13), transparent 62%);
}
.card:hover::before, .style-card:hover::before, .cta-card:hover::before{ opacity:1; }
.card > *, .style-card > *, .cta-card > *{ position:relative; z-index:1; }

/* 顶栏滚动阴影（anim.js 切换 .scrolled） */
header.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px -12px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.05);
}