<?php

require_once '../connection/db.php';
require_once '../connection/MatrixEngine.php';
requireLogin();

$user      = getCurrentUser();
$myId      = (int)$user['member_id'];
$db        = getDB();
$engine    = new MatrixEngine();

/* ── Which member are we viewing? ───────────────────── */
$viewId = isset($_GET['view']) ? (int)$_GET['view'] : $myId;
$fromId = isset($_GET['from']) ? (int)$_GET['from']  : null;

/* ── Viewed user info ────────────────────────────────── */
if ($viewId === $myId) {
    $viewedUser = $user;
} else {
    $stv = $db->prepare("SELECT * FROM meddolic_user_details WHERE member_id=? LIMIT 1");
    $stv->execute([$viewId]);
    $viewedUser = $stv->fetch(PDO::FETCH_ASSOC) ?: $user;
}

/* ── Main tree for viewed member ─────────────────────── */
$wt           = $engine->getWorkingMatrixTree($viewId);
$allNodes     = $wt['nodes']    ?? [];
$treeNodes    = $wt['tree']     ?? [];   // L1 children of $viewId (max 3)
$levelMap     = $wt['levelMap'] ?? [];
$totalMembers = (int)($wt['total'] ?? 0);

/* ── For each L1 child, get THEIR subtree (3→9→27) ─── */
$childTrees = [];
foreach ($treeNodes as $leg => $l1n) {
    $cid = (int)$l1n['member_id'];
    $childTrees[$cid] = $engine->getWorkingMatrixTree($cid);
}

/* ── Global pools, income table (always my own) ──────── */
$matrixPkgs  = getMatrixPackages();
$globalTrees = [];
foreach ($matrixPkgs as $mp) {
    $globalTrees[(int)$mp['matrixId']] = $engine->getGlobalMatrixTree($myId, (int)$mp['matrixId']);
}
$curPkgId = (int)($user['currentPackage'] ?? 0);
$allPkgs  = getPoolList();
$incPrev  = [];
foreach ($allPkgs as $p) {
    $incPrev[(int)$p['id']] = $engine->calculateIncomePreview((int)$p['id'], (float)$p['upgradePrice']);
}
$poolIncomes = [];
foreach ($matrixPkgs as $mp) {
    $piQ = $db->prepare("SELECT * FROM meddolic_user_pool_income WHERE memberId=? AND poolId=? ORDER BY dateTime ASC");
    $piQ->execute([$myId, $mp['matrixId']]);
    $poolIncomes[(int)$mp['matrixId']] = $piQ->fetchAll();
}

$pageTitle  = 'Matrix Tree';
$activePage = 'tree';
require_once 'Include/header.php';

function xe(string $v): string {
    return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
}
function pct(int $n, int $max): int {
    return $max > 0 ? (int)min(100, round($n / $max * 100)) : 0;
}

$selfUrl    = strtok($_SERVER['REQUEST_URI'], '?');
$poolColors = [1=>'#f59e0b',2=>'#94a3b8',3=>'#eab308',4=>'#8b5cf6',
               5=>'#06b6d4',6=>'#64748b',7=>'#f43f5e',8=>'#10b981'];

/* ── Build children-of index for a tree ─────────────── */
function childrenOf(array $nodes, int $parentId): array {
    $kids = [];
    foreach ($nodes as $n) {
        if ((int)$n['parent_id'] === $parentId) {
            $kids[(int)$n['leg_pos']] = $n;
        }
    }
    ksort($kids);
    return $kids;
}
?>
<style>
  /* ═══════════════════════════════════════════════════════════
   CORE LAYOUT
   ═══════════════════════════════════════════════════════════ */
  .mtp *,
  .mtp *::before,
  .mtp *::after {
    box-sizing: border-box;
  }

  /* Tabs */
  .mtp-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 14px;
  }

  .mtp-tabs::-webkit-scrollbar {
    display: none;
  }

  .mtp-tab {
    flex: 0 0 auto;
    padding: 8px 18px;
    border-radius: 24px;
    border: 1px solid var(--border, #222);
    background: var(--dark3, #1a1a1a);
    font-size: 12px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
    user-select: none;
  }

  .mtp-tab.active {
    background: rgba(241, 145, 7, .12);
    border-color: rgba(241, 145, 7, .5);
    color: #f19107;
    font-weight: 600;
  }

  .mtp-pane {
    display: none;
  }

  .mtp-pane.on {
    display: block;
  }

  /* Card */
  .mt-card {
    background: var(--dark2, #111);
    border: 1px solid var(--border, #222);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .mt-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Back button */
  .tree-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(241, 145, 7, .08);
    border: 1px solid rgba(241, 145, 7, .3);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: #f19107;
    text-decoration: none;
    margin-bottom: 14px;
    transition: .15s;
  }

  .tree-back:hover {
    background: rgba(241, 145, 7, .16);
  }

  /* Tree scroll wrapper */
  .tree-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tree-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    padding: 8px 12px 20px;
  }

  /* ═══════════════════════════════════════════════════════════
   ROOT NODE
   ═══════════════════════════════════════════════════════════ */
  .root-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(241, 145, 7, .08);
    border: 2px solid rgba(241, 145, 7, .65);
    border-radius: 16px;
    padding: 14px 26px;
    text-align: center;
  }

  .root-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(241, 145, 7, .2);
    border: 2px solid rgba(241, 145, 7, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  .root-uid {
    font-family: 'Orbitron', monospace;
    font-size: 17px;
    font-weight: 700;
    color: #f19107;
    letter-spacing: 1px;
  }

  .root-sub {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
  }

  /* ═══════════════════════════════════════════════════════════
   LEVEL PILL
   ═══════════════════════════════════════════════════════════ */
  .lvl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dark3, #1a1a1a);
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
  }

  .lvl-pill b {
    color: #f19107;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
  }

  /* ═══════════════════════════════════════════════════════════
   L1 ROW — 3 nodes side by side, horizontal connector
   ═══════════════════════════════════════════════════════════ */
  .v-stem {
    width: 2px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .l1-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .l1-row-connector {
    /* vertical stem from root down to horizontal bar */
    width: 2px;
    height: 20px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .l1-nodes-wrap {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
    position: relative;
  }

  /* horizontal bar across top of L1 columns */
  .l1-nodes-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #2a2a2a;
    /* only draw between first and last column */
    margin: 0 calc(50% - (var(--l1-half, 150px)));
  }

  /* Each L1 column: node + expanded subtree panel */
  .l1-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 20px;
    min-width: 0;
  }

  /* vertical drop to each node */
  .l1-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: #2a2a2a;
  }

  /* ═══════════════════════════════════════════════════════════
   L1 NODE CARD  (top-level clickable card)
   ═══════════════════════════════════════════════════════════ */
  .nd1 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1.5px solid rgba(34, 197, 94, .4);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 88px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
    text-align: center;
  }

  .nd1:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    border-color: rgba(34, 197, 94, .75);
  }

  .nd1.inactive {
    border-color: rgba(107, 114, 128, .35);
    opacity: .75;
  }

  .nd1.inactive:hover {
    border-color: rgba(107, 114, 128, .65);
  }

  .nd1.empty-slot {
    border-style: dashed;
    border-color: #222;
    opacity: .22;
    cursor: default;
  }

  .nd1.empty-slot:hover {
    transform: none;
    box-shadow: none;
  }

  /* chevron top-right */
  .nd1-arr {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 10px;
    color: #2a2a2a;
  }

  /* avatar */
  .nd1-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .14);
    border: 1.5px solid rgba(34, 197, 94, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: #22c55e;
  }

  .nd1.inactive .nd1-av {
    background: rgba(107, 114, 128, .1);
    border-color: rgba(107, 114, 128, .35);
    color: #6b7280;
  }

  .nd1.empty-slot .nd1-av {
    background: rgba(255, 255, 255, .02);
    border: 1.5px dashed #222;
    color: #222;
  }

  .nd1-uid {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  /* status check/circle */
  .nd1-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    margin-bottom: 4px;
  }

  .nd1.inactive .nd1-chk {
    background: rgba(107, 114, 128, .1);
    border-color: rgba(107, 114, 128, .3);
  }

  .nd1-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* ═══════════════════════════════════════════════════════════
   EXPANDED SUBTREE PANEL (below each L1 node)
   Matches the dark bordered boxes in screenshot
   ═══════════════════════════════════════════════════════════ */
  .sub-panel {
    background: rgba(0, 0, 0, .35);
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    padding: 12px 10px 10px;
    margin-top: 10px;
    width: 100%;
    max-width: 420px;
    min-width: 280px;
    overflow: hidden;
  }

  .sub-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
  }

  /* stats bar: 3/3  6/9  0/27 */
  .sub-stats {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
  }

  .sub-stat {
    text-align: center;
    min-width: 44px;
  }

  .sub-stat-val {
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 700;
  }

  .sub-stat-bar {
    height: 3px;
    border-radius: 3px;
    background: #1a1a1a;
    overflow: hidden;
    margin: 3px 0;
  }

  .sub-stat-fill {
    height: 100%;
    border-radius: 3px;
  }

  .sub-stat-lbl {
    font-size: 9px;
    color: #444;
  }

  /* Level label inside panel */
  .sub-lvl-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #444;
    margin: 6px auto;
  }

  .sub-lvl-pill b {
    color: #f19107;
    font-family: 'Orbitron', monospace;
  }

  /* ═══════════════════════════════════════════════════════════
   SUB NODES (L2 inside panels — medium size)
   ═══════════════════════════════════════════════════════════ */
  .sub-node-row {
    display: flex;
    justify-content: center;
    gap: 0;
    position: relative;
    padding-top: 18px;
  }

  .sub-node-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: #1e1e1e;
    margin: 0 34px;
  }

  .sub-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 4px;
  }

  .sub-node-col::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 18px;
    background: #1e1e1e;
  }

  .sub-v {
    width: 1.5px;
    height: 12px;
    background: #1e1e1e;
    margin: 0 auto;
  }

  /* sub-node card */
  .nd2 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1.5px solid rgba(34, 197, 94, .35);
    border-radius: 10px;
    padding: 7px 9px;
    min-width: 72px;
    max-width: 84px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s, border-color .12s;
    text-align: center;
    position: relative;
  }

  .nd2:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .7);
  }

  .nd2.inactive {
    border-color: rgba(107, 114, 128, .3);
    opacity: .7;
  }

  .nd2.inactive:hover {
    border-color: rgba(107, 114, 128, .65);
  }

  .nd2.empty-slot {
    border-style: dashed;
    border-color: #1e1e1e;
    opacity: .2;
    cursor: default;
  }

  .nd2.empty-slot:hover {
    transform: none;
  }

  .nd2-arr {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 9px;
    color: #2a2a2a;
  }

  .nd2-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    color: #22c55e;
  }

  .nd2.inactive .nd2-av {
    background: rgba(107, 114, 128, .08);
    border-color: rgba(107, 114, 128, .3);
    color: #6b7280;
  }

  .nd2.empty-slot .nd2-av {
    background: rgba(255, 255, 255, .02);
    border: 1px dashed #1e1e1e;
    color: #1e1e1e;
  }

  .nd2-uid {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 3px;
  }

  .nd2-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
    margin-bottom: 3px;
  }

  .nd2.inactive .nd2-chk {
    background: rgba(107, 114, 128, .08);
    border-color: rgba(107, 114, 128, .25);
  }

  .nd2-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* ═══════════════════════════════════════════════════════════
   L3 NODES (small cards, 9 per L1 = 27 total)
   ═══════════════════════════════════════════════════════════ */
  .l3-row {
    display: flex;
    justify-content: center;
    gap: 0;
    position: relative;
    padding-top: 16px;
    flex-wrap: nowrap;
  }

  .l3-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: #1e1e1e;
    margin: 0 26px;
  }

  .l3-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 2px;
  }

  .l3-col::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 16px;
    background: #1e1e1e;
  }

  /* tiny L3 card */
  .nd3 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 8px;
    padding: 5px 6px;
    min-width: 52px;
    max-width: 62px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s;
    text-align: center;
  }

  .nd3:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .6);
  }

  .nd3.inactive {
    border-color: rgba(107, 114, 128, .22);
    opacity: .65;
  }

  .nd3.empty-slot {
    /* border-style: dashed;
    border-color: #1a1a1a;
    opacity: .15;
    cursor: default; */
  }

  .nd3.empty-slot:hover {
    transform: none;
  }

  .nd3-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: #22c55e;
  }

  .nd3.inactive .nd3-av {
    background: rgba(107, 114, 128, .07);
    border-color: rgba(107, 114, 128, .25);
    color: #6b7280;
  }

  .nd3.empty-slot .nd3-av {
    background: rgba(255, 255, 255, .02);
    border: 1px dashed #1a1a1a;
    color: #1a1a1a;
  }

  .nd3-uid {
    font-family: 'Orbitron', monospace;
    font-size: 7.5px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 3px;
  }

  .nd3-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .28);
    margin-bottom: 2px;
  }

  .nd3.inactive .nd3-chk {
    background: rgba(107, 114, 128, .06);
    border-color: rgba(107, 114, 128, .2);
  }

  .nd3-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 8px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* ═══════════════════════════════════════════════════════════
   LEVEL SUMMARY BOXES
   ═══════════════════════════════════════════════════════════ */
  .lvl-sum {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .lvl-box {
    background: var(--dark3, #1a1a1a);
    border: 1px solid #222;
    border-radius: 10px;
    padding: 10px 18px;
    text-align: center;
    min-width: 76px;
  }

  .lvl-box-lbl {
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .lvl-box-num {
    font-family: 'Orbitron', monospace;
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 2px;
  }

  .lvl-box-of {
    font-size: 10px;
    color: #444;
  }

  .pbar-bg {
    height: 4px;
    border-radius: 4px;
    background: #1a1a1a;
    overflow: hidden;
    margin-top: 6px;
  }

  .pbar {
    height: 100%;
    border-radius: 4px;
    transition: width .5s;
  }

  /* ═══════════════════════════════════════════════════════════
   POOL CARDS
   ═══════════════════════════════════════════════════════════ */
  .pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 14px;
  }

  .pool-card {
    background: var(--dark3, #1a1a1a);
    border: 1px solid var(--border, #222);
    border-radius: 14px;
    padding: 14px;
  }

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

  .ph {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .pname {
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: 700;
  }

  .pprice {
    font-size: 11px;
    color: #555;
    margin-top: 2px;
  }

  .badge-a {
    background: rgba(34, 197, 94, .12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
  }

  .badge-n {
    font-size: 10px;
    color: #2a2a2a;
    background: #111;
    border-radius: 4px;
    padding: 2px 8px;
  }

  .pt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
  }

  .pt-rb {
    background: rgba(241, 145, 7, .15);
    border: 2px solid rgba(241, 145, 7, .5);
    border-radius: 8px;
    padding: 3px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #f19107;
    display: inline-block;
    margin-bottom: 4px;
  }

  .pstem {
    width: 2px;
    height: 8px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .ptlbl {
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 4px;
    text-align: center;
  }

  .pl1r {
    display: flex;
    gap: 4px;
    justify-content: center;
  }

  .pl2r {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pl2g {
    display: flex;
    gap: 3px;
  }

  .pl3r {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .pl3g {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .pl3i {
    display: flex;
    gap: 3px;
  }

  .ps {
    border-radius: 6px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, .02);
    color: #2a2a2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .15s;
  }

  .psl1 {
    width: 76px;
    height: 24px;
    line-height: 24px;
    font-size: 10px;
    padding: 0 4px;
  }

  .psl2 {
    width: 28px;
    height: 20px;
    line-height: 20px;
  }

  .psl3 {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    padding: 0;
  }

  .ps.f1 {
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .35);
    color: #22c55e;
  }

  .ps.f2 {
    background: rgba(59, 130, 246, .1);
    border-color: rgba(59, 130, 246, .3);
    color: #3b82f6;
  }

  .ps.f3 {
    background: rgba(168, 85, 247, .15);
    border-color: rgba(168, 85, 247, .35);
  }

  .mprog {
    display: flex;
    gap: 4px;
    margin-top: 12px;
  }

  .mi {
    flex: 1;
    text-align: center;
  }

  .mv {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .mb {
    height: 4px;
    border-radius: 4px;
    background: #1a1a1a;
    overflow: hidden;
  }

  .mf {
    height: 100%;
    border-radius: 4px;
    transition: width .4s;
  }

  .ml {
    font-size: 9px;
    color: #333;
    margin-top: 2px;
  }

  .pir {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 3px;
    padding: 2px 0;
  }

  .pit {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, .06);
    margin-top: 6px;
    padding-top: 6px;
  }

  /* ═══════════════════════════════════════════════════════════
   INCOME TABLE
   ═══════════════════════════════════════════════════════════ */
  .tbl-scr {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ict {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 680px;
  }

  .ict th {
    padding: 9px 10px;
    text-align: left;
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid var(--border, #222);
  }

  .ict td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    vertical-align: middle;
  }

  .ict tr:last-child td {
    border-bottom: none;
  }

  .ict .crow {
    background: rgba(241, 145, 7, .04);
  }

  .cg {
    color: #22c55e;
  }

  .cb {
    color: #3b82f6;
  }

  .cr {
    color: #ef4444;
  }

  .cgo {
    color: #f19107;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
  }

  .tbadge {
    background: rgba(59, 130, 246, .14);
    color: #3b82f6;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
  }

  .bgg {
    background: rgba(34, 197, 94, .1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
  }

  .bggo {
    background: rgba(241, 145, 7, .1);
    color: #f19107;
    border: 1px solid rgba(241, 145, 7, .3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
  }

  /* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
  @media (max-width:900px) {
    .nd2 {
      min-width: 64px;
      max-width: 74px;
    }

    .nd3 {
      min-width: 46px;
      max-width: 56px;
    }

    .sub-panel {
      min-width: 240px;
    }
  }

  @media (max-width:680px) {
    .nd1 {
      min-width: 76px;
      padding: 8px 10px;
    }

    .nd1-uid {
      font-size: 10px;
    }

    .nd2 {
      min-width: 58px;
      max-width: 66px;
      padding: 6px 7px;
    }

    .nd2-uid {
      font-size: 8px;
    }

    .nd3 {
      min-width: 40px;
      max-width: 50px;
      padding: 4px 4px;
    }

    .nd3-uid {
      font-size: 7px;
    }

    .sub-panel {
      min-width: 200px;
      padding: 8px 6px;
    }

    .pool-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width:480px) {
    .nd1 {
      min-width: 66px;
      padding: 7px 8px;
    }

    .nd1-uid {
      font-size: 9px;
    }

    .nd1-av {
      width: 28px;
      height: 28px;
    }

    .nd2 {
      min-width: 52px;
      max-width: 60px;
    }

    .nd3 {
      min-width: 36px;
      max-width: 44px;
    }

    .nd3-uid {
      font-size: 6.5px;
    }

    .root-card {
      padding: 12px 18px;
    }

    .root-uid {
      font-size: 14px;
    }
  }

  /* ═══════════════════════════════════════════════════════════
   CORE LAYOUT
   ═══════════════════════════════════════════════════════════ */
  .mtp *,
  .mtp *::before,
  .mtp *::after {
    box-sizing: border-box;
  }

  /* Tabs */
  .mtp-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 14px;
  }

  .mtp-tabs::-webkit-scrollbar {
    display: none;
  }

  .mtp-tab {
    flex: 0 0 auto;
    padding: 8px 18px;
    border-radius: 24px;
    border: 1px solid var(--border, #222);
    background: var(--dark3, #1a1a1a);
    font-size: 12px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
    user-select: none;
  }

  .mtp-tab.active {
    background: rgba(241, 145, 7, .12);
    border-color: rgba(241, 145, 7, .5);
    color: #f19107;
    font-weight: 600;
  }

  .mtp-pane {
    display: none;
  }

  .mtp-pane.on {
    display: block;
  }

  /* Card */
  .mt-card {
    background: var(--dark2, #111);
    border: 1px solid var(--border, #222);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .mt-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Back button */
  .tree-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(241, 145, 7, .08);
    border: 1px solid rgba(241, 145, 7, .3);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: #f19107;
    text-decoration: none;
    margin-bottom: 14px;
    transition: .15s;
  }

  .tree-back:hover {
    background: rgba(241, 145, 7, .16);
  }

  /* Tree scroll wrapper */
  .tree-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    /* Compensate for card padding */
    padding: 0 16px;
  }

  .tree-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    padding: 8px 12px 20px;
  }

  /* ═══════════════════════════════════════════════════════════
   ROOT NODE
   ═══════════════════════════════════════════════════════════ */
  .root-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(241, 145, 7, .08);
    border: 2px solid rgba(241, 145, 7, .65);
    border-radius: 16px;
    padding: 14px 26px;
    text-align: center;
  }

  .root-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(241, 145, 7, .2);
    border: 2px solid rgba(241, 145, 7, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  .root-uid {
    font-family: 'Orbitron', monospace;
    font-size: 17px;
    font-weight: 700;
    color: #f19107;
    letter-spacing: 1px;
  }

  .root-sub {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
  }

  /* ═══════════════════════════════════════════════════════════
   LEVEL PILL
   ═══════════════════════════════════════════════════════════ */
  .lvl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dark3, #1a1a1a);
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
  }

  .lvl-pill b {
    color: #f19107;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
  }

  /* ═══════════════════════════════════════════════════════════
   L1 ROW — 3 nodes side by side, horizontal connector
   ═══════════════════════════════════════════════════════════ */
  .v-stem {
    width: 2px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .l1-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .l1-row-connector {
    width: 2px;
    height: 20px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .l1-nodes-wrap {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 3vw, 30px);
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
  }

  /* horizontal bar across top of L1 columns */
  .l1-nodes-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    transform: translateX(-50%);
    width: min(90%, 808px);
    height: 2px;
    background: #2a2a2a;
    display: none;
  }

  /* Hide by default, show on larger screens */

  /* Show horizontal bar only on larger screens where nodes are in a row */
  @media (min-width: 1024px) {
    .l1-nodes-wrap::before {
      display: block;
    }
  }

  /* Each L1 column: node + expanded subtree panel */
  .l1-col {
    flex: 1 1 300px;
    /* Grow, shrink, base width 300px */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 20px;
    min-width: 280px;
    max-width: 400px;
  }

  /* vertical drop to each node */
  .l1-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: #2a2a2a;
  }

  /* ═══════════════════════════════════════════════════════════
   L1 NODE CARD
   ═══════════════════════════════════════════════════════════ */
  .nd1 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1.5px solid rgba(34, 197, 94, .4);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 88px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
    text-align: center;
    width: 100%;
    max-width: 120px;
  }

  .nd1:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    border-color: rgba(34, 197, 94, .75);
  }

  .nd1.inactive {
    border-color: rgba(107, 114, 128, .35);
    opacity: .75;
  }

  .nd1.inactive:hover {
    border-color: rgba(107, 114, 128, .65);
  }

  .nd1.empty-slot {
    border-style: dashed;
    border-color: #222;
    opacity: .22;
    cursor: default;
  }

  .nd1.empty-slot:hover {
    transform: none;
    box-shadow: none;
  }

  .nd1-arr {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 10px;
    color: #2a2a2a;
  }

  .nd1-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .14);
    border: 1.5px solid rgba(34, 197, 94, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: #22c55e;
  }

  .nd1.inactive .nd1-av {
    background: rgba(107, 114, 128, .1);
    border-color: rgba(107, 114, 128, .35);
    color: #6b7280;
  }

  .nd1.empty-slot .nd1-av {
    background: rgba(255, 255, 255, .02);
    border: 1.5px dashed #222;
    color: #222;
  }

  .nd1-uid {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .nd1-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    margin-bottom: 4px;
  }

  .nd1.inactive .nd1-chk {
    background: rgba(107, 114, 128, .1);
    border-color: rgba(107, 114, 128, .3);
  }

  .nd1-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* ═══════════════════════════════════════════════════════════
   EXPANDED SUBTREE PANEL
   ═══════════════════════════════════════════════════════════ */
  .sub-panel {
    background: rgba(0, 0, 0, .35);
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    padding: 12px 10px 10px;
    margin-top: 10px;
    width: 100%;
    max-width: 420px;
    min-width: 280px;
    overflow-x: auto;
    /* Allow horizontal scroll within panel */
    -webkit-overflow-scrolling: touch;
  }

  .sub-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
  }

  /* stats bar: 3/3  6/9  0/27 */
  .sub-stats {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .sub-stat {
    text-align: center;
    min-width: 44px;
  }

  .sub-stat-val {
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 700;
  }

  .sub-stat-bar {
    height: 3px;
    border-radius: 3px;
    background: #1a1a1a;
    overflow: hidden;
    margin: 3px 0;
  }

  .sub-stat-fill {
    height: 100%;
    border-radius: 3px;
  }

  .sub-stat-lbl {
    font-size: 9px;
    color: #444;
  }

  .sub-lvl-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #444;
    margin: 6px auto;
  }

  .sub-lvl-pill b {
    color: #f19107;
    font-family: 'Orbitron', monospace;
  }

  /* ═══════════════════════════════════════════════════════════
   SUB NODES (L2 & L3)
   ═══════════════════════════════════════════════════════════ */
  .sub-node-row {
    display: flex;
    justify-content: center;
    gap: clamp(5px, 2vw, 15px);
    position: relative;
    padding-top: 18px;
    flex-wrap: wrap;
    /* Allow wrapping */
    min-width: min-content;
  }

  .sub-node-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background: #1e1e1e;
    display: none;
    /* Hide connector line on small screens */
  }

  /* Show connector only on larger screens */
  @media (min-width: 768px) {
    .sub-node-row::after {
      display: block;
    }
  }

  .sub-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 4px;
    flex: 0 1 auto;
  }

  .sub-node-col::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 18px;
    background: #1e1e1e;
    display: none;
    /* Hide vertical connectors on small screens */
  }

  @media (min-width: 768px) {
    .sub-node-col::before {
      display: block;
    }
  }

  .sub-v {
    width: 1.5px;
    height: 12px;
    background: #1e1e1e;
    margin: 0 auto;
    display: none;
    /* Hide on small screens */
  }

  @media (min-width: 768px) {
    .sub-v {
      display: block;
    }
  }

  /* sub-node card L2 */
  .nd2 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1.5px solid rgba(34, 197, 94, .35);
    border-radius: 10px;
    padding: 7px 9px;
    min-width: 72px;
    max-width: 84px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s, border-color .12s;
    text-align: center;
    position: relative;
  }

  .nd2:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .7);
  }

  .nd2.inactive {
    border-color: rgba(107, 114, 128, .3);
    opacity: .7;
  }

  .nd2.inactive:hover {
    border-color: rgba(107, 114, 128, .65);
  }

  .nd2.empty-slot {
    border-style: dashed;
    border-color: #1e1e1e;
    opacity: .2;
    cursor: default;
  }

  .nd2.empty-slot:hover {
    transform: none;
  }

  .nd2-arr {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 9px;
    color: #2a2a2a;
  }

  .nd2-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    color: #22c55e;
  }

  /* L3 nodes row */
  .l3-row {
    display: flex;
    justify-content: center;
    gap: clamp(2px, 1vw, 8px);
    position: relative;
    padding-top: 16px;
    flex-wrap: wrap;
    min-width: min-content;
  }

  .l3-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1.5px;
    background: #1e1e1e;
    display: none;
  }

  @media (min-width: 768px) {
    .l3-row::after {
      display: block;
    }
  }

  .l3-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 2px;
  }

  .l3-col::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: 16px;
    background: #1e1e1e;
    display: none;
  }

  @media (min-width: 768px) {
    .l3-col::before {
      display: block;
    }
  }

  /* tiny L3 card */
  .nd3 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 8px;
    padding: 5px 6px;
    min-width: 52px;
    max-width: 62px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s;
    text-align: center;
  }

  .nd3:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .6);
  }

  /* ═══════════════════════════════════════════════════════════
   LEVEL SUMMARY BOXES
   ═══════════════════════════════════════════════════════════ */
  .lvl-sum {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .lvl-box {
    background: var(--dark3, #1a1a1a);
    border: 1px solid #222;
    border-radius: 10px;
    padding: 10px 18px;
    text-align: center;
    min-width: 76px;
    flex: 1 1 auto;
    max-width: 120px;
  }

  /* ═══════════════════════════════════════════════════════════
   POOL CARDS
   ═══════════════════════════════════════════════════════════ */
  .pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 14px;
  }

  /* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

  /* Tablet Landscape */
  @media (max-width: 1200px) {
    .l1-col {
      min-width: 260px;
    }

    .sub-panel {
      min-width: 240px;
    }

    .nd2 {
      min-width: 68px;
      max-width: 78px;
    }

    .nd3 {
      min-width: 48px;
      max-width: 58px;
    }
  }

  /* Tablet Portrait */
  @media (max-width: 900px) {
    .l1-nodes-wrap {
      gap: 15px;
    }

    .l1-col {
      min-width: 240px;
      flex: 1 1 280px;
    }

    .nd2 {
      min-width: 64px;
      max-width: 74px;
      padding: 6px 7px;
    }

    .nd3 {
      min-width: 46px;
      max-width: 56px;
    }

    .sub-panel {
      min-width: 220px;
      padding: 10px 8px;
    }

    .sub-node-row {
      gap: 8px;
    }
  }

  /* Mobile Landscape */
  @media (max-width: 680px) {
    .mt-card {
      padding: 12px;
    }

    .tree-scroll {
      margin: 0 -12px;
      padding: 0 12px;
    }

    .l1-nodes-wrap {
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }

    .l1-col {
      width: 100%;
      min-width: 280px;
      max-width: 100%;
    }

    .l1-col::before {
      display: none;
      /* Hide vertical connectors */
    }

    .nd1 {
      max-width: 140px;
    }

    .nd1-uid {
      font-size: 10px;
    }

    .nd2 {
      min-width: 58px;
      max-width: 66px;
      padding: 6px 7px;
    }

    .nd2-uid {
      font-size: 8px;
    }

    .nd3 {
      min-width: 42px;
      max-width: 52px;
      padding: 4px 4px;
    }

    .nd3-uid {
      font-size: 7px;
    }

    .sub-panel {
      min-width: 260px;
      max-width: 100%;
      padding: 10px 8px;
    }

    .sub-node-row {
      gap: 6px;
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: 8px;
    }

    .l3-row {
      gap: 4px;
      overflow-x: auto;
      padding-bottom: 8px;
      justify-content: flex-start;
    }

    .lvl-sum {
      gap: 8px;
    }

    .lvl-box {
      padding: 8px 12px;
      min-width: 70px;
    }

    .pool-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Mobile Portrait */
  @media (max-width: 480px) {
    .mt-card {
      padding: 10px;
    }

    .tree-scroll {
      margin: 0 -10px;
      padding: 0 10px;
    }

    .root-card {
      padding: 10px 16px;
    }

    .root-av {
      width: 44px;
      height: 44px;
    }

    .root-uid {
      font-size: 14px;
    }

    .l1-col {
      min-width: 260px;
      padding-top: 15px;
    }

    .nd1 {
      max-width: 120px;
      padding: 8px 10px;
    }

    .nd1-uid {
      font-size: 9px;
    }

    .nd1-av {
      width: 28px;
      height: 28px;
    }

    .nd1-chk {
      width: 18px;
      height: 18px;
    }

    .nd2 {
      min-width: 52px;
      max-width: 60px;
      padding: 5px 5px;
    }

    .nd2-av {
      width: 22px;
      height: 22px;
    }

    .nd2-uid {
      font-size: 7px;
    }

    .nd3 {
      min-width: 38px;
      max-width: 46px;
      padding: 4px 3px;
    }

    .nd3-uid {
      font-size: 6.5px;
    }

    .nd3-av {
      width: 18px;
      height: 18px;
    }

    .sub-panel {
      min-width: 240px;
      padding: 8px 6px;
    }

    .sub-lvl-pill {
      font-size: 9px;
      padding: 2px 10px;
    }

    .lvl-pill {
      font-size: 10px;
      padding: 4px 14px;
    }

    .lvl-box-num {
      font-size: 18px;
    }

    .lvl-box-lbl {
      font-size: 9px;
    }

    .lvl-box-of {
      font-size: 9px;
    }
  }

  /* Small Mobile */
  @media (max-width: 360px) {
    .l1-col {
      min-width: 240px;
    }

    .sub-panel {
      min-width: 220px;
    }

    .nd2 {
      min-width: 48px;
      max-width: 56px;
    }

    .nd3 {
      min-width: 34px;
      max-width: 42px;
    }

    .lvl-box {
      min-width: 65px;
      padding: 6px 8px;
    }

    .lvl-box-num {
      font-size: 16px;
    }
  }
</style>

<div class="layout mtp">
  <?php require_once 'Include/menu.php'; ?>
  <div class="main-content">
    <?php require_once 'Include/topbar.php'; ?>
    <div class="page-content">

      <div class="page-header">
        <div class="breadcrumb">
          <i class="fas fa-home"></i> <i class="fas fa-chevron-right"></i> Matrix Tree
        </div>
        <h3>Matrix Tree &amp; Pool Status</h3>
        <div class="subtitle">Working 3×3 plan · Global auto-pools · Income calculator</div>
      </div>

      <!-- TABS -->
      <div class="mtp-tabs">
        <div class="mtp-tab active" onclick="mtpTab('tree',this)"><i class="fas fa-sitemap"></i> Working Tree</div>
        <div class="mtp-tab" onclick="mtpTab('pools',this)"><i class="fas fa-th"></i> Global Pools</div>
    
      </div>

      <!-- ══════════════════════════════════════════════════════
           PANE 1 — WORKING TREE
           ══════════════════════════════════════════════════════ -->
      <div id="pane-tree" class="mtp-pane on">
        <div class="mt-card">
          <div class="mt-card-title">
            <i class="fas fa-sitemap"></i> Working Matrix Tree
            <span style="font-size:11px;color:#444;font-weight:400">3×3 BFS &nbsp;·&nbsp; <?= $totalMembers ?> members</span>
            <?php if ($viewId !== $myId): ?>
              <a class="tree-back" href="<?= xe($selfUrl) ?>" style="margin-left:auto;font-size:11px;padding:4px 12px">
                <i class="fas fa-arrow-left"></i> My Tree
              </a>
            <?php endif; ?>
          </div>

          <?php if ($viewId !== $myId && $fromId): ?>
            <a class="tree-back" href="<?= xe($selfUrl) ?>?view=<?= $fromId ?>">
              <i class="fas fa-arrow-left"></i> Back to <?= xe($viewedUser['user_id'] ?? '') ?>
            </a>
          <?php endif; ?>

          <div class="tree-scroll">
            <div class="tree-inner">

              <!-- ── ROOT NODE ──────────────────────────────── -->
              <div class="root-card">
                <div class="root-av">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                       stroke="#f19107" stroke-width="2" stroke-linecap="round">
                    <circle cx="12" cy="8" r="4"/>
                    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                  </svg>
                </div>
                <div class="root-uid"><?= xe($viewedUser['user_id'] ?? 'YOU') ?></div>
                <div class="root-sub">
                  <?= $viewId === $myId ? 'YOU' : 'Member' ?>
                  &nbsp;·&nbsp; <?= $totalMembers ?> downline
                </div>
              </div>

              <?php if (empty($treeNodes)): ?>
                <div style="text-align:center;padding:40px 16px;color:#444;font-size:13px">
                  <i class="fas fa-users" style="font-size:36px;color:#222;display:block;margin-bottom:14px"></i>
                  No team members yet.
                </div>
              <?php else: ?>

                <!-- stem + level pill -->
                <div class="v-stem" style="height:20px"></div>
                <div style="text-align:center">
                  <span class="lvl-pill">LEVEL 1 &nbsp;<b><?= count($treeNodes) ?></b>&nbsp;<span>/ 3</span></span>
                </div>

                <!-- ── L1 ROW ────────────────────────────────── -->
                <div class="l1-outer" style="width:100%">
                  <div class="v-stem" style="height:14px"></div>

                  <div class="l1-nodes-wrap" style="--l1-half:<?= min(count($treeNodes),3) * 155 / 2 ?>px">
                    <?php
                    /* Pad to always 3 columns */
                    $l1list = array_values($treeNodes);
                    while (count($l1list) < 3) { $l1list[] = null; }

                    foreach ($l1list as $idx => $l1n):
                      $isEmpty = $l1n === null;
                      $cid     = $isEmpty ? 0 : (int)$l1n['member_id'];
                      $cuid    = $isEmpty ? '' : xe($l1n['user_id'] ?? '');
                      $cActive = $isEmpty ? false : (bool)(int)($l1n['topup_flag'] ?? 0);
                      $cPkg    = $isEmpty ? 0 : (int)($l1n['currentPackage'] ?? 0);

                      /* this L1's subtree */
                      $ct       = $isEmpty ? [] : ($childTrees[$cid] ?? []);
                      $ctNodes  = $ct['tree']     ?? [];   // L1 of child (their L2)
                      $ctAll    = $ct['nodes']    ?? [];
                      $ctLvlMap = $ct['levelMap'] ?? [];
                      $ctTotal  = (int)($ct['total'] ?? 0);

                      $cl1 = count($ctLvlMap[1] ?? []);
                      $cl2 = count($ctLvlMap[2] ?? []);
                      $cl3 = count($ctLvlMap[3] ?? []);

                      /* URL for clicking this L1 node */
                      $nodeUrl = xe($selfUrl) . '?view=' . $cid . '&from=' . $viewId;
                    ?>
                    <div class="l1-col">

                      <!-- L1 NODE CARD -->
                      <?php if (!$isEmpty): ?>
                        <a class="nd1 <?= $cActive ? '' : 'inactive' ?>" href="<?= $nodeUrl ?>">
                          <i class="nd1-arr fas fa-chevron-right"></i>
                          <div class="nd1-av">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
                                 stroke="currentColor" stroke-width="2" stroke-linecap="round">
                              <circle cx="12" cy="8" r="4"/>
                              <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                            </svg>
                          </div>
                          <div class="nd1-uid"><?= $cuid ?></div>
                          <div class="nd1-chk">
                            <?php if ($cActive): ?>
                              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                            <?php else: ?>
                              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>
                            <?php endif; ?>
                          </div>
                          <?php if ($cPkg > 0): ?><div class="nd1-pkg">S<?= $cPkg ?></div><?php endif; ?>
                        </a>
                      <?php else: ?>
                        <div class="nd1 empty-slot">
                          <div class="nd1-av">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">
                              <line x1="12" y1="5" x2="12" y2="19"/>
                              <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                          </div>
                          <div style="font-size:10px;color:#222;margin-top:6px">Empty</div>
                        </div>
                      <?php endif; ?>

                      <!-- ── EXPANDED SUBTREE PANEL ──────────── -->
                      <?php if (!$isEmpty): ?>
                      <div class="sub-panel">
                        <!-- <div class="sub-panel-title"><?= $cuid ?> — Downline (3 Levels)</div> -->


                        <?php if (empty($ctNodes)): ?>
                          <div style="text-align:center;padding:12px;color:#333;font-size:11px">No downline</div>
                        <?php else: ?>

                          <!-- ── SUB L1 (child's level 1 = 3 nodes) ── -->
                          <div style="text-align:center">
                            <span class="sub-lvl-pill">Level 1 &nbsp;<b><?= $cl1 ?></b>&nbsp;<span style="color:#444">/ 3</span></span>
                          </div>

                          <div class="sub-node-row">
                            <?php
                            /* Get child's 3 direct children */
                            $cl1kids = [];
                            foreach ($ctNodes as $leg2 => $cn) {
                                $cl1kids[(int)$cn['leg_pos']] = $cn;
                            }
                            for ($sl1 = 1; $sl1 <= 3; $sl1++):
                              $sn      = $cl1kids[$sl1] ?? null;
                              $snEmpty = $sn === null;
                              $snMid   = $snEmpty ? 0 : (int)$sn['member_id'];
                              $snUid   = $snEmpty ? '' : xe($sn['user_id'] ?? '');
                              $snAct   = $snEmpty ? false : (bool)(int)($sn['topup_flag'] ?? 0);
                              $snPkg   = $snEmpty ? 0 : (int)($sn['currentPackage'] ?? 0);
                              $snUrl   = xe($selfUrl) . '?view=' . $snMid . '&from=' . $cid;
                            ?>
                              <div class="sub-node-col">
                                <?php if (!$snEmpty): ?>
                                  <a class="nd2 <?= $snAct ? '' : 'inactive' ?>" href="<?= $snUrl ?>">
                                    <i class="nd2-arr fas fa-chevron-right"></i>
                                    <div class="nd2-av">
                                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
                                    </div>
                                    <div class="nd2-uid"><?= $snUid ?></div>
                                    <div class="nd2-chk">
                                      <?php if ($snAct): ?>
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                                      <?php else: ?>
                                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>
                                      <?php endif; ?>
                                    </div>
                                    <?php if ($snPkg > 0): ?><div class="nd2-pkg">S<?= $snPkg ?></div><?php endif; ?>
                                  </a>
                                <?php else: ?>
                                  <div class="nd2 empty-slot">
                                    <div class="nd2-av"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
                                    <div style="font-size:8px;color:#1e1e1e;margin-top:4px">─</div>
                                  </div>
                                <?php endif; ?>
                              </div>
                            <?php endfor; ?>
                          </div>

                          <!-- ── SUB L2 (9 nodes = child's L2) ──── -->
                          <div class="sub-v" style="height:10px"></div>
                          <div style="text-align:center">
                            <span class="sub-lvl-pill">Level 2 &nbsp;<b><?= $cl2 ?></b>&nbsp;<span style="color:#444">/ 9</span></span>
                          </div>

                          <?php
                          /* Collect L2 nodes: children of each sub-L1 node */
                          $sl2all = [];
                          for ($sl1 = 1; $sl1 <= 3; $sl1++) {
                              $sl1n = $cl1kids[$sl1] ?? null;
                              for ($sl2 = 1; $sl2 <= 3; $sl2++) {
                                  $found = null;
                                  if ($sl1n) {
                                      foreach ($ctAll as $an) {
                                          if ((int)$an['parent_id'] === (int)$sl1n['member_id'] && (int)$an['leg_pos'] === $sl2) {
                                              $found = $an; break;
                                          }
                                      }
                                  }
                                  $sl2all[] = $found;
                              }
                          }
                          ?>
                        <div class="sub-node-row " style="&lt;
    div class=&quot;sub-node-row overflow-x: scroll;&quot;&gt;;
    overflow-x: scroll;
">
                            <?php foreach ($sl2all as $sn2):
                              $snEmpty = $sn2 === null;
                              $snMid   = $snEmpty ? 0 : (int)$sn2['member_id'];
                              $snUid   = $snEmpty ? '' : xe($sn2['user_id'] ?? '');
                              $snAct   = $snEmpty ? false : (bool)(int)($sn2['topup_flag'] ?? 0);
                              $snPkg   = $snEmpty ? 0 : (int)($sn2['currentPackage'] ?? 0);
                              $snUrl   = xe($selfUrl) . '?view=' . $snMid . '&from=' . $cid;
                            ?>
                              <div class="sub-node-col">
                                <?php if (!$snEmpty): ?>
                                  <a class="nd2 <?= $snAct ? '' : 'inactive' ?>" href="<?= $snUrl ?>">
                                    <i class="nd2-arr fas fa-chevron-right"></i>
                                    <div class="nd2-av"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg></div>
                                    <div class="nd2-uid"><?= $snUid ?></div>
                                    <div class="nd2-chk">
                                      <?php if ($snAct): ?>
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                                      <?php else: ?>
                                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>
                                      <?php endif; ?>
                                    </div>
                                    <?php if ($snPkg > 0): ?><div class="nd2-pkg">S<?= $snPkg ?></div><?php endif; ?>
                                  </a>
                                <?php else: ?>
                                  <div class="nd2 empty-slot">
                                    <div class="nd2-av"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
                                    <div style="font-size:8px;color:#1e1e1e;margin-top:4px">─</div>
                                  </div>
                                <?php endif; ?>
                              </div>
                            <?php endforeach; ?>
                          </div>

                          <!-- ── SUB L3 (27 tiny nodes = child's L3) ─ -->
                          <div class="sub-v" style="height:10px"></div>
                          <div style="text-align:center">
                            <span class="sub-lvl-pill">Level 3 &nbsp;<b><?= $cl3 ?></b>&nbsp;<span style="color:#444">/ 27</span></span>
                          </div>

                          <?php
                          /* Collect L3: children of each L2 node */
                          $sl3all = [];
                          foreach ($sl2all as $sn2) {
                              for ($sl3 = 1; $sl3 <= 3; $sl3++) {
                                  $found = null;
                                  if ($sn2) {
                                      foreach ($ctAll as $an) {
                                          if ((int)$an['parent_id'] === (int)$sn2['member_id'] && (int)$an['leg_pos'] === $sl3) {
                                              $found = $an; break;
                                          }
                                      }
                                  }
                                  $sl3all[] = $found;
                              }
                          }
                          ?>
                          <div class="l3-row">
                            <?php foreach ($sl3all as $sn3):
                              $snEmpty = $sn3 === null;
                              $snMid   = $snEmpty ? 0 : (int)$sn3['member_id'];
                              $snUid   = $snEmpty ? '' : xe($sn3['user_id'] ?? '');
                              $snAct   = $snEmpty ? false : (bool)(int)($sn3['topup_flag'] ?? 0);
                              $snPkg   = $snEmpty ? 0 : (int)($sn3['currentPackage'] ?? 0);
                              $snUrl   = xe($selfUrl) . '?view=' . $snMid . '&from=' . $cid;
                            ?>
                              <div class="l3-col">
                                <?php if (!$snEmpty): ?>
                                  <a class="nd3 <?= $snAct ? '' : 'inactive' ?>" href="<?= $snUrl ?>">
                                    <div class="nd3-av"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg></div>
                                    <div class="nd3-uid"><?= $snUid ?></div>
                                    <div class="nd3-chk">
                                      <?php if ($snAct): ?>
                                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                                      <?php else: ?>
                                        <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2"><circle cx="12" cy="12" r="8"/></svg>
                                      <?php endif; ?>
                                    </div>
                                    <?php if ($snPkg > 0): ?><div class="nd3-pkg">S<?= $snPkg ?></div><?php endif; ?>
                                  </a>
                                <?php else: ?>
                                  <div class="nd3 empty-slot">
                                    <div class="nd3-av"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
                                  </div>
                                <?php endif; ?>
                              </div>
                            <?php endforeach; ?>
                          </div>

                        <?php endif; /* end if ctNodes not empty */ ?>
                      </div><!-- /sub-panel -->
                      <?php else: ?>
                        <!-- empty slot panel placeholder -->
                        <div class="sub-panel" style="opacity:.12;min-height:60px"></div>
                      <?php endif; ?>

                    </div><!-- /l1-col -->
                    <?php endforeach; ?>
                  </div><!-- /l1-nodes-wrap -->
                </div><!-- /l1-outer -->

                <!-- Level summary -->
                <div class="lvl-sum">
                  <?php
                  $l1c = count($levelMap[1] ?? []);
                  $l2c = count($levelMap[2] ?? []);
                  $l3c = count($levelMap[3] ?? []);
                  ?>
                  <div class="lvl-box">
                    <div class="lvl-box-lbl">L1</div>
                    <div class="lvl-box-num" style="color:#22c55e"><?= $l1c ?></div>
                    <div class="lvl-box-of">of 3</div>
                    <div class="pbar-bg"><div class="pbar" style="width:<?= pct($l1c,3) ?>%;background:#22c55e"></div></div>
                  </div>
                  <div class="lvl-box">
                    <div class="lvl-box-lbl">L2</div>
                    <div class="lvl-box-num" style="color:#f59e0b"><?= $l2c ?></div>
                    <div class="lvl-box-of">of 9</div>
                    <div class="pbar-bg"><div class="pbar" style="width:<?= pct($l2c,9) ?>%;background:#f59e0b"></div></div>
                  </div>
                  <div class="lvl-box">
                    <div class="lvl-box-lbl">L3</div>
                    <div class="lvl-box-num" style="color:#f43f5e"><?= $l3c ?></div>
                    <div class="lvl-box-of">of 27</div>
                    <div class="pbar-bg"><div class="pbar" style="width:<?= pct($l3c,27) ?>%;background:<?= $l3c>=27?'#22c55e':'#f43f5e' ?>"></div></div>
                  </div>
                </div>

              <?php endif; /* end if treeNodes not empty */ ?>

            </div><!-- /tree-inner -->
          </div><!-- /tree-scroll -->
        </div><!-- /mt-card -->
      </div><!-- /pane-tree -->


      <!-- ══════════════════════════════════════════════════════
           PANE 2 — GLOBAL POOLS
           ══════════════════════════════════════════════════════ -->
      <div id="pane-pools" class="mtp-pane">
        <div class="mt-card">
          <div class="mt-card-title">
            <i class="fas fa-th"></i> Global Matrix Pools
            <span style="font-size:11px;color:#444;font-weight:400">3×3 BFS — Auto-Pool &amp; Re-Entry</span>
          </div>
          <div class="pool-grid">
            <?php foreach ($matrixPkgs as $mp):
              $mid      = (int)$mp['matrixId'];
              $gt       = $globalTrees[$mid] ?? ['entry'=>null,'levels'=>[],'re_entries'=>0];
              $enrolled = $gt['entry'] !== null;
              $l1n2     = array_values($gt['levels'][1] ?? []);
              $l2n2     = array_values($gt['levels'][2] ?? []);
              $l3n2     = array_values($gt['levels'][3] ?? []);
              $color    = $poolColors[$mid] ?? '#f19107';
              $ip       = $poolIncomes[$mid] ?? [];
              $ji       = array_filter($ip, fn($r)=>(int)$r['poolLevel']===0);
              $b1       = array_filter($ip, fn($r)=>(int)$r['poolLevel']===1);
              $b2       = array_filter($ip, fn($r)=>(int)$r['poolLevel']===2);
              $b3       = array_filter($ip, fn($r)=>(int)$r['poolLevel']===3);
              $jt       = array_sum(array_column(array_values($ji),'poolIncome'));
              $a1       = array_sum(array_column(array_values($b1),'poolIncome'));
              $a2       = array_sum(array_column(array_values($b2),'poolIncome'));
              $a3       = array_sum(array_column(array_values($b3),'poolIncome'));
              $tot      = $jt+$a1+$a2+$a3;
              $c1=count($l1n2);$c2=count($l2n2);$c3=count($l3n2);
            ?>
            <div class="pool-card <?= $enrolled?'enrolled':'' ?>" style="<?= $enrolled?"border-color:{$color}44":'' ?>">
              <div class="ph">
                <div>
                  <div class="pname" style="color:<?= $color ?>"><?= xe($mp['poolName']??'') ?>
                    <?php if ($gt['re_entries']>0): ?>
                      <span style="color:#3b82f6;font-size:10px;background:rgba(59,130,246,.1);border-radius:4px;padding:1px 6px;margin-left:4px">↻ <?= $gt['re_entries'] ?></span>
                    <?php endif; ?>
                  </div>
                  <div class="pprice">$<?= number_format((float)($mp['poolPrice']??0),0) ?></div>
                </div>
                <?= $enrolled ? '<span class="badge-a">ACTIVE</span>' : '<span class="badge-n">Not enrolled</span>' ?>
              </div>
              <?php if ($enrolled): ?>
                <div class="pt">
                  <span class="pt-rb">YOU</span>
                  <div class="pstem"></div>
                  <div class="ptlbl">Level 1 &nbsp;<span style="color:#22c55e;font-weight:700"><?= $c1 ?></span>/3</div>
                  <?php $lb2=[]; foreach($l1n2 as $n) $lb2[(int)$n['legPos']]=$n; ?>
                  <div class="pl1r">
                    <?php for($s=1;$s<=3;$s++): $n=$lb2[$s]??null; $u=$n?xe(substr($n['user_id']??'',0,7)):''; ?>
                      <div class="ps psl1 <?= $n?'f1':'' ?>"><?= $n?$u:'<span style="color:#1e1e1e">─</span>' ?></div>
                    <?php endfor; ?>
                  </div>
                  <div class="pstem"></div>
                  <div class="ptlbl">Level 2 &nbsp;<span style="color:#3b82f6;font-weight:700"><?= $c2 ?></span>/9</div>
                  <?php $l2arr2=array_values($l2n2); ?>
                  <div class="pl2r">
                    <?php for($g=0;$g<3;$g++): ?>
                      <div class="pl2g">
                        <?php for($s=0;$s<3;$s++): $n=$l2arr2[$g*3+$s]??null; $u=$n?xe(substr($n['user_id']??'',0,4)):''; ?>
                          <div class="ps psl2 <?= $n?'f2':'' ?>"><?= $n?$u:'─' ?></div>
                        <?php endfor; ?>
                      </div>
                    <?php endfor; ?>
                  </div>
                  <div class="pstem"></div>
                  <div class="ptlbl">Level 3 &nbsp;<span style="color:#a855f7;font-weight:700"><?= $c3 ?></span>/27</div>
                  <?php $l3arr2=array_values($l3n2); ?>
                  <div class="pl3r">
                    <?php for($mg=0;$mg<3;$mg++): ?>
                      <div class="pl3g">
                        <?php for($rg=0;$rg<3;$rg++): ?>
                          <div class="pl3i">
                            <?php for($s=0;$s<3;$s++): $n=$l3arr2[$mg*9+$rg*3+$s]??null; ?>
                              <div class="ps psl3 <?= $n?'f3':'' ?>" title="<?= $n?xe($n['user_id']??''):'Empty' ?>"></div>
                            <?php endfor; ?>
                          </div>
                        <?php endfor; ?>
                      </div>
                    <?php endfor; ?>
                  </div>
                </div>
                <div class="mprog">
                  <div class="mi"><div class="mv" style="color:#22c55e"><?= $c1 ?>/3</div><div class="mb"><div class="mf" style="width:<?= pct($c1,3) ?>%;background:#22c55e"></div></div><div class="ml">L1</div></div>
                  <div class="mi"><div class="mv" style="color:#3b82f6"><?= $c2 ?>/9</div><div class="mb"><div class="mf" style="width:<?= pct($c2,9) ?>%;background:#3b82f6"></div></div><div class="ml">L2</div></div>
                  <div class="mi"><div class="mv" style="color:#a855f7"><?= $c3 ?>/27</div><div class="mb"><div class="mf" style="width:<?= pct($c3,27) ?>%;background:#a855f7"></div></div><div class="ml">L3</div></div>
                </div>
                <?php if($tot>0): ?>
                  <div style="border-top:1px solid rgba(255,255,255,.05);margin-top:12px;padding-top:10px">
                    <?php if($jt>0): ?><div class="pir"><span style="color:#555">Join Income</span><span style="color:<?= $color ?>;font-weight:700">$<?= number_format($jt,2) ?></span></div><?php endif; ?>
                    <?php if($a1>0): ?><div class="pir"><span style="color:#22c55e">L1 Bonus</span><span style="color:#22c55e;font-weight:700">$<?= number_format($a1,2) ?></span></div><?php endif; ?>
                    <?php if($a2>0): ?><div class="pir"><span style="color:#3b82f6">L2 Bonus</span><span style="color:#3b82f6;font-weight:700">$<?= number_format($a2,2) ?></span></div><?php endif; ?>
                    <?php if($a3>0): ?><div class="pir"><span style="color:#a855f7">L3 Bonus</span><span style="color:#a855f7;font-weight:700">$<?= number_format($a3,2) ?></span></div><?php endif; ?>
                    <div class="pit"><span style="color:#888">Total Earned</span><span style="color:var(--success,#22c55e)">$<?= number_format($tot,2) ?></span></div>
                  </div>
                <?php endif; ?>
              <?php else: ?>
                <div style="padding:20px 0;text-align:center">
                  <div style="font-size:28px;opacity:.1;margin-bottom:8px">◎</div>
                  <div style="font-size:11px;color:#2a2a2a;line-height:1.6">Auto-entered when you reach<br>the required working step</div>
                </div>
              <?php endif; ?>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div><!-- /pane-pools -->


      <!-- ══════════════════════════════════════════════════════
           PANE 3 — INCOME TABLE
           ══════════════════════════════════════════════════════ -->


    </div><!-- /page-content -->
  </div><!-- /main-content -->
</div><!-- /layout.mtp -->

<script>
function mtpTab(name, el) {
  document.querySelectorAll('.mtp-pane').forEach(function(p){ p.classList.remove('on'); });
  document.querySelectorAll('.mtp-tab').forEach(function(t){ t.classList.remove('active'); });
  document.getElementById('pane-' + name).classList.add('on');
  el.classList.add('active');
}

window.onload = function () {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get('tab');

    if(tab){
        const tabBtn = document.querySelector('.mtp-tab[onclick*="'+tab+'"]');
        if(tabBtn){
            mtpTab(tab, tabBtn);
        }
    }
}
</script>

<?php require_once 'Include/footer.php'; ?>