/* SwapFast: dark, glass and depth */
:root {
  --void: #060912; --deep: #0B1020; --glass: rgba(18, 26, 48, .58); --glass-2: rgba(255, 255, 255, .045);
  --edge: rgba(160, 185, 255, .16); --edge-2: rgba(160, 185, 255, .28);
  --ink: #EEF2FF; --muted: #8C97B5; --faint: #5E6886;
  --cyan: #5BE7FF; --violet: #8C7BFF; --grad: linear-gradient(120deg, #5BE7FF 0%, #8C7BFF 100%);
  --ok: #43F5B6; --warn: #FFC56B; --warn-bg: rgba(255, 197, 107, .1); --bad: #FF6B86; --bad-bg: rgba(255, 107, 134, .1);
  --sans: "Geist", "Segoe UI", system-ui, sans-serif; --display: "Unbounded", "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 9px;
  color-scheme: dark;
  /* names used by app.js / setup.js */
  --cobalt: var(--cyan); --line: var(--edge); --sunk: rgba(255, 255, 255, .04); --surface: var(--glass);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }
body { margin: 0; color: var(--ink); font: 400 16px/1.55 var(--sans); background: radial-gradient(1200px 700px at 75% 20%, #121a3a 0%, transparent 60%), radial-gradient(900px 600px at 10% 90%, #0d1c2c 0%, transparent 60%), var(--void); min-height: 100vh; overflow-x: hidden; }
a { color: var(--cyan); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
.mono { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }
.wrap { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
::selection { background: rgba(91, 231, 255, .3); }

#scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body > *:not(#scene):not(.grain):not(dialog) { position: relative; z-index: 2; }

.setup-banner { background: var(--warn-bg); color: var(--warn); padding: 10px 16px; text-align: center; font-size: 14px; border-bottom: 1px solid rgba(255, 197, 107, .2); }
.setup-banner code { font-family: var(--mono); }

/* header */
.top { max-width: 1200px; margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 600 19px/1 var(--display); letter-spacing: -.02em; }
.logo img { filter: drop-shadow(0 0 14px rgba(91, 231, 255, .45)); }
.top nav { display: flex; gap: 6px; align-items: center; padding: 5px; border: 1px solid var(--edge); border-radius: 999px; background: rgba(10, 15, 30, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top nav a, .linkish { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; background: none; border: 0; padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s; }
.top nav a:hover, .linkish:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }

/* live ticker */
.ticker { overflow: hidden; border-block: 1px solid rgba(160, 185, 255, .08); background: rgba(8, 12, 24, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tick b { color: var(--ink); font-weight: 600; }
.tick .coin { width: 18px; height: 18px; }

/* hero */
.hero { max-width: 1200px; margin: 0 auto; padding: 56px 28px 96px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 72px; align-items: center; }
.hero > * { min-width: 0; }
.intro { max-width: 34em; }
h1 { font: 600 clamp(34px, 4.6vw, 58px)/1.04 var(--display); letter-spacing: -.045em; margin: 0 0 24px; background: linear-gradient(180deg, #FFFFFF 30%, #A9B6DA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 30px; max-width: 32em; }
.facts { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 14px; }
.facts li { padding-left: 26px; position: relative; color: var(--muted); }
.facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 14px rgba(91, 231, 255, .55); transform: rotate(45deg) scale(.7); }
.facts b { color: var(--ink); font-weight: 600; }
.network { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding: 8px 14px; border: 1px solid var(--edge); border-radius: 999px; background: rgba(10, 15, 30, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.network .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.network.ok .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.network.warn .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.network.bad .dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }

/* the 3D swap card */
.stage { perspective: 1400px; perspective-origin: 50% 40%; }
.panel { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative; border-radius: var(--r-xl); padding: 28px;
  background: linear-gradient(160deg, rgba(30, 42, 78, .72), rgba(12, 18, 36, .78));
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 80px -30px rgba(91, 231, 255, .35);
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  opacity: 0; translate: 0 40px; scale: .94;
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), translate 1.1s cubic-bezier(.2, .8, .2, 1), scale 1.1s cubic-bezier(.2, .8, .2, 1);
}
.ready .panel { opacity: 1; translate: 0 0; scale: 1; }
/* holographic edge */
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--spin, 0deg) at 50% 50%, rgba(91, 231, 255, .0), rgba(91, 231, 255, .9), rgba(140, 123, 255, .9), rgba(91, 231, 255, 0) 40%, rgba(91, 231, 255, 0) 60%, rgba(140, 123, 255, .6), rgba(91, 231, 255, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 9s linear infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(140, 200, 255, .12), transparent 60%); mix-blend-mode: screen; }
.float .panel { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: rotateX(3deg) rotateY(-3deg); } 50% { transform: rotateX(-2deg) rotateY(3deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .panel, .panel::before, .float .panel, .ticker-track { animation: none !important; transition: none !important; } .panel { opacity: 1; translate: none; scale: none; } }

.view { display: grid; gap: 18px; position: relative; transform: translateZ(24px); }
.leg { border-radius: var(--r-lg); padding: 16px 18px 12px; background: rgba(4, 8, 20, .45); border: 1px solid rgba(160, 185, 255, .1); transition: border-color .25s, box-shadow .25s; }
.leg:focus-within { border-color: rgba(91, 231, 255, .45); box-shadow: 0 0 0 4px rgba(91, 231, 255, .08), 0 0 30px -10px rgba(91, 231, 255, .5); }
.leg label, .field label { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.leg-row { display: flex; align-items: center; gap: 12px; }
.leg-row > :first-child { min-width: 0; }
#amountIn, #cnAmt, .out { flex: 1; width: 100%; min-width: 0; font: 600 40px/1.15 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; border: 0; background: transparent; padding: 2px 0; outline: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#amountIn::placeholder, #cnAmt::placeholder { color: rgba(238, 242, 255, .18); }
#amountIn:focus-visible, #cnAmt:focus-visible { outline: none; }
.out { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.out.loading { opacity: .4; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.leg-sub { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.5em; }
.asset { display: flex; align-items: center; gap: 10px; flex: none; border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.asset:hover { border-color: var(--edge-2); background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.asset .sym { font-weight: 700; display: block; line-height: 1.1; }
.asset .net { font-size: 11.5px; color: var(--muted); display: block; line-height: 1.25; }

/* coin logos */
.coin { position: relative; width: 34px; height: 34px; flex: none; display: inline-block; }
.coin > img:first-child, .coin-fallback { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: #0e1530; }
.coin-fallback { font-weight: 800; font-size: 11px; color: #fff; letter-spacing: -.02em; }
.coin .chain { position: absolute; right: -3px; bottom: -3px; width: 44%; height: 44%; border-radius: 50%; border: 2px solid #121a33; background: #121a33; object-fit: cover; }

.rail { position: relative; height: 8px; margin: -13px 0; z-index: 2; }
.flip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--edge-2); background: #111a35; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .8), 0 0 0 5px rgba(12, 18, 36, .9); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3), color .2s, border-color .2s; }
.flip:hover { color: var(--cyan); border-color: var(--cyan); }
.flip.spun { transform: translate(-50%, -50%) rotate(180deg); }

.field input, .inline input, #assetSearch, #trackIn { width: 100%; border: 1px solid var(--edge); background: rgba(4, 8, 20, .5); border-radius: var(--r-md); padding: 13px 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .inline input::placeholder, #assetSearch::placeholder, #trackIn::placeholder { color: var(--faint); }
.field input:focus, .inline input:focus, #assetSearch:focus, #trackIn:focus { border-color: rgba(91, 231, 255, .55); outline: none; box-shadow: 0 0 0 4px rgba(91, 231, 255, .1); }
.field input.invalid { border-color: var(--bad); }
.hint { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.hint.bad { color: var(--bad); }

.breakdown { margin: 0; display: grid; gap: 9px; font-size: 13.5px; padding: 14px 16px; background: rgba(4, 8, 20, .4); border: 1px solid rgba(160, 185, 255, .08); border-radius: var(--r-md); }
.breakdown div { display: flex; justify-content: space-between; gap: 12px; }
.breakdown dt { color: var(--muted); }
.breakdown dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.msg { border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(255, 197, 107, .18); }
.msg.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(255, 107, 134, .2); }
.msg.ok { background: rgba(67, 245, 182, .08); color: var(--ok); border-color: rgba(67, 245, 182, .2); }

.primary, .secondary { border-radius: var(--r-md); padding: 16px 18px; font-weight: 700; font-size: 16px; cursor: pointer; border: 0; letter-spacing: .01em; }
.primary { position: relative; color: #04101a; background: var(--grad); box-shadow: 0 10px 30px -10px rgba(91, 231, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .5); overflow: hidden; transition: transform .2s, box-shadow .2s, opacity .2s; }
.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); }
.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(91, 231, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.primary:hover:not(:disabled)::after { transform: translateX(120%); transition: transform .8s ease; }
.primary:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; filter: saturate(.4); }
.primary.small, .secondary { padding: 12px 16px; font-size: 14.5px; }
.secondary { background: rgba(255, 255, 255, .05); border: 1px solid var(--edge); color: var(--ink); }
.secondary:hover { border-color: var(--edge-2); background: rgba(255, 255, 255, .08); }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; min-width: 0; }
.more-routes { background: none; border: 1px dashed var(--edge-2); border-radius: var(--r-md); padding: 12px 14px; color: var(--cyan); font-weight: 600; cursor: pointer; }
.more-routes:hover { border-style: solid; }
.more-routes.loud { border-style: solid; border-color: rgba(91, 231, 255, .5); background: rgba(91, 231, 255, .07); }
.widget-box { min-height: 600px; width: 100%; }
.widget-box swapkit-widget { display: block; width: 100%; min-height: 600px; }

/* deposit */
.back { justify-self: start; background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font-weight: 500; font-size: 14px; }
.back::before { content: "‹ "; }
.back:hover { color: var(--ink); }
.send-head { margin: 0; font: 600 26px/1.2 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sub { margin: -8px 0 0; color: var(--muted); font-size: 13.5px; }
.wallet-box { display: grid; gap: 10px; }
.wallet-box .or { text-align: center; color: var(--faint); font-size: 12.5px; }
.manual { display: grid; gap: 14px; }
.memo-gate { background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(255, 197, 107, .18); border-radius: var(--r-md); padding: 14px 16px; font-size: 13.5px; }
.memo-gate p { margin: 0 0 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--ink); }
.check input { margin-top: 4px; accent-color: var(--cyan); width: 16px; height: 16px; flex: none; }
#manualDetails { display: grid; gap: 10px; }
.copyrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: rgba(4, 8, 20, .45); border: 1px solid rgba(160, 185, 255, .08); border-radius: var(--r-md); padding: 10px 12px; }
.copyrow .k { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.copyrow code { overflow-wrap: anywhere; font-size: 13.5px; }
.copy { border: 1px solid var(--edge); background: rgba(255, 255, 255, .05); border-radius: var(--r-sm); padding: 6px 11px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.copy:hover { border-color: var(--cyan); }
.copy.done { color: var(--ok); border-color: var(--ok); }
.qr { justify-self: center; background: #fff; padding: 10px; border-radius: var(--r-md); box-shadow: 0 0 40px -10px rgba(91, 231, 255, .6); }
.qr img, .qr canvas { display: block; width: 156px; height: 156px; }
.expiry { margin: 0; font-size: 12.5px; color: var(--faint); }

/* tracking */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 0 0 20px; position: relative; }
.steps li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: rgba(160, 185, 255, .12); }
.steps li:last-child::before { display: none; }
.steps .mark { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(160, 185, 255, .2); background: #0d1428; display: grid; place-items: center; font-size: 13px; font-weight: 800; z-index: 1; }
.steps li.done .mark { background: var(--ok); border-color: var(--ok); color: #04131b; box-shadow: 0 0 16px rgba(67, 245, 182, .5); }
.steps li.done::before { background: linear-gradient(var(--ok), rgba(67, 245, 182, .3)); }
.steps li.now .mark { border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(91, 231, 255, .12), 0 0 20px rgba(91, 231, 255, .4); }
.steps li.now .mark::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(.45); opacity: .5; } }
.steps .t { font-weight: 600; padding-top: 2px; }
.steps .d { font-size: 12.5px; color: var(--muted); }
.steps li:not(.done):not(.now) .t { color: var(--faint); font-weight: 500; }
.outtx { background: rgba(4, 8, 20, .45); border: 1px solid rgba(160, 185, 255, .08); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; display: grid; gap: 4px; }
.outtx a { overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; }

/* sections below */
.how, .faq { max-width: 1200px; margin: 0 auto; padding: 72px 28px; }
.how h2, .faq h2 { font: 600 28px/1.15 var(--display); letter-spacing: -.035em; margin: 0 0 32px; }
.how-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.how-steps li { counter-increment: s; color: var(--muted); font-size: 14.5px; padding: 22px; border-radius: var(--r-lg); background: rgba(14, 20, 40, .55); border: 1px solid var(--edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.how-steps li::before { content: "0" counter(s); display: block; font: 600 30px/1 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; letter-spacing: -.04em; }
.how-steps b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.faq details { border-bottom: 1px solid var(--edge); max-width: 780px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-weight: 300; font-size: 24px; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--muted); max-width: 64ch; }
.foot { max-width: 1200px; margin: 0 auto; padding: 32px 28px 56px; color: var(--faint); font-size: 12.5px; border-top: 1px solid var(--edge); }
.foot p { max-width: 70ch; margin: 0 0 8px; }

/* dialogs */
.sheet { border: 0; border-radius: var(--r-xl); padding: 20px; width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); background: linear-gradient(160deg, #18213f, #0c1226); color: var(--ink); box-shadow: 0 0 0 1px var(--edge-2), 0 40px 100px -20px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(91, 231, 255, .4); }
.sheet[open] { display: flex; flex-direction: column; gap: 12px; animation: pop .28s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.sheet::backdrop { background: rgba(3, 5, 12, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin: 0; }
.sheet-head h3 { margin: 0; font: 600 17px/1.2 var(--display); letter-spacing: -.02em; }
.x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 8px; }
.x:hover { color: var(--ink); }
.asset-list { list-style: none; margin: 0 -8px; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(160, 185, 255, .25) transparent; }
.asset-list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md); cursor: pointer; transition: background .15s; }
.asset-list li:hover, .asset-list li:focus-visible { background: rgba(255, 255, 255, .06); }
.asset-list .nm { flex: 1; min-width: 0; }
.asset-list .nm b { display: block; }
.asset-list .nm span { font-size: 12.5px; color: var(--muted); }
.asset-list .px { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.asset-list .empty { color: var(--muted); cursor: default; justify-content: center; }
.sheet.small label { font-size: 13.5px; color: var(--muted); }
#recentList { display: grid; gap: 6px; }
#recentList h4 { margin: 8px 0 0; font-size: 13px; color: var(--muted); font-weight: 500; }
#recentList button { text-align: left; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; }
#recentList button:hover { border-color: var(--edge-2); }
#recentList small { color: var(--muted); font-family: var(--mono); overflow-wrap: anywhere; }

/* setup page */
.setup-main { max-width: 760px; margin: 0 auto; padding: 16px 28px 64px; display: grid; gap: 22px; }
.setup-main h1 { font-size: clamp(30px, 5vw, 44px); margin: 0; }
.setup-main .lede { margin: 0; }
.card { background: linear-gradient(160deg, rgba(30, 42, 78, .6), rgba(12, 18, 36, .7)); border: 1px solid var(--edge); border-radius: var(--r-xl); padding: 24px; display: grid; gap: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.card h2 { margin: 0; font: 600 19px/1.2 var(--display); letter-spacing: -.02em; }
.card p { margin: 0; color: var(--muted); }
.card code, .checklist code { font-family: var(--mono); font-size: .86em; background: rgba(255, 255, 255, .06); padding: 1px 6px; border-radius: 6px; }
.form-grid { display: grid; gap: 12px; }
.form-grid label { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.form-grid input, .form-grid select { border: 1px solid var(--edge); background: rgba(4, 8, 20, .5); border-radius: var(--r-md); padding: 12px 14px; color: var(--ink); }
.form-grid input:focus, .form-grid select:focus { border-color: var(--cyan); outline: none; }
.checklist { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--muted); }
.result { display: grid; gap: 10px; }
.big-num { font: 600 28px/1.2 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 28px; }
  .stage { max-width: 560px; width: 100%; margin: 0 auto; }
  .how-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .top { padding: 14px 16px; }
  .top nav a { display: none; }
  .hero { padding: 20px 16px 56px; }
  .panel { padding: 18px 14px; border-radius: 22px; }
  .leg { padding: 14px 14px 10px; }
  #amountIn, #cnAmt, .out { font-size: 30px; }
  .lede { font-size: 16px; margin-bottom: 22px; }
  h1 { font-size: 31px; margin-bottom: 16px; }
  .facts { display: none; }
  .hero { gap: 28px; }
  .how, .faq { padding: 48px 16px; }
  .how-steps { grid-template-columns: 1fr; }
  .foot { padding: 28px 16px 40px; }
  .asset { padding-right: 10px; }
  .asset .net { display: none; }
}

/* continue in a wallet app */
.handoff { display: grid; gap: 14px; justify-items: stretch; }
.handoff-head { margin: 0; color: var(--muted); font-size: 13.5px; }
.handoff .qr { justify-self: center; }
.handoff .qr img, .handoff .qr canvas { width: 176px; height: 176px; }
.handoff a.primary { text-align: center; text-decoration: none; display: block; }
.seg { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: 999px; background: rgba(4, 8, 20, .5); }
.seg button { border: 0; background: none; color: var(--muted); padding: 7px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--grad); color: #04101a; }
.qr-hint { text-align: center; margin-top: -2px; }
.view > *, .handoff > * { min-width: 0; } .qr { max-width: 100%; overflow-wrap: anywhere; }
.howto { margin: 0; padding: 12px 14px 12px 32px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); border: 1px solid rgba(91, 231, 255, .18); border-radius: var(--r-md); background: rgba(91, 231, 255, .05); }
.howto li::marker { color: var(--cyan); font-weight: 700; }

/* swap type tabs + ChangeNOW frame */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(4, 8, 20, .5); position: relative; transform: translateZ(24px); }
.modes button { border: 0; background: none; color: var(--muted); padding: 9px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; transition: color .2s, background .2s; }
.modes button:hover { color: var(--ink); }
.modes button[aria-selected="true"] { background: var(--grad); color: #04101a; box-shadow: 0 6px 20px -8px rgba(91, 231, 255, .7); }
.cn-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(160, 185, 255, .1); background: #0B1020; min-height: 380px; }
.cn-frame iframe { display: block; width: 100%; height: 580px; border: 0; }
.hint.center { text-align: center; margin: 0; }
.more-opts summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 0; }
.more-opts summary:hover { color: var(--ink); }
.more-opts .field { margin-top: 10px; }
#cnOrder .qr { justify-self: center; }
#cnSearch { width: 100%; border: 1px solid var(--edge); background: rgba(4, 8, 20, .5); border-radius: var(--r-md); padding: 13px 15px; color: var(--ink); }
#cnSearch::placeholder { color: var(--faint); }
#cnSearch:focus { border-color: rgba(91, 231, 255, .55); outline: none; box-shadow: 0 0 0 4px rgba(91, 231, 255, .1); }
#cnQr img, #cnQr canvas { width: 176px; height: 176px; }

/* while a menu is open: freeze the moving background so nothing flickers behind it */
.sheet::backdrop { background: rgba(3, 5, 12, .78); backdrop-filter: none; -webkit-backdrop-filter: none; }
body:has(dialog[open]) .ticker-track, body:has(dialog[open]) .panel::before, body:has(dialog[open]) .float .panel { animation-play-state: paused; }
.sheet { backdrop-filter: none; -webkit-backdrop-filter: none; will-change: auto; }
.asset-list { contain: content; }
.tick .chg { font-size: 11.5px; font-weight: 600; }
.tick .chg.up { color: var(--ok); }
.tick .chg.down { color: var(--bad); }