.swapper-page {
  --swapper-ink: #05080d;
  --swapper-paper: #f8fbff;
  --swapper-blue: #064f94;
  --swapper-bright: #19a8ff;
  --swapper-green: #55f08a;
}
.swapper-page [hidden] { display: none !important; }

.swapper-main {
  position: relative;
  isolation: isolate;
  padding: clamp(12px, 1.4vw, 18px) 0 96px;
}
.swapper-app {
  position: relative;
  scroll-margin-top: 140px;
  overflow: hidden;
  border: 3px solid var(--swapper-ink);
  border-radius: 46px 14px 42px 14px;
  color: var(--swapper-paper);
  background: #053767;
  box-shadow: 14px 17px 0 rgba(0,0,0,.3), 0 40px 100px rgba(0,0,0,.3);
}
.creator-mode-switch {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 3px solid var(--swapper-ink);
  background: #031f3b;
}
.creator-mode-switch button {
  min-width: 0;
  min-height: 78px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
  border: 2px solid var(--swapper-ink);
  border-radius: 20px 7px 20px 7px;
  color: #d8eaff;
  text-align: left;
  background: #064f94;
  box-shadow: 4px 5px 0 rgba(0,0,0,.26);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.creator-mode-switch button:nth-child(even) { border-radius: 7px 20px 7px 20px; }
.creator-mode-switch button:hover { transform: translateY(-2px); }
.creator-mode-switch button.is-active {
  color: var(--swapper-ink);
  background: var(--swapper-green);
  box-shadow: 5px 7px 0 rgba(0,0,0,.32);
}
.creator-mode-switch button > span {
  grid-row: 1 / 3;
  color: currentColor;
  font: 900 .65rem "Nunito", sans-serif;
  opacity: .7;
}
.creator-mode-switch strong { font: 900 1.12rem "Fredoka", sans-serif; }
.creator-mode-switch small { font: 900 .58rem "Nunito", sans-serif; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.creator-remix { min-width: 0; }
.token-loader,
.swapper-status {
  min-width: 0;
  padding: 15px;
  border: 2px solid var(--swapper-ink);
  border-radius: 22px 7px 22px 7px;
  background: rgba(248,251,255,.09);
  box-shadow: 5px 6px 0 rgba(0,0,0,.2);
}
.token-loader label {
  display: block;
  margin-bottom: 8px;
  font-size: .69rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.token-loader > div {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.token-prefix {
  font-family: "Fredoka", sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
}
.token-loader input,
.trait-panel-tools input {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--swapper-ink);
  border-radius: 12px 5px 12px 5px;
  color: var(--swapper-ink);
  font: 900 1rem "Nunito", sans-serif;
  background: var(--swapper-paper);
  outline: none;
}
.token-loader input { min-height: 44px; padding: 9px 10px; }
.token-loader input:focus,
.trait-panel-tools input:focus { box-shadow: 0 0 0 4px rgba(85,240,138,.36); }
.token-loader small {
  display: block;
  margin-top: 7px;
  color: #c6def5;
  font-size: .63rem;
  font-weight: 800;
}
.swapper-button,
.swapper-icon-button,
.swapper-action,
.trait-summary,
.trait-panel-tools button,
.trait-option,
.wallet-token button {
  appearance: none;
  border: 0;
  font-family: "Fredoka", sans-serif;
  cursor: pointer;
}
.swapper-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--swapper-ink);
  border-radius: 14px 5px 14px 5px;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 4px 5px 0 rgba(0,0,0,.24);
  transition: transform .2s ease, box-shadow .2s ease;
}
.swapper-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 6px 7px 0 rgba(0,0,0,.24); }
.swapper-button:disabled,
.swapper-action:disabled { opacity: .45; cursor: not-allowed; }
.swapper-button-primary { color: white; background: #078ceb; }
.swapper-button-secondary { color: var(--swapper-ink); background: var(--swapper-paper); }
.swapper-status {
  margin: 0;
  display: grid;
  align-content: center;
  color: #d8eaff;
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.35;
}
.swapper-status::before {
  content: "STATUS";
  width: fit-content;
  margin-bottom: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: var(--swapper-ink);
  font-size: .52rem;
  letter-spacing: .1em;
  background: var(--swapper-green);
}
.swapper-status[data-tone="success"] { color: var(--swapper-green); }
.swapper-status[data-tone="error"] { color: #ffd0d0; }
.swapper-status[data-tone="notice"] { color: #fff0aa; }

.creator-vault {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  border-bottom: 3px solid var(--swapper-ink);
  color: var(--swapper-paper);
  background:
    linear-gradient(110deg, rgba(6,79,148,.9), rgba(6,79,148,.66)),
    url("/assets/storybook-clouds.jpg") center 50% / cover no-repeat,
    var(--swapper-blue);
}
.creator-vault-head {
  display: grid;
  grid-template-columns: minmax(240px, .6fr) minmax(520px, 1.4fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: start;
}
.creator-vault-intro { align-self: center; }
.creator-vault-head .mini-label { color: var(--swapper-green); }
.creator-vault-head h2 {
  margin: 7px 0 9px;
  color: var(--swapper-paper);
  max-width: 390px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: .88;
}
.creator-vault-head p:last-child {
  max-width: 410px;
  margin: 0;
  color: #d8eaff;
  font-weight: 850;
}
.creator-vault-connect {
  min-width: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  border: 0;
  color: var(--swapper-ink);
  background: transparent;
  box-shadow: none;
}
.creator-vault-connect-top {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 2px solid var(--swapper-ink);
  border-radius: 14px 5px 14px 5px;
  background: rgba(248,251,255,.94);
  box-shadow: 3px 4px 0 rgba(0,0,0,.22);
}
.creator-vault-connect-top > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.creator-vault-connect span {
  color: var(--swapper-blue);
  font-size: .66rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.creator-vault-connect strong {
  overflow: hidden;
  font-family: "Fredoka", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creator-pull-button {
  min-height: 44px;
  padding: 9px 13px;
  border: 2px solid var(--swapper-ink);
  border-radius: 16px 6px 16px 6px;
  color: white;
  font: 900 .85rem "Fredoka", sans-serif;
  background: #078ceb;
  box-shadow: 4px 5px 0 rgba(0,0,0,.24);
  cursor: pointer;
}
.creator-pull-button:disabled { opacity: .45; cursor: not-allowed; }
.creator-vault-status {
  width: calc(100% - 8px);
  margin: 0;
  margin-inline: 4px;
  padding: 6px 8px;
  border: 1px solid rgba(5,8,13,.32);
  border-radius: 9px 3px 9px 3px;
  color: #36536e;
  font-size: .61rem;
  font-weight: 900;
  background: #d9edff;
}
.creator-vault-status[data-tone="success"] { color: #075f32; }
.creator-vault-status[data-tone="error"] { color: #a72121; }
.creator-vault-status[data-tone="notice"] { color: #705500; }
.creator-gallery {
  margin: 0;
  padding: 9px;
  border: 2px solid var(--swapper-ink);
  border-radius: 17px 5px 17px 5px;
  color: var(--swapper-paper);
  background: #064f94;
  box-shadow: 6px 8px 0 rgba(0,0,0,.28);
}
.creator-gallery-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.creator-gallery-tools > div:first-child { display: grid; gap: 1px; }
.creator-gallery-tools > div:first-child strong { font: 900 .88rem "Fredoka", sans-serif; }
.creator-gallery-tools > div:first-child span { color: var(--swapper-green); font-size: .56rem; font-weight: 1000; text-transform: uppercase; }
.creator-gallery-tools > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.creator-gallery-tools button {
  min-height: 30px;
  padding: 5px 8px;
  border: 2px solid var(--swapper-ink);
  border-radius: 9px 3px 9px 3px;
  color: var(--swapper-ink);
  font: 900 .61rem "Fredoka", sans-serif;
  background: var(--swapper-paper);
  box-shadow: 2px 3px 0 rgba(0,0,0,.22);
  cursor: pointer;
}
.creator-gallery-tools [data-shuffle-wallet] { background: var(--swapper-green); }
.creator-gallery-tools button:disabled { opacity: .4; cursor: not-allowed; }
.creator-export-bar {
  margin-top: 8px;
  padding-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  border-top: 2px solid rgba(248,251,255,.14);
}
.creator-export-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.creator-export-modes button,
.creator-export-bar > .creator-export-button {
  min-height: 38px;
  padding: 5px 8px;
  border: 2px solid var(--swapper-ink);
  border-radius: 11px 4px 11px 4px;
  font-family: "Fredoka", sans-serif;
  font-weight: 900;
  box-shadow: 3px 4px 0 rgba(0,0,0,.24);
  cursor: pointer;
}
.creator-export-modes button {
  display: grid;
  align-content: center;
  justify-items: start;
  color: var(--swapper-ink);
  text-align: left;
  background: #d9edff;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.creator-export-modes button:hover { transform: translateY(-2px); }
.creator-export-modes button.is-active {
  background: var(--swapper-green);
  box-shadow: 5px 7px 0 rgba(0,0,0,.3);
}
.creator-export-modes strong { font-size: .72rem; }
.creator-export-modes span { color: #36536e; font: 900 .5rem "Nunito", sans-serif; text-transform: uppercase; }
.creator-flex-colors {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}
.creator-flex-colors > span {
  flex: 0 0 auto;
  color: #bcd8ef;
  font: 900 .52rem "Nunito", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.creator-flex-colors > div { display: flex; align-items: center; gap: 5px; }
.creator-flex-colors button,
.creator-flex-colors label {
  width: 23px;
  height: 23px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 2px solid var(--swapper-ink);
  border-radius: 50%;
  background: var(--swatch, #087bd3);
  box-shadow: 2px 3px 0 rgba(0,0,0,.24);
  cursor: pointer;
}
.creator-flex-colors button.is-active { outline: 3px solid var(--swapper-green); outline-offset: 2px; }
.creator-flex-colors label { position: relative; border-radius: 10px 3px 10px 3px; }
.creator-flex-colors label::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font: 900 1rem "Fredoka", sans-serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
  pointer-events: none;
}
.creator-flex-colors input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.creator-export-bar > .creator-export-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 96px;
  color: white;
  background: #078ceb;
}
.creator-export-bar > .creator-export-button:disabled { opacity: .4; cursor: not-allowed; }
.creator-toast {
  position: fixed;
  right: clamp(12px, 3vw, 34px);
  bottom: clamp(12px, 3vw, 34px);
  z-index: 80;
  max-width: min(390px, calc(100vw - 24px));
  padding: 14px 18px 14px 42px;
  border: 3px solid var(--swapper-ink);
  border-radius: 20px 7px 20px 7px;
  color: var(--swapper-ink);
  font: 900 .82rem "Fredoka", sans-serif;
  background: var(--swapper-green);
  box-shadow: 7px 9px 0 rgba(0,0,0,.3), 0 20px 48px rgba(0,0,0,.24);
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
}
.creator-toast::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 13px;
  height: 7px;
  border-left: 3px solid var(--swapper-ink);
  border-bottom: 3px solid var(--swapper-ink);
  transform: translateY(-65%) rotate(-45deg);
}
.creator-toast[data-tone="error"] { color: white; background: #b93232; }
.creator-toast[data-tone="error"]::before { border-color: white; }
.creator-toast.is-visible { opacity: 1; transform: none; }
.swapper-icon-button {
  width: 40px;
  aspect-ratio: 1;
  border: 2px solid var(--swapper-ink);
  border-radius: 50%;
  color: white;
  font-size: 1.5rem;
  background: var(--swapper-blue);
}
.wallet-token-grid {
  position: relative;
  height: 208px;
  margin-top: 8px;
  overflow: hidden;
  border: 2px solid var(--swapper-ink);
  border-radius: 14px 5px 14px 5px;
  background:
    linear-gradient(rgba(8,123,211,.82), rgba(8,123,211,.82)),
    url("/assets/storybook-clouds.jpg") center / cover no-repeat,
    var(--swapper-blue);
  touch-action: none;
}
.wallet-token {
  position: absolute;
  z-index: 1;
  width: var(--wallet-tile-size, 60px);
  height: var(--wallet-tile-size, 60px);
  padding: 2px;
  display: block;
  border: 2px solid var(--swapper-ink);
  border-radius: 10px 3px 10px 3px;
  color: var(--swapper-ink);
  background: var(--swapper-paper);
  box-shadow: 2px 3px 0 rgba(0,0,0,.3);
  cursor: grab;
  transform: rotate(var(--tile-turn, 0deg));
  transition: left .28s cubic-bezier(.22, 1, .36, 1), top .28s cubic-bezier(.22, 1, .36, 1), transform .18s ease, box-shadow .18s ease;
  user-select: none;
}
.wallet-token:hover { z-index: 4; transform: translateY(-2px) rotate(var(--tile-turn, 0deg)); }
.wallet-token.is-selected { box-shadow: 0 0 0 2px var(--swapper-green), 3px 4px 0 rgba(0,0,0,.36); }
.wallet-token.is-dragging {
  z-index: 50;
  cursor: grabbing;
  transform: scale(1.08) rotate(0);
  transition: none;
}
.wallet-token.is-drop-target {
  z-index: 20;
  box-shadow: 0 0 0 4px var(--swapper-green), 5px 7px 0 rgba(0,0,0,.38);
  transform: scale(.92) rotate(0);
}
.wallet-token-art {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 7px 2px 7px 2px;
  background: var(--swapper-blue);
  cursor: inherit;
  touch-action: none;
}
.wallet-token img,
.wallet-token-placeholder { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; background: #b9ddff; }
.wallet-token-placeholder { color: white; font: 900 1rem "Fredoka", sans-serif; }
.wallet-token-checkbox {
  appearance: none;
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--swapper-ink);
  border-radius: 4px;
  background: rgba(255,255,255,.94);
  box-shadow: 1px 2px 0 rgba(0,0,0,.25);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.wallet-token-checkbox:checked {
  background-color: var(--swapper-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.3 12 13 4' fill='none' stroke='%2305080d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wallet-token-checkbox:hover { transform: scale(1.08); }
.wallet-token-checkbox:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.wallet-empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 18px; color: white; text-align: center; font-weight: 1000; }

.swapper-workspace {
  padding: clamp(18px, 2.6vw, 32px);
  height: clamp(680px, calc(100vh - 210px), 820px);
  display: grid;
  grid-template-columns: minmax(390px, .88fr) minmax(420px, 1.12fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: stretch;
}
.swapper-preview-column {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.swapper-preview-card {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--swapper-ink);
}
.swapper-preview-topline {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.preview-token,
.preview-mode,
.preview-compare {
  padding: 6px 9px;
  border: 2px solid var(--swapper-ink);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--swapper-paper);
}
.preview-mode { color: white; background: var(--swapper-blue); }
.preview-compare {
  color: white;
  background: var(--swapper-blue);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 3px 4px 0 rgba(0,0,0,.22);
  transition: transform .18s ease, color .18s ease, background-color .18s ease;
}
.preview-compare:hover:not(:disabled) { transform: translateY(-2px); }
.preview-compare.is-active { color: var(--swapper-ink); background: var(--swapper-green); }
.preview-compare:disabled { opacity: .52; cursor: not-allowed; }
.canvas-frame {
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 3px solid var(--swapper-ink);
  border-radius: 38px 10px 38px 10px;
  background: var(--swapper-blue);
  box-shadow: 7px 9px 0 rgba(0,0,0,.24);
}
#youkie-canvas { width: 100%; height: 100%; object-fit: cover; }
.canvas-frame.has-preview #youkie-canvas { animation: previewResolve .26s ease both; }
.canvas-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: white;
  background: rgba(6,79,148,.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.canvas-frame.is-rendering .canvas-loader { opacity: 1; }
.canvas-loader span {
  width: 54px;
  aspect-ratio: 1;
  margin-inline: auto;
  border: 6px solid rgba(255,255,255,.28);
  border-top-color: var(--swapper-green);
  border-radius: 50%;
  animation: swapperSpin .72s linear infinite;
}
.canvas-loader small { font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; }
@keyframes swapperSpin { to { transform: rotate(360deg); } }
@keyframes previewResolve {
  from { opacity: .72; transform: scale(.992); }
  to { opacity: 1; transform: scale(1); }
}
.special-token-state {
  position: absolute;
  inset: 0;
  padding: 30px;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: white;
  background:
    radial-gradient(circle at 50% 30%, rgba(85,240,138,.35), transparent 11rem),
    var(--swapper-blue);
}
.special-token-state > span {
  width: 78px;
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border: 3px solid var(--swapper-ink);
  border-radius: 50%;
  color: var(--swapper-ink);
  font: 900 1.5rem "Fredoka", sans-serif;
  background: var(--swapper-green);
  box-shadow: 6px 8px 0 rgba(0,0,0,.25);
}
.special-token-state strong { font: 900 clamp(2rem, 4vw, 3.6rem)/.9 "Fredoka", sans-serif; }
.special-token-state p { max-width: 360px; margin: 0; color: #d8eaff; font-weight: 800; }
.special-token-state a { width: fit-content; margin: 8px auto 0; color: var(--swapper-green); font-weight: 1000; }
.preview-actions {
  grid-row: 3;
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.swapper-action {
  min-width: 0;
  min-height: 58px;
  padding: 8px 6px;
  display: grid;
  place-content: center;
  border: 2px solid var(--swapper-ink);
  border-radius: 14px 5px 14px 5px;
  color: white;
  background: var(--swapper-blue);
  box-shadow: 4px 5px 0 rgba(0,0,0,.23);
  transition: transform .18s ease, box-shadow .18s ease;
}
.swapper-action:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 5px 7px 0 rgba(0,0,0,.23); }
.swapper-action span { font: 800 .54rem "Nunito", sans-serif; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }
.swapper-action strong { font-size: .74rem; }
.swapper-action-flex {
  min-height: 58px;
  color: #05080d;
  background: var(--swapper-green);
}
.swapper-action-flex span { opacity: .68; }
.swapper-action-flex strong { font-size: .82rem; }
.swapper-controls-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: clamp(14px, 1.8vw, 20px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  border: 3px solid var(--swapper-ink);
  border-radius: 10px 38px 10px 38px;
  color: var(--swapper-ink);
  background: #d8ecff;
  box-shadow: 9px 11px 0 rgba(0,0,0,.24);
  overflow: hidden;
}
.remix-id-dock {
  min-width: 0;
  margin-bottom: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(250px, .86fr) minmax(190px, 1.14fr);
  gap: 7px;
  border: 0;
  background: transparent;
}
.remix-id-dock .token-loader {
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
  border: 0;
  border-radius: 11px 4px 11px 4px;
  color: white;
  background: var(--swapper-blue);
  box-shadow: none;
}
.remix-id-dock .token-loader label { margin: 0; color: white; white-space: nowrap; }
.remix-id-dock .token-loader > div { grid-template-columns: auto minmax(62px, 1fr) auto; gap: 5px; }
.remix-id-dock .token-loader input { min-height: 36px; padding: 5px 8px; }
.remix-id-dock .token-loader .swapper-button { min-height: 36px; padding: 6px 10px; }
.remix-id-dock .token-prefix { font-size: 1rem; }
.remix-id-dock .swapper-status {
  position: relative;
  min-width: 0;
  padding: 8px 10px 8px 27px;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 11px 4px 11px 4px;
  color: #36536e;
  font-size: .61rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(248,251,255,.9);
  box-shadow: none;
}
.remix-id-dock .swapper-status::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--swapper-ink);
  border-radius: 50%;
  background: var(--swapper-green);
  transform: translateY(-50%);
}
.remix-id-dock .swapper-status[data-tone="success"] { color: #075f32; }
.remix-id-dock .swapper-status[data-tone="error"] { color: #a72121; }
.remix-id-dock .swapper-status[data-tone="notice"] { color: #705500; }
.remix-owned-picker {
  min-width: 0;
  padding: 7px 8px 8px;
  grid-column: 1 / -1;
  border: 2px solid var(--swapper-ink);
  border-radius: 13px 5px 13px 5px;
  color: white;
  background:
    linear-gradient(rgba(6,79,148,.82), rgba(6,79,148,.82)),
    url("/assets/storybook-clouds.jpg") center / cover no-repeat,
    var(--swapper-blue);
  box-shadow: 3px 4px 0 rgba(0,0,0,.18);
}
.remix-owned-picker[hidden] { display: none; }
.remix-owned-picker header {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.remix-owned-picker header strong { font-size: .67rem; }
.remix-owned-picker header span {
  color: var(--swapper-green);
  font-size: .55rem;
  font-weight: 1000;
  text-transform: uppercase;
}
.remix-owned-grid {
  padding: 1px 2px 4px;
  display: grid;
  grid-auto-columns: 48px;
  grid-auto-flow: column;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--swapper-green) rgba(255,255,255,.12);
  scrollbar-width: thin;
}
.remix-owned-grid button {
  width: 48px;
  aspect-ratio: 1;
  padding: 2px;
  overflow: hidden;
  border: 2px solid var(--swapper-ink);
  border-radius: 10px 3px 10px 3px;
  color: white;
  background: var(--swapper-paper);
  box-shadow: 2px 3px 0 rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.remix-owned-grid button:hover:not(:disabled) { transform: translateY(-2px); }
.remix-owned-grid button.is-active {
  box-shadow: 0 0 0 3px var(--swapper-green), 3px 4px 0 rgba(0,0,0,.36);
}
.remix-owned-grid button:disabled { opacity: .58; cursor: wait; }
.remix-owned-grid img,
.remix-owned-grid button > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 6px 2px 6px 2px;
  object-fit: cover;
  background: #b9ddff;
}
.swapper-controls-head {
  margin-bottom: 0;
  padding: 2px 0 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid rgba(5,8,13,.3);
}
.swapper-controls-head h2 { margin: 4px 0 0; color: var(--swapper-ink); font-size: clamp(2rem, 3vw, 3.2rem); line-height: .88; text-shadow: none; }
.swapper-controls-head > div:last-child { display: flex; gap: 8px; }
.trait-pool-strip {
  margin-bottom: 0;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 2px solid var(--swapper-ink);
  border-radius: 14px 5px 14px 5px;
  background:
    linear-gradient(rgba(6,79,148,.84), rgba(6,79,148,.84)),
    url("/assets/storybook-clouds.jpg") center / cover no-repeat,
    var(--swapper-blue);
  box-shadow: 4px 5px 0 rgba(0,0,0,.2);
}
.trait-pool-strip > div:first-child { min-width: 0; display: grid; gap: 2px; }
.trait-pool-strip > div:first-child strong { color: var(--swapper-green); font: 1000 .66rem "Fredoka", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.trait-pool-strip > div:first-child small { overflow: hidden; color: white; font: 900 .75rem "Fredoka", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.trait-pool-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(50px, 1fr));
  gap: 5px;
}
.trait-pool-counts button {
  appearance: none;
  min-width: 48px;
  padding: 5px 6px;
  display: grid;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 8px 3px 8px 3px;
  color: #b9ddff;
  font-family: inherit;
  background: rgba(3,31,59,.58);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.trait-pool-counts button:hover { color: white; transform: translateY(-1px); }
.trait-pool-counts button[aria-selected="true"] {
  color: var(--swapper-ink);
  background: var(--swapper-green);
  box-shadow: inset 0 0 0 1px var(--swapper-ink);
  transform: translateY(-1px);
}
.trait-pool-counts button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.trait-pool-counts b { font-size: .43rem; text-transform: uppercase; }
.trait-pool-counts em { color: white; font: 900 .65rem "Fredoka", sans-serif; }
.trait-pool-counts button[aria-selected="true"] em { color: var(--swapper-ink); }
.trait-pool-strip.is-ready { box-shadow: 4px 5px 0 rgba(0,0,0,.2), inset 0 0 0 2px rgba(85,240,138,.18); }
.trait-controls img,
.trait-dex img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.trait-controls {
  min-height: 0;
  padding: 0 8px 8px 0;
  display: block;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overscroll-behavior: contain;
  scrollbar-color: var(--swapper-blue) transparent;
  scrollbar-gutter: stable;
}
.trait-control {
  overflow: hidden;
  border: 2px solid var(--swapper-ink);
  border-radius: 22px 7px 22px 7px;
  background: var(--swapper-paper);
  box-shadow: 5px 6px 0 rgba(0,0,0,.19);
}
.trait-control:nth-child(even) { border-radius: 7px 22px 7px 22px; }
.trait-summary {
  width: 100%;
  min-height: 72px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  text-align: left;
  color: var(--swapper-ink);
  background: transparent;
}
.trait-summary:hover { background: #eff8ff; }
.trait-browser-summary { cursor: default; }
.trait-browser-summary:hover { background: transparent; }
.trait-selected-thumb {
  width: 52px;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 2px solid var(--swapper-ink);
  border-radius: 16px 5px 16px 5px;
  background:
    linear-gradient(45deg, #d6e6f4 25%, transparent 25% 75%, #d6e6f4 75%),
    linear-gradient(45deg, #d6e6f4 25%, white 25% 75%, #d6e6f4 75%);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
}
.trait-selected-thumb img { width: 100%; height: 100%; object-fit: contain; }
.trait-summary-copy { min-width: 0; display: grid; }
.trait-summary-copy small { color: #50677f; font: 900 .57rem "Nunito", sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.trait-summary-copy strong { margin-top: 2px; overflow: hidden; font-size: clamp(.92rem, 1.3vw, 1.1rem); text-overflow: ellipsis; white-space: nowrap; }
.trait-summary-copy em { width: fit-content; margin-top: 4px; padding: 3px 6px; border-radius: 999px; font: normal 1000 .48rem "Nunito", sans-serif; text-transform: uppercase; background: #d8ecff; }
[data-rarity="mythic"] { color: #7a3c00; background: #ffd66b !important; }
[data-rarity="legendary"] { color: #653200; background: #ffb875 !important; }
[data-rarity="rare"] { color: #00386d; background: #b9ddff !important; }
[data-rarity="common"] { color: #06411f; background: #ceffe2 !important; }
[data-rarity="vault"] { color: #05080d; background: var(--swapper-green) !important; }
.trait-panel {
  max-height: 0;
  padding: 0 13px;
  overflow: hidden;
  border-top: 0 solid var(--swapper-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  background: #c9e4ff;
  transition:
    max-height .34s cubic-bezier(.22, 1, .36, 1),
    padding .28s ease,
    border-width .28s ease,
    opacity .16s ease,
    transform .28s ease,
    visibility 0s linear .34s;
}
.trait-control.is-open .trait-panel {
  max-height: 330px;
  padding: 10px;
  border-top-width: 2px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    max-height .38s cubic-bezier(.22, 1, .36, 1),
    padding .3s ease,
    border-width .3s ease,
    opacity .2s ease .05s,
    transform .3s ease,
    visibility 0s;
}
.trait-controls.is-tabbed-trait .trait-panel {
  max-height: none;
  padding: 10px;
  overflow: visible;
  border-top-width: 2px;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: none;
}
.trait-panel-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.trait-panel-tools label > span { display: block; margin-bottom: 5px; color: #435970; font-size: .57rem; font-weight: 1000; text-transform: uppercase; }
.trait-panel-tools input { min-height: 38px; padding: 7px 9px; }
.trait-panel-tools button {
  min-height: 38px;
  padding: 7px 11px;
  border: 2px solid var(--swapper-ink);
  border-radius: 12px 4px 12px 4px;
  color: var(--swapper-ink);
  font-weight: 900;
  background: var(--swapper-green);
  box-shadow: 3px 4px 0 rgba(0,0,0,.19);
}
.trait-option-grid {
  max-height: 248px;
  margin-top: 8px;
  padding: 2px 5px 6px 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow-y: auto;
  scrollbar-color: var(--swapper-blue) transparent;
}
.trait-controls.is-tabbed-trait .trait-option-grid {
  max-height: none;
  overflow: visible;
}
.trait-option {
  min-width: 0;
  min-height: 60px;
  padding: 5px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
  border: 2px solid var(--swapper-ink);
  border-radius: 16px 5px 16px 5px;
  color: var(--swapper-ink);
  background: var(--swapper-paper);
  box-shadow: 3px 4px 0 rgba(0,0,0,.16);
  transition: transform .17s ease, box-shadow .17s ease, background .17s ease;
}
.trait-option:hover { transform: translateY(-2px); box-shadow: 4px 6px 0 rgba(0,0,0,.18); }
.trait-option[aria-pressed="true"] { background: var(--swapper-green); box-shadow: 4px 5px 0 var(--swapper-blue); }
.trait-option img,
.trait-option-empty {
  width: 48px;
  aspect-ratio: 1;
  border: 1px solid rgba(5,8,13,.28);
  border-radius: 12px 4px 12px 4px;
  object-fit: contain;
  background:
    linear-gradient(45deg, #d6e6f4 25%, transparent 25% 75%, #d6e6f4 75%),
    linear-gradient(45deg, #d6e6f4 25%, white 25% 75%, #d6e6f4 75%);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
}
.trait-option-empty { display: grid; place-items: center; color: #51667b; font-size: .64rem; }
.trait-option-copy { min-width: 0; display: grid; }
.trait-option-copy strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.trait-option-copy small { width: fit-content; max-width: 100%; margin-top: 4px; padding: 3px 5px; overflow: hidden; border-radius: 999px; font: 900 .45rem "Nunito", sans-serif; text-overflow: ellipsis; white-space: nowrap; background: #d8ecff; }
.trait-pool-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border: 2px dashed rgba(5,8,13,.38);
  border-radius: 14px 5px 14px 5px;
  color: #435970;
  font-size: .69rem;
  font-weight: 900;
  text-align: center;
  background: rgba(248,251,255,.52);
}
.trait-option-future {
  min-height: 60px;
  grid-template-columns: 48px minmax(0, 1fr);
  border-style: dashed;
  background: rgba(185,221,255,.5);
  box-shadow: none;
}
.trait-option-future:disabled { opacity: .68; cursor: not-allowed; }
.trait-future-icon {
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px dashed var(--swapper-blue);
  border-radius: 12px 4px 12px 4px;
  color: var(--swapper-blue);
  font: 900 1.35rem "Fredoka", sans-serif;
  background: rgba(248,251,255,.6);
}
.trait-option-future .trait-option-copy small { background: var(--swapper-green); }
.swapper-rule-note {
  margin-top: 0;
  padding: 10px 12px;
  border: 2px solid var(--swapper-ink);
  border-radius: 18px 6px 18px 6px;
  color: var(--swapper-paper);
  background: var(--swapper-blue);
}
.swapper-rule-note strong { font-family: "Fredoka", sans-serif; }
.swapper-rule-note p { margin: 0; color: #d8eaff; font-size: .66rem; font-weight: 800; }

.trait-dex {
  min-width: 0;
  scroll-margin-top: 140px;
  color: var(--swapper-ink);
  background: #b9ddff;
}
.trait-dex-hero {
  padding: clamp(22px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .42fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
  border-bottom: 3px solid var(--swapper-ink);
  color: white;
  background:
    linear-gradient(105deg, rgba(6,79,148,.95), rgba(6,79,148,.7)),
    url("/assets/storybook-clouds.jpg") center / cover no-repeat,
    var(--swapper-blue);
}
.trait-dex-hero h2 { max-width: 760px; margin: 8px 0 10px; color: white; font-size: clamp(2.8rem, 5.5vw, 6rem); line-height: .86; }
.trait-dex-hero p { max-width: 720px; margin: 0; color: #d8eaff; font-weight: 850; }
.trait-dex-score {
  padding: 18px;
  display: grid;
  gap: 7px;
  border: 3px solid var(--swapper-ink);
  border-radius: 28px 8px 28px 8px;
  color: var(--swapper-ink);
  background: var(--swapper-green);
  box-shadow: 7px 9px 0 rgba(0,0,0,.28);
  transform: rotate(1deg);
}
.trait-dex-score > span { font-size: .62rem; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; }
.trait-dex-score > strong { display: flex; align-items: baseline; font: 900 clamp(2.5rem, 5vw, 4.8rem)/.78 "Fredoka", sans-serif; }
.trait-dex-score > strong em { margin-inline: 3px; font-size: .5em; opacity: .55; }
.trait-dex-score > div { height: 12px; overflow: hidden; border: 2px solid var(--swapper-ink); border-radius: 999px; background: rgba(248,251,255,.75); }
.trait-dex-score i { width: 0; height: 100%; display: block; background: var(--swapper-bright); transition: width .65s cubic-bezier(.22,1,.36,1); }
.trait-dex-score small { font-weight: 1000; }
.trait-dex-export {
  min-height: 40px;
  margin-top: 3px;
  padding: 7px 10px;
  border: 2px solid var(--swapper-ink);
  border-radius: 13px 4px 13px 4px;
  color: white;
  font: 900 .7rem "Fredoka", sans-serif;
  background: var(--swapper-blue);
  box-shadow: 3px 4px 0 rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trait-dex-export:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 4px 6px 0 rgba(0,0,0,.28); }
.trait-dex-export:disabled { opacity: .45; cursor: not-allowed; }
.trait-dex-body { padding: clamp(18px, 2.7vw, 34px); }
.trait-dex-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trait-dex-category {
  position: relative;
  min-width: 0;
  min-height: 116px;
  padding: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 2px solid var(--swapper-ink);
  border-radius: 20px 6px 20px 6px;
  color: var(--swapper-ink);
  text-align: left;
  background: var(--swapper-paper);
  box-shadow: 4px 6px 0 rgba(0,0,0,.2);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  animation: dexCategoryNudge 6.4s ease-in-out infinite;
}
.trait-dex-category:nth-child(2) { animation-delay: .7s; }
.trait-dex-category:nth-child(3) { animation-delay: 1.4s; }
.trait-dex-category:nth-child(4) { animation-delay: 2.1s; }
.trait-dex-category:nth-child(5) { animation-delay: 2.8s; }
.trait-dex-category:nth-child(6) { animation-delay: 3.5s; }
.trait-dex-category:nth-child(even) { border-radius: 6px 20px 6px 20px; }
.trait-dex-category::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(90deg, var(--swapper-green) var(--category-progress), #8aa8c4 var(--category-progress)); }
.trait-dex-category:hover { animation: none; transform: translateY(-3px) rotate(-.35deg); }
.trait-dex-category.is-active { background: var(--swapper-green); box-shadow: 6px 8px 0 rgba(0,0,0,.28); }
@keyframes dexCategoryNudge {
  0%, 8%, 100% { transform: translateY(0) rotate(0); }
  2% { transform: translateY(-2px) rotate(-.6deg); }
  4% { transform: translateY(0) rotate(.55deg); }
  6% { transform: translateY(-1px) rotate(-.25deg); }
}
.trait-dex-category-art { position: relative; width: 90px; height: 82px; display: block; }
.trait-dex-category-art img { position: absolute; width: 58px; aspect-ratio: 1; border: 2px solid var(--swapper-ink); border-radius: 13px 4px 13px 4px; object-fit: contain; background: #d9edff; box-shadow: 2px 3px 0 rgba(0,0,0,.18); }
.trait-dex-category-art img:nth-child(1) { left: 0; top: 12px; transform: rotate(-7deg); }
.trait-dex-category-art img:nth-child(2) { left: 24px; top: 2px; transform: rotate(3deg); }
.trait-dex-category-art img:nth-child(3) { left: 34px; top: 24px; transform: rotate(8deg); }
.trait-dex-category > span:last-child { min-width: 0; display: grid; }
.trait-dex-category small { font-size: .56rem; font-weight: 1000; letter-spacing: .07em; text-transform: uppercase; }
.trait-dex-category strong { font: 900 1.45rem "Fredoka", sans-serif; }
.trait-dex-category em { color: #435970; font-size: .58rem; font-weight: 1000; text-transform: uppercase; }
.trait-dex-toolbar { margin-top: 20px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.trait-dex-toolbar > div:first-child { display: grid; }
.trait-dex-toolbar > div:first-child span { font: 900 clamp(1.35rem, 2.4vw, 2.2rem) "Fredoka", sans-serif; }
.trait-dex-toolbar > div:first-child strong { color: #435970; font-size: .64rem; text-transform: uppercase; }
.trait-dex-toolbar > div:last-child { display: flex; gap: 6px; }
.trait-dex-toolbar button,
.trait-dex-card > button,
.trait-dex-card > a {
  min-height: 34px;
  padding: 6px 10px;
  border: 2px solid var(--swapper-ink);
  border-radius: 10px 3px 10px 3px;
  color: var(--swapper-ink);
  font: 900 .65rem "Fredoka", sans-serif;
  text-decoration: none;
  background: var(--swapper-paper);
  box-shadow: 2px 3px 0 rgba(0,0,0,.2);
}
.trait-dex-toolbar button.is-active { background: var(--swapper-green); }
.trait-dex-grid {
  max-height: 620px;
  margin-top: 12px;
  padding: 4px 10px 12px 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  grid-auto-rows: auto;
  gap: 10px;
  overflow-y: auto;
  scrollbar-color: var(--swapper-blue) transparent;
  scrollbar-gutter: stable;
}
.trait-dex-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
  overflow: hidden;
  border: 2px solid var(--swapper-ink);
  border-radius: 14px;
  background: var(--swapper-paper);
  box-shadow: 3px 4px 0 rgba(0,0,0,.18);
  animation: dexCardIn .32s calc(min(var(--dex-index), 12) * 25ms) both;
}
.trait-dex-card.is-missing { background: var(--swapper-paper); }
.trait-dex-card.is-owned { color: white; background: #078ceb; box-shadow: 3px 4px 0 rgba(0,0,0,.24), inset 0 0 0 2px rgba(85,240,138,.3); }
.trait-dex-card-art { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--swapper-ink); border-radius: 9px; background: #d9edff; }
.trait-dex-card-art img { width: 100%; height: 100%; object-fit: contain; }
.trait-dex-card-art .trait-dex-status { position: absolute; left: 4px; top: 4px; padding: 3px 5px; border: 1px solid var(--swapper-ink); border-radius: 999px; font-size: .43rem; font-weight: 1000; text-transform: uppercase; background: var(--swapper-green); }
.trait-dex-card.is-missing .trait-dex-status { color: var(--swapper-ink); background: white; }
.trait-dex-lock {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--swapper-ink);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
  background: rgba(248,251,255,.94);
  box-shadow: 2px 3px 0 rgba(0,0,0,.18);
}
.trait-dex-card-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 2px 1px 0;
  display: grid;
  align-content: start;
  color: var(--swapper-ink);
  background: transparent;
}
.trait-dex-card-copy > span { width: fit-content; padding: 2px 5px; border-radius: 999px; font-size: .43rem; font-weight: 1000; text-transform: uppercase; background: #d9edff; }
.trait-dex-card-copy > strong { margin-top: 3px; overflow: hidden; font: 900 .82rem "Fredoka", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.trait-dex-card-copy small,
.trait-dex-card-copy em { overflow: hidden; color: #435970; font-size: .5rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.trait-dex-card.is-owned .trait-dex-card-copy small,
.trait-dex-card.is-owned .trait-dex-card-copy em { color: #435970; }
.trait-dex-card-copy em { display: none; }
.trait-dex-card > button,
.trait-dex-card > a {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 28px;
  padding-block: 4px;
  text-align: center;
  background: var(--swapper-green);
}
.trait-dex-card.is-missing > a { background: #d9edff; }
.trait-dex-empty { grid-column: 1 / -1; margin: 0; padding: 30px; border: 2px dashed var(--swapper-blue); border-radius: 20px 6px 20px 6px; color: #435970; text-align: center; font-weight: 1000; }
@keyframes dexCardIn { from { opacity: 0; transform: translateY(8px) rotate(-.6deg); } to { opacity: 1; transform: none; } }
.creator-export-preview {
  width: min(960px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  padding: 0;
  overflow: visible;
  border: 0;
  color: var(--swapper-ink);
  background: transparent;
}
.creator-export-preview::backdrop { background: rgba(3,20,38,.78); backdrop-filter: blur(7px); }
.creator-export-preview-card {
  height: min(860px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  padding: 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  border: 3px solid var(--swapper-ink);
  border-radius: 34px 10px 34px 10px;
  background:
    linear-gradient(rgba(6,79,148,.82), rgba(6,79,148,.82)),
    url("/assets/storybook-clouds.jpg") center / cover no-repeat,
    var(--swapper-blue);
  box-shadow: 12px 15px 0 rgba(0,0,0,.35);
}
.creator-export-preview-card header,
.creator-export-preview-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.creator-export-preview-card header span { color: var(--swapper-green); font-size: .58rem; font-weight: 1000; letter-spacing: .09em; text-transform: uppercase; }
.creator-export-preview-card h2 { margin: 2px 0 0; color: white; font-size: clamp(1.7rem, 4vw, 3rem); line-height: .9; }
.creator-export-preview-card button {
  min-height: 42px;
  padding: 8px 13px;
  border: 2px solid var(--swapper-ink);
  border-radius: 13px 4px 13px 4px;
  color: var(--swapper-ink);
  font: 900 .72rem "Fredoka", sans-serif;
  background: var(--swapper-paper);
  box-shadow: 3px 4px 0 rgba(0,0,0,.25);
  cursor: pointer;
}
.creator-export-preview-card button.is-primary { background: var(--swapper-green); }
.creator-export-preview-art {
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: auto;
  border: 3px solid var(--swapper-ink);
  border-radius: 22px 6px 22px 6px;
  background: #031f3b;
}
.creator-export-preview-art img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.creator-export-preview-card footer p { margin: 0; color: #d8eaff; font-size: .72rem; font-weight: 900; }
.creator-export-preview-card footer > div { display: flex; gap: 8px; }
.creator-mobile-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .trait-dex-category { animation: none; }
}

@media (max-width: 1100px) {
  .swapper-workspace { height: auto; grid-template-columns: 1fr; }
  .swapper-preview-column { height: auto; }
  .swapper-preview-card { width: min(100%, 520px); margin-inline: auto; }
  .swapper-controls-column { height: min(760px, calc(100vh - 40px)); min-height: 620px; }
  .trait-option-grid { grid-template-columns: 1fr; }
  .trait-dex-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .creator-vault-head { grid-template-columns: 1fr; }
  .swapper-controls-column { border-radius: 10px 32px 10px 32px; }
  .trait-dex-hero { grid-template-columns: 1fr; }
  .trait-dex-score { width: min(100%, 360px); transform: none; }
}

@media (max-width: 700px) {
  .swapper-page { padding-bottom: 88px; }
  .swapper-main { padding-top: 14px; }
  .swapper-app { width: calc(100vw - 20px); border-radius: 30px 8px 30px 8px; }
  .swapper-app,
  .trait-dex { scroll-margin-top: 150px; }
  .remix-id-dock { grid-template-columns: 1fr; }
  .remix-owned-picker { grid-column: 1; }
  .remix-id-dock .token-loader { grid-template-columns: auto minmax(0, 1fr); }
  .remix-id-dock .token-loader small { display: none; }
  .remix-id-dock .token-loader > div { grid-template-columns: auto minmax(58px, 1fr) auto; }
  .remix-id-dock .token-loader .swapper-button { grid-column: auto; }
  .creator-vault { padding: 16px; }
  .creator-vault-connect-top { grid-template-columns: minmax(0, 1fr) auto; }
  .creator-gallery-tools { align-items: center; flex-direction: row; }
  .creator-gallery-tools > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); }
  .creator-export-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .creator-flex-colors { grid-column: 1 / -1; flex-wrap: wrap; }
  .creator-export-bar > .creator-export-button { grid-column: 2; grid-row: 1; width: auto; }
  .wallet-token-grid { height: 174px; }
  .swapper-workspace { padding: 14px; }
  .canvas-frame { border-radius: 28px 8px 28px 8px; }
  .creator-export-preview-card footer { align-items: stretch; flex-direction: column; }
  .creator-export-preview-card footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .preview-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swapper-controls-column { height: min(680px, calc(100vh - 30px)); min-height: 560px; padding: 14px; }
  .swapper-controls-head { align-items: stretch; flex-direction: column; }
  .swapper-controls-head > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); }
  .trait-summary { min-height: 64px; padding: 6px; grid-template-columns: 42px minmax(0, 1fr); gap: 6px; }
  .trait-selected-thumb { width: 42px; }
  .trait-control.is-open .trait-panel { max-height: 292px; }
  .trait-option-grid { max-height: 210px; }
  .trait-controls.is-tabbed-trait .trait-panel,
  .trait-controls.is-tabbed-trait .trait-option-grid { max-height: none; }
  .creator-mode-switch { padding: 9px; gap: 7px; }
  .creator-mode-switch button { min-height: 68px; padding: 9px 7px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; text-align: center; }
  .creator-mode-switch button > span,
  .creator-mode-switch small { display: none; }
  .creator-mode-switch strong { font-size: .94rem; }
  .trait-pool-strip { grid-template-columns: 1fr; }
  .trait-pool-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .trait-pool-counts button { min-width: 0; }
  .trait-dex-hero { padding: 22px 16px; }
  .trait-dex-hero h2 { font-size: clamp(2.6rem, 14vw, 4.2rem); }
  .trait-dex-body { padding: 16px; }
  .trait-dex-categories { gap: 7px; }
  .trait-dex-category { min-height: 94px; padding: 8px; grid-template-columns: 66px minmax(0, 1fr); gap: 6px; }
  .trait-dex-category-art { width: 65px; height: 66px; }
  .trait-dex-category-art img { width: 43px; }
  .trait-dex-category-art img:nth-child(2) { left: 17px; }
  .trait-dex-category-art img:nth-child(3) { left: 23px; top: 20px; }
  .trait-dex-category strong { font-size: 1.05rem; }
  .trait-dex-toolbar { align-items: stretch; flex-direction: column; }
  .trait-dex-toolbar > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); }
  .trait-dex-grid { max-height: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .trait-dex-card { width: 100%; height: auto; aspect-ratio: auto; }
  .creator-mobile-bar {
    position: fixed;
    left: 50%;
    bottom: 10px;
    z-index: 95;
    width: min(520px, calc(100vw - 20px));
    min-height: 64px;
    padding: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    border: 3px solid var(--swapper-ink);
    border-radius: 20px 7px 20px 7px;
    color: var(--swapper-ink);
    background: rgba(248,251,255,.96);
    box-shadow: 7px 9px 0 rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.3);
    backdrop-filter: blur(12px);
    transform: translateX(-50%);
  }
  .creator-mobile-bar button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    border: 2px solid var(--swapper-ink);
    border-radius: 12px 4px 12px 4px;
    color: white;
    font: 900 .67rem "Fredoka", sans-serif;
    background: var(--swapper-blue);
    box-shadow: 3px 4px 0 rgba(0,0,0,.2);
  }
  .creator-mobile-bar [data-mobile-primary] { color: var(--swapper-ink); background: var(--swapper-green); }
  .creator-mobile-bar button:disabled { opacity: .42; cursor: not-allowed; }
  .creator-mobile-bar span { min-width: 72px; text-align: center; font-size: .58rem; font-weight: 1000; text-transform: uppercase; }
  .creator-toast { bottom: 92px; }
}

@media (max-width: 460px) {
  .swapper-action span { display: none; }
  .swapper-action strong { font-size: .7rem; }
}