/* Pasar NFT Nusantara — app-feature component styles.
   Loaded AFTER style.css so a skin regeneration of style.css never wipes these.
   Uses theme vars (--surf/--line/--gold/--acc/…) so it adapts to whatever skin is active. */

/* ---------- homepage album + market sort bar ---------- */
.mktbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 6px; }
.mktbar .grow { flex: 1; }
.sortchip { background: var(--bg2); border: 1px solid var(--line); color: var(--mut); padding: 7px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sortchip:hover { color: var(--txt); }
.sortchip.active { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.sortchip .dir { font-size: 10px; }
.calbum { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }
.ccard { background: var(--surf); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; display: block; }
.ccard:hover { border-color: var(--line-hi, var(--line)); transform: translateY(-3px); box-shadow: var(--out); }
.ccover { aspect-ratio: 16 / 11; background: var(--bg2); overflow: hidden; }
.ccover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbody { padding: 13px 14px 14px; }
.cname { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.cname .sy { font-size: 11px; color: var(--mut); font-weight: 600; font-family: var(--mono); }
.cmetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.cmetrics > div { display: flex; flex-direction: column; }
.cmetrics span { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .5px; }
.cmetrics b { font-family: var(--mono); font-size: 14px; margin-top: 1px; }
.cfoot { font-size: 11px; color: var(--mut); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- styled select (order-book rarity / royalty filter) ---------- */
.ob-rarsel { background: var(--surf); border: 1px solid var(--line); color: var(--txt); border-radius: var(--rsm); padding: 7px 11px; font-size: 12px; font-family: var(--mono); outline: none; cursor: pointer; }
.ob-rarsel:hover, .ob-rarsel:focus { border-color: var(--line-hi, var(--line)); }
.ob-rarsel option { background: var(--surf); color: var(--txt); }

/* ---------- activity (most-traded) ---------- */
.actlist { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.actitem { font-size: 12px; font-family: var(--mono); padding: 5px 9px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line); }
.actitem:hover { border-color: var(--line-hi, var(--line)); }
.trbadge { font-size: 10px; font-family: var(--mono); color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); padding: 1px 5px; border-radius: 10px; margin-left: 3px; }

@media (max-width: 760px) {
  .calbum { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .ccover { aspect-ratio: 1; }
  .cbody { padding: 11px; }
  .cmetrics { gap: 6px 10px; }
  .mktbar { gap: 6px; padding: 9px 11px; }
}

/* ---------- your own listings in the order book ---------- */
.ob-row.mine { background: color-mix(in srgb, var(--acc) 9%, transparent); }
.ob-row.mine .ob-px { color: var(--acc); }
.ob-you { font-size: 9px; font-weight: 700; color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); padding: 1px 5px; border-radius: 8px; text-align: center !important; }

/* ---------- manage / cancel your listings modal ---------- */
.mylist { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.myl-row { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rsm); }
.myl-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--bg2); }
.myl-main b { font-family: var(--mono); }

/* ---------- collection price chart ---------- */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.chart-stats .v { font-family: var(--mono); font-weight: 700; font-size: 17px; }
.chart-stats .l { font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .5px; }
.chart-wrap { background: var(--surf, var(--bg1)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.pricechart { width: 100%; height: auto; display: block; }
.cg-grid { stroke: var(--line); stroke-width: 1; }
.cg-yl { fill: var(--mut); font-size: 11px; font-family: var(--mono); }
.cg-line { stroke: var(--acc); stroke-width: 2; fill: none; }
.cg-dot { fill: var(--acc); }
.cg-dot.sell { fill: var(--red); }
.cg-dot.buy { fill: var(--grn); }

/* ---------- arbitrage scanner ---------- */
.arb-list { display: flex; flex-direction: column; gap: 12px; }
.arb-card { background: var(--surf, var(--bg1)); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; }
.arb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.arb-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.arb-net { font-family: var(--mono); font-weight: 800; font-size: 18px; }
.arb-legs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 12px 0; }
.arb-leg { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border-radius: var(--rsm); border: 1px solid var(--line); background: var(--bg2, rgba(0,0,0,.15)); position: relative; transition: border-color .12s; }
.arb-leg:hover { border-color: var(--line-hi, var(--line)); }
.arb-leg .l { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); }
.arb-leg .v { font-size: 15px; font-weight: 700; }
.arb-leg .go { position: absolute; top: 9px; right: 11px; color: var(--mut); font-size: 12px; }
.arb-leg.buy { box-shadow: inset 3px 0 0 var(--grn); }
.arb-leg.sell { box-shadow: inset 3px 0 0 var(--red); }
.arb-arrow { text-align: center; font-size: 13px; color: var(--acc); font-weight: 700; }
.arb-arrow .mut { display: block; font-size: 10px; font-weight: 500; }
.arb-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.arb-verdict { color: var(--mut); flex: 1; min-width: 200px; line-height: 1.4; }
.arb-conf { font-family: var(--mono); font-size: 11px; }
.arb-risk { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 10px; }
.arb-risk.low { color: var(--grn); background: color-mix(in srgb, var(--grn) 15%, transparent); }
.arb-risk.medium { color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent); }
.arb-risk.high { color: var(--red); background: color-mix(in srgb, var(--red) 15%, transparent); }
@media (max-width: 620px) { .arb-legs { grid-template-columns: 1fr; } .arb-arrow { transform: rotate(90deg); } }

/* arbitrage: per-marketplace floors row */
.arb-floors { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 12px; font-size: 11px; color: var(--mut); }
.arb-floors span { display: inline-flex; gap: 5px; }
.arb-floors b { color: var(--txt); }

/* ================= Blur-style homepage ================= */
/* brand mission strip — "NFTs are symbols/identity/heritage, not just images" */
.mkt-tagline { position: relative; overflow: hidden; margin-bottom: 16px; padding: 17px 22px; border: 1px solid var(--line); border-radius: 16px;
  background: radial-gradient(130% 180% at 0% 0%, color-mix(in srgb, var(--acc) 13%, transparent), transparent 58%), radial-gradient(120% 160% at 100% 120%, color-mix(in srgb, var(--merah) 10%, transparent), transparent 55%), var(--surf); }
.mkt-tagline::after { content: ""; position: absolute; inset: 0; background-image: var(--batik); opacity: .6; pointer-events: none; }
.mkt-tagline > * { position: relative; z-index: 1; }
.mt-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.mt-title { font-family: var(--disp); font-weight: 800; font-size: 23px; letter-spacing: -.035em; line-height: 1.08; margin: 7px 0 7px; }
.mt-sub { color: var(--mut); font-size: 13.5px; line-height: 1.55; max-width: 740px; }
@media (max-width: 760px) { .mkt-tagline { padding: 15px 16px; } .mt-title { font-size: 18px; } .mt-sub { font-size: 13px; } }

/* featured hero spotlight */
.feat-hero { position: relative; display: block; height: 254px; border-radius: 18px; overflow: hidden; margin-bottom: 14px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.feat-hero:hover { text-decoration: none; }
.fh-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--bg) 3%, color-mix(in srgb, var(--bg) 60%, transparent) 40%, transparent 72%),
  linear-gradient(0deg, color-mix(in srgb, var(--bg) 70%, transparent), transparent 55%); }
.fh-inner { position: absolute; left: 0; bottom: 0; padding: 26px 30px; z-index: 1; max-width: 90%; }
.fh-by { font-size: 11px; font-weight: 700; letter-spacing: .13em; color: var(--mut); text-transform: uppercase; margin-bottom: 7px; }
.fh-name { font-family: var(--disp); font-weight: 800; font-size: 34px; letter-spacing: -.035em; line-height: 1; color: var(--txt); }
.fh-stats { display: flex; gap: 36px; margin: 17px 0 18px; }
.fh-l { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); font-weight: 600; margin-bottom: 4px; }
.fh-v { font-family: var(--mono); font-weight: 700; font-size: 19px; }
.feat-btn { display: inline-block; }

/* featured collection banner cards */
.feat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; margin-bottom: 30px; }
.fcard { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--line); transition: transform .14s, box-shadow .14s; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--out); text-decoration: none; }
.fc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(0,0,0,.76)); }
.fc-ava { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); object-fit: cover; z-index: 1; background: var(--bg2); }
.fc-name { position: absolute; left: 14px; right: 12px; bottom: 12px; z-index: 1; color: #fff; font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* active launches strip (homepage) — single row, horizontal scroll */
.launch-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.launch-strip::-webkit-scrollbar { height: 6px; }
.launch-strip::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 6px; }
.launch-strip::-webkit-scrollbar-track { background: transparent; }
.launch-card { position: relative; flex: 0 0 190px; scroll-snap-align: start; margin-bottom: 0; }
.launch-tag { position: absolute; top: 10px; right: 10px; z-index: 2; }
@media (max-width: 640px) { .launch-card { flex-basis: 158px; } }

/* Trending / Top tabs row */
.trend-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.trend-row .grow { flex: 1; }
.ttabs { display: flex; gap: 22px; }
.ttab { background: none; border: none; padding: 2px 0; font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--dim); cursor: pointer; transition: color .12s; }
.ttab:hover { color: var(--mut); }
.ttab.active { color: var(--acc); }
.mkt-search { width: 210px; }

/* Blur trending table (flat rows, hairline separators, circular avatars) */
.btable-wrap { overflow-x: auto; }
.btable { border-spacing: 0; min-width: 840px; }
.btable thead th { padding: 0 15px 12px; border-bottom: 1px solid var(--line); }
.btable .bsort-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s; text-align: right; }
.btable .bsort-th.l { text-align: left; }
.btable .bsort-th:hover { color: var(--txt); }
.btable .bsort-th.on { color: var(--acc); }
.btable .bsort-th .ar { font-size: 9px; }
.table.btable tbody td { background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 0; padding: 13px 15px; }
.table.btable tbody tr:hover td { background: color-mix(in srgb, var(--txt) 4%, transparent); }
.btable td.bnum { text-align: right; font-family: var(--mono); font-size: 14px; }
.btable td.bnum b { font-family: var(--mono); font-weight: 700; }
.btable .coll-cell .nm { font-family: var(--disp); font-weight: 650; font-size: 14.5px; letter-spacing: -.01em; }
.coll-thumb.rnd { border-radius: 50%; width: 38px; height: 38px; }
.dia { color: var(--dim); font-size: 10px; margin-left: 1px; }
.chg { font-family: var(--mono); font-weight: 600; font-size: 13px; white-space: nowrap; letter-spacing: -.02em; }
.chg.up { color: var(--grn); } .chg.down { color: var(--red); }

@media (max-width: 980px) { .feat-cards { grid-template-columns: repeat(3, 1fr); } .feat-cards .fcard:nth-child(n+4) { display: none; } }
@media (max-width: 760px) {
  .feat-hero { height: 200px; } .fh-name { font-size: 25px; } .fh-inner { padding: 18px 20px; } .fh-stats { gap: 26px; margin: 12px 0 14px; }
  .feat-cards { grid-template-columns: repeat(2, 1fr); }
  .feat-cards .fcard:nth-child(n+3) { display: none; }
  .ttabs { gap: 18px; } .ttab { font-size: 18px; }
  .trend-row .grow { display: none; }
  .mkt-search { width: 100%; order: 5; }
}

/* sweep cart: "skip pending" toggle */
.skip-pending { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--mut); cursor: pointer; user-select: none; white-space: nowrap; }
.skip-pending:hover { color: var(--txt); }
.skip-pending input { width: 16px; height: 16px; accent-color: var(--acc); cursor: pointer; margin: 0; }
@media (max-width: 760px) { .skip-pending { order: 5; font-size: 12px; } }

/* ---------- order book: neater ladder + embedded price chart ---------- */
.ob-ladder { padding: 8px 6px; }
.ob-head { border-bottom: 1px solid var(--line); margin: 0 6px 5px; padding: 4px 7px 9px; }
.ob-head span:not(:first-child), .ob-trades .ob-thead span:not(:first-child) { text-align: right; }
.ob-row { height: 29px; padding-top: 0; padding-bottom: 0; border-radius: 7px; }
.ob-px, .ob-sz, .ob-tot { font-variant-numeric: tabular-nums; }
.ob-bar { opacity: .1; border-radius: 4px; }
.ob-row:hover .ob-bar { opacity: .2; }
.ob-spread { background: color-mix(in srgb, var(--txt) 4%, transparent); border: 1px solid var(--line); border-radius: 9px; margin: 6px; padding: 9px 13px; }
.ob-live { color: var(--grn); }
.ob-note { font-size: 11px; margin-top: 10px; line-height: 1.5; padding: 0 2px; }

/* price chart embedded under the order book */
.ob-chart-sec { margin-top: 16px; }
.ob-sec-head { font-family: var(--disp); font-weight: 750; font-size: 15px; letter-spacing: -.02em; margin-bottom: 14px; }
.ob-chart-sec .chart-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.ob-chart-sec .chart-wrap { margin: 0; }

/* ================= Binance-style trading terminal (Order Book tab) ================= */
/* Fits the viewport: the grid is height-capped and each panel scrolls internally. */
.bx-wrap { display: grid; grid-template-columns: 262px minmax(0,1fr) 270px; gap: 9px; height: calc(100vh - 316px); min-height: 438px; margin-bottom: 8px; }
.bx-book, .bx-main, .bx-side { background: var(--surf); border: 1px solid var(--line); border-radius: 12px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* left — order book ladder */
.bx-book { padding: 8px 4px 8px 9px; }
.bx-book-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; padding-right: 5px; }
.bx-book-title { font-family: var(--disp); font-weight: 700; font-size: 13px; }
.bx-book .ob-rarsel { padding: 4px 7px; font-size: 11px; }
.bx-colh { display: grid; grid-template-columns: 1fr 48px 72px; gap: 6px; padding: 3px 6px; font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; }
.bx-colh span:not(:first-child) { text-align: right; }
.bx-asks, .bx-bids { flex: 1 1 0; overflow-y: auto; min-height: 0; scrollbar-width: none; display: flex; flex-direction: column; }
.bx-asks::-webkit-scrollbar, .bx-bids::-webkit-scrollbar { display: none; }
.bx-asks { justify-content: flex-end; }
.bx-row { position: relative; display: grid; grid-template-columns: 1fr 48px 72px; gap: 6px; padding: 1.5px 6px; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; line-height: 1.75; }
.bx-row span { position: relative; z-index: 1; text-align: right; }
.bx-row .bx-px { text-align: left; }
.bx-depth { position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; opacity: .12; }
.bx-depth.ask { background: var(--red); } .bx-depth.bid { background: var(--grn); }
.bx-row.ask .bx-px { color: var(--red); } .bx-row.bid .bx-px { color: var(--grn); }
.bx-am, .bx-tot { color: var(--mut); }
.bx-row:hover { background: color-mix(in srgb, var(--txt) 5%, transparent); }
.bx-row.mine { background: color-mix(in srgb, var(--acc) 10%, transparent); cursor: pointer; }
.bx-row.ask.sweeping { background: color-mix(in srgb, var(--acc) 20%, transparent); box-shadow: inset 3px 0 0 var(--acc); }
.bx-row.ask.sweeping .bx-px { color: var(--acc); font-weight: 700; }
.bx-row.ask.sweeping .bx-px::before { content: "▸ "; }
.bx-last { display: flex; align-items: baseline; gap: 9px; padding: 5px 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 2px 0; }
.bx-last-px { font-family: var(--disp); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.bx-last.up .bx-last-px { color: var(--grn); } .bx-last.down .bx-last-px { color: var(--red); }
.bx-last-sub { font-size: 10px; }

/* center — chart (left) + order entry (right), side by side */
.bx-main { padding: 8px 10px; flex-direction: row; gap: 12px; }
.bx-chart { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bx-tfbar { display: flex; align-items: center; gap: 1px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px; }
.bx-tf { background: none; border: none; color: var(--mut); font-weight: 600; font-size: 12px; padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.bx-tf:hover { color: var(--txt); background: var(--bg3); }
.bx-tf.active { color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.bx-tfbar .grow { flex: 1; }
.bx-viewtag { font-size: 11px; color: var(--mut); }
#bxChart { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.bx-ohlc { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; font-family: var(--mono); margin-bottom: 5px; align-items: center; }
.bx-ohlc b { color: var(--txt); font-weight: 600; margin-left: 2px; }
.bx-ohlc > span { color: var(--mut); }
.bx-plot { position: relative; flex: 1 1 0; min-height: 0; }
.bx-candles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bx-yaxis { position: absolute; top: 0; right: 0; bottom: 0; width: 48px; z-index: 1; pointer-events: none; }
.bx-yaxis span { position: absolute; right: 3px; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; color: var(--mut); background: color-mix(in srgb, var(--surf) 80%, transparent); padding: 0 3px; border-radius: 3px; white-space: nowrap; }
.cx-grid { stroke: var(--line); opacity: .55; }
.bx-entry { flex: 0 0 252px; min-height: 0; overflow-y: auto; scrollbar-width: thin; border-left: 1px solid var(--line); padding-left: 12px; align-self: stretch; }
.bx-entry .ob-entry, .bx-entry .panel { border: none; box-shadow: none; background: none; padding: 0; margin: 0; }
.bx-entry .oe-tabs { margin-bottom: 8px; } .bx-entry .oe-tabs button { padding: 10px; }
.bx-entry .oe-modes { margin-bottom: 8px; } .bx-entry .field { margin-bottom: 8px; }

/* right — pairs list + market trades tape */
.bx-side { padding: 8px 4px 8px 9px; }
.bx-pairs, .bx-tape { display: flex; flex-direction: column; min-height: 0; }
.bx-pairs { flex: 0 0 auto; margin-bottom: 8px; }
.bx-tape { flex: 1 1 0; }
.bx-side-head { font-family: var(--disp); font-weight: 700; font-size: 13px; padding: 2px 5px 6px; }
.bx-pairs-colh, .bx-tape-colh { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 4px 6px; font-size: 10px; color: var(--mut); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.bx-pairs-colh span:not(:first-child), .bx-tape-colh span:not(:first-child) { text-align: right; }
.bx-psort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s; }
.bx-psort:hover { color: var(--txt); }
.bx-psort.on { color: var(--acc); }
.bx-pairs-list { max-height: 156px; overflow-y: auto; scrollbar-width: thin; }
.bx-pair { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 7px; }
.bx-pair:hover { background: var(--bg3); text-decoration: none; }
.bx-pair-nm { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; min-width: 0; }
.bx-pair-nm img { width: 20px; height: 20px; border-radius: 50%; background: var(--bg2); flex: 0 0 auto; }
.bx-pair-nm small { color: var(--mut); font-weight: 400; }
.bx-pair-px { font-family: var(--mono); font-size: 12px; text-align: right; }
.bx-pair .chg { font-size: 11px; text-align: right; }
.bx-tape-list { flex: 1 1 0; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.bx-trade { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 2px 6px; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bx-trade > span:not(:first-child), .bx-trade a { text-align: right; color: var(--mut); }
.bx-trade a { text-decoration: none; }
.bx-trade a:hover { color: var(--acc); }

@media (max-width: 1180px) { .bx-wrap { grid-template-columns: 224px minmax(0,1fr) 234px; } }
@media (max-width: 920px) {
  /* stack to one column, panels size to content (no viewport height cap) and each
     scroll area gets an explicit height so flex:1 children don't collapse to 0 */
  .bx-wrap { grid-template-columns: 1fr; height: auto; min-height: 0; gap: 10px; }
  .bx-book, .bx-main, .bx-side { overflow: visible; }
  .bx-main { order: 1; flex-direction: column; }   /* chart + buy/sell first */
  .bx-book { order: 2; }                            /* order book below */
  .bx-side { order: 3; }                            /* trades last */
  .bx-chart, #bxChart { flex: none; }
  .bx-plot { height: 262px; flex: none; }
  .bx-entry { flex: none; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 12px; margin-top: 10px; overflow: visible; }
  .bx-asks, .bx-bids { flex: none; max-height: 188px; }
  .bx-tf { padding: 8px 12px; }                     /* comfy tap targets */
  .bx-pairs { display: none; }                      /* declutter: switch pairs from the markets page */
  .bx-tape { flex: none; } .bx-tape-list { flex: none; max-height: 300px; }
}
@media (max-width: 480px) {
  .bx-book { padding: 8px 6px; }
  .bx-colh, .bx-row { grid-template-columns: 1fr 40px 66px; }
  .bx-tfbar { overflow-x: auto; scrollbar-width: none; }
  .bx-tfbar::-webkit-scrollbar { display: none; }
  .bx-tf { flex: 0 0 auto; }
  .bx-last-px { font-size: 17px; }
}

/* ================= Rewards / Pasar Points ================= */
.rw-big { font-family: var(--disp); font-weight: 800; font-size: 44px; letter-spacing: -.03em; line-height: 1; }
.rw-tier { display: flex; align-items: center; gap: 10px; margin: 11px 0 9px; font-size: 13px; flex-wrap: wrap; }
.rw-badge { font-family: var(--disp); font-weight: 800; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--tc); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 15%, transparent); padding: 3px 11px; border-radius: 20px; }
.rw-bar { height: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.rw-bar > div { height: 100%; border-radius: 20px; transition: width .4s ease; }
.rw-reflink { display: flex; gap: 8px; }
.rw-reflink input { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; color: var(--txt); padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; outline: none; }
.rw-reflink input:focus { border-color: var(--acc); box-shadow: var(--glow); }
.rw-reflink .btn { flex: 0 0 auto; }
.rw-board { display: flex; flex-direction: column; gap: 7px; max-height: 470px; overflow-y: auto; }
.rw-you { font-size: 9px; font-weight: 800; color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); padding: 0 5px; border-radius: 8px; margin-left: 4px; }
.rw-sep { text-align: center; color: var(--dim); letter-spacing: 3px; padding: 2px 0; }

/* ================= NFT Fun launchpad ================= */
.funbadge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); padding: 1px 6px; border-radius: 8px; vertical-align: middle; white-space: nowrap; }
.fun-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px; margin-bottom: 20px;
  background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 55%), radial-gradient(120% 160% at 0% 120%, color-mix(in srgb, var(--merah) 12%, transparent), transparent 55%), var(--surf); }
.fun-hero::after { content: ""; position: absolute; inset: 0; background-image: var(--batik); opacity: .6; pointer-events: none; }
.fun-hero > * { position: relative; z-index: 1; }
.fun-title { font-family: var(--disp); font-weight: 800; font-size: 30px; letter-spacing: -.035em; line-height: 1.08; margin: 8px 0 10px; }
.fun-steps { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.fun-steps > div { font-size: 12.5px; font-weight: 600; color: var(--mut); border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; background: color-mix(in srgb, var(--surf) 60%, transparent); }
.fun-steps b { color: var(--acc); margin-right: 5px; }
.fun-grid { display: grid; grid-template-columns: 190px 1fr; gap: 18px; }
.fun-preview { display: flex; flex-direction: column; gap: 9px; }
.fun-preview img { width: 100%; aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); }
.funpals { display: flex; gap: 7px; justify-content: center; }
.funpal { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.funpal.on { border-color: var(--acc); box-shadow: var(--glow); }
.fun-fields { display: flex; flex-direction: column; }
.fun-artmode, .fun-store { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fun-artmode button, .fun-store button { background: var(--bg2); border: 1px solid var(--line); color: var(--mut); border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; }
.fun-artmode button.on, .fun-store button.on { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.fun-store button { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; padding: 9px 6px; }
.fun-store button small { font-size: 9px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.fun-upload { display: block; text-align: center; background: var(--bg2); border: 1px dashed var(--line-hi); border-radius: 11px; padding: 15px 10px; font-size: 13px; font-weight: 600; color: var(--txt); cursor: pointer; transition: all .12s; }
.fun-upload:hover { border-color: var(--acc); color: var(--acc); }
.fun-note { font-size: 11px; line-height: 1.5; color: var(--mut); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-bottom: 12px; }
.fun-note.warn { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.fun-note b { color: var(--txt); }
.fun-cost { font-size: 11.5px; line-height: 1.5; color: var(--txt); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); background: color-mix(in srgb, var(--acc) 8%, transparent); border-radius: 10px; padding: 9px 11px; margin: -4px 0 12px; }
.fun-cost b { color: var(--txt); } .fun-cost b.acc { color: var(--acc); }
.funbadge.onchain { color: var(--grn); background: color-mix(in srgb, var(--grn) 15%, transparent); border-color: color-mix(in srgb, var(--grn) 45%, transparent); }
.fun-mini { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 11px; margin-bottom: 6px; }
.fun-mini:hover { background: var(--bg3); text-decoration: none; }
.fun-mini img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); flex: 0 0 auto; }
.fun-mini-nm { font-family: var(--disp); font-weight: 650; font-size: 14px; }
.fun-mini-nm .sy { font-size: 11px; color: var(--mut); font-family: var(--mono); font-weight: 400; }
.fun-mini-row { display: flex; align-items: center; gap: 5px; }
.fun-mini-row .fun-mini { flex: 1; min-width: 0; margin-bottom: 0; }
.fun-x { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--mut); font-size: 12px; cursor: pointer; transition: all .12s; }
.fun-x:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.mint-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 14px; align-items: start; }
.mint-art img { width: 100%; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--out); background: var(--bg2); }
.mint-prog { height: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.mint-prog > div { height: 100%; background: var(--acc); border-radius: 20px; transition: width .4s ease; }
.mint-owned { font-size: 12.5px; color: var(--mut); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.mint-owned b { color: var(--acc); font-family: var(--mono); }
.mint-qty { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.mint-qty .btn { width: 38px; height: 38px; padding: 0; font-size: 18px; flex: 0 0 auto; }
.mint-q { font-family: var(--disp); font-weight: 800; font-size: 18px; min-width: 34px; text-align: center; }
@media (max-width: 760px) {
  .fun-title { font-size: 23px; } .fun-hero { padding: 22px 18px; }
  .fun-grid { grid-template-columns: 1fr; } .fun-preview { max-width: 240px; margin: 0 auto; }
  .mint-wrap { grid-template-columns: 1fr; }
}

/* ================= Solana chain support (switcher + preview page) ================= */
.chain-switch { position: relative; }
.chain-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.chain-btn .chev { font-size: 10px; opacity: .7; }
.chain-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 22%, transparent); }
.chain-dot.bsc { background: #f0b90b; box-shadow: 0 0 0 2px color-mix(in srgb, #f0b90b 22%, transparent); }
.chain-dot.sol { background: #9945ff; box-shadow: 0 0 0 2px color-mix(in srgb, #9945ff 24%, transparent); }
.chain-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--surf, #141824); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--out, 0 12px 34px rgba(0,0,0,.28)); padding: 6px; z-index: 80; display: none; }
.chain-menu.show { display: block; }
.chain-menu button, .md-chain-btns button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border: 0; background: transparent; color: inherit; border-radius: 9px; font-size: 13px; cursor: pointer; }
.chain-menu button:hover { background: color-mix(in srgb, var(--acc) 12%, transparent); }
.chain-menu button.active, .md-chain-btns button.active { background: color-mix(in srgb, var(--acc) 16%, transparent); font-weight: 600; }
.chain-menu .dim, .md-chain-btns .dim { opacity: .55; font-size: 11px; margin-left: auto; }
.sol-connect.connected { background: color-mix(in srgb, #9945ff 18%, transparent); border-color: color-mix(in srgb, #9945ff 40%, transparent); }
/* in Solana mode, hide BSC-only wallet controls */
body.chain-solana #faucetBtn, body.chain-solana #poolchip, body.chain-solana #walletWrap { display: none !important; }
.md-chain { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; }
.md-chain-btns { display: flex; gap: 6px; }
.md-chain-btns button { width: auto; padding: 7px 12px; border: 1px solid var(--line); }

/* Solana preview page */
.sol-page { max-width: 900px; margin: 0 auto; padding: 8px 0 40px; display: flex; flex-direction: column; gap: 18px; }
.sol-hero { text-align: center; padding: 26px 20px 6px; }
.sol-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, #9945ff 40%, var(--line)); background: color-mix(in srgb, #9945ff 10%, transparent); color: color-mix(in srgb, #9945ff 80%, var(--fg, #fff)); }
.sol-hero h1 { font-size: 30px; margin: 14px 0 8px; letter-spacing: -.02em; }
.sol-sub { max-width: 560px; margin: 0 auto; color: var(--mut, #6b7280); line-height: 1.5; font-size: 14px; }
.sol-hero-cta { margin-top: 16px; }
.sol-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: color-mix(in srgb, var(--surf, #141824) 60%, transparent); }
.sol-connect-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 20px; }
.sol-connect-card .sol-ic { font-size: 40px; }
.sol-connect-card h3 { margin: 4px 0; }
.sol-connect-card p { max-width: 380px; font-size: 13px; }
.sol-connect-card .btn { margin-top: 10px; }
.sol-wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sol-net { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--mut, #6b7280); }
.sol-addr { font-size: 12px; margin-top: 6px; word-break: break-all; opacity: .85; }
.sol-bal { font-size: 22px; white-space: nowrap; }
.sol-wc-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.sol-nfts-wrap, .sol-soon-wrap { border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.sol-nft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.sol-nft { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .12s, border-color .12s; }
.sol-nft:hover { transform: translateY(-2px); border-color: color-mix(in srgb, #9945ff 45%, var(--line)); }
.sol-nft-img { aspect-ratio: 1; background: color-mix(in srgb, var(--acc) 6%, transparent); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sol-nft-img img { width: 100%; height: 100%; object-fit: cover; }
.sol-nft-ph { font-size: 30px; opacity: .35; }
.sol-nft-nm { font-size: 12px; font-weight: 600; padding: 8px 9px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-nft-col { font-size: 11px; padding: 0 9px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sol-soon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sol-soon-ic { font-size: 20px; }
.sol-soon b { font-size: 13px; }
.sol-soon .mut { font-size: 11px; }
.sol-soon-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #9945ff 14%, transparent); color: color-mix(in srgb, #9945ff 85%, var(--fg, #fff)); }
.sol-foot { font-size: 11px; margin-top: 12px; }
@media (max-width: 620px) { .sol-soon-grid { grid-template-columns: 1fr; } .sol-hero h1 { font-size: 24px; } }

/* ================= Blur-style landing (hero · features · X endorsements · footer) ================= */
.lp-hero { position: relative; overflow: hidden; text-align: center; padding: 60px 24px 52px; margin: -8px -4px 8px; border-radius: 22px;
  background: radial-gradient(120% 100% at 50% 0%, #14173a 0%, #0b0d18 55%, #08090f 100%);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, #1a1d2e); }
.lp-hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% -8%, color-mix(in srgb, var(--acc) 42%, transparent) 0%, transparent 70%),
              radial-gradient(38% 44% at 82% 6%, color-mix(in srgb, var(--merah) 26%, transparent) 0%, transparent 72%); }
.lp-hero > * { position: relative; z-index: 1; }
.lp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 55%, #fff); padding: 6px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.lp-title { font-family: "Sora", system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(34px, 6.4vw, 68px); margin: 20px 0 0; color: #fff; text-transform: uppercase; }
.lp-title-2 { background: linear-gradient(92deg, var(--acc), var(--merah) 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-sub { max-width: 620px; margin: 18px auto 0; font-size: 15.5px; line-height: 1.55; color: #b8bdd0; }
.lp-sub b { color: var(--gold); }
.lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.lp-primary { background: linear-gradient(92deg, var(--acc), color-mix(in srgb, var(--acc) 60%, var(--merah))); color: #fff; border: 0; font-weight: 700; padding: 12px 22px; box-shadow: 0 10px 30px color-mix(in srgb, var(--acc) 40%, transparent); }
.lp-primary:hover { filter: brightness(1.08); }
.lp-secondary { border-color: color-mix(in srgb, #fff 20%, transparent); color: #fff; padding: 12px 22px; }
.lp-secondary:hover { background: color-mix(in srgb, #fff 8%, transparent); }
.lp-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.lp-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #cfd3e4;
  padding: 9px 15px; border-radius: 999px; border: 1px solid color-mix(in srgb, #fff 12%, transparent); background: color-mix(in srgb, #fff 5%, transparent); }
.lp-stat-ic { font-size: 15px; }

.lp-feats, .lp-social { margin-top: 46px; }
.lp-sec-head { text-align: center; margin-bottom: 26px; }
.lp-sec-k { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 8px; }
.lp-sec-head h2 { font-family: "Sora", system-ui, sans-serif; font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -.02em; margin: 0; }
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-feat { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: color-mix(in srgb, var(--surf) 55%, transparent); transition: transform .14s, border-color .14s; }
.lp-feat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.lp-feat-ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 12px;
  background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent); margin-bottom: 14px; }
.lp-feat h3 { font-size: 16px; margin: 0 0 6px; letter-spacing: -.01em; }
.lp-feat p { font-size: 13px; line-height: 1.5; color: var(--mut); margin: 0; }

/* X / tweet endorsement cards */
.lp-x-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xcard { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: color-mix(in srgb, var(--surf) 65%, transparent); display: flex; flex-direction: column; gap: 10px; }
.xcard:hover { border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); }
.xc-head { display: flex; align-items: center; gap: 11px; }
.xc-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.xc-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.xc-name { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.xc-handle { font-size: 12.5px; color: var(--mut); }
.xc-verif { width: 15px; height: 15px; border-radius: 50%; background: #1d9bf0; color: #fff; font-size: 9px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.xc-logo { width: 18px; height: 18px; margin-left: auto; color: color-mix(in srgb, var(--mut) 80%, var(--acc)); flex: 0 0 auto; }
.xc-body { font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--mut) 25%, currentColor); }
.xc-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.xc-heart { color: var(--merah); }
.xc-time { margin-left: auto; }

/* footer CTA band */
.lp-foot { position: relative; overflow: hidden; text-align: center; margin: 48px -4px 8px; padding: 48px 24px; border-radius: 22px;
  background: radial-gradient(120% 120% at 50% 120%, #14173a 0%, #0b0d18 60%, #08090f 100%);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, #1a1d2e); }
.lp-foot-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 50% 110%, color-mix(in srgb, var(--acc) 40%, transparent), transparent 70%); }
.lp-foot > * { position: relative; z-index: 1; }
.lp-foot h2 { font-family: "Sora", system-ui, sans-serif; font-size: clamp(22px, 3.8vw, 34px); color: #fff; margin: 0 0 10px; letter-spacing: -.02em; }
.lp-foot p { color: #b8bdd0; font-size: 15px; margin: 0 0 22px; }
.lp-foot-links { margin-top: 20px; font-size: 12.5px; color: #8b90a8; }

@media (max-width: 900px) { .lp-feat-grid, .lp-x-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-feat-grid, .lp-x-grid { grid-template-columns: 1fr; } .lp-hero { padding: 44px 18px 40px; } .lp-title { font-size: clamp(30px, 11vw, 44px); } }

/* ===== Pasar logo refresh + simplified landing (2026-07-04) ===== */
.logo .mark { width: 32px; height: 32px; display: block; }
.logo-wm { font-family: "Sora", system-ui, sans-serif; font-weight: 800; letter-spacing: .01em; }
.logo-wm .wm-nft { background: linear-gradient(92deg, #8b5cf6, #3b82f6 65%, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* simplified hero: logo + wordmark + tagline */
.lp-hero { background: radial-gradient(130% 110% at 50% -10%, #1a1440 0%, #0d0b24 52%, #08070f 100%); }
.lp-logo { width: clamp(96px, 15vw, 148px); height: auto; filter: drop-shadow(0 10px 34px rgba(124, 92, 255, .5)); }
.lp-wordmark { font-family: "Sora", system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 56px); letter-spacing: .02em; margin: 16px 0 0; line-height: 1;
  background: linear-gradient(180deg, #ffffff, #b7bcd8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-wordmark span { background: linear-gradient(92deg, #9b7bff, #3b82f6 60%, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-tagline { margin-top: 12px; color: #e7b93f; font-size: clamp(10px, 1.8vw, 12.5px); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.lp-tagline::before, .lp-tagline::after { content: "◆"; color: #e7b93f; opacity: .55; font-size: 8px; margin: 0 10px; vertical-align: middle; }

/* teaser feature row — short, entices a click */
.lp-feats { margin-top: 30px; }
.lp-teasers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp-teaser { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 16px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: color-mix(in srgb, var(--surf) 55%, transparent); transition: transform .14s, border-color .14s; }
.lp-teaser:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.lp-teaser .lp-feat-ic { width: 40px; height: 40px; font-size: 19px; margin-bottom: 0; flex: 0 0 auto; }
.lp-tz-txt { min-width: 0; }
.lp-tz-txt h3 { font-size: 14px; margin: 0; letter-spacing: -.01em; }
.lp-tz-txt p { font-size: 11.5px; margin: 3px 0 0; color: var(--mut); line-height: 1.35; }
.lp-tz-arrow { margin-left: auto; color: var(--acc); font-weight: 800; opacity: .45; transition: transform .14s, opacity .14s; }
.lp-teaser:hover .lp-tz-arrow { opacity: 1; transform: translateX(3px); }

/* endorsements: single tidy row, no heading */
.lp-social { margin-top: 22px; }
.mkt-cap { font-size: 12px; margin-left: 10px; align-self: center; }

@media (max-width: 900px) { .lp-teasers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lp-teasers { grid-template-columns: 1fr; } }

/* ===== Animated feature showcase (order-book + launchpad) 2026-07-07 ===== */
.lp-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.lp-show-card { position: relative; display: block; text-decoration: none; color: inherit; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; background: #0b0a16; transition: transform .16s, border-color .16s, box-shadow .16s; }
.lp-show-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 48%, var(--line)); box-shadow: 0 14px 34px color-mix(in srgb, var(--acc) 24%, transparent); }
.lp-show-card .scene { display: block; width: 100%; height: 156px; }
.lp-show-txt { display: flex; align-items: center; gap: 10px; padding: 13px 16px; }
.lp-show-txt h3 { font-size: 15px; margin: 0; letter-spacing: -.01em; }
.lp-show-txt p { font-size: 12px; margin: 3px 0 0; color: var(--mut); line-height: 1.4; }
.lp-show-txt .lp-tz-arrow { margin-left: auto; align-self: center; }
.lp-teasers { grid-template-columns: repeat(2, 1fr); }

/* order-book scene */
.ob-grid line { stroke: #ffffff12; stroke-width: 1; }
.ob-line { stroke: #8b93ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #6c5cff99); stroke-dasharray: 360; animation: obDraw 3.4s ease-in-out infinite; }
@keyframes obDraw { 0% { stroke-dashoffset: 360; } 55%, 100% { stroke-dashoffset: 0; } }
.cndl { transform-box: fill-box; transform-origin: 50% 100%; animation: cndlPulse 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes cndlPulse { 0%, 100% { transform: scaleY(.7); opacity: .72; } 50% { transform: scaleY(1); opacity: 1; } }
.ob-wick { stroke-width: 1.5; opacity: .5; }
.ob-dot { fill: #fff; filter: drop-shadow(0 0 6px #a9b0ff); }
.ob-div { stroke: #ffffff1a; }
.dbar { transform-box: fill-box; transform-origin: left; animation: dbarPulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .1s); }
.dbar.ask { fill: #ff5a47cc; } .dbar.bid { fill: #12c48fcc; }
@keyframes dbarPulse { 0%, 100% { transform: scaleX(.55); } 50% { transform: scaleX(1); } }

/* launchpad scene */
.lp-rocket { transform-box: fill-box; transform-origin: 50% 50%; animation: rocketFloat 3s ease-in-out infinite; }
@keyframes rocketFloat { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }
.lp-flame { transform-box: fill-box; transform-origin: 50% 0; animation: flameFlick .26s ease-in-out infinite alternate; }
@keyframes flameFlick { from { transform: scaleY(.65) scaleX(.9); opacity: .82; } to { transform: scaleY(1.2); opacity: 1; } }
.ltrail { fill: #ff9a5c; opacity: 0; animation: trailRise 1.1s linear infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes trailRise { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(36px); opacity: 0; } }
.lstar { fill: #cdd3ff; animation: twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes twinkle { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
.lspk { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: sparkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
.lp-fill { transform-box: fill-box; transform-origin: left; animation: progFill 3s ease-in-out infinite; }
@keyframes progFill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }

@media (max-width: 720px) { .lp-showcase { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cndl, .dbar, .ob-line, .ob-dot animateMotion, .lp-rocket, .lp-flame, .ltrail, .lstar, .lspk, .lp-fill { animation: none !important; }
}

/* ===== LIVE showcase panels: real order book + real launchpad deploy (2026-07-07) ===== */
.ob-live { background: linear-gradient(160deg, #12122c, #0a0a18); height: 156px; position: relative; overflow: hidden; }
.obl-load, .obl-fail { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.obl-wrap { display: flex; height: 100%; }
.obl-chart { flex: 1.55; padding: 12px 8px 10px 14px; display: flex; flex-direction: column; min-width: 0; }
.obl-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #9aa0b8; margin-bottom: 6px; gap: 8px; }
.obl-floor b { color: #cdd3ff; font-weight: 700; }
.obl-last { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.obl-spark { flex: 1; width: 100%; min-height: 0; }
.obl-dot { filter: drop-shadow(0 0 5px currentColor); animation: oblPulse 1.5s ease-in-out infinite; }
@keyframes oblPulse { 0%, 100% { r: 3; opacity: 1; } 50% { r: 5.2; opacity: .55; } }
.obl-book { flex: 1; border-left: 1px solid #ffffff12; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.oal-h { font-size: 10px; color: #8b90a8; display: flex; justify-content: space-between; }
.oal-h .mut { font-size: 9px; }
.oal-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.oal-p { color: #ff8676; font-variant-numeric: tabular-nums; min-width: 40px; }
.oal-trk { flex: 1; height: 7px; background: #ffffff10; border-radius: 3px; overflow: hidden; }
.oal-trk i { display: block; height: 100%; background: linear-gradient(90deg, #ff5a47, #ff9a6e); border-radius: 3px; }
.oal-s { color: #9aa; min-width: 14px; text-align: right; }
.oal-empty { font-size: 10.5px; padding-top: 8px; }

.ll-scene { position: relative; height: 156px; overflow: hidden; background: #0b0a16; }
.ll-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ll-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,24,0) 28%, rgba(10,10,22,.86) 100%); }
.ll-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #eafff5; background: rgba(18,196,143,.18); border: 1px solid rgba(18,196,143,.4); padding: 3px 9px; border-radius: 999px; }
.ll-badge i { width: 6px; height: 6px; border-radius: 50%; background: #12e39c; box-shadow: 0 0 6px #12e39c; animation: llblink 1.4s ease-in-out infinite; }
@keyframes llblink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ll-meta { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.ll-name { font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.ll-sym { font-size: 11px; font-weight: 600; opacity: .75; }
.ll-bar { height: 6px; background: rgba(255,255,255,.16); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.ll-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #22d3ee); border-radius: 3px; }
.ll-stat { font-size: 11px; color: #cfd3e4; margin-top: 5px; }
.ll-stat b { color: #fff; }
.ll-empty { display: flex; align-items: center; justify-content: center; color: var(--mut); }

/* ===== Wallet transaction report (Portfolio) 2026-07-07 ===== */
.rep-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; }
.rep-scope-l { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--acc); }
.rep-scope { font-size: 12px; font-weight: 700; color: var(--mut); border-left: 1px solid var(--line); padding-left: 12px; }
.rep-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rep-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: color-mix(in srgb, var(--surf) 60%, transparent); }
.rc-l { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.rc-v { font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rc-sym { font-size: 12px; font-weight: 600; opacity: .6; }
.rc-v.buy { color: #12a97e; } .rc-v.sell { color: #ef4444; }
.rep-card.net { border-width: 1.5px; }
.rep-card.net.pos { border-color: color-mix(in srgb, #12a97e 55%, var(--line)); background: color-mix(in srgb, #12a97e 10%, transparent); }
.rep-card.net.pos .rc-v { color: #12a97e; }
.rep-card.net.pos .rc-l { color: #12a97e; }
.rep-card.net.neg { border-color: color-mix(in srgb, #ef4444 55%, var(--line)); background: color-mix(in srgb, #ef4444 10%, transparent); }
.rep-card.net.neg .rc-v { color: #ef4444; }

.txm { margin-top: 22px; }
.txm-h { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--acc); padding: 8px 14px; border-radius: 9px;
  background: color-mix(in srgb, var(--acc) 10%, transparent); }
.txm-h .mut { font-weight: 600; }
.txtbl { margin-top: 4px; overflow-x: auto; }
.txrow { display: grid; grid-template-columns: minmax(96px,1.1fr) 62px minmax(90px,1fr) 92px minmax(90px,1fr) minmax(110px,1.1fr) 74px;
  align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; min-width: 720px; }
.txrow:hover:not(.txhead) { background: color-mix(in srgb, var(--acc) 5%, transparent); }
.txhead { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line); }
.txh { color: var(--acc); text-decoration: none; }
.txh:hover { text-decoration: underline; }
.txtok { font-weight: 700; }
.ta-r { text-align: right; }
.txb { justify-self: start; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 9px; border-radius: 6px; text-transform: uppercase; }
.txb.buy { color: #0e8f6a; background: rgba(18,169,126,.16); }
.txb.sell { color: #d63030; background: rgba(239,68,68,.15); }
.txb.deposit { color: #2f6fd0; background: rgba(47,123,224,.15); }
.txb.withd { color: #c9820c; background: rgba(245,158,11,.18); }

@media (max-width: 780px) { .rep-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .rep-cards { grid-template-columns: 1fr; } }

.rep-peg { margin-left: auto; font-size: 11px; font-weight: 600; }
.rep-peg { margin-left: auto; }
.rep-dl { font-size: 12px; padding: 7px 13px; }

/* ===== Swap page (1:1 stablecoin ↔ PSR) 2026-07-09 ===== */
.swap-wrap { max-width: 460px; margin: 0 auto; padding-top: 8px; }
.swap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.swap-rate-pill { font-size: 12px; font-weight: 700; color: var(--grn); border: 1px solid color-mix(in srgb, var(--grn) 45%, var(--line)); background: color-mix(in srgb, var(--grn) 12%, transparent); padding: 5px 11px; border-radius: 999px; }
.swap-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: color-mix(in srgb, var(--surf) 60%, transparent); margin-top: 8px; }
.swap-box { border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; background: color-mix(in srgb, var(--surf) 50%, transparent); }
.sb-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.sb-in { display: flex; align-items: center; gap: 10px; }
.sb-in input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: inherit; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-in input:disabled { opacity: .85; }
.sb-tok { font-weight: 800; font-size: 15px; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); white-space: nowrap; }
.swap-flip { display: flex; justify-content: center; margin: -6px 0; position: relative; z-index: 1; }
.swap-flip button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surf); color: var(--acc); font-size: 16px; cursor: pointer; transition: transform .15s, border-color .15s; }
.swap-flip button:hover { transform: rotate(180deg); border-color: color-mix(in srgb, var(--acc) 50%, var(--line)); }
.swap-info { display: flex; justify-content: space-between; font-size: 13px; padding: 12px 4px 14px; }
.swap-go { margin-top: 2px; }
.swap-res { text-align: center; font-size: 12px; margin-top: 14px; }
.swap-res b { color: var(--acc); }