/* Swap presentation only; retain the existing financial and quote behavior. */
.swap-page {
    max-width: 850px; padding-top: 3.25rem; padding-bottom: 4rem;
    color: var(--nl-text, #fafafa);
    --swap-border: #2b2b2b;
    --swap-muted: #a3a3ab;
    --swap-accent: var(--nl-accent-light, #ff8b64);
}
.swap-page [hidden] { display: none !important; }
/* Share the guest form's compact rows without sharing its funding flow. */
#swap-app.member-swap-page { max-width: 660px; }
.member-swap-page #swap-reverse { flex: none; width: 38px; height: 38px; border: 1px solid #373737; background: #242424; color: var(--swap-accent); border-radius: 7px; }
.member-swap-route { color: var(--swap-muted); font-size: .72rem; margin: .6rem 0 1.1rem; }
.swap-heading { margin-bottom: 1.75rem; }
.swap-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.swap-heading h1 { margin: 0; font-size: 2.15rem; font-weight: 600; letter-spacing: -.045em; }
.swap-heading p { margin: .6rem 0 0; color: var(--swap-muted); font-size: .9rem; }
.swap-testing { color: var(--swap-muted); font-size: .72rem; white-space: nowrap; }
.swap-testing::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: .5rem; border-radius: 50%; background: var(--swap-accent); vertical-align: middle; }
.swap-workspace { background: var(--nl-surface, #101010); border: 1px solid var(--swap-border); border-radius: 12px; box-shadow: 0 12px 36px #0003; }
.swap-workspace-body { padding: 1.75rem; }
.swap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 1.75rem; border-bottom: 1px solid var(--swap-border); }
.swap-steps li { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1.15rem .25rem; color: #94949d; font-size: .8rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.swap-steps span { font-variant-numeric: tabular-nums; font-size: .68rem; opacity: .65; }
.swap-steps [aria-current] { color: var(--swap-accent); border-bottom-color: var(--swap-accent); }
.swap-steps [aria-current] span { opacity: 1; }
.swap-pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; }
.swap-amount-panel { min-width: 0; padding: 1.3rem; background: #181818; border: 1px solid var(--swap-border); border-radius: 8px; align-self: stretch; transition: border-color .15s ease; }
.swap-amount-panel:focus-within { border-color: var(--swap-accent); }
.swap-amount-panel > label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; color: #c2c2c8; font-size: .8rem; font-weight: 500; }
.swap-amount-panel > label span { color: #9b9ba4; font-size: .7rem; font-weight: 400; }
.swap-coin { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 58px; padding: .6rem .7rem; background: #222; border: 1px solid #363636; border-radius: 7px; color: var(--nl-text, #fafafa); text-align: left; transition: background .15s ease, border-color .15s ease; }
.swap-coin:hover { background: #282828; border-color: #515151; }
.swap-coin > span { min-width: 0; flex: 1; }
.swap-coin strong { font-size: .95rem; font-weight: 600; line-height: 1.2; }
.swap-coin small { display: block; margin-top: .15rem; color: var(--swap-muted); font-size: .72rem; overflow-wrap: anywhere; }
.swap-coin > i { color: var(--swap-muted); font-size: .75rem; }
.swap-coin .coin-icon { width: 30px; height: 30px; flex: none; }
.swap-amount-panel input, .swap-amount-panel output {
    display: block; width: 100%; min-height: 58px; margin: 1.05rem 0 .65rem; padding: .2rem 0;
    border: 0; background: transparent; color: #fafafa; font-size: 1.85rem; font-weight: 500;
    line-height: 1.4; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.swap-amount-panel input:focus { outline: 0; }
.swap-balance { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; color: var(--swap-muted); font-size: .7rem; overflow-wrap: anywhere; }
.swap-balance button { flex: none; padding: .3rem .55rem; min-width: 44px; min-height: 32px; border: 1px solid #454545; border-radius: 5px; background: #252525; color: var(--swap-accent); font-size: .7rem; font-weight: 600; }
.swap-balance button:hover { border-color: var(--swap-accent); }
.swap-reverse { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #464646; border-radius: 50%; background: #232323; color: #c7c7ce; box-shadow: 0 0 0 5px var(--nl-surface, #101010); transition: color .15s ease, border-color .15s ease; }
.swap-reverse:hover { color: var(--swap-accent); border-color: var(--swap-accent); }
.swap-receive p { display: flex; align-items: center; min-height: 32px; margin: 0; color: var(--swap-muted); font-size: .7rem; overflow-wrap: anywhere; }
.swap-form-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .55rem 1rem; margin: 1.35rem 0; color: var(--swap-muted); font-size: .74rem; }
#swap-route { overflow-wrap: anywhere; }
.swap-fee-note { display: inline-flex; align-items: center; gap: .35rem; }
.swap-fee-note i { color: var(--swap-accent); }
.swap-page .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 7px; font-size: .88rem; font-weight: 600; }
.swap-page .btn:disabled { opacity: .45; }
.swap-primary { width: 100%; gap: .7rem; }
.swap-footer-note { margin: 1.15rem 0 0; text-align: center; color: #9999a2; font-size: .73rem; }
.swap-footer-note i { margin-right: .4rem; }
.swap-page button:focus-visible, .swap-page a:focus-visible { outline: 2px solid var(--swap-accent); outline-offset: 3px; }
.swap-error { margin-bottom: 1.1rem; padding: .85rem 1rem; border: 1px solid #623b37; border-radius: 7px; background: #2b1b19; color: #ffbbb1; font-size: .85rem; line-height: 1.6; }
.swap-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.swap-section-heading h2, .swap-outcome h2, #swap-complete h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.025em; }
#swap-countdown { padding: .3rem .55rem; background: #26201c; border-radius: 5px; color: var(--swap-accent); font-size: .73rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.swap-summary { display: grid; gap: 0; margin: 0; }
.swap-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .95rem 0; border-bottom: 1px solid #272727; font-size: .82rem; }
.swap-summary dt { color: var(--swap-muted); font-weight: 400; }
.swap-summary dd { max-width: 65%; margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.swap-summary .swap-key { margin: .35rem 0; padding: 1rem; border: 1px solid rgba(var(--nl-accent-rgb, 249, 115, 22), .2); border-radius: 7px; background: rgba(var(--nl-accent-rgb, 249, 115, 22), .045); }
.swap-summary .swap-key dt { color: #d0d0d5; }
.swap-summary .swap-key dd { color: var(--swap-accent); font-size: 1.1rem; }
.swap-protection { margin: 1.3rem 0 0; color: var(--swap-muted); font-size: .76rem; line-height: 1.75; }
.swap-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.swap-actions > * { flex: 1; }
#swap-refresh { margin-top: .75rem; }
.swap-outcome { padding: 2.75rem 1rem; text-align: center; }
.swap-outcome p { max-width: 360px; margin: 1rem auto 1.5rem; color: var(--swap-muted); font-size: .88rem; line-height: 1.7; }
.swap-spinner { width: 44px; height: 44px; margin: 0 auto 1.5rem; border: 3px solid #303030; border-top-color: var(--swap-accent); border-radius: 50%; animation: swap-spin 1s linear infinite; }
.swap-success { display: grid; place-items: center; width: 48px; height: 48px; margin: .5rem auto 1rem; border: 1px solid #315444; border-radius: 50%; background: #18281f; color: #82d7a9; font-size: 1.6rem; }
#swap-complete > h2, .swap-complete-note { text-align: center; }
.swap-complete-note { margin: .6rem 0 1.75rem; color: var(--swap-muted); font-size: .85rem; }
.swap-reference { margin: 1.25rem 0 0; color: var(--swap-muted); font-size: .7rem; overflow-wrap: anywhere; }
.swap-reference span { display: block; margin-top: .25rem; color: #c2c2c9; font-variant-numeric: tabular-nums; }
.swap-workspace section { scroll-margin-top: 85px; }
.swap-workspace h2:focus { outline: none; }
#swap-coin-dialog { width: min(440px, calc(100% - 2rem)); max-height: 85vh; padding: 1.25rem; border: 1px solid #363636; border-radius: 10px; background: #161616; color: #fafafa; box-shadow: 0 16px 64px #0006; }
#swap-coin-dialog::backdrop { background: #000b; }
#swap-coin-dialog .swap-section-heading { margin-bottom: 1rem; }
#swap-coin-dialog h2 { font-size: 1.1rem; }
#swap-close-picker { width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--swap-muted); font-size: 1.5rem; }
#swap-close-picker:hover { background: #242424; color: #fff; }
.swap-search-field { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; padding: 0 .8rem; background: #202020; border: 1px solid #3c3c3c; border-radius: 6px; color: var(--swap-muted); }
.swap-search-field:focus-within { border-color: var(--swap-accent); }
#swap-search { min-width: 0; width: 100%; min-height: 46px; padding: .7rem 0; background: transparent; border: 0; outline: 0; color: #fafafa; font-size: 16px; }
#swap-coin-list { max-height: 50vh; overflow: auto; overscroll-behavior: contain; }
#swap-coin-list .swap-coin { padding: .8rem .65rem; border: 0; border-bottom: 1px solid #292929; border-radius: 0; background: transparent; }
#swap-coin-list .swap-coin:hover { background: #222; }
#swap-no-coins { margin: 1.5rem 0; color: var(--swap-muted); font-size: .85rem; text-align: center; }
@keyframes swap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .swap-spinner { animation-duration: 3s; }
    .swap-page * { transition: none !important; }
}
@media (max-width: 600px) {
    .swap-page { padding-top: 1.75rem; padding-bottom: 2.5rem; }
    .swap-heading { margin-bottom: 1.25rem; }
    .swap-heading-row { align-items: baseline; flex-wrap: wrap; gap: .55rem; }
    .swap-heading h1 { font-size: 1.8rem; }
    .swap-heading p { font-size: .8rem; }
    .swap-testing { font-size: .66rem; }
    .swap-workspace { border-radius: 9px; }
    .swap-workspace-body { padding: 1rem; }
    .swap-steps { padding: 0 1rem; }
    .swap-steps li { padding: .95rem 0; font-size: .7rem; gap: .35rem; }
    .swap-steps span { font-size: .62rem; }
    .swap-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .swap-amount-panel { padding: 1rem; }
    .swap-amount-panel > label { margin-bottom: .75rem; }
    .swap-amount-panel input, .swap-amount-panel output { min-height: 46px; margin: .75rem 0 .3rem; font-size: 1.7rem; }
    .swap-reverse { margin: -8px auto; transform: rotate(90deg); }
    .swap-form-meta { margin: 1.1rem 0; font-size: .7rem; }
    .swap-section-heading { align-items: baseline; gap: .5rem; }
    .swap-section-heading h2 { font-size: 1.1rem; }
    #swap-countdown { padding: .25rem .4rem; font-size: .67rem; }
    .swap-summary > div { gap: .65rem; font-size: .76rem; }
    .swap-summary .swap-key { padding: .85rem .65rem; }
    .swap-summary .swap-key dd { font-size: .95rem; }
    .swap-actions { flex-wrap: wrap; }
    .swap-outcome { padding: 2rem .5rem; }
    .swap-footer-note { font-size: .68rem; }
}