/* ===== Component detail polish — kill color clashes on light UI ===== */

/* ---- Buttons ---- */
.generate-btn,
.task-join-btn,
.user-bar__btn,
.geo-submit-btn,
.edit-submit-btn,
.image-generate-btn,
.wallet-btn-primary,
.admin-btn--primary,
#loginSubmitBtn,
#regSubmitBtn,
#confirmUploadBtn,
#investSubmitBtn {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}

.generate-btn:hover,
.task-join-btn:hover,
.user-bar__btn:hover,
.admin-btn--primary:hover {
  background: var(--color-primary-hover) !important;
  color: #fff !important;
}

.generate-btn:active,
.task-join-btn:active,
.user-bar__btn:active {
  background: var(--color-primary-active) !important;
  transform: scale(0.985);
}

.generate-btn:disabled,
.task-join-btn:disabled,
#confirmUploadBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Secondary / ghost buttons */
.btn-small,
.result-action-btn,
.task-detail-btn,
.works-action-btn,
.geo-view-btn,
.extend-dir-btn,
.admin-btn--ghost,
.copy-btn,
.wallet-btn,
.wallet-btn-secondary {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.btn-small:hover,
.result-action-btn:hover,
.task-detail-btn:hover,
.works-action-btn:hover,
.geo-view-btn:hover,
.extend-dir-btn:hover,
.copy-btn:hover,
.wallet-btn:hover,
.wallet-btn-secondary:hover {
  border-color: rgba(22, 119, 255, 0.4) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
}

.extend-dir-btn.active,
.result-action-btn.is-active {
  border-color: rgba(22, 119, 255, 0.45) !important;
  background: var(--color-primary-soft-strong) !important;
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* Danger / soft text buttons */
.works-action-btn--danger,
.btn-danger,
.delete-btn {
  color: var(--color-danger) !important;
  border-color: rgba(240, 68, 56, 0.35) !important;
  background: rgba(240, 68, 56, 0.06) !important;
}

.works-action-btn--danger:hover,
.btn-danger:hover,
.delete-btn:hover {
  background: rgba(240, 68, 56, 0.12) !important;
  color: var(--color-danger) !important;
}

/* ---- Tabs / chips ---- */
.tab,
.mode-tabs .tab,
.works-tab,
.category-tabs .tab,
.geo-article-tab,
.market-tab {
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

.tab:hover,
.works-tab:hover,
.category-tabs .tab:hover,
.geo-article-tab:hover {
  color: var(--color-primary) !important;
  border-color: rgba(22, 119, 255, 0.35) !important;
  background: var(--color-primary-soft) !important;
}

.tab.active,
.mode-tabs .tab.active,
.works-tab.active,
.category-tabs .tab.active,
.geo-article-tab.active,
.market-tab.is-active {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* Soft selected (not solid fill) variants when needed */
.task-category,
.works-type-badge,
.balance-pill,
.task-pin-badge,
.task-tag,
.material-tag {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(22, 119, 255, 0.18) !important;
  border-radius: var(--radius-sm) !important;
}

.task-category--电商 { background: rgba(22, 119, 255, 0.08) !important; color: var(--color-primary) !important; }
.task-category--企业 { background: rgba(18, 183, 106, 0.1) !important; color: #0d9f5a !important; }
.task-category--短剧 { background: rgba(247, 144, 9, 0.1) !important; color: #c27400 !important; }
.task-category--开发 { background: rgba(22, 119, 255, 0.08) !important; color: var(--color-primary) !important; }

.task-reward {
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* Status badges — soft tint, readable on white */
.status-badge,
.status-succeeded,
.status-failed,
.status-running,
.status-queued,
.status-geo-running,
.status-geo-succeeded,
.status-geo-failed,
.status-works-succeeded,
.status-works-running,
.status-works-enhancing,
.status-works-submitted,
.status-works-failed,
.status-works-expired {
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
  border: 1px solid transparent;
}

.status-succeeded,
.status-geo-succeeded,
.status-works-succeeded {
  background: rgba(18, 183, 106, 0.12) !important;
  color: #0d9f5a !important;
  border-color: rgba(18, 183, 106, 0.25) !important;
}

.status-failed,
.status-geo-failed,
.status-works-failed,
.status-works-expired {
  background: rgba(240, 68, 56, 0.1) !important;
  color: #d92d20 !important;
  border-color: rgba(240, 68, 56, 0.25) !important;
}

.status-running,
.status-queued,
.status-geo-running,
.status-works-running,
.status-works-enhancing,
.status-works-submitted {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border-color: rgba(22, 119, 255, 0.25) !important;
}

/* ---- Forms ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.prompt-input,
.modal-content input,
.modal-content select,
.app-modal__content input,
.app-modal__content select {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  caret-color: var(--color-primary);
}

input::placeholder,
textarea::placeholder,
.prompt-input::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.prompt-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
  outline: none !important;
}

label,
.form-group label,
.upload-section label,
.tip,
.promptTip,
#promptTip,
#costTip,
.cost-tip {
  color: var(--color-text-secondary) !important;
}

#costTip,
.cost-tip {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* ---- Surfaces / small panels ---- */
.settings-panel,
.preview-panel,
.image-settings,
.image-preview-box,
.edit-panel,
.task-card,
.works-item,
.feature-card,
.wallet-panel,
.wallet-card,
.wallet-section,
.wallet-balance-item,
.wallet-stat-card,
.tx-card,
.material-card,
.geo-card,
.mention-dropdown {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm);
}

.wallet-balance-item strong,
.wallet-stat-card strong,
.wallet-balance-label,
.wallet-stat-label,
.wallet-user-label {
  color: var(--color-text) !important;
}

.wallet-balance-label,
.wallet-stat-label {
  color: var(--color-text-muted) !important;
}

.upload-box,
.modal-upload-box {
  border: 1.5px dashed var(--color-border-strong) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
}

.upload-box:hover,
.modal-upload-box:hover {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* Mentions / dropdowns */
.mention-dropdown,
.mention-item {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.mention-item:hover,
.mention-item.active {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* Modals */
.modal-content,
.app-modal__content,
.task-detail-modal-content {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.modal-content h3,
.app-modal__content h3,
.task-detail-modal-content h3 {
  color: var(--color-text) !important;
}

.modal-tip,
.app-modal__sub,
.task-detail-body {
  color: var(--color-text-secondary) !important;
}

.task-detail-close,
.app-modal__close,
.geo-detail-close {
  color: var(--color-text-muted) !important;
  background: var(--color-surface-3) !important;
  border-radius: var(--radius-sm);
}

.task-detail-close:hover,
.app-modal__close:hover,
.geo-detail-close:hover {
  color: var(--color-text) !important;
}

/* Guide / agent mock UI on light */
.agent-pc-bar {
  background: var(--color-surface-2) !important;
}

.agent-pc-title,
.agent-pc-prompt,
.agent-pc-result {
  color: var(--color-text-secondary) !important;
}

.agent-pc-prompt {
  background: var(--color-primary-soft) !important;
  border: 1px solid rgba(22, 119, 255, 0.2) !important;
}

.agent-pc-result {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
}

.guide-feature-item,
.guide-step,
.guide-cta {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

.guide-feature-icon,
.guide-feature-icon--violet,
.guide-feature-icon--cyan,
.guide-feature-icon--indigo,
.guide-feature-icon--red,
.guide-feature-icon--green,
.guide-feature-icon--amber {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* Video black is intentional; keep frames only */
.source-video-preview video,
.result-video,
.edit-result-video,
.works-item-cover {
  background: #0b1220;
}

/* Loading */
.loading-mask {
  background: rgba(245, 248, 252, 0.82) !important;
  color: var(--color-text) !important;
}

.spinner {
  border: 3px solid var(--color-border-strong) !important;
  border-top-color: var(--color-primary) !important;
}

/* Wallet switch / level */
.wallet-level-0 {
  background: var(--color-surface-3) !important;
  color: var(--color-text-secondary) !important;
}

.wallet-level-1,
.wallet-level-2 {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(22, 119, 255, 0.22);
}

/* History / list rows */
.history-item,
.geo-history-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Progress bars */
.upload-progress,
.progress-bar {
  background: var(--color-surface-3);
}

.progress-bar,
.upload-progress .progress-bar {
  background: var(--color-primary) !important;
}

/* Toast stays dark for contrast */
.toast,
.app-toast {
  background: #1f2937 !important;
  color: #fff !important;
}

/* Pinned task soft blue, not warm clash */
.task-card--pinned {
  border-color: rgba(22, 119, 255, 0.4) !important;
  background: linear-gradient(165deg, #f0f7ff 0%, #ffffff 48%) !important;
}

.task-title,
.works-item-title,
.task-desc,
.works-item-sub,
.works-item-meta,
.task-meta {
  color: var(--color-text);
}

.task-desc,
.works-item-sub,
.works-item-meta,
.task-meta {
  color: var(--color-text-secondary) !important;
}

/* Mobile press feedback */
@media (max-width: 639px) {
  .btn-small:active,
  .result-action-btn:active,
  .works-action-btn:active,
  .task-detail-btn:active {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
  }
}


/* ===== Layout alignment & control polish ===== */

/* Hero + subnav must span full width inside any dual-column .app-main grid */
.app-main > .page-hero,
.app-main > .app-subnav {
  grid-column: 1 / -1;
  min-width: 0;
}

.app-main > .page-hero {
  overflow: visible;
  padding-top: 4px;
  margin-bottom: var(--space-4, 16px);
}

.app-main > .app-subnav {
  margin-bottom: var(--space-5, 20px);
}

.page-hero__title {
  line-height: 1.4 !important;
  overflow: visible !important;
  padding-block: 2px;
}

.app-header,
.app-header__inner {
  overflow: visible;
}

.user-chip {
  gap: 10px;
  overflow: visible;
  line-height: 1.3;
}

.username {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

/* Create / image: preview left, settings right */
.page-create .app-main.main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) !important;
  gap: 20px !important;
  align-items: start;
}

.page-create .preview-panel {
  order: 0;
  min-width: 0;
}

.page-create .settings-panel {
  order: 1;
  max-height: calc(100vh - 140px);
}

.page-image .image-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 400px) !important;
  gap: 20px !important;
  align-items: start;
}

.page-image .image-preview-panel { order: 0; min-width: 0; }
.page-image .image-settings-panel { order: 1; }

/* GEO: settings left, preview right (DOM has preview first) */
.page-geo .geo-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start;
}

.page-geo .geo-settings-panel {
  order: 1;
  min-width: 0;
}

.page-geo .geo-preview-panel {
  order: 2;
  min-width: 0;
  top: calc(var(--header-height, 56px) + 16px);
}

/* Settings panel: consistent form rhythm */
.settings-panel .form-group {
  margin-bottom: 16px;
}

.settings-panel .form-group label,
.settings-panel .upload-section > label {
  display: block;
  margin-bottom: 8px;
}

.settings-panel select,
.page-create #modelSelect {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px !important;
  box-sizing: border-box;
}

/* Mode tabs: even padding, no cramped active label */
.mode-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch;
  margin-bottom: 20px !important;
  padding-bottom: 16px;
}

.mode-tabs .tab,
.page-create .tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 4.5em;
  min-height: 36px;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  text-align: center !important;
  line-height: 1.2 !important;
  border: 1px solid var(--color-border) !important;
  box-sizing: border-box;
}

.mode-tabs .tab.active,
.page-create .tab.active {
  padding: 8px 14px !important;
  border-color: var(--color-primary) !important;
}

.category-tabs .tab,
.mode-tabs .tab {
  color: var(--color-text-secondary) !important;
}

.mode-tabs .tab.active {
  color: #fff !important;
}

/* Works action row: never vertical Chinese wrap */
.works-item-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center;
  margin-top: 4px;
}

.works-item-actions .works-action-btn,
.works-item-actions .works-delete-btn,
.works-item-actions a.works-action-btn {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  width: auto !important;
  min-width: max-content;
  max-width: none !important;
  padding: 7px 12px !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.3 !important;
  text-align: center;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 34px;
  box-sizing: border-box;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.works-item-actions .works-action-btn:hover,
.works-item-actions a.works-action-btn:hover {
  color: var(--color-primary) !important;
  border-color: rgba(22, 119, 255, 0.4) !important;
  background: var(--color-primary-soft) !important;
}

.works-item-actions .works-action-btn--download {
  background: rgba(22, 119, 255, 0.1) !important;
  border-color: rgba(22, 119, 255, 0.4) !important;
  color: var(--color-primary) !important;
}

.works-item-actions .works-delete-btn {
  margin-left: auto;
  color: var(--color-text-muted) !important;
}

.works-item-actions .works-delete-btn:hover {
  border-color: rgba(240, 68, 56, 0.45) !important;
  color: var(--color-danger) !important;
  background: rgba(240, 68, 56, 0.06) !important;
}

.works-item-meta {
  margin-bottom: 12px !important;
  color: var(--color-text-muted) !important;
}

.works-type-badge {
  background: rgba(15, 23, 42, 0.72) !important;
  color: #fff !important;
  border: none !important;
}

.works-type-badge--count {
  background: rgba(22, 119, 255, 0.92) !important;
  color: #fff !important;
}

/* Give cards enough room for action chips */
.works-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

/* Wallet level badge: blue enterprise only */
.wallet-level-badge {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.wallet-level-0 {
  background: var(--color-surface-3) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border);
}

.wallet-level-1,
.wallet-level-2 {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(22, 119, 255, 0.22) !important;
}

.wallet-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}

.wallet-user-value {
  color: var(--color-text);
  font-weight: 500;
}

/* Misc contrast leftovers */
.geo-article-tab {
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
}

.geo-article-tab.active,
.geo-article-tab:hover {
  color: var(--color-primary) !important;
}

.geo-article-tab.active {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.ref-file-list,
.ref-img-list .ref-item,
.source-video-meta {
  color: var(--color-text-secondary) !important;
}

.preview-placeholder,
.preview-placeholder p {
  color: var(--color-text-muted) !important;
}

.history-item,
.material-list-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
}

select {
  color-scheme: light;
}

.switch-item,
.switch-item span {
  color: var(--color-text-secondary) !important;
}

@media (max-width: 1023px) {
  .page-create .app-main.main,
  .page-image .image-main,
  .page-geo .geo-main {
    grid-template-columns: 1fr !important;
  }

  .page-create .settings-panel,
  .page-image .image-settings-panel {
    order: -1;
    max-height: none;
  }

  .page-create .preview-panel,
  .page-image .image-preview-panel {
    order: 0;
  }

  .page-geo .geo-settings-panel {
    order: 1;
  }

  .page-geo .geo-preview-panel {
    order: 2;
    position: static;
  }
}

@media (max-width: 639px) {
  .works-item-actions .works-delete-btn {
    margin-left: 0;
    flex: 1 1 100% !important;
  }

  .works-item-actions .works-action-btn,
  .works-item-actions a.works-action-btn {
    flex: 0 1 auto !important;
    min-width: 4.25em;
  }

  .mode-tabs .tab,
  .page-create .tab {
    min-width: 0;
    flex: 1 1 auto !important;
  }
}

/* Homepage feature icons — enamel tile + stroke SVG */
.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1677ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(155deg, #eaf3ff 0%, #d4e7ff 100%);
  border: 1px solid rgba(22, 119, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 2px rgba(22, 119, 255, 0.08);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.feature-card--link:hover .feature-icon {
  color: #fff;
  background: linear-gradient(160deg, #3d8eff 0%, #1677ff 58%, #0958d9 100%);
  border-color: rgba(9, 88, 217, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 18px rgba(22, 119, 255, 0.28);
  transform: translateY(-1px);
}

.feature-card--soon .feature-icon {
  color: #8aa0b8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(155deg, #f3f6fa 0%, #e6edf5 100%);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.feature-arrow {
  width: 18px;
  height: 18px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), transform var(--transition);
}

.feature-arrow svg {
  width: 16px;
  height: 16px;
}

.feature-card--link:hover .feature-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

@media (max-width: 639px) {
  .feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .feature-icon svg {
    width: 20px;
    height: 20px;
  }
}