/* ============================================
   商单创作页专用样式 (creative-center.html)
   深色系质感版 · 与拉片页风格统一
   ============================================ */

/* ===== 页面头部 ===== */
.lapian-header {
    margin-bottom: 24px;
}
.lapian-header .lapian-header-title {
    font-size    : 28px;
    font-weight  : 700;
    color        : var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}
.lapian-header .lapian-header-title i {
    color      : var(--primary-color);
    margin-right: 8px;
}
.lapian-header .lapian-header-sub {
    font-size  : 14px;
    color      : var(--text-muted);
    line-height: 1.6;
    max-width  : 420px;
}

/* ===== 工具栏 ===== */
.works-toolbar {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 2px 0 14px 0;
}
.works-toolbar-left {
    display    : flex;
    align-items: center;
    gap        : 12px;
}
.works-toolbar-right {
    display    : flex;
    align-items: center;
    gap        : 10px;
}
.toolbar-stats {
    font-size  : 13px;
    color      : var(--text-muted);
    white-space: nowrap;
}

/* ===== 搜索框 ===== */
.works-search {
    display    : flex;
    align-items: center;
    gap        : 6px;
    background : var(--bg-card);
    border     : 1px solid var(--border-color);
    border-radius: 6px;
    padding    : 4px 10px;
    transition : all 0.2s ease;
    color      : var(--text-muted);
}
.works-search:focus-within {
    border-color: var(--primary-color);
    box-shadow  : 0 0 0 2px rgba(255, 107, 53, 0.08);
}
.works-search i {
    font-size: 13px;
    flex-shrink: 0;
}
.works-search input {
    border    : none;
    background: transparent;
    outline   : none;
    color     : var(--text-primary);
    font-size : 13px;
    width     : 160px;
}
.works-search input::placeholder {
    color: var(--text-muted);
}

/* ===== 筛选下拉 ===== */
.filter-select {
    padding      : 5px 10px;
    border       : 1px solid var(--border-color);
    border-radius: 6px;
    background   : var(--bg-card);
    color        : var(--text-primary);
    font-size    : 13px;
    cursor       : pointer;
    outline      : none;
}
.filter-select:focus {
    border-color: var(--primary-color);
}

/* ===== 创意评审按钮 ===== */
.btn-smart-evaluate {
    display      : inline-flex;
    align-items  : center;
    gap          : 5px;
    padding      : 5px 12px;
    border-radius: 8px;
    font-size    : 13px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : all 0.2s ease;
    border       : 1px solid rgba(255, 215, 0, 0.3);
    background   : rgba(255, 215, 0, 0.08);
    color        : #fbbf24;
}
.btn-smart-evaluate:hover {
    background  : rgba(255, 215, 0, 0.15);
    border-color: #fbbf24;
    transform   : translateY(-1px);
}
.btn-smart-evaluate i {
    font-size: 14px;
}

/* ===== 新建商单按钮 ===== */
.lp-upload-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    padding      : 8px 16px;
    background   : linear-gradient(135deg, #FF6B35 0%, #f59e0b 100%);
    color        : #fff;
    border       : none;
    border-radius: 8px;
    font-size    : 14px;
    font-weight  : 600;
    cursor       : pointer;
    transition   : all 0.2s ease;
}
.lp-upload-btn:hover {
    transform : translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
}
.lp-upload-btn i {
    font-size: 16px;
}

/* ===== 项目卡片 ===== */
.works-card-item {
    background   : var(--bg-card);
    border       : 1px solid var(--border-color);
    border-radius: 10px;
    padding      : 14px 18px;
    margin-bottom: 8px;
    cursor       : default;
    transition   : all 0.2s ease;
}
.works-card-item:hover {
    border-color: rgba(251, 191, 36, 0.25);
    background  : var(--bg-hover);
}
.works-card-row {
    display    : flex;
    align-items: center;
    gap        : 16px;
}
.works-card-left {
    flex     : 1;
    min-width: 0;
}
.works-card-name {
    font-size       : 15px;
    font-weight     : 600;
    color           : var(--text-primary);
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    margin-bottom   : 4px;
}
.works-card-meta {
    display  : flex;
    align-items: center;
    gap      : 12px;
    font-size: 12px;
    color    : var(--text-muted);
    flex-wrap: wrap;
}
.works-card-meta .meta-id {
    color      : var(--text-muted);
    font-family: 'Courier New', monospace;
    font-size  : 11px;
}
.works-card-meta .meta-duration {
    color: var(--text-secondary);
}
.works-card-right {
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex-shrink: 0;
}

/* ===== 卡片操作按钮 ===== */
.works-card-actions {
    display    : flex;
    gap        : 6px;
    margin-top : 8px;
    padding-top: 8px;
    border-top : 1px solid rgba(148, 163, 184, 0.06);
}
.action-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    padding      : 4px 10px;
    border       : none;
    border-radius: 6px;
    cursor       : pointer;
    font-size    : 12px;
    font-weight  : 500;
    transition   : all 0.2s;
}
.action-btn.view {
    background: rgba(59, 130, 246, 0.1);
    color     : #60a5fa;
}
.action-btn.view:hover {
    background: rgba(59, 130, 246, 0.2);
}
.action-btn.delete {
    background: rgba(239, 68, 68, 0.1);
    color     : #f87171;
}
.action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* ===== 状态徽章（与详情页统一） ===== */
.works-status-badge {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    padding      : 2px 10px;
    border-radius: 20px;
    font-size    : 12px;
    font-weight  : 500;
    white-space  : nowrap;
}
.works-status-badge.pending {
    background: rgba(251, 191, 36, 0.12);
    color     : #fbbf24;
}
.works-status-badge.generating {
    background: rgba(59, 130, 246, 0.12);
    color     : #60a5fa;
}
.works-status-badge.generating i {
    animation: works-spin 1.5s linear infinite;
}
.works-status-badge.completed {
    background: rgba(34, 197, 94, 0.12);
    color     : #22c55e;
}
.works-status-badge.failed {
    background: rgba(239, 68, 68, 0.12);
    color     : #ef4444;
}

@keyframes works-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===== 空/加载/错误状态 ===== */
.works-empty {
    text-align: center;
    padding   : 60px 20px;
    color     : var(--text-muted);
}
.works-empty i {
    font-size    : 48px;
    margin-bottom: 16px;
    display      : block;
}
.works-empty p {
    margin: 8px 0 16px;
}
.works-loading,
.works-error {
    text-align: center;
    padding   : 40px;
    font-size : 14px;
    color     : var(--text-secondary);
}
.works-error {
    color: #ef4444;
}

/* ===== 分页 ===== */
.works-pagination {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 4px;
    margin-top     : 20px;
    padding-top    : 14px;
    border-top     : 1px solid rgba(148, 163, 184, 0.08);
}
.works-page-num {
    min-width      : 32px;
    height         : 32px;
    border-radius  : 6px;
    border         : 1px solid var(--border-color);
    background     : var(--bg-card);
    color          : var(--text-secondary);
    font-size      : 13px;
    font-weight    : 500;
    cursor         : pointer;
    transition     : all 0.2s ease;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    padding        : 0 6px;
}
.works-page-num:hover {
    border-color: var(--primary-color);
    color       : var(--primary-color);
}
.works-page-num.active {
    background   : var(--primary-color);
    border-color : var(--primary-color);
    color        : #fff;
}
.works-page-info {
    text-align: center;
    color     : var(--text-muted);
    font-size : 12px;
    margin-top: 6px;
}

/* ===== 弹窗（保留原有） ===== */
.inspiration-modal-content {
    max-width : 700px;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-section {
    margin-bottom : 24px;
    padding-bottom: 24px;
    border-bottom : 1px solid rgba(148, 163, 184, 0.1);
}
.modal-section:last-child {
    margin-bottom : 0;
    padding-bottom: 0;
    border-bottom : none;
}
.modal-section-title {
    font-size    : 15px;
    font-weight  : 600;
    color        : var(--text-primary);
    margin-bottom: 16px;
    display      : flex;
    align-items  : center;
    gap          : 8px;
}
.modal-section-title i {
    color: var(--primary-color);
}
.modal-field-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 8px;
}
.modal-collapse-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    padding      : 4px 10px;
    border       : 1px solid var(--border-color);
    border-radius: 6px;
    background   : transparent;
    color        : var(--text-secondary);
    font-size    : 12px;
    cursor       : pointer;
    transition   : all 0.2s;
}
.modal-collapse-btn:hover {
    background: var(--bg-hover);
    color     : var(--text-primary);
}
.modal-field-content {
    padding      : 12px 16px;
    background   : rgba(15, 23, 42, 0.5);
    border       : 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    min-height   : 60px;
    white-space  : pre-wrap;
    color        : var(--text-primary);
    font-size    : 14px;
    line-height  : 1.6;
}
.modal-field-outline {
    max-height: 250px;
    overflow-y: auto;
    color     : #cbd5e1;
}