/* --- 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;
}

/* 修改时间：2026-06-18 15:52；修改原因：历史资产增加下载和删除操作按钮 */
.asset-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.asset-actions button {
  width: auto;
  min-width: 58px;
  min-height: 30px;
  padding: 5px 10px !important;
  font-size: 12px !important;
}

.asset-delete-btn {
  color: #ffd6d6 !important;
  background: rgba(40, 12, 16, 0.82) !important;
  border-color: rgba(255, 106, 106, 0.42) !important;
  box-shadow: none !important;
}

/* 修改时间：2026-06-30 10:18；修改原因：历史资产支持双输入图和管理员删除标记展示 */
.asset-deleted-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 106, 106, 0.4);
  color: #ffb5b5;
  background: rgba(40, 12, 16, 0.58);
  font-size: 12px;
}

.asset-input-list {
  display: grid;
  gap: 8px;
}

.asset-input-card {
  min-width: 0;
}

.asset-input-label {
  color: var(--muted-color);
  font-size: 11px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.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.active {
  /* 修改时间：2026-06-17 02:14；修改原因：夜间模式下保持当前语言高亮可见 */
  color: #45f29a !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;
  /* 修改时间：2026-06-17 18:12；修改原因：到期提醒显示在退出登录上方，用户操作行下移 */
  top: 22px;
  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;
  /* 修改时间：2026-06-18 09:32；修改原因：用户按钮层级高于到期提醒，避免喇叭文字覆盖VIP按钮 */
  z-index: 5;
}

/* 修改原因：维语 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;
}

.account-action-btn {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码按钮复用用户名旁小按钮样式并保持紧凑 */
  padding-inline: 6px !important;
}

.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-16 21:54；修改原因：登录页联系信息仅保留服务热线，客服微信文本不再显示 */
.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;
}

/* 修改时间：2026-06-18 15:15；修改原因：首页登录和注册按钮同款显示，只有当前模式高亮 */
.login-mode-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.login-mode-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;
}

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

.register-form {
  margin-top: 14px;
}

.register-message {
  margin-top: 10px;
  color: #9ecace;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
}

.login-upgrade-btn {
  /* 修改时间：2026-06-16 21:54；修改原因：登录页升级会员按钮改为与主界面会员入口一致的小按钮样式 */
  width: auto !important;
  min-width: 0;
  display: block;
  margin: 10px auto 0;
  padding: 3px 10px !important;
  color: var(--primary-color) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-decoration: underline;
  box-shadow: none !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;
}

.language-switcher button.active {
  /* 修改时间：2026-06-17 02:14；修改原因：进入界面时高亮当前语言 */
  color: var(--primary-color) !important;
  text-decoration: underline;
}

/* 修改原因：让夜间模式图标贴紧头部右侧并更换为更直观的月亮/太阳切换；修改时间：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,
select {
  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;
  /* 修改时间：2026-06-17 03:18；修改原因：中文版功能按钮恢复固定三列，不让按钮本身自动换行 */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.feature-item {
  border: 1px solid #ddd;
  /* 修改时间：2026-06-17 03:42；修改原因：下面选择功能模式按钮统一稍小字号，与顶部页签区分 */
  height: 46px;
  padding: 6px 6px;
  border-radius: 6px;
  font-size: 13px !important;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  background: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.18;
  box-sizing: border-box;
  flex-direction: column;
  gap: 1px;
}

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

.button-title {
  /* 修改时间：2026-06-17 17:45；修改原因：拆分按钮上下两行字体与普通功能按钮保持一致 */
  font-size: 13px;
}

.button-note {
  margin-top: 0;
  /* 修改时间：2026-06-17 17:45；修改原因：拆分按钮上下两行字体与普通功能按钮保持一致 */
  font-size: 13px;
  opacity: 0.82;
}

/* 修改时间：2026-06-17 02:38；修改原因：文生图按钮固定两行显示，不使用自适应字号 */
.mobile-break-title,
.mobile-break-note {
  display: block !important;
  /* 修改时间：2026-06-17 03:30；修改原因：中文文生图按钮内部文字放大并固定两行 */
  font-size: 16px !important;
  font-weight: 700;
  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;
  /* 修改时间：2026-06-17 18:12；修改原因：模板按钮固定到提示词行右侧 */
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.prompt-label-row label {
  /* 修改时间：2026-06-17 01:40；修改原因：提示词框标题缩小一号，避免视觉上接近正文 */
  flex: 1;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #a8cfd0;
}

.prompt-label-row .prompt-guidance-label {
  /* 修改时间：2026-06-17 02:14；修改原因：精准说明提示复用语言切换的小字文本风格 */
  display: inline-block;
  /* 修改时间：2026-06-17 17:45；修改原因：提示词后使用两个空格与说明同一行显示 */
  margin-left: 0;
  color: #666 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.prompt-template-btn {
  width: auto;
  /* 修改时间：2026-06-17 18:12；修改原因：提示词行模板按钮缩小并靠右显示 */
  min-width: 44px;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 11px;
  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-input-row input {
  /* 修改时间：2026-06-18 09:48；修改原因：普通输入框加入清空按钮后与文本框同排自适应 */
  flex: 1;
  min-width: 0;
  margin: 0;
}

.prompt-clear-btn {
  /* 修改时间：2026-06-18 09:48；修改原因：清空按钮改为整体翻译，避免维语显示成“维语+空” */
  width: 46px;
  min-width: 46px;
  min-height: 100%;
  padding: 6px 4px;
  font-size: 11px;
  line-height: 1.1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  border-radius: 6px !important;
}

/* 修改时间：2026-06-11 10:18；修改原因：文生图提示词模板弹框四栏展示 */
.prompt-template-modal {
  position: fixed;
  inset: 0;
  /* 修改时间：2026-06-18 17:06；修改原因：用户管理内打开模板明细时模板弹框显示在最上层 */
  z-index: 10005;
  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 {
  /* 修改时间：2026-06-17 18:12；修改原因：模板选择按钮移动到右侧并缩小占位 */
  display: grid;
  grid-template-columns: 1fr 10px;
  gap: 6px;
  align-items: center;
  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-item input[type="radio"] {
  /* 修改时间：2026-06-17 18:12；修改原因：模板选择按钮移动到右侧后进一步缩小 */
  width: 10px;
  height: 10px;
  margin: 0;
  justify-self: center;
  align-self: center;
}

.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,
.change-password-modal,
.registration-review-modal,
.admin-user-modal {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码弹框复用现有弹窗遮罩布局 */
  /* 修改时间：2026-06-18 15:15；修改原因：注册申请审核弹框复用现有遮罩布局 */
  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,
.change-password-panel,
.registration-review-panel,
.admin-user-panel {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码弹框复用现有弹窗面板风格 */
  /* 修改时间：2026-06-18 15:15；修改原因：注册申请审核弹框复用现有面板风格 */
  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;
}

.sms-login-box {
  /* 修改时间：2026-06-17 21:38；修改原因：新增短信验证码登录区域样式 */
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(22, 217, 255, 0.16);
}

.sms-login-title {
  /* 修改时间：2026-06-17 21:38；修改原因：短信登录标题使用轻量说明样式 */
  color: #9ecace;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.sms-code-row {
  /* 修改时间：2026-06-17 21:38；修改原因：验证码输入框和发送按钮并排显示 */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.sms-code-row button {
  /* 修改时间：2026-06-17 21:38；修改原因：发送验证码按钮保持紧凑，不挤压输入框 */
  width: auto;
  min-width: 96px;
  height: 42px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.recharge-close,
.customer-service-close,
.change-password-close,
.registration-review-close,
.admin-user-close {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码弹框关闭按钮复用现有弹窗风格 */
  /* 修改时间：2026-06-18 15:15；修改原因：注册申请审核弹框关闭按钮复用现有弹窗风格 */
  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,
.change-password-title,
.registration-review-title,
.admin-user-title {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码弹框标题复用现有弹窗风格 */
  /* 修改时间：2026-06-18 15:15；修改原因：注册申请审核弹框标题复用现有弹窗风格 */
  margin-bottom: 12px;
  text-align: center;
  color: #d8f7f8;
  font-size: 18px;
  font-weight: 800;
}

.recharge-status,
.recharge-tip,
.customer-service-note,
.change-password-message {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码反馈文本复用轻量提示风格 */
  color: #9ecace;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.change-password-submit {
  /* 修改时间：2026-06-17 17:45；修改原因：修改密码确认按钮保持弹框内主操作样式 */
  min-height: 42px;
}

/* 修改时间：2026-06-18 15:15；修改原因：管理员审核申请列表保持紧凑可读 */
.registration-review-list {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}

.registration-review-item {
  padding: 10px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  border-radius: 8px;
  background: rgba(10, 19, 20, 0.78);
}

.registration-review-name {
  margin-bottom: 6px;
  color: #d8f7f8;
  font-weight: 800;
}

.registration-review-line,
.registration-review-empty {
  color: #9ecace;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.registration-review-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.registration-review-actions button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

/* 修改时间：2026-06-18 16:28；修改原因：管理员用户信息管理列表需要展示账号、密码、到期和资产数量 */
.admin-user-panel {
  width: min(720px, 96vw);
}

.admin-user-list {
  display: grid;
  gap: 10px;
  max-height: min(66vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}

.admin-user-add-btn {
  /* 修改时间：2026-06-18 17:06；修改原因：新增用户入口移动到用户管理标题下方 */
  width: auto !important;
  min-width: 96px;
  min-height: 34px;
  display: block;
  margin: 0 auto 12px;
  padding: 7px 14px !important;
  font-size: 13px !important;
}

.admin-user-search {
  /* 修改时间：2026-06-18 18:02；修改原因：用户管理增加搜索用户输入框 */
  margin-bottom: 12px;
}

.admin-user-item {
  padding: 10px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  border-radius: 8px;
  background: rgba(10, 19, 20, 0.78);
}

.admin-user-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-user-name {
  color: #d8f7f8;
  font-weight: 800;
}

.admin-user-badge {
  padding: 2px 6px;
  border: 1px solid rgba(22, 217, 255, 0.24);
  border-radius: 6px;
  color: #9ecace;
  font-size: 12px;
}

.admin-user-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #9ecace;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.admin-user-line input[type="date"] {
  width: auto;
  min-width: 150px;
  padding: 6px 8px;
  font-size: 13px;
}

.admin-user-line input[type="text"] {
  width: min(240px, 100%);
  padding: 6px 8px;
  font-size: 13px;
}

.admin-user-mini-btn {
  width: auto !important;
  min-width: 48px;
  min-height: 28px;
  padding: 4px 8px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.admin-template-line {
  align-items: flex-start;
}

.admin-template-chip {
  /* 修改时间：2026-06-18 17:06；修改原因：用户管理展示各功能自定义模板数量并支持点击 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 4px 2px 0;
}

.admin-template-name,
.admin-template-count {
  width: auto !important;
  min-width: 0;
  min-height: 26px;
  padding: 3px 7px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.admin-template-name {
  color: #cfecee !important;
  background: rgba(10, 19, 20, 0.78) !important;
  border-color: rgba(22, 217, 255, 0.2) !important;
}

.admin-template-count {
  color: #021113 !important;
  background: linear-gradient(135deg, #16d9ff 0%, #45f29a 100%) !important;
}

.admin-ip-line {
  align-items: flex-start;
}

.admin-ip-chip {
  /* 修改时间：2026-06-18 18:02；修改原因：用户管理展示历史IP和基础地址说明 */
  display: inline-flex;
  margin: 2px 4px 2px 0;
  padding: 2px 6px;
  border: 1px solid rgba(22, 217, 255, 0.18);
  border-radius: 6px;
  color: #cfecee;
  background: rgba(3, 9, 10, 0.52);
  font-size: 12px;
}

.admin-run-history-panel {
  /* 修改时间：2026-06-19 10:18；修改原因：管理员查看用户AI运行历史记录弹框 */
  max-width: 560px;
}

.admin-run-history-list {
  display: grid;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
}

.admin-run-history-item {
  padding: 10px;
  border: 1px solid rgba(22, 217, 255, 0.16);
  border-radius: 6px;
  background: rgba(3, 9, 10, 0.5);
}

.admin-run-history-address {
  color: #d8f7f8;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}

.admin-run-history-line {
  color: #a8c6c9;
  font-size: 12px;
  line-height: 1.7;
  word-break: break-all;
}

.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;
}

/* 修改时间：2026-06-16 15:27；修改原因：PC端Native扫码支付二维码在充值弹框内居中展示 */
.recharge-native-pay {
  margin: 12px 0;
  text-align: center;
}

.recharge-native-qr {
  width: min(220px, 62vw);
  height: min(220px, 62vw);
  display: block;
  margin: 0 auto 10px;
  padding: 10px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(22, 217, 255, 0.18);
}

.recharge-native-text {
  color: #d8f7f8;
  font-size: 13px;
  font-weight: 700;
}

.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,
select {
  /* 修改时间：2026-06-07 10:35；修改原因：PC端输入框背景统一为和手机端一致的深色样式 */
  /* 修改时间：2026-06-18 16:28；修改原因：地区下拉选项与输入框统一视觉样式 */
  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,
select: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,
#admin-review-applications,
#admin-user-manage,
button[style*="#dc3545"],
button[style*="#ff4d4f"] {
  /* 修改时间：2026-06-07 07:28；修改原因：所有红色按钮统一改为功能按钮未高亮样式 */
  /* 修改时间：2026-06-18 15:15；修改原因：新增审核申请按钮纳入管理按钮统一样式 */
  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,
#admin-panel #admin-review-applications,
#admin-panel #admin-user-manage {
  /* 修改时间：2026-06-12 10:20；修改原因：新增管理员修改提示词按钮沿用未高亮居中样式 */
  /* 修改时间：2026-06-18 15:15；修改原因：审核申请按钮保持管理工具栏同款样式 */
  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,
#admin-panel #admin-review-applications:hover,
#admin-panel #admin-user-manage: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;
  /* 修改时间：2026-06-17 04:18；修改原因：中文版顶部功能按钮固定一行五个，不换行 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
  direction: ltr;
  box-sizing: border-box;
}

body[data-lang="en"] .tab-nav,
body[data-lang="ug"] .tab-nav {
  /* 修改时间：2026-06-17 04:18；修改原因：仅英文和维语顶部按钮允许换行，避免长文本重叠 */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.tab-btn {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  /* 修改时间：2026-06-17 03:58；修改原因：顶部功能按钮统一两行高度和字号，避免文生图单独突兀 */
  padding: 6px 4px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: normal;
  /* 修改时间：2026-06-17 03:42；修改原因：顶部功能按钮字号统一稍大 */
  font-size: 15px !important;
  overflow-wrap: break-word;
  word-break: normal;
  overflow: hidden;
  box-sizing: border-box;
}

#tab-text {
  /* 修改时间：2026-06-17 03:58；修改原因：保留文生图与其他顶部按钮一致的两行结构 */
  flex-direction: column;
  gap: 0;
}

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: 48px;
    padding: 6px 2px;
    font-size: 14px !important;
  }

  .tab-btn .mobile-break-title,
  .tab-btn .mobile-break-note {
    /* 修改时间：2026-06-17 03:58；修改原因：手机端顶部按钮全部保持两行同字号 */
    font-size: 16px !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;
  /* 修改时间：2026-06-17 17:45；修改原因：输入框底部提示文字调细，降低视觉重量 */
  font-weight: 300 !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 {
  /* 修改时间：2026-06-18 09:32；修改原因：到期提醒静态靠右显示，避免滚动覆盖VIP按钮 */
  position: absolute;
  /* 修改时间：2026-06-18 16:28；修改原因：喇叭消息上移并加高，避免覆盖会员按钮 */
  top: -8px;
  right: 0;
  width: min(360px, 58vw);
  height: 22px;
  min-width: 0;
  max-width: none;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: #ffe7a3;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.account-notice-icon {
  flex: 0 0 auto;
  /* 修改时间：2026-06-17 18:12；修改原因：到期提醒喇叭图标缩小 */
  /* 修改时间：2026-06-18 16:28；修改原因：喇叭消息位置上移后图标略加高保持清晰 */
  width: 19px;
  height: 18px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* 修改时间：2026-06-18 18:02；修改原因：短提醒隐藏喇叭图标，仅长提醒显示 */
  display: none;
}

.account-notice.account-notice-long .account-notice-icon {
  display: inline-flex;
}

.account-notice-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #9aa3aa;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-notice-icon::before,
.account-notice-icon::after {
  content: none;
}

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

.account-notice-track span {
  display: inline-block;
  max-width: 100%;
  padding-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  /* 修改时间：2026-06-18 09:32；修改原因：喇叭消息不再滚动穿过用户按钮 */
  animation: none;
}

.account-notice.account-notice-long .account-notice-track span {
  /* 修改时间：2026-06-18 18:02；修改原因：长提醒显示喇叭并滚动展示 */
  padding-left: 100%;
  animation: accountNoticeScroll 12s linear infinite;
  max-width: none;
  overflow: visible;
}

@keyframes accountNoticeScroll {
  from {
    transform: translateX(100%);
  }
  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;
  /* 修改时间：2026-06-17 01:58；修改原因：生成结果预览改为靠近顶部显示，并保留少量顶部间距 */
  align-items: flex-start;
  justify-content: center;
  /* 修改时间：2026-06-07 07:28；修改原因：生成结果预览上方留出空间，可看到蓝迪云 AI 品牌 */
  padding: 14px 18px 18px;
  background: rgba(0, 0, 0, 0.72);
  overflow-y: auto;
  /* 修改时间：2026-06-21 09:51；修改原因：手机资产列表启用原生惯性纵向滚动并隔离页面回弹 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -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: calc(100dvh - 32px);
  /* 修改时间：2026-06-17 01:58；修改原因：生成结果预览置顶但不贴边，底部仍能看到保存按钮 */
  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;
}

/* 修改时间：2026-06-21 10:08；修改原因：反推提示词结果以可阅读、可复制的文本块显示 */
.result-text-output {
  width: 100%;
  max-height: calc(100dvh - 170px);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px;
  color: var(--text-color);
  background: rgba(10, 19, 20, 0.9);
  border: 1px solid rgba(22, 217, 255, 0.24);
  border-radius: 6px;
  font: 14px/1.7 "Segoe UI", system-ui, sans-serif;
}

.reverse-video-limit {
  margin-top: 6px;
  color: var(--muted-color);
  font-size: 12px;
  font-weight: 300;
}

.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-17 01:58；修改原因：移动端预览靠近顶部但保留一点间距 */
    padding: 10px 8px 8px;
    overflow: auto;
  }

  .result-preview-panel {
    /* 修改时间：2026-06-17 01:58；修改原因：移动端预览面板顶部显示并保留保存按钮 */
    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;
    height: 100dvh;
    contain: layout paint;
  }

  .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;
}