/* ═══════════════════════════════════════════════
   HEATSEEKER — Tool-specific styles
   Extends bonfire.css (tokens, nav, cursor, mobile menu)
   ═══════════════════════════════════════════════ */

/* Heatseeker-only design tokens not covered by bonfire.css's shared
   token set. --overlay-text/-dim are intentionally fixed (don't flip
   with light/dark theme) for text sitting on overlays that stay dark
   regardless of site theme, like the card-hover trait tooltip —
   using --text/--text-3 there was a bug: those flip to near-black in
   light mode, going illegible against a background that stays dark
   in both themes. */
:root {
  --overlay-text: #F2EBE0;
  --overlay-text-dim: #B0A090;
}

/* Heatseeker is a full-viewport data app rather than a scrolling
   document page, so the body itself needs to be a fixed-height
   flex column with the toolbar/table splitting the space below
   the shared Bonfire nav (see STICKY HEADER GROUP at the bottom of
   this file for how the nav itself is folded into that layout). */
body {
  overflow: hidden;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════ */
#hs-header {
  flex-shrink: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border-fire);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 500;
}

/* Tool logo (sits inside the toolbar, below the shared site nav) */
.hs-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.hs-logo-flame {
  width: 28px; height: 28px;
  position: relative;
}
.hs-logo-flame svg { width: 100%; height: 100%; }
.hs-logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hs-logo-text em { color: var(--fire); font-style: normal; }

/* Collection select */
.hs-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 320px;
}
.hs-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
select#collectionSelect {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border-fire);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
select#collectionSelect:focus { border-color: var(--fire); }
select#collectionSelect option { background: var(--bg-3); }

/* Icon button (shared: refresh collection, refresh listings, settings) */
.hs-icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-2);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.hs-icon-btn:hover { color: var(--fire); border-color: var(--border-fire); background: var(--fire-glow-sm); }
.hs-icon-btn svg { width: 14px; height: 14px; }

/* View toggle */
.hs-view-toggle {
  display: flex; gap: 2px;
  background: var(--bg-3); border-radius: var(--radius-sm);
  padding: 2px;
  flex-shrink: 0;
}
.hs-view-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 4px 8px;
  border-radius: 4px; font-size: 0.8rem;
  transition: all var(--transition);
  display: flex; align-items: center; gap: 4px;
}
.hs-view-btn.active { background: var(--bg-4); color: var(--fire); }
.hs-view-btn:hover:not(.active) { color: var(--text-2); }

/* Filter toggle */
.hs-filter-toggle {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
  cursor: pointer; user-select: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
}
.hs-filter-toggle:hover { color: var(--fire); border-color: var(--border-fire); background: var(--fire-glow-sm); }
.hs-filter-toggle.active { color: var(--fire); border-color: var(--border-fire); background: var(--fire-glow-sm); }
#filterIconDot {
  width: 6px; height: 6px;
  background: var(--text-3);
  border-radius: 50%;
  transition: background var(--transition);
  flex-shrink: 0;
}
.hs-filter-toggle.active #filterIconDot { background: var(--fire); animation: pulse 2s ease-in-out infinite; }

/* Search */
.hs-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 230px;
}
.hs-search-wrap input {
  width: 100%;
  padding: 6px 28px 6px 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  outline: none;
  transition: border-color var(--transition);
}
.hs-search-wrap input:focus { border-color: var(--border-fire); }
.hs-search-wrap input::placeholder { color: var(--text-3); }
.hs-search-clear {
  position: absolute; right: 8px;
  cursor: pointer; color: var(--text-3);
  font-size: 0.9rem; display: none;
  line-height: 1; user-select: none;
}
.hs-search-clear:hover { color: var(--fire); }

/* Stats badge */
#hs-stats {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-3);
  white-space: nowrap;
  letter-spacing: 0.06em;
}

/* Push the Tools/settings button to the right when there's room */
.hs-toolbar-spacer { flex: 1 1 auto; }

@media (max-width: 768px) {
  #hs-header { padding: 8px 16px; gap: 8px; }
  .hs-select-wrap { flex-basis: 100%; max-width: none; order: 1; }
  .hs-view-toggle, .hs-filter-toggle, .hs-listed-row, .hs-settings-wrap { order: 2; }
  .hs-search-wrap { order: 3; flex: 1 1 auto; max-width: none; }
  #hs-stats { display: none; }
  .hs-toolbar-spacer { display: none; }
}

/* ═══════════════════════════════════════════
   SETTINGS / TOOLS PANEL
   (consolidates OpenSea key, RPC, listed-only,
    refresh-listings, and wallet filter)
═══════════════════════════════════════════ */
.hs-settings-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.hs-settings-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--text-2); cursor: pointer;
}
.hs-settings-btn:hover { border-color: var(--border-fire); color: var(--text); }
.hs-settings-btn svg { width: 14px; height: 14px; }
.hs-settings-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 320px; max-width: calc(100vw - 32px);
  max-height: 80dvh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border-fire);
  border-radius: var(--radius-md); padding: 14px;
  box-shadow: 0 12px 32px var(--shadow);
  display: none; z-index: 1000;
}
.hs-settings-panel.open { display: block; }
.hs-settings-section { margin-bottom: 16px; }
.hs-settings-section:last-child { margin-bottom: 0; }
.hs-settings-label {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px; display: block;
}
.hs-settings-divider { height: 1px; background: var(--border); margin: 12px 0; }
.hs-settings-rpc-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-2);
  margin-bottom: 8px;
}
.hs-settings-empty {
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-3);
  padding: 8px 0; line-height: 1.5;
}
@media (max-width: 768px) {
  .hs-settings-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 70dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* API key row */
.hs-apikey-wrap {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hs-apikey-input-wrap { position: relative; display: flex; align-items: center; flex: 1; min-width: 140px; }
#apiKeyInput {
  width: 100%;
  padding: 5px 26px 5px 9px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  outline: none;
  transition: border-color var(--transition);
}
#apiKeyInput:focus { border-color: var(--border-fire); }
#apiKeyInput::placeholder { color: var(--text-3); }
#apiKeyInput:disabled { opacity: 0.5; cursor: default; }
#apiKeyClear {
  position: absolute; right: 6px;
  cursor: pointer; color: var(--text-3);
  font-size: 0.85rem; display: none; line-height: 1; user-select: none;
}
#apiKeyClear:hover { color: var(--fire); }
#apiKeySave {
  padding: 5px 11px;
  background: var(--fire);
  color: #fff;
  border: none; border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
#apiKeySave:hover { background: var(--fire-dim); }
#apiKeyStatus { font-size: 0.7rem; color: var(--bzro); white-space: nowrap; }

/* Listed-only + refresh listings row */
.hs-listed-row {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hs-listed-group {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.hs-listed-group label {
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.hs-listed-group label.disabled { opacity: 0.35; cursor: default; }
#listedOnlyCheck { cursor: pointer; accent-color: var(--bzro); }
#listingsStatus {
  font-family: var(--font-mono);
  font-size: 0.65rem; color: var(--text-3);
  white-space: nowrap;
}
.hs-refresh-listings {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none;
  border: 1px solid rgba(62, 207, 203, 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer; color: var(--bzro);
  transition: all var(--transition);
  flex-shrink: 0;
}
.hs-refresh-listings:hover { background: var(--bzro-glow); }
.hs-refresh-listings:disabled { opacity: 0.4; cursor: not-allowed; }
.hs-refresh-listings svg { width: 13px; height: 13px; }

/* Wallet filter */
.hs-wallet-wrap {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hs-wallet-input {
  flex: 1; min-width: 120px;
  padding: 5px 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-mono); font-size: 0.7rem;
  outline: none; transition: border-color var(--transition);
}
.hs-wallet-input:focus { border-color: var(--border-fire); }
.hs-wallet-input::placeholder { color: var(--text-3); }
.hs-wallet-check {
  accent-color: var(--fire); cursor: pointer; width: 14px; height: 14px;
}
.hs-wallet-label {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.hs-wallet-label.loading { color: var(--text-3); }

/* ═══════════════════════════════════════════
   RPC SELECTOR (on-chain collections)
═══════════════════════════════════════════ */
.hs-rpc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.hs-rpc-dot.ok   { background: #4ADE80; }
.hs-rpc-dot.err  { background: var(--fire); }
.hs-rpc-dot.test { background: #FFAD60; animation: pulse 1s infinite; }
.hs-rpc-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--text-2);
}
.hs-rpc-opt:hover { background: var(--bg-3); }
.hs-rpc-opt.active { background: rgba(255,90,31,0.12); color: var(--fire); }
.hs-rpc-opt-name { flex: 1; }
.hs-rpc-opt-badge {
  font-size: 0.55rem; padding: 1px 5px; border-radius: 3px;
  background: var(--bg-4); color: var(--text-3); letter-spacing: 0.05em;
}
.hs-rpc-custom-row { display: flex; gap: 6px; margin-top: 8px; }
.hs-rpc-custom-input {
  flex: 1; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 8px; color: var(--text);
  font-family: var(--font-mono); font-size: 0.65rem;
}
.hs-rpc-apply-btn {
  background: var(--fire); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 5px 10px;
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  cursor: pointer;
}

/* ═══════════════════════════════════════════
       FILTER BAR
    ═══════════════════════════════════════════ */
    #filterBar {
      display: none;
      flex-shrink: 0;
      background: var(--bg-2);
      border-bottom: 1px solid var(--border);
      padding: 0;
      max-height: 340px;
      overflow-y: auto;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 10px;
    }
    #filterBar.open {
      display: grid;
      padding: 14px 20px;
    }
    .filter-group { display: flex; flex-direction: column; gap: 3px; }
    .filter-group label {
      font-family: var(--font-mono);
      font-size: 0.6rem; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--text-3);
    }
    .filter-group select {
      padding: 5px 8px;
      background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--radius-sm); color: var(--text);
      font-family: var(--font-sans); font-size: 0.8rem;
      outline: none; cursor: pointer;
      transition: border-color var(--transition);
    }
    .filter-group select:focus { border-color: var(--border-fire); }
    .filter-group select option { background: var(--bg-3); }
    .filter-reset-btn {
      padding: 6px 12px;
      background: none; border: 1px solid var(--border-fire);
      border-radius: var(--radius-sm); color: var(--fire);
      font-family: var(--font-mono);
      font-size: 0.65rem; letter-spacing: 0.1em;
      text-transform: uppercase; cursor: pointer;
      transition: all var(--transition);
      white-space: nowrap;
      align-self: flex-end;
    }
    .filter-reset-btn:hover { background: var(--fire-glow-sm); }

    /* ═══════════════════════════════════════════
       TABLE AREA
    ═══════════════════════════════════════════ */
    /* Loading / Empty state */
    #hs-loading {
      display: flex;
      flex-direction: column;
      align-items: center; justify-content: center;
      height: 100%;
      gap: 16px;
      color: var(--text-3);
    }
    .hs-loading-flame {
      width: 48px; height: 48px;
      opacity: 0.4;
      animation: flicker 1.8s ease-in-out infinite alternate;
    }
    @keyframes flicker {
      0% { opacity: 0.3; transform: scale(0.95); }
      100% { opacity: 0.6; transform: scale(1.05); }
    }
    .hs-loading-text {
      font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    /* Table */
    table#dataTable {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.82rem;
    }
    thead {
      position: sticky; top: 0; z-index: 30;
      background: var(--thead-bg);
    }
    th {
      background: var(--thead-bg);
      padding: 8px 12px;
      text-align: left;
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
      border-bottom: 1px solid var(--border-fire);
      border-right: 1px solid var(--border);
      white-space: nowrap;
      user-select: none;
    }
    th:last-child { border-right: none; }

    /* Sticky first col */
    th:first-child, td:first-child {
      position: sticky; left: 0; z-index: 20;
      background: var(--bg-2);
      border-right: 1px solid var(--border-fire);
      text-align: center;
      min-width: 80px;
    }
    thead th:first-child { z-index: 50 !important; background: var(--thead-bg); }

    td {
      padding: 7px 12px;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      color: var(--text);
      background: var(--bg);
      white-space: nowrap;
    }
    td:last-child { border-right: none; }
    tr:hover td { background: var(--row-hover); }
    tr:hover td:first-child { background: var(--bg-3); }

    /* Token link */
    .token-link {
      color: var(--fire);
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      font-weight: 500;
      display: inline-flex; align-items: center; gap: 3px;
      transition: color var(--transition);
    }
    .token-link:hover { color: #ff8c5a; }

    /* Rank cell */
    .rank-cell {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 0.82rem;
      color: var(--text);
    }
    .rank-cell.top-10 { color: var(--fire); }
    .rank-cell.top-100 { color: #FFAD60; }

    /* Listed tag */
    .listed-tag {
      display: inline-block;
      background: rgba(62, 207, 203, 0.12);
      color: var(--bzro);
      font-family: var(--font-mono);
      font-size: 0.65rem; font-weight: 600;
      padding: 1px 6px; border-radius: 3px;
      margin-left: 4px; vertical-align: middle;
      border: 1px solid rgba(62, 207, 203, 0.25);
    }

    /* Highlight (search match) */
    .highlight {
      background: rgba(255, 95, 31, 0.3);
      color: #fff;
      padding: 0 2px;
      border-radius: 2px;
    }

    /* Trait cell */
    .trait-cell-inner {
      display: flex; align-items: center;
      justify-content: space-between; gap: 6px;
    }
    .trait-text { overflow: hidden; text-overflow: ellipsis; }
    .add-filter-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px;
      border-radius: 3px;
      background: var(--fire-glow-sm);
      color: var(--fire);
      font-weight: bold; font-size: 1rem; line-height: 1;
      cursor: pointer; opacity: 0;
      transition: all 0.1s; user-select: none;
      flex-shrink: 0;
    }
    .add-filter-btn:hover { background: var(--fire); color: #fff; opacity: 1 !important; }
    td:hover .add-filter-btn { opacity: 1; }

    /* Sort controls in th */
    .th-sort-wrap { display: flex; align-items: center; gap: 5px; }
    .th-trait-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; }
    .sort-btns { display: flex; gap: 1px; }
    .sort-btn {
      cursor: pointer; padding: 1px 4px;
      border-radius: 2px; color: var(--text-3);
      font-weight: 600; font-size: 0.7rem;
      transition: all 0.1s;
    }
    .sort-btn:hover { color: var(--text-2); }
    .sort-btn.active { color: var(--fire); }
    .sort-arrow { font-size: 0.75rem; color: var(--text-3); cursor: pointer; }
    .sort-arrow.active { color: var(--fire); }

    /* Rank switcher */
    .rank-header-wrap { display: flex; align-items: center; gap: 4px; }
    select.rank-switcher {
      appearance: none; -webkit-appearance: none;
      background: transparent; border: none;
      font-family: var(--font-mono);
      font-weight: 600; color: var(--fire);
      font-size: 0.65rem; letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 16px 2px 2px; cursor: pointer;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat; background-position: right center; background-size: 10px;
    }
    select.rank-switcher:focus { outline: none; }
    select.rank-switcher option { background: var(--bg-3); color: var(--text); }

    /* Scroll sentinel */
    #scroll-sentinel { height: 20px; width: 100%; }

    /* ═══════════════════════════════════════════
       IMAGE PREVIEW
    ═══════════════════════════════════════════ */
    #imagePreview {
      display: none;
      position: fixed; z-index: 1000;
      background: var(--bg-2);
      border: 1px solid var(--border-fire);
      border-radius: var(--radius-md);
      box-shadow: 0 20px 60px var(--shadow), 0 0 0 1px var(--border);
      padding: 8px;
      width: 210px;
      min-height: 210px;
      pointer-events: none;
    }
    #imagePreview.visible { display: block; }
    #imagePreview img {
      width: 100%; height: auto;
      border-radius: var(--radius-sm);
      display: block;
    }
    .preview-loader {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 0.7rem; color: var(--text-3);
      background: var(--bg-2);
      border-radius: var(--radius-md);
      letter-spacing: 0.1em;
    }
    .preview-listed-badge {
      position: absolute; top: 12px; left: 12px;
      background: var(--bzro);
      color: #0C0A09;
      font-family: var(--font-mono);
      font-size: 0.65rem; font-weight: 700;
      padding: 2px 7px; border-radius: 3px;
      z-index: 10; pointer-events: none;
    }

    /* ═══════════════════════════════════════════
       TAP MODAL (mobile)
    ═══════════════════════════════════════════ */
    .tap-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(12,10,9,0.8);
      z-index: 2000; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
    }
    .tap-overlay.open { display: flex; }
    .tap-modal {
      background: var(--bg-2);
      border: 1px solid var(--border-fire);
      border-radius: var(--radius-lg);
      padding: 12px; width: 290px;
      max-width: 92vw;
      box-shadow: 0 24px 60px rgba(0,0,0,0.5);
      position: relative;
    }
    .tap-modal img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
    .tap-modal-close {
      position: absolute; top: 8px; right: 10px;
      font-size: 1.2rem; cursor: pointer; color: var(--text-3);
      background: var(--bg-3); border-radius: 50%;
      width: 26px; height: 26px;
      display: flex; align-items: center; justify-content: center;
      z-index: 10;
      transition: color var(--transition);
    }
    .tap-modal-close:hover { color: var(--fire); }
    .tap-modal-footer {
      margin-top: 8px; display: flex;
      justify-content: space-between; align-items: center;
      font-size: 0.78rem; color: var(--text-2);
    }
    .tap-modal-listed {
      background: rgba(62,207,203,0.12); color: var(--bzro);
      font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
      padding: 2px 8px; border-radius: 3px;
      border: 1px solid rgba(62,207,203,0.25);
    }
    .tap-modal-os {
      color: var(--fire); font-weight: 600;
      text-decoration: none; font-size: 0.78rem;
    }
    .tap-modal-loader {
      text-align: center; padding: 40px 0;
      color: var(--text-3); font-family: var(--font-mono);
      font-size: 0.72rem; letter-spacing: 0.12em;
    }


    /* ═══════════════════════════════════════════
       ART CARD GRID
    ═══════════════════════════════════════════ */
    #cardGrid {
      display: none;
      padding: 16px;
      grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
      /* Explicit min-content (not the "auto" default) — with a scrollable,
         height-bounded container and aspect-ratio-sized children, Chromium's
         "auto" row-track sizing can squash every row to a few px instead of
         each card's real intrinsic height. min-content resolves it correctly. */
      grid-auto-rows: min-content;
      gap: 12px;
      overflow-y: auto;
      align-content: start;
      flex: 1;
      min-height: 0;
    }
    #cardGrid.active { display: grid; }
    #tableWrapper.card-mode { display: none; }
    /* Wrapper fills remaining viewport height, children scroll independently */
    #hs-content-area {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    #tableWrapper {
      flex: 1;
      min-height: 0;
      overflow-y: scroll;
      overflow-x: auto;
    }

    .art-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      cursor: pointer;
      transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
      position: relative;
    }
    .art-card:hover {
      border-color: var(--border-fire);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--shadow);
    }
    .art-card-img-wrap {
      aspect-ratio: 1;
      background: var(--bg-3);
      position: relative; overflow: hidden;
    }
    .art-card-img-wrap img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.3s;
    }
    .art-card-img-wrap .card-img-loader {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 0.65rem;
      color: var(--text-3); letter-spacing: 0.08em;
    }
    .art-card-body {
      padding: 8px 10px;
    }
    .art-card-token {
      font-family: var(--font-mono); font-size: 0.72rem;
      color: var(--fire); font-weight: 600;
      display: flex; justify-content: space-between; align-items: center;
    }
    .art-card-rank {
      font-family: var(--font-mono); font-size: 0.68rem;
      color: var(--text-3); margin-top: 2px;
    }
    .art-card-rank.top-10 { color: var(--fire); }
    .art-card-rank.top-100 { color: #FFAD60; }
    .art-card-price {
      font-family: var(--font-mono); font-size: 0.68rem;
      color: var(--bzro); margin-top: 2px; font-weight: 600;
    }
    .art-card-buy {
      width: 100%; margin-top: 6px;
      padding: 5px 0;
      background: var(--fire); color: #fff;
      border: none; border-radius: var(--radius-sm);
      font-family: var(--font-mono); font-size: 0.68rem;
      font-weight: 700; letter-spacing: 0.05em;
      cursor: pointer; transition: background var(--transition);
    }
    .art-card-buy:hover { background: var(--fire-dim); }
    .art-card-buy:disabled {
      background: var(--bg-4); color: var(--text-3); cursor: not-allowed;
    }

    /* Trait tooltip on art card hover */
    .art-card-tooltip {
      position: absolute; inset: 0;
      background: rgba(12,10,9,0.88);
      backdrop-filter: blur(2px);
      padding: 10px;
      display: none;
      flex-direction: column; gap: 3px;
      overflow: hidden;
      border-radius: var(--radius-md) var(--radius-md) 0 0;
      z-index: 10;
    }
    .art-card:hover .art-card-tooltip { display: flex; }
    .art-card-tooltip-row {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 6px;
    }
    .art-card-tooltip-trait {
      font-family: var(--font-mono); font-size: 0.6rem;
      color: var(--overlay-text-dim); letter-spacing: 0.08em;
      text-transform: uppercase; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
    }
    .art-card-tooltip-val {
      font-family: var(--font-mono); font-size: 0.65rem;
      color: var(--overlay-text); text-align: right;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      min-width: 0;
    }
    .art-card-tooltip-val-wrap {
      display: inline-flex; align-items: center; gap: 4px;
      min-width: 0; justify-content: flex-end;
    }
    /* The add-filter "+" is opacity:0 by default (table view reveals it on
       td:hover) — the gallery tooltip is already a deliberate hover-reveal,
       so show it immediately rather than requiring a second nested hover,
       and size it down to fit the tooltip's smaller scale. */
    .art-card-tooltip-val-wrap .add-filter-btn {
      opacity: 1; flex-shrink: 0;
      width: 14px; height: 14px; font-size: 0.75rem;
    }

    /* ═══════════════════════════════════════════
       BUY BUTTON (list view)
    ═══════════════════════════════════════════ */
    .buy-btn {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 2px 8px;
      background: var(--fire); color: #fff;
      border: none; border-radius: 3px;
      font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
      cursor: pointer; transition: background var(--transition);
      margin-left: 6px; vertical-align: middle;
    }
    .buy-btn:hover { background: var(--fire-dim); }
    .buy-btn:disabled { background: var(--bg-4); color: var(--text-3); cursor: not-allowed; }

    /* Buy status toast */
    #buyToast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--bg-3); border: 1px solid var(--border-fire);
      border-radius: var(--radius-md); padding: 10px 18px;
      font-family: var(--font-mono); font-size: 0.75rem; color: var(--text);
      box-shadow: 0 8px 24px var(--shadow);
      z-index: 9999; display: none; white-space: nowrap;
      transition: opacity 0.3s;
    }
    #buyToast.visible { display: block; }

    /* Card grid scroll sentinel */
    #cardSentinel { height: 20px; width: 100%; grid-column: 1 / -1; }


    /* ═══════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════ */
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.7); }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .spinning { animation: spin 0.8s linear infinite; }


/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════ */
@media (hover: none) { .add-filter-btn { opacity: 1; } }

@media (max-width: 768px) {
  td, th { padding: 6px 8px; font-size: 0.78rem; }
  #imagePreview { display: none !important; }
  #filterBar.open { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* auto-fill/minmax(200px,220px) lands on 1 or 3 columns depending on exact
     viewport width, with a big empty gutter when it can't fit another
     220px track — pin it to a clean 2-up grid on any mobile width instead. */
  #cardGrid { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 10px; }
}

/* ═══════════════════════════════════════════
   STICKY HEADER GROUP (site integration)
   Wraps the shared Bonfire #navbar and this tool's own #hs-header
   into one non-scrolling stack. bonfire.css makes `nav` position:fixed
   by default (for pages with no sub-header of their own); here it
   needs to be a normal flow child of #stickyHeaderGroup instead, so
   the group reserves its real combined height and #hs-header can sit
   directly beneath it without overlapping page content.
═══════════════════════════════════════════ */
#stickyHeaderGroup {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
#navbar {
  position: relative;
  top: auto; left: auto; right: auto;
  height: 68px;
  overflow: visible; /* don't clip legitimate dropdowns */
}
#navbar .logo,
#navbar .nav-center,
#navbar .nav-right {
  height: 100%;
}