/* ---------- stars pill ---------- */
a.coin-pill { text-decoration: none; transition: border-color .25s, transform .3s var(--spring); }
a.coin-pill:hover { border-color: #ffb300; transform: translateY(-1px); }
.coin-pill .star-ico { display: inline-flex; font-size: 16px; }
.coin-pill .plus { font-style: normal; width: 16px; height: 16px; display: grid; place-items: center; background: #ffb300; color: #000; font-weight: 700; margin-left: 2px; transition: transform .3s var(--spring); }
a.coin-pill:hover .plus { transform: rotate(90deg); }
.stat b .st { font-size: .8em; margin-right: .15em; }

/* ---------- market ---------- */
.bal { text-align: right; }
.bal-n { font: 800 30px var(--sans); font-stretch: 112%; margin-top: 4px; }
.tabs-x { position: relative; display: inline-flex; border: 1px solid var(--line2); margin-bottom: 24px; }
.tabs-x button { position: relative; z-index: 1; padding: 11px 20px; border: 0; background: none; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); cursor: pointer; transition: color .35s var(--ease); }
.tabs-x button.on { color: var(--ink); }
.tabs-x .ind { position: absolute; top: 0; bottom: 0; left: 0; background: var(--acc); transition: transform .5s var(--spring), width .5s var(--spring); }
.mk-body { transition: opacity .16s var(--ease), transform .16s var(--ease), filter .16s; }
.mk-body.out { opacity: 0; transform: translateY(6px); filter: blur(3px); }

.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dr { --rc: #999; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--bg); animation: drIn .7s var(--ease) both; animation-delay: calc(var(--k) * 45ms); transition: border-color .3s, transform .5s var(--spring), opacity .5s; }
.dr:hover { border-color: color-mix(in srgb, var(--rc) 60%, transparent); }
@keyframes drIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.dr.sold { opacity: .25; transform: scale(.94); }
.dr-art { position: relative; aspect-ratio: 1; overflow: hidden; transition: transform .6s var(--ease); will-change: transform; }
.dr-art img { width: 100%; height: 100%; display: block; transition: transform 1.2s var(--ease); }
.dr:hover .dr-art img { transform: scale(1.05); }
.dr-glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), #ffffff2e, transparent 50%); opacity: 0; transition: opacity .4s; pointer-events: none; mix-blend-mode: overlay; }
.dr:hover .dr-glare { opacity: 1; }
.dr.gone .dr-art img { filter: grayscale(.9) brightness(.5); }
.stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 6px 14px; border: 3px solid var(--red); color: var(--red); font: 900 22px var(--sans); font-stretch: 125%; letter-spacing: .04em; animation: stamp .5s var(--spring) both; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); opacity: 0; } }
.dr-meta { padding: 14px; display: grid; gap: 8px; flex: 1; align-content: start; }
.dr-top { display: flex; justify-content: space-between; align-items: center; }
.dr-rar { font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.dr-save { font: 700 10px var(--mono); padding: 3px 6px; background: #ffb30022; color: #ffb300; }
.dr h3 { margin: 0; font: 800 19px var(--sans); font-stretch: 110%; letter-spacing: -.01em; }
.dr h3 a { text-decoration: none; }
.sup { display: grid; gap: 6px; font: 11px var(--mono); color: var(--mute); }
.sup b { color: var(--fg); font-weight: 500; }
.sup-bar { height: 3px; background: var(--bg3); overflow: hidden; }
.sup-bar i { display: block; height: 100%; width: var(--w); background: var(--rc); transform-origin: left; animation: supIn 1.2s var(--ease) both; transition: width .8s var(--ease); }
@keyframes supIn { from { transform: scaleX(0); } }
.buy { justify-content: space-between; margin-top: 4px; }
.buy-p { padding: 4px 8px; margin: -4px -6px -4px 0; background: var(--ink); color: #ffd54a; transition: background .3s, color .3s; }
.buy-p .st { font-size: 14px; }
.btn.solid.buy:hover .buy-p { background: #ffd54a; color: var(--ink); }
.buy.busy { pointer-events: none; }
.buy.busy .buy-l { animation: pulseTxt .7s ease-in-out infinite; }
@keyframes pulseTxt { 50% { opacity: .3; } }

.mk-stats { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); margin-bottom: 16px; }
.mk-stats > div { padding: 14px 16px; border-right: 1px solid var(--line); display: grid; gap: 6px; }
.mk-stats > div:last-child { border-right: 0; }
.mk-stats b { font: 700 16px var(--mono); }
@media (max-width: 1100px) { .mk-stats { grid-template-columns: repeat(4, 1fr); } .mk-stats > div { border-bottom: 1px solid var(--line); } }
.mk-filters { margin-bottom: 18px; }

.tu-head p { max-width: 620px; color: #bbb; margin: 8px 0 22px; }
.tu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tu { position: relative; display: grid; gap: 8px; justify-items: start; padding: 22px 18px; border: 1px solid var(--line2); background: var(--bg); cursor: pointer; text-align: left; overflow: hidden; animation: drIn .6s var(--ease) both; animation-delay: calc(var(--k) * 60ms); transition: border-color .3s, transform .45s var(--spring), box-shadow .4s; }
.tu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #ffd54a22 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s var(--ease); pointer-events: none; }
.tu:hover { border-color: #ffb300; transform: translateY(-4px); box-shadow: 0 18px 40px -18px #ffb30066; }
.tu:hover::after { background-position: -40% 0; }
.tu:disabled { opacity: .4; pointer-events: none; }
.tu.hot { border-color: #ffb30088; }
.tu.busy { opacity: .6; pointer-events: none; }
.tu-tag { position: absolute; top: 10px; right: 10px; font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; background: #ffb300; color: #000; }
.tu-get { font: 900 32px var(--sans); font-stretch: 112%; letter-spacing: -.02em; }
.tu-pay { font-size: 12px; color: var(--fg); }
.tu-rate { font-size: 11px; color: #ffb300; }
.tu-waiting { margin-top: 18px; padding: 14px 16px; border: 1px dashed #ffb30088; display: flex; gap: 12px; align-items: center; font-size: 12px; animation: drIn .5s var(--ease); }
.tu-waiting.ok { border-color: var(--acc); color: var(--acc); }
.spin { width: 14px; height: 14px; border: 2px solid #ffb30044; border-top-color: #ffb300; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.rl .listed { position: absolute; top: 16px; right: 16px; font: 700 10px var(--mono); padding: 3px 6px; background: #000c; border: 1px solid #ffb300; color: #ffb300; z-index: 1; }
.price-in { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.price-in .input { font-size: 18px; }
.dim { color: var(--mute); }

/* ---------- gift drops ---------- */
.dr-art .gift img.gift-model, .dr-art .gift .gift-model { width: 58%; height: 58%; transition: transform .6s var(--spring); }
.dr:hover .dr-art .gift .gift-model, .dr:hover .dr-art .gift img.gift-model { transform: translate(-50%, -55%) scale(1.08) rotate(-3deg); }
.dr.gone .dr-art .gift { filter: grayscale(.9) brightness(.5); }
.gift-model.swap { animation: giftSwap .55s var(--spring) both; }
@keyframes giftSwap { from { transform: translate(-50%, -40%) scale(.5); opacity: 0; } }
.dr-model { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-model b { color: var(--fg); font-weight: 500; }
.dr-models { display: flex; gap: 2px; flex-wrap: wrap; }
.dr-models span { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid transparent; cursor: pointer; transition: border-color .2s, transform .3s var(--spring); font-size: 18px; }
.dr-models span img.ae { width: 20px; height: 20px; margin: 0; vertical-align: 0; }
.dr-models span:hover { transform: translateY(-3px) scale(1.15); }
.dr-models span.on { border-color: var(--rc); }
.h3-num { font: 500 12px var(--mono); color: var(--mute); letter-spacing: 0; }

/* ---------- names ---------- */
.nm-hero { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line2); background: radial-gradient(circle at 100% 0, #d4ff0012, transparent 50%), var(--bg); }
.nm-hero p { margin: 8px 0 0; max-width: 640px; color: #bbb; }
.nm-search { display: flex; align-items: stretch; max-width: 560px; border: 1px solid var(--line2); }
.nm-search .at { display: grid; place-items: center; padding: 0 12px; font: 800 22px var(--sans); color: var(--acc); border-right: 1px solid var(--line2); }
.nm-search .input { border: 0; font-size: 18px; }
.nm-search .btn { border: 0; }
.nm-prices { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--mute); }
.nm-prices b { color: var(--fg); }
.nm-res { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; max-width: 560px; padding: 16px; border: 1px dashed var(--line2); animation: drIn .5s var(--ease); }
.nm-res p { grid-column: 1 / -1; margin: 0; font: 12px var(--mono); color: var(--mute); }
.nm-res .buy { grid-column: 1 / -1; justify-self: start; min-width: 220px; }
.nm-at { font: 900 26px/1 var(--sans); font-stretch: 118%; letter-spacing: -.03em; word-break: break-all; }
.nm-st { justify-self: start; font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px; border: 1px solid var(--line2); color: var(--mute); }
.nm-st.ok { border-color: var(--acc); color: var(--acc); }
.nm-st.bad { border-color: var(--red); color: var(--red); }
.nm-hist { grid-column: 1 / -1; display: grid; font-size: 11px; color: var(--mute); }
.nm-hist div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.nm-mine { display: grid; border: 1px solid var(--line); }
.nm-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); animation: viewIn .4s var(--ease) both; }
.nm-row:last-child { border-bottom: 0; }
.nm-row .nm-at { font-size: 20px; }
.nm-row .mono { font-size: 11px; }
.listed-tag { font: 700 11px var(--mono); padding: 4px 7px; border: 1px solid #ffb300; color: #ffb300; }
.nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.nm-card { --len: 6; position: relative; display: grid; gap: 10px; padding: 18px 16px 16px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; animation: drIn .6s var(--ease) both; animation-delay: calc(var(--k) * 40ms); transition: border-color .3s, transform .45s var(--spring); }
.nm-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0 0, #d4ff0018, transparent 60%); opacity: calc(1.4 - var(--len) * .15); pointer-events: none; }
.nm-card:hover { border-color: var(--acc); transform: translateY(-4px); }
.nm-big { font: 900 clamp(26px, calc(46px - var(--len) * 2px), 44px)/1 var(--sans); font-stretch: 120%; letter-spacing: -.04em; word-break: break-all; }
.nm-big span { color: var(--acc); margin-right: .04em; }
.nm-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--mute); }
.nm-meta a { color: var(--fg); }
.nm-reveal { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 20px; animation: modalIn .5s var(--spring); }
.nm-reveal .nm-big { --len: 4; font-size: clamp(44px, 9vw, 96px); color: var(--fg); text-shadow: 0 0 40px #d4ff0055; }
.nm-reveal p { margin: 0; font-size: 13px; max-width: 420px; }
.dr-models span > img:not(.ae) { width: 24px; height: 24px; object-fit: contain; }
.dr-models .more { width: auto; padding: 0 6px; font: 10px var(--mono); color: var(--mute); border: 1px dashed var(--line2); cursor: default; }

/* market filters: collection → model / backdrop / symbol, like Telegram's */
.flt-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.flt-bar .input { width: auto; min-width: 140px; max-width: 240px; font-size: 12px; padding: .65em 2em .65em .8em; }
.flt-bar .input:disabled { opacity: .45; }
.col { cursor: pointer; }
.col .buy { pointer-events: none; }

/* auctions */
.auc-clock { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 5px 9px; background: #000c; border: 1px solid var(--line2); font-size: 12px; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(6px); }
.auc-clock::before { content: '⏱ '; }
.auc-clock.hot { border-color: var(--red); color: var(--red); animation: pulseTxt 1s ease-in-out infinite; }
.auc-name { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; word-break: break-all;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%), repeating-linear-gradient(135deg, #0d0d0d 0 12px, #111 12px 24px);
  font: 900 clamp(26px, 5vw, 46px)/1 var(--sans); font-stretch: 120%; letter-spacing: -.04em; }
.auc-name span { color: var(--acc); }
.tu.sel { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc), 0 18px 40px -18px #d4ff0066; }

/* offers + watchlist */
.of-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.of-list { display: grid; gap: 8px; }
.of { display: grid; grid-template-columns: 50px 1fr auto; grid-template-areas: "art main amt" "art act act"; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); }
.of-art { grid-area: art; width: 50px; height: 50px; display: grid; place-items: center; background: var(--bg3); overflow: hidden; }
.of-at { font: 700 22px var(--mono); color: var(--acc); }
.of-main { grid-area: main; min-width: 0; font-size: 13px; } .of-main a { color: var(--fg); }
.of-main small { display: block; color: var(--mute); font-size: 11px; margin-top: 2px; } .of-main small a { color: var(--mute); }
.of-amt { grid-area: amt; font: 600 14px var(--mono); }
.of-act { grid-area: act; display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.of-act:empty { display: none; }
.of-act select { width: auto; padding: 5px 8px; font-size: 12px; }
.of-hist { margin-top: 14px; } .of-hist summary { cursor: pointer; margin-bottom: 8px; }
.wl { display: grid; gap: 8px; }
.wl-i { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line2); font-size: 13px; }
.wl-i small { display: block; color: var(--mute); font-size: 11px; margin-top: 2px; }
.wl-i > span { font-size: 12px; color: var(--mute); }
.col-head { margin: 0 0 16px; padding: 16px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); }
.ch-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ch-top h3 { margin: 0; } .ch-top small { color: var(--mute); font-size: 11px; }
@media (max-width: 860px) { .of-cols { grid-template-columns: 1fr; } .wl-i { grid-template-columns: 1fr auto; } .wl-i > span { grid-column: 1 / -1; grid-row: 2; } }
.nm-prices .up { color: #8fd18a; } .nm-prices .down { color: #d98a8a; }
.nm-ap { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; font-size: 11px; }
.nm-ap span { padding: 3px 8px; border: 1px solid var(--line2); color: var(--mute); }
.nm-ap .up { color: #8fd18a; border-color: #8fd18a44; } .nm-ap .down { color: #d98a8a; border-color: #d98a8a44; }
.nm-ap b { color: var(--fg); }

/* top up: custom amount */
.tu-custom { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line2); display: grid; gap: 12px; transition: border-color .3s; }
.tu-custom.sel { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.tu-c-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tu-c-in { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line2); padding-left: 10px; background: var(--bg2); }
.tu-c-in span { font: 14px var(--mono); color: var(--mute); }
.tu-c-in input { width: 120px; border: 0; background: none; }
.tu-c-eq { color: var(--mute); font: 14px var(--mono); }
.tu-c-note { font-size: 11px; color: var(--mute); }
#tu-range { width: 100%; accent-color: var(--acc); }
.tu-own .tu-get { font-size: 22px; } .tu-own { border-style: dashed; }
.tabs-x button { white-space: nowrap; }
.curb { position: relative; } .curb.soon { opacity: .5; filter: grayscale(.7); } .curb-soon { position: absolute; top: -7px; right: -6px; padding: 2px 6px; border-radius: 99px; background: var(--acc); color: #000; font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }