.preview-swap-host { position: relative; isolation: isolate; }
.preview-swap-host .preview-swap-primary { opacity: 1; }
.preview-swap-host[data-preview-active="2"] .preview-swap-primary { opacity: 0; pointer-events: none; }
.preview-swap-host > .preview-swap-secondary { position: absolute; inset: 0; z-index: 6; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #080d16; opacity: 0; pointer-events: none; }
.preview-swap-host[data-preview-active="2"] > .preview-swap-secondary { opacity: 1; }
.preview-swap-host > .preview-swap-button { position: absolute; z-index: 8; top: 14px; left: 14px; display: block; width: clamp(68px, 21%, 116px); aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer; color: #fff4da; background: #101722; border: 1px solid rgba(244,208,145,.75); border-radius: 13px; box-shadow: 0 0 0 3px rgba(220,170,77,.08), 0 0 22px rgba(233,180,85,.4), 0 7px 22px rgba(0,0,0,.42); transition: box-shadow .2s ease, border-color .2s ease; }
.preview-swap-host > .preview-swap-button[hidden] { display: none; }
.preview-swap-button:hover { border-color: #ffe5b4; box-shadow: 0 0 0 4px rgba(220,170,77,.15), 0 0 30px rgba(233,180,85,.6), 0 9px 26px rgba(0,0,0,.45); }
.preview-swap-button:focus-visible { outline: 3px solid #fff1ca; outline-offset: 4px; }
.preview-swap-button > canvas { display: block; width: 100%; height: 100%; }
.preview-swap-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 2px 5px; font: 600 12px/1.25 sans-serif; white-space: nowrap; text-align: center; color: #fff9ec; background: linear-gradient(transparent,rgba(3,6,13,.92)); }
.preview-swap-icon { position: absolute; top: 4px; right: 5px; width: 21px; height: 21px; border-radius: 50%; font: 17px/21px sans-serif; background: rgba(3,6,13,.72); }
.preview-swap-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:700px) { .preview-swap-host > .preview-swap-button { top: 8px; left: 8px; width: clamp(64px,23%,80px); border-radius: 10px; } .preview-swap-icon { display:none; } .preview-swap-label { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .preview-swap-host > .preview-swap-button { transition:none; } }