.studio-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-xl); }
.studio-config-panel { display: flex; flex-direction: column; gap: var(--space-lg); }
.config-input-row { display: flex; gap: var(--space-sm); }

.spark-btn { padding: var(--space-sm); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--accent); flex-shrink: 0; }
.spark-btn.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.audience-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.aud-chip { padding: 5px var(--space-md); border-radius: var(--radius-full); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-family: var(--font-display); font-weight: 500; transition: all var(--dur-fast); }
.aud-chip:hover, .aud-chip.active { border-color: var(--accent); color: var(--accent-text); background: var(--accent-glow); }
.section-toggles { display: flex; flex-direction: column; gap: var(--space-sm); }
.toggle-row { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9rem; cursor: pointer; }
.toggle-row input { accent-color: var(--accent); }
.channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.channel-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); }
.channel-card:hover, .channel-card.active { border-color: var(--accent); color: var(--accent-text); }
.channel-card svg { width: 24px; height: 24px; }
.studio-right-panel { display: flex; flex-direction: column; gap: var(--space-lg); }
.pipeline-steps { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.pipe-step { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-soft); }
.step-icon-wrap { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; }
.step-icon-wrap svg { width: 16px; height: 16px; color: var(--text-muted); }
.step-meta { flex: 1; }
.step-name { display: block; font-size: 0.875rem; font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
.step-agent { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.step-status { font-size: 0.72rem; color: var(--text-muted); font-family: var(--font-display); font-weight: 500; }
.step-status.running { color: var(--accent); }
.step-status.done { color: var(--emerald); }
.pipeline-log { font-family: var(--font-mono); font-size: 0.75rem; background: var(--bg-2); border-radius: var(--radius-md); padding: var(--space-md); max-height: 120px; overflow-y: auto; }
.log-line { margin: 0 0 var(--space-xs); }
.log-line.muted { color: var(--text-muted); }
.preview-tabs { display: flex; gap: var(--space-xs); }
.prev-tab { padding: var(--space-xs) var(--space-md); font-size: 0.8rem; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); }
.prev-tab.active { background: var(--surface-3); color: var(--accent-text); }
.preview-frame { min-height: 300px; background: var(--bg-2); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.preview-empty { text-align: center; color: var(--text-muted); }
.preview-empty svg { width: 80px; height: 80px; margin-bottom: var(--space-md); opacity: 0.5; }