/* 小豆包电商 - Cyber Minimal Workspace */
:root {
  --page-top: #0a0f1d;
  --page-bottom: #090e1a;
  --surface: #0e1321;
  --surface-raised: #121827;
  --panel: #161b2a;
  --panel-2: #1a1f2e;
  --panel-3: #202638;
  --input-bg: #0a0f1d;

  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(0, 242, 254, 0.35);

  --text: #dee2f6;
  --text-strong: #f4f7ff;
  --muted: #8a9bb0;
  --muted-dark: #59677b;

  --accent: #00f2fe;
  --accent-2: #7b2ffc;
  --accent-blue: #00b4d8;
  --accent-soft: rgba(0, 242, 254, 0.1);

  --success: #00d9a3;
  --warning: #f5b942;
  --danger: #ff4d6d;

  --primary-gradient: linear-gradient(135deg, #00b4d8, #7b2ffc);
  --primary-shadow: 0 8px 22px rgba(0, 180, 216, 0.18);
  --panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
}

* {
  letter-spacing: 0;
  scrollbar-width: thin;
  scrollbar-color: #354057 transparent;
}

html {
  color-scheme: dark;
  background: var(--page-bottom);
}

body {
  min-height: 100vh;
  color: var(--text);
  background: var(--page-bottom) !important;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 删除旧主题漂浮光球 */
.animated-bg {
  display: none !important;
}

/* 主应用 */
.app-container {
  width: 100%;
  max-width: 580px;
  min-height: 100vh;
  color: var(--text);
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: none !important;
}

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  padding: 14px 18px !important;
  background: rgba(14, 19, 33, 0.96);
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(16px);
}

.brand {
  color: var(--text-strong) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

.brand svg {
  filter: drop-shadow(0 0 7px rgba(0, 242, 254, 0.28));
}

.content {
  padding: 14px !important;
}

/* 通用卡片 */
.card,
.video-queue-card,
.queue-task-card,
.queue-completed-card {
  color: var(--text);
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.11) !important;
}

.card-title,
.queue-title,
.user-title,
.asset-title {
  color: var(--text-strong) !important;
  font-weight: 700 !important;
}

/* 顶部工具 */
.header-asset-btn,
.credit-badge,
.user-icon-btn {
  color: var(--muted) !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  text-decoration: none;
}

.header-asset-btn {
  min-height: 36px;
  padding: 0 12px !important;
  border-radius: var(--radius-md) !important;
}

.credit-badge {
  min-width: 66px;
  height: 36px;
  border-radius: var(--radius-md) !important;
}

.user-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md) !important;
}

.header-asset-btn:hover,
.credit-badge:hover,
.user-icon-btn:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
}

/* 统一图标 */
.ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-icon-lg {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
}

/* 图片/视频模式 */
.mode-row {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  background: var(--input-bg) !important;
}

.mode-btn {
  min-height: 40px;
  gap: 7px;
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.mode-btn.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: rgba(0, 242, 254, 0.26) !important;
}

/* 输入控件 */
input,
textarea,
select,
.selling-textarea,
.source-reference-input,
.asset-search-wrap input {
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border: 1px solid #263148 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #465369 !important;
}

input:focus,
textarea:focus,
select:focus,
.selling-textarea:focus {
  border-color: rgba(0, 242, 254, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.07) !important;
}

.select-wrap {
  border-radius: var(--radius-md) !important;
}

.count-label,
.select-label,
.upload-hint,
.cost-hint,
.completed-meta,
.queue-task-meta {
  color: var(--muted) !important;
}

/* 横竖屏、比例等分段控件 */
.orientation-toggle,
.ratio-row {
  padding: 3px !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.orientation-option,
.ratio-btn,
.source-option {
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
}

.orientation-option.active,
.ratio-btn.active,
.source-option.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: rgba(0, 242, 254, 0.25) !important;
  box-shadow: none !important;
}

/* 滑块 */
input[type="range"] {
  border: 0 !important;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--progress, 0%),
    #29334a var(--progress, 0%),
    #29334a 100%
  ) !important;
}

input[type="range"]::-webkit-slider-thumb {
  background: var(--accent) !important;
  border: 2px solid #e0fdff !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.45) !important;
}

/* 主操作按钮 */
.btn-generate-script,
.btn-generate-video,
.btn-generate-img,
.btn-primary,
.asset-upload-btn {
  color: #fff !important;
  background: var(--primary-gradient) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--primary-shadow) !important;
  font-weight: 700 !important;
}

.btn-generate-script:hover,
.btn-generate-video:hover,
.btn-generate-img:hover,
.btn-primary:hover,
.asset-upload-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

button:disabled,
.btn-generate-video:disabled,
.btn-generate-img:disabled {
  color: #657289 !important;
  background: #202738 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

/* 次要按钮 */
.btn-import-script,
.clear-chat-btn,
.select-all-btn,
.ai-write-btn,
.queue-icon-btn,
.asset-action-btn,
.modal-btn,
.secondary-btn {
  color: var(--muted) !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.btn-import-script:hover,
.clear-chat-btn:hover,
.select-all-btn:hover,
.ai-write-btn:hover,
.queue-icon-btn:hover,
.asset-action-btn:hover,
.modal-btn:hover,
.secondary-btn:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
}

.delete-selected-btn,
.asset-del-btn,
.asset-bottom-del,
.task-trash-btn {
  color: var(--danger) !important;
  background: rgba(255, 77, 109, 0.07) !important;
  border: 1px solid rgba(255, 77, 109, 0.18) !important;
  border-radius: var(--radius-sm) !important;
}

.delete-selected-btn:hover,
.asset-del-btn:hover,
.asset-bottom-del:hover,
.task-trash-btn:hover {
  color: #fff !important;
  background: rgba(255, 77, 109, 0.2) !important;
  border-color: rgba(255, 77, 109, 0.42) !important;
}

/* Agent 聊天 */
.agent-icon {
  color: var(--accent);
}

.chat-box,
.chat-box-content {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.msg.ai {
  color: #b8c5d8 !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.msg.user {
  color: #e0fdff !important;
  background: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.2) !important;
  border-radius: var(--radius-md) !important;
}

/* 上传区 */
.upload-card {
  background: var(--panel) !important;
}

.upload-box-wrap,
.upload-dashed {
  border-radius: var(--radius-md) !important;
}

.upload-dashed {
  color: var(--muted) !important;
  background: var(--input-bg) !important;
  border: 1.5px dashed #354159 !important;
}

.upload-dashed:hover {
  color: var(--accent) !important;
  background: rgba(0, 242, 254, 0.04) !important;
  border-color: rgba(0, 242, 254, 0.5) !important;
}

.upload-plus {
  color: var(--accent) !important;
}

.upload-remove,
.thumb-remove,
.close-user-modal,
.asset-close-btn {
  color: #fff !important;
  background: rgba(7, 11, 20, 0.82) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}

/* 队列 */
.video-queue-card {
  overflow: hidden;
}

.queue-head,
.completed-header {
  border-color: var(--border) !important;
}

.queue-title-icon,
.queue-check-dot {
  color: var(--accent) !important;
}

.queue-empty-pill {
  color: var(--muted) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.queue-spinner,
.task-live-spinner {
  border-color: rgba(0, 242, 254, 0.2) !important;
  border-top-color: var(--accent) !important;
}

.progress-mini,
.queue-progress {
  background: #252e42 !important;
}

.progress-mini-fill,
.queue-progress > span {
  background: var(--primary-gradient) !important;
}

/* 模态框 */
.modal,
.user-modal,
.asset-modal {
  background: rgba(3, 7, 14, 0.78) !important;
  backdrop-filter: blur(8px) !important;
}

.modal-card,
.user-modal-card,
.points-modal-card,
.script-modal-card,
.asset-modal-inner {
  color: var(--text) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--panel-shadow) !important;
}

.menu-item-card,
.profile-row,
.points-row {
  color: var(--text) !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.menu-item-card:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
}

/* 资产库 */
.asset-header,
.asset-tabs,
.asset-toolbar,
.asset-bottom-bar {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

.asset-tabs {
  gap: 4px !important;
}

.asset-tab {
  color: var(--muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}

.asset-tab.active {
  color: var(--accent) !important;
  background: transparent !important;
  border-bottom-color: var(--accent) !important;
}

.asset-grid-wrap {
  background: var(--surface) !important;
}

.asset-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.asset-card.selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.12) !important;
}

.asset-card-thumb {
  background: var(--input-bg) !important;
}

.asset-card-check.checked {
  color: #071018 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* 登录页 */
body > .card {
  width: 100%;
  max-width: 420px;
  padding: 34px 30px;
  background: var(--surface-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--panel-shadow) !important;
  backdrop-filter: none !important;
}

.logo {
  color: transparent !important;
  background: var(--primary-gradient) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.sub,
.field label {
  color: var(--muted) !important;
}

.mode-tabs {
  padding: 4px !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}

.mode-tab {
  color: var(--muted) !important;
  border-radius: var(--radius-sm) !important;
}

.mode-tab.active {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.captcha-code {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid rgba(0, 242, 254, 0.25) !important;
  border-radius: var(--radius-md) !important;
}

.link-btn {
  color: var(--accent) !important;
}

/* 状态颜色 */
.msg.error,
.task-error {
  color: var(--danger) !important;
}

.msg.success {
  color: var(--success) !important;
}

::selection {
  color: #061018;
  background: var(--accent);
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #354057;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #46536d;
}

@media (max-width: 480px) {
  .header {
    min-height: 58px;
    padding: 11px 12px !important;
  }

  .brand {
    min-width: 0;
    font-size: 14px !important;
  }

  .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-right {
    gap: 6px !important;
  }

  .header-asset-btn {
    width: 36px;
    padding: 0 !important;
    justify-content: center;
  }

  .header-asset-btn .button-label {
    display: none;
  }

  .credit-badge {
    min-width: 54px;
    padding: 0 8px !important;
  }

  .content {
    padding: 10px !important;
  }

  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .asset-toolbar {
    flex-wrap: wrap;
  }

  .asset-search-wrap {
    min-width: calc(100% - 88px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 视频/图片模式切换：压缩外框上下留白 */
.mode-card {
  padding: 6px 22px !important;
}

.mode-card .mode-row {
  margin: 0 !important;
}

.mode-card .mode-btn,
.header-asset-btn {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.mode-card .mode-btn {
  justify-content: center;
}

.mode-card .ui-icon,
.header-asset-btn .ui-icon {
  display: block;
}

/* 剧本、视频、资产库：图标与文字同一水平中线 */
#generateScriptBtn,
#importScriptBtn,
#startGenerateBtn,
#headerAssetBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

#generateScriptBtn .ui-icon,
#importScriptBtn .ui-icon,
#startGenerateBtn .ui-icon,
#headerAssetBtn .ui-icon {
  display: block;
  flex: 0 0 17px;
}

#generateScriptBtn .button-label,
#importScriptBtn .button-label,
#startGenerateBtn .button-label,
#headerAssetBtn .button-label {
  display: block;
  line-height: 1;
}



/* 首页生成与批量操作按钮：唯一主题来源 */
.btn-generate-script,
.btn-generate-video,
.btn-generate-img,
.btn-import-script,
#generateScriptBtn:not(:disabled),
#importScriptBtn:not(:disabled),
#startGenerateBtn:not(:disabled),
#imgGenerateBtn:not(:disabled),
#downloadCompletedBtn,
#selectAllCompletedBtn,
#transferCompletedBtn,
#deleteCompletedBtn,
#imgDownloadAllBtn,
#imgSelectAllBtn,
#imgTransferBtn,
#imgDeleteBtn,
#selectAllQueueBtn,
#deleteQueueBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: var(--primary-gradient) !important;
  border: 1px solid rgba(0, 212, 232, 0.42) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.btn-generate-script:hover:not(:disabled),
.btn-generate-video:hover:not(:disabled),
.btn-generate-img:hover:not(:disabled),
.btn-import-script:hover:not(:disabled),
#generateScriptBtn:hover:not(:disabled),
#importScriptBtn:hover:not(:disabled),
#startGenerateBtn:hover:not(:disabled),
#imgGenerateBtn:hover:not(:disabled),
#downloadCompletedBtn:hover:not(:disabled),
#selectAllCompletedBtn:hover:not(:disabled),
#transferCompletedBtn:hover:not(:disabled),
#deleteCompletedBtn:hover:not(:disabled),
#imgDownloadAllBtn:hover:not(:disabled),
#imgSelectAllBtn:hover:not(:disabled),
#imgTransferBtn:hover:not(:disabled),
#imgDeleteBtn:hover:not(:disabled),
#selectAllQueueBtn:hover:not(:disabled),
#deleteQueueBtn:hover:not(:disabled) {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
}

.btn-generate-script:disabled:not(.is-generating),
.btn-generate-video:disabled,
.btn-generate-img:disabled,
#generateScriptBtn:disabled:not(.is-generating),
#startGenerateBtn:disabled,
#imgGenerateBtn:disabled {
  color: #657289 !important;
  background: #202738 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

#generateScriptBtn.is-generating:disabled {
  color: #ffffff !important;
  background: var(--primary-gradient) !important;
  border-color: rgba(0, 212, 232, 0.42) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: wait !important;
}