/* ============================================================
   白龙玛 GEOAi 视频营销系统 · 设计语言 v4「云雾翡翠」
   瓷蓝画布底 / 墨绿玻璃顶栏 / 翡翠主色 / 鎏金点缀
   高级感基调：曜黑 · 留白 · 低饱和 · 细腻层次
   ============================================================ */

/* ============ 基础 ============ */
:root {
  --brand: #0e8a6d;
  --brand-2: #0d7361;
  --brand-3: #35a98a;
  --brand-grad: linear-gradient(135deg, #0c6e58 0%, #12a37c 58%, #14b88a 100%);
  --brand-grad-soft: linear-gradient(135deg, #e9f4ee 0%, #e4f2ec 100%);
  --gold: #b98a2f;
  --gold-2: #d8b45c;
  --ink: #17251e;
  --ink-2: #3f5248;
  --muted: #7c8f85;
  --bg: #eef4f0;
  --card: #ffffff;
  --line: #dfe9e2;
  --ok: #128a52;
  --warn: #b47d20;
  --err: #cf4436;
  --deep: #0c3325;
  --deep-2: #124533;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 40, 30, .04), 0 4px 14px rgba(16, 40, 30, .05);
  --shadow: 0 2px 6px rgba(16, 40, 30, .05), 0 14px 34px rgba(16, 40, 30, .09);
  --shadow-lg: 0 8px 22px rgba(16, 40, 30, .08), 0 26px 60px rgba(16, 40, 30, .15);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  /* v6 设计令牌 · 智能墨翠：宋体展示字 + 深翠玻璃 + 编排动效 */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 420px at 88% -8%, rgba(27, 156, 118, .06), transparent 60%),
    radial-gradient(900px 380px at -6% 30%, rgba(94, 156, 89, .05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(14, 138, 109, .2); }

/* ============ 顶栏（墨绿玻璃） ============ */
.topbar {
  background: linear-gradient(180deg, #0b2f22 0%, #103c2b 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 6px 26px rgba(9, 34, 24, .32);
}
.topbar-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-mark {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e3c27a 0%, #cfa249 52%, #ab7c26 100%);
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 5px 16px rgba(24, 76, 53, .55);
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(84, 60, 8, .5);
}
.logo-name { font-size: 16px; font-weight: 800; letter-spacing: .5px; display: block; line-height: 1.15; color: #f4f9f6; }
.logo-sub { font-size: 10.5px; color: rgba(244, 249, 246, .48); letter-spacing: 2.5px; }

.nav { display: flex; gap: 5px; }
.nav-btn {
  border: none; background: none; cursor: pointer;
  font-size: 14px; color: rgba(233, 244, 238, .68);
  padding: 8px 15px; border-radius: 11px;
  position: relative; transition: all .18s;
  white-space: nowrap;
}
.nav-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-btn.active {
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(14, 138, 109, .45);
}
.nav-badge {
  position: absolute; top: 0; right: 2px;
  background: var(--gold-2); color: #33260a;
  font-size: 9.5px; font-weight: 800; min-width: 15px; height: 15px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.topbar-key {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(233, 244, 238, .62);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px; padding: 6px 14px;
  white-space: nowrap; cursor: pointer;
  transition: all .15s;
  backdrop-filter: blur(6px);
}
.topbar-key:hover { border-color: rgba(255, 255, 255, .28); }
.key-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); flex-shrink: 0; }
.topbar-key.ok { color: #8fe0b8; }
.topbar-key.ok .key-dot { background: #4ade9d; box-shadow: 0 0 0 3px rgba(74, 222, 157, .22); }
.topbar-key.bad { color: #f2a89d; }
.topbar-key.bad .key-dot { background: #ef8b7c; }

/* ============ 布局 ============ */
.container { max-width: 1360px; margin: 0 auto; padding: 28px 24px 90px; }
.view { display: none; }
.view.active { display: block; animation: fadein .28s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.view-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.view-head h1 { font-size: 25px; letter-spacing: -.3px; }
.view-head .muted { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ============ Hero（翡翠极光面板 · 浅色） ============ */
.hero {
  position: relative;
  border-radius: 24px;
  margin-bottom: 24px;
  overflow: hidden;
  color: #f2f7f3;
  background:
    radial-gradient(880px 420px at 84% -22%, rgba(53, 178, 133, .34), transparent 60%),
    radial-gradient(640px 380px at -10% 120%, rgba(216, 180, 92, .16), transparent 58%),
    linear-gradient(160deg, #0a271c 0%, #0c3325 46%, #0e3d2b 100%);
  box-shadow: 0 18px 48px rgba(9, 34, 24, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(216, 255, 233, .04) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(216, 255, 233, .04) 0 1px, transparent 1px 34px);
  pointer-events: none;
  mask-image: radial-gradient(720px 400px at 30% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(720px 400px at 30% 40%, #000 0%, transparent 78%);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: var(--noise);
  opacity: .07; mix-blend-mode: overlay;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-inner {
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 34px;
  padding: 54px 46px 48px; align-items: center;
}
@media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; padding: 40px 26px 36px; } }

.hero-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.5px;
  color: #e8c87e;
  background: rgba(216, 180, 92, .13);
  border: 1px solid rgba(216, 180, 92, .36);
  border-radius: 999px; padding: 6px 16px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 4px rgba(216, 180, 92, .05);
}
.hero-chip .ic-svg { color: #f0d49a; }
.hero h1 {
  font-family: var(--font-display);
  font-size: 46px; font-weight: 900; letter-spacing: .01em; line-height: 1.18;
  color: #f6faf7;
  text-shadow: 0 2px 18px rgba(6, 22, 15, .5);
}
.hero h1 .hero-grad {
  background: linear-gradient(120deg, #7fe0bb 0%, #35c291 45%, #e8c87e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 640px) { .hero h1 { font-size: 32px; } }
.hero p { color: rgba(226, 240, 231, .72); margin-top: 16px; font-size: 14.5px; letter-spacing: .3px; }
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; max-width: 780px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: rgba(232, 244, 236, .92);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 6px 13px;
  backdrop-filter: blur(8px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.hero-tag:hover { border-color: rgba(127, 224, 187, .5); background: rgba(255, 255, 255, .12); transform: translateY(-1px); }

/* 右侧能力指标卡 · 非对称悬浮 */
.hero-aside {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hero-stat {
  position: relative;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 16px 16px 13px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px rgba(6, 22, 15, .3);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), background var(--dur-base);
}
.hero-stat:nth-child(2) { transform: translateY(12px); }
.hero-stat:nth-child(4) { transform: translateY(12px); }
.hero-stat:hover { transform: translateY(-4px) !important; border-color: rgba(232, 200, 126, .45); background: rgba(255, 255, 255, .1); }
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 27px; font-weight: 900; line-height: 1.1;
  color: #f0d49a;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.hero-stat b small { font-size: 13px; font-weight: 700; margin-left: 2px; color: rgba(240, 212, 154, .8); }
.hero-stat span { display: block; margin-top: 6px; font-size: 11.5px; color: rgba(226, 240, 231, .62); letter-spacing: .5px; }
@media (max-width: 960px) { .hero-aside { grid-template-columns: repeat(4, 1fr); } .hero-stat:nth-child(2), .hero-stat:nth-child(4) { transform: none; } }
@media (max-width: 640px) { .hero-aside { grid-template-columns: 1fr 1fr; } }

/* 雷达脉冲装饰 · 右上角 */
.hero-radar {
  position: absolute; right: 56px; top: 44px;
  width: 108px; height: 108px; z-index: 1;
  pointer-events: none;
}
.hero-radar::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(127, 224, 187, .3);
}
.hero-radar::after {
  content: ''; position: absolute; inset: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 224, 187, .9), rgba(127, 224, 187, .1) 62%, transparent 70%);
  box-shadow: 0 0 18px rgba(127, 224, 187, .55);
}
.hero-radar i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(127, 224, 187, .4);
  animation: radar-ping 3.2s var(--ease-out) infinite;
}
.hero-radar i:nth-child(2) { animation-delay: 1.05s; }
.hero-radar i:nth-child(3) { animation-delay: 2.1s; }
@keyframes radar-ping {
  0% { transform: scale(.32); opacity: .9; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 960px) { .hero-radar { display: none; } }

/* ============ 卡片 ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.card-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.card-head h2 { font-size: 16.5px; letter-spacing: -.2px; }
.card-head .muted { font-size: 12.5px; margin-top: 3px; color: var(--muted); }
.card-head .muted strong { color: var(--brand); }
.card-head .btn { margin-left: auto; }
.step-num {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-grad-soft); color: var(--brand-2);
  font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(14, 138, 109, .16);
}

/* ============ 技能网格（按类分组：视频创作 / 图片生成 / 文案与提示词 / 视频处理） ============ */
.skills-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
@media (max-width: 1100px) { .skills-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }

/* 技能中心主网格：纵向排列各分组 */
#skillsGrid { display: flex; flex-direction: column; gap: 18px; }
.skill-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 2px 2px 0; }
.skill-group-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.2px;
}
.skill-group-count {
  font-size: 11px; font-weight: 700; color: var(--brand-2);
  background: var(--brand-grad-soft); border: 1px solid #cbe5d9;
  border-radius: 999px; padding: 1px 9px;
}
.skill-group-desc { font-size: 12px; color: var(--muted); }
.skill-group-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
@media (max-width: 1100px) { .skill-group-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .skill-group-row { grid-template-columns: repeat(2, 1fr); } }

.skill-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px 15px 14px;
  cursor: pointer;
  transition: all .2s;
  background: #fff;
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.skill-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand-grad);
  opacity: 0; transition: opacity .2s;
}
.skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #b8d6c7; }
.skill-card:hover::before { opacity: 1; }
.skill-icon {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--brand-grad-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(14, 138, 109, .14);
  transition: transform .2s;
}
.skill-card:hover .skill-icon { transform: scale(1.08) rotate(-4deg); }
.skill-name { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.skill-badge {
  font-size: 10px; color: var(--brand-2);
  background: var(--brand-grad-soft); border: 1px solid #cbe5d9;
  border-radius: 6px; padding: 2px 8px; font-weight: 700;
}
.skill-desc { font-size: 12px; color: var(--muted); line-height: 1.6; flex: 1; }
.skill-meta { font-size: 11px; color: var(--warn); font-weight: 600; }

/* ============ 灵感演示库 ============ */
/* v6.6：演示库同样去外层白卡，与 GEO/行业板块平级 */
.demo-section {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 24px 0;
}
/* 演示库 GEO 风格深色头部卡（v6.5 · 需求11：参考 200条GEO优化提示词板块） */
.demo-hero { margin-bottom: 18px; }
.demo-hero #demoCount { display: block; margin-top: 6px; color: rgba(226, 240, 231, .55); font-size: 11.5px; }
.demo-hero-btn {
  margin-top: 13px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .09); color: #d8ecdf;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .16s; backdrop-filter: blur(8px);
}
.demo-hero-btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); }
.demo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.demo-head h2 { font-size: 17px; letter-spacing: -.2px; }
.demo-head .muted { font-size: 12.5px; margin-top: 4px; color: var(--muted); }
.demo-head .muted strong { color: var(--brand); }

.demo-scroll {
  display: flex; gap: 15px;
  overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.demo-scroll::-webkit-scrollbar { height: 7px; }
.demo-card {
  flex: 0 0 302px;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: all .22s;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.demo-card:hover { border-color: #a9cfbc; transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* ---- 封面：翡翠电影海报质感 ---- */
.demo-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0a261c;
  overflow: hidden;
}
.demo-cover::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(130% 90% at 85% -12%, rgba(255, 255, 255, .3), transparent 46%),
    radial-gradient(90% 70% at 0% 110%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(160deg, var(--g1) 0%, var(--g2) 130%);
  mix-blend-mode: normal;
}
.demo-cover::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 22, 15, .26) 0%, rgba(6, 22, 15, .1) 42%, rgba(6, 22, 15, .78) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 24px),
    var(--noise);
  opacity: .85;
  mix-blend-mode: normal;
}
.demo-cover.playing::before { animation: demopulse 1.3s ease-in-out infinite; }
@keyframes demopulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.16) saturate(1.1); } }
.demo-cover.playing .demo-cover-core { animation: demoshake .9s ease-in-out infinite; }
.demo-cover.playing .demo-cover-foot { display: none; }
@keyframes demoshake { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* 左上 · 行业玻璃标签 */
.demo-cover-ind {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: #fff;
  background: rgba(8, 28, 20, .46);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: 4px 10px;
  backdrop-filter: blur(8px);
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-cover-ind .ind-ic { font-size: 11px; }

/* 中央 · 图标光晕盘 */
.demo-cover-core {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  z-index: 2;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 12px 34px rgba(4, 18, 12, .38), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.demo-cover-icon { font-size: 28px; filter: drop-shadow(0 4px 8px rgba(4, 18, 12, .42)); position: relative; z-index: 1; color: #fff; display: flex; align-items: center; justify-content: center; }

/* 播放按钮 */
.demo-cover .play-btn {
  position: absolute; z-index: 3;
  left: 50%; top: 62%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  display: flex; align-items: center; justify-content: center;
  color: #0d7361; font-size: 14px;
  box-shadow: 0 6px 20px rgba(4, 18, 12, .42);
  transition: transform .18s;
  border: none; cursor: pointer;
}
.demo-cover .play-btn::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  animation: playring 2.2s ease-out infinite;
}
@keyframes playring { 0% { transform: scale(.86); opacity: 1; } 70% { transform: scale(1.22); opacity: 0; } 100% { opacity: 0; } }
.demo-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.12); }
.demo-cover .dur-tag {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  background: rgba(8, 28, 20, .55); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  letter-spacing: .4px;
}
.demo-cover .extract-tag {
  position: absolute; left: 10px; top: 44px; z-index: 3;
  background: linear-gradient(135deg, #b98a2f, #d8b45c); color: #fff;
  font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 7px;
  letter-spacing: .5px;
  box-shadow: 0 3px 12px rgba(185, 138, 47, .5);
}

/* 底部 · 标题字幕 + 场景玻璃条 */
.demo-cover-foot {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
}
.demo-cover-title {
  font-size: 14px; font-weight: 800; color: #fff; line-height: 1.35;
  text-shadow: 0 2px 10px rgba(4, 18, 12, .6);
  letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-cover-scene {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, .92);
  background: rgba(8, 28, 20, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 3px 9px;
  backdrop-filter: blur(8px);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 播放态字幕条 */
.demo-cap {
  position: absolute; left: 10px; right: 10px; bottom: 46px; z-index: 4;
  background: rgba(6, 22, 15, .7); color: #fff;
  border-radius: 11px; padding: 9px 12px;
  font-size: 11px; line-height: 1.55;
  backdrop-filter: blur(6px);
  text-align: left;
  min-height: 46px;
  display: flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
}
.demo-cap-bar {
  position: absolute; left: 0; bottom: 0; z-index: 5;
  height: 3px; width: 0;
  background: linear-gradient(90deg, #d8b45c, #6fcfa4, #c9e2d4);
  border-radius: 0 3px 3px 0;
  transition: width .4s linear;
}

.demo-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.demo-desc { font-size: 11.5px; color: var(--muted); line-height: 1.6; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.demo-skill {
  font-size: 10.5px; color: var(--brand-2); background: var(--brand-grad-soft);
  border: 1px solid #cbe5d9;
  border-radius: 7px; padding: 3px 9px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58%;
}
.demo-extract {
  border: none; background: var(--brand-grad); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 9px;
  cursor: pointer; white-space: nowrap; transition: all .15s;
  box-shadow: 0 3px 10px rgba(14, 138, 109, .32);
}
.demo-extract:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* 演示视频弹层 */
.demo-modal-body { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }
@media (max-width: 820px) { .demo-modal-body { grid-template-columns: 1fr; } }
.demo-poster {
  border-radius: 15px;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: #0a261c;
}
.demo-poster::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(255, 255, 255, .3), transparent 46%),
    linear-gradient(160deg, var(--g1) 0%, var(--g2) 130%);
}
.demo-poster::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 22, 15, .3) 0%, rgba(6, 22, 15, .16) 40%, rgba(6, 22, 15, .7) 100%), var(--noise);
  opacity: .8;
}
.demo-poster .big-icon {
  font-size: 74px; filter: drop-shadow(0 12px 26px rgba(4, 18, 12, .45)); position: relative; z-index: 2;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.demo-poster .poster-tip {
  position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3;
  text-align: center; font-size: 11px; color: rgba(255, 255, 255, .94);
  background: rgba(6, 22, 15, .52); padding: 6px; backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.demo-info h3 { font-size: 17px; margin-bottom: 5px; }
.demo-info .meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.demo-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.kw-chip {
  background: var(--brand-grad-soft); color: var(--brand-2);
  border: 1px solid #cbe5d9; border-radius: 999px;
  font-size: 12px; font-weight: 700; padding: 4px 12px;
}
.analysis-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.analysis-item { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.6; }
.analysis-item .a-k { flex-shrink: 0; color: var(--brand); font-weight: 700; width: 68px; }
.analysis-item .a-v { color: var(--ink-2); }
.demo-prompt-box {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.75;
  font-family: inherit; color: var(--ink-2); background: #fafcfa;
  resize: vertical; min-height: 90px;
}
.demo-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 1px solid var(--line);
}

/* ============ 技能创作弹层 ============ */
.modal-mask {
  position: fixed; inset: 0; background: rgba(9, 30, 21, .48);
  z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 24px; backdrop-filter: blur(4px);
}
.modal {
  background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(9, 30, 21, .35);
  width: 100%; max-width: 780px; max-height: 92vh;
  display: flex; flex-direction: column;
  animation: modalIn .24s ease;
  overflow: hidden;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 24px;
  background: linear-gradient(180deg, #f4f9f6 0%, #eaf3ee 100%);
  border-bottom: 1px solid var(--line);
}
.modal-head .skill-icon {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--brand-grad-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(14, 138, 109, .15);
}
.modal-head h2 { font-size: 18px; letter-spacing: -.2px; }
.modal-head .muted { font-size: 12.5px; margin-top: 2px; color: var(--muted); }
.modal-close { margin-left: auto; border: none; background: none; font-size: 21px; color: var(--muted); cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: all .15s; }
.modal-close:hover { color: var(--ink); background: #edf4ef; }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 24px; border-top: 1px solid var(--line);
  background: #f8fbf9;
}
.modal-foot .key-status { font-size: 13px; }
.modal-foot .foot-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.modal-foot .token-est { font-size: 12.5px; color: var(--ink-2); opacity: .85; white-space: nowrap; cursor: help; border-bottom: 1px dashed var(--line); padding-bottom: 1px; }

/* ============ 表单 ============ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.narrow { max-width: 620px; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field label em { color: var(--brand); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(14, 138, 109, .12);
}
.field textarea { resize: vertical; }
.hint { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.hint a { color: var(--brand); }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }

/* Prompt 预览 */
.prompt-box {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.75;
  font-family: inherit;
  color: var(--ink-2);
  background: #fafcfa;
  resize: vertical;
}
.prompt-box:focus { outline: none; border-color: var(--brand); }

/* 上传 */
.upload-zone {
  border: 2px dashed #cfe0d6;
  border-radius: 13px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: all .18s;
  background: #f8fbf9;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--brand); background: #eef6f1; color: var(--brand); }
.upload-zone div { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.upload-zone small { font-size: 11px; color: var(--muted); display: block; margin-top: 4px; }
.asset-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.asset-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 11px; font-size: 12.5px; background: #fff;
}
.asset-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.asset-chip.uploading .dot { background: var(--warn); animation: blink 1s infinite; }
.asset-chip button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0; }
.asset-chip button:hover { color: var(--err); }
@keyframes blink { 50% { opacity: .3; } }

/* ============ 按钮 ============ */
.btn {
  position: relative;
  border: 1.5px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  color: var(--ink);
  border-radius: 11px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, border-color .18s, background .18s, filter .18s;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  box-shadow: 0 1px 2px rgba(16, 40, 30, .05), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  border-color: #8fc4ab;
  background: linear-gradient(180deg, #ffffff 0%, #eef6f1 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 40, 30, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.btn:active { transform: translateY(0) scale(.985); box-shadow: 0 1px 3px rgba(16, 40, 30, .08), inset 0 2px 5px rgba(16, 40, 30, .07); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(18, 163, 124, .22), 0 1px 2px rgba(16, 40, 30, .05); border-color: var(--brand-3); }
.btn.primary {
  background: var(--brand-grad); border: none; color: #fff;
  box-shadow:
    0 5px 16px rgba(14, 138, 109, .32),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 6px rgba(9, 46, 36, .18);
  text-shadow: 0 1px 1.5px rgba(9, 46, 36, .22);
}
.btn.primary:hover {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1.5px);
  box-shadow:
    0 9px 24px rgba(14, 138, 109, .42),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -2px 6px rgba(9, 46, 36, .2);
}
.btn.primary:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.97);
  box-shadow:
    0 2px 8px rgba(14, 138, 109, .3),
    inset 0 2px 7px rgba(9, 46, 36, .28);
}
.btn.primary:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(18, 163, 124, .32), 0 5px 16px rgba(14, 138, 109, .32); }
.btn.primary:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; box-shadow: 0 2px 6px rgba(16, 40, 30, .08); }
.btn.lg { padding: 12px 30px; font-size: 15px; border-radius: 13px; }
.btn.sm { padding: 6px 13px; font-size: 12.5px; border-radius: 9px; }
.btn.ghost { background: none; box-shadow: none; }
.btn.ghost:hover { background: #eef6f1; transform: translateY(-1px); box-shadow: none; }
.btn.ghost:active { transform: translateY(0); background: #e2efe8; }
.btn.full { width: 100%; }
.btn-spin {
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 最近创作 ============ */
.recent-list { display: flex; flex-direction: column; gap: 9px; }
.recent-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 15px; background: #fff; cursor: pointer;
  transition: all .15s;
}
.recent-item:hover { border-color: #b8d6c7; background: #f8fbf9; transform: translateX(2px); }
.recent-item .run-ctx-tags { display: contents; }
.recent-item .run-ctx-tag { flex-shrink: 0; white-space: nowrap; }
.recent-title { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.badge { font-size: 11.5px; font-weight: 700; padding: 3.5px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.badge .mini-spin { width: 11px; height: 11px; border: 2px solid rgba(180, 125, 32, .25); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.badge.running { background: #faf3e3; color: var(--warn); }
.badge.success { background: #e6f5ec; color: var(--ok); }
.badge.failed { background: #fbeceb; color: var(--err); }
.badge.idle { background: #eef3ef; color: var(--muted); }

/* ============ 自由画布（翡翠工作区） ============ */
#view-canvas { padding: 0; }
#view-canvas.active { display: block; }

.canvas-wrap {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 252px;
  gap: 14px;
  height: calc(100vh - 78px);
  min-height: 580px;
}
@media (max-width: 1080px) { .canvas-wrap { grid-template-columns: 184px minmax(0, 1fr); } .canvas-assets { display: none; } }
@media (max-width: 700px) { .canvas-wrap { grid-template-columns: 1fr; height: auto; } .canvas-side { display: none; } }

.canvas-side, .canvas-assets {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.canvas-side { padding: 14px; gap: 12px; }
.thread-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.thread-item {
  border: 1px solid transparent; border-radius: 12px;
  padding: 11px 13px; cursor: pointer; transition: all .16s;
  position: relative;
}
.thread-item::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--brand-grad);
  opacity: 0; transition: opacity .16s;
}
.thread-item:hover { background: #f1f7f3; }
.thread-item.active { background: linear-gradient(135deg, #e9f4ee 0%, #eef7f1 100%); border-color: #c9e2d4; }
.thread-item.active::before { opacity: 1; }
.thread-item-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item-meta { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.thread-item-meta .st-ic { display: inline-flex; align-items: center; color: var(--brand-2); }
.thread-item-meta .st-ic .mini-spin {
  width: 11px; height: 11px; border: 2px solid rgba(14, 138, 109, .22);
  border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite;
}
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: #c6d6cb; display: inline-block; }

/* 画布主区 */
.canvas-main {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.canvas-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, #0b2f22 0%, #124230 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.canvas-head h1 {
  font-size: 16.5px; color: #f4f9f6; letter-spacing: .2px;
  display: flex; align-items: center; gap: 9px;
}
.canvas-head h1::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #6fcfa4, #d8b45c);
  box-shadow: 0 0 12px rgba(111, 207, 164, .8);
  flex-shrink: 0;
}
.canvas-head .muted { font-size: 12px; color: rgba(233, 244, 238, .55); }
.canvas-head-actions { display: flex; gap: 8px; }
.canvas-head-actions .btn.ghost {
  color: rgba(233, 244, 238, .75); border-color: rgba(255, 255, 255, .18);
}
.canvas-head-actions .btn.ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* 画布滚动区：翡翠点阵 */
.canvas-scroll {
  flex: 1; overflow-y: auto; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(rgba(14, 138, 109, .09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-color: #f4f8f5;
}
.canvas-hint { text-align: center; padding: 76px 0 36px; color: var(--muted); }
.canvas-hint .hint-icon {
  width: 84px; height: 84px; border-radius: 50%;
  margin: 0 auto 18px;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #e9f4ee 55%, #ddefe5 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(14, 138, 109, .06), 0 16px 40px rgba(14, 138, 109, .16);
}
.canvas-hint .hint-icon-inner { font-size: 36px; filter: drop-shadow(0 5px 10px rgba(14, 138, 109, .3)); }
.canvas-hint h3 {
  color: var(--ink); font-size: 18px; margin-bottom: 9px; letter-spacing: -.2px;
  background: linear-gradient(120deg, #0c6e58, #1aa582);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.canvas-hint p { font-size: 13px; line-height: 1.9; }
.canvas-hint strong { color: var(--brand-2); }

/* 画布节点 */
.node-user { align-self: flex-end; max-width: 80%; }
.node-user .bubble {
  background: var(--brand-grad);
  color: #fff; border-radius: 16px 16px 5px 16px;
  padding: 12px 16px; font-size: 13.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 8px 22px rgba(14, 138, 109, .28);
}
.node-user .node-assets { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; flex-wrap: wrap; }
.node-user .node-assets img, .node-user .node-assets video { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.node-user .node-assets video { width: 110px; height: 90px; }

.node-run { align-self: stretch; }
.run-card {
  border: 1px solid var(--line); border-radius: 15px;
  background: #fff; overflow: hidden;
  box-shadow: 0 3px 14px rgba(16, 40, 30, .07);
}
.run-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f2f8f4 0%, #f8fbf9 100%);
}
.run-head .run-skill {
  font-size: 11.5px; font-weight: 700; color: var(--brand-2);
  background: #fff; border: 1px solid #cbe5d9; border-radius: 7px; padding: 2.5px 9px;
}
.run-head .run-time { font-size: 11px; color: var(--muted); margin-left: auto; }
.run-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.run-prompt { font-size: 12px; color: var(--muted); line-height: 1.6; background: #f8fbf9; border-radius: 9px; padding: 9px 12px; }
.run-prompt summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.run-progress { display: flex; flex-direction: column; gap: 5px; }
.progress-line { font-size: 12.5px; color: var(--ink-2); padding: 2px 0; line-height: 1.6; display: flex; gap: 8px; }
.progress-line::before { content: "·"; color: var(--muted); }
.progress-bar { height: 4px; border-radius: 3px; background: #e6efe9; overflow: hidden; }
.progress-bar .bar { height: 100%; width: 0; background: var(--brand-grad); border-radius: 3px; animation: barflow 1.6s ease-in-out infinite; }
@keyframes barflow { 0% { width: 15%; } 50% { width: 75%; } 100% { width: 90%; } }
.fail-reason { background: #fbeceb; color: var(--err); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.run-media video { width: 100%; max-height: 460px; border-radius: 11px; background: #000; display: block; }
.image-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.image-grid img { width: 150px; height: 150px; object-fit: cover; border-radius: 11px; border: 1px solid var(--line); cursor: pointer; transition: transform .15s; }
.image-grid img:hover { transform: scale(1.03); }
.run-texts { display: flex; flex-direction: column; gap: 8px; }
.run-text-block {
  background: #f8fbf9; border-left: 3px solid var(--brand);
  border-radius: 9px; padding: 11px 14px;
  font-size: 13px; line-height: 1.8; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.run-text-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.run-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.run-actions a, .run-actions button { text-decoration: none; }

/* 输入区：玻璃拟态 */
.canvas-input {
  border-top: 1px solid rgba(14, 138, 109, .12);
  padding: 14px 16px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  position: relative;
}
.pending-assets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.input-row-area { display: flex; gap: 10px; align-items: flex-end; }
.input-row-area textarea {
  flex: 1; border: 1.5px solid var(--line); border-radius: 13px;
  padding: 12px 15px; font-size: 13.5px; font-family: inherit; resize: none;
  line-height: 1.6; color: var(--ink);
  background: #f8fbf9;
  box-shadow: inset 0 2px 6px rgba(16, 40, 30, .04);
  transition: all .15s;
}
.input-row-area textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(14, 138, 109, .1); }
.input-btns { display: flex; align-items: center; gap: 8px; }
.canvas-res {
  border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 11px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; outline: none; font-family: inherit; flex-shrink: 0;
}
.canvas-res:focus { border-color: var(--brand); }

/* —— 视频提示词反推：上传抽帧区（需求 7）—— */
.rev-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-frames { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.rev-frame {
  position: relative; width: 86px; height: 86px; border-radius: 10px;
  overflow: hidden; border: 1.5px solid var(--line); background: #f4f8f5;
  display: flex; align-items: center; justify-content: center;
}
.rev-frame img { width: 100%; height: 100%; object-fit: cover; }
.rev-frame.uploading { opacity: .55; }
.rev-frame-t {
  position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-weight: 700;
  color: #fff; background: rgba(12, 51, 37, .68); border-radius: 5px; padding: 1px 6px;
}
.rev-frame-del {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 6px;
  border: none; background: rgba(12, 51, 37, .62); color: #fff; font-size: 12px;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.rev-frame-del:hover { background: var(--err); }
.rev-frame-empty { color: var(--muted); }
.rev-frame .btn-spin { width: 18px; height: 18px; }
.icon-btn {
  border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  width: 44px; height: 44px; font-size: 18px; cursor: pointer; transition: all .16s;
}
.icon-btn:hover { border-color: var(--brand); background: #eef6f1; transform: translateY(-1px); }
#btnCanvasInspire {
  background: linear-gradient(135deg, #e9f4ee 0%, #e4f2ec 100%);
  border-color: #c9e2d4;
}
#btnCanvasInspire:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(14, 138, 109, .22); }

/* 资产库 */
.canvas-assets { min-width: 0; }
.assets-head {
  padding: 13px 15px; font-weight: 800; font-size: 13px; letter-spacing: .5px;
  color: #f4f9f6;
  background: linear-gradient(135deg, #0b2f22, #164a35);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.assets-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.asset-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all .16s; box-shadow: var(--shadow-sm); }
.asset-item:hover { border-color: #a9cfbc; transform: translateY(-2px); box-shadow: var(--shadow); }
.asset-item img, .asset-item video { width: 100%; height: 120px; object-fit: cover; display: block; background: #0a261c; }
.asset-item video { height: 100px; }
.asset-item-name { font-size: 11px; color: var(--muted); padding: 8px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ 创作历史 ============ */
.filter-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-tab {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.filter-tab:hover { border-color: #b8d6c7; }
.filter-tab.active { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(14, 138, 109, .3); }

.history-list { display: flex; flex-direction: column; gap: 12px; }
.history-item {
  display: flex; gap: 15px;
  border: 1px solid var(--line); border-radius: 15px;
  background: #fff; padding: 13px 16px;
  box-shadow: var(--shadow-sm);
  transition: all .15s;
  flex-wrap: wrap;
}
.history-item:hover { border-color: #a9cfbc; box-shadow: var(--shadow); transform: translateY(-1px); }
.history-thumb {
  width: 104px; height: 66px; border-radius: 10px; flex-shrink: 0;
  overflow: hidden; background: #eef3ef; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.history-thumb img, .history-thumb video { width: 100%; height: 100%; object-fit: cover; }
.history-thumb .thumb-icon { font-size: 24px; opacity: .5; }
.history-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.history-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.history-prompt {
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%;
}
.history-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.history-actions a { text-decoration: none; }

/* —— 板块分类筛选 chips（需求 6）—— */
.cat-filter-row { display: flex; align-items: center; gap: 10px; margin: -6px 0 12px; flex-wrap: wrap; }
.cat-filter-label { font-size: 12.5px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.cat-chip em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); background: #f0f5f1; border-radius: 999px; padding: 0 7px; line-height: 17px; }
.cat-chip:hover { border-color: #b8d6c7; }
.cat-chip.active { background: var(--brand-grad); border-color: transparent; color: #fff; }
.cat-chip.active em { color: #fff; background: rgba(255, 255, 255, .22); }

/* 板块统计条（分别排版统计） */
.cat-stat-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-stat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 5px 12px; cursor: pointer; transition: all .15s;
}
.cat-stat-chip b { color: var(--brand); font-size: 13px; }
.cat-stat-chip:hover { border-color: #b8d6c7; }
.cat-stat-chip.zero { opacity: .55; }

/* 分组标题（全部视图按板块分组排版） */
.history-group-head { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; }
.history-group-head:first-child { margin-top: 0; }
.history-group-head .hg-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-grad-soft); box-shadow: inset 0 0 0 1px rgba(14, 138, 109, .14); }
.history-group-head b { font-size: 13.5px; }
.history-group-head em { font-style: normal; font-size: 11px; color: var(--brand-2); background: var(--brand-grad-soft); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.history-group-head .hg-line { flex: 1; height: 1px; background: var(--line); }

/* —— 发布文案板块（需求 4/5）—— */
.history-copy {
  margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.history-copy-head {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #f2f8f4 0%, #eef5f0 100%);
  border: 1px solid #d5e8dc; border-radius: 10px;
  padding: 7px 12px; cursor: pointer; font-size: 12.5px;
  font-family: inherit; transition: all .15s; width: 100%;
}
.history-copy-head:hover { border-color: #b8d6c7; }
.history-copy-head b { font-size: 12.5px; color: var(--brand-2); }
.history-copy-head .copy-caret { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.history-copy-body { display: flex; flex-direction: column; gap: 8px; }
.copy-field { display: flex; align-items: flex-start; gap: 10px; }
.copy-field.col { flex-direction: column; }
.copy-field > label { font-size: 11.5px; font-weight: 700; color: var(--muted); flex-shrink: 0; min-width: 52px; padding-top: 2px; display: inline-flex; align-items: center; gap: 4px; }
.copy-field .copy-val {
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2);
  background: #f8fbf9; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px;
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.copy-field .copy-val.one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-field .btn { flex-shrink: 0; }
.copy-field.geo > label { color: var(--gold); }
.copy-field.geo .copy-val { background: #fdf9ee; border-color: #eadfc2; }
.copy-actions { display: flex; justify-content: flex-end; }

/* ============ 设置页 ============ */
.actions { display: flex; gap: 12px; }
.key-state { margin-top: 10px; font-size: 13px; color: var(--muted); }
.key-state.ok { color: var(--ok); }
.key-state.bad { color: var(--err); }
.key-status { font-size: 13px; color: var(--muted); }
.key-status.ok { color: var(--ok); }
.key-status.bad { color: var(--err); cursor: pointer; }
.test-result { font-size: 13px; }
.test-result.ok { color: var(--ok); }
.test-result.bad { color: var(--err); }
.about-list { list-style: none; }
.about-list li { font-size: 13px; color: var(--ink-2); padding: 6px 0; line-height: 1.7; }
.about-list li::before { content: "·"; color: var(--brand); margin-right: 10px; font-weight: 700; }
.about-list code { background: #eaf3ee; border-radius: 5px; padding: 2px 6px; font-size: 11.5px; color: var(--brand-2); }
.about-list strong { color: var(--brand); }

/* 空状态 */
.empty { text-align: center; padding: 50px 0; color: var(--muted); }
.empty.small { padding: 24px 0; font-size: 13px; }
.empty p { margin-bottom: 0; }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: #142921; color: #fff;
  padding: 11px 22px; border-radius: 13px;
  font-size: 14px; box-shadow: 0 14px 40px rgba(9, 30, 21, .4);
  z-index: 100; animation: toastin .25s ease;
  max-width: 80vw;
  border: 1px solid rgba(255, 255, 255, .12);
}
.toast.err { background: linear-gradient(135deg, #cf4436, #b03a2e); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c6d6cb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a9c1b4; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 人物/物品 建模中心 ============ */
.model-stats { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-card {
  flex: 1; min-width: 148px;
  background: #fff; border: 1px solid var(--line); border-radius: 15px;
  padding: 14px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.stat-card .num { font-size: 23px; font-weight: 900; line-height: 1.2; background: linear-gradient(120deg, #0c6e58, #1aa582); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-card .num small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; -webkit-text-fill-color: var(--muted); }
.stat-card .lbl { font-size: 12px; color: var(--muted); }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 15px; }
.model-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  cursor: pointer; transition: all .2s; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.model-card:hover { border-color: #a9cfbc; transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.model-card-cover {
  position: relative; aspect-ratio: 16 / 11;
  background: linear-gradient(150deg, #e9f4ee 0%, #eef7f1 55%, #e3f0e9 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.model-card-cover::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(100% 70% at 85% -10%, rgba(255, 255, 255, .5), transparent 50%),
    repeating-linear-gradient(0deg, rgba(14, 138, 109, .04) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(14, 138, 109, .04) 0 1px, transparent 1px 22px);
}
.model-card-cover img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.model-card-cover .avatar-fallback { font-size: 58px; filter: drop-shadow(0 6px 12px rgba(16, 40, 30, .18)); position: relative; z-index: 1; }
.model-card-cover .model-type-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(8, 28, 20, .58); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3.5px 11px; border-radius: 999px;
  backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .22);
}
.model-card-cover .ref-count {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  background: rgba(255, 255, 255, .9); color: var(--ink-2);
  font-size: 10.5px; font-weight: 700; padding: 3.5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.model-card-body { padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.model-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.model-card-title .name { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-card-title .role {
  font-size: 10.5px; color: var(--brand-2); background: var(--brand-grad-soft);
  border: 1px solid #cbe5d9; border-radius: 6px; padding: 2px 8px; font-weight: 700; flex-shrink: 0;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-card-title .role.prod { background: #eef4ee; color: #0c6e58; border-color: #cbe5d9; }
.model-card-desc { font-size: 12px; color: var(--ink-2); line-height: 1.55; min-height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.model-card-actions { display: flex; gap: 8px; margin-top: auto; }
.model-card-actions .btn { flex: 1; padding: 7px 8px; font-size: 12px; }

/* —— v7.0 档案弹窗文字排版优化：标题/说明/按钮分行，杜绝挤行断字 —— */
.ref-sec { flex-wrap: wrap; row-gap: 8px; }
.ref-sec h4 { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 3px; }
.ref-sec h4 .hint-tip { flex-basis: 100%; line-height: 1.65; letter-spacing: .01em; }
.ref-sec > .btn { flex-shrink: 0; white-space: nowrap; }
/* 区块内成块内容（状态/表单/操作区）独占整行 */
.ref-sec .vfy-status, .ref-sec .form-grid,
.ref-sec .ark-status, .ref-sec .ark-actions, .ref-sec .ark-link-box, .ref-sec .ark-manual { flex-basis: 100%; }
/* 认证状态行：标签与长说明分行显示 */
.vfy-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vfy-status .muted, .ark-status .muted { flex-basis: 100%; line-height: 1.65; }

/* —— v7.1 行业板块视频类型：点击式卡片下拉（参考 AI 建模二级菜单 · 点击触发非 hover）—— */
.vt-drop { position: relative; }
.vt-drop-btn {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; border-radius: 11px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--line); background: #fff; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.vt-drop-btn:hover { border-color: #a9cfbc; }
.vt-drop-btn[aria-expanded="true"] {
  border-color: var(--brand-2, #0e8a6d);
  box-shadow: 0 0 0 3px rgba(14, 138, 109, .10);
}
.vt-drop-ic {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%);
  color: #fff; box-shadow: 0 3px 8px rgba(14, 138, 109, .28);
}
.vt-drop-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vt-drop-txt b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.vt-drop-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-drop-caret { flex-shrink: 0; color: var(--muted); transition: transform .18s; }
.vt-drop-btn[aria-expanded="true"] .vt-drop-caret { transform: rotate(180deg); }
.vt-drop-menu {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 430;
  padding: 7px; display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid rgba(14, 138, 109, .13); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(10, 48, 34, .18), 0 4px 12px rgba(10, 48, 34, .07);
  animation: vtDropIn .16s ease;
}
@keyframes vtDropIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
/* display:flex 会压过 hidden 属性的 UA 样式，必须显式补回 */
.vt-drop-menu[hidden] { display: none; }
.vt-drop-tip {
  font-size: 10.5px; color: #8aa89b; letter-spacing: .5px;
  padding: 5px 11px 4px;
}
.vt-item {
  border: none; background: none; cursor: pointer; text-align: left; font-family: inherit;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px;
  transition: background .15s, transform .15s;
}
.vt-item:hover { background: rgba(18, 163, 124, .09); transform: translateX(2px); }
.vt-item-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(18, 163, 124, .13), rgba(18, 163, 124, .05));
  color: #0e8a6d; transition: all .15s;
}
.vt-item:hover .vt-item-ic {
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%);
  color: #fff; box-shadow: 0 4px 10px rgba(14, 138, 109, .35);
}
.vt-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vt-item-txt b { font-size: 13.5px; font-weight: 700; color: #1f4436; line-height: 1.25; }
.vt-item-txt small { font-size: 10.5px; color: #93a89e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-item:hover .vt-item-txt b { color: #0e8a6d; }
.vt-item-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%); color: #fff;
  opacity: 0; transform: scale(.6); transition: all .15s;
}
.vt-item.selected { background: rgba(18, 163, 124, .10); }
.vt-item.selected .vt-item-ic {
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%);
  color: #fff; box-shadow: 0 4px 10px rgba(14, 138, 109, .35);
}
.vt-item.selected .vt-item-txt b { color: #0e8a6d; }
.vt-item.selected .vt-item-check { opacity: 1; transform: scale(1); }
/* v7.1 需求2：企业知识库与核心卖点同排（知识库占 2 列） */
.ind-form-row .kb-field { grid-column: span 2; }
@media (max-width: 820px) { .ind-form-row .kb-field { grid-column: auto; } }
/* v7.1 需求3：hero 胶囊改大项导航链接 */
.hero-tag-link { cursor: pointer; font-family: inherit; }
.hero-tag-link .hero-tag-arrow { opacity: .55; transition: transform .15s, opacity .15s; }
.hero-tag-link:hover .hero-tag-arrow { opacity: 1; transform: translateY(1.5px); }

/* —— 画质增强弹层（v7.2 · AI MediaKit）—— */
.enh-src video { width: 100%; max-height: 260px; border-radius: 12px; background: #0a1a12; }
.enh-fee-tip {
  background: #fdf6e8; border: 1px solid #ecd9a8; border-radius: 12px;
  padding: 12px 14px; margin: 12px 0;
}
.enh-fee-tip > b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #8a6414; margin-bottom: 7px; }
.enh-fee-tip ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.enh-fee-tip li { font-size: 12px; line-height: 1.65; color: #7a5a1d; }
.enh-fee-tip li b { color: #7a5310; }
.enh-estimate {
  background: #f0f8f2; border: 1px solid #b7dcc3; border-radius: 12px;
  padding: 10px 14px; font-size: 13px; color: #0d5c49;
}
.enh-history { display: flex; flex-direction: column; gap: 10px; }
.enh-record {
  border: 1px solid var(--line); border-radius: 12px; background: #fafcfb;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 9px;
}
.enh-record-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.enh-record-spec { font-size: 12px; font-weight: 700; color: var(--ink); }
.enh-record-cost { font-size: 12px; color: #0d5c49; font-weight: 600; background: #eef7f1; border-radius: 6px; padding: 2px 8px; }
.enh-record-time { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.enh-record video { width: 100%; max-height: 240px; border-radius: 10px; background: #0a1a12; }
.enh-record-actions { display: flex; align-items: center; gap: 10px; }
.enh-record-err { font-size: 12.5px; color: #dc2626; }
.enh-record-wait {
  font-size: 12px; color: #8a6414; background: #fdf6e8;
  border-radius: 9px; padding: 8px 11px; display: flex; align-items: center; gap: 6px; line-height: 1.6;
}

/* —— 企业知识库板块（v6.4）—— */
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.kb-card {
  background: var(--card, #fff); border: 1px solid rgba(14, 138, 109, .12); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.kb-card:hover { border-color: rgba(14, 138, 109, .35); box-shadow: 0 10px 28px rgba(10, 48, 34, .10); transform: translateY(-2px); }
.kb-card-head { display: flex; align-items: center; gap: 11px; }
.kb-card-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(18, 163, 124, .14), rgba(18, 163, 124, .05));
  color: #0e8a6d;
}
.kb-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-card-title b { font-size: 15px; color: #1f4436; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card-title .muted { font-size: 11px; }
.kb-card-bar {
  flex-shrink: 0; width: 46px; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(14, 138, 109, .12);
}
.kb-card-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #12a37c, #0e8a6d); }
.kb-card-desc {
  font-size: 12.5px; color: var(--ink-2, #4a6155); line-height: 1.6; min-height: 40px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kb-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kb-card-tags span {
  font-size: 10.5px; color: #0c6e58; background: rgba(18, 163, 124, .10);
  border: 1px solid rgba(18, 163, 124, .18); border-radius: 999px; padding: 2px 9px;
}
.kb-modal { max-width: 720px; width: 92vw; }
.kb-modal-body { padding: 18px 22px; max-height: 62vh; overflow-y: auto; }
.kb-modal-body .field textarea { resize: vertical; min-height: 44px; }
/* 知识库字段字数统计与超限提醒（v6.5 · 1500 字上限） */
.kb-modal-body .field > label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kb-count { font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.kb-count.over { color: var(--err); font-weight: 600; }
.kb-field-tip { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

/* 知识库合规预警弹窗（v8.0） */
.kb-risk-list { display: flex; flex-direction: column; gap: 14px; }
.kb-risk-group { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 10px 12px; }
.kb-risk-field { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.kb-risk-words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kb-risk-word { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: rgba(220, 38, 38, .08); color: var(--err, #dc2626); border: 1px solid rgba(220, 38, 38, .25); }
.kb-risk-word em { font-style: normal; font-size: 11px; opacity: .75; }
.kb-risk-advice { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 4px; }
.kb-risk-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-risk-foot .hint-tip { flex: 1 1 auto; }
.kb-risk-actions { display: flex; align-items: center; gap: 8px; }
.kb-anyway-btn { opacity: .75; }
/* 一键优化主按钮（v8.0 · 醒目引导） */
.kb-autofix-btn { padding: 10px 20px !important; font-size: 14px !important; font-weight: 700 !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(22, 163, 74, .35); display: inline-flex; align-items: center; gap: 7px; animation: kbFixPulse 1.8s ease-in-out infinite; }
.kb-autofix-btn:disabled { animation: none; }
@keyframes kbFixPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(22, 163, 74, .35); } 50% { box-shadow: 0 4px 22px rgba(22, 163, 74, .6); } }

/* 视频指令防复制提示条（v8.2 · 普通用户只显示台词区块） */
.prompt-mask-hint { font-size: 12.5px; line-height: 1.6; color: var(--muted); background: rgba(22, 163, 74, .07); border: 1px solid rgba(22, 163, 74, .22); border-radius: 10px; padding: 8px 11px; margin-bottom: 8px; }
.prompt-mask-hint b { color: var(--ok, #16a34a); }
textarea.prompt-masked { min-height: 150px; }
.kb-limit-tip { color: var(--err); }
.kb-modal-body textarea[data-kb].at-max { border-color: rgba(220, 38, 38, .55); box-shadow: 0 0 0 3px rgba(220, 38, 38, .08); }

/* 知识库多选 chips（六板块生成表单共用 · v6.4） */
.kb-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-pick-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: #35534a; padding: 7px 12px; border-radius: 999px;
  background: #f4f8f6; border: 1.5px solid rgba(14, 138, 109, .16);
  transition: all .15s; user-select: none; max-width: 260px;
}
.kb-pick-chip .ic-svg { color: #0e8a6d; flex-shrink: 0; }
.kb-pick-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-pick-cnt {
  flex-shrink: 0; font-size: 10px; color: #7fa392;
  background: rgba(14, 138, 109, .09); border-radius: 999px; padding: 1px 6px;
}
.kb-pick-chip:hover { border-color: rgba(14, 138, 109, .45); background: rgba(18, 163, 124, .07); }
.kb-pick-chip.selected {
  background: linear-gradient(135deg, rgba(18, 163, 124, .16), rgba(18, 163, 124, .08));
  border-color: #12a37c; color: #0c6e58; font-weight: 700;
  box-shadow: 0 2px 10px rgba(18, 163, 124, .22);
}
.kb-pick-chip.selected .kb-pick-cnt { background: rgba(18, 163, 124, .18); color: #0c6e58; }
/* 知识库选中状态提示条（v6.5 · GEO 弹层选中/未选中明显提示） */
.kb-pick-status {
  margin-top: 9px; font-size: 12px; line-height: 1.6; padding: 8px 12px; border-radius: 10px;
  transition: all .18s;
}
.kb-pick-status.none {
  color: var(--muted); background: #f4f8f6; border: 1px dashed rgba(14, 138, 109, .28);
}
.kb-pick-status.on {
  color: #0c6e58; background: linear-gradient(135deg, rgba(18, 163, 124, .14), rgba(18, 163, 124, .05));
  border: 1.5px solid rgba(18, 163, 124, .5);
}
.ind-form-row.kb-row { margin-top: 10px; }
/* v8.26.1 知识库与产品匹配提示条（chips/下拉旁常驻，勾选即时校验） */
.kb-match-hint {
  margin-top: 8px; font-size: 12px; line-height: 1.6; padding: 8px 12px; border-radius: 10px;
  color: var(--muted); background: #f4f8f6; border: 1px dashed rgba(14, 138, 109, .28);
}
.kb-match-hint.checking { color: #7a6a4f; background: #faf6ec; border: 1px dashed rgba(217, 119, 6, .3); }
.kb-match-hint.warn {
  color: #8a4b03; font-weight: 600;
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .05));
  border: 1.5px solid rgba(217, 119, 6, .5);
}
.kb-match-hint.ok {
  color: #0c6e58; background: linear-gradient(135deg, rgba(18, 163, 124, .12), rgba(18, 163, 124, .04));
  border: 1.5px solid rgba(18, 163, 124, .45);
}

/* ============ GEO 弹层 · 企业知识库聚焦区（v7.5 · 需求5：知识库选项醒目突出） ============ */
.kb-spotlight {
  background: linear-gradient(135deg, rgba(245, 158, 11, .10), rgba(18, 163, 124, .07));
  border: 2px solid rgba(245, 158, 11, .45);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 3px 14px rgba(245, 158, 11, .12);
}
.kb-spotlight .picker-head label {
  font-size: 14px; font-weight: 800; color: #7c4a03;
}
.kb-spotlight .picker-head .ic-svg { color: #d97706; }
.kb-spotlight .picker-head .hint-tip { color: #8a6a35; }
.kb-spot-badge {
  display: inline-block; vertical-align: 1px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 999px; padding: 2px 9px; margin: 0 2px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, .4);
  letter-spacing: .5px;
}
.kb-spotlight .kb-picker { margin-top: 10px; }
.kb-spotlight .kb-pick-chip {
  font-size: 13px; padding: 8px 14px;
  background: #fff;
  border: 1.5px solid rgba(217, 119, 6, .35);
  box-shadow: 0 1px 4px rgba(120, 53, 15, .08);
}
.kb-spotlight .kb-pick-chip:hover {
  border-color: rgba(217, 119, 6, .6); background: #fffaf0;
}
.kb-spotlight .kb-pick-chip.selected {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #b45309; color: #fff;
  box-shadow: 0 3px 12px rgba(217, 119, 6, .4);
}
.kb-spotlight .kb-pick-chip.selected .ic-svg { color: #fff; }
.kb-spotlight .kb-pick-chip.selected .kb-pick-cnt { background: rgba(255, 255, 255, .28); color: #fff; }
.kb-spotlight .kb-pick-status { margin-top: 11px; }

/* 建模弹层 */
.modal.wide { max-width: 980px; }
.modal-xl { max-width: 1060px; }
.ref-sec { margin: 20px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ref-sec h4 { font-size: 14px; display: flex; align-items: center; gap: 7px; }
.ref-sec .hint-tip { font-size: 11.5px; color: var(--muted); }

/* —— 场景建模互斥提示（需求 2：参考素材 vs AI 生成，颜色区分）—— */
.ref-sec.ai-gen-sec { flex-direction: column; align-items: stretch; }
.ref-sec.ai-gen-sec .ai-gen-row { display: flex; gap: 10px; align-items: center; }
.ref-sec.ai-gen-sec.conflict {
  background: #fff8ec; border: 1.5px dashed #e3c47a; border-radius: 12px; padding: 12px 14px;
}
.ref-sec.ai-gen-sec.conflict h4 { color: #9a771f; }
.ref-sec.ai-gen-sec.conflict .btn[data-ai-gen] {
  background: linear-gradient(135deg, #e9edf2 0%, #e2e8ef 100%);
  border-color: #c9d4de; color: #6b7280;
}
.ai-conflict-tip {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fdf3e0; border: 1px solid #ecd9a8; border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.6; color: #8a6414;
  margin-bottom: 10px;
}
.ai-conflict-tip b { color: #7a5310; }
/* 无参考素材时的中性蓝色提示（需求 2/3：进入弹层即显示两种建模方式说明） */
.ai-conflict-tip.info {
  background: #eef4fd; border-color: #bcd6f3; color: #2f5e9e;
}
.ai-conflict-tip.info b { color: #2a5490; }
/* 有参考素材时的琥珀警告（互斥冲突） */
.ai-conflict-tip.warn {
  background: #fdf3e0; border-color: #ecd9a8; color: #8a6414;
}
.ai-conflict-tip.warn b { color: #7a5310; }
/* 已有参考素材时，参考素材区绿色高亮（推荐模式） */
.ref-sec.locked {
  background: #f0f8f2; border: 1.5px solid #b7dcc3; border-radius: 12px; padding: 12px 14px;
}
.ref-sec.locked h4 { color: var(--brand-2); }
.ref-upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ref-upload-row select {
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 8px 12px; font-size: 13px; font-family: inherit; background: #fff; color: var(--ink);
}
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ref-card { position: relative; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: #f8fbf9; transition: border-color .15s; box-shadow: var(--shadow-sm); }
.ref-card:hover { border-color: #a9cfbc; }
.ref-card img, .ref-card video { width: 100%; height: 116px; object-fit: cover; display: block; background: #0a261c; }
.ref-card .ref-angle {
  position: absolute; left: 7px; bottom: 26px;
  background: rgba(8, 28, 20, .68); color: #fff;
  font-size: 10px; padding: 2px 8px; border-radius: 6px; backdrop-filter: blur(4px);
}
.ref-card .ref-del {
  position: absolute; top: 6px; right: 6px; width: 23px; height: 23px;
  border-radius: 50%; border: none; background: rgba(8, 28, 20, .6); color: #fff;
  cursor: pointer; font-size: 12px; line-height: 1; transition: background .15s;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; /* v7.6.2 置于播放悬浮层（z-index:2）之上，删除按钮始终可点 */
}
.ref-card .ref-del:hover { background: var(--err); }
.ref-card .ref-name {
  font-size: 10.5px; color: var(--muted); padding: 6px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-card .ref-uploading {
  position: absolute; inset: 0; background: rgba(255, 255, 255, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-2);
  backdrop-filter: blur(3px);
}
.ref-card .ref-uploading .btn-spin { border-color: rgba(14, 138, 109, .3); border-top-color: var(--brand); }

/* v7.6.1 参考视频卡片：可点击播放（悬浮层提示 + 全局媒体查看器播放） */
.ref-card.ref-video.playable { cursor: pointer; }
.ref-card.ref-video .ref-play-act {
  position: absolute; left: 0; right: 0; top: 0; height: 116px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(8, 24, 17, .38); color: #fff;
  opacity: 0; transition: opacity .18s;
}
.ref-card.ref-video .ref-play-act i { font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 2px; }
.ref-card.ref-video.playable:hover .ref-play-act { opacity: 1; }
@media (hover: none) { .ref-card.ref-video.playable .ref-play-act { opacity: 1; } } /* 触屏设备常显播放提示 */

/* 参考视频超限提示弹窗 */
.refv-rule { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.refv-rule b { color: var(--brand-2, #0e8a6d); }
.refv-problems { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.refv-problem {
  font-size: 12.5px; color: #b03a3a; background: #fdf1ef;
  border: 1px solid #f2cdc4; border-radius: 9px; padding: 8px 12px; line-height: 1.5;
}
.refv-warn {
  font-size: 12.5px; color: #8a6414; background: #fdf8ec;
  border: 1px solid #eed9a8; border-radius: 9px; padding: 8px 12px; line-height: 1.5; margin-bottom: 10px;
}
.refv-list { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow: auto; }
.refv-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  background: #f6faf7; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
.refv-row .refv-owner { color: var(--ink-2); flex-shrink: 0; }
.refv-row .refv-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.refv-row .refv-meta { flex-shrink: 0; font-weight: 600; color: var(--ink); }

/* 火山真人认证（人物档案弹层） */
.ark-sec .ark-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ark-link-box { margin-top: 10px; }
.ark-link {
  display: flex; align-items: center; gap: 8px;
  background: #f6faf7; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.ark-link a {
  flex: 1; min-width: 0; font-size: 12px; color: var(--brand-2, #0e8a6d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none;
}
.ark-link a:hover { text-decoration: underline; }
.ark-manual { margin-top: 10px; }
.ark-manual-row { display: flex; gap: 8px; align-items: center; }
.ark-manual-row input {
  flex: 1; min-width: 0; font-size: 12px; font-family: var(--mono, ui-monospace, monospace);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg, #fff);
}
.ark-manual-row input:focus { outline: none; border-color: var(--brand-2, #0e8a6d); }
.ark-status code {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
  background: #f0f5f3; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}



/* 音色板块（人物建模 · 声音克隆） */
.voice-sec-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #6b4fa0; font-weight: 600;
  padding: 10px 0 2px; border-top: 1px dashed var(--line); margin-top: 4px;
}
.voice-sec-title svg { color: #6b4fa0; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.voice-card {
  position: relative; border: 1px solid var(--line); border-radius: 13px;
  background: #f8f6fc; padding: 10px 12px 12px; box-shadow: var(--shadow-sm);
  transition: border-color .15s;
}
.voice-card:hover { border-color: #b9a5d8; }
.voice-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.voice-card-head .voice-ic { color: #6b4fa0; display: flex; }
.voice-card-head .voice-name {
  flex: 1; font-size: 11.5px; color: var(--ink-2); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voice-card .ref-del {
  width: 23px; height: 23px; border-radius: 50%; border: none;
  background: rgba(107, 79, 160, .14); color: #6b4fa0;
  cursor: pointer; font-size: 12px; line-height: 1; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.voice-card .ref-del:hover { background: var(--err); color: #fff; }
.voice-card audio { width: 100%; height: 36px; }
.voice-card .voice-done {
  font-size: 11px; color: #6b4fa0; display: flex; align-items: center; gap: 5px;
  padding: 6px 0 2px;
}
.voice-card .ref-uploading {
  margin-top: 6px; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-2);
}
.voice-card .ref-uploading .btn-spin { border-color: rgba(107, 79, 160, .3); border-top-color: #6b4fa0; }

/* 音色建模弹层 · 试听测试区（需求 5） */
.voice-test {
  border: 1.5px solid var(--line); border-radius: 14px;
  background: #f8f6fc; padding: 13px 15px; margin-top: 14px;
}
.voice-test h4 {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #6b4fa0; margin-bottom: 9px;
}
.voice-test h4 svg { color: #6b4fa0; }
.voice-test textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.7;
  font-family: inherit; resize: vertical; background: #fff;
}
.voice-test textarea:focus { outline: none; border-color: #b9a5d8; }
.voice-test-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.voice-test.ready { border-color: #cdbcf0; background: #f5f1fc; }
.voice-test-audio { margin-top: 10px; }
.voice-test-audio audio { width: 100%; height: 40px; }

/* 音色建模板块卡片（人物建模页内独立区块） */
.voice-studio-card .model-card-cover .model-type-tag {
  background: rgba(107, 79, 160, .82);
}

/* 一致性 Prompt 块 */
.prompt-block-wrap { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: #f8fbf9; margin-top: 8px; box-shadow: var(--shadow-sm); }
.prompt-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--line);
}
.prompt-block-head .pb-title { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.prompt-block-head .pb-title .pb-badge {
  background: var(--brand-grad); color: #fff; font-size: 10px;
  border-radius: 6px; padding: 2px 8px; font-weight: 700;
}
.prompt-block-box {
  width: 100%; min-height: 112px; border: none; resize: vertical;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.75;
  font-family: inherit; color: var(--ink-2); background: transparent;
}
.prompt-block-box:focus { outline: none; }

/* 技能弹层内的人物/物品选择器 */
.model-picker { display: flex; gap: 9px; flex-wrap: wrap; }

/* 出镜人物数量约束提示条（行业/GEO 提示词链路带 personCount 进来时显示） */
.cast-need-tip {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  border-radius: 10px; padding: 7px 12px; margin: 8px 0 2px;
}
.cast-need-tip .ic-svg { flex-shrink: 0; }
.cast-need-tip.warn {
  background: #fdf6e7; color: #9a6a14;
  border: 1px solid rgba(242, 153, 74, .45);
}
.cast-need-tip.ok {
  background: #e9f6ef; color: #157a4d;
  border: 1px solid rgba(18, 138, 82, .35);
}

.model-pick-card {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 13px;
  padding: 7px 12px 7px 7px; background: #fff; cursor: pointer;
  transition: all .15s; max-width: 100%;
}
.model-pick-card:hover { border-color: #a9cfbc; }
.model-pick-card.selected { border-color: var(--brand); background: #eef6f1; box-shadow: 0 0 0 4px rgba(14, 138, 109, .1); }
.model-pick-card.locked {
  opacity: .52; filter: grayscale(.65); cursor: not-allowed;
  background: #f6f7f9; border-style: dashed;
}
.model-pick-card.locked:hover { border-color: var(--line); }
.model-pick-card.locked .pick-avatar { filter: grayscale(1); }
.pick-veri-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700;
  background: #fdeeee; color: #c95656;
  border: 1px solid rgba(201, 86, 86, .3);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.model-pick-card.selected.prod { border-color: #0c6e58; background: #eaf3ee; box-shadow: 0 0 0 4px rgba(12, 110, 88, .1); }
.model-pick-card .pick-avatar {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--brand-grad-soft); display: flex; align-items: center; justify-content: center;
  font-size: 19px; overflow: hidden;
}
.model-pick-card .pick-avatar img { width: 100%; height: 100%; object-fit: cover; }
.model-pick-card .pick-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.model-pick-card .pick-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.model-pick-card .pick-meta { font-size: 10.5px; color: var(--muted); }
.model-pick-empty {
  font-size: 12.5px; color: var(--muted); border: 1.5px dashed #cfe0d6;
  border-radius: 13px; padding: 13px; text-align: center; width: 100%;
}
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.picker-head .manage-link { color: var(--brand); cursor: pointer; font-weight: 600; font-size: 12px; }
.picker-head .manage-link:hover { text-decoration: underline; }

/* 画布上下文条（人物/物品绑定） */
.ctx-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.ctx-label {
  font-size: 11px; font-weight: 800; color: var(--brand-2);
  background: var(--brand-grad-soft); border: 1px solid #cbe5d9;
  border-radius: 7px; padding: 3px 9px; flex-shrink: 0;
  letter-spacing: .5px;
}
.ctx-chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 700;
  background: var(--brand-grad-soft); color: var(--brand-2); border: 1px solid #cbe5d9;
}
.ctx-chip.prod { background: #eef4ee; color: #0c6e58; border-color: #cbe5d9; }
.ctx-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 13px; padding: 0; opacity: .65; line-height: 1; }
.ctx-chip button:hover { opacity: 1; }
.ctx-actions { display: flex; gap: 7px; margin-left: auto; flex-shrink: 0; }
.ctx-btn {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all .15s; font-family: inherit; color: var(--ink-2);
}
.ctx-btn:hover { border-color: var(--brand); color: var(--brand); background: #eef6f1; }

/* 画布创作节点上的人物/物品标签 */
.run-ctx-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.run-ctx-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.run-ctx-tag.char { background: var(--brand-grad-soft); color: var(--brand-2); border: 1px solid #cbe5d9; }
.run-ctx-tag.prod { background: #eef4ee; color: #0c6e58; border: 1px solid #cbe5d9; }

/* ============ 灵感演示库 · 行业分类筛选 ============ */
.demo-count {
  font-size: 11.5px; font-weight: 700; color: var(--brand-2);
  background: var(--brand-grad-soft); border: 1px solid #cbe5d9;
  border-radius: 999px; padding: 2px 11px;
  vertical-align: 3px; margin-left: 6px;
}
.demo-filters {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 12px; margin-bottom: 2px;
  scrollbar-width: none;
}
.demo-filters::-webkit-scrollbar { display: none; }
.demo-filter-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  cursor: pointer;
  transition: all .16s;
  white-space: nowrap;
}
.demo-filter-chip:hover { border-color: #a9cfbc; color: var(--ink); transform: translateY(-1px); }
.demo-filter-chip.active {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(14, 138, 109, .3);
}
.demo-filter-chip .ic { font-size: 13px; }
.demo-filter-chip .cnt {
  font-size: 10.5px; font-weight: 700;
  background: #eef3ef; color: var(--muted);
  border-radius: 999px; padding: 1px 7px;
  min-width: 20px; text-align: center;
}
.demo-filter-chip.active .cnt { background: rgba(255, 255, 255, .24); color: #fff; }

/* 演示卡片 · 行业/场景标签（备用，封面已内置） */
.demo-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-ind, .tag-scene {
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 2px 8px;
}
.tag-ind { background: #eaf3ee; color: #0c6e58; border: 1px solid #cbe5d9; }
.tag-scene { background: #faf3e3; color: #8a6414; border: 1px solid #ead9ab; }

/* ============ AI 智能生成面板（技能弹层） ============ */
.ai-assist {
  background: linear-gradient(135deg, #eef6f1 0%, #e9f3ee 100%);
  border: 1.5px dashed #b8d8c6;
  border-radius: 14px;
  padding: 13px 15px;
}
.ai-assist-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.ai-badge {
  background: var(--brand-grad);
  color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3.5px 11px; border-radius: 999px;
  letter-spacing: .3px;
  box-shadow: 0 3px 10px rgba(14, 138, 109, .32);
}
.ai-assist-head .hint-tip { font-size: 11.5px; color: var(--muted); }
.ai-assist-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-assist-row .ai-assist-input { flex: 1; min-width: 200px; }
.ai-assist-input {
  flex: 1;
  border: 1.5px solid #b8d8c6;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.ai-assist-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 138, 109, .1); }
.ai-assist-input::placeholder { color: #a8baaf; }
.ai-samples {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 9px;
}
.ai-sample {
  border: 1px solid #c3ded0;
  background: #fff;
  color: #0d7361;
  font-size: 11px;
  border-radius: 999px;
  padding: 3.5px 10px;
  cursor: pointer;
  transition: all .15s;
}
.ai-sample:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.ai-result {
  margin-top: 9px;
  font-size: 12px;
  border-radius: 10px;
  padding: 8px 11px;
  line-height: 1.5;
}
.ai-result.ok { background: #e6f5ec; color: #14603c; border: 1px solid #bce3cc; }
.ai-result.err { background: #fbeceb; color: #b03a2e; border: 1px solid #f0cfca; }

/* AI 扩展面板（灵感推荐 / 模板库） */
.ai-extra-panel { margin-top: 10px; }
.ai-extra-head {
  font-size: 12px; font-weight: 800; color: var(--ink-2);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.idea-card {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid #d5e7dc;
  border-radius: 11px; padding: 10px 12px;
  transition: all .16s;
  box-shadow: var(--shadow-sm);
}
.idea-card:hover { border-color: var(--brand); background: #f4f9f6; transform: translateY(-2px); box-shadow: var(--shadow); }
.idea-title { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.idea-desc { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.tpl-ind-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tpl-ind-chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; border-radius: 999px;
  padding: 3.5px 10px; cursor: pointer; transition: all .15s;
}
.tpl-ind-chip:hover { border-color: #a9cfbc; }
.tpl-ind-chip.active { background: var(--brand-grad); border-color: transparent; color: #fff; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; }
.tpl-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 11px; padding: 8px 12px; cursor: pointer;
  transition: all .16s;
}
.tpl-item:hover { border-color: var(--brand); background: #f4f9f6; }
.tpl-name { font-size: 12.5px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.tpl-name em {
  font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--brand-2); background: var(--brand-grad-soft); border-radius: 999px; padding: 1px 8px;
}
.tpl-text { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.tpl-empty { font-size: 12px; color: var(--muted); padding: 6px 2px; }

/* 风格改写弹出菜单 */
.rw-menu {
  z-index: 1000;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 13px; padding: 6px;
  box-shadow: 0 16px 44px rgba(9, 30, 21, .22);
  min-width: 220px;
}
.rw-menu button {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; background: none; border: none; cursor: pointer;
  border-radius: 10px; padding: 8px 10px;
}
.rw-menu button:hover { background: #eef6f1; }
.rw-menu b { font-size: 12.5px; color: var(--ink); }
.rw-menu span { font-size: 11px; color: var(--muted); }

/* 提示词诊断面板 */
.diag-panel {
  margin-top: 8px;
  background: #f8fbf9;
  border: 1.5px solid #d5e7dc;
  border-radius: 12px;
  padding: 11px 13px;
}
.diag-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.diag-score {
  font-size: 26px; font-weight: 900; line-height: 1;
  min-width: 46px; text-align: center;
  background: linear-gradient(120deg, #0c6e58, #1aa582);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.diag-head b { font-size: 13.5px; color: var(--ink); }
.diag-sum { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.diag-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 5px; }
.diag-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; border-radius: 9px; padding: 5px 9px;
}
.diag-item.pass { background: #e6f5ec; color: #14603c; }
.diag-item.fail { background: #faf3e3; color: #8a5a14; }
.diag-dot {
  font-size: 10px; font-weight: 800;
  width: 15px; height: 15px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.diag-item.pass .diag-dot { background: #22a56a; }
.diag-item.fail .diag-dot { background: #d8a13c; }
.diag-label { font-weight: 700; }
.diag-advice { color: #8a5a14; font-size: 10.5px; line-height: 1.4; }

/* 演示库搜索框 */
.demo-filter-wrap { margin-bottom: 4px; }
.demo-search {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 12.5px;
  padding: 9px 14px;
  margin-bottom: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.demo-search:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14, 138, 109, .1); }
.demo-search::placeholder { color: #a8baaf; }

/* 卖点智能扩写按钮 */
.field-ai-btn {
  margin-left: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--brand-2);
  background: var(--brand-grad-soft);
  border: 1px solid #cbe5d9;
  border-radius: 999px;
  padding: 2.5px 10px;
  cursor: pointer;
  vertical-align: 1.5px;
  transition: all .15s;
  user-select: none;
}
.field-ai-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.field-ai-btn:disabled { opacity: .55; cursor: wait; }

/* 提示词工具条（优化/精简/恢复） */
.prompt-tools {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; gap: 10px;
}
.prompt-tools-btns { display: flex; gap: 6px; }
.pt-btn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  color: var(--ink-2);
  font-size: 11.5px; font-weight: 700;
  border-radius: 9px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 1px 2px rgba(16, 40, 30, .04);
}
.pt-btn:hover { border-color: var(--brand); color: var(--brand); background: #eef6f1; transform: translateY(-1px); }
.pt-btn:active { transform: translateY(0) scale(.97); }
.pt-btn:disabled { opacity: .5; cursor: wait; transform: none; }
/* 诊断按钮强化：蓝色实心胶囊，在一排工具按钮中最醒目 */
.pt-btn.pt-diag {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pt-btn.pt-diag:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: #fff;
  box-shadow: 0 3px 12px rgba(37, 99, 235, .45);
  transform: translateY(-1px);
}

/* ============ 「换一个」按钮：紫色渐变胶囊，与生成/创作按钮明显区分 ============ */
.btn.btn-swap {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border: 1px solid transparent;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 2px 10px rgba(139, 92, 246, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, filter .18s;
  white-space: nowrap;
  text-shadow: 0 1px 1.5px rgba(45, 20, 84, .25);
}
.btn.btn-swap:hover {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 5px 16px rgba(139, 92, 246, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: translateY(-1.5px);
}
.btn.btn-swap:active { transform: translateY(0) scale(.97); filter: brightness(.97); box-shadow: 0 2px 6px rgba(139, 92, 246, .35), inset 0 2px 6px rgba(45, 20, 84, .25); }
.btn.btn-swap:disabled { opacity: .55; cursor: wait; transform: none; }
.btn.btn-swap .ic-svg { vertical-align: -3px; }

/* ============ 「画质增强」按钮：琥珀金渐变胶囊，醒目突出（与品牌绿主按钮/紫色换一个明显区分） ============ */
.btn.btn-enhance {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid transparent;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 15px;
  box-shadow: 0 2px 10px rgba(217, 119, 6, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, filter .18s;
  white-space: nowrap;
  text-shadow: 0 1px 1.5px rgba(120, 53, 15, .3);
  animation: enhancePulse 2.6s ease-in-out infinite;
}
@keyframes enhancePulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(217, 119, 6, .38), inset 0 1px 0 rgba(255, 255, 255, .3); }
  50% { box-shadow: 0 3px 16px rgba(245, 158, 11, .55), inset 0 1px 0 rgba(255, 255, 255, .3); }
}
.btn.btn-enhance:hover {
  background: linear-gradient(135deg, #ea8a0a, #b45309);
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 5px 18px rgba(217, 119, 6, .55), inset 0 1px 0 rgba(255, 255, 255, .32);
  transform: translateY(-1.5px);
  animation: none;
}
.btn.btn-enhance:active { transform: translateY(0) scale(.97); filter: brightness(.97); box-shadow: 0 2px 6px rgba(217, 119, 6, .4), inset 0 2px 6px rgba(120, 53, 15, .25); }
.btn.btn-enhance .ic-svg { vertical-align: -3px; }
/* 尊重系统减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn.btn-enhance { animation: none; }
}

/* ============ 「AI 建模美化」按钮：琥珀金渐变胶囊加强版（人物/物品/场景建模弹窗，醒目突出） ============ */
.btn.btn-beautify {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 3px 12px rgba(217, 119, 6, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, filter .18s;
  white-space: nowrap;
  text-shadow: 0 1px 1.5px rgba(120, 53, 15, .35);
  animation: beautifyPulse 2.4s ease-in-out infinite;
}
@keyframes beautifyPulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(217, 119, 6, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 4px 20px rgba(245, 158, 11, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
}
.btn.btn-beautify:hover {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff;
  filter: brightness(1.07);
  box-shadow: 0 6px 20px rgba(217, 119, 6, .6), inset 0 1px 0 rgba(255, 255, 255, .38);
  transform: translateY(-2px) scale(1.02);
  animation: none;
}
.btn.btn-beautify:active { transform: translateY(0) scale(.97); filter: brightness(.97); box-shadow: 0 2px 6px rgba(217, 119, 6, .45), inset 0 2px 6px rgba(120, 53, 15, .25); }
.btn.btn-beautify:disabled { opacity: .6; cursor: wait; transform: none; animation: none; }
.btn.btn-beautify .ic-svg { vertical-align: -3px; }
@media (prefers-reduced-motion: reduce) {
  .btn.btn-beautify { animation: none; }
}

/* ============ 画布 · ✨ AI 帮我写 ============ */
.inspire-drop {
  position: absolute;
  left: 14px; bottom: calc(100% - 8px);
  z-index: 30;
  width: min(540px, calc(100% - 28px));
  background: rgba(255, 255, 255, .95);
  border: 1px solid #d5e7dc;
  border-radius: 15px;
  box-shadow: 0 18px 50px rgba(9, 30, 21, .2);
  overflow: hidden;
  padding: 7px;
  backdrop-filter: blur(14px);
}
.inspire-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .13s;
  line-height: 1.45;
}
.inspire-item:hover { background: #eef6f1; color: var(--ink); }
.inspire-item .ic { font-size: 16px; flex-shrink: 0; }
.inspire-item .ic-cat {
  font-size: 10px; font-weight: 800; color: var(--brand-2);
  background: var(--brand-grad-soft); border: 1px solid #cbe5d9;
  border-radius: 999px; padding: 1.5px 8px;
  flex-shrink: 0;
}
.inspire-item .ic-text { flex: 1; min-width: 0; }

/* ============ 通用工具类 · 图标 / 弱化文本 ============ */
.ic-svg { display: inline-block; vertical-align: -2.5px; flex-shrink: 0; line-height: 0; }
.h2-ic { vertical-align: -3px; margin-right: 3px; }
.muted { color: var(--muted); }
.hint-tip { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* ============ 行业专业提示词库（12 大行业 · 细分品类 · 参数表单） ============ */
/* v6.6：去掉外层白卡（原白卡套深绿 hero 双层嵌套显臃肿），hero 与 GEO 板块平级呈现 */
.industry-section {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 24px 0;
}
/* 行业板块 GEO 风格深色头部卡（v6.5 · 需求5：参考 200条GEO优化提示词板块）
 * v6.7：hero + 行业大项合并为同一深色板块（.ind-block），大项 5 列×3 排网格内嵌其中 */
.ind-block {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 24px 24px 20px; margin-bottom: 14px;
  color: #eef6f0;
  background:
    radial-gradient(640px 300px at 92% -30%, rgba(53, 178, 133, .26), transparent 60%),
    radial-gradient(500px 280px at -8% 130%, rgba(216, 180, 92, .13), transparent 58%),
    linear-gradient(165deg, #0a271c 0%, #0c3325 48%, #0f4030 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 38px rgba(9, 34, 24, .26), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ind-block::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px);
  pointer-events: none;
  mask-image: radial-gradient(820px 400px at 20% 10%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(820px 400px at 20% 10%, #000 0%, transparent 80%);
}
.ind-block > * { position: relative; z-index: 1; }
/* 独立 hero 卡（演示库 .demo-hero 仍复用此样式） */
.ind-hero {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 24px 24px 22px; margin-bottom: 18px;
  color: #eef6f0;
  background:
    radial-gradient(640px 300px at 92% -30%, rgba(53, 178, 133, .26), transparent 60%),
    radial-gradient(500px 280px at -8% 130%, rgba(216, 180, 92, .13), transparent 58%),
    linear-gradient(165deg, #0a271c 0%, #0c3325 48%, #0f4030 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 38px rgba(9, 34, 24, .26), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ind-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px);
  pointer-events: none;
  mask-image: radial-gradient(820px 400px at 20% 10%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(820px 400px at 20% 10%, #000 0%, transparent 80%);
}
.ind-hero > * { position: relative; z-index: 1; }
/* 嵌在 .ind-block 内的 hero 退化为纯排版（无卡片背景） */
.ind-block .ind-hero {
  background: none; border: none; box-shadow: none;
  padding: 0; border-radius: 0; overflow: visible; margin-bottom: 16px;
}
.ind-block .ind-hero::before { display: none; }
.ind-hero.geo-head { margin-bottom: 0; }
.ind-block .ind-hero.geo-head { margin-bottom: 16px; }
.ind-hero .geo-head-stats { padding-top: 24px; }
@media (max-width: 860px) { .ind-hero .geo-head-stats { padding-top: 0; } }
/* 行业大项：5 列×3 排网格内嵌深色板块（v6.7 · 参考 GEO 卡片网格布局） */
.industry-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
@media (max-width: 1080px) { .industry-tabs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .industry-tabs { grid-template-columns: repeat(2, 1fr); } }
.industry-tab {
  display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
  color: rgba(238, 246, 240, .88);
  border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .16s; font-family: inherit;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.industry-tab:hover { background: rgba(255, 255, 255, .11); border-color: rgba(127, 224, 187, .42); }
.industry-tab.active {
  background: linear-gradient(135deg, rgba(18, 163, 124, .9), rgba(14, 138, 109, .78));
  border-color: rgba(127, 224, 187, .6); color: #fff;
  box-shadow: 0 4px 14px rgba(6, 22, 15, .38), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.industry-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industry-tab .ic-svg { flex-shrink: 0; color: #7fe0bb; }
.industry-tab.active .ic-svg { color: #fff; }
.industry-tab em {
  flex-shrink: 0; font-style: normal; font-size: 10px; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #a9e6cc;
  border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.industry-tab.active em { background: rgba(255, 255, 255, .22); color: #fff; }
/* 行业大项 tab 箭头（v6.5 · 需求6：点击展开细分类目） */
.ind-tab-caret {
  flex-shrink: 0; width: 0; height: 0; margin-left: auto;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 5px solid currentColor; opacity: .5;
  transition: transform .18s;
}
.industry-tab.active .ind-tab-caret { transform: rotate(180deg); opacity: .9; }
/* 细分类目菜单展开动画 */
.ind-panel-in { animation: ind-panel-in .28s var(--ease-out, ease-out); }
@keyframes ind-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 板块引导提示条（v6.8 · 各深色板块上方的统一引导条，文案与对应板块匹配）
   v7.5.3：上下外边距统一 24px，与相邻板块 margin（hero/industry/demo 24、geo/img margin-top 24）折叠后
   四条提示条上方间距 = 下方间距 = 24px，全页统一比例（参照 hero→行业词库提示条） */
.board-hint {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; margin: 24px 0;
  border: 1.5px dashed rgba(14, 138, 109, .32); border-radius: 12px;
  background: rgba(18, 163, 124, .05);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}
/* v7.5 · 需求6：hero 四大胶囊跳转后板块完整呈现——为 sticky 顶栏(64px)+呼吸空间预留滚动偏移 */
#industrySection, .geo-block, #imgGenBlock, .demo-section {
  scroll-margin-top: 92px;
}
/* v7.5.3：空技能网格（分组全部隐藏时）会阻断外边距折叠，导致演示库提示条上方间距翻倍；
   为空时其后的提示条不再叠加上边距，上方间距= industry-section 下外边距 24px，与其他提示条一致 */
#skillsGrid:empty + .board-hint { margin-top: 0; }
.board-hint .ic-svg { color: var(--brand-2); flex-shrink: 0; }
.board-hint b { color: var(--brand-2); font-weight: 700; }
/* 知识库下拉菜单多选（v6.5 · 需求3） */
.kb-drop { position: relative; }
.kb-drop-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; color: var(--ink-2);
  cursor: pointer; transition: all .16s; text-align: left;
}
.kb-drop-btn:hover { border-color: #a9cfbc; }
.kb-drop-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.kb-drop-label.on { color: #0c6e58; font-weight: 700; }
.kb-drop-caret { flex-shrink: 0; color: var(--muted); transition: transform .18s; }
.kb-drop-btn[aria-expanded="true"] .kb-drop-caret { transform: rotate(180deg); }
.kb-drop-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(9, 34, 24, .16);
  padding: 10px; max-height: 300px; overflow-y: auto;
  animation: ind-panel-in .18s ease-out;
}
.kb-drop-tip { font-size: 11px; color: var(--muted); padding: 2px 6px 9px; line-height: 1.5; }
.kb-drop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .14s;
}
.kb-drop-item:hover { background: #f4f8f6; }
.kb-drop-check {
  width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid rgba(14, 138, 109, .35); color: transparent;
  display: flex; align-items: center; justify-content: center; transition: all .14s;
}
.kb-drop-item.selected .kb-drop-check {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(14, 138, 109, .3);
}
.kb-drop-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-drop-item.selected .kb-drop-name { color: #0c6e58; }
.kb-drop-cnt {
  flex-shrink: 0; font-size: 10px; color: #7fa392;
  background: rgba(14, 138, 109, .09); border-radius: 999px; padding: 1px 7px;
}
.kb-drop-empty { font-size: 12.5px; color: var(--muted); line-height: 1.7; padding: 12px 10px; }
.kb-drop-foot { border-top: 1px dashed var(--line); margin-top: 8px; padding: 9px 4px 2px; display: flex; justify-content: flex-end; }
.industry-section .demo-head h2 { display: flex; align-items: center; flex-wrap: wrap; }

.industry-panel {
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; padding: 18px 19px;
}
/* 仅显示空态提示条时收窄面板内边距（v6.6 · 紧凑化） */
/* 行业面板（未选行业时 hidden 隐藏，提示条在板块上方） */
.industry-panel:has(> .ind-empty) { padding: 12px 14px; border-style: dashed; background: rgba(255, 255, 255, .6); }
/* 演示库·视频处理行（v6.8 · 与四维筛选行同级） */
.demo-process-row { margin-top: 2px; }
.demo-process-chip {
  border-style: solid !important;
  border-color: rgba(14, 138, 109, .4) !important;
  background: linear-gradient(135deg, rgba(18, 163, 124, .1), rgba(18, 163, 124, .04)) !important;
  font-weight: 700;
}
.demo-process-chip:hover { border-color: var(--brand) !important; box-shadow: 0 3px 12px rgba(14, 138, 109, .18); }
.demo-process-tag {
  font-size: 9.5px; font-weight: 700; color: #fff;
  background: var(--brand-grad); border-radius: 999px; padding: 2px 7px; margin-left: 2px;
}
.ind-head { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.ind-head b { font-size: 16px; letter-spacing: -.2px; }
.ind-badge {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--brand-grad-soft); color: var(--brand-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(14, 138, 109, .15);
}
.ind-head .muted { font-size: 12.5px; margin-top: 3px; }

.ind-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ind-cat {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 8px 14px; cursor: pointer; transition: all .16s; font-family: inherit;
  min-width: 118px;
}
.ind-cat:hover { border-color: #a9cfbc; transform: translateY(-1px); }
.ind-cat.active { border-color: var(--brand); background: #eef6f1; box-shadow: 0 0 0 4px rgba(14, 138, 109, .08); }
.ind-cat-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.ind-cat-selling { font-size: 10.5px; color: var(--muted); line-height: 1.4; max-width: 168px; }

.ind-form { border-top: 1px dashed var(--line); padding-top: 15px; }
.ind-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 820px) { .ind-form-row { grid-template-columns: 1fr; } }
.ind-form .field label { display: flex; align-items: center; gap: 6px; }
.ind-form .field .hint-tip { font-weight: 400; }
.ind-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.ind-actions .btn { gap: 7px; }
.ind-actions .btn .ic-svg { vertical-align: -3px; }

.ind-result { margin-top: 16px; }
.ind-result-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.ind-result-head label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ind-result-btns { display: flex; gap: 8px; }
.ind-result-btns .btn { gap: 6px; }
.ind-result-btns .btn .ic-svg { vertical-align: -3px; }
.ind-tmpl-btn { margin-left: auto; gap: 6px; white-space: nowrap; }
.ind-tmpl-btn .ic-svg { vertical-align: -3px; }

/* ============ 通用万能结构化模板弹层（第一章/第四章/第五章） ============ */
.tmpl-modal { max-width: 860px; }
.tmpl-body { padding: 18px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.tmpl-sec > label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--ink);
  margin-bottom: 9px; letter-spacing: -.1px;
}
.tmpl-sec > label .ic-svg { color: var(--brand-2); vertical-align: -2px; }
.tmpl-pre {
  background: #f8fbf9; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font-size: 12px; line-height: 1.75; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.tmpl-pre::-webkit-scrollbar { width: 5px; }
.tmpl-pre::-webkit-scrollbar-thumb { background: #cfe0d6; border-radius: 4px; }
.tmpl-rules { display: flex; flex-direction: column; gap: 8px; }
.tmpl-rule-item {
  display: flex; gap: 10px; align-items: baseline;
  background: #f8fbf9; border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 13px;
}
.tmpl-rule-item b { font-size: 12.5px; color: var(--brand-2); white-space: nowrap; }
.tmpl-rule-item span { font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.tmpl-styles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tmpl-styles .muted { font-size: 12px; }
.tmpl-risks { display: flex; flex-direction: column; gap: 8px; }
.tmpl-risk-item {
  background: #fdf6f4; border: 1px solid #f0ded9; border-radius: 11px;
  padding: 9px 13px; display: flex; gap: 10px; align-items: baseline;
}
.tmpl-risk-item b { font-size: 12.5px; color: #b0482f; white-space: nowrap; }
.tmpl-risk-item span { font-size: 11.5px; color: var(--ink-2); line-height: 1.65; }

/* ============ GEO 优化提示词 · 四类场景 ============ */
.geo-block {
  position: relative; overflow: hidden;
  margin-top: 24px;
  border-radius: 24px;
  padding: 30px 28px 26px;
  color: #eef6f0;
  background:
    radial-gradient(720px 340px at 90% -30%, rgba(53, 178, 133, .28), transparent 60%),
    radial-gradient(560px 320px at -8% 130%, rgba(216, 180, 92, .14), transparent 58%),
    linear-gradient(165deg, #0a271c 0%, #0c3325 48%, #0f4030 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 48px rgba(9, 34, 24, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.geo-block::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px);
  pointer-events: none;
  mask-image: radial-gradient(900px 460px at 20% 10%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 460px at 20% 10%, #000 0%, transparent 80%);
}
.geo-block::after {
  content: ''; position: absolute; inset: 0;
  background: var(--noise); opacity: .06; mix-blend-mode: overlay; pointer-events: none;
}
.geo-block > * { position: relative; z-index: 1; }

/* 板块头：左侧标题组 + 右侧雷达脉冲 + 指标徽章 */
.geo-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.geo-head-main { flex: 1; min-width: 300px; }
.geo-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.8px;
  color: #e8c87e;
  margin-bottom: 10px;
}
.geo-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #e8c87e; box-shadow: 0 0 10px rgba(232, 200, 126, .8);
  animation: kicker-pulse 2.4s ease-in-out infinite;
}
@keyframes kicker-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.72); } }
.geo-head h3 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 900; letter-spacing: .01em;
  color: #f6faf7; line-height: 1.2;
  text-shadow: 0 2px 14px rgba(6, 22, 15, .5);
}
.geo-head h3 em {
  font-style: normal;
  background: linear-gradient(120deg, #7fe0bb, #e8c87e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.geo-head .muted { display: block; font-size: 12.5px; color: rgba(226, 240, 231, .66); margin-top: 9px; line-height: 1.65; max-width: 720px; }
.geo-head .muted strong { color: #a9e6cc; font-weight: 700; }
.geo-head-stats { display: flex; gap: 9px; align-items: flex-start; padding-top: 26px; }
.geo-head-stat {
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px; padding: 9px 15px 7px;
  backdrop-filter: blur(8px);
}
.geo-head-stat b {
  display: block; font-family: var(--font-display);
  font-size: 19px; font-weight: 900; color: #f0d49a;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.geo-head-stat span { display: block; font-size: 10px; color: rgba(226, 240, 231, .6); letter-spacing: 1px; margin-top: 3px; }
@media (max-width: 860px) { .geo-head-stats { padding-top: 0; } }

/* 雷达脉冲 · 板块右上装饰 */
.geo-radar {
  position: relative; flex-shrink: 0;
  width: 74px; height: 74px; margin-top: 4px;
}
.geo-radar::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(127, 224, 187, .3);
}
.geo-radar::after {
  content: ''; position: absolute; inset: 23px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 200, 126, .95), rgba(232, 200, 126, .12) 62%, transparent 72%);
  box-shadow: 0 0 16px rgba(232, 200, 126, .6);
}
.geo-radar i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(127, 224, 187, .42);
  animation: radar-ping 3.2s var(--ease-out) infinite;
}
.geo-radar i:nth-child(2) { animation-delay: 1.05s; }
.geo-radar i:nth-child(3) { animation-delay: 2.1s; }
@media (max-width: 720px) { .geo-radar { display: none; } }

.geo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1080px) { .geo-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .geo-cards { grid-template-columns: 1fr; } }
.geo-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(10px);
  padding: 17px 16px 15px; display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base), background var(--dur-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 26px rgba(6, 22, 15, .28);
}
.geo-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--geo-accent, linear-gradient(90deg, #12a37c, #6fc7a0));
}
.geo-card:hover {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .085);
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(6, 22, 15, .42);
}
.geo-card-head { display: flex; align-items: flex-start; gap: 10px; }
.geo-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--geo-accent, linear-gradient(135deg, #12a37c, #6fc7a0));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--geo-accent-shadow, rgba(14, 138, 109, .35)), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.geo-card-head b { display: block; font-size: 13.5px; letter-spacing: -.1px; color: #f2f8f4; }
.geo-card-head .muted { display: block; font-size: 11px; margin-top: 3px; line-height: 1.55; color: rgba(226, 240, 231, .58); }
/* 四类场景 · 分类色编码（本地·翡翠 / 品牌·鎏金 / 产品·紫 / B端·蓝） */
.geo-card:nth-child(1) { --geo-accent: linear-gradient(135deg, #12a37c, #35a98a); --geo-accent-shadow: rgba(14, 138, 109, .4); }
.geo-card:nth-child(2) { --geo-accent: linear-gradient(135deg, #b98a2f, #d8b45c); --geo-accent-shadow: rgba(185, 138, 47, .4); }
.geo-card:nth-child(3) { --geo-accent: linear-gradient(135deg, #6b4fa0, #9a7cc9); --geo-accent-shadow: rgba(107, 79, 160, .4); }
.geo-card:nth-child(4) { --geo-accent: linear-gradient(135deg, #2563eb, #5f8ff0); --geo-accent-shadow: rgba(37, 99, 235, .38); }
.geo-tpls { display: flex; flex-direction: column; gap: 7px; max-height: 300px; overflow-y: auto; padding-right: 4px; counter-reset: tpl; }
.geo-tpls::-webkit-scrollbar { width: 5px; }
.geo-tpls::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 4px; }
.geo-tpls::-webkit-scrollbar-track { background: transparent; }
.geo-tpl {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: rgba(240, 248, 243, .94); line-height: 1.6;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px; padding: 8px 11px;
}
/* 模板占位符高亮（v6.9 · 【城市】【品牌】等变量 token）
 * v6.11：白字字体与行业大项 tab 同款（无衬线 PingFang 系 12.5px/600），清晰易读 */
.geo-tpl-txt {
  flex: 1; min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 12.5px; letter-spacing: .01em;
}
.geo-var {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 12px; font-weight: 700; color: #9fe8c8;
  background: rgba(127, 224, 187, .12);
  border: 1px solid rgba(127, 224, 187, .32);
  border-radius: 4px; padding: 0 2px; margin: 0 1px;
  line-height: 1.5;
}
.geo-tpl-btn:hover .geo-var {
  color: #06281c; background: rgba(127, 224, 187, .85); border-color: transparent;
}
.geo-tpl::before {
  counter-increment: tpl; content: counter(tpl, decimal-leading-zero);
  flex-shrink: 0; margin-top: 1px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  color: #e8c87e;
  background: rgba(216, 180, 92, .14);
  border: 1px solid rgba(216, 180, 92, .28);
  border-radius: 6px; padding: 1.5px 5px;
  font-variant-numeric: tabular-nums;
  transition: all var(--dur-fast);
}
.geo-tpl-btn {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: all var(--dur-fast);
}
.geo-tpl-btn:hover {
  background: rgba(127, 224, 187, .12);
  border-color: rgba(127, 224, 187, .38);
  color: #fff;
  transform: translateX(3px);
}
.geo-tpl-btn:hover::before { background: var(--brand-grad); border-color: transparent; color: #fff; }
.geo-tpl-btn:active { transform: translateX(3px) scale(.99); }

/* ============ AI 图片生成重点板块（与 GEO 可见度中枢同级 · 深翠玻璃 + 光圈装饰） ============ */
.img-block {
  position: relative; overflow: hidden;
  margin-top: 24px;
  border-radius: 24px;
  padding: 30px 28px 26px;
  color: #eef6f0;
  background:
    radial-gradient(720px 340px at 8% -30%, rgba(53, 178, 133, .26), transparent 60%),
    radial-gradient(560px 320px at 108% 130%, rgba(216, 180, 92, .15), transparent 58%),
    linear-gradient(165deg, #0a271c 0%, #0c3325 48%, #0f4030 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 48px rgba(9, 34, 24, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.img-block::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(216, 255, 233, .035) 0 1px, transparent 1px 34px);
  pointer-events: none;
  mask-image: radial-gradient(900px 460px at 80% 10%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(900px 460px at 80% 10%, #000 0%, transparent 80%);
}
.img-block::after {
  content: ''; position: absolute; inset: 0;
  background: var(--noise); opacity: .06; mix-blend-mode: overlay; pointer-events: none;
}
.img-block > * { position: relative; z-index: 1; }

/* 板块头：与 GEO 板块同构（脉冲 kicker + 渐变标题 + 指标徽章） */
.img-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.img-head-main { flex: 1; min-width: 300px; }
.img-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.8px;
  color: #e8c87e;
  margin-bottom: 10px;
}
.img-kicker::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #e8c87e; box-shadow: 0 0 10px rgba(232, 200, 126, .8);
  animation: kicker-pulse 2.4s ease-in-out infinite;
}
.img-head h3 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 900; letter-spacing: .01em;
  color: #f6faf7; line-height: 1.2;
  text-shadow: 0 2px 14px rgba(6, 22, 15, .5);
}
.img-head h3 em {
  font-style: normal;
  background: linear-gradient(120deg, #7fe0bb, #e8c87e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.img-head .muted { display: block; font-size: 12.5px; color: rgba(226, 240, 231, .66); margin-top: 9px; line-height: 1.65; max-width: 720px; }
.img-head .muted strong { color: #a9e6cc; font-weight: 700; }
.img-head-stats { display: flex; gap: 9px; align-items: flex-start; padding-top: 26px; }
.img-head-stat {
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px; padding: 9px 15px 7px;
  backdrop-filter: blur(8px);
}
.img-head-stat b {
  display: block; font-family: var(--font-display);
  font-size: 19px; font-weight: 900; color: #f0d49a;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.img-head-stat span { display: block; font-size: 10px; color: rgba(226, 240, 231, .6); letter-spacing: 1px; margin-top: 3px; }
@media (max-width: 860px) { .img-head-stats { padding-top: 0; } }

/* 镜头光圈装饰 · 板块右上（区别于 GEO 板块的雷达脉冲） */
.img-aperture { position: relative; flex-shrink: 0; width: 74px; height: 74px; margin-top: 4px; }
.img-aperture::before {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  border: 1.5px solid rgba(232, 200, 126, .5);
  box-shadow: inset 0 0 14px rgba(232, 200, 126, .18);
}
.img-aperture::after {
  content: ''; position: absolute; inset: 27px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 200, 126, .95), rgba(232, 200, 126, .12) 62%, transparent 72%);
  box-shadow: 0 0 16px rgba(232, 200, 126, .6);
}
.img-aperture i {
  position: absolute; inset: 5px; border-radius: 50%;
  border: 1px dashed rgba(127, 224, 187, .4);
  animation: aperture-spin 14s linear infinite;
}
@keyframes aperture-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .img-aperture { display: none; } }

/* 技能卡 · 双列玻璃卡（同 GEO 卡视觉规格） */
.img-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 980px) { .img-cards { grid-template-columns: 1fr; } }
.img-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(10px);
  padding: 18px 17px 15px;
  display: flex; flex-direction: column; gap: 11px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base), background var(--dur-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 26px rgba(6, 22, 15, .28);
}
.img-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--img-accent, linear-gradient(90deg, #12a37c, #6fc7a0));
}
.img-card:nth-child(1) { --img-accent: linear-gradient(90deg, #12a37c, #35a98a); }
.img-card:nth-child(2) { --img-accent: linear-gradient(90deg, #b98a2f, #d8b45c); }
.img-card:hover,
.img-card:focus-visible {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .085);
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(6, 22, 15, .42);
}
.img-card:focus-visible { outline: 2px solid #7fe0bb; outline-offset: 2px; }
.img-card-head { display: flex; align-items: flex-start; gap: 11px; }
.img-card-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--img-accent, linear-gradient(135deg, #12a37c, #6fc7a0));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(6, 22, 15, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.img-card-head b { display: block; font-size: 14px; letter-spacing: -.1px; color: #f2f8f4; }
.img-card-head .muted { display: block; font-size: 11px; margin-top: 3px; color: rgba(226, 240, 231, .58); }
.img-card-desc { font-size: 12px; color: rgba(226, 240, 231, .72); line-height: 1.65; }
.img-card-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.img-card-chips span {
  font-size: 10.5px; color: #a9e6cc;
  background: rgba(127, 224, 187, .1);
  border: 1px solid rgba(127, 224, 187, .26);
  border-radius: 999px; padding: 3px 10px;
}
.img-card-btn { margin-top: auto; align-self: flex-start; gap: 6px; }

/* ============ 行业库 · 工厂板块分隔条 ============ */
.ind-cat-sep {
  display: flex; align-items: center; gap: 10px;
  flex-basis: 100%; width: 100%; margin: 4px 0 2px;
}
.ind-cat-sep-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #cfe0d6, transparent); }
.ind-cat-sep-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; color: #8a5a2b;
  background: #fdf3e3; border: 1px solid #f0dcb8; border-radius: 999px;
  padding: 4px 12px; white-space: nowrap;
}

/* ============ 建模选择器 · 角色切换按钮（主角/配角 · 主推/搭配） ============ */
.pick-role-btn {
  border: 1px solid #cbe5d9; background: #eef6f1; color: var(--brand-2);
  border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 800;
  cursor: pointer; white-space: nowrap; transition: all .15s; align-self: center;
}
.pick-role-btn:hover { background: var(--brand-grad); color: #fff; border-color: transparent; }

/* ============ 画布上下文 · 场景标签 ============ */
.ctx-chip.scene { background: #f3eef8; color: #6b4fa0; border-color: #ddd0ee; }
.run-ctx-tag.scene { background: #f3eef8; color: #6b4fa0; border: 1px solid #ddd0ee; }

/* ============ 人物建模 · 关键特征多选 chips ============ */
.feat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .16s cubic-bezier(.34, 1.56, .64, 1); user-select: none;
  box-shadow: 0 1px 2px rgba(16, 40, 30, .04);
}
.feat-chip input { display: none; }
.feat-chip:hover { border-color: #8fc4ab; background: #f4faf6; transform: translateY(-1px); }
.feat-chip:active { transform: translateY(0) scale(.97); }
/* 选中态：checkbox 勾选即联动（点击一次选中，再点一次取消） */
.feat-chip.on,
.feat-chip:has(input:checked) {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(14, 138, 109, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
  transform: translateY(-1px);
}
/* 选中态 · 前置勾选图标（宽度过渡避免跳动） */
.feat-chip.on::before,
.feat-chip:has(input:checked)::before {
  content: '✓'; display: inline-block;
  width: 15px; height: 15px; margin-left: -4px;
  font-size: 10.5px; font-weight: 900; line-height: 15px; text-align: center;
  background: rgba(255, 255, 255, .22); border-radius: 50%;
  transition: all .16s;
}

/* ============ 人物/物品建模 · 3 角度参考图槽位 ============ */
.angle-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .angle-slots { grid-template-columns: 1fr; } }
.angle-slot {
  position: relative; border: 1.5px dashed #cfe0d6; border-radius: 14px;
  background: #f8fbf9; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; aspect-ratio: 4 / 3;
  transition: all .16s;
}
.angle-slot:hover { border-color: var(--brand); background: #eef6f1; }
.angle-slot.filled { border-style: solid; border-color: #c9e2d4; }
.angle-slot > img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; }
.angle-slot-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; color: var(--muted); font-size: 12px;
}
.angle-slot-empty .ic-svg { opacity: .7; }
.angle-slot-label {
  position: relative; z-index: 2; display: block; text-align: center;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  padding: 6px 8px; background: #fff; border-top: 1px solid var(--line);
}
.angle-slot.filled .angle-slot-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(8, 28, 20, .76));
  color: #fff; border-top: none;
}
.angle-slot-del {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(8, 28, 20, .6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.angle-slot-del:hover { background: var(--err); }
.angle-slot-del .ic-svg { width: 12px; height: 12px; }

/* 建模美化勾选徽章（v6.0）：左上角 ✓，勾选后高亮；勾选 1-2 张则只优化选中的，不勾选则全部优化 */
.angle-slot-check {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(8, 28, 20, .45); color: rgba(255, 255, 255, .85);
  border: 1.5px solid rgba(255, 255, 255, .7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.angle-slot-check .ic-svg { width: 12px; height: 12px; }
.angle-slot-check:hover { background: rgba(8, 28, 20, .7); }
.angle-slot-check.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.angle-slot.selected { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 12px; }

/* ---- Seedream 人物建模美化条 + 槽位「优化中」遮罩 ---- */
.beautify-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 11px 14px;
  border: 1px solid #cfe0d6; border-radius: 12px; background: #f6fbf8;
}
/* v7.0：按钮一行、说明文字整行换行排版 */
.beautify-bar { row-gap: 6px; }
.beautify-bar .hint-tip { flex: 1 1 100%; min-width: 0; line-height: 1.65; }
.beautify-bar .btn { flex-shrink: 0; white-space: nowrap; }
.beautify-status { font-size: 12.5px; color: var(--brand); font-weight: 600; }
.slot-opt {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(8, 28, 20, .55); color: #fff; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(1.5px);
}
.slot-opt .btn-spin { width: 15px; height: 15px; border-width: 2px; }

/* ============ 展示/操作按钮内联图标对齐 ============ */
.btn .ic-svg, .pt-btn .ic-svg, .filter-tab .ic-svg { vertical-align: -3px; }
.manage-link .ic-svg, .industry-tab .ic-svg { vertical-align: -3px; }

/* ============ SaaS 顶栏用户信息（适配墨绿顶栏：浅色文字 + 玻璃拟态，避免深底深字看不清） ============ */
.topbar-user { display: flex; align-items: center; gap: 9px; margin-left: 14px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #6fc7a0);
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}
.user-name { font-size: 13.5px; font-weight: 600; color: #f4f9f6; white-space: nowrap; text-shadow: 0 1px 2px rgba(9, 34, 24, .45); }
.user-role {
  font-style: normal; font-size: 11px; font-weight: 700;
  background: rgba(216, 180, 92, .16); color: #e8c877;
  border: 1px solid rgba(216, 180, 92, .38);
  border-radius: 999px; padding: 1px 8px; margin-left: 4px;
}
.user-logout {
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08);
  border-radius: 999px; backdrop-filter: blur(6px);
  font-size: 12px; padding: 5px 12px; cursor: pointer; color: rgba(233, 244, 238, .82);
  transition: all .15s;
}
.user-logout:hover { border-color: rgba(242, 168, 157, .55); background: rgba(239, 139, 124, .14); color: #f6c5bd; }

/* ============ 通用状态标签（人物实名 / 音色克隆） ============ */
.tb-tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; vertical-align: 1px;
}
.tb-ok { background: #e7f6ee; color: #1e8a5a; }
.tb-off { background: #fdeeee; color: #c95656; }
.tb-wait { background: #fff4e3; color: #b8791f; }
.tb-plain { background: #f0f2f7; color: #66718a; }

/* ============ 场景 AI 生成区 ============ */
.ai-gen-sec .ai-gen-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 6px;
}
.ai-gen-tpl, .ai-gen-kw {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; outline: none; background: #fff;
}
.ai-gen-tpl { min-width: 210px; }
.ai-gen-kw { flex: 1; min-width: 260px; }
.ai-gen-tpl:focus, .ai-gen-kw:focus { border-color: var(--brand); }

/* ============ 音色克隆状态区 ============ */
.clone-sec {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0 4px; background: #fbfcfe;
}
.clone-state { flex: 1; min-width: 220px; font-size: 13px; }

/* ============ 实名认证区 ============ */
.vfy-status { font-size: 13.5px; margin-bottom: 10px; min-height: 20px; }
.vfy-upload-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.vfy-upload { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vfy-upload-box {
  width: 180px; height: 116px; border: 1.5px dashed var(--line); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; color: var(--muted); font-size: 13px;
  background: #fbfcfe; overflow: hidden; position: relative;
  transition: border-color .15s;
}
.vfy-upload-box:hover { border-color: var(--brand); }
.vfy-upload-box.has { border-style: solid; }
.vfy-upload-box img { width: 100%; height: 100%; object-fit: cover; }
.vfy-change {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(8, 28, 20, .65); color: #fff;
  font-size: 11.5px; padding: 3px 0; text-align: center;
}
.vfy-upload small { font-size: 12px; color: var(--muted); }

/* ============ 人物卡片实名徽章 ============ */
.vfy-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
}
.vfy-badge.ok { background: rgba(30, 138, 90, .92); color: #fff; }
.vfy-badge.wait { background: rgba(184, 121, 31, .92); color: #fff; }
.vfy-badge.sys { background: rgba(216, 180, 92, .94); color: #3d2e08; }

/* 选择器卡片「系统」小标签 */
.pick-sys-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 999px;
  background: rgba(216, 180, 92, .2); color: #8a6a1c; border: 1px solid rgba(216, 180, 92, .5);
}

/* 人物选择卡片「人物A-H」编号徽标（v8.33：选择顺序即 A-H 映射，与提示词泛型标签一致） */
.pick-ab-tag {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 8px; border-radius: 999px;
  background: #1e8a5a; color: #fff; letter-spacing: .5px;
}
/* 未选卡片「选中后 → 人物N」预览提示 */
.pick-ab-next {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 600; color: #98a3ad;
}
/* 弹层内 A-H 映射行（已选人物列表） */
.cast-ab-map {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px;
  font-size: 12px; color: #5a6572;
}
.cast-ab-map b { color: #157a4d; }

/* 主体类型回显确认弹窗（v8.38 AI 判轨 + 用户确认）三轨选项 */
.track-confirm-opts {
  display: flex; flex-direction: column; gap: 8px;
}
.track-opt {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff;
  transition: all .15s;
}
.track-opt b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.track-opt small { font-size: 12px; color: #7a848e; line-height: 1.5; }
.track-opt:hover { border-color: #9fb8ad; }
.track-opt.active {
  border-color: #1e8a5a; background: #e9f6ef;
  box-shadow: 0 0 0 1px #1e8a5a inset;
}
.track-opt.active b { color: #157a4d; }

/* ============ 创作历史：点赞 / 踩一脚 ============ */
.vote-bar {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.vote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 12.5px; font-weight: 600; color: #5a6572;
  cursor: pointer; transition: all .15s;
}
.vote-btn b { font-size: 12.5px; font-weight: 700; min-width: 14px; text-align: center; }
.vote-btn:hover { border-color: #9fb8ad; color: var(--ink); }
.vote-btn.up.on { background: #e9f6ef; border-color: #1e8a5a; color: #157a4d; }
.vote-btn.up.on b { color: #157a4d; }
.vote-btn.down.on { background: #fdeeee; border-color: #d25757; color: #c0392b; }
.vote-btn.down.on b { color: #c0392b; }
.vote-tip { font-size: 11.5px; color: var(--muted); margin-left: auto; }

/* ============ 全局媒体查看器（图片放大 / 视频播放） ============ */
.media-viewer {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10, 18, 14, .88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 28px;
}
.media-viewer img {
  max-width: 94vw; max-height: 90vh; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: default;
}
.media-viewer video {
  max-width: 94vw; max-height: 90vh; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #000; cursor: default;
}
.media-viewer .mv-close {
  position: absolute; top: 18px; right: 22px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.media-viewer .mv-close:hover { background: rgba(255, 255, 255, .28); }

/* ============ 创作历史缩略图：点击查看/播放悬浮层 ============ */
.history-thumb { position: relative; }
.history-thumb .thumb-act {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(8, 24, 17, .38); color: #fff;
  opacity: 0; transition: opacity .18s;
  border-radius: inherit;
}
.history-thumb .thumb-act i { font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 2px; }
.history-thumb:hover .thumb-act { opacity: 1; }

/* ============ 画布：创作指令可编辑 ============ */
.run-prompt-edit {
  width: 100%; box-sizing: border-box; margin-top: 8px;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.65;
  font-family: inherit; resize: vertical; background: #fbfcfe; color: var(--ink);
}
.run-prompt-edit:focus { border-color: var(--brand); outline: none; }
.run-prompt-acts { display: flex; gap: 8px; margin-top: 8px; }
.run-card.flash { animation: runFlash 1.8s ease; }
@keyframes runFlash {
  0% { box-shadow: 0 0 0 0 rgba(21, 122, 77, 0); }
  18% { box-shadow: 0 0 0 5px rgba(21, 122, 77, .25); }
  100% { box-shadow: 0 0 0 0 rgba(21, 122, 77, 0); }
}

/* 画布生成图片点击放大提示 */
.run-media .image-grid img { cursor: zoom-in; transition: transform .15s; }
.run-media .image-grid img:hover { transform: scale(1.02); }

/* ============================================================
   v6 · 智能墨翠体系（2026-09-07 前端设计升级）
   入场序列 / 顶栏下划线 / 按钮扫光 / 降级动效
   ============================================================ */

/* —— 页面入场序列（错峰 reveal，3-6 组，60-120ms 间隔）—— */
.rv { opacity: 0; transform: translateY(22px); animation: rv-in var(--dur-slow) var(--ease-out) forwards; }
.rv:nth-of-type(1) { animation-delay: 0ms; }
.rv:nth-of-type(2) { animation-delay: 90ms; }
.rv:nth-of-type(3) { animation-delay: 180ms; }
.rv:nth-of-type(4) { animation-delay: 270ms; }
.hero-main .rv:nth-child(1) { animation-delay: 0ms; }
.hero-main .rv:nth-child(2) { animation-delay: 90ms; }
.hero-main .rv:nth-child(3) { animation-delay: 180ms; }
.hero-main .rv:nth-child(4) { animation-delay: 270ms; }
.hero-aside.rv { animation-delay: 220ms; }
@keyframes rv-in { to { opacity: 1; transform: none; } }

/* —— 顶栏精修：鎏金发丝底线 + 导航激活下划线扫光 —— */
.topbar { border-bottom: none; }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(216, 180, 92, .55) 24%, rgba(18, 163, 124, .75) 62%, transparent 100%);
  pointer-events: none;
}
.nav-btn { position: relative; }
.nav-btn::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(232, 200, 126, .9), rgba(127, 224, 187, .9));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-btn.active::after { transform: scaleX(1); }
.nav-btn:hover::after { transform: scaleX(.55); }

/* —— AI建模分组二级菜单（v6.2 / v6.3 交互与UI优化）—— */
.nav-group { position: relative; display: flex; }
.nav-parent { display: inline-flex; align-items: center; gap: 4px; }
.nav-caret { transition: transform .18s ease; opacity: .75; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-submenu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 420;
  width: 236px; padding: 7px;
  background: #fff; border: 1px solid rgba(14, 138, 109, .13); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(10, 48, 34, .18), 0 4px 12px rgba(10, 48, 34, .07);
  display: none; flex-direction: column; gap: 3px;
}
/* 鼠标滑行防回弹：菜单与父级按钮之间的 12px 空隙用透明桥接条覆盖，
   慢速下滑经过空隙时 hover 不中断（v6.3 修复"滑慢了弹回去"） */
.nav-submenu::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
/* v7.2 · 需求1：仅点击 .open 控制——移除 hover / focus-within 强制展开
   （点选二级项后鼠标仍在菜单上，hover/focus 规则会压过 JS 收起，导致菜单挡住「新建」按钮） */
.nav-group.open .nav-submenu { display: flex; }
.nav-sub-tip {
  font-size: 10.5px; color: #8aa89b; letter-spacing: 1px;
  padding: 5px 11px 4px; white-space: nowrap;
}
.nav-sub-btn {
  border: none; background: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px;
  white-space: nowrap; transition: background .15s, transform .15s;
}
.nav-sub-btn:hover { background: rgba(18, 163, 124, .09); transform: translateX(2px); }
.nav-sub-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(18, 163, 124, .13), rgba(18, 163, 124, .05));
  color: #0e8a6d; transition: all .15s;
}
.nav-sub-ic svg { width: 17px; height: 17px; }
.nav-sub-btn:hover .nav-sub-ic {
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%);
  color: #fff; box-shadow: 0 4px 10px rgba(14, 138, 109, .35);
}
.nav-sub-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-sub-txt b { font-size: 13.5px; font-weight: 700; color: #1f4436; line-height: 1.25; }
.nav-sub-txt small { font-size: 10.5px; color: #93a89e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sub-btn:hover .nav-sub-txt b { color: #0e8a6d; }
.nav-sub-btn.active { background: rgba(18, 163, 124, .10); }
.nav-sub-btn.active .nav-sub-ic {
  background: linear-gradient(135deg, #12a37c 0%, #0e8a6d 100%);
  color: #fff; box-shadow: 0 4px 10px rgba(14, 138, 109, .35);
}
.nav-sub-btn.active .nav-sub-txt b { color: #0e8a6d; }

/* —— 主按钮扫光（shine sweep）—— */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .34) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.btn.primary:hover::before { left: 130%; }

/* —— 模块标题统一宋体气质（卡片级 h2）—— */
.card-head h2, .demo-head h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: .01em; }

/* —— 降级动效：尊重系统「减少动态效果」设置 —— */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; animation: none; }
  .hero-radar i, .geo-radar i, .geo-kicker::before { animation: none; }
  .btn.primary::before { display: none; }
  .nav-btn::after { transition: none; }
  * { scroll-behavior: auto; }
}

/* ================ v7.3 头像菜单 + 账号中心（点数 / 明细 / 改密 / 存储） ================ */

/* —— 顶栏头像触发器（点击弹出菜单，非 hover）—— */
.topbar-user { position: relative; }
.user-trigger {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.user-trigger:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.user-trigger.open { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); }
.user-caret { font-size: 10px; color: rgba(244, 249, 246, .78); transition: transform var(--dur-fast) var(--ease-out); }
.user-trigger.open .user-caret { transform: rotate(180deg); }

/* —— 头像下拉菜单（浅色卡片）—— */
.user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 260;
  width: 252px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: umDrop var(--dur-base) var(--ease-out);
}
.user-menu[hidden] { display: none; }
@keyframes umDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.um-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.um-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff; background: var(--brand-grad);
}
.um-meta { display: flex; flex-direction: column; min-width: 0; }
.um-meta b { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-meta em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.um-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.um-item:hover { background: var(--brand-grad-soft); }
.um-ico { font-size: 17px; flex: none; width: 22px; text-align: center; }
.um-txt { display: flex; flex-direction: column; min-width: 0; }
.um-txt { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.um-txt small { font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }

/* —— 账号中心弹层 —— */
.acct-modal { width: min(580px, calc(100vw - 32px)); }
/* v7.5.2 · 需求3补充：账号中心标题与副标题左右居中（右侧留出关闭按钮位置） */
.acct-head { padding: 2px 46px 0; text-align: center; }
.acct-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 900; color: var(--ink); }
.acct-head p { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* v7.5 · 需求3：四页签等宽铺满整行、文字左右居中（修比例不协调/文字偏左） */
.acct-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
@media (max-width: 560px) {
  .acct-tabs { grid-template-columns: repeat(2, 1fr); }
}
.acct-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
  text-align: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.acct-tab span { font-size: 14px; }
.acct-tab:hover { border-color: var(--brand-3); color: var(--brand-2); }
.acct-tab.active {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(14, 138, 109, .28);
}
.acct-body { min-height: 200px; max-height: calc(100vh - 320px); overflow-y: auto; padding-right: 4px; }
.acct-loading, .acct-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; font-size: 13px; color: var(--muted);
}
.acct-card.big {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 16px; border-radius: var(--radius);
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 10px 26px rgba(14, 138, 109, .24);
}
.acct-num { font-family: var(--font-display); font-style: normal; font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: .01em; }
.acct-card.big span { font-size: 12.5px; color: rgba(255, 255, 255, .88); }
.acct-sub { margin: 16px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.arules { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.arule {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line);
}
.arule:last-child { border-bottom: 0; }
.arule span { font-size: 13px; color: var(--ink-2); }
.arule b { font-size: 13px; color: var(--brand-2); }
.arule.off span, .arule.off b { color: var(--muted); font-weight: 500; }
.acct-note {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: #f6faf8; border: 1px dashed var(--line);
  font-size: 12px; line-height: 1.65; color: var(--muted);
}
.acct-note b { color: var(--warn); }
.acct-loglist { display: flex; flex-direction: column; gap: 8px; }
.alog { padding: 10px 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.alog-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alog-main b { font-size: 13px; color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-amt { font-size: 13px; font-weight: 800; flex: none; }
.alog-amt.neg { color: var(--err); }
.alog-amt.pos { color: var(--ok); }
.alog-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.alog-sub b { color: var(--ink-2); }
.acct-bar { margin-top: 14px; height: 9px; border-radius: 999px; background: #e8f0ec; overflow: hidden; }
.acct-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-2), var(--brand-3)); transition: width var(--dur-base) var(--ease-out); }
.acct-barlabel { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.acct-form { display: flex; flex-direction: column; gap: 13px; }
.acct-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.acct-form input {
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px; color: var(--ink); background: #fff; outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.acct-form input:focus { border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(53, 169, 138, .14); }
.acct-pw-msg { padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; background: #edf7f1; color: var(--brand-2); border: 1px solid #cfe8dd; }
.acct-pw-msg.err { background: #fdf0ee; color: var(--err); border-color: #f2d4cf; }

/* ================ v7.3.1 账号中心四页签布局精修（留白/紧凑/空状态） ================ */

/* 弹层内容统一留白（此前内容顶到弹层圆角边缘，显得拥挤） */
.acct-body { padding: 22px 24px; min-height: 230px; max-height: calc(100vh - 330px); overflow-y: auto; }

/* —— 数字大卡改为横向紧凑卡（左文案右数字，不再整块渐变）—— */
.acct-card.big {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--brand-grad-soft); border: 1px solid #d9ebdf;
  box-shadow: none; color: var(--ink);
}
.ac-big-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-big-left b { font-size: 14.5px; color: var(--ink); }
.ac-big-left span { font-size: 12px; color: var(--muted); line-height: 1.55; }
.acct-num {
  font-family: var(--font-display); font-style: normal; font-size: 32px; font-weight: 900;
  color: var(--brand-2); line-height: 1; flex: none; display: flex; align-items: baseline; gap: 5px;
}
.acct-num small { font-size: 13px; font-weight: 700; }

/* —— 扣点规则改双列网格（6 项 3 行，更省纵向空间）—— */
.arules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.arule { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.arule b { white-space: nowrap; }

/* —— 点数明细：汇总条 + 图标行流水 —— */
.acct-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; font-size: 12.5px; color: var(--muted);
}
.acct-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: 999px; background: var(--brand-grad-soft); border: 1px solid #d9ebdf;
  font-size: 12px; font-weight: 700; color: var(--brand-2);
}
.alog { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.alog-ico {
  width: 32px; height: 32px; border-radius: 10px; flex: none; font-size: 15px;
  display: flex; align-items: center; justify-content: center; background: #f0f7f3;
}
.alog-ico.neg { background: #fdf0ee; }
.alog-ico.pos { background: #edf7f1; }
.alog-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.alog-txt b { font-size: 13px; color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-txt em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alog-amt { font-size: 14px; }

/* —— 空状态：柔色圆标 + 标题 + 说明（替代大面积空白里一行字）—— */
.acct-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; min-height: 230px; text-align: center;
}
.acct-empty-ico {
  width: 56px; height: 56px; border-radius: 50%; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-grad-soft); margin-bottom: 4px;
}
.acct-empty b { font-size: 14px; color: var(--ink-2); font-weight: 650; }
.acct-empty em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.65; max-width: 340px; }

/* —— 储存空间：三统计卡 —— */
.acct-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acard {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc;
}
.acard-num { font-family: var(--font-display); font-style: normal; font-size: 19px; font-weight: 900; color: var(--ink); }
.acard-num.brand { color: var(--brand-2); }
.acard span { font-size: 11.5px; color: var(--muted); }
.acct-barlabel { display: flex; justify-content: space-between; }

/* —— 表单操作按钮右对齐 —— */
.af-actions { display: flex; justify-content: flex-end; }

/* v7.3.1 修正：显式覆盖旧版 column 堆叠与白色文字残留 */
.acct-card.big { flex-direction: row; }
.acct-card.big .ac-big-left b { color: var(--ink); }
.acct-card.big .ac-big-left span { color: var(--muted); }
.acct-card.big .acct-num, .acct-card.big .acct-num small { color: var(--brand-2); }