/* --- 1. 全局变量定义 --- */
:root {
  /* 语法：--变量名: 值; 
               作用：类似于后端的全局常量，方便一处修改全局生效 */
  --primary-color: #007bff;
  /* 主题蓝色 */
  --success-color: #28a745;
  /* 成功绿色 */
  --bg-color: #f4f7f6;
  /* 浅灰色背景 */
}

/* --- 2. 基础重置与布局 --- */
body {
  /* 字体族：优先使用 Segoe UI，备选系统默认字体 */
  font-family: "Segoe UI", system-ui, sans-serif;
  margin: 0;
  /* 清除浏览器默认的外边距 */
  display: flex;
  /* 开启弹性布局，让侧边栏和主界面水平排列 */
  height: 100dvh;
  /* 100% 动态视口高度，适配手机浏览器工具栏缩放 */
  /* height: 100vh; */
  background: var(--bg-color);
  /* 使用上面定义的背景色变量 */
  /* overflow: hidden; */
  /* 隐藏溢出内容，防止整个页面出现双滚动条 */
}

/* 修改原因：新增夜间模式颜色变量，供右上角图标切换整页明暗主题；修改时间：2026-06-06 16:21 */
body.dark-mode {
  --primary-color: #4aa3ff;
  --success-color: #4cc779;
  --bg-color: #111827;
  color: #e5e7eb;
  background: var(--bg-color);
}

/* --- 3. 资产侧边栏样式 --- */
#asset-sidebar {
  width: 0;
  max-width: min(34vw, 460px);
  /* 初始宽度为0（配合 JS 实现侧边栏弹出） */
  height: 100%;
  /* 高度撑满屏幕 */
  background: white;
  /* 纯白背景 */
  border-right: 1px solid #ddd;
  /* 右侧灰色分割线 */
  overflow-y: auto;
  /* 如果内容过多，允许侧边栏垂直滚动 */
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 过渡动画：0.3秒完成，cubic-bezier 定义了先快后慢的物理曲线 */
  position: fixed;
  /* 固定定位：不随页面滚动，始终靠左 */
  left: 0;
  top: 0;
  z-index: 1000;
  /* 层级：确保侧边栏在所有元素的最上方 */
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  /* 右侧投影，增加立体感 */
}

.sidebar-content {
  /* 侧边栏内部容器 */
  /* width: 550px;
            padding: 25px;
            box-sizing: border-box; */
  width: 100%;
  /* 移动端占屏幕宽度的 90% */
  max-width: none;
  /* 最大宽度限制在 550px */
  padding: 25px;
  box-sizing: border-box;
  /* 内部留白 */
}

@media (max-width: 900px) {
  #asset-sidebar {
    max-width: 88vw;
  }
}

.sidebar-header {
  display: flex;
  /* 开启弹性布局 */
  justify-content: space-between;
  /* 标题和关闭按钮两端对齐 */
  align-items: center;
  /* 垂直居中 */
  border-bottom: 2px solid var(--bg-color);
  /* 底部装饰线 */
  padding-bottom: 15px;
  margin-bottom: 20px;
}

/* --- 4. 资产列表项样式 --- */
.asset-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  /* 圆角矩形 */
  padding: 18px;
  margin-bottom: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.asset-main-grid {
  display: grid;
  /* 开启网格布局 */
  /* 语法：grid-template-columns: 比例 比例; 
               此处左侧占 1.2 份，右侧占 1 份空间 */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* 网格间距 */
}

.asset-left {
  border-right: 1px dashed #eee;
  /* 左侧区域右侧带虚线 */
  padding-right: 15px;
}

@media (max-width: 1100px) {
  .asset-main-grid {
    grid-template-columns: 1fr;
  }

  .asset-left {
    border-right: none;
    border-bottom: 1px dashed #eee;
    padding-right: 0;
    padding-bottom: 12px;
  }
}

.asset-params {
  font-size: 12px;
  /* 参数字体调小 */
  color: #444;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #f0f0f0;
}

.param-line {
  margin-bottom: 6px;
  word-break: break-all;
  /* 语法：长文本（如URL或Base64）强制换行 */
  line-height: 1.4;
  /* 行高 */
}

/* --- 5. 媒体预览容器 --- */
.media-container {
  width: 100%;
  position: relative;
  /* 相对定位：为内部绝对定位元素提供坐标基准 */
  margin-top: 5px;
  background: #000;
  /* 背景黑色（电影院效果） */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  /* 内部内容居中展示 */
  align-items: center;
  justify-content: center;
  min-height: 120px;
  /* 最小高度保证不会坍塌 */
}

.media-tag {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
  font-weight: bold;
  text-transform: uppercase;
  /* 强制字母大写 */
  letter-spacing: 1px;
  /* 字母间距 */
}

/* ★★★ 修改 1：全局设置 border-box ★★★ */
/* 确保所有元素的 padding 和 border 都包含在 width 内，这是解决预览框和按钮对不齐的核心 */
* {
  /* 语法：box-sizing: border-box; 
               作用：设置的 width 包含了 padding 和 border，
               防止因为增加边距导致盒子把页面“撑爆”，这是响应式开发的核心 */
  box-sizing: border-box;
}

/* --- 6. 主内容界面 --- */
#main-container {
  /* 核心：占满剩余高度 */
  flex: 1;
  display: flex;
  flex-direction: column;

  width: 95%;
  max-width: 600px;
  margin: 0 auto;
  padding: 15px;
  /* 缩小内边距，给图片留更多空间 */
  background: white;

  /* 关键：防止容器撑破屏幕 */
  max-height: 100dvh;
  min-height: 0;
  /* overflow: hidden; */
  /* 整体不滚动 */
}

/* 修改原因：补齐夜间模式下主容器、侧边栏、表单和卡片颜色，保证切换后界面完整可读；修改时间：2026-06-06 16:21 */
body.dark-mode #main-container,
body.dark-mode #asset-sidebar,
body.dark-mode .sidebar-content {
  color: #e5e7eb;
  background: #1f2937;
}

body.dark-mode .sidebar-header {
  border-bottom-color: #374151;
}

body.dark-mode .asset-item,
body.dark-mode .preview-box-aligned,
body.dark-mode #voice-preview-container,
body.dark-mode #brush-control,
body.dark-mode #slider-container,
body.dark-mode #fabric-container {
  color: #e5e7eb;
  background: #273244 !important;
  border-color: #3b4658 !important;
}

body.dark-mode .asset-params {
  color: #d1d5db;
  background: #111827;
  border-color: #374151;
}

body.dark-mode input,
body.dark-mode textarea {
  color: #f9fafb;
  background: #111827;
  border-color: #4b5563;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #9ca3af;
}

body.dark-mode label,
body.dark-mode .item > label,
body.dark-mode .param-line,
body.dark-mode #image-tip,
body.dark-mode #video-tip,
body.dark-mode #draw-hint,
body.dark-mode #voice-file-info,
body.dark-mode .media-tag {
  color: #d1d5db !important;
}

body.dark-mode .tab-nav {
  border-bottom-color: #374151;
}

body.dark-mode .tab-btn {
  color: #d1d5db;
  background: #111827;
}

body.dark-mode .tab-btn.active,
body.dark-mode .feature-item.active {
  color: white;
}

body.dark-mode .feature-item {
  color: #d1d5db;
  background: #111827;
  border-color: #374151;
}

body.dark-mode .language-switcher button {
  color: #cbd5e1 !important;
}

body.dark-mode .language-switcher button + button {
  border-left-color: #4b5563 !important;
}

body.dark-mode .theme-toggle {
  color: #facc15 !important;
  background: #111827 !important;
  border-color: #4b5563 !important;
}

body.dark-mode .theme-toggle:hover {
  background: #0f172a !important;
}

/* ★★★ 修改 7：新增移动端专项适配 ★★★ */
/* 语法：当屏幕宽度小于等于 600px 时，执行以下样式 */
@media (max-width: 600px) {
  body {
    overflow-y: auto;
    /* 手机端取消隐藏滚动条 */
    height: auto;
  }

  #main-container {
    margin: 10px auto;
    padding: 15px;
    width: calc(100% - 20px);
    max-height: none;
    /* 手机端不再限制容器高度 */
  }

  /* 手机端输入框字体不小于 16px 防止 iOS 自动放大页面 */
  input,
  textarea,
  button {
    font-size: 16px !important;
    /* !important 语法：最高优先级，强制覆盖 */
  }

  /* 修改时间：2026-06-09 10:28；修改原因：仅手机端将文生图按钮拆成“文/生图”两行 */
  .mobile-break-title,
  .mobile-break-note {
    display: block !important;
  }

  /* 修改原因：移动端用户信息改回文档流，避免标题和右上角信息重叠；修改时间：2026-06-06 16:28 */
  .header-main h2 {
    padding-right: 0;
  }

  .user-info-inline {
    position: static;
    margin-left: 0;
    margin-top: 8px;
    justify-content: flex-end;
    /* 修改时间：2026-06-15 13:45；修改原因：手机端新增等级和客服按钮后允许用户区换行 */
    flex-wrap: wrap;
  }

  .header-tools {
    /* 修改时间：2026-06-15 14:20；修改原因：客服移动到版本日志旁后手机端允许顶部工具换行 */
    flex-wrap: wrap;
  }
}

/* ★★★ 修改 8：优化预览容器样式 ★★★ */
/* 给所有预览框一个统一类名，确保它们物理宽度和上面的按钮 100% 一致 */
/* --- 7. 预览框样式 --- */
.preview-box-aligned {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  background: #fafafa;
  text-align: center;
  margin-top: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 25px;
  position: relative;
  direction: ltr;
}

.header-main {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.header-main h2 {
  padding-right: 230px;
  text-align: left;
}

/* 修改原因：头部右侧用户信息改为紧凑同排，避免退出登录靠近夜间模式按钮导致误触；修改时间：2026-06-06 16:28 */
.user-info-inline {
  position: absolute;
  top: 2px;
  right: 0;
  align-items: center;
  /* 修改时间：2026-06-15 15:20；修改原因：用户名、会员按钮和退出登录文字间距继续收紧并保持一致 */
  gap: 3px;
  margin-left: 12px;
  white-space: nowrap;
  direction: ltr;
  /* 修改时间：2026-06-15 13:45；修改原因：用户名后增加等级和客服按钮后扩大顶部用户区可用宽度 */
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 修改原因：维语 RTL 模式下头部仍按左标题右操作排版，避免用户名/退出登录和标题重叠；修改时间：2026-06-06 16:39 */
body.rtl-mode .header {
  direction: ltr;
}

body.rtl-mode .header-main h2,
body.rtl-mode .user-info-inline {
  direction: ltr;
  text-align: left;
}

.logout-link {
  color: #dc3545;
  font-size: 12px;
  text-decoration: none;
}

.logout-link:hover {
  text-decoration: underline;
}

/* 修改时间：2026-06-15 13:45；修改原因：新增会员等级和客服入口按钮样式，保持头部紧凑可点击 */
/* 修改时间：2026-06-15 14:05；修改原因：等级和客服按钮复用用户名旁VIP徽标样式，保持顶部入口统一 */
.membership-btn,
.customer-service-btn {
  width: auto !important;
  min-width: 42px;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 修改时间：2026-06-15 14:05；修改原因：普通用户升级会员按钮改为接近语言切换的轻量提示样式 */
.membership-btn:not(.vip) {
  /* 修改时间：2026-06-15 15:20；修改原因：升级会员文字按钮去掉徽标内边距，避免用户名和退出登录距离显得过长 */
  min-width: 0;
  padding: 0 2px !important;
  color: var(--primary-color) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-weight: 400 !important;
  text-decoration: underline;
}

.membership-btn.vip {
  /* 修改时间：2026-06-15 15:45；修改原因：恢复VIP按钮原有胶囊尺寸，仅通过外部间距控制文字距离 */
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
}

.user-info-inline .membership-btn {
  /* 修改时间：2026-06-15 15:35；修改原因：顶部会员文字按钮不额外占用外边距，统一三段文字距离 */
  margin: 0;
}

.phone-link {
  /* 修改时间：2026-06-07 06:32；修改原因：登录失败服务热线号码可点击拨打并使用主题色突出 */
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.phone-link:hover {
  text-decoration: underline;
}

/* 修改时间：2026-06-15 15:35；修改原因：登录页固定展示客服微信和服务热线，便于未登录用户联系支持 */
.login-contact-card {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px;
  color: #9ecace;
  background: rgba(10, 19, 20, 0.54);
  border: 1px solid rgba(22, 217, 255, 0.16);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.login-contact-card strong,
.login-contact-card a {
  margin-left: 6px;
  color: #cfecee;
}

.login-upgrade-btn {
  /* 修改时间：2026-06-16 12:05；修改原因：登录页升级会员入口点击后打开专属客服二维码 */
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  color: #021113 !important;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%) !important;
  border: 1px solid rgba(219, 255, 247, 0.46) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.18) !important;
}

/* 修改原因：让版本日志和语言切换并排展示，语言入口使用普通网站常见的小字链接样式；修改时间：2026-06-06 16:15 */
/* 修改时间：2026-06-07 02:16；修改原因：浏览历史文件按钮移动到头部工具行最右侧显示 */
/* 修改时间：2026-06-07 02:52；修改原因：头部工具行取消换行和用户名预留挤压，让浏览历史文件固定在同一行最右侧 */
.header-tools {
  /* 修改时间：2026-06-15 12:25；修改原因：恢复头部工具栏横向排列，避免模板样式调整误影响头部 */
  display: flex;
  /* 修改时间：2026-06-15 13:45；修改原因：新增顶部等级和客服按钮后恢复工具栏垂直居中 */
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  padding-right: 0;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 12px;
  line-height: 1;
}

.header-tools #log-btn {
  width: auto !important;
  padding: 6px 12px !important;
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  transform: none !important;
}

.header-tools #log-btn:hover {
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.9) !important;
  border-color: rgba(22, 217, 255, 0.7) !important;
  filter: none !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.16) !important;
  transform: none !important;
}

.language-switcher button {
  width: auto !important;
  padding: 0 8px !important;
  color: #666 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transform: none !important;
}

.language-switcher button + button {
  border-left: 1px solid #cfd6dd !important;
}

.language-switcher button:hover {
  color: var(--primary-color) !important;
  background: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  text-decoration: underline;
  transform: none !important;
}

/* 修改原因：让夜间模式图标贴紧头部右侧并更换为更直观的月亮/太阳切换；修改时间：2026-06-06 16:28 */
.theme-toggle {
  width: 26px !important;
  height: 26px !important;
  margin-left: auto;
  margin-right: 0;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4b5563 !important;
  background: transparent !important;
  border: 1px solid #d1d5db !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: none !important;
}

.theme-toggle:hover {
  color: var(--primary-color) !important;
  background: #f3f4f6 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.theme-icon-sun {
  display: none;
}

body.dark-mode .theme-icon-moon {
  display: none;
}

body.dark-mode .theme-icon-sun {
  display: inline;
}

@media (max-width: 600px) {
  .header-main h2 {
    padding-right: 0;
  }

  .user-info-inline {
    position: static;
    margin-left: 0;
    margin-top: 8px;
    justify-content: flex-end;
  }
}

.badge {
  /* 修改时间：2026-06-07 03:22；修改原因：VIP 等级图标改为与主体科技按钮接近的渐变风格 */
  /* 修改时间：2026-06-07 03:35；修改原因：VIP 等级图标改为功能按钮未高亮样式 */
  background: rgba(10, 19, 20, 0.78);
  color: #cfecee;
  padding: 3px 10px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: none;
}

.item {
  margin-bottom: 18px;
}

label {
  display: block;
  /* 独占一行 */
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

input,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  /* 确保不撑大 */
  font-size: 14px;
}

/* --- 8. 按钮交互样式 --- */
button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 14px;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s;
  /* 按钮变色动画时长 */
}

button:hover {
  background: #0056b3;
  /* 鼠标悬停加深颜色 */
  transform: translateY(-1px);
  /* 轻微向上跳动 */
}

button:disabled {
  background: #ccc;
  /* 禁用状态灰色 */
  cursor: not-allowed;
  /* 鼠标显示禁止标志 */
  transform: none;
}

#asset-btn {
  /* 修改时间：2026-06-07 03:40；修改原因：浏览历史文件按钮改为功能按钮未高亮样式 */
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  box-shadow: none !important;
  width: auto;
  /* 侧边栏按钮不撑满 */
  padding: 6px 12px;
  font-size: 12px;
  margin-top: 0;
  margin-left: auto;
  white-space: nowrap;
}

/* --- 功能页样式 --- */
/* --- 9. 功能切换 Tab 样式 --- */
.tab-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.tab-btn {
  background: #eee;
  color: #666;
  padding: 8px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  width: auto;
  flex: 1;
  /* 多个按钮平分宽度 */
  border: none;
}

.tab-btn.active {
  background: var(--primary-color);
  /* 选中状态 */
  color: white;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 语法：固定三列 */
  gap: 8px;
  margin-top: 10px;
}

.feature-item {
  border: 1px solid #ddd;
  padding: 10px 4px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  background: #fff;
  color: #333;
}

/* 修改时间：2026-06-07 10:35；修改原因：绘制区域按钮内部主标题和括号说明分行显示 */
.button-title,
.button-note {
  display: block;
  line-height: 1.2;
}

.button-note {
  margin-top: 2px;
  font-size: 0.86em;
  opacity: 0.82;
}

/* 修改时间：2026-06-09 10:28；修改原因：文生图按钮PC端保持一行，手机端再拆成“文/生图” */
.mobile-break-title,
.mobile-break-note {
  display: inline;
  line-height: 1.2;
}

/* 修改时间：2026-06-11 10:18；修改原因：文生图清空和模板按钮使用未高亮功能按钮样式 */
.secondary-action-btn {
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer;
}

.prompt-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.prompt-label-row label {
  flex: 1;
  margin-bottom: 0;
}

.prompt-template-btn {
  width: auto;
  min-width: 54px;
  min-height: 24px;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px !important;
}

.prompt-input-row {
  /* 修改时间：2026-06-12 11:05；修改原因：清空按钮与提示词输入框同一行显示 */
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.prompt-input-row textarea {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.prompt-clear-btn {
  width: 34px;
  min-width: 34px;
  min-height: 100%;
  padding: 6px 4px;
  font-size: 12px;
  line-height: 1.1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  border-radius: 6px !important;
}

/* 修改时间：2026-06-11 10:18；修改原因：文生图提示词模板弹框四栏展示 */
.prompt-template-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.66);
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.prompt-template-panel {
  width: min(960px, 96vw);
  background: rgba(7, 16, 14, 0.98);
  border: 1px solid rgba(22, 217, 255, 0.24);
  border-radius: 8px;
  padding: 36px 16px 16px;
  position: relative;
}

.prompt-template-close {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent !important;
  color: #cfecee !important;
  box-shadow: none !important;
  font-size: 24px;
  line-height: 28px;
}

.prompt-template-toolbar {
  /* 修改时间：2026-06-12 10:20；修改原因：模板弹框增加默认模板和自定义模板切换 */
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.prompt-template-mode {
  flex: 1;
  padding: 8px 10px;
}

.prompt-template-mode.active {
  /* 修改时间：2026-06-15 12:00；修改原因：模板类型选中态对齐高亮功能按钮样式 */
  color: #021113 !important;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%) !important;
  border-color: rgba(219, 255, 247, 0.46) !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.28) !important;
  font-weight: bold;
}

.prompt-template-grid {
  /* 修改时间：2026-06-15 12:00；修改原因：模板数量动态增加后改为横向滑动选择 */
  display: flex;
  gap: 10px;
  max-height: 432px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

.prompt-template-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  flex: 0 0 220px;
  min-width: 220px;
  padding: 8px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  border-radius: 8px;
  background: rgba(10, 19, 20, 0.78);
  cursor: pointer;
  scroll-snap-align: start;
}

.prompt-template-item.active {
  /* 修改时间：2026-06-15 12:00；修改原因：已选模板卡片对齐高亮功能按钮样式 */
  color: #021113;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%);
  border-color: rgba(219, 255, 247, 0.46);
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.28);
}

.prompt-template-item textarea {
  min-height: 72px;
  max-height: 72px;
  resize: none;
  font-size: 12px;
  line-height: 1.45;
}

.prompt-template-empty {
  /* 修改时间：2026-06-15 15:05；修改原因：自定义模板为空时显示占位提示，避免PC端看起来没有选项和编辑区域 */
  padding: 26px 12px;
  color: #9ecace;
  text-align: center;
  border: 1px dashed rgba(22, 217, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 19, 20, 0.48);
}

.prompt-template-grid {
  /* 修改时间：2026-06-15 12:25；修改原因：模板列表改为上下排列，固定高度内超过4个纵向滑动 */
  display: grid;
  grid-template-columns: 1fr;
  max-height: 432px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 0;
  scroll-snap-type: none;
}

.prompt-template-item {
  /* 修改时间：2026-06-15 12:25；修改原因：模板卡片适配上下排列布局 */
  flex: none;
  min-width: 0;
  scroll-snap-align: none;
}

.prompt-template-actions {
  /* 修改时间：2026-06-12 10:20；修改原因：模板弹框增加保存模板和完成按钮并排操作 */
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.prompt-template-save,
.prompt-template-add,
.prompt-template-done {
  flex: 1;
  padding: 10px 12px;
}

.voice-delete-btn {
  /* 修改时间：2026-06-12 10:20；修改原因：语音录制预览增加删除按钮 */
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
}

.upload-guide-modal {
  /* 修改时间：2026-06-13 11:05；修改原因：上传图片前展示参考素材提示弹框 */
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.66);
  box-sizing: border-box;
}

/* 修改时间：2026-06-15 13:45；修改原因：新增会员充值弹框和客服二维码弹框视觉样式 */
.recharge-modal,
.customer-service-modal {
  position: fixed;
  inset: 0;
  z-index: 10003;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.66);
  box-sizing: border-box;
}

.recharge-panel,
.customer-service-panel {
  width: min(420px, 94vw);
  position: relative;
  padding: 36px 16px 16px;
  color: #e5f6f7;
  background: rgba(7, 16, 14, 0.98);
  border: 1px solid rgba(22, 217, 255, 0.24);
  border-radius: 8px;
}

.recharge-close,
.customer-service-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #cfecee !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 24px;
  line-height: 28px;
}

.recharge-title,
.customer-service-title {
  margin-bottom: 12px;
  text-align: center;
  color: #d8f7f8;
  font-size: 18px;
  font-weight: 800;
}

.recharge-status,
.recharge-tip,
.customer-service-note {
  color: #9ecace;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.recharge-status {
  /* 修改时间：2026-06-16 11:45；修改原因：会员充值弹框突出显示当前到期时间 */
  color: #d8f7f8;
  font-weight: 700;
}

.recharge-plan-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.recharge-plan {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  color: #cfecee;
  background: rgba(10, 19, 20, 0.78);
  border: 1px solid rgba(22, 217, 255, 0.22);
  border-radius: 8px;
  box-shadow: none;
  text-align: left;
}

.recharge-plan:hover,
.recharge-plan:focus {
  color: #021113;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%);
  border-color: rgba(219, 255, 247, 0.46);
}

.recharge-plan-name {
  font-weight: 800;
}

.recharge-plan-price {
  font-size: 18px;
  font-weight: 900;
}

.recharge-plan-action {
  grid-column: 1 / -1;
  font-size: 12px;
  opacity: 0.86;
}

.recharge-empty,
.recharge-loading {
  padding: 18px 8px;
  color: #9ecace;
  text-align: center;
}

.customer-service-qr {
  width: min(260px, 72vw);
  height: min(260px, 72vw);
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  background: #fff;
}

.upload-guide-panel {
  width: min(420px, 94vw);
  position: relative;
  padding: 34px 16px 16px;
  color: #e5f6f7;
  background: rgba(7, 16, 14, 0.98);
  border: 1px solid rgba(22, 217, 255, 0.24);
  border-radius: 8px;
}

.upload-guide-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #cfecee !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 24px;
  line-height: 28px;
}

.upload-guide-title {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #d8f7f8;
  text-align: center;
}

.upload-guide-img {
  width: 100%;
  height: auto;
  max-height: min(46vh, 360px);
  display: block;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  background: transparent;
  margin: 0 auto;
}

.upload-guide-caption {
  margin: 6px 0 12px;
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
}

.upload-guide-action {
  width: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

.upload-guide-never-row {
  /* 修改时间：2026-06-13 11:40；修改原因：上传提示弹框的免提醒选项整体居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
}

.upload-guide-never {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.2;
  color: #cfecee;
  text-align: center;
  direction: ltr;
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

.upload-guide-never input {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin: 0;
  accent-color: #16d9ff;
}

.upload-guide-never span {
  display: inline-block;
  direction: ltr;
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

/* 修改时间：2026-06-11 10:18；修改原因：历史资产未完成任务显示转圈状态 */
.asset-pending-box {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #cfecee;
}

.asset-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(22, 217, 255, 0.18);
  border-top-color: #16d9ff;
  border-radius: 50%;
  animation: asset-spin 0.9s linear infinite;
}

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

@media (max-width: 700px) {
  .prompt-template-grid {
    grid-template-columns: 1fr;
  }

  .prompt-template-actions,
  .prompt-template-toolbar {
    flex-direction: column;
  }
}

.feature-item.active {
  background: #e7f3ff;
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: bold;
}

.feature-item:hover {
  border-color: var(--primary-color);
}

/* --- 10. 队列与进度条 --- */
#queue-info {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
  /* 修改时间：2026-06-07 07:28；修改原因：服务器前方任务数信息框高度收窄，减少主界面占用空间 */
  padding: 6px 10px;
  line-height: 1.25;
  background: #f8f9fa;
  border-radius: 8px;
}

/* 定义一个名为 pulse-red 的关键帧动画 */
@keyframes pulse-red {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
    /* 放大 1.3 倍 */
    color: var(--primary-color);
  }

  100% {
    transform: scale(1);
  }
}

.animate-pulse {
  display: inline-block;
  /* 语法：调用动画，时长 0.5s，贝塞尔曲线平滑 */
  animation: pulse-red 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#progress-container {
  display: none;
  /* 默认隐藏，开始生成时 JS 修改为 block */
  margin-top: 20px;
  background: #eee;
  border-radius: 10px;
  height: 22px;
  overflow: hidden;
}

#progress-bar {
  width: 0%;
  /* 进度由 JS 动态修改百分比 */
  height: 100%;
  background: linear-gradient(90deg, #28a745, #5ddc7d);
  /* 渐变色 */
  transition: width 0.3s ease;
  text-align: center;
  color: white;
  font-size: 12px;
  line-height: 22px;
  font-weight: bold;
}

#status {
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
  color: #555;
  min-height: 20px;
  font-weight: bold;
}

#login-err {
  /* 修改时间：2026-06-07 07:28；修改原因：登录失败联系方式提示改为与科技主题协调的弱提示色，不再使用红色 */
  color: #bdeef2 !important;
}

#result-display {
  margin-top: 25px;
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

/* ★★★ 遮罩画布容器 ★★★ */
/* --- 11. 画布与遮罩 --- */
.mask-canvas-wrapper {
  position: relative;
  display: inline-block;
  /* width: 100%; */
  line-height: 0;
  /* 消除图片下方的间隙 */
}

#mask-layer {
  position: absolute;
  /* 绝对定位，盖在图片正上方 */
  top: 0;
  left: 0;
  /* 视觉上撑满父容器（即撑满图片） */
  width: 100% !important;
  /* 强制填满 */
  height: 100% !important;
  z-index: 10;
  cursor: crosshair;
  /* 鼠标指针变为十字星，提示可以绘画 */
}

.drawing-active {
  border: 2px solid var(--primary-color) !important;
}

/* 对比容器基础样式 */
/* --- 12. 图片对比器 (Slider) --- */
.comparison-box {
  position: relative;
  width: 100%;
  margin-top: 15px;
  min-height: 200px;
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 !important;
  /* 强制消除内边距 */
  display: none;
}

/* 2. 底层效果图 */
#result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  /* 确保图片中心对齐 */
  z-index: 1;
  display: block;
  /* 消除图片底部间隙 */
}

/* 3. 上层原图容器（窗帘） */
.comparison-upper-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pos, 0%);
  /* 语法：由 JS 修改变量 --pos，决定原图遮挡多少 */
  /* 只有这个宽度在变 */
  height: 100%;
  overflow: hidden;
  /* 关键：裁切内容 */
  /* 剪切效果 */
  z-index: 2;
  border-right: 2px solid white;
  /* 分割线 */
}

/* 5. 为了让 width: 100% 相对的是大容器而不是 .comparison-upper-layer */
/* 我们需要给 .comparison-upper-layer 的父级加一个宽度参考 */
.comparison-visual-container {
  container-type: inline-size;
  /* 现代浏览器支持，让子元素可以参考此容器宽度 */
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 修改时间：2026-06-07 07:28；修改原因：手机端对比图允许横向拖动，不触发点击式跳动 */
  touch-action: none;
}

#comparison-origin-img {
  /* 语法：100cqw 表示宽度始终等于父容器的 100%，
               这样即使父层 width 变小，图也不会跟着缩小，实现“刮刮乐”效果 */
  width: 100cqw !important;
  /* cqw 是容器宽度单位，确保它永远等于大容器的宽，不论父级多窄 */
  height: 100% !important;
  /* 强制高度与容器一致 */
  object-fit: cover;
  /* 关键：确保与效果图的裁剪方式一模一样 */
  object-position: top;
  /* 确保与效果图的对齐位置一模一样 */
}

/* 5. 滑块 Input：盖在最上面 */
.comparison-slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  /* 隐藏原生的 Input 滑块，只保留交互功能 */
  cursor: ew-resize;
  /* 指针显示左右缩放箭头 */
  touch-action: none;
}

/* 分割线 */
.comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  /* 分割线位置跟随滑块 */
  width: 2px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 3;
  pointer-events: none;
  /* 语法：让鼠标事件穿透，不阻碍下方操作 */
}

/* 资产列表中的媒体元素样式 */
/* --- 13. 动效增强 --- */
.media-render {
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}

.media-render:hover {
  filter: brightness(0.9);
  /* 变暗 10% */
  /* 鼠标移入稍微变暗，表示可交互 */
  transform: scale(1.02);
  /* 缩放 1.02 倍 */
  /* 轻微放大 */
}

/* 隐藏滚动条但保持功能 (可选) */
#global-media-viewer::-webkit-scrollbar {
  display: none;
  /* 隐藏 Chrome/Safari 的滚动条 */
}

.disabled-feature {
  background-color: #f5f5f5 !important;
  /* 浅灰色背景 */
  color: #999 !important;
  /* 灰色文字 */
  cursor: not-allowed !important;
  /* 鼠标显示禁止图标 */
  border-color: #ddd !important;
  /* 边框变淡 */
  opacity: 0.7;
  /* 透明度降低 */
}

/* 如果有悬停效果，也需要覆盖掉 */
.disabled-feature:hover {
  box-shadow: none !important;
  transform: none !important;
}

.asset-right button:hover {
  background: #0056b3 !important;
  /* 鼠标悬停变深蓝 */
  transition: 0.3s;
}

/* --- Tech theme overrides --- */
:root {
  --primary-color: #16d9ff;
  --success-color: #45f29a;
  --bg-color: #07100e;
  --panel-color: rgba(10, 19, 20, 0.92);
  --panel-soft: rgba(18, 31, 32, 0.78);
  --line-color: rgba(22, 217, 255, 0.28);
  --text-color: #e7fbff;
  --muted-color: #8ea9aa;
}

body {
  color: var(--text-color);
  background-color: #07100e;
  background-image:
    linear-gradient(rgba(22, 217, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 217, 255, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, #07100e 0%, #101513 48%, #07100e 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

#main-container {
  color: var(--text-color);
  background: var(--panel-color);
  border: 1px solid var(--line-color);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(69, 242, 154, 0.08) inset,
    0 20px 60px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(22, 217, 255, 0.14);
  backdrop-filter: blur(14px);
}

.header {
  border-bottom: 1px solid rgba(22, 217, 255, 0.2);
  padding-bottom: 14px;
}

.header h2 {
  color: var(--text-color);
  font-weight: 800;
  text-shadow: 0 0 16px rgba(22, 217, 255, 0.42);
}

#user-info,
#user-info a,
label {
  color: var(--text-color) !important;
}

.item > label {
  color: #bdeef2 !important;
  letter-spacing: 0;
}

input,
textarea {
  /* 修改时间：2026-06-07 10:35；修改原因：PC端输入框背景统一为和手机端一致的深色样式 */
  color: var(--text-color) !important;
  background: rgba(3, 9, 10, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.24) !important;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(69, 242, 154, 0.04) inset;
}

/* 修改时间：2026-06-07 10:35；修改原因：覆盖PC浏览器自动填充导致输入框变白的问题 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color) !important;
  caret-color: var(--text-color) !important;
  box-shadow: 0 0 0 1000px rgba(3, 9, 10, 0.94) inset !important;
  border: 1px solid rgba(22, 217, 255, 0.24) !important;
  transition: background-color 9999s ease-out 0s;
}

input:focus,
textarea:focus {
  border-color: rgba(22, 217, 255, 0.72);
  box-shadow:
    0 0 0 2px rgba(22, 217, 255, 0.12),
    0 0 18px rgba(22, 217, 255, 0.18);
}

button,
#submit-btn,
#asset-btn,
#log-btn {
  color: #021113 !important;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%) !important;
  border: 1px solid rgba(219, 255, 247, 0.36) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 10px 26px rgba(22, 217, 255, 0.2);
}

button:hover,
#submit-btn:hover,
#asset-btn:hover,
#log-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 24px rgba(22, 217, 255, 0.34);
}

/* 修改时间：2026-06-07 03:22；修改原因：版本日志按钮改为功能按钮未高亮样式，覆盖全局高亮按钮渐变 */
.header-tools #log-btn {
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  box-shadow: none !important;
}

.header-tools #log-btn:hover {
  border-color: rgba(22, 217, 255, 0.7) !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.16) !important;
}

/* 修改时间：2026-06-07 03:40；修改原因：覆盖全局按钮高亮样式，让浏览历史文件保持未高亮状态 */
.header-tools #asset-btn {
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  box-shadow: none !important;
}

.header-tools #asset-btn:hover {
  border-color: rgba(22, 217, 255, 0.7) !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.16) !important;
}

button:disabled {
  color: #627273 !important;
  background: #1c2525 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none;
}

#admin-add-user,
#admin-interrupt,
#admin-template,
button[style*="#dc3545"],
button[style*="#ff4d4f"] {
  /* 修改时间：2026-06-07 07:28；修改原因：所有红色按钮统一改为功能按钮未高亮样式 */
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  box-shadow: none !important;
}

/* 修改时间：2026-06-08 10:20；修改原因：管理员按钮区域整行居中并修正右侧偏移 */
#admin-panel {
  width: 100% !important;
  margin: 0 auto 10px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#admin-panel #admin-add-user,
#admin-panel #admin-interrupt,
#admin-panel #admin-template {
  /* 修改时间：2026-06-12 10:20；修改原因：新增管理员修改提示词按钮沿用未高亮居中样式 */
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border: 1px solid rgba(22, 217, 255, 0.18) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 132px !important;
  max-width: 220px !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#admin-panel #admin-add-user:hover,
#admin-panel #admin-interrupt:hover,
#admin-panel #admin-template:hover {
  border-color: rgba(22, 217, 255, 0.7) !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.16) !important;
}

#admin-panel #admin-interrupt.admin-interrupt-hidden {
  /* 修改时间：2026-06-15 12:50；修改原因：无任务时隐藏打断按钮并覆盖管理按钮强制显示样式 */
  display: none !important;
}

button[style*="#dc3545"]:hover,
button[style*="#ff4d4f"]:hover {
  /* 修改时间：2026-06-07 07:28；修改原因：红色按钮悬停状态也保持功能按钮未高亮风格 */
  border-color: rgba(22, 217, 255, 0.7) !important;
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.16) !important;
  filter: none !important;
}

#btn-upload-ref {
  background: linear-gradient(135deg, #2c3c42 0%, #16d9ff 100%) !important;
}

#btn-upload-origin {
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%) !important;
}

#queue-info,
.preview-box-aligned,
#slider-container,
#fabric-container,
#voice-preview-container,
#brush-control,
.asset-item,
.asset-params {
  color: var(--text-color);
  background: var(--panel-soft) !important;
  border: 1px solid rgba(22, 217, 255, 0.2) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.18);
}

#queue-info {
  color: #bdeef2;
}

#waiting-count,
#slider-value,
#fabric-value,
#size-value {
  color: var(--primary-color) !important;
  text-shadow: 0 0 12px rgba(22, 217, 255, 0.48);
}

.tab-nav {
  border-bottom-color: rgba(22, 217, 255, 0.18);
}

.tab-btn {
  color: #bdeef2;
  background: rgba(13, 25, 26, 0.88);
  border: 1px solid rgba(22, 217, 255, 0.18);
  border-radius: 8px;
}

.tab-btn.active {
  color: #021113;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%);
  border-color: rgba(219, 255, 247, 0.46);
  box-shadow: 0 0 20px rgba(22, 217, 255, 0.24);
}

/* 修改时间：2026-06-13 12:18；修改原因：多语言切换后顶部功能按钮固定在主界面内显示，避免英文和维语溢出 */
.tab-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
  direction: ltr;
  box-sizing: border-box;
}

.tab-btn {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  overflow: hidden;
  box-sizing: border-box;
}

body.rtl-mode .tab-nav {
  direction: ltr;
}

body.rtl-mode .tab-btn {
  direction: rtl;
}

@media (max-width: 600px) {
  .tab-nav {
    gap: 4px;
  }

  .tab-btn {
    min-height: 40px;
    padding: 6px 2px;
    font-size: 11px !important;
  }
}

.feature-item {
  color: #cfecee;
  background: rgba(10, 19, 20, 0.78);
  border-color: rgba(22, 217, 255, 0.18);
  border-radius: 8px;
}

.feature-item:hover {
  border-color: rgba(22, 217, 255, 0.7);
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.16);
}

.feature-item.active {
  color: #021113;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%);
  border-color: rgba(219, 255, 247, 0.46);
  box-shadow: 0 0 18px rgba(22, 217, 255, 0.28);
}

.disabled-feature {
  color: #667b7d !important;
  background: rgba(33, 40, 40, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#image-tip,
#video-tip,
#draw-hint,
#status,
#char-count,
#voice-file-info {
  color: var(--muted-color) !important;
}

#progress-container {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(22, 217, 255, 0.16);
  box-shadow: 0 0 16px rgba(22, 217, 255, 0.1) inset;
}

#progress-bar {
  color: #021113;
  background: linear-gradient(90deg, #16d9ff, #45f29a);
  text-shadow: none;
}

#result-display,
.comparison-box {
  background: rgba(5, 12, 13, 0.82);
  border-top: 1px solid rgba(22, 217, 255, 0.2);
  border-radius: 8px;
}

#result-placeholder {
  color: var(--muted-color) !important;
}

#asset-sidebar {
  background: rgba(7, 16, 14, 0.96);
  border-right: 1px solid rgba(22, 217, 255, 0.28);
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.4);
}

.sidebar-content,
.sidebar-header h3,
.param-line,
.media-tag {
  color: var(--text-color);
}

.sidebar-header {
  border-bottom-color: rgba(22, 217, 255, 0.2);
}

/* 修改时间：2026-06-07 01:44；修改原因：历史资产移动端也强制输入/输出文件并排显示，并优化历史标题和关闭按钮尺寸 */
/* 修改时间：2026-06-07 02:00；修改原因：跑马灯改为版本号后喇叭加右侧避让布局，防止与用户名重叠 */
/* 修改时间：2026-06-07 02:16；修改原因：删除界面版本号和喇叭后，跑马灯单独占用标题区域并将速度加快一倍 */
/* 修改时间：2026-06-07 03:22；修改原因：删除广播功能后，头部品牌行仅保留蓝迪云 AI */
.brand-news-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-right: 230px;
}

.brand-news-row h2 {
  flex: 0 0 auto;
  padding-right: 0;
}

/* 修改时间：2026-06-15 15:05；修改原因：恢复账号到期倒计时喇叭广播，默认无提醒时隐藏 */
.account-notice {
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 520px;
  align-items: center;
  gap: 6px;
  color: #ffe7a3;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
}

.account-notice-icon {
  flex: 0 0 auto;
  color: #45f29a;
  font-weight: 800;
}

.account-notice-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.account-notice-track span {
  display: inline-block;
  padding-left: 100%;
  animation: accountNoticeScroll 12s linear infinite;
}

@keyframes accountNoticeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sidebar-header {
  justify-content: flex-start;
  gap: 8px;
}

.sidebar-header h3 {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.2;
}

.sidebar-header button {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 修改时间：2026-06-07 08:10；修改原因：历史资产关闭键右侧增加文件保留提示，并保持移动端不挤压标题 */
.asset-retention-tip {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted-color);
  font-size: 12px;
  line-height: 1.35;
}

#asset-sidebar .asset-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#asset-sidebar .asset-left {
  border-right: 1px dashed rgba(22, 217, 255, 0.2);
  border-bottom: none;
  padding-right: 10px;
  padding-bottom: 0;
}

#asset-sidebar .asset-right {
  min-width: 0;
}

#asset-sidebar .asset-item {
  padding: 12px;
}

#asset-sidebar .media-container {
  min-height: 88px;
}

.result-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: none;
  align-items: center;
  justify-content: center;
  /* 修改时间：2026-06-07 07:28；修改原因：生成结果预览上方留出空间，可看到蓝迪云 AI 品牌 */
  padding: 14px 18px 18px;
  background: rgba(0, 0, 0, 0.72);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.result-preview-modal.is-open {
  display: flex;
}

.result-preview-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(92vw, 860px);
  min-height: min-content;
  max-height: none;
  /* 修改时间：2026-06-07 06:18；修改原因：生成结果预览置顶显示，上方不留空 */
  margin: 0 auto 18px;
  padding: 14px;
  background: rgba(7, 16, 14, 0.98);
  border: 1px solid rgba(22, 217, 255, 0.34);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.result-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 24px !important;
  line-height: 1 !important;
  z-index: 2;
}

.result-preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  max-height: none;
  overflow: visible;
  padding-top: 22px;
}

.result-preview-body img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* 修改时间：2026-06-07 03:05；修改原因：结果预览自动居中并允许弹层滑动查看长图/大图 */
.result-preview-body video {
  max-width: 100%;
  max-height: calc(92dvh - 128px);
  object-fit: contain;
  border-radius: 6px;
}

.result-preview-body audio {
  width: min(100%, 520px);
}

/* 修改时间：2026-06-07 06:05；修改原因：视频和音频结果预览增加明确容器和失败提示 */
.result-media-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.result-audio-box {
  padding: 34px 16px 18px;
  border: 1px solid rgba(22, 217, 255, 0.2);
  border-radius: 8px;
  background: rgba(10, 19, 20, 0.78);
}

.audio-preview-title {
  color: #bdeef2;
  font-size: 13px;
  font-weight: 700;
}

.media-error {
  color: #ff9a5c;
  font-size: 13px;
  text-align: center;
}

.result-preview-download {
  width: min(100%, 240px) !important;
  align-self: center;
  padding: 10px 14px !important;
}

.result-preview-panel {
  /* 修改时间：2026-06-15 13:05；修改原因：预览面板限制在可视区内，保留保存按钮 */
  max-height: calc(100dvh - 32px);
  margin: 0 auto;
}

.result-preview-body {
  /* 修改时间：2026-06-15 13:05；修改原因：预览内容在面板内居中完整显示 */
  max-height: calc(100dvh - 126px);
  overflow: auto;
}

.result-preview-body img {
  /* 修改时间：2026-06-15 13:05；修改原因：预览图片完整显示并留出保存按钮空间 */
  max-height: calc(100dvh - 138px);
  object-fit: contain;
}

@media (max-width: 600px) {
  .brand-news-row {
    align-items: flex-start;
    padding-right: 0;
  }

  .header-tools {
    /* 修改时间：2026-06-07 07:02；修改原因：移动端工具行扩展到视口宽度，浏览历史文件像PC端一样贴最右 */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-right: 0;
    gap: 4px;
    width: calc(100vw - 30px);
    max-width: none;
    overflow: visible;
  }

  .header-tools #log-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  .language-switcher {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .language-switcher button {
    padding: 0 3px !important;
    font-size: 10px !important;
  }

  .brand-news-row h2 {
    font-size: 20px;
  }

  #asset-btn {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 4px 6px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .result-preview-modal {
    /* 修改时间：2026-06-07 09:05；修改原因：移动端预览弹层缩小外边距，让下载按钮始终保留在屏幕可见区域 */
    padding: 44px 8px 8px;
    overflow: hidden;
  }

  .result-preview-panel {
    width: 100%;
    height: calc(100dvh - 52px);
    min-height: 0;
    max-height: calc(100dvh - 52px);
    padding: 42px 10px 10px;
    overflow: hidden;
  }

  .result-preview-close {
    top: 6px;
    right: 10px;
  }

  .result-preview-body {
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
  }

  /* 修改时间：2026-06-07 09:05；修改原因：移动端限制图片/视频高度，下载按钮固定显示在预览下方且不被长图挤出屏幕 */
  .result-preview-body img,
  .result-preview-body video {
    max-height: calc(100dvh - 150px);
    width: auto;
    max-width: 100%;
  }

  .result-preview-download {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 auto;
    width: 100%;
  }

  .result-preview-modal {
    /* 修改时间：2026-06-15 13:05；修改原因：移动端预览靠近顶部并允许整体适配可视区 */
    padding: 10px 8px 8px;
    overflow: auto;
  }

  .result-preview-panel {
    /* 修改时间：2026-06-15 13:05；修改原因：移动端预览面板不撑满屏幕，保留保存按钮 */
    height: auto;
    max-height: calc(100dvh - 18px);
    padding: 38px 10px 10px;
  }

  .result-preview-body img,
  .result-preview-body video {
    /* 修改时间：2026-06-15 13:05；修改原因：移动端完整显示预览并留出按钮空间 */
    max-height: calc(100dvh - 136px);
    object-fit: contain;
  }

  #asset-sidebar {
    max-width: 96vw;
  }

  .sidebar-content {
    padding: 14px;
  }

  /* 修改时间：2026-06-07 08:10；修改原因：移动端历史资产保留提示缩小字号，避免标题和关闭按钮拥挤 */
  .asset-retention-tip {
    font-size: 10px;
  }

  #asset-sidebar .asset-main-grid {
    gap: 8px;
  }

  #asset-sidebar .asset-left {
    padding-right: 8px;
  }

  #asset-sidebar .asset-params {
    font-size: 11px;
    padding: 8px;
  }
}

.upload-guide-never-row {
  /* 修改时间：2026-06-15 12:35；修改原因：隐藏上传提示的下次不再提醒选项和文本 */
  display: none !important;
}