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 4
-emoji: 😻
-colorFrom: indigo
-colorTo: blue
+title: wallet-ui-4
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 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,692 @@
-<!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>Neon Wallet - Nioplay Casino</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
+            color: #F5F5F5;
+            font-family: 'Poppins', sans-serif;
+            min-height: 100vh;
+            position: relative;
+        }
+        body::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM40 18c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM9 32c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' opacity='0.05' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E");
+            opacity: 0.12;
+            z-index: -1;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(12px);
+            border-radius: 1rem;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }
+        .glass-card:hover {
+            transform: translateY(-4px);
+            border-color: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 20px rgba(255, 106, 0, 0.2);
+        }
+        .chip {
+            padding: 4px 12px;
+            border-radius: 100px;
+            font-size: 12px;
+            font-weight: 600;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+        }
+        .pill-button {
+            border-radius: 100px;
+            font-weight: 600;
+            font-size: 14px;
+            padding: 10px 24px;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            z-index: 1;
+        }
+        .pill-button::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: conic-gradient(transparent, #FF6A00, #00E4FF, transparent);
+            z-index: -1;
+            animation: border-trail 2.5s linear infinite;
+        }
+        .pill-button::after {
+            content: "";
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            right: 2px;
+            bottom: 2px;
+            background: rgba(30, 30, 30, 0.9);
+            border-radius: 100px;
+            z-index: -1;
+        }
+        .pill-button:hover {
+            box-shadow: 0 0 10px 2px;
+        }
+        .pill-button-primary {
+            color: #FFD600;
+            text-shadow: 0 0 8px rgba(255, 106, 0, 0.7);
+        }
+        .pill-button-primary:hover {
+            box-shadow: 0 0 15px 2px rgba(255, 106, 0, 0.8);
+        }
+        .pill-button-secondary {
+            color: #00E4FF;
+            text-shadow: 0 0 8px rgba(0, 228, 255, 0.7);
+        }
+        .pill-button-secondary:hover {
+            box-shadow: 0 0 15px 2px rgba(0, 228, 255, 0.6);
+        }
+        .progress-track {
+            background: rgba(255, 255, 255, 0.15);
+            height: 12px;
+            border-radius: 6px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            border-radius: 6px;
+            transition: width 0.6s ease;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+        }
+        .big-number {
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 600;
+            line-height: 1.2;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+        }
+        .tooltip-wrapper {
+            position: relative;
+            display: inline-flex;
+        }
+        .tooltip-content {
+            position: absolute;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%) scale(0.95);
+            opacity: 0;
+            background: rgba(20, 20, 20, 0.9);
+            backdrop-filter: blur(5px);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            color: #F5F5F5;
+            padding: 10px;
+            border-radius: 6px;
+            font-size: 13px;
+            width: 220px;
+            z-index: 50;
+            pointer-events: none;
+            transition: all 0.2s ease;
+        }
+        .tooltip-wrapper:hover .tooltip-content {
+            opacity: 1;
+            transform: translateX(-50%) scale(1);
+        }
+        .icon-wrapper {
+            filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
+        }
+        .status-pill {
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 100px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .accordion[aria-expanded="true"] .accordion-content {
+            max-height: 500px;
+        }
+        @keyframes border-trail {
+            0% { transform: translateX(-50%) rotate(0deg); }
+            100% { transform: translateX(-50%) rotate(360deg); }
+        }
+        @keyframes glow {
+            0% { box-shadow: 0 0 0px 0px rgba(255, 106, 0, 0.6); }
+            50% { box-shadow: 0 0 10px 3px rgba(255, 106, 0, 0.8); }
+            100% { box-shadow: 0 0 0px 0px rgba(255, 106, 0, 0.6); }
+        }
+        .glowing-border {
+            animation: glow 2s infinite;
+        }
+        .bg-blue-accent-gradient {
+            background: linear-gradient(90deg, #00E4FF, transparent);
+        }
+        .bg-orange-accent-gradient {
+            background: linear-gradient(90deg, #FF6A00, transparent);
+        }
+        .flex-\[0_0_auto\] { flex: 0 0 auto; }
+        
+        /* Mobile specific */
+        @media (max-width: 1023px) {
+            .sticky-cta-bar {
+                position: sticky;
+                top: 0;
+                z-index: 40;
+                padding: 10px 0;
+                background: rgba(20, 20, 20, 0.9);
+                backdrop-filter: blur(10px);
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+            .glass-card {
+                backdrop-filter: blur(8px);
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen relative overflow-x-hidden">
+    <header class="glass-card w-full px-4 md:px-8 py-6 md:py-5" id="page-header">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-wrap justify-between items-center gap-4">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold font-['Orbitron']" style="text-shadow:0 0 10px rgba(255,106,0,0.5)">Wallet</h1>
+                    <p class="text-secondary text-[#B8B8B8] mt-1 max-w-2xl">Track balances, playthrough progress, and redeemables.</p>
+                </div>
+                
+                <div class="flex flex-col items-end">
+                    <div class="flex gap-3">
+                        <button id="btn-deposit" class="pill-button pill-button-primary">
+                            <span>Deposit SC</span>
+                        </button>
+                        <button id="btn-withdraw" class="pill-button pill-button-secondary">
+                            <span>Withdraw</span>
+                        </button>
+                    </div>
+                    <div class="flex gap-4 mt-2 text-xs text-[#B8B8B8]">
+                        <a href="#" class="hover:text-[#00E4FF] transition">Payment Methods</a>
+                        <a href="#" class="hover:text-[#00E4FF] transition">Withdrawal Policy</a>
+                        <a href="#" class="hover:text-[#FF6A00] transition">KYC Status</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    
+    <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10">
+        <!-- Sticky CTA bar for mobile -->
+        <div class="sticky-cta-bar flex justify-center gap-3 md:hidden mb-6">
+            <button class="pill-button pill-button-primary">
+                <span>Deposit SC</span>
+            </button>
+            <button class="pill-button pill-button-secondary">
+                <span>Withdraw</span>
+            </button>
+        </div>
+        
+        <!-- Balance Overview -->
+        <section class="mb-10">
+            <h2 class="text-xl font-bold font-['Orbitron'] mb-5 opacity-80">BALANCE OVERVIEW</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+                <!-- Card A: Purchase SC -->
+                <div class="glass-card p-5" id="card-purchase-sc" data-aos="fade-up">
+                    <div class="flex justify-between items-start">
+                        <span class="chip border border-[#FF6A00] text-[#FF6A00]">1× Playthrough</span>
+                        <div class="tooltip-wrapper">
+                            <i data-feather="info" class="w-4 h-4 text-[#B8B8B8]"></i>
+                            <div class="tooltip-content">
+                                Purchase SC requires 1× wagering before withdrawal.
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-3xl mt-3 font-bold font-['Orbitron'] big-number text-[#FF6A00]">18.74</div>
+                    <div class="text-sm text-[#B8B8B8] mt-1">Required: <span class="font-medium">18.74</span> | Progress: <span class="font-medium">64.5%</span></div>
+                </div>
+                
+                <!-- Card B: Bonus SC -->
+                <div class="glass-card p-5" id="card-bonus-sc" data-aos="fade-up" data-aos-delay="50">
+                    <div class="flex justify-between items-start">
+                        <span class="chip border border-[#00E4FF] text-[#00E4FF]">5× Playthrough</span>
+                        <div class="tooltip-wrapper">
+                            <i data-feather="info" class="w-4 h-4 text-[#B8B8B8]"></i>
+                            <div class="tooltip-content">
+                                Bonus SC requires 5× wagering. Table & live games may count less.
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-3xl mt-3 font-bold font-['Orbitron'] big-number text-[#00E4FF]">0.30</div>
+                    <div class="text-sm text-[#B8B8B8] mt-1">Required: <span class="font-medium">1.50</span> | Progress: <span class="font-medium">0.0%</span></div>
+                </div>
+                
+                <!-- Card C: WSC -->
+                <div class="glass-card p-5 bg-[rgba(60,226,122,0.08)]" id="card-wsc" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex justify-between items-start">
+                        <span class="chip border border-[#3CE27A] text-[#3CE27A]">Redeemable Now</span>
+                        <div class="icon-wrapper">
+                            <i data-feather="check-circle" class="w-5 h-5 text-[#3CE27A]"></i>
+                        </div>
+                    </div>
+                    <div class="text-3xl mt-3 font-bold font-['Orbitron'] big-number text-[#3CE27A]">6.64</div>
+                    <p class="text-sm text-[#B8B8B8] mt-1">Ready to withdraw.</p>
+                </div>
+                
+                <!-- Card D: GC -->
+                <div class="glass-card p-5" id="card-gc" data-aos="fade-up" data-aos-delay="150">
+                    <div class="flex justify-between items-start">
+                        <span class="chip border border-[#FEC84B] text-[#FEC84B]">Gold Coins</span>
+                        <div class="icon-wrapper">
+                            <i data-feather="shopping-bag" class="w-5 h-5 text-[#FEC84B]"></i>
+                        </div>
+                    </div>
+                    <div class="text-3xl mt-3 font-bold font-['Orbitron'] big-number text-[#FEC84B]">3,500</div>
+                    <p class="text-sm text-[#B8B8B8] mt-1">For fun play.</p>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Playthrough Progress -->
+        <section class="mb-10">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+                <!-- Left Card: Progress Bars -->
+                <div class="glass-card p-6" data-aos="fade-right">
+                    <h3 class="text-lg font-medium font-['Orbitron'] mb-5">Playthrough Progress</h3>
+                    
+                    <div class="mb-5" id="bar-purchase">
+                        <div class="flex justify-between mb-2">
+                            <span class="font-medium flex items-center text-sm"><span class="inline-block w-2 h-2 rounded-full bg-[#FF6A00] mr-2"></span> Purchase SC</span>
+                            <div class="text-sm"><span class="font-medium">12.10</span> / <span class="text-[#B8B8B8]">18.74</span> • <span class="text-[#FF6A00]">64.5%</span></div>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill" style="width: 64.5%; background: linear-gradient(90deg, #FF6A00, #FFA000);"></div>
+                        </div>
+                    </div>
+                    
+                    <div class="h-px bg-[rgba(255,255,255,0.1)] my-6"></div>
+                    
+                    <div id="bar-bonus">
+                        <div class="flex justify-between mb-2">
+                            <span class="font-medium flex items-center text-sm"><span class="inline-block w-2 h-2 rounded-full bg-[#00E4FF] mr-2"></span> Bonus SC</span>
+                            <div class="text-sm"><span class="font-medium">0.00</span> / <span class="text-[#B8B8B8]">1.50</span> • <span class="text-[#00E4FF]">0.0%</span></div>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill" style="width: 0%; background: linear-gradient(90deg, #00E4FF, #0082FF);"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Right Card: Game Contributions -->
+                <div class="glass-card p-6" data-aos="fade-left" data-aos-delay="100">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-lg font-medium font-['Orbitron']">How your wagers count</h3>
+                        <button class="rounded-full hover:bg-[rgba(255,255,255,0.1)] p-1" aria-label="Collapse">
+                            <i data-feather="chevron-down" class="w-5 h-5 text-[#B8B8B8]"></i>
+                        </button>
+                    </div>
+                    
+                    <div>
+                        <div class="flex justify-between py-3 border-b border-[rgba(255,255,255,0.1)]">
+                            <div class="flex items-center">
+                                <i data-feather="sliders" class="w-4 h-4 text-[#FF6A00] mr-3"></i>
+                                <span>Slots</span>
+                            </div>
+                            <span class="font-medium text-[#3CE27A]">100%</span>
+                        </div>
+                        
+                        <div class="flex justify-between py-3 border-b border-[rgba(255,255,255,0.1)]">
+                            <div class="flex items-center">
+                                <i data-feather="gift" class="w-4 h-4 text-[#00E4FF] mr-3"></i>
+                                <span>Instant Win</span>
+                            </div>
+                            <span class="font-medium text-[#3CE27A]">75%</span>
+                        </div>
+                        
+                        <div class="flex justify-between py-3 border-b border-[rgba(255,255,255,0.1)]">
+                            <div class="flex items-center">
+                                <i data-feather="grid" class="w-4 h-4 text-[#FEC84B] mr-3"></i>
+                                <span>RNG Table</span>
+                            </div>
+                            <span class="font-medium text-[#FEC84B]">25%</span>
+                        </div>
+                        
+                        <div class="flex justify-between py-3">
+                            <div class="flex items-center">
+                                <i data-feather="video" class="w-4 h-4 text-[#FF4D4D] mr-3"></i>
+                                <span>Live Casino</span>
+                            </div>
+                            <span class="font-medium text-[#FF4D4D]">10%</span>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-4 text-xs text-[#B8B8B8] flex items-start">
+                        <i data-feather="alert-circle" class="w-4 h-4 mr-2 text-[#FF4D4D] mt-0.5"></i>
+                        <span>Weights affect progress only, not redemption math. Example: $100 on Live Casino → $10 progress.</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Redeemables -->
+        <section class="mb-10" data-aos="fade-up">
+            <div class="glass-card p-6">
+                <h3 class="text-lg font-medium font-['Orbitron'] mb-5">Redeemable Amounts</h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                    <div class="bg-[rgba(60,226,122,0.08)] border border-[rgba(60,226,122,0.15)] p-5 rounded-xl">
+                        <div class="text-sm text-[#B8B8B8]">Redeemable Purchase SC</div>
+                        <div id="redeemable-wsc" class="text-2xl font-bold font-['Orbitron'] big-number text-[#3CE27A]">6.64</div>
+                    </div>
+                    
+                    <div class="bg-[rgba(0,228,255,0.08)] border border-[rgba(0,228,255,0.15)] p-5 rounded-xl">
+                        <div class="text-sm text-[#B8B8B8]">Redeemable Bonus SC</div>
+                        <div id="redeemable-bonus" class="text-2xl font-bold font-['Orbitron'] big-number text-[#00E4FF]">0.00</div>
+                    </div>
+                </div>
+                
+                <div class="text-sm text-[#B8B8B8] mb-6">
+                    Bonus SC becomes redeemable as you clear its playthrough.
+                </div>
+                
+                <div class="flex flex-wrap gap-3">
+                    <button class="pill-button pill-button-secondary bg-[rgba(0,228,255,0.15)]">Withdraw to Wallet</button>
+                    <button id="btn-convert" class="pill-button pill-button-primary">Convert to WSC</button>
+                    <button class="flex items-center gap-2 px-4 py-2 rounded-full border border-[rgba(255,255,255,0.15)] hover:border-[#FF6A00] transition">
+                        <span>View Withdrawal History</span>
+                        <i data-feather="chevron-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                
+                <div class="mt-6 text-sm">
+                    <div class="flex items-center gap-2 mb-2 text-[#FEC84B]">
+                        <i data-feather="alert-triangle" class="w-4 h-4"></i>
+                        <span>Your KYC verification is incomplete. Complete KYC to withdraw.</span>
+                    </div>
+                    <div class="text-[#B8B8B8]">
+                        Processing time: 24–48h after KYC.
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Transaction History -->
+        <section class="mb-10" data-aos="fade-up">
+            <div class="glass-card p-6">
+                <div class="flex flex-wrap justify-between items-start mb-6">
+                    <h3 class="text-lg font-medium font-['Orbitron'] mb-3">Transaction History</h3>
+                    
+                    <div class="flex flex-wrap gap-3">
+                        <div class="relative">
+                            <select class="bg-[rgba(255,255,255,0.1)] text-sm py-2 pl-3 pr-9 rounded-full border border-[rgba(255,255,255,0.15)] appearance-none">
+                                <option>All</option>
+                                <option>Deposits</option>
+                                <option>Withdrawals</option>
+                                <option>Bonuses</option>
+                                <option>Wagers</option>
+                                <option>Adjustments</option>
+                            </select>
+                            <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none"></i>
+                        </div>
+                        
+                        <div class="relative">
+                            <select class="bg-[rgba(255,255,255,0.1)] text-sm py-2 pl-3 pr-9 rounded-full border border-[rgba(255,255,255,0.15)] appearance-none">
+                                <option>Last 7 days</option>
+                                <option>Last 30 days</option>
+                                <option>Last 90 days</option>
+                                <option>Custom</option>
+                            </select>
+                            <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none"></i>
+                        </div>
+                        
+                        <button class="flex items-center gap-2 px-4 py-2 text-sm rounded-full bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.15)] hover:border-[#00E4FF] transition">
+                            <i data-feather="download" class="w-4 h-4"></i>
+                            <span>Export CSV</span>
+                        </button>
+                    </div>
+                </div>
+                
+                <div class="overflow-x-auto">
+                    <table class="w-full text-sm">
+                        <thead>
+                            <tr class="text-[#B8B8B8] text-left border-b border-[rgba(255,255,255,0.1)]">
+                                <th class="pb-3 font-medium">Date/Time</th>
+                                <th class="pb-3 font-medium">Type</th>
+                                <th class="pb-3 font-medium">Description</th>
+                                <th class="pb-3 font-medium">Amount</th>
+                                <th class="pb-3 font-medium">Balance Type</th>
+                                <th class="pb-3 font-medium">Status</th>
+                                <th class="pb-3 font-medium">Ref ID</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tx-table">
+                            <tr class="border-b border-[rgba(255,255,255,0.05)]">
+                                <td class="py-3">May 15, 2023 10:23 AM</td>
+                                <td class="py-3 font-medium text-[#00E4FF]">Deposit</td>
+                                <td class="py-3">Card Deposit - Visa **** 4242</td>
+                                <td class="py-3 font-['Orbitron']">+18.74</td>
+                                <td class="py-3">
+                                    <span class="status-pill bg-[rgba(255,106,0,0.1)] text-[#FF6A00]">Purchase SC</span>
+                                </td>
+                                <td class="py-3">
+                                    <span class="status-pill bg-[rgba(60,226,122,0.1)] text-[#3CE27A]">Completed</span>
+                                </td>
+                                <td class="py-3">#TX1024</td>
+                            </tr>
+                            <tr class="border-b border-[rgba(255,255,255,0.05)]">
+                                <td class="py-3">May 15, 2023 10:25 AM</td>
+                                <td class="py-3 font-medium text-[#00E4FF]">Bonus</td>
+                                <td class="py-3">New Player Bonus</td>
+                                <td class="py-3 font-['Orbitron']">+0.30</td>
+                                <td class="py-3">
+                                    <span class="status-pill bg-[rgba(0,228,255,0.1)] text-[#00E4FF]">Bonus SC</span>
+                                </td>
+                                <td class="py-3">
+                                    <span class="status-pill bg-[rgba(60,226,122,0.1)] text-[#3CE27A]">Active</span>
+                                </td>
+                                <td class="py-3">#BON005</td>
+                            </tr>
+                            <tr class="border-b border-[rgba(255,255,255,0.05)]">
+                                <td class="py-3">May 15, 2023 10:45 AM</td>
+                                <td class="py-3 font-medium text-[#FF4D4D]">Wager</td>
+                                <td class="py-3">Blackjack Table #7</td>
+                                <td class="py-3 font-['Orbitron']">-4.50</td>
+                                <td class="py-3">
+                                    <span class="status-pill bg-[rgba(255,106,0,0.1)] text-[#FF6A00]">Purchase SC</span>
+                                </td>
+                                <td class="py-3">
+                                    <span class="status-pill bg-[rgba(60,226,122,0.1)] text-[#3CE27A]">Settled</span>
+                                </td>
+                                <td class="py-3">#WG0047</td>
+                            </tr>
+                            <tr>
+                                <td colspan="7" class="py-20 text-center">
+                                    <div class="max-w-md mx-auto">
+                                        <div class="mb-6">
+                                            <i data-feather="frown" class="w-16 h-16 mx-auto text-[#B8B8B8]"></i>
+                                        </div>
+                                        <h4 class="font-medium mb-2">No transactions yet</h4>
+                                        <p class="text-[#B8B8B8] mb-6">Top up your wallet to get started</p>
+                                        <button class="pill-button pill-button-primary px-6">Make Your First Deposit</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Store & Promos -->
+        <section class="mb-10">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div class="glass-card p-6" id="store-card" data-aos="fade-up">
+                    <div class="flex justify-between items-center mb-5">
+                        <h3 class="text-lg font-medium font-['Orbitron']">Buy Packages</h3>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 gap-3 mb-6">
+                        <div class="bg-[rgba(255,106,0,0.05)] border border-[rgba(255,106,0,0.15)] rounded-xl p-4">
+                            <div class="text-2xl font-bold font-['Orbitron'] text-[#FF6A00]">10 SC</div>
+                            <div class="text-sm text-[#B8B8B8]">$10.00</div>
+                        </div>
+                        <div class="border-2 border-[#3CE27A] bg-[rgba(60,226,122,0.05)] rounded-xl p-4 relative">
+                            <span class="absolute -top-2 right-3 bg-[#3CE27A] text-[#0a0a0a] text-xs px-2 py-1 rounded-full">Best Value</span>
+                            <div class="text-2xl font-bold font-['Orbitron'] text-[#3CE27A]">50 SC</div>
+                            <div class="text-sm text-[#B8B8B8]">+10 Bonus SC $45.00</div>
+                        </div>
+                    </div>
+                    
+                    <button class="w-full py-3 rounded-xl bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.15)] hover:bg-[rgba(255,106,0,0.1)] hover:border-[#FF6A00] transition font-medium">Go to Store</button>
+                </div>
+                
+                <div class="glass-card p-6" id="promos-card" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex justify-between items-center mb-5">
+                        <h3 class="text-lg font-medium font-['Orbitron']">Active Bonuses & Codes</h3>
+                    </div>
+                    
+                    <div class="mb-6">
+                        <div class="mb-4 p-4 bg-[rgba(255,255,255,0.05)] rounded-lg">
+                            <div class="flex justify-between mb-2">
+                                <div class="flex items-center">
+                                    <span class="font-medium text-[#00E4FF]">WELCOME100</span>
+                                    <span class="ml-3 text-xs bg-[rgba(0,228,255,0.15)] text-[#00E4FF] px-2 py-1 rounded-full">Active</span>
+                                </div>
+                                <div class="text-sm text-[#FEC84B]">24h 32m left</div>
+                            </div>
+                            <p class="text-sm text-[#B8B8B8] mb-3">Get 100% bonus on first deposit, up to $100</p>
+                        </div>
+                        
+                        <div class="mb-4 p-4 bg-[rgba(255,255,255,0.05)] rounded-lg">
+                            <div class="flex justify-between mb-2">
+                                <div class="flex items-center">
+                                    <span class="font-medium text-[#FF6A00]">SPIN25</span>
+                                    <span class="ml-3 text-xs bg-[rgba(255,106,0,0.15)] text-[#FF6A00] px-2 py-1 rounded-full">Active</span>
+                                </div>
+                                <div class="text-sm text-[#B8B8B8]">3 days left</div>
+                            </div>
+                            <p class="text-sm text-[#B8B8B8]">25 Free Spins on Pharaoh's Fortune</p>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <div class="flex gap-2">
+                            <input type="text" placeholder="Have a code?" class="flex-grow bg-[rgba(255,255,255,0.05)] px-4 py-2 rounded-lg border border-[rgba(255,255,255,0.15)]">
+                            <button class="px-4 py-2 rounded-lg bg-[rgba(0,228,255,0.15)] text-[#00E4FF] font-medium">Apply</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- VIP & Jackpot -->
+        <section class="mb-10">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div class="glass-card p-5" id="vip-card" data-aos="fade-up">
+                    <div class="flex items-center gap-3 mb-4">
+                        <i data-feather="star" class="w-5 h-5 text-[#FEC84B]"></i>
+                        <h3 class="text-md font-medium font-['Orbitron']">VIP Snapshot</h3>
+                    </div>
+                    <div class="text-sm mb-2">This month wagered: <span class="font-medium">420.00</span></div>
+                    <div class="progress-track mb-4">
+                        <div class="progress-fill" style="width: 12%; background: linear-gradient(90deg, #FEC84B, #FF9800);"></div>
+                    </div>
+                    <div class="text-sm text-[#FEC84B]">VIP Progress +12%</div>
+                </div>
+                
+                <div class="glass-card p-5" id="jackpot-card" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex items-center gap-3 mb-4">
+                        <i data-feather="award" class="w-5 h-5 text-[#FF6A00]"></i>
+                        <h3 class="text-md font-medium font-['Orbitron']">Jackpot Contribution</h3>
+                    </div>
+                    <div class="text-sm mb-4">You've contributed <span class="font-medium">8.40</span> to the pool.</div>
+                    <a href="#" class="flex items-center gap-2 text-[#00E4FF] group">
+                        <span>View Jackpots</span>
+                        <i data-feather="chevron-right" class="w-4 h-4 transform transition group-hover:translate-x-1"></i>
+                    </a>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Security & Settings -->
+        <section class="mb-10" data-aos="fade-up">
+            <div class="glass-card overflow-hidden">
+                <div id="security-accordion" class="divide-y divide-[rgba(255,255,255,0.1)]">
+                    <!-- Accordion Item -->
+                    <div>
+                        <button class="accordion w-full text-left p-5 hover:bg-[rgba(255,255,255,0.02)] flex justify-between items-center" aria-expanded="true">
+                            <div class="flex items-center gap-4">
+                                <i data-feather="credit-card" class="w-5 h-5 text-[#00E4FF]"></i>
+                                <span class="font-medium">Payment Methods</span>
+                            </div>
+                            <i data-feather="chevron-down" class="transform transition ui-state-active:rotate-180 w-5 h-5 text-[#B8B8B8]"></i>
+                        </button>
+                        <div class="accordion-content ui-state-active:block">
+                            <div class="p-5 pt-0">
+                                <div class="flex items-center justify-between p-4 mb-3 bg-[rgba(255,255,255,0.03)] rounded-lg">
+                                    <div class="flex items-center gap-3">
+                                        <div class="w-8 h-8 rounded-full bg-[rgba(0,228,255,0.1)] flex items-center justify-center">
+                                            <i data-feather="credit-card" class="w-4 h-4 text-[#00E4FF]"></i>
+                                        </div>
+                                        <div>
+                                            <div class="font-medium">Visa ending in 4242</div>
+                                            <div class="text-xs text-[#B8B8B8]">Expires 05/2025</div>
+                                        </div>
+                                    </div>
+                                    <button class="text-sm font-medium text-[#FF6A00] hover:text-[#ff8a3d]">Remove</button>
+                                </div>
+                                <button class="flex items-center gap-2 font-medium text-[#00E4FF]">
+                                    <i data-feather="plus" class="w-4 h-4"></i>
+                                    <span>Add New Payment Method</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- More accordion items would go here -->
+                    <!-- Placeholder for additional sections -->
+                </div>
+            </div>
+        </section>
+    </div>
+    
+    <script>
+        // Initialize libraries
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            AOS.init({
+                duration: 600,
+                easing: 'ease-in-out',
+                once: true
+            });
+            
+            // Accordion functionality
+            const accordions = document.querySelectorAll('.accordion');
+            accordions.forEach(accordion => {
+                accordion.addEventListener('click', function() {
+                    const expanded = this.getAttribute('aria-expanded') === 'true';
+                    this.setAttribute('aria-expanded', !expanded);
+                });
+            });
+        });
+    </script>
+</body>
 </html>