/* ── Swap page layout ───────────────────────────────── */
[hidden] { display: none !important; }
.swap-shell { padding-top: 2.4rem; padding-bottom: 4rem; }

.swap-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem;
  margin: 0 auto 1.4rem; padding: 0.35rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #141414cc;
  max-width: max-content;
}
.swap-tabs .tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: 0.18s ease; white-space: nowrap;
}
.swap-tabs .tab:hover { color: var(--text); }
.swap-tabs .tab.is-active {
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: #fff; box-shadow: 0 0 18px #ff202066;
}

.swap-grid { display: flex; justify-content: center; }
.swap-grid .swap-card { width: min(560px, 100%); }

.swap-card {
  position: relative;
  border: 1px solid var(--line); border-radius: 1rem;
  background: #141414e8;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgb(255 32 32 / 12%) inset,
    0 30px 60px -25px rgb(255 32 32 / 35%);
}
.swap-card.hidden { display: none; }

/* ── Custom Bridge UI ─────────────────────────────── */
.puppy-bridge {
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}
.bridge-row {
  border: 1px solid var(--line); border-radius: 0.9rem;
  background: #0d0d0d;
  padding: 0.85rem 1rem;
}
.bridge-row:focus-within { border-color: rgb(255 32 32 / 55%); }
.bridge-row-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: var(--muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.bridge-balance { font-variant-numeric: tabular-nums; }
.bridge-row-body { display: flex; align-items: center; gap: 0.8rem; }
.bridge-recipient {
  display: flex; flex-direction: column; gap: 0.45rem;
  border: 1px solid var(--line); border-radius: 0.9rem;
  background: #0d0d0d;
  padding: 0.85rem 1rem;
}
.bridge-recipient label {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.04em;
}
.bridge-recipient input {
  appearance: none; outline: 0;
  border: 1px solid var(--line); border-radius: 0.6rem;
  background: #1c1c1c; color: var(--text);
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem; font-family: ui-monospace, monospace;
}
.bridge-recipient input:focus { border-color: var(--red); }
.recipient-fill {
  align-self: flex-end;
  appearance: none; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.recipient-fill:hover { border-color: var(--red); color: var(--red); }

/* ── Custom Swap UI ──────────────────────────────────── */
.puppy-swap {
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.65rem;
}

.swap-row {
  border: 1px solid var(--line); border-radius: 0.9rem;
  background: #0d0d0d;
  padding: 0.85rem 1rem;
  transition: border-color 0.18s ease;
}
.swap-row:focus-within { border-color: rgb(255 32 32 / 55%); box-shadow: 0 0 0 3px rgb(255 32 32 / 10%); }

.swap-row-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: var(--muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.swap-balance { font-variant-numeric: tabular-nums; }

.swap-row-body {
  display: flex; align-items: center; gap: 0.8rem;
}
.swap-amount {
  flex: 1; min-width: 0;
  appearance: none; border: 0; outline: 0; background: transparent;
  color: var(--text);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2rem; letter-spacing: 0.02em;
  padding: 0;
}
.swap-amount[readonly] { color: var(--text); cursor: default; }
.swap-amount::placeholder { color: #555; }

.swap-token {
  appearance: none; border: 1px solid var(--line); cursor: pointer;
  padding: 0.45rem 0.7rem 0.45rem 0.55rem;
  border-radius: 999px;
  background: #1c1c1c;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; font-size: 0.95rem;
  transition: 0.18s ease;
}
.swap-token:hover { border-color: var(--red); background: #222; }
.swap-token-logo {
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: #222; overflow: hidden; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.swap-token-logo img { width: 100%; height: 100%; object-fit: cover; }
.swap-token-caret { color: var(--muted); font-size: 0.75rem; }

.swap-row-foot {
  display: flex; gap: 0.4rem; margin-top: 0.55rem; justify-content: flex-end;
}
.swap-pct {
  appearance: none; border: 1px solid var(--line); cursor: pointer;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: 0.15s ease;
}
.swap-pct:hover { border-color: var(--red); color: var(--text); }

.swap-flip {
  appearance: none; border: 1px solid var(--line);
  align-self: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  background: #141414; color: var(--red); cursor: pointer;
  font-size: 1.1rem; font-weight: 700;
  margin: -0.4rem 0;
  transition: 0.18s ease;
  position: relative; z-index: 2;
  box-shadow: 0 0 0 4px #141414e8;
}
.swap-flip:hover { transform: rotate(180deg); border-color: var(--red); }

/* Quote info */
.swap-info {
  display: grid; gap: 0.45rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: 0.9rem;
  background: #0d0d0d;
  font-size: 0.82rem;
}
.swap-info > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.swap-info > div > span:last-child { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.swap-info .warn { color: #ffb648; }
.swap-info .danger { color: var(--red); }

/* Slippage */
.swap-slippage {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line); border-radius: 0.9rem;
  background: #0d0d0d;
}
.slip-label {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--muted);
}
.slip-current { color: var(--red); font-weight: 800; letter-spacing: 0.02em; }
.slip-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.slip {
  flex: 1; min-width: 56px;
  appearance: none; cursor: pointer;
  padding: 0.4rem 0.6rem; border-radius: 0.55rem;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: 0.15s ease;
}
.slip:hover { color: var(--text); }
.slip.is-active {
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: #fff; border-color: transparent;
}
.slip-custom {
  appearance: none; border: 1px solid var(--line);
  border-radius: 0.55rem; background: #1c1c1c;
  padding: 0.4rem 0.7rem;
  color: var(--text); font-size: 0.85rem;
  outline: 0;
}
.slip-custom:focus { border-color: var(--red); }

/* Action button */
.swap-action {
  appearance: none; border: 0; cursor: pointer;
  padding: 1.05rem 1.2rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: #fff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.4rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px -12px rgb(255 32 32 / 70%);
  transition: 0.18s ease;
}
.swap-action:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgb(255 32 32 / 80%); }
.swap-action[disabled] { opacity: 0.55; cursor: not-allowed; }
.swap-action.is-loading { background: #222; color: var(--muted); box-shadow: none; }

/* Status line */
.swap-status {
  font-size: 0.82rem; line-height: 1.5;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: #0d0d0d; color: var(--muted);
}
.swap-status.status-ok    { border-color: rgb(46 204 113 / 35%); color: #6fe39c; }
.swap-status.status-warn  { border-color: rgb(255 182 72 / 40%); color: #ffb648; }
.swap-status.status-error { border-color: rgb(255 32 32 / 50%);  color: #ff6a6a; }
.swap-status a { color: inherit; text-decoration: underline; }

/* Wallet pill */
.swap-wallet {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: #0d0d0d;
  font-size: 0.82rem;
  align-self: flex-start;
}
.swap-wallet .ww-icon img { width: 1.1rem; height: 1.1rem; border-radius: 999px; display: block; }
.swap-wallet .ww-name { font-weight: 700; }
.swap-wallet .ww-addr { color: var(--muted); font-size: 0.78rem; background: transparent; padding: 0; }
.swap-wallet .ww-disc {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  color: var(--red); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; margin-left: 0.4rem;
}
.swap-wallet .ww-disc:hover { text-decoration: underline; }

/* ── Modals (wallet & token picker) ─────────────────── */
.puppy-modal {
  border: 0; padding: 0;
  background: transparent;
  max-width: 460px; width: calc(100% - 2rem);
}
.puppy-modal::backdrop { background: rgb(0 0 0 / 70%); backdrop-filter: blur(6px); }
.puppy-modal .modal-card {
  border: 1px solid var(--line); border-radius: 1rem;
  background: #141414;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  box-shadow: 0 30px 80px -20px rgb(255 32 32 / 35%);
}
.puppy-modal .modal-head {
  display: flex; justify-content: space-between; align-items: center;
}
.puppy-modal h3 {
  font-family: "Bebas Neue", Impact, sans-serif;
  color: var(--red); font-size: 1.4rem; margin: 0; letter-spacing: 0.04em;
}
.modal-close {
  appearance: none; border: 0; background: transparent;
  cursor: pointer; color: var(--muted);
  font-size: 1.6rem; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-hint { color: var(--muted); font-size: 0.78rem; line-height: 1.5; margin: 0; }
.modal-hint a { color: var(--red); }

.wallet-list, .token-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
  max-height: 50vh; overflow: auto;
}
.wallet-btn, .token-btn {
  width: 100%;
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: #1c1c1c; color: var(--text);
  text-align: left;
  transition: 0.15s ease;
}
.wallet-btn:hover, .token-btn:hover { border-color: var(--red); background: #222; }
.wallet-btn img, .token-btn img { width: 1.8rem; height: 1.8rem; border-radius: 999px; flex-shrink: 0; }
.wallet-btn span { flex: 1; font-weight: 700; }
.wallet-btn em {
  font-style: normal; font-size: 0.65rem; color: var(--muted);
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.no-wallet {
  padding: 1rem; color: var(--muted); font-size: 0.85rem;
  border: 1px dashed var(--line); border-radius: 0.7rem; text-align: center;
}
.no-wallet a { color: var(--red); }

.token-search {
  appearance: none; outline: 0;
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: #1c1c1c; color: var(--text);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}
.token-search:focus { border-color: var(--red); }

.token-btn .token-info { flex: 1; display: flex; flex-direction: column; }
.token-btn .token-info strong { font-size: 0.95rem; }
.token-btn .token-info em { font-style: normal; color: var(--muted); font-size: 0.72rem; }
.token-btn code { color: var(--muted); font-size: 0.7rem; }
.token-btn .token-fallback {
  width: 1.8rem; height: 1.8rem; border-radius: 999px;
  background: #2a2a2a; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
}

/* ── Loading stub (used for the bridge fallback) ────── */
.loading-stub { text-align: center; color: var(--muted); }
.loading-stub p { margin: 0.6rem 0 0; font-size: 0.85rem; letter-spacing: 0.06em; }
.loading-stub .dot {
  display: inline-block; width: 8px; height: 8px; margin: 0 3px;
  border-radius: 999px; background: var(--red);
  animation: dotbounce 1.1s infinite ease-in-out;
}
.loading-stub .dot:nth-child(2) { animation-delay: 0.18s; }
.loading-stub .dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes dotbounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Generic info card (Pool, Stake) ─────────────────── */
.info-card {
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.info-head {
  display: flex; justify-content: space-between; align-items: center;
}
.info-eyebrow {
  color: var(--red); font-weight: 900;
  letter-spacing: 0.22em; text-transform: uppercase;
  font-size: 0.7rem;
}
.soon-pill {
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  border: 1px solid rgb(255 32 32 / 50%);
  color: var(--red);
  background: rgb(255 32 32 / 10%);
}
.info-title {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.02em; line-height: 1.05;
  margin: 0; color: var(--text);
}
.info-lead { color: var(--muted); line-height: 1.55; margin: 0; font-size: 0.92rem; }
.info-foot { color: var(--muted); font-size: 0.78rem; margin: 0; line-height: 1.5; }
.info-foot.small { font-size: 0.72rem; }

.bullet-list {
  list-style: none; padding: 0.85rem 1rem; margin: 0;
  display: grid; gap: 0.4rem;
  border: 1px solid var(--line); border-radius: 0.8rem;
  background: #0d0d0d;
}
.bullet-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.85rem; color: var(--muted);
}
.bullet-list li strong { color: var(--text); font-weight: 700; }

.info-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.action-btn {
  flex: 1; min-width: 160px;
  appearance: none; border: 0; cursor: pointer;
  padding: 0.85rem 1.1rem;
  border-radius: 0.8rem;
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: #fff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgb(255 32 32 / 60%);
  transition: 0.18s ease;
}
.action-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgb(255 32 32 / 70%); }
.action-btn.ghost {
  background: transparent; border: 1px solid var(--line);
  color: var(--text); box-shadow: none;
}
.action-btn.ghost:hover { border-color: var(--red); color: var(--red); }

/* ── Stake tiers ─────────────────────────────────────── */
.stake-tiers {
  display: grid; gap: 0.55rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.tier {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.85rem;
  border: 1px solid var(--line); border-radius: 0.8rem;
  background: #0d0d0d;
}
.tier strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.1rem; letter-spacing: 0.06em;
  color: var(--text);
}
.tier-apr { color: var(--red); font-weight: 800; font-size: 1.05rem; }
.tier em { font-style: normal; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.tier.highlighted {
  border-color: var(--red);
  background: linear-gradient(180deg, rgb(255 32 32 / 10%), #0d0d0d 70%);
  box-shadow: 0 0 24px -8px rgb(255 32 32 / 50%);
}

/* ── Liquidity Pool panel ────────────────────────────── */
.lp-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff0a, transparent);
}
.lp-pair { display: flex; align-items: center; gap: 0.5rem; }
.lp-logo {
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: #2a2a2a; border: 1px solid var(--line);
  display: inline-block;
}
.lp-logo-a {
  background: linear-gradient(135deg, var(--red), var(--orange));
  margin-right: -0.55rem; z-index: 1; position: relative;
}
.lp-logo-b { background: linear-gradient(135deg, #9945FF, #14F195); }
.lp-pair-label {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 1.2rem; letter-spacing: 0.06em;
  color: var(--text); margin-left: 0.4rem;
}
.lp-venue {
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

.lp-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding: 1rem 1.2rem;
}
.lp-stats > div {
  border: 1px solid var(--line); border-radius: 0.7rem;
  background: #0d0d0d;
  padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.lp-stats span {
  color: var(--muted); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.lp-stats strong {
  color: var(--text); font-weight: 700;
  font-size: 1rem; font-variant-numeric: tabular-nums;
}

.lp-position {
  margin: 0 1.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(255 32 32 / 35%);
  background: linear-gradient(180deg, rgb(255 32 32 / 8%), transparent);
  border-radius: 0.8rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.lp-pos-head { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); }
.lp-pos-head strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-pos-row { color: var(--muted); font-size: 0.78rem; }

.lp-actions { display: flex; gap: 0.55rem; padding: 1rem 1.2rem 0.5rem; }
.swap-card .info-foot { padding: 0 1.2rem 1.2rem; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 980px) { .swap-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .swap-amount { font-size: 1.6rem; }
  .swap-action { font-size: 1.2rem; padding: 0.95rem 1rem; }
  .slip { font-size: 0.7rem; padding: 0.35rem 0.4rem; }
  .swap-tabs .tab { padding: 0.45rem 0.75rem; font-size: 0.68rem; letter-spacing: 0.1em; }
  .lp-stats { grid-template-columns: 1fr; }
  .stake-tiers { grid-template-columns: 1fr; }
}