/* ============================================================
   Premium NFT — Rarible-grade CSS
   Dark, minimal, animated — no badge spam
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Design tokens ── */
:root {
  --bg:         #050507;
  --bg1:        #0c0c10;
  --bg2:        #111116;
  --bg3:        #18181e;
  --bg4:        #202028;
  --border:     rgba(255,255,255,.06);
  --border2:    rgba(255,255,255,.1);
  --border3:    rgba(255,255,255,.16);
  --text:       #f0f0f8;
  --muted:      #7b7d8c;
  --dim:        #3f4151;
  --accent:     #7866f5;        /* Rarible purple */
  --accent2:    #9b8ff7;
  --green:      #3cda64;
  --red:        #f55;
  --amber:      #f5a623;
  --radius:     12px;
  --radius-sm:  8px;
  --nav-h:      64px;
  --max:        1320px;
  --card-bg:    #111116;
  --card-bg-h:  #17171d;
  --ease:       cubic-bezier(.25,.1,.25,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
button, input, select { font-family:inherit }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px }

/* ────────────────────────────────────────────────────────────
   NAVIGATION — Rarible style: logo left, links center, wallet right
   ──────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:500;
  height:var(--nav-h);
  border-bottom:1px solid var(--border);
  background:rgba(5,5,7,.88);
  backdrop-filter:blur(20px) saturate(160%);
}
.nav-inner {
  max-width:var(--max); margin:0 auto;
  height:100%; padding:0 24px;
  display:flex; align-items:center; gap:12px;
}
.nav-logo {
  display:flex; align-items:center; gap:9px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:18px; letter-spacing:-.02em;
  flex-shrink:0; margin-right:8px;
}
.nav-logo-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,#7866f5 0%,#3ecfb2 100%);
  display:grid; place-items:center; font-size:14px;
}
.nav-search {
  position:relative; flex:1; max-width:480px;
}
.nav-search svg {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--muted); pointer-events:none; flex-shrink:0;
}
.nav-search input {
  width:100%; height:36px;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:999px; padding:0 14px 0 36px;
  font-size:13.5px; color:var(--text); outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.nav-search input::placeholder { color:var(--muted) }
.nav-search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(120,102,245,.14) }
.nav-links {
  display:flex; gap:0; align-items:center;
  margin:0 4px;
}
.nav-links a {
  padding:6px 12px; border-radius:6px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition:color .15s, background .15s; white-space:nowrap;
}
.nav-links a:hover { color:var(--text) }
.nav-links a.on { color:var(--text) }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0 }

.chain-pill {
  display:flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--border2); background:var(--bg2);
  font-size:12px; font-weight:600; color:var(--muted);
}
.chain-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 5px var(--green) }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 16px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; cursor:pointer; border:none;
  transition:transform .14s var(--ease), opacity .14s, background .14s, box-shadow .14s;
  white-space:nowrap; line-height:1;
}
.btn:active { transform:scale(.97) }
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { background:#6a59e0; box-shadow:0 4px 20px rgba(120,102,245,.4) }
.btn-outline { background:transparent; border:1px solid var(--border2); color:var(--muted) }
.btn-outline:hover { border-color:var(--border3); color:var(--text) }
.btn-ghost { background:var(--bg3); color:var(--text) }
.btn-ghost:hover { background:var(--bg4) }
.btn-teal { background:#3ecfb2; color:#04201a; font-weight:700 }
.btn-teal:hover { background:#2eb89e }
.btn-sm { height:32px; padding:0 13px; font-size:13px }
.btn-xs { height:28px; padding:0 11px; font-size:12px }
.btn-lg { height:44px; padding:0 22px; font-size:15px }
.btn-block { width:100%; justify-content:center }
.btn:disabled { opacity:.45; cursor:not-allowed }

/* ── Layout ── */
.wrap { max-width:var(--max); margin:0 auto; padding:36px 24px 80px }

/* ── Section ── */
.sec-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:10px }
.sec-hd h2 { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:700; letter-spacing:-.02em }
.sec-more { font-size:13px; font-weight:600; color:var(--accent2) }
.sec-more:hover { color:var(--accent) }

/* ════════════════════════════════════════════════════════════
   NFT CARDS — Rarible style
   Clean. No labels cluttering every card.
   ════════════════════════════════════════════════════════════ */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:12px;
}
.grid-lg { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) }

.card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  cursor:pointer; display:block; position:relative;
}
.card:hover {
  border-color:rgba(120,102,245,.3);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}

/* Image wrapper */
.card-img {
  position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--bg1);
}
.card-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s var(--ease);
}
.card:hover .card-img img { transform:scale(1.05) }

/* Buy-now overlay — slides up from bottom on hover (Rarible) */
.card-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:10px 12px;
  background:linear-gradient(to top, rgba(5,5,7,.95) 0%, rgba(5,5,7,.5) 70%, transparent 100%);
  transform:translateY(100%); transition:transform .22s var(--ease);
}
.card:hover .card-overlay { transform:translateY(0) }
.card-overlay-btn {
  width:100%; background:var(--accent); color:#fff;
  padding:8px 0; border-radius:6px; font-size:13px; font-weight:700;
  text-align:center; border:none; cursor:pointer;
}

/* Body */
.card-body { padding:12px }
.card-coll {
  font-size:11px; font-weight:600; color:var(--accent2);
  margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:5px;
}
.card-coll svg { width:11px; height:11px; flex-shrink:0 }
.card-name {
  font-size:14px; font-weight:600; color:var(--text);
  margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-foot { display:flex; align-items:flex-end; justify-content:space-between }
.price-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; line-height:1 }
.price-val { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; margin-top:3px; line-height:1 }
.price-sym { font-size:11px; font-weight:600; color:var(--muted) }
.price-usd { font-size:11px; color:var(--muted); margin-top:2px }
.card-id { font-size:11px; color:var(--dim) }

/* ════════════════════════════════════════════════════════════
   TRENDING TABLE — Rarible /all page
   ════════════════════════════════════════════════════════════ */
.trend-wrap {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-bottom:48px;
}
.trend-head {
  display:flex; align-items:center; gap:0;
  padding:16px 20px 0; border-bottom:1px solid var(--border);
}
.trend-head h2 {
  font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
  margin-right:20px; padding-bottom:14px; border-bottom:2px solid var(--accent); margin-bottom:-1px;
}
.trend-tf {
  display:flex; gap:2px; padding-bottom:14px;
}
.trend-tf button {
  padding:5px 11px; border-radius:6px; border:none; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--muted); background:transparent;
  transition:.15s;
}
.trend-tf button:hover { color:var(--text) }
.trend-tf button.on { background:var(--bg3); color:var(--text) }

.trend-table { width:100%; border-collapse:collapse }
.trend-table thead th {
  padding:10px 16px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  text-align:left; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.trend-table thead th:not(:nth-child(1)):not(:nth-child(2)) { text-align:right }
.trend-table tbody td {
  padding:13px 16px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.trend-table tbody td:not(:nth-child(1)):not(:nth-child(2)) { text-align:right }
.trend-table tbody tr:last-child td { border:none }
.trend-table tbody tr { transition:.12s; cursor:pointer }
.trend-table tbody tr:hover td { background:rgba(255,255,255,.025) }

.trend-rank { color:var(--muted); font-size:13px; font-weight:600; width:32px }
.trend-col { display:flex; align-items:center; gap:12px }
.trend-col-img {
  width:44px; height:44px; border-radius:10px; overflow:hidden; flex-shrink:0;
  background:var(--bg3);
}
.trend-col-img img { width:100%; height:100%; object-fit:cover }
.trend-col-name { font-weight:700; font-size:14px }
.trend-col-sub { font-size:11px; color:var(--muted); margin-top:2px }
.trend-up { color:var(--green) }
.trend-dn { color:var(--red) }
.t-bold { font-weight:700 }

/* ════════════════════════════════════════════════════════════
   HOMEPAGE HERO
   ════════════════════════════════════════════════════════════ */
.hero {
  max-width:var(--max); margin:0 auto;
  padding:52px 24px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.hero-left {}
.hero-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px;
  background:rgba(120,102,245,.1); border:1px solid rgba(120,102,245,.2);
  font-size:12px; font-weight:600; color:var(--accent2);
  margin-bottom:20px;
}
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-h1 {
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(38px,5.5vw,68px); font-weight:700;
  letter-spacing:-.04em; line-height:1.02; margin-bottom:16px;
}
.hero-h1 em {
  font-style:normal;
  background:linear-gradient(125deg,#7866f5 0%,#3ecfb2 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:16px; color:var(--muted); max-width:440px; line-height:1.7; margin-bottom:28px }
.hero-btns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px }

.hero-stats { display:flex; gap:24px; flex-wrap:wrap }
.h-stat { }
.h-stat strong {
  font-family:'Space Grotesk',sans-serif; display:block;
  font-size:22px; font-weight:700;
}
.h-stat span { font-size:12px; color:var(--muted); display:block; margin-top:2px }

/* Showcase: 2-column with stacked minis */
.hero-showcase { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start }
.showcase-big {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:16px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transition:.2s;
}
.showcase-big:hover { transform:translateY(-3px) }
.showcase-big-img { aspect-ratio:1; overflow:hidden }
.showcase-big-img img { width:100%; height:100%; object-fit:cover; transition:.3s }
.showcase-big:hover .showcase-big-img img { transform:scale(1.04) }
.showcase-big-body { padding:14px 16px }
.showcase-big-col { font-size:11px; font-weight:600; color:var(--accent2); margin-bottom:4px }
.showcase-big-name { font-size:16px; font-weight:700; margin-bottom:10px }
.showcase-big-row { display:flex; justify-content:space-between; align-items:center }

.showcase-stack { display:flex; flex-direction:column; gap:10px }
.showcase-mini {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; display:flex;
  transition:.18s; cursor:pointer;
}
.showcase-mini:hover { border-color:rgba(120,102,245,.3); transform:translateX(-2px) }
.showcase-mini-img { width:70px; height:70px; flex-shrink:0; overflow:hidden; background:var(--bg3) }
.showcase-mini-img img { width:100%; height:100%; object-fit:cover }
.showcase-mini-body { padding:9px 12px; flex:1 min-width:0 }
.showcase-mini-col { font-size:10px; color:var(--muted); font-weight:600; margin-bottom:2px }
.showcase-mini-name { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.showcase-mini-price { font-size:13px; font-weight:700; margin-top:5px; font-family:'Space Grotesk',sans-serif }

/* ════════════════════════════════════════════════════════════
   EXPLORE — OpenSea sidebar + grid
   ════════════════════════════════════════════════════════════ */
.exp-layout { display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start }

.sidebar {
  position:sticky; top:calc(var(--nav-h) + 12px);
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.sidebar-head {
  padding:13px 15px; font-size:13px; font-weight:700;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between;
}
.sidebar-clear { font-size:12px; color:var(--accent2); cursor:pointer }
.sidebar-section { border-bottom:1px solid var(--border) }
.sidebar-section:last-child { border:none }
.sidebar-section-lbl {
  padding:10px 15px; font-size:11px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
}
.sidebar-item {
  display:block; padding:8px 15px;
  font-size:13px; color:var(--muted); cursor:pointer;
  transition:.12s; position:relative;
}
.sidebar-item:hover { background:rgba(255,255,255,.03); color:var(--text) }
.sidebar-item.on { color:var(--text); padding-left:26px }
.sidebar-item.on::before {
  content:''; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--accent);
}
.sidebar-static { padding:8px 15px; font-size:13px; color:var(--muted); cursor:default }

.toolbar {
  display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.toolbar-count { font-size:13px; color:var(--muted); flex:1 }
.sel {
  height:34px; padding:0 11px; border-radius:var(--radius-sm);
  background:var(--bg2); border:1px solid var(--border2);
  font-size:13px; color:var(--text); cursor:pointer; outline:none;
  transition:.15s;
}
.sel:focus { border-color:var(--accent) }

/* ════════════════════════════════════════════════════════════
   COLLECTION DETAIL
   ════════════════════════════════════════════════════════════ */
.col-banner { position:relative; height:240px; overflow:hidden; background:var(--bg1) }
.col-banner img { width:100%; height:100%; object-fit:cover }
.col-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
}
.col-profile {
  max-width:var(--max); margin:0 auto; padding:0 24px;
  margin-top:-52px; position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:18px;
}
.col-ava {
  width:88px; height:88px; border-radius:14px; flex-shrink:0;
  border:3px solid var(--bg); overflow:hidden; background:var(--bg2);
}
.col-ava img { width:100%; height:100%; object-fit:cover }
.col-info { padding-bottom:6px }
.col-info h1 { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; margin-bottom:3px }
.col-info p { font-size:13px; color:var(--muted) }

.col-stats {
  max-width:var(--max); margin:18px auto 0; padding:0 24px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.col-stat {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 16px; min-width:110px;
}
.col-stat-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em }
.col-stat-val { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; margin-top:4px }

.col-tabs {
  max-width:var(--max); margin:22px auto 0; padding:0 24px;
  display:flex; border-bottom:1px solid var(--border);
}
.col-tab {
  padding:9px 16px; font-size:14px; font-weight:600; color:var(--muted);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:.15s;
}
.col-tab.on { color:var(--text); border-color:var(--accent) }

/* ════════════════════════════════════════════════════════════
   ASSET DETAIL
   ════════════════════════════════════════════════════════════ */
.asset-layout { display:grid; grid-template-columns:1fr 400px; gap:24px; align-items:start }
.asset-img-wrap {
  position:sticky; top:calc(var(--nav-h) + 16px);
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.asset-img-wrap img { width:100%; display:block }
.asset-panel { position:sticky; top:calc(var(--nav-h) + 16px) }

.panel-box {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-bottom:10px;
}
.panel-box-hd {
  padding:13px 16px; border-bottom:1px solid var(--border);
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:space-between;
}
.panel-box-bd { padding:16px }

.price-box {
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px; margin-bottom:14px;
}
.price-box-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em }
.price-box-val {
  font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700;
  margin:6px 0 2px; line-height:1;
}
.price-box-sym { font-size:18px; color:var(--muted); font-weight:600 }
.price-box-usd { font-size:13px; color:var(--muted) }
.fee-txt { font-size:11px; color:var(--muted); text-align:center; margin-top:10px; line-height:1.6 }

.trait-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:7px }
.trait-box {
  background:rgba(120,102,245,.07); border:1px solid rgba(120,102,245,.15);
  border-radius:var(--radius-sm); padding:8px 10px; text-align:center;
}
.trait-type { font-size:10px; color:var(--accent2); font-weight:700; text-transform:uppercase; letter-spacing:.05em }
.trait-val { font-size:13px; font-weight:700; margin-top:3px }

/* ════════════════════════════════════════════════════════════
   COLLECTION CARDS
   ════════════════════════════════════════════════════════════ */
.col-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px }
.col-card {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; display:block;
  transition:.2s;
}
.col-card:hover { border-color:rgba(120,102,245,.3); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.45) }
.col-card-banner { height:110px; overflow:hidden; position:relative; background:var(--bg3) }
.col-card-banner img { width:100%; height:100%; object-fit:cover }
.col-card-ava {
  position:absolute; bottom:-20px; left:14px;
  width:46px; height:46px; border-radius:10px;
  border:3px solid var(--bg1); overflow:hidden; background:var(--bg3);
}
.col-card-ava img { width:100%; height:100%; object-fit:cover }
.col-card-body { padding:28px 14px 14px }
.col-card-name { font-size:15px; font-weight:700; margin-bottom:2px }
.col-card-sub { font-size:11px; color:var(--muted); margin-bottom:12px }
.col-card-stats { display:flex; gap:16px }
.col-stat-blk span { font-size:10px; color:var(--muted); display:block; text-transform:uppercase; letter-spacing:.05em }
.col-stat-blk strong { font-size:13px; font-weight:700; display:block; margin-top:2px }

/* ════════════════════════════════════════════════════════════
   ARTIST CARDS
   ════════════════════════════════════════════════════════════ */
.artist-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }
.artist-card {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 16px; text-align:center;
  display:block; transition:.2s;
}
.artist-card:hover { border-color:rgba(120,102,245,.3); transform:translateY(-3px) }
.artist-ava {
  width:64px; height:64px; border-radius:50%; margin:0 auto 12px;
  overflow:hidden; border:2px solid var(--border2); background:var(--bg3);
}
.artist-ava img { width:100%; height:100%; object-fit:cover }
.artist-name { font-size:15px; font-weight:700; margin-bottom:4px }
.artist-bio {
  font-size:12px; color:var(--muted); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ════════════════════════════════════════════════════════════
   ACTIVITY TABLE
   ════════════════════════════════════════════════════════════ */
.tbl-wrap { background:var(--bg1); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden }
.tbl { width:100%; border-collapse:collapse; font-size:13.5px }
.tbl th {
  padding:10px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:600; background:var(--bg); border-bottom:1px solid var(--border);
  text-align:left;
}
.tbl td { padding:12px 16px; border-bottom:1px solid var(--border) }
.tbl tbody tr:last-child td { border:none }
.tbl tbody tr:hover td { background:rgba(255,255,255,.02) }
.tbl tbody tr { transition:.12s }

.ev-pill {
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; text-transform:capitalize;
}
.ev-sale    { background:rgba(60,218,100,.1);  color:#3cda64 }
.ev-listed  { background:rgba(120,102,245,.1); color:var(--accent2) }
.ev-minted  { background:rgba(62,207,178,.1);  color:#3ecfb2 }
.ev-other   { background:rgba(255,255,255,.05); color:var(--muted) }

/* ════════════════════════════════════════════════════════════
   CHECKOUT
   ════════════════════════════════════════════════════════════ */
.checkout-wrap { max-width:480px; margin:0 auto }
.step-bar { display:flex; align-items:center; gap:0; margin-bottom:28px; position:relative }
.step-bar::before {
  content:''; position:absolute; top:12px; left:16px; right:16px;
  height:1px; background:var(--border2); z-index:0;
}
.step-item { flex:1; text-align:center; position:relative; z-index:1 }
.step-circle {
  width:24px; height:24px; border-radius:50%; margin:0 auto 6px;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--bg3); border:1px solid var(--border2); color:var(--muted);
}
.step-item.done .step-circle { background:var(--green); border-color:var(--green); color:#000 }
.step-item.active .step-circle { background:var(--accent); border-color:var(--accent); color:#fff }
.step-lbl { font-size:11px; color:var(--muted); font-weight:600 }
.step-item.active .step-lbl { color:var(--text) }

.checkout-card {
  background:var(--bg1); border:1px solid var(--border2);
  border-radius:var(--radius); padding:22px;
}
.fee-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:var(--muted) }
.fee-row.total { font-weight:700; color:var(--text); border-top:1px solid var(--border); margin-top:8px; padding-top:12px }

/* ════════════════════════════════════════════════════════════
   SELL PAGE FORM
   ════════════════════════════════════════════════════════════ */
.sell-wrap { max-width:560px; margin:0 auto }
.sell-card { background:var(--bg1); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden }
.sell-hd { padding:15px 18px; border-bottom:1px solid var(--border); font-size:14px; font-weight:700 }
.sell-bd { padding:20px 18px }
.form-lbl { font-size:11px; font-weight:600; color:var(--muted); display:block; margin-bottom:7px; text-transform:uppercase; letter-spacing:.06em }
.form-inp {
  width:100%; height:42px; padding:0 14px;
  background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--radius-sm); font-size:15px; color:var(--text);
  outline:none; transition:.15s;
}
.form-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(120,102,245,.12) }

/* ════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700;
}
.badge-purple { background:rgba(120,102,245,.12); color:var(--accent2); border:1px solid rgba(120,102,245,.2) }
.badge-green  { background:rgba(60,218,100,.08);  color:var(--green)   }
.badge-muted  { background:var(--bg3); color:var(--muted) }

.alert { padding:11px 15px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:13.5px }
.alert-info { background:rgba(120,102,245,.08); border:1px solid rgba(120,102,245,.18); color:var(--accent2) }
.alert-ok   { background:rgba(60,218,100,.07);  border:1px solid rgba(60,218,100,.18);  color:var(--green)  }
.alert-warn { background:rgba(245,166,35,.07);  border:1px solid rgba(245,166,35,.18);  color:var(--amber)  }

.empty { text-align:center; padding:52px 24px; color:var(--muted); grid-column:1/-1 }
.empty p { font-size:15px }
.mono { font-family:ui-monospace,'SF Mono',monospace; letter-spacing:-.01em }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.footer {
  border-top:1px solid var(--border);
  padding:48px 24px 28px; margin-top:40px;
  background:var(--bg1);
}
.footer-inner {
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px;
}
.footer-logo { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; margin-bottom:12px }
.footer-desc { font-size:13px; color:var(--muted); line-height:1.7; max-width:240px }
.footer-hd { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:14px }
.footer a { display:block; font-size:13px; color:var(--muted); margin-bottom:9px; transition:.12s }
.footer a:hover { color:var(--text) }
.footer-bot {
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:var(--muted);
  padding-top:20px; border-top:1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .hero { grid-template-columns:1fr }
  .hero-showcase { display:none }
}
@media (max-width:900px) {
  .exp-layout { grid-template-columns:1fr }
  .sidebar { display:none }
  .asset-layout { grid-template-columns:1fr }
  .asset-img-wrap, .asset-panel { position:static }
  .col-profile { flex-direction:column; align-items:flex-start }
  .footer-inner { grid-template-columns:1fr 1fr }
}
@media (max-width:640px) {
  .nav-search { display:none }
  .nav-links { display:none }
  .grid { grid-template-columns:repeat(2,1fr) }
  .footer-inner { grid-template-columns:1fr }
}