Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:

- Background: radial gradient (black → warm dark orange/brown).
- Glassmorphism cards (transparent, frosted, subtle noise), limited so layout breathes.
- Neon accents: orange #FF6A00, blue #00E4FF. Fonts: Orbitron (headings), Poppins (body).
- Modern pill buttons with seamless border-trail animation (continuous loop, no visible reset).
- Clean grid, large readable numbers, dense tooltips.

DO NOT implement any wallet math or API logic. Values are placeholders. Focus on layout, states, and components.

GLOBAL STYLE TOKENS:
- Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)
- Text: #F5F5F5 primary, #B8B8B8 secondary
- Accent: Neon Orange #FF6A00, Neon Blue #00E4FF, Success #3CE27A, Warning #FEC84B, Danger #FF4D4D
- Glass card: rgba(255,255,255,0.05) bg, 1px border rgba(255,255,255,0.12), backdrop-blur(10–14px), rounded-2xl, shadow-xl
- Icon style: thin line + soft glow
- Progress bar: inner glow, smooth 0.6s ease, rounded-full

LAYOUT HIERARCHY:

(1) PAGE HEADER (full-width, glass card)
- Title: “Wallet”
- Sub: “Track balances, playthrough progress, and redeemables.”
- Right side: 2 CTA pills:
- [Deposit SC] (primary, neon orange, border-trail)
- [Withdraw] (secondary, neon blue, border-trail)
- Small links under CTAs: “Payment Methods”, “Withdrawal Policy”, “KYC Status”

(2) BALANCE OVERVIEW (4-card grid, responsive 1×4 → 2×2 on tablet → 1×4 scroll on mobile)
Card A — Purchase SC (1×)
- Label chip: “1× Playthrough”
- Big number: {{purchase_sc}}
- Mini stat: “Required: {{purchase_required}} | Progress: {{purchase_progress_pct}}%”
- Tiny info icon (hover): “Purchase SC requires 1× wagering before withdrawal.”

Card B — Bonus SC (5×)
- Label chip: “5× Playthrough”
- Big number: {{bonus_sc}}
- Mini stat: “Required: {{bonus_required}} | Progress: {{bonus_progress_pct}}%”
- Info hover: “Bonus SC requires 5× wagering. Table & live games may count less.”

Card C — Withdrawable SC (WSC)
- Label chip: “Redeemable Now”
- Big number: {{wsc}}
- Subtext: “Ready to withdraw.”

Card D — Gold Coins (GC)
- Label chip: “Gold Coins”
- Big number: {{gc}}
- Subtext: “For fun play.”

(3) PLAYTHROUGH PROGRESS (two half-width glass cards side-by-side; stack on mobile)

Left Card — Playthrough Bars
Section title: “Playthrough Progress”
- Row 1: Purchase SC (1×)
• Bar with endpoints: 0 → {{purchase_required}}
• Inline numbers: “{{purchase_wagered}} / {{purchase_required}}” and “{{purchase_progress_pct}}%”
• Color: gradient from #FF6A00 → #3CE27A near completion
- Divider
- Row 2: Bonus SC (5×)
• Bar with endpoints: 0 → {{bonus_required}}
• Inline: “{{bonus_wagered}} / {{bonus_required}}” and “{{bonus_progress_pct}}%”
• Color: gradient #00E4FF → #FF6A00

Right Card — Game Contribution Weights (collapsible)
Title row: “How your wagers count”
List with icons + weights:
• Slots — 100%
• Instant Win — 75%
• RNG Table — 25%
• Live Casino — 10%
Footnote text: “Weights affect progress only, not redemption math.”
(Add “ⓘ” tooltips explaining examples: “$100 on Live Casino → $10 progress.”)

(4) REDEEMABLES & ACTIONS (full-width glass card)
- Title: “Redeemable Amounts”
- Two numeric tiles:
• Redeemable Purchase SC (WSC): {{redeemable_wsc}}
• Redeemable Bonus SC: {{redeemable_bonus_sc}}
- Helper text: “Bonus SC becomes redeemable as you clear its playthrough.”
- Action buttons:
[Withdraw to Wallet] [Convert to WSC] [View Withdrawal History]
- Small alert banners (optional states):
• Warning if KYC incomplete.
• Info if withdrawal limit per day reached.
- Microcopy under buttons: “Processing time: 24–48h after KYC.”

(5) TRANSACTION HISTORY (glass card, full width)
- Tabs: All | Deposits | Withdrawals | Bonuses | Wagers | Adjustments
- Filters: Date range picker; Amount min/max; Status
- Table columns:
Date/Time | Type | Description | Amount | Balance Type (SC/GC/BSC/WSC) | Status | Ref ID
- Empty state with illustration + “No transactions yet. Top up your wallet to get started.”
- Button: [Export CSV] (ghost)

(6) STORE & PROMOS STRIP (two cards)
Left: “Buy Packages”
- Featured package tiles with price, bonus badge, “Best Value” tag.
- CTA: [Go to Store]

Right: “Active Bonuses & Codes”
- List of active promo balances with expiry timers and progress bars.
- Input: “Have a code?” [Apply]

(7) VIP & JACKPOT TIE-INS (two mini cards)
- VIP Snapshot: “This month wagered: {{monthly_wagered}} → VIP +{{vip_progress_pct}}%”
- Jackpot Contribution: “You’ve contributed {{jackpot_contrib}} to the pool.” Link: [View Jackpots]

(8) SECURITY & SETTINGS (accordion list)
- Payment Methods (cards on file)
- Set Withdrawal PIN
- KYC / Verification status + steps
- Notification preferences (wallet alerts)
- Responsible play links

(9) CONTEXTUAL TOOLTIP COPY (use exactly as hover content)
- “Playthrough Requirement”: “The total amount you must wager before funds are withdrawable.”
- “Contribution Weights”: “Different games count differently toward playthrough.”
- “WSC”: “Withdrawable Sweepstakes Coins you can cash out.”
- “Bonus SC”: “Promotional coins with 5× playthrough.”
- “Purchase SC”: “Coins bought by you; 1× playthrough.”

COMPONENT/ID MAP (for dev handoff & future binding)
- #btn-deposit, #btn-withdraw, #btn-convert
- #card-purchase-sc, #card-bonus-sc, #card-wsc, #card-gc
- #bar-purchase, #bar-bonus
- #redeemable-wsc, #redeemable-bonus
- #tx-table, #tx-filter, #tx-export
- #store-card, #promos-card
- #vip-card, #jackpot-card
- #security-accordion

ANIMATIONS (exact instructions)
- Button border-trail (continuous, no pause):
• Create an absolutely positioned gradient border layer that animates background-position from 0%→100% with linear infinite 2.5s.
• Use mask-composite to reveal only the 2px border.
• Ensure animation loops seamlessly by using a repeating conic or linear-gradient with matching start/end colors (avoid hard stops).
- Progress bars:
• Animate width from previous value to new value with 600ms ease; add subtle outer glow.
- Hover:
• Cards lift 4px, border alpha +0.08, glow of accent color.

RESPONSIVE RULES
- ≥1280px: 12-col grid; Overview (4 cols each), Progress (6/6), History full-width.
- 1024–1279: 12-col; Overview 6/6; Progress stack.
- <1024: Stack everything; sticky subheader with [Deposit], [Withdraw].

ACCESSIBILITY
- Min text 14px body, 18–22px numbers; 28–36px for big balances.
- Focus rings visible (accent blue).
- Tooltips accessible on keyboard (aria-describedby).
- Color contrast ≥ 4.5:1 for body.

PLACEHOLDER DATA (bind these to numbers for mock):
{
"purchase_sc": "18.74",
"purchase_required": "18.74",
"purchase_wagered": "12.10",
"purchase_progress_pct": "64.5",
"bonus_sc": "0.30",
"bonus_required": "1.50",
"bonus_wagered": "0.00",
"bonus_progress_pct": "0.0",
"wsc": "6.64",
"gc": "3,500",
"redeemable_wsc": "6.64",
"redeemable_bonus_sc": "0.00",
"monthly_wagered": "420.00",
"vip_progress_pct": "12",
"jackpot_contrib": "8.40"
}

VISUAL NOTES
- Purchase SC chip is orange outline with “1×”.
- Bonus SC chip is blue outline with “5×”.
- “Total Redeemable Now” should be visually emphasized near the top (mirrors WSC).
- Keep white space; limit glass cards to these sections to avoid clutter.

DELIVERABLES
- One responsive page with all sections above.
- Include a style block (or component CSS) for the seamless border-trail button and progress bars.
- Provide semantic HTML structure ready for data-binding.
- No external logic; values populated from placeholders. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Wallet Ui 5
-emoji: ⚡
+title: wallet-ui-5
+emoji: 🐳
 colorFrom: blue
 colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,834 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nioplay Wallet</title>
+  
+  <!-- External Styles -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+  
+  <!-- External Scripts -->
+  <script src="https://unpkg.com/feather-icons"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            orbitron: ['Orbitron', 'sans-serif'],
+            poppins: ['Poppins', 'sans-serif']
+          },
+          colors: {
+            'neon-orange': '#FF6A00',
+            'neon-blue': '#00E4FF',
+            'success': '#3CE27A',
+            'warning': '#FEC84B',
+            'danger': '#FF4D4D'
+          }
+        }
+      }
+    }
+  </script>
+  
+  <style>
+    body {
+      background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
+      color: #F5F5F5;
+      font-family: 'Poppins', sans-serif;
+    }
+    
+    /* Glass card styles */
+    .glass-card {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      backdrop-filter: blur(12px);
+      border-radius: 16px;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+      overflow: hidden;
+      position: relative;
+      transition: all 0.3s ease;
+    }
+    
+    .glass-card:hover {
+      transform: translateY(-4px);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+    }
+    
+    .glass-card::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
+      background-size: 200px;
+      pointer-events: none;
+      mix-blend-mode: overlay;
+      opacity: 0.05;
+    }
+    
+    /* Border trailer animation for buttons */
+    .btn-trail-anim {
+      position: relative;
+      z-index: 1;
+      overflow: hidden;
+      border-radius: 9999px;
+      isolation: isolate;
+    }
+    
+    .btn-trail-anim::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      width: 300%;
+      height: 300%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(0deg);
+      background: conic-gradient(
+        transparent,
+        rgba(255, 106, 0, 0.6),
+        rgba(0, 228, 255, 0.6),
+        transparent 70%
+      );
+      animation: border-trail 2.5s linear infinite;
+    }
+    
+    .btn-trail-anim::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      background: radial-gradient(circle at center, #1a0d00 0%, #0a0a0a 40%);
+      border-radius: 9999px;
+    }
+    
+    @keyframes border-trail {
+      0% { transform: translate(-50%, -50%) rotate(0deg); }
+      100% { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+    
+    /* Progress bar styles */
+    .progress-bar {
+      height: 8px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 0.1);
+      overflow: hidden;
+    }
+    
+    .progress-bar-inner {
+      height: 100%;
+      border-radius: 4px;
+      transition: width 0.6s ease;
+      position: relative;
+    }
+    
+    .progress-bar-inner::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -1px;
+      bottom: 0;
+      width: 8px;
+      background: rgba(255, 255, 255, 0.5);
+      filter: blur(3px);
+      opacity: 0.6;
+    }
+    
+    /* Tooltip styles */
+    .tt-wrapper {
+      display: inline-flex;
+      position: relative;
+    }
+    
+    .tt-trigger:hover + .tt-content {
+      opacity: 1;
+      visibility: visible;
+      transform: translate(-50%, 10px);
+    }
+    
+    .tt-content {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, 5px);
+      background: rgba(31, 25, 17, 0.95);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 8px;
+      padding: 10px 12px;
+      min-width: 200px;
+      max-width: 280px;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(10px);
+      font-size: 13px;
+      opacity: 0;
+      visibility: hidden;
+      z-index: 50;
+      transition: all 0.2s ease;
+      pointer-events: none;
+      font-weight: 300;
+    }
+    
+    /* Type labels */
+    .type-label {
+      display: inline-flex;
+      padding: 2px 12px;
+      border-radius: 100px;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+      border-width: 1px;
+    }
+    
+    .flex-basis-40 {
+      flex-basis: 40%;
+    }
+    
+    .section-title {
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      font-size: 20px;
+      font-family: 'Orbitron', sans-serif;
+    }
+    
+    /* Value displays */
+    .big-number {
+      font-size: 38px;
+      line-height: 1.2;
+      font-weight: 700;
+      font-family: 'Orbitron', sans-serif;
+      letter-spacing: -0.5px;
+      background: linear-gradient(to bottom, #F5F5F5, #B8B8B8);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+    
+    /* Status banners */
+    .alert-banner {
+      padding: 10px 16px;
+      border-radius: 12px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+    }
+    
+    /* Animations */
+    [data-aos="animate-scale"] {
+      transform: scale(0.95);
+      opacity: 0;
+      transition-property: transform, opacity;
+    }
+    
+    [data-aos="animate-scale"].aos-animate {
+      transform: scale(1);
+      opacity: 1;
+    }
+  </style>
+</head>
+<body class="min-h-screen antialiased">
+  <!-- Layout container -->
+  <div class="mx-auto px-4 py-6 max-w-8xl">
+    <!-- Page Header -->
+    <header class="glass-card px-6 py-5 mb-6 md:px-8 md:py-6">
+      <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center">
+        <div class="mb-4 lg:mb-0">
+          <h1 class="text-2xl font-bold text-white font-orbitron">Wallet</h1>
+          <p class="text-secondary-200 mt-1">Track balances, playthrough progress, and redeemables.</p>
+        </div>
+        
+        <div class="lg:text-right">
+          <div class="flex space-x-4 mt-2 mb-3">
+            <button id="btn-deposit" class="btn-trail-anim px-8 py-3 relative rounded-full bg-white/5 text-white font-semibold flex items-center font-orbitron">
+              <span class="relative z-10 flex items-center">
+                <i data-feather="plus" class="mr-2 w-4 h-4"></i> 
+                Deposit SC
+              </span>
+            </button>
+            
+            <button id="btn-withdraw" class="btn-trail-anim px-8 py-3 relative rounded-full bg-white/5 text-neon-blue font-semibold flex items-center font-orbitron" style="--before-bg: linear-gradient(transparent, rgba(0, 228, 255, 0.6), transparent);">
+              <span class="relative z-10 flex items-center">
+                <i data-feather="download" class="mr-2 w-4 h-4"></i>
+                Withdraw
+              </span>
+            </button>
+          </div>
+          
+          <div class="flex flex-wrap justify-center lg:justify-end gap-x-5 gap-y-2 text-sm">
+            <a href="#" class="text-secondary-300 hover:text-neon-blue transition-colors flex items-center">
+              <i data-feather="credit-card" class="w-3 h-3 mr-1"></i> Payment Methods
+            </a>
+            <a href="#" class="text-secondary-300 hover:text-neon-blue transition-colors flex items-center">
+              <i data-feather="clipboard" class="w-3 h-3 mr-1"></i> Withdrawal Policy
+            </a>
+            <a href="#" class="text-secondary-300 hover:text-neon-orange transition-colors flex items-center">
+              <i data-feather="user-check" class="w-3 h-3 mr-1"></i> KYC Status
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+    
+    <!-- Balance Overview Grid -->
+    <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+      <!-- Purchase SC Card -->
+      <div id="card-purchase-sc" class="glass-card p-6 flex flex-col">
+        <div class="flex justify-between items-start mb-4">
+          <div class="type-label border-neon-orange text-neon-orange">
+            1× Playthrough
+          </div>
+          
+          <div class="tt-wrapper">
+            <div class="tt-trigger cursor-pointer text-secondary-400">
+              <i data-feather="info" class="w-4 h-4 stroke-current"></i>
+            </div>
+            <div class="tt-content">
+              Purchase SC requires 1× wagering before withdrawal.
+            </div>
+          </div>
+        </div>
+        
+        <div class="big-number">18.74</div>
+        
+        <div class="mt-2 text-secondary-300 text-sm">
+          Required: <span>18.74</span> | Progress: <span class="text-neon-orange">64.5%</span>
+        </div>
+      </div>
+      
+      <!-- Bonus SC Card -->
+      <div id="card-bonus-sc" class="glass-card p-6 flex flex-col">
+        <div class="flex justify-between items-start mb-4">
+          <div class="type-label border-neon-blue text-neon-blue">
+            5× Playthrough
+          </div>
+          
+          <div class="tt-wrapper">
+            <div class="tt-trigger cursor-pointer text-secondary-400">
+              <i data-feather="info" class="w-4 h-4 stroke-current"></i>
+            </div>
+            <div class="tt-content">
+              Bonus SC requires 5× wagering. Table & live games may count less.
+            </div>
+          </div>
+        </div>
+        
+        <div class="big-number">0.30</div>
+        
+        <div class="mt-2 text-secondary-300 text-sm">
+          Required: <span>1.50</span> | Progress: <span class="text-neon-blue">0.0%</span>
+        </div>
+      </div>
+      
+      <!-- WSC Card -->
+      <div id="card-wsc" class="glass-card p-6 flex flex-col bg-gradient-to-br from-black/30 to-[#331400]/50 relative">
+        <span class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-r from-transparent to-[#FF6A00]/30"></span>
+        <div class="relative z-10">
+          <div class="type-label border-success text-success bg-success/10 border-success/30 mb-4">
+            Redeemable Now
+          </div>
+          
+          <div class="big-number text-success drop-shadow-[0_0_8px_rgba(60,226,122,0.3)]">
+            6.64
+          </div>
+          
+          <div class="mt-2 text-success/80">
+            Ready to withdraw.
+          </div>
+        </div>
+      </div>
+      
+      <!-- Gold Coins Card -->
+      <div id="card-gc" class="glass-card p-6 flex flex-col">
+        <div class="type-label border-warning text-warning bg-warning/10 border-warning/30 mb-4">
+          Gold Coins
+        </div>
+        
+        <div class="big-number text-warning">3,500</div>
+        
+        <div class="mt-2 text-secondary-300">
+          For fun play.
+        </div>
+      </div>
+    </section>
+    
+    <!-- Playthrough Progress + Contribution -->
+    <section class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8">
+      <!-- Left Card - Progress Bars -->
+      <div id="progress-container" class="glass-card p-6" data-aos="fade-right">
+        <h2 class="text-xl section-title mb-5">Playthrough Progress</h2>
+        
+        <!-- Purchase SC Progress -->
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <span class="font-medium">Purchase SC (1×)</span>
+            <span class="text-sm">12.10 / 18.74 | <span class="text-neon-orange">64.5%</span></span>
+          </div>
+          <div class="progress-bar mb-6">
+            <div id="bar-purchase" class="progress-bar-inner w-[64.5%]" style="background: linear-gradient(to right, #FF6A00 0%, #FF6A00 70%, #3CE27A 100%);"></div>
+          </div>
+        </div>
+        
+        <!-- Bonus SC Progress -->
+        <div>
+          <div class="flex justify-between items-center mb-2">
+            <span class="font-medium">Bonus SC (5×)</span>
+            <span class="text-sm">0.00 / 1.50 | <span class="text-neon-blue">0.0%</span></span>
+          </div>
+          <div class="progress-bar">
+            <div id="bar-bonus" class="progress-bar-inner w-[0%]" style="background: linear-gradient(to right, #00E4FF 0%, #00E4FF 0%, #FF6A00 100%);"></div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Right Card - Contribution Weights -->
+      <div class="glass-card p-6" data-aos="fade-left">
+        <div class="flex justify-between items-center mb-5">
+          <h2 class="text-xl section-title">How your wagers count</h2>
+          <button class="text-neon-blue hover:text-white transition-colors">
+            <i data-feather="chevron-down"></i>
+          </button>
+        </div>
+        
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <div class="w-8 h-8 mr-3 rounded-lg bg-success/10 flex items-center justify-center">
+                <i data-feather="sliders" class="text-success w-4 h-4"></i>
+              </div>
+              <span>Slots</span>
+            </div>
+            <span class="px-3 py-1 bg-green-900/40 rounded-md">100%</span>
+          </div>
+          
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <div class="w-8 h-8 mr-3 rounded-lg bg-warning/10 flex items-center justify-center">
+                <i data-feather="gift" class="text-warning w-4 h-4"></i>
+              </div>
+              <span>Instant Win</span>
+            </div>
+            <span class="px-3 py-1 bg-yellow-900/40 rounded-md">75%</span>
+          </div>
+          
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <div class="w-8 h-8 mr-3 rounded-lg bg-secondary-500/10 flex items-center justify-center">
+                <i data-feather="layers" class="text-secondary-300 w-4 h-4"></i>
+              </div>
+              <span>RNG Table</span>
+            </div>
+            <span class="px-3 py-1 bg-blue-900/40 rounded-md">25%</span>
+          </div>
+          
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <div class="w-8 h-8 mr-3 rounded-lg bg-danger/10 flex items-center justify-center">
+                <i data-feather="tv" class="text-danger w-4 h-4"></i>
+              </div>
+              <span>Live Casino</span>
+            </div>
+            <span class="px-3 py-1 bg-red-900/40 rounded-md">10%</span>
+          </div>
+        </div>
+        
+        <div class="border-t border-white/10 mt-4 pt-4 text-secondary-300 text-sm flex">
+          <i data-feather="info" class="w-4 h-4 mr-2 text-neon-blue"></i>
+          Weights affect progress only, not redemption math.
+        </div>
+      </div>
+    </section>
+    
+    <!-- Redeemables & Actions -->
+    <section class="glass-card p-6 mb-8" data-aos="zoom-in">
+      <div class="flex flex-col md:flex-row md:justify-between md:items-start">
+        <div class="md:w-2/3 mb-6 md:mb-0">
+          <h2 class="text-xl section-title mb-4">Redeemable Amounts</h2>
+          
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="flex flex-col">
+              <label class="text-secondary-300 text-sm mb-1">Redeemable Purchase SC (WSC)</label>
+              <div id="redeemable-wsc" class="text-2xl font-semibold font-orbitron">6.64</div>
+            </div>
+            
+            <div class="flex flex-col">
+              <label class="text-secondary-300 text-sm mb-1">Redeemable Bonus SC</label>
+              <div id="redeemable-bonus" class="text-2xl font-semibold font-orbitron">0.00</div>
+            </div>
+          </div>
+          
+          <p class="text-secondary-300 text-sm mt-4">
+            Bonus SC becomes redeemable as you clear its playthrough.
+          </p>
+          
+          <div class="flex flex-wrap gap-2 mt-6">
+            <button class="px-6 py-3 bg-neon-orange/10 hover:bg-neon-orange/20 border border-neon-orange/30 text-neon-orange rounded-full transition-colors font-semibold font-orbitron">
+              Withdraw to Wallet
+            </button>
+            <button id="btn-convert" class="px-6 py-3 bg-neon-blue/10 hover:bg-neon-blue/20 border border-neon-blue/30 text-neon-blue rounded-full transition-colors font-semibold font-orbitron">
+              Convert to WSC
+            </button>
+            <button class="px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-full transition-colors">
+              View Withdrawal History
+            </button>
+          </div>
+          
+          <!-- Alert banners -->
+          <div class="mt-4 space-y-2">
+            <div class="alert-banner bg-warning/10 text-warning border border-warning/20">
+              <i data-feather="alert-circle" class="mr-2 w-5 h-5"></i>
+              KYC verification required to withdraw funds
+            </div>
+          </div>
+          
+          <div class="text-secondary-300 text-sm mt-4 italic flex items-center">
+            <i data-feather="clock" class="w-4 h-4 mr-2"></i>
+            Processing time: 24–48h after KYC
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Transaction History -->
+    <section class="glass-card p-6 mb-8" data-aos="animate-scale">
+      <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6">
+        <h2 class="text-xl section-title">Transaction History</h2>
+        
+        <div class="flex mt-4 md:mt-0 gap-3 flex-wrap">
+          <select class="bg-black/20 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
+            <option>All</option>
+            <option>Deposits</option>
+            <option>Withdrawals</option>
+            <option>Bonuses</option>
+            <option>Wagers</option>
+            <option>Adjustments</option>
+          </select>
+          
+          <button class="bg-black/20 border border-white/10 text-white px-3 py-2 rounded-lg text-sm flex items-center">
+            <i data-feather="filter" class="w-4 h-4 mr-2"></i> 
+            Filters
+          </button>
+          
+          <button id="tx-export" class="bg-black/20 border border-white/10 text-white px-3 py-2 rounded-lg text-sm flex items-center">
+            <i data-feather="download" class="w-4 h-4 mr-2"></i> 
+            Export CSV
+          </button>
+        </div>
+      </div>
+      
+      <!-- Table -->
+      <div class="overflow-x-auto">
+        <table class="w-full text-left text-sm">
+          <thead class="text-secondary-300 border-b border-white/10">
+            <tr>
+              <th class="pb-3">Date/Time</th>
+              <th class="pb-3">Type</th>
+              <th class="pb-3">Description</th>
+              <th class="pb-3 text-right">Amount</th>
+              <th class="pb-3">Balance Type</th>
+              <th class="pb-3">Status</th>
+              <th class="pb-3">Ref ID</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="border-b border-white/5 last:border-0">
+              <td class="py-4 text-white">Jan 14, 09:32</td>
+              <td class="py-4">
+                <span class="px-2 py-1 bg-green-900/30 rounded-md text-success">Deposit</span>
+              </td>
+              <td class="py-4">Coin package purchase</td>
+              <td class="py-4 text-success text-right">+$10.00</td>
+              <td class="py-4">SC</td>
+              <td class="py-4">
+                <span class="text-success flex items-center">
+                  <span class="w-2 h-2 bg-success rounded-full mr-2"></span>
+                  Completed
+                </span>
+              </td>
+              <td class="py-4">#TX98765</td>
+            </tr>
+            
+            <tr class="border-b border-white/5 last:border-0">
+              <td class="py-4 text-white">Jan 13, 18:45</td>
+              <td class="py-4">
+                <span class="px-2 py-1 bg-blue-900/30 rounded-md text-neon-blue">Wager</span>
+              </td>
+              <td class="py-4">Fortune Tiger spin</td>
+              <td class="py-4 text-danger text-right">-$5.00</td>
+              <td class="py-4">SC</td>
+              <td class="py-4">
+                <span class="text-neon-blue flex items-center">
+                  <span class="w-2 h-2 bg-neon-blue rounded-full mr-2"></span>
+                  Processed
+                </span>
+              </td>
+              <td class="py-4">#TX98764</td>
+            </tr>
+          </tbody>
+        </table>
+        
+        <!-- Empty State -->
+        <div class="py-16 text-center">
+          <div class="w-24 h-24 bg-gradient-to-b from-black to-[#331400]/40 border border-white/10 rounded-full flex items-center justify-center mx-auto">
+            <i data-feather="file" class="w-12 h-12 text-secondary-300"></i>
+          </div>
+          <div class="mt-6">
+            <div class="text-xl font-semibold">No transactions yet</div>
+            <p class="mt-2 text-secondary-300 max-w-md mx-auto">
+              Top up your wallet to get started with exciting games and features
+            </p>
+            <button class="mt-4 px-6 py-3 bg-neon-orange hover:bg-[#FF7A19] text-white font-semibold rounded-full transition-colors">
+              Deposit Now
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Double Card Row - Package Store & Promos -->
+    <section class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8">
+      <!-- Left: Buy Packages -->
+      <div id="store-card" class="glass-card p-6 flex flex-col">
+        <h2 class="text-xl section-title flex items-center mb-5">
+          Buy Packages
+          <span class="ml-3 text-xs px-2 py-1 bg-red-500/30 text-danger rounded-md">Hot Deals</span>
+        </h2>
+        
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
+          <!-- Package 1 -->
+          <div class="border border-white/10 rounded-xl p-4 bg-gradient-to-b from-[#0c0801] to-[#321d00]/30">
+            <div class="text-center mb-3">
+              <div class="big-number">50.00</div>
+              <div class="text-secondary-300">+1500 GC</div>
+            </div>
+            <button class="w-full mt-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-lg transition-colors">
+              $12.99
+            </button>
+          </div>
+          
+          <!-- Package 2 (Best Value) -->
+          <div class="border border-warning/30 rounded-xl p-4 bg-gradient-to-b from-[#2d1900] to-[#774000]/20 relative">
+            <span class="absolute -top-2 left-0 right-0 mx-auto text-xs px-2 py-1 bg-warning/10 text-warning rounded-md">Best Value</span>
+            <div class="text-center mb-3">
+              <div class="big-number">120.00</div>
+              <div class="text-secondary-300">+5000 GC</div>
+              <div class="text-warning mt-1">+Bonus 20 SC</div>
+            </div>
+            <button class="w-full mt-2 px-4 py-2 bg-warning/10 hover:bg-warning/20 border border-warning/20 text-warning rounded-lg transition-colors">
+              $29.99
+            </button>
+          </div>
+          
+          <!-- Package 3 -->
+          <div class="border border-white/10 rounded-xl p-4 bg-gradient-to-b from-[#0c0801] to-[#0d1230]">
+            <div class="text-center mb-3">
+              <div class="big-number">250.00</div>
+              <div class="text-secondary-300">+15000 GC</div>
+              <div class="text-green-500 mt-1">+Bonus 65 SC</div>
+            </div>
+            <button class="w-full mt-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-lg transition-colors">
+              $59.99
+            </button>
+          </div>
+        </div>
+        
+        <button class="btn-trail-anim px-6 py-3 relative rounded-full bg-neon-orange/5 text-white font-semibold flex items-center justify-center font-orbitron mx-auto">
+          <span class="relative z-10 flex items-center">
+            <i data-feather="shopping-cart" class="mr-2 w-4 h-4"></i> 
+            Go to Store
+          </span>
+        </button>
+      </div>
+      
+      <!-- Right: Active Promos -->
+      <div id="promos-card" class="glass-card p-6">
+        <h2 class="text-xl section-title mb-5">Active Bonuses & Codes</h2>
+        
+        <div class="space-y-4">
+          <!-- Promo 1 -->
+          <div class="border border-white/10 rounded-xl p-4">
+            <div class="flex justify-between items-center mb-2">
+              <div class="text-lg font-semibold">Saturday Fiesta</div>
+              <div class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-md">12h left</div>
+            </div>
+            <div class="text-secondary-300 text-sm mb-3">
+              20 Bonus SC after $10 Deposit
+            </div>
+            
+            <div class="progress-bar mb-1">
+              <div class="progress-bar-inner w-[65%]" style="background: linear-gradient(to right, #00E4FF, #FF6A00);"></div>
+            </div>
+            <div class="text-xs text-secondary-300 flex justify-between">
+              <span>$6.50 / $10.00</span>
+              <span>65%</span>
+            </div>
+          </div>
+          
+          <!-- Promo 2 -->
+          <div class="border border-white/10 rounded-xl p-4">
+            <div class="flex justify-between items-center mb-2">
+              <div class="text-lg font-semibold">Lucky Streak</div>
+              <div class="text-xs px-2 py-1 bg-neon-blue/10 text-neon-blue rounded-md">2d left</div>
+            </div>
+            <div class="text-secondary-300 text-sm mb-3">
+              200 Free Spins on deposit of $20+
+            </div>
+            
+            <div class="progress-bar mb-1">
+              <div class="progress-bar-inner w-[30%]" style="background: linear-gradient(to right, #00E4FF, #FF6A00);"></div>
+            </div>
+            <div class="text-xs text-secondary-300 flex justify-between">
+              <span>$6.00 / $20.00</span>
+              <span>30%</span>
+            </div>
+          </div>
+        </div>
+        
+        <div class="mt-6 flex">
+          <input type="text" placeholder="Have a code?" class="w-full bg-white/5 border-y border-l border-white/10 text-white rounded-l-lg px-4 py-2.5 focus:outline-none">
+          <button class="whitespace-nowrap bg-neon-orange hover:bg-[#FF7A19] text-white px-5 rounded-r-lg transition-colors">
+            Apply
+          </button>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Mini Cards - VIP & Jackpots -->
+    <section class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+      <!-- VIP Snapshot -->
+      <div id="vip-card" class="glass-card p-5" data-aos="zoom-in" data-aos-duration="400">
+        <h3 class="section-title flex items-center text-lg">
+          <i data-feather="award" class="text-warning mr-2 w-4 h-4"></i>
+          VIP Snapshot
+        </h3>
+        <div class="mt-3 text-secondary-300 text-sm">
+          This month wagered: <span class="text-warning font-bold">420.00</span> 
+          → VIP <span class="text-success">+12%</span>
+        </div>
+        <div class="mt-5 border-t border-white/5 pt-3">
+          <div class="flex justify-between text-xs mb-1">
+            <span>VIP Bronze</span>
+            <span>VIP Silver</span>
+          </div>
+          <div class="progress-bar h-1.5">
+            <div class="progress-bar-inner w-[12%]" style="background: #FEC84B;"></div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Jackpot Contribution -->
+      <div id="jackpot-card" class="glass-card p-5" data-aos="zoom-in" data-aos-duration="400" data-aos-delay="100">
+        <h3 class="section-title flex items-center text-lg">
+          <i data-feather="alert-octagon" class="text-danger mr-2 w-4 h-4"></i>
+          Jackpot Contribution
+        </h3>
+        <div class="mt-3">
+          <div class="text-secondary-300 text-sm mb-1">
+            You've contributed <span class="text-neon-orange underline">8.40</span> to the pool
+          </div>
+          <div class="text-xs flex items-center text-secondary-400">
+            <i data-feather="lock" class="w-3 h-3 mr-1"></i>
+            17 hours to next draw • $58,471 total pool
+          </div>
+        </div>
+        <a href="#" class="inline-block mt-4 bg-white/5 hover:bg-white/10 rounded-lg px-4 py-2 text-sm">
+          View Jackpots
+        </a>
+      </div>
+    </section>
+    
+    <!-- Security & Settings -->
+    <section class="glass-card p-6 mb-8" data-aos="zoom-in-up">
+      <h2 class="text-xl section-title mb-5">Security & Settings</h2>
+      
+      <div id="security-accordion" class="space-y-3">
+        <!-- Accordion Item 1 -->
+        <div class="border border-white/10 rounded-xl overflow-hidden">
+          <button class="w-full p-4 flex justify-between items-center text-left bg-white/5">
+            <div class="flex items-center">
+              <i data-feather="credit-card" class="w-5 h-5 mr-3 text-neon-blue"></i>
+              Payment Methods
+            </div>
+            <i data-feather="chevron-down" class="w-5 h-5"></i>
+          </button>
+        </div>
+        
+        <!-- Accordion Item 2 -->
+        <div class="border border-white/10 rounded-xl overflow-hidden">
+          <button class="w-full p-4 flex justify-between items-center text-left bg-white/5">
+            <div class="flex items-center">
+              <i data-feather="lock" class="w-5 h-5 mr-3 text-warning"></i>
+              Set Withdrawal PIN
+            </div>
+            <i data-feather="chevron-down" class="w-5 h-5"></i>
+          </button>
+        </div>
+        
+        <!-- Accordion Item 3 -->
+        <div class="border border-white/10 rounded-xl overflow-hidden">
+          <button class="w-full p-4 flex justify-between items-center text-left bg-white/5">
+            <div class="flex items-center">
+              <i data-feather="file-text" class="w-5 h-5 mr-3 text-success"></i>
+              KYC / Verification
+            </div>
+            <span class="bg-danger/30 text-danger text-xs font-medium py-1 px-2 rounded-md">Action required</span>
+          </button>
+        </div>
+        
+        <!-- Accordion Item 4 -->
+        <div class="border border-white/10 rounded-xl overflow-hidden">
+          <button class="w-full p-4 flex justify-between items-center text-left bg-white/5">
+            <div class="flex items-center">
+              <i data-feather="bell" class="w-5 h-5 mr-3"></i>
+              Notification preferences
+            </div>
+            <i data-feather="chevron-down" class="w-5 h-5"></i>
+          </button>
+        </div>
+        
+        <!-- Accordion Item 5 -->
+        <div class="border border-white/10 rounded-xl overflow-hidden">
+          <button class="w-full p-4 flex justify-between items-center text-left bg-white/5">
+            <div class="flex items-center">
+              <i data-feather="shield" class="w-5 h-5 mr-3 text-warning"></i>
+              Responsible Play
+            </div>
+            <i data-feather="chevron-down" class="w-5 h-5"></i>
+          </button>
+        </div>
+      </div>
+    </section>
+  </div>
+  
+  <!-- Script initialization -->
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      feather.replace();
+      AOS.init({
+        duration: 800,
+        offset: 20,
+        easing: 'ease-out-quad'
+      });
+
+      // Initial progress animations
+      anime({
+        targets: '.progress-bar-inner',
+        opacity: [0, 1],
+        scaleX: [0, 1],
+        easing: 'easeOutElastic(1, .8)',
+        duration: 1500,
+        delay: 200
+      });
+    });
+  </script>
+</body>
 </html>