/* Steps progress at top of modal */
.creation-steps { /* use the .steps class from components */ }

/* Upload zone enhanced */
.creation-upload { margin: 20px 0; }

/* IP extraction result */
.ip-result { animation: slideUp .4s ease; }
.ip-result-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 16px; background: var(--bg-input); border-radius: var(--radius-md); }
.ip-result-header .novel-title { font-size: 16px; font-weight: 600; }
.ip-result-header .novel-meta { font-size: 13px; color: var(--text-secondary); }

.ip-summary { margin-bottom: 16px; font-size: 14px; line-height: 1.8; color: var(--text-body); }

.ip-scenes-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.ip-scenes-table th { background: var(--bg-input); padding: 8px 12px; text-align: left; font-weight: 600; }
.ip-scenes-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-light); }

.ip-emotions { display: flex; gap: 8px; margin: 16px 0; }
.ip-emotion-chip { padding: 6px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; }
.ip-emotion-chip.selected { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary); }
.ip-emotion-chip:not(.selected) { background: var(--bg-input); color: var(--text-secondary); border: 1px solid transparent; cursor: pointer; }

.ip-difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.ip-diff-item { text-align: center; }
.ip-diff-bar { height: 6px; background: var(--border-light); border-radius: 3px; margin: 4px 0; overflow: hidden; }
.ip-diff-fill { height: 100%; border-radius: 3px; background: var(--primary-gradient); }
.ip-diff-label { font-size: 12px; color: var(--text-secondary); }
.ip-diff-score { font-size: 12px; font-weight: 600; color: var(--primary); }

/* Configuration form */
.config-section { margin-bottom: 24px; }
.config-section h3 { font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 12px; }
.config-row { display: flex; gap: 16px; margin-bottom: 16px; }
.config-row > * { flex: 1; }

.card-structure-viz { display: flex; height: 36px; border-radius: var(--radius-md); overflow: hidden; margin: 12px 0; font-size: 12px; }
.card-viz-segment { display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; }
.card-viz-1 { background: #F53F3F; flex: 1; }
.card-viz-2 { background: #FF7D00; flex: 3; }
.card-viz-3 { background: #165DFF; flex: 2; }

.episode-slider { display: flex; align-items: center; gap: 12px; }
.episode-slider input[type="range"] { flex: 1; accent-color: var(--primary); }
.episode-slider .episode-count { font-size: 18px; font-weight: 700; color: var(--primary); min-width: 40px; text-align: center; }

/* Simulated loading */
.creation-loading { text-align: center; padding: 40px 0; }
.creation-loading .spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px; }
.creation-loading p { color: var(--text-secondary); font-size: 14px; }