/* Designed by Kapil Pidhwani: Placeholder Image Generator — tool-only styles; adapts via @container (card is the container) */
.pig-controls { display: flex; flex-direction: column; gap: 1rem; }
.pig-size-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.pig-size-row .input-clean { font-family: var(--font-mono); text-align: center; }
.pig-swap { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.pig-swap:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-elevated); }
.pig-color-row { display: flex; align-items: center; gap: 0.5rem; }
.pig-color-row .input-clean { font-family: var(--font-mono); text-transform: lowercase; }
.pig-color-row .color-input-clean { flex: 0 0 34px; height: 34px; }
.pig-preview-pane { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.pig-preview-wrap { max-width: 100%; max-height: 460px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background-color: var(--surface); background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%), linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; padding: 0.75rem; overflow: hidden; }
.pig-preview-canvas { display: block; max-width: 100%; max-height: 430px; width: auto; height: auto; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.pig-range { width: 120px; }
@container (min-width: 900px) {
  .pig-preview-pane { min-height: 360px; }
}