* { box-sizing: border-box; }
/* 刘海/摄像头与底部横条的安全区。需要 index.html 的 viewport-fit=cover 才有值，
   不支持的设备（安卓大多数、桌面）回退 0px，布局不受影响 */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  /* ===== MIVI 深色科技主题（2026-09-24）：深空底 + 蓝色霓虹 + 玻璃拟态 =====
     品牌色：--brand 霓虹蓝主色、--brand-2 冰青高光（渐变的另一端）、--brand-deep 深蓝；
     --brand-soft/-line/-tint/-glass 是半透明蓝，叠在深色玻璃上用。
     中性色：--ground 页面底 / --card 玻璃面板 / --card-2 面板内凹槽 / --field 输入框；
     文字四档 --text > --text-2 > --text-3 > --text-4；线 --line-soft < --line < --line-strong。
     改主题只改这里，组件样式一律引用 token */
  --brand: #3d7bff;
  --brand-2: #22d3ee;
  --brand-deep: #1d4fd8;
  --brand-grad: linear-gradient(135deg, #2f6bff 0%, #4a8dff 45%, #22c7f0 100%);
  --brand-soft: rgba(61,123,255,.14);
  --brand-line: rgba(96,150,255,.42);
  --brand-tint: rgba(96,150,255,.45);
  --brand-glass: rgba(61,123,255,.30);
  --glow: 0 0 0 1px rgba(110,160,255,.35), 0 0 22px rgba(61,123,255,.45), 0 0 60px rgba(34,211,238,.12);
  --glow-sm: 0 0 14px rgba(61,123,255,.55);
  --ground: #04060d;
  --surface: transparent;
  --card: rgba(18,26,48,.55);
  --card-solid: #0d1427;
  --card-2: rgba(255,255,255,.05);
  --field: rgba(6,10,22,.55);
  --hover: rgba(120,160,255,.08);
  --track: rgba(255,255,255,.08);
  --track-2: rgba(255,255,255,.16);
  --media: #070b16;
  --line: rgba(140,170,255,.14);
  --line-soft: rgba(140,170,255,.08);
  --line-strong: rgba(170,195,255,.28);
  --text: #eef3ff;
  --text-2: #b6c2dc;
  --text-3: #7c89a6;
  --text-4: #56627d;
  --warn-bg: rgba(245,166,35,.10);
  --letter-bg: rgba(255,236,200,.05);
  --blur: blur(22px) saturate(160%);
  --radius: 16px;
}
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  background: var(--ground);
  color: var(--text);
}
a { color: var(--brand); text-decoration: none; cursor: pointer; }
input::placeholder { color: var(--text-3); }

/* 手机全屏，桌面居中窄栏 */
#app {
  max-width: 430px; margin: 0 auto; background: var(--surface);
  min-height: 100vh;   /* 老浏览器回退 */
  min-height: 100dvh;  /* 跟随地址栏收放的真实可视高度 */
}
@media (min-width: 431px) { #app { box-shadow: 0 0 24px rgba(0,0,0,.12); } }

.page {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.login-page { background: var(--card); }

/* 登录 hero */
.hero {
  /* 按屏高比例伸缩：16:9 窄屏不会被头图吃掉半屏，长屏也不会显得空 */
  height: clamp(210px, 36dvh, 320px);
  padding-top: var(--sat);   /* 让开刘海/摄像头 */
  flex-shrink: 0; background: var(--brand); color: #ffffff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-left: 28px; padding-right: 28px; padding-bottom: 36px;
}
.hero-small { height: clamp(160px, 26dvh, 200px); }
.hero-title { font-size: clamp(28px, 8vw, 38px); font-weight: 700; letter-spacing: 2px; line-height: 1.2; }
.hero-small .hero-title { font-size: clamp(24px, 6.6vw, 30px); }
.hero-en { font-size: clamp(19px, 5.6vw, 26px); letter-spacing: 1px; line-height: 1.2; margin-top: 4px; font-family: 'Anton', 'Arial Narrow', sans-serif; }
.hero-sub { font-size: 13px; opacity: .75; margin-top: 12px; }
/* 品牌首屏：MIVI 字标 + 一条短横 + slogan（2026-09-24 改名） */
.hero-logo {
  font-family: 'Anton', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(64px, 19vw, 92px); font-weight: 700; letter-spacing: .1em;
  line-height: 1; margin-left: -2px;
}
.hero-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--card); opacity: .9; margin: 14px 0 12px 2px; }
.hero-slogan { font-size: clamp(18px, 5.2vw, 22px); font-weight: 500; letter-spacing: .28em; line-height: 1.2; }
.hero-logo + .hero-bar + .hero-slogan + .hero-sub { margin-top: 10px; letter-spacing: .12em; opacity: .6; }

/* 表单 */
.form-area { flex-grow: 1; display: flex; flex-direction: column; padding: 32px 28px 0 28px; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--text-2); }
.field input {
  height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px;
  font-size: 15px; font-family: inherit; background: var(--field); color: var(--text); outline: none;
}
.field input:focus { border-color: var(--brand); }
.btn-primary {
  height: 48px; border: none; border-radius: 10px; background: var(--brand); color: #ffffff;
  font-size: 16px; font-weight: 500; font-family: inherit; margin-top: 6px; cursor: pointer;
}
.btn-primary:disabled { opacity: .6; }
.form-links { display: flex; justify-content: space-between; font-size: 13px; }
.muted { color: var(--text-2); }
.muted-sm { color: var(--text-3); font-size: 12px; }
.agreement { text-align: center; font-size: 12px; color: var(--text-3); padding: 24px 0 36px 0; }
/* ICP 备案号（2026-09-25，备案规定须在网站底部展示并链接到工信部备案系统） */
.icp { display: inline-block; margin-top: 6px; color: inherit; text-decoration: none; font-size: 12px; }
.icp:hover { text-decoration: underline; }
.ga { white-space: nowrap; }
.ga-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }  /* 公安备案图标在编号左边（规定格式） */

/* 主界面 */
.main-page { background: var(--surface); }
.main-scroll {
  flex-grow: 1; display: flex; flex-direction: column; gap: 16px;
  padding: calc(20px + var(--sat)) 20px calc(84px + var(--sab)) 20px;
}
.home-head { display: flex; align-items: center; justify-content: space-between; }
.home-title { font-size: 18px; font-weight: 700; }
.home-account { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; }

.points-card {
  background: var(--brand); border-radius: 14px; padding: 18px 20px; color: #ffffff;
  display: flex; align-items: center; justify-content: space-between;
}
.pc-label { font-size: 12px; opacity: .8; }
.pc-num { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 32px; letter-spacing: 1px; line-height: 1.1; margin: 4px 0; }
.pc-btn {
  height: 44px; padding: 0 18px; border: none; border-radius: 10px; background: var(--card);
  color: var(--brand); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer;
}

/* 首页功能入口：五个同级功能卡。手机 2 列（复制视频横向通栏），桌面媒体查询里改一行五个 */
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entry-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; min-width: 0;
}
.entry-card.main {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px;
  border-color: var(--brand-line);
}
.entry-ico {
  width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.entry-card.main .entry-ico { width: 48px; height: 48px; border-radius: 13px; }
.entry-title { font-size: 15px; font-weight: 700; }
.entry-card.main .entry-title { font-size: 16px; }
.entry-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.entry-card .entry-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 首尾帧上传：手机上下排列，桌面左右并排 */
.frame-cols { display: flex; flex-direction: column; gap: 18px; }

.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-title { font-size: 15px; font-weight: 700; }
.section-head a { font-size: 13px; }

.empty-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-3); font-size: 14px;
}
.empty-sub { font-size: 12px; color: var(--text-4); }

/* 次级页导航栏 */
.navbar {
  /* 高度加上安全区、并用 padding 把内容压下来：视觉上多出刘海那一条，内容区仍是 56px */
  height: calc(56px + var(--sat));
  padding: var(--sat) 12px 0 12px;
  flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
}
.nav-btn { min-width: 60px; height: 44px; display: flex; align-items: center; padding: 0 8px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.nav-title { flex-grow: 1; text-align: center; font-size: 17px; font-weight: 700; }
/* 角色 / 产品管理页顶栏的分段切换：两页互通，入口卡「角色和产品」进来后可直接切 */
.nav-seg { display: inline-flex; width: 176px; margin: 0 auto; padding: 3px; }
.nav-seg .seg-item { height: 32px; font-size: 14px; font-weight: 600; }
.nav-seg.wide { width: 250px; }   /* 婚庆两页：「定制三生三世视频」八个字，176px 装不下 */
.nav-seg.wide .seg-item { font-size: 13px; padding: 0 8px; flex: 0 0 auto; }
.nav-seg.wide .seg-item:first-child { flex: 1 1 auto; }
.sec-scroll { flex-grow: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.pad-bottom-bar { padding-bottom: calc(110px + var(--sab)); }
/* Tab 页但没有 navbar 的页面（任务）：顶部让开刘海、底部让开 tabbar */
.pad-tabbar { padding-top: calc(20px + var(--sat)); padding-bottom: calc(84px + var(--sab)); }

.block { display: flex; flex-direction: column; gap: 8px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; }
.block-head a { font-size: 13px; }
.block-title { font-size: 14px; font-weight: 700; }
.fold-head { align-items: center; cursor: pointer; user-select: none; }
.fold-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px;
  background: var(--brand); color: #ffffff; font-size: 11px; font-weight: 600; line-height: 16px;
}
.fold-arrow { color: var(--text-3); flex-shrink: 0; transition: transform .18s; }
.fold-arrow.on { transform: rotate(180deg); }

/* 参考视频输入框 */
.ref-box {
  height: 52px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; padding-left: 14px;
}
.ref-box.pick { padding-right: 14px; gap: 8px; cursor: pointer; }
.ref-hint { font-size: 14px; color: var(--text-3); }
.ref-action { width: 48px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ref-file-box { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ref-file-box.done { border-color: var(--brand); }
.ref-file-row { height: 52px; display: flex; align-items: center; padding-left: 10px; }
.ref-thumb {
  width: 34px; height: 34px; border-radius: 7px; background: var(--media);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ref-file-info { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; padding-left: 10px; min-width: 0; }
.ref-file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-progress { height: 3px; background: var(--track); display: flex; }
.ref-progress > div { background: var(--brand); transition: width .2s; }

/* 角色 / 产品选择 */
.asset-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px; }
.asset-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 68px; cursor: pointer; }
.asset-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; background: var(--card-2); }
.asset-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 2px solid transparent; background: var(--card-2); }
.asset-avatar.sel, .asset-thumb.sel { border-color: var(--brand); background: var(--brand-soft); }
.asset-name { font-size: 12px; color: var(--text-2); max-width: 68px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-name.sel { color: var(--brand); font-weight: 500; }
.add-cell {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--brand) !important; color: var(--brand); font-size: 24px; background: var(--card) !important;
  box-sizing: border-box;
}
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px 8px; justify-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px 8px; justify-items: center; }

/* 参数卡片 */
.param-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 18px;
}
.param-row { display: flex; flex-direction: column; gap: 10px; }
.param-label { font-size: 14px; font-weight: 700; }
.param-value { font-family: 'Anton', 'Arial Narrow', sans-serif; color: var(--brand); font-size: 16px; margin-left: 8px; }
.seg { display: flex; background: var(--card-2); border-radius: 10px; padding: 3px; gap: 3px; }
.seg-item {
  flex-grow: 1; height: 38px; border-radius: 8px; color: var(--text-2); font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.seg-item.on { background: var(--brand); color: #ffffff; font-weight: 500; }
.slider { width: 100%; accent-color: var(--brand); }

/* 底部固定操作条 */
.bottom-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; background: var(--card); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 12px 20px calc(12px + var(--sab)) 20px;
  box-sizing: border-box;
}
.quote-box { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.quote-num { font-family: 'Anton', 'Arial Narrow', sans-serif; color: var(--brand); font-size: 22px; }
.bar-btn { flex-grow: 1; margin-top: 0; }

/* 任务页 */
.notice-bar {
  background: var(--brand-soft); border-radius: 10px; padding: 10px 14px; color: var(--brand);
  font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.chips { display: flex; gap: 8px; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 17px; background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-2); display: flex; align-items: center; cursor: pointer;
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #ffffff; font-weight: 500; }
.task-card2 {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.task-thumb {
  width: 56px; height: 56px; border-radius: 10px; background: var(--media);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  position: relative; overflow: hidden;
}
/* 任务卡封面：复用内容页的封面缓存，盖在图标之上；加载失败 img 自移除露出图标 */
.task-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.task-icon { position: relative; overflow: hidden; }
.task-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fail-text { font-size: 12px; color: var(--brand); }
/* 失败原因的用户指引：比 fail-text 弱一档，允许换行成短段落 */
.fail-hint { font-size: 12px; color: #8a6d3b; line-height: 1.5; margin-top: 2px; }
/* 提示词终审：多变体时每条一个文本框，提示词较长给足高度 */
.prompt-area { min-height: 180px; font-size: 13px; }
/* 参考视频下方的勾选行（无口播声明） */
.check-line {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.check-line input { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
.mini-btn {
  height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card-2);
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.mini-btn.primary { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.mini-btn.danger { color: var(--brand); }
.pick-warn { font-size: 12px; color: var(--brand); background: var(--brand-soft); border-radius: 8px; padding: 7px 10px; }
.task-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; }
.mini-progress { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.mini-progress-in {
  height: 100%; width: 40%; border-radius: 2px; background: var(--brand);
  animation: slidebar 1.2s ease-in-out infinite;
}
@keyframes slidebar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* 进行中任务的环节展示 */
.stage-row { display: flex; align-items: center; gap: 6px; margin: 2px 0 5px; flex-wrap: wrap; }
.stage-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0;
  animation: stagepulse 1.4s ease-in-out infinite;
}
@keyframes stagepulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.stage-text { font-size: 12px; color: var(--brand); font-weight: 500; }
.stage-elapsed { font-size: 12px; color: var(--text-3); }
.stage-steps { display: flex; gap: 3px; }
.stage-seg { height: 4px; flex: 1; border-radius: 2px; background: var(--track); overflow: hidden; }
.stage-seg.done { background: var(--brand); }
.stage-seg.on { background: var(--track); position: relative; }
.stage-seg.on::after {
  content: ""; position: absolute; inset: 0; width: 45%; border-radius: 2px; background: var(--brand);
  animation: slidebar 1.2s ease-in-out infinite;
}

/* 搜索框 */
.search-box {
  height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px;
  font-size: 14px; font-family: inherit; background: var(--card); color: var(--text); outline: none; width: 100%;
  box-sizing: border-box;
}
.script-area {
  min-height: 180px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; line-height: 1.7; font-family: inherit; background: var(--card); color: var(--text);
  outline: none; width: 100%; box-sizing: border-box; resize: vertical;
}
.script-area:focus { border-color: var(--brand); }

/* 道具确认（口播稿确认弹层内） */
.prop-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.prop-name { font-size: 14px; font-weight: 600; color: var(--text); }
.prop-action { font-weight: 400; font-size: 12px; color: var(--text-3); margin-left: 8px; }
.prop-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prop-opt { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); cursor: pointer; }
.prop-opt input { accent-color: var(--brand); margin: 0; }
/* 确认弹层重设计（2026-09-28 用户：「窗口小、台词就是个小框」）：宽幅工作面板，左栏人物 / 场景 / 道具，右栏整篇口播稿或分镜；
   手机上全屏、上下堆叠；所有 textarea 随内容长高，正文整体滚动 */
.sheet.wide { max-width: 960px; max-height: 92vh; max-height: 92dvh; }
.confirm-sheet { padding: 0; max-height: 92vh; max-height: 92dvh; }
.cf-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.cf-head-text { flex: 1; min-width: 0; }
.cf-title { font-size: 17px; font-weight: 700; color: var(--text); }
.cf-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.confirm-sheet .cf-body { padding: 14px 18px 8px; gap: 0; }
.cf-cols { display: flex; flex-direction: column; gap: 18px; }
.cf-side, .cf-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cf-sec { display: flex; flex-direction: column; gap: 10px; }
.cf-sec > * { flex: none; }
.cf-sec.grow { flex: 1 1 auto; }
.cf-sec-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cf-sec-title .muted-sm { font-weight: 400; }
.cf-ta { min-height: 44px; resize: none; overflow: hidden; }
.cf-ta.fill { min-height: 40vh; min-height: 40dvh; }
.confirm-sheet .cf-foot { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 10px 18px calc(12px + var(--sab, 0px)); }
.cf-foot-hint { flex: 1 1 auto; min-width: 0; }
.scroll-sheet.confirm-sheet .cf-foot .btn-primary { flex: 0 0 auto; width: auto; min-width: 200px; padding: 0 28px; margin-top: 0; }
@media (max-width: 899px) { .cf-foot-hint { display: none; } .scroll-sheet.confirm-sheet .cf-foot .btn-primary { flex: 1 1 auto; width: 100%; } }
.line-list { display: flex; flex-direction: column; gap: 8px; }
.line-row { display: flex; align-items: flex-start; gap: 8px; }
.line-who {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 12.5px; cursor: pointer; flex-shrink: 0; max-width: 156px; height: 36px; font-family: inherit;
}
.line-who img, .line-who-empty { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.line-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 四位说话人四种描边色；底色用半透明，深浅两套主题都看得清 */
.line-who.sp-0 { border-color: #3b82f6; background: rgba(59,130,246,.14); }
.line-who.sp-1 { border-color: #f59e0b; background: rgba(245,158,11,.16); }
.line-who.sp-2 { border-color: #22c55e; background: rgba(34,197,94,.14); }
.line-who.sp-3 { border-color: #a855f7; background: rgba(168,85,247,.16); }
.line-text {
  flex: 1; min-width: 0; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 14px; line-height: 1.55;
  font-family: inherit; background: var(--card); color: var(--text); outline: none; resize: none; overflow: hidden; box-sizing: border-box;
}
.line-text:focus { border-color: var(--brand); }
.line-del { width: 28px; height: 36px; border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 12px; flex-shrink: 0; }
.line-del:hover { color: var(--brand); }
.line-add { align-self: flex-start; border: 1px dashed var(--line); background: transparent; color: var(--brand); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
@media (max-width: 899px) {
  .sheet.wide { max-width: none; padding: 0; max-height: 100vh; max-height: 100dvh; height: 100dvh; }
  .confirm-sheet { max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; }
  .cf-head { padding-top: calc(14px + var(--sat, 0px)); }
  .cf-ta.fill { min-height: 46vh; min-height: 46dvh; }
  .line-who { max-width: 104px; padding-right: 8px; font-size: 12px; }
  .line-del { width: 22px; }
  .confirm-sheet .cf-body { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 900px) {
  .cf-cols { flex-direction: row; align-items: flex-start; gap: 24px; }
  .cf-side { flex: 0 0 340px; }
  .cf-main { flex: 1 1 auto; }
  .cf-cols.single { flex-direction: column; }
  .cf-cols.single .cf-side { flex: 1 1 auto; }
}
/* 多说话人角色分配（确认弹层）：圆形头像 + 分配选项 */
.cast-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; gap: 12px; align-items: flex-start; }
.cast-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--brand-soft); flex-shrink: 0; position: relative; cursor: pointer; }
.cast-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cast-face-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 20px; }
.cast-face-more { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; font-size: 10px; line-height: 14px; color: #fff; background: rgba(0,0,0,.45); }
.cast-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cast-line { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.cast-role { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text); }
.cast-role img, .cast-role .cast-face-empty { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--brand-soft); font-size: 14px; }
.cast-role.sel { border-color: var(--brand); background: rgba(59,130,246,.14); color: var(--text); }
.prop-select {
  flex: 1 1 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px;
  font-size: 13px; font-family: inherit; background: var(--card); color: var(--text); outline: none;
}
.prop-select:focus { border-color: var(--brand); }

/* 遮罩与弹层 */
.mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.mask.dark { background: rgba(0,0,0,.88); gap: 16px; }
.sheet {
  width: 100%; max-width: 430px; padding: 0 12px; box-sizing: border-box;
  max-height: 86vh; max-height: 86dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
/* 长表单弹层（口播/场景/道具确认、提示词终审）：标题与按钮固定，中间正文自己滚动——
   内容超过屏高时按钮不会被顶出屏幕（2026-09-04 用户手机上要缩放才找得到确认按钮） */
.scroll-sheet { display: flex; flex-direction: column; max-height: 82vh; max-height: 82dvh; min-height: 0; }
.scroll-sheet .sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding-right: 2px;
}
.scroll-sheet .sheet-foot { flex: 0 0 auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.scroll-sheet .sheet-foot .btn-primary { width: 100%; }
.scroll-sheet .script-area { min-height: 120px; }
.sheet-card { background: var(--card); border-radius: 14px; overflow: hidden; }
.sheet-title { text-align: center; font-size: 13px; color: var(--text-3); padding: 12px; border-bottom: 1px solid var(--line-soft); }
.sheet-row {
  height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.sheet-row:last-child { border-bottom: none; }
.sheet-row.danger { color: var(--brand); }
.sheet-cancel { height: 52px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; cursor: pointer; }
.form-sheet { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.form-sheet .sheet-title { border-bottom: none; padding: 0 0 4px 0; font-size: 16px; font-weight: 700; color: var(--text); }

/* 三视图查看 */
.viewer-img { max-width: 92%; max-height: 70vh; border-radius: 10px; object-fit: contain; background: var(--media); }
.player-video { max-width: 92%; max-height: 70vh; border-radius: 10px; background: #000000; }
.viewer-bar { display: flex; gap: 10px; }
.viewer-cell {
  padding: 8px 14px; border-radius: 8px; background: rgba(255,255,255,.14); color: #ffffff;
  font-size: 13px; cursor: pointer; border: 1.5px solid transparent;
}
.viewer-cell.on { border-color: var(--brand); background: var(--brand-glass); font-weight: 500; }

/* 内容管理 */
.content-group { display: flex; flex-direction: column; gap: 10px; }
.date-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.content-grid { justify-items: stretch; }
.content-card { display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; }
.content-thumb {
  position: relative; height: 128px; border-radius: 10px; background: var(--media);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* 封面铺满裁切；加载失败时 img 会被移除，露出底下的深色底与播放图标 */
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 播放图标浮在封面之上，加投影保证亮色画面上也看得清 */
.thumb-play { position: relative; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.dur-badge {
  position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #ffffff;
  font-size: 10px; padding: 2px 6px; border-radius: 5px;
}
.content-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 充值 / 统计 */
.stat-row { display: flex; gap: 10px; }
.stat-card {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.stat-card.wide { flex: none; }
.stat-num { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 24px; color: var(--brand); }
.stat-num.dark { color: var(--text); }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.info-title { font-size: 14px; font-weight: 700; }
.info-text { font-size: 13px; color: var(--text-2); line-height: 1.7; }

.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; cursor: pointer; height: 100%; }
.chart-val { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 13px; color: var(--brand); }
.chart-bar { width: 60%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--brand-tint); }
.chart-bar.hot { background: var(--brand); }
.chart-x { font-size: 10px; color: var(--text-3); }
.chart-x.hot { color: var(--text); font-weight: 700; }

.tx-list { display: flex; flex-direction: column; }
.tx-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
  padding: 13px 16px; display: flex; align-items: center; gap: 12px;
}
.tx-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tx-title { font-size: 14px; font-weight: 500; }
.tx-amount { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 17px; color: var(--text); flex-shrink: 0; }
.tx-amount.in { color: var(--brand); }

/* 我的 - 菜单 */
.menu-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.menu-row {
  height: 52px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.menu-row:last-child { border-bottom: none; }
.arrow { color: var(--text-4); font-size: 18px; }
.pc-btn.small { height: 36px; padding: 0 14px; font-size: 13px; background: var(--brand); color: #ffffff; }

.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.task-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.task-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.task-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storage-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.storage-card.warn { border-color: var(--brand-line); }
.storage-card.full { border-color: var(--brand); }
.storage-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.storage-num { font-size: 12px; color: var(--text-2); }
.storage-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.storage-bar > div { height: 100%; background: var(--brand); border-radius: 3px; transition: width .3s; }
.storage-tip { font-size: 12px; color: var(--brand); }

.task-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.task-name-row .task-name { min-width: 0; }
.rename-ico { flex-shrink: 0; padding: 5px; margin: -5px; box-sizing: content-box; opacity: .6; cursor: pointer; }
.task-status { font-size: 12px; border-radius: 6px; padding: 4px 8px; flex-shrink: 0; }
.st-queued { color: var(--text-2); background: var(--card-2); }
.st-processing { color: var(--brand); background: var(--brand-soft); }
.st-succeeded { color: var(--text-2); background: var(--card-2); }
.st-failed { color: #ffffff; background: var(--brand); }

.my-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  display: flex; align-items: center; gap: 14px;
}
.my-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.btn-plain {
  height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--brand); font-size: 15px; font-family: inherit; cursor: pointer;
}

/* 底部导航 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  /* 安全区要加进高度：全局 border-box 下只加 padding 会把图标挤扁 */
  height: calc(64px + var(--sab));
  background: var(--card); border-top: 1px solid var(--line); display: flex;
  padding-bottom: var(--sab);
}
.tab {
  flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--text-3); cursor: pointer;
}
.tab.active { color: var(--brand); }
.tab-label { font-size: 11px; }
.tab.active .tab-label { font-weight: 500; }

.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: rgba(17,17,17,.85); color: #ffffff; font-size: 13px;
  padding: 10px 18px; border-radius: 8px; z-index: 99; white-space: nowrap;
}

/* AI 角色设计 */
.des-refs { display: flex; flex-wrap: wrap; gap: 10px; }
.des-ref { position: relative; }
.des-ref-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); color: #ffffff; font-size: 14px; line-height: 18px; text-align: center; cursor: pointer;
}
.des-head { display: flex; align-items: baseline; justify-content: space-between; }
.des-head a { font-size: 13px; }
.des-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.des-field { display: flex; flex-direction: column; gap: 6px; }
.des-label { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.des-badge {
  font-size: 11px; font-weight: 400; color: var(--brand); background: var(--brand-soft);
  border-radius: 4px; padding: 1px 6px;
}
.des-input { min-height: 62px; line-height: 1.6; }
.des-input:disabled { background: var(--surface); color: var(--text-3); }
.des-ask { display: flex; gap: 8px; align-items: center; }
.des-ask .search-box { flex-grow: 1; min-width: 0; }
.des-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.des-check input { margin-top: 3px; flex-shrink: 0; }
.des-sheet {
  width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 10px;
  background: var(--card-2); cursor: pointer;
}
.des-prompt {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 12px; line-height: 1.7; color: var(--text-2); white-space: pre-wrap;
}
.des-hist {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.des-hist:last-child { border-bottom: none; }

/* ===== 桌面端（≥900px）：左侧边栏 + 居中内容列，手机端样式全部不受影响 ===== */
.side-brand { display: none; }         /* 品牌区仅桌面侧边栏显示 */
.tabbar.on-sub { display: none; }      /* 手机上二级页不显示底部导航（桌面媒体查询里会重新打开） */

@media (min-width: 900px) {
  #app { max-width: none; box-shadow: none; }

  /* 底部 tabbar 变形为左侧边栏 */
  .tabbar, .tabbar.on-sub {
    display: flex; flex-direction: column; justify-content: flex-start;
    left: 0; top: 0; bottom: 0; transform: none;
    width: 220px; max-width: none; height: auto;
    border-top: none; border-right: 1px solid var(--line);
    padding: 20px 14px 20px 14px; gap: 4px;
  }
  .side-brand {
    display: block; padding: 6px 14px 24px 14px;
    font-family: 'Anton', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 26px; font-weight: 700; color: var(--brand); letter-spacing: .1em; line-height: 1;
  }
  .side-brand-en {
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: var(--text-3); letter-spacing: .22em; margin-top: 8px;
  }
  .tab {
    flex-grow: 0; flex-direction: row; justify-content: flex-start;
    gap: 12px; height: 46px; padding: 0 14px; border-radius: 10px;
  }
  .tab-label { font-size: 14px; }
  .tab.active { background: var(--brand-soft); }
  .tab:hover { background: var(--hover); }
  .tab.active:hover { background: var(--brand-soft); }

  /* 内容区让开侧边栏并居中成列 */
  .page { margin-left: 220px; }
  .main-scroll, .sec-scroll { width: 100%; max-width: 780px; margin: 0 auto; }
  .main-scroll { padding-top: 28px; padding-bottom: 40px; }
  .pad-tabbar { padding-top: 28px; padding-bottom: 40px; }
  .navbar {
    padding-left: max(12px, calc((100% - 780px) / 2));
    padding-right: max(12px, calc((100% - 780px) / 2));
  }

  /* 登录/注册：无侧边栏，整体变居中卡片 */
  .login-page {
    margin: 48px auto; max-width: 430px; min-height: 0;
    border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.10);
  }

  /* 首页：五个功能卡一行铺开（复制视频卡还原成普通竖卡） */
  .entry-grid { grid-template-columns: repeat(5, 1fr); }
  .entry-card.main { grid-column: auto; flex-direction: column; align-items: stretch; gap: 10px; }
  .entry-card.main .entry-ico { width: 40px; height: 40px; border-radius: 11px; }
  .entry-card.main .entry-title { font-size: 15px; }

  /* 首尾帧上传左右并排 */
  .frame-cols { flex-direction: row; align-items: flex-start; }
  .frame-cols .block { flex: 1; min-width: 0; }

  /* 素材/内容网格按宽度自动铺列（顺序在 content-grid 之前，让它能覆盖） */
  .grid3, .grid4 { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 创建页底部操作条：跟随内容列贴底（滚动中始终可见，滚到底自然归位） */
  .bottom-bar {
    position: sticky; bottom: 0; left: auto; transform: none;
    width: 100%; max-width: 780px; margin: 0 auto;
    border: 1px solid var(--line); border-bottom: none; border-radius: 14px 14px 0 0;
  }
  .pad-bottom-bar { padding-bottom: 24px; }

  /* 弹层与提示：略微加宽、在内容区居中 */
  .sheet { max-width: 480px; }
  .toast { margin-left: 110px; }
}

/* 模型选择卡（蓝色版本） */
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.model-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); cursor: pointer; }
.model-card.on { border-color: var(--brand); background: var(--brand-soft); }
.model-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.model-tier { font-size: 11px; font-weight: 400; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 0 7px; }
.model-card.on .model-tier { background: var(--card); }
.model-meta { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.model-blurb { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.model-check { margin-left: auto; color: var(--brand); font-weight: 700; }
.block-sub { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--text-3); }
.model-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 0 7px; vertical-align: middle; }
@media (min-width: 900px) { .model-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }

/* ---------- 参考视频截取（播放器 + 时间线双手柄） ---------- */
.trim-box { margin-top: 8px; background: var(--surface, var(--card)); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.trim-video { width: 100%; max-height: 260px; background: #000; border-radius: 8px; display: block; }
.trim-bar { position: relative; height: 34px; margin: 12px 8px 4px; background: var(--track); border-radius: 6px; touch-action: none; user-select: none; }
.trim-range { position: absolute; top: 0; height: 100%; background: var(--brand-tint, #dbe7ff); border-top: 2px solid var(--brand); border-bottom: 2px solid var(--brand); box-sizing: border-box; }
.trim-playhead { position: absolute; top: -4px; width: 2px; height: calc(100% + 8px); background: var(--text); transform: translateX(-1px); pointer-events: none; }
.trim-handle { position: absolute; top: -2px; width: 22px; height: 38px; transform: translateX(-50%); background: var(--brand); color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: ew-resize; touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.trim-handle.on { background: var(--brand-deep, #1544b3); }
.trim-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 0; font-size: 13px; }
.trim-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.trim-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.btn-mini { padding: 6px 10px; font-size: 12px; border: 1px solid var(--brand-line, #b9ccf5); color: var(--brand); background: var(--card); border-radius: 8px; cursor: pointer; }
.btn-mini:active { background: var(--brand-soft, #eef3ff); }

/* ===== 创造爆款（2026-09-04）：手机上一只手能点的大按钮与方向卡 ===== */
.cr-intro { font-size: 14px; line-height: 1.6; color: var(--text-2); background: var(--brand-soft); border-radius: 10px; padding: 10px 12px; }
.block-sub { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 12px; background: var(--card); cursor: pointer; min-height: 76px; }
.goal-card.on { border-color: var(--brand); background: var(--brand-soft); }
.goal-title { font-size: 16px; font-weight: 700; color: var(--text); }
.goal-card.on .goal-title { color: var(--brand-deep, var(--brand)); }
.goal-sub { font-size: 13px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }
.seg.big-seg .seg-item { height: 44px; font-size: 15px; }
.seg-item.off { color: var(--text-4); }
.dir-list { display: flex; flex-direction: column; gap: 10px; }
.dir-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); cursor: pointer; }
.dir-card.on { border-color: var(--brand); background: var(--brand-soft); }
.dir-head { display: flex; align-items: center; gap: 8px; }
.dir-name { font-size: 12px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 1px 9px; }
.dir-card.on .dir-name { background: var(--card); }
.dir-rec { font-size: 11px; color: #ffffff; background: var(--brand); border-radius: 999px; padding: 1px 8px; }
.dir-check { margin-left: auto; color: var(--brand); font-weight: 700; font-size: 16px; }
.dir-title { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 8px; line-height: 1.4; }
.dir-idea { font-size: 13.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; }
.dir-beats { font-size: 13px; color: var(--text-3); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.6; }
.dir-loading { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); padding: 14px 0; }
.brand-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brand-row .search-box { min-width: 0; }
@media (min-width: 900px) { .dir-list { display: grid; grid-template-columns: repeat(3, 1fr); } }
/* 创造爆款 · 产品信息表单 */
.brief-form { display: flex; flex-direction: column; gap: 8px; }
.brief-label { font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.brief-label .muted-sm { font-weight: 400; }
.brief-input { font-size: 14px; }

/* ===== 产品详情面板（2026-09-05 重设计）：表单式，分节清楚 ===== */
.pd-sheet { padding: 0; }
.pd-sheet .sheet-body { padding: 14px 16px 6px; gap: 18px; }
.pd-sheet .sheet-foot { padding: 10px 16px calc(12px + var(--sab, 0px)); }
.pd-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.pd-avatar { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--card-2); flex-shrink: 0; cursor: pointer; }
.pd-head-text { flex: 1; min-width: 0; }
.pd-name { font-size: 17px; font-weight: 700; color: var(--text); }
.pd-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.pd-close { width: 32px; height: 32px; border-radius: 50%; background: var(--card-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.pd-section { display: flex; flex-direction: column; gap: 10px; }
.pd-sec-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.pd-sec-title .muted-sm { font-weight: 400; }
.pd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pd-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--card-2); flex-shrink: 0; cursor: pointer; }
.pd-usage { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.pd-usage-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pd-usage-name { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; }
.pd-del { font-size: 12.5px; color: #e55; font-weight: 400; }
.pd-seg .seg-item { height: 32px; font-size: 13px; }
.pd-add { height: 42px; font-size: 14px; }
.pd-danger { display: block; text-align: center; color: #e55; font-size: 14px; padding: 6px 0 4px; }
/* 创造爆款页的产品信息摘要卡 */
.pd-summary { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.pd-sum-intro { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chip { font-size: 12.5px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 2px 10px; }
.pd-sum-empty { font-size: 13.5px; line-height: 1.6; color: var(--brand); }

/* ===== 生成设置卡（2026-09-05）：格子式「点开选」+ 开关行；选项走通用弹层 ===== */
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.set-tile { position: relative; padding: 11px 26px 11px 14px; min-height: 62px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; gap: 3px; cursor: pointer; }
.set-tile:nth-child(2n) { border-right: none; }
.set-tile::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--text-4); border-bottom: 1.5px solid var(--text-4); transform: translateY(-60%) rotate(-45deg); }
.set-tile:active { background: var(--hover); }
.set-k { font-size: 12px; color: var(--text-3); }
.set-v { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.set-tag { display: inline-block; vertical-align: 1px; font-size: 11px; font-weight: 400; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 0 6px; margin-left: 6px; }
.set-switches { display: flex; flex-direction: column; }
.set-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.set-switches > :last-child { border-bottom: none; }
.set-sw-text { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; font-weight: 600; color: var(--text); min-width: 0; }
.set-sw-text .muted-sm { font-weight: 400; line-height: 1.4; }
.set-switch input { display: none; }
.sw { width: 44px; height: 26px; border-radius: 13px; background: var(--track-2); position: relative; flex-shrink: 0; transition: background .18s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .18s; }
.set-switch input:checked + .sw { background: var(--brand); }
.set-switch input:checked + .sw::after { left: 21px; }
.set-sub { padding: 0 14px 12px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line-soft); margin-top: -4px; }
.set-sub a { color: var(--brand); margin-left: 6px; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.pick-row:last-child { border-bottom: none; }
.pick-row.on { background: var(--brand-soft); }
.pick-row.off { opacity: .45; cursor: not-allowed; }
.pick-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-label { font-size: 15.5px; color: var(--text); }
@media (min-width: 900px) { .set-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .set-tile:nth-child(2n) { border-right: 1px solid var(--line-soft); } .set-tile:nth-child(3n) { border-right: none; } }

/* 生成设置：奇数个格子时最后一格通栏；时长滑杆弹层 */
.set-tile:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
.pick-slider { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.pick-big { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 40px; color: var(--brand); text-align: center; line-height: 1; }
.pick-big span { font-family: inherit; font-size: 16px; color: var(--text-3); margin-left: 4px; }
.pick-range { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: -6px; }
.pick-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--text); cursor: pointer; background: var(--card); }
.pick-chip.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
@media (min-width: 900px) { .set-tile:last-child:nth-child(odd) { grid-column: auto; } }

.qc-ok { color: #1f7a4d; }
.qc-warn { color: #d97706; }

/* ---------- 视频超分独立工具页 ---------- */
.eh-file.bad { border-color: #e5484d; }
.eh-err { color: #d1434b; }
.eh-pick { min-height: 72px; }
.eh-quote { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 15px; }
.eh-task {
  display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.eh-task.sel { border-color: var(--brand, #1a56db); background: var(--brand-soft, #eef3ff); }
.eh-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--card);
}
.eh-check.on { background: var(--brand, #1a56db); border-color: var(--brand, #1a56db); }
.eh-check.off { visibility: hidden; }
.eh-task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eh-task-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 参考爆款创作：故事板确认 ---------- */
.sb-decon { background: var(--brand-soft, #eef3ff); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sb-decon-title { font-size: 12px; color: var(--brand, #1a56db); font-weight: 600; }
.sb-decon-text { font-size: 13.5px; line-height: 1.5; }
.sb-warn { color: #d97706; }
.sb-arc { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-arc-item { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--brand-line, #b9ccf5); color: var(--text); }
.sb-arc-item + .sb-arc-item::before { content: ""; }
.sb-beat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.sb-beat-head { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.sb-beat-stage { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft, #eef3ff); color: var(--brand, #1a56db); }
.sb-beat-vis { font-size: 11px; color: #1f7a4d; border: 1px solid #b7e1c9; border-radius: 999px; padding: 0 6px; }
.sb-beat-subject { font-size: 12px; }
.sb-beat-action { min-height: 56px !important; font-size: 14px; }
.sb-beat-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr 2fr; gap: 6px; }
.sb-mini { font-size: 13px; padding: 6px 8px; min-width: 0; }

/* 产品图含人像 → 入库提示（新增产品弹层）与产品面板的入库状态块（2026-09-09） */
.face-box { background: var(--warn-bg); border: 1px solid rgba(245,166,35,.35); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #8a5a00; }
.face-box .check-line { color: #8a5a00; font-size: 13px; font-weight: 600; }
.pd-ingest { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ground); font-size: 13px; }

/* 任务生成设置弹层底部：复制 / 保存 / 保存并开始 并排（2026-09-09） */
/* 弹层正文是 flex 列且可滚动：表单项一律不许被压缩（实测 textarea 被压到 1px 高） */
.task-set-body > * { flex: none; }
.task-set-body textarea.search-box { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; }
.task-set-foot { display: flex; gap: 8px; }
.task-set-foot .btn-plain, .scroll-sheet .task-set-foot .btn-primary { flex: 1; width: auto; }

/* 扫脸弹层二维码（2026-09-09） */
.face-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; }
.face-qr { width: 220px; height: 220px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-sizing: content-box; }
.face-qr img, .face-qr canvas { display: block; width: 220px; height: 220px; }
/* 在线充值（2026-09-25） */
/* 充值页（2026-09-28 重设计）：金额大字 / 自定义即大输入框；支付方式按钮即付款按钮 */
.pay-amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 6px 0 0; min-height: 64px; cursor: default; }
.pay-amount.editing { cursor: text; border-bottom: 2px solid var(--brand); margin: 0 24px; }
.pay-cur { font-size: 26px; font-weight: 600; color: var(--text-2); }
.pay-num { font-size: 52px; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -1px; }
.pay-input { width: 6ch; min-width: 3ch; font-size: 52px; font-weight: 700; color: var(--text); line-height: 1.1; background: transparent; border: none; outline: none; text-align: left; font-family: inherit; padding: 0; -moz-appearance: textfield; }
.pay-input::-webkit-outer-spin-button, .pay-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pay-input::placeholder { color: var(--text-4); }
.pay-arrive { text-align: center; font-size: 13px; color: var(--text-2); margin-top: -2px; }
.pay-arrive.warn { color: #fbbf24; }
.pay-tiers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pay-sub { margin-top: 6px; }
.pay-channels { display: flex; gap: 10px; }
.pay-ch { flex: 1; height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; font-family: inherit; white-space: nowrap; padding: 0 8px; }
.pay-ch.wechat { background: #07c160; border-color: #07c160; }
.pay-ch.alipay { background: #1677ff; border-color: #1677ff; }
.pay-ch:disabled { opacity: .45; cursor: not-allowed; }
.pay-ch-ico { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pay-ch .muted-sm { color: rgba(255,255,255,.8); }
.pay-sheet { align-items: stretch; }
.pay-amt { text-align: center; font-size: 30px; font-weight: 700; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pay-qr { width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: 12px; box-sizing: content-box; border: 3px solid #fff; }
.pay-qr.wechat { border-color: #07c160; }
.pay-qr.alipay { border-color: #1677ff; }
.pay-qr img, .pay-qr canvas { display: block; width: 220px; height: 220px; }
.pay-tip { text-align: center; font-size: 13px; color: var(--text-2); }
.refund-st { font-size: 12px; padding: 3px 8px; border-radius: 8px; flex: none; }
.refund-st.requested { color: #fbbf24; background: rgba(251,191,36,.12); }
.refund-st.done { color: #16a34a; background: rgba(22,163,74,.12); }
.refund-st.rejected, .refund-st.cancelled { color: var(--text-3); background: var(--hover); }
/* 分销商中心（2026-09-28） */
.dl-head { padding: 4px 0 10px; }
.dl-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.dl-rule { padding: 8px 0 12px; line-height: 1.6; }
.dl-seg { margin-bottom: 12px; }
.dl-mini { padding: 2px; }
.dl-mini .seg-item { height: 26px; font-size: 12px; padding: 0 10px; }
.dl-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1px; cursor: pointer; }
.dl-prod { margin-bottom: 12px; }
.dl-prod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dl-prod-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.dl-prod-price { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 26px; color: var(--brand); white-space: nowrap; }
.dl-qty { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dl-qty-input { width: 64px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); text-align: center; font-size: 15px; }
.dl-total { margin-left: auto; font-size: 14px; }
@media (min-width: 900px) { .page.no-side { margin-left: 0; } .page.no-side .sec-scroll { max-width: 860px; } }
.pay-note { font-size: 12px; line-height: 1.6; color: var(--text-3); padding-top: 6px; border-top: 1px dashed var(--line); }
.app-right .section-head { flex-wrap: wrap; gap: 2px 8px; }  /* 充值页右栏：标题旁的说明在窄栏里换行 */
.app-right .section-head + .tx-list { margin-top: 8px; }
.pay-redirect { display: flex; justify-content: center; padding: 10px 0; }
.pay-redirect-ico { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: #fff; }
.pay-redirect-ico.alipay { background: #1677ff; }
.pay-done { text-align: center; font-size: 17px; color: #16a34a; font-weight: 600; padding: 24px 0; }

/* 注册页用户名即时检查提示（2026-09-09） */
.name-hint { font-size: 12px; margin-top: 6px; color: var(--text-3); }
.name-hint.ok { color: #16a34a; }
.name-hint.taken { color: #c2410c; }
.name-hint.bad { color: #c0392b; }
.name-hint a { margin-left: 8px; color: var(--brand); text-decoration: underline; cursor: pointer; }

/* ===== 婚礼歌曲（2026-09-09） ===== */
.song-names { display: flex; align-items: center; gap: 8px; }
.song-names .search-box { flex: 1 1 0; min-width: 0; }
.song-amp { color: var(--text-3); font-weight: 700; }
.song-story { min-height: 140px; margin-top: 8px; }
.song-chat { margin-top: 8px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.chat-line { display: flex; }
.chat-line.user { justify-content: flex-end; }
.chat-bubble { max-width: 84%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  background: var(--card); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; }
.chat-line.user .chat-bubble { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.chat-bubble.muted { color: var(--text-3); }
.song-chat-input { display: flex; gap: 8px; margin-top: 8px; }
.song-chat-input .search-box { flex: 1 1 0; min-width: 0; }
.song-send { width: 64px; height: 44px; flex: none; }
.song-profile { margin-top: 8px; padding: 8px 10px; background: var(--brand-soft); border-radius: 10px; }
.song-profile-line { font-size: 12px; line-height: 1.6; color: var(--text); }
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px; }
.style-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; }
.style-card.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.style-head { display: flex; align-items: center; justify-content: space-between; }
.style-name { font-weight: 700; font-size: 14px; }
.style-play { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #ffffff; font-size: 11px; flex: none; }
.style-play.on { background: #e5484d; }
.style-blurb { font-size: 12px; color: var(--text-2); }
.song-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.song-row-k { width: 56px; flex: none; font-size: 13px; color: var(--text-2); }
.song-seg { flex: 1 1 0; min-width: 0; }
.lyrics-area { min-height: 260px; font-size: 14px; line-height: 1.7; }
.song-revise { display: flex; gap: 8px; }
.song-revise .search-box { flex: 1 1 0; min-width: 0; }
.song-revise-btn { width: 72px; height: 44px; flex: none; }
.song-details { margin-top: 4px; }
.song-ver { padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.song-ver.on { border-color: var(--brand); }
.song-ver-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.song-ver-head .muted-sm { flex: 1 1 auto; }
.song-dl { color: var(--brand); font-size: 13px; text-decoration: none; }
.song-audio { width: 100%; height: 36px; }
.song-lyrics { padding: 8px 10px; background: var(--surface); border-radius: 12px; max-height: 260px; overflow-y: auto; }
.song-lyric-line { font-size: 14px; line-height: 1.8; color: var(--text-2); transition: color .2s; }
.song-lyric-line.tag { height: 6px; }
.song-lyric-line.on { color: var(--brand); font-weight: 700; }
.content-thumb.audio { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); }
.player-audio { width: min(92vw, 420px); }
@media (min-width: 900px) {
  .style-grid { grid-template-columns: repeat(3, 1fr); }
  .entry-grid { grid-template-columns: repeat(4, 1fr); }
}

.story-arc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.arc-step { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); background: var(--card); }
.arc-step.done { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.song-story-text { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }
.song-draft-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; }
.song-draft-acts { white-space: nowrap; }
.song-draft-acts a { color: var(--brand); font-weight: 600; margin-left: 14px; cursor: pointer; }
.song-restart { float: right; font-size: 12px; font-weight: 400; color: var(--brand); cursor: pointer; }
.song-name-cell { flex: 1 1 0; min-width: 0; }
.song-name-k { font-size: 12px; color: var(--text-3); margin-bottom: 4px; }

/* 婚礼歌曲创作页：三步分组（2026-09-10 用户要求按创作流程归类） */
.song-step { padding-top: 14px; }
.song-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.song-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.song-step-t { flex: 1 1 0; min-width: 0; font-size: 15px; font-weight: 700; }
.song-step-t .block-sub { display: block; margin-left: 0; margin-top: 1px; }
.song-step-state { flex: none; font-size: 12px; color: var(--brand); max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-sub { font-size: 12px; font-weight: 600; color: var(--text-3); margin: 14px 0 6px; }
.song-step .song-sub:first-of-type { margin-top: 10px; }
.song-bar-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* 婚礼歌曲创作页第二版：紧凑（选项进设置卡格子，勾选与语气用小控件） */
.song-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.song-check input { display: none; }
.song-check i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--card); position: relative; flex: none; }
.song-check input:checked + i { background: var(--brand); border-color: var(--brand); }
.song-check input:checked + i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.song-mode-seg { margin-top: 10px; }
.song-mode-seg .seg-item { height: 32px; font-size: 13px; }
.song-tone { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.song-tone-k { flex: none; font-size: 12px; color: var(--text-3); }
.song-chips { flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 6px; }
.song-chips .chip { height: 28px; padding: 0 11px; font-size: 12.5px; }
.song-step .style-grid { margin-top: 0; }
.song-step .style-card { padding: 8px 10px; }
.song-step .style-name { font-size: 13.5px; }
.song-step .set-tile { min-height: 56px; }

/* 婚礼歌曲创作页第三版 */
.song-name-hint { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.song-name-hint .song-check { margin-top: 0; }
.song-chatbox { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.song-chatbox-head { display: flex; align-items: center; gap: 6px; padding: 9px 12px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.song-chatbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.song-chatbox .song-chat { margin-top: 0; border: none; border-radius: 0; min-height: 240px; max-height: 360px; background: var(--surface); }
.song-chatbox .song-chat-input { margin-top: 0; padding: 8px; border-top: 1px solid var(--line-soft); background: var(--card); }
.song-chatbox .song-send { width: 60px; height: 40px; }
.song-chatbox .song-chat-input .search-box { height: 40px; }
.chat-bubble.typing { display: flex; gap: 4px; align-items: center; padding: 10px 12px; }
.chat-bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: song-typing 1.2s infinite ease-in-out; }
.chat-bubble.typing i:nth-child(2) { animation-delay: 0.2s; }
.chat-bubble.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes song-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.style-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.style-cell { position: relative; padding: 9px 10px 9px 10px; min-height: 66px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.style-cell:nth-child(3n) { border-right: none; }
.style-cell:nth-last-child(-n+3) { border-bottom: none; }
.style-cell.on { background: var(--brand-soft); box-shadow: 0 0 0 1.5px var(--brand) inset; }
.style-cell .style-name { font-size: 13px; font-weight: 700; padding-right: 22px; }
.style-cell .style-blurb { font-size: 11px; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.style-cell .style-play { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; font-size: 9px; }
.set-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-grid.cols3 .set-tile { padding-right: 18px; }
.set-grid.cols3 .set-tile:nth-child(2n) { border-right: 1px solid var(--line-soft); }
.set-grid.cols3 .set-tile:nth-child(3n) { border-right: none; }
.set-grid.cols3 .set-tile:last-child:nth-child(odd) { grid-column: auto; }
.set-grid.cols3 .set-tile:nth-child(4):last-child { grid-column: 1 / -1; border-right: none; }
.set-grid.cols3 .set-tile::after { right: 8px; }
.set-tile.toggle::after { display: none; }
.sw.mini { display: inline-block; vertical-align: -3px; margin-left: 6px; width: 26px; height: 16px; border-radius: 8px; background: var(--track-2); position: relative; }
.sw.mini::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); transition: left .15s; }
.sw.mini.on { background: var(--brand); }
.sw.mini.on::after { left: 12px; }

/* 三生三世小电影（2026-09-11） */
.film-photos { display: flex; gap: 12px; }
.film-photo-col { flex: 1 1 0; min-width: 0; }
.film-photo-box { border: 1px dashed var(--brand-line, #c7d2fe); border-radius: 12px; padding: 10px; background: rgba(26, 86, 219, .04); margin-top: 8px; }
.film-photo-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 2px 0 8px; }
.film-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.film-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-thumb.add { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-3); cursor: pointer; border-style: dashed; }
.film-thumb-x { position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 18px; text-align: center; cursor: pointer; border-bottom-left-radius: 8px; }
.film-era-group { margin-top: 2px; }
.film-era { position: relative; }
.film-era-n { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--card); color: var(--brand); font-size: 11px; font-weight: 700; align-items: center; justify-content: center; margin-right: 5px; }
.film-final { display: flex; flex-direction: column; gap: 6px; }
.film-video { width: 100%; border-radius: 10px; background: #000; }
.film-life { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.film-life-head { font-size: 14px; }
.film-card-line { line-height: 1.4; }
.film-sheets { display: flex; flex-direction: column; gap: 10px; }
.film-sheet-col { display: flex; flex-direction: column; gap: 4px; }
.film-sheet-img { width: 100%; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.film-vers { display: flex; gap: 6px; flex-wrap: wrap; }
.film-ver { width: 72px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; text-align: center; font-size: 11px; color: var(--text-2); }
.film-ver.on { border-color: var(--brand); }
.film-ver img { width: 100%; display: block; }
.film-clips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.film-clip { width: 100%; border-radius: 8px; background: #000; }
.film-thumb.add.busy { font-size: 12px; color: var(--brand); border-color: var(--brand); }

.film-song { margin-top: 8px; }
.film-lyrics { margin: 6px 0 0; font: inherit; font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--text-2, var(--text-2)); max-height: 220px; overflow: auto; }

/* ===== 视频换人：时间线切点（2026-09-14）===== */
.cut-tick { position: absolute; top: 0; width: 2px; height: 100%; background: #f5a623; opacity: .75; transform: translateX(-1px); pointer-events: none; }
.cut-tick.black { background: #333333; }
.cut-tick.pause { background: #2bb673; }
.cut-mark { position: absolute; top: -6px; width: 3px; height: calc(100% + 12px); background: #d0021b; transform: translateX(-1px); pointer-events: none; border-radius: 2px; }
.cut-chip { display: inline-block; margin: 3px 6px 0 0; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 12px; cursor: pointer; }
.cut-chip.black { border-color: var(--line-strong); }
.cut-chip.pause { border-color: #2bb673; color: #2bb673; }
.cut-chip.on { background: #d0021b; border-color: #d0021b; color: #ffffff; }
.frame-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; outline: none; }
.frame-nav:focus { box-shadow: 0 0 0 2px var(--brand-line, #b9ccf5); border-radius: 8px; }
.frame-pos { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 120px; text-align: center; }
.frame-scrub { width: 100%; margin: 6px 0 0; accent-color: var(--brand); }
.cut-mark { pointer-events: auto; cursor: ew-resize; width: 9px; margin-left: -3px; background: linear-gradient(to right, transparent 3px, #d0021b 3px, #d0021b 6px, transparent 6px); }
.cut-mark.sel { background: linear-gradient(to right, transparent 2px, #ff6b00 2px, #ff6b00 7px, transparent 7px); }
.cut-chip.on.sel { background: #ff6b00; border-color: #ff6b00; }
.btn-mini.on { background: var(--brand); color: #ffffff; }
.spk-tag { display: inline-block; min-width: 18px; padding: 0 5px; margin-right: 6px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #ffffff; text-align: center; }
.spk-A { background: var(--brand); }
.spk-B { background: #e6a23c; }

/* 再见一面（2026-09-23） */
.reunion-intro { font-size: 13px; color: var(--text-2); line-height: 1.6; background: var(--brand-tint, rgba(26,86,219,.06)); border-radius: 12px; padding: 10px 12px; margin-bottom: 4px; }
.reunion-voice { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; cursor: pointer; background: var(--card); }
.reunion-voice.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.reunion-voice audio { height: 30px; max-width: 60%; }
.reunion-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 10px; cursor: pointer; }
.reunion-consent input { margin-top: 3px; flex: none; }
.reunion-letter { background: var(--letter-bg); border: 1px solid rgba(255,220,160,.2); border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
.reunion-letter-t { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.reunion-letter-b { font-size: 14px; line-height: 1.8; white-space: pre-wrap; }

/* ======================================================================
   MIVI 深色科技主题层（2026-09-24）
   上面的组件样式只管结构，颜色已全部改走 token；这里统一加上
   ① 深空渐变光晕背景 ② 玻璃拟态面板 ③ 蓝色霓虹发光的交互元素 ④ 登录首屏。
   ====================================================================== */
html { background: var(--ground); }
body { background: var(--ground); -webkit-font-smoothing: antialiased; letter-spacing: .01em; }
/* 光晕背景：固定在视口不随滚动；四团冷色光 + 顶部一层极淡的网格 */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before {
  background:
    radial-gradient(60vmax 45vmax at 12% -8%, rgba(47,107,255,.34), transparent 62%),
    radial-gradient(48vmax 40vmax at 100% 18%, rgba(34,199,240,.16), transparent 60%),
    radial-gradient(55vmax 50vmax at 70% 110%, rgba(88,70,255,.22), transparent 62%),
    radial-gradient(38vmax 30vmax at -10% 85%, rgba(30,90,255,.14), transparent 60%);
  animation: halo-drift 26s ease-in-out infinite alternate;
}
body::after {
  background-image:
    linear-gradient(rgba(130,165,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,165,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}
@keyframes halo-drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%,1.5%,0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
#app { position: relative; z-index: 1; background: transparent; }
@media (min-width: 431px) { #app { box-shadow: none; } }
::selection { background: rgba(61,123,255,.45); color: #fff; }
a { color: #7fb0ff; }
input::placeholder, textarea::placeholder { color: var(--text-4); }
* { scrollbar-width: thin; scrollbar-color: rgba(120,160,255,.28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120,160,255,.25); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 玻璃面板 ---------- */
.entry-card, .param-card, .task-card, .task-card2, .stat-card, .info-card, .chart-card,
.tx-row, .menu-card, .storage-card, .my-card, .des-card, .set-card, .pd-summary,
.style-group, .song-chatbox, .film-life, .eh-task, .goal-card, .dir-card, .model-card,
.ref-box, .ref-file-box, .empty-block, .trim-box, .song-ver, .reunion-voice, .prop-item, .sb-beat {
  background: linear-gradient(160deg, rgba(34,48,86,.55) 0%, rgba(14,20,40,.50) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.28);
}
.entry-card, .task-card, .task-card2, .goal-card, .dir-card, .model-card, .eh-task, .menu-row, .style-cell {
  transition: border-color .2s, box-shadow .25s, transform .2s, background .2s;
}
@media (hover: hover) {
  .entry-card:hover, .goal-card:hover, .dir-card:hover, .model-card:hover, .eh-task:hover {
    border-color: var(--brand-line); transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.35), 0 0 24px rgba(61,123,255,.22);
  }
  .menu-row:hover, .set-tile:hover, .pick-row:hover, .style-cell:hover { background: var(--hover); }
}
/* 选中态：蓝色霓虹描边 */
.model-card.on, .goal-card.on, .dir-card.on, .eh-task.sel, .style-card.on, .song-ver.on, .reunion-voice.on {
  background: linear-gradient(160deg, rgba(47,107,255,.22), rgba(20,32,70,.55));
  border-color: rgba(110,160,255,.7);
  box-shadow: var(--glow);
}
.style-cell.on { background: rgba(61,123,255,.16); box-shadow: 0 0 0 1px rgba(110,160,255,.75) inset, 0 0 20px rgba(61,123,255,.25) inset; }
.goal-card.on .goal-title { color: #fff; }
.set-tile:active { background: var(--hover); }

/* 弹层：更实的玻璃，保证正文可读 */
.mask { background: rgba(2,4,10,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mask.dark { background: rgba(2,4,10,.9); }
.sheet-card {
  background: linear-gradient(170deg, rgba(24,34,64,.94), rgba(10,15,30,.96));
  border: 1px solid var(--line-strong); border-radius: 20px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(61,123,255,.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.sheet-row.danger, .pd-del, .pd-danger { color: #ff6b7d; }
.pd-close { background: var(--card-2); color: var(--text-2); }

/* ---------- 输入 ---------- */
.field input, .search-box, .script-area, .prop-select {
  background: var(--field); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .search-box:focus, .script-area:focus, .prop-select:focus {
  border-color: rgba(110,160,255,.8); box-shadow: 0 0 0 3px rgba(61,123,255,.18), 0 0 18px rgba(61,123,255,.25);
}
.field label { color: var(--text-2); letter-spacing: .06em; }
select, option { background: var(--card-solid); color: var(--text); }
.des-input:disabled { background: var(--card-2); }

/* ---------- 按钮 ---------- */
.btn-primary, .pc-btn.small, .mini-btn.primary {
  background: var(--brand-grad); color: #fff; border: none;
  box-shadow: 0 0 0 1px rgba(140,190,255,.35) inset, 0 6px 22px rgba(47,107,255,.45), 0 0 34px rgba(34,211,238,.18);
  text-shadow: 0 0 10px rgba(255,255,255,.25);
  transition: box-shadow .25s, transform .15s, filter .2s;
}
.btn-primary { height: 50px; border-radius: 14px; font-weight: 600; letter-spacing: .12em; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(160,205,255,.5) inset, 0 8px 30px rgba(47,107,255,.6), 0 0 50px rgba(34,211,238,.28); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: .45; box-shadow: none; }
.btn-plain { background: rgba(61,123,255,.08); border: 1px solid var(--brand-line); color: #9cc2ff; border-radius: 14px; }
.mini-btn { background: var(--card-2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; }
.mini-btn.danger { color: #ff7a8a; }
.btn-mini { background: rgba(61,123,255,.08); border-color: var(--brand-line); color: #9cc2ff; }
.btn-mini:active { background: var(--brand-soft); }
.btn-mini.on { background: var(--brand-grad); color: #fff; }

/* 分段、胶囊 */
.seg { background: rgba(4,8,20,.55); border: 1px solid var(--line); border-radius: 12px; }
.seg-item { color: var(--text-3); transition: color .2s, background .2s; }
.seg-item.on, .chip.on {
  background: var(--brand-grad); color: #fff; border-color: transparent;
  box-shadow: 0 0 16px rgba(61,123,255,.5), inset 0 0 0 1px rgba(170,210,255,.35);
}
.seg-item.off { color: var(--text-4); }
.chip { background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); }
.pick-chip, .arc-step, .cut-chip { background: var(--card-2); border-color: var(--line); color: var(--text-2); }
.pick-chip.on, .arc-step.done { background: var(--brand-soft); border-color: rgba(110,160,255,.7); color: #bcd6ff; box-shadow: 0 0 12px rgba(61,123,255,.3); }
.pick-row.on { background: rgba(61,123,255,.14); }

/* 开关：打开时发光 */
.sw { background: rgba(255,255,255,.14); }
.sw::after { background: #dfe7ff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.set-switch input:checked + .sw, .sw.mini.on { background: var(--brand-grad); box-shadow: 0 0 14px rgba(61,123,255,.6); }
.sw.mini { background: rgba(255,255,255,.16); }
.song-check i { background: transparent; border-color: var(--line-strong); }
.song-check input:checked + i { background: var(--brand-grad); border-color: transparent; box-shadow: var(--glow-sm); }

/* 进度与状态 */
.ref-progress, .mini-progress, .storage-bar, .stage-seg, .stage-seg.on { background: var(--track); }
.ref-progress > div, .mini-progress-in, .storage-bar > div, .stage-seg.done, .stage-seg.on::after {
  background: linear-gradient(90deg, #2f6bff, #22d3ee); box-shadow: 0 0 10px rgba(34,211,238,.55);
}
.stage-dot { background: var(--brand-2); box-shadow: 0 0 10px var(--brand-2); }
.stage-text { color: #8fc0ff; }
.task-status { border-radius: 999px; padding: 3px 10px; letter-spacing: .04em; }
.st-queued { color: var(--text-2); background: var(--card-2); border: 1px solid var(--line); }
.st-succeeded { color: #6ee7b7; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); }
.st-processing { color: #9cd0ff; background: rgba(61,123,255,.14); border: 1px solid rgba(96,150,255,.4); box-shadow: 0 0 12px rgba(61,123,255,.3); }
.st-failed { color: #ffd2d8; background: rgba(255,72,100,.16); border: 1px solid rgba(255,90,115,.45); }
.fail-text { color: #ff8a9a; }
.fail-hint { color: #e4b872; }
.qc-ok { color: #6ee7b7; }
.qc-warn, .sb-warn { color: #fbbf24; }
.notice-bar, .pick-warn, .cr-intro, .sb-decon, .song-profile, .reunion-intro {
  background: rgba(61,123,255,.10); border: 1px solid rgba(96,150,255,.28); color: #b7d1ff;
}
.cr-intro, .reunion-intro { color: var(--text-2); }
.face-box { border-color: rgba(245,166,35,.35); color: #f5c06b; }
.face-box .check-line { color: #f5c06b; }
.reunion-letter { border-color: rgba(255,220,160,.2); }
.pd-ingest { background: var(--card-2); }
.eh-err { color: #ff8a9a; }
.name-hint.ok { color: #4ade80; }
.name-hint.taken { color: #fb923c; }
.name-hint.bad { color: #ff6b7d; }

/* 徽标类 */
.des-badge, .model-tier, .model-badge, .set-tag, .dir-name, .pd-chip, .sb-beat-stage {
  background: rgba(61,123,255,.14); border: 1px solid rgba(96,150,255,.35); color: #a9c8ff;
}
.model-card.on .model-tier, .dir-card.on .dir-name { background: rgba(61,123,255,.28); }
.dir-rec, .fold-badge, .song-step-n, .style-play { background: var(--brand-grad); box-shadow: var(--glow-sm); }
.style-play.on { background: #e5484d; }
.sb-arc-item { background: var(--card-2); color: var(--text-2); }
.des-ref-x { background: rgba(4,8,20,.85); border: 1px solid var(--line-strong); }
.film-era-n { background: rgba(255,255,255,.9); }
.film-photo-box { background: rgba(61,123,255,.05); }
.film-thumb, .film-sheet-img { border-color: var(--line); background: var(--card-2); }
.cut-tick.black { background: #9aa6c2; }
.trim-bar { background: var(--track); border: 1px solid var(--line); }
.trim-range { background: rgba(61,123,255,.22); }
.trim-playhead { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.trim-handle { background: var(--brand-grad); box-shadow: var(--glow-sm); }

/* 头像、图标底 */
.avatar, .entry-ico, .task-icon {
  background: radial-gradient(circle at 30% 25%, rgba(110,165,255,.35), rgba(30,60,140,.25) 60%, rgba(10,18,40,.4));
  border: 1px solid rgba(110,160,255,.35);
  box-shadow: 0 0 18px rgba(61,123,255,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.entry-ico svg, .task-icon svg, .avatar svg { filter: drop-shadow(0 0 4px rgba(90,150,255,.8)); }
.asset-avatar, .asset-thumb, .pd-avatar, .pd-thumb, .des-sheet { background: var(--card-2); }
.asset-avatar.sel, .asset-thumb.sel { border-color: var(--brand); box-shadow: var(--glow-sm); }
.asset-name.sel, .model-check, .dir-check { color: #8fc0ff; }
.add-cell { background: rgba(61,123,255,.06) !important; border-color: rgba(96,150,255,.6) !important; color: #8fc0ff; }
.task-thumb, .content-thumb, .ref-thumb { background: var(--media); border: 1px solid var(--line-soft); }
.content-thumb.audio { background: linear-gradient(135deg, #0f2a78, #2f6bff 60%, #22c7f0); }

/* 文字层级：标题略拉开字距，克制、干净 */
.home-title, .section-title, .nav-title, .block-title, .info-title, .my-name, .pd-name, .pd-sec-title,
.dir-title, .goal-title, .song-step-t, .entry-title { letter-spacing: .04em; color: var(--text); }
.section-title { display: flex; align-items: center; gap: 8px; }
.section-title::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, #4a8dff, #22d3ee); box-shadow: 0 0 8px rgba(34,211,238,.7);
}
.pc-num, .stat-num, .quote-num, .pick-big, .param-value, .chart-val, .tx-amount.in {
  background: linear-gradient(120deg, #ffffff 0%, #9cc6ff 45%, #3de0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(61,160,255,.45));
}
.stat-num.dark { background: none; color: var(--text); filter: none; }
.chart-bar { background: rgba(96,150,255,.28); }
.chart-bar.hot { background: linear-gradient(180deg, #3de0ff, #2f6bff); box-shadow: 0 0 14px rgba(61,160,255,.6); }
.song-lyric-line.on { color: #8fd3ff; text-shadow: 0 0 12px rgba(61,160,255,.6); }
.chat-bubble { background: rgba(255,255,255,.06); border-color: var(--line); }
.chat-line.user .chat-bubble { background: var(--brand-grad); border-color: transparent; box-shadow: 0 4px 18px rgba(47,107,255,.35); }
.song-chatbox .song-chat, .song-chat, .song-lyrics { background: rgba(4,8,20,.35); }
.song-chatbox .song-chat-input { background: transparent; }

/* ---------- 顶栏 / 底栏 ---------- */
.navbar {
  background: rgba(6,10,22,.62); border-bottom: 1px solid var(--line-soft);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  position: sticky; top: 0; z-index: 20;
}
.nav-btn { color: var(--text-2); }
.bottom-bar {
  background: rgba(8,12,26,.72); border-top: 1px solid var(--line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 -12px 40px rgba(0,0,0,.4); z-index: 20;
}
.tabbar {
  background: rgba(6,10,22,.72); border-top: 1px solid var(--line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); z-index: 30;
}
.tabbar::before {  /* 顶边一条霓虹细线 */
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,170,255,.9), rgba(34,211,238,.9), transparent);
}
.tab { color: var(--text-3); transition: color .2s; }
.tab.active { color: #9cc8ff; }
.tab.active svg { filter: drop-shadow(0 0 6px rgba(80,150,255,.95)); }
.tab.active .tab-label { text-shadow: 0 0 10px rgba(80,150,255,.8); }
.toast {
  background: rgba(12,18,36,.92); border: 1px solid var(--line-strong); color: var(--text);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 20px rgba(61,123,255,.25); border-radius: 12px;
}

/* ---------- 首页分值卡 ---------- */
.points-card {
  position: relative; overflow: hidden; border-radius: 20px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34,211,238,.28), transparent 55%),
    linear-gradient(135deg, rgba(47,107,255,.55), rgba(20,34,90,.65) 60%, rgba(10,16,40,.7));
  border: 1px solid rgba(120,170,255,.45);
  box-shadow: 0 16px 44px rgba(0,0,0,.4), 0 0 40px rgba(47,107,255,.28), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.points-card::after {  /* 斜向高光 */
  content: ""; position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform: rotate(18deg); pointer-events: none;
}
.pc-label { letter-spacing: .18em; opacity: .75; }
.pc-num { font-size: 36px; }
.pc-btn {
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(190,215,255,.55);
  backdrop-filter: blur(8px); letter-spacing: .1em; position: relative; z-index: 1;
}
.pc-btn:hover { background: rgba(255,255,255,.18); box-shadow: 0 0 20px rgba(120,180,255,.45); }

/* 首页主入口卡：更亮的描边 */
.entry-card.main {
  border-color: rgba(110,160,255,.5);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(47,107,255,.28), transparent 60%),
    linear-gradient(160deg, rgba(34,48,86,.6), rgba(14,20,40,.55));
}

/* ---------- 登录 / 注册首屏 ---------- */
.login-page { background: transparent; overflow-x: clip; }
.hero { position: relative; overflow: visible; background: transparent; align-items: flex-start; }
.hero::before {  /* 字标背后的霓虹光球 */
  content: ""; position: absolute; width: 360px; height: 360px; left: -80px; bottom: -150px;
  background: radial-gradient(circle, rgba(61,123,255,.55), rgba(34,211,238,.15) 45%, transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.hero::after {  /* 一道细光环 */
  content: ""; position: absolute; right: -40px; top: calc(30px + var(--sat)); width: 220px; height: 220px; border-radius: 50%;
  border: 1px solid rgba(120,180,255,.25); box-shadow: 0 0 40px rgba(61,123,255,.18), inset 0 0 40px rgba(34,211,238,.08);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-logo {
  background: linear-gradient(115deg, #ffffff 10%, #a9ccff 45%, #3de0ff 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(61,140,255,.65)) drop-shadow(0 0 2px rgba(255,255,255,.4));
  letter-spacing: .16em;
}
.hero-bar {
  width: 56px; height: 2px; opacity: 1;
  background: linear-gradient(90deg, #3d7bff, #22d3ee); box-shadow: 0 0 12px rgba(34,211,238,.9);
}
.hero-slogan { color: #dbe6ff; font-weight: 300; letter-spacing: .5em; }
.hero-sub { color: var(--text-3); }
.hero-title { color: #fff; text-shadow: 0 0 22px rgba(61,140,255,.6); }
.form-area {
  position: relative; z-index: 2;
  margin: 0 16px; padding: 26px 20px 24px; border-radius: 22px; flex-grow: 0;
  background: linear-gradient(165deg, rgba(30,44,82,.55), rgba(10,15,32,.55));
  border: 1px solid var(--line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
.form-links a { color: #8fb8ff; }
.form-links a.muted { color: var(--text-3); }
.agreement { color: var(--text-4); margin-top: auto; }

/* ---------- 桌面端 ---------- */
@media (min-width: 900px) {
  .tabbar, .tabbar.on-sub {
    background: linear-gradient(180deg, rgba(10,16,34,.78), rgba(5,8,18,.78));
    border-right: 1px solid var(--line);
  }
  .tabbar::before {
    left: auto; right: -1px; top: 10%; bottom: 10%; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(110,170,255,.8), rgba(34,211,238,.8), transparent);
  }
  .side-brand {
    background: linear-gradient(115deg, #fff 10%, #a9ccff 50%, #3de0ff 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 12px rgba(61,140,255,.6)); letter-spacing: .18em;
  }
  .side-brand-en { -webkit-text-fill-color: var(--text-3); color: var(--text-3); }
  .tab { border: 1px solid transparent; }
  .tab.active {
    background: linear-gradient(90deg, rgba(61,123,255,.22), rgba(61,123,255,.04));
    border-color: rgba(110,160,255,.35); box-shadow: 0 0 20px rgba(61,123,255,.18);
  }
  .tab:hover { background: var(--hover); }
  .tab.active:hover { background: linear-gradient(90deg, rgba(61,123,255,.26), rgba(61,123,255,.06)); }
  /* 登录 / 注册 / 找回密码：整体上下居中（2026-09-28 用户：显示器矮时紧贴下沿）。
     用首尾元素的 auto 外边距居中而不是 justify-content: center——内容比屏高时后者会把顶部顶出视口滚不回来 */
  /* 桌面三栏布局把 html/body 设成 overflow: hidden（各栏自己滚），登录页没有栏，所以自己当滚动容器：
     内容比屏高时能滚（此前直接被裁掉，矮显示器上注册页下半截看不到），比屏矮时首尾 auto 外边距居中 */
  .login-page { background: transparent; box-shadow: none; border-radius: 0; overflow-y: auto; overflow-x: clip; margin: 0 auto; max-width: 440px; height: 100dvh; min-height: 0; padding: 16px 0; box-sizing: border-box; }
  .login-page > .hero { margin-top: auto; }
  .login-page .form-area { margin: 0; }
  .login-page .agreement { margin-top: 0; margin-bottom: auto; padding: 20px 0 0; }
  @media (max-height: 760px) {
    .login-page > .hero { height: clamp(150px, 26dvh, 220px); padding-bottom: 24px; }
    .login-page > .hero-small { height: clamp(110px, 18dvh, 150px); }
    .login-page .form-area { padding-top: 20px; padding-bottom: 18px; }
  }
  .bottom-bar { border: 1px solid var(--line); border-bottom: none; border-radius: 18px 18px 0 0; }
}
.st-awaiting_script { color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.35); }
.st-stopped { color: var(--text-3); background: var(--card-2); border: 1px solid var(--line); }

/* ======================================================================
   电脑版版面（2026-09-24）：内容列放宽到 1200，首页三栏、创建页两栏、任务页左右分栏。
   手机上新增的容器一律 display: contents，不改变原来的单列顺序。
   ====================================================================== */
.home-side, .create-side { display: contents; }
.home-grid > .home-head { order: 0; }
.home-grid .points-card { order: 1; }
.home-grid > .entry-grid { order: 2; }
.home-grid .section-head { order: 3; }
.home-grid .home-side > .empty-block, .home-grid .home-side > .task-list { order: 4; }

.side-card {
  background: linear-gradient(160deg, rgba(34,48,86,.55), rgba(14,20,40,.5));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.28);
}
.side-title { font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: .06em; }
.side-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-3); }
.side-row b { color: var(--text); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-est { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-3); }
.side-est b { font-size: 18px; color: #9cc6ff; }
.side-est b.muted { font-size: 13px; color: var(--text-3); }
.side-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 26px 0; border: 1px dashed var(--line-strong); border-radius: 10px; }
.side-preview .trim-box { margin-top: 0; padding: 0; background: none; border: none; box-shadow: none; backdrop-filter: none; }
.side-preview .trim-video { max-height: 320px; }

.task-detail { display: flex; flex-direction: column; gap: 12px; }
.td-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.td-title { font-size: 17px; font-weight: 700; line-height: 1.4; word-break: break-all; }
.td-preview { display: flex; flex-direction: column; gap: 8px; }
.td-video { width: 100%; max-height: 380px; border-radius: 10px; background: #000; }
.td-audio { width: 100%; }
.td-placeholder { min-height: 180px; border-radius: 10px; border: 1px dashed var(--line-strong); background: rgba(4,8,20,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.td-info { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.td-actions .task-actions { flex-direction: row; flex-wrap: wrap; }
.td-actions .mini-btn { height: 38px; padding: 0 18px; font-size: 14px; }
.task-card2 { cursor: default; }

@media (min-width: 900px) {
  .main-scroll, .sec-scroll { max-width: 1200px; padding-left: 32px; padding-right: 32px; }

  /* 首页：左 功能卡 / 右 分值 + 最近任务 */
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; row-gap: 16px; align-items: start; }
  .home-grid > .home-head { grid-column: 1 / -1; }
  .home-grid > .entry-grid { grid-column: 1; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .home-grid .home-side { grid-column: 2; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
  .home-side .points-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .home-side .pc-btn { width: 100%; }
  .home-side .task-card { padding: 12px; }
  .home-side .task-card .task-status { font-size: 11px; }

  /* 创建页：左 表单 / 右 预览 + 摘要 + 开始按钮 */
  .create-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-rows: auto 1fr;
    column-gap: 24px; max-width: 1260px; margin-left: 220px; padding-right: 32px; }
  .create-page > .navbar { grid-column: 1 / -1; padding-left: 32px; padding-right: 32px; }
  .create-page > .sec-scroll { grid-column: 1; max-width: none; margin: 0; padding-right: 0; }
  .create-page .create-side { grid-column: 2; display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 76px; align-self: start; padding: 20px 0 24px; max-height: calc(100vh - 76px); overflow-y: auto; }
  .create-page .bottom-bar { position: static; width: 100%; max-width: none; margin: 0; flex-direction: column; align-items: stretch;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
  .create-page .bottom-bar .quote-box { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .create-page .bar-btn { width: 100%; height: 52px; }
  @media (min-width: 1540px) { .create-page { margin-left: calc(220px + (100vw - 220px - 1260px) / 2); } }

  /* 任务页：左 列表 / 右 详情 */
  .tasks-page > .sec-scroll { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 24px; align-content: start; align-items: start; }
  .tasks-page > .sec-scroll > * { grid-column: 1; }
  .tasks-page > .sec-scroll > .task-detail { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 28px;
    max-height: calc(100vh - 56px); overflow-y: auto;
    background: linear-gradient(160deg, rgba(34,48,86,.55), rgba(14,20,40,.5)); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.28); }
  .tasks-page .task-card2 { cursor: pointer; }
  .tasks-page .task-list .task-actions { display: none; }
  .tasks-page .task-card2.sel { border-color: rgba(110,160,255,.7); box-shadow: var(--glow); background: linear-gradient(160deg, rgba(47,123,255,.2), rgba(20,32,70,.55)); }

  /* 内容 / 角色 / 产品网格：列数随宽度 */
  .content-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (min-width: 900px) {
  .create-page .create-side .bottom-bar { position: sticky; bottom: 0; z-index: 2; background: rgba(10,15,32,.94); }
}
@media (min-width: 900px) {
  .home-grid > .home-head { grid-row: 1; }
  .home-grid > .entry-grid { grid-row: 2; }
  .home-grid .home-side { grid-row: 2; }
}
@media (min-width: 900px) { .home-grid { align-content: start; } }

/* ======================================================================
   电脑版 App 式三栏（2026-09-24）：左 导航（固定）｜中 内容（唯一滚动区）｜右 面板（固定、整高）
   右栏左边缘与左栏右边缘对称，各有一条竖向渐变光线。
   ====================================================================== */
@media (min-width: 900px) {
  :root { --rail-l: 220px; --rail-r: 360px;
    /* 实际右栏宽：用户拖出来的 --rail-r，但永远给中栏留至少 480（窗口 − 左栏 220 − 480），最窄 280 */
    --rail-w: clamp(280px, var(--rail-r), max(280px, calc(100vw - 700px))); }
  html, body { height: 100%; overflow: hidden; }

  /* 中栏：整页固定在左右栏之间，只有内部滚动区滚动；顶栏与底部按钮条贴边不动 */
  .page.main-page, .page.main-page.create-page {
    position: fixed; top: 0; bottom: 0; left: var(--rail-l); right: var(--rail-w);
    margin: 0; padding: 0; max-width: none; min-height: 0; height: auto;
    display: flex; flex-direction: column;
  }
  .page.main-page > .main-scroll, .page.main-page > .sec-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; width: 100%; max-width: none;
    padding-left: max(32px, calc((100% - 1000px) / 2)); padding-right: max(32px, calc((100% - 1000px) / 2));
    padding-top: 28px; padding-bottom: 32px;
  }
  .page.main-page > .navbar { flex: none; position: relative; padding-left: 24px; padding-right: 24px; }
  .page.main-page > .bottom-bar {
    flex: none; position: relative; width: 100%; max-width: none; margin: 0; left: auto; transform: none;
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    padding: 12px max(32px, calc((100% - 1000px) / 2));
  }
  .page.main-page > .pad-bottom-bar { padding-bottom: 32px; }

  /* 以前的两栏写法全部拆掉，右侧内容交给固定右栏 */
  .home-grid { display: flex; flex-direction: column; gap: 16px; }
  .home-grid > .entry-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .home-grid .home-side { display: none; }
  .tasks-page > .sec-scroll { display: flex; flex-direction: column; }
  .create-page > .navbar { grid-column: auto; }

  /* 右栏：固定、整高、自己滚动 */
  .app-right, .create-page .create-side, .tasks-page > .sec-scroll > .task-detail {
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--rail-w); max-height: none;
    margin: 0; padding: 24px 20px; border: none; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; gap: 14px; overflow-y: auto; z-index: 25;
    background:
      linear-gradient(180deg, transparent, rgba(110,170,255,.8), rgba(34,211,238,.8), transparent) left center / 1px 80% no-repeat,
      linear-gradient(180deg, rgba(10,16,34,.78), rgba(5,8,18,.78));
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    align-self: auto; grid-column: auto; grid-row: auto;
  }
  .create-page .create-side .bottom-bar { position: sticky; bottom: -24px; margin-bottom: -24px; border-radius: var(--radius); }
  .app-right .points-card { flex-direction: column; align-items: stretch; gap: 14px; flex: none; }
  .app-right .pc-btn { width: 100%; }
  .app-right .section-head { margin-top: 4px; }

  .rp-task {
    flex: none; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; cursor: pointer;
    background: linear-gradient(160deg, rgba(34,48,86,.5), rgba(14,20,40,.45));
    border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, box-shadow .2s;
  }
  .rp-task:hover { border-color: var(--brand-line); box-shadow: 0 0 18px rgba(61,123,255,.18); }
  .rp-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .rp-task-name { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rp-task .task-status { font-size: 11px; flex: none; }
  .rp-task .stage-row { margin: 0; }

  .toast { margin-left: calc((var(--rail-l) - var(--rail-w)) / 2); }
}
/* 窄一些的桌面（900–1180）：右栏收窄 */

@media (min-width: 900px) { .home-grid { align-items: stretch; align-content: normal; } }
@media (min-width: 900px) { .tasks-page > .sec-scroll { align-items: stretch; align-content: normal; } }

/* 右栏拖动条（2026-09-24）：12px 宽的感应区压在右栏左边缘，悬停/拖动时中间那条线变亮 */
.rail-handle { display: none; }
@media (min-width: 900px) {
  .rail-handle {
    display: block; position: fixed; top: 0; bottom: 0; right: calc(var(--rail-w) - 6px); width: 12px;
    cursor: col-resize; z-index: 40; touch-action: none;
  }
  .rail-handle i {
    position: absolute; left: 5px; top: 50%; width: 2px; height: 44px; margin-top: -22px; border-radius: 2px;
    background: rgba(140,180,255,.35); transition: background .2s, box-shadow .2s, height .2s, margin-top .2s;
  }
  .rail-handle:hover i, .rail-handle.on i {
    height: 88px; margin-top: -44px; background: linear-gradient(180deg, #4a8dff, #22d3ee); box-shadow: 0 0 12px rgba(34,211,238,.8);
  }
  .rail-handle.on ~ * { transition: none !important; }
}

/* ======================================================================
   同一任务多次生成（2026-09-24）：创建页的再生成横幅 + 任务右栏的设置卡与生成记录
   ====================================================================== */
.regen-bar {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(47,107,255,.22), rgba(34,199,240,.08));
  border: 1px solid rgba(110,160,255,.55); box-shadow: 0 0 22px rgba(61,123,255,.2);
}
.regen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.regen-text b { font-size: 14px; color: #fff; }
.regen-text span { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.regen-exit { flex: none; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.regen-exit:hover { color: var(--text); }

.td-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.td-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.td-card-head b { font-size: 14px; }
.td-run-tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.td-run-tabs a {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; color: var(--text-3);
  border: 1px solid var(--line); background: var(--card-2); cursor: pointer;
}
.td-run-tabs a.on { color: #cfe0ff; border-color: rgba(110,160,255,.7); background: rgba(61,123,255,.18); }
.td-open { height: 42px; font-size: 14px; margin-top: 6px; letter-spacing: .04em; }

.td-run {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.td-run.cur { border-color: rgba(110,160,255,.45); box-shadow: 0 0 16px rgba(61,123,255,.14); }
.td-run-head { display: flex; align-items: center; gap: 8px; }
.td-run-head b { font-size: 14px; }
.td-run-status { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); }
.td-run-status.st-succeeded { color: #6ee7b7; border-color: rgba(16,185,129,.35); }
.td-run-status.st-failed { color: #ff8a9a; border-color: rgba(255,90,115,.4); }
.td-run-status.st-processing, .td-run-status.st-queued { color: #9cd0ff; border-color: rgba(96,150,255,.45); }
.td-run-status.st-awaiting_script { color: #fbbf24; border-color: rgba(251,191,36,.35); }
.td-run-cost { font-size: 12px; color: var(--text-3); }
.td-run-del { margin-left: auto; font-size: 12px; color: var(--text-3); }
.td-run-del:hover { color: #ff7a8a; }
.td-run-outputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.td-out { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.td-out video { width: 100%; aspect-ratio: 9 / 16; max-height: 220px; object-fit: contain; border-radius: 8px; background: #000; }
.td-out audio { width: 100%; }
.td-out-missing { font-size: 12px; color: var(--text-3); padding: 20px 0; text-align: center; border: 1px dashed var(--line-strong); border-radius: 8px; }
.td-out-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); }
.td-out-bar a { color: #8fb8ff; }
.td-out-bar a.danger { color: var(--text-3); margin-left: auto; }
.td-out-bar a.danger:hover { color: #ff7a8a; }

/* ===== 居中醒目提示（2026-09-25）：出问题时的大卡片；成功类仍走底部 .toast ===== */
.alert-mask {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(2,4,10,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: alert-fade .16s ease-out;
}
.alert-card {
  --al: #fbbf24; --al-bg: rgba(251,191,36,.12); --al-line: rgba(251,191,36,.6);
  width: min(420px, 100%); padding: 26px 24px 20px; border-radius: 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(170deg, rgba(28,36,64,.97), rgba(10,15,30,.98));
  border: 1.5px solid var(--al-line);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 4px var(--al-bg), 0 0 44px var(--al-bg);
  animation: alert-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
.alert-card.error { --al: #ff5d73; --al-bg: rgba(255,72,100,.14); --al-line: rgba(255,93,115,.7); }
.alert-ico {
  width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--al); background: var(--al-bg); border: 1.5px solid var(--al-line); box-shadow: 0 0 22px var(--al-bg);
}
.alert-title { font-size: 19px; font-weight: 700; color: var(--al); letter-spacing: .06em; }
.alert-text { font-size: 16px; line-height: 1.65; color: #f2f5ff; font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.alert-btn {
  margin-top: 8px; min-width: 150px; height: 44px; border-radius: 12px; border: 1px solid var(--al-line);
  background: var(--al-bg); color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.alert-btn:hover { box-shadow: 0 0 18px var(--al-bg); filter: brightness(1.15); }
.alert-btn.ghost { margin-top: 0; background: transparent; border-color: rgba(255,255,255,.18); color: #c9d2ea; }
.side-row b.warn { color: #fbbf24; }
@keyframes alert-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes alert-fade { from { opacity: 0; } to { opacity: 1; } }

/* ======================================================================
   说明文字与可操作控件分开（2026-09-25 用户：「提示内容的框像输入框，总想点一下」）
   规则：有边框 + 底色 = 能点能填；纯文字 = 只是说明。
   说明（ⓘ 灰字）、提醒（⚠ 琥珀字）、状态（● 品牌蓝字）一律去掉框和底色，只留图标 + 文字。
   ====================================================================== */
.cr-intro, .reunion-intro, .pick-warn, .notice-bar {
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0; padding: 0; margin: 0;
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 13px; line-height: 1.6;
}
.cr-intro::before, .reunion-intro::before, .pick-warn::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 3px;
  background: currentColor;
  -webkit-mask: var(--note-ico) center / contain no-repeat; mask: var(--note-ico) center / contain no-repeat;
}
/* 说明：ⓘ + 次要灰字 */
.cr-intro, .reunion-intro {
  color: var(--text-2);
  --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.2'/%3E%3C/svg%3E");
}
.cr-intro::before, .reunion-intro::before { color: var(--text-3); }
/* 提醒：⚠ + 琥珀字 */
.pick-warn {
  color: #f5c46b;
  --note-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.2M12 17.2v.3'/%3E%3C/svg%3E");
}
.pick-warn a { color: #ffd98e; text-decoration: underline; margin-left: 4px; }
/* 状态（「N 个任务正在生成」「正在生成角色设定图…」）：品牌蓝字，自带图标的保留原图标 */
.notice-bar { color: #9cc6ff; align-items: center; }
.notice-bar svg { flex: none; }
/* 婚礼歌曲的「上次的项目还没提交 · 继续 / 重新开始」是一条带操作的提醒，文字与按钮同一行 */
.pick-warn.song-draft-bar { align-items: center; }
/* 右栏占位说明（「上传后在这里预览和截取」「还没有任务」）也只是说明：去掉虚线框，免得像上传区 */
.side-empty { border: none !important; background: none !important; padding: 18px 0 !important; color: var(--text-3); }
.td-placeholder { border: none !important; background: rgba(4,8,20,.45) !important; }

/* 角色与产品进了导航（2026-09-25）：手机上角色 / 产品页也显示底部导航栏，内容让开；五个导航项字小一点 */
@media (max-width: 899px) {
  .assets-page > .sec-scroll { padding-bottom: calc(84px + var(--sab)); }
  .tab-label { font-size: 10.5px; white-space: nowrap; }
}

/* 短信验证码输入行（2026-09-26）：输入框 + 获取验证码按钮 */
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1 1 0; min-width: 0; }
.code-btn {
  flex: none; min-width: 108px; padding: 0 12px; border: 1px solid var(--brand); border-radius: 10px;
  background: transparent; color: var(--brand); font-size: 14px; font-family: inherit; cursor: pointer;
}
.code-btn:disabled { border-color: var(--line); color: var(--text-3); cursor: default; }

/* ======================================================================
   剪辑（2026-09-29 从红色版本移植，按蓝色深色主题重画）：只在电脑上。
   整屏固定：顶栏 / 素材｜预览｜属性 / 轨道 / 底栏；只有轨道横向滚。
   ====================================================================== */
.edit-intro { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px 18px; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.edit-intro b { font-size: 15px; }
.edit-intro .muted-sm { line-height: 1.6; }
.edit-proj { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.edit-proj:hover { border-color: var(--brand-line); }
.edit-proj-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.edit-proj-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.edit-page { background: var(--ground); color: var(--text); }
@media (min-width: 900px) {
  .page.edit-page { position: fixed; top: 0; bottom: 0; left: var(--rail-l); right: 0; margin: 0; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden; }
}
.edit-nav { flex: none; height: 52px; display: flex; align-items: center; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); }
.edit-back { color: var(--text-2); font-size: 14px; white-space: nowrap; }
.edit-back:hover { color: var(--text); }
.edit-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-title .muted-sm { font-weight: 400; }
.edit-nav-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.edit-tool { font-size: 13px; color: var(--text-2); }
.edit-tool:hover { color: var(--brand); }
.edit-tool.off { opacity: .35; pointer-events: none; }
.edit-tool.danger { color: #ff7a8a; }

.edit-body { flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; padding: 10px 14px 10px;
  grid-template-columns: 250px minmax(0, 1fr) 270px; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "bin stage insp" "tl tl tl"; }
.edit-body .bin, .edit-body .insp { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.edit-body .bin { grid-area: bin; }
.edit-body .insp { grid-area: insp; }
.bin-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
  font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.bin-head small { font-weight: 400; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-head .mini-btn { height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; }
.bin-add { position: relative; }
.bin-menu { position: absolute; right: 0; top: 34px; z-index: 30; width: 210px; padding: 6px; border-radius: 12px;
  background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.bin-menu-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 400; }
.bin-menu-item b { font-size: 13px; }
.bin-menu-item:hover { background: var(--hover); }
.bin-uploading { padding: 6px 12px; color: var(--brand-2); }
.bin-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.bin-group { font-size: 11px; color: var(--text-3); letter-spacing: .08em; padding: 8px 4px 2px; }
.bin-item { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid var(--line-soft); font-size: 12px; }
.bin-item:hover { border-color: var(--brand-line); background: var(--hover); }
.bin-item.used { border-color: var(--brand-glass); }
.bin-item.dim { opacity: .5; }
.bin-img { position: relative; width: 44px; height: 60px; border-radius: 6px; background: var(--media); overflow: hidden; flex: none; cursor: pointer; }
.bin-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bin-dur { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; line-height: 14px; text-align: center; color: #fff; background: rgba(0,0,0,.55); }
.bin-info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.bin-info b { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-acts { display: flex; gap: 10px; }
.bin-acts a { font-size: 12px; }
.bin-acts a.danger { color: #ff7a8a; }
.bin-foot { flex: none; padding: 8px 12px; border-top: 1px solid var(--line-soft); line-height: 1.5; }

.edit-body .stage { grid-area: stage; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.viewer { flex: 1 1 auto; min-height: 0; background: #000; border-radius: 12px; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line-soft); }
.tl-video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.tl-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.tl-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-transport, .tl-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-btn { height: 30px; min-width: 30px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; }
.tl-btn:hover { color: var(--text); border-color: var(--brand-line); }
.tl-btn.mode.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tl-btn.mode.stretch.on { background: #0ea5c6; border-color: #0ea5c6; }
.tl-btn.del { color: #ff7a8a; }
.tl-play { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; flex: none; box-shadow: var(--glow-sm); margin: 0 2px; }
.tl-time { margin-left: 8px; font-variant-numeric: tabular-nums; font-family: "IBM Plex Mono", Consolas, monospace; font-size: 13px; color: var(--text); }
.tl-cache { color: var(--brand-2); }

.insp-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow-y: auto; }
.insp-clip { font-size: 12px; }
.prop-row { display: flex; align-items: center; gap: 8px; min-height: 28px; flex-wrap: wrap; }
.prop-k { flex: 0 0 34px; color: var(--text-3); font-size: 11px; }
.prop-row input[type="number"] { width: 70px; height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-size: 12px;
  background: var(--field); color: var(--text); outline: none; font-family: inherit; }
.prop-row input[type="number"]:focus { border-color: var(--brand); }
.prop-slider { flex: 1 1 auto; min-width: 60px; accent-color: var(--brand); margin: 0; }
.prop-u { color: var(--text-3); font-size: 11px; }
.prop-src { flex: 1 1 0; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-src.bad { color: #ff7a8a; }
.prop-link { color: var(--brand); cursor: pointer; font-size: 12px; }
.prop-link.off { color: var(--text-4); cursor: default; }
.prop-link.danger { color: #ff7a8a; }
.prop-row .check-line { margin: 0; font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.insp-exports { flex: none; border-top: 1px solid var(--line-soft); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
.insp-export { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.insp-help { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 8px 12px; display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; line-height: 1.5; color: var(--text-3); flex: none; }
.insp-help-title { font-weight: 600; color: var(--text-2); font-size: 11px; }

/* 轨道区 */
.edit-body .tl.fixed { grid-area: tl; display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 8px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.tl-row { display: flex; align-items: stretch; gap: 6px; min-height: 0; }
.tl-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: auto; max-height: 34vh; padding-bottom: 2px; }
.tl-scroll::-webkit-scrollbar { height: 0; }
.tl-canvas { position: relative; min-width: 100%; cursor: crosshair; padding-bottom: 2px; }
.tl-ruler { position: sticky; top: 0; height: 22px; background: var(--card-solid); border-bottom: 1px solid var(--line); z-index: 3; }
.tl-tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--text-4); }
.tl-tick.major { height: 11px; background: var(--text-2); }
.tl-tick span { position: absolute; left: 4px; bottom: 9px; font-size: 10px; line-height: 1; color: var(--text-2); font-variant-numeric: tabular-nums;
  font-family: "IBM Plex Mono", Consolas, monospace; white-space: nowrap; }
.tl-ruler-end { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--brand-2); opacity: .7; }
.tl-track { position: relative; display: flex; align-items: stretch; height: 64px; margin-top: 4px; }
.tl-track.v2 { display: block; height: 52px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); border-radius: 6px; }
.tl-track.v2.ghost { border-style: dashed; }
.tl-track.v2 .tl-clip { position: absolute; top: 0; height: 50px; }
.tl-lane-tag, .tl-alane-tag { position: absolute; left: 4px; top: 4px; font-size: 9px; color: var(--text-3); pointer-events: none; z-index: 2; }
.tl-clip { position: relative; height: 64px; border-radius: 6px; overflow: hidden; border: 2px solid rgba(140,170,255,.25); background: #111a30;
  flex-shrink: 0; cursor: grab; touch-action: none; user-select: none; box-sizing: border-box; }
.tl-clip + .tl-clip { margin-left: 2px; }
.tl-clip.on { border-color: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2) inset, 0 0 12px rgba(34,211,238,.35); }
.tl-clip.off { opacity: .35; }
.tl-clip.missing { border-color: #ff7a8a; background: rgba(255,90,110,.15); }
.tl-clip.ov { border-color: rgba(167,139,250,.6); }
.tl-clip.ov.on { border-color: var(--brand-2); }
.tl-clip.dragging { z-index: 3; opacity: .85; cursor: grabbing; }
.tl-film { position: absolute; inset: 0; background-repeat: repeat-x; background-position: 0 0; opacity: .9; }
.tl-clip-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 8px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.8)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 14px; cursor: ew-resize; touch-action: none; display: none; background: rgba(255,255,255,.22); }
.tl-handle::after { content: ""; position: absolute; top: 50%; left: 5px; width: 3px; height: 18px; margin-top: -9px; border-radius: 2px; background: #fff; opacity: .85; }
.tl-handle.l { left: 0; } .tl-handle.r { right: 0; }
.tl-track.trim .tl-handle, .tl-alane.trim .tl-handle { display: block; }
.tl-track.stretch .tl-handle { display: block; background: rgba(34,211,238,.4); }
.tl-track.trim .tl-clip, .tl-track.stretch .tl-clip, .tl-alane.trim .tl-aclip { cursor: default; }
.tl-insert { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #ffd166; border-radius: 2px; z-index: 4; pointer-events: none; }
.tl-empty-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 6px; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 12px; margin-left: -6px; z-index: 5; pointer-events: none; }
.tl-playhead::after { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: #ff4d6d; box-shadow: 0 0 6px rgba(255,77,109,.8); }
.tl-playhead::before { content: ""; position: absolute; top: 0; left: 0; border: 6px solid transparent; border-top: 8px solid #ff4d6d; }
.tl-alane { position: relative; height: 30px; margin-top: 4px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft); border-radius: 6px; }
.tl-alane.ghost { border-style: dashed; }
.tl-alane-empty { position: absolute; left: 24px; top: 0; line-height: 28px; font-size: 11px; pointer-events: none; white-space: nowrap; }
.tl-aclip { position: absolute; top: 2px; height: 24px; box-sizing: border-box; background: rgba(16,185,129,.28); border: 1px solid rgba(52,211,153,.6);
  border-radius: 5px; color: #d1fae5; font-size: 11px; line-height: 22px; padding: 0 8px; overflow: hidden; white-space: nowrap; cursor: grab; touch-action: none; user-select: none; }
.tl-aclip.on { border-color: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2) inset; }
.tl-aclip.off { opacity: .35; }
.tl-aclip .tl-handle::after { height: 12px; margin-top: -6px; }
.tl-aclip-label { pointer-events: none; }
.tl.fixed.multi .tl-track:not(.v2), .tl.fixed.multi .tl-track:not(.v2) .tl-clip { height: 52px; }
.tl.fixed.multi .tl-track.v2, .tl.fixed.multi .tl-track.v2 .tl-clip { height: 44px; }
.tl.fixed.multi .tl-alane { height: 26px; }
.tl.fixed.multi .tl-aclip { height: 20px; line-height: 18px; }
/* 导出范围：刻度尺上两个标记，范围外打灰 */
.tl-range-dim { position: absolute; top: 22px; bottom: 0; background: rgba(0,0,0,.45); pointer-events: none; z-index: 4; }
.tl-range-h { position: absolute; top: 0; height: 22px; width: 10px; margin-left: -5px; cursor: ew-resize; z-index: 6; touch-action: none; }
.tl-range-h::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: #fbbf24; }
.tl-range-h::after { content: ""; position: absolute; top: 0; left: 0; border: 5px solid transparent; border-top: 8px solid #fbbf24; }
.tl-range-h span { position: absolute; top: 9px; font-size: 9px; color: #111; white-space: nowrap; background: #fbbf24; padding: 0 3px; border-radius: 3px; }
.tl-range-h.in span { left: 8px; } .tl-range-h.out span { right: 8px; }
/* 右侧竖向「原声」滑杆 */
.tl-side { flex: 0 0 38px; display: flex; flex-direction: column; align-items: center; }
.tl-side-ruler { height: 22px; flex: none; }
.tl-vol { margin-top: 4px; flex: 1 1 auto; min-height: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tl-vline { position: relative; flex: 1 1 auto; width: 14px; min-height: 56px; cursor: ns-resize; touch-action: none; }
.tl-vline::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--track-2); border-radius: 1px; }
.tl-vline-fill { position: absolute; left: 6px; bottom: 0; width: 2px; background: var(--brand); border-radius: 1px; }
.tl-vline-thumb { position: absolute; left: 1px; width: 12px; height: 12px; margin-bottom: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-sizing: border-box; }
.tl-vol-val { font-size: 9px; color: var(--text-3); line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; }
/* 横向滚动条 + 缩放 */
.tl-hrow { display: flex; align-items: center; gap: 12px; flex: none; }
.tl-hbar { flex: 1 1 auto; min-width: 0; height: 14px; margin: 0; accent-color: var(--text-3); cursor: ew-resize; }
.tl-hbar:disabled { opacity: .25; cursor: default; }
.tl-zoom { display: flex; align-items: center; gap: 10px; flex: none; font-size: 13px; }
.tl-txt { color: var(--text-2); cursor: pointer; user-select: none; }
.tl-txt:hover { color: var(--brand); }
.tl-txt.accent { color: var(--brand); font-weight: 600; }
.tl-hline { position: relative; width: 110px; height: 14px; cursor: ew-resize; touch-action: none; }
.tl-hline::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--track-2); border-radius: 1px; }
.tl-hline-fill { position: absolute; left: 0; top: 6px; height: 2px; background: var(--brand); border-radius: 1px; }
.tl-hline-thumb { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-sizing: border-box; }
/* 底栏 */
.edit-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(10,16,34,.6), rgba(5,8,18,.9)); }
.edit-stat { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.edit-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.edit-status { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-status .stage-row { margin: 0; }
.range-btn { height: 38px; padding: 0 14px; }
.range-btn.on { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #fbbf24; }
.edit-export { width: auto; height: 42px; padding: 0 26px; flex: none; }
/* 挑其他任务的成片 */
.pick-sheet { max-width: 760px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pick-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--card-2); }
.pick-item:hover { border-color: var(--brand-line); }
.pick-item.added { opacity: .5; cursor: default; }
.pick-item .pick-img { aspect-ratio: 3 / 4; background: var(--media); }
.pick-item .pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-item .pick-name { padding: 6px 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-item .pick-state { padding: 0 8px 6px; font-size: 11px; color: var(--brand); }
/* 生成记录里的剪辑版 */
.td-run.edit-run { border-color: rgba(34,211,238,.35); }
.td-run.edit-run .td-run-head b { color: var(--brand-2); }
@media (max-width: 899px) { .edit-only-wide { display: none !important; } }
.empty-tip { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 13px; line-height: 2; }
.pick-search { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 13px; font-family: inherit;
  background: var(--field); color: var(--text); outline: none; box-sizing: border-box; }
.pick-search:focus { border-color: var(--brand); }
.pick-sheet .sheet-card { display: flex; flex-direction: column; gap: 12px; }
.td-edit { margin-top: 8px; width: 100%; }

/* ======================================================================
   登录 / 注册 / 找回密码（2026-09-29 三版，设计稿 https://claude.ai/artifact/5ifDYjzEEzfW5nuzG1WMui ）
   电脑：功能海报铺满整屏，每 5 秒换一张（淡入 + 画面缓慢推近），登录区浮在右侧渐暗的画面上；
   手机：海报在上半屏同样轮播，表单在下。
   海报画面按 880×620 的设计坐标摆放，整体由 --ps（电脑）/ --pm（手机）缩放，这两个变量由 app.js 的 fitPosters 按窗口算。
   配色：深色为底、品牌蓝为主，暖琥珀只做极小的点缀（短线、编号、光标、进度条末端）。
   ====================================================================== */
.auth-page {
  --pz-warm: #ffb46b; --pz-coral: #ff7d5c; --pz-soft: #8fbcff; --pz-hi: #4f95ff;
  --pz-ink: #e8eefc; --pz-ink2: #a9b6d3; --pz-ink3: #7384a8; --pz-ink4: #4d5b7c;
  position: relative; min-height: 100vh; min-height: 100dvh; margin: 0 !important; padding: 0;
  background: #04070f; color: var(--pz-ink); overflow-x: clip;
}

/* ---------- 海报舞台 ---------- */
.pz-stage { position: absolute; inset: 0; overflow: hidden; }
.pz-ambient { position: absolute; left: -120px; top: -220px; width: 1800px; height: 1400px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 26px;
  transform: rotate(-9deg); opacity: .14; filter: blur(1.5px) saturate(.8); pointer-events: none; }
.pz-ambient > div { display: flex; flex-direction: column; gap: 26px; }
.pz-ambient > div:nth-child(even) { margin-top: 160px; }
.pz-ambient .pz-fr { position: relative; width: 100%; box-shadow: none; }
.pz-poster { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.pz-poster.on { opacity: 1; }
.pz-bg { position: absolute; inset: 0; opacity: .82; }
.pz-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 36% at 78% 82%, rgba(255,150,90,.04), transparent 70%); }
.pz-art { position: absolute; left: 0; top: 0; width: 880px; height: 620px; transform-origin: 0 0; transition: transform 6s linear;
  transform: translate(calc(60px * var(--ps, 1)), calc(40px * var(--ps, 1))) scale(calc(.96 * var(--ps, 1))); }
.pz-poster.on .pz-art { transform: translate(calc(60px * var(--ps, 1)), calc(40px * var(--ps, 1))) scale(calc(.92 * var(--ps, 1))); }
.pz-shade { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,7,15,0) 36%, rgba(4,7,15,.55) 58%, rgba(4,7,15,.9) 74%, rgba(4,7,15,.94)),
              linear-gradient(180deg, rgba(4,7,15,.35), transparent 30%, transparent 55%, rgba(4,7,15,.92)); }
.pz-txt { position: absolute; left: 72px; bottom: 104px; max-width: 600px; transition: transform .9s ease; }
.pz-poster:not(.on) .pz-txt { transform: translateY(14px); }
.pz-kicker { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: .12em; color: var(--pz-ink2); }
.pz-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--pz-warm), var(--pz-coral)); }
.pz-kicker i { font-style: normal; font-family: ui-monospace, Consolas, monospace; color: var(--pz-warm); }
.pz-txt h2 { margin: 16px 0 0; font-size: clamp(40px, calc(66px * var(--ps, 1)), 76px); line-height: 1.2; font-weight: 900; letter-spacing: .01em; color: #fff; }
.pz-txt h2 em { font-style: normal; background: linear-gradient(90deg, #5aa0ff, #7cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pz-txt p { margin: 16px 0 0; font-size: 17px; line-height: 1.8; color: var(--pz-ink2); }
.pz-glow { position: absolute; right: -160px; bottom: -220px; width: 760px; height: 620px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,140,90,.06), transparent 72%); }
.pz-logo { position: absolute; z-index: 3; left: 72px; top: 48px; display: flex; align-items: center; gap: 12px; }
.pz-logo svg { width: 38px; height: 38px; filter: drop-shadow(0 4px 14px rgba(31,79,216,.45)); }
.pz-logo span { font-weight: 900; font-size: 19px; letter-spacing: .28em; color: #fff; }
.pz-dots { position: absolute; z-index: 3; left: 72px; bottom: 52px; width: min(640px, calc(100% - 700px)); display: flex; gap: 8px; }
.pz-dots button { all: unset; cursor: pointer; flex: 1; height: 16px; display: flex; align-items: center; }
.pz-dots button i { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.pz-dots button i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--pz-hi), var(--pz-warm)); }
.pz-dots button.done i::after { width: 100%; background: rgba(255,255,255,.55); }
.pz-dots button.on i::after { animation: pz-fill 5s linear forwards; }
.pz-dots button:focus-visible i { outline: 2px solid var(--pz-hi); outline-offset: 4px; }
@keyframes pz-fill { to { width: 100%; } }

/* ---------- 海报里的画框与界面缩影 ---------- */
.pz-fr { position: absolute; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: 0 28px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.pz-fig { position: absolute; left: 50%; bottom: 0; width: 58%; height: 46%; transform: translateX(-50%); border-radius: 50% 50% 0 0 / 38% 38% 0 0; background: rgba(255,255,255,.22); }
.pz-fig::before { content: ""; position: absolute; left: 50%; top: -48%; width: 50%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: inherit; }
.pz-fig.dark { background: rgba(12,16,34,.72); }
.pz-fig.light { background: rgba(255,255,255,.82); }
.pz-f1 { background: linear-gradient(165deg, #ffc2ae, #e5989b 45%, #6d597a); }
.pz-f2 { background: linear-gradient(165deg, #b4dcff, #5390d9 55%, #1e3a8a); }
.pz-f3 { background: linear-gradient(165deg, #ffd6a5, #f4845f 55%, #7a2e3a); }
.pz-f4 { background: linear-gradient(165deg, #d3f4e6, #74c69d 55%, #1b4332); }
.pz-f5 { background: linear-gradient(165deg, #c3c8ff, #6f63d9 55%, #1d1a4d); }
.pz-f6 { background: linear-gradient(165deg, #ffe7b8, #f6b26b 55%, #9c5a2a); }
.pz-f7 { background: linear-gradient(165deg, #ffe4ec, #f3a6c0 55%, #8e4a6e); }
.pz-dim { filter: saturate(.35) brightness(.72); }
.pz-tag { position: absolute; left: 8px; top: 8px; font-size: 11px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 6px; }
.pz-sun { position: absolute; left: 62%; top: 9%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,248,235,.75); filter: blur(1px); }
.pz-pb { position: absolute; right: 16%; bottom: 20%; width: 18%; height: 18%; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #fff, #ffe0cc); }
.pz-ui { position: absolute; border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--pz-ink2); text-align: left;
  background: rgba(13,20,40,.86); border: 1px solid rgba(150,175,230,.18); box-shadow: 0 22px 50px rgba(0,0,0,.45); }
.pz-t { font-size: 12px; color: var(--pz-ink3); letter-spacing: .1em; margin-bottom: 10px; }
.pz-meta { margin-top: 10px; font-size: 12px; color: var(--pz-ink3); }
.pz-seg { display: flex; gap: 3px; height: 30px; }
.pz-seg div { border-radius: 6px; font-size: 12px; color: #fff; display: flex; align-items: center; justify-content: center; }
.pz-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #cfe0ff; background: rgba(47,107,255,.16); border: 1px solid rgba(90,150,255,.38); }
.pz-chips { display: flex; gap: 6px; margin-top: 10px; }
.pz-bottle { height: 92px; display: flex; align-items: flex-end; justify-content: center; border-radius: 10px; background: linear-gradient(180deg, rgba(255,231,184,.18), rgba(246,178,107,.08)); }
.pz-bottle i { position: relative; width: 38px; height: 74px; border-radius: 14px 14px 8px 8px; background: linear-gradient(180deg, #fff, #ffe0cc); }
.pz-bottle i::before { content: ""; position: absolute; left: 50%; top: -12px; width: 16px; height: 14px; transform: translateX(-50%); border-radius: 4px; background: #f6b26b; }
.pz-pname { margin-top: 10px; font-size: 14px; color: var(--pz-ink); font-weight: 600; }
.pz-dir { position: absolute; width: 170px; height: 54px; border-radius: 12px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--pz-ink2);
  background: rgba(13,20,40,.86); border: 1px solid rgba(150,175,230,.18); }
.pz-dir.on { color: #fff; border-color: rgba(90,150,255,.8); background: rgba(30,55,120,.9); box-shadow: 0 0 0 3px rgba(47,107,255,.18); }
.pz-dir b { color: var(--pz-soft); }
.pz-flow { position: absolute; width: 70px; height: 2px; background: linear-gradient(90deg, rgba(143,188,255,0), rgba(143,188,255,.8)); }
.pz-flow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid rgba(143,188,255,.9); }
.pz-role { display: flex; align-items: center; gap: 10px; }
.pz-ava { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #ffe4ec, #f3a6c0 60%, #8e4a6e); box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.pz-role b { display: block; color: var(--pz-ink); font-size: 14px; } .pz-role em { font-style: normal; font-size: 12px; color: var(--pz-ink3); }
.pz-wave { display: flex; align-items: center; gap: 2px; height: 28px; }
.pz-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--pz-soft); opacity: .85; }
.pz-wave.sm { height: 20px; margin-top: 6px; }
.pz-wave.long { height: 100%; }
.pz-wave.long i { background: rgba(124,196,255,.55); }
.pz-ptext { font-size: 16px; line-height: 1.8; color: var(--pz-ink); }
.pz-ref { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 3px; border-radius: 6px; background: rgba(47,107,255,.2); color: #cfe0ff; font-size: 14px; }
.pz-ref i { width: 18px; height: 18px; border-radius: 4px; }
.pz-caret { display: inline-block; width: 2px; height: 20px; background: var(--pz-warm); vertical-align: -4px; margin-left: 4px; animation: pz-blink 1s steps(2) infinite; }
@keyframes pz-blink { 50% { opacity: 0; } }
.pz-prow { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.pz-go { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, #3a86ff, #1f5ef0); }
.pz-bub { max-width: 86%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.6; margin-top: 8px; }
.pz-bub.l { background: rgba(255,255,255,.07); color: var(--pz-ink2); border-top-left-radius: 4px; }
.pz-bub.r { margin-left: auto; background: rgba(47,107,255,.28); color: #e4eeff; border-top-right-radius: 4px; }
.pz-song { display: flex; align-items: center; gap: 12px; }
.pz-play { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: 12px; color: #fff; background: linear-gradient(135deg, #f4845f, #b04a5a); }
.pz-song > div { flex: 1; min-width: 0; } .pz-song b { color: var(--pz-ink); font-size: 14px; font-weight: 600; }
.pz-song em { font-style: normal; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--pz-ink3); }
.pz-eras { position: absolute; display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--pz-ink2); letter-spacing: .12em; }
.pz-eras i { width: 34px; height: 1px; background: rgba(143,188,255,.45); }
.pz-eras span:last-child { color: var(--pz-warm); }
.pz-editor { padding: 0; overflow: hidden; }
.pz-ed-top { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; border-bottom: 1px solid rgba(150,175,230,.12); }
.pz-ed-bin { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; border-right: 1px solid rgba(150,175,230,.1); }
.pz-ed-bin .pz-t { grid-column: 1 / -1; margin-bottom: 0; }
.pz-ed-bin i { aspect-ratio: 9 / 12; border-radius: 6px; }
.pz-ed-view { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.25); }
.pz-ed-prop { padding: 14px 16px; border-left: 1px solid rgba(150,175,230,.1); display: flex; flex-direction: column; gap: 10px; }
.pz-ed-prop .pz-t { margin-bottom: 0; }
.pz-kv { display: flex; justify-content: space-between; font-size: 13px; } .pz-kv b { color: var(--pz-ink); font-weight: 600; } .pz-kv b.hi { color: var(--pz-soft); }
.pz-exp { margin-top: auto; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #3a86ff, #1f5ef0); }
.pz-ed-tl { position: relative; padding: 10px 16px 14px; }
.pz-ruler { display: flex; justify-content: space-between; padding-left: 36px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--pz-ink4); margin-bottom: 8px; }
.pz-trk { display: flex; align-items: center; gap: 10px; height: 34px; margin-bottom: 6px; }
.pz-trk em { width: 26px; font-style: normal; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--pz-ink3); }
.pz-lane { position: relative; flex: 1; height: 100%; display: flex; gap: 3px; background: rgba(255,255,255,.025); border-radius: 6px; }
.pz-blk { height: 100%; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.pz-cut { width: 2px; margin: -4px 2px; background: var(--pz-warm); border-radius: 1px; box-shadow: 0 0 10px rgba(255,160,100,.8); }
.pz-head { position: absolute; top: 26px; bottom: 10px; width: 2px; margin-left: 23px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.7); }
.pz-head::before { content: ""; position: absolute; left: -5px; top: -6px; border: 6px solid transparent; border-top: 8px solid #fff; }

/* ---------- 表单区 ---------- */
.auth-side { position: relative; z-index: 4; }
.auth-panel { width: 100%; max-width: 380px; margin: 0 auto; }
.auth-tabs { display: flex; padding: 4px; border-radius: 12px; margin-bottom: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(150,175,230,.14); }
.auth-tab { flex: 1; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--pz-ink3); cursor: pointer; border: 1px solid transparent; transition: color .15s, background .15s; }
.auth-tab:hover { color: var(--pz-ink); }
.auth-tab.on { color: #fff; background: rgba(47,123,255,.16); border-color: rgba(90,150,255,.55); }
.auth-eyebrow { font-size: 12px; letter-spacing: .16em; color: var(--pz-soft); }
.auth-hello { margin: 8px 0 0; font-size: 30px; font-weight: 900; color: #fff; letter-spacing: .01em; }
.auth-sub { margin: 8px 0 0; font-size: 14px; color: var(--pz-ink3); line-height: 1.7; }
.auth-form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.auth-form .field { gap: 8px; }
.auth-form .field label { font-size: 13px; font-weight: 500; color: var(--pz-ink2); }
.auth-form .field label em { font-style: normal; color: var(--pz-ink4); margin-left: 6px; }
.auth-form .field input { height: 50px; border-radius: 11px; font-size: 15px; padding: 0 16px; color: var(--pz-ink);
  background: rgba(255,255,255,.04); border: 1px solid rgba(150,175,230,.18); }
.auth-form .field input:focus { border-color: rgba(79,149,255,.85); box-shadow: 0 0 0 3px rgba(47,123,255,.16); outline: none; }
.auth-form .phone-box { position: relative; display: flex; align-items: center; }
.auth-form .phone-box span { position: absolute; left: 16px; font-size: 15px; color: var(--pz-ink2); pointer-events: none; }
.auth-form .phone-box input { flex: 1; min-width: 0; padding-left: 54px; }
.auth-form .code-btn { min-width: 112px; height: 50px; border-radius: 11px; font-weight: 600; }
.auth-form .pw-meter { display: flex; align-items: center; gap: 6px; }
.auth-form .pw-meter i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); }
.auth-form .pw-meter i.lv1 { background: #ff5d73; }
.auth-form .pw-meter i.lv2 { background: #fbbf24; }
.auth-form .pw-meter i.lv3 { background: #3fa0ff; }
.auth-form .pw-meter span { flex: none; font-size: 12px; color: var(--pz-ink3); margin-left: 6px; }
.auth-cta { height: 52px !important; margin-top: 6px; border-radius: 11px !important; font-size: 15px !important; letter-spacing: .12em !important;
  background: linear-gradient(180deg, #3a86ff, #1f5ef0) !important; box-shadow: 0 10px 26px rgba(31,94,240,.38) !important; }
.auth-cta .cta-arrow { margin-left: 10px; letter-spacing: 0; display: inline-block; transition: transform .15s; }
.auth-cta:hover:not(:disabled) .cta-arrow { transform: translateX(4px); }
.auth-links { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pz-ink3); }
.auth-links i { font-style: normal; color: var(--pz-ink4); }
.auth-links a { color: var(--pz-soft); font-weight: 600; cursor: pointer; }
.auth-links .muted { color: var(--pz-ink3); font-weight: 500; }
.auth-agree { margin-top: 28px; font-size: 12px; color: var(--pz-ink4); }
.auth-foot { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 20px calc(18px + var(--sab)); font-size: 12px; color: var(--pz-ink4); text-align: center; }
.auth-foot .icp { color: var(--pz-ink4); }

/* ---------- 电脑 ---------- */
@media (min-width: 900px) {
  .auth-page { position: fixed; inset: 0; overflow: hidden; }
  .auth-side { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; overflow-y: auto; display: flex; padding: 56px 110px 72px 90px; }
  .auth-panel { margin: auto 0; }
  .auth-foot { position: absolute; left: auto; right: 0; bottom: 0; width: 560px; flex-direction: row; justify-content: space-between; padding: 30px 110px 24px 90px;
    background: linear-gradient(180deg, rgba(4,7,15,0), rgba(4,7,15,.96) 55%); pointer-events: none; }
  .auth-foot a { pointer-events: auto; }
}
@media (min-width: 900px) and (max-width: 1240px) {
  .auth-side, .auth-foot { width: 460px; }
  .auth-side { padding: 48px 56px 64px; }
  .auth-foot { padding: 30px 56px 20px; }
  .pz-dots { width: calc(100% - 600px); }
  .pz-txt { max-width: calc(100% - 560px); }
  .pz-txt p { display: none; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .pz-txt { bottom: 84px; }
  .pz-dots { bottom: 36px; }
  .pz-logo { top: 32px; }
}

/* ---------- 手机：海报在上半屏，表单在下 ---------- */
@media (max-width: 899px) {
  .pz-stage { position: relative; inset: auto; height: min(470px, 118vw); }
  .pz-ambient { display: none; }
  .pz-art { transform: translate(0, calc(var(--sat) + 96px * var(--pm, 1))) scale(calc(.44 * var(--pm, 1))); }
  .pz-poster.on .pz-art { transform: translate(calc(4px * var(--pm, 1)), calc(var(--sat) + 100px * var(--pm, 1))) scale(calc(.42 * var(--pm, 1))); }
  .pz-shade { background: linear-gradient(180deg, rgba(4,7,15,.35), transparent 25%, transparent 45%, rgba(4,7,15,.94) 88%, #04070f); }
  .pz-txt { left: 22px; right: 22px; bottom: 22px; max-width: none; }
  .pz-kicker i, .pz-txt p { display: none; }
  .pz-txt h2 { font-size: 28px; margin-top: 10px; }
  .pz-glow { right: -200px; bottom: 40%; width: 520px; height: 420px; }
  .pz-logo { left: 22px; top: calc(var(--sat) + 38px); gap: 10px; }
  .pz-logo svg { width: 30px; height: 30px; }
  .pz-logo span { font-size: 16px; }
  .pz-dots { left: 22px; right: 22px; top: calc(var(--sat) + 10px); bottom: auto; width: auto; }
  .auth-side { padding: 8px 22px 0; }
  .auth-tabs { margin-bottom: 22px; }
  .auth-hello { font-size: 26px; }
  .auth-form { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-poster, .pz-art, .pz-txt { transition: none; }
  .pz-dots button.on i::after { animation: none; width: 100%; }
  .pz-caret { animation: none; }
}

/* 功能介绍页入口（2026-09-29）：登录页每张海报的「了解详情」、首页标题旁「功能介绍」 */
.pz-more { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--pz-soft); pointer-events: auto; }
.pz-poster:not(.on) .pz-more { pointer-events: none; }
.pz-more:hover { color: #fff; }
.auth-foot .icp:hover { color: var(--pz-ink2); }
.home-intro { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--brand); vertical-align: 2px; }
@media (max-width: 899px) { .pz-more { margin-top: 8px; font-size: 13px; } }

/* 海报标语与画面重叠时看得清（2026-09-29 用户：文字跟图案叠在一起看不清）：
   文字后面垫一层渐变毛玻璃——靠文字处虚化压暗，往外淡出、没有硬边。
   pz-txt 自成层叠上下文，垫层 z-index:-1 在文字之下、画面之上 */
.pz-txt { z-index: 1; isolation: isolate; }
.pz-txt::before {
  content: ""; position: absolute; z-index: -1; inset: -140px -80px -40px -72px; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,7,15,0), rgba(4,7,15,.35) 40%, rgba(4,7,15,.55) 70%, rgba(4,7,15,.5));
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  /* 羽化：上边从全透明慢慢过渡（上方 40% 都在渐变里），左右和下边也淡出；两层遮罩取交集 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 22%, #000 45%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 14%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 22%, #000 45%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0, #000 14%, #000 58%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 899px) { .pz-txt::before { inset: -90px -22px -18px -22px; } }
/* 表单区后面同样垫一层渐变毛玻璃：窄一些的电脑窗口里画面会伸到表单下面（右侧虚化压暗，往左淡出） */
@media (min-width: 900px) {
  .auth-page::before {
    content: ""; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; width: 700px; pointer-events: none;
    background: linear-gradient(90deg, rgba(4,7,15,0), rgba(4,7,15,.5) 26%, rgba(4,7,15,.72));
    -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%);
  }
}
@media (min-width: 900px) and (max-width: 1240px) { .auth-page::before { width: 600px; } }

/* 海报画面整块可点，进对应功能介绍页；标志、进度条、表单在它上面 */
.pz-hit { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; right: 560px; cursor: pointer; }
@media (min-width: 900px) and (max-width: 1240px) { .pz-hit { right: 460px; } }
@media (max-width: 899px) { .pz-hit { right: 0; bottom: auto; height: min(470px, 118vw); } }

/* 付款开通（2026-09-29）：注册页邀请码旁「付款开通」，选中后表单顶部显示开通套餐 */
.paid-link { color: var(--pz-soft, #8fbcff) !important; font-weight: 600; cursor: pointer; text-decoration: none !important; margin-left: 2px !important; }
.paid-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: rgba(47,107,255,.08); border: 1px solid rgba(90,150,255,.3); }
.paid-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.paid-head b { color: #fff; font-size: 15px; }
.paid-head a { font-size: 13px; color: var(--pz-soft, #8fbcff); cursor: pointer; }
.paid-prod { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; padding: 12px 14px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid rgba(150,175,230,.18); }
.paid-prod.on { border-color: rgba(90,150,255,.85); background: rgba(30,55,120,.45); }
.pp-name { font-size: 14px; color: var(--pz-ink, #e8eefc); font-weight: 600; }
.pp-price { font-size: 20px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.pp-bonus { grid-column: 1 / -1; font-size: 12px; color: var(--pz-warm, #ffb46b); }
.paid-note { font-size: 12px; color: var(--pz-ink3, #7384a8); }
.auth-cta.paid-wechat { background: linear-gradient(180deg, #2fc16a, #1a9e52) !important; box-shadow: 0 10px 26px rgba(26,158,82,.32) !important; }

/* 购买邀请码的顺序重排（2026-09-29）：步骤标题、支付方式并排选项、底部单个确认按钮 */
.paid-box { gap: 12px; }
.paid-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pz-ink, #e8eefc); }
.paid-step i { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #fff; background: rgba(47,107,255,.55); }
.paid-step span { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--pz-ink3, #7384a8); }
.paid-chs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paid-ch { position: relative; height: 48px; border-radius: 11px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--pz-ink2, #a9b6d3); background: rgba(255,255,255,.03); border: 1px solid rgba(150,175,230,.18); }
.pc-ico { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.paid-ch.wechat .pc-ico { background: #1fb65c; } .paid-ch.alipay .pc-ico { background: #1677ff; }
.pc-ok { margin-left: auto; font-size: 13px; opacity: 0; }
.paid-ch.on { color: #fff; }
.paid-ch.on .pc-ok { opacity: 1; }
.paid-ch.wechat.on { border-color: rgba(47,193,106,.85); background: rgba(31,182,92,.14); }
.paid-ch.alipay.on { border-color: rgba(90,150,255,.85); background: rgba(30,55,120,.45); }
.pw-show { display: flex !important; align-items: center; gap: 6px; font-size: 12px !important; color: var(--pz-ink3, #7384a8) !important; cursor: pointer; }
.auth-form .field .pw-show input { width: 14px; height: 14px; padding: 0; accent-color: #2f6bff; }
/* 矮屏电脑（笔记本 768 高）：表单收紧，购买邀请码一屏放得下 */
@media (min-width: 900px) and (max-height: 820px) {
  .auth-side { padding-top: 28px; padding-bottom: 56px; }
  .auth-hello { font-size: 26px; margin-top: 4px; }
  .auth-sub { margin-top: 4px; }
  .auth-form { gap: 12px; margin-top: 16px; }
  .auth-form .field { gap: 6px; }
  .auth-form .field input, .auth-form .code-btn { height: 44px; }
  .auth-cta { height: 48px !important; margin-top: 2px; }
  .paid-box { padding: 12px; gap: 10px; }
  .paid-prod { padding: 9px 12px; }
  .paid-ch { height: 42px; }
  .auth-agree { margin-top: 14px; }
}

/* ======================================================================
   首页改版（2026-09-29，设计稿 https://claude.ai/artifact/PmXf4hdAGbDaJhmiwKB88i ）
   功能按用途分三组，主次靠卡片大小；每张一枚统一规格的细线小图标，只留一小块分组色；最近成片一排
   ====================================================================== */
.hg-grp { margin-top: 22px; }
.hg-h { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; color: var(--text-2); margin-bottom: 10px; }
.hg-h::before { content: ""; width: 16px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #ffb46b, #ff7d5c); }
.hg-h em { font-style: normal; color: var(--text-4); letter-spacing: 0; font-size: 12px; }
.hg-g3, .hg-g4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hg-card { position: relative; border-radius: 16px; cursor: pointer; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); border: 1px solid rgba(150,175,230,.14);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.hg-card:hover { transform: translateY(-2px); border-color: rgba(110,160,255,.5); box-shadow: 0 12px 30px rgba(10,30,90,.35); }
.hg-tt { font-size: 15px; font-weight: 700; color: var(--text); }
.hg-st { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.hg-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(160deg, rgba(79,149,255,.16), rgba(79,149,255,.04)); border: 1px solid rgba(120,165,255,.22); }
.hg-ico svg { width: 82%; height: 82%; fill: none; stroke: #a9c8ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hg-ico .a { stroke: none; fill: var(--tone); }
.hg-ico .w { stroke: none; fill: #fff; }
.hg-ico .wl { stroke: #fff; stroke-width: 1.6; fill: none; }
.hg-ico .cur { stroke: none; fill: #ffb46b; } .hg-ico .ph { stroke: #ffb46b; }
.t-warm { --tone: url(#hgWarm); } .t-blue { --tone: url(#hgBlue); } .t-cyan { --tone: url(#hgCyan); } .t-rose { --tone: url(#hgRose); }
/* 手机：做爆款第一张通栏横排、其余两张竖排；自由创作一行一张；后期与定制三张并排竖排 */
.hg-card.big { flex-direction: column; align-items: flex-start; padding: 14px; gap: 12px; }
.hg-card.big:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.hg-mdg { grid-template-columns: minmax(0, 1fr); }
.hg-card.md { padding: 0 14px; height: 70px; }
.hg-g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hg-card.sm { flex-direction: column; justify-content: center; height: 100px; padding: 0 6px; gap: 8px; text-align: center; }
.hg-card.sm .hg-ico { width: 42px; height: 42px; }
.hg-card.sm .hg-st { display: none; }
.hg-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hg-out { position: relative; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hg-out img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-out span { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 7px; font-size: 11px; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-out.more { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-3); }
.hg-outs .hg-out:nth-child(n+5) { display: none; }
.side-logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 14px rgba(31,79,216,.45)); }
@media (min-width: 900px) {
  .hg-grp { margin-top: 28px; }
  .hg-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hg-mdg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hg-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .hg-card.big, .hg-card.big:first-child { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 24px 24px 26px; gap: 22px; min-height: 214px; grid-column: auto; }
  .hg-card.big .hg-ico { width: 68px; height: 68px; border-radius: 18px; }
  .hg-card.big .hg-tt { font-size: 18px; } .hg-card.big .hg-st { font-size: 13px; margin-top: 6px; }
  .hg-card.md { height: 100px; padding: 0 20px; gap: 16px; }
  .hg-card.md .hg-ico { width: 54px; height: 54px; }
  .hg-card.md .hg-tt { font-size: 16px; white-space: nowrap; } .hg-card.md .hg-st { white-space: nowrap; }
  .hg-card.sm { flex-direction: row; justify-content: flex-start; text-align: left; height: 84px; padding: 0 16px; gap: 12px; }
  .hg-card.sm .hg-ico { width: 46px; height: 46px; }
  .hg-card.sm .hg-st { display: block; white-space: nowrap; font-size: 11.5px; }
  .hg-outs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .hg-outs .hg-out:nth-child(n+5) { display: block; }
  .hg-out.more { display: flex; }
  /* 侧栏标志换成标志 A + 字标 */
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 22px; font-family: inherit; font-size: 17px; font-weight: 900; letter-spacing: .26em;
    background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; -webkit-text-fill-color: #fff; filter: none; }
}
/* 平板横屏 / 窄电脑（中间栏只有四百多像素）：做爆款第一张通栏、其余两张一行；自由创作一行一张；后期两列 */
@media (min-width: 900px) and (max-width: 1240px) {
  .hg-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hg-card.big, .hg-card.big:first-child { min-height: 0; padding: 16px; gap: 12px; }
  .hg-card.big:first-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .hg-card.big .hg-ico { width: 52px; height: 52px; border-radius: 14px; }
  .hg-card.big .hg-tt { font-size: 16px; }
  .hg-mdg { grid-template-columns: minmax(0, 1fr); }
  .hg-card.md { height: 76px; }
  .hg-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hg-card.sm { height: 72px; padding: 0 12px; }
  .hg-outs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hg-outs .hg-out:nth-child(n+5) { display: none; }
  .hg-outs .hg-out.more { display: none; }
}

/* ======================================================================
   创建页改版（2026-09-29，设计稿 https://claude.ai/artifact/WKUpWFti58PzEvpb6otEgp ）
   页头 图标 + 名称 + 一句说明；电脑上 素材 | 生成设置 两栏、底栏 项目名 + 预估 + 开始；素材块做成卡片；警告改琥珀小条
   ====================================================================== */
.cr-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--sat)) 16px 4px; }
.cr-top .cr-back { flex: none; font-size: 13px; color: var(--text-3); padding: 6px 0; }
.cr-ico { width: 40px; height: 40px; border-radius: 12px; }
.cr-tt { min-width: 0; flex: 1; }
.cr-tt h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.cr-tt p { display: none; margin: 3px 0 0; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-help { flex: none; font-size: 12px; color: var(--brand); white-space: nowrap; }
.cr-sh { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; color: var(--text-2); }
.cr-sh i { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #fff; background: rgba(47,107,255,.55); }
.cr-sh em { font-style: normal; color: var(--text-4); letter-spacing: 0; font-size: 12px; margin-left: auto; }
.cr-cols, .cr-left, .cr-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cr-left > .block { padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); border: 1px solid rgba(150,175,230,.14); }
.create-page .pick-warn { display: flex; gap: 8px; align-items: center; color: #ffd39a; background: rgba(255,180,107,.08); border: 1px solid rgba(255,180,107,.3); border-radius: 10px; }
.create-page .pick-warn::before { content: "!"; width: 16px; height: 16px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #1a0d05; background: #ffb46b; }
.bar-name { flex: 1 1 220px; min-width: 0; height: 44px; }
@media (min-width: 900px) {
  .cr-top { padding: 22px 32px 6px; gap: 14px; }
  .cr-ico { width: 44px; height: 44px; border-radius: 13px; }
  .cr-tt h2 { font-size: 20px; }
  .cr-tt p { display: block; }
  .cr-help { font-size: 13px; }
  .create-page > .sec-scroll { padding-top: 16px; }
  .cr-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .cr-right { position: sticky; top: 0; }
  .create-page .bottom-bar { display: flex; flex-direction: row; align-items: center; gap: 14px; }
  .create-page .bottom-bar .quote-box { flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
  .create-page .bottom-bar .quote-num { font-size: 18px; }
  .create-page .bar-btn { flex: none; width: auto; min-width: 180px; height: 48px; padding: 0 28px; }
}
@media (min-width: 900px) and (max-width: 1240px) {
  .cr-cols { grid-template-columns: minmax(0, 1fr); }
  .cr-right { position: static; }
  .bar-name { flex: 1 1 120px; }
  .create-page .bar-btn { min-width: 140px; padding: 0 18px; }
  .create-page .bottom-bar .quote-num { font-size: 16px; }
}
.cr-right .block-title.set-t { display: none; }
.block-head a { flex: none; white-space: nowrap; margin-left: 10px; }

/* ======================================================================
   任务页改版（2026-09-29，设计稿 https://claude.ai/artifact/5nGiUhzgriaGcwWKzccGwB ）
   页头 + 页签计数 + 类型筛选；按 需要你处理 / 进行中 / 已完成 分组；卡片色条 + 状态胶囊 + 主按钮；右栏预览 + 操作 + 记录
   ====================================================================== */
.tk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none; }
.tk-head .home-title { margin: 0; }
.tk-sum { font-size: 13px; color: var(--text-3); }
.tk-search { margin-left: auto; width: 200px; height: 36px; font-size: 13px; padding: 0 12px; }
.tk-tabs { display: flex; flex: none; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 4px; overflow-x: auto; scrollbar-width: none; }
.tk-tabs::-webkit-scrollbar { display: none; }
.tk-tab { padding: 8px 12px 10px; font-size: 13.5px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: center; white-space: nowrap; cursor: pointer; user-select: none; }
.tk-tab.on { color: var(--text); border-color: var(--brand); }
.tk-tab em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text-2); }
.tk-tab em.warm { background: rgba(255,180,107,.16); color: #ffb46b; }
.tk-kinds { margin-left: auto; display: flex; gap: 6px; padding-bottom: 7px; padding-left: 8px; }
.tk-kinds span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); white-space: nowrap; cursor: pointer; }
.tk-kinds span.on { color: var(--text); border-color: rgba(110,160,255,.45); background: rgba(47,107,255,.14); }
.tk-gh { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .1em; color: var(--text-3); margin-top: 6px; }
.tk-gh i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-4, #4d5b7c); }
.tk-gh .n { color: var(--text-4, #4d5b7c); letter-spacing: 0; }
.tk-gh-act { color: #ffb46b; } .tk-gh-act i { background: #ffb46b; box-shadow: 0 0 0 4px rgba(255,180,107,.15); }
.tk-gh-going i { background: var(--brand); box-shadow: 0 0 0 4px rgba(79,149,255,.15); }
.tk-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 12px 14px; position: relative; }
.tk-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: transparent; }
.tk-card.tk-act::before { background: #ffb46b; }
.tk-card.tk-bad::before { background: #ff8a8a; }
.tk-card .task-thumb { width: 54px; height: auto; aspect-ratio: 9 / 16; border-radius: 9px; }
.tk-cnt { position: absolute; right: 4px; bottom: 4px; z-index: 2; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
.tk-kind { font-size: 11px; font-weight: 500; color: var(--text-3); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; }
.tk-card .task-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-card .task-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-card .fail-text { color: #ff9a9a; }
.tk-card.tk-act .task-body > .muted-sm:last-child { color: #ffd39a; }
.tk-side { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-soft, rgba(150,175,230,.08)); padding-top: 10px; }
.tk-side .task-status { margin-right: auto; }
.tk-side .mini-btn { height: 30px; padding: 0 14px; font-size: 12.5px; }
.tk-more { width: 34px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2); color: var(--text-2); letter-spacing: 1px; font-size: 14px; font-family: inherit; cursor: pointer; flex: none; }
.tk-card > .task-actions { display: none; }
/* 手机动作单：传送进来的按钮排成一行行 */
.tk-menu-acts { display: flex; flex-direction: column; }
.tk-menu-acts .task-actions { flex-direction: column; gap: 0; }
.tk-menu-acts .mini-btn { height: 50px; border: 0; border-bottom: 1px solid var(--line-soft, rgba(150,175,230,.08)); border-radius: 0; background: transparent; color: var(--text); font-size: 15px; text-align: left; padding: 0 16px; }
.tk-menu-acts .mini-btn.primary { color: var(--brand); font-weight: 600; }
.tk-menu-acts .mini-btn.danger { color: #ff8a8a; }
.tk-menu-acts .muted-sm { padding: 14px 16px; }
/* 右栏 */
.td-head { align-items: center; }
.td-head .rename-ico { flex: none; cursor: pointer; }
.td-prev-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.td-prev-nav a { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); cursor: pointer; }
.td-prev-nav a.on { color: var(--text); border-color: rgba(110,160,255,.6); background: rgba(47,107,255,.16); }
.td-actions .task-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.td-actions .mini-btn { height: 38px; padding: 0 12px; font-size: 13.5px; width: 100%; }
.td-actions .mini-btn.primary { grid-column: 1 / -1; }
.td-actions .muted-sm { grid-column: 1 / -1; }
.td-outs { display: flex; flex-direction: column; gap: 6px; }
.td-o { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.td-o.on { border-color: rgba(110,160,255,.6); background: rgba(47,107,255,.12); }
.td-o.missing { cursor: default; color: var(--text-3); }
.td-o-th { width: 26px; aspect-ratio: 9 / 16; border-radius: 4px; background: var(--media); overflow: hidden; flex: none; }
.td-o-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-o-name { flex: 1; }
.td-o a { font-size: 12px; color: var(--text-3); } .td-o a.danger { color: #ff8a8a; }
@media (min-width: 900px) {
  .tk-card { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .tk-side { grid-column: auto; flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; }
  .tk-side .task-status { margin-right: 0; }
  .tasks-page .task-list { gap: 8px; }
}

/* ======================================================================
   内容页改版（2026-09-30，设计稿 https://claude.ai/artifact/7U29Eazyyf8PqBkGz97Hpu ）
   竖屏封面网格（横屏成片占两列）· 工具栏 · 多选浮条 · 电脑右栏预览
   ====================================================================== */
.ct-stor { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ct-stor i { width: 110px; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; display: block; }
.ct-stor i b { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.ct-stor.warn i b { background: #ffb46b; } .ct-stor.full i b { background: #ff8a8a; }
.ct-stor.warn, .ct-stor.full { color: #ffd39a; }
.ct-bar { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ct-bar::-webkit-scrollbar { display: none; }
.ct-bar .chip { height: 28px; padding: 0 12px; font-size: 12.5px; display: flex; align-items: center; white-space: nowrap; cursor: pointer; }
.ct-selbtn { margin-left: auto; font-size: 12.5px; padding: 5px 12px; border-radius: 9px; border: 1px solid rgba(110,160,255,.35); color: var(--brand); white-space: nowrap; cursor: pointer; user-select: none; }
.ct-selbtn.on { background: rgba(47,107,255,.25); color: #fff; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.ct-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; cursor: pointer; }
.ct-card.land { grid-column: 1 / -1; }   /* 手机三列放不下两张横屏：横屏成片通栏 */
.ct-cv { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--media); border: 1px solid var(--line-soft, rgba(150,175,230,.1)); display: flex; align-items: center; justify-content: center; }
.ct-card.land .ct-cv { aspect-ratio: 16 / 9; }
.ct-cv.audio { background: linear-gradient(135deg, #0f2a78, #2f6bff 60%, #22c7f0); }
.ct-card.sel .ct-cv { outline: 2px solid var(--brand); outline-offset: 2px; }
.ct-play { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.35); z-index: 1; }
.ct-play::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ct-k { position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.45); color: #cfe0ff; }
.ct-cv .dur-badge { z-index: 1; }
.ct-ck { position: absolute; right: 6px; top: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); background: rgba(0,0,0,.3); }
.ct-card.sel .ct-ck { background: var(--brand); border-color: var(--brand); }
.ct-card.sel .ct-ck::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ct-acts { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 6px 6px; gap: 4px; justify-content: center; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
.ct-card:hover .ct-acts { display: flex; }
.ct-acts span { font-size: 11px; padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.16); color: #fff; white-space: nowrap; }
.ct-acts span:hover { background: var(--brand); }
.ct-mt { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-selbar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--sab)); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(15,26,51,.96); border: 1px solid rgba(110,160,255,.4); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 13px; }
.ct-selbar span { margin-right: auto; }
/* 右栏 */
.ct-rail .td-head { align-items: center; }
.ct-prev .td-video { max-height: 46vh; }
.ct-sib { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-sib span { width: 40px; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--media); border: 1px solid var(--line); cursor: pointer; }
.ct-sib span.audio { background: linear-gradient(135deg, #0f2a78, #2f6bff 60%, #22c7f0); }
.ct-sib span.on { outline: 2px solid var(--brand); outline-offset: 1px; }
.ct-sib img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .ct-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ct-card.land { grid-column: span 2; }
  .ct-selbar { position: sticky; left: auto; right: auto; bottom: 8px; margin-top: 4px; }
}
@media (min-width: 900px) and (max-width: 1240px) {
  .ct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ct-stor { display: none; }
}

/* ======================================================================
   角色与产品页改版（2026-09-30，设计稿 https://claude.ai/artifact/5N8uxbkMxB1HY4RkJPfx56 ）
   页头合并 · 一行说明 / 空状态 · 卡片带状态标签 · 电脑右栏详情
   ====================================================================== */
.as-head { row-gap: 10px; }
.as-seg { margin: 0; }
.as-seg .seg-item em { font-style: normal; font-size: 11px; margin-left: 5px; opacity: .75; }
.as-back { font-size: 12.5px; color: var(--text-3); white-space: nowrap; cursor: pointer; }
.as-btns { display: flex; gap: 8px; }
.as-btns .mini-btn { height: 34px; padding: 0 14px; }
.as-head .as-btns { width: 100%; }
.as-head .as-btns .mini-btn { flex: 1; }
.as-head .tk-search { width: 100%; margin-left: 0; }
.as-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.7; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(13,20,40,.5); }
.as-hint b { color: var(--text-2); font-weight: 600; }
.as-empty { border: 1px dashed rgba(110,160,255,.35); border-radius: 14px; padding: 26px 18px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.as-empty b { font-size: 15px; }
.as-empty p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.7; max-width: 520px; }
.as-empty .as-btns { width: 100%; max-width: 360px; } .as-empty .as-btns .mini-btn { flex: 1; }
.as-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.as-card { border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); padding: 10px; display: flex; flex-direction: column; gap: 7px; cursor: pointer; min-width: 0; }
.as-card.sel { border-color: rgba(110,160,255,.6); box-shadow: 0 0 0 1px rgba(110,160,255,.25), 0 14px 40px rgba(20,60,160,.25); }
.as-pic { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; position: relative; background: var(--media); }
.as-card.prod .as-pic { aspect-ratio: 1; }
.as-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-cnt { position: absolute; right: 6px; bottom: 6px; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
.as-nm { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-3); white-space: nowrap; }
.tag.ok { color: #6ee7a8; border-color: rgba(110,231,168,.35); } .tag.warm { color: #ffb46b; border-color: rgba(255,180,107,.4); }
.tag.bad { color: #ff8a8a; border-color: rgba(255,138,138,.4); } .tag.b { color: #8fbcff; border-color: rgba(110,160,255,.35); }
.as-add { align-items: center; justify-content: center; border-style: dashed; border-color: rgba(110,160,255,.4); color: #8fbcff; gap: 6px; font-size: 13px; min-height: 160px; }
.as-add i { width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed rgba(110,160,255,.5); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 22px; }
.as-add small { font-size: 11px; color: var(--text-3); text-align: center; }
/* 右栏 */
.as-rail .td-head { align-items: center; }
.as-views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.as-view { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; position: relative; background: var(--media); cursor: pointer; }
.as-view.sq { aspect-ratio: 1; }
.as-view.off { opacity: .45; }
.as-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-view span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; text-align: center; padding: 2px 3px; background: rgba(0,0,0,.55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-voice { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-3); }
.as-voice audio { width: 100%; height: 36px; }
.as-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.as-rail .section-head a { cursor: pointer; }
.as-rail .side-row b { white-space: normal; }
@media (min-width: 900px) {
  .as-head .tk-search { width: 200px; margin-left: auto; }
  .as-head .as-btns { width: auto; } .as-head .as-btns .mini-btn { flex: none; }
  .as-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 900px) and (max-width: 1240px) {
  .as-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-head .tk-search { width: 150px; }
}

/* ======================================================================
   我的页改版 + 邀请好友（2026-09-30，设计稿 https://claude.ai/artifact/FHj9Vgnqd5QDHq7DGVFcVN ）
   ====================================================================== */
.sub-head .home-title { margin: 0; }
.my-cols { display: flex; flex-direction: column; gap: 14px; }
.my-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.my-prof { border-radius: 16px; border: 1px solid rgba(110,160,255,.35); background: linear-gradient(135deg, #16307a, #0c1838); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(20,60,160,.25); }
.my-top { display: flex; align-items: center; gap: 14px; }
.my-av { width: 52px; height: 52px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #4a95ff, #1f4fd8); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; }
.my-who { min-width: 0; }
.my-nm { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #fff; }
.my-nm svg { color: rgba(255,255,255,.55); flex: none; }
.my-ac { font-size: 12px; color: rgba(233,238,252,.7); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-big { display: flex; align-items: flex-end; gap: 10px; }
.my-big b { font-size: 36px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.my-big small { font-size: 12px; color: rgba(233,238,252,.7); padding-bottom: 4px; }
.my-charge { margin-left: auto; height: 36px; padding: 0 18px; border-radius: 9px; border: 0; background: #fff; color: #1a3f9e; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.my-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.my-st { border-radius: 12px; border: 1px solid var(--line); background: var(--card); padding: 12px 14px; cursor: pointer; min-width: 0; }
.my-st small { font-size: 11.5px; color: var(--text-3); display: block; }
.my-st > b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.my-st i { display: block; height: 4px; border-radius: 2px; background: var(--track); margin-top: 8px; overflow: hidden; }
.my-st i b { display: block; height: 100%; border-radius: 2px; background: var(--brand); }
.my-st i.warn b { background: #ffb46b; } .my-st i.full b { background: #ff8a8a; }
.my-gl { font-size: 11.5px; letter-spacing: .1em; color: var(--text-3); margin: 4px 0 -4px; }
.menu-row .mr-val { margin-left: auto; margin-right: 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.menu-row { color: inherit; text-decoration: none; }
.my-foot .agreement { margin-top: 4px; }
.tx-ico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; }
.tx-ico.out { background: rgba(255,180,107,.14); color: #ffb46b; } .tx-ico.in { background: rgba(110,231,168,.14); color: #6ee7a8; }
.tx-amount.in { color: #6ee7a8; }
.ref-card { border-radius: 16px; border: 1px solid rgba(110,160,255,.35); background: linear-gradient(135deg, #16307a, #0c1838); padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.ref-lab { font-size: 12px; letter-spacing: .1em; color: rgba(233,238,252,.7); }
.ref-code { font-size: 34px; font-weight: 800; letter-spacing: .3em; color: #fff; font-variant-numeric: tabular-nums; }
.ref-hint { font-size: 12.5px; color: rgba(233,238,252,.8); line-height: 1.7; max-width: 460px; }
.ref-btns { display: flex; gap: 8px; margin-top: 4px; }
.ref-link { font-size: 12px; height: 38px; text-align: center; color: var(--text-3); }
.paid-ref label em { font-style: normal; font-size: 11.5px; color: #8fbcff; margin-left: 6px; }
@media (min-width: 900px) {
  .my-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
}

/* ======================================================================
   婚庆 / 再见一面换壳（2026-09-30，设计稿 https://claude.ai/artifact/E8C42YyuHQVMccpfH2mUKQ ）
   页头同创建页；电脑两栏（复用 .cr-cols / .cr-left / .cr-right）；项目名进底栏
   ====================================================================== */
.wd-seg { padding: 8px 16px 0; }
.wd-seg .nav-seg { margin: 0; }
.wd-page .cr-left > .block, .wd-page .cr-right > .block { background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); border: 1px solid rgba(150,175,230,.14); border-radius: 16px; padding: 14px; }
.wd-page .cr-left, .wd-page .cr-right { gap: 14px; }
@media (min-width: 900px) {
  .wd-seg { padding: 12px 32px 0; }
  .wd-page > .sec-scroll { padding-top: 16px; }
  .wd-flow .cr-right { position: static; }   /* 再见一面右栏和左栏一样长，不用跟随滚动 */
}

/* ======================================================================
   工具页换壳（2026-09-30，设计稿 https://claude.ai/artifact/NqnbtpzWFoCKbxqkh6z4HL ）
   视频超分 / 剪辑项目列表 / AI 角色设计：页头同创建页、电脑两栏
   ====================================================================== */
.eh-seg .seg-item { height: auto; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.eh-seg .seg-item small { font-size: 11px; font-weight: 400; opacity: .7; }
.eh-list { display: flex; flex-direction: column; gap: 8px; }
.wd-page > .sec-scroll > .block { background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); border: 1px solid rgba(150,175,230,.14); border-radius: 16px; padding: 14px; }
.wd-page > .sec-scroll > .cr-cols { margin-bottom: 14px; }
.as-hint a { color: var(--brand); cursor: pointer; margin-left: 6px; white-space: nowrap; }
.ed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ed-card { border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); padding: 10px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0; }
.ed-card:hover { border-color: rgba(110,160,255,.5); }
.ed-card > b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-track { height: 46px; border-radius: 9px; border: 1px solid var(--line); background: rgba(4,8,20,.7); padding: 8px; display: flex; gap: 3px; align-items: stretch; }
.ed-track i { border-radius: 3px; background: rgba(79,149,255,.55); } .ed-track i.k1 { background: rgba(255,180,107,.55); } .ed-track i.k2 { background: rgba(110,231,168,.45); }
.ed-acts { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.ed-acts .mini-btn.primary { flex: 1; }
.dh-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(13,20,40,.7); cursor: pointer; margin-top: 8px; font-size: 12.5px; }
.dh-row img, .dh-ph { width: 44px; aspect-ratio: 16 / 9; border-radius: 6px; object-fit: cover; flex: none; background: var(--media); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.dh-row b { display: block; font-size: 13px; }
.dh-row em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.dh-row em.ok { color: #6ee7a8; }
@media (min-width: 900px) {
  .eh-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   分销商中心改版（2026-09-30，设计稿 https://claude.ai/artifact/HgG7cab11FGFb8HYiA39gc ）
   ====================================================================== */
.dlx-top { display: flex; align-items: center; gap: 10px; }
.dlx-top .side-logo { width: 30px; height: 30px; }
.dlx-top b { font-size: 17px; }
.dlx-top a { margin-left: auto; font-size: 13px; color: var(--text-3); cursor: pointer; }
.dlx-who { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(110,160,255,.3); background: rgba(47,107,255,.08); font-size: 12px; color: var(--text-3); }
.dlx-who b { display: block; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.dlx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dlx-kpi { border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); padding: 12px 14px; min-width: 0; }
.dlx-kpi small { font-size: 12px; color: var(--text-3); display: block; }
.dlx-kpi b { font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dlx-kpi i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.dlx-kpi.hi { border-color: rgba(110,160,255,.4); background: linear-gradient(135deg, #16307a, #0c1838); }
.dlx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.dlx-tabs div { padding: 8px 12px 10px; font-size: 13.5px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.dlx-tabs div.on { color: var(--text); border-color: var(--brand); }
.dlx-two { display: flex; flex-direction: column; gap: 14px; }
.dlx-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dlx-prod { border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.dlx-prow { display: flex; align-items: flex-start; gap: 12px; }
.dlx-prow b { font-size: 16px; display: block; } .dlx-prow small { font-size: 12px; color: var(--text-3); }
.dlx-price { margin-left: auto; text-align: right; flex: none; }
.dlx-price b { font-size: 26px; font-weight: 300; color: #8fbcff; } .dlx-price small { display: block; }
.dlx-qrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlx-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dlx-qty button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--text-2); font-size: 16px; cursor: pointer; }
.dlx-qty input { width: 56px; height: 34px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; color: var(--text); text-align: center; font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.dlx-qty input::-webkit-outer-spin-button, .dlx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dlx-quick { display: flex; gap: 6px; }
.dlx-quick span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); cursor: pointer; }
.dlx-quick span.on { color: var(--text); border-color: rgba(110,160,255,.5); background: rgba(47,107,255,.16); }
.dlx-sum { margin-left: auto; font-size: 13px; color: var(--text-3); } .dlx-sum b { font-size: 20px; color: var(--text); }
.dlx-chs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlx-ch { height: 46px; border: 0; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; }
.dlx-ch.wechat { background: #1aad57; } .dlx-ch.alipay { background: #1677ff; }
.dlx-ch:disabled { opacity: .45; cursor: not-allowed; }
.dlx-note { line-height: 1.7; }
.dlx-card { border-radius: 16px; border: 1px solid var(--line); background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dlx-card-h { display: flex; justify-content: space-between; align-items: center; } .dlx-card-h b { font-size: 14px; } .dlx-card-h a { font-size: 12px; color: var(--brand); cursor: pointer; }
.dlx-code { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 12.5px; cursor: pointer; min-width: 0; }
.dlx-code b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; font-size: 13px; white-space: nowrap; }
.dlx-code em { font-style: normal; color: var(--text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-code > span:last-child { margin-left: auto; white-space: nowrap; font-size: 11.5px; }
.dlx-ok { color: #6ee7a8; } .dlx-warm { color: #ffb46b; } .dlx-bad { color: #ff8a8a; }
.dlx-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dlx-bar .chip { height: 30px; padding: 0 12px; font-size: 12.5px; display: flex; align-items: center; cursor: pointer; }
.dlx-bar-r { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dlx-tbl { border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--card); }
.dlx-tr { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 80px minmax(0, 1fr) 110px; gap: 10px; padding: 11px 16px; font-size: 12.5px; border-bottom: 1px solid var(--line-soft, rgba(150,175,230,.08)); align-items: center; }
.dlx-tr:last-child { border-bottom: 0; }
.dlx-tr.h { color: var(--text-3); font-size: 12px; background: rgba(255,255,255,.03); }
.dlx-tr.c4 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 100px; }
.dlx-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dlx-tr a { color: var(--brand); cursor: pointer; }
.dlx-main { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 899px) {
  .dlx-tr { grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 1fr); }
  .dlx-tr > :nth-child(2), .dlx-tr > :nth-child(4) { display: none; }
  .dlx-tr.c4 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px; }
  .dlx-tr.c4 > :nth-child(2) { display: none; } .dlx-tr.c4 > :nth-child(4) { display: block; }
  .dlx-bar-r { margin-left: 0; width: 100%; }
}
@media (min-width: 900px) {
  /* 分销商没有通用侧栏和右栏：整屏铺满，自己的侧栏 + 主区（选择器要压过 .page.main-page 的固定中栏） */
  .page.main-page.dlx-page { left: 0; right: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 100%; }
  .dlx-side { height: 100%; overflow-y: auto; border-right: 1px solid var(--line); padding: 26px 16px; display: flex; flex-direction: column; gap: 6px; background: rgba(4,8,20,.4); }
  .dlx-side .side-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; }
  .dlx-side .side-logo { width: 34px; height: 34px; }
  .dlx-side .side-brand span { font-weight: 900; font-size: 17px; letter-spacing: .26em; }
  .dlx-side .dlx-who { margin: 0 4px 14px; }
  .dlx-nav { height: 42px; border-radius: 11px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; color: var(--text-3); border: 1px solid transparent; cursor: pointer; }
  .dlx-nav:hover { color: var(--text); }
  .dlx-nav.on { color: #fff; background: linear-gradient(90deg, rgba(61,123,255,.22), rgba(61,123,255,.04)); border-color: rgba(110,160,255,.35); }
  .dlx-nav em { margin-left: auto; font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text-2); }
  .dlx-grow { flex: 1; }
  .dlx-out { color: var(--text-4, #4d5b7c); }
  .page.main-page.dlx-page > .sec-scroll { height: 100%; padding: 26px max(36px, calc((100% - 1180px) / 2)) 40px; }
  .dlx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .dlx-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}


/* 创建页底栏「当前选择」一行（2026-10-09）：标签可点 ✕ 去掉；参考图超上限标红 */
.create-page .bottom-bar { flex-wrap: wrap; row-gap: 8px; }
.bar-sel { flex: 1 1 100%; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; order: -1; }
.bar-sel::-webkit-scrollbar { display: none; }
.bar-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 12px;
  background: rgba(37,99,235,.14); color: var(--brand); font-size: 12px; line-height: 1; white-space: nowrap; }
.bar-chip i { font-style: normal; opacity: .6; }
.bar-chip b { font-weight: 400; opacity: .55; margin-left: 1px; }
.bar-chip.rm { cursor: pointer; }
.bar-chip.rm:hover { background: rgba(37,99,235,.24); }
.bar-chip.muted { background: rgba(127,140,170,.14); color: var(--text-2); }
.bar-chip.over { background: rgba(239,68,68,.16); color: #ef4444; }
.create-page .pad-bottom-bar { padding-bottom: calc(146px + var(--sab)); }
@media (min-width: 900px) {
  .create-page .pad-bottom-bar { padding-bottom: 24px; }
  .create-page .bottom-bar { flex-wrap: wrap; }
}

/* Vue 挂载前整块不显示（2026-10-14）：否则脚本没跑起来时会露出模板原文和弹层遮罩，看起来像黑屏 + 乱码 */
[v-cloak] { display: none !important; }

/* 剪辑分离人声与配乐：失败原因标红（2026-10-09） */
.prop-u.warn { color: #ef4444; }
.tl-btn.off { opacity: .45; }
.tl-tools .muted-sm.warn { color: #ef4444; }
.tl-link { margin-left: 6px; color: var(--brand); cursor: pointer; }


/* ===== 直播助手（2026-10-09）：提词页 / 资料与合规 / 场次 ===== */
.lv-page .input { width: 100%; box-sizing: border-box; background: var(--field); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 14px; padding: 10px 12px; outline: none; font-family: inherit; }
.lv-page textarea.input { resize: vertical; line-height: 1.5; }
.lv-page select.input { appearance: auto; }
.lv-page .input:focus { border-color: var(--brand); }
.lv-form { display: flex; flex-direction: column; gap: 10px; }
.lv-label { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.lv-prods { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-check { font-size: 13px; color: var(--text-2); display: flex; gap: 8px; align-items: center; }
.lv-price { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.lv-price b { color: var(--text); font-size: 16px; }
.lv-price .muted-sm { display: block; }
.lv-start { width: 100%; margin-top: 4px; }
.lv-howto { padding-left: 18px; font-size: 13px; color: var(--text-2); line-height: 1.8; margin: 4px 0 10px; }
.lv-endbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 0 16px 12px; }
.lv-endbar a { color: #ffd98e; cursor: pointer; white-space: nowrap; }
.lv-link { color: var(--brand); cursor: pointer; font-size: 13px; }
.lv-link.bad { color: #f87171; }
.lv-row-r { display: flex; justify-content: flex-end; gap: 14px; align-items: center; margin-top: 8px; }
.lv-guide { margin-top: 10px; font-size: 13px; color: var(--text-2); line-height: 1.7; background: var(--card-2); border-radius: 10px; padding: 10px 12px; }
.lv-guide p { margin: 0 0 4px; }

/* 本机应用状态 */
.lv-app { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.lv-app-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: #94a3b8; }
.lv-app.ok .lv-app-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.lv-app.warn .lv-app-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
.lv-app.bad .lv-app-dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.18); }
.lv-app-t { font-size: 14px; font-weight: 600; }
.lv-app-s { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.lv-app-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.lv-app-acts .btn-mini.disabled { opacity: .6; pointer-events: none; }

/* 直播中顶栏 */
.lv-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; }
.lv-bar-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.lv-bar-k { color: var(--text-3); }
.lv-bar-r { display: flex; align-items: center; gap: 14px; }
.lv-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.2); animation: lvBlink 1.6s infinite; }
@keyframes lvBlink { 50% { opacity: .35; } }
.lv-bar-app { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: rgba(148,163,184,.18); color: var(--text-2); }
.lv-bar-app.ok { background: rgba(34,197,94,.18); color: #4ade80; }
.lv-bar-app.warn { background: rgba(245,158,11,.18); color: #fbbf24; }
.lv-bar-app.bad { background: rgba(239,68,68,.18); color: #f87171; }
.btn-mini.danger { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.35); }
.lv-warn { margin: 0 16px 8px; padding: 10px 12px; border-radius: 10px; background: rgba(245,158,11,.15); color: #fbbf24; font-size: 13px; border: 1px solid rgba(245,158,11,.35); }
.lv-warn a { color: #fde68a; text-decoration: underline; margin-left: 8px; cursor: pointer; }
.lv-notes { margin: 0 16px 10px; }

/* 三栏 */
.lv-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 16px; }
.lv-col { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); border: 1px solid rgba(150,175,230,.14); border-radius: 16px; padding: 12px; }
.lv-col-h { font-size: 14px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-col-h .lv-link { margin-left: auto; font-weight: 400; }
.lv-clist, .lv-rlist, .lv-tlist { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.lv-clist { max-height: 60dvh; }
.lv-rlist { max-height: 60dvh; }
.lv-tlist { max-height: 60dvh; }
.lv-rlist.static { max-height: none; }
.lv-empty { padding: 20px 6px; text-align: center; line-height: 1.6; }
.lv-c { font-size: 13px; padding: 6px 8px; border-radius: 8px; display: flex; gap: 8px; align-items: baseline; color: var(--text-2); }
.lv-c.q { background: rgba(26,86,219,.16); color: var(--text); }
.lv-c.done { opacity: .5; }
.lv-c-nick { color: var(--text-3); flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-c-text { flex: 1; min-width: 0; word-break: break-all; }
.lv-c-ask { flex: none; color: var(--brand); cursor: pointer; font-size: 12px; }

/* 讲解稿卡 */
.lv-r { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); }
.lv-r.pending { border-style: dashed; }
.lv-r.masked { border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.06); }
.lv-r.done { opacity: .55; }
.lv-r.failed { border-color: rgba(245,158,11,.5); }
.lv-r-q { font-size: 13px; color: var(--text-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.lv-r-src { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(148,163,184,.18); color: var(--text-3); }
.lv-r-n { font-size: 12px; color: var(--brand); font-weight: 600; }
.lv-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(148,163,184,.18); color: var(--text-3); }
.lv-tag.warn { background: rgba(245,158,11,.18); color: #fbbf24; }
.lv-tag.bad { background: rgba(239,68,68,.2); color: #f87171; }
.lv-tag.ok { background: rgba(34,197,94,.18); color: #4ade80; }
.lv-r-wait { font-size: 14px; color: var(--text-3); padding: 6px 0; }
.lv-r-a { font-size: 22px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; }
.lv-r-p { font-size: 17px; line-height: 1.75; color: var(--text); margin-bottom: 8px; }
.lv-r-p.general { color: var(--text-2); }
.lv-r-p.general::before { content: ""; }
.lv-r.small .lv-r-a { font-size: 15px; }
.lv-r.small .lv-r-p { font-size: 13px; }
.lv-font1 .lv-r-a { font-size: 26px; } .lv-font1 .lv-r-p { font-size: 20px; }
.lv-font2 .lv-r-a { font-size: 30px; } .lv-font2 .lv-r-p { font-size: 24px; line-height: 1.7; }
mark.lv-mask { background: rgba(239,68,68,.35); color: #fecaca; border-radius: 4px; padding: 0 3px; }
.lv-r-acts { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.lv-ask { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.lv-ask .input { flex: 1; }
.lv-panes { position: sticky; bottom: calc(64px + var(--sab)); padding: 8px 16px; background: var(--ground); }

/* 话题 */
.lv-tg-h { font-size: 12px; color: var(--text-3); margin: 6px 0 4px; }
.lv-t { padding: 8px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); cursor: pointer; }
.lv-t:hover { border-color: var(--brand); }
.lv-t.static { cursor: default; }
.lv-t.done { opacity: .55; }
.lv-t.done .lv-t-t::after { content: " ✓"; color: #4ade80; }
.lv-t-t { font-size: 14px; font-weight: 600; }
.lv-t-h { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* 资料 */
.lv-uprow { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.lv-sel { flex: 1; min-width: 0; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lv-docs, .lv-hist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.lv-doc, .lv-h { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.lv-h { cursor: pointer; }
.lv-h.on { border-color: var(--brand); }
.lv-doc.failed { border-color: rgba(239,68,68,.4); }
.lv-doc-m { min-width: 0; flex: 1; }
.lv-doc-t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-doc-s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.lv-builtin { margin: 10px 0; font-size: 13px; }
.lv-builtin ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); line-height: 1.6; }
.lv-flag { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.lv-flag-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 30dvh; overflow-y: auto; }
.lv-flag-pick .chip { font-size: 12px; cursor: pointer; }
.lv-scroll .cr-cols { padding: 0 16px; }

@media (min-width: 900px) {
  .lv-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 0 32px; }
  .lv-topics { grid-column: 1 / -1; }
  .lv-topics .lv-tlist { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .lv-topics .lv-tg { display: contents; }
  .lv-topics .lv-tg-h { width: 100%; }
  .lv-topics .lv-t { flex: 0 1 220px; }
  .lv-bar, .lv-warn, .lv-notes { margin-left: 32px; margin-right: 32px; padding-left: 0; padding-right: 0; }
  .lv-warn, .lv-notes { padding: 10px 12px; }
  .lv-scroll .cr-cols { padding: 0 32px; }
  .lv-clist, .lv-rlist { max-height: calc(100dvh - 240px); }
  .lv-page.lv-focus .lv-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1240px) {
  .lv-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 2fr); }
  .lv-topics { grid-column: auto; }
  .lv-topics .lv-tlist { flex-direction: column; flex-wrap: nowrap; max-height: calc(100dvh - 240px); }
  .lv-topics .lv-tg { display: block; }
  .lv-topics .lv-t { flex: none; }
  .lv-page.lv-focus .lv-cols { grid-template-columns: minmax(0, 1fr); }
}

/* 直播中（.lv-live）：提词页铺满——页头与分段隐藏、中栏占到右边缘、三栏上下撑满只有列表内滚动（2026-10-09 用户：上方别留大片空白，宽度跟着屏幕走） */
.lv-page.lv-live .cr-top, .lv-page.lv-live .wd-seg { display: none; }
.lv-page.lv-live { height: 100dvh; min-height: 0; overflow: hidden; }
.lv-page.lv-live .lv-scroll { display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1 1 auto; min-height: 0; height: auto; padding: calc(6px + var(--sat)) 12px calc(64px + var(--sab)); }
@media (max-width: 899px) { .lv-page.lv-live .lv-hide-m { display: none; } .lv-page.lv-live .lv-bar-l { font-size: 12px; gap: 8px; } }
.lv-page.lv-live .lv-bar { padding: 4px 0; margin: 0; flex: none; }
.lv-page.lv-live .lv-warn, .lv-page.lv-live .lv-notes { margin: 0; flex: none; }
.lv-page.lv-live .lv-cols { flex: 1 1 auto; min-height: 0; padding: 0; margin: 0; }
.lv-page.lv-live .lv-col { min-height: 0; height: 100%; box-sizing: border-box; }
.lv-page.lv-live .lv-clist, .lv-page.lv-live .lv-rlist, .lv-page.lv-live .lv-tlist { flex: 1 1 auto; max-height: none; }
.lv-page.lv-live .lv-panes { position: static; flex: none; padding: 6px 0 8px; }
.lv-link.muted { color: var(--text-3); }
@media (min-width: 900px) {
  .page.main-page.lv-page { right: 0; }   /* 直播页没有右栏：中栏铺到右边缘 */
  .page.main-page.lv-page > .sec-scroll { padding-left: 24px; padding-right: 24px; }
  .page.main-page.lv-page.lv-live > .sec-scroll { padding: 10px 20px 12px; }
  .lv-page.lv-live .lv-bar, .lv-page.lv-live .lv-warn, .lv-page.lv-live .lv-notes { margin-left: 0; margin-right: 0; }
  .lv-page.lv-live .lv-cols { padding: 0; }
  .lv-page.lv-live .lv-topics .lv-tlist { max-height: none; }
  .lv-page.lv-live .lv-clist, .lv-page.lv-live .lv-rlist { max-height: none; }
}

/* 提词舞台（2026-10-09 用户定：一次只盯一条、倒计时到点自动切最新、右下大按钮） */
.lv-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lv-stage-empty { align-items: center; justify-content: center; text-align: center; }
.lv-prog { flex: none; height: 6px; border-radius: 3px; background: rgba(148,163,184,.2); overflow: hidden; margin-bottom: 8px; }
.lv-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #4ade80); transition: width 1s linear; }
.lv-prog.paused i { background: #f59e0b; }
.lv-r.cur { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lv-r-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.lv-r-clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); }
.lv-queue { flex: none; max-height: 26%; display: flex; flex-direction: column; min-height: 0; margin-top: 8px; }
.lv-qlist { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.lv-q { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--card-2); cursor: pointer; font-size: 13px; }
.lv-q:hover { outline: 1px solid var(--brand); }
.lv-q.pending { opacity: .6; cursor: default; }
.lv-q-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-ctl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.lv-ctl .lv-big.primary { grid-column: 1 / -1; }
.lv-big { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 16px; padding: 12px 10px; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font: inherit; }
.lv-big b { font-size: 22px; }
.lv-big span { font-size: 12px; color: var(--text-3); }
.lv-big.primary { background: var(--brand); border-color: var(--brand); color: #fff; min-height: 96px; }
.lv-big.primary b { font-size: 28px; }
.lv-big.primary span { color: rgba(255,255,255,.8); }
.lv-big:disabled { opacity: .45; cursor: default; }
.lv-page.lv-live .lv-ctl { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .lv-page.lv-live .lv-cols { grid-template-rows: minmax(0, 1fr) auto; }
  .lv-page.lv-live .lv-comments, .lv-page.lv-live .lv-replies { grid-row: 1 / 3; }
  .lv-page.lv-live .lv-topics { grid-column: 1 / -1; grid-row: auto; max-height: 160px; }
  .lv-page.lv-live .lv-cols { grid-template-rows: minmax(0, 1fr) auto auto; }
}
@media (min-width: 1240px) {
  .lv-page.lv-live .lv-cols { grid-template-rows: minmax(0, 1fr) auto; }
  .lv-page.lv-live .lv-topics { grid-column: 3; grid-row: 1; max-height: none; }
  .lv-page.lv-live .lv-ctl { grid-column: 3; grid-row: 2; }
  .lv-page.lv-live.lv-focus .lv-cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .lv-page.lv-live.lv-focus .lv-replies { grid-column: 1; grid-row: 1 / 3; }
  .lv-page.lv-live.lv-focus .lv-ctl { grid-column: 2; grid-row: 1 / 3; align-content: center; }
}

/* 直播中收起左侧导航（2026-10-09 用户：面积都留给直播屏幕）；顶栏 ☰ 展开 */
.lv-menu { font-size: 18px; color: var(--text-2); cursor: pointer; padding: 0 6px 0 0; line-height: 1; }
@media (min-width: 900px) {
  .tabbar.lv-hide { display: none; }
  .page.main-page.lv-page.lv-full { left: 0; }
}

/* 待念单独一栏（2026-10-09 用户：放大高亮） */
.lv-wait-n { font-size: 18px; color: var(--brand); }
.lv-wlist { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.lv-w { padding: 12px 14px; border-radius: 14px; background: rgba(26,86,219,.14); border: 1px solid rgba(26,86,219,.4); cursor: pointer; }
.lv-w:hover { border-color: var(--brand); background: rgba(26,86,219,.22); }
.lv-w.newest { background: rgba(26,86,219,.26); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,86,219,.18); }
.lv-w.pending { background: var(--card-2); border-style: dashed; cursor: default; }
.lv-w-q { font-size: 18px; font-weight: 700; line-height: 1.4; }
.lv-font1 .lv-w-q { font-size: 20px; } .lv-font2 .lv-w-q { font-size: 22px; }
.lv-w-m { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.lv-w-m .lv-link { margin-left: auto; }
@media (min-width: 900px) {
  /* 900-1240：舞台 | 待念 + 按钮（上下两半）；评论与话题压在下面一行 */
  .lv-page.lv-live .lv-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .lv-page.lv-live .lv-replies { grid-column: 1; grid-row: 1 / 3; }
  .lv-page.lv-live .lv-wait { grid-column: 2; grid-row: 1; }
  .lv-page.lv-live .lv-ctl { grid-column: 2; grid-row: 2; }
  .lv-page.lv-live .lv-comments { grid-column: 1; grid-row: 3; max-height: 160px; }
  .lv-page.lv-live .lv-topics { grid-column: 2; grid-row: 3; max-height: 160px; }
}
@media (min-width: 1240px) {
  /* ≥1240：左栏 评论 / 话题 上下两半，中栏舞台，右栏 待念 / 大按钮 上下两半（2026-10-09 用户定） */
  .lv-page.lv-live .lv-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 4fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .lv-page.lv-live .lv-comments { grid-column: 1; grid-row: 1; max-height: none; }
  .lv-page.lv-live .lv-topics { grid-column: 1; grid-row: 2; max-height: none; }
  .lv-page.lv-live .lv-replies { grid-column: 2; grid-row: 1 / 3; }
  .lv-page.lv-live .lv-wait { grid-column: 3; grid-row: 1; }
  .lv-page.lv-live .lv-ctl { grid-column: 3; grid-row: 2; align-content: stretch; }
  /* 专注模式：只留 舞台 + 待念 / 按钮 */
  .lv-page.lv-live.lv-focus .lv-cols { grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); }
  .lv-page.lv-live.lv-focus .lv-replies { grid-column: 1; grid-row: 1 / 3; }
  .lv-page.lv-live.lv-focus .lv-wait { grid-column: 2; grid-row: 1; }
  .lv-page.lv-live.lv-focus .lv-ctl { grid-column: 2; grid-row: 2; }
}
/* 按钮区占满下半：按钮随高度放大 */
.lv-page.lv-live .lv-ctl { grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 0; }
.lv-page.lv-live .lv-big { min-height: 0; height: 100%; }
.lv-page.lv-live .lv-big.primary b { font-size: 34px; }
.lv-page.lv-live .lv-big b { font-size: 24px; }

/* 快捷牌（2026-10-09 用户选：本场信息 / 产品快卡 / 常用话术）：盖在舞台上大字显示，倒计时暂停 */
.lv-card { border: 1px solid rgba(74,222,128,.45); border-radius: 14px; background: rgba(34,197,94,.06); padding: 12px 14px; }
.lv-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: none; }
.lv-card-h b { font-size: 18px; }
.lv-card-h .btn-mini { margin-left: auto; }
.lv-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.lv-card-big { font-size: 26px; font-weight: 700; line-height: 1.6; white-space: pre-wrap; }
.lv-font1 .lv-card-big { font-size: 30px; } .lv-font2 .lv-card-big { font-size: 34px; }
.lv-card-pts { font-size: 22px; line-height: 1.6; padding-left: 28px; margin: 12px 0; }
.lv-card-line { font-size: 18px; line-height: 1.6; color: var(--text-2); margin-top: 6px; }
.lv-card-k { display: inline-block; font-size: 12px; color: var(--text-3); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-right: 8px; vertical-align: middle; }
.lv-pick { display: flex; flex-wrap: wrap; gap: 12px; }
.lv-pick-it { padding: 22px 26px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 24px; font-weight: 700; cursor: pointer; min-width: 160px; text-align: center; }
.lv-pick-it:hover { border-color: var(--brand); background: rgba(26,86,219,.18); }
.lv-ph { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.lv-ph .lv-link { padding-top: 10px; }
/* 按钮区两行：上行导航（下一条最大）、下行快捷牌 */
.lv-page.lv-live .lv-ctl { display: flex; flex-direction: column; gap: 10px; }
.lv-ctl-row { display: grid; gap: 10px; min-height: 0; flex: 1 1 auto; }
.lv-ctl-row.nav { grid-template-columns: 1fr 1.6fr 1fr; flex: 1.3 1 auto; }
.lv-ctl-row.quick { grid-template-columns: repeat(4, 1fr); }
.lv-big.quick { background: rgba(34,197,94,.1); border-color: rgba(74,222,128,.35); }
.lv-big.quick b { font-size: 18px; }
.lv-big.quick.on { background: rgba(34,197,94,.3); border-color: #4ade80; }
.lv-page.lv-live .lv-big.primary b { font-size: 30px; }
.lv-page.lv-live .lv-big b { font-size: 20px; }
@media (max-width: 899px) { .lv-ctl-row.nav .lv-big { min-height: 64px; } .lv-ctl-row.quick .lv-big { min-height: 56px; } }

/* 产品快卡单独一到两排（2026-10-10 用户定：开播设置里按点选顺序排） */
.lv-ctl-row.quick { grid-template-columns: repeat(3, 1fr); flex: .9 1 auto; }
.lv-ctl-row.prods { flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); }
.lv-big.prod { background: rgba(245,158,11,.1); border-color: rgba(251,191,36,.35); padding: 8px 6px; }
.lv-big.prod b { font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.lv-big.prod.on { background: rgba(245,158,11,.3); border-color: #fbbf24; }
.lv-ord { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: var(--brand); font-size: 11px; font-style: normal; font-weight: 700; margin-right: 5px; }

/* 快捷按钮槽位（通用）+ 三栏拖柄（2026-10-10） */
.lv-big.prod.phrase { background: rgba(34,197,94,.1); border-color: rgba(74,222,128,.35); }
.lv-big.prod.phrase.on { background: rgba(34,197,94,.3); border-color: #4ade80; }
.lv-big.prod.notes { background: rgba(26,86,219,.12); border-color: rgba(26,86,219,.4); }
.lv-big.prod.notes.on { background: rgba(26,86,219,.3); border-color: var(--brand); }
.lv-slots { display: flex; flex-direction: column; gap: 6px; }
.lv-slot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; }
.lv-slot.product { border-color: rgba(251,191,36,.35); } .lv-slot.phrase { border-color: rgba(74,222,128,.35); }
.lv-slot-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-slot .lv-link.off { opacity: .3; pointer-events: none; }
.lv-slot-add { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.lv-gut { display: none; }
@media (min-width: 1240px) {
  .lv-page.lv-live .lv-gut { display: block; cursor: col-resize; position: relative; grid-row: 1 / 3; touch-action: none; }
  .lv-page.lv-live .lv-gut i { position: absolute; top: 0; bottom: 0; left: 3px; width: 4px; border-radius: 2px; background: rgba(150,175,230,.18); }
  .lv-page.lv-live .lv-gut:hover i { background: var(--brand); }
  .lv-page.lv-live .lv-gut.g1 { grid-column: 2; }
  .lv-page.lv-live .lv-gut.g2 { grid-column: 4; }
  /* 五列：评论 | 柄 | 舞台 | 柄 | 待念+按钮（列宽由 liveGridStyle 内联给） */
  .lv-page.lv-live .lv-cols { grid-template-columns: 220px 10px minmax(0, 1fr) 10px 380px; }
  .lv-page.lv-live .lv-comments { grid-column: 1; grid-row: 1; }
  .lv-page.lv-live .lv-topics { grid-column: 1; grid-row: 2; }
  .lv-page.lv-live .lv-replies { grid-column: 3; grid-row: 1 / 3; }
  .lv-page.lv-live .lv-wait { grid-column: 5; grid-row: 1; }
  .lv-page.lv-live .lv-ctl { grid-column: 5; grid-row: 2; }
  .lv-page.lv-live.lv-focus .lv-cols { grid-template-columns: minmax(0, 1fr) 10px 380px; }
  .lv-page.lv-live.lv-focus .lv-gut.g2 { grid-column: 2; }
  .lv-page.lv-live.lv-focus .lv-replies { grid-column: 1; }
  .lv-page.lv-live.lv-focus .lv-wait { grid-column: 3; }
  .lv-page.lv-live.lv-focus .lv-ctl { grid-column: 3; }
}

/* 八个固定槽位：配了的亮、没配的暗（2026-10-10 用户定） */
.lv-ctl-row.prods { grid-template-columns: repeat(4, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.lv-big.prod.empty { background: transparent; border-style: dashed; border-color: rgba(150,175,230,.18); color: var(--text-3); opacity: .5; }
.lv-big.prod.empty b { font-size: 14px; font-weight: 500; }
.lv-big.prod.empty:hover { opacity: .9; border-color: var(--brand); }

/* 上一条（方）在左、下一条（长）在右；跳过挪到第二行（2026-10-10） */
.lv-ctl-row.nav { grid-template-columns: auto minmax(0, 1fr); }
.lv-big.sq { aspect-ratio: 1 / 1; height: 100%; padding: 8px; }
.lv-page.lv-live .lv-big.sq b { font-size: 18px; }
.lv-ctl-row.quick { grid-template-columns: repeat(4, 1fr); }
.lv-ctl-row.nav .lv-big.primary { grid-column: auto; }   /* 老规则让「下一条」通栏，这里收回：方的上一条在左、长的下一条在右 */

/* 开播条固定在顶部（2026-10-10 用户：别让用户滚动找开播按钮） */
.lv-startbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; margin: -8px 16px 12px; padding: 10px 14px; border-radius: 14px; background: rgba(10,16,32,.96); border: 1px solid rgba(150,175,230,.2); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.lv-startbar-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-startbar-l b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-startbar .lv-start { width: auto; min-width: 140px; margin: 0; height: 46px; flex: none; }
@media (min-width: 900px) { .lv-startbar { margin: -16px 32px 12px; } .lv-startbar .lv-start { min-width: 180px; } }
@media (max-width: 899px) { .lv-page:not(.lv-live) .lv-scroll { overflow: visible; } .lv-startbar { top: var(--sat); } }   /* 手机上页面随 body 滚：滚动区别截住 sticky，开播条才贴在视口顶部 */

/* ===== 按钮区重做（2026-10-10，设计稿 https://claude.ai/artifact/A2XVNpVo1wmcwNYkC4izF2 ）：
   像按钮——有面、有边、底边阴影、按下去下沉；三层：蓝色主按钮只有「下一条」、深灰操作键、带色快捷牌（橙产品 / 绿话术 / 蓝本场信息）；
   文字按容器宽度自适应（container query），装不下省略号，绝不挤出框 ===== */
.lv-page.lv-live .lv-ctl .lv-big {
  container-type: inline-size; position: relative; min-width: 0; min-height: 0; height: 100%; padding: 6px 8px; gap: 2px;
  border-radius: 14px; color: #e6edff; font: inherit; cursor: pointer;
  background: linear-gradient(180deg, #2a3a63, #1b2846); border: 1px solid #3d5188;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #0f1830, 0 6px 14px rgba(0,0,0,.35);
  transition: transform .06s, box-shadow .06s, filter .12s;
}
.lv-page.lv-live .lv-ctl .lv-big:hover { filter: brightness(1.12); }
.lv-page.lv-live .lv-ctl .lv-big:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 #0f1830, 0 2px 6px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big:disabled { opacity: .4; cursor: default; filter: none; transform: none; }
.lv-page.lv-live .lv-ctl .lv-big b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; font-size: clamp(13px, 11cqw, 22px); }
.lv-page.lv-live .lv-ctl .lv-big span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(10px, 7cqw, 13px); color: rgba(230,237,255,.7); }
@container (max-width: 72px) { .lv-big span { display: none !important; } }
/* 主按钮：下一条，横排 大字 + 说明 + 箭头 */
.lv-page.lv-live .lv-ctl .lv-big.primary { flex-direction: row; gap: 10px; padding: 6px 14px; background: linear-gradient(180deg, #3a74ff, #1a56db); border-color: #5b8cff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #0e3391, 0 8px 18px rgba(26,86,219,.45); }
.lv-page.lv-live .lv-ctl .lv-big.primary b { font-size: clamp(18px, 12cqw, 30px); flex: none; }
.lv-page.lv-live .lv-ctl .lv-big.primary span { white-space: normal; text-align: left; line-height: 1.2; font-size: clamp(11px, 5cqw, 14px); color: rgba(255,255,255,.85); flex: 1 1 auto; min-width: 0; }
.lv-page.lv-live .lv-ctl .lv-big.primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 #0e3391, 0 3px 8px rgba(26,86,219,.45); }
.lv-page.lv-live .lv-ctl .lv-big.sq { aspect-ratio: 1 / 1; height: 100%; padding: 4px; color: #b6c2dc; }
.lv-page.lv-live .lv-ctl .lv-big.sq b { font-size: clamp(11px, 15cqw, 15px); }
.lv-ico { width: clamp(16px, 28cqw, 30px); height: clamp(16px, 28cqw, 30px); flex: none; }
.lv-page.lv-live .lv-ctl .lv-big.primary .lv-ico { width: 26px; height: 26px; }
/* 深灰操作键 */
.lv-page.lv-live .lv-ctl .lv-ctl-row.quick .lv-big:not(.quick) { background: linear-gradient(180deg, #1e2944, #151e36); border-color: #2b3a62; color: #c9d4ee; }
/* 带色快捷牌（上行的本场信息 / 话术与下面八格同一套色） */
.lv-page.lv-live .lv-ctl .lv-big.product, .lv-page.lv-live .lv-ctl .lv-big.quick.product { background: linear-gradient(180deg, #4a3312, #2e200b); border-color: #8a5e1c; color: #ffe3b0; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #1a1206, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.phrase { background: linear-gradient(180deg, #143a2a, #0d261b); border-color: #1f7a4f; color: #c9f5dd; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #06150e, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.notes { background: linear-gradient(180deg, #1b2f6b, #132148); border-color: #3457b8; color: #d6e2ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #0a1230, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.product span, .lv-page.lv-live .lv-ctl .lv-big.phrase span, .lv-page.lv-live .lv-ctl .lv-big.notes span { color: inherit; opacity: .75; }
.lv-page.lv-live .lv-ctl .lv-big.on { outline: 3px solid #fbbf24; outline-offset: 2px; filter: brightness(1.15); }
.lv-page.lv-live .lv-ctl .lv-big.prod.empty, .lv-page.lv-live .lv-ctl .lv-big.prod.empty:hover { background: transparent; border: 1px dashed rgba(150,175,230,.22); box-shadow: none; color: #5b6886; opacity: 1; filter: none; cursor: pointer; }
.lv-page.lv-live .lv-ctl .lv-big.prod.empty:active { transform: none; }
.lv-page.lv-live .lv-ctl .lv-big.prod.empty b { font-weight: 500; font-size: clamp(12px, 9cqw, 15px); }
.lv-page.lv-live .lv-ctl .lv-big.prod.empty span { display: block; }
.lv-page.lv-live .lv-ctl { gap: 8px; }
.lv-page.lv-live .lv-ctl .lv-ctl-row { gap: 8px; }
.lv-page.lv-live .lv-ctl .lv-ctl-row.nav { grid-template-columns: auto minmax(0, 1fr); flex: 1.25 1 auto; }
.lv-page.lv-live .lv-ctl .lv-ctl-row.quick, .lv-page.lv-live .lv-ctl .lv-ctl-row.prods { flex: 1 1 auto; }

/* ===== 直播助手整页统一风格（2026-10-10，设计稿 Setup / Main 画板）：页头与页签复用任务页的 .tk-head / .tk-tabs，分组小标题复用 .tk-gh ===== */
.lv-head { flex: none; display: flex; flex-direction: column; gap: 4px; padding: calc(16px + var(--sat)) 16px 0; }
.lv-head .tk-tabs { margin-top: 8px; }
.lv-head-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lv-head-price { font-size: 12.5px; color: var(--text-3); line-height: 1.5; text-align: right; }
.lv-head-price b { color: var(--text); font-weight: 600; }
.lv-startbtn { appearance: none; font: inherit; cursor: pointer; border-radius: 12px; padding: 0 28px; height: 44px; color: #fff; font-size: 16px; font-weight: 700; background: linear-gradient(180deg, #3a74ff, #1a56db); border: 1px solid #5b8cff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #0e3391, 0 8px 18px rgba(26,86,219,.45); transition: transform .06s, box-shadow .06s; }
.lv-startbtn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 #0e3391, 0 3px 8px rgba(26,86,219,.45); }
.lv-startbtn:disabled { opacity: .5; cursor: default; }
.lv-page .lv-scroll { padding-top: 14px; }
.lv-page.lv-live .lv-head { display: none; }   /* 直播中只剩顶栏 */
.lv-gh { margin: 0 0 2px; }
.lv-gh.tone-ok { color: #6ee7a8; } .lv-gh.tone-ok i { background: #6ee7a8; box-shadow: 0 0 0 4px rgba(110,231,168,.15); }
.lv-gh.tone-warn { color: #ffb46b; } .lv-gh.tone-warn i { background: #ffb46b; box-shadow: 0 0 0 4px rgba(255,180,107,.15); }
.lv-gh.tone-bad { color: #ff8a8a; } .lv-gh.tone-bad i { background: #ff8a8a; box-shadow: 0 0 0 4px rgba(255,138,138,.15); }
.lv-app-s { font-size: 13px; color: var(--text-2); line-height: 1.6; }
/* 列标题 = 分组小标题 */
.lv-col-h { font-size: 12.5px; font-weight: 400; letter-spacing: .1em; color: var(--text-3); gap: 10px; }
.lv-col-h::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-4, #4d5b7c); flex: none; }
.lv-replies .lv-col-h::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(79,149,255,.15); }
.lv-wait .lv-col-h::before { background: #ffb46b; box-shadow: 0 0 0 4px rgba(255,180,107,.15); }
.lv-col-h .block-sub { letter-spacing: 0; color: var(--text-4, #4d5b7c); }
.lv-wait-n { font-size: 16px; color: #ffb46b; letter-spacing: 0; }
/* 直播中顶栏：标题 800 粗 + 计数 + 胶囊按钮 */
.lv-title { margin: 0; font-size: 18px; font-weight: 800; }
.lv-menu { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 0; }
.lv-bar-r .lv-link { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); color: var(--text-2); }
.lv-bar-r .lv-link.muted { color: var(--text-3); }
.lv-bar-r .btn-mini.danger { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 9px; }
.lv-live-dot { background: #ff7d5c; box-shadow: 0 0 0 4px rgba(255,125,92,.2); }
@media (min-width: 900px) { .lv-head { padding: 24px 32px 0; } }
@media (max-width: 899px) { .lv-head { position: sticky; top: 0; z-index: 5; background: var(--ground); padding-bottom: 6px; } .lv-page:not(.lv-live) .lv-scroll { overflow: visible; } .lv-head-r { width: 100%; justify-content: space-between; } }

/* 页签固定位置（2026-10-10 用户：三个页签位置要固定）：直播中只收起标题行，页签行留着；两条蓝色渐变分割线延续到直播页 */
.lv-page.lv-live .lv-head { display: flex; }
.lv-page.lv-live .lv-head .tk-tabs { margin-top: 0; }
.lv-page.lv-live .lv-head .tk-tab { padding: 4px 12px 8px; }
@media (min-width: 900px) {
  .lv-page.lv-live .lv-head { padding: 8px 20px 0; }
  .lv-page.lv-live .lv-scroll { padding-top: 6px; }
}

/* 直播中顶栏并进页头同一行：页签行在两种状态下都在同一位置 */
.lv-head .lv-bar { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0 0 0 4px; }
.lv-page.lv-live .lv-head .tk-head { flex-wrap: nowrap; }
.lv-page.lv-live .lv-head .home-title { font-size: 18px; color: var(--text-3); font-weight: 600; flex: none; }
.lv-page.lv-live .lv-head .tk-tabs { margin-top: 4px; }
@media (min-width: 900px) { .lv-page.lv-live .lv-head { padding: 24px 20px 0; } .lv-page.lv-live .lv-head .tk-head { min-height: 44px; } .lv-page.lv-live .lv-head .tk-tabs { margin-top: 8px; } .lv-page.lv-live .lv-head .tk-tab { padding: 8px 12px 10px; } }

/* 页头一行到底（2026-10-10 用户：上方别浪费面积；页签位置固定）：标题 + 页签 + 右侧（未开播：价格 / 开播；直播中：场次信息 + 操作）都在同一行，两种状态高度一样 */
.lv-head { padding: calc(10px + var(--sat)) 16px 0; }
.lv-onehead { flex-wrap: nowrap; min-height: 44px; gap: 10px; }
.lv-onehead .home-title { flex: none; }
.lv-tabs { border-bottom: 0; margin: 0 0 0 6px; align-self: stretch; align-items: stretch; flex: none; }
.lv-tabs .tk-tab { padding: 0 10px; align-items: center; border-bottom-width: 2px; margin-bottom: 0; }
.lv-onehead .lv-bar { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; }
.lv-onehead .lv-head-r { margin-left: auto; }
.lv-head-price { line-height: 1.4; }
.lv-page.lv-live .lv-head { display: flex; padding-top: calc(8px + var(--sat)); }
.lv-page.lv-live .lv-head .home-title { font-size: 16px; color: var(--text-3); font-weight: 600; }
.lv-page.lv-live .lv-onehead { min-height: 40px; }
.lv-page .lv-scroll { padding-top: 12px; }
@media (min-width: 900px) {
  .lv-head, .lv-page.lv-live .lv-head { padding: 12px 24px 0; }
  .lv-page.lv-live .lv-head { padding-left: 20px; padding-right: 20px; }
  .lv-page.lv-live .lv-scroll { padding-top: 8px; }
  /* 蓝色渐变分割线放在真正分割的地方：直播中三栏之间的两条拖柄 */
  .lv-page.lv-live .lv-gut i { background: linear-gradient(180deg, transparent, rgba(110,170,255,.8), rgba(34,211,238,.8), transparent); width: 1px; left: 4px; }
  .lv-page.lv-live .lv-gut:hover i { width: 3px; left: 3px; background: linear-gradient(180deg, rgba(110,170,255,.9), rgba(34,211,238,.9)); }
}
@media (max-width: 899px) {
  .lv-onehead { flex-wrap: wrap; }
  .lv-head-price { display: none; }
  .lv-onehead .lv-bar { width: 100%; }
}

/* ===== 直播助手 · 资料库（2026-10-10）：文件夹 / 条目 / 这一条 ===== */
.lv-lib { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 16px; }
.lv-lib-nav, .lv-lib-list, .lv-lib-main, .lv-lib-comp { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); border: 1px solid rgba(150,175,230,.14); border-radius: 16px; }
.lv-lib-nav { padding: 10px 8px; }
.lv-fds { display: flex; flex-direction: column; gap: 2px; }
.lv-fd { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.lv-fd:hover { background: rgba(255,255,255,.04); }
.lv-fd.on { color: #fff; background: rgba(47,107,255,.16); }
.lv-fd i { width: 14px; height: 14px; border-radius: 4px; border: 1.6px solid currentColor; opacity: .7; flex: none; }
.lv-fd .n { margin-left: auto; font-size: 12px; color: var(--text-3); }
.lv-fd.att { color: #ffb46b; } .lv-fd.att .n { color: #ffb46b; }
.lv-fd-sep { height: 1px; background: rgba(150,175,230,.1); margin: 8px 4px; }
.lv-lib-note { margin-top: auto; padding: 12px 8px 4px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.lv-lib-srch { display: flex; gap: 8px; align-items: center; padding: 12px 12px 6px; }
.lv-lib-bar { display: flex; align-items: center; gap: 12px; padding: 4px 14px 8px; font-size: 12px; color: var(--text-3); }
.lv-lib-bar .lv-link:last-child { margin-left: auto; }
.lv-lib-items { display: flex; flex-direction: column; overflow: auto; }
.lv-it { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-top: 1px solid rgba(150,175,230,.08); cursor: pointer; }
.lv-it:hover { background: rgba(255,255,255,.03); }
.lv-it.on { background: rgba(47,107,255,.14); }
.lv-it b { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-it > span { font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; min-width: 0; }
.lv-it > span > template, .lv-it > span { overflow: hidden; }
.lv-it .st { margin-left: auto; flex: none; }
.lv-it-gaps { cursor: default; background: rgba(255,180,107,.06); }
.lv-it-gaps:hover { background: rgba(255,180,107,.06); }
.lv-gap-row { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-top: 6px; flex-wrap: wrap; }
.lv-gap-row .lv-sel { flex: none; width: 150px; padding: 5px 8px; font-size: 12.5px; }
.lv-tag.blue { background: rgba(79,149,255,.16); color: #8fbcff; }
.lv-en-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; border-bottom: 1px solid rgba(150,175,230,.1); flex-wrap: wrap; }
.lv-en-title { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 20px; font-weight: 800; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; outline: none; }
.lv-en-title:hover, .lv-en-title:focus, .lv-en-code:hover, .lv-en-code:focus { border-color: rgba(150,175,230,.25); background: rgba(13,20,40,.6); }
.lv-en-code { width: 120px; font: inherit; font-size: 13px; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; outline: none; }
.lv-en-save { white-space: nowrap; }
.lv-en-h .r { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.lv-seg .seg-item { padding: 5px 12px; font-size: 12.5px; position: relative; }
.lv-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ffb46b; }
.lv-gap { margin: 12px 20px 0; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255,180,107,.1); border: 1px solid rgba(255,180,107,.35); font-size: 13.5px; flex-wrap: wrap; }
.lv-gap b { color: #ffb46b; flex: none; }
.lv-gap .r { margin-left: auto; display: flex; gap: 12px; }
.lv-en-body { margin: 14px 20px 6px; width: calc(100% - 40px) !important; min-height: 320px; font-size: 16px; line-height: 1.85; resize: vertical; }
.lv-en-hint { padding: 0 20px 6px; }
.lv-docs2 { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 4px; }
.lv-doc2 { border: 1px solid rgba(150,175,230,.14); border-radius: 12px; padding: 10px 12px; background: rgba(13,20,40,.5); }
.lv-doc2.failed { border-color: rgba(239,68,68,.4); }
.lv-doc2-h { display: flex; align-items: center; gap: 10px; }
.lv-doc2-acts { display: flex; gap: 14px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.lv-pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13.5px; line-height: 1.7; color: var(--text-2); margin: 10px 0 0; max-height: 360px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: rgba(4,8,20,.5); }
.lv-tidy { margin-top: 10px; border-top: 1px dashed rgba(150,175,230,.2); padding-top: 10px; }
.lv-tidy-t { font-size: 13px; font-weight: 600; color: #8fbcff; }
.lv-tidy .lv-pre { max-height: 480px; color: var(--text); }
.lv-add { margin: 12px 20px 16px; border: 1px dashed rgba(110,160,255,.45); border-radius: 12px; background: rgba(47,107,255,.05); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.lv-add-t { font-size: 13px; color: #8fbcff; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-add-t .btn-mini { margin-left: auto; }
.lv-add-row { display: flex; gap: 8px; align-items: stretch; }
.lv-drop { flex: 0 0 200px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; border: 1px dashed rgba(110,160,255,.5); border-radius: 10px; color: #8fbcff; font-size: 13px; cursor: pointer; }
.lv-add-ta { flex: 1; min-height: 52px; }
.lv-add-row .btn-mini { align-self: center; white-space: nowrap; }
.lv-en-topics { margin: 0 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.lv-lib-blank { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 20px; text-align: center; }
.lv-lib-comp { padding: 16px 20px; gap: 12px; }
.lv-comp-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lv-comp-h h3 { margin: 0; font-size: 20px; font-weight: 800; }
.lv-comp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lv-row { display: flex; gap: 8px; align-items: center; }
.lv-test { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); font-size: 13.5px; line-height: 1.7; }
.lv-test.bad { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.35); }
.lv-test b { margin-right: 8px; }
.lv-card-text { font-size: 20px; line-height: 1.8; white-space: normal; }
/* 手机：一次一栏 */
@media (max-width: 899px) {
  .lv-lib > .lv-lib-nav, .lv-lib > .lv-lib-list, .lv-lib > .lv-lib-main, .lv-lib > .lv-lib-comp { display: none; }
  .lv-lib.pane-nav > .lv-lib-nav, .lv-lib.pane-list > .lv-lib-list, .lv-lib.pane-main > .lv-lib-main, .lv-lib.pane-main > .lv-lib-comp { display: flex; }
  .lv-lib-nav .lv-fds { flex-direction: row; flex-wrap: wrap; } .lv-fd-sep { display: none; }
  .lv-en-body { margin: 12px; width: calc(100% - 24px) !important; min-height: 240px; }
  .lv-add, .lv-en-topics, .lv-docs2, .lv-gap { margin-left: 12px; margin-right: 12px; }
  .lv-add-row { flex-direction: column; } .lv-drop { flex: none; }
}
@media (min-width: 900px) {
  .lv-lib { grid-template-columns: 170px 300px minmax(0, 1fr); align-items: stretch; height: calc(100dvh - 130px); min-height: 520px; }
  .lv-lib-nav, .lv-lib-list, .lv-lib-main, .lv-lib-comp { min-height: 0; overflow: auto; }
  .lv-lib-comp { grid-column: 2 / -1; }
  .lv-comp-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) and (max-width: 1239px) { .lv-lib { grid-template-columns: 150px 240px minmax(0, 1fr); } }

/* ===== 直播助手 · 开播前页（2026-10-10）===== */
.lv-gh.tone-blue { color: #8fbcff; } .lv-gh.tone-blue i { background: #4f95ff; box-shadow: 0 0 0 4px rgba(79,149,255,.15); }
.lv-gh-r { margin-left: auto; display: flex; gap: 12px; letter-spacing: 0; }
.lv-presets { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 4px; }
.lv-preset { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.lv-preset-n { color: var(--text); font-weight: 600; cursor: pointer; } .lv-preset-n:hover { color: var(--brand); }
.lv-preset .bad { margin-left: auto; }
.lv-psearch { position: relative; }
.lv-pdrop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #0d1428; border: 1px solid rgba(150,175,230,.25); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); max-height: 280px; overflow: auto; padding: 4px; }
.lv-pd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.lv-pd:hover { background: rgba(47,107,255,.16); }
.lv-pd-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-st { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none; display: inline-block; }
.lv-st.gap { background: #ffb46b; } .lv-st.empty { background: #4d5b7c; } .lv-st.pending { background: #8fbcff; }
.lv-sel { display: flex; flex-direction: column; gap: 6px; }
.lv-si { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; }
.lv-si-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lv-si-m { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 12.5px; flex: none; }
.lv-si-m .lv-link.off { opacity: .3; pointer-events: none; }
.lv-link.warn { color: #ffb46b; }
.lv-label-r { margin-left: auto; font-size: 12.5px; }
.lv-label { display: flex; align-items: center; }
.lv-title-row { margin-top: 2px; } .lv-title-row .lv-label { flex: none; } .lv-title-row .input { padding: 7px 10px; font-size: 13px; color: var(--text-2); }
.lv-fold-h { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; flex-wrap: wrap; }
.lv-fold-h b { font-weight: 600; } .lv-fold-h .lv-link { margin-left: auto; }
.lv-fold .lv-form { margin-top: 8px; }
.lv-try { border: 1px dashed rgba(110,160,255,.45); background: rgba(47,107,255,.05); }
.lv-tryr { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.lv-tryr.masked { border-color: rgba(239,68,68,.45); }
.lv-tryr .lv-r-a { font-size: 17px; font-weight: 700; line-height: 1.5; }
.lv-tryr .lv-r-p { font-size: 14px; line-height: 1.8; color: var(--text-2); }
.lv-tryr .lv-r-p.general { color: var(--text-3); }
.lv-chk { display: flex; flex-direction: column; gap: 6px; }
.lv-ck { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); flex-wrap: wrap; }
.lv-ck > i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; flex: none; background: rgba(148,163,184,.18); color: var(--text-3); }
.lv-ck.ok > i { background: rgba(74,222,128,.18); color: #4ade80; } .lv-ck.warn > i { background: rgba(255,180,107,.18); color: #ffb46b; } .lv-ck.bad > i { background: rgba(255,138,138,.18); color: #ff8a8a; }
.lv-ck > span:not(.r) { flex: 1; min-width: 0; }
.lv-ck .r { margin-left: auto; display: flex; gap: 10px; font-size: 12.5px; }
.lv-ck .lv-guide { flex-basis: 100%; }
.lv-kv div { display: flex; gap: 12px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid rgba(150,175,230,.08); }
.lv-kv div:last-child { border-bottom: 0; } .lv-kv span { color: var(--text-3); flex: none; width: 64px; } .lv-kv b { font-weight: 500; line-height: 1.5; } .lv-kv b.warn { color: #ffb46b; }

/* ===== 快捷格自由化（2026-10-10）：编辑网格 / 弹层 / 直播中颜色与倒计时 ===== */
.lv-qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lv-qcell { position: relative; min-height: 64px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); padding: 8px 8px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; cursor: pointer; text-align: center; }
.lv-qcell b { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.lv-qcell span { font-size: 11px; color: var(--text-3); }
.lv-qcell:hover { border-color: var(--brand); }
.lv-qcell.empty { border-style: dashed; opacity: .55; } .lv-qcell.empty b { font-weight: 500; color: var(--text-3); }
.lv-qord { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--text-4, #4d5b7c); font-style: normal; }
.lv-qcell.product, .lv-qcell.tone-orange { border-color: rgba(251,191,36,.45); background: rgba(245,158,11,.1); }
.lv-qcell.card, .lv-qcell.phrase, .lv-qcell.tone-green { border-color: rgba(74,222,128,.45); background: rgba(34,197,94,.1); }
.lv-qcell.notes, .lv-qcell.tone-blue { border-color: rgba(79,149,255,.5); background: rgba(26,86,219,.12); }
.lv-qcell.ai, .lv-qcell.tone-purple { border-color: rgba(192,132,252,.5); background: rgba(147,51,234,.12); }
.lv-qcell.timer { border-color: rgba(251,113,133,.5); background: rgba(244,63,94,.1); }
.lv-qcell.action, .lv-qcell.tone-gray { border-color: rgba(150,175,230,.3); background: rgba(148,163,184,.1); }
.lv-qgrid-f { display: flex; gap: 14px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.lv-qsheet { max-width: 640px; }
.lv-qbody { display: flex; flex-direction: column; gap: 10px; }
.lv-qbody > * { flex: none; }
.lv-qkinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lv-qkind { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.lv-qkind b { font-size: 13.5px; } .lv-qkind span { font-size: 11.5px; color: var(--text-3); }
.lv-qkind.on { border-color: var(--brand); background: rgba(47,107,255,.14); }
.lv-qlist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.lv-qitem { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.lv-qitem b { font-size: 13.5px; flex: none; } .lv-qitem span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-qitem.on { border-color: var(--brand); background: rgba(47,107,255,.14); }
.lv-qitem.add { border-style: dashed; }
.lv-qnew { display: flex; flex-direction: column; gap: 8px; }
.lv-qpick { border: 1px dashed rgba(110,160,255,.4); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: auto; }
.lv-qpara { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.lv-qpara input { margin-top: 3px; }
.lv-qmeta { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end; border-top: 1px solid var(--line); padding-top: 10px; }
.lv-tones { display: flex; gap: 8px; }
.lv-tone { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: inline-block; }
.lv-tone.on { border-color: #fff; }
.lv-tone.tone-auto { background: linear-gradient(135deg, #f59e0b 25%, #22c55e 25% 50%, #3b82f6 50% 75%, #a855f7 75%); }
.lv-tone.tone-orange { background: #f59e0b; } .lv-tone.tone-green { background: #22c55e; } .lv-tone.tone-blue { background: #3b82f6; } .lv-tone.tone-purple { background: #a855f7; } .lv-tone.tone-gray { background: #64748b; }
.lv-qfoot { display: flex; gap: 14px; align-items: center; }
.lv-qfoot .btn-primary { margin-left: auto; width: auto !important; min-width: 120px; }
/* 直播中：按种类 / 颜色上色；三排时格子矮一点 */
.lv-ctl-row.prods.three { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.lv-page.lv-live .lv-ctl .lv-big.card { background: linear-gradient(180deg, #143a2a, #0d261b); border-color: #1f7a4f; color: #c9f5dd; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #06150e, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.ai { background: linear-gradient(180deg, #3a1d5e, #251240); border-color: #7c3aed; color: #e9d5ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #150a26, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.timer { background: linear-gradient(180deg, #4a1a24, #2e1016); border-color: #be123c; color: #fecdd3; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #1a0a0e, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.timer.ticking { animation: lv-pulse 1.2s ease-in-out infinite; }
.lv-page.lv-live .lv-ctl .lv-big.action { background: linear-gradient(180deg, #2a3347, #1b2233); border-color: #4b5a78; color: #dbe4f5; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #0c1019, 0 6px 14px rgba(0,0,0,.35); }
.lv-page.lv-live .lv-ctl .lv-big.tone-orange { background: linear-gradient(180deg, #4a3312, #2e200b); border-color: #8a5e1c; color: #ffe3b0; }
.lv-page.lv-live .lv-ctl .lv-big.tone-green { background: linear-gradient(180deg, #143a2a, #0d261b); border-color: #1f7a4f; color: #c9f5dd; }
.lv-page.lv-live .lv-ctl .lv-big.tone-blue { background: linear-gradient(180deg, #1b2f6b, #132148); border-color: #3457b8; color: #d6e2ff; }
.lv-page.lv-live .lv-ctl .lv-big.tone-purple { background: linear-gradient(180deg, #3a1d5e, #251240); border-color: #7c3aed; color: #e9d5ff; }
.lv-page.lv-live .lv-ctl .lv-big.tone-gray { background: linear-gradient(180deg, #2a3347, #1b2233); border-color: #4b5a78; color: #dbe4f5; }
.lv-page.lv-live .lv-ctl .lv-big.card span, .lv-page.lv-live .lv-ctl .lv-big.ai span, .lv-page.lv-live .lv-ctl .lv-big.timer span, .lv-page.lv-live .lv-ctl .lv-big.action span { color: inherit; opacity: .75; }
.lv-card-timer { font-size: 40px; text-align: center; padding: 40px 0; }
@keyframes lv-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.lv-qsheet .sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; font-size: 15px; }
.lv-qsheet .sheet-body { padding-top: 2px; }
@media (max-width: 899px) { .lv-qkinds { grid-template-columns: repeat(2, 1fr); } .lv-qmeta { grid-template-columns: 1fr; } }
.lv-qsearch { margin-bottom: 2px; }
.lv-qlist { max-height: 260px; }
.lv-qmore { padding: 6px 4px; }

/* ===== 直播助手 · 回答库（2026-10-11）===== */
.lv-lb { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.lv-lb-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lv-lb-q { flex: 1 1 220px; } .lv-lb-sel { flex: 0 0 200px; }
.lv-lb-n { flex-basis: 100%; line-height: 1.6; }
.lv-an-list { display: flex; flex-direction: column; gap: 10px; }
.lv-an { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: linear-gradient(180deg, rgba(16,25,48,.9), rgba(9,15,30,.9)); display: flex; flex-direction: column; gap: 8px; }
.lv-an.pinned { border-color: rgba(74,222,128,.45); }
.lv-an.stale { border-color: rgba(255,180,107,.45); opacity: .85; }
.lv-an-new { border-style: dashed; border-color: rgba(110,160,255,.5); }
.lv-an-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-an-h b { font-size: 15px; }
.lv-an-q { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 16px; font-weight: 700; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; outline: none; }
.lv-an-q:hover, .lv-an-q:focus { border-color: rgba(150,175,230,.25); background: rgba(13,20,40,.6); }
.lv-an-acts { margin-left: auto; display: flex; gap: 12px; }
.lv-an-a { font-weight: 600; }
.lv-an-sp { line-height: 1.7; resize: vertical; }
.lv-prewarm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(47,107,255,.06); border: 1px dashed rgba(110,160,255,.4); }
.lv-prewarm .muted-sm { flex: 1 1 260px; line-height: 1.5; }
@media (min-width: 900px) { .lv-lb { padding: 0 32px; } }
\n
/* ===== 叫卖歌（2026-11-02，设计稿 https://claude.ai/artifact/KbAonugLwyfAFsqaedXZ8Q ）===== */
.hg-card.soon { opacity: .45; cursor: default; }
.hg-card.soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.hg-new { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.5; color: #fff; background: var(--brand); vertical-align: 2px; }
.jg-chips { flex-wrap: wrap; margin-top: 8px; }
.jg-chips .chip { height: 28px; padding: 0 11px; font-size: 12.5px; cursor: pointer; }
textarea.search-box.jg-ta { height: auto; min-height: 64px; padding: 10px 14px; resize: none; line-height: 1.5; }
.jg-fold { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 12px; }
.jg-fold summary { list-style: none; font-size: 13px; color: var(--brand); cursor: pointer; }
.jg-fold summary::-webkit-details-marker { display: none; }
.jg-price-note { padding: 12px 14px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); border-top: 1px solid var(--line-soft); }
.jg-price-note b { color: var(--text); }
.jg-lb { font-size: 11.5px; color: var(--text-3); letter-spacing: .1em; margin-top: 4px; }
.jg-ln { height: 42px; font-size: 15px; }
.jg-ln.warn { border-color: rgba(255,180,107,.6); background: rgba(255,180,107,.08); }
.jg-issue { font-size: 11.5px; color: #ffd39a; line-height: 1.5; margin-top: -4px; }
.jg-foot { display: flex; flex-direction: column; gap: 8px; }
.scroll-sheet .jg-foot .btn-plain { width: 100%; height: 40px; }
.jg-lyrics .song-lyric-line { font-size: 13px; line-height: 1.8; color: var(--text-2); }
.form-sheet .sheet-title .block-sub { display: block; margin: 3px 0 0; font-weight: 400; }
/* 叫卖录音（2026-11-03） */
textarea.search-box.va-ta { min-height: 128px; }
.va-draft-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.va-draft-row .btn-plain { height: 36px; padding: 0 14px; }
.va-draft-btn { height: 40px; padding: 0 18px; font-size: 14px; width: auto; flex: none; }
.va-draft-btn:disabled { opacity: .45; box-shadow: none; }

.jg-sp { min-height: 180px; line-height: 1.7; font-size: 15px; resize: vertical; }