/* generated by tools/bundle-css.py from: style, os-chrome, picker, trade, intent-orders, palette */
/* PipTradeDex, brand and terminal. Committed dark visual world (trading terminal). */
:root{
  --bg:#080a0f; --bg2:#0b0e14; --panel:#10141d; --panel2:#141926; --line:rgba(255,255,255,.075);
  --line2:rgba(255,255,255,.12);
  --ink:#e9edf4; --mut:#8b95a6; --dim:#7a8597;
  --mint:#f5a623; --mint2:#d98c0c; --mintdim:rgba(245,166,35,.14);
  --iris:#7c8cff; --iris2:#9aa6ff; --irisdim:rgba(124,140,255,.14);
  --up:#f5a623; --down:#ff5d73; --amber:#f5b544;
  --r:16px; --rs:11px;
  --dsp:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow:0 24px 60px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{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 */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
   radial-gradient(680px 440px at 82% -8%, rgba(245,166,35,.10), transparent 60%),
   radial-gradient(720px 520px at 8% 8%, rgba(124,140,255,.09), transparent 62%),
   var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(circle at 50% 0%,#000,transparent 78%)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
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)}
.nav .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:700;font-size:18px;letter-spacing:-.02em}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav nav a{color:var(--mut);font-size:14px;font-weight:500;transition:color .18s}
.nav nav a:hover{color:var(--ink)}
.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}
.btn-primary{background:linear-gradient(180deg,var(--mint),var(--mint2));color:#04150d;box-shadow:0 8px 22px -8px rgba(245,166,35,.6)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(245,166,35,.7)}
.btn-ghost{background:var(--panel);border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn-tg{background:linear-gradient(180deg,#2aa7e6,#1d8fce);color:#fff}
.btn-tg:hover{transform:translateY(-1px)}

/* ---------- hero ---------- */
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}
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 ---------- */
section{padding:64px 0;position:relative}
h2{font-family:var(--dsp);font-weight:700;font-size:clamp(27px,3.4vw,38px);letter-spacing:-.025em;text-wrap:balance}

/* ---------- feature cards ---------- */
.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}
.card:hover{border-color:var(--line2);transform:translateY(-3px)}
.card h3{font-family:var(--dsp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--mut);font-size:14px}

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

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

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

/* ---------- reveal (fail-safe: visible by default) ---------- */

/* ================= TERMINAL ================= */
.trade{min-width:0}
.tp-head{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--line)}
.tp-head h4{font-family:var(--dsp);font-weight:600;font-size:14px}
.pill{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--mint);background:var(--mintdim);
  padding:3px 9px;border-radius:100px}
.search{margin:12px;position:relative}
.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}
.search input:focus{border-color:var(--mint)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
.tlist{overflow-y:auto;max-height:calc(100vh - 210px)}
.trow{display:flex;align-items:center;gap:11px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .15s}
.trow:hover{background:var(--panel2)}
.trow.active{background:var(--panel2);box-shadow:inset 3px 0 0 var(--mint)}
.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}
.trow .sym{font-weight:600;font-size:14px}
.trow .ch{color:var(--dim);font-size:11.5px;text-transform:capitalize}
.trow .px{margin-left:auto;text-align:right}
.trow .px .p{font-family:var(--mono);font-size:13px}
.trow .px .c{font-size:11px;color:var(--dim)}

.trade{display:flex;flex-direction:column;gap:18px}
.legrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end}
.assetbtn{min-width:0}.assetbtn span:not(.av){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg label{color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:block}
.assetbtn{width:100%;display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:12px;padding:11px 13px;cursor:pointer;color:var(--ink);font-size:14px;font-weight:600;transition:.15s}
.assetbtn:hover{border-color:var(--mint)}
.assetbtn .ch{color:var(--dim);font-size:11px;font-weight:500;margin-left:auto;text-transform:capitalize}
.swapx{width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);background:var(--panel2);color:var(--mut);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s;margin-bottom:2px}
.swapx:hover{color:var(--mint);border-color:var(--mint);transform:rotate(180deg)}
.amt{margin-top:16px}
.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}
.amt input:focus{border-color:var(--mint)}
.presets{display:flex;gap:8px;margin-top:10px}
.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}
.presets button:hover{color:var(--mint);border-color:var(--mint)}

.quote{margin-top:18px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px;min-height:70px}
.qline{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:13.5px}
.qline span:first-child{color:var(--mut)}
.qline .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.qbig{font-family:var(--dsp);font-weight:700;font-size:26px;letter-spacing:-.02em}
.qmut{color:var(--dim);font-size:12px}
.toggle{width:46px;height:26px;border-radius:100px;background:var(--panel2);border:1px solid var(--line2);
  position:relative;cursor:pointer;flex:none;transition:.2s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--mut);transition:.2s}
.toggle.on{background:var(--iris);border-color:var(--iris)}
.toggle.on::after{left:22px;background:#fff}

.tradebtn{width:100%;margin-top:16px;justify-content:center;font-size:15px;padding:14px}
.hint{color:var(--dim);font-size:12px;text-align:center;margin-top:10px}

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

/* premium modal */
.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}
.modal.open{display:flex;opacity:1}
.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)}
.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}}
#pickList{max-height:52vh}

/* ================= DASHBOARD ================= */
.dash{max-width:940px;margin:0 auto;padding:32px 22px 60px}
.addr{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px}
.addr code{font-family:var(--mono);font-size:12px;color:var(--mut);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr .cpy{background:none;border:none;color:var(--dim);cursor:pointer;padding:2px;display:flex;transition:color .15s}
.addr .cpy:hover{color:var(--mint)}
.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) ===== */
.dep{display:flex;flex-direction:column}
.dep-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.dep-head b{font-family:var(--dsp);font-weight:600;font-size:14px}
.dep-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pulse 1.8s infinite}
@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)}}
.dep-track{display:flex;align-items:flex-start;margin:6px 0 14px}
.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}
.ts .td{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);background:var(--panel);transition:.3s}
.ts.on{color:var(--mint)}.ts.on .td{border-color:var(--mint);background:var(--mint);box-shadow:0 0 0 3px var(--mintdim)}
.tl{flex:1;height:2px;background:var(--line2);margin:5px -8px 0;transition:.3s}
.tl.on{background:var(--mint)}
.dep-addr-label{color:var(--mut);font-size:12px;margin:12px 0 6px}
.dep-foot{color:var(--dim);font-size:12.5px;margin-top:12px}

/* ===== balance chip (terminal) ===== */
.bal-chip{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.bal-chip b{font-family:var(--mono)}
.bal-chip.low{border-color:rgba(245,181,68,.4);background:rgba(245,181,68,.08);color:var(--amber)}
.bal-chip.low b{color:var(--amber)}

/* ===== wallet action buttons + modal ===== */
.wm-head{display:flex;align-items:center;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.wm-head h3{font-family:var(--dsp);font-weight:600;font-size:17px}
.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}
.wm-x:hover{color:var(--ink)}
.wm-body{padding:20px}
.wm-load{color:var(--mut);font-size:14px;display:flex;align-items:center;justify-content:center;gap:9px;padding:30px 0}
.wm-qr{display:inline-block;padding:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px}
.wm-qr img{display:block;border-radius:6px}
.wm-note{color:var(--mut);font-size:13.5px;margin-top:14px}.wm-note b{color:var(--ink)}
.wm-label{display:block;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.wm-max{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:500;float:right}

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

/* ===== trading chart ===== */
.chart{margin:2px 0 14px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.chart-meta{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.chart-sym{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.chart-px{font-family:var(--dsp);font-size:18px;font-weight:700}
.chart-chg{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--mut)}
.chart-chg.up{color:var(--up)}.chart-chg.down{color:var(--down)}
.chart-range{display:flex;gap:3px;flex:none}
.chart-range button{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:7px;font-size:11px;font-weight:600;padding:3px 8px;cursor:pointer;transition:.12s}
.chart-range button.on{background:var(--mint);border-color:var(--mint);color:#07120c}
.chart canvas{width:100%;height:140px;display:block}

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

/* ===== swap progress card (funded swap, not a bridge deposit) ===== */
.swp{padding:4px 2px}
.swp-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;margin-bottom:16px}
.swp-side{text-align:center;min-width:0}
.swp-side .av{width:40px;height:40px;margin:0 auto 8px;font-size:15px}
.swp-a{font-family:var(--dsp);font-size:18px;font-weight:700;line-height:1.15;word-break:break-word}
.swp-s{font-size:12px;color:var(--mut);margin-top:2px}
.swp-mid{align-self:center;color:var(--mint)}
.swp-arw{animation:swparw 1.6s ease-in-out infinite}
@keyframes swparw{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.swp-stat{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--dsp);font-weight:600;font-size:15px;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.swp-ok{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mint);color:#07120c;font-size:13px;font-weight:800}
.swp-foot{text-align:center;font-size:12.5px;color:var(--mut);margin-top:12px}

/* ===== inline recipient (non-custodied destination chains) ===== */
.recip{margin:4px 0 10px}
.recip>label{display:block;font-size:12px;color:var(--mut);margin-bottom:8px}
.recip>label #recipToTok{color:var(--ink);font-weight:600}
.recip-seg{display:flex;gap:5px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:4px}
.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}
.rseg:hover{color:var(--ink)}
.rseg.on{background:var(--iris);color:#fff}
.recip-field{margin-top:9px}
.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}
.recip-field input:focus{outline:none;border-color:var(--iris)}
.recip.need .recip-field input{border-color:var(--down)}
.recip-note{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--dim)}
.recip-note.ok{color:var(--up)}
.recip-note.bad{color:var(--down)}
.slip{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px;padding:0 2px}
.slip-lb{font-size:12px;color:var(--mut)}
.slip-opts{display:flex;gap:5px}
.slip-opts button{background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:5px 11px;font-weight:600;font-size:12px;cursor:pointer;transition:background .15s,color .15s}
.slip-opts button:hover{color:var(--ink)}
.slip-opts button.on{background:var(--iris);border-color:var(--iris);color:#fff}
.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}
.wm-input:focus{border-color:var(--mint)}
.wm-fine{color:var(--dim);font-size:11.5px;text-align:center;margin-top:12px}

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

/* ===== exchange dashboard (mobile-first) ===== */
.av{position:relative;overflow:hidden}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== portfolio donut ===== */

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

/* premium toast */
.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}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--mint);box-shadow:0 0 0 4px var(--mintdim)}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.toast.err{border-color:rgba(255,93,115,.45)}
.toast.err::before{background:var(--down);box-shadow:0 0 0 4px rgba(255,93,115,.18)}

@media(max-width:900px){.steps{grid-template-columns:1fr}          /* no long inline Universe on mobile; pick via the modal */
  .tlist{max-height:44vh}
  .nav nav a.hide-sm{display:none}
  section{padding:48px 0}
}
@media(max-width:560px){
  body{font-size:14px}
  .wrap{padding:0 16px}
  .nav .wrap{height:58px;gap:8px}
  .brand{font-size:16px;gap:8px}
  .nav nav{gap:8px}
  .nav nav .btn-primary{display:none}        /* keep only Log in in the header; hero has the CTA */
  .btn{padding:9px 13px;font-size:13px}
  .btn-primary svg,.btn-tg svg{display:none}
  h1{font-size:34px}               /* let grid children shrink so nothing overflows */
  .card{padding:22px 18px}
  .tp-head{padding:13px 14px}
  .legrow{grid-template-columns:1fr auto 1fr;gap:8px}
  .assetbtn{padding:10px;font-size:13px;gap:7px}.assetbtn .av{width:28px;height:28px;font-size:12px}
  .swapx{width:34px;height:34px}
  .amt input{font-size:19px;padding:13px 14px}
  .presets{flex-wrap:wrap}.presets button{min-width:calc(25% - 6px)}
  .qbig{font-size:22px}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:14px}footer nav{margin-left:0}
  /* mobile modals become a constrained bottom sheet (no giant over-length list) */
  .modal{padding:0;align-items:flex-end}
  .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)}
  .mbox .search{flex:none}.mbox .tp-head{flex:none}
  .mbox .tlist,#pickList{max-height:none;flex:1 1 auto;min-height:0}
  .dash{padding:22px 16px 50px}
}
@keyframes msheet{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.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}
: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 */

/* from style.css */
/* PipTradeDex, brand and terminal. Committed dark visual world (trading terminal). */
:root{
  --bg:#080a0f; --bg2:#0b0e14; --panel:#10141d; --panel2:#141926; --line:rgba(255,255,255,.075);
  --line2:rgba(255,255,255,.12);
  --ink:#e9edf4; --mut:#8b95a6; --dim:#7a8597;
  --mint:#f5a623; --mint2:#d98c0c; --mintdim:rgba(245,166,35,.14);
  --iris:#7c8cff; --iris2:#9aa6ff; --irisdim:rgba(124,140,255,.14);
  --up:#f5a623; --down:#ff5d73; --amber:#f5b544;
  --r:16px; --rs:11px;
  --dsp:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow:0 24px 60px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{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 */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
   radial-gradient(680px 440px at 82% -8%, rgba(245,166,35,.10), transparent 60%),
   radial-gradient(720px 520px at 8% 8%, rgba(124,140,255,.09), transparent 62%),
   var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(circle at 50% 0%,#000,transparent 78%)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.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}
.btn-primary{background:linear-gradient(180deg,var(--mint),var(--mint2));color:#04150d;box-shadow:0 8px 22px -8px rgba(245,166,35,.6)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(245,166,35,.7)}
.btn-ghost{background:var(--panel);border-color:var(--line2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn-tg{background:linear-gradient(180deg,#2aa7e6,#1d8fce);color:#fff}
.btn-tg:hover{transform:translateY(-1px)}

/* ---------- hero ---------- */

/* ---------- section shell ---------- */

/* ---------- feature cards ---------- */

/* ---------- how it works ---------- */

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

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

/* ---------- reveal (fail-safe: visible by default) ---------- */

/* ================= TERMINAL ================= */
.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}

/* premium modal */
.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}
.modal.open{display:flex;opacity:1}
.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)}
.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 ================= */
.addr{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px}
.addr code{font-family:var(--mono);font-size:12px;color:var(--mut);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr .cpy{background:none;border:none;color:var(--dim);cursor:pointer;padding:2px;display:flex;transition:color .15s}
.addr .cpy:hover{color:var(--mint)}
.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) ===== */

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

/* ===== wallet action buttons + modal ===== */
.wm-head{display:flex;align-items:center;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.wm-head h3{font-family:var(--dsp);font-weight:600;font-size:17px}
.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}
.wm-x:hover{color:var(--ink)}
.wm-body{padding:20px}
.wm-load{color:var(--mut);font-size:14px;display:flex;align-items:center;justify-content:center;gap:9px;padding:30px 0}
.wm-qr{display:inline-block;padding:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px}
.wm-qr img{display:block;border-radius:6px}
.wm-note{color:var(--mut);font-size:13.5px;margin-top:14px}.wm-note b{color:var(--ink)}
.wm-label{display:block;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.wm-max{text-transform:none;letter-spacing:0;color:var(--dim);font-weight:500;float:right}

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

/* ===== trading chart ===== */

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

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

/* ===== inline recipient (non-custodied destination chains) ===== */
.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}
.wm-input:focus{border-color:var(--mint)}
.wm-fine{color:var(--dim);font-size:11.5px;text-align:center;margin-top:12px}

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

/* ===== exchange dashboard (mobile-first) ===== */
.av{position:relative;overflow:hidden}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== portfolio donut ===== */

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

/* premium toast */
.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}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--mint);box-shadow:0 0 0 4px var(--mintdim)}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.toast.err{border-color:rgba(255,93,115,.45)}
.toast.err::before{background:var(--down);box-shadow:0 0 0 4px rgba(255,93,115,.18)}

@media(max-width:900px){          /* no long inline Universe on mobile; pick via the modal */
}
@media(max-width:560px){
  body{font-size:14px}        /* keep only Log in in the header; hero has the CTA */
  .btn{padding:9px 13px;font-size:13px}
  .btn-primary svg,.btn-tg svg{display:none}               /* let grid children shrink so nothing overflows */footer nav{margin-left:0}
  /* mobile modals become a constrained bottom sheet (no giant over-length list) */
  .modal{padding:0;align-items:flex-end}
  .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)}
}
@keyframes msheet{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.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}
: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 */

/* from unified-os.css */
:root {
  --os-obsidian: #07090d;
  --os-carbon: #10141b;
  --os-graphite: #171d27;
  --os-paper: #f4f1ea;
  --os-muted: #929bad;
  --os-line: rgba(255, 255, 255, 0.09);
  --os-amber: #f5a623;
  --os-amber-soft: rgba(245, 166, 35, 0.14);
  --os-blue: #4a72ff;
  --os-blue-soft: rgba(74, 114, 255, 0.16);
  --os-success: #23b26d;
  --os-risk: #ef5b67;
  --os-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --os-vvh: 100dvh;
}

html {
  background: var(--os-obsidian);
  color-scheme: dark;
}

body.pt-os {
  color: var(--os-paper);
  background:
    radial-gradient(circle at 14% -8%, rgba(245, 166, 35, 0.11), transparent 29rem),
    radial-gradient(circle at 88% 4%, rgba(74, 114, 255, 0.12), transparent 32rem),
    var(--os-obsidian);
}

.pt-os .cx-amb .b1 { background: rgba(245, 166, 35, 0.12); }
.pt-os .cx-amb .b2 { background: rgba(74, 114, 255, 0.12); }
.pt-os .cx-amb .grid {
  opacity: 0.13;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.pt-os .cxnav {
  min-height: 68px;
  padding: 0 clamp(18px, 3vw, 48px);
  border-bottom: 1px solid var(--os-line);
  background: rgba(7, 9, 13, 0.82);
  backdrop-filter: blur(24px) saturate(125%);
}

.pt-os .cxbrand {
  color: var(--os-paper);
  letter-spacing: -0.035em;
}

.pt-os .cxbrand > span:not(.tagchip) { color: var(--os-amber); }
.pt-os .cxbrand svg rect { fill: #121720; }
.pt-os .cxbrand svg path:first-of-type { stroke: var(--os-amber); }
.pt-os .cxbrand svg path:last-of-type { stroke: var(--os-blue); }

.os-workspaces {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.os-workspaces::-webkit-scrollbar { display: none; }

.os-workspace,
.os-tx-trigger,
.os-icon-button,
.os-modal-button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #a7b0c0;
  background: transparent;
  font: 650 13px/1 inherit;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.os-workspace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  white-space: nowrap;
}

.os-workspace svg { width: 16px; height: 16px; }
.os-workspace:hover { color: var(--os-paper); background: rgba(255, 255, 255, 0.045); }
.os-workspace.is-active {
  color: var(--os-paper);
  border-color: rgba(245, 166, 35, 0.26);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0.07));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 10px 26px rgba(0, 0, 0, 0.18);
}

.os-workspace.is-active svg { color: var(--os-amber); }
.os-tx-trigger.os-tx-header { display: none; }

.os-tx-trigger {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  color: var(--os-paper);
  border-color: var(--os-line);
  background: rgba(255, 255, 255, 0.035);
}

.os-tx-trigger:hover { transform: translateY(-1px); border-color: rgba(245, 166, 35, 0.34); }
.os-tx-count {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 99px;
  color: #17100a;
  background: var(--os-amber);
  font: 800 11px/1 inherit;
}
.pt-os .modal { z-index: 100; }
/* The footer is NOT hidden here. Hiding it on every framed workspace left Terms, Privacy and
   the docs unreachable from five of the seven. On a phone it stays hidden, by the rules in
   the max-width blocks below and in cx.css, because a tab bar and a stacked footer do not
   belong on the same screen. */

.os-drawer-backdrop,
.os-progress-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  transition: opacity 220ms ease;
}

.os-drawer-backdrop.is-open,
.os-progress-backdrop.is-open { opacity: 1; pointer-events: auto; }

.os-drawer {
  position: fixed;
  z-index: 120;
  top: 0;
  right: 0;
  width: min(460px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--os-line);
  background: rgba(12, 16, 22, 0.97);
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.44);
  transform: translateX(104%);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}

.os-drawer:not(.is-open) { pointer-events: none; }
.os-drawer.is-open { transform: translateX(0); }
.os-drawer-head,
.os-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--os-line);
}
.os-drawer-head h2,
.os-modal-head h2 { flex: 1; margin: 0; color: var(--os-paper); font-size: 17px; letter-spacing: -0.025em; }
.os-icon-button { width: 40px; display: grid; place-items: center; border-color: var(--os-line); background: rgba(255,255,255,.035); }
.os-icon-button:hover { color: var(--os-paper); border-color: rgba(245,166,35,.3); }
.os-drawer-tabs { display: flex; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--os-line); }
.os-drawer-tabs button { flex: 1; min-height: 36px; border: 0; border-radius: 10px; color: var(--os-muted); background: transparent; cursor: pointer; }
.os-drawer-tabs button.is-active { color: var(--os-paper); background: var(--os-amber-soft); }
.os-trade-list { flex: 1; overflow: auto; padding: 14px; }
.os-empty { padding: 52px 24px; color: var(--os-muted); text-align: center; line-height: 1.6; }

.os-trade-card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  margin-bottom: 9px;
  padding: 15px;
  text-align: left;
  border: 1px solid var(--os-line);
  border-radius: 15px;
  color: var(--os-paper);
  background: rgba(255,255,255,.026);
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}
.os-trade-card:hover { transform: translateY(-1px); border-color: rgba(245,166,35,.28); background: rgba(245,166,35,.045); }
.os-trade-pair { font-weight: 750; letter-spacing: -0.02em; }
.os-trade-id { color: var(--os-muted); font: 550 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.os-state { align-self: start; padding: 6px 8px; border-radius: 8px; color: #d6deec; background: rgba(74,114,255,.13); font-size: 10px; text-transform: capitalize; }
.os-state[data-state='completed'] { color: #7ce3ad; background: rgba(35,178,109,.13); }
.os-state[data-state='failed'], .os-state[data-state='cancelled'] { color: #ff939b; background: rgba(239,91,103,.13); }
.os-state[data-state='incomplete'] { color: #f7c76a; background: rgba(245,181,68,.13); }

.os-progress-backdrop { display: grid; place-items: center; padding: 20px; }
.os-progress {
  width: min(520px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: hidden;
  border: 1px solid rgba(245,166,35,.2);
  border-radius: 24px;
  background: linear-gradient(155deg, #171d27, #0b0f15 72%);
  box-shadow: 0 34px 120px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.06);
  transform: translateY(18px) scale(.98);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}
.os-progress-backdrop.is-open .os-progress { transform: translateY(0) scale(1); }
.os-progress-body { max-height: calc(100dvh - 128px); overflow: auto; padding: 24px; }
.os-progress-hero { display: grid; place-items: center; padding: 5px 0 22px; text-align: center; }
.os-progress-orb {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #17100a;
  background: radial-gradient(circle at 35% 25%, #ffdc9b, var(--os-amber) 52%, #a55e06);
  box-shadow: 0 0 0 10px rgba(245,166,35,.06), 0 0 56px rgba(245,166,35,.24);
}
.os-progress-orb::before,
.os-progress-orb::after { content: ''; position: absolute; inset: -12px; border: 1px solid rgba(245,166,35,.22); border-radius: 50%; animation: os-pulse 2s ease-out infinite; }
.os-progress-orb::after { inset: -24px; animation-delay: .65s; }
@keyframes os-pulse { 0% { transform: scale(.86); opacity: .8; } 100% { transform: scale(1.12); opacity: 0; } }
.os-progress-title { margin: 0; color: var(--os-paper); font-size: 23px; letter-spacing: -0.035em; }
.os-progress-sub { max-width: 360px; margin: 8px auto 0; color: var(--os-muted); font-size: 13px; line-height: 1.55; }
.os-progress-id { margin-top: 11px; padding: 7px 10px; border: 1px solid var(--os-line); border-radius: 9px; color: #c2cad7; background: rgba(255,255,255,.03); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.os-deposit { margin: 0 0 18px; padding: 14px; border: 1px solid rgba(245, 166, 35, 0.28); border-radius: 14px; background: rgba(245, 166, 35, 0.06); }
.os-deposit[hidden] { display: none; }
.os-deposit-head { color: var(--os-paper); font-size: 14px; line-height: 1.5; }
.os-deposit-head b { color: var(--os-amber); }
.os-deposit-label { margin-top: 10px; color: var(--os-muted); font: 650 10px/1.2 inherit; letter-spacing: 0.12em; text-transform: uppercase; }
.os-deposit-addr { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.os-deposit-addr code { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--os-line); border-radius: 9px; color: #e6ebf3; background: rgba(0, 0, 0, 0.28); font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.os-deposit-copy { flex: 0 0 auto; min-height: 36px; padding: 0 12px; }
.os-deposit-note { margin-top: 10px; color: var(--os-muted); font-size: 12px; line-height: 1.5; }
.os-deposit-link { width: 100%; margin-top: 12px; }

.os-timeline { position: relative; display: grid; gap: 0; margin: 4px 0 20px; }
.os-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; min-height: 58px; color: #687284; }
.os-step::before { content: ''; position: absolute; left: 13px; top: 27px; bottom: 0; width: 1px; background: rgba(255,255,255,.09); }
.os-step:last-child::before { display: none; }
.os-step-dot { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: #11161e; font-size: 11px; }
.os-step-copy b { display: block; margin-top: 3px; color: inherit; font-size: 13px; }
.os-step-copy span { display: block; margin-top: 4px; font-size: 11px; }
.os-progress-actions { display: grid; grid-template-columns: .8fr .8fr 1.3fr; gap: 9px; }
.os-modal-button { padding: 0 15px; color: var(--os-paper); border-color: var(--os-line); background: rgba(255,255,255,.035); }
.os-modal-button.primary { color: #17100a; border-color: transparent; background: var(--os-amber); }
.os-background-link { display: block; margin: 14px auto 0; padding: 5px; border: 0; color: var(--os-muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.os-background-link:hover { color: var(--os-paper); }

.os-mobile-nav { display: none; }

@media (max-width: 900px) {
  body.pt-os {
    width: 100%;
    min-height: var(--os-vvh);
    overflow: hidden;
  }
  .pt-os .cxnav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    min-height: 58px;
    padding: env(safe-area-inset-top) 14px 0;
  }
  .pt-os .cxnav .cxnav-r > :not(#userSlot):not(.cx-live):not(.os-tx-header) { display: none !important; }
  .pt-os .cxnav .cxnav-r { gap: 8px; }
  .os-tx-trigger.os-tx-header {
    display: inline-flex;
    min-height: 38px;
    padding: 0 10px;
    gap: 7px;
  }
  /* clear of the docked commit bar and the tab bar, so it never covers either */
  .pt-os:not(.mv-markets) .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .pt-os.mv-markets .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .pt-os footer.cxfoot { display: none !important; }
  .os-mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 85;
    height: calc(66px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 7px 8px env(safe-area-inset-bottom);
    border-top: 1px solid var(--os-line);
    background: rgba(8,11,16,.96);
    backdrop-filter: blur(24px);
  }
  .os-mobile-nav :is(button, a) {
    min-width: 44px;
    min-height: 48px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 11px;
    color: #758094;
    background: transparent;
    font: 650 10px/1 inherit;
  }
  .os-mobile-nav :is(button, a) svg { width: 19px; height: 19px; }
  .os-mobile-nav :is(button, a).is-active { color: var(--os-amber); background: var(--os-amber-soft); }
  .pt-os input,
  .pt-os textarea,
  .pt-os select { font-size: 16px !important; }
  .os-progress-backdrop { align-items: end; padding: 0; }
  .os-progress {
    width: 100%;
    max-height: calc(var(--os-vvh) - env(safe-area-inset-top));
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }
  .os-progress-body { max-height: calc(var(--os-vvh) - 76px - env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .os-drawer { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 560px) {
  .os-progress-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-os *,
  .pt-os *::before,
  .pt-os *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Touch targets on phones. A named list, never a blanket rule on a or button: a global
   minimum inflates inline links inside prose and every dense row. Heights only, so
   nothing reflows sideways. */
@media (max-width: 880px) {
  .cxbrand { min-height: 36px; display: inline-flex; align-items: center; }
  .os-background-link { min-height: 36px; }
}

/* Live transaction summary: what moved, where, and where a refund lands */
.os-summary { margin: 0 0 18px; padding: 2px 14px; border: 1px solid var(--os-line); border-radius: 14px; background: rgba(255,255,255,.025); }
.os-summary[hidden] { display: none; }
.os-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.os-sum-row:last-child { border-bottom: 0; }
.os-sum-row > span { flex: 0 0 auto; color: var(--os-muted); }
.os-sum-row > b { min-width: 0; color: var(--os-paper); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.os-sum-row code { font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e6ebf3; }
.os-sum-row i { font-style: normal; font-weight: 400; color: var(--os-muted); }
.os-sum-row a { color: var(--os-amber); text-decoration: none; font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.os-step { min-height: 50px; }


/* Desktop shell: the header and workspace bar stay pinned, a slim footer bar stays pinned
   under the content, and a framed workspace fills exactly the space between them so the
   page itself never scrolls behind it. Phones keep the tab bar and hide the footer. */
.cxfoot-slim { display: none; }
@media (min-width: 901px) {
  body.pt-os { --os-foot: 40px; padding-bottom: var(--os-foot); }
  .pt-os footer.cxfoot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 34;
    height: var(--os-foot); margin: 0; display: flex; align-items: center;
    border-top: 1px solid var(--os-line);
    background: rgba(7, 9, 13, 0.9);
    backdrop-filter: blur(20px) saturate(125%);
  }
  .pt-os footer.cxfoot { padding: 0 !important; box-sizing: border-box; }
  .pt-os .cxfoot::before { display: none; }
  .pt-os .cxfoot-in,
  .pt-os .cxfoot-bar { display: none; }
  .pt-os .cxfoot-slim {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: min(1500px, calc(100% - 32px)); margin: 0 auto;
    color: var(--os-muted, #8b95a7); font-size: 12px;
  }
  .pt-os .cxfoot-slim-l { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
  .pt-os .cxfoot-slim-l i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
  .pt-os .cxfoot-slim-r { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .pt-os .cxfoot-slim-r a { padding: 6px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
  .pt-os .cxfoot-slim-r a:hover { color: var(--os-paper); background: rgba(255, 255, 255, 0.05); }

  /* a compact banner, so the swap card is on screen without scrolling */

  /* a framed workspace owns the space between the pinned bars */
}

/* Three-column desktop: the markets rail and the swap card stay pinned under the header while
   the tall insight column scrolls, so no empty band opens up beneath them. */

/* overflow-x:hidden on the body makes it a scroll container, and a sticky header or column
   then has nothing to stick to. The root keeps trimming sideways overflow and is the scroller. */
@media (min-width: 901px) {
  html:root body.pt-os.cxb { overflow: visible !important; }
}

/* from inline0 */

/* ===== PipTradeDex terminal, "Prism" cockpit v2, scoped (cx-*), does not touch style.css ===== */
:root{
  --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:#5c6675;
  --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);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.cxb{background:var(--cx-bg);color:var(--cx-ink);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden}
body.cxb::before,body.cxb::after{display:none!important} /* drop style.css ambient; use our own */
.cxb input{font-size:16px!important} /* iOS: no auto-zoom */

/* ambient prism field, layered radial glows + fine dot grid + faint privacy hex-mesh */
.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)}
.cx-amb i{position:absolute;border-radius:50%;filter:blur(66px);opacity:.5}
.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}
.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}
.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 */
.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)}
.cxnav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cx-holo3);opacity:.5;pointer-events:none}
.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)}
.cxbrand span{background:var(--cx-holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.cxbrand svg{filter:drop-shadow(0 3px 12px rgba(245,166,35,.34));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cxbrand:hover svg{transform:rotate(-7deg) scale(1.06)}
.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}
.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){.hide-sm{display:none!important}.cxnav{gap:10px}.cxnav-r{gap:9px}.cxbrand .tagchip{display:none}}

/* cockpit grid */

/* entrance and gentle continuous 3D float (all cards feel alive) */
@keyframes cxFloatY{0%,100%{transform:perspective(1100px) translateY(0) rotateX(0deg)}50%{transform:perspective(1100px) translateY(-6px) rotateX(.8deg)}}

/* panel header */

/* markets rail */
/* rail loading skeleton (replaced by terminal.js once markets load) */

/* order form */

/* quote (styling for the generated .qline/.qbig/.swp/.dep comes from style.css; we wrap it) */

/* private-by-default row */

/* insight panel */

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

/* picker modal */
.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)}
.modal.open{display:flex}
.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}}

/* responsive */
/* mobile bottom nav (hidden on desktop) */

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

  /* single-column app shell; panels go edge-to-edge like a native screen */
  /* 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 */
  @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) --- */
  .cx-amb .grid{display:none} /* de-clutter the app screens */ /* depth for the 3D card motion */ /* 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 */
  /* 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. */
  .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. */
  /* 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. */
  /* screens change, they do not jump: a short settle reads as native */

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

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

@media(max-width:860px){
  body.cxb{display:flex;flex-direction:column;min-height:100vh}
  body.cxb > header.cxnav{order:1}
  /* 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 */
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}.cx-amb{display:none}}

/* $PIP x Robinhood promo banner */

/* --- footer --- */
.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))}
.cxfoot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--cx-holo3);opacity:.45}
.cxfoot-in{max-width:1320px;margin:0 auto;padding:40px 22px 24px;display:grid;grid-template-columns:1.35fr 2fr;gap:34px}
.cxfoot-brand .cxbrand{font-size:17px}
.cxfoot-brand p{color:var(--cx-mut);font-size:13px;line-height:1.6;max-width:330px;margin:13px 0 14px}
.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}
.cxfoot-badge i{width:6px;height:6px;border-radius:50%;background:var(--cx-mint);animation:cxPulse 2s infinite}
.cxfoot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.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}
.cxfoot-col a{display:block;color:var(--cx-mut);font-size:13.5px;text-decoration:none;padding:5px 0;transition:.14s;width:fit-content}
.cxfoot-col a:hover{color:var(--cx-mint);transform:translateX(2px)}
.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){
  .cxfoot{margin-bottom:calc(70px + var(--sab))}
  .cxfoot-in{grid-template-columns:1fr;gap:24px;padding:28px 18px 18px}
  .cxfoot-cols{gap:14px}
  .cxfoot-bar{flex-direction:column;gap:6px;text-align:center;justify-content:center}
}

/* --- Swap mode selector (studied from Aurora Intents, rebuilt premium + on-brand) --- */

/* --- chain-first token picker --- */@media(max-width:640px){.modal{align-items:flex-end;padding:0}.mbox{max-width:none;border-radius:22px 22px 0 0;max-height:92vh;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 --- */

/* from inline2 */

@media (max-width: 860px) {
  /* The markets filter and the picker's escape hatch both sat under the 40px floor. */
  .mv-markets [data-f] { min-height: 40px; padding: 10px 14px; }
  /* Both ways out of the progress dialog. It covers a settling trade, so being hard to
     dismiss is worse here than anywhere else on the surface. */
  .os-icon-button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .os-background-link { min-height: 44px; padding: 12px 16px; }
  /* The notifications panel close. Last standalone control under the floor. */
  #ptdnX { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; font-size: 20px; }
}
/* The swap header holds four controls. On a phone the route pill wraps to its own line instead of clipping. */

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

/* standalone page host. Anchors stand in for the buttons the in-page shell used. */
a.os-workspace, .os-mobile-nav a { text-decoration: none; }
a.os-workspace, .os-mobile-nav a { font: 400 13.3333px Arial; text-align: center; }
/* On a desktop the workspace tabs sit in the header, in the free space between the brand and the account cluster. The strip row is gone. */
@media (min-width: 901px) {
  .cxnav .os-workspaces { margin: 0 auto; padding: 0 12px; gap: 3px; flex: 0 1 auto; min-width: 0; overflow: visible; }
  .cxnav .os-workspace { min-height: 38px; padding: 0 11px; gap: 7px; }
  .pt-os .cxnav .cxnav-r { margin-left: 0; }
  .cxnav .cxbrand { flex: none; }
  .cxnav .cxbrand .tagchip { white-space: nowrap; }
  .os-tx-trigger.os-tx-header { display: inline-flex; min-height: 38px; padding: 0 12px; gap: 8px; }
  .os-tx-header .os-tx-label { display: inline; }
}
@media (min-width: 901px) and (max-width: 1500px) { .cxnav .cxbrand .tagchip { display: none; } }
@media (min-width: 901px) and (max-width: 1360px) { .os-tx-header .os-tx-label { display: none; } }
@media (min-width: 901px) and (max-width: 1240px) { .cxnav .os-workspace:not(.is-active) span { display: none; } }
@media (max-width: 900px) { .cxnav .os-workspaces { display: none; } .os-tx-header .os-tx-label { display: none; } }

/* Portfolio and Account are for a logged-in visitor. Without the mark they leave the tabs, the bottom bar, the account switch and the footer. */
html:not(.is-authed) .os-workspace[data-workspace="portfolio"],
html:not(.is-authed) .os-workspace[data-workspace="account"],
html:not(.is-authed) .os-mobile-nav a[data-mobile-workspace="account"],
html:not(.is-authed) .cxfoot-col a[href="/portfolio"] { display: none; }
@media (max-width: 900px) { html:not(.is-authed) .os-mobile-nav { grid-template-columns: repeat(4, 1fr); } }

/* Network and token logos, the same everywhere (os-core.js chainMark and tokenMark). The letter underneath shows if a logo does not load. */
.os-cm, .os-tm-face { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s, 24px); height: var(--s, 24px); border-radius: 50%; overflow: hidden; font: 700 calc(var(--s, 24px) * .42) / 1 'Sora', system-ui, sans-serif; letter-spacing: 0; }
.os-cm img, .os-tm-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #10141d; }
.os-tm { position: relative; display: inline-block; flex: none; width: var(--s, 28px); height: var(--s, 28px); vertical-align: middle; }
.os-tm-face { background: #1a2030; color: #f5a623; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.os-tm-chain { position: absolute; right: -3px; bottom: -3px; border-radius: 50%; box-shadow: 0 0 0 2px #0a0d13; line-height: 0; }

/* Pages that own viewport-fixed layers and dialogs (Stocks, Perps). The host does not scroll and contains every fixed
   descendant, an inner scroller carries the content, so the layers stay put and the dialogs sit inside the stage. */

/* Network and asset picker. Scoped to #picker so it outranks the shared row styles in app.html. */
#picker .mbox {
  max-width: 440px;
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -20px rgba(0, 0, 0, .75);
}

/* the sheet is a flex column on phones: only the list may shrink */
#picker .tp-head, #picker .search, #picker .pk-quick { flex: none; }

/* header */
#picker .tp-head { padding: 16px 16px 14px 20px; gap: 12px; border-bottom: 0; }
#picker .tp-head h4 { font-size: 17px; letter-spacing: -.01em; }
#picker .tp-head .pill {
  margin-left: 0; margin-right: auto;
  font-family: var(--cx-body, 'Inter', system-ui, sans-serif); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cx-mut, #8b95a6); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  padding: 3px 9px;
}
#picker .tp-close, #picker .tp-back { width: 34px; height: 34px; border-radius: 11px; }

/* search */
#picker .search { margin: 0 16px 12px; }
#picker .search input {
  height: 46px; padding: 0 14px 0 40px; font-size: 14.5px; border-radius: 14px;
  background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .09);
  transition: border-color .15s, box-shadow .15s;
}
#picker .search input::placeholder { color: var(--cx-dim, #5c6675); }
#picker .search input:focus { border-color: rgba(245, 166, 35, .7); box-shadow: 0 0 0 4px rgba(245, 166, 35, .12); }
#picker .search svg { left: 15px; opacity: .55; }

/* network shortcuts */
#picker .pk-quick {
  gap: 8px; padding: 0 16px 14px; scroll-snap-type: x proximity; scroll-padding: 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
}
#picker .pk-chip {
  scroll-snap-align: start; height: 34px; gap: 7px; padding: 0 12px 0 5px;
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09);
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
}
#picker .pk-chip:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
#picker .pk-chip:focus-visible { outline: 2px solid var(--cx-mint, #f5a623); outline-offset: 2px; }

/* every chain mark: brand monogram underneath, official logo on top */
#picker .cmk {
  position: relative; overflow: hidden; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cx-dsp, 'Sora', system-ui, sans-serif); font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
#picker .cmk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; padding: 0; }
#picker .pk-cm { width: 24px; height: 24px; font-size: 11px; }

/* list */
#picker .tlist { padding: 0 8px 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
#picker .pickhdr {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600;
  color: var(--cx-dim, #5c6675); padding: 14px 12px 6px;
}

#picker .crow, #picker .trow {
  min-height: 58px; padding: 9px 12px; gap: 12px; border-radius: 14px; border-bottom: 0;
  transition: background .12s;
}
#picker .crow:hover, #picker .trow:hover { background: rgba(255, 255, 255, .045); }
#picker .crow:active, #picker .trow:active { transform: none; background: rgba(255, 255, 255, .07); }
#picker .crow:focus-visible, #picker .trow:focus-visible { outline: 2px solid var(--cx-mint, #f5a623); outline-offset: -2px; }
#picker .trow.active { background: rgba(245, 166, 35, .08); box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .28); }

#picker .crow .cav { width: 38px; height: 38px; border-radius: 50%; font-size: 15px; padding: 0; }
#picker .crow .nm .sym { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--cx-ink, #e9edf4); }
#picker .crow .nm .ch, #picker .trow .ch {
  font-size: 12.5px; color: var(--cx-mut, #8b95a6); margin-top: 2px; text-transform: none;
  font-variant-numeric: tabular-nums;
}
#picker .cval {
  flex: none; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700;
  color: var(--cx-mint, #f5a623);
}
#picker .cval.dim { color: var(--cx-mut, #8b95a6); font-weight: 500; font-size: 12.5px; }
#picker .pk-go { flex: none; color: var(--cx-dim, #5c6675); margin-left: -2px; transition: transform .15s, color .15s; }
#picker .crow:hover .pk-go, #picker .crow:focus-visible .pk-go { color: var(--cx-ink, #e9edf4); transform: translateX(2px); }

/* "All networks": three overlapping network marks */
#picker .crow .cav.all {
  background: none; box-shadow: none; overflow: visible; border-radius: 0; position: relative;
}
#picker .cav.all .stk { position: absolute; width: 21px; height: 21px; font-size: 9px; box-shadow: 0 0 0 2px var(--cx-srf, #10141d); }
#picker .cav.all .stk:nth-child(1) { left: 0; top: 1px; z-index: 1; }
#picker .cav.all .stk:nth-child(2) { right: 0; top: 1px; z-index: 2; }
#picker .cav.all .stk:nth-child(3) { left: 8.5px; bottom: 1px; z-index: 3; }

/* token rows: the token, with its network as a small badge */
#picker .trow .av { width: 38px; height: 38px; overflow: visible; }
#picker .trow .av > img { border-radius: 50%; }
#picker .av-chain {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; font-size: 8px; z-index: 1;
  box-shadow: 0 0 0 2px var(--cx-srf, #10141d);
}
#picker .trow .sym { font-size: 14.5px; }
#picker .trow .px .p { font-variant-numeric: tabular-nums; }

#picker .empty h3 { font-size: 15px; }
#picker .empty p { color: var(--cx-mut, #8b95a6); font-size: 13px; }

@media (max-width: 640px) {
  #picker .mbox { max-width: none; }
  #picker .tp-head { padding: 22px 14px 12px 18px; }
  #picker .search { margin: 0 14px 12px; }
  #picker .search input { font-size: 16px; }
  #picker .pk-quick { padding: 0 14px 12px; }
  #picker .pk-chip { height: 38px; }
  #picker .tlist { padding: 0 6px 12px; }
  #picker .crow, #picker .trow { min-height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  #picker .crow, #picker .trow, #picker .pk-go, #picker .search input { transition: none; }
  #picker .crow:hover .pk-go { transform: none; }
}

/* layout shell: one column by default, two panes on wide screens */
#picker .pk-body, #picker .pk-main { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#picker .pk-nets { display: none; }
#picker .pk-tick { flex: none; margin-left: 10px; color: var(--cx-ink, #e9edf4); }

@media (min-width: 860px) {
  #picker .mbox.pk-split {
    max-width: 820px; height: min(640px, calc(100vh - 110px));
    display: flex; flex-direction: column;
  }
  #picker .pk-split .tp-head { padding: 18px 18px 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  #picker .pk-split .tp-head .pill { display: none; }
  #picker .pk-split .tp-head .tp-close { margin-left: auto; }
  #picker .pk-split .pk-body { flex-direction: row; }

  #picker .pk-split .pk-nets {
    display: flex; flex-direction: column; gap: 2px; flex: none; width: 248px;
    overflow-y: auto; padding: 12px 10px 16px; border-right: 1px solid rgba(255, 255, 255, .07);
    scrollbar-width: thin;
  }
  #picker .pk-net {
    display: flex; align-items: center; gap: 12px; flex: none; height: 46px; padding: 0 12px;
    border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer;
    color: var(--cx-ink, #e9edf4); font: inherit; font-size: 14.5px; font-weight: 500; text-align: left;
    transition: background .12s;
  }
  #picker .pk-net:hover { background: rgba(255, 255, 255, .045); }
  #picker .pk-net.on { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); font-weight: 600; }
  #picker .pk-net:focus-visible { outline: 2px solid var(--cx-mint, #f5a623); outline-offset: -2px; }
  #picker .pk-nn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #picker .pk-nm { width: 28px; height: 28px; font-size: 12px; }
  #picker .pk-nv { flex: none; font-size: 12.5px; font-weight: 700; color: var(--cx-mint, #f5a623); font-variant-numeric: tabular-nums; }
  #picker .pk-grid { flex: none; width: 28px; height: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  #picker .pk-grid .grd { width: 13px; height: 13px; font-size: 6px; }

  #picker .pk-split .pk-main { min-width: 0; padding-top: 16px; }
  #picker .pk-split .search { margin: 0 20px 12px; }
  #picker .pk-split .pk-quick {
    flex-wrap: nowrap; overflow: hidden; padding: 0 20px 10px;
    -webkit-mask-image: none; mask-image: none;
  }
  #picker .pk-split .tlist { flex: 1; max-height: none; min-height: 0; border-top: 0; padding: 4px 12px 16px; }
}

/* token chips: token logo with its network badge */
#picker .pk-tchip { padding-left: 4px; }
#picker .pk-tchip .av {
  position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; overflow: visible;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #04150d;
}
#picker .pk-tchip .av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#picker .pk-tchip .av-chain { width: 12px; height: 12px; right: -2px; bottom: -2px; font-size: 6px; }
@media (prefers-reduced-motion: reduce) { #picker .pk-net { transition: none; } }

/* from unified-os.css, everything the chrome file does not carry */

.os-intro {
  position: relative;
  width: min(1500px, calc(100% - 32px));
  min-height: 196px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(24px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(245, 166, 35, 0.055), transparent 42%),
    linear-gradient(150deg, #141922, #0c1016 72%);
  box-shadow: var(--os-shadow), inset 0 1px rgba(255, 255, 255, 0.055);
  isolation: isolate;
}

.os-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, transparent, black 45%, black);
}
.os-intro h1 {
  max-width: 730px;
  margin: 0;
  color: var(--os-paper);
  font-size: clamp(30px, 4.2vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.os-intro h1 span { color: var(--os-amber); }

.os-orbit {
  position: relative;
  min-height: 150px;
  perspective: 800px;
  transform-style: preserve-3d;
}

.pt-os main.cx {
  width: min(1500px, calc(100% - 32px));
  margin-top: 16px;
  gap: 14px;
}

.pt-os .cx-panel {
  border-color: var(--os-line);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(23, 29, 39, 0.94), rgba(12, 16, 22, 0.96));
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.045);
}

.pt-os .tradebtn,
.pt-os .cta,
.pt-os button.primary {
  color: #17100a;
  border-color: transparent;
  background: linear-gradient(135deg, #ffc45d, var(--os-amber));
  box-shadow: 0 12px 30px rgba(245, 166, 35, 0.18), inset 0 1px rgba(255, 255, 255, 0.4);
}

.pt-os .tradebtn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.pt-os .cx-tag { color: var(--os-paper); }
.pt-os .tp-close { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--os-line); border-radius: 10px; color: var(--os-paper); background: rgba(255, 255, 255, 0.035); cursor: pointer; flex: none; }
.pt-os .tp-close:hover { border-color: rgba(245, 166, 35, 0.3); }
.pt-os .ph-ic,
.pt-os .cx-conf,
.pt-os .mode.on,
.pt-os .slip-opts button.on,
.pt-os .cx-filters button.on { color: var(--os-amber); border-color: rgba(245, 166, 35, 0.28); background: var(--os-amber-soft); }
.pt-os .assetbtn .av,
.pt-os .tl .av { background: linear-gradient(145deg, var(--os-amber), #b66b08) !important; }
.pt-os .pc { min-height: 0 !important; border-color: var(--os-line) !important; background: rgba(16,20,27,.88) !important; }
/* The footer is NOT hidden here. Hiding it on every framed workspace left Terms, Privacy and
   the docs unreachable from five of the seven. On a phone it stays hidden, by the rules in
   the max-width blocks below and in cx.css, because a tab bar and a stacked footer do not
   belong on the same screen. */
@keyframes os-pulse { 0% { transform: scale(.86); opacity: .8; } 100% { transform: scale(1.12); opacity: 0; } }
.os-step.is-done { color: #c7d0dd; }
.os-step.is-done .os-step-dot { color: #0c1611; border-color: var(--os-success); background: var(--os-success); }
.os-step.is-current { color: var(--os-paper); }
.os-step.is-current .os-step-dot { color: #161008; border-color: var(--os-amber); background: var(--os-amber); box-shadow: 0 0 20px rgba(245,166,35,.22); }

@media (max-width: 900px) {
  .os-intro { display: none; }
  .pt-os main.cx {
    position: fixed;
    inset: calc(58px + env(safe-area-inset-top)) 0 calc(66px + env(safe-area-inset-bottom));
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: var(--os-obsidian);
  }
  .pt-os main.cx > *,
  .pt-os main.cx .cx-insight > * { flex: 0 0 auto; }
  .pt-os:not(.mv-markets) .cx-insight.cx-panel { display: contents; }
  .pt-os:not(.mv-markets) #chart { display: block !important; }
  .pt-os:not(.mv-markets) #chart[style*="display: none"] { display: none !important; }
  .pt-os .cx-insight .chart {
    margin: 12px 12px 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--os-line);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(23, 29, 39, 0.94), rgba(12, 16, 22, 0.96));
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.045);
  }
  .pt-os .cx-insight .cx-assure,
  .pt-os .cx-insight > .cx-mode { display: none; }
  .pt-os .cx-rail .cx-ph { top: 0; }
  .pt-os .slip-opts button,
  .pt-os .chart-range button { min-height: 36px; padding: 0 12px; }
  .pt-os .presets button { min-height: 40px; }
  /* clear of the docked commit bar and the tab bar, so it never covers either */
  .pt-os .cx-mode .mode b { white-space: normal; line-height: 1.15; }
  .pt-os .cx-panel { border-radius: 16px; }
  .pt-os .mnav { display: none !important; }
  .pt-os:not(.mv-markets) .mact {
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 82;
    padding: 10px 12px 10px;
    border-top-color: var(--os-line);
    background: linear-gradient(to top, rgba(7, 9, 13, 0.98) 60%, rgba(7, 9, 13, 0.88));
  }
  .pt-os.mv-markets .mact { display: none !important; }
}

@media (max-width: 560px) {
  .pt-os main.cx { padding: 10px 10px 16px; }
  .pt-os .cx-form { margin: 0; }
}

/* Touch targets on phones. A named list, never a blanket rule on a or button: a global
   minimum inflates inline links inside prose and every dense row. Heights only, so
   nothing reflows sideways. */

/* Live transaction summary: what moved, where, and where a refund lands */


/* Desktop shell: the header and workspace bar stay pinned, a slim footer bar stays pinned
   under the content, and a framed workspace fills exactly the space between them so the
   page itself never scrolls behind it. Phones keep the tab bar and hide the footer. */
@media (min-width: 901px) {

  /* a compact banner, so the swap card is on screen without scrolling */
  .os-intro { min-height: 0; margin: 12px auto 0; padding: 14px clamp(20px, 3vw, 34px); border-radius: 20px;
    grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .os-intro h1 { font-size: clamp(22px, 2.4vw, 34px); max-width: none; line-height: 1.05; }
  .os-intro .os-orbit { min-height: 84px; width: 190px; transform: scale(0.62); transform-origin: right center; }

  /* a framed workspace owns the space between the pinned bars */
}

/* Three-column desktop: the markets rail and the swap card stay pinned under the header while
   the tall insight column scrolls, so no empty band opens up beneath them. */
@media (min-width: 1121px) {
  .pt-os main.cx > .cx-rail,
  .pt-os main.cx > .cx-form {
    position: sticky; top: 139px; align-self: start;
    max-height: calc(100dvh - 139px - var(--os-foot, 40px) - 16px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* overflow-x:hidden on the body makes it a scroll container, and a sticky header or column
   then has nothing to stick to. The root keeps trimming sideways overflow and is the scroller. */

/* from inline0, everything the chrome file does not carry */

/* ===== PipTradeDex terminal, "Prism" cockpit v2, scoped (cx-*), does not touch style.css ===== */ /* drop style.css ambient; use our own */ /* iOS: no auto-zoom */

/* ambient prism field, layered radial glows + fine dot grid + faint privacy hex-mesh */
@keyframes cxDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(32px,-26px)}}

/* nav */
@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)}}

/* cockpit grid */
.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}
.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)}
.cx-rail::before,.cx-insight::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(124,140,255,.55),rgba(245,166,35,.45),transparent);opacity:.55}

/* entrance and gentle continuous 3D float (all cards feel alive) */
.cx-rail{transform-style:preserve-3d;animation:cxInL .7s cubic-bezier(.2,.8,.2,1) both,cxFloatY 12s ease-in-out 1s infinite}
.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}
.cx-insight{transform-style:preserve-3d;animation:cxInR .7s .12s cubic-bezier(.2,.8,.2,1) both,cxFloatY 11s ease-in-out 1.8s infinite}
@keyframes cxInL{from{opacity:0;transform:perspective(1200px) rotateY(-12deg) translateX(-22px)}to{opacity:1;transform:none}}
@keyframes cxInR{from{opacity:0;transform:perspective(1200px) rotateY(12deg) translateX(22px)}to{opacity:1;transform:none}}
@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 */
.cx-ph{display:flex;align-items:center;gap:10px;padding:16px 17px;border-bottom:1px solid var(--cx-line)}
.cx-ph .ph-ic{display:inline-flex;width:26px;height:26px;flex:none;align-items:center;justify-content:center;border-radius:9px;color:var(--cx-mint);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.22)}
.cx-ph h4{font-family:var(--cx-dsp);font-weight:700;font-size:14px}
.pill{margin-left:auto;font-family:var(--cx-mono);font-size:11px;color:var(--cx-mint);background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.22);padding:3px 10px;border-radius:100px}

/* markets rail */
.cx-search{margin:12px;position:relative}
.cx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;transition:opacity .15s,color .15s}
.cx-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;transition:border-color .16s,box-shadow .16s}
.cx-search input:focus{border-color:var(--cx-mint);box-shadow:0 0 0 3px rgba(245,166,35,.12)}
.cx-search input:focus + span,.cx-search:focus-within svg{color:var(--cx-mint);opacity:.9}
.tlist{display:flex;flex-direction:column;overflow-y:auto;max-height:calc(100vh - 232px);padding:2px 6px 10px;scrollbar-width:thin}
.tlist::-webkit-scrollbar{width:6px}.tlist::-webkit-scrollbar-thumb{background:var(--cx-line2);border-radius:3px}
.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}
.trow:hover{background:rgba(124,140,255,.08);transform:translateX(3px)}
.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)}
.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)}
.trow .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trow .sym{font-family:var(--cx-dsp);font-weight:600;font-size:13.5px}
.trow .ch{color:var(--cx-dim);font-size:11px;text-transform:capitalize}
.trow .px{margin-left:auto;text-align:right}
.trow .px .p{font-family:var(--cx-mono);font-size:12.5px}
.trow .px .c{display:none}
.empty{padding:40px 22px;text-align:center;color:var(--cx-mut)}.empty h3{font-family:var(--cx-dsp);color:var(--cx-ink);margin-bottom:6px}
/* rail loading skeleton (replaced by terminal.js once markets load) */
.tl-skel{padding:4px 4px 8px}
.sk-row{display:flex;align-items:center;gap:10px;padding:9px 10px}
.sk{position:relative;overflow:hidden;background:rgba(255,255,255,.045);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 50%,transparent 80%);transform:translateX(-100%);animation:cxSkel 1.35s linear infinite}
.sk-av{width:32px;height:32px;border-radius:50%;flex:none}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:6px}
.sk-l1{width:52%;height:11px}.sk-l2{width:34%;height:9px}
.sk-px{width:46px;height:11px}
@keyframes cxSkel{to{transform:translateX(100%)}}

/* order form */
.cx-form{padding:0 0 20px;overflow:hidden}
.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}}
.cx-form-h{display:flex;align-items:center;justify-content:space-between;padding:17px 20px 4px}
.cx-tag{font-family:var(--cx-dsp);font-weight:700;font-size:16px;letter-spacing:-.01em}
.cx-route{font-family:var(--cx-mono);font-size:11.5px;color:var(--cx-mut);display:inline-flex;align-items:center;gap:6px;background:rgba(124,140,255,.07);border:1px solid rgba(124,140,255,.2);padding:5px 11px;border-radius:100px}
.cx-route svg{color:var(--cx-iris)}
.cx-form-body{padding:10px 20px 0}
.legrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end;margin-top:6px}
.leg label{display:block;color:var(--cx-mut);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.assetbtn{width:100%;display:flex;align-items:center;gap:9px;background:var(--cx-srf2);border:1px solid var(--cx-line2);border-radius:15px;color:var(--cx-ink);padding:11px 12px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;min-width:0;transition:transform .2s,border-color .18s,background .18s,box-shadow .18s}
.assetbtn:hover{border-color:var(--cx-mint);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(245,166,35,.6)}
.assetbtn span:not(.av){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assetbtn .av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--cx-dsp);font-weight:700;font-size:11px;color:#04150d;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.assetbtn .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.assetbtn .ch{margin-left:auto;color:var(--cx-dim);font-size:11px;font-weight:500;text-transform:capitalize}
.swapx{width:42px;height:42px;border-radius:14px;border:1px solid var(--cx-line2);background:var(--cx-srf2);color:var(--cx-iris);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),color .18s,border-color .18s,box-shadow .18s;margin-bottom:2px}
.swapx:hover{color:#04150d;background:var(--cx-mint);border-color:var(--cx-mint);transform:rotate(180deg);box-shadow:0 10px 24px -10px rgba(245,166,35,.7)}
.amt{margin-top:14px;position:relative}
.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}
.amt input:focus{border-color:var(--cx-mint);box-shadow:0 0 0 3px rgba(245,166,35,.12)}
.presets{display:flex;gap:8px;margin-top:10px}
.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}
.presets button:hover{color:var(--cx-mint);border-color:var(--cx-mint);background:rgba(245,166,35,.06)}
.bal-chip{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:9px 12px;border-radius:11px;background:var(--cx-srf2);border:1px solid var(--cx-line);font-size:12.5px;color:var(--cx-mut)}
.bal-chip b{font-family:var(--cx-mono);color:var(--cx-ink)}
.bal-chip.low{border-color:rgba(245,181,68,.4);background:rgba(245,181,68,.08);color:var(--cx-amber)}.bal-chip.low b{color:var(--cx-amber)}
.recip{margin-top:14px}
.recip label{display:block;color:var(--cx-mut);font-size:12px;margin-bottom:7px}
.recip-field.need input{border-color:var(--cx-down,#ef4444)}
.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}
.recip input:focus{border-color:var(--cx-mint)}
.recip.need input{border-color:var(--cx-down)}
.recip input,.recip-field input{font-size:16px!important}

/* quote (styling for the generated .qline/.qbig/.swp/.dep comes from style.css; we wrap it) */
.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}
.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}
.qmut{color:var(--cx-dim);font-size:12.5px}

/* private-by-default row */
.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}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--cx-mut);transition:.2s}
.toggle.on{background:var(--cx-iris);border-color:var(--cx-iris);box-shadow:0 0 18px -4px rgba(124,140,255,.8)}
.toggle.on::after{left:22px;background:#fff}
.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}
.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)}
.tradebtn:disabled{opacity:.7;cursor:default;transform:none}
.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%}}
.hint{color:var(--cx-dim);font-size:12px;text-align:center;margin-top:11px;line-height:1.5}.hint a{color:var(--cx-mint);cursor:pointer}.fund-alert{display:none;align-items:flex-start;gap:11px;margin:13px 0 0;padding:12px 13px;border-radius:14px;background:linear-gradient(180deg,rgba(245,181,68,.14),rgba(245,181,68,.05));border:1px solid rgba(245,181,68,.36);box-shadow:0 14px 32px -20px rgba(245,181,68,.55)}.fund-alert.show{display:flex}.fund-alert .fa-ic{width:30px;height:30px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(245,181,68,.18);color:#f5b544}.fund-alert b{display:block;font-family:var(--cx-dsp);font-weight:700;font-size:13.5px;color:#f5b544;margin-bottom:3px}.fund-alert .fa-sub{display:block;font-size:12.2px;color:var(--cx-mut);line-height:1.46}.fund-alert a{color:var(--cx-mint);cursor:pointer;text-decoration:underline;font-weight:600}

/* insight panel */
.cx-insight{padding:16px;display:flex;flex-direction:column;gap:14px}
.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}
.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)}
.chart-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.chart-meta{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.chart-sym{font-size:11px;color:var(--cx-mut);text-transform:uppercase;letter-spacing:.05em}
.chart-px{font-family:var(--cx-dsp);font-size:19px;font-weight:700;letter-spacing:-.01em}
.chart-chg{font-family:var(--cx-mono);font-size:12.5px;font-weight:600;color:var(--cx-mut)}
.chart-chg.up{color:var(--up,#3ddc97)}.chart-chg.down{color:var(--cx-down)}
.chart-range{display:flex;gap:3px;flex:none}
.chart-range button{background:transparent;border:1px solid var(--cx-line);color:var(--cx-mut);border-radius:8px;font-family:var(--cx-mono);font-size:11px;font-weight:600;padding:4px 9px;cursor:pointer;transition:.12s}
.chart-range button:hover{color:var(--cx-ink);border-color:var(--cx-line2)}
.chart-range button.on{background:var(--cx-mint);border-color:var(--cx-mint);color:#07120c}
.chart canvas{position:relative;width:100%;height:186px;display:block}
.cx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.cx-stats>div{background:linear-gradient(180deg,rgba(9,12,20,.6),rgba(7,10,17,.5));border:1px solid var(--cx-line);border-radius:11px;padding:9px;min-width:0}
.cx-stats>div span{display:block;font-size:10px;color:var(--cx-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.cx-stats>div b{display:block;font-family:var(--cx-mono);font-size:12.5px;font-weight:600;color:var(--cx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* rail filter chips, watchlist star, 24h badge */
.cx-filters{display:flex;gap:7px;padding:0 12px 6px}
.cx-filters button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--cx-srf2);border:1px solid var(--cx-line);border-radius:10px;color:var(--cx-mut);font-family:inherit;font-weight:600;font-size:12px;padding:8px;cursor:pointer;transition:.14s}
.cx-filters button:hover{color:var(--cx-ink)}
.cx-filters button.on{background:rgba(124,140,255,.14);border-color:rgba(124,140,255,.4);color:var(--cx-iris)}
.trow .fav{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--cx-dim);cursor:pointer;transition:.14s;border-radius:6px}
.trow .fav:hover{color:var(--cx-amber);background:rgba(245,181,68,.1)}
.trow .fav.on{color:var(--cx-amber)}
.trow button.fav{border:0;padding:0;background:none;font:inherit}
@media (pointer:coarse){.trow .fav{min-width:40px;min-height:40px}}
body.pick-open{overflow:hidden}
.trow .px .chg{display:block;font-family:var(--cx-mono);font-size:10.5px;font-weight:600;color:var(--cx-mut);margin-top:1px}
.trow .px .chg.up{color:var(--up,#3ddc97)}.trow .px .chg.down{color:var(--cx-down)}
.cx-assure{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(124,140,255,.09),rgba(245,166,35,.045));border:1px solid var(--cx-line2);border-radius:17px;padding:20px}
.cx-assure::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,140,255,.5),transparent);opacity:.5}
.cx-assure .art{display:flex;justify-content:center;margin-bottom:12px}
.cx-assure h4{font-family:var(--cx-dsp);font-weight:700;font-size:15px;text-align:center;margin-bottom:6px}
.cx-assure p{color:var(--cx-mut);font-size:13px;text-align:center;line-height:1.55}
.cx-assure .rows{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.cx-assure .r{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--cx-mut)}
.cx-assure .r svg{flex:none;color:var(--cx-mint)}
.cx-assure .r b{color:var(--cx-ink);font-weight:600}
.cx-orb{position:absolute;border-radius:50%;pointer-events:none}
.cx-assure .o1{width:8px;height:8px;top:16px;right:20px;background:#7c8cff;box-shadow:0 0 14px rgba(124,140,255,.7);animation:cxFloat 8s ease-in-out infinite}
.cx-assure .o2{width:6px;height:6px;bottom:20px;left:22px;background:#f5a623;box-shadow:0 0 12px rgba(245,166,35,.6);animation:cxFloat 10s ease-in-out infinite reverse}
@keyframes cxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* picker modal */
@keyframes cxPop{from{transform:scale(.95) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.mbox .cx-ph,.mbox .tp-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--cx-line)}
.mbox .tp-head h4{font-family:var(--cx-dsp);font-weight:700;font-size:15px}
.mbox .cx-search,.mbox .search{margin:12px 14px}
.mbox .search{position:relative}
.mbox .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5}
.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}
.mbox .search input:focus{border-color:var(--cx-mint)}
.mbox .tlist{max-height:52vh}

/* responsive */
@media(max-width:1120px){
  .cx{grid-template-columns:270px minmax(0,1fr)}
  .cx-insight{grid-column:1 / -1}
  .cx-insight{flex-direction:row;flex-wrap:wrap}
  .cx-insight .chart{flex:1 1 340px}.cx-assure{flex:1 1 260px}
}
/* mobile bottom nav (hidden on desktop) */
.mnav{display:none}

/* ===== MOBILE, Binance-style trade app (<=860px) ===== */
@media(max-width:860px){

  /* single-column app shell; panels go edge-to-edge like a native screen */
  .cx{display:flex;flex-direction:column;align-items:stretch;max-width:100%;width:100%;margin:0;padding:0 0 calc(70px + var(--sab))}
  .cx-panel{border-radius:0;border-left:none;border-right:none;box-shadow:none}
  .cx-rail::before,.cx-insight::before{display: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. */
  .cx-insight{display:contents}
  .cx-mode{order:1}
  .cx-form{order:2}
  .cx-insight .chart{order:3;animation:cxCardIn .6s cubic-bezier(.2,.8,.2,1) both}
  .cx-rail{order:4}

  /* two screens toggled by the bottom nav: TRADE (default) and MARKETS */
  .cx-rail{display:none}
  body.mv-markets .cx-insight,body.mv-markets .cx-form{display:none}
  body.mv-markets .cx-rail{display:block;animation:cxFade .25s both}
  @keyframes cxFade{from{opacity:0}to{opacity:1}}

  /* 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)}}
  @keyframes cxRowIn{from{opacity:0;transform:perspective(900px) rotateX(20deg) translateY(16px)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}}

  /* --- TRADE screen: compact candles on top, order form below (fits the viewport) --- */ /* de-clutter the app screens */
  .cx{perspective:1200px} /* depth for the 3D card motion */
  .cx-insight{padding:0;gap:0;background:transparent;border:none;transform-style:preserve-3d;animation:cxCardIn .6s cubic-bezier(.2,.8,.2,1) both,cxFloatY 9s ease-in-out 1.4s infinite}
  .cx-insight .chart{border-radius:0;border:none;border-bottom:1px solid var(--cx-line);background:var(--cx-srf);padding:10px 14px 12px;margin:0}
  .chart-head{margin-bottom:8px}
  .chart-px{font-size:19px}
  .chart canvas{height:clamp(150px,28vh,220px)} /* scales with the device height */
  .cx-stats{gap:6px;margin-top:10px}
  .cx-stats>div{padding:6px 9px}
  .cx-stats>div span{font-size:9.5px;margin-bottom:2px}
  .cx-insight{flex-direction:column}
  /* mobile: compact side-by-side compare, not two giant cards */
  .cx-mode{margin:12px 12px 0;border-radius:20px;padding:13px}
  .cxm-sub{display:none}
  .cx-mode .cx-ph{margin-bottom:10px}
  .cx-mode .modesel{grid-template-columns:1fr 1fr;gap:8px}
  .cx-mode .mode[data-mode=public]{grid-column:1 / -1}
  .cx-mode .mode{padding:11px 11px 12px}
  .cx-mode .mode .m-viz,.cx-mode .mode small{display:none}
  .cx-mode .mode b{font-size:13.5px}
  .cx-mode .mode .m-eye{display:none}
  .cx-mode .m-q{margin-top:7px;font-size:13.5px;flex-wrap:wrap;align-items:baseline;gap:2px 5px;font-weight:700}
  .cx-mode .m-q .mq-mut{display:block;flex-basis:100%;font-size:11.5px;font-weight:500}
  .cx-mode .m-check{top:9px;right:9px;width:17px;height:17px}
  .cxm-diff{margin-top:9px;padding:9px 11px;font-size:12px}
    .cx-assure{display:none} /* privacy note already lives inside the form */
  /* SWAP CARD: 3D lift-in entrance, then a gentle continuous float */
  .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}
  .cx-form-h{padding:12px 16px 2px}.cx-form-body{padding:8px 16px 0}
  /* tighten vertical rhythm so the CTA sits close to the fold */
  .cx-form-body .amt{margin-top:10px}
  .presets{margin-top:8px}.presets button{padding:9px}
  .quote{margin-top:10px;min-height:0;padding:12px}
  .recip{margin-top:10px}
  .tradebtn{margin-top:12px;font-size:16px;padding:15px}
  .amt input{font-size:22px;padding:14px}
  .hint{margin-top:8px}
  /* asset buttons: keep the token symbol fully visible, let the chain label shorten if tight */
  .legrow{gap:8px}
  .swapx{width:38px;height:38px}
  .assetbtn{padding:10px 11px;font-size:14.5px;gap:8px}
  .assetbtn .av{width:23px;height:23px;font-size:10px}
  .assetbtn span:not(.av):not(.ch){flex:none}
  .assetbtn .ch{font-size:10px;min-width:0;flex:1 1 auto;text-align:right}

  /* --- MARKETS screen: stack of 3D motion cards --- */
  .cx-rail{border:none}
  .cx-rail .cx-ph{position:sticky;top:52px;z-index:5;background:var(--cx-bg)}
  .cx-rail .tlist{flex-direction:column;max-height:none;overflow:visible;padding:6px 12px 18px;gap:10px}
  .cx-rail .trow{flex-direction:row;align-items:center;min-width:0;flex:auto;border-radius:16px;padding:14px;
    background:linear-gradient(180deg,var(--cx-srf2),rgba(11,15,22,.9));border:1px solid var(--cx-line2);
    box-shadow:0 12px 26px -16px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
    transform-style:preserve-3d;animation:cxRowIn .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .16s}
  .cx-rail .trow:active{transform:perspective(900px) scale(.975) rotateX(3deg)}
  .cx-rail .trow:hover{background:linear-gradient(180deg,var(--cx-srf2),rgba(11,15,22,.9))}
  .cx-rail .trow .px{margin-left:auto;text-align:right}
  /* staggered 3D cascade on the first cards */
  .cx-rail .trow:nth-child(1){animation-delay:.02s}.cx-rail .trow:nth-child(2){animation-delay:.06s}
  .cx-rail .trow:nth-child(3){animation-delay:.1s}.cx-rail .trow:nth-child(4){animation-delay:.14s}
  .cx-rail .trow:nth-child(5){animation-delay:.18s}.cx-rail .trow:nth-child(6){animation-delay:.22s}
  .cx-rail .trow:nth-child(7){animation-delay:.26s}.cx-rail .trow:nth-child(8){animation-delay:.3s}
  .cx-rail .trow:nth-child(9){animation-delay:.34s}.cx-rail .trow:nth-child(n+10){animation-delay:.38s}

  /* bottom tab bar */
  .mnav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(6,8,14,.95);backdrop-filter:blur(18px);border-top:1px solid var(--cx-line);
    padding:7px 8px calc(7px + var(--sab))}
  .mnav .mn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
    color:var(--cx-mut);font-family:inherit;font-size:10.5px;font-weight:600;cursor:pointer;padding:5px 4px;
    text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .14s}
  .mnav .mn svg{width:22px;height:22px}
  .mnav .mn.on{color:var(--cx-mint)}
}

/* ================= 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. */
  /* 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) #chart{display:none !important}
  body.mv-markets .cx-mode{display:none}
  /* 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. */
  main.cx{overflow-x:clip}
  /* screens change, they do not jump: a short settle reads as native */
  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 ---- */
  .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}
  .cx-insight.cx-panel{box-shadow:0 18px 40px -30px rgba(0,0,0,.85)}

  /* ---- press states: a control that does not answer the thumb feels like a web page ---- */
  .tradebtn:active{transform:translateY(1px) scale(.995)}
  .assetbtn:active,.mode:active,.rseg:active,.presets button:active{transform:scale(.97)}
  .mnav .mn{transition:color .14s,transform .14s}
  .mnav .mn.on svg{transform:translateY(-1px) scale(1.08)}
  .mnav .mn svg{transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
}

/* ---- 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. */
.legrow{perspective:900px}
.legrow.flipping{animation:legFlip .34s cubic-bezier(.4,0,.25,1)}
@keyframes legFlip{
  0%{transform:rotateX(0)}
  50%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}
}
.swapx{transition:transform .34s cubic-bezier(.4,0,.25,1)}
.swapx.spun{transform:rotate(180deg)}
@keyframes mvIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .legrow.flipping{animation:none}
  .swapx.spun{transform:none}
  main.cx{animation:none}
}

@media(max-width:860px){
  /* Pip leads: it is the headline way into the product, so it sits first */
  body.cxb > main.cx{order:4}
  /* 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 */
  body:not(.mv-markets) .cx-insight.cx-panel{display:none}
}

@media(max-width:860px){
  .cx-mode .mode b{font-size:12px;letter-spacing:-.2px;white-space:nowrap}
}
@media(max-width:380px){
  .cx-mode .mode b{font-size:11.2px}
  .cx-mode .mode .m-ic{width:22px;height:22px;border-radius:7px}
}

@media(max-width:860px){
  .cx-form-body .cx-mode{
    background:none;border:0;border-radius:0;padding:0;box-shadow:none;
    margin-top:13px;padding-top:13px;border-top:1px solid var(--cx-line)}
  .cx-form-body .cx-mode .cx-ph{padding:0;border:0;margin-bottom:10px;gap:8px}
  .cx-form-body .cx-mode .cx-ph h4{font-size:13px}
  .cx-form-body .cx-mode .cx-ph .ph-ic{width:26px;height:26px}
  .cx-form-body .cx-mode .modesel{margin-top:0}
}


@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 */
  body:not(.mv-markets) .mact{
    display:block;position:fixed;left:0;right:0;
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
    padding:10px 16px 12px;z-index:40;
    background:linear-gradient(to top,rgba(6,8,14,.99) 62%,rgba(6,8,14,.82));
    backdrop-filter:blur(16px);border-top:1px solid var(--cx-line)}
  body:not(.mv-markets) .mact .tradebtn{margin:0;width:100%}
  /* content must be able to scroll clear of the docked bar */
  body:not(.mv-markets) main.cx{padding-bottom:96px}
}
.mact{display:none}
@media(max-width:380px){.cx-stats{grid-template-columns:repeat(2,1fr)}}

/* $PIP x Robinhood promo banner */

/* --- footer --- */

/* --- Swap mode selector (studied from Aurora Intents, rebuilt premium + on-brand) --- */
.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}
.cx-conf.pub{background:rgba(124,140,255,.1);border-color:rgba(124,140,255,.3);color:#aab6e8}
.modesel{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.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}
.mode:hover{transform:translateY(-2px)}
.mode .m-top{display:flex;align-items:center;gap:8px}
.mode .m-ic{width:27px;height:27px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);color:var(--cx-mut);flex:none;transition:.18s}
.mode b{font-family:var(--cx-dsp);font-weight:700;font-size:14px}
.mode .m-eye{margin-left:auto;color:var(--cx-dim);display:flex;transition:.18s}
.mode small{display:block;color:var(--cx-mut);font-size:11.5px;line-height:1.42;margin-top:9px}
.mode .m-viz{display:flex;align-items:center;margin-top:11px;height:11px}
.mode .m-viz i.d{width:9px;height:9px;border-radius:50%;background:var(--cx-mut);flex:none;transition:.2s}
.mode .m-viz i.d.off{background:transparent;border:1.6px dashed var(--cx-line2)}
.mode .m-viz i.l{flex:1;height:2px;margin:0 2px;background:repeating-linear-gradient(90deg,var(--cx-line2) 0 5px,transparent 5px 10px)}
.mode .m-check{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--cx-line2);display:none;align-items:center;justify-content:center;color:#04150d}
.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)}
.mode.on .m-ic{background:rgba(245,166,35,.16);color:var(--cx-mint)}
.mode.on .m-eye{color:var(--cx-mint)}
.mode.on .m-viz i.d{background:var(--cx-mint)}
.mode.on .m-viz i.d.off{background:transparent;border-color:var(--cx-mint)}
.mode.on .m-viz i.l{background:repeating-linear-gradient(90deg,var(--cx-mint) 0 5px,transparent 5px 10px)}
.mode.on .m-check{display:flex;background:var(--cx-mint);border-color:var(--cx-mint)}
.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)}
.mode[data-mode=public].on .m-ic,.mode[data-mode=public].on .m-eye{color:var(--cx-iris)}
.mode[data-mode=public].on .m-viz i.d{background:var(--cx-iris)}
.mode[data-mode=public].on .m-viz i.l{background:repeating-linear-gradient(90deg,var(--cx-iris) 0 5px,transparent 5px 10px)}
.mode[data-mode=public].on .m-check{background:var(--cx-iris);border-color:var(--cx-iris)}
.mode-note{grid-column:1/-1;color:var(--cx-iris);font-size:11.5px;margin-top:-2px}
.mode-note:empty{display:none}
@media(max-width:560px){.modesel{grid-template-columns:1fr}}

/* --- chain-first token picker --- */
.tp-back{width:30px;height:30px;border-radius:9px;border:1px solid var(--cx-line2);background:var(--cx-srf2);color:var(--cx-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:.15s;margin-right:2px}
.tp-back:hover{border-color:var(--cx-mint);color:var(--cx-mint)}
.crow{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;transition:background .12s,transform .12s}
.crow:hover{background:rgba(245,166,35,.07)}
.crow:active{transform:scale(.995)}.trow .px .p.hold{color:var(--cx-mint);font-weight:800}.trow .px .hu{font-size:11px;color:var(--cx-dim);margin-top:1px}.pickhdr{font-size:11px;color:var(--cx-mut);font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:9px 16px 4px}.modal .crow{padding:9px 16px}.modal .crow .cav{width:30px;height:30px;border-radius:9px}.modal .crow .nm .sym{font-size:14px}.modal .crow .nm .ch{font-size:11.5px}.pk-quick{display:flex;gap:7px;overflow-x:auto;padding:2px 14px 10px;scrollbar-width:none}.pk-quick::-webkit-scrollbar{display:none}.pk-chip{flex:none;display:flex;align-items:center;gap:6px;padding:6px 11px 6px 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--cx-line2);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--cx-ink);font-family:inherit;transition:border-color .14s,background .14s}.pk-chip:hover{background:rgba(245,166,35,.1);border-color:var(--cx-mint)}.pk-chip i{width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800}@media(max-width:640px){.mbox .tlist{max-height:none;flex:1;min-height:0}.mbox .tp-head{position:relative;padding-top:20px}.mbox .tp-head::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:var(--cx-line2)}}@keyframes cxSheet{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}.pk-quick{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}@media(max-width:640px){.mbox .tlist{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}}
.crow .cav{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--cx-dsp);font-weight:700;font-size:14px;color:#04150d;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.crow .cav.all{background:linear-gradient(135deg,#f5a623,#7c8cff);color:#04150d;font-size:15px}
.crow .cav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crow .nm{flex:1;min-width:0}
.crow .nm .sym{font-weight:700;font-size:14px;text-transform:capitalize}
.crow .nm .ch{color:var(--cx-mut);font-size:12px;margin-top:1px}

/* --- two-panel: Swap mode + live private-vs-public quote comparison --- */
.cx-mode{background:linear-gradient(180deg,var(--cx-srf2),var(--cx-srf));border:1px solid var(--cx-line2);border-radius:20px;padding:16px;position:relative;overflow:hidden}
.cx-mode .cx-ph{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.cx-mode .cx-ph h4{font-family:var(--cx-dsp);font-weight:700;font-size:15px}
.cx-mode .cx-ph .pill{margin-left:auto}
.cxm-sub{color:var(--cx-mut);font-size:12.5px;line-height:1.45;margin:2px 0 13px}
.cx-mode .modesel{grid-template-columns:1fr;margin-top:0;gap:10px}
.m-q{margin-top:9px;font-size:16px;color:var(--cx-ink);min-height:22px;display:flex;align-items:center;gap:6px;font-family:var(--cx-mono);font-weight:700}
.m-q b{font-weight:700}
.m-q .mq-mut{color:var(--cx-dim);font-size:12.5px;font-family:inherit;font-weight:500}
.m-time{display:none;margin-top:5px;font-size:11px;color:var(--cx-dim);font-family:var(--cx-mono);font-weight:600}
.m-time.show{display:block}
.m-time.show::after{content:' to settle';opacity:.6;font-weight:500;font-family:inherit}
.mode.on .m-time{color:var(--cx-mint)}
.mode[data-mode=public].on .m-time{color:var(--cx-iris)}
.cxm-diff{margin-top:2px;padding:11px 13px;border-radius:13px;background:rgba(124,140,255,.09);border:1px solid rgba(124,140,255,.22);color:#c3ccec;font-size:12.5px;line-height:1.45}
.cxm-diff:empty{display:none}
.cxm-diff b{color:#f5a623;font-weight:700}
@media(max-width:1120px){.cx-mode{flex:1 1 300px}}

@media(max-width:860px){#modeSel{grid-template-columns:1fr 1fr !important;gap:8px}#modeSel .mode{padding:11px 10px 12px}#modeSel .m-check{top:8px;right:8px}}
.pubwarn{margin-top:9px;padding:9px 11px;border-radius:11px;font-size:12.5px;line-height:1.45;color:#f7c76a;background:linear-gradient(180deg,rgba(245,181,68,.13),rgba(245,181,68,.05));border:1px solid rgba(245,181,68,.28)}

/* from inline2, everything the chrome file does not carry */

@media (max-width: 860px) {
  /* The markets filter and the picker's escape hatch both sat under the 40px floor. */
  .cx [data-f] { min-height: 40px; padding: 10px 14px; }
  #pickClose { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; font-size: 20px; }
  /* Both ways out of the progress dialog. It covers a settling trade, so being hard to
     dismiss is worse here than anywhere else on the surface. */
  /* The notifications panel close. Last standalone control under the floor. */
}
/* The swap header holds four controls. On a phone the route pill wraps to its own line instead of clipping. */
@media (max-width: 520px) {
  .cx-form-h { flex-wrap: wrap; row-gap: 8px; }
  .cx-form-h .cx-route { order: 5; }
}

/* The header is the only bar now, so the pinned columns sit closer to the top. */
@media (min-width: 1121px) {
  .pt-os main.cx > .cx-rail, .pt-os main.cx > .cx-form { top: 80px; max-height: calc(100dvh - 80px - var(--os-foot, 40px) - 16px); }
}

/* The intro banner belongs to Swap. Markets opens straight onto the markets. */
body.mv-markets .os-intro { display: none; }

/* Markets on a desktop is its own page: one wide board, no swap card. Choosing an asset opens Swap with it. */
@media (min-width: 901px) {
  body.pt-os.mv-markets main.cx { display: block; }
  body.pt-os.mv-markets main.cx > .cx-form,
  body.pt-os.mv-markets main.cx > .cx-insight { display: none; }
  body.pt-os.mv-markets main.cx > .cx-rail {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) auto;
    grid-template-areas: "title search filters" "list list list";
    align-items: center; column-gap: 20px; row-gap: 0;
    position: static; max-height: none; overflow: visible; width: 100%; padding: 0 0 6px;
    animation: none;
  }
  body.pt-os.mv-markets .cx-rail .cx-ph { grid-area: title; border-bottom: 0; padding: 22px 8px 14px 24px; }
  body.pt-os.mv-markets .cx-rail .cx-ph h4 { font-size: 20px; letter-spacing: -0.01em; }
  body.pt-os.mv-markets .cx-rail .cx-search { grid-area: search; margin: 8px 0 0; }
  body.pt-os.mv-markets .cx-rail .cx-filters { grid-area: filters; margin: 8px 24px 0 0; padding: 0; }
  body.pt-os.mv-markets .cx-rail .tlist {
    grid-area: list; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); column-gap: 14px;
    max-height: none; overflow: visible; padding: 8px 16px 18px; border-top: 1px solid var(--os-line);
    margin-top: 14px;
  }
  body.pt-os.mv-markets .cx-rail .tlist > .tl-skel, body.pt-os.mv-markets .cx-rail .tlist > .empty { grid-column: 1 / -1; }
  body.pt-os.mv-markets .cx-rail .trow { padding: 13px 14px; gap: 14px; }
  body.pt-os.mv-markets .cx-rail .trow .px { display: flex; align-items: baseline; gap: 16px; margin-left: auto; text-align: right; }
  body.pt-os.mv-markets .cx-rail .trow .px .p { min-width: 104px; text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
  body.pt-os.mv-markets .cx-rail .trow .px .chg { min-width: 66px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
  body.pt-os.mv-markets .cx-rail .trow .px:not(:has(.chg)):not(:has(.hu)) { padding-right: 82px; }
  body.pt-os.mv-markets .cx-rail .trow .px:has(.hu) { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* Limit order desk. Leans on the existing tokens (--accent amber, --peri Base blue,
   --up green, --down red) so it inherits the palette rather than inventing one. */

.lo-card {
  background: var(--card, #0d111b); border: 1px solid var(--line, #1e2637);
  border-radius: 14px; padding: 16px;
}
.lo-card + .lo-card { margin-top: 14px; }
.lo-card h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim, #8b93a7); }

/* Inline inside the swap card. The desk is a mode of the one app, not a second app,
   so it borrows the card it sits in rather than drawing another one. */
.lo-switch { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 999px; background: rgba(127,127,127,.12); }
.lo-switch button {
  padding: 8px 18px; min-height: 34px; border: 0; border-radius: 999px; background: transparent;
  cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--dim, #8b93a7); transition: background .18s, color .18s, transform .18s;
}
.lo-switch button:hover:not(.on) { color: var(--fg, #e8ecf5); }
.lo-switch button.on { box-shadow: 0 2px 10px -4px rgba(245,166,35,.7); }
.lo-switch button.on { background: var(--accent, #f5a623); color: #1a1205; }
/* The app styles bare <section> elements with 64px of vertical padding, which this panel
   inherited and wore as a dead band above the pair row. Zeroed by id so the app rule cannot
   win on specificity. */
#loPanel.lo-inline { padding: 0; margin-top: 2px; animation: lo-fade .24s cubic-bezier(.22,1,.36,1); }
/* The market controls are gone in limit mode, so the space the form body reserved for them
   goes too. Without this the ticket floats under a band of nothing. */
body.lo-limit .cx-form-body { padding-top: 6px; gap: 0; row-gap: 0; }
body.lo-limit .cx-form { min-height: 0; }
.lo-inline[hidden] { display: none; }
/* In Limit mode the market controls step aside. The panel is a SIBLING inside the same
   form body, so the rule hides its siblings rather than the container, which would take
   the panel with it. */
body.lo-limit .cx-form-body > *:not(#loPanel) { display: none !important; }
body.lo-limit .cx-route, body.lo-limit .cx-mode { display: none !important; }

/* 🚨 The phone has a FIXED action bar at the bottom. Without room to scroll past it the
   place button sits UNDER that bar and cannot be tapped, which is a button that looks
   present and is not. The panel reserves that height plus the safe area. */
@media (max-width: 860px) {
  /* 🚨 Under 860px the app RELOCATES the market trade button into a fixed docked bar, which
     lives OUTSIDE the form body. The rule that hides the market controls therefore misses it,
     and a "Get quote" button floats over the limit ticket offering the wrong action. The limit
     CTA is inside the panel, so the docked market bar is hidden with the rest of market mode. */
  body.lo-limit .mact, body.lo-limit #mAct { display: none !important; }
  #loPanel.lo-inline { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .lo-cta { min-height: 52px; font-size: 16px; }
  .lo-row { min-height: 56px; }
  .lo-tok { min-height: 46px; }
  .lo-bookhead { gap: 6px; }
  .lo-tok { max-width: 42vw; }
}
/* A scrolling row of chips hides its own end. The fade says there is more to the right
   rather than leaving the last chip looking clipped by accident. */
.lo-mkt-scroll { position: relative; scroll-snap-type: x proximity; }
.lo-mkt-scroll > * { scroll-snap-align: start; }

/* ---- exchange desk ---- */
.lo-bookhead { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.lo-slash { color: var(--dim, #8b93a7); font-weight: 700; }
.lo-mid { margin-left: auto; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--dim, #8b93a7); font-variant-numeric: tabular-nums; }
.lo-mid b { color: var(--fg, #e8ecf5); }

.lo-rows { display: grid; gap: 7px; margin-bottom: 12px; }
.lo-row {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; min-height: 52px;
  background: var(--bg2, #070a12); border: 1.5px solid var(--line, #1e2637); border-radius: 9px; padding: 11px;
  transition: border-color .16s;
}
.lo-row:focus-within { border-color: var(--accent, #f5a623); }
.lo-row label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim, #8b93a7); margin: 0; }
.lo-row input { background: transparent; border: 0; color: var(--fg, #e8ecf5); font: inherit; font-size: 16px; font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; text-align: right; width: 100%; padding: 0; min-height: 26px; }
.lo-row input:focus { outline: none; }
.lo-row b { font-size: 12px; color: var(--dim, #8b93a7); font-weight: 700; min-width: 42px; text-align: right; }

.lo-mkt { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.lo-chip {
  min-height: 40px; padding: 10px 13px; border-radius: 8px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, transform .15s;
}
.lo-chip:hover { color: var(--fg, #e8ecf5); border-color: var(--accent, #f5a623); transform: translateY(-1px); }
.lo-dist { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim, #8b93a7); }
.lo-dist.up { color: var(--up, #23b26d); }
.lo-dist.down { color: var(--down, #ef5b67); }
.lo-dist.warn { color: var(--accent, #f5a623); font-weight: 700; }

/* dense order table, the way a desk lists working orders */
.lo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lo-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim, #8b93a7); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line, #1e2637); white-space: nowrap;
}
.lo-table td { padding: 9px 8px; border-bottom: 1px solid var(--line, #1e2637); white-space: nowrap; }
.lo-table tbody tr { animation: lo-in .26s cubic-bezier(.22,1,.36,1) both; transition: background .15s; }
.lo-table tbody tr:hover { background: rgba(127,127,127,.06); }
.lo-table .num { text-align: right; font-family: var(--mono, ui-monospace, monospace); }
.lo-table .s-buy { color: var(--up, #23b26d); font-weight: 700; }
.lo-table .s-sell { color: var(--down, #ef5b67); font-weight: 700; }
.lo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lo-fillbar { display: block; height: 4px; border-radius: 2px; background: var(--line, #1e2637); overflow: hidden; min-width: 54px; }
.lo-fillbar i { display: block; height: 100%; background: var(--accent, #f5a623); transition: width .5s cubic-bezier(.22,1,.36,1); }

/* token legs, shaped like the market swap's own token buttons */
.lo-tok {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  border: 1.5px solid var(--line, #1e2637); background: var(--bg2, #070a12); color: var(--fg, #e8ecf5);
  font: inherit; cursor: pointer; min-height: 42px; transition: border-color .16s, transform .16s;
}
.lo-tok:hover { border-color: var(--accent, #f5a623); transform: translateY(-1px); }
.lo-tok b { font-size: 14.5px; font-weight: 800; }
.lo-tok span { font-size: 11px; color: var(--dim, #8b93a7); text-transform: capitalize; }
.lo-tok::after { content: '\25be'; color: var(--dim, #8b93a7); font-size: 11px; }

/* holdings first: what the signed-in trader already has, one tap to trade it */
.lo-holds { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; }
.lo-holds[hidden] { display: none; }

/* a locked field is stating a fact, not asking a question */
.lo-mkt-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; -webkit-overflow-scrolling: touch; }
.lo-mkt-scroll::-webkit-scrollbar { height: 0; }
.lo-chip.is-mid { border-color: var(--accent, #f5a623); color: var(--accent, #f5a623); }

/* ---- ticket ---- */
.lo-side { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: rgba(127,127,127,.1); }
.lo-side button {
  padding: 9px; min-height: 38px; border-radius: 8px; border: 0;
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: background .18s, color .18s;
}
.lo-side button:hover:not(.on) { color: var(--fg, #e8ecf5); }
.lo-side button.on[data-side="BUY"] { color: #062b18; background: var(--up, #23b26d); }
.lo-side button.on[data-side="SELL"] { color: #2b0709; background: var(--down, #ef5b67); }

.lo-field { margin-bottom: 12px; }
.lo-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim, #8b93a7); margin-bottom: 5px; }
.lo-field input, .lo-field select {
  width: 100%; padding: 11px 12px; border-radius: 10px; font: inherit; font-size: 16px;
  background: var(--bg2, #070a12); color: var(--fg, #e8ecf5); border: 1.5px solid var(--line, #1e2637);
  transition: border-color .16s;
}
.lo-field input:focus, .lo-field select:focus { outline: none; border-color: var(--accent, #f5a623); }
.lo-hint { font-size: 11.5px; color: var(--dim, #8b93a7); margin-top: 5px; min-height: 15px; }
.lo-hint.bad { color: var(--down, #ef5b67); }

.lo-preview {
  border-radius: 10px; padding: 11px 12px; margin: 4px 0 12px;
  background: var(--bg2, #070a12); border: 1px dashed var(--line, #1e2637);
  font-size: 13px; display: grid; gap: 6px;
}
.lo-preview div { display: flex; justify-content: space-between; gap: 10px; }
.lo-preview span:last-child { font-weight: 700; }

.lo-cta {
  width: 100%; padding: 13px; border-radius: 11px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 15px;
  background: var(--accent, #f5a623); color: #1a1205;
  transition: transform .18s cubic-bezier(.22,1,.36,1), filter .18s, opacity .18s;
}
.lo-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.lo-cta:disabled { opacity: .5; cursor: not-allowed; }
.lo-cta.busy { position: relative; color: transparent; }
.lo-cta.busy::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px;
  border: 2px solid rgba(26,18,5,.35); border-top-color: #1a1205; border-radius: 50%;
  animation: lo-spin .7s linear infinite;
}
@keyframes lo-spin { to { transform: rotate(360deg); } }

/* ---- tabs ---- */
.lo-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.lo-tabs button {
  min-height: 44px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .16s, border-color .16s, background .16s;
}
.lo-tabs button.on { color: var(--fg, #e8ecf5); border-color: var(--accent, #f5a623); background: color-mix(in srgb, var(--accent, #f5a623) 12%, transparent); }
.lo-tabs .lo-count { margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }

.lo-panel { display: none; }
.lo-panel.on { display: block; animation: lo-fade .22s cubic-bezier(.22,1,.36,1); }
@keyframes lo-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- order cards, the phone shape ---- */
.lo-card { border: 1px solid var(--line, #1e2637); border-radius: 14px; padding: 14px; margin-bottom: 10px;
  background: var(--bg2, #070a12); animation: lo-in .28s cubic-bezier(.22,1,.36,1) both; }
.lo-card.is-live { border-color: color-mix(in srgb, var(--accent, #f5a623) 38%, var(--line, #1e2637)); }
.lo-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.lo-card-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lo-card-pair b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.lo-card-age { margin-left: auto; color: var(--dim, #8b93a7); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lo-card-sub { color: var(--dim, #8b93a7); font-size: 12.5px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.lo-card-kv { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line, #1e2637); display: grid; gap: 9px; }
.lo-card-kv > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lo-card-kv dt { color: var(--dim, #8b93a7); font-size: 13px; margin: 0; }
.lo-card-kv dd { margin: 0; font-size: 13.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lo-card-acts { display: flex; gap: 9px; margin-top: 13px; }
.lo-btn.wide { flex: 1; justify-content: center; text-align: center; min-height: 46px; }
.lo-btn.danger { color: var(--down, #ef5b67); border-color: color-mix(in srgb, var(--down, #ef5b67) 45%, transparent); }
.lo-btn.danger:hover { border-color: var(--down, #ef5b67); background: color-mix(in srgb, var(--down, #ef5b67) 10%, transparent); }

.lo-acct-note { font-size: 12.5px; color: var(--dim, #8b93a7); padding: 2px 2px 10px; line-height: 1.5; }
.lo-acct-note[hidden] { display: none; }
.lo-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--accent, #f5a623); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lo-link:hover { filter: brightness(1.15); }

/* ---- order cards ---- */
@keyframes lo-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.lo-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.lo-tag.buy { background: color-mix(in srgb, var(--up, #23b26d) 16%, transparent); color: var(--up, #23b26d); }
.lo-tag.sell { background: color-mix(in srgb, var(--down, #ef5b67) 16%, transparent); color: var(--down, #ef5b67); }
.lo-status { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line, #1e2637); color: var(--dim, #8b93a7); }
.lo-status.live { color: var(--accent, #f5a623); border-color: color-mix(in srgb, var(--accent, #f5a623) 40%, transparent); }
.lo-status.live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px; animation: lo-pulse 1.8s ease-in-out infinite;
}
@keyframes lo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.lo-status.done { color: var(--up, #23b26d); border-color: color-mix(in srgb, var(--up, #23b26d) 40%, transparent); }
.lo-status.dead { color: var(--down, #ef5b67); border-color: color-mix(in srgb, var(--down, #ef5b67) 34%, transparent); }

.lo-bar { height: 5px; border-radius: 3px; background: var(--line, #1e2637); overflow: hidden; margin-top: 11px; }
.lo-bar i { display: block; height: 100%; background: var(--accent, #f5a623); border-radius: 3px; width: 0; transition: width .5s cubic-bezier(.22,1,.36,1); }
.lo-btn {
  min-height: 40px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line, #1e2637);
  background: transparent; color: var(--dim, #8b93a7); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .16s, border-color .16s, transform .16s;
}
.lo-btn:hover { color: var(--fg, #e8ecf5); transform: translateY(-1px); }
.lo-btn.danger:hover { color: var(--down, #ef5b67); border-color: var(--down, #ef5b67); }

/* ---- deposit panel ---- */
.lo-deposit {
  margin-top: 11px; padding: 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #f5a623) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #f5a623) 32%, transparent);
  animation: lo-in .3s cubic-bezier(.22,1,.36,1) both;
}
.lo-deposit b { display: block; font-size: 12px; margin-bottom: 7px; }
.lo-addr {
  display: flex; align-items: center; gap: 8px; background: var(--bg2, #070a12);
  border-radius: 8px; padding: 9px 10px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; word-break: break-all;
}
.lo-addr span { flex: 1; min-width: 0; }

/* ---- activity ---- */
.lo-feed { list-style: none; margin: 0; padding: 0; }
.lo-feed li {
  display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line, #1e2637);
  font-size: 13px; animation: lo-in .28s cubic-bezier(.22,1,.36,1) both;
}
.lo-feed li:last-child { border-bottom: 0; }
.lo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim, #8b93a7); margin-top: 6px; flex: none; }
.lo-dot.created { background: var(--accent, #f5a623); }
.lo-dot.fill, .lo-dot.final { background: var(--up, #23b26d); }
.lo-dot.status { background: var(--peri, #4a72ff); }
.lo-dot.cancel-requested { background: var(--down, #ef5b67); }
.lo-feed time { margin-left: auto; color: var(--dim, #8b93a7); font-size: 11.5px; white-space: nowrap; }

.lo-empty { text-align: center; padding: 34px 16px; color: var(--dim, #8b93a7); font-size: 13.5px; }
.lo-skel { height: 74px; border-radius: 12px; margin-bottom: 10px; background: linear-gradient(90deg, var(--line,#1e2637) 25%, var(--bg2,#070a12) 50%, var(--line,#1e2637) 75%); background-size: 200% 100%; animation: lo-shim 1.3s linear infinite; }
@keyframes lo-shim { to { background-position: -200% 0; } }

.lo-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  background: var(--card, #0d111b); border: 1px solid var(--line, #1e2637); color: var(--fg, #e8ecf5);
  padding: 11px 16px; border-radius: 11px; font-size: 13.5px; z-index: 120;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s cubic-bezier(.22,1,.36,1);
}
.lo-toast.on { opacity: 1; transform: translateX(-50%); }
.lo-toast.bad { border-color: var(--down, #ef5b67); }

/* Phones. The tab pills and small buttons were under the 36px the rest of the app was
   already corrected to, so they get a floor here rather than being the one place that
   is fiddly to hit. */
@media (max-width: 860px) {
  .lo-tabs button { min-height: 38px; padding: 9px 15px; }
  .lo-switch button { min-height: 40px; padding: 10px 20px; }
  .lo-btn { min-height: 38px; padding: 9px 14px; }
  .lo-side button { min-height: 44px; }
}

/* Motion is decoration here. Anyone who has asked the OS to stop moving things gets a
   still page, not a slower one. */
@media (prefers-reduced-motion: reduce) {
  .lo-panel.on, .lo-feed li, .lo-deposit { animation: none; }
  .lo-cta, .lo-side button, .lo-btn, .lo-bar i, .lo-toast { transition: none; }
  .lo-status.live::before, .lo-skel, .lo-cta.busy::after { animation: none; }
}

.lo-note { font-size: 11.5px; color: var(--dim, #8b93a7); padding: 4px 2px 10px; }

/* A percentage chip waiting on the balance scan. Dimmed and inert, so the pause reads as
   the app working rather than the button ignoring the tap. */
[data-pct].is-wait { opacity: .55; pointer-events: none; position: relative; }
[data-pct].is-wait::after {
  content: ""; position: absolute; inset: auto 6px 4px auto;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: lo-chip-spin .6s linear infinite;
}
@keyframes lo-chip-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-pct].is-wait::after { animation: none; }
}

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