<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>The Kinetic Vault - Withdraw</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "on-secondary-fixed": "#580078",
                        "outline-variant": "#45484f",
                        "primary": "#72dcff",
                        "secondary-fixed": "#f2c1ff",
                        "on-primary-fixed": "#002c38",
                        "error-dim": "#d7383b",
                        "on-tertiary-fixed": "#00472d",
                        "secondary": "#dd8bfb",
                        "surface-container-low": "#10131a",
                        "tertiary-fixed-dim": "#00efa0",
                        "on-secondary-container": "#f1bfff",
                        "inverse-surface": "#f9f9ff",
                        "outline": "#73757d",
                        "surface-bright": "#282c36",
                        "surface": "#0b0e14",
                        "on-error": "#490006",
                        "on-secondary-fixed-variant": "#792c97",
                        "background": "#0b0e14",
                        "secondary-container": "#6e208c",
                        "primary-dim": "#00c3ed",
                        "on-tertiary-fixed-variant": "#006742",
                        "tertiary": "#afffd1",
                        "surface-dim": "#0b0e14",
                        "on-background": "#ecedf6",
                        "on-tertiary": "#006642",
                        "on-tertiary-container": "#005c3b",
                        "surface-container-high": "#1c2028",
                        "on-primary-fixed-variant": "#004c5e",
                        "tertiary-dim": "#00efa0",
                        "on-surface": "#ecedf6",
                        "surface-container-highest": "#22262f",
                        "on-surface-variant": "#a9abb3",
                        "surface-tint": "#72dcff",
                        "inverse-on-surface": "#52555c",
                        "on-primary-container": "#004253",
                        "surface-container-lowest": "#000000",
                        "inverse-primary": "#00687f",
                        "primary-container": "#00d2ff",
                        "primary-fixed": "#00d2ff",
                        "tertiary-fixed": "#00ffab",
                        "tertiary-container": "#00ffab",
                        "error-container": "#9f0519",
                        "secondary-fixed-dim": "#ebadff",
                        "on-error-container": "#ffa8a3",
                        "surface-container": "#161a21",
                        "primary-fixed-dim": "#00c3ed",
                        "on-secondary": "#4c0068",
                        "secondary-dim": "#ce7eec",
                        "surface-variant": "#22262f",
                        "error": "#ff716c",
                        "on-primary": "#004c5e"
                    },
                    fontFamily: {
                        "headline": ["Space Grotesk"],
                        "body": ["Manrope"],
                        "label": ["Manrope"]
                    },
                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-panel {
            background: rgba(40, 44, 54, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-background font-body min-h-screen">
<!-- Background UI Mockup (Simulating the Dashboard behind the modal) -->
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 w-full bg-[#282c36]/40 backdrop-blur-xl shadow-[0_32px_64px_-15px_rgba(114,220,255,0.06)]">
<div class="text-[#72dcff] font-['Space_Grotesk'] font-black tracking-tight">The Kinetic Vault</div>
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-on-surface-variant">search</span>
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden">
<img alt="User Profile" data-alt="Abstract digital user avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfG29jWuVFA3FmcjV2VjJQMfdoXUZsgAoHuGoiML-yDi-UOtdh4uDx9tuTvaBiPbNANr8ZKlsnplL3se3oEpbzn1cGzqxYz8RX75r_QKaJxWUwxBI4ctbL3uCHyuyfc0pideVjfu9tiCh4KSDPqktP7JOfhg2tCR-3vsKABYKdVuHM-9_Ipm1c2TBzP88o4fOG0TAdiuufOnJSW-2wBeOVu9Gc3XKFGDwZtSrCo6M6PkfOW4iELgX22l_zN-MF-m9D6BPominfK0g"/>
</div>
</div>
</header>
<main class="pt-20 px-6 space-y-8 opacity-40 select-none pointer-events-none">
<section>
<p class="font-headline text-on-surface-variant text-sm tracking-widest uppercase">Portfolio Value</p>
<h1 class="font-headline text-6xl font-bold tracking-tighter text-on-surface">$124,592.00</h1>
</section>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
<span class="text-on-surface-variant text-xs">BTC / USDT</span>
<span class="text-2xl font-headline font-bold text-tertiary">+4.28%</span>
</div>
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
<span class="text-on-surface-variant text-xs">ETH / USDT</span>
<span class="text-2xl font-headline font-bold text-error">-1.12%</span>
</div>
</div>
</main>
<!-- Withdraw Modal Overlay -->
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-md p-4">
<!-- Modal Card -->
<div class="glass-panel w-full max-w-md rounded-[2rem] p-8 shadow-[0_32px_64px_-15px_rgba(114,220,255,0.1)] border border-outline-variant/15 flex flex-col gap-8">
<!-- Header Section -->
<div class="space-y-2">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
</div>
<h2 class="font-headline text-2xl font-bold tracking-tight text-on-surface">提现 (Withdraw)</h2>
</div>
<p class="text-on-surface-variant text-sm">Securely transfer your assets to an external wallet address.</p>
</div>
<!-- Form Fields -->
<div class="space-y-5">
<!-- Amount Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Withdrawal Amount</label>
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
<span class="text-primary text-sm font-bold">USDT</span>
</div>
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 pl-16 pr-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal amount (USDT)" type="number"/>
</div>
</div>
<!-- Address Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Destination Address</label>
<div class="relative group">
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal address" type="text"/>
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-on-surface-variant text-lg">qr_code_scanner</span>
</div>
</div>
</div>
<!-- Contact Field -->
<div class="space-y-2">
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Contact Info</label>
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Contact info (optional)" type="text"/>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col gap-3 pt-2">
<button class="w-full bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-headline font-bold py-4 rounded-2xl shadow-[0_0_20px_rgba(114,220,255,0.3)] hover:opacity-90 active:scale-[0.98] transition-all">
                    确认 (Confirm)
                </button>
<button class="w-full border border-outline-variant/30 text-on-surface-variant font-headline font-bold py-4 rounded-2xl hover:bg-surface-variant/20 active:scale-[0.98] transition-all">
                    取消 (Cancel)
                </button>
</div>
<!-- Security Footer -->
<div class="flex items-center justify-center gap-2 opacity-50">
<span class="material-symbols-outlined text-[14px]">verified_user</span>
<span class="text-[10px] font-label uppercase tracking-widest">End-to-End Encrypted Transaction</span>
</div>
</div>
</div>
<!-- Bottom Nav Bar (Supressed but defined in shell) -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-[#10131a]/80 backdrop-blur-lg rounded-t-[2rem] border-t border-[#45484f]/15 opacity-30 select-none pointer-events-none">
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">home</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">insert_chart</span>
</div>
<div class="flex flex-col items-center justify-center bg-[#72dcff]/10 text-[#72dcff] rounded-2xl p-3 shadow-[0_0_15px_rgba(114,220,255,0.3)]">
<span class="material-symbols-outlined">swap_horiz</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">account_balance_wallet</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
<span class="material-symbols-outlined">person</span>
</div>
</nav>
</body></html>