<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com https://api.ipify.org http: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' http: https:; style-src 'self' 'unsafe-inline' http: https:; media-src *;">
    <meta name="theme-color" content="#0B0F19">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Segyric VPN & Privacy Protection</title>
    <style>
        {!! file_get_contents(resource_path('css/app.css')) !!}
    </style>
</head>
<body>
    <div class="mobile-shell">
        <!-- 1. ANIMATED NATIVE SPLASH SCREEN -->
        <div id="splashScreen" class="splash-screen">
            <div class="splash-logo-ring mb-6">
                <svg class="w-16 h-16 text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
            </div>
            <h1 class="text-3xl font-black text-white tracking-tight mb-2">SEGYRIC VPN</h1>
            <p class="text-xs text-cyan-400 font-bold uppercase tracking-widest mb-8">Full-Device Security Suite • WireGuard Core</p>
            <div class="w-8 h-8 border-3 border-cyan-400 border-t-transparent rounded-full animate-spin"></div>
        </div>

        <!-- 2. MULTI-STEP ONBOARDING CAROUSEL -->
        <div id="onboardingScreen" class="onboarding-screen hide">
            <!-- Slide 1 -->
            <div class="onboarding-slide active">
                <div class="w-24 h-24 rounded-3xl bg-slate-800 flex items-center justify-center shadow-2xl mb-8 mx-auto mt-12">
                    <svg class="w-12 h-12 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                </div>
                <h2 class="text-2xl font-black text-white mb-3">Full-Device Protection</h2>
                <p class="text-xs text-slate-400 px-4">Encrypt all device internet traffic with Next-Gen WireGuard protocol and automatic Kill Switch protection.</p>
            </div>

            <!-- Slide 2 -->
            <div class="onboarding-slide">
                <div class="w-24 h-24 rounded-3xl bg-slate-800 flex items-center justify-center shadow-2xl mb-8 mx-auto mt-12">
                    <svg class="w-12 h-12 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 002 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h1.5a2.5 2.5 0 002.5-2.5V11a2 2 0 012-2h1.055M11 20.055V18a2 2 0 012-2h2.5"/></svg>
                </div>
                <h2 class="text-2xl font-black text-white mb-3">DNS & IPv6 Leak Shield</h2>
                <p class="text-xs text-slate-400 px-4">Prevent DNS and IPv6 queries from exposing your real public IP or network identity.</p>
            </div>

            <!-- Slide 3 -->
            <div class="onboarding-slide">
                <div class="w-24 h-24 rounded-3xl bg-slate-800 flex items-center justify-center shadow-2xl mb-8 mx-auto mt-12">
                    <svg class="w-12 h-12 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </div>
                <h2 class="text-2xl font-black text-white mb-3">Anonymous Device Alias</h2>
                <p class="text-xs text-slate-400 px-4">Hide real device names with rotating anonymous identifiers like Device-A7F2C9.</p>
            </div>

            <!-- Onboarding Dots & Action Buttons -->
            <div class="w-full">
                <div class="flex justify-center gap-2 mb-8">
                    <div class="slide-dot active"></div>
                    <div class="slide-dot"></div>
                    <div class="slide-dot"></div>
                </div>
                <div class="flex gap-3">
                    <button onclick="finishOnboarding()" class="w-1/3 bg-slate-800 text-slate-300 font-bold p-3.5 rounded-2xl text-xs">Skip</button>
                    <button id="nextSlideBtn" onclick="nextOnboardingSlide()" class="w-2/3 bg-slate-800 text-cyan-400 border border-cyan-400 font-extrabold p-3.5 rounded-2xl text-xs">Next Step</button>
                </div>
            </div>
        </div>

        <!-- 3. MANDATORY AUTHENTICATION GATE SCREEN (LOCK UNTIL LOGGED IN) -->
        <div id="authGateScreen" class="auth-screen-gate hide">
            <div>
                <div class="text-center mt-6 mb-6">
                    <div class="w-16 h-16 rounded-2xl bg-slate-800 border border-cyan-400 mx-auto flex items-center justify-center shadow-xl mb-3">
                        <svg class="w-9 h-9 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    </div>
                    <h2 class="text-2xl font-black text-white">SEGYRIC PRIVACY ACCOUNT</h2>
                    <p class="text-xs text-slate-400 mt-1">Please register or log in to access the VPN & Privacy Suite</p>
                </div>

                <div class="flex bg-slate-900 p-1.5 rounded-2xl border border-slate-800 mb-6">
                    <div id="gateLoginTab" onclick="switchAuthGateTab('login')" class="auth-tab-btn active">Sign In</div>
                    <div id="gateRegisterTab" onclick="switchAuthGateTab('register')" class="auth-tab-btn">Register Free</div>
                </div>

                <form onsubmit="handleGateSubmit(event)" class="space-y-4">
                    <div id="gateNameContainer" style="display:none;">
                        <label class="text-xs text-slate-400 mb-1.5 block font-semibold">Full Name</label>
                        <input type="text" id="gateName" placeholder="Segyric User" class="w-full bg-slate-900 border border-slate-700 text-white rounded-2xl p-3.5 text-xs">
                    </div>
                    <div>
                        <label class="text-xs text-slate-400 mb-1.5 block font-semibold">Email Address</label>
                        <input type="email" id="gateEmail" value="user@segyric.com" required class="w-full bg-slate-900 border border-slate-700 text-white rounded-2xl p-3.5 text-xs">
                    </div>
                    <div>
                        <label class="text-xs text-slate-400 mb-1.5 block font-semibold">Password</label>
                        <input type="password" id="gatePassword" value="password123" required class="w-full bg-slate-900 border border-slate-700 text-white rounded-2xl p-3.5 text-xs">
                    </div>

                    <button id="gateSubmitBtn" type="submit" class="w-full bg-slate-800 border border-cyan-400 text-cyan-400 font-extrabold p-4 rounded-2xl text-xs mt-2">
                        Sign In to Access Segyric Suite
                    </button>
                </form>
            </div>

            <div class="text-center text-xs text-slate-400 mt-6">
                🔒 Secured by Laravel Sanctum Token Authentication
            </div>
        </div>

        <!-- 4. NETWORK OFFLINE ALERT BANNER -->
        <div id="offlineBanner" class="offline-banner">
            ⚠️ Network Offline. Retrying server connection...
        </div>

        <!-- 5. TOP NATIVE HEADER -->
        <header class="mobile-header">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 rounded-xl bg-slate-800 border border-cyan-400 flex items-center justify-center">
                    <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                </div>
                <div>
                    <h1 class="text-base font-extrabold tracking-tight text-white">SEGYRIC VPN</h1>
                    <p class="text-xs text-cyan-400 font-bold uppercase">Privacy Protection Suite</p>
                </div>
            </div>
            <button onclick="handleLogout()" title="Sign Out Account" class="w-9 h-9 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-300">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
            </button>
        </header>

        <!-- 6. MAIN CONTENT SCREEN VIEWS -->
        <main class="mobile-content">

            <!-- TAB 1: SEGYRIC VPN PRIMARY CONNECTION SCREEN -->
            <section id="screen-home" class="screen-view">
                <div class="text-center my-3">
                    <div id="connectionStatusText" class="text-xs font-black tracking-widest text-red-500 uppercase mb-1">VPN DISCONNECTED</div>
                    <div id="connectionDuration" class="text-3xl font-mono font-bold text-white tracking-tight">00:00:00</div>
                    <p id="protectedIpText" class="text-xs text-slate-400 mt-1 font-mono">Your Real IP: Fetching...</p>
                </div>

                <div class="vpn-power-container">
                    <button id="vpnPowerBtn" class="vpn-power-btn disconnected">
                        <div class="ripple-ring"></div>
                        <svg class="w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </button>
                </div>

                <div onclick="openServerSheet()" class="glass-card mb-3 cursor-pointer flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <span id="activeServerFlag" class="text-3xl">🇺🇸</span>
                        <div>
                            <div class="text-xs text-slate-400 font-medium">Location</div>
                            <div id="activeServerName" class="font-bold text-white text-sm">US East (New York)</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span id="activeServerLatency" class="text-xs font-bold text-emerald-400">24 ms</span>
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3 mb-3">
                    <div class="glass-card flex items-center gap-3 p-3.5">
                        <div class="w-8 h-8 rounded-lg bg-slate-800 text-emerald-400 flex items-center justify-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                        </div>
                        <div>
                            <div class="text-xs text-slate-400 uppercase font-semibold">Download</div>
                            <div id="downloadSpeed" class="text-sm font-bold text-white font-mono">0.0 Mbps</div>
                        </div>
                    </div>
                    <div class="glass-card flex items-center gap-3 p-3.5">
                        <div class="w-8 h-8 rounded-lg bg-slate-800 text-cyan-400 flex items-center justify-center">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                        </div>
                        <div>
                            <div class="text-xs text-slate-400 uppercase font-semibold">Upload</div>
                            <div id="uploadSpeed" class="text-sm font-bold text-white font-mono">0.0 Mbps</div>
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <button onclick="testInAppProxy()" class="w-full bg-slate-800 hover:bg-slate-700 text-emerald-300 border border-emerald-500/40 text-xs font-bold p-3 rounded-xl flex justify-center items-center gap-2">
                        <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span>Test In-App Encrypted Tunnel</span>
                    </button>
                    <button onclick="verifyIpOnline()" class="w-full bg-slate-800 hover:bg-slate-700 text-cyan-400 border border-cyan-400/40 text-xs font-semibold p-2.5 rounded-xl flex justify-center items-center gap-2">
                        <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                        <span>Verify External Browser IP on IPLeak.net</span>
                    </button>
                </div>
            </section>

            <!-- TAB 2: SEGYRIC PRIVACY DASHBOARD & CONTROLS -->
            <section id="screen-privacy" class="screen-view" style="display:none;">
                <div class="mb-4">
                    <h2 class="text-lg font-bold text-white">Segyric Privacy</h2>
                    <p class="text-xs text-slate-400">Full-device network security & leak protection status</p>
                </div>

                <!-- SEGYRIC DASHBOARD STATUS GRID -->
                <div class="glass-card mb-4 p-4 space-y-2">
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">VPN Tunnel</span>
                        <span id="dashVpnStatus" class="text-xs font-bold text-red-400">Disconnected ✗</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">Real IP</span>
                        <span id="dashRealIpStatus" class="text-xs font-bold text-amber-400">Unprotected ⚠️</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">VPN IP</span>
                        <span id="dashVpnIp" class="text-xs font-mono text-cyan-400">185.xxx.xxx.xxx</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">DNS Protection</span>
                        <span id="dashDnsStatus" class="text-xs font-bold text-emerald-400">Protected ✓ (Secure DNS)</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">IPv6 Leak Shield</span>
                        <span id="dashIpv6Status" class="text-xs font-bold text-emerald-400">Protected ✓ (Tunneled)</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">Kill Switch</span>
                        <span id="dashKillSwitchStatus" class="text-xs font-bold text-emerald-400">Enabled ✓</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">Tracker & Ad Protection</span>
                        <span id="dashTrackerStatus" class="text-xs font-bold text-emerald-400">Enabled ✓</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">Public Wi-Fi Protection</span>
                        <span id="dashWifiStatus" class="text-xs font-bold text-emerald-400">Enabled ✓</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">Device Name</span>
                        <span id="dashDeviceNameStatus" class="text-xs font-bold text-emerald-400">Hidden ✓</span>
                    </div>
                    <div class="flex justify-between items-center border-b border-slate-800 pb-2">
                        <span class="text-xs text-slate-300 font-semibold">Device Alias</span>
                        <span id="dashDeviceAlias" class="text-xs font-mono text-slate-200">Private Device 1</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-slate-300 font-semibold">Anonymous Device ID</span>
                        <span id="dashAnonId" class="text-xs font-mono text-cyan-400">Device-A7F2C9</span>
                    </div>
                </div>

                <!-- BLOCKED METRICS COUNTER CARD -->
                <div class="glass-card mb-4 p-4">
                    <h4 class="text-xs font-bold text-slate-400 uppercase mb-3">Blocked Network Threats Today</h4>
                    <div class="grid grid-cols-3 gap-2 text-center">
                        <div class="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                            <div id="metricTrackers" class="text-base font-bold text-cyan-400 font-mono">143</div>
                            <div class="text-[10px] text-slate-400">Trackers</div>
                        </div>
                        <div class="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                            <div id="metricAds" class="text-base font-bold text-emerald-400 font-mono">82</div>
                            <div class="text-[10px] text-slate-400">Ads</div>
                        </div>
                        <div class="bg-slate-900 p-2.5 rounded-xl border border-slate-800">
                            <div id="metricMalicious" class="text-base font-bold text-purple-400 font-mono">3</div>
                            <div class="text-[10px] text-slate-400">Malicious</div>
                        </div>
                    </div>
                </div>

                <!-- ANONYMOUS DEVICE ALIAS ROTATION CARD -->
                <div class="glass-card mb-4 p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h4 class="text-xs font-bold text-cyan-400 uppercase">Device Privacy & Anonymous Alias</h4>
                        <span class="text-[10px] bg-cyan-500/20 text-cyan-300 px-2 py-0.5 rounded border border-cyan-500/30">ROTATING</span>
                    </div>
                    <p class="text-xs text-slate-400 mb-3">Segyric servers see only your anonymous device identifier, protecting your physical hardware identity.</p>

                    <div class="space-y-3">
                        <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                            <span>Hide real device name from Segyric servers</span>
                            <input type="checkbox" id="checkHideDevice" onchange="togglePrivacySetting('hide_device_name')" class="accent-cyan-400 w-4 h-4">
                        </label>
                        <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                            <span>Rotate anonymous device identifier</span>
                            <input type="checkbox" id="checkRotateId" onchange="togglePrivacySetting('rotate_device_id')" class="accent-cyan-400 w-4 h-4">
                        </label>

                        <div class="pt-2 flex gap-2">
                            <input type="text" id="deviceAliasInput" onchange="updateDeviceAlias(this.value)" value="Private Device 1" placeholder="Friendly Private Alias" class="w-full bg-slate-900 border border-slate-700 text-white text-xs rounded-xl p-2.5">
                            <button onclick="rotateAnonymousDeviceId()" class="bg-slate-800 text-cyan-400 border border-cyan-400 font-bold px-3 py-2.5 rounded-xl text-xs whitespace-nowrap">Rotate ID</button>
                        </div>
                    </div>
                </div>

                <!-- PRIVACY PROTECTION CONTROLS CARD -->
                <div class="glass-card mb-4 p-4 space-y-3">
                    <h4 class="text-xs font-bold text-slate-400 uppercase mb-1">Network Security Controls</h4>
                    
                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>Kill Switch: Block internet if VPN disconnects</span>
                        <input type="checkbox" id="checkKillSwitch" onchange="togglePrivacySetting('kill_switch')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>DNS Leak Protection (Route DNS through tunnel)</span>
                        <input type="checkbox" id="checkDns" onchange="togglePrivacySetting('dns_protection')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>IPv6 Leak Shield (Tunnel / Block IPv6 leaks)</span>
                        <input type="checkbox" id="checkIpv6" onchange="togglePrivacySetting('ipv6_protection')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>WebRTC Leak Shield (Block WebRTC leaks)</span>
                        <input type="checkbox" id="checkWebRtc" onchange="togglePrivacySetting('webrtc_protection')" class="accent-cyan-400 w-4 h-4">
                    </label>
                </div>

                <!-- AD & TRACKER BLOCKING CATEGORIES CARD -->
                <div class="glass-card mb-4 p-4 space-y-3">
                    <h4 class="text-xs font-bold text-slate-400 uppercase mb-1">Privacy & Ad Filtering</h4>
                    
                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>Block known trackers</span>
                        <input type="checkbox" id="checkTrackers" onchange="togglePrivacySetting('block_trackers')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>Block advertising domains</span>
                        <input type="checkbox" id="checkAds" onchange="togglePrivacySetting('block_ads')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>Block malicious domains</span>
                        <input type="checkbox" id="checkMalicious" onchange="togglePrivacySetting('block_malicious')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>Block phishing domains</span>
                        <input type="checkbox" id="checkPhishing" onchange="togglePrivacySetting('block_phishing')" class="accent-cyan-400 w-4 h-4">
                    </label>
                </div>

                <!-- PUBLIC WI-FI AUTO PROTECTION CARD -->
                <div class="glass-card mb-4 p-4 space-y-3">
                    <h4 class="text-xs font-bold text-slate-400 uppercase mb-1">Public Wi-Fi Protection</h4>
                    
                    <label class="flex items-center justify-between text-xs text-slate-200 cursor-pointer">
                        <span>Auto-connect VPN on public Wi-Fi</span>
                        <input type="checkbox" id="checkWifiAuto" onchange="togglePrivacySetting('wifi_auto_connect')" class="accent-cyan-400 w-4 h-4">
                    </label>

                    <div class="bg-slate-900 p-3 rounded-xl border border-slate-800 text-[11px] text-slate-400 space-y-1">
                        <div class="flex justify-between"><span>Location Privacy:</span><span class="text-emerald-400 font-bold">Precise GPS Not Requested</span></div>
                        <div class="flex justify-between"><span>Background Access:</span><span class="text-slate-300 font-bold">Disabled</span></div>
                    </div>
                </div>
            </section>

            <!-- TAB 3: SERVERS -->
            <section id="screen-servers" class="screen-view" style="display:none;">
                <div class="mb-4">
                    <h2 class="text-lg font-bold text-white">25+ Global Unlocked Servers</h2>
                    <p class="text-xs text-slate-400">High-speed real server locations with zero subscription fees</p>
                </div>
                <div id="serversList"></div>
            </section>

            <!-- TAB 4: ACTIVITY -->
            <section id="screen-activity" class="screen-view" style="display:none;">
                <div class="mb-4">
                    <h2 class="text-lg font-bold text-white">Connection History</h2>
                    <p class="text-xs text-slate-400">Encrypted session duration and bandwidth logs</p>
                </div>
                <div id="historyList"></div>
            </section>

            <!-- TAB 5: PROFILE -->
            <section id="screen-profile" class="screen-view" style="display:none;">
                <div class="glass-card mb-4 text-center p-5">
                    <div class="w-16 h-16 rounded-full bg-slate-800 border border-cyan-400 mx-auto flex items-center justify-center text-xl font-bold text-white mb-2">
                        SU
                    </div>
                    <h3 id="profileName" class="font-bold text-white text-base">Segyric User</h3>
                    <p id="profileEmail" class="text-xs text-slate-400 mb-3">user@segyric.com</p>
                    <span class="bg-slate-800 text-emerald-300 text-xs px-3 py-1 rounded-full border border-emerald-500/30 font-bold">UNLIMITED ACCESS</span>
                </div>

                <div class="glass-card mb-4">
                    <div class="flex justify-between items-center mb-2">
                        <h4 class="text-xs font-bold text-cyan-400 uppercase">Device Identity Spoofing</h4>
                        <span class="text-[10px] bg-cyan-500/20 text-cyan-300 px-2 py-0.5 rounded border border-cyan-500/30">ACTIVE</span>
                    </div>
                    <p class="text-xs text-slate-400 mb-3">Change how your device identifies itself over the network.</p>

                    <div class="grid grid-cols-2 gap-2 mb-3">
                        <button onclick="selectDevicePreset('iPhone 17 Pro Max')" class="bg-slate-800 hover:bg-slate-700 text-white text-xs p-2 rounded-xl border border-slate-700 text-left truncate">📱 iPhone 17 Pro Max</button>
                        <button onclick="selectDevicePreset('Samsung Galaxy S26 Ultra')" class="bg-slate-800 hover:bg-slate-700 text-white text-xs p-2 rounded-xl border border-slate-700 text-left truncate">📱 Galaxy S26 Ultra</button>
                        <button onclick="selectDevicePreset('Google Pixel 10 Pro')" class="bg-slate-800 hover:bg-slate-700 text-white text-xs p-2 rounded-xl border border-slate-700 text-left truncate">📱 Pixel 10 Pro</button>
                        <button onclick="selectDevicePreset('Gaming PC XXGFH')" class="bg-slate-800 hover:bg-slate-700 text-white text-xs p-2 rounded-xl border border-slate-700 text-left truncate">💻 Gaming PC XXGFH</button>
                    </div>

                    <div class="flex gap-2">
                        <input type="text" id="customDeviceInput" value="iPhone 17 Pro Max" placeholder="e.g. iPhone 17 Pro, PCC XXGFH" class="w-full bg-slate-900 border border-slate-700 text-white text-xs rounded-xl p-2.5">
                        <button onclick="saveCustomDeviceName()" class="bg-slate-800 text-cyan-400 border border-cyan-400 font-bold px-4 py-2.5 rounded-xl text-xs whitespace-nowrap">Save</button>
                    </div>
                </div>

                <div class="glass-card mb-4">
                    <h4 class="text-xs font-bold text-slate-400 uppercase mb-3">Native Device Capabilities</h4>
                    <div class="space-y-2">
                        <button onclick="testInAppProxy()" class="w-full bg-slate-800 text-emerald-300 border border-emerald-500/40 text-xs font-bold p-3 rounded-xl flex justify-between items-center">
                            <span>Test In-App Encrypted Tunnel</span>
                            <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </button>
                        <button onclick="copyIpAddress()" class="w-full bg-slate-800 text-slate-200 text-xs font-semibold p-3 rounded-xl flex justify-between items-center border border-slate-700">
                            <span>Copy Current IP Address</span>
                            <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        </button>
                    </div>
                </div>

                <button onclick="handleLogout()" class="w-full bg-slate-900 text-red-400 border border-red-500/30 font-bold p-3 rounded-xl text-xs flex items-center justify-center gap-2">
                    <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                    <span>Sign Out & Lock App</span>
                </button>
            </section>

        </main>

        <!-- 7. SERVER PICKER BOTTOM SHEET -->
        <div id="serverSheetBackdrop" class="bottom-sheet-backdrop">
            <div class="bottom-sheet">
                <div class="w-10 h-1 bg-slate-700 rounded-full mx-auto mb-4"></div>
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-white text-base">Select VPN Location (25+ Available)</h3>
                    <button onclick="closeServerSheet()" class="text-slate-400 text-xs font-bold hover:text-white">Done</button>
                </div>
                <div id="sheetServersList" class="overflow-y-auto max-h-[60vh]"></div>
            </div>
        </div>

        <!-- 8. BOTTOM NAVIGATION BAR -->
        <nav class="mobile-bottom-nav">
            <div class="nav-item active" data-tab="home">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                <span>Home</span>
            </div>
            <div class="nav-item" data-tab="privacy">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                <span>Privacy</span>
            </div>
            <div class="nav-item" data-tab="servers">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h1.5a2.5 2.5 0 002.5-2.5V11a2 2 0 012-2h1.055M11 20.055V18a2 2 0 012-2h2.5"/></svg>
                <span>Servers</span>
            </div>
            <div class="nav-item" data-tab="activity">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                <span>Activity</span>
            </div>
            <div class="nav-item" data-tab="profile">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                <span>Profile</span>
            </div>
        </nav>
    </div>

    <!-- External Script File to comply with Content Security Policy -->
    <script src="/js/app.js"></script>
</body>
</html>
