:root{
  --bg:#0a0b0e; --panel:#0a0b0e; --panel-border:#1c2027;
  --line:#16191f; --line2:#21252c;
  --card:#0d0f12; --card2:#101216;
  --accent:#f7b955; --accent-soft:rgba(247,185,85,.12); --accent-border:rgba(247,185,85,.3);
  --text:#eef1f5; --muted:#8a919c; --muted2:#565d68;
  --green:#3ad29b; --red:#f76b62;
  --ui:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:auto;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.mono{font-family:var(--mono)}
.up{color:var(--green)}
.down{color:var(--red)}

/* ── shell ── */
.pt-shell{max-width:1440px;margin:0 auto;padding:16px 16px 40px;min-width:1220px}

/* Top bar is now the shared navbar component (static/navbar.css /
   dashboard.py's navbar_html Jinja global) -- see the call to it in the
   body below instead of an inline .pt-topbar block. */

/* ── main 3-col panel ── */
.pt-panel{margin-top:14px;background:var(--panel);border:1px solid var(--panel-border);border-radius:22px;display:grid;grid-template-columns:246px 1fr 300px;overflow:hidden}
.pt-left{border-right:1px solid var(--line);padding:18px 16px;display:flex;flex-direction:column;gap:22px;overflow-y:auto;max-height:calc(100vh - 110px)}
.pt-right{border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:calc(100vh - 110px)}
.pt-center{min-width:0;overflow-y:auto;max-height:calc(100vh - 110px)}

/* ── left rail sections ── */
.pt-sec-title{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px}
.pt-sort-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:11px;cursor:pointer;transition:background .15s,color .15s;color:var(--muted);font-size:13px;font-weight:600}
.pt-sort-row:hover{background:var(--line)}
.pt-sort-row.active{background:var(--accent-soft);color:var(--accent)}
.pt-sort-count{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--muted2);background:var(--line);border-radius:999px;padding:2px 7px;flex-shrink:0}
.pt-sort-row.active .pt-sort-count{color:var(--accent);background:rgba(247,185,85,.16)}

/* A button now, not a div wrapping one: the whole row is the target. */
.pt-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:7px 2px;font-size:12.5px;color:var(--text);background:none;border:none;
  text-align:left;cursor:pointer;border-radius:9px;transition:background .15s}
.pt-toggle-row:hover{background:var(--line)}

/* ── the collapsible block ── */
.pt-adv{border-top:1px solid var(--line);padding-top:14px}
.pt-adv-sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:6px 2px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted2)}
.pt-adv-sum::-webkit-details-marker{display:none}
.pt-adv-label{flex:1}
/* Only rendered when something is on, so an untouched rail stays quiet. */
.pt-adv-count{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--accent);
  background:rgba(247,185,85,.16);border-radius:999px;padding:2px 7px;letter-spacing:0}
.pt-adv-count:empty{display:none}
.pt-adv-chev{width:15px;height:15px;flex:0 0 15px;transition:transform .18s}
.pt-adv[open] .pt-adv-chev{transform:rotate(180deg)}
.pt-adv-body{display:flex;flex-direction:column;gap:18px;padding-top:10px}
.pt-switch{width:34px;height:19px;border-radius:999px;background:var(--line2);position:relative;flex-shrink:0;transition:background .18s;border:none;display:block;pointer-events:none}
.pt-switch::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--muted2);transition:transform .18s,background .18s}
.pt-switch.on{background:var(--accent-soft);border:1px solid var(--accent-border)}
.pt-switch.on::after{transform:translateX(15px);background:#0a0b0e}

.pt-liq-value{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:700;margin-bottom:8px}
.pt-liq-slider{width:100%;-webkit-appearance:none;height:4px;border-radius:4px;background:var(--line2);outline:none}
.pt-liq-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px rgba(247,185,85,.18)}
.pt-liq-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}
.pt-liq-fill{height:4px;border-radius:4px;background:var(--accent);margin-top:-4px;pointer-events:none}

.pt-age-row{display:flex;gap:6px;flex-wrap:wrap}
.pt-age-chip{padding:6px 11px;font-size:10.5px;font-weight:700;letter-spacing:.03em;border-radius:999px;background:var(--card2);border:1px solid var(--line2);color:var(--muted);transition:all .15s}
.pt-age-chip:hover{color:var(--text)}
.pt-age-chip.active{background:var(--accent);border-color:var(--accent);color:#0a0b0e}

.pt-bot-card{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:16px;padding:14px;margin-top:auto}
.pt-bot-title{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.pt-bot-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:ptPulse 1.6s ease-in-out infinite}
.pt-bot-card.off{background:var(--card2);border-color:var(--line2)}
.pt-bot-card.off .pt-bot-title{color:var(--text)}
.pt-bot-card.off .pt-bot-dot{background:var(--muted2);animation:none}
.pt-bot-sub{font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:11px}
.pt-bot-btn{width:100%;background:var(--card2);border:1px solid var(--accent-border);color:var(--accent);font-size:12px;font-weight:700;border-radius:10px;padding:9px;transition:background .15s}
.pt-bot-btn:hover{background:var(--line)}

@keyframes ptPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── center header ── */
.pt-feed-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.pt-feed-title{font-size:19px;font-weight:700}
.pt-feed-sub{font-size:11.5px;color:var(--muted2);margin-top:3px;font-family:var(--mono)}
.pt-scanning-pill{display:flex;align-items:center;gap:6px;background:rgba(58,210,155,.12);border-radius:999px;padding:6px 12px;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--green)}
.pt-scan-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:ptPulse 1.4s ease-in-out infinite}

/* ── round avatars (top traders rail) ── */
.pt-story{flex-shrink:0;width:66px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.pt-story-ring{width:62px;height:62px;border-radius:50%;padding:2.5px;background:linear-gradient(135deg,var(--accent),var(--green))}
.pt-story-ring.down{background:linear-gradient(135deg,var(--red),var(--accent))}
.pt-story-inner{width:100%;height:100%;border-radius:50%;padding:2px;background:var(--bg)}
.pt-story-img,.pt-story-img-ph{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--line2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted)}
.pt-story-name{font-size:10px;font-weight:700;color:var(--text);max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-story-chg{font-family:var(--mono);font-size:9.5px;font-weight:700}

/* ── top traders spotlight ──
   Ring + circle + name + stat, for people, sitting inside the always-visible center feed --
   unlike the fuller "Top traders" card in the desktop-only right rail,
   this is reachable on mobile without scrolling past the whole token list
   first, which is what made that existing widget effectively invisible
   there. Hidden entirely (renderTraderRail's own JS) when nobody has a
   positive PnL to show. */
.pt-trader-rail-wrap{border-bottom:1px solid var(--line)}
.pt-trader-rail-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 0}
.pt-trader-rail-title{font-size:12.5px;font-weight:700;color:var(--text)}
.pt-trader-rail-link{font-size:11px;font-weight:600;color:var(--accent);text-decoration:none}
.pt-trader-rail{display:flex;gap:16px;padding:10px 22px 16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.pt-trader-rail::-webkit-scrollbar{display:none}
.pt-trader-rail.pt-rail-reserved:empty{min-height:122px}
@media (max-width:767px){.pt-trader-rail.pt-rail-reserved:empty{min-height:114px}}
.pt-trader-story{position:relative}
.pt-trader-rank-badge{position:absolute;top:-2px;right:2px;z-index:1;width:17px;height:17px;border-radius:50%;background:var(--panel);border:1.5px solid var(--bg);color:var(--text);font-family:var(--mono);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pt-trader-rank-badge.gold{background:var(--accent);color:#1a1400;border-color:var(--accent)}

/* ── poster cards ── */
.pt-feed-list{padding:16px 22px 32px;display:flex;flex-direction:column;gap:16px}

/* ── SURGE STRIP ── */
.pt-surge-wrap{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(247,107,98,.07),transparent 70%)}
.pt-surge-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 22px 0}
.pt-surge-title{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.09em;color:#ff6b5e;font-family:var(--mono)}
.pt-surge-dot{width:7px;height:7px;border-radius:50%;background:#ff6b5e;animation:pt-surge-pulse 1.1s infinite}
@keyframes pt-surge-pulse{0%{box-shadow:0 0 0 0 rgba(255,107,94,.6)}70%{box-shadow:0 0 0 7px rgba(255,107,94,0)}100%{box-shadow:0 0 0 0 rgba(255,107,94,0)}}
.pt-surge-sub{font-size:10.5px;color:var(--muted2);font-family:var(--mono);white-space:nowrap}
.pt-surge-rail{display:flex;gap:10px;padding:11px 22px 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.pt-surge-rail::-webkit-scrollbar{display:none}
/* ── NEW ON ORCAGENT: tokens launched here, bought here ── */
.pt-launch-wrap{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(247,185,85,.07),transparent 70%)}
.pt-launch-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 22px 0}
.pt-launch-title{font-size:11.5px;font-weight:800;letter-spacing:.09em;color:var(--accent);font-family:var(--mono)}
.pt-launch-all{font-size:11px;font-weight:700;color:var(--muted2);font-family:var(--mono);text-decoration:none;white-space:nowrap}
.pt-launch-rail{display:flex;gap:10px;padding:11px 22px 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.pt-launch-rail::-webkit-scrollbar{display:none}
.pt-launch-card{flex:0 0 auto;width:200px;display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(247,185,85,.3);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .12s,transform .12s}
.pt-launch-card:hover{border-color:rgba(247,185,85,.6);transform:translateY(-1px)}
.pt-launch-img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#21262c;flex:none}
.pt-launch-body{min-width:0;flex:1}
.pt-launch-sym{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-launch-meta{font-size:10.5px;color:var(--muted2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pt-launch-buy{flex:none;font-size:11px;font-weight:800;color:#141617;background:var(--accent);border-radius:8px;padding:6px 9px}
/* Set by enableDragScroll() in live-market-pro.js while a mouse-drag pan is
   in progress: a grabbing cursor, and no text selection dragged out of the
   cards as the rail moves.

   It must NOT also set pointer-events:none on the children. That was here,
   and it silently killed tapping a token: the browser hit-tests for mouseup
   BEFORE the mouseup handler removes the class, so with the cards
   unhittable the mouseup landed on the rail itself. A click's target is the
   common ancestor of its mousedown and mouseup targets, so every click
   arrived as the rail -- and the delegated handler, which looks for
   .closest('[data-action="open-surge"]'), matched nothing. Surge cards,
   story circles and trader circles all stopped opening.
   Suppressing the click that a REAL drag ends with is done in JS instead,
   where it can tell a drag from a tap. */
.pt-surge-rail.pt-rail-dragging,.pt-trader-rail.pt-rail-dragging{cursor:grabbing;user-select:none}
.pt-surge-card{flex:0 0 auto;width:196px;background:var(--card);border:1px solid rgba(255,107,94,.32);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .12s,transform .12s}
.pt-surge-card:hover{border-color:rgba(255,107,94,.6);transform:translateY(-1px)}
.pt-surge-card.cooling{border-color:var(--line);opacity:.62}
.pt-surge-top{display:flex;align-items:center;gap:8px;min-width:0}
.pt-surge-img{width:26px;height:26px;border-radius:50%;background:var(--line);flex-shrink:0;object-fit:cover}
.pt-surge-sym{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.pt-surge-chain{margin-left:auto;font-size:9px;font-family:var(--mono);color:var(--muted2);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.pt-surge-x{font-size:10px;line-height:1;padding:2px 4px;border-radius:5px;background:rgba(255,255,255,.09);color:var(--text);flex-shrink:0}
/* The percentage move now holds the card's prominent slot -- it is the
   figure people actually scan the strip for. The <i> carries the period it
   covers, small and dim, so a nine-minute move can never be read as a
   five-minute one. */
.pt-surge-chg{display:flex;align-items:baseline;gap:4px;margin-top:7px;font-family:var(--mono);font-size:21px;font-weight:800;line-height:1;letter-spacing:-.03em}
.pt-surge-chg.up{color:#3ad29b}
.pt-surge-chg.down{color:#f76b62}
.pt-surge-chg.none{color:var(--muted2);font-size:15px}
.pt-surge-chg i{font-style:normal;font-size:9px;font-weight:600;opacity:.55;letter-spacing:.02em}
/* Demoted to the meta line: still the reason the card is here, but no longer
   competing with the number above it. */
.pt-surge-mult{font-weight:800;color:#ff6b5e}
/* overflow:hidden keeps a very busy token ($241K, four-digit trade count) clipping its last field inside the card instead of spilling past the border. */
.pt-surge-meta{display:flex;align-items:center;gap:5px;margin-top:7px;font-family:var(--mono);font-size:9.5px;color:var(--muted2);white-space:nowrap;overflow:hidden}
.pt-surge-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.09);margin-top:7px;overflow:hidden;display:flex}
.pt-surge-bar i{display:block;height:100%;background:#3ad29b}
.pt-surge-bar i.s{background:#f76b62}
.pt-empty{text-align:center;color:var(--muted2);font-size:13px;padding:50px 0}
.pt-card{border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:var(--card)}
.pt-card.hi{border-color:var(--accent-border);box-shadow:0 0 0 1px rgba(247,185,85,.22)}
.pt-card-hd{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line)}
.pt-tok-logo,.pt-tok-logo-ph{width:38px;height:38px;border-radius:11px;object-fit:cover;flex-shrink:0;background:var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}
.pt-tok-id{min-width:0}
.pt-tok-sym{font-size:14px;font-weight:700}
.pt-stars{font-size:11px;letter-spacing:1px}
.pt-stars.s-hi{color:var(--accent)}
.pt-stars.s-mid{color:var(--muted)}
.pt-stars.s-lo{color:var(--red)}
.pt-tok-meta{font-size:11px;color:var(--muted2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-tok-ca-row{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.pt-tok-ca{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;background:var(--card2);cursor:pointer;user-select:none;transition:background .12s}
.pt-tok-ca:hover{background:var(--line2)}
.pt-tok-ca-text{font-size:10.5px;color:var(--muted2);letter-spacing:.01em}
.pt-tok-ca-icon{font-size:10px;color:var(--muted2);line-height:1}
.pt-tok-socials{display:flex;align-items:center;gap:4px}
.pt-tok-social{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--card2);color:var(--muted2);font-size:10.5px;text-decoration:none;transition:background .12s,color .12s}
.pt-tok-social:hover{background:var(--line2);color:var(--text)}
/* chain badge -- which network a token/trade lives on. No image asset (nothing
   to hotlink reliably), just a colored dot + short label per chain, matching
   each chain's own brand color so it reads at a glance across a long feed. */
.pt-chain-badge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;
  letter-spacing:.03em;padding:2px 6px 2px 5px;border-radius:999px;vertical-align:middle;margin-left:6px;
  background:var(--line);color:var(--muted2)}
.pt-chain-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pt-chain-badge.chain-solana .pt-chain-dot{background:#9945FF}
.pt-chain-badge.chain-bsc .pt-chain-dot{background:#F0B90B}
.pt-chain-badge.chain-base .pt-chain-dot{background:#0052FF}
.pt-chain-badge.chain-arbitrum .pt-chain-dot{background:#28A0F0}
.pt-chain-badge.chain-polygon .pt-chain-dot{background:#8247E5}
.pt-chain-badge.chain-robinhood .pt-chain-dot{background:#00C805}
.pt-card-hd-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.pt-badge{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--muted2);white-space:nowrap}
.pt-badge .ico{font-size:10px}
.pt-badge.ok .ico{color:var(--green)}
.pt-badge.bad .ico{color:var(--red)}
.pt-watch-btn{background:none;border:none;color:var(--line2);font-size:17px;line-height:1;padding:2px;transition:color .15s;flex-shrink:0}
.pt-watch-btn:hover{color:var(--muted)}
.pt-watch-btn.active{color:var(--accent)}

.pt-card-body{display:grid;grid-template-columns:210px 1fr}
.pt-card-stats{padding:14px 15px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.pt-price{font-family:var(--mono);font-size:21px;font-weight:700}
.pt-chg{font-family:var(--mono);font-size:12.5px;font-weight:700;margin-top:2px}
.pt-stat-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line);font-size:11px}
.pt-stat-row:first-of-type{margin-top:10px}
.pt-stat-lbl{color:var(--muted2);letter-spacing:.04em;font-size:10px;font-weight:700;text-transform:uppercase}
.pt-stat-val{font-family:var(--mono);font-weight:700;color:var(--text)}
.pt-trade-btns{display:flex;gap:8px;margin-top:12px}
.pt-buy-btn,.pt-sell-btn{flex:1;padding:9px 0;border-radius:10px;font-size:12px;font-weight:700;transition:filter .15s,background .15s}
.pt-buy-btn{background:var(--accent);color:#0a0b0e;border:none}
.pt-buy-btn:hover{filter:brightness(1.08)}
.pt-sell-btn{background:transparent;color:var(--red);border:1px solid rgba(247,107,98,.4)}
.pt-sell-btn:hover{background:rgba(247,107,98,.1)}
.pt-buy-panel{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.pt-buy-input{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:7px 9px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none}
.pt-buy-input:focus{border-color:var(--accent)}
.pt-buy-confirm{width:100%;background:var(--accent);color:#0a0b0e;border:none;border-radius:8px;padding:8px;font-size:11.5px;font-weight:700}
.pt-buy-msg{font-size:11px;margin-top:2px}
.pt-buy-msg.ok{color:var(--green)}
.pt-buy-msg.err{color:var(--red)}
/* Where the money goes, before anything is signed. Deliberately not a card:
   it belongs to the input above it, so it shares that edge rather than
   floating as a separate object. */
.pt-buy-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}

/* ── BUY SHEET ──
   Buying used to be a small number field tucked inside the card, which on a
   phone meant the OS keyboard sliding up over the very figures you were
   deciding on -- the price, the move, what you hold. This is the whole
   screen instead: the token at the top, the amount enormous in the middle,
   and a keypad that belongs to the page, so nothing is ever covered.

   The trade itself is untouched. The sheet still carries #pt-buy-panel-N,
   .pt-buy-confirm, #pt-buy-amt-N and #pt-buy-msg-N, so confirmBuy() and the
   auto-bridge polling run exactly as before -- this replaces what a person
   looks at, not what happens when they press the button. */
/* Above the navbar (200) and its dropdowns (280): this is a modal that owns
   the screen while it is open. At 120 it sat UNDER the sticky navbar, whose
   avatar swallowed the clicks meant for the sheet's own close button --
   found by clicking it in a real browser, not by reading the stylesheet. */
.pt-sheet{position:fixed;inset:0;z-index:300;
  /* Not a flat black void. A faint cool wash at the top gives the screen a
     horizon, so the ticket below reads as sitting ON something rather than
     floating in nothing -- which is what made the old one feel like an
     empty page with a number in it. */
  background:radial-gradient(135% 58% at 50% -8%, #141821 0%, rgba(20,24,33,0) 64%), var(--sheet-bg);
  display:none;flex-direction:column;overscroll-behavior:contain;
  --sheet-bg:#08090c;      /* one step darker than the page, so the sheet reads as nearer */
  --sheet-tile:#101319;    /* the ticket and the quick-amount track */
  --sheet-key:#0e1116;     /* key faces: lifted off the ground, not painted on it */
  --sheet-line:#1f242d}
.pt-sheet.open{display:flex}
.pt-sheet-grab{width:36px;height:4px;border-radius:99px;background:var(--line2);
  margin:8px auto 0;flex:0 0 auto}

/* ── who you are buying ── */
.pt-sheet-hd{display:flex;align-items:center;gap:12px;
  padding:12px 16px 14px;border-bottom:1px solid var(--sheet-line);flex:0 0 auto}
/* A rounded square, not a circle: token art is square everywhere it comes
   from, and a circle crops the corners off half of it. */
.pt-sheet-img,.pt-sheet-img-ph{width:42px;height:42px;border-radius:13px;
  background:var(--line);object-fit:cover;flex:0 0 auto;border:1px solid var(--sheet-line)}
/* Same fallback the cards use: a token with no logo shows its initials
   rather than a 42px hole where a picture should be. */
.pt-sheet-img-ph{display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--muted)}
.pt-sheet-id{min-width:0;flex:1}
.pt-sheet-sym{display:flex;align-items:center;gap:7px;font-size:16.5px;
  font-weight:700;letter-spacing:-.012em}
.pt-sheet-chain{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.07em;
  color:var(--muted);background:var(--sheet-tile);border:1px solid var(--sheet-line);
  border-radius:5px;padding:2px 5px}
.pt-sheet-mc{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:3px}
.pt-sheet-px{text-align:right;flex:0 0 auto}
.pt-sheet-price{font-family:var(--mono);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums}
/* The move is a chip rather than loose coloured text -- it is a reading,
   and giving it an edge stops it competing with the price above it. */
.pt-sheet-chg{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  margin-top:4px;padding:2px 6px;border-radius:6px;font-variant-numeric:tabular-nums}
.pt-sheet-chg.up{color:var(--green);background:rgba(58,210,155,.10)}
.pt-sheet-chg.down{color:var(--red);background:rgba(247,107,98,.10)}

/* ── the ticket ──
   One surface carrying the whole decision: what the number means, the
   number, the balance it is measured against, and what it converts into.
   This is the only part of the sheet that flexes, so when the cost
   breakdown appears in the footer everything else holds its size and THIS
   shrinks. Squeezed below its own content and left to overflow, the
   "≈ 9,716 KEKIUS" line spilled out and painted itself across the 10/25/50
   row -- ghost text sitting on top of the buttons. It clips instead now,
   and the breakdown below is capped so it cannot squeeze this far in the
   first place. */
.pt-sheet-mid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(10px,2.2vh,20px) 16px;min-height:118px;overflow:hidden}
.pt-ticket{background:var(--sheet-tile);border:1px solid var(--sheet-line);
  border-radius:18px;padding:clamp(13px,3.2vh,26px) 17px clamp(11px,2.6vh,20px);
  display:flex;flex-direction:column;gap:clamp(6px,1.8vh,15px)}
.pt-ticket-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pt-sheet-cap{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0}
.pt-sheet-cap .pt-buy-cur{color:var(--accent);letter-spacing:.06em}
.pt-ticket-bal{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums}
.pt-ticket-bal b{color:var(--text);font-weight:700}
/* Left-aligned against the ticket's own edge, so the figure has something
   to sit on. Centred in open space it read as decoration; here it reads as
   an entry in a field. */
.pt-sheet-amt{font-size:clamp(36px,12.5vw,56px);font-weight:700;letter-spacing:-.035em;
  line-height:1.04;font-family:var(--ui);white-space:nowrap;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.pt-sheet-amt.dim{color:var(--muted2)}
/* What you get, on its own rule under the amount: a conversion, not a
   caption. The arrow says which way it runs. */
.pt-ticket-get{display:flex;align-items:center;gap:7px;min-height:20px;
  border-top:1px solid var(--sheet-line);padding-top:clamp(7px,1.4vh,11px)}
.pt-ticket-arrow{display:flex;color:var(--muted2);flex:0 0 auto}
.pt-ticket-arrow svg{width:13px;height:13px}
.pt-sheet-get{font-family:var(--mono);font-size:12.5px;color:var(--green);font-weight:600;
  font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── quick amounts: one segmented track, not four loose pills ── */
.pt-sheet-pcts{display:grid;grid-template-columns:repeat(4,1fr);
  margin:0 16px clamp(9px,1.6vh,14px);background:var(--sheet-tile);
  border:1px solid var(--sheet-line);border-radius:13px;overflow:hidden;flex:0 0 auto}
.pt-pct{background:none;border:none;border-left:1px solid var(--sheet-line);
  color:var(--text);padding:12px 0;font-size:13px;font-weight:700;
  transition:background .12s,color .12s}
.pt-pct:first-child{border-left:none}
.pt-pct:active{background:var(--accent-soft);color:var(--accent)}

/* ── the keypad ──
   Keys have faces. Bare glyphs on black are the cheapest thing a buy screen
   can do and the hardest to aim at: nothing tells you where the target ends.
   The keypad still gives way before the amount does -- when the breakdown
   makes the footer tall something has to shrink, and it must not be the
   figure the person is deciding on. Squeezed the other way round, the middle
   collapsed to 8px and "$3.01" disappeared entirely off the screen. */
/* On a tall phone the slack has to go somewhere, and a keypad that takes
   some of it is a keypad with bigger targets. Capped, so it cannot turn
   into four enormous rows on a very tall screen, and min-height:0 is what
   makes it the part that gives way when the breakdown squeezes the column
   -- the amount has a floor, this does not. */
.pt-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 16px;
  flex:1 1 auto;min-height:0;max-height:min(46vh,352px);overflow:hidden}
.pt-keys .pt-key{min-height:0}
/* Centred by the INK, not by the line box. A line box carries descender
   space under the baseline that digits never use, so centring the box
   leaves every digit sitting in the top half of its key with a gap
   underneath -- which is exactly how this looked on a real phone.
   line-height:1 collapses that empty space and the flex centring then puts
   the glyph where the eye expects it. */
.pt-key{display:flex;align-items:center;justify-content:center;
  background:var(--sheet-key);border:1px solid var(--sheet-line);color:var(--text);
  /* The UI face, not the mono one: JetBrains Mono draws a DOTTED ZERO, which
     is a legibility feature in a column of figures and reads as a mistake on
     a single key. Digits on a keypad do not need to align in columns -- the
     figures they produce, which are still mono, do. */
  font-family:var(--ui);font-size:23px;font-weight:600;line-height:1;
  padding:calc(var(--kpad) + var(--kink)) 0 calc(var(--kpad) - var(--kink));
  border-radius:14px;
  transition:background .1s,border-color .1s,transform .06s;
  --kpad:clamp(13px,2vh,18px);
  /* Centring the BOX is not centring the DIGIT, and that gap is what made
     every key look like its number had floated to the top.
     In a line box of 1em the baseline sits about 0.76em down and a digit
     reaches about 0.70em above it, so the ink runs 0.06em–0.76em and its
     middle lands at 0.41em against a box middle of 0.50em -- about 0.09em
     high. That is a property of how sans faces are drawn rather than of one
     face, which is what this can be sized from: the fonts here come from
     Google Fonts, and this sandbox cannot reach them, so a figure tuned
     against whatever face it falls back to would be a guess wearing a
     measurement's clothes.
     The two paddings move by the same amount in opposite directions, so the
     key keeps its height and only what is drawn inside it moves. */
  --kink:0.085em}
/* Both of these are drawn shapes rather than type: no baseline to be off,
   so the correction above would push them off instead. */
.pt-key[data-k="."],.pt-key[data-k="del"]{--kink:0px}
.pt-key:active{background:var(--accent-soft);border-color:var(--accent-border);
  color:var(--accent);transform:scale(.97)}
.pt-key svg{width:26px;height:26px;display:block}
/* A full stop is ink on the baseline, so it sits at the bottom of its line
   however the box is centred -- it read as a stray pixel in the corner of
   the key. Drawn instead, it is a dot that is actually in the middle. */
.pt-key-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pt-key[data-k="del"]{color:var(--muted)}
.pt-key[data-k="del"]:active{color:var(--accent)}

/* Every control on this screen can be reached without a touchscreen, and
   says where it is when it is. */
.pt-sheet :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}

.pt-sheet-ft{padding:clamp(9px,1.6vh,14px) 16px calc(14px + env(safe-area-inset-bottom,0px));
  flex:0 0 auto}
/* Capped so a long breakdown scrolls rather than pushing the amount off
   the screen above it. It is folded away by default now as well, but the
   cap stays: an opened box must not be able to squeeze the amount either. */
.pt-sheet-ft .pt-quote{margin:0 0 11px;max-height:32vh;overflow-y:auto}

/* ── what it costs, folded away ── */
.pt-sell-warn{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;padding:8px 11px;border-radius:12px;
  background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.32);color:#ff8a95}
.pt-sell-warn[hidden]{display:none}
.pt-sell-warn svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.pt-sell-warn span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-sell-warn b{font:700 13px/1.3 Geist,system-ui,sans-serif;color:#ff8a95}
.pt-sell-warn small{font:500 11.5px/1.35 Geist,system-ui,sans-serif;color:#d9a3a9}
.pt-fees{margin:0 0 10px;background:var(--sheet-tile);border:1px solid var(--sheet-line);
  border-radius:13px;overflow:hidden}
.pt-fees-sum{display:flex;align-items:center;gap:9px;padding:10px 13px;cursor:pointer;
  list-style:none;font-size:12px;color:var(--muted);transition:background .12s}
.pt-fees-sum::-webkit-details-marker{display:none}
.pt-fees-sum:active{background:var(--sheet-key)}
.pt-fees-lbl{font-weight:700;letter-spacing:.01em}
.pt-fees-amt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:right}
.pt-fees-chev{width:15px;height:15px;flex:0 0 auto;transition:transform .16s}
.pt-fees[open] .pt-fees-chev{transform:rotate(180deg)}
.pt-fees>*:not(summary){padding:0 13px 12px}
.pt-fees-sell{display:none;flex-direction:column;gap:5px;font-family:var(--mono);
  font-size:11px;color:var(--muted)}
.pt-fees[open] .pt-fees-sell{display:flex}
/* The breakdown is the only thing in here that can run long. */
.pt-sheet-ft .pt-fees .pt-quote{margin:0;max-height:30vh;overflow-y:auto;border-top:none;padding-top:0}

/* ── the three steps: enter -> review -> done ── */
.pt-sheet .pt-go-btn{display:none;width:100%;height:58px;border-radius:16px;border:1px solid var(--accent);
  background:var(--accent);color:#0a0b0e;font:800 15.5px/1 Geist,system-ui,sans-serif;cursor:pointer}
.pt-sheet.sell-mode .pt-go-btn{background:var(--red);border-color:var(--red);color:#fff}
.pt-sheet .pt-go-btn:disabled{background:var(--sheet-key);border-color:var(--sheet-line);color:var(--muted);cursor:default}
.pt-sheet[data-step="enter"] #pt-preview-btn{display:block}
.pt-sheet[data-step="enter"] .pt-slide{display:none}
.pt-sheet[data-step="review"] .pt-sheet-mid,.pt-sheet[data-step="review"] .pt-sheet-pcts,
.pt-sheet[data-step="review"] #pt-keys,.pt-sheet[data-step="review"] .pt-fees,
.pt-sheet[data-step="done"] .pt-sheet-mid,.pt-sheet[data-step="done"] .pt-sheet-pcts,
.pt-sheet[data-step="done"] #pt-keys,.pt-sheet[data-step="done"] .pt-fees,
.pt-sheet[data-step="done"] .pt-slide,.pt-sheet[data-step="done"] .pt-sell-warn{display:none}
.pt-sheet[data-step="done"] #pt-done-btn{display:block}
.pt-sheet[data-step="done"] #pt-done-btn{background:var(--sheet-key);border-color:var(--sheet-line);color:var(--text)}
.pt-review,.pt-done{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 2px 10px;display:flex;flex-direction:column;gap:12px}
.pt-review[hidden],.pt-done[hidden]{display:none}
.pt-review-hd{display:flex;align-items:center;gap:8px}
.pt-review-back{width:36px;height:36px;border-radius:50%;border:1px solid var(--sheet-line);background:var(--sheet-key);
  color:var(--text);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.pt-review-back svg{width:18px;height:18px}
.pt-review-title{font:800 17px/1.2 Geist,system-ui,sans-serif;color:var(--text)}
.pt-review-legs{background:var(--sheet-tile);border:1px solid var(--sheet-line);border-radius:16px;overflow:hidden}
.pt-review-leg{display:flex;flex-direction:column;gap:3px;padding:13px 15px}
.pt-review-leg+.pt-review-leg{border-top:1px solid var(--sheet-line)}
.pt-review-k{font:700 11px/1.2 Geist,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pt-review-v{font:800 22px/1.2 Geist,system-ui,sans-serif;color:var(--text);font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.pt-review-leg.get .pt-review-v{color:var(--green,#3ad29b)}
.pt-review-sub{font:500 12px/1.3 var(--mono);color:var(--muted)}
.pt-review-rows{display:flex;flex-direction:column;background:var(--sheet-tile);border:1px solid var(--sheet-line);
  border-radius:14px;padding:4px 14px}
.pt-review-rows:empty{display:none}
.pt-rv-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;
  font:500 13px/1.35 Geist,system-ui,sans-serif;color:var(--muted)}
.pt-rv-row+.pt-rv-row{border-top:1px solid var(--sheet-line)}
.pt-rv-row b{font:600 13px/1.35 var(--mono);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.pt-rv-row.warn b{color:#ff8a95}
.pt-rv-note{font:500 11.5px/1.4 Geist,system-ui,sans-serif;color:var(--muted);padding:8px 0}
.pt-review-timer{font:600 12px/1.3 Geist,system-ui,sans-serif;color:var(--muted);text-align:center;min-height:16px}
.pt-review-timer.err{color:#ff8a95}
.pt-review-timer button{margin-left:6px;background:none;border:none;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
.pt-done{align-items:center;text-align:center;padding-top:18px}
.pt-done-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(58,210,155,.14);
  color:var(--green,#3ad29b)}
.pt-done-ic svg{width:32px;height:32px}
.pt-done-title{font:800 20px/1.25 Geist,system-ui,sans-serif;color:var(--text)}
.pt-done-sub{font:500 13px/1.4 Geist,system-ui,sans-serif;color:var(--muted)}
.pt-done .pt-review-rows{width:100%;text-align:left}
.pt-rv-row a{color:var(--accent);font:600 13px/1.35 var(--mono)}

/* ── the market list on a phone: one row per token, as on an exchange ──
   The card stays one element (its ids carry the live price updates and the
   token page opens from it); only how it is laid out changes. Tapping a row
   opens the token page with its chart and the Buy/Sell bar. */
.pt-row-sub{display:none}
/* The 24h change is often a flex item's text; pre keeps the space before "· 24h". */
.pt-chg-tf{white-space:pre}
@media (max-width:760px){
  /* The columns are fixed, and the same in every row and in the heads above
     them: each row is its own grid, so a width that followed its content
     (auto) put every row's price somewhere else. !important because the
     redesign stylesheet lays the card out as two columns with !important. */
  html body:not(.pt-profile-mode) .pt-card{display:grid!important;grid-template-columns:36px minmax(0,1fr) 28% 68px!important;
    align-items:center;column-gap:9px!important;row-gap:2px!important;padding:11px 12px!important;margin:0!important;border-radius:0!important;
    border:0!important;border-bottom:1px solid var(--line,#1c222a)!important;background:transparent!important;
    box-shadow:none!important;cursor:pointer;min-height:64px;outline:0!important}
  /* The list keeps a screen's worth of room while it loads, so what sits under
     it (Live trades, Top traders) never jumps when the rows arrive. */
  html body:not(.pt-profile-mode) #pt-feed-list{display:block!important;gap:0!important;min-height:600px}
  html body:not(.pt-profile-mode) .pt-card .pt-card-hd,html body:not(.pt-profile-mode) .pt-card .pt-tok-id,
  html body:not(.pt-profile-mode) .pt-card .pt-card-body,html body:not(.pt-profile-mode) .pt-card .pt-card-stats{display:contents!important}
  html body:not(.pt-profile-mode) .pt-card .pt-tok-logo,html body:not(.pt-profile-mode) .pt-card .pt-tok-logo-ph{grid-column:1!important;grid-row:1/3!important;
    width:36px!important;height:36px!important;border-radius:50%!important;font-size:12px!important;justify-self:start!important;margin:0!important}
  html body:not(.pt-profile-mode) .pt-card .pt-tok-sym{grid-column:2!important;grid-row:1!important;font-size:14.5px!important;line-height:1.25!important;
    margin:0!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    text-align:left!important;justify-self:stretch!important;align-self:end!important;min-width:0}
  html body:not(.pt-profile-mode) .pt-card .pt-row-sub{display:block;grid-column:2!important;grid-row:2!important;font:500 12px/1.3 var(--mono,monospace);
    color:var(--muted,#8a919c);white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis!important;
    text-align:left!important;justify-self:stretch!important;align-self:start!important;min-width:0}
  html body:not(.pt-profile-mode) .pt-card .pt-price{grid-column:3!important;grid-row:1/3!important;font-size:13px!important;letter-spacing:-.02em;
    text-align:right!important;justify-self:end!important;white-space:nowrap!important;margin:0!important;min-width:0;
    padding:0!important;background:none!important;border:0!important;align-self:center!important;line-height:1.2!important}
  html body:not(.pt-profile-mode) .pt-card .pt-chg{grid-column:4!important;grid-row:1/3!important;justify-self:stretch!important;text-align:center!important;margin:0!important;
    padding:8px 2px!important;border-radius:8px!important;font-size:12px!important;white-space:nowrap!important;box-sizing:border-box!important;font-weight:700!important;color:#fff!important;
    background:#2ebd85!important;order:0!important;position:static!important;width:auto!important}
  html body:not(.pt-profile-mode) .pt-card .pt-chg.down{background:#f6465d!important;color:#fff!important}
  html body:not(.pt-profile-mode) .pt-card .pt-chg .pt-chg-tf{display:none}
  html body:not(.pt-profile-mode) .pt-card .pt-tok-meta,html body:not(.pt-profile-mode) .pt-card .pt-tok-ca-row,
  html body:not(.pt-profile-mode) .pt-card .pt-card-hd-right,html body:not(.pt-profile-mode) .pt-card .pt-stat-row,
  html body:not(.pt-profile-mode) .pt-card .pt-trade-btns,html body:not(.pt-profile-mode) .pt-card .pt-buy-panel,
  html body:not(.pt-profile-mode) .pt-card .pt-chart-wrap,html body:not(.pt-profile-mode) .pt-card .pt-card-ft,
  html body:not(.pt-profile-mode) .pt-card .pt-profile-about,html body:not(.pt-profile-mode) .pt-card .pt-stars,
  html body:not(.pt-profile-mode) .pt-card [id^="pt-liq-"],html body:not(.pt-profile-mode) .pt-card [id^="pt-mcap-"],
  html body:not(.pt-profile-mode) .pt-card [id^="pt-vol-"],html body:not(.pt-profile-mode) .pt-card [id^="pt-ratio-"]{display:none!important}
  html body:not(.pt-profile-mode) .pt-list-hd{display:grid}
  /* Light mode gives every card a white box; a row is a line in a list. */
  html[data-theme="light"] body:not(.pt-profile-mode) #pt-feed-list .pt-card{background:transparent!important;box-shadow:none!important;
    border:0!important;border-bottom:1px solid #e8e3d8!important;border-radius:0!important}
}
/* Narrow phones: the price gets the room a long sub-cent price needs
   ($0.00004958), the name and the change pill give a little. */
@media (max-width:380px){
  html body:not(.pt-profile-mode) .pt-card{grid-template-columns:32px minmax(0,1fr) 34% 62px!important;column-gap:8px!important}
  html body:not(.pt-profile-mode) .pt-card .pt-tok-logo,html body:not(.pt-profile-mode) .pt-card .pt-tok-logo-ph{width:32px!important;height:32px!important}
  html body:not(.pt-profile-mode) .pt-card .pt-row-sub{font-size:11.5px!important}
  html body:not(.pt-profile-mode) .pt-card .pt-chg{font-size:11.5px!important;padding:8px 1px!important}
  .pt-list-hd{grid-template-columns:32px minmax(0,1fr) 34% 62px;column-gap:8px}
}
.pt-list-hd{display:none;grid-template-columns:36px minmax(0,1fr) 28% 68px;column-gap:9px;padding:8px 12px 6px;
  font:600 11.5px/1.2 Geist,system-ui,sans-serif;color:var(--muted,#8a919c);border-bottom:1px solid var(--line,#1c222a)}
.pt-list-hd span:nth-child(1){grid-column:1/3;text-align:left}
.pt-list-hd span:nth-child(2){text-align:right}
.pt-list-hd span:nth-child(3){text-align:center}

/* Desktop (mouse): the track is one plain Buy / Sell button, no knob. */
.pt-slide.click{cursor:pointer;box-shadow:none;transition:background .12s,filter .12s}
.pt-slide.click .pt-slide-knob{display:none}
.pt-slide.click .pt-slide-label{padding:0 16px;font-size:15.5px}
.pt-slide.click.ready{background:var(--accent);border-color:var(--accent)}
.pt-slide.click.ready .pt-slide-label{color:#0a0b0e}
.pt-slide.click.sell.ready{background:var(--red);border-color:var(--red)}
.pt-slide.click.sell.ready .pt-slide-label{color:#fff}
.pt-slide.click.ready:hover{filter:brightness(1.07)}
.pt-slide.click:not(.ready){cursor:default}
.pt-slide.click:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── slide to confirm ──
   The knob is dragged the width of the track. Nothing happens until it gets
   there, and letting go early snaps it back -- so buying and selling both
   take a deliberate gesture rather than a tap that a pocket or a scroll can
   produce by accident. The track is recessed rather than raised: it is a
   groove the knob travels along, which is what the gesture actually is. */
.pt-slide{position:relative;height:58px;border-radius:16px;background:var(--sheet-key);
  border:1px solid var(--sheet-line);box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
  overflow:hidden;touch-action:none;user-select:none}
.pt-slide.ready{border-color:var(--accent-border)}
.pt-slide.sell.ready{border-color:rgba(247,107,98,.45)}
.pt-slide-fill{position:absolute;inset:0;width:0;background:var(--accent);opacity:.20;
  border-radius:16px;pointer-events:none}
.pt-slide.sell .pt-slide-fill{background:var(--red)}
/* Scoped to beat .pt-buy-confirm, which this element also carries so
   confirmBuy() can write "Buying…" into it. That class is the OLD in-card
   button's styling -- solid amber background AND amber text -- so unscoped
   the label was amber on amber and simply could not be read. */
.pt-slide .pt-slide-label{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:14.5px;font-weight:700;color:var(--muted);
  pointer-events:none;padding:0 62px;text-align:center;background:none;border:none;
  border-radius:0}
.pt-slide.ready .pt-slide-label{color:var(--accent)}
.pt-slide.sell.ready .pt-slide-label{color:var(--red)}
/* A disc, and it travels. */
.pt-slide-knob{touch-action:none;position:absolute;top:5px;left:5px;width:46px;height:46px;border-radius:50%;
  background:var(--line2);color:var(--muted2);display:flex;align-items:center;
  justify-content:center;cursor:grab;transition:background .12s,color .12s}
.pt-slide.ready .pt-slide-knob{background:var(--accent);color:#0a0b0e;
  box-shadow:0 2px 10px rgba(247,185,85,.28)}
.pt-slide.sell.ready .pt-slide-knob{background:var(--red);color:#0a0b0e;
  box-shadow:0 2px 10px rgba(247,107,98,.28)}
.pt-slide-knob svg{width:22px;height:22px}
.pt-slide.dragging .pt-slide-knob{cursor:grabbing;transition:none}
.pt-slide.dragging .pt-slide-fill{transition:none}

/* While a trade is in flight. The bar sweeps because the wait is real work
   -- the server has submitted and is holding for the chain to confirm --
   and a control that simply freezes reads as a hang. Nothing here invents
   time: the sweep stops the instant the answer arrives. */
.pt-slide.working{border-color:var(--sheet-line)}
.pt-slide.working .pt-slide-knob{display:none}
.pt-slide.working .pt-slide-label{color:var(--muted);padding:0 18px}
.pt-slide.working .pt-slide-fill{width:38%;opacity:.16;border-radius:0;
  animation:ptSweep 1.15s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ptSweep{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
/* Someone who has asked for less motion still gets to see that it is
   working -- a steady bar rather than a moving one. */
@media (prefers-reduced-motion: reduce){
  .pt-slide.working .pt-slide-fill{animation:none;width:100%;opacity:.10}
  .pt-key,.pt-pct,.pt-slide-knob,.pt-sheet{transition:none}
}

/* The receipt: what a person can take to a block explorer. */
.pt-txline{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;margin-top:9px}
.pt-txline a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pt-txline .pt-txms{color:var(--muted)}

/* Dragging the sheet itself downwards dismisses it -- the gesture that
   replaced the close button in the corner. */
.pt-sheet.dragging{transition:none}
.pt-sheet{transition:transform .22s cubic-bezier(.2,.8,.2,1)}

/* Selling has no amount to enter: the server closes the whole tracked
   position, so a keypad and percentage buttons would be asking a question
   with only one answer. */
/* Both rows stay in sell mode now. A sale names a figure in dollars, the
   same as a purchase, and the percentages fill that figure in -- so the
   keypad has something to do and the screen asks its question the same way
   in both directions. Only the caption goes, because the sell sheet writes
   its own. */
/* The caption stays too: it names the unit being typed, which a sale needs
   to say as much as a purchase does. */
/* Selling, one of the four is the current choice and says so. Buying they
   are one-shot fills of the amount, so none of them is ever "on". */
.pt-pct.on{background:var(--accent-soft);color:var(--accent)}
.pt-sheet.sell-mode .pt-pct.on{background:rgba(247,107,98,.14);color:var(--red)}
.pt-sheet.sell-mode .pt-pct:active{background:rgba(247,107,98,.10);color:var(--red)}
.pt-sheet.sell-mode .pt-sheet-mid{gap:12px}
/* With the caption gone the balance line has the top row to itself, and it
   is a sentence there rather than a figure. */

/* What a sale converts into is a token amount, same as a purchase, so it
   reads in the same colour rather than as grey prose. */
.pt-sheet.sell-mode .pt-ticket-bal{text-align:right}
.pt-ticket-stats{display:none}
.pt-sheet.sell-mode .pt-ticket-stats{display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;border-top:1px solid var(--sheet-line);padding-top:clamp(10px,2vh,16px)}
.pt-tstat-k{font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.pt-tstat-v{font-family:var(--mono);font-size:13.5px;font-weight:700;margin-top:4px;
  font-variant-numeric:tabular-nums}
.pt-tstat-v.up{color:var(--green)}
.pt-tstat-v.down{color:var(--red)}

.pt-sheet-go{width:100%;background:var(--accent);color:#0a0b0e;border:none;border-radius:14px;
  padding:16px;font-size:15px;font-weight:700;transition:opacity .12s}
.pt-sheet-go:disabled{background:var(--sheet-key);color:var(--muted);cursor:default}
.pt-sheet-msg{font-size:12px;margin-top:9px;text-align:center}
.pt-sheet-msg.ok{color:var(--green)}
.pt-sheet-msg.err{color:var(--red)}

/* On a wide screen it stops being a phone sheet and becomes a centred
   dialog -- the same markup, so there is only ever one buy screen to
   maintain. */
@media (min-width: 720px){
  .pt-sheet{inset:50% auto auto 50%;transform:translate(-50%,-50%);
    width:404px;max-height:92vh;border:1px solid var(--sheet-line);border-radius:24px;
    box-shadow:0 24px 70px rgba(0,0,0,.6)}
  .pt-sheet-scrim{position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.62);display:none}
  .pt-sheet-scrim.open{display:block}
  .pt-key{font-size:20px;padding:12px 0}
  .pt-sheet-amt{font-size:44px}
}
.pt-buy-cur{color:var(--muted)}
.pt-quote{border-top:1px solid var(--line2);padding-top:7px;display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.pt-quote-row{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.pt-quote-row>span:last-child{white-space:nowrap}
.pt-quote-top{color:var(--text);font-weight:700}
.pt-quote-get{color:var(--green);font-weight:700;border-top:1px solid var(--line2);padding-top:5px;margin-top:2px}
.pt-quote-note{font-family:inherit;font-size:10px;line-height:1.4;color:var(--muted2)}
.pt-quote-stale{color:var(--red)}
.pt-quote-bad{font-size:11px;color:var(--red);line-height:1.4}
.pt-quote-wait{font-size:11px;color:var(--muted2)}

.pt-chart-wrap{position:relative;height:222px;background:var(--bg)}
.pt-chart-svg{width:100%;height:200px;display:block}
.pt-chart-live{position:absolute;top:9px;left:10px;display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:var(--green);letter-spacing:.06em}
.pt-chart-live-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:ptPulse 1.4s ease-in-out infinite}
.pt-chart-tfs{position:absolute;top:8px;right:10px;display:flex;gap:3px}
.pt-tf-pill{padding:3px 7px;font-size:9.5px;font-weight:700;border-radius:6px;background:var(--card2);color:var(--muted2);border:1px solid var(--line2)}
.pt-tf-pill.active{background:var(--accent);color:#0a0b0e;border-color:var(--accent)}
.pt-price-pill{position:absolute;left:0;transform:translateY(-50%);background:var(--accent);color:#0a0b0e;font-family:var(--mono);font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:0 4px 4px 0;transition:top .35s ease-out}
.pt-chart-axis{height:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-family:var(--mono);font-size:9px;color:var(--muted2)}
.pt-chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:10.5px;font-family:var(--mono)}
/* Touch/mouse chart-scrub -- drag or hover anywhere on the chart to see the
   exact price + time at that point, instead of the chart being static. */
/* Positioned entirely via `transform` (never left/top) from JS, and never
   transitioned -- during an active drag these must track the finger with
   zero added lag, one-to-one, every animation frame. left:0/top:0 here is
   just the (0,0) anchor point the transform's translate() offsets are
   relative to, so a raw pixel delta always lands in the same place
   regardless of layout. will-change hints the browser to keep each on its
   own compositor layer, avoiding a full layout+paint per frame of the
   drag -- the actual fix for the sluggish feel these had at first. */
.pt-chart-scrub-line{position:absolute;left:0;top:0;width:1px;height:200px;background:var(--muted2);opacity:.55;pointer-events:none;display:none;z-index:2;will-change:transform}
.pt-chart-scrub-dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);pointer-events:none;display:none;z-index:3;will-change:transform}
.pt-chart-scrub-tip{position:absolute;left:0;top:0;background:var(--card2);border:1px solid var(--line2);color:var(--text);font-family:var(--mono);font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;white-space:nowrap;pointer-events:none;display:none;z-index:4;will-change:transform}

.pt-card-ft{display:flex;flex-direction:column;gap:7px;padding:10px 15px;border-top:1px solid var(--line);grid-column:1/3}
.pt-friends{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.pt-friends:empty,.pt-card-ft-right:empty{display:none}
.pt-card-ft:not(:has(.pt-friends:not(:empty),.pt-card-ft-right:not(:empty))){display:none}
.pt-friend-avs{display:flex}
.pt-friend-avs img,.pt-friend-avs .ph{width:20px;height:20px;border-radius:50%;object-fit:cover;border:2px solid var(--card);margin-left:-7px;background:var(--line2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--muted)}
.pt-friend-avs img:first-child,.pt-friend-avs .ph:first-child{margin-left:0}
.pt-card-ft-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pt-ft-chip{font-family:var(--mono);font-size:10px;color:var(--muted2);background:var(--card2);border:1px solid var(--line2);border-radius:6px;padding:3px 8px;white-space:nowrap}

/* ── right rail cards ── */
.pt-rcard{background:var(--card);border-radius:15px;padding:13px 14px;flex-shrink:0}
.pt-rcard-hd{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px}
.pt-tape-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:11.5px}
.pt-tape-row:last-child{border-bottom:none}
.pt-tape-pill{font-family:var(--mono);font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;flex-shrink:0}
.pt-tape-pill.buy{background:rgba(58,210,155,.14);color:var(--green)}
.pt-tape-pill.sell{background:rgba(247,107,98,.14);color:var(--red)}
.pt-tape-sym{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-tape-amt{font-family:var(--mono);color:var(--muted);font-size:10.5px}
.pt-tape-age{font-family:var(--mono);color:var(--muted2);font-size:9.5px;flex-shrink:0}
.pt-tape-empty{color:var(--muted2);font-size:11px;text-align:center;padding:10px 0}

.pt-trader-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.pt-trader-row:last-child{border-bottom:none}
.pt-trader-rank{width:14px;font-family:var(--mono);font-size:10.5px;color:var(--muted2);font-weight:700;flex-shrink:0}
.pt-trader-click{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer}
.pt-trader-av,.pt-trader-av-ph{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--line2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted)}
.pt-trader-mid{min-width:0;flex:1}
.pt-trader-name{font-size:11.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-trader-sub{font-size:10px;color:var(--muted2);font-family:var(--mono)}
.pt-trader-right{text-align:right;flex-shrink:0}
.pt-trader-pnl{font-family:var(--mono);font-size:11px;font-weight:700}
.pt-copy-link{font-size:10px;font-weight:700;color:var(--accent);background:none;border:none;padding:0;margin-top:2px}
.pt-copy-link.active{color:var(--green)}

.pt-wl-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.pt-wl-row:last-child{border-bottom:none}
.pt-wl-edit{font-size:10.5px;font-weight:700;color:var(--accent);background:none;border:none}
.pt-wl-remove{background:none;border:none;color:var(--red);font-size:14px;padding:0 4px;display:none}
.pt-wl-remove.show{display:block}

.pt-pulse-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt-pulse-tile{background:var(--card2);border-radius:11px;padding:10px}
.pt-pulse-lbl{font-size:9.5px;color:var(--muted2);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.pt-pulse-val{font-family:var(--mono);font-size:16px;font-weight:700;margin-top:4px}
.pt-pulse-val.green{color:var(--green)}
.pt-pulse-val.amber{color:var(--accent)}

.pt-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--line2);border-radius:11px;padding:10px 18px;font-size:12.5px;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
.pt-toast.show{opacity:1}

/* ── mobile chrome (hidden on desktop) ── */
.pt-mobile-filters-btn{display:none;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--line2);color:var(--text);font-size:11px;font-weight:700;border-radius:9px;padding:7px 11px;flex-shrink:0;white-space:nowrap}
/* Stops at the navbar for the same reason the drawer does: dimming the bar
   you need in order to close this again reads as the page having frozen. */
.pt-scrim{display:none;position:fixed;top:var(--pt-nb-h,104px);right:0;bottom:0;left:0;background:rgba(0,0,0,.55);z-index:80}
.pt-scrim.show{display:block}
.pt-filter-close{display:none}
.pt-left.mobile-open .pt-filter-close{display:grid;place-items:center;align-self:flex-end;flex:none;width:44px;height:44px;border:1px solid var(--line2);border-radius:10px;background:var(--card2);color:var(--text);font-size:24px;cursor:pointer}


/* ── responsive: single-column layout, drawer filters (nav drawer is the
   shared navbar's own, see static/navbar.css) ── */
@media (max-width: 900px){
  .pt-shell{min-width:0;padding:10px 10px 28px;overflow-x:hidden}
  html,body{overflow-x:clip}  /* clip, not hidden: hidden makes the root a scroll container, which breaks the sticky navbar */

  /* iOS Safari force-zooms on focusing any input under 16px, regardless of
     the viewport meta or touch-action -- this is the actual fix for that */
  .pt-buy-input{font-size:16px}

  .pt-panel{grid-template-columns:1fr;border-radius:16px}
  .pt-left{display:none;max-height:none}
  .pt-left.mobile-open{
    /* Starts BELOW the navbar, not at the top of the screen.
       The navbar is sticky at z-index 200 and this drawer sits at 95, so with
       top:0 the whole first section scrolled underneath it -- the topmost
       sort row was cut in half and the one above it could not be reached at
       all. The height is measured rather than guessed: on this breakpoint the
       search field wraps onto a second line, so the bar is not one fixed
       size, and a notch moves it again. --pt-nb-h is set in
       live-market-pro.js; the fallback only matters for the frame before
       that runs. */
    display:flex;position:fixed;top:var(--pt-nb-h,104px);bottom:0;left:0;width:88%;max-width:340px;z-index:95;
    background:var(--panel);border-right:1px solid var(--panel-border);box-shadow:0 0 50px rgba(0,0,0,.6);
    max-height:none;padding:16px 14px calc(16px + env(safe-area-inset-bottom));
    /* Tighter between sections than on desktop, because the rows inside them
       are about to get taller -- the drawer ends up shorter overall, not
       longer. */
    gap:14px;
  }
  /* ── thumb-sized targets ──
     Every control in here was under 44px: the sort rows ~36, the toggle rows
     ~33, the age chips ~27, and the switch itself 34x19. On a phone that is
     a row of things you aim at rather than press. They are bigger here and
     nowhere else -- a mouse does not need it and the desktop column is
     narrow. */
  .pt-sort-row{padding:12px 12px;font-size:14px;min-height:44px}
  .pt-sort-count{font-size:11.5px;padding:3px 9px}
  .pt-toggle-row{padding:12px 8px;font-size:14px;min-height:48px}
  .pt-switch{width:44px;height:26px}
  .pt-switch::after{width:20px;height:20px;top:3px;left:3px}
  .pt-switch.on::after{transform:translateX(18px)}
  .pt-age-chip{padding:11px 16px;font-size:12px;min-height:44px}
  .pt-age-row{gap:8px}
  /* A 4px rail is hard to grab; the thumb is what you actually aim for. */
  .pt-liq-slider{height:6px}
  .pt-liq-slider::-webkit-slider-thumb{width:22px;height:22px}
  .pt-liq-slider::-moz-range-thumb{width:22px;height:22px}
  .pt-liq-value{font-size:13px}
  .pt-adv-sum{padding:12px 2px;min-height:44px;font-size:11.5px}
  .pt-adv-chev{width:18px;height:18px;flex:0 0 18px}
  /* The bot card is the last thing in a scrolling drawer, so it gives up the
     room the controls above it just took. */
  .pt-bot-card{padding:12px;border-radius:14px}
  .pt-bot-sub{font-size:11px;margin-bottom:9px;line-height:1.45}
  .pt-bot-btn{padding:11px;min-height:44px}
  .pt-mobile-filters-btn{display:flex}
  .pt-feed-hd{flex-wrap:wrap;row-gap:8px}

  .pt-center{max-height:none;overflow:visible;order:1}
  .pt-right{border-left:none;border-top:1px solid var(--line);max-height:none;overflow:visible;order:2}

  .pt-card-body{grid-template-columns:1fr}
  .pt-card-stats{border-right:none;border-bottom:1px solid var(--line)}
  .pt-card-ft{grid-column:1/2}
  .pt-chart-wrap{height:210px}
  .pt-chart-svg{height:188px}
}
/* ── tablet landscape (iPad 1024/1180): the three columns need 1220px, so
   between the phone layout and that width the right column was pushed off
   the screen. Here the filters move behind the same "Filters" drawer the
   phone uses and the feed + token panel share the width. ── */
@media (min-width: 901px) and (max-width: 1219px){
  .pt-shell{min-width:0;padding:14px 14px 32px}
  .pt-panel{grid-template-columns:minmax(0,1fr) 290px}
  .pt-left{display:none}
  .pt-left.mobile-open{
    display:flex;position:fixed;top:var(--pt-nb-h,80px);bottom:0;left:0;width:340px;z-index:95;
    background:var(--panel);border-right:1px solid var(--panel-border);box-shadow:0 0 50px rgba(0,0,0,.6);
    max-height:none;overflow-y:auto;padding:16px 14px calc(16px + env(safe-area-inset-bottom));gap:14px;
  }
  .pt-mobile-filters-btn{display:flex}
  .pt-feed-hd{flex-wrap:wrap;row-gap:8px}
}
@media (max-width: 480px){
  .pt-story{width:58px}
  .pt-story-ring{width:54px;height:54px}
}

/* A token opens as a full OrcAgent profile, while its chart and trade controls
   keep their existing event handlers and live data source. */
.pt-profile-btn{border:1px solid #354350;background:#101b26;color:#f7b955;border-radius:9px;min-width:34px;min-height:34px;padding:4px 9px;font-weight:700;cursor:pointer}
.pt-profile-btn:hover{background:#203040}
.pt-profile-about{display:none;padding:18px 22px;border-top:1px solid #263441;color:#d2dbe5}
.pt-profile-about h2{margin:0 0 9px;font-size:19px;color:#f7b955}
.pt-profile-about p{margin:0 0 11px;line-height:1.55;overflow-wrap:anywhere}
.pt-profile-address{font:12px/1.5 monospace;color:#91a3b8}
.pt-profile-links{display:flex;gap:10px;flex-wrap:wrap}
.pt-profile-links a{padding:9px 12px;border:1px solid #374654;border-radius:9px;color:#f7b955;text-decoration:none}
.pt-chart-waiting{position:absolute;left:12px;bottom:26px;z-index:2;color:#9caaba;font-size:11px;background:#0a141dcc;border-radius:6px;padding:5px 8px;pointer-events:none}
body.pt-profile-mode .pt-shell{max-width:1120px!important;min-width:0!important}
body.pt-profile-mode .pt-panel{grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}
body.pt-profile-mode .pt-left,body.pt-profile-mode .pt-right,
body.pt-profile-mode .pt-surge-wrap,body.pt-profile-mode .pt-launch-wrap,
body.pt-profile-mode .pt-trader-rail-wrap,body.pt-profile-mode .pt-scanning-pill{display:none!important}
body.pt-profile-mode .pt-center{max-height:none!important;overflow:visible!important}
body.pt-profile-mode .pt-feed-list{padding:12px!important}
body.pt-profile-mode .pt-card:not(.pt-profile-open){display:none!important}
body.pt-profile-mode .pt-card.pt-profile-open{width:100%;margin:0!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-profile-about{display:block!important;grid-column:1/-1;order:9}
body.pt-profile-mode .pt-card.pt-profile-open .pt-chart-wrap{height:460px!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-chart-svg{height:425px!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-profile-btn{min-width:58px;color:#fff}
@media(max-width:767px){
 body.pt-profile-mode .pt-shell{padding:6px!important}
 body.pt-profile-mode .pt-card.pt-profile-open .pt-chart-wrap{height:370px!important}
 body.pt-profile-mode .pt-card.pt-profile-open .pt-chart-svg{height:334px!important}
 body.pt-profile-mode .pt-chart-waiting{bottom:10px;font-size:10px}
}

/* Desktop wears the same charcoal as the menu bar and every other page --
   the navy of the phone card design (live-market-redesign/final.css) made
   the canvas, panels and cards a different colour from the header above. */
@media(min-width:768px){
body{--oa-canvas:#0a0b0e;--oa-surface:#0d0f12;--oa-surface2:#101216;--oa-panel:#0d0f12;--oa-panel2:#101216;
     --oa-line:#1c2027;--oa-line2:#21252c;--oa-border:#1c2027}
.pt-profile-btn{border-color:#2a2f37;background:#16191f}
.pt-profile-btn:hover{background:#21252c}
.pt-profile-about{border-top-color:#1c2027}
.pt-profile-links a{border-color:#2a2f37}
.pt-chart-waiting{background:#0d0f12cc}
}

/* ── Token page (profile mode): the open card as a page ──
   Back/share/watch bar, "New" instead of a bare dash, empty market data in
   words, Your position, Safety checks, On OrcAgent, About with Copy, and a
   Buy/Sell bar pinned under the thumb on phones. The gold chart stays. */
body.pt-profile-mode .pt-feed-hd,body.pt-profile-mode #oa-lm-quick{display:none!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-card-hd-right,
body.pt-profile-mode .pt-card.pt-profile-open .pt-card-ft{display:none!important}
.pt-pf-bar{grid-column:1/-1;order:0;display:flex;align-items:center;gap:8px;padding:10px 14px 4px}
.pt-pf-back{height:44px;display:flex;align-items:center;gap:6px;padding:0 10px 0 2px;border:0;background:transparent;color:#eef1f5;font:600 15px Geist,system-ui,sans-serif;cursor:pointer;margin-right:auto}
.pt-pf-back:before{content:'';width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 4px 0 6px}
.pt-pf-icon{width:44px;height:44px;border-radius:14px;border:1px solid #1d2833;background:#0d151e;color:#eef1f5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.pt-pf-share:before{content:'';width:14px;height:14px;border:2px solid currentColor;border-top:0;border-radius:0 0 3px 3px;margin-top:6px}
.pt-pf-share:after{content:'↑';position:absolute;font:700 14px/1 Geist,system-ui,sans-serif;margin-top:-8px}
.pt-pf-share{position:relative}
.pt-pf-star:before{content:'☆';font-size:22px}
.pt-pf-star.on{color:#f7b955;border-color:#3a2f1c}.pt-pf-star.on:before{content:'★'}
body.oa-live-v2 .pt-card .pt-chg.pt-pf-new,body .pt-card .pt-chg.pt-pf-new{font-size:0!important;letter-spacing:0!important}
body .pt-card .pt-chg.pt-pf-new:after{content:'New · no 24h change yet';display:inline-block;padding:5px 10px;border-radius:999px;background:#152230;color:#8e97a3;font:600 12px Geist,system-ui,sans-serif;letter-spacing:0}
body.oa-live-v2 .pt-card .pt-stat-val.pt-pf-empty,body .pt-card .pt-stat-val.pt-pf-empty{font-size:0!important;letter-spacing:0!important}
body .pt-card .pt-stat-val.pt-pf-empty:after{content:attr(data-empty);font:500 13px Geist,system-ui,sans-serif;color:#8e97a3}
.pt-pf-section{grid-column:1/-1;margin:0 14px 10px;padding:14px;border:1px solid #1d2833;border-radius:18px;background:#0d151e;color:#eef1f5}
.pt-pf-section[hidden]{display:none!important}
.pt-pf-h{margin:0 0 10px;font:800 15px Geist,system-ui,sans-serif}
.pt-pf-lbl{font:500 12px Geist,system-ui,sans-serif;color:#8e97a3}
.pt-pf-position{order:5;border-color:#24382f}
.pt-pf-pos-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pt-pf-pos-value{font:700 26px/1.1 'JetBrains Mono',monospace;margin-top:4px}
.pt-pf-pos-pnl{text-align:right;font:700 18px/1.2 'JetBrains Mono',monospace}
.pt-pf-pos-pnl .pt-pf-pos-pct{font-size:13px}
.pt-pf-pos-pnl.up{color:#3ad29b}.pt-pf-pos-pnl.down{color:#ff7a88}
.pt-pf-pos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #1d2833}
.pt-pf-pos-v{font-size:13px;font-weight:600;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-pf-safety{order:8}
.pt-pf-safety-h{margin:0 0 6px}
.pt-pf-check{display:flex;align-items:center;gap:10px;font-size:14px;padding:4px 0}
.pt-pf-check-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 12px Geist,system-ui,sans-serif;flex-shrink:0}
.pt-pf-check.ok .pt-pf-check-ico{background:#12291f;color:#3ad29b}
.pt-pf-check.bad .pt-pf-check-ico{background:#2a1a1f;color:#ff7a88}
.pt-pf-check-t{flex:1;min-width:0}.pt-pf-check-s{font-size:12px;color:#8e97a3}
.pt-pf-community{order:7;display:flex;flex-direction:column;gap:10px}
.pt-pf-comm-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pt-pf-comm-hd .pt-pf-h{margin:0;white-space:nowrap}
.pt-pf-comm-label{font-size:12px;color:#8e97a3}
.pt-pf-comm-who{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;color:#8e97a3}
.pt-pf-comm-who>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-pf-friend-avatars{display:flex;flex-shrink:0;padding:2px 0}
.pt-pf-avatar{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #b78b46;border-radius:50%;background:#17212b;color:#f7b955;text-decoration:none;overflow:hidden}
.pt-pf-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-pf-avatar-initials{font-size:12px;font-weight:700}
.pt-pf-friend-avatar{width:28px;height:28px;margin-left:-6px;box-shadow:0 0 0 2px #0d151e}
.pt-pf-friend-avatar:first-child{margin-left:0}
.pt-pf-friend-avatar .pt-pf-avatar-initials{font-size:9px}
.pt-pf-act-list{border-top:1px solid #24313d;padding-top:4px}
.pt-pf-act{display:flex;align-items:center;gap:11px;font-size:14px;min-width:0;padding:10px 0}
.pt-pf-act+.pt-pf-act{border-top:1px solid #1d2833}
.pt-pf-act-avatar{width:40px;height:40px}
.pt-pf-act-identity{flex:1;min-width:0}
.pt-pf-act-who{display:flex;align-items:center;gap:7px;width:fit-content;max-width:100%;min-height:24px;color:#eef1f5;font-weight:700;text-decoration:none}
.pt-pf-act-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-pf-act-arrow{flex-shrink:0;color:#f7b955;font-size:21px;font-weight:400;line-height:1}
.pt-pf-act-who[href]:hover{color:#f7b955;text-decoration:underline;text-underline-offset:3px}
.pt-pf-act-who[href]:focus-visible,.pt-pf-avatar[href]:focus-visible{outline:2px solid #f7b955;outline-offset:3px}
.pt-pf-act-ago{font-size:12px;color:#8e97a3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.pt-pf-act-amount{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.pt-pf-act-usd{font-size:15px;font-weight:600}
.pt-pf-act-side{padding:3px 7px;border-radius:6px;font:700 10px Geist,system-ui,sans-serif;flex-shrink:0}
.pt-pf-act-side.buy{background:#12291f;color:#3ad29b}.pt-pf-act-side.sell{background:#2a1a1f;color:#ff7a88}
.pt-pf-comm-empty{font-size:12px;line-height:1.5;color:#8e97a3}
.pt-pf-pos-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.pt-pf-pos-hd .pt-pf-h{margin:0}
.pt-pf-pos-ago{font-size:12px;color:#8e97a3;white-space:nowrap}
/* Market data as on the design: plain tiles, Buys / sells with a bar. */
body.pt-profile-mode .pt-card.pt-profile-open .pt-stat-row:before{display:none!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-stat-row{padding-left:14px!important}
body .pt-card .pt-stat-row.pt-pf-has-ratio .pt-stat-val{display:none!important}
.pt-pf-ratio{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.pt-pf-ratio-bar{height:8px;border-radius:99px;background:#3a1f26;overflow:hidden}
.pt-pf-ratio-bar i{display:block;height:100%;background:#3ad29b}
.pt-pf-ratio-n{display:flex;justify-content:space-between;font-size:12px}
.pt-pf-ratio-n .up{color:#3ad29b}.pt-pf-ratio-n .down{color:#ff7a88}
body.pt-profile-mode .pt-card.pt-profile-open .pt-chg:not(.pt-pf-new){display:inline-flex!important;justify-self:start!important;align-self:flex-start;width:auto!important;margin:2px 0 14px 14px!important;padding:5px 9px!important;border-radius:999px;background:#12291f;font-size:13px!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-chg.down:not(.pt-pf-new){background:#2a1a1f}
.pt-pf-comm-ico{width:40px;height:40px;border-radius:12px;background:#152230;flex-shrink:0;position:relative}
.pt-pf-comm-ico:before{content:'';position:absolute;left:12px;top:9px;width:10px;height:10px;border:2px solid #f7b955;border-radius:50%}
.pt-pf-comm-ico:after{content:'';position:absolute;left:8px;top:23px;width:18px;height:8px;border:2px solid #f7b955;border-bottom:0;border-radius:10px 10px 0 0}
.pt-pf-comm-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-pf-comm-text strong{font:600 14px Geist,system-ui,sans-serif}
.pt-pf-comm-text span{font-size:12px;color:#8e97a3}
body.pt-profile-mode .pt-card.pt-profile-open .pt-profile-about{margin:0 14px 14px;padding:16px;border:1px solid #1d2833;border-radius:18px;background:#0d151e}
body.pt-profile-mode .pt-card.pt-profile-open .pt-profile-about h2{color:#eef1f5;font-size:17px;font-weight:800}
.pt-profile-links{margin:0 0 12px}
.pt-profile-links a{height:36px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid #1d2833;border-radius:10px;background:#111b25;color:#eef1f5;font-size:13px;font-weight:600}
.pt-pf-contract{display:flex;align-items:center;gap:8px;margin-top:6px}
.pt-pf-contract .pt-profile-address{flex:1;min-width:0;margin:0;font-size:13px;color:#d5dbe2}
.pt-pf-copy{height:40px;padding:0 14px;border-radius:12px;border:1px solid #1d2833;background:#111b25;color:#eef1f5;font:600 13px Geist,system-ui,sans-serif;cursor:pointer}
.pt-pf-explorer{height:40px;padding:0 14px;display:inline-flex;align-items:center;border-radius:12px;border:1px solid #3a2f1c;background:#19140c;color:#f7b955;font-size:13px;font-weight:600;text-decoration:none}
/* Buy is the main action, Sell the second; Sell is off when nothing is held. */
body.pt-profile-mode .pt-card.pt-profile-open .pt-buy-btn{order:2;background:linear-gradient(180deg,#ffd26a,#f7b43f)!important;color:#111820!important;border:1px solid #ffd36f!important;font-weight:800!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-sell-btn{order:1;background:#1a1015!important;color:#ff8a96!important;border:1px solid #5a2a33!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-sell-btn:disabled{background:transparent!important;color:#5c6773!important;border-color:#2a3440!important;cursor:default}
body.pt-profile-mode .pt-card.pt-profile-open .pt-trade-btns{grid-template-columns:116px minmax(0,1fr)!important}
body.pt-profile-mode .pt-card.pt-profile-open .pt-chart-waiting{left:50%!important;right:auto!important;transform:translateX(-50%);bottom:40px!important;background:transparent!important;color:#b8c0ca!important;text-align:center;white-space:nowrap}
@media(max-width:767px){
 body.pt-profile-mode .pt-card.pt-profile-open{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
 body.pt-profile-mode .pt-card.pt-profile-open .pt-chart-wrap{order:4!important}
 body.pt-profile-mode .pt-card.pt-profile-open .pt-stat-row{order:6!important}
 body.pt-profile-mode .pt-card.pt-profile-open .pt-profile-about{order:9!important}
 /* Sits on the menu; its lower padding runs under the round POST button. */
 body.pt-profile-mode .pt-card.pt-profile-open .pt-trade-btns{position:fixed!important;left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:1100;padding:12px 16px 36px!important;background:#0a131c;border-top:1px solid #1d2833}
 body.pt-profile-mode .pt-feed-list{padding-bottom:220px!important}
}
.pt-trade-close{position:absolute;right:14px;top:5px;z-index:5;width:32px;height:32px;border:1px solid #263340;border-radius:50%;background:#101821;color:#aebbc9;font-size:23px;line-height:1;cursor:pointer}.pt-sheet-hd{margin-top:16px}