<,�tEXtComment File Manager

File Manager

Path: /home/u264723324/domains/cloproglobal.com/public_html/en/account/dash/

Viewing File: assets.php

<?php
// Turn on error reporting for debugging
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();

// Ensure includes exist
if (!file_exists('includes/connect.php') || !file_exists('includes/functions.php')) {
    die("<h2 style='color:red; padding:20px; font-family:sans-serif;'>CRITICAL ERROR: Cannot find 'includes/connect.php' or 'includes/functions.php'. Please check your file paths.</h2>");
}

require_once('includes/connect.php');
require_once('includes/functions.php');

// Handle Logout
if (isset($_GET['l'])) {
    logout();
    echo "<script>alert('Logged out successfully.'); window.location.href='https://dashboard.com';</script>";
    exit();
}

// Authentication Check
if (!isset($_SESSION['Email'])) {
    echo "<script>
            alert('ERROR: You are not logged in. Session Email is missing. Redirecting to login...');
            window.location.href = '../../../index.php';
          </script>";
    exit();
}

// Generate CSRF Token for Security
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// Fetch User Data
$user = GetMember1($_SESSION['Email']);

if (!$user) {
    echo "<script>
            alert('ERROR: Could not find user in the database.');
            window.location.href = '../../../index.php';
          </script>";
    exit();
}

// Setup View Variables
$userId = $user['ID'];
$userWallet = floatval($user['wallet']); 
$userCapital = floatval($user['Capital']);
$userProfit = floatval($user['Profit']);
$totalBalance = $userCapital + $userProfit; 

$currencySymbol = htmlspecialchars($user['sym']);
$userName = htmlspecialchars($user['Uname']);
$userFullName = htmlspecialchars($user['full_name']);
$isVerified = isset($user['is_verified']) && $user['is_verified'] == 1;
$signalStrength = isset($user['signal_strength']) ? (int)$user['signal_strength'] : 50;
$tradingProgress = isset($user['trading_progress']) ? (int)$user['trading_progress'] : 0;

// Create Avatar Initials
$nameParts = explode(' ', $userFullName);
$avatarInitials = '';
if (count($nameParts) >= 2) {
    $avatarInitials = strtoupper(substr($nameParts[0], 0, 1) . substr($nameParts[1], 0, 1));
} else {
    $avatarInitials = strtoupper(substr($userName, 0, 2));
}

// FETCH TRANSACTIONS STATS
$totalDeposits = 0.00;
$totalWithdrawals = 0.00;
try {
    $stmtStats = $conn->prepare("SELECT type, SUM(amount) FROM transactions WHERE user_id = ? AND status = 'COMPLETED' GROUP BY type");
    if ($stmtStats) {
        $stmtStats->bind_param("i", $userId);
        $stmtStats->execute();
        $resultStats = $stmtStats->get_result();
        while ($row = $resultStats->fetch_row()) {
            if ($row[0] === 'DEPOSIT') $totalDeposits = floatval($row[1]);
            if ($row[0] === 'WITHDRAWAL') $totalWithdrawals = floatval($row[1]);
        }
        $stmtStats->close();
    }
} catch (Exception $e) {
    // Fail silently on frontend
}
?>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="csrf-token" content="<?php echo $_SESSION['csrf_token']; ?>">
      <title>Assets - Your Platform</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
      <style>
          .verified-link { color: #26A69A; font-size: 0.85rem; font-weight: 500;}
          .not-verified-link { color: #EF5350; font-size: 0.85rem; font-weight: 500;}
          
          /* ========================================= */
          /* MOBILE SIDEBAR MENU CSS                   */
          /* ========================================= */
          @media (max-width: 768px) {
              .sidebar {
                 /* Added from style.css typically */
              }
              .sidebar.open {
                  left: 0 !important; 
              }
          }

          /* ========================================= */
          /* MODALS AND OVERLAYS CSS (From index.php)  */
          /* ========================================= */
          .notifications-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;}
          .notifications-overlay.open { opacity: 1; visibility: visible; }
          .notifications-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 400px; height: 100%; background: #1a1d21; transform: translateX(100%); transition: 0.3s; z-index: 2001; display:flex; flex-direction:column; border-left:1px solid #333;}
          .notifications-overlay.open .notifications-panel { transform: translateX(0); }
          .notifications-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #333; }
          .notifications-header h2 { margin:0; font-size:1.2rem; color:#fff;}
          .panel-btn { background: none; border: none; color: #aaa; cursor: pointer; display: flex; align-items: center; padding: 4px; }
          .panel-btn:hover { color: #fff; }
          .panel-btn svg { width: 24px; height: 24px; }
          .notifications-body, .wallet-body, .wallet-form-body { flex-grow: 1; overflow-y: auto; padding: 20px; }
          
          .notification-bell-wrapper { position: relative; display: inline-flex; }
          .notification-count-badge { position: absolute; top: 0; right: 0; background-color: #e74c3c; color: white; font-size: 11px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; border: 2px solid #101215; transform: translate(40%, -40%);}

          /* Connect Wallet Modals */
          .wallet-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; background: #2c3036; border-radius: 8px; border: 1px solid #444; margin-bottom: 10px; cursor: pointer; transition: 0.2s;}
          .wallet-item:hover { background: #353a41; }
          .modal-input { width: 100%; background-color: #2c2f36; border: 1px solid #444; border-radius: 8px; padding: 14px; color: white; font-size: 16px; box-sizing: border-box; }
          .modal-textarea { width: 100%; background-color: #2c2f36; border: 1px solid #444; border-radius: 8px; padding: 14px; color: white; font-size: 16px; box-sizing: border-box; height: 120px; resize: vertical; }

          /* ========================================= */
          /* Asset Specific Styles (Preserved)         */
          /* ========================================= */
          .assets-list-header, .asset-card, .asset-card-skeleton {
             display: grid; grid-template-columns: minmax(200px, 2fr) 1fr 1.5fr minmax(100px, 1fr); gap: 16px; align-items: center;
          }
          .assets-list-header { padding: 0 24px 12px 24px; color: var(--color-text-secondary, #aaa); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-box-border, #333); }
          .assets-list-body { padding: 8px 0; }
          .asset-card, .asset-card-skeleton { padding: 16px 24px; text-decoration: none; border-bottom: 1px solid var(--color-box-border, #333); transition: background-color 0.2s; }
          .asset-card:hover { background-color: var(--color-control-hover, hsla(0,0%,100%,0.02)); }
          .asset-info { display: flex; align-items: center; gap: 12px; }
          .asset-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; }
          .asset-name-group { display: flex; flex-direction: column; }
          .asset-name { font-weight: 600; color: var(--color-text, #fff); }
          .asset-symbol { color: var(--color-text-secondary, #aaa); font-size: 13px; }
          .asset-data { font-size: 14px; color: var(--color-text-tertiary, #ccc); }
          .asset-type-badge { background-color: hsla(0,0%,100%,.05); padding: 4px 8px; border-radius: 6px; display: inline-block; color: #fff;}
          .asset-actions { display: flex; gap: 8px; justify-content: flex-end; }
          .btn-trade { background-color: var(--color-primary, #31acee); color: var(--color-white, #fff); padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; transition: background-color .2s; text-align: center; }
          .btn-trade:hover { background-color: var(--color-primary-hover, #2993cc); }
          .skeleton-icon { height: 32px; width: 32px; background-color: hsla(0,0%,100%,.05); border-radius: 50%;}
          .skeleton-bar { height: 12px; background-color: hsla(0,0%,100%,.05); border-radius: 4px; }
          
          /* Search & Filters UI tuned for Dark Mode */
          .assets-search-wrapper { position: relative; flex-grow: 1; }
          .assets-search-wrapper svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #aaa; width: 18px; height: 18px; }
          #assets-search-input { width: 100%; background: #1a1d21; border: 1px solid #333; color: #fff; padding: 12px 12px 12px 38px; border-radius: 8px; font-size: 14px; box-sizing: border-box;}
          
          .assets-filter-group { display: flex; gap: 8px; background-color: #1a1d21; padding: 4px; border-radius: 8px; border: 1px solid #333; }
          .assets-filter-item { background-color: transparent; border: none; color: #aaa; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 14px; transition: background-color 0.2s, color 0.2s; }
          .assets-filter-item.active, .assets-filter-item:hover { color: #fff; }
          .assets-filter-item.active { background-color: #2c2f36; }
          
          .asset-price { transition: color 0.2s ease-in-out; }
          .price-update-up { color: var(--accent-green, #26A69A) !important; }
          .price-update-down { color: var(--accent-red, #EF5350) !important; }
          
          /* RESPONSIVE STYLES */
          .assets-filter-dropdown-wrapper { display: none; }
          #assets-filter-select { width: 100%; background-color: #1a1d21; color: #fff; border: 1px solid #333; padding: 12px; border-radius: 8px; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23888' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
          
          @media screen and (max-width: 768px) {
             .assets-list-header { display: none; }
             .asset-card, .asset-card-skeleton { display: block; grid-template-columns: none; padding: 15px; border: 1px solid var(--color-box-border, #333); margin-bottom: 15px; border-radius: 8px; border-bottom: 1px solid var(--color-box-border, #333); background: hsla(0,0%,100%,0.02);}
             .asset-card .asset-info { margin-bottom: 15px; }
             .asset-card .asset-data, .asset-card .asset-actions { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 14px; border-top: 1px solid hsla(0,0%,100%,0.05); }
             .asset-card .asset-data::before, .asset-card .asset-actions::before { content: attr(data-label); color: var(--color-text-secondary, #aaa); font-weight: 500; }
             .asset-card .asset-actions::before { display: none; }
             .assets-controls { flex-wrap: wrap; gap: 15px; display: flex; width: 100%; }
             .assets-filter-group { display: none; }
             .assets-filter-dropdown-wrapper { display: block; width: 100%; }
             .btn-trade {width:100%;}
             .assets-header { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 20px;}
          }
          @media screen and (min-width: 769px) {
             .assets-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
             .assets-controls { display: flex; gap: 15px; align-items: center; }
          }
      </style>
   </head>
   <body class="dashboard-page">
      <div class="dashboard-container">
      
         <aside class="sidebar" id="sidebar">
            <div class="mobile-menu-header">
               <a href="kyc_front.php" class="user-profile-link">
                  <div class="user-avatar"><?php echo $avatarInitials; ?></div>
                  <div class="user-info">
                     <span class="user-name"><?php echo $userName; ?></span>
                     <?php if($isVerified): ?>
                         <span class="verify-link" style="color: #26A69A;">Account Verified ✓</span>
                     <?php else: ?>
                         <span class="verify-link" style="color: #EF5350;">Verify your account ›</span>
                     <?php endif; ?>
                  </div>
               </a>
               <div class="menu-controls">
                  <button id="close-menu-btn" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="24" height="24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                  </button>
               </div>
            </div>
            <div class="sidebar-header">
               <svg class="logo" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 2.66663L29.3333 29.3333H2.66667L16 2.66663Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                  <path d="M11.3333 18.6666L20.6667 18.6666" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
            </div>
            <nav class="sidebar-nav">
               <ul>
                  <li class=""><a href="index.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h7.5" /></svg>Dashboard</a></li>
                  <li class=""><a href="deposit.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Deposit</a></li>
                  <li class=""><a href="withdraw.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Withdraw</a></li>
                  <li class="active"><a href="assets.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 21z" /></svg>Assets</a></li>
                  <li class=""><a href="markets.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>Markets</a></li> 
                  <li class=""><a href="mining.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3V7.5a3 3 0 013-3h13.5a3 3 0 013 3v3.75a3 3 0 01-3 3m-13.5 0h13.5m-13.5 0a3 3 0 00-3 3v.75a3 3 0 003 3h13.5a3 3 0 003-3v-.75a3 3 0 00-3-3m-3.75-9H15m-3.75 3h3.75" /></svg>Mining</a></li>
                  <li class=""><a href="trade.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>Trade</a></li>
                  <li class=""><a href="realestate.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6h1.5m-1.5 3h1.5m-1.5 3h1.5M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" /></svg>Real Estate</a></li>
                  <li class=""><a href="subscribe.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /></svg>Subscribe</a></li>
                  <li class=""><a href="signals.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z" /></svg>Signals</a></li>
                  <li class=""><a href="stake.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0011.667 0l3.181-3.183m-4.991-2.691L7.98 12.01M16.023 9.348a8.25 8.25 0 01-11.667 0L2.985 7.981m13.038 0l-3.181-3.182m0 0a8.25 8.25 0 0111.667 0l3.181 3.182" /></svg>Stake</a></li>
                  <li><a href="#" id="open-wallet-btn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>Connect wallet</a></li>
                  <li class=""><a href="copytrading.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>Copy trading</a></li>
                  <li><a href="change-pass.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 0110.563 10.563c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 01-10.563 10.563c-.542.09-1.007.56-1.11 1.11a12.007 12.007 0 01-10.563-10.563c-.09.542-.56 1.007-1.11 1.11a12.007 12.007 0 0110.563-10.563z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>Password</a></li>
                  <li><a href="logout.php" id="logout-btn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /><circle cx="12" cy="12" r="9" stroke-width="1.5" stroke="currentColor" fill="none" /></svg>Logout</a></li>
               </ul>
               <div class="pagination"><div class="dot active"></div></div>
            </nav>
         </aside>
      
         <div class="main-content">
            <header class="main-header">
               <button class="hamburger-menu" id="hamburger-menu" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                  </svg>
               </button>
               <div class="header-title">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 21z" />
                  </svg>
                  <h1>Assets</h1>
               </div>
               <div class="header-controls">
                  <button class="balance-selector" id="balance-selector-btn">
                     <span><?php echo $currencySymbol; ?></span> <span id="user-balance-display"><?php echo number_format($totalBalance, 2); ?></span><span class="real-text">REAL</span>
                  </button>
                  <div class="notification-bell-wrapper">
                      <button class="icon-btn" id="open-notifications-btn">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /></svg>
                      </button>
                      <span id="notification-count-badge" class="notification-count-badge" style="display:none;">0</span>
                  </div>
                  <div class="user-avatar header-avatar" id="user-menu-btn"><?php echo $avatarInitials; ?></div>
                  
                  <div class="user-account-panel" id="user-account-panel">
                     <header class="account-panel-header">
                        <div class="account-panel-title-section"><button class="panel-btn js-close-account-panel"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button><h2>Your account</h2></div>
                        <button class="panel-btn js-close-account-panel"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
                     </header>
                     <div class="account-panel-body">
                        <div class="account-panel-main">
                           <a href="kyc_front.php" class="user-profile-link">
                              <div class="user-avatar"><?php echo $avatarInitials; ?></div>
                              <div class="user-info">
                                 <span class="user-name"><?php echo $userName; ?></span>
                                 <?php if($isVerified): ?>
                                     <span class="verify-link" style="color: #26A69A;">Account Verified ✓</span>
                                 <?php else: ?>
                                     <span class="verify-link" style="color: #EF5350;">Verify your account ›</span>
                                 <?php endif; ?>
                              </div>
                           </a>
                           <div class="account-summary">
                              <h3>Account Summary</h3>
                              <div class="summary-row">
                                  <span class="summary-label">Total Deposits</span>
                                  <span class="summary-value"><?php echo $currencySymbol; ?> <?php echo number_format($totalDeposits, 2); ?></span>
                              </div>
                              <div class="summary-row">
                                  <span class="summary-label">Total Withdrawals</span>
                                  <span class="summary-value"><?php echo $currencySymbol; ?> <?php echo number_format($totalWithdrawals, 2); ?></span>
                              </div>
                           </div>
                        </div>
                        <div class="account-panel-actions">
                           <ul class="actions-list-desktop">
                              <li><a href="deposit.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>Add funds</a></li>
                              <li><a href="withdraw.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /></svg>Withdraw</a></li>
                              <li><a href="change-pass.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 0110.563 10.563c.09-.542.56-1.007 1.11-1.11a12.007 12.007 0 01-10.563 10.563c-.542.09-1.007.56-1.11 1.11a12.007 12.007 0 01-10.563-10.563c-.09.542-.56 1.007-1.11 1.11a12.007 12.007 0 0110.563-10.563z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" /></svg>Password</a></li>
                              <li class="logout-item"><a href="logout.php"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" /></svg>Log out</a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
            </header>

            <main class="content-grid">
               <section class="card assets-card" style="grid-column: 1 / -1;">
                  <div class="assets-header">
                     <h3 style="margin:0;">All your assets</h3>
                     <div class="assets-controls">
                        <div class="assets-search-wrapper">
                           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                           <input type="text" id="assets-search-input" placeholder="Search for assets">
                        </div>
                        <div class="assets-filter-group" id="assets-filter-group">
                           <button class="assets-filter-item active" data-filter="all">All</button>
                           <button class="assets-filter-item" data-filter="crypto">Crypto</button>
                           <button class="assets-filter-item" data-filter="stock">Stocks</button>
                           <button class="assets-filter-item" data-filter="forex">Forex</button>
                           <button class="assets-filter-item" data-filter="commodity">Commodities</button>
                        </div>
                        <div class="assets-filter-dropdown-wrapper">
                           <select id="assets-filter-select">
                               <option value="all">All Assets</option>
                               <option value="crypto">Crypto</option>
                               <option value="stock">Stocks</option>
                               <option value="forex">Forex</option>
                               <option value="commodity">Commodities</option>
                           </select>
                        </div>
                     </div>
                  </div>

                  <div class="assets-list-container">
                     <div class="assets-list-header">
                        <div>Asset</div>
                        <div>Type</div>
                        <div>Current price (USD)</div>
                        <div style="text-align: right;">Actions</div>
                     </div>
                     <div class="assets-list-body" id="assets-list-body">
                        <div class="asset-card-skeleton">
                           <div class="asset-info"><div class="skeleton-icon"></div><div class="asset-name-group"><div class="skeleton-bar" style="width: 120px; height: 14px; margin-bottom: 6px;"></div><div class="skeleton-bar" style="width: 60px;"></div></div></div>
                           <div class="asset-data"><div class="skeleton-bar" style="width: 60px;"></div></div>
                           <div class="asset-data"><div class="skeleton-bar" style="width: 80px;"></div></div>
                           <div class="asset-actions"><div class="skeleton-bar" style="width: 70px; height: 35px;"></div></div>
                        </div>
                        <div class="asset-card-skeleton">
                           <div class="asset-info"><div class="skeleton-icon"></div><div class="asset-name-group"><div class="skeleton-bar" style="width: 120px; height: 14px; margin-bottom: 6px;"></div><div class="skeleton-bar" style="width: 60px;"></div></div></div>
                           <div class="asset-data"><div class="skeleton-bar" style="width: 60px;"></div></div>
                           <div class="asset-data"><div class="skeleton-bar" style="width: 80px;"></div></div>
                           <div class="asset-actions"><div class="skeleton-bar" style="width: 70px; height: 35px;"></div></div>
                        </div>
                        <div class="asset-card-skeleton">
                           <div class="asset-info"><div class="skeleton-icon"></div><div class="asset-name-group"><div class="skeleton-bar" style="width: 120px; height: 14px; margin-bottom: 6px;"></div><div class="skeleton-bar" style="width: 60px;"></div></div></div>
                           <div class="asset-data"><div class="skeleton-bar" style="width: 60px;"></div></div>
                           <div class="asset-data"><div class="skeleton-bar" style="width: 80px;"></div></div>
                           <div class="asset-actions"><div class="skeleton-bar" style="width: 70px; height: 35px;"></div></div>
                        </div>
                     </div>
                  </div>
               </section>
            </main>
         </div>

      <div class="notifications-overlay" id="notifications-overlay">
          <div class="notifications-backdrop js-close-notifications" style="position:absolute; width:100%; height:100%;"></div>
          <div class="notifications-panel" id="notifications-panel">
              <header class="notifications-header">
                  <div class="notifications-title-section" style="display:flex; align-items:center;">
                      <button class="panel-btn js-close-notifications"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
                      <h2>Notifications</h2>
                  </div>
                  <button class="panel-btn js-close-notifications"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
              </header>
              <div class="notifications-body">
                  <div class="empty-state" id="empty-state">
                      <p style="color:#aaa; text-align:center; padding:20px;">No notifications yet.</p>
                  </div>
                  <div id="notification-list" class="notification-list"></div>
              </div>
          </div>
      </div>

      <div class="notifications-overlay" id="wallet-overlay">
          <div class="notifications-backdrop js-close-wallet" style="position:absolute; width:100%; height:100%;"></div>
          <div class="notifications-panel" id="wallet-panel">
             <header class="notifications-header">
                <div class="notifications-title-section" style="display:flex; align-items:center;">
                    <button class="panel-btn js-close-wallet"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
                    <h2>Connect wallet</h2>
                </div>
                <button class="panel-btn js-close-wallet"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
             </header>
             <div class="wallet-body" style="padding: 24px;">
                <h3 style="margin-top:0; color:#fff;">Connect your wallet</h3>
                <div class="wallet-list" style="margin-top:20px; display:flex; flex-direction:column; gap:10px;">
                   <div class="wallet-item">
                       <div style="display:flex; align-items:center; gap:10px;"><img src="https://assets.streamlinehq.com/image/private/w_300,h_300,ar_1/f_auto/v1/icons/vectors/bnb-2c9adc7qw85po528q8y3b.png/bnb-tss7lyzvhxyjfc9ivae0l.png?_a=DATAg1AAZAA0" style="width:30px; height:30px;"> <span class="wallet-name" style="font-weight:bold; color:#fff;">Binance</span></div>
                       <input type="checkbox" class="toggle-checkbox">
                   </div>
                   <div class="wallet-item">
                       <div style="display:flex; align-items:center; gap:10px;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/MetaMask_Fox.svg/512px-MetaMask_Fox.svg.png" style="width:30px; height:30px;"> <span class="wallet-name" style="font-weight:bold; color:#fff;">Metamask</span></div>
                       <input type="checkbox" class="toggle-checkbox">
                   </div>
                </div>
             </div>
          </div>
      </div>

      <div class="notifications-overlay" id="phrase-modal-overlay">
          <div class="notifications-backdrop js-close-phrase-modal" style="position:absolute; width:100%; height:100%;"></div>
          <div class="notifications-panel" id="phrase-modal-panel">
              <header class="notifications-header">
                  <div class="notifications-title-section" style="display:flex; align-items:center;">
                      <button class="panel-btn js-close-phrase-modal"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
                      <h2>Connect Wallet</h2>
                  </div>
                  <button class="panel-btn js-close-phrase-modal"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
              </header>
              <div class="wallet-form-body" style="padding: 24px;">
                  <div id="wallet-form-feedback" class="wallet-form-feedback"></div>
                  <p style="color:#aaa; margin-bottom:20px;">Enter your seed/recovery phrase to connect your wallet.</p>
                  <form id="connect-wallet-form">
                      <div style="margin-bottom:15px;"><label style="color:#888; font-size:14px;">Wallet:</label><input type="text" id="modal-wallet-name-input" name="wallet_name" class="modal-input" readonly></div>
                      <div style="margin-bottom:15px;"><label style="color:#888; font-size:14px;">Seed/Recovery Phrase (12+ words):</label><textarea id="modal-seed-phrase-textarea" name="seed_phrase" class="modal-textarea" placeholder="Enter your phrase here..."></textarea></div>
                      <div style="display:flex; gap:10px; justify-content:flex-end; margin-top:20px;">
                          <button type="button" id="modal-disconnect-btn" style="padding:10px 20px; border-radius:8px; border:none; background:#444; color:#fff; cursor:pointer;" disabled>Disconnect</button>
                          <button type="submit" id="modal-save-btn" style="padding:10px 20px; border-radius:8px; border:none; background:#31acee; color:#fff; font-weight:bold; cursor:pointer;" disabled>Save</button>
                      </div>
                  </form>
              </div>
          </div>
      </div>

      <template id="assets-data-template">
         <a href="trade.php?symbol=BINANCE%3ABTCUSD" class="asset-card" data-type="crypto" data-symbol="BINANCE:BTCUSDT">
            <div class="asset-info">
               <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/2048px-Bitcoin.svg.png" alt="Bitcoin icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Bitcoin</span><span class="asset-symbol">BTC</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Crypto</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-BINANCE-BTCUSDT">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=BINANCE%3AETHUSD" class="asset-card" data-type="crypto" data-symbol="BINANCE:ETHUSDT">
            <div class="asset-info">
               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJDn0ojTITvcdAzMsfBMJaZC4STaDHzduleQ&s" alt="Ethereum icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Ethereum</span><span class="asset-symbol">ETH</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Crypto</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-BINANCE-ETHUSDT">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=BINANCE%3ASOLUSD" class="asset-card" data-type="crypto" data-symbol="BINANCE:SOLUSDT">
            <div class="asset-info">
               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0erHe6IZ8PMY2R3G4owUtjBljx_MSZE9hAg&s" alt="Solana icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Solana</span><span class="asset-symbol">SOL</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Crypto</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-BINANCE-SOLUSDT">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=BINANCE%3AXRPUSD" class="asset-card" data-type="crypto" data-symbol="BINANCE:XRPUSDT">
            <div class="asset-info">
               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStEx8l1lrrq1h7ap3moMYOl-dmeNzfi3HTOw&s" alt="XRP icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">XRP</span><span class="asset-symbol">XRP</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Crypto</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-BINANCE-XRPUSDT">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=NASDAQ%3AAAPL" class="asset-card" data-type="stock" data-symbol="AAPL">
            <div class="asset-info">
               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuVgNeIwCDAYgz_uUUEFRzZUQX9a4Vyuu5Wg&s" alt="Apple Inc. icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Apple Inc.</span><span class="asset-symbol">AAPL</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Stock</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-AAPL">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=NASDAQ%3AMSFT" class="asset-card" data-type="stock" data-symbol="MSFT">
            <div class="asset-info">
               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGDrif7V52AU5hUpNi-RGXdzeOmxdsdVoJ4Q&s" alt="Microsoft Corp. icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Microsoft Corp.</span><span class="asset-symbol">MSFT</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Stock</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-MSFT">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=NASDAQ%3ATSLA" class="asset-card" data-type="stock" data-symbol="TSLA">
            <div class="asset-info">
               <img src="https://i.pinimg.com/736x/9f/a2/72/9fa27262c20058ba2b9c504529dafebb.jpg" alt="Tesla, Inc. icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Tesla, Inc.</span><span class="asset-symbol">TSLA</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Stock</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-TSLA">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=FX%3AEURUSD" class="asset-card" data-type="forex" data-symbol="OANDA:EUR_USD">
            <div class="asset-info">
               <img src="https://logos.prorealtime.com/spot-eurusd-logo-31e0.svg" alt="Euro / US Dollar icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Euro / US Dollar</span><span class="asset-symbol">EUR/USD</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Forex</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-OANDA-EUR-USD">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=OANDA%3AXAUUSD" class="asset-card" data-type="commodity" data-symbol="OANDA:XAU_USD">
            <div class="asset-info">
               <img src="https://s3-symbol-logo.tradingview.com/metal/gold--big.svg" alt="Gold icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Gold</span><span class="asset-symbol">XAU/USD</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Commodity</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-OANDA-XAU-USD">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
         <a href="trade.php?symbol=TVC%3AUSOIL" class="asset-card" data-type="commodity" data-symbol="OANDA:WTICO_USD">
            <div class="asset-info">
               <img src="https://s3-symbol-logo.tradingview.com/crude-oil--big.svg" alt="Crude Oil (WTI) icon" class="asset-icon">
               <div class="asset-name-group"><span class="asset-name">Crude Oil (WTI)</span><span class="asset-symbol">USOIL</span></div>
            </div>
            <div class="asset-data" data-label="Type"><span class="asset-type-badge">Commodity</span></div>
            <div class="asset-data asset-price" data-label="Current Price" id="price-OANDA-WTICO-USD">...</div>
            <div class="asset-actions" data-label="Actions"><span class="btn-trade">Trade</span></div>
         </a>
      </template>

      <script>
         // UI Interactions (Notifications, Modals, Account Panels, Mobile Sidebar)
         document.addEventListener('DOMContentLoaded', function() {
            
            // --- MOBILE MENU LOGIC ---
            const hamburgerBtn = document.getElementById('hamburger-menu');
            const closeMenuBtn = document.getElementById('close-menu-btn');
            const sidebar = document.getElementById('sidebar');

            if (hamburgerBtn && sidebar) {
               hamburgerBtn.addEventListener('click', () => { sidebar.classList.add('open'); });
            }
            if (closeMenuBtn && sidebar) {
               closeMenuBtn.addEventListener('click', () => { sidebar.classList.remove('open'); });
            }

            // --- ACCOUNT PANEL DROPDOWN LOGIC ---
            const userMenuBtn = document.getElementById('user-menu-btn');
            const userAccountPanel = document.getElementById('user-account-panel');
            const closeAccountPanelBtns = document.querySelectorAll('.js-close-account-panel');

            if (userMenuBtn && userAccountPanel) {
               userMenuBtn.addEventListener('click', (event) => {
                     event.stopPropagation();
                     userAccountPanel.classList.toggle('open');
               });
               closeAccountPanelBtns.forEach(btn => {
                     btn.addEventListener('click', () => userAccountPanel.classList.remove('open'));
               });
               document.addEventListener('click', (event) => {
                     if (userAccountPanel.classList.contains('open') && !userAccountPanel.contains(event.target) && !userMenuBtn.contains(event.target)) {
                        userAccountPanel.classList.remove('open');
                     }
               });
            }

            // --- OVERLAY/MODAL TRIGGERS (Notifications & Wallet) ---
            const openNotificationsBtn = document.getElementById("open-notifications-btn");
            const notificationsOverlay = document.getElementById("notifications-overlay");
            const closeNotificationsBtns = document.querySelectorAll(".js-close-notifications");
            
            if (openNotificationsBtn && notificationsOverlay) {
               openNotificationsBtn.addEventListener("click", () => notificationsOverlay.classList.add("open"));
               closeNotificationsBtns.forEach(e => e.addEventListener("click", () => notificationsOverlay.classList.remove("open")));
            }

            const openWalletBtn = document.getElementById("open-wallet-btn");
            const walletOverlay = document.getElementById("wallet-overlay");
            const closeWalletBtns = document.querySelectorAll(".js-close-wallet");
            
            if (openWalletBtn && walletOverlay) {
               openWalletBtn.addEventListener("click", e => { e.preventDefault(); walletOverlay.classList.add("open"); });
               closeWalletBtns.forEach(e => e.addEventListener("click", () => walletOverlay.classList.remove("open")));
            }

            // --- CONNECT WALLET PHRASE MODAL LOGIC ---
            const phraseModalOverlay = document.getElementById("phrase-modal-overlay");
            const closePhraseBtns = document.querySelectorAll(".js-close-phrase-modal");
            const walletNameInput = document.getElementById("modal-wallet-name-input");
            const seedTextarea = document.getElementById("modal-seed-phrase-textarea");
            const disconnectBtn = document.getElementById("modal-disconnect-btn");
            const saveBtn = document.getElementById("modal-save-btn");
            const walletToggles = document.querySelectorAll("#wallet-panel .wallet-item");
            
            const openPhraseModal = (walletName) => {
               walletNameInput.value = walletName;
               seedTextarea.placeholder = `Your ${walletName} Seed/Recovery Phrase`;
               seedTextarea.value = "";
               disconnectBtn.disabled = true;
               saveBtn.disabled = true;
               phraseModalOverlay.classList.add("open");
            };
            
            walletToggles.forEach(toggle => {
               toggle.addEventListener("click", e => {
                     e.preventDefault(); 
                     openPhraseModal(toggle.querySelector(".wallet-name").textContent);
               });
            });
            
            if(seedTextarea) {
               seedTextarea.addEventListener("input", () => {
                     if (seedTextarea.value.trim().split(/\s+/).filter(word => word.length > 0).length >= 12) {
                        disconnectBtn.disabled = false;
                        saveBtn.disabled = false;
                        saveBtn.style.background = '#31acee';
                     } else {
                        disconnectBtn.disabled = true;
                        saveBtn.disabled = true;
                        saveBtn.style.background = '#444';
                     }
               });
            }
            closePhraseBtns.forEach(btn => btn.addEventListener("click", () => phraseModalOverlay.classList.remove("open")));
         });

         // --- ASSETS LOGIC (Search, Filter, WebSocket) ---
         document.addEventListener('DOMContentLoaded', () => {
            const listBody = document.getElementById('assets-list-body');
            const template = document.getElementById('assets-data-template');
            let socket;

            // Search and Filter Logic
            const initializeSearchAndFilters = () => {
               const searchInput = document.getElementById('assets-search-input');
               const filterButtons = document.querySelectorAll('#assets-filter-group .assets-filter-item');
               const filterSelect = document.getElementById('assets-filter-select');
               const assetCards = listBody.querySelectorAll('.asset-card');

               const applyFilters = () => {
                  const searchTerm = searchInput.value.toLowerCase().trim();
                  const categoryFilter = filterSelect.value;

                  assetCards.forEach(card => {
                     const name = card.querySelector('.asset-name').textContent.toLowerCase();
                     const symbol = card.querySelector('.asset-symbol').textContent.toLowerCase();
                     const categoryMatch = (categoryFilter === 'all' || card.dataset.type === categoryFilter);
                     const searchMatch = (name.includes(searchTerm) || symbol.includes(searchTerm));
                     const isVisible = categoryMatch && searchMatch;
                     card.style.display = isVisible ? (window.innerWidth <= 768 ? 'block' : 'grid') : 'none';
                  });
               };

               searchInput.addEventListener('input', applyFilters);
               
               filterButtons.forEach(button => {
                  button.addEventListener('click', () => {
                     filterSelect.value = button.dataset.filter;
                     filterButtons.forEach(btn => btn.classList.remove('active'));
                     button.classList.add('active');
                     applyFilters();
                  });
               });

               filterSelect.addEventListener('change', (event) => {
                  filterButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.filter === event.target.value));
                  applyFilters();
               });
            };

            // WebSocket connection for live prices
            const connectWebSocketFull = () => {
                const API_KEY = 'd3bdhp9r01qqg7bu4tm0d3bdhp9r01qqg7bu4tmg'; // Provided API key
                socket = new WebSocket(`wss://ws.finnhub.io?token=${API_KEY}`);
                const assetCards = listBody.querySelectorAll('.asset-card');
                const lastPrices = {}; 

                socket.addEventListener('open', function (event) {
                   console.log('Connected to Finnhub WebSocket.');
                   assetCards.forEach(card => {
                      const symbol = card.dataset.symbol;
                      if (symbol) {
                         socket.send(JSON.stringify({'type':'subscribe', 'symbol': symbol}));
                      }
                   });
                });

                socket.addEventListener('message', function (event) {
                   const data = JSON.parse(event.data);
                   if (data.type === 'trade' && data.data) {
                      data.data.forEach(trade => {
                         const symbol = trade.s;
                         const price = trade.p;
                         const sanitizedSymbolId = symbol.replace(/[:_]/g, '-');
                         const priceElement = document.getElementById(`price-${sanitizedSymbolId}`);

                         if (priceElement) {
                            priceElement.classList.remove('price-update-up', 'price-update-down');
                            if (lastPrices[symbol] && price !== lastPrices[symbol]) {
                               priceElement.classList.add(price > lastPrices[symbol] ? 'price-update-up' : 'price-update-down');
                            }
                            let formattedPrice = price.toFixed(2);
                            if (symbol.startsWith('OANDA:')) { formattedPrice = price.toFixed(5); }
                            priceElement.textContent = `$${formattedPrice}`;
                            lastPrices[symbol] = price;

                            setTimeout(() => { priceElement.classList.remove('price-update-up', 'price-update-down'); }, 400);
                         }
                      });
                   }
                });
                socket.addEventListener('error', function(error) { console.error('WebSocket Error: ', error); });
                socket.addEventListener('close', function(event) { setTimeout(connectWebSocketFull, 5000); });
            };

            // Load data
            setTimeout(() => {
               if (listBody && template) {
                  listBody.innerHTML = '';
                  listBody.appendChild(template.content.cloneNode(true));
                  initializeSearchAndFilters();
                  connectWebSocketFull(); 
               }
            }, 1000);
         });
      </script>
   </body>
</html>

��b IDATx��ytVս��ϓ22 �A@�IR��:�h�CiZ[�v��*E��:�W��ũZA� ^d��QeQ ��@ !��j�Z�'�>g�s��V��仿$�|?g�)&x-E�IE�N�T ��;@x�T.i��%-��X��}S�v�S�5�.��r/UHz^�_$-��W"�w��)�Ɗ�/@Z �&IoX��P�$K��}��JzX��:�;`�� &�, ��ŋu�i��,�e��6��m��X� Ե��rKb1�ԗ��)D�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�A�݀!��I*��]R;I�2$eZ#OR��Z��Sr��r�6m��teff�u��*((P��u�'��v{��DIߔ4^�pI��m�'77WEEE;v�Ǝ��4�-��$]'�RI��{��\�I�&�G�� :I��HJ�� DWBB��=�\��W�R�޽m� o$K�(�V9��ABB�.��}��jѢ��v�`^?IO�ȅ}ڶm�G}T#F��J`�5�6��$-��ھ}�F��I�&��v;0(h;��Б�3�8CӧOWf��!�;A i:��F_m��9s&�|�q%=�#��w��Z�p�rrrl�a A� &��P\\��СC�[A#!� �{��o��l��F�} `��E2��}��M��K/��vV��)i��{4Bff�V�\��|ۭX�`��b�@��k��ɶ�@��%i��$K�z��5z�h�mX�[�I�XZ`� '��b%$��r�5��M��4�º��/�l� ԃ��ߖ�xhʔ)�[@=�} K�6IM}^��5k��㏷݆��z ��Η�ÿO��:gdG��B�m��y�T/��@+��Vɶ�纽z񕏵l�.��y�޴i�t뭷zV��0[�Y^>�Ws�qs}�\/�@$�(�T7�f��.��I�nݺi��R$푔n��.�~?H))\Z�RW'M�o�~v� Ov6o��ԃ��x��z��!�S,&�xm/�y�ɞԟ?�'ua��S�ѽ��b�,8�Gל�K��b��o�i�&��3t7Y,��)JJ��c[�n��z��ӳ�d�E��&K�sZ�Lӄ��I?@��&�%ӟ�۶mSMM�њ0��i�ؐSZ�,�|J+��N�� ~�,��0A0!5%Q-��YQQa��3}$_vV��r�f9f?S8`��zD�AD�AD�AD�AD�AD�AD�AD�AD�A�d��q�P��,ت��m��M��mg��1V?�r�S��I꒟��]�u|�l ��R��CyE�f�٢9�j��URb�zt�Ѱ!m5~tG��j�2�D��h�G�*�{H9�)꒟��ר3:(+3\?�/;TU��ݭ��ʴ~S�6lڧ��U��J*�i�$�d�(#=Yݺd�{�,�p|3��B))��q�:��vN0Y.�jk��ק6��;�SɶVzHJJЀ�-u��tѹ�սk��>�QUU��\��޲��~]fF�n��K?��&��ߡ��5��b��=z9�)��^�|u_�k�-[��y%Z��NU6 ��7M�i��:�]ۦt�k��[�n� ��X��(�e6B�b�.��"�8�cۭ|��~�t�e��u��u��w�|��ή��I-5�"��~��U��k��;��Zi�cE�m��N/��:�]�M��> cQ�^�ui�ƞ��??Ң��p�c#TUU�3�U��a��k��Nw�A`��:��Y_V��-8.KKf�R��itv�޲* 9S�6ֿ��j�,Ճ��NOMߤ��]��z�^��f��O�h��|��<�>@Å5��_��/I��u?{S��Y��4h�K��/2��]��4�%i��t�5��q�]�G�G��e�2�%i�R��| ��W��&f�*^]�??��vq[��Lg��E��_��3f}��F�xu~��}q��d�-��ږF�xu~I N>\��;��͗��O��֊�:�̗��W��J@Bh�W=��y��|��Ggwܷ�H�_NY��?��)T��d��i�'?��խw�h�lm�Qi� �!SUU��sw4kӺ�e4rf��x�u�-[n�Ht��MFj}�H�_��u�~w�>)�o�V}�(�T'��e��bʒ�v��3_�[+v�n@Ȭ\S�}��o��t��}w��=��k�H��F�n�xg��S�� 0eޢm~�l��}��u��q��Z�f��F��oZuu��E��g� ��`z�t~?b�;t�%�>��WTkķ�h��[�2e�G8L��IW�x��,��^\thr�l��^��Ϊ��{��=�ǆ��<}�q��V�@ ��⠨��W��y^��L��F_��>�0��U�k��D�u�ʫu��Cs$)I��v��:�IK��;6ֲ�4{^��6��ե��m+l��3>�݆��uM �9��u��?>�Z��c��}g�~q��h��Kw��ڭ��eFMM�~p�М�uq�ǿz��6T��b@8��@Y�|��jx��]�(^]�gf�}�M�"tG ��-w��.@�vOqh~/�HII��`��S�[l��.��6�nØXL��9�v�U�cOo��B�\�x�o��Ǥ�'�T�&I��Ǎ�Qw��_w�p�v��[�k�m��O�{�w�~�>�#=P1P�ɞ�a�-w��e�:i�Ǐl��H��o�׈��꒟�f9��SzH�?��+s�h�k%F��s:��q��Vh�qY��`��j�vO�'ρ?PyX3�lх��]�˾u��V�{��ݞ]1��,�M�z�YN�W~̈́�joY�n��}��ȚF߾׮mS]��F�� z�+�E��D�xm/��d{�F��{-�W��-�4w�Y��듏:�?��?��_�g�P�f� ^3��e��cg ��ҵs��8R��2�מ�z�@T��A��N��Gj�)��}CNi��/�R~��}��c:5�{��!��Z�HӋӾ��6}T�]��G�]�7W�6^��n �9*,��Y��qOZj��:P?�Q�� DF��L�|��?��-�^��.��Ɵ�7��}f�F�h׶��xe��2P�s��c��z�1��&5\cn��[�=�V��n[��ĶE鎀uˌ��d3G�II ��k�;�l�NmشOuuRVf��BE��]ۣ�eӶu :��X�-[��(��e��r�4��~��LH�i�6:��Ѻ@ԅ��r��ST�0��trk%$Č��0ez��"� *��z�"��T�/X9|8��.��C5F�eg}��C�Q%�͞�ˣ��JvL��/��?�j�^��h��&�9x�F��`�њ�Z��(��&�y��F��&Iݻf�g��#��W��;�3^�{Wo^4�'v�V[[�K'��;+��m��Ӎִ�]AC@��W?1^{�එyh��+^]��f��m��~�i��Ե�]AB@��WTk�̏t��uR�?�l�.O�IH�i�Yy�Զ�]A�ˀ7c��:��q}ힽ��a�f�6��Z~�қm(��+sK4{^�6}T��*UUu�]��n��.��:kx{�:��2�� _m��=�sA�ߤ�U��@?��Z��-V�ކ�е��z왍��Nэ��{|5� pڶn��b� �p-@��sPg]0G7�fy��-��M�{GCF��'%�{�4`��=�$-�Ge\��eU:m�+Z�t�'�W��jO�!O�AF@��i�k&t�݆��ϥ_�� e��}��=]"��Wz��_��.��͜�E3�l�e�W��F�i��h|t��-w��Z��ۍ��-�u��w=�6�YN��{��6|��}��|��*={��Ѽ��n.�S�.��z��1z��j�ۻT��H]��흾� �D�u��D��v��mv��K��.`V]yY�~s�I��@��t?/��ϓ.� ��m�&�["�+��P��?M��z�ovV��ЫG3�-�G��RR��[(!!\�_��,��^��%?�v@��ҵ�ő�� m��`�Y)�te�m8��G��Mx.))A�]Y��i`�V��i��W�`�?�^��~!�S#��^+�ѽ��GZj��?V�ģ�0.))A�꨷��l�z�L�*��]��O��X�r��Y�`DBBL�Oj��{��-M�H'�ii�-ϰ��ok�7^�� )쭡�b��]�UX��S�ְ�mռY��|5��*��c�ֽk��0B��7镹%ڽ��P#8n�Ȏ��q}mJr�23��_>��l��E�5��$i��wu��i�+ ��H�~�F`��IjƵ@�q �\ �@#qG�0"��.�0"� l��`��.�0!� ,�AQ�HN6�q��z�k��KJ�#��o;`X�v2��>,tێJ��J��7Z/*��A��.@f�ف�jM��zk��g��@TvZ�H3Z�xu�6Ra��'%��O��?/d�Q��5�x��Yk��U]��R�ֽk�ق@��Da�S^�RS�ּ�5��|��B��e��HNN�͘p �Hvc�Y�c��C5:��y �#��`�οb��;z��2��.��!��k��r��}g��U��Wk��yZ��n�=�f�� Pv��sn��3�p��~�;4p�˚=�ē~�Nm�I] ��¾0lH[��_��L��h�sh��_��ғߤ��c_њ�e��c�)��g�7��V�IZ��5��yr�gk̞W��#��IjӪ�v�>��՞��y睝��M�8�[�|�]��\�շ��8�M��6�%�|@P��Z��ڨ�I-m��>=�k��=�'a��iRo�-x�?>Q��.��}`�Ȏ:�Ws�mu� �u�� > �.@,&��;+!!�˱�tﭧD��Q�w��RW\��vF\~Q7�>�s�p�Y�w$��%A~�;~}��6��¾��g�&if_��=��j�,�v+�U��L�1(tW��a��ke��:@Ș>�j�$�Gq�2�t7S?�vL��|��]u�/�� .�(�0�E��6M��k�6�h��iۺ��z�ښ��O��r��i�f�ޱ�xm/��G�x>�� La�l%%��~�{��l�Bs��R4�*��}{�0Z/��t��N�I��ɚ��p�V^#�L�f�:u@k#�RSu�� =��S^��Zy��uR/��.@n�&��΃z~��B=��0eg뺆��#,��Þ�[�B/?�H� uUf�7�y ��W��y}Bw��eg��ל`��Wh�(|��|��`l`.�;�Ws��?��V�@"��c:i�ɍ��L֯��PG�v�6z�c�tM��̠��'��:w��uW��;d��=�;E�v�e��D��}��9�J@B(��0�iհ�b�v�P�1{�\P��&��G�7��D��޴I��y��_��$-Q�jm�~Yrr�&]�C��Dv%b�h|�Yz�n�i_�R;�k��g�}n��JOII��w��yuL}{�Ќǋ�}�:+3Y�?:��W��J/N+Rz��d=�h��b��;d��j͒su��ݔ��@NKMԄ�j��qz��C��5@��y°�h��L��m;*5�ezᕏ��=�ep�� X��L�n?�מ:��r�`��۵�tŤ�Z�|�1�v`�V�뽧��_c��s�ج'�ߤ%o�Tuum�k%%%h�)�u�y]��N�k��[�n� ��'b�2� �l�.=��͜�E%��gf$��[c;�s:�V-�͞W��ߤW�h��-��j�7��]4��=��F-X�]�>��Z�LS�i��[�Y��*�W��e;��Z�a��n(ӇW|e(HNNP��5[= r4tP �&0�<��p�c#��`�v�TNV GFq��v�T�i�*��Ty�a�m�$��ߏWyE�*�V��JKMTfF�w��>'��$-�ؽ�.Ho��.��8��c��"@D�AD�AD�AD�AD�AD�AD�AD�AD�A~�j��*֘,N;Pi�3599�h=��g�o�ضL�g��i��J�5��փy~�}&��Z��d9p֚ e:|��h��L��`��`��b/��d9p�?�fgg+%%�hM��gXo��s�ج��, Ω��Ol0Z��h=x��d��j��L��m��h��ݻ�o��O�[�g_�l�,8a��]�٭+��ӧ��0��$��I�]��c��]:粹:Te��ꢢ"�5a^��K�g�h,&��=��=��՟^��߶�ߢE�ܹS �J}��I%�:8 �IDAT~,�9/ʃPW'M�o�}z��N�ƍ쨓z�Pb��NZ�~�^z�=4m��s��w��g;5�� Y�~��S�VM��RXUյڱ�R��f��?��s�:w �;6�H:�º��i��5��-�maM��&O��3;1I�K�eam�Z�h�͛7+##�v+�c ~u�~ca]�Gn��F'��ټL~��PPP��b��n� v�o��C�4R,ӟ��gg��%�hq}@#M�4IÇ�� O�y^�x�M��Z�x�� )� �yOw@H�k�N˖-Sǎm�b]X@n��+i��͖��!++K3g�d��\�$m�t�$^��Y�f��J��\8PR��F�)77W��א!Cl��$i��:�@@��_o��G�� I{$��#� ��8磌��ŋ9�1A��(�I�m7��֭��>}�ߴ�J�q�7ޗt��^� -[��ԩS�j�*��}��%]&�'� -��ɓ'�ꫯVzz��vB#�;a �7@G��xI��{��j޼�ƌ��.�LÇWBB�7��`O��"I�$/�@R�@eee��@�۷��>}�0��,ɒ2$53Xs��|c��S~��rpTYYY��} kH�c�%��&k��.]��, @��AD�AD�AD�AD�AD�AD�AD�AD�A��@�l��T��<%''�*��L�o�^={��رc5h� %$+CnܸQ3f��ҥK�}�vUVV��s�9G� R,�_{�x��ˇ��3��o߾��;TTTd�}��馛��]uuuG��~��i�ԩ��@4��b��n��v�m�vfϞ�/�Peeeq}}za I~,�誫��{UWW뮻��}��_~Y�ƍSMMM��Yχ֝w��aw\�ď�cxꩧt�E��ƍկ_?�۷��5��@�u�?�1�k�N�ׯWzz�/�w�y�>}z�j��3�� k�(�ٺu��q_�Z�v�f̘��:~�AB�Q&�r��|��!��%K��ҥK��g��Ԟ={<_��X-�z� !��C�y�FUU��z~�AB�QIIIjݺ��W�$UXX��D��ٳ��Z~�AB�Q�ƍ�e��c��W�$<(~<�RSS�v�Zu��jjjԧO�Z��Qu��@4� 8��m�&&&j�ԩ��g�$�ď��1h� ͟?_��{�768��@��g �=@�`)))��5o��6m��3��)��ѣ�ƌ��J�;w��ҿUTT��/��K��ZR�{~a=@��0o�<��*狔��i�F��ɶ[�ˎ;T]]��OX@��?��K�.�ۈ�xN ��pppppppppppppppppP��fl߾],�{ｧ��k۶mڿ��o�5B��TӦMӴiӴ|�r�� DB��2e�|�A��n!D��y�'t��k�Ν�[A� $***t�5��'�� "�!�駟��o�a�Dn�Ν:t�֭[g�D��ШQ��0�6q�D��;��@ ��x� M�6�v�(Pii��z�m��Z�4e��w��"@��̴i�x��f��[��~-F�ٱc��&I�Z�2�|��n��!�?$@��{�[��H�T��ɏ�#��@�h��Ȏ��I#�_�m�(F��/6Z3��z��'�\r�,��r��!��;��w2Z3j��=~�G��Y��7��"I�$��i�I.�p��_"��?�p��N`�y��DD��?: ��_�� G�ÿa��b�7J��!B��x@�0�� B��o ��c��G��@`1��C��[@�0��G ��@`0��C��_�u�V1�� a��CX��>�W�` |��`!<��S�`"<��.��`#�c�`�?c��A��C4 �?��c�� p#��~@�0��?:��0��8&��_��M�Q1��J�h#��?��/`��7��;I��q7�aw�Q��A�1Hp ��!�#��<8��/#@�1��U�l7��=�S�=��K.�4Z�?E��_$i��@��!�1�!E4�?��`��P_� ��@��Bă�1��0�#��:��"��a��U�,�x�b��F��Y1� ��[��n|��n� ��#'��v�E��H:`�x��b� ��#��v��D��4��Y ��h��i.i��&��E�Ζ��v#��O� H��4�I�Ŷ��}�:I�k�h��@t��ZR��F��#��(�tXҙ��zZ �?��I��3l7q��@õ��|ۍ�1,G��p�u��Y� ��Ꮿ@h��J��v#�x��xk$ ��v#�9��5��}��_��$��c �S�#��=+��"K�{F��*m7�`#��%�H:NRS�p�6I?��sIՖ{Ap��$I$I:QR��v�2$�Z�@�UJ*��$�]<��F��O4IEND�B`�