.pp-swap { margin: 12px 0; border: 2px solid var(--color-ink, #1e293b); border-radius: 12px; background: var(--color-paper-2, #fff); overflow: hidden; }
.pp-swap summary { min-height: 48px; padding: 14px 12px; cursor: pointer; font-weight: 800; }
.pp-swap-body { padding: 0 12px 12px; }
.pp-swap p { font-size: .85rem; line-height: 1.5; margin: 8px 0; overflow-wrap: anywhere; }
.pp-swap-fields { display: grid; gap: 10px; }
.pp-swap label { display: grid; gap: 4px; font-size: .85rem; font-weight: 700; min-width: 0; }
.pp-swap select, .pp-swap input { width: 100%; min-width: 0; min-height: 44px; font: inherit; border: 2px solid var(--color-ink, #1e293b); border-radius: 8px; padding: 8px; background: #fff; color: #1e293b; }
.pp-swap-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pp-swap button { min-height: 44px; min-width: 44px; padding: 10px; border: 2px solid var(--color-ink, #1e293b); border-radius: 8px; font: 700 .85rem/1.2 system-ui, sans-serif; cursor: pointer; background: #fce7f3; color: #1e293b; }
.pp-swap button:disabled { opacity: .5; cursor: not-allowed; }
.pp-swap :focus-visible { outline: 3px solid var(--color-focus, #2563eb); outline-offset: 2px; }
.pp-swap-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.pp-swap-pictures figure { min-width: 0; margin: 0; }
.pp-swap-pictures canvas { display: block; width: 100%; aspect-ratio: 1; border: 1px solid #64748b; image-rendering: pixelated; background: #fff; }
.pp-swap-pictures figcaption { font: 700 .8rem/1.5 system-ui, sans-serif; }
.pp-swap [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pp-swap * { animation: none; transition: none; } }