<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CyberPulse Neo Profile</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: {
                        "error": "#ff716c",
                        "secondary-fixed-dim": "#ebadff",
                        "secondary-fixed": "#f2c1ff",
                        "on-error": "#490006",
                        "on-secondary-fixed": "#580078",
                        "on-tertiary": "#006642",
                        "tertiary-fixed-dim": "#00efa0",
                        "tertiary-container": "#00ffab",
                        "on-surface": "#ecedf6",
                        "outline": "#73757d",
                        "primary": "#72dcff",
                        "on-tertiary-fixed-variant": "#006742",
                        "on-primary-fixed-variant": "#004c5e",
                        "inverse-primary": "#00687f",
                        "surface-bright": "#282c36",
                        "tertiary-dim": "#00efa0",
                        "surface-dim": "#0b0e14",
                        "on-secondary": "#4c0068",
                        "surface-container-low": "#10131a",
                        "surface-variant": "#22262f",
                        "surface-tint": "#72dcff",
                        "surface-container-lowest": "#000000",
                        "primary-fixed-dim": "#00c3ed",
                        "on-tertiary-fixed": "#00472d",
                        "secondary": "#dd8bfb",
                        "primary-container": "#00d2ff",
                        "surface-container-highest": "#22262f",
                        "on-secondary-fixed-variant": "#792c97",
                        "on-error-container": "#ffa8a3",
                        "outline-variant": "#45484f",
                        "surface": "#0b0e14",
                        "on-surface-variant": "#a9abb3",
                        "primary-fixed": "#00d2ff",
                        "tertiary": "#afffd1",
                        "surface-container": "#161a21",
                        "on-background": "#ecedf6",
                        "primary-dim": "#00c3ed",
                        "tertiary-fixed": "#00ffab",
                        "error-container": "#9f0519",
                        "secondary-dim": "#ce7eec",
                        "surface-container-high": "#1c2028",
                        "inverse-on-surface": "#52555c",
                        "error-dim": "#d7383b",
                        "on-primary-fixed": "#002c38",
                        "inverse-surface": "#f9f9ff",
                        "secondary-container": "#6e208c",
                        "on-primary-container": "#004253",
                        "on-primary": "#004c5e",
                        "background": "#0b0e14",
                        "on-secondary-container": "#f1bfff",
                        "on-tertiary-container": "#005c3b"
                    },
                    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-card {
            background: rgba(34, 38, 47, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(115, 117, 125, 0.1);
        }
        .neon-glow-primary {
            box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
        }
        .neon-glow-secondary {
            box-shadow: 0 0 15px rgba(221, 139, 251, 0.3);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-surface font-body selection:bg-primary selection:text-on-primary">
<!-- Top App Bar -->
<header class="fixed top-0 w-full z-50 bg-[#0b0e14]/80 backdrop-blur-xl border-b border-[#45484f]/15 shadow-[0_8px_32px_rgba(114,220,255,0.06)] flex items-center justify-between px-6 h-16 w-full">
<div class="flex items-center gap-4">
<span class="material-symbols-outlined text-[#72dcff] active:scale-95 duration-200 cursor-pointer">arrow_back</span>
<h1 class="font-['Space_Grotesk'] uppercase tracking-widest text-sm text-[#72dcff] font-bold">SECURITY VAULT</h1>
</div>
<span class="material-symbols-outlined text-[#a9abb3] hover:text-[#dd8bfb] transition-colors cursor-pointer active:scale-95 duration-200">settings_heart</span>
</header>
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto space-y-8">
<!-- Hero Profile Section -->
<section class="relative flex flex-col items-center py-8">
<div class="relative">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-primary via-secondary to-tertiary blur opacity-40 animate-pulse"></div>
<div class="relative p-1 rounded-full bg-surface-container-high border-2 border-primary/30">
<img alt="User avatar" class="w-24 h-24 rounded-full" data-alt="Cybernetic male avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPG8f6cGBm3xqBjBuY5sw1RCGSiKxDN-IA5wDo1H-30SIcg3e_FI82VsXAPOCouYTDqCWtM5El4DHJQYERfUQ1BtK8NTS6d6rlWVoqc79DhsJfWVk2a2nyVz8jWrV04eJOqjk0FTs8u-c1GkLlxIEdvGENmCPmBElvN8A8uH6w1XAK-YslVWz0wLFwjwYRcWIiCr4Jat5I0_O2aLNukB431cRZWTEk79BvSuC2XMILEhpi11ch1744m5x49WQR-tQn4_zPtdZb2N8"/>
</div>
<div class="absolute bottom-0 right-0 bg-tertiary text-on-tertiary rounded-full p-1 border-2 border-background shadow-lg">
<span class="material-symbols-outlined text-xs font-bold" style="font-variation-settings: 'FILL' 1;">verified</span>
</div>
</div>
<div class="mt-6 text-center">
<h2 class="font-headline text-3xl font-bold tracking-tight text-on-surface">sion321</h2>
<div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-[0.2em] font-headline">
                    Normal User
                </div>
</div>
</section>
<!-- Stats Bento Grid -->
<section class="grid grid-cols-2 gap-4">
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Level Status</span>
<span class="text-xl font-bold font-headline text-primary">TIER_01</span>
</div>
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Node Uptime</span>
<span class="text-xl font-bold font-headline text-secondary">99.8%</span>
</div>
</section>
<!-- List Content Section -->
<section class="space-y-3">
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">fingerprint</span>
</div>
<span class="font-headline text-lg font-medium">Real-name verification</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary border border-secondary/20 group-hover:border-secondary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">security</span>
</div>
<span class="font-headline text-lg font-medium">Security settings</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-tertiary/10 flex items-center justify-center text-tertiary border border-tertiary/20 group-hover:border-tertiary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
</div>
<span class="font-headline text-lg font-medium">Message notification</span>
</div>
<div class="flex items-center gap-2">
<span class="bg-error text-on-error text-[10px] font-bold px-2 py-0.5 rounded-full">3</span>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">manufacturing</span>
</div>
<span class="font-headline text-lg font-medium">System settings</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-on-surface-variant/10 flex items-center justify-center text-on-surface-variant border border-on-surface-variant/20 group-hover:border-on-surface-variant/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">info</span>
</div>
<span class="font-headline text-lg font-medium">About us</span>
</div>
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
</div>
</section>
<!-- Exit Action -->
<section class="pt-8">
<button class="w-full h-16 rounded-2xl bg-gradient-to-r from-error-dim to-error text-on-error font-headline font-black text-lg uppercase tracking-widest shadow-[0_12px_24px_-8px_rgba(255,113,108,0.4)] active:scale-95 transition-transform flex items-center justify-center gap-3">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">logout</span>
                Logout Terminal
            </button>
<p class="text-center mt-6 text-on-surface-variant text-[10px] font-headline uppercase tracking-[0.3em] opacity-40">System Build v2.4.9-Neo</p>
</section>
</main>
<!-- Bottom Navigation Bar -->
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-3 bg-[#10131a]/90 backdrop-blur-2xl border-t border-[#45484f]/10 shadow-[0_-10px_40px_rgba(0,0,0,0.5)] z-50 rounded-t-[2rem]">
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">account_balance_wallet</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Vault</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">swap_calls</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Trade</span>
</div>
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
<span class="material-symbols-outlined">insights</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Analysis</span>
</div>
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-2xl px-5 py-2 active:translate-y-1 transition-all">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person_2</span>
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Profile</span>
</div>
</nav>
</body></html>