<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= e($pageTitle ?? 'Hissho Global') ?> | Hissho Global</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link
    href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

  <style>
    :root {
      --dark: #0a0b0d;
      --dark2: #111214;
      --dark3: #16181c;
      --surface: #1a1d22;
      --border: rgba(241, 145, 7, .12);
      --gold: #f19107;
      --gold-dark: #c97800;
      --text: #e8e8e8;
      --text-muted: #888;
      --success: #22c55e;
      --danger: #ef4444;
      --info: #3b82f6;
      --sidebar-w: 250px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      background: var(--dark);
      color: var(--text);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      min-height: 100vh
    }

    a {
      color: var(--gold);
      text-decoration: none
    }

    a:hover {
      opacity: .85
    }

    /* ── SIDEBAR ── */
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--sidebar-w);
      background: var(--dark2);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      z-index: 200;
      transition: transform .3s
    }

    .sidebar-logo {
      padding: 22px 20px;
      border-bottom: 1px solid var(--border);
      font-family: 'Orbitron', sans-serif;
      font-size: 16px;
      font-weight: 900;
      color: var(--gold);
      letter-spacing: 2px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sidebar-logo img {
      width: 70%;
    }

    .sidebar-logo span {
      font-size: 24px
    }

    .nav-section {
      padding: 14px 12px 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #444
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: .15s;
      margin: 2px 8px;
      position: relative
    }

    .nav-item:hover,
    .nav-item.active {
      background: rgba(241, 145, 7, .08);
      color: var(--gold)
    }

    .nav-item .nav-icon {
      width: 18px;
      text-align: center;
      font-size: 14px;
      flex-shrink: 0
    }

    .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
      bottom: 20%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--gold)
    }

    /* ── TOPBAR ── */
    .topbar {
      height: 58px;
      background: var(--dark2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 100
    }

    .topbar-left {
      font-family: 'Orbitron', sans-serif;
      font-size: 13px;
      color: var(--text-muted);
      flex: 1
    }

    .topbar-wallet {
      background: var(--dark3);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 12px;
      font-family: monospace;
      color: var(--text-muted)
    }

    .topbar-bal {
      background: rgba(241, 145, 7, .08);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: var(--gold)
    }

    /* ── MOBILE RESPONSIVE ── */
    @media (max-width: 768px) {

      .topbar {
        padding: 0 12px;
        gap: 24px;
      }

      .topbar-left {
        font-size: 11px;
      }

      .topbar-wallet {
        font-size: 10px;
        padding: 4px 8px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .topbar-bal {
        font-size: 11px;
        padding: 4px 8px;
      }

    }

    /* EXTRA SMALL DEVICES */
    @media (max-width: 480px) {

      .topbar-left {
        display: none;
        /* hide title to save space */
      }

      .topbar-wallet {
        max-width: 90px;
      }

    }

    /* ── LAYOUT ── */
    .layout {
      display: flex;
      min-height: 100vh
    }

    .main-content {
      flex: 1;
      margin-left: var(--sidebar-w);
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .page-content {
      padding: 24px;
      flex: 1
    }

    /* ── CARDS ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      overflow-x: auto;
    }

    .card-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .card-title i {
      color: var(--gold)
    }

    /* ── STAT CARDS ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 14px;
      margin-bottom: 20px
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: .2s
    }

    .stat-card:hover {
      border-color: rgba(241, 145, 7, .3)
    }

    .stat-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: rgba(241, 145, 7, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--gold);
      flex-shrink: 0
    }

    .stat-info p {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 4px
    }

    .stat-info h5 {
      font-family: 'Orbitron', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .stat-info h5.gold {
      color: var(--gold)
    }

    /* ── TABLES ── */
    .table-responsive {
      overflow-x: auto
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    .data-table thead tr {
      background: var(--dark3)
    }

    .data-table th {
      padding: 10px 14px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap
    }

    .data-table td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

    .data-table tbody tr:hover {
      background: rgba(255, 255, 255, .02)
    }

    .data-table .empty-row td {
      text-align: center;
      padding: 30px;
      color: var(--text-muted)
    }

    .data-table .amount {
      color: var(--gold);
      font-family: 'Orbitron', sans-serif;
      font-size: 13px
    }

    /* ── BADGES ── */
    .badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700
    }

    .badge-gold {
      background: rgba(241, 145, 7, .15);
      color: var(--gold)
    }

    .badge-green {
      background: rgba(34, 197, 94, .12);
      color: var(--success)
    }

    .badge-red {
      background: rgba(239, 68, 68, .12);
      color: var(--danger)
    }

    .badge-blue {
      background: rgba(59, 130, 246, .12);
      color: var(--info)
    }

    /* ── BUTTONS ── */
    .btn-gold {
      display: block;
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      color: #000;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      font-family: 'Orbitron', sans-serif;
      transition: .2s
    }

    .btn-gold:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(241, 145, 7, .35)
    }

    .btn-gold:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .btn-outline {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      transition: .15s
    }

    .btn-outline:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    .btn-sm {
      padding: 6px 12px;
      font-size: 12px
    }

    /* ── FORM ── */
    .form-group {
      margin-bottom: 16px
    }

    .form-group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 7px
    }

    .form-control {
      width: 100%;
      background: var(--dark3);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      color: var(--text);
      font-size: 14px;
      outline: none;
      transition: .15s
    }

    .form-control:focus {
      border-color: rgba(241, 145, 7, .4);
      box-shadow: 0 0 0 3px rgba(241, 145, 7, .07)
    }

    .form-control::placeholder {
      color: #444
    }

    .input-icon-wrap {
      position: relative
    }

    .input-icon-wrap i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #555;
      font-size: 14px
    }

    .input-icon-wrap .form-control {
      padding-left: 36px
    }

    /* ── PAGE HEADER ── */
    .page-header {
      margin-bottom: 20px
    }

    .page-header h3 {
      font-family: 'Orbitron', sans-serif;
      font-size: 20px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 4px
    }

    .breadcrumb {
      font-size: 12px;
      color: #444;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .breadcrumb i {
      font-size: 10px
    }

    .subtitle {
      font-size: 13px;
      color: var(--text-muted)
    }

    .subtitle span {
      color: var(--gold);
      font-weight: 700
    }

    /* ── TWO COL ── */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    /* ── ALERT ── */
    .alert {
      padding: 12px 16px;
      border-radius: 8px;
      margin-bottom: 16px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .alert-gold {
      background: rgba(241, 145, 7, .08);
      border: 1px solid rgba(241, 145, 7, .25);
      color: var(--gold)
    }

    .alert-green {
      background: rgba(34, 197, 94, .07);
      border: 1px solid rgba(34, 197, 94, .2);
      color: var(--success)
    }

    .alert-red {
      background: rgba(239, 68, 68, .07);
      border: 1px solid rgba(239, 68, 68, .2);
      color: var(--danger)
    }

    /* ── REFERRAL BOX ── */
    .referral-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-top: 16px
    }

    .ref-input-group {
      display: flex;
      gap: 8px;
      margin-top: 10px
    }

    .ref-input {
      flex: 1;
      background: var(--dark3);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 14px;
      color: var(--gold);
      font-size: 12px;
      font-family: monospace;
      outline: none
    }

    .btn-copy {
      background: rgba(241, 145, 7, .1);
      border: 1px solid rgba(241, 145, 7, .25);
      color: var(--gold);
      padding: 10px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
      transition: .15s;
      white-space: nowrap
    }

    .btn-copy:hover {
      background: rgba(241, 145, 7, .2)
    }

    /* ── MATRIX POOL CARDS ── */
    .pool-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px
    }

    .pool-card {
      background: var(--dark3);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      text-align: center;
      transition: .2s
    }

    .pool-card:hover {
      border-color: rgba(241, 145, 7, .3)
    }

    .pool-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 8px
    }

    .pool-amount {
      font-family: 'Orbitron', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--gold)
    }

    .pool-name {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px
    }

    /* ── SPINNER ── */
    .fa-spin {
      animation: fa-spin 1s linear infinite
    }

    @keyframes fa-spin {
      0% {
        transform: rotate(0deg)
      }

      100% {
        transform: rotate(360deg)
      }
    }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px
    }

    ::-webkit-scrollbar-track {
      background: var(--dark)
    }

    ::-webkit-scrollbar-thumb {
      background: #333;
      border-radius: 4px
    }

    /* ── MOBILE ── */
    @media(max-width:768px) {
      .sidebar {
        transform: translateX(-100%)
      }

      .sidebar.open {
        transform: translateX(0)
      }

      .main-content {
        margin-left: 0
      }

      .two-col {
        grid-template-columns: 1fr
      }

      .stats-grid {
        /* grid-template-columns: 1fr 1fr */
      }
    }

    .small-toast {
      font-size: 13px !important;
      border-radius: 10px !important;
    }

    .small-toast-title {
      font-size: 13px !important;
      font-weight: 500;
    }
  </style>
</head>

<body>