<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║                        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: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            max-width: 720px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: 10px;
            right: 12px;
            background: rgba(0,0,0,0.5);
            border: none;
            color: #999;
            font-size: 20px;
            cursor: pointer;
            z-index: 10;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        
        .modal-close:hover {
            color: #fff;
            background: rgba(255,255,255,0.15);
        }
        
        .detail-modal-content {
            padding: 0;
            display: grid;
            grid-template-columns: 280px 1fr;
        }
        @media (max-width: 640px) {
            .detail-modal-content { grid-template-columns: 1fr; }
            .detail-image-container { max-height: 260px; }
        }
        
        .detail-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 16px 0 0 16px;
            background: #0d0d14;
        }
        @media (max-width: 640px) {
            .detail-image-container { border-radius: 16px 16px 0 0; }
        }
        
        .detail-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .detail-status-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        .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: 20px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            max-height: 80vh;
        }
        
        .detail-collection {
            font-size: 11px;
            color: var(--cyan-mirror);
            text-transform: uppercase;
            margin-bottom: 4px;
            letter-spacing: 0.5px;
        }
        
        .detail-name {
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 2px;
            line-height: 1.3;
        }
        
        .detail-token-id {
            font-size: 11px;
            color: var(--text-dim);
            margin-bottom: 14px;
        }
        
        .detail-attributes {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            margin-bottom: 12px;
        }
        
        .attribute-box {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            padding: 8px 10px;
            text-align: center;
        }
        
        .attribute-label {
            font-size: 9px;
            color: var(--text-dim);
            text-transform: uppercase;
            margin-bottom: 3px;
            letter-spacing: 0.3px;
        }
        
        .attribute-value {
            font-size: 12px;
            color: #ddd;
            font-weight: 600;
        }
        
        .detail-description {
            font-size: 12px;
            color: var(--text-dim);
            line-height: 1.5;
            margin-bottom: 14px;
            font-style: italic;
        }
        
        /* Bridge Info Box */
        .bridge-info-box {
            background: rgba(247, 147, 26, 0.08);
            border: 1px solid rgba(247, 147, 26, 0.2);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 14px;
        }
        
        .bridge-info-box h4 {
            color: var(--bitcoin-orange);
            font-size: 11px;
            margin-bottom: 8px;
        }
        
        .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: 8px;
            flex-wrap: wrap;
            margin-top: auto;
        }
        
        .action-btn {
            flex: 1;
            min-width: 0;
            padding: 10px 12px;
            border-radius: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .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: 8px 14px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            color: #ccc;
            font-weight: 600;
            border-radius: 8px;
            text-decoration: none;
            margin-bottom: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            font-size: 9px;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .collection-link-btn:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.2);
        }
        
        /* ═══════════════════════════════════════════════════════════
           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 (only visible on /nft-l2/market — shows Market + Shares) -->
    <div class="l2-tabs" id="marketTabs" style="display:none;">
        <button class="l2-tab-btn active" data-l2tab="l2-market">Market</button>
        <button class="l2-tab-btn" data-l2tab="l2-shares">Shares</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>
                        <button class="action-btn secondary" onclick="openVaultPermModal()" style="background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.25);color:#fbbf24;">🔐 Vault Permissions</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>

    <!-- SHARE TRANSFER MODAL -->
    <div class="modal-overlay" id="shareTransferModal">
        <div class="modal">
            <button class="modal-close" onclick="closeShareTransferModal()">&times;</button>
            <div class="transfer-modal-content">
                <h3 style="color:#00b894;">🔗 TRANSFER SHARES</h3>
                <p>Send shares of this NFT to another holder</p>
                
                <div class="transfer-preview">
                    <img id="shareTransferImage" src="" alt="NFT">
                    <div class="transfer-preview-info">
                        <h4 id="shareTransferName">NFT Name</h4>
                        <p id="shareTransferSymbol" style="font-family:monospace;color:#00b894;font-size:12px;">—</p>
                    </div>
                </div>
                
                <div class="transfer-form-group">
                    <label>Recipient Address</label>
                    <input type="text" id="shareRecipient" placeholder="bc1p... or bc1q...">
                </div>
                
                <div class="transfer-form-group">
                    <label>Amount of Shares</label>
                    <input type="number" id="shareAmount" placeholder="e.g. 1000" min="1">
                    <p style="font-size:11px;color:#888;margin-top:4px;">Available: <span id="shareAvailable" style="color:#00b894;">—</span></p>
                </div>
                
                <div class="transfer-fee-info">
                    <p>Gas Fee: 1 KRAY</p>
                </div>
                
                <div class="transfer-actions">
                    <button class="action-btn secondary" onclick="closeShareTransferModal()">Cancel</button>
                    <button class="action-btn primary" id="shareTransferConfirmBtn" onclick="confirmShareTransfer()" style="background:linear-gradient(135deg,#00b894,#00cec9);">🔗 Confirm Transfer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- VAULT PERMISSIONS MODAL -->
    <div class="modal-overlay" id="vaultPermModal">
        <div class="modal">
            <button class="modal-close" onclick="closeVaultPermModal()">&times;</button>
            <div class="transfer-modal-content">
                <h3 style="color:#fbbf24;">🔐 VAULT PERMISSIONS</h3>
                <p>Control who can mint child NFTs using this NFT as parent</p>

                <div class="transfer-preview">
                    <img id="vpImage" src="" alt="NFT">
                    <div class="transfer-preview-info">
                        <h4 id="vpName">NFT Name</h4>
                        <p id="vpCurrentMode" style="color:#fbbf24;font-size:12px;">Mode: closed</p>
                    </div>
                </div>

                <div class="transfer-form-group">
                    <label>Permission Mode</label>
                    <select id="vpMode" style="width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border-subtle);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;">
                        <option value="closed">Closed — Only owner can mint children</option>
                        <option value="open">Open — Anyone can mint children</option>
                        <option value="whitelist">Whitelist — Owner + specific addresses</option>
                    </select>
                </div>

                <div class="transfer-form-group" id="vpWhitelistGroup" style="display:none;">
                    <label>Whitelisted Addresses (one per line)</label>
                    <textarea id="vpWhitelist" placeholder="bc1p...&#10;bc1q...&#10;bc1p..." style="width:100%;min-height:80px;background:rgba(255,255,255,0.05);border:1px solid var(--border-subtle);border-radius:8px;padding:10px 14px;color:#fff;font-size:12px;font-family:monospace;resize:vertical;box-sizing:border-box;"></textarea>
                    <p style="font-size:11px;color:#888;margin-top:4px;">Each address gets permission to mint children using this NFT as parent.</p>
                </div>

                <div class="transfer-fee-info" style="background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.25);">
                    <p style="color:#fbbf24;">Requires signature from NFT owner. No gas fee.</p>
                </div>

                <div class="transfer-actions">
                    <button class="action-btn secondary" onclick="closeVaultPermModal()">Cancel</button>
                    <button class="action-btn primary" id="vpSaveBtn" onclick="saveVaultPermissions()" style="background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;">🔐 Sign & Save</button>
                </div>
                <div id="vpProgress" style="display:none;text-align:center;font-size:12px;color:#888;margin-top:8px;"></div>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         TAB: SHARES MARKETPLACE
         ═══════════════════════════════════════════════════════════ -->
    <div class="l2-tab-content" id="l2-shares">
        <div class="l2-market-container">
            <!-- Header -->
            <div class="l2-market-header">
                <h2>Share Pools</h2>
                <div style="display:flex;gap:8px;align-items:center;">
                    <button id="listMySharesBtn" style="display:none;padding:8px 16px;background:linear-gradient(135deg,#00b894,#00cec9);border:none;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;font-size:12px;">
                        + List My Shares
                    </button>
                    <select id="shareFilterSort" style="padding:6px 12px;background:var(--bg-card,#1a1a2e);border:1px solid var(--border-subtle,#333);border-radius:8px;color:#fff;font-size:12px;">
                        <option value="newest">Newest</option>
                        <option value="price_asc">Price: Low to High</option>
                        <option value="price_desc">Price: High to Low</option>
                        <option value="amount_desc">Most Shares</option>
                    </select>
                </div>
            </div>

            <!-- Pools Ranking Table (like Market collections ranking) -->
            <div class="l2-ranking-table" style="margin-top:16px;border-color:rgba(0,184,148,0.15);">
                <div class="l2-ranking-header" style="grid-template-columns:40px 1fr 100px 100px 80px 80px;">
                    <span>#</span>
                    <span>NFT / Pool</span>
                    <span>Holders</span>
                    <span>For Sale</span>
                    <span>Floor</span>
                    <span>Supply</span>
                </div>
                <div id="sharePoolsRankingBody">
                    <div class="l2-loading" id="shareListingsLoading">Loading share pools...</div>
                </div>
            </div>

            <!-- Pool Detail (opens when clicking a row) -->
            <div id="sharePoolView" style="display:none;margin-top:24px;">
                <div style="display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-card,#1a1a2e);border-radius:12px;border:1px solid rgba(0,184,148,0.2);margin-bottom:16px;">
                    <img id="sharePoolNftImg" src="" style="width:64px;height:64px;border-radius:10px;object-fit:cover;background:#111;" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%23333%22 width=%22100%22 height=%22100%22/></svg>';">
                    <div style="flex:1;">
                        <div id="sharePoolNftName" style="font-size:18px;font-weight:700;color:#fff;">—</div>
                        <div id="sharePoolNftCollection" style="font-size:12px;color:#888;">—</div>
                        <div id="sharePoolSymbol" style="font-size:11px;color:#00b894;font-family:monospace;margin-top:2px;">—</div>
                    </div>
                    <div style="text-align:right;">
                        <div style="font-size:11px;color:rgba(255,255,255,0.4);text-transform:uppercase;">Total Supply</div>
                        <div id="sharePoolSupply" style="font-size:20px;font-weight:700;color:#00b894;">—</div>
                    </div>
                    <button onclick="document.getElementById('sharePoolView').style.display='none'" style="background:none;border:none;color:#666;cursor:pointer;font-size:18px;padding:4px 8px;">✕</button>
                </div>

                <!-- Holders Ranking + Sell Orders side by side -->
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <!-- Holders Ranking -->
                    <div>
                        <div style="font-size:13px;color:rgba(255,255,255,0.5);text-transform:uppercase;margin-bottom:10px;letter-spacing:0.8px;font-weight:600;">Holders Ranking</div>
                        <div class="l2-ranking-table" style="border-color:rgba(0,184,148,0.1);">
                            <div style="display:grid;grid-template-columns:30px 1fr 80px 60px;padding:10px 12px;background:rgba(255,255,255,0.03);border-bottom:1px solid var(--border-subtle,#333);font-size:10px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">
                                <span>#</span>
                                <span>Address</span>
                                <span style="text-align:right;">Balance</span>
                                <span style="text-align:right;">%</span>
                            </div>
                            <div id="sharePoolHolders" style="max-height:320px;overflow-y:auto;">
                                <div style="padding:20px;text-align:center;color:#666;font-size:12px;">Loading...</div>
                            </div>
                        </div>
                    </div>

                    <!-- Active Sell Orders -->
                    <div>
                        <div style="font-size:13px;color:rgba(255,255,255,0.5);text-transform:uppercase;margin-bottom:10px;letter-spacing:0.8px;font-weight:600;">Sell Orders</div>
                        <div class="l2-ranking-table" style="border-color:rgba(0,184,148,0.1);">
                            <div style="display:grid;grid-template-columns:1fr 80px 80px 70px;padding:10px 12px;background:rgba(255,255,255,0.03);border-bottom:1px solid var(--border-subtle,#333);font-size:10px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">
                                <span>Seller</span>
                                <span style="text-align:right;">Shares</span>
                                <span style="text-align:right;">Price</span>
                                <span></span>
                            </div>
                            <div id="sharePoolOrders" style="max-height:320px;overflow-y:auto;">
                                <div style="padding:20px;text-align:center;color:#666;font-size:12px;">No sell orders</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Listings Grid (cards below) -->
            <div style="margin-top:32px;">
                <h2 style="color:#fff;font-size:20px;font-weight:600;margin-bottom:16px;font-family:'Rajdhani',sans-serif;">Active Listings</h2>
                <div id="shareListingsGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;">
                </div>
            </div>
        </div>
    </div>
    <select id="shareFilterNft" style="display:none;"><option value="">All NFTs</option></select>

    <!-- SHARE LIST MODAL -->
    <div class="modal-overlay" id="shareListModal">
        <div class="modal">
            <button class="modal-close" onclick="document.getElementById('shareListModal').classList.remove('active')">&times;</button>
            <div class="transfer-modal-content">
                <h3 style="color:#00b894;">+ LIST SHARES FOR SALE</h3>
                <p>Choose which shares to sell on the marketplace</p>
                <div class="transfer-form-group">
                    <label>Select NFT</label>
                    <select id="shareListNftSelect" style="display:none;">
                        <option value="">Loading your shares...</option>
                    </select>
                    <div id="shareListNftPicker" style="display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;padding:4px 0;">
                        <div style="color:#666;font-size:12px;padding:12px;text-align:center;">Loading your shares...</div>
                    </div>
                    <p style="font-size:11px;color:#888;margin-top:4px;">Available: <span id="shareListAvailable" style="color:#00b894;">—</span></p>
                </div>
                <div class="transfer-form-group">
                    <label>Amount of Shares</label>
                    <input type="number" id="shareListAmount" placeholder="e.g. 1000" min="1">
                </div>
                <div class="transfer-form-group">
                    <label>Price per Share</label>
                    <div style="display:flex;gap:6px;">
                        <input type="number" id="shareListPrice" placeholder="e.g. 1" min="1" style="flex:1;">
                        <select id="shareListTokenSelect" style="width:110px;padding:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:12px;">
                            <option value="KRAY" selected>KRAY</option>
                        </select>
                    </div>
                </div>
                <div style="background:rgba(0,184,148,0.08);border:1px solid rgba(0,184,148,0.15);border-radius:8px;padding:12px;margin:12px 0;">
                    <div style="display:flex;justify-content:space-between;font-size:13px;">
                        <span style="color:#888;">Total listing value</span>
                        <span id="shareListTotal" style="color:#00b894;font-weight:700;">0 KRAY</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:11px;margin-top:4px;">
                        <span style="color:#666;">Gas fee</span>
                        <span style="color:#888;">1 KRAY (always)</span>
                    </div>
                </div>
                <div class="transfer-actions">
                    <button class="action-btn secondary" onclick="document.getElementById('shareListModal').classList.remove('active')">Cancel</button>
                    <button class="action-btn primary" id="shareListConfirmBtn" onclick="confirmShareList()" style="background:linear-gradient(135deg,#00b894,#00cec9);">Sign & List Shares</button>
                </div>
            </div>
        </div>
    </div>

    <!-- SHARE BUY MODAL -->
    <div class="modal-overlay" id="shareBuyModal">
        <div class="modal">
            <button class="modal-close" onclick="document.getElementById('shareBuyModal').classList.remove('active')">&times;</button>
            <div class="transfer-modal-content">
                <h3>BUY SHARES</h3>
                <p>Purchase fractional ownership shares</p>
                <div class="transfer-preview">
                    <img id="shareBuyNftImg" src="" alt="NFT">
                    <div class="transfer-preview-info">
                        <h4 id="shareBuyNftName">—</h4>
                        <p id="shareBuySymbol" style="color:#00b894;font-size:12px;font-family:monospace;">—</p>
                    </div>
                </div>
                <div style="background:rgba(0,184,148,0.08);border:1px solid rgba(0,184,148,0.15);border-radius:8px;padding:14px;margin:12px 0;">
                    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                        <span style="color:#888;">Shares</span>
                        <span id="shareBuyAmount" style="color:#fff;font-weight:700;">—</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                        <span style="color:#888;">Price per share</span>
                        <span id="shareBuyPriceEach" style="color:#fff;">— KRAY</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:14px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);">
                        <span style="color:#fff;font-weight:600;">Total Cost</span>
                        <span id="shareBuyTotal" style="color:#00b894;font-weight:700;font-size:16px;">— KRAY</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:11px;margin-top:4px;">
                        <span style="color:#666;">Gas fee</span>
                        <span style="color:#888;">1 KRAY</span>
                    </div>
                </div>
                <div style="font-size:11px;color:#888;margin-bottom:12px;">Seller: <span id="shareBuySeller" style="font-family:monospace;">—</span></div>
                <div class="transfer-actions">
                    <button class="action-btn secondary" onclick="document.getElementById('shareBuyModal').classList.remove('active')">Cancel</button>
                    <button class="action-btn primary" id="shareBuyConfirmBtn" onclick="confirmShareBuy()" style="background:linear-gradient(135deg,#00b894,#00cec9);">Sign & Buy Shares</button>
                </div>
            </div>
        </div>
    </div>

    <!-- SHARE CANCEL LISTING MODAL -->
    <div class="modal-overlay" id="shareCancelModal">
        <div class="modal">
            <button class="modal-close" onclick="document.getElementById('shareCancelModal').classList.remove('active')">&times;</button>
            <div class="transfer-modal-content">
                <h3 style="color:#ef4444;">CANCEL SHARE LISTING</h3>
                <p>Remove your shares from the marketplace</p>
                <div style="background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.15);border-radius:8px;padding:14px;margin:12px 0;">
                    <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;">
                        <span style="color:#888;">Shares to unlock</span>
                        <span id="shareCancelAmount" style="color:#fff;font-weight:700;">—</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;font-size:11px;">
                        <span style="color:#666;">Gas fee</span>
                        <span style="color:#888;">1 KRAY</span>
                    </div>
                </div>
                <div class="transfer-actions">
                    <button class="action-btn secondary" onclick="document.getElementById('shareCancelModal').classList.remove('active')">Keep Listed</button>
                    <button class="action-btn primary" id="shareCancelConfirmBtn" onclick="confirmShareCancel()" style="background:linear-gradient(135deg,#ef4444,#b91c1c);">Sign & Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         TAB 3: VAULTS
         ═══════════════════════════════════════════════════════════ -->
    <div class="l2-tab-content" id="l2-vaults">
        <div class="l2-market-container">
            <div class="l2-market-header">
                <h2>NFT Vaults</h2>
                <p style="color:#888;font-size:13px;margin-top:4px;">NFTs with children — each vault is a provenance tree</p>
            </div>
            <div id="vaultsGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px;">
                <div style="text-align:center;padding:40px;color:#888;">Loading vaults...</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>

    <!-- LIST ON MARKET MODAL -->
    <div class="modal-overlay" id="listModal">
        <div class="modal" style="max-width:400px;">
            <button class="modal-close" onclick="closeListModal()">&times;</button>
            <div style="padding:20px;">
                <h3 style="font-size:14px;color:#fff;margin:0 0 4px;">List on Market</h3>
                <p style="font-size:11px;color:#888;margin:0 0 16px;">Set a price to sell this NFT</p>
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
                    <div style="width:48px;height:48px;border-radius:8px;overflow:hidden;background:#1a1a2e;flex-shrink:0;">
                        <img id="listModalImage" src="" style="width:100%;height:100%;object-fit:cover;">
                    </div>
                    <div style="min-width:0;">
                        <div id="listModalName" style="font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></div>
                        <div id="listModalCollection" style="font-size:10px;color:#888;text-transform:uppercase;"></div>
                    </div>
                </div>
                <label style="font-size:11px;color:#888;display:block;margin-bottom:4px;">Price</label>
                <div style="display:flex;gap:6px;margin-bottom:10px;">
                    <input type="number" id="listPriceInput" min="1" step="1" placeholder="100" style="flex:1;padding:10px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:14px;outline:none;">
                    <select id="listTokenSelect" style="width:110px;padding:10px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#fff;font-size:12px;outline:none;cursor:pointer;">
                        <option value="KRAY" selected>KRAY</option>
                    </select>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:11px;color:#666;margin-bottom:16px;">
                    <span>Marketplace fee</span>
                    <span>2% (paid on sale) + 1 KRAY gas</span>
                </div>
                <div style="display:flex;gap:8px;">
                    <button class="action-btn secondary" onclick="closeListModal()" style="flex:1;">Cancel</button>
                    <button class="action-btn primary" id="listConfirmBtn" onclick="confirmListOnMarket()" style="flex:1;">Sign & List</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // ═══════════════════════════════════════════════════════════════
        // CONFIGURATION
        // ═══════════════════════════════════════════════════════════════
        
        const API_BASE = window.location.origin;
        const KRAY_API = '';

        // 🖼️ Supabase image transform: encolhe imagens cheias do storage em
        // thumbnails rápidos (render API habilitado no projeto). Só reescreve
        // URLs públicas do Supabase Storage; qualquer outra URL passa intacta.
        // Se a miniatura falhar, o onerror dos <img> cai para a imagem original.
        function l2Thumb(url, size) {
            if (!url || typeof url !== 'string') return url || '';
            if (url.indexOf('/storage/v1/object/public/') === -1) return url;
            const render = url.replace('/storage/v1/object/public/', '/storage/v1/render/image/public/');
            const sep = render.indexOf('?') === -1 ? '?' : '&';
            return `${render}${sep}width=${size || 96}&height=${size || 96}&resize=cover&quality=70`;
        }

        let allNFTs = [];
        let currentNFT = null;
        let bridgeData = null;
        let l2MarketPeriod = '24h';
        let l2MarketLoaded = false;
        let l2VaultsLoaded = false;
        let l2AvailableTokens = ['KRAY'];

        async function loadL2Tokens() {
            try {
                const r = await fetch(`${API_BASE}/l2/tokens`);
                const d = await r.json();
                if (d.tokens) l2AvailableTokens = d.tokens.map(t => t.symbol);
                if (!l2AvailableTokens.includes('KRAY')) l2AvailableTokens.unshift('KRAY');
                populateTokenSelects();
            } catch(e) { console.warn('Failed to load L2 tokens:', e); }
        }

        function populateTokenSelects() {
            document.querySelectorAll('#listTokenSelect, #shareListTokenSelect').forEach(sel => {
                const cur = sel.value;
                sel.innerHTML = l2AvailableTokens.map(s => `<option value="${s}" ${s===cur?'selected':''}>${s}</option>`).join('');
            });
        }

        loadL2Tokens();

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

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

        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();
                }
            }
            if (tab === 'l2-shares' && !shareMarketLoaded) {
                loadShareMarket();
            }
            if (tab === 'l2-vaults' && !l2VaultsLoaded) {
                loadL2Vaults();
            }
        }

        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();
            const urlSlug = window.location.pathname.split('/').filter(Boolean)[1] || '';
            const marketTabs = document.getElementById('marketTabs');
            if (!urlSlug || urlSlug === 'market' || urlSlug === 'shares') {
                if (marketTabs) marketTabs.style.display = '';
            }
            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="' + l2Thumb(item.logo_url, 96) + '" alt="" loading="lazy" decoding="async" onerror="if(!this.dataset.fb){this.dataset.fb=1;this.src=\'' + item.logo_url + '\';}else{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);
                        let sm = {};
                        try { sm = typeof s.metadata === 'string' ? JSON.parse(s.metadata) : (s.metadata || {}); } catch {}
                        const imgSrc = (sm.cover_url) || (sm.image_url) || s.image_url || s.file_url || '/public/images/kray-station-logo.png';
                        return '<div class="l2-sold-card">' +
                            '<img src="' + l2Thumb(imgSrc, 256) + '" alt="" loading="lazy" decoding="async" onerror="if(!this.dataset.fb){this.dataset.fb=1;this.src=\'' + imgSrc + '\';}else{this.src=\'/public/images/kray-station-logo.png\';}">' +
                            '<div class="l2-sold-info">' +
                                '<div class="l2-sold-name">' + (sm.title || sm.name || s.name || 'NFT') + '</div>' +
                                '<div class="l2-sold-price">▼ ' + parseFloat(s.price_kray).toFixed(2) + ' ' + (s.token_symbol || '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';
        }

        // ═══════════════════════════════════════════════════════════════
        // VAULTS TAB
        // ═══════════════════════════════════════════════════════════════

        async function loadL2Vaults() {
            const grid = document.getElementById('vaultsGrid');
            if (!grid) return;
            grid.innerHTML = '<div style="text-align:center;padding:40px;color:#888;">Loading vaults...</div>';

            try {
                const res = await fetch(`${API_BASE}/l2/nfts/vaults?limit=100`);
                const data = await res.json();

                if (!data.success || !data.vaults || data.vaults.length === 0) {
                    grid.innerHTML = '<div style="text-align:center;padding:60px;color:#666;"><div style="font-size:48px;margin-bottom:12px;">🔐</div><h3 style="color:#aaa;margin:0 0 8px;">No Vaults Yet</h3><p style="font-size:13px;">When NFTs mint children, their vaults appear here.</p></div>';
                    l2VaultsLoaded = true;
                    return;
                }

                grid.innerHTML = data.vaults.map(v => {
                    const name = v.parent_name || 'NFT ' + (v.parent_id || '').slice(0, 8);
                    const img = v.parent_image || '';
                    const layer = v.source_layer === 'bitcoin_l1' ? 'L1 Ordinal' : 'L2 NFT';
                    const layerColor = v.source_layer === 'bitcoin_l1' ? '#f7931a' : '#a855f7';
                    const detailUrl = v.source_layer === 'bitcoin_l1'
                        ? '/krayscan?inscription=' + v.parent_id
                        : '/nft-detail?id=' + v.parent_id;

                    return `
                        <a href="${detailUrl}" style="text-decoration:none;display:block;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:20px;transition:all .2s;cursor:pointer;" onmouseover="this.style.borderColor='rgba(168,85,247,0.4)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='rgba(255,255,255,0.08)';this.style.transform=''">
                            <div style="display:flex;align-items:center;gap:14px;margin-bottom:14px;">
                                <div style="width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid rgba(168,85,247,0.3);background:#1a1a2e;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                                    ${img ? `<img src="${img}" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none';this.parentNode.innerHTML='<span style=\\'font-size:24px;\\'>🔐</span>'">` : '<span style="font-size:24px;">🔐</span>'}
                                </div>
                                <div style="flex:1;min-width:0;">
                                    <div style="font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${name}</div>
                                    <div style="font-size:11px;color:#888;margin-top:2px;">${v.parent_collection || ''}</div>
                                </div>
                            </div>
                            <div style="display:flex;gap:8px;align-items:center;">
                                <span style="padding:4px 10px;background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);border-radius:6px;font-size:12px;color:#a855f7;font-weight:600;">${v.child_count} ${v.child_count === 1 ? 'child' : 'children'}</span>
                                <span style="padding:4px 8px;background:${layerColor}22;border:1px solid ${layerColor}44;border-radius:6px;font-size:11px;color:${layerColor};">${layer}</span>
                            </div>
                        </a>`;
                }).join('');

                l2VaultsLoaded = true;
            } catch (err) {
                console.error('Vaults load error:', err);
                grid.innerHTML = '<div style="text-align:center;padding:40px;color:#ef4444;">Failed to load vaults.</div>';
            }
        }

        // ═══════════════════════════════════════════════════════════════
        // 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=500`);
                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 => {
                        let meta = {};
                        try { meta = typeof nft.metadata === 'string' ? JSON.parse(nft.metadata) : (nft.metadata || {}); } catch {}
                        return {
                        ...nft,
                        metadata: meta,
                        // Prefer metadata title/name over generic DB name
                        display_name: meta.title || meta.name || nft.name,
                        // Map file_url to image_url — prefer cover for audio NFTs
                        image_url: (meta.cover_url) || (meta.image_url) || nft.file_url || nft.image_url,
                        collection_name: formatCollectionName(nft.collection?.name || nft.collection_id),
                        collection_logo: nft.collection?.logo_url || '',
                        // Ensure bridge_status has default
                        bridge_status: nft.bridge_status || 'ACTIVE',
                        // Parse attributes from metadata
                        attributes: meta,
                        // 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 m = nft.metadata || nft.attributes || {};
            const isAudio = (nft.file_type || '').startsWith('audio') || (m.type || '').toLowerCase() === 'radiola_track';
            const parentId = m.parent_inscription_id || '';
            let parentImgSrc = '';
            if (parentId) {
                const parentNft = allNFTs.find(n => n.id === parentId);
                parentImgSrc = parentNft ? (parentNft.image_url || '') : `/api/ordinals/${parentId}/content`;
            }
            const parentRow = parentId
                ? `<a href="/nft-detail?id=${parentId}" onclick="event.stopPropagation()" style="display:flex;align-items:center;gap:6px;margin-top:4px;text-decoration:none;"><div style="width:20px;height:20px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(168,85,247,0.4);background:#1a1a2e;flex-shrink:0;">${parentImgSrc ? `<img src="${parentImgSrc}" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentNode.innerHTML='<span style=font-size:10px>🔐</span>'">` : '<span style="font-size:10px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;">🔐</span>'}</div><span style="font-size:10px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">from ${escapeHtml(m.parent_name || 'Parent')}</span></a>`
                : '';
            const audioUrl = isAudio ? (nft.file_url || m.audio_url || '') : '';
            const audioBadge = isAudio ? `<div onclick="event.stopPropagation();toggleCardAudio(this,'${audioUrl.replace(/'/g, "\\'")}')" style="position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:2;cursor:pointer;" title="Play">▶</div>` : '';
            const imageHtml = imageUrl 
                ? `<div style="position:relative;"><img class="nft-image" src="${l2Thumb(imageUrl, 400)}" alt="${escapeHtml(nft.name)}" loading="lazy" decoding="async" onerror="if(!this.dataset.fb){this.dataset.fb=1;this.src='${imageUrl}';}else{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>';}">${audioBadge}</div>`
                : `<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} ${nft.listing.token_symbol || '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, '${nft.listing.token_symbol || 'KRAY'}')" data-nft="${nftDataJson}">BUY NOW</button>`;
                } else {
                    const cancelDataJson = JSON.stringify({
                        listing_id: nft.listing.listing_id,
                        name: nft.name,
                        image_url: imageUrl,
                        price_kray: nft.listing.price_kray,
                        token_symbol: nft.listing.token_symbol || 'KRAY'
                    }).replace(/'/g, "\\'").replace(/"/g, '&quot;');
                    buyBtnHtml = `<button class="nft-cancel-listing-btn" onclick="event.stopPropagation(); openCancelListingModal(this)" data-listing="${cancelDataJson}">❌ CANCEL LISTING</button>`;
                }
            }
            
            const hasShares = m.share_tokens?.enabled;
            const shareBadge = hasShares 
                ? `<div style="position:absolute;top:8px;right:8px;background:rgba(0,184,148,0.85);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;z-index:2;letter-spacing:0.5px;">🔗 SHARES</div>`
                : '';
            
            return `
                <div class="nft-card ${statusClass} rarity-${rarity} ${isListed ? 'is-listed' : ''}" onclick="openDetailModal('${nft.id}')">
                    ${status !== 'ACTIVE' ? `<div class="nft-status-badge ${statusClass}">${statusLabel}</div>` : ''}
                    <div class="nft-rarity-badge ${rarity}">${rarity.toUpperCase()}</div>
                    ${shareBadge}
                    ${imageHtml}
                    <div class="nft-info">
                        <div style="display:flex;align-items:center;gap:5px;">
                            ${nft.collection_logo ? `<img src="${nft.collection_logo}" style="width:14px;height:14px;border-radius:3px;object-fit:cover;flex-shrink:0;" onerror="this.style.display='none'">` : ''}
                            <div class="nft-collection">${escapeHtml(nft.collection_name)}</div>
                        </div>
                        <div class="nft-name"><span class="nft-token-id" style="margin-right:4px;">#${nft.token_id}</span>${escapeHtml(nft.display_name || nft.name)}</div>
                        ${priceHtml ? `<div class="nft-meta">${priceHtml}</div>` : ''}
                        ${buyBtnHtml}
                        ${parentRow}
                    </div>
                </div>
            `;
        }
        
        let _cardAudio = null;
        let _cardAudioBtn = null;
        function toggleCardAudio(btn, url) {
            if (!url) return;
            if (_cardAudio && _cardAudioBtn === btn) {
                _cardAudio.paused ? _cardAudio.play() : _cardAudio.pause();
                btn.textContent = _cardAudio.paused ? '▶' : '⏸';
                return;
            }
            if (_cardAudio) {
                _cardAudio.pause();
                if (_cardAudioBtn) _cardAudioBtn.textContent = '▶';
            }
            _cardAudio = new Audio(url);
            _cardAudioBtn = btn;
            btn.textContent = '⏸';
            _cardAudio.play().catch(() => { btn.textContent = '▶'; });
            _cardAudio.onended = () => { btn.textContent = '▶'; _cardAudio = null; _cardAudioBtn = null; };
        }

        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.image_url = nft.metadata?.cover_url || nft.metadata?.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) — hide internal/Supabase fields
            const HIDDEN_ATTRS = new Set([
                'rarity', 'audio_url', 'cover_url', 'image_url', 'audio_hash',
                'creator_address', 'parent_inscription_id', 'parent_name',
                'parent_collection', 'parent_type', 'source_layer',
                'created_at', 'created_via', 'royalty_config',
                'parent_artists', 'duration_seconds', 'file_url', 'share_tokens'
            ]);
            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>
            `;
            
            for (const [key, val] of Object.entries(parsedAttrs)) {
                if (HIDDEN_ATTRS.has(key)) continue;
                if (typeof val === 'object') continue;
                const label = key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
                attrsHtml += `
                    <div class="attribute-box">
                        <div class="attribute-label">${label}</div>
                        <div class="attribute-value">${val}</div>
                    </div>
                `;
            }
            
            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;
            
            // Share tokens info in modal
            let shareInfoEl = document.getElementById('detailShareInfo');
            if (!shareInfoEl) {
                shareInfoEl = document.createElement('div');
                shareInfoEl.id = 'detailShareInfo';
                const attrsEl = document.getElementById('detailAttributes');
                attrsEl.parentNode.insertBefore(shareInfoEl, attrsEl.nextSibling);
            }
            const modalMeta = currentNFT.metadata || {};
            if (modalMeta.share_tokens?.enabled) {
                const st = modalMeta.share_tokens;
                shareInfoEl.style.display = 'block';
                shareInfoEl.innerHTML = `
                    <div style="margin-top:12px;padding:10px 12px;border-radius:8px;background:rgba(0,184,148,0.08);border:1px solid rgba(0,184,148,0.2);">
                        <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:rgba(255,255,255,0.5);margin-bottom:6px;">🔗 Share Tokens</div>
                        <div style="display:flex;gap:12px;font-size:12px;">
                            <span><strong>${Number(st.total_supply).toLocaleString()}</strong> total</span>
                            <span style="color:rgba(255,255,255,0.3);">|</span>
                            <span style="font-family:monospace;color:rgba(255,255,255,0.6);">${st.symbol || ''}</span>
                        </div>
                    </div>
                `;
            } else {
                shareInfoEl.style.display = 'none';
                shareInfoEl.innerHTML = '';
            }
            
            // 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) {
                const listBtn = isListed
                    ? ''
                    : `<button class="action-btn primary" onclick="openListModal()">List on Market</button>`;
                const modalMeta2 = currentNFT.metadata || {};
                const hasSharesOwner = modalMeta2.share_tokens?.enabled;
                const shareTransferBtn = hasSharesOwner
                    ? `<button class="action-btn secondary" onclick="openTransferSharesModal()" style="border-color:rgba(0,184,148,0.3);color:#00b894;">🔗 Transfer Shares</button>`
                    : '';
                actions.innerHTML = `
                    ${listBtn}
                    ${socialProfileBtn}
                    <button class="action-btn secondary" onclick="openTransferModal()">Transfer NFT</button>
                    ${shareTransferBtn}
                    <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;
                const listTkn = currentNFT.listing?.token_symbol || 'KRAY';
                const listId = currentNFT.listing?.listing_id;
                actions.innerHTML = `
                    ${socialProfileBtn}
                    <button class="action-btn primary" onclick="buyNFTWithData('${listId}', ${priceKray}, {name:'${(currentNFT.name||'').replace(/'/g,"\\'")}', image_url:'${currentNFT.image_url||currentNFT.file_url||''}', owner_address:'${currentNFT.owner_address||''}'}, '${listTkn}')">
                        Buy for ▼ ${priceKray.toLocaleString()} ${listTkn}
                    </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(preserveNFT = false) {
            document.getElementById('detailModal').classList.remove('active');
            if (!preserveNFT) 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(true);
            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}/l2/account/${getWalletAddress()}/balance`);
                if (!accountRes.ok) throw new Error('Account not found. Create an L2 account first.');
                const accountData = await accountRes.json();
                const nonce = accountData.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 {
                    const signResult = await window.krayWallet.signMessage(message);
                    signature = signResult.signature || signResult;
                }
                const pubkey = await window.krayWallet.getPublicKey();
                
                // 3. Call transfer API
                const response = await fetch(`${KRAY_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';
            }
        }
        
        // ═══════════════════════════════════════════════════════════════
        // SHARE TRANSFER MODAL
        // ═══════════════════════════════════════════════════════════════
        
        let shareTransferData = null;
        
        function openTransferSharesModal() {
            if (!currentNFT) return;
            document.getElementById('shareTransferImage').src = currentNFT.image_url;
            document.getElementById('shareTransferName').textContent = currentNFT.name;
            document.getElementById('shareRecipient').value = '';
            document.getElementById('shareAmount').value = '';
            
            const sym = document.getElementById('shareTransferSymbol');
            const avail = document.getElementById('shareAvailable');
            sym.textContent = '...';
            avail.textContent = '...';
            
            closeDetailModal(true);
            document.getElementById('shareTransferModal').classList.add('active');
            
            fetch(`${KRAY_API}/l2/nfts/shares/${currentNFT.id}`)
                .then(r => r.json())
                .then(data => {
                    if (data.success && data.has_shares) {
                        const me = data.holders?.find(h => h.address === getWalletAddress());
                        sym.textContent = data.share_token.symbol || 'SHARES';
                        avail.textContent = me ? Number(me.free).toLocaleString() : '0';
                        shareTransferData = { free: me ? me.free : 0, symbol: data.share_token.symbol };
                    }
                })
                .catch(() => { sym.textContent = '—'; avail.textContent = '0'; });
        }
        
        function closeShareTransferModal() {
            document.getElementById('shareTransferModal').classList.remove('active');
            shareTransferData = null;
        }
        
        async function confirmShareTransfer() {
            const recipient = document.getElementById('shareRecipient').value.trim();
            const amount = parseInt(document.getElementById('shareAmount').value);
            if (!recipient) { alert('Enter recipient address'); return; }
            if (!amount || amount < 1) { alert('Enter valid amount'); return; }
            if (shareTransferData && amount > shareTransferData.free) { alert(`Max available: ${shareTransferData.free.toLocaleString()}`); return; }
            
            const btn = document.getElementById('shareTransferConfirmBtn');
            btn.disabled = true; btn.textContent = 'Signing...';
            
            try {
                const ownerAddress = getWalletAddress();
                const accountRes = await fetch(`${KRAY_API}/l2/account/${ownerAddress}/balance`);
                if (!accountRes.ok) throw new Error('Account not found');
                const accountData = await accountRes.json();
                const nonce = accountData.nonce || 0;
                
                const message = [ownerAddress, recipient, amount.toString(), nonce.toString(), 'nft_share_transfer'].join(':');
                let signature;
                if (window.krayWallet?.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: { title: 'Transfer Shares', description: `Send ${amount.toLocaleString()} shares of ${currentNFT.name}`, amount: '1 KRAY (gas)', recipient: recipient.substring(0, 12) + '...', type: 'Share Transfer', icon: '🔗' }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    const signResult = await window.krayWallet.signMessage(message);
                    signature = signResult.signature || signResult;
                }
                const pubkey = await window.krayWallet.getPublicKey();
                
                const res = await fetch(`${KRAY_API}/l2/nfts/shares/transfer`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ nft_id: currentNFT.id, from_address: ownerAddress, to_address: recipient, amount, signature, nonce, pubkey })
                });
                const data = await res.json();
                if (!data.success) throw new Error(data.error || 'Transfer failed');
                
                alert(`✅ ${amount.toLocaleString()} shares transferred!\nYou now have ${data.from_percentage}%`);
                closeShareTransferModal();
                loadNFTs();
            } catch (error) {
                alert('Share 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, tokenSym) {
            const nftData = JSON.parse(buttonElement.dataset.nft);
            buyNFTWithData(listingId, priceKray, nftData, tokenSym || 'KRAY');
        }
        
        async function buyNFTWithData(listingId, priceKray, nftData, tokenSym = 'KRAY') {
            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;
            }
            
            pendingBuyListing = listingId;
            pendingBuyPrice = priceKray;
            pendingBuyNFT = nftData;
            pendingBuyToken = tokenSym;
            
            openBuyModal(priceKray, tokenSym);
        }
        
        let pendingBuyToken = 'KRAY';
        
        function openBuyModal(priceKray, tokenSym = 'KRAY') {
            const isKray = tokenSym === 'KRAY';
            const totalCostDisplay = isKray ? (priceKray + 1) : priceKray;
            const marketFee = Math.floor(priceKray * 0.02);
            
            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()} ${tokenSym}`;
            document.getElementById('buyModalMarketFee').textContent = `▼ ${marketFee} ${tokenSym} (seller pays)`;
            document.getElementById('buyModalTotal').textContent = isKray
                ? `▼ ${totalCostDisplay.toLocaleString()} KRAY`
                : `▼ ${priceKray.toLocaleString()} ${tokenSym} + 1 KRAY gas`;
            
            // 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/account/${walletAddress}/balance`);
                if (!accountRes.ok) throw new Error('Account not found. Please create an L2 account first.');
                const accountData = await accountRes.json();
                const nonce = accountData.nonce || 0;
                
                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);
                const signature = signResult.signature || signResult;
                
                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: signature,
                        pubkey: pubkey,
                        nonce: nonce
                    })
                });
                
                const result = await response.json();
                
                closeBuyModal();
                
                if (result.success) {
                    // Show success with breakdown
                    const tkn = result.token_symbol || pendingBuyToken || 'KRAY';
                    showSuccessModal(
                        'NFT Purchased!',
                        `You bought "${pendingBuyNFT?.name || 'NFT'}" successfully.`,
                        [
                            { label: 'Price Paid', value: `▼ ${result.price_kray} ${tkn}` },
                            { label: 'Seller Received', value: `▼ ${result.seller_receives} ${tkn}` },
                            { label: 'Marketplace Fee', value: `▼ ${result.marketplace_fee} ${tkn}` },
                            { 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()} ${listingData.token_symbol || '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 {
                if (!window.krayWallet) {
                    throw new Error('KrayWallet not found. Please install or refresh the page.');
                }

                const walletAddress = getWalletAddress();
                if (!walletAddress) {
                    throw new Error('Wallet not connected');
                }

                // Get nonce for replay protection
                const acctRes = await fetch(`${KRAY_API}/l2/account/${walletAddress}/balance`);
                const acctData = acctRes.ok ? await acctRes.json() : {};
                const nonce = acctData.nonce || 0;

                // Message must match backend verifyMessageSignature format exactly
                const message = `Unlist NFT listing ${pendingCancelListing.listing_id} nonce:${nonce}`;

                btn.textContent = 'Signing...';
                let signature;
                if (window.krayWallet.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: {
                            title: 'Cancel Listing',
                            description: `Remove "${pendingCancelListing?.name || 'NFT'}" from marketplace`,
                            amount: '1 KRAY (gas)',
                            type: 'Cancel',
                            icon: '❌'
                        }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    const signResult = await window.krayWallet.signMessage(message);
                    signature = signResult.signature || signResult;
                }
                const pubkey = await window.krayWallet.getPublicKey();

                btn.textContent = 'Cancelling...';

                const response = await fetch(`${KRAY_API}/l2/nfts/market/unlist`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        listing_id: pendingCancelListing.listing_id,
                        signature,
                        pubkey,
                        nonce
                    })
                });
                
                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);
            }
        }
        
        // ═══════════════════════════════════════════════════════════════
        // LIST ON MARKET MODAL
        // ═══════════════════════════════════════════════════════════════

        function openListModal() {
            if (!currentNFT) return;
            document.getElementById('listModalImage').src = currentNFT.image_url || currentNFT.file_url || '';
            document.getElementById('listModalName').textContent = currentNFT.name || 'NFT';
            document.getElementById('listModalCollection').textContent = currentNFT.collection_name || '';
            document.getElementById('listPriceInput').value = '';
            const btn = document.getElementById('listConfirmBtn');
            btn.disabled = false;
            btn.textContent = 'Sign & List';
            document.getElementById('listModal').classList.add('active');
        }

        function closeListModal() {
            document.getElementById('listModal').classList.remove('active');
        }

        async function confirmListOnMarket() {
            if (!currentNFT) return;
            const price = parseFloat(document.getElementById('listPriceInput').value);
            if (!price || price <= 0) { alert('Enter a valid price'); return; }
            const tokenSym = document.getElementById('listTokenSelect').value || 'KRAY';

            const btn = document.getElementById('listConfirmBtn');
            btn.disabled = true;
            btn.textContent = 'Signing...';

            try {
                const address = getWalletAddress();
                if (!address) throw new Error('Wallet not connected');

                const accRes = await fetch(`${API_BASE}/l2/account/${address}/balance`);
                const accData = await accRes.json();
                const nonce = accData.nonce || 0;

                const message = `List NFT ${currentNFT.id} for ${price} KRAY nonce:${nonce}`;

                let signature;
                if (window.krayWallet?.signL2Transaction) {
                    const sr = await window.krayWallet.signL2Transaction({
                        message,
                        display: {
                            title: 'List on Market',
                            description: `List "${currentNFT.name}" for ${price} ${tokenSym}`,
                            amount: `${price} ${tokenSym}`,
                            type: 'Marketplace Listing',
                            icon: '🏷️'
                        }
                    });
                    signature = sr.signature || sr;
                } else {
                    const sr = await window.krayWallet.signMessage(message);
                    signature = sr?.signature || sr;
                }
                if (!signature) throw new Error('Signing cancelled');

                const pubkey = window.krayWallet.getPublicKey
                    ? await window.krayWallet.getPublicKey() : null;

                btn.textContent = 'Listing...';
                const res = await fetch(`${API_BASE}/l2/nfts/market/list`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        nft_id: currentNFT.id,
                        price_kray: price,
                        token_symbol: tokenSym,
                        signature,
                        pubkey,
                        nonce
                    })
                });
                const result = await res.json();

                closeListModal();
                closeDetailModal();

                if (result.success) {
                    showSuccessModal(
                        'Listed!',
                        `"${currentNFT.name}" is now on the market for ${price} ${tokenSym}.`,
                        [{ label: 'Price', value: `${price} ${tokenSym}` }]
                    );
                    loadNFTs();
                } else {
                    alert('Listing failed: ' + (result.error || 'Unknown error'));
                }
            } catch (err) {
                console.error('List error:', err);
                btn.disabled = false;
                btn.textContent = 'Sign & List';
                if (err.message !== 'Signing cancelled') alert('List failed: ' + err.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(true);
            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}/l2/nfts/${currentNFT.id}/bridge-to-l1`
                    : `${KRAY_API}/l2/nfts/${currentNFT.id}/inscribe`;
                
                // Get account nonce for signature
                const bridgeAcctRes = await fetch(`${KRAY_API}/l2/account/${address}/balance`);
                if (!bridgeAcctRes.ok) throw new Error('Account not found');
                const bridgeAcctData = await bridgeAcctRes.json();
                const bridgeNonce = bridgeAcctData.nonce || 0;
                
                // Sign bridge transaction (tx_type: nft_bridge_out)
                const bridgeMessage = [address, '', '0', bridgeNonce.toString(), 'nft_bridge_out'].join(':');
                let bridgeSig;
                if (window.krayWallet && window.krayWallet.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message: bridgeMessage,
                        display: {
                            title: currentNFT.inscription_id ? 'Bridge NFT to L1' : 'Inscribe NFT on Bitcoin',
                            description: `Bridge ${currentNFT.name || 'NFT'} to Bitcoin L1`,
                            amount: '1 KRAY (gas)',
                            type: 'Bridge',
                            icon: '🌉'
                        }
                    });
                    bridgeSig = signResult.signature || signResult;
                } else {
                    const signResult = await window.krayWallet.signMessage(bridgeMessage);
                    bridgeSig = signResult.signature || signResult;
                }
                
                const response = await fetch(endpoint, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        signature: bridgeSig,
                        nonce: bridgeNonce,
                        pubkey: publicKey,
                        fee_rate: 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}/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');
                }
            });
        });
        // ═══════════════════════════════════════════════════════════════
        // SHARE MARKETPLACE
        // ═══════════════════════════════════════════════════════════════
        
        let shareMarketLoaded = false;
        let shareListings = [];
        let sharePoolsData = [];
        let currentShareListing = null;
        let myShareHoldings = [];
        
        async function loadShareMarket() {
            shareMarketLoaded = true;
            const rankingBody = document.getElementById('sharePoolsRankingBody');
            const loading = document.getElementById('shareListingsLoading');
            if (loading) loading.style.display = 'block';
            
            const walletAddr = getWalletAddress();
            
            try {
                const sort = document.getElementById('shareFilterSort')?.value || 'newest';
                const res = await fetch(`${KRAY_API}/l2/nfts/shares/market/listings?sort=${sort}&limit=100`);
                const data = await res.json();
                shareListings = data.listings || [];
                
                if (loading) loading.style.display = 'none';
                
                // Build pools: group listings by nft_id, aggregate
                const poolMap = new Map();
                for (const l of shareListings) {
                    if (!poolMap.has(l.nft_id)) {
                        poolMap.set(l.nft_id, {
                            nft_id: l.nft_id,
                            nft: l.nft || {},
                            share_token: l.share_token || {},
                            listings: [],
                            total_for_sale: 0,
                            floor_price: Infinity
                        });
                    }
                    const p = poolMap.get(l.nft_id);
                    p.listings.push(l);
                    p.total_for_sale += l.amount;
                    if (l.price_per_share < p.floor_price) p.floor_price = l.price_per_share;
                }
                sharePoolsData = Array.from(poolMap.values());
                
                // Render pools ranking table
                renderSharePoolsRanking(sharePoolsData, walletAddr);
                
                // Render listing cards below
                renderShareListingCards(shareListings, walletAddr);
                
                if (walletAddr) loadMyShareHoldings(walletAddr);
                
                document.getElementById('sharePoolView').style.display = 'none';
                
            } catch (err) {
                console.error('Failed to load share market:', err);
                if (loading) loading.style.display = 'none';
                rankingBody.innerHTML = '<div style="padding:40px;text-align:center;color:#ef4444;">Failed to load share pools</div>';
            }
        }
        
        function renderSharePoolsRanking(pools, walletAddr) {
            const body = document.getElementById('sharePoolsRankingBody');
            
            if (pools.length === 0) {
                body.innerHTML = `
                    <div style="padding:60px 20px;text-align:center;color:#666;">
                        <div style="font-size:40px;margin-bottom:12px;">🔗</div>
                        <div style="font-size:15px;color:#888;">No share pools with active listings</div>
                        <div style="font-size:12px;margin-top:8px;">List your shares to create the first pool</div>
                    </div>`;
                return;
            }
            
            body.innerHTML = pools.map((p, i) => {
                const nft = p.nft;
                const st = p.share_token;
                const m = nft.metadata || {};
                const imgUrl = m.cover_url || m.image_url || nft.file_url || '';
                const floor = p.floor_price === Infinity ? '—' : `${Number(p.floor_price).toLocaleString()}`;
                const supply = st.total_supply ? Number(st.total_supply).toLocaleString() : '—';
                
                let coverHtml;
                if (imgUrl) {
                    coverHtml = `<img src="${l2Thumb(imgUrl, 96)}" alt="" loading="lazy" decoding="async" onerror="if(!this.dataset.fb){this.dataset.fb=1;this.src='${imgUrl}';}else{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-pool-nft="${p.nft_id}" style="grid-template-columns:40px 1fr 100px 100px 80px 80px;">
                    <span class="l2r-rank">${i + 1}</span>
                    <span class="l2r-name">
                        ${coverHtml}
                        <span>${nft.name || 'NFT'}</span>
                        <span class="l2-badge" style="background:rgba(0,184,148,0.15);color:#00b894;">SHARES</span>
                    </span>
                    <span class="l2r-floor" id="sharePoolHolderCount_${i}">—</span>
                    <span class="l2r-volume">${Number(p.total_for_sale).toLocaleString()}</span>
                    <span class="l2r-floor" style="color:#00b894;">${floor}</span>
                    <span class="l2r-supply">${supply}</span>
                </div>`;
            }).join('');
            
            pools.forEach((p, i) => {
                fetch(`${KRAY_API}/l2/nfts/shares/${p.nft_id}`)
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            const el = document.getElementById('sharePoolHolderCount_' + i);
                            if (el) el.textContent = data.holder_count || (data.holders?.length || 0);
                        }
                    })
                    .catch(() => {});
            });
            
            body.querySelectorAll('.l2-ranking-row').forEach(row => {
                row.addEventListener('click', () => {
                    const nftId = row.getAttribute('data-pool-nft');
                    if (nftId) showSharePoolView(nftId);
                });
            });
        }
        
        function renderShareListingCards(listings, walletAddr) {
            const grid = document.getElementById('shareListingsGrid');
            if (listings.length === 0) {
                grid.innerHTML = '';
                return;
            }
            grid.innerHTML = listings.map(l => {
                const nft = l.nft || {};
                const st = l.share_token || {};
                const m = nft.metadata || {};
                const imgUrl = m.cover_url || m.image_url || nft.file_url || '';
                const isMine = walletAddr && l.seller_address === walletAddr;
                const totalPrice = l.amount * l.price_per_share;
                const sellerShort = l.seller_address ? `${l.seller_address.slice(0,6)}...${l.seller_address.slice(-4)}` : '—';
                
                return `
                <div style="background:var(--bg-card,#1a1a2e);border-radius:12px;border:1px solid rgba(0,184,148,0.10);overflow:hidden;transition:border-color 0.2s;" onmouseenter="this.style.borderColor='rgba(0,184,148,0.35)'" onmouseleave="this.style.borderColor='rgba(0,184,148,0.10)'">
                    <div style="display:flex;gap:10px;padding:12px;">
                        <img src="${l2Thumb(imgUrl, 96)}" width="44" height="44" loading="lazy" decoding="async" style="width:44px;height:44px;border-radius:8px;object-fit:cover;background:#111;flex-shrink:0;" onerror="if(!this.dataset.fb){this.dataset.fb=1;this.src='${imgUrl}';}else{this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%23333%22 width=%22100%22 height=%22100%22/></svg>';}">
                        <div style="flex:1;min-width:0;">
                            <div style="font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${nft.name || 'NFT'}</div>
                            <div style="font-size:10px;color:#666;">by ${sellerShort}</div>
                        </div>
                        <div style="text-align:right;">
                            <div style="font-size:13px;font-weight:700;color:#00b894;">${Number(l.amount).toLocaleString()}</div>
                            <div style="font-size:10px;color:#888;">shares</div>
                        </div>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:0 12px 10px;">
                        <div>
                            <span style="font-size:10px;color:#666;">@</span>
                            <span style="font-size:12px;color:#fff;font-weight:600;">${Number(l.price_per_share).toLocaleString()}</span>
                            <span style="font-size:10px;color:#888;">${l.token_symbol || 'KRAY'}/share</span>
                        </div>
                        <span style="font-size:13px;font-weight:700;color:#00b894;">${Number(totalPrice).toLocaleString()} ${l.token_symbol || 'KRAY'}</span>
                    </div>
                    <div style="padding:0 12px 12px;display:flex;gap:6px;">
                        <button onclick="viewSharePool('${l.nft_id}')" style="flex:1;padding:7px;background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle,#333);border-radius:8px;color:#888;cursor:pointer;font-size:10px;">Pool</button>
                        ${isMine
                            ? `<button onclick="openShareCancelModal('${l.id}',${l.amount})" style="flex:1;padding:7px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);border-radius:8px;color:#ef4444;cursor:pointer;font-size:10px;font-weight:600;">Cancel</button>`
                            : `<button onclick="openShareBuyModal('${l.id}')" style="flex:1;padding:7px;background:linear-gradient(135deg,#00b894,#00cec9);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:10px;font-weight:600;">Buy</button>`
                        }
                    </div>
                </div>`;
            }).join('');
        }
        
        async function loadMyShareHoldings(addr) {
            try {
                const res = await fetch(`${KRAY_API}/l2/nfts/shares/balance/${addr}`);
                const data = await res.json();
                myShareHoldings = data.holdings || [];
                const btn = document.getElementById('listMySharesBtn');
                if (btn) btn.style.display = myShareHoldings.length > 0 ? 'block' : 'none';
            } catch(e) { console.error(e); }
        }
        
        async function showSharePoolView(nftId) {
            const poolView = document.getElementById('sharePoolView');
            poolView.style.display = 'block';
            poolView.scrollIntoView({ behavior: 'smooth', block: 'start' });
            
            try {
                const [sharesRes, nftRes] = await Promise.all([
                    fetch(`${KRAY_API}/l2/nfts/shares/${nftId}`).then(r => r.json()),
                    fetch(`${KRAY_API}/l2/nfts/item/${nftId}`).then(r => r.json())
                ]);
                
                if (!sharesRes.success) return;
                const nft = nftRes.nft || nftRes;
                const m = nft.metadata || {};
                
                document.getElementById('sharePoolNftImg').src = m.cover_url || m.image_url || nft.file_url || '';
                document.getElementById('sharePoolNftName').textContent = nft.name || 'NFT';
                document.getElementById('sharePoolNftCollection').textContent = nft.collection?.name || nft.collection_id || '—';
                document.getElementById('sharePoolSymbol').textContent = sharesRes.share_token?.symbol || '—';
                document.getElementById('sharePoolSupply').textContent = Number(sharesRes.share_token?.total_supply || 0).toLocaleString();
                
                // Holders ranking table
                const holdersEl = document.getElementById('sharePoolHolders');
                const holders = (sharesRes.holders || []).sort((a, b) => b.balance - a.balance);
                if (holders.length > 0) {
                    holdersEl.innerHTML = holders.map((h, idx) => {
                        const addrShort = `${h.address.slice(0,6)}...${h.address.slice(-4)}`;
                        const pct = h.percentage || ((h.balance / sharesRes.share_token.total_supply) * 100).toFixed(2);
                        const barW = Math.max(2, Math.min(100, parseFloat(pct)));
                        const rankColor = idx === 0 ? '#ffd700' : idx === 1 ? '#c0c0c0' : idx === 2 ? '#cd7f32' : 'rgba(255,255,255,0.3)';
                        return `
                        <div style="display:grid;grid-template-columns:30px 1fr 80px 60px;padding:10px 12px;align-items:center;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.15s;" onmouseenter="this.style.background='rgba(255,255,255,0.03)'" onmouseleave="this.style.background='transparent'">
                            <span style="font-size:12px;font-weight:700;color:${rankColor};">${idx + 1}</span>
                            <span style="display:flex;align-items:center;gap:6px;">
                                <span style="font-family:monospace;font-size:11px;color:#ccc;">${addrShort}</span>
                                <div style="flex:1;height:4px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden;min-width:40px;">
                                    <div style="width:${barW}%;height:100%;background:linear-gradient(90deg,#00b894,#00cec9);border-radius:2px;"></div>
                                </div>
                            </span>
                            <span style="font-size:12px;color:#fff;font-weight:600;text-align:right;">${Number(h.balance).toLocaleString()}</span>
                            <span style="font-size:12px;color:#00b894;font-weight:600;text-align:right;">${pct}%</span>
                        </div>`;
                    }).join('');
                } else {
                    holdersEl.innerHTML = '<div style="padding:20px;text-align:center;color:#666;font-size:12px;">No holders</div>';
                }
                
                // Sell orders
                const ordersEl = document.getElementById('sharePoolOrders');
                const nftListings = shareListings.filter(l => l.nft_id === nftId);
                const walletAddr = getWalletAddress();
                if (nftListings.length > 0) {
                    ordersEl.innerHTML = nftListings.map(l => {
                        const sellerShort = `${l.seller_address.slice(0,6)}...${l.seller_address.slice(-4)}`;
                        const isMine = walletAddr && l.seller_address === walletAddr;
                        const total = l.amount * l.price_per_share;
                        return `
                        <div style="display:grid;grid-template-columns:1fr 80px 80px 70px;padding:10px 12px;align-items:center;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.15s;" onmouseenter="this.style.background='rgba(255,255,255,0.03)'" onmouseleave="this.style.background='transparent'">
                            <span style="font-family:monospace;font-size:11px;color:#888;">${sellerShort}</span>
                            <span style="font-size:12px;color:#fff;font-weight:600;text-align:right;">${Number(l.amount).toLocaleString()}</span>
                            <span style="font-size:12px;color:#00b894;font-weight:600;text-align:right;">${l.price_per_share} ${l.token_symbol || 'KRAY'}</span>
                            <span style="text-align:right;">
                                ${isMine
                                    ? `<button onclick="openShareCancelModal('${l.id}',${l.amount})" style="padding:4px 10px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);border-radius:6px;color:#ef4444;cursor:pointer;font-size:10px;font-weight:600;">Cancel</button>`
                                    : `<button onclick="openShareBuyModal('${l.id}')" style="padding:4px 10px;background:linear-gradient(135deg,#00b894,#00cec9);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:10px;font-weight:600;">Buy</button>`
                                }
                            </span>
                        </div>`;
                    }).join('');
                } else {
                    ordersEl.innerHTML = '<div style="padding:20px;text-align:center;color:#666;font-size:12px;">No active sell orders</div>';
                }
            } catch(e) { console.error('Pool view error:', e); }
        }
        
        function viewSharePool(nftId) {
            showSharePoolView(nftId);
        }
        
        // List shares modal
        document.getElementById('listMySharesBtn')?.addEventListener('click', () => {
            const sel = document.getElementById('shareListNftSelect');
            const picker = document.getElementById('shareListNftPicker');

            sel.innerHTML = myShareHoldings.map(h => {
                const free = h.balance - (h.locked || 0);
                return `<option value="${h.nft_id}" data-free="${free}" data-symbol="${h.symbol || ''}">${h.nft_name || h.nft_id.substring(0,12)} — ${Number(free).toLocaleString()} free</option>`;
            }).join('');

            if (myShareHoldings.length === 0) {
                picker.innerHTML = '<div style="color:#666;font-size:12px;padding:12px;text-align:center;">No shares found in your wallet</div>';
            } else {
                picker.innerHTML = myShareHoldings.map((h, idx) => {
                    const free = h.balance - (h.locked || 0);
                    const imgSrc = h.nft_image || '';
                    const selected = idx === 0 ? 'border-color:rgba(0,184,148,0.6);background:rgba(0,184,148,0.08);' : '';
                    return `
                    <div class="share-picker-item" data-idx="${idx}" data-nft="${h.nft_id}" style="display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:all 0.15s;${selected}" onclick="selectSharePickerItem(this,${idx})">
                        <img src="${imgSrc}" style="width:36px;height:36px;border-radius:6px;object-fit:cover;background:#111;flex-shrink:0;" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%23333%22 width=%22100%22 height=%22100%22/></svg>'">
                        <div style="flex:1;min-width:0;">
                            <div style="font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${h.nft_name || h.nft_id.substring(0,12)}</div>
                            <div style="font-size:10px;color:#888;">${h.symbol || ''}</div>
                        </div>
                        <div style="text-align:right;flex-shrink:0;">
                            <div style="font-size:13px;font-weight:700;color:#00b894;">${Number(free).toLocaleString()}</div>
                            <div style="font-size:9px;color:#666;">free shares</div>
                        </div>
                    </div>`;
                }).join('');
            }

            updateShareListAvailable();
            document.getElementById('shareListModal').classList.add('active');
        });

        function selectSharePickerItem(el, idx) {
            document.querySelectorAll('.share-picker-item').forEach(item => {
                item.style.borderColor = 'rgba(255,255,255,0.08)';
                item.style.background = 'transparent';
            });
            el.style.borderColor = 'rgba(0,184,148,0.6)';
            el.style.background = 'rgba(0,184,148,0.08)';
            const sel = document.getElementById('shareListNftSelect');
            if (sel) sel.selectedIndex = idx;
            updateShareListAvailable();
        }

        document.getElementById('shareListNftSelect')?.addEventListener('change', updateShareListAvailable);

        function updateShareListAvailable() {
            const sel = document.getElementById('shareListNftSelect');
            const opt = sel?.selectedOptions[0];
            document.getElementById('shareListAvailable').textContent = opt ? Number(opt.dataset.free || 0).toLocaleString() : '—';
        }
        
        // Auto-update total preview
        ['shareListAmount', 'shareListPrice'].forEach(id => {
            document.getElementById(id)?.addEventListener('input', updateShareListTotal);
        });
        document.getElementById('shareListTokenSelect')?.addEventListener('change', updateShareListTotal);

        function updateShareListTotal() {
            const amt = parseInt(document.getElementById('shareListAmount').value) || 0;
            const price = parseInt(document.getElementById('shareListPrice').value) || 0;
            const tkn = document.getElementById('shareListTokenSelect')?.value || 'KRAY';
            document.getElementById('shareListTotal').textContent = `${(amt * price).toLocaleString()} ${tkn}`;
        }
        
        async function confirmShareList() {
            const sel = document.getElementById('shareListNftSelect');
            const nftId = sel?.value;
            const amount = parseInt(document.getElementById('shareListAmount').value);
            const pricePerShare = parseInt(document.getElementById('shareListPrice').value);
            const free = parseInt(sel?.selectedOptions[0]?.dataset.free || 0);
            
            if (!nftId) { alert('Select an NFT'); return; }
            if (!amount || amount < 1) { alert('Enter valid amount'); return; }
            if (amount > free) { alert(`Max available: ${free.toLocaleString()}`); return; }
            if (!pricePerShare || pricePerShare < 1) { alert('Price must be at least 1'); return; }
            const shareTokenSym = document.getElementById('shareListTokenSelect')?.value || 'KRAY';
            
            const btn = document.getElementById('shareListConfirmBtn');
            btn.disabled = true; btn.textContent = 'Signing...';
            
            try {
                const walletAddr = getWalletAddress();
                const accRes = await fetch(`${KRAY_API}/l2/account/${walletAddr}/balance`);
                const accData = await accRes.json();
                const nonce = accData.nonce || 0;
                
                const message = [walletAddr, walletAddr, amount.toString(), nonce.toString(), 'nft_share_list'].join(':');
                let signature;
                if (window.krayWallet?.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: { title: 'List Shares', description: `List ${amount.toLocaleString()} shares @ ${pricePerShare} ${shareTokenSym} each`, amount: '1 KRAY (gas)', type: 'Share Listing', icon: '🏷️' }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    const signResult = await window.krayWallet.signMessage(message);
                    signature = signResult.signature || signResult;
                }
                const pubkey = await window.krayWallet.getPublicKey();
                
                const res = await fetch(`${KRAY_API}/l2/nfts/shares/market/list`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ nft_id: nftId, amount, price_per_share: pricePerShare, token_symbol: shareTokenSym, signature, nonce, pubkey })
                });
                const data = await res.json();
                if (!data.success) throw new Error(data.error || 'List failed');
                
                document.getElementById('shareListModal').classList.remove('active');
                alert(`Listed ${amount.toLocaleString()} shares @ ${pricePerShare} ${shareTokenSym} each!`);
                shareMarketLoaded = false;
                loadShareMarket();
            } catch(e) {
                alert('List failed: ' + e.message);
            } finally {
                btn.disabled = false; btn.textContent = 'Sign & List Shares';
            }
        }
        
        // Buy shares modal
        function openShareBuyModal(listingId) {
            const l = shareListings.find(x => x.id === listingId);
            if (!l) return;
            currentShareListing = l;
            const nft = l.nft || {};
            const st = l.share_token || {};
            const m = nft.metadata || {};
            document.getElementById('shareBuyNftImg').src = m.cover_url || m.image_url || nft.file_url || '';
            document.getElementById('shareBuyNftName').textContent = nft.name || 'NFT';
            document.getElementById('shareBuySymbol').textContent = st.symbol || '—';
            document.getElementById('shareBuyAmount').textContent = Number(l.amount).toLocaleString();
            const sTkn = l.token_symbol || 'KRAY';
            document.getElementById('shareBuyPriceEach').textContent = `${Number(l.price_per_share).toLocaleString()} ${sTkn}`;
            document.getElementById('shareBuyTotal').textContent = `${Number(l.amount * l.price_per_share).toLocaleString()} ${sTkn}`;
            document.getElementById('shareBuySeller').textContent = `${l.seller_address.slice(0,8)}...${l.seller_address.slice(-6)}`;
            document.getElementById('shareBuyModal').classList.add('active');
        }
        
        async function confirmShareBuy() {
            if (!currentShareListing) return;
            const l = currentShareListing;
            const totalPrice = l.amount * l.price_per_share;
            const btn = document.getElementById('shareBuyConfirmBtn');
            btn.disabled = true; btn.textContent = 'Signing...';
            
            try {
                const walletAddr = getWalletAddress();
                const accRes = await fetch(`${KRAY_API}/l2/account/${walletAddr}/balance`);
                const accData = await accRes.json();
                const nonce = accData.nonce || 0;
                
                const message = [walletAddr, l.seller_address, totalPrice.toString(), nonce.toString(), 'nft_share_buy'].join(':');
                let signature;
                if (window.krayWallet?.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: { title: 'Buy Shares', description: `Buy ${l.amount.toLocaleString()} shares for ${totalPrice.toLocaleString()} KRAY`, amount: `${totalPrice.toLocaleString()} + 1 KRAY gas`, type: 'Share Purchase', icon: '💰' }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    const signResult = await window.krayWallet.signMessage(message);
                    signature = signResult.signature || signResult;
                }
                const pubkey = await window.krayWallet.getPublicKey();
                
                const res = await fetch(`${KRAY_API}/l2/nfts/shares/market/buy`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ listing_id: l.id, signature, nonce, pubkey })
                });
                const data = await res.json();
                if (!data.success) throw new Error(data.error || 'Buy failed');
                
                document.getElementById('shareBuyModal').classList.remove('active');
                alert(`Purchased ${l.amount.toLocaleString()} shares for ${totalPrice.toLocaleString()} KRAY!`);
                currentShareListing = null;
                shareMarketLoaded = false;
                loadShareMarket();
            } catch(e) {
                alert('Buy failed: ' + e.message);
            } finally {
                btn.disabled = false; btn.textContent = 'Sign & Buy Shares';
            }
        }
        
        // Cancel share listing
        function openShareCancelModal(listingId, amount) {
            currentShareListing = { id: listingId, amount };
            document.getElementById('shareCancelAmount').textContent = Number(amount).toLocaleString();
            document.getElementById('shareCancelModal').classList.add('active');
        }
        
        async function confirmShareCancel() {
            if (!currentShareListing) return;
            const btn = document.getElementById('shareCancelConfirmBtn');
            btn.disabled = true; btn.textContent = 'Signing...';
            
            try {
                const walletAddr = getWalletAddress();
                const accRes = await fetch(`${KRAY_API}/l2/account/${walletAddr}/balance`);
                const accData = await accRes.json();
                const nonce = accData.nonce || 0;
                
                const message = [walletAddr, walletAddr, '0', nonce.toString(), 'nft_share_unlist'].join(':');
                let signature;
                if (window.krayWallet?.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: { title: 'Cancel Share Listing', description: `Unlock ${currentShareListing.amount.toLocaleString()} shares`, amount: '1 KRAY (gas)', type: 'Cancel Listing', icon: '🗑️' }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    const signResult = await window.krayWallet.signMessage(message);
                    signature = signResult.signature || signResult;
                }
                const pubkey = await window.krayWallet.getPublicKey();
                
                const res = await fetch(`${KRAY_API}/l2/nfts/shares/market/cancel`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ listing_id: currentShareListing.id, signature, nonce, pubkey })
                });
                const data = await res.json();
                if (!data.success) throw new Error(data.error || 'Cancel failed');
                
                document.getElementById('shareCancelModal').classList.remove('active');
                alert('Listing cancelled. Shares unlocked.');
                currentShareListing = null;
                shareMarketLoaded = false;
                loadShareMarket();
            } catch(e) {
                alert('Cancel failed: ' + e.message);
            } finally {
                btn.disabled = false; btn.textContent = 'Sign & Cancel';
            }
        }
        
        // Filter event listeners
        document.getElementById('shareFilterSort')?.addEventListener('change', () => {
            shareMarketLoaded = false;
            loadShareMarket();
        });
        document.getElementById('shareFilterNft')?.addEventListener('change', () => {
            shareMarketLoaded = false;
            loadShareMarket();
        });

        // ═══════════════════════════════════════════════════════════════
        // VAULT PERMISSIONS
        // ═══════════════════════════════════════════════════════════════

        function openVaultPermModal() {
            if (!currentNFT) return;
            document.getElementById('vpImage').src = currentNFT.image_url;
            document.getElementById('vpName').textContent = currentNFT.name || 'NFT';

            const meta = typeof currentNFT.metadata === 'string' ? JSON.parse(currentNFT.metadata) : (currentNFT.metadata || {});
            const mode = meta.mode || 'closed';
            const wl = Array.isArray(meta.whitelist) ? meta.whitelist : [];

            document.getElementById('vpCurrentMode').textContent = 'Current: ' + mode;
            document.getElementById('vpMode').value = mode;
            document.getElementById('vpWhitelist').value = wl.join('\n');
            document.getElementById('vpWhitelistGroup').style.display = mode === 'whitelist' ? '' : 'none';
            document.getElementById('vpProgress').style.display = 'none';

            document.getElementById('vaultPermModal').classList.add('active');
        }

        document.addEventListener('change', (e) => {
            if (e.target.id === 'vpMode') {
                document.getElementById('vpWhitelistGroup').style.display = e.target.value === 'whitelist' ? '' : 'none';
            }
        });

        function closeVaultPermModal() {
            document.getElementById('vaultPermModal').classList.remove('active');
        }

        async function saveVaultPermissions() {
            if (!currentNFT) return;
            const btn = document.getElementById('vpSaveBtn');
            const progress = document.getElementById('vpProgress');
            const mode = document.getElementById('vpMode').value;
            const wlText = document.getElementById('vpWhitelist').value.trim();
            const whitelist = wlText ? wlText.split('\n').map(a => a.trim()).filter(Boolean) : [];

            try {
                btn.disabled = true;
                btn.textContent = 'Signing…';
                progress.style.display = 'block';
                progress.textContent = 'Requesting signature…';

                const nonce = Date.now();
                const message = `vault_permissions:${currentNFT.id}:${mode}:${nonce}`;

                let signature;
                if (window.krayWallet.signL2Transaction) {
                    const signResult = await window.krayWallet.signL2Transaction({
                        message,
                        display: {
                            title: 'Vault Permissions',
                            description: `Set vault mode to "${mode}" for ${currentNFT.name || 'NFT'}`,
                            amount: 'No fee',
                            type: 'Vault Settings',
                            icon: '🔐'
                        }
                    });
                    signature = signResult.signature || signResult;
                } else {
                    signature = await window.krayWallet.signMessage(message);
                }
                if (!signature) throw new Error('Signing cancelled.');

                const pubkey = window.krayWallet.getPublicKey
                    ? await window.krayWallet.getPublicKey()
                    : null;

                progress.textContent = 'Saving permissions…';
                btn.textContent = 'Saving…';

                const res = await fetch(`${API_BASE}/api/l2/nfts/vault-permissions`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        nft_id: currentNFT.id,
                        mode,
                        whitelist,
                        signature,
                        nonce,
                        pubkey
                    })
                });
                const data = await res.json();
                if (!res.ok || !data.success) throw new Error(data.error || 'Failed to save');

                closeVaultPermModal();
                showToast(`Vault permissions updated: ${mode}${whitelist.length ? ` (${whitelist.length} addresses)` : ''}`, 'success');

                if (currentNFT.metadata) {
                    const meta = typeof currentNFT.metadata === 'string' ? JSON.parse(currentNFT.metadata) : currentNFT.metadata;
                    meta.mode = mode;
                    meta.whitelist = whitelist;
                    currentNFT.metadata = meta;
                }

            } catch (err) {
                console.error('[vault-perm]', err);
                progress.textContent = '';
                progress.style.display = 'none';
                alert('Failed: ' + (err.message || 'Unknown error'));
            } finally {
                btn.disabled = false;
                btn.textContent = '🔐 Sign & Save';
            }
        }
    </script>
</body>
</html>