/* ==================== 作品设置界面 - 全新设计（西梅故事主题） ==================== */

/* 整体容器 */
html body #book-settings-content.content-section {
    background: #fafafa !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==================== 头部导航区域 ==================== */
.book-settings-header {
    background: white !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 12px 20px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.book-settings-header .back-btn {
    background: #f5f5f5 !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.book-settings-header .back-btn:hover {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    border-color: #ff6600 !important;
    transform: translateX(-3px) !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

/* 标签页导航 */
.header-tabs {
    display: flex !important;
    gap: 6px !important;
}

.header-tabs .tab {
    padding: 6px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #666 !important;
    background: #f5f5f5 !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}

.header-tabs .tab:hover {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8d9 100%) !important;
    color: #ff6600 !important;
    border-color: #ffe8d9 !important;
}

.header-tabs .tab.active {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    border-color: #ff6600 !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3) !important;
}

/* 头部操作按钮 */
.header-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.header-actions .delete-text,
.header-actions .cancel-text,
.header-actions .save-text {
    padding: 6px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border: 1px solid !important;
}

.header-actions .delete-text {
    background: white !important;
    color: #f44336 !important;
    border-color: #f44336 !important;
}

.header-actions .delete-text:hover {
    background: #f44336 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3) !important;
}

.header-actions .cancel-text {
    background: white !important;
    color: #999 !important;
    border-color: #ddd !important;
}

.header-actions .cancel-text:hover {
    background: #f5f5f5 !important;
    border-color: #999 !important;
    color: #666 !important;
}

.header-actions .save-text {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    border-color: #ff6600 !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.25) !important;
}

.header-actions .save-text:hover {
    background: linear-gradient(135deg, #ff8833 0%, #ffaa66 100%) !important;
    box-shadow: 0 6px 16px rgba(255, 102, 0, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* ==================== 作品信息标签页 ==================== */
#book-info-tab {
    padding: 0 20px 20px 20px !important;
}

/* 基础信息区域 */
.basic-info-section {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    margin-bottom: 20px !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.basic-info-section h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    position: relative !important;
}

.basic-info-section h3::before {
    display: none !important;
}

/* 信息网格布局 */
.info-grid {
    display: grid !important;
    grid-template-columns: 150px 1fr !important;
    gap: 20px !important;
}

/* 封面区域 */
.cover-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.cover-section > label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666 !important;
}

html body #book-settings-content .cover-display,
html body .cover-section .cover-display {
    width: 150px !important;
    height: 210px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid #e0e0e0 !important;
    position: relative !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body #book-settings-content .cover-display img,
html body #book-settings-content #current-cover-img,
html body .cover-section .cover-display img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 2 !important;
}

html body #book-settings-content .no-cover-placeholder,
html body .cover-section .no-cover-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #999 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

/* 当图片加载成功时，确保占位符被隐藏 */
html body #book-settings-content .cover-display img:not([style*="display: none"]) ~ .no-cover-placeholder,
html body .cover-section .cover-display img:not([style*="display: none"]) ~ .no-cover-placeholder {
    display: none !important;
}

html body #book-settings-content .no-cover-placeholder i,
html body .cover-section .no-cover-placeholder i {
    font-size: 48px !important;
    margin-bottom: 10px !important;
}

html body #book-settings-content .no-cover-placeholder p,
html body .cover-section .no-cover-placeholder p {
    font-size: 14px !important;
    margin: 0 !important;
}

/* 封面操作按钮 */
.cover-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.upload-text-btn {
    background: #ff6600 !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: block !important;
}

.upload-text-btn:hover {
    background: linear-gradient(135deg, #ff8833 0%, #ffaa66 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 102, 0, 0.35) !important;
}

.cover-requirement {
    font-size: 12px !important;
    color: #999 !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* 表单区域 */
.form-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.form-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.form-item > label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.form-item .required {
    color: #f44336 !important;
}

.form-item .readonly-label {
    color: #999 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.form-item .display-value {
    background: #f8f9fa !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    color: #333 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border: 1px solid #e0e0e0 !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
}

.form-item input[type="text"],
.form-item textarea {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

.form-item input[type="text"]:focus,
.form-item textarea:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1) !important;
}

.form-item textarea {
    resize: vertical !important;
    min-height: 80px !important;
    line-height: 1.5 !important;
}

.form-item .hint {
    font-size: 11px !important;
    color: #999 !important;
    line-height: 1.4 !important;
}

.form-item .readonly-input {
    background: #f8f9fa !important;
    cursor: not-allowed !important;
    color: #999 !important;
}

/* 其他信息区域 */
.other-info-section {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.other-info-section h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    position: relative !important;
}

.other-info-section h3::before {
    display: none !important;
}

/* 信息表格 */
.info-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.info-row {
    display: grid !important;
    grid-template-columns: 110px 1fr 110px 1fr !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: none !important;
}

.info-row:hover {
    border-bottom-color: #f0f0f0 !important;
    background: transparent !important;
}

.info-row:last-child {
    border-bottom: none !important;
}

.info-row .label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666 !important;
}

.info-row .value {
    font-size: 13px !important;
    color: #333 !important;
    font-weight: 400 !important;
}

.info-row .value-with-action {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.info-row .action-link {
    background: linear-gradient(135deg, #ff6600 0%, #ff8833 100%) !important;
    color: white !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.info-row .action-link:hover {
    background: linear-gradient(135deg, #ff8833 0%, #ffaa66 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3) !important;
}

/* 内联选择框 */
.inline-select-hidden {
    background: white !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    color: #333 !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.inline-select-hidden:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1) !important;
}

/* ==================== 签约管理标签页 ==================== */
#contract-management-tab {
    padding: 0 30px 30px 30px !important;
}

/* 签约说明区域 */
.contract-description-section {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e0e0e0 !important;
}

.contract-description-section h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.description-content {
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    border: 1px solid #e8e8e8 !important;
}

.contract-rules {
    list-style: disc !important;
    padding-left: 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.contract-rules li {
    padding-left: 0 !important;
    position: relative !important;
    line-height: 1.6 !important;
    font-size: 13px !important;
    color: #555 !important;
}

.contract-rules li::before {
    display: none !important;
}

.contract-rules .link-blue {
    color: #ff6600 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #ff6600 !important;
    transition: all 0.3s ease !important;
}

.contract-rules .link-blue:hover {
    color: #ff8833 !important;
    border-bottom-color: #ff8833 !important;
}

/* 签约流程区域 */
.contract-process-section {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e0e0e0 !important;
}

.contract-process-section h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* 流程时间线 */
.process-timeline {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 15px !important;
}

.process-step {
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    border: 1px solid #e8e8e8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.step-circle {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #ff6600 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.step-circle.disabled {
    background: #ccc !important;
}

.step-content h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 8px 0 !important;
}

.step-content p {
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
}

.apply-contract-btn {
    background: #ff6600 !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-top: auto !important;
}

.apply-contract-btn:hover {
    background: #ff8833 !important;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1024px) {
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .cover-section {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    
    .info-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .info-row .label {
        font-weight: 700 !important;
        color: #333 !important;
    }
    
    .process-timeline {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .book-settings-header {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
    
    .header-tabs {
        flex-direction: row !important;
        justify-content: center !important;
    }
    
    .header-actions {
        justify-content: center !important;
    }
    
    #book-info-tab,
    #contract-management-tab {
        padding: 0 15px 20px 15px !important;
    }
    
    .basic-info-section,
    .other-info-section,
    .contract-description-section,
    .contract-process-section {
        padding: 20px !important;
    }
    
    .cover-section {
        flex-direction: column !important;
        align-items: center !important;
    }
}