/**
 * File: client/css/chuangzhi-star-theme.css
 * 星创首页视觉体系覆盖层
 * 作用: 在不改短剧工作台业务结构的前提下，统一 /chuangzhi.html 的 UI 风格。
 */

body.chuangzhi-page {
  --primary-color: #6a78ff;
  --primary-hover: #5868f4;
  --primary-light: #8d6bff;
  --secondary-color: #8a92b5;
  --success-color: #56c58c;
  --warning-color: #f59e0b;
  --danger-color: #f05c78;
  --bg-primary: #ffffff;
  --bg-secondary: #f6f7ff;
  --bg-tertiary: #eef1ff;
  --text-primary: #202542;
  --text-secondary: #5f678a;
  --text-tertiary: #8a92b5;
  --border-color: rgba(103, 116, 221, 0.18);
  --border-light: rgba(103, 116, 221, 0.12);
  --shadow-sm: 0 10px 28px rgba(71, 83, 180, 0.08);
  --shadow-md: 0 18px 48px rgba(71, 83, 180, 0.14);
  --shadow-lg: 0 26px 70px rgba(42, 48, 110, 0.18);
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 12% 2%, rgba(141, 107, 255, 0.16), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(106, 120, 255, 0.16), transparent 30%),
    linear-gradient(180deg, #f7f8ff 0%, #eef2ff 42%, #f7f8ff 100%);
}

.chuangzhi-page .main-container {
  background: transparent;
}

.chuangzhi-page .header {
  min-height: 72px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(103, 116, 221, 0.1);
  box-shadow: 0 6px 22px rgba(42, 48, 110, 0.06);
  backdrop-filter: blur(18px);
}

.chuangzhi-page .header-content {
  min-height: 72px;
  padding: 0 60px;
}

.chuangzhi-page .logo {
  gap: 12px;
}

.chuangzhi-page .site-brand-logo-divider {
  width: 1px;
  height: 40px;
  flex: 0 0 auto;
  background: rgba(18, 25, 51, 0.42);
}

.chuangzhi-page .site-brand-left-logo-img {
  max-width: 190px;
}

.chuangzhi-page .site-brand-fallback-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, #6072ff, #8a6cff);
  box-shadow: 0 12px 28px rgba(103, 116, 221, 0.22);
  font-size: 18px;
  font-weight: 800;
}

.chuangzhi-page .logo h1 {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.chuangzhi-page .nav {
  gap: 12px;
}

.chuangzhi-page .nav-btn,
.chuangzhi-page .user-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 18px;
  border-radius: 10px;
  border: 0;
  color: #51608d;
  background: #f1f3ff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.chuangzhi-page .nav-btn:hover,
.chuangzhi-page .user-dropdown-btn:hover {
  background: #e9edff;
  color: var(--primary-color);
}

.chuangzhi-page .nav-btn-primary,
.chuangzhi-page .nav-btn-save,
.chuangzhi-page .btn-primary,
.chuangzhi-page .btn-danger,
.chuangzhi-page .btn-success,
.chuangzhi-page .btn-warning,
.chuangzhi-page .recharge-submit-btn,
.chuangzhi-page .btn-create-outline,
.chuangzhi-page .cover-generate-actions .btn-lg,
.chuangzhi-page .character-card-prompt .regenerate-btn,
.chuangzhi-page .scene-regenerate-btn,
.chuangzhi-page .prop-regenerate-btn,
.chuangzhi-page .video-single-gen-btn,
.chuangzhi-page .lipsync-single-btn,
.chuangzhi-page .video-audio-single-btn,
.chuangzhi-page .editor-btn-primary,
.chuangzhi-page .editor-btn-success {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%);
  box-shadow: 0 12px 28px rgba(103, 116, 221, 0.22);
}

.chuangzhi-page .nav-btn-primary:hover,
.chuangzhi-page .nav-btn-save:hover,
.chuangzhi-page .btn-primary:hover,
.chuangzhi-page .btn-danger:hover,
.chuangzhi-page .btn-success:hover,
.chuangzhi-page .btn-warning:hover,
.chuangzhi-page .recharge-submit-btn:hover,
.chuangzhi-page .btn-create-outline:hover,
.chuangzhi-page .character-card-prompt .regenerate-btn:hover,
.chuangzhi-page .scene-regenerate-btn:hover,
.chuangzhi-page .prop-regenerate-btn:hover,
.chuangzhi-page .video-single-gen-btn:hover,
.chuangzhi-page .lipsync-single-btn:hover,
.chuangzhi-page .video-audio-single-btn:hover,
.chuangzhi-page .editor-btn-primary:hover,
.chuangzhi-page .editor-btn-success:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.chuangzhi-page .app-body {
  min-height: calc(100vh - 72px);
  padding: 24px 28px 30px;
  gap: 24px;
}

.chuangzhi-page .workflow-steps {
  top: 96px;
  width: 230px;
  min-width: 230px;
  height: calc(100vh - 120px);
  padding: 18px;
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px);
}

.chuangzhi-page .step {
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.chuangzhi-page .step:hover {
  background: #f1f3ff;
  border-color: rgba(0, 168, 254, 0.24);
}

.chuangzhi-page .step-number {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: #7480bb;
  background: #eef1ff;
  font-weight: 900;
}

.chuangzhi-page .step-label {
  color: #5e678e;
  font-size: 14px;
  font-weight: 800;
}

.chuangzhi-page .step.active {
  border-color: transparent;
  background: #00A8FE;
  box-shadow: 0 16px 32px rgba(0, 168, 254, 0.22);
}

.chuangzhi-page .step.active .step-number {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.chuangzhi-page .step.active .step-label {
  color: #fff;
}

.chuangzhi-page .step.completed:not(.active) .step-number {
  color: #fff;
  background: #00A8FE;
}

.chuangzhi-page .content {
  padding: 0;
  background: transparent;
}

.chuangzhi-page .step-panel {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.chuangzhi-page .panel-title,
.chuangzhi-page .section-title,
.chuangzhi-page .gallery-title,
.chuangzhi-page .story-title {
  color: var(--text-primary);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.chuangzhi-page .panel-title {
  font-size: 28px;
}

.chuangzhi-page .creation-section,
.chuangzhi-page .gallery-section,
.chuangzhi-page .story-display,
.chuangzhi-page .story-content,
.chuangzhi-page .story-display-empty,
.chuangzhi-page .episode-selector-container,
.chuangzhi-page .composition-preview,
.chuangzhi-page .composition-options,
.chuangzhi-page .card,
.chuangzhi-page .character-item,
.chuangzhi-page .episode-item,
.chuangzhi-page .storyboard-item,
.chuangzhi-page .video-clip-item,
.chuangzhi-page .character-card,
.chuangzhi-page .scene-card,
.chuangzhi-page .video-audio-card,
.chuangzhi-page .lipsync-card,
.chuangzhi-page .cover-creation-container,
.chuangzhi-page .voice-card,
.chuangzhi-page .bgm-card {
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.chuangzhi-page .creation-section {
  max-width: 960px;
  padding: 28px;
  margin-bottom: 28px;
}

.chuangzhi-page .gallery-section {
  padding: 30px;
}

.chuangzhi-page .gallery-title {
  font-size: 26px;
}

.chuangzhi-page .drama-label,
.chuangzhi-page .advanced-setting-label,
.chuangzhi-page .form-group label,
.chuangzhi-page .episode-selector-header label {
  color: #30385f;
  font-weight: 800;
}

.chuangzhi-page input,
.chuangzhi-page textarea,
.chuangzhi-page select,
.chuangzhi-page .drama-input,
.chuangzhi-page .drama-textarea,
.chuangzhi-page .advanced-setting-input,
.chuangzhi-page .episode-select,
.chuangzhi-page .story-editor-textarea,
.chuangzhi-page .catalog-editor-textarea,
.chuangzhi-page .find-replace-input,
.chuangzhi-page .video-prompt-input,
.chuangzhi-page .cover-prompt-input,
.chuangzhi-page .cover-text-input,
.chuangzhi-page .property-input,
.chuangzhi-page .property-select,
.chuangzhi-page .prompt-input,
.chuangzhi-page .scene-prompt-input,
.chuangzhi-page .prop-prompt-input,
.chuangzhi-page .voice-select,
.chuangzhi-page .emotion-select {
  color: var(--text-primary);
  border: 1px solid rgba(103, 116, 221, 0.16);
  border-radius: 14px;
  background-color: rgba(248, 249, 255, 0.95);
}

.chuangzhi-page input:focus,
.chuangzhi-page textarea:focus,
.chuangzhi-page select:focus,
.chuangzhi-page .drama-input:focus,
.chuangzhi-page .drama-textarea:focus,
.chuangzhi-page .advanced-setting-input:focus,
.chuangzhi-page .episode-select:focus,
.chuangzhi-page .story-editor-textarea:focus,
.chuangzhi-page .catalog-editor-textarea:focus,
.chuangzhi-page .find-replace-input:focus,
.chuangzhi-page .video-prompt-input:focus,
.chuangzhi-page .cover-prompt-input:focus,
.chuangzhi-page .cover-text-input:focus,
.chuangzhi-page .property-input:focus,
.chuangzhi-page .property-select:focus,
.chuangzhi-page .prompt-input:focus,
.chuangzhi-page .scene-prompt-input:focus,
.chuangzhi-page .prop-prompt-input:focus,
.chuangzhi-page .voice-select:focus,
.chuangzhi-page .emotion-select:focus {
  outline: none;
  border-color: rgba(106, 120, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(106, 120, 255, 0.12);
}

.chuangzhi-page .style-selector,
.chuangzhi-page .theme-selector {
  gap: 14px;
}

.chuangzhi-page .style-option,
.chuangzhi-page .theme-option,
.chuangzhi-page .ratio-btn,
.chuangzhi-page .size-btn,
.chuangzhi-page .aspect-btn,
.chuangzhi-page .model-select-btn {
  border: 1px solid rgba(103, 116, 221, 0.14);
  border-radius: 18px;
  background: #f5f7ff;
  box-shadow: none;
}

.chuangzhi-page .style-option:hover,
.chuangzhi-page .theme-option:hover,
.chuangzhi-page .ratio-btn:hover,
.chuangzhi-page .size-btn:hover,
.chuangzhi-page .aspect-btn:hover,
.chuangzhi-page .model-select-btn:hover {
  border-color: rgba(106, 120, 255, 0.42);
  box-shadow: 0 14px 34px rgba(71, 83, 180, 0.1);
}

.chuangzhi-page .style-option.selected,
.chuangzhi-page .theme-option.selected,
.chuangzhi-page .ratio-btn.active,
.chuangzhi-page .size-btn.active,
.chuangzhi-page .aspect-btn.active,
.chuangzhi-page .model-select-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%);
  box-shadow: 0 16px 32px rgba(103, 116, 221, 0.2);
}

.chuangzhi-page .advanced-settings-section {
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 18px;
  background: #f7f8ff;
}

.chuangzhi-page .advanced-settings-header:hover {
  background: #eef1ff;
}

.chuangzhi-page .advanced-settings-title::before {
  color: var(--primary-color);
  content: "✦";
}

.chuangzhi-page .advanced-settings-content {
  background: rgba(239, 242, 255, 0.62);
}

.chuangzhi-page .advanced-setting-item {
  padding: 14px;
  border: 1px solid rgba(103, 116, 221, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.chuangzhi-page .btn,
.chuangzhi-page .editor-btn,
.chuangzhi-page .track-action-btn,
.chuangzhi-page .preview-control-btn,
.chuangzhi-page .pagination-btn {
  border-radius: 12px;
  font-weight: 800;
}

.chuangzhi-page .btn-secondary,
.chuangzhi-page .btn-outline,
.chuangzhi-page .editor-btn,
.chuangzhi-page .track-action-btn,
.chuangzhi-page .preview-control-btn,
.chuangzhi-page .pagination-btn,
.chuangzhi-page .video-upload-img-btn,
.chuangzhi-page .lipsync-preview-btn,
.chuangzhi-page .video-audio-download-btn,
.chuangzhi-page .btn-credits-cancel {
  color: #6470a0;
  border: 1px solid rgba(103, 116, 221, 0.16);
  background: #f0f3ff;
}

.chuangzhi-page .btn-secondary:hover,
.chuangzhi-page .btn-outline:hover,
.chuangzhi-page .editor-btn:hover,
.chuangzhi-page .track-action-btn:hover,
.chuangzhi-page .preview-control-btn:hover,
.chuangzhi-page .pagination-btn:hover,
.chuangzhi-page .video-upload-img-btn:hover,
.chuangzhi-page .lipsync-preview-btn:hover,
.chuangzhi-page .video-audio-download-btn:hover,
.chuangzhi-page .btn-credits-cancel:hover {
  color: var(--primary-color);
  background: #e8ecff;
}

.chuangzhi-page .waterfall-gallery {
  gap: 18px;
}

.chuangzhi-page .waterfall-item {
  border-radius: 20px;
  background: #eef1ff;
  box-shadow: 0 14px 36px rgba(42, 48, 110, 0.1);
}

.chuangzhi-page .waterfall-item:hover {
  box-shadow: 0 22px 52px rgba(42, 48, 110, 0.16);
}

.chuangzhi-page .video-play-icon {
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 38px rgba(42, 48, 110, 0.22);
}

.chuangzhi-page .video-play-icon::after {
  border-color: transparent transparent transparent #6a78ff;
}

.chuangzhi-page .modal,
.chuangzhi-page .app-confirm-overlay,
.chuangzhi-page .auth-modal-overlay,
.chuangzhi-page .model-select-overlay,
.chuangzhi-page .credits-confirm-modal,
.chuangzhi-page .model-selection-overlay,
.chuangzhi-page .asr-loading-modal,
.chuangzhi-page .media-loading-modal,
.chuangzhi-page .jianying-export-modal,
.chuangzhi-page .jianying-result-modal {
  background: rgba(28, 33, 68, 0.42);
  backdrop-filter: blur(10px);
}

.chuangzhi-page .modal-content,
.chuangzhi-page .app-confirm-dialog,
.chuangzhi-page .auth-modal-content,
.chuangzhi-page .model-select-modal,
.chuangzhi-page .model-selection-dialog,
.chuangzhi-page .loading-content,
.chuangzhi-page .auto-progress-modal,
.chuangzhi-page .credits-confirm-content {
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-lg);
}

.chuangzhi-page .app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.chuangzhi-page .app-confirm-overlay.active {
  opacity: 1;
}

.chuangzhi-page .app-confirm-overlay.closing {
  opacity: 0;
}

.chuangzhi-page .app-confirm-dialog {
  width: min(440px, calc(100vw - 40px));
  padding: 28px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.16s ease;
}

.chuangzhi-page .app-confirm-overlay.active .app-confirm-dialog {
  transform: translateY(0) scale(1);
}

.chuangzhi-page .app-confirm-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%);
  box-shadow: 0 16px 32px rgba(103, 116, 221, 0.28);
  font-size: 22px;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.chuangzhi-page .app-confirm-icon.danger {
  background: linear-gradient(135deg, #ff6b8a 0%, #ff8b6d 100%);
  box-shadow: 0 16px 32px rgba(240, 92, 120, 0.28);
}

.chuangzhi-page .app-confirm-content h3 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.chuangzhi-page .app-confirm-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}

.chuangzhi-page .app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.chuangzhi-page .app-confirm-btn {
  min-width: 108px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.chuangzhi-page .app-confirm-btn:hover {
  transform: translateY(-1px);
}

.chuangzhi-page .app-confirm-cancel {
  color: #5f678a;
  background: #eef1ff;
}

.chuangzhi-page .app-confirm-cancel:hover {
  background: #e4e8ff;
}

.chuangzhi-page .app-confirm-ok {
  color: #fff;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%);
  box-shadow: 0 12px 28px rgba(103, 116, 221, 0.22);
}

.chuangzhi-page .app-confirm-ok.danger {
  background: linear-gradient(135deg, #ff5c7a 0%, #ff8266 100%);
  box-shadow: 0 12px 28px rgba(240, 92, 120, 0.22);
}

/* 剪映草稿导出弹窗保持高对比深色主题，避免被创智工坊通用浅色弹窗覆盖。 */
.chuangzhi-page .jianying-export-modal,
.chuangzhi-page .jianying-result-modal {
  background: rgba(3, 5, 18, 0.82) !important;
  backdrop-filter: blur(12px) !important;
}

.chuangzhi-page .jianying-export-modal .export-modal-content,
.chuangzhi-page .jianying-result-modal .result-modal-content {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #171923 0%, #090a12 100%) !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.chuangzhi-page .jianying-export-modal .export-modal-header,
.chuangzhi-page .jianying-result-modal .result-modal-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chuangzhi-page .jianying-result-modal .result-modal-header {
  background: linear-gradient(135deg, rgba(254, 44, 85, 0.18) 0%, rgba(255, 111, 97, 0.08) 100%) !important;
}

.chuangzhi-page .jianying-export-modal .export-modal-title,
.chuangzhi-page .jianying-export-modal .export-progress-percent,
.chuangzhi-page .jianying-result-modal .result-modal-title,
.chuangzhi-page .jianying-result-modal .result-info-value,
.chuangzhi-page .jianying-result-modal .result-tips-list code {
  color: #fff !important;
}

.chuangzhi-page .jianying-export-modal .export-progress-text,
.chuangzhi-page .jianying-export-modal .export-progress-phase {
  color: rgba(255, 255, 255, 0.72) !important;
}

.chuangzhi-page .jianying-export-modal .export-progress-container {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.38) !important;
}

.chuangzhi-page .jianying-result-modal .result-info {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.chuangzhi-page .jianying-result-modal .result-info-row {
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

.chuangzhi-page .jianying-result-modal .result-info-label,
.chuangzhi-page .jianying-result-modal .result-tips-list li,
.chuangzhi-page .jianying-result-modal .download-hint {
  color: rgba(255, 255, 255, 0.68) !important;
}

.chuangzhi-page .jianying-result-modal .result-tips {
  background: rgba(254, 44, 85, 0.1) !important;
  border: 1px solid rgba(254, 44, 85, 0.28) !important;
}

.chuangzhi-page .jianying-result-modal .result-tips-title {
  color: #ff315f !important;
}

.chuangzhi-page .modal-header,
.chuangzhi-page .auth-modal-header,
.chuangzhi-page .model-select-header {
  border-bottom-color: rgba(103, 116, 221, 0.1);
}

.chuangzhi-page .user-avatar,
.chuangzhi-page .user-credits {
  color: #fff;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%);
}

.chuangzhi-page .user-dropdown-menu {
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.chuangzhi-page .user-dropdown-item:hover {
  color: var(--primary-color);
  background: #eef1ff;
}

.chuangzhi-page .toast {
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%);
  box-shadow: var(--shadow-lg);
}

.chuangzhi-page .content-loading-modal {
  top: 72px;
  left: 282px;
  background: rgba(246, 247, 255, 0.78);
}

.chuangzhi-page .footer {
  padding: 18px max(40px, calc((100vw - 1220px) / 2));
  color: rgba(255, 255, 255, 0.42);
  border-top: 0;
  background: #171b31;
}

.chuangzhi-page .footer-links {
  justify-content: space-between;
  width: min(1220px, 100%);
  margin: 0 auto;
}

.chuangzhi-page .footer-link:hover {
  color: #fff;
}

/* ========== Legacy Color Harmonization ========== */
.chuangzhi-page {
  --cz-info-bg: #eef3ff;
  --cz-info-fg: #5d6dff;
  --cz-success-bg: #e8fbf2;
  --cz-success-fg: #25a86c;
  --cz-warning-bg: #fff4df;
  --cz-warning-fg: #d98100;
  --cz-danger-bg: #fff0f4;
  --cz-danger-fg: #e55274;
  --cz-table-head-bg: #eef1ff;
  --cz-table-head-fg: #30385f;
  --cz-table-hover: #f7f8ff;
}

.chuangzhi-page .story-content h2 {
  border-bottom-color: rgba(103, 116, 221, 0.22);
}

.chuangzhi-page .story-content h3 {
  border-left-color: var(--primary-color);
}

.chuangzhi-page .story-content table,
.chuangzhi-page .story-table,
.chuangzhi-page .character-table,
.chuangzhi-page .prop-table,
.chuangzhi-page .scene-table,
.chuangzhi-page .script-table,
.chuangzhi-page .credit-history-table {
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(71, 83, 180, 0.06);
}

.chuangzhi-page .story-content table th,
.chuangzhi-page .character-table thead,
.chuangzhi-page .character-table thead th,
.chuangzhi-page .prop-table thead th,
.chuangzhi-page .scene-table thead th,
.chuangzhi-page .script-table th,
.chuangzhi-page .credit-history-table th {
  color: var(--cz-table-head-fg) !important;
  border-color: rgba(103, 116, 221, 0.12) !important;
  background: var(--cz-table-head-bg) !important;
  font-weight: 900;
}

.chuangzhi-page .story-content table td,
.chuangzhi-page .story-table td,
.chuangzhi-page .character-table tbody td,
.chuangzhi-page .prop-table tbody td,
.chuangzhi-page .scene-table tbody td,
.chuangzhi-page .script-table td,
.chuangzhi-page .credit-history-table td {
  color: var(--text-secondary);
  border-color: rgba(103, 116, 221, 0.1) !important;
  background: rgba(255, 255, 255, 0.88);
}

.chuangzhi-page .label-cell,
.chuangzhi-page .character-table tbody td:first-child {
  color: #4f5f9f !important;
  background: #f1f4ff !important;
  font-weight: 900;
}

.chuangzhi-page .story-content table tr:hover,
.chuangzhi-page .story-table tr:hover,
.chuangzhi-page .character-table tbody tr:hover,
.chuangzhi-page .prop-table tbody tr:hover,
.chuangzhi-page .scene-table tbody tr:hover,
.chuangzhi-page .script-table tr:hover td,
.chuangzhi-page .credit-history-table tr:hover td {
  background: var(--cz-table-hover) !important;
}

.chuangzhi-page .draft-tag,
.chuangzhi-page .episode-badge,
.chuangzhi-page .match-count,
.chuangzhi-page .credits-required,
.chuangzhi-page .lipsync-fallback-badge,
.chuangzhi-page .character-tag,
.chuangzhi-page .emotion-premium-label,
.chuangzhi-page .scene-name-tag {
  color: var(--cz-info-fg) !important;
  border: 1px solid rgba(103, 116, 221, 0.14);
  background: var(--cz-info-bg) !important;
  border-radius: 999px;
  font-weight: 800;
}

.chuangzhi-page .draft-tag.theme,
.chuangzhi-page .character-tag-chip,
.chuangzhi-page .scene-tag-chip {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%) !important;
  box-shadow: 0 12px 24px rgba(103, 116, 221, 0.2);
}

.chuangzhi-page .status-badge,
.chuangzhi-page .video-clip-status,
.chuangzhi-page .lipsync-card-status,
.chuangzhi-page .video-audio-card-status {
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 900;
}

.chuangzhi-page .status-badge.pending,
.chuangzhi-page .video-clip-status.status-pending,
.chuangzhi-page .lipsync-card-status.status-pending,
.chuangzhi-page .video-audio-card-status.status-pending {
  color: var(--cz-warning-fg) !important;
  border-color: rgba(217, 129, 0, 0.16);
  background: var(--cz-warning-bg) !important;
}

.chuangzhi-page .status-badge.processing,
.chuangzhi-page .video-clip-status.status-generating,
.chuangzhi-page .lipsync-card-status.status-processing,
.chuangzhi-page .video-audio-card-status.status-generating {
  color: var(--cz-info-fg) !important;
  border-color: rgba(103, 116, 221, 0.18);
  background: var(--cz-info-bg) !important;
}

.chuangzhi-page .status-badge.completed,
.chuangzhi-page .video-clip-status.status-completed,
.chuangzhi-page .lipsync-card-status.status-completed,
.chuangzhi-page .video-audio-card-status.status-completed {
  color: var(--cz-success-fg) !important;
  border-color: rgba(37, 168, 108, 0.18);
  background: var(--cz-success-bg) !important;
}

.chuangzhi-page .status-badge.failed,
.chuangzhi-page .video-clip-status.status-failed,
.chuangzhi-page .lipsync-card-status.status-failed,
.chuangzhi-page .video-audio-card-status.status-failed {
  color: var(--cz-danger-fg) !important;
  border-color: rgba(229, 82, 116, 0.18);
  background: var(--cz-danger-bg) !important;
}

.chuangzhi-page .batch-delete-btn,
.chuangzhi-page .video-cancel-btn,
.chuangzhi-page .btn-credits-confirm {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #f05c78 0%, #ff8a66 100%) !important;
  box-shadow: 0 12px 26px rgba(240, 92, 120, 0.2);
}

.chuangzhi-page .batch-delete-btn:hover,
.chuangzhi-page .video-cancel-btn:hover,
.chuangzhi-page .btn-credits-confirm:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.chuangzhi-page .auth-modal-title,
.chuangzhi-page .auth-form label,
.chuangzhi-page .current-credits,
.chuangzhi-page .package-price,
.chuangzhi-page .credit-history-summary strong,
.chuangzhi-page .archive-section-header h4,
.chuangzhi-page .draft-title,
.chuangzhi-page .video-title,
.chuangzhi-page .model-name {
  color: var(--text-primary) !important;
}

.chuangzhi-page .auth-modal-footer,
.chuangzhi-page .auth-modal-footer p,
.chuangzhi-page .package-points,
.chuangzhi-page .package-bonus,
.chuangzhi-page .draft-meta,
.chuangzhi-page .video-meta,
.chuangzhi-page .model-desc {
  color: var(--text-tertiary) !important;
}

.chuangzhi-page .auth-modal .form-control,
.chuangzhi-page .package-card,
.chuangzhi-page .archive-section,
.chuangzhi-page .draft-card,
.chuangzhi-page .video-card {
  border-color: rgba(103, 116, 221, 0.14) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.chuangzhi-page .package-card.selected,
.chuangzhi-page .package-card:hover,
.chuangzhi-page .draft-card:hover,
.chuangzhi-page .video-card:hover {
  border-color: rgba(106, 120, 255, 0.48) !important;
  box-shadow: 0 18px 42px rgba(71, 83, 180, 0.14) !important;
}

.chuangzhi-page .auth-modal .btn-primary,
.chuangzhi-page .auth-modal .btn-block,
.chuangzhi-page .recharge-submit-btn,
.chuangzhi-page #generateCatalogListBtn,
.chuangzhi-page #rechargeSubmitBtn {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%) !important;
  box-shadow: 0 12px 28px rgba(103, 116, 221, 0.22) !important;
}

.chuangzhi-page .auth-modal .btn-secondary,
.chuangzhi-page .auth-modal .send-code-btn,
.chuangzhi-page .auth-modal .verification-code-btn {
  color: #6470a0 !important;
  border-color: rgba(103, 116, 221, 0.16) !important;
  background: #f0f3ff !important;
}

.chuangzhi-page .auth-modal a,
.chuangzhi-page .link-primary {
  color: var(--primary-color) !important;
}

.chuangzhi-page #registerForm div[style*="background: #000000"],
.chuangzhi-page #registerForm div[style*="background:#000000"] {
  background: rgba(103, 116, 221, 0.18) !important;
}

.chuangzhi-page #registerForm span[style*="background: #ffffff"] {
  background: rgba(255, 255, 255, 0.96) !important;
}

.chuangzhi-page #videoResolutionSelect {
  color: var(--text-primary) !important;
  border-color: rgba(103, 116, 221, 0.16) !important;
  background-color: rgba(248, 249, 255, 0.95) !important;
}

.chuangzhi-page label[for="videoResolutionSelect"],
.chuangzhi-page #mediaCount,
.chuangzhi-page .placeholder-text {
  color: var(--text-tertiary) !important;
}

.chuangzhi-page .video-generation-status,
.chuangzhi-page .lipsync-status,
.chuangzhi-page .video-audio-status,
.chuangzhi-page .video-card .video-thumbnail-placeholder,
.chuangzhi-page .draft-thumbnail-placeholder {
  color: var(--text-tertiary) !important;
  border: 1px solid rgba(103, 116, 221, 0.1);
  background: #f5f7ff !important;
}

.chuangzhi-page .video-progress-container,
.chuangzhi-page .lipsync-progress,
.chuangzhi-page .video-audio-progress {
  background: #eef1ff !important;
}

.chuangzhi-page .video-progress-bar,
.chuangzhi-page .lipsync-progress-bar,
.chuangzhi-page .video-audio-progress-bar {
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%) !important;
}

.chuangzhi-page .video-editor-container .sidebar-tab.active,
.chuangzhi-page .video-editor-container .timeline-tool-btn.active,
.chuangzhi-page .video-editor-container .subtitle-preset-btn.active,
.chuangzhi-page .video-editor-container .property-btn.active,
.chuangzhi-page .subtitle-mode-toggle input[type="checkbox"]:checked + .toggle-label {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #6576ff 0%, #8b6dff 100%) !important;
}

.chuangzhi-page .video-editor-container .sidebar-tab,
.chuangzhi-page .video-editor-container .timeline-tool-btn,
.chuangzhi-page .video-editor-container .track-action-btn,
.chuangzhi-page .video-editor-container .subtitle-preset-btn,
.chuangzhi-page .video-editor-container .property-btn,
.chuangzhi-page .subtitle-mode-toggle .toggle-label {
  color: #6470a0 !important;
  border-color: rgba(103, 116, 221, 0.16) !important;
  background: #f0f3ff !important;
}

.chuangzhi-page .spinner,
.chuangzhi-page .loading-spinner,
.chuangzhi-page .character-card-loading .spinner,
.chuangzhi-page .scene-card-loading .spinner {
  border-color: #e3e8ff !important;
  border-top-color: var(--primary-color) !important;
}

.chuangzhi-page .structured-editor-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(103, 116, 221, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 255, 0.96) 100%);
  box-shadow: 0 16px 38px rgba(71, 83, 180, 0.1);
}

.chuangzhi-page .structured-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.chuangzhi-page .structured-editor-topbar strong {
  color: var(--text-primary);
  font-size: 16px;
}

.chuangzhi-page .structured-editor-topbar h4 {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.chuangzhi-page .structured-editor-topbar p,
.chuangzhi-page .structured-advanced p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 13px;
}

.chuangzhi-page .structured-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.chuangzhi-page .structured-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chuangzhi-page .structured-field-wide {
  grid-column: 1 / -1;
}

.chuangzhi-page .structured-field span {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 14px;
}

.chuangzhi-page .structured-field textarea,
.chuangzhi-page .structured-extra-text,
.chuangzhi-page .structured-advanced-textarea,
.chuangzhi-page .structured-table textarea {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  color: var(--text-primary);
  border: 1px solid rgba(103, 116, 221, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px 14px;
  line-height: 1.65;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chuangzhi-page .structured-field textarea:focus,
.chuangzhi-page .structured-extra-text:focus,
.chuangzhi-page .structured-advanced-textarea:focus,
.chuangzhi-page .structured-table textarea:focus {
  border-color: rgba(103, 116, 221, 0.5);
  box-shadow: 0 0 0 4px rgba(103, 116, 221, 0.12);
}

.chuangzhi-page .structured-table-scroll {
  overflow-x: auto;
  border: 1px solid rgba(103, 116, 221, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.chuangzhi-page .structured-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.chuangzhi-page .structured-story-table {
  min-width: 720px;
}

.chuangzhi-page .structured-story-table th:first-child,
.chuangzhi-page .structured-story-table td:first-child {
  width: 220px;
}

.chuangzhi-page .structured-story-table th:nth-child(2),
.chuangzhi-page .structured-story-table td:nth-child(2) {
  width: auto;
}

.chuangzhi-page .structured-story-table td:first-child textarea {
  min-height: 54px;
  font-weight: 700;
}

.chuangzhi-page .structured-story-table td:nth-child(2) textarea {
  min-height: 120px;
}

.chuangzhi-page .structured-character-table,
.chuangzhi-page .structured-prop-table {
  min-width: 1180px;
}

.chuangzhi-page .structured-character-table th:nth-child(1),
.chuangzhi-page .structured-character-table td:nth-child(1) {
  width: 12%;
}

.chuangzhi-page .structured-character-table th:nth-child(2),
.chuangzhi-page .structured-character-table td:nth-child(2) {
  width: 14%;
}

.chuangzhi-page .structured-character-table th:nth-child(3),
.chuangzhi-page .structured-character-table td:nth-child(3) {
  width: 22%;
}

.chuangzhi-page .structured-character-table th:nth-child(4),
.chuangzhi-page .structured-character-table td:nth-child(4) {
  width: 20%;
}

.chuangzhi-page .structured-character-table th:nth-child(5),
.chuangzhi-page .structured-character-table td:nth-child(5),
.chuangzhi-page .structured-character-table th:nth-child(6),
.chuangzhi-page .structured-character-table td:nth-child(6) {
  width: 16%;
}

.chuangzhi-page .structured-prop-table th:nth-child(1),
.chuangzhi-page .structured-prop-table td:nth-child(1),
.chuangzhi-page .structured-prop-table th:nth-child(2),
.chuangzhi-page .structured-prop-table td:nth-child(2),
.chuangzhi-page .structured-prop-table th:nth-child(6),
.chuangzhi-page .structured-prop-table td:nth-child(6) {
  width: 12%;
}

.chuangzhi-page .structured-prop-table th:nth-child(3),
.chuangzhi-page .structured-prop-table td:nth-child(3) {
  width: 28%;
}

.chuangzhi-page .structured-prop-table th:nth-child(4),
.chuangzhi-page .structured-prop-table td:nth-child(4) {
  width: 16%;
}

.chuangzhi-page .structured-prop-table th:nth-child(5),
.chuangzhi-page .structured-prop-table td:nth-child(5) {
  width: 20%;
}

.chuangzhi-page .structured-table th,
.chuangzhi-page .structured-table td {
  border-bottom: 1px solid rgba(103, 116, 221, 0.1);
  border-right: 1px solid rgba(103, 116, 221, 0.08);
  padding: 10px;
  vertical-align: top;
}

.chuangzhi-page .structured-table th {
  color: #4f5dd4;
  background: #eef2ff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.chuangzhi-page .structured-table th:last-child,
.chuangzhi-page .structured-table td:last-child {
  border-right: 0;
}

.chuangzhi-page .structured-table tr:last-child td {
  border-bottom: 0;
}

.chuangzhi-page .structured-table textarea {
  min-height: 92px;
  padding: 10px;
  border-radius: 12px;
  box-shadow: none;
}

.chuangzhi-page .structured-table-actions-col {
  width: 86px;
  text-align: center;
}

.chuangzhi-page .structured-table-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 86px;
  min-width: 86px;
}

.chuangzhi-page .structured-table-actions .btn,
.chuangzhi-page .structured-table .btn {
  border-radius: 999px;
}

.chuangzhi-page .structured-table-actions .btn {
  width: 62px;
  min-height: 30px;
  padding: 6px 8px;
}

.chuangzhi-page .character-table,
.chuangzhi-page .prop-table {
  table-layout: fixed;
}

.chuangzhi-page .character-table th:nth-child(1),
.chuangzhi-page .character-table td:nth-child(1) {
  width: 12%;
}

.chuangzhi-page .character-table th:nth-child(2),
.chuangzhi-page .character-table td:nth-child(2) {
  width: 14%;
}

.chuangzhi-page .character-table th:nth-child(3),
.chuangzhi-page .character-table td:nth-child(3) {
  width: 22%;
}

.chuangzhi-page .character-table th:nth-child(4),
.chuangzhi-page .character-table td:nth-child(4) {
  width: 20%;
}

.chuangzhi-page .character-table th:nth-child(5),
.chuangzhi-page .character-table td:nth-child(5),
.chuangzhi-page .character-table th:nth-child(6),
.chuangzhi-page .character-table td:nth-child(6) {
  width: 16%;
}

.chuangzhi-page .prop-table th:nth-child(1),
.chuangzhi-page .prop-table td:nth-child(1),
.chuangzhi-page .prop-table th:nth-child(2),
.chuangzhi-page .prop-table td:nth-child(2),
.chuangzhi-page .prop-table th:nth-child(6),
.chuangzhi-page .prop-table td:nth-child(6) {
  width: 12%;
}

.chuangzhi-page .prop-table th:nth-child(3),
.chuangzhi-page .prop-table td:nth-child(3) {
  width: 28%;
}

.chuangzhi-page .prop-table th:nth-child(4),
.chuangzhi-page .prop-table td:nth-child(4) {
  width: 16%;
}

.chuangzhi-page .prop-table th:nth-child(5),
.chuangzhi-page .prop-table td:nth-child(5) {
  width: 20%;
}

.chuangzhi-page .prop-design-header,
.chuangzhi-page .scene-design-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chuangzhi-page #characterDisplay .story-editor-container,
.chuangzhi-page .prop-editor-container {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
}

.chuangzhi-page #characterDisplay .story-editor-header,
.chuangzhi-page .prop-editor-header {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border-light);
}

.chuangzhi-page #characterDisplay .story-editor-header h3 {
  display: none;
}

.chuangzhi-page #characterDisplay .story-editor-actions,
.chuangzhi-page .prop-editor-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.chuangzhi-page #characterDisplay .story-editor-body,
.chuangzhi-page .prop-editor-body {
  padding: var(--spacing-md);
}

.chuangzhi-page #characterDisplay .story-editor-footer {
  display: none;
}

.chuangzhi-page .character-table-wrapper,
.chuangzhi-page .prop-table-wrapper {
  overflow-x: auto;
  margin: var(--spacing-md) 0;
}

.chuangzhi-page .character-table,
.chuangzhi-page .prop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--bg-primary);
}

.chuangzhi-page .character-table thead th,
.chuangzhi-page .prop-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.chuangzhi-page .character-table tbody td,
.chuangzhi-page .prop-table tbody td {
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.5;
  font-size: 0.875rem;
}

.chuangzhi-page .character-table tbody tr:last-child td,
.chuangzhi-page .prop-table tbody tr:last-child td {
  border-bottom: none;
}

.chuangzhi-page .character-table tbody td:first-child {
  color: var(--text-secondary) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600;
}

.chuangzhi-page .structured-extra-text {
  min-height: 96px;
}

.chuangzhi-page .structured-advanced {
  border: 1px dashed rgba(103, 116, 221, 0.2);
  border-radius: 16px;
  background: rgba(240, 243, 255, 0.55);
  padding: 12px;
}

.chuangzhi-page .structured-advanced summary {
  cursor: pointer;
  color: #6470a0;
  font-weight: 700;
  user-select: none;
}

.chuangzhi-page .structured-advanced-textarea {
  margin-top: 12px;
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

@media (max-width: 960px) {
  .chuangzhi-page .header-content {
    padding: 0 20px;
  }

  .chuangzhi-page .app-body {
    flex-direction: column;
    padding: 18px;
  }

  .chuangzhi-page .workflow-steps {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    min-width: 0;
    flex-direction: row;
    overflow-x: auto;
  }

  .chuangzhi-page .step {
    min-width: 128px;
  }

  .chuangzhi-page .content-loading-modal {
    left: 0;
  }

  .chuangzhi-page .structured-story-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .chuangzhi-page .header {
    min-height: auto;
  }

  .chuangzhi-page .header-content {
    min-height: 64px;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 18px;
    gap: 12px;
  }

  .chuangzhi-page .nav {
    width: 100%;
    flex-wrap: wrap;
  }

  .chuangzhi-page .creation-section,
  .chuangzhi-page .gallery-section {
    padding: 20px;
  }

  .chuangzhi-page .advanced-settings-grid {
    grid-template-columns: 1fr;
  }

  .chuangzhi-page .footer-links {
    align-items: flex-start;
    flex-direction: column;
  }
}