/* trade-v2.css — the trade panel facelift (founder 2026-09-26, canvas W9p7NEuPua7fiqK8D394LX).
   Everything is scoped to #rpTrade.tp2, so taking the class off (trade-v2.js, or ?tp=old) restores the
   old panel exactly. Layout, size and hierarchy only: every colour the page and its modes (Tek, bonded)
   set is left alone, and no element, id or handler is replaced. */

/* BUY / SELL: a segmented control */
#rpTrade.tp2 .bstog{gap:4px;padding:4px;background:#141418;border-radius:10px;border:none}
#rpTrade.tp2 .bsbtn{min-height:42px;border-radius:7px;font-size:13px;letter-spacing:.08em}

/* The SOL / TOKEN switch gives way to a small link under the amount (trade-v2.js) */
#rpTrade.tp2 .den-switch{display:none}
#rpTrade.tp2 .tp2-unit{display:flex;justify-content:flex-end;margin:6px 0 2px}
#rpTrade.tp2 .tp2-unit button{background:none;border:none;padding:4px 0;min-height:24px;color:#9e9e9e;font-family:var(--mono);font-size:11px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#rpTrade.tp2 .tp2-unit button:hover{color:#fff}

/* The amount card: one big number, the coin as a chip */
#rpTrade.tp2 .inpa{padding:12px;border-radius:12px}
#rpTrade.tp2 .sinp{font-size:26px;font-weight:800;padding:12px 96px 12px 14px;border-radius:10px;min-height:56px;box-sizing:border-box}
#rpTrade.tp2 .sinp{-moz-appearance:textfield;appearance:textfield}
#rpTrade.tp2 .sinp::-webkit-inner-spin-button,#rpTrade.tp2 .sinp::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#rpTrade.tp2 .sden{right:10px;padding:5px 10px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#0d0d10;color:#fff;font-size:12px;letter-spacing:.02em;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Quick amounts sit inside the card, under the number (moved there by trade-v2.js) */
#rpTrade.tp2 .inpa .qrow{margin:6px 0 10px}
#rpTrade.tp2 .qbtn,#rpTrade.tp2 .spbtn{min-height:38px;border-radius:8px;font-size:12px}
#rpTrade.tp2 .qedit-btn{min-height:38px;border-radius:8px}

/* You get: a summary, not a second input */
#rpTrade.tp2 .sarr{display:none}
#rpTrade.tp2 .toutw{margin-top:2px}
#rpTrade.tp2 .tout{background:transparent;border:1px dashed rgba(255,255,255,.14);border-radius:10px;font-size:18px;font-weight:800;padding:12px 84px 12px 14px;min-height:50px;box-sizing:border-box;display:flex;align-items:center}
#rpTrade.tp2 .odem{right:12px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The button says the whole trade */
#rpTrade.tp2 .exbtn{min-height:52px;border-radius:12px;font-size:14px;letter-spacing:.06em}

@media (max-width:380px){
  #rpTrade.tp2 .sinp{font-size:22px;padding-right:88px}
  #rpTrade.tp2 .tout{font-size:16px}
  #rpTrade.tp2 .exbtn{font-size:13px;letter-spacing:.04em}
}

/* The coin chip: the coin's icon, and a caret when it is a pay-with picker (xbuy.js) */
#rpTrade.tp2 .sden{display:flex;align-items:center;gap:6px;max-width:112px}
#rpTrade.tp2 .sinp{padding-right:120px}
#rpTrade.tp2 .sden .tp2-coin{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}
#rpTrade.tp2 .sden.tp2-pick{cursor:pointer;padding-right:8px}
#rpTrade.tp2 .sden.tp2-pick:hover,#rpTrade.tp2 .sden.tp2-pick:focus-visible{border-color:rgba(255,255,255,.35);outline:none}
#rpTrade.tp2 .sden .tp2-caret{width:12px;height:12px;fill:none;stroke:#9e9e9e;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#rpTrade.tp2 .inpa{position:relative}
@media (max-width:380px){#rpTrade.tp2 .sinp{padding-right:112px}}

/* Quick buy / quick sell: a label over each row, a bolt on each button, the one-time ask (trade-v2.js) */
#rpTrade.tp2 .qrow .tp2-qlbl{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;margin:0 1px 2px}
#rpTrade.tp2 .tp2-qlbl-t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;color:#c0c0c0;display:inline-flex;align-items:center;gap:5px}
#rpTrade.tp2 .tp2-qlbl-t::before,#rpTrade.tp2 .qbtn::before,#rpTrade.tp2 .spbtn::before{content:"";display:inline-block;width:9px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M11 0 0 13h7l-2 9L18 8h-7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M11 0 0 13h7l-2 9L18 8h-7z'/%3E%3C/svg%3E") center/contain no-repeat}
#rpTrade.tp2 .qbtn::before,#rpTrade.tp2 .spbtn::before{width:8px;height:10px;margin-right:4px;vertical-align:-1px;opacity:.8}
#rpTrade.tp2 .tp2-qlbl-s{font-family:var(--mono);font-size:10px;color:#9e9e9e}
#rpTrade.tp2 .tp2-qask{margin:-4px 0 10px;padding:10px 12px;border:1px solid rgba(74,222,74,.35);background:rgba(74,222,74,.05);border-radius:10px;display:flex;flex-direction:column;gap:6px}
#rpTrade.tp2 .tp2-qask.sell{border-color:rgba(255,107,0,.4);background:rgba(255,107,0,.05)}
#rpTrade.tp2 .tp2-qask-n{font-size:11px;color:#9e9e9e}
#rpTrade.tp2 .tp2-qask-t{font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;overflow-wrap:anywhere}
#rpTrade.tp2 .tp2-qask-b{display:flex;gap:8px}
#rpTrade.tp2 .tp2-qask-b button{flex:1;min-height:40px;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer}
#rpTrade.tp2 .tp2-qask-fill{background:transparent;border:1px solid #3a3a3a;color:#e0e0e0}
#rpTrade.tp2 .tp2-qask-go{background:var(--grn);border:none;color:#000}
#rpTrade.tp2 .tp2-qask.sell .tp2-qask-go{background:var(--org)}
#rpTrade.tp2 .qbtn,#rpTrade.tp2 .spbtn{white-space:nowrap;padding-left:2px;padding-right:2px}
@media (max-width:360px){#rpTrade.tp2 .qbtn::before,#rpTrade.tp2 .spbtn::before{display:none}}