/* generated by tools/bundle-css.py from: dash-base, cx-base, perp */
/* style.css scoped under .dxp, for the Portfolio and Account pages. */
/* PipTradeDex, brand and terminal. Committed dark visual world (trading terminal). */
.dxp *{box-sizing:border-box;margin:0;padding:0}
.dxp-host{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;max-width:100%;position:relative}
/* ambient background: fine grid + two glow blobs */
.dxp a{color:inherit;text-decoration:none}
.dxp .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.dxp .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.dxp header.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:rgba(8,10,15,.66);border-bottom:1px solid var(--line)}
.dxp .nav .wrap{display:flex;align-items:center;gap:14px;height:64px}
.dxp .brand{display:flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:700;font-size:18px;letter-spacing:-.02em}
.dxp .nav nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.dxp .nav nav a{color:var(--mut);font-size:14px;font-weight:500;transition:color .18s}
.dxp .nav nav a:hover{color:var(--ink)}
.dxp .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.dxp .btn-ghost{background:var(--panel);border-color:var(--line2);color:var(--ink)}
.dxp .btn-ghost:hover{border-color:var(--mint);color:var(--mint)}
.dxp .btn-tg{background:linear-gradient(180deg,#2aa7e6,#1d8fce);color:#fff}
.dxp .btn-tg:hover{transform:translateY(-1px)}

/* ---------- hero ---------- */
.dxp h1{font-family:var(--dsp);font-weight:700;font-size:clamp(38px,5.4vw,60px);line-height:1.02;letter-spacing:-.03em;
  text-wrap:balance;margin-bottom:20px}
.dxp h1 .g{background:linear-gradient(96deg,var(--mint) 6%,#ffe2ad 46%,var(--iris) 98%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- section shell ---------- */
.dxp section{padding:64px 0;position:relative}
.dxp h2{font-family:var(--dsp);font-weight:700;font-size:clamp(27px,3.4vw,38px);letter-spacing:-.025em;text-wrap:balance}

/* ---------- feature cards ---------- */
.dxp .card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);
  padding:26px 22px;transition:.2s;position:relative;overflow:hidden}
.dxp .card:hover{border-color:var(--line2);transform:translateY(-3px)}
.dxp .card h3{font-family:var(--dsp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.dxp .card p{color:var(--mut);font-size:14px}

/* ---------- how it works ---------- */
.dxp .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.dxp .step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:relative}
.dxp .step .n{counter-increment:s;font-family:var(--mono);color:var(--iris);font-size:13px;font-weight:600;letter-spacing:.1em}
.dxp .step .n::before{content:"0" counter(s)}
.dxp .step .spot{height:96px;margin:14px 0 16px;display:flex;align-items:center;justify-content:center}
.dxp .step h3{font-family:var(--dsp);font-weight:600;font-size:16px;margin-bottom:7px}
.dxp .step p{color:var(--mut);font-size:14px}

/* ---------- privacy band ---------- */

/* ---------- footer ---------- */
.dxp footer{border-top:1px solid var(--line);padding:44px 0;margin-top:36px;color:var(--dim);font-size:13.5px}
.dxp footer .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.dxp footer nav{margin-left:auto;display:flex;gap:22px}
.dxp footer a{color:var(--mut)}.dxp footer a:hover{color:var(--mint)}

/* ---------- reveal (fail-safe: visible by default) ---------- */
.dxp .rv{opacity:1;transform:none}
.dxp .js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.dxp .js .rv.in{opacity:1;transform:none}

/* ================= TERMINAL ================= */
.dxp .trade{min-width:0}
.dxp .search{margin:12px;position:relative}
.dxp .search input{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;color:var(--ink);
  font-family:var(--body);font-size:14px;padding:10px 12px 10px 36px;outline:none}
.dxp .search input:focus{border-color:var(--mint)}
.dxp .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
.dxp .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--dsp);font-weight:700;font-size:14px;color:#04150d;flex:none}

.dxp .trade{display:flex;flex-direction:column;gap:18px}
.dxp .leg label{color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:block}
.dxp .amt{margin-top:16px}
.dxp .amt input{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;color:var(--ink);
  font-family:var(--mono);font-size:22px;font-weight:500;padding:14px 16px;outline:none}
.dxp .amt input:focus{border-color:var(--mint)}

.dxp .quote{margin-top:18px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px;min-height:70px}
.dxp .toggle{width:46px;height:26px;border-radius:100px;background:var(--panel2);border:1px solid var(--line2);
  position:relative;cursor:pointer;flex:none;transition:.2s}
.dxp .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--mut);transition:.2s}
.dxp .toggle.on{background:var(--iris);border-color:var(--iris)}
.dxp .toggle.on::after{left:22px;background:#fff}

.dxp .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:60px 20px;color:var(--mut)}
.dxp .empty svg{margin-bottom:20px}
.dxp .empty h3{font-family:var(--dsp);color:var(--ink);font-weight:600;font-size:18px;margin-bottom:6px}

/* premium modal */
.dxp .modal{position:fixed;inset:0;z-index:60;background:rgba(4,6,10,.66);backdrop-filter:blur(10px) saturate(1.1);
  display:none;align-items:flex-start;justify-content:center;padding:8vh 20px;opacity:0;transition:opacity .26s ease}
.dxp .modal.open{display:flex;opacity:1}
.dxp .mbox{position:relative;width:100%;max-width:460px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset;
  animation:mpop .44s cubic-bezier(.22,1.2,.36,1)}
.dxp .mbox::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--mint) 30%,var(--iris) 70%,transparent);opacity:.85}
@keyframes mpop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* ================= DASHBOARD ================= */
.dxp .dash{max-width:940px;margin:0 auto;padding:32px 22px 60px}
.dxp .ptd-spin{width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--mint);border-radius:50%;display:inline-block;animation:ptdspin .8s linear infinite}
@keyframes ptdspin{to{transform:rotate(360deg)}}

/* ===== deposit panel + live tracker (terminal) ===== */
.dxp .dep{display:flex;flex-direction:column}
.dxp .ts{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:var(--dim);flex:none;width:54px;text-align:center}
.dxp .ts .td{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);background:var(--panel);transition:.3s}
.dxp .ts.on{color:var(--mint)}.dxp .ts.on .td{border-color:var(--mint);background:var(--mint);box-shadow:0 0 0 3px var(--mintdim)}
.dxp .tl{flex:1;height:2px;background:var(--line2);margin:5px -8px 0;transition:.3s}
.dxp .tl.on{background:var(--mint)}

/* ===== balance chip (terminal) ===== */

/* ===== wallet action buttons + modal ===== */

/* ===== landing terminal preview ===== */

/* ===== trading chart ===== */
.dxp .chart{margin:2px 0 14px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.dxp .chart canvas{width:100%;height:140px;display:block}

.dxp .btn:disabled,.dxp .btn[disabled]{opacity:.55;cursor:not-allowed}

/* ===== swap progress card (funded swap, not a bridge deposit) ===== */

/* ===== inline recipient (non-custodied destination chains) ===== */

/* ===== activity rows (dashboard) ===== */

/* ===== exchange dashboard (mobile-first) ===== */
.dxp .mkt{display:flex;flex-direction:column;gap:2px}
.dxp .av{position:relative;overflow:hidden}
.dxp .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== portfolio donut ===== */
.dxp .pf{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
@media(min-width:640px){.dxp .pf{grid-template-columns:220px minmax(0,1fr);align-items:center}}

/* ===== token detail ===== */

/* premium toast */
.dxp .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(170%) scale(.96);z-index:90;
  display:flex;align-items:center;gap:11px;
  background:rgba(20,25,38,.85);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line2);border-radius:14px;padding:13px 19px 13px 16px;font-size:14px;font-weight:500;color:var(--ink);
  box-shadow:0 20px 54px -16px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03) inset;
  transition:transform .44s cubic-bezier(.22,1.2,.36,1),opacity .3s;opacity:0;max-width:90vw;pointer-events:none}
.dxp .toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--mint);box-shadow:0 0 0 4px var(--mintdim)}
.dxp .toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.dxp .toast.err{border-color:rgba(255,93,115,.45)}
.dxp .toast.err::before{background:var(--down);box-shadow:0 0 0 4px rgba(255,93,115,.18)}

@media(max-width:900px){.dxp .steps{grid-template-columns:1fr}          /* no long inline Universe on mobile; pick via the modal */
  .dxp .nav nav a.hide-sm{display:none}
  .dxp section{padding:48px 0}
}
@media(max-width:560px){
  .dxp-host{font-size:14px}
  .dxp .wrap{padding:0 16px}
  .dxp .nav .wrap{height:58px;gap:8px}
  .dxp .brand{font-size:16px;gap:8px}
  .dxp .nav nav{gap:8px}        /* keep only Log in in the header; hero has the CTA */
  .dxp .btn{padding:9px 13px;font-size:13px}
  .dxp .btn-tg svg{display:none}
  .dxp h1{font-size:34px}               /* let grid children shrink so nothing overflows */
  .dxp .card{padding:22px 18px}
  .dxp .amt input{font-size:19px;padding:13px 14px}
  .dxp footer .wrap{flex-direction:column;align-items:flex-start;gap:14px}.dxp footer nav{margin-left:0}
  /* mobile modals become a constrained bottom sheet (no giant over-length list) */
  .dxp .modal{padding:0;align-items:flex-end}
  .dxp .mbox{max-width:100%;max-height:84vh;display:flex;flex-direction:column;border-radius:20px 20px 0 0;animation:msheet .4s cubic-bezier(.22,1.1,.36,1)}
  .dxp .mbox .search{flex:none}
  .dxp .dash{padding:22px 16px 50px}
}
@keyframes msheet{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.dxp *{animation:none!important;transition:none!important}}
.dxp .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dxp :is(button,a,[role=button],[tabindex],input,select,textarea,summary):focus-visible{outline:2px solid var(--mint,#f5a623);outline-offset:2px}
/* Portfolio, Activity and Account switch, shown above the framed workspace on phones */


/* cx.css scoped under .dxp, for the Stocks and Perps pages. */
/* cx.css, the "Prism" cockpit component system.
 *
 * EXTRACTED VERBATIM from the inline \3c style> in app.html so /stocks can use the real
 * components instead of a lookalike. app.html still carries its own inline copy: it was
 * left alone because moving the flagship terminal styles into an external file can flash
 * unstyled content on first paint, and that is the operator call to make, not a side
 * effect of building another page.
 *
 * 🚨 SO THIS IS DUPLICATED. A change to a cx-* rule must be made in BOTH app.html and
 * here until the inline block is removed.
 */
/* ===== PipTradeDex terminal, "Prism" cockpit v2, scoped (cx-*), does not touch style.css ===== */
.dxp{
  --cx-bg:#06080e; --cx-bg2:#080b12;
  --cx-srf:rgba(18,23,33,.66); --cx-srf2:rgba(24,30,42,.82);
  --cx-glass:linear-gradient(180deg,rgba(22,28,40,.72),rgba(11,15,22,.6));
  --cx-line:rgba(255,255,255,.07); --cx-line2:rgba(255,255,255,.13);
  --cx-ink:#eaf0f7; --cx-mut:#8b95a6; --cx-dim:#7a8597;
  --cx-mint:#f5a623; --cx-mint2:#d98c0c; --cx-iris:#7c8cff; --cx-viol:#c9a7ff; --cx-down:#ff5d73; --cx-amber:#f5b544;
  --cx-holo:linear-gradient(100deg,#f5a623,#7c8cff 52%,#c9a7ff);
  --cx-holo3:linear-gradient(100deg,#f5a623,#7c8cff 46%,#f5b544);
  --cx-glow-mint:0 0 0 1px rgba(245,166,35,.2),0 14px 34px -14px rgba(245,166,35,.5);
  --cx-dsp:'Sora',system-ui,sans-serif; --cx-mono:'JetBrains Mono',monospace;
  --sab:env(safe-area-inset-bottom,0px);
}
.dxp-host{background:var(--cx-bg);color:var(--cx-ink);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden}
.dxp body.cxb::before,.dxp body.cxb::after{display:none!important} /* drop style.css ambient; use our own */
.dxp .cxb input{font-size:16px!important} /* iOS: no auto-zoom */

/* ambient prism field, layered radial glows + fine dot grid + faint privacy hex-mesh */
.dxp .cx-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1000px 640px at 84% -12%,rgba(124,140,255,.16),transparent 60%),
    radial-gradient(820px 560px at 2% 4%,rgba(245,166,35,.11),transparent 60%),
    radial-gradient(680px 520px at 50% 116%,rgba(245,181,68,.06),transparent 62%),
    radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/24px 24px,
    var(--cx-bg)}
.dxp .cx-amb i{position:absolute;border-radius:50%;filter:blur(66px);opacity:.5}
.dxp .cx-amb .b1{width:440px;height:440px;left:-90px;top:18%;background:radial-gradient(circle,rgba(124,140,255,.5),transparent 70%);animation:cxDrift 22s ease-in-out infinite}
.dxp .cx-amb .b2{width:400px;height:400px;right:-70px;bottom:-50px;background:radial-gradient(circle,rgba(245,166,35,.4),transparent 70%);animation:cxDrift 28s ease-in-out infinite reverse}
.dxp .cx-amb .grid{position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'%3E%3Cpath d='M28 0L52 14V42L28 56L4 42V14Z'/%3E%3Cpath d='M28 56L52 70V98'/%3E%3Cpath d='M28 56L4 70V98'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 96px;mask-image:radial-gradient(circle at 50% 26%,#000,transparent 78%)}
@keyframes cxDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(32px,-26px)}}

/* nav */
.dxp .cxnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:64px;padding:0 22px;
  background:linear-gradient(180deg,rgba(6,8,14,.86),rgba(6,8,14,.6));backdrop-filter:blur(18px) saturate(1.1);border-bottom:1px solid var(--cx-line)}
.dxp .cxnav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cx-holo3);opacity:.5;pointer-events:none}
.dxp .cxbrand{display:flex;align-items:center;gap:11px;font-family:var(--cx-dsp);font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--cx-ink)}
.dxp .cxbrand span{background:var(--cx-holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.dxp .cxbrand svg{filter:drop-shadow(0 3px 12px rgba(245,166,35,.34));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dxp .cxbrand:hover svg{transform:rotate(-7deg) scale(1.06)}
.dxp .cxbrand .tagchip{margin-left:2px;font-family:var(--cx-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cx-iris);border:1px solid rgba(124,140,255,.28);background:rgba(124,140,255,.08);padding:3px 7px;border-radius:7px}
.dxp .cxnav-r{margin-left:auto;display:flex;align-items:center;gap:13px}
@keyframes cxPulse{0%{box-shadow:0 0 0 0 rgba(245,166,35,.5)}70%{box-shadow:0 0 0 7px rgba(245,166,35,0)}100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}}
@media(max-width:680px){.dxp .hide-sm{display:none!important}.dxp .cxnav{gap:10px}.dxp .cxnav-r{gap:9px}.dxp .cxbrand .tagchip{display:none}}

/* cockpit grid */
.dxp .cx{max-width:1320px;margin:0 auto;padding:22px 22px 8px;display:grid;grid-template-columns:296px minmax(0,1fr) 352px;gap:18px;align-items:start}

/* entrance and gentle continuous 3D float (all cards feel alive) */

/* panel header */

/* markets rail */
.dxp .empty{padding:40px 22px;text-align:center;color:var(--cx-mut)}.dxp .empty h3{font-family:var(--cx-dsp);color:var(--cx-ink);margin-bottom:6px}
/* rail loading skeleton (replaced by terminal.js once markets load) */

/* order form */
.dxp .leg label{display:block;color:var(--cx-mut);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.dxp .amt{margin-top:14px;position:relative}
.dxp .amt input{width:100%;background:rgba(7,10,17,.68);border:1px solid var(--cx-line2);border-radius:15px;color:var(--cx-ink);font-family:var(--cx-mono);font-weight:600;font-size:24px;padding:16px;outline:none;transition:border-color .16s,box-shadow .16s}
.dxp .amt input:focus{border-color:var(--cx-mint);box-shadow:0 0 0 3px rgba(245,166,35,.12)}

/* quote (styling for the generated .qline/.qbig/.swp/.dep comes from style.css; we wrap it) */
.dxp .quote{margin-top:14px;position:relative;background:linear-gradient(180deg,rgba(9,12,20,.6),rgba(7,10,17,.44));border:1px solid var(--cx-line);border-radius:15px;padding:15px;min-height:66px}
.dxp .quote::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,140,255,.4),transparent);opacity:.6;pointer-events:none}

/* private-by-default row */
.dxp .toggle{position:relative;width:46px;height:26px;border-radius:100px;background:var(--cx-srf2);border:1px solid var(--cx-line2);cursor:pointer;flex:none;transition:.2s}
.dxp .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--cx-mut);transition:.2s}
.dxp .toggle.on{background:var(--cx-iris);border-color:var(--cx-iris);box-shadow:0 0 18px -4px rgba(124,140,255,.8)}
.dxp .toggle.on::after{left:22px;background:#fff}

/* insight panel */
.dxp .chart{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(9,12,20,.6),rgba(7,10,17,.46));border:1px solid var(--cx-line);border-radius:16px;padding:12px 14px 14px}
.dxp .chart::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:100% 34px;opacity:.5;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 82%,transparent)}
.dxp .chart canvas{position:relative;width:100%;height:186px;display:block}

/* rail filter chips, watchlist star, 24h badge */

/* picker modal */
.dxp .modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;padding:70px 18px 18px;background:rgba(4,6,10,.72);backdrop-filter:blur(12px)}
.dxp .modal.open{display:flex}
.dxp .mbox{width:100%;max-width:460px;background:linear-gradient(180deg,var(--cx-srf2),var(--cx-srf));border:1px solid var(--cx-line2);border-radius:22px;overflow:hidden;box-shadow:0 44px 96px rgba(0,0,0,.66);animation:cxPop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cxPop{from{transform:scale(.95) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.dxp .mbox .search{margin:12px 14px}
.dxp .mbox .search{position:relative}
.dxp .mbox .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5}
.dxp .mbox .search input{width:100%;background:rgba(7,10,17,.72);border:1px solid var(--cx-line2);border-radius:12px;color:var(--cx-ink);padding:11px 12px 11px 36px;outline:none;font-family:inherit}
.dxp .mbox .search input:focus{border-color:var(--cx-mint)}

/* responsive */
@media(max-width:1120px){
  .dxp .cx{grid-template-columns:270px minmax(0,1fr)}
}
/* mobile bottom nav (hidden on desktop) */

/* ===== MOBILE, Binance-style trade app (<=860px) ===== */
@media(max-width:860px){
  .dxp .cxnav{height:52px;padding:0 14px}
  .dxp .cxbrand{font-size:16px}

  /* single-column app shell; panels go edge-to-edge like a native screen */
  .dxp .cx{display:flex;flex-direction:column;align-items:stretch;max-width:100%;width:100%;margin:0;padding:0 0 calc(70px + var(--sab))}
  /* TRADE screen: Swap mode first, then the form, then the chart.
     order: only works between SIBLINGS, and .cx-mode is a child of .cx-insight, so
     display:contents promotes the insight's children into the .cx column and lets the
     mode selector sit above the form. Safe here because on mobile .cx-insight is already
     transparent with no padding, gap or border, so it contributes no visual box to lose.
     body.mv-markets .cx-insight{display:none} is specificity (0,2,1) and still wins, so
     the MARKETS screen toggle is unaffected. */

  /* two screens toggled by the bottom nav: TRADE (default) and MARKETS */

  /* 3D + motion keyframes for the mobile cards */

  /* --- TRADE screen: compact candles on top, order form below (fits the viewport) --- */
  .dxp .cx-amb .grid{display:none} /* de-clutter the app screens */
  .dxp .cx{perspective:1200px} /* depth for the 3D card motion */
  .dxp .chart canvas{height:clamp(150px,28cqh,220px)} /* scales with the device height */
  /* mobile: compact side-by-side compare, not two giant cards */ /* privacy note already lives inside the form */
  /* SWAP CARD: 3D lift-in entrance, then a gentle continuous float */
  /* tighten vertical rhythm so the CTA sits close to the fold */
  .dxp .quote{margin-top:10px;min-height:0;padding:12px}
  .dxp .amt input{font-size:22px;padding:14px}
  /* asset buttons: keep the token symbol fully visible, let the chain label shorten if tight */

  /* --- MARKETS screen: stack of 3D motion cards --- */
  /* staggered 3D cascade on the first cards */

  /* bottom tab bar */
}

/* ================= mobile app shell (mobile only, desktop untouched) ================= */
@media(max-width:860px){
  /* A tab bar plus a 511px column footer is a website wearing an app costume. The footer
     is desktop furniture, so it does not belong on a screen that has bottom-tab navigation. */
  .dxp .cxfoot{display:none}
  /* Trade is the swap and the route compare. The chart belongs beside the market list,
     which is where a market actually gets chosen. */
  body:not(.mv-markets) .dxp #chart{display:none !important}
  /* the card entrance transform scales ~0.5%, which pushed the page 2px wider than the
     viewport and produced a horizontal wobble. Clip contains it without touching sticky. */
  .dxp main.cx{overflow-x:clip}
  /* screens change, they do not jump: a short settle reads as native */
  .dxp main.cx{animation:mvIn .28s cubic-bezier(.22,.9,.3,1)}

  /* ---- depth: the swap card is the one object in the room, so it gets the elevation ---- */

  /* ---- press states: a control that does not answer the thumb feels like a web page ---- */
  .dxp .mode:active{transform:scale(.97)}
}

/* ---- the signature: the pair physically flips ----
   The direction swap is the one action worth a real 3D moment. The row turns edge-on at the
   halfway point, which is precisely where the swap happens, so the change is hidden inside the
   motion instead of popping. */
@keyframes mvIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .dxp main.cx{animation:none}
}

@media(max-width:860px){
  .dxp-host{display:flex;flex-direction:column;min-height:100cqh}
  /* Pip leads: it is the headline way into the product, so it sits first */
  /* on Trade the route compare has been relocated into the swap card, so the panel that
     used to hold it has nothing left to show there */
}


@media(max-width:860px){
  /* the commit button is docked above the tab bar, so it is reachable at any scroll
     position without reordering the card the operator asked for */
  /* content must be able to scroll clear of the docked bar */
  body:not(.mv-markets) .dxp main.cx{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){.dxp *{animation-duration:.001s!important;transition-duration:.001s!important}.dxp .cx-amb{display:none}}

/* $PIP x Robinhood promo banner */

/* --- footer --- */
.dxp .cxfoot{position:relative;margin-top:46px;border-top:1px solid var(--cx-line);background:linear-gradient(180deg,rgba(10,13,20,.35),rgba(6,8,14,.7))}
.dxp .cxfoot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--cx-holo3);opacity:.45}
.dxp .cxfoot-in{max-width:1320px;margin:0 auto;padding:40px 22px 24px;display:grid;grid-template-columns:1.35fr 2fr;gap:34px}
.dxp .cxfoot-brand .cxbrand{font-size:17px}
.dxp .cxfoot-brand p{color:var(--cx-mut);font-size:13px;line-height:1.6;max-width:330px;margin:13px 0 14px}
.dxp .cxfoot-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--cx-mint);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.22);padding:5px 11px;border-radius:100px}
.dxp .cxfoot-badge i{width:6px;height:6px;border-radius:50%;background:var(--cx-mint);animation:cxPulse 2s infinite}
.dxp .cxfoot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dxp .cxfoot-col h5{font-family:var(--cx-dsp);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--cx-dim);margin:0 0 13px}
.dxp .cxfoot-col a{display:block;color:var(--cx-mut);font-size:13.5px;text-decoration:none;padding:5px 0;transition:.14s;width:fit-content}
.dxp .cxfoot-col a:hover{color:var(--cx-mint);transform:translateX(2px)}
.dxp .cxfoot-bar{max-width:1320px;margin:0 auto;padding:15px 22px;border-top:1px solid var(--cx-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--cx-dim);font-family:var(--cx-mono)}
@media(max-width:680px){
  .dxp .cxfoot{margin-bottom:calc(70px + var(--sab))}
  .dxp .cxfoot-in{grid-template-columns:1fr;gap:24px;padding:28px 18px 18px}
  .dxp .cxfoot-cols{gap:14px}
  .dxp .cxfoot-bar{flex-direction:column;gap:6px;text-align:center;justify-content:center}
}

/* --- Swap mode selector (studied from Aurora Intents, rebuilt premium + on-brand) --- */
.dxp .mode{position:relative;text-align:left;background:var(--cx-srf2);border:1px solid var(--cx-line2);border-radius:16px;padding:13px 13px 12px;cursor:pointer;color:var(--cx-ink);font-family:inherit;transition:transform .16s,border-color .16s,box-shadow .18s,background .18s;overflow:hidden}
.dxp .mode:hover{transform:translateY(-2px)}
.dxp .mode b{font-family:var(--cx-dsp);font-weight:700;font-size:14px}
.dxp .mode small{display:block;color:var(--cx-mut);font-size:11.5px;line-height:1.42;margin-top:9px}
.dxp .mode.on{border-color:var(--cx-mint);background:linear-gradient(180deg,rgba(245,166,35,.11),rgba(124,140,255,.05));box-shadow:0 16px 36px -18px rgba(245,166,35,.5)}
.dxp .mode[data-mode=public].on{border-color:var(--cx-iris);background:linear-gradient(180deg,rgba(124,140,255,.11),rgba(255,255,255,.03));box-shadow:0 16px 36px -18px rgba(124,140,255,.45)}

/* --- chain-first token picker --- */@media(max-width:640px){.dxp .modal{align-items:flex-end;padding:0}.dxp .mbox{max-width:none;border-radius:22px 22px 0 0;max-height:92cqh;display:flex;flex-direction:column;animation:cxSheet .28s cubic-bezier(.2,.9,.3,1)}}@keyframes cxSheet{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* --- two-panel: Swap mode + live private-vs-public quote comparison --- */
.dxp :is(button,a,[role=button],[tabindex],input,select,textarea,summary):focus-visible{outline:2px solid var(--cx-mint,#f5a623);outline-offset:2px}

/* Perps page styles, scoped under .dxp. */

/* ═══ PERPS TERMINAL ═══════════════════════════════════════════════════════════════
   MOBILE FIRST. Everything below the first breakpoint is the phone layout, and each
   min-width query only ADDS. On a phone this is one pane at a time behind a tab bar,
   because a four column terminal squeezed onto 390px is four unusable columns.

   An instrument, not a trading floor. Edge to edge panes on hairline rules, every number
   in JetBrains Mono with tabular figures so a price column cannot twitch when a digit
   changes, and colour that only ever means direction.

   🚨 Namespaced tx-. cx.css claims bare ids (#chart hidden with !important) and style.css
   carries a bare section{padding:64px 0} for the marketing pages. Both are reset below. */

.dxp[data-mode="perp"]{margin:0;background:#06080e;overflow-x:clip;min-height:100cqh}
.dxp .tx,.dxp .tx *{box-sizing:border-box}
/* The sheets live outside main.tx, so they carry the same tokens. */
.dxp .tx-modal,.dxp .tx-keys{--tx-bg:#06080e;--tx-pane:#0a0d16;--tx-pane-2:#0c1019;--tx-rule:rgba(255,255,255,.075);--tx-rule-soft:rgba(255,255,255,.04);--tx-ink:#e9eefb;--tx-dim:#78849f;--tx-faint:#737e98;--tx-long:#f5a623;--tx-short:#ff5f6d;--tx-act:#7c8cff;--tx-warn:#f5b544;--tx-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--tx-dsp:'Sora',system-ui,sans-serif;--tx-body:'Inter',system-ui,sans-serif;--tx-spring:cubic-bezier(.34,1.56,.64,1);--tx-ease:cubic-bezier(.22,.61,.36,1);color:var(--tx-ink);font-family:var(--tx-body)}
.dxp .tx-modal *,.dxp .tx-keys *{box-sizing:border-box}
/* 🚨 style.css section{padding:64px 0} would put 64px of dead air around every pane. */
.dxp .tx section{padding:0;position:static}

.dxp .tx{
  --tx-bg:#06080e;
  --tx-pane:#0a0d16;
  --tx-pane-2:#0c1019;
  --tx-rule:rgba(255,255,255,.075);
  --tx-rule-soft:rgba(255,255,255,.04);
  --tx-ink:#e9eefb;
  --tx-dim:#78849f;
  --tx-faint:#737e98;
  --tx-long:#f5a623;
  --tx-short:#ff5f6d;
  --tx-act:#7c8cff;
  --tx-warn:#f5b544;
  --tx-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --tx-dsp:'Sora',system-ui,sans-serif;
  --tx-body:'Inter',system-ui,sans-serif;
  /* Motion vocabulary. Spring overshoots for things that ARRIVE, ease for things that MOVE. */
  --tx-spring:cubic-bezier(.34,1.56,.64,1);
  --tx-ease:cubic-bezier(.22,.61,.36,1);

  /* 🚨 order:4 is NOT optional. cx.css turns body.cxb into a flex column at mobile widths and
     gives every child it knows about an explicit order. A child without one defaults to 0 and
     sorts ABOVE the nav, which put the site header at the bottom of the phone layout. */
  order:4;
  position:relative;z-index:1;
  min-width:0;width:100%;
  font-family:var(--tx-body);
  color:var(--tx-ink);
}
.dxp .tx .n{font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.dxp .tx .up{color:var(--tx-long)}
.dxp .tx .dn{color:var(--tx-short)}
.dxp .tx .dim{color:var(--tx-dim)}
.dxp .tx .faint{color:var(--tx-faint)}

/* ─── ambient background ─────────────────────────────────────────────────────────
   A slow field behind the data, pinned and non-interactive. Deliberately faint: a busy
   background competing with a book you are about to trade on is a background that has
   forgotten what the page is for. */
.dxp #txBg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.dxp .tx-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(124,140,255,.10),transparent 60%),
             radial-gradient(90% 60% at 100% 100%,rgba(245,166,35,.06),transparent 60%);
  animation:txdrift 26s ease-in-out infinite alternate}
@keyframes txdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.06)}}

/* ─── page-load stagger ──────────────────────────────────────────────────────────
   One orchestrated arrival rather than scattered effects. */
.dxp .tx-in{opacity:0;transform:translateY(10px);animation:txrise .5s var(--tx-ease) forwards}
.dxp .tx-in:nth-child(1){animation-delay:.04s}
.dxp .tx-in:nth-child(2){animation-delay:.10s}
.dxp .tx-in:nth-child(3){animation-delay:.16s}
.dxp .tx-in:nth-child(4){animation-delay:.22s}
@keyframes txrise{to{opacity:1;transform:none}}

/* ─── panes ──────────────────────────────────────────────────────────────────── */
.dxp .tx-pane{background:var(--tx-pane);min-width:0;display:flex;flex-direction:column;border-bottom:1px solid var(--tx-rule)}
.dxp .tx-h{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--tx-rule);
  font:600 10.5px/1 var(--tx-dsp);letter-spacing:.13em;text-transform:uppercase;color:var(--tx-dim);flex:0 0 auto}
.dxp .tx-h .sp{margin-left:auto}

/* ─── instrument strip: sticky on mobile, the page's anchor ─────────────────── */
.dxp .tx-inst{position:sticky;top:0;z-index:6;background:rgba(10,13,22,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--tx-rule);display:flex;flex-wrap:wrap;align-items:stretch}
.dxp .tx-inst-id{display:flex;align-items:center;gap:10px;padding:10px 13px;min-width:0;flex:1 1 100%}
.dxp .tx-sym{font:700 17px/1 var(--tx-dsp);letter-spacing:-.01em;cursor:pointer;display:flex;align-items:center;gap:5px}
.dxp .tx-sym::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--tx-dim);transition:transform .25s var(--tx-ease)}
.dxp .tx-lev{font:600 10px/1 var(--tx-dsp);color:var(--tx-act);border:1px solid rgba(124,140,255,.4);border-radius:4px;padding:3px 5px}
.dxp .tx-lev:empty{display:none}
/* Rolling digits: each character sits in a clipped cell so a change slides rather than swaps. */
.dxp .tx-mark{margin-left:auto;font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:22px;
  font-weight:600;line-height:1.15;letter-spacing:-.03em;display:inline-flex;transition:color .3s;
  flex:0 0 auto;white-space:nowrap}
.dxp .tx-dig{display:inline-block;overflow:hidden;height:1.15em;line-height:1.15em}
.dxp .tx-dig i{display:block;font-style:normal}
/* A digit that changed rolls in from below. Class driven rather than state driven, so a burst
   of ticks cannot leave a cell stuck mid-transition. */
.dxp .tx-dig i.roll{animation:txroll .16s var(--tx-ease)}
@keyframes txroll{from{transform:translateY(.3em);opacity:.45}to{transform:none;opacity:1}}
.dxp .tx-stat{display:flex;flex-direction:column;gap:3px;justify-content:center;padding:9px 13px;
  border-top:1px solid var(--tx-rule-soft);flex:1 1 33%;min-width:0}
.dxp .tx-stat .k{font:600 9px/1 var(--tx-dsp);letter-spacing:.11em;text-transform:uppercase;color:var(--tx-faint)}
.dxp .tx-stat .v{font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:500}

/* ─── funding meter, the signature ──────────────────────────────────────────── */
.dxp .tx-fund{display:flex;flex-direction:column;gap:5px;justify-content:center;padding:9px 13px;
  flex:1 1 100%;border-top:1px solid var(--tx-rule-soft)}
.dxp .tx-fund-top{display:flex;align-items:baseline;gap:7px}
.dxp .tx-fund-lbl{font:600 9px/1 var(--tx-dsp);letter-spacing:.11em;text-transform:uppercase;color:var(--tx-faint)}
.dxp .tx-fund-val{font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;margin-left:auto}
.dxp .tx-fund-bar{position:relative;height:5px;background:var(--tx-rule-soft);border-radius:3px;overflow:hidden}
.dxp .tx-fund-bar::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.22)}
.dxp .tx-fund-fill{position:absolute;top:0;bottom:0;left:50%;width:0;background:var(--tx-long);
  transition:width .5s var(--tx-spring);box-shadow:0 0 10px rgba(245,166,35,.5)}
.dxp .tx-fund-fill.neg{background:var(--tx-short);transform:scaleX(-1);transform-origin:left;box-shadow:0 0 10px rgba(255,95,109,.5)}
.dxp .tx-fund-sub{display:flex;justify-content:space-between;font:500 10px/1 var(--tx-body);color:var(--tx-dim)}

/* ─── mobile tab bar ────────────────────────────────────────────────────────── */
.dxp .tx-nav{display:flex;position:sticky;top:0;z-index:5;background:var(--tx-pane-2);border-bottom:1px solid var(--tx-rule)}
.dxp .tx-nav button{flex:1;padding:11px 4px;border:0;background:transparent;color:var(--tx-dim);cursor:pointer;
  font:600 10.5px/1 var(--tx-dsp);letter-spacing:.1em;text-transform:uppercase;position:relative}
.dxp .tx-nav button[aria-selected="true"]{color:var(--tx-ink)}
.dxp .tx-nav .ink{position:absolute;bottom:0;height:2px;background:var(--tx-act);
  transition:transform .32s var(--tx-ease),width .32s var(--tx-ease);border-radius:2px 2px 0 0}

/* On a phone one pane is on screen at a time. Desktop turns this off entirely. */
.dxp .tx-view{display:none}
.dxp .tx-view.on{display:flex;flex-direction:column;min-width:0}

/* ─── markets ───────────────────────────────────────────────────────────────── */
.dxp .tx-search{width:100%;background:transparent;border:0;border-bottom:1px solid var(--tx-rule);color:var(--tx-ink);
  font:500 13px/1 var(--tx-body);padding:11px;outline:none}
.dxp .tx-search:focus{border-bottom-color:var(--tx-act)}
.dxp .tx-search::placeholder{color:var(--tx-faint)}
.dxp .tx-mkts{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.dxp .tx-mkt{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;padding:10px 11px;
  cursor:pointer;border-bottom:1px solid var(--tx-rule-soft);font-size:12.5px;
  transition:background .18s var(--tx-ease),box-shadow .18s var(--tx-ease)}
.dxp .tx-mkt:active{background:rgba(124,140,255,.13)}
.dxp .tx-mkt[aria-selected="true"]{background:rgba(124,140,255,.13);box-shadow:inset 3px 0 0 var(--tx-act)}
.dxp .tx-mkt-n{font:600 12.5px/1.2 var(--tx-dsp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dxp .tx-mkt-p{font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:12px}
.dxp .tx-mkt-c{font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:11px;min-width:56px;text-align:right}

/* ─── chart ─────────────────────────────────────────────────────────────────── */
.dxp .tx-ivs{display:flex;gap:2px;margin-left:auto}
.dxp .tx-iv{padding:5px 8px;border:0;background:transparent;color:var(--tx-faint);cursor:pointer;
  font:600 10.5px/1 var(--tx-mono);border-radius:3px;transition:color .2s,background .2s}
.dxp .tx-iv[aria-selected="true"]{background:rgba(124,140,255,.16);color:var(--tx-act)}
/* 🚨 Explicit height. The library measures its container, and a container sized by its content
   measures zero, drawing a chart of no height rather than failing. */
.dxp #txChart{width:100%;height:260px;min-width:0;flex:0 0 auto}

/* ─── flow: the advanced book ───────────────────────────────────────────────── */
.dxp .tx-ctl{display:flex;gap:4px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--tx-rule);
  flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dxp .tx-ctl::-webkit-scrollbar{display:none}
.dxp .tx-ctl > *{flex:0 0 auto}
.dxp .tx-chip{padding:4px 8px;border:1px solid var(--tx-rule);background:transparent;border-radius:4px;color:var(--tx-dim);
  font:600 10px/1 var(--tx-mono);cursor:pointer;transition:all .18s var(--tx-ease)}
.dxp .tx-chip[aria-pressed="true"]{border-color:var(--tx-act);color:var(--tx-act);background:rgba(124,140,255,.13)}
.dxp .tx-chip:active{transform:scale(.94)}

/* imbalance: which side is heavier, at a glance, without reading a number */
.dxp .tx-imb{display:flex;height:4px;border-radius:2px;overflow:hidden;margin:0 11px 7px;background:var(--tx-rule-soft);flex:0 0 auto}
.dxp .tx-imb i{display:block;height:100%;transition:width .45s var(--tx-ease)}
.dxp .tx-imb .b{background:linear-gradient(90deg,rgba(245,166,35,.45),var(--tx-long))}
.dxp .tx-imb .a{background:linear-gradient(90deg,var(--tx-short),rgba(255,95,109,.45))}

/* 🚨 Bounded height. The tape holds 48 prints and, left unbounded, IT decides how tall this grid
   row is, which pushed the bid side below the fold on a phone while the asks sat centred in a row
   taller than the screen. With a definite height both columns clip inside it and the ladder
   centres on what is actually visible. */
.dxp .tx-flow{display:grid;grid-template-columns:minmax(0,1fr) 96px;min-width:0;flex:1 1 auto;
  height:calc(100cqh - 340px);min-height:300px}
.dxp .tx-ladder{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--tx-rule)}
/* Mobile first: the ladder sizes to its content and centres, so five levels a side stay compact
   and BOTH sides are on screen. Stretching each side to half a tall pane pushed the bids below
   the fold. Desktop adds the equal flex further down, where the pane height is bounded. */
.dxp .tx-side{flex:0 0 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.dxp .tx-ladder{justify-content:center}
.dxp .tx-side.asks{justify-content:flex-end}
.dxp .tx-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px;padding:4px 9px;
  font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:11.5px;cursor:pointer;flex:0 0 auto}
.dxp .tx-row:active{background:rgba(255,255,255,.07)}
.dxp .tx-row .depth{position:absolute;top:0;bottom:0;right:0;width:0;pointer-events:none;
  transition:width .38s var(--tx-ease)}
.dxp .tx-row.bid .depth{background:linear-gradient(90deg,rgba(245,166,35,.02),rgba(245,166,35,.17))}
.dxp .tx-row.ask .depth{background:linear-gradient(90deg,rgba(255,95,109,.02),rgba(255,95,109,.17))}
.dxp .tx-row .px,.dxp .tx-row .sz{position:relative;z-index:1}
.dxp .tx-row .sz{color:var(--tx-dim)}
.dxp .tx-row.bid .px{color:var(--tx-long)}
.dxp .tx-row.ask .px{color:var(--tx-short)}
/* A level whose size changed flashes once. This is the one place motion carries information
   rather than atmosphere: it marks a tick that actually happened. */
.dxp .tx-row.flash-up{animation:txflashu .5s var(--tx-ease)}
.dxp .tx-row.flash-dn{animation:txflashd .5s var(--tx-ease)}
@keyframes txflashu{0%{background:rgba(245,166,35,.3)}100%{background:transparent}}
@keyframes txflashd{0%{background:rgba(255,95,109,.3)}100%{background:transparent}}

.dxp .tx-fulcrum{border-top:1px solid var(--tx-rule);border-bottom:1px solid var(--tx-rule);background:var(--tx-pane-2);
  padding:8px 9px;display:flex;align-items:baseline;gap:8px;flex:0 0 auto;white-space:nowrap;overflow:hidden}
.dxp .tx-fulcrum .last{font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;
  transition:color .3s}
.dxp .tx-fulcrum .spread{margin-left:auto;font-family:var(--tx-mono);font-size:9.5px;color:var(--tx-dim)}

.dxp .tx-tape{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.dxp .tx-print{display:flex;justify-content:space-between;gap:5px;padding:3px 7px;overflow:hidden;
  font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:9.5px;flex:0 0 auto;
  animation:txin .34s var(--tx-ease)}
@keyframes txin{from{opacity:0;transform:translateY(-6px) scaleY(.7)}to{opacity:1;transform:none}}
.dxp .tx-print .p{white-space:nowrap;font-weight:600}
.dxp .tx-print .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--tx-faint)}
.dxp .tx-print.buy .p{color:var(--tx-long)}
.dxp .tx-print.sell .p{color:var(--tx-short)}

/* ─── ticket ────────────────────────────────────────────────────────────────── */
.dxp .tx-tk{padding:11px;display:flex;flex-direction:column;gap:10px;min-width:0}
.dxp .tx-side-sel{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--tx-rule);border-radius:6px;overflow:hidden}
.dxp .tx-sbtn{padding:11px;border:0;background:transparent;color:var(--tx-dim);cursor:pointer;
  font:700 12.5px/1 var(--tx-dsp);transition:all .22s var(--tx-ease)}
.dxp .tx-sbtn[aria-selected="true"][data-side="buy"]{background:rgba(245,166,35,.17);color:var(--tx-long)}
.dxp .tx-sbtn[aria-selected="true"][data-side="sell"]{background:rgba(255,95,109,.17);color:var(--tx-short)}
.dxp .tx-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.dxp .tx-f label{font:600 9.5px/1 var(--tx-dsp);letter-spacing:.11em;text-transform:uppercase;color:var(--tx-faint)}
.dxp .tx-in{width:100%;background:var(--tx-bg);border:1px solid var(--tx-rule);border-radius:6px;color:var(--tx-ink);
  font-family:var(--tx-mono);font-variant-numeric:tabular-nums;font-size:16px;padding:11px 10px;outline:none;
  transition:border-color .2s,box-shadow .2s}
.dxp .tx-in:focus{border-color:var(--tx-act);box-shadow:0 0 0 3px rgba(124,140,255,.14)}
.dxp .tx-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dxp .tx-quick{display:flex;gap:4px}
.dxp .tx-qb{flex:1;padding:7px 0;border:1px solid var(--tx-rule);background:transparent;border-radius:5px;
  color:var(--tx-dim);font:600 10.5px/1 var(--tx-mono);cursor:pointer;transition:all .18s var(--tx-ease)}
.dxp .tx-qb:active{transform:scale(.94)}
.dxp .tx-qb[aria-pressed="true"]{border-color:var(--tx-act);color:var(--tx-act);background:rgba(124,140,255,.12)}
.dxp .tx-tog{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tx-dim);cursor:pointer}
.dxp .tx-tog input{accent-color:var(--tx-act);width:15px;height:15px}
.dxp .tx-go{width:100%;padding:13px;border:0;border-radius:7px;background:var(--tx-act);color:var(--tx-bg);
  font:700 13.5px/1 var(--tx-dsp);cursor:pointer;transition:transform .16s var(--tx-spring),filter .2s;
  position:relative;overflow:hidden}
.dxp .tx-go:active{transform:scale(.975)}
.dxp .tx-go[disabled]{opacity:.42;cursor:not-allowed}
.dxp .tx-go.sell{background:var(--tx-short)}
.dxp .tx-go.buy{background:var(--tx-long);color:#04150d}
.dxp .tx-msg{font-size:12px;line-height:1.5;color:var(--tx-dim);min-height:1px}
.dxp .tx-msg.err{color:#ff9b9b}
.dxp .tx-msg.ok{color:var(--tx-long)}

/* ─── lower panel ───────────────────────────────────────────────────────────── */
.dxp .tx-tabs{display:flex;border-bottom:1px solid var(--tx-rule);flex:0 0 auto;overflow-x:auto}
.dxp .tx-tab{padding:10px 13px;border:0;background:transparent;color:var(--tx-dim);cursor:pointer;white-space:nowrap;
  font:600 10.5px/1 var(--tx-dsp);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s}
.dxp .tx-tab[aria-selected="true"]{color:var(--tx-ink);border-bottom-color:var(--tx-act)}
.dxp .tx-body{overflow:auto;flex:1 1 auto;min-height:90px;-webkit-overflow-scrolling:touch}
.dxp .tx-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.dxp .tx-tbl th{text-align:right;padding:7px 11px;font:600 9.5px/1 var(--tx-dsp);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-faint);border-bottom:1px solid var(--tx-rule);white-space:nowrap;position:sticky;top:0;background:var(--tx-pane)}
.dxp .tx-tbl th:first-child,.dxp .tx-tbl td:first-child{text-align:left}
.dxp .tx-tbl td{text-align:right;padding:9px 11px;border-bottom:1px solid var(--tx-rule-soft);white-space:nowrap;
  font-family:var(--tx-mono);font-variant-numeric:tabular-nums}
.dxp .tx-empty{padding:18px 11px;color:var(--tx-faint);font-size:12px}

/* ─── 3D motion cards ───────────────────────────────────────────────────────────
   Tilt is applied to a WRAPPER, never to a node that already carries a transform, or the
   two cancel each other out. Perspective sits one level above the rotated node, the only
   place it composes. */
.dxp .tx-3d{perspective:900px;min-width:0}
.dxp .tx-3d > *{transition:transform .35s var(--tx-ease),box-shadow .35s var(--tx-ease);transform-style:preserve-3d;will-change:transform}
.dxp .tx-3d.lift > *{box-shadow:0 18px 44px rgba(0,0,0,.5)}

/* ─── modal in motion ───────────────────────────────────────────────────────── */
/* ─── deposit sheet ─────────────────────────────────────────────────────────── */
.dxp .tx-depbtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;border-radius:7px;
  background:var(--tx-long);color:#140c00;font:700 12.5px/1 var(--tx-dsp);cursor:pointer;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(245,166,35,.35),0 6px 18px -8px rgba(245,166,35,.7);transition:transform .18s var(--tx-ease)}
.dxp .tx-depbtn:active{transform:scale(.96)}
.dxp .tx-deplink{margin-left:6px;padding:0;border:0;background:none;color:var(--tx-long);font:600 12px/1.4 var(--tx-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.dxp .tx-dep .tx-modal-card{max-height:92cqh;overflow-y:auto}
.dxp .tx-dep-head{display:flex;align-items:center;justify-content:space-between}
.dxp .tx-dep-x{border:0;background:none;color:var(--tx-dim);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
.dxp .tx-dep-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--tx-rule);border-radius:9px;margin-bottom:14px}
.dxp .tx-dep-tabs button{padding:9px 6px;border:0;border-radius:6px;background:transparent;color:var(--tx-dim);font:600 12px/1.2 var(--tx-dsp);cursor:pointer}
.dxp .tx-dep-tabs button[aria-selected="true"]{background:rgba(245,166,35,.14);color:var(--tx-long)}
.dxp .tx-dep-lbl{font:600 9.5px/1 var(--tx-dsp);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint);margin:12px 0 7px}
.dxp .tx-dep-note{font-size:12.5px;line-height:1.55;color:var(--tx-dim);margin-bottom:12px}
.dxp .tx-dep-note b{color:var(--tx-ink)}
.dxp .tx-dep-list{display:flex;flex-direction:column;gap:5px;max-height:196px;overflow-y:auto}
.dxp .tx-dep-src{display:flex;justify-content:space-between;align-items:center;padding:10px 11px;border:1px solid var(--tx-rule);border-radius:8px;
  background:var(--tx-bg);color:var(--tx-ink);cursor:pointer;text-align:left;font:600 13px/1.2 var(--tx-body)}
.dxp .tx-dep-src i,.dxp .tx-dep-chip i{display:block;font-style:normal;font-weight:500;font-size:11px;color:var(--tx-dim);margin-top:3px}
.dxp .tx-dep-src .bal{text-align:right;font-family:var(--tx-mono);font-size:12px}
.dxp .tx-dep-src[aria-pressed="true"],.dxp .tx-dep-chip[aria-pressed="true"]{border-color:var(--tx-long);background:rgba(245,166,35,.08)}
.dxp .tx-dep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.dxp .tx-dep-chip{padding:9px 10px;border:1px solid var(--tx-rule);border-radius:8px;background:var(--tx-bg);color:var(--tx-ink);
  font:600 12.5px/1.15 var(--tx-body);cursor:pointer;text-align:left}
.dxp .tx-dep-amt{position:relative}
.dxp .tx-dep-amt .tx-in{font-size:20px;padding:12px 70px 12px 12px}
.dxp .tx-dep-amt .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--tx-dim);font:600 12px/1 var(--tx-dsp)}
.dxp .tx-dep-sub{display:flex;justify-content:space-between;align-items:center;margin:7px 0 4px;font-size:12px;color:var(--tx-dim)}
.dxp .tx-dep-pcts{display:flex;gap:5px}
.dxp .tx-dep-pcts button{padding:4px 9px;border:1px solid var(--tx-rule);border-radius:5px;background:transparent;color:var(--tx-dim);font:600 11px/1 var(--tx-dsp);cursor:pointer}
.dxp .tx-dep-pcts button:hover{color:var(--tx-long);border-color:var(--tx-long)}
.dxp .tx-dep-quote{margin:6px 0 14px}
.dxp .tx-dep-copy{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--tx-rule);border-radius:8px;background:var(--tx-bg)}
.dxp .tx-dep-copy code{flex:1;min-width:0;word-break:break-all;font:500 12px/1.4 var(--tx-mono);color:var(--tx-ink)}
.dxp .tx-dep-copy button{flex:none;padding:6px 10px;border:1px solid var(--tx-rule);border-radius:5px;background:transparent;color:var(--tx-long);font:600 11px/1 var(--tx-dsp);cursor:pointer}
.dxp .tx-dep-steps{list-style:none;margin:16px 0 4px;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.dxp .tx-dep-steps li{position:relative;padding-left:30px;font-size:13px;color:var(--tx-faint);counter-increment:s;line-height:20px}
.dxp .tx-dep-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;border:1px solid var(--tx-rule);
  display:grid;place-items:center;font:600 10px/1 var(--tx-dsp)}
.dxp .tx-dep-steps li.on{color:var(--tx-ink)}
.dxp .tx-dep-steps li.on::before{border-color:var(--tx-long);color:var(--tx-long);animation:txDepPulse 1.4s var(--tx-ease) infinite}
.dxp .tx-dep-steps li.done{color:var(--tx-dim)}
.dxp .tx-dep-steps li.done::before{content:"✓";background:var(--tx-long);border-color:var(--tx-long);color:#140c00}
.dxp .tx-dep-steps li.fail::before{content:"!";border-color:var(--tx-short);color:var(--tx-short)}
@keyframes txDepPulse{50%{box-shadow:0 0 0 5px rgba(245,166,35,.15)}}
@media(min-width:700px){.dxp .tx-dep .tx-modal{align-items:center}.dxp .tx-dep{align-items:center}.dxp .tx-dep .tx-modal-card{border-radius:16px}}
.dxp .tx-modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;padding:0}
.dxp .tx-modal.on{display:flex}
.dxp .tx-modal-bg{position:absolute;inset:0;background:rgba(3,5,10,.72);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .28s var(--tx-ease)}
.dxp .tx-modal.on .tx-modal-bg{opacity:1}
.dxp .tx-modal-card{position:relative;width:100%;max-width:440px;background:var(--tx-pane);
  border:1px solid var(--tx-rule);border-radius:16px 16px 0 0;padding:16px;
  transform:translateY(24px) scale(.97);opacity:0;
  transition:transform .38s var(--tx-spring),opacity .28s var(--tx-ease)}
.dxp .tx-modal.on .tx-modal-card{transform:none;opacity:1}
.dxp .tx-modal-grab{width:36px;height:4px;border-radius:2px;background:var(--tx-rule);margin:0 auto 12px}
.dxp .tx-modal h3{font:700 15px/1.3 var(--tx-dsp);margin:0 0 4px}
.dxp .tx-modal .sub{font-size:12px;color:var(--tx-dim);margin:0 0 14px;line-height:1.5}
.dxp .tx-kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--tx-rule-soft);font-size:12.5px}
.dxp .tx-kv span:first-child{color:var(--tx-dim)}
.dxp .tx-kv span:last-child{font-family:var(--tx-mono);font-variant-numeric:tabular-nums}
.dxp .tx-modal-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.dxp .tx-ghost{padding:12px;border:1px solid var(--tx-rule);background:transparent;border-radius:7px;color:var(--tx-dim);
  font:600 12.5px/1 var(--tx-dsp);cursor:pointer;transition:all .18s var(--tx-ease)}
.dxp .tx-ghost:active{transform:scale(.97)}

/* ─── depth curve ───────────────────────────────────────────────────────────── */
.dxp #txDepth{width:100%;height:56px;display:block;border-bottom:1px solid var(--tx-rule);flex:0 0 auto}

/* ─── shortcuts sheet ───────────────────────────────────────────────────────── */
.dxp .tx-keys{position:fixed;inset:0;z-index:65;display:none;align-items:center;justify-content:center;padding:20px}
.dxp .tx-keys.on{display:flex}
.dxp .tx-keys-bg{position:absolute;inset:0;background:rgba(3,5,10,.72);backdrop-filter:blur(7px)}
.dxp .tx-keys-card{position:relative;background:var(--tx-pane);border:1px solid var(--tx-rule);border-radius:14px;
  padding:16px 18px;max-width:400px;width:100%;
  animation:txkeys .32s var(--tx-spring)}
@keyframes txkeys{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.dxp .tx-keys h3{font:700 14px/1.3 var(--tx-dsp);margin:0 0 11px}
.dxp .tx-keys .row{display:flex;justify-content:space-between;padding:6px 0;font-size:12.5px;color:var(--tx-dim)}
.dxp .tx-keys kbd{font-family:var(--tx-mono);font-size:11px;background:var(--tx-bg);border:1px solid var(--tx-rule);
  border-radius:4px;padding:2px 6px;color:var(--tx-ink)}

/* ─── toast ──────────────────────────────────────────────────────────────────────
   🚨 Feedback has to be visible from wherever the person is standing. The ticket's inline
   message lives in the Trade pane, so on a phone an error raised during a Fund flow was written
   to a pane that was not on screen: the button appeared to do nothing at all. The toast is the
   one surface that is visible from every tab. */
.dxp .tx-toast{position:fixed;left:50%;bottom:18px;z-index:70;transform:translate(-50%,140%);
  background:var(--tx-pane-2);border:1px solid var(--tx-rule);border-radius:10px;padding:11px 15px;
  font-size:12.5px;line-height:1.45;color:var(--tx-ink);max-width:min(440px,calc(100cqw - 28px));
  box-shadow:0 14px 40px rgba(0,0,0,.55);transition:transform .38s var(--tx-spring),opacity .28s;
  opacity:0;pointer-events:none}
.dxp .tx-toast.on{transform:translate(-50%,0);opacity:1}
.dxp .tx-toast.err{border-color:rgba(255,95,109,.5);color:#ffc9cd}
.dxp .tx-toast.ok{border-color:rgba(61,220,151,.5);color:#c9f5e2}

/* ─── live lamp ─────────────────────────────────────────────────────────────── */
.dxp .tx-live{display:inline-flex;align-items:center;gap:5px;font:600 9.5px/1 var(--tx-dsp);letter-spacing:.1em;text-transform:uppercase}
.dxp .tx-live i{width:5px;height:5px;border-radius:50%;background:var(--tx-faint)}
.dxp .tx-live.on i{background:var(--tx-long);animation:txpulse 2s ease-in-out infinite;box-shadow:0 0 8px rgba(61,220,151,.8)}
.dxp .tx-live.on{color:var(--tx-long)}
@keyframes txpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}

/* ═══ TABLET ═══ */
@media(min-width:700px){
  .dxp .tx-inst-id{flex:0 0 auto;border-right:1px solid var(--tx-rule)}
  .dxp .tx-mark{margin-left:16px}
  .dxp .tx-stat{flex:0 1 auto;border-top:0;border-right:1px solid var(--tx-rule);padding:10px 15px}
  .dxp .tx-fund{flex:1 1 260px;max-width:340px;border-top:0}
  .dxp #txChart{height:300px}
  .dxp .tx-modal{align-items:center;padding:20px}
  .dxp .tx-modal-card{border-radius:16px}
}

/* ═══ DESKTOP: every pane at once, grid pinned to the viewport ═══
   🚨 The grid is bounded and panes scroll INSIDE themselves. Unbounded, a pane grows to fit
   the chart, the chart then sizes from the taller pane, and it runs away: that loop produced
   an 11,576px chart before it was pinned. */
@media(min-width:980px){
  .dxp .tx-nav{display:none}
  .dxp .tx-view{display:flex !important;flex-direction:column;min-width:0;min-height:0}
  /* Mobile-only pane. Its numbers are already in the lower tabs here, and a fifth pane in a four
     column grid wraps onto a second row and leaves a band of empty page under everything. */
  .dxp .tx-view[data-view="you"]{display:none !important}
  .dxp .tx-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 262px;
    height:calc(100cqh - 132px);min-height:540px;overflow:hidden}
  .dxp .tx-pane{border-right:1px solid var(--tx-rule);border-bottom:0;overflow:hidden}
  .dxp #txChart{height:300px}
  .dxp .tx-in{font-size:13px}
  /* Pane height is bounded here, so an equal share puts the fulcrum in the middle. */
  .dxp .tx-side{flex:1 1 0}
  .dxp .tx-ladder{justify-content:stretch}
  .dxp .tx-flow{height:auto;min-height:0}
}
/* The ticket scrolls inside its own pane, so the sticky Review button docks over the form. */
@media(min-width:980px){
  .dxp .tx-pane[data-view="trade"]{overflow-y:auto;overscroll-behavior:contain}
}
/* Three columns: markets over the ticket on the left, chart and flow each span the full height. */
@media(min-width:980px) and (max-width:1339px){
  .dxp .tx-grid{grid-template-columns:230px minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"mkt chart flow" "trade chart flow"}
  .dxp .tx-view[data-view="mkt"]{grid-area:mkt;border-bottom:1px solid var(--tx-rule)}
  .dxp .tx-view[data-view="chart"]{grid-area:chart}
  .dxp .tx-view[data-view="flow"]{grid-area:flow}
  .dxp .tx-view[data-view="trade"]{grid-area:trade}
}
@media(min-width:1340px){
  .dxp .tx-grid{grid-template-columns:226px minmax(0,1fr) 250px 272px}
}

@media(max-width:979px){
  /* The active pane fills what is left of the screen. Sized to content it leaves a band of empty
     page under everything, which reads as the layout having failed rather than having finished. */
  .dxp .tx-view.on{min-height:calc(100cqh - 232px)}
}
@media(prefers-reduced-motion:reduce){
  .dxp .tx-in,.dxp .tx-print,.dxp .tx-live.on i,.dxp .tx-veil{animation:none !important}
  .dxp .tx-in{opacity:1;transform:none}
  .dxp .tx-row.flash-up,.dxp .tx-row.flash-dn{animation:none !important}
  .dxp .tx-3d > *,.dxp .tx-modal-card,.dxp .tx-modal-bg,.dxp .tx-dig i{transition:none !important}
  .dxp #txBg{display:none}
}


/* Touch floor. Sized for a thumb first and only relaxed on a pointer device, because the
   interval and tab strips are what someone reaches for while a position is open. */
.dxp .tx-iv{min-height:40px;min-width:44px;padding:10px 12px;font-size:12.5px}
.dxp .tx-tab{min-height:44px;padding:11px 16px;font-size:13px}
.dxp [role=tab][data-view]{min-height:44px;padding:11px 14px}
.dxp .tx-chip,.dxp .tx-qb,.dxp .tx-sbtn,.dxp .tx-dep-x,.dxp .tx-dep-pcts button,.dxp .tx-dep-copy button{min-height:40px}
.dxp .tx-chip{padding:8px 12px}
.dxp .tx-dep-x{min-width:40px}
.dxp .tx-row{min-height:40px;align-items:center}
.dxp .tx-iv,.dxp .tx-tab,.dxp [role=tab][data-view],.dxp .tx-chip,.dxp .tx-qb,.dxp .tx-sbtn,.dxp .tx-dep-x,.dxp .tx-dep-pcts button,.dxp .tx-dep-copy button,.dxp .tx-row{touch-action:manipulation}
@media (pointer:fine) and (min-width:861px){
  .dxp .tx-iv{min-height:34px;min-width:38px;padding:7px 10px}
  .dxp .tx-tab,.dxp [role=tab][data-view]{min-height:38px;padding:9px 13px}
  .dxp .tx-chip,.dxp .tx-qb,.dxp .tx-sbtn,.dxp .tx-dep-x,.dxp .tx-dep-pcts button,.dxp .tx-dep-copy button,.dxp .tx-row{min-height:0;min-width:0}
  .dxp .tx-chip{padding:4px 8px}
}
/* A strip that scrolls must be able to, and must not steal the page's vertical scroll. */
.dxp .tx-ivs,.dxp .tx-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dxp .tx-ivs::-webkit-scrollbar,.dxp .tx-tabs::-webkit-scrollbar{height:0}


/* The place-order button is the point of the screen. On a phone it docks to the bottom of
   the trade pane instead of sitting below the fold at the end of a long form. */
/* 🚨 Desktop too. The order pane scrolls INTERNALLY on a shorter window, so at 1440x720 the
   button sat at y=715 while the pane ended at 651: present, inside a scroll container, and
   invisible. belowFold said false, which is why it looked fine in a tall test window.
   Pinned to the bottom of the pane at every width. */
.dxp .tx-go {
  position: sticky; bottom: 0; z-index: 5; margin-top: 10px;
  box-shadow: 0 -14px 20px -12px rgba(0,0,0,.85);
}
.dxp .tx-pane.tx-view .tx-tk { padding-bottom: 4px; }
@media (max-width: 860px) {
  .dxp .tx-go { min-height: 52px; font-size: 16px; }
  /* The tab that actually places a trade should not look like the other four. */
  .dxp [role=tab][data-view="trade"][aria-selected="true"],
  .dxp [role=tab][data-view="trade"].on { color: #f5a623; }
}

/* a coin's logo sits before its name in the markets list */
.dxp .tx-mkt-n { display: inline-flex; align-items: center; gap: 8px; }

/* the shell chrome owns navigation, so the page's own phone bars and promo banner stay out */

.dxp input, .dxp textarea, .dxp select { font-size: max(16px, 1em); }
/* One palette across the product. Amber is the brand. Green only marks a gain, a success or a
   live state, through --up, so recolouring the brand never recolours a number. Loaded last. */
.dxp {
  --mint: #f5a623;
  --mint2: #d98c0c;
  --mintdim: rgba(245, 166, 35, .14);
  --cx-mint: #f5a623;
  --cx-mint2: #d98c0c;
  --cx-glow-mint: 0 0 0 1px rgba(245, 166, 35, .2), 0 14px 34px -14px rgba(245, 166, 35, .5);
  --amber: #f5a623;
  --cx-amber: #f5a623;
  --up: #3ddc97;
}