/* Component uses utility classes: .page-container, .page-header, .page-content */

/* Back Button - Subtle navigation link */
.back-button {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 1rem;
}

.back-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Header Content */
.header-content {
  flex: 1;
}

/* Creation Form - Better spacing and visual hierarchy */
.creation-form {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Uses .flex .gap-4 .text-xs utility classes for theme-stats */
/* Uses .badge-secondary class for theme-stats span */
/* Uses .alert-error class for creation-error */

/* Aspect Ratio Selection */
/* aspect-ratio-selection: .mb-8 */
/* aspect-ratio-grid: .grid-auto-fill-250 .gap-4 */
/* aspect-ratio-card: .card .border-2 .cursor-pointer */
/* aspect-ratio-preview: .flex .justify-center .items-center .border-dashed */

/* Component-specific overrides only */
.aspect-ratio-card {
  border-width: 2px;
}

.aspect-ratio-card.selected {
  border-color: var(--border-accent);
  background: var(--bg-accent);
}

.aspect-ratio-preview {
  height: 80px;
}

.preview-box {
  background: var(--text-accent);
}

.preview-box.aspect-16-9 { width: 64px; height: 36px; }
.preview-box.aspect-4-3 { width: 60px; height: 45px; }
.preview-box.aspect-16-10 { width: 64px; height: 40px; }

/* Uses .badge-secondary for ratio-dimensions */
/* Uses .flex .gap-4 .flex-shrink-0 for action-buttons */

/* Uses .btn, .btn-primary, .btn-secondary classes from application.css */
/* Uses .loading-content, .error-content, .loading-spinner classes from application.css */
/* Responsive design handled by utility classes in application.css */