<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║                        KRAY L2 NFT COLLECTION PAGE                           ║
║                                                                              ║
║   Template/Reference for NFT System Implementation                           ║
║   Created: January 2026                                                      ║
║   Status: TEMPLATE - Ready for integration when backend is implemented       ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

═══════════════════════════════════════════════════════════════════════════════
                           INTEGRATION GUIDE
═══════════════════════════════════════════════════════════════════════════════

CURRENT STATE:
- This page works with Cosmic Vision cards as demo data
- Uses /api/cosmic-cards/gallery to load NFTs
- Bridge functionality connects to existing Cosmic Vision routes

WHEN NFT L2 SYSTEM IS IMPLEMENTED, DO THE FOLLOWING:

───────────────────────────────────────────────────────────────────────────────
1. BACKEND - Create NFT L2 Routes (/KRAY-SPACE/backend-render/routes/)
───────────────────────────────────────────────────────────────────────────────

Create file: l2-nfts.js

Routes needed:
  GET  /api/l2/nfts/:address           - List all NFTs owned by address
  GET  /api/l2/nfts/collection/:id     - List NFTs in a collection
  GET  /api/l2/nfts/token/:id          - Get single NFT details
  POST /api/l2/nfts/transfer           - Transfer NFT (1 KRAY fee)
  POST /api/l2/nfts/:id/bridge-to-l1   - Prepare bridge inscription
  POST /api/l2/nfts/:id/confirm-bridge - Confirm bridge after broadcast

Response format expected by this page:
{
  success: true,
  nfts: [
    {
      id: "uuid",
      collection_id: "cosmic_vision",
      collection_name: "Cosmic Vision",
      token_id: 42,
      name: "NFT Name",
      description: "Description text",
      image_url: "https://...",
      bridge_status: "ACTIVE" | "BRIDGED" | "RETURNED",
      inscription_id: "ordinal-id-if-bridged",
      bridged_at: "2026-01-20T...",
      bridged_tx: "bitcoin-tx-id",
      owner_address: "bc1q...",
      attributes: {
        rarity: "LEGENDARY",
        element: "STELLAR",
        power: 85
      },
      created_at: "2026-01-20T..."
    }
  ]
}

───────────────────────────────────────────────────────────────────────────────
2. DATABASE - Create Tables (Supabase)
───────────────────────────────────────────────────────────────────────────────

Table: l2_nfts
  - id UUID PRIMARY KEY
  - collection_id VARCHAR(50)
  - token_id INT
  - owner_address VARCHAR(100)
  - name VARCHAR(255)
  - description TEXT
  - image_url TEXT
  - metadata JSONB
  - bridge_status VARCHAR(20) DEFAULT 'ACTIVE'
  - inscription_id VARCHAR(100)
  - bridged_at TIMESTAMP
  - bridged_tx VARCHAR(100)
  - created_at TIMESTAMP DEFAULT NOW()

Table: l2_collections (optional)
  - id VARCHAR(50) PRIMARY KEY
  - name VARCHAR(255)
  - description TEXT
  - image_url TEXT
  - total_supply INT
  - creator_address VARCHAR(100)

───────────────────────────────────────────────────────────────────────────────
3. THIS FILE - Update API Calls
───────────────────────────────────────────────────────────────────────────────

Search for "TODO" comments in this file and update:

A) In loadNFTs() function (~line 1470):
   CHANGE FROM:
     const response = await fetch(`${API_BASE}/api/cosmic-cards/gallery`);
   
   CHANGE TO:
     const response = await fetch(`${KRAY_API}/api/l2/nfts/${address}`);

B) In loadNFTs() - remove the data transformation (~line 1480):
   The API should return data in the correct format already.
   Remove the .map() transformation block.

C) In confirmTransfer() function (~line 1560):
   UNCOMMENT the real API call:
     const response = await fetch(`${KRAY_API}/api/l2/nfts/transfer`, {...});
   
   REMOVE the simulated success.

D) In loadBridgeFees() function (~line 1600):
   CHANGE FROM:
     const response = await fetch(`${API_BASE}/api/cosmic-cards/${currentNFT.id}/bridge-to-l1`, {...});
   
   CHANGE TO:
     const response = await fetch(`${KRAY_API}/api/l2/nfts/${currentNFT.id}/bridge-to-l1`, {...});

E) In confirmBridge() function (~line 1640):
   CHANGE FROM:
     await fetch(`${API_BASE}/api/cosmic-cards/${currentNFT.id}/confirm-bridge`, {...});
   
   CHANGE TO:
     await fetch(`${KRAY_API}/api/l2/nfts/${currentNFT.id}/confirm-bridge`, {...});

───────────────────────────────────────────────────────────────────────────────
4. SERVER - Add Route to Serve This Page
───────────────────────────────────────────────────────────────────────────────

In /KRAY-SPACE/backend-render/index.js (or server.js):

  // Serve NFT L2 page
  app.get('/nfts', (req, res) => {
    res.sendFile(path.join(__dirname, 'nft-l2.html'));
  });

Or if this stays in Cosmic Vision project, add to server.js:

  app.get('/nfts', (req, res) => {
    res.sendFile(path.join(__dirname, 'nft-l2.html'));
  });

───────────────────────────────────────────────────────────────────────────────
5. HEADER - Add Link in Navigation
───────────────────────────────────────────────────────────────────────────────

In header-component.js, add NFTs link to navigation:

  <a href="/nfts" class="kray-nav-link ${active === 'nfts' ? 'active' : ''}">NFTs</a>

───────────────────────────────────────────────────────────────────────────────
6. EXTENSION PROD - Add Methods (Future)
───────────────────────────────────────────────────────────────────────────────

In /KRAY-SPACE/extension-prod/content/injected.js, add:

  window.krayWallet.getNFTs = async function() {
    const address = await this.getAddress();
    const response = await fetch(`${API}/api/l2/nfts/${address}`);
    return response.json();
  };

  window.krayWallet.transferNFT = async function(tokenId, toAddress) {
    const fromAddress = await this.getAddress();
    const message = `Transfer NFT ${tokenId} to ${toAddress}`;
    const signature = await this.signMessage(message);
    const response = await fetch(`${API}/api/l2/nfts/transfer`, {
      method: 'POST',
      body: JSON.stringify({ tokenId, fromAddress, toAddress, signature })
    });
    return response.json();
  };

───────────────────────────────────────────────────────────────────────────────
7. COSMIC VISION - Connect to L2 System
───────────────────────────────────────────────────────────────────────────────

When minting Cosmic Vision cards, also register in l2_nfts table:

In /KRAY-COSMIC-CARDS/src/cosmic-cards-routes.js POST /mint:

  // After creating card in Supabase
  const card = await CosmicCards.createVisionCard(vision, ownerAddress);
  
  // ADD: Register in L2 NFT system
  await registerL2NFT({
    collection_id: 'cosmic_vision',
    token_id: card.card_number,
    owner_address: ownerAddress,
    name: card.story_title,
    image_url: card.card_image_url,
    metadata: {
      rarity: card.card_rarity,
      element: card.element,
      power: card.cosmic_power
    }
  });

───────────────────────────────────────────────────────────────────────────────
8. MIGRATION - Sync Existing Cards
───────────────────────────────────────────────────────────────────────────────

SQL to migrate existing Cosmic Vision cards to l2_nfts:

  INSERT INTO l2_nfts (
    collection_id, token_id, owner_address, name, 
    image_url, metadata, bridge_status, inscription_id,
    bridged_at, bridged_tx, created_at
  )
  SELECT 
    'cosmic_vision',
    card_number,
    COALESCE(owner_address, 'unknown'),
    story_title,
    card_image_url,
    jsonb_build_object(
      'rarity', card_rarity,
      'element', element,
      'power', cosmic_power
    ),
    COALESCE(bridge_status, 'ACTIVE'),
    inscription_id,
    bridged_at,
    bridged_tx,
    created_at
  FROM cosmic_cards
  WHERE status = 'COMPLETE';

═══════════════════════════════════════════════════════════════════════════════
                              ARCHITECTURE
═══════════════════════════════════════════════════════════════════════════════

                    ┌─────────────────────────────────────┐
                    │         nft-l2.html (this file)     │
                    │                                     │
                    │  - Shows user's NFT collection      │
                    │  - Transfer between addresses       │
                    │  - Bridge to Bitcoin L1             │
                    └───────────────┬─────────────────────┘
                                    │
                    ┌───────────────▼─────────────────────┐
                    │         KRAY L2 API                 │
                    │                                     │
                    │  GET  /api/l2/nfts/:address         │
                    │  POST /api/l2/nfts/transfer         │
                    │  POST /api/l2/nfts/:id/bridge-to-l1 │
                    └───────────────┬─────────────────────┘
                                    │
          ┌─────────────────────────┼─────────────────────────┐
          │                         │                         │
          ▼                         ▼                         ▼
   ┌─────────────┐          ┌─────────────┐          ┌─────────────┐
   │  Supabase   │          │  Extension  │          │  Bitcoin    │
   │  l2_nfts    │          │  Prod       │          │  Ordinals   │
   │             │          │  (wallet)   │          │  (L1)       │
   └─────────────┘          └─────────────┘          └─────────────┘

═══════════════════════════════════════════════════════════════════════════════
                            BRIDGE FLOW
═══════════════════════════════════════════════════════════════════════════════

L2 → L1 (Implemented):
  1. User clicks "Bridge to Bitcoin" on NFT
  2. Backend compresses image to 400x400 AVIF
  3. Backend prepares inscription PSBT
  4. User signs with KRAY Wallet
  5. Transaction broadcast to Bitcoin
  6. Backend marks NFT as BRIDGED (gray in UI)

L1 → L2 (Future):
  1. User sends Ordinal to KRAY bridge address
  2. Backend monitors bridge address for inscriptions
  3. Backend matches inscription_id to BRIDGED NFT
  4. NFT status updated to RETURNED
  5. NFT becomes active again in L2

═══════════════════════════════════════════════════════════════════════════════
                        RELATED FILES
═══════════════════════════════════════════════════════════════════════════════

Cosmic Vision Project:
  /KRAY-COSMIC-CARDS/mint.html                    - Mint new cards
  /KRAY-COSMIC-CARDS/cards-gallery.html           - View all cards
  /KRAY-COSMIC-CARDS/src/cosmic-cards-routes.js   - Bridge routes (working)
  /KRAY-COSMIC-CARDS/src/cosmic-cards.js          - Card generation + compression

KRAY Backend (to be modified):
  /KRAY-SPACE/backend-render/routes/              - Add l2-nfts.js here
  /KRAY-SPACE/backend-render/index.js             - Add routes here

KRAY Extension:
  /KRAY-SPACE/extension-prod/content/injected.js  - Add NFT methods

Documentation:
  /KRAY-COSMIC-CARDS/docs/FUTURE_NFT_INTEGRATION.md

═══════════════════════════════════════════════════════════════════════════════
                           CHECKLIST
═══════════════════════════════════════════════════════════════════════════════

[ ] Create l2_nfts table in Supabase
[ ] Create l2-nfts.js routes in backend
[ ] Add routes to index.js
[ ] Update API calls in this file (search for TODO)
[ ] Add /nfts route to server
[ ] Add NFTs link to header navigation
[ ] Add getNFTs() to extension injected.js
[ ] Connect Cosmic Vision mint to l2_nfts
[ ] Migrate existing cards
[ ] Test full flow

═══════════════════════════════════════════════════════════════════════════════

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>L2 NFT Explorer - KRAY SPACE</title>
    <link rel="icon" type="image/png" sizes="16x16" href="public/images/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="public/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="48x48" href="public/images/favicon-48x48.png">
    <link rel="apple-touch-icon" sizes="128x128" href="public/images/favicon-128x128.png">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="header-component.js"></script>
    <style>
        :root {
            --bg-dark: #0a0a0f;
            --bg-card: #1a1a2e;
            --bg-card-hover: #252540;
            --green-matrix: #00ff00;
            --gold-sacred: #ffd700;
            --purple-void: #8800ff;
            --cyan-mirror: #00ffff;
            --bitcoin-orange: #f7931a;
            --text-light: #e0e0e0;
            --text-dim: #888;
            --border-subtle: rgba(255,255,255,0.1);
            
            /* Status Colors */
            --status-active: #00ff00;
            --status-bridged: #f7931a;
            --status-returned: #00ffff;
        }
        
        *, html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: var(--bg-dark);
            color: var(--text-light);
            font-family: 'Orbitron', sans-serif;
            min-height: 100vh;
            padding-top: 0;
        }
        
        /* ═══════════════════════════════════════════════════════════
           PAGE HEADER
           ═══════════════════════════════════════════════════════════ */
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 80px 20px 0 20px;
        }
        
        .page-header h1 {
            font-family: 'Press Start 2P', monospace;
            font-size: 20px;
            color: var(--gold-sacred);
            text-shadow: 0 0 20px var(--gold-sacred);
            margin-bottom: 10px;
        }
        
        .page-header p {
            color: var(--text-dim);
            font-size: 14px;
        }
        
        /* ═══════════════════════════════════════════════════════════
           STATS BAR (Centralized)
           ═══════════════════════════════════════════════════════════ */
        
        .stats-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 20px 40px;
            margin: 0 auto 30px;
            max-width: 650px;
            background: linear-gradient(135deg, rgba(26,26,46,0.8) 0%, rgba(10,10,15,0.9) 100%);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            backdrop-filter: blur(10px);
        }
        
        .stat-item {
            text-align: center;
            min-width: 80px;
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: var(--gold-sacred);
            text-shadow: 0 0 15px rgba(255,215,0,0.3);
        }
        
        .stat-value.active {
            color: var(--status-active);
            text-shadow: 0 0 15px rgba(0,255,0,0.3);
        }
        
        .stat-value.bridged {
            color: var(--bitcoin-orange);
            text-shadow: 0 0 15px rgba(247,147,26,0.3);
        }
        
        .stat-value.listed {
            color: #a78bfa;
            text-shadow: 0 0 15px rgba(167,139,250,0.3);
        }
        
        .stat-label {
            font-size: 11px;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 4px;
        }
        
        .stat-divider {
            width: 1px;
            height: 40px;
            background: linear-gradient(to bottom, transparent, var(--border-subtle), transparent);
        }
        
        /* ═══════════════════════════════════════════════════════════
           FILTERS
           ═══════════════════════════════════════════════════════════ */
        
        /* Main Content Container */
        #mainContent {
            padding: 0 20px 40px;
        }
        
        .filters-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .filter-group label {
            font-size: 10px;
            color: var(--text-dim);
            text-transform: uppercase;
        }
        
        .filter-group select {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 10px 15px;
            color: var(--text-light);
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            cursor: pointer;
            min-width: 150px;
        }
        
        .filter-group select:focus {
            outline: none;
            border-color: var(--gold-sacred);
        }
        
        .search-input {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            padding: 10px 15px;
            color: var(--text-light);
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            min-width: 200px;
        }
        
        .search-input::placeholder {
            color: var(--text-dim);
        }
        
        /* ═══════════════════════════════════════════════════════════
           NFT GRID
           ═══════════════════════════════════════════════════════════ */
        
        .nft-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .nft-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .nft-card:hover {
            transform: translateY(-5px);
            border-color: var(--gold-sacred);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
        }
        
        /* Bridged cards are grayed out */
        .nft-card.bridged {
            opacity: 0.7;
        }
        
        .nft-card.bridged .nft-image {
            filter: grayscale(60%);
        }
        
        .nft-card.bridged:hover .nft-image {
            filter: grayscale(40%);
        }
        
        /* Status badge */
        .nft-status-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 9px;
            font-weight: bold;
            z-index: 10;
        }
        
        .nft-status-badge.active {
            background: rgba(0, 255, 0, 0.2);
            border: 1px solid var(--status-active);
            color: var(--status-active);
        }
        
        .nft-status-badge.bridged {
            background: rgba(247, 147, 26, 0.2);
            border: 1px solid var(--status-bridged);
            color: var(--status-bridged);
        }
        
        .nft-status-badge.returned {
            background: rgba(0, 255, 255, 0.2);
            border: 1px solid var(--status-returned);
            color: var(--status-returned);
        }
        
        /* ═══════════════════════════════════════════════════════════
           RARITY BADGES & EFFECTS
           ═══════════════════════════════════════════════════════════ */
        
        .nft-rarity-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 9px;
            font-weight: bold;
            z-index: 10;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .nft-rarity-badge.common {
            background: linear-gradient(135deg, #6b7280, #4b5563);
            color: #e5e7eb;
            box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
        }
        
        .nft-rarity-badge.rare {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: #fff;
            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
        }
        
        .nft-rarity-badge.epic {
            background: linear-gradient(135deg, #a855f7, #7c3aed);
            color: #fff;
            box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4);
            animation: epicGlow 2s ease-in-out infinite;
        }
        
        .nft-rarity-badge.legendary {
            background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
            color: #000;
            box-shadow: 0 2px 15px rgba(251, 191, 36, 0.5);
            animation: legendaryGlow 1.5s ease-in-out infinite;
        }
        
        .nft-rarity-badge.mythic {
            background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);
            color: #fff;
            box-shadow: 0 2px 18px rgba(239, 68, 68, 0.6);
            animation: mythicGlow 1s ease-in-out infinite;
        }
        
        @keyframes epicGlow {
            0%, 100% { box-shadow: 0 2px 12px rgba(168, 85, 247, 0.4); }
            50% { box-shadow: 0 4px 20px rgba(168, 85, 247, 0.7); }
        }
        
        @keyframes legendaryGlow {
            0%, 100% { box-shadow: 0 2px 15px rgba(251, 191, 36, 0.5); }
            50% { box-shadow: 0 6px 30px rgba(251, 191, 36, 0.9); }
        }
        
        @keyframes mythicGlow {
            0%, 100% { box-shadow: 0 2px 18px rgba(239, 68, 68, 0.6); }
            50% { box-shadow: 0 8px 35px rgba(239, 68, 68, 1); }
        }
        
        /* Card border glow based on rarity */
        .nft-card.rarity-legendary {
            border-color: rgba(251, 191, 36, 0.4);
        }
        .nft-card.rarity-legendary:hover {
            border-color: var(--gold-sacred);
            box-shadow: 0 10px 40px rgba(251, 191, 36, 0.4);
        }
        
        .nft-card.rarity-epic {
            border-color: rgba(168, 85, 247, 0.3);
        }
        .nft-card.rarity-epic:hover {
            border-color: #a855f7;
            box-shadow: 0 10px 35px rgba(168, 85, 247, 0.35);
        }
        
        .nft-card.rarity-mythic {
            border-color: rgba(239, 68, 68, 0.4);
        }
        .nft-card.rarity-mythic:hover {
            border-color: #ef4444;
            box-shadow: 0 10px 40px rgba(239, 68, 68, 0.4);
        }
        
        /* Image placeholder */
        .nft-image-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1a1a2e 0%, #15152a 100%);
            font-size: 48px;
        }
        
        .nft-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            image-rendering: pixelated;
            transition: filter 0.3s, transform 0.4s;
        }
        
        .nft-info {
            padding: 15px;
        }
        
        .nft-collection {
            font-size: 10px;
            color: var(--cyan-mirror);
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        
        .nft-name {
            font-size: 14px;
            font-weight: bold;
            color: var(--text-light);
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .nft-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nft-token-id {
            font-size: 11px;
            color: var(--text-dim);
        }
        
        /* ═══════════════════════════════════════════════════════════
           MARKETPLACE - Price Badge & Buy Button
           ═══════════════════════════════════════════════════════════ */
        
        .nft-card.is-listed {
            border-color: var(--gold-sacred);
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
        }
        
        .nft-price-badge {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: #000;
            font-family: 'Orbitron', sans-serif;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 12px;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
        }
        
        .nft-buy-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px 16px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .nft-buy-btn:hover {
            background: linear-gradient(135deg, #16a34a, #15803d);
            box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4);
            transform: translateY(-2px);
        }
        
        .nft-your-listing {
            width: 100%;
            margin-top: 10px;
            padding: 8px 12px;
            background: rgba(251, 191, 36, 0.2);
            color: var(--gold-sacred);
            border: 1px solid var(--gold-sacred);
            border-radius: 8px;
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            text-align: center;
        }
        
        .nft-cancel-listing-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px 16px;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-family: 'Press Start 2P', monospace;
            font-size: 7px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .nft-cancel-listing-btn:hover {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
            transform: translateY(-2px);
        }
        
        .nft-rarity {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
        }
        
        .nft-rarity.genesis { background: linear-gradient(135deg, #fff, #0f0, #ffd700); color: #000; }
        .nft-rarity.legendary { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #000; }
        .nft-rarity.epic { background: linear-gradient(135deg, #8800ff, #ff00ff); color: #fff; }
        .nft-rarity.rare { background: linear-gradient(135deg, #00ffff, #0088ff); color: #000; }
        .nft-rarity.common { background: linear-gradient(135deg, #888, #aaa); color: #000; }
        
        /* ═══════════════════════════════════════════════════════════
           EMPTY STATE
           ═══════════════════════════════════════════════════════════ */
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-dim);
        }
        
        .empty-state-icon {
            font-size: 60px;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: var(--text-light);
        }
        
        .empty-state p {
            font-size: 14px;
            max-width: 400px;
            margin: 0 auto;
        }
        
        /* ═══════════════════════════════════════════════════════════
           NFT DETAIL MODAL
           ═══════════════════════════════════════════════════════════ */
        
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 15, 0.95);
            z-index: 5000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-y: auto;
        }
        
        .modal-overlay.active {
            display: flex;
        }
        
        .modal {
            background: var(--bg-card);
            border: 2px solid var(--gold-sacred);
            border-radius: 20px;
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 24px;
            cursor: pointer;
            z-index: 10;
        }
        
        .modal-close:hover {
            color: var(--text-light);
        }
        
        .detail-modal-content {
            padding: 0;
        }
        
        .detail-image-container {
            position: relative;
        }
        
        .detail-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            image-rendering: pixelated;
        }
        
        .detail-status-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            padding: 8px 15px;
            border-radius: 25px;
            font-size: 11px;
            font-weight: bold;
        }
        
        .detail-status-badge.active {
            background: rgba(0, 255, 0, 0.9);
            color: #000;
        }
        
        .detail-status-badge.bridged {
            background: rgba(247, 147, 26, 0.9);
            color: #000;
        }
        
        .detail-info {
            padding: 25px;
        }
        
        .detail-collection {
            font-size: 11px;
            color: var(--cyan-mirror);
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        
        .detail-name {
            font-family: 'Press Start 2P', monospace;
            font-size: 14px;
            color: var(--gold-sacred);
            margin-bottom: 5px;
        }
        
        .detail-token-id {
            font-size: 12px;
            color: var(--text-dim);
            margin-bottom: 20px;
        }
        
        .detail-attributes {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .attribute-box {
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
        }
        
        .attribute-label {
            font-size: 9px;
            color: var(--text-dim);
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        
        .attribute-value {
            font-size: 13px;
            color: var(--gold-sacred);
            font-weight: bold;
        }
        
        .detail-description {
            font-size: 13px;
            color: var(--text-dim);
            line-height: 1.6;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        /* Bridge Info Box */
        .bridge-info-box {
            background: rgba(247, 147, 26, 0.1);
            border: 1px solid rgba(247, 147, 26, 0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .bridge-info-box h4 {
            color: var(--bitcoin-orange);
            font-size: 12px;
            margin-bottom: 10px;
        }
        
        .bridge-info-row {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            margin-bottom: 5px;
        }
        
        .bridge-info-row span:first-child {
            color: var(--text-dim);
        }
        
        .bridge-info-row span:last-child {
            color: var(--text-light);
            font-family: monospace;
        }
        
        .bridge-info-row a {
            color: var(--bitcoin-orange);
            text-decoration: none;
        }
        
        .bridge-info-row a:hover {
            text-decoration: underline;
        }
        
        /* Action Buttons */
        .detail-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            padding: 15px;
            border-radius: 10px;
            font-family: 'Orbitron', sans-serif;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }
        
        .action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .action-btn.primary {
            background: linear-gradient(135deg, var(--gold-sacred), #ff8c00);
            color: #000;
        }
        
        .action-btn.primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
        }
        
        .action-btn.secondary {
            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-light);
        }
        
        .action-btn.secondary:hover:not(:disabled) {
            border-color: var(--gold-sacred);
        }
        
        .action-btn.bridge {
            background: linear-gradient(135deg, var(--bitcoin-orange), #ff6600);
            color: #000;
        }
        
        .action-btn.bridge:hover:not(:disabled) {
            box-shadow: 0 5px 20px rgba(247, 147, 26, 0.4);
        }
        
        /* Collection Link Button */
        .collection-link-btn {
            display: block;
            text-align: center;
            padding: 14px 24px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #000;
            font-weight: 700;
            border-radius: 12px;
            text-decoration: none;
            margin-bottom: 16px;
            font-family: 'Press Start 2P', monospace;
            font-size: 9px;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .collection-link-btn:hover {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            box-shadow: 0 5px 25px rgba(245, 158, 11, 0.5);
            transform: translateY(-2px);
        }
        
        /* ═══════════════════════════════════════════════════════════
           TRANSFER MODAL
           ═══════════════════════════════════════════════════════════ */
        
        .transfer-modal-content {
            padding: 30px;
        }
        
        .transfer-modal-content h3 {
            font-family: 'Press Start 2P', monospace;
            font-size: 14px;
            color: var(--gold-sacred);
            margin-bottom: 10px;
            text-align: center;
        }
        
        .transfer-modal-content > p {
            color: var(--text-dim);
            font-size: 12px;
            text-align: center;
            margin-bottom: 25px;
        }
        
        .transfer-preview {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .transfer-preview img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .transfer-preview-info h4 {
            color: var(--gold-sacred);
            font-size: 13px;
            margin-bottom: 3px;
        }
        
        .transfer-preview-info p {
            color: var(--text-dim);
            font-size: 11px;
        }
        
        .transfer-form-group {
            margin-bottom: 20px;
        }
        
        .transfer-form-group label {
            display: block;
            font-size: 11px;
            color: var(--text-dim);
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        
        .transfer-form-group input {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border-subtle);
            border-radius: 10px;
            padding: 15px;
            color: var(--text-light);
            font-family: monospace;
            font-size: 13px;
        }
        
        .transfer-form-group input:focus {
            outline: none;
            border-color: var(--gold-sacred);
        }
        
        .transfer-form-group input::placeholder {
            color: var(--text-dim);
        }
        
        .transfer-fee-info {
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid rgba(0, 255, 0, 0.3);
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .transfer-fee-info p {
            font-size: 12px;
            color: var(--status-active);
        }
        
        .transfer-actions {
            display: flex;
            gap: 10px;
        }
        
        /* ═══════════════════════════════════════════════════════════
           BRIDGE MODAL
           ═══════════════════════════════════════════════════════════ */
        
        .bridge-modal-content {
            padding: 30px;
        }
        
        .bridge-modal-content h3 {
            font-family: 'Press Start 2P', monospace;
            font-size: 14px;
            color: var(--bitcoin-orange);
            margin-bottom: 10px;
            text-align: center;
        }
        
        .bridge-modal-content > p {
            color: var(--text-dim);
            font-size: 12px;
            text-align: center;
            margin-bottom: 5px;
        }
        
        .bridge-warning {
            color: var(--cyan-mirror) !important;
            font-size: 11px !important;
            margin-bottom: 20px !important;
        }
        
        .bridge-preview {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .bridge-preview img {
            width: 70px;
            height: 70px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .bridge-preview-info h4 {
            color: var(--gold-sacred);
            font-size: 13px;
            margin-bottom: 3px;
        }
        
        .bridge-preview-info p {
            color: var(--text-dim);
            font-size: 11px;
        }
        
        .bridge-fees {
            background: rgba(247, 147, 26, 0.1);
            border: 1px solid rgba(247, 147, 26, 0.3);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .bridge-fee-row {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 8px;
        }
        
        .bridge-fee-row span:first-child {
            color: var(--text-dim);
        }
        
        .bridge-fee-row span:last-child {
            color: var(--text-light);
        }
        
        .bridge-fee-row.total {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 10px;
            margin-top: 10px;
            font-weight: bold;
        }
        
        .bridge-fee-row.total span:last-child {
            color: var(--bitcoin-orange);
        }
        
        .bridge-image-size {
            text-align: center;
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 10px;
        }
        
        .bridge-actions {
            display: flex;
            gap: 10px;
        }
        
        /* ═══════════════════════════════════════════════════════════
           BUY MODAL
           ═══════════════════════════════════════════════════════════ */
        
        .buy-modal-content {
            padding: 24px;
        }
        
        .buy-modal-content h3 {
            font-family: 'Press Start 2P', monospace;
            font-size: 12px;
            color: var(--gold-sacred);
            margin-bottom: 6px;
            text-align: center;
        }
        
        .buy-modal-content > p {
            color: var(--text-dim);
            font-size: 11px;
            text-align: center;
            margin-bottom: 16px;
        }
        
        .buy-preview {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(255,255,255,0.05);
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 14px;
        }
        
        .buy-preview img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .buy-preview-info h4 {
            color: var(--gold-sacred);
            font-size: 13px;
            margin-bottom: 4px;
        }
        
        .buy-preview-info .seller {
            color: var(--text-dim);
            font-size: 10px;
        }
        
        .buy-breakdown {
            background: rgba(255, 215, 0, 0.08);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 16px;
        }
        
        .buy-row {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 8px;
        }
        
        .buy-row span:first-child {
            color: var(--text-dim);
        }
        
        .buy-row span:last-child {
            color: var(--text-light);
        }
        
        .buy-row.marketplace-fee span:last-child {
            color: var(--cyan-mirror);
            font-size: 10px;
        }
        
        .buy-row.total {
            border-top: 1px solid rgba(255, 215, 0, 0.2);
            padding-top: 10px;
            margin-top: 10px;
            margin-bottom: 0;
            font-weight: bold;
        }
        
        .buy-row.total span:last-child {
            color: var(--gold-sacred);
            font-size: 15px;
        }
        
        .buy-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn.buy {
            background: linear-gradient(135deg, var(--gold-sacred), #ff8c00);
            color: #000;
        }
        
        .action-btn.buy:hover:not(:disabled) {
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
            transform: translateY(-2px);
        }
        
        /* ═══════════════════════════════════════════════════════════
           LOADING STATES
           ═══════════════════════════════════════════════════════════ */
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border-subtle);
            border-top-color: var(--gold-sacred);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 40px auto;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-text {
            text-align: center;
            color: var(--text-dim);
            font-size: 13px;
        }
        
        /* ═══════════════════════════════════════════════════════════
           CONNECT WALLET PROMPT
           ═══════════════════════════════════════════════════════════ */
        
        .connect-prompt {
            text-align: center;
            padding: 60px 20px;
            max-width: 400px;
            margin: 0 auto;
        }
        
        .connect-prompt-icon {
            font-size: 60px;
            margin-bottom: 20px;
        }
        
        .connect-prompt h3 {
            font-size: 18px;
            color: var(--gold-sacred);
            margin-bottom: 15px;
        }
        
        .connect-prompt p {
            color: var(--text-dim);
            font-size: 14px;
            margin-bottom: 25px;
        }
        
        .connect-btn {
            background: linear-gradient(135deg, var(--gold-sacred), #ff8c00);
            border: none;
            padding: 15px 40px;
            border-radius: 10px;
            font-family: 'Orbitron', sans-serif;
            font-size: 14px;
            font-weight: bold;
            color: #000;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .connect-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
        }
        
        /* ═══════════════════════════════════════════════════════════
           RESPONSIVE
           ═══════════════════════════════════════════════════════════ */
        
        @media (max-width: 768px) {
            .wallet-bar {
                flex-direction: column;
                text-align: center;
            }
            
            .wallet-info {
                flex-direction: column;
            }
            
            #mainContent {
                padding: 0 15px 30px;
            }
            
            .filters-bar {
                flex-direction: column;
            }
            
            .filter-group {
                width: 100%;
            }
            
            .filter-group select,
            .search-input {
                width: 100%;
            }
            
            .nft-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .detail-actions,
            .transfer-actions,
            .bridge-actions {
                flex-direction: column;
            }
        }

        /* ═══════════════════════════════════════════════════════════
           L2 TABS (Market / Explorer)
           ═══════════════════════════════════════════════════════════ */

        .l2-tabs {
            display: flex;
            gap: 4px;
            max-width: 1400px;
            margin: 0 auto 24px;
            padding: 0 24px;
        }

        .l2-tab-btn {
            background: transparent;
            border: 1px solid var(--border-subtle);
            color: var(--text-dim);
            padding: 10px 28px;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-size: 14px;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            transition: all 0.2s;
        }

        .l2-tab-btn:hover {
            color: var(--text-light);
            background: rgba(255,255,255,0.05);
        }

        .l2-tab-btn.active {
            background: var(--bg-card);
            color: var(--gold-sacred);
            border-bottom-color: transparent;
        }

        .l2-tab-content {
            display: none;
        }

        .l2-tab-content.active {
            display: block;
        }

        /* ═══════════════════════════════════════════════════════════
           L2 MARKET DASHBOARD
           ═══════════════════════════════════════════════════════════ */

        .l2-market-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .l2-market-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .l2-market-header h2 {
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            margin: 0;
            font-family: 'Rajdhani', sans-serif;
        }

        .l2-time-filters {
            display: flex;
            gap: 4px;
            background: var(--bg-card);
            border-radius: 8px;
            padding: 3px;
        }

        .l2-time-btn {
            background: transparent;
            border: none;
            color: var(--text-dim);
            padding: 5px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 500;
            transition: all 0.2s;
        }

        .l2-time-btn:hover {
            color: var(--text-light);
            background: rgba(255,255,255,0.05);
        }

        .l2-time-btn.active {
            background: rgba(255, 215, 0, 0.15);
            color: var(--gold-sacred);
            font-weight: 600;
        }

        .l2-ranking-table {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            overflow: hidden;
        }

        .l2-ranking-header {
            display: grid;
            grid-template-columns: 40px 1fr 100px 110px 80px 80px;
            padding: 12px 16px;
            background: rgba(255,255,255,0.03);
            border-bottom: 1px solid var(--border-subtle);
            font-size: 11px;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .l2-ranking-row {
            display: grid;
            grid-template-columns: 40px 1fr 100px 110px 80px 80px;
            padding: 12px 16px;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            transition: background 0.15s;
            cursor: pointer;
        }

        .l2-ranking-row:last-child {
            border-bottom: none;
        }

        .l2-ranking-row:hover {
            background: rgba(255,255,255,0.04);
        }

        .l2r-rank {
            color: var(--text-dim);
            font-size: 14px;
            font-weight: 600;
        }

        .l2r-name {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #fff;
            font-weight: 500;
            font-size: 14px;
            min-width: 0;
        }

        .l2r-name img {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .l2r-name .l2r-placeholder {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--purple-void), var(--gold-sacred));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .l2r-name span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .l2r-floor, .l2r-volume {
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            font-family: 'Rajdhani', sans-serif;
        }

        .l2r-listed, .l2r-supply {
            color: var(--text-dim);
            font-size: 13px;
            font-family: 'Rajdhani', sans-serif;
        }

        .l2-badge {
            display: inline-block;
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 20px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-left: 6px;
            background: rgba(255, 215, 0, 0.15);
            color: var(--gold-sacred);
            flex-shrink: 0;
        }

        .l2-sold-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }

        .l2-sold-card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: 12px;
            overflow: hidden;
            transition: border-color 0.2s, transform 0.2s;
            cursor: pointer;
        }

        .l2-sold-card:hover {
            border-color: var(--gold-sacred);
            transform: translateY(-2px);
        }

        .l2-sold-card img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            image-rendering: pixelated;
            background: var(--bg-card-hover);
        }

        .l2-sold-info {
            padding: 12px;
        }

        .l2-sold-name {
            color: #fff;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .l2-sold-price {
            color: var(--gold-sacred);
            font-size: 14px;
            font-weight: 600;
            font-family: 'Rajdhani', sans-serif;
        }

        .l2-sold-time {
            color: var(--text-dim);
            font-size: 11px;
            margin-top: 4px;
        }

        .l2-empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-dim);
            font-size: 14px;
        }

        .l2-loading {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-dim);
        }

        @media (max-width: 768px) {
            .l2-ranking-header,
            .l2-ranking-row {
                grid-template-columns: 30px 1fr 80px 80px;
            }
            .l2r-listed, .l2r-supply {
                display: none;
            }
            .l2-sold-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            .l2-tabs {
                padding: 0 12px;
            }
        }
    </style>
</head>
<body>
    <!-- HEADER (KRAY Wallet Integration) -->
    <kray-header active="nfts"></kray-header>
    
    <!-- PAGE CONTENT -->
    <div class="page-header">
        <h1>L2 NFT MARKETPLACE</h1>
        <p>Browse, trade, and bridge NFTs on KRAY L2</p>
    </div>

    <!-- L2 TABS -->
    <div class="l2-tabs">
        <button class="l2-tab-btn active" data-l2tab="l2-market">Market</button>
        <button class="l2-tab-btn" data-l2tab="l2-explorer">Explorer</button>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         TAB 1: MARKET RANKING DASHBOARD
         ═══════════════════════════════════════════════════════════ -->
    <div class="l2-tab-content active" id="l2-market">
        <div class="l2-market-container">
            <!-- Trending / Ranking -->
            <div class="l2-market-header">
                <h2>Trending Collections</h2>
                <div class="l2-time-filters">
                    <button class="l2-time-btn active" data-l2period="24h">24h</button>
                    <button class="l2-time-btn" data-l2period="7d">7d</button>
                    <button class="l2-time-btn" data-l2period="30d">30d</button>
                    <button class="l2-time-btn" data-l2period="all">All</button>
                </div>
            </div>

            <div class="l2-ranking-table">
                <div class="l2-ranking-header">
                    <span>#</span>
                    <span>Collection</span>
                    <span>Floor</span>
                    <span>Volume</span>
                    <span>Listed</span>
                    <span>Supply</span>
                </div>
                <div id="l2RankingBody">
                    <div class="l2-loading" id="l2RankingLoading">Loading market data...</div>
                </div>
            </div>

            <!-- Recent Sales -->
            <div style="margin-top: 40px;">
                <h2 style="color:#fff;font-size:20px;font-weight:600;margin-bottom:16px;font-family:'Rajdhani',sans-serif;">Recent Sales</h2>
                <div id="l2RecentSales" class="l2-sold-grid">
                    <div class="l2-loading" id="l2SalesLoading">Loading recent sales...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         TAB 2: EXPLORER (existing content)
         ═══════════════════════════════════════════════════════════ -->
    <div class="l2-tab-content" id="l2-explorer">

    <!-- STATS BAR (centralized) -->
    <div class="stats-bar" id="walletBar">
        <div class="stat-item">
            <div class="stat-value" id="totalNFTs">0</div>
            <div class="stat-label">Total NFTs</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
            <div class="stat-value active" id="activeNFTs">0</div>
            <div class="stat-label">Active L2</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
            <div class="stat-value bridged" id="bridgedNFTs">0</div>
            <div class="stat-label">On Bitcoin</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
            <div class="stat-value listed" id="listedNFTs">0</div>
            <div class="stat-label">Listed</div>
        </div>
    </div>
    <!-- Hidden elements for wallet state (used by JS) -->
    <span id="walletStatusDot" style="display:none;"></span>
    <span id="walletStatusText" style="display:none;"></span>
    <span id="walletAddress" style="display:none;"></span>
    
    <!-- CONNECT WALLET PROMPT (shown when not connected) -->
    <div class="connect-prompt" id="connectPrompt" style="display: none;">
        <div class="connect-prompt-icon">🔐</div>
        <h3>Connect Your Wallet</h3>
        <p>Connect your KRAY Wallet to view and manage your NFT collection.</p>
        <button class="connect-btn" onclick="connectWallet()">Connect KRAY Wallet</button>
    </div>
    
    <!-- MAIN CONTENT (shown when connected) -->
    <div id="mainContent" style="display: none;">
        <!-- FILTERS -->
        <div class="filters-bar">
            <div class="filter-group">
                <label>Collection</label>
                <select id="filterCollection" onchange="applyFilters()">
                    <option value="all">All Collections</option>
                    <!-- Collections populated dynamically from loadNFTs() -->
                </select>
            </div>
            
            <div class="filter-group">
                <label>Status</label>
                <select id="filterStatus" onchange="applyFilters()">
                    <option value="all">All Status</option>
                    <option value="listed">🏷️ Listed (For Sale)</option>
                    <option value="active">Active (L2)</option>
                    <option value="bridged">Bridged (L1)</option>
                    <option value="returned">Returned</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label>Sort By</label>
                <select id="sortOrder" onchange="applyFilters()">
                    <option value="newest">Newest First</option>
                    <option value="oldest">Oldest First</option>
                    <option value="name">Name (A-Z)</option>
                    <option value="collection">Collection</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label>Search</label>
                <input type="text" class="search-input" id="searchInput" placeholder="Search by name..." oninput="applyFilters()">
            </div>
        </div>
        
        <!-- NFT GRID -->
        <div class="nft-grid" id="nftGrid">
            <div class="loading-spinner"></div>
            <p class="loading-text">Loading your NFTs...</p>
        </div>
    </div>

    </div><!-- /l2-explorer tab -->
    
    <!-- NFT DETAIL MODAL -->
    <div class="modal-overlay" id="detailModal">
        <div class="modal">
            <button class="modal-close" onclick="closeDetailModal()">&times;</button>
            <div class="detail-modal-content">
                <div class="detail-image-container">
                    <img class="detail-image" id="detailImage" src="" alt="NFT">
                    <div class="detail-status-badge" id="detailStatusBadge">ACTIVE</div>
                </div>
                <div class="detail-info">
                    <div class="detail-collection" id="detailCollection">COSMIC VISION</div>
                    <h2 class="detail-name" id="detailName">NFT Name</h2>
                    <div class="detail-token-id" id="detailTokenId">Token #42</div>
                    
                    <div class="detail-attributes" id="detailAttributes">
                        <!-- Attributes will be inserted here -->
                    </div>
                    
                    <p class="detail-description" id="detailDescription">"Description text..."</p>
                    
                    <!-- Bridge info (shown if bridged) -->
                    <div class="bridge-info-box" id="bridgeInfoBox" style="display: none;">
                        <h4>Bitcoin Inscription</h4>
                        <div class="bridge-info-row">
                            <span>Inscription ID</span>
                            <span id="bridgeInscriptionId">-</span>
                        </div>
                        <div class="bridge-info-row">
                            <span>Bridged At</span>
                            <span id="bridgeBridgedAt">-</span>
                        </div>
                        <div class="bridge-info-row">
                            <span>View on</span>
                            <a id="bridgeOrdinalLink" href="#" target="_blank">ordinals.com</a>
                        </div>
                    </div>
                    
                    <!-- Collection Link Button -->
                    <a href="#" id="collectionLinkBtn" class="collection-link-btn">
                        VIEW COLLECTION
                    </a>
                    
                    <div class="detail-actions" id="detailActions">
                        <button class="action-btn secondary" onclick="openTransferModal()">Transfer</button>
                        <button class="action-btn bridge" onclick="openBridgeModal()">Bridge to Bitcoin</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- TRANSFER MODAL -->
    <div class="modal-overlay" id="transferModal">
        <div class="modal">
            <button class="modal-close" onclick="closeTransferModal()">&times;</button>
            <div class="transfer-modal-content">
                <h3>TRANSFER NFT</h3>
                <p>Send this NFT to another address on L2 KRAY</p>
                
                <div class="transfer-preview">
                    <img id="transferImage" src="" alt="NFT">
                    <div class="transfer-preview-info">
                        <h4 id="transferName">NFT Name</h4>
                        <p id="transferCollection">Cosmic Vision #42</p>
                    </div>
                </div>
                
                <div class="transfer-form-group">
                    <label>Recipient Address</label>
                    <input type="text" id="transferRecipient" placeholder="bc1q... or tb1q...">
                </div>
                
                <div class="transfer-fee-info">
                    <p>Transfer Fee: 1 KRAY</p>
                </div>
                
                <div class="transfer-actions">
                    <button class="action-btn secondary" onclick="closeTransferModal()">Cancel</button>
                    <button class="action-btn primary" id="transferConfirmBtn" onclick="confirmTransfer()">Confirm Transfer</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- BRIDGE TO BITCOIN MODAL -->
    <div class="modal-overlay" id="bridgeModal">
        <div class="modal">
            <button class="modal-close" onclick="closeBridgeModal()">&times;</button>
            <div class="bridge-modal-content">
                <h3>BRIDGE TO BITCOIN</h3>
                <p>Inscribe this NFT as an Ordinal on Bitcoin L1</p>
                <p class="bridge-warning">The NFT will be frozen on L2 until you bridge it back.</p>
                
                <div class="bridge-preview">
                    <img id="bridgeImage" src="" alt="NFT">
                    <div class="bridge-preview-info">
                        <h4 id="bridgeName">NFT Name</h4>
                        <p id="bridgeCollection">Cosmic Vision #42</p>
                    </div>
                </div>
                
                <div class="bridge-fees" id="bridgeFees">
                    <div class="bridge-fee-row">
                        <span>Commit Fee</span>
                        <span id="bridgeFeeCommit">-- sats</span>
                    </div>
                    <div class="bridge-fee-row">
                        <span>Reveal Fee</span>
                        <span id="bridgeFeeReveal">-- sats</span>
                    </div>
                    <div class="bridge-fee-row total">
                        <span>Total</span>
                        <span id="bridgeFeeTotal">-- sats</span>
                    </div>
                    <p class="bridge-image-size">Image: <span id="bridgeImageSize">--</span> KB (400x400 AVIF)</p>
                </div>
                
                <div class="bridge-actions">
                    <button class="action-btn secondary" onclick="closeBridgeModal()">Cancel</button>
                    <button class="action-btn bridge" id="bridgeConfirmBtn" onclick="confirmBridge()">Sign & Bridge</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- BUY NFT MODAL -->
    <div class="modal-overlay" id="buyModal">
        <div class="modal">
            <button class="modal-close" onclick="closeBuyModal()">&times;</button>
            <div class="buy-modal-content">
                <h3>CONFIRM PURCHASE</h3>
                <p>You are about to buy this NFT</p>
                
                <div class="buy-preview">
                    <img id="buyModalImage" src="" alt="NFT">
                    <div class="buy-preview-info">
                        <h4 id="buyModalName">NFT Name</h4>
                        <p class="seller">Seller: <span id="buyModalSeller">bc1p...xyz</span></p>
                    </div>
                </div>
                
                <div class="buy-breakdown">
                    <div class="buy-row">
                        <span>NFT Price</span>
                        <span id="buyModalPrice">▼ 0 KRAY</span>
                    </div>
                    <div class="buy-row marketplace-fee">
                        <span>Marketplace Fee (2%)</span>
                        <span id="buyModalMarketFee">Paid by seller</span>
                    </div>
                    <div class="buy-row">
                        <span>Network Gas Fee</span>
                        <span>▼ 1 KRAY</span>
                    </div>
                    <div class="buy-row total">
                        <span>Total Cost</span>
                        <span id="buyModalTotal">▼ 0 KRAY</span>
                    </div>
                </div>
                
                <div class="buy-actions">
                    <button class="action-btn secondary" onclick="closeBuyModal()">Cancel</button>
                    <button class="action-btn buy" id="buyConfirmBtn" onclick="confirmBuyNFT()">Sign & Buy</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- CANCEL LISTING MODAL -->
    <div class="modal-overlay" id="cancelListingModal">
        <div class="modal">
            <button class="modal-close" onclick="closeCancelListingModal()">&times;</button>
            <div class="buy-modal-content">
                <h3>❌ CANCEL LISTING</h3>
                <p>Remove this NFT from the marketplace</p>
                
                <div class="buy-preview">
                    <img id="cancelModalImage" src="" alt="NFT">
                    <div class="buy-preview-info">
                        <h4 id="cancelModalName">NFT Name</h4>
                        <p class="seller">Listed at: <span id="cancelModalPrice" style="color: #ffd700;">▼ 0 KRAY</span></p>
                    </div>
                </div>
                
                <div class="buy-breakdown">
                    <div class="buy-row" style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);">
                        <span style="color: #ef4444;">⚠️ This will remove your NFT from sale</span>
                    </div>
                    <div class="buy-row">
                        <span>Network Gas Fee</span>
                        <span>▼ 1 KRAY</span>
                    </div>
                </div>
                
                <div class="buy-actions">
                    <button class="action-btn secondary" onclick="closeCancelListingModal()">Keep Listed</button>
                    <button class="action-btn" id="cancelListingBtn" onclick="confirmCancelListing()" style="background: linear-gradient(135deg, #ef4444, #dc2626);">Sign & Cancel</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // ═══════════════════════════════════════════════════════════════
        // CONFIGURATION
        // ═══════════════════════════════════════════════════════════════
        
        const API_BASE = window.location.origin;
        const KRAY_API = '';
        
        let allNFTs = [];
        let currentNFT = null;
        let bridgeData = null;
        let l2MarketPeriod = '24h';
        let l2MarketLoaded = false;

        // ═══════════════════════════════════════════════════════════════
        // L2 TAB SWITCHING + URL ROUTING
        // ═══════════════════════════════════════════════════════════════

        const L2_TAB_SLUG = { 'l2-market': 'market', 'l2-explorer': 'explorer' };
        const L2_SLUG_TAB = { 'market': 'l2-market', 'explorer': 'l2-explorer' };

        function getL2TabFromUrl() {
            const parts = window.location.pathname.split('/').filter(Boolean);
            if (parts.length >= 2) {
                return L2_SLUG_TAB[parts[1]] || 'l2-market';
            }
            return 'l2-market';
        }

        function activateL2Tab(tab, updateUrl) {
            document.querySelectorAll('.l2-tab-btn').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.l2-tab-content').forEach(c => c.classList.remove('active'));

            const targetBtn = document.querySelector(`.l2-tab-btn[data-l2tab="${tab}"]`);
            if (targetBtn) targetBtn.classList.add('active');
            const panel = document.getElementById(tab);
            if (panel) panel.classList.add('active');

            if (updateUrl && L2_TAB_SLUG[tab]) {
                const slug = L2_TAB_SLUG[tab];
                const newPath = slug === 'market' ? '/nft-l2' : '/nft-l2/' + slug;
                if (window.location.pathname !== newPath) {
                    history.pushState({ l2tab: tab }, '', newPath);
                }
            }

            if (tab === 'l2-market' && !l2MarketLoaded) {
                loadL2MarketDashboard();
            }
            if (tab === 'l2-explorer') {
                const mc = document.getElementById('mainContent');
                if (mc && mc.style.display === 'none') {
                    mc.style.display = 'block';
                    if (allNFTs.length === 0) loadNFTs();
                }
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.l2-tab-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    activateL2Tab(btn.getAttribute('data-l2tab'), true);
                });
            });

            document.querySelectorAll('.l2-time-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    document.querySelectorAll('.l2-time-btn').forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    loadL2MarketDashboard(btn.getAttribute('data-l2period'));
                });
            });

            window.addEventListener('popstate', (event) => {
                if (event.state && event.state.l2tab) {
                    activateL2Tab(event.state.l2tab, false);
                } else {
                    activateL2Tab(getL2TabFromUrl(), false);
                }
            });

            // Read deep-link param FIRST — replaceState below would otherwise wipe ?id=
            // before we can read it (collection grid clicks, krayscan, etc.).
            const idParam = new URLSearchParams(window.location.search).get('id');

            const initialTab = getL2TabFromUrl();
            activateL2Tab(initialTab, false);
            history.replaceState(
                { l2tab: initialTab },
                '',
                window.location.pathname + (idParam ? `?id=${encodeURIComponent(idParam)}` : '')
            );

            if (idParam) {
                openDetailModal(idParam);
            }
        });

        // ═══════════════════════════════════════════════════════════════
        // L2 MARKET DASHBOARD
        // ═══════════════════════════════════════════════════════════════

        async function loadL2MarketDashboard(period) {
            if (period) l2MarketPeriod = period;
            const body = document.getElementById('l2RankingBody');
            const salesGrid = document.getElementById('l2RecentSales');
            if (!body) return;

            try {
                const resp = await fetch(`${API_BASE}/l2/nfts/market/dashboard?period=${l2MarketPeriod}`);
                const data = await resp.json();
                if (!data.success) throw new Error(data.error || 'Failed');

                const loading = document.getElementById('l2RankingLoading');
                if (loading) loading.style.display = 'none';
                const salesLoading = document.getElementById('l2SalesLoading');
                if (salesLoading) salesLoading.style.display = 'none';

                const trending = data.trending || [];
                if (trending.length === 0) {
                    body.innerHTML = '<div class="l2-empty-state">No L2 collections yet. Be the first to create one!</div>';
                } else {
                    body.innerHTML = trending.map((item, i) => {
                        const floorStr = item.floor != null ? '▼ ' + parseFloat(item.floor).toFixed(2) + ' KRAY' : '--';
                        const volStr = item.volume > 0 ? '▼ ' + parseFloat(item.volume).toFixed(2) + ' KRAY' : '--';
                        let listedStr = item.listed > 0 ? String(item.listed) : '--';
                        if (item.listed > 0 && item.supply > 0) {
                            const pct = ((item.listed / item.supply) * 100).toFixed(1);
                            listedStr += ' <span style="color:var(--text-dim);font-size:0.75em;">(' + pct + '%)</span>';
                        }
                        const supplyStr = item.supply > 0 ? item.supply.toLocaleString() : '--';

                        let coverHtml;
                        if (item.logo_url) {
                            coverHtml = '<img src="' + item.logo_url + '" alt="" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\'"><div class="l2r-placeholder" style="display:none;">🎨</div>';
                        } else {
                            coverHtml = '<div class="l2r-placeholder">🎨</div>';
                        }

                        return '<div class="l2-ranking-row" data-collection-id="' + (item.project_id || item.id) + '">' +
                            '<span class="l2r-rank">' + (i + 1) + '</span>' +
                            '<span class="l2r-name">' +
                                coverHtml +
                                '<span>' + (item.name || 'Unknown') + '</span>' +
                                '<span class="l2-badge">L2</span>' +
                            '</span>' +
                            '<span class="l2r-floor">' + floorStr + '</span>' +
                            '<span class="l2r-volume">' + volStr + '</span>' +
                            '<span class="l2r-listed">' + listedStr + '</span>' +
                            '<span class="l2r-supply">' + supplyStr + '</span>' +
                        '</div>';
                    }).join('');

                    body.querySelectorAll('.l2-ranking-row').forEach(row => {
                        row.addEventListener('click', () => {
                            const colId = row.getAttribute('data-collection-id');
                            window.location.href = '/collection?id=' + colId;
                        });
                    });
                }

                const sales = data.recentSales || [];
                if (sales.length === 0) {
                    salesGrid.innerHTML = '<div class="l2-empty-state">No recent sales.</div>';
                } else {
                    salesGrid.innerHTML = sales.map(s => {
                        const ago = l2TimeAgo(s.sold_at);
                        const imgSrc = s.image_url || '/public/images/kray-station-logo.png';
                        return '<div class="l2-sold-card">' +
                            '<img src="' + imgSrc + '" alt="" loading="lazy" onerror="this.src=\'/public/images/kray-station-logo.png\'">' +
                            '<div class="l2-sold-info">' +
                                '<div class="l2-sold-name">' + (s.name || 'NFT') + '</div>' +
                                '<div class="l2-sold-price">▼ ' + parseFloat(s.price_kray).toFixed(2) + ' KRAY</div>' +
                                (s.collection_name ? '<div class="l2-sold-time">' + s.collection_name + '</div>' : '') +
                                '<div class="l2-sold-time">' + ago + '</div>' +
                            '</div>' +
                        '</div>';
                    }).join('');
                }

                l2MarketLoaded = true;
            } catch (err) {
                console.error('L2 Market dashboard error:', err);
                const loading = document.getElementById('l2RankingLoading');
                if (loading) loading.innerHTML = '<div class="l2-empty-state">Failed to load market data.</div>';
            }
        }

        function l2TimeAgo(dateStr) {
            if (!dateStr) return '';
            const diff = Date.now() - new Date(dateStr).getTime();
            const mins = Math.floor(diff / 60000);
            if (mins < 1) return 'just now';
            if (mins < 60) return mins + 'm ago';
            const hrs = Math.floor(mins / 60);
            if (hrs < 24) return hrs + 'h ago';
            const days = Math.floor(hrs / 24);
            return days + 'd ago';
        }

        // ═══════════════════════════════════════════════════════════════
        // NFT RARITY HELPERS
        // ═══════════════════════════════════════════════════════════════
        
        function getRarity(nft) {
            // 1. Check attributes array (new format with trait_type/value)
            const attrsArray = nft.metadata?.attributes || nft.attributes;
            if (Array.isArray(attrsArray)) {
                const rarityAttr = attrsArray.find(a => 
                    a.trait_type?.toLowerCase() === 'rarity' || 
                    a.trait_type?.toLowerCase() === 'tier'
                );
                if (rarityAttr) {
                    const val = rarityAttr.value.toLowerCase();
                    if (['common', 'rare', 'epic', 'legendary', 'mythic'].includes(val)) {
                        return val;
                    }
                }
            }
            
            // 2. Check direct rarity property
            const attrs = nft.attributes || nft.metadata || {};
            if (attrs.rarity) {
                const val = attrs.rarity.toLowerCase();
                if (['common', 'rare', 'epic', 'legendary', 'mythic'].includes(val)) {
                    return val;
                }
            }
            
            // 3. Fallback by token_id
            const tokenId = parseInt(nft.token_id) || 0;
            if (tokenId === 1) return 'mythic'; // Cosmic Vision #1 is mythic!
            if (tokenId <= 5) return 'legendary';
            if (tokenId <= 20) return 'epic';
            if (tokenId <= 50) return 'rare';
            return 'common';
        }
        
        // Parse all attributes from metadata
        function getAttributes(nft) {
            const result = {};
            const attrsArray = nft.metadata?.attributes || nft.attributes;
            
            if (Array.isArray(attrsArray)) {
                attrsArray.forEach(attr => {
                    if (attr.trait_type && attr.value) {
                        result[attr.trait_type.toLowerCase()] = attr.value;
                    }
                });
            } else if (attrsArray && typeof attrsArray === 'object') {
                Object.assign(result, attrsArray);
            }
            
            return result;
        }
        
        // ═══════════════════════════════════════════════════════════════
        // WALLET STATE (uses same localStorage as header-component.js)
        // ═══════════════════════════════════════════════════════════════
        
        function getWalletAddress() {
            return localStorage.getItem('walletAddress');
        }
        
        function truncateAddress(address) {
            if (!address) return '';
            if (address.length <= 16) return address;
            return address.substring(0, 8) + '...' + address.substring(address.length - 6);
        }
        
        function isWalletConnected() {
            return !!getWalletAddress();
        }
        
        function shortenAddress(addr) {
            if (!addr) return '-';
            return addr.slice(0, 8) + '...' + addr.slice(-6);
        }
        
        // ═══════════════════════════════════════════════════════════════
        // INITIALIZATION
        // ═══════════════════════════════════════════════════════════════
        
        document.addEventListener('DOMContentLoaded', () => {
            // Public explorer - always show content and load NFTs
            setTimeout(() => {
                updateWalletUI();
                // Always load NFTs (public explorer)
                loadNFTs();
            }, 300);
        });
        
        // Listen for wallet events from header
        window.addEventListener('walletConnected', () => {
            updateWalletUI();
        });
        
        window.addEventListener('walletDisconnected', () => {
            updateWalletUI();
        });
        
        // Listen for localStorage changes (when header connects)
        window.addEventListener('storage', (e) => {
            if (e.key === 'walletAddress') {
                updateWalletUI();
            }
        });
        
        function updateWalletUI() {
            const address = getWalletAddress();
            const connected = !!address;
            
            document.getElementById('walletStatusDot').classList.toggle('connected', connected);
            document.getElementById('walletStatusText').textContent = connected ? 'Connected' : 'Not Connected';
            document.getElementById('walletAddress').textContent = connected ? shortenAddress(address) : '-';
            
            // Public explorer - always show main content, hide connect prompt
            document.getElementById('connectPrompt').style.display = 'none';
            document.getElementById('mainContent').style.display = 'block';
        }
        
        function connectWallet() {
            // Trigger header connect button
            const connectBtn = document.querySelector('.kray-connect-btn');
            if (connectBtn) connectBtn.click();
        }
        
        // ═══════════════════════════════════════════════════════════════
        // LOAD NFTs
        // ═══════════════════════════════════════════════════════════════
        
        async function loadNFTs() {
            const grid = document.getElementById('nftGrid');
            grid.innerHTML = '<div class="loading-spinner"></div><p class="loading-text">Loading NFTs...</p>';
            
            try {
                // ═══════════════════════════════════════════════════════════
                // Load ALL NFTs from L2 Explorer API (public)
                // ═══════════════════════════════════════════════════════════
                const response = await fetch(`${KRAY_API}/l2/nfts/explore?limit=100`);
                const data = await response.json();
                
                if (data.success && data.nfts && data.nfts.length > 0) {
                    // Map API response to expected format
                    allNFTs = data.nfts.map(nft => ({
                        ...nft,
                        // Map file_url to image_url for compatibility
                        image_url: nft.file_url || nft.image_url,
                        // Get collection name from nested object or fallback, formatted nicely
                        collection_name: formatCollectionName(nft.collection?.name || nft.collection_id),
                        // Ensure bridge_status has default
                        bridge_status: nft.bridge_status || 'ACTIVE',
                        // Parse attributes from metadata
                        attributes: typeof nft.metadata === 'object' ? nft.metadata : {},
                        // Ensure token_id exists
                        token_id: nft.token_id || nft.id?.slice(0, 8) || '?'
                    }));
                    
                    // Update collections dropdown dynamically
                    updateCollectionsDropdown();
                    applyFilters();
                    updateStats();
                } else {
                    allNFTs = [];
                    renderEmptyState();
                    updateStats();
                }
                
            } catch (error) {
                console.error('Failed to load NFTs:', error);
                grid.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">⚠️</div>
                        <h3>Error Loading NFTs</h3>
                        <p>${error.message}</p>
                    </div>
                `;
            }
        }
        
        // Dynamically populate collections dropdown from loaded NFTs
        function updateCollectionsDropdown() {
            const select = document.getElementById('filterCollection');
            const collections = new Map();
            
            // Collect unique collections from NFTs
            allNFTs.forEach(nft => {
                if (nft.collection_id && !collections.has(nft.collection_id)) {
                    collections.set(nft.collection_id, nft.collection_name || formatCollectionName(nft.collection_id));
                }
            });
            
            // Build options HTML
            let optionsHtml = '<option value="all">All Collections</option>';
            collections.forEach((name, id) => {
                optionsHtml += `<option value="${escapeHtml(id)}">${escapeHtml(name)}</option>`;
            });
            
            select.innerHTML = optionsHtml;
        }
        
        function updateStats() {
            const total = allNFTs.length;
            const active = allNFTs.filter(n => n.bridge_status === 'ACTIVE' || n.bridge_status === 'RETURNED').length;
            const bridged = allNFTs.filter(n => n.bridge_status === 'BRIDGED').length;
            const listed = allNFTs.filter(n => n.is_listed).length;
            
            document.getElementById('totalNFTs').textContent = total;
            document.getElementById('activeNFTs').textContent = active;
            document.getElementById('bridgedNFTs').textContent = bridged;
            document.getElementById('listedNFTs').textContent = listed;
        }
        
        // ═══════════════════════════════════════════════════════════════
        // FILTERING & SORTING
        // ═══════════════════════════════════════════════════════════════
        
        function applyFilters() {
            const collection = document.getElementById('filterCollection').value;
            const status = document.getElementById('filterStatus').value;
            const sort = document.getElementById('sortOrder').value;
            const search = document.getElementById('searchInput').value.toLowerCase();
            
            let filtered = [...allNFTs];
            
            // Filter by collection
            if (collection !== 'all') {
                filtered = filtered.filter(n => n.collection_id === collection);
            }
            
            // Filter by status
            if (status !== 'all') {
                if (status === 'listed') {
                    // Filter only listed NFTs (for sale)
                    filtered = filtered.filter(n => n.is_listed);
                } else {
                    filtered = filtered.filter(n => n.bridge_status.toLowerCase() === status);
                }
            }
            
            // Search
            if (search) {
                filtered = filtered.filter(n => 
                    n.name.toLowerCase().includes(search) ||
                    n.collection_name.toLowerCase().includes(search)
                );
            }
            
            // Sort
            filtered.sort((a, b) => {
                switch (sort) {
                    case 'newest':
                        return new Date(b.created_at || 0) - new Date(a.created_at || 0);
                    case 'oldest':
                        return new Date(a.created_at || 0) - new Date(b.created_at || 0);
                    case 'name':
                        return (a.name || '').localeCompare(b.name || '');
                    case 'collection':
                        return (a.collection_name || '').localeCompare(b.collection_name || '');
                    default:
                        return 0;
                }
            });
            
            renderNFTs(filtered);
        }
        
        // ═══════════════════════════════════════════════════════════════
        // RENDER NFTs
        // ═══════════════════════════════════════════════════════════════
        
        function renderNFTs(nfts) {
            const grid = document.getElementById('nftGrid');
            
            if (nfts.length === 0) {
                renderEmptyState();
                return;
            }
            
            grid.innerHTML = nfts.map(nft => createNFTCard(nft)).join('');
        }
        
        function renderEmptyState() {
            document.getElementById('nftGrid').innerHTML = `
                <div class="empty-state">
                    <div class="empty-state-icon">🎴</div>
                    <h3>No NFTs Found</h3>
                    <p>You don't have any NFTs yet. Mint your first Cosmic Vision card!</p>
                </div>
            `;
        }
        
        function createNFTCard(nft) {
            const status = nft.bridge_status || 'ACTIVE';
            const statusClass = status.toLowerCase();
            const rarity = getRarity(nft);
            const imageUrl = nft.image_url || nft.file_url;
            const isListed = nft.is_listed && nft.listing;
            const walletAddress = getWalletAddress();
            const isOwner = walletAddress && nft.owner_address === walletAddress;
            
            let statusLabel = 'L2 ACTIVE';
            if (status === 'BRIDGED') statusLabel = 'ON BITCOIN';
            if (status === 'RETURNED') statusLabel = 'RETURNED';
            
            // Image HTML with fallback
            const imageHtml = imageUrl 
                ? `<img class="nft-image" src="${imageUrl}" alt="${escapeHtml(nft.name)}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22><rect fill=%22%231a1a2e%22 width=%22200%22 height=%22200%22/><text x=%2250%%22 y=%2250%%22 fill=%22%238b5cf6%22 font-size=%2248%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>NFT</text></svg>'">`
                : `<div class="nft-image nft-image-placeholder">🎨</div>`;
            
            // Price badge and Buy button (only if listed)
            let priceHtml = '';
            let buyBtnHtml = '';
            
            if (isListed) {
                priceHtml = `<div class="nft-price-badge">▼ ${nft.listing.price_kray} KRAY</div>`;
                // Show Buy button only if not owner
                if (!isOwner) {
                    // Store NFT data for buy modal
                    const nftDataJson = JSON.stringify({
                        name: nft.name,
                        image_url: imageUrl,
                        owner_address: nft.owner_address
                    }).replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    buyBtnHtml = `<button class="nft-buy-btn" onclick="event.stopPropagation(); buyNFTFromList('${nft.listing.listing_id}', ${nft.listing.price_kray}, this)" data-nft="${nftDataJson}">BUY NOW</button>`;
                } else {
                    // Store listing data for cancel modal
                    const cancelDataJson = JSON.stringify({
                        listing_id: nft.listing.listing_id,
                        name: nft.name,
                        image_url: imageUrl,
                        price_kray: nft.listing.price_kray
                    }).replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    buyBtnHtml = `<button class="nft-cancel-listing-btn" onclick="event.stopPropagation(); openCancelListingModal(this)" data-listing="${cancelDataJson}">❌ CANCEL LISTING</button>`;
                }
            }
            
            return `
                <div class="nft-card ${statusClass} rarity-${rarity} ${isListed ? 'is-listed' : ''}" onclick="openDetailModal('${nft.id}')">
                    <div class="nft-status-badge ${statusClass}">${statusLabel}</div>
                    <div class="nft-rarity-badge ${rarity}">${rarity.toUpperCase()}</div>
                    ${imageHtml}
                    <div class="nft-info">
                        <div class="nft-collection">${escapeHtml(nft.collection_name)}</div>
                        <div class="nft-name">${escapeHtml(nft.name)}</div>
                        <div class="nft-meta">
                            <span class="nft-token-id">#${nft.token_id}</span>
                            ${priceHtml}
                        </div>
                        ${buyBtnHtml}
                    </div>
                </div>
            `;
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text || '';
            return div.innerHTML;
        }
        
        // Format collection ID to display name (cosmic_vision -> COSMIC VISION)
        function formatCollectionName(name) {
            if (!name) return 'Unknown Collection';
            // If it's already a proper name with spaces, return as uppercase
            if (name.includes(' ')) return name.toUpperCase();
            // Replace underscores with spaces and uppercase
            return name.replace(/_/g, ' ').toUpperCase();
        }
        
        // ═══════════════════════════════════════════════════════════════
        // DETAIL MODAL
        // ═══════════════════════════════════════════════════════════════
        
        // Best-effort fetch for modal deep-links — pulls the NFT and any active
        // listing, normalizes shape to match the grid format used by the modal.
        async function fetchNftForModal(nftId) {
            try {
                const itemResp = await fetch(`${API_BASE}/l2/nfts/item/${nftId}`);
                if (!itemResp.ok) return null;
                const itemData = await itemResp.json();
                const nft = itemData.nft || (itemData.success !== false ? itemData : null);
                if (!nft || !nft.id) return null;

                // Normalize keys the modal reads
                if (!nft.collection_name && nft.collection?.name) {
                    nft.collection_name = nft.collection.name;
                }
                if (!nft.image_url && nft.file_url) {
                    nft.image_url = nft.file_url;
                }

                // Best-effort listing enrichment so the Buy button shows for visitors.
                try {
                    const lr = await fetch(`${API_BASE}/l2/nfts/market/listings?collection=${encodeURIComponent(nft.collection_id || '')}&limit=200`);
                    if (lr.ok) {
                        const ld = await lr.json();
                        const found = (ld.listings || []).find(l => l.nft_id === nft.id);
                        if (found) {
                            nft.is_listed = true;
                            nft.listing = {
                                listing_id: found.listing_id,
                                price_kray: parseFloat(found.price_kray),
                                seller_address: found.seller_address
                            };
                        }
                    }
                } catch (_) { /* listing is best-effort */ }

                return nft;
            } catch (err) {
                console.warn('[fetchNftForModal] failed:', err.message);
                return null;
            }
        }

        async function openDetailModal(nftId) {
            // First try the in-memory grid; falls back to API for deep-links (?id=…)
            // navigated in from collection.html, krayscan, etc.
            let nft = allNFTs.find(n => n.id === nftId);
            if (!nft) {
                nft = await fetchNftForModal(nftId);
            }
            if (!nft) {
                console.warn('[openDetailModal] NFT not found:', nftId);
                return;
            }
            currentNFT = nft;

            const status = currentNFT.bridge_status || 'ACTIVE';
            const isBridged = status === 'BRIDGED';
            const imageUrl = currentNFT.image_url || currentNFT.file_url;
            const rarity = getRarity(currentNFT);
            
            document.getElementById('detailImage').src = imageUrl || '';
            document.getElementById('detailCollection').textContent = currentNFT.collection_name || 'Unknown';
            document.getElementById('detailName').textContent = currentNFT.name || 'Untitled';
            document.getElementById('detailTokenId').textContent = `Token #${currentNFT.token_id || '?'}`;
            document.getElementById('detailDescription').textContent = `"${currentNFT.description || 'A unique NFT on KRAY L2'}"`;
            
            // Status badge
            const badge = document.getElementById('detailStatusBadge');
            badge.className = `detail-status-badge ${status.toLowerCase()}`;
            badge.textContent = isBridged ? 'ON BITCOIN' : (status === 'RETURNED' ? 'RETURNED' : 'L2 ACTIVE');
            
            // Attributes (dynamic from metadata)
            const parsedAttrs = getAttributes(currentNFT);
            let attrsHtml = `
                <div class="attribute-box">
                    <div class="attribute-label">Rarity</div>
                    <div class="attribute-value" style="color: var(--rarity-${rarity});">${rarity.toUpperCase()}</div>
                </div>
            `;
            
            // Add other attributes dynamically (skip rarity, it's already shown)
            for (const [key, val] of Object.entries(parsedAttrs)) {
                if (key !== 'rarity') {
                    const label = key.charAt(0).toUpperCase() + key.slice(1);
                    attrsHtml += `
                        <div class="attribute-box">
                            <div class="attribute-label">${label}</div>
                            <div class="attribute-value">${val}</div>
                        </div>
                    `;
                }
            }
            
            // Status always last
            attrsHtml += `
                <div class="attribute-box">
                    <div class="attribute-label">Status</div>
                    <div class="attribute-value" style="color: ${isBridged ? 'var(--bitcoin-orange)' : 'var(--status-active)'};">${status}</div>
                </div>
            `;
            
            document.getElementById('detailAttributes').innerHTML = attrsHtml;
            
            // Collection Link Button
            const collectionBtn = document.getElementById('collectionLinkBtn');
            if (collectionBtn) {
                collectionBtn.href = `/collection?id=${currentNFT.collection_id}`;
                collectionBtn.textContent = `VIEW COLLECTION: ${currentNFT.collection_name || 'Unknown'}`;
            }
            
            // Bridge info
            const bridgeBox = document.getElementById('bridgeInfoBox');
            if (isBridged && currentNFT.inscription_id) {
                bridgeBox.style.display = 'block';
                document.getElementById('bridgeInscriptionId').textContent = currentNFT.inscription_id.slice(0, 16) + '...';
                document.getElementById('bridgeBridgedAt').textContent = currentNFT.bridged_at ? new Date(currentNFT.bridged_at).toLocaleDateString() : '-';
                document.getElementById('bridgeOrdinalLink').href = `https://ordinals.com/inscription/${currentNFT.inscription_id}`;
            } else {
                bridgeBox.style.display = 'none';
            }
            
            // Actions - Only show Transfer/Bridge for owner
            const actions = document.getElementById('detailActions');
            const walletAddress = getWalletAddress();
            const isOwner = walletAddress && currentNFT.owner_address === walletAddress;
            const isListed = currentNFT.is_listed && currentNFT.listing;
            
            // Use the canonical NFT hash for the social profile URL — backend
            // resolveL2NftId() accepts both hash and l2_collection_token, so this
            // gives us a clean, consistent on-chain id in user-facing URLs.
            const socialProfileId = currentNFT.id || `l2_${currentNFT.collection_id}_${currentNFT.token_id}`;
            const socialProfileBtn = `
                <a href="/inscription-profile?id=${socialProfileId}" class="action-btn social" style="background: linear-gradient(135deg, #8b5cf6, #06b6d4); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;">
                    Social Profile
                </a>
            `;
            
            if (isBridged) {
                // NFT is on Bitcoin - show link to L1 inscription profile
                const inscriptionProfileLink = currentNFT.inscription_id 
                    ? `<a href="/inscription-profile?id=${currentNFT.inscription_id}" class="action-btn social" style="background: linear-gradient(135deg, #f7931a, #fcd535); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;">Bitcoin Profile</a>`
                    : '';
                actions.innerHTML = `
                    <div class="owner-info" style="text-align: center; color: var(--text-dim); padding: 10px 10px 5px;">
                        ⛓️ This NFT is inscribed on Bitcoin
                    </div>
                    ${inscriptionProfileLink}
                `;
            } else if (isOwner) {
                // Owner can Transfer, Bridge, or view Social Profile
                actions.innerHTML = `
                    ${socialProfileBtn}
                    <button class="action-btn secondary" onclick="openTransferModal()">Transfer</button>
                    <button class="action-btn bridge" onclick="openBridgeModal()">Bridge to Bitcoin</button>
                `;
            } else if (isListed) {
                // Not owner but listed - show Buy button and Social Profile
                const priceKray = currentNFT.listing?.price_kray || 0;
                actions.innerHTML = `
                    ${socialProfileBtn}
                    <button class="action-btn primary" onclick="openBuyModal('${currentNFT.id}')">
                        Buy for ▼ ${priceKray.toLocaleString()} KRAY
                    </button>
                `;
            } else {
                // Not owner, not listed - show owner info and Social Profile
                const ownerShort = currentNFT.owner_address ? 
                    currentNFT.owner_address.slice(0, 8) + '...' + currentNFT.owner_address.slice(-6) : 
                    'Unknown';
                actions.innerHTML = `
                    ${socialProfileBtn}
                    <div class="owner-info" style="text-align: center; color: var(--text-dim); padding: 10px;">
                        Owned by ${ownerShort}
                    </div>
                `;
            }
            
            document.getElementById('detailModal').classList.add('active');
        }
        
        function closeDetailModal() {
            document.getElementById('detailModal').classList.remove('active');
            currentNFT = null;
        }
        
        // ═══════════════════════════════════════════════════════════════
        // TRANSFER MODAL
        // ═══════════════════════════════════════════════════════════════
        
        function openTransferModal() {
            if (!currentNFT) return;
            
            document.getElementById('transferImage').src = currentNFT.image_url;
            document.getElementById('transferName').textContent = currentNFT.name;
            document.getElementById('transferCollection').textContent = `${currentNFT.collection_name} #${currentNFT.token_id}`;
            document.getElementById('transferRecipient').value = '';
            
            closeDetailModal();
            document.getElementById('transferModal').classList.add('active');
        }
        
        function closeTransferModal() {
            document.getElementById('transferModal').classList.remove('active');
        }
        
        async function confirmTransfer() {
            const recipient = document.getElementById('transferRecipient').value.trim();
            
            if (!recipient) {
                alert('Please enter a recipient address');
                return;
            }
            
            if (!recipient.startsWith('bc1') && !recipient.startsWith('tb1')) {
                alert('Please enter a valid Bitcoin address');
                return;
            }
            
            const btn = document.getElementById('transferConfirmBtn');
            btn.disabled = true;
            btn.textContent = 'Transferring...';
            
            try {
                // ═══════════════════════════════════════════════════════════
                // Transfer NFT via L2 API
                // ═══════════════════════════════════════════════════════════
                
                // 1. Get nonce from account
                const accountRes = await fetch(`${KRAY_API}/api/l2/account/${getWalletAddress()}`);
                const accountData = await accountRes.json();
                const nonce = accountData.account?.nonce || 0;
                const ownerAddress = getWalletAddress();
                
                // 2. Sign with L2 format
                // IMPORTANT: tx_type must match backend NFT_TX_TYPES.NFT_TRANSFER = 'nft_transfer'
                // Backend uses amount: 0 for NFT transfers (gas is charged separately)
                const message = [
                    ownerAddress,
                    recipient,
                    '0',  // amount is 0 for NFT transfers (backend charges gas separately)
                    nonce.toString(),
                    'nft_transfer'  // Must be lowercase to match backend!
                ].join(':');
                
                let signature;
                if (window.krayWallet && window.krayWallet.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: {
                            title: 'Transfer NFT',
                            description: `Transfer ${currentNFT.name || 'NFT'} to another address. Gas fee goes to Treasury.`,
                            amount: '1 KRAY (gas)',
                            recipient: recipient.substring(0, 12) + '...',
                            type: 'Transfer',
                            icon: '📤'
                        }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    signature = await window.krayWallet.signMessage(message);
                }
                const pubkey = await window.krayWallet.getPublicKey();
                
                // 3. Call transfer API
                const response = await fetch(`${KRAY_API}/api/l2/nfts/transfer`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        nft_id: currentNFT.id,
                        to_address: recipient,
                        signature: signature,
                        nonce: nonce,
                        pubkey: pubkey
                    })
                });
                
                const data = await response.json();
                if (!data.success) throw new Error(data.error);
                
                alert(`✅ NFT transferred successfully!\n\nTo: ${recipient.slice(0, 16)}...`);
                closeTransferModal();
                loadNFTs();
                
            } catch (error) {
                alert('Transfer failed: ' + error.message);
            } finally {
                btn.disabled = false;
                btn.textContent = 'Confirm Transfer';
            }
        }
        
        // ═══════════════════════════════════════════════════════════════
        // BUY NFT (MARKETPLACE)
        // ═══════════════════════════════════════════════════════════════
        
        // ═══════════════════════════════════════════════════════════════
        // BUY NFT MODAL
        // ═══════════════════════════════════════════════════════════════
        
        let pendingBuyListing = null;
        let pendingBuyPrice = null;
        let pendingBuyNFT = null;
        
        // Called from detail modal (uses currentNFT)
        async function buyNFT(listingId, priceKray) {
            buyNFTWithData(listingId, priceKray, currentNFT);
        }
        
        // Called from NFT list cards (passes NFT data directly)
        function buyNFTFromList(listingId, priceKray, buttonElement) {
            const nftData = JSON.parse(buttonElement.dataset.nft);
            buyNFTWithData(listingId, priceKray, nftData);
        }
        
        // Main buy function
        async function buyNFTWithData(listingId, priceKray, nftData) {
            const walletAddress = getWalletAddress();
            
            if (!walletAddress) {
                alert('Please connect your wallet to buy NFTs');
                return;
            }
            
            // Check if extension is available
            if (!window.krayWallet) {
                alert('KrayWallet extension not found. Please install or refresh the page.');
                return;
            }
            
            // Store pending purchase info
            pendingBuyListing = listingId;
            pendingBuyPrice = priceKray;
            pendingBuyNFT = nftData;
            
            // Open buy modal
            openBuyModal(priceKray);
        }
        
        function openBuyModal(priceKray) {
            const totalCost = priceKray + 1;
            const marketFee = Math.floor(priceKray * 0.02);
            const sellerReceives = priceKray - marketFee;
            
            // Populate modal
            document.getElementById('buyModalImage').src = pendingBuyNFT?.image_url || '';
            document.getElementById('buyModalName').textContent = pendingBuyNFT?.name || 'NFT';
            document.getElementById('buyModalSeller').textContent = truncateAddress(pendingBuyNFT?.owner_address || '');
            document.getElementById('buyModalPrice').textContent = `▼ ${priceKray.toLocaleString()} KRAY`;
            document.getElementById('buyModalMarketFee').textContent = `▼ ${marketFee} KRAY (seller pays)`;
            document.getElementById('buyModalTotal').textContent = `▼ ${totalCost.toLocaleString()} KRAY`;
            
            // Reset button state
            const btn = document.getElementById('buyConfirmBtn');
            btn.disabled = false;
            btn.textContent = 'Sign & Buy';
            
            // Show modal
            document.getElementById('buyModal').classList.add('active');
        }
        
        function closeBuyModal() {
            document.getElementById('buyModal').classList.remove('active');
            pendingBuyListing = null;
            pendingBuyPrice = null;
            pendingBuyNFT = null;
        }
        
        async function confirmBuyNFT() {
            if (!pendingBuyListing || !pendingBuyPrice) return;
            
            const btn = document.getElementById('buyConfirmBtn');
            btn.disabled = true;
            btn.textContent = 'Getting account...';
            
            const walletAddress = getWalletAddress();
            
            try {
                // Get fresh nonce for race condition protection
                const accountRes = await fetch(`${KRAY_API}/l2/accounts/${walletAddress}`);
                const accountData = await accountRes.json();
                
                if (!accountData.success) {
                    throw new Error('Account not found. Please create an L2 account first.');
                }
                
                const nonce = accountData.account.nonce;
                
                btn.textContent = 'Signing...';
                
                // Include nonce in message for replay protection
                const message = [
                    walletAddress,
                    pendingBuyListing,
                    pendingBuyPrice.toString(),
                    nonce.toString(),
                    'buy_nft'
                ].join(':');
                
                // Use krayWallet API to sign message
                const signResult = await window.krayWallet.signMessage(message);
                
                btn.textContent = 'Processing...';
                
                // Get pubkey
                const pubkey = await window.krayWallet.getPublicKey();
                
                // Send buy request to backend with nonce
                const response = await fetch(`${KRAY_API}/l2/nfts/market/buy`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        listing_id: pendingBuyListing,
                        signature: signResult.signature,
                        pubkey: pubkey,
                        nonce: nonce  // Include nonce for race condition protection
                    })
                });
                
                const result = await response.json();
                
                closeBuyModal();
                
                if (result.success) {
                    // Show success with breakdown
                    showSuccessModal(
                        'NFT Purchased!',
                        `You bought "${pendingBuyNFT?.name || 'NFT'}" successfully.`,
                        [
                            { label: 'Price Paid', value: `▼ ${result.price_kray} KRAY` },
                            { label: 'Seller Received', value: `▼ ${result.seller_receives} KRAY` },
                            { label: 'Marketplace Fee', value: `▼ ${result.marketplace_fee} KRAY` },
                            { label: 'Gas Fee', value: `▼ ${result.gas_fee} KRAY` },
                            { label: 'Transaction', value: result.tx_hash.substring(0, 20) + '...' }
                        ]
                    );
                    // Reload NFTs to update the display
                    loadNFTs();
                } else {
                    // Handle race condition error
                    if (result.isRaceCondition) {
                        alert('⚠️ Someone else just bought this NFT!\n\nPlease try another listing.');
                    } else {
                        alert('Purchase failed: ' + (result.error || 'Unknown error'));
                    }
                }
                
            } catch (error) {
                console.error('Buy error:', error);
                btn.disabled = false;
                btn.textContent = 'Sign & Buy';
                alert('Purchase failed: ' + error.message);
            }
        }
        
        // Simple success modal helper
        function showSuccessModal(title, message, details) {
            let detailsHtml = '';
            if (details && details.length > 0) {
                detailsHtml = '<div style="background: rgba(0,255,0,0.1); border: 1px solid rgba(0,255,0,0.3); border-radius: 10px; padding: 15px; margin-top: 15px;">';
                details.forEach(d => {
                    detailsHtml += `<div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px;">
                        <span style="color: var(--text-dim);">${d.label}</span>
                        <span style="color: var(--text-light);">${d.value}</span>
                    </div>`;
                });
                detailsHtml += '</div>';
            }
            
            // Use a simple alert for now, but could be enhanced
            alert(`🎉 ${title}\n\n${message}\n\n${details.map(d => `${d.label}: ${d.value}`).join('\n')}`);
        }
        
        // ═══════════════════════════════════════════════════════════════
        // CANCEL LISTING MODAL
        // ═══════════════════════════════════════════════════════════════
        
        let pendingCancelListing = null;
        
        function openCancelListingModal(buttonElement) {
            const listingData = JSON.parse(buttonElement.dataset.listing);
            pendingCancelListing = listingData;
            
            // Populate modal
            document.getElementById('cancelModalImage').src = listingData.image_url || '';
            document.getElementById('cancelModalName').textContent = listingData.name || 'NFT';
            document.getElementById('cancelModalPrice').textContent = `▼ ${listingData.price_kray.toLocaleString()} KRAY`;
            
            // Reset button state
            const btn = document.getElementById('cancelListingBtn');
            btn.disabled = false;
            btn.textContent = 'Sign & Cancel';
            
            // Show modal
            document.getElementById('cancelListingModal').classList.add('active');
        }
        
        function closeCancelListingModal() {
            document.getElementById('cancelListingModal').classList.remove('active');
            pendingCancelListing = null;
        }
        
        async function confirmCancelListing() {
            if (!pendingCancelListing) return;
            
            const btn = document.getElementById('cancelListingBtn');
            btn.disabled = true;
            btn.textContent = 'Signing...';
            
            try {
                // Get wallet context
                const walletContext = window.walletContext || await getWalletContext();
                if (!walletContext || !walletContext.address) {
                    throw new Error('Wallet not connected');
                }
                
                // Create message to sign (exact format expected by backend)
                const message = `Cancel listing ${pendingCancelListing.listing_id}`;
                
                // 🔐 Sign LOCALLY (LEI PRIMORDIAL: Mnemonic NEVER leaves device!)
                btn.textContent = 'Signing...';
                const signResult = await walletContext.signMessage(message);
                
                if (!signResult || !signResult.signature) {
                    throw new Error('Failed to sign message');
                }
                
                btn.textContent = 'Cancelling...';
                
                // Send unlist request to backend
                const response = await fetch(`${API_BASE}/l2/nfts/market/unlist`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        listing_id: pendingCancelListing.listing_id,
                        signature: signResult.signature,
                        pubkey: signResult.pubkey
                    })
                });
                
                const result = await response.json();
                
                closeCancelListingModal();
                
                if (result.success) {
                    showSuccessModal(
                        'Listing Cancelled!',
                        `"${pendingCancelListing?.name || 'NFT'}" has been removed from the marketplace.`,
                        [
                            { label: 'Gas Fee', value: '▼ 1 KRAY' },
                            { label: 'Transaction', value: result.tx_hash.substring(0, 20) + '...' }
                        ]
                    );
                    // Reload NFTs to update the display
                    loadNFTs();
                } else {
                    alert('Cancel failed: ' + (result.error || 'Unknown error'));
                }
                
            } catch (error) {
                console.error('Cancel listing error:', error);
                btn.disabled = false;
                btn.textContent = 'Sign & Cancel';
                alert('Cancel failed: ' + error.message);
            }
        }
        
        // ═══════════════════════════════════════════════════════════════
        // BRIDGE MODAL
        // ═══════════════════════════════════════════════════════════════
        
        async function openBridgeModal() {
            if (!currentNFT) return;
            
            document.getElementById('bridgeImage').src = currentNFT.image_url;
            document.getElementById('bridgeName').textContent = currentNFT.name;
            document.getElementById('bridgeCollection').textContent = `${currentNFT.collection_name} #${currentNFT.token_id}`;
            
            // Reset fees
            document.getElementById('bridgeFeeCommit').textContent = '-- sats';
            document.getElementById('bridgeFeeReveal').textContent = '-- sats';
            document.getElementById('bridgeFeeTotal').textContent = '-- sats';
            document.getElementById('bridgeImageSize').textContent = '--';
            
            closeDetailModal();
            document.getElementById('bridgeModal').classList.add('active');
            
            // Load bridge fees
            await loadBridgeFees();
        }
        
        function closeBridgeModal() {
            document.getElementById('bridgeModal').classList.remove('active');
            bridgeData = null;
        }
        
        async function loadBridgeFees() {
            const btn = document.getElementById('bridgeConfirmBtn');
            btn.disabled = true;
            btn.textContent = 'Loading fees...';
            
            try {
                const address = getWalletAddress();
                let publicKey = null;
                
                try {
                    if (window.krayWallet) {
                        publicKey = await window.krayWallet.getPublicKey();
                    }
                } catch (e) {}
                
                // ═══════════════════════════════════════════════════════════
                // Bridge to L1 API
                // Endpoint changes based on inscription_id:
                // - No inscription: /inscribe (create new inscription)
                // - Has inscription: /bridge-to-l1 (move existing)
                // ═══════════════════════════════════════════════════════════
                
                const endpoint = currentNFT.inscription_id 
                    ? `${KRAY_API}/api/l2/nfts/${currentNFT.id}/bridge-to-l1`
                    : `${KRAY_API}/api/l2/nfts/${currentNFT.id}/inscribe`;
                
                const response = await fetch(endpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        ownerAddress: address,
                        publicKey,
                        feeRate: 10
                    })
                });
                
                const data = await response.json();
                
                if (!data.success) {
                    throw new Error(data.error || 'Failed to prepare bridge');
                }
                
                bridgeData = data;
                
                // Update UI
                document.getElementById('bridgeFeeCommit').textContent = `${data.inscription.fees.commit} sats`;
                document.getElementById('bridgeFeeReveal').textContent = `${data.inscription.fees.reveal} sats`;
                document.getElementById('bridgeFeeTotal').textContent = `${data.inscription.fees.total} sats`;
                document.getElementById('bridgeImageSize').textContent = data.inscription.imageSizeKB;
                
                btn.disabled = false;
                btn.textContent = 'Sign & Bridge';
                
            } catch (error) {
                console.error('Bridge fees error:', error);
                btn.textContent = 'Error - Try Again';
                setTimeout(() => {
                    btn.disabled = false;
                    btn.textContent = 'Retry';
                }, 2000);
            }
        }
        
        async function confirmBridge() {
            if (!bridgeData || !currentNFT) return;
            
            const btn = document.getElementById('bridgeConfirmBtn');
            btn.disabled = true;
            btn.textContent = 'Signing...';
            
            try {
                // Sign with KRAY Wallet
                if (!window.krayWallet) {
                    throw new Error('KRAY Wallet not available');
                }
                
                const signedCommit = await window.krayWallet.signPsbt(bridgeData.inscription.psbt, {
                    autoFinalized: true
                });
                
                if (!signedCommit || !signedCommit.signedPsbt) {
                    throw new Error('Transaction rejected');
                }
                
                btn.textContent = 'Broadcasting...';
                
                // Broadcast
                const broadcastResponse = await fetch(`${KRAY_API}/api/psbt/broadcast`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        signedPsbt: signedCommit.signedPsbt
                    })
                });
                
                const broadcastData = await broadcastResponse.json();
                
                if (!broadcastData.success) {
                    throw new Error(broadcastData.error || 'Broadcast failed');
                }
                
                const commitTxId = broadcastData.txid;
                
                // ═══════════════════════════════════════════════════════════
                // Confirm Bridge on L2 Backend
                // ═══════════════════════════════════════════════════════════
                await fetch(`${KRAY_API}/api/l2/nfts/${currentNFT.id}/confirm-bridge`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        l1_txid: commitTxId,
                        inscription_id: bridgeData.inscription?.inscriptionId || null,
                        direction: 'to_l1'
                    })
                });
                
                alert(`✅ NFT bridged to Bitcoin!\n\nTransaction: ${commitTxId.slice(0, 16)}...`);
                closeBridgeModal();
                loadNFTs();
                
            } catch (error) {
                alert('Bridge failed: ' + error.message);
                btn.disabled = false;
                btn.textContent = 'Sign & Bridge';
            }
        }
        
        // ═══════════════════════════════════════════════════════════════
        // MODAL CLOSE ON CLICK OUTSIDE
        // ═══════════════════════════════════════════════════════════════
        
        document.querySelectorAll('.modal-overlay').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target.classList.contains('modal-overlay')) {
                    e.target.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>