/**
 * 提示词组合器 - 独立样式
 * ?prompt_combiner_local.html 提取?00% 保持原版样式不变
 */

/* ===== Reset for this page ===== */
.page-template-page-prompt-combiner body {
    margin: 0;
    padding: 0;
}

/* ===== CSS Variables ===== */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #10b981;
    --accent: #f59e0b;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

.dark {
    --primary: #818cf8;
    --primary-dark: #6366f1;
    --primary-light: #a5b4fc;
    --secondary: #34d399;
    --accent: #fbbf24;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border: #334155;
    --border-light: #1e293b;
}

/* Text selection highlight */
::selection {
    background: var(--primary);
    color: #ffffff;
}

::-moz-selection {
    background: var(--primary);
    color: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Microsoft YaHei', '微软雅黑', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

/* Header */
.header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.logo-text h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.logo-text span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn-icon {
    padding: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--border);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ===== Step Navigation (步骤? ===== */
.step-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 auto;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: relative;
}

.step-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 24px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    position: relative;
    flex: 1;
    max-width: 200px;
}

.step-tab:hover {
    color: var(--text-primary);
    background: rgba(99,102,241,0.03);
}

.step-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(99,102,241,0.04);
}

.step-tab.completed {
    color: var(--secondary);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    border: 2px solid var(--border);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.step-tab.active .step-number {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(99,102,241,0.35);
}

.step-tab.completed .step-number {
    background: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

/* 完成步骤用勾号替代数?*/
.step-tab.completed .step-number::after {
    content: '?;
    font-size: 0.75rem;
}
.step-tab.completed .step-number-text {
    display: none;
}

.step-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.3s;
}

.step-connector {
    display: none; /* 步骤条模式下隐藏连接线，用border-bottom代替 */
}

/* ===== Step Panel (步骤面板) ===== */
.step-panel {
    display: none;
    min-height: calc(100vh - 120px);
    background: var(--bg-secondary);
}

.step-panel.active {
    display: block;
    animation: stepPanelIn 0.35s ease;
}

@keyframes stepPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 步骤面板顶部标题?*/
.step-panel-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Step Stats (right side of step-panel-header) */
.step-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.stat-sep {
    color: var(--border);
    margin: 0 4px;
}
.step-stats strong {
    font-weight: 600;
    color: var(--primary);
}

.step-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
}

.step-panel-title svg {
    width: 22px;
    height: 22px;
    color: var(--primary);
    flex-shrink: 0;
}

.step-panel-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.step-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 步骤2：提示词组合 - 左右布局（仅作用?combiner-layout?*/
.combiner-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex !important;
    gap: 24px;
}

.combiner-layout.full-width {
    flex-direction: column;
}

/* 步骤2左侧区域 */
.step-panel-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 100%;
}

/* 步骤2右侧侧边?*/


/* Theme Toggle */
.theme-toggle {
    width: 48px;
    height: 28px;
    background: var(--bg-tertiary);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.3s;
}

.theme-toggle::after {
    content: '';
    width: 22px;
    height: 22px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 3px;
    transition: transform 0.3s;
}

.dark .theme-toggle::after {
    transform: translateX(20px);
}

/* Main Container */
.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    display: grid !important;
    gap: 24px;
}

/* Cards */
.card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.card-body {
    padding: 1.5rem;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-group-row .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.form-group-row .form-group .form-input {
    max-width: none;
}

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.6;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Prompt Input Area */
.prompt-area {
    position: relative;
}

.prompt-vars {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.var-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s;
}

.var-tag:hover {
    background: var(--primary);
    color: white;
}

/* Output Area */
.output-area {
    background: var(--bg-tertiary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.875rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    position: relative;
}

.output-placeholder {
    color: var(--text-muted);
    font-style: italic;
}
/* AI 生成中加载指示器 */
.ai-loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 80px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    padding: 20px;
}
.ai-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-light, #f1f5f9);
    border-top-color: var(--primary, #6366f1);
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

.output-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.output-area:hover .output-actions {
    opacity: 1;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 1.5rem;
}

.btn-generate {
    flex: 1;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Template Card Gallery */
.template-gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 12px 0;
    align-items: start;
}

.template-card {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: all 0.2s;
    background: var(--bg-tertiary);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.template-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.template-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.template-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-card .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-card .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 8px;
}

.template-card .no-image svg {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.template-card .no-image span {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.3;
}

/* Template Card - Text Only (preset selector) */
.template-gallery {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    align-items: center;
}

.template-card.text-only {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    min-height: 40px;
    width: auto;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.template-card.text-only .card-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}

.template-card.text-only:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.template-card.text-only.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.template-card.text-only.active .card-name {
    color: var(--primary);
}

/* Admin Variable Buttons */
.admin-var-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.admin-var-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.admin-var-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.presets-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preset-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.preset-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

.preset-item.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
}

/* Stats Card */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-item {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
}

.modal-sidebar {
    width: 300px;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-title {
    font-weight: 600;
    font-size: 0.875rem;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.modal-main {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.admin-tabs { display: flex; gap: 2px; background: var(--bg-tertiary); border-radius: var(--radius-md); padding: 3px; }
.admin-tab { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; background: transparent; color: var(--text-primary); border: none; cursor: pointer; transition: all 0.2s; opacity: 0.6; }
.admin-tab:hover { opacity: 0.85; }
.admin-tab.active { background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); opacity: 1; }

.categories-panel { padding: 1.25rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cat-add-row { display: flex; gap: 8px; }
.cat-add-row .form-input { flex: 1; }
.categories-list { display: flex; flex-direction: column; gap: 10px; }
.cat-item { display: flex; align-items: center; padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border); gap: 12px; transition: all 0.2s; }
.cat-item:hover { border-color: var(--primary); }
.cat-item-name { font-size: 0.9375rem; font-weight: 500; }
.cat-item-count { font-size: 0.75rem; color: var(--text-muted); background: var(--bg-tertiary); padding: 2px 8px; border-radius: 10px; }
.cat-item-actions { display: flex; gap: 6px; margin-left: auto; }
.cat-edit-btn { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; border: none; cursor: pointer; transition: all 0.15s; background: var(--bg-tertiary); color: var(--text-secondary); }
.cat-edit-btn:hover { background: var(--primary); color: white; }
.cat-del-btn { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; border: none; cursor: pointer; transition: all 0.15s; background: #fee2e2; color: #dc2626; }
.cat-del-btn:hover { background: #dc2626; color: white; }
.cat-name-input { flex: 1; padding: 4px 8px; border: 1px solid var(--primary); border-radius: 4px; font-size: 0.9375rem; outline: none; }

/* Style Tags */
.style-tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
.style-tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary); border: 1.5px solid transparent; cursor: pointer; transition: all 0.2s ease; user-select: none; }
.style-tag:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.25); color: var(--primary); transform: translateY(-1px); }
.style-tag.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-color: transparent; box-shadow: 0 2px 10px rgba(99,102,241,0.35); }
.style-tag-clear { padding: 6px 12px !important; font-size: 0.78rem !important; background: transparent !important; color: var(--text-muted) !important; border: 1px dashed var(--border) !important; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s; }
.style-tag-clear:hover { background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-style: solid !important; }

/* Watermark Section */
.watermark-row-layout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.watermark-row-layout .form-label { flex-shrink: 0; margin-bottom: 0; }
.watermark-row-layout .form-input { width: 200px; min-width: 160px; flex: none; margin-bottom: 0; }
.watermark-history { display: none; flex-wrap: wrap; gap: 6px; align-items: center; }
.watermark-history-tag { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); cursor: pointer; transition: all 0.18s ease; white-space: nowrap; }
.watermark-history-tag:hover { background: rgba(99,102,241,0.12); color: var(--primary); border-color: rgba(99,102,241,0.35); transform: translateY(-1px); }

/* Ratio Selector */
.ratio-section { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ratio-section .form-label { margin-bottom: 0; }
.ratio-section .ratio-input { width: 200px; margin-bottom: 0; }
.ratio-selector { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; margin-top: 10px; }
.ratio-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px; background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.18s ease; min-height: 72px; }
.ratio-card:hover { background: var(--bg-tertiary); border-color: rgba(99,102,241,0.4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ratio-card.active { background: rgba(99,102,241,0.1); border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
.ratio-card.active .ratio-value { color: var(--primary); font-weight: 600; }
.ratio-card.active .ratio-label { color: var(--primary); }
.ratio-preview { border: 1.5px solid var(--text-muted); border-radius: 3px; opacity: 0.6; transition: all 0.18s ease; }
.ratio-card:hover .ratio-preview { opacity: 1; border-color: var(--primary); }
.ratio-card.active .ratio-preview { opacity: 1; border-color: var(--primary); }
.ratio-value { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); line-height: 1.2; }
.ratio-label { font-size: 0.7rem; color: var(--text-muted); line-height: 1.2; }

/* AI Prompt History Dropdown */
.ai-prompt-history { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ai-prompt-history-label { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.ai-prompt-dropdown-wrap { position: relative; flex: 1; min-width: 0; }
.ai-prompt-dropdown-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 5px 10px; border-radius: 6px;
    background: var(--bg-tertiary); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 0.8rem; cursor: pointer;
    transition: all 0.15s ease;
}
.ai-prompt-dropdown-trigger:hover { border-color: rgba(99,102,241,0.4); color: var(--text-primary); }
.ai-prompt-dropdown-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-prompt-dropdown-trigger svg { flex-shrink: 0; margin-left: 6px; transition: transform 0.2s ease; }
.ai-prompt-dropdown-trigger.active svg { transform: rotate(180deg); }
.ai-prompt-dropdown-menu {
    position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-secondary); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    max-height: 280px; overflow-y: auto; z-index: 100;
    display: none; flex-direction: column;
}
.ai-prompt-dropdown-menu.open { display: flex; }
.ai-prompt-dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; transition: background 0.12s ease;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.ai-prompt-dropdown-item:last-child { border-bottom: none; }
.ai-prompt-dropdown-item:hover { background: rgba(99,102,241,0.08); }
.ai-prompt-dropdown-date {
    font-size: 0.7rem; color: var(--text-muted); white-space: nowrap;
    flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.ai-prompt-dropdown-text {
    flex: 1; min-width: 0; font-size: 0.8rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-prompt-dropdown-item:hover .ai-prompt-dropdown-text { color: var(--text-primary); }
.ai-prompt-dropdown-del {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: var(--text-muted); background: transparent;
    transition: all 0.12s ease; line-height: 1;
}
.ai-prompt-dropdown-del:hover { color: #ef4444; background: rgba(239,68,68,0.12); }

/* Styles Panel */
.styles-panel { padding: 1.5rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.styles-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.styles-header h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.styles-list { display: flex; flex-direction: column; gap: 10px; }
.style-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all 0.2s; }
.style-item:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.style-item-info { flex: 1; min-width: 0; }
.style-item-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.style-item-preview { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.style-item-actions { display: flex; gap: 6px; flex-shrink: 0; padding-top: 2px; }
.style-act-btn { padding: 5px 11px; border-radius: 6px; font-size: 0.76rem; border: none; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 4px; }
.style-act-btn.edit { background: rgba(99,102,241,0.1); color: var(--primary); }
.style-act-btn.edit:hover { background: var(--primary); color: #fff; }
.style-act-btn.del { background: #fef2f2; color: #dc2626; }
.style-act-btn.del:hover { background: #dc2626; color: #fff; }
.style-edit-form { display: none; flex-direction: column; gap: 12px; padding: 18px; background: var(--bg-secondary); border: 2px solid var(--primary); border-radius: var(--radius-md); box-shadow: 0 0 20px rgba(99,102,241,0.1); animation: fadeIn 0.2s ease; }
.style-edit-form.show { display: flex; }
.style-edit-row { display: flex; gap: 10px; align-items: center; }
.style-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }

.modal-footer {
    padding: 1rem 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg-secondary);
}

/* Admin List Item */
.admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.admin-item:hover { background: var(--bg-tertiary); }
.admin-item.active { background: rgba(99, 102, 241, 0.1); }

.admin-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-item-name {
    font-weight: 500;
    font-size: 0.9375rem;
}

.admin-item-category {
    font-size: 0.6875rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.admin-item-actions {
    display: flex;
    gap: 4px;
}

.admin-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}

.admin-btn:hover { background: var(--bg-primary); color: var(--text-primary); }
.admin-btn.copy:hover { background: rgba(99,102,241,0.1); color: var(--primary); }
.admin-btn.delete:hover { background: #fef2f2; color: #ef4444; }

/* Category Tabs */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.category-tab {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: none;
    transition: all 0.2s;
}

.category-tab:hover { background: var(--bg-tertiary); }
.category-tab.active { background: var(--primary); color: white; }

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    animation: toastIn 0.3s ease;
    min-width: 280px;
}

.toast.success { border-left-color: var(--secondary); }
.toast.error { border-left-color: #ef4444; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

/* History Panel */
.history-panel {
    max-height: 300px;
    overflow-y: auto;
}

.history-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
    cursor: pointer;
}

.history-item:last-child { border-bottom: none; }

.history-icon {
    width: 32px;
    height: 32px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.history-content {
    flex: 1;
    min-width: 0;
}

.history-subject {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-page-source {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    white-space: nowrap;
    vertical-align: middle;
}

.history-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-preview {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Mobile Menu */
.btn-mobile-menu {
    display: none !important;
    padding: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.btn-mobile-menu:hover { background: var(--border); color: var(--text-primary); }

.mobile-menu {
    display: none;
    position: fixed;
    top: 57px;
    left: 0; right: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    z-index: 99;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-lg);
}
.mobile-menu.open { display: flex; animation: slideDown 0.2s ease; }
.mobile-menu-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mobile-menu-row .btn { flex: 1; justify-content: center; white-space: nowrap; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Tooltip */
.tooltip { position: relative; }
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
    margin-bottom: 8px;
}
.tooltip:hover::after { opacity: 1; visibility: visible; }

.hidden { display: none !important; }

/* ===== 多模态创作面板样?===== */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.mm-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mm-section-title svg { width: 20px; height: 20px; color: var(--primary); }

/* 当标题栏显示时，创作内容区紧贴标题栏 */
.image-tab-title-bar + .mm-input-section {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-top: -1px;
}

/* ===== Step3: 图片生成 - 左右分栏布局 ===== */
.image-split-layout {
    display: flex !important;
    gap: 24px;
    flex-direction: row;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 20px;
}

.image-split-left {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.image-split-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-split-left .image-tabs-wrapper {
    padding: 0;
}

.image-split-left .image-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: auto;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - 140px);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.image-split-left .image-tab {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 0.8125rem;
}

.image-split-left .image-tab-batch-btn {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
    padding: 8px 14px;
}

.image-split-left-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 4px;
}

.image-tabs-placeholder {
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
    padding: 32px 16px;
    line-height: 1.6;
}

.image-split-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 1024px) {
    .image-split-layout {
        flex-direction: column;
    }
    .image-split-left {
        width: 100%;
        position: static;
        max-height: none;
    }
    .image-split-left .image-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 10px 16px;
    }
    .image-split-left .image-tab {
        max-width: 140px;
        width: auto;
        padding: 5px 12px;
        font-size: 0.75rem;
    }
    .image-split-left .image-tab-batch-btn {
        margin-left: auto;
        margin-top: 0;
        width: auto;
        padding: 5px 14px;
    }
}

.mm-input-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 20px;
}
.mm-input-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.mm-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
    transition: border-color 0.2s;
}
.mm-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* Send to Multimodal Button */
.btn-send-mm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.btn-send-mm:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124,58,237,0.4); }
.btn-send-mm svg { width: 16px; height: 16px; }

/* Pipeline */
.mm-pipeline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mm-pipeline-step { display: flex; align-items: center; gap: 8px; }
.mm-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1.5px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.mm-step-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(99,102,241,0.05); }
.mm-step-btn.active { border-color: var(--primary); background: var(--primary); color: white; }
.mm-step-btn svg { width: 14px; height: 14px; }
.mm-pipeline-arrow { color: var(--text-muted); font-size: 1.2rem; user-select: none; }

/* API Config */
.api-config-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 20px;
}
.api-providers {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.api-provider-card {
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: all 0.2s;
}
.api-provider-card:hover { border-color: var(--primary-light); }
.api-provider-card.enabled { border-color: var(--primary); }
.api-provider-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.api-provider-name { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; }
.api-provider-logo { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; }
.api-toggle { width: 40px; height: 22px; background: var(--bg-tertiary); border-radius: 11px; position: relative; cursor: pointer; border: 1px solid var(--border); transition: all 0.3s; }
.api-toggle.on { background: var(--primary); border-color: var(--primary); }
.api-toggle::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 1px; left: 2px; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.api-toggle.on::after { transform: translateX(18px); }
.api-key-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-top: 8px;
    transition: border-color 0.2s;
}
.api-key-input:focus { outline: none; border-color: var(--primary); }
.api-key-status { font-size: 0.7rem; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.api-key-status.ok { color: var(--secondary); }
.api-key-status.empty { color: var(--text-muted); }

/* Image Generation */
.img-gen-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 20px;
}
.img-gen-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.img-size-select, .img-style-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.img-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(99,102,241,0.1);
    color: var(--primary);
}
.img-provider-badge svg { width: 12px; height: 12px; }
.btn-generate-img {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}
.btn-generate-img:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(99,102,241,0.4); }
.btn-generate-img:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-generate-img svg { width: 16px; height: 16px; }
.img-results { display: flex; flex-wrap: wrap; flex-direction: row; gap: 12px; margin-top: 16px; align-items: flex-start; }
.img-group { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.img-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    letter-spacing: 0.02em;
    width: 100%;
    flex-basis: 100%;
}
.img-group-header:first-child {
    margin-top: 0;
}
.img-result-card { width: 220px; flex-shrink: 0; background: var(--bg-secondary); border-radius: var(--radius-md); overflow: hidden; border:1px solid var(--border); transition: all 0.2s; position: relative; }
.img-result-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.img-result-card img { width: 100%; height: 240px; object-fit: cover; display: block; background: var(--bg-tertiary); }
.img-saved-badge { position: absolute; top: 8px; left: 8px; background: rgba(16,185,129,0.9); color: #fff; font-size: 0.6875rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; z-index: 2; backdrop-filter: blur(4px); pointer-events: none; }
.img-result-actions { display: flex; gap: 4px; padding: 6px 8px; justify-content: flex-end; }
.img-result-btn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; }
.img-result-btn.download { background: rgba(16,185,129,0.1); color: var(--secondary); }
.img-result-btn.download:hover { background: var(--secondary); color: white; }
.img-result-btn.copy { background: rgba(99,102,241,0.1); color: var(--primary); }
.img-result-btn.copy:hover { background: var(--primary); color: white; }
.img-result-btn svg { width: 12px; height: 12px; }

/* 图片加载失败占位 */
.img-load-error {
    display: none;
    width: 100%;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 20px;
    text-align: center;
}
.img-load-error svg {
    width: 40px;
    height: 40px;
    opacity: 0.35;
    stroke: var(--text-muted);
}

/* Batch Download Bar */
.img-batch-download-bar {
    display: flex;
    justify-content: center;
    padding: 16px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    width: 100%;
    grid-column: 1 / -1;
}
.btn-batch-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 10px rgba(16,185,129,0.3);
}
.btn-batch-download:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(16,185,129,0.4); }
.btn-batch-download:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-batch-download svg { width: 16px; height: 16px; }

/* Image Loading Skeleton */
.img-skeleton { width: 100%; aspect-ratio: 1; background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; display: flex; align-items: center; justify-content: center; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.img-skeleton-text { color: var(--text-muted); font-size: 0.8rem; }

/* 图片生成错误状态 */
.img-gen-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 32px 24px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    margin-top: 8px;
}
.img-gen-error-icon svg {
    width: 44px;
    height: 44px;
    color: #ef4444;
    opacity: 0.8;
}
.img-gen-error-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ef4444;
}
.img-gen-error-msg {
    font-size: 0.8125rem;
    color: var(--text-muted);
    max-width: 400px;
    line-height: 1.5;
    word-break: break-word;
}
.img-gen-error-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 18px;
    background: rgba(99,102,241,0.1);
    color: var(--primary);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.img-gen-error-retry:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}
.img-gen-error-retry svg {
    width: 14px;
    height: 14px;
}

/* Chart Panel */
.chart-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 20px;
}
.chart-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.chart-canvas-wrap {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid var(--border);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.chart-canvas-wrap canvas { max-width: 100%; }
.chart-empty { color: var(--text-muted); font-size: 0.875rem; text-align: center; padding: 60px 20px; }
.chart-empty svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: 0.4; display: block; }

/* Slide Panel */
.slide-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 20px;
}
.slide-preview-wrap { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 16px; border: 1px solid var(--border); min-height: 200px; display: flex; align-items: center; justify-content: center; }
.slide-iframe { width: 100%; height: 420px; border: none; border-radius: var(--radius-sm); background: white; }
.slide-empty { color: var(--text-muted); font-size: 0.875rem; text-align: center; padding: 60px 20px; width: 100%; }
.slide-empty svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: 0.4; display: block; }

/* Social Publish */
.social-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 20px;
}
.social-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.social-platform-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--bg-secondary); cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--text-primary); }
.social-platform-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-platform-btn.douyin:hover { border-color: #fe2c55; background: rgba(254,44,85,0.05); }
.social-platform-btn.xiaohongshu:hover { border-color: #fe2c55; background: rgba(254,44,85,0.05); }
.social-platform-btn.wechat:hover { border-color: #07c160; background: rgba(7,193,96,0.05); }
.social-platform-btn.weibo:hover { border-color: #e6162d; background: rgba(230,22,45,0.05); }
.social-platform-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.social-platform-name { font-size: 0.875rem; font-weight: 600; }
.social-platform-desc { font-size: 0.7rem; color: var(--text-muted); text-align: center; }

/* ===== 社交发布平台卡片 ===== */
.publish-platforms-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-top: 0;
}
.publish-platform-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: all 0.25s ease;
}
.publish-platform-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}
.publish-platform-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.publish-platform-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.publish-platform-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}

.publish-platform-info { flex: 1; min-width: 0; }
.publish-platform-name { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); }
.publish-platform-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

.publish-ai-desc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 20px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}
.publish-ai-desc svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }

.publish-gen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 40px);
    margin: 12px 20px;
    padding: 10px 0;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}
.publish-gen-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.publish-gen-btn svg { width: 14px; height: 14px; }

.publish-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(50% - 24px);
    margin: 8px 0 4px 20px;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
}
.publish-copy-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.publish-copy-btn svg { width: 14px; height: 14px; }

.publish-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(50% - 24px);
    margin: 8px 20px 4px 0;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1.5px solid var(--accent, #10b981);
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent, #10b981);
}
.publish-export-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); background: rgba(16, 185, 129, 0.14); }
.publish-export-btn svg { width: 14px; height: 14px; }



.publish-textareas {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.publish-field { display: flex; flex-direction: column; gap: 4px; }
.publish-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.publish-field-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}
.publish-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s;
}
.publish-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.publish-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
    transition: border-color 0.2s;
}
.publish-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.publish-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 16px;
    padding: 10px 0;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    text-align: center;
}
.publish-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Multimodal Container */
.mm-container { max-width: 1400px; margin: 0 auto; padding: 2rem; }

/* ===== 响应式布局 ===== */
@media (max-width: 1024px) {
    .main-container { grid-template-columns: 1fr; padding: 1.5rem; gap: 20px; }
    .step-panel-inner { grid-template-columns: 1fr; }
    .sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
    .topic-cards { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .step-nav { gap: 0; }
    .step-tab { padding: 10px 12px 8px; gap: 4px; }
    .step-number { width: 24px; height: 24px; font-size: 0.75rem; }
    .step-label { font-size: 0.6875rem; }
    .step-panel-header { padding: 1rem 1.25rem; }
    .step-panel-title { font-size: 0.9375rem; }
    .step-panel-desc { font-size: 0.75rem; }
    .step-panel-inner { grid-template-columns: 1fr; padding: 1rem; gap: 16px; }
    .mm-container { padding: 1rem; }
    .api-providers { grid-template-columns: 1fr; }
    .img-results { gap: 8px; }
    .img-result-card { }
    .topic-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .header { padding: 0.75rem 1rem; }
    .header-content { flex-wrap: wrap; gap: 8px; }
    .step-nav { order: 3; width: 100%; }
    .step-tab { padding: 8px 6px; flex: 1; max-width: none; }
    .step-tab .step-label { display: none; }
    .step-number { width: 22px; height: 22px; font-size: 0.75rem; }
    .logo-text h1 { font-size: 1rem; }
    .logo-text span { display: none; }
    .header-actions > *:not(.btn-mobile-menu):not(#user-status):not(#credit-badge):not(#user-credits-wrapper) { display: none; }
    #user-status { display: flex !important; }
    .credit-badge { display: flex !important; }
    .user-name { display: none; }
    .user-badge { display: inline !important; font-size: 0.65rem; padding: 2px 6px; }
    .user-status.logged-in { padding: 4px; gap: 0; }
    .user-login-btn span { display: none; }
    .btn-mobile-menu { display: flex !important; }
    .step-panel-header { padding: 0.875rem 1rem; flex-wrap: wrap; gap: 8px; }
    .step-panel-title { font-size: 0.875rem; }
    .step-panel-desc { display: none; }
    .step-panel-actions { width: 100%; flex-direction: column; gap: 8px; }
    .step-stats { gap: 4px; flex-wrap: wrap; justify-content: center; font-size: 0.7rem; }
    .step-panel-actions .btn-generate,
    .step-panel-actions .btn-send-mm { width: 100%; flex: none; }
    .step-panel-inner { padding: 0.75rem; gap: 12px; }
    .sidebar { display: flex; flex-direction: column; gap: 12px; }
    .card-header { padding: 1rem; flex-wrap: wrap; gap: 8px; }
    .card-body { padding: 1rem; }
    .btn-generate { padding: 12px 16px; font-size: 0.9rem; }
    .btn-send-mm { padding: 12px 16px; font-size: 0.9rem; }
    .combiner-actions-row { flex-direction: column !important; align-items: stretch !important; }
    .combiner-actions-row .btn-generate,
    .combiner-actions-row .btn-send-mm,
    .combiner-actions-row .btn-ghost { width: 100%; flex: none; font-size: 0.9rem; padding: 12px 16px; }
    .combiner-actions-row .btn-ghost { justify-content: center; }
    .form-input, .form-textarea, .form-select { font-size: 16px; }
    .form-textarea { min-height: 100px; }
    .watermark-row-layout { flex-direction: column; align-items: stretch; gap: 8px; }
    .watermark-row-layout .form-input { width: 100%; min-width: unset; }
    .watermark-history { gap: 6px; }
    .ratio-selector { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .ratio-card { min-height: 64px; padding: 8px 2px; }
    .ratio-value { font-size: 0.75rem; }
    .ratio-label { font-size: 0.65rem; }
    .style-tags-container { gap: 6px; }
    .style-tag { padding: 6px 12px; font-size: 0.8rem; }
    .template-gallery { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-value { font-size: 1.25rem; }
    .toast-container { bottom: 1rem; right: 0.75rem; left: 0.75rem; }
    .toast { min-width: unset; width: 100%; }
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal { max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; width: 100%; }
    .modal-header { padding: 1rem 1.25rem; flex-wrap: wrap; gap: 8px; }
    .modal-title { font-size: 1rem; }
    .modal-body { flex-direction: column; }
    .modal-sidebar { display: none; }
    .modal-main { padding: 1rem; }
    .modal-footer { padding: 0.75rem 1rem; }
    .admin-tabs { width: 100%; }
    .admin-tab { flex: 1; text-align: center; padding: 6px 8px; font-size: 0.75rem; }
    .category-tabs { padding: 0.75rem 1rem; gap: 6px; }
    .category-tab { padding: 4px 12px; font-size: 0.75rem; }
    .output-area { padding: 1rem; min-height: 150px; font-size: 0.8125rem; }
    .output-actions { opacity: 1; }
    .topic-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 375px) {
    .logo-icon { width: 32px; height: 32px; }
    .card-body { padding: 0.75rem; }
    .template-gallery { grid-template-columns: repeat(3, 1fr); }
    .topic-cards { grid-template-columns: 1fr; }
}

/* ===== 图片灯箱 ===== */
.img-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.img-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}
.img-lightbox-close {
    position: absolute;
    top: -40px; right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    z-index: 10;
    padding: 4px 8px;
    line-height: 1;
}
.img-lightbox-close:hover { opacity: 0.7; }
.img-lightbox-nav {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
}
.img-lightbox-arrow {
    pointer-events: auto;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}
.img-lightbox-arrow:hover { background: rgba(255,255,255,0.3); }
.img-lightbox-counter {
    position: absolute;
    bottom: -32px;
    left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
}
}

/* ===== 登录状态组?===== */
.user-status {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.user-status.logged-in {
    padding: 4px 10px 4px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.user-status.logged-in:hover { border-color: var(--primary); }

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-primary);
    flex-shrink: 0;
}
.user-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid var(--bg-primary);
    flex-shrink: 0;
}

.user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.user-status-admin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: all 0.2s;
    text-decoration: none;
}
.user-status-admin:hover {
    background: rgba(99,102,241,0.1);
    color: var(--primary);
}

.user-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: all 0.2s;
    text-decoration: none;
}
.user-logout:hover {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
}

.user-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.user-login-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99,102,241,0.05);
}

/* ===== 会员系统 UI ===== */

/* 积分徽章（header中显示） */
.credit-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8125rem;
    transition: border-color 0.2s;
}
.credit-badge:hover { border-color: var(--accent); }

.member-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

.credit-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.credit-count:hover { text-decoration: underline; }

.credit-log-link {
    font-size: 0.6875rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    transition: all 0.2s;
    white-space: nowrap;
}
.credit-log-link:hover {
    color: var(--accent);
    background: var(--bg-secondary);
}

/* 积分明细弹窗 */
.credit-log-content {
    max-width: 640px;
    width: 94%;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.credit-log-body {
    overflow-y: auto;
    max-height: 60vh;
    margin-top: 16px;
}
.credit-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.credit-log-table th {
    padding: 8px 10px;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.credit-log-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}
.credit-log-table tr:hover td {
    background: var(--bg-secondary);
}
.credit-log-time {
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.credit-change-plus {
    color: var(--success, #10b981);
    font-weight: 700;
}
.credit-change-minus {
    color: var(--danger, #ef4444);
    font-weight: 700;
}
.credit-log-balance {
    font-weight: 600;
    color: var(--accent);
}
.credit-log-reason {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.btn-topup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}
.btn-topup:hover {
    background: var(--accent);
    color: white;
}

/* 充值弹?*/
.topup-modal-content {
    max-width: 560px;
    width: 92%;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}

.topup-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.topup-current {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.topup-current strong {
    color: var(--accent);
    font-size: 1.25rem;
}

.topup-packages {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.topup-pkg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px 16px;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.topup-pkg:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.topup-pkg.popular {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(99,102,241,0.03), rgba(99,102,241,0.08));
}

.topup-pkg-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 2px 10px;
    background: var(--primary);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 0 var(--radius-lg) 0 var(--radius-md);
    letter-spacing: 0.05em;
}

.topup-pkg-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.topup-pkg-credits {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.topup-pkg-credits small {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

.topup-pkg-bonus {
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #ef4444;
}

.topup-pkg-price {
    margin-top: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent);
}
.topup-pkg-price::before {
    content: '¥';
    font-size: 0.75rem;
    font-weight: 500;
}

/* 登录/注册弹窗 */
.auth-modal-content {
    max-width: 400px;
    width: 92%;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
}

.auth-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.auth-tab.active {
    background: var(--bg-primary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.auth-tab:hover:not(.active) {
    color: var(--text-primary);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.auth-submit {
    width: 100%;
    padding: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-top: 4px;
}

/* 移动端充值弹窗适配 */
@media (max-width: 640px) {
    .topup-packages {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .topup-pkg { padding: 16px 8px 12px; }
    .topup-pkg-credits { font-size: 1.25rem; }
    .credit-badge { padding: 2px 6px 2px 2px; gap: 4px; font-size: 0.75rem; }
    .member-level-badge { font-size: 0.5625rem; padding: 1px 6px; }
}

/* ===== AI 文本生成 ===== */
.ai-output-section {
    margin-top: 20px;
}
.ai-output-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.spin {
    animation: spin 1s linear infinite;
}
.api-provider-fields {
    margin-top: 8px;
}
.api-key-status.configured {
    color: #10b981;
}

/* ===== 主题卡片 ===== */
.topic-cards {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: start;
}
.topic-card {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.topic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent));
    opacity: 0;
    transition: opacity 0.3s;
}
.topic-card:hover {
    border-color: var(--primary-light, #818cf8);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}
.topic-card:hover::before {
    opacity: 1;
}
.topic-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    background: linear-gradient(135deg, var(--bg-secondary, #f8fafc), var(--bg-primary, #ffffff));
}
.topic-card-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-dark, #4f46e5));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
.topic-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.topic-card-body {
    padding: 16px 20px;
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: var(--border, #e2e8f0) transparent;
    max-height: 400px;
    overflow-y: auto;
}
.topic-card-body::-webkit-scrollbar {
    width: 5px;
}
.topic-card-body::-webkit-scrollbar-track {
    background: transparent;
}
.topic-card-body::-webkit-scrollbar-thumb {
    background: var(--border, #e2e8f0);
    border-radius: 4px;
}
.topic-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-light, #f1f5f9);
    background: var(--bg-secondary, #f8fafc);
}
.topic-send-btn {
    white-space: nowrap;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}
.topic-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}
.topic-actions-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-light, #f1f5f9);
}
.topic-actions-bar .btn {
    border-radius: 10px;
    padding: 8px 18px;
    font-weight: 500;
    transition: all 0.2s;
}
.topic-actions-bar .btn:hover {
    transform: translateY(-1px);
}

/* ===== 主题合集卡片 ===== */
.topic-card-collection {
    border: 2px solid var(--primary, #6366f1);
    background: linear-gradient(135deg, var(--bg-primary, #ffffff) 0%, var(--bg-secondary, #f8fafc) 100%);
    position: relative;
}
body.dark .topic-card-collection {
    background: linear-gradient(135deg, var(--bg-primary, #0f172a) 0%, var(--bg-secondary, #1e293b) 100%);
}
.topic-card-collection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary, #6366f1), var(--primary-light, #818cf8));
    border-radius: 16px 16px 0 0;
}
.topic-card-collection:hover {
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.18);
}

.collection-badge {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-dark, #4f46e5)) !important;
    color: #fff !important;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.collection-topic-names {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collection-topic-name {
    font-size: 0.9375rem;
    color: var(--text-primary, #1e293b);
    line-height: 1.6;
    padding: 6px 10px;
    background: var(--bg-tertiary, #f1f5f9);
    border-radius: 8px;
    border-left: 3px solid var(--primary, #6366f1);
}
body.dark .collection-topic-name {
    background: var(--bg-tertiary, #334155);
    color: var(--text-primary, #f1f5f9);
}
.collection-topic-num {
    font-weight: 700;
    color: var(--primary, #6366f1);
    margin-right: 6px;
}

/* ===== 主题选择弹窗 ===== */
.topic-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.topic-select-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-secondary, #f8fafc);
}
.topic-select-item:hover {
    border-color: var(--primary, #6366f1);
    background: var(--bg-tertiary, #f1f5f9);
}
.topic-select-idx {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.topic-select-info {
    flex: 1;
    min-width: 0;
}
.topic-select-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin-bottom: 4px;
}
.topic-select-preview {
    font-size: 0.8125rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ===== 深色模式适配 ===== */
body.dark .topic-card {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
body.dark .topic-card:hover {
    border-color: var(--primary-light, #a5b4fc);
    box-shadow: 0 8px 24px rgba(129, 140, 248, 0.1), 0 2px 8px rgba(0,0,0,0.15);
}
body.dark .topic-card-header {
    background: linear-gradient(135deg, var(--bg-tertiary, #334155), var(--bg-secondary, #1e293b));
    border-color: var(--border, #334155);
}
body.dark .topic-card-footer {
    background: var(--bg-tertiary, #334155);
    border-color: var(--border, #334155);
}
body.dark .topic-card-body::-webkit-scrollbar-thumb {
    background: var(--border, #475569);
}
body.dark .topic-select-item {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}
body.dark .topic-select-item:hover {
    background: var(--bg-tertiary, #0f172a);
    border-color: var(--primary, #818cf8);
}

/* ===== Step1: AI文本生成 - 左右分栏布局 ===== */
.plan-lr-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-height: calc(100vh - 160px);
    padding: 1.5rem 2rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 左侧操作面板 */
.plan-left-panel {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* 左侧字段分组 */
.plan-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plan-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.plan-topic-input {
    min-height: 48px !important;
    max-height: 80px !important;
    resize: none !important;
}
.plan-requirement-input {
    min-height: 400px !important;
    max-height: 400px !important;
    resize: none !important;
}

/* 历史记录切换按钮 */
.plan-history-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}
.plan-history-toggle:hover {
    border-color: var(--primary-light);
    color: var(--primary);
    background: var(--primary-bg, rgba(99,102,241,0.06));
}

/* 生成按钮?*/
.plan-btn-group {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.plan-clear-btn {
    flex: 1;
    font-size: 0.75rem;
    justify-content: center;
}
.plan-generate-btn {
    flex: 2;
    justify-content: center;
}

/* 右侧结果面板 */
.plan-right-panel {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 320px - 20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-right-panel .ai-output-section {
    display: block !important;
    margin: 0;
    padding: 0;
}
.plan-output-area {
    min-height: 200px;
}

/* ===== Step1 旧兼容保留（avoid breakage?===== */
.plan-vertical-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.plan-input-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.plan-textarea-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plan-controls-wrap {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-output-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.plan-output-row .ai-output-section {
    display: block !important;
    margin: 0;
    padding: 0;
}
.plan-output-row .output-area {
    min-height: 280px;
}

/* API 状态卡?*/
.api-config-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.api-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.api-card-title svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

/* 控制卡片 */
.control-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
}
.control-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.control-card .form-select {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.75rem;
}

/* 操作按钮?*/
.control-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}
.control-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

/* ===== Step1 列标?===== */

.plan-col-header {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.plan-output-row .ai-output-section {
    display: block !important;
    margin: 0;
    padding: 0;
}

.plan-output-row .output-area {
    min-height: 280px;
}

/* 输出区空状态优?*/
.plan-output-row .output-area .output-placeholder,
.plan-right-panel .output-area .output-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    font-style: normal;
    font-size: 0.875rem;
    text-align: center;
    gap: 12px;
}
.plan-output-row .output-area .output-placeholder::before,
.plan-right-panel .output-area .output-placeholder::before {
    content: '';
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath d='M12 2a8 8 0 0 0-8 8c0 3.4 2.1 6.3 5 7.5V20h6v-2.5c2.9-1.2 5-4.1 5-7.5a8 8 0 0 0-8-8z'/%3E%3Cpath d='M9 22h6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

/* ===== Step1 右侧面板：主题卡片竖?+ output-area 去边?===== */
.plan-right-panel .topic-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: unset;
}
/* 去掉 output-area 虚线边框，让内容直接显示 */
.plan-right-panel .output-area,
.plan-output-row .output-area {
    border: none !important;
    background: transparent !important;
    max-height: none !important;
    overflow-y: visible !important;
}
.plan-right-panel .collection-topic-names {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    column-count: 3;
}

/* ===== 提示词组合步?- 多主题标签栏 ===== */
.combiner-tabs-wrapper {
    /* gap ?.step-panel-left 控制 */
}

.combiner-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 12px 16px;
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    scrollbar-width: thin;
    scrollbar-color: var(--border, #e2e8f0) transparent;
}

.combiner-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combiner-tab:hover {
    border-color: var(--primary, #6366f1);
    color: var(--text-primary, #1e293b);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.combiner-tab.active {
    background: var(--primary, #6366f1);
    color: #fff;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.combiner-tab-status {
    font-size: 0.75rem;
    line-height: 1;
}

.combiner-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 暗色模式 */
body.dark .combiner-tabs {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border, #334155);
}

body.dark .combiner-tab {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-secondary, #94a3b8);
    border-color: var(--border, #334155);
}

body.dark .combiner-tab:hover {
    border-color: var(--primary, #818cf8);
    color: var(--text-primary, #f1f5f9);
}

body.dark .combiner-tab.active {
    background: var(--primary, #818cf8);
    color: #fff;
    border-color: var(--primary, #818cf8);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* ===== 图片生成多标签栏 ===== */
/* 图片标签标题栏（创作内容上方?*/
.image-tab-title-bar {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 10px 16px;
    margin-bottom: 0;
}
.image-tab-title-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
body.dark .image-tab-title-bar {
    background: linear-gradient(135deg, #d97706, #b45309);
}

.image-tabs-wrapper {
    padding: 0 0 0 0;
}

.image-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 16px;
    background: var(--bg-primary, #ffffff);
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    border: 1px solid var(--border, #e2e8f0);
    border-top: none;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    scrollbar-width: thin;
    scrollbar-color: var(--border, #e2e8f0) transparent;
}

.image-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-tab:hover {
    border-color: #f59e0b;
    color: var(--text-primary, #1e293b);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.image-tab.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-color: #d97706;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.image-tab-status {
    font-size: 0.6875rem;
    line-height: 1;
}

.image-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 批量生成按钮（标签栏右侧?*/
.image-tab-batch-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    margin-left: auto;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.image-tab-batch-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}
.image-tab-batch-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.image-tab-batch-btn:disabled:hover {
    box-shadow: none;
}


/* 暗色模式 */
body.dark .image-tabs {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border, #334155);
}

body.dark .image-tab {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-secondary, #94a3b8);
    border-color: var(--border, #334155);
}

body.dark .image-tab:hover {
    border-color: #f59e0b;
    color: var(--text-primary, #f1f5f9);
}

body.dark .image-tab.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-color: #d97706;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
    border-color: #d97706;
}

/* ===== Step1 移动端响应式 ===== */
@media (max-width: 1024px) {
    .plan-lr-layout {
        flex-direction: column;
    }
    .plan-left-panel {
        width: 100%;
        position: static;
        max-height: none;
    }
    .plan-right-panel .collection-topic-names {
        column-count: 2;
    }
    /* 旧布局兼容 */
    .plan-input-row {
        flex-direction: column;
    }
    .plan-controls-wrap {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .plan-controls-wrap > * {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .plan-col-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .plan-col-header .btn-send-mm {
        width: 100%;
        justify-content: center;
    }
    .plan-right-panel .collection-topic-names {
        column-count: 1;
    }
    .plan-right-panel .topic-card-body {
        padding: 10px 14px;
    }
}

/* ===== AI输出 Markdown 渲染样式 ===== */
.topic-card-body .md-h {
    margin: 14px 0 8px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}
.topic-card-body h2.md-h {
    font-size: 1.0625rem;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.topic-card-body h3.md-h {
    font-size: 1rem;
}
.topic-card-body h4.md-h {
    font-size: 0.9375rem;
}
.topic-card-body h5.md-h {
    font-size: 0.875rem;
}
.topic-card-body .md-list {
    margin: 8px 0;
    padding-left: 20px;
    line-height: 1.8;
}
.topic-card-body .md-li {
    margin-bottom: 4px;
}
.topic-card-body .md-code {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--primary, #6366f1);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.topic-card-body .md-hr {
    border: none;
    height: 1px;
    background: var(--border, #e2e8f0);
    margin: 14px 0;
}
.topic-card-body p {
    margin: 0;
}
.topic-card-body strong {
    color: var(--text-primary);
    font-weight: 600;
}
.topic-card-body em {
    color: var(--text-muted);
    font-style: italic;
}

/* 深色模式 Markdown 样式 */
body.dark .topic-card-body .md-code {
    background: var(--bg-tertiary, #334155);
    color: var(--primary-light, #a5b4fc);
}
body.dark .topic-card-body .md-hr {
    background: var(--border, #475569);
}
body.dark .topic-card-body h2.md-h {
    border-bottom-color: var(--border, #475569);
}


/* ===== 图片数量选择?===== */
.img-n-select {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}
.img-n-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-right: 4px;
}
.img-n-btn {
    width: 32px;
    height: 28px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img-n-btn:hover {
    border-color: var(--primary-light, #818cf8);
    color: var(--primary, #6366f1);
}
.img-n-btn.active {
    border-color: var(--primary, #6366f1);
    background: rgba(99,102,241,0.08);
    color: var(--primary, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}
body.dark .img-n-btn {
    border-color: var(--border, #334155);
    background: var(--bg-secondary, #1e293b);
    color: var(--text-secondary, #94a3b8);
}
body.dark .img-n-btn:hover {
    border-color: var(--primary-light, #a5b4fc);
    color: var(--primary-light, #a5b4fc);
}
body.dark .img-n-btn.active {
    border-color: var(--primary, #818cf8);
    background: rgba(129,140,248,0.1);
    color: var(--primary-light, #a5b4fc);
    box-shadow: 0 0 0 2px rgba(129,140,248,0.12);
}

/* ===== 图片缩放提示 ===== */
.img-zoom-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.img-zoom-hint svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}
.img-result-card:hover .img-zoom-hint {
    opacity: 1;
}
.img-result-card {
    cursor: pointer;
}

/* ===== 图片 Lightbox 放大预览 ===== */
.img-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: img-lightbox-in 0.25s ease;
}
.img-lightbox.active {
    display: flex;
}
@keyframes img-lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.img-lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: img-lightbox-img-in 0.3s ease;
}
@keyframes img-lightbox-img-in {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.img-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.img-lightbox-close:hover {
    background: rgba(255,255,255,0.25);
}
.img-lightbox-close svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}
.img-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.img-lightbox-nav:hover {
    background: rgba(255,255,255,0.25);
}
.img-lightbox-nav svg {
    width: 24px;
    height: 24px;
    stroke: #fff;
}
.img-lightbox-nav.prev { left: 16px; }
.img-lightbox-nav.next { right: 16px; }
.img-lightbox-actions {
    position: absolute;
    bottom: 24px;
    display: flex;
    gap: 12px;
}
.img-lightbox-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}
.img-lightbox-action-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* ===== 平台卡片响应?===== */
@media (max-width: 1024px) {
    .publish-platforms-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .publish-platforms-grid {
        flex-direction: column;
    }
    .publish-platform-header {
        padding: 12px 16px;
    }
    .publish-ai-desc {
        padding: 10px 16px;
        font-size: 0.75rem;
    }
    .publish-gen-btn {
        width: calc(100% - 32px);
        margin: 10px 16px;
        padding: 8px 0;
        font-size: 0.75rem;
    }
    .publish-textareas {
        padding: 12px 16px;
        gap: 10px;
    }
    .publish-btn {
        width: calc(100% - 32px);
        margin: 0 16px 12px;
        padding: 8px 0;
        font-size: 0.75rem;
    }
}
.img-lightbox-action-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

/* ===== 步骤4统一AI内容?===== */
.publish-global-source {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.publish-global-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.publish-global-source-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.publish-fetch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent), #ef4444);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.publish-fetch-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.publish-fetch-btn:active {
    transform: translateY(0);
}

.publish-global-source-textarea {
    width: 100%;
    min-height: 120px;
    max-height: 300px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s;
}

.publish-global-source-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.publish-global-source-textarea:read-only {
    opacity: 0.9;
    cursor: default;
}

.publish-global-source-textarea:placeholder-shown {
    color: var(--text-muted);
    font-style: italic;
}

/* 统一AI内容?- 响应?*/
@media (max-width: 768px) {
    .publish-global-source {
        padding: 12px 14px;
    }
    .publish-global-source-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .publish-fetch-btn {
        width: 100%;
        justify-content: center;
    }
    .publish-global-source-textarea {
        min-height: 80px;
        font-size: 0.8125rem;
    }
}


/* Step 4 result page - full width layout */
.step-panel-inner.full-width {
    display: block !important;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}


/* ========================================
   RESPONSIVE LAYOUT - Mobile / iPad / Desktop
   ======================================== */

/* ===== Mobile: < 768px (stack vertically) ===== */
@media (max-width: 767px) {

    /* Step 1: Stack vertically */
    .plan-lr-layout {
        flex-direction: column !important;
        padding: 1rem;
    }
    .plan-left-panel {
        width: 100% !important;
        flex: 0 0 auto;
        position: static;
        max-height: none;
    }
    .plan-right-panel {
        max-width: 100% !important;
    }

    /* Step 2: Stack vertically */
    .combiner-layout {
        padding: 1rem;
    }
    .step-panel-left {
    }
    .sidebar {
        max-width: 100% !important;
    }

    /* Step 3: Stack vertically */
    .image-split-layout {
        flex-direction: column !important;
        padding: 1rem;
        max-width: none;
    }
    .image-split-left {
        width: 100% !important;
        position: static;
        max-height: none;
    }
    .image-split-right {
        width: 100% !important;
    }

    /* Step 4: Full width */
    .step-panel-inner.full-width {
        padding: 1rem;
    }
}

/* ===== iPad: 768px - 1024px (narrower side-by-side) ===== */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Step 1: Side-by-side, narrower left */
    .plan-lr-layout {
        padding: 1.5rem;
    }
    .plan-left-panel {
        width: 280px !important;
        flex: 0 0 280px;
    }
    .plan-right-panel {
        max-width: calc(100% - 280px - 20px) !important;
    }

    /* Step 2: Side-by-side, narrower right */
    .combiner-layout {
        padding: 1.5rem;
    }
    .sidebar {
        max-width: 320px !important;
    }

    /* Step 3: Side-by-side, narrower left */
    .image-split-layout {
        padding: 1.5rem;
    }
    .image-split-left {
        width: 300px !important;
    }
}

/* ===== Desktop: > 1024px (default, force grid) ===== */
@media (min-width: 1025px) {
    .combiner-layout {
        display: grid !important;
        }
    .step-panel-left {
    }
    .sidebar {
        }
}

/* ===== Preset Image Preview ===== */
.preset-image-preview {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    animation: fadeIn 0.3s ease;
}

.preset-image-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.preset-image-title::before {
    content: '🖼️';
    font-size: 1rem;
}

.preset-image-container {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.preset-image-container img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.preset-image-container img:hover {
    transform: scale(1.02);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Preset Image Carousel ===== */
.preset-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.preset-carousel-btn {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.preset-carousel-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.preset-carousel-btn:active {
    transform: scale(0.95);
}

.preset-carousel-viewport {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    padding: 8px;
    min-height: 200px;
    max-height: 300px;
    overflow: hidden;
}

.preset-carousel-viewport img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.preset-carousel-viewport img:hover {
    transform: scale(1.02);
}

.preset-carousel-counter {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.preset-carousel-style-name {
    text-align: center;
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 2px;
    font-weight: 500;
}

/* 图片加载失败时的占位提示 */
.preset-carousel-viewport.img-error {
    position: relative;
}

.preset-carousel-viewport.img-error::after {
    content: '图片加载失败';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    pointer-events: none;
}

.preset-carousel-viewport.img-error img {
    opacity: 0;
}

/* Mobile: carousel adjustments */
@media (max-width: 768px) {
    .preset-carousel-viewport {
        min-height: 150px;
        max-height: 200px;
    }

    .preset-carousel-viewport img {
        max-height: 180px;
    }

    .preset-carousel-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* Mobile: full width */
@media (max-width: 768px) {
    .preset-image-container {
        max-height: 200px;
    }
    
    .preset-image-container img {
        max-height: 180px;
    }
}

/* ===== Preset Horizontal Layout (6:4) ===== */
.preset-layout-horizontal {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.preset-left {
    flex: 6;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preset-right {
    flex: 4;
    min-width: 0;
    position: sticky;
    top: 100px;
}

/* 图片预览在右侧 */
.preset-right .preset-image-preview {
    margin-top: 0;
    height: 100%;
}

.preset-right .preset-image-container {
    max-height: 450px;
}

.preset-right .preset-image-container img {
    max-height: 430px;
}

/* 无图片时的提示 */
.preset-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    min-height: 300px;
    text-align: center;
}

.no-image-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-image-text {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* 当有图片时隐藏无图片提示 */
.preset-right:has(.preset-image-preview[style*="display: block"]) .preset-no-image,
.preset-right:has(.preset-image-preview:not([style*="display: none"])) .preset-no-image {
    display: none;
}

/* Mobile: 上下布局 */
@media (max-width: 768px) {
    .preset-layout-horizontal {
        flex-direction: column;
    }
    
    .preset-left,
    .preset-right {
        flex: none;
        width: 100%;
    }
    
    .preset-right {
        position: static;
    }
    
    .preset-right .preset-image-container {
        max-height: 250px;
    }
    
    .preset-right .preset-image-container img {
        max-height: 230px;
    }
    
    .preset-no-image {
        min-height: 200px;
        padding: 30px 15px;
    }
}

/* ===== Make prompt textarea match image height ===== */
.preset-layout-horizontal {
    align-items: stretch;  /* 让左右两侧高度一致 */
}

.preset-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* 让提示词内容区域伸展到底部 */
}

.preset-left .prompt-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.preset-left .prompt-area .form-textarea {
    flex: 1;
    min-height: 200px;
}

/* 确保右侧图片容器也占满高度 */
.preset-right {
    display: flex;
    flex-direction: column;
}

.preset-right .preset-image-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.preset-right .preset-image-preview .preset-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 无图片提示也占满高度 */
.preset-right .preset-no-image {
    flex: 1;
}

/* ===== Lightbox 图片浏览 ===== */
.image-lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

.image-lightbox.active {
    display: flex;
}

.lightbox-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(6px);
}

.lightbox-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 1;
    transition: transform 0.3s;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255,255,255,0.3);
}

.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* 禁用按钮样式 */
.btn-disabled {
    background-image: none !important;
    background-color: #6b7280 !important;
    cursor: not-allowed !important;
    color: #d1d5db !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.btn-disabled:hover {
    background-image: none !important;
    background-color: #6b7280 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 访客登录提示 */
.guest-login-hint {
    display: none;
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    align-items: center;
    gap: 12px;
}

.guest-login-hint.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.guest-login-hint-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guest-login-hint-icon svg {
    width: 16px;
    height: 16px;
    color: #f59e0b;
}

.guest-login-hint-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guest-login-hint-title {
    font-size: 13px;
    font-weight: 600;
    color: #f0c674;
}

.guest-login-hint-text {
    font-size: 12px;
    color: rgba(226, 192, 141, 0.7);
    line-height: 1.5;
}

.guest-login-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.guest-login-hint-btn:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.5);
}

/* ==================== 弹窗关闭按钮（所有弹窗通用）==================== */
.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-primary, #111827);
}

/* 深色模式：关闭按钮强制亮色 */
[data-theme="dark"] .modal-close {
    color: #cbd5e1 !important;
    background: rgba(71, 85, 105, 0.4) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}

[data-theme="dark"] .modal-close:hover {
    color: #f8fafc !important;
    background: rgba(71, 85, 105, 0.7) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
}

[data-theme="dark"] .modal-close svg {
    stroke: #cbd5e1 !important;
}

[data-theme="dark"] .modal-close:hover svg {
    stroke: #f8fafc !important;
}


/* ===== 九宫格选题布局 ===== */
.topic-lr-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1400px;
    margin: 20px auto 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}
.topic-left-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 左侧控制区 */
.topic-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.topic-ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.topic-ctrl-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: 64px;
    flex-shrink: 0;
}
.topic-ctrl-select {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    width: 80px;
}
.topic-ctrl-input {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    width: 150px;
}
.topic-ctrl-textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.topic-ctrl-row-textarea {
    align-items: flex-start;
}

/* 行业 Tabs & 按钮 */
.topic-industry-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 10px;
}
.topic-industry-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.topic-industry-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.topic-industry-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.topic-ind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    width: auto;
    flex: none;
}
.topic-ind-btn:hover {
    border-color: var(--accent);
    background: rgba(16,185,129,0.06);
}
.topic-ind-btn.active {
    border-color: var(--accent);
    background: rgba(16,185,129,0.1);
    color: var(--accent);
    font-weight: 600;
}
.topic-ind-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}

/* 说明 */
.topic-info-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}
.topic-info-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.topic-info-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 10px;
}
.topic-platform-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-top: 10px;
}
.topic-platform-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.topic-platforms-inner {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.topic-platform-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
    line-height: 1.6;
}
.topic-platform-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 42px;
}
.topic-platform-tags {
    color: var(--text-muted);
}

/* 右侧输出区 */
.topic-right-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 三选区块 */
.topic-selection-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.topic-sel-box {
    flex: 1 1 0;
    min-width: 0;
    min-height: 120px;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.topic-sel-box-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}
.topic-sel-box-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--bg-tertiary);
}
.topic-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
}
.topic-grid-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: clamp(0.7rem, 2vw, 1.1rem);
    cursor: pointer;
    transition: all 0.15s;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
}
.topic-grid-item:hover {
    border-color: var(--accent);
    background: rgba(16,185,129,0.06);
}
.topic-grid-item.selected {
    border-color: var(--accent);
    background: rgba(16,185,129,0.12);
    color: var(--accent);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
}
.topic-sel-placeholder {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
}
.topic-sel-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
}

/* 操作按钮栏 */
.topic-action-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.btn-topic-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-topic-refresh:hover {
    border-color: var(--accent);
    background: rgba(16,185,129,0.06);
}
.btn-topic-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-topic-generate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 24px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-topic-generate:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-md);
}
.btn-topic-generate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 结果区 */
.topic-result-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-primary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.topic-send-one-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
    margin-top: 2px;
}
.topic-send-one-btn:hover {
    border-color: var(--accent);
    background: rgba(16,185,129,0.1);
}
.topic-copy-btn { display: none; }
.topic-result-item:last-child { border-bottom: none; }

.topic-result-item:first-child { padding-top: 0; }