:root {
      --bg: #0f1117;
      --surface: #181a22;
      --surface-hover: #1f2230;
      --border: #2a2d3a;
      --text: #e4e4e7;
      --text-muted: #8b8d9b;
      --accent: #a855f7;
      --accent-hover: #c084fc;
      --reverb: #ff6b35;
      --youtube: #ff0033;
      --news: #3b82f6;
      --marketplace: #10b981;
      --discord: #5865F2;
      --deal-glow: rgba(16, 185, 129, 0.3);
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ── HEADER ── */
    .header {
      border-bottom: 1px solid var(--border);
      background: rgba(15, 17, 23, 0.85);
      backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }
    .logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .logo h1 {
      font-size: 1.35rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .logo h1 span { color: var(--accent); }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    /* Uniform height for all header items */
    .header-actions a,
    .header-actions button,
    .header-actions .auth-btn {
      height: 36px;
      box-sizing: border-box;
    }

    .discord-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--discord);
      color: #fff;
      padding: 0 1rem;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.85rem;
      transition: all 0.2s;
    }
    .discord-btn:hover {
      background: #4752c4;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
    }
    .discord-btn svg { width: 20px; height: 20px; }
    .x-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #000;
      color: #fff;
      width: 36px;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.2s;
    }
    .x-btn:hover {
      background: #333;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .x-btn svg { width: 18px; height: 18px; fill: #fff; }

    /* ── HERO ── */
    .hero {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2.5rem 1.5rem 2rem;
      text-align: center;
    }
    .hero-logo {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0 auto 1.25rem;
      border: 3px solid var(--accent);
      box-shadow: 0 0 30px rgba(168, 85, 247, 0.25);
    }
    .hero h2 {
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 0.75rem;
    }
    .hero h2 span { color: var(--accent); }
    .hero p {
      color: var(--text-muted);
      font-size: 1.1rem;
      max-width: 640px;
      margin: 0 auto 0.5rem;
    }
    .hero .tagline {
      color: var(--text-muted);
      font-size: 0.85rem;
      font-style: italic;
      max-width: 500px;
      margin: 0 auto 1.5rem;
      opacity: 0.7;
    }
    .stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 1rem;
    }
    .stat { text-align: center; }
    .stat-value {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--accent);
    }
    .stat-label {
      font-size: 0.8rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* ── DEAL OF THE DAY ── */
    .deal-banner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem 1rem;
      display: none;
    }
    .deal-banner.visible { display: block; }
    .deal-card {
      display: grid;
      grid-template-columns: 160px 1fr auto;
      background: var(--surface);
      border: 2px solid var(--marketplace);
      border-radius: 14px;
      overflow: hidden;
      text-decoration: none;
      color: var(--text);
      transition: all 0.2s;
      position: relative;
      box-shadow: 0 0 30px var(--deal-glow);
      opacity: 0;
      transform: translateY(6px);
    }
    .deal-card.visible {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s;
    }
    .deal-card.fade-out {
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .deal-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 40px var(--deal-glow);
    }
    .deal-counter {
      position: absolute;
      bottom: 0.6rem;
      right: 0.8rem;
      font-size: 0.65rem;
      color: var(--text-muted);
      opacity: 0.6;
    }
    .deal-dots {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .deal-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-muted);
      opacity: 0.3;
      transition: opacity 0.3s, background 0.3s;
    }
    .deal-dot.active {
      opacity: 1;
      background: var(--marketplace);
    }
    .deal-badge {
      display: inline-block;
      background: var(--marketplace);
      color: #000;
      font-size: 0.65rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.25rem 0.6rem;
      border-radius: 4px;
      margin-bottom: 0.35rem;
    }
    .deal-thumb {
      width: 160px;
      height: 160px;
      object-fit: cover;
      background: var(--bg);
    }
    .deal-body {
      padding: 1.25rem;
      min-width: 0;
    }
    .deal-body .card-title {
      font-size: 1.1rem;
      font-weight: 700;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
    }
    .deal-body .rich-price {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--marketplace);
      margin-top: 0.35rem;
    }
    .deal-body .rich-condition {
      background: rgba(16, 185, 129, 0.15);
      color: var(--marketplace);
    }
    .deal-time {
      padding: 1.25rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      white-space: nowrap;
      align-self: start;
    }
    .deal-reasons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.35rem;
    }
    .deal-reason {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      background: rgba(16, 185, 129, 0.15);
      color: var(--marketplace);
      letter-spacing: 0.02em;
    }

    /* ── TOOLBAR (filters + sort + price) ── */
    .toolbar {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem 1rem;
    }
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 0.75rem;
    }
    .filter-label {
      font-size: 0.8rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
      margin-right: 0.25rem;
    }
    .filter-btn {
      padding: 0.4rem 0.9rem;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .filter-btn:hover { border-color: var(--accent); color: var(--text); }
    .filter-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #000;
      font-weight: 600;
    }
    .filter-btn .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 0.35rem;
      vertical-align: middle;
    }
    .dot-reverb { background: var(--reverb); }
    .dot-youtube { background: var(--youtube); }
    .dot-news { background: var(--news); }
    .dot-marketplace { background: var(--marketplace); }

    .live-indicator {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-left: auto;
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* Sort + Price Row */
    .controls-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .sort-select {
      padding: 0.45rem 0.75rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.85rem;
      font-family: inherit;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s;
    }
    .sort-select:focus { border-color: var(--accent); }

    .price-filter {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--text-muted);
    }
    .price-filter label { font-weight: 500; white-space: nowrap; }
    .price-input {
      width: 80px;
      padding: 0.4rem 0.5rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.82rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
    }
    .price-input:focus { border-color: var(--accent); }
    .price-input::placeholder { color: var(--text-muted); }
    .price-clear {
      padding: 0.35rem 0.6rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      font-size: 0.75rem;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
      display: none;
    }
    .price-clear.visible { display: inline-block; }
    .price-clear:hover { border-color: var(--accent); color: var(--text); }

    /* ── SEARCH BAR ── */
    .search-bar {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem 1rem;
    }
    .search-input {
      width: 100%;
      padding: 0.7rem 2.5rem 0.7rem 2.5rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.9rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b8d9b' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 0.75rem center;
    }
    .search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
    }
    .search-input::placeholder { color: var(--text-muted); }
    .search-results-count {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 0.4rem;
      display: none;
    }
    .search-results-count.visible { display: block; }

    /* ── FEED ── */
    .feed {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem 3rem;
      display: grid;
      gap: 0.75rem;
    }

    .link-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 1rem;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1rem 1.25rem;
      text-decoration: none;
      color: var(--text);
      transition: all 0.2s;
      position: relative;
    }
    .link-card:hover {
      background: var(--surface-hover);
      border-color: var(--accent);
    }

    /* Scroll animations */
    .link-card, .deal-card {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .link-card.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .card-category {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    .cat-reverb { background: rgba(255, 107, 53, 0.15); }
    .cat-youtube { background: rgba(255, 0, 51, 0.15); }
    .cat-news { background: rgba(59, 130, 246, 0.15); }
    .cat-marketplace { background: rgba(16, 185, 129, 0.15); }

    .card-body { min-width: 0; }
    .card-title {
      font-weight: 600;
      font-size: 0.95rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-meta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 0.2rem;
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .card-domain {
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
    .card-domain img {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }
    .card-user { color: var(--accent); }

    /* ── RICH CARDS ── */
    .link-card.rich-card {
      grid-template-columns: 140px 1fr auto;
      padding: 0;
      overflow: hidden;
    }
    .rich-thumb {
      width: 140px;
      height: 140px;
      object-fit: cover;
      background: var(--bg);
      flex-shrink: 0;
    }
    .rich-body {
      padding: 1rem 1rem 1rem 0;
      min-width: 0;
    }
    .rich-body .card-title {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 1rem;
      line-height: 1.4;
    }
    .rich-price {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--accent);
      margin-top: 0.35rem;
    }
    /* ── Shared inline tag sizing ── */
    .rich-condition,
    .condition-warn,
    .cursed-tag,
    .hesher-tag,
    .tag-weeb,
    .tag-boomer,
    .tag-cope,
    .tag-elite,
    .tag-callmyguys,
    .tag-gentleman,
    .tag-groverbanger,
    .tag-goop,
    .tag-classico,
    .tag-goat,
    .tag-castedosa,
    .tag-crackpipe,
    .tag-pervert,
    .tag-shred,
    .tag-dds,
    .tag-unhinged,
    .tag-mayo,
    .tag-scam,
    .tag-slop,
    .tag-poop,
    .tag-chair,
    .tag-blessed,
    .tag-orient,
    .days-on-market,
    .trending-badge,
    .badge-zeitgeist,
    .badge-egregore,
    .price-drop,
    .status-badge,
    .sold-price-tag,
    .deal-score,
    .reverb-tag,
    .avg-price-badge {
      display: inline-flex;
      align-items: center;
      font-size: 0.72rem;
      padding: 0.2rem 0.55rem;
      line-height: 1;
      border-radius: 6px;
      vertical-align: middle;
      box-sizing: border-box;
      height: 22px;
      margin: 0.15rem 0.1rem 0 0;
    }
    .rich-condition {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      background: rgba(168, 85, 247, 0.15);
      color: var(--accent);
    }
    .rich-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 0.3rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
    }
    .rich-time {
      padding: 1rem 1rem 1rem 0;
      font-size: 0.78rem;
      color: var(--text-muted);
      white-space: nowrap;
      flex-shrink: 0;
      align-self: start;
    }

    /* ── SHARE BUTTONS (always visible) ── */
    .share-row {
      display: flex;
      gap: 0.3rem;
      margin-top: 0.3rem;
      opacity: 1;
      height: 24px;
      overflow: visible;
    }
    .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.65rem;
      transition: all 0.15s;
      text-decoration: none;
      padding: 0;
    }
    .share-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: scale(1.1);
    }
    .share-btn svg { width: 12px; height: 12px; fill: currentColor; }
    .share-btn.copied {
      border-color: var(--marketplace);
      color: var(--marketplace);
    }
    /* Share buttons always visible — no hover toggle needed */

    .card-time {
      font-size: 0.78rem;
      color: var(--text-muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .empty-state {
      text-align: center;
      padding: 4rem 2rem;
      color: var(--text-muted);
    }
    .empty-state .icon { font-size: 3rem; margin-bottom: 1rem; }
    .empty-state h3 { font-size: 1.2rem; color: var(--text); margin-bottom: 0.5rem; }

    /* ── LOAD MORE ── */
    .load-more-container {
      display: flex;
      justify-content: center;
      padding: 2rem 0 3rem;
    }
    .load-more-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.75rem 2rem;
      border-radius: 8px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .load-more-btn:hover {
      border-color: var(--accent);
      background: var(--surface-hover);
    }
    .load-more-count {
      color: var(--text-muted);
      font-size: 0.85rem;
    }

    /* ── FLOATING DISCORD BUTTON ── */
    /* ── BACK TO TOP BUTTON ── */
    .back-to-top {
      position: fixed;
      bottom: 1.5rem;
      right: calc(1.5rem + 230px);
      z-index: 999;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--card-bg, #1a1a2e);
      color: var(--text-muted, #888);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      transition: all 0.2s;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }
    .back-to-top.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .back-to-top:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    }
    .back-to-top svg { width: 18px; height: 18px; }
    @media (max-width: 640px) {
      .back-to-top {
        right: calc(1.5rem + 48px + 0.6rem);
        width: 36px;
        height: 36px;
      }
    }

    .floating-discord {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 999;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: #5865F2;
      color: #fff;
      text-decoration: none;
      padding: 0.6rem 1rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 600;
      box-shadow: 0 4px 20px rgba(88, 101, 242, 0.4);
      transition: all 0.2s;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }
    .floating-discord.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .floating-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(88, 101, 242, 0.5); }
    .floating-discord svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
    .floating-discord .fab-text { white-space: nowrap; }
    @media (max-width: 640px) {
      .floating-discord { padding: 0.6rem; border-radius: 50%; }
      .floating-discord .fab-text { display: none; }
    }

    /* ── FOOTER ── */
    .footer {
      border-top: 1px solid var(--border);
      text-align: center;
      padding: 2rem 1.5rem;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .footer a { color: var(--accent); text-decoration: none; }
    .footer a:hover { text-decoration: underline; }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      /* Header: compact layout */
      .header-inner { padding: 0.6rem 0.75rem; gap: 0.5rem; }
      .logo h1 { font-size: 1.1rem; }
      .logo-icon { width: 32px; height: 32px; }
      .header-actions { gap: 0.35rem; }
      .header-actions a, .header-actions button { font-size: 0.75rem; padding: 0 0.5rem; height: 32px; white-space: nowrap; }
      .discord-btn { padding: 0 0.6rem; font-size: 0.75rem; }
      .discord-btn span { display: none; }
      .discord-btn svg { width: 18px; height: 18px; }
      /* Sign In: icon-only on mobile */
      .auth-btn .auth-label { display: none; }
      .auth-btn { width: 32px; padding: 0; justify-content: center; }
      .auth-btn svg { width: 18px; height: 18px; }
      .x-btn { width: 32px; height: 32px; }

      /* Hero: tighter spacing */
      .hero { padding: 1.5rem 1rem 1.25rem; }
      .hero-logo { width: 72px; height: 72px; margin-bottom: 0.75rem; }
      .hero h2 { font-size: 1.5rem; }
      .hero p { font-size: 0.9rem; max-width: 100%; }
      .hero .tagline { font-size: 0.78rem; max-width: 100%; }
      .stats { gap: 1rem; }
      .stat-value { font-size: 1.2rem; }
      .stat-label { font-size: 0.65rem; }
      .stats-cta { font-size: 0.85rem; padding: 0.5rem 1.2rem; }

      /* SEO blurb */
      section[style*="max-width:1200px"] { padding: 0 1rem !important; }

      /* Deal banner */
      .deal-banner { padding: 0 0.75rem 0.75rem; }
      .deal-card { grid-template-columns: 100px 1fr; }
      .deal-thumb { width: 100px; height: 100px; }
      .deal-body { padding: 0.75rem; }
      .deal-body .card-title { font-size: 0.9rem; -webkit-line-clamp: 3; }
      .deal-body .rich-price { font-size: 1.15rem; }
      .deal-time { display: none; }
      .deal-badge { font-size: 0.6rem; }

      /* Weekly top picks */
      #weeklyTopPicks { padding: 0 0.75rem !important; }

      /* Toolbar / filters */
      .toolbar { padding: 0 0.75rem 0.75rem; }
      .filter-bar { gap: 0.35rem; }
      .filter-label { font-size: 0.7rem; margin-right: 0.15rem; }
      .filter-btn { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
      .live-indicator { font-size: 0.7rem; }

      /* Controls row: stack on mobile */
      .controls-row { gap: 0.5rem; }
      .price-filter { flex-wrap: wrap; gap: 0.35rem; }
      .price-filter label { font-size: 0.78rem; }
      .price-input { width: 60px; font-size: 0.78rem; padding: 0.35rem 0.4rem; }
      .sort-select { font-size: 0.78rem; padding: 0.35rem 0.5rem; }

      /* Search bar */
      .search-bar { padding: 0 0.75rem 0.75rem; }
      .search-input { font-size: 0.85rem; padding: 0.6rem 2.2rem 0.6rem 2.2rem; }

      /* Feed */
      .feed { padding: 0 0.75rem 2rem; }

      /* Standard cards */
      .link-card { grid-template-columns: auto auto 1fr !important; padding: 0.7rem 0.75rem; gap: 0.5rem; }
      .card-time { display: none; }
      .card-title { font-size: 0.85rem; }
      .card-meta { font-size: 0.72rem; gap: 0.35rem; }
      .card-tag { font-size: 0.6rem; padding: 0.15rem 0.4rem; }

      /* Rich cards */
      .link-card.rich-card { grid-template-columns: auto 90px 1fr !important; }
      .rich-thumb { width: 90px; height: 90px; }
      .rich-body { padding: 0.5rem 0.6rem 0.5rem 0; }
      .rich-body .card-title { font-size: 0.85rem; -webkit-line-clamp: 2; }
      .rich-price { font-size: 0.95rem; }
      .rich-condition { font-size: 0.6rem; padding: 0.15rem 0.45rem; }
      .rich-desc { display: none; }
      .rich-time { display: none; }
      .rich-tags { gap: 0.25rem; flex-wrap: wrap; }

      /* Card badges (deal score, days on market, etc.) */
      .deal-score { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
      .days-badge { font-size: 0.6rem; padding: 0.1rem 0.35rem; }
      .price-drop-badge { font-size: 0.6rem; }
      .seller-badge { font-size: 0.55rem; }
      .offer-badge { font-size: 0.6rem; }

      /* Card action buttons (share, bookmark, similar) */
      .share-btn, .bookmark-btn, .similar-btn, .price-history-btn { font-size: 0.7rem; padding: 0.25rem 0.4rem; }
      .vote-section { gap: 0.25rem; }
      .vote-btn { font-size: 0.75rem; min-width: 24px; padding: 0.15rem; }

      /* Modal */
      .modal { padding: 1rem; border-radius: 10px; }
      .modal h3 { font-size: 1.1rem; }

      /* Comment section */
      .comments-section { padding: 0.75rem; }
      .comment-input { font-size: 0.85rem; }

      /* Alert/notification panels */
      #alertNotification, #alertListPanel, #seasonalHint { padding: 0 0.75rem !important; }

      /* Footer */
      .footer { padding: 1.5rem 1rem; font-size: 0.8rem; }

      /* Disable card tilt on mobile */
      .elite-card { transform: none !important; }
    }

    @media (max-width: 380px) {
      .header-actions .saved-btn { display: none; }
      .logo h1 { font-size: 1rem; }
      .hero h2 { font-size: 1.3rem; }
      .deal-card { grid-template-columns: 80px 1fr; }
      .deal-thumb { width: 80px; height: 80px; }
      .link-card.rich-card { grid-template-columns: auto 80px 1fr !important; }
      .rich-thumb { width: 80px; height: 80px; }
      .filter-btn { padding: 0.25rem 0.5rem; font-size: 0.72rem; }
      .price-filter label { display: none; }
    }

    /* ── PRICE HISTORY MODAL ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      width: 100%;
      max-width: 700px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 1.5rem;
      position: relative;
    }
    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      width: 32px;
      height: 32px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .modal-close:hover { border-color: var(--accent); color: var(--accent); }
    .modal h3 {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      padding-right: 2.5rem;
    }
    .modal .modal-sub {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
    }
    .modal-stats {
      display: flex;
      gap: 1.5rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    .modal-stat .ms-val {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--accent);
    }
    .modal-stat .ms-lbl {
      font-size: 0.72rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .modal-chart { position: relative; width: 100%; height: 220px; margin-bottom: 1rem; }
    .modal-chart canvas { width: 100% !important; height: 100% !important; }
    .modal-sightings { font-size: 0.82rem; }
    .modal-sightings .sight-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.45rem 0;
      border-bottom: 1px solid var(--border);
      gap: 0.75rem;
    }
    .modal-sightings .sight-row:last-child { border-bottom: none; }
    .sight-title {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sight-title a { color: var(--text); text-decoration: none; }
    .sight-title a:hover { color: var(--accent); }
    .sight-price { color: var(--accent); font-weight: 600; white-space: nowrap; }
    .sight-date { color: var(--text-muted); white-space: nowrap; font-size: 0.78rem; }
    .sight-cond {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      padding: 0.15rem 0.35rem;
      border-radius: 3px;
      background: rgba(168,85,247,0.12);
      color: var(--accent);
      white-space: nowrap;
    }

    /* ── DEAL SCORE BADGE ── */
    .deal-score {
      gap: 0.3rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .deal-score.steal {
      background: rgba(16, 185, 129, 0.25);
      color: #059669;
      font-weight: 800;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(16, 185, 129, 0.35);
      text-shadow: 0 0 6px rgba(5, 150, 105, 0.4);
      animation: stealPulse 2.5s ease-in-out infinite;
    }
    .deal-score.steal::before {
      content: '';
      position: absolute;
      top: 0; left: -100%; bottom: 0;
      width: 60%;
      background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.15), rgba(255, 255, 255, 0.08), transparent);
      animation: stealSweep 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes stealPulse {
      0%, 100% { box-shadow: 0 0 4px rgba(16, 185, 129, 0.15); }
      50% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.3), 0 0 4px rgba(16, 185, 129, 0.2); }
    }
    @keyframes stealSweep {
      0% { left: -100%; }
      60% { left: 200%; }
      100% { left: 200%; }
    }
    .deal-score.good-deal {
      background: rgba(16, 185, 129, 0.15);
      color: #10b981;
    }
    .deal-score.fair-price {
      background: rgba(168, 85, 247, 0.1);
      color: var(--text-muted);
    }
    .deal-score.above-avg {
      background: rgba(239, 68, 68, 0.1);
      color: #8b8d9b;
    }
    .deal-score.overpriced {
      background: rgba(239, 68, 68, 0.18);
      color: #ef4444;
      font-weight: 800;
    }
    .sold-price-tag {
      font-weight: 700;
      background: rgba(239, 68, 68, 0.12);
      color: #ef4444;
    }
    .sold-price-tag .asking {
      text-decoration: line-through;
      opacity: 0.6;
      margin-left: 0.3rem;
    }
    /* Price Alert UI */
    .alert-dialog {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem;
      margin-top: 0.75rem;
    }
    .alert-dialog input {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      width: 100%;
      font-size: 0.85rem;
      margin-top: 0.35rem;
    }
    .alert-dialog button {
      margin-top: 0.5rem;
      padding: 0.4rem 0.8rem;
      border-radius: 4px;
      border: none;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.8rem;
    }
    .alert-save {
      background: var(--accent);
      color: #fff;
    }
    .alert-save:hover { opacity: 0.9; }
    .alert-cancel {
      background: transparent;
      color: var(--text-muted);
      border: 1px solid var(--border) !important;
      margin-left: 0.4rem;
    }
    .alert-list {
      margin-top: 0.75rem;
      font-size: 0.8rem;
    }
    .alert-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.4rem 0;
      border-bottom: 1px solid var(--border);
    }
    .alert-item:last-child { border-bottom: none; }
    .alert-remove {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1rem;
      padding: 0;
      margin: 0;
    }
    .alert-remove:hover { color: #ef4444; }
    .alert-notification {
      padding: 0.75rem;
      background: rgba(34, 197, 94, 0.15);
      border-left: 3px solid #22c55e;
      border-radius: 6px;
      margin-bottom: 1rem;
      font-size: 0.85rem;
      cursor: pointer;
    }
    .alert-notification:hover { background: rgba(34, 197, 94, 0.22); }

    /* ── CONDITION WARNING ── */
    .condition-warn {
      gap: 0.25rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .condition-warn.cond-poor {
      background: rgba(239, 68, 68, 0.15);
      color: #ef4444;
    }
    .condition-warn.cond-fair {
      background: rgba(245, 158, 11, 0.15);
      color: #f59e0b;
    }
    .condition-warn.cond-good {
      background: rgba(16, 185, 129, 0.1);
      color: var(--text-muted);
    }

    /* ── CURSED TAG (greg1213 only) ── */
    .cursed-tag {
      gap: 0.3rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: rgba(220, 38, 38, 0.2);
      color: #ef4444;
      border: 1px solid rgba(220, 38, 38, 0.3);
      position: relative;
      overflow: hidden;
      animation: cursedFlicker 3s infinite;
      text-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    }
    .cursed-tag::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.08) 50%, transparent 100%);
      animation: cursedScan 2s linear infinite;
      border-radius: 4px;
    }
    @keyframes cursedFlicker {
      0%, 92%, 100% { opacity: 1; }
      93% { opacity: 0.3; transform: skewX(-2deg); }
      94% { opacity: 1; transform: skewX(0); }
      96% { opacity: 0.5; transform: skewX(1deg); }
      97% { opacity: 1; transform: skewX(0); }
    }
    @keyframes cursedScan {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* ── HESHER TAG (BC Rich only) ── */
    .hesher-tag {
      gap: 0.25rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
      color: #c4a747;
      border: 1px solid #5a4a1a;
      font-family: 'Courier New', monospace;
      text-shadow: 0 0 4px rgba(196, 167, 71, 0.4);
      position: relative;
      overflow: hidden;
    }
    .hesher-tag::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 2px,
        rgba(196, 167, 71, 0.06) 2px,
        rgba(196, 167, 71, 0.06) 4px
      );
    }
    .hesher-tag::after {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: radial-gradient(circle at 30% 50%, rgba(196, 167, 71, 0.1) 0%, transparent 60%);
      animation: hesherGrime 4s ease-in-out infinite alternate;
    }
    @keyframes hesherGrime {
      0% { transform: translate(-5%, 0); }
      100% { transform: translate(5%, 0); }
    }

    /* ── COMMUNITY TAGS ── */
    .community-tag {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 4px;
      position: relative; overflow: hidden; white-space: nowrap;
    }

    /* Strandberg: WEEB */
    .tag-weeb {
      background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.2), rgba(96, 165, 250, 0.15));
      background-size: 200% 200%;
      color: #f9a8d4;
      border: 1px solid rgba(236, 72, 153, 0.5);
      font-weight: 800;
      letter-spacing: 0.5px;
      text-shadow: 0 0 6px rgba(236, 72, 153, 0.6), 0 0 12px rgba(168, 85, 247, 0.3);
      animation: weebShimmer 3s ease-in-out infinite;
    }
    .tag-weeb::before {
      content: '✧';
      margin-right: 2px;
      animation: weebSparkle 1.5s ease-in-out infinite;
    }
    .tag-weeb::after {
      content: '✧';
      margin-left: 2px;
      animation: weebSparkle 1.5s ease-in-out 0.75s infinite;
    }
    @keyframes weebShimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes weebSparkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.3; transform: scale(0.6); }
    }

    /* Gibson: Boomer */
    .tag-boomer {
      background: rgba(146, 94, 42, 0.25); color: #c8944a;
      border: 1px solid rgba(146, 94, 42, 0.4);
      font-family: Georgia, serif; letter-spacing: 0.04em;
    }

    /* Under $500: Cope */
    .tag-cope {
      background: rgba(107, 114, 128, 0.2); color: #9ca3af;
      border: 1px solid rgba(107, 114, 128, 0.3);
    }

    /* Cope Adjacent (PRS CE, PRS S2) — not quite cope, but not far off */
    .tag-cope-adjacent {
      background: rgba(107, 114, 128, 0.12); color: #6b7280;
      border: 1px dashed rgba(107, 114, 128, 0.35);
      font-style: italic;
    }

    /* Rick Toone: Elite — holographic foil */
    .tag-elite {
      background: linear-gradient(135deg, #b8860b 0%, #ffd700 25%, #fff8dc 40%, #ffd700 55%, #b8860b 70%, #ffd700 100%);
      background-size: 200% 200%;
      color: #1a0f00;
      border: 1px solid #ffd700;
      font-weight: 900; letter-spacing: 0.15em;
      text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.3), inset 0 0 8px rgba(255, 215, 0, 0.15);
      animation: eliteShimmer 3s ease-in-out infinite, eliteGlow 2s ease-in-out infinite alternate;
      overflow: hidden;
      position: relative;
    }
    /* foil sweep removed from tag — card-level effect handles it */
    .tag-elite::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(
        120deg, transparent 0px, transparent 3px,
        rgba(255, 215, 0, 0.08) 3px, rgba(255, 215, 0, 0.08) 6px
      );
      pointer-events: none;
    }
    /* Elite card — holographic full-card effect for Rick Toone listings */
    .elite-card {
      position: relative;
      overflow: hidden;
      border: 2px solid rgba(180, 130, 255, 0.5) !important;
      box-shadow: 0 0 18px rgba(180, 130, 255, 0.25), inset 0 0 30px rgba(180, 130, 255, 0.05);
      transform-style: preserve-3d;
      transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
      will-change: transform;
    }
    .elite-card:hover {
      box-shadow: 0 0 30px rgba(180, 130, 255, 0.4), 0 20px 40px rgba(0,0,0,0.3), inset 0 0 30px rgba(180, 130, 255, 0.08);
    }
    .elite-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 215, 0, 0.15) 0%,
        rgba(180, 130, 255, 0.1) 20%,
        rgba(255, 100, 200, 0.06) 40%,
        transparent 70%
      );
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
      z-index: 1;
    }
    .elite-card:hover::before {
      opacity: 1;
    }
    /* Holographic rainbow stripe overlay — shifts with mouse */
    .elite-card::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(
        var(--holo-angle, 135deg),
        rgba(255, 0, 0, 0.08) 0%,
        rgba(255, 165, 0, 0.08) 14%,
        rgba(255, 255, 0, 0.08) 28%,
        rgba(0, 255, 0, 0.08) 42%,
        rgba(0, 200, 255, 0.10) 57%,
        rgba(130, 80, 255, 0.10) 71%,
        rgba(255, 100, 200, 0.08) 85%,
        rgba(255, 0, 0, 0.08) 100%
      );
      background-size: 200% 200%;
      background-position: var(--holo-x, 50%) var(--holo-y, 50%);
      mix-blend-mode: screen;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
      z-index: 1;
    }
    .elite-card:hover::after {
      opacity: 1;
    }
    .elite-card > * { position: relative; z-index: 2; }
    /* Subtle shine line on the edge */
    .elite-card.tilting {
      border-image: linear-gradient(
        var(--holo-angle, 135deg),
        rgba(255, 215, 0, 0.6),
        rgba(180, 130, 255, 0.8),
        rgba(255, 100, 200, 0.6),
        rgba(0, 200, 255, 0.6),
        rgba(255, 215, 0, 0.6)
      ) 1;
    }

    @keyframes eliteShimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes eliteFoil {
      0% { transform: translateX(0%); }
      100% { transform: translateX(300%); }
    }
    @keyframes eliteGlow {
      0% { box-shadow: 0 0 6px rgba(255,215,0,0.3), inset 0 0 6px rgba(255,215,0,0.1); }
      100% { box-shadow: 0 0 14px rgba(255,215,0,0.5), inset 0 0 12px rgba(255,215,0,0.2); }
    }

    /* Kiesel/Carvin: Call my guys — neon green marquee */
    .tag-callmyguys {
      background: rgba(0, 255, 65, 0.12); color: #00ff41;
      border: 1px solid rgba(0, 255, 65, 0.4);
      text-shadow: 0 0 6px rgba(0, 255, 65, 0.6), 0 0 12px rgba(0, 255, 65, 0.3);
      width: 110px; max-width: 110px; overflow: hidden;
    }
    .tag-callmyguys .marquee-inner {
      display: inline-block; white-space: nowrap;
      animation: marqueeScroll 6s linear infinite;
    }
    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Parker: Gentleman's Choice */
    .tag-gentleman {
      background: rgba(30, 41, 59, 0.8); color: #cbd5e1;
      border: 1px solid rgba(148, 163, 184, 0.3);
      font-family: Georgia, serif; font-style: italic; letter-spacing: 0.04em;
    }

    /* Friedman: GroverBanger */
    .tag-groverbanger {
      background: rgba(249, 115, 22, 0.18); color: #fb923c;
      border: 1px solid rgba(249, 115, 22, 0.3);
    }

    /* Aristides: Goop */
    .tag-goop {
      background: rgba(0, 0, 0, 0.6); color: #555;
      border: 1px solid rgba(60, 60, 60, 0.5);
      text-shadow: 0 1px 0 #000;
    }

    /* Fender Custom Shop: Patriot */
    .tag-classico {
      background: linear-gradient(135deg, rgba(191, 30, 46, 0.2), rgba(0, 40, 104, 0.2));
      color: #f5f5f5;
      border: 1px solid rgba(191, 30, 46, 0.5);
      font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
      text-shadow: 0 0 6px rgba(191, 30, 46, 0.4);
    }

    /* Arcane Pickups: Best Pickups — golden divine glow */
    .tag-blessed {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 183, 77, 0.2));
      color: #ffd700;
      border: 1px solid rgba(255, 215, 0, 0.5);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.6), 0 0 16px rgba(255, 183, 77, 0.3);
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.15), inset 0 0 8px rgba(255, 215, 0, 0.08);
      animation: blessedGlow 3s ease-in-out infinite;
    }
    @keyframes blessedGlow {
      0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.15), inset 0 0 6px rgba(255, 215, 0, 0.06); }
      50% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.12); }
    }

    /* Eastman: Secret of the Orient */
    .tag-orient {
      background: rgba(185, 28, 28, 0.2);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.4);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
    }

    /* ESP: GOAT */
    .tag-goat {
      background: rgba(168, 85, 247, 0.15); color: #a855f7;
      border: 1px solid rgba(168, 85, 247, 0.3);
    }

    /* Castedosa: $$$ */
    .tag-castedosa {
      background: rgba(16, 185, 129, 0.15); color: #34d399;
      border: 1px solid rgba(16, 185, 129, 0.3);
      letter-spacing: 0.15em;
    }

    /* Acoustic: Chair */
    .tag-chair {
      background: rgba(139, 90, 43, 0.2); color: #c4944a;
      border: 1px solid rgba(139, 90, 43, 0.4);
    }

    /* EchoPark: Crackpipe */
    .tag-crackpipe {
      background: rgba(239, 68, 68, 0.1); color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.25);
      font-style: italic;
    }
    .tag-shred {
      background: linear-gradient(135deg, rgba(236, 72, 201, 0.25), rgba(56, 189, 248, 0.25));
      color: #fff;
      border: 1px solid rgba(236, 72, 201, 0.5);
      font-weight: 900;
      letter-spacing: 1.5px;
      font-style: italic;
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(236, 72, 201, 0.8), 0 0 12px rgba(56, 189, 248, 0.6);
      position: relative;
      overflow: hidden;
      z-index: 1;
      animation: shredPulse 1.5s ease-in-out infinite;
    }
    .tag-shred::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: shredLaser 2s linear infinite;
      z-index: -1;
    }
    @keyframes shredLaser {
      0%   { left: -100%; }
      100% { left: 200%; }
    }
    @keyframes shredPulse {
      0%, 100% { text-shadow: 0 0 6px rgba(236, 72, 201, 0.8), 0 0 12px rgba(56, 189, 248, 0.6); }
      50%      { text-shadow: 0 0 10px rgba(236, 72, 201, 1), 0 0 20px rgba(56, 189, 248, 0.9), 0 0 30px rgba(236, 72, 201, 0.4); }
    }
    .tag-dds {
      background: rgba(255, 255, 255, 0.08);
      color: #e2e8f0;
      border: 1px solid rgba(255, 255, 255, 0.25);
      font-weight: 700;
      letter-spacing: 0.3px;
      font-family: Georgia, 'Times New Roman', serif;
    }
    .tag-pervert {
      background: rgba(236, 72, 153, 0.12);
      color: #f472b6;
      border: 1px solid rgba(236, 72, 153, 0.35);
      font-weight: 700;
      letter-spacing: 0.5px;
      animation: pervertBlink 1.2s ease-in-out infinite;
    }
    @keyframes pervertBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    .tag-scam {
      background: rgba(255, 153, 51, 0.15);
      color: #ff9933;
      border: 1px solid rgba(255, 153, 51, 0.4);
      font-weight: 800;
      letter-spacing: 0.5px;
    }
    .tag-absurd-price {
      background: rgba(255, 50, 50, 0.18);
      color: #ff4444;
      border: 1px solid rgba(255, 50, 50, 0.5);
      font-weight: 800;
      letter-spacing: 0.5px;
      animation: condemnedFlicker 2s infinite;
    }
    .tag-unhinged {
      background: rgba(56, 189, 248, 0.12);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.4);
      font-weight: 800;
      letter-spacing: 0.5px;
      animation: unhingedWobble 3s ease-in-out infinite;
      display: inline-block;
    }
    @keyframes unhingedWobble {
      0%   { transform: rotate(0deg); }
      25%  { transform: rotate(0.8deg); }
      50%  { transform: rotate(0deg); }
      75%  { transform: rotate(-0.8deg); }
      100% { transform: rotate(0deg); }
    }
    .tag-mayo {
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.4);
      font-weight: 800;
      letter-spacing: 0.5px;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .tag-mayo::before,
    .tag-mayo::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.35);
      filter: blur(2px);
      z-index: -1;
      animation: mayoGloop 3s ease-in-out infinite;
    }
    .tag-mayo::before {
      width: 14px; height: 14px;
      top: -4px; left: 2px;
      animation-delay: 0s;
    }
    .tag-mayo::after {
      width: 10px; height: 10px;
      top: -2px; right: 6px;
      animation-delay: 1.5s;
    }
    @keyframes mayoGloop {
      0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
      30% { transform: translateY(-3px) scale(1.3); opacity: 0.7; }
      60% { transform: translateY(1px) scale(0.9); opacity: 0.3; }
    }
    .tag-slop {
      background: rgba(22, 101, 52, 0.3);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, 0.45);
      font-weight: 800;
      letter-spacing: 0.5px;
      text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
      position: relative;
      overflow: visible;
      z-index: 1;
    }
    /* Drip 1 — left side, slow */
    .tag-slop::before {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 18%;
      width: 5px;
      height: 0;
      background: radial-gradient(ellipse at top, rgba(34, 197, 94, 0.7), rgba(22, 163, 74, 0.3));
      border-radius: 0 0 50% 50%;
      animation: goopDrip1 3s ease-in infinite;
      z-index: -1;
    }
    /* Drip 2 — right side, offset timing */
    .tag-slop::after {
      content: '';
      position: absolute;
      bottom: -2px;
      right: 22%;
      width: 4px;
      height: 0;
      background: radial-gradient(ellipse at top, rgba(34, 197, 94, 0.6), rgba(22, 163, 74, 0.2));
      border-radius: 0 0 50% 50%;
      animation: goopDrip2 3.8s ease-in 1.2s infinite;
      z-index: -1;
    }
    @keyframes goopDrip1 {
      0%   { height: 0; opacity: 0.8; bottom: -2px; }
      15%  { height: 3px; opacity: 0.9; }
      40%  { height: 10px; opacity: 0.7; border-radius: 0 0 50% 50%; }
      60%  { height: 14px; opacity: 0.5; }
      75%  { height: 12px; opacity: 0.3; bottom: -2px; }
      85%  { height: 8px; opacity: 0; }
      100% { height: 0; opacity: 0; bottom: -2px; }
    }
    /* Drip 3 — center, via inner span, thickest + longest */
    .slop-drip3 {
      position: absolute;
      bottom: -2px;
      left: 48%;
      width: 6px;
      height: 0;
      background: radial-gradient(ellipse at top, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.35));
      border-radius: 0 0 50% 50%;
      animation: goopDrip3 4.2s ease-in 0.5s infinite;
      pointer-events: none;
    }
    @keyframes goopDrip3 {
      0%   { height: 0; opacity: 0.9; }
      10%  { height: 2px; opacity: 0.9; }
      35%  { height: 8px; opacity: 0.7; }
      55%  { height: 18px; opacity: 0.5; border-radius: 0 0 40% 40%; }
      70%  { height: 14px; opacity: 0.3; }
      85%  { height: 6px; opacity: 0; }
      100% { height: 0; opacity: 0; }
    }
    @keyframes goopDrip2 {
      0%   { height: 0; opacity: 0.7; bottom: -2px; }
      20%  { height: 4px; opacity: 0.8; }
      45%  { height: 12px; opacity: 0.6; }
      65%  { height: 16px; opacity: 0.4; border-radius: 0 0 45% 45%; }
      80%  { height: 10px; opacity: 0.2; }
      90%  { height: 5px; opacity: 0; }
      100% { height: 0; opacity: 0; }
    }

    /* ── POOP TAG (Epiphone, post-1975) ── */
    .tag-poop {
      background: rgba(101, 67, 33, 0.35);
      color: #c4956a;
      border: 1px solid rgba(139, 90, 43, 0.5);
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    /* ── CONDEMNED TAG ── */
    .tag-condemned {
      background: linear-gradient(135deg, rgba(40, 40, 35, 0.9) 0%, rgba(55, 50, 40, 0.85) 50%, rgba(35, 35, 30, 0.9) 100%);
      color: #8b9a6b;
      border: 1px solid rgba(100, 110, 70, 0.4);
      font-weight: 900;
      letter-spacing: 0.12em;
      text-shadow: 0 0 6px rgba(100, 140, 60, 0.5), 0 0 20px rgba(100, 140, 60, 0.15);
      position: relative;
      overflow: hidden;
      animation: condemnedFlicker 4s infinite;
    }
    .tag-condemned::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        linear-gradient(47deg, transparent 42%, rgba(200, 200, 180, 0.12) 42.5%, transparent 43%),
        linear-gradient(130deg, transparent 55%, rgba(200, 200, 180, 0.08) 55.5%, transparent 56%),
        linear-gradient(95deg, transparent 30%, rgba(200, 200, 180, 0.1) 30.3%, transparent 30.6%),
        linear-gradient(160deg, transparent 65%, rgba(200, 200, 180, 0.06) 65.3%, transparent 65.6%);
      pointer-events: none;
    }
    .tag-condemned::after {
      content: '';
      position: absolute;
      top: -50%; left: -100%;
      width: 40%; height: 200%;
      background: linear-gradient(90deg, transparent, rgba(200, 200, 180, 0.06), transparent);
      animation: condemnedSweep 6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes condemnedFlicker {
      0%, 88%, 100% { opacity: 1; }
      89% { opacity: 0.6; }
      90% { opacity: 1; }
      91% { opacity: 0.4; transform: skewX(-1deg); }
      92% { opacity: 1; transform: skewX(0); }
    }
    @keyframes condemnedSweep {
      0% { left: -100%; }
      100% { left: 200%; }
    }

    /* ── ROTTING TAG (180+ days) ── */
    .tag-rotting {
      background: linear-gradient(135deg, rgba(30, 65, 15, 0.95) 0%, rgba(45, 75, 10, 0.9) 50%, rgba(25, 55, 10, 0.95) 100%) !important;
      color: #7fff44 !important;
      border: 1px solid rgba(80, 200, 40, 0.45) !important;
      text-shadow: 0 0 8px rgba(80, 220, 30, 0.7), 0 0 20px rgba(80, 200, 30, 0.3) !important;
      animation: condemnedFlicker 3s infinite, rottingPulse 3s ease-in-out infinite alternate !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .tag-rotting::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(60, 180, 20, 0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    @keyframes rottingPulse {
      0% { box-shadow: 0 0 4px rgba(80, 200, 30, 0.25), inset 0 0 6px rgba(80, 200, 30, 0.1); }
      100% { box-shadow: 0 0 14px rgba(80, 200, 30, 0.55), inset 0 0 10px rgba(80, 200, 30, 0.15); }
    }

    /* ── FOSSILIZED TAG (365+ days) ── */
    .tag-fossilized {
      background: linear-gradient(135deg, rgba(90, 60, 20, 0.95) 0%, rgba(110, 75, 25, 0.9) 30%, rgba(80, 55, 15, 0.95) 60%, rgba(100, 70, 20, 0.9) 100%);
      color: #f0c860;
      border: 1px solid rgba(210, 170, 60, 0.5);
      font-weight: 900;
      letter-spacing: 0.15em;
      text-shadow: 0 0 6px rgba(220, 180, 60, 0.5), 0 0 18px rgba(200, 160, 40, 0.2);
      position: relative;
      overflow: hidden;
      animation: fossilizedCrack 6s ease-in-out infinite, fossilGlow 4s ease-in-out infinite alternate;
    }
    .tag-fossilized::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        linear-gradient(47deg, transparent 40%, rgba(220, 180, 80, 0.12) 40.5%, transparent 41%),
        linear-gradient(130deg, transparent 55%, rgba(220, 180, 80, 0.09) 55.5%, transparent 56%),
        linear-gradient(95deg, transparent 28%, rgba(220, 180, 80, 0.07) 28.3%, transparent 28.6%);
      pointer-events: none;
    }
    .tag-fossilized::after {
      content: '';
      position: absolute;
      top: -50%; left: -100%;
      width: 30%; height: 200%;
      background: linear-gradient(90deg, transparent, rgba(220, 180, 80, 0.1), transparent);
      animation: condemnedSweep 8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes fossilizedCrack {
      0%, 85%, 100% { opacity: 1; }
      87% { opacity: 0.7; }
      89% { opacity: 1; }
    }
    @keyframes fossilGlow {
      0% { box-shadow: 0 0 4px rgba(210, 170, 50, 0.2); }
      100% { box-shadow: 0 0 12px rgba(210, 170, 50, 0.45); }
    }

    /* ── CONDEMNED CARD ── */
    .condemned-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(100, 110, 70, 0.4) !important;
      box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 0, 0, 0.35);
    }
    .condemned-card:hover {
      box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.6), 0 0 22px rgba(100, 110, 70, 0.2);
      animation: condemnedShake 0.15s ease-in-out 2;
    }
    /* Crack overlay */
    .condemned-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(circle at 78% 18%, rgba(200, 200, 180, 0.14) 0%, transparent 3%),
        linear-gradient(215deg, transparent 20%, rgba(200, 200, 180, 0.16) 20.2%, transparent 20.4%),
        linear-gradient(245deg, transparent 15%, rgba(200, 200, 180, 0.14) 15.2%, transparent 15.4%),
        linear-gradient(190deg, transparent 25%, rgba(200, 200, 180, 0.12) 25.15%, transparent 25.3%),
        linear-gradient(260deg, transparent 10%, rgba(200, 200, 180, 0.15) 10.15%, transparent 10.3%),
        linear-gradient(170deg, transparent 30%, rgba(200, 200, 180, 0.10) 30.15%, transparent 30.3%),
        linear-gradient(135deg, transparent 45%, rgba(200, 200, 180, 0.08) 45.15%, transparent 45.3%),
        linear-gradient(100deg, transparent 55%, rgba(200, 200, 180, 0.09) 55.1%, transparent 55.2%),
        linear-gradient(310deg, transparent 35%, rgba(200, 200, 180, 0.07) 35.1%, transparent 35.2%),
        radial-gradient(circle at 78% 18%, transparent 8%, rgba(200, 200, 180, 0.10) 8.5%, transparent 9%),
        radial-gradient(circle at 78% 18%, transparent 14%, rgba(200, 200, 180, 0.08) 14.5%, transparent 15%),
        radial-gradient(circle at 78% 18%, transparent 22%, rgba(200, 200, 180, 0.06) 22.5%, transparent 23%);
      pointer-events: none;
      z-index: 3;
    }
    /* Cobweb — top-left corner */
    .condemned-card::after {
      content: '';
      position: absolute;
      top: -2px; left: -2px;
      width: 80px; height: 80px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg stroke='rgba(180,180,170,0.25)' fill='none' stroke-width='0.6'%3E%3Cpath d='M0,0 Q20,8 40,40'/%3E%3Cpath d='M0,0 Q8,20 40,40'/%3E%3Cpath d='M0,0 L40,40'/%3E%3Cpath d='M0,0 Q30,5 55,25'/%3E%3Cpath d='M0,0 Q5,30 25,55'/%3E%3Cpath d='M0,5 Q15,15 35,20' /%3E%3Cpath d='M5,0 Q15,15 20,35' /%3E%3Cpath d='M0,15 Q12,18 25,30' /%3E%3Cpath d='M15,0 Q18,12 30,25' /%3E%3Cpath d='M0,28 Q10,22 20,25 Q28,30 40,40' /%3E%3Cpath d='M28,0 Q22,10 25,20 Q30,28 40,40' /%3E%3C/g%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.85;
      pointer-events: none;
      z-index: 3;
    }
    .condemned-card > * { position: relative; z-index: 2; }

    .condemned-particles {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: 4;
      overflow: hidden;
    }
    .condemned-particles .dust {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: dustFloat linear infinite;
    }
    @keyframes dustFloat {
      0%   { opacity: 0; transform: translateY(0) translateX(0); }
      15%  { opacity: 0.6; }
      85%  { opacity: 0.3; }
      100% { opacity: 0; transform: translateY(-40px) translateX(15px); }
    }
    @keyframes condemnedShake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-1px); }
      75% { transform: translateX(1px); }
    }

    /* ── DISCORD USER TAGS ── */

    /* Garbage — putrid brown-green with stink waves and fly particles */
    .tag-garbage {
      background: linear-gradient(135deg, rgba(85, 90, 40, 0.5) 0%, rgba(100, 75, 30, 0.45) 50%, rgba(70, 80, 35, 0.5) 100%);
      color: #b5a84c;
      border: 1px solid rgba(130, 120, 50, 0.5);
      font-weight: 800;
      letter-spacing: 0.1em;
      position: relative;
      overflow: visible;
      animation: garbageWobble 3s ease-in-out infinite;
    }
    /* Stink wave 1 */
    .tag-garbage::before {
      content: '〰';
      position: absolute;
      top: -12px; left: 20%;
      font-size: 0.55rem;
      color: rgba(140, 160, 50, 0.6);
      animation: stinkFloat1 2.5s ease-in-out infinite;
      pointer-events: none;
    }
    /* Stink wave 2 */
    .tag-garbage::after {
      content: '〰';
      position: absolute;
      top: -14px; right: 10%;
      font-size: 0.5rem;
      color: rgba(160, 180, 60, 0.5);
      animation: stinkFloat2 3s ease-in-out infinite 0.8s;
      pointer-events: none;
    }
    /* Fly particles — spawned by JS, orbit around the tag */
    .garbage-fly {
      position: absolute;
      width: 3px; height: 3px;
      background: rgba(60, 50, 20, 0.9);
      border-radius: 50%;
      pointer-events: none;
      z-index: 10;
      box-shadow: 0 0 2px rgba(60, 50, 20, 0.5);
    }
    .garbage-fly:nth-child(1) { animation: flyBuzz1 2.2s ease-in-out infinite; }
    .garbage-fly:nth-child(2) { animation: flyBuzz2 2.8s ease-in-out infinite 0.5s; }
    .garbage-fly:nth-child(3) { animation: flyBuzz3 1.9s ease-in-out infinite 1.2s; }

    @keyframes stinkFloat1 {
      0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.3; }
      50% { transform: translateY(-8px) scaleX(1.2); opacity: 0.8; }
    }
    @keyframes stinkFloat2 {
      0%, 100% { transform: translateY(0) scaleX(0.9); opacity: 0.2; }
      50% { transform: translateY(-10px) scaleX(1.1); opacity: 0.7; }
    }
    @keyframes garbageWobble {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-1.5deg); }
      75% { transform: rotate(1.5deg); }
    }
    @keyframes flyBuzz1 {
      0%   { top: -6px;  left: -4px;  }
      25%  { top: -12px; left: 50%;   }
      50%  { top: -4px;  left: 105%;  }
      75%  { top: 8px;   left: 60%;   }
      100% { top: -6px;  left: -4px;  }
    }
    @keyframes flyBuzz2 {
      0%   { top: -10px; left: 80%;  }
      33%  { top: 6px;   left: 110%; }
      66%  { top: -8px;  left: 30%;  }
      100% { top: -10px; left: 80%;  }
    }
    @keyframes flyBuzz3 {
      0%   { top: 4px;   left: 110%; }
      25%  { top: -14px; left: 70%;  }
      50%  { top: -8px;  left: -8px; }
      75%  { top: 6px;   left: 40%;  }
      100% { top: 4px;   left: 110%; }
    }

    /* Grail — gold/amber glow, reverent */
    .tag-grail {
      background: linear-gradient(135deg, rgba(180, 140, 20, 0.3) 0%, rgba(220, 180, 50, 0.25) 50%, rgba(180, 140, 20, 0.3) 100%);
      background-size: 200% 200%;
      color: #f0d060;
      border: 1px solid rgba(220, 180, 50, 0.5);
      font-weight: 900;
      letter-spacing: 0.12em;
      text-shadow: 0 0 6px rgba(240, 200, 60, 0.4);
      animation: grailGlow 3s ease-in-out infinite alternate;
    }
    @keyframes grailGlow {
      0% { box-shadow: 0 0 4px rgba(220, 180, 50, 0.2); background-position: 0% 50%; }
      100% { box-shadow: 0 0 12px rgba(220, 180, 50, 0.4); background-position: 100% 50%; }
    }

    /* Steal — green flash, sneaky */
    .tag-steal {
      background: rgba(34, 180, 85, 0.2);
      color: #5aea95;
      border: 1px solid rgba(34, 180, 85, 0.45);
      font-weight: 800;
      letter-spacing: 0.08em;
      position: relative;
      overflow: hidden;
    }
    .tag-steal::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(90, 234, 149, 0.2), transparent);
      animation: stealFlash 2.5s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes stealFlash {
      0% { left: -100%; }
      100% { left: 200%; }
    }

    /* Meme — rainbow cycling, chaotic */
    .tag-meme {
      background: linear-gradient(135deg,
        rgba(255, 100, 100, 0.25), rgba(255, 200, 50, 0.25),
        rgba(100, 255, 100, 0.25), rgba(100, 200, 255, 0.25),
        rgba(200, 100, 255, 0.25));
      background-size: 300% 300%;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      font-weight: 800;
      animation: memeRainbow 4s linear infinite;
    }
    @keyframes memeRainbow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ── ROTTING CARD (180-364 days) — toxic green fog rising from bottom ── */
    .rotting-card {
      border: 1px solid rgba(60, 180, 30, 0.25) !important;
      box-shadow: inset 0 0 40px rgba(40, 100, 15, 0.15), 0 0 12px rgba(40, 80, 10, 0.2);
    }
    .rotting-card:hover {
      box-shadow: inset 0 0 55px rgba(40, 100, 15, 0.25), 0 0 20px rgba(60, 140, 20, 0.2);
      animation: condemnedShake 0.15s ease-in-out 2;
    }
    /* Green toxic fog rising from bottom */
    .rotting-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 30% 100%, rgba(60, 180, 30, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 95%, rgba(40, 150, 20, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 85%, rgba(80, 200, 40, 0.08) 0%, transparent 60%),
        linear-gradient(to top, rgba(50, 160, 25, 0.12) 0%, rgba(40, 120, 15, 0.06) 30%, transparent 60%);
      pointer-events: none;
      z-index: 3;
      animation: rottingFogCard 5s ease-in-out infinite alternate;
    }
    /* Drip streaks from top */
    .rotting-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        linear-gradient(180deg, rgba(60, 180, 30, 0.10) 0%, transparent 25%) no-repeat 15% 0 / 2px 35%,
        linear-gradient(180deg, rgba(60, 180, 30, 0.08) 0%, transparent 20%) no-repeat 40% 0 / 1.5px 28%,
        linear-gradient(180deg, rgba(60, 180, 30, 0.12) 0%, transparent 30%) no-repeat 65% 0 / 2px 40%,
        linear-gradient(180deg, rgba(60, 180, 30, 0.07) 0%, transparent 15%) no-repeat 85% 0 / 1px 20%;
      pointer-events: none;
      z-index: 3;
      opacity: 0.8;
    }
    @keyframes rottingFogCard {
      0% { opacity: 0.6; }
      100% { opacity: 1; }
    }

    /* ── FOSSILIZED CARD (365+ days) — amber sediment layers, geological feel ── */
    .fossilized-card {
      border: 1px solid rgba(200, 160, 50, 0.3) !important;
      box-shadow: inset 0 0 40px rgba(100, 70, 20, 0.2), 0 0 12px rgba(80, 50, 10, 0.2);
    }
    .fossilized-card:hover {
      box-shadow: inset 0 0 55px rgba(100, 70, 20, 0.3), 0 0 20px rgba(180, 140, 40, 0.15);
      animation: condemnedShake 0.2s ease-in-out 1;
    }
    /* Horizontal sediment/strata layers */
    .fossilized-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        linear-gradient(180deg,
          transparent 10%,
          rgba(180, 140, 50, 0.06) 12%, transparent 14%,
          transparent 28%,
          rgba(160, 120, 40, 0.08) 30%, transparent 32%,
          transparent 48%,
          rgba(200, 160, 60, 0.07) 50%, transparent 52%,
          transparent 68%,
          rgba(170, 130, 45, 0.09) 70%, transparent 72%,
          transparent 88%,
          rgba(190, 150, 55, 0.06) 90%, transparent 92%
        ),
        radial-gradient(ellipse at 50% 50%, rgba(180, 140, 40, 0.06) 0%, transparent 70%);
      pointer-events: none;
      z-index: 3;
    }
    /* Amber vignette + embedded-in-stone feel */
    .fossilized-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(100, 70, 20, 0.18) 100%),
        linear-gradient(135deg, rgba(200, 160, 50, 0.05) 0%, transparent 50%);
      pointer-events: none;
      z-index: 3;
      animation: fossilAmber 6s ease-in-out infinite alternate;
    }
    @keyframes fossilAmber {
      0% { opacity: 0.7; }
      100% { opacity: 1; }
    }

    /* ── ON FIRE CARD (3+ offers within 2 hours of listing) ── */
    .onfire-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 90, 30, 0.5) !important;
      box-shadow: inset 0 0 35px rgba(200, 60, 20, 0.15), 0 0 12px rgba(220, 70, 20, 0.2);
    }
    .onfire-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 20% 100%, rgba(255, 90, 20, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(230, 70, 15, 0.14) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(255, 110, 30, 0.10) 0%, transparent 55%),
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 8px,
          rgba(220, 80, 20, 0.04) 8px,
          rgba(220, 80, 20, 0.04) 9px
        );
      pointer-events: none;
      z-index: 1;
      animation: onfireBreath 3s ease-in-out infinite;
    }
    .onfire-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 45%;
      background: linear-gradient(to top,
        rgba(220, 60, 15, 0.20) 0%,
        rgba(240, 90, 30, 0.10) 40%,
        transparent 100%
      );
      pointer-events: none;
      z-index: 1;
      animation: onfireFloor 4s ease-in-out infinite alternate;
    }
    .onfire-card > * { position: relative; z-index: 2; }
    @keyframes onfireBreath {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    @keyframes onfireFloor {
      0% { opacity: 0.7; transform: scaleY(0.9); }
      100% { opacity: 1; transform: scaleY(1.15); }
    }
    .onfire-card:hover {
      border-color: rgba(255, 90, 30, 0.65) !important;
      box-shadow: inset 0 0 50px rgba(200, 60, 20, 0.22), 0 0 20px rgba(220, 70, 20, 0.3);
    }

    /* ── PRICE DROP BADGE ── */
    .price-drop {
      gap: 0.3rem;
      font-weight: 800;
      background: rgba(16, 185, 129, 0.18);
      color: #059669;
      animation: dropPulse 2s ease-in-out 1;
    }
    @keyframes dropPulse {
      0%, 100% { box-shadow: none; }
      50% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
    }
    .price-drop .old-price {
      text-decoration: line-through;
      opacity: 0.6;
      font-weight: 600;
    }
    .price-drop .drop-amount {
      font-size: 0.8rem;
    }

    /* ── SIMILAR BUTTON ── */
    .similar-btn {
      display: inline-block;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.6rem;
      font-weight: 600;
      font-family: inherit;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .similar-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* Price history button on cards */
    .price-history-btn {
      display: inline-flex;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      width: 22px;
      height: 22px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.65rem;
      transition: all 0.15s;
      padding: 0;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .price-history-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.1); }
    .price-history-btn svg { width: 12px; height: 12px; fill: currentColor; }

    /* ── AUTH UI ── */
    .auth-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0 0.75rem;
      border-radius: 8px;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
    }
    .auth-btn:hover { border-color: var(--accent); color: var(--accent); }
    .auth-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .auth-btn img { width: 22px; height: 22px; border-radius: 50%; }
    .user-menu {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .user-menu .auth-btn { padding: 0 0.6rem 0 0.4rem; }

    /* ── VOTE CONTROLS ── */
    .vote-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      flex-shrink: 0;
      min-width: 32px;
    }
    .vote-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 6px;
      font-size: 1rem;
      line-height: 1;
      transition: all 0.15s ease;
      opacity: 0.5;
      border-radius: 4px;
    }
    .vote-btn:hover { opacity: 1; transform: scale(1.2); background: rgba(255,255,255,0.05); }
    .vote-btn:active { transform: scale(0.9); }
    .vote-btn.active-up { color: #10b981; opacity: 1; transform: scale(1.15); text-shadow: 0 0 8px rgba(16,185,129,0.5); }
    .vote-btn.active-down { color: #ef4444; opacity: 1; transform: scale(1.15); text-shadow: 0 0 8px rgba(239,68,68,0.5); }
    .vote-count {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
      line-height: 1;
      min-width: 20px;
      text-align: center;
    }
    .vote-count.positive { color: #10b981; }
    .vote-count.negative { color: #ef4444; }

    /* ── COMMENTS ── */
    .comments-toggle {
      background: rgba(139, 141, 155, 0.1);
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.75rem;
      font-family: inherit;
      padding: 0.25rem 0.6rem;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      white-space: nowrap;
    }
    .comments-toggle:hover { color: var(--accent); border-color: var(--accent); background: rgba(168, 85, 247, 0.1); }
    .comments-toggle svg { width: 13px; height: 13px; fill: currentColor; }
    .comments-toggle .comment-count {
      background: var(--accent);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }
    .comments-toggle .comment-count.zero {
      background: rgba(139, 141, 155, 0.3);
    }

    .comments-panel {
      display: none;
      border-top: 1px solid var(--border);
      padding: 0.75rem 1rem;
      background: var(--bg);
      grid-column: 1 / -1;
      border-radius: 0 0 12px 12px;
    }
    .comments-panel.open { display: block; }
    .comment-list { margin-bottom: 0.5rem; }
    .comment-item {
      display: flex;
      gap: 0.5rem;
      padding: 0.4rem 0;
      font-size: 0.82rem;
    }
    .comment-item + .comment-item { border-top: 1px solid var(--border); }
    .comment-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .comment-body { min-width: 0; flex: 1; }
    .comment-user { font-weight: 600; color: var(--accent); font-size: 0.78rem; }
    .comment-text { color: var(--text); line-height: 1.4; word-break: break-word; }
    .comment-time { font-size: 0.7rem; color: var(--text-muted); }
    .comment-form {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }
    .comment-input {
      flex: 1;
      padding: 0.4rem 0.6rem;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 0.82rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
    }
    .comment-input:focus { border-color: var(--accent); }
    .comment-input::placeholder { color: var(--text-muted); }
    .comment-submit {
      background: var(--accent);
      border: none;
      color: #fff;
      padding: 0.4rem 0.75rem;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .comment-submit:hover { opacity: 0.85; }
    .comment-login-msg {
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .comment-login-msg a { color: var(--accent); text-decoration: none; }
    .comment-login-msg a:hover { text-decoration: underline; }

    /* ── PRICE ALERTS & COMPARE ── */
    .alert-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      background: var(--accent);
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
    }

    /* ── TRENDING BADGE ── */
    .trending-badge {
      background: rgba(255, 107, 53, 0.2);
      color: var(--reverb);
      font-weight: 700;
    }
    /* ── ZEITGEIST ── */
    .badge-zeitgeist {
      background: linear-gradient(135deg, rgba(75, 0, 130, 0.35), rgba(0, 128, 128, 0.25));
      color: #7dd3c0;
      border: 1px solid rgba(125, 211, 192, 0.4);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-shadow: 0 0 6px rgba(125, 211, 192, 0.5), 0 0 12px rgba(75, 0, 130, 0.3);
      animation: zeitgeistPulse 4s ease-in-out infinite;
    }
    @keyframes zeitgeistPulse {
      0%, 100% { text-shadow: 0 0 6px rgba(125, 211, 192, 0.5), 0 0 12px rgba(75, 0, 130, 0.3); }
      50% { text-shadow: 0 0 10px rgba(125, 211, 192, 0.8), 0 0 20px rgba(75, 0, 130, 0.5); }
    }
    /* ── EGREGORE ── */
    .badge-egregore {
      background: linear-gradient(135deg, rgba(80, 0, 0, 0.4), rgba(30, 0, 50, 0.5), rgba(80, 0, 0, 0.4));
      background-size: 300% 300%;
      color: #e8c4c4;
      border: 1px solid rgba(180, 60, 60, 0.5);
      font-weight: 900;
      letter-spacing: 0.12em;
      text-shadow: 0 0 8px rgba(180, 60, 60, 0.7), 0 0 16px rgba(120, 0, 60, 0.4);
      animation: egregoreDrift 6s ease-in-out infinite;
    }
    .badge-egregore::before {
      content: '◬';
      margin-right: 2px;
      animation: egregoreFlicker 2s steps(3) infinite;
    }
    .badge-egregore::after {
      content: '◬';
      margin-left: 2px;
      animation: egregoreFlicker 2s steps(3) infinite reverse;
    }
    @keyframes egregoreDrift {
      0%, 100% { background-position: 0% 50%; text-shadow: 0 0 8px rgba(180, 60, 60, 0.7), 0 0 16px rgba(120, 0, 60, 0.4); }
      33% { background-position: 100% 50%; }
      66% { background-position: 50% 100%; text-shadow: 0 0 14px rgba(180, 60, 60, 0.9), 0 0 24px rgba(120, 0, 60, 0.6); }
    }
    @keyframes egregoreFlicker {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }

    .status-badge {
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .status-sold {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }
    .status-removed {
      background: rgba(139, 141, 155, 0.2);
      color: var(--text-muted);
    }

    /* Dim sold/removed cards */
    .link-card.is-sold, .link-card.is-removed {
      opacity: 0.55;
    }
    .link-card.is-sold:hover, .link-card.is-removed:hover {
      opacity: 0.85;
    }

    .seller-drop {
      background: rgba(245, 158, 11, 0.15);
      color: #f59e0b;
    }

    /* ── BOOKMARK / WATCHLIST ── */
    .bookmark-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      opacity: 0.7;
      padding: 0;
      flex-shrink: 0;
      margin-left: auto;
    }
    .bookmark-btn:focus { opacity: 1; }
    .bookmark-btn svg { width: 14px; height: 14px; fill: none; stroke: rgba(255,255,255,0.8); stroke-width: 2; transition: all 0.2s; }
    .bookmark-btn.saved { background: var(--accent); border-color: var(--accent); }
    .bookmark-btn.saved svg { fill: #fff; stroke: #fff; }
    .bookmark-btn:hover:not(.saved) { border-color: var(--accent); }
    .bookmark-btn:hover:not(.saved) svg { stroke: var(--accent); }

    /* ── ADMIN GEAR MENU ── */
    .admin-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--accent);
      cursor: pointer;
      transition: all 0.2s;
    }
    .admin-menu-toggle:hover { background: var(--surface-hover); border-color: var(--accent); }
    .admin-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      min-width: 160px;
      padding: 6px 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      z-index: 200;
    }
    .admin-menu-wrap.open .admin-dropdown { display: block; }
    .admin-dropdown a {
      display: block;
      padding: 8px 16px;
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      transition: background 0.15s;
    }
    .admin-dropdown a:hover { background: var(--surface-hover); color: var(--accent); }

    .admin-remove-btn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(239, 68, 68, 0.4);
      background: rgba(239, 68, 68, 0.1);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      opacity: 0.6;
      padding: 0;
      flex-shrink: 0;
      font-size: 0.65rem;
      color: #ef4444;
      line-height: 1;
    }
    .admin-remove-btn:hover {
      opacity: 1;
      background: rgba(239, 68, 68, 0.25);
      border-color: #ef4444;
      transform: scale(1.1);
    }

    .watchlist-toggle {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.82rem;
      color: var(--text-muted);
      padding: 0 0.7rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: none;
      transition: all 0.2s;
    }
    .watchlist-toggle:hover { border-color: var(--accent); color: var(--accent); }
    .watchlist-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
    .watchlist-toggle .wl-count {
      background: var(--accent);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }

    .watchlist-panel {
      display: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
    .watchlist-panel.open { display: block; }
    .watchlist-panel h3 { margin: 0 0 0.75rem; font-size: 1rem; }
    .watchlist-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
    }
    .watchlist-item:last-child { border-bottom: none; }
    .watchlist-item img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; }
    .watchlist-item .wl-info { flex: 1; min-width: 0; }
    .watchlist-item .wl-title { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .watchlist-item .wl-price { font-size: 0.8rem; color: var(--accent); font-weight: 700; }
    .watchlist-item .wl-status { font-size: 0.7rem; color: var(--text-muted); }
    .watchlist-item .wl-remove {
      background: none;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.25rem 0.5rem;
      cursor: pointer;
      font-size: 0.7rem;
      color: var(--text-muted);
      transition: all 0.2s;
    }
    .watchlist-item .wl-remove:hover { border-color: #ef4444; color: #ef4444; }
    .watchlist-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 1rem; }

    .reverb-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.25rem;
    }
    .reverb-tag {
      font-weight: 600;
    }
    .offers-tag {
      background: rgba(59, 130, 246, 0.15);
      color: #3b82f6;
    }
    .shipping-tag {
      background: rgba(139, 141, 155, 0.15);
      color: var(--text-muted);
    }
    .views-tag {
      background: rgba(168, 85, 247, 0.12);
      color: #a855f7;
    }
    .watchers-tag {
      background: rgba(236, 72, 153, 0.12);
      color: #ec4899;
    }

    .price-guide-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.65rem;
      padding: 0.15rem 0.5rem;
      border-radius: 4px;
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.25);
      text-decoration: none;
      transition: all 0.15s ease;
      cursor: pointer;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .price-guide-link:hover {
      background: rgba(245, 158, 11, 0.2);
      border-color: rgba(245, 158, 11, 0.4);
      color: #fbbf24;
      text-decoration: none;
    }
    .price-guide-link svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }
    .avg-price-badge {
      background: rgba(34, 197, 94, 0.1);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.2);
      font-weight: 600;
    }

    .days-on-market {
      background: rgba(168, 85, 247, 0.15);
      color: var(--accent);
      font-weight: 600;
    }

    /* ── MODAL PRICE ALERT BUTTON ── */
    .set-price-alert-btn {
      background: var(--accent);
      border: none;
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      margin-top: 0.75rem;
      transition: all 0.15s;
    }
    .set-price-alert-btn:hover { opacity: 0.85; }