/*

 * 赢在云·视频坊 H5 — 春意盎然·薄荷绿清新风

 * 1:1 克隆原版图片布局（首页-1.jpg + 首页-2.jpg）

 * 配色方案：春晨底 #FFFFFF + 亮翡翠绿 #34D399 + 深林字 #1A2E22 + 白卡 #FFFFFF

 */



/* ========== 主题变量 ========== */

:root {

  --gold-1: #FBBF24;   /* 亮琥珀金 */

  --gold-2: #F59E0B;   /* 琥珀金 */

  --gold-3: #D97706;   /* 深琥珀金 */

  --gold-grad: linear-gradient(135deg, #FBBF24, #F59E0B);

}



/* ========== 全局重置 & 基础 ========== */

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



html {

  overflow-y: auto;

  height: auto;

  min-height: 100%;

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;

  background-color: #F2FAF6;

  color: #1A2E22;

  line-height: 1.5;

  overflow-x: hidden;

  padding-bottom: env(safe-area-inset-bottom);

}





/* ========== 状态栏（模拟手机） ========== */

.status-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 6px 16px;

  background: linear-gradient(180deg, #34D399 0%, #10B981 100%);

  color: #FFFFFF;

  font-size: 14px;

  font-weight: 600;

}

.status-time { letter-spacing: 1px; }

.status-icons { display: flex; gap: 4px; align-items: center; font-size: 12px; }

.status-battery { margin-left: 2px; }





/* Hero 区域（绿底 + 左文字右美女图，严格按11.jpg比例还原） */

.hero-section {

  display: flex;

  justify-content: space-between;

  align-items: stretch;

  padding: 4px 14px 6px;

  position: relative;

  background: linear-gradient(180deg, #34D399 0%, #10B981 60%, #059669 100%);

  min-height: 180px;

  overflow: hidden;

}

.hero-left { flex: 1; z-index: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 6px; }

.hero-brand {

  font-size: 13px;

  font-weight: 700;

  color: rgba(255,255,255,0.92);

  margin-bottom: 4px;

  letter-spacing: 1px;

}

.hero-title {

  font-size: 22px;

  font-weight: 800;

  color: #1A2E22;

  line-height: 1.2;

  margin-bottom: 5px;

  letter-spacing: 0.8px;

}

.hero-subtitle {

  font-size: 12px;

  color: rgba(255,255,255,0.85);

  margin-bottom: 8px;

}

.hero-tag {

  display: inline-block;

  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));

  color: #1A2E22;

  font-size: 12px;
  font-weight: 500;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 16px;

  letter-spacing: 0.4px;

}

/* 右侧数字人图（人物已裁切成近方竖版，contain完整放大、头顶贴边） */

.hero-right {

  width: 55%;

  height: 100%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.digital-human-img {

  width: 100%;

  height: auto;

  max-height: 170px;

  object-fit: contain;

  object-position: center top;

  display: block;

}





/* ========== 第一行：左XL大卡 + 右侧SM×2堆叠 ========== */

.row-top-cards {

  display: flex;

  gap: 10px;

  padding: 0 14px;

  margin-bottom: 10px;

}



/* ---- 左侧 XL 大卡（剪辑数字人视频·核心功能·保留翡翠绿） ---- */

.card-xl {

  flex: 1;

  min-height: 150px;

  background: linear-gradient(145deg, #D1FAE5 0%, #A7F3D0 50%, #6EE7B7 100%);

  border: 1px solid rgba(16,185,129,0.25);

  border-radius: 16px;

  padding: 18px 16px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 4px 20px rgba(16,185,129,0.12), inset 0 1px 0 rgba(255,255,255,0.8);

  z-index: 1;

}

.card-xl-header,

.card-xl-body { position: relative; z-index: 2; }

.card-xl .btn-go-edit { z-index: 5; }

.card-xl::before {

  content: '';

  position: absolute;

  top: -30px; right: -30px;

  width: 100px; height: 100px;

  background: radial-gradient(circle, rgba(52,211,153,0.15) 0%, transparent 70%);

  border-radius: 50%;

}

.card-xl-header h3 {

  font-size: 17px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 4px;

}

.card-xl-header p {

  font-size: 12px;

  color: #6B7280;

}

.card-xl-body {

  margin-top: 20px;

  display: flex;

  align-items: center;

  gap: 12px;

}

.ai-3d-icon {

  width: 86px;

  height: 86px;

  background: linear-gradient(145deg, #ecfdf5, #d1fae5);

  border: 2px solid rgba(16,185,129,0.40);

  border-radius: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 32px;

  font-weight: 900;

  color: #065f46;

  letter-spacing: -1px;

  box-shadow:

    -16px 6px 0 rgba(16,185,129,0.42),

    -10px 6px 0 rgba(5,150,105,0.32),

    -5px 7px 14px rgba(0,0,0,0.15),

    inset 0 -2px 0 rgba(255,255,255,0.7),

    inset 0 3px 8px rgba(16,185,129,0.12);

  text-shadow:

    -1px 4px 0 #34d399,

    -2px 5px 0 #10b981,

    -3px 5px 0 #10b981,

    -4px 6px 0 #059669,

    -5px 6px 0 #047857,

    -6px 7px 0 #065f46,

    -7px 7px 0 #064e3b,

    -8px 8px 0 #064e3b,

    -9px 8px 0 #064e3b,

    -10px 9px 0 #064e3b,

    -11px 9px 0 #022c22,

    -12px 10px 0 #022c22,

    -13px 11px 16px rgba(0,0,0,0.50);

}

.btn-go-edit {

  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));

  color: #065F46;

  border: none;

  padding: 9px 20px;

  border-radius: 22px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 3px 14px rgba(52,211,153,0.4);

  transition: transform 0.15s, box-shadow 0.15s;

}

.btn-go-edit:active { transform: scale(0.96); }



/* ---- 右侧两小卡容器 ---- */

.col-right {

  display: flex;

  flex-direction: column;

  gap: 10px;

  width: 130px;

  flex-shrink: 0;

}



/* SM 小卡通用 */

.card-sm {

  flex: 1;

  border-radius: 14px;

  padding: 14px 12px;

  box-shadow: 0 2px 12px rgba(0,0,0,0.06);

  position: relative;

  overflow: hidden;

}



/* 数字人素材卡 · 暖琥珀（呼应金色点缀） */

#cardUpload {

  background: linear-gradient(145deg, #FFFBEB 0%, #FEF3C7 50%, #FDE68A 100%);

  border: 1px solid rgba(245,158,11,0.25);

}

#cardUpload .icon-circle {

  background: rgba(245,158,11,0.15);

  border: 1.5px solid rgba(245,158,11,0.35);

  color: #D97706;

}



/* AI声音克隆卡 · 清透天蓝 */

#cardVoice {

  background: linear-gradient(145deg, #F0F9FF 0%, #E0F2FE 50%, #BAE6FD 100%);

  border: 1px solid rgba(56,189,248,0.25);

}

#cardVoice .voice-wave-icon span {

  background: #38BDF8;

}

.card-sm-content {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

}

.card-sm h4 {

  font-size: 14px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 3px;

}

.card-sm p {

  font-size: 11px;

  color: #6B7280;

}

/* 数字人素材卡 · 上传箭头（简洁，无圆圈） */

.upload-icon {

  width: 32px;

  height: 32px;

  border-radius: 8px;

  background: rgba(52,211,153,0.12);

  border: 1.5px dashed rgba(16,185,129,0.4);

  color: #059669;

  font-size: 18px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  line-height: 1;

}

.icon-circle {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 17px;

  flex-shrink: 0;

}

.icon-blue {

  background: rgba(52,211,153,0.15);

  border: 1.5px solid rgba(52,211,153,0.35);

  color: #059669;

}

/* 上传预览区 */

.upload-preview {

  margin-top: 8px;

  display: none;

}

.upload-preview img {

  max-width: 100%;

  max-height: 80px;

  border-radius: 8px;

  object-fit: cover;

}

.upload-preview.has-img { display: block; }



/* 声波图标 */

.voice-wave-icon {

  display: flex;

  gap: 4px;

  align-items: flex-end;

  height: 24px;

}

.voice-wave-icon span {

  width: 4px;

  background: #34D399;

  border-radius: 2px;

  animation: wave 1s ease-in-out infinite;

}

.voice-wave-icon span:nth-child(1) { height: 8px; animation-delay: 0s; }

.voice-wave-icon span:nth-child(2) { height: 16px; animation-delay: 0.2s; }

.voice-wave-icon span:nth-child(3) { height: 10px; animation-delay: 0.4s; }

@keyframes wave {

  0%, 100% { transform: scaleY(1); }

  50% { transform: scaleY(1.8); }

}



/* 音色下拉框 */

.voice-select {

  margin-top: 8px;

  width: 100%;

  padding: 7px 8px;

  background: linear-gradient(180deg, #38BDF8 0%, #0EA5E9 100%);

  border: 1px solid rgba(56,189,248,0.3);

  border-radius: 8px;

  color: #0C4A6E;

  font-size: 12px;

  outline: none;

  appearance: none;

}





/* ========== 第二行：AI图片 + AI视频（等宽中卡） ========== */

.row-mid-cards {

  display: flex;

  gap: 10px;

  padding: 0 14px;

  margin-bottom: 10px;

}

.card-md {

  flex: 1;

  border-radius: 14px;

  padding: 14px;

  position: relative;

  overflow: hidden;

  min-height: 110px;

  box-shadow: 0 2px 12px rgba(0,0,0,0.06);

}



/* AI视频卡 · 靛蓝科技感 */

.card-video-ai {

  background: linear-gradient(145deg, #E8F4FC 0%, #D6EBF9 40%, #BDDAF2 100%);

  border: 1px solid rgba(59,130,246,0.20);

  position: relative;

  overflow: hidden;

}

/* AI视频卡：抠图人物作为第二层背景（右下角装饰，天蓝为最底层） */

.card-video-ai::after {

  content: '';

  position: absolute;

  bottom: -60px;

  right: 42px;

  width: 180px;

  height: auto;

  aspect-ratio: 3/4;

  background: url('images/red1-removed.png') no-repeat center/contain;

  opacity: 0.85;

  pointer-events: none;

  z-index: 0;

}

.card-video-ai .card-md-header,

.card-video-ai .card-md-thumb {

  position: relative;

  z-index: 1;

}

.card-video-ai .thumb-placeholder {

  background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.03));

  border: 1px dashed rgba(59,130,246,0.25);

}

/* 隐藏AI视频卡右下角小方块 */

.card-video-ai .card-md-thumb {

  display: none;

}



/* AI图片卡 · 柔和玫瑰（呼应国旗红但不抢） */

.card-photo-ai {

  background: linear-gradient(145deg, #FFF1F2 0%, #FFE4E6 50%, #FECDD3 100%);

  border: 1px solid rgba(251,113,133,0.25);

  position: relative;

  overflow: hidden;

}

/* AI图片卡：抠图人物作为第二层背景（右下角装饰，浅粉红为最底层） */

.card-photo-ai::after {

  content: '';

  position: absolute;

  bottom: -79px;

  right: -19px;

  width: 180px;

  height: auto;

  aspect-ratio: 3/4;

  background: url('images/red2-removed.png') no-repeat center/contain;

  opacity: 0.85;

  pointer-events: none;

  z-index: 0;

}

/* 隐藏AI图片卡右下角小方块 */

.card-photo-ai .thumb-placeholder {

  display: none;

}

.card-photo-ai .card-md-header,

.card-photo-ai .card-md-thumb {

  position: relative;

  z-index: 1;

}

.card-md-header h4 {

  font-size: 15px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 4px;

}

.card-md-header p {

  font-size: 11px;

  color: #6B7280;

  line-height: 1.4;

}

.card-md-thumb {

  position: absolute;

  bottom: 8px;

  right: 10px;

  width: 66px;

  height: 66px;

  border-radius: 14px;

  overflow: visible;

}

.thumb-placeholder {

  width: 100%;

  height: 100%;

  background: linear-gradient(145deg, #fff7ed, #fed7aa);

  border-radius: 14px;

  border: none;

  /* 3D厚度：右侧+底部深色层 */

  box-shadow:

    4px 4px 0 #f97316,

    8px 8px 0 #ea580c,

    12px 12px 20px rgba(234,88,12,0.35),

    inset 2px 2px 6px rgba(255,255,255,0.7),

    inset -1px -1px 4px rgba(249,115,22,0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  font-weight: 900;

  color: #c2410c;

  text-shadow:

    1px 1px 0 rgba(255,255,255,0.9),

    -1px -1px 2px rgba(194,65,12,0.5),

    0 3px 6px rgba(194,65,12,0.25);

  letter-spacing: -1px;

}

.badge-new {

  position: absolute;

  top: 8px;

  left: 8px;

  width: 20px;

  height: 20px;

  background: var(--gold-grad);

  color: #1A2E22;

  border-radius: 50%;

  font-size: 11px;

  font-weight: 800;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 6px rgba(245,158,11,0.4);

}





/* ========== 横幅Banner：全球语音克隆 ========== */

/* 全球语音克隆卡片 - 右侧腾讯蓝地球 */

/* 全球语音克隆卡片 - 右侧高清写实地球图（rembg抠图透明PNG） */

.banner-map {

  flex-shrink: 0;

  width: 150px;

  height: 150px;

  margin-left: 71px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 2;

}

.globe-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



.card-banner {

  margin: 0 0 14px;

  padding: 20px 18px;

  background: linear-gradient(135deg, #0a1628 0%, #0d2137 30%, #102a43 60%, #0f1b2e 100%);

  border: 1px solid rgba(100,180,255,0.25);

  border-radius: 14px;

  position: relative;

  overflow: hidden;

  min-height: 170px;

  display: flex;

  align-items: center;

}



/* 小横幅变体：满行；地球图保持原大小150、位置不动；蓝色背景紧包内容无多余 */

.card-banner-sm {

  min-height: auto;

  padding: 8px 16px;

}

.card-banner-sm .banner-text h3 { font-size: 16px; }

.card-banner-sm .banner-text p  { font-size: 11px; }



/* 整图 Banner 变体：直接塞入裁好的 Banner 图，无多余背景 */

.card-banner.card-banner-image {

  padding: 0;

  background: none;

  border: none;

  min-height: auto;

  display: block;

}

.card-banner.card-banner-image img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 14px;

}



/* 紫色大横幅变体：重点位、未来重头戏（智能AI办公助手） */

.card-banner-purple {

  background: linear-gradient(135deg, #2d1b69 0%, #4c1d95 55%, #7c3aed 100%);

  border: 1px solid rgba(167,139,250,0.45);

  min-height: 56px;          /* 改小：大幅降低占屏高度 */

  padding: 12px 16px;        /* 改小：收紧内边距 */

  /* 标题左对齐（默认，移除居中） */

}

.card-banner-purple .banner-text { width: auto; }   /* 左对齐，不占满宽度 */

.card-banner-purple .banner-text h3 { color: #F5F0FF; font-size: 16px; }

.card-banner-purple .banner-text p  { color: rgba(255,255,255,0.92); }



/* 智能AI办公助手 - 副标题彩色图标功能标签 */

.ai-office-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px 16px;

  margin-top: 10px;

  position: relative;

  z-index: 2;

}

.ai-office-tag {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 15px;

  font-weight: 700;

  color: #FFFFFF;

}

.ai-ic {

  display: inline-grid;

  place-items: center;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  flex-shrink: 0;

}

.ai-ic svg { width: 22px; height: 22px; display: block; }



/* 智能AI办公助手 第二屏：6 大办公功能网格 */

.section-aioffice-top {

  background: linear-gradient(160deg, #5B21B6 0%, #6D28D9 55%, #7C3AED 100%);

  border-radius: 20px;

  padding: 16px 14px 18px;

  margin: 14px 14px 4px;

  box-shadow: 0 6px 20px rgba(91,33,182,0.30);

}

.aio-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

  margin-top: 14px;

}

.aio-card {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px;

  background: rgba(255,255,255,0.12);

  border: 1px solid rgba(167,139,250,0.35);

  border-radius: 14px;

  cursor: pointer;

  transition: transform .12s ease, background .12s ease;

}

.aio-card:active { transform: scale(0.98); }

.aio-card .aio-ic {

  display: inline-grid;

  place-items: center;

  width: 40px;

  height: 40px;

  border-radius: 12px;

  flex-shrink: 0;

}

.aio-card .aio-ic svg { width: 22px; height: 22px; display: block; }

.aio-meta h4 { font-size: 15px; font-weight: 700; color: #F5F0FF; margin-bottom: 2px; }

.aio-meta p { font-size: 12px; color: rgba(255,255,255,0.72); }

.banner-text h3 {

  font-size: 17px;

  font-weight: 700;

  color: #E8F4FD;

  margin-bottom: 4px;

  position: relative;

  z-index: 2;

}

.banner-text p {

  font-size: 12px;

  color: rgba(255,255,255,0.85);

  position: relative;

  z-index: 2;

}

.wave-bg {

  position: absolute;

  inset: 0;

  opacity: 0.7;

  background:

    radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,0.9), transparent),

    radial-gradient(1px 1px at 16% 62%, rgba(200,220,255,0.7), transparent),

    radial-gradient(1.5px 1.5px at 24% 35%, rgba(255,255,255,0.85), transparent),

    radial-gradient(1px 1px at 32% 78%, rgba(220,235,255,0.6), transparent),

    radial-gradient(1.3px 1.3px at 38% 12%, rgba(255,255,255,0.8), transparent),

    radial-gradient(1px 1px at 45% 52%, rgba(190,215,255,0.7), transparent),

    radial-gradient(1.6px 1.6px at 52% 28%, rgba(255,255,255,0.95), transparent),

    radial-gradient(1px 1px at 58% 72%, rgba(210,230,255,0.6), transparent),

    radial-gradient(1.2px 1.2px at 64% 18%, rgba(255,255,255,0.8), transparent),

    radial-gradient(1px 1px at 70% 48%, rgba(180,210,255,0.7), transparent),

    radial-gradient(1.4px 1.4px at 76% 82%, rgba(255,255,255,0.85), transparent),

    radial-gradient(1px 1px at 82% 22%, rgba(200,225,255,0.7), transparent),

    radial-gradient(1.5px 1.5px at 88% 58%, rgba(255,255,255,0.9), transparent),

    radial-gradient(1px 1px at 93% 35%, rgba(220,235,255,0.6), transparent),

    radial-gradient(1.2px 1.2px at 12% 42%, rgba(255,255,255,0.7), transparent),

    radial-gradient(1px 1px at 28% 88%, rgba(210,230,255,0.6), transparent),

    radial-gradient(1.3px 1.3px at 48% 68%, rgba(255,255,255,0.8), transparent),

    radial-gradient(1px 1px at 62% 92%, rgba(190,215,255,0.6), transparent),

    radial-gradient(1.4px 1.4px at 78% 60%, rgba(255,255,255,0.85), transparent),

    radial-gradient(1px 1px at 92% 78%, rgba(220,235,255,0.7), transparent),

    radial-gradient(1.2px 1.2px at 35% 45%, rgba(255,255,255,0.75), transparent),

    radial-gradient(1px 1px at 68% 38%, rgba(200,225,255,0.65), transparent);

  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);

  -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);

}





/* ========== 智能文案区段（三列XS迷你卡） ========== */

.section-smart-copy {

  padding: 4px 14px 14px;

}

.section-title {

  position: relative;

  padding-left: 12px;

  font-size: 17px;

  font-weight: 800;

  color: #1A2E22;

  margin-bottom: 10px;

  letter-spacing: 0.5px;

}

.section-title::before {

  content: '';

  position: absolute;

  left: 0;

  top: 3px;

  bottom: 3px;

  width: 4px;

  border-radius: 2px;

  background: var(--gold-grad);

  box-shadow: 0 0 8px rgba(245,158,11,0.4);

}

.row-xs-cards {

  display: flex;

  gap: 8px;

}

.card-xs {

  flex: 1;

  border-radius: 12px;

  padding: 12px 10px;

  position: relative;

  overflow: hidden;

  min-height: 88px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.card-xs h5 {

  font-size: 13px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 2px;

}

.xs-desc {

  font-size: 10px;

  color: #6B7280;

}

.xs-icon {

  font-size: 22px;

  align-self: flex-end;

  margin-top: 4px;

  opacity: 0.7;

}

/* 三张XS卡各自颜色 */

.card-deepseek {

  background: linear-gradient(155deg, #ECFDF5, #D1FAE5);

  border: 1px solid rgba(16,185,129,0.2);

}

.card-ai-copy {

  background: linear-gradient(155deg, #A7F3D0, #6EE7B7);

  border: 1px solid rgba(16,185,129,0.2);

}

.card-ai-chat {

  background: linear-gradient(155deg, #34D399, #10B981);

  border: 1px solid rgba(255,255,255,0.2);

}

.badge-invite {

  position: absolute;

  top: 6px;

  right: 6px;

  background: var(--gold-grad);

  color: #1A2E22;

  font-size: 9px;

  font-weight: 700;

  padding: 3px 7px;

  border-radius: 10px;

  white-space: nowrap;

  box-shadow: 0 2px 6px rgba(245,158,11,0.35);

}

.badge-invite-sm {

  font-size: 8px;

  padding: 2px 6px;

  border-radius: 8px;

}





/* ========== AI智剪 区段标题 ========== */

.section-ai-edit {

  padding: 6px 14px 10px;

}

.section-title-accent {

  color: #059669;

  text-shadow: 0 0 12px rgba(52,211,153,0.3);

}





/* ========== 图2 下页：导航条 ========== */

.sub-nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 16px 18px;

  background: linear-gradient(180deg, #059669, #047857);

  border-bottom: 1px solid rgba(16,185,129,0.3);

  position: relative;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 14px rgba(5,95,70,0.22);

}

.nav-title {

  font-size: 19px;

  font-weight: 800;

  color: #FFFFFF;

}

.nav-subtitle {

  font-size: 11px;

  color: rgba(255,255,255,0.75);

  margin-top: 2px;

}

.nav-right {

  width: 90px;

  height: 100px;

  position: relative;

  flex-shrink: 0;

}

.nav-phone-frame {

  width: 54px;

  height: 94px;

  border: 2px solid rgba(52,211,153,0.4);

  border-radius: 8px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  background: rgba(255,255,255,0.7);

}

.nav-phone-screen {

  width: 100%; height: 100%;

  border-radius: 6px;

  background: linear-gradient(160deg, rgba(52,211,153,0.1), transparent);

}

.nav-avatars { position: absolute; top: 0; right: 0; width: 82px; height: 96px; }

.nav-avatar {

  position: absolute;

  border-radius: 50%;

  opacity: 0.18;

  background: linear-gradient(135deg, #34D399, #059669);

}

.nav-avatar-1 { width: 38px; height: 38px; top: 2px; right: 22px; }

.nav-avatar-2 { width: 32px; height: 32px; top: 36px; right: 2px; opacity: 0.12; }





/* ========== AI换脸特效（两列大卡片） ========== */

.section-face-swap {

  padding: 8px 14px 14px;

}

.row-feature-cards {

  display: flex;

  gap: 10px;

}

.card-feature {

  flex: 1;

  border-radius: 16px;

  padding: 11px 12px;

  position: relative;

  overflow: hidden;

  min-height: 170px;

  max-height: 205px;

  display: flex;

  flex-direction: column;

}

.card-feature h3 {

  position: absolute;

  bottom: 55px;

  left: 12px;

  z-index: 3;

  font-size: 18px;

  font-weight: 800;

  color: #FFFFFF;

  text-shadow:

    -1px -1px 0 rgba(0,0,0,0.85),

     1px -1px 0 rgba(0,0,0,0.85),

    -1px  1px 0 rgba(0,0,0,0.85),

     1px  1px 0 rgba(0,0,0,0.85),

     0 2px 5px rgba(0,0,0,0.7);

}

.feature-sub {

  position: absolute;

  bottom: 39px;

  left: 12px;

  z-index: 3;

  font-size: 11px;

  font-weight: 600;

  color: #FFFFFF;

  text-shadow:

    -1px -1px 0 rgba(0,0,0,0.85),

     1px -1px 0 rgba(0,0,0,0.85),

    -1px  1px 0 rgba(0,0,0,0.85),

     1px  1px 0 rgba(0,0,0,0.85),

     0 1px 4px rgba(0,0,0,0.7);

}

.feature-thumb {

  position: absolute;

  inset: 0;

  z-index: 1;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  overflow: hidden;

}

.face-thumb-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center bottom;

  transform: scale(1.1);

  transform-origin: center bottom;

  display: block;

}

.use-now-text {

  position: absolute;

  bottom: 8px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 3;

  color: #DC2626;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1px;

  background: rgba(0,0,0,0.32);

  padding: 3px 14px;

  border-radius: 14px;

  white-space: nowrap;

}

.btn-use-now {

  background: rgba(255,255,255,0.15);

  color: #FFFFFF;

  border: 1px solid rgba(255,255,255,0.3);

  padding: 9px 0;

  border-radius: 22px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.15s;

}

.btn-use-now:hover {

  background: rgba(255,255,255,0.25);

  border-color: rgba(255,255,255,0.5);

}

.btn-use-now:active { transform: scale(0.97); }



/* 两张大卡不同色调 - 深青绿底 */

.card-feature-warm {

  background: linear-gradient(160deg, #059669, #047857, #065F46);

  border: 1px solid rgba(52,211,153,0.35);

  box-shadow: 0 6px 22px rgba(5,95,70,0.28), inset 0 1px 0 rgba(255,255,255,0.18);

}

.card-feature-cool {

  background: linear-gradient(160deg, #10B981, #059669, #047857);

  border: 1px solid rgba(52,211,153,0.35);

  box-shadow: 0 6px 22px rgba(5,95,70,0.28), inset 0 1px 0 rgba(255,255,255,0.18);

}





/* ========== AI智能体（6个工具网格） ========== */

.section-ai-agents {

  padding: 8px 14px 18px;

}

.grid-tool-cards {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}

/* ========== AI工具网格（多彩卡片·每卡独立性格色） ========== */

.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px; }



.card-tool {

  border-radius: 14px;

  padding: 14px 12px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 2px 12px rgba(0,0,0,0.06);

  transition: border-color 0.15s, box-shadow 0.15s;

}



/* 默认底色（兜底） */

.card-tool {

  background: linear-gradient(145deg, #F5F3FF, #EDE9FE);

  border: 1px solid rgba(139,92,246,0.18);

}



/* ① 短视频脚本 — 🟣 紫罗兰（创意灵感） */

[data-tool="script"] {

  background: linear-gradient(145deg, #F5F3FF 0%, #EDE9FE 50%, #DDD6FE 100%);

  border: 1px solid rgba(139,92,246,0.22);

  box-shadow: 0 2px 12px rgba(139,92,246,0.1);

}

[data-tool="script"] .tool-icon     { background: rgba(139,92,246,0.12); border: 1px solid rgba(167,139,250,0.3); }

[data-tool="script"]:active        { border-color: rgba(139,92,246,0.45); }



/* ② 文案精修师 — 🟠 暖橙杏（文字温度） */

[data-tool="polish"] {

  background: linear-gradient(145deg, #FFF7ED 0%, #FFEDD5 50%, #FDBA74 100%);

  border: 1px solid rgba(251,146,60,0.25);

  box-shadow: 0 2px 12px rgba(251,146,60,0.1);

}

[data-tool="polish"] .tool-icon     { background: rgba(251,146,60,0.12); border: 1px solid rgba(251,146,60,0.3); }

[data-tool="polish"]:active        { border-color: rgba(251,146,60,0.45); }



/* ③ 智能AI办公助手 — 🔵🟡 深蓝科技+金光（未来趋势·全页第二主角） */

[data-tool="aioffice"] {

  background: linear-gradient(145deg, #1E3A5F 0%, #1E40AF 40%, #312E81 100%);

  border: 1.5px solid rgba(251,191,36,0.5);

  box-shadow:

    0 4px 20px rgba(30,64,175,0.35),

    0 0 24px rgba(251,191,36,0.12),

    inset 0 1px 0 rgba(255,255,255,0.08);

  position: relative;

}

/* 金色呼吸光晕（左上角装饰） */

[data-tool="aioffice"]::before {

  content: '';

  position: absolute;

  top: -1px; left: -1px;

  width: 50%; height: 50%;

  background: radial-gradient(circle at top left, rgba(251,191,36,0.2), transparent 70%);

  border-radius: 14px 0 100% 0;

  pointer-events: none;

}

[data-tool="aioffice"] .tool-icon    {

  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));

  border: 1px solid rgba(251,191,36,0.4);

  box-shadow: 0 2px 8px rgba(251,191,36,0.15);

}

[data-tool="aioffice"] h4          { color: #FEF3C7 !important; }  /* 标题金色 */

[data-tool="aioffice"] p           { color: #BFDBFE !important; }   /* 副标题浅蓝 */

[data-tool="aioffice"]:active      { border-color: rgba(251,191,36,0.75); transform: scale(0.98); }

/* 免费使用角标在深底上更跳 */

[data-tool="aioffice"] .badge-free {

  background: var(--gold-grad) !important;

  color: #1A2E22 !important;

  font-weight: 800;

  box-shadow: 0 2px 8px rgba(245,158,11,0.4);

}



/* ④ 爆款标题 — 💜 品红洋红（醒目吸睛） */

[data-tool="hot-title"] {

  background: linear-gradient(145deg, #FDF4FF 0%, #FAE8FF 50%, #F5D0FE 100%);

  border: 1px solid rgba(217,70,239,0.25);

  box-shadow: 0 2px 12px rgba(217,70,239,0.1);

}

[data-tool="hot-title"] .tool-icon    { background: rgba(217,70,239,0.12); border: 1px solid rgba(217,70,239,0.3); }

[data-tool="hot-title"]:active       { border-color: rgba(217,70,239,0.45); }



/* ⑤ AI起号助手（span-2 占满整行）— 🫚 柠檬黄绿（活力成长） */

[data-tool="qihaobangshou"] {

  background: linear-gradient(145deg, #ECFCCB 0%, #D9F99D 50%, #BEF264 100%);

  border: 1px solid rgba(163,230,53,0.28);

  box-shadow: 0 2px 14px rgba(163,230,53,0.12);

}

[data-tool="qihaobangshou"] .tool-icon { background: rgba(132,204,22,0.14); border: 1px solid rgba(163,230,53,0.35); }

[data-tool="qihaobangshou"]:active    { border-color: rgba(163,230,53,0.5); }

.tool-icon {

  width: 38px;

  height: 38px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 19px;

  margin-bottom: 8px;

}

.tool-icon-blue    { background: rgba(52,211,153,0.1);  border: 1px solid rgba(255,255,255,0.2); }

.tool-icon-red     { background: rgba(52,211,153,0.1);  border: 1px solid rgba(255,255,255,0.2); }

.tool-icon-xhs     { background: rgba(52,211,153,0.1);  border: 1px solid rgba(255,255,255,0.2); }

.tool-icon-purple  { background: rgba(52,211,153,0.08); border: 1px solid rgba(16,185,129,0.2); }

.tool-icon-orange  { background: rgba(52,211,153,0.1);  border: 1px solid rgba(255,255,255,0.2); }

.tool-icon-lightblue{ background: rgba(52,211,153,0.09); border: 1px solid rgba(16,185,129,0.2); }

.tool-icon-green    { background: rgba(16,185,129,0.12);   border: 1px solid rgba(16,185,129,0.3); }  /* 视频号绿 */

.tool-icon-gold     { background: rgba(5,150,105,0.14); border: 1px solid rgba(5,150,105,0.3); } /* 爆款深绿 */

.tool-icon-cyan     { background: rgba(16,185,129,0.12);  border: 1px solid rgba(16,185,129,0.3);}/* 起号绿 */



/* ========== 末位特征卡占满整行 ========== */

.span-2 { grid-column: 1 / -1; }



/* ========== 精品课程卡 ========== */

.subsection-title { font-size: 14px; color: #065F46; font-weight: 700; margin: 16px 2px 10px; }

.course-cards { display: flex; flex-direction: column; gap: 10px; }

.card-course {

  display: flex; align-items: center; gap: 12px;

  background: linear-gradient(135deg, #D1FAE5, #A7F3D0);

  border: 1px solid rgba(52,211,153,0.35);

  border-radius: 14px; padding: 12px 14px;

  box-shadow: 0 2px 12px rgba(16,185,129,0.1);

}

.course-thumb {

  width: 46px; height: 46px; flex-shrink: 0;

  display: flex; align-items: center; justify-content: center;

  font-size: 24px;

  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3); border-radius: 12px;

}

.course-info { flex: 1; min-width: 0; }

.course-info h4 { font-size: 14px; color: #065F46; margin: 0 0 3px; }

.course-info p { font-size: 11px; color: #999; margin: 0; }

.badge-course {

  display: inline-block; margin-top: 5px;

  background: var(--gold-grad); color: #1A2E22;

  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 8px;

  box-shadow: 0 2px 6px rgba(245,158,11,0.3);

}

.course-go { flex-shrink: 0; color: #059669; font-size: 12px; font-weight: 700; }



.card-tool h4 {

  font-size: 14px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 3px;

}

.card-tool p {

  font-size: 11px;

  color: #6B7280;

  line-height: 1.35;

}





/* ========== 爆款拆稿宝（国旗红·高频入口·全页最醒目） ========== */

.section-extract {

  padding: 18px 16px 14px;

  margin: 4px 14px 10px;

  background: linear-gradient(145deg, #DC2626 0%, #B91C1C 50%, #991B1B 100%);

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.2);

  box-shadow: 0 6px 24px rgba(220,38,38,0.35), inset 0 1px 0 rgba(255,255,255,0.15);

  position: relative;

  overflow: hidden;

}

/* 左上角光晕装饰 */

.section-extract::before {

  content: '';

  position: absolute;

  top: -40px; right: -30px;

  width: 120px; height: 120px;

  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);

  border-radius: 50%;

}

/* 标题：白字 + 金色竖条 */

.section-extract .section-title {

  color: #FFFFFF;

  font-size: 19px;

  text-shadow: 0 1px 4px rgba(0,0,0,0.3);

}

.extract-tip {

  font-size: 12px;

  color: rgba(255,255,255,0.85);

  margin: 6px 0 12px;

  line-height: 1.5;

}

.extract-box {

  display: flex;

  gap: 8px;

  align-items: stretch;

}

.extract-input {

  flex: 1;

  min-width: 0;

  height: 42px;

  padding: 0 12px;

  border-radius: 10px;

  border: 1px solid rgba(255,255,255,0.3);

  background: #FFFFFF;

  color: #1A2E22;

  font-size: 13px;

  outline: none;

}

.extract-input::placeholder { color: #9CA3AF; }

.extract-input:focus {

  border-color: var(--gold-1);

  box-shadow: 0 0 0 2px rgba(251,191,36,0.25);

}

.btn-extract {

  flex: 0 0 auto;

  padding: 0 18px;

  height: 42px;

  border: none;

  border-radius: 10px;

  background: var(--gold-grad);

  color: #1A2E22;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 3px 12px rgba(245,158,11,0.4);

}

.btn-extract:active { transform: scale(0.96); }

.btn-extract:disabled { opacity: 0.6; cursor: default; }



.extract-result {

  margin-top: 12px;

  background: #FFFFFF;

  border: 1px solid rgba(255,255,255,0.3);

  border-radius: 12px;

  padding: 12px;

}

.extract-result-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

}

.extract-result-label {

  font-size: 13px;

  font-weight: 700;

  color: #DC2626;

}

.btn-copy {

  padding: 4px 12px;

  border: 1px solid rgba(220,38,38,0.3);

  border-radius: 8px;

  background: transparent;

  color: #DC2626;

  font-size: 12px;

  cursor: pointer;

}

.extract-script {

  font-size: 13px;

  color: #1A2E22;

  line-height: 1.6;

  white-space: pre-wrap;

  word-break: break-word;

  max-height: 220px;

  overflow-y: auto;

}

.extract-actions {

  margin-top: 10px;

  display: flex;

  justify-content: flex-end;

}

.btn-use-script {

  padding: 8px 16px;

  border: none;

  border-radius: 10px;

  background: linear-gradient(135deg, #DC2626, #B91C1C);

  color: #FFFFFF;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

}

.extract-note {

  font-size: 11px;

  color: rgba(255,255,255,0.6);

  margin-top: 10px;

  line-height: 1.4;

}



/* 拆稿宝双模式 */

.extract-tabs {

  display: flex;

  gap: 8px;

  margin-bottom: 12px;

}

.extract-tab {

  flex: 1;

  text-align: center;

  padding: 8px 0;

  border-radius: 10px;

  background: rgba(255,255,255,0.12);

  color: rgba(255,255,255,0.85);

  font-size: 13px;

  cursor: pointer;

  transition: all .15s;

}

.extract-tab.active {

  background: #FFFFFF;

  color: #DC2626;

  font-weight: 700;

}

.extract-mode { display: none; }

.extract-mode.active { display: block; }

.extract-textarea-box {

  background: #FFFFFF;

  border-radius: 10px;

  padding: 10px;

  margin-bottom: 10px;

}

.extract-textarea {

  width: 100%;

  min-height: 90px;

  border: none;

  outline: none;

  font-size: 13px;

  line-height: 1.6;

  color: #1A2E22;

  resize: vertical;

}

.extract-textarea::placeholder { color: #9CA3AF; }

.btn-extract-wide { width: 100%; }

.extract-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: flex-start;

}

.btn-use-script,

.btn-save-script,

.btn-rewrite-script {

  flex: 1;

  min-width: 80px;

  padding: 8px 10px;

  border: none;

  border-radius: 10px;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  text-align: center;

}

.btn-use-script {

  background: linear-gradient(135deg, #DC2626, #B91C1C);

  color: #FFFFFF;

}

.btn-save-script {

  background: rgba(220,38,38,0.12);

  color: #DC2626;

  border: 1px solid rgba(220,38,38,0.25);

}

.btn-rewrite-script {

  background: #FFFFFF;

  color: #DC2626;

}



/* ========== 功能区：输入 / 生成 / 进度 / 预览 / 下载 ========== */

.section-generate {

  padding: 10px 14px 24px;

}

.card-input {

  background: linear-gradient(145deg, #ECFDF5, #D1FAE5);

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 14px;

  padding: 14px 16px;

  margin-bottom: 12px;

}

.input-label {

  display: block;

  font-size: 14px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 8px;

}

.script-textarea {

  width: 100%;

  background: linear-gradient(180deg, #34D399 0%, #10B981 100%);

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 10px;

  color: #1A2E22;

  font-size: 14px;

  padding: 12px;

  resize: vertical;

  outline: none;

  font-family: inherit;

  line-height: 1.6;

  min-height: 90px;

}

.script-textarea::placeholder { color: #9CA3AF; }

.script-textarea:focus {

  border-color: rgba(52,211,153,0.5);

  box-shadow: 0 0 0 2px rgba(52,211,153,0.1);

}

.btn-ai-gen {

  display: block;

  width: 100%;

  margin-top: 10px;

  padding: 10px;

  background: rgba(52,211,153,0.1);

  border: 1px solid rgba(52,211,153,0.3);

  border-radius: 10px;

  color: #059669;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  text-align: center;

  transition: all 0.15s;

}

.btn-ai-gen:active { transform: scale(0.98); }



/* 主生成按钮 */

.btn-generate-main {

  display: block;

  width: 100%;

  padding: 15px;

  background: var(--gold-grad);

  color: #1A2E22;

  border: none;

  border-radius: 28px;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  letter-spacing: 1px;

  box-shadow: 0 4px 24px rgba(245,158,11,0.45);

  margin-bottom: 14px;

  transition: transform 0.15s;

}

.btn-generate-main:active { transform: scale(0.98); }

.btn-glow {

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);

  animation: sweep 2.5s ease-in-out infinite;

}

@keyframes sweep {

  0% { transform: translateX(-100%); }

  100% { transform: translateX(100%); }

}



/* 进度条 */

.progress-section { margin-bottom: 14px; }

.progress-bar {

  width: 100%;

  height: 8px;

  background: #D1FAE5;

  border-radius: 4px;

  overflow: hidden;

  margin-bottom: 8px;

}

.progress-fill {

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, #34D399, #10B981);

  border-radius: 4px;

  transition: width 0.3s ease;

}

.progress-text {

  font-size: 12px;

  color: #059669;

  text-align: center;

}



/* 视频预览 */

.preview-section { margin-bottom: 14px; }

.preview-title {

  font-size: 15px;

  font-weight: 700;

  color: #1A2E22;

  margin-bottom: 8px;

}

.video-wrapper {

  width: 100%;

  aspect-ratio: 16/9;

  background: #F2FAF6;

  border-radius: 12px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.2);

  position: relative;

}

.video-wrapper video {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: none;

}

.video-wrapper video[src] { display: block; }

.preview-placeholder {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #6B7280;

  font-size: 13px;

}



/* 下载按钮 */

.btn-download {

  display: block;

  width: 100%;

  padding: 13px;

  background: transparent;

  border: 1.5px solid var(--gold-2);

  color: var(--gold-3);

  border-radius: 24px;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  text-align: center;

  transition: all 0.15s;

}

.btn-download:active {

  background: rgba(245,158,11,0.1);

  transform: scale(0.98);

}





/* ========== 底部Tab栏（固定定位） ========== */

.tabbar {

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  display: flex;

  background: #FFFFFF;

  border-top: 1px solid rgba(16,185,129,0.12);

  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));

  z-index: 100;

}

.tab-item {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

  padding: 6px 0 4px;

  color: #9CA3AF;

  font-size: 10px;

  cursor: pointer;

  transition: color 0.15s;

}

.tab-item.tab-active { color: #059669; font-weight: 600; }

.tab-icon { font-size: 23px; line-height: 1; }



/* 底部安全区域占位 */

.safe-area-bottom {

  height: 64px;

}





/* ========== 演示模式角标 ========== */

.demo-badge {

  position: fixed;

  top: 42px;

  right: 10px;

  background: rgba(52,211,153,0.9);

  color: #065F46;

  font-size: 10px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 10px;

  z-index: 200;

  pointer-events: none;

}





/* ========== 响应式适配 ========== */

@media (max-width: 380px) {

  .hero-title { font-size: 23px; }

  .card-xl-header h3 { font-size: 15px; }

  .col-right { width: 115px; }

  .card-sm h4 { font-size: 13px; }

  .grid-tool-cards { gap: 8px; }

  .card-tool { padding: 12px 10px; }

  .works-grid { gap: 8px; }

  .work-thumb { height: 110px; }

}

@media (min-width: 480px) {

  body { max-width: 480px; margin: 0 auto; background: #F2FAF6; box-shadow: 0 0 40px rgba(16,185,129,0.15); }

}





/* ========== 我的作品区域（首页-3.jpg 1:1还原）========== */

.works-section {

  margin-bottom: 16px;

}

.works-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;

  padding: 0 2px;

}

.works-title {

  font-size: 18px;

  font-weight: 800;

  color: #1A2E22;

  letter-spacing: 0.5px;

}

.works-more {

  font-size: 13px;

  color: #6B7280;

  cursor: pointer;

}

.works-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

.work-card {

  position: relative;

  border-radius: 12px;

  overflow: hidden;

}

.work-thumb {

  position: relative;

  width: 100%;

  height: 130px;

  border-radius: 12px;

  overflow: hidden;

  background: #D1FAE5;

  border: 1px solid rgba(16,185,129,0.15);

}

.work-img {

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center top;

  /* 模拟数字人视频缩略图（人物+背景） */

  background-color: #D1FAE5;

}

/* 6张不同缩略图的模拟渐变（模拟不同视频帧） */

.work-img-1 { background: linear-gradient(160deg, #6EE7B7 0%, #34D399 50%, #10B981 100%); }

.work-img-2 { background: linear-gradient(160deg, #A7F3D0 0%, #34D399 50%, #059669 100%); }

.work-img-3 { background: linear-gradient(160deg, #D1FAE5 0%, #10B981 50%, #047857 100%); }

.work-img-4 { background: linear-gradient(160deg, #34D399 0%, #059669 50%, #065F46 100%); }

.work-img-5 { background: linear-gradient(160deg, #A7F3D0 0%, #6EE7B7 50%, #10B981 100%); }

.work-img-6 { background: linear-gradient(160deg, #ECFDF5 0%, #A7F3D0 50%, #059669 100%); }



/* 左上角"顶级"标签 */

.work-tag {

  position: absolute;

  top: 6px;

  left: 6px;

  background: var(--gold-grad);

  color: #1A2E22;

  font-size: 10px;

  font-weight: 700;

  padding: 2px 7px;

  border-radius: 4px;

  box-shadow: 0 2px 6px rgba(245,158,11,0.4);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}

/* 右侧三点菜单 */

.work-menu {

  position: absolute;

  top: 6px;

  right: 6px;

  background: rgba(5,95,70,0.72);

  border: none;

  color: #FFFFFF;

  font-size: 18px;

  width: 24px;

  height: 24px;

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}

.work-menu:active { background: rgba(52,211,153,0.3); }



/* 作品文件名 */

.work-name {

  font-size: 11px;

  color: #374151;

  margin-top: 5px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  padding: 0 2px;

}



/* 作品卡上的邀请有礼角标 */

.badge-work {

  position: absolute;

  bottom: 22px;

  right: 4px;

  z-index: 5;

}





/* ========== 右下角悬浮邀请按钮（首页-3.jpg）========== */

.floating-invite-btn {

  position: fixed;

  bottom: 80px;

  right: 12px;

  z-index: 90;

  background: var(--gold-grad);

  color: #1A2E22;

  font-size: 10px;

  font-weight: 700;

  padding: 5px 9px;

  border-radius: 14px;

  box-shadow: 0 3px 12px rgba(245,158,11,0.4);

  cursor: pointer;

  animation: float-bounce 2s ease-in-out infinite;

  white-space: nowrap;

}

@keyframes float-bounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-5px); }

}



/* emoji→SVG 替换图标：仅做基线对齐，不改尺寸/配色/排版（三不） */

.svg-replace { vertical-align: -0.15em; }



/* ============ AI图片生成弹窗（方案A·假UI占位，独立组件不碰锁死板块） ============ */

.ai-img-modal-mask {

  position: fixed; inset: 0; z-index: 9999;

  background: rgba(15, 23, 42, 0.55);

  display: flex; align-items: center; justify-content: center;

  padding: 16px;

  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);

}

.ai-img-modal {

  width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;

  background: #fff; border-radius: 20px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.25);

  animation: aiImgPop .22s ease;

}

@keyframes aiImgPop { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.ai-img-modal-head {

  display: flex; align-items: center; justify-content: space-between;

  padding: 18px 20px; border-bottom: 1px solid #FEE2E4;

}

.ai-img-modal-head h3 { margin: 0; font-size: 19px; color: #BE185D; font-weight: 700; }

.ai-img-close {

  width: 34px; height: 34px; border: none; border-radius: 50%;

  background: #FFF1F2; color: #BE185D; font-size: 22px; line-height: 1;

  cursor: pointer; transition: background .15s;

}

.ai-img-close:hover { background: #FECDD3; }

.ai-img-modal-body { padding: 18px 20px 24px; }

.ai-img-label { display: block; font-size: 14px; color: #475569; margin: 14px 0 8px; font-weight: 600; }

.ai-img-label:first-child { margin-top: 0; }

.ai-img-prompt {

  width: 100%; box-sizing: border-box; resize: none;

  border: 1px solid #FECDD3; border-radius: 12px; padding: 12px 14px;

  font-size: 15px; line-height: 1.5; color: #1f2937; font-family: inherit;

  background: #FFF9FA; outline: none; transition: border .15s, box-shadow .15s;

}

.ai-img-prompt:focus { border-color: #FB7185; box-shadow: 0 0 0 3px rgba(251,113,133,0.18); }

.ai-img-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.ai-img-tag {

  padding: 7px 14px; border-radius: 999px; font-size: 14px; cursor: pointer;

  background: #FFF1F2; color: #9F1239; border: 1px solid #FECDD3;

  transition: all .15s; user-select: none;

}

.ai-img-tag:active { transform: scale(.96); }

.ai-img-tag.active { background: #FB7185; color: #fff; border-color: #FB7185; box-shadow: 0 4px 12px rgba(251,113,133,0.3); }

.ai-img-gen-btn {

  width: 100%; margin-top: 20px; padding: 14px; border: none; border-radius: 14px;

  font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;

  background: linear-gradient(135deg, #FB7185, #F43F5E);

  box-shadow: 0 8px 20px rgba(244,63,94,0.32); transition: transform .12s, box-shadow .12s;

}

.ai-img-gen-btn:active { transform: translateY(2px); box-shadow: 0 4px 12px rgba(244,63,94,0.28); }

.ai-img-result {

  margin-top: 18px; border: 1px dashed #FECDD3; border-radius: 14px;

  min-height: 180px; display: flex; align-items: center; justify-content: center;

}

.ai-img-result-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #FDA4AF; font-size: 14px; }

.ai-img-result-loading { color: #FB7185; font-size: 14px; }

.ai-img-result-img { width: 100%; border-radius: 12px; display: block; }

.ai-img-result img { width: 100%; border-radius: 12px; display: block; }

.ai-img-result .ph-text { width: 100%; padding: 14px; }

.ai-img-actions {

  display: flex; flex-wrap: wrap; gap: 8px;

  padding: 12px; width: 100%;

}

.ai-img-action-btn {

  flex: 1; min-width: 70px;

  padding: 10px 8px; border: none; border-radius: 10px;

  background: rgba(251,113,133,0.12); color: #BE185D;

  font-size: 12px; font-weight: 600; cursor: pointer;

  text-align: center;

}

.ai-img-action-btn:active { transform: scale(0.96); }



/* ========== 独立第二界面（豆包范式 SPA 全屏工作台·带返回键·不跳子页不绕回） ========== */

.feature-screen {

  position: fixed; inset: 0; z-index: 5000;

  --theme: #10B981;

  --theme-dark: #059669;

  --bg: #F2FAF6;

  background: var(--bg);

  display: none;

  flex-direction: column;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

.feature-screen.active { display: flex; }



/* 第二屏分区主题色：进入不同功能，整屏色调不同，避免迷路 */

.feature-screen.theme-aiVideo      { --theme:#6366F1; --theme-dark:#4F46E5; --bg:#EEF2FF; }

.feature-screen.theme-digitalHuman { --theme:#10B981; --theme-dark:#059669; --bg:#F0FDF4; }

.feature-screen.theme-voiceClone   { --theme:#EC4899; --theme-dark:#DB2777; --bg:#FDF2F8; }

.feature-screen.theme-editVideo    { --theme:#06B6D4; --theme-dark:#0891B2; --bg:#ECFEFF; }

.feature-screen.theme-ppt          { --theme:#EF4444; --theme-dark:#DC2626; --bg:#FEF2F2; }

.feature-screen.theme-aiWriting    { --theme:#3B82F6; --theme-dark:#2563EB; --bg:#EFF6FF; }

.feature-screen.theme-translate    { --theme:#14B8A6; --theme-dark:#0D9488; --bg:#F0FDFA; }

.feature-screen.theme-pdfConvert   { --theme:#F59E0B; --theme-dark:#D97706; --bg:#FFF7ED; }

.feature-screen.theme-docAgents    { --theme:#8B5CF6; --theme-dark:#7C3AED; --bg:#F5F3FF; }

.feature-nav {

  position: sticky; top: 0;

  display: flex; align-items: center; justify-content: space-between;

  padding: 14px 16px;

  background: linear-gradient(180deg, var(--theme), var(--theme-dark));

  color: #fff;

  z-index: 2;

  box-shadow: 0 3px 14px rgba(5,95,70,0.22);

}

.feature-back {

  background: rgba(255,255,255,0.18);

  border: none; color: #fff;

  font-size: 14px; font-weight: 700;

  padding: 8px 14px; border-radius: 20px;

  cursor: pointer; white-space: nowrap;

}

.feature-back:active { background: rgba(255,255,255,0.32); }

.feature-nav-title { font-size: 17px; font-weight: 800; margin: 0; }

.feature-nav-spacer { width: 56px; flex-shrink: 0; }

.feature-body { padding: 18px 16px 40px; flex: 1; }

.feature-panel { display: none; }

.feature-panel.active { display: block; }

.fp-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

.fp-hero-icon {

  width: 56px; height: 56px; flex-shrink: 0;

  border-radius: 16px;

  background: linear-gradient(145deg, #D1FAE5, #A7F3D0);

  display: flex; align-items: center; justify-content: center;

  font-size: 30px;

  box-shadow: 0 4px 14px rgba(16,185,129,0.18);

}

.fp-hero h3 { font-size: 19px; font-weight: 800; color: #1A2E22; margin-bottom: 2px; }

.fp-hero p { font-size: 13px; color: #6B7280; }

.fp-label { display: block; font-size: 14px; color: #475569; margin: 14px 0 8px; font-weight: 600; }

.fp-label:first-of-type { margin-top: 0; }

.fp-textarea, .fp-input {

  width: 100%; box-sizing: border-box; resize: none;

  border: 1px solid rgba(16,185,129,0.3); border-radius: 12px;

  padding: 12px 14px; font-size: 15px; line-height: 1.5;

  color: #1A2E22; background: #fff; outline: none; font-family: inherit;

}

.fp-textarea:focus, .fp-input:focus { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }

.fp-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.fp-tag {

  padding: 8px 16px; border-radius: 999px; font-size: 14px; cursor: pointer;

  background: #ECFDF5; color: #059669; border: 1px solid rgba(16,185,129,0.3);

  transition: all .15s; user-select: none;

}

.fp-tag:active { transform: scale(.96); }

.fp-tag.active { background: #10B981; color: #fff; border-color: #10B981; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }

.fp-upload {

  position: relative;

  border: 1.5px dashed rgba(16,185,129,0.45);

  border-radius: 14px; padding: 22px; text-align: center;

  background: #ECFDF5; cursor: pointer;

}

.fp-upload-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #059669; font-size: 14px; }

.fp-upload-preview { margin-top: 12px; }

.fp-upload-preview img { max-width: 100%; max-height: 220px; border-radius: 12px; }

.fp-upload-preview audio { width: 100%; }

.fp-btn {

  width: 100%; margin-top: 22px; padding: 15px;

  border: none; border-radius: 14px; font-size: 16px; font-weight: 700;

  color: #fff; cursor: pointer;

  background: linear-gradient(135deg, #34D399, #10B981);

  box-shadow: 0 8px 20px rgba(16,185,129,0.3);

  transition: transform .12s;

}

.fp-btn:active { transform: translateY(2px); }

.fp-btn:disabled { opacity: .6; cursor: default; }

.fp-result {

  margin-top: 18px; border: 1px dashed rgba(16,185,129,0.3); border-radius: 14px;

  min-height: 160px; display: flex; align-items: center; justify-content: center;

}

.fp-result-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9CA3AF; font-size: 14px; }

.fp-result-loading { color: #059669; font-size: 14px; padding: 12px; text-align: center; line-height: 1.7; }



/* ========== PPT 生成大师面板 ========== */

.ppt-mode-tabs {

  display: flex;

  gap: 8px;

  margin-bottom: 18px;

}

.ppt-mode-tab {

  flex: 1;

  padding: 10px 6px;

  border-radius: 12px;

  border: 1px solid rgba(16,185,129,0.35);

  background: #fff;

  color: #059669;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  text-align: center;

  transition: all .15s;

}

.ppt-mode-tab.active {

  background: #10B981;

  color: #fff;

  border-color: #10B981;

  box-shadow: 0 4px 12px rgba(16,185,129,0.25);

}

.ppt-mode-tab:active { transform: scale(.98); }

.ppt-options {

  display: grid;

  grid-template-columns: 1fr 1fr auto;

  gap: 12px;

  margin: 14px 0 4px;

}

.ppt-opt-group { display: flex; flex-direction: column; gap: 6px; }

.ppt-opt-group .fp-label { margin: 0; }

.ppt-opt-toggle {

  align-items: center;

  justify-content: center;

  text-align: center;

}

.ppt-switch {

  position: relative;

  display: inline-block;

  width: 46px;

  height: 26px;

}

.ppt-switch input { opacity: 0; width: 0; height: 0; }

.ppt-switch-slider {

  position: absolute;

  cursor: pointer;

  inset: 0;

  background: #D1D5DB;

  border-radius: 999px;

  transition: .2s;

}

.ppt-switch-slider::before {

  position: absolute;

  content: "";

  height: 20px; width: 20px;

  left: 3px; bottom: 3px;

  background: #fff;

  border-radius: 50%;

  transition: .2s;

}

.ppt-switch input:checked + .ppt-switch-slider { background: #10B981; }

.ppt-switch input:checked + .ppt-switch-slider::before { transform: translateX(20px); }

.ppt-prompts {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 4px;

}

.ppt-prompt-tag {

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 13px;

  color: #059669;

  background: #ECFDF5;

  border: 1px solid rgba(16,185,129,0.25);

  cursor: pointer;

  transition: all .15s;

  user-select: none;

}

.ppt-prompt-tag:hover { background: #D1FAE5; }

.ppt-prompt-tag:active { transform: scale(.96); }



/* ========== 办公助手通用第二屏组件 ========== */

.fp-select {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid rgba(16,185,129,0.3);

  border-radius: 10px;

  background: #fff;

  color: #1A2E22;

  font-size: 14px;

  outline: none;

  font-family: inherit;

}

.fp-select:focus { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }

.translate-options { grid-template-columns: 1fr 1fr; }



/* 文档转换网格 */

.convert-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  margin-bottom: 18px;

}

.convert-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 14px 6px;

  border: 1.5px solid rgba(16,185,129,0.25);

  border-radius: 12px;

  background: #fff;

  cursor: pointer;

  transition: all .15s;

  text-align: center;

}

.convert-card .convert-icon { font-size: 24px; }

.convert-card span { font-size: 12px; color: #1A2E22; font-weight: 600; }

.convert-card.active {

  background: #ECFDF5;

  border-color: #10B981;

  box-shadow: 0 4px 12px rgba(16,185,129,0.18);

}

.convert-card:active { transform: scale(.96); }



/* AI 智能体网格 */

.agent-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}

.agent-card {

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 12px;

  border: 1px solid rgba(16,185,129,0.2);

  border-radius: 12px;

  background: #fff;

  cursor: pointer;

  transition: all .15s;

}

.agent-card:hover { background: #F0FDF4; border-color: rgba(16,185,129,0.4); }

.agent-card:active { transform: scale(.98); }

.agent-ic { font-size: 22px; }

.agent-card h4 { font-size: 14px; font-weight: 700; color: #1A2E22; }

.agent-card p { font-size: 11px; color: #6B7280; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



/* ========== 参考图（最多 9 张缩略图 + 添加按钮） ========== */

.fp-ref { margin: 8px 0 4px; }

.fp-ref-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

.fp-ref-add {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  aspect-ratio: 1 / 1;

  border: 2px dashed #CBD5E1;

  border-radius: 12px;

  background: #F8FAFC;

  color: #475569;

  cursor: pointer;

  transition: all .2s;

  font-size: 13px;

  font-weight: 600;

  user-select: none;

}

.fp-ref-add:hover { border-color: #10B981; color: #059669; background: #ECFDF5; }

.fp-ref-add:active { transform: scale(.98); }

.fp-ref-add-plus {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 999px;

  background: #fff;

  border: 1.5px solid #CBD5E1;

  color: #475569;

  font-size: 22px;

  line-height: 1;

  font-weight: 600;

}

.fp-ref-add:hover .fp-ref-add-plus { border-color: #10B981; color: #059669; }

.fp-ref-add-text { font-size: 13px; }

.fp-ref-item {

  position: relative;

  aspect-ratio: 1 / 1;

  border-radius: 12px;

  overflow: hidden;

  background: #F1F5F9;

  box-shadow: 0 1px 3px rgba(15,23,42,.08);

}

.fp-ref-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fp-ref-remove {

  position: absolute;

  top: 6px;

  right: 6px;

  width: 22px;

  height: 22px;

  border-radius: 999px;

  background: rgba(15,23,42,.65);

  color: #fff;

  border: none;

  cursor: pointer;

  font-size: 14px;

  line-height: 1;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  padding: 0;

  transition: background .15s;

}

.fp-ref-remove:hover { background: #DC2626; }

.fp-ref-tip {

  font-size: 12px;

  color: #94A3B8;

  margin-top: 8px;

  text-align: right;

}

.fp-ref-tip b { color: #059669; font-weight: 700; }

.fp-ref.drag-over .fp-ref-grid { outline: 2px dashed #10B981; outline-offset: 4px; border-radius: 14px; }



/* ========== 描述词 + 语音输入（外层包裹） ========== */

.fp-prompt-wrap { position: relative; }

.fp-voice-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 12px;

  border-radius: 999px;

  background: #F8FAFC;

  border: 1.5px solid #CBD5E1;

  color: #475569;

  font-size: 12.5px;

  font-weight: 600;

  cursor: pointer;

  transition: all .2s;

}

.fp-voice-btn:hover { border-color: #10B981; color: #059669; background: #ECFDF5; }

.fp-voice-btn:active { transform: scale(.96); }

.fp-voice-btn svg { stroke: currentColor; }

.fp-voice-btn.recording {

  border-color: #DC2626;

  color: #DC2626;

  background: #FEF2F2;

  animation: fpVoicePulse 1.4s ease-in-out infinite;

}

.fp-voice-dot {

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 999px;

  background: #94A3B8;

  margin-left: 2px;

}

.fp-voice-btn.recording .fp-voice-dot {

  background: #DC2626;

  box-shadow: 0 0 0 0 rgba(220,38,38,.7);

  animation: fpVoiceRing 1.2s ease-out infinite;

}

@keyframes fpVoicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } }

@keyframes fpVoiceRing { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.7); } 100% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }



/* ========== 剪辑数字人视频 · 全功能工作台（对齐对标产品第二层页面） ========== */

.ev-preview {

  position: relative; width: 100%; aspect-ratio: 16 / 9;

  border-radius: 16px; background: #0B1220;

  display: flex; align-items: center; justify-content: center; overflow: hidden;

}

.ev-preview-add {

  display: flex; flex-direction: column; align-items: center; gap: 10px;

  color: #94A3B8; font-size: 14px; cursor: pointer; padding: 20px; text-align: center;

}

.ev-preview-plus {

  width: 54px; height: 54px; border-radius: 999px;

  border: 2px dashed #475569; display: flex; align-items: center; justify-content: center;

  font-size: 30px; color: #64748B; line-height: 1;

}

.ev-preview-add:active .ev-preview-plus { transform: scale(.94); }

.ev-preview.has-video { background: #111827; }

.ev-preview.has-video .ev-preview-add { color: #10B981; }



.ev-row { display: flex; gap: 14px; align-items: flex-end; }

.ev-field { display: flex; flex-direction: column; }

.ev-field-grow { flex: 1; min-width: 0; }

.ev-field-switch { flex-shrink: 0; }

.ev-label-flush { margin: 14px 0 8px; }

.ev-select {

  width: 100%; box-sizing: border-box;

  display: flex; align-items: center; justify-content: space-between;

  background: #fff; border: 1px solid rgba(16,185,129,0.3); border-radius: 12px;

  padding: 12px 14px; font-size: 14px; color: #1A2E22; cursor: pointer; font-family: inherit;

}

.ev-select:active { background: #ECFDF5; }

.ev-select-arrow { color: #059669; font-size: 12px; }

.ev-toggle { position: relative; display: inline-block; width: 50px; height: 28px; }

.ev-toggle input { opacity: 0; width: 0; height: 0; }

.ev-toggle-slider {

  position: absolute; inset: 0; cursor: pointer; background: #CBD5E1; border-radius: 999px; transition: .2s;

}

.ev-toggle-slider::before {

  content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px;

  background: #fff; border-radius: 999px; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);

}

.ev-toggle input:checked + .ev-toggle-slider { background: #10B981; }

.ev-toggle input:checked + .ev-toggle-slider::before { transform: translateX(22px); }



.ev-voice-pick {

  width: 100%; box-sizing: border-box; margin-top: 14px;

  display: flex; align-items: center; justify-content: space-between;

  background: #ECFDF5; border: 1px solid rgba(16,185,129,0.3); border-radius: 12px;

  padding: 12px 14px; font-size: 14px; color: #059669; cursor: pointer; font-family: inherit; font-weight: 600;

}

.ev-voice-pick:active { transform: scale(.99); background: #D1FAE5; }

.ev-voice-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ev-voice-pick-arrow { color: #059669; font-size: 18px; flex-shrink: 0; }



.ev-script-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: #94A3B8; }

.ev-script-dur { flex-shrink: 0; }

.ev-script-count { flex: 1; }

.ev-script-clear { background: none; border: none; color: #94A3B8; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }

.ev-script-clear:active { color: #059669; }



.ev-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }

.ev-tool {

  display: flex; flex-direction: column; align-items: center; gap: 6px;

  background: #fff; border: 1px solid rgba(16,185,129,0.18); border-radius: 12px;

  padding: 14px 8px; cursor: pointer; font-family: inherit; color: #475569; font-size: 13px; transition: all .15s;

}

.ev-tool-ic { font-size: 22px; }

.ev-tool:active { transform: scale(.96); background: #ECFDF5; border-color: rgba(16,185,129,0.4); }

.ev-tool.active { background: #D1FAE5; border-color: #10B981; color: #065F46; font-weight: 700; }



.video-result-actions {

  display: flex; flex-wrap: wrap; gap: 8px;

  padding: 12px 0 4px;

}

.video-result-btn {

  flex: 1; min-width: 70px;

  padding: 10px 8px; border: none; border-radius: 10px;

  background: rgba(16,185,129,0.12); color: #065F46;

  font-size: 12px; font-weight: 600; cursor: pointer;

  text-align: center;

}

.video-result-btn:active { transform: scale(0.96); }



.ev-cta {

  width: 100%; margin-top: 18px; padding: 15px;

  border: none; border-radius: 14px; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;

  background: linear-gradient(135deg, #3B82F6, #2563EB);

  box-shadow: 0 8px 20px rgba(37,99,235,0.32); transition: transform .12s;

}

.ev-cta:active { transform: translateY(2px); }

.ev-cta:disabled { opacity: .6; cursor: default; }



/* 底部 sheet（选择配音 / 数字人模型） */

.ev-sheet { position: fixed; inset: 0; z-index: 6000; display: none; }

.ev-sheet.active { display: block; }

.ev-sheet-mask { position: absolute; inset: 0; background: rgba(15,23,42,.45); }

.ev-sheet-panel {

  position: absolute; left: 0; right: 0; bottom: 0;

  background: #fff; border-radius: 20px 20px 0 0; max-height: 86vh; overflow-y: auto;

  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));

  box-shadow: 0 -8px 30px rgba(0,0,0,.2); animation: evSheetUp .25s ease;

}

@keyframes evSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

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

.ev-sheet-title { font-size: 17px; font-weight: 800; color: #1A2E22; }

.ev-sheet-close { background: #F1F5F9; border: none; width: 32px; height: 32px; border-radius: 999px; font-size: 20px; color: #475569; cursor: pointer; line-height: 1; }

.ev-sheet-close:active { background: #E2E8F0; }

.ev-sheet-search { margin-bottom: 12px; }

.ev-sheet-search input { width: 100%; box-sizing: border-box; border: 1px solid #E2E8F0; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-family: inherit; outline: none; }

.ev-sheet-search input:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.ev-sheet-tabs { margin-bottom: 14px; }

.ev-voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.ev-voice-card {

  position: relative; text-align: left;

  border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 12px;

  background: #fff; cursor: pointer; font-family: inherit; transition: all .15s;

}

.ev-voice-card:active { transform: scale(.98); }

.ev-voice-card.active { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.ev-voice-card-pay { position: absolute; top: 10px; right: 10px; font-size: 11px; color: #D97706; border: 1px solid #FDE68A; background: #FFFBEB; border-radius: 999px; padding: 1px 7px; }

.ev-voice-card-wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-bottom: 8px; }

.ev-voice-card-wave i { display: block; width: 3px; background: #94A3B8; border-radius: 2px; }

.ev-voice-card.active .ev-voice-card-wave i { background: #3B82F6; }

.ev-voice-card-name { font-size: 13px; color: #1A2E22; font-weight: 600; }

.ev-sheet-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid #F1F5F9; }

.ev-slider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.ev-slider-row label { width: 38px; font-size: 13px; color: #475569; flex-shrink: 0; }

.ev-slider-row input[type=range] { flex: 1; accent-color: #3B82F6; }

.ev-slider-val { width: 40px; text-align: right; font-size: 13px; color: #059669; font-weight: 600; flex-shrink: 0; }

.ev-sheet-confirm {

  width: 100%; margin-top: 6px; padding: 14px; border: none; border-radius: 14px;

  font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;

  background: linear-gradient(135deg, #3B82F6, #2563EB); box-shadow: 0 6px 18px rgba(37,99,235,.3);

}

.ev-sheet-confirm:active { transform: translateY(2px); }

.ev-model-grid { display: flex; flex-direction: column; gap: 10px; }

.ev-model-card {

  position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px;

  border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 14px;

  background: #fff; cursor: pointer; font-family: inherit; transition: all .15s;

}

.ev-model-card:active { transform: scale(.99); }

.ev-model-card.active { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }

.ev-model-name { font-size: 15px; font-weight: 700; color: #1A2E22; }

.ev-model-desc { font-size: 12.5px; color: #94A3B8; }

.ev-model-check {

  position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 999px;

  background: #10B981; color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px;

}

.ev-model-card.active .ev-model-check { display: flex; }



/* ========== AI 智能体对话工作台 ========== */

.agent-chat { display: flex; flex-direction: column; height: calc(100vh - 120px); }

.agent-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid rgba(124,58,237,.2); margin-bottom: 8px; }

.agent-chat-title { font-size: 16px; font-weight: 700; color: #fff; }

.agent-chat-back { background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }

.agent-chat-body { flex: 1; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 10px; }

.agent-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; word-break: break-word; white-space: pre-wrap; }

.agent-msg-user { align-self: flex-end; background: #7C3AED; color: #fff; border-bottom-right-radius: 4px; }

.agent-msg-bot { align-self: flex-start; background: rgba(255,255,255,.1); color: #F5F0FF; border-bottom-left-radius: 4px; }

.agent-chat-input { display: flex; gap: 8px; padding: 10px 0 4px; }

.agent-chat-input input { flex: 1; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(167,139,250,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; outline: none; font-family: inherit; }

.agent-chat-input input::placeholder { color: rgba(255,255,255,.5); }

.agent-chat-input button { padding: 0 18px; border: none; border-radius: 999px; background: #7C3AED; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }



/* ========== 文档转换卡片状态标签 ========== */

.convert-card { position: relative; }

.convert-card .conv-ok, .convert-card .conv-need {

  position: absolute; top: 6px; right: 6px; font-size: 9px; font-style: normal; padding: 1px 6px; border-radius: 999px; line-height: 1.5;

}

.convert-card .conv-ok { background: rgba(16,185,129,.18); color: #34D399; }

.convert-card .conv-need { background: rgba(148,163,184,.2); color: #CBD5E1; }

.convert-card.conv-need { opacity: .82; }

.convert-card.active.conv-need { border-color: rgba(148,163,184,.6); }



/* ========== PPT 第三屏：大纲 / 模板 / 完成 ========== */

.ppt-outline-card, .ppt-template-picker, .ppt-done-card {

  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);

  border-radius: 16px; padding: 16px; margin-top: 10px;

}

.ppt-outline-head, .ppt-template-head, .ppt-done-title {

  display: flex; align-items: center; justify-content: space-between;

  color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 12px;

}

.ppt-outline-head span, .ppt-done-meta { color: #94A3B8; font-size: 13px; font-weight: 400; }

.ppt-outline-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.ppt-outline-item {

  display: flex; align-items: center; gap: 10px;

  background: rgba(255,255,255,.06); border-radius: 10px; padding: 10px 12px;

  color: #E2E8F0; font-size: 14px;

}

.ppt-outline-item b {

  width: 22px; height: 22px; border-radius: 999px; background: #7C3AED;

  color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;

}

.ppt-outline-actions, .ppt-done-actions {

  display: flex; gap: 10px;

}

.ppt-btn-primary, .ppt-btn-secondary {

  flex: 1; padding: 13px 0; border: none; border-radius: 12px; font-size: 15px; font-weight: 700;

  cursor: pointer; font-family: inherit; text-align: center;

}

.ppt-btn-primary { background: linear-gradient(135deg,#7C3AED,#6D28D9); color: #fff; }

.ppt-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.ppt-btn-secondary { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }

.ppt-template-head { margin-bottom: 14px; }

.ppt-back-link {

  background: transparent; border: none; color: #C4B5FD; font-size: 14px; cursor: pointer; padding: 0;

}

.ppt-template-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }

.ppt-template-card {

  background: rgba(255,255,255,.08); border: 2px solid transparent; border-radius: 12px;

  overflow: hidden; cursor: pointer; transition: all .15s;

}

.ppt-template-card.selected { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.2); }

.ppt-template-preview {

  height: 86px; display: flex; align-items: center; justify-content: center;

  font-size: 16px; font-weight: 700;

}

.ppt-template-name { padding: 10px; text-align: center; color: #E2E8F0; font-size: 13px; }

.ppt-done-title { justify-content: flex-start; gap: 8px; margin-bottom: 6px; }

.ppt-done-card .ppt-done-title::before { content: '✓'; color: #34D399; }

.ppt-done-card { text-align: center; }

.ppt-done-actions { margin-top: 14px; }



/* ========== 作品库列表面板 ========== */

.works-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.works-list-item {

  display: flex; align-items: center; justify-content: space-between;

  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);

  border-radius: 14px; padding: 12px 14px;

}

.works-list-info { display: flex; align-items: center; gap: 12px; }

.works-list-icon { font-size: 24px; }

.works-list-title { color: #fff; font-size: 14px; font-weight: 600; }

.works-list-meta { color: #94A3B8; font-size: 12px; margin-top: 2px; }

.works-list-actions { display: flex; gap: 6px; }

.works-action-btn {

  padding: 6px 10px; border-radius: 8px; border: none; font-size: 12px; font-weight: 600;

  cursor: pointer; font-family: inherit; background: rgba(255,255,255,.12); color: #fff;

}

.works-action-del { background: rgba(239,68,68,.2); color: #FCA5A5; }

.works-empty { text-align: center; padding: 40px 20px; color: #94A3B8; }

.works-empty-icon { font-size: 48px; margin-bottom: 12px; }

.works-empty p { margin-bottom: 16px; }



/* ========== 文本结果通用动作条 ========== */

.result-actions {

  display: flex; gap: 8px; flex-wrap: wrap;

  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);

}

.result-action-btn {

  padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);

  background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600;

  cursor: pointer; font-family: inherit;

}

.result-action-btn:active { transform: scale(.98); }