.content-studio {
  display: grid;
  gap: var(--space-4, 1rem);
  color: var(--text-primary, #1a1a2e);
  font-size: 14px;
}

.content-studio__modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.content-studio__form,
.content-studio__preview {
  display: grid;
  gap: var(--space-3, 12px);
}

.content-studio__field,
.content-studio__preview-details {
  display: grid;
  gap: var(--space-1, 4px);
}

.content-studio :is(p, li, label, dt, dd, .capability-banner, .capability-scenario-picker) {
  font-size: 14px;
}

.content-studio h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.content-studio h4 { margin: 0; font-size: 18px; line-height: 1.3; }
.content-studio h5 { margin: 0; font-size: 16px; line-height: 1.3; }

.content-studio :is(button, input, select, textarea) {
  min-height: var(--control-height, 40px);
  font: inherit;
}

.content-studio :is(input, textarea) {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-card, #fff);
}

.content-studio :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--primary, #e31937);
  outline-offset: 2px;
}

.content-studio :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .58; }
.content-studio .btn-primary:hover { transform: none; }

.content-studio__workspace-state,
.content-studio__preview-result,
.content-studio__state {
  margin: 0;
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-color: currentColor;
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3, 12px);
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  overflow-wrap: anywhere;
}

.content-studio :is(
  [data-workspace-state="error"],
  [data-workspace-state="unauthorized"],
  [data-workspace-state="externally_blocked"],
  [data-state="forbidden-term"]
) {
  background: #fff1f2;
  color: #9f1239;
}

.content-studio :is(
  [data-workspace-state="empty"],
  [data-workspace-state="not_configured"],
  [data-workspace-state="blocked"]
) {
  background: #fff7ed;
  color: #9a3412;
}

.content-studio [data-state="cleared"] {
  background: var(--surface-subtle, var(--bg-light, #f8f9fc));
  color: var(--text-secondary, #64748b);
}

.content-studio__preview-result:focus {
  outline: .2rem solid currentColor;
  outline-offset: .2rem;
}

.content-studio__preview {
  width: min(100%, 32rem);
  min-height: 12rem;
  place-items: center;
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-md, 10px);
  background: var(--surface-subtle, var(--bg-card, #fff));
  overflow: auto;
}

.content-studio__preview[data-canvas-ratio="1080x1350"] {
  aspect-ratio: 1080 / 1350;
}

.content-studio__preview[data-canvas-ratio="1080x1920"] {
  aspect-ratio: 1080 / 1920;
}

.content-studio__thumbnails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2, 8px);
  width: 100%;
}

.content-studio__thumbnail {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-strong, var(--border, #e2e8f0));
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, 8px);
  background: var(--bg-card, #fff);
}

@media (max-width: 640px) {
  .content-studio :is(button, input, select, textarea) { min-height: var(--control-height-touch, 44px); }
  .content-studio__modes .btn { flex: 1 1 10rem; }
  .content-studio__preview { padding: var(--space-3, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .content-studio, .content-studio * { transition-duration: 0s !important; animation-duration: 0s !important; }
}