/* ============ 设计令牌 ============
   调性「素灰工作台」：面向在手机和电脑前成批出片的店主、运营。
   目的：让不懂文案和剪辑的人，靠「说话」把产品变成能直接发的口播视频。
   色彩：中性冷灰底 + 靛蓝主色（唯一的信号色，饱和度 57%）。
        去掉暖棕底和陶土橙，也不引入蓝紫渐变：后者是 AI 生成界面的头号签名。
        成功、警告、失败三色独立成组，不跟主色抢注意力。
   形状：圆角、间距、点击区一律沿用暖色时期的值，本次只换色温，
        不动几何，避免动到已经调好的触摸目标和排版。
   记忆点：作品卡片做成「一帧短视频」：竖版画面 + 底部叠字幕 + 角标时长，
        UI 直接呼应产品产出，而不是通用列表卡片。
   ================================= */
:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f2f6;
  --border: #e8eaf0;
  --border-strong: #d9dce5;

  /* 文本层级：strong(标题) > text(正文) > text-2(次要) > text-3(三级)
     另有两个场景色：soft(输入框正文) / placeholder(占位提示)
     刻意各写一份不互相复用：改标题色不该牵连输入框 */
  --text: #1b1d24;              /* 正文：中性近黑，比纯黑柔一档 */
  --text-2: #5b6070;            /* 次要文本：对白底 6.0:1 */
  --text-3: #868b9c;            /* 三级文本 / 辅助说明：对白底 3.4:1，对灰底 3.2:1 */
  --text-strong: #14161c;       /* 结构级标题：比正文更"实" */
  --text-soft: #1b1d24;         /* 输入框已输入内容：浅色下同正文，保证 AA */
  --text-placeholder: #7f8494;  /* placeholder：对输入框底 3.3:1（对白底 3.7:1），够看清又不抢戏 */

  /* 饱和度 57%，对白字 5.2:1，通过 WCAG AA；
     不定义 --brand-grad，主按钮走纯色，避免渐变被当成装饰 */
  --brand: #5b5fd6;
  --brand-strong: #4a4ec0;
  --brand-soft: #eceffd;
  --on-brand: #ffffff;
  --accent: #6a5acd;            /* 第二强调：与主色同族但更深，可压文字也可铺底（对白 5.4:1） */

  --success: #2f8f6a;
  --success-soft: #e6f4ee;
  --brand-dark: #4548a8;      /* 渐变暗端：白字压上去仍有 7.6:1 */
  --warning: #c07a2f;
  --warning-soft: #fbf0e4;
  --danger: #c05a4e;
  --danger-soft: #fbeae7;

  /* 几何按 docs/design.md「素灰工作台」收一档：
     大圆角配中性灰底会显得软塌，收小到 8/12/14/18 更贴合工具气质。
     点击区不受影响，min-height 仍是 44px。 */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-sm: 0 1px 2px rgba(27, 29, 36, .05);
  --shadow-md: 0 4px 16px rgba(27, 29, 36, .09);
  --shadow-lg: 0 12px 32px rgba(27, 29, 36, .16);

  --dur-fast: 160ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(.16, .84, .44, 1);

  --topbar-h: 52px;
  --tabbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* 深色：星夜。与 design-lab/f-mobile-motion.html 的深色模式同一套令牌：
   近黑底 #0e0e11 + 电光青 + 琥珀。
   两处必须一起改，否则深底上的文字会掉对比度：
   1. --on-brand 反相成近黑：电光青是亮色，压白字只有 2.4:1
   2. --brand-dark 跟着提亮：渐变暗端若留浅色的深端，深字会掉到 4.1:1 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e11;
    --surface: #17171c;
    --surface-2: #202027;
    --border: #2b2b34;
    --border-strong: #3c3c47;

    --text: #eceef2;               /* 柔和不过白，深底上久看不刺眼 */
    --text-2: #a0a2ac;
    --text-3: #7c7e88;             /* 对近黑底 4.7:1 */
    --text-strong: #f7f8fa;        /* 标题：比正文更亮，层级才立得住 */
    --text-soft: #9aa0ab;
    --text-placeholder: #6e7079;   /* 对输入框底 3.3:1 */

    --brand: #1fb6e0;           /* 电光青：饱和度 86%，超出 design.md 的 60% 上限 */
    --brand-dark: #1a93b5;      /* 渐变暗端：提亮到深字仍有 5.2:1 */
    --brand-strong: #56cdf0;    /* 深底上的主色文字 */
    --brand-soft: #0e2d38;
    --on-brand: #06161c;        /* 压在主色上的文字必须反相成近黑（白字只有 2.4:1） */
    --accent: #f0a92e;          /* 琥珀：饱和度 81%，同样超限 */

    --success: #35c08a;
    --success-soft: #0f2c22;
    --warning: #f0a92e;
    --warning-soft: #322512;
    --danger: #f06a5f;
    --danger-soft: #331a17;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .65);
  }
}

/* ============ 基础 ============ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 滚动交给 .page / .wizard__body，避免微信把整页锁死 */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
  min-height: 0;
}

/* ============ 顶栏 ============ */
.topbar {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.topbar__logo { display: inline-flex; color: var(--brand); }
.topbar__logo svg { width: 22px; height: 22px; }

/* 右侧动作区：主题按钮和积分 chip 归到一组，左侧只留品牌。
   之前主题按钮夹在标题旁，和右侧的 chip 分属两处，视线要跳两次。 */
.topbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 主题切换：点开底部弹层选色。只剩一套色板时 theme.js 会把它隐藏 */
.topbar__theme {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-2);
}
.topbar__theme svg { width: 19px; height: 19px; }
.topbar__theme:active { background: var(--surface-2); }

/* 弹层里的色板圆点 */
.theme-swatch {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
}

.topbar__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.balance-chip__icon { display: inline-flex; }
.balance-chip__icon svg { width: 15px; height: 15px; }
.balance-chip__unit { font-weight: 400; font-size: 12px; opacity: .8; }

/* ============ 视图区 ============ */
.view {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: none;
}

/* 切 tab 时整页淡入上移。class 由 app.js 的 route() 每次重挂。
   只动 opacity/transform，走合成层，老安卓机上不掉帧。 */
.view.is-enter > * {
  animation: view-enter var(--dur-base) var(--ease-out);
}
/* 减弱动态效果时不用单独处理：文件末尾的全局 @media (prefers-reduced-motion)
   会把时长压到 .01ms，而这两个动画都靠 forwards / 自然终态收尾，
   压时长后视觉结果依然正确（stepper 线照样是填满的）。 */
@keyframes view-enter {
  from { opacity: 0; transform: translateY(8px); }
}

.page {
  flex: 1 1 0%;
  min-height: 0;
  /* 这里不要加 -webkit-overflow-scrolling: touch。
     它会让容器生成独立合成层，iOS 微信内置浏览器里原生 <select> 的下拉面板
     会被裁到容器边界内，表现为「点了下拉却拉不出选项」。
     iOS 13+ 的滚动容器默认就是惯性滚动，加它没有任何收益，只有这个副作用。 */
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* 概念图口径：宁疏不密，页边距与底部留白都放大一档 */
  padding: var(--space-5) var(--space-4) calc(var(--space-6) + var(--space-4) + var(--safe-b));
}

.page__title {
  margin: 0 0 var(--space-1);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.page__desc {
  margin: 0 0 var(--space-4);
  color: var(--text-2);
  font-size: 14px;
}

/* ============ 首页 ============
   版式来自 web/design-lab/f-mobile-motion.html：余额卡 + 新建创作大卡 + 作品横滑。
   只搬真实存在的板块，促销条和功能列表先不放，理由见 js/home.js 顶部注释。
   ================================= */
.home { display: grid; gap: var(--space-4); align-content: start; }

/* 入场：每个板块按 --i 依次上移淡入。
   整页那层（.view.is-enter > *）让位给板块级错开，否则父子两层同时位移会发糊 */
.view.is-enter > .home { animation: none; }
.view.is-enter .home > * {
  animation: home-rise 320ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes home-rise {
  from { opacity: 0; transform: translateY(14px); }
}

/* 余额卡 */
.home-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.home-balance__title { margin: 0; font-size: 13px; color: var(--text-2); }
.home-balance__value {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.home-balance__sub { margin: 6px 0 0; font-size: 12px; color: var(--text-3); }
.home-balance__cta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: var(--space-3);
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 14px;
  font-weight: 600;
}
.home-balance__cta:active { background: var(--brand-strong); }

/* 装饰层用真实作品首帧；没有作品时整块隐藏，不塞占位图 */
.home-balance__art { position: relative; width: 108px; height: 96px; }
.home-balance__art[hidden] { display: none; }
.home-balance__card {
  position: absolute;
  top: 0;
  width: 62px;
  height: 88px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}
.home-balance__card--b { right: 0; transform: rotate(8deg); }
.home-balance__card--a { right: 26px; transform: rotate(-6deg); overflow: hidden; }
.home-balance__card--a img,
.home-balance__card--a video { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-balance__card--a em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 4px 3px;
  background: linear-gradient(rgba(20, 22, 30, 0), rgba(20, 22, 30, .85));
  color: #fff;
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

/* 新建创作大卡 */
.home-create {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.home-create:active { border-color: var(--brand); }
.home-create__plus {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.home-create__plus svg { width: 24px; height: 24px; }
/* 呼吸环：描边扩散淡出。不用 box-shadow 外发光，发光是 AI 味的重灾区 */
.home-create__plus::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--brand);
  animation: home-breathe 2600ms cubic-bezier(.2, .7, .3, 1) 900ms infinite;
}
@keyframes home-breathe {
  0% { transform: scale(1); opacity: .5; }
  70% { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
.home-create__label { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.home-create__hint { font-size: 12px; color: var(--text-3); }

/* 作品横滑 */
.home-works { display: grid; gap: var(--space-3); }
.home-works__bar { display: flex; align-items: baseline; gap: var(--space-2); }
.home-works__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.home-works__count { font-size: 12px; color: var(--text-3); }
.home-works__more { margin-left: auto; font-size: 13px; color: var(--brand-strong); }
.home-works__strip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  /* 横滑到底不要把父级纵向滚动一起带走 */
  overscroll-behavior-x: contain;
}
.home-works__empty { margin: 0; font-size: 13px; color: var(--text-3); }
.home-thumb { flex: 0 0 auto; width: 92px; display: grid; gap: 4px; }
.home-thumb__img {
  position: relative;
  width: 92px;
  height: 116px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.home-thumb__img img,
.home-thumb__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-thumb__dur {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(20, 22, 30, .68);
  color: #fff;
  font-size: 11px;
}
.home-thumb__name {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-thumb__st { font-size: 11px; color: var(--text-3); }
.home-thumb__st.is-ok { color: var(--success); font-weight: 600; }
.home-thumb__st.is-bad { color: var(--danger); font-weight: 600; }
.home-thumb__st.is-busy { color: var(--brand-strong); font-weight: 600; }

/* 子页顶部的返回（创作流程 / 使用教程共用）。
   这两处都没有别的回头路：流程里的「重填信息」只回到流程内部，
   教程页从「我的」进来，不补一条就出不去 */
.sub-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  min-height: 36px;
  margin: var(--space-3) var(--space-4) 0;
  padding: 0 10px 0 4px;
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: 13px;
}
.sub-back:active { background: var(--surface-2); }
.sub-back svg { width: 18px; height: 18px; }
/* 子页模块挂在这层里，要把 flex 链补回来，否则内容区拿不到剩余高度 */
.sub-holder { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ============ 底部导航 ============ */
.tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
/* 选中态给图标垫一个圆角块，而不是只把文字变色：
   色觉障碍或灰阶屏下也能靠块的位置判断当前在哪一栏 */
.tabbar__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 26px;
  border-radius: var(--radius-full);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.tabbar__item svg { width: 22px; height: 22px; }
.tabbar__item:active .tabbar__icon { background: var(--surface-2); }
.tabbar__item.is-active { color: var(--brand); }
.tabbar__item.is-active .tabbar__icon { background: var(--brand-soft); }

/* ============ 制作页：模式切换 ============ */
.make-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.segmented {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  margin: var(--space-3) var(--space-4) 0;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

.segmented__item {
  flex: 1 1 0;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.segmented__item.is-active {
  background: var(--surface);
  color: var(--brand-strong);
  box-shadow: var(--shadow-sm);
}

/* ============ 界面模式（向导） ============ */
.wizard {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wizard__body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* 成片页没有原生 select，可以开惯性滚动；竖滑优先交给页面，避免被 <video> 吃掉 */
.wizard__body--result {
  -webkit-overflow-scrolling: touch;
}

.wizard__foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + var(--safe-b));
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.wizard__foot .btn[data-primary] { flex: 1 1 auto; }

.wizard__title {
  margin: 0 0 var(--space-1);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
}
.wizard__hint {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
}

.stepper {
  display: flex;
  align-items: center;
}
.stepper__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.stepper__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.stepper__line {
  flex: 1 1 auto;
  min-width: 6px;
  height: 1px;
  background: var(--border);
}
.stepper__item.is-done { color: var(--text-2); }
.stepper__item.is-done .stepper__dot {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-color: transparent;
}
.stepper__item.is-active { color: var(--brand-strong); font-weight: 600; }
.stepper__item.is-active .stepper__dot {
  background: var(--brand);
  color: var(--on-brand);
  border-color: transparent;
}

/* 已完成步骤之间的连接线：从左到右填充，暗示"已经走到这一步"。
   相邻兄弟选择器够用，不用给每条线挂 is-done 类。
   用 background-size 做动画而不是 width —— 不触发重排。 */
.stepper__item.is-done + .stepper__line {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-size: 0 100%;
  background-repeat: no-repeat;
  animation: stepper-fill 400ms var(--ease-out) forwards;
}
@keyframes stepper-fill {
  to { background-size: 100% 100%; }
}

button.stepper__item {
  border: none;
  background: none;
  padding: 8px 2px;
  font: inherit;
  color: inherit;
  cursor: default;
  border-radius: var(--radius-full);
}
button.stepper__item:disabled {
  opacity: 1;
  cursor: default;
}
button.stepper__item.is-clickable { cursor: pointer; }
button.stepper__item.is-clickable:hover .stepper__dot {
  box-shadow: 0 0 0 4px var(--brand-soft);
}
button.stepper__item.is-clickable:active .stepper__dot {
  transform: scale(.92);
}
button.stepper__item.is-viewing .stepper__dot {
  background: var(--accent);
  color: var(--on-brand);
  border-color: transparent;
}
button.stepper__item.is-viewing { color: var(--accent); font-weight: 600; }

.field { display: grid; gap: 6px; }
.field__label { font-size: 14px; font-weight: 600; }
/* 紧凑排版：label + 按钮 + 提示同行排布（克隆声音/参考视频等小块用） */
.field--row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.field--row .field__label { flex: 0 0 auto; }
.field--row .field__hint { flex: 1 1 100%; margin: 0; }
.field__hint { font-size: 12px; color: var(--text-3); }
.req { color: var(--danger); }

.impact {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}
.impact--script {
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--accent);
}
.impact--visual {
  color: var(--text-2);
  background: var(--surface-2);
}

.choice--chips {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 420px) {
  .choice--chips { grid-template-columns: 1fr; }
}

/* 场景下拉旁的"规则要点"列表：让用户选之前知道这个场景约束大概长什么样 */
.scene-rules-wrap { margin-top: 4px; }
.scene-rules {
  margin: 0; padding: 8px 12px 8px 24px;
  background: var(--surface-2); border-radius: 6px;
  font-size: 12px; line-height: 1.7; color: var(--text-2);
  list-style: disc;
}
.scene-rules li { margin: 0; }

.input,
.textarea,
.select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
.select { height: 44px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.choice { display: grid; gap: var(--space-2); }
.choice__item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  text-align: left;
  min-height: 68px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
/* 选中只靠描边和底色。原来还套一圈 box-shadow 光晕，
   在浅底上就是「亮一下」，跟 design.md 禁外发光那条冲突 */
.choice__item.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.choice__item:active { background: var(--surface-2); }
.choice__item.is-selected:active { background: var(--brand-soft); }

/* 前置图标：只在「选项之间是不同种类的东西」时才给（选路径、选视频类型）。
   场景那种一次列四五个的长列表给了反而花 */
.choice__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.choice__icon svg { width: 18px; height: 18px; }
.choice__item.is-selected .choice__icon { background: var(--brand); color: var(--on-brand); }

.choice__body { flex: 1 1 auto; min-width: 0; }
.choice__title { display: block; font-size: 15px; font-weight: 600; }
.choice__desc { display: block; font-size: 12px; color: var(--text-2); line-height: 1.6; }

/* 单选标记挪到行尾：放行首会和前置图标挤成两个小方块并排，很乱 */
.choice__mark {
  flex: 0 0 auto;
  order: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.choice__mark svg { width: 12px; height: 12px; }
.choice__item.is-selected .choice__mark {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.slots { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: 8px 8px 2px 0; }
.slot {
  width: 104px;
  height: 104px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}
.slot svg { width: 22px; height: 22px; }
.slot.is-filled { border-style: solid; padding: 0; overflow: visible; }
.slot.is-filled[data-play-video] { cursor: pointer; }
.slot img,
.slot video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.slot video { background: #000; }

/* 回看模式 */
.read-only-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.read-only-banner svg { width: 16px; height: 16px; flex: 0 0 auto; }

.summary {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.summary__group { display: grid; gap: 10px; }
.summary__row { display: grid; gap: 2px; }
.summary__label { font-size: 12px; color: var(--text-3); }
.summary__value { font-size: 14px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.summary__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.summary__thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  background: #000;
}

/* ============ 对话页 ============ */
.chat {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat__list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: var(--space-5) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.msg { display: flex; flex-direction: column; max-width: 100%; }
.msg--user { align-items: flex-end; }
.msg--assistant { align-items: flex-start; }

.bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
  animation: bubble-in var(--dur-base) var(--ease-out);
}

.msg--assistant .bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-left-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

/* 同色系深浅渐变：浅色下两端对白字 5.2 / 7.6，深色下两端对深字 4.9 / 4.9。
   跨色相渐变的亮端会掉到 2.8，所以渐变只在同一色系里做深浅。 */
.msg--user .bubble {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: var(--on-brand);
  border-top-right-radius: var(--radius-xs);
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.msg__images { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.msg__image {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.msg__video {
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-sm);
  display: block;
}

.typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top-left-radius: var(--radius-xs);
  width: fit-content;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
  0%, 80%, 100% { opacity: .3; }
  40% { opacity: 1; }
}

/* 确认卡片 */
.card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: bubble-in var(--dur-base) var(--ease-out);
}
.card__video {
  display: block;
  width: 100%;
  max-height: min(42vh, 240px);
  background: #000;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  object-fit: contain;
  touch-action: pan-y;
}
.card__head {
  padding: 10px 14px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 600;
}
.card__body { padding: var(--space-4) 16px; display: grid; gap: var(--space-4); }
.card__script {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.card__thumbs { display: flex; gap: var(--space-2); padding: 8px 8px 0 0; }
.card__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #000;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-2);
}
.card__cost { color: var(--brand-strong); font-weight: 700; }
.card__foot {
  display: flex;
  gap: var(--space-2);
  padding: 0 16px var(--space-4);
}

/* 快捷选项 */
.options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--brand-strong);
  font-size: 15px;
  font-weight: 500;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.chip:active { transform: scale(.96); background: var(--brand-soft); }
.chip--primary { background: var(--brand); color: var(--on-brand); }
.chip--primary:active { background: var(--brand-strong); }
.chip--ghost { border-color: var(--border-strong); color: var(--text-2); }
.chip__hint { font-size: 12px; opacity: .75; font-weight: 400; }

/* 进度 */
.progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-2);
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 全屏上传/处理遮罩：选段确认后、短视频直接上传时都用 */
.busy-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .45);
}
.busy-mask[hidden] { display: none; }
.busy-mask__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 168px;
  padding: 28px 32px;
  background: var(--surface);
  color: var(--text-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 16px;
  font-weight: 600;
}
.busy-mask .spinner,
.clip-upload-mask .spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}
.clip-upload-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--surface);
  border-radius: 12px;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 600;
}
.clip-upload-mask[hidden] { display: none; }

/* ============ 输入区 ============ */
.composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.composer__btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.composer__btn:active { background: var(--surface-2); }
.composer__btn svg { width: 22px; height: 22px; }

.composer__input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-soft);
  resize: none;
  line-height: 1.4;
}
.composer__input::placeholder { color: var(--text-placeholder); }

.composer__send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.composer__send:active { transform: scale(.94); }
.composer__send:disabled { opacity: .45; }
.composer__send svg { width: 20px; height: 20px; }

/* ============ 通用组件 ============ */
.section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}

.list { display: grid; gap: var(--space-4); }

/* 作品卡片 = 一帧短视频（记忆点）
   竖版画面 + 底部叠口播字幕 + 角标时长，让界面直接呼应产品产出，
   而不是又一张通用的「左图右文」列表卡。 */
.work {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.work__frame {
  position: relative;
  /* 3:4 比 4:5 更接近竖版短视频，画面成为卡片主体 */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-2);
}
.work__frame > img,
.work__frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work__duration {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(20, 22, 30, .62);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.work__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 加高渐变，让字幕像真实短视频那样"压"在画面底部而不是一条细边 */
  padding: 72px 16px 18px;
  background: linear-gradient(rgba(20, 22, 30, 0) 0%, rgba(20, 22, 30, .35) 45%, rgba(20, 22, 30, .88) 100%);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work__play {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 22, 30, .28);
  color: #fff;
}
.work__play svg { width: 34px; height: 34px; }
.work__main {
  padding: var(--space-4);
  display: grid;
  gap: 8px;
  align-content: start;
}
.work__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work__meta { font-size: 12px; color: var(--text-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.work__script {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work__actions { display: flex; gap: var(--space-2); margin-top: 4px; flex-wrap: wrap; }

/* 紧凑行：左小缩略图，右信息 + 按钮 + 时间；点缩略图弹出播放 */
.work--row { display: flex; align-items: stretch; gap: var(--space-3); }
.work--row .work__frame {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
}
.work--row .work__main { flex: 1 1 auto; min-width: 0; padding: var(--space-3); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}
.badge--pending { background: var(--brand-soft); color: var(--brand-strong); }
.badge--running { background: var(--brand-soft); color: var(--brand-strong); }
.badge--succeeded { background: var(--success-soft); color: var(--success); }
.badge--failed { background: var(--danger-soft); color: var(--danger); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
/* --brand-grad 默认不定义，回退纯色：主按钮保持实色，不用渐变做装饰。
   保留这个读法是为了将来真要加渐变色调时不用改这一行。 */
.btn--primary { background: var(--brand-grad, var(--brand)); color: var(--on-brand); border-color: transparent; }
.btn--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
/* 次要操作：无填充、文字降饱和，不跟主操作抢注意力 */
.btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
  font-weight: 500;
}
.btn--ghost:active { background: var(--surface-2); color: var(--text); }
.btn--block { width: 100%; }
.btn--sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn:disabled { opacity: .5; }
.btn svg { width: 16px; height: 16px; }

/* 作品页：标题块 + 筛选条分两段，避免窄屏绕行后留空 */
.page__top { margin-bottom: var(--space-3); }
.works__filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.works__filter-label { font-size: 13px; color: var(--text-3); }
.works__filter-sep { color: var(--text-3); font-size: 13px; }
.works__filter-input { min-height: 36px; padding: 6px 10px; font-size: 13px; width: auto; min-width: 140px; }

/* 紧凑行的操作按钮：更小、间距更紧，重生用 ghost 弱化 */
.work--row .work__actions { gap: 6px; margin-top: 2px; }

/* 分页 */
.works__pager { display: flex; gap: var(--space-2); justify-content: center; align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.works__pager-info { font-size: 12px; color: var(--text-3); margin-left: var(--space-2); }

/* 概念图口径：白色卡片 + 柔和暖投影，而不是描边列表行 */
.tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 78px;
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tier:active { transform: scale(.98); border-color: var(--brand); box-shadow: var(--shadow-md); }
.tier__name { font-size: 16px; font-weight: 700; }
.tier__sub { font-size: 12px; color: var(--text-3); }
.tier__price { font-size: 18px; font-weight: 700; color: var(--brand-strong); font-variant-numeric: tabular-nums; }

.balance-hero {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  /* 用 --on-brand 而不是写死 #fff：深色模式下主色是亮的，白字会掉到 1.8:1 */
  color: var(--on-brand);
  box-shadow: var(--shadow-md);
}
.balance-hero__label { font-size: 13px; }
.balance-hero__value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.balance-hero__hint { font-size: 12px; }

.log {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.log:last-child { border-bottom: none; }
.log__title { font-size: 14px; font-weight: 600; }
.log__time { font-size: 12px; color: var(--text-3); }
.log__points { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.log__points--plus { color: var(--success); }
.log__points--minus { color: var(--text); }

/* Tabs：积分中心「充值 / 兑换码 / 流水」切换 */
.tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin: var(--space-3) 0;
}
.tabs__item {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tabs__item.is-active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--brand);
}
.tabs__panel.is-hidden { display: none; }

/* 流水分页 */
.points__pager {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.points__pager-info { font-size: 12px; color: var(--text-3); margin-left: var(--space-2); }

.empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}
.empty svg { width: 40px; height: 40px; opacity: .5; }

.skeleton {
  height: 88px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.note {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 13px;
}

.steps { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 36px;
  font-size: 14px;
  color: var(--text-2);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps strong { color: var(--text); }

/* ============ 弹层 ============ */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet[hidden] { display: none; }
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, .55);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheet-up var(--dur-base) var(--ease-out);
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.sheet__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.sheet__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}
.sheet__close svg { width: 20px; height: 20px; }
.sheet__body {
  padding: var(--space-4);
  overflow-y: auto;
  display: grid;
  gap: var(--space-3);
  font-size: 14px;
  color: var(--text-2);
}
.sheet__body video, .sheet__body img { width: 100%; border-radius: var(--radius-sm); }
.sheet__foot {
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-b));
  display: flex;
  gap: var(--space-2);
  border-top: 1px solid var(--border);
}
.sheet__foot:empty,
.sheet__foot[hidden] { display: none; }

/* 视频预览：居中小卡片，控件露在屏内 */
.sheet--media .sheet__panel {
  left: 20px;
  right: 20px;
  bottom: auto;
  top: 50%;
  max-width: 340px;
  max-height: min(70dvh, 520px);
  border-radius: 16px;
  transform: translateY(-50%);
  animation: sheet-pop var(--dur-base) var(--ease-out);
}
.sheet--media .sheet__head {
  padding: 10px 8px 8px 16px;
  border-bottom: 0;
}
.sheet--media .sheet__title { font-size: 14px; font-weight: 600; }
.sheet--media .sheet__close { width: 36px; height: 36px; }
.sheet--media .sheet__body {
  padding: 0 12px 12px;
  overflow: hidden;
}
.sheet--media .sheet__body video {
  display: block;
  max-height: min(48dvh, 360px);
  background: #000;
  border-radius: 12px;
  object-fit: contain;
}
@keyframes sheet-pop {
  from { opacity: 0; transform: translateY(-46%) scale(.96); }
  to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; color: var(--text); }
.checkbox input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand); flex: 0 0 auto; }

/* ============ 我的 ============
   账号卡 + 快捷入口。教程已搬到独立页 #/me/guide，这里只留账号相关的东西。 */
.me-account {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
/* 头像取用户名首字，和 PC 侧边栏的账号卡同一套语言 */
.me-account__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 17px;
  font-weight: 700;
}
.me-account__body { min-width: 0; }
.me-account__name { display: block; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.me-account__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
/* 用文字色令牌，别拿边框色当文字色——两套主题下都只有 1.5:1，等于看不见 */
.me-account__sep { margin: 0 6px; color: var(--text-3); }
.me-wx--yes { color: var(--success); font-weight: 600; }
/* 未绑定是挡住在线充值的关键状态，给个能看见的颜色，别和「积分」一个灰度 */
.me-wx--no  { color: var(--warning); }

.me-list { display: grid; gap: var(--space-2); }
.me-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;            /* 可能是 <a> 也可能是 <button>，button 不会自动撑满 */
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.me-row:active { background-color: var(--surface-2); }
/* 只在真有指针悬停的设备上加 hover，触屏上 :hover 会一直粘住 */
@media (hover: hover) {
  .me-row:hover { background-color: var(--surface-2); }
}
/* 图标、标题、chevron 三段固定，中间可插数值。加了图标以后「左文右数」那种
   两端对齐的写法会让图标和文字贴在一起，所以改成 gap 排布 */
.me-row__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text-2);
}
.me-row__icon svg { width: 16px; height: 16px; }
.me-row__label { flex: 1 1 auto; min-width: 0; }
.me-row__extra { flex: 0 0 auto; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.me-row__chev { flex: 0 0 auto; color: var(--text-3); font-size: 15px; line-height: 1; }

.me-subtitle {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

/* ============ 使用教程（#/me/guide）============
   四段教程收成折叠面板，默认只展开第一节。
   用原生 <details>/<summary>：零 JS、键盘可用、读屏可识别。 */
.guide__lead { margin-bottom: var(--space-4); }
.acc {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.acc + .acc { margin-top: var(--space-2); }
.acc__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:active { background: var(--surface-2); }
.acc__title { flex: 1 1 auto; }
.acc__chev {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.acc[open] .acc__chev { transform: rotate(90deg); }
.acc__body {
  padding: 0 var(--space-4) var(--space-4);
  animation: acc-in var(--dur-base) var(--ease-out);
}
@keyframes acc-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.acc__body .steps { gap: var(--space-2); }
/* 说明书类的说明文字用中性底。原来借用 .note（琥珀 warning 底），
   但这是「告知」不是「警告」，用警告色会让人以为出了问题 */
.guide-note {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.8;
}

/* ============ 后台管理（/admin.html）============
   独立页面，只借用 C 端的设计令牌，不共用任何业务样式 */
.admin { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.admin__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.admin__bar strong { margin-right: auto; }
.admin__who { font-size: 13px; color: var(--text-3); }
/* 横向包壳：侧边栏和内容并排。.admin 自己是 column 方向，
   所以必须再套一层 row 的容器，否则两者会上下堆叠 */
.admin__body {
  flex: 1;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  min-height: 0;
}
.admin__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 176px;
}
/* 谁被设了自定义 display，[hidden] 规则就得挂在谁身上 */
.admin__side[hidden] { display: none; }
.admin__nav { display: grid; gap: 2px; }
.admin__nav-item {
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  text-align: left;
}
.admin__nav-item.is-active {
  background: var(--brand-soft);
  border-color: var(--border);
  color: var(--brand-strong);
  font-weight: 600;
}
@media (hover: hover) {
  .admin__nav-item:not(.is-active):hover { background: var(--surface-2); }
}
.admin__side-foot {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.admin__side-btn {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
}
/* padding 由 .admin__body 统一给，这里再加会和侧边栏之间叠成 32px。
   max-width 兜住超宽屏，但不加 margin:0 auto——侧边栏要贴左 */
.admin__content { flex: 1; min-width: 0; max-width: 1200px; }

.admin-login { max-width: 360px; margin: 12vh auto; display: grid; gap: var(--space-3); }

/* 窄屏放不下侧边栏，退化成顶部横向菜单 */
@media (max-width: 800px) {
  /* 作用在横向包壳上（原来写的是 grid 属性，对 flex 容器无效） */
  .admin__body { flex-direction: column; }
  /* 主轴变成竖向后，flex-basis 会变成高度——必须改成 auto，否则菜单换行会溢出 */
  .admin__side { flex: 0 0 auto; width: 100%; }
  .admin__nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .admin__nav-item, .admin__side-btn { border-color: var(--border); background: var(--surface); }
  .admin__side-foot { grid-auto-flow: column; }
}

.admin-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.admin-filters .input, .admin-filters .select { width: auto; min-width: 180px; }
.admin-filters .input--date { min-width: 140px; }
/* 「至」这类分隔文字：跟旁边 44px 高的 input 同一视觉重量，别显得漂在上面 */
.admin-filters .admin-muted { font-size: 14px; color: var(--text-2); padding: 0 2px; }

.admin-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.admin-pager .btn { width: auto; }
.admin-pager .btn[disabled] { opacity: .45; cursor: not-allowed; }
.admin-pager__info { color: var(--text-3); font-size: 13px; }

.admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* 表格列多，窄屏横向滚动比挤成一团好读 */
.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.admin-table th, .admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.admin-table th { color: var(--text-3); font-weight: 600; }
.admin-table code { font-family: ui-monospace, Consolas, monospace; }

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.admin-stat {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.admin-stat__label { font-size: 12px; color: var(--text-3); }
.admin-stat__value { font-size: 20px; font-weight: 700; color: var(--text-strong); }

/* 状态标记：不复用 C 端的 me-wx-*，那是「我的」页的语义 */
.admin-yes { color: var(--success); font-weight: 600; }
.admin-no  { color: var(--warning); }

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.admin-modal[hidden] { display: none; }
.admin-modal__backdrop { position: absolute; inset: 0; background: rgba(8,10,16,.55); }
.admin-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.admin-modal__title { margin: 0; font-size: 16px; color: var(--text-strong); }
.admin-modal__close {
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  color: var(--text-2);
  border-radius: var(--radius-sm);
}
.admin-modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  display: grid;
  gap: var(--space-3);
}

.admin-detail {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 6px var(--space-3);
  margin: 0;
  font-size: 13px;
}
.admin-detail dt { color: var(--text-3); }
.admin-detail dd { margin: 0; color: var(--text); word-break: break-all; }

.admin-video { width: 100%; max-height: 46vh; border-radius: var(--radius-sm); background: #000; }
.admin-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-thumb {
  width: 88px;
  height: 118px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-thumb-box { position: relative; display: inline-flex; }
.admin-thumb-del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.admin-voice { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.admin-audio { width: 100%; max-width: 300px; height: 36px; }

/* 向导：已传素材的删除按钮（图片槽 / 确认页缩略图） */
.field__btns { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.slot.is-filled, .thumb-box { position: relative; display: inline-flex; }
.thumb-box { line-height: 0; }
.thumb-box[data-play-video] { cursor: pointer; }
.slot__del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.admin-video-thumb {
  width: 88px;
  height: 118px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #000;
}

/* 作品列表：一行一条，左边缩略图，右边信息 + 按钮 */
.work-list { display: flex; flex-direction: column; gap: var(--space-2); }
.work-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.work-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0b0e14;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-thumb__play { color: var(--text-2); font-size: 18px; }
.work-main { flex: 1 1 auto; min-width: 0; }
.work-title {
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.work-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.work-time { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.work-status { font-size: 11px; font-weight: 600; }
.work-actions { flex: 0 0 auto; display: flex; gap: var(--space-2); }
.admin-pre {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-muted { margin: 0; font-size: 13px; color: var(--text-3); }
.admin-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
/* 表格里同一列多个 ghost 按钮紧挨着展示，别让它们换行后上下错位 */
.row-actions { display: inline-flex; gap: var(--space-2); }

/* ============ 登录 / 注册 ============
   未登录时整屏盖住，挡住底下的导航和上一账号残留的内容 */
.auth {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--bg);
  overflow-y: auto;
}
.auth[hidden] { display: none; }
.auth__panel {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.auth__brand { display: flex; justify-content: center; color: var(--brand); }
.auth__brand svg { width: 40px; height: 40px; }
.auth__title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.auth__sub { margin: 0; text-align: center; font-size: 13px; color: var(--text-3); }
.auth__error { margin: 0; font-size: 13px; color: var(--danger); }
.auth__error[hidden] { display: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  transform: translateX(-50%);
  z-index: 80;
  max-width: 84vw;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: rgba(16, 18, 24, .92);
  color: #fff;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast[hidden] { display: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}