.pt-pro, .pt-subbar, .pt-modal-ov, .pt-toast { --panel: rgba(8, 11, 5, 0.55); --faint: #6b795a; --red: #ff5d5d; --red-ink: #ff8a8a; --up: #a3df08;  --up-bg: rgba(163, 223, 8, 0.14); --down: #ff6b6b; --down-bg: rgba(255, 90, 90, 0.14);  --glass: linear-gradient(180deg, rgba(25, 33, 15, 0.66), rgba(9, 14, 6, 0.78)); --glass-2: linear-gradient(180deg, rgba(30, 40, 18, 0.72), rgba(11, 17, 7, 0.82)); --radius: 16px; }  @property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; } * { box-sizing: border-box; }  .pt-pro button, .pt-subbar button, .pt-modal-ov button, .pt-toast a { font-family: inherit; }  .pt-mkt { display: flex; align-items: center; gap: .7rem; margin-left: .4rem; justify-self: start; min-width: 0; } .pt-mkt .tok-btn { display: inline-flex; align-items: center; gap: .5ch; background: var(--glass-2); border: 1px solid var(--line-strong); border-radius: 11px; padding: .42rem .75rem; cursor: pointer; color: var(--ink); font-family: var(--display); font-weight: 700; transition: border-color .18s, box-shadow .18s; } .pt-mkt .tok-btn:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--green) 22%, transparent), 0 6px 20px -12px rgba(163, 223, 8, .5); } .pt-mkt .tok-btn img { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); } .pt-mkt .tok-btn .car { color: var(--green-ink); font-size: .7rem; } .pt-stat { display: flex; flex-direction: column; line-height: 1.15; align-items: center; } .pt-stat .k { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .pt-stat .v { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .pt-stat .v.up { color: var(--up); } .pt-stat .v.down { color: var(--down); }  .pt-stats { justify-self: center; display: flex; gap: .5rem; align-items: stretch; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .pt-stats::-webkit-scrollbar { display: none; } .pt-statgroup { display: flex; gap: 1.05rem; align-items: center; padding: .3rem .85rem; border-radius: 11px; background: rgba(8, 11, 5, .42); border: 1px solid var(--line); } .pt-subbar .pt-stat .v { font-size: .82rem; white-space: nowrap; } .pt-stat.pt-pct .v { font-weight: 800; } .pt-subbar .pt-toggle { justify-self: end; } @media (max-width: 1280px) { .pt-statgroup:nth-child(3) { display: none; } }  @media (max-width: 1080px) { .pt-statgroup:first-child .pt-stat:nth-child(n+2) { display: none; } }  @media (max-width: 860px) { .pt-stats { display: none; } }  .pt-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: rgba(8, 11, 5, .5); } .pt-toggle button { background: transparent; border: 0; color: var(--muted); padding: .4rem 1rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; } .pt-toggle button.on { background: linear-gradient(180deg, var(--green-lo), var(--green)); color: var(--ink-on-green); box-shadow: 0 0 18px -4px color-mix(in oklab, var(--green) 80%, transparent); }  .pt-subbar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .5rem 1.1rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(163, 223, 8, .04), rgba(8, 11, 5, .35)); } html.mode-easy .pt-subbar { display: none; }    .pt-pro { display: none; grid-template-columns: 1fr 350px; grid-template-rows: 1fr; gap: 12px; padding: 12px; flex: 1 1 auto; min-height: 0; } html.mode-pro .pt-pro { display: grid; } .pt-left { grid-column: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }  #pt-chartcell { flex: none; height: var(--pt-chart-h, 58%); min-height: 160px; } .pt-divider { flex: none; height: 18px; display: flex; align-items: center; justify-content: center; cursor: row-resize; touch-action: none; position: relative; }  .pt-divider::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--line-strong) 16%, var(--line-strong) 84%, transparent); transition: background .15s ease, box-shadow .15s ease; } .pt-divider:hover::before, .pt-divider.drag::before { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--green) 45%, transparent) 12%, var(--green-ink) 50%, color-mix(in oklab, var(--green) 45%, transparent) 88%, transparent); box-shadow: 0 0 12px rgba(163, 223, 8, .4); } .pt-divider-grip { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 15px; border-radius: 8px; color: var(--faint); background: #12180b; border: 1px solid var(--line-strong); transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .pt-divider:hover .pt-divider-grip, .pt-divider.drag .pt-divider-grip { color: var(--green-ink); border-color: color-mix(in oklab, var(--green) 60%, var(--line-strong)); background: color-mix(in oklab, var(--green) 16%, #12180b); box-shadow: 0 0 14px rgba(163, 223, 8, .45); }  .pt-dragging { cursor: row-resize !important; user-select: none; } .pt-dragging .pt-dexframe { pointer-events: none; }  html.mode-pro .pf-nav .nav-in { min-height: 56px; padding-block: .4rem; } .pt-cell { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding: 0 !important;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 24px 60px -34px rgba(0, 0, 0, .85); }  .pt-cell::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 70px; pointer-events: none; z-index: 0; background: radial-gradient(120% 100% at 50% -30%, color-mix(in oklab, var(--green) 12%, transparent), transparent 70%); }  .pt-cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 5; opacity: 0; pointer-events: none; padding: 1.5px; background: conic-gradient(from var(--ang), transparent 0deg, color-mix(in oklab, var(--green) 55%, transparent) 22deg, #f0fff5 42deg, color-mix(in oklab, var(--green) 55%, transparent) 62deg, transparent 88deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: drop-shadow(0 0 5px color-mix(in oklab, var(--green) 70%, transparent)); } #pt-order { grid-column: 2; grid-row: 1; min-height: 0; } .pt-order-body { flex: 1; overflow-y: auto; } #pt-bottom { flex: 1 1 0; min-height: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 90px; min-width: 0; } @media (max-width: 900px) { .pt-pro { grid-template-columns: 1fr; grid-template-rows: auto; } #pt-order { grid-column: 1; } #pt-bottom { grid-template-columns: 1fr; } #pt-chartcell { height: 38vh; }  .pt-order-body { gap: .42rem; padding: .55rem .7rem .65rem; } .pt-side button { padding: .34rem; } .pt-inputwrap { padding: .42rem .7rem; } .pt-inputwrap input { font-size: 1.02rem; } .pt-tokpick { padding: .4rem .7rem; } .pt-note { font-size: .62rem; line-height: 1.3; } } .pt-cell-head { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; flex: none; } .pt-cell-head .tabs { display: flex; gap: .2rem; margin-left: auto; } .pt-cell-head .tabs button { background: transparent; border: 0; color: var(--faint); font-weight: 800; cursor: pointer; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 6px; } .pt-cell-head .tabs button.on { color: var(--green-ink); background: rgba(163, 223, 8, .1); }  .pt-order-tabs, .pt-order-body, #pt-chart, .pt-tape-head, .pt-tape, .pt-table { position: relative; z-index: 1; }  #pt-chart { flex: 1; min-height: 0; position: relative; } .pt-dexframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; } .pt-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: .8rem; text-align: center; padding: 1rem; }  .pt-order-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); flex: none; } .pt-order-tabs button:not(:last-child) { border-right: 1px solid var(--line); } .pt-order-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: .65rem .2rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; cursor: pointer; transition: color .18s, border-color .18s; } .pt-order-tabs button.on { color: var(--green-ink); border-bottom-color: var(--green); box-shadow: 0 8px 18px -14px color-mix(in oklab, var(--green) 90%, transparent); } .pt-order-body { flex: 1; overflow-y: auto; padding: .7rem .85rem .8rem; display: flex; flex-direction: column; gap: .5rem; } .pt-side { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; } .pt-side button { background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--display); font-weight: 800; padding: .4rem; border-radius: 10px; cursor: pointer; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; transition: all .16s; } .pt-side button.buy.on { background: var(--up-bg); border-color: var(--up); color: var(--up); } .pt-side button.sell.on { background: var(--down-bg); border-color: var(--down); color: var(--down); } .pt-field { display: flex; flex-direction: column; gap: .26rem; } .pt-field label { font-family: var(--display); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; display: flex; justify-content: space-between; } .pt-field label .bal { color: var(--faint); text-transform: none; letter-spacing: 0; cursor: pointer; font-family: var(--mono); }  .pt-pctrow { display: flex; gap: .35rem; margin-top: .1rem; } .pt-pctrow button { flex: 1; font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .02em; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: .22rem 0; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .pt-pctrow button:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); color: var(--green-ink); background: rgba(163, 223, 8, .08); }  .pt-inputwrap { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .6rem; row-gap: .22rem; background: rgba(8, 11, 5, .5); border: 1px solid var(--line-strong); border-radius: 12px; padding: .5rem .8rem; transition: border-color .16s, box-shadow .16s; } .pt-inputwrap:focus-within { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 12%, transparent); } .pt-inputwrap input { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-family: var(--mono); font-size: 1.12rem; font-weight: 700; padding: 0; } .pt-inputwrap input::placeholder { color: var(--faint); } .pt-fiatrow { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .pt-fiat { color: var(--green-ink); font-family: var(--mono); font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: .01em; } .pt-fiatrow .bal { color: var(--faint); font-family: var(--mono); font-size: .74rem; } .pt-implied { font-size: .72rem; white-space: nowrap; } .pt-mkt { color: var(--muted); font-family: var(--mono); font-size: .72rem; white-space: nowrap; flex: none; } .pt-mkt.above { color: var(--green-ink); } .pt-mkt.below { color: #ff8a6b; } .pt-inputwrap .suffix { grid-column: 2; grid-row: 1; color: var(--muted); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; gap: .4ch; } .pt-inputwrap .suffix img { width: 18px; height: 18px; border-radius: 50%; } .pt-inputwrap .suffix.pick { cursor: pointer; }  .pt-inputwrap button.suffix.tok-pick { background: var(--glass-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: .3rem .6rem; cursor: pointer; color: var(--ink); font-family: inherit; transition: border-color .15s ease, background .15s ease; } .pt-inputwrap button.suffix.tok-pick:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); background: color-mix(in oklab, var(--green) 12%, var(--glass-2)); } .pt-inputwrap .suffix.tok-pick .car { color: var(--green-ink); font-size: .7rem; margin-left: .1ch; }  .pt-tokpick { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .8rem; background: rgba(8, 11, 5, .5); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); font-family: var(--display); font-weight: 800; cursor: pointer; transition: border-color .15s ease; } .pt-tokpick:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); } .pt-tokpick img { width: 20px; height: 20px; border-radius: 50%; flex: none; } .pt-tokpick .sym { font-size: .98rem; } .pt-tokpick .nm { color: var(--muted); font-weight: 600; font-size: .76rem; font-family: var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pt-tokpick .car { margin-left: auto; color: var(--green-ink); font-size: .8rem; flex: none; } .pt-tradewarn { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; background: color-mix(in oklab, #e8b23a 14%, transparent); border: 1px solid color-mix(in oklab, #e8b23a 42%, var(--line)); color: #f0c356; font-size: .8rem; line-height: 1.3; } .pt-tradewarn svg { flex: none; } .pt-tradewarn.checking { background: rgba(8, 11, 5, .4); border-color: var(--line-strong); color: var(--muted); }  .pt-flip { display: flex; justify-content: center; margin: -.1rem 0 .2rem; } .pt-flip button { width: 30px; height: 30px; border-radius: 9px; background: var(--glass-2); border: 1px solid var(--line-strong); color: var(--green-ink); font-size: 1rem; line-height: 1; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .pt-flip button:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); background: color-mix(in oklab, var(--green) 12%, var(--glass-2)); transform: rotate(180deg); }  .pt-mkt .pt-mktname { display: inline-flex; align-items: center; gap: .5ch; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink); letter-spacing: .01em; margin-left: .4rem; } .pt-mkt .pt-mktname img { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); } .pt-quickpct { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; } .pt-quickpct button { background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; padding: .3rem; font-size: .68rem; font-weight: 700; cursor: pointer; font-family: var(--mono); } .pt-quickpct button:hover { border-color: var(--green); color: var(--green-ink); } .pt-info { display: flex; flex-direction: column; gap: .22rem; font-size: .7rem; } .pt-info .row { display: flex; justify-content: space-between; color: var(--muted); } .pt-info .row b { color: var(--ink); font-family: var(--mono); font-weight: 700; } .pt-info .row .warn { color: var(--red-ink); } .pt-info .row b.warn { color: #f5a623; }  .pt-slipdet { display: inline-flex; align-items: center; } .pt-route { color: var(--ink); } .pt-autobadge { font-family: var(--display); font-weight: 800; font-size: .58rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1; color: var(--green-ink); background: rgba(163, 223, 8, .16); border: 1px solid color-mix(in oklab, var(--green) 40%, transparent); border-radius: 999px; padding: .1rem .34rem; margin-right: .34rem; } .pt-slipdet.warn .pt-autobadge { color: #f5a623; background: rgba(245, 166, 35, .16); border-color: rgba(245, 166, 35, .45); }  .pt-slipbar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .4rem; } .pt-slippill { font-family: var(--mono); font-weight: 700; font-size: .72rem; line-height: 1; color: var(--green-ink); background: rgba(163, 223, 8, .14); border: 1px solid color-mix(in oklab, var(--green) 40%, transparent); border-radius: 999px; padding: .18rem .45rem; } .pt-slippill[hidden] { display: none; } .pt-slippill.warn { color: #f5a623; background: rgba(245, 166, 35, .14); border-color: rgba(245, 166, 35, .5); } .pt-gear { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); cursor: pointer; transition: .15s; } .pt-gear:hover { color: var(--green-ink); border-color: color-mix(in oklab, var(--green) 40%, var(--line-strong)); } .pt-gear.warn { color: #f5a623; border-color: rgba(245, 166, 35, .5); background: rgba(245, 166, 35, .1); } .pt-setpop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 244px; padding: .85rem; border-radius: 14px; background: linear-gradient(160deg, #18220f, #0c1207); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .92); } .pt-setpop[hidden] { display: none; } .pt-setrow { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; color: var(--muted); margin-bottom: .6rem; } .pt-setrow .pt-slipvalh { color: var(--green-ink); font-family: var(--mono); font-weight: 700; } .pt-slips { display: flex; gap: .3rem; } .pt-slip { flex: 1; text-align: center; font-family: var(--mono); font-weight: 700; font-size: .72rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: .34rem .2rem; cursor: pointer; transition: .15s; } .pt-slip.on { background: rgba(163, 223, 8, .16); border-color: color-mix(in oklab, var(--green) 50%, transparent); color: var(--green-ink); } .pt-slip:hover { border-color: color-mix(in oklab, var(--green) 40%, var(--line-strong)); } .pt-slipcustom { display: flex; align-items: center; gap: .25rem; margin-top: .5rem; background: rgba(8, 11, 5, .5); border: 1px solid var(--line-strong); border-radius: 999px; padding: .34rem .7rem; } .pt-slipcustom.on { border-color: color-mix(in oklab, var(--green) 50%, transparent); background: rgba(163, 223, 8, .06); } .pt-slipcustom input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: .78rem; padding: 0; } .pt-slipcustom input::placeholder { color: var(--faint); } .pt-slipcustom i { font-style: normal; color: var(--muted); font-size: .78rem; } .pt-slipwarn { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: .72rem; color: #f5a623; } .pt-slipwarn[hidden] { display: none; } .pt-slipwarn svg { flex: none; } .pt-setpop.warn .pt-slip.on { border-color: rgba(245, 166, 35, .6); color: #f5a623; background: rgba(245, 166, 35, .16); } .pt-setpop.warn .pt-slipcustom.on { border-color: rgba(245, 166, 35, .55); background: rgba(245, 166, 35, .06); } .pt-place { background: linear-gradient(180deg, var(--green-lo), var(--green)); color: var(--ink-on-green); border: 0; border-radius: 12px; padding: .85rem; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; cursor: pointer; box-shadow: 0 3px 0 var(--green-3d), 0 14px 34px -16px color-mix(in oklab, var(--green) 85%, transparent); transition: transform .12s, box-shadow .16s, filter .16s; } .pt-place:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 3px 0 var(--green-3d), 0 18px 40px -14px color-mix(in oklab, var(--green) 95%, transparent); } .pt-place:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-3d); } .pt-place:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .pt-place.sell { background: linear-gradient(180deg, #ff8a8a, var(--red)); color: #2a0808; box-shadow: 0 3px 0 #7a1f1f; } .pt-place.loading { opacity: .7; cursor: wait; } .pt-note { font-size: .66rem; color: var(--faint); line-height: 1.35; } .pt-note.warn { color: var(--red-ink); } .pt-note a { color: var(--green-ink); } .pt-approve { display: flex; align-items: center; gap: .5rem; background: rgba(163, 223, 8, .08); border: 1px solid var(--line-strong); border-radius: 9px; padding: .55rem .7rem; font-size: .72rem; } .pt-approve button { margin-left: auto; background: var(--green); color: var(--ink-on-green); border: 0; border-radius: 7px; padding: .35rem .7rem; font-weight: 800; cursor: pointer; font-size: .7rem; } .pt-seg { display: grid; grid-auto-flow: column; gap: .3rem; } .pt-seg button { background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; padding: .32rem; font-size: .7rem; font-weight: 700; cursor: pointer; } .pt-seg button.on { border-color: var(--green); color: var(--green-ink); background: rgba(163, 223, 8, .08); }  .pt-custom { display: flex; align-items: center; gap: .4rem; margin-top: .28rem; background: rgba(8, 11, 5, .5); border: 1px solid var(--line-strong); border-radius: 9px; padding: .22rem .35rem .22rem .7rem; transition: border-color .15s, box-shadow .15s; } .pt-custom:focus-within { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--green) 22%, transparent); } .pt-custom.on { border-color: var(--green); box-shadow: 0 0 0 1px color-mix(in oklab, var(--green) 30%, transparent); } .pt-custom input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-family: var(--mono); font-size: .98rem; font-weight: 700; } .pt-custom input::placeholder { color: var(--faint); font-family: var(--display); font-weight: 700; letter-spacing: .02em; } .pt-custom select { flex: none; appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; font-family: var(--display); font-weight: 700; font-size: .78rem; padding: .34rem 1.5rem .34rem .55rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa886' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; transition: border-color .15s, color .15s; } .pt-custom select:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); } .pt-custom.on select { border-color: var(--green); color: var(--green-ink); } .pt-custom option { background: var(--surface); color: var(--ink); }   .pt-tape { flex: 1; overflow-y: auto; overflow-x: hidden; font-family: var(--mono); font-size: .72rem; } .pt-tape .r, .pt-tape-head { display: grid; grid-template-columns: 2.3rem 3rem minmax(5rem, 1.1fr) minmax(4rem, .95fr) minmax(3.4rem, .75fr) minmax(5.2rem, 1.1fr) minmax(3.6rem, .8fr); gap: 0; box-sizing: border-box; } .pt-tape .r { padding: .3rem .3rem; border-bottom: 1px solid rgba(48, 62, 30, .85); font-variant-numeric: tabular-nums; align-items: center; } .pt-tape .r > *, .pt-tape-head > span { padding: 0 .42rem; white-space: nowrap; box-sizing: border-box; } .pt-tape .r > * { overflow: hidden; }  .pt-tape-head > span { overflow: visible; padding: 0 .35rem; }  .pt-tape .r > *:not(:last-child), .pt-tape-head > span:not(:last-child) { border-right: 1px solid rgba(48, 62, 30, .7); } .pt-tape .r.buy .side { color: var(--up); } .pt-tape .r.sell .side { color: var(--down); } .pt-tape .r:hover { background: rgba(163, 223, 8, .05); } .pt-tape .r.mine { background: rgba(163, 223, 8, .06); } .pt-tape .r .side { font-weight: 800; } .pt-tape .r .num { text-align: right; } .pt-tape .r .num.weth { color: var(--muted); } .pt-tape .r .t { color: var(--faint); } .pt-tape .r .tr { color: var(--muted); text-align: right; text-decoration: none; } .pt-tape .r a.tr:hover { color: var(--green-ink); } .pt-tape-head { padding: .35rem .35rem; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); border-bottom: 1px solid var(--line); } .pt-tape-head span { display: flex; align-items: center; gap: .25rem; } .pt-tape-head span:not(:first-child):not(:nth-child(2)) { justify-content: flex-end; }  .pt-thf { background: transparent; border: 0; color: var(--faint); cursor: pointer; padding: 1px; display: inline-flex; opacity: .55; border-radius: 3px; } .pt-thf:hover { opacity: 1; color: var(--ink); } .pt-thf.on { opacity: 1; color: var(--green-ink); }  .pt-filter { width: 340px; max-width: 92vw; background: linear-gradient(180deg, rgba(24, 34, 14, .98), rgba(10, 16, 6, .99)); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); } .pt-filter-b { padding: 1rem; display: flex; flex-direction: column; gap: .7rem; } .pt-filt-opts { display: flex; flex-direction: column; gap: .3rem; } .pt-filt-opt { text-align: left; background: rgba(8, 11, 5, .5); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: .55rem .8rem; cursor: pointer; font-weight: 700; } .pt-filt-opt.on, .pt-filt-opt:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); color: var(--green-ink); } .pt-filt-presets { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; } .pt-filt-preset { background: rgba(8, 11, 5, .5); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: .5rem .3rem; cursor: pointer; font-weight: 700; font-size: .82rem; } .pt-filt-preset:hover { border-color: color-mix(in oklab, var(--green) 55%, var(--line-strong)); color: var(--green-ink); } .pt-filt-range { display: flex; flex-direction: column; gap: .45rem; } .pt-filt-range label { display: flex; align-items: center; background: rgba(8, 11, 5, .5); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; } .pt-filt-range label i { padding: 0 .6rem; color: var(--faint); font-style: normal; font-size: .8rem; border-right: 1px solid var(--line); } .pt-filt-range input, .pt-filt-in { flex: 1; width: 100%; background: transparent; border: 0; color: var(--ink); padding: .55rem .7rem; font-family: var(--mono); font-size: .9rem; outline: none; } .pt-filt-in { background: rgba(8, 11, 5, .5); border: 1px solid var(--line-strong); border-radius: 10px; } .pt-filter-f { display: flex; gap: .5rem; justify-content: flex-end; padding: .8rem 1rem; border-top: 1px solid var(--line); } .pt-filt-apply { background: var(--green); color: var(--ink-on-green, #0a0d06); border: 0; border-radius: 10px; padding: .5rem 1.1rem; font-weight: 800; cursor: pointer; } .pt-filt-clear { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 10px; padding: .5rem 1rem; cursor: pointer; font-weight: 700; }   .pt-pos-head, .pt-pos-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5.5rem, .85fr) minmax(4.5rem, .6fr); gap: 0; align-items: center; } .pt-pos-head { padding: .3rem .35rem; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); border-bottom: 1px solid var(--line); } .pt-pos-r { width: 100%; padding: .4rem .35rem; background: transparent; border: 0; border-bottom: 1px solid rgba(35, 45, 23, .5); cursor: pointer; color: var(--ink); text-align: left; font-family: var(--mono); font-size: .74rem; } .pt-pos-r:hover { background: rgba(163, 223, 8, .06); } .pt-pos-head > span, .pt-pos-r > * { padding: 0 .5rem; box-sizing: border-box; white-space: nowrap; overflow: hidden; min-width: 0; } .pt-pos-head > span:not(:first-child), .pt-pos-r > *:not(:first-child) { text-align: right; }  .pt-pos-head > span:not(:last-child), .pt-pos-r > *:not(:last-child) { border-right: 1px solid rgba(48, 62, 30, .7); } .pt-pos-tok { display: flex; align-items: center; gap: .45rem; min-width: 0; } .pt-pos-tok img { width: 18px; height: 18px; border-radius: 50%; flex: none; } .pt-pos-tok b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }  .pt-sec-h { padding: .55rem .5rem .3rem; font-family: var(--display); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .pt-sec-h:first-child { padding-top: .2rem; } .pt-empty.sm { padding: .5rem .6rem; font-size: .72rem; } .pt-pos-r.pt-pos-static { cursor: default; } .pt-pos-r.pt-pos-static:hover { background: transparent; } .pt-pos-tok em { font-style: normal; color: var(--faint); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; } .pt-pos-amt { color: var(--muted); font-variant-numeric: tabular-nums; } .pt-pos-val { font-weight: 800; font-variant-numeric: tabular-nums; }  .pt-table { flex: 1; overflow-y: auto; font-size: .72rem; } .pt-table table { width: 100%; border-collapse: collapse; } .pt-table th { position: sticky; top: 0; background: linear-gradient(180deg, rgba(20, 26, 13, .96), rgba(16, 21, 11, .96)); text-align: left; font-family: var(--display); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .4rem .6rem; border-bottom: 1px solid var(--line); font-weight: 700; } .pt-table td { padding: .38rem .6rem; border-bottom: 1px solid rgba(35, 45, 23, .5); font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); } .pt-table td .tag { padding: .05rem .4rem; border-radius: 5px; font-size: .62rem; font-weight: 800; text-transform: uppercase; } .pt-table td .tag.open { background: rgba(163, 223, 8, .14); color: var(--green-ink); } .pt-table td .tag.filled { background: rgba(120, 140, 90, .18); color: var(--muted); } .pt-table td .tag.cancelled { background: rgba(255, 90, 90, .12); color: var(--red-ink); } .pt-table td button.cancel { background: transparent; border: 1px solid var(--line-strong); color: var(--red-ink); border-radius: 6px; padding: .2rem .5rem; cursor: pointer; font-size: .64rem; font-weight: 700; } .pt-empty { padding: 1.2rem; text-align: center; color: var(--faint); font-size: .76rem; }  .pt-modal-ov { position: fixed; inset: 0; z-index: 100; background: rgba(3, 6, 2, .7); display: grid; place-items: center; } .pt-modal { width: 360px; max-width: 92vw; max-height: 78vh; background: linear-gradient(180deg, rgba(24, 34, 14, .98), rgba(10, 16, 6, .99)); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85); } .pt-modal-h { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; font-weight: 800; border-bottom: 1px solid var(--line); } .pt-modal-h button { background: none; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; } .pt-modal-list { overflow-y: auto; } .pt-modal-row { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem 1rem; background: transparent; border: 0; border-bottom: 1px solid rgba(35, 45, 23, .5); color: var(--ink); cursor: pointer; text-align: left; } .pt-modal-row:hover { background: rgba(163, 223, 8, .08); } .pt-modal-row img { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); } .pt-modal-row .nm { display: flex; flex-direction: column; } .pt-modal-row .nm b { font-weight: 800; } .pt-modal-row .nm span { font-size: .68rem; color: var(--faint); } .pt-modal-row .venue { margin-left: auto; font-size: .6rem; color: var(--faint); text-transform: uppercase; font-family: var(--mono); }  .pt-toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; padding: .7rem 1rem; color: var(--ink); font-size: .8rem; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .8); max-width: 90vw; user-select: text; } .pt-toast.err { border-color: var(--red); color: var(--red-ink); cursor: pointer; } .pt-toast a { color: var(--green-ink); } .pv-*); the swap/terminal show-hide + the Easy/Pro toggle placement on the card live in _pv_swap.html's inline <style>. The whole pro sub-bar (pair pill, price
   stats, sub-bar toggle) is already hidden in Easy via `html.mode-easy .pt-subbar { display:none }`.
   ============================================================================================= */
body { transition: opacity 200ms linear; } /* smooth both directions in the reduced-motion crossfade */

/* =============================================================================================
   easy <-> pro transition, smooth, staggered SLIDE (transform/opacity only, 60fps). transition.js drives.
   No content clone, no shockwave ring, no scanline bar. Panels glide in from their edges; god-ray blooms.
   ============================================================================================= */
:root { --pt-ease: cubic-bezier(.16, 1, .3, 1); } /* smooth deceleration, the "premium" feel */

/* easy -> pro: you DIVE into the swap card (it rushes up + dissolves), then the terminal panels FLY in
   from off-screen in 3D with a spring overshoot and snap into place. Dynamic motion, NOT a light flash. */
html.leaving .pv-swap .sw-card { animation: pt-dive 240ms cubic-bezier(.5, 0, .85, .35) both; transform-origin: 50% 44%; }
html.leaving .pv-swap .sw-head, html.leaving .pv-swap .pv-foot { animation: pt-dive-fade 190ms ease-in both; }
@keyframes pt-dive { to { opacity: 0; transform: scale(1.34); } }
@keyframes pt-dive-fade { to { opacity: 0; } }

html.booting #pt-chartcell { animation: pt-fly-l 760ms cubic-bezier(.2, 1.32, .38, 1) both; }
html.booting #pt-order     { animation: pt-fly-r 760ms cubic-bezier(.2, 1.32, .38, 1) both 95ms; }
html.booting #pt-bottom    { animation: pt-fly-u 760ms cubic-bezier(.2, 1.32, .38, 1) both 190ms; }
html.booting .pt-subbar    { animation: pt-soft-in 480ms ease both; animation-delay: 60ms; }
/* the edge-light rides each panel's border as it settles in (staggered to match the fly-in) */ html.booting #pt-chartcell::after { animation: pt-ride 2600ms linear both 140ms; } html.booting #pt-order::after { animation: pt-ride 2600ms linear both 240ms; } html.booting #pt-bottom .pt-cell::after { animation: pt-ride 2600ms linear both 340ms; } @keyframes pt-fly-l { from { opacity: 0; transform: perspective(1500px) translate3d(-55vw, 44px, -340px) rotateY(26deg) scale(.88); } to { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateY(0deg) scale(1); } } @keyframes pt-fly-r { from { opacity: 0; transform: perspective(1500px) translate3d(55vw, 44px, -340px) rotateY(-26deg) scale(.88); } to { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateY(0deg) scale(1); } } @keyframes pt-fly-u { from { opacity: 0; transform: perspective(1500px) translate3d(0, 58vh, -340px) rotateX(-24deg) scale(.9); } to { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateX(0deg) scale(1); } } @keyframes pt-soft-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }  @keyframes pt-ride { 0% { opacity: 0; --ang: 0deg; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; --ang: 720deg; } }  html.retracting #pt-chartcell { animation: pt-out-l 300ms cubic-bezier(.5, 0, .9, .35) both; } html.retracting #pt-order { animation: pt-out-r 300ms cubic-bezier(.5, 0, .9, .35) both; } html.retracting #pt-bottom { animation: pt-out-u 300ms cubic-bezier(.5, 0, .9, .35) both; } html.retracting .pt-cell::after { animation: pt-ride-out 320ms linear both; } @keyframes pt-out-l { to { opacity: 0; transform: perspective(1400px) translate3d(-42vw, 24px, -300px) rotateY(22deg) scale(.9); } } @keyframes pt-out-r { to { opacity: 0; transform: perspective(1400px) translate3d(42vw, 24px, -300px) rotateY(-22deg) scale(.9); } } @keyframes pt-out-u { to { opacity: 0; transform: perspective(1400px) translate3d(0, 40vh, -300px) rotateX(-20deg) scale(.92); } } @keyframes pt-ride-out { 0% { opacity: 1; --ang: 0deg; } 100% { opacity: 0; --ang: 360deg; } } html.easyin .pv-swap .sw-card { animation: pt-card-in 420ms var(--pt-ease) both; } html.easyin .pv-swap .sw-head { animation: pt-soft-in 360ms ease both; } @keyframes pt-card-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); } to { opacity: 1; transform: none; } }  @media (prefers-reduced-motion: reduce) { html.booting #pt-chartcell, html.booting #pt-order, html.booting #pt-bottom, html.booting .pt-subbar, html.retracting #pt-chartcell, html.retracting #pt-order, html.retracting #pt-bottom, html.booting .pt-cell::after, html.retracting .pt-cell::after, html.easyin .pv-swap .sw-card, html.easyin .pv-swap .sw-head { animation: none !important; } body.rm-cross { opacity: 0; transition: opacity 200ms linear; } } .pt-spin { width: 13px; height: 13px; border: 2px solid rgba(23, 35, 10, .3); border-top-color: var(--ink-on-green); border-radius: 50%; display: inline-block; animation: pt-spin .7s linear infinite; vertical-align: -2px; margin-right: .4ch; } @keyframes pt-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pt-spin { animation: none; } }  .pt-untradeable{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem; padding:2.6rem 1.5rem; } .pt-ut-icon{ font-size:1.7rem; line-height:1; opacity:.85; } .pt-ut-title{ font-family:'Archivo',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; } .pt-ut-msg{ font-family:'Hanken',sans-serif; font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.62); max-width:34ch; } .pt-ut-sub{ font-family:'Hanken',sans-serif; font-size:.78rem; color:rgba(255,255,255,.4); }