/* ============================================================
   Hoardio — Global Stylesheet
   Shared across all inner pages (funko/*, topps/*, etc.)
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design tokens ── */
:root {
  --bg:              #0a0a0f;
  --bg-card:         #13131d;
  --bg-card-hover:   #1a1a2a;
  --bg-row-alt:      rgba(255, 255, 255, 0.025);
  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(255, 255, 255, 0.15);
  --text-primary:    #f0f0f5;
  --text-secondary:  #8888aa;
  --accent:          #c07828;
  --accent-light:    #f0a840;
  --nav-height:      64px;
  /* Rarity */
  --rarity-common:     #999;
  --rarity-uncommon:   #4caf50;
  --rarity-rare:       #64b5f6;
  --rarity-epic:       #ce93d8;
  --rarity-series:     #ffb74d;
  --rarity-ultra:      #e8ff00;
  --rarity-legendary:  #e93494;
  --rarity-grail:      #faa500;
  --rarity-mythic:     #01ffff;
  --rarity-royalty:    #007deb;
  --rarity-1of1:       #ffd700;
  --rarity-redeemable:         #888;
  --rarity-pack:               #94a3b8;
  --rarity-superrare:          #a78bfa;
  --rarity-epicexclusive:      #fb7185;
  --rarity-eventexclusive:     #22d3ee;
  --rarity-legendaryexclusive: #fbbf24;
}

/* ── Base ── */
html {
  height: 100%;
  scrollbar-gutter: stable; /* reserve scrollbar space on all pages to prevent nav shift */
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}


/* ── Site Banner (injected by nav.js) ── */
.site-banner {
  width: 100%;
  padding: 0.6rem 3rem 0.6rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.site-banner--warning {
  background: rgba(240, 168, 64, 0.12);
  border-bottom: 1px solid rgba(240, 168, 64, 0.35);
  color: #f0a840;
}
.site-banner--info {
  background: rgba(59, 130, 246, 0.12);
  border-bottom: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.site-banner--error {
  background: rgba(239, 68, 68, 0.12);
  border-bottom: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}
.site-banner-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem;
}
.site-banner-close:hover { opacity: 1; }


/* ── Navigation (injected by nav.js) ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--nav-height);
}

.nav-home {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 1rem;
}

.nav-home img {
  height: 36px;
  width: 36px;
  object-fit: contain;
  filter: invert(1);
  transition: opacity 0.2s;
}

.nav-home:hover img { opacity: 0.75; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}

.nav-link {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.nav-link--active {
  color: var(--accent-light);
  background: rgba(192, 120, 40, 0.12);
  border-color: rgba(192, 120, 40, 0.25);
}

/* Hamburger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-left: auto;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s;
}

.nav-burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger--open span:nth-child(2) { opacity: 0; }
.nav-burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-burger--open span { background: var(--text-primary); }

/* Mobile dropdown */
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--border);
  gap: 0.25rem;
}

.nav-mobile .nav-link {
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
}

.nav-mobile--open,
.nav-mobile.open {
  display: flex;
}

@media (max-width: 900px) {
  .nav-links  { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile { display: none; }
  .nav-mobile--open,
  .nav-mobile.open { display: flex; }
}

/* Twitch promo (shared/generic-nav.js, Explore/Inventory only) — sits between
   .nav-links and the wallet controls. .nav-links only ever holds a couple of
   short pill links and doesn't need its own flex:1 anymore on pages that also
   have this block, so the promo takes over that role and gets the full open
   middle of the bar to center itself in, instead of both competing for space. */
.nav-inner--has-promo .nav-links { flex: 0 0 auto; }

.nav-promo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 1px;
  padding: 0.3rem 1rem;
  margin: 0 0.5rem;
  border-radius: 10px;
  border: 1px solid rgba(240, 168, 64, 0.25);
  background: linear-gradient(135deg, rgba(240, 168, 64, 0.08), rgba(192, 120, 40, 0.04));
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
}

.nav-promo:hover {
  border-color: rgba(240, 168, 64, 0.5);
  background: linear-gradient(135deg, rgba(240, 168, 64, 0.14), rgba(192, 120, 40, 0.07));
  transform: translateY(-1px);
}

.nav-promo-line1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.nav-promo-text {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.nav-promo-line2 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-light);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-promo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b3b;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55);
  animation: nav-promo-pulse 1.8s ease-out infinite;
}

.nav-promo-dot.no-motion { animation: none; }

@keyframes nav-promo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55); }
  70%  { box-shadow: 0 0 0 5px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-promo-dot { animation: none; }
}

@media (max-width: 900px) {
  .nav-promo { display: none; }
}

/* Below 900px the nav row has to fit logo + divider + section badge +
   search/cart/profile icons + the wallet button/pill + the burger, all
   flex-shrink:0 — on real phone widths that total overflows and forces the
   whole page to scroll horizontally, with the burger squeezed toward the
   edge. Tighten every fixed gap/margin and drop the "Connect Wallet" text
   (icon-only, matching the other circular nav buttons) to bring it back
   under typical phone viewport widths. */
@media (max-width: 640px) {
  .nav-inner   { padding: 0 0.75rem; gap: 0.35rem; }
  .nav-home    { margin-right: 0.5rem; }
  .nav-home img { height: 30px; width: 30px; }
  .nav-divider { margin: 0 0.35rem 0 0.15rem; }
  .nav-burger  { margin-left: 0.15rem; padding: 0.3rem; }

  /* These buttons' icons are inline SVGs hardcoded at 16x16 (wallet-widget.js,
     global-search.js) — the button circle alone doesn't control the glyph
     size, so it has to be overridden here explicitly to actually look bigger. */
  .nav-cart-btn { width: 34px; height: 34px; }
  .nav-cart-btn svg { width: 20px; height: 20px; }

  .nav-wax-btn    { padding: 8px; gap: 0; }
  #navWaxBtnLabel { display: none; }

  /* The Profile icon moves into the wallet dropdown (under the balance,
     .nav-wax-menu-profile-mobile below) — one less fixed-width item in the
     row means the wallet name below doesn't need to be squeezed nearly as
     hard to avoid overflowing on real phone widths. */
  #navProfileBtn { display: none; }

  .nav-wax-connected-widget { padding: 6px 10px; gap: 6px; }
  .nav-wax-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 400px) {
  .nav-section { display: none; }
}

/* ── Wallet widget (shared/wallet-widget.js), used on every page ── */
.nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 0.5rem 0 0.25rem;
  flex-shrink: 0;
}

/* ── Section badge (Funko/Topps/Wombat/Twitch nav.js) — was previously
   redeclared via a JS-injected <style> tag in each of those four nav.js
   files, which (being injected after this stylesheet loads) always won the
   cascade over this file's own responsive rules for the same selector.
   Centralized here instead so there's only ever one source of truth for
   it. */
.nav-section {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.75rem;
  text-decoration: none;
}

.nav-section:hover { opacity: 0.75; }

.nav-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color 0.15s, background 0.15s;
  /* Only ever applied to <a> tags before (cart/offers/profile icons), which
     carry no default browser chrome — shared/global-search.js's nav icon is
     a <button>, which does, so this class needs its own explicit reset now
     that it's used on both. */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.nav-cart-btn:hover {
  color: var(--accent-light);
  background: rgba(255, 255, 255, 0.06);
}

.nav-cart-badge {
  position: absolute;
  top: -1px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-light);
  color: #0a0a0f;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-main);
}

.nav-wax-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(240, 168, 64, 0.45);
  background: linear-gradient(135deg, rgba(240, 168, 64, 0.18), rgba(192, 120, 40, 0.10));
  color: var(--accent-light);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}

.nav-wax-btn svg { flex-shrink: 0; }

.nav-wax-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(240, 168, 64, 0.3), rgba(192, 120, 40, 0.18));
  border-color: rgba(240, 168, 64, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240, 168, 64, 0.22);
}

.nav-wax-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.nav-wax-btn:disabled { opacity: 0.55; cursor: default; }

.nav-wax-connected-widget {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.14), rgba(74, 222, 128, 0.05));
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.nav-wax-connected-widget:hover {
  border-color: rgba(74, 222, 128, 0.65);
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.07));
}

.nav-wax-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: nav-wax-pulse 2.2s ease-out infinite;
}

@keyframes nav-wax-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.nav-wax-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #4ade80;
  white-space: nowrap;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
}

.nav-wax-name:hover { opacity: 0.8; }

.nav-wax-balance {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-wax-balance:empty { display: none; }
.nav-wax-balance-usd { opacity: 0.75; font-weight: 500; }

/* Mirrors .nav-wax-balance's HTML into the dropdown menu — hidden here on
   desktop since the pill already shows it; swaps places with the pill
   version below 480px so the balance is still one tap away on mobile. */
.nav-wax-menu-balance {
  display: none;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.3rem;
}

/* Standalone nav Profile icon (#navProfileBtn) moves here under the balance
   on mobile, where the row has no room to spare — hidden here on desktop
   since the icon already covers it. Combined-class selector (matching the
   one that re-shows it below) so this reliably beats .nav-wax-menu-item's
   own `display: flex` regardless of the two rules' source order. */
.nav-wax-menu-item.nav-wax-menu-profile-mobile { display: none; }

@media (max-width: 480px) {
  .nav-wax-balance { display: none; }
  .nav-wax-menu-balance:not(:empty) { display: block; }
}

.nav-wax-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.4rem;
  min-width: 195px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nav-wax-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}

.nav-wax-menu-icon { font-size: 0.95em; flex-shrink: 0; width: 1.1em; text-align: center; }

@media (max-width: 640px) {
  .nav-wax-menu-item.nav-wax-menu-profile-mobile { display: flex; }
}
.nav-wax-menu-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--accent-light); }
.nav-wax-menu-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 0.35rem 0.25rem; }
.nav-wax-menu-logout { color: rgba(224, 82, 82, 0.8); }
.nav-wax-menu-logout:hover { background: rgba(224, 82, 82, 0.12); color: #e05252; }

.nav-wax-menu-label {
  padding: 0.5rem 0.8rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.nav-wax-linked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.5rem;
}
.nav-wax-linked-header .nav-wax-menu-label { padding: 0.5rem 0 0.25rem 0.8rem; }
.nav-wax-link-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.nav-wax-link-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: var(--accent-light); }
.nav-wax-link-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.nav-wax-wallet-item .nav-wax-menu-icon { display: inline-flex; align-items: center; justify-content: center; }
.nav-wax-wallet-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.nav-wax-wallet-name { line-height: 1.3; }
.nav-wax-wallet-balance {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-wax-wallet-balance:empty::before { content: '…'; }


/* ── Page layout ── */
.page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Shared content container — used as inner wrapper */
.content {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* Used on full-page tools (trade-analyzer) */
.page-main {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* When .page itself is the max-width container (e.g. redemptions) */
.page.page--centered {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  flex: 1;
}


/* ── Page header ── */
.page-header { margin-bottom: 2rem; }

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
}

.page-title .accent,
.accent { color: var(--accent-light); }

.page-desc,
.page-subtitle {
  color: var(--text-secondary);
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.page-hint {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ── Resource-error status link (shared/tx-error.js) ──
   The RAM/CPU/NET call-to-action appended to an is-error status box's text
   — inherits that box's color so it doesn't need its own error/warning
   palette, just needs to read as clickable. */
.tx-err-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  margin-left: 0.35em;
}
.tx-err-link:hover { opacity: 0.8; }


/* ── Hero (section hub pages) ── */
.hero {
  text-align: center;
  padding: 3.5rem 1.5rem 2.5rem;
}

.hero-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(192, 120, 40, 0.1);
  border: 1px solid rgba(192, 120, 40, 0.2);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.75px;
  line-height: 1.15;
}

.hero h1 span {
  background: linear-gradient(135deg, #f0a840, #c07828);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


/* ── Feature cards (hub pages) ── */
.features {
  padding: 0.5rem 1.5rem 4rem;
  display: flex;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  width: 100%;
  max-width: 1280px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(192, 120, 40, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(192, 120, 40, 0.12);
}

.card-number {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-title { font-size: 1.1rem; font-weight: 700; }

.card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
}

.card-arrow {
  align-self: flex-end;
  color: var(--text-secondary);
  font-size: 1rem;
  transition: transform 0.2s, color 0.2s;
}

.card:hover .card-arrow {
  transform: translate(3px, -3px);
  color: var(--accent-light);
}

/* ── "Coming soon" card — planned tool, no page behind it yet ── */
.card--soon {
  cursor: default;
  opacity: 0.55;
}

.card--soon:hover {
  background: var(--bg-card);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}

.card-soon-tag {
  align-self: flex-end;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}


/* ── Announcements ── */
.announcements {
  padding: 0 1.5rem 4rem;
  display: flex;
  justify-content: center;
}

.announcements-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.announcement {
  background: #111118;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 0.9rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.announcement-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.announcement-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.announcement-link:hover { text-decoration: underline; }


/* ── Section headings ── */
.section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.section-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-count {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}


/* ── Stats grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-top: 4px;
}


/* ── Template price chart (shared/template-price-chart.js) — mounted on
   template.html and asset.html, both scoped to a template's pooled sales
   history. .tpc- prefix keeps it distinct from either host page's own
   local classes. ── */
.tpc-placeholder {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem 1.5rem;
  text-align: center; color: var(--text-secondary);
}
.tpc-usd { color: var(--text-secondary); font-size: 0.85rem; font-weight: 400; }
/* .stat-value's default 1.4rem wraps a "20,804.99 WAX"-style value onto a
   second line inside a ~140px .stat-card column — same fix collection.html/
   template.html apply to their own stats grids. */
.tpc-stats-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.tpc-stats-grid .stat-value { font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpc-chart-wrap { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.5rem; }
.tpc-chart-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.1rem; }
.tpc-toggle-group { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tpc-toggle-btn {
  padding: 0.4rem 0.85rem; border: none; background: none;
  color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.tpc-toggle-btn + .tpc-toggle-btn { border-left: 1px solid var(--border); }
.tpc-toggle-btn:hover { color: var(--text-primary); }
.tpc-toggle-btn.active { background: rgba(240,168,64,0.14); color: var(--accent-light); }
.tpc-chart-canvas-wrap { position: relative; height: 320px; }


/* ── Buttons ── */

/* Primary — gold gradient */
.search-btn,
.lookup-btn,
.bl-list-btn {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  transition: opacity 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.search-btn:hover:not(:disabled),
.lookup-btn:hover:not(:disabled),
.bl-list-btn:hover:not(:disabled) { opacity: 0.85; }

.search-btn:disabled,
.lookup-btn:disabled,
.bl-list-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Secondary — subtle */
.ctrl-btn,
.clear-btn,
.show-more-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

/* Tertiary — amber outline (Load more) */
.load-more-btn,
.bl-loadmore-btn {
  background: rgba(240,168,64,0.08);
  border: 1px solid rgba(240,168,64,0.3);
  color: var(--accent-light);
  border-radius: 8px;
  padding: 0.55rem 1.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.load-more-btn:hover:not(:disabled),
.bl-loadmore-btn:hover:not(:disabled) { background: rgba(240,168,64,0.16); border-color: rgba(240,168,64,0.55); }
.load-more-btn:disabled,
.bl-loadmore-btn:disabled { opacity: 0.45; cursor: default; }

.ctrl-btn:hover,
.clear-btn:hover,
.show-more-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.04);
}

.show-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* ── Form inputs ── */
.search-input,
.filter-select,
.control-select,
.control-input,
.wallet-input,
.drop-select,
.set-selector {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.search-input::placeholder,
.control-input::placeholder,
.wallet-input::placeholder { color: var(--text-secondary); }

.search-input:focus,
.filter-select:focus,
.control-select:focus,
.control-input:focus,
.wallet-input:focus,
.drop-select:focus,
.set-selector:focus { border-color: rgba(192, 120, 40, 0.5); }

.control-select option,
.drop-select option,
.filter-select option { background: #1a1a2a; }

/* Darker bg for inputs sitting inside a card-styled toolbar/panel */
.controls-card .control-select,
.controls-card .control-input,
.mp-controls .control-input,
.mp-controls .filter-select,
.mp-controls .cb-dropdown-btn,
.filter-bar .control-input { background: var(--bg); }

/* Hide native number spinners everywhere so number inputs match text inputs */
.search-input::-webkit-outer-spin-button, .search-input::-webkit-inner-spin-button,
.control-input::-webkit-outer-spin-button, .control-input::-webkit-inner-spin-button,
.wallet-input::-webkit-outer-spin-button, .wallet-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.search-input[type="number"], .control-input[type="number"], .wallet-input[type="number"] {
  -moz-appearance: textfield;
}


/* ── Checkbox / single-select dropdown ── */
.cb-dropdown { position: relative; }
.cb-dropdown-btn {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.6rem 0.9rem;
  color: var(--text-primary); font-size: 0.9rem; font-family: inherit;
  cursor: pointer; transition: border-color 0.2s, color 0.15s;
}
.controls-card .cb-dropdown-btn,
.ex-sidebar .cb-dropdown-btn { background: var(--bg); }
.ex-sidebar .search-input,
.ex-sidebar .filter-select,
.ex-sidebar .control-input,
.explore-toolbar .control-input { background: var(--bg); }
.cb-dropdown-btn:hover,
.cb-dropdown-btn.open { border-color: rgba(192,120,40,0.5); }
.cb-dropdown-btn.has-selection { border-color: rgba(240,168,64,0.45); color: var(--accent-light); padding-right: 2.1rem; }
.cb-dropdown-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cb-arrow { font-size: 0.7rem; opacity: 0.55; transition: transform 0.15s; flex-shrink: 0; }
.cb-dropdown-btn.open .cb-arrow { transform: rotate(180deg); }
.cb-dropdown-btn.has-selection .cb-arrow { display: none; }
/* Clears every checkbox in a multi-select .cb-dropdown directly from the
   closed control — mirrors .cb-combo-clear on the Collection combo. Only
   shown once something's selected (toggled alongside .has-selection in
   refreshCbLabel); replaces the arrow in that state rather than sitting
   next to it, so the reserved padding above only has one icon to fit. */
.cb-dropdown-clear {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-secondary);
  font-size: 0.78rem; cursor: pointer; padding: 0.25rem; line-height: 1;
  border-radius: 4px; transition: color 0.15s;
}
.cb-dropdown-clear:hover { color: var(--accent-light); }
.cb-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: #16161f; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 0.35rem 0;
  min-width: 160px; max-height: 280px; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
/* Some pages toggle visibility via inline style, others via this class */
.cb-panel.open { display: block; }
.cb-panel::-webkit-scrollbar { width: 4px; }
.cb-panel::-webkit-scrollbar-track { background: transparent; }
.cb-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.cb-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.85rem; cursor: pointer;
  font-size: 0.83rem; color: var(--text-primary);
  transition: background 0.1s;
}
.cb-item:hover { background: rgba(255,255,255,0.05); }
.cb-item.active { color: var(--accent-light); }
.cb-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.cb-item input[type=checkbox] {
  accent-color: var(--accent-light); width: 14px; height: 14px;
  flex-shrink: 0; cursor: pointer;
}

/* ── Combobox — a type-to-search input that doubles as the trigger (no
   separate button + nested search box). The "All ..." choice is the input's
   placeholder/empty state, not a row in the list — matches AtomicHub's
   collection picker. Reuses .cb-panel/.cb-item for the dropdown list. ── */
.cb-combo { position: relative; }
.cb-combo-input {
  width: 100%;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.6rem 2.1rem 0.6rem 0.9rem;
  color: var(--text-primary); font-size: 0.9rem; font-family: inherit;
  text-overflow: ellipsis;
  transition: border-color 0.2s;
}
.controls-card .cb-combo-input,
.ex-sidebar .cb-combo-input { background: var(--bg); }
.cb-combo-input::placeholder { color: var(--text-secondary); opacity: 1; }
.cb-combo-input:focus { outline: none; border-color: rgba(192,120,40,0.5); }
.cb-combo.has-selection .cb-combo-input { border-color: rgba(240,168,64,0.45); color: var(--accent-light); }
.cb-combo-clear {
  position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-secondary);
  font-size: 0.8rem; cursor: pointer; padding: 0.25rem; line-height: 1;
  border-radius: 4px; transition: color 0.15s;
}
.cb-combo-clear:hover { color: var(--text-primary); }

/* Searchable variant (long lists, e.g. Collection) — search box pinned above a scrolling item list */
.cb-panel--searchable { padding: 0; }
.cb-panel--searchable.open { display: flex; flex-direction: column; }
.cb-search-wrap { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.cb-search-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.4rem 0.6rem;
  color: var(--text-primary); font-size: 0.82rem; font-family: inherit;
}
.cb-search-input:focus { outline: none; border-color: rgba(192,120,40,0.5); }
.cb-items { overflow-y: auto; max-height: 240px; }
.cb-items::-webkit-scrollbar { width: 4px; }
.cb-items::-webkit-scrollbar-track { background: transparent; }
.cb-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.cb-empty { padding: 0.55rem 0.85rem; font-size: 0.82rem; color: var(--text-secondary); }

/* ── Clear filters button ── */
.clear-filters-btn {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 0.6rem 0.9rem;
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.clear-filters-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--text-primary); }


/* ── Rarity badges ── */
.rarity-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.rarity-mythic {
  color: var(--rarity-mythic);
  background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(90deg, #01ffff, #9926c1);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.rarity-ultra     { color: var(--rarity-ultra);     border-color: var(--rarity-ultra);     background: rgba(232, 255,   0, 0.08); }
.rarity-grail     { color: var(--rarity-grail);     border-color: var(--rarity-grail);     background: rgba(250, 165,   0, 0.12); }
.rarity-legendary { color: var(--rarity-legendary); border-color: var(--rarity-legendary); background: rgba(233,  52, 148, 0.12); }
.rarity-royalty   { color: var(--rarity-royalty);   border-color: var(--rarity-royalty);   background: rgba(  0, 125, 235, 0.12); }
.rarity-epic      { color: var(--rarity-epic);      border-color: var(--rarity-epic);      background: rgba(206, 147, 216, 0.12); }
.rarity-series    { color: var(--rarity-series);    border-color: var(--rarity-series);    background: rgba(255, 183,  77, 0.10); }
.rarity-rare      { color: var(--rarity-rare);      border-color: var(--rarity-rare);      background: rgba(100, 181, 246, 0.10); }
.rarity-uncommon  { color: var(--rarity-uncommon);  border-color: var(--rarity-uncommon);  background: rgba( 76, 175,  80, 0.10); }
.rarity-common    { color: var(--rarity-common);    border-color: var(--rarity-common);    background: rgba(153, 153, 153, 0.08); }
.rarity-1of1      { color: var(--rarity-1of1);      border-color: var(--rarity-1of1);      background: rgba(255, 215,   0, 0.10); }
.rarity-redeemable         { color: var(--rarity-redeemable);         border-color: var(--rarity-redeemable);         background: rgba(136, 136, 136, 0.08); }
.rarity-pack               { color: var(--rarity-pack);               border-color: var(--rarity-pack);               background: rgba(148, 163, 184, 0.10); }
.rarity-superrare          { color: var(--rarity-superrare);          border-color: var(--rarity-superrare);          background: rgba(167, 139, 250, 0.12); }
.rarity-epicexclusive      { color: var(--rarity-epicexclusive);      border-color: var(--rarity-epicexclusive);      background: rgba(251, 113, 133, 0.12); }
.rarity-eventexclusive     { color: var(--rarity-eventexclusive);     border-color: var(--rarity-eventexclusive);     background: rgba( 34, 211, 238, 0.12); }
.rarity-legendaryexclusive { color: var(--rarity-legendaryexclusive); border-color: var(--rarity-legendaryexclusive); background: rgba(251, 191,  36, 0.12); }


/* ── Rarity pills ── */
.rarity-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.r-common     { color: #999;    border-color: rgba(153, 153, 153, 0.35); background: rgba(153, 153, 153, 0.08); }
.r-uncommon   { color: #4caf50; border-color: rgba( 76, 175,  80, 0.35); background: rgba( 76, 175,  80, 0.08); }
.r-rare       { color: #64b5f6; border-color: rgba(100, 181, 246, 0.35); background: rgba(100, 181, 246, 0.08); }
.r-epic       { color: #ce93d8; border-color: rgba(206, 147, 216, 0.35); background: rgba(206, 147, 216, 0.08); }
.r-series     { color: #ffb74d; border-color: rgba(255, 183,  77, 0.35); background: rgba(255, 183,  77, 0.08); }
.r-ultra      { color: #e8ff00; border-color: rgba(232, 255,   0, 0.35); background: rgba(232, 255,   0, 0.08); }
.r-legendary  { color: #e93494; border-color: rgba(233,  52, 148, 0.35); background: rgba(233,  52, 148, 0.08); }
.r-grail      { color: #faa500; border-color: rgba(250, 165,   0, 0.35); background: rgba(250, 165,   0, 0.08); }
.r-mythic     { color: #01ffff; border-color: rgba(  1, 255, 255, 0.35); background: rgba(  1, 255, 255, 0.08); }
.r-royalty    { color: #007deb; border-color: rgba(  0, 125, 235, 0.35); background: rgba(  0, 125, 235, 0.08); }
.r-1of1       { color: #ffd700; border-color: rgba(255, 215,   0, 0.35); background: rgba(255, 215,   0, 0.08); }
.r-redeemable { color: #888;    border-color: rgba(136, 136, 136, 0.25); background: rgba(136, 136, 136, 0.06); }
.r-pack       { color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.08); }

/* ── Asset info popup (shared/asset-popup.js) — hover tooltip + click-
   persisted popup, used by inventory.html and explore.html's card grids.
   Sized to match collection.html's template hover tooltip (.tpl-tooltip
   used the same class names before this consolidation — a template's full
   field list needs the room, and per-asset popups grew enough fields
   (Attributes/Supply/You/Backed tokens/Owner) to want the same size). ── */
.hover-tooltip {
  position: fixed; z-index: 300; width: 360px; max-height: min(640px, 80vh); overflow-y: auto;
  background: #16161f; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 0.85rem 1rem;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  font-size: 0.78rem;
}
/* No real hover on touch devices — without this a tap can leave the
   tooltip stuck open with nothing to dismiss it (it's pointer-events:none,
   so it can't even absorb its own dismissing tap). */
@media (hover: none) {
  .hover-tooltip { display: none !important; }
}
.info-popup {
  position: fixed; z-index: 301; width: 360px; max-height: min(640px, 80vh); overflow-y: auto;
  background: #16161f; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 0.9rem 1rem 0.85rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65);
  font-size: 0.78rem;
}
.info-popup-close {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 1rem; line-height: 1;
  /* Visual glyph stays small, but the tap target is bumped to ~44px (Apple/
     Google's minimum touch-target size) via padding + a matching negative
     margin so the header layout doesn't visibly shift. */
  padding: 14px; margin: -14px -14px -14px 0;
  flex-shrink: 0; transition: color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.info-popup-close:hover { color: var(--text-primary); }
.tt-section { display: flex; flex-direction: column; gap: 0.18rem; }
.tt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.tt-label { color: var(--text-secondary); }
.tt-val {
  font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums;
  text-align: right; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-val--wrap { white-space: normal; text-align: left; font-weight: 400; max-width: none; }
.tt-val-copiable { display: inline-flex; align-items: center; gap: 4px; }
.copy-btn {
  background: none; border: none; padding: 0 1px; cursor: pointer;
  color: var(--text-secondary); font-size: 0.72rem; line-height: 1;
  opacity: 0.55; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; vertical-align: middle;
}
.copy-btn:hover { opacity: 1; color: var(--accent-light); }
.copy-btn.copied { color: #4ade80; opacity: 1; }
.tt-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.6rem 0; }
.tt-heading {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-secondary); opacity: 0.55; margin-bottom: 0.3rem;
}
.tt-red    { color: #f87171; }
.tt-purple { color: #a78bfa; }
.tt-orange { color: var(--accent-light); }


/* ── Image lightbox (shared/image-lightbox.js) — click-to-fullscreen
   viewer for a page's main asset image/video, used by asset.html/
   template.html/sale.html's .tpl-main-img-wrap. ── */
.img-lightbox-zoomable { cursor: zoom-in; position: relative; }
.img-lightbox-zoomable::after {
  content: '⤢'; position: absolute; bottom: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.img-lightbox-zoomable:hover::after { opacity: 1; }
@media (hover: none) {
  /* No hover on touch devices — keep the hint visible instead of never showing */
  .img-lightbox-zoomable::after { opacity: 0.85; }
}
.img-lightbox-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem;
}
.img-lightbox-overlay.open { display: flex; }
.img-lightbox-body { max-width: 100%; max-height: 100%; }
.img-lightbox-body img, .img-lightbox-body video {
  display: block; max-width: 100%; max-height: calc(100vh - 5rem);
  object-fit: contain; border-radius: 8px; margin: 0 auto;
}
.img-lightbox-close {
  position: fixed; top: 1.1rem; right: 1.25rem; z-index: 501;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.2); }


/* ── Make Offer popup (shared/make-offer-modal.js) — creates an
   AtomicMarket buy offer, on a specific asset or a whole template. Used by
   sale.html, asset.html, template.html. Namespaced under .mo- (not the
   .modal- / .listing-modal names explore.html/inventory.html each already
   define locally and independently for their own edit-listing modal) so
   this can load on every page without any risk of colliding with those. ── */
.mo-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.mo-panel {
  width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.mo-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
}
.mo-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.mo-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0.25rem; line-height: 1; border-radius: 4px;
  transition: color 0.15s;
}
.mo-close:hover { color: var(--text-primary); }
.mo-body { padding: 1.1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

.mo-toggle {
  display: flex; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-bottom: 0.25rem;
}
.mo-toggle-btn {
  flex: 1; padding: 0.5rem 0.5rem; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.mo-toggle-btn + .mo-toggle-btn { border-left: 1px solid var(--border); }
.mo-toggle-btn.active { background: rgba(240,168,64,0.14); color: var(--accent-light); }
.mo-toggle-btn:hover:not(.active) { color: var(--text-primary); }

.mo-media {
  width: 140px; height: 140px; margin: 0 auto;
  border-radius: 12px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mo-media img, .mo-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mo-media-ph { color: var(--text-secondary); font-size: 1.5rem; }
.mo-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); text-align: center; margin-top: 0.4rem; }
.mo-meta { font-size: 0.8rem; color: var(--text-secondary); text-align: center; margin-bottom: 0.2rem; }

.mo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.35rem 0.15rem; font-size: 0.85rem;
}
.mo-row-label { color: var(--text-secondary); }
.mo-row-val { font-weight: 600; color: var(--text-primary); text-align: right; }
.mo-usd { color: var(--text-secondary); font-size: 0.78rem; font-weight: 400; }
.mo-row--price { padding: 0.35rem 0.15rem; }
.mo-row--price .mo-price-row { width: 180px; flex-shrink: 0; }
.mo-price-row {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.35rem 0.6rem;
}
.mo-price-row:focus-within { border-color: rgba(240,168,64,0.5); }
.mo-input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text-primary);
  font-size: 0.9rem; font-weight: 600; font-family: inherit; text-align: right;
}
.mo-input:focus { outline: none; }
.mo-input::-webkit-outer-spin-button, .mo-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mo-input[type=number] { -moz-appearance: textfield; }
.mo-input--num { text-align: center; }
.mo-input--text { text-align: left; font-weight: 400; width: 100%; }
.mo-unit { font-size: 0.78rem; color: var(--text-secondary); flex-shrink: 0; }
.mo-total { border-top: 1px solid var(--border); margin-top: 0.15rem; padding-top: 0.5rem; }
.mo-total .mo-row-val { color: var(--accent-light); }
.mo-hint { font-size: 0.72rem; color: var(--text-secondary); text-align: right; margin-top: -0.3rem; }
/* Same signature-count transparency note as inventory.html's bulk-action
   modal (.bulk-batch-note) — identical copy/format ("1 wallet signature
   per N items"), same accent color, same right-aligned placement. */
.mo-batch-note { font-size: 0.72rem; font-weight: 600; color: var(--accent-light); text-align: right; margin-top: 0.3rem; }

.mo-field { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.35rem 0.15rem; }
.mo-memo-box {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.7rem;
}
.mo-memo-box:focus-within { border-color: rgba(240,168,64,0.5); }

.mo-msg { padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.82rem; line-height: 1.4; }
.mo-msg--error   { background: rgba(224,82,82,0.12); color: #f87171; border: 1px solid rgba(224,82,82,0.25); }
.mo-msg--success { background: rgba(74,222,128,0.1);  color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.mo-msg .tx-err-link { color: inherit; font-weight: 600; text-decoration: underline; }

/* Terminal outcome (#moResult) — same treatment as inventory.html's bulk-
   action modal (.bl-progress-msg): the colored .mo-msg block above becomes
   a left-aligned row with its own Close button, so the result reads as
   "done" rather than blending into the rest of the modal. */
.mo-result {
  margin-top: 0.6rem; display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; text-align: left;
}
.mo-result-text { flex: 1; }
.mo-result-close {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.9rem;
  border-radius: 6px; border: 1px solid currentColor; background: transparent;
  color: inherit; cursor: pointer; transition: background 0.15s; font-family: inherit;
}
.mo-result-close:hover { background: rgba(255,255,255,0.1); }

.mo-actions { display: flex; gap: 0.65rem; margin-top: 0.5rem; }
.mo-btn {
  flex: 1; padding: 0.65rem; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; font-family: inherit; box-sizing: border-box; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.mo-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mo-btn--cancel {
  background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text-secondary);
}
.mo-btn--cancel:not(:disabled):hover { background: rgba(255,255,255,0.09); color: var(--text-primary); }
.mo-btn--primary {
  background: rgba(240,168,64,0.16); border-color: rgba(240,168,64,0.4); color: var(--accent-light);
}
.mo-btn--primary:not(:disabled):hover { background: rgba(240,168,64,0.26); border-color: rgba(240,168,64,0.65); }
.mo-note { font-size: 0.72rem; color: var(--text-secondary); text-align: center; margin-top: 0.35rem; line-height: 1.4; }


/* ── Accept Offer popup (shared/accept-offer-modal.js) — fee breakdown
   confirmation shown before accepting an AtomicMarket buy offer. Same
   overlay/panel/header/actions visual language as .mo- (make-offer-modal.js)
   but its own namespace, same reasoning as .mo- itself: never risk
   colliding with inventory.html's own page-local, differently-valued fee
   breakdown styles (.fee-details etc, not shared). ── */
.ao-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ao-panel {
  width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.ao-loading { padding: 2rem; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
.ao-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
}
.ao-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.ao-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0.25rem; line-height: 1; border-radius: 4px;
  transition: color 0.15s;
}
.ao-close:hover { color: var(--text-primary); }
.ao-back {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1rem; padding: 0.25rem 0.4rem; line-height: 1; border-radius: 4px;
}
.ao-back:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.ao-back:disabled { opacity: 0.4; cursor: not-allowed; }
.ao-body { padding: 1.1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ao-media {
  width: 110px; height: 110px; margin: 0 auto;
  border-radius: 12px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ao-media img, .ao-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ao-media-ph { color: var(--text-secondary); font-size: 1.4rem; }
.ao-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); text-align: center; margin-top: 0.3rem; }
.ao-meta { font-size: 0.8rem; color: var(--text-secondary); text-align: center; margin-bottom: 0.2rem; }
.ao-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0.15rem; font-size: 0.85rem; }
.ao-row-label { color: var(--text-secondary); }
.ao-row-val { font-weight: 600; color: var(--text-primary); }
/* Buyer row's wallet-link — scoped here rather than relying on the host
   page's own .wallet-link rule, since buy-offers.html (unlike inventory.html
   etc.) never defined one and the link fell back to the browser's default
   purple/blue instead of the page's text color. */
.ao-row-val a { color: inherit; text-decoration: none; }
.ao-row-val a:hover { text-decoration: underline; }
.ao-row--total { border-top: 1px solid var(--border); margin-top: 0.15rem; padding-top: 0.6rem; }
.ao-receive { color: #4ade80; font-size: 1.05rem; font-weight: 700; }

.ao-fee-details { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ao-fee-details summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.85rem; cursor: pointer; list-style: none;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); user-select: none;
}
.ao-fee-details summary::-webkit-details-marker { display: none; }
.ao-fee-details summary:hover { color: var(--text-primary); }
.ao-fee-arrow { font-size: 1rem; transition: transform 0.2s; opacity: 0.6; }
.ao-fee-details[open] .ao-fee-arrow { transform: rotate(180deg); }
.ao-fee-items { padding: 0.6rem 0.85rem 0.65rem; display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid var(--border); }
.ao-fee-item { display: flex; gap: 0.65rem; align-items: flex-start; }
.ao-fee-item-pct { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); min-width: 3.2rem; flex-shrink: 0; }
.ao-fee-item-info { display: flex; flex-direction: column; gap: 0.1rem; }
.ao-fee-item-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.ao-fee-item-desc { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.35; }
.ao-fee-unavailable { font-size: 0.76rem; color: var(--text-secondary); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.75rem; line-height: 1.4; }

.ao-msg { font-size: 0.8rem; border-radius: 6px; padding: 0.55rem 0.8rem; text-align: center; }
.ao-msg--error   { background: rgba(224,82,82,0.12); color: #f87171; border: 1px solid rgba(224,82,82,0.25); }
.ao-msg--success { background: rgba(74,222,128,0.1);  color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }

.ao-actions { display: flex; gap: 0.65rem; margin-top: 0.3rem; }
.ao-btn {
  flex: 1; padding: 0.65rem; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; font-family: inherit; box-sizing: border-box; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ao-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ao-btn--cancel { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text-secondary); }
.ao-btn--cancel:hover { background: rgba(255,255,255,0.09); color: var(--text-primary); }
.ao-btn--primary { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.4); color: #4ade80; }
.ao-btn--primary:hover { background: rgba(74,222,128,0.22); border-color: #4ade80; }


/* ── Global Search popup (shared/global-search.js) — sitewide magnifying-
   glass icon in the nav that opens a quick Collection/Wallet lookup, so
   getting to a collection or wallet page doesn't require knowing the URL
   scheme (a real pain point on mobile). Own gs- namespace, same overlay/
   panel visual language as .mo-/.ao- but wider to fit a results list. ── */
.gs-overlay {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 1rem;
}
.gs-panel {
  width: 480px; max-width: 100%; max-height: 85vh; margin-top: 8vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.gs-header { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1rem 0.75rem; }
.gs-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.55rem 0.75rem;
}
.gs-input-wrap:focus-within { border-color: rgba(240,168,64,0.5); }
.gs-input-icon { color: var(--text-secondary); flex-shrink: 0; }
.gs-input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text-primary);
  font-size: 0.92rem; font-family: inherit;
}
.gs-input:focus { outline: none; }
.gs-input::placeholder { color: var(--text-secondary); opacity: 1; }
.gs-clear {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0.1rem; flex-shrink: 0;
}
.gs-clear:hover { color: var(--text-primary); }
.gs-close {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; padding: 0.25rem; line-height: 1; border-radius: 4px; flex-shrink: 0;
  transition: color 0.15s;
}
.gs-close:hover { color: var(--text-primary); }

.gs-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 1rem; gap: 1.25rem; }
.gs-tab {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-secondary); font-size: 0.82rem; font-weight: 700;
  padding: 0.6rem 0.1rem 0.65rem; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.gs-tab:hover { color: var(--text-primary); }
.gs-tab.active { color: var(--accent-light); border-color: var(--accent-light); }

.gs-body { padding: 0.75rem 1rem 1.1rem; overflow-y: auto; min-height: 180px; }
.gs-hint { color: var(--text-secondary); font-size: 0.85rem; padding: 1.5rem 0.5rem; text-align: center; }

/* .gs-result rows come in two shapes: a plain single-link row (recent
   wallets — the whole row is one destination) and a split row (collection
   results/recents — the row itself goes to the collection page, but a
   separate .gs-result-action icon goes to the marketplace instead). Hover
   feedback lives on .gs-result-main (present in both shapes), never on
   .gs-result itself — CSS :hover fires for an ancestor whenever ANY
   descendant is hovered, so a hover style on .gs-result would highlight
   the whole row even while hovering .gs-result-action, making the icon
   read as part of the same single link instead of its own separate one. */
.gs-result { display: flex; align-items: center; padding: 0.15rem 0.4rem 0.15rem 0.15rem; border-radius: 10px; }
.gs-result-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.35rem; border-radius: 8px; cursor: pointer; transition: background 0.15s;
}
.gs-result-main:hover { background: rgba(255,255,255,0.05); }
/* Fixed width, shared with .gs-col-head-action below, so the "Explore"
   button it wraps sits centered at the exact same x-position as the
   "Marketplace" header label above it — a column sized just to fit a 30px
   icon would land under the middle of that (much wider) word instead of
   staying centered under it, since the two columns would otherwise be
   different widths. */
.gs-result-action-col {
  width: 96px; flex-shrink: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
/* Own fixed-width column (always reserved — see .gs-col-head-remove-spacer
   and collectionRowHtml's always-present wrapper div — even when it's
   empty for live results) so this never eats into .gs-result-action-col's
   width and pulls "Explore" off-center under the Marketplace header. */
.gs-result-remove-col { width: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.gs-result-remove {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0.25rem;
  border-radius: 4px; flex-shrink: 0; transition: color 0.15s, background 0.15s;
}
.gs-result-remove:hover { color: #f87171; background: rgba(224,82,82,0.1); }
.gs-result-img, .gs-result-ph {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  object-fit: cover;
}
.gs-result-ph--wallet { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.gs-recent-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 0.4rem 0.5rem; font-size: 0.7rem; font-weight: 700;
  color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase;
}
.gs-recent-clear {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text-secondary); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: none; padding: 0.1rem 0.3rem;
  transition: color 0.15s;
}
.gs-recent-clear:hover { color: var(--accent-light); }
.gs-col-head {
  display: flex; align-items: center;
  padding: 0.1rem 0.4rem 0.35rem 0.15rem;
  font-size: 0.64rem; font-weight: 700; color: var(--text-secondary);
  letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65;
}
.gs-col-head-main { flex: 1; }
.gs-col-head-action { width: 96px; flex-shrink: 0; text-align: center; }
.gs-col-head-remove-spacer { width: 32px; flex-shrink: 0; }
.gs-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.gs-result-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-slug { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-action {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.3rem 0.85rem; border-radius: 999px; flex-shrink: 0;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-secondary); border: 1px solid var(--border);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.gs-result-action:hover { color: var(--accent-light); background: rgba(240,168,64,0.12); border-color: rgba(240,168,64,0.4); }

.gs-wallet-status { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.75rem 0.5rem; text-align: center; }
.gs-wallet-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gs-wallet-icon--ok   { background: rgba(74,222,128,0.14); color: #4ade80; }
.gs-wallet-icon--err  { background: rgba(224,82,82,0.12); color: #f87171; }
.gs-wallet-msg { font-size: 0.85rem; color: var(--text-primary); }
.gs-wallet-msg b { color: var(--accent-light); }
.gs-wallet-sub { font-size: 0.76rem; color: var(--text-secondary); }
.gs-wallet-go {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem;
  padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: rgba(240,168,64,0.16); border: 1px solid rgba(240,168,64,0.4); color: var(--accent-light);
  cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.gs-wallet-go:hover { background: rgba(240,168,64,0.26); border-color: rgba(240,168,64,0.65); }
.gs-spin {
  width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border);
  border-top-color: var(--accent-light); animation: spin 0.8s linear infinite;
}

@media (max-width: 540px) {
  .gs-overlay { padding: 0.5rem; align-items: flex-start; }
  .gs-panel { margin-top: 4vh; max-height: 90vh; }
}


/* ── Burned-asset overlay — instantly recognizable without opening the
   asset page. Add the `burned-thumb` class to any thumbnail wrapper
   that already holds an <img>/<video> — position:relative is set here,
   no per-page setup needed. Used by explore.html's Sales History,
   inventory-activity.html's Purchases/Sales/Transfers, and
   template.html's asset grid — edit once here and every page picks it
   up. img/video dim via filter (not opacity, which would also fade the
   flame layered on top); the flame sits in its own ::after so it stays
   at full brightness/color regardless of the filter.

   Flame art: images/burnedasset.png (user-supplied). To try a different
   image, just overwrite this same file — no code change needed as long
   as the filename stays burnedasset.png. The earlier hand-drawn SVG
   outline is preserved at commit c5e5480 if ever needed again. ── */
.burned-thumb { position: relative; }
.burned-thumb img, .burned-thumb video { filter: brightness(0.55) saturate(0.75); }
.burned-thumb::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  height: 50%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  background: url("../images/burnedasset.png") no-repeat center / contain;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.85)) drop-shadow(0 0 4px rgba(0,0,0,0.6));
  pointer-events: none;
}


/* ── Table base ── */
.table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* Generic shared table defaults used across multiple pages */
.table-wrap table,
table.shared-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.table-wrap table thead th,
table.shared-table thead th {
  text-align: left;
  padding: 9px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table-wrap table thead th.col-r,
table.shared-table thead th.col-r { text-align: right; }

.table-wrap table tbody tr,
table.shared-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}

.table-wrap table tbody tr:last-child,
table.shared-table tbody tr:last-child { border-bottom: none; }

.table-wrap table tbody tr:hover,
table.shared-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }

.table-wrap table tbody td,
table.shared-table tbody td {
  padding: 9px 14px;
  color: var(--text-primary);
  vertical-align: middle;
}

.table-wrap table tbody td.col-r,
table.shared-table tbody td.col-r {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}


/* ── Back link ── */
.back-link {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s;
  margin-bottom: 0.2rem;
}
.back-link:hover { color: var(--accent-light); }


/* ── No data / empty states ── */
.no-data {
  padding: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  text-align: center;
}

.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.state {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.state-error { color: #e74c3c; }


/* ── Loading spinner ── */
.status-wrap {
  text-align: center;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent-light);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.status-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
}


/* ── Footer ── */
footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 0.85rem;
}

.footer-socials a {
  display: inline-flex;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.footer-socials a:hover {
  color: var(--accent-light);
}

.footer-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-donate {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
  text-decoration: none;
}


/* ── Responsive ── */
@media (max-width: 540px) {
  .grid { grid-template-columns: 1fr; }
  .hero { padding: 2.5rem 1.25rem 2rem; }
  .content,
  .page-main { padding: 1.75rem 0.75rem 3rem; }
}

@media (min-width: 541px) and (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* iOS Safari auto-zooms the page on focus for any text-entry field under
   16px, then often fails to zoom back out cleanly — leaving the page
   drifted/scrollable horizontally. Force every real text-entry element up
   to that threshold on mobile only (desktop's denser input styling is
   untouched); checkbox/radio/range/file inputs don't show a keyboard so
   they're excluded. Placed last so it reliably wins the cascade over the
   input classes declared earlier in this file. */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* .nav-links loses its flex:1 entirely (display:none) at 900px — see the
   rule near the top of this file — so nothing pulls the trailing icon
   cluster (cart/offers/profile/wallet/search, inserted by shared/
   wallet-widget.js and shared/global-search.js right before .nav-burger)
   to the right anymore below that width, phone and tablet (e.g. iPad
   Mini, ~768px) alike. #navCartBtn is always the first element of that
   cluster — shared/wallet-widget.js creates it unconditionally and it's
   never itself hidden (unlike the offers/buy-offers/profile icons next to
   it, which only show once logged in), and every nav.js on the site now
   awaits the wallet mount before the search-icon mount, so it always
   lands before #navSearchBtn too. margin-left: auto on it alone pushes
   the whole cluster (and the burger after it) flush right, while
   whatever comes before it — logo, divider, and on Funko/Topps/Wombat/
   Twitch pages the .nav-section badge — stays exactly where it already
   sits. (An earlier version of this rule tried to target .nav-divider/
   .nav-section directly with a `:has()` sibling check instead; dropped
   because :has() isn't supported on pre-2023 Safari/iPadOS, which
   silently dropped the whole rule and broke flush-right alignment
   sitewide on those devices — this #navCartBtn version needs no relational
   selector at all.) Placed here (not with the other rules near the top of
   this file) because #navCartBtn's own unconditional styling is declared
   further down for the wallet widget — same specificity, later source
   order, so an earlier same-file media-query override would silently lose
   regardless of viewport. Needs to come after that rule to actually take
   effect. */
@media (max-width: 900px) {
  #navCartBtn { margin-left: auto; }
}