/* 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 */
.os-acct-switch{display:none}
@media(max-width:900px){
  .pt-os .os-workspace-stage.has-acct-switch:not([hidden]){display:flex;flex-direction:column}
  .pt-os .os-workspace-stage.has-acct-switch .os-acct-switch{display:flex;flex:none;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
  .os-acct-switch :is(button, a){flex:1;min-height:40px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--mut);font:600 13px/1 var(--body);cursor:pointer}
  .os-acct-switch :is(button, a).is-active{color:var(--mint);border-color:rgba(245,166,35,.35);background:var(--mintdim)}
}

/* 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); }
.pt-os .cx-live { color: #a7b0c0; }
.pt-os .cx-live i { background: var(--os-success); box-shadow: 0 0 12px rgba(35, 178, 109, 0.8); }

.os-command-wrap {
  position: sticky;
  top: 68px;
  z-index: 35;
  border-bottom: 1px solid var(--os-line);
  background: rgba(7, 9, 13, 0.76);
  backdrop-filter: blur(24px) saturate(130%);
}

.os-command {
  width: min(1500px, calc(100% - 32px));
  min-height: 58px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.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-command-spacer { flex: 1; }
.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; }

.os-workspace-stage {
  width: min(1500px, calc(100% - 32px));
  min-height: calc(100dvh - 164px);
  margin: 16px auto 24px;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: 22px;
  background: var(--os-carbon);
  box-shadow: var(--os-shadow);
}

.os-workspace-stage[hidden] { display: none; }
.pt-os .os-workspace-stage { padding: 0; }
/* 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-command-wrap { display: none; }
  .os-tx-trigger.os-tx-header {
    display: inline-flex;
    min-height: 38px;
    padding: 0 10px;
    gap: 7px;
  }
  .os-workspace-stage {
    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);
  }
  /* 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 */
  .os-workspace-stage {
    display: flex; flex-direction: column;
    min-height: 520px; margin: 12px auto;
    height: calc(100dvh - 68px - 59px - var(--os-foot) - 24px);
  }
}

/* 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}
.cx-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-mint);background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.25);padding:5px 11px;border-radius:100px;box-shadow:0 0 22px -8px rgba(61,220,151,.6)}
.cx-live i{width:6px;height:6px;border-radius:50%;background:var(--cx-mint);animation:cxPulse 2s infinite}
@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}
  .cxnav .cx-live{display:none}

  /* 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, .os-acct-switch a { text-decoration: none; }
.os-acct-switch a { text-align: center; display: flex; align-items: center; justify-content: center; }
a.os-workspace, .os-mobile-nav a { font: 400 13.3333px Arial; text-align: center; }
.os-workspace-page { flex: 1 1 auto; min-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #07090d; }
@media (min-width: 901px) { .os-workspace-page { min-height: 0; } .os-workspace-stage { position: relative; } }
/* 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; }
  .os-workspace-stage { height: calc(100dvh - 68px - var(--os-foot) - 24px); }
}
@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; } .pt-os .cxnav .cx-live { 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) .os-acct-switch,
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. */
.os-workspace-page.pg-fixed { position: relative; overflow: hidden; contain: layout paint; isolation: isolate; container-type: size; flex: 1 1 auto; min-height: 0; background: #07090d; }
.os-workspace-page.pg-fixed > .pg-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 900px) { .os-workspace-page.pg-fixed { height: 100%; } }