TITLE: Nioplay — Wallet Page (Single Page • UI-Only • Minimal Glass)

OBJECTIVE
Generate a production-ready Wallet page for Nioplay that clearly shows balances, 1×/5× playthrough progress, redeemables, and transactions. STRICTLY UI — no math, no API calls. Avoid overusing glassmorphism: use mostly soft panels and borders; only 1–2 glass highlights above the fold.

THEME (GLOBAL)
Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)
Colors:
--fg:#F5F5F5; --muted:#B8B8B8;
--orange:#FF6A00; --blue:#00E4FF;
--success:#3CE27A; --warn:#FEC84B; --danger:#FF4D4D;
--soft:#111315; /* soft panel (default) */
--soft-border:rgba(255,255,255,.08);
--glass:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.12);
Typography: Orbitron (headings), Poppins (body). Numbers 28–36px; body min 14px.

COMPONENTS (REUSE EVERYWHERE)
• AppHeader (soft band, NOT glass) with title + actions
• SoftPanel (bg var(--soft), 1px border var(--soft-border), rounded-2xl)
• GlassPanel (bg var(--glass), 1px border var(--glass-border), rounded-2xl, blur(12px))
• NeoButton (pill, seamless border-trail animation; variants: orange/blue/ghost)
• ProgressBar (rounded-full; 10px height; 600ms ease; color ramps)
• PlaythroughChip: outline chips — “1×” (orange), “5×” (blue)
• Tooltip “ⓘ”
• Tabs (ghost style)
• DataTable (dense, zebra)
• Modal / Drawer
• Icon chips + Status badges (success/pending/failed)

ANIMATION RULES
• Buttons: animated border ring using repeating conic/linear gradient; loop must be seamless (no jump), 2.5s linear; ring 2px via mask; subtle hover glow.
• Progress: width transition .6s ease; soft outer glow; rounded-full.

LAYOUT RULES (MINIMAL GLASS)
• Above the fold: MAX 2 GlassPanels. Prefer SoftPanels + border-only sections elsewhere.
• Container max-width 1280px; 12-col grid ≥1024, stack on mobile.
• Vertical rhythm 24/32/40; gutters 24px.

========================
PAGE STRUCTURE (ONE PAGE)
========================

A) HEADER BAND — SoftPanel (full width; NOT glass)
Title: “Wallet”
Sub: “Track balances, playthrough, and redeemables.”
Actions (right):
[Deposit SC] (NeoButton orange → opens Drawer #drawer-deposit)
[Withdraw] (NeoButton blue → opens Drawer #drawer-withdraw)
Links row (tiny): Payment Methods → Drawer #drawer-payments • Bonus Terms → Modal #modal-terms • KYC Status → Drawer #drawer-kyc

B) BALANCE OVERVIEW — SoftPanel (4 responsive tiles: 1×4 / 2×2 / stack)
Tile 1 — Purchase SC
Chip: PlaythroughChip “1×”
Big number: {{purchase_sc}}
Mini: “Required {{purchase_required}} | {{purchase_progress_pct}}%”
Tooltip ⓘ: “Coins you bought; requires 1× wagering before withdrawal.”
Tile 2 — Bonus SC
Chip: PlaythroughChip “5×”
Big number: {{bonus_sc}}
Mini: “Required {{bonus_required}} | {{bonus_progress_pct}}%”
Tooltip ⓘ: “Promotional coins that require 5× wagering.”
Tile 3 — Withdrawable SC (WSC)
Tag: “Redeemable now”
Big number: {{wsc}}
Sub: “Ready to withdraw.”
Tile 4 — Gold Coins (GC)
Tag: “Gold Coins”
Big number: {{gc}}
Sub: “For fun play.”

C) PLAYTHROUGH PROGRESS — GlassPanel (Glass #1 of 2; two columns inside)
Left column — “Playthrough Progress”
Row A — Purchase SC (1×)
ProgressBar (orange→success near 100%)
Inline: “{{purchase_wagered}} / {{purchase_required}} ({{purchase_progress_pct}}%)”
Row B — Bonus SC (5×)
ProgressBar (blue→orange)
Inline: “{{bonus_wagered}} / {{bonus_required}} ({{bonus_progress_pct}}%)”
Right column — Collapsible “How your wagers count”
• Slots — 100%
• Instant Win — 75%
• RNG Table — 25%
• Live Casino — 10%
Footnote (lock copy): “Weights affect progress only, not redemption.”

D) REDEEMABLES & ACTIONS — GlassPanel (Glass #2 of 2; full width)
Title: “Redeemable Amounts”
Tiles (large numerals):
• Redeemable Purchase SC (WSC): {{redeemable_wsc}}
• Redeemable Bonus SC: {{redeemable_bonus_sc}}
Buttons:
[Withdraw to Wallet] → Drawer #drawer-withdraw
[Convert to WSC] → Modal #modal-convert (UI only)
[View Transactions] → scrollIntoView(#section-transactions)
State banners (UI-only visuals):
• Warning if KYC incomplete → “Verify to withdraw” (opens Drawer #drawer-kyc)
• Info if daily limit reached → “See limits” (opens Modal #modal-terms#limits)

E) QUICK ACTIONS STRIP — Border-only row (no card)
Four compact icon actions:
• “Buy Packages” → Drawer #drawer-deposit
• “Apply Promo Code” → Modal #modal-promo
• “VIP Snapshot” → tooltip: “This month wagered {{monthly_wagered}} • VIP +{{vip_progress_pct}}%”
• “Jackpot Contribution” → inline: “You’ve contributed {{jackpot_contrib}}”

F) TRANSACTION HISTORY — SoftPanel (full width) [id="section-transactions"]
Header: “Transactions”
Filters (compact, inline): Type (All/Deposit/Withdraw/Bonus/Wager/Adjustment), Date Range, Status
DataTable (compact rows, Dribbble-style density):
• Row height: 48px
• Left icon per Type (card/crypto/bonus/wager/adjustment)
• Columns: Date/Time | Type+Icon | Amount | Balance (SC/GC/BSC/WSC) | Status Chip | Ref
• Status chips: success=green, pending=yellow, failed=red (soft glow)
Buttons: [Export CSV] (ghost) • [Clear Filters]
Empty state: friendly message + CTA “Make a deposit” → Drawer #drawer-deposit

G) EDUCATION & POLICY — Border-only two-column text
Left: “Understanding Playthrough” (short bullets)
Right: “Tips to clear faster” (slots count 100%, etc.)
Re-use tooltips below.

H) SECURITY STRIP — SoftPanel (narrow)
KYC status pill (Not verified / In review / Verified) + buttons:
[Start/Continue KYC] → Drawer #drawer-kyc
[Manage Payment Methods] → Drawer #drawer-payments

========================
DRAWERS & MODALS (UI ONLY)
========================

#drawer-deposit — Right slide (merge of Nioplay + Dribbble “You will receive”)
Top: Package selector (tiles): mock amounts, include “Best Value” tag. Selecting a tile highlights it.
Summary SoftPanel (NOT glass) — EXACT COPY:
Title: “You will receive”
Rows (large numerals):
• Gold Coins (GC): {{pkg_gc}} [badge: “for fun play”]
• Sweepstakes Coins (SC): {{pkg_sc}}
• Bonus SC (BSC): +{{pkg_bsc}} [badge: “promo”]
Fee note (muted): “We cover payment fees.”
Mini grid (disabled inputs, UI only):
• Currency: USDT ▼ • Network: ETH ▼ • Your Address: 0x••• (copy icon, no logic)
Divider
Payment Method tiles (toggle highlight; fields stay disabled):
[ Crypto ] [ Card ]
Compact warning row (icon): “All crypto deposits are UI mocks in staging.”
Primary CTA — NeoButton orange (border-trail):
[Confirm transfer] → close drawer + toast “Deposit initiated (UI mock)”
Secondary link: “Change package” → keeps drawer open; focuses package grid.

#drawer-withdraw — Right slide
Summary: “Withdrawable SC (WSC): {{wsc}} • Daily limit {{withdraw_limit}} • Pending {{pending_withdrawals}}”
Form: Amount input, Method select, PIN input (masked)
CTA: [Submit Request] → toast “Request queued — UI mock”
Link: “View history” → scrollIntoView(#section-transactions)

#drawer-kyc — Right slide
Steps: ID • Address • Selfie (badges with states)
CTA: [Start Verification] → toast “KYC started — UI mock”

#drawer-payments — Right slide
Cards on file (masked) with [Add Method] (dummy modal)
Note: “Payment methods are stored for convenience only in this mock.”

#modal-convert
Copy: “Convert eligible Bonus SC to WSC after playthrough clears. This is a visual mock only.”
CTA: [OK]

#modal-promo
Input: “Have a code?” [Apply] (dummy success/error toasts)
List: active promo balances with timers + SAME ProgressBar component

#modal-terms
Scrollable policy text placeholders with anchors:
• #bonus-terms — contribution weights table (repeat the 100/75/25/10 card)
• #limits — daily withdrawal limits + processing notes
Close button only.

========================
TOOLTIP MICROCOPY (LOCK)
========================
• “Playthrough Requirement” — “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 (5×)” — “Promotional coins that require 5× wagering.”
• “Purchase SC (1×)” — “Coins you bought; requires 1× wagering.”
• Note — “Weights affect progress only, not redemption.”

========================
PLACEHOLDER DATA (BIND)
========================
{
"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",
"withdraw_limit": "500.00",
"pending_withdrawals": "0.00",
"pkg_gc": "1100",
"pkg_sc": "110",
"pkg_bsc": "110"
}

========================
COMPONENT / ID MAP
========================
#btn-deposit (#drawer-deposit) • #btn-withdraw (#drawer-withdraw)
#card-purchase • #card-bonus • #card-wsc • #card-gc
#bar-purchase • #bar-bonus
#redeemable-wsc • #redeemable-bonus
#quick-actions • #section-transactions
#drawer-deposit • #drawer-withdraw • #drawer-kyc • #drawer-payments
#modal-convert • #modal-promo • #modal-terms

QA CHECKS
• Above-the-fold uses ≤2 GlassPanels; rest are SoftPanels or border-only.
• Buttons share the same pill shape + seamless border-trail animation.
• Progress bars share one component across wallet & promos.
• Copy and tooltips match exactly; icons are thin-line with soft glow.
• No logic implemented; all numbers static placeholders; all CTAs open drawers/modals or scroll within the page.

index.html

@@ -588,7 +588,7 @@
         <div class="bg-soft w-full max-w-md h-full relative z-10 overflow-y-auto">
             <div class="p-6">
                 <div class="flex justify-between items-center mb-8">
-                    <h3 class="font-orbitron text-2xl">Deposit</h3>
+                    <h3 class="font-orbitron text-2xl">Purchase</h3>
                     <button onclick="closeDrawer('drawer-deposit')">
                         <i data-feather="x" class="w-6 h-6"></i>
                     </button>
@@ -611,7 +611,7 @@
                             </div>
                             <span class="text-orange">$19.99</span>
                         </div>
-                        <p class="font-orbitron text-2xl mt-2">1,100 GC + 110 SC + 55 BSC</p>
+                        <p class="font-orbitron text-2xl mt-2">1,100 GC + 110 SC</p>
                     </div>
                 </div>
                 
@@ -635,10 +635,8 @@
                         
                         <div class="flex justify-between mb-6">
                             <div>
-                                <p>Bonus SC (BSC)</p>
-                                <span class="bg-blue bg-opacity-10 text-blue text-xs px-2 rounded">promo</span>
                             </div>
-                            <p class="font-orbitron">+55</p>
+
                         </div>
                     </div>
                     
@@ -647,16 +645,16 @@
                     <div class="grid grid-cols-2 gap-3 mt-6">
                         <div>
                             <p class="text-sm text-muted mb-1">Currency</p>
-                            <div class="soft-panel px-4 py-2">USDT <i class="float-right" data-feather="chevron-down"></i></div>
+                            <div class="soft-panel px-4 py-2">USD <i class="float-right" data-feather="chevron-down"></i></div>
                         </div>
                         <div>
-                            <p class="text-sm text-muted mb-1">Network</p>
-                            <div class="soft-panel px-4 py-2">ETH <i class="float-right" data-feather="chevron-down"></i></div>
+                            <p class="text-sm text-muted mb-1">Method</p>
+                            <div class="soft-panel px-4 py-2">Debit <i class="float-right" data-feather="chevron-down"></i></div>
                         </div>
                         <div class="col-span-2">
-                            <p class="text-sm text-muted mb-1">Your Address</p>
+                            <p class="text-sm text-muted mb-1">Payment Details</p>
                             <div class="soft-panel px-4 py-2 flex justify-between">
-                                <span class="truncate mr-2">0x5a...2b1z</span>
+                                <span class="truncate mr-2">Visa 0980</span>
                                 <button>
                                     <i data-feather="copy" class="w-4 h-4"></i>
                                 </button>
@@ -665,8 +663,8 @@
                     </div>
                     
                     <div class="flex gap-2 mt-6">
-                        <button class="soft-panel font-medium py-3 text-center flex-1">Crypto</button>
-                        <button class="soft-panel py-3 text-center flex-1 text-muted">Card</button>
+                        <button class="soft-panel font-medium py-3 text-center flex-1">Card</button>
+                        <button class="soft-panel py-3 text-center flex-1 text-muted">Other</button>
                     </div>
                     
                     <div class="flex items-center gap-2 bg-danger bg-opacity-5 rounded-lg px-4 py-3 mt-6">
@@ -678,7 +676,7 @@
                 <!-- CTA -->
                 <button class="neo-button neo-button-orange w-full mt-8 py-4" 
                         onclick="closeDrawer('drawer-deposit')">
-                    Confirm Transfer
+                    Confirm Payment
                 </button>
             </div>
         </div>

prompts.txt

@@ -0,0 +1,234 @@
+TITLE: Nioplay — Wallet Page (Single Page • UI-Only • Minimal Glass)
+
+OBJECTIVE
+Generate a production-ready Wallet page for Nioplay that clearly shows balances, 1×/5× playthrough progress, redeemables, and transactions. STRICTLY UI — no math, no API calls. Avoid overusing glassmorphism: use mostly soft panels and borders; only 1–2 glass highlights above the fold.
+
+THEME (GLOBAL)
+Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)
+Colors:
+  --fg:#F5F5F5; --muted:#B8B8B8;
+  --orange:#FF6A00; --blue:#00E4FF;
+  --success:#3CE27A; --warn:#FEC84B; --danger:#FF4D4D;
+  --soft:#111315;            /* soft panel (default) */
+  --soft-border:rgba(255,255,255,.08);
+  --glass:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.12);
+Typography: Orbitron (headings), Poppins (body). Numbers 28–36px; body min 14px.
+
+COMPONENTS (REUSE EVERYWHERE)
+• AppHeader (soft band, NOT glass) with title + actions
+• SoftPanel (bg var(--soft), 1px border var(--soft-border), rounded-2xl)
+• GlassPanel (bg var(--glass), 1px border var(--glass-border), rounded-2xl, blur(12px))
+• NeoButton (pill, seamless border-trail animation; variants: orange/blue/ghost)
+• ProgressBar (rounded-full; 10px height; 600ms ease; color ramps)
+• PlaythroughChip: outline chips — “1×” (orange), “5×” (blue)
+• Tooltip “ⓘ”
+• Tabs (ghost style)
+• DataTable (dense, zebra)
+• Modal / Drawer
+• Icon chips + Status badges (success/pending/failed)
+
+ANIMATION RULES
+• Buttons: animated border ring using repeating conic/linear gradient; loop must be seamless (no jump), 2.5s linear; ring 2px via mask; subtle hover glow.
+• Progress: width transition .6s ease; soft outer glow; rounded-full.
+
+LAYOUT RULES (MINIMAL GLASS)
+• Above the fold: MAX 2 GlassPanels. Prefer SoftPanels + border-only sections elsewhere.
+• Container max-width 1280px; 12-col grid ≥1024, stack on mobile.
+• Vertical rhythm 24/32/40; gutters 24px.
+
+========================
+PAGE STRUCTURE (ONE PAGE)
+========================
+
+A) HEADER BAND — SoftPanel (full width; NOT glass)
+Title: “Wallet”
+Sub: “Track balances, playthrough, and redeemables.”
+Actions (right):
+  [Deposit SC] (NeoButton orange → opens Drawer #drawer-deposit)
+  [Withdraw]   (NeoButton blue   → opens Drawer #drawer-withdraw)
+Links row (tiny): Payment Methods → Drawer #drawer-payments • Bonus Terms → Modal #modal-terms • KYC Status → Drawer #drawer-kyc
+
+B) BALANCE OVERVIEW — SoftPanel (4 responsive tiles: 1×4 / 2×2 / stack)
+Tile 1 — Purchase SC
+  Chip: PlaythroughChip “1×”
+  Big number: {{purchase_sc}}
+  Mini: “Required {{purchase_required}} | {{purchase_progress_pct}}%”
+  Tooltip ⓘ: “Coins you bought; requires 1× wagering before withdrawal.”
+Tile 2 — Bonus SC
+  Chip: PlaythroughChip “5×”
+  Big number: {{bonus_sc}}
+  Mini: “Required {{bonus_required}} | {{bonus_progress_pct}}%”
+  Tooltip ⓘ: “Promotional coins that require 5× wagering.”
+Tile 3 — Withdrawable SC (WSC)
+  Tag: “Redeemable now”
+  Big number: {{wsc}}
+  Sub: “Ready to withdraw.”
+Tile 4 — Gold Coins (GC)
+  Tag: “Gold Coins”
+  Big number: {{gc}}
+  Sub: “For fun play.”
+
+C) PLAYTHROUGH PROGRESS — GlassPanel (Glass #1 of 2; two columns inside)
+Left column — “Playthrough Progress”
+  Row A — Purchase SC (1×)
+    ProgressBar (orange→success near 100%)
+    Inline: “{{purchase_wagered}} / {{purchase_required}} ({{purchase_progress_pct}}%)”
+  Row B — Bonus SC (5×)
+    ProgressBar (blue→orange)
+    Inline: “{{bonus_wagered}} / {{bonus_required}} ({{bonus_progress_pct}}%)”
+Right column — Collapsible “How your wagers count”
+  • Slots — 100%
+  • Instant Win — 75%
+  • RNG Table — 25%
+  • Live Casino — 10%
+  Footnote (lock copy): “Weights affect progress only, not redemption.”
+
+D) REDEEMABLES & ACTIONS — GlassPanel (Glass #2 of 2; full width)
+Title: “Redeemable Amounts”
+Tiles (large numerals):
+  • Redeemable Purchase SC (WSC): {{redeemable_wsc}}
+  • Redeemable Bonus SC: {{redeemable_bonus_sc}}
+Buttons:
+  [Withdraw to Wallet] → Drawer #drawer-withdraw
+  [Convert to WSC]     → Modal #modal-convert (UI only)
+  [View Transactions]  → scrollIntoView(#section-transactions)
+State banners (UI-only visuals):
+  • Warning if KYC incomplete → “Verify to withdraw” (opens Drawer #drawer-kyc)
+  • Info if daily limit reached → “See limits” (opens Modal #modal-terms#limits)
+
+E) QUICK ACTIONS STRIP — Border-only row (no card)
+Four compact icon actions:
+  • “Buy Packages” → Drawer #drawer-deposit
+  • “Apply Promo Code” → Modal #modal-promo
+  • “VIP Snapshot” → tooltip: “This month wagered {{monthly_wagered}} • VIP +{{vip_progress_pct}}%”
+  • “Jackpot Contribution” → inline: “You’ve contributed {{jackpot_contrib}}”
+
+F) TRANSACTION HISTORY — SoftPanel (full width)  [id="section-transactions"]
+Header: “Transactions”
+Filters (compact, inline): Type (All/Deposit/Withdraw/Bonus/Wager/Adjustment), Date Range, Status
+DataTable (compact rows, Dribbble-style density):
+  • Row height: 48px
+  • Left icon per Type (card/crypto/bonus/wager/adjustment)
+  • Columns: Date/Time | Type+Icon | Amount | Balance (SC/GC/BSC/WSC) | Status Chip | Ref
+  • Status chips: success=green, pending=yellow, failed=red (soft glow)
+Buttons: [Export CSV] (ghost) • [Clear Filters]
+Empty state: friendly message + CTA “Make a deposit” → Drawer #drawer-deposit
+
+G) EDUCATION & POLICY — Border-only two-column text
+Left: “Understanding Playthrough” (short bullets)
+Right: “Tips to clear faster” (slots count 100%, etc.)
+Re-use tooltips below.
+
+H) SECURITY STRIP — SoftPanel (narrow)
+KYC status pill (Not verified / In review / Verified) + buttons:
+  [Start/Continue KYC] → Drawer #drawer-kyc
+  [Manage Payment Methods] → Drawer #drawer-payments
+
+========================
+DRAWERS & MODALS (UI ONLY)
+========================
+
+#drawer-deposit — Right slide (merge of Nioplay + Dribbble “You will receive”)
+Top: Package selector (tiles): mock amounts, include “Best Value” tag. Selecting a tile highlights it.
+Summary SoftPanel (NOT glass) — EXACT COPY:
+  Title: “You will receive”
+  Rows (large numerals):
+    • Gold Coins (GC): {{pkg_gc}}   [badge: “for fun play”]
+    • Sweepstakes Coins (SC): {{pkg_sc}}
+    • Bonus SC (BSC): +{{pkg_bsc}}  [badge: “promo”]
+  Fee note (muted): “We cover payment fees.”
+  Mini grid (disabled inputs, UI only):
+    • Currency: USDT ▼   • Network: ETH ▼   • Your Address: 0x••• (copy icon, no logic)
+  Divider
+  Payment Method tiles (toggle highlight; fields stay disabled):
+    [ Crypto ]   [ Card ]
+  Compact warning row (icon): “All crypto deposits are UI mocks in staging.”
+Primary CTA — NeoButton orange (border-trail):
+  [Confirm transfer] → close drawer + toast “Deposit initiated (UI mock)”
+Secondary link: “Change package” → keeps drawer open; focuses package grid.
+
+#drawer-withdraw — Right slide
+Summary: “Withdrawable SC (WSC): {{wsc}} • Daily limit {{withdraw_limit}} • Pending {{pending_withdrawals}}”
+Form: Amount input, Method select, PIN input (masked)
+CTA: [Submit Request] → toast “Request queued — UI mock”
+Link: “View history” → scrollIntoView(#section-transactions)
+
+#drawer-kyc — Right slide
+Steps: ID • Address • Selfie (badges with states)
+CTA: [Start Verification] → toast “KYC started — UI mock”
+
+#drawer-payments — Right slide
+Cards on file (masked) with [Add Method] (dummy modal)
+Note: “Payment methods are stored for convenience only in this mock.”
+
+#modal-convert
+Copy: “Convert eligible Bonus SC to WSC after playthrough clears. This is a visual mock only.”
+CTA: [OK]
+
+#modal-promo
+Input: “Have a code?” [Apply] (dummy success/error toasts)
+List: active promo balances with timers + SAME ProgressBar component
+
+#modal-terms
+Scrollable policy text placeholders with anchors:
+  • #bonus-terms — contribution weights table (repeat the 100/75/25/10 card)
+  • #limits — daily withdrawal limits + processing notes
+Close button only.
+
+========================
+TOOLTIP MICROCOPY (LOCK)
+========================
+• “Playthrough Requirement” — “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 (5×)” — “Promotional coins that require 5× wagering.”
+• “Purchase SC (1×)” — “Coins you bought; requires 1× wagering.”
+• Note — “Weights affect progress only, not redemption.”
+
+========================
+PLACEHOLDER DATA (BIND)
+========================
+{
+  "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",
+  "withdraw_limit": "500.00",
+  "pending_withdrawals": "0.00",
+  "pkg_gc": "1100",
+  "pkg_sc": "110",
+  "pkg_bsc": "110"
+}
+
+========================
+COMPONENT / ID MAP
+========================
+#btn-deposit (#drawer-deposit) • #btn-withdraw (#drawer-withdraw)
+#card-purchase • #card-bonus • #card-wsc • #card-gc
+#bar-purchase • #bar-bonus
+#redeemable-wsc • #redeemable-bonus
+#quick-actions • #section-transactions
+#drawer-deposit • #drawer-withdraw • #drawer-kyc • #drawer-payments
+#modal-convert • #modal-promo • #modal-terms
+
+QA CHECKS
+• Above-the-fold uses ≤2 GlassPanels; rest are SoftPanels or border-only.
+• Buttons share the same pill shape + seamless border-trail animation.
+• Progress bars share one component across wallet & promos.
+• Copy and tooltips match exactly; icons are thin-line with soft glow.
+• No logic implemented; all numbers static placeholders; all CTAs open drawers/modals or scroll within the page.
+
+DELIVERABLE
+One responsive Wallet page matching this spec, ready for later data-binding. No external pages or routes.
+END.