/* Felynx by FlareCat. Midnight-violet palette from the Felynx brand kit; fuchsia is reserved for the action you press. */
:root{
  /* Felynx brand kit tokens (Downloads/Felynx/assets/felynx-palette.css), exact hex */
  --felynx-midnight:#17152d; --felynx-violet:#382b64; --felynx-lavender:#9c74fa; --felynx-emerald:#27ecbe;
  --felynx-fuchsia:#fd3381; --felynx-gold:#fec33f; --felynx-ivory:#f3f2fe;
  --bg:#fbfaff; --card:#ffffff; --leg:var(--felynx-ivory);
  --line:#e2ddf6; --line2:#ece9fb;
  --ink:var(--felynx-midnight); --ink2:#4a4470; --ink3:#625c85;
  /* kit fuchsia is 3.5:1 on white, so text-sized accents use a deeper shade; fills use the kit hex */
  --flare:#c8185d; --flare-soft:rgba(253,51,129,.10); --glow:rgba(156,116,250,.14);
  --cta:var(--felynx-fuchsia); --on-cta:var(--felynx-midnight); --danger-bg:#b42318;
  --up:#0a7a5e; --down:#b42318; --warn:#9a6100;
  --shadow:0 1px 2px rgba(23,21,45,.06),0 12px 40px rgba(23,21,45,.08);
  --disp:Archivo,Inter,system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--felynx-midnight); --card:#1d1a38; --leg:#241f45;
    --line:var(--felynx-violet); --line2:#2a2450;
    --ink:var(--felynx-ivory); --ink2:#c9c3ea; --ink3:#9d95c7;
    --flare:var(--felynx-fuchsia); --flare-soft:rgba(253,51,129,.14); --glow:rgba(156,116,250,.16);
    --up:var(--felynx-emerald); --down:#ff6b6b; --warn:#f2c14e;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 48px rgba(8,6,20,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--felynx-midnight); --card:#1d1a38; --leg:#241f45;
  --line:var(--felynx-violet); --line2:#2a2450;
  --ink:var(--felynx-ivory); --ink2:#c9c3ea; --ink3:#9d95c7;
  --flare:var(--felynx-fuchsia); --flare-soft:rgba(253,51,129,.14); --glow:rgba(156,116,250,.16);
  --up:var(--felynx-emerald); --down:#ff6b6b; --warn:#f2c14e;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 48px rgba(8,6,20,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;font-feature-settings:'tnum'}
body{min-height:100vh;background:
  radial-gradient(900px 480px at 50% -180px,var(--glow),transparent 70%),var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--flare);outline-offset:2px;border-radius:8px}
a{color:inherit;text-decoration:none}

/* top bar */
/* under a notch the bar's own background fills the safe area, so it never slides over the card */
.bar{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);z-index:20;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.bar-in{max-width:1120px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.3px}
.brand img{border-radius:8px;display:block}
.brand .wm{border-radius:0;height:24px;width:auto}
/* the kit's light artwork on a light theme, its dark artwork on a dark one (the toggle wins over the system setting) */
img.on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .on-light{display:none}
  :root:not([data-theme="light"]) .on-dark{display:block}
}
:root[data-theme="dark"] .on-light{display:none}
:root[data-theme="dark"] .on-dark{display:block}
.brand small{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:0;color:var(--ink3);margin-left:-3px;align-self:flex-end;padding-bottom:2px}
@media (max-width:480px){.brand small{display:none}} /* on a phone the name and the wallet button share one row */
.nav{display:flex;gap:4px}
.nav a{padding:7px 12px;border-radius:10px;color:var(--ink2);font-weight:500;font-size:14.5px}
.nav a:hover{color:var(--ink);background:var(--leg)}
.nav a.on{color:var(--ink);background:var(--leg)}
.bar-sp{flex:1}
.ghost{background:none;border:0;color:var(--ink2)}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.icon-btn:hover{background:var(--leg);color:var(--ink)}
.connect{white-space:nowrap;border:1px solid var(--line);border-radius:12px;padding:8px 15px;font-weight:600;font-size:14px;
  background:var(--card);color:var(--ink);transition:border-color .15s}
.connect:hover{border-color:var(--ink3)}
.connect.on{background:var(--leg);color:var(--ink);display:flex;align-items:center;gap:8px}
.connect.on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--up);flex:none}
/* the connected wallet's menu (copy, explorer, disconnect): one tap on the address used to disconnect at once */
.acct{position:relative;min-width:0}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;display:flex;flex-direction:column;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);animation:pop .15s ease}
.acct-menu button,.acct-menu a{display:flex;align-items:center;min-height:40px;padding:8px 12px;border:0;border-radius:10px;background:none;
  font-size:14px;font-weight:500;color:var(--ink);text-align:left;white-space:nowrap}
.acct-menu button:hover,.acct-menu a:hover{background:var(--leg)}
.acct-menu [data-act="disconnect"]{color:var(--down)}
/* another site's embed has no header: the connected address sits in the card head, with the same menu */
.acct-chip{display:flex;align-items:center;gap:6px;height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;
  background:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap}
.acct-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--up);flex:none}
/* a slippage other than the 0.5% default: a dot on the gear */
#settingsBtn{position:relative}
#settingsBtn.flag::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--flare)}
#settingsBtn.flag.hi::after{background:var(--warn)}

/* page */
.main{max-width:480px;margin:0 auto;padding:40px 16px 80px}
.preview-note{margin:0 0 14px;padding:10px 14px;border-radius:12px;font-size:13px;color:var(--ink2);
  background:var(--leg);border:1px solid var(--line)}

.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 10px}
.card-head h1{margin:0;font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.2px}
.head-tools{display:flex;gap:2px}
.ring{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:3}
.ring-fg{fill:none;stroke:var(--ink3);stroke-width:3;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;transition:stroke-dashoffset 1s linear}

/* settings */
.settings{margin:0 2px 10px;padding:12px;border-radius:16px;background:var(--leg)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.set-lab{font-size:13.5px;color:var(--ink2);font-weight:500}
.seg{display:flex;gap:4px;align-items:center}
.seg button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:500}
.seg button[aria-checked="true"]{border-color:var(--flare);color:var(--flare);background:var(--flare-soft)}
.seg-custom{display:flex;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:0 8px;font-size:13px;color:var(--ink3)}
.seg-custom input{width:56px;border:0;background:none;color:var(--ink);font:inherit;padding:6px 2px;outline:none;text-align:right}
.seg-custom.on,.seg-custom:focus-within{border-color:var(--flare)}
.seg-custom:focus-within{box-shadow:0 0 0 3px var(--flare-soft)}
.set-hint{margin:8px 0 0;font-size:12.5px;color:var(--warn);min-height:0}
.set-hint:empty{display:none}

/* legs */
.leg{background:var(--leg);border-radius:18px;padding:14px 16px;border:1px solid transparent;transition:border-color .15s,background .15s}
.leg:focus-within{border-color:var(--flare);box-shadow:0 0 0 3px var(--flare-soft)}
.leg-top,.leg-bot{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:20px;font-size:13px;color:var(--ink3)}
.leg-lab{font-weight:500;color:var(--ink2)}
.leg-bal{font-variant-numeric:tabular-nums}
.leg-mid{display:flex;align-items:center;gap:10px;margin:6px 0}
.amt{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);padding:0;
  font-family:var(--disp);font-size:34px;font-weight:600;letter-spacing:-.8px;line-height:1.15;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amt::placeholder{color:var(--ink3);opacity:.6}
.amt.out{display:block;transition:opacity .2s}
.amt.out.empty{color:var(--ink3);opacity:.6}
.tok{flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:5px 10px 5px 5px;font-weight:600;font-size:16px;transition:border-color .15s}
.tok:hover{border-color:var(--ink3)}
.tok img,.tok .ph{width:28px;height:28px;border-radius:50%;display:block}
.tok svg{color:var(--ink3)}
.tok.pick{background:var(--cta);color:var(--on-cta);border-color:transparent;padding-left:14px}
/* before the token list loads: a placeholder the size of a token button, not a blank sliver */
.tok:empty{min-width:96px;min-height:44px;background:var(--leg)}
.ph{display:grid!important;place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--ink3)}
.usd{font-variant-numeric:tabular-nums}
.chips{display:flex;gap:4px}
.chips button{border:0;background:var(--card);color:var(--ink2);border-radius:8px;padding:2px 10px;min-height:24px;font-size:12px;font-weight:600}
.chips button:hover{color:var(--flare)}
.impact{font-variant-numeric:tabular-nums}
.impact.warn{color:var(--warn)} .impact.bad{color:var(--down)}

.flip-wrap{height:6px;position:relative;z-index:2;display:flex;justify-content:center}
.flip{position:absolute;top:-19px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--leg);color:var(--ink2);border:4px solid var(--card);transition:transform .25s,color .15s}
@media (hover:hover){.flip:hover{color:var(--ink);transform:rotate(180deg)}} /* a tap must not leave it turned */

/* route */
.quote-progress{margin:9px 4px 0;font-size:12px;color:var(--ink3)}
.route-empty{margin-top:10px;padding:13px 12px 12px;border:1px solid var(--line2);border-radius:16px;
  background:var(--leg);display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.route-empty img{width:min(220px,70%);height:auto;display:block;margin:0 0 2px}
.route-empty strong{font-size:13.5px;font-weight:600;color:var(--ink)}
.route-empty span{font-size:12px;color:var(--ink3)}
.route{margin-top:10px;padding:12px 14px;border-radius:16px;border:1px solid var(--line2)}
.route-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 12px;font-size:13px;margin-bottom:10px}
.route-title{color:var(--ink2);font-weight:500;white-space:nowrap}
.route-tag{font-size:12px;color:var(--ink3);margin-left:auto;text-align:right}
.route-tag .edge{white-space:nowrap}
.route-tag b{color:var(--up);font-weight:600}
.lanes{display:flex;flex-direction:column;gap:8px}
.lane{display:flex;align-items:center;gap:0;min-width:0}
.lane .pct{flex:none;width:44px;font-family:var(--mono);font-size:12px;color:var(--ink2);font-weight:500}
.lane .node{flex:none;width:22px;height:22px;border-radius:50%;display:block}
.lane .node.ph{width:22px;height:22px;font-size:9px}
.lane .final-node{position:relative;display:block;flex:none;width:22px;height:22px}
.lane .final-star{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;filter:drop-shadow(0 0 1px var(--card))}
.lane .hop{flex:1;min-width:0;display:flex;align-items:center;position:relative;height:26px}
.lane .hop::before{content:"";position:absolute;left:4px;right:4px;top:50%;border-top:1.5px dashed var(--line);}
.lane .dex{position:relative;z-index:1;margin:0 auto;display:flex;align-items:center;gap:5px;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px 2px 3px;font-size:11.5px;color:var(--ink2);white-space:nowrap;max-width:100%;overflow:hidden}
.lane .dex img{width:16px;height:16px;border-radius:50%;flex:none}
.lane .dex span{overflow:hidden;text-overflow:ellipsis}
.lane .dex .tiny{display:none}
.lane.dense .dex{padding:2px 6px 2px 2px;gap:3px}
.lane.dense .dex .full{display:none}
.lane.dense .dex .tiny{display:inline}
/* the FlareCat route: a trade hopping along its lane into FCAT */
.lane .hop .flow{position:absolute;left:4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--felynx-gold);box-shadow:0 0 8px 2px rgba(254,195,63,.6);animation:hopflow 1.6s linear infinite;pointer-events:none}
.fcatlane .hop:nth-of-type(2) .flow{animation-delay:.8s}
@keyframes hopflow{0%{left:4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 11px);opacity:0}}
.lane-key{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--ink2)}
.lane-key span{display:flex;align-items:center;gap:5px}
.lane-key img{width:14px;height:14px;border-radius:50%}
.route.fresh .lane{animation:laneIn .35s ease both}
.route.fresh .lane:nth-child(2){animation-delay:.05s}
.route.fresh .lane:nth-child(3){animation-delay:.1s}
.route.fresh .lane:nth-child(4){animation-delay:.15s}
@keyframes laneIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* details */
.details{margin:10px 2px 0;padding:0 12px;font-size:13.5px}
.details>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.details dt{color:var(--ink3);white-space:nowrap}
.details dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.rate{border:0;background:none;padding:0;color:var(--ink);font-variant-numeric:tabular-nums}
.rate:hover{color:var(--flare)}
.details .ok{color:var(--up)}
.details .warn{color:var(--warn)} .details .bad{color:var(--down);font-weight:600}
.details .nw{white-space:nowrap} /* a phrase wraps as a whole ("+ 3% FCAT tax" never leaves "tax" alone) */
#vsRow{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px}
#vsRow .vs span{color:var(--ink3)}
#vsRow .vs b{font-weight:600}

/* action */
.cta{margin-top:12px;width:100%;border:0;border-radius:16px;padding:16px;font-size:17px;font-weight:600;letter-spacing:.1px;
  color:var(--on-cta);background:var(--cta);
  box-shadow:0 8px 22px color-mix(in srgb,var(--cta) 28%,transparent);
  transition:filter .15s,opacity .15s}
.cta:hover:not(:disabled){filter:brightness(1.06)}
.cta:disabled{background:var(--leg);color:var(--ink3);box-shadow:none}
.cta.danger:not(:disabled){background:var(--danger-bg);color:#fff}
.msg{margin:10px 4px 0;font-size:13px;color:var(--ink3);text-align:center;min-height:0}
.msg:empty{display:none}
.msg.err{color:var(--down)}

.venues{margin:18px 0 0;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink3)}
.venues .v{display:flex;align-items:center;gap:5px;color:var(--ink2)}
.venues img{border-radius:50%}
.social{margin:14px 0 0;display:flex;justify-content:center;align-items:center;gap:6px}
.social a{min-width:32px;min-height:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--ink3);font-size:12.5px;font-weight:500;transition:color .15s,background .15s}
.social a:hover{color:var(--ink);background:var(--leg)}
/* what anyone can check: the router, its fee rule, the risk */
.trust{margin:14px auto 0;max-width:430px;text-align:center;font-size:12px;line-height:1.5;color:var(--ink3)}
.trust p{margin:4px 0 0}
.trust a{color:var(--ink2);font-family:var(--mono);text-decoration:underline;text-underline-offset:2px}
.trust a:hover{color:var(--ink)}

/* modals */
.modal{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:16px}
.modal-back{position:absolute;inset:0;background:rgba(23,21,45,.5);backdrop-filter:blur(2px);animation:fade .15s}
.sheet{position:relative;width:100%;min-width:0;max-width:440px;max-height:min(640px,86vh);display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);animation:pop .18s ease}
.sheet.small{max-width:380px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}
.sheet-head h2{margin:0;font-size:16px;font-weight:600}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.search{min-width:0;margin:4px 16px 10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--leg);color:var(--ink);font:inherit;outline:none}
.search:focus{border-color:var(--flare)}
.popular{display:flex;flex-wrap:wrap;min-width:0;gap:6px;padding:0 16px 12px;border-bottom:1px solid var(--line2)}
.popular button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 10px 4px 4px;font-size:13.5px;font-weight:500}
.popular button:hover{border-color:var(--ink3)}
.popular button[disabled]{opacity:.4}
.popular img,.popular .ph{width:22px;height:22px;border-radius:50%}
.tlist{list-style:none;margin:0;padding:6px 8px 10px;overflow:auto;flex:1}
.tlist li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;cursor:pointer}
.tlist li:hover,.tlist li[aria-selected="true"]{background:var(--leg)}
.tlist li.dis{opacity:.4;cursor:default}
.tlist img,.tlist .ph{width:34px;height:34px;border-radius:50%;flex:none}
.tlist .nm{flex:1;min-width:0}
.tlist .sym{font-weight:600}
.tlist .tag{font-size:11px;font-weight:500;color:var(--ink3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.tlist .full{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlist .bal{font-variant-numeric:tabular-nums;font-size:14px;text-align:right}
.tlist .bal small{display:block;color:var(--ink3);font-size:12px}
.tlist .none{justify-content:center;color:var(--ink3);cursor:default}
.wlist{list-style:none;margin:0;padding:4px 12px 16px}
.wlist button{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:12px;margin-top:8px;font-weight:600;text-align:left}
.wlist button:hover{border-color:var(--ink3)}
.wlist small{display:block;font-weight:400;font-size:12px;color:var(--ink3);margin-top:1px}
.wlist img{width:28px;height:28px;border-radius:8px}
.wph{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;font-weight:700;color:var(--felynx-ivory);background:var(--felynx-violet)}
.wal-none{padding:0 16px 18px;color:var(--ink2);font-size:14px;display:flex;flex-direction:column;gap:8px}
.wal-none p{margin:0}
.wal-opt{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px 12px;font-weight:600;color:var(--ink)}
.wal-opt:hover{border-color:var(--ink3)}
.wal-steps{font-size:13px;color:var(--ink3)}

/* toasts */
.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px))}
.toast{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;font-size:13.5px;animation:pop .2s ease;display:flex;gap:10px;align-items:flex-start}
.toast .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--ink3)}
.toast.pending .dot{background:var(--warn);animation:pulse 1.2s ease infinite}
.toast.ok .dot{background:var(--up)} .toast.err .dot{background:var(--down)}
.toast b{display:block;font-weight:600}
.toast a{color:var(--flare);font-size:12.5px}
@keyframes pulse{50%{opacity:.35}}

@media (max-width:560px){
  .bar-in{height:auto;flex-wrap:wrap;row-gap:4px;column-gap:8px;padding-block:8px}
  .bar-in .icon-btn{width:32px;height:32px}
  .connect{padding:8px 12px;font-size:13.5px;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand .wm{height:20px}
  .nav{order:5;flex-basis:100%;overflow-x:auto}
  .nav a{padding:6px 10px}
  .main{padding-top:20px}
  .amt{font-size:28px}
  .card{border-radius:20px;padding:12px}
}
/* the smallest phones: the face alone, so the logo, theme and wallet buttons keep one row (the selector outranks the
   theme rules that show one of the two wordmarks) */
@media (max-width:380px){.bar .brand img.wm{display:none}}
/* touch screens: 44 px targets (Apple's guidance) and 16 px text in fields, below which iOS zooms the page on focus */
@media (pointer:coarse){
  .bar-in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .search,.seg-custom input{font-size:16px}
  .icon-btn,.bar-in .icon-btn{width:44px;height:44px}
  .head-tools{gap:6px}
  .connect{min-height:44px}
  .nav a{padding-block:10px}
  .tok{min-height:44px}
  .seg button,.seg-custom{min-height:44px}
  input.amt{padding-block:12px;margin-block:-12px}
  .chips button{position:relative}
  .chips button::after{content:"";position:absolute;inset:-10px -2px}
  /* the 38 px flip button gets a 46 px touch area (its 4 px border is outside the padding box the inset counts from) */
  .flip::after{content:"";position:absolute;inset:-8px;border-radius:16px}
  .acct-chip{height:44px}
  .acct-menu button,.acct-menu a{min-height:44px}
  .popular button{min-height:40px}
  .social a{min-width:44px;min-height:44px}
  .tlist,.sheet{overscroll-behavior:contain}
  html:has(.modal:not([hidden])){overflow:hidden}
}
/* phones: the Swap button stays in reach, the token picker takes the screen, the wallet list rises from the bottom */
@media (max-width:560px){
  .cta{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .modal{padding:0;place-items:end center}
  .sheet,.sheet.small{max-width:none;border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  #tokModal .sheet{height:100vh;height:100dvh;max-height:none;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  #walModal .sheet{max-height:85vh;max-height:85dvh}
}
@media (max-width:400px){
  .route{padding-inline:10px}
  .lane .pct{width:40px} /* "44.5%" touched the first node at 34 px */
  .lane .dex{padding:2px 6px 2px 2px;gap:3px}
  .lane .node,.lane .final-node{width:18px;height:18px}
}
/* embedded in the FlareCat site's Trade card: only the swap card, on that card's own background */
.embed body{min-height:0;background:transparent}
.embed .bar,.embed .preview-note,.embed .venues,.embed .trust,.embed .social{display:none}
.embed .main{max-width:none;padding:0}
.embed .card{border:0;box-shadow:none;background:transparent;padding:0}
.embed-ext body{background:var(--bg)}
.embed-ext .main{padding:14px 14px 6px}
.embed-foot{display:none}
.embed .embed-foot{display:flex;justify-content:center;gap:6px;margin:12px 0 2px;font-size:12.5px;color:var(--ink3)}
.embed .embed-foot a{color:var(--ink2);font-weight:600}
.embed .embed-foot a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}