/* Match NativeAspExchangePanel: metallic asset cards, large values and one action. */
:is(#details,.exchange-workspace):has(.native-crypto-exchange){position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border:0;border-radius:0;box-sizing:border-box;background:#07131d;color:#f2fcff;box-shadow:0 28px 100px #0009;font-family:Inter,ui-sans-serif,system-ui,sans-serif;overflow:auto;scrollbar-width:thin;scrollbar-color:#476473 transparent}
:is(#details,.exchange-workspace):has(.native-crypto-exchange)::backdrop{background:#01080ec9;backdrop-filter:blur(8px)}
:is(#details,.exchange-workspace) .exchange-breadcrumb{color:#83e8e0;font-size:15px;font-weight:800;padding-right:52px;margin:3px 0 18px}
:is(#details,.exchange-workspace):has(.native-crypto-exchange) .close{position:absolute;top:15px;right:15px;float:none;width:34px;height:34px;min-height:34px;margin:0;padding:0;border:0;border-radius:50%;background:#152630;color:#b7d1da;font-size:0;display:grid;place-items:center}
:is(#details,.exchange-workspace):has(.native-crypto-exchange) .close:after{content:'×';font-size:24px;font-weight:400}
:is(#details,.exchange-workspace) .fiat-choices{display:flex;gap:5px;padding:4px;border:1px solid #27404a;border-radius:14px;background:#0a1c27;margin:0 0 24px}
:is(#details,.exchange-workspace) .fiat-choices button{flex:1;min-height:39px;padding:8px 12px;margin:0;border:0;border-radius:10px;background:transparent;color:#8daab8;font-size:13px;font-weight:750}
:is(#details,.exchange-workspace) .fiat-choices button[aria-pressed=true]{color:#c8fffa;background:linear-gradient(110deg,#23464c,#293344);box-shadow:inset 0 1px #ffffff12}
:is(#details,.exchange-workspace) .exchange-entry-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 20px}
:is(#details,.exchange-workspace) .exchange-eyebrow{display:block;color:#83dcd7;font-size:10px;font-weight:800;letter-spacing:1.3px;line-height:1.5}
:is(#details,.exchange-workspace) .exchange-title{font-size:25px;line-height:1.2;letter-spacing:-.7px;font-weight:800;margin:6px 0 0;color:#f2fcff}
:is(#details,.exchange-workspace) .exchange-network-badge{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:#102a2e;color:#abdad9;font-size:9px;font-weight:800;border-radius:20px;padding:8px 9px}
:is(#details,.exchange-workspace) .exchange-network-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:#d6b877}
:is(#details,.exchange-workspace) .exchange-asset-card{position:relative;isolation:isolate;overflow:hidden;min-height:186px;padding:16px;border-radius:24px;border:1px solid #4aaba7;background:#0d3539;margin:0;box-sizing:border-box}
:is(#details,.exchange-workspace) .exchange-asset-card:before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff26 0%,#ffffff08 20%,#00000012 43%,#ffffff1c 50%,#ffffff04 66%,#00000026),repeating-linear-gradient(0deg,transparent 0 27px,#ffffff08 28px,transparent 29px)}
:is(#details,.exchange-workspace) .exchange-asset-card:after{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,#fff7,transparent)}
:is(#details,.exchange-workspace) .exchange-asset-ada{background:#102c60;border-color:#5583e3}
:is(#details,.exchange-workspace) .exchange-asset-usd{background:#203744;border-color:#688997}
:is(#details,.exchange-workspace) .exchange-card-top{display:flex;justify-content:space-between;align-items:center;min-height:28px;margin-bottom:12px;gap:12px}
:is(#details,.exchange-workspace) .exchange-card-network{font-size:9px;font-weight:750;letter-spacing:1px;color:#b5c9d6}
:is(#details,.exchange-workspace) .exchange-asset-ada .exchange-eyebrow{color:#a8c6ff}
:is(#details,.exchange-workspace) .exchange-amount-row{display:flex;align-items:center;gap:14px;min-height:102px}
:is(#details,.exchange-workspace) .exchange-amount-column{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
:is(#details,.exchange-workspace) .exchange-amount,:is(#details,.exchange-workspace) #fiat-swap .exchange-amount{display:block;width:100%;min-width:0;min-height:46px;background:none;border:0;border-radius:0;padding:0;margin:0;color:#fff;font:700 36px/1.25 Inter,system-ui,sans-serif;box-shadow:none;outline-offset:3px}
:is(#details,.exchange-workspace) .exchange-amount::placeholder{color:#9cb3c3;opacity:1}
:is(#details,.exchange-workspace) .exchange-output{display:block;overflow-wrap:anywhere;color:#fff;font-size:36px;font-weight:700;line-height:1.25;min-height:46px}
:is(#details,.exchange-workspace) .exchange-asset-name{font-size:13px;line-height:1.5;color:#c2d7e0}
:is(#details,.exchange-workspace) .exchange-asset-hint{font-size:11px;line-height:1.5;color:#92acbc}
:is(#details,.exchange-workspace) .exchange-coin-column{width:76px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
:is(#details,.exchange-workspace) .exchange-coin-art{display:block;width:68px;height:68px;object-fit:contain;margin:0;border:0;border-radius:0;filter:drop-shadow(0 5px 9px #0003)}
:is(#details,.exchange-workspace) .exchange-asset-ada .exchange-coin-art{width:56px;height:56px;margin:6px}
:is(#details,.exchange-workspace) .exchange-coin-symbol{font-size:13px;font-weight:800;line-height:1.4;color:#effaff}
:is(#details,.exchange-workspace) #fiat-swap .exchange-coin-picker{appearance:auto;display:block;min-height:24px;width:72px;max-width:72px;background:transparent;border:0;border-radius:0;padding:0 0 0 9px;margin:0;color:#effaff;font-size:13px;font-weight:800;text-align:center}
:is(#details,.exchange-workspace) .exchange-dollar-emblem{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1px solid #d8e4ee99;background:linear-gradient(135deg,#637b8b,#263d4c 44%,#8197a7 46%,#344d5e 65%,#233d4e);box-shadow:inset 0 0 0 4px #ffffff0c,0 4px 10px #0004;color:#edf6fb;font-size:40px;line-height:1;font-weight:500;text-shadow:0 2px #0007}
:is(#details,.exchange-workspace) .exchange-flip-row{position:relative;z-index:2;display:flex;justify-content:center;margin:-13px 0}
:is(#details,.exchange-workspace) .exchange-flip{display:grid;place-items:center;width:46px;height:46px;min-height:46px;border:2px solid #816076;border-radius:50%;padding:0;margin:0;background:#0a1420;color:#ed9acb;font-size:26px;line-height:1}
:is(#details,.exchange-workspace) .exchange-entry-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;color:#a8c0ce;font-size:12px;min-height:30px}
:is(#details,.exchange-workspace) .exchange-entry-meta label{margin:0;display:block;font-size:12px}
:is(#details,.exchange-workspace) .exchange-slippage{width:auto;max-width:90px;min-height:34px;background:#0c202d;border:1px solid #31505d;border-radius:16px;color:#d3e5ed;padding:5px 10px;font-size:12px}
:is(#details,.exchange-workspace) .exchange-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:12px 0 0;padding:15px 18px;border:0;border-radius:16px;background:linear-gradient(105deg,#5fe2e2,#aab6d9 55%,#ec68b7);color:#06151e;font-size:15px;font-weight:850;line-height:1.3;text-align:center;box-shadow:inset 0 1px #ffffff33}
:is(#details,.exchange-workspace) .exchange-primary:disabled{opacity:.44;cursor:default;filter:none}
:is(#details,.exchange-workspace) .exchange-small-copy,:is(#details,.exchange-workspace) .exchange-inline-message{font-size:12px;line-height:1.6;color:#92aebc;margin:8px 0}
:is(#details,.exchange-workspace) .exchange-inline-message{color:#ffa5c9}
:is(#details,.exchange-workspace) .exchange-text-button{display:inline-flex;align-items:center;background:none;border:0;min-height:36px;color:#91e7de;font-size:12px;padding:4px 0;margin:0}
:is(#details,.exchange-workspace) .exchange-connection{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8faab8;font-size:11px;min-height:42px;margin-top:8px}
:is(#details,.exchange-workspace) .exchange-help{margin-top:9px;border-top:1px solid #223b49;padding-top:13px}
:is(#details,.exchange-workspace) .exchange-help summary{color:#a8c8d3;font-size:12px;cursor:pointer}
:is(#details,.exchange-workspace) .exchange-help p{font-size:12px;line-height:1.7;color:#92aebc}
:is(#details,.exchange-workspace) .exchange-help button{border:0;background:none;color:#91e7de;font-size:12px;padding:8px 0;min-height:36px;margin:0}
:is(#details,.exchange-workspace) .exchange-wallet-caption{text-align:center;color:#7491a1;font-size:10px;margin:18px 0 0}
:is(#details,.exchange-workspace) .exchange-quote-summary{padding:14px 0;margin:8px 0;border-bottom:1px solid #294450}
:is(#details,.exchange-workspace) .exchange-detail-line{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:12px;line-height:1.5;padding:7px 0;color:#97b1bf}
:is(#details,.exchange-workspace) .exchange-detail-line strong{color:#e2f1f5;text-align:right;font-size:12px;font-weight:650}
:is(#details,.exchange-workspace) .exchange-quote-summary button{padding:12px;min-height:44px;border-radius:12px;background:#173942;color:#b7fff2;border:1px solid #39696a;font-size:13px}
:is(#details,.exchange-workspace) #fiat-swap a.exchange-provider-link{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:14px;padding:12px;border:0;background:linear-gradient(105deg,#5fe2e2,#ec68b7);color:#06151e;font-weight:800;text-decoration:none}
:is(#details,.exchange-workspace) .exchange-primary:hover:not(:disabled),:is(#details,.exchange-workspace) .exchange-flip:hover:not(:disabled){filter:brightness(1.08)}
:is(#details,.exchange-workspace) [hidden]{display:none!important}
@media(max-width:380px){:is(#details,.exchange-workspace):has(.native-crypto-exchange){padding:20px 14px;width:calc(100vw - 16px)}:is(#details,.exchange-workspace) .exchange-asset-card{min-height:176px;padding:14px}:is(#details,.exchange-workspace) .exchange-title{font-size:23px}:is(#details,.exchange-workspace) .exchange-amount,:is(#details,.exchange-workspace) #fiat-swap .exchange-amount,:is(#details,.exchange-workspace) .exchange-output{font-size:31px}:is(#details,.exchange-workspace) .exchange-coin-column{width:64px}:is(#details,.exchange-workspace) .exchange-coin-art{width:60px;height:60px}}

:is(#details,.exchange-workspace) .exchange-amount:focus-visible,:is(#details,.exchange-workspace) #fiat-swap .exchange-amount:focus-visible{outline:none}:is(#details,.exchange-workspace) .exchange-asset-card:has(.exchange-amount:focus-visible){border-color:#8ce8e0;box-shadow:0 0 0 2px #8ce8e022}
@media(max-height:780px){:is(#details,.exchange-workspace) .exchange-asset-card{min-height:164px;padding:14px}:is(#details,.exchange-workspace) .exchange-amount-row{min-height:82px}:is(#details,.exchange-workspace) .exchange-card-top{min-height:24px;margin-bottom:10px}:is(#details,.exchange-workspace) .exchange-entry-heading{margin-bottom:16px}:is(#details,.exchange-workspace) .fiat-choices{margin-bottom:16px}:is(#details,.exchange-workspace) .exchange-breadcrumb{margin-bottom:14px}:is(#details,.exchange-workspace) .exchange-entry-meta{margin:10px 0}:is(#details,.exchange-workspace) .exchange-coin-art{width:60px;height:60px}:is(#details,.exchange-workspace) .exchange-asset-ada .exchange-coin-art{width:50px;height:50px}:is(#details,.exchange-workspace) .exchange-dollar-emblem{width:56px;height:56px;font-size:36px}}

:is(#details,.exchange-workspace) .exchange-output[data-empty="true"]{position:relative;font-size:0}:is(#details,.exchange-workspace) .exchange-output[data-empty="true"]:after{content:"";display:block;position:absolute;left:0;top:22px;width:30px;height:3px;border-radius:2px;background:#a6c1cd}
/* NativeAspExchangePanel measurements and colors, shared by app-style Swap. */
:is(#details,.exchange-workspace):has(.native-crypto-exchange){background:#03070b;padding:18px;width:min(430px,calc(100vw - 28px));font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:is(#details,.exchange-workspace) .native-crypto-exchange{display:flex;flex-direction:column;gap:14px}
:is(#details,.exchange-workspace) .exchange-entry-heading{margin:0 0 8px;gap:8px}
:is(#details,.exchange-workspace) #pending-swaps{order:0;min-height:44px;margin:0;padding:0;justify-content:flex-start;display:flex;align-items:center;gap:6px;color:#b4cbd6;font-size:14px}
:is(#details,.exchange-workspace) .exchange-title{font-size:26px;line-height:1.2;font-weight:800;margin:5px 0 0;letter-spacing:normal}
:is(#details,.exchange-workspace) .exchange-eyebrow{font-size:11px;letter-spacing:1.3px}
:is(#details,.exchange-workspace) .exchange-network-badge{padding:9px;font-size:10px}
:is(#details,.exchange-workspace) .exchange-asset-card{min-height:220px;padding:16px;border-radius:24px;display:flex;flex-direction:column;gap:14px}
:is(#details,.exchange-workspace) .exchange-card-top{min-height:40px;margin:0;gap:8px}
:is(#details,.exchange-workspace) .exchange-amount-row{min-height:116px;gap:14px}
:is(#details,.exchange-workspace) .exchange-amount-column{gap:8px}
:is(#details,.exchange-workspace) .exchange-amount,:is(#details,.exchange-workspace) .exchange-output{font-size:36px;font-weight:700;min-height:48px;font-family:inherit}
:is(#details,.exchange-workspace) .exchange-asset-name,:is(#details,.exchange-workspace) .exchange-asset-hint{font-size:14px;line-height:21px;color:#b4cbd6}
:is(#details,.exchange-workspace) .exchange-usd-value{font-size:15px;line-height:21px;color:#d7e9ed;font-weight:600}
:is(#details,.exchange-workspace) .exchange-coin-column{width:80px;align-self:flex-start;transform:translateY(-10px);gap:7px}
:is(#details,.exchange-workspace) .exchange-coin-art{width:80px;height:80px;filter:none;border-radius:50%;margin:0}
:is(#details,.exchange-workspace) .exchange-asset-ada .exchange-coin-art{width:56px;height:56px;margin:12px;background:#0033ad}
:is(#details,.exchange-workspace) .exchange-coin-symbol{font-size:15px;font-weight:800}
:is(#details,.exchange-workspace) .exchange-flip-row{margin:-36px 0}
:is(#details,.exchange-workspace) .exchange-flip{height:48px;width:48px;min-height:48px;border:2px solid #816076;color:#ed9acb;font-size:24px}
:is(#details,.exchange-workspace) .exchange-toggle{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border-radius:20px;background:#071a22}
:is(#details,.exchange-workspace) .exchange-toggle button{min-height:40px;padding:0 12px;margin:0;border:0;border-radius:18px;background:transparent;color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
:is(#details,.exchange-workspace) .exchange-toggle button[aria-pressed=true]{background:#345466}
:is(#details,.exchange-workspace) .exchange-entry-meta{min-height:44px;margin:0;font-size:14px}
:is(#details,.exchange-workspace) .exchange-primary{min-height:56px;padding:18px;margin:0;border-radius:16px;font-size:16px;font-weight:800;background:linear-gradient(135deg,#5fe2e2,#f05bb5)}
:is(#details,.exchange-workspace) .exchange-primary:disabled{opacity:.4}
:is(#details,.exchange-workspace) .exchange-small-copy{font-size:12px;line-height:18px;color:#8faab8}
:is(#details,.exchange-workspace) .exchange-help{margin:0}
@media(max-width:380px){:is(#details,.exchange-workspace):has(.native-crypto-exchange){width:calc(100vw - 16px);padding:18px}:is(#details,.exchange-workspace) .exchange-toggle{gap:2px;padding:0 5px}:is(#details,.exchange-workspace) .exchange-toggle button{padding:0 9px}}

/* Full screen workspace with readable cards on larger displays. */
:is(#details,.exchange-workspace):has(.native-crypto-exchange) :is(#dialog-content,.exchange-workspace-content){width:100%;max-width:620px;margin:0 auto}
body:has(:is(#details,.exchange-workspace)[open] .native-crypto-exchange){overflow:hidden}
:is(#details,.exchange-workspace):has(.native-crypto-exchange) .native-fiat-access{padding-right:44px}
:is(#details,.exchange-workspace):has(.native-crypto-exchange) .native-fiat-access button[aria-pressed=true]{color:#c8fffa;border-color:#5fe2e2;background:#163a40}

:is(#details,.exchange-workspace):has(.native-crypto-exchange){width:100%;max-width:none;height:100dvh;max-height:none;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}

/* USD buying uses the same card rhythm and artwork as ADA / ASP swaps. */
:is(#details,.exchange-workspace) #fiat-swap .exchange-native-form{display:flex;flex-direction:column;gap:14px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-asset-card{min-height:220px;padding:16px;border-radius:24px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-flip-row{margin:-36px 0}
:is(#details,.exchange-workspace) #fiat-swap .exchange-coin-art{width:80px;height:80px;object-fit:contain}
:is(#details,.exchange-workspace) #fiat-swap .exchange-asset-ada .exchange-coin-art{width:56px;height:56px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-dollar-emblem{width:80px;height:80px;font-size:48px;box-sizing:border-box}
:is(#details,.exchange-workspace) #fiat-swap .exchange-coin-picker{font-size:15px;min-height:26px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-card-network{padding:10px 18px;border-radius:20px;background:#071a22;color:#fff;font-weight:800;font-size:12px}

/* Both modes share the same vertical slots: status, heading, pay, flip, receive. */
:is(#details,.exchange-workspace) .usd-native-exchange{display:flex;flex-direction:column;gap:14px}
:is(#details,.exchange-workspace) .exchange-workspace-status{order:0;min-height:44px;margin:0;padding:0;display:flex;align-items:center;gap:6px;justify-content:flex-start;background:none;border:0;color:#b4cbd6;font:inherit;font-size:14px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-amount{font-size:36px;min-height:48px;font-family:inherit}
:is(#details,.exchange-workspace) #fiat-swap .exchange-output{font-size:36px;min-height:48px;font-weight:700;color:#f2fcff;line-height:1.2}
:is(#details,.exchange-workspace) #fiat-swap .exchange-dollar-emblem{width:56px;height:56px;margin:12px;font-size:36px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-coin-picker{appearance:none;padding:0;width:80px;text-align:center;font-size:15px;font-weight:800;line-height:21px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-toggle button:disabled{opacity:1}

/* USD stays distinct from ASP teal and ADA blue. */
:is(#details,.exchange-workspace) .exchange-asset-usd{background:#34383f;border-color:#aeb6c1}
:is(#details,.exchange-workspace) .exchange-asset-usd .exchange-eyebrow{color:#edf0f5}
:is(#details,.exchange-workspace) .exchange-asset-usd .exchange-dollar-emblem{background:linear-gradient(135deg,#e3e7ee,#626a76 44%,#f4f6fa 46%,#9da6b4 65%,#444c58);border-color:#cbd1db;color:#ffffff}

.exchange-purchase-tracking{padding:16px;border:1px solid #536876;border-radius:16px;background:#101d27}.exchange-progress-steps{display:flex;justify-content:space-between;gap:8px;list-style:none;padding:0;color:#90a5b1;font-size:12px}.exchange-progress-steps [aria-current=step]{color:#9ff3e6;font-weight:800}.exchange-purchase-reference{overflow-wrap:anywhere;user-select:all;font-size:12px;color:#b5cbd5}

/* Shared controls beneath both receive cards. */
:is(#details,.exchange-workspace) .exchange-footer{display:flex;flex-direction:column;gap:14px}
:is(#details,.exchange-workspace) .exchange-footer .exchange-entry-meta{min-height:44px;margin:0}
:is(#details,.exchange-workspace) .exchange-footer .exchange-primary{min-height:56px;margin:0}
:is(#details,.exchange-workspace) .exchange-provider-protection{display:flex;align-items:center;min-height:40px;padding:0 12px;color:#fff;font-size:12px;font-weight:800}
:is(#details,.exchange-workspace) .exchange-footer p:empty{display:none}

/* Review actions keep the same brand colors in both modes and states. */
:is(#details,.exchange-workspace) .exchange-footer .exchange-primary,:is(#details,.exchange-workspace) .exchange-footer .exchange-primary:disabled{background:linear-gradient(135deg,#5fe2e2,#f05bb5);color:#06151e;opacity:1;filter:none}
:is(#details,.exchange-workspace) .exchange-footer .exchange-primary:disabled{cursor:not-allowed}

/* Embedded exchange follows the same main-content flow as other wallet tools. */
:is(#details,.exchange-workspace).exchange-workspace:has(.native-crypto-exchange){position:static;inset:auto;width:100%;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible}
.exchange-workspace .exchange-workspace-content{max-width:620px;margin:0 auto;width:100%}

/* The embedded Swap rests on the existing wallet background. */
:is(#details,.exchange-workspace).exchange-workspace:has(.native-crypto-exchange){background:transparent}

/* Information on the left, compact asset cards on the right. */
.exchange-workspace{container-type:inline-size}
:is(#details,.exchange-workspace) :is(#dialog-content,.exchange-workspace-content){max-width:1120px}
.exchange-workspace .exchange-workspace-content{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.exchange-workspace .native-crypto-exchange,.exchange-workspace .usd-native-exchange{display:contents!important}
.exchange-mode-left{display:flex;flex-direction:column;gap:18px;min-width:0}
.exchange-mode-right{display:flex;flex-direction:column;gap:14px;min-width:0;width:100%;max-width:440px;justify-self:center}
:is(#details,.exchange-workspace) .exchange-mode-right .exchange-asset-card{min-height:180px;padding:16px}
:is(#details,.exchange-workspace) .exchange-mode-right .exchange-amount-row{min-height:78px}
:is(#details,.exchange-workspace) .exchange-mode-right .exchange-amount,:is(#details,.exchange-workspace) .exchange-mode-right .exchange-output{font-size:32px}
:is(#details,.exchange-workspace) .exchange-mode-right .exchange-primary{margin-top:12px;opacity:1;background:linear-gradient(135deg,#5fe2e2,#f05bb5);color:#06151e}
@container(min-width:760px){
 .exchange-workspace .exchange-workspace-content{grid-template-columns:minmax(250px,1fr) minmax(320px,420px);column-gap:36px;row-gap:16px;align-items:start}
 .exchange-workspace .native-fiat-access{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;padding-right:0!important;gap:10px}
 .exchange-workspace .native-fiat-access button{margin:0;text-align:left}
 .exchange-workspace .exchange-breadcrumb{grid-column:1;grid-row:2}
 .exchange-workspace .exchange-mode-left{grid-column:1;grid-row:3}
 .exchange-workspace .exchange-mode-right{grid-column:2;grid-row:1 / span 3;align-self:start}
}

:is(#details,.exchange-workspace):has(.native-crypto-exchange) :is(#dialog-content,.exchange-workspace-content){max-width:1120px}

:is(#details,.exchange-workspace) #fiat-swap .exchange-mode-right .exchange-asset-card{min-height:180px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-mode-right .exchange-amount,:is(#details,.exchange-workspace) #fiat-swap .exchange-mode-right .exchange-output{font-size:32px}
@container(max-width:759px){
 .exchange-workspace .exchange-workspace-content{display:flex;flex-direction:column}
 .exchange-workspace .exchange-mode-left{display:contents}
 .exchange-workspace .native-fiat-access{order:0}
 .exchange-workspace .exchange-breadcrumb{order:1}
 .exchange-workspace .exchange-mode-left>*{order:5}
 .exchange-workspace .exchange-mode-left>.exchange-entry-heading{order:3}
 .exchange-workspace .exchange-mode-left>.exchange-workspace-status,.exchange-workspace #pending-swaps{order:2}
 .exchange-workspace .exchange-mode-right{order:4;align-self:center}
}

/* Quiet, focused exchange: clear mode buttons and generous side-by-side cards. */
.exchange-workspace .exchange-breadcrumb,.exchange-workspace .exchange-entry-heading,.exchange-workspace #pending-swaps,.exchange-workspace .exchange-workspace-status,.exchange-workspace .exchange-wallet-caption{display:none!important}
.exchange-workspace .exchange-help{margin-top:14px}
.exchange-workspace .exchange-mode-right{max-width:none;width:100%;gap:18px}
.exchange-card-pair{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
:is(#details,.exchange-workspace) .exchange-card-pair .exchange-asset-card,:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair .exchange-asset-card{min-height:260px;padding:22px;border-radius:26px}
:is(#details,.exchange-workspace) .exchange-card-pair .exchange-flip-row{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:3}
:is(#details,.exchange-workspace) .exchange-card-pair .exchange-flip{transform:rotate(-90deg)}
:is(#details,.exchange-workspace) .exchange-mode-right>.exchange-primary{min-height:56px;width:100%;margin:0;opacity:1;background:linear-gradient(135deg,#5fe2e2,#f05bb5)}
:is(#details,.exchange-workspace) .exchange-footer>.exchange-entry-meta:nth-child(2){display:none}
:is(#details,.exchange-workspace) .native-fiat-access button{border:1px solid #416371;border-radius:16px;padding:18px 20px;min-height:64px;color:#c9e8ec;background:linear-gradient(130deg,#17313e,#101e2c);font-size:15px;font-weight:800;box-shadow:inset 0 1px #ffffff12;text-align:left}
:is(#details,.exchange-workspace) .native-fiat-access button[aria-pressed=true]{border-color:#76e0da;background:linear-gradient(130deg,#21545b,#223142);color:#eaffff;box-shadow:0 0 0 1px #7de6dd33,inset 0 1px #ffffff20}
@container(min-width:760px){
 .exchange-workspace .exchange-workspace-content{grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
 .exchange-workspace .native-fiat-access{grid-column:1;grid-row:1;gap:12px}
 .exchange-workspace .exchange-mode-right{grid-column:2;grid-row:1}
 .exchange-workspace .exchange-mode-left{grid-column:2;grid-row:2}
}
@container(max-width:759px){
 .exchange-workspace .exchange-mode-left{display:contents}
 .exchange-workspace .exchange-mode-right{order:1}
 .exchange-workspace .exchange-mode-left>*{order:2}
 .exchange-workspace .native-fiat-access{display:flex;gap:8px;padding:0!important}
 .exchange-workspace .native-fiat-access button{flex:1;font-size:12px;padding:12px;min-height:48px;margin:0;text-align:center}
}
@container(max-width:500px){
 :is(#details,.exchange-workspace) .exchange-card-pair{gap:12px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-asset-card,:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair .exchange-asset-card{padding:12px;min-height:240px;border-radius:18px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-amount-row{flex-direction:column-reverse;align-items:stretch;gap:12px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-coin-column{width:auto;flex-direction:row;align-self:flex-start;transform:none;gap:6px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-coin-art,:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair .exchange-coin-art,:is(#details,.exchange-workspace) .exchange-card-pair .exchange-dollar-emblem{width:38px;height:38px;margin:0;font-size:26px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-amount,:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair .exchange-amount,:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair .exchange-output{font-size:27px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-card-top{min-height:30px;flex-wrap:wrap;gap:6px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-toggle{padding:0 4px;gap:0;min-height:28px}
 :is(#details,.exchange-workspace) .exchange-card-pair .exchange-toggle button{min-height:28px;padding:0 6px;font-size:10px}
}

.swap-confirmed-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}.swap-confirmed-confetti i{position:absolute;left:var(--x);top:-20px;width:8px;height:14px;border-radius:2px;animation:swap-confirmed-fall 1.8s var(--delay) ease-in forwards}@keyframes swap-confirmed-fall{to{transform:translateY(105vh) rotate(630deg);opacity:0}}

.exchange-workspace .exchange-mode-left>.exchange-help{display:none}


.exchange-workspace .exchange-reviewing .native-fiat-access,.exchange-workspace .exchange-reviewing .exchange-card-pair,.exchange-workspace .exchange-reviewing .exchange-footer,.exchange-workspace .exchange-reviewing .exchange-mode-right>.exchange-primary{display:none!important}.exchange-workspace .exchange-reviewing .exchange-mode-right{grid-column:1 / -1;max-width:720px;margin:auto;width:100%}#swap-approval:empty{display:none}#swap-approval:not(:empty){padding:24px;border:1px solid #45626f;border-radius:24px;background:#13232c}#swap-approval dl{display:grid;grid-template-columns:1fr 1fr;gap:14px}#swap-approval dd{text-align:right;margin:0;font-weight:700}#swap-approval #sign-swap{width:100%;border:0;border-radius:16px;padding:18px;background:linear-gradient(135deg,#5fe2e2,#f05bb5);color:#06151e;font-weight:800}
/* Shared asset slots keep every exchange card aligned across routes. */
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-card-pair .exchange-asset-card{display:flex;flex-direction:column;gap:18px;min-height:290px;padding:24px}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-card-top{min-height:24px;align-items:center;margin:0}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-amount-row{display:flex;flex-direction:column-reverse;align-items:stretch;justify-content:space-between;gap:20px;min-height:200px;margin:0}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-coin-column{display:flex;flex-direction:row;align-items:center;align-self:flex-start;width:auto;gap:10px;transform:none;margin:0}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) :is(.exchange-coin-art,.exchange-dollar-emblem){width:56px;height:56px;margin:0;flex-shrink:0;font-size:38px}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-coin-symbol{font-size:16px;line-height:24px;margin:0;min-height:24px}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-amount-column{display:flex;flex-direction:column;gap:8px;min-width:0}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) :is(.exchange-amount,.exchange-output){display:block;width:100%;height:52px;min-height:52px;padding:0;margin:0;font-size:36px;line-height:52px;box-sizing:border-box;font-weight:700}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) :is(.exchange-asset-name,.exchange-asset-hint,.exchange-usd-value){margin:0;font-size:14px;line-height:21px;min-height:21px;font-weight:400}
:is(#details,.exchange-workspace) .native-fiat-access button{position:relative;display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:14px;text-align:center;white-space:nowrap;transition:border-color .15s,background .15s,transform .15s}
:is(#details,.exchange-workspace) .native-fiat-access button:hover{border-color:#87d5d8;transform:translateY(-1px)}
:is(#details,.exchange-workspace) .native-fiat-access button:focus-visible{outline:2px solid #d7ffff;outline-offset:4px}
:is(#details,.exchange-workspace) .native-fiat-access button[aria-pressed=true]{border-color:#86e4de;background:linear-gradient(135deg,#255661,#1a3444);box-shadow:inset 0 1px #ffffff24,0 4px 14px #0003}
@container(max-width:500px){
 :is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-card-pair .exchange-asset-card{padding:12px;min-height:250px;gap:14px}
 :is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-amount-row{min-height:174px;gap:14px}
 :is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) :is(.exchange-coin-art,.exchange-dollar-emblem){width:38px;height:38px;font-size:26px}
 :is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) :is(.exchange-amount,.exchange-output){font-size:27px;height:44px;min-height:44px;line-height:44px}
 :is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) :is(.exchange-asset-name,.exchange-asset-hint,.exchange-usd-value){font-size:12px;line-height:18px;min-height:18px}
}
/* Keep the direction control and amount type identical in both modes. */
:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair .exchange-flip-row{margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}
:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair :is(.exchange-amount,.exchange-output){font-size:36px}
:is(#details,.exchange-workspace) #crypto-swap .exchange-footer>.exchange-entry-meta:first-child{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:flex-start;gap:8px}
:is(#details,.exchange-workspace) #crypto-swap .exchange-footer>.exchange-entry-meta:first-child>label{width:174px;text-align:center;font-size:12px;color:#a9c0cc}
@container(max-width:500px){:is(#details,.exchange-workspace) #fiat-swap .exchange-card-pair :is(.exchange-amount,.exchange-output){font-size:27px}}
:is(#details,.exchange-workspace) #fiat-swap .exchange-footer>.exchange-entry-meta:first-child{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:flex-start;gap:8px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-footer>.exchange-entry-meta:first-child>span{width:174px;text-align:center;font-size:12px;color:#a9c0cc}
:is(#details,.exchange-workspace) #fiat-swap .exchange-footer>.exchange-entry-meta:first-child>.exchange-toggle{min-width:174px;box-sizing:border-box;justify-content:center}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-help{border:0;background:none;padding:8px 12px;color:#a9e8e5;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;font-size:12px;min-height:36px;width:174px;text-align:center}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-help:focus-visible{outline:2px solid #91e6e0;outline-offset:2px;border-radius:8px}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-explanation{order:-1;width:min(100%,420px);box-sizing:border-box;padding:16px;margin:4px 0 0;border:1px solid #416371;border-radius:14px;background:#142630;color:#d0e1e8;font-size:14px;line-height:1.6;text-align:left}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-explanation[hidden]{display:none}
/* Equal fixed control slots prevent Review from moving between routes. */
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-footer>.exchange-entry-meta:first-child{position:relative;height:64px;min-height:64px;box-sizing:border-box;gap:2px;justify-content:center;padding:0;margin:0}
:is(#details,.exchange-workspace) :is(#crypto-swap,#fiat-swap) .exchange-footer>.exchange-entry-meta:first-child>.exchange-toggle{height:40px;min-height:40px;margin:0;box-sizing:border-box}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-help{height:22px;min-height:22px;padding:0 8px;line-height:22px}
:is(#details,.exchange-workspace) #fiat-swap .exchange-footer>.exchange-entry-meta:first-child>span{height:22px;min-height:22px;line-height:22px}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-explanation{position:absolute;top:100%;right:0;z-index:8;width:min(420px,100%);box-shadow:0 12px 28px #0008}
:is(#details,.exchange-workspace) .native-fiat-access button{cursor:pointer;border:1px solid #688895;border-bottom:4px solid #0b1822;background:linear-gradient(180deg,#345264 0%,#203644 52%,#172936 100%);box-shadow:inset 0 1px 0 #d7faff55,0 5px 10px #0005;color:#edffff;font-size:16px;font-weight:800;min-height:64px;border-radius:12px;letter-spacing:.2px;transform:none}
:is(#details,.exchange-workspace) .native-fiat-access button[aria-pressed=true]{background:linear-gradient(180deg,#3e7d86,#28525e);border-color:#8ce8e3;border-bottom:4px solid #12323c;box-shadow:inset 0 1px #d7ffff66,0 5px 12px #0006;color:#fff}
:is(#details,.exchange-workspace) .native-fiat-access button:hover{filter:brightness(1.12);transform:translateY(-1px)}
:is(#details,.exchange-workspace) .native-fiat-access button:active{transform:translateY(2px);box-shadow:inset 0 1px 5px #0005;border-bottom-width:2px}
@container(max-width:759px){:is(#details,.exchange-workspace) .native-fiat-access button{font-size:13px;min-height:56px}}
:is(#details,.exchange-workspace) #crypto-swap .exchange-slippage-help{box-sizing:border-box}
/* Purchase conveniences stay quiet until needed. */
.exchange-workspace .exchange-extras{grid-column:1;grid-row:2;display:grid;gap:10px;align-self:start;min-width:0}
.exchange-extras details,.exchange-purchase-options{border:1px solid #415e6d;border-radius:16px;background:linear-gradient(145deg,#20323e99,#13212c66);padding:14px;min-width:0}
.exchange-extras summary,.exchange-purchase-options summary{cursor:pointer;font-size:13px;font-weight:700;color:#c1f1ef;min-height:24px}
.exchange-extras p,.exchange-extras small,.exchange-purchase-options p,.exchange-purchase-options small{font-size:12px;line-height:1.6;color:#aec3cf}
.exchange-extras :is(input,select),.exchange-purchase-options select{box-sizing:border-box;width:100%;min-width:0;background:#0d1c28;border:1px solid #496775;color:#ecffff;padding:10px;border-radius:10px;margin:5px 0;font-size:12px}
.exchange-extras button,.exchange-purchase-options button{border:1px solid #557882;background:#21434e;color:#d9ffff;min-height:38px;padding:8px 12px;border-radius:10px;font-size:12px;margin:5px 4px 0 0;cursor:pointer}
.exchange-extras .exchange-saved-alert{display:grid;gap:4px;border-top:1px solid #49616c;padding:8px 0;font-size:12px}
:is(#details,.exchange-workspace) .exchange-balance-line,:is(#details,.exchange-workspace) .exchange-quick-amounts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-height:28px;color:#b8d4de;font-size:12px;margin-top:auto}
:is(#details,.exchange-workspace) :is(.exchange-balance-line,.exchange-quick-amounts) button{margin:0;border:1px solid #73959d77;background:#10212c88;border-radius:9px;min-height:28px;padding:4px 9px;color:#c6fffa;font-size:12px;font-weight:700;cursor:pointer}
:is(#details,.exchange-workspace) .exchange-balance-line button{margin-left:auto}
:is(#details,.exchange-workspace) button:disabled{cursor:default}
:is(#details,.exchange-workspace) .exchange-quick-amounts small{flex-basis:100%;font-size:11px}
:is(#details,.exchange-workspace) .exchange-impact{color:#b7d2de;font-size:12px;line-height:1.6;margin:0}
:is(#details,.exchange-workspace) .exchange-impact[data-tone=warning]{color:#ffcf9b;border:1px solid #bb865a66;padding:12px;border-radius:12px}
:is(#details,.exchange-workspace) .exchange-quote-summary{border:1px solid #527a87;border-radius:24px;background:linear-gradient(145deg,#233e4d,#142530);padding:24px;display:grid;gap:12px;margin:0;min-width:0}
:is(#details,.exchange-workspace) .exchange-quote-summary h3{font-size:24px;margin:0 0 8px;color:#f2ffff}
:is(#details,.exchange-workspace) .exchange-detail-line{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,1.5fr);gap:20px;padding:8px 0;border-bottom:1px solid #8bb1ba22;font-size:13px;align-items:start}
:is(#details,.exchange-workspace) .exchange-detail-line strong{text-align:right;overflow-wrap:anywhere;color:#e9ffff}
:is(#details,.exchange-workspace) .exchange-quote-clock{font-variant-numeric:tabular-nums;color:#b7ffec;font-size:13px}
:is(#details,.exchange-workspace) .exchange-usd-reviewing .exchange-card-pair,:is(#details,.exchange-workspace) .exchange-usd-reviewing .exchange-footer{display:none}
.exchange-provider-offer{display:grid;gap:7px;padding:14px;border:1px solid #5a818a66;border-radius:12px;margin-top:12px;font-size:13px}
@container(max-width:759px){.exchange-workspace .exchange-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));order:3}.exchange-extras details{padding:10px}.exchange-workspace .exchange-card-pair .exchange-asset-card{min-height:330px}}
@container(max-width:500px){:is(#details,.exchange-workspace) .exchange-detail-line{grid-template-columns:minmax(0,1fr);gap:4px}:is(#details,.exchange-workspace) .exchange-detail-line strong{text-align:left}:is(#details,.exchange-workspace) .exchange-quote-summary{padding:16px}}
@container(min-width:760px){.exchange-workspace .exchange-extras{grid-row:1;margin-top:154px}}
@container(max-width:759px){.exchange-workspace .exchange-extras{margin-top:0}}
:is(#details,.exchange-workspace) .exchange-quote-summary details{border:1px solid #70929b55;padding:12px 14px;border-radius:12px;font-size:13px}
:is(#details,.exchange-workspace) .exchange-quote-summary summary{cursor:pointer;color:#b7eeeb;font-weight:700}
@container(max-width:500px){:is(#details,.exchange-workspace) .exchange-quick-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}:is(#details,.exchange-workspace) .exchange-quick-amounts button{min-width:0;padding:4px;font-size:11px}:is(#details,.exchange-workspace) .exchange-quick-amounts small{grid-column:1 / -1}}
/* Comfort keeps the same exchange, with clearer cues and easier controls. */
:is(#details,.exchange-workspace) .native-fiat-access .exchange-experience-switch{display:flex;gap:4px;padding:4px;border:1px solid #527482;border-radius:14px;background:#10212c;box-sizing:border-box;width:100%;position:relative}
:is(#details,.exchange-workspace) .native-fiat-access .exchange-experience-switch button{flex:1;min-width:0;min-height:36px;height:36px;padding:6px 10px;margin:0;border:0;border-radius:9px;box-shadow:none;background:transparent;color:#aac7d1;font-size:12px;letter-spacing:0;transform:none;filter:none}
:is(#details,.exchange-workspace) .native-fiat-access .exchange-experience-switch button[aria-pressed=true]{background:linear-gradient(135deg,#32656c,#28434e);color:#efffff;box-shadow:inset 0 1px #cafff633}
.exchange-view-error:empty{display:none}.exchange-view-error{font-size:11px;color:#ffd0e1;position:absolute;top:100%;left:0;background:#172b38;padding:6px;border-radius:8px;z-index:4}
.exchange-comfort-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 16px;border:1px solid #527b86;border-radius:18px;background:linear-gradient(120deg,#1e464f99,#26344388)}
.exchange-comfort-steps>span{display:flex;align-items:center;gap:8px;color:#dcffff;font-size:13px;font-weight:700}
.exchange-comfort-steps b{width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:#32646a;color:#c6fff2;font-size:12px;flex-shrink:0}
.exchange-comfort-steps small{grid-column:1 / -1;color:#b4cfd9;font-size:12px;line-height:18px}
.exchange-comfort-steps[hidden]{display:none}
:is(#details,.exchange-workspace) .exchange-comfort :is(#crypto-swap,#fiat-swap) .exchange-card-pair .exchange-card-top{font-size:13px;min-height:28px}
:is(#details,.exchange-workspace) .exchange-comfort :is(#crypto-swap,#fiat-swap) :is(.exchange-asset-name,.exchange-asset-hint,.exchange-usd-value){font-size:15px;line-height:23px}
:is(#details,.exchange-workspace) .exchange-comfort :is(.exchange-quick-amounts,.exchange-balance-line) button{min-height:40px;padding:8px 12px;font-size:13px}
:is(#details,.exchange-workspace) .exchange-comfort .exchange-toggle button{min-height:40px;min-width:48px}
:is(#details,.exchange-workspace) .exchange-comfort .exchange-slippage-help{color:#c1fff4;font-size:13px}
@container(min-width:760px){.exchange-workspace .exchange-extras{margin-top:154px}}
@container(max-width:759px){:is(#details,.exchange-workspace) .native-fiat-access{flex-wrap:wrap}:is(#details,.exchange-workspace) .native-fiat-access .exchange-experience-switch{flex-basis:100%;width:100%;max-width:230px}.exchange-workspace .exchange-extras{margin-top:0}}
@container(max-width:500px){.exchange-comfort-steps{padding:12px;gap:8px}.exchange-comfort-steps>span{font-size:12px;gap:5px}:is(#details,.exchange-workspace) .exchange-comfort :is(#crypto-swap,#fiat-swap) :is(.exchange-asset-name,.exchange-asset-hint,.exchange-usd-value){font-size:13px;line-height:20px}:is(#details,.exchange-workspace) .exchange-comfort :is(#crypto-swap,#fiat-swap) :is(.exchange-amount,.exchange-output){font-size:30px}}
.exchange-comfort-steps>.exchange-comfort-step{display:flex;align-items:center;gap:8px;color:#dcffff;font-size:13px;font-weight:700;background:transparent;border:0;border-radius:10px;padding:4px;margin:0;min-width:0;cursor:pointer;min-height:32px;text-align:left}
.exchange-comfort-steps>.exchange-comfort-step:hover,.exchange-comfort-steps>.exchange-comfort-step[aria-expanded=true]{background:#41727b55}
.exchange-comfort-steps>.exchange-comfort-step:focus-visible{outline:2px solid #a0f0e6;outline-offset:2px}
.exchange-comfort-steps{position:relative}
.exchange-comfort-help{position:absolute;top:100%;left:0;right:0;z-index:9;padding:16px;border:1px solid #688c96;border-radius:16px;background:#193440;color:#d4e9ef;box-shadow:0 12px 24px #0006;font-size:14px;line-height:1.6;margin:8px 0 0}
.exchange-comfort-help[hidden]{display:none}
.exchange-comfort #swap-approval dl{font-size:15px;line-height:1.5}.exchange-comfort #swap-approval dd{overflow-wrap:anywhere}
@container(max-width:500px){.exchange-comfort-steps>.exchange-comfort-step{font-size:11px;gap:4px}}

/* Swap inherits the wallet view; only route actions occupy the left rail. */


/* A compact review action beside its price protection controls. */
:is(#details,.exchange-workspace) .exchange-footer{display:grid;grid-template-columns:minmax(140px,220px) minmax(160px,1fr);align-items:center;gap:10px 18px}
:is(#details,.exchange-workspace) .exchange-footer>.exchange-primary{grid-column:1;grid-row:1;width:100%;max-width:220px;min-height:50px;padding:12px 18px;font-size:14px;align-self:center;justify-self:start}
:is(#details,.exchange-workspace) .exchange-footer>.exchange-entry-meta:first-child{grid-column:2;grid-row:1;min-width:0}
:is(#details,.exchange-workspace) .exchange-footer>:not(.exchange-primary):not(.exchange-entry-meta:first-child){grid-column:1 / -1}
@media(max-width:380px){:is(#details,.exchange-workspace) .exchange-footer{grid-template-columns:minmax(110px,1fr) minmax(140px,1fr);gap:8px}:is(#details,.exchange-workspace) .exchange-footer>.exchange-primary{padding:10px;font-size:13px}}
/* Center the exchange surface and align review with the full protection stack. */
:is(#details,.exchange-workspace).exchange-workspace:has(.native-crypto-exchange){display:flex;align-items:center;justify-content:center;min-height:calc(100dvh - 110px);padding:24px 0;box-sizing:border-box}
:is(#details,.exchange-workspace) .exchange-footer{grid-template-columns:minmax(0,1fr) 184px;gap:10px 12px}
:is(#details,.exchange-workspace) .exchange-footer>.exchange-primary{max-width:none;width:100%;height:64px;min-height:64px;align-self:stretch;border-radius:18px;padding:12px 18px}
:is(#details,.exchange-workspace) .exchange-footer>.exchange-entry-meta:first-child{height:64px;min-height:64px;align-self:stretch;justify-content:center}
@media(max-width:500px){:is(#details,.exchange-workspace) .exchange-footer{grid-template-columns:minmax(0,1fr) 148px;gap:8px}:is(#details,.exchange-workspace) .exchange-footer>.exchange-primary{font-size:13px;padding:10px}:is(#details,.exchange-workspace).exchange-workspace:has(.native-crypto-exchange){min-height:calc(100dvh - 150px);padding:20px 0}}
:is(#details,.exchange-workspace) .exchange-footer>.exchange-primary{margin:0;box-sizing:border-box}


/* Keep Swap content beneath the shared identity and page header. */
.exchange-page .exchange-workspace:has(.native-crypto-exchange){min-height:0!important;padding:0 0 16px!important;align-items:flex-start!important}
.exchange-page .exchange-mode-right{gap:12px}


.swap-practice{margin:24px 0}.swap-practice [data-practice-panel]{position:relative;overflow:hidden;border:1px solid #4b7279;border-radius:20px;padding:24px;background:#102631}.swap-practice label{display:grid;gap:12px}.swap-practice input{font-size:28px;width:100%;box-sizing:border-box;padding:14px;border:1px solid #4b7279;border-radius:10px;color:#effaff;background:#091b24}.swap-practice dl{display:grid;grid-template-columns:1fr 1fr;gap:14px}.swap-practice dd{margin:0;text-align:right}.swap-practice p{line-height:1.5}.practice-dancer{position:absolute;bottom:60px;left:0;font-size:76px;pointer-events:none;animation:dance-trip 5s linear both}.practice-dancer span{display:block;animation:robot-move .4s ease-in-out infinite alternate}.dance-0 span{animation:moon-move .45s linear infinite alternate}.dance-1 span{animation:worm-move .6s ease-in-out infinite}.dance-3 span{animation:disco-move .4s ease-in-out infinite alternate}@keyframes dance-trip{0%{transform:translateX(-110px)}20%{transform:translateX(80px)}75%{transform:translateX(180px)}100%{transform:translateX(900px)}}@keyframes robot-move{from{transform:rotate(-18deg) translateY(0)}to{transform:rotate(18deg) translateY(-16px)}}@keyframes moon-move{from{transform:skewX(-14deg) translateX(10px)}to{transform:skewX(8deg) translateX(-10px)}}@keyframes worm-move{0%,100%{transform:rotate(80deg) scaleY(.65) translateY(0)}50%{transform:rotate(100deg) scaleY(1.15) translateY(-12px)}}@keyframes disco-move{from{transform:rotate(-25deg) scale(1)}to{transform:rotate(25deg) scale(1.12)}}@media(prefers-reduced-motion:reduce){.practice-dancer{display:none}}

.swap-practice{width:100%;grid-column:1/-1}.swap-practice>[data-practice-open]{padding:12px 20px!important;border:1px solid #5bc7bf!important;border-radius:12px!important;background:#15333d!important;color:#bdf8ee!important}
.swap-practice [data-practice-panel]{max-width:700px;margin:20px auto;padding:32px!important;border-radius:28px!important;border:1px solid #50747f!important;background:linear-gradient(145deg,#17333e,#101e2d 70%)!important;box-shadow:0 24px 60px #0006;box-sizing:border-box}
.practice-review-heading{text-align:center}.practice-badge{font-size:10px;letter-spacing:1.5px;color:#eab6d9;border:1px solid #73516e;padding:6px 12px;border-radius:30px}.practice-review-heading h3{font-size:28px;margin:18px 0 6px}.practice-review-heading p{color:#a9c6d0;margin:0 0 24px}
.practice-amounts{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:8px}.practice-token{display:flex;flex-direction:column;align-items:center;padding:22px 12px;border-radius:20px;border:1px solid #487087;min-width:0;background:linear-gradient(140deg,#254273,#132947)}.practice-token-asp{background:linear-gradient(140deg,#205052,#102f35);border-color:#409990}.practice-token img{width:60px;height:60px;object-fit:contain;margin-bottom:12px}.practice-token small{font-size:10px;letter-spacing:1.5px;color:#b2d4df}.practice-token strong{font-size:30px;margin:10px 0;overflow-wrap:anywhere}.practice-token em{font-size:16px;font-style:normal}.practice-token span{color:#aac7cf;font-size:12px}.practice-arrow{color:#f294ce;text-align:center;font-size:25px}
.swap-practice dl.practice-fees{display:block!important;margin:24px 0 0;padding:8px 18px;background:#07182180;border:1px solid #34525c;border-radius:16px}.practice-fees>div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid #304653}.practice-fees>div:last-child{border-bottom:0}.practice-fees dt{color:#aac4ce;font-size:13px}.practice-fees dd{font-size:13px;font-weight:600}.practice-fees .practice-total dt,.practice-fees .practice-total dd{font-size:16px;color:#d4fff5;font-weight:700}.practice-disclaimer{font-size:12px;color:#a7c1cc;text-align:center}.practice-review-actions{display:flex;flex-direction:column;gap:10px}.practice-review-actions button{width:100%}
.practice-dancer{width:120px;height:180px;bottom:95px;font-size:initial;z-index:5;filter:drop-shadow(0 8px 8px #0008)}.dance-robot{width:120px;height:180px;position:relative;animation:body-bounce .5s ease-in-out infinite alternate}.dance-robot i{display:block;position:absolute;box-sizing:border-box;background:linear-gradient(120deg,#d5e7ec,#5595a5);border:2px solid #123642;border-radius:10px}.robot-head{left:36px;top:0;width:48px;height:38px}.robot-head>b{position:absolute;top:12px;width:8px;height:8px;border-radius:50%;background:#32ffe3;box-shadow:0 0 7px #32ffe3}.robot-head>b:first-child{left:8px}.robot-head>b:last-child{right:8px}.robot-torso{top:42px;left:32px;width:56px;height:62px}.robot-torso>b{display:block;text-align:center;color:#f38ac9;font:700 36px system-ui}.robot-arm{top:45px;width:17px;height:40px;transform-origin:50% 7px}.robot-arm-left{left:12px;animation:limb-swing .45s ease-in-out infinite alternate}.robot-arm-right{right:12px;animation:limb-swing .45s ease-in-out infinite alternate-reverse}.robot-arm>b{position:absolute;width:15px;height:35px;top:30px;left:-1px;background:#80c3cb;border:2px solid #163c49;border-radius:9px;transform:rotate(-25deg);transform-origin:top}.robot-leg{top:103px;width:21px;height:42px;transform-origin:50% 5px}.robot-leg-left{left:34px;animation:leg-step .45s ease-in-out infinite alternate}.robot-leg-right{right:34px;animation:leg-step .45s ease-in-out infinite alternate-reverse}.robot-leg>b{position:absolute;top:32px;width:24px;height:32px;background:#80c3cb;border:2px solid #163c49;border-radius:8px;transform-origin:top}.dance-0 .dance-robot{animation:moon-body .5s ease-in-out infinite alternate}.dance-1 .dance-robot{animation:full-worm .7s ease-in-out infinite}.dance-1 .robot-leg{animation:limb-swing .35s infinite alternate}.dance-3 .robot-arm-right{animation:disco-arm .4s infinite alternate}.dance-2 .dance-robot{animation:body-bounce .45s steps(2) infinite alternate}
@keyframes limb-swing{from{transform:rotate(-65deg)}to{transform:rotate(65deg)}}@keyframes leg-step{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}@keyframes body-bounce{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-12px) rotate(5deg)}}@keyframes moon-body{from{transform:skewX(-8deg) translateX(12px)}to{transform:skewX(-8deg) translateX(-12px)}}@keyframes full-worm{0%,100%{transform:translateY(25px) rotate(85deg) scaleY(.8)}50%{transform:translateY(8px) rotate(100deg) scaleY(1.1)}}@keyframes disco-arm{from{transform:rotate(-25deg)}to{transform:rotate(-155deg)}}@media(max-width:550px){.swap-practice [data-practice-panel]{padding:18px!important}.practice-token strong{font-size:23px}.practice-token img{width:45px;height:45px}.practice-fees dt,.practice-fees dd{font-size:12px}}

.practice-token-asp img{transform:scale(1.45)}.practice-confirmed{margin:24px 0;padding:18px;text-align:center;border:1px solid #4baa92;border-radius:16px;background:#163e35}.practice-confirmed h3{color:#a5f3d5;margin:0 0 10px}.practice-confirmed p{font-size:12px;color:#b4d8d0}

.practice-received{max-width:310px;margin:24px auto}.practice-received .practice-token{padding:26px}.practice-received .practice-token img{width:86px;height:86px}.practice-token img{animation:none!important}.practice-dancer.kenney-celebration{width:230px;height:260px;bottom:95px;animation:kenney-crossing 6.5s linear both}.kenney-celebration canvas{display:block;width:230px!important;height:260px!important}@keyframes kenney-crossing{0%{left:-240px}20%{left:calc(50% - 115px)}78%{left:calc(50% - 115px)}100%{left:110%}}

.swap-pumpkin-celebration{position:fixed;z-index:10000;left:-440px;bottom:7vh;width:min(440px,78vw);pointer-events:none}.swap-pumpkin-celebration video{display:block;width:100%;height:auto;background:transparent}.swap-pumpkin-celebration.playing{animation:pumpkin-pass 6s linear both}@keyframes pumpkin-pass{0%{left:-440px}22%{left:calc(50vw - 220px)}72%{left:calc(50vw - 220px)}100%{left:110vw}}@media(max-width:550px){@keyframes pumpkin-pass{0%{left:-80vw}22%,72%{left:11vw}100%{left:110vw}}}@media(prefers-reduced-motion:reduce){.swap-pumpkin-celebration{display:none}}

/* Shared owner recovery uses the existing wallet form language. */
.shared-profile-recovery{max-width:850px;margin:18px 0}.shared-profile-recovery h2{font-size:24px}.shared-profile-recovery p{line-height:1.6}.shared-profile-recovery label{display:grid;gap:10px;margin:16px 0;color:#c6dce4}.shared-profile-recovery textarea{display:block;width:100%;box-sizing:border-box;min-height:100px;resize:vertical;padding:14px;border:1px solid #5c8792;border-radius:12px;background:#081923;color:#eff7fb;font:inherit;font-size:16px}.shared-profile-recovery button{display:block;min-height:48px;margin:12px 0;padding:12px 18px;border:1px solid #65e5df;border-radius:12px;background:linear-gradient(130deg,#143b43,#152a39);color:#9ceee7;font:inherit;font-weight:700;cursor:pointer}.shared-profile-recovery button:disabled{opacity:.5;cursor:wait}.shared-profile-recovery [data-body]>div>section{margin-top:18px;padding:16px;border:1px solid #416571;border-radius:16px;background:#0b202bd9}.shared-profile-recovery .shared-recovery-words{padding:18px;border:1px solid #65e5df;border-radius:12px;font-size:20px;line-height:1.8;background:#0a1d28}.shared-profile-recovery [role=status]{color:#b6d7df}