/* ==========================================================================
   工作云 work.yun · 设计系统（经典黑）
   色值取自 dream.ai666.net 的 [data-theme=dark] 主题变量实测：
   canvas #0a0a0a / surface #111·#181818·#1c1c1c / line .08·.12·.22
   text #f5f5f5·#a3a3a3·#737373 / 主按钮反相 #dcdcdc + #1a1a1a 字
   点阵 22px 网格 radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.5px)
   规范依据：vercel-labs web-design-guidelines（语义标签 / focus-visible / 显式 img 尺寸 /
   transform-opacity 动效 / prefers-reduced-motion / tabular-nums / 省略号 …）
   ========================================================================== */

:root {
  --canvas: #0a0a0a;
  --surface: #111111;
  --surface-2: #181818;
  --surface-3: #1c1c1c;
  --ink: #f5f5f5;
  --ink-2: #a3a3a3;
  --ink-3: #737373;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .22);
  --hover: #242424;
  --active: #2a2a2a;
  --btn: #dcdcdc;
  --btn-h: #ebebeb;
  --btn-ink: #1a1a1a;
  --teal: #4fd3d1;
  --teal-soft: rgba(79, 211, 209, .14);
  --danger: #ff8a7e;
  --dot: rgba(255, 255, 255, .17);
  --dark: #05060a;
  --dark-2: #101014;
  --dark-3: #1a1a20;
  --dark-ink: #f5f5f5;
  --dark-ink-2: #a3a3ad;
  --dark-ink-3: #73737b;
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .36), 0 14px 36px rgba(0, 0, 0, .36);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .52);
  --maxw: 1440px;
  --pad: 32px;
  --gap: 16px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 0, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/1.6 "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
::selection { background: rgba(255, 255, 255, .22); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  padding: 10px 16px; background: var(--surface-3); border: 1px solid var(--line-3);
  border-radius: var(--r-sm); box-shadow: var(--sh-2);
}
.skip:focus { left: 16px; top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 14px; height: 14px; }
/* 注意：不要再叫 .lg —— .lg 是积分明细页的容器类，图标套上会带上 116px 内边距 */
.ico.xl { width: 22px; height: 22px; }

/* ============================== 黑底点阵 + 跟随鼠标的光块 ============================== */
main, .mast, .foot { position: relative; z-index: 1; }

.canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.spot {
  position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 56px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12) 55%, transparent 78%);
  filter: blur(26px); mix-blend-mode: screen; opacity: 0; will-change: transform;
  transition: opacity .28s var(--ease);
}
body.pointing .spot { opacity: 1; }

/* ============================== 左上角抽屉：默认合上，点 ☰ 展开；登录/积分在栏底 ============================== */
.nav-toggle {
  position: fixed; left: 16px; top: 16px; z-index: 70;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; color: #e6e6e6;
  background: rgba(10, 12, 16, .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .22s var(--ease-soft), color .22s var(--ease-soft);
}
.nav-toggle:hover { background: rgba(20, 24, 30, .78); color: #fff; }
.nav-mask { position: fixed; inset: 0; z-index: 79; background: rgba(4, 4, 6, .52); }
.nav-drawer {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 80; width: 240px;
  display: flex; flex-direction: column; padding: 16px 14px;
  background: rgba(9, 12, 16, .9);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-right: 1px solid var(--line-2);
  transform: translateX(-102%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
}
body.nav-open .nav-drawer { transform: none; box-shadow: var(--sh-3); }
.nav-drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px;
  font-size: 15.5px; font-weight: 700;
}
.brand-icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: conic-gradient(from 205deg, #4fd3d1, #2fa9c9 42%, #96f0e4 76%, #4fd3d1);
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 14px rgba(79, 211, 209, .28);
}
.drawer-nav { flex: 1; display: grid; gap: 4px; align-content: start; }
.dtab {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px;
  border-radius: 11px; font-size: 14.5px; letter-spacing: .02em; color: var(--ink-2); white-space: nowrap;
  transition: background .22s var(--ease-soft), color .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
}
.dtab .ico { color: var(--ink-3); transition: color .2s; }
.dtab:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.dtab:hover .ico { color: #d4d4d8; }
.dtab[aria-current="page"] {
  color: #eafffb; font-weight: 600;
  background: linear-gradient(180deg, rgba(79, 211, 209, .2), rgba(79, 211, 209, .07));
  box-shadow: inset 0 0 0 1px rgba(79, 211, 209, .36);
}
.dtab[aria-current="page"] .ico { color: #7fe7e5; }
.dtab.soon { color: var(--ink-3); cursor: default; }
.dtab.soon:hover { background: none; color: var(--ink-3); }
.dtab.soon em {
  margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .05em;
  padding: 2px 7px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .03); color: #8f8f8f;
}
.drawer-foot { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.wallet {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 10px; background: rgba(79, 211, 209, .08);
  font-size: 13.5px; font-weight: 600; color: var(--teal);
  transition: background .22s var(--ease-soft);
}
.wallet:hover { background: rgba(79, 211, 209, .16); }
.wallet .ico { stroke-width: 2; fill: currentColor; }
.login {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 42px; padding: 0 18px; border-radius: 10px;
  background: var(--btn); color: var(--btn-ink); font-size: 14px; font-weight: 600;
  max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .22s var(--ease-soft);
}
.login:hover { background: var(--btn-h); }

/* ============================== 首页首屏：星空视频 + 对话框 + 四车间（照 aigcc.vip 配方） ============================== */
.hero-bg-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 0; pointer-events: none; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3), rgba(0, 0, 0, .7) 80%, rgba(0, 0, 0, .95)); }
.hero { position: relative; z-index: 1; }
.hero-in {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* min-height 从 68vh 收到 56vh：内容垂直居中会在下方留一大片空白，
     把下面四张卡顶得很低（短语到卡片之间有 100 多像素空档） */
  gap: 26px; min-height: 56vh; padding: 96px 20px 8px; text-align: center;
}
.hero-in h1 {
  margin: 0; font-size: 56px; font-weight: 700; letter-spacing: .08em; line-height: 1.2;
  background: linear-gradient(135deg, #e8f6f5, #7fe7e5, #4fd3d1 30%, #c9f7f5 45%, #eafffe 55%, #6fe3e1, #9ff0ee, #d7fbfa);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 20px rgba(79, 211, 209, .4)) drop-shadow(0 0 40px rgba(79, 211, 209, .22));
  animation: hero-shimmer 6s ease-in-out infinite;
}
@keyframes hero-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-in .lede { margin: 0; max-width: 560px; font-size: 15px; letter-spacing: .06em; color: rgba(224, 232, 232, .75); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.hero .zone { margin-top: 4px; width: min(680px, 100%); }
.hero .starters { margin-top: 2px; }
.hero .starter { background: rgba(10, 14, 18, .66); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* 四车间：深色实底卡 + 顶部高光线 + 悬停光束（aigcc 同款结构） */
.cards-row {
  position: relative; z-index: 1; display: flex; gap: 18px; align-items: stretch;
  max-width: min(1280px, 96vw); margin: 0 auto; padding: 0 20px 24px;
}
.hcard { flex: 1; min-width: 0; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.hcard-in {
  position: relative; height: 92px; display: flex; align-items: center; padding: 0 20px;
  border-radius: 18px; overflow: hidden;
  background: #ffffff12; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .28);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
/* 实底色层：不是毛玻璃，视频透不过来 */
.hcard-in::before { content: ''; position: absolute; inset: 0; background: var(--card-bg); opacity: .88; z-index: 0; transition: opacity .3s, transform .4s; }
/* 顶部一条高光细线 */
.hcard-in::after {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
}
.hc-beam {
  position: absolute; top: 0; bottom: 0; width: 55%; left: -75%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skew(-18deg); transition: left .65s cubic-bezier(.4, 0, .2, 1);
}
.hc-body { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.hc-body b { font-size: 15.5px; font-weight: 600; letter-spacing: .01em; color: #fff; }
.hc-body i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; color: rgba(255, 255, 255, .55); transition: color .3s, transform .3s; }
.hc-badge {
  position: absolute; top: 10px; right: 12px; z-index: 3; height: 18px; padding: 0 8px;
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em; color: rgba(255, 255, 255, .66);
}
.hc-badge.live { background: linear-gradient(135deg, #2fc9c7, #1fa8ae); border-color: transparent; color: #04211f; font-weight: 700; }
a.hcard { cursor: pointer; }
a.hcard:hover .hcard-in { transform: translateY(-4px); border-color: rgba(255, 255, 255, .3); box-shadow: inset 0 1px rgba(255, 255, 255, .18), 0 18px 44px rgba(0, 0, 0, .4); }
a.hcard:hover .hcard-in::before { opacity: 1; }
a.hcard:hover .hc-beam { left: 135%; }
a.hcard:hover .hc-arrow { color: #fff; transform: translateY(-50%) translate(4px); }
.hcard.soon .hc-body b { color: rgba(255, 255, 255, .88); }
.hcard.soon { cursor: default; }
/* 视频是 fixed 的，首屏以下的章节必须各自带层级，否则整块被视频盖住（aigcc 同款处理） */
.band, .wall, .cta-end { position: relative; z-index: 1; }
/* aigcc 同款移动端断点：标题缩小、四卡两行 */
@media (max-width: 768px) {
  .hero-in { min-height: 56vh; padding-top: 88px; }
  .hero-in h1 { font-size: 32px; letter-spacing: .04em; }
  .hero-in .lede { font-size: 14px; }
  .cards-row { flex-wrap: wrap; }
  .hcard { flex: 1 1 45%; }
  .hcard-in { height: 84px; padding: 0 16px; }
}

/* ============================== 顶部场景轮播 ============================== */
.rail { padding: 22px 0 4px; }
.rail-in { position: relative; }
.rail-track {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px;
  justify-content: center; scrollbar-width: none; scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.rail-track::-webkit-scrollbar { display: none; }
.scene {
  position: relative; flex: 0 0 auto; width: 296px; height: 168px; overflow: hidden;
  border-radius: var(--r-md); background: var(--dark-2); color: var(--dark-ink);
  box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255, 255, 255, .07); text-align: left;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
}
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .96; }
.scene::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0) 0%, rgba(5, 6, 10, .24) 48%, rgba(5, 6, 10, .88) 100%);
}
.scene .txt { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 14px 16px; }
.scene h3 { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.scene p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.scene .flag {
  position: absolute; left: 12px; top: 12px; z-index: 2; height: 22px; padding: 0 9px;
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
}
.scene .flag.live { background: var(--teal); border-color: var(--teal); color: #062120; }
.scene[aria-current="true"] { transform: translateY(-4px) scale(1.02); box-shadow: var(--sh-3), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.scene:not([aria-current="true"]) { opacity: .82; }
.scene:hover { opacity: 1; }
.rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px;
  border-radius: var(--r-pill); background: rgba(24, 24, 24, .9); color: var(--ink);
  border: 1px solid var(--line-2);
  display: grid; place-items: center; box-shadow: var(--sh-2); opacity: 0;
  transition: opacity .16s var(--ease), background .16s var(--ease);
}
.rail-in:hover .rail-nav, .rail-nav:focus-visible { opacity: 1; }
.rail-nav:hover { background: var(--active); }
.rail-nav.prev { left: 6px; } .rail-nav.next { right: 6px; }
.rail-dots { display: flex; gap: 5px; justify-content: center; padding-top: 2px; }
.rail-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-3); transition: background .16s var(--ease), width .16s var(--ease); }
.rail-dots i.on { width: 16px; border-radius: var(--r-pill); background: var(--ink); }

/* ============================== 生成台 ============================== */
.desk { padding-top: 34px; padding-bottom: 6px; text-align: center; }
.desk h1 { font-size: 44px; line-height: 1.18; font-weight: 650; letter-spacing: -.035em; }
.desk .lede { margin: 12px auto 0; max-width: 520px; font-size: 14px; color: var(--ink-2); }

/* 总台：收起是一颗会呼吸的玻璃胶囊，展开后一直是面板，只有点到框外才收起（.open 由 JS 管） */
.zone {
  position: relative;
  margin: 26px auto 0; max-width: 680px; text-align: left;
  background: rgba(8, 16, 18, .58);
  border: 1px solid rgba(79, 211, 209, .2);
  border-radius: var(--r-pill);
  box-shadow: 0 0 22px rgba(79, 211, 209, .07), 0 4px 20px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  overflow: hidden;
  animation: zone-breath 3.5s ease-in-out infinite;
  transition: max-width .35s cubic-bezier(.4, 0, .2, 1), border-radius .35s cubic-bezier(.4, 0, .2, 1),
              box-shadow .35s, border-color .35s, background-color .35s;
}
@keyframes zone-breath {
  0%, 100% { box-shadow: 0 0 22px rgba(79, 211, 209, .07), 0 4px 20px rgba(0, 0, 0, .28); border-color: rgba(79, 211, 209, .18); }
  50% { box-shadow: 0 0 38px rgba(79, 211, 209, .14), 0 4px 26px rgba(0, 0, 0, .32); border-color: rgba(79, 211, 209, .36); }
}
.zone.open {
  max-width: 760px; border-radius: 26px;
  border-color: rgba(79, 211, 209, .38);
  background: rgba(6, 12, 14, .78);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
}
/* 展开时内部三层依次浮现，收起时整块淡出感由过渡承担 */
.zone.open .zone-tabs, .zone.open .route, .zone.open .zone-foot { animation: zone-rise .32s cubic-bezier(.4, 0, .2, 1) both; }
.zone.open .zone-tabs { animation-delay: .02s; }
.zone.open .route { animation-delay: .06s; }
.zone.open .zone-foot { animation-delay: .1s; }
@keyframes zone-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zone-tabs, .route, .zone-foot { display: none; }
.zone.open .zone-tabs { display: flex; }
.zone.open .zone-foot { display: flex; }
.zone.open .route { display: block; }
.zone-files { display: none; }
.zone-files:not(:empty) { display: flex; padding-right: 62px; }

.zone-tabs { align-items: center; gap: 6px; padding: 10px 12px 0; }
.zone-tab {
  height: 34px; padding: 0 14px; border-radius: var(--r-xs);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
.zone-tab:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .05); color: var(--ink); }
.zone-tab[aria-selected="true"] {
  background: rgba(255, 255, 255, .09); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.zone-main { min-height: 59px; padding: 18px 57px 18px 20px; transition: padding .35s cubic-bezier(.4, 0, .2, 1); }
.zone.open .zone-main { min-height: 0; padding: 15px 20px 8px; }
.ph-wrap { position: relative; }
#ask {
  display: block; width: 100%; max-height: 200px; padding: 0; border: 0; outline: none; resize: none;
  background: transparent; color: var(--ink); position: relative; z-index: 1;
  font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.55;
  transition: min-height .35s cubic-bezier(.4, 0, .2, 1);
}
.zone.open #ask { min-height: 64px; }
/* 打字机占位语：逐字出现，光标用一根实心块 */
.ph {
  position: absolute; left: 0; top: 0; right: 12px; z-index: 2; pointer-events: none;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-3);
  opacity: 1; transition: opacity .16s var(--ease);
}
.ph b {
  display: inline-block; width: 7px; height: 1.02em; margin-left: 2px; vertical-align: -.16em;
  background: var(--ink-2); animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.zone.has .ph { opacity: 0; }
.ph-wrap:focus-within .ph b { display: none; }

/* 收起时贴在胶囊右端，展开后落到面板右下角（原来 Ctrl+Enter 提示的位置） */
.run {
  position: absolute; right: 9px; bottom: 9px;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(36, 36, 36, .85); color: var(--ink-2);
  transition: background .22s var(--ease-soft), color .22s var(--ease-soft),
              right .35s cubic-bezier(.4, 0, .2, 1), bottom .35s cubic-bezier(.4, 0, .2, 1);
}
.zone.open .run { right: 12px; bottom: 6px; }
.run:hover { background: var(--active); color: var(--ink); }
.zone.has .run { background: var(--btn); color: var(--btn-ink); }
.zone.has .run:hover { background: var(--btn-h); color: #000; }
.zone.has .run:active { transform: translateY(1px); }

.route { padding: 0 20px 5px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.route strong { color: var(--ink-2); font-weight: 600; }
.route .num { color: var(--teal); font-weight: 600; }
.zone-foot { align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 62px 12px 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px;
  border-radius: 6px; background: #1f1f1f; color: var(--ink-2); font-size: 11.5px;
  cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.chip:hover { background: #2a2a2a; color: var(--ink); }
.chip b { color: var(--ink); font-weight: 600; }
.chip .caret { width: 11px; height: 11px; stroke-width: 2.4; color: var(--ink-3); }

/* 上传的资料条：贴在输入区和底栏之间，空了就不占位 */
.zone-files { flex-wrap: wrap; gap: 6px; padding: 2px 20px 8px; }
.att {
  display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: 26px;
  padding: 0 4px 0 7px; border: 1px solid var(--line-2); border-radius: 6px;
  background: #101010; color: var(--ink-2); font-size: 11.5px;
}
.att .ico { width: 12px; height: 12px; flex: none; color: var(--ink-3); }
.att .th { width: 22px; height: 22px; flex: none; border-radius: 3px; object-fit: cover; background: #1f1f1f; }
.att em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att i { font-style: normal; color: var(--ink-3); }
.att-x {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px;
  border-radius: 4px; color: var(--ink-3); font-size: 14px; line-height: 1; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.att-x:hover { background: #262626; color: var(--ink); }
.att.up { color: var(--ink-3); }
.att.up .att-x { pointer-events: none; opacity: .4; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.starter {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--ink-2); box-shadow: var(--sh-1);
  transition: border-color .14s var(--ease), color .14s var(--ease), background-color .14s var(--ease);
}
.starter:hover { border-color: var(--line-3); color: var(--ink); background: var(--surface-2); }

/* ============================== 分区标题 ============================== */
.band { padding-top: 56px; }
.band-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.band-h h2 { font-size: 17px; }
.band-h .sub { font-size: 12.5px; color: var(--ink-3); }
.band-h .more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-2); transition: color .14s var(--ease);
}
.band-h .more:hover { color: var(--ink); }

/* ============================== 卡片 + 左缩略图（参考站同款）============================== */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 技能货架：一行 6 个小竖卡，窄屏退回 4 列 */
.cards.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) { .cards.six { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card {
  display: flex; gap: 12px; padding: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.card:hover { box-shadow: var(--sh-2); border-color: var(--line-2); background: var(--surface-2); transform: translateY(-1px); }
.card .thumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.card .body { min-width: 0; }
.card h3 { font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card p { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 大封面卡：竖版封面按原始 3:4 完整显示，正文压在下方 */
.card.cover { display: block; padding: 0; overflow: hidden; }
.card.cover .thumb {
  width: 100%; height: auto; aspect-ratio: 3 / 4;
  border-radius: 0; object-fit: cover; object-position: center;
}
.card.cover .body { padding: 10px 12px 12px; }
.card.cover h3 { font-size: 13.5px; }
.card.cover p { font-size: 11.5px; line-height: 1.6; -webkit-line-clamp: 3; overflow: hidden; }
.card.cover .tbd {
  width: 100%; aspect-ratio: 3 / 4; display: grid; place-content: center; justify-items: center; gap: 9px;
  text-align: center; padding: 0 12px;
}
.card.cover .tbd em {
  font-style: normal; display: inline-flex; align-items: center; height: 21px; padding: 0 10px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); color: #1a1714;
  font-size: 10.5px; font-weight: 600; border: 1px solid rgba(0, 0, 0, .1);
}
.card.cover .tbd b { font-size: 14px; font-weight: 700; line-height: 1.35; }

/* ============================== 主打技能包 ============================== */
.hero-pack {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px;
  padding: 20px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.mosaic { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--dark); }
.mosaic img { position: absolute; object-fit: cover; border-radius: var(--r-xs); box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.mosaic .m1 { left: 0; top: 8%; width: 46%; height: 84%; transform: rotate(-3deg); z-index: 3; }
.mosaic .m2 { left: 40%; top: 0; width: 42%; height: 76%; z-index: 2; }
.mosaic .m3 { right: 0; bottom: 0; width: 38%; height: 62%; transform: rotate(4deg); z-index: 4; }
.mosaic .zip {
  position: absolute; z-index: 5; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); background: rgba(5, 6, 10, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); font-size: 12px; font-weight: 600;
  backdrop-filter: blur(8px);
}
.hero-pack .info { display: flex; flex-direction: column; padding: 6px 0 4px; }
.kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--teal); }
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hero-pack h3 { margin: 10px 0 0; font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.hero-pack .for { margin-top: 7px; font-size: 14px; color: var(--ink-2); }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.spec {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--ink-2);
}
.spec b { color: var(--ink); font-weight: 600; }
.proof { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12.5px; color: var(--ink-3); }
.faces { display: flex; }
.faces img { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -8px; object-fit: cover; }
.faces img:first-child { margin-left: 0; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 22px;
  border-radius: var(--r-pill); background: var(--btn); color: var(--btn-ink);
  font-size: 14px; font-weight: 600; transition: background .14s var(--ease), transform .14s var(--ease);
}
.btn:hover { background: var(--btn-h); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-3); }
.btn.ghost:hover { background: var(--hover); }
.actions .note { font-size: 12px; color: var(--ink-3); }

/* ============================== 更深一档的成品墙 ============================== */
.wall { margin-top: 62px; background: var(--dark); color: var(--dark-ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wall-in { padding: 40px var(--pad) 48px; max-width: var(--maxw); margin: 0 auto; }
.wall-h { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.wall-h h2 { font-size: 17px; color: #fff; }
.wall-h p { font-size: 12.5px; color: var(--dark-ink-3); margin-top: 5px; }
.wall-h .more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dark-ink-2); }
.wall-h .more:hover { color: #fff; }
.wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tile { display: block; }
.tile .frame {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: #0b0b0e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tile:hover .frame { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), var(--sh-3); }
.tile .frame img { width: 100%; height: 100%; object-fit: cover; }
.tile .no {
  position: absolute; right: 10px; top: 10px; height: 21px; padding: 0 8px; display: inline-flex; align-items: center;
  border-radius: var(--r-pill); background: rgba(5, 6, 10, .6); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px; color: #e4e4ea; backdrop-filter: blur(6px);
}
.tile.ghost .frame {
  display: grid; place-content: center; justify-items: center; gap: 9px; text-align: center;
  background: transparent; border: 1px dashed rgba(255, 255, 255, .2); box-shadow: none; padding: 0 12px;
}
.tile.ghost .frame b { font-size: 15px; font-weight: 600; color: #f2f2f4; }
.tile.ghost .frame span { font-size: 12px; color: var(--dark-ink-3); }
.tile.ghost:hover .frame { border-color: rgba(255, 255, 255, .46); box-shadow: none; }
.tile.ghost .frame .num { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--teal); }
.tile .cap { display: flex; align-items: center; gap: 8px; padding: 9px 2px 0; }
.tile .cap b { font-size: 13px; font-weight: 600; color: #f2f2f4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile .cap span { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--dark-ink-3); }
.wall-foot { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
.wall-foot .txt { font-size: 12.5px; color: var(--dark-ink-3); }

/* ============================== 页脚 ============================== */
.foot { padding-top: 34px; padding-bottom: 44px; font-size: 12px; color: var(--ink-3); }
.foot-in { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.foot-in .sep { margin-left: auto; }

/* ============================== 首页：四车间 / 四步 / 积分 / 尾屏 ============================== */
.shop { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); }
.shop-main {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 22px;
  padding: 24px; border-radius: var(--r-lg); color: var(--ink);
  background: radial-gradient(130% 150% at 100% 0%, rgba(79, 211, 209, .1), transparent 55%), linear-gradient(165deg, #101a1a, #0c0d0d 62%);
  border: 1px solid rgba(79, 211, 209, .22); box-shadow: var(--sh-2);
  transition: border-color .24s var(--ease-soft), box-shadow .24s var(--ease-soft), transform .24s var(--ease-soft);
}
.shop-main:hover { border-color: rgba(79, 211, 209, .42); box-shadow: var(--sh-3), 0 0 34px rgba(79, 211, 209, .08); transform: translateY(-2px); }
.shop-main img { width: 100%; max-height: 236px; object-fit: cover; border-radius: var(--r-md); align-self: center; box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.shop-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.shop-flag { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px; border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal); font-size: 12px; font-weight: 600; }
.shop-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.shop-name { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.shop-name .ico { color: var(--teal); }
.shop-desc { margin-top: 9px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.shop-specs { margin-top: 13px; font-size: 12.5px; color: var(--ink-3); }
.shop-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--teal); transition: color .24s var(--ease-soft); }
.shop-main:hover .shop-go { color: #7fe7e5; }
.shop-side { display: grid; gap: var(--gap); }
.biz { display: flex; align-items: center; gap: 13px; padding: 14px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.biz-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink-2); }
.biz-body { min-width: 0; }
.biz-body b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.biz-body i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.badge-soon { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .03); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; color: #8f8f8f; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.steps li { padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.steps .n { font-size: 26px; font-weight: 700; color: var(--teal); line-height: 1; }
.steps h3 { margin-top: 12px; font-size: 15px; }
.steps p { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.money-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.money-card .ico { color: var(--teal); }
.money-card b { display: block; margin-top: 9px; font-size: 15px; }
.money-card p { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.money-eg { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.money-eg b { color: var(--teal); font-weight: 600; }
.cta-end { padding-top: 68px; text-align: center; }
.cta-end h2 { font-size: 34px; letter-spacing: -.03em; }
.cta-end p { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.cta-btns { display: flex; justify-content: center; gap: 12px; margin-top: 24px; padding-bottom: 8px; }

/* ============================== 详情页 ============================== */
.crumbs { display: flex; align-items: center; gap: 8px; padding-top: 20px; font-size: 12.5px; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; padding: 16px 0 64px; }
.detail h1 { font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.detail .lede { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.shots.few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shots img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-1); }
.shotnote { margin-top: 9px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.panel { margin-top: 20px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.panel h4 { font-size: 12px; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.panel ul { margin-top: 10px; font-size: 13.5px; line-height: 2; }
.panel li { display: flex; gap: 8px; }
.panel li .ico { margin-top: 4px; color: var(--teal); }
.form { position: sticky; top: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.form h3 { font-size: 16px; }
.form .tip { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }
.field { margin-top: 16px; }
.field > label, .legend { display: block; margin-bottom: 7px; font-size: 12.5px; color: var(--ink-2); }
.field .req { color: var(--danger); }
.field input[type="text"], .field textarea {
  width: 100%; padding: 10px 12px; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); outline: none; font-size: 13.5px;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.field input[type="text"]::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input[type="text"]:hover, .field textarea:hover { border-color: var(--line-3); }
.field input[type="text"]:focus, .field textarea:focus { border-color: var(--line-3); background: var(--surface-3); }
.field textarea { min-height: 72px; resize: vertical; line-height: 1.6; }
fieldset { border: 0; padding: 0; margin: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: block; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--ink-2);
  transition: border-color .14s var(--ease), color .14s var(--ease), background-color .14s var(--ease);
}
.opt:hover span { border-color: var(--line-3); color: var(--ink); }
.opt input:checked + span { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }
.opt input:focus-visible + span { outline: 2px solid var(--btn); outline-offset: 2px; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--active); position: relative; transition: background .16s var(--ease); }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: var(--sh-1); transition: transform .16s var(--ease); }
.switch input:checked { background: var(--teal); }
.switch input:checked::after { transform: translateX(18px); background: #062120; }
.switch input:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.total { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.total strong { font-size: 16px; color: var(--ink); }
.total em { font-style: normal; color: var(--teal); font-weight: 600; }
.form .btn { width: 100%; height: 44px; }
.form .alt { display: block; width: 100%; margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.form .alt:hover { color: var(--ink); }

/* ============================== 干活页 ============================== */
.doing { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 28px; padding: 16px 0 64px; }
.flow { position: sticky; top: 20px; padding: 8px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.flow li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.flow li:last-child { border-bottom: 0; }
.flow .bead { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-3); display: grid; place-items: center; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.flow .t { font-size: 13.5px; color: var(--ink-2); }
.flow .t em { display: block; font-style: normal; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.flow li[data-s="run"] .bead { border-color: var(--teal); color: var(--teal); }
.flow li[data-s="run"] .t { color: var(--ink); font-weight: 600; }
.flow li[data-s="done"] .bead { background: var(--teal); border-color: var(--teal); color: #062120; }
.flow li[data-s="done"] .t { color: var(--ink); }
.out h2 { font-size: 20px; }
.out .lede { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.grid-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.grid-out figure { margin: 0; }
.grid-out img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); background: #0b0b0e; box-shadow: var(--sh-1); }
.grid-out figcaption { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.quotes { margin-top: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.quotes h4 { font-size: 12px; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.quotes blockquote { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--teal); font-size: 13px; line-height: 1.7; }
.quotes blockquote + blockquote { margin-top: 10px; }
.done-bar { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.done-bar .msg { font-size: 12.5px; color: var(--ink-3); }
[hidden] { display: none !important; }

/* ============================== 响应式 ============================== */
@media (max-width: 1180px) {
  .cards, .cards.three, .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-pack { grid-template-columns: minmax(0, 1fr); }
  .shop { grid-template-columns: minmax(0, 1fr); }
  .shop-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1040px) { .mark small { display: none; } }
@media (max-width: 900px) {
  :root { --pad: 18px; }
  .desk h1 { font-size: 28px; }
  .detail, .doing { grid-template-columns: minmax(0, 1fr); }
  .form, .flow { position: static; }
  .scene { width: 264px; }
  .shop-side { grid-template-columns: minmax(0, 1fr); }
  .money { grid-template-columns: minmax(0, 1fr); }
  .cta-end h2 { font-size: 26px; }
  .hero-in h1 { font-size: 34px; }
}
@media (max-width: 560px) {
  .cards, .cards.three, .cards.six, .shots, .grid-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .shop-main { grid-template-columns: minmax(0, 1fr); }
  .shop-main img { display: none; }
  .cta-btns { flex-wrap: wrap; }
  .hcard { flex: 1 1 100%; }
  .hero-in h1 { font-size: 28px; }
}
@media (hover: none) { .spot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .ph b { animation: none; }
  .spot { display: none; }
  .hero-bg { display: none; }
}

/* ---------- 账户浮层与真任务件（接线用，不动上面的冻结件） ---------- */
.ac-pop {
  position: fixed; right: 24px; top: 70px; z-index: 40; width: 322px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.ac-tabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-2); border-radius: var(--r-sm); }
.ac-tab { flex: 1; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); }
.ac-tab:hover { color: var(--ink); }
.ac-tab.on { background: rgba(255,255,255,.09); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.ac-pop .field:first-child { margin-top: 4px; }
.ac-err { min-height: 18px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--danger); }
.ac-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.ac-me { display: grid; gap: 10px; }
.ac-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.ac-line b { color: var(--ink); font-weight: 600; }
.btn.wide { width: 100%; justify-content: center; }
.run.busy { opacity: .55; pointer-events: none; }
.route.err { color: var(--danger); }
.grid-out.list { grid-template-columns: 1fr; gap: 10px; }
.task { display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); transition: background .14s var(--ease), border-color .14s var(--ease); }
.task:hover { background: var(--hover); border-color: var(--line-2); }
.task .tk { font-size: 12px; color: var(--teal); }
.task .tb { font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.task .ts { font-size: 12px; color: var(--ink-3); }
.task .ts.failed { color: var(--danger); }
.grid-out .fail { grid-column: 1 / -1; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.quotes .tg { display: block; margin-top: 6px; font-size: 12px; color: var(--teal); }

/* 比例/张数：自绘下拉（fixed 定位避开 .zone 的 overflow 裁剪，仍是 zone 后代所以不会收起工具条） */
.chip-wrap { position: relative; }
.chip.dd:focus-visible { outline: 2px solid var(--line-3); outline-offset: 1px; border-radius: 6px; }
.chip.dd[aria-expanded="true"] { background: var(--active); color: var(--ink); }
.chip.dd[aria-expanded="true"] .caret { transform: rotate(180deg); }
.chip .caret { transition: transform .16s var(--ease); }
.dd-menu {
  position: fixed; z-index: 40; min-width: 138px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-5px) scale(.97); transform-origin: top left;
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
}
.dd-menu.on { opacity: 1; visibility: visible; transform: none; }
.dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 31px; padding: 0 9px;
  border-radius: 7px; background: transparent; color: var(--ink-2);
  font-size: 12px; text-align: left; cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.dd-item + .dd-item { margin-top: 1px; }
.dd-menu.dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; min-width: 178px; }
.dd-menu.dd-grid .dd-item + .dd-item { margin-top: 0; }
.dd-item.cell { justify-content: center; padding: 0; text-align: center; font-variant-numeric: tabular-nums; }
.dd-item.span { grid-column: 1 / -1; }
.dd-item:hover { background: var(--hover); color: var(--ink); }
.dd-item:focus-visible { outline: none; background: var(--hover); color: var(--ink); }
.dd-item[aria-selected="true"] { background: var(--teal-soft); color: var(--teal); }
.dd-item .hint { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.dd-item[aria-selected="true"] .hint { color: var(--teal); opacity: .7; }
.zone .route.idle { display: none; }
.grid-out img { aspect-ratio: var(--ar, 3 / 4); }
@media (prefers-reduced-motion: reduce) {
  .dd-menu, .chip .caret { transition: none; }
  .dd-menu { transform: none; }
}

/* 只写文案档：正文直接读，备选标题压成一行灰字 */
.quotes blockquote .alt { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.quotes blockquote b { font-size: 14px; }

/* 总台追问卡：点开工后需求不清才展开，答完才扣分 */
.askback { margin: 0 12px 14px; padding: 14px 16px 13px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.askback p { margin: 0; }
.ab-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ab-h span { font-size: 11px; font-weight: 400; color: var(--teal); }
.ab-q { margin-top: 12px; }
.ab-q b { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.ab-op { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ab-chip {
  height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px;
  background: transparent; color: var(--ink-2); font-size: 11.5px; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.ab-chip:hover { background: var(--hover); color: var(--ink); }
.ab-chip.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.ab-in {
  height: 28px; flex: 1 1 160px; min-width: 120px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px;
}
.ab-in::placeholder { color: var(--ink-3); }
.ab-in:focus { outline: 2px solid var(--line-3); outline-offset: 1px; }
.ab-f { margin-top: 12px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.ab-f b { color: var(--teal); font-weight: 600; }
.ab-btn { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ab-no { background: none; border: 0; padding: 0; color: var(--ink-3); font-size: 12px; cursor: pointer; transition: color .14s var(--ease); }
.ab-no:hover { color: var(--ink); }

/* ---------- 货架详情页：交付档位页签与下单状态 ---------- */
.pk-tabs { display: flex; gap: 4px; margin-top: 16px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.pk-tab { flex: 1; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-xs); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background .14s var(--ease), color .14s var(--ease); }
.pk-tab:hover:not([aria-selected="true"]) { background: var(--hover); color: var(--ink); }
.pk-tab[aria-selected="true"] { background: var(--btn); color: var(--btn-ink); }
.pk-tab .pk-p { font-size: 11px; font-weight: 500; opacity: .62; }
.pk-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.pk-say { display: none; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pk-say:not([hidden]) { display: block; }
.pk-say.err { color: var(--danger); }
.form .askback { margin: 14px 0 0; }
.form .btn.busy { opacity: .55; pointer-events: none; }

/* ---------- 货架分类栏 ---------- */
.cats { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 2px; }
.cat {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font-size: 12.5px; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.cat:hover { background: var(--hover); color: var(--ink); }
.cat b { font-size: 11px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cat[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }
.cat[aria-pressed="true"] b { color: rgba(26, 26, 26, .58); }
.cat:focus-visible { outline: 2px solid var(--line-3); outline-offset: 1px; }
.more {
  grid-column: 1 / -1; justify-self: center; margin-top: 6px; height: 32px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: none;
  color: var(--ink-2); font-size: 12.5px; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.more:hover { background: var(--hover); color: var(--ink); }
.more:focus-visible { outline: 2px solid var(--line-3); outline-offset: 1px; }

/* ---------- 货架卡悬停动作 ---------- */
.card.cover { cursor: pointer; }
.card.cover .shot { position: relative; }
.card.cover .acts {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(8, 6, 5, .54); opacity: 0; pointer-events: none;
  transition: opacity .14s var(--ease);
}
.card.cover:hover .acts, .card.cover:focus-within .acts { opacity: 1; pointer-events: auto; }
.act {
  display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.act.ghost { background: rgba(20, 18, 16, .5); border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.act.ghost:hover { background: rgba(255, 255, 255, .92); border-color: transparent; color: #1a1714; }
.act.pri { background: var(--btn); border: 1px solid transparent; color: var(--btn-ink); }
.act.pri:hover { background: var(--btn-h); }
.act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) {
  .card.cover .acts { position: static; inset: auto; justify-content: flex-start; padding: 10px 12px 0; background: none; opacity: 1; pointer-events: auto; }
  .act.ghost { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
  .act.pri { background: var(--btn); color: var(--btn-ink); }
}

/* ---------- 技能包详情弹窗 ---------- */
body.pk-open { overflow: hidden; }
.pk-mask { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 5vh 16px; background: rgba(4, 4, 6, .74); }
.pk-modal {
  position: relative; width: min(880px, 100%); margin: 0 auto; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.pk-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 56px 16px 22px; border-bottom: 1px solid var(--line); }
.pk-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.pk-head .pk-job { margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.pk-badge { display: inline-flex; align-items: center; height: 21px; margin-left: 8px; padding: 0 9px; vertical-align: 2px;
  border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal); font-size: 11px; font-weight: 600; }
.pk-badge.soon { background: rgba(255, 255, 255, .08); color: var(--ink-3); }
.pk-x { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: grid; place-content: center;
  border-radius: 50%; color: var(--ink-3); font-size: 19px; line-height: 1; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); }
.pk-x:hover { background: var(--hover); color: var(--ink); }
.pk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 268px); gap: 22px; padding: 18px 22px 4px; }
.pk-sec + .pk-sec { margin-top: 16px; }
.pk-sec h4 { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.pk-sec p { margin-top: 7px; font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.pk-sec .no { color: var(--ink-2); }
.pk-list { margin-top: 8px; display: grid; gap: 5px; }
.pk-list li { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.pk-list li b { color: var(--ink); font-weight: 600; }
.pk-list li i { font-style: normal; color: var(--ink-3); font-size: 12px; }
.pk-eg { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line-3); border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.7; color: var(--ink-2); background: var(--surface-2); }
.pk-eg span { display: block; font-size: 11px; color: var(--teal); margin-bottom: 3px; }
.pk-fig { display: grid; gap: 10px; }
.pk-fig figure { margin: 0; }
.pk-fig img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-sm); box-shadow: var(--sh-1); }
.pk-fig figcaption { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.pk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.pk-foot .txt { font-size: 12px; color: var(--ink-3); }
.pk-foot .sp { margin-left: auto; }
.pk-rel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk-rel button { height: 26px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  color: var(--ink-2); font-size: 12px; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); }
.pk-rel button:hover { background: var(--hover); color: var(--ink); }
@media (max-width: 780px) {
  .pk-cols { grid-template-columns: minmax(0, 1fr); }
  .pk-fig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================== 漫剧：入口 + 对话式流水线 ============================== */
.drama { padding: 96px 0 72px; }
.drama-hero { max-width: 880px; margin: 0 auto; padding: 0 var(--pad); text-align: center; }
.mode-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); }
.mode-tab {
  height: 34px; padding: 0 18px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background .22s var(--ease-soft), color .22s var(--ease-soft);
}
.mode-tab:hover { color: var(--ink); }
.mode-tab.active { background: var(--btn); color: var(--btn-ink); }
.drama-hero h1 { margin-top: 22px; font-size: 42px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; }
.drama-hero h1 em { font-style: normal; color: var(--teal); }
.drama-hero .lede { margin: 12px auto 0; max-width: 620px; font-size: 14px; color: var(--ink-2); }
.drama-box {
  margin-top: 26px; padding: 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-2);
  transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.drama-box:focus-within { border-color: rgba(79, 211, 209, .36); box-shadow: var(--sh-2), 0 0 0 1px rgba(79, 211, 209, .14), 0 24px 60px rgba(0, 0, 0, .5); }
#idea { display: block; width: 100%; min-height: 118px; padding: 0; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.7; }
#idea::placeholder { color: var(--ink-3); }
.drama-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.drama-tools .chip { height: 30px; padding: 0 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12px; }
.drama-tools .chip:hover { background: var(--hover); }
.drama-tools .btn { margin-left: auto; height: 38px; padding: 0 26px; }
.hero-tip { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.hero-tip b { color: var(--ink-2); font-weight: 600; }

/* 对话流水线 */
.drama-flow { max-width: 880px; margin: 34px auto 0; padding: 0 var(--pad); display: grid; gap: 14px; }
.bubble { max-width: 78%; padding: 12px 15px; border-radius: var(--r-md); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.bubble.user { justify-self: end; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--ink); }
.bubble.ai { justify-self: start; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.bubble.ai .dots { display: inline-flex; gap: 4px; align-items: center; }
.bubble.ai .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: bubble-blink 1.1s ease-in-out infinite; }
.bubble.ai .dots i:nth-child(2) { animation-delay: .18s; }
.bubble.ai .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes bubble-blink { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.step-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.step-h b { font-size: 14.5px; letter-spacing: -.01em; }
.step-h .tag { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal); font-size: 11px; font-weight: 600; }
.step-h .tag.wait { background: rgba(255, 255, 255, .06); color: var(--ink-3); }
.step-h .sp { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.step-b { display: grid; gap: 10px; padding: 0 16px 16px; }
.step-b .doc {
  width: 100%; min-height: 132px; padding: 12px 13px; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.75;
}
.step-b .doc:focus { outline: none; border-color: rgba(79, 211, 209, .36); }
.step-b .note { font-size: 12px; line-height: 1.65; color: var(--ink-3); }
.step-b .note.err { color: var(--danger); }
.step-b .note b { color: var(--ink-2); font-weight: 600; }
.btn.sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.lines { display: grid; gap: 6px; }
.line { display: flex; gap: 10px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.line .k { flex: none; color: var(--teal); font-weight: 600; font-variant-numeric: tabular-nums; }
.segs { display: grid; gap: 8px; }
.seg { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.seg .no { flex: none; color: var(--teal); font-weight: 600; font-variant-numeric: tabular-nums; }
.seg .sec { color: var(--ink-3); }
.seg .st { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.seg.done .st { color: var(--teal); }
.seg video { width: 180px; max-width: 40%; border-radius: 8px; background: #000; }
.drama-empty { max-width: 880px; margin: 40px auto 0; padding: 0 var(--pad); text-align: center; font-size: 12.5px; line-height: 1.8; color: var(--ink-3); }

/* 生成视频页 */
.vg { padding: 96px 0 72px; }
.vg-head { max-width: 880px; margin: 0 auto 22px; padding: 0 var(--pad); text-align: center; }
.vg-head h1 { font-size: 34px; font-weight: 650; letter-spacing: -.03em; }
.vg-head .lede { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.vg-main { max-width: 880px; margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 14px; }
.vg-panel { padding: 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.vg-panel textarea { display: block; width: 100%; min-height: 116px; padding: 0; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.7; }
.vg-panel textarea::placeholder { color: var(--ink-3); }
.vg-refs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.vg-th { position: relative; width: 54px; height: 54px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); }
.vg-th img { width: 100%; height: 100%; object-fit: cover; }
.vg-th .x { position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; line-height: 17px; text-align: center; }
.vg-result { min-height: 220px; display: grid; place-items: center; gap: 10px; padding: 18px; text-align: center; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r-md); font-size: 13px; line-height: 1.7; color: var(--ink-3); }
.vg-result video { width: 100%; max-height: 460px; border-radius: var(--r-md); background: #000; }
.vg-list { display: grid; gap: 8px; }
.vg-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.vg-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-item .st { margin-left: auto; flex: none; font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 768px) {
  .drama, .vg { padding-top: 84px; }
  .drama-hero h1 { font-size: 30px; }
  .bubble { max-width: 90%; }
  .step-h { flex-wrap: wrap; }
  .seg { flex-wrap: wrap; }
}

.vg-note { margin-top: 10px; font-size: 12px; line-height: 1.65; color: var(--ink-3); }
.vg-note.err { color: var(--danger); }

/* ===== 以下样式照搬自 aigcc.vip 源码（漫剧入口 hero + 生成视频页） ===== */
/* ===== 顶部工具条 ===== */
.page-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: rgba(12, 12, 16, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(45, 212, 191, 0.14);
}

.tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 9px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  background: rgba(45, 212, 191, 0.06);
  color: #99f6e4; font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}

.tool-btn .el-icon { font-size: 15px; }

.tool-btn:hover { background: rgba(45, 212, 191, 0.14); border-color: rgba(45, 212, 191, 0.45); color: #ccfbf1; }

.tool-btn-primary {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3);
}

.tool-btn-primary:hover { opacity: 0.92; background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; }

/* ===== Hero：一句话开拍（居中） ===== */
.film-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 24px 8px;
  text-align: center;
}

.film-hero-copy { min-width: 0; }

.film-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2dd4bf;
  margin-bottom: 14px;
}

.film-hero-title {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #f4f4f5;
}

.film-hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, #2dd4bf, #34d399);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.film-hero-sub {
  margin: 0 auto 22px;
  font-size: 0.95rem;
  color: #a1a1aa;
  line-height: 1.6;
  max-width: 46ch;
}

.film-hero-input { max-width: 780px; margin: 0 auto; }

/* 工作流模式切换（最上面居中） */
.film-hero-eyebrow {
  display: flex; align-items: center; justify-content: center;
}

.hero-workflow-toggle { display: flex; align-items: center; gap: 10px; }

.hero-workflow-btn {
  padding: 8px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(232, 121, 249, 0.35);
  background: rgba(74, 28, 64, 0.35);
  color: #e9d5ff; font-size: 1rem; font-weight: 700;
  transition: all 0.2s;
}

.hero-workflow-btn.active {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(219, 39, 119, 0.3);
}

/* 即梦风格大输入框容器 */
.jm-input-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.jm-input-box:focus-within {
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12), 0 16px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.jm-textarea .el-textarea__inner {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 22px 22px 10px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #f4f4f5;
  min-height: 160px !important;
}

.jm-textarea .el-textarea__inner::placeholder { color: #6b6b72; }

.jm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px 14px;
  flex-wrap: wrap;
}

.jm-tools { display: flex; gap: 8px; flex-wrap: wrap; }

.jm-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #c8c8cc;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.jm-tool:hover { border-color: rgba(45, 212, 191, 0.5); color: #ccfbf1; background: rgba(45, 212, 191, 0.08); }

.jm-tool.active { border-color: rgba(45, 212, 191, 0.5); color: #ccfbf1; }

.jm-tool .el-icon { font-size: 15px; }

.jm-gen-btn {
  background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 28px;
  min-height: 42px;
  box-shadow: 0 6px 18px rgba(20, 184, 166, 0.3);
}

.jm-gen-btn:hover { opacity: 0.92; transform: translateY(-1px); }

.film-hero-tip { margin-top: 14px; font-size: 0.76rem; color: #71717a; }

/* ===== 亮色模式（新元素） ===== */
html.light .page-toolbar { background: rgba(248, 246, 255, 0.85); border-bottom-color: rgba(45, 212, 191, 0.2); }

.vg-page {
  min-height: 100vh;
  background: #090a0c;
  color: #ededed;
  --vg-bg: #090a0c;
  --vg-card: #131316;
  --vg-border: rgba(255, 255, 255, 0.12);
  --vg-text: #ededed;
  --vg-muted: #a3a3a3;
  --vg-faint: #666;
}

.vg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--vg-border);
  background: rgba(13, 13, 16, 0.92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.vg-back { color: #d4d4d8; }

.vg-title { font-size: 17px; font-weight: 700; margin: 0; }

.vg-sub { font-size: 12px; color: var(--vg-faint); }

.vg-header-right { margin-left: auto; }

.vg-new-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #be123c, #f43f5e);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.vg-new-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.vg-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* ─── 节点列表 ─── */
.vg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  border: 1px dashed var(--vg-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--vg-faint);
  font-size: 13px;
}

.vg-empty-icon { font-size: 44px; opacity: 0.6; }

.vg-empty-btn {
  margin-top: 6px;
  padding: 9px 24px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #be123c, #f43f5e);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.vg-node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.vg-node-card {
  position: relative;
  border: 1px solid var(--vg-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--vg-card);
  cursor: pointer;
  transition: all 0.2s;
}

.vg-node-card:hover { border-color: rgba(255,255,255,.3); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.4); }

/* 列表里的「新建节点」卡 */
.vg-node-add {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: dashed;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.02);
}

.vg-node-add:hover { border-color: rgba(244,63,94,.5); }

.vg-node-add .vg-node-thumb { background: transparent; }

.vg-node-add .vg-node-ph { font-size: 30px; }

.vg-node-thumb {
  position: relative;
  height: 140px;
  background: #101014;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vg-node-thumb.busy { background: rgba(190, 18, 60, 0.08); }

.vg-node-video { width: 100%; height: 100%; object-fit: cover; }

.vg-node-ph { font-size: 34px; opacity: 0.5; }

.vg-node-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--vg-muted);
}

.vg-node-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(8, 8, 10, 0.8);
}

.vg-node-badge.ok { color: #4ade80; }

.vg-node-badge.err { color: #f87171; }

.vg-node-info { padding: 11px 13px; }

.vg-node-prompt {
  font-size: 13px;
  color: var(--vg-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.vg-node-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--vg-faint);
}

.vg-node-del {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: rgba(8, 8, 10, 0.8);
  color: #a3a3a3;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.vg-node-card:hover .vg-node-del { opacity: 1; }

.vg-node-del:hover { background: rgba(248, 113, 113, 0.25); color: #fff; }

/* ─── 编辑框 ─── */
.vg-edit {
  background: var(--vg-card);
  border: 1px solid var(--vg-border);
  border-radius: 16px;
  padding: 18px 20px 22px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}

.vg-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vg-edit-title { font-size: 14px; font-weight: 700; }

.vg-edit-head-actions { display: flex; align-items: center; gap: 8px; }

.vg-edit-new {
  padding: 4px 12px;
  border: 1px solid var(--vg-border);
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  color: #d4d4d4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.vg-edit-new:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }

.vg-edit-close {
  width: 26px; height: 26px;
  border: none; border-radius: 7px;
  background: rgba(255,255,255,.07);
  color: #a3a3a3; cursor: pointer; font-size: 12px;
}

.vg-edit-close:hover { background: rgba(255,255,255,.14); color: #fff; }

/* 参考上传 */
.vg-ref-row { display: flex; gap: 12px; margin-bottom: 14px; }

.vg-ref-slot {
  position: relative;
  flex: 1;
  min-height: 92px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s;
}

.vg-ref-slot:hover { border-color: rgba(255, 255, 255, 0.35); }

.vg-ref-count { position: absolute; top: 6px; left: 8px; font-size: 10px; color: var(--vg-faint); }

.vg-ref-plus { font-size: 18px; color: var(--vg-muted); }

.vg-ref-label { font-size: 11px; color: var(--vg-muted); }

.vg-ref-thumbs {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.vg-ref-thumb {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--vg-border);
  background: #101014;
}

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

.vg-ref-audio { display: flex; align-items: center; justify-content: center; font-size: 20px; }

.vg-ref-audio-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 3px;
  font-size: 8px; line-height: 1.2;
  color: #fff;
  background: rgba(8, 8, 10, 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

.vg-ref-del {
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  border: none; border-radius: 0 0 0 6px;
  background: rgba(8, 8, 10, 0.85);
  color: #fff; font-size: 9px; cursor: pointer;
  line-height: 16px;
}

/* 提示词 */
.vg-prompt {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  padding: 12px 14px;
  border: 1px solid var(--vg-border);
  border-radius: 10px;
  background: #101014;
  color: var(--vg-text);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}

.vg-prompt:focus { border-color: rgba(255,255,255,.35); }

/* 工具栏 */
.vg-lock-tip {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(190, 18, 60, 0.18), rgba(219, 39, 119, 0.12));
  border: 1px solid rgba(251, 113, 133, 0.35);
  color: #fecdd3;
  font-size: 0.82rem;
}

.vg-lock-tip b { color: #fda4af; }

.vg-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.vg-toolbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.vg-chip-box { position: relative; }

.vg-chip-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--vg-border);
  border-radius: 8px;
  color: #d4d4d4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 170px;
}

.vg-chip-btn:hover, .vg-chip-box.open .vg-chip-btn {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.32);
}

.vg-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }

.vg-caret { font-size: 10px; opacity: 0.6; }

.vg-dropdown, .vg-inline-config {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 30;
  min-width: 180px;
  max-width: 300px;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid var(--vg-border);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.vg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: #d4d4d4;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.vg-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.vg-item.active { color: #fff; font-weight: 600; }

.vg-item.locked { opacity: 0.62; cursor: not-allowed; }

.vg-item.locked:hover { background: transparent; color: #d4d4d4; }

.vg-item-lock { font-size: 11px; flex-shrink: 0; }

.vg-item-price { font-size: 10px; color: #fbbf24; flex-shrink: 0; }

.vg-config-label { font-size: 12px; color: var(--vg-muted); margin-bottom: 6px; display: block; }

.vg-config-options { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.vg-config-hint { color: #888; font-size: 12px; }

.vg-config-btn {
  padding: 5px 10px;
  border: 1px solid var(--vg-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d4;
  font-size: 12px;
  cursor: pointer;
}

.vg-config-btn:hover { background: rgba(255, 255, 255, 0.12); }

.vg-config-btn.active { background: rgba(99, 102, 241, 0.35); border-color: #6366f1; color: #fff; }

.vg-drop-empty { padding: 8px 10px; font-size: 11px; color: var(--vg-faint); }

/* 风格网格 */
.vg-style-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 30;
  width: 420px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(20, 20, 22, 0.98);
  border: 1px solid var(--vg-border);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.vg-style-item {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px;
  text-align: center;
  transition: all 0.15s;
}

.vg-style-item:hover { border-color: rgba(255,255,255,.25); }

.vg-style-item.active { border-color: #6366f1; background: rgba(99,102,241,.12); }

.vg-style-thumb {
  width: 100%;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #101014;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.vg-style-thumb img { width: 100%; height: 100%; object-fit: cover; }

.vg-style-custom { background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(244,63,94,.25)); font-size: 18px; color: #fff; }

.vg-style-noimg { font-size: 15px; color: #666; }

.vg-style-name { font-size: 11px; color: #d4d4d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* 右侧 */
.vg-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.vg-price { color: #fbbf24; font-size: 12px; font-weight: 600; white-space: nowrap; }

.vg-submit {
  padding: 8px 26px;
  background: linear-gradient(135deg, #be123c, #f43f5e);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.vg-submit:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }

.vg-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* 自定义风格 */
.vg-custom-style {
  margin-top: 12px;
  border: 1px solid var(--vg-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
}

.vg-custom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.vg-custom-head button {
  border: none;
  background: transparent;
  color: #a3a3a3;
  cursor: pointer;
  font-size: 12px;
}

.vg-custom-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--vg-border);
  border-radius: 7px;
  background: #101014;
  color: #fff;
  font-size: 13px;
  margin-bottom: 8px;
}

.vg-custom-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--vg-border);
  border-radius: 7px;
  background: #101014;
  color: #fff;
  font-size: 13px;
  resize: vertical;
}

.vg-custom-save {
  margin-top: 10px;
  padding: 6px 18px;
  border: none;
  border-radius: 7px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* 结果 */
.vg-results { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.vg-result-card {
  border: 1px solid var(--vg-border);
  border-radius: 12px;
  overflow: hidden;
  background: #101014;
}

.vg-result-video { width: 100%; max-height: 380px; background: #000; display: block; }

.vg-result-busy, .vg-result-err {
  padding: 30px;
  text-align: center;
  color: var(--vg-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.vg-result-err { color: #f87171; }

.vg-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
}

.vg-result-time { color: var(--vg-muted); }

.vg-result-dl {
  color: #818cf8;
  text-decoration: none;
  font-size: 12px;
}

.vg-result-dl:hover { text-decoration: underline; }

/* 通用 */
.vg-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #f1f1f1;
  border-radius: 50%;
  animation: vg-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes vg-spin { to { transform: rotate(360deg); } }

/* ===== 漫剧：对话流水线容器 ===== */
.qc { max-width: 880px; margin: 18px auto 0; padding: 0 var(--pad) 72px; display: grid; gap: 16px; }
.qc-chat { display: grid; gap: 10px; }
.qc-task { display: grid; gap: 14px; }
.qc .step-b .el-textarea__inner { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); font-size: 13.5px; line-height: 1.75; box-shadow: none; }
.qc .step-b .el-textarea__inner:focus { border-color: rgba(79, 211, 209, .36); box-shadow: none; }
.qc .step-h .el-button + .el-button { margin-left: 8px; }
.qc .seg .el-button { flex: none; }
.hero-workflow-btn { cursor: pointer; }
a.hero-workflow-btn { display: inline-block; }

/* ===== 生成视频的方框：照 dream.ai666 的样式（深底实色、圆角；框内不透出页面白点） ===== */
.gen-box {
  max-width: 780px; margin: 22px auto 0; padding: 14px 16px 12px;
  background: #141416; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
.gen-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.gen-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 9px; font-size: 12.5px; color: #a1a1aa; white-space: nowrap;
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.gen-tab:hover { background: rgba(255, 255, 255, .06); color: #e4e4e7; }
.gen-tab.active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.gen-tab.dim { color: #52525b; cursor: default; }
.gen-tab.dim:hover { background: none; color: #52525b; }
.gen-prompt {
  display: block; width: 100%; min-height: 160px; padding: 6px 2px; border: 0; outline: none; resize: none;
  background: transparent; color: #ededed; font: inherit; font-size: 14px; line-height: 1.7;
}
.gen-prompt::placeholder { color: #6b6b72; }
.gen-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
.gen-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #a1a1aa;
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.gen-ic:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.gen-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 18px;
  border-radius: 10px; border: 1px solid rgba(45, 212, 191, .45); background: rgba(45, 212, 191, .1);
  color: #5eead4; font-size: 13.5px; font-weight: 600;
  transition: background .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.gen-go:hover { background: rgba(45, 212, 191, .18); border-color: rgba(45, 212, 191, .65); }
.gen-go:disabled { opacity: .5; pointer-events: none; }
.gen-thumbs { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; }
.gen-note { margin-top: 10px; font-size: 12px; line-height: 1.65; color: var(--ink-3); }
.gen-note.err { color: var(--danger); }
/* 生成记录（右上角） */
.hero-log-btn {
  position: fixed; right: 16px; top: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border-radius: 12px; background: rgba(10, 12, 16, .55); color: #e6e6e6; font-size: 13px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .22s var(--ease-soft);
}
.hero-log-btn:hover { background: rgba(20, 24, 30, .78); }
.log-list { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.log-item { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.log-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-item .st { margin-left: auto; flex: none; color: var(--ink-3); font-size: 11.5px; }
.jm-tool.sm-chip { padding: 6px 11px; font-size: .78rem; }

/* 生成视频方框：参数下拉里的分组行 */
.gen-params-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; }
.gen-params-row .k { flex: none; width: 46px; font-size: 11.5px; color: var(--ink-3); }
.gen-params-row .vg-config-btn { flex: none; padding: 5px 10px; }

/* ===== 生成视频：参数面板（照 dream.ai666 截图：比例 / 清晰度 / 视频时长 / 生成音频） ===== */
.gen-panel {
  min-width: 300px; max-width: 320px; padding: 14px 16px 12px; border-radius: 14px;
  background: #17171a; border: 1px solid rgba(255, 255, 255, .14);
}
.gen-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: #a1a1aa; margin: 12px 0 8px;
}
.gen-label:first-child { margin-top: 0; }
.gen-label .cost { font-size: 11.5px; color: #71717a; }
.gen-ratio-row { display: flex; gap: 6px; }
.gen-ratio {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  height: 58px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); color: #a1a1aa; font-size: 11.5px;
  transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.gen-ratio:hover { border-color: rgba(255, 255, 255, .28); color: #e4e4e7; }
.gen-ratio.active { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.gen-ratio .shape { display: block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .85; }
.gen-res-row { display: flex; gap: 6px; }
.gen-res {
  flex: 1; height: 34px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); color: #a1a1aa; font-size: 12px;
  transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.gen-res:hover { border-color: rgba(255, 255, 255, .28); color: #e4e4e7; }
.gen-res.active { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.gen-dur-row { display: flex; align-items: center; gap: 12px; }
.gen-dur-row .el-slider { flex: 1; }
.gen-dur-val { flex: none; min-width: 34px; text-align: right; font-size: 12.5px; color: #e4e4e7; font-variant-numeric: tabular-nums; }
.gen-toggle { display: flex; gap: 8px; }
.gen-toggle button {
  flex: 1; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03); color: #a1a1aa; font-size: 12.5px;
  transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.gen-toggle button:hover { border-color: rgba(255, 255, 255, .28); color: #e4e4e7; }
.gen-toggle button.active { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.gen-panel .el-slider__runway { background: rgba(255, 255, 255, .14); height: 4px; }
.gen-panel .el-slider__bar { background: #e4e4e7; height: 4px; }
.gen-panel .el-slider__button { width: 14px; height: 14px; border: 2px solid #e4e4e7; background: #17171a; }

/* 对话模式输入框：实底，不透出页面白点 */
.jm-input-box { background: #141416; }
.jm-input-box:focus-within { background: #17171a; }
/* 参数面板：给足高度，超了自己滚 */
.gen-panel { max-height: min(62vh, 430px); overflow-y: auto; }

/* 副标题放宽，避免最后一个字单独折行 */
.film-hero-sub { max-width: 700px; }

/* 生成记录弹窗（直接生成页）：一条记录 = 一行信息 + 视频 */
.log-rec { display: grid; gap: 8px; }
.log-rec video { width: 100%; max-height: 260px; border-radius: 10px; background: #000; }
.log-rec .err { font-size: 12px; line-height: 1.6; color: var(--danger); }
.log-del {
  margin-left: 8px; flex: none; width: 22px; height: 22px; border-radius: 6px;
  color: var(--ink-3); font-size: 12px; line-height: 1;
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft);
}
.log-del:hover { background: rgba(248, 113, 113, .2); color: #fff; }

/* 生成记录弹窗：两块分区 */
.log-sec { display: grid; gap: 10px; }
.log-sec + .log-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.log-sec h4 { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.log-empty { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }

/* 打字机占位语（漫剧两个框） */
.gen-ph { left: 2px; top: 6px; right: 16px; font-size: 14px; line-height: 1.7; }
.jm-ph { left: 22px; top: 22px; right: 22px; font-size: 1.05rem; line-height: 1.75; }
.ph-wrap { position: relative; }
.ph-wrap .ph { pointer-events: none; }

/* 左上角抽屉按钮：去掉方框底色，只留三条杠（靠阴影保证在视频上也看得清） */
.nav-toggle { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-toggle .ico { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .85)); }
.nav-toggle:hover { background: rgba(255, 255, 255, .1); }
/* 右上角生成记录：同样去掉底色，保持两个角一致 */
.hero-log-btn { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.hero-log-btn:hover { background: rgba(255, 255, 255, .1); }

/* 玩法区（直接生成页） */
.plays { max-width: 780px; margin: 30px auto 0; padding: 0 var(--pad); }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 10px; }
.play {
  display: grid; gap: 6px; text-align: left; padding: 13px 14px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: border-color .22s var(--ease-soft), transform .22s var(--ease-soft), background-color .22s var(--ease-soft);
}
.play:hover { border-color: rgba(79, 211, 209, .45); background: var(--surface-2); transform: translateY(-2px); }
.play b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.play i { font-style: normal; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.play .meta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plays-src { margin-top: 14px; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }

/* ===== 玩法区（照 aigcc 灵感区的排版） ===== */
.plays { max-width: 1180px; margin: 34px auto 0; padding: 0 var(--pad); }
.cats-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.cats-row::-webkit-scrollbar { display: none; }
.pcat {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink-2); font-size: 12.5px;
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.pcat:hover { background: var(--hover); color: var(--ink); }
.pcat em { font-style: normal; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pcat.active { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 600; }
.pcat.active em { color: rgba(26, 26, 26, .55); }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.play { padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); text-align: left; cursor: pointer; transition: border-color .2s var(--ease-soft), transform .2s var(--ease-soft); }
.play:hover { border-color: var(--line-3); transform: translateY(-2px); }
.play .cover { position: relative; aspect-ratio: 4 / 5; background: #0b0b0e; overflow: hidden; }
.play .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s var(--ease-soft); }
.play .cover video.on { opacity: 1; }
.play .go {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94);
  height: 36px; padding: 0 18px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94); color: #17181a; font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-soft), transform .2s var(--ease-soft);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.play:hover .go { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.play .cap { padding: 9px 11px 11px; }
.play .cap b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play .cap span { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.plays-more { display: block; margin: 16px auto 0; height: 34px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; color: var(--ink-2); font-size: 12.5px; }
.plays-more:hover { background: var(--hover); color: var(--ink); }
.plays-src { margin-top: 16px; font-size: 11.5px; line-height: 1.75; color: var(--ink-3); }
/* 生成视频旁边的预估积分（积分规则定了再填数字） */
.gen-est { margin-left: auto; margin-right: 10px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.gen-est b { color: var(--ink-2); font-weight: 600; }
.gen-bottom .gen-go { margin-left: 0; }

/* 玩法卡封面上的角标：模型 + 秒数 */
.play .badge {
  z-index: 1;                       /* 悬停预览视频是后加的，别把角标盖掉 */
  position: absolute; top: 8px; z-index: 3;
  height: 20px; padding: 0 8px; display: inline-flex; align-items: center;
  border-radius: var(--r-pill); background: rgba(6, 8, 12, .62); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #e8f6f5;
  font-variant-numeric: tabular-nums;
}
.play .badge.model { left: 8px; }
.play .badge.sec { right: 8px; }

/* 分类胶囊：换行显示，全部可见 */
.cats-row { flex-wrap: wrap; overflow: visible; row-gap: 8px; }

/* 封面：底层模糊铺满 + 上层完整画面居中，两种比例都不歪不裁 */
.play .cover .cover-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(18px) saturate(1.1) brightness(.5); }
.play .cover .cover-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.play .cover.wide .cover-fg { padding: 18px 0; }

/* 玩法分类：默认只显示一行，可展开/收起 */
.cats-row.collapsed { max-height: 34px; overflow: hidden; }
.cats-toggle {
  display: block; margin: 8px auto 2px; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: none; color: var(--ink-2); font-size: 12px;
}
.cats-toggle:hover { background: var(--hover); color: var(--ink); }
/* ===== 图片栏目（照参考站的输入框样式，配色仍用我们自己的黑+青） ===== */
.img-hero { max-width: 880px; margin: 96px auto 0; padding: 0 var(--pad); }
.img-hero h1 { font-size: 30px; font-weight: 650; letter-spacing: -.03em; text-align: center; }
.img-hero .lede { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--ink-2); }
/* 渐变描边的输入框 */
.imgbox { position: relative; margin-top: 26px; padding: 1px; border-radius: 22px;
  background: linear-gradient(120deg, rgba(79, 211, 209, .55), rgba(150, 130, 255, .45) 45%, rgba(79, 211, 209, .18) 90%); }
.imgbox-in { border-radius: 21px; background: #0e0e11; padding: 16px 18px 12px; }
.imgbox-top { display: flex; align-items: flex-start; gap: 14px; }
.img-plus {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--ink-2);
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.img-plus:hover { background: rgba(255, 255, 255, .08); color: var(--ink); border-color: var(--line-3); }
.img-prompt {
  flex: 1; min-height: 52px; max-height: 200px; padding: 14px 2px; border: 0; outline: none; resize: none;
  background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.7;
}
.img-prompt::placeholder { color: var(--ink-3); }
.img-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* 底部一排功能键 */
.img-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
.img-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .03);
  color: var(--ink-2); font-size: 12.5px;
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.img-chip:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.img-chip b { color: var(--ink); font-weight: 600; }
.img-count { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.img-send {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn); color: var(--btn-ink);
  transition: background .2s var(--ease-soft), transform .12s var(--ease-soft);
}
.img-send:hover { background: var(--btn-h); }
.img-send:active { transform: translateY(1px); }
.img-send:disabled { opacity: .45; pointer-events: none; }
/* 比例下拉：竖排（小方框示意 + 名称） */
.ratio-list { min-width: 190px; max-height: 330px; overflow-y: auto; }
.ratio-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  border-radius: 8px; color: var(--ink-2); font-size: 13px; text-align: left;
  transition: background .14s var(--ease-soft), color .14s var(--ease-soft);
}
.ratio-item:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.ratio-item.active { background: rgba(79, 211, 209, .12); color: #a8f3f0; font-weight: 600; }
.ratio-item .shape { flex: none; display: block; border: 1.5px solid currentColor; border-radius: 3px; opacity: .9; }
.ratio-item span { flex: 1; }
/* 分辨率下拉 */
.res-list { min-width: 130px; }
.img-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.img-note { font-size: 12px; line-height: 1.65; color: var(--ink-3); }
.img-note.err { color: var(--danger); }
/* 结果区 */
.img-out { max-width: 880px; margin: 22px auto 0; padding: 0 var(--pad); }
/* 内嵌的生成记录：固定一行 5 个（最多就占一行），更早的都去「生成记录」弹窗里看 */
.img-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .img-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .img-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 视频那条内嵌记录：缩略图是 video */
.img-tile video { display: block; width: 100%; height: auto; cursor: pointer; background: #0c1116; }
.img-tile { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.img-tile img { display: block; width: 100%; height: auto; }
.img-tile .cap { padding: 8px 11px; font-size: 11.5px; color: var(--ink-3); }
.img-empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--ink-3); font-size: 13px; line-height: 1.8; }

/* 图片栏目的加号按钮：跟漫剧页的方框同一套观感 */
.imgbox-top { display: flex; align-items: center; gap: 14px; }
.img-plus {
  flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink-2);
  transition: background .2s var(--ease-soft), color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.img-plus:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
.imgbox-top .gen-prompt { min-height: 96px; }

/* 图片栏目：加号按钮放大 + 打字机占位语定位 */
.img-plus { width: 96px; height: 96px; border-radius: 16px; }
.img-plus .ico { width: 28px; height: 28px; }
.img-ph { left: 2px; top: 6px; right: 16px; font-size: 14px; line-height: 1.7; }
.imgbox-top .gen-prompt { min-height: 116px; }
/* ===== 登录 / 注册页 ===== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 80px 20px 60px; }
.auth-card { width: min(460px, 100%); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--ink); }
.auth-brand .glyph {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
  background: conic-gradient(from 205deg, #4fd3d1, #2fa9c9 42%, #96f0e4 76%, #4fd3d1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 14px rgba(79, 211, 209, .28);
}
.auth-title { margin: 26px 0 8px; text-align: center; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.auth-sub { text-align: center; font-size: 13px; color: var(--ink-3); }
.auth-tabs { display: flex; margin: 22px 0 18px; border-bottom: 1px solid var(--line-2); }
.auth-tab {
  flex: 1; height: 42px; font-size: 15px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.auth-tab:hover { color: var(--ink-2); }
.auth-tab.on { color: var(--ink); border-bottom-color: var(--teal); }
.auth-label { display: block; margin: 14px 0 7px; font-size: 13px; color: var(--ink-2); }
.auth-input {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 13px;
  /* 不透明背景：原来是 rgba(255,255,255,.03)，会把页面那层点阵底纹透出来，
     看着像输入框里有一片白点。要纯黑一点，字才看得清。 */
  background: #0c0c0e; border: 1px solid var(--line-2); border-radius: 12px;
  transition: border-color .2s var(--ease-soft), background .2s var(--ease-soft);
}
.auth-input:focus-within { border-color: rgba(79, 211, 209, .5); background: #131316; }
.auth-input .ico { color: var(--ink-3); flex: none; }
.auth-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  color: var(--ink); font: inherit; font-size: 14px;
}
.auth-input input::placeholder { color: var(--ink-3); }
.auth-eye { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); }
.auth-eye:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.auth-row { display: flex; gap: 10px; align-items: center; }
.auth-row .auth-input { flex: 1; }
.auth-code-btn {
  flex: none; height: 46px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--line-3);
  background: rgba(255, 255, 255, .04); color: var(--ink-2); font-size: 13px;
}
.auth-code-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: var(--ink); }
.auth-code-btn:disabled { opacity: .5; pointer-events: none; }
/* 滑块验证 */
.auth-slider {
  position: relative; height: 44px; margin-top: 14px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2);
  user-select: none; touch-action: none;
}
.auth-slider .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; background: rgba(79, 211, 209, .18); }
.auth-slider .handle {
  position: absolute; left: 1px; top: 1px; width: 42px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; cursor: grab; color: var(--ink);
  background: rgba(255, 255, 255, .1); border: 1px solid var(--line-3);
}
.auth-slider .handle:active { cursor: grabbing; }
.auth-slider .hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--ink-3); pointer-events: none; }
.auth-slider.ok { border-color: rgba(79, 211, 209, .55); }
.auth-slider.ok .hint { color: var(--teal); }
.auth-slider.ok .handle { background: rgba(79, 211, 209, .25); border-color: rgba(79, 211, 209, .6); }
.auth-btn {
  width: 100%; height: 48px; margin-top: 20px; border-radius: 12px;
  background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff;
  font-size: 15px; font-weight: 700; box-shadow: 0 6px 18px rgba(20, 184, 166, .25);
  transition: opacity .2s var(--ease-soft), transform .12s var(--ease-soft);
}
.auth-btn:hover { opacity: .92; }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .5; pointer-events: none; }
.auth-links { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.auth-links button { color: var(--teal); }
.auth-links button:hover { text-decoration: underline; }
.auth-foot { margin-top: 26px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.auth-foot a { color: var(--ink-2); }
.auth-note { min-height: 20px; margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--danger); }
.auth-note.ok { color: var(--teal); }

/* ==========================================================================
   充值页（recharge.html）
   ========================================================================== */
.rc { padding-top: 56px; padding-bottom: 72px; max-width: 900px; }

.rc-eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 12px;
}

.rc-h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px;
}

.rc-sub { color: var(--ink-2); font-size: .95rem; line-height: 1.7; max-width: 52ch; margin-bottom: 26px; }

/* 支付完成提示 */
.rc-done {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; margin-bottom: 22px; border-radius: var(--r-md);
  background: var(--teal-soft); border: 1px solid rgba(79, 211, 209, .35);
  color: #b8f2f0; font-size: .9rem; line-height: 1.6;
}
.rc-done .ico { color: var(--teal); margin-top: 2px; }

/* 余额条 */
.rc-bal {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 26px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
}
.rc-bal-lab { color: var(--ink-2); font-size: .86rem; }
.rc-bal b { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.rc-bal-unit { color: var(--ink-3); font-size: .84rem; }
.rc-bal-more { margin-left: auto; font-size: .84rem; color: var(--ink-2); border-bottom: 1px solid var(--line-3); }
.rc-bal-more:hover { color: var(--ink); }

/* 未登录提示 */
.rc-need {
  padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); margin-bottom: 26px;
}
.rc-need p { color: var(--ink-2); font-size: .92rem; line-height: 1.7; margin-bottom: 16px; }

/* 支付方式 */
.rc-pays { display: flex; gap: 10px; margin-bottom: 20px; }
.rc-pay {
  padding: 9px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-2); font-size: .88rem; transition: all .2s var(--ease);
}
.rc-pay:hover { border-color: var(--line-3); color: var(--ink); }
.rc-pay.on {
  border-color: transparent; background: var(--btn); color: var(--btn-ink); font-weight: 600;
}

/* 套餐卡片 */
.rc-plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 24px; }
.rc-plan {
  display: grid; gap: 6px; text-align: left; padding: 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.rc-plan:hover { border-color: var(--line-3); transform: translateY(-2px); }
.rc-plan.on { border-color: var(--teal); background: var(--teal-soft); }
.rc-plan-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rc-plan-name { font-size: .95rem; font-weight: 600; }
.rc-plan-badge {
  font-style: normal; font-size: .7rem; padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(79, 211, 209, .16); color: var(--teal);
}
.rc-plan-price { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.rc-plan-credits { font-size: .82rem; color: var(--ink-2); }
.rc-plan-credits b { color: var(--ink); }
.rc-plan-intro { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* 底部结算条 */
.rc-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2);
}
.rc-bar-l { display: flex; align-items: baseline; gap: 8px; color: var(--ink-2); font-size: .86rem; }
.rc-bar-l b { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.rc-bar-gain { color: var(--teal); font-size: .82rem; }
.rc-go { margin-left: auto; padding: 11px 30px; font-weight: 600; }
.rc-go:disabled { opacity: .45; cursor: not-allowed; }
.rc-tip { margin-top: 12px; font-size: .82rem; color: var(--ink-3); line-height: 1.6; }
.rc-tip.warn { color: var(--danger); }

/* 没有套餐时的说明 */
.rc-empty {
  padding: 26px; border: 1px dashed var(--line-2); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 26px;
}
.rc-empty p { color: var(--ink-2); font-size: .92rem; line-height: 1.75; margin-bottom: 10px; }
.rc-empty p b { color: var(--ink); }

/* 说明 */
.rc-notes { margin-top: 26px; display: grid; gap: 8px; }
.rc-notes li {
  position: relative; padding-left: 16px; font-size: .8rem; color: var(--ink-3); line-height: 1.7;
}
.rc-notes li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-3);
}

@media (max-width: 640px) {
  .rc { padding-top: 36px; }
  .rc-plans { grid-template-columns: 1fr 1fr; }
  .rc-bal-more { margin-left: 0; width: 100%; }
}

/* 模型下拉里的价格（图片页 / 视频页共用） */
.vg-price {
  flex: none; font-style: normal; font-size: 11.5px;
  color: var(--teal); white-space: nowrap; padding-left: 10px;
}

/* 模型下拉里要同时放"模型名 + 价格"，按内容撑开，不允许折行 */
.vg-dropdown { width: max-content; }
.vg-dropdown .ratio-item span, .vg-dropdown .vg-item span { white-space: nowrap; }

/* ==========================================================================
   首页对话（模型选择 / 联网 / 语音 / 问答）
   ========================================================================== */
.ask-hide { display: none !important; }
.zone-foot .sp { flex: 1; }

.ask-mark { font-size: 15px; line-height: 1; color: var(--teal); flex: none; }

.chip.on { border-color: var(--teal); color: #a8f3f0; background: rgba(79, 211, 209, .12); }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.ask-mic.on { border-color: #ff8a7e; color: #ff8a7e; }

/* ---------- 模型选择面板 ---------- */
.ask-picker {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: 330px; max-width: min(92vw, 330px);
  background: rgba(18, 18, 20, .98); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: 10px; z-index: 60;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ask-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px; background: var(--surface-2); border-radius: var(--r-sm); margin-bottom: 10px; }
.ask-tab {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: 7px; color: var(--ink-2); font-size: 13px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.ask-tab:hover { color: var(--ink); }
.ask-tab.on { background: var(--surface-3); color: var(--ink); font-weight: 600; }

.ask-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 38px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; }
.ask-search .ico { color: var(--ink-3); }
.ask-search input { flex: 1; background: none; border: 0; outline: none; color: var(--ink); font-size: 13px; }
.ask-search input::placeholder { color: var(--ink-3); }

.ask-list { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.ask-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 11px; border-radius: var(--r-sm); text-align: left;
  color: var(--ink-2); font-size: 13.5px;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.ask-row:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.ask-row.sel { color: #a8f3f0; }
.ask-row b { font-weight: 600; }
.ask-count { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.ask-arrow { color: var(--ink-3); flex: none; }
.ask-ck { color: var(--teal); flex: none; }
.ask-price { margin-left: auto; font-size: 11.5px; color: var(--teal); white-space: nowrap; flex: none; }
.ask-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(79, 211, 209, .16); color: var(--teal); white-space: nowrap; flex: none; }
.ask-model b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; }
.ask-back { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; }
.ask-back:hover { color: var(--ink); }
.ask-back-r { font-size: 11.5px; color: var(--ink-3); }
.ask-empty { padding: 14px 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }

/* ---------- 回答区 ---------- */
.ask-answers { display: grid; gap: 12px; margin-top: 18px; max-width: 780px; margin-left: auto; margin-right: auto; text-align: left; }
.ask-msg { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(16, 16, 18, .78); }
.ask-msg.user { background: rgba(30, 30, 34, .72); }
.ask-who { font-size: 11.5px; color: var(--ink-3); margin-bottom: 7px; }
.ask-msg.assistant .ask-who { color: var(--teal); }
.ask-body { font-size: 14px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

@media (max-width: 720px) {
  .ask-picker { width: 100%; right: 0; }
  .zone-foot .sp { display: none; }
}

/* 模型面板打开时放开裁切，否则面板会被 .zone 的 overflow:hidden 剪掉 */
.zone.ask-picking { overflow: visible; }

/* 修正：模型面板放到输入框下面（之前在上面挡住了标题），并支持真实品牌 logo */
.ask-picker {
  top: calc(100% + 10px);
  bottom: auto;
}
.ask-tabs { grid-template-columns: 1fr; }
.ask-tab { cursor: default; }
.ask-logo { width: 17px; height: 17px; flex: none; color: #e8e8ea; }
.ask-logo.sm { width: 15px; height: 15px; }
.ask-row.sel .ask-logo, .chip .ask-logo { color: var(--teal); }
.ask-mark { display: inline-flex; align-items: center; }
.ask-back .ask-logo { margin-right: 2px; }

/* 模型面板打开时把输入区层级抬高：.cards-row 和 .hero-in 的 z-index 都是 1，
   卡片在后面，不抬高的话面板会被四个车间卡片盖住。 */
.hero-in.ask-picking { z-index: 40; }

/* .zone 有 backdrop-filter，会自己形成一个层级上下文；
   展开面板时要把 .zone 整体抬起来，否则示例标签那排会盖住面板顶部。 */
.zone.ask-picking { overflow: visible; z-index: 70; }

/* ==========================================================================
   上传文件面板（点 ➕ 打开）＋ 两个面板统一跟输入框左对齐
   ========================================================================== */
.ask-picker, .ask-up { left: 0; right: auto; }

.ask-plus { width: 36px; padding: 0; justify-content: center; }
.ask-plus .ico { width: 17px; height: 17px; }
.ask-plus[aria-expanded="true"] { border-color: var(--teal); color: #a8f3f0; background: rgba(79, 211, 209, .12); }

.ask-up {
  position: absolute; top: calc(100% + 10px); z-index: 60;
  width: 330px; max-width: min(92vw, 330px);
  padding: 14px 14px 12px;
  background: rgba(18, 18, 20, .98); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ask-up-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }

.ask-up-pick {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-2);
  text-align: left; transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ask-up-pick:hover { border-color: var(--teal); background: rgba(79, 211, 209, .08); }
.ask-up-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: rgba(79, 211, 209, .16); color: var(--teal);
}
.ask-up-txt { min-width: 0; }
.ask-up-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.ask-up-txt i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

.ask-up-label { font-size: 11.5px; color: var(--ink-3); margin: 14px 0 8px; }
.ask-up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.ask-up-grid li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.ask-up-grid .ico { color: var(--ink-3); flex: none; }

.ask-up-note {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
}

/* ==========================================================================
   历史记录页（history.html）
   ========================================================================== */
.hs { padding-top: 56px; padding-bottom: 72px; max-width: 900px; }
.hs-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; }
.hs-h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.hs-sub { color: var(--ink-2); font-size: .93rem; line-height: 1.7; max-width: 54ch; margin-bottom: 24px; }

.hs-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.hs-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-2); font-size: .88rem; transition: all .18s var(--ease);
}
.hs-tab:hover { border-color: var(--line-3); color: var(--ink); }
.hs-tab.on { border-color: transparent; background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.hs-tab b { font-size: .78rem; opacity: .75; }

.hs-need { padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 20px; }
.hs-need p { color: var(--ink-2); font-size: .92rem; line-height: 1.7; margin-bottom: 16px; }

.hs-list { display: grid; gap: 10px; }
.hs-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); transition: border-color .18s var(--ease), background .18s var(--ease);
}
.hs-item:hover { border-color: var(--line-3); background: var(--surface-3); }
.hs-item.pinned { border-color: rgba(79, 211, 209, .38); background: rgba(79, 211, 209, .05); }

.hs-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.hs-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-line1 b { font-size: .95rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-pin-tag { flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(79, 211, 209, .16); color: var(--teal); }
.hs-line2 { font-size: .78rem; color: var(--ink-3); }
.hs-line3 { font-size: .8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hs-st { flex: none; font-size: 10.5px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-3); }
.hs-st.done { background: rgba(79, 211, 209, .16); color: var(--teal); }
.hs-st.failed { background: rgba(255, 138, 126, .14); color: var(--danger); }

.hs-acts { display: flex; gap: 6px; flex: none; padding-top: 2px; }
.hs-acts .mini { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.hs-empty { padding: 26px 4px; color: var(--ink-3); font-size: .88rem; line-height: 1.8; }

@media (max-width: 640px) {
  .hs { padding-top: 36px; }
  .hs-item { flex-direction: column; }
  .hs-acts { padding-top: 4px; }
}

/* ==========================================================================
   抽屉里的历史记录（就地展开，默认收起）
   ========================================================================== */
.hs-group { display: grid; gap: 4px; }
.hs-parent { width: 100%; }
.hs-parent .hs-caret { margin-left: auto; width: 14px; height: 14px; color: var(--ink-3); transition: transform .22s var(--ease); }
.hs-group.open .hs-parent { background: rgba(79, 211, 209, .1); color: #a8f3f0; }
.hs-group.open .hs-caret { transform: rotate(180deg); }
.hs-parent[aria-expanded="true"] { color: #a8f3f0; }

.hs-panel {
  margin: 2px 0 4px 10px; padding: 8px 0 8px 8px;
  border-left: 1px solid var(--line-2);
  display: grid; gap: 7px;
}
.hs-ptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.hs-ptab {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 27px; border-radius: 7px; border: 1px solid var(--line-2);
  color: var(--ink-3); font-size: 11.5px; transition: all .16s var(--ease);
}
.hs-ptab b { font-size: 10.5px; opacity: .8; }
.hs-ptab:hover { color: var(--ink); border-color: var(--line-3); }
.hs-ptab.on { background: rgba(79, 211, 209, .14); border-color: rgba(79, 211, 209, .4); color: #a8f3f0; }

.hs-plist { display: grid; gap: 3px; max-height: 300px; overflow-y: auto; }
.hs-pitem { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding: 2px 4px 2px 6px; }
.hs-pitem:hover { background: rgba(255, 255, 255, .06); }
.hs-pitem.pin .hs-ptitle { color: #a8f3f0; }
.hs-pmain { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 4px 0; }
.hs-ptitle { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-ptitle .pin { width: 11px; height: 11px; flex: none; color: var(--teal); }
.hs-pmeta { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.hs-pst { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); flex: none; }
.hs-pst.done { background: var(--teal); }
.hs-pst.failed { background: var(--danger); }

.hs-pacts { display: flex; gap: 1px; flex: none; opacity: 0; transition: opacity .16s var(--ease); }
.hs-pitem:hover .hs-pacts, .hs-pitem:focus-within .hs-pacts { opacity: 1; }
.hs-pico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ink-3); }
.hs-pico:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.hs-pico.danger:hover { color: var(--danger); }
/* 抽屉「音乐」那一栏的试听按钮：常显、够大、好点 */
.hs-play {
  flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; line-height: 1;
  border: 1px solid rgba(79, 211, 209, .45); background: rgba(79, 211, 209, .12); color: #a8f3f0;
}
.hs-play:hover { background: rgba(79, 211, 209, .26); color: #d9fffd; }

.hs-pempty { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; padding: 6px 2px; }

/* 触屏没有 hover，操作按钮常显 */
@media (hover: none) {
  .hs-pacts { opacity: 1; }
}

/* 首页小字现在更长（列了四个品牌 + 四项能力），把宽度放宽一点并让两行长度均衡 */
.hero-in .lede { max-width: 640px; text-wrap: balance; }

/* 历史记录三栏的补充样式：三个页签、缩略图网格、放大灯箱 */
.hs-ptabs { grid-template-columns: repeat(3, 1fr); }
.hs-ptab { font-size: 11px; padding: 0 4px; }

.hs-ptag {
  font-style: normal; flex: none; font-size: 9.5px; padding: 0 4px;
  border-radius: 4px; background: rgba(79, 211, 209, .16); color: var(--teal);
}
.hs-ptag.work { background: rgba(255, 255, 255, .1); color: var(--ink-3); }

/* 缩略图网格 */
.hs-plist.grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.hs-thumb { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: var(--surface-3); }
.hs-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.hs-thumb-acts {
  position: absolute; top: 3px; right: 3px; display: flex; gap: 3px;
  opacity: 0; transition: opacity .16s var(--ease);
}
.hs-thumb:hover .hs-thumb-acts, .hs-thumb:focus-within .hs-thumb-acts { opacity: 1; }
.hs-thumb .hs-pico {
  width: 22px; height: 22px; border-radius: 6px; color: #fff;
  background: rgba(10, 12, 14, .72); backdrop-filter: blur(4px);
}
.hs-thumb .hs-pico:hover { background: rgba(79, 211, 209, .9); color: #04211f; }
.hs-thumb figcaption {
  padding: 4px 5px 5px; font-size: 10px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (hover: none) { .hs-thumb-acts { opacity: 1; } }

/* 放大看（全屏灯箱） */
body.hs-viewing { overflow: hidden; }
.hs-view {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; gap: 14px;
  grid-template-rows: 1fr auto;
  padding: 42px 24px 30px;
  background: rgba(6, 8, 10, .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hs-view video {
  max-width: 88vw; max-height: 82vh; border-radius: 10px; background: #000; box-shadow: var(--sh-3);
}
/* 音乐：放大框里就是个能拖的播放器 */
.hs-view audio {
  width: min(560px, 86vw); border-radius: 10px; box-shadow: var(--sh-3);
}
/* 首页灵感里的音乐卡：左下角常显一个试听圆钮（跟音乐页那套长得一样） */
.insp-play {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  display: grid; place-items: center; cursor: pointer;
  background: rgba(6, 12, 14, .62); color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.insp-play .ico { width: 16px; height: 16px; }
.insp-play:hover { background: rgba(79, 211, 209, .95); color: #04211f; transform: scale(1.06); }
.insp-card.playing .insp-cover { outline: 2px solid rgba(79, 211, 209, .65); outline-offset: -2px; }
.insp-card.playing .insp-name { color: #a8f3f0; }
.hs-view img {
  max-width: min(94vw, 1100px); max-height: 78vh; width: auto; height: auto;
  border-radius: var(--r-md); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.hs-view-x {
  position: absolute; top: 16px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .1); display: grid; place-items: center;
}
.hs-view-x:hover { background: rgba(255, 255, 255, .2); }
.hs-view-dl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: var(--r-pill);
  background: var(--btn); color: var(--btn-ink); font-size: .88rem; font-weight: 600;
}
.hs-view-dl:hover { background: var(--btn-h); }

/* 首页版式：大字居中，小字整行放下且比大字略长（用户要求） */
.hero-in .lede { font-size: 18px; max-width: 880px; letter-spacing: .04em; }
@media (max-width: 780px) { .hero-in .lede { font-size: 14.5px; } }

/* 出图结果：鼠标移上去出「放大看 / 下载这张」两个图标 */
.img-tile { position: relative; }
.img-tile .img-acts {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .16s var(--ease);
}
.img-tile:hover .img-acts, .img-tile:focus-within .img-acts { opacity: 1; }
.img-tile .hs-pico {
  width: 26px; height: 26px; border-radius: 7px; color: #fff;
  background: rgba(10, 12, 14, .74); backdrop-filter: blur(4px);
}
.img-tile .hs-pico:hover { background: rgba(79, 211, 209, .9); color: #04211f; }
.img-tile img { cursor: zoom-in; }
@media (hover: none) { .img-tile .img-acts { opacity: 1; } }

/* ==========================================================================
   聊天页（chat.html）
   ========================================================================== */
.chat-body { overflow: hidden; }
.chat-main { display: flex; flex-direction: column; height: 100vh; }

.chat-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.chat-wrap { max-width: 780px; margin: 0 auto; padding: 28px 20px 20px; }

.chat-hello { text-align: center; padding: 12vh 0 24px; }
.chat-hello h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: .02em; margin-bottom: 12px;
  background: linear-gradient(135deg, #e8f6f5, #7fe7e5 40%, #4fd3d1 60%, #c9f7f5);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.chat-hello p { font-size: 14px; color: var(--ink-3); line-height: 1.8; }

.chat-list { display: grid; gap: 26px; }

/* 用户：右侧灰气泡 */
.cc-msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cc-bubble {
  max-width: 78%; padding: 11px 15px; border-radius: 16px 16px 4px 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--line-2);
  font-size: 14.5px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-break: break-word;
}
.cc-time { font-size: 11px; color: var(--ink-3); }

/* 助手：左边品牌 logo + 模型名 + 正文 */
.cc-msg.ai { display: flex; flex-direction: column; gap: 8px; }
.cc-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cc-who b { font-weight: 700; color: var(--ink); }
.cc-logo { width: 18px; height: 18px; flex: none; color: #e8e8ea; }
.cc-logo.sm { width: 15px; height: 15px; }
.cc-webtag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(79, 211, 209, .16); color: var(--teal); }

.cc-body { font-size: 14.5px; line-height: 1.85; color: var(--ink); white-space: pre-wrap; word-break: break-word; }

.cc-think { font-size: 13px; color: var(--ink-3); }
.cc-think b { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: 4px; }
.cc-skel { display: grid; gap: 8px; }
.cc-skel i { display: block; height: 11px; border-radius: 999px; background: var(--surface-3); animation: cc-sk 1.5s ease-in-out infinite; }
.cc-skel i:nth-child(2) { animation-delay: .18s; }
.cc-skel i:nth-child(3) { animation-delay: .36s; }
@keyframes cc-sk { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }

.cc-acts { display: flex; gap: 2px; opacity: .55; transition: opacity .16s var(--ease); }
.cc-msg.ai:hover .cc-acts { opacity: 1; }

/* ---------- 底部输入区 ---------- */
.chat-composer { flex: none; padding: 10px 20px 16px; background: linear-gradient(180deg, transparent, rgba(10, 10, 10, .9) 30%); }
.cc-box {
  max-width: 780px; margin: 0 auto;
  background: rgba(22, 22, 25, .96); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 12px 12px 8px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cc-box:focus-within { border-color: rgba(79, 211, 209, .5); box-shadow: 0 0 0 3px rgba(79, 211, 209, .1); }
.cc-box textarea {
  width: 100%; border: 0; background: none; outline: none; resize: none;
  color: var(--ink); font-size: 15px; line-height: 1.7; padding: 2px 6px 8px; max-height: 200px;
  /* 空的时候也留出一行多一点的高度，输入框不显得局促（用户要求稍微大一点） */
  min-height: 30px;
}
.cc-box textarea::placeholder { color: var(--ink-3); }

.cc-row { display: flex; align-items: center; gap: 8px; }
.cc-left, .cc-right { display: flex; align-items: center; gap: 6px; }
.cc-right { margin-left: auto; }

.cc-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-2); transition: all .16s var(--ease); }
.cc-ico:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.cc-ico.sm { width: 28px; height: 28px; }
.cc-ico.sm .ico { width: 15px; height: 15px; }

.cc-web {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px;
  transition: all .16s var(--ease);
}
.cc-web:hover { border-color: var(--line-3); color: var(--ink); }
.cc-web .cc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.cc-web b { font-weight: 500; }
.cc-web.on { border-color: rgba(79, 211, 209, .45); color: #a8f3f0; background: rgba(79, 211, 209, .1); }
.cc-web.on .cc-dot { background: var(--teal); }
.cc-web:disabled { opacity: .45; cursor: not-allowed; }

.cc-model-wrap { position: relative; }
.cc-model {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px;
  transition: all .16s var(--ease); max-width: 240px;
}
.cc-model:hover { border-color: var(--line-3); color: var(--ink); }
.cc-mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-price { color: var(--teal); font-size: 11.5px; flex: none; }
.cc-model .caret { width: 12px; height: 12px; flex: none; }

.cc-send {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--btn); color: var(--btn-ink); transition: all .16s var(--ease);
}
.cc-send:hover { background: var(--btn-h); }
.cc-send.busy { opacity: .5; cursor: default; }

.cc-tip { max-width: 780px; margin: 8px auto 0; font-size: 11.5px; color: var(--ink-3); min-height: 15px; }

/* 聊天页里模型面板往上弹 */
.cc-model-wrap .hc-picker { bottom: calc(100% + 8px); top: auto; left: auto; right: 0; }

@media (max-width: 720px) {
  .chat-wrap { padding: 16px 14px; }
  .chat-composer { padding: 8px 12px 12px; }
  .cc-bubble { max-width: 88%; }
  .cc-price { display: none; }
}

/* 出图进度条 */
.gen-prog { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.gp-label { font-size: 12.5px; color: var(--ink-2); }
.gp-head b { font-size: 13px; color: var(--teal); }
.gp-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.gp-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #0d9488, #4fd3d1);
  transition: width .9s cubic-bezier(.22, .61, .36, 1);
}
.gp-foot { margin-top: 7px; font-size: 11.5px; color: var(--ink-3); }

/* ==========================================================================
   聊天页修订：骨架条要"动起来"、模型挪到 ➕ 旁边、选择面板与上传面板对齐首页
   ========================================================================== */

/* 1) 等待时那三条骨架：一道亮光从左扫到右，同时长度自己一伸一缩、三条各走各的节奏，
      看着更像真的在想东西，而不是三条死板的灰条 */
.cc-skel { display: grid; gap: 9px; margin-top: 2px; }
.cc-skel i {
  display: block; height: 12px; border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-3) 38%, rgba(255, 255, 255, .13) 50%, var(--surface-3) 62%, var(--surface-3) 100%);
  background-size: 260% 100%;
  animation: cc-sweep 1.35s linear infinite, cc-len 2.4s ease-in-out infinite;
}
/* 后面两条：亮光错开一点，长度用不同的快慢和起点，三条就不会齐步走 */
.cc-skel i:nth-child(2) { animation-duration: 1.35s, 1.9s; animation-delay: .12s, .45s; }
.cc-skel i:nth-child(3) { animation-duration: 1.35s, 2.9s; animation-delay: .24s, .9s; }
@keyframes cc-sweep {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@keyframes cc-len {
  0%   { transform: scaleX(.6);   opacity: .55; }
  32%  { transform: scaleX(1);    opacity: 1; }
  58%  { transform: scaleX(.76);  opacity: .78; }
  84%  { transform: scaleX(1.05); opacity: 1; }
  100% { transform: scaleX(.6);   opacity: .55; }
}
/* 文案那行不要被骨架压住 */
.cc-think { margin-bottom: 2px; }

/* 2) 模型按钮挪到 ➕ 旁边（左边一组） */
.cc-left { gap: 8px; }
.cc-model-wrap .ask-picker { left: 0; right: auto; bottom: calc(100% + 10px); top: auto; }
.cc-model-wrap .ask-up { left: 0; right: auto; bottom: calc(100% + 10px); top: auto; }
.ask-plus.on { background: rgba(79, 211, 209, .14); color: #a8f3f0; }

/* 3) 传上来的文件：显示成小标签 */
.cc-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 8px; }
.cc-files[hidden] { display: none; }
.cc-file {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 9px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-2); max-width: 100%;
}
.cc-file i { font-style: normal; font-size: 10.5px; color: var(--teal); }
.cc-file button { width: 18px; height: 18px; border-radius: 50%; color: var(--ink-3); display: grid; place-items: center; }
.cc-file button:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }

/* 4) 回答下面那排按钮稍微明显一点 */
.cc-acts { opacity: .6; }

/* 上传面板要弹在输入框上方：给它一个定位基准 */
.cc-box { position: relative; }
.cc-box .ask-up, .cc-box .ask-picker {
  top: auto; bottom: calc(100% + 8px); left: 0; right: auto;
}
.cc-model-wrap .ask-picker { left: 0; right: auto; }

/* ==========================================================================
   聊天页修订 2
   ========================================================================== */
/* 1) 聊天页不要那一层白色网点（theme.js 每页都会加 .canvas） */
.chat-body .canvas { display: none; }

/* 2) 选择面板里"几个模型"的位置：让它跟首页一样贴着右边（勾 → 箭头依次排在后面） */
.cc-model-wrap .ask-count { margin-left: auto; }
.cc-model-wrap .ask-arrow { margin-left: 2px; }
.cc-model-wrap .ask-ck { margin-left: 4px; }

/* 底部这一行的控件高度统一：模型框和"联网"共用同一个高度变量，改一个两个一起变，
   不会再出现"模型框比联网高"这种各写各的漂移。模型框再瘦一点，别比联网显眼。 */
.cc-row { --cc-chip-h: 28px; }
.cc-ico { width: 28px; height: 28px; }
.cc-ico .ico { width: 17px; height: 17px; }
.cc-ico.sm { width: 26px; height: 26px; }

.cc-model { height: var(--cc-chip-h); padding: 0 8px; font-size: 11.5px; gap: 4px; }
.cc-model .cc-mark .cc-logo { width: 14px; height: 14px; }
.cc-model .caret { width: 10px; height: 10px; }
.cc-mname { font-size: 11.5px; }
.cc-price { font-size: 11px; }

.cc-web { height: var(--cc-chip-h); padding: 0 10px; font-size: 12px; gap: 5px; }
.cc-send { width: 32px; height: 32px; }
.cc-send .ico { width: 17px; height: 17px; }

/* 模型框和 ➕ 的图标都小一号 */
.cc-left { gap: 6px; }
.ask-plus .ico { width: 16px; height: 16px; }

/* ==========================================================================
   账户面板（抽屉左下角"工作台"点开的那块）+ 用户反馈弹窗
   ========================================================================== */
.ac-pop { width: 300px; padding: 0; overflow: hidden; }

/* 头部：头像 + 昵称 + 套餐角标 */
.ac-card {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;   /* 换行是为了下面那行到期时间能占满一整行 */
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, rgba(79, 211, 209, .12), rgba(20, 20, 24, .2));
  border-bottom: 1px solid var(--line);
}
.ac-ava {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; color: #04211f;
  background: linear-gradient(135deg, #7fe7e5, #4fd3d1);
}
.ac-ava[data-seed="3"] { background: linear-gradient(135deg, #f0abfc, #c084fc); }
.ac-ava[data-seed="2"] { background: linear-gradient(135deg, #fcd34d, #fb923c); }
.ac-ava[data-seed="1"] { background: linear-gradient(135deg, #93c5fd, #60a5fa); }
.ac-who { min-width: 0; display: grid; gap: 3px; }
.ac-who b { font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-who i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ac-plan {
  margin-left: auto; flex: none; font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--ink-3); border: 1px solid var(--line-2);
}
.ac-plan.vip { background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; border-color: transparent; font-weight: 600; }
/* 会员到期时间：单独占一行的小字 */
.ac-exp { flex: 0 0 100%; margin: 1px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* 两个主按钮 */
.ac-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 6px; }
.ac-btn {
  height: 36px; border-radius: 10px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff;
  transition: opacity .16s var(--ease);
}
.ac-btn:hover { opacity: .9; }
.ac-btn.ghost { background: transparent; border: 1px solid var(--line-3); color: var(--ink); }
.ac-btn.ghost:hover { background: var(--hover); }

/* 积分类两行 */
.ac-rows { padding: 10px 16px 4px; display: grid; gap: 2px; }
.ac-row {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 2px; font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.ac-row b { margin-left: auto; font-size: 15px; color: var(--ink); }
.ac-row .ac-arrow { font-style: normal; color: var(--ink-3); font-size: 15px; }
a.ac-row:hover { color: var(--ink); }
.ac-sign {
  margin-left: auto; height: 26px; padding: 0 12px; border-radius: 999px;
  background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; font-size: 12px; font-weight: 600;
}
.ac-sign.done { background: var(--surface-3); color: var(--ink-3); }

/* 菜单 */
.ac-menu { padding: 6px 8px 4px; display: grid; gap: 1px; }
.ac-mi {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 38px; padding: 0 9px; border-radius: 9px;
  font-size: 13px; color: var(--ink-2); text-align: left;
}
.ac-mi:hover { background: var(--hover); color: var(--ink); }
.ac-mi em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--teal); }
.ac-mi i { margin-left: auto; font-style: normal; color: var(--ink-3); }
.ac-mi em + i { margin-left: 6px; }

.ac-hint { padding: 0 16px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.ac-hint.ok { color: var(--teal); }
.ac-hint.warn { color: var(--danger); }

.ac-out {
  display: block; width: calc(100% - 24px); margin: 8px 12px 12px;
  height: 36px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.ac-out:hover { background: var(--hover); color: var(--ink); }

/* ---------- 用户反馈弹窗 ---------- */
.fb-mask {
  position: fixed; inset: 0; z-index: 220;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5, 6, 9, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fb {
  position: relative; width: min(94vw, 520px); max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: 30px 26px 22px;
}
.fb-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-size: 14px;
}
.fb-x:hover { background: var(--hover); color: var(--ink); }
.fb h3 { font-size: 21px; font-weight: 700; text-align: center; margin-bottom: 22px; }
.fb-label { font-size: 12.5px; color: var(--ink-2); margin: 16px 0 9px; }
.fb-label b { color: var(--danger); font-weight: 400; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kind {
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px;
  transition: all .16s var(--ease);
}
.fb-kind:hover { border-color: var(--line-3); color: var(--ink); }
.fb-kind.on { border-color: rgba(79, 211, 209, .5); background: rgba(79, 211, 209, .12); color: #a8f3f0; font-weight: 600; }
.fb textarea, .fb input[type=email] {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--ink); font-size: 13.5px; line-height: 1.7; resize: vertical;
}
.fb textarea::placeholder, .fb input::placeholder { color: var(--ink-3); }
.fb textarea:focus, .fb input:focus { outline: none; border-color: rgba(79, 211, 209, .5); }
.fb-shots { display: flex; flex-wrap: wrap; gap: 9px; }
.fb-add {
  width: 74px; height: 74px; border-radius: var(--r-sm);
  border: 1px dashed var(--line-3); color: var(--ink-3); font-size: 22px;
  display: grid; place-items: center;
}
.fb-add:hover { border-color: var(--teal); color: var(--teal); }
.fbShot { position: relative; width: 74px; height: 74px; border-radius: var(--r-sm); overflow: hidden; }
.fbShot img { width: 100%; height: 100%; object-fit: cover; }
.fbShot button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(10, 12, 14, .8); color: #fff; font-size: 12px;
  display: grid; place-items: center;
}
.fb-go {
  display: block; width: 100%; height: 46px; margin-top: 22px;
  border-radius: var(--r-sm); font-size: 15px; font-weight: 600;
  background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff;
}
.fb-go:hover { opacity: .92; }
.fb-go:disabled { opacity: .55; }
.fb-tip { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--ink-3); min-height: 17px; }
.fb-tip.ok { color: var(--teal); }
.fb-tip.warn { color: var(--danger); }

/* ==========================================================================
   积分明细页（ledger.html）＋ 邀请好友页（invite.html）
   ========================================================================== */
.lg, .iv { max-width: 900px; padding-top: 44px; padding-bottom: 72px; }
.lg-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-2); margin-bottom: 18px;
}
.lg-back:hover { color: var(--ink); }

.lg-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lg-top h1 { font-size: 1.45rem; font-weight: 700; }
.lg-now { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.lg-now b { font-size: 15px; color: var(--ink); margin-left: 4px; }

.lg-tabs { display: flex; gap: 8px; margin: 18px 0 16px; }
.lg-tab {
  height: 34px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px;
  transition: all .16s var(--ease);
}
.lg-tab:hover { border-color: var(--line-3); color: var(--ink); }
.lg-tab.on { border-color: transparent; background: var(--btn); color: var(--btn-ink); font-weight: 600; }

.lg-list { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.lg-item {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 4px; border-bottom: 1px solid var(--line);
}
.lg-item:hover { background: rgba(255, 255, 255, .025); }
.lg-ico {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.lg-ico.in { background: rgba(79, 211, 209, .14); color: var(--teal); }
.lg-ico.out { background: rgba(255, 138, 126, .14); color: var(--danger); }
.lg-mid { min-width: 0; display: grid; gap: 4px; }
.lg-mid b { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-mid i { font-style: normal; font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.lg-mid em { font-style: normal; padding: 1px 7px; border-radius: 5px; background: var(--surface-3); color: var(--ink-3); font-size: 10.5px; }
.lg-num { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg-num.in { color: var(--teal); }
.lg-num.out { color: var(--danger); }
.lg-bal { flex: none; width: 92px; text-align: right; font-size: 11.5px; color: var(--ink-3); }
.lg-bal b { color: var(--ink-2); }
.lg-empty { padding: 34px 4px; text-align: center; color: var(--ink-3); font-size: 13px; line-height: 1.9; }
.lg-more {
  display: block; margin: 18px auto 0; height: 36px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px;
}
.lg-more:hover { border-color: var(--line-3); color: var(--ink); }

/* ---------- 邀请好友 ---------- */
.iv-hero {
  text-align: center; padding: 30px 20px 26px; margin-bottom: 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(79, 211, 209, .09), rgba(124, 58, 237, .09));
}
.iv-gift {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; color: var(--teal);
  background: rgba(79, 211, 209, .13);
}
.iv-gift .ico { width: 26px; height: 26px; }
.iv-hero h1 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800; margin-bottom: 10px; }
.iv-hero h1 em { font-style: normal; color: var(--teal); }
.iv-hero p { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.iv-hero p b { color: var(--teal); }

.iv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.iv-stat {
  padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); text-align: center; display: grid; gap: 6px;
}
.iv-stat span { font-size: 12px; color: var(--ink-3); }
.iv-stat b { font-size: 26px; font-weight: 800; color: var(--teal); line-height: 1; }
.iv-stat i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

.iv-box { padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.iv-label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.iv-link { display: flex; gap: 10px; }
.iv-link input {
  flex: 1; min-width: 0; height: 40px; padding: 0 13px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13px;
}
.iv-link .btn { height: 40px; border-radius: var(--r-sm); padding: 0 20px; font-size: 13px; }
.iv-code { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.iv-code b { color: var(--ink); letter-spacing: .1em; }
.iv-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.iv-note b { color: var(--teal); }

.iv-need { padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 18px; }
.iv-need p { color: var(--ink-2); font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }

.iv-h2 { font-size: 15px; font-weight: 600; margin: 26px 0 12px; }
.iv-table { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.iv-thead, .iv-tr {
  display: grid; grid-template-columns: 1.4fr 1.4fr .8fr .8fr;
  gap: 10px; padding: 12px 16px; align-items: center;
}
.iv-thead { background: var(--surface-2); font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.iv-tr { font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.iv-tr:last-child { border-bottom: 0; }
.iv-tr:hover { background: rgba(255, 255, 255, .025); }
.iv-plus { color: var(--teal); font-weight: 600; }
.iv-ok { color: var(--ink-3); font-size: 12px; }
.iv-empty { padding: 26px; text-align: center; font-size: 13px; color: var(--ink-3); }

@media (max-width: 640px) {
  .lg, .iv { padding-top: 28px; }
  .lg-bal { display: none; }
  .iv-link { flex-direction: column; }
  .iv-thead, .iv-tr { grid-template-columns: 1.3fr 1fr .7fr; }
  .iv-thead span:last-child, .iv-tr span:last-child { display: none; }
}

/* ==========================================================================
   账户面板：固定在左下角（就是抽屉左下角那块），不是从别处飞出来
   ========================================================================== */
.ac-pop {
  position: fixed; right: auto; top: auto;
  left: 14px; bottom: 78px;          /* JS 打开时会按按钮位置再校一次 */
  z-index: 90; width: 300px; padding: 0; overflow: hidden;
  transform-origin: left bottom;
  animation: ac-in .18s cubic-bezier(.22, .61, .36, 1);
}
@keyframes ac-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* 左下角那个用户头像按钮（登录后取代"工作台"文字和积分数字） */
.user-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.user-btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-3); }
.ub-ava {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #04211f;
  background: linear-gradient(135deg, #7fe7e5, #4fd3d1);
}
.ub-ava[data-seed="3"] { background: linear-gradient(135deg, #f0abfc, #c084fc); }
.ub-ava[data-seed="2"] { background: linear-gradient(135deg, #fcd34d, #fb923c); }
.ub-ava[data-seed="1"] { background: linear-gradient(135deg, #93c5fd, #60a5fa); }
.ub-txt { min-width: 0; display: grid; gap: 2px; text-align: left; }
.ub-txt b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ub-txt i { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.ub-txt i.vip { color: #f0abfc; }
.ub-caret { margin-left: auto; color: var(--ink-3); }

/* 左下角头像按钮：展开时箭头翻过来 */
.user-btn .ub-caret { transition: transform .2s var(--ease); }
.user-btn.open { border-color: rgba(79, 211, 209, .45); background: rgba(79, 211, 209, .08); }
.user-btn.open .ub-caret { transform: rotate(180deg); }

/* ==========================================================================
   我们自己的确认框：屏幕正中，跟平台风格一致（替掉浏览器那个白框）
   ========================================================================== */
.wc-mask {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5, 6, 9, .72);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.wc {
  width: min(92vw, 350px);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: 22px 22px 18px;
  animation: wc-in .18s cubic-bezier(.22, .61, .36, 1);
}
@keyframes wc-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.wc-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.wc-text { margin-top: 9px; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); word-break: break-word; }
.wc-btns { display: flex; gap: 9px; margin-top: 20px; }
.wc-no, .wc-yes {
  flex: 1; height: 38px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; transition: all .16s var(--ease);
}
.wc-no { border: 1px solid var(--line-3); color: var(--ink-2); background: transparent; }
.wc-no:hover { background: var(--hover); color: var(--ink); }
.wc-yes { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; }
.wc-yes:hover { opacity: .92; }
.wc-yes.danger { background: linear-gradient(135deg, #b91c1c, #ef4444); }

/* ==========================================================================
   账户面板收小一号（用户要求"缩小 50%"：宽 300→230，内边距和字号也一起压）
   ========================================================================== */
.ac-pop { width: 230px; bottom: 62px; }
.ac-card { padding: 11px 11px 10px; gap: 8px; }
.ac-ava { width: 32px; height: 32px; font-size: 13px; }
.ac-who b { font-size: 12.5px; }
.ac-who i { font-size: 10.5px; }
.ac-plan { font-size: 9.5px; padding: 2px 7px; }

.ac-two { gap: 6px; padding: 10px 11px 4px; }
.ac-btn { height: 30px; font-size: 11.5px; border-radius: 8px; }

.ac-rows { padding: 6px 11px 2px; }
.ac-row { height: 31px; font-size: 11.5px; gap: 6px; }
.ac-row b { font-size: 12.5px; }
.ac-sign { height: 21px; padding: 0 9px; font-size: 10.5px; }

.ac-menu { padding: 4px 5px 2px; }
.ac-mi { height: 30px; font-size: 11.5px; padding: 0 7px; border-radius: 7px; gap: 6px; }
.ac-mi em { font-size: 10px; }

.ac-hint { padding: 0 11px; font-size: 10.5px; }
.ac-out { width: calc(100% - 18px); margin: 6px 9px 9px; height: 30px; font-size: 11.5px; border-radius: 8px; }

/* 账户面板再压一轮：整体面积比原来小约一半（用户要求缩小 50%） */
.ac-pop { width: 212px; bottom: 58px; }
.ac-card { padding: 9px 9px 8px; gap: 7px; }
.ac-ava { width: 29px; height: 29px; font-size: 12px; }
.ac-who b { font-size: 12px; }
.ac-who i { font-size: 10px; }
.ac-plan { font-size: 9px; padding: 2px 6px; }

.ac-two { gap: 5px; padding: 8px 9px 3px; }
.ac-btn { height: 27px; font-size: 11px; border-radius: 7px; }

.ac-rows { padding: 5px 9px 1px; }
.ac-row { height: 27px; font-size: 11px; gap: 5px; }
.ac-row b { font-size: 12px; }
.ac-sign { height: 19px; padding: 0 8px; font-size: 10px; }

.ac-menu { padding: 3px 4px 2px; }
.ac-mi { height: 27px; font-size: 11px; padding: 0 6px; border-radius: 6px; gap: 5px; }
.ac-mi em { font-size: 9.5px; }

.ac-hint { padding: 0 9px; font-size: 10px; }
.ac-out { width: calc(100% - 14px); margin: 5px 7px 7px; height: 27px; font-size: 11px; border-radius: 7px; }

/* ==========================================================================
   会员订阅 / 购买积分页（vip.html）
   ========================================================================== */
.vp { max-width: 1180px; padding-top: 40px; padding-bottom: 150px; }
.vp-h1 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; text-align: center; margin: 6px 0 18px; }

.vp-tabs { display: flex; justify-content: center; gap: 6px; padding: 5px; margin: 0 auto 12px; width: max-content; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.vp-tab { height: 38px; padding: 0 24px; border-radius: var(--r-pill); color: var(--ink-2); font-size: 13.5px; transition: all .18s var(--ease); white-space: nowrap; }
.vp-tab:hover { color: var(--ink); }
.vp-tab.on { background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.vp-note { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-bottom: 22px; }

.vp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vp-empty { padding: 40px 10px; text-align: center; color: var(--ink-3); font-size: 13.5px; line-height: 1.9; }

/* ---------- 会员卡 ---------- */
.vp-card {
  position: relative; padding: 18px 16px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface-2); display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.vp-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.vp-card.on { border-color: var(--teal); background: rgba(79, 211, 209, .06); }
.vp-ribbon {
  position: absolute; top: -1px; right: 14px;
  padding: 3px 11px; border-radius: 0 0 8px 8px;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1206;
  font-size: 11px; font-weight: 700;
}
.vp-card header { display: flex; align-items: center; gap: 8px; }
.vp-card header .ico { width: 18px; height: 18px; color: var(--teal); }
.vp-card header b { font-size: 15px; font-weight: 700; }

.vp-price { display: flex; align-items: baseline; gap: 3px; }
.vp-price b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.vp-price i { font-style: normal; font-size: 13px; color: var(--ink-3); }

.vp-terms { display: flex; gap: 5px; }
.vp-term {
  flex: 1; height: 28px; border-radius: 7px; border: 1px solid var(--line-2);
  color: var(--ink-3); font-size: 12px; transition: all .16s var(--ease);
}
.vp-term:hover { color: var(--ink); border-color: var(--line-3); }
.vp-term.on { background: rgba(79, 211, 209, .16); border-color: rgba(79, 211, 209, .45); color: #a8f3f0; font-weight: 600; }
/* 按天的套餐没有三档可选，这里放一句说明，高度跟那排按钮对齐 */
.vp-day { flex: 1; margin: 0; min-height: 28px; display: grid; place-items: center; text-align: center; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }

.vp-feats { display: grid; gap: 9px; margin: 2px 0 4px; }
.vp-feats li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.vp-feats li .ico { flex: none; margin-top: 2px; color: var(--teal); }
.vp-feats li b { color: var(--ink); }
.vp-feats li.tip { color: var(--ink-3); }
.vp-feats li.tip .ico { color: var(--ink-3); }

.vp-choose {
  margin-top: auto; height: 38px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line-3); color: var(--ink); background: rgba(255, 255, 255, .04);
  transition: all .16s var(--ease);
}
.vp-choose:hover { background: var(--hover); }
.vp-choose.on { background: linear-gradient(135deg, #0d9488, #14b8a6); border-color: transparent; color: #fff; }

/* ---------- 积分卡（图1 那种：大数字 + 划线原价 + 省多少 + 单价） ---------- */
.vp-card.pack { align-items: center; text-align: center; gap: 6px; padding: 22px 16px 16px; }
.vp-credits { display: flex; align-items: baseline; gap: 5px; }
.vp-credits b { font-size: 34px; font-weight: 800; color: #fbbf24; letter-spacing: -.02em; }
.vp-credits i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.vp-deal { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.vp-deal b { font-size: 22px; font-weight: 800; }
.vp-deal s { font-size: 13px; color: var(--ink-3); }
.vp-save { font-size: 11.5px; color: #34d399; font-weight: 600; }
.vp-unit { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.vp-card.pack .vp-choose { width: 100%; }

/* ---------- 底部支付栏 ---------- */
.vp-pay {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 28px;
  background: rgba(12, 12, 15, .95);
  border-top: 1px solid var(--line-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.vp-sel { font-size: 14px; color: var(--ink-2); }
.vp-sel b { color: var(--ink); font-weight: 600; }
.vp-sel em { font-style: normal; font-size: 18px; font-weight: 800; color: var(--teal); margin-left: 4px; }
.vp-methods { margin-left: auto; display: flex; gap: 10px; }
.vp-paybtn {
  height: 44px; padding: 0 30px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  transition: opacity .16s var(--ease);
}
.vp-paybtn em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .22); }
.vp-paybtn.wx { background: linear-gradient(135deg, #15803d, #22c55e); }
.vp-paybtn.alipay { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.vp-paybtn:hover { opacity: .92; }
.vp-paybtn:disabled { opacity: .6; }
.vp-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.8; }

@media (max-width: 720px) {
  .vp { padding-bottom: 190px; }
  .vp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vp-pay { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .vp-methods { margin-left: 0; }
  .vp-paybtn { flex: 1; justify-content: center; padding: 0 16px; }
}

/* 卡片网格：用明确的列数，别让长文案把列数挤乱（原来 auto-fill + min-content 会算成 2 列） */
.vp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .vp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vp-grid { grid-template-columns: minmax(0, 1fr); } }

/* 卡片容器改成 flex 换行：宽度可控，不会被其它 grid 规则影响 */
.vp-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.vp-card { flex: 1 1 235px; min-width: 0; }
@media (max-width: 520px) { .vp-card { flex: 1 1 100%; } }

.vp-feats li > span { flex: 1; min-width: 0; }

/* ==========================================================================
   会员与积分的弹窗外壳（卡片样式复用 .vp-*）
   ========================================================================== */
.vp-mask {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 22px;
  background: rgba(5, 6, 9, .84);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vp-modal {
  position: relative; display: flex; flex-direction: column;
  width: min(96vw, 1080px); max-height: 90vh;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
  animation: vp-in .2s cubic-bezier(.22, .61, .36, 1);
}
@keyframes vp-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.vp-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2); font-size: 14px;
}
.vp-x:hover { background: var(--hover); color: var(--ink); }
.vp-title { padding: 20px 20px 14px; text-align: center; font-size: 20px; font-weight: 700; }
.vp-modal .vp-tabs { margin: 0 auto 10px; }
.vp-modal .vp-note { margin-bottom: 14px; }
/* min-height:0 必须有，不然套餐多了撑高的是整块弹窗、底部那排会被裁掉（不是滚动） */
.vp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 16px; }

/* 支付栏在弹窗里贴在底部（不再是整页固定） */
.vp-paybar {
  flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 20px; border-top: 1px solid var(--line-2); background: var(--surface-2);
}
.vp-paybar .vp-foot { margin: 0; flex: 1; text-align: left; min-width: 0; }
.vp-paybar .vp-methods { margin-left: auto; }

.vp-modal .vp-grid { gap: 12px; }
.vp-modal .vp-card { padding: 16px 14px 14px; }
.vp-modal .vp-price b { font-size: 26px; }
.vp-modal .vp-credits b { font-size: 30px; }
.vp-modal .vp-card.pack { padding: 18px 14px 14px; }

@media (max-width: 900px) {
  .vp-mask { padding: 12px; }
  .vp-modal { max-height: 94vh; }
  .vp-paybar { flex-direction: column; align-items: stretch; gap: 10px; }
  .vp-paybar .vp-foot { text-align: center; }
  .vp-paybar .vp-methods { margin-left: 0; }
}

/* 档期按钮上的折扣角标（季付 7折 / 年付 5折），浮在按钮上方 */
.vp-terms { padding-top: 8px; }
.vp-term { position: relative; overflow: visible; }
.vp-off {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 5px;
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(236, 72, 153, .35);
}
.vp-term.on .vp-off { background: linear-gradient(135deg, #e11d48, #db2777); }
/* 划线原价（会员卡的价格行） */
.vp-price s { font-size: 13px; color: var(--ink-3); margin-left: 6px; }

/* 卡片等宽：basis 0 让每张分到一样宽 */
.vp-modal .vp-card { flex: 1 1 0; }
@media (max-width: 520px) { .vp-modal .vp-card { flex: 1 1 100%; } }

/* 支付成功那个弹窗里的对勾 */
.wc.paid { text-align: center; }
.paid-ok { width: 52px; height: 52px; margin: 2px auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(79,211,209,.14); color: var(--teal); }
.paid-ok .ico { width: 26px; height: 26px; }

/* 卡片：电脑端每行 4 个（7 个会员套餐、8 个积分套餐都是 4 个一行）。
   宽度直接按"一行几列"算出来并且不拉伸：这样每一行（哪怕最后一行不满）
   都是同一个宽度、左边对齐。每档留 3px 余量，免得除不尽的时候少排一张。
   （之前这里怎么调都错位，真正原因是卡片之间混进了数组的逗号——
     见 app.js 里 innerHTML 那段 .join('')，逗号占了格子。） */
.vp-modal .vp-card { flex: 0 0 calc((100% - 39px) / 4); min-width: 0; max-width: none; }
@media (max-width: 1100px) { .vp-modal .vp-card { flex-basis: calc((100% - 27px) / 3); } }
@media (max-width: 820px) { .vp-modal .vp-card { flex-basis: calc((100% - 15px) / 2); } }
@media (max-width: 520px) { .vp-modal .vp-card { flex-basis: 100%; } }

/* "（可用于生成图片/视频）"这种小字：单独一行、淡一点。
   没有积分可写的卡片放一个空占位，保证同一排卡片的行数一致、不会上下错开 */
.vp-tiny { display: block; font-style: normal; font-size: 11px; line-height: 1.5; color: var(--ink-3); margin-top: 1px; }
.vp-tiny:empty { min-height: 1.5em; }

/* 卡片里那三个数字（每日轮次 / 每月积分 / 折扣）看着更明显 */
.vp-num { color: #fbbf24; font-size: 14.5px; font-weight: 800; margin: 0 2px; letter-spacing: -.01em; }
.vp-num.disc { color: #fb7185; }
.vp-card.on .vp-num { color: #fcd34d; }
.vp-card.on .vp-num.disc { color: #fda4af; }

/* "预计消耗"那个数字也要显眼；写成 a b.est-num 才压得住上面的 .gen-est b */
.gen-est b.est-num, .est-num { color: #fbbf24; font-size: 15px; font-weight: 800; }
.gen-est s { color: var(--ink-3); margin-left: 4px; font-size: 12px; }

/* "9折"这种别被拆到两行 */
.vp-num { white-space: nowrap; }

/* ============ AI 音乐页（照 Suno：上面创作卡、下面一行一首、底部播放条） ============ */
/* 创作卡自身不另起样式，直接用图片页/漫剧页那套 .gen-box / .gen-bottom，只加面板里的胶囊 */
.mu-ph { left: 2px; top: 6px; right: 16px; font-size: 14px; line-height: 1.7; }
.mu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-chip {
  height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all .16s var(--ease);
}
.mu-chip:hover { color: var(--ink); border-color: var(--line-3); }
.mu-chip.on { background: rgba(79, 211, 209, .16); border-color: rgba(79, 211, 209, .45); color: #a8f3f0; font-weight: 600; }

/* 我的歌：一行一首 */
.mu-list { display: grid; gap: 8px; }
.mu-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); transition: all .18s var(--ease);
}
.mu-item:hover { border-color: var(--line-3); background: var(--surface-3); }
.mu-item.playing { border-color: rgba(79, 211, 209, .5); background: rgba(79, 211, 209, .07); }
.mu-cover {
  position: relative; width: 62px; height: 62px; flex: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #123, #0a0f14) center/cover no-repeat;
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-2);
}
.mu-play {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(6, 12, 14, .62); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.mu-cover:hover .mu-play { background: rgba(79, 211, 209, .95); color: #04211f; transform: scale(1.06); }
.mu-play .ico { width: 15px; height: 15px; }
.mu-mid { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mu-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-meta { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-act {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(79, 211, 209, .45); background: rgba(79, 211, 209, .1); color: #a8f3f0;
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.mu-act:hover { background: rgba(79, 211, 209, .22); }
.mu-act .ico { width: 13px; height: 13px; }
.mu-empty { margin: 22px 0 0; text-align: center; font-size: 13px; line-height: 1.9; color: var(--ink-3); }

/* 底部播放条 */
.mu-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  width: min(760px, 94vw); display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: rgba(12, 16, 20, .94); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--sh-3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mu-bar-cover { width: 40px; height: 40px; flex: none; border-radius: 8px; background: linear-gradient(135deg, #123, #0a0f14) center/cover no-repeat; }
.mu-bar-mid { flex: 1; min-width: 0; display: grid; gap: 6px; }
.mu-bar-top { display: flex; align-items: baseline; gap: 10px; }
.mu-bar-top b { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-bar-time { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mu-bar-track { height: 5px; border-radius: 999px; background: var(--surface-3); cursor: pointer; overflow: hidden; }
.mu-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, #4fd3d1, #7fe7e5); border-radius: 999px; }
.mu-bar-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); text-decoration: none;
}
.mu-bar-btn:hover { background: var(--hover); color: var(--ink); }
.mu-bar-btn .ico { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .mu-cover { width: 52px; height: 52px; }
  .mu-bar { bottom: 10px; gap: 8px; }
  .mu-bar-cover { display: none; }
}

/* ============ 生成记录弹窗（照 aigcc.vip：两个页签 + 状态筛选 + 缩略图卡片） ============ */
.glog-mask {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(4, 6, 8, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.glog {
  width: min(720px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden;
}
.glog-head { display: flex; align-items: center; padding: 16px 18px 10px; }
.glog-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.glog-x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.glog-x:hover { background: var(--hover); color: var(--ink); }
.glog-tabs { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.glog-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 2px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; color: var(--ink-3); font-size: 13.5px;
}
.glog-tab .ico { width: 15px; height: 15px; }
.glog-tab:hover { color: var(--ink-2); }
.glog-tab.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
.glog-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px 8px; }
.glog-sel {
  height: 32px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px;
}
.glog-refresh {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; cursor: pointer;
}
.glog-refresh:hover { background: var(--hover); color: var(--ink); }
.glog-refresh .ico { width: 13px; height: 13px; }
.glog-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 18px; display: grid; gap: 10px; }
.glog-card { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
.glog-thumb { width: 96px; height: 62px; flex: none; border-radius: 8px; object-fit: cover; background: #0c1116; display: block; }
.glog-thumb.play { cursor: pointer; }
.glog-thumb.none { border: 1px dashed var(--line-2); }
.glog-mid { flex: 1; min-width: 0; display: grid; gap: 4px; }
.glog-badge { justify-self: start; font-size: 11px; padding: 1px 7px; border-radius: 5px; font-weight: 600; background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.glog-badge.ok { background: rgba(34, 197, 94, .16); color: #6ee7a8; }
.glog-badge.bad { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.glog-badge.go { background: rgba(79, 211, 209, .16); color: #a8f3f0; }
.glog-prompt {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.glog-meta { font-size: 11.5px; color: var(--ink-3); }
.glog-err { font-style: normal; font-size: 11.5px; color: #fca5a5; }
.glog-go { font-style: normal; font-size: 11.5px; color: #a8f3f0; }
.glog-act {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgba(79, 211, 209, .45); background: rgba(79, 211, 209, .1); color: #a8f3f0;
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.glog-act:hover { background: rgba(79, 211, 209, .22); }
.glog-act .ico { width: 13px; height: 13px; }
.glog-act.retry { border-color: var(--line-3); background: var(--surface-3); color: var(--ink); }
.glog-act.retry:hover { background: var(--hover); }
.glog-empty { padding: 26px 4px; text-align: center; color: var(--ink-3); font-size: 13px; line-height: 1.8; }
@media (max-width: 560px) {
  .glog-thumb { width: 72px; height: 48px; }
  .glog-prompt { font-size: 12.5px; }
}

/* ============ 首页「灵感」区（照 aigcc.vip 首页：标题 + 全部/视频/图片 + 案例网格） ============ */
.insp { position: relative; z-index: 1; max-width: min(1280px, 96vw); margin: 0 auto; padding: 0 20px 64px; }
.insp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.insp-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .06em; color: #fff; }
.insp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-tab {
  height: 32px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 14, 18, .6); color: rgba(255, 255, 255, .72);
  font-size: 13px; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.insp-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .32); }
.insp-tab.on { background: linear-gradient(135deg, rgba(79, 211, 209, .22), rgba(79, 211, 209, .08)); border-color: rgba(79, 211, 209, .5); color: #a8f3f0; font-weight: 600; }

.insp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.insp-card {
  position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: rgba(10, 14, 18, .72); border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .26s var(--ease), border-color .26s var(--ease);
}
.insp-card:hover { transform: translateY(-3px); border-color: rgba(79, 211, 209, .45); }
.insp-cover { position: relative; aspect-ratio: 4 / 3; background: #0c1116; overflow: hidden; }
.insp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
/* 悬停时插进来的预览视频：盖在封面上淡入，跟视频栏目的做法一致 */
.insp-cover video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .28s var(--ease-soft);
}
.insp-cover video.on { opacity: 1; }
.insp-card:hover .insp-cover img { transform: scale(1.04); }
.insp-badge {
  position: absolute; left: 8px; top: 8px; z-index: 1;   /* 悬停时插入的预览视频是后面加的，得压在它上面 */
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; color: #d6fbf8;
  background: rgba(6, 10, 14, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.insp-badge .ico { width: 12px; height: 12px; }
/* 做同款：照 aigcc.vip 的样式——盖在封面正中央、鼠标移到卡片上才出现、靛蓝底白字。
   首页的灵感卡和图片/漫剧页的案例卡都用这一套，三处保持一致 */
.insp-same, .play .go {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94);
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 20px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(99, 102, 241, .92); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: opacity .2s var(--ease-soft), transform .2s var(--ease-soft), background .2s var(--ease-soft);
}
.insp-same { z-index: 2; }          /* 同上：别被预览视频盖住 */
.insp-same .ico { width: 14px; height: 14px; }
.insp-card:hover .insp-same, .play:hover .go {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
}
.insp-same:hover, .play .go:hover {
  background: rgb(99, 102, 241); transform: translate(-50%, -50%) scale(1.05);
}
/* 手机上没有"悬停"这回事，直接常显，不然点不到 */
@media (hover: none) {
  .insp-same, .play .go { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
}
.insp-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.insp-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.insp-meta { font-size: 11.5px; color: rgba(255, 255, 255, .5); }
.insp-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
.insp-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
/* 音乐页的分类页签上带首数 */
.insp-tab b { margin-left: 3px; font-size: 11.5px; font-weight: 600; opacity: .7; }
.mu-insp .insp-sub { margin: -8px 0 14px; }

/* 音乐页的灵感区：跟下面的「我的歌」同宽、左边界对齐，整页一条线 */
.mu-insp { max-width: 1180px; margin-top: 34px; padding: 0 var(--pad) 56px; }

/* 音乐页的灵感卡：不摆假的成片封面，用风格色块 + 风格名，中间还是那个「做同款」 */
.mu-icover { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.mu-iw {
  font-size: 25px; font-weight: 800; letter-spacing: .16em; color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
  transition: opacity .2s var(--ease-soft);
}
/* 鼠标移上来时「做同款」正压在风格字上，把字让开，别叠成一团 */
.insp-card:hover .mu-iw { opacity: 0; }

/* 样板歌的封面：点一下就试听，左下角常显一个播放圆钮 */
.mu-insp .insp-cover { cursor: pointer; aspect-ratio: 1 / 1; }
.mu-insp .insp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-insp .insp-cover .mu-iw { position: absolute; inset: 0; display: grid; place-items: center; }
.mu-splay {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  display: grid; place-items: center; cursor: pointer;
  background: rgba(6, 12, 14, .62); color: #fff;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .18s var(--ease-soft), transform .18s var(--ease-soft);
}
.mu-splay .ico { width: 16px; height: 16px; }
.mu-splay:hover { background: rgba(79, 211, 209, .95); color: #04211f; transform: scale(1.06); }
.insp-card.playing .insp-cover { outline: 2px solid rgba(79, 211, 209, .65); outline-offset: -2px; }
.insp-card.playing .insp-name { color: #a8f3f0; }
/* 时长角标挪到右上，别和左下角的播放钮打架 */
.mu-insp .insp-badge { left: auto; right: 8px; }
.mu-insp .insp-tabs { gap: 6px; }
.insp-more {
  display: block; margin: 20px auto 0; height: 36px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 14, 18, .6); color: rgba(255, 255, 255, .8); font-size: 13px;
}
.insp-more:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 1100px) { .insp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .insp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  /* 手机上一行放两个案例（原来一列，一屏只看得到一个） */
  .insp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .insp { padding-bottom: 52px; }
  .insp-tab { height: 30px; padding: 0 13px; font-size: 12.5px; }
  .insp-body { padding: 8px 9px 10px; gap: 3px; }
  .insp-name { font-size: 13px; }
  .insp-meta { font-size: 11px; }
}

/* ===== 手机端：手指点得到、一行放得下 ===== */
@media (max-width: 640px) {
  /* 「标题 + 说明 + 右边一个链接」那种一行，手机上要能换行，别挤成窄条 */
  .band-h { flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
  .band-h .sub { flex: 1 1 100%; order: 3; }
  .band-h .more { margin-left: auto; }
  /* 四张特色卡：手机上一列（两列时每张只有几十像素宽，字全碎了） */
  #diffs { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  /* 手指点得到的尺寸：图标类至少 32px */
  .img-tile .hs-pico, .hs-thumb .hs-pico, .hs-pico, .auth-eye, .hs-play { width: 32px; height: 32px; }
  /* 登录页那两个文字按钮（注册新账号 / 找回密码）和邀请页那格输入框 */
  .auth-links button, .auth-links a { min-height: 34px; display: inline-flex; align-items: center; }
  #ivLink, .rc-bal-more { min-height: 32px; }
  .hs-ptab { height: 32px; }
  /* 文字链也给它一个够高的可点区域 */
  .lg-back, .alt, .rc-bal-more, .insp-more { min-height: 32px; display: inline-flex; align-items: center; }
  .hs-thumb .hs-pico { width: 30px; height: 30px; }
  /* 顶部给汉堡按钮让位：这几个页面原来的内容正好压在按钮底下 */
  .rc, .lg, .iv, .crumbs { padding-top: 64px; }
  /* 面包屑那种小链接（返回技能市场 / 返回首页） */
  .crumbs a, .crumbs button { min-height: 32px; display: inline-flex; align-items: center; }
}

/* ===== 手机端：推荐词 2×2、功能卡一行两个 ===== */
@media (max-width: 560px) {
  /* 五个推荐词：手机上一行两个、两行放完（字小一点，最多折两行） */
  .starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .starter {
    width: 100%; height: auto; min-height: 34px; padding: 6px 10px; gap: 4px;
    justify-content: center; text-align: center; white-space: normal;
    font-size: 12px; line-height: 1.35;
  }
  /* 第 5 个在手机上不显示（两行放 4 个就够） */
  .starters .starter:nth-child(n+5) { display: none; }

  /* 四个栏目卡：一行两个（原来一行一个，四行太长） */
  .cards-row { flex-wrap: wrap; gap: 10px; padding: 0 14px 20px; }
  .hcard { flex: 1 1 calc(50% - 5px); }
  .hcard-in { height: 74px; padding: 0 12px; border-radius: 14px; }
  .hc-body b { font-size: 14px; }
  /* 副标题窄屏一行放不下：改成折两行（给右上角箭头留出位置），别截成一串省略号 */
  .hc-body { padding-right: 18px; }
  .hc-body i {
    font-size: 11.5px; line-height: 1.4; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* 图片/视频栏目下面的"做同款"案例：手机上一行两个。
     原来是 auto-fill minmax(196px)，390 宽的屏幕一行塞不下两个，只剩一个占满整行。 */
  .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .play .cap { padding: 7px 8px 9px; }
  .play .cap b { font-size: 12px; }
  .play .cap span { font-size: 10.5px; }
}

/* ===== 素材库（人物参考图）+ 提示词里输入 @ 选人 ===== */
.hero-lib-btn { right: 124px; }
.hero-lib-n {
  margin-left: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(79, 211, 209, .22); color: #a8f3f0; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* @ 弹层：挂在提示词框下面 */
.as-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #121417; border: 1px solid var(--line-2); border-radius: 12px; padding: 6px;
  max-height: 240px; overflow-y: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.as-hint { margin: 2px 6px 6px; font-size: 11.5px; color: var(--ink-3); }
.as-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
  border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer;
}
.as-item:hover { background: var(--hover); }
.as-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #0b0b0e; flex: none; }
.as-item em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--teal); }
.as-clear { margin-left: 8px; border: 0; background: none; color: var(--ink-3); font-size: 12px; cursor: pointer; text-decoration: underline; }

/* 素材库弹窗 */
.lib-tip { font-size: 12.5px; line-height: 1.8; color: var(--ink-2); margin-bottom: 12px; }
.lib-add { display: flex; gap: 12px; align-items: stretch; }
.lib-pick {
  width: 96px; height: 96px; flex: none; display: grid; place-items: center;
  border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink-3); font-size: 12px;
  cursor: pointer; overflow: hidden; background: #0c0c0e;
}
.lib-pick:hover { border-color: var(--line-3); color: var(--ink); }
.lib-pick img { width: 100%; height: 100%; object-fit: cover; }
.lib-pick span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lib-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.lib-list { margin-top: 16px; display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.lib-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.lib-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #0b0b0e; flex: none; }
.lib-item b { font-size: 13.5px; }
.lib-btns { margin-left: auto; display: flex; gap: 2px; }
.lib-empty { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 560px) {
  /* 手机上一排放不下两个按钮，素材库挪到生成记录下面一行 */
  .hero-lib-btn { right: 12px; top: 64px; }
  .lib-add { flex-direction: column; }
  .lib-pick { width: 100%; height: 120px; }
}