:root {
  --pet-wide-column-min: minmax(0, 1fr);
}

.app-shell {
  grid-template-columns: repeat(12, var(--pet-wide-column-min));
  align-items: start;
  animation: petAppFadeUp 0.44s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.app-shell > * {
  min-width: 0;
}

.app-shell > .app-header,
.app-shell > .alert,
.app-shell > .panel,
.app-shell > .export-panel {
  grid-column: 1 / -1;
}

.app-shell:has(> .panel:not(.export-panel) ~ .panel:not(.export-panel))
  > .panel:not(.export-panel):not(:has(.tool-card-grid)):not(:has(.export-surface)) {
  grid-column: span 6;
}

.app-shell.embed-mode:has(> .panel:not(.export-panel) ~ .panel:not(.export-panel))
  > .panel:not(.export-panel):not(:has(.export-surface)) {
  grid-column: span 6;
}

.app-shell > .panel:has(.tool-card-grid),
.app-shell > .panel:has(.export-surface),
.app-shell.embed-mode > .panel:has(.export-surface),
.app-shell.embed-mode > .export-panel {
  grid-column: 1 / -1;
}

.panel,
.export-panel,
.alert {
  transition:
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background-color 0.24s ease;
}

.panel:hover,
.export-panel:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    0 3px 10px rgba(15, 23, 42, 0.05);
}

button,
.button,
input,
textarea,
select {
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

button:hover,
.button:hover {
  transform: translateY(-1px);
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #0e7a6b) 24%, transparent);
  outline-offset: 2px;
}

.export-surface,
.generated-output,
.preview-panel,
.result-panel {
  animation: petAppFadeUp 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tool-card,
.tool-card-grid > * {
  transition:
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.tool-card:hover,
.tool-card-grid > *:hover {
  transform: translateY(-2px);
}

@keyframes petAppFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 920px) {
  .app-shell,
  .app-shell.embed-mode {
    grid-template-columns: 1fr;
  }

  .app-shell > .panel,
  .app-shell.embed-mode > .panel,
  .app-shell > .app-header,
  .app-shell > .alert,
  .app-shell > .export-panel {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .panel,
  .export-panel,
  .alert,
  button,
  .button,
  input,
  textarea,
  select,
  .export-surface,
  .generated-output,
  .preview-panel,
  .result-panel,
  .tool-card,
  .tool-card-grid > * {
    animation: none;
    transition: none;
  }

  .panel:hover,
  .export-panel:hover,
  button:hover,
  .button:hover,
  .tool-card:hover,
  .tool-card-grid > *:hover {
    transform: none;
  }
}