* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f0f1a; color: #e0e0e0; min-height: 100vh; }

/* 登录页 */
.page { min-height: 100vh; }
.login-box { max-width: 400px; margin: 0 auto; padding: 80px 30px 30px; text-align: center; }
.login-logo { margin-bottom: 40px; }
.logo-icon { width: 70px; height: 70px; margin: 0 auto 16px; background: linear-gradient(135deg, #6c5ce7, #a855f7); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold; color: #fff; }
.login-logo h1 { font-size: 28px; color: #fff; }
.login-logo p { color: #888; margin-top: 6px; font-size: 14px; }
.form-group { margin-bottom: 16px; }
.form-group input { width: 100%; padding: 12px 16px; background: #1a1a2e; border: 1px solid #333; border-radius: 10px; color: #e0e0e0; font-size: 15px; outline: none; transition: border-color 0.2s; }
.form-group input:focus { border-color: #6c5ce7; }
.btn-primary { width: 100%; padding: 13px; background: linear-gradient(135deg, #6c5ce7, #a855f7); border: none; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.9; }
.login-switch { margin-top: 16px; font-size: 14px; color: #888; }
.login-switch a { color: #6c5ce7; text-decoration: none; }
.login-switch a:hover { text-decoration: underline; }

/* 顶部导航 */
.header { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #14142a; border-bottom: 1px solid #222; }
.logo-text { font-size: 20px; font-weight: 700; background: linear-gradient(135deg, #6c5ce7, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.user-info { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.credit-badge { background: #1a1a2e; padding: 4px 10px; border-radius: 6px; color: #f0c040; font-weight: 600; }
.vip-badge { padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.vip-active { background: linear-gradient(135deg, #f0c040, #e6a800); color: #1a1a2e; }
.vip-expired { background: #333; color: #888; }
.btn-logout { background: none; border: 1px solid #444; color: #aaa; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-logout:hover { border-color: #e74c3c; color: #e74c3c; }

/* 主Tab */
.main-tabs { display: flex; gap: 0; padding: 0 24px; background: #14142a; border-bottom: 1px solid #222; }
.main-tab { padding: 12px 28px; background: none; border: none; color: #888; font-size: 15px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.main-tab.active { color: #fff; border-bottom-color: #6c5ce7; }
.main-tab:hover { color: #ccc; }

/* Tab内容 */
.tab-content { padding: 24px; max-width: 800px; margin: 0 auto; }

/* 生成面板 */
.gen-panel { background: #1a1a2e; border-radius: 16px; padding: 24px; }
.panel-section { margin-bottom: 20px; }
.panel-section h3 { font-size: 14px; color: #aaa; margin-bottom: 10px; font-weight: 500; }

/* 模式Tab */
.mode-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-tab { padding: 8px 18px; background: #0f0f1a; border: 1px solid #333; border-radius: 8px; color: #aaa; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.mode-tab.active { background: #6c5ce7; border-color: #6c5ce7; color: #fff; }
.mode-tab:hover:not(.active) { border-color: #6c5ce7; color: #ccc; }

/* 模型Tab */
.model-tabs { display: flex; gap: 10px; }
.model-tab { flex: 1; padding: 12px; background: #0f0f1a; border: 1px solid #333; border-radius: 10px; color: #aaa; cursor: pointer; transition: all 0.2s; text-align: center; }
.model-tab.active { border-color: #6c5ce7; background: #1a1030; color: #fff; }
.model-tab:hover:not(.active) { border-color: #555; }
.model-name { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.model-cost { display: block; font-size: 12px; color: #f0c040; }
.model-tab.active .model-cost { color: #f0c040; }

/* 提示词 */
textarea { width: 100%; padding: 12px; background: #0f0f1a; border: 1px solid #333; border-radius: 10px; color: #e0e0e0; font-size: 14px; resize: vertical; outline: none; font-family: inherit; }
textarea:focus { border-color: #6c5ce7; }

/* 提示词操作栏 */
.prompt-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.btn-optimize { padding: 8px 18px; background: linear-gradient(135deg, #6c5ce7, #a855f7); border: none; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-optimize:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-optimize:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 提示词增强 */
.enhance-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.enhance-toggle input { display: none; }
.toggle-slider { width: 40px; height: 22px; background: #333; border-radius: 11px; position: relative; transition: background 0.2s; }
.toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #888; border-radius: 50%; transition: all 0.2s; }
.enhance-toggle input:checked + .toggle-slider { background: #6c5ce7; }
.enhance-toggle input:checked + .toggle-slider::after { left: 21px; background: #fff; }
.toggle-label { font-size: 13px; color: #ccc; font-weight: 500; }
.enhance-hint { font-size: 12px; color: #666; }
.enhance-preview { margin-top: 8px; padding: 12px; background: #0d0d1a; border: 1px solid #2a2a40; border-radius: 8px; }
.enhance-preview-text { font-size: 13px; color: #ccc; line-height: 1.6; word-break: break-all; }
.optimized-label { font-size: 12px; color: #6c5ce7; font-weight: 600; margin-bottom: 6px; }
.optimized-text { font-size: 13px; color: #e0e0e0; line-height: 1.7; padding: 8px; background: #111122; border-radius: 6px; border-left: 3px solid #6c5ce7; }
.optimized-hint { font-size: 11px; color: #666; margin-top: 6px; }

/* 历史记录复制按钮 */
.btn-copy { color: #6c5ce7 !important; }
.btn-copy:hover { background: #1a1030 !important; }

/* 风格标签选择器 */
.section-hint { font-size: 12px; color: #666; font-weight: normal; }
.collapsible-header { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.collapse-icon { font-size: 11px; color: #666; transition: transform 0.2s; margin-left: auto; }

/* 预设按钮行 */
.preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.preset-label { font-size: 12px; color: #888; white-space: nowrap; }
.preset-btn { padding: 5px 12px; background: #1a1030; border: 1px solid #6c5ce7; border-radius: 16px; color: #b8a8f0; font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.preset-btn:hover { background: #6c5ce7; color: #fff; }
.preset-btn.preset-ecommerce { border-color: #f0a040; color: #f0c060; }
.preset-btn.preset-ecommerce:hover { background: #f0a040; color: #fff; }

.style-tags-container { display: flex; flex-direction: column; gap: 14px; }
.tag-category { }
.tag-category-label { font-size: 13px; color: #aaa; margin-bottom: 8px; font-weight: 500; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-btn { padding: 6px 14px; background: #0f0f1a; border: 1px solid #333; border-radius: 20px; color: #999; font-size: 13px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.tag-btn:hover { border-color: #6c5ce7; color: #ccc; }
.tag-btn.active { background: #1a1030; border-color: #6c5ce7; color: #fff; box-shadow: 0 0 8px rgba(108, 92, 231, 0.3); }

/* 上传区域 */
.upload-area { border: 2px dashed #333; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
.upload-area:hover { border-color: #6c5ce7; }
.upload-placeholder { color: #666; }
.upload-icon { font-size: 36px; color: #6c5ce7; margin-bottom: 8px; }
.upload-preview { position: relative; display: inline-block; }
.upload-preview img { max-width: 200px; max-height: 150px; border-radius: 8px; }
.btn-remove-img { position: absolute; top: -8px; right: -8px; background: #e74c3c; color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; }

/* 下拉框 */
select { width: 100%; padding: 10px 12px; background: #0f0f1a; border: 1px solid #333; border-radius: 8px; color: #e0e0e0; font-size: 14px; outline: none; }
select:focus { border-color: #6c5ce7; }

/* 费用提示 */
.cost-tip { font-size: 13px; color: #888; margin-bottom: 16px; padding: 8px 12px; background: #0f0f1a; border-radius: 8px; }

/* 生成按钮 */
.btn-generate { width: 100%; padding: 14px; background: linear-gradient(135deg, #6c5ce7, #a855f7); border: none; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.btn-generate:hover { opacity: 0.9; }
.btn-generate:disabled { opacity: 0.5; cursor: not-allowed; }

/* 结果区域 */
.result-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #222; }
.result-image-wrap { text-align: center; margin-bottom: 16px; }
.result-image-wrap img { max-width: 100%; border-radius: 12px; }
.result-actions { display: flex; gap: 10px; }
.btn-action { flex: 1; padding: 10px; background: #0f0f1a; border: 1px solid #333; border-radius: 8px; color: #ccc; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.btn-action:hover { border-color: #6c5ce7; color: #fff; }

/* 历史记录 */
.history-panel { background: #1a1a2e; border-radius: 16px; padding: 24px; }
.history-filter { margin-bottom: 16px; }
.history-filter select { width: auto; min-width: 140px; }
.history-list { display: flex; flex-direction: column; gap: 12px; }
.empty-state { text-align: center; color: #555; padding: 40px 0; font-size: 14px; }

.history-item { display: flex; gap: 14px; padding: 14px; background: #0f0f1a; border-radius: 12px; align-items: center; transition: background 0.2s; }
.history-item:hover { background: #151528; }
.item-media { flex-shrink: 0; position: relative; }
.history-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #222; }
.history-thumb.placeholder { display: flex; align-items: center; justify-content: center; color: #555; font-size: 12px; }
.item-processing { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #f0c040; font-size: 11px; font-weight: 600; }
.item-failed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #e74c3c; font-size: 11px; font-weight: 600; }
.item-info { flex: 1; min-width: 0; }
.item-type { font-size: 12px; color: #6c5ce7; font-weight: 600; margin-bottom: 4px; }
.item-prompt { font-size: 13px; color: #ccc; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { display: flex; gap: 12px; font-size: 11px; color: #666; }
.item-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.btn-sm { padding: 5px 12px; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; color: #aaa; font-size: 12px; cursor: pointer; white-space: nowrap; }
.btn-sm:hover { border-color: #6c5ce7; color: #fff; }
.btn-sm.btn-danger:hover { border-color: #e74c3c; color: #e74c3c; }

/* 分页 */
.history-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.pag-btn { padding: 6px 14px; background: #0f0f1a; border: 1px solid #333; border-radius: 6px; color: #aaa; cursor: pointer; font-size: 13px; }
.pag-btn.active { background: #6c5ce7; border-color: #6c5ce7; color: #fff; }

/* 响应式 */
@media (max-width: 600px) {
  .header { padding: 10px 16px; }
  .main-tabs { padding: 0 16px; }
  .tab-content { padding: 16px; }
  .gen-panel { padding: 16px; }
  .history-item { flex-wrap: wrap; }
  .item-actions { flex-direction: row; width: 100%; }
}

/* ============ 电商图片类型 ============ */
.ecommerce-type-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ecom-type-btn { padding: 8px 16px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; color: #aaa; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.ecom-type-btn:hover { border-color: #6c5ce7; color: #fff; }
.ecom-type-btn.active { background: linear-gradient(135deg, #6c5ce7, #a855f7); border-color: transparent; color: #fff; }

/* ============ 平台尺寸 ============ */
.platform-row { display: flex; gap: 8px; flex-wrap: wrap; }
.platform-btn { padding: 8px 14px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; color: #aaa; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.platform-btn:hover { border-color: #f0a040; color: #f0c060; }
.platform-btn.active { background: #f0a040; border-color: transparent; color: #fff; }

/* ============ 商品类目 ============ */
.category-container { margin-top: 10px; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.category-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: #1a1a2e; border: 1px solid #333; border-radius: 10px; color: #aaa; cursor: pointer; transition: all 0.2s; font-size: 12px; }
.category-btn:hover { border-color: #6c5ce7; color: #fff; }
.category-btn.active { background: linear-gradient(135deg, #6c5ce7, #a855f7); border-color: transparent; color: #fff; }
.cat-icon { font-size: 20px; }
.cat-name { font-size: 11px; }

/* ============ 营销主题 ============ */
.marketing-container { margin-top: 10px; }
.marketing-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.marketing-btn { padding: 8px 14px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; color: #aaa; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.marketing-btn:hover { border-color: #e74c3c; color: #ff6b6b; }
.marketing-btn.active { background: #e74c3c; border-color: transparent; color: #fff; }

/* ============ 批量生成 ============ */
.generate-row { display: flex; gap: 12px; align-items: center; }
.generate-row .btn-generate { flex: 1; }
.batch-control { display: flex; align-items: center; gap: 4px; }
.btn-batch-minus, .btn-batch-plus { width: 30px; height: 30px; background: #1a1a2e; border: 1px solid #333; border-radius: 6px; color: #aaa; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-batch-minus:hover, .btn-batch-plus:hover { border-color: #6c5ce7; color: #fff; }
.batch-count { min-width: 24px; text-align: center; font-size: 14px; font-weight: 600; color: #6c5ce7; }
.btn-batch-gen { padding: 8px 14px; background: linear-gradient(135deg, #e17055, #f0a040); border: none; border-radius: 8px; color: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn-batch-gen:hover { opacity: 0.9; }

/* ============ 收藏 ============ */
.btn-fav-open { padding: 6px 14px; background: linear-gradient(135deg, #e17055, #f0a040); border: none; border-radius: 6px; color: #fff; font-size: 13px; cursor: pointer; margin-left: 10px; }
.btn-fav-open:hover { opacity: 0.9; }
.btn-sm.btn-fav:hover { border-color: #e17055; color: #e17055; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.modal-content { background: #1a1a2e; border: 1px solid #333; border-radius: 16px; width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #333; }
.modal-header h3 { color: #fff; font-size: 16px; }
.modal-close { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; }
.modal-close:hover { color: #fff; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }

.fav-item { padding: 12px; background: #0f0f1a; border: 1px solid #222; border-radius: 10px; margin-bottom: 10px; }
.fav-content { margin-bottom: 8px; }
.fav-prompt { font-size: 13px; color: #e0e0e0; line-height: 1.5; word-break: break-all; }
.fav-enhanced { font-size: 12px; color: #888; margin-top: 4px; }
.fav-tags { display: flex; gap: 6px; margin-top: 6px; }
.fav-tag { padding: 2px 8px; background: #2a2a4a; border-radius: 4px; font-size: 11px; color: #6c5ce7; }
.fav-time { font-size: 11px; color: #555; margin-top: 4px; }
.fav-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .generate-row { flex-direction: column; }
  .generate-row .btn-generate { width: 100%; }
}