/* =============================================================================
   nftlanes.css — the NFTs-tab cross-chain board (SOL / ETH top-100). Scoped
   .nl-*; reuses the shop's .card / .c-* grid classes for visual consistency.
   ========================================================================== */

.nl-toggle{ display:inline-flex; gap:8px; margin-top:12px; }
.nl-chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hairline-2); background:var(--panel); color:var(--ink-mid); border-radius:999px; padding:8px 14px; font-weight:800; font-size:13px; }
.nl-chip[aria-pressed="true"]{ background:var(--p400); color:var(--on-accent); border-color:transparent; }
.nl-chip:hover{ color:var(--ink-hi); }
.nl-chip[aria-pressed="true"]:hover{ color:var(--on-accent); }
.nl-chip-tag{ font-size:10px; font-weight:900; letter-spacing:.06em; opacity:.7; }

/* #nftsGrid has no grid rule of its own (the .view-grid rules are id-scoped to
   #grid/#hotdealsGrid/etc.), so lay it out here. :not([hidden]) keeps it hidden
   when the tab is inactive (id specificity would otherwise beat [hidden]). */
#nftsGrid:not([hidden]){ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; align-items:start; margin-top:14px; }
@media (max-width:640px){ #nftsGrid:not([hidden]){ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.nl-load{ grid-column:1/-1; padding:48px 12px; text-align:center; color:var(--ink-lo); font-size:14px; }

.nl-card{ position:relative; }
.nl-art{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.nl-icon{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nl-mono{ font-size:38px; font-weight:900; color:var(--p400); opacity:.85; }
.nl-noart{ font-size:40px; color:var(--ink-faint); }
.nl-rank{ position:absolute; top:8px; left:8px; background:rgba(4,8,14,.72); color:var(--ink-hi); font-size:11px; font-weight:800; padding:3px 7px; border-radius:8px; backdrop-filter:blur(3px); font-variant-numeric:tabular-nums; }

.nl-stat{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.nl-holders{ color:var(--ink-mid); font-size:12.5px; }
.nl-holders b{ color:var(--ink-hi); font-weight:800; font-variant-numeric:tabular-nums; }
.nl-risk{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:999px; }
.nl-risk.low{ background:rgba(59,224,138,.14); color:var(--gain); }
.nl-risk.medium,.nl-risk.med{ background:rgba(242,166,25,.16); color:var(--sweep); }
.nl-risk.high{ background:rgba(242,84,91,.16); color:var(--loss); }

.nl-conc{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.nl-conc-bar{ flex:1; height:5px; border-radius:3px; background:var(--well); overflow:hidden; }
.nl-conc-fill{ height:100%; border-radius:3px; background:linear-gradient(90deg, var(--p300), var(--p500)); }
.nl-conc-k{ font-size:10.5px; color:var(--ink-lo); white-space:nowrap; font-variant-numeric:tabular-nums; }