.creative-workspace { padding: 26px; border: 1px solid var(--hairline-strong); border-radius: 16px; margin-bottom: 24px; background: linear-gradient(135deg, var(--surface-2), var(--surface-1)); }
.creative-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.creative-heading h2 { margin:8px 0; font-size:26px; letter-spacing:-.6px; }
.creative-eyebrow { color:var(--primary-hover); font-size:12px; }
.creative-intro { color:var(--ink-subtle); font-size:14px; line-height:1.7; margin:8px 0 18px; }
.creative-examples { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.creative-examples button { border:1px solid var(--hairline-strong); background:var(--surface-2); color:var(--ink-muted); border-radius:20px; padding:8px 12px; text-align:left; font-size:12px; cursor:pointer; }
.creative-examples button:hover { border-color:var(--primary); }
.creative-input-label { display:block; color:var(--ink-muted); font-size:13px; margin-bottom:8px; }
.creative-input-row textarea { box-sizing:border-box; width:100%; resize:vertical; min-height:90px; padding:14px; border:1px solid var(--hairline-strong); border-radius:10px; background:var(--canvas); color:var(--ink); font:inherit; font-size:14px; line-height:1.6; }
.creative-input-row textarea:focus { outline:2px solid var(--primary); outline-offset:2px; }
.creative-input-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:12px; }
.creative-input-actions span { color:var(--ink-subtle); font-size:12px; }
.creative-input-actions button,.creative-preview button { padding:10px 16px; border-radius:8px; cursor:pointer; }
.creative-messages { max-height:300px; overflow:auto; display:grid; gap:10px; margin-bottom:16px; }
.creative-message { white-space:pre-wrap; overflow-wrap:anywhere; padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.7; color:var(--ink-muted); background:var(--surface-3); }
.creative-message[data-role="user"] { margin-left:8%; border:1px solid var(--hairline-strong); }
.creative-status { color:var(--ink-subtle); font-size:13px; line-height:1.6; }
.creative-status[data-error="true"] { color:#e78585; }
.creative-preview { margin-top:18px; padding:20px; border:1px solid var(--primary); border-radius:12px; background:var(--surface-1); }
.creative-preview[hidden] { display:none; }
.creative-preview h3 { margin:0 0 14px; font-size:18px; overflow-wrap:anywhere; }
.creative-preview dl { display:grid; grid-template-columns:86px 1fr; gap:10px; font-size:13px; line-height:1.6; margin:0; }
.creative-preview dt { color:var(--ink-subtle); }
.creative-preview dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.creative-preview .creative-confirm { margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.creative-preview .creative-confirm span { color:var(--ink-subtle); font-size:12px; }
@media(max-width:640px) { .creative-workspace { padding:16px; } .creative-heading h2 { font-size:21px; } .creative-input-actions { align-items:flex-start; flex-direction:column; } .creative-input-actions button { width:100%; } .creative-heading .outline-btn { flex-shrink:0; padding:8px; } }