/* Swap Gateway. */
.swap-page { background: var(--page-tint); background-image: radial-gradient(var(--dotgrid) 1px, transparent 1px); background-size: 22px 22px; padding-bottom: 120px; }
body[data-page='swap'] .site-footer { background: var(--bg); }
.swap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: start; }
.swap-grid > * { min-width: 0; }
.swap-side .soft { color: var(--faint); }
.swap-side .h-xl { margin: 14px 0 18px; }
.muted { color: var(--muted); }

.side-card { margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; max-width: 620px; }
.side-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.side-card .tk { display: flex; align-items: center; gap: 12px; }
.side-card .tk img { width: 38px; height: 38px; border-radius: 10px; }
.side-card .tk b { font-size: 18px; font-weight: 600; display: block; }
.side-card .tk small { color: var(--muted); font-size: 12.5px; }
.side-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.side-stats div { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
.side-stats dt, .route dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.side-stats dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.side-pools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.side-pools a { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.side-pools a.live::before { content: '●'; color: var(--blue); margin-right: 5px; font-size: 8px; vertical-align: 1px; }
.side-pools a:hover { border-color: var(--blue); color: var(--blue); }
.side-h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; margin: 22px 0 8px; }
.side-h .dashlink { font-size: 12px; font-weight: 500; }
.side-fills { list-style: none; margin: 0; padding: 0; display: grid; }
.side-fills li { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.side-fills li:last-child { border-bottom: 0; }
.side-fills li.muted { display: block; color: var(--muted); }
.side-fills .s { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; background: var(--blue-soft); color: var(--blue-ink); text-align: center; }
.side-fills .s.sell { background: var(--panel); color: var(--ink-2); }
.side-fills a { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.side-fills a:hover { color: var(--blue); }

.swap-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: 0 30px 80px var(--shadow); position: relative; }
.sc-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; }
.mode { display: inline-flex; background: var(--panel); border-radius: 999px; padding: 4px; }
.mode button { height: 34px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); }
.mode button[aria-selected='true'] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px var(--shadow-2); }
.gear { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.gear:hover, .gear[aria-expanded='true'] { color: var(--blue); background: var(--blue-soft); }
.gear svg { width: 18px; height: 18px; }
.settings { border: 1px dashed var(--dash); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.settings > p { margin: 0 0 8px; font-size: 13px; font-weight: 500; }
.slips { display: flex; gap: 6px; flex-wrap: wrap; }
.slips button, .slips label { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.slips button[aria-pressed='true'] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.slips input { width: 64px; border: 0; outline: 0; background: transparent; font-size: 13px; }
.set-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.leg { background: var(--panel); border: 1px solid transparent; border-radius: 16px; padding: 14px 16px; transition: border-color .2s; }
.leg:focus-within { border-color: var(--blue-line); background: var(--surface); }
.leg.out { background: var(--leg-out); }
.leg-top, .leg-bot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.leg-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.amt { flex: 1; width: 100%; min-width: 0; font-size: 34px; font-weight: 500; letter-spacing: -0.02em; border: 0; outline: 0; background: transparent; padding: 0; font-variant-numeric: tabular-nums; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
output.amt { display: block; }
output.amt.loading { color: var(--faint); }
.tok { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 15px; flex: none; transition: border-color .2s, box-shadow .2s; }
.tok:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.tok img, .tok .tk-ico { width: 30px; height: 30px; border-radius: 50%; }
.tk-ico { display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.tk-ico.usdg { background: #0e9f6e; }
.tk-ico.eth { background: #4b5bdc; }
.tok::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.bal { font-variant-numeric: tabular-nums; }
.max { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); }
.flip { display: grid; place-items: center; width: 40px; height: 40px; margin: -12px auto; position: relative; z-index: 2; border-radius: 12px; background: var(--surface); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); transition: transform .3s var(--ease), color .2s; }
.flip:hover { color: var(--blue); transform: rotate(180deg); }
.flip svg { width: 16px; height: 16px; }

.route { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 14px 2px 4px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.route dd { margin: 3px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.route dd.warn { color: var(--orange-ink); }
.go { width: 100%; height: 56px; margin-top: 14px; border-radius: 16px; background: var(--ink); color: var(--on-ink); font-size: 16px; font-weight: 600; transition: background .2s, box-shadow .2s, opacity .2s; }
.go:not(:disabled):hover { background: var(--blue); box-shadow: 0 10px 30px var(--blue-glow); }
.go:disabled { opacity: .45; cursor: not-allowed; }
.go.blue { background: var(--blue); color: #fff; }
.go.busy { position: relative; color: transparent; }
.go.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.msg { font-size: 13.5px; margin-top: 12px; line-height: 1.5; }
.msg:empty { display: none; }
.msg .box { padding: 10px 12px; border-radius: 12px; background: var(--panel); }
.msg .box.ok { background: var(--ok-bg); color: var(--ok-ink); }
.msg .box.bad { background: var(--bad-bg); color: var(--bad-ink); }
.msg .box.info { background: var(--blue-soft); color: var(--blue-ink); }
.msg a { text-decoration: underline; text-underline-offset: 2px; }
.fineprint { font-size: 11.5px; color: var(--muted); margin: 14px 4px 2px; line-height: 1.5; }
.acct { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 0 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.acct button { font-family: var(--sans); font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.acct button:hover { color: var(--bad); }

.picker { width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px)); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: 0 40px 100px var(--shadow-2); background: var(--surface); color: var(--ink); }
.picker[open] { display: flex; flex-direction: column; }
.picker::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.pk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pk-head button { width: 32px; height: 32px; border-radius: 9px; color: var(--muted); }
.pk-head button:hover { background: var(--panel); color: var(--ink); }
.picker input[type='search'] { height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; outline: 0; font-size: 15px; background: var(--surface-2); color: var(--ink); }
.picker input[type='search']:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.picker ul { list-style: none; margin: 10px 0 0; padding: 0; overflow-y: auto; }
.picker li button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 12px; text-align: left; }
.picker li button:hover, .picker li button:focus-visible { background: var(--blue-soft); }
.picker li img, .picker li .tk-ico { width: 34px; height: 34px; border-radius: 50%; }
.picker li b { display: block; font-size: 15px; }
.picker li small { color: var(--muted); font-size: 12px; }
.picker li .px { font-family: var(--mono); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wallets li button { grid-template-columns: 34px 1fr; }

@media (max-width: 980px) {
  .swap-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .swap-col { order: -1; }
  .swap-side .h-xl { font-size: 34px; }
}
@media (max-width: 520px) {
  .side-stats { grid-template-columns: 1fr 1fr; }
  .amt { font-size: 28px; }
  .route { grid-template-columns: 1fr; }
  .side-fills li { grid-template-columns: 52px 1fr auto; }
  .side-fills li a { display: none; }
}