.studio-workbench { display: grid; grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr); gap: var(--space-xl); align-items: start; }
.studio-controls { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field-full { grid-column: 1 / -1; }
.prepared-note { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-success); border-radius: var(--radius-md); background: var(--color-success-bg); color: var(--color-success); }
.prepared-note > svg { width: 1.5rem; height: 1.5rem; flex: none; }

.creative-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.creative-results { display: grid; gap: var(--space-lg); margin-block-start: var(--space-lg); }
.creative-results > .button { width: fit-content; }
.creative-card { display: grid; gap: var(--space-xs); padding: var(--space-xs); border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); text-align: start; }
.creative-card[aria-pressed="true"] { border-color: var(--color-brand-600); }
.creative-art { position: relative; display: grid; min-height: 18rem; overflow: clip; place-items: end start; padding: var(--space-md); border-radius: var(--radius-sm); background: var(--color-canvas-rose); }
.creative-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.creative-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-overlay), transparent 62%); }
.creative-art.variant-editorial img { transform: scale(1.14) translate(6%, -2%); }
.creative-art.variant-product { background: var(--color-canvas-gold); }
.creative-art.variant-product img { object-fit: contain; transform: scale(0.86) rotate(-4deg); }
.creative-art.variant-story { background: var(--color-canvas-wine); }
.creative-art.variant-story img { object-position: 70% center; transform: scale(1.06); }
.creative-copy { position: relative; z-index: var(--z-raised); max-width: 18ch; color: var(--color-on-dark); font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; line-height: 1.25; }
.creative-card > strong,
.creative-card > span { padding-inline: var(--space-xs); }
.creative-card > strong { font-size: var(--text-sm); }
.creative-card > span { color: var(--color-muted); font-size: var(--text-xs); }

@media (hover: hover) and (pointer: fine) {
  .creative-card:hover { background: var(--color-brand-50); }
}