/* generated by tools/bundle-css.py from: dash-base, cx-base, stocks */
/* 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-primary{background:linear-gradient(180deg,var(--mint),var(--mint2));color:#04150d;box-shadow:0 8px 22px -8px rgba(245,166,35,.6)}
.dxp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(245,166,35,.7)}
.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 .hero{position:relative;padding:74px 0 40px}
.dxp .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.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 .tlist{overflow-y:auto;max-height:calc(100vh - 210px)}
.dxp .trow{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .15s}
.dxp .trow:hover{background:var(--panel2)}
.dxp .trow.active{background:var(--panel2);box-shadow:inset 3px 0 0 var(--mint)}
.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 .trow .sym{font-weight:600;font-size:14px}
.dxp .trow .ch{color:var(--dim);font-size:11.5px;text-transform:capitalize}
.dxp .trow .px{margin-left:auto;text-align:right}
.dxp .trow .px .p{font-family:var(--mono);font-size:13px}
.dxp .trow .px .c{font-size:11px;color:var(--dim)}

.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 .presets{display:flex;gap:8px;margin-top:10px}
.dxp .presets button{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--mut);
  font-family:var(--mono);font-size:12px;padding:7px;cursor:pointer;transition:.15s}
.dxp .presets button:hover{color:var(--mint);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 .qline{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13.5px}
.dxp .qline span:first-child{color:var(--mut)}
.dxp .qline .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dxp .qmut{color:var(--dim);font-size:12px}
.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 .tradebtn{width:100%;margin-top:16px;justify-content:center;font-size:15px;padding:14px}
.dxp .hint{color:var(--dim);font-size:12px;text-align:center;margin-top:10px}

.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 .dash-sec{margin-top:30px}
.dxp .dash-sec .lbl{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.dxp .dash-sec .lbl .ln{flex:1;height:1px;background:var(--line)}
.dxp .addr{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px}
.dxp .addr code{font-family:var(--mono);font-size:12px;color:var(--mut);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxp .addr .cpy{background:none;border:none;color:var(--dim);cursor:pointer;padding:2px;display:flex;transition:color .15s}
.dxp .addr .cpy:hover{color:var(--mint)}
.dxp .dash-empty{background:var(--panel);border:1px dashed var(--line2);border-radius:var(--r);padding:34px;text-align:center;color:var(--mut)}
.dxp .dash-empty svg{margin-bottom:12px}
.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}
@keyframes pulse{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)}}
.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 ===== */
.dxp .wm-head{display:flex;align-items:center;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dxp .wm-head h3{font-family:var(--dsp);font-weight:600;font-size:17px}
.dxp .wm-x{margin-left:auto;min-width:44px;min-height:44px;display:grid;place-items:center;margin-right:-10px;background:none;border:none;color:var(--mut);font-size:24px;line-height:1;cursor:pointer}
.dxp .wm-x:hover{color:var(--ink)}
.dxp .wm-body{padding:20px}
.dxp .wm-load{color:var(--mut);font-size:14px;display:flex;align-items:center;justify-content:center;gap:9px;padding:30px 0}
.dxp .wm-qr{display:inline-block;padding:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px}
.dxp .wm-qr img{display:block;border-radius:6px}
.dxp .wm-note{color:var(--mut);font-size:13.5px;margin-top:14px}.dxp .wm-note b{color:var(--ink)}
.dxp .wm-label{display:block;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.dxp .wm-max{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:500;float:right}

/* ===== 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) ===== */
.dxp .recip{margin:4px 0 10px}
.dxp .recip>label{display:block;font-size:12px;color:var(--mut);margin-bottom:8px}
.dxp .recip>label #recipToTok{color:var(--ink);font-weight:600}
.dxp .recip-seg{display:flex;gap:5px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px}
.dxp .rseg{flex:1;min-height:40px;padding:9px 10px;border:none;border-radius:9px;background:transparent;color:var(--mut);font:600 12.5px var(--sans,inherit);cursor:pointer;transition:background .15s,color .15s}
.dxp .rseg:hover{color:var(--ink)}
.dxp .rseg.on{background:var(--iris);color:#fff}
.dxp .recip-field{margin-top:9px}
.dxp .recip-field input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--ink);font-family:var(--mono);font-size:13px}
.dxp .recip-field input:focus{outline:none;border-color:var(--iris)}
.dxp .recip.need .recip-field input{border-color:var(--down)}
.dxp .recip-note{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--dim)}
.dxp .recip-note.ok{color:var(--up)}
.dxp .recip-note.bad{color:var(--down)}
.dxp .wm-input{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:11px;color:var(--ink);font-family:var(--body);font-size:15px;padding:12px 14px;outline:none}
.dxp .wm-input:focus{border-color:var(--mint)}
.dxp .wm-fine{color:var(--dim);font-size:11.5px;text-align:center;margin-top:12px}

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

/* ===== exchange dashboard (mobile-first) ===== */
.dxp .mkt-search{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:11px 14px;margin-bottom:12px;color:var(--mut)}
.dxp .mkt-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--body);font-size:15px}
.dxp .mkt{display:flex;flex-direction:column;gap:2px}
.dxp .mrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;padding:12px 12px;border-radius:12px;cursor:pointer;transition:background .12s}
.dxp .mrow:hover{background:var(--panel)}
.dxp .mrow-t{display:flex;align-items:center;gap:11px;min-width:0}
.dxp .mrow-nm{min-width:0}
.dxp .mrow-nm b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxp .mrow-nm small{color:var(--dim);font-size:12px;text-transform:capitalize}
.dxp .mrow-px{font-family:var(--mono);font-size:13.5px;text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.dxp .mrow-bal{text-align:right;min-width:0}
.dxp .mrow-bal b{display:block;font-family:var(--mono);font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.dxp .mrow-bal small{color:var(--dim);font-size:12px}
.dxp .mrow-trade{font-size:12px;color:var(--iris);font-weight:600;padding:5px 12px;border:1px solid var(--line2);border-radius:100px;white-space:nowrap}
.dxp .live-dot{width:6px;height:6px;border-radius:50%;background:var(--up);animation:pulse 1.8s infinite;flex:none}
.dxp .tok-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;font-family:var(--dsp);font-weight:700;color:#06140d;overflow:hidden}
.dxp .tok-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--panel2)}
.dxp .av{position:relative;overflow:hidden}
.dxp .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dxp .pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;color:var(--mut);font-size:13px}
.dxp .pager button{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;color:var(--ink);font-weight:600;font-size:13px;padding:8px 16px;cursor:pointer}
.dxp .pager button:disabled{opacity:.4;cursor:default}

/* ===== 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 ===== */
.dxp .det-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dxp .det-px{font-family:var(--dsp);font-size:26px;font-weight:700}
.dxp .det-ch{color:var(--mut);font-size:13px;text-transform:capitalize;display:flex;align-items:center;gap:6px;margin-top:2px}
.dxp .det-bal{text-align:right}
.dxp .det-bal b{display:block;font-family:var(--mono);font-size:16px}
.dxp .det-bal small{color:var(--dim);font-size:13px}
.dxp .det-actions{display:flex;gap:8px;margin:16px 0}
.dxp .det-actions .db{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;color:var(--ink);font-weight:600;font-size:13px;padding:11px 6px;cursor:pointer;text-decoration:none;transition:.15s}
.dxp .det-actions .db:hover{border-color:var(--mint);color:var(--mint)}
.dxp .det-actions .db:first-child{background:var(--mint);color:#06140d;border-color:var(--mint)}
.dxp .det-lbl{color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:6px 0 10px}
.dxp .det-none{color:var(--dim);font-size:13px;text-align:center;padding:22px 10px;line-height:1.5}
.dxp .det-note{color:var(--dim);font-size:12px;line-height:1.5;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px}
.dxp .det-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.dxp .det-row:last-child{border-bottom:none}
.dxp .det-k{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dim)}
.dxp .det-k.in{background:var(--mint)}.dxp .det-k.out{background:var(--iris)}.dxp .det-k.mid{background:var(--amber)}
.dxp .det-rt{flex:1;min-width:0}
.dxp .det-rt b{display:block;font-size:13.5px;font-weight:600}
.dxp .det-rt small{color:var(--dim);font-size:12px}
.dxp .det-amt{font-family:var(--mono);font-size:13px;white-space:nowrap}
.dxp .det-amt.in{color:var(--mint)}.dxp .det-amt.out{color:var(--iris)}

/* 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 .hero{padding:44px 0 30px}
  .dxp .hero .wrap{grid-template-columns:minmax(0,1fr);gap:24px}.dxp .steps{grid-template-columns:1fr}          /* no long inline Universe on mobile; pick via the modal */
  .dxp .tlist{max-height:44vh}
  .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}
  .dxp .nav nav .btn-primary{display:none}        /* keep only Log in in the header; hero has the CTA */
  .dxp .btn{padding:9px 13px;font-size:13px}
  .dxp .btn-primary svg,.dxp .btn-tg svg{display:none}
  .dxp h1{font-size:34px}
  .dxp .hero .wrap{min-width:0}
  .dxp .hero .wrap>div{min-width:0}               /* let grid children shrink so nothing overflows */
  .dxp .card{padding:22px 18px}
  .dxp .amt input{font-size:19px;padding:13px 14px}
  .dxp .presets{flex-wrap:wrap}.dxp .presets button{min-width:calc(25% - 6px)}
  .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 .mbox .tlist{max-height:none;flex:1 1 auto;min-height:0}
  .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 */
.dxp .os-acct-switch{display:none}
@media(max-width:900px){
  .dxp .pt-os .os-workspace-stage.has-acct-switch:not([hidden]){display:flex;flex-direction:column}
  .dxp .pt-os .os-workspace-stage.has-acct-switch .os-acct-switch{display:flex;flex:none;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
  .dxp .os-acct-switch button{flex:1;min-height:40px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--mut);font:600 13px/1 var(--body);cursor:pointer}
  .dxp .os-acct-switch button.is-active{color:var(--mint);border-color:rgba(245,166,35,.35);background:var(--mintdim)}
}


/* 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}
.dxp .cx-panel{position:relative;background:var(--cx-glass);backdrop-filter:blur(14px) saturate(1.12);border:1px solid var(--cx-line);border-radius:22px;
  box-shadow:0 30px 72px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}

/* entrance and gentle continuous 3D float (all cards feel alive) */
.dxp .cx-form{transform-style:preserve-3d;animation:cxInUp .7s .06s cubic-bezier(.2,.8,.2,1) both,cxFloatY 10s ease-in-out 1.4s infinite}
@keyframes cxInUp{from{opacity:0;transform:perspective(1200px) rotateX(9deg) translateY(24px)}to{opacity:1;transform:none}}
@keyframes cxFloatY{0%,100%{transform:perspective(1100px) translateY(0) rotateX(0deg)}50%{transform:perspective(1100px) translateY(-6px) rotateX(.8deg)}}

/* panel header */

/* markets rail */
.dxp .tlist{display:flex;flex-direction:column;overflow-y:auto;max-height:calc(100cqh - 232px);padding:2px 6px 10px;scrollbar-width:thin}
.dxp .tlist::-webkit-scrollbar{width:6px}.dxp .tlist::-webkit-scrollbar-thumb{background:var(--cx-line2);border-radius:3px}
.dxp .trow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:13px;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .14s,box-shadow .14s}
.dxp .trow:hover{background:rgba(124,140,255,.08);transform:translateX(3px)}
.dxp .trow.active{background:linear-gradient(90deg,rgba(245,166,35,.14),rgba(245,166,35,.04));box-shadow:inset 3px 0 0 var(--cx-mint)}
.dxp .trow .av{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--cx-dsp);font-weight:700;font-size:12px;color:#04150d;position:relative;overflow:hidden;box-shadow:0 3px 10px -4px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.dxp .trow .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dxp .trow .sym{font-family:var(--cx-dsp);font-weight:600;font-size:13.5px}
.dxp .trow .ch{color:var(--cx-dim);font-size:11px;text-transform:capitalize}
.dxp .trow .px{margin-left:auto;text-align:right}
.dxp .trow .px .p{font-family:var(--cx-mono);font-size:12.5px}
.dxp .trow .px .c{display:none}
.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 .cx-form{padding:0 0 20px;overflow:hidden}
.dxp .cx-holo{height:3px;width:100%;background:var(--cx-holo3);background-size:220% 100%;animation:cxHolo 6s linear infinite;border-radius:22px 22px 0 0}
@keyframes cxHolo{to{background-position:220% 0}}
.dxp .cx-form-h{display:flex;align-items:center;justify-content:space-between;padding:17px 20px 4px}
.dxp .cx-tag{font-family:var(--cx-dsp);font-weight:700;font-size:16px;letter-spacing:-.01em}
.dxp .cx-form-body{padding:10px 20px 0}
.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)}
.dxp .presets{display:flex;gap:8px;margin-top:10px}
.dxp .presets button{flex:1;background:var(--cx-srf2);border:1px solid var(--cx-line);border-radius:11px;color:var(--cx-mut);font-family:inherit;font-weight:600;font-size:12.5px;padding:8px;cursor:pointer;transition:.14s}
.dxp .presets button:hover{color:var(--cx-mint);border-color:var(--cx-mint);background:rgba(245,166,35,.06)}
.dxp .recip{margin-top:14px}
.dxp .recip label{display:block;color:var(--cx-mut);font-size:12px;margin-bottom:7px}
.dxp .recip input{width:100%;background:rgba(7,10,17,.68);border:1px solid var(--cx-line2);border-radius:12px;color:var(--cx-ink);font-family:var(--cx-mono);font-size:13px;padding:12px;outline:none}
.dxp .recip input:focus{border-color:var(--cx-mint)}
.dxp .recip.need input{border-color:var(--cx-down)}

/* 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}
.dxp .qmut{color:var(--cx-dim);font-size:12.5px}

/* 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}
.dxp .tradebtn{position:relative;overflow:hidden;width:100%;margin-top:14px;display:flex;align-items:center;justify-content:center;font-family:var(--cx-dsp);font-weight:700;font-size:15px;padding:16px;border:none;border-radius:15px;cursor:pointer;color:#04150d;background:linear-gradient(180deg,#46e6a2,#d98c0c);box-shadow:0 14px 32px -10px rgba(245,166,35,.65),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s,box-shadow .16s}
.dxp .tradebtn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(245,166,35,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.dxp .tradebtn:disabled{opacity:.7;cursor:default;transform:none}
.dxp .tradebtn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:cxShine 4s ease-in-out infinite}
@keyframes cxShine{0%,55%{left:-70%}100%{left:150%}}
.dxp .hint{color:var(--cx-dim);font-size:12px;text-align:center;margin-top:11px;line-height:1.5}.dxp .hint a{color:var(--cx-mint);cursor:pointer}

/* 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 */
.dxp .trow .px .chg{display:block;font-family:var(--cx-mono);font-size:10.5px;font-weight:600;color:var(--cx-mut);margin-top:1px}
.dxp .trow .px .chg.up{color:var(--up,#3ddc97)}.dxp .trow .px .chg.down{color:var(--cx-down)}

/* 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)}
.dxp .mbox .tlist{max-height:52cqh}

/* 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))}
  .dxp .cx-panel{border-radius:0;border-left:none;border-right:none;box-shadow:none}
  /* 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. */
  .dxp .cx-form{order:2}

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

  /* 3D + motion keyframes for the mobile cards */
  @keyframes cxCardIn{from{opacity:0;transform:perspective(1000px) rotateX(15deg) translateY(26px) scale(.95)}to{opacity:1;transform:perspective(1000px) rotateX(0) translateY(0) scale(1)}}
  @keyframes cxFloatY{0%,100%{transform:perspective(1000px) translateY(0) rotateX(0deg)}50%{transform:perspective(1000px) translateY(-5px) rotateX(1deg)}}

  /* --- 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 */
  .dxp .cx-form{margin:14px 12px 0;border:1px solid var(--cx-line2);border-radius:22px;overflow:hidden;transform-style:preserve-3d;
    box-shadow:0 26px 60px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
    animation:cxCardIn .6s cubic-bezier(.2,.8,.2,1) both,cxFloatY 8s ease-in-out 1.2s infinite;padding-bottom:16px}
  .dxp .cx-form-h{padding:12px 16px 2px}.dxp .cx-form-body{padding:8px 16px 0}
  /* tighten vertical rhythm so the CTA sits close to the fold */
  .dxp .cx-form-body .amt{margin-top:10px}
  .dxp .presets{margin-top:8px}.dxp .presets button{padding:9px}
  .dxp .quote{margin-top:10px;min-height:0;padding:12px}
  .dxp .recip{margin-top:10px}
  .dxp .tradebtn{margin-top:12px;font-size:16px;padding:15px}
  .dxp .amt input{font-size:22px;padding:14px}
  .dxp .hint{margin-top:8px}
  /* 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 ---- */
  .dxp .cx-form.cx-panel{
    box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 26px 50px -26px rgba(0,0,0,.9), 0 2px 10px -4px rgba(0,0,0,.6);
    border-radius:20px}

  /* ---- press states: a control that does not answer the thumb feels like a web page ---- */
  .dxp .tradebtn:active{transform:translateY(1px) scale(.995)}
  .dxp .mode:active,.dxp .rseg:active,.dxp .presets button: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 .cx-conf{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.35);color:#7ef0c0;vertical-align:2px;transition:.2s}
.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 --- */.dxp .trow .px .p.hold{color:var(--cx-mint);font-weight:800}.dxp .trow .px .hu{font-size:11px;color:var(--cx-dim);margin-top:1px}@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)}.dxp .mbox .tlist{max-height:none;flex:1;min-height:0}}@keyframes cxSheet{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}@media(max-width:640px){.dxp .mbox .tlist{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}}

/* --- 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}

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

/* Page CSS only. Every structural component comes from cx.css, so this page is the same
   product as the terminal rather than a lookalike.

   🚨 body.cxb is display:flex, flex-direction:column, and cx.css assigns an explicit
   `order` to each known child. A new top-level child therefore needs BOTH an order (or it
   renders above the nav) and min-width:0 (or it cannot shrink below its content and the
   whole document gains a horizontal scrollbar at every phone width). That single omission
   pinned scrollWidth at 434px on a 360px screen. */
/* 🚨 cx.css carries no universal box-sizing reset and the document keeps the browser's
   default 8px body margin. Without both of these the padding on this subtree is ADDED to
   every width:100% element, which put the page 16px past the viewport at every phone
   width. Scoped to this page so the shared terminal styles are untouched. */
.dxp[data-mode="stocks"]{margin:0}
.dxp main.sx-main,.dxp main.sx-main *{box-sizing:border-box}
.dxp main.sx-main{order:4;min-width:0;width:100%;max-width:1240px;margin:0 auto;padding:12px 12px 44px}

/* Mobile is the base. Every breakpoint below only adds. */
.dxp .sx-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.dxp .sx-grid > *{min-width:0}

/* Amber marks the one surface on this product that is NOT confidential. */
.dxp .sx-open{border:1px solid rgba(245,181,68,.32);background:linear-gradient(180deg,rgba(245,181,68,.12),rgba(245,181,68,.035));border-radius:18px;padding:13px 14px;margin-bottom:12px;min-width:0}
.dxp .sx-open h2{font:700 13px/1.35 var(--cx-dsp,sans-serif);color:#f5b544;margin:0 0 5px;display:flex;align-items:center;gap:8px}
.dxp .sx-open p{margin:0;font-size:12.5px;line-height:1.6;color:#e6dcc6}
.dxp .sx-open a{color:#f5b544;text-decoration:underline;text-underline-offset:3px}

/* ---- the 3D motion card ---------------------------------------------------------
   The tilt lives on a WRAPPER, never on .cx-form itself: that element already owns a
   float animation built from transforms, and setting transform on it would cancel the
   animation outright. Perspective sits one level above the rotated node, which is the
   only place it composes.
   Both the wrapper and the card stay transform-style:flat. A shared preserve-3d context
   makes hit testing resolve to the wrapper plane, so clicks never reach the fields. */
.dxp .sx-persp{perspective:1200px;min-width:0}
.dxp .sx-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:flat;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.dxp .sx-tilt>.cx-form{transform-style:flat}
.dxp .sx-tilt.live{transition:transform .09s linear}
/* Pointer-following sheen. Pure decoration, so it is the first thing to go when the
   viewer asks for less motion. */
.dxp .sx-glare{position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(340px 340px at var(--gx,50%) var(--gy,0%),rgba(124,140,255,.16),transparent 62%);z-index:2}
.dxp .sx-persp:hover .sx-glare{opacity:1}
@media (prefers-reduced-motion:reduce){
  .dxp .sx-tilt{transform:none!important;transition:none}
  .dxp .sx-glare{display:none}
}

.dxp .sx-side{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05)}
.dxp .sx-sbtn{min-height:36px;padding:0 15px;border:0;border-radius:9px;background:transparent;color:var(--cx-mut,#8b95a6);font:700 12.5px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.dxp .sx-sbtn[aria-selected="true"]{background:var(--cx-ink,#eaf0f7);color:#06080e}
.dxp .sx-sbtn:focus-visible{outline:2px solid var(--cx-iris,#7c8cff);outline-offset:2px}

.dxp .sx-sel,.dxp .sx-in{width:100%;max-width:100%;min-width:0;min-height:48px;border-radius:12px;border:1px solid var(--cx-line2,rgba(255,255,255,.13));background:var(--cx-bg2,#080b12);color:var(--cx-ink,#eaf0f7);padding:0 12px;outline:none;-webkit-appearance:none;appearance:none}
.dxp .sx-sel{font:600 14px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.dxp .sx-in{font:600 13px/1 var(--cx-mono,monospace)}
.dxp .sx-sel:focus,.dxp .sx-in:focus{outline:2px solid var(--cx-iris,#7c8cff);outline-offset:1px}
.dxp .sx-lb{color:var(--cx-mut,#8b95a6);font:600 10.5px/1 var(--cx-mono,monospace);letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;display:block}
.dxp .sx-sub{margin-top:6px;font:500 11.5px/1.45 'Inter',system-ui,sans-serif;color:var(--cx-dim,#5c6675);overflow-wrap:anywhere}
.dxp .sx-f{min-width:0;margin-top:12px}

/* selected asset badge inside the card */
.dxp .sx-pick{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:11px}
.dxp .sx-pick .sx-ic{width:40px;height:40px;font-size:15px}
.dxp .sx-pick-t{min-width:0}
.dxp .sx-pick-k{font:700 16px/1.15 var(--cx-dsp,sans-serif);color:var(--cx-ink,#eaf0f7)}
.dxp .sx-pick-s{font:500 11.5px/1.3 'Inter',system-ui,sans-serif;color:var(--cx-dim,#5c6675);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxp .sx-pick-p{margin-left:auto;text-align:right;flex:none}

/* logo art with a lettermark underneath, so a missing image still renders a row */
.dxp .sx-ic{position:relative;width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;font:700 13px/1 var(--cx-dsp,sans-serif);color:#06140d;background:linear-gradient(140deg,#7c8cff,#f5a623)}
.dxp .sx-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0e14}

.dxp .sx-hd{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--cx-line,rgba(255,255,255,.07));flex-wrap:wrap;min-width:0}
.dxp .sx-hd h2{font:700 14px/1.2 var(--cx-dsp,sans-serif);margin:0}
.dxp .sx-hd .meta{font:500 11px/1.3 var(--cx-mono,monospace);color:var(--cx-dim,#5c6675);margin-left:auto;text-align:right}
.dxp .sx-tabs{display:flex;gap:5px;overflow-x:auto;padding:11px 14px;border-bottom:1px solid var(--cx-line,rgba(255,255,255,.07));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dxp .sx-tabs::-webkit-scrollbar{display:none}
.dxp .sx-tab{flex:none;min-height:38px;padding:0 13px;border-radius:10px;border:1px solid var(--cx-line,rgba(255,255,255,.07));background:var(--cx-srf,rgba(18,23,33,.66));color:var(--cx-mut,#8b95a6);font:600 12.5px/1 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.dxp .sx-tab[aria-selected="true"]{background:var(--cx-ink,#eaf0f7);color:#06080e;border-color:transparent}

/* rows: the terminal's .trow, plus what a stock needs */
.dxp .trow.sx-r{cursor:pointer;gap:10px;min-width:0;padding:11px 14px}
.dxp .trow.sx-r .nm{min-width:0;flex:1}
.dxp .sx-tk{font:700 14px/1.2 var(--cx-dsp,sans-serif);color:var(--cx-ink,#eaf0f7)}
.dxp .sx-nm{color:var(--cx-dim,#5c6675);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxp .sx-px{margin-left:auto;text-align:right;flex:none;min-width:0}
.dxp .sx-live-px{font:700 14px/1.15 var(--cx-mono,monospace);color:var(--cx-ink,#eaf0f7);transition:color .3s;white-space:nowrap}
.dxp .sx-live-px.up{color:var(--up,#3ddc97)}
.dxp .sx-live-px.down{color:var(--cx-down,#ff5d73)}
.dxp .sx-rail-px{font:500 10.5px/1.35 var(--cx-mono,monospace);color:var(--cx-dim,#5c6675);margin-top:3px;white-space:nowrap}
/* Hidden on the narrowest screens: with it in, the right column grew wide enough to crush
   the company name to an ellipsis, and the name is what identifies the row. */
.dxp .sx-cost{display:none}
.dxp .trow.sx-r .nm{flex:1 1 auto;min-width:0}
.dxp .sx-cls{display:none}
.dxp .sx-off{opacity:.45}

.dxp .sx-tick{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--cx-mono,monospace);color:var(--cx-mint,#f5a623);white-space:nowrap}
.dxp .sx-tick i{width:6px;height:6px;border-radius:50%;background:var(--cx-mint,#f5a623);box-shadow:0 0 0 3px rgba(245,166,35,.18);flex:none}
.dxp .sx-tick.closed{color:var(--cx-dim,#5c6675)}
.dxp .sx-tick.closed i{background:var(--cx-dim,#5c6675);box-shadow:0 0 0 3px rgba(255,255,255,.06);animation:none}
@media(prefers-reduced-motion:no-preference){.dxp .sx-tick i{animation:sxp 2.2s ease-in-out infinite}@keyframes sxp{50%{opacity:.32}}}

.dxp .sx-note{color:var(--cx-dim,#5c6675);font-size:11.5px;line-height:1.6;margin:0;padding:14px}
.dxp .sx-pay{margin-top:13px;padding-top:13px;border-top:1px solid rgba(245,181,68,.32);display:none}
.dxp .sx-pay.on{display:block}
.dxp .sx-payv{font:700 20px/1.2 var(--cx-mono,monospace);color:#f5b544;margin:5px 0 4px;overflow-wrap:anywhere}
.dxp .sx-paytop{display:flex;gap:13px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;min-width:0}
.dxp .sx-qr{border-radius:12px;background:#0b0e14;flex:none;max-width:100%;height:auto}
.dxp .sx-addr{margin-top:12px;display:flex;gap:8px;min-width:0}
.dxp .sx-addr code{flex:1;min-width:0;background:var(--cx-bg2,#080b12);border:1px solid var(--cx-line2,rgba(255,255,255,.13));border-radius:11px;padding:11px 12px;font:600 11px/1.5 var(--cx-mono,monospace);color:var(--cx-ink,#eaf0f7);overflow-wrap:anywhere}
.dxp .sx-cp{flex:none;min-height:44px;padding:0 13px;border-radius:11px;border:1px solid var(--cx-line2,rgba(255,255,255,.13));background:transparent;color:var(--cx-ink,#eaf0f7);font:600 12.5px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.dxp .sx-st{margin-top:12px;border-radius:11px;background:rgba(255,255,255,.05);padding:11px 12px;font:600 12.5px/1.45 'Inter',system-ui,sans-serif;color:var(--cx-mut,#8b95a6);overflow-wrap:anywhere}
.dxp .sx-st.good{color:var(--up,#3ddc97);background:rgba(61,220,151,.09)}
.dxp .sx-st.bad{color:var(--cx-down,#ff5d73);background:rgba(255,93,115,.09)}
.dxp .sx-ln{margin-top:11px;display:grid;gap:7px;font:500 12.5px/1.4 'Inter',system-ui,sans-serif;color:var(--cx-mut,#8b95a6)}
.dxp .sx-ln div{display:flex;justify-content:space-between;gap:12px;min-width:0}
.dxp .sx-ln span{color:var(--cx-ink,#eaf0f7);font-family:var(--cx-mono,monospace);text-align:right;overflow-wrap:anywhere}
.dxp .sx-err{font:600 12.5px/1.5 'Inter',system-ui,sans-serif;color:var(--cx-down,#ff5d73);margin-top:9px}
.dxp .sx-again{margin-top:11px;min-height:44px;width:100%;border-radius:11px;border:1px solid var(--cx-line2,rgba(255,255,255,.13));background:transparent;color:var(--cx-mut,#8b95a6);font:600 12.5px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.dxp .qline{display:flex;justify-content:space-between;gap:12px;min-width:0;padding:3px 0}
.dxp .qline b{font-family:var(--cx-mono,monospace);color:var(--cx-ink,#eaf0f7);text-align:right;overflow-wrap:anywhere}

/* 480 and up: the class chip earns its space */
@media(min-width:480px){
  .dxp main.sx-main{padding:14px 16px 46px}
  .dxp .sx-cost{display:inline}
  .dxp .sx-cls{display:inline-block;font:500 9.5px/1 var(--cx-mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--cx-dim,#5c6675);border:1px solid var(--cx-line2,rgba(255,255,255,.13));border-radius:5px;padding:3px 5px;flex:none}
}
/* 960 and up: two columns, swap card sticky beside the board */
@media(min-width:960px){
  .dxp .sx-grid{grid-template-columns:minmax(0,404px) minmax(0,1fr);gap:16px;align-items:start}
  .dxp .sx-persp{position:sticky;top:78px}
  .dxp main.sx-main{padding:18px 20px 52px}
  .dxp .sx-nm{max-width:280px}
}

/* ---- v2 layout ----------------------------------------------------------------------
   One flat terminal: a status strip, the markets board and the ticket side by side, each
   scrolling inside its own panel so the frame never scrolls as a whole on desktop. The
   tilt, glare and float of the old card are gone, the card is a plain panel. */
.dxp .sx-main .cx-form, .dxp .sx-main .cx-panel{animation:none!important;transform:none!important}
.dxp .sx-main .cx-holo, .dxp .sx-glare{display:none!important}
.dxp .sx-tilt{transform:none!important;transition:none;will-change:auto}
.dxp .sx-persp{perspective:none}

.dxp .sx-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 2px 12px}
.dxp .sx-strip h1{margin:0;font:800 clamp(19px,2.2cqw,26px)/1.1 var(--cx-dsp,sans-serif);letter-spacing:-.03em;color:var(--cx-ink,#eaf0f7)}
.dxp .sx-strip h1 em{font-style:normal;color:#f5a623}
.dxp .sx-strip p{margin:0;flex:1 1 260px;min-width:0;color:var(--cx-mut,#8b95a6);font-size:12.5px;line-height:1.5}
.dxp .sx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.dxp .sx-chip{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;border-radius:999px;
  border:1px solid var(--cx-line2,rgba(255,255,255,.13));background:rgba(255,255,255,.035);
  font:600 11.5px/1 var(--cx-mono,monospace);color:var(--cx-mut,#8b95a6);white-space:nowrap}
.dxp .sx-chip.amber{color:#f5a623;border-color:rgba(245,166,35,.32);background:rgba(245,166,35,.08)}
.dxp .sx-chip.blue{color:#7e9bff;border-color:rgba(74,114,255,.32);background:rgba(74,114,255,.09)}

.dxp .sx-find{display:block;padding:10px 14px;border-bottom:1px solid var(--cx-line,rgba(255,255,255,.07))}
.dxp .sx-find input{width:100%;min-height:42px;border-radius:11px;border:1px solid var(--cx-line2,rgba(255,255,255,.13));
  background:var(--cx-bg2,#080b12);color:var(--cx-ink,#eaf0f7);padding:0 13px;font:500 13.5px/1 'Inter',system-ui,sans-serif;outline:none}
.dxp .sx-find input::placeholder{color:var(--cx-dim,#5c6675)}
.dxp .sx-find input:focus{border-color:rgba(245,166,35,.5);box-shadow:0 0 0 3px rgba(245,166,35,.12)}

/* the site stylesheet pads every section by 48px, which opened a dead band above each panel */
.dxp .sx-main section.cx-panel{padding:0}
.dxp .sx-hd,.dxp .sx-tabs,.dxp .sx-find{flex:none}
.dxp .sx-main .tradebtn{background:linear-gradient(135deg,#ffc468,#f5a623);color:#1a1205;border:0;box-shadow:0 10px 26px rgba(245,166,35,.16)}
.dxp .sx-main .rseg.on{background:rgba(245,166,35,.16);color:#f5a623;box-shadow:inset 0 0 0 1px rgba(245,166,35,.4)}
.dxp .sx-main .tradebtn:disabled{background:rgba(255,255,255,.07);color:var(--cx-mut,#8b95a6);box-shadow:none;cursor:not-allowed}
.dxp .sx-main .cx-panel{border-radius:18px;background:rgba(14,18,26,.86);border:1px solid var(--cx-line,rgba(255,255,255,.08))}
.dxp .sx-main .cx-form-h{padding:14px 16px}
.dxp .sx-main .cx-form-body{padding:4px 16px 18px}
.dxp .trow.sx-r{border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s}
.dxp .trow.sx-r:not(.sx-off):hover{background:rgba(245,166,35,.06)}
.dxp .sx-off{opacity:.5}

@media(min-width:960px){
  .dxp[data-mode="stocks"]{height:100cqh;overflow:hidden}
  .dxp main.sx-main{max-width:none;height:100cqh;display:flex;flex-direction:column;padding:14px 18px 14px}
  .dxp .sx-grid{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) minmax(380px,430px);gap:14px;align-items:stretch}
  .dxp #boardPanel{order:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .dxp #boardPanel .sx-rows{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .dxp #boardPanel .sx-note{flex:none;border-top:1px solid var(--cx-line,rgba(255,255,255,.07))}
  .dxp .sx-persp{order:2;position:static;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .dxp .sx-nm{max-width:360px}
}


/* Closed state. While no private route exists the terminal is not shown at all, rather than
   shown and refusing at the last step. The gate is the SERVER's measurement. */
body.sg-closed .dxp .cx, body.sg-closed .dxp main:not(.sg-main), body.sg-closed .dxp .stk-wrap, body.sg-closed .dxp .mact, body.sg-closed .dxp #mAct { display: none !important; }
.dxp .sg-main{display:none;box-sizing:border-box;width:100%;max-width:1240px;margin:0 auto;padding:14px 14px 40px;gap:14px;
  grid-template-columns:minmax(0,1fr);align-items:stretch}
body.sg-closed .dxp .sg-main{display:grid}
.dxp .sg-main *{box-sizing:border-box}
.dxp .sg-hero{position:relative;overflow:hidden;border:1px solid rgba(245,166,35,.24);border-radius:22px;padding:28px 24px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(245,166,35,.13),transparent 60%),linear-gradient(160deg,#121722,#0b0f16)}
.dxp .sg-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(245,166,35,.4);color:#f5a623;font:700 10.5px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.dxp .sg-tag i{width:6px;height:6px;border-radius:50%;background:#f5a623}
.dxp .sg-hero h1{margin:16px 0 10px;font-size:clamp(26px,3.4cqw,42px);letter-spacing:-.04em;line-height:1.04;color:#eaf0f7}
.dxp .sg-hero h1 span{color:#f5a623}
.dxp .sg-hero p{margin:0;color:#8b95a6;font-size:14.5px;max-width:54ch;line-height:1.6}
.dxp .sg-why{margin-top:18px;padding:13px 15px;border-radius:13px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.07);color:#c3cbda;font-size:13px;line-height:1.55}
.dxp .sg-why b{color:#f5a623}
.dxp .sg-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.dxp .sg-btn{min-height:46px;display:inline-flex;align-items:center;gap:8px;padding:12px 19px;border-radius:12px;border:0;
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;background:#f5a623;color:#1a1205;transition:filter .15s}
.dxp .sg-btn:hover{filter:brightness(1.07)}
.dxp .sg-btn.ghost{background:transparent;color:#aab3c4;border:1px solid rgba(255,255,255,.14)}
.dxp .sg-btn.ghost:hover{color:#eaf0f7;border-color:#f5a623}
.dxp .sg-card{display:flex;flex-direction:column;min-height:0;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(14,18,26,.86);overflow:hidden}
.dxp .sg-ch{display:flex;align-items:baseline;gap:10px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.dxp .sg-ch b{font-size:15px;color:#eaf0f7}
.dxp .sg-ch span{color:#8b95a6;font-size:12px}
.dxp .sg-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.dxp .sg-a{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.045)}
.dxp .sg-a:last-child{border-bottom:0}
.dxp .sg-a .sg-k{min-width:0;flex:1}
.dxp .sg-a b{display:block;font-size:14px;color:#eaf0f7}
.dxp .sg-a i{display:block;font-style:normal;color:#7b8497;font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxp .sg-a u{text-decoration:none;font:700 14px ui-monospace,Menlo,monospace;color:#eaf0f7;font-variant-numeric:tabular-nums;flex:none}
.dxp .sg-a em{font-style:normal;flex:none;font:600 9.5px ui-monospace,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:#7b8497;border:1px solid rgba(255,255,255,.13);border-radius:5px;padding:3px 6px}
@media(min-width:900px){
  body.sg-closed .dxp .sg-main{height:100cqh;padding:16px 18px;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)}
  .dxp .sg-hero{display:flex;flex-direction:column;justify-content:center;padding:40px 38px}
}

/* the shell chrome owns navigation, so the page's own phone bars and promo banner stay out */
.dxp .mnav, .dxp .mact, .dxp .rhbanner { display: none !important; }

.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;
}
.dxp .btn-primary { color: #1a1205; box-shadow: 0 8px 22px -8px rgba(245, 166, 35, .55); }