Edit

Editing: /home/goacom/9wickets.princedev.shop/account.php

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="/assets/styles-D1Zx_VwC.css"
      data-precedence="default"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      data-precedence="default"
    />
    <title>My Account — 9Wickets</title>
    <meta property="og:title" content="9Wickets Sports Book" />
    <meta
      property="og:description"
      content="9Wickets - Live sports betting exchange"
    />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="9Wickets Sports Book" />
    <meta
      name="twitter:description"
      content="9Wickets - Live sports betting exchange"
    />
    <meta
      property="og:image"
      content="https://storage.googleapis.com/gpt-engineer-file-uploads/attachments/og-images/cdc34f77-f602-4dae-bd13-6d3eabdde21e"
    />
    <meta
      name="twitter:image"
      content="https://storage.googleapis.com/gpt-engineer-file-uploads/attachments/og-images/cdc34f77-f602-4dae-bd13-6d3eabdde21e"
    />
    <meta
      name="description"
      content="Manage your 9Wickets account: profile, balances, bets, and activity."
    />
    <meta name="robots" content="noindex,nofollow" />
    <link rel="modulepreload" href="/assets/index-BPYkPsvX.js" />
    <link rel="modulepreload" href="/assets/jsx-runtime-D4ePz0Hl.js" />
    <link rel="modulepreload" href="/assets/useStore-DwKBv9F9.js" />
    <link rel="modulepreload" href="/assets/link-iXouiJL-.js" />
    <link rel="modulepreload" href="/assets/matchContext-BecU-xCn.js" />
    <link rel="modulepreload" href="/assets/useRouter-DLvcE9kZ.js" />
    <link rel="modulepreload" href="/assets/redirect-BLbzwbry.js" />
    <link rel="modulepreload" href="/assets/react-yDkVq6jc.js" />
    <link rel="modulepreload" href="/assets/account-B5dDG3d0.js" />
    <link
      rel="modulepreload"
      href="/assets/9wickets-logo.png.asset-DwjuOdBO.js"
    />
    <link rel="modulepreload" href="/assets/SettingsModal-BFEIgzLj.js" />
    <script defer="" src="/~flock.js" data-proxy-url="/~api/analytics"></script>
  </head>

<body>
    
    <script type="module" async="" src="/assets/index-BPYkPsvX.js"></script>
    <style>
      :root {
        --yellow: #ffc107;
        --dark: #262626;
        --panel: #546e7a;
        --link: #0066cc;
        --border: #e0e0e0;
      }

body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #fff;
        color: #333;
        overflow-x: hidden;
      }

html {
        overflow-x: hidden;
      }

* {
        box-sizing: border-box;
      }

a {
        text-decoration: none;
        color: inherit;
      }

html::-webkit-scrollbar,
      body::-webkit-scrollbar,
      *::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }

html,
      body,
      * {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

/* ===== Desktop ===== */
      .acc-header {
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 60px;
        border-bottom: 2px solid #e0a800;
      }

.acc-logo {
        font-style: italic;
        font-weight: 900;
        font-size: 26px;
        color: #111;
      }

.acc-search {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 3px;
        padding: 5px 10px;
        margin-left: 30px;
        flex: 1;
        max-width: 300px;
      }

.acc-search input {
        border: none;
        outline: none;
        width: 100%;
        font-size: 13px;
      }

.acc-right {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: 13px;
      }

.acc-nav {
        background: var(--dark);
        color: #fff;
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        justify-content: space-between;
        font-size: 13px;
        font-weight: bold;
      }

.acc-nav-links {
        display: flex;
        gap: 25px;
      }

.acc-nav-links a:hover {
        color: var(--yellow);
      }

.acc-body {
        display: flex;
        padding: 10px 20px;
        gap: 10px;
        min-height: calc(100vh - 100px);
      }

.acc-side {
        width: 220px;
        background: #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        height: max-content;
      }

.acc-side-h {
        background: var(--panel);
        color: #fff;
        padding: 8px 12px;
        font-weight: bold;
        font-size: 14px;
        text-align: right;
      }

.acc-side-i {
        display: block;
        padding: 9px 14px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 13px;
        color: var(--link);
        cursor: pointer;
        background: #fff;
      }

.acc-side-i.active {
        background: #fff3e0;
        color: #111;
        font-weight: bold;
        border-left: 3px solid var(--yellow);
      }

.acc-main {
        flex: 1;
        min-width: 0;
      }

.acc-title {
        font-weight: bold;
        font-size: 14px;
        margin: 4px 0 10px;
      }

.acc-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
      }

.acc-panel {
        background: #fff;
        border-radius: 4px;
        overflow: hidden;
      }

.acc-panel-h {
        background: var(--panel);
        color: #fff;
        padding: 8px 12px;
        font-weight: bold;
        font-size: 13px;
      }

.acc-row {
        display: grid;
        grid-template-columns: 180px 1fr;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        font-size: 13px;
      }

.acc-row:last-child {
        border-bottom: 0;
      }

.acc-tabs {
        display: flex;
        background: #fff;
        border-bottom: 1px solid var(--border);
      }

.acc-tab {
        padding: 10px 22px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        color: #111;
      }

.acc-tab.active {
        background: var(--dark);
        color: #fff;
      }

.acc-subtabs {
        display: flex;
        background: #fff;
        border-bottom: 1px solid var(--border);
        padding-left: 4px;
        overflow-x: auto;
      }

.acc-subtab {
        padding: 10px 22px;
        font-size: 13px;
        font-weight: bold;
        color: var(--link);
        cursor: pointer;
        border-right: 1px solid var(--border);
        white-space: nowrap;
      }

.acc-subtab.active {
        color: #111;
      }

.acc-filter {
        background: #fff;
        padding: 10px 14px;
        font-size: 12px;
        display: flex;
        gap: 20px;
        align-items: center;
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
      }

.acc-filter select {
        padding: 4px 6px;
        font-size: 12px;
      }

.acc-tbl-h {
        background: var(--panel);
        color: #fff;
        padding: 8px 12px;
        font-weight: bold;
        font-size: 13px;
      }

.acc-tbl-wrap {
        overflow-x: auto;
        background: #fff;
      }

.acc-tbl {
        width: 100%;
        background: #fff;
        border-collapse: collapse;
        font-size: 13px;
      }

.acc-tbl th {
        text-align: left;
        font-weight: bold;
        padding: 8px 12px;
        background: #f4f4f4;
        color: #333;
        border-bottom: 1px solid var(--border);
        font-size: 12px;
        white-space: nowrap;
      }

.acc-tbl td {
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
      }

.balance-hero {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 15px;
        padding: 16px;
        background: #fff;
        border-radius: 4px;
      }

.balance-hero .amt {
        font-size: 42px;
        color: #1976d2;
        font-weight: bold;
        line-height: 1;
      }

.balance-hero .amt .cur {
        font-size: 14px;
        color: #888;
        margin-left: 6px;
        font-weight: normal;
      }

.welcome h3 {
        margin: 0 0 8px;
        font-size: 15px;
      }

.badge-count {
        position: relative;
      }

.badge-count::after {
        content: attr(data-count);
        position: absolute;
        top: -8px;
        right: -14px;
        background: #d32f2f;
        color: #fff;
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 8px;
        font-weight: bold;
      }

/* ===== Mobile shell ===== */
      .acc-mobile-top {
        display: none;
      }

.acc-mobile-strap {
        display: none;
      }

.acc-mobile-user {
        display: none;
      }

.acc-mobile-tiles {
        display: none;
      }

.acc-mobile-back {
        display: none;
      }

/* Bottom nav (matches match.tsx exactly) */
      .m-bottom-nav {
        display: none;
      }

@media (max-width: 900px) {
        .acc-header,
        .acc-nav,
        .acc-side {
          display: none !important;
        }

.acc-body {
          flex-direction: column;
          padding: 0;
          gap: 0;
          min-height: 100vh;
        }

.acc-main {
          padding: 8px 8px 12px;
        }

.acc-mobile-top {
          display: flex;
          align-items: center;
          gap: 8px;
          background: var(--yellow);
          padding: 8px 10px;
          border-bottom: 2px solid #e0a800;
          position: sticky;
          top: 0;
          z-index: 30;
        }

.acc-mobile-top .mb-bets {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: #ffc107;
          border: 1px solid #1a1a1a;
          padding: 6px 16px;
          border-radius: 6px;
          font-weight: 500;
          font-size: 15px;
          color: #111;
          letter-spacing: 0.1px;
        }

.acc-mobile-top .mb-bets .mb-coin {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: radial-gradient(
            circle at 35% 30%,
            #f0c14b 0%,
            #b8860b 45%,
            #5a3a0a 100%
          );
          border: 1px solid #1a1a1a;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: #ffd700;
          font-size: 11px;
          font-weight: 700;
        }

.acc-mobile-top .mb-bal {
          margin-left: auto;
          text-align: right;
          line-height: 1.15;
          font-size: 12px;
          color: #111;
          font-weight: 600;
        }

.acc-mobile-top .mb-bal b {
          font-size: 13px;
          font-weight: 800;
          margin-left: 3px;
        }

.acc-mobile-top .mb-ico {
          width: 32px;
          height: 32px;
          background: transparent;
          border: none;
          border-radius: 4px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: #111;
          font-size: 17px;
          cursor: pointer;
          padding: 0;
        }

.acc-mobile-top .mb-ico:hover {
          background: rgba(0, 0, 0, 0.08);
        }

.acc-mobile-strap {
          display: none !important;
        }

.acc-mobile-user {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #000;
          color: #fff;
          padding: 10px 14px;
          font-size: 13px;
        }

.acc-mobile-user .u-left {
          display: flex;
          align-items: center;
          gap: 10px;
        }

.acc-mobile-user .u-avatar {
          width: 26px;
          height: 26px;
          border-radius: 50%;
          background: #fff;
          color: #111;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
        }

.acc-mobile-user .u-tz {
          font-size: 12px;
          opacity: 0.95;
          border-left: 1px solid #333;
          padding-left: 14px;
        }

.acc-mobile-tiles {
          display: block;
          background: #fff;
          padding: 0;
        }

.acc-mobile-tiles .tile {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fff;
          padding: 14px 16px;
          margin: 0;
          border-bottom: 1px solid #eceff1;
          color: var(--link);
          font-weight: bold;
          font-size: 15px;
          cursor: pointer;
        }

.acc-mobile-tiles .tile:active {
          background: #f7f7f7;
        }

.acc-mobile-tiles .tile .chev {
          color: #263238;
          font-size: 16px;
        }

.acc-mobile-back {
          display: flex;
          align-items: center;
          gap: 8px;
          background: var(--dark);
          color: #fff;
          padding: 10px 12px;
          font-size: 13px;
          font-weight: bold;
          cursor: pointer;
          position: sticky;
          top: 46px;
          z-index: 20;
        }

.acc-mobile-back i {
          color: var(--yellow);
        }

.acc-card {
          grid-template-columns: 1fr;
          gap: 10px;
        }

.balance-hero {
          grid-template-columns: 1fr;
          padding: 14px;
        }

.balance-hero .amt {
          font-size: 34px;
        }

.acc-title {
          padding: 0 4px;
        }

.acc-tabs {
          overflow-x: auto;
        }

.acc-tab {
          padding: 10px 14px;
          flex-shrink: 0;
        }

.acc-subtab {
          padding: 10px 14px;
        }

.acc-filter {
          font-size: 11px;
          gap: 10px;
        }

.acc-panel-h,
        .acc-tbl-h {
          font-size: 12px;
          padding: 7px 10px;
        }

.acc-row {
          grid-template-columns: 130px 1fr;
          font-size: 12px;
          padding: 7px 10px;
        }

.acc-tbl th,
        .acc-tbl td {
          padding: 8px 10px;
          font-size: 12px;
        }

body {
          padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
        }

.m-bottom-nav {
          display: flex;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          height: 60px;
          background: #1a3550;
          color: #fff;
          z-index: 100;
          align-items: stretch;
          border-top: 1px solid #0d223a;
          padding-bottom: env(safe-area-inset-bottom);
          box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
        }

.m-bottom-nav a {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 3px;
          font-size: 11px;
          color: #fff;
          text-decoration: none;
          font-weight: 600;
          position: relative;
        }

.m-bottom-nav a i {
          font-size: 18px;
        }

.m-bottom-nav a.active {
          background: rgba(255, 255, 255, 0.08);
        }

.m-bottom-nav a.active::before {
          content: "";
          position: absolute;
          top: 0;
          left: 10%;
          right: 10%;
          height: 2px;
          background: #ffc107;
        }

.m-bottom-nav .m-game {
          flex: 0 0 64px;
          display: flex;
          align-items: flex-start;
          justify-content: center;
        }

.m-bottom-nav .m-game .m-game-btn {
          width: 58px;
          height: 58px;
          border-radius: 50%;
          background: radial-gradient(
            circle at 30% 30%,
            #c8a97a,
            #6b4423 70%,
            #3d2410
          );
          border: 2px solid #ffc107;
          margin-top: -10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 9px;
          font-weight: bold;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
          overflow: hidden;
        }

.m-bottom-nav .m-game .m-game-btn img {
          width: 34px;
          height: 34px;
          object-fit: contain;
          margin-bottom: -2px;
        }

.m-bottom-nav .m-game .m-game-btn span {
          font-size: 9px;
          line-height: 1;
          margin-bottom: 4px;
        }
      }
    </style>
    <div class="acc-header">
      <div class="acc-logo">
        <a href="index.php" style="display: inline-flex; align-items: center"
          ><img
            alt="9Wickets"
            src="/__l5e/assets-v1/048945c0-0aa5-46e2-b889-5a875ed5b5a1/9wickets-logo.png"
            style="height: 42px; width: auto; display: block"
        /></a>
      </div>
      <div class="acc-search">
        <i
          class="fa-solid fa-magnifying-glass"
          style="color: rgb(136, 136, 136); margin-right: 5px"
        ></i
        ><input placeholder="Search Events" />
      </div>
      <div class="acc-right">
        <span>Main <b>INR0.00</b></span
        ><span>Exposure <b>0.00</b></span
        ><i class="fa-solid fa-rotate-right" style="cursor: pointer"></i
        ><span
          style="
            background: rgb(255, 255, 255);
            padding: 3px 10px;
            border-radius: 3px;
            font-weight: bold;
          "
          ><i class="fa-solid fa-user"></i> My Account
          <i class="fa-solid fa-caret-down"></i
        ></span>
      </div>
    </div>
    <div class="acc-nav">
      <div class="acc-nav-links">
        <a href="index.php">Home</a><a href="in-play.php">In-Play</a><a href="multi-markets.php">Multi Markets</a
        ><span class="badge-count" data-count="6"
          ><a href="cricket.php">Cricket</a></span
        ><span class="badge-count" data-count="1"
          ><a href="soccer.php">Soccer</a></span
        ><span class="badge-count" data-count="5"
          ><a href="tennis.php">Tennis</a></span
        ><a href="fifa-world-cup.php">FIFA World Cup - Winner</a><a href="result.php">Result</a>
      </div>
      <div>
        <a href="settings.php"><i class="fa-solid fa-gear"></i> Setting</a>
      </div>
    </div>
    <div class="acc-mobile-top">
      <a
        href="account.php?tab=bets"
        class="mb-bets"
        style="cursor: pointer; text-decoration: none"
        ><span class="mb-coin">$</span><span>Bets</span></a
      >
      <div class="mb-bal">
        <div>Main INR <b>0.00</b></div>
        <div>Exposure <b>0.00</b></div>
      </div>
      <button class="mb-ico" aria-label="Refresh" onclick="location.reload()">
        <i class="fa-solid fa-rotate-right" style="cursor: pointer" onclick="location.reload()" title="Refresh"></i></button
      ><a href="settings.php" class="mb-ico" aria-label="Settings" style="display:inline-flex;align-items:center;justify-content:center;color:inherit;">
        <i class="fa-solid fa-gear"></i>
      </a>
    </div>
    <div class="acc-mobile-user">
      <div class="u-left">
        <span class="u-avatar"><i class="fa-solid fa-user"></i></span
        ><span>GUEST</span>
      </div>
      <span class="u-tz">GMT+5:30</span>
    </div>

<div class="acc-body">
      
      <div class="acc-mobile-tiles" id="acc-tiles-menu">
        <div class="tile" onclick="switchTab('profile')">
          <span>My Profile</span><span class="chev">›</span>
        </div>
        <div class="tile" onclick="switchTab('balance')">
          <span>Balance Overview</span><span class="chev">›</span>
        </div>
        <div class="tile" onclick="switchTab('bets')"><span>My Bets</span><span class="chev">›</span></div>
        <div class="tile" onclick="switchTab('history')">
          <span>Bets History</span><span class="chev">›</span>
        </div>
        <div class="tile" onclick="switchTab('pnl')">
          <span>Profit &amp; Loss</span><span class="chev">›</span>
        </div>
        <div class="tile" onclick="switchTab('activity')">
          <span>Activity Log</span><span class="chev">›</span>
        </div>
      </div>

<div class="acc-side">
        <div class="acc-side-h">My Account</div>
        <div class="acc-side-i active" data-tab="profile" onclick="switchTab('profile')">My Profile</div>
        <div class="acc-side-i" data-tab="balance" onclick="switchTab('balance')">Balance Overview</div>
        <div class="acc-side-i" data-tab="bets" onclick="switchTab('bets')">My Bets</div>
        <div class="acc-side-i" data-tab="history" onclick="switchTab('history')">Bets History</div>
        <div class="acc-side-i" data-tab="pnl" onclick="switchTab('pnl')">Profit &amp; Loss</div>
        <div class="acc-side-i" data-tab="activity" onclick="switchTab('activity')">Activity Log</div>
      </div>

<div class="acc-main" id="acc-main-panel">
        
      </div>
    </div>

<nav class="m-bottom-nav">
      <div class="m-game" role="button" style="cursor: pointer">
        <div class="m-game-btn">
          <img
            alt="Games"
            src="/assets/games-icon.svg"
          /><span>Games</span>
        </div>
      </div>
      <a href="index.php"><i class="fa-solid fa-house"></i>Home</a
      ><a href="in-play.php"><i class="fa-solid fa-clock"></i>In-Play</a
      ><a href="sports.php"><i class="fa-solid fa-trophy"></i>Sports</a
      ><a href="multi-markets.php"
        ><i class="fa-solid fa-layer-group"></i>Multi M...</a
      ><a href="account.php" class="active"
        ><i class="fa-solid fa-user"></i>Account</a
      >
    </nav>

const tabViews = {
          profile: `
            <div class="acc-mobile-back" onclick="showTiles()">
              <i class="fa-solid fa-arrow-left"></i><span>My Profile</span>
            </div>
            <div class="acc-main-content">
              <div class="acc-title">Account Details</div>
              <div class="acc-card">
                <div class="acc-panel">
                  <div class="acc-panel-h">About You</div>
                  <div class="acc-row"><span>First Name</span><span>--</span></div>
                  <div class="acc-row"><span>Last Name</span><span>GUEST</span></div>
                  <div class="acc-row"><span>Birthday</span><span>--</span></div>
                </div>

<div class="acc-panel">
                  <div class="acc-panel-h">Address</div>
                  <div class="acc-row"><span>Address</span><span>--</span></div>
                  <div class="acc-row"><span>Town/City</span><span>--</span></div>
                  <div class="acc-row"><span>Country</span><span>--</span></div>
                  <div class="acc-row"><span>Country/State</span><span>--</span></div>
                  <div class="acc-row"><span>Postcode</span><span>--</span></div>
                  <div class="acc-row"><span>Timezone</span><span>IST</span></div>
                </div>

<div class="acc-panel">
                  <div class="acc-panel-h">Setting</div>
                  <div class="acc-row"><span>Currency</span><span>INR</span></div>
                  <div class="acc-row"><span>Odds Format</span><span>--</span></div>
                </div>

<div class="acc-panel">
                  <div class="acc-panel-h">Commission</div>
                  <div class="acc-row"><span>Comm charged</span><span>2.00%</span></div>
                </div>
              </div>
            </div>
          `,
          balance: `
            <div class="acc-mobile-back" onclick="showTiles()">
              <i class="fa-solid fa-arrow-left"></i><span>Balance Overview</span>
            </div>
            <div class="acc-main-content">
              <div class="acc-title">Summary</div>
              <div class="balance-hero">
                <div>
                  <div style="font-size: 13px; color: #666; font-weight: bold; margin-bottom: 6px;">Your Balances</div>
                  <div class="amt">0.00 <span class="cur">INR</span></div>
                </div>
                <div class="welcome">
                  <h3 style="margin:0 0 6px 0; font-size:15px; font-weight:bold;">Welcome,</h3>
                  <p style="font-size: 13px; color: #555; margin: 0; line-height: 1.4;">
                    View your account details here. You can manage funds, review and change your settings and see the performance of your betting activity.
                  </p>
                </div>
              </div>
              <div class="acc-tbl-wrap" style="margin-top: 15px; border-radius: 4px; border: 1px solid #e0e0e0; overflow: hidden;">
                <table class="acc-tbl">
                  <thead>
                    <tr>
                      <th>Date</th>
                      <th>Transaction No</th>
                      <th>Debits</th>
                      <th>Credits</th>
                      <th>Balance</th>
                      <th>Remarks</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="6" style="text-align: left; color: #666; padding: 12px 14px; font-size: 13px;">Matched: No Data</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          `,
          bets: `
            <div class="acc-mobile-back" onclick="showTiles()">
              <i class="fa-solid fa-arrow-left"></i><span>My Bets</span>
            </div>
            <div class="acc-main-content">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;">
                <div>
                  <div class="acc-title" style="margin: 0; font-size: 15px; font-weight: bold;">My Bets (Open)</div>
                  <div style="font-size: 12px; color: #666; margin-top: 2px;">Live - updates instantly when your bets settle</div>
                </div>
                <button type="button" onclick="location.reload()" style="background: #ffc107; border: 1px solid #e0a800; border-radius: 4px; padding: 6px 14px; font-weight: bold; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #111;">
                  <i class="fa-solid fa-rotate-right" style="cursor: pointer" onclick="location.reload()" title="Refresh"></i> Refresh
                </button>
              </div>
              <div class="acc-tbl-wrap" style="border-radius: 4px; border: 1px solid #e0e0e0; overflow-x: auto;">
                <table class="acc-tbl">
                  <thead>
                    <tr>
                      <th>Placed</th>
                      <th>Round</th>
                      <th>Runner / Market</th>
                      <th>Type</th>
                      <th>Odds</th>
                      <th>Stake</th>
                      <th>Potential</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="8" style="text-align: left; color: #666; padding: 12px 14px; font-size: 13px;">No open bets right now.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          `,
          history: `
            <div class="acc-mobile-back" onclick="showTiles()">
              <i class="fa-solid fa-arrow-left"></i><span>Bets History</span>
            </div>
            <div class="acc-main-content">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;">
                <div>
                  <div class="acc-title" style="margin: 0; font-size: 15px; font-weight: bold;">Bets History</div>
                  <div style="font-size: 12px; color: #666; margin-top: 2px;">Live - updates instantly when your bets settle</div>
                </div>
                <button type="button" onclick="location.reload()" style="background: #ffc107; border: 1px solid #e0a800; border-radius: 4px; padding: 6px 14px; font-weight: bold; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #111;">
                  <i class="fa-solid fa-rotate-right" style="cursor: pointer" onclick="location.reload()" title="Refresh"></i> Refresh
                </button>
              </div>
              <div class="acc-tbl-wrap" style="border-radius: 4px; border: 1px solid #e0e0e0; overflow-x: auto;">
                <table class="acc-tbl">
                  <thead>
                    <tr>
                      <th>Placed</th>
                      <th>Round</th>
                      <th>Runner / Market</th>
                      <th>Type</th>
                      <th>Odds</th>
                      <th>Stake</th>
                      <th>Potential</th>
                      <th>Result</th>
                      <th>Payout</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="9" style="text-align: left; color: #666; padding: 12px 14px; font-size: 13px;">No settled bets yet.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          `,
          pnl: `
            <div class="acc-mobile-back" onclick="showTiles()">
              <i class="fa-solid fa-arrow-left"></i><span>Profit & Loss</span>
            </div>
            <div class="acc-main-content">
              <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px;">
                <div>
                  <div class="acc-title" style="margin: 0; font-size: 15px; font-weight: bold;">Profit & Loss</div>
                  <div style="font-size: 12px; color: #666; margin-top: 2px;">Live - updates instantly when your bets settle</div>
                </div>
                <button type="button" onclick="location.reload()" style="background: #ffc107; border: 1px solid #e0a800; border-radius: 4px; padding: 6px 14px; font-weight: bold; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: #111;">
                  <i class="fa-solid fa-rotate-right" style="cursor: pointer" onclick="location.reload()" title="Refresh"></i> Refresh
                </button>
              </div>
              <div class="acc-tbl-wrap" style="border-radius: 4px; border: 1px solid #e0e0e0; overflow-x: auto;">
                <table class="acc-tbl">
                  <thead>
                    <tr>
                      <th>Placed</th>
                      <th>Runner</th>
                      <th>Side</th>
                      <th>Odds</th>
                      <th>Stake</th>
                      <th>Result</th>
                      <th>Payout</th>
                      <th>P/L</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="8" style="text-align: left; color: #666; padding: 12px 14px; font-size: 13px;">No settled bets yet.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          `,
          activity: `
            <div class="acc-mobile-back" onclick="showTiles()">
              <i class="fa-solid fa-arrow-left"></i><span>Activity Log</span>
            </div>
            <div class="acc-main-content">
              <div class="acc-title" style="font-size: 15px; font-weight: bold; margin-bottom: 12px;">Activity Log</div>
              <div class="acc-tbl-wrap" style="border-radius: 4px; border: 1px solid #e0e0e0; overflow-x: auto;">
                <table class="acc-tbl">
                  <thead>
                    <tr>
                      <th>Login Date & Time</th>
                      <th>Login Status</th>
                      <th>IP Address</th>
                      <th>ISP</th>
                      <th>City/State/Country</th>
                      <th>User Agent Type</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td style="padding: 10px 12px; white-space: nowrap;">7/21/2026 10:15:49 PM</td>
                      <td style="padding: 10px 12px; color: #2e7d32; font-weight: bold; white-space: nowrap;">Login Success</td>
                      <td style="padding: 10px 12px;">--</td>
                      <td style="padding: 10px 12px;">--</td>
                      <td style="padding: 10px 12px;">--</td>
                      <td style="padding: 10px 12px;">Browser</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div style="display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; font-size: 13px; color: #555;">
                <span style="cursor: pointer; opacity: 0.7;">Prev</span>
                <span style="background: #ffc107; color: #111; font-weight: bold; padding: 4px 10px; border-radius: 3px;">1</span>
                <span style="cursor: pointer; opacity: 0.7;">Next</span>
              </div>
            </div>
          `
        };

window.switchTab = function(tabName) {
          if (!tabViews[tabName]) tabName = 'profile';
          currentTab = tabName;

const mainPanel = document.getElementById('acc-main-panel');
          const tilesMenu = document.getElementById('acc-tiles-menu');

if (mainPanel) {
            mainPanel.innerHTML = tabViews[tabName];
            mainPanel.style.display = 'block';
          }

// Hide tiles menu on mobile when a tab is selected
          if (tilesMenu && window.innerWidth <= 900) {
            tilesMenu.style.display = 'none';
          }

// Update active state in desktop sidebar
          document.querySelectorAll('.acc-side-i').forEach(el => {
            if (el.getAttribute('data-tab') === tabName) {
              el.classList.add('active');
            } else {
              el.classList.remove('active');
            }
          });

// Update URL without page reload
          const url = new URL(window.location.href);
          url.searchParams.set('tab', tabName);
          window.history.replaceState({}, '', url);
        };

window.showTiles = function() {
          const tilesMenu = document.getElementById('acc-tiles-menu');
          const mainPanel = document.getElementById('acc-main-panel');

if (tilesMenu && window.innerWidth <= 900) {
            tilesMenu.style.display = 'block';
            if (mainPanel) mainPanel.style.display = 'none';
          }
        };

// Initialize tab based on URL param or default
        const params = new URLSearchParams(window.location.search);
        const initialTab = params.get('tab');

if (initialTab && tabViews[initialTab]) {
          switchTab(initialTab);
        } else {
          // On mobile, if no explicit tab param, show tiles menu first
          if (window.innerWidth <= 900 && !initialTab) {
            showTiles();
          } else {
            switchTab('profile');
          }
        }
      })();
    </script>
  </body>
</html>