/* Confluo: dark-first, glass over a drifting synchronizer mesh. */
:root {
  --bg: #05070d;
  --bg-2: #0a0e18;
  --glass: rgba(16, 21, 34, 0.72);
  --glass-2: rgba(24, 31, 48, 0.72);
  --edge: rgba(140, 170, 255, 0.12);
  --edge-2: rgba(140, 170, 255, 0.22);
  --text: #eaf0ff;
  --muted: #8a94ad;
  --faint: #5b6480;
  --c1: #3cf0d0;   /* confluence teal */
  --c2: #8b6cff;   /* synchronizer violet */
  --c3: #ffcf5c;   /* signal amber */
  --good: #3ee6a0;
  --warn: #ffb35c;
  --bad: #ff6b81;
  --grid: rgba(120, 150, 255, 0.05);
  --radius: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #111a33 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.5 "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }
.muted { color: var(--muted); font-size: 13px; }
.mono { font-family: var(--mono); }

/* ---------- ambient mesh ---------- */
.mesh { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.drift { transform-box: fill-box; transform-origin: center; }
.drift.a { animation: drift-a 26s ease-in-out infinite alternate; }
.drift.b { animation: drift-b 32s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-140px, -60px) scale(0.9); } }
.mesh-links line { stroke: var(--c1); stroke-opacity: .12; stroke-width: 1; stroke-dasharray: 3 7; animation: dash 6s linear infinite; }
.mesh-links circle { fill: var(--c1); opacity: .35; }
.mesh-links circle.pulse { animation: node-pulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dash { to { stroke-dashoffset: -100; } }
@keyframes node-pulse { 50% { opacity: .9; transform: scale(1.8); } }
body.syncing .mesh-links line { stroke-opacity: .28; animation-duration: 1.4s; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: linear-gradient(to bottom, rgba(5, 7, 13, .9), rgba(5, 7, 13, .55));
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--edge);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.mark { width: 34px; height: 34px; flex: none; }
.mark .stream { fill: none; stroke: url(#markGrad); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 1.4s var(--ease) forwards; }
.mark .s2 { animation-delay: .12s; }
.mark .s3 { animation-delay: .24s; }
.mark .out { animation-delay: .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
body.syncing .mark .stream { animation: draw 1.4s var(--ease) forwards, flow 1.2s linear infinite; stroke-dasharray: 8 6; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--text), #b9c6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { color: var(--faint); font-size: 12px; white-space: nowrap; border-left: 1px solid var(--edge-2); padding-left: 10px; }

.tabs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); }
.tab { position: relative; z-index: 1; border: 0; background: none; padding: 7px 16px; border-radius: 999px; color: var(--muted); transition: color .3s var(--ease); }
.tab.active, .tab:hover { color: var(--text); }
.tab-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: linear-gradient(135deg, rgba(60, 240, 208, .18), rgba(139, 108, 255, .22)); border: 1px solid var(--edge-2); transition: transform .45s var(--spring), width .45s var(--spring); }

.status { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.sync { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); transition: border-color .3s; }
.sync-ring { width: 24px; height: 24px; }
.sync-track { fill: none; stroke: var(--edge-2); stroke-width: 2; }
.sync-arc { fill: none; stroke: var(--good); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 75.4; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; transition: stroke .3s, stroke-dashoffset .6s var(--ease); }
.sync-core { fill: var(--good); transition: fill .3s; }
.sync-orbit { transform-origin: 16px 16px; opacity: 0; transition: opacity .3s; }
.sync-orbit circle { fill: var(--c1); }
.sync.busy { border-color: rgba(60, 240, 208, .35); color: var(--text); }
.sync.busy .sync-arc { stroke: var(--c1); stroke-dashoffset: 52; animation: spin 1s linear infinite; }
.sync.busy .sync-core { fill: var(--c1); animation: core 1s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sync.busy .sync-orbit { opacity: 1; animation: spin 1.6s linear infinite reverse; }
.sync.error .sync-arc, .sync.error .sync-core { stroke: var(--bad); fill: var(--bad); }
@keyframes spin { to { transform: rotate(270deg); } }
.sync.busy .sync-orbit { animation-name: orbit; }
@keyframes orbit { to { transform: rotate(-360deg); } }
@keyframes core { 50% { transform: scale(1.5); } }

.net { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: rgba(255, 107, 129, .1); border: 1px solid rgba(255, 107, 129, .35); color: #ffc2cc; }
.net .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0 rgba(255, 107, 129, .6); animation: beacon 2s infinite; }
.net.devnet { background: rgba(255, 207, 92, .1); border-color: rgba(255, 207, 92, .35); color: #ffe6a8; }
.net.devnet .dot { background: var(--c3); }
@keyframes beacon { 70% { box-shadow: 0 0 0 8px rgba(255, 107, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 129, 0); } }

/* ---------- wallet ---------- */
.wallet-wrap { position: relative; }
.wallet-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid rgba(60, 240, 208, .4); background: linear-gradient(135deg, rgba(60, 240, 208, .16), rgba(139, 108, 255, .18)); font-weight: 600; font-size: 13px; white-space: nowrap; transition: transform .25s var(--spring), box-shadow .3s, border-color .3s; }
.wallet-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -10px rgba(60, 240, 208, .6); }
.wallet-btn[data-status="connected"] { background: var(--glass); border-color: var(--edge-2); font-family: var(--mono); font-weight: 500; font-size: 12px; }
.wallet-logo { width: 24px; height: 24px; border-radius: 50%; background: #0b0f1a; padding: 3px; display: block; }
.wallet-logo.lg { width: 40px; height: 40px; padding: 6px; }
.wallet-spin { width: 14px; height: 14px; display: none; fill: none; stroke: var(--c1); stroke-width: 2.5; stroke-dasharray: 20 60; stroke-linecap: round; animation: rot .8s linear infinite; }
.wallet-btn[data-status="connecting"] .wallet-spin, .wallet-btn[data-status="loading"] .wallet-spin { display: block; }
.wallet-btn[data-status="connecting"] { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px rgba(60, 240, 208, .12); } }
.wallet-menu.glass { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, calc(100vw - 32px)); padding: 16px; z-index: 30; background: #0c101c; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); animation: drop .35s var(--ease); transform-origin: top right; }
.wallet-menu[hidden] { display: none; }
.wm-head { display: flex; align-items: center; gap: 10px; }
.wm-id { flex: 1; min-width: 0; display: grid; }
.wm-id b { font-family: var(--mono); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-id span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wm-copy.done { color: var(--good); }
.wm-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(60, 240, 208, .08), rgba(139, 108, 255, .1)); border: 1px solid var(--edge); }
.wm-total span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.wm-total b { font-size: 20px; font-weight: 600; }
.wm-list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.wm-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border-radius: 10px; animation: fade-up .35s var(--ease) both; }
.wm-row:hover { background: var(--glass-2); }
.wm-row .tok-icon { grid-row: span 2; }
.wm-sym { font-weight: 600; font-size: 14px; }
.wm-sym em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--faint); }
.wm-amt { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.wm-amt small { display: block; font-size: 11px; color: var(--muted); }
.wm-usd { grid-column: 2 / 4; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.wm-err { font-size: 12px; color: var(--bad); margin: 8px 0 0; }
.wm-actions { display: flex; gap: 8px; margin-top: 12px; }
.wm-actions > * { flex: 1; text-align: center; padding: 8px; border-radius: 10px; border: 1px solid var(--edge); background: none; font-size: 13px; color: var(--muted); text-decoration: none; transition: all .2s; }
.wm-actions > *:hover { color: var(--text); border-color: var(--edge-2); background: var(--glass-2); }
.wm-actions .danger:hover { color: var(--bad); border-color: rgba(255, 107, 129, .4); }

.pay-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.pay-foot .quick { margin-top: 0; }
.balance { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; animation: fade-up .35s var(--ease); }
.balance .short { color: var(--bad); }
.balance button { border: 0; border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--bg); background: var(--c1); transition: transform .2s var(--spring), filter .2s; }
.balance button:hover { transform: scale(1.06); filter: brightness(1.1); }
.pick .px small { display: block; font-size: 11px; color: var(--faint); text-align: right; }
.pick .px { text-align: right; }

/* ---------- layout ---------- */
main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 24px; }
.view { display: none; }
.view.active { display: block; animation: view-in .5s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }
.glass {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.swap-layout { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---------- swap card ---------- */
.swap-card { position: relative; padding: 14px; }
.swap-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(60, 240, 208, .5), transparent 30%, transparent 70%, rgba(139, 108, 255, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.card-bar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; }
.seg { display: flex; gap: 4px; }
.seg-item { padding: 6px 12px; border-radius: 10px; font-size: 14px; color: var(--muted); }
.seg-item.active { color: var(--text); background: var(--glass-2); }
.seg-item.soon { opacity: .5; }
.bar-actions { display: flex; gap: 6px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--muted); transition: background .25s, color .25s, border-color .25s, transform .25s var(--spring); }
.icon-btn:hover { background: var(--glass-2); color: var(--text); border-color: var(--edge); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#settings-btn svg { transition: transform .6s var(--spring); }
#settings-btn.on svg { transform: rotate(120deg); }
#settings-btn.on { color: var(--c1); }
.countdown svg { width: 30px; height: 30px; }
.cd-track { fill: none; stroke: var(--edge-2); stroke-width: 2; }
.cd-arc { fill: none; stroke: var(--c1); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 94.25; transform: rotate(-90deg); transform-origin: center; }
.cd-icon { stroke-width: 1.8; }
/* While quoting only the arrow turns; the ring itself never jumps. */
.cd-icon { transform-box: view-box; transform-origin: 50% 50%; }
.countdown.busy .cd-icon { animation: rot 0.9s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

.settings[hidden] { display: none; }
.settings { margin: 0 4px 10px; padding: 12px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--edge); display: grid; gap: 10px; animation: drop .35s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.settings-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button, .chips .custom { border: 1px solid var(--edge); background: rgba(255, 255, 255, .02); border-radius: 10px; padding: 5px 10px; font-size: 13px; color: var(--muted); transition: all .25s var(--ease); }
.chips button:hover { color: var(--text); border-color: var(--edge-2); }
.chips button.on { color: var(--bg); background: var(--c1); border-color: var(--c1); }
.chips .custom { display: inline-flex; align-items: center; gap: 2px; }
.chips .custom input { width: 64px; background: none; border: 0; outline: none; text-align: right; font-size: 13px; }

.panel { position: relative; padding: 14px 16px; border-radius: 16px; background: rgba(8, 11, 20, .55); border: 1px solid var(--edge); transition: border-color .3s, box-shadow .3s; }
.panel:focus-within { border-color: rgba(60, 240, 208, .45); box-shadow: 0 0 0 4px rgba(60, 240, 208, .08); }
.panel-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.usd { font-family: var(--mono); font-size: 12px; transition: opacity .3s; }
.panel-main { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.amount { flex: 1; min-width: 0; font-size: clamp(26px, 5vw, 34px); font-weight: 500; letter-spacing: -0.02em; background: none; border: 0; outline: none; padding: 0; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amount.out { color: var(--text); transition: color .4s; }
.amount.out.loading { color: transparent; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(60,240,208,.16) 50%, rgba(255,255,255,.04) 100%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.amount.out.bump { animation: bump .6s var(--ease); }
@keyframes bump { 30% { color: var(--c1); text-shadow: 0 0 18px rgba(60, 240, 208, .6); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.quick { display: flex; gap: 6px; margin-top: 8px; }
.quick button { border: 1px solid var(--edge); background: none; color: var(--muted); font-size: 12px; padding: 3px 9px; border-radius: 8px; transition: all .2s; }
.quick button:hover { color: var(--c1); border-color: rgba(60, 240, 208, .4); }

.token-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--edge-2); background: var(--glass-2); font-weight: 600; transition: transform .25s var(--spring), border-color .25s, box-shadow .25s; }
.token-btn:hover { transform: translateY(-1px); border-color: rgba(60, 240, 208, .5); box-shadow: 0 6px 20px -8px rgba(60, 240, 208, .5); }
.token-btn .chev { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; }

.tok-icon { flex: none; border-radius: 50%; }
.tok-icon text { font: 700 11px "Space Grotesk", sans-serif; fill: #fff; }

.flip { position: relative; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin: -12px auto; border-radius: 14px; border: 4px solid var(--bg-2); background: var(--glass-2); color: var(--text); transition: transform .5s var(--spring), background .3s; }
.flip:hover { background: linear-gradient(135deg, rgba(60, 240, 208, .3), rgba(139, 108, 255, .3)); }
.flip.spin { transform: rotate(180deg); }
.flip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.source { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 22px; font-size: 12px; color: var(--muted); }
.venue-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(233, 242, 239, .08); border: 1px solid var(--edge); color: var(--text); font-weight: 500; text-decoration: none; transition: border-color .25s; }
.venue-chip:hover { border-color: var(--edge-2); }
.venue-logo { width: 18px; height: 18px; border-radius: 50%; background: #e9f2ef; padding: 2px; display: block; }
.venue-logo.lg { width: 44px; height: 44px; padding: 7px; }

.details { margin: 12px 2px 0; display: grid; gap: 2px; font-size: 13px; }
.detail { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 10px; animation: fade-up .45s var(--ease) both; }
.detail:hover { background: rgba(255, 255, 255, .025); }
.detail .k { color: var(--muted); }
.detail .v { text-align: right; font-variant-numeric: tabular-nums; }
.detail .v.good { color: var(--good); } .detail .v.warn { color: var(--warn); } .detail .v.bad { color: var(--bad); }
.rate { border: 0; background: none; padding: 0; color: var(--text); text-align: right; }
.rate:hover { color: var(--c1); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
.notice { margin: 8px 2px 0; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: #ffe0b8; background: rgba(255, 179, 92, .08); border: 1px solid rgba(255, 179, 92, .25); display: flex; gap: 8px; animation: fade-up .45s var(--ease); }
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 2; }
.notice.err { color: #ffd0d8; background: rgba(255, 107, 129, .08); border-color: rgba(255, 107, 129, .3); }
.notice.err svg { stroke: var(--bad); }

.cta { position: relative; overflow: hidden; width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid rgba(139, 108, 255, .35); background: linear-gradient(135deg, rgba(60, 240, 208, .14), rgba(139, 108, 255, .2)); font-weight: 600; color: #cfd8ff; }
.cta:disabled { cursor: not-allowed; }
.cta { transition: background .4s, border-color .4s, color .4s, transform .25s var(--spring), box-shadow .3s; }
.cta-icon { display: inline-grid; }
.cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cta svg.spin { stroke: var(--c1); stroke-width: 2.5; stroke-dasharray: 20 60; animation: rot .8s linear infinite; }
.cta[data-mode="connect"] { cursor: pointer; color: var(--bg); border-color: transparent; background: linear-gradient(135deg, var(--c1), #7c8cff 60%, var(--c2)); background-size: 200% 200%; animation: hue-drift 6s ease-in-out infinite; }
.cta[data-mode="connect"]:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(60, 240, 208, .7); }
.cta[data-mode="short"] { color: #ffd0d8; border-color: rgba(255, 107, 129, .4); background: rgba(255, 107, 129, .08); }
@keyframes hue-drift { 50% { background-position: 100% 100%; } }
.cta-glow { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 3.6s var(--ease) infinite; }
@keyframes sweep { 60%, 100% { transform: translateX(100%); } }

/* ---------- route card ---------- */
.route-card { padding: 20px; min-height: 100%; }
.route-head, .alt-head, .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.route-viz { position: relative; margin: 14px 0 18px; min-height: 190px; border-radius: 16px; background: radial-gradient(400px 160px at 50% 50%, rgba(60, 240, 208, .06), transparent), rgba(8, 11, 20, .45); border: 1px solid var(--edge); overflow: hidden; }
.route-viz svg.route { display: block; width: 100%; height: auto; }
.route .edge { fill: none; stroke: url(#edgeGrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw-edge 1s var(--ease) forwards; }
.route .edge-glow { fill: none; stroke: var(--c1); stroke-width: 10; stroke-opacity: .08; filter: blur(4px); }
@keyframes draw-edge { to { stroke-dashoffset: 0; } }
.route .particle { fill: #fff; filter: drop-shadow(0 0 6px var(--c1)); }
.route .node-ring { fill: none; stroke: var(--edge-2); stroke-width: 1.5; stroke-dasharray: 4 5; transform-box: fill-box; transform-origin: center; animation: rot 14s linear infinite; }
.route .node-halo { fill: var(--c1); opacity: .08; transform-box: fill-box; transform-origin: center; animation: halo 2.6s ease-in-out infinite; }
@keyframes halo { 50% { opacity: .2; transform: scale(1.18); } }
.route .node { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop .6s var(--spring) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.route .label { font: 600 13px "Space Grotesk", sans-serif; fill: var(--text); text-anchor: middle; }
.route .sub { font: 400 11px "JetBrains Mono", monospace; fill: var(--muted); text-anchor: middle; }
.route .venue-bg { fill: #e9f2ef; }
.route .venue-tag { font: 500 10.5px "Space Grotesk", sans-serif; fill: var(--muted); text-anchor: middle; }
.viz-empty { display: grid; place-items: center; gap: 10px; min-height: 190px; color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.scanner { width: 120px; height: 60px; }
.scanner path { fill: none; stroke: var(--edge-2); stroke-width: 2; stroke-dasharray: 4 6; }
.scanner .scan { stroke: var(--c1); stroke-dasharray: 20 200; stroke-width: 2.5; animation: scan 1.4s linear infinite; }
.scanner circle { fill: var(--c2); animation: node-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.scanner circle:nth-of-type(2) { animation-delay: .45s; }
.scanner circle:nth-of-type(3) { animation-delay: .9s; }
@keyframes scan { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }

.alts { display: grid; gap: 8px; margin-top: 10px; }
.alt { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(8, 11, 20, .4); transition: border-color .3s, background .3s, transform .3s var(--spring); animation: fade-up .5s var(--ease) both; }
.alt:hover { border-color: var(--edge-2); transform: translateX(3px); }
.alt.sel { border-color: rgba(60, 240, 208, .55); background: rgba(60, 240, 208, .05); }
.alt .path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-weight: 600; font-size: 13.5px; }
.alt .path .arr { color: var(--faint); font-weight: 400; }
.alt .amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.alt .meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.alt .delta { font-size: 12px; text-align: right; color: var(--muted); }
.badge-best { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; color: var(--bg); background: linear-gradient(90deg, var(--c1), #7cf5e1); }
.unavail { margin-top: 4px; font-size: 12px; color: var(--muted); }
.unavail summary { cursor: pointer; padding: 6px 4px; list-style: none; }
.unavail summary::before { content: "▸ "; transition: transform .2s; display: inline-block; }
.unavail[open] summary::before { transform: rotate(90deg); }
.unavail ul { margin: 0; padding: 4px 4px 4px 22px; display: grid; gap: 4px; color: var(--faint); animation: fade-up .3s var(--ease); }
.venue-logo.xs { width: 14px; height: 14px; padding: 1px; display: inline-block; vertical-align: -2px; margin-right: 2px; }
.pick .nm span { display: flex; align-items: center; gap: 2px; }
.market-filter { margin: -4px 0 16px; }
.market-filter button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.market-filter button span { opacity: .6; font-family: var(--mono); font-size: 11px; }
.market-filter button.on span { opacity: .8; }
.market-filter .venue-logo { width: 16px; height: 16px; padding: 1px; }
.down { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bad); }
.fine { margin: 16px 2px 0; font-size: 12px; color: var(--faint); line-height: 1.6; }

/* ---------- markets ---------- */
.section-head { margin-bottom: 16px; }
.markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.market { padding: 16px; display: grid; gap: 12px; animation: fade-up .5s var(--ease) both; transition: transform .35s var(--spring), border-color .3s; }
.market:hover { transform: translateY(-3px); border-color: var(--edge-2); }
.market-top { display: flex; justify-content: space-between; align-items: center; }
.pair-icons { display: flex; align-items: center; }
.pair-icons .tok-icon + .tok-icon { margin-left: -5px; box-shadow: 0 0 0 2px var(--bg-2); border-radius: 50%; }
.pair-icons .tok-icon:first-child { position: relative; z-index: 1; }
.pair-name { font-weight: 600; margin-left: 10px; }
.market .price { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.market .price b { color: var(--text); font-weight: 500; }
.depth { height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--glass-2); }
.depth span { height: 100%; transition: width 1s var(--ease); }
.depth .x { background: linear-gradient(90deg, var(--c1), #2bb9a3); }
.depth .y { background: linear-gradient(90deg, #6a50e0, var(--c2)); }
.market-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.market-foot { gap: 8px; }
.market-foot .mono { font-size: 11px; white-space: nowrap; }
.tvl { font-family: var(--mono); font-size: 12px; color: var(--text); }
.use-pair { border: 1px solid var(--edge); background: none; color: var(--c1); font-size: 12px; padding: 4px 10px; border-radius: 8px; transition: all .2s; }
.use-pair:hover { background: rgba(60, 240, 208, .1); }

/* ---------- venues ---------- */
.venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.venue { padding: 20px; display: grid; gap: 14px; animation: fade-up .5s var(--ease) both; }
.venue-top { display: flex; align-items: center; gap: 12px; }
.venue-top h3 { font-size: 17px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--good); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: beacon-g 2s infinite; }
@keyframes beacon-g { 70% { box-shadow: 0 0 0 7px rgba(62, 230, 160, 0); } 0% { box-shadow: 0 0 0 0 rgba(62, 230, 160, .6); } }
.venue-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 10px; border-radius: 12px; background: var(--glass-2); }
.stat b { display: block; font-size: 18px; font-weight: 600; }
.stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.venue.ghost { border-style: dashed; background: rgba(16, 21, 34, .35); color: var(--muted); place-content: center; text-align: center; min-height: 200px; }
.venue.ghost svg { width: 46px; height: 46px; margin: 0 auto; fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 4; animation: rot 20s linear infinite; }
.venue a { color: var(--c1); text-decoration: none; font-size: 13px; }

/* ---------- picker ---------- */
.picker { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.picker[hidden] { display: none; }
.picker-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 10, .6); backdrop-filter: blur(6px); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.picker-sheet { position: relative; width: min(440px, 100%); max-height: min(620px, 86vh); display: flex; flex-direction: column; padding: 18px; animation: sheet .45s var(--spring); background: rgba(12, 16, 28, .92); }
@keyframes sheet { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.picker-head { display: flex; justify-content: space-between; align-items: center; }
.picker-search { margin: 14px 0 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--edge-2); background: rgba(8, 11, 20, .6); outline: none; transition: border-color .25s, box-shadow .25s; }
.picker-search:focus { border-color: rgba(60, 240, 208, .5); box-shadow: 0 0 0 4px rgba(60, 240, 208, .08); }
.picker-list { overflow-y: auto; display: grid; gap: 2px; padding-right: 4px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid transparent; background: none; text-align: left; transition: background .2s, border-color .2s, transform .25s var(--spring); animation: fade-up .35s var(--ease) both; }
.pick:hover, .pick:focus-visible { background: var(--glass-2); border-color: var(--edge); transform: translateX(3px); outline: none; }
.pick.cur { border-color: rgba(60, 240, 208, .4); }
.pick.dry { opacity: .45; }
.pick.dry:hover { opacity: .8; }
.pick .nm { flex: 1; display: grid; }
.pick .nm b { font-weight: 600; }
.pick .nm span { font-size: 12px; color: var(--muted); }
.pick .px { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.picker-list::-webkit-scrollbar { width: 6px; }
.picker-list::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 3px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; }
.toast { max-width: 360px; padding: 12px 14px; border-radius: 14px; font-size: 13px; background: rgba(40, 14, 22, .92); border: 1px solid rgba(255, 107, 129, .4); color: #ffd0d8; animation: toast-in .45s var(--spring); }
.toast.ok { background: rgba(10, 36, 30, .94); border-color: rgba(62, 230, 160, .45); color: #c6f7e3; }
.toast.out { animation: toast-out .35s var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(30px); } }

.foot { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 32px; font-size: 12px; color: var(--faint); }

/* ---------- responsive ---------- */
.sync, .net { white-space: nowrap; }
@media (max-width: 1280px) {
  .tagline { display: none; }
  .sync span { display: none; }
  .sync { padding: 5px; }
}
@media (max-width: 960px) {
  .swap-layout { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .tagline { display: none; }
}
@media (max-width: 720px) {
  .top { grid-template-columns: 1fr auto; row-gap: 10px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .sync span { display: none; }
  .net .net-label { display: none; }
  .net { padding: 8px; }
  .wallet-btn { font-size: 12px; }
  .sync { padding: 5px; }
  main { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .route .particle { display: none; }
}